@arcanewizards/timecode-toolbox 0.1.2 → 0.1.4

package/dist/components/frontend/index.mjs

@@ -13970,7 +13970,7 @@ function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+// ../../packages/sigil/dist/chunk-LDUYBGRY.js
 import {
   createContext as createContext6,
   forwardRef as forwardRef42,
@@ -14014,7 +14014,7 @@ var TRANSPARENCY_SVG = `
 `;
 var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+// ../../packages/sigil/dist/chunk-LDUYBGRY.js
 import {
   forwardRef as forwardRef15
 } from "react";
@@ -14087,7 +14087,8 @@ var clsControlButton = ({
   touching,
   position,
   className,
-  primary
+  primary,
+  destructive
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14100,6 +14101,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
 );
@@ -14117,6 +14119,7 @@ var ControlButtonFrame = forwardRef15(
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ jsx17(
@@ -14132,6 +14135,7 @@ var ControlButtonFrame = forwardRef15(
           touching,
           position,
           primary,
+          destructive,
           className
         }),
         children: /* @__PURE__ */ jsxs4("span", { children: [
@@ -14241,7 +14245,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = forwardRef22(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ jsx23(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -14290,10 +14294,17 @@ var InputSpanningTitle = forwardRef22(({ className, position = "row", ...props }
 ));
 InputSpanningTitle.displayName = "InputSpanningTitle";
 var ControlDialogButtons = forwardRef32(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx32(
-  ControlButtonGroup,
+  "div",
   {
     ref,
-    className: cn("control-grid-pos-row", className),
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition("row"),
+      className
+    ),
     ...props,
     children
   }
@@ -14476,19 +14487,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,
@@ -14496,13 +14497,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__ */ jsx52(
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ jsx52(
         dist_exports2.Trigger,
@@ -14556,7 +14557,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -14568,6 +14569,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__ */ jsx52(
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
 var DialogContext = createContext6({
   createDialog: () => {
@@ -15603,6 +15629,7 @@ var createBrowserMediaSession = () => {
 };
 var createDefaultBrowserContext = (browser) => {
   const defaults = {
+    appListenerChangesHandledExternally: false,
     openExternalLink: (url) => {
       window.open(url, "_blank", "noopener,noreferrer");
     },
@@ -15824,6 +15851,30 @@ var startSigilFrontend = ({
   return resolvedBrowser;
 };
 
+// ../../packages/sigil/dist/shared/config.js
+var APP_LISTENER_CONFIG = zod_default.object({
+  port: zod_default.union([
+    zod_default.number().int().min(1).max(65535),
+    zod_default.object({
+      from: zod_default.number().int().min(1).max(65535),
+      to: zod_default.number().int().min(1).max(65535)
+    }).refine((data) => data.to >= data.from, {
+      message: '"to" must be greater than or equal to "from"'
+    })
+  ]),
+  interface: zod_default.string().optional()
+});
+var ALL_APP_LISTENER_CONFIG = zod_default.record(
+  zod_default.string(),
+  APP_LISTENER_CONFIG
+);
+var portString = (port) => {
+  if (typeof port === "number") {
+    return port.toString();
+  }
+  return `${port.from}-${port.to}`;
+};
+
 // src/components/proto.ts
 var NET_UTILS_GENERAL_TARGET_DEFINITION = zod_default.union([
   zod_default.object({
@@ -15901,6 +15952,7 @@ var OUTPUT_CONFIG = zod_default.object({
   link: INPUT_OR_GENERATOR_INSTANCE_ID.nullable()
 });
 var TOOLBOX_CONFIG = zod_default.object({
+  appListener: APP_LISTENER_CONFIG.partial().optional(),
   inputs: zod_default.record(zod_default.string(), INPUT_CONFIG),
   generators: zod_default.record(zod_default.string(), GENERATOR_CONFIG),
   outputs: zod_default.record(zod_default.string(), OUTPUT_CONFIG),
@@ -15917,11 +15969,11 @@ var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPAC
 
 // src/components/frontend/toolbox/root.tsx
 import {
-  useCallback as useCallback20,
-  useContext as useContext16,
-  useEffect as useEffect31,
-  useMemo as useMemo15,
-  useState as useState31
+  useCallback as useCallback24,
+  useContext as useContext17,
+  useEffect as useEffect34,
+  useMemo as useMemo17,
+  useState as useState36
 } from "react";
 
 // ../../packages/artnet/dist/chunk-J2HDMITA.js
@@ -15967,7 +16019,9 @@ var STRINGS = {
     noChildren: "No inputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Input`,
-    editDialog: (protocol, name) => `Edit ${protocol} Input ${name}`
+    editDialog: (protocol, name) => `Edit ${protocol} Input ${name}`,
+    deleteDialog: `Delete input?`,
+    deleteDialogDetails: `Are you sure you want to delete this input? This action cannot be undone.`
   },
   smtpeModes: {
     SMPTE: `SMPTE ${TIMECODE_FPS.SMPTE}FPS`,
@@ -15990,17 +16044,37 @@ var STRINGS = {
       clock: "Clock"
     },
     addDialog: (protocol) => `Add ${protocol} Generator`,
-    editDialog: (protocol, name) => `Edit ${protocol} Generator ${name}`
+    editDialog: (protocol, name) => `Edit ${protocol} Generator ${name}`,
+    deleteDialog: `Delete generator?`,
+    deleteDialogDetails: `Are you sure you want to delete this generator? This action cannot be undone.`
   },
   outputs: {
     title: "OUTPUTS",
     noChildren: "No outputs yet. Please add one using the buttons below.",
     addButton: (protocol) => `Add ${protocol}`,
     addDialog: (protocol) => `Add ${protocol} Output`,
-    editDialog: (protocol, name) => `Edit ${protocol} Output ${name}`
+    editDialog: (protocol, name) => `Edit ${protocol} Output ${name}`,
+    deleteDialog: `Delete output?`,
+    deleteDialogDetails: `Are you sure you want to delete this output? This action cannot be undone.`
   },
   settings: {
-    title: "Settings"
+    title: "Settings",
+    network: {
+      appPortLabel: "Application Port",
+      appInterfaceLabel: "Application Interface",
+      anyInterface: "Any Interface",
+      internalInterfaceUsed: (iface) => `Note: The interface ${iface} is only accessible from this device, which means that other devices will not be able to connect to Timecode Toolbox.`,
+      appPortEnvOverride: (envPort) => `Note: The application port is currently set to ${envPort} via the PORT environment variable, and cannot be configured here.`,
+      defaultPort: (port) => `Default: (${port})`,
+      saveChanges: "Save Changes",
+      saveWarning: {
+        external: "When you hit Save, the UI will reload",
+        internal: "When you hit Save, the app will attempt to reconnect using the new network settings, but may require you to adjust the URL manually."
+      },
+      invalidPortSingle: "Port numbers must be an integer between 1 and 65535",
+      invalidPort: 'Please enter a valid port number or range (e.g. "1234" or "8000-8100")',
+      invalidPortRange: 'The first port in a range must be less than or equal to the second port (e.g. "8000-8100")'
+    }
   },
   controls: {
     play: "Play",
@@ -16934,7 +17008,7 @@ var DmxConnectionSettings = ({
 var OutputSettingsDialog = ({
   target,
   output,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = useContext10(ConfigContext);
   const [newData, setNewData] = useState25({
@@ -16950,6 +17024,7 @@ var OutputSettingsDialog = ({
     },
     link: null
   });
+  const close = useCallback14(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = useCallback14(
     (change) => {
       if (target.type === "add") {
@@ -17080,10 +17155,25 @@ var OutputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ jsxs11(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ jsxs11(ControlDialogButtons, { children: [
           /* @__PURE__ */ jsx28(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ jsx28(ControlButton, { onClick: addOutput, variant: "large", children: "Add Output" })
-        ] }) : /* @__PURE__ */ jsx28(ControlDialogButtons, { children: /* @__PURE__ */ jsx28(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ jsxs11(ControlDialogButtons, { children: [
+          /* @__PURE__ */ jsx28(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "outputs", output },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsx28(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17295,7 +17385,7 @@ var ClockSpecificSettings = ({
 var GeneratorSettingsDialog = ({
   target,
   generator,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = useContext11(ConfigContext);
   const [newData, setNewData] = useState26({
@@ -17305,6 +17395,7 @@ var GeneratorSettingsDialog = ({
       speed: 1
     }
   });
+  const close = useCallback15(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = useCallback15(
     (change) => {
       if (target.type === "add") {
@@ -17412,10 +17503,25 @@ var GeneratorSettingsDialog = ({
             updateSettings: updateDefinition
           }
         ) : null,
-        resolvedTarget === "add" ? /* @__PURE__ */ jsxs12(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ jsxs12(ControlDialogButtons, { children: [
           /* @__PURE__ */ jsx29(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ jsx29(ControlButton, { onClick: addGenerator, variant: "large", children: "Add Generator" })
-        ] }) : /* @__PURE__ */ jsx29(ControlDialogButtons, { children: /* @__PURE__ */ jsx29(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ jsxs12(ControlDialogButtons, { children: [
+          /* @__PURE__ */ jsx29(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "generators", generator },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsx29(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17629,7 +17735,7 @@ var TCNetConnectionSettings = ({
 var InputSettingsDialog = ({
   target,
   input,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = useContext12(ConfigContext);
   const [newData, setNewData] = useState27({
@@ -17644,6 +17750,7 @@ var InputSettingsDialog = ({
       iface: ""
     }
   });
+  const close = useCallback16(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = useCallback16(
     (change) => {
       if (target.type === "add") {
@@ -17780,10 +17887,25 @@ var InputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ jsxs13(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ jsxs13(ControlDialogButtons, { children: [
           /* @__PURE__ */ jsx30(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
-          /* @__PURE__ */ jsx30(ControlButton, { onClick: addInput, variant: "large", children: "Add Input" })
-        ] }) : /* @__PURE__ */ jsx30(ControlDialogButtons, { children: /* @__PURE__ */ jsx30(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+          /* @__PURE__ */ jsx30(ControlButton, { onClick: addInput, variant: "large", primary: true, children: "Add Input" })
+        ] }) : target?.type === "edit" ? /* @__PURE__ */ jsxs13(ControlDialogButtons, { children: [
+          /* @__PURE__ */ jsx30(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "inputs", input },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ jsx30(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17972,8 +18094,20 @@ var diffJson = (a, b) => {
   return { type: "value", after: b };
 };
 
+// src/components/frontend/toolbox/types.ts
+var isDeleteDialogMode = (mode) => {
+  return mode?.target.type === "delete";
+};
+
 // src/components/frontend/toolbox/settings.tsx
-import { useContext as useContext13 } from "react";
+import {
+  useCallback as useCallback18,
+  useContext as useContext13,
+  useEffect as useEffect29,
+  useMemo as useMemo15,
+  useRef as useRef17,
+  useState as useState29
+} from "react";
 
 // ../../packages/sigil/dist/frontend/appearance.js
 import { useCallback as useCallback17 } from "react";
@@ -18118,7 +18252,7 @@ var TOOLBOX_PREFERENCES = {
 var useBrowserPreferences = createBrowserPreferencesHook(TOOLBOX_PREFERENCES);
 
 // src/components/frontend/toolbox/settings.tsx
-import { jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
 var ENABLED_DISABLED_OPTIONS = [
   { value: "enabled", label: STRINGS.general.enabled },
   { value: "disabled", label: STRINGS.general.disabled }
@@ -18126,6 +18260,180 @@ var ENABLED_DISABLED_OPTIONS = [
 var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
   timeStyle: "medium"
 });
+var AppPortConfig = () => {
+  const { getNetworkInterfaces } = useContext13(NetworkContext);
+  const [interfaces, setInterfaces] = useState29(null);
+  const refreshInterfaces = useCallback18(() => {
+    setInterfaces(null);
+    getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
+  }, [getNetworkInterfaces]);
+  useEffect29(() => {
+    refreshInterfaces();
+  }, [refreshInterfaces]);
+  const { appListenerChangesHandledExternally } = useBrowserContext();
+  const { network, config, updateConfig } = useContext13(ConfigContext);
+  const [nextPort, setNextPort] = useState29(null);
+  const [nextInterface, setNextInterface] = useState29(
+    null
+  );
+  const iface = nextInterface ?? (config.appListener?.interface ? `specific:${config.appListener?.interface}` : "any");
+  const port = nextPort ?? config.appListener?.port;
+  const currentPortString = !port ? "" : typeof port === "string" ? port : portString(port);
+  const hasNetworkChanges = nextPort !== null || nextInterface !== null;
+  const nextUrlRef = useRef17(null);
+  const validatedPort = useMemo15(() => {
+    if (nextPort === null) {
+      return { type: "unchanged" };
+    }
+    if (nextPort.trim() === "") {
+      return { type: "empty" };
+    }
+    const portParts = nextPort.split("-").map((part) => parseInt(part.trim(), 10));
+    if (portParts.length === 1) {
+      const [singlePort] = portParts;
+      if (!singlePort || isNaN(singlePort) || singlePort < 1 || singlePort > 65535) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortSingle
+        };
+      }
+      return { type: "valid", port: singlePort };
+    }
+    if (portParts.length === 2) {
+      const [from, to] = portParts;
+      if (!from || isNaN(from) || from < 1 || from > 65535 || !to || isNaN(to) || to < 1 || to > 65535) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortSingle
+        };
+      } else if (from > to) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortRange
+        };
+      }
+      return { type: "valid", port: { from, to } };
+    }
+    return { type: "invalid", error: STRINGS.settings.network.invalidPort };
+  }, [nextPort]);
+  const canSave = hasNetworkChanges && validatedPort?.type !== "invalid";
+  const saveNetworkConfig = useCallback18(() => {
+    if (validatedPort?.type === "invalid") {
+      return;
+    }
+    const newPort = validatedPort;
+    updateConfig((current) => {
+      const config2 = {
+        ...current,
+        appListener: {
+          port: newPort.type === "empty" ? void 0 : newPort.type === "valid" ? newPort.port : current.appListener?.port,
+          interface: nextInterface === "any" ? void 0 : nextInterface ? nextInterface.replace("specific:", "") : current.appListener?.interface
+        }
+      };
+      const nextUrl = new URL(window.location.href);
+      if (config2.appListener?.interface) {
+        nextUrl.hostname = interfaces?.[config2.appListener.interface]?.address ?? nextUrl.hostname;
+      }
+      const port2 = config2.appListener?.port ?? network.defaultPort;
+      nextUrl.port = (typeof port2 === "number" ? port2 : port2.from).toString();
+      nextUrlRef.current = nextUrl;
+      return config2;
+    });
+    setNextPort(null);
+    setNextInterface(null);
+  }, [
+    interfaces,
+    nextInterface,
+    validatedPort,
+    updateConfig,
+    network.defaultPort
+  ]);
+  useEffect29(() => {
+    return () => {
+      if (!appListenerChangesHandledExternally && nextUrlRef.current) {
+        window.location.href = nextUrlRef.current.href;
+      }
+    };
+  }, [appListenerChangesHandledExternally]);
+  return /* @__PURE__ */ jsxs15(Fragment12, { children: [
+    /* @__PURE__ */ jsx35(ControlLabel, { children: STRINGS.settings.network.appInterfaceLabel }),
+    /* @__PURE__ */ jsx35(
+      ControlSelect,
+      {
+        value: iface,
+        options: [
+          { label: STRINGS.settings.network.anyInterface, value: "any" },
+          ...!interfaces ? [] : Object.values(interfaces).map((iface2) => ({
+            label: `${iface2.name} (${iface2.address})`,
+            value: `specific:${iface2.name}`
+          }))
+        ],
+        onChange: setNextInterface,
+        position: "first",
+        variant: "large",
+        triggerClassName: cn("text-sigil-control")
+      }
+    ),
+    iface && interfaces?.[iface]?.internal && /* @__PURE__ */ jsx35(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.internalInterfaceUsed(iface)
+      }
+    ),
+    /* @__PURE__ */ jsx35(
+      ControlButton,
+      {
+        onClick: refreshInterfaces,
+        title: "Refresh Interfaces",
+        position: "extra",
+        variant: "large",
+        children: /* @__PURE__ */ jsx35(Icon2, { icon: "refresh", className: "text-arcane-normal" })
+      }
+    ),
+    /* @__PURE__ */ jsx35(ControlLabel, { children: STRINGS.settings.network.appPortLabel }),
+    network.envPort ? /* @__PURE__ */ jsx35(ControlDetails, { position: "both", children: STRINGS.settings.network.appPortEnvOverride(network.envPort) }) : /* @__PURE__ */ jsxs15(Fragment12, { children: [
+      /* @__PURE__ */ jsx35(
+        ControlInput,
+        {
+          value: currentPortString,
+          onChange: setNextPort,
+          placeholder: STRINGS.settings.network.defaultPort(
+            portString(network.defaultPort)
+          )
+        }
+      ),
+      validatedPort.type === "invalid" && /* @__PURE__ */ jsx35(
+        ControlDetails,
+        {
+          position: "second",
+          className: "text-sigil-error-foreground",
+          children: validatedPort.error
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx35(
+      ControlButton,
+      {
+        onClick: saveNetworkConfig,
+        variant: "large",
+        position: "first",
+        disabled: !canSave,
+        children: STRINGS.settings.network.saveChanges
+      }
+    ),
+    hasNetworkChanges && appListenerChangesHandledExternally && /* @__PURE__ */ jsx35(ControlDetails, { position: "second", children: STRINGS.settings.network.saveWarning.external }),
+    hasNetworkChanges && !appListenerChangesHandledExternally && /* @__PURE__ */ jsx35(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.saveWarning.internal
+      }
+    )
+  ] });
+};
 var Settings = ({ setWindowMode }) => {
   const { preferences, updateBrowserPrefs } = useBrowserPreferences();
   const { config, updateConfig } = useContext13(ConfigContext);
@@ -18173,7 +18481,8 @@ var Settings = ({ setWindowMode }) => {
           /* @__PURE__ */ jsx35(ControlDetails, { children: STRINGS.updates.settingsDetails }),
           updates && "lastCheckedMillis" in updates && /* @__PURE__ */ jsx35(ControlDetails, { children: STRINGS.updates.lastChecked(
             DATE_FORMATTER.format(updates.lastCheckedMillis)
-          ) })
+          ) }),
+          /* @__PURE__ */ jsx35(AppPortConfig, {})
         ] })
       }
     )
@@ -18181,7 +18490,7 @@ var Settings = ({ setWindowMode }) => {
 };
 
 // src/components/frontend/toolbox/license.tsx
-import { useCallback as useCallback18, useContext as useContext15 } from "react";
+import { useCallback as useCallback19, useContext as useContext15 } from "react";
 
 // src/components/frontend/toolbox/logo.tsx
 import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -18520,10 +18829,10 @@ var TimecodeToolboxLogo = (props) => /* @__PURE__ */ jsxs16(
 );
 
 // src/components/frontend/toolbox/core/layout.tsx
-import { useContext as useContext14, useState as useState29 } from "react";
+import { useContext as useContext14, useState as useState30 } from "react";
 
 // src/components/frontend/toolbox/core/footer.tsx
-import { Fragment as Fragment12, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx37, jsxs as jsxs17 } from "react/jsx-runtime";
 var Footer = ({ openLicenseDetails }) => {
   return /* @__PURE__ */ jsxs17(
     "div",
@@ -18537,7 +18846,7 @@ var Footer = ({ openLicenseDetails }) => {
         ] }),
         /* @__PURE__ */ jsx37(ToolbarDivider, {}),
         /* @__PURE__ */ jsx37(ExternalLink, { href: SOURCE_CODE_URL, children: STRINGS.sourceCode }),
-        openLicenseDetails && /* @__PURE__ */ jsxs17(Fragment12, { children: [
+        openLicenseDetails && /* @__PURE__ */ jsxs17(Fragment13, { children: [
           /* @__PURE__ */ jsx37(ToolbarDivider, {}),
           /* @__PURE__ */ jsx37(TextButton, { onClick: openLicenseDetails, children: STRINGS.license })
         ] })
@@ -18547,9 +18856,9 @@ var Footer = ({ openLicenseDetails }) => {
 };
 
 // ../../packages/sigil/dist/frontend/styling.hooks.js
-import { useEffect as useEffect29 } from "react";
+import { useEffect as useEffect30 } from "react";
 var useRootHintVariables = (color) => {
-  useEffect29(() => {
+  useEffect30(() => {
     const root = document.querySelector(".arcane-theme-root");
     if (!root) return;
     Object.entries(cssHintColorVariables(color)).forEach(([key, value]) => {
@@ -18559,18 +18868,18 @@ var useRootHintVariables = (color) => {
 };
 
 // src/components/frontend/toolbox/core/layout.tsx
-import { Fragment as Fragment13, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx38, jsxs as jsxs18 } from "react/jsx-runtime";
 var Layout = ({
   modes,
   children,
   licenseMode,
   footer
 }) => {
-  const [windowMode, setWindowMode] = useState29(null);
+  const [windowMode, setWindowMode] = useState30(null);
   const { connection, reconnect } = useContext14(StageContext);
   const { preferences } = useBrowserPreferences();
   useRootHintVariables(preferences.color);
-  return /* @__PURE__ */ jsxs18("div", { className: "flex h-screen flex-col", children: [
+  return /* @__PURE__ */ jsxs18("div", { className: "flex h-dvh flex-col", children: [
     /* @__PURE__ */ jsx38(ToolbarWrapper, { children: /* @__PURE__ */ jsxs18(ToolbarRow, { children: [
       /* @__PURE__ */ jsx38(
         "div",
@@ -18579,7 +18888,7 @@ var Layout = ({
           children: /* @__PURE__ */ jsx38("span", { className: "font-bold text-hint-gradient", children: STRINGS.title })
         }
       ),
-      modes && /* @__PURE__ */ jsxs18(Fragment13, { children: [
+      modes && /* @__PURE__ */ jsxs18(Fragment14, { children: [
         /* @__PURE__ */ jsx38(ToolbarDivider, {}),
         Object.entries(modes).map(([key, { icon, title }]) => /* @__PURE__ */ jsx38(
           ControlButton,
@@ -18644,7 +18953,7 @@ var License = ({ license, setWindowMode }) => {
 };
 var LicenseGate = ({ info }) => {
   const { sendMessage } = useContext15(StageContext);
-  const acceptLicense = useCallback18(() => {
+  const acceptLicense = useCallback19(() => {
     sendMessage?.({
       type: "component-message",
       namespace: "timecode-toolbox",
@@ -18691,19 +19000,19 @@ var LicenseGate = ({ info }) => {
 };
 
 // src/components/frontend/toolbox/core/updates.tsx
-import { useCallback as useCallback19, useEffect as useEffect30, useState as useState30 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect31, useState as useState31 } from "react";
 import { jsx as jsx40, jsxs as jsxs20 } from "react/jsx-runtime";
 var UpdateBanner = () => {
   const { updates } = useApplicationState();
   const { version } = useSystemInformation();
   const { openExternalLink } = useBrowserContext();
-  const [displayState, setDisplayState] = useState30();
-  useEffect30(() => {
+  const [displayState, setDisplayState] = useState31();
+  useEffect31(() => {
     if (updates?.type !== "loading") {
       setDisplayState(updates);
     }
   }, [updates]);
-  const openDownloadLink = useCallback19(() => {
+  const openDownloadLink = useCallback20(() => {
     if (displayState?.type === "updates-available" && displayState.response.downloadUrl) {
       openExternalLink(displayState.response.downloadUrl);
     }
@@ -18749,52 +19058,663 @@ var UpdateBanner = () => {
   return null;
 };
 
-// src/components/frontend/toolbox/root.tsx
-import { Fragment as Fragment14, jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
-var ToolboxRoot = ({ info }) => {
-  const { config } = info;
-  const { sendMessage, call } = useContext16(StageContext);
-  const [dialogMode, setDialogMode] = useState31(null);
-  const [assignToOutput, setAssignToOutput] = useState31(null);
-  useEffect31(() => {
-    if (assignToOutput) {
-      const onEscape = (e) => {
-        if (e.key === "Escape") {
-          setAssignToOutput(null);
+// ../../packages/sigil/src/frontend/controls/dialogs.tsx
+import { forwardRef as forwardRef20 } from "react";
+
+// ../../packages/sigil/src/frontend/dialogs.tsx
+import {
+  createContext as createContext11,
+  forwardRef as forwardRef19,
+  useEffect as useEffect33,
+  useState as useState35
+} from "react";
+
+// ../../packages/sigil/src/frontend/controls/buttons.tsx
+import {
+  forwardRef as forwardRef17
+} from "react";
+
+// ../../packages/sigil/src/frontend/styling.ts
+var SIGIL_COLOR2 = external_exports.enum([
+  "purple",
+  "blue",
+  "teal",
+  "red",
+  "green",
+  "yellow",
+  "brown",
+  "orange",
+  "gray"
+]);
+function cnd2(condition, truthyClassName, falseyClassName) {
+  return condition ? truthyClassName : falseyClassName;
+}
+
+// ../../packages/sigil/src/frontend/tooltip.tsx
+import {
+  createContext as createContext10,
+  forwardRef as forwardRef16,
+  useContext as useContext16,
+  useState as useState33
+} from "react";
+import { Fragment as Fragment15, jsx as jsx41, jsxs as jsxs21 } from "react/jsx-runtime";
+var Content4 = forwardRef16(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+  dist_exports4.Content,
+  {
+    ...props,
+    ref,
+    className: cn(
+      `
+        relative z-sigil-tooltip rounded-sigil-control
+        bg-sigil-usage-hint-background px-1 py-0.5 leading-[1.5]
+        text-sigil-usage-hint-text shadow-sigil-box
+      `,
+      className
+    )
+  }
+));
+Content4.displayName = "Content";
+var Arrow4 = forwardRef16(({ className, ...props }, ref) => /* @__PURE__ */ jsx41(
+  dist_exports4.Arrow,
+  {
+    ...props,
+    ref,
+    className: cn(
+      "fill-sigil-usage-hint-background drop-shadow-sigil-tooltip-arrow",
+      className
+    )
+  }
+));
+Arrow4.displayName = "Arrow";
+var TooltipBoundaryContext2 = createContext10(null);
+var TooltipWrapper2 = ({
+  tooltip,
+  children,
+  side = "top"
+}) => {
+  const boundary = useContext16(TooltipBoundaryContext2);
+  if (!tooltip) {
+    return children;
+  }
+  return /* @__PURE__ */ jsxs21(dist_exports4.Root, { children: [
+    /* @__PURE__ */ jsx41(dist_exports4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsxs21(
+      Content4,
+      {
+        side,
+        align: "center",
+        sideOffset: 5,
+        alignOffset: 0,
+        collisionBoundary: boundary ? [boundary] : [],
+        collisionPadding: 10,
+        children: [
+          /* @__PURE__ */ jsx41(Arrow4, {}),
+          tooltip
+        ]
+      }
+    )
+  ] });
+};
+
+// ../../packages/sigil/src/frontend/input.ts
+import { useMemo as useMemo16, useState as useState34 } from "react";
+var usePressable3 = (click) => {
+  const [touching, setTouching] = useState34(false);
+  return {
+    touching,
+    handlers: {
+      onClick: click,
+      onTouchStart: () => {
+        setTouching(true);
+      },
+      onTouchMove: () => {
+        setTouching(false);
+      },
+      onTouchEnd: (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          click(event);
         }
-      };
-      window.addEventListener("keydown", onEscape);
-      return () => {
-        window.removeEventListener("keydown", onEscape);
-      };
+      }
     }
-  }, [assignToOutput]);
-  const updateConfig = useCallback20(
-    (change) => {
-      const diff = diffJson(config, change(config));
-      sendMessage?.({
-        type: "component-message",
-        namespace: "timecode-toolbox",
-        component: "toolbox-root",
-        componentKey: info.key,
-        action: "update-config",
-        diff
-      });
-    },
-    [sendMessage, info.key, config]
-  );
-  const configContext = useMemo15(
+  };
+};
+var useLongPressable3 = ({
+  onPress,
+  onRelease
+}) => {
+  const [touching, setTouching] = useState34(false);
+  return useMemo16(
     () => ({
-      config,
-      updateConfig
-    }),
-    [config, updateConfig]
-  );
-  const closeDialog = useCallback20(() => setDialogMode(null), []);
-  const getNetworkInterfaces = useCallback20(async () => {
-    if (!call) {
-      throw new Error("No call function available");
-    }
+      touching,
+      handlers: {
+        onTouchStart: () => {
+          setTouching(true);
+          onPress();
+        },
+        onMouseDown: () => {
+          setTouching(true);
+          onPress();
+        },
+        onMouseUp: () => {
+          setTouching(false);
+          onRelease();
+        },
+        onTouchMove: () => {
+          setTouching(false);
+          onRelease();
+        },
+        onTouchEnd: (event) => {
+          if (touching) {
+            event.preventDefault();
+            setTouching(false);
+            onRelease();
+          }
+        }
+      }
+    }),
+    [touching, onRelease, onPress]
+  );
+};
+
+// ../../packages/sigil/src/frontend/controls/utils.ts
+var clsControlPosition2 = (position) => {
+  if (!position) return void 0;
+  switch (position) {
+    case "row":
+      return "control-grid-pos-row";
+    case "label":
+      return "control-grid-pos-label";
+    case "first":
+      return "control-grid-pos-first";
+    case "second":
+      return "control-grid-pos-second";
+    case "both":
+      return "control-grid-pos-both";
+    case "all":
+      return "control-grid-pos-all";
+    case "extra":
+      return "control-grid-pos-extra";
+  }
+};
+var clsControlSubgridPosition2 = (position, subgrid) => {
+  if (!subgrid) return void 0;
+  switch (position) {
+    case "label":
+      return "col-[1/span_1]";
+    case "first":
+      return "col-[2/span_1]";
+    case "second":
+      return "col-[3/span_1]";
+  }
+};
+
+// ../../packages/sigil/src/frontend/controls/buttons.tsx
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var clsControlButton2 = ({
+  variant,
+  active,
+  touching,
+  position,
+  className,
+  primary,
+  destructive
+}) => cn(
+  `sigil-control-button`,
+  cnd2(variant === "border", `sigil-control-button-variant-border`),
+  cnd2(variant === "large", `sigil-control-button-variant-large`),
+  cnd2(variant === "properties", `sigil-control-button-variant-properties`),
+  cnd2(variant === "table-row", `sigil-control-button-variant-table-row`),
+  cnd2(variant === "toolbar", `sigil-control-button-variant-toolbar`),
+  cnd2(variant === "titlebar", `sigil-control-button-variant-titlebar`),
+  cnd2(touching, `sigil-control-button-touching`),
+  cnd2(active, `sigil-control-button-active`),
+  cnd2(touching && active, `sigil-control-button-active-touching`),
+  cnd2(primary, `sigil-control-button-primary`),
+  cnd2(destructive, `sigil-control-button-destructive`),
+  clsControlPosition2(position),
+  className
+);
+var ControlButtonFrame2 = forwardRef17(
+  ({
+    children,
+    className,
+    type,
+    variant = "toolbar",
+    icon,
+    active,
+    touching,
+    disabled,
+    title,
+    tooltipSide,
+    position,
+    primary,
+    destructive,
+    ...props
+  }, ref) => {
+    const btn = /* @__PURE__ */ jsx45(
+      "button",
+      {
+        ...props,
+        ref,
+        type: type ?? "button",
+        disabled,
+        className: clsControlButton2({
+          variant,
+          active,
+          touching,
+          position,
+          primary,
+          destructive,
+          className
+        }),
+        children: /* @__PURE__ */ jsxs24("span", { children: [
+          icon && /* @__PURE__ */ jsx45(
+            Icon2,
+            {
+              icon,
+              className: cn(cnd2(children, "text-[120%]", "text-[150%]"))
+            }
+          ),
+          children
+        ] })
+      }
+    );
+    if (!title) return btn;
+    return /* @__PURE__ */ jsx45(TooltipWrapper2, { tooltip: title, side: tooltipSide, children: btn });
+  }
+);
+ControlButtonFrame2.displayName = "ControlButtonFrame";
+var ControlButton2 = forwardRef17(
+  ({ onClick, disabled, ...props }, ref) => {
+    const { handlers, touching } = usePressable3(onClick);
+    return /* @__PURE__ */ jsx45(
+      ControlButtonFrame2,
+      {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...!disabled ? handlers : {}
+      }
+    );
+  }
+);
+ControlButton2.displayName = "ControlButton";
+var CheckboxControlButton2 = forwardRef17(({ active, label, ...props }, ref) => /* @__PURE__ */ jsxs24(ControlButton2, { ...props, ref, active, children: [
+  /* @__PURE__ */ jsx45(Icon2, { icon: active ? "check_box" : "check_box_outline_blank" }),
+  label
+] }));
+CheckboxControlButton2.displayName = "CheckboxControlButton";
+var LongPressableControlButton2 = forwardRef17(({ active, disabled, onPress, onRelease, ...props }, ref) => {
+  const { handlers, touching } = useLongPressable3({ onPress, onRelease });
+  return /* @__PURE__ */ jsx45(
+    ControlButtonFrame2,
+    {
+      ...props,
+      ref,
+      active: active || touching,
+      disabled,
+      ...!disabled ? handlers : {}
+    }
+  );
+});
+LongPressableControlButton2.displayName = "LongPressableControlButton";
+var ControlButtonGroup2 = forwardRef17(({ children, className, position, ...props }, ref) => /* @__PURE__ */ jsx45(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-sigil-control-gap
+        [&>button]:grow
+      `,
+      clsControlPosition2(position),
+      className
+    ),
+    children
+  }
+));
+ControlButtonGroup2.displayName = "ControlButtonGroup";
+
+// ../../packages/sigil/src/frontend/controls/content.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var ControlParagraph2 = forwardRef18(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ jsx46(
+  "p",
+  {
+    ...props,
+    ref,
+    className: cn(
+      "border border-transparent",
+      clsControlPosition2(position),
+      cnd2(
+        mode === "success",
+        `
+          border-sigil-usage-green-dimmed-border
+          bg-sigil-usage-green-dimmed-background p-1 text-sigil-usage-green-text
+        `
+      ),
+      cnd2(
+        mode === "warning",
+        `
+          border-sigil-usage-yellow-dimmed-border
+          bg-sigil-usage-yellow-dimmed-background p-1
+          text-sigil-usage-yellow-text
+        `
+      ),
+      cnd2(
+        mode === "error",
+        `
+          border-sigil-usage-red-dimmed-border
+          bg-sigil-usage-red-dimmed-background p-1 text-sigil-usage-red-text
+        `
+      ),
+      className
+    )
+  }
+));
+ControlParagraph2.displayName = "ControlParagraph";
+var ControlLabel2 = forwardRef18(
+  ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
+    return /* @__PURE__ */ jsx46(
+      "label",
+      {
+        ...props,
+        ref,
+        className: cn(
+          "flex items-center justify-end gap-0.6 p-0.6",
+          clsControlPosition2(position),
+          cnd2(nonMicro, "max-[550px]:hidden"),
+          cnd2(disabled, "opacity-50"),
+          clsControlSubgridPosition2(position, subgrid),
+          className
+        )
+      }
+    );
+  }
+);
+ControlLabel2.displayName = "ControlLabel";
+var ControlDetails2 = forwardRef18(
+  ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ jsx46(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        "flex items-center px-0.3 text-sigil-foreground-muted",
+        clsControlPosition2(position),
+        cnd2(align === "start", "justify-start"),
+        cnd2(align === "center", "justify-center"),
+        cnd2(align === "end", "justify-end"),
+        className
+      )
+    }
+  )
+);
+ControlDetails2.displayName = "ControlDetails";
+var InputSpanningTitle2 = forwardRef18(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ jsx46(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn(
+      "truncate p-0.6 text-center text-[0.8rem] font-bold",
+      clsControlPosition2(position),
+      className
+    )
+  }
+));
+InputSpanningTitle2.displayName = "InputSpanningTitle";
+
+// ../../packages/sigil/src/frontend/controls/input.tsx
+import {
+  useCallback as useCallback21,
+  useEffect as useEffect32,
+  useRef as useRef18
+} from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+
+// ../../packages/sigil/src/frontend/controls/select.tsx
+import { useCallback as useCallback23 } from "react";
+import { Fragment as Fragment16, jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+var COLOR_OPTIONS2 = {
+  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_ARRAY2 = Object.values(COLOR_OPTIONS2);
+
+// ../../packages/sigil/src/frontend/dialogs.tsx
+import { Fragment as Fragment17, jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+var isDarkDialog2 = (variant) => variant === "dark" || variant === "dark-compact";
+var DialogContext2 = createContext11({
+  createDialog: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayMessage: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayError: () => {
+    throw new Error("DialogContext not provided");
+  }
+});
+var DialogTitle2 = forwardRef19(
+  ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ jsx49(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        `
+          flex items-center justify-center gap-0.6 border-b border-sigil-border
+          p-arcane font-bold
+        `,
+        cnd2(isDarkDialog2(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"),
+        className
+      )
+    }
+  )
+);
+DialogTitle2.displayName = "DialogTitle";
+var DialogButtons2 = forwardRef19(({ className, ...props }, ref) => /* @__PURE__ */ jsx49(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn("mt-arcane flex justify-end gap-0.6", className)
+  }
+));
+DialogButtons2.displayName = "DialogButtons";
+var Dialog2 = ({
+  children,
+  dialogClosed,
+  closable = true,
+  title,
+  variant = "light"
+}) => {
+  const [dialogRef, setDialogRef] = useState35(null);
+  useEffect33(() => {
+    if (!dialogRef) return;
+    dialogRef.showModal();
+  }, [dialogRef]);
+  const close = () => dialogRef?.close();
+  const onClose = (event) => {
+    if (closable) {
+      dialogClosed();
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.showModal();
+  };
+  const onMouseDown = (event) => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ jsx49(
+    "dialog",
+    {
+      ref: setDialogRef,
+      onMouseDown,
+      onClose,
+      className: cn(
+        `
+          max-w-[80vw] min-w-[10vw] border-none p-0 text-sigil-dialog-foreground
+          outline-none backdrop-sigil-dialog
+        `,
+        cnd2(isDarkDialog2(variant), "bg-sigil-bg-dark", "bg-sigil-bg-light")
+      ),
+      children: /* @__PURE__ */ jsxs26("div", { className: "border border-sigil-border", children: [
+        title && /* @__PURE__ */ jsx49(DialogTitle2, { variant, children: title }),
+        /* @__PURE__ */ jsx49(
+          "div",
+          {
+            className: cn(
+              "text-sigil-foreground",
+              cnd2(
+                variant === "light-compact" || variant === "dark-compact",
+                "p-0"
+              ),
+              cnd2(
+                variant !== "light-compact" && variant !== "dark-compact",
+                "p-arcane"
+              )
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// ../../packages/sigil/src/frontend/controls/dialogs.tsx
+import { jsx as jsx50 } from "react/jsx-runtime";
+var ControlDialogButtons2 = forwardRef20(({ children, className, ...props }, ref) => /* @__PURE__ */ jsx50(
+  "div",
+  {
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition2("row"),
+      className
+    ),
+    ...props,
+    children
+  }
+));
+var ControlDialog2 = ({
+  children,
+  large,
+  ...props
+}) => /* @__PURE__ */ jsx50(Dialog2, { ...props, variant: "dark", children: /* @__PURE__ */ jsx50(
+  "div",
+  {
+    className: cn(
+      "gap-1 bg-sigil-bg-dark select-none",
+      cnd2(large, "control-grid-large", "control-grid")
+    ),
+    children
+  }
+) });
+
+// src/components/frontend/toolbox/root.tsx
+import { Fragment as Fragment18, jsx as jsx51, jsxs as jsxs27 } from "react/jsx-runtime";
+var DeleteConfirmationDialog = ({ dialogMode, setDialogMode }) => {
+  const { updateConfig } = useContext17(ConfigContext);
+  const deleteTarget = useCallback24(() => {
+    updateConfig((current) => {
+      return {
+        ...current,
+        [dialogMode.section.type]: Object.fromEntries(
+          Object.entries(current[dialogMode.section.type]).filter(
+            ([uuid]) => uuid !== dialogMode.target.uuid
+          )
+        )
+      };
+    });
+    setDialogMode(null);
+  }, [updateConfig, dialogMode, setDialogMode]);
+  return /* @__PURE__ */ jsxs27(
+    ControlDialog2,
+    {
+      dialogClosed: () => setDialogMode(null),
+      title: STRINGS[dialogMode.section.type].deleteDialog,
+      children: [
+        /* @__PURE__ */ jsx51(ControlDetails, { position: "row", children: STRINGS[dialogMode.section.type].deleteDialogDetails }),
+        /* @__PURE__ */ jsxs27(ControlDialogButtons2, { children: [
+          /* @__PURE__ */ jsx51(ControlButton, { onClick: () => setDialogMode(null), variant: "large", children: "Cancel" }),
+          /* @__PURE__ */ jsx51(
+            ControlButton,
+            {
+              onClick: deleteTarget,
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ToolboxRoot = ({ info }) => {
+  const { config } = info;
+  const { sendMessage, call } = useContext17(StageContext);
+  const [dialogMode, setDialogMode] = useState36(null);
+  const [assignToOutput, setAssignToOutput] = useState36(null);
+  useEffect34(() => {
+    if (assignToOutput) {
+      const onEscape = (e) => {
+        if (e.key === "Escape") {
+          setAssignToOutput(null);
+        }
+      };
+      window.addEventListener("keydown", onEscape);
+      return () => {
+        window.removeEventListener("keydown", onEscape);
+      };
+    }
+  }, [assignToOutput]);
+  const updateConfig = useCallback24(
+    (change) => {
+      const diff = diffJson(config, change(config));
+      sendMessage?.({
+        type: "component-message",
+        namespace: "timecode-toolbox",
+        component: "toolbox-root",
+        componentKey: info.key,
+        action: "update-config",
+        diff
+      });
+    },
+    [sendMessage, info.key, config]
+  );
+  const configContext = useMemo17(
+    () => ({
+      config,
+      network: info.network,
+      updateConfig
+    }),
+    [config, info.network, updateConfig]
+  );
+  const getNetworkInterfaces = useCallback24(async () => {
+    if (!call) {
+      throw new Error("No call function available");
+    }
     return call({
       namespace: "timecode-toolbox",
       type: "component-call",
@@ -18802,12 +19722,12 @@ var ToolboxRoot = ({ info }) => {
       action: "toolbox-root-get-network-interfaces"
     });
   }, [call, info.key]);
-  const networkContextValue = useMemo15(() => {
+  const networkContextValue = useMemo17(() => {
     return {
       getNetworkInterfaces
     };
   }, [getNetworkInterfaces]);
-  const assignToOutputCallback = useMemo15(() => {
+  const assignToOutputCallback = useMemo17(() => {
     if (!assignToOutput) {
       return null;
     }
@@ -18832,7 +19752,7 @@ var ToolboxRoot = ({ info }) => {
       setAssignToOutput(null);
     };
   }, [assignToOutput, updateConfig]);
-  const callHandler = useCallback20(
+  const callHandler = useCallback24(
     async ({ path, handler, args }) => {
       if (!call) {
         throw new Error("No call function available");
@@ -18849,26 +19769,26 @@ var ToolboxRoot = ({ info }) => {
     },
     [call, info.key]
   );
-  const handlers = useMemo15(
+  const handlers = useMemo17(
     () => ({
       handlers: info.handlers,
       callHandler
     }),
     [info.handlers, callHandler]
   );
-  const windowedTimecodeId = useMemo15(
+  const windowedTimecodeId = useMemo17(
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const root = useMemo15(
-    () => windowedTimecodeId ? /* @__PURE__ */ jsx41(Layout, { modes: null, children: /* @__PURE__ */ jsx41(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ jsxs21(Fragment14, { children: [
-      /* @__PURE__ */ jsx41(
+  const root = useMemo17(
+    () => windowedTimecodeId ? /* @__PURE__ */ jsx51(Layout, { modes: null, children: /* @__PURE__ */ jsx51(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ jsxs27(Fragment18, { children: [
+      /* @__PURE__ */ jsx51(
         Layout,
         {
           footer: true,
           modes: {
             license: {
-              child: (setWindowMode) => /* @__PURE__ */ jsx41(
+              child: (setWindowMode) => /* @__PURE__ */ jsx51(
                 License,
                 {
                   license: info.license,
@@ -18879,39 +19799,39 @@ var ToolboxRoot = ({ info }) => {
               title: STRINGS.license
             },
             settings: {
-              child: (setWindowMode) => /* @__PURE__ */ jsx41(Settings, { setWindowMode }),
+              child: (setWindowMode) => /* @__PURE__ */ jsx51(Settings, { setWindowMode }),
               icon: "settings",
               title: STRINGS.settings.title
             },
             debug: {
-              child: () => /* @__PURE__ */ jsx41(Debugger, { title: STRINGS.debugger, className: "size-full" }),
+              child: () => /* @__PURE__ */ jsx51(Debugger, { title: STRINGS.debugger, className: "size-full" }),
               icon: "bug_report",
               title: STRINGS.debugger
             }
           },
           licenseMode: "license",
-          children: /* @__PURE__ */ jsxs21(Fragment14, { children: [
-            /* @__PURE__ */ jsx41(UpdateBanner, {}),
-            /* @__PURE__ */ jsxs21(
+          children: /* @__PURE__ */ jsxs27(Fragment18, { children: [
+            /* @__PURE__ */ jsx51(UpdateBanner, {}),
+            /* @__PURE__ */ jsxs27(
               "div",
               {
                 className: "\n                  flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                  scrollbar-sigil\n                ",
                 children: [
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx51(
                     InputsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx51(
                     GeneratorsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ jsx41(
+                  /* @__PURE__ */ jsx51(
                     OutputsSection,
                     {
                       setDialogMode,
@@ -18925,45 +19845,52 @@ var ToolboxRoot = ({ info }) => {
           ] })
         }
       ),
-      dialogMode?.section.type === "inputs" && /* @__PURE__ */ jsx41(
-        InputSettingsDialog,
-        {
-          close: closeDialog,
-          input: dialogMode.section.input,
-          target: dialogMode.target
-        }
-      ),
-      dialogMode?.section.type === "generators" && /* @__PURE__ */ jsx41(
-        GeneratorSettingsDialog,
-        {
-          close: closeDialog,
-          generator: dialogMode.section.generator,
-          target: dialogMode.target
-        }
-      ),
-      dialogMode?.section.type === "outputs" && /* @__PURE__ */ jsx41(
-        OutputSettingsDialog,
+      isDeleteDialogMode(dialogMode) ? /* @__PURE__ */ jsx51(
+        DeleteConfirmationDialog,
         {
-          close: closeDialog,
-          output: dialogMode.section.output,
-          target: dialogMode.target
+          dialogMode,
+          setDialogMode
         }
-      )
+      ) : /* @__PURE__ */ jsxs27(Fragment18, { children: [
+        dialogMode?.section.type === "inputs" && /* @__PURE__ */ jsx51(
+          InputSettingsDialog,
+          {
+            setDialogMode,
+            input: dialogMode.section.input,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "generators" && /* @__PURE__ */ jsx51(
+          GeneratorSettingsDialog,
+          {
+            setDialogMode,
+            generator: dialogMode.section.generator,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "outputs" && /* @__PURE__ */ jsx51(
+          OutputSettingsDialog,
+          {
+            setDialogMode,
+            output: dialogMode.section.output,
+            target: dialogMode.target
+          }
+        )
+      ] })
     ] }),
     [
       assignToOutput,
       assignToOutputCallback,
-      closeDialog,
       dialogMode,
       windowedTimecodeId,
       info.license
     ]
   );
-  return /* @__PURE__ */ jsx41(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ jsx41(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ jsx41(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ jsx41(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
+  return /* @__PURE__ */ jsx51(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ jsx51(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ jsx51(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ jsx51(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
 };
 
 // src/components/frontend/index.tsx
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { jsx as jsx54 } from "react/jsx-runtime";
 var timecodeToolboxFrontendComponents = () => ({
   namespace: NAMESPACE,
   render: (info) => {
@@ -18972,9 +19899,9 @@ var timecodeToolboxFrontendComponents = () => ({
     }
     switch (info.component) {
       case "toolbox-root":
-        return /* @__PURE__ */ jsx45(ToolboxRoot, { info });
+        return /* @__PURE__ */ jsx54(ToolboxRoot, { info });
       case "license-gate":
-        return /* @__PURE__ */ jsx45(LicenseGate, { info });
+        return /* @__PURE__ */ jsx54(LicenseGate, { info });
     }
   }
 });
@@ -18982,10 +19909,11 @@ var startTimecodeToolboxServerFrontend = (browser) => {
   startSigilFrontend({
     browser,
     appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => /* @__PURE__ */ jsx45("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
+    loadingState: () => /* @__PURE__ */ jsx54("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
   });
 };
 window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;
+window.createBrowserMediaSession = createBrowserMediaSession;
 export {
   startTimecodeToolboxServerFrontend,
   timecodeToolboxFrontendComponents