@arcanewizards/sigil 0.1.0

package/dist/chunk-MXDDIFIO.cjs

@@ -0,0 +1,767 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkPEARNJ5Gcjs = require('./chunk-PEARNJ5G.cjs');
+
+
+
+var _chunkRI33QVODcjs = require('./chunk-RI33QVOD.cjs');
+
+
+
+
+var _chunk5DRI7C4Ucjs = require('./chunk-5DRI7C4U.cjs');
+
+// src/frontend/dialogs.tsx
+
+
+
+
+
+var _react = require('react');
+var _core = require('@arcanejs/toolkit-frontend/components/core');
+var _util = require('@arcanejs/toolkit-frontend/util');
+
+// src/frontend/controls/buttons.tsx
+
+
+
+
+
+
+// src/frontend/controls/utils.ts
+var clsControlPosition = (position) => {
+  if (!position) return void 0;
+  switch (position) {
+    case "row":
+      return "control-grid-pos-row";
+    case "label":
+      return "control-grid-pos-label";
+    case "first":
+      return "control-grid-pos-first";
+    case "second":
+      return "control-grid-pos-second";
+    case "both":
+      return "control-grid-pos-both";
+    case "all":
+      return "control-grid-pos-all";
+    case "extra":
+      return "control-grid-pos-extra";
+  }
+};
+var clsControlSubgridPosition = (position, subgrid) => {
+  if (!subgrid) return void 0;
+  switch (position) {
+    case "label":
+      return "col-[1/span_1]";
+    case "first":
+      return "col-[2/span_1]";
+    case "second":
+      return "col-[3/span_1]";
+  }
+};
+var controlPositionClass = clsControlPosition;
+
+// src/frontend/controls/buttons.tsx
+var _jsxruntime = require('react/jsx-runtime');
+var CONTROL_BUTTON_VAR_SUFFIX = {
+  bg: "bg",
+  bgHover: "bg-hover",
+  bgActive: "bg-active",
+  fg: "fg",
+  fgHover: "fg-hover",
+  fgActive: "fg-active",
+  border: "border",
+  borderHover: "border-hover",
+  borderActive: "border-active"
+};
+var controlButtonColorVariable = (property) => `--sigil-control-button-${CONTROL_BUTTON_VAR_SUFFIX[property]}`;
+var controlButtonColorVariables = (usage) => _chunk5DRI7C4Ucjs.cssVariables.call(void 0, 
+  Object.fromEntries(
+    Object.keys(usage).map(
+      (key) => [controlButtonColorVariable(key), usage[key]]
+    )
+  )
+);
+var clsControlButton = ({
+  variant,
+  active,
+  touching,
+  position,
+  className
+}) => _util.cn.call(void 0, 
+  `sigil-control-button`,
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "border", `sigil-control-button-variant-border`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "large", `sigil-control-button-variant-large`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "properties", `sigil-control-button-variant-properties`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "table-row", `sigil-control-button-variant-table-row`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "toolbar", `sigil-control-button-variant-toolbar`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, variant === "titlebar", `sigil-control-button-variant-titlebar`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, touching, `sigil-control-button-touching`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, active, `sigil-control-button-active`),
+  _chunk5DRI7C4Ucjs.cnd.call(void 0, touching && active, `sigil-control-button-active-touching`),
+  clsControlPosition(position),
+  className
+);
+var ControlButtonFrame = _react.forwardRef.call(void 0, 
+  ({
+    children,
+    className,
+    type,
+    variant = "toolbar",
+    icon,
+    active,
+    touching,
+    disabled,
+    title,
+    tooltipSide,
+    position,
+    ...props
+  }, ref) => {
+    const btn = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "button",
+      {
+        ...props,
+        ref,
+        type: _nullishCoalesce(type, () => ( "button")),
+        disabled,
+        className: clsControlButton({
+          variant,
+          active,
+          touching,
+          position,
+          className
+        }),
+        children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
+          icon && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _core.Icon,
+            {
+              icon,
+              className: _util.cn.call(void 0, _chunk5DRI7C4Ucjs.cnd.call(void 0, children, "text-[120%]", "text-[150%]"))
+            }
+          ),
+          children
+        ] })
+      }
+    );
+    if (!title) return btn;
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPEARNJ5Gcjs.TooltipWrapper, { tooltip: title, side: tooltipSide, children: btn });
+  }
+);
+ControlButtonFrame.displayName = "ControlButtonFrame";
+var ControlButton = _react.forwardRef.call(void 0, 
+  ({ onClick, disabled, ...props }, ref) => {
+    const { handlers, touching } = _chunkRI33QVODcjs.usePressable.call(void 0, onClick);
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      ControlButtonFrame,
+      {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...!disabled ? handlers : {}
+      }
+    );
+  }
+);
+ControlButton.displayName = "ControlButton";
+var CheckboxControlButton = _react.forwardRef.call(void 0, ({ active, label, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, ControlButton, { ...props, ref, active, children: [
+  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: active ? "check_box" : "check_box_outline_blank" }),
+  label
+] }));
+CheckboxControlButton.displayName = "CheckboxControlButton";
+var LongPressableControlButton = _react.forwardRef.call(void 0, ({ active, disabled, onPress, onRelease, ...props }, ref) => {
+  const { handlers, touching } = _chunkRI33QVODcjs.useLongPressable.call(void 0, { onPress, onRelease });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ControlButtonFrame,
+    {
+      ...props,
+      ref,
+      active: active || touching,
+      disabled,
+      ...!disabled ? handlers : {}
+    }
+  );
+});
+LongPressableControlButton.displayName = "LongPressableControlButton";
+var ControlButtonGroup = _react.forwardRef.call(void 0, ({ children, className, position, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    ...props,
+    ref,
+    className: _util.cn.call(void 0, 
+      `
+        flex items-stretch gap-sigil-control-gap
+        [&>button]:grow
+      `,
+      clsControlPosition(position),
+      className
+    ),
+    children
+  }
+));
+ControlButtonGroup.displayName = "ControlButtonGroup";
+
+// src/frontend/controls/content.tsx
+
+
+
+var ControlParagraph = _react.forwardRef.call(void 0, ({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "p",
+  {
+    ...props,
+    ref,
+    className: _util.cn.call(void 0, 
+      "border border-transparent",
+      clsControlPosition(position),
+      _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+        mode === "success",
+        `
+          border-sigil-usage-green-dimmed-border
+          bg-sigil-usage-green-dimmed-background p-1 text-sigil-usage-green-text
+        `
+      ),
+      _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+        mode === "warning",
+        `
+          border-sigil-usage-yellow-dimmed-border
+          bg-sigil-usage-yellow-dimmed-background p-1
+          text-sigil-usage-yellow-text
+        `
+      ),
+      _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+        mode === "error",
+        `
+          border-sigil-usage-red-dimmed-border
+          bg-sigil-usage-red-dimmed-background p-1 text-sigil-usage-red-text
+        `
+      ),
+      className
+    )
+  }
+));
+ControlParagraph.displayName = "ControlParagraph";
+var ControlLabel = _react.forwardRef.call(void 0, 
+  ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      "div",
+      {
+        ...props,
+        ref,
+        className: _util.cn.call(void 0, 
+          "flex items-center justify-end gap-0.6 p-0.6",
+          clsControlPosition(position),
+          _chunk5DRI7C4Ucjs.cnd.call(void 0, nonMicro, "max-[550px]:hidden"),
+          _chunk5DRI7C4Ucjs.cnd.call(void 0, disabled, "opacity-50"),
+          clsControlSubgridPosition(position, subgrid),
+          className
+        )
+      }
+    );
+  }
+);
+ControlLabel.displayName = "ControlLabel";
+var ControlDetails = _react.forwardRef.call(void 0, 
+  ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ...props,
+      ref,
+      className: _util.cn.call(void 0, 
+        "flex items-center px-0.3 text-sigil-foreground-muted",
+        clsControlPosition(position),
+        _chunk5DRI7C4Ucjs.cnd.call(void 0, align === "start", "justify-start"),
+        _chunk5DRI7C4Ucjs.cnd.call(void 0, align === "center", "justify-center"),
+        _chunk5DRI7C4Ucjs.cnd.call(void 0, align === "end", "justify-end"),
+        className
+      )
+    }
+  )
+);
+ControlDetails.displayName = "ControlDetails";
+var InputSpanningTitle = _react.forwardRef.call(void 0, ({ className, position = "row", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    ...props,
+    ref,
+    className: _util.cn.call(void 0, 
+      "truncate p-0.6 text-center text-[0.8rem] font-bold",
+      clsControlPosition(position),
+      className
+    )
+  }
+));
+InputSpanningTitle.displayName = "InputSpanningTitle";
+
+// src/frontend/controls/dialogs.tsx
+
+
+
+var ControlDialogButtons = _react.forwardRef.call(void 0, ({ children, className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  ControlButtonGroup,
+  {
+    ref,
+    className: _util.cn.call(void 0, "control-grid-pos-row", className),
+    ...props,
+    children
+  }
+));
+var ControlDialog = ({
+  children,
+  large,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { ...props, variant: "dark", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    className: _util.cn.call(void 0, 
+      "gap-1 bg-sigil-bg-dark select-none",
+      _chunk5DRI7C4Ucjs.cnd.call(void 0, large, "control-grid-large", "control-grid")
+    ),
+    children
+  }
+) });
+
+// src/frontend/controls/input.tsx
+
+
+
+
+
+
+
+var InputWithDelayedPropagation = ({
+  value,
+  disabled,
+  onChange,
+  inputRef: inputRefProp,
+  ...props
+}) => {
+  const lastValue = _react.useRef.call(void 0, value);
+  const inputRef = _react.useRef.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (inputRef.current && inputRef.current.value !== value) {
+      inputRef.current.value = value;
+    }
+    lastValue.current = value;
+  }, [value]);
+  const updateRef = _react.useCallback.call(void 0, 
+    (instance) => {
+      inputRef.current = instance;
+      if (inputRefProp) {
+        inputRefProp.current = instance;
+      }
+    },
+    [inputRefProp]
+  );
+  const onBlurProp = props.onBlur;
+  const onBlur = _react.useCallback.call(void 0, 
+    (e) => {
+      if (e.currentTarget.value !== lastValue.current) {
+        onChange(e.currentTarget.value, false);
+      }
+      _optionalChain([onBlurProp, 'optionalCall', _ => _(e)]);
+    },
+    [onChange, onBlurProp]
+  );
+  const onKeyUpProp = props.onKeyUp;
+  const onKeyUp = _react.useCallback.call(void 0, 
+    (e) => {
+      if ((e.key === "Enter" || e.key.startsWith("Arrow")) && e.currentTarget.value !== lastValue.current) {
+        onChange(e.currentTarget.value, true);
+      }
+      _optionalChain([onKeyUpProp, 'optionalCall', _2 => _2(e)]);
+    },
+    [onChange, onKeyUpProp]
+  );
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "input",
+    {
+      ref: updateRef,
+      defaultValue: value,
+      onBlur,
+      onKeyUp,
+      disabled,
+      ...props
+    }
+  );
+};
+var ControlInput = ({
+  className,
+  nonMicro,
+  position = "first",
+  subgrid,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  InputWithDelayedPropagation,
+  {
+    ...props,
+    className: _util.cn.call(void 0, 
+      `
+        overflow-hidden border-0 bg-sigil-bg-dark px-arcane-slider-input-hidden
+        py-[7px] text-[0.7rem] text-sigil-foreground shadow-none
+        focus:border-2 focus:border-sigil-usage-hint-foreground
+        focus:bg-sigil-bg-dark-1 focus:px-[7px] focus:py-arcane-slider-input-px
+        focus:text-sigil-usage-hint-foreground focus:outline-none
+        disabled:opacity-50
+        [&::-webkit-inner-spin-button]:opacity-20
+        focus:[&::-webkit-inner-spin-button]:opacity-50
+        [&::-webkit-outer-spin-button]:opacity-20
+        focus:[&::-webkit-outer-spin-button]:opacity-50
+      `,
+      clsControlPosition(position),
+      clsControlSubgridPosition(position, subgrid),
+      _chunk5DRI7C4Ucjs.cnd.call(void 0, nonMicro, "max-[550px]:hidden"),
+      className
+    )
+  }
+);
+var ControlPercent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlInput, { ...props, className: _util.cn.call(void 0, "min-w-[5rem]", className) });
+
+// src/frontend/controls/select.tsx
+var _radixui = require('radix-ui');
+
+
+
+
+var NULL_VALUE = "__null_value__";
+var ControlSelect = ({
+  options,
+  value,
+  onChange,
+  triggerText,
+  triggerButton,
+  option,
+  variant,
+  position,
+  disabled,
+  tooltip,
+  placeholder,
+  triggerClassName: className
+}) => {
+  const selectedOption = options.find((option2) => option2.value === value);
+  const onValueChange = _react.useCallback.call(void 0, 
+    (val) => {
+      const matchingOption = options.find(
+        (option2) => (_nullishCoalesce(option2.value, () => ( NULL_VALUE))) === val
+      );
+      if (matchingOption) {
+        onChange(matchingOption.value);
+      }
+    },
+    [options, onChange]
+  );
+  const t = triggerButton ? triggerButton(_nullishCoalesce(selectedOption, () => ( null))) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _radixui.Select.Trigger,
+    {
+      disabled,
+      className: _util.cn.call(void 0, 
+        clsControlButton({
+          variant,
+          position,
+          active: _optionalChain([selectedOption, 'optionalAccess', _3 => _3.active])
+        }),
+        className
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Select.Value, { placeholder, children: selectedOption ? _nullishCoalesce(_optionalChain([triggerText, 'optionalCall', _4 => _4(selectedOption)]), () => ( selectedOption.label)) : "Unknown" })
+    }
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _radixui.Select.Root,
+    {
+      value: _nullishCoalesce(value, () => ( NULL_VALUE)),
+      onValueChange,
+      disabled,
+      children: [
+        tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkPEARNJ5Gcjs.TooltipWrapper, { tooltip, children: t }) : t,
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _radixui.Select.Content,
+          {
+            className: _util.cn.call(void 0, 
+              `
+            z-sigil-select-content rounded-sigil-control border
+            border-sigil-border bg-sigil-bg-dark shadow-sigil-box
+          `
+            ),
+            children: [
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Select.ScrollUpButton, { className: "text-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "arrow_drop_up" }) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Select.Viewport, { className: "p-1", children: options.map((o) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                _radixui.Select.Item,
+                {
+                  className: "\n                mx-0 my-0.6 cursor-pointer rounded-[2px] px-1.5 py-0.6\n                outline-none\n                data-highlighted:bg-sigil-border\n                data-highlighted:text-sigil-foreground-highlight\n                data-[state='checked']:text-sigil-usage-hint-foreground\n              ",
+                  value: _nullishCoalesce(o.value, () => ( NULL_VALUE)),
+                  children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Select.ItemText, { children: _nullishCoalesce(_optionalChain([option, 'optionalCall', _5 => _5(o)]), () => ( o.label)) })
+                },
+                _nullishCoalesce(o.value, () => ( NULL_VALUE))
+              )) }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _radixui.Select.ScrollDownButton, { className: "text-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "arrow_drop_down" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red" },
+  blue: { label: "Blue", value: "blue" },
+  teal: { label: "Teal", value: "teal" },
+  green: { label: "Green", value: "green" },
+  yellow: { label: "Yellow", value: "yellow" },
+  purple: { label: "Purple", value: "purple" },
+  orange: { label: "Orange", value: "orange" },
+  brown: { label: "Brown", value: "brown" },
+  gray: { label: "Gray", value: "gray" }
+};
+var ControlColorSelect = ({
+  color,
+  onChange,
+  variant,
+  position,
+  disabled,
+  placeholder,
+  ...props
+}) => {
+  const options = Object.values(COLOR_OPTIONS);
+  const selectedColor = _chunk5DRI7C4Ucjs.sigilColorUsage.call(void 0, color || "gray");
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ControlSelect,
+    {
+      options,
+      value: color,
+      onChange,
+      triggerButton: (option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _radixui.Select.Trigger,
+        {
+          disabled,
+          className: clsControlButton({
+            variant,
+            position,
+            active: _optionalChain([option, 'optionalAccess', _6 => _6.active])
+          }),
+          style: controlButtonColorVariables({
+            bg: selectedColor.background,
+            bgHover: selectedColor.selectedBackground,
+            bgActive: selectedColor.selectedBackground,
+            fg: selectedColor.text,
+            fgHover: selectedColor.selectedText,
+            fgActive: selectedColor.selectedText,
+            border: selectedColor.border,
+            borderHover: selectedColor.selectedBorder,
+            borderActive: selectedColor.selectedBorder
+          }),
+          children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+            _radixui.Select.Value,
+            {
+              placeholder: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+                placeholder,
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _core.Icon,
+                  {
+                    className: "\n                    -my-text-1 -mr-text-0.5 -ml-text-0.25 text-arcane-normal\n                  ",
+                    icon: "arrow_drop_down"
+                  }
+                )
+              ] }),
+              children: [
+                _nullishCoalesce(_optionalChain([option, 'optionalAccess', _7 => _7.label]), () => ( placeholder)),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+                  _core.Icon,
+                  {
+                    className: "\n                -my-text-1 -mr-text-0.5 -ml-text-0.25 text-arcane-normal\n              ",
+                    icon: "arrow_drop_down"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      option: (option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        "span",
+        {
+          className: "",
+          style: {
+            color: `var(--sigil-usage-${option.value}-foreground)`
+          },
+          children: option.label
+        }
+      ),
+      variant,
+      position,
+      disabled,
+      ...props
+    }
+  );
+};
+
+// src/frontend/dialogs.tsx
+
+var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
+var DialogContext = _react.createContext.call(void 0, {
+  createDialog: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayMessage: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayError: () => {
+    throw new Error("DialogContext not provided");
+  }
+});
+var DialogTitle = _react.forwardRef.call(void 0, 
+  ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      ...props,
+      ref,
+      className: _util.cn.call(void 0, 
+        `
+          flex items-center justify-center gap-0.6 border-b border-sigil-border
+          p-arcane font-bold
+        `,
+        _chunk5DRI7C4Ucjs.cnd.call(void 0, isDarkDialog(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"),
+        className
+      )
+    }
+  )
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogButtons = _react.forwardRef.call(void 0, ({ className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  "div",
+  {
+    ...props,
+    ref,
+    className: _util.cn.call(void 0, "mt-arcane flex justify-end gap-0.6", className)
+  }
+));
+DialogButtons.displayName = "DialogButtons";
+var Dialog = ({
+  children,
+  dialogClosed,
+  closable = true,
+  title,
+  variant = "light"
+}) => {
+  const [dialogRef, setDialogRef] = _react.useState.call(void 0, null);
+  _react.useEffect.call(void 0, () => {
+    if (!dialogRef) return;
+    dialogRef.showModal();
+  }, [dialogRef]);
+  const close = () => _optionalChain([dialogRef, 'optionalAccess', _8 => _8.close, 'call', _9 => _9()]);
+  const onClose = (event) => {
+    if (closable) {
+      dialogClosed();
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.showModal();
+  };
+  const onMouseDown = (event) => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "dialog",
+    {
+      ref: setDialogRef,
+      onMouseDown,
+      onClose,
+      className: _util.cn.call(void 0, 
+        `
+          max-w-[80vw] min-w-[10vw] border-none p-0 text-sigil-dialog-foreground
+          outline-none backdrop-sigil-dialog
+        `,
+        _chunk5DRI7C4Ucjs.cnd.call(void 0, isDarkDialog(variant), "bg-sigil-bg-dark", "bg-sigil-bg-light")
+      ),
+      children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-sigil-border", children: [
+        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogTitle, { variant, children: title }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "div",
+          {
+            className: _util.cn.call(void 0, 
+              "text-sigil-foreground",
+              _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+                variant === "light-compact" || variant === "dark-compact",
+                "p-0"
+              ),
+              _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+                variant !== "light-compact" && variant !== "dark-compact",
+                "p-arcane"
+              )
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+var DialogProvider = ({ children }) => {
+  const [dialogs, setDialogs] = _react.useState.call(void 0, []);
+  const createDialog = (dialog, options = {}) => {
+    setDialogs((items) => [...items, { dialog, options }]);
+  };
+  const displayMessage = (message, title) => {
+    createDialog(
+      (close) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { children: message }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DialogButtons, { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ControlButton, { onClick: close, variant: "large", children: "OK" }) })
+      ] }),
+      { title }
+    );
+  };
+  const displayError = (message, title) => displayMessage(
+    message,
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _core.Icon, { icon: "error" }),
+      title || "Error"
+    ] })
+  );
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    DialogContext.Provider,
+    {
+      value: { createDialog, displayMessage, displayError },
+      children: [
+        children,
+        dialogs.map((item, index) => {
+          const deleteDialog = () => {
+            setDialogs((items) => items.filter((dialog) => dialog !== item));
+          };
+          return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Dialog, { dialogClosed: deleteDialog, ...item.options, children: item.dialog(deleteDialog) }, index);
+        })
+      ]
+    }
+  );
+};
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+exports.clsControlPosition = clsControlPosition; exports.clsControlSubgridPosition = clsControlSubgridPosition; exports.controlPositionClass = controlPositionClass; exports.controlButtonColorVariable = controlButtonColorVariable; exports.controlButtonColorVariables = controlButtonColorVariables; exports.clsControlButton = clsControlButton; exports.ControlButton = ControlButton; exports.CheckboxControlButton = CheckboxControlButton; exports.LongPressableControlButton = LongPressableControlButton; exports.ControlButtonGroup = ControlButtonGroup; exports.ControlParagraph = ControlParagraph; exports.ControlLabel = ControlLabel; exports.ControlDetails = ControlDetails; exports.InputSpanningTitle = InputSpanningTitle; exports.DialogContext = DialogContext; exports.DialogTitle = DialogTitle; exports.DialogButtons = DialogButtons; exports.Dialog = Dialog; exports.DialogProvider = DialogProvider; exports.ControlDialogButtons = ControlDialogButtons; exports.ControlDialog = ControlDialog; exports.InputWithDelayedPropagation = InputWithDelayedPropagation; exports.ControlInput = ControlInput; exports.ControlPercent = ControlPercent; exports.ControlSelect = ControlSelect; exports.ControlColorSelect = ControlColorSelect;