@arcanewizards/timecode-toolbox 0.1.3 → 0.1.4

package/dist/entrypoint.js

@@ -25238,7 +25238,7 @@
     return t4;
   };
 
-  // ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+  // ../../packages/sigil/dist/chunk-LDUYBGRY.js
   var import_compiler_runtime4 = __toESM(require_compiler_runtime(), 1);
 
   // ../../packages/sigil/dist/chunk-BIY5HAXP.js
@@ -35386,7 +35386,7 @@
     return condition ? truthyClassName : falseyClassName;
   }
 
-  // ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+  // ../../packages/sigil/dist/chunk-LDUYBGRY.js
   var import_react11 = __toESM(require_react(), 1);
 
   // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
@@ -35425,7 +35425,7 @@
 `;
   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 = __toESM(require_react(), 1);
   var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
   var import_react13 = __toESM(require_react(), 1);
@@ -35486,8 +35486,9 @@
     touching,
     position,
     className,
-    primary
-  }) => cn(`sigil-control-button`, cnd(variant === "border", `sigil-control-button-variant-border`), cnd(variant === "large", `sigil-control-button-variant-large`), cnd(variant === "properties", `sigil-control-button-variant-properties`), cnd(variant === "table-row", `sigil-control-button-variant-table-row`), cnd(variant === "toolbar", `sigil-control-button-variant-toolbar`), cnd(variant === "titlebar", `sigil-control-button-variant-titlebar`), cnd(touching, `sigil-control-button-touching`), cnd(active, `sigil-control-button-active`), cnd(touching && active, `sigil-control-button-active-touching`), cnd(primary, `sigil-control-button-primary`), clsControlPosition(position), className);
+    primary,
+    destructive
+  }) => cn(`sigil-control-button`, cnd(variant === "border", `sigil-control-button-variant-border`), cnd(variant === "large", `sigil-control-button-variant-large`), cnd(variant === "properties", `sigil-control-button-variant-properties`), cnd(variant === "table-row", `sigil-control-button-variant-table-row`), cnd(variant === "toolbar", `sigil-control-button-variant-toolbar`), cnd(variant === "titlebar", `sigil-control-button-variant-titlebar`), cnd(touching, `sigil-control-button-touching`), cnd(active, `sigil-control-button-active`), cnd(touching && active, `sigil-control-button-active-touching`), cnd(primary, `sigil-control-button-primary`), cnd(destructive, `sigil-control-button-destructive`), clsControlPosition(position), className);
   var ControlButtonFrame = /* @__PURE__ */ (0, import_react12.forwardRef)(({
     children,
     className,
@@ -35501,6 +35502,7 @@
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", {
@@ -35514,6 +35516,7 @@
         touching,
         position,
         primary,
+        destructive,
         className
       }),
       children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", {
@@ -35629,7 +35632,7 @@
     subgrid,
     ...props
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", {
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("label", {
       ...props,
       ref,
       className: cn("flex items-center justify-end gap-0.6 p-0.6", clsControlPosition(position), cnd(nonMicro, "max-[550px]:hidden"), cnd(disabled, "opacity-50"), clsControlSubgridPosition(position, subgrid), className)
@@ -35661,9 +35664,12 @@
     children,
     className,
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ControlButtonGroup, {
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", {
     ref,
-    className: cn("control-grid-pos-row", className),
+    className: cn(`
+        flex items-stretch gap-1
+        [&>button]:grow
+      `, clsControlPosition("row"), className),
     ...props,
     children
   }));
@@ -35859,46 +35865,9 @@
     }
     return t1;
   };
-  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,
@@ -35906,11 +35875,11 @@
     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, {
         disabled,
@@ -35946,7 +35915,7 @@
       option: (option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", {
         className: "",
         style: {
-          color: `var(--sigil-usage-${option.value}-foreground)`
+          color: `var(--sigil-usage-${option.color}-foreground)`
         },
         children: option.label
       }),
@@ -35956,6 +35925,64 @@
       ...props
     });
   };
+  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 DialogTitle = /* @__PURE__ */ (0, import_react11.forwardRef)(({
     className,
@@ -37432,6 +37459,7 @@
   };
   var createDefaultBrowserContext = (browser) => {
     const defaults = {
+      appListenerChangesHandledExternally: false,
       openExternalLink: (url) => {
         window.open(url, "_blank", "noopener,noreferrer");
       },
@@ -37680,6 +37708,24 @@ Data Directory: ${system.dataDirectory}`
     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({
     type: zod_default.literal("host"),
@@ -37742,6 +37788,7 @@ Data Directory: ${system.dataDirectory}`
     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),
@@ -37757,8 +37804,8 @@ Data Directory: ${system.dataDirectory}`
   var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPACE;
 
   // src/components/frontend/toolbox/root.tsx
-  var import_compiler_runtime20 = __toESM(require_compiler_runtime());
-  var import_react43 = __toESM(require_react());
+  var import_compiler_runtime28 = __toESM(require_compiler_runtime());
+  var import_react51 = __toESM(require_react());
 
   // ../../packages/artnet/dist/chunk-J2HDMITA.js
   var ARTNET_PORT = 6454;
@@ -37803,7 +37850,9 @@ Data Directory: ${system.dataDirectory}`
       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`,
@@ -37826,17 +37875,37 @@ Data Directory: ${system.dataDirectory}`
         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",
@@ -39411,7 +39480,7 @@ Data Directory: ${system.dataDirectory}`
   var OutputSettingsDialog = ({
     target,
     output,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -39430,6 +39499,7 @@ Data Directory: ${system.dataDirectory}`
       },
       link: null
     });
+    const close = (0, import_react33.useCallback)(() => setDialogMode(null), [setDialogMode]);
     const updateSettings = (0, import_react33.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -39537,7 +39607,7 @@ Data Directory: ${system.dataDirectory}`
               commitChanges();
             }
           }
-        }), resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, {
+        }), target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, {
           children: [/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
@@ -39547,13 +39617,28 @@ Data Directory: ${system.dataDirectory}`
             variant: "large",
             children: "Add Output"
           })]
-        }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlDialogButtons, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
+        }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime45.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_runtime45.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
             children: "Close"
-          })
-        })]
+          })]
+        }) : null]
       })
     });
   };
@@ -40002,7 +40087,7 @@ Data Directory: ${system.dataDirectory}`
   var GeneratorSettingsDialog = ({
     target,
     generator,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -40015,6 +40100,7 @@ Data Directory: ${system.dataDirectory}`
         speed: 1
       }
     });
+    const close = (0, import_react34.useCallback)(() => setDialogMode(null), [setDialogMode]);
     const updateSettings = (0, import_react34.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -40102,7 +40188,7 @@ Data Directory: ${system.dataDirectory}`
         }), data.definition.type === "clock" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ClockSpecificSettings, {
           data: data.definition,
           updateSettings: updateDefinition
-        }) : null, resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ControlDialogButtons, {
+        }) : null, target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ControlDialogButtons, {
           children: [/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
@@ -40112,13 +40198,28 @@ Data Directory: ${system.dataDirectory}`
             variant: "large",
             children: "Add Generator"
           })]
-        }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ControlDialogButtons, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ControlButton, {
+        }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(ControlDialogButtons, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
             children: "Close"
-          })
-        })]
+          })]
+        }) : null]
       })
     });
   };
@@ -40624,7 +40725,7 @@ Data Directory: ${system.dataDirectory}`
   var InputSettingsDialog = ({
     target,
     input,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -40642,6 +40743,7 @@ Data Directory: ${system.dataDirectory}`
         iface: ""
       }
     });
+    const close = (0, import_react35.useCallback)(() => setDialogMode(null), [setDialogMode]);
     const updateSettings = (0, import_react35.useCallback)((change) => {
       if (target.type === "add") {
         setNewData(change);
@@ -40752,7 +40854,7 @@ Data Directory: ${system.dataDirectory}`
               commitChanges();
             }
           }
-        }), resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ControlDialogButtons, {
+        }), target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ControlDialogButtons, {
           children: [/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
@@ -40760,15 +40862,31 @@ Data Directory: ${system.dataDirectory}`
           }), /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
             onClick: addInput,
             variant: "large",
+            primary: true,
             children: "Add Input"
           })]
-        }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDialogButtons, {
-          children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
+        }) : target?.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(ControlDialogButtons, {
+          children: [/* @__PURE__ */ (0, import_jsx_runtime47.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_runtime47.jsx)(ControlButton, {
             onClick: close,
             variant: "large",
             children: "Close"
-          })
-        })]
+          })]
+        }) : null]
       })
     });
   };
@@ -41012,6 +41130,11 @@ Data Directory: ${system.dataDirectory}`
     };
   }
 
+  // src/components/frontend/toolbox/types.ts
+  var isDeleteDialogMode = (mode) => {
+    return mode?.target.type === "delete";
+  };
+
   // src/components/frontend/toolbox/settings.tsx
   var import_compiler_runtime13 = __toESM(require_compiler_runtime());
   var import_react38 = __toESM(require_react());
@@ -41207,8 +41330,179 @@ Data Directory: ${system.dataDirectory}`
   var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
     timeStyle: "medium"
   });
+  var AppPortConfig = () => {
+    const {
+      getNetworkInterfaces
+    } = (0, import_react38.useContext)(NetworkContext);
+    const [interfaces, setInterfaces] = (0, import_react38.useState)(null);
+    const refreshInterfaces = (0, import_react38.useCallback)(() => {
+      setInterfaces(null);
+      getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
+    }, [getNetworkInterfaces]);
+    (0, import_react38.useEffect)(() => {
+      refreshInterfaces();
+    }, [refreshInterfaces]);
+    const {
+      appListenerChangesHandledExternally
+    } = useBrowserContext();
+    const {
+      network,
+      config,
+      updateConfig
+    } = (0, import_react38.useContext)(ConfigContext);
+    const [nextPort, setNextPort] = (0, import_react38.useState)(null);
+    const [nextInterface, setNextInterface] = (0, import_react38.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_react38.useRef)(null);
+    const validatedPort = (0, import_react38.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_react38.useCallback)(() => {
+      if (validatedPort?.type === "invalid") {
+        return;
+      }
+      const newPort = validatedPort;
+      updateConfig((current) => {
+        const config_0 = {
+          ...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 (config_0.appListener?.interface) {
+          nextUrl.hostname = interfaces?.[config_0.appListener.interface]?.address ?? nextUrl.hostname;
+        }
+        const port_0 = config_0.appListener?.port ?? network.defaultPort;
+        nextUrl.port = (typeof port_0 === "number" ? port_0 : port_0.from).toString();
+        nextUrlRef.current = nextUrl;
+        return config_0;
+      });
+      setNextPort(null);
+      setNextInterface(null);
+    }, [interfaces, nextInterface, validatedPort, updateConfig, network.defaultPort]);
+    (0, import_react38.useEffect)(() => {
+      return () => {
+        if (!appListenerChangesHandledExternally && nextUrlRef.current) {
+          window.location.href = nextUrlRef.current.href;
+        }
+      };
+    }, [appListenerChangesHandledExternally]);
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlLabel, {
+        children: STRINGS.settings.network.appInterfaceLabel
+      }), /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlSelect, {
+        value: iface,
+        options: [{
+          label: STRINGS.settings.network.anyInterface,
+          value: "any"
+        }, ...!interfaces ? [] : Object.values(interfaces).map((iface_0) => ({
+          label: `${iface_0.name} (${iface_0.address})`,
+          value: `specific:${iface_0.name}`
+        }))],
+        onChange: setNextInterface,
+        position: "first",
+        variant: "large",
+        triggerClassName: cn("text-sigil-control")
+      }), iface && interfaces?.[iface]?.internal && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.internalInterfaceUsed(iface)
+      }), /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlButton, {
+        onClick: refreshInterfaces,
+        title: "Refresh Interfaces",
+        position: "extra",
+        variant: "large",
+        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(Icon2, {
+          icon: "refresh",
+          className: "text-arcane-normal"
+        })
+      }), /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlLabel, {
+        children: STRINGS.settings.network.appPortLabel
+      }), network.envPort ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        position: "both",
+        children: STRINGS.settings.network.appPortEnvOverride(network.envPort)
+      }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlInput, {
+          value: currentPortString,
+          onChange: setNextPort,
+          placeholder: STRINGS.settings.network.defaultPort(portString(network.defaultPort))
+        }), validatedPort.type === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+          position: "second",
+          className: "text-sigil-error-foreground",
+          children: validatedPort.error
+        })]
+      }), /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlButton, {
+        onClick: saveNetworkConfig,
+        variant: "large",
+        position: "first",
+        disabled: !canSave,
+        children: STRINGS.settings.network.saveChanges
+      }), hasNetworkChanges && appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        position: "second",
+        children: STRINGS.settings.network.saveWarning.external
+      }), hasNetworkChanges && !appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ControlDetails, {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.saveWarning.internal
+      })]
+    });
+  };
   var Settings = (t0) => {
-    const $ = (0, import_compiler_runtime13.c)(29);
+    const $ = (0, import_compiler_runtime13.c)(30);
     const {
       setWindowMode
     } = t0;
@@ -41356,34 +41650,41 @@ Data Directory: ${system.dataDirectory}`
       t14 = $[21];
     }
     let t15;
-    if ($[22] !== t12 || $[23] !== t14 || $[24] !== t8) {
-      t15 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {
+    if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+      t15 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(AppPortConfig, {});
+      $[22] = t15;
+    } else {
+      t15 = $[22];
+    }
+    let t16;
+    if ($[23] !== t12 || $[24] !== t14 || $[25] !== t8) {
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", {
         className: "\n          grow basis-0 overflow-y-auto bg-sigil-bg-light scrollbar-sigil\n        ",
         children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
           className: "control-grid-large",
-          children: [t6, t8, t9, t12, t13, t14]
+          children: [t6, t8, t9, t12, t13, t14, t15]
         })
       });
-      $[22] = t12;
-      $[23] = t14;
-      $[24] = t8;
-      $[25] = t15;
+      $[23] = t12;
+      $[24] = t14;
+      $[25] = t8;
+      $[26] = t16;
     } else {
-      t15 = $[25];
+      t16 = $[26];
     }
-    let t16;
-    if ($[26] !== t15 || $[27] !== t5) {
-      t16 = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
+    let t17;
+    if ($[27] !== t16 || $[28] !== t5) {
+      t17 = /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", {
         className: "flex grow flex-col",
-        children: [t5, t15]
+        children: [t5, t16]
       });
-      $[26] = t15;
-      $[27] = t5;
-      $[28] = t16;
+      $[27] = t16;
+      $[28] = t5;
+      $[29] = t17;
     } else {
-      t16 = $[28];
+      t17 = $[29];
     }
-    return t16;
+    return t17;
   };
 
   // src/components/frontend/toolbox/license.tsx
@@ -42019,7 +42320,7 @@ Data Directory: ${system.dataDirectory}`
     let t7;
     if ($[17] !== t3 || $[18] !== t5 || $[19] !== t6) {
       t7 = /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", {
-        className: "flex h-screen flex-col",
+        className: "flex h-dvh flex-col",
         children: [t3, t5, t6]
       });
       $[17] = t3;
@@ -42369,94 +42670,1593 @@ Data Directory: ${system.dataDirectory}`
     return null;
   };
 
-  // src/components/frontend/toolbox/root.tsx
-  var import_jsx_runtime55 = __toESM(require_jsx_runtime());
-  var ToolboxRoot = (t0) => {
-    const $ = (0, import_compiler_runtime20.c)(43);
-    const {
-      info
-    } = t0;
-    const {
-      config
-    } = info;
-    const {
-      sendMessage,
-      call
-    } = (0, import_react43.useContext)(StageContext);
-    const [dialogMode, setDialogMode] = (0, import_react43.useState)(null);
-    const [assignToOutput, setAssignToOutput] = (0, import_react43.useState)(null);
-    let t1;
-    let t2;
-    if ($[0] !== assignToOutput) {
-      t1 = () => {
-        if (assignToOutput) {
-          const onEscape = (e) => {
-            if (e.key === "Escape") {
-              setAssignToOutput(null);
-            }
-          };
-          window.addEventListener("keydown", onEscape);
-          return () => {
-            window.removeEventListener("keydown", onEscape);
-          };
-        }
-      };
-      t2 = [assignToOutput];
-      $[0] = assignToOutput;
-      $[1] = t1;
-      $[2] = t2;
+  // ../../packages/sigil/src/frontend/controls/dialogs.tsx
+  var import_compiler_runtime27 = __toESM(require_compiler_runtime(), 1);
+  var import_react50 = __toESM(require_react(), 1);
+
+  // ../../packages/sigil/src/frontend/dialogs.tsx
+  var import_compiler_runtime26 = __toESM(require_compiler_runtime(), 1);
+  var import_react49 = __toESM(require_react(), 1);
+
+  // ../../packages/sigil/src/frontend/controls/buttons.tsx
+  var import_compiler_runtime22 = __toESM(require_compiler_runtime(), 1);
+  var import_react45 = __toESM(require_react(), 1);
+
+  // ../../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_compiler_runtime20 = __toESM(require_compiler_runtime(), 1);
+  var import_react43 = __toESM(require_react(), 1);
+  var import_jsx_runtime55 = __toESM(require_jsx_runtime(), 1);
+  var Content4 = /* @__PURE__ */ (0, import_react43.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime20.c)(9);
+    let className;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        className,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = props;
     } else {
-      t1 = $[1];
-      t2 = $[2];
+      className = $[1];
+      props = $[2];
     }
-    (0, import_react43.useEffect)(t1, t2);
-    let t3;
-    if ($[3] !== config || $[4] !== info.key || $[5] !== sendMessage) {
-      t3 = (change) => {
-        const diff = diffJson(config, change(config));
-        sendMessage?.({
-          type: "component-message",
-          namespace: "timecode-toolbox",
-          component: "toolbox-root",
-          componentKey: info.key,
-          action: "update-config",
-          diff
-        });
-      };
-      $[3] = config;
-      $[4] = info.key;
-      $[5] = sendMessage;
-      $[6] = t3;
+    let t1;
+    if ($[3] !== className) {
+      t1 = 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);
+      $[3] = className;
+      $[4] = t1;
     } else {
-      t3 = $[6];
+      t1 = $[4];
     }
-    const updateConfig = t3;
-    let t4;
-    let t5;
-    if ($[7] !== config || $[8] !== updateConfig) {
-      t5 = {
-        config,
-        updateConfig
+    let t2;
+    if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(dist_exports4.Content, {
+        ...props,
+        ref,
+        className: t1
+      });
+      $[5] = props;
+      $[6] = ref;
+      $[7] = t1;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    return t2;
+  });
+  Content4.displayName = "Content";
+  var Arrow4 = /* @__PURE__ */ (0, import_react43.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime20.c)(9);
+    let className;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        className,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = props;
+    } else {
+      className = $[1];
+      props = $[2];
+    }
+    let t1;
+    if ($[3] !== className) {
+      t1 = cn("fill-sigil-usage-hint-background drop-shadow-sigil-tooltip-arrow", className);
+      $[3] = className;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(dist_exports4.Arrow, {
+        ...props,
+        ref,
+        className: t1
+      });
+      $[5] = props;
+      $[6] = ref;
+      $[7] = t1;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    return t2;
+  });
+  Arrow4.displayName = "Arrow";
+  var TooltipBoundaryContext2 = /* @__PURE__ */ (0, import_react43.createContext)(null);
+  var TooltipWrapper2 = (t0) => {
+    const $ = (0, import_compiler_runtime20.c)(12);
+    const {
+      tooltip,
+      children,
+      side: t1
+    } = t0;
+    const side = t1 === void 0 ? "top" : t1;
+    const boundary = (0, import_react43.useContext)(TooltipBoundaryContext2);
+    if (!tooltip) {
+      return children;
+    }
+    let t2;
+    if ($[0] !== children) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(dist_exports4.Trigger, {
+        asChild: true,
+        children
+      });
+      $[0] = children;
+      $[1] = t2;
+    } else {
+      t2 = $[1];
+    }
+    let t3;
+    if ($[2] !== boundary) {
+      t3 = boundary ? [boundary] : [];
+      $[2] = boundary;
+      $[3] = t3;
+    } else {
+      t3 = $[3];
+    }
+    let t4;
+    if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Arrow4, {});
+      $[4] = t4;
+    } else {
+      t4 = $[4];
+    }
+    let t5;
+    if ($[5] !== side || $[6] !== t3 || $[7] !== tooltip) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(Content4, {
+        side,
+        align: "center",
+        sideOffset: 5,
+        alignOffset: 0,
+        collisionBoundary: t3,
+        collisionPadding: 10,
+        children: [t4, tooltip]
+      });
+      $[5] = side;
+      $[6] = t3;
+      $[7] = tooltip;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
+    }
+    let t6;
+    if ($[9] !== t2 || $[10] !== t5) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(dist_exports4.Root, {
+        children: [t2, t5]
+      });
+      $[9] = t2;
+      $[10] = t5;
+      $[11] = t6;
+    } else {
+      t6 = $[11];
+    }
+    return t6;
+  };
+
+  // ../../packages/sigil/src/frontend/input.ts
+  var import_compiler_runtime21 = __toESM(require_compiler_runtime(), 1);
+  var import_react44 = __toESM(require_react(), 1);
+  var usePressable3 = (click) => {
+    const $ = (0, import_compiler_runtime21.c)(11);
+    const [touching, setTouching] = (0, import_react44.useState)(false);
+    let t0;
+    let t1;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t0 = () => {
+        setTouching(true);
+      };
+      t1 = () => {
+        setTouching(false);
+      };
+      $[0] = t0;
+      $[1] = t1;
+    } else {
+      t0 = $[0];
+      t1 = $[1];
+    }
+    let t2;
+    if ($[2] !== click || $[3] !== touching) {
+      t2 = (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          click(event);
+        }
+      };
+      $[2] = click;
+      $[3] = touching;
+      $[4] = t2;
+    } else {
+      t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== click || $[6] !== t2) {
+      t3 = {
+        onClick: click,
+        onTouchStart: t0,
+        onTouchMove: t1,
+        onTouchEnd: t2
+      };
+      $[5] = click;
+      $[6] = t2;
+      $[7] = t3;
+    } else {
+      t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== t3 || $[9] !== touching) {
+      t4 = {
+        touching,
+        handlers: t3
+      };
+      $[8] = t3;
+      $[9] = touching;
+      $[10] = t4;
+    } else {
+      t4 = $[10];
+    }
+    return t4;
+  };
+  var useLongPressable3 = (t0) => {
+    const $ = (0, import_compiler_runtime21.c)(18);
+    const {
+      onPress,
+      onRelease
+    } = t0;
+    const [touching, setTouching] = (0, import_react44.useState)(false);
+    let t1;
+    let t2;
+    let t3;
+    if ($[0] !== onPress) {
+      t2 = () => {
+        setTouching(true);
+        onPress();
+      };
+      t3 = () => {
+        setTouching(true);
+        onPress();
+      };
+      $[0] = onPress;
+      $[1] = t2;
+      $[2] = t3;
+    } else {
+      t2 = $[1];
+      t3 = $[2];
+    }
+    let t4;
+    let t5;
+    if ($[3] !== onRelease) {
+      t4 = () => {
+        setTouching(false);
+        onRelease();
+      };
+      t5 = () => {
+        setTouching(false);
+        onRelease();
+      };
+      $[3] = onRelease;
+      $[4] = t4;
+      $[5] = t5;
+    } else {
+      t4 = $[4];
+      t5 = $[5];
+    }
+    let t6;
+    if ($[6] !== onRelease || $[7] !== touching) {
+      t6 = (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          onRelease();
+        }
+      };
+      $[6] = onRelease;
+      $[7] = touching;
+      $[8] = t6;
+    } else {
+      t6 = $[8];
+    }
+    let t7;
+    if ($[9] !== t2 || $[10] !== t3 || $[11] !== t4 || $[12] !== t5 || $[13] !== t6) {
+      t7 = {
+        onTouchStart: t2,
+        onMouseDown: t3,
+        onMouseUp: t4,
+        onTouchMove: t5,
+        onTouchEnd: t6
+      };
+      $[9] = t2;
+      $[10] = t3;
+      $[11] = t4;
+      $[12] = t5;
+      $[13] = t6;
+      $[14] = t7;
+    } else {
+      t7 = $[14];
+    }
+    let t8;
+    if ($[15] !== t7 || $[16] !== touching) {
+      t8 = {
+        touching,
+        handlers: t7
+      };
+      $[15] = t7;
+      $[16] = touching;
+      $[17] = t8;
+    } else {
+      t8 = $[17];
+    }
+    t1 = t8;
+    return t1;
+  };
+
+  // ../../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_runtime56 = __toESM(require_jsx_runtime(), 1);
+  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 = /* @__PURE__ */ (0, import_react45.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime22.c)(40);
+    let active;
+    let children;
+    let className;
+    let destructive;
+    let disabled;
+    let icon;
+    let position;
+    let primary;
+    let props;
+    let t1;
+    let title;
+    let tooltipSide;
+    let touching;
+    let type;
+    if ($[0] !== t0) {
+      ({
+        children,
+        className,
+        type,
+        variant: t1,
+        icon,
+        active,
+        touching,
+        disabled,
+        title,
+        tooltipSide,
+        position,
+        primary,
+        destructive,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = active;
+      $[2] = children;
+      $[3] = className;
+      $[4] = destructive;
+      $[5] = disabled;
+      $[6] = icon;
+      $[7] = position;
+      $[8] = primary;
+      $[9] = props;
+      $[10] = t1;
+      $[11] = title;
+      $[12] = tooltipSide;
+      $[13] = touching;
+      $[14] = type;
+    } else {
+      active = $[1];
+      children = $[2];
+      className = $[3];
+      destructive = $[4];
+      disabled = $[5];
+      icon = $[6];
+      position = $[7];
+      primary = $[8];
+      props = $[9];
+      t1 = $[10];
+      title = $[11];
+      tooltipSide = $[12];
+      touching = $[13];
+      type = $[14];
+    }
+    const variant = t1 === void 0 ? "toolbar" : t1;
+    const t2 = type ?? "button";
+    let t3;
+    if ($[15] !== active || $[16] !== className || $[17] !== destructive || $[18] !== position || $[19] !== primary || $[20] !== touching || $[21] !== variant) {
+      t3 = clsControlButton2({
+        variant,
+        active,
+        touching,
+        position,
+        primary,
+        destructive,
+        className
+      });
+      $[15] = active;
+      $[16] = className;
+      $[17] = destructive;
+      $[18] = position;
+      $[19] = primary;
+      $[20] = touching;
+      $[21] = variant;
+      $[22] = t3;
+    } else {
+      t3 = $[22];
+    }
+    let t4;
+    if ($[23] !== children || $[24] !== icon) {
+      t4 = icon && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon2, {
+        icon,
+        className: cn(cnd2(children, "text-[120%]", "text-[150%]"))
+      });
+      $[23] = children;
+      $[24] = icon;
+      $[25] = t4;
+    } else {
+      t4 = $[25];
+    }
+    let t5;
+    if ($[26] !== children || $[27] !== t4) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", {
+        children: [t4, children]
+      });
+      $[26] = children;
+      $[27] = t4;
+      $[28] = t5;
+    } else {
+      t5 = $[28];
+    }
+    let t6;
+    if ($[29] !== disabled || $[30] !== props || $[31] !== ref || $[32] !== t2 || $[33] !== t3 || $[34] !== t5) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("button", {
+        ...props,
+        ref,
+        type: t2,
+        disabled,
+        className: t3,
+        children: t5
+      });
+      $[29] = disabled;
+      $[30] = props;
+      $[31] = ref;
+      $[32] = t2;
+      $[33] = t3;
+      $[34] = t5;
+      $[35] = t6;
+    } else {
+      t6 = $[35];
+    }
+    const btn = t6;
+    if (!title) {
+      return btn;
+    }
+    let t7;
+    if ($[36] !== btn || $[37] !== title || $[38] !== tooltipSide) {
+      t7 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(TooltipWrapper2, {
+        tooltip: title,
+        side: tooltipSide,
+        children: btn
+      });
+      $[36] = btn;
+      $[37] = title;
+      $[38] = tooltipSide;
+      $[39] = t7;
+    } else {
+      t7 = $[39];
+    }
+    return t7;
+  });
+  ControlButtonFrame2.displayName = "ControlButtonFrame";
+  var ControlButton2 = /* @__PURE__ */ (0, import_react45.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime22.c)(13);
+    let disabled;
+    let onClick;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        onClick,
+        disabled,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = disabled;
+      $[2] = onClick;
+      $[3] = props;
+    } else {
+      disabled = $[1];
+      onClick = $[2];
+      props = $[3];
+    }
+    const {
+      handlers,
+      touching
+    } = usePressable3(onClick);
+    let t1;
+    if ($[4] !== disabled || $[5] !== handlers) {
+      t1 = !disabled ? handlers : {};
+      $[4] = disabled;
+      $[5] = handlers;
+      $[6] = t1;
+    } else {
+      t1 = $[6];
+    }
+    let t2;
+    if ($[7] !== disabled || $[8] !== props || $[9] !== ref || $[10] !== t1 || $[11] !== touching) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ControlButtonFrame2, {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...t1
+      });
+      $[7] = disabled;
+      $[8] = props;
+      $[9] = ref;
+      $[10] = t1;
+      $[11] = touching;
+      $[12] = t2;
+    } else {
+      t2 = $[12];
+    }
+    return t2;
+  });
+  ControlButton2.displayName = "ControlButton";
+  var CheckboxControlButton2 = /* @__PURE__ */ (0, import_react45.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime22.c)(12);
+    let active;
+    let label;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        active,
+        label,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = active;
+      $[2] = label;
+      $[3] = props;
+    } else {
+      active = $[1];
+      label = $[2];
+      props = $[3];
+    }
+    const t1 = active ? "check_box" : "check_box_outline_blank";
+    let t2;
+    if ($[4] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Icon2, {
+        icon: t1
+      });
+      $[4] = t1;
+      $[5] = t2;
+    } else {
+      t2 = $[5];
+    }
+    let t3;
+    if ($[6] !== active || $[7] !== label || $[8] !== props || $[9] !== ref || $[10] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(ControlButton2, {
+        ...props,
+        ref,
+        active,
+        children: [t2, label]
+      });
+      $[6] = active;
+      $[7] = label;
+      $[8] = props;
+      $[9] = ref;
+      $[10] = t2;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    return t3;
+  });
+  CheckboxControlButton2.displayName = "CheckboxControlButton";
+  var LongPressableControlButton2 = /* @__PURE__ */ (0, import_react45.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime22.c)(18);
+    let active;
+    let disabled;
+    let onPress;
+    let onRelease;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        active,
+        disabled,
+        onPress,
+        onRelease,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = active;
+      $[2] = disabled;
+      $[3] = onPress;
+      $[4] = onRelease;
+      $[5] = props;
+    } else {
+      active = $[1];
+      disabled = $[2];
+      onPress = $[3];
+      onRelease = $[4];
+      props = $[5];
+    }
+    let t1;
+    if ($[6] !== onPress || $[7] !== onRelease) {
+      t1 = {
+        onPress,
+        onRelease
+      };
+      $[6] = onPress;
+      $[7] = onRelease;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    const {
+      handlers,
+      touching
+    } = useLongPressable3(t1);
+    const t2 = active || touching;
+    let t3;
+    if ($[9] !== disabled || $[10] !== handlers) {
+      t3 = !disabled ? handlers : {};
+      $[9] = disabled;
+      $[10] = handlers;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    let t4;
+    if ($[12] !== disabled || $[13] !== props || $[14] !== ref || $[15] !== t2 || $[16] !== t3) {
+      t4 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ControlButtonFrame2, {
+        ...props,
+        ref,
+        active: t2,
+        disabled,
+        ...t3
+      });
+      $[12] = disabled;
+      $[13] = props;
+      $[14] = ref;
+      $[15] = t2;
+      $[16] = t3;
+      $[17] = t4;
+    } else {
+      t4 = $[17];
+    }
+    return t4;
+  });
+  LongPressableControlButton2.displayName = "LongPressableControlButton";
+  var ControlButtonGroup2 = /* @__PURE__ */ (0, import_react45.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime22.c)(13);
+    let children;
+    let className;
+    let position;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        children,
+        className,
+        position,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = className;
+      $[3] = position;
+      $[4] = props;
+    } else {
+      children = $[1];
+      className = $[2];
+      position = $[3];
+      props = $[4];
+    }
+    let t1;
+    if ($[5] !== className || $[6] !== position) {
+      t1 = cn(`
+        flex items-stretch gap-sigil-control-gap
+        [&>button]:grow
+      `, clsControlPosition2(position), className);
+      $[5] = className;
+      $[6] = position;
+      $[7] = t1;
+    } else {
+      t1 = $[7];
+    }
+    let t2;
+    if ($[8] !== children || $[9] !== props || $[10] !== ref || $[11] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", {
+        ...props,
+        ref,
+        className: t1,
+        children
+      });
+      $[8] = children;
+      $[9] = props;
+      $[10] = ref;
+      $[11] = t1;
+      $[12] = t2;
+    } else {
+      t2 = $[12];
+    }
+    return t2;
+  });
+  ControlButtonGroup2.displayName = "ControlButtonGroup";
+
+  // ../../packages/sigil/src/frontend/controls/content.tsx
+  var import_compiler_runtime23 = __toESM(require_compiler_runtime(), 1);
+  var import_react46 = __toESM(require_react(), 1);
+  var import_jsx_runtime57 = __toESM(require_jsx_runtime(), 1);
+  var ControlParagraph2 = /* @__PURE__ */ (0, import_react46.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime23.c)(13);
+    let className;
+    let mode;
+    let props;
+    let t1;
+    if ($[0] !== t0) {
+      ({
+        className,
+        mode,
+        position: t1,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = mode;
+      $[3] = props;
+      $[4] = t1;
+    } else {
+      className = $[1];
+      mode = $[2];
+      props = $[3];
+      t1 = $[4];
+    }
+    const position = t1 === void 0 ? "all" : t1;
+    let t2;
+    if ($[5] !== className || $[6] !== mode || $[7] !== position) {
+      t2 = 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);
+      $[5] = className;
+      $[6] = mode;
+      $[7] = position;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== props || $[10] !== ref || $[11] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", {
+        ...props,
+        ref,
+        className: t2
+      });
+      $[9] = props;
+      $[10] = ref;
+      $[11] = t2;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    return t3;
+  });
+  ControlParagraph2.displayName = "ControlParagraph";
+  var ControlLabel2 = /* @__PURE__ */ (0, import_react46.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime23.c)(17);
+    let className;
+    let disabled;
+    let nonMicro;
+    let props;
+    let subgrid;
+    let t1;
+    if ($[0] !== t0) {
+      ({
+        className,
+        disabled,
+        nonMicro,
+        position: t1,
+        subgrid,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = disabled;
+      $[3] = nonMicro;
+      $[4] = props;
+      $[5] = subgrid;
+      $[6] = t1;
+    } else {
+      className = $[1];
+      disabled = $[2];
+      nonMicro = $[3];
+      props = $[4];
+      subgrid = $[5];
+      t1 = $[6];
+    }
+    const position = t1 === void 0 ? "label" : t1;
+    let t2;
+    if ($[7] !== className || $[8] !== disabled || $[9] !== nonMicro || $[10] !== position || $[11] !== subgrid) {
+      t2 = 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);
+      $[7] = className;
+      $[8] = disabled;
+      $[9] = nonMicro;
+      $[10] = position;
+      $[11] = subgrid;
+      $[12] = t2;
+    } else {
+      t2 = $[12];
+    }
+    let t3;
+    if ($[13] !== props || $[14] !== ref || $[15] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("label", {
+        ...props,
+        ref,
+        className: t2
+      });
+      $[13] = props;
+      $[14] = ref;
+      $[15] = t2;
+      $[16] = t3;
+    } else {
+      t3 = $[16];
+    }
+    return t3;
+  });
+  ControlLabel2.displayName = "ControlLabel";
+  var ControlDetails2 = /* @__PURE__ */ (0, import_react46.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime23.c)(13);
+    let align;
+    let className;
+    let props;
+    let t1;
+    if ($[0] !== t0) {
+      ({
+        align,
+        className,
+        position: t1,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = align;
+      $[2] = className;
+      $[3] = props;
+      $[4] = t1;
+    } else {
+      align = $[1];
+      className = $[2];
+      props = $[3];
+      t1 = $[4];
+    }
+    const position = t1 === void 0 ? "all" : t1;
+    let t2;
+    if ($[5] !== align || $[6] !== className || $[7] !== position) {
+      t2 = 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);
+      $[5] = align;
+      $[6] = className;
+      $[7] = position;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== props || $[10] !== ref || $[11] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", {
+        ...props,
+        ref,
+        className: t2
+      });
+      $[9] = props;
+      $[10] = ref;
+      $[11] = t2;
+      $[12] = t3;
+    } else {
+      t3 = $[12];
+    }
+    return t3;
+  });
+  ControlDetails2.displayName = "ControlDetails";
+  var InputSpanningTitle2 = /* @__PURE__ */ (0, import_react46.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime23.c)(11);
+    let className;
+    let props;
+    let t1;
+    if ($[0] !== t0) {
+      ({
+        className,
+        position: t1,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = props;
+      $[3] = t1;
+    } else {
+      className = $[1];
+      props = $[2];
+      t1 = $[3];
+    }
+    const position = t1 === void 0 ? "row" : t1;
+    let t2;
+    if ($[4] !== className || $[5] !== position) {
+      t2 = cn("truncate p-0.6 text-center text-[0.8rem] font-bold", clsControlPosition2(position), className);
+      $[4] = className;
+      $[5] = position;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    let t3;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", {
+        ...props,
+        ref,
+        className: t2
+      });
+      $[7] = props;
+      $[8] = ref;
+      $[9] = t2;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    return t3;
+  });
+  InputSpanningTitle2.displayName = "InputSpanningTitle";
+
+  // ../../packages/sigil/src/frontend/controls/input.tsx
+  var import_compiler_runtime24 = __toESM(require_compiler_runtime(), 1);
+  var import_react47 = __toESM(require_react(), 1);
+  var import_jsx_runtime58 = __toESM(require_jsx_runtime(), 1);
+
+  // ../../packages/sigil/src/frontend/controls/select.tsx
+  var import_compiler_runtime25 = __toESM(require_compiler_runtime(), 1);
+  var import_react48 = __toESM(require_react(), 1);
+  var import_jsx_runtime59 = __toESM(require_jsx_runtime(), 1);
+  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_runtime60 = __toESM(require_jsx_runtime(), 1);
+  var isDarkDialog2 = (variant) => variant === "dark" || variant === "dark-compact";
+  var DialogTitle2 = /* @__PURE__ */ (0, import_react49.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime26.c)(11);
+    let className;
+    let props;
+    let t1;
+    if ($[0] !== t0) {
+      ({
+        className,
+        variant: t1,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = props;
+      $[3] = t1;
+    } else {
+      className = $[1];
+      props = $[2];
+      t1 = $[3];
+    }
+    const variant = t1 === void 0 ? "light" : t1;
+    let t2;
+    if ($[4] !== className || $[5] !== variant) {
+      t2 = 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);
+      $[4] = className;
+      $[5] = variant;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    let t3;
+    if ($[7] !== props || $[8] !== ref || $[9] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", {
+        ...props,
+        ref,
+        className: t2
+      });
+      $[7] = props;
+      $[8] = ref;
+      $[9] = t2;
+      $[10] = t3;
+    } else {
+      t3 = $[10];
+    }
+    return t3;
+  });
+  DialogTitle2.displayName = "DialogTitle";
+  var DialogButtons2 = /* @__PURE__ */ (0, import_react49.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime26.c)(9);
+    let className;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        className,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = className;
+      $[2] = props;
+    } else {
+      className = $[1];
+      props = $[2];
+    }
+    let t1;
+    if ($[3] !== className) {
+      t1 = cn("mt-arcane flex justify-end gap-0.6", className);
+      $[3] = className;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", {
+        ...props,
+        ref,
+        className: t1
+      });
+      $[5] = props;
+      $[6] = ref;
+      $[7] = t1;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    return t2;
+  });
+  DialogButtons2.displayName = "DialogButtons";
+  var Dialog2 = (t0) => {
+    const $ = (0, import_compiler_runtime26.c)(29);
+    const {
+      children,
+      dialogClosed,
+      closable: t1,
+      title,
+      variant: t2
+    } = t0;
+    const closable = t1 === void 0 ? true : t1;
+    const variant = t2 === void 0 ? "light" : t2;
+    const [dialogRef, setDialogRef] = (0, import_react49.useState)(null);
+    let t3;
+    let t4;
+    if ($[0] !== dialogRef) {
+      t3 = () => {
+        if (!dialogRef) {
+          return;
+        }
+        dialogRef.showModal();
+      };
+      t4 = [dialogRef];
+      $[0] = dialogRef;
+      $[1] = t3;
+      $[2] = t4;
+    } else {
+      t3 = $[1];
+      t4 = $[2];
+    }
+    (0, import_react49.useEffect)(t3, t4);
+    let t5;
+    if ($[3] !== dialogRef) {
+      t5 = () => dialogRef?.close();
+      $[3] = dialogRef;
+      $[4] = t5;
+    } else {
+      t5 = $[4];
+    }
+    const close = t5;
+    let t6;
+    if ($[5] !== closable || $[6] !== dialogClosed) {
+      t6 = (event) => {
+        if (closable) {
+          dialogClosed();
+          return;
+        }
+        event.preventDefault();
+        event.currentTarget.showModal();
+      };
+      $[5] = closable;
+      $[6] = dialogClosed;
+      $[7] = t6;
+    } else {
+      t6 = $[7];
+    }
+    const onClose = t6;
+    let t7;
+    if ($[8] !== close) {
+      t7 = (event_0) => {
+        if (event_0.target === event_0.currentTarget) {
+          close();
+        }
+      };
+      $[8] = close;
+      $[9] = t7;
+    } else {
+      t7 = $[9];
+    }
+    const onMouseDown = t7;
+    let t8;
+    if ($[10] !== variant) {
+      t8 = 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"));
+      $[10] = variant;
+      $[11] = t8;
+    } else {
+      t8 = $[11];
+    }
+    let t9;
+    if ($[12] !== title || $[13] !== variant) {
+      t9 = title && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(DialogTitle2, {
+        variant,
+        children: title
+      });
+      $[12] = title;
+      $[13] = variant;
+      $[14] = t9;
+    } else {
+      t9 = $[14];
+    }
+    const t10 = variant === "light-compact" || variant === "dark-compact";
+    let t11;
+    if ($[15] !== t10 || $[16] !== variant) {
+      t11 = cn("text-sigil-foreground", cnd2(t10, "p-0"), cnd2(variant !== "light-compact" && variant !== "dark-compact", "p-arcane"));
+      $[15] = t10;
+      $[16] = variant;
+      $[17] = t11;
+    } else {
+      t11 = $[17];
+    }
+    let t12;
+    if ($[18] !== children || $[19] !== t11) {
+      t12 = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", {
+        className: t11,
+        children
+      });
+      $[18] = children;
+      $[19] = t11;
+      $[20] = t12;
+    } else {
+      t12 = $[20];
+    }
+    let t13;
+    if ($[21] !== t12 || $[22] !== t9) {
+      t13 = /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", {
+        className: "border border-sigil-border",
+        children: [t9, t12]
+      });
+      $[21] = t12;
+      $[22] = t9;
+      $[23] = t13;
+    } else {
+      t13 = $[23];
+    }
+    let t14;
+    if ($[24] !== onClose || $[25] !== onMouseDown || $[26] !== t13 || $[27] !== t8) {
+      t14 = /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("dialog", {
+        ref: setDialogRef,
+        onMouseDown,
+        onClose,
+        className: t8,
+        children: t13
+      });
+      $[24] = onClose;
+      $[25] = onMouseDown;
+      $[26] = t13;
+      $[27] = t8;
+      $[28] = t14;
+    } else {
+      t14 = $[28];
+    }
+    return t14;
+  };
+
+  // ../../packages/sigil/src/frontend/controls/dialogs.tsx
+  var import_jsx_runtime61 = __toESM(require_jsx_runtime(), 1);
+  var ControlDialogButtons2 = /* @__PURE__ */ (0, import_react50.forwardRef)((t0, ref) => {
+    const $ = (0, import_compiler_runtime27.c)(11);
+    let children;
+    let className;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        children,
+        className,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = className;
+      $[3] = props;
+    } else {
+      children = $[1];
+      className = $[2];
+      props = $[3];
+    }
+    let t1;
+    if ($[4] !== className) {
+      t1 = cn(`
+        flex items-stretch gap-1
+        [&>button]:grow
+      `, clsControlPosition2("row"), className);
+      $[4] = className;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    let t2;
+    if ($[6] !== children || $[7] !== props || $[8] !== ref || $[9] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", {
+        ref,
+        className: t1,
+        ...props,
+        children
+      });
+      $[6] = children;
+      $[7] = props;
+      $[8] = ref;
+      $[9] = t1;
+      $[10] = t2;
+    } else {
+      t2 = $[10];
+    }
+    return t2;
+  });
+  var ControlDialog2 = (t0) => {
+    const $ = (0, import_compiler_runtime27.c)(12);
+    let children;
+    let large;
+    let props;
+    if ($[0] !== t0) {
+      ({
+        children,
+        large,
+        ...props
+      } = t0);
+      $[0] = t0;
+      $[1] = children;
+      $[2] = large;
+      $[3] = props;
+    } else {
+      children = $[1];
+      large = $[2];
+      props = $[3];
+    }
+    let t1;
+    if ($[4] !== large) {
+      t1 = cn("gap-1 bg-sigil-bg-dark select-none", cnd2(large, "control-grid-large", "control-grid"));
+      $[4] = large;
+      $[5] = t1;
+    } else {
+      t1 = $[5];
+    }
+    let t2;
+    if ($[6] !== children || $[7] !== t1) {
+      t2 = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", {
+        className: t1,
+        children
+      });
+      $[6] = children;
+      $[7] = t1;
+      $[8] = t2;
+    } else {
+      t2 = $[8];
+    }
+    let t3;
+    if ($[9] !== props || $[10] !== t2) {
+      t3 = /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Dialog2, {
+        ...props,
+        variant: "dark",
+        children: t2
+      });
+      $[9] = props;
+      $[10] = t2;
+      $[11] = t3;
+    } else {
+      t3 = $[11];
+    }
+    return t3;
+  };
+
+  // src/components/frontend/toolbox/root.tsx
+  var import_jsx_runtime62 = __toESM(require_jsx_runtime());
+  var DeleteConfirmationDialog = (t0) => {
+    const $ = (0, import_compiler_runtime28.c)(21);
+    const {
+      dialogMode,
+      setDialogMode
+    } = t0;
+    const {
+      updateConfig
+    } = (0, import_react51.useContext)(ConfigContext);
+    let t1;
+    if ($[0] !== dialogMode.section.type || $[1] !== dialogMode.target || $[2] !== setDialogMode || $[3] !== updateConfig) {
+      t1 = () => {
+        updateConfig((current) => ({
+          ...current,
+          [dialogMode.section.type]: Object.fromEntries(Object.entries(current[dialogMode.section.type]).filter((t22) => {
+            const [uuid] = t22;
+            return uuid !== dialogMode.target.uuid;
+          }))
+        }));
+        setDialogMode(null);
       };
-      $[7] = config;
-      $[8] = updateConfig;
-      $[9] = t5;
+      $[0] = dialogMode.section.type;
+      $[1] = dialogMode.target;
+      $[2] = setDialogMode;
+      $[3] = updateConfig;
+      $[4] = t1;
     } else {
-      t5 = $[9];
+      t1 = $[4];
+    }
+    const deleteTarget = t1;
+    let t2;
+    if ($[5] !== setDialogMode) {
+      t2 = () => setDialogMode(null);
+      $[5] = setDialogMode;
+      $[6] = t2;
+    } else {
+      t2 = $[6];
+    }
+    const t3 = STRINGS[dialogMode.section.type];
+    const t4 = STRINGS[dialogMode.section.type];
+    let t5;
+    if ($[7] !== t4.deleteDialogDetails) {
+      t5 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ControlDetails, {
+        position: "row",
+        children: t4.deleteDialogDetails
+      });
+      $[7] = t4.deleteDialogDetails;
+      $[8] = t5;
+    } else {
+      t5 = $[8];
     }
-    t4 = t5;
-    const configContext = t4;
     let t6;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setDialogMode(null);
+    if ($[9] !== setDialogMode) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ControlButton, {
+        onClick: () => setDialogMode(null),
+        variant: "large",
+        children: "Cancel"
+      });
+      $[9] = setDialogMode;
       $[10] = t6;
     } else {
       t6 = $[10];
     }
-    const closeDialog = t6;
     let t7;
+    if ($[11] !== deleteTarget) {
+      t7 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ControlButton, {
+        onClick: deleteTarget,
+        variant: "large",
+        destructive: true,
+        icon: "delete",
+        children: "Delete"
+      });
+      $[11] = deleteTarget;
+      $[12] = t7;
+    } else {
+      t7 = $[12];
+    }
+    let t8;
+    if ($[13] !== t6 || $[14] !== t7) {
+      t8 = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(ControlDialogButtons2, {
+        children: [t6, t7]
+      });
+      $[13] = t6;
+      $[14] = t7;
+      $[15] = t8;
+    } else {
+      t8 = $[15];
+    }
+    let t9;
+    if ($[16] !== t2 || $[17] !== t3.deleteDialog || $[18] !== t5 || $[19] !== t8) {
+      t9 = /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(ControlDialog2, {
+        dialogClosed: t2,
+        title: t3.deleteDialog,
+        children: [t5, t8]
+      });
+      $[16] = t2;
+      $[17] = t3.deleteDialog;
+      $[18] = t5;
+      $[19] = t8;
+      $[20] = t9;
+    } else {
+      t9 = $[20];
+    }
+    return t9;
+  };
+  var ToolboxRoot = (t0) => {
+    const $ = (0, import_compiler_runtime28.c)(43);
+    const {
+      info
+    } = t0;
+    const {
+      config
+    } = info;
+    const {
+      sendMessage,
+      call
+    } = (0, import_react51.useContext)(StageContext);
+    const [dialogMode, setDialogMode] = (0, import_react51.useState)(null);
+    const [assignToOutput, setAssignToOutput] = (0, import_react51.useState)(null);
+    let t1;
+    let t2;
+    if ($[0] !== assignToOutput) {
+      t1 = () => {
+        if (assignToOutput) {
+          const onEscape = (e) => {
+            if (e.key === "Escape") {
+              setAssignToOutput(null);
+            }
+          };
+          window.addEventListener("keydown", onEscape);
+          return () => {
+            window.removeEventListener("keydown", onEscape);
+          };
+        }
+      };
+      t2 = [assignToOutput];
+      $[0] = assignToOutput;
+      $[1] = t1;
+      $[2] = t2;
+    } else {
+      t1 = $[1];
+      t2 = $[2];
+    }
+    (0, import_react51.useEffect)(t1, t2);
+    let t3;
+    if ($[3] !== config || $[4] !== info.key || $[5] !== sendMessage) {
+      t3 = (change) => {
+        const diff = diffJson(config, change(config));
+        sendMessage?.({
+          type: "component-message",
+          namespace: "timecode-toolbox",
+          component: "toolbox-root",
+          componentKey: info.key,
+          action: "update-config",
+          diff
+        });
+      };
+      $[3] = config;
+      $[4] = info.key;
+      $[5] = sendMessage;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    const updateConfig = t3;
+    let t4;
+    let t5;
+    if ($[7] !== config || $[8] !== info.network || $[9] !== updateConfig) {
+      t5 = {
+        config,
+        network: info.network,
+        updateConfig
+      };
+      $[7] = config;
+      $[8] = info.network;
+      $[9] = updateConfig;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    t4 = t5;
+    const configContext = t4;
+    let t6;
     if ($[11] !== call || $[12] !== info.key) {
-      t7 = async () => {
+      t6 = async () => {
         if (!call) {
           throw new Error("No call function available");
         }
@@ -42469,34 +44269,34 @@ Data Directory: ${system.dataDirectory}`
       };
       $[11] = call;
       $[12] = info.key;
-      $[13] = t7;
+      $[13] = t6;
     } else {
-      t7 = $[13];
+      t6 = $[13];
     }
-    const getNetworkInterfaces = t7;
+    const getNetworkInterfaces = t6;
+    let t7;
     let t8;
-    let t9;
     if ($[14] !== getNetworkInterfaces) {
-      t9 = {
+      t8 = {
         getNetworkInterfaces
       };
       $[14] = getNetworkInterfaces;
-      $[15] = t9;
+      $[15] = t8;
     } else {
-      t9 = $[15];
+      t8 = $[15];
     }
-    t8 = t9;
-    const networkContextValue = t8;
-    let t10;
+    t7 = t8;
+    const networkContextValue = t7;
+    let t9;
     bb0: {
       if (!assignToOutput) {
-        t10 = null;
+        t9 = null;
         break bb0;
       }
       const outputUuid = assignToOutput;
-      let t112;
+      let t102;
       if ($[16] !== outputUuid || $[17] !== updateConfig) {
-        t112 = (id) => {
+        t102 = (id) => {
           updateConfig((current) => {
             const output = current.outputs[outputUuid];
             if (!output) {
@@ -42517,21 +44317,21 @@ Data Directory: ${system.dataDirectory}`
         };
         $[16] = outputUuid;
         $[17] = updateConfig;
-        $[18] = t112;
+        $[18] = t102;
       } else {
-        t112 = $[18];
+        t102 = $[18];
       }
-      t10 = t112;
+      t9 = t102;
     }
-    const assignToOutputCallback = t10;
-    let t11;
+    const assignToOutputCallback = t9;
+    let t10;
     if ($[19] !== call || $[20] !== info.key) {
-      t11 = async (t122) => {
+      t10 = async (t112) => {
         const {
           path,
           handler,
           args
-        } = t122;
+        } = t112;
         if (!call) {
           throw new Error("No call function available");
         }
@@ -42547,50 +44347,50 @@ Data Directory: ${system.dataDirectory}`
       };
       $[19] = call;
       $[20] = info.key;
-      $[21] = t11;
+      $[21] = t10;
     } else {
-      t11 = $[21];
+      t10 = $[21];
     }
-    const callHandler = t11;
+    const callHandler = t10;
+    let t11;
     let t12;
-    let t13;
     if ($[22] !== callHandler || $[23] !== info.handlers) {
-      t13 = {
+      t12 = {
         handlers: info.handlers,
         callHandler
       };
       $[22] = callHandler;
       $[23] = info.handlers;
-      $[24] = t13;
+      $[24] = t12;
     } else {
-      t13 = $[24];
+      t12 = $[24];
     }
-    t12 = t13;
-    const handlers = t12;
+    t11 = t12;
+    const handlers = t11;
+    let t13;
     let t14;
-    let t15;
     if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = getFragmentValue("tc", TIMECODE_INSTANCE_ID);
-      $[25] = t15;
+      t14 = getFragmentValue("tc", TIMECODE_INSTANCE_ID);
+      $[25] = t14;
     } else {
-      t15 = $[25];
+      t14 = $[25];
     }
-    t14 = t15;
-    const windowedTimecodeId = t14;
+    t13 = t14;
+    const windowedTimecodeId = t13;
+    let t15;
     let t16;
-    let t17;
     if ($[26] !== assignToOutput || $[27] !== assignToOutputCallback || $[28] !== dialogMode || $[29] !== info.license) {
-      t17 = windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Layout, {
+      t16 = windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Layout, {
         modes: null,
-        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(FullscreenTimecodeDisplay, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(FullscreenTimecodeDisplay, {
           id: windowedTimecodeId
         })
-      }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
-        children: [/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Layout, {
+      }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, {
+        children: [/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Layout, {
           footer: true,
           modes: {
             license: {
-              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(License, {
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(License, {
                 license: info.license,
                 setWindowMode
               }),
@@ -42609,110 +44409,115 @@ Data Directory: ${system.dataDirectory}`
             }
           },
           licenseMode: "license",
-          children: /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, {
-            children: [/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(UpdateBanner, {}), /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", {
+          children: /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, {
+            children: [/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(UpdateBanner, {}), /* @__PURE__ */ (0, import_jsx_runtime62.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_runtime55.jsx)(InputsSection, {
+              children: [/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(InputsSection, {
                 setDialogMode,
                 assignToOutput: assignToOutputCallback
-              }), /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GeneratorsSection, {
+              }), /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(GeneratorsSection, {
                 setDialogMode,
                 assignToOutput: assignToOutputCallback
-              }), /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OutputsSection, {
+              }), /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(OutputsSection, {
                 setDialogMode,
                 assignToOutput,
                 setAssignToOutput
               })]
             })]
           })
-        }), dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(InputSettingsDialog, {
-          close: closeDialog,
-          input: dialogMode.section.input,
-          target: dialogMode.target
-        }), dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(GeneratorSettingsDialog, {
-          close: closeDialog,
-          generator: dialogMode.section.generator,
-          target: dialogMode.target
-        }), dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(OutputSettingsDialog, {
-          close: closeDialog,
-          output: dialogMode.section.output,
-          target: dialogMode.target
+        }), isDeleteDialogMode(dialogMode) ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(DeleteConfirmationDialog, {
+          dialogMode,
+          setDialogMode
+        }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(import_jsx_runtime62.Fragment, {
+          children: [dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(InputSettingsDialog, {
+            setDialogMode,
+            input: dialogMode.section.input,
+            target: dialogMode.target
+          }), dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(GeneratorSettingsDialog, {
+            setDialogMode,
+            generator: dialogMode.section.generator,
+            target: dialogMode.target
+          }), dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(OutputSettingsDialog, {
+            setDialogMode,
+            output: dialogMode.section.output,
+            target: dialogMode.target
+          })]
         })]
       });
       $[26] = assignToOutput;
       $[27] = assignToOutputCallback;
       $[28] = dialogMode;
       $[29] = info.license;
-      $[30] = t17;
+      $[30] = t16;
     } else {
-      t17 = $[30];
+      t16 = $[30];
     }
-    t16 = t17;
-    const root = t16;
-    let t18;
+    t15 = t16;
+    const root = t15;
+    let t17;
     if ($[31] !== handlers || $[32] !== root) {
-      t18 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ApplicationHandlersContext.Provider, {
+      t17 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ApplicationHandlersContext.Provider, {
         value: handlers,
         children: root
       });
       $[31] = handlers;
       $[32] = root;
-      $[33] = t18;
+      $[33] = t17;
     } else {
-      t18 = $[33];
+      t17 = $[33];
     }
-    let t19;
-    if ($[34] !== info.state || $[35] !== t18) {
-      t19 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ApplicationStateContext.Provider, {
+    let t18;
+    if ($[34] !== info.state || $[35] !== t17) {
+      t18 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ApplicationStateContext.Provider, {
         value: info.state,
-        children: t18
+        children: t17
       });
       $[34] = info.state;
-      $[35] = t18;
-      $[36] = t19;
+      $[35] = t17;
+      $[36] = t18;
     } else {
-      t19 = $[36];
+      t18 = $[36];
     }
-    let t20;
-    if ($[37] !== networkContextValue || $[38] !== t19) {
-      t20 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(NetworkContext.Provider, {
+    let t19;
+    if ($[37] !== networkContextValue || $[38] !== t18) {
+      t19 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(NetworkContext.Provider, {
         value: networkContextValue,
-        children: t19
+        children: t18
       });
       $[37] = networkContextValue;
-      $[38] = t19;
-      $[39] = t20;
+      $[38] = t18;
+      $[39] = t19;
     } else {
-      t20 = $[39];
+      t19 = $[39];
     }
-    let t21;
-    if ($[40] !== configContext || $[41] !== t20) {
-      t21 = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ConfigContext.Provider, {
+    let t20;
+    if ($[40] !== configContext || $[41] !== t19) {
+      t20 = /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ConfigContext.Provider, {
         value: configContext,
-        children: t20
+        children: t19
       });
       $[40] = configContext;
-      $[41] = t20;
-      $[42] = t21;
+      $[41] = t19;
+      $[42] = t20;
     } else {
-      t21 = $[42];
+      t20 = $[42];
     }
-    return t21;
+    return t20;
   };
   function _temp5(setWindowMode_0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Settings, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Settings, {
       setWindowMode: setWindowMode_0
     });
   }
   function _temp24() {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Debugger, {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Debugger, {
       title: STRINGS.debugger,
       className: "size-full"
     });
   }
 
   // src/components/frontend/index.tsx
-  var import_jsx_runtime56 = __toESM(require_jsx_runtime());
+  var import_jsx_runtime63 = __toESM(require_jsx_runtime());
   var timecodeToolboxFrontendComponents = () => ({
     namespace: NAMESPACE,
     render: (info) => {
@@ -42721,11 +44526,11 @@ Data Directory: ${system.dataDirectory}`
       }
       switch (info.component) {
         case "toolbox-root":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ToolboxRoot, {
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ToolboxRoot, {
             info
           });
         case "license-gate":
-          return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LicenseGate, {
+          return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(LicenseGate, {
             info
           });
       }
@@ -42735,7 +44540,7 @@ Data Directory: ${system.dataDirectory}`
     startSigilFrontend({
       browser,
       appRenderers: [timecodeToolboxFrontendComponents()],
-      loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", {
+      loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", {
         style: {
           width: "100%",
           textAlign: "center",
@@ -42746,6 +44551,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;
+  window.createBrowserMediaSession = createBrowserMediaSession;
 
   // src/components/frontend/entrypoint.ts
   startTimecodeToolboxServerFrontend(window.BROWSER_CONTEXT);