@arcanewizards/timecode-toolbox 0.1.2 → 0.1.4

package/dist/components/frontend/index.js

@@ -13963,7 +13963,7 @@ function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+// ../../packages/sigil/dist/chunk-LDUYBGRY.js
 var import_react11 = require("react");
 
 // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
@@ -14002,7 +14002,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
 var import_react12 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var import_react13 = require("react");
@@ -14069,7 +14069,8 @@ var clsControlButton = ({
   touching,
   position,
   className,
-  primary
+  primary,
+  destructive
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14082,6 +14083,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
 );
@@ -14099,6 +14101,7 @@ var ControlButtonFrame = (0, import_react12.forwardRef)(
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -14114,6 +14117,7 @@ var ControlButtonFrame = (0, import_react12.forwardRef)(
           touching,
           position,
           primary,
+          destructive,
           className
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
@@ -14223,7 +14227,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = (0, import_react13.forwardRef)(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -14272,10 +14276,17 @@ var InputSpanningTitle = (0, import_react13.forwardRef)(({ className, position =
 ));
 InputSpanningTitle.displayName = "InputSpanningTitle";
 var ControlDialogButtons = (0, import_react14.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  ControlButtonGroup,
+  "div",
   {
     ref,
-    className: cn("control-grid-pos-row", className),
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition("row"),
+      className
+    ),
     ...props,
     children
   }
@@ -14458,19 +14469,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,
@@ -14478,13 +14479,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__ */ (0, import_jsx_runtime22.jsx)(
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         dist_exports2.Trigger,
@@ -14538,7 +14539,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -14550,6 +14551,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__ */ (0, import_jsx_runtime22.jsx)(
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
 var DialogContext = (0, import_react11.createContext)({
   createDialog: () => {
@@ -15582,6 +15608,7 @@ var createBrowserMediaSession = () => {
 };
 var createDefaultBrowserContext = (browser) => {
   const defaults = {
+    appListenerChangesHandledExternally: false,
     openExternalLink: (url) => {
       window.open(url, "_blank", "noopener,noreferrer");
     },
@@ -15803,6 +15830,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({
@@ -15880,6 +15931,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),
@@ -15895,7 +15947,7 @@ var NAMESPACE = "timecode-toolbox";
 var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPACE;
 
 // src/components/frontend/toolbox/root.tsx
-var import_react42 = require("react");
+var import_react50 = require("react");
 
 // ../../packages/artnet/dist/chunk-J2HDMITA.js
 var ARTNET_PORT = 6454;
@@ -15940,7 +15992,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`,
@@ -15963,17 +16017,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",
@@ -16895,7 +16969,7 @@ var DmxConnectionSettings = ({
 var OutputSettingsDialog = ({
   target,
   output,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react32.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react32.useState)({
@@ -16911,6 +16985,7 @@ var OutputSettingsDialog = ({
     },
     link: null
   });
+  const close = (0, import_react32.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react32.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17041,10 +17116,25 @@ var OutputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: addOutput, variant: "large", children: "Add Output" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "outputs", output },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17256,7 +17346,7 @@ var ClockSpecificSettings = ({
 var GeneratorSettingsDialog = ({
   target,
   generator,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react33.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react33.useState)({
@@ -17266,6 +17356,7 @@ var GeneratorSettingsDialog = ({
       speed: 1
     }
   });
+  const close = (0, import_react33.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react33.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17373,10 +17464,25 @@ var GeneratorSettingsDialog = ({
             updateSettings: updateDefinition
           }
         ) : null,
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: addGenerator, variant: "large", children: "Add Generator" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "generators", generator },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17590,7 +17696,7 @@ var TCNetConnectionSettings = ({
 var InputSettingsDialog = ({
   target,
   input,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react34.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react34.useState)({
@@ -17605,6 +17711,7 @@ var InputSettingsDialog = ({
       iface: ""
     }
   });
+  const close = (0, import_react34.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react34.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17741,10 +17848,25 @@ var InputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: addInput, variant: "large", children: "Add Input" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: addInput, variant: "large", primary: true, children: "Add Input" })
+        ] }) : target?.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "inputs", input },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17933,6 +18055,11 @@ 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
 var import_react37 = require("react");
 
@@ -18087,6 +18214,180 @@ var ENABLED_DISABLED_OPTIONS = [
 var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
   timeStyle: "medium"
 });
+var AppPortConfig = () => {
+  const { getNetworkInterfaces } = (0, import_react37.useContext)(NetworkContext);
+  const [interfaces, setInterfaces] = (0, import_react37.useState)(null);
+  const refreshInterfaces = (0, import_react37.useCallback)(() => {
+    setInterfaces(null);
+    getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
+  }, [getNetworkInterfaces]);
+  (0, import_react37.useEffect)(() => {
+    refreshInterfaces();
+  }, [refreshInterfaces]);
+  const { appListenerChangesHandledExternally } = useBrowserContext();
+  const { network, config, updateConfig } = (0, import_react37.useContext)(ConfigContext);
+  const [nextPort, setNextPort] = (0, import_react37.useState)(null);
+  const [nextInterface, setNextInterface] = (0, import_react37.useState)(
+    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 = (0, import_react37.useRef)(null);
+  const validatedPort = (0, import_react37.useMemo)(() => {
+    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 = (0, import_react37.useCallback)(() => {
+    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
+  ]);
+  (0, import_react37.useEffect)(() => {
+    return () => {
+      if (!appListenerChangesHandledExternally && nextUrlRef.current) {
+        window.location.href = nextUrlRef.current.href;
+      }
+    };
+  }, [appListenerChangesHandledExternally]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlLabel, { children: STRINGS.settings.network.appInterfaceLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      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__ */ (0, import_jsx_runtime47.jsx)(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.internalInterfaceUsed(iface)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlButton,
+      {
+        onClick: refreshInterfaces,
+        title: "Refresh Interfaces",
+        position: "extra",
+        variant: "large",
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon2, { icon: "refresh", className: "text-arcane-normal" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlLabel, { children: STRINGS.settings.network.appPortLabel }),
+    network.envPort ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { position: "both", children: STRINGS.settings.network.appPortEnvOverride(network.envPort) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ControlInput,
+        {
+          value: currentPortString,
+          onChange: setNextPort,
+          placeholder: STRINGS.settings.network.defaultPort(
+            portString(network.defaultPort)
+          )
+        }
+      ),
+      validatedPort.type === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ControlDetails,
+        {
+          position: "second",
+          className: "text-sigil-error-foreground",
+          children: validatedPort.error
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlButton,
+      {
+        onClick: saveNetworkConfig,
+        variant: "large",
+        position: "first",
+        disabled: !canSave,
+        children: STRINGS.settings.network.saveChanges
+      }
+    ),
+    hasNetworkChanges && appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { position: "second", children: STRINGS.settings.network.saveWarning.external }),
+    hasNetworkChanges && !appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.saveWarning.internal
+      }
+    )
+  ] });
+};
 var Settings = ({ setWindowMode }) => {
   const { preferences, updateBrowserPrefs } = useBrowserPreferences();
   const { config, updateConfig } = (0, import_react37.useContext)(ConfigContext);
@@ -18134,7 +18435,8 @@ var Settings = ({ setWindowMode }) => {
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.settingsDetails }),
           updates && "lastCheckedMillis" in updates && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.lastChecked(
             DATE_FORMATTER.format(updates.lastCheckedMillis)
-          ) })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppPortConfig, {})
         ] })
       }
     )
@@ -18531,7 +18833,7 @@ var Layout = ({
   const { connection, reconnect } = (0, import_react39.useContext)(StageContext);
   const { preferences } = useBrowserPreferences();
   useRootHintVariables(preferences.color);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex h-screen flex-col", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex h-dvh flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ToolbarRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
@@ -18710,71 +19012,666 @@ var UpdateBanner = () => {
   return null;
 };
 
-// src/components/frontend/toolbox/root.tsx
+// ../../packages/sigil/src/frontend/controls/dialogs.tsx
+var import_react49 = require("react");
+
+// ../../packages/sigil/src/frontend/dialogs.tsx
+var import_react48 = require("react");
+
+// ../../packages/sigil/src/frontend/controls/buttons.tsx
+var import_react44 = require("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
+var import_react42 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var ToolboxRoot = ({ info }) => {
-  const { config } = info;
-  const { sendMessage, call } = (0, import_react42.useContext)(StageContext);
-  const [dialogMode, setDialogMode] = (0, import_react42.useState)(null);
-  const [assignToOutput, setAssignToOutput] = (0, import_react42.useState)(null);
-  (0, import_react42.useEffect)(() => {
-    if (assignToOutput) {
-      const onEscape = (e) => {
-        if (e.key === "Escape") {
-          setAssignToOutput(null);
+var Content4 = (0, import_react42.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  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 = (0, import_react42.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  dist_exports4.Arrow,
+  {
+    ...props,
+    ref,
+    className: cn(
+      "fill-sigil-usage-hint-background drop-shadow-sigil-tooltip-arrow",
+      className
+    )
+  }
+));
+Arrow4.displayName = "Arrow";
+var TooltipBoundaryContext2 = (0, import_react42.createContext)(null);
+var TooltipWrapper2 = ({
+  tooltip,
+  children,
+  side = "top"
+}) => {
+  const boundary = (0, import_react42.useContext)(TooltipBoundaryContext2);
+  if (!tooltip) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(dist_exports4.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(dist_exports4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      Content4,
+      {
+        side,
+        align: "center",
+        sideOffset: 5,
+        alignOffset: 0,
+        collisionBoundary: boundary ? [boundary] : [],
+        collisionPadding: 10,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Arrow4, {}),
+          tooltip
+        ]
+      }
+    )
+  ] });
+};
+
+// ../../packages/sigil/src/frontend/input.ts
+var import_react43 = require("react");
+var usePressable3 = (click) => {
+  const [touching, setTouching] = (0, import_react43.useState)(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 = (0, import_react42.useCallback)(
-    (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 = (0, import_react42.useMemo)(
+  };
+};
+var useLongPressable3 = ({
+  onPress,
+  onRelease
+}) => {
+  const [touching, setTouching] = (0, import_react43.useState)(false);
+  return (0, import_react43.useMemo)(
     () => ({
-      config,
-      updateConfig
-    }),
-    [config, updateConfig]
-  );
-  const closeDialog = (0, import_react42.useCallback)(() => setDialogMode(null), []);
-  const getNetworkInterfaces = (0, import_react42.useCallback)(async () => {
-    if (!call) {
-      throw new Error("No call function available");
-    }
-    return call({
-      namespace: "timecode-toolbox",
-      type: "component-call",
-      componentKey: info.key,
-      action: "toolbox-root-get-network-interfaces"
-    });
-  }, [call, info.key]);
-  const networkContextValue = (0, import_react42.useMemo)(() => {
-    return {
-      getNetworkInterfaces
-    };
-  }, [getNetworkInterfaces]);
-  const assignToOutputCallback = (0, import_react42.useMemo)(() => {
-    if (!assignToOutput) {
-      return null;
-    }
-    const outputUuid = assignToOutput;
-    return (id) => {
-      updateConfig((current) => {
+      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
+var import_jsx_runtime54 = require("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 = (0, import_react44.forwardRef)(
+  ({
+    children,
+    className,
+    type,
+    variant = "toolbar",
+    icon,
+    active,
+    touching,
+    disabled,
+    title,
+    tooltipSide,
+    position,
+    primary,
+    destructive,
+    ...props
+  }, ref) => {
+    const btn = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "button",
+      {
+        ...props,
+        ref,
+        type: type ?? "button",
+        disabled,
+        className: clsControlButton2({
+          variant,
+          active,
+          touching,
+          position,
+          primary,
+          destructive,
+          className
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            Icon2,
+            {
+              icon,
+              className: cn(cnd2(children, "text-[120%]", "text-[150%]"))
+            }
+          ),
+          children
+        ] })
+      }
+    );
+    if (!title) return btn;
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipWrapper2, { tooltip: title, side: tooltipSide, children: btn });
+  }
+);
+ControlButtonFrame2.displayName = "ControlButtonFrame";
+var ControlButton2 = (0, import_react44.forwardRef)(
+  ({ onClick, disabled, ...props }, ref) => {
+    const { handlers, touching } = usePressable3(onClick);
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      ControlButtonFrame2,
+      {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...!disabled ? handlers : {}
+      }
+    );
+  }
+);
+ControlButton2.displayName = "ControlButton";
+var CheckboxControlButton2 = (0, import_react44.forwardRef)(({ active, label, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(ControlButton2, { ...props, ref, active, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, { icon: active ? "check_box" : "check_box_outline_blank" }),
+  label
+] }));
+CheckboxControlButton2.displayName = "CheckboxControlButton";
+var LongPressableControlButton2 = (0, import_react44.forwardRef)(({ active, disabled, onPress, onRelease, ...props }, ref) => {
+  const { handlers, touching } = useLongPressable3({ onPress, onRelease });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    ControlButtonFrame2,
+    {
+      ...props,
+      ref,
+      active: active || touching,
+      disabled,
+      ...!disabled ? handlers : {}
+    }
+  );
+});
+LongPressableControlButton2.displayName = "LongPressableControlButton";
+var ControlButtonGroup2 = (0, import_react44.forwardRef)(({ children, className, position, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  "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
+var import_react45 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var ControlParagraph2 = (0, import_react45.forwardRef)(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  "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 = (0, import_react45.forwardRef)(
+  ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "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 = (0, import_react45.forwardRef)(
+  ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "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 = (0, import_react45.forwardRef)(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  "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
+var import_react46 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// ../../packages/sigil/src/frontend/controls/select.tsx
+var import_react47 = require("react");
+var import_jsx_runtime57 = require("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
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var isDarkDialog2 = (variant) => variant === "dark" || variant === "dark-compact";
+var DialogContext2 = (0, import_react48.createContext)({
+  createDialog: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayMessage: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayError: () => {
+    throw new Error("DialogContext not provided");
+  }
+});
+var DialogTitle2 = (0, import_react48.forwardRef)(
+  ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "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 = (0, import_react48.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  "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] = (0, import_react48.useState)(null);
+  (0, import_react48.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime58.jsx)(
+    "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__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "border border-sigil-border", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogTitle2, { variant, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "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
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var ControlDialogButtons2 = (0, import_react49.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition2("row"),
+      className
+    ),
+    ...props,
+    children
+  }
+));
+var ControlDialog2 = ({
+  children,
+  large,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog2, { ...props, variant: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  "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
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var DeleteConfirmationDialog = ({ dialogMode, setDialogMode }) => {
+  const { updateConfig } = (0, import_react50.useContext)(ConfigContext);
+  const deleteTarget = (0, import_react50.useCallback)(() => {
+    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__ */ (0, import_jsx_runtime60.jsxs)(
+    ControlDialog2,
+    {
+      dialogClosed: () => setDialogMode(null),
+      title: STRINGS[dialogMode.section.type].deleteDialog,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ControlDetails, { position: "row", children: STRINGS[dialogMode.section.type].deleteDialogDetails }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(ControlDialogButtons2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ControlButton, { onClick: () => setDialogMode(null), variant: "large", children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            ControlButton,
+            {
+              onClick: deleteTarget,
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ToolboxRoot = ({ info }) => {
+  const { config } = info;
+  const { sendMessage, call } = (0, import_react50.useContext)(StageContext);
+  const [dialogMode, setDialogMode] = (0, import_react50.useState)(null);
+  const [assignToOutput, setAssignToOutput] = (0, import_react50.useState)(null);
+  (0, import_react50.useEffect)(() => {
+    if (assignToOutput) {
+      const onEscape = (e) => {
+        if (e.key === "Escape") {
+          setAssignToOutput(null);
+        }
+      };
+      window.addEventListener("keydown", onEscape);
+      return () => {
+        window.removeEventListener("keydown", onEscape);
+      };
+    }
+  }, [assignToOutput]);
+  const updateConfig = (0, import_react50.useCallback)(
+    (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 = (0, import_react50.useMemo)(
+    () => ({
+      config,
+      network: info.network,
+      updateConfig
+    }),
+    [config, info.network, updateConfig]
+  );
+  const getNetworkInterfaces = (0, import_react50.useCallback)(async () => {
+    if (!call) {
+      throw new Error("No call function available");
+    }
+    return call({
+      namespace: "timecode-toolbox",
+      type: "component-call",
+      componentKey: info.key,
+      action: "toolbox-root-get-network-interfaces"
+    });
+  }, [call, info.key]);
+  const networkContextValue = (0, import_react50.useMemo)(() => {
+    return {
+      getNetworkInterfaces
+    };
+  }, [getNetworkInterfaces]);
+  const assignToOutputCallback = (0, import_react50.useMemo)(() => {
+    if (!assignToOutput) {
+      return null;
+    }
+    const outputUuid = assignToOutput;
+    return (id) => {
+      updateConfig((current) => {
         const output = current.outputs[outputUuid];
         if (!output) {
           return current;
@@ -18793,7 +19690,7 @@ var ToolboxRoot = ({ info }) => {
       setAssignToOutput(null);
     };
   }, [assignToOutput, updateConfig]);
-  const callHandler = (0, import_react42.useCallback)(
+  const callHandler = (0, import_react50.useCallback)(
     async ({ path, handler, args }) => {
       if (!call) {
         throw new Error("No call function available");
@@ -18810,26 +19707,26 @@ var ToolboxRoot = ({ info }) => {
     },
     [call, info.key]
   );
-  const handlers = (0, import_react42.useMemo)(
+  const handlers = (0, import_react50.useMemo)(
     () => ({
       handlers: info.handlers,
       callHandler
     }),
     [info.handlers, callHandler]
   );
-  const windowedTimecodeId = (0, import_react42.useMemo)(
+  const windowedTimecodeId = (0, import_react50.useMemo)(
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const root = (0, import_react42.useMemo)(
-    () => windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Layout, { modes: null, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  const root = (0, import_react50.useMemo)(
+    () => windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Layout, { modes: null, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Layout,
         {
           footer: true,
           modes: {
             license: {
-              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 License,
                 {
                   license: info.license,
@@ -18840,39 +19737,39 @@ var ToolboxRoot = ({ info }) => {
               title: STRINGS.license
             },
             settings: {
-              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Settings, { setWindowMode }),
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Settings, { setWindowMode }),
               icon: "settings",
               title: STRINGS.settings.title
             },
             debug: {
-              child: () => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
+              child: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
               icon: "bug_report",
               title: STRINGS.debugger
             }
           },
           licenseMode: "license",
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UpdateBanner, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(UpdateBanner, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               "div",
               {
                 className: "\n                  flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                  scrollbar-sigil\n                ",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     InputsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     GeneratorsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     OutputsSection,
                     {
                       setDialogMode,
@@ -18886,45 +19783,52 @@ var ToolboxRoot = ({ info }) => {
           ] })
         }
       ),
-      dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        InputSettingsDialog,
-        {
-          close: closeDialog,
-          input: dialogMode.section.input,
-          target: dialogMode.target
-        }
-      ),
-      dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        GeneratorSettingsDialog,
-        {
-          close: closeDialog,
-          generator: dialogMode.section.generator,
-          target: dialogMode.target
-        }
-      ),
-      dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        OutputSettingsDialog,
+      isDeleteDialogMode(dialogMode) ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        DeleteConfirmationDialog,
         {
-          close: closeDialog,
-          output: dialogMode.section.output,
-          target: dialogMode.target
+          dialogMode,
+          setDialogMode
         }
-      )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+        dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          InputSettingsDialog,
+          {
+            setDialogMode,
+            input: dialogMode.section.input,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          GeneratorSettingsDialog,
+          {
+            setDialogMode,
+            generator: dialogMode.section.generator,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          OutputSettingsDialog,
+          {
+            setDialogMode,
+            output: dialogMode.section.output,
+            target: dialogMode.target
+          }
+        )
+      ] })
     ] }),
     [
       assignToOutput,
       assignToOutputCallback,
-      closeDialog,
       dialogMode,
       windowedTimecodeId,
       info.license
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
 };
 
 // src/components/frontend/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var timecodeToolboxFrontendComponents = () => ({
   namespace: NAMESPACE,
   render: (info) => {
@@ -18933,9 +19837,9 @@ var timecodeToolboxFrontendComponents = () => ({
     }
     switch (info.component) {
       case "toolbox-root":
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ToolboxRoot, { info });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ToolboxRoot, { info });
       case "license-gate":
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LicenseGate, { info });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LicenseGate, { info });
     }
   }
 });
@@ -18943,10 +19847,11 @@ var startTimecodeToolboxServerFrontend = (browser) => {
   startSigilFrontend({
     browser,
     appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
+    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
   });
 };
 window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;
+window.createBrowserMediaSession = createBrowserMediaSession;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   startTimecodeToolboxServerFrontend,