@arcanewizards/timecode-toolbox 0.1.3 → 0.1.5

package/dist/frontend.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;
@@ -37800,10 +37847,16 @@ Data Directory: ${system.dataDirectory}`
     },
     inputs: {
       title: "INPUTS",
+      unnamed: "Unnamed Input",
+      enable: "Enable Input",
+      disable: "Disable Input",
+      edit: "Edit Input",
       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`,
@@ -37821,22 +37874,49 @@ Data Directory: ${system.dataDirectory}`
     delay: (delayMs) => `Delay: ${MS_FORMAT.format(delayMs)}`,
     generators: {
       title: "GENERATORS",
+      unnamed: "Unnamed Generator",
+      edit: "Edit Generator",
       noChildren: "No generators yet. Please add one using the buttons below.",
       type: {
         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",
+      unnamed: "Unnamed Output",
+      enable: "Enable Output",
+      disable: "Disable Output",
+      link: "Link Output",
+      edit: "Edit Output",
       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",
@@ -38309,12 +38389,14 @@ Data Directory: ${system.dataDirectory}`
     return t4;
   };
   var TimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime7.c)(71);
+    const $ = (0, import_compiler_runtime7.c)(72);
     const {
       id,
       timecode: t1,
       config,
-      headerComponents
+      headerComponents,
+      disabled,
+      rootState
     } = t0;
     const {
       state,
@@ -38457,7 +38539,7 @@ Data Directory: ${system.dataDirectory}`
     let t11;
     if ($[26] !== headerComponents) {
       t11 = headerComponents && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-        className: "flex flex-wrap gap-0.25",
+        className: "flex gap-0.25",
         children: headerComponents
       });
       $[26] = headerComponents;
@@ -38465,72 +38547,54 @@ Data Directory: ${system.dataDirectory}`
     } else {
       t11 = $[27];
     }
-    const t12 = state?.state === "stopped";
-    let t13;
-    if ($[28] !== hooks?.pause || $[29] !== hooks?.play || $[30] !== t12) {
-      t13 = cn("relative min-h-timecode-min-height grow", cnd(t12, "opacity-50"), cnd(hooks?.play && hooks?.pause, `
-                cursor-pointer
-                hover:opacity-100
-              `));
-      $[28] = hooks?.pause;
-      $[29] = hooks?.play;
-      $[30] = t12;
-      $[31] = t13;
-    } else {
-      t13 = $[31];
-    }
-    let t14;
-    if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
-      t14 = cn("font-mono text-timecode-adaptive");
-      $[32] = t14;
-    } else {
-      t14 = $[32];
-    }
-    let t15;
-    if ($[33] !== state.effectiveStartTimeMillis || $[34] !== state.positionMillis || $[35] !== state.speed || $[36] !== state.state) {
-      t15 = state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ActiveTimecodeText, {
-        effectiveStartTimeMillis: state.effectiveStartTimeMillis,
-        speed: state.speed
-      });
-      $[33] = state.effectiveStartTimeMillis;
-      $[34] = state.positionMillis;
-      $[35] = state.speed;
-      $[36] = state.state;
-      $[37] = t15;
-    } else {
-      t15 = $[37];
-    }
-    let t16;
-    if ($[38] !== t15) {
-      t16 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-        className: "absolute inset-0 flex items-center justify-center",
+    let t12;
+    if ($[28] !== disabled || $[29] !== hooks?.pause || $[30] !== hooks?.play || $[31] !== state.effectiveStartTimeMillis || $[32] !== state.positionMillis || $[33] !== state.speed || $[34] !== state.state) {
+      t12 = disabled ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SizeAwareDiv, {
+        className: "\n                pointer-events-none absolute inset-0 flex items-center\n                justify-center\n              ",
+        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, {
+          icon: "pause",
+          className: "text-timecode-adaptive"
+        })
+      }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+        className: cn("absolute inset-0 flex items-center justify-center", cnd(state?.state === "stopped", "opacity-50"), cnd(hooks?.play && hooks?.pause, `
+                    cursor-pointer
+                    hover:opacity-100
+                  `)),
         children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
-          className: t14,
-          children: t15
+          className: cn("font-mono text-timecode-adaptive"),
+          children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ActiveTimecodeText, {
+            effectiveStartTimeMillis: state.effectiveStartTimeMillis,
+            speed: state.speed
+          })
         })
       });
-      $[38] = t15;
-      $[39] = t16;
+      $[28] = disabled;
+      $[29] = hooks?.pause;
+      $[30] = hooks?.play;
+      $[31] = state.effectiveStartTimeMillis;
+      $[32] = state.positionMillis;
+      $[33] = state.speed;
+      $[34] = state.state;
+      $[35] = t12;
     } else {
-      t16 = $[39];
+      t12 = $[35];
     }
-    let t17;
-    if ($[40] !== t13 || $[41] !== t16 || $[42] !== toggle) {
-      t17 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SizeAwareDiv, {
-        className: t13,
+    let t13;
+    if ($[36] !== t12 || $[37] !== toggle) {
+      t13 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(SizeAwareDiv, {
+        className: "relative min-h-timecode-min-height grow",
         onClick: toggle,
-        children: t16
+        children: t12
       });
-      $[40] = t13;
-      $[41] = t16;
-      $[42] = toggle;
-      $[43] = t17;
+      $[36] = t12;
+      $[37] = toggle;
+      $[38] = t13;
     } else {
-      t17 = $[43];
+      t13 = $[38];
     }
-    let t18;
-    if ($[44] !== back5seconds || $[45] !== beginning || $[46] !== forward5seconds || $[47] !== hooks || $[48] !== pause || $[49] !== play || $[50] !== state.state) {
-      t18 = hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+    let t14;
+    if ($[39] !== back5seconds || $[40] !== beginning || $[41] !== forward5seconds || $[42] !== hooks || $[43] !== pause || $[44] !== play || $[45] !== state.state) {
+      t14 = hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex justify-center gap-px",
         children: [hooks.beginning && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
           onClick: beginning,
@@ -38569,47 +38633,47 @@ Data Directory: ${system.dataDirectory}`
           className: "text-timecode-usage-foreground!"
         })]
       }) : null;
-      $[44] = back5seconds;
-      $[45] = beginning;
-      $[46] = forward5seconds;
-      $[47] = hooks;
-      $[48] = pause;
-      $[49] = play;
-      $[50] = state.state;
-      $[51] = t18;
+      $[39] = back5seconds;
+      $[40] = beginning;
+      $[41] = forward5seconds;
+      $[42] = hooks;
+      $[43] = pause;
+      $[44] = play;
+      $[45] = state.state;
+      $[46] = t14;
     } else {
-      t18 = $[51];
+      t14 = $[46];
     }
-    let t19;
-    if ($[52] !== metadata || $[53] !== state) {
-      t19 = metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Timeline2, {
+    let t15;
+    if ($[47] !== metadata || $[48] !== state) {
+      t15 = metadata?.totalTime && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Timeline2, {
         state,
         totalTime: metadata.totalTime
       });
-      $[52] = metadata;
-      $[53] = state;
-      $[54] = t19;
+      $[47] = metadata;
+      $[48] = state;
+      $[49] = t15;
     } else {
-      t19 = $[54];
+      t15 = $[49];
     }
-    let t20;
-    if ($[55] !== t10 || $[56] !== t11 || $[57] !== t17 || $[58] !== t18 || $[59] !== t19) {
-      t20 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+    let t16;
+    if ($[50] !== t10 || $[51] !== t11 || $[52] !== t13 || $[53] !== t14 || $[54] !== t15) {
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: t10,
-        children: [t11, t17, t18, t19]
+        children: [t11, t13, t14, t15]
       });
-      $[55] = t10;
-      $[56] = t11;
-      $[57] = t17;
-      $[58] = t18;
-      $[59] = t19;
-      $[60] = t20;
+      $[50] = t10;
+      $[51] = t11;
+      $[52] = t13;
+      $[53] = t14;
+      $[54] = t15;
+      $[55] = t16;
     } else {
-      t20 = $[60];
+      t16 = $[55];
     }
-    let t21;
-    if ($[61] !== config || $[62] !== state.accuracyMillis || $[63] !== state.smpteMode) {
-      t21 = (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+    let t17;
+    if ($[56] !== config || $[57] !== state.accuracyMillis || $[58] !== state.smpteMode) {
+      t17 = (state.smpteMode !== null || state.accuracyMillis !== null || config.delayMs !== null) && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex gap-px",
         children: [config.delayMs !== null && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
           className: "grow basis-0 truncate bg-sigil-bg-light p-0.5",
@@ -38622,16 +38686,16 @@ Data Directory: ${system.dataDirectory}`
           children: STRINGS.accuracy(state.accuracyMillis)
         })]
       });
-      $[61] = config;
-      $[62] = state.accuracyMillis;
-      $[63] = state.smpteMode;
-      $[64] = t21;
+      $[56] = config;
+      $[57] = state.accuracyMillis;
+      $[58] = state.smpteMode;
+      $[59] = t17;
     } else {
-      t21 = $[64];
+      t17 = $[59];
     }
-    let t22;
-    if ($[65] !== metadata) {
-      t22 = metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipWrapper, {
+    let t18;
+    if ($[60] !== metadata) {
+      t18 = metadata?.artist || metadata?.title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TooltipWrapper, {
         tooltip: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, {
           children: [metadata.title && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
             children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
@@ -38656,25 +38720,77 @@ Data Directory: ${system.dataDirectory}`
           })]
         })
       }) : null;
-      $[65] = metadata;
-      $[66] = t22;
+      $[60] = metadata;
+      $[61] = t18;
     } else {
-      t22 = $[66];
+      t18 = $[61];
     }
-    let t23;
-    if ($[67] !== t20 || $[68] !== t21 || $[69] !== t22) {
-      t23 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+    let t19;
+    if ($[62] !== rootState.errors) {
+      t19 = rootState.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+        className: "flex gap-px",
+        children: rootState.errors.map(_temp)
+      });
+      $[62] = rootState.errors;
+      $[63] = t19;
+    } else {
+      t19 = $[63];
+    }
+    let t20;
+    if ($[64] !== rootState.warnings) {
+      t20 = rootState.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+        className: "flex gap-px",
+        children: rootState.warnings.map(_temp2)
+      });
+      $[64] = rootState.warnings;
+      $[65] = t20;
+    } else {
+      t20 = $[65];
+    }
+    let t21;
+    if ($[66] !== t16 || $[67] !== t17 || $[68] !== t18 || $[69] !== t19 || $[70] !== t20) {
+      t21 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
         className: "flex grow flex-col gap-px",
-        children: [t20, t21, t22]
+        children: [t16, t17, t18, t19, t20]
       });
-      $[67] = t20;
-      $[68] = t21;
-      $[69] = t22;
-      $[70] = t23;
+      $[66] = t16;
+      $[67] = t17;
+      $[68] = t18;
+      $[69] = t19;
+      $[70] = t20;
+      $[71] = t21;
     } else {
-      t23 = $[70];
+      t21 = $[71];
+    }
+    return t21;
+  };
+  var getLinkedSourceInfo = (link, config) => {
+    if (!link) {
+      return void 0;
+    }
+    let info = void 0;
+    if (link[0] === "input") {
+      const input = config.inputs?.[link[1]];
+      if (input) {
+        info = {
+          color: input.color,
+          type: STRINGS.protocols[input.definition.type].short,
+          name: input.name ? [input.name] : [],
+          namePlaceholder: STRINGS.inputs.unnamed
+        };
+      }
+    } else if (link[0] === "generator") {
+      const generator = config.generators?.[link[1]];
+      if (generator) {
+        info = {
+          color: generator.color,
+          type: STRINGS.generators.type[generator.definition.type],
+          name: generator.name ? [generator.name] : [],
+          namePlaceholder: STRINGS.generators.unnamed
+        };
+      }
     }
-    return t23;
+    return info;
   };
   var EMPTY_TIMECODE = {
     name: null,
@@ -38694,8 +38810,10 @@ Data Directory: ${system.dataDirectory}`
     id,
     type,
     name,
+    link,
     color,
     timecode,
+    rootState,
     namePlaceholder,
     buttons,
     assignToOutput
@@ -38715,8 +38833,8 @@ Data Directory: ${system.dataDirectory}`
         });
       }
     }, [id, openNewWidow]);
-    name = timecode?.name ? [...name, timecode.name] : name;
-    if (isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
+    name = timecode !== "disabled" && timecode?.name ? [...name, timecode.name] : name;
+    if (timecode !== "disabled" && isTimecodeGroup(timecode) && Object.values(timecode.timecodes).length) {
       return Object.entries(timecode.timecodes).map(([key, child]) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimecodeTreeDisplay, {
         config,
         id: extendId(id, key),
@@ -38724,6 +38842,7 @@ Data Directory: ${system.dataDirectory}`
         name,
         color: timecode.color ?? color,
         timecode: child,
+        rootState,
         namePlaceholder,
         buttons,
         assignToOutput
@@ -38734,18 +38853,47 @@ Data Directory: ${system.dataDirectory}`
       style: color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(color)),
       children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(TimecodeDisplay, {
         id,
-        timecode: isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+        timecode: timecode !== "disabled" && isTimecodeInstance(timecode) ? timecode : EMPTY_TIMECODE,
+        rootState,
+        disabled: timecode === "disabled",
         config,
         headerComponents: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, {
-          children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
-            className: "flex grow items-start gap-0.25",
-            children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-              className: " m-0.25 rounded-md border border-sigil-bg-light bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control text-timecode-usage-text ",
-              children: type
-            }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
-              className: cn("grow basis-0 truncate p-0.5", cnd(name.length, "font-bold", "italic opacity-50")),
-              children: name.length ? name.join(" / ") : namePlaceholder
-            })]
+          children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+            className: "flex grow basis-0 items-start gap-0.25",
+            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+              className: "grow",
+              children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+                className: "flex items-center gap-0.25",
+                children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+                  className: " m-0.25 rounded-md border border-sigil-bg-light bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control text-timecode-usage-text ",
+                  children: type
+                }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+                  className: cn("w-0 grow truncate p-0.5", cnd(name.length, "font-bold", "italic opacity-50")),
+                  children: name.length ? name.join(" / ") : namePlaceholder
+                })]
+              }), link && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+                className: " flex items-center gap-0.25 text-timecode-usage-foreground ",
+                style: cssSigilColorUsageVariables(
+                  "timecode-usage",
+                  // Override timecode color with the user hint preferences
+                  // when no color is specified
+                  // as that will be what's used by the linked input/generator
+                  sigilColorUsage(link.color ?? "hint")
+                ),
+                children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", {
+                  className: " m-0.25 flex items-center gap-0.25 rounded-md border border-sigil-bg-light bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control text-timecode-usage-text ",
+                  children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, {
+                    icon: "link",
+                    className: "text-[120%]"
+                  }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", {
+                    children: link.type
+                  })]
+                }), /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+                  className: cn("w-0 grow truncate p-0.5", cnd(link.name.length, "font-bold", "italic opacity-50")),
+                  children: link.name.length ? link.name.join(" / ") : link.namePlaceholder
+                })]
+              })]
+            })
           }), /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlButtonGroup, {
             className: "rounded-md bg-sigil-bg-light",
             children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, {
@@ -38767,7 +38915,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   var FullscreenTimecodeDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime7.c)(38);
+    const $ = (0, import_compiler_runtime7.c)(64);
     const {
       id
     } = t0;
@@ -38789,7 +38937,7 @@ Data Directory: ${system.dataDirectory}`
       t1 = t22;
     } else {
       const c = config.outputs[id[1]];
-      if (!c) {
+      if (!c || !c.enabled) {
         t1 = null;
         break bb0;
       }
@@ -38806,146 +38954,255 @@ Data Directory: ${system.dataDirectory}`
     }
     const timecode = t1;
     let t2;
-    bb1: if (isInputInstanceId(id)) {
-      const c_0 = config.inputs[id[1]];
-      if (!c_0) {
-        t2 = null;
-        break bb1;
+    bb1: {
+      if (isOutputInstanceId(id)) {
+        const c_0 = config.outputs[id[1]];
+        if (c_0?.link) {
+          let t32;
+          if ($[6] !== c_0.link || $[7] !== config) {
+            t32 = getLinkedSourceInfo(c_0.link, config);
+            $[6] = c_0.link;
+            $[7] = config;
+            $[8] = t32;
+          } else {
+            t32 = $[8];
+          }
+          t2 = t32;
+          break bb1;
+        }
       }
-      const t32 = c_0.delayMs ?? null;
-      let t4;
-      if ($[6] !== t32) {
-        t4 = {
-          delayMs: t32
+      t2 = void 0;
+    }
+    const linkedSourceInfo = t2;
+    let t3;
+    bb2: if (isInputInstanceId(id)) {
+      const c_1 = config.inputs[id[1]];
+      if (!c_1) {
+        t3 = null;
+        break bb2;
+      }
+      const t42 = c_1.delayMs ?? null;
+      let t52;
+      if ($[9] !== t42) {
+        t52 = {
+          delayMs: t42
         };
-        $[6] = t32;
-        $[7] = t4;
+        $[9] = t42;
+        $[10] = t52;
       } else {
-        t4 = $[7];
+        t52 = $[10];
       }
-      const t5 = STRINGS.protocols[c_0.definition.type];
-      let t6;
-      if ($[8] !== c_0.name) {
-        t6 = c_0.name ? [c_0.name] : [];
-        $[8] = c_0.name;
-        $[9] = t6;
+      const t62 = STRINGS.protocols[c_1.definition.type];
+      let t7;
+      if ($[11] !== c_1.name) {
+        t7 = c_1.name ? [c_1.name] : [];
+        $[11] = c_1.name;
+        $[12] = t7;
       } else {
-        t6 = $[9];
+        t7 = $[12];
       }
-      let t7;
-      if ($[10] !== c_0.color || $[11] !== t4 || $[12] !== t5.short || $[13] !== t6) {
-        t7 = {
-          config: t4,
-          type: t5.short,
-          name: t6,
-          color: c_0.color,
-          namePlaceholder: `Unnamed Input`
+      const t8 = !c_1.enabled;
+      let t9;
+      if ($[13] !== c_1.color || $[14] !== t52 || $[15] !== t62.short || $[16] !== t7 || $[17] !== t8) {
+        t9 = {
+          config: t52,
+          type: t62.short,
+          name: t7,
+          color: c_1.color,
+          namePlaceholder: STRINGS.inputs.unnamed,
+          disabled: t8
         };
-        $[10] = c_0.color;
-        $[11] = t4;
-        $[12] = t5.short;
-        $[13] = t6;
-        $[14] = t7;
+        $[13] = c_1.color;
+        $[14] = t52;
+        $[15] = t62.short;
+        $[16] = t7;
+        $[17] = t8;
+        $[18] = t9;
       } else {
-        t7 = $[14];
+        t9 = $[18];
       }
-      t2 = t7;
+      t3 = t9;
     } else {
       if (isGeneratorInstanceId(id)) {
-        const c_1 = config.generators[id[1]];
-        if (!c_1) {
-          t2 = null;
-          break bb1;
+        const c_2 = config.generators[id[1]];
+        if (!c_2) {
+          t3 = null;
+          break bb2;
+        }
+        const t42 = c_2.delayMs ?? null;
+        let t52;
+        if ($[19] !== t42) {
+          t52 = {
+            delayMs: t42
+          };
+          $[19] = t42;
+          $[20] = t52;
+        } else {
+          t52 = $[20];
         }
-        const t32 = c_1.delayMs ?? null;
-        let t4;
-        if ($[15] !== t32) {
-          t4 = {
-            delayMs: t32
+        const t62 = STRINGS.generators.type[c_2.definition.type];
+        let t7;
+        if ($[21] !== c_2.name) {
+          t7 = c_2.name ? [c_2.name] : [];
+          $[21] = c_2.name;
+          $[22] = t7;
+        } else {
+          t7 = $[22];
+        }
+        let t8;
+        if ($[23] !== c_2.color || $[24] !== t52 || $[25] !== t62 || $[26] !== t7) {
+          t8 = {
+            config: t52,
+            type: t62,
+            name: t7,
+            color: c_2.color,
+            namePlaceholder: STRINGS.generators.unnamed,
+            disabled: false
           };
-          $[15] = t32;
-          $[16] = t4;
+          $[23] = c_2.color;
+          $[24] = t52;
+          $[25] = t62;
+          $[26] = t7;
+          $[27] = t8;
         } else {
-          t4 = $[16];
-        }
-        const t5 = STRINGS.generators.type[c_1.definition.type];
-        let t6;
-        if ($[17] !== c_1.name) {
-          t6 = c_1.name ? [c_1.name] : [];
-          $[17] = c_1.name;
-          $[18] = t6;
+          t8 = $[27];
+        }
+        t3 = t8;
+      } else {
+        const c_3 = config.outputs[id[1]];
+        if (!c_3) {
+          t3 = null;
+          break bb2;
+        }
+        const t42 = c_3.delayMs ?? null;
+        let t52;
+        if ($[28] !== t42) {
+          t52 = {
+            delayMs: t42
+          };
+          $[28] = t42;
+          $[29] = t52;
         } else {
-          t6 = $[18];
+          t52 = $[29];
         }
+        const t62 = STRINGS.protocols[c_3.definition.type];
         let t7;
-        if ($[19] !== c_1.color || $[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
-          t7 = {
-            config: t4,
-            type: t5,
-            name: t6,
-            color: c_1.color,
-            namePlaceholder: `Unnamed Generator`
+        if ($[30] !== c_3.name) {
+          t7 = c_3.name ? [c_3.name] : [];
+          $[30] = c_3.name;
+          $[31] = t7;
+        } else {
+          t7 = $[31];
+        }
+        const t8 = !c_3.enabled;
+        let t9;
+        if ($[32] !== c_3.color || $[33] !== t52 || $[34] !== t62.short || $[35] !== t7 || $[36] !== t8) {
+          t9 = {
+            config: t52,
+            type: t62.short,
+            name: t7,
+            color: c_3.color,
+            namePlaceholder: STRINGS.outputs.unnamed,
+            disabled: t8
           };
-          $[19] = c_1.color;
-          $[20] = t4;
-          $[21] = t5;
-          $[22] = t6;
-          $[23] = t7;
+          $[32] = c_3.color;
+          $[33] = t52;
+          $[34] = t62.short;
+          $[35] = t7;
+          $[36] = t8;
+          $[37] = t9;
         } else {
-          t7 = $[23];
+          t9 = $[37];
         }
-        t2 = t7;
+        t3 = t9;
+      }
+    }
+    const instanceConfig = t3;
+    let t4;
+    if (isInputInstanceId(id)) {
+      let t52;
+      if ($[38] !== applicationState.inputs || $[39] !== id[1]) {
+        t52 = applicationState.inputs?.[id[1]]?.errors ?? [];
+        $[38] = applicationState.inputs;
+        $[39] = id[1];
+        $[40] = t52;
       } else {
-        const c_2 = config.outputs[id[1]];
-        if (!c_2) {
-          t2 = null;
-          break bb1;
-        }
-        const t32 = c_2.delayMs ?? null;
-        let t4;
-        if ($[24] !== t32) {
-          t4 = {
-            delayMs: t32
+        t52 = $[40];
+      }
+      let t62;
+      if ($[41] !== applicationState.inputs || $[42] !== id[1]) {
+        t62 = applicationState.inputs?.[id[1]]?.warnings ?? [];
+        $[41] = applicationState.inputs;
+        $[42] = id[1];
+        $[43] = t62;
+      } else {
+        t62 = $[43];
+      }
+      let t7;
+      if ($[44] !== t52 || $[45] !== t62) {
+        t7 = {
+          errors: t52,
+          warnings: t62
+        };
+        $[44] = t52;
+        $[45] = t62;
+        $[46] = t7;
+      } else {
+        t7 = $[46];
+      }
+      t4 = t7;
+    } else {
+      if (isGeneratorInstanceId(id)) {
+        let t52;
+        if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
+          t52 = {
+            errors: [],
+            warnings: []
           };
-          $[24] = t32;
-          $[25] = t4;
+          $[47] = t52;
+        } else {
+          t52 = $[47];
+        }
+        t4 = t52;
+      } else {
+        let t52;
+        if ($[48] !== applicationState.outputs || $[49] !== id[1]) {
+          t52 = applicationState.outputs?.[id[1]]?.errors ?? [];
+          $[48] = applicationState.outputs;
+          $[49] = id[1];
+          $[50] = t52;
         } else {
-          t4 = $[25];
-        }
-        const t5 = STRINGS.protocols[c_2.definition.type];
-        let t6;
-        if ($[26] !== c_2.name) {
-          t6 = c_2.name ? [c_2.name] : [];
-          $[26] = c_2.name;
-          $[27] = t6;
+          t52 = $[50];
+        }
+        let t62;
+        if ($[51] !== applicationState.outputs || $[52] !== id[1]) {
+          t62 = applicationState.outputs?.[id[1]]?.warnings ?? [];
+          $[51] = applicationState.outputs;
+          $[52] = id[1];
+          $[53] = t62;
         } else {
-          t6 = $[27];
+          t62 = $[53];
         }
         let t7;
-        if ($[28] !== c_2.color || $[29] !== t4 || $[30] !== t5.short || $[31] !== t6) {
+        if ($[54] !== t52 || $[55] !== t62) {
           t7 = {
-            config: t4,
-            type: t5.short,
-            name: t6,
-            color: c_2.color,
-            namePlaceholder: `Unnamed Output`
+            errors: t52,
+            warnings: t62
           };
-          $[28] = c_2.color;
-          $[29] = t4;
-          $[30] = t5.short;
-          $[31] = t6;
-          $[32] = t7;
+          $[54] = t52;
+          $[55] = t62;
+          $[56] = t7;
         } else {
-          t7 = $[32];
+          t7 = $[56];
         }
-        t2 = t7;
+        t4 = t7;
       }
     }
-    const instanceConfig = t2;
+    const rootState = t4;
     if (!instanceConfig) {
-      let t32;
-      if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
-        t32 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(SizeAwareDiv, {
+      let t52;
+      if ($[57] === Symbol.for("react.memo_cache_sentinel")) {
+        t52 = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(SizeAwareDiv, {
           className: "\n          flex grow flex-col items-center justify-center gap-1 bg-sigil-bg-light\n          p-1 text-sigil-foreground-muted\n        ",
           children: [/* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon2, {
             icon: "question_mark",
@@ -38955,33 +39212,50 @@ Data Directory: ${system.dataDirectory}`
             children: STRINGS.errors.unknownTimecodeID
           })]
         });
-        $[33] = t32;
+        $[57] = t52;
       } else {
-        t32 = $[33];
+        t52 = $[57];
       }
-      return t32;
+      return t52;
     }
-    let t3;
-    if ($[34] !== id || $[35] !== instanceConfig || $[36] !== timecode) {
-      t3 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+    const t5 = instanceConfig.disabled ? "disabled" : timecode;
+    let t6;
+    if ($[58] !== id || $[59] !== instanceConfig || $[60] !== linkedSourceInfo || $[61] !== rootState || $[62] !== t5) {
+      t6 = /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("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_runtime43.jsx)(TimecodeTreeDisplay, {
           id,
-          timecode,
+          timecode: t5,
+          rootState,
           assignToOutput: null,
           buttons: null,
+          link: linkedSourceInfo,
           ...instanceConfig
         })
       });
-      $[34] = id;
-      $[35] = instanceConfig;
-      $[36] = timecode;
-      $[37] = t3;
+      $[58] = id;
+      $[59] = instanceConfig;
+      $[60] = linkedSourceInfo;
+      $[61] = rootState;
+      $[62] = t5;
+      $[63] = t6;
     } else {
-      t3 = $[37];
+      t6 = $[63];
     }
-    return t3;
+    return t6;
   };
+  function _temp(error, index2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+      className: "\n                grow truncate bg-sigil-usage-red-background p-0.5\n                text-sigil-usage-red-text\n              ",
+      children: error
+    }, index2);
+  }
+  function _temp2(warning, index_0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", {
+      className: "\n                grow truncate bg-sigil-usage-orange-background p-0.5\n                text-sigil-usage-orange-text\n              ",
+      children: warning
+    }, index_0);
+  }
 
   // ../../node_modules/.pnpm/uuid@11.1.0/node_modules/uuid/dist/esm-browser/stringify.js
   var byteToHex = [];
@@ -39248,7 +39522,7 @@ Data Directory: ${system.dataDirectory}`
           })
         }), /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlSelect, {
           value: data.target.interface ?? null,
-          options: !interfaces ? [] : Object.values(interfaces).map(_temp),
+          options: !interfaces ? [] : Object.values(interfaces).map(_temp3),
           placeholder: "No Interface Selected",
           onChange: (value) => {
             updateSettings((current_0) => ({
@@ -39359,7 +39633,7 @@ Data Directory: ${system.dataDirectory}`
     const t14 = data.mode;
     let t15;
     if ($[29] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = Object.entries(STRINGS.smtpeModeOptions).map(_temp2);
+      t15 = Object.entries(STRINGS.smtpeModeOptions).map(_temp22);
       $[29] = t15;
     } else {
       t15 = $[29];
@@ -39411,7 +39685,7 @@ Data Directory: ${system.dataDirectory}`
   var OutputSettingsDialog = ({
     target,
     output,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -39430,6 +39704,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 +39812,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,18 +39822,33 @@ 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]
       })
     });
   };
   var OutputDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime9.c)(57);
+    const $ = (0, import_compiler_runtime9.c)(71);
     const {
       uuid,
       config,
@@ -39568,6 +39858,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     const applicationState = useApplicationState();
     const {
+      config: allConfig,
       updateConfig
     } = (0, import_react33.useContext)(ConfigContext);
     let t1;
@@ -39632,8 +39923,20 @@ Data Directory: ${system.dataDirectory}`
     t3 = t5;
     const timecode = t3;
     let t6;
-    if ($[13] !== updateConfig || $[14] !== uuid) {
-      t6 = () => {
+    let t7;
+    if ($[13] !== allConfig || $[14] !== config.link) {
+      t7 = getLinkedSourceInfo(config.link, allConfig);
+      $[13] = allConfig;
+      $[14] = config.link;
+      $[15] = t7;
+    } else {
+      t7 = $[15];
+    }
+    t6 = t7;
+    const link = t6;
+    let t8;
+    if ($[16] !== updateConfig || $[17] !== uuid) {
+      t8 = () => {
         updateConfig((current_1) => {
           const existing = current_1.outputs?.[uuid];
           if (!existing) {
@@ -39651,90 +39954,123 @@ Data Directory: ${system.dataDirectory}`
           };
         });
       };
-      $[13] = updateConfig;
-      $[14] = uuid;
-      $[15] = t6;
+      $[16] = updateConfig;
+      $[17] = uuid;
+      $[18] = t8;
     } else {
-      t6 = $[15];
+      t8 = $[18];
     }
-    const toggleEnabled = t6;
-    let t7;
-    if ($[16] !== config.color) {
-      t7 = config.color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(config.color));
-      $[16] = config.color;
-      $[17] = t7;
+    const toggleEnabled = t8;
+    let t9;
+    let t10;
+    if ($[19] !== applicationState.outputs || $[20] !== uuid) {
+      t10 = applicationState.outputs[uuid]?.errors ?? [];
+      $[19] = applicationState.outputs;
+      $[20] = uuid;
+      $[21] = t10;
     } else {
-      t7 = $[17];
+      t10 = $[21];
     }
-    let t8;
-    if ($[18] !== uuid) {
-      t8 = ["output", uuid];
-      $[18] = uuid;
-      $[19] = t8;
+    let t11;
+    if ($[22] !== applicationState.outputs || $[23] !== uuid) {
+      t11 = applicationState.outputs[uuid]?.warnings ?? [];
+      $[22] = applicationState.outputs;
+      $[23] = uuid;
+      $[24] = t11;
     } else {
-      t8 = $[19];
+      t11 = $[24];
     }
-    const t9 = config.delayMs ?? null;
-    let t10;
-    if ($[20] !== t9) {
-      t10 = {
-        delayMs: t9
+    let t12;
+    if ($[25] !== t10 || $[26] !== t11) {
+      t12 = {
+        errors: t10,
+        warnings: t11
       };
-      $[20] = t9;
-      $[21] = t10;
+      $[25] = t10;
+      $[26] = t11;
+      $[27] = t12;
     } else {
-      t10 = $[21];
+      t12 = $[27];
     }
-    const t11 = STRINGS.protocols[config.definition.type];
-    let t12;
-    if ($[22] !== config.name) {
-      t12 = config.name ? [config.name] : [];
-      $[22] = config.name;
-      $[23] = t12;
+    t9 = t12;
+    const rootState = t9;
+    let t13;
+    if ($[28] !== config.color) {
+      t13 = config.color && cssSigilColorUsageVariables("timecode-usage", sigilColorUsage(config.color));
+      $[28] = config.color;
+      $[29] = t13;
     } else {
-      t12 = $[23];
+      t13 = $[29];
     }
-    const t13 = config.enabled ? timecode : null;
-    const t14 = config.enabled ? "Stop Input" : "Start Input";
-    const t15 = config.enabled ? "stop" : "play_arrow";
+    let t14;
+    if ($[30] !== uuid) {
+      t14 = ["output", uuid];
+      $[30] = uuid;
+      $[31] = t14;
+    } else {
+      t14 = $[31];
+    }
+    const t15 = config.delayMs ?? null;
     let t16;
-    if ($[24] !== t14 || $[25] !== t15 || $[26] !== toggleEnabled) {
-      t16 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
+    if ($[32] !== t15) {
+      t16 = {
+        delayMs: t15
+      };
+      $[32] = t15;
+      $[33] = t16;
+    } else {
+      t16 = $[33];
+    }
+    const t17 = STRINGS.protocols[config.definition.type];
+    let t18;
+    if ($[34] !== config.name) {
+      t18 = config.name ? [config.name] : [];
+      $[34] = config.name;
+      $[35] = t18;
+    } else {
+      t18 = $[35];
+    }
+    const t19 = config.enabled ? timecode : "disabled";
+    const t20 = config.enabled ? STRINGS.outputs.disable : STRINGS.outputs.enable;
+    const t21 = config.enabled ? "pause" : "play_arrow";
+    let t22;
+    if ($[36] !== t20 || $[37] !== t21 || $[38] !== toggleEnabled) {
+      t22 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
         variant: "large",
-        title: t14,
+        title: t20,
         onClick: toggleEnabled,
-        icon: t15
+        icon: t21
       });
-      $[24] = t14;
-      $[25] = t15;
-      $[26] = toggleEnabled;
-      $[27] = t16;
+      $[36] = t20;
+      $[37] = t21;
+      $[38] = toggleEnabled;
+      $[39] = t22;
     } else {
-      t16 = $[27];
+      t22 = $[39];
     }
-    const t17 = assignToOutput === uuid;
-    const t18 = config.link ? "link" : "link_off";
-    let t19;
-    if ($[28] !== linkCallback || $[29] !== t17 || $[30] !== t18) {
-      t19 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
+    const t23 = assignToOutput === uuid;
+    const t24 = config.link ? "link" : "link_off";
+    let t25;
+    if ($[40] !== linkCallback || $[41] !== t23 || $[42] !== t24) {
+      t25 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
         variant: "large",
-        title: "Link Output",
-        active: t17,
+        title: STRINGS.outputs.link,
+        active: t23,
         onClick: linkCallback,
-        icon: t18
+        icon: t24
       });
-      $[28] = linkCallback;
-      $[29] = t17;
-      $[30] = t18;
-      $[31] = t19;
+      $[40] = linkCallback;
+      $[41] = t23;
+      $[42] = t24;
+      $[43] = t25;
     } else {
-      t19 = $[31];
+      t25 = $[43];
     }
-    let t20;
-    if ($[32] !== config.definition.type || $[33] !== setDialogMode || $[34] !== uuid) {
-      t20 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
+    let t26;
+    if ($[44] !== config.definition.type || $[45] !== setDialogMode || $[46] !== uuid) {
+      t26 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, {
         variant: "large",
-        title: "Edit Output",
+        title: STRINGS.outputs.edit,
         onClick: () => setDialogMode({
           section: {
             type: "outputs",
@@ -39747,52 +40083,56 @@ Data Directory: ${system.dataDirectory}`
         }),
         icon: "edit"
       });
-      $[32] = config.definition.type;
-      $[33] = setDialogMode;
-      $[34] = uuid;
-      $[35] = t20;
+      $[44] = config.definition.type;
+      $[45] = setDialogMode;
+      $[46] = uuid;
+      $[47] = t26;
     } else {
-      t20 = $[35];
+      t26 = $[47];
     }
-    let t21;
-    if ($[36] !== t16 || $[37] !== t19 || $[38] !== t20) {
-      t21 = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, {
-        children: [t16, t19, t20]
+    let t27;
+    if ($[48] !== t22 || $[49] !== t25 || $[50] !== t26) {
+      t27 = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, {
+        children: [t22, t25, t26]
       });
-      $[36] = t16;
-      $[37] = t19;
-      $[38] = t20;
-      $[39] = t21;
+      $[48] = t22;
+      $[49] = t25;
+      $[50] = t26;
+      $[51] = t27;
     } else {
-      t21 = $[39];
+      t27 = $[51];
     }
-    let t22;
-    if ($[40] !== config.color || $[41] !== t10 || $[42] !== t11.short || $[43] !== t12 || $[44] !== t13 || $[45] !== t21 || $[46] !== t8) {
-      t22 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimecodeTreeDisplay, {
-        id: t8,
-        config: t10,
+    let t28;
+    if ($[52] !== config.color || $[53] !== link || $[54] !== rootState || $[55] !== t14 || $[56] !== t16 || $[57] !== t17.short || $[58] !== t18 || $[59] !== t19 || $[60] !== t27) {
+      t28 = /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TimecodeTreeDisplay, {
+        id: t14,
+        config: t16,
         assignToOutput: null,
-        type: t11.short,
-        name: t12,
+        type: t17.short,
+        name: t18,
         color: config.color,
-        timecode: t13,
-        namePlaceholder: `Unnamed Output`,
-        buttons: t21
+        timecode: t19,
+        rootState,
+        namePlaceholder: STRINGS.outputs.unnamed,
+        link,
+        buttons: t27
       });
-      $[40] = config.color;
-      $[41] = t10;
-      $[42] = t11.short;
-      $[43] = t12;
-      $[44] = t13;
-      $[45] = t21;
-      $[46] = t8;
-      $[47] = t22;
+      $[52] = config.color;
+      $[53] = link;
+      $[54] = rootState;
+      $[55] = t14;
+      $[56] = t16;
+      $[57] = t17.short;
+      $[58] = t18;
+      $[59] = t19;
+      $[60] = t27;
+      $[61] = t28;
     } else {
-      t22 = $[47];
+      t28 = $[61];
     }
-    let t23;
-    if ($[48] !== assignToOutput || $[49] !== clearLink || $[50] !== config.link || $[51] !== uuid) {
-      t23 = assignToOutput === uuid && config.link && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SizeAwareDiv, {
+    let t29;
+    if ($[62] !== assignToOutput || $[63] !== clearLink || $[64] !== config.link || $[65] !== uuid) {
+      t29 = assignToOutput === uuid && config.link && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(SizeAwareDiv, {
         className: "absolute inset-0",
         onClick: clearLink,
         children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipWrapper, {
@@ -39808,29 +40148,29 @@ Data Directory: ${system.dataDirectory}`
           })
         })
       });
-      $[48] = assignToOutput;
-      $[49] = clearLink;
-      $[50] = config.link;
-      $[51] = uuid;
-      $[52] = t23;
+      $[62] = assignToOutput;
+      $[63] = clearLink;
+      $[64] = config.link;
+      $[65] = uuid;
+      $[66] = t29;
     } else {
-      t23 = $[52];
+      t29 = $[66];
     }
-    let t24;
-    if ($[53] !== t22 || $[54] !== t23 || $[55] !== t7) {
-      t24 = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", {
+    let t30;
+    if ($[67] !== t13 || $[68] !== t28 || $[69] !== t29) {
+      t30 = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", {
         className: "relative flex flex-col",
-        style: t7,
-        children: [t22, t23]
+        style: t13,
+        children: [t28, t29]
       });
-      $[53] = t22;
-      $[54] = t23;
-      $[55] = t7;
-      $[56] = t24;
+      $[67] = t13;
+      $[68] = t28;
+      $[69] = t29;
+      $[70] = t30;
     } else {
-      t24 = $[56];
+      t30 = $[70];
     }
-    return t24;
+    return t30;
   };
   var OutputsSection = (t0) => {
     const $ = (0, import_compiler_runtime9.c)(11);
@@ -39912,13 +40252,13 @@ Data Directory: ${system.dataDirectory}`
     }
     return t4;
   };
-  function _temp(iface) {
+  function _temp3(iface) {
     return {
       label: `${iface.name} (${iface.address})`,
       value: iface.name
     };
   }
-  function _temp2(t0) {
+  function _temp22(t0) {
     const [mode, label] = t0;
     return {
       label,
@@ -40002,7 +40342,7 @@ Data Directory: ${system.dataDirectory}`
   var GeneratorSettingsDialog = ({
     target,
     generator,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -40015,6 +40355,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 +40443,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,18 +40453,33 @@ 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]
       })
     });
   };
   var GeneratorDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime10.c)(19);
+    const $ = (0, import_compiler_runtime10.c)(20);
     const {
       uuid,
       config,
@@ -40135,40 +40491,53 @@ Data Directory: ${system.dataDirectory}`
     } = useApplicationState();
     const state = generators[uuid];
     let t1;
-    if ($[0] !== uuid) {
-      t1 = ["generator", uuid];
-      $[0] = uuid;
-      $[1] = t1;
+    let t2;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = {
+        errors: [],
+        warnings: []
+      };
+      $[0] = t2;
     } else {
-      t1 = $[1];
+      t2 = $[0];
     }
-    const t2 = config.delayMs ?? null;
+    t1 = t2;
+    const rootState = t1;
     let t3;
-    if ($[2] !== t2) {
-      t3 = {
-        delayMs: t2
-      };
-      $[2] = t2;
-      $[3] = t3;
+    if ($[1] !== uuid) {
+      t3 = ["generator", uuid];
+      $[1] = uuid;
+      $[2] = t3;
     } else {
-      t3 = $[3];
+      t3 = $[2];
     }
-    const t4 = STRINGS.generators.type[config.definition.type];
+    const t4 = config.delayMs ?? null;
     let t5;
-    if ($[4] !== config.name) {
-      t5 = config.name ? [config.name] : [];
-      $[4] = config.name;
-      $[5] = t5;
+    if ($[3] !== t4) {
+      t5 = {
+        delayMs: t4
+      };
+      $[3] = t4;
+      $[4] = t5;
     } else {
-      t5 = $[5];
+      t5 = $[4];
     }
-    const t6 = state?.timecode ?? null;
+    const t6 = STRINGS.generators.type[config.definition.type];
     let t7;
-    if ($[6] !== config.definition.type || $[7] !== setDialogMode || $[8] !== uuid) {
-      t7 = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {
+    if ($[5] !== config.name) {
+      t7 = config.name ? [config.name] : [];
+      $[5] = config.name;
+      $[6] = t7;
+    } else {
+      t7 = $[6];
+    }
+    const t8 = state?.timecode ?? null;
+    let t9;
+    if ($[7] !== config.definition.type || $[8] !== setDialogMode || $[9] !== uuid) {
+      t9 = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, {
         children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ControlButton, {
           variant: "large",
-          title: "Edit Generator",
+          title: STRINGS.generators.edit,
           onClick: () => setDialogMode({
             section: {
               type: "generators",
@@ -40182,39 +40551,40 @@ Data Directory: ${system.dataDirectory}`
           icon: "edit"
         })
       });
-      $[6] = config.definition.type;
-      $[7] = setDialogMode;
-      $[8] = uuid;
-      $[9] = t7;
+      $[7] = config.definition.type;
+      $[8] = setDialogMode;
+      $[9] = uuid;
+      $[10] = t9;
     } else {
-      t7 = $[9];
+      t9 = $[10];
     }
-    let t8;
-    if ($[10] !== assignToOutput || $[11] !== config.color || $[12] !== t1 || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t6 || $[17] !== t7) {
-      t8 = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TimecodeTreeDisplay, {
-        id: t1,
-        config: t3,
-        type: t4,
-        name: t5,
+    let t10;
+    if ($[11] !== assignToOutput || $[12] !== config.color || $[13] !== t3 || $[14] !== t5 || $[15] !== t6 || $[16] !== t7 || $[17] !== t8 || $[18] !== t9) {
+      t10 = /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TimecodeTreeDisplay, {
+        id: t3,
+        config: t5,
+        type: t6,
+        name: t7,
         color: config.color,
-        timecode: t6,
-        namePlaceholder: `Unnamed Generator`,
-        buttons: t7,
+        timecode: t8,
+        rootState,
+        namePlaceholder: STRINGS.generators.unnamed,
+        buttons: t9,
         assignToOutput
       });
-      $[10] = assignToOutput;
-      $[11] = config.color;
-      $[12] = t1;
+      $[11] = assignToOutput;
+      $[12] = config.color;
       $[13] = t3;
-      $[14] = t4;
-      $[15] = t5;
-      $[16] = t6;
-      $[17] = t7;
-      $[18] = t8;
+      $[14] = t5;
+      $[15] = t6;
+      $[16] = t7;
+      $[17] = t8;
+      $[18] = t9;
+      $[19] = t10;
     } else {
-      t8 = $[18];
+      t10 = $[19];
     }
-    return t8;
+    return t10;
   };
   var GeneratorsSection = (t0) => {
     const $ = (0, import_compiler_runtime10.c)(10);
@@ -40377,7 +40747,7 @@ Data Directory: ${system.dataDirectory}`
     const t7 = data.iface ?? null;
     let t8;
     if ($[9] !== interfaces) {
-      t8 = !interfaces ? [] : Object.values(interfaces).map(_temp3);
+      t8 = !interfaces ? [] : Object.values(interfaces).map(_temp4);
       $[9] = interfaces;
       $[10] = t8;
     } else {
@@ -40564,7 +40934,7 @@ Data Directory: ${system.dataDirectory}`
     const t7 = data.iface ?? null;
     let t8;
     if ($[9] !== interfaces) {
-      t8 = !interfaces ? [] : Object.values(interfaces).map(_temp22);
+      t8 = !interfaces ? [] : Object.values(interfaces).map(_temp23);
       $[9] = interfaces;
       $[10] = t8;
     } else {
@@ -40624,7 +40994,7 @@ Data Directory: ${system.dataDirectory}`
   var InputSettingsDialog = ({
     target,
     input,
-    close
+    setDialogMode
   }) => {
     const {
       config,
@@ -40642,6 +41012,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 +41123,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,20 +41131,36 @@ 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]
       })
     });
   };
   var InputDisplay = (t0) => {
-    const $ = (0, import_compiler_runtime11.c)(29);
+    const $ = (0, import_compiler_runtime11.c)(37);
     const {
       uuid,
       config,
@@ -40814,57 +41201,90 @@ Data Directory: ${system.dataDirectory}`
       t1 = $[2];
     }
     const toggleEnabled = t1;
+    state?.errors;
+    state?.warnings;
     let t2;
-    if ($[3] !== uuid) {
-      t2 = ["input", uuid];
-      $[3] = uuid;
-      $[4] = t2;
+    let t3;
+    if ($[3] !== state?.errors) {
+      t3 = state?.errors ?? [];
+      $[3] = state?.errors;
+      $[4] = t3;
     } else {
-      t2 = $[4];
+      t3 = $[4];
     }
-    const t3 = config.delayMs ?? null;
     let t4;
-    if ($[5] !== t3) {
-      t4 = {
-        delayMs: t3
-      };
-      $[5] = t3;
+    if ($[5] !== state?.warnings) {
+      t4 = state?.warnings ?? [];
+      $[5] = state?.warnings;
       $[6] = t4;
     } else {
       t4 = $[6];
     }
-    const t5 = STRINGS.protocols[config.definition.type];
+    let t5;
+    if ($[7] !== t3 || $[8] !== t4) {
+      t5 = {
+        errors: t3,
+        warnings: t4
+      };
+      $[7] = t3;
+      $[8] = t4;
+      $[9] = t5;
+    } else {
+      t5 = $[9];
+    }
+    t2 = t5;
+    const rootState = t2;
     let t6;
-    if ($[7] !== config.name) {
-      t6 = config.name ? [config.name] : [];
-      $[7] = config.name;
-      $[8] = t6;
+    if ($[10] !== uuid) {
+      t6 = ["input", uuid];
+      $[10] = uuid;
+      $[11] = t6;
     } else {
-      t6 = $[8];
+      t6 = $[11];
     }
-    const t7 = state?.timecode ?? null;
-    const t8 = config.enabled ? "Stop Input" : "Start Input";
-    const t9 = config.enabled ? "stop" : "play_arrow";
+    const t7 = config.delayMs ?? null;
+    let t8;
+    if ($[12] !== t7) {
+      t8 = {
+        delayMs: t7
+      };
+      $[12] = t7;
+      $[13] = t8;
+    } else {
+      t8 = $[13];
+    }
+    const t9 = STRINGS.protocols[config.definition.type];
     let t10;
-    if ($[9] !== t8 || $[10] !== t9 || $[11] !== toggleEnabled) {
-      t10 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
+    if ($[14] !== config.name) {
+      t10 = config.name ? [config.name] : [];
+      $[14] = config.name;
+      $[15] = t10;
+    } else {
+      t10 = $[15];
+    }
+    const t11 = config.enabled ? state?.timecode ?? null : "disabled";
+    const t12 = config.enabled ? STRINGS.inputs.disable : STRINGS.inputs.enable;
+    const t13 = config.enabled ? "pause" : "play_arrow";
+    let t14;
+    if ($[16] !== t12 || $[17] !== t13 || $[18] !== toggleEnabled) {
+      t14 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
         variant: "large",
-        title: t8,
+        title: t12,
         onClick: toggleEnabled,
-        icon: t9
+        icon: t13
       });
-      $[9] = t8;
-      $[10] = t9;
-      $[11] = toggleEnabled;
-      $[12] = t10;
+      $[16] = t12;
+      $[17] = t13;
+      $[18] = toggleEnabled;
+      $[19] = t14;
     } else {
-      t10 = $[12];
+      t14 = $[19];
     }
-    let t11;
-    if ($[13] !== config.definition.type || $[14] !== setDialogMode || $[15] !== uuid) {
-      t11 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
+    let t15;
+    if ($[20] !== config.definition.type || $[21] !== setDialogMode || $[22] !== uuid) {
+      t15 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlButton, {
         variant: "large",
-        title: "Edit Input",
+        title: STRINGS.inputs.edit,
         onClick: () => setDialogMode({
           section: {
             type: "inputs",
@@ -40877,50 +41297,52 @@ Data Directory: ${system.dataDirectory}`
         }),
         icon: "edit"
       });
-      $[13] = config.definition.type;
-      $[14] = setDialogMode;
-      $[15] = uuid;
-      $[16] = t11;
+      $[20] = config.definition.type;
+      $[21] = setDialogMode;
+      $[22] = uuid;
+      $[23] = t15;
     } else {
-      t11 = $[16];
+      t15 = $[23];
     }
-    let t12;
-    if ($[17] !== t10 || $[18] !== t11) {
-      t12 = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, {
-        children: [t10, t11]
+    let t16;
+    if ($[24] !== t14 || $[25] !== t15) {
+      t16 = /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, {
+        children: [t14, t15]
       });
-      $[17] = t10;
-      $[18] = t11;
-      $[19] = t12;
+      $[24] = t14;
+      $[25] = t15;
+      $[26] = t16;
     } else {
-      t12 = $[19];
+      t16 = $[26];
     }
-    let t13;
-    if ($[20] !== assignToOutput || $[21] !== config.color || $[22] !== t12 || $[23] !== t2 || $[24] !== t4 || $[25] !== t5.short || $[26] !== t6 || $[27] !== t7) {
-      t13 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TimecodeTreeDisplay, {
-        id: t2,
-        config: t4,
-        type: t5.short,
-        name: t6,
+    let t17;
+    if ($[27] !== assignToOutput || $[28] !== config.color || $[29] !== rootState || $[30] !== t10 || $[31] !== t11 || $[32] !== t16 || $[33] !== t6 || $[34] !== t8 || $[35] !== t9.short) {
+      t17 = /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TimecodeTreeDisplay, {
+        id: t6,
+        config: t8,
+        type: t9.short,
+        name: t10,
         color: config.color,
-        timecode: t7,
-        namePlaceholder: `Unnamed Input`,
-        buttons: t12,
+        timecode: t11,
+        rootState,
+        namePlaceholder: STRINGS.inputs.unnamed,
+        buttons: t16,
         assignToOutput
       });
-      $[20] = assignToOutput;
-      $[21] = config.color;
-      $[22] = t12;
-      $[23] = t2;
-      $[24] = t4;
-      $[25] = t5.short;
-      $[26] = t6;
-      $[27] = t7;
-      $[28] = t13;
+      $[27] = assignToOutput;
+      $[28] = config.color;
+      $[29] = rootState;
+      $[30] = t10;
+      $[31] = t11;
+      $[32] = t16;
+      $[33] = t6;
+      $[34] = t8;
+      $[35] = t9.short;
+      $[36] = t17;
     } else {
-      t13 = $[28];
+      t17 = $[36];
     }
-    return t13;
+    return t17;
   };
   var InputsSection = (t0) => {
     const $ = (0, import_compiler_runtime11.c)(10);
@@ -40999,19 +41421,24 @@ Data Directory: ${system.dataDirectory}`
     }
     return t4;
   };
-  function _temp3(iface) {
+  function _temp4(iface) {
     return {
       label: `${iface.name} (${iface.address})`,
       value: iface.name
     };
   }
-  function _temp22(iface) {
+  function _temp23(iface) {
     return {
       label: `${iface.name} (${iface.address})`,
       value: iface.name
     };
   }
 
+  // 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 +41634,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 +41954,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 +42624,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;
@@ -42041,7 +42646,7 @@ Data Directory: ${system.dataDirectory}`
     } = t0;
     let t1;
     if ($[0] !== license) {
-      t1 = license.split("\n\n").map(_temp4);
+      t1 = license.split("\n\n").map(_temp5);
       $[0] = license;
       $[1] = t1;
     } else {
@@ -42165,7 +42770,7 @@ Data Directory: ${system.dataDirectory}`
     if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
       t2 = {
         debug: {
-          child: _temp23,
+          child: _temp24,
           icon: "bug_report",
           title: STRINGS.debugger
         }
@@ -42235,13 +42840,13 @@ Data Directory: ${system.dataDirectory}`
     }
     return t7;
   };
-  function _temp4(paragraph, index2) {
+  function _temp5(paragraph, index2) {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", {
       className: "m-0",
       children: paragraph.replace(/\n/g, " ").trim()
     }, index2);
   }
-  function _temp23() {
+  function _temp24() {
     return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Debugger, {
       title: STRINGS.debugger,
       className: "size-full"
@@ -42369,94 +42974,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);
+  // ../../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 {
+      className = $[1];
+      props = $[2];
+    }
     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;
+    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 {
-      t1 = $[1];
-      t2 = $[2];
+      t1 = $[4];
     }
-    (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 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 {
-      t3 = $[6];
+      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);
+      };
+      $[0] = dialogMode.section.type;
+      $[1] = dialogMode.target;
+      $[2] = setDialogMode;
+      $[3] = updateConfig;
+      $[4] = t1;
+    } else {
+      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];
+    }
+    let t6;
+    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];
+    }
+    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] !== updateConfig) {
+    if ($[7] !== config || $[8] !== info.network || $[9] !== updateConfig) {
       t5 = {
         config,
+        network: info.network,
         updateConfig
       };
       $[7] = config;
-      $[8] = updateConfig;
-      $[9] = t5;
+      $[8] = info.network;
+      $[9] = updateConfig;
+      $[10] = t5;
     } else {
-      t5 = $[9];
+      t5 = $[10];
     }
     t4 = t5;
     const configContext = t4;
     let t6;
-    if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
-      t6 = () => setDialogMode(null);
-      $[10] = t6;
-    } else {
-      t6 = $[10];
-    }
-    const closeDialog = t6;
-    let t7;
     if ($[11] !== call || $[12] !== info.key) {
-      t7 = async () => {
+      t6 = async () => {
         if (!call) {
           throw new Error("No call function available");
         }
@@ -42469,34 +44573,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 +44621,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 +44651,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
               }),
@@ -42598,121 +44702,126 @@ Data Directory: ${system.dataDirectory}`
               title: STRINGS.license
             },
             settings: {
-              child: _temp5,
+              child: _temp6,
               icon: "settings",
               title: STRINGS.settings.title
             },
             debug: {
-              child: _temp24,
+              child: _temp25,
               icon: "bug_report",
               title: STRINGS.debugger
             }
           },
           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, {
+  function _temp6(setWindowMode_0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Settings, {
       setWindowMode: setWindowMode_0
     });
   }
-  function _temp24() {
-    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Debugger, {
+  function _temp25() {
+    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 +44830,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 +44844,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 +44855,7 @@ Data Directory: ${system.dataDirectory}`
     });
   };
   window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;
+  window.createBrowserMediaSession = createBrowserMediaSession;
 })();
 /*! Bundled license information: