@arcanewizards/sigil 0.1.3 → 0.1.4

package/dist/{chunk-WEKMHSZV.cjs → chunk-CHVABPET.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
@@ -254,8 +254,8 @@ var ControlLabel = _react.forwardRef.call(void 0,
         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
     )
   }
@@ -528,7 +528,7 @@ var ControlColorSelect = ({
   ...props
 }) => {
   const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = _chunk5DRI7C4Ucjs.sigilColorUsage.call(void 0, color || "gray");
+  const selectedColor = _chunkTZJ4UXR3cjs.sigilColorUsage.call(void 0, color || "gray");
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     ControlSelect,
     {
@@ -625,7 +625,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
       )
     }
@@ -678,7 +678,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 +687,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"
               )

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

@@ -9,7 +9,7 @@ import {
   cnd,
   cssVariables,
   sigilColorUsage
-} from "./chunk-H4U4Z4GM.js";
+} from "./chunk-WYUGJOEB.js";
 
 // src/frontend/dialogs.tsx
 import {

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 _chunkCHVABPETcjs = require('../chunk-CHVABPET.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,
+      _chunkCHVABPETcjs.ControlButton,
       {
         onClick: selectDarkMode,
         active: colorSchemePreference === "dark",
@@ -48,7 +48,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlButton,
+      _chunkCHVABPETcjs.ControlButton,
       {
         onClick: selectLightMode,
         active: colorSchemePreference === "light",
@@ -61,7 +61,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlButton,
+      _chunkCHVABPETcjs.ControlButton,
       {
         onClick: selectSystemMode,
         active: colorSchemePreference === "auto",
@@ -74,7 +74,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkWEKMHSZVcjs.ControlColorSelect,
+      _chunkCHVABPETcjs.ControlColorSelect,
       {
         color,
         onChange: updateHintColor,

package/dist/frontend/appearance.js

@@ -1,10 +1,10 @@
 import {
   ControlButton,
   ControlColorSelect
-} from "../chunk-HF7IIHPE.js";
+} from "../chunk-E3VUC3Q4.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,10 @@
 
 
 
-var _chunkWEKMHSZVcjs = require('../../chunk-WEKMHSZV.cjs');
+var _chunkCHVABPETcjs = require('../../chunk-CHVABPET.cjs');
 require('../../chunk-PEARNJ5G.cjs');
 require('../../chunk-RI33QVOD.cjs');
-require('../../chunk-5DRI7C4U.cjs');
+require('../../chunk-TZJ4UXR3.cjs');
 
 
 
@@ -46,4 +46,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 = _chunkCHVABPETcjs.CheckboxControlButton; exports.ControlButton = _chunkCHVABPETcjs.ControlButton; exports.ControlButtonGroup = _chunkCHVABPETcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkCHVABPETcjs.ControlColorSelect; exports.ControlDetails = _chunkCHVABPETcjs.ControlDetails; exports.ControlDialog = _chunkCHVABPETcjs.ControlDialog; exports.ControlDialogButtons = _chunkCHVABPETcjs.ControlDialogButtons; exports.ControlInput = _chunkCHVABPETcjs.ControlInput; exports.ControlLabel = _chunkCHVABPETcjs.ControlLabel; exports.ControlParagraph = _chunkCHVABPETcjs.ControlParagraph; exports.ControlPercent = _chunkCHVABPETcjs.ControlPercent; exports.ControlSelect = _chunkCHVABPETcjs.ControlSelect; exports.InputSpanningTitle = _chunkCHVABPETcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkCHVABPETcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkCHVABPETcjs.LongPressableControlButton; exports.clsControlButton = _chunkCHVABPETcjs.clsControlButton; exports.clsControlPosition = _chunkCHVABPETcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkCHVABPETcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkCHVABPETcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkCHVABPETcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkCHVABPETcjs.controlPositionClass;

package/dist/frontend/controls/index.js

@@ -20,10 +20,10 @@ import {
   controlButtonColorVariable,
   controlButtonColorVariables,
   controlPositionClass
-} from "../../chunk-HF7IIHPE.js";
+} from "../../chunk-E3VUC3Q4.js";
 import "../../chunk-BIY5HAXP.js";
 import "../../chunk-4PMRDURG.js";
-import "../../chunk-H4U4Z4GM.js";
+import "../../chunk-WYUGJOEB.js";
 export {
   CheckboxControlButton,
   ControlButton,

package/dist/frontend/dialogs.cjs

@@ -4,14 +4,14 @@
 
 
 
-var _chunkWEKMHSZVcjs = require('../chunk-WEKMHSZV.cjs');
+var _chunkCHVABPETcjs = require('../chunk-CHVABPET.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 = _chunkCHVABPETcjs.Dialog; exports.DialogButtons = _chunkCHVABPETcjs.DialogButtons; exports.DialogContext = _chunkCHVABPETcjs.DialogContext; exports.DialogProvider = _chunkCHVABPETcjs.DialogProvider; exports.DialogTitle = _chunkCHVABPETcjs.DialogTitle;

package/dist/frontend/dialogs.js

@@ -4,10 +4,10 @@ import {
   DialogContext,
   DialogProvider,
   DialogTitle
-} from "../chunk-HF7IIHPE.js";
+} from "../chunk-E3VUC3Q4.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 _chunkCHVABPETcjs = require('./chunk-CHVABPET.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,
+        _chunkCHVABPETcjs.ControlButton,
         {
           onClick: openDevTools,
           variant: "toolbar",
@@ -251,7 +251,7 @@ var Debugger = ({ title, className }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkWEKMHSZVcjs.ControlButton,
+        _chunkCHVABPETcjs.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, _chunkCHVABPETcjs.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-E3VUC3Q4.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.4",
   "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",