@arcanewizards/sigil 0.1.4 → 0.1.6

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

@@ -88,7 +88,8 @@ var clsControlButton = ({
   touching,
   position,
   className,
-  primary
+  primary,
+  destructive
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -101,6 +102,7 @@ var clsControlButton = ({
   cnd(active, `sigil-control-button-active`),
   cnd(touching && active, `sigil-control-button-active-touching`),
   cnd(primary, `sigil-control-button-primary`),
+  cnd(destructive, `sigil-control-button-destructive`),
   clsControlPosition(position),
   className
 );
@@ -118,6 +120,7 @@ var ControlButtonFrame = forwardRef(
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ jsx(
@@ -133,6 +136,7 @@ var ControlButtonFrame = forwardRef(
           touching,
           position,
           primary,
+          destructive,
           className
         }),
         children: /* @__PURE__ */ jsxs("span", { children: [
@@ -247,7 +251,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = forwardRef2(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ jsx2(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -301,10 +305,17 @@ import { forwardRef as forwardRef3 } from "react";
 import { cn as cn3 } from "@arcanejs/toolkit-frontend/util";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var ControlDialogButtons = forwardRef3(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx3(
-  ControlButtonGroup,
+  "div",
   {
     ref,
-    className: cn3("control-grid-pos-row", className),
+    className: cn3(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition("row"),
+      className
+    ),
     ...props,
     children
   }
@@ -507,19 +518,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 +528,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 +588,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +600,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 +793,6 @@ export {
   ControlInput,
   ControlPercent,
   ControlSelect,
+  ControlColoredSelect,
   ControlColorSelect
 };

package/dist/{chunk-CHVABPET.cjs → chunk-TVAGNQHJ.cjs}

@@ -88,7 +88,8 @@ var clsControlButton = ({
   touching,
   position,
   className,
-  primary
+  primary,
+  destructive
 }) => _util.cn.call(void 0, 
   `sigil-control-button`,
   _chunkTZJ4UXR3cjs.cnd.call(void 0, variant === "border", `sigil-control-button-variant-border`),
@@ -101,6 +102,7 @@ var clsControlButton = ({
   _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`),
+  _chunkTZJ4UXR3cjs.cnd.call(void 0, destructive, `sigil-control-button-destructive`),
   clsControlPosition(position),
   className
 );
@@ -118,6 +120,7 @@ var ControlButtonFrame = _react.forwardRef.call(void 0,
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -133,6 +136,7 @@ var ControlButtonFrame = _react.forwardRef.call(void 0,
           touching,
           position,
           primary,
+          destructive,
           className
         }),
         children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
@@ -247,7 +251,7 @@ 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,
@@ -301,10 +305,17 @@ InputSpanningTitle.displayName = "InputSpanningTitle";
 
 
 var ControlDialogButtons = _react.forwardRef.call(void 0, ({ children, className, ...props }, ref) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-  ControlButtonGroup,
+  "div",
   {
     ref,
-    className: _util.cn.call(void 0, "control-grid-pos-row", className),
+    className: _util.cn.call(void 0, 
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition("row"),
+      className
+    ),
     ...props,
     children
   }
@@ -507,19 +518,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 +528,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = _chunkTZJ4UXR3cjs.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 +543,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 +570,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 +588,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -599,6 +600,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
 
@@ -653,7 +679,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();
@@ -768,4 +794,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/frontend/appearance.cjs

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkCHVABPETcjs = require('../chunk-CHVABPET.cjs');
+var _chunkTVAGNQHJcjs = require('../chunk-TVAGNQHJ.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
 require('../chunk-TZJ4UXR3.cjs');
@@ -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, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunkTVAGNQHJcjs.ControlButton,
       {
         onClick: selectDarkMode,
         active: colorSchemePreference === "dark",
@@ -48,7 +48,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunkTVAGNQHJcjs.ControlButton,
       {
         onClick: selectLightMode,
         active: colorSchemePreference === "light",
@@ -61,7 +61,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
-      _chunkCHVABPETcjs.ControlButton,
+      _chunkTVAGNQHJcjs.ControlButton,
       {
         onClick: selectSystemMode,
         active: colorSchemePreference === "auto",
@@ -74,7 +74,7 @@ var AppearanceSwitcher = ({
       }
     ),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      _chunkCHVABPETcjs.ControlColorSelect,
+      _chunkTVAGNQHJcjs.ControlColorSelect,
       {
         color,
         onChange: updateHintColor,

package/dist/frontend/appearance.js

@@ -1,7 +1,7 @@
 import {
   ControlButton,
   ControlColorSelect
-} from "../chunk-E3VUC3Q4.js";
+} from "../chunk-LDUYBGRY.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
 import "../chunk-WYUGJOEB.js";

package/dist/frontend/controls/index.cjs

@@ -20,7 +20,8 @@
 
 
 
-var _chunkCHVABPETcjs = require('../../chunk-CHVABPET.cjs');
+
+var _chunkTVAGNQHJcjs = require('../../chunk-TVAGNQHJ.cjs');
 require('../../chunk-PEARNJ5G.cjs');
 require('../../chunk-RI33QVOD.cjs');
 require('../../chunk-TZJ4UXR3.cjs');
@@ -46,4 +47,5 @@ require('../../chunk-TZJ4UXR3.cjs');
 
 
 
-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;
+
+exports.CheckboxControlButton = _chunkTVAGNQHJcjs.CheckboxControlButton; exports.ControlButton = _chunkTVAGNQHJcjs.ControlButton; exports.ControlButtonGroup = _chunkTVAGNQHJcjs.ControlButtonGroup; exports.ControlColorSelect = _chunkTVAGNQHJcjs.ControlColorSelect; exports.ControlColoredSelect = _chunkTVAGNQHJcjs.ControlColoredSelect; exports.ControlDetails = _chunkTVAGNQHJcjs.ControlDetails; exports.ControlDialog = _chunkTVAGNQHJcjs.ControlDialog; exports.ControlDialogButtons = _chunkTVAGNQHJcjs.ControlDialogButtons; exports.ControlInput = _chunkTVAGNQHJcjs.ControlInput; exports.ControlLabel = _chunkTVAGNQHJcjs.ControlLabel; exports.ControlParagraph = _chunkTVAGNQHJcjs.ControlParagraph; exports.ControlPercent = _chunkTVAGNQHJcjs.ControlPercent; exports.ControlSelect = _chunkTVAGNQHJcjs.ControlSelect; exports.InputSpanningTitle = _chunkTVAGNQHJcjs.InputSpanningTitle; exports.InputWithDelayedPropagation = _chunkTVAGNQHJcjs.InputWithDelayedPropagation; exports.LongPressableControlButton = _chunkTVAGNQHJcjs.LongPressableControlButton; exports.clsControlButton = _chunkTVAGNQHJcjs.clsControlButton; exports.clsControlPosition = _chunkTVAGNQHJcjs.clsControlPosition; exports.clsControlSubgridPosition = _chunkTVAGNQHJcjs.clsControlSubgridPosition; exports.controlButtonColorVariable = _chunkTVAGNQHJcjs.controlButtonColorVariable; exports.controlButtonColorVariables = _chunkTVAGNQHJcjs.controlButtonColorVariables; exports.controlPositionClass = _chunkTVAGNQHJcjs.controlPositionClass;

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

@@ -34,6 +34,7 @@ type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' |
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
     primary?: boolean;
+    destructive?: boolean;
 } & ({
     children: ReactNode;
     icon?: string;
@@ -51,8 +52,9 @@ type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'childre
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
     primary?: boolean;
+    destructive?: boolean;
 };
-declare const clsControlButton: ({ variant, active, touching, position, className, primary, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary">) => string;
+declare const clsControlButton: ({ variant, active, touching, position, className, primary, destructive, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary" | "destructive">) => string;
 declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
 type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
     label?: string;
@@ -86,18 +88,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 +148,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 +162,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

@@ -34,6 +34,7 @@ type ControlButtonProps = Omit<ComponentPropsWithoutRef<'button'>, 'children' |
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
     primary?: boolean;
+    destructive?: boolean;
 } & ({
     children: ReactNode;
     icon?: string;
@@ -51,8 +52,9 @@ type ControlButtonFrameProps = Omit<ComponentPropsWithoutRef<'button'>, 'childre
     tooltipSide?: TooltipProps['side'];
     position?: ControlPosition;
     primary?: boolean;
+    destructive?: boolean;
 };
-declare const clsControlButton: ({ variant, active, touching, position, className, primary, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary">) => string;
+declare const clsControlButton: ({ variant, active, touching, position, className, primary, destructive, }: Pick<ControlButtonFrameProps, "variant" | "active" | "touching" | "position" | "className" | "primary" | "destructive">) => string;
 declare const ControlButton: react.ForwardRefExoticComponent<ControlButtonProps & react.RefAttributes<HTMLButtonElement>>;
 type CheckboxControlButtonProps = Omit<ControlButtonProps, 'children' | 'icon'> & {
     label?: string;
@@ -86,18 +88,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 +148,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 +162,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,7 +21,7 @@ import {
   controlButtonColorVariable,
   controlButtonColorVariables,
   controlPositionClass
-} from "../../chunk-E3VUC3Q4.js";
+} from "../../chunk-LDUYBGRY.js";
 import "../../chunk-BIY5HAXP.js";
 import "../../chunk-4PMRDURG.js";
 import "../../chunk-WYUGJOEB.js";
@@ -29,6 +30,7 @@ export {
   ControlButton,
   ControlButtonGroup,
   ControlColorSelect,
+  ControlColoredSelect,
   ControlDetails,
   ControlDialog,
   ControlDialogButtons,

package/dist/frontend/dialogs.cjs

@@ -4,7 +4,7 @@
 
 
 
-var _chunkCHVABPETcjs = require('../chunk-CHVABPET.cjs');
+var _chunkTVAGNQHJcjs = require('../chunk-TVAGNQHJ.cjs');
 require('../chunk-PEARNJ5G.cjs');
 require('../chunk-RI33QVOD.cjs');
 require('../chunk-TZJ4UXR3.cjs');
@@ -14,4 +14,4 @@ require('../chunk-TZJ4UXR3.cjs');
 
 
 
-exports.Dialog = _chunkCHVABPETcjs.Dialog; exports.DialogButtons = _chunkCHVABPETcjs.DialogButtons; exports.DialogContext = _chunkCHVABPETcjs.DialogContext; exports.DialogProvider = _chunkCHVABPETcjs.DialogProvider; exports.DialogTitle = _chunkCHVABPETcjs.DialogTitle;
+exports.Dialog = _chunkTVAGNQHJcjs.Dialog; exports.DialogButtons = _chunkTVAGNQHJcjs.DialogButtons; exports.DialogContext = _chunkTVAGNQHJcjs.DialogContext; exports.DialogProvider = _chunkTVAGNQHJcjs.DialogProvider; exports.DialogTitle = _chunkTVAGNQHJcjs.DialogTitle;

package/dist/frontend/dialogs.js

@@ -4,7 +4,7 @@ import {
   DialogContext,
   DialogProvider,
   DialogTitle
-} from "../chunk-E3VUC3Q4.js";
+} from "../chunk-LDUYBGRY.js";
 import "../chunk-BIY5HAXP.js";
 import "../chunk-4PMRDURG.js";
 import "../chunk-WYUGJOEB.js";

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-destructive {
+  --sigil-control-button-bg: var(--sigil-usage-red-background);
+  --sigil-control-button-bg-hover: var(--sigil-usage-red-border);
+  --sigil-control-button-bg-active: var(--sigil-usage-red-border);
+  --sigil-control-button-fg: var(--sigil-usage-red-text);
+  --sigil-control-button-fg-hover: var(--sigil-usage-red-text);
+  --sigil-control-button-fg-active: var(--sigil-usage-red-text);
+  --sigil-control-button-border: transparent;
+  --sigil-control-button-border-hover: transparent;
+  --sigil-control-button-border-active: transparent;
+}
 .sigil-control-button-primary {
   --sigil-control-button-bg: var(--sigil-usage-hint-background);
   --sigil-control-button-bg-hover: var(--sigil-usage-hint-border);

package/dist/frontend.cjs

@@ -16,7 +16,7 @@ var _chunkCAYKPJIXcjs = require('./chunk-CAYKPJIX.cjs');
 var _chunkVZ4A6RRTcjs = require('./chunk-VZ4A6RRT.cjs');
 
 
-var _chunkCHVABPETcjs = require('./chunk-CHVABPET.cjs');
+var _chunkTVAGNQHJcjs = require('./chunk-TVAGNQHJ.cjs');
 require('./chunk-PEARNJ5G.cjs');
 require('./chunk-RI33QVOD.cjs');
 
@@ -106,6 +106,7 @@ var createBrowserMediaSession = () => {
 var _jsxruntime = require('react/jsx-runtime');
 var createDefaultBrowserContext = (browser) => {
   const defaults = {
+    appListenerChangesHandledExternally: false,
     openExternalLink: (url) => {
       window.open(url, "_blank", "noopener,noreferrer");
     },
@@ -242,7 +243,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, 
-        _chunkCHVABPETcjs.ControlButton,
+        _chunkTVAGNQHJcjs.ControlButton,
         {
           onClick: openDevTools,
           variant: "toolbar",
@@ -251,7 +252,7 @@ var Debugger = ({ title, className }) => {
         }
       ),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-        _chunkCHVABPETcjs.ControlButton,
+        _chunkTVAGNQHJcjs.ControlButton,
         {
           onClick: handleRequestScrollToBottom,
           variant: "toolbar",
@@ -259,7 +260,7 @@ var Debugger = ({ title, className }) => {
           children: "Scroll to Bottom"
         }
       ),
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCHVABPETcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkTVAGNQHJcjs.ControlButton, { onClick: exportLogs, variant: "toolbar", icon: "publish", children: "Export Logs" })
     ] }) }),
     /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "pre",

package/dist/frontend.d.cts

@@ -51,6 +51,7 @@ type NewWindowOptions = {
     mode?: string;
 };
 type BaseBrowserContext = {
+    appListenerChangesHandledExternally?: boolean;
     openExternalLink: (url: string) => void;
     openNewWidow: (url: string, options?: NewWindowOptions) => void;
     selectDirectory: (() => Promise<string | null>) | null;

package/dist/frontend.d.ts

@@ -51,6 +51,7 @@ type NewWindowOptions = {
     mode?: string;
 };
 type BaseBrowserContext = {
+    appListenerChangesHandledExternally?: boolean;
     openExternalLink: (url: string) => void;
     openNewWidow: (url: string, options?: NewWindowOptions) => void;
     selectDirectory: (() => Promise<string | null>) | null;

package/dist/frontend.js

@@ -16,7 +16,7 @@ import {
 } from "./chunk-EJNNLQ2S.js";
 import {
   ControlButton
-} from "./chunk-E3VUC3Q4.js";
+} from "./chunk-LDUYBGRY.js";
 import "./chunk-BIY5HAXP.js";
 import "./chunk-4PMRDURG.js";
 import {
@@ -106,6 +106,7 @@ var createBrowserMediaSession = () => {
 import { jsx } from "react/jsx-runtime";
 var createDefaultBrowserContext = (browser) => {
   const defaults = {
+    appListenerChangesHandledExternally: false,
     openExternalLink: (url) => {
       window.open(url, "_blank", "noopener,noreferrer");
     },

package/dist/index.cjs

@@ -103,6 +103,7 @@ var _data = require('@arcanejs/react-toolkit/data');
 
 var _toolkit = require('@arcanejs/toolkit');
 var _events = require('events');
+var _escapehtml = require('escape-html'); var _escapehtml2 = _interopRequireDefault(_escapehtml);
 var MAX_LOG_ENTRIES = 1e3;
 var getStackFramesFromError = (error) => {
   if (typeof error === "string") {
@@ -190,6 +191,26 @@ var runSigilApp = ({
       debug: upstreamLogger.debug.bind(upstreamLogger)
     },
     title,
+    htmlPage: (context) => `
+          <html>
+            <head>
+              <title>${_escapehtml2.default.call(void 0, context.title)}</title>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, user-scalable=no" />
+              <style type="text/css">
+                @font-face {
+                  font-family: 'Material Symbols Outlined';
+                  font-style: normal;
+                  src: url(${context.coreAssets.materialSymbolsOutlined}) format('woff');
+                }
+              </style>
+              ${context.coreAssets.entrypointCss ? `<link rel="stylesheet" href="${context.coreAssets.entrypointCss}" />` : ""}
+            </head>
+            <body>
+              <div id="root"></div>
+              <script type="text/javascript" src="${context.coreAssets.entrypointJs}"></script>
+            </body>
+          </html>`,
     ...toolkitOptions
   });
   toolkit.start({
@@ -395,7 +416,8 @@ var AppListenerManager = ({
             const resolvedConnectionDetails = {
               config,
               host,
-              port
+              port,
+              internal: !!config.interface && !!_optionalChain([interfaces, 'access', _9 => _9[config.interface], 'optionalAccess', _10 => _10.internal])
             };
             try {
               const listener = await toolkit.listen({
@@ -410,7 +432,7 @@ var AppListenerManager = ({
                   listener,
                   ...resolvedConnectionDetails
                 };
-                _optionalChain([appRegistration, 'optionalAccess', _9 => _9.setConnection, 'call', _10 => _10(key, {
+                _optionalChain([appRegistration, 'optionalAccess', _11 => _11.setConnection, 'call', _12 => _12(key, {
                   ...basePortInformation,
                   port,
                   status: "active"
@@ -433,7 +455,7 @@ var AppListenerManager = ({
                   config,
                   error: `${error}`
                 };
-                _optionalChain([appRegistration, 'optionalAccess', _11 => _11.setConnection, 'call', _12 => _12(key, {
+                _optionalChain([appRegistration, 'optionalAccess', _13 => _13.setConnection, 'call', _14 => _14(key, {
                   ...basePortInformation,
                   status: "error",
                   errors: [error.message]
@@ -466,11 +488,21 @@ var AppListenerManager = ({
   }, [appRegistration, listenerConfig, logger, toolkit, updateReactState]);
   _react.useEffect.call(void 0, () => {
     for (const state of Object.values(listenerState)) {
+      let preferredConnection = null;
       if (state.state === "connected") {
+        if (!preferredConnection) {
+          preferredConnection = state;
+        }
+        if (!preferredConnection.internal && state.internal) {
+          preferredConnection = state;
+        }
+      }
+      if (preferredConnection) {
         setWindowUrl(
-          new URL(`http://${_nullishCoalesce(state.host, () => ( "localhost"))}:${state.port}/`)
+          new URL(
+            `http://${_nullishCoalesce(preferredConnection.host, () => ( "localhost"))}:${preferredConnection.port}/`
+          )
         );
-        return;
       }
     }
   });

package/dist/index.d.cts

@@ -13,7 +13,10 @@ import { IDMap } from '@arcanejs/toolkit/util';
 import { g as SigilNamespace, S as SigilAppRootComponent, a as AppRootGetLogsArgs, b as AppRootGetLogsReturn, e as SigilComponentCalls } from './proto-B-WcMUOE.cjs';
 export { A as AppRootGetLogs, c as SIGIL_NAMESPACE, d as SigilComponent, h as SigilComponentMessage, i as isSigilComponent, f as isSigilComponentCall } from './proto-B-WcMUOE.cjs';
 import { NetworkPortStatus } from '@arcanewizards/net-utils';
+import { AllListenerConfig } from './shared/config.cjs';
+export { ListenerConfig } from './shared/config.cjs';
 import '@arcanejs/diff';
+import 'zod';
 
 type AppInformationContextData = {
     version: string;
@@ -113,14 +116,6 @@ declare const SIGIL_COMPONENTS: {
     } & react.RefAttributes<AppRoot>>;
 };
 
-type ListenerConfig = {
-    port: number | {
-        from: number;
-        to: number;
-    };
-    interface?: string | undefined;
-};
-type AllListenerConfig = Record<string, ListenerConfig>;
 type AppListenerManagerAppRegistration = {
     removeConnection: (uuid: string) => void;
     setConnection: (uuid: string, details: NetworkPortStatus) => void;
@@ -133,4 +128,4 @@ type AppListenerManagerProps = {
 };
 declare const AppListenerManager: FC<AppListenerManagerProps>;
 
-export { type AllListenerConfig, AppInformationContext, type AppInformationContextData, AppListenerManager, type AppListenerManagerAppRegistration, AppRoot, AppRootGetLogsArgs, AppRootGetLogsReturn, AppRootLogEntry, AppShell, type AppShellProps, type ListenerConfig, LoggerContext, SIGIL_COMPONENTS, ShutdownContext, type ShutdownContextData, type SigilAppInstance, SigilAppRootComponent, SigilComponentCalls, type SigilRuntimeAppProps, type SigilRuntimeEventMap, type SigilRuntimeOptions, SystemInformation, createSystemInformation, runSigilApp, useLogger, useShutdownHandler };
+export { AllListenerConfig, AppInformationContext, type AppInformationContextData, AppListenerManager, type AppListenerManagerAppRegistration, AppRoot, AppRootGetLogsArgs, AppRootGetLogsReturn, AppRootLogEntry, AppShell, type AppShellProps, LoggerContext, SIGIL_COMPONENTS, ShutdownContext, type ShutdownContextData, type SigilAppInstance, SigilAppRootComponent, SigilComponentCalls, type SigilRuntimeAppProps, type SigilRuntimeEventMap, type SigilRuntimeOptions, SystemInformation, createSystemInformation, runSigilApp, useLogger, useShutdownHandler };

package/dist/index.d.ts

@@ -13,7 +13,10 @@ import { IDMap } from '@arcanejs/toolkit/util';
 import { g as SigilNamespace, S as SigilAppRootComponent, a as AppRootGetLogsArgs, b as AppRootGetLogsReturn, e as SigilComponentCalls } from './proto-kGDF-yWB.js';
 export { A as AppRootGetLogs, c as SIGIL_NAMESPACE, d as SigilComponent, h as SigilComponentMessage, i as isSigilComponent, f as isSigilComponentCall } from './proto-kGDF-yWB.js';
 import { NetworkPortStatus } from '@arcanewizards/net-utils';
+import { AllListenerConfig } from './shared/config.js';
+export { ListenerConfig } from './shared/config.js';
 import '@arcanejs/diff';
+import 'zod';
 
 type AppInformationContextData = {
     version: string;
@@ -113,14 +116,6 @@ declare const SIGIL_COMPONENTS: {
     } & react.RefAttributes<AppRoot>>;
 };
 
-type ListenerConfig = {
-    port: number | {
-        from: number;
-        to: number;
-    };
-    interface?: string | undefined;
-};
-type AllListenerConfig = Record<string, ListenerConfig>;
 type AppListenerManagerAppRegistration = {
     removeConnection: (uuid: string) => void;
     setConnection: (uuid: string, details: NetworkPortStatus) => void;
@@ -133,4 +128,4 @@ type AppListenerManagerProps = {
 };
 declare const AppListenerManager: FC<AppListenerManagerProps>;
 
-export { type AllListenerConfig, AppInformationContext, type AppInformationContextData, AppListenerManager, type AppListenerManagerAppRegistration, AppRoot, AppRootGetLogsArgs, AppRootGetLogsReturn, AppRootLogEntry, AppShell, type AppShellProps, type ListenerConfig, LoggerContext, SIGIL_COMPONENTS, ShutdownContext, type ShutdownContextData, type SigilAppInstance, SigilAppRootComponent, SigilComponentCalls, type SigilRuntimeAppProps, type SigilRuntimeEventMap, type SigilRuntimeOptions, SystemInformation, createSystemInformation, runSigilApp, useLogger, useShutdownHandler };
+export { AllListenerConfig, AppInformationContext, type AppInformationContextData, AppListenerManager, type AppListenerManagerAppRegistration, AppRoot, AppRootGetLogsArgs, AppRootGetLogsReturn, AppRootLogEntry, AppShell, type AppShellProps, LoggerContext, SIGIL_COMPONENTS, ShutdownContext, type ShutdownContextData, type SigilAppInstance, SigilAppRootComponent, SigilComponentCalls, type SigilRuntimeAppProps, type SigilRuntimeEventMap, type SigilRuntimeOptions, SystemInformation, createSystemInformation, runSigilApp, useLogger, useShutdownHandler };

package/dist/index.js

@@ -103,6 +103,7 @@ import { ArcaneDataFileError } from "@arcanejs/react-toolkit/data";
 import { CoreComponents, ToolkitRenderer } from "@arcanejs/react-toolkit";
 import { Toolkit } from "@arcanejs/toolkit";
 import { EventEmitter as EventEmitter2 } from "events";
+import escapeHTML from "escape-html";
 var MAX_LOG_ENTRIES = 1e3;
 var getStackFramesFromError = (error) => {
   if (typeof error === "string") {
@@ -190,6 +191,26 @@ var runSigilApp = ({
       debug: upstreamLogger.debug.bind(upstreamLogger)
     },
     title,
+    htmlPage: (context) => `
+          <html>
+            <head>
+              <title>${escapeHTML(context.title)}</title>
+              <meta charset="utf-8">
+              <meta name="viewport" content="width=device-width, user-scalable=no" />
+              <style type="text/css">
+                @font-face {
+                  font-family: 'Material Symbols Outlined';
+                  font-style: normal;
+                  src: url(${context.coreAssets.materialSymbolsOutlined}) format('woff');
+                }
+              </style>
+              ${context.coreAssets.entrypointCss ? `<link rel="stylesheet" href="${context.coreAssets.entrypointCss}" />` : ""}
+            </head>
+            <body>
+              <div id="root"></div>
+              <script type="text/javascript" src="${context.coreAssets.entrypointJs}"></script>
+            </body>
+          </html>`,
     ...toolkitOptions
   });
   toolkit.start({
@@ -395,7 +416,8 @@ var AppListenerManager = ({
             const resolvedConnectionDetails = {
               config,
               host,
-              port
+              port,
+              internal: !!config.interface && !!interfaces[config.interface]?.internal
             };
             try {
               const listener = await toolkit.listen({
@@ -466,11 +488,21 @@ var AppListenerManager = ({
   }, [appRegistration, listenerConfig, logger, toolkit, updateReactState]);
   useEffect3(() => {
     for (const state of Object.values(listenerState)) {
+      let preferredConnection = null;
       if (state.state === "connected") {
+        if (!preferredConnection) {
+          preferredConnection = state;
+        }
+        if (!preferredConnection.internal && state.internal) {
+          preferredConnection = state;
+        }
+      }
+      if (preferredConnection) {
         setWindowUrl(
-          new URL(`http://${state.host ?? "localhost"}:${state.port}/`)
+          new URL(
+            `http://${preferredConnection.host ?? "localhost"}:${preferredConnection.port}/`
+          )
         );
-        return;
       }
     }
   });

package/dist/shared/config.cjs

@@ -0,0 +1,29 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }// src/shared/config.ts
+var _zod = require('zod'); var _zod2 = _interopRequireDefault(_zod);
+var APP_LISTENER_CONFIG = _zod2.default.object({
+  port: _zod2.default.union([
+    _zod2.default.number().int().min(1).max(65535),
+    _zod2.default.object({
+      from: _zod2.default.number().int().min(1).max(65535),
+      to: _zod2.default.number().int().min(1).max(65535)
+    }).refine((data) => data.to >= data.from, {
+      message: '"to" must be greater than or equal to "from"'
+    })
+  ]),
+  interface: _zod2.default.string().optional()
+});
+var ALL_APP_LISTENER_CONFIG = _zod2.default.record(
+  _zod2.default.string(),
+  APP_LISTENER_CONFIG
+);
+var portString = (port) => {
+  if (typeof port === "number") {
+    return port.toString();
+  }
+  return `${port.from}-${port.to}`;
+};
+
+
+
+
+exports.ALL_APP_LISTENER_CONFIG = ALL_APP_LISTENER_CONFIG; exports.APP_LISTENER_CONFIG = APP_LISTENER_CONFIG; exports.portString = portString;

package/dist/shared/config.d.cts

@@ -0,0 +1,69 @@
+import z from 'zod';
+
+declare const APP_LISTENER_CONFIG: z.ZodObject<{
+    port: z.ZodUnion<[z.ZodNumber, z.ZodEffects<z.ZodObject<{
+        from: z.ZodNumber;
+        to: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>]>;
+    interface: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}>;
+type ListenerConfig = z.infer<typeof APP_LISTENER_CONFIG>;
+declare const ALL_APP_LISTENER_CONFIG: z.ZodRecord<z.ZodString, z.ZodObject<{
+    port: z.ZodUnion<[z.ZodNumber, z.ZodEffects<z.ZodObject<{
+        from: z.ZodNumber;
+        to: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>]>;
+    interface: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}>>;
+type AllListenerConfig = z.infer<typeof ALL_APP_LISTENER_CONFIG>;
+declare const portString: (port: ListenerConfig["port"]) => string;
+
+export { ALL_APP_LISTENER_CONFIG, APP_LISTENER_CONFIG, type AllListenerConfig, type ListenerConfig, portString };

package/dist/shared/config.d.ts

@@ -0,0 +1,69 @@
+import z from 'zod';
+
+declare const APP_LISTENER_CONFIG: z.ZodObject<{
+    port: z.ZodUnion<[z.ZodNumber, z.ZodEffects<z.ZodObject<{
+        from: z.ZodNumber;
+        to: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>]>;
+    interface: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}>;
+type ListenerConfig = z.infer<typeof APP_LISTENER_CONFIG>;
+declare const ALL_APP_LISTENER_CONFIG: z.ZodRecord<z.ZodString, z.ZodObject<{
+    port: z.ZodUnion<[z.ZodNumber, z.ZodEffects<z.ZodObject<{
+        from: z.ZodNumber;
+        to: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>, {
+        from: number;
+        to: number;
+    }, {
+        from: number;
+        to: number;
+    }>]>;
+    interface: z.ZodOptional<z.ZodString>;
+}, "strip", z.ZodTypeAny, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}, {
+    port: number | {
+        from: number;
+        to: number;
+    };
+    interface?: string | undefined;
+}>>;
+type AllListenerConfig = z.infer<typeof ALL_APP_LISTENER_CONFIG>;
+declare const portString: (port: ListenerConfig["port"]) => string;
+
+export { ALL_APP_LISTENER_CONFIG, APP_LISTENER_CONFIG, type AllListenerConfig, type ListenerConfig, portString };

package/dist/shared/config.js

@@ -0,0 +1,29 @@
+// src/shared/config.ts
+import z from "zod";
+var APP_LISTENER_CONFIG = z.object({
+  port: z.union([
+    z.number().int().min(1).max(65535),
+    z.object({
+      from: z.number().int().min(1).max(65535),
+      to: z.number().int().min(1).max(65535)
+    }).refine((data) => data.to >= data.from, {
+      message: '"to" must be greater than or equal to "from"'
+    })
+  ]),
+  interface: z.string().optional()
+});
+var ALL_APP_LISTENER_CONFIG = z.record(
+  z.string(),
+  APP_LISTENER_CONFIG
+);
+var portString = (port) => {
+  if (typeof port === "number") {
+    return port.toString();
+  }
+  return `${port.from}-${port.to}`;
+};
+export {
+  ALL_APP_LISTENER_CONFIG,
+  APP_LISTENER_CONFIG,
+  portString
+};

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.4",
+  "version": "0.1.6",
   "private": false,
   "license": "MIT",
   "type": "module",
@@ -92,6 +92,12 @@
     "./frontend/styles/base.css": {
       "default": "./dist/frontend/styles/base.css"
     },
+    "./shared/config": {
+      "@arcanewizards/source": "./src/shared/config.ts",
+      "types": "./dist/shared/config.d.ts",
+      "import": "./dist/shared/config.js",
+      "require": "./dist/shared/config.cjs"
+    },
     "./package.json": "./package.json"
   },
   "files": [
@@ -103,6 +109,8 @@
     "@arcanejs/react-toolkit": "^0.15.1",
     "@arcanejs/toolkit": "^8.0.0",
     "@arcanejs/toolkit-frontend": "^0.11.0",
+    "@types/escape-html": "^1.0.4",
+    "escape-html": "^1.0.3",
     "lodash": "^4.17.21",
     "pino": "^9.5.0",
     "radix-ui": "^1.4.3",
@@ -121,8 +129,8 @@
     "tailwindcss": "^4.1.13",
     "tsup": "^8.1.0",
     "typescript": "^5.7.3",
-    "@arcanewizards/typescript-config": "^0.0.0",
-    "@arcanewizards/eslint-config": "^0.0.0"
+    "@arcanewizards/eslint-config": "^0.0.0",
+    "@arcanewizards/typescript-config": "^0.0.0"
   },
   "scripts": {
     "build": "rm -rf dist && tsup && pnpm build:styles && check-export-map",