"use client";

"use strict";
require('./index.css');
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// src/index.ts
var src_exports = {};
__export(src_exports, {
  Devtools: () => Devtools
});
module.exports = __toCommonJS(src_exports);

// src/features/tree/StateTree.tsx
var objectPath = __toESM(require("object-path-immutable"), 1);
var import_react9 = __toESM(require("react"), 1);
var import_react_arborist = require("react-arborist");

// src/features/tree/Node.tsx
var import_react_tooltip = require("@radix-ui/react-tooltip");

// src/lib/utils.ts
var import_clsx = require("clsx");
var import_tailwind_merge = require("tailwind-merge");
var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
var getStores = () => ({ ...window["__stan-js__"] });
var numberToEmoji = (num) => {
  const emojiMap = {
    0: "0\uFE0F\u20E3",
    1: "1\uFE0F\u20E3",
    2: "2\uFE0F\u20E3",
    3: "3\uFE0F\u20E3",
    4: "4\uFE0F\u20E3",
    5: "5\uFE0F\u20E3",
    6: "6\uFE0F\u20E3",
    7: "7\uFE0F\u20E3",
    8: "8\uFE0F\u20E3",
    9: "9\uFE0F\u20E3"
  };
  return num < 10 ? emojiMap[num] : `${emojiMap[Math.trunc(num / 10)]}${emojiMap[num % 10]}`;
};
var equal = (a, b) => {
  if (Object.is(a, b)) {
    return true;
  }
  if (a instanceof Date && b instanceof Date) {
    return a.getTime() === b.getTime();
  }
  if (typeof a !== "object" || a === null || typeof b !== "object" || b === null) {
    return false;
  }
  const keysA = Object.keys(a);
  if (keysA.length !== Object.keys(b).length) {
    return false;
  }
  return keysA.every((key) => Object.is(a[key], b[key]) && Object.prototype.hasOwnProperty.call(b, key));
};

// src/lib/components/Favicon.tsx
var import_react = __toESM(require("react"), 1);
var Favicon = ({ className }) => /* @__PURE__ */ import_react.default.createElement("svg", { className: cn("w-16 h-16", className), width: "128", height: "128", viewBox: "0 0 128 128", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M33.8569 29.6207C33.0153 27.4409 30.8764 26.0705 28.7902 25.0157C26.9522 24.0836 24.9565 23.2566 22.8995 23.3998C20.6349 23.5547 18.5866 24.8842 17.0526 26.5585C14.3001 29.5623 12.956 33.9072 13.8969 37.8724C14.8377 41.8375 18.1921 45.2153 22.2186 45.8377C23.2326 42.5563 24.3867 39.2808 26.21 36.3675C28.0334 33.4543 30.5872 30.9035 33.8539 29.6207H33.8569Z",
    fill: "#6B3519"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M84.4188 27.1224C79.764 22.459 72.69 21.3252 66.1097 21.0243C58.8193 20.6912 51.4209 21.0973 44.4257 23.1778C37.4305 25.2611 30.8327 29.1152 26.2832 34.8189C21.9119 40.3005 19.6561 47.1146 16.775 53.5078C13.894 59.9011 9.97562 66.3119 3.70799 69.456C5.26248 69.6547 6.81404 69.8505 8.36853 70.0491C4.91183 71.9601 1.98402 74.8236 0 78.2394C2.1944 77.0093 4.3888 75.7791 6.58028 74.549C3.3515 79.2241 2.60932 85.5181 4.66347 90.8185C4.0031 88.4371 5.37351 85.67 7.66726 84.7496C6.08063 88.1712 6.91923 92.56 9.6542 95.1547C9.25973 93.834 9.44382 92.3526 10.148 91.1692C12.6375 96.1044 17.301 99.6809 22.3736 101.875C27.4461 104.07 32.9599 105.022 38.4269 105.849C48.6333 107.389 58.9654 108.549 69.2625 107.833C79.5595 107.117 89.8828 104.438 98.5319 98.8072C106.915 93.349 116.596 86.082 115.202 76.1765C114.67 72.3955 113.592 70.1076 111.923 66.6713C110.906 64.5763 104.721 60.354 103.704 58.259C101.734 54.2004 101.594 48.9262 99.5224 44.9202C97.144 40.321 94.6048 35.7481 91.1919 31.8531C87.779 27.9581 83.4048 24.7439 84.4129 27.1137L84.4188 27.1224Z",
    fill: "#663519"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M80.027 24.855C80.5062 22.3976 82.9869 20.5655 85.4911 20.6298C87.9952 20.6941 90.2977 22.5174 91.1392 24.8725C91.9808 27.2305 91.4198 29.9801 89.8916 31.9641C87.5861 28.2152 83.5275 26.3481 80.0299 24.855H80.027Z",
    fill: "#6B3519"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M74.0691 68.1703C70.5306 64.4156 68.5875 59.5008 66.3668 54.8578C64.1461 50.2148 61.3644 45.5162 56.8762 42.9566C50.7225 39.4473 42.3657 41.0544 37.2785 45.9691C32.1943 50.8839 30.2716 58.5044 30.7859 66.0373C23.2472 66.5544 15.9803 70.242 11.1385 76.0099C13.5609 74.9931 16.1673 74.4116 18.7941 74.2977C15.0744 76.384 12.4067 80.2293 11.7668 84.4252C12.506 83.1951 13.8998 82.3799 15.3404 82.3331C15.203 85.6232 15.0657 88.9163 14.9254 92.2065C15.6004 90.8565 16.7312 89.7374 18.0958 89.0741C18.7678 93.6265 19.8957 98.1147 21.5934 101.817C28.7405 106.261 50.5034 110.109 65.8262 108.079C60.2686 102.521 57.7324 94.1437 59.2839 86.4619C60.8355 78.78 66.4281 72.0244 74.0691 68.1703Z",
    fill: "#A1582E"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M106.751 92.7207C109.594 89.8689 112.344 86.8242 114.056 83.1834C115.769 79.5426 115.792 73.4737 113.378 68.5969C111.611 65.0233 107.897 62.8844 106.103 60.9501C104.513 59.2378 103.298 56.4882 102.1 52.5027C101.153 49.3586 100.948 48.8765 99.9169 45.7587C98.8855 42.641 94.7713 35.6955 92.276 34.0738C89.5235 32.2855 85.7833 33.577 84.2084 36.461C83.1127 38.4684 83.4633 40.9229 83.8461 43.1757C85.1902 51.1147 86.5343 59.0508 87.8784 66.9898C93.4214 69.1842 98.865 72.1763 102.497 76.9041C106.129 81.6318 107.572 88.402 106.751 92.7236V92.7207Z",
    fill: "#A0572D"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M49.7817 69.2105C53.0576 69.2105 55.7133 66.3495 55.7133 62.8202C55.7133 59.2909 53.0576 56.4298 49.7817 56.4298C46.5058 56.4298 43.8501 59.2909 43.8501 62.8202C43.8501 66.3495 46.5058 69.2105 49.7817 69.2105Z",
    fill: "black"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M95.0898 65.4265C97.88 65.4265 100.142 62.9749 100.142 59.9508C100.142 56.9266 97.88 54.475 95.0898 54.475C92.2996 54.475 90.0377 56.9266 90.0377 59.9508C90.0377 62.9749 92.2996 65.4265 95.0898 65.4265Z",
    fill: "black"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M104.645 94.6346C108.519 91.9522 110.196 86.7277 109.258 82.1081C108.321 77.4884 105.08 73.5438 101.074 71.063C97.068 68.5823 92.3549 67.4427 87.6593 67.0249C79.3725 66.2885 70.8053 67.7612 63.5413 71.8169C56.2772 75.8726 50.4128 82.599 47.9876 90.5555C46.8889 94.1671 46.5325 98.2257 48.2155 101.606C49.9833 105.154 53.7556 107.369 57.633 108.178C61.5105 108.987 65.5311 108.575 69.4583 108.049C82.8205 106.267 95.2885 101.104 104.639 94.6346H104.645Z",
    fill: "#FCE6CB"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M49.7934 27.0464C56.4642 27.3182 63.0095 30.0473 67.8979 34.5939C67.4888 31.7713 65.8496 29.1473 63.4887 27.5432C64.9175 27.7068 66.2879 28.3467 67.3281 29.3373C67.1236 28.4431 66.7028 27.6016 66.1068 26.9062C68.3888 27.137 70.5569 28.3379 71.9653 30.1525C71.5066 28.8434 70.7877 27.6279 69.8615 26.5935C71.7345 27.1399 73.4029 28.3613 74.4928 29.9801C74.8201 28.5951 74.4724 27.0669 73.5753 25.9624C75.7376 26.4971 77.7158 27.7419 79.1271 29.4629C78.8758 28.7383 78.6216 28.0136 78.3703 27.289C80.0241 27.9756 81.5552 28.9574 82.8672 30.1788C80.8978 26.3189 77.0349 23.7563 73.0289 22.1083C69.02 20.4603 64.7422 19.5574 60.6982 18C61.7472 19.0461 62.5186 20.3668 62.9189 21.7927C59.7018 19.5983 55.7659 18.4821 51.8767 18.6574C53.8841 19.5399 55.5964 21.071 56.7009 22.9644C54.1676 21.1119 50.857 20.358 47.7714 20.9337C49.5158 21.1148 51.1521 22.1317 52.09 23.6131C50.7868 23.4027 49.4047 23.7358 48.3382 24.516C49.6502 24.8666 50.895 25.4627 51.9878 26.2663C51.006 26.0851 49.9512 26.3627 49.7904 27.0523L49.7934 27.0464Z",
    fill: "#6A361B"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M86.7272 79.7764C88.4307 78.5433 90.1838 77.2489 91.2124 75.4168C92.2409 73.5818 92.3286 71.0426 90.8442 69.5553C89.5936 68.3047 87.6563 68.1294 85.8886 68.0271C82.5195 67.8314 79.0278 67.6531 75.8837 68.8774C74.338 69.4794 72.8273 70.5283 72.3101 72.1062C71.717 73.9091 72.5906 75.9019 73.8617 77.3102C76.9444 80.729 83.0396 82.4529 86.7272 79.7793V79.7764Z",
    fill: "#2C201D"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    opacity: "0.2",
    d: "M85.0529 87.3005C83.6941 93.1415 77.7362 97.0131 71.7842 97.7641C65.8321 98.515 59.8713 96.7794 54.1734 94.9035C52.1923 94.2519 49.7437 93.6733 48.2447 95.1197C46.6493 96.6596 47.3331 100.403 48.5691 102.243C51.5729 106.714 54.6731 107.985 60.032 108.529C65.3909 109.072 73.0552 108.084 78.2184 106.548C86.2801 104.146 92.276 102.29 99.5809 98.1235C101.135 97.2381 104.487 94.8216 105.679 93.4863C106.874 92.1539 109.399 89.5124 109.153 87.7388C106.088 90.7104 99.9637 93.1006 95.7122 92.6915C91.4637 92.2824 87.4401 89.9303 85.0499 87.3005H85.0529Z",
    fill: "#A18F85"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    opacity: "0.69",
    d: "M29.4125 33.7319C29.094 31.7216 27.7499 29.8808 25.8945 29.0392C24.039 28.1977 21.7277 28.4169 20.1119 29.6558C18.496 30.8947 17.6837 33.1242 18.198 35.0936C18.5545 36.4581 19.4778 37.6182 20.5736 38.5064C21.6693 39.3947 22.9345 40.0405 24.191 40.6804C23.8374 39.8944 23.6738 39.0236 23.7235 38.1617C24.1471 37.9746 24.6848 38.0769 25.0091 38.4071C24.8396 37.7409 24.6702 37.0747 24.5007 36.4114L25.6373 36.5487C25.0734 35.7013 24.7637 34.6874 24.752 33.6706C26.3211 33.057 28.2233 33.4047 29.4067 33.7319H29.4125Z",
    fill: "#A0572D"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    opacity: "0.69",
    d: "M87.7556 30.4418C87.8696 28.8318 87.9748 27.1633 87.4108 25.6527C87.215 25.1267 86.9141 24.6037 86.4261 24.3261C85.757 23.9462 84.8804 24.1303 84.2493 24.5745C83.6181 25.0186 83.1827 25.679 82.759 26.3247C84.6174 27.5052 86.3034 28.9545 87.7556 30.4447V30.4418Z",
    fill: "#A0572D"
  }
), /* @__PURE__ */ import_react.default.createElement("path", { d: "M98.6108 74.3532C105.215 68.3748 113.916 64.6668 122.805 64.0503C114.056 65.5142 105.729 69.0586 98.6108 74.3532Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M101.135 77.4154C109.551 73.9237 119.027 72.8834 128 74.473C118.948 73.7337 109.814 74.7331 101.135 77.4154Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M102.1 82.4325C109.244 82.8883 116.084 87.2946 119.444 93.6178C115.368 87.8206 109.063 83.7503 102.1 82.4325Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M104.896 79.8991C111.798 79.2621 120.485 79.6946 124.581 86.1843C119.76 80.2965 111.885 80.1796 104.896 79.8991Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M33.8569 72.5445C43.0728 72.2377 52.3881 73.9412 60.8969 77.4943C52.1163 74.7418 43.0436 73.0763 33.8569 72.5445Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement("path", { d: "M32.5011 84.1593C41.8631 80.2351 52.3355 78.8355 62.3929 80.2351C52.2799 79.6887 42.1319 81.0387 32.5011 84.1593Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M84.2083 88.7615C82.2302 91.7857 79.2702 94.2635 75.7989 95.8034C75.27 96.0401 74.6418 96.3674 74.6476 96.905C74.6535 97.5566 75.5534 97.8313 76.2635 97.8956C81.9175 98.3923 87.7527 96.8787 92.2759 93.7434C88.7199 93.6967 85.4151 91.0727 84.2083 88.7585V88.7615Z",
    fill: "#6E3544"
  }
), /* @__PURE__ */ import_react.default.createElement("path", { d: "M33.0271 93.2525C41.7989 87.8118 52.204 84.9366 62.5244 85.1061C52.2566 85.7898 42.1904 88.5657 33.0271 93.2525Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M79.5215 94.2606C79.8633 96.8758 79.9598 99.5202 79.8078 102.153C82.0928 102.433 84.4538 102.054 86.5342 101.069C87.0455 100.826 87.5452 100.543 87.9309 100.131C88.7812 99.2134 88.8981 97.8546 88.9682 96.6069C89.0266 95.5726 89.0822 94.4973 88.7023 93.533C88.2845 92.4636 87.3962 91.6659 86.616 90.8214C85.8359 89.977 85.1112 88.9485 85.155 87.803C84.0944 90.4971 82.2418 92.8785 79.5186 94.2635L79.5215 94.2606Z",
    fill: "#F5F5F5"
  }
), /* @__PURE__ */ import_react.default.createElement("path", { d: "M62.6384 87.9871C51.5349 92.5396 41.9187 100.321 35.1484 110.215C41.2028 99.827 51.2164 91.7389 62.6384 87.9871Z", fill: "black" }), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M84.895 81.0591C86.467 85.8453 84.1382 91.3094 80.2257 94.4827C76.3132 97.656 71.1354 98.8686 66.1009 99.0965C60.704 99.3419 54.7432 98.2871 51.2748 94.1437",
    fill: "#FCE6CB"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M84.895 81.0591C86.8936 86.7599 83.4603 93.1298 78.4696 96.0459C73.5402 99.0439 67.1469 99.8036 61.4841 99.1871C57.6564 98.7225 53.7175 97.2527 51.2719 94.1437C53.8753 97.0365 57.7469 98.3631 61.5367 98.7196C67.1849 99.1841 73.2217 98.4624 78.1803 95.5726C83.0775 92.7412 86.4992 86.7219 84.8921 81.0562L84.895 81.0591Z",
    fill: "#A18F85"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M85.1843 86.7979C84.7957 89.1618 86.1631 91.5841 88.1618 92.9077C90.1604 94.2314 92.6675 94.5849 95.0547 94.4125C98.6341 94.1525 102.126 92.7587 104.899 90.4766",
    fill: "#FCE6CB"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M85.1843 86.7979C84.9739 88.8871 86.0433 90.8886 87.6095 92.1918C90.9084 94.7778 95.5485 94.4505 99.3617 93.2876C101.343 92.6623 103.21 91.698 104.899 90.4766C103.353 91.8909 101.515 93.0187 99.5166 93.7375C96.5274 94.8128 93.1525 95.1752 90.0932 94.1554C87.0719 93.2028 84.4859 90.0646 85.1843 86.7979Z",
    fill: "#A18F85"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M51.2719 61.5491C52.1546 61.5491 52.8702 60.8335 52.8702 59.9508C52.8702 59.068 52.1546 58.3524 51.2719 58.3524C50.3892 58.3524 49.6736 59.068 49.6736 59.9508C49.6736 60.8335 50.3892 61.5491 51.2719 61.5491Z",
    fill: "#F2F2F2"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M95.7414 58.9515C96.6241 58.9515 97.3397 58.2359 97.3397 57.3531C97.3397 56.4704 96.6241 55.7548 95.7414 55.7548C94.8587 55.7548 94.1431 56.4704 94.1431 57.3531C94.1431 58.2359 94.8587 58.9515 95.7414 58.9515Z",
    fill: "#F2F2F2"
  }
), /* @__PURE__ */ import_react.default.createElement(
  "path",
  {
    d: "M84.0681 90.2458C84.3866 92.9223 84.4801 95.6252 84.3516 98.3192C85.1113 95.3067 85.1697 91.5432 84.8804 88.4488C84.5502 88.8579 84.4041 89.8922 84.0681 90.2458Z",
    fill: "#D9D9D9"
  }
));

// src/lib/components/ui/alert.tsx
var import_class_variance_authority = require("class-variance-authority");
var React2 = __toESM(require("react"), 1);
var alertVariants = (0, import_class_variance_authority.cva)(
  "relative w-full rounded-lg border border-slate-200 p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-slate-950 dark:border-slate-800 dark:[&>svg]:text-slate-50",
  {
    variants: {
      variant: {
        default: "bg-white text-slate-950 dark:bg-slate-950 dark:text-slate-50",
        destructive: "border-red-500/50 text-red-500 dark:border-red-500 [&>svg]:text-red-500 dark:border-red-900/50 dark:text-red-900 dark:dark:border-red-900 dark:[&>svg]:text-red-900"
      }
    },
    defaultVariants: {
      variant: "default"
    }
  }
);
var Alert = React2.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  "div",
  {
    ref,
    role: "alert",
    className: cn(alertVariants({ variant }), className),
    ...props
  }
));
Alert.displayName = "Alert";
var AlertTitle = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  "h5",
  {
    ref,
    className: cn("mb-1 font-medium leading-none tracking-tight", className),
    ...props
  }
));
AlertTitle.displayName = "AlertTitle";
var AlertDescription = React2.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React2.createElement(
  "div",
  {
    ref,
    className: cn("text-sm [&_p]:leading-relaxed", className),
    ...props
  }
));
AlertDescription.displayName = "AlertDescription";

// src/lib/components/ui/button.tsx
var import_react_slot = require("@radix-ui/react-slot");
var import_class_variance_authority2 = require("class-variance-authority");
var React3 = __toESM(require("react"), 1);
var buttonVariants = (0, import_class_variance_authority2.cva)(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
  {
    variants: {
      variant: {
        default: "bg-slate-900 text-slate-50 hover:bg-slate-900/90 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/90",
        destructive: "bg-red-500 text-slate-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/90",
        outline: "border border-slate-200 bg-white hover:bg-slate-100 hover:text-slate-900 dark:border-slate-800 dark:bg-slate-950 dark:hover:bg-slate-800 dark:hover:text-slate-50",
        secondary: "bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
        ghost: "hover:bg-slate-100 hover:text-slate-900 dark:hover:bg-slate-800 dark:hover:text-slate-50",
        link: "text-slate-900 underline-offset-4 hover:underline dark:text-slate-50"
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
);
var Button = React3.forwardRef(
  ({ className, variant, size, asChild = false, ...props }, ref) => {
    const Comp = asChild ? import_react_slot.Slot : "button";
    return /* @__PURE__ */ React3.createElement(
      Comp,
      {
        className: cn(buttonVariants({ variant, size, className })),
        ref,
        ...props
      }
    );
  }
);
Button.displayName = "Button";

// src/lib/components/ui/calendar.tsx
var import_lucide_react = require("lucide-react");
var React4 = __toESM(require("react"), 1);
var import_react_day_picker = require("react-day-picker");
var Calendar = ({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}) => /* @__PURE__ */ React4.createElement(
  import_react_day_picker.DayPicker,
  {
    showOutsideDays,
    className: cn("p-3", className),
    classNames: {
      months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
      month: "space-y-4",
      caption: "flex justify-center pt-1 relative items-center",
      caption_label: "text-sm font-medium",
      nav: "space-x-1 flex items-center",
      nav_button: cn(
        buttonVariants({ variant: "outline" }),
        "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
      ),
      nav_button_previous: "absolute left-1",
      nav_button_next: "absolute right-1",
      table: "w-full border-collapse space-y-1",
      head_row: "flex",
      head_cell: "text-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
      row: "flex w-full mt-2",
      cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800",
      day: cn(
        buttonVariants({ variant: "ghost" }),
        "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
      ),
      day_range_end: "day-range-end",
      day_selected: "bg-slate-900 text-slate-50 hover:bg-slate-900 hover:text-slate-50 focus:bg-slate-900 focus:text-slate-50 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50 dark:hover:text-slate-900 dark:focus:bg-slate-50 dark:focus:text-slate-900",
      day_today: "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50",
      day_outside: "day-outside text-slate-500 opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
      day_disabled: "text-slate-500 opacity-50 dark:text-slate-400",
      day_range_middle: "aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
      day_hidden: "invisible",
      ...classNames
    },
    components: {
      IconLeft: ({ ...props2 }) => /* @__PURE__ */ React4.createElement(import_lucide_react.ChevronLeft, { className: "h-4 w-4", ...props2 }),
      IconRight: ({ ...props2 }) => /* @__PURE__ */ React4.createElement(import_lucide_react.ChevronRight, { className: "h-4 w-4", ...props2 })
    },
    ...props
  }
);
Calendar.displayName = "Calendar";

// src/lib/components/ui/input.tsx
var React5 = __toESM(require("react"), 1);
var Input = React5.forwardRef(
  ({ className, type, ...props }, ref) => /* @__PURE__ */ React5.createElement(
    "input",
    {
      type,
      className: cn(
        "flex h-10 w-full rounded-md border border-slate-200 bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-slate-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-800 dark:bg-slate-950 dark:placeholder:text-slate-400",
        className
      ),
      ref,
      ...props
    }
  )
);
Input.displayName = "Input";

// src/lib/components/ui/label.tsx
var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
var import_class_variance_authority3 = require("class-variance-authority");
var React6 = __toESM(require("react"), 1);
var labelVariants = (0, import_class_variance_authority3.cva)(
  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
);
var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
  LabelPrimitive.Root,
  {
    ref,
    className: cn(labelVariants(), className),
    ...props
  }
));
Label.displayName = LabelPrimitive.Root.displayName;

// src/lib/components/ui/popover.tsx
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
var React7 = __toESM(require("react"), 1);
var Popover = PopoverPrimitive.Root;
var PopoverTrigger = PopoverPrimitive.Trigger;
var PopoverContent = React7.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React7.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React7.createElement(
  PopoverPrimitive.Content,
  {
    ref,
    align,
    sideOffset,
    className: cn(
      "z-50 w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-slate-800 dark:bg-slate-950 dark:text-slate-50",
      className
    ),
    ...props
  }
)));
PopoverContent.displayName = PopoverPrimitive.Content.displayName;

// src/lib/components/ui/resizable.tsx
var import_lucide_react2 = require("lucide-react");
var import_react2 = __toESM(require("react"), 1);
var ResizablePrimitive = __toESM(require("react-resizable-panels"), 1);
var ResizablePanelGroup = ({
  className,
  ...props
}) => /* @__PURE__ */ import_react2.default.createElement(
  ResizablePrimitive.PanelGroup,
  {
    className: cn(
      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
      className
    ),
    ...props
  }
);
var ResizablePanel = ResizablePrimitive.Panel;
var ResizableHandle = ({
  withHandle,
  className,
  ...props
}) => /* @__PURE__ */ import_react2.default.createElement(
  ResizablePrimitive.PanelResizeHandle,
  {
    className: cn(
      "relative flex w-px items-center justify-center bg-slate-200 after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-slate-950 focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90 dark:bg-slate-800 dark:focus-visible:ring-slate-300",
      className
    ),
    ...props
  },
  withHandle && /* @__PURE__ */ import_react2.default.createElement("div", { className: "z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-slate-200 bg-slate-200 dark:border-slate-800 dark:bg-slate-800" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.GripVertical, { className: "h-2.5 w-2.5" }))
);

// src/lib/components/ui/time-picker-demo.tsx
var import_lucide_react3 = require("lucide-react");
var React10 = __toESM(require("react"), 1);

// src/lib/components/ui/time-picker-input.tsx
var import_react3 = __toESM(require("react"), 1);

// src/lib/components/ui/time-picker-utils.tsx
function isValidHour(value) {
  return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
}
function isValid12Hour(value) {
  return /^(0[1-9]|1[0-2])$/.test(value);
}
function isValidMinuteOrSecond(value) {
  return /^[0-5][0-9]$/.test(value);
}
function getValidNumber(value, { max, min = 0, loop = false }) {
  let numericValue = parseInt(value, 10);
  if (!isNaN(numericValue)) {
    if (!loop) {
      if (numericValue > max) numericValue = max;
      if (numericValue < min) numericValue = min;
    } else {
      if (numericValue > max) numericValue = min;
      if (numericValue < min) numericValue = max;
    }
    return numericValue.toString().padStart(2, "0");
  }
  return "00";
}
function getValidHour(value) {
  if (isValidHour(value)) return value;
  return getValidNumber(value, { max: 23 });
}
function getValid12Hour(value) {
  if (isValid12Hour(value)) return value;
  return getValidNumber(value, { min: 1, max: 12 });
}
function getValidMinuteOrSecond(value) {
  if (isValidMinuteOrSecond(value)) return value;
  return getValidNumber(value, { max: 59 });
}
function getValidArrowNumber(value, { min, max, step }) {
  let numericValue = parseInt(value, 10);
  if (!isNaN(numericValue)) {
    numericValue += step;
    return getValidNumber(String(numericValue), { min, max, loop: true });
  }
  return "00";
}
function getValidArrowHour(value, step) {
  return getValidArrowNumber(value, { min: 0, max: 23, step });
}
function getValidArrow12Hour(value, step) {
  return getValidArrowNumber(value, { min: 1, max: 12, step });
}
function getValidArrowMinuteOrSecond(value, step) {
  return getValidArrowNumber(value, { min: 0, max: 59, step });
}
function setMinutes(date, value) {
  const minutes = getValidMinuteOrSecond(value);
  date.setMinutes(parseInt(minutes, 10));
  return date;
}
function setSeconds(date, value) {
  const seconds = getValidMinuteOrSecond(value);
  date.setSeconds(parseInt(seconds, 10));
  return date;
}
function setHours(date, value) {
  const hours = getValidHour(value);
  date.setHours(parseInt(hours, 10));
  return date;
}
function set12Hours(date, value, period) {
  const hours = parseInt(getValid12Hour(value), 10);
  const convertedHours = convert12HourTo24Hour(hours, period);
  date.setHours(convertedHours);
  return date;
}
function setDateByType(date, value, type, period) {
  switch (type) {
    case "minutes":
      return setMinutes(date, value);
    case "seconds":
      return setSeconds(date, value);
    case "hours":
      return setHours(date, value);
    case "12hours": {
      if (!period) return date;
      return set12Hours(date, value, period);
    }
    default:
      return date;
  }
}
function getDateByType(date, type) {
  switch (type) {
    case "minutes":
      return getValidMinuteOrSecond(String(date.getMinutes()));
    case "seconds":
      return getValidMinuteOrSecond(String(date.getSeconds()));
    case "hours":
      return getValidHour(String(date.getHours()));
    case "12hours":
      const hours = display12HourValue(date.getHours());
      return getValid12Hour(String(hours));
    default:
      return "00";
  }
}
function getArrowByType(value, step, type) {
  switch (type) {
    case "minutes":
      return getValidArrowMinuteOrSecond(value, step);
    case "seconds":
      return getValidArrowMinuteOrSecond(value, step);
    case "hours":
      return getValidArrowHour(value, step);
    case "12hours":
      return getValidArrow12Hour(value, step);
    default:
      return "00";
  }
}
function convert12HourTo24Hour(hour, period) {
  if (period === "PM") {
    if (hour <= 11) {
      return hour + 12;
    }
    return hour;
  }
  if (period === "AM") {
    if (hour === 12) return 0;
    return hour;
  }
  return hour;
}
function display12HourValue(hours) {
  if (hours === 0 || hours === 12) return "12";
  if (hours >= 22) return `${hours - 12}`;
  if (hours % 12 > 9) return `${hours}`;
  return `0${hours % 12}`;
}

// src/lib/components/ui/time-picker-input.tsx
var TimePickerInput = import_react3.default.forwardRef(
  ({
    className,
    type = "tel",
    value,
    id,
    name,
    date = new Date((/* @__PURE__ */ new Date()).setHours(0, 0, 0, 0)),
    setDate,
    onChange,
    onKeyDown,
    picker,
    period,
    onLeftFocus,
    onRightFocus,
    ...props
  }, ref) => {
    const [flag, setFlag] = import_react3.default.useState(false);
    const [prevIntKey, setPrevIntKey] = import_react3.default.useState("0");
    import_react3.default.useEffect(() => {
      if (flag) {
        const timer = setTimeout(() => {
          setFlag(false);
        }, 2e3);
        return () => clearTimeout(timer);
      }
    }, [flag]);
    const calculatedValue = import_react3.default.useMemo(() => getDateByType(date, picker), [date, picker]);
    const calculateNewValue = (key) => {
      if (picker === "12hours") {
        if (flag && calculatedValue.slice(1, 2) === "1" && prevIntKey === "0") {
          return `0${key}`;
        }
      }
      return !flag ? `0${key}` : calculatedValue.slice(1, 2) + key;
    };
    const handleKeyDown = (e) => {
      if (e.key === "Tab") return;
      e.preventDefault();
      if (e.key === "ArrowRight") {
        onRightFocus?.();
      }
      if (e.key === "ArrowLeft") {
        onLeftFocus?.();
      }
      if (["ArrowUp", "ArrowDown"].includes(e.key)) {
        const step = e.key === "ArrowUp" ? 1 : -1;
        const newValue = getArrowByType(calculatedValue, step, picker);
        if (flag) {
          setFlag(false);
        }
        const tempDate = new Date(date);
        setDate(setDateByType(tempDate, newValue, picker, period));
      }
      if (e.key >= "0" && e.key <= "9") {
        if (picker === "12hours") {
          setPrevIntKey(e.key);
        }
        const newValue = calculateNewValue(e.key);
        if (flag) {
          onRightFocus?.();
        }
        setFlag((prev) => !prev);
        const tempDate = new Date(date);
        setDate(setDateByType(tempDate, newValue, picker, period));
      }
    };
    return /* @__PURE__ */ import_react3.default.createElement(
      Input,
      {
        ref,
        id: id || picker,
        name: name || picker,
        className: cn(
          "w-[48px] text-center font-mono text-base tabular-nums caret-transparent focus:bg-accent focus:text-accent-foreground [&::-webkit-inner-spin-button]:appearance-none",
          className
        ),
        value: value || calculatedValue,
        onChange: (e) => {
          e.preventDefault();
          onChange?.(e);
        },
        type,
        inputMode: "decimal",
        onKeyDown: (e) => {
          onKeyDown?.(e);
          handleKeyDown(e);
        },
        ...props
      }
    );
  }
);
TimePickerInput.displayName = "TimePickerInput";

// src/lib/components/ui/time-picker-demo.tsx
var TimePickerDemo = ({ date, setDate }) => {
  const minuteRef = React10.useRef(null);
  const hourRef = React10.useRef(null);
  const secondRef = React10.useRef(null);
  return /* @__PURE__ */ React10.createElement("div", { className: "flex items-end gap-2" }, /* @__PURE__ */ React10.createElement("div", { className: "grid gap-1 text-center" }, /* @__PURE__ */ React10.createElement(Label, { htmlFor: "hours", className: "text-xs" }, "Hours"), /* @__PURE__ */ React10.createElement(
    TimePickerInput,
    {
      picker: "hours",
      date,
      setDate,
      ref: hourRef,
      onRightFocus: () => minuteRef.current?.focus()
    }
  )), /* @__PURE__ */ React10.createElement("div", { className: "grid gap-1 text-center" }, /* @__PURE__ */ React10.createElement(Label, { htmlFor: "minutes", className: "text-xs" }, "Minutes"), /* @__PURE__ */ React10.createElement(
    TimePickerInput,
    {
      picker: "minutes",
      date,
      setDate,
      ref: minuteRef,
      onLeftFocus: () => hourRef.current?.focus(),
      onRightFocus: () => secondRef.current?.focus()
    }
  )), /* @__PURE__ */ React10.createElement("div", { className: "grid gap-1 text-center" }, /* @__PURE__ */ React10.createElement(Label, { htmlFor: "seconds", className: "text-xs" }, "Seconds"), /* @__PURE__ */ React10.createElement(
    TimePickerInput,
    {
      picker: "seconds",
      date,
      setDate,
      ref: secondRef,
      onLeftFocus: () => minuteRef.current?.focus()
    }
  )), /* @__PURE__ */ React10.createElement("div", { className: "flex h-10 items-center" }, /* @__PURE__ */ React10.createElement(import_lucide_react3.Clock, { className: "ml-2 h-4 w-4" })));
};

// src/lib/components/ui/tooltip.tsx
var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
var React11 = __toESM(require("react"), 1);
var TooltipProvider = TooltipPrimitive.Provider;
var Tooltip = TooltipPrimitive.Root;
var TooltipTrigger = TooltipPrimitive.Trigger;
var TooltipContent = React11.forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React11.createElement(
  TooltipPrimitive.Content,
  {
    ref,
    sideOffset,
    className: cn(
      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
      className
    ),
    ...props
  }
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;

// src/features/tree/Node.tsx
var import_lucide_react4 = require("lucide-react");
var import_react8 = __toESM(require("react"), 1);

// src/features/tree/ObjectValue.tsx
var import_react6 = __toESM(require("react"), 1);

// src/features/tree/DateValue.tsx
var import_react4 = __toESM(require("react"), 1);
var DateValue = ({ node }) => {
  const [date, setDate] = (0, import_react4.useState)(node.data.value);
  return /* @__PURE__ */ import_react4.default.createElement(
    Popover,
    {
      open: node.isEditing,
      onOpenChange: (open) => {
        if (!open) {
          node.submit(date);
        }
      }
    },
    /* @__PURE__ */ import_react4.default.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ import_react4.default.createElement(
      "span",
      {
        onClick: () => node.isEditable && node.edit(),
        className: cn("text-ellipsis overflow-hidden whitespace-nowrap align-middle max-w-48 inline-block text-gray-400 text-xs", {
          ["hover:bg-gray-100 transition-colors p-1 rounded-md cursor-pointer"]: node.isEditable
        })
      },
      node.data.value.toISOString()
    )),
    /* @__PURE__ */ import_react4.default.createElement(PopoverContent, { className: "w-auto p-0" }, /* @__PURE__ */ import_react4.default.createElement(
      Calendar,
      {
        mode: "single",
        selected: date,
        onSelect: setDate,
        initialFocus: true
      }
    ), /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-3 border-t border-border" }, /* @__PURE__ */ import_react4.default.createElement(TimePickerDemo, { setDate, date })))
  );
};

// src/features/tree/InlineEditInput.tsx
var import_react5 = __toESM(require("react"), 1);
var InlineEditInput = ({ node, value }) => {
  const inputRef = (0, import_react5.useRef)(null);
  const handleValueEdit = () => {
    const newValue = inputRef.current?.value ?? "";
    if (newValue === "") {
      return node.submit(newValue);
    }
    try {
      JSON.parse(newValue);
      node.submit(newValue);
    } catch (error) {
      node.reset();
    }
  };
  return /* @__PURE__ */ import_react5.default.createElement(
    Input,
    {
      className: "inline-block h-6 w-auto",
      ref: inputRef,
      type: "text",
      defaultValue: JSON.stringify(value),
      onKeyDown: (event) => {
        event.key === "Enter" && handleValueEdit();
        event.key === "Escape" && node.reset();
      },
      onBlur: handleValueEdit,
      autoFocus: true
    }
  );
};

// src/features/tree/ObjectValue.tsx
var ObjectValue = ({ node }) => {
  if (node.data.value instanceof Date) {
    return /* @__PURE__ */ import_react6.default.createElement(DateValue, { node });
  }
  return node.isEditing ? /* @__PURE__ */ import_react6.default.createElement(InlineEditInput, { node, value: node.data.value }) : /* @__PURE__ */ import_react6.default.createElement(
    "span",
    {
      onClick: () => node.isEditable && node.edit(),
      className: cn("text-ellipsis overflow-hidden whitespace-nowrap align-middle max-w-48 inline-block text-gray-400 text-xs", {
        ["hover:bg-gray-100 transition-colors p-1 rounded-md cursor-pointer"]: node.isEditable
      })
    },
    JSON.stringify(node.data.value)
  );
};

// src/features/tree/PrimitiveValue.tsx
var import_react7 = __toESM(require("react"), 1);
var PrimitiveValue = ({ node, value }) => node.isEditing ? /* @__PURE__ */ import_react7.default.createElement(InlineEditInput, { node, value }) : /* @__PURE__ */ import_react7.default.createElement(
  "span",
  {
    className: cn({
      ["text-emerald-500"]: typeof value === "string",
      ["text-blue-500"]: typeof value === "number",
      ["text-red-500"]: typeof value === "boolean",
      ["text-yellow-500"]: typeof value === "undefined" || value === null,
      ["hover:bg-gray-100 transition-colors p-1 rounded-md cursor-pointer"]: node.isEditable
    }),
    onClick: () => node.isEditable && node.edit()
  },
  typeof value === "string" && `"${value}"`,
  typeof value === "number" && value.toString(),
  typeof value === "boolean" && String(value),
  (typeof value === "undefined" || value === null) && String(value)
);

// src/features/tree/Node.tsx
var Node = ({ node, style, tree }) => {
  const hasSomeChildren = node.children && node.children.length > 0;
  return /* @__PURE__ */ import_react8.default.createElement("pre", { style, className: cn("text-gray-800 text-left", { ["opacity-50"]: node.data.isReadonly }) }, node.data.isReadonly && /* @__PURE__ */ import_react8.default.createElement(Tooltip, { delayDuration: 200 }, /* @__PURE__ */ import_react8.default.createElement(import_react_tooltip.TooltipPortal, null, /* @__PURE__ */ import_react8.default.createElement(TooltipContent, null, "This value is read-only")), /* @__PURE__ */ import_react8.default.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react4.InfoIcon, { className: "inline-block mr-2 size-4 align-middle" }))), node.children ? /* @__PURE__ */ import_react8.default.createElement(import_react8.Fragment, null, /* @__PURE__ */ import_react8.default.createElement("span", { className: cn({ "cursor-pointer": hasSomeChildren }), onClick: () => tree.toggle(node.id) }, hasSomeChildren && (node.isOpen ? "\u25BC " : "\u25B6 "), node.data.key, ":", " "), /* @__PURE__ */ import_react8.default.createElement(ObjectValue, { node })) : /* @__PURE__ */ import_react8.default.createElement(import_react8.Fragment, null, node.data.key, ":", " ", /* @__PURE__ */ import_react8.default.createElement(PrimitiveValue, { value: node.data.value, node })));
};

// src/features/tree/utils.ts
var treeify = (data, readonlyKeys = [], id = "root", key = "root") => {
  const children = typeof data === "object" && data !== null ? Object.entries(data).map(([itemKey, value]) => {
    if (typeof value === "object" && value !== null) {
      return treeify(value, readonlyKeys, `${id}-${itemKey}`, itemKey);
    }
    return {
      id: `${id}-${itemKey}`,
      key: itemKey,
      value,
      isReadonly: readonlyKeys.includes(itemKey) && id === "root"
    };
  }) : void 0;
  return {
    id,
    key,
    value: data,
    children
  };
};

// src/features/tree/StateTree.tsx
var StateTree = ({ state, onStateChange, getters, height }) => {
  const handleDataChange = ({
    id,
    name
  }) => {
    const path = id.split("-").slice(1);
    const newValue = name === "" ? void 0 : typeof name === "string" ? JSON.parse(name) : name;
    onStateChange(objectPath.set(state, path, newValue));
  };
  return /* @__PURE__ */ import_react9.default.createElement(
    import_react_arborist.Tree,
    {
      width: "100%",
      height,
      className: "h-full",
      data: treeify(state, getters).children,
      onRename: handleDataChange,
      disableEdit: (node) => node.isReadonly === true
    },
    Node
  );
};

// src/features/editor/Editor.tsx
var import_lucide_react5 = require("lucide-react");
var import_react10 = __toESM(require("react"), 1);
var Editor = ({
  storeNumber,
  close,
  storeEntry
}) => {
  const containerRef = (0, import_react10.useRef)(null);
  const [height, setHeight] = (0, import_react10.useState)(0);
  const [state, setState] = (0, import_react10.useState)({ ...storeEntry.store });
  const isEqual = equal(state, storeEntry.store);
  (0, import_react10.useEffect)(() => {
    const resizeObserver = new ResizeObserver(([entry]) => {
      setHeight((entry?.contentRect.height ?? 0) - 72);
    });
    resizeObserver.observe(containerRef.current);
  }, []);
  return /* @__PURE__ */ import_react10.default.createElement("div", { className: "px-4 pb-4 h-full" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-full h-full rounded-lg border border-slate-200 p-4" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react10.default.createElement("span", { className: "text-black" }, "Store ", numberToEmoji(storeNumber)), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, !isEqual && /* @__PURE__ */ import_react10.default.createElement(
    import_lucide_react5.RefreshCcw,
    {
      className: "w-4 h-4 cursor-pointer stroke-black",
      onClick: () => setState({ ...storeEntry.store })
    }
  ), /* @__PURE__ */ import_react10.default.createElement(import_lucide_react5.CircleX, { className: "w-4 h-4 cursor-pointer stroke-black", onClick: close }))), /* @__PURE__ */ import_react10.default.createElement("div", { ref: containerRef, className: "pt-4 flex flex-col h-full" }, /* @__PURE__ */ import_react10.default.createElement(StateTree, { height: height ?? 0, state, onStateChange: setState, getters: storeEntry.getters }), /* @__PURE__ */ import_react10.default.createElement(Button, { disabled: isEqual, className: "mt-4", onClick: () => storeEntry.updateStore(state) }, "Save"))));
};

// src/Devtools.tsx
var import_lucide_react6 = require("lucide-react");
var import_react12 = __toESM(require("react"), 1);

// src/Store.tsx
var import_react11 = __toESM(require("react"), 1);
var Store = ({ store, storeNumber, open, isActive }) => {
  const [state, setState] = (0, import_react11.useState)(store.store);
  (0, import_react11.useEffect)(() => {
    setState(store.store);
  }, [store]);
  return /* @__PURE__ */ import_react11.default.createElement(
    Alert,
    {
      className: cn("w-full flex flex-col", {
        "bg-gray-100": isActive
      })
    },
    /* @__PURE__ */ import_react11.default.createElement(AlertTitle, { className: "text-left" }, "Store ", numberToEmoji(storeNumber)),
    /* @__PURE__ */ import_react11.default.createElement(AlertDescription, { className: "tracking-wider overflow-y-auto px-4 pt-4" }, /* @__PURE__ */ import_react11.default.createElement(
      "pre",
      {
        className: "cursor-pointer text-ellipsis overflow-hidden hover:bg-gray-100 transition-colors p-2 rounded-md text-left",
        onClick: open
      },
      JSON.stringify(state, null, 2)
    ))
  );
};

// src/Devtools.tsx
var Devtools = ({ isFullscreen }) => {
  const [isOpened, setIsOpened] = (0, import_react12.useState)(Boolean(isFullscreen));
  const [stores, setStores] = (0, import_react12.useState)(getStores());
  const resizeRef = (0, import_react12.useRef)(null);
  const [activeStore, setActiveStore] = (0, import_react12.useState)();
  const editor = activeStore !== void 0 ? stores[activeStore] : void 0;
  (0, import_react12.useEffect)(() => {
    const intervalId = setInterval(() => {
      const stores2 = Object.values(getStores());
      stores2.forEach((store) => {
        store.listen(() => {
          setStores(getStores());
        });
      });
      setStores(stores2);
      if (stores2.length !== 0) {
        clearInterval(intervalId);
      }
    }, 500);
  }, []);
  const handleMouseDown = (mouseDownEvent) => {
    if (!resizeRef.current || isFullscreen) {
      return;
    }
    const startY = mouseDownEvent.clientY;
    const { height } = resizeRef.current.getBoundingClientRect();
    const updateDimensions = (event) => {
      if (!resizeRef.current) {
        return;
      }
      event.preventDefault();
      const nextHeight = height + startY - event.clientY;
      resizeRef.current.style.height = `${nextHeight}px`;
    };
    const unsub = () => {
      document.removeEventListener("mousemove", updateDimensions, false);
      document.removeEventListener("mouseUp", unsub, false);
    };
    document.addEventListener("mousemove", updateDimensions, false);
    document.addEventListener("mouseup", unsub, false);
  };
  return /* @__PURE__ */ import_react12.default.createElement(TooltipProvider, null, /* @__PURE__ */ import_react12.default.createElement("div", { className: "fixed bottom-4 left-4" }, !isOpened ? /* @__PURE__ */ import_react12.default.createElement("div", { key: "favicon", className: "cursor-pointer", onClick: () => setIsOpened(true) }, /* @__PURE__ */ import_react12.default.createElement(Favicon, null)) : /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement(
    "div",
    {
      key: "devtools",
      className: cn("devtools-resizable flex flex-col rounded-xl bg-background", {
        "devtools-fullscreen": isFullscreen
      }),
      ref: resizeRef
    },
    /* @__PURE__ */ import_react12.default.createElement(
      "div",
      {
        onMouseDown: handleMouseDown,
        className: cn("w-full -translate-y-2 h-4", {
          "cursor-ns-resize": !isFullscreen
        })
      }
    ),
    /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center px-4 pb-4 justify-between" }, /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react12.default.createElement(Favicon, { className: "w-8 h-8" }), /* @__PURE__ */ import_react12.default.createElement(Label, { className: "text-black text-xl" }, "stan-js devtools")), !isFullscreen && /* @__PURE__ */ import_react12.default.createElement(Button, { size: "icon", onClick: () => setIsOpened(false) }, /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Minus, { className: "h-4 w-4" }))),
    /* @__PURE__ */ import_react12.default.createElement(ResizablePanelGroup, { className: "resize flex-grow", direction: "horizontal" }, /* @__PURE__ */ import_react12.default.createElement(ResizablePanel, { className: "px-4 pb-4 flex flex-col gap-4", style: { overflow: "auto" } }, Object.values(stores).map((store, index) => /* @__PURE__ */ import_react12.default.createElement(
      Store,
      {
        key: index,
        storeNumber: index,
        open: () => setActiveStore(index),
        isActive: activeStore === index,
        store: { ...store }
      }
    ))), /* @__PURE__ */ import_react12.default.createElement(ResizableHandle, { withHandle: true }), /* @__PURE__ */ import_react12.default.createElement(ResizablePanel, null, editor && /* @__PURE__ */ import_react12.default.createElement(
      Editor,
      {
        storeEntry: { ...editor },
        close: () => setActiveStore(void 0),
        storeNumber: activeStore ?? 0
      }
    )))
  ))));
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  Devtools
});