@arcanewizards/sigil 0.1.2 → 0.1.4

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arcane Wizards Ltd
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/{chunk-MXDDIFIO.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]]
@@ -87,18 +87,20 @@ var clsControlButton = ({
   active,
   touching,
   position,
-  className
+  className,
+  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`),
+  _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
 );
@@ -115,6 +117,7 @@ var ControlButtonFrame = _react.forwardRef.call(void 0,
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -129,6 +132,7 @@ var ControlButtonFrame = _react.forwardRef.call(void 0,
           active,
           touching,
           position,
+          primary,
           className
         }),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
@@ -136,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
@@ -213,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
@@ -228,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
@@ -250,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
         )
@@ -269,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
       )
     }
@@ -314,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
   }
@@ -409,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
     )
   }
@@ -524,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,
     {
@@ -621,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
       )
     }
@@ -674,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 }),
@@ -683,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-XAK7WC3D.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 {
@@ -87,7 +87,8 @@ var clsControlButton = ({
   active,
   touching,
   position,
-  className
+  className,
+  primary
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -99,6 +100,7 @@ var clsControlButton = ({
   cnd(touching, `sigil-control-button-touching`),
   cnd(active, `sigil-control-button-active`),
   cnd(touching && active, `sigil-control-button-active-touching`),
+  cnd(primary, `sigil-control-button-primary`),
   clsControlPosition(position),
   className
 );
@@ -115,6 +117,7 @@ var ControlButtonFrame = forwardRef(
     title,
     tooltipSide,
     position,
+    primary,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ jsx(
@@ -129,6 +132,7 @@ var ControlButtonFrame = forwardRef(
           active,
           touching,
           position,
+          primary,
           className
         }),
         children: /* @__PURE__ */ jsxs("span", { children: [

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

package/dist/frontend/appearance.js

@@ -1,10 +1,10 @@
 import {
   ControlButton,
   ControlColorSelect
-} from "../chunk-XAK7WC3D.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 _chunkMXDDIFIOcjs = require('../../chunk-MXDDIFIO.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 = _chunkMXDDIFIOcjs.CheckboxControlButton; exports.ControlButton = _chunkMXDDIFIOcjs.ControlButton; exports.ControlButtonGroup = _chunkMXDDIFIOcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkMXDDIFIOcjs.ControlColorSelect; exports.ControlDetails = _chunkMXDDIFIOcjs.ControlDetails; exports.ControlDialog = _chunkMXDDIFIOcjs.ControlDialog; exports.ControlDialogButtons = _chunkMXDDIFIOcjs.ControlDialogButtons; exports.ControlInput = _chunkMXDDIFIOcjs.ControlInput; exports.ControlLabel = _chunkMXDDIFIOcjs.ControlLabel; exports.ControlParagraph = _chunkMXDDIFIOcjs.ControlParagraph; exports.ControlPercent = _chunkMXDDIFIOcjs.ControlPercent; exports.ControlSelect = _chunkMXDDIFIOcjs.ControlSelect; exports.InputSpanningTitle = _chunkMXDDIFIOcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkMXDDIFIOcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkMXDDIFIOcjs.LongPressableControlButton; exports.clsControlButton = _chunkMXDDIFIOcjs.clsControlButton; exports.clsControlPosition = _chunkMXDDIFIOcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkMXDDIFIOcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkMXDDIFIOcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkMXDDIFIOcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkMXDDIFIOcjs.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.d.cts

@@ -33,6 +33,7 @@ type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' |
     title?: ReactNode;
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
+    primary?: boolean;
 } & ({
     children: ReactNode;
     icon?: string;
@@ -49,8 +50,9 @@ type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'childre
     title?: ReactNode;
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
+    primary?: boolean;
 };
-declare const clsControlButton: ({ variant, active, touching, position, className, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className">) => string;
+declare const clsControlButton: ({ variant, active, touching, position, className, primary, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary">) => string;
 declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
 type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
     label?: string;

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

@@ -33,6 +33,7 @@ type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' |
     title?: ReactNode;
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
+    primary?: boolean;
 } & ({
     children: ReactNode;
     icon?: string;
@@ -49,8 +50,9 @@ type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'childre
     title?: ReactNode;
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
+    primary?: boolean;
 };
-declare const clsControlButton: ({ variant, active, touching, position, className, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className">) => string;
+declare const clsControlButton: ({ variant, active, touching, position, className, primary, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary">) => string;
 declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
 type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
     label?: string;

package/dist/frontend/controls/index.js

@@ -20,10 +20,10 @@ import {
   controlButtonColorVariable,
   controlButtonColorVariables,
   controlPositionClass
-} from "../../chunk-XAK7WC3D.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 _chunkMXDDIFIOcjs = require('../chunk-MXDDIFIO.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 = _chunkMXDDIFIOcjs.Dialog; exports.DialogButtons = _chunkMXDDIFIOcjs.DialogButtons; exports.DialogContext = _chunkMXDDIFIOcjs.DialogContext; exports.DialogProvider = _chunkMXDDIFIOcjs.DialogProvider; exports.DialogTitle = _chunkMXDDIFIOcjs.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-XAK7WC3D.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/styles/sigil.css

@@ -489,6 +489,17 @@
   --tw-drop-shadow: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.5));
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
+.sigil-control-button-primary {
+  --sigil-control-button-bg: var(--sigil-usage-hint-background);
+  --sigil-control-button-bg-hover: var(--sigil-usage-hint-border);
+  --sigil-control-button-bg-active: var(--sigil-usage-hint-border);
+  --sigil-control-button-fg: var(--sigil-usage-hint-text);
+  --sigil-control-button-fg-hover: var(--sigil-usage-hint-text);
+  --sigil-control-button-fg-active: var(--sigil-usage-hint-text);
+  --sigil-control-button-border: transparent;
+  --sigil-control-button-border-hover: transparent;
+  --sigil-control-button-border-active: transparent;
+}
 .outline-none {
   --tw-outline-style: none;
   outline-style: none;

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 _chunkMXDDIFIOcjs = require('./chunk-MXDDIFIO.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, 
-        _chunkMXDDIFIOcjs.ControlButton,
+        _chunkCHVABPETcjs.ControlButton,
         {
           onClick: openDevTools,
           variant: "toolbar",
@@ -251,7 +251,7 @@ var Debugger = ({ title, className }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkMXDDIFIOcjs.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, _chunkMXDDIFIOcjs.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-XAK7WC3D.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/dist/index.cjs

@@ -139,6 +139,7 @@ var runSigilApp = ({
   logger: upstreamLogger,
   title,
   version,
+  edition,
   appProps,
   toolkitOptions,
   createApp,
@@ -233,6 +234,7 @@ var runSigilApp = ({
     createApp({
       title,
       version,
+      edition,
       toolkit,
       logger,
       logEventEmitter,

package/dist/index.d.cts

@@ -39,6 +39,7 @@ type SigilLogEventEmitter = EventEmitter<{
 type SigilRuntimeAppProps<TAppApi, TExtraAppProps extends object> = TExtraAppProps & {
     title: string;
     version: string;
+    edition: 'desktop' | 'cli';
     toolkit: Toolkit;
     logger: Logger;
     logEventEmitter: SigilLogEventEmitter;
@@ -58,6 +59,7 @@ type SigilRuntimeOptions<TAppApi, TExtraAppProps extends object> = {
     logger: pino.Logger;
     title: string;
     version: string;
+    edition: 'desktop' | 'cli';
     appProps: TExtraAppProps;
     toolkitOptions?: Omit<Partial<ToolkitOptions>, 'logger'>;
     createApp: (props: SigilRuntimeAppProps<TAppApi, TExtraAppProps>) => JSX.Element;
@@ -67,7 +69,7 @@ declare const createSystemInformation: ({ dataDirectory, version, }: {
     dataDirectory: string;
     version: string;
 }) => SystemInformation;
-declare const runSigilApp: <TAppApi, TExtraAppProps extends object>({ logger: upstreamLogger, title, version, appProps, toolkitOptions, createApp, componentNamespaces, }: SigilRuntimeOptions<TAppApi, TExtraAppProps>) => SigilAppInstance<TAppApi>;
+declare const runSigilApp: <TAppApi, TExtraAppProps extends object>({ logger: upstreamLogger, title, version, edition, appProps, toolkitOptions, createApp, componentNamespaces, }: SigilRuntimeOptions<TAppApi, TExtraAppProps>) => SigilAppInstance<TAppApi>;
 
 type AppShellProps = {
     title: string;

package/dist/index.d.ts

@@ -39,6 +39,7 @@ type SigilLogEventEmitter = EventEmitter<{
 type SigilRuntimeAppProps<TAppApi, TExtraAppProps extends object> = TExtraAppProps & {
     title: string;
     version: string;
+    edition: 'desktop' | 'cli';
     toolkit: Toolkit;
     logger: Logger;
     logEventEmitter: SigilLogEventEmitter;
@@ -58,6 +59,7 @@ type SigilRuntimeOptions<TAppApi, TExtraAppProps extends object> = {
     logger: pino.Logger;
     title: string;
     version: string;
+    edition: 'desktop' | 'cli';
     appProps: TExtraAppProps;
     toolkitOptions?: Omit<Partial<ToolkitOptions>, 'logger'>;
     createApp: (props: SigilRuntimeAppProps<TAppApi, TExtraAppProps>) => JSX.Element;
@@ -67,7 +69,7 @@ declare const createSystemInformation: ({ dataDirectory, version, }: {
     dataDirectory: string;
     version: string;
 }) => SystemInformation;
-declare const runSigilApp: <TAppApi, TExtraAppProps extends object>({ logger: upstreamLogger, title, version, appProps, toolkitOptions, createApp, componentNamespaces, }: SigilRuntimeOptions<TAppApi, TExtraAppProps>) => SigilAppInstance<TAppApi>;
+declare const runSigilApp: <TAppApi, TExtraAppProps extends object>({ logger: upstreamLogger, title, version, edition, appProps, toolkitOptions, createApp, componentNamespaces, }: SigilRuntimeOptions<TAppApi, TExtraAppProps>) => SigilAppInstance<TAppApi>;
 
 type AppShellProps = {
     title: string;

package/dist/index.js

@@ -139,6 +139,7 @@ var runSigilApp = ({
   logger: upstreamLogger,
   title,
   version,
+  edition,
   appProps,
   toolkitOptions,
   createApp,
@@ -233,6 +234,7 @@ var runSigilApp = ({
     createApp({
       title,
       version,
+      edition,
       toolkit,
       logger,
       logEventEmitter,

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@arcanewizards/sigil",
   "description": "Application framework for A/V applications, built on-top of arcanejs",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
+  "license": "MIT",
   "type": "module",
   "repository": {
     "type": "git",
@@ -64,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",
@@ -101,7 +108,7 @@
     "radix-ui": "^1.4.3",
     "react": "^19.2.0",
     "zod": "^3.22.4",
-    "@arcanewizards/net-utils": "^0.1.2"
+    "@arcanewizards/net-utils": "^0.1.3"
   },
   "devDependencies": {
     "@tailwindcss/cli": "^4.1.13",
@@ -114,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",