@arcanewizards/sigil 0.1.0

package/dist/chunk-XAK7WC3D.js

@@ -0,0 +1,767 @@
+import {
+  TooltipWrapper
+} from "./chunk-BIY5HAXP.js";
+import {
+  useLongPressable,
+  usePressable
+} from "./chunk-4PMRDURG.js";
+import {
+  cnd,
+  cssVariables,
+  sigilColorUsage
+} from "./chunk-H4U4Z4GM.js";
+
+// src/frontend/dialogs.tsx
+import {
+  createContext,
+  forwardRef as forwardRef4,
+  useEffect as useEffect2,
+  useState
+} from "react";
+import { Icon as Icon3 } from "@arcanejs/toolkit-frontend/components/core";
+import { cn as cn6 } from "@arcanejs/toolkit-frontend/util";
+
+// src/frontend/controls/buttons.tsx
+import {
+  forwardRef
+} from "react";
+import { cn } from "@arcanejs/toolkit-frontend/util";
+import { Icon } from "@arcanejs/toolkit-frontend/components/core";
+
+// 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
+import { jsx, jsxs } from "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) => cssVariables(
+  Object.fromEntries(
+    Object.keys(usage).map(
+      (key) => [controlButtonColorVariable(key), usage[key]]
+    )
+  )
+);
+var clsControlButton = ({
+  variant,
+  active,
+  touching,
+  position,
+  className
+}) => cn(
+  `sigil-control-button`,
+  cnd(variant === "border", `sigil-control-button-variant-border`),
+  cnd(variant === "large", `sigil-control-button-variant-large`),
+  cnd(variant === "properties", `sigil-control-button-variant-properties`),
+  cnd(variant === "table-row", `sigil-control-button-variant-table-row`),
+  cnd(variant === "toolbar", `sigil-control-button-variant-toolbar`),
+  cnd(variant === "titlebar", `sigil-control-button-variant-titlebar`),
+  cnd(touching, `sigil-control-button-touching`),
+  cnd(active, `sigil-control-button-active`),
+  cnd(touching && active, `sigil-control-button-active-touching`),
+  clsControlPosition(position),
+  className
+);
+var ControlButtonFrame = forwardRef(
+  ({
+    children,
+    className,
+    type,
+    variant = "toolbar",
+    icon,
+    active,
+    touching,
+    disabled,
+    title,
+    tooltipSide,
+    position,
+    ...props
+  }, ref) => {
+    const btn = /* @__PURE__ */ jsx(
+      "button",
+      {
+        ...props,
+        ref,
+        type: type ?? "button",
+        disabled,
+        className: clsControlButton({
+          variant,
+          active,
+          touching,
+          position,
+          className
+        }),
+        children: /* @__PURE__ */ jsxs("span", { children: [
+          icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              icon,
+              className: cn(cnd(children, "text-[120%]", "text-[150%]"))
+            }
+          ),
+          children
+        ] })
+      }
+    );
+    if (!title) return btn;
+    return /* @__PURE__ */ jsx(TooltipWrapper, { tooltip: title, side: tooltipSide, children: btn });
+  }
+);
+ControlButtonFrame.displayName = "ControlButtonFrame";
+var ControlButton = forwardRef(
+  ({ onClick, disabled, ...props }, ref) => {
+    const { handlers, touching } = usePressable(onClick);
+    return /* @__PURE__ */ jsx(
+      ControlButtonFrame,
+      {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...!disabled ? handlers : {}
+      }
+    );
+  }
+);
+ControlButton.displayName = "ControlButton";
+var CheckboxControlButton = forwardRef(({ active, label, ...props }, ref) => /* @__PURE__ */ jsxs(ControlButton, { ...props, ref, active, children: [
+  /* @__PURE__ */ jsx(Icon, { icon: active ? "check_box" : "check_box_outline_blank" }),
+  label
+] }));
+CheckboxControlButton.displayName = "CheckboxControlButton";
+var LongPressableControlButton = forwardRef(({ active, disabled, onPress, onRelease, ...props }, ref) => {
+  const { handlers, touching } = useLongPressable({ onPress, onRelease });
+  return /* @__PURE__ */ jsx(
+    ControlButtonFrame,
+    {
+      ...props,
+      ref,
+      active: active || touching,
+      disabled,
+      ...!disabled ? handlers : {}
+    }
+  );
+});
+LongPressableControlButton.displayName = "LongPressableControlButton";
+var ControlButtonGroup = forwardRef(({ children, className, position, ...props }, ref) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-sigil-control-gap
+        [&>button]:grow
+      `,
+      clsControlPosition(position),
+      className
+    ),
+    children
+  }
+));
+ControlButtonGroup.displayName = "ControlButtonGroup";
+
+// src/frontend/controls/content.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { cn as cn2 } from "@arcanejs/toolkit-frontend/util";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ControlParagraph = forwardRef2(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ jsx2(
+  "p",
+  {
+    ...props,
+    ref,
+    className: cn2(
+      "border border-transparent",
+      clsControlPosition(position),
+      cnd(
+        mode === "success",
+        `
+          border-sigil-usage-green-dimmed-border
+          bg-sigil-usage-green-dimmed-background p-1 text-sigil-usage-green-text
+        `
+      ),
+      cnd(
+        mode === "warning",
+        `
+          border-sigil-usage-yellow-dimmed-border
+          bg-sigil-usage-yellow-dimmed-background p-1
+          text-sigil-usage-yellow-text
+        `
+      ),
+      cnd(
+        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 = forwardRef2(
+  ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ...props,
+        ref,
+        className: cn2(
+          "flex items-center justify-end gap-0.6 p-0.6",
+          clsControlPosition(position),
+          cnd(nonMicro, "max-[550px]:hidden"),
+          cnd(disabled, "opacity-50"),
+          clsControlSubgridPosition(position, subgrid),
+          className
+        )
+      }
+    );
+  }
+);
+ControlLabel.displayName = "ControlLabel";
+var ControlDetails = forwardRef2(
+  ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ jsx2(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn2(
+        "flex items-center px-0.3 text-sigil-foreground-muted",
+        clsControlPosition(position),
+        cnd(align === "start", "justify-start"),
+        cnd(align === "center", "justify-center"),
+        cnd(align === "end", "justify-end"),
+        className
+      )
+    }
+  )
+);
+ControlDetails.displayName = "ControlDetails";
+var InputSpanningTitle = forwardRef2(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ jsx2(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn2(
+      "truncate p-0.6 text-center text-[0.8rem] font-bold",
+      clsControlPosition(position),
+      className
+    )
+  }
+));
+InputSpanningTitle.displayName = "InputSpanningTitle";
+
+// src/frontend/controls/dialogs.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { cn as cn3 } from "@arcanejs/toolkit-frontend/util";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ControlDialogButtons = forwardRef3(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx3(
+  ControlButtonGroup,
+  {
+    ref,
+    className: cn3("control-grid-pos-row", className),
+    ...props,
+    children
+  }
+));
+var ControlDialog = ({
+  children,
+  large,
+  ...props
+}) => /* @__PURE__ */ jsx3(Dialog, { ...props, variant: "dark", children: /* @__PURE__ */ jsx3(
+  "div",
+  {
+    className: cn3(
+      "gap-1 bg-sigil-bg-dark select-none",
+      cnd(large, "control-grid-large", "control-grid")
+    ),
+    children
+  }
+) });
+
+// src/frontend/controls/input.tsx
+import {
+  useCallback,
+  useEffect,
+  useRef
+} from "react";
+import { cn as cn4 } from "@arcanejs/toolkit-frontend/util";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var InputWithDelayedPropagation = ({
+  value,
+  disabled,
+  onChange,
+  inputRef: inputRefProp,
+  ...props
+}) => {
+  const lastValue = useRef(value);
+  const inputRef = useRef(null);
+  useEffect(() => {
+    if (inputRef.current && inputRef.current.value !== value) {
+      inputRef.current.value = value;
+    }
+    lastValue.current = value;
+  }, [value]);
+  const updateRef = useCallback(
+    (instance) => {
+      inputRef.current = instance;
+      if (inputRefProp) {
+        inputRefProp.current = instance;
+      }
+    },
+    [inputRefProp]
+  );
+  const onBlurProp = props.onBlur;
+  const onBlur = useCallback(
+    (e) => {
+      if (e.currentTarget.value !== lastValue.current) {
+        onChange(e.currentTarget.value, false);
+      }
+      onBlurProp?.(e);
+    },
+    [onChange, onBlurProp]
+  );
+  const onKeyUpProp = props.onKeyUp;
+  const onKeyUp = useCallback(
+    (e) => {
+      if ((e.key === "Enter" || e.key.startsWith("Arrow")) && e.currentTarget.value !== lastValue.current) {
+        onChange(e.currentTarget.value, true);
+      }
+      onKeyUpProp?.(e);
+    },
+    [onChange, onKeyUpProp]
+  );
+  return /* @__PURE__ */ jsx4(
+    "input",
+    {
+      ref: updateRef,
+      defaultValue: value,
+      onBlur,
+      onKeyUp,
+      disabled,
+      ...props
+    }
+  );
+};
+var ControlInput = ({
+  className,
+  nonMicro,
+  position = "first",
+  subgrid,
+  ...props
+}) => /* @__PURE__ */ jsx4(
+  InputWithDelayedPropagation,
+  {
+    ...props,
+    className: cn4(
+      `
+        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),
+      cnd(nonMicro, "max-[550px]:hidden"),
+      className
+    )
+  }
+);
+var ControlPercent = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx4(ControlInput, { ...props, className: cn4("min-w-[5rem]", className) });
+
+// src/frontend/controls/select.tsx
+import { Select } from "radix-ui";
+import { useCallback as useCallback2 } from "react";
+import { cn as cn5 } from "@arcanejs/toolkit-frontend/util";
+import { Icon as Icon2 } from "@arcanejs/toolkit-frontend/components/core";
+import { Fragment, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+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 = useCallback2(
+    (val) => {
+      const matchingOption = options.find(
+        (option2) => (option2.value ?? NULL_VALUE) === val
+      );
+      if (matchingOption) {
+        onChange(matchingOption.value);
+      }
+    },
+    [options, onChange]
+  );
+  const t = triggerButton ? triggerButton(selectedOption ?? null) : /* @__PURE__ */ jsx5(
+    Select.Trigger,
+    {
+      disabled,
+      className: cn5(
+        clsControlButton({
+          variant,
+          position,
+          active: selectedOption?.active
+        }),
+        className
+      ),
+      children: /* @__PURE__ */ jsx5(Select.Value, { placeholder, children: selectedOption ? triggerText?.(selectedOption) ?? selectedOption.label : "Unknown" })
+    }
+  );
+  return /* @__PURE__ */ jsxs2(
+    Select.Root,
+    {
+      value: value ?? NULL_VALUE,
+      onValueChange,
+      disabled,
+      children: [
+        tooltip ? /* @__PURE__ */ jsx5(TooltipWrapper, { tooltip, children: t }) : t,
+        /* @__PURE__ */ jsxs2(
+          Select.Content,
+          {
+            className: cn5(
+              `
+            z-sigil-select-content rounded-sigil-control border
+            border-sigil-border bg-sigil-bg-dark shadow-sigil-box
+          `
+            ),
+            children: [
+              /* @__PURE__ */ jsx5(Select.ScrollUpButton, { className: "text-center", children: /* @__PURE__ */ jsx5(Icon2, { icon: "arrow_drop_up" }) }),
+              /* @__PURE__ */ jsx5(Select.Viewport, { className: "p-1", children: options.map((o) => /* @__PURE__ */ jsx5(
+                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: o.value ?? NULL_VALUE,
+                  children: /* @__PURE__ */ jsx5(Select.ItemText, { children: option?.(o) ?? o.label })
+                },
+                o.value ?? NULL_VALUE
+              )) }),
+              /* @__PURE__ */ jsx5(Select.ScrollDownButton, { className: "text-center", children: /* @__PURE__ */ jsx5(Icon2, { 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 = sigilColorUsage(color || "gray");
+  return /* @__PURE__ */ jsx5(
+    ControlSelect,
+    {
+      options,
+      value: color,
+      onChange,
+      triggerButton: (option) => /* @__PURE__ */ jsx5(
+        Select.Trigger,
+        {
+          disabled,
+          className: clsControlButton({
+            variant,
+            position,
+            active: option?.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__ */ jsxs2(
+            Select.Value,
+            {
+              placeholder: /* @__PURE__ */ jsxs2(Fragment, { children: [
+                placeholder,
+                /* @__PURE__ */ jsx5(
+                  Icon2,
+                  {
+                    className: "\n                    -my-text-1 -mr-text-0.5 -ml-text-0.25 text-arcane-normal\n                  ",
+                    icon: "arrow_drop_down"
+                  }
+                )
+              ] }),
+              children: [
+                option?.label ?? placeholder,
+                /* @__PURE__ */ jsx5(
+                  Icon2,
+                  {
+                    className: "\n                -my-text-1 -mr-text-0.5 -ml-text-0.25 text-arcane-normal\n              ",
+                    icon: "arrow_drop_down"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      option: (option) => /* @__PURE__ */ jsx5(
+        "span",
+        {
+          className: "",
+          style: {
+            color: `var(--sigil-usage-${option.value}-foreground)`
+          },
+          children: option.label
+        }
+      ),
+      variant,
+      position,
+      disabled,
+      ...props
+    }
+  );
+};
+
+// src/frontend/dialogs.tsx
+import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
+var DialogContext = createContext({
+  createDialog: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayMessage: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayError: () => {
+    throw new Error("DialogContext not provided");
+  }
+});
+var DialogTitle = forwardRef4(
+  ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ jsx6(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn6(
+        `
+          flex items-center justify-center gap-0.6 border-b border-sigil-border
+          p-arcane font-bold
+        `,
+        cnd(isDarkDialog(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"),
+        className
+      )
+    }
+  )
+);
+DialogTitle.displayName = "DialogTitle";
+var DialogButtons = forwardRef4(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn6("mt-arcane flex justify-end gap-0.6", className)
+  }
+));
+DialogButtons.displayName = "DialogButtons";
+var Dialog = ({
+  children,
+  dialogClosed,
+  closable = true,
+  title,
+  variant = "light"
+}) => {
+  const [dialogRef, setDialogRef] = useState(null);
+  useEffect2(() => {
+    if (!dialogRef) return;
+    dialogRef.showModal();
+  }, [dialogRef]);
+  const close = () => dialogRef?.close();
+  const onClose = (event) => {
+    if (closable) {
+      dialogClosed();
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.showModal();
+  };
+  const onMouseDown = (event) => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ jsx6(
+    "dialog",
+    {
+      ref: setDialogRef,
+      onMouseDown,
+      onClose,
+      className: cn6(
+        `
+          max-w-[80vw] min-w-[10vw] border-none p-0 text-sigil-dialog-foreground
+          outline-none backdrop-sigil-dialog
+        `,
+        cnd(isDarkDialog(variant), "bg-sigil-bg-dark", "bg-sigil-bg-light")
+      ),
+      children: /* @__PURE__ */ jsxs3("div", { className: "border border-sigil-border", children: [
+        title && /* @__PURE__ */ jsx6(DialogTitle, { variant, children: title }),
+        /* @__PURE__ */ jsx6(
+          "div",
+          {
+            className: cn6(
+              "text-sigil-foreground",
+              cnd(
+                variant === "light-compact" || variant === "dark-compact",
+                "p-0"
+              ),
+              cnd(
+                variant !== "light-compact" && variant !== "dark-compact",
+                "p-arcane"
+              )
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+var DialogProvider = ({ children }) => {
+  const [dialogs, setDialogs] = useState([]);
+  const createDialog = (dialog, options = {}) => {
+    setDialogs((items) => [...items, { dialog, options }]);
+  };
+  const displayMessage = (message, title) => {
+    createDialog(
+      (close) => /* @__PURE__ */ jsxs3(Fragment2, { children: [
+        /* @__PURE__ */ jsx6("div", { children: message }),
+        /* @__PURE__ */ jsx6(DialogButtons, { children: /* @__PURE__ */ jsx6(ControlButton, { onClick: close, variant: "large", children: "OK" }) })
+      ] }),
+      { title }
+    );
+  };
+  const displayError = (message, title) => displayMessage(
+    message,
+    /* @__PURE__ */ jsxs3(Fragment2, { children: [
+      /* @__PURE__ */ jsx6(Icon3, { icon: "error" }),
+      title || "Error"
+    ] })
+  );
+  return /* @__PURE__ */ jsxs3(
+    DialogContext.Provider,
+    {
+      value: { createDialog, displayMessage, displayError },
+      children: [
+        children,
+        dialogs.map((item, index) => {
+          const deleteDialog = () => {
+            setDialogs((items) => items.filter((dialog) => dialog !== item));
+          };
+          return /* @__PURE__ */ jsx6(Dialog, { dialogClosed: deleteDialog, ...item.options, children: item.dialog(deleteDialog) }, index);
+        })
+      ]
+    }
+  );
+};
+
+export {
+  clsControlPosition,
+  clsControlSubgridPosition,
+  controlPositionClass,
+  controlButtonColorVariable,
+  controlButtonColorVariables,
+  clsControlButton,
+  ControlButton,
+  CheckboxControlButton,
+  LongPressableControlButton,
+  ControlButtonGroup,
+  ControlParagraph,
+  ControlLabel,
+  ControlDetails,
+  InputSpanningTitle,
+  DialogContext,
+  DialogTitle,
+  DialogButtons,
+  Dialog,
+  DialogProvider,
+  ControlDialogButtons,
+  ControlDialog,
+  InputWithDelayedPropagation,
+  ControlInput,
+  ControlPercent,
+  ControlSelect,
+  ControlColorSelect
+};