@arcanewizards/sigil 0.1.3 → 0.1.5

package/dist/{chunk-WEKMHSZV.cjs → chunk-5CAFJT5T.cjs}

@@ -9,7 +9,7 @@ var _chunkRI33QVODcjs = require('./chunk-RI33QVOD.cjs');
 
 
 
-var _chunk5DRI7C4Ucjs = require('./chunk-5DRI7C4U.cjs');
+var _chunkTZJ4UXR3cjs = require('./chunk-TZJ4UXR3.cjs');
 
 // src/frontend/dialogs.tsx
 
@@ -75,7 +75,7 @@ var CONTROL_BUTTON_VAR_SUFFIX = {
   borderActive: "border-active"
 };
 var controlButtonColorVariable = (property) => `--sigil-control-button-${CONTROL_BUTTON_VAR_SUFFIX[property]}`;
-var controlButtonColorVariables = (usage) => _chunk5DRI7C4Ucjs.cssVariables.call(void 0, 
+var controlButtonColorVariables = (usage) => _chunkTZJ4UXR3cjs.cssVariables.call(void 0, 
   Object.fromEntries(
     Object.keys(usage).map(
       (key) => [controlButtonColorVariable(key), usage[key]]
@@ -91,16 +91,16 @@ var clsControlButton = ({
   primary
 }) => _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`),
-  _chunk5DRI7C4Ucjs.cnd.call(void 0, primary, `sigil-control-button-primary`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "border", `sigil-control-button-variant-border`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "large", `sigil-control-button-variant-large`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "properties", `sigil-control-button-variant-properties`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "table-row", `sigil-control-button-variant-table-row`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "toolbar", `sigil-control-button-variant-toolbar`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "titlebar", `sigil-control-button-variant-titlebar`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, touching, `sigil-control-button-touching`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, active, `sigil-control-button-active`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, touching && active, `sigil-control-button-active-touching`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, primary, `sigil-control-button-primary`),
   clsControlPosition(position),
   className
 );
@@ -140,7 +140,7 @@ var ControlButtonFrame = _react.forwardRef.call(void 0,
             _core.Icon,
             {
               icon,
-              className: _util.cn.call(void 0, _chunk5DRI7C4Ucjs.cnd.call(void 0, children, "text-[120%]", "text-[150%]"))
+              className: _util.cn.call(void 0, _chunkTZJ4UXR3cjs.cnd.call(void 0, children, "text-[120%]", "text-[150%]"))
             }
           ),
           children
@@ -217,14 +217,14 @@ var ControlParagraph = _react.forwardRef.call(void 0, ({ className, mode, positi
     className: _util.cn.call(void 0, 
       "border border-transparent",
       clsControlPosition(position),
-      _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+      _chunkTZJ4UXR3cjs.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, 
+      _chunkTZJ4UXR3cjs.cnd.call(void 0, 
         mode === "warning",
         `
           border-sigil-usage-yellow-dimmed-border
@@ -232,7 +232,7 @@ var ControlParagraph = _react.forwardRef.call(void 0, ({ className, mode, positi
           text-sigil-usage-yellow-text
         `
       ),
-      _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+      _chunkTZJ4UXR3cjs.cnd.call(void 0, 
         mode === "error",
         `
           border-sigil-usage-red-dimmed-border
@@ -247,15 +247,15 @@ 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",
+      "label",
       {
         ...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"),
+          _chunkTZJ4UXR3cjs.cnd.call(void 0, nonMicro, "max-[550px]:hidden"),
+          _chunkTZJ4UXR3cjs.cnd.call(void 0, disabled, "opacity-50"),
           clsControlSubgridPosition(position, subgrid),
           className
         )
@@ -273,9 +273,9 @@ var ControlDetails = _react.forwardRef.call(void 0,
       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"),
+        _chunkTZJ4UXR3cjs.cnd.call(void 0, align === "start", "justify-start"),
+        _chunkTZJ4UXR3cjs.cnd.call(void 0, align === "center", "justify-center"),
+        _chunkTZJ4UXR3cjs.cnd.call(void 0, align === "end", "justify-end"),
         className
       )
     }
@@ -318,7 +318,7 @@ var ControlDialog = ({
   {
     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")
+      _chunkTZJ4UXR3cjs.cnd.call(void 0, large, "control-grid-large", "control-grid")
     ),
     children
   }
@@ -413,7 +413,7 @@ var ControlInput = ({
       `,
       clsControlPosition(position),
       clsControlSubgridPosition(position, subgrid),
-      _chunk5DRI7C4Ucjs.cnd.call(void 0, nonMicro, "max-[550px]:hidden"),
+      _chunkTZJ4UXR3cjs.cnd.call(void 0, nonMicro, "max-[550px]:hidden"),
       className
     )
   }
@@ -507,19 +507,9 @@ var ControlSelect = ({
     }
   );
 };
-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,
+var ControlColoredSelect = ({
+  options,
+  value,
   onChange,
   variant,
   position,
@@ -527,13 +517,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = _chunk5DRI7C4Ucjs.sigilColorUsage.call(void 0, color || "gray");
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedColor = _chunkTZJ4UXR3cjs.sigilColorUsage.call(void 0, _nullishCoalesce(_optionalChain([selectedOption, 'optionalAccess', _6 => _6.color]), () => ( "gray")));
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         _radixui.Select.Trigger,
@@ -542,7 +532,7 @@ var ControlColorSelect = ({
           className: clsControlButton({
             variant,
             position,
-            active: _optionalChain([option, 'optionalAccess', _6 => _6.active])
+            active: _optionalChain([option, 'optionalAccess', _7 => _7.active])
           }),
           style: controlButtonColorVariables({
             bg: selectedColor.background,
@@ -569,7 +559,7 @@ var ControlColorSelect = ({
                 )
               ] }),
               children: [
-                _nullishCoalesce(_optionalChain([option, 'optionalAccess', _7 => _7.label]), () => ( placeholder)),
+                _nullishCoalesce(_optionalChain([option, 'optionalAccess', _8 => _8.label]), () => ( placeholder)),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   _core.Icon,
                   {
@@ -587,7 +577,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +589,31 @@ var ControlColorSelect = ({
     }
   );
 };
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY = Object.values(COLOR_OPTIONS);
+var ControlColorSelect = ({
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 
 // src/frontend/dialogs.tsx
 
@@ -625,7 +640,7 @@ var DialogTitle = _react.forwardRef.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"),
+        _chunkTZJ4UXR3cjs.cnd.call(void 0, isDarkDialog(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"),
         className
       )
     }
@@ -653,7 +668,7 @@ var Dialog = ({
     if (!dialogRef) return;
     dialogRef.showModal();
   }, [dialogRef]);
-  const close = () => _optionalChain([dialogRef, 'optionalAccess', _8 => _8.close, 'call', _9 => _9()]);
+  const close = () => _optionalChain([dialogRef, 'optionalAccess', _9 => _9.close, 'call', _10 => _10()]);
   const onClose = (event) => {
     if (closable) {
       dialogClosed();
@@ -678,7 +693,7 @@ var Dialog = ({
           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")
+        _chunkTZJ4UXR3cjs.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 }),
@@ -687,11 +702,11 @@ var Dialog = ({
           {
             className: _util.cn.call(void 0, 
               "text-sigil-foreground",
-              _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+              _chunkTZJ4UXR3cjs.cnd.call(void 0, 
                 variant === "light-compact" || variant === "dark-compact",
                 "p-0"
               ),
-              _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+              _chunkTZJ4UXR3cjs.cnd.call(void 0, 
                 variant !== "light-compact" && variant !== "dark-compact",
                 "p-arcane"
               )
@@ -768,4 +783,5 @@ var DialogProvider = ({ children }) => {
 
 
 
-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;
+
+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.ControlColoredSelect = ControlColoredSelect; exports.ControlColorSelect = ControlColorSelect;

package/dist/{chunk-HF7IIHPE.js → chunk-LKKN6DFB.js}

@@ -9,7 +9,7 @@ import {
   cnd,
   cssVariables,
   sigilColorUsage
-} from "./chunk-H4U4Z4GM.js";
+} from "./chunk-WYUGJOEB.js";
 
 // src/frontend/dialogs.tsx
 import {
@@ -247,7 +247,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = forwardRef2(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ jsx2(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -507,19 +507,9 @@ var ControlSelect = ({
     }
   );
 };
-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,
+var ControlColoredSelect = ({
+  options,
+  value,
   onChange,
   variant,
   position,
@@ -527,13 +517,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = sigilColorUsage(color || "gray");
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedColor = sigilColorUsage(selectedOption?.color ?? "gray");
   return /* @__PURE__ */ jsx5(
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ jsx5(
         Select.Trigger,
@@ -587,7 +577,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +589,31 @@ var ControlColorSelect = ({
     }
   );
 };
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY = Object.values(COLOR_OPTIONS);
+var ControlColorSelect = ({
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx5(
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 
 // src/frontend/dialogs.tsx
 import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -767,5 +782,6 @@ export {
   ControlInput,
   ControlPercent,
   ControlSelect,
+  ControlColoredSelect,
   ControlColorSelect
 };

package/dist/{chunk-5DRI7C4U.cjs → chunk-TZJ4UXR3.cjs}

@@ -1,5 +1,4 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/frontend/styling.ts
-var _react = require('react');
 var _zod = require('zod');
 var SIGIL_COLOR = _zod.z.enum([
   "purple",
@@ -41,15 +40,6 @@ var cssSigilColorUsageVariables = (prefix, usage) => cssVariables({
   [`--${prefix}-gradient-dark`]: usage.gradientDark
 });
 var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
-var useRootHintVariables = (color) => {
-  _react.useEffect.call(void 0, () => {
-    const root = document.querySelector(".arcane-theme-root");
-    if (!root) return;
-    Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
-      root.style.setProperty(key, value);
-    });
-  }, [color]);
-};
 var cssVariables = (variables) => variables;
 function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
@@ -62,5 +52,4 @@ function cnd(condition, truthyClassName, falseyClassName) {
 
 
 
-
-exports.SIGIL_COLOR = SIGIL_COLOR; exports.sigilColorUsage = sigilColorUsage; exports.cssSigilColorUsageVariables = cssSigilColorUsageVariables; exports.cssHintColorVariables = cssHintColorVariables; exports.useRootHintVariables = useRootHintVariables; exports.cssVariables = cssVariables; exports.cnd = cnd;
+exports.SIGIL_COLOR = SIGIL_COLOR; exports.sigilColorUsage = sigilColorUsage; exports.cssSigilColorUsageVariables = cssSigilColorUsageVariables; exports.cssHintColorVariables = cssHintColorVariables; exports.cssVariables = cssVariables; exports.cnd = cnd;

package/dist/{chunk-H4U4Z4GM.js → chunk-WYUGJOEB.js}

@@ -1,5 +1,4 @@
 // src/frontend/styling.ts
-import { useEffect } from "react";
 import { z } from "zod";
 var SIGIL_COLOR = z.enum([
   "purple",
@@ -41,15 +40,6 @@ var cssSigilColorUsageVariables = (prefix, usage) => cssVariables({
   [`--${prefix}-gradient-dark`]: usage.gradientDark
 });
 var cssHintColorVariables = (color) => cssSigilColorUsageVariables(`sigil-usage-hint`, sigilColorUsage(color));
-var useRootHintVariables = (color) => {
-  useEffect(() => {
-    const root = document.querySelector(".arcane-theme-root");
-    if (!root) return;
-    Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
-      root.style.setProperty(key, value);
-    });
-  }, [color]);
-};
 var cssVariables = (variables) => variables;
 function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
@@ -60,7 +50,6 @@ export {
   sigilColorUsage,
   cssSigilColorUsageVariables,
   cssHintColorVariables,
-  useRootHintVariables,
   cssVariables,
   cnd
 };

package/dist/frontend/appearance.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkWEKMHSZVcjs = require('../chunk-WEKMHSZV.cjs');
+var _chunk5CAFJT5Tcjs = require('../chunk-5CAFJT5T.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
-require('../chunk-5DRI7C4U.cjs');
+require('../chunk-TZJ4UXR3.cjs');
 
 // src/frontend/appearance.tsx
 var _core = require('@arcanejs/toolkit-frontend/components/core');
@@ -35,7 +35,7 @@ var AppearanceSwitcher = ({
   );
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "control-grid-pos-all flex flex-wrap items-stretch gap-2", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectDarkMode,
         active: colorSchemePreference === "dark",
@@ -48,7 +48,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectLightMode,
         active: colorSchemePreference === "light",
@@ -61,7 +61,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlButton,
+      _chunk5CAFJT5Tcjs.ControlButton,
       {
         onClick: selectSystemMode,
         active: colorSchemePreference === "auto",
@@ -74,7 +74,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlColorSelect,
+      _chunk5CAFJT5Tcjs.ControlColorSelect,
       {
         color,
         onChange: updateHintColor,

package/dist/frontend/appearance.js

@@ -1,10 +1,10 @@
 import {
   ControlButton,
   ControlColorSelect
-} from "../chunk-HF7IIHPE.js";
+} from "../chunk-LKKN6DFB.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
-import "../chunk-H4U4Z4GM.js";
+import "../chunk-WYUGJOEB.js";
 
 // src/frontend/appearance.tsx
 import { Icon } from "@arcanejs/toolkit-frontend/components/core";

package/dist/frontend/controls/index.cjs

@@ -20,10 +20,12 @@
 
 
 
-var _chunkWEKMHSZVcjs = require('../../chunk-WEKMHSZV.cjs');
+
+var _chunk5CAFJT5Tcjs = require('../../chunk-5CAFJT5T.cjs');
 require('../../chunk-PEARNJ5G.cjs');
 require('../../chunk-RI33QVOD.cjs');
-require('../../chunk-5DRI7C4U.cjs');
+require('../../chunk-TZJ4UXR3.cjs');
+
 
 
 
@@ -46,4 +48,4 @@ require('../../chunk-5DRI7C4U.cjs');
 
 
 
-exports.CheckboxControlButton = _chunkWEKMHSZVcjs.CheckboxControlButton; exports.ControlButton = _chunkWEKMHSZVcjs.ControlButton; exports.ControlButtonGroup = _chunkWEKMHSZVcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkWEKMHSZVcjs.ControlColorSelect; exports.ControlDetails = _chunkWEKMHSZVcjs.ControlDetails; exports.ControlDialog = _chunkWEKMHSZVcjs.ControlDialog; exports.ControlDialogButtons = _chunkWEKMHSZVcjs.ControlDialogButtons; exports.ControlInput = _chunkWEKMHSZVcjs.ControlInput; exports.ControlLabel = _chunkWEKMHSZVcjs.ControlLabel; exports.ControlParagraph = _chunkWEKMHSZVcjs.ControlParagraph; exports.ControlPercent = _chunkWEKMHSZVcjs.ControlPercent; exports.ControlSelect = _chunkWEKMHSZVcjs.ControlSelect; exports.InputSpanningTitle = _chunkWEKMHSZVcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkWEKMHSZVcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkWEKMHSZVcjs.LongPressableControlButton; exports.clsControlButton = _chunkWEKMHSZVcjs.clsControlButton; exports.clsControlPosition = _chunkWEKMHSZVcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkWEKMHSZVcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkWEKMHSZVcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkWEKMHSZVcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkWEKMHSZVcjs.controlPositionClass;
+exports.CheckboxControlButton = _chunk5CAFJT5Tcjs.CheckboxControlButton; exports.ControlButton = _chunk5CAFJT5Tcjs.ControlButton; exports.ControlButtonGroup = _chunk5CAFJT5Tcjs.ControlButtonGroup; exports.ControlColorSelect = _chunk5CAFJT5Tcjs.ControlColorSelect; exports.ControlColoredSelect = _chunk5CAFJT5Tcjs.ControlColoredSelect; exports.ControlDetails = _chunk5CAFJT5Tcjs.ControlDetails; exports.ControlDialog = _chunk5CAFJT5Tcjs.ControlDialog; exports.ControlDialogButtons = _chunk5CAFJT5Tcjs.ControlDialogButtons; exports.ControlInput = _chunk5CAFJT5Tcjs.ControlInput; exports.ControlLabel = _chunk5CAFJT5Tcjs.ControlLabel; exports.ControlParagraph = _chunk5CAFJT5Tcjs.ControlParagraph; exports.ControlPercent = _chunk5CAFJT5Tcjs.ControlPercent; exports.ControlSelect = _chunk5CAFJT5Tcjs.ControlSelect; exports.InputSpanningTitle = _chunk5CAFJT5Tcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunk5CAFJT5Tcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunk5CAFJT5Tcjs.LongPressableControlButton; exports.clsControlButton = _chunk5CAFJT5Tcjs.clsControlButton; exports.clsControlPosition = _chunk5CAFJT5Tcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunk5CAFJT5Tcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunk5CAFJT5Tcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunk5CAFJT5Tcjs.controlButtonColorVariables; exports.controlPositionClass = _chunk5CAFJT5Tcjs.controlPositionClass;

package/dist/frontend/controls/index.d.cts

@@ -86,18 +86,18 @@ declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.Detai
     position?: ControlPosition;
     mode?: ControlParagraphMode;
 } & react.RefAttributes<HTMLParagraphElement>>;
-type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+type ControlLabelProps = ComponentPropsWithoutRef<'label'> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
 };
-declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLLabelElement>>;
 type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
     position?: ControlPosition;
     align?: 'start' | 'center' | 'end';
@@ -146,13 +146,13 @@ type SelectOption<T> = {
      */
     active?: boolean;
 };
-type SelectProps<T extends string | null> = {
-    options: SelectOption<T>[];
+type SelectProps<T extends string | null, O extends SelectOption<T>> = {
+    options: O[];
     value: T | '';
     onChange: (value: T) => void;
-    triggerText?: (option: SelectOption<T>) => ReactNode;
-    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
-    option?: (option: SelectOption<T>) => ReactNode;
+    triggerText?: (option: O) => ReactNode;
+    triggerButton?: (option: null | O) => ReactNode;
+    option?: (option: O) => ReactNode;
     variant: ControlButtonVariant;
     position?: ControlPosition;
     disabled?: boolean;
@@ -160,11 +160,15 @@ type SelectProps<T extends string | null> = {
     placeholder?: ReactNode;
     triggerClassName?: string;
 };
-declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ControlSelect: <T extends string | null, O extends SelectOption<T> = SelectOption<T>>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T, O>) => react_jsx_runtime.JSX.Element;
+type SigilOptionWithColor<T> = SelectOption<T> & {
+    color: SigilColor;
+};
+type ControlColoredSelectProps<T extends string | null, O extends SigilOptionWithColor<T>> = SelectProps<T, O>;
+declare const ControlColoredSelect: <T extends string | null, O extends SigilOptionWithColor<T> = SigilOptionWithColor<T>>({ options, value, onChange, variant, position, disabled, placeholder, ...props }: ControlColoredSelectProps<T, O>) => react_jsx_runtime.JSX.Element;
 type ControlColorSelectProps = {
     color: SigilColor | '';
-    onChange: (color: SigilColor) => void;
-} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
-declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+} & Omit<ControlColoredSelectProps<SigilColor, SigilOptionWithColor<SigilColor>>, 'value' | 'options'>;
+declare const ControlColorSelect: ({ color, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
 
-export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlColoredSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };

package/dist/frontend/controls/index.d.ts

@@ -86,18 +86,18 @@ declare const ControlParagraph: react.ForwardRefExoticComponent<Omit<react.Detai
     position?: ControlPosition;
     mode?: ControlParagraphMode;
 } & react.RefAttributes<HTMLParagraphElement>>;
-type ControlLabelProps = ComponentPropsWithoutRef<'div'> & {
+type ControlLabelProps = ComponentPropsWithoutRef<'label'> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
 };
-declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+declare const ControlLabel: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & {
     subgrid?: boolean;
     position?: ControlPosition;
     disabled?: boolean;
     nonMicro?: boolean;
-} & react.RefAttributes<HTMLDivElement>>;
+} & react.RefAttributes<HTMLLabelElement>>;
 type ControlDetailsProps = ComponentPropsWithoutRef<'div'> & {
     position?: ControlPosition;
     align?: 'start' | 'center' | 'end';
@@ -146,13 +146,13 @@ type SelectOption<T> = {
      */
     active?: boolean;
 };
-type SelectProps<T extends string | null> = {
-    options: SelectOption<T>[];
+type SelectProps<T extends string | null, O extends SelectOption<T>> = {
+    options: O[];
     value: T | '';
     onChange: (value: T) => void;
-    triggerText?: (option: SelectOption<T>) => ReactNode;
-    triggerButton?: (option: null | SelectOption<T>) => ReactNode;
-    option?: (option: SelectOption<T>) => ReactNode;
+    triggerText?: (option: O) => ReactNode;
+    triggerButton?: (option: null | O) => ReactNode;
+    option?: (option: O) => ReactNode;
     variant: ControlButtonVariant;
     position?: ControlPosition;
     disabled?: boolean;
@@ -160,11 +160,15 @@ type SelectProps<T extends string | null> = {
     placeholder?: ReactNode;
     triggerClassName?: string;
 };
-declare const ControlSelect: <T extends string | null>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T>) => react_jsx_runtime.JSX.Element;
+declare const ControlSelect: <T extends string | null, O extends SelectOption<T> = SelectOption<T>>({ options, value, onChange, triggerText, triggerButton, option, variant, position, disabled, tooltip, placeholder, triggerClassName: className, }: SelectProps<T, O>) => react_jsx_runtime.JSX.Element;
+type SigilOptionWithColor<T> = SelectOption<T> & {
+    color: SigilColor;
+};
+type ControlColoredSelectProps<T extends string | null, O extends SigilOptionWithColor<T>> = SelectProps<T, O>;
+declare const ControlColoredSelect: <T extends string | null, O extends SigilOptionWithColor<T> = SigilOptionWithColor<T>>({ options, value, onChange, variant, position, disabled, placeholder, ...props }: ControlColoredSelectProps<T, O>) => react_jsx_runtime.JSX.Element;
 type ControlColorSelectProps = {
     color: SigilColor | '';
-    onChange: (color: SigilColor) => void;
-} & Pick<SelectProps<SigilColor>, 'variant' | 'position' | 'disabled' | 'tooltip' | 'placeholder'>;
-declare const ControlColorSelect: ({ color, onChange, variant, position, disabled, placeholder, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
+} & Omit<ControlColoredSelectProps<SigilColor, SigilOptionWithColor<SigilColor>>, 'value' | 'options'>;
+declare const ControlColorSelect: ({ color, ...props }: ControlColorSelectProps) => react_jsx_runtime.JSX.Element;
 
-export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };
+export { CheckboxControlButton, type CheckboxControlButtonProps, ControlButton, ControlButtonGroup, type ControlButtonGroupProps, type ControlButtonProps, type ControlButtonVariant, ControlColorSelect, ControlColoredSelect, ControlDetails, type ControlDetailsProps, ControlDialog, ControlDialogButtons, ControlInput, type ControlInputProps, ControlLabel, type ControlLabelProps, ControlParagraph, type ControlParagraphMode, type ControlParagraphProps, ControlPercent, type ControlPercentProps, type ControlPosition, ControlSelect, InputSpanningTitle, type InputSpanningTitleProps, InputWithDelayedPropagation, LongPressableControlButton, type LongPressableControlButtonProps, type SelectOption, clsControlButton, clsControlPosition, clsControlSubgridPosition, controlButtonColorVariable, controlButtonColorVariables, controlPositionClass };

package/dist/frontend/controls/index.js

@@ -3,6 +3,7 @@ import {
   ControlButton,
   ControlButtonGroup,
   ControlColorSelect,
+  ControlColoredSelect,
   ControlDetails,
   ControlDialog,
   ControlDialogButtons,
@@ -20,15 +21,16 @@ import {
   controlButtonColorVariable,
   controlButtonColorVariables,
   controlPositionClass
-} from "../../chunk-HF7IIHPE.js";
+} from "../../chunk-LKKN6DFB.js";
 import "../../chunk-BIY5HAXP.js";
 import "../../chunk-4PMRDURG.js";
-import "../../chunk-H4U4Z4GM.js";
+import "../../chunk-WYUGJOEB.js";
 export {
   CheckboxControlButton,
   ControlButton,
   ControlButtonGroup,
   ControlColorSelect,
+  ControlColoredSelect,
   ControlDetails,
   ControlDialog,
   ControlDialogButtons,

package/dist/frontend/dialogs.cjs

@@ -4,14 +4,14 @@
 
 
 
-var _chunkWEKMHSZVcjs = require('../chunk-WEKMHSZV.cjs');
+var _chunk5CAFJT5Tcjs = require('../chunk-5CAFJT5T.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
-require('../chunk-5DRI7C4U.cjs');
+require('../chunk-TZJ4UXR3.cjs');
 
 
 
 
 
 
-exports.Dialog = _chunkWEKMHSZVcjs.Dialog; exports.DialogButtons = _chunkWEKMHSZVcjs.DialogButtons; exports.DialogContext = _chunkWEKMHSZVcjs.DialogContext; exports.DialogProvider = _chunkWEKMHSZVcjs.DialogProvider; exports.DialogTitle = _chunkWEKMHSZVcjs.DialogTitle;
+exports.Dialog = _chunk5CAFJT5Tcjs.Dialog; exports.DialogButtons = _chunk5CAFJT5Tcjs.DialogButtons; exports.DialogContext = _chunk5CAFJT5Tcjs.DialogContext; exports.DialogProvider = _chunk5CAFJT5Tcjs.DialogProvider; exports.DialogTitle = _chunk5CAFJT5Tcjs.DialogTitle;

package/dist/frontend/dialogs.js

@@ -4,10 +4,10 @@ import {
   DialogContext,
   DialogProvider,
   DialogTitle
-} from "../chunk-HF7IIHPE.js";
+} from "../chunk-LKKN6DFB.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
-import "../chunk-H4U4Z4GM.js";
+import "../chunk-WYUGJOEB.js";
 export {
   Dialog,
   DialogButtons,

package/dist/frontend/styling.cjs

@@ -5,14 +5,12 @@
 
 
 
+var _chunkTZJ4UXR3cjs = require('../chunk-TZJ4UXR3.cjs');
 
-var _chunk5DRI7C4Ucjs = require('../chunk-5DRI7C4U.cjs');
 
 
 
 
 
 
-
-
-exports.SIGIL_COLOR = _chunk5DRI7C4Ucjs.SIGIL_COLOR; exports.cnd = _chunk5DRI7C4Ucjs.cnd; exports.cssHintColorVariables = _chunk5DRI7C4Ucjs.cssHintColorVariables; exports.cssSigilColorUsageVariables = _chunk5DRI7C4Ucjs.cssSigilColorUsageVariables; exports.cssVariables = _chunk5DRI7C4Ucjs.cssVariables; exports.sigilColorUsage = _chunk5DRI7C4Ucjs.sigilColorUsage; exports.useRootHintVariables = _chunk5DRI7C4Ucjs.useRootHintVariables;
+exports.SIGIL_COLOR = _chunkTZJ4UXR3cjs.SIGIL_COLOR; exports.cnd = _chunkTZJ4UXR3cjs.cnd; exports.cssHintColorVariables = _chunkTZJ4UXR3cjs.cssHintColorVariables; exports.cssSigilColorUsageVariables = _chunkTZJ4UXR3cjs.cssSigilColorUsageVariables; exports.cssVariables = _chunkTZJ4UXR3cjs.cssVariables; exports.sigilColorUsage = _chunkTZJ4UXR3cjs.sigilColorUsage;

package/dist/frontend/styling.d.cts

@@ -21,12 +21,8 @@ type SigilUsageColorUsage = {
 declare const sigilColorUsage: (color: SigilUsageColor) => SigilUsageColorUsage;
 declare const cssSigilColorUsageVariables: (prefix: string, usage: SigilUsageColorUsage) => CSSProperties;
 declare const cssHintColorVariables: (color: SigilColor) => CSSProperties;
-/**
- * Hook that will adjust the root hint color based on the given color.
- */
-declare const useRootHintVariables: (color: SigilColor) => void;
 declare const cssVariables: (variables: Partial<Record<`--${string}`, string | number>>) => CSSProperties;
 declare function cnd<T extends string>(condition: unknown, truthyClassName: T): T | undefined;
 declare function cnd<T extends string, F extends string>(condition: unknown, truthyClassName: T, falseyClassName: F): T | F;
 
-export { SIGIL_COLOR, type SigilColor, type SigilUsageColor, type SigilUsageColorUsage, cnd, cssHintColorVariables, cssSigilColorUsageVariables, cssVariables, sigilColorUsage, useRootHintVariables };
+export { SIGIL_COLOR, type SigilColor, type SigilUsageColor, type SigilUsageColorUsage, cnd, cssHintColorVariables, cssSigilColorUsageVariables, cssVariables, sigilColorUsage };

package/dist/frontend/styling.d.ts

@@ -21,12 +21,8 @@ type SigilUsageColorUsage = {
 declare const sigilColorUsage: (color: SigilUsageColor) => SigilUsageColorUsage;
 declare const cssSigilColorUsageVariables: (prefix: string, usage: SigilUsageColorUsage) => CSSProperties;
 declare const cssHintColorVariables: (color: SigilColor) => CSSProperties;
-/**
- * Hook that will adjust the root hint color based on the given color.
- */
-declare const useRootHintVariables: (color: SigilColor) => void;
 declare const cssVariables: (variables: Partial<Record<`--${string}`, string | number>>) => CSSProperties;
 declare function cnd<T extends string>(condition: unknown, truthyClassName: T): T | undefined;
 declare function cnd<T extends string, F extends string>(condition: unknown, truthyClassName: T, falseyClassName: F): T | F;
 
-export { SIGIL_COLOR, type SigilColor, type SigilUsageColor, type SigilUsageColorUsage, cnd, cssHintColorVariables, cssSigilColorUsageVariables, cssVariables, sigilColorUsage, useRootHintVariables };
+export { SIGIL_COLOR, type SigilColor, type SigilUsageColor, type SigilUsageColorUsage, cnd, cssHintColorVariables, cssSigilColorUsageVariables, cssVariables, sigilColorUsage };

package/dist/frontend/styling.hooks.cjs

@@ -0,0 +1,18 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkTZJ4UXR3cjs = require('../chunk-TZJ4UXR3.cjs');
+
+// src/frontend/styling.hooks.ts
+var _react = require('react');
+var useRootHintVariables = (color) => {
+  _react.useEffect.call(void 0, () => {
+    const root = document.querySelector(".arcane-theme-root");
+    if (!root) return;
+    Object.entries(_chunkTZJ4UXR3cjs.cssHintColorVariables.call(void 0, color)).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  }, [color]);
+};
+
+
+exports.useRootHintVariables = useRootHintVariables;

package/dist/frontend/styling.hooks.d.cts

@@ -0,0 +1,10 @@
+import { SigilColor } from './styling.cjs';
+import 'react';
+import 'zod';
+
+/**
+ * Hook that will adjust the root hint color based on the given color.
+ */
+declare const useRootHintVariables: (color: SigilColor) => void;
+
+export { useRootHintVariables };

package/dist/frontend/styling.hooks.d.ts

@@ -0,0 +1,10 @@
+import { SigilColor } from './styling.js';
+import 'react';
+import 'zod';
+
+/**
+ * Hook that will adjust the root hint color based on the given color.
+ */
+declare const useRootHintVariables: (color: SigilColor) => void;
+
+export { useRootHintVariables };

package/dist/frontend/styling.hooks.js

@@ -0,0 +1,18 @@
+import {
+  cssHintColorVariables
+} from "../chunk-WYUGJOEB.js";
+
+// src/frontend/styling.hooks.ts
+import { useEffect } from "react";
+var useRootHintVariables = (color) => {
+  useEffect(() => {
+    const root = document.querySelector(".arcane-theme-root");
+    if (!root) return;
+    Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
+      root.style.setProperty(key, value);
+    });
+  }, [color]);
+};
+export {
+  useRootHintVariables
+};

package/dist/frontend/styling.js

@@ -4,15 +4,13 @@ import {
   cssHintColorVariables,
   cssSigilColorUsageVariables,
   cssVariables,
-  sigilColorUsage,
-  useRootHintVariables
-} from "../chunk-H4U4Z4GM.js";
+  sigilColorUsage
+} from "../chunk-WYUGJOEB.js";
 export {
   SIGIL_COLOR,
   cnd,
   cssHintColorVariables,
   cssSigilColorUsageVariables,
   cssVariables,
-  sigilColorUsage,
-  useRootHintVariables
+  sigilColorUsage
 };

package/dist/frontend.cjs

@@ -16,12 +16,12 @@ var _chunkCAYKPJIXcjs = require('./chunk-CAYKPJIX.cjs');
 var _chunkVZ4A6RRTcjs = require('./chunk-VZ4A6RRT.cjs');
 
 
-var _chunkWEKMHSZVcjs = require('./chunk-WEKMHSZV.cjs');
+var _chunk5CAFJT5Tcjs = require('./chunk-5CAFJT5T.cjs');
 require('./chunk-PEARNJ5G.cjs');
 require('./chunk-RI33QVOD.cjs');
 
 
-var _chunk5DRI7C4Ucjs = require('./chunk-5DRI7C4U.cjs');
+var _chunkTZJ4UXR3cjs = require('./chunk-TZJ4UXR3.cjs');
 
 // src/frontend/app-root.tsx
 var _toolkitfrontend = require('@arcanejs/toolkit-frontend');
@@ -242,7 +242,7 @@ var Debugger = ({ title, className }) => {
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "grow px-1", children: title }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkA5LYYZERcjs.ToolbarDivider, {}),
       openDevTools && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkWEKMHSZVcjs.ControlButton,
+        _chunk5CAFJT5Tcjs.ControlButton,
         {
           onClick: openDevTools,
           variant: "toolbar",
@@ -251,7 +251,7 @@ var Debugger = ({ title, className }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkWEKMHSZVcjs.ControlButton,
+        _chunk5CAFJT5Tcjs.ControlButton,
         {
           onClick: handleRequestScrollToBottom,
           variant: "toolbar",
@@ -259,7 +259,7 @@ var Debugger = ({ title, className }) => {
           children: "Scroll to Bottom"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkWEKMHSZVcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk5CAFJT5Tcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
     ] }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "pre",
@@ -286,12 +286,12 @@ Data Directory: ${system.dataDirectory}`
               "span",
               {
                 className: _util.cn.call(void 0, 
-                  _chunk5DRI7C4Ucjs.cnd.call(void 0, log.level === "error", "text-sigil-usage-red-foreground"),
-                  _chunk5DRI7C4Ucjs.cnd.call(void 0, 
+                  _chunkTZJ4UXR3cjs.cnd.call(void 0, log.level === "error", "text-sigil-usage-red-foreground"),
+                  _chunkTZJ4UXR3cjs.cnd.call(void 0, 
                     log.level === "warn",
                     "text-sigil-usage-yellow-foreground"
                   ),
-                  _chunk5DRI7C4Ucjs.cnd.call(void 0, log.level === "info", "text-sigil-usage-blue-foreground")
+                  _chunkTZJ4UXR3cjs.cnd.call(void 0, log.level === "info", "text-sigil-usage-blue-foreground")
                 ),
                 children: log.level
               }

package/dist/frontend.js

@@ -16,12 +16,12 @@ import {
 } from "./chunk-EJNNLQ2S.js";
 import {
   ControlButton
-} from "./chunk-HF7IIHPE.js";
+} from "./chunk-LKKN6DFB.js";
 import "./chunk-BIY5HAXP.js";
 import "./chunk-4PMRDURG.js";
 import {
   cnd
-} from "./chunk-H4U4Z4GM.js";
+} from "./chunk-WYUGJOEB.js";
 
 // src/frontend/app-root.tsx
 import { StageContext } from "@arcanejs/toolkit-frontend";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcanewizards/sigil",
   "description": "Application framework for A/V applications, built on-top of arcanejs",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -65,6 +65,12 @@
       "import": "./dist/frontend/styling.js",
       "require": "./dist/frontend/styling.cjs"
     },
+    "./frontend/styling.hooks": {
+      "@arcanewizards/source": "./src/frontend/styling.hooks.ts",
+      "types": "./dist/frontend/styling.hooks.d.ts",
+      "import": "./dist/frontend/styling.hooks.js",
+      "require": "./dist/frontend/styling.hooks.cjs"
+    },
     "./frontend/toolbars": {
       "@arcanewizards/source": "./src/frontend/toolbars.tsx",
       "types": "./dist/frontend/toolbars.d.ts",
@@ -115,8 +121,8 @@
     "tailwindcss": "^4.1.13",
     "tsup": "^8.1.0",
     "typescript": "^5.7.3",
-    "@arcanewizards/eslint-config": "^0.0.0",
-    "@arcanewizards/typescript-config": "^0.0.0"
+    "@arcanewizards/typescript-config": "^0.0.0",
+    "@arcanewizards/eslint-config": "^0.0.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && pnpm build:styles && check-export-map",