@arcanewizards/timecode-toolbox 0.1.3 → 0.1.5

package/dist/components/frontend/index.js

@@ -13963,7 +13963,7 @@ function cnd(condition, truthyClassName, falseyClassName) {
   return condition ? truthyClassName : falseyClassName;
 }
 
-// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+// ../../packages/sigil/dist/chunk-LDUYBGRY.js
 var import_react11 = require("react");
 
 // ../../node_modules/.pnpm/@arcanejs+toolkit-frontend@0.11.0/node_modules/@arcanejs/toolkit-frontend/dist/chunk-DK4BAXVE.mjs
@@ -14002,7 +14002,7 @@ var TRANSPARENCY_SVG = `
 `;
 var TRANSPARENCY_SVG_URI = `data:image/svg+xml,${encodeURIComponent(TRANSPARENCY_SVG)}`;
 
-// ../../packages/sigil/dist/chunk-E3VUC3Q4.js
+// ../../packages/sigil/dist/chunk-LDUYBGRY.js
 var import_react12 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var import_react13 = require("react");
@@ -14069,7 +14069,8 @@ var clsControlButton = ({
   touching,
   position,
   className,
-  primary
+  primary,
+  destructive
 }) => cn(
   `sigil-control-button`,
   cnd(variant === "border", `sigil-control-button-variant-border`),
@@ -14082,6 +14083,7 @@ var clsControlButton = ({
   cnd(active, `sigil-control-button-active`),
   cnd(touching && active, `sigil-control-button-active-touching`),
   cnd(primary, `sigil-control-button-primary`),
+  cnd(destructive, `sigil-control-button-destructive`),
   clsControlPosition(position),
   className
 );
@@ -14099,6 +14101,7 @@ var ControlButtonFrame = (0, import_react12.forwardRef)(
     tooltipSide,
     position,
     primary,
+    destructive,
     ...props
   }, ref) => {
     const btn = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -14114,6 +14117,7 @@ var ControlButtonFrame = (0, import_react12.forwardRef)(
           touching,
           position,
           primary,
+          destructive,
           className
         }),
         children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { children: [
@@ -14223,7 +14227,7 @@ ControlParagraph.displayName = "ControlParagraph";
 var ControlLabel = (0, import_react13.forwardRef)(
   ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-      "div",
+      "label",
       {
         ...props,
         ref,
@@ -14272,10 +14276,17 @@ var InputSpanningTitle = (0, import_react13.forwardRef)(({ className, position =
 ));
 InputSpanningTitle.displayName = "InputSpanningTitle";
 var ControlDialogButtons = (0, import_react14.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-  ControlButtonGroup,
+  "div",
   {
     ref,
-    className: cn("control-grid-pos-row", className),
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition("row"),
+      className
+    ),
     ...props,
     children
   }
@@ -14458,19 +14469,9 @@ var ControlSelect = ({
     }
   );
 };
-var COLOR_OPTIONS = {
-  red: { label: "Red", value: "red" },
-  blue: { label: "Blue", value: "blue" },
-  teal: { label: "Teal", value: "teal" },
-  green: { label: "Green", value: "green" },
-  yellow: { label: "Yellow", value: "yellow" },
-  purple: { label: "Purple", value: "purple" },
-  orange: { label: "Orange", value: "orange" },
-  brown: { label: "Brown", value: "brown" },
-  gray: { label: "Gray", value: "gray" }
-};
-var ControlColorSelect = ({
-  color,
+var ControlColoredSelect = ({
+  options,
+  value,
   onChange,
   variant,
   position,
@@ -14478,13 +14479,13 @@ var ControlColorSelect = ({
   placeholder,
   ...props
 }) => {
-  const options = Object.values(COLOR_OPTIONS);
-  const selectedColor = sigilColorUsage(color || "gray");
+  const selectedOption = options.find((option) => option.value === value);
+  const selectedColor = sigilColorUsage(selectedOption?.color ?? "gray");
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ControlSelect,
     {
       options,
-      value: color,
+      value,
       onChange,
       triggerButton: (option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         dist_exports2.Trigger,
@@ -14538,7 +14539,7 @@ var ControlColorSelect = ({
         {
           className: "",
           style: {
-            color: `var(--sigil-usage-${option.value}-foreground)`
+            color: `var(--sigil-usage-${option.color}-foreground)`
           },
           children: option.label
         }
@@ -14550,6 +14551,31 @@ var ControlColorSelect = ({
     }
   );
 };
+var COLOR_OPTIONS = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY = Object.values(COLOR_OPTIONS);
+var ControlColorSelect = ({
+  color,
+  ...props
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    ControlColoredSelect,
+    {
+      options: COLOR_OPTIONS_ARRAY,
+      value: color,
+      ...props
+    }
+  );
+};
 var isDarkDialog = (variant) => variant === "dark" || variant === "dark-compact";
 var DialogContext = (0, import_react11.createContext)({
   createDialog: () => {
@@ -15582,6 +15608,7 @@ var createBrowserMediaSession = () => {
 };
 var createDefaultBrowserContext = (browser) => {
   const defaults = {
+    appListenerChangesHandledExternally: false,
     openExternalLink: (url) => {
       window.open(url, "_blank", "noopener,noreferrer");
     },
@@ -15803,6 +15830,30 @@ var startSigilFrontend = ({
   return resolvedBrowser;
 };
 
+// ../../packages/sigil/dist/shared/config.js
+var APP_LISTENER_CONFIG = zod_default.object({
+  port: zod_default.union([
+    zod_default.number().int().min(1).max(65535),
+    zod_default.object({
+      from: zod_default.number().int().min(1).max(65535),
+      to: zod_default.number().int().min(1).max(65535)
+    }).refine((data) => data.to >= data.from, {
+      message: '"to" must be greater than or equal to "from"'
+    })
+  ]),
+  interface: zod_default.string().optional()
+});
+var ALL_APP_LISTENER_CONFIG = zod_default.record(
+  zod_default.string(),
+  APP_LISTENER_CONFIG
+);
+var portString = (port) => {
+  if (typeof port === "number") {
+    return port.toString();
+  }
+  return `${port.from}-${port.to}`;
+};
+
 // src/components/proto.ts
 var NET_UTILS_GENERAL_TARGET_DEFINITION = zod_default.union([
   zod_default.object({
@@ -15880,6 +15931,7 @@ var OUTPUT_CONFIG = zod_default.object({
   link: INPUT_OR_GENERATOR_INSTANCE_ID.nullable()
 });
 var TOOLBOX_CONFIG = zod_default.object({
+  appListener: APP_LISTENER_CONFIG.partial().optional(),
   inputs: zod_default.record(zod_default.string(), INPUT_CONFIG),
   generators: zod_default.record(zod_default.string(), GENERATOR_CONFIG),
   outputs: zod_default.record(zod_default.string(), OUTPUT_CONFIG),
@@ -15895,7 +15947,7 @@ var NAMESPACE = "timecode-toolbox";
 var isTimecodeToolboxComponent = (component) => component.namespace === NAMESPACE;
 
 // src/components/frontend/toolbox/root.tsx
-var import_react42 = require("react");
+var import_react50 = require("react");
 
 // ../../packages/artnet/dist/chunk-J2HDMITA.js
 var ARTNET_PORT = 6454;
@@ -15937,10 +15989,16 @@ var STRINGS = {
   },
   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`,
@@ -15958,22 +16016,49 @@ var STRINGS = {
   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",
@@ -16281,7 +16366,9 @@ var TimecodeDisplay = ({
   id,
   timecode: { state, metadata },
   config,
-  headerComponents
+  headerComponents,
+  disabled,
+  rootState
 }) => {
   const { handlers, callHandler } = useApplicationHandlers();
   const hooks = id && getTreeValue(handlers, id);
@@ -16332,29 +16419,41 @@ var TimecodeDisplay = ({
           )
         ),
         children: [
-          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-0.25", children: headerComponents }),
+          headerComponents && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-0.25", children: headerComponents }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             SizeAwareDiv,
             {
-              className: cn(
-                "relative min-h-timecode-min-height grow",
-                cnd(state?.state === "stopped", "opacity-50"),
-                cnd(
-                  hooks?.play && hooks?.pause,
-                  `
-                cursor-pointer
-                hover:opacity-100
-              `
-                )
-              ),
+              className: "relative min-h-timecode-min-height grow",
               onClick: toggle,
-              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                ActiveTimecodeText,
+              children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                SizeAwareDiv,
+                {
+                  className: "\n                pointer-events-none absolute inset-0 flex items-center\n                justify-center\n              ",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "pause", className: "text-timecode-adaptive" })
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                "div",
                 {
-                  effectiveStartTimeMillis: state.effectiveStartTimeMillis,
-                  speed: state.speed
+                  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_runtime41.jsx)("span", { className: cn("font-mono text-timecode-adaptive"), children: state.state === "none" ? "--:--:--:---" : state.state === "stopped" ? displayMillis(state.positionMillis) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    ActiveTimecodeText,
+                    {
+                      effectiveStartTimeMillis: state.effectiveStartTimeMillis,
+                      speed: state.speed
+                    }
+                  ) })
                 }
-              ) }) })
+              )
             }
           ),
           hooks?.pause || hooks?.play ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-center gap-px", children: [
@@ -16442,9 +16541,53 @@ var TimecodeDisplay = ({
           metadata.artist && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "grow truncate bg-sigil-bg-light p-0.5", children: metadata.artist })
         ] })
       }
-    ) : null
+    ) : null,
+    rootState.errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-px", children: rootState.errors.map((error, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-red-background p-0.5\n                text-sigil-usage-red-text\n              ",
+        children: error
+      },
+      index2
+    )) }),
+    rootState.warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex gap-px", children: rootState.warnings.map((warning, index2) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "div",
+      {
+        className: "\n                grow truncate bg-sigil-usage-orange-background p-0.5\n                text-sigil-usage-orange-text\n              ",
+        children: warning
+      },
+      index2
+    )) })
   ] });
 };
+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 info;
+};
 var EMPTY_TIMECODE = {
   name: null,
   state: {
@@ -16463,8 +16606,10 @@ var TimecodeTreeDisplay = ({
   id,
   type,
   name,
+  link,
   color,
   timecode,
+  rootState,
   namePlaceholder,
   buttons,
   assignToOutput
@@ -16478,8 +16623,8 @@ var TimecodeTreeDisplay = ({
       });
     }
   }, [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_runtime41.jsx)(
       TimecodeTreeDisplay,
       {
@@ -16489,6 +16634,7 @@ var TimecodeTreeDisplay = ({
         name,
         color: timecode.color ?? color,
         timecode: child,
+        rootState,
         namePlaceholder,
         buttons,
         assignToOutput
@@ -16506,28 +16652,67 @@ var TimecodeTreeDisplay = ({
           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_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex grow items-start gap-0.25", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-                  "div",
-                  {
-                    className: "\n                  m-0.25 rounded-md border border-sigil-bg-light\n                  bg-timecode-usage-foreground px-1 py-0.25 text-sigil-control\n                  text-timecode-usage-text\n                ",
-                    children: type
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex grow basis-0 items-start gap-0.25", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "grow", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-0.25", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+                    "div",
+                    {
+                      className: "\n                      m-0.25 rounded-md border border-sigil-bg-light\n                      bg-timecode-usage-foreground px-1 py-0.25\n                      text-sigil-control text-timecode-usage-text\n                    ",
+                      children: type
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsxs)(
                   "div",
                   {
-                    className: cn(
-                      "grow basis-0 truncate p-0.5",
-                      cnd(name.length, "font-bold", "italic opacity-50")
+                    className: "\n                      flex items-center gap-0.25 text-timecode-usage-foreground\n                    ",
+                    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: name.length ? name.join(" / ") : namePlaceholder
+                    children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+                        "div",
+                        {
+                          className: "\n                        m-0.25 flex items-center gap-0.25 rounded-md border\n                        border-sigil-bg-light bg-timecode-usage-foreground px-1\n                        py-0.25 text-sigil-control text-timecode-usage-text\n                      ",
+                          children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon2, { icon: "link", className: "text-[120%]" }),
+                            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: link.type })
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsxs)(ControlButtonGroup, { className: "rounded-md bg-sigil-bg-light", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                   ControlButton,
@@ -16565,7 +16750,7 @@ var FullscreenTimecodeDisplay = ({
       return getTimecodeInstance(applicationState, id);
     } else {
       const c = config.outputs[id[1]];
-      if (!c) {
+      if (!c || !c.enabled) {
         return null;
       }
       return augmentUpstreamTimecodeWithOutputMetadata(
@@ -16574,6 +16759,15 @@ var FullscreenTimecodeDisplay = ({
       );
     }
   }, [applicationState, id, config.outputs]);
+  const linkedSourceInfo = (0, import_react31.useMemo)(() => {
+    if (isOutputInstanceId(id)) {
+      const c = config.outputs[id[1]];
+      if (c?.link) {
+        return getLinkedSourceInfo(c.link, config);
+      }
+    }
+    return void 0;
+  }, [id, config]);
   const instanceConfig = (0, import_react31.useMemo)(() => {
     if (isInputInstanceId(id)) {
       const c = config.inputs[id[1]];
@@ -16585,7 +16779,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Input`
+        namePlaceholder: STRINGS.inputs.unnamed,
+        disabled: !c.enabled
       };
     } else if (isGeneratorInstanceId(id)) {
       const c = config.generators[id[1]];
@@ -16597,7 +16792,8 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.generators.type[c.definition.type],
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Generator`
+        namePlaceholder: STRINGS.generators.unnamed,
+        disabled: false
       };
     } else {
       const c = config.outputs[id[1]];
@@ -16609,10 +16805,29 @@ var FullscreenTimecodeDisplay = ({
         type: STRINGS.protocols[c.definition.type].short,
         name: c.name ? [c.name] : [],
         color: c.color,
-        namePlaceholder: `Unnamed Output`
+        namePlaceholder: STRINGS.outputs.unnamed,
+        disabled: !c.enabled
       };
     }
   }, [id, config]);
+  const rootState = (0, import_react31.useMemo)(() => {
+    if (isInputInstanceId(id)) {
+      return {
+        errors: applicationState.inputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.inputs?.[id[1]]?.warnings ?? []
+      };
+    } else if (isGeneratorInstanceId(id)) {
+      return {
+        errors: [],
+        warnings: []
+      };
+    } else {
+      return {
+        errors: applicationState.outputs?.[id[1]]?.errors ?? [],
+        warnings: applicationState.outputs?.[id[1]]?.warnings ?? []
+      };
+    }
+  }, [id, applicationState]);
   if (!instanceConfig) {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
       SizeAwareDiv,
@@ -16633,9 +16848,11 @@ var FullscreenTimecodeDisplay = ({
         TimecodeTreeDisplay,
         {
           id,
-          timecode,
+          timecode: instanceConfig.disabled ? "disabled" : timecode,
+          rootState,
           assignToOutput: null,
           buttons: null,
+          link: linkedSourceInfo,
           ...instanceConfig
         }
       )
@@ -16895,7 +17112,7 @@ var DmxConnectionSettings = ({
 var OutputSettingsDialog = ({
   target,
   output,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react32.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react32.useState)({
@@ -16911,6 +17128,7 @@ var OutputSettingsDialog = ({
     },
     link: null
   });
+  const close = (0, import_react32.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react32.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17041,10 +17259,25 @@ var OutputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: addOutput, variant: "large", children: "Add Output" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "outputs", output },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17057,7 +17290,7 @@ var OutputDisplay = ({
   setAssignToOutput
 }) => {
   const applicationState = useApplicationState();
-  const { updateConfig } = (0, import_react32.useContext)(ConfigContext);
+  const { config: allConfig, updateConfig } = (0, import_react32.useContext)(ConfigContext);
   const clearLink = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const currentOutput = current.outputs?.[uuid];
@@ -17085,6 +17318,10 @@ var OutputDisplay = ({
     const tc = config.link && getTimecodeInstance(applicationState, config.link);
     return augmentUpstreamTimecodeWithOutputMetadata(tc, config);
   }, [applicationState, config]);
+  const link = (0, import_react32.useMemo)(
+    () => getLinkedSourceInfo(config.link, allConfig),
+    [config.link, allConfig]
+  );
   const toggleEnabled = (0, import_react32.useCallback)(() => {
     updateConfig((current) => {
       const existing = current.outputs?.[uuid];
@@ -17103,6 +17340,13 @@ var OutputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = (0, import_react32.useMemo)(
+    () => ({
+      errors: applicationState.outputs[uuid]?.errors ?? [],
+      warnings: applicationState.outputs[uuid]?.warnings ?? []
+    }),
+    [applicationState.outputs, uuid]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
@@ -17121,23 +17365,25 @@ var OutputDisplay = ({
             type: STRINGS.protocols[config.definition.type].short,
             name: config.name ? [config.name] : [],
             color: config.color,
-            timecode: config.enabled ? timecode : null,
-            namePlaceholder: `Unnamed Output`,
+            timecode: config.enabled ? timecode : "disabled",
+            rootState,
+            namePlaceholder: STRINGS.outputs.unnamed,
+            link,
             buttons: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ControlButton,
                 {
                   variant: "large",
-                  title: config.enabled ? "Stop Input" : "Start Input",
+                  title: config.enabled ? STRINGS.outputs.disable : STRINGS.outputs.enable,
                   onClick: toggleEnabled,
-                  icon: config.enabled ? "stop" : "play_arrow"
+                  icon: config.enabled ? "pause" : "play_arrow"
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Link Output",
+                  title: STRINGS.outputs.link,
                   active: assignToOutput === uuid,
                   onClick: linkCallback,
                   icon: config.link ? "link" : "link_off"
@@ -17147,7 +17393,7 @@ var OutputDisplay = ({
                 ControlButton,
                 {
                   variant: "large",
-                  title: "Edit Output",
+                  title: STRINGS.outputs.edit,
                   onClick: () => setDialogMode({
                     section: { type: "outputs", output: config.definition.type },
                     target: { type: "edit", uuid }
@@ -17256,7 +17502,7 @@ var ClockSpecificSettings = ({
 var GeneratorSettingsDialog = ({
   target,
   generator,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react33.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react33.useState)({
@@ -17266,6 +17512,7 @@ var GeneratorSettingsDialog = ({
       speed: 1
     }
   });
+  const close = (0, import_react33.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react33.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17373,10 +17620,25 @@ var GeneratorSettingsDialog = ({
             updateSettings: updateDefinition
           }
         ) : null,
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: addGenerator, variant: "large", children: "Add Generator" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+        ] }) : target.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "generators", generator },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17389,6 +17651,7 @@ var GeneratorDisplay = ({
 }) => {
   const { generators } = useApplicationState();
   const state = generators[uuid];
+  const rootState = (0, import_react33.useMemo)(() => ({ errors: [], warnings: [] }), []);
   return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     TimecodeTreeDisplay,
     {
@@ -17398,12 +17661,13 @@ var GeneratorDisplay = ({
       name: config.name ? [config.name] : [],
       color: config.color,
       timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Generator`,
+      rootState,
+      namePlaceholder: STRINGS.generators.unnamed,
       buttons: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_jsx_runtime44.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         ControlButton,
         {
           variant: "large",
-          title: "Edit Generator",
+          title: STRINGS.generators.edit,
           onClick: () => setDialogMode({
             section: {
               type: "generators",
@@ -17590,7 +17854,7 @@ var TCNetConnectionSettings = ({
 var InputSettingsDialog = ({
   target,
   input,
-  close
+  setDialogMode
 }) => {
   const { config, updateConfig } = (0, import_react34.useContext)(ConfigContext);
   const [newData, setNewData] = (0, import_react34.useState)({
@@ -17605,6 +17869,7 @@ var InputSettingsDialog = ({
       iface: ""
     }
   });
+  const close = (0, import_react34.useCallback)(() => setDialogMode(null), [setDialogMode]);
   const updateSettings = (0, import_react34.useCallback)(
     (change) => {
       if (target.type === "add") {
@@ -17741,10 +18006,25 @@ var InputSettingsDialog = ({
             }
           }
         ),
-        resolvedTarget === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
+        target.type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Cancel" }),
-          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: addInput, variant: "large", children: "Add Input" })
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlDialogButtons, { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" }) })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: addInput, variant: "large", primary: true, children: "Add Input" })
+        ] }) : target?.type === "edit" ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(ControlDialogButtons, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            ControlButton,
+            {
+              onClick: () => setDialogMode({
+                section: { type: "inputs", input },
+                target: { type: "delete", uuid: target.uuid }
+              }),
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ControlButton, { onClick: close, variant: "large", children: "Close" })
+        ] }) : null
       ]
     }
   ) });
@@ -17776,6 +18056,10 @@ var InputDisplay = ({
       };
     });
   }, [uuid, updateConfig]);
+  const rootState = (0, import_react34.useMemo)(
+    () => ({ errors: state?.errors ?? [], warnings: state?.warnings ?? [] }),
+    [state?.errors, state?.warnings]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     TimecodeTreeDisplay,
     {
@@ -17784,23 +18068,24 @@ var InputDisplay = ({
       type: STRINGS.protocols[config.definition.type].short,
       name: config.name ? [config.name] : [],
       color: config.color,
-      timecode: state?.timecode ?? null,
-      namePlaceholder: `Unnamed Input`,
+      timecode: config.enabled ? state?.timecode ?? null : "disabled",
+      rootState,
+      namePlaceholder: STRINGS.inputs.unnamed,
       buttons: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ControlButton,
           {
             variant: "large",
-            title: config.enabled ? "Stop Input" : "Start Input",
+            title: config.enabled ? STRINGS.inputs.disable : STRINGS.inputs.enable,
             onClick: toggleEnabled,
-            icon: config.enabled ? "stop" : "play_arrow"
+            icon: config.enabled ? "pause" : "play_arrow"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           ControlButton,
           {
             variant: "large",
-            title: "Edit Input",
+            title: STRINGS.inputs.edit,
             onClick: () => setDialogMode({
               section: { type: "inputs", input: config.definition.type },
               target: { type: "edit", uuid }
@@ -17933,6 +18218,11 @@ var diffJson = (a, b) => {
   return { type: "value", after: b };
 };
 
+// src/components/frontend/toolbox/types.ts
+var isDeleteDialogMode = (mode) => {
+  return mode?.target.type === "delete";
+};
+
 // src/components/frontend/toolbox/settings.tsx
 var import_react37 = require("react");
 
@@ -18087,6 +18377,180 @@ var ENABLED_DISABLED_OPTIONS = [
 var DATE_FORMATTER = new Intl.DateTimeFormat(void 0, {
   timeStyle: "medium"
 });
+var AppPortConfig = () => {
+  const { getNetworkInterfaces } = (0, import_react37.useContext)(NetworkContext);
+  const [interfaces, setInterfaces] = (0, import_react37.useState)(null);
+  const refreshInterfaces = (0, import_react37.useCallback)(() => {
+    setInterfaces(null);
+    getNetworkInterfaces().then((ifs) => setInterfaces(ifs));
+  }, [getNetworkInterfaces]);
+  (0, import_react37.useEffect)(() => {
+    refreshInterfaces();
+  }, [refreshInterfaces]);
+  const { appListenerChangesHandledExternally } = useBrowserContext();
+  const { network, config, updateConfig } = (0, import_react37.useContext)(ConfigContext);
+  const [nextPort, setNextPort] = (0, import_react37.useState)(null);
+  const [nextInterface, setNextInterface] = (0, import_react37.useState)(
+    null
+  );
+  const iface = nextInterface ?? (config.appListener?.interface ? `specific:${config.appListener?.interface}` : "any");
+  const port = nextPort ?? config.appListener?.port;
+  const currentPortString = !port ? "" : typeof port === "string" ? port : portString(port);
+  const hasNetworkChanges = nextPort !== null || nextInterface !== null;
+  const nextUrlRef = (0, import_react37.useRef)(null);
+  const validatedPort = (0, import_react37.useMemo)(() => {
+    if (nextPort === null) {
+      return { type: "unchanged" };
+    }
+    if (nextPort.trim() === "") {
+      return { type: "empty" };
+    }
+    const portParts = nextPort.split("-").map((part) => parseInt(part.trim(), 10));
+    if (portParts.length === 1) {
+      const [singlePort] = portParts;
+      if (!singlePort || isNaN(singlePort) || singlePort < 1 || singlePort > 65535) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortSingle
+        };
+      }
+      return { type: "valid", port: singlePort };
+    }
+    if (portParts.length === 2) {
+      const [from, to] = portParts;
+      if (!from || isNaN(from) || from < 1 || from > 65535 || !to || isNaN(to) || to < 1 || to > 65535) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortSingle
+        };
+      } else if (from > to) {
+        return {
+          type: "invalid",
+          error: STRINGS.settings.network.invalidPortRange
+        };
+      }
+      return { type: "valid", port: { from, to } };
+    }
+    return { type: "invalid", error: STRINGS.settings.network.invalidPort };
+  }, [nextPort]);
+  const canSave = hasNetworkChanges && validatedPort?.type !== "invalid";
+  const saveNetworkConfig = (0, import_react37.useCallback)(() => {
+    if (validatedPort?.type === "invalid") {
+      return;
+    }
+    const newPort = validatedPort;
+    updateConfig((current) => {
+      const config2 = {
+        ...current,
+        appListener: {
+          port: newPort.type === "empty" ? void 0 : newPort.type === "valid" ? newPort.port : current.appListener?.port,
+          interface: nextInterface === "any" ? void 0 : nextInterface ? nextInterface.replace("specific:", "") : current.appListener?.interface
+        }
+      };
+      const nextUrl = new URL(window.location.href);
+      if (config2.appListener?.interface) {
+        nextUrl.hostname = interfaces?.[config2.appListener.interface]?.address ?? nextUrl.hostname;
+      }
+      const port2 = config2.appListener?.port ?? network.defaultPort;
+      nextUrl.port = (typeof port2 === "number" ? port2 : port2.from).toString();
+      nextUrlRef.current = nextUrl;
+      return config2;
+    });
+    setNextPort(null);
+    setNextInterface(null);
+  }, [
+    interfaces,
+    nextInterface,
+    validatedPort,
+    updateConfig,
+    network.defaultPort
+  ]);
+  (0, import_react37.useEffect)(() => {
+    return () => {
+      if (!appListenerChangesHandledExternally && nextUrlRef.current) {
+        window.location.href = nextUrlRef.current.href;
+      }
+    };
+  }, [appListenerChangesHandledExternally]);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlLabel, { children: STRINGS.settings.network.appInterfaceLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlSelect,
+      {
+        value: iface,
+        options: [
+          { label: STRINGS.settings.network.anyInterface, value: "any" },
+          ...!interfaces ? [] : Object.values(interfaces).map((iface2) => ({
+            label: `${iface2.name} (${iface2.address})`,
+            value: `specific:${iface2.name}`
+          }))
+        ],
+        onChange: setNextInterface,
+        position: "first",
+        variant: "large",
+        triggerClassName: cn("text-sigil-control")
+      }
+    ),
+    iface && interfaces?.[iface]?.internal && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.internalInterfaceUsed(iface)
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlButton,
+      {
+        onClick: refreshInterfaces,
+        title: "Refresh Interfaces",
+        position: "extra",
+        variant: "large",
+        children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon2, { icon: "refresh", className: "text-arcane-normal" })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlLabel, { children: STRINGS.settings.network.appPortLabel }),
+    network.envPort ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { position: "both", children: STRINGS.settings.network.appPortEnvOverride(network.envPort) }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ControlInput,
+        {
+          value: currentPortString,
+          onChange: setNextPort,
+          placeholder: STRINGS.settings.network.defaultPort(
+            portString(network.defaultPort)
+          )
+        }
+      ),
+      validatedPort.type === "invalid" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        ControlDetails,
+        {
+          position: "second",
+          className: "text-sigil-error-foreground",
+          children: validatedPort.error
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlButton,
+      {
+        onClick: saveNetworkConfig,
+        variant: "large",
+        position: "first",
+        disabled: !canSave,
+        children: STRINGS.settings.network.saveChanges
+      }
+    ),
+    hasNetworkChanges && appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { position: "second", children: STRINGS.settings.network.saveWarning.external }),
+    hasNetworkChanges && !appListenerChangesHandledExternally && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+      ControlDetails,
+      {
+        position: "second",
+        className: "text-sigil-warning-foreground",
+        children: STRINGS.settings.network.saveWarning.internal
+      }
+    )
+  ] });
+};
 var Settings = ({ setWindowMode }) => {
   const { preferences, updateBrowserPrefs } = useBrowserPreferences();
   const { config, updateConfig } = (0, import_react37.useContext)(ConfigContext);
@@ -18134,7 +18598,8 @@ var Settings = ({ setWindowMode }) => {
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.settingsDetails }),
           updates && "lastCheckedMillis" in updates && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(ControlDetails, { children: STRINGS.updates.lastChecked(
             DATE_FORMATTER.format(updates.lastCheckedMillis)
-          ) })
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(AppPortConfig, {})
         ] })
       }
     )
@@ -18531,7 +18996,7 @@ var Layout = ({
   const { connection, reconnect } = (0, import_react39.useContext)(StageContext);
   const { preferences } = useBrowserPreferences();
   useRootHintVariables(preferences.color);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex h-screen flex-col", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex h-dvh flex-col", children: [
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ToolbarWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ToolbarRow, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "div",
@@ -18710,65 +19175,660 @@ var UpdateBanner = () => {
   return null;
 };
 
-// src/components/frontend/toolbox/root.tsx
+// ../../packages/sigil/src/frontend/controls/dialogs.tsx
+var import_react49 = require("react");
+
+// ../../packages/sigil/src/frontend/dialogs.tsx
+var import_react48 = require("react");
+
+// ../../packages/sigil/src/frontend/controls/buttons.tsx
+var import_react44 = require("react");
+
+// ../../packages/sigil/src/frontend/styling.ts
+var SIGIL_COLOR2 = external_exports.enum([
+  "purple",
+  "blue",
+  "teal",
+  "red",
+  "green",
+  "yellow",
+  "brown",
+  "orange",
+  "gray"
+]);
+function cnd2(condition, truthyClassName, falseyClassName) {
+  return condition ? truthyClassName : falseyClassName;
+}
+
+// ../../packages/sigil/src/frontend/tooltip.tsx
+var import_react42 = require("react");
 var import_jsx_runtime53 = require("react/jsx-runtime");
-var ToolboxRoot = ({ info }) => {
-  const { config } = info;
-  const { sendMessage, call } = (0, import_react42.useContext)(StageContext);
-  const [dialogMode, setDialogMode] = (0, import_react42.useState)(null);
-  const [assignToOutput, setAssignToOutput] = (0, import_react42.useState)(null);
-  (0, import_react42.useEffect)(() => {
-    if (assignToOutput) {
-      const onEscape = (e) => {
-        if (e.key === "Escape") {
-          setAssignToOutput(null);
-        }
-      };
-      window.addEventListener("keydown", onEscape);
-      return () => {
-        window.removeEventListener("keydown", onEscape);
-      };
-    }
-  }, [assignToOutput]);
-  const updateConfig = (0, import_react42.useCallback)(
-    (change) => {
-      const diff = diffJson(config, change(config));
-      sendMessage?.({
-        type: "component-message",
-        namespace: "timecode-toolbox",
-        component: "toolbox-root",
-        componentKey: info.key,
-        action: "update-config",
-        diff
-      });
-    },
-    [sendMessage, info.key, config]
-  );
-  const configContext = (0, import_react42.useMemo)(
-    () => ({
-      config,
-      updateConfig
-    }),
-    [config, updateConfig]
-  );
-  const closeDialog = (0, import_react42.useCallback)(() => setDialogMode(null), []);
-  const getNetworkInterfaces = (0, import_react42.useCallback)(async () => {
-    if (!call) {
-      throw new Error("No call function available");
-    }
-    return call({
-      namespace: "timecode-toolbox",
-      type: "component-call",
-      componentKey: info.key,
-      action: "toolbox-root-get-network-interfaces"
-    });
-  }, [call, info.key]);
-  const networkContextValue = (0, import_react42.useMemo)(() => {
-    return {
+var Content4 = (0, import_react42.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  dist_exports4.Content,
+  {
+    ...props,
+    ref,
+    className: cn(
+      `
+        relative z-sigil-tooltip rounded-sigil-control
+        bg-sigil-usage-hint-background px-1 py-0.5 leading-[1.5]
+        text-sigil-usage-hint-text shadow-sigil-box
+      `,
+      className
+    )
+  }
+));
+Content4.displayName = "Content";
+var Arrow4 = (0, import_react42.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  dist_exports4.Arrow,
+  {
+    ...props,
+    ref,
+    className: cn(
+      "fill-sigil-usage-hint-background drop-shadow-sigil-tooltip-arrow",
+      className
+    )
+  }
+));
+Arrow4.displayName = "Arrow";
+var TooltipBoundaryContext2 = (0, import_react42.createContext)(null);
+var TooltipWrapper2 = ({
+  tooltip,
+  children,
+  side = "top"
+}) => {
+  const boundary = (0, import_react42.useContext)(TooltipBoundaryContext2);
+  if (!tooltip) {
+    return children;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(dist_exports4.Root, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(dist_exports4.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      Content4,
+      {
+        side,
+        align: "center",
+        sideOffset: 5,
+        alignOffset: 0,
+        collisionBoundary: boundary ? [boundary] : [],
+        collisionPadding: 10,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Arrow4, {}),
+          tooltip
+        ]
+      }
+    )
+  ] });
+};
+
+// ../../packages/sigil/src/frontend/input.ts
+var import_react43 = require("react");
+var usePressable3 = (click) => {
+  const [touching, setTouching] = (0, import_react43.useState)(false);
+  return {
+    touching,
+    handlers: {
+      onClick: click,
+      onTouchStart: () => {
+        setTouching(true);
+      },
+      onTouchMove: () => {
+        setTouching(false);
+      },
+      onTouchEnd: (event) => {
+        if (touching) {
+          event.preventDefault();
+          setTouching(false);
+          click(event);
+        }
+      }
+    }
+  };
+};
+var useLongPressable3 = ({
+  onPress,
+  onRelease
+}) => {
+  const [touching, setTouching] = (0, import_react43.useState)(false);
+  return (0, import_react43.useMemo)(
+    () => ({
+      touching,
+      handlers: {
+        onTouchStart: () => {
+          setTouching(true);
+          onPress();
+        },
+        onMouseDown: () => {
+          setTouching(true);
+          onPress();
+        },
+        onMouseUp: () => {
+          setTouching(false);
+          onRelease();
+        },
+        onTouchMove: () => {
+          setTouching(false);
+          onRelease();
+        },
+        onTouchEnd: (event) => {
+          if (touching) {
+            event.preventDefault();
+            setTouching(false);
+            onRelease();
+          }
+        }
+      }
+    }),
+    [touching, onRelease, onPress]
+  );
+};
+
+// ../../packages/sigil/src/frontend/controls/utils.ts
+var clsControlPosition2 = (position) => {
+  if (!position) return void 0;
+  switch (position) {
+    case "row":
+      return "control-grid-pos-row";
+    case "label":
+      return "control-grid-pos-label";
+    case "first":
+      return "control-grid-pos-first";
+    case "second":
+      return "control-grid-pos-second";
+    case "both":
+      return "control-grid-pos-both";
+    case "all":
+      return "control-grid-pos-all";
+    case "extra":
+      return "control-grid-pos-extra";
+  }
+};
+var clsControlSubgridPosition2 = (position, subgrid) => {
+  if (!subgrid) return void 0;
+  switch (position) {
+    case "label":
+      return "col-[1/span_1]";
+    case "first":
+      return "col-[2/span_1]";
+    case "second":
+      return "col-[3/span_1]";
+  }
+};
+
+// ../../packages/sigil/src/frontend/controls/buttons.tsx
+var import_jsx_runtime54 = require("react/jsx-runtime");
+var clsControlButton2 = ({
+  variant,
+  active,
+  touching,
+  position,
+  className,
+  primary,
+  destructive
+}) => cn(
+  `sigil-control-button`,
+  cnd2(variant === "border", `sigil-control-button-variant-border`),
+  cnd2(variant === "large", `sigil-control-button-variant-large`),
+  cnd2(variant === "properties", `sigil-control-button-variant-properties`),
+  cnd2(variant === "table-row", `sigil-control-button-variant-table-row`),
+  cnd2(variant === "toolbar", `sigil-control-button-variant-toolbar`),
+  cnd2(variant === "titlebar", `sigil-control-button-variant-titlebar`),
+  cnd2(touching, `sigil-control-button-touching`),
+  cnd2(active, `sigil-control-button-active`),
+  cnd2(touching && active, `sigil-control-button-active-touching`),
+  cnd2(primary, `sigil-control-button-primary`),
+  cnd2(destructive, `sigil-control-button-destructive`),
+  clsControlPosition2(position),
+  className
+);
+var ControlButtonFrame2 = (0, import_react44.forwardRef)(
+  ({
+    children,
+    className,
+    type,
+    variant = "toolbar",
+    icon,
+    active,
+    touching,
+    disabled,
+    title,
+    tooltipSide,
+    position,
+    primary,
+    destructive,
+    ...props
+  }, ref) => {
+    const btn = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      "button",
+      {
+        ...props,
+        ref,
+        type: type ?? "button",
+        disabled,
+        className: clsControlButton2({
+          variant,
+          active,
+          touching,
+          position,
+          primary,
+          destructive,
+          className
+        }),
+        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+            Icon2,
+            {
+              icon,
+              className: cn(cnd2(children, "text-[120%]", "text-[150%]"))
+            }
+          ),
+          children
+        ] })
+      }
+    );
+    if (!title) return btn;
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(TooltipWrapper2, { tooltip: title, side: tooltipSide, children: btn });
+  }
+);
+ControlButtonFrame2.displayName = "ControlButtonFrame";
+var ControlButton2 = (0, import_react44.forwardRef)(
+  ({ onClick, disabled, ...props }, ref) => {
+    const { handlers, touching } = usePressable3(onClick);
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      ControlButtonFrame2,
+      {
+        ...props,
+        ref,
+        disabled,
+        touching,
+        ...!disabled ? handlers : {}
+      }
+    );
+  }
+);
+ControlButton2.displayName = "ControlButton";
+var CheckboxControlButton2 = (0, import_react44.forwardRef)(({ active, label, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(ControlButton2, { ...props, ref, active, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon2, { icon: active ? "check_box" : "check_box_outline_blank" }),
+  label
+] }));
+CheckboxControlButton2.displayName = "CheckboxControlButton";
+var LongPressableControlButton2 = (0, import_react44.forwardRef)(({ active, disabled, onPress, onRelease, ...props }, ref) => {
+  const { handlers, touching } = useLongPressable3({ onPress, onRelease });
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    ControlButtonFrame2,
+    {
+      ...props,
+      ref,
+      active: active || touching,
+      disabled,
+      ...!disabled ? handlers : {}
+    }
+  );
+});
+LongPressableControlButton2.displayName = "LongPressableControlButton";
+var ControlButtonGroup2 = (0, import_react44.forwardRef)(({ children, className, position, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-sigil-control-gap
+        [&>button]:grow
+      `,
+      clsControlPosition2(position),
+      className
+    ),
+    children
+  }
+));
+ControlButtonGroup2.displayName = "ControlButtonGroup";
+
+// ../../packages/sigil/src/frontend/controls/content.tsx
+var import_react45 = require("react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var ControlParagraph2 = (0, import_react45.forwardRef)(({ className, mode, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  "p",
+  {
+    ...props,
+    ref,
+    className: cn(
+      "border border-transparent",
+      clsControlPosition2(position),
+      cnd2(
+        mode === "success",
+        `
+          border-sigil-usage-green-dimmed-border
+          bg-sigil-usage-green-dimmed-background p-1 text-sigil-usage-green-text
+        `
+      ),
+      cnd2(
+        mode === "warning",
+        `
+          border-sigil-usage-yellow-dimmed-border
+          bg-sigil-usage-yellow-dimmed-background p-1
+          text-sigil-usage-yellow-text
+        `
+      ),
+      cnd2(
+        mode === "error",
+        `
+          border-sigil-usage-red-dimmed-border
+          bg-sigil-usage-red-dimmed-background p-1 text-sigil-usage-red-text
+        `
+      ),
+      className
+    )
+  }
+));
+ControlParagraph2.displayName = "ControlParagraph";
+var ControlLabel2 = (0, import_react45.forwardRef)(
+  ({ className, disabled, nonMicro, position = "label", subgrid, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      "label",
+      {
+        ...props,
+        ref,
+        className: cn(
+          "flex items-center justify-end gap-0.6 p-0.6",
+          clsControlPosition2(position),
+          cnd2(nonMicro, "max-[550px]:hidden"),
+          cnd2(disabled, "opacity-50"),
+          clsControlSubgridPosition2(position, subgrid),
+          className
+        )
+      }
+    );
+  }
+);
+ControlLabel2.displayName = "ControlLabel";
+var ControlDetails2 = (0, import_react45.forwardRef)(
+  ({ align, className, position = "all", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        "flex items-center px-0.3 text-sigil-foreground-muted",
+        clsControlPosition2(position),
+        cnd2(align === "start", "justify-start"),
+        cnd2(align === "center", "justify-center"),
+        cnd2(align === "end", "justify-end"),
+        className
+      )
+    }
+  )
+);
+ControlDetails2.displayName = "ControlDetails";
+var InputSpanningTitle2 = (0, import_react45.forwardRef)(({ className, position = "row", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn(
+      "truncate p-0.6 text-center text-[0.8rem] font-bold",
+      clsControlPosition2(position),
+      className
+    )
+  }
+));
+InputSpanningTitle2.displayName = "InputSpanningTitle";
+
+// ../../packages/sigil/src/frontend/controls/input.tsx
+var import_react46 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+
+// ../../packages/sigil/src/frontend/controls/select.tsx
+var import_react47 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+var COLOR_OPTIONS2 = {
+  red: { label: "Red", value: "red", color: "red" },
+  blue: { label: "Blue", value: "blue", color: "blue" },
+  teal: { label: "Teal", value: "teal", color: "teal" },
+  green: { label: "Green", value: "green", color: "green" },
+  yellow: { label: "Yellow", value: "yellow", color: "yellow" },
+  purple: { label: "Purple", value: "purple", color: "purple" },
+  orange: { label: "Orange", value: "orange", color: "orange" },
+  brown: { label: "Brown", value: "brown", color: "brown" },
+  gray: { label: "Gray", value: "gray", color: "gray" }
+};
+var COLOR_OPTIONS_ARRAY2 = Object.values(COLOR_OPTIONS2);
+
+// ../../packages/sigil/src/frontend/dialogs.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+var isDarkDialog2 = (variant) => variant === "dark" || variant === "dark-compact";
+var DialogContext2 = (0, import_react48.createContext)({
+  createDialog: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayMessage: () => {
+    throw new Error("DialogContext not provided");
+  },
+  displayError: () => {
+    throw new Error("DialogContext not provided");
+  }
+});
+var DialogTitle2 = (0, import_react48.forwardRef)(
+  ({ className, variant = "light", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "div",
+    {
+      ...props,
+      ref,
+      className: cn(
+        `
+          flex items-center justify-center gap-0.6 border-b border-sigil-border
+          p-arcane font-bold
+        `,
+        cnd2(isDarkDialog2(variant), "bg-sigil-bg-light", "bg-sigil-bg-dark"),
+        className
+      )
+    }
+  )
+);
+DialogTitle2.displayName = "DialogTitle";
+var DialogButtons2 = (0, import_react48.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  "div",
+  {
+    ...props,
+    ref,
+    className: cn("mt-arcane flex justify-end gap-0.6", className)
+  }
+));
+DialogButtons2.displayName = "DialogButtons";
+var Dialog2 = ({
+  children,
+  dialogClosed,
+  closable = true,
+  title,
+  variant = "light"
+}) => {
+  const [dialogRef, setDialogRef] = (0, import_react48.useState)(null);
+  (0, import_react48.useEffect)(() => {
+    if (!dialogRef) return;
+    dialogRef.showModal();
+  }, [dialogRef]);
+  const close = () => dialogRef?.close();
+  const onClose = (event) => {
+    if (closable) {
+      dialogClosed();
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.showModal();
+  };
+  const onMouseDown = (event) => {
+    if (event.target === event.currentTarget) {
+      close();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "dialog",
+    {
+      ref: setDialogRef,
+      onMouseDown,
+      onClose,
+      className: cn(
+        `
+          max-w-[80vw] min-w-[10vw] border-none p-0 text-sigil-dialog-foreground
+          outline-none backdrop-sigil-dialog
+        `,
+        cnd2(isDarkDialog2(variant), "bg-sigil-bg-dark", "bg-sigil-bg-light")
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "border border-sigil-border", children: [
+        title && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(DialogTitle2, { variant, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+          "div",
+          {
+            className: cn(
+              "text-sigil-foreground",
+              cnd2(
+                variant === "light-compact" || variant === "dark-compact",
+                "p-0"
+              ),
+              cnd2(
+                variant !== "light-compact" && variant !== "dark-compact",
+                "p-arcane"
+              )
+            ),
+            children
+          }
+        )
+      ] })
+    }
+  );
+};
+
+// ../../packages/sigil/src/frontend/controls/dialogs.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var ControlDialogButtons2 = (0, import_react49.forwardRef)(({ children, className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  "div",
+  {
+    ref,
+    className: cn(
+      `
+        flex items-stretch gap-1
+        [&>button]:grow
+      `,
+      clsControlPosition2("row"),
+      className
+    ),
+    ...props,
+    children
+  }
+));
+var ControlDialog2 = ({
+  children,
+  large,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Dialog2, { ...props, variant: "dark", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  "div",
+  {
+    className: cn(
+      "gap-1 bg-sigil-bg-dark select-none",
+      cnd2(large, "control-grid-large", "control-grid")
+    ),
+    children
+  }
+) });
+
+// src/components/frontend/toolbox/root.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+var DeleteConfirmationDialog = ({ dialogMode, setDialogMode }) => {
+  const { updateConfig } = (0, import_react50.useContext)(ConfigContext);
+  const deleteTarget = (0, import_react50.useCallback)(() => {
+    updateConfig((current) => {
+      return {
+        ...current,
+        [dialogMode.section.type]: Object.fromEntries(
+          Object.entries(current[dialogMode.section.type]).filter(
+            ([uuid]) => uuid !== dialogMode.target.uuid
+          )
+        )
+      };
+    });
+    setDialogMode(null);
+  }, [updateConfig, dialogMode, setDialogMode]);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+    ControlDialog2,
+    {
+      dialogClosed: () => setDialogMode(null),
+      title: STRINGS[dialogMode.section.type].deleteDialog,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ControlDetails, { position: "row", children: STRINGS[dialogMode.section.type].deleteDialogDetails }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(ControlDialogButtons2, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ControlButton, { onClick: () => setDialogMode(null), variant: "large", children: "Cancel" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+            ControlButton,
+            {
+              onClick: deleteTarget,
+              variant: "large",
+              destructive: true,
+              icon: "delete",
+              children: "Delete"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var ToolboxRoot = ({ info }) => {
+  const { config } = info;
+  const { sendMessage, call } = (0, import_react50.useContext)(StageContext);
+  const [dialogMode, setDialogMode] = (0, import_react50.useState)(null);
+  const [assignToOutput, setAssignToOutput] = (0, import_react50.useState)(null);
+  (0, import_react50.useEffect)(() => {
+    if (assignToOutput) {
+      const onEscape = (e) => {
+        if (e.key === "Escape") {
+          setAssignToOutput(null);
+        }
+      };
+      window.addEventListener("keydown", onEscape);
+      return () => {
+        window.removeEventListener("keydown", onEscape);
+      };
+    }
+  }, [assignToOutput]);
+  const updateConfig = (0, import_react50.useCallback)(
+    (change) => {
+      const diff = diffJson(config, change(config));
+      sendMessage?.({
+        type: "component-message",
+        namespace: "timecode-toolbox",
+        component: "toolbox-root",
+        componentKey: info.key,
+        action: "update-config",
+        diff
+      });
+    },
+    [sendMessage, info.key, config]
+  );
+  const configContext = (0, import_react50.useMemo)(
+    () => ({
+      config,
+      network: info.network,
+      updateConfig
+    }),
+    [config, info.network, updateConfig]
+  );
+  const getNetworkInterfaces = (0, import_react50.useCallback)(async () => {
+    if (!call) {
+      throw new Error("No call function available");
+    }
+    return call({
+      namespace: "timecode-toolbox",
+      type: "component-call",
+      componentKey: info.key,
+      action: "toolbox-root-get-network-interfaces"
+    });
+  }, [call, info.key]);
+  const networkContextValue = (0, import_react50.useMemo)(() => {
+    return {
       getNetworkInterfaces
     };
   }, [getNetworkInterfaces]);
-  const assignToOutputCallback = (0, import_react42.useMemo)(() => {
+  const assignToOutputCallback = (0, import_react50.useMemo)(() => {
     if (!assignToOutput) {
       return null;
     }
@@ -18793,7 +19853,7 @@ var ToolboxRoot = ({ info }) => {
       setAssignToOutput(null);
     };
   }, [assignToOutput, updateConfig]);
-  const callHandler = (0, import_react42.useCallback)(
+  const callHandler = (0, import_react50.useCallback)(
     async ({ path, handler, args }) => {
       if (!call) {
         throw new Error("No call function available");
@@ -18810,26 +19870,26 @@ var ToolboxRoot = ({ info }) => {
     },
     [call, info.key]
   );
-  const handlers = (0, import_react42.useMemo)(
+  const handlers = (0, import_react50.useMemo)(
     () => ({
       handlers: info.handlers,
       callHandler
     }),
     [info.handlers, callHandler]
   );
-  const windowedTimecodeId = (0, import_react42.useMemo)(
+  const windowedTimecodeId = (0, import_react50.useMemo)(
     () => getFragmentValue("tc", TIMECODE_INSTANCE_ID),
     []
   );
-  const root = (0, import_react42.useMemo)(
-    () => windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Layout, { modes: null, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  const root = (0, import_react50.useMemo)(
+    () => windowedTimecodeId ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Layout, { modes: null, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(FullscreenTimecodeDisplay, { id: windowedTimecodeId }) }) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
         Layout,
         {
           footer: true,
           modes: {
             license: {
-              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                 License,
                 {
                   license: info.license,
@@ -18840,39 +19900,39 @@ var ToolboxRoot = ({ info }) => {
               title: STRINGS.license
             },
             settings: {
-              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Settings, { setWindowMode }),
+              child: (setWindowMode) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Settings, { setWindowMode }),
               icon: "settings",
               title: STRINGS.settings.title
             },
             debug: {
-              child: () => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
+              child: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Debugger, { title: STRINGS.debugger, className: "size-full" }),
               icon: "bug_report",
               title: STRINGS.debugger
             }
           },
           licenseMode: "license",
-          children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(UpdateBanner, {}),
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(UpdateBanner, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
               "div",
               {
                 className: "\n                  flex h-0 grow flex-col gap-px overflow-y-auto bg-sigil-border\n                  scrollbar-sigil\n                ",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     InputsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     GeneratorsSection,
                     {
                       setDialogMode,
                       assignToOutput: assignToOutputCallback
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                     OutputsSection,
                     {
                       setDialogMode,
@@ -18886,45 +19946,52 @@ var ToolboxRoot = ({ info }) => {
           ] })
         }
       ),
-      dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        InputSettingsDialog,
+      isDeleteDialogMode(dialogMode) ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+        DeleteConfirmationDialog,
         {
-          close: closeDialog,
-          input: dialogMode.section.input,
-          target: dialogMode.target
+          dialogMode,
+          setDialogMode
         }
-      ),
-      dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        GeneratorSettingsDialog,
-        {
-          close: closeDialog,
-          generator: dialogMode.section.generator,
-          target: dialogMode.target
-        }
-      ),
-      dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
-        OutputSettingsDialog,
-        {
-          close: closeDialog,
-          output: dialogMode.section.output,
-          target: dialogMode.target
-        }
-      )
+      ) : /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+        dialogMode?.section.type === "inputs" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          InputSettingsDialog,
+          {
+            setDialogMode,
+            input: dialogMode.section.input,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "generators" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          GeneratorSettingsDialog,
+          {
+            setDialogMode,
+            generator: dialogMode.section.generator,
+            target: dialogMode.target
+          }
+        ),
+        dialogMode?.section.type === "outputs" && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+          OutputSettingsDialog,
+          {
+            setDialogMode,
+            output: dialogMode.section.output,
+            target: dialogMode.target
+          }
+        )
+      ] })
     ] }),
     [
       assignToOutput,
       assignToOutputCallback,
-      closeDialog,
       dialogMode,
       windowedTimecodeId,
       info.license
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ConfigContext.Provider, { value: configContext, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(NetworkContext.Provider, { value: networkContextValue, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ApplicationStateContext.Provider, { value: info.state, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(ApplicationHandlersContext.Provider, { value: handlers, children: root }) }) }) });
 };
 
 // src/components/frontend/index.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var timecodeToolboxFrontendComponents = () => ({
   namespace: NAMESPACE,
   render: (info) => {
@@ -18933,9 +20000,9 @@ var timecodeToolboxFrontendComponents = () => ({
     }
     switch (info.component) {
       case "toolbox-root":
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ToolboxRoot, { info });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ToolboxRoot, { info });
       case "license-gate":
-        return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(LicenseGate, { info });
+        return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(LicenseGate, { info });
     }
   }
 });
@@ -18943,10 +20010,11 @@ var startTimecodeToolboxServerFrontend = (browser) => {
   startSigilFrontend({
     browser,
     appRenderers: [timecodeToolboxFrontendComponents()],
-    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
+    loadingState: () => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { style: { width: "100%", textAlign: "center", padding: "2rem" }, children: "Loading Toolbox..." })
   });
 };
 window.startTimecodeToolboxServerFrontend = startTimecodeToolboxServerFrontend;
+window.createBrowserMediaSession = createBrowserMediaSession;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   startTimecodeToolboxServerFrontend,