@norskvideo/norsk-studio 1.27.0-2025-03-21-8f677d4f → 1.27.0-2025-03-23-1dbee9e6

package/ui/index.js

@@ -1097,7 +1097,7 @@ var require_react_development = __commonJS({
           }
           return dispatcher.useContext(Context7);
         }
-        function useState36(initialState7) {
+        function useState37(initialState7) {
           var dispatcher = resolveDispatcher();
           return dispatcher.useState(initialState7);
         }
@@ -1900,7 +1900,7 @@ var require_react_development = __commonJS({
         exports.useMemo = useMemo12;
         exports.useReducer = useReducer9;
         exports.useRef = useRef19;
-        exports.useState = useState36;
+        exports.useState = useState37;
         exports.useSyncExternalStore = useSyncExternalStore;
         exports.useTransition = useTransition;
         exports.version = ReactVersion;
@@ -171634,7 +171634,7 @@ var require_deep_equal = __commonJS({
       }
       return true;
     }
-    module.exports = function deepEqual4(a2, b2, opts) {
+    module.exports = function deepEqual5(a2, b2, opts) {
       return internalDeepEqual(a2, b2, opts, getSideChannel());
     };
   }
@@ -171728,6 +171728,46 @@ function displayNodeId(id, document2) {
 function assertUnreachable(_2) {
   throw new Error("Didn't expect to get here");
 }
+function streamMatchesExpected(s3, expectedStreams) {
+  const matchingStream = expectedStreams.find((expected) => {
+    if (expected.media !== s3.message.case)
+      return false;
+    if (expected.programNumber !== void 0 && s3.streamKey.programNumber !== expected.programNumber)
+      return false;
+    if (expected.streamId !== void 0 && s3.streamKey.streamId !== expected.streamId)
+      return false;
+    if (expected.renditionName !== void 0 && s3.streamKey.renditionName !== expected.renditionName)
+      return false;
+    if (expected.sourceName !== void 0 && s3.streamKey.sourceName !== expected.sourceName)
+      return false;
+    return true;
+  });
+  return !!matchingStream;
+}
+function shortStreamNameFromFilter(s3) {
+  const components = [s3.media];
+  if (s3.sourceName)
+    components.push(s3.sourceName.toString());
+  else if (s3.programNumber)
+    components.push(s3.programNumber.toString());
+  else if (s3.streamId)
+    components.push(s3.streamId.toString());
+  else if (s3.renditionName)
+    components.push(s3.renditionName.toString());
+  return components.join("-");
+}
+function streamNameFromDefinition(s3) {
+  const components = [s3.media];
+  if (s3.sourceName)
+    components.push(s3.sourceName.toString());
+  if (s3.programNumber)
+    components.push(s3.programNumber.toString());
+  if (s3.streamId)
+    components.push(s3.streamId.toString());
+  if (s3.renditionName)
+    components.push(s3.renditionName.toString());
+  return components.join("-");
+}
 
 // build/client/client/jsx/icons.js
 var import_jsx_runtime = __toESM(require_jsx_runtime());
@@ -212681,209 +212721,10 @@ var registerables = [
 var import_client4 = __toESM(require_client());
 
 // build/client/client/jsx/selected.js
-var import_jsx_runtime144 = __toESM(require_jsx_runtime());
+var import_jsx_runtime143 = __toESM(require_jsx_runtime());
 
 // build/client/client/jsx/selected-connection.js
-var import_jsx_runtime121 = __toESM(require_jsx_runtime());
-
-// build/client/client/jsx/connection-editor.js
 var import_jsx_runtime120 = __toESM(require_jsx_runtime());
-var import_react84 = __toESM(require_react());
-function ConnectionEditor(props) {
-  return (0, import_jsx_runtime120.jsx)(ConnectionEditorImpl, { ...props });
-}
-function deriveAvailableModes(source, dest) {
-  const acceptType = dest.subscription.accepts?.type;
-  const produceType = source.subscription.produces?.type;
-  if (!acceptType || !produceType) {
-    throw new Error("Node doesn't support subscriptions");
-  }
-  switch (produceType) {
-    case "simple-stream":
-      return ["take-first-stream"];
-    case "dynamic-streams":
-      return ["take-first-stream", "take-specific-streams", "take-all-streams"];
-    default:
-      assertUnreachable(produceType);
-  }
-}
-function ConnectionEditorImpl(props) {
-  const sourceNodeInfo = props.connection.sourceNode.info;
-  const destNodeInfo = props.connection.destinationNode.info;
-  const sourceNodeInputs = props.connection.sourceNode.subscriptions.flatMap((s3) => s3.expectedStreams);
-  const latest = props.connection.subscription.streams;
-  const availableStreams = outputStreamComponents(sourceNodeInfo.subscription.produces, props.connection.sourceNode.config, sourceNodeInputs);
-  const availableMedia = outputMedia(sourceNodeInfo.subscription.produces, props.connection.sourceNode.config, sourceNodeInputs);
-  const defaultStreamSelection = latest.type == "take-specific-streams" ? latest.filter : [];
-  const availableModes = deriveAvailableModes(sourceNodeInfo, destNodeInfo);
-  const allowedMedia = inputMedia(destNodeInfo.subscription.accepts, props.connection.destinationNode.config);
-  const [mode, setMode] = (0, import_react84.useState)(availableModes.includes(latest.type) ? latest.type : availableModes[0]);
-  const dynamicStreamsMode = destNodeInfo.subscription.accepts?.type == "dynamic-streams" ? destNodeInfo.subscription.accepts.mode : void 0;
-  const inputStreamsGroupingKey = sourceNodeInfo.subscription?.produces?.type == "dynamic-streams" ? sourceNodeInfo.subscription?.produces.groupBy : void 0;
-  const groupingKey = dynamicStreamsMode && typeof dynamicStreamsMode != "string" ? dynamicStreamsMode.groupBy : inputStreamsGroupingKey;
-  const availableGroups = groupingKey ? [...new Set(availableStreams.map((s3) => s3[groupingKey]?.toString())).values()].filter((s3) => !!s3) : [];
-  const [simpleStreamSelection, setSimpleStreamSelection] = (0, import_react84.useState)(true);
-  const [streamSelection, setStreamSelection] = (0, import_react84.useState)(defaultStreamSelection);
-  const defaultMediaSelection = {
-    audio: false,
-    video: false,
-    subtitle: false,
-    playlist: false,
-    ancillary: false
-  };
-  if (latest.type == "take-all-streams" || latest.type == "take-first-stream") {
-    const selectedMedia = latest.filter.map((f) => f.media);
-    for (const k2 in defaultMediaSelection) {
-      if (selectedMedia.includes(k2))
-        defaultMediaSelection[k2] = true;
-    }
-  }
-  const [mediaSelection, setMediaSelection] = (0, import_react84.useState)(defaultMediaSelection);
-  const [validationMessage, setValidationMessage] = (0, import_react84.useState)({
-    streams: void 0,
-    media: void 0
-  });
-  (0, import_react84.useEffect)(() => {
-    doValidation();
-  }, [mediaSelection, streamSelection]);
-  return (0, import_jsx_runtime120.jsx)("div", { className: "z-40 w-64 max-w-xs overflow-y-auto bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime120.jsxs)("div", { children: [(0, import_jsx_runtime120.jsxs)("div", { children: [(0, import_jsx_runtime120.jsx)("h4", { className: "mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white", children: "Edit Subscription" }), (0, import_jsx_runtime120.jsxs)("p", { className: "text-l text-gray-900 dark:text-white", children: ["Source: ", props.connection.sourceNode.id] }), (0, import_jsx_runtime120.jsxs)("p", { className: "text-l text-gray-900 dark:text-white", children: ["Destination: ", props.connection.destinationNode.id] })] }), (0, import_jsx_runtime120.jsxs)("button", { type: "button", onClick: props.onCancel, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-1 right-1 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime120.jsx)("span", { className: "sr-only", children: "Close menu" })] }), (0, import_jsx_runtime120.jsxs)("form", { noValidate: true, children: [(0, import_jsx_runtime120.jsx)("div", { className: "form-group", children: modeDropdown() }), (0, import_jsx_runtime120.jsx)("div", { className: "form-group", children: selectionInputs() }), (0, import_jsx_runtime120.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime120.jsx)("button", { type: "submit", onClick: onSubmit, className: "text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: "Save" }), (0, import_jsx_runtime120.jsxs)("button", { type: "button", onClick: props.onCancel, className: "inline-flex w-full justify-center text-gray-500 items-center bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600", children: [(0, import_jsx_runtime120.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 -ml-1 sm:mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime120.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] })] })] })] }) });
-  function doValidation() {
-    let isError = false;
-    const newValue = { media: void 0, streams: void 0 };
-    if (mode == "take-specific-streams" && streamSelection.length == 0) {
-      newValue.streams = "At least one stream must be selected";
-      isError = true;
-    }
-    setValidationMessage(newValue);
-    return !isError;
-  }
-  function onSubmit(e2) {
-    e2.preventDefault();
-    if (doValidation()) {
-      switch (mode) {
-        case "take-all-streams":
-        case "take-first-stream":
-          props.onSaved({
-            type: mode,
-            filter: Object.entries(mediaSelection).filter(([_2, v2]) => v2).map(([k2, _2]) => ({ media: k2 }))
-          });
-          break;
-        case "take-specific-streams":
-          props.onSaved({
-            type: mode,
-            filter: streamSelection
-          });
-          break;
-        default:
-          assertUnreachable(mode);
-      }
-    }
-  }
-  function onMultiStreamSelectChange(stream) {
-    return (checked) => {
-      if (!checked) {
-        const newValue = [...streamSelection];
-        const i3 = newValue.findIndex((v2) => {
-          if (streamMatchesFilter(stream, v2)) {
-            return true;
-          }
-          return false;
-        });
-        if (i3 >= 0) {
-          newValue.splice(i3, 1);
-          setStreamSelection(newValue);
-        }
-      } else {
-        const newValue = [...streamSelection];
-        newValue.push(stream);
-        setStreamSelection(newValue);
-      }
-    };
-  }
-  function onGroupSelectChange(group) {
-    return (checked) => {
-      if (!groupingKey)
-        return;
-      const withoutGroup = streamSelection.filter((s3) => s3[groupingKey] != group);
-      if (!checked) {
-        setStreamSelection(withoutGroup);
-      } else {
-        const newGroups = availableStreams.filter((s3) => s3[groupingKey] == group && allowedMedia.includes(s3.media));
-        const final = withoutGroup.concat(newGroups);
-        setStreamSelection(final);
-      }
-    };
-  }
-  function onMediaSelectChange(media) {
-    return (selected) => {
-      const updated = {
-        ...mediaSelection
-      };
-      updated[media] = selected;
-      setMediaSelection(updated);
-    };
-  }
-  function modeDropdown() {
-    if (availableModes.length === 1) {
-      return (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [(0, import_jsx_runtime120.jsxs)("legend", { className: "mt-4", children: ["Strategy: ", SubscriptionTypeInfo[mode]] }), (0, import_jsx_runtime120.jsx)("p", { className: "node-editor-helper-text mb-4 mt-2", children: SubscriptionTypeDescription[mode] })] });
-    } else {
-      return (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [(0, import_jsx_runtime120.jsx)("legend", { className: "mt-4", children: "Strategy" }), (0, import_jsx_runtime120.jsx)(Select, { id: "selection-mode", className: "node-editor-select-input", defaultValue: mode, onChange: (e2) => setMode(e2.target.value), children: availableModes.map((m2, i3) => {
-        return (0, import_jsx_runtime120.jsx)("option", { value: m2, children: SubscriptionTypeInfo[m2] }, i3);
-      }) }), (0, import_jsx_runtime120.jsx)("p", { className: "node-editor-helper-text mb-4 mt-2", children: SubscriptionTypeDescription[mode] })] });
-    }
-  }
-  function selectionInputs() {
-    switch (mode) {
-      case "take-all-streams":
-      case "take-first-stream":
-        return (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: mediaSelectionCheckboxes() });
-      case "take-specific-streams":
-        return groupingKey ? (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [(0, import_jsx_runtime120.jsx)(ToggleSwitch, { id: "simple-select", checked: simpleStreamSelection, onChange: (c2) => setSimpleStreamSelection(c2) }), (0, import_jsx_runtime120.jsx)(Label, { htmlFor: "simple-seledt", children: "Simple" }), simpleStreamSelection ? groupedStreamSelection() : multiStreamSelection()] }) : (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [" ", multiStreamSelection(), " "] });
-      default:
-        assertUnreachable(mode);
-    }
-  }
-  function maybeValidationMessage(message) {
-    return message ? (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime120.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime120.jsx)("div", { children: message })] }) }) : (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, {});
-  }
-  function mediaSelectionCheckboxes() {
-    return (0, import_jsx_runtime120.jsxs)(import_jsx_runtime120.Fragment, { children: [(0, import_jsx_runtime120.jsx)("legend", { className: "mt-4", children: "Media Selection" }), (0, import_jsx_runtime120.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The media types that will be used from this node" }), availableMedia.map((media) => {
-      const used = mediaSelection[media];
-      const mediaEnabled = allowedMedia.includes(media);
-      return (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime120.jsx)(ToggleSwitch, { id: "accept", className: `ml-1 ${mediaEnabled ? "" : "opacity-10"}`, checked: used, disabled: !mediaEnabled, onChange: onMediaSelectChange(media) }), (0, import_jsx_runtime120.jsxs)(Label, { className: `${mediaEnabled ? "" : "opacity-10"}`, htmlFor: "accept", children: [media, " "] })] }, media);
-    }), maybeValidationMessage(validationMessage.media)] });
-  }
-  function groupedStreamSelection() {
-    if (!groupingKey)
-      return;
-    return (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: (0, import_jsx_runtime120.jsxs)("fieldset", { className: "flex max-w-md flex-col gap-4", children: [(0, import_jsx_runtime120.jsx)("legend", { className: "mt-4", children: "Stream Selection (simplified)" }), (0, import_jsx_runtime120.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The streams that will be used from this node" }), availableGroups.map((s3, i3) => {
-      const selectedStreams = streamSelection.filter((f) => f[groupingKey] == s3 && allowedMedia.includes(f.media));
-      const totalStreams = availableStreams.filter((f) => f[groupingKey] == s3 && allowedMedia.includes(f.media));
-      return (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime120.jsx)(ToggleSwitch, { id: `stream-${i3}`, name: "streams", value: i3, checked: selectedStreams.length > 0 && selectedStreams.length == totalStreams.length, onChange: onGroupSelectChange(s3) }), (0, import_jsx_runtime120.jsx)(Label, { htmlFor: `stream-${i3}`, children: s3 })] }, i3);
-    }), maybeValidationMessage(validationMessage.streams)] }) });
-  }
-  function multiStreamSelection() {
-    return (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: (0, import_jsx_runtime120.jsxs)("fieldset", { className: "flex max-w-md flex-col gap-4", children: [(0, import_jsx_runtime120.jsx)("legend", { className: "mt-4", children: "Stream Selection" }), (0, import_jsx_runtime120.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The streams that will be used from this node" }), availableStreams.map((s3, i3) => {
-      const mediaEnabled = allowedMedia.includes(s3.media);
-      return (0, import_jsx_runtime120.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime120.jsx)(ToggleSwitch, { id: `stream-${i3}`, name: "streams", value: i3, checked: !!streamSelection.find((f) => streamMatchesFilter(s3, f)), disabled: !mediaEnabled, onChange: onMultiStreamSelectChange(s3) }), (0, import_jsx_runtime120.jsx)(Label, { htmlFor: `stream-${i3}`, children: streamNameFromDefinition(s3) })] }, i3);
-    }), maybeValidationMessage(validationMessage.streams)] }) });
-  }
-}
-function streamNameFromDefinition(s3) {
-  const components = [s3.media];
-  if (s3.sourceName)
-    components.push(s3.sourceName.toString());
-  if (s3.programNumber)
-    components.push(s3.programNumber.toString());
-  if (s3.streamId)
-    components.push(s3.streamId.toString());
-  if (s3.renditionName)
-    components.push(s3.renditionName.toString());
-  return components.join("-");
-}
-var connection_editor_default = ConnectionEditor;
-
-// build/client/client/jsx/selected-connection.js
 function SelectedConnection(props) {
   function onEditClick(e2) {
     e2.preventDefault();
@@ -212897,7 +212738,7 @@ function SelectedConnection(props) {
     e2.preventDefault();
     props.onClearSelection();
   }
-  return (0, import_jsx_runtime121.jsx)("div", { className: "z-40 w-64 max-w-xs overflow-y-auto bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime121.jsxs)("div", { children: [(0, import_jsx_runtime121.jsxs)("div", { children: [(0, import_jsx_runtime121.jsx)("h4", { className: "mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white", children: "Subscription" }), (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime121.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime121.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(props.connection.sourceNode.id, props.toplevel) })] }), (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime121.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Destination" }), (0, import_jsx_runtime121.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(props.connection.destinationNode.id, props.toplevel) })] })] }), (0, import_jsx_runtime121.jsxs)("button", { type: "button", onClick: onClearSelectionClick, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-1 right-1 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime121.jsx)("span", { className: "sr-only", children: "Close menu" })] }), (0, import_jsx_runtime121.jsx)(SubscriptionSummarySmall, { sourceNode: props.connection.sourceNode, subscription: props.connection.subscription }), (0, import_jsx_runtime121.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime121.jsxs)("button", { type: "button", onClick: onEditClick, className: "text-white w-full inline-flex items-center justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: [(0, import_jsx_runtime121.jsxs)("svg", { "aria-hidden": "true", className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: [(0, import_jsx_runtime121.jsx)("path", { d: "M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" }), (0, import_jsx_runtime121.jsx)("path", { fillRule: "evenodd", d: "M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z", clipRule: "evenodd" })] }), "Edit"] }), (0, import_jsx_runtime121.jsxs)("button", { type: "button", onClick: onDeleteClick, className: "inline-flex w-full items-center text-white justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900", children: [(0, import_jsx_runtime121.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 mr-1.5 -ml-1", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime121.jsx)("path", { fillRule: "evenodd", d: "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }), "Delete"] })] })] }) });
+  return (0, import_jsx_runtime120.jsx)("div", { className: "z-40 w-64 max-w-xs overflow-y-auto bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime120.jsxs)("div", { children: [(0, import_jsx_runtime120.jsxs)("div", { children: [(0, import_jsx_runtime120.jsx)("h4", { className: "mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white", children: "Subscription" }), (0, import_jsx_runtime120.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime120.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime120.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(props.connection.sourceNode.id, props.toplevel) })] }), (0, import_jsx_runtime120.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime120.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Destination" }), (0, import_jsx_runtime120.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(props.connection.destinationNode.id, props.toplevel) })] })] }), (0, import_jsx_runtime120.jsxs)("button", { type: "button", onClick: onClearSelectionClick, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-1 right-1 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime120.jsx)("span", { className: "sr-only", children: "Close menu" })] }), (0, import_jsx_runtime120.jsx)(SubscriptionSummarySmall, { sourceNode: props.connection.sourceNode, subscription: props.connection.subscription }), (0, import_jsx_runtime120.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime120.jsxs)("button", { type: "button", onClick: onEditClick, className: "text-white w-full inline-flex items-center justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: [(0, import_jsx_runtime120.jsxs)("svg", { "aria-hidden": "true", className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: [(0, import_jsx_runtime120.jsx)("path", { d: "M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" }), (0, import_jsx_runtime120.jsx)("path", { fillRule: "evenodd", d: "M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z", clipRule: "evenodd" })] }), "Edit"] }), (0, import_jsx_runtime120.jsxs)("button", { type: "button", onClick: onDeleteClick, className: "inline-flex w-full items-center text-white justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900", children: [(0, import_jsx_runtime120.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 mr-1.5 -ml-1", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime120.jsx)("path", { fillRule: "evenodd", d: "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }), "Delete"] })] })] }) });
 }
 function SubscriptionSummarySmall(props) {
   const sourceNodeInfo = props.sourceNode.info;
@@ -212917,58 +212758,58 @@ function SubscriptionSummarySmall(props) {
   for (const m2 of subscriptionMedia(props.subscription)) {
     mediaSelection[m2] = true;
   }
-  return (0, import_jsx_runtime121.jsxs)("dl", { className: "cursor-pointer", children: [(0, import_jsx_runtime121.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime121.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Strategy" }), (0, import_jsx_runtime121.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: SubscriptionTypeInfo[mode] })] }), selectionInputs()] });
+  return (0, import_jsx_runtime120.jsxs)("dl", { className: "cursor-pointer", children: [(0, import_jsx_runtime120.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime120.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Strategy" }), (0, import_jsx_runtime120.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: SubscriptionTypeInfo[mode] })] }), selectionInputs()] });
   function selectionInputs() {
     switch (mode) {
       case "take-all-streams":
       case "take-first-stream":
-        return (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: mediaSelectionCheckboxes() });
+        return (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: mediaSelectionCheckboxes() });
       case "take-specific-streams":
-        return (0, import_jsx_runtime121.jsx)(import_jsx_runtime121.Fragment, { children: multiStreamSelection() });
+        return (0, import_jsx_runtime120.jsx)(import_jsx_runtime120.Fragment, { children: multiStreamSelection() });
       default:
         assertUnreachable(mode);
     }
   }
   function mediaSelectionCheckboxes() {
-    return (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime121.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Media Selection" }), (0, import_jsx_runtime121.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: Object.entries(mediaSelection).filter(([_2, u2]) => u2).map(([m2]) => m2).join(", ") })] });
+    return (0, import_jsx_runtime120.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime120.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Media Selection" }), (0, import_jsx_runtime120.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: Object.entries(mediaSelection).filter(([_2, u2]) => u2).map(([m2]) => m2).join(", ") })] });
   }
   function multiStreamSelection() {
-    return (0, import_jsx_runtime121.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime121.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Stream Selection" }), (0, import_jsx_runtime121.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: availableStreams.filter((s3) => !!streamSelection.find((f) => streamMatchesFilter(s3, f))).map((s3) => `${streamNameFromDefinition(s3)}`).join(", ") })] });
+    return (0, import_jsx_runtime120.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime120.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Stream Selection" }), (0, import_jsx_runtime120.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: availableStreams.filter((s3) => !!streamSelection.find((f) => streamMatchesFilter(s3, f))).map((s3) => `${streamNameFromDefinition(s3)}`).join(", ") })] });
   }
 }
 var selected_connection_default = SelectedConnection;
 
 // build/client/client/jsx/selected-node.js
-var import_jsx_runtime143 = __toESM(require_jsx_runtime());
-var import_react100 = __toESM(require_react());
+var import_jsx_runtime142 = __toESM(require_jsx_runtime());
+var import_react99 = __toESM(require_react());
 
 // ../../node_modules/highlight.js/es/index.js
 var import_lib5 = __toESM(require_lib(), 1);
 var es_default = import_lib5.default;
 
 // ../../node_modules/@uiw/react-json-view/esm/index.js
-var import_react99 = __toESM(require_react());
+var import_react98 = __toESM(require_react());
 
 // ../../node_modules/@uiw/react-json-view/esm/store.js
-var import_react91 = __toESM(require_react());
+var import_react90 = __toESM(require_react());
 
 // ../../node_modules/@uiw/react-json-view/esm/store/ShowTools.js
-var import_react85 = __toESM(require_react());
-var import_jsx_runtime122 = __toESM(require_jsx_runtime());
+var import_react84 = __toESM(require_react());
+var import_jsx_runtime121 = __toESM(require_jsx_runtime());
 var initialState = {};
-var Context = /* @__PURE__ */ (0, import_react85.createContext)(initialState);
+var Context = /* @__PURE__ */ (0, import_react84.createContext)(initialState);
 var reducer = (state, action) => _extends({}, state, action);
 var useShowToolsStore = () => {
-  return (0, import_react85.useContext)(Context);
+  return (0, import_react84.useContext)(Context);
 };
-var DispatchShowTools = /* @__PURE__ */ (0, import_react85.createContext)(() => {
+var DispatchShowTools = /* @__PURE__ */ (0, import_react84.createContext)(() => {
 });
 DispatchShowTools.displayName = "JVR.DispatchShowTools";
 function useShowTools() {
-  return (0, import_react85.useReducer)(reducer, initialState);
+  return (0, import_react84.useReducer)(reducer, initialState);
 }
 function useShowToolsDispatch() {
-  return (0, import_react85.useContext)(DispatchShowTools);
+  return (0, import_react84.useContext)(DispatchShowTools);
 }
 var ShowTools = (_ref) => {
   var {
@@ -212976,9 +212817,9 @@ var ShowTools = (_ref) => {
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Context.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Context.Provider, {
     value: initial,
-    children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(DispatchShowTools.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(DispatchShowTools.Provider, {
       value: dispatch,
       children
     })
@@ -212987,22 +212828,22 @@ var ShowTools = (_ref) => {
 ShowTools.displayName = "JVR.ShowTools";
 
 // ../../node_modules/@uiw/react-json-view/esm/store/Expands.js
-var import_react86 = __toESM(require_react());
-var import_jsx_runtime123 = __toESM(require_jsx_runtime());
+var import_react85 = __toESM(require_react());
+var import_jsx_runtime122 = __toESM(require_jsx_runtime());
 var initialState2 = {};
-var Context2 = /* @__PURE__ */ (0, import_react86.createContext)(initialState2);
+var Context2 = /* @__PURE__ */ (0, import_react85.createContext)(initialState2);
 var reducer2 = (state, action) => _extends({}, state, action);
 var useExpandsStore = () => {
-  return (0, import_react86.useContext)(Context2);
+  return (0, import_react85.useContext)(Context2);
 };
-var DispatchExpands = /* @__PURE__ */ (0, import_react86.createContext)(() => {
+var DispatchExpands = /* @__PURE__ */ (0, import_react85.createContext)(() => {
 });
 DispatchExpands.displayName = "JVR.DispatchExpands";
 function useExpands() {
-  return (0, import_react86.useReducer)(reducer2, initialState2);
+  return (0, import_react85.useReducer)(reducer2, initialState2);
 }
 function useExpandsDispatch() {
-  return (0, import_react86.useContext)(DispatchExpands);
+  return (0, import_react85.useContext)(DispatchExpands);
 }
 var Expands = (_ref) => {
   var {
@@ -213010,9 +212851,9 @@ var Expands = (_ref) => {
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Context2.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(Context2.Provider, {
     value: initial,
-    children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(DispatchExpands.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime122.jsx)(DispatchExpands.Provider, {
       value: dispatch,
       children
     })
@@ -213021,8 +212862,8 @@ var Expands = (_ref) => {
 Expands.displayName = "JVR.Expands";
 
 // ../../node_modules/@uiw/react-json-view/esm/store/Types.js
-var import_react87 = __toESM(require_react());
-var import_jsx_runtime124 = __toESM(require_jsx_runtime());
+var import_react86 = __toESM(require_react());
+var import_jsx_runtime123 = __toESM(require_jsx_runtime());
 var initialState3 = {
   Str: {
     as: "span",
@@ -213144,19 +212985,19 @@ var initialState3 = {
     children: "date"
   }
 };
-var Context3 = /* @__PURE__ */ (0, import_react87.createContext)(initialState3);
+var Context3 = /* @__PURE__ */ (0, import_react86.createContext)(initialState3);
 var reducer3 = (state, action) => _extends({}, state, action);
 var useTypesStore = () => {
-  return (0, import_react87.useContext)(Context3);
+  return (0, import_react86.useContext)(Context3);
 };
-var DispatchTypes = /* @__PURE__ */ (0, import_react87.createContext)(() => {
+var DispatchTypes = /* @__PURE__ */ (0, import_react86.createContext)(() => {
 });
 DispatchTypes.displayName = "JVR.DispatchTypes";
 function useTypes() {
-  return (0, import_react87.useReducer)(reducer3, initialState3);
+  return (0, import_react86.useReducer)(reducer3, initialState3);
 }
 function useTypesDispatch() {
-  return (0, import_react87.useContext)(DispatchTypes);
+  return (0, import_react86.useContext)(DispatchTypes);
 }
 function Types(_ref) {
   var {
@@ -213164,9 +213005,9 @@ function Types(_ref) {
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Context3.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(Context3.Provider, {
     value: initial,
-    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DispatchTypes.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(DispatchTypes.Provider, {
       value: dispatch,
       children
     })
@@ -213175,11 +213016,11 @@ function Types(_ref) {
 Types.displayName = "JVR.Types";
 
 // ../../node_modules/@uiw/react-json-view/esm/store/Symbols.js
-var import_react89 = __toESM(require_react());
+var import_react88 = __toESM(require_react());
 
 // ../../node_modules/@uiw/react-json-view/esm/arrow/TriangleArrow.js
-var import_react88 = __toESM(require_react());
-var import_jsx_runtime125 = __toESM(require_jsx_runtime());
+var import_react87 = __toESM(require_react());
+var import_jsx_runtime124 = __toESM(require_jsx_runtime());
 var _excluded3 = ["style"];
 function TriangleArrow(props) {
   var {
@@ -213192,12 +213033,12 @@ function TriangleArrow(props) {
     userSelect: "none",
     display: "inline-flex"
   }, style);
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("svg", _extends({
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("svg", _extends({
     viewBox: "0 0 24 24",
     fill: "var(--w-rjv-arrow-color, currentColor)",
     style: defaultStyle
   }, reset, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("path", {
+    children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("path", {
       d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"
     })
   }));
@@ -213205,7 +213046,7 @@ function TriangleArrow(props) {
 TriangleArrow.displayName = "JVR.TriangleArrow";
 
 // ../../node_modules/@uiw/react-json-view/esm/store/Symbols.js
-var import_jsx_runtime126 = __toESM(require_jsx_runtime());
+var import_jsx_runtime125 = __toESM(require_jsx_runtime());
 var initialState4 = {
   Arrow: {
     as: "span",
@@ -213214,7 +213055,7 @@ var initialState4 = {
       transform: "rotate(0deg)",
       transition: "all 0.3s"
     },
-    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(TriangleArrow, {})
+    children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(TriangleArrow, {})
   },
   Colon: {
     as: "span",
@@ -213275,19 +213116,19 @@ var initialState4 = {
     children: "}"
   }
 };
-var Context4 = /* @__PURE__ */ (0, import_react89.createContext)(initialState4);
+var Context4 = /* @__PURE__ */ (0, import_react88.createContext)(initialState4);
 var reducer4 = (state, action) => _extends({}, state, action);
 var useSymbolsStore = () => {
-  return (0, import_react89.useContext)(Context4);
+  return (0, import_react88.useContext)(Context4);
 };
-var DispatchSymbols = /* @__PURE__ */ (0, import_react89.createContext)(() => {
+var DispatchSymbols = /* @__PURE__ */ (0, import_react88.createContext)(() => {
 });
 DispatchSymbols.displayName = "JVR.DispatchSymbols";
 function useSymbols() {
-  return (0, import_react89.useReducer)(reducer4, initialState4);
+  return (0, import_react88.useReducer)(reducer4, initialState4);
 }
 function useSymbolsDispatch() {
-  return (0, import_react89.useContext)(DispatchSymbols);
+  return (0, import_react88.useContext)(DispatchSymbols);
 }
 var Symbols = (_ref) => {
   var {
@@ -213295,9 +213136,9 @@ var Symbols = (_ref) => {
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Context4.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(Context4.Provider, {
     value: initial,
-    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(DispatchSymbols.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(DispatchSymbols.Provider, {
       value: dispatch,
       children
     })
@@ -213306,8 +213147,8 @@ var Symbols = (_ref) => {
 Symbols.displayName = "JVR.Symbols";
 
 // ../../node_modules/@uiw/react-json-view/esm/store/Section.js
-var import_react90 = __toESM(require_react());
-var import_jsx_runtime127 = __toESM(require_jsx_runtime());
+var import_react89 = __toESM(require_react());
+var import_jsx_runtime126 = __toESM(require_jsx_runtime());
 var initialState5 = {
   Copied: {
     className: "w-rjv-copied",
@@ -213354,19 +213195,19 @@ var initialState5 = {
     className: "w-rjv-object-key"
   }
 };
-var Context5 = /* @__PURE__ */ (0, import_react90.createContext)(initialState5);
+var Context5 = /* @__PURE__ */ (0, import_react89.createContext)(initialState5);
 var reducer5 = (state, action) => _extends({}, state, action);
 var useSectionStore = () => {
-  return (0, import_react90.useContext)(Context5);
+  return (0, import_react89.useContext)(Context5);
 };
-var DispatchSection = /* @__PURE__ */ (0, import_react90.createContext)(() => {
+var DispatchSection = /* @__PURE__ */ (0, import_react89.createContext)(() => {
 });
 DispatchSection.displayName = "JVR.DispatchSection";
 function useSection() {
-  return (0, import_react90.useReducer)(reducer5, initialState5);
+  return (0, import_react89.useReducer)(reducer5, initialState5);
 }
 function useSectionDispatch() {
-  return (0, import_react90.useContext)(DispatchSection);
+  return (0, import_react89.useContext)(DispatchSection);
 }
 var Section = (_ref) => {
   var {
@@ -213374,9 +213215,9 @@ var Section = (_ref) => {
     dispatch,
     children
   } = _ref;
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Context5.Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(Context5.Provider, {
     value: initial,
-    children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(DispatchSection.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(DispatchSection.Provider, {
       value: dispatch,
       children
     })
@@ -213385,21 +213226,21 @@ var Section = (_ref) => {
 Section.displayName = "JVR.Section";
 
 // ../../node_modules/@uiw/react-json-view/esm/store.js
-var import_jsx_runtime128 = __toESM(require_jsx_runtime());
+var import_jsx_runtime127 = __toESM(require_jsx_runtime());
 var initialState6 = {
   objectSortKeys: false,
   indentWidth: 15
 };
-var Context6 = /* @__PURE__ */ (0, import_react91.createContext)(initialState6);
+var Context6 = /* @__PURE__ */ (0, import_react90.createContext)(initialState6);
 Context6.displayName = "JVR.Context";
-var DispatchContext = /* @__PURE__ */ (0, import_react91.createContext)(() => {
+var DispatchContext = /* @__PURE__ */ (0, import_react90.createContext)(() => {
 });
 DispatchContext.displayName = "JVR.DispatchContext";
 function reducer6(state, action) {
   return _extends({}, state, action);
 }
 var useStore = () => {
-  return (0, import_react91.useContext)(Context6);
+  return (0, import_react90.useContext)(Context6);
 };
 var Provider = (_ref) => {
   var {
@@ -213407,30 +213248,30 @@ var Provider = (_ref) => {
     initialState: init,
     initialTypes
   } = _ref;
-  var [state, dispatch] = (0, import_react91.useReducer)(reducer6, Object.assign({}, initialState6, init));
+  var [state, dispatch] = (0, import_react90.useReducer)(reducer6, Object.assign({}, initialState6, init));
   var [showTools, showToolsDispatch] = useShowTools();
   var [expands, expandsDispatch] = useExpands();
   var [types, typesDispatch] = useTypes();
   var [symbols, symbolsDispatch] = useSymbols();
   var [section, sectionDispatch] = useSection();
-  (0, import_react91.useEffect)(() => dispatch(_extends({}, init)), [init]);
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Context6.Provider, {
+  (0, import_react90.useEffect)(() => dispatch(_extends({}, init)), [init]);
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Context6.Provider, {
     value: state,
-    children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(DispatchContext.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(DispatchContext.Provider, {
       value: dispatch,
-      children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(ShowTools, {
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(ShowTools, {
         initial: showTools,
         dispatch: showToolsDispatch,
-        children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Expands, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Expands, {
           initial: expands,
           dispatch: expandsDispatch,
-          children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Types, {
+          children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Types, {
             initial: _extends({}, types, initialTypes),
             dispatch: typesDispatch,
-            children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Symbols, {
+            children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Symbols, {
               initial: symbols,
               dispatch: symbolsDispatch,
-              children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Section, {
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Section, {
                 initial: section,
                 dispatch: sectionDispatch,
                 children
@@ -213445,7 +213286,7 @@ var Provider = (_ref) => {
 Provider.displayName = "JVR.Provider";
 
 // ../../node_modules/@uiw/react-json-view/esm/Container.js
-var import_react98 = __toESM(require_react());
+var import_react97 = __toESM(require_react());
 
 // ../../node_modules/@babel/runtime/helpers/esm/objectDestructuringEmpty.js
 function _objectDestructuringEmpty(t3) {
@@ -213453,7 +213294,7 @@ function _objectDestructuringEmpty(t3) {
 }
 
 // ../../node_modules/@uiw/react-json-view/esm/symbol/index.js
-var import_jsx_runtime129 = __toESM(require_jsx_runtime());
+var import_jsx_runtime128 = __toESM(require_jsx_runtime());
 var _excluded4 = ["isNumber", "value", "parentValue", "keyName", "keys"];
 var _excluded22 = ["as", "render"];
 var _excluded32 = ["as", "render"];
@@ -213489,7 +213330,7 @@ var Quote = (props) => {
   };
   var child = render2 && typeof render2 === "function" && render2(elmProps, result);
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Elm, _extends({}, elmProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Elm, _extends({}, elmProps));
 };
 Quote.displayName = "JVR.Quote";
 var ValueQuote = (props) => {
@@ -213505,7 +213346,7 @@ var ValueQuote = (props) => {
   var elmProps = _extends({}, other, reset);
   var child = render2 && typeof render2 === "function" && render2(elmProps, {});
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Elm, _extends({}, elmProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Elm, _extends({}, elmProps));
 };
 ValueQuote.displayName = "JVR.ValueQuote";
 var Colon = (props) => {
@@ -213530,7 +213371,7 @@ var Colon = (props) => {
     keys: keys || (keyName ? [keyName] : [])
   });
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Elm, _extends({}, reset));
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Elm, _extends({}, reset));
 };
 Colon.displayName = "JVR.Colon";
 var Arrow = (props) => {
@@ -213566,7 +213407,7 @@ var Arrow = (props) => {
   };
   var child = isRender && render2(elmProps, result);
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Elm, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Elm, _extends({}, reset, {
     style: _extends({}, style, resetStyle)
   }));
 };
@@ -213597,7 +213438,7 @@ var BracketsOpen = (props) => {
     var BracketsLeftComp = as || "span";
     var _child = _render && typeof _render === "function" && _render(reset, result);
     if (_child) return _child;
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BracketsLeftComp, _extends({}, reset));
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(BracketsLeftComp, _extends({}, reset));
   }
   var {
     as: elm,
@@ -213606,7 +213447,7 @@ var BracketsOpen = (props) => {
   var BraceLeftComp = elm || "span";
   var child = render2 && typeof render2 === "function" && render2(resetProps, result);
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BraceLeftComp, _extends({}, resetProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(BraceLeftComp, _extends({}, resetProps));
 };
 BracketsOpen.displayName = "JVR.BracketsOpen";
 var BracketsClose = (props) => {
@@ -213637,7 +213478,7 @@ var BracketsClose = (props) => {
     var BracketsRightComp = as || "span";
     var _child2 = _render2 && typeof _render2 === "function" && _render2(_reset, result);
     if (_child2) return _child2;
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BracketsRightComp, _extends({}, _reset));
+    return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(BracketsRightComp, _extends({}, _reset));
   }
   var {
     as: elm,
@@ -213646,12 +213487,12 @@ var BracketsClose = (props) => {
   var BraceRightComp = elm || "span";
   var child = render2 && typeof render2 === "function" && render2(reset, result);
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BraceRightComp, _extends({}, reset));
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(BraceRightComp, _extends({}, reset));
 };
 BracketsClose.displayName = "JVR.BracketsClose";
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/NestedClose.js
-var import_jsx_runtime130 = __toESM(require_jsx_runtime());
+var import_jsx_runtime129 = __toESM(require_jsx_runtime());
 var NestedClose = (props) => {
   var _expands$expandKey;
   var {
@@ -213683,9 +213524,9 @@ var NestedClose = (props) => {
   var style = {
     paddingLeft: 4
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", {
     style,
-    children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(BracketsClose, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(BracketsClose, {
       isBrackets: isArray2 || isMySet,
       isVisiable: true
     })
@@ -213694,11 +213535,11 @@ var NestedClose = (props) => {
 NestedClose.displayName = "JVR.NestedClose";
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/KeyValues.js
-var import_react97 = __toESM(require_react());
+var import_react96 = __toESM(require_react());
 
 // ../../node_modules/@uiw/react-json-view/esm/types/index.js
-var import_react92 = __toESM(require_react());
-var import_jsx_runtime131 = __toESM(require_jsx_runtime());
+var import_react91 = __toESM(require_react());
+var import_jsx_runtime130 = __toESM(require_jsx_runtime());
 var _excluded10 = ["as", "render"];
 var _excluded23 = ["as", "render"];
 var _excluded33 = ["as", "render"];
@@ -213747,7 +213588,7 @@ var SetComp = (_ref) => {
   });
   if (type) return type;
   var Elm = as || "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Elm, _extends({}, reset));
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Elm, _extends({}, reset));
 };
 SetComp.displayName = "JVR.SetComp";
 var MapComp = (_ref2) => {
@@ -213773,7 +213614,7 @@ var MapComp = (_ref2) => {
   });
   if (type) return type;
   var Elm = as || "span";
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Elm, _extends({}, reset));
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Elm, _extends({}, reset));
 };
 MapComp.displayName = "JVR.MapComp";
 var defalutStyle = {
@@ -213797,8 +213638,8 @@ var TypeString = (_ref3) => {
     render: render2
   } = Str, reset = _objectWithoutPropertiesLoose(Str, _excluded33);
   var childrenStr = children;
-  var [shorten, setShorten] = (0, import_react92.useState)(length && childrenStr.length > length);
-  (0, import_react92.useEffect)(() => setShorten(length && childrenStr.length > length), [length]);
+  var [shorten, setShorten] = (0, import_react91.useState)(length && childrenStr.length > length);
+  (0, import_react91.useEffect)(() => setShorten(length && childrenStr.length > length), [length]);
   var Comp = as || "span";
   var style = _extends({}, defalutStyle, Str.style || {});
   if (length > 0) {
@@ -213828,14 +213669,14 @@ var TypeString = (_ref3) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-      children: [/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ValueQuote, {}), /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+      children: [/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ValueQuote, {}), /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
         className: "w-rjv-value",
         children: text
-      })), /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ValueQuote, {})]
+      })), /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ValueQuote, {})]
     })]
   });
 };
@@ -213871,10 +213712,10 @@ var TypeTrue = (_ref4) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
     }))]
@@ -213912,10 +213753,10 @@ var TypeFalse = (_ref5) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
     }))]
@@ -213953,10 +213794,10 @@ var TypeFloat = (_ref6) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
     }))]
@@ -213994,10 +213835,10 @@ var TypeInt = (_ref7) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
     }))]
@@ -214035,10 +213876,10 @@ var TypeBigint = (_ref8) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: bigIntToString(children == null ? void 0 : children.toString())
     }))]
@@ -214076,15 +213917,15 @@ var TypeUrl = (_ref9) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("a", _extends({
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("a", _extends({
       href: children == null ? void 0 : children.href,
       target: "_blank"
     }, reset, {
       className: "w-rjv-value",
-      children: [/* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ValueQuote, {}), children == null ? void 0 : children.href, /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(ValueQuote, {})]
+      children: [/* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ValueQuote, {}), children == null ? void 0 : children.href, /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(ValueQuote, {})]
     }))]
   });
 };
@@ -214121,10 +213962,10 @@ var TypeDate = (_ref10) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
-    }))), child || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+    }))), child || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: childStr
     }))]
@@ -214162,8 +214003,8 @@ var TypeUndefined = (_ref11) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
     }))), child]
   });
@@ -214200,8 +214041,8 @@ var TypeNull = (_ref12) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
     }))), child]
   });
@@ -214238,8 +214079,8 @@ var TypeNan = (_ref13) => {
     value: children,
     keyName
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(import_react92.Fragment, {
-    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Comp, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_react91.Fragment, {
+    children: [displayDataTypes && (type || /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Comp, _extends({}, reset, {
       style
     }))), child]
   });
@@ -214247,7 +214088,7 @@ var TypeNan = (_ref13) => {
 TypeNan.displayName = "JVR.TypeNan";
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/Value.js
-var import_jsx_runtime132 = __toESM(require_jsx_runtime());
+var import_jsx_runtime131 = __toESM(require_jsx_runtime());
 var isFloat = (n3) => Number(n3) === n3 && n3 % 1 !== 0 || isNaN(n3);
 var Value = (props) => {
   var {
@@ -214258,54 +214099,54 @@ var Value = (props) => {
     keyName
   };
   if (value instanceof URL) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeUrl, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeUrl, _extends({}, reset, {
       children: value
     }));
   }
   if (typeof value === "string") {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeString, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeString, _extends({}, reset, {
       children: value
     }));
   }
   if (value === true) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeTrue, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeTrue, _extends({}, reset, {
       children: value
     }));
   }
   if (value === false) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeFalse, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeFalse, _extends({}, reset, {
       children: value
     }));
   }
   if (value === null) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeNull, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeNull, _extends({}, reset, {
       children: value
     }));
   }
   if (value === void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeUndefined, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeUndefined, _extends({}, reset, {
       children: value
     }));
   }
   if (value instanceof Date) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeDate, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeDate, _extends({}, reset, {
       children: value
     }));
   }
   if (typeof value === "number" && isNaN(value)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeNan, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeNan, _extends({}, reset, {
       children: value
     }));
   } else if (typeof value === "number" && isFloat(value)) {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeFloat, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeFloat, _extends({}, reset, {
       children: value
     }));
   } else if (typeof value === "bigint") {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeBigint, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeBigint, _extends({}, reset, {
       children: value
     }));
   } else if (typeof value === "number") {
-    return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(TypeInt, _extends({}, reset, {
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(TypeInt, _extends({}, reset, {
       children: value
     }));
   }
@@ -214314,7 +214155,7 @@ var Value = (props) => {
 Value.displayName = "JVR.Value";
 
 // ../../node_modules/@uiw/react-json-view/esm/utils/useRender.js
-var import_react93 = __toESM(require_react());
+var import_react92 = __toESM(require_react());
 function useSymbolsRender(currentProps, props, key) {
   var dispatch = useSymbolsDispatch();
   var cls = [currentProps.className, props.className].filter(Boolean).join(" ");
@@ -214323,7 +214164,7 @@ function useSymbolsRender(currentProps, props, key) {
     style: _extends({}, currentProps.style, props.style),
     children: props.children || currentProps.children
   });
-  (0, import_react93.useEffect)(() => dispatch({
+  (0, import_react92.useEffect)(() => dispatch({
     [key]: reset
   }), [props]);
 }
@@ -214335,7 +214176,7 @@ function useTypesRender(currentProps, props, key) {
     style: _extends({}, currentProps.style, props.style),
     children: props.children || currentProps.children
   });
-  (0, import_react93.useEffect)(() => dispatch({
+  (0, import_react92.useEffect)(() => dispatch({
     [key]: reset
   }), [props]);
 }
@@ -214347,13 +214188,13 @@ function useSectionRender(currentProps, props, key) {
     style: _extends({}, currentProps.style, props.style),
     children: props.children || currentProps.children
   });
-  (0, import_react93.useEffect)(() => dispatch({
+  (0, import_react92.useEffect)(() => dispatch({
     [key]: reset
   }), [props]);
 }
 
 // ../../node_modules/@uiw/react-json-view/esm/section/KeyName.js
-var import_jsx_runtime133 = __toESM(require_jsx_runtime());
+var import_jsx_runtime132 = __toESM(require_jsx_runtime());
 var _excluded14 = ["as", "render"];
 var KeyName = (props) => {
   var {
@@ -214393,14 +214234,14 @@ var KeyNameComp = (props) => {
     keys: keys || (keyName ? [keyName] : [])
   });
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Elm, _extends({}, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(Elm, _extends({}, reset, {
     children
   }));
 };
 KeyNameComp.displayName = "JVR.KeyNameComp";
 
 // ../../node_modules/@uiw/react-json-view/esm/section/Row.js
-var import_jsx_runtime134 = __toESM(require_jsx_runtime());
+var import_jsx_runtime133 = __toESM(require_jsx_runtime());
 var _excluded15 = ["children", "value", "parentValue", "keyName", "keys"];
 var _excluded24 = ["as", "render", "children"];
 var Row = (props) => {
@@ -214436,17 +214277,17 @@ var RowComp = (props) => {
     keys
   });
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Elm, _extends({}, other, reset, {
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Elm, _extends({}, other, reset, {
     children
   }));
 };
 RowComp.displayName = "JVR.RowComp";
 
 // ../../node_modules/@uiw/react-json-view/esm/utils/useHighlight.js
-var import_react94 = __toESM(require_react());
+var import_react93 = __toESM(require_react());
 function usePrevious(value) {
-  var ref = (0, import_react94.useRef)();
-  (0, import_react94.useEffect)(() => {
+  var ref = (0, import_react93.useRef)();
+  (0, import_react93.useEffect)(() => {
     ref.current = value;
   });
   return ref.current;
@@ -214458,7 +214299,7 @@ function useHighlight(_ref) {
     highlightContainer
   } = _ref;
   var prevValue = usePrevious(value);
-  var isHighlight = (0, import_react94.useMemo)(() => {
+  var isHighlight = (0, import_react93.useMemo)(() => {
     if (!highlightUpdates || prevValue === void 0) return false;
     if (typeof value !== typeof prevValue) {
       return true;
@@ -214477,7 +214318,7 @@ function useHighlight(_ref) {
       return true;
     }
   }, [highlightUpdates, value]);
-  (0, import_react94.useEffect)(() => {
+  (0, import_react93.useEffect)(() => {
     if (highlightContainer && highlightContainer.current && isHighlight && "animate" in highlightContainer.current) {
       highlightContainer.current.animate([{
         backgroundColor: "var(--w-rjv-update-color, #ebcb8b)"
@@ -214492,8 +214333,8 @@ function useHighlight(_ref) {
 }
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/Copied.js
-var import_react95 = __toESM(require_react());
-var import_jsx_runtime135 = __toESM(require_jsx_runtime());
+var import_react94 = __toESM(require_react());
+var import_jsx_runtime134 = __toESM(require_jsx_runtime());
 var _excluded16 = ["keyName", "value", "parentValue", "expandKey", "keys"];
 var _excluded25 = ["as", "render"];
 var Copied = (props) => {
@@ -214510,7 +214351,7 @@ var Copied = (props) => {
   } = useStore();
   var showTools = useShowToolsStore();
   var isShowTools = showTools[expandKey];
-  var [copied, setCopied] = (0, import_react95.useState)(false);
+  var [copied, setCopied] = (0, import_react94.useState)(false);
   var {
     Copied: Comp = {}
   } = useSectionStore();
@@ -214582,18 +214423,18 @@ var Copied = (props) => {
   });
   if (child) return child;
   if (copied) {
-    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("svg", _extends({
+    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("svg", _extends({
       viewBox: "0 0 32 36"
     }, elmProps, {
-      children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("path", {
+      children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("path", {
         d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,26.1114493 L27.5,28.4926435 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
       })
     }));
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("svg", _extends({
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("svg", _extends({
     viewBox: "0 0 32 36"
   }, elmProps, {
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("path", {
+    children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("path", {
       d: "M27.5,33 L2.5,33 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
     })
   }));
@@ -214601,9 +214442,9 @@ var Copied = (props) => {
 Copied.displayName = "JVR.Copied";
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/useIdCompat.js
-var import_react96 = __toESM(require_react());
+var import_react95 = __toESM(require_react());
 function useIdCompat() {
-  var idRef = (0, import_react96.useRef)(null);
+  var idRef = (0, import_react95.useRef)(null);
   if (idRef.current === null) {
     idRef.current = "custom-id-" + Math.random().toString(36).substr(2, 9);
   }
@@ -214611,7 +214452,7 @@ function useIdCompat() {
 }
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/KeyValues.js
-var import_jsx_runtime136 = __toESM(require_jsx_runtime());
+var import_jsx_runtime135 = __toESM(require_jsx_runtime());
 var KeyValues = (props) => {
   var _expands$expandKey;
   var {
@@ -214657,12 +214498,12 @@ var KeyValues = (props) => {
     paddingLeft: indentWidth,
     marginLeft: 6
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", {
     className: "w-rjv-wrap",
     style,
     children: entries.map((_ref5, idx) => {
       var [key, val] = _ref5;
-      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(KeyValuesItem, {
+      return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(KeyValuesItem, {
         parentValue: value,
         keyName: key,
         keys: [...keys, key],
@@ -214684,7 +214525,7 @@ var KayName = (props) => {
     highlightUpdates
   } = useStore();
   var isNumber3 = typeof keyName === "number";
-  var highlightContainer = (0, import_react97.useRef)(null);
+  var highlightContainer = (0, import_react96.useRef)(null);
   useHighlight({
     value,
     highlightUpdates,
@@ -214696,19 +214537,19 @@ var KayName = (props) => {
     keys,
     parentValue
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(import_react97.Fragment, {
-    children: [/* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("span", {
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(import_react96.Fragment, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("span", {
       ref: highlightContainer,
-      children: [/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Quote, _extends({
+      children: [/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Quote, _extends({
         isNumber: isNumber3,
         "data-placement": "left"
-      }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(KeyNameComp, _extends({}, compProps, {
+      }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(KeyNameComp, _extends({}, compProps, {
         children: keyName
-      })), /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Quote, _extends({
+      })), /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Quote, _extends({
         isNumber: isNumber3,
         "data-placement": "right"
       }, compProps))]
-    }), /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Colon, _extends({}, compProps))]
+    }), /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Colon, _extends({}, compProps))]
   });
 };
 KayName.displayName = "JVR.KayName";
@@ -214731,7 +214572,7 @@ var KeyValuesItem = (props) => {
   var isNested = isMyObject || isMyArray || isMySet || isMyMap;
   if (isNested) {
     var myValue = isMySet ? Array.from(value) : isMyMap ? Object.fromEntries(value) : value;
-    return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Container, {
+    return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Container, {
       keyName,
       value: myValue,
       parentValue,
@@ -214748,22 +214589,22 @@ var KeyValuesItem = (props) => {
       [subkeyid]: false
     })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(RowComp, _extends({
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(RowComp, _extends({
     className: "w-rjv-line",
     value,
     keyName,
     keys,
     parentValue
   }, reset, {
-    children: [/* @__PURE__ */ (0, import_jsx_runtime136.jsx)(KayName, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime135.jsx)(KayName, {
       keyName,
       value,
       keys,
       parentValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Value, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Value, {
       keyName,
       value
-    }), /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Copied, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(Copied, {
       keyName,
       value,
       keys,
@@ -214775,7 +214616,7 @@ var KeyValuesItem = (props) => {
 KeyValuesItem.displayName = "JVR.KeyValuesItem";
 
 // ../../node_modules/@uiw/react-json-view/esm/section/CountInfoExtra.js
-var import_jsx_runtime137 = __toESM(require_jsx_runtime());
+var import_jsx_runtime136 = __toESM(require_jsx_runtime());
 var _excluded17 = ["value", "keyName"];
 var _excluded26 = ["as", "render"];
 var CountInfoExtra = (props) => {
@@ -214807,12 +214648,12 @@ var CountInfoExtraComps = (props) => {
     keyName
   });
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Elm, _extends({}, elmProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(Elm, _extends({}, elmProps));
 };
 CountInfoExtraComps.displayName = "JVR.CountInfoExtraComps";
 
 // ../../node_modules/@uiw/react-json-view/esm/section/CountInfo.js
-var import_jsx_runtime138 = __toESM(require_jsx_runtime());
+var import_jsx_runtime137 = __toESM(require_jsx_runtime());
 var _excluded18 = ["value", "keyName"];
 var _excluded27 = ["as", "render"];
 var CountInfo = (props) => {
@@ -214854,12 +214695,12 @@ var CountInfoComp = (props) => {
     keyName
   });
   if (child) return child;
-  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Elm, _extends({}, elmProps));
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(Elm, _extends({}, elmProps));
 };
 CountInfoComp.displayName = "JVR.CountInfoComp";
 
 // ../../node_modules/@uiw/react-json-view/esm/section/Ellipsis.js
-var import_jsx_runtime139 = __toESM(require_jsx_runtime());
+var import_jsx_runtime138 = __toESM(require_jsx_runtime());
 var _excluded19 = ["as", "render"];
 var Ellipsis = (props) => {
   var {
@@ -214891,12 +214732,12 @@ var EllipsisComp = (_ref) => {
   });
   if (child) return child;
   if (!isExpanded || typeof value === "object" && Object.keys(value).length == 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Elm, _extends({}, reset));
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Elm, _extends({}, reset));
 };
 EllipsisComp.displayName = "JVR.EllipsisComp";
 
 // ../../node_modules/@uiw/react-json-view/esm/comps/NestedOpen.js
-var import_jsx_runtime140 = __toESM(require_jsx_runtime());
+var import_jsx_runtime139 = __toESM(require_jsx_runtime());
 var NestedOpen = (props) => {
   var _expands$expandKey;
   var {
@@ -214962,32 +214803,32 @@ var NestedOpen = (props) => {
     keys,
     parentValue
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("span", _extends({}, reset, {
-    children: [showArrow && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Arrow, _extends({
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("span", _extends({}, reset, {
+    children: [showArrow && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Arrow, _extends({
       style: arrowStyle,
       expandKey
-    }, compProps)), (keyName || typeof keyName === "number") && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(KayName, _extends({}, compProps)), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(SetComp, {
+    }, compProps)), (keyName || typeof keyName === "number") && /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(KayName, _extends({}, compProps)), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(SetComp, {
       value: initialValue,
       keyName
-    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(MapComp, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(MapComp, {
       value: initialValue,
       keyName
-    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(BracketsOpen, _extends({
+    }), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(BracketsOpen, _extends({
       isBrackets: isArray2 || isMySet
-    }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(EllipsisComp, {
+    }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(EllipsisComp, {
       keyName,
       value,
       isExpanded
-    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(BracketsClose, _extends({
+    }), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(BracketsClose, _extends({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray2 || isMySet
-    }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CountInfoComp, {
+    }, compProps)), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(CountInfoComp, {
       value,
       keyName
-    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(CountInfoExtraComps, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(CountInfoExtraComps, {
       value,
       keyName
-    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(Copied, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Copied, {
       keyName,
       value,
       expandKey,
@@ -214999,9 +214840,9 @@ var NestedOpen = (props) => {
 NestedOpen.displayName = "JVR.NestedOpen";
 
 // ../../node_modules/@uiw/react-json-view/esm/Container.js
-var import_jsx_runtime141 = __toESM(require_jsx_runtime());
+var import_jsx_runtime140 = __toESM(require_jsx_runtime());
 var _excluded20 = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
-var Container = /* @__PURE__ */ (0, import_react98.forwardRef)((props, ref) => {
+var Container = /* @__PURE__ */ (0, import_react97.forwardRef)((props, ref) => {
   var {
     className = "",
     parentValue,
@@ -215022,11 +214863,11 @@ var Container = /* @__PURE__ */ (0, import_react98.forwardRef)((props, ref) => {
       [subkeyid]: false
     })
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", _extends({
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", _extends({
     className: defaultClassNames,
     ref
   }, elmProps, reset, {
-    children: [/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(NestedOpen, {
+    children: [/* @__PURE__ */ (0, import_jsx_runtime140.jsx)(NestedOpen, {
       expandKey: subkeyid,
       value,
       level,
@@ -215034,14 +214875,14 @@ var Container = /* @__PURE__ */ (0, import_react98.forwardRef)((props, ref) => {
       parentValue,
       keyName,
       initialValue
-    }), /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(KeyValues, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(KeyValues, {
       expandKey: subkeyid,
       value,
       level,
       keys,
       parentValue,
       keyName
-    }), /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(NestedClose, {
+    }), /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(NestedClose, {
       expandKey: subkeyid,
       value,
       level,
@@ -215272,9 +215113,9 @@ var Copied2 = (props) => {
 Copied2.displayName = "JVR.Copied";
 
 // ../../node_modules/@uiw/react-json-view/esm/index.js
-var import_jsx_runtime142 = __toESM(require_jsx_runtime());
+var import_jsx_runtime141 = __toESM(require_jsx_runtime());
 var _excluded21 = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
-var JsonView = /* @__PURE__ */ (0, import_react99.forwardRef)((props, ref) => {
+var JsonView = /* @__PURE__ */ (0, import_react98.forwardRef)((props, ref) => {
   var {
     className = "",
     style,
@@ -215300,7 +215141,7 @@ var JsonView = /* @__PURE__ */ (0, import_react99.forwardRef)((props, ref) => {
     fontSize: 13
   }, style);
   var cls = ["w-json-view-container", "w-rjv", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(Provider, {
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(Provider, {
     initialState: {
       value,
       objectSortKeys,
@@ -215317,7 +215158,7 @@ var JsonView = /* @__PURE__ */ (0, import_react99.forwardRef)((props, ref) => {
     initialTypes: {
       displayDataTypes
     },
-    children: [/* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Container, _extends({
+    children: [/* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Container, _extends({
       value
     }, elmProps, {
       ref,
@@ -215417,15 +215258,48 @@ var githubDarkTheme = {
 };
 
 // build/client/client/jsx/selected-node.js
+var import_deep_equal = __toESM(require_deep_equal());
 function SelectedNode(props) {
-  const { isDarkMode } = (0, import_react100.useContext)(GlobalContext);
+  const { isDarkMode } = (0, import_react99.useContext)(GlobalContext);
   const urls = {
     instanceUrl: instanceApiUrl(props.node.description.id, props.env),
     staticUrl: staticApiUrl(props.node.description.info.identifier, props.env)
   };
-  (0, import_react100.useEffect)(() => {
+  (0, import_react99.useEffect)(() => {
     es_default.highlightAll();
   }, []);
+  const [metrics, setMetrics] = (0, import_react99.useState)({});
+  async function gatherMetrics() {
+    const relevantSources = props.node.description.subscriptions.map((s3) => s3.source);
+    const newMetrics = {};
+    await Promise.all(relevantSources.map(async (id) => {
+      const baseUrl2 = instanceApiUrl(id, props.env);
+      const metricsUrl = `${baseUrl2}/metrics`;
+      const request = await fetch(metricsUrl);
+      if (request.status == 200) {
+        const json = await request.json();
+        newMetrics[id] = json;
+      } else {
+        newMetrics[id] = [];
+      }
+    }));
+    console.log("calling setMetrics");
+    setMetrics(newMetrics);
+  }
+  (0, import_react99.useEffect)(() => {
+    let timerRef = void 0;
+    if (props.isLive) {
+      void gatherMetrics();
+      timerRef = window.setInterval(() => {
+        void gatherMetrics();
+      }, 5e3);
+    }
+    return () => {
+      if (timerRef !== void 0) {
+        clearInterval(timerRef);
+      }
+    };
+  }, [props.isLive]);
   function onEditClick(e2) {
     e2.preventDefault();
     props.onEdit(props.node);
@@ -215439,69 +215313,53 @@ function SelectedNode(props) {
     props.onClearSelection();
   }
   function render_error(e2, i3) {
-    return (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime143.jsx)("div", { children: e2.message })] }, i3);
+    return (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime142.jsx)("div", { children: e2.message })] }, i3);
   }
   function render_warning(e2, i3) {
-    return (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300", role: "alert", children: [info(), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime143.jsx)("div", { children: e2.message })] }, i3);
+    return (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300", role: "alert", children: [info(), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime142.jsx)("div", { children: e2.message })] }, i3);
   }
-  return (0, import_jsx_runtime143.jsxs)("div", { id: `selected-node-${props.node.description.id}`, className: "w-full max-w-sm bg-white dark:bg-gray-800", children: [(0, import_jsx_runtime143.jsxs)("div", { children: [(0, import_jsx_runtime143.jsxs)("h4", { className: "flex items-center justify-between mb-1.5 leading-none text-xl font-extrabold text-gray-900 dark:text-white", children: [(0, import_jsx_runtime143.jsx)("span", { children: props.node.description.config.displayName }), (0, import_jsx_runtime143.jsxs)("button", { type: "button", onClick: onClearSelectionClick, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Close menu" })] })] }), (0, import_jsx_runtime143.jsxs)("p", { className: "mb-5 font-semibold text-gray-800 dark:text-gray-200", children: [(0, import_jsx_runtime143.jsx)("span", { className: "fold-bold", children: "Type" }), ": ", props.node.description.info.name, " ", (0, import_jsx_runtime143.jsxs)("a", { target: "_blank", href: componentDocs(props.node.description.info.identifier, props.env).toString(), children: [(0, import_jsx_runtime143.jsx)("svg", { className: "inline w-6 h-6 text-gray-800 dark:text-white", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime143.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Docs" })] })] })] }), (0, import_jsx_runtime143.jsxs)("dl", { children: [props.isLive ? (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {}) : (0, import_jsx_runtime143.jsxs)("div", { className: "flex justify-center mt-2 mb-5 space-x-4 w-full", children: [(0, import_jsx_runtime143.jsxs)("button", { type: "button", onClick: onEditClick, className: "text-white w-full inline-flex items-center justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: [(0, import_jsx_runtime143.jsxs)("svg", { "aria-hidden": "true", className: "mr-1 -ml-1 w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: [(0, import_jsx_runtime143.jsx)("path", { d: "M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" }), (0, import_jsx_runtime143.jsx)("path", { fillRule: "evenodd", d: "M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z", clipRule: "evenodd" })] }), "Edit"] }), (0, import_jsx_runtime143.jsxs)("button", { type: "button", onClick: onDeleteClick, className: "inline-flex w-full items-center text-white justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900", children: [(0, import_jsx_runtime143.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 mr-1.5 -ml-1", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime143.jsx)("path", { fillRule: "evenodd", d: "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }), "Delete"] })] }), !props.isLive && (props.node.errors.length > 0 || props.node.warnings.length > 0) ? (0, import_jsx_runtime143.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime143.jsx)("div", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "This component has some problems that need fixing" }), props.node.errors.length > 0 && (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, { children: props.node.errors.map((e2, i3) => render_error(e2, i3)) }), props.node.warnings.length > 0 && (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, { children: props.node.warnings.map((w2, i3) => render_warning(w2, i3)) })] }) : (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {}), props.isLive && props?.liveState?.runtimeState && props.node.description.info.runtime?.summary && urls ? (0, import_jsx_runtime143.jsx)(import_react100.Suspense, { fallback: (0, import_jsx_runtime143.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime143.jsx)(props.node.description.info.runtime.summary, { state: props.liveState.runtimeState, config: props.liveState.config, sendCommand: props.sendCommand, urls }) }) : (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [(0, import_jsx_runtime143.jsx)("dt", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "JSON Config" }), (0, import_jsx_runtime143.jsx)("dd", { children: (0, import_jsx_runtime143.jsx)(esm_default, { value: props.node.description.config, shortenTextAfterLength: 0, highlightUpdates: false, collapsed: 1, enableClipboard: false, displayDataTypes: false, displayObjectSize: false, indentWidth: 10, style: isDarkMode ? githubDarkTheme : githubLightTheme, className: "p-1 rounded-md" }) })] }), props.isLive && props.liveState && Object.keys(props.liveState.alerts).length > 0 ? (0, import_jsx_runtime143.jsxs)("div", { className: "mb-2", children: [(0, import_jsx_runtime143.jsx)("div", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "This component has raised some alerts" }), Object.values(props.liveState.alerts).filter((f) => f.level == "error").map((error2, i3) => {
-    return (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime143.jsx)("div", { children: error2.message })] }, i3);
+  return (0, import_jsx_runtime142.jsxs)("div", { id: `selected-node-${props.node.description.id}`, className: "w-full max-w-sm bg-white dark:bg-gray-800", children: [(0, import_jsx_runtime142.jsxs)("div", { children: [(0, import_jsx_runtime142.jsxs)("h4", { className: "flex items-center justify-between mb-1.5 leading-none text-xl font-extrabold text-gray-900 dark:text-white", children: [(0, import_jsx_runtime142.jsx)("span", { children: props.node.description.config.displayName }), (0, import_jsx_runtime142.jsxs)("button", { type: "button", onClick: onClearSelectionClick, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Close menu" })] })] }), (0, import_jsx_runtime142.jsxs)("p", { className: "mb-5 font-semibold text-gray-800 dark:text-gray-200", children: [(0, import_jsx_runtime142.jsx)("span", { className: "fold-bold", children: "Type" }), ": ", props.node.description.info.name, " ", (0, import_jsx_runtime142.jsxs)("a", { target: "_blank", href: componentDocs(props.node.description.info.identifier, props.env).toString(), children: [(0, import_jsx_runtime142.jsx)("svg", { className: "inline w-6 h-6 text-gray-800 dark:text-white", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime142.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Docs" })] })] })] }), (0, import_jsx_runtime142.jsxs)("dl", { children: [props.isLive ? (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, {}) : (0, import_jsx_runtime142.jsxs)("div", { className: "flex justify-center mt-2 mb-5 space-x-4 w-full", children: [(0, import_jsx_runtime142.jsxs)("button", { type: "button", onClick: onEditClick, className: "text-white w-full inline-flex items-center justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: [(0, import_jsx_runtime142.jsxs)("svg", { "aria-hidden": "true", className: "mr-1 -ml-1 w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: [(0, import_jsx_runtime142.jsx)("path", { d: "M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" }), (0, import_jsx_runtime142.jsx)("path", { fillRule: "evenodd", d: "M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z", clipRule: "evenodd" })] }), "Edit"] }), (0, import_jsx_runtime142.jsxs)("button", { type: "button", onClick: onDeleteClick, className: "inline-flex w-full items-center text-white justify-center bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900", children: [(0, import_jsx_runtime142.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 mr-1.5 -ml-1", fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime142.jsx)("path", { fillRule: "evenodd", d: "M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z", clipRule: "evenodd" }) }), "Delete"] })] }), !props.isLive && (props.node.errors.length > 0 || props.node.warnings.length > 0) ? (0, import_jsx_runtime142.jsxs)("div", { className: "mb-5", children: [(0, import_jsx_runtime142.jsx)("div", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "This component has some problems that need fixing" }), props.node.errors.length > 0 && (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, { children: props.node.errors.map((e2, i3) => render_error(e2, i3)) }), props.node.warnings.length > 0 && (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, { children: props.node.warnings.map((w2, i3) => render_warning(w2, i3)) })] }) : (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, {}), props.isLive && props?.liveState?.runtimeState && props.node.description.info.runtime?.summary && urls ? (0, import_jsx_runtime142.jsx)(import_react99.Suspense, { fallback: (0, import_jsx_runtime142.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime142.jsx)(props.node.description.info.runtime.summary, { state: props.liveState.runtimeState, config: props.liveState.config, sendCommand: props.sendCommand, urls }) }) : (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("dt", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "JSON Config" }), (0, import_jsx_runtime142.jsx)("dd", { children: (0, import_jsx_runtime142.jsx)(esm_default, { value: props.node.description.config, shortenTextAfterLength: 0, highlightUpdates: false, collapsed: 1, enableClipboard: false, displayDataTypes: false, displayObjectSize: false, indentWidth: 10, style: isDarkMode ? githubDarkTheme : githubLightTheme, className: "p-1 rounded-md" }) })] }), props.isLive && props.liveState && Object.keys(props.liveState.alerts).length > 0 ? (0, import_jsx_runtime142.jsxs)("div", { className: "mb-2", children: [(0, import_jsx_runtime142.jsx)("div", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "This component has raised some alerts" }), Object.values(props.liveState.alerts).filter((f) => f.level == "error").map((error2, i3) => {
+    return (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime142.jsx)("div", { children: error2.message })] }, i3);
   }), Object.values(props.liveState.alerts).filter((f) => f.level == "warning").map((warning, i3) => {
-    return (0, import_jsx_runtime143.jsxs)("div", { className: "flex items-center text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300", role: "alert", children: [info(), (0, import_jsx_runtime143.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime143.jsx)("div", { children: warning.message })] }, i3);
-  })] }) : (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {}), props.node.description.subscriptions.length > 0 && (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [(0, import_jsx_runtime143.jsx)("dt", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "Subscriptions" }), (0, import_jsx_runtime143.jsx)("dd", { className: "mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400 divide-y divide-gray-50", children: props.node.description.subscriptions.map((s3, i3) => {
+    return (0, import_jsx_runtime142.jsxs)("div", { className: "flex items-center text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300", role: "alert", children: [info(), (0, import_jsx_runtime142.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime142.jsx)("div", { children: warning.message })] }, i3);
+  })] }) : (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, {}), props.node.description.subscriptions.length > 0 && (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("dt", { className: "mb-2 font-semibold leading-none text-gray-900 dark:text-white", children: "Inputs" }), (0, import_jsx_runtime142.jsx)("dd", { className: "mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400 divide-y divide-gray-50", children: props.node.description.subscriptions.map((s3, i3) => {
     const sourceNode = props.toplevel.findNode(s3.source);
     const liveInputs = props.liveState?.inputs[s3.source] ?? [];
     if (!sourceNode) {
       console.log("Source node doesn't exist in document", s3.source);
-      return (0, import_jsx_runtime143.jsx)("span", { className: "badge badge-error mr-1", children: "Error" }, i3);
+      return (0, import_jsx_runtime142.jsx)("span", { className: "badge badge-error mr-1", children: "Error" }, i3);
     }
-    if (liveInputs.length > 0) {
-      return (0, import_jsx_runtime143.jsxs)("div", { className: "py-4", children: [(0, import_jsx_runtime143.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime143.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime143.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(s3.source, props.toplevel) })] }), (0, import_jsx_runtime143.jsx)(LiveNodeSubscriptionSummary, { sourceNode, subscription: s3, liveInputs }, i3)] }, i3);
+    if (props.isLive) {
+      return (0, import_jsx_runtime142.jsxs)("div", { className: "py-4 divide-y divide-gray-50", children: [(0, import_jsx_runtime142.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime142.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime142.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-3 sm:mt-0", children: displayNodeId(s3.source, props.toplevel) })] }), (0, import_jsx_runtime142.jsx)(LiveNodeSubscriptionSummary, { sourceNode, subscription: s3, liveInputs, metrics }, i3)] }, i3);
     } else {
-      return (0, import_jsx_runtime143.jsxs)("div", { className: "py-4 hover:bg-gray-50 dark:hover:bg-gray-900", onClick: (e2) => {
+      return (0, import_jsx_runtime142.jsxs)("div", { className: "py-4 hover:bg-gray-50 dark:hover:bg-gray-900", onClick: (e2) => {
         e2.preventDefault();
         props.onSubscriptionSelect(s3.source);
-      }, onMouseEnter: () => props.onSubscriptionHighlightStart(s3.source), onMouseLeave: () => props.onSubscriptionHighlightStop(s3.source), children: [(0, import_jsx_runtime143.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime143.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime143.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(s3.source, props.toplevel) })] }), (0, import_jsx_runtime143.jsx)(SubscriptionSummarySmall, { sourceNode, subscription: s3 }, i3)] }, i3);
+      }, onMouseEnter: () => props.onSubscriptionHighlightStart(s3.source), onMouseLeave: () => props.onSubscriptionHighlightStop(s3.source), children: [(0, import_jsx_runtime142.jsxs)("div", { className: "px-4 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0", children: [(0, import_jsx_runtime142.jsx)("dt", { className: "text-sm font-medium leading-6 text-gray-900 dark:text-white", children: "Source" }), (0, import_jsx_runtime142.jsx)("dd", { className: "mt-1 text-sm leading-6 text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: displayNodeId(s3.source, props.toplevel) })] }), (0, import_jsx_runtime142.jsx)(SubscriptionSummarySmall, { sourceNode, subscription: s3 }, i3)] }, i3);
     }
   }) })] })] })] });
 }
 function LiveNodeSubscriptionSummary(props) {
   const { liveInputs } = props;
-  return (0, import_jsx_runtime143.jsx)("div", { className: "px-4 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-0", children: liveInputs.map((i3) => {
-    return (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [(0, import_jsx_runtime143.jsx)("div", { className: "text-sm font-sm text-gray-900 dark:text-white", children: i3.message.case }), (0, import_jsx_runtime143.jsxs)("div", { className: "mt-0 text-sm text-gray-700 dark:text-white sm:col-span-1 sm:mt-0", children: [i3.streamKey.streamId, "-", i3.streamKey.sourceName] }), (0, import_jsx_runtime143.jsx)("div", { className: "mt-0 text-sm text-gray-700 dark:text-white sm:col-span-2 sm:mt-0", children: (() => {
-      const messageCase = i3.message.case;
-      switch (messageCase) {
-        case "video":
-          return (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [i3.message.value.codec, ": ", i3.message.value.width, "x", i3.message.value.height] });
-        case "audio":
-          return (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [i3.message.value.channelLayout, "@", i3.message.value.bitrate] });
-        case "ancillary":
-          return (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {});
-        case "subtitle":
-          return (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {});
-        case "playlist":
-          return (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {});
-        case void 0:
-          return (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {});
-        default:
-          assertUnreachable(messageCase);
-      }
-    })() })] });
+  return (0, import_jsx_runtime142.jsx)("div", { className: "px-4 sm:grid sm:grid-cols-4 sm:gap-4 sm:px-0", children: props.subscription.expectedStreams.map((stream) => {
+    const i3 = liveInputs.find((i4) => streamMatchesExpected(i4, [stream]));
+    const frameCountMetric = props.metrics[props.subscription.source]?.find((v2) => v2.name == "norsk_frame_count" && v2.streamKey && i3?.streamKey && (0, import_deep_equal.default)(v2.streamKey, i3.streamKey));
+    return (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("div", { className: "sm:col-span-1 text-sm font-sm text-gray-900 dark:text-white pr-10 border-r", children: shortStreamNameFromFilter(stream) }), (0, import_jsx_runtime142.jsxs)("div", { className: "mt-0 text-sm text-gray-700 dark:text-white sm:col-span-3 sm:mt-0", children: [i3 ? (0, import_jsx_runtime142.jsx)("div", { className: "dark:text-green-300 text-green:300", children: "Active" }) : (0, import_jsx_runtime142.jsx)("div", { className: "dark:text-red-300 text-red-300", children: "Inactive" }), i3?.message.case == "video" ? (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("div", { className: "sm:col-span-1" }), (0, import_jsx_runtime142.jsxs)("div", { className: "sm:col-span-3 sm:grid sm:grid-cols-2", children: [(0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Frames" }), (0, import_jsx_runtime142.jsx)("dd", { className: "", children: frameCountMetric?.history.at(-1) }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Codec" }), (0, import_jsx_runtime142.jsx)("dd", { className: "", children: frameCountMetric?.labels["codec"] }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Resolution" }), (0, import_jsx_runtime142.jsx)("dd", { className: "", children: frameCountMetric?.labels["width"] + "x" + frameCountMetric?.labels["height"] }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "FrameRate" }), (0, import_jsx_runtime142.jsx)("dd", { className: "", children: frameCountMetric?.labels["frameRate"] })] })] }) : i3?.message.case == "audio" ? (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("div", { className: "sm:col-span-1" }), (0, import_jsx_runtime142.jsxs)("div", { className: "sm:col-span-3 sm:grid sm:grid-cols-2", children: [(0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Frames" }), (0, import_jsx_runtime142.jsx)("dd", { children: frameCountMetric?.history.at(-1) }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Codec" }), (0, import_jsx_runtime142.jsx)("dd", { children: frameCountMetric?.labels["codec"] }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "SampleRate" }), (0, import_jsx_runtime142.jsx)("dd", { children: frameCountMetric?.labels["sampleRate"] }), (0, import_jsx_runtime142.jsx)("dt", { className: "", children: "Channels" }), (0, import_jsx_runtime142.jsx)("dd", { children: frameCountMetric?.labels["channelLayout"] })] })] }) : i3?.message.case == "subtitle" ? (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [(0, import_jsx_runtime142.jsx)("div", { className: "sm:col-span-1" }), (0, import_jsx_runtime142.jsxs)("div", { className: "sm:col-span-3", children: ["Frames: ", frameCountMetric?.history.at(-1)] })] }) : (0, import_jsx_runtime142.jsx)(import_jsx_runtime142.Fragment, {})] })] });
   }) });
 }
 var selected_node_default = SelectedNode;
 
 // build/client/client/jsx/selected.js
 function SelectedNodes(props) {
-  return (0, import_jsx_runtime144.jsxs)("ul", { className: "w-full", children: [props.components.map((n3) => (0, import_jsx_runtime144.jsx)(selected_node_default, { library: props.library, env: props.env, node: n3, toplevel: props.toplevel, onEdit: props.onNodeEdit, onDelete: props.onNodeDelete, onClearSelection: props.onClearSelection, onSubscriptionHighlightStart: (s3) => props.onSubscriptionHighlightStart(n3.description.id, s3), onSubscriptionHighlightStop: (s3) => props.onSubscriptionHighlightStop(n3.description.id, s3), onSubscriptionSelect: (s3) => props.onSubscriptionSelected(n3.description.id, s3), isLive: !!props.liveState, liveState: props.liveState?.[n3.description.id], sendCommand: (c2) => props.sendCommand(n3.description.id, c2) }, `node-${n3.description.id}`)), props.liveState ? (0, import_jsx_runtime144.jsx)(import_jsx_runtime144.Fragment, {}) : props.connections.map((info2, i3) => (0, import_jsx_runtime144.jsx)(selected_connection_default, { library: props.library, toplevel: props.toplevel, connection: info2, onEdit: props.onConnectionEdit, onDelete: props.onConnectionDelete, onClearSelection: props.onClearSelection }, `{connection-${i3}`))] });
+  return (0, import_jsx_runtime143.jsxs)("ul", { className: "w-full", children: [props.components.map((n3) => (0, import_jsx_runtime143.jsx)(selected_node_default, { library: props.library, env: props.env, node: n3, toplevel: props.toplevel, onEdit: props.onNodeEdit, onDelete: props.onNodeDelete, onClearSelection: props.onClearSelection, onSubscriptionHighlightStart: (s3) => props.onSubscriptionHighlightStart(n3.description.id, s3), onSubscriptionHighlightStop: (s3) => props.onSubscriptionHighlightStop(n3.description.id, s3), onSubscriptionSelect: (s3) => props.onSubscriptionSelected(n3.description.id, s3), isLive: !!props.liveState, liveState: props.liveState?.[n3.description.id], sendCommand: (c2) => props.sendCommand(n3.description.id, c2) }, `node-${n3.description.id}`)), props.liveState ? (0, import_jsx_runtime143.jsx)(import_jsx_runtime143.Fragment, {}) : props.connections.map((info2, i3) => (0, import_jsx_runtime143.jsx)(selected_connection_default, { library: props.library, toplevel: props.toplevel, connection: info2, onEdit: props.onConnectionEdit, onDelete: props.onConnectionDelete, onClearSelection: props.onClearSelection }, `{connection-${i3}`))] });
 }
 var selected_default = SelectedNodes;
 
 // build/client/client/jsx/toolbox.js
-var import_jsx_runtime146 = __toESM(require_jsx_runtime());
+var import_jsx_runtime145 = __toESM(require_jsx_runtime());
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
-var import_react102 = __toESM(require_react());
+var import_react101 = __toESM(require_react());
 
 // ../../node_modules/lucide-react/dist/esm/shared/src/utils.js
 var toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
@@ -215510,7 +215368,7 @@ var mergeClasses = (...classes) => classes.filter((className, index7, array) =>
 }).join(" ").trim();
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var import_react101 = __toESM(require_react());
+var import_react100 = __toESM(require_react());
 
 // ../../node_modules/lucide-react/dist/esm/defaultAttributes.js
 var defaultAttributes = {
@@ -215526,7 +215384,7 @@ var defaultAttributes = {
 };
 
 // ../../node_modules/lucide-react/dist/esm/Icon.js
-var Icon = (0, import_react101.forwardRef)(
+var Icon = (0, import_react100.forwardRef)(
   ({
     color: color2 = "currentColor",
     size: size4 = 24,
@@ -215537,7 +215395,7 @@ var Icon = (0, import_react101.forwardRef)(
     iconNode,
     ...rest
   }, ref) => {
-    return (0, import_react101.createElement)(
+    return (0, import_react100.createElement)(
       "svg",
       {
         ref,
@@ -215550,7 +215408,7 @@ var Icon = (0, import_react101.forwardRef)(
         ...rest
       },
       [
-        ...iconNode.map(([tag, attrs]) => (0, import_react101.createElement)(tag, attrs)),
+        ...iconNode.map(([tag, attrs]) => (0, import_react100.createElement)(tag, attrs)),
         ...Array.isArray(children) ? children : [children]
       ]
     );
@@ -215559,8 +215417,8 @@ var Icon = (0, import_react101.forwardRef)(
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var createLucideIcon = (iconName, iconNode) => {
-  const Component = (0, import_react102.forwardRef)(
-    ({ className, ...props }, ref) => (0, import_react102.createElement)(Icon, {
+  const Component = (0, import_react101.forwardRef)(
+    ({ className, ...props }, ref) => (0, import_react101.createElement)(Icon, {
       ref,
       iconNode,
       className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
@@ -215589,12 +215447,12 @@ var __iconNode = [
 var SquareDashed = createLucideIcon("SquareDashed", __iconNode);
 
 // build/client/client/jsx/upstream/Accordion.js
-var import_jsx_runtime145 = __toESM(require_jsx_runtime());
-var import_react103 = __toESM(require_react());
+var import_jsx_runtime144 = __toESM(require_jsx_runtime());
+var import_react102 = __toESM(require_react());
 var AccordionComponent2 = ({ alwaysOpen = false, arrowIcon = HiChevronDown, children, flush = false, collapseAll = false, className, theme: customTheme = {}, ...props }) => {
-  const [isOpen, setOpen] = (0, import_react103.useState)(collapseAll ? -1 : 0);
-  const panels = (0, import_react103.useMemo)(() => import_react103.Children.map(children, (child, i3) => {
-    return (0, import_react103.cloneElement)(child, {
+  const [isOpen, setOpen] = (0, import_react102.useState)(collapseAll ? -1 : 0);
+  const panels = (0, import_react102.useMemo)(() => import_react102.Children.map(children, (child, i3) => {
+    return (0, import_react102.cloneElement)(child, {
       alwaysOpen: child.props.alwaysOpen ?? alwaysOpen,
       arrowIcon: child.props.arrowIcon ?? arrowIcon,
       flush: child.props.flush ?? flush,
@@ -215603,7 +215461,7 @@ var AccordionComponent2 = ({ alwaysOpen = false, arrowIcon = HiChevronDown, chil
     });
   }), [alwaysOpen, arrowIcon, children, flush, isOpen]);
   const newTheme = mergeDeep2(cloneDeep2(theme).accordion.root, customTheme);
-  return (0, import_jsx_runtime145.jsx)("div", { className: twMerge(newTheme.base, newTheme.flush[flush ? "on" : "off"], className), "data-testid": "flowbite-accordion", ...props, children: panels });
+  return (0, import_jsx_runtime144.jsx)("div", { className: twMerge(newTheme.base, newTheme.flush[flush ? "on" : "off"], className), "data-testid": "flowbite-accordion", ...props, children: panels });
 };
 AccordionComponent2.displayName = "Accordion";
 AccordionPanel.displayName = "Accordion.Panel";
@@ -215650,12 +215508,12 @@ function Toolbox(props) {
   const classNamesRoot = "-mt-4";
   const themeTitle = { open: { on: "text-gray-800 dark:text-white", off: "text-gray-800 dark:text-white" } };
   const themeContent = { base: "bg-transparent" };
-  return (0, import_jsx_runtime146.jsx)(Accordion2, { flush: true, id: toolboxId, alwaysOpen: true, className: classNamesRoot, children: props.toolGroups.map((toolGroup, _idx) => {
-    return (0, import_jsx_runtime146.jsxs)(Accordion2.Panel, { isOpen: true, children: [(0, import_jsx_runtime146.jsx)(Accordion2.Title, { theme: themeTitle, children: toolGroup.title }), (0, import_jsx_runtime146.jsx)(Accordion2.Content, { theme: themeContent, children: (0, import_jsx_runtime146.jsx)("div", { className: "py-5 border-none border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-3", children: toolGroup.tools.map((tool) => (0, import_jsx_runtime146.jsx)(ToolboxItem, { name: tool.name, tool, onDragStart: props.onDragStart }, tool.type)) }) })] }, toolGroup.title);
+  return (0, import_jsx_runtime145.jsx)(Accordion2, { flush: true, id: toolboxId, alwaysOpen: true, className: classNamesRoot, children: props.toolGroups.map((toolGroup, _idx) => {
+    return (0, import_jsx_runtime145.jsxs)(Accordion2.Panel, { isOpen: true, children: [(0, import_jsx_runtime145.jsx)(Accordion2.Title, { theme: themeTitle, children: toolGroup.title }), (0, import_jsx_runtime145.jsx)(Accordion2.Content, { theme: themeContent, children: (0, import_jsx_runtime145.jsx)("div", { className: "py-5 border-none border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-3", children: toolGroup.tools.map((tool) => (0, import_jsx_runtime145.jsx)(ToolboxItem, { name: tool.name, tool, onDragStart: props.onDragStart }, tool.type)) }) })] }, toolGroup.title);
   }) });
 }
 function ToolboxItem({ name, tool, onDragStart }) {
-  return (0, import_jsx_runtime146.jsxs)("div", { className: "p-2 w-full h-20 flex flex-col items-center rounded-lg border border-1 border-gray-200 dark:border-gray-600 group transition-all cursor-grab bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600/10 dark:bg-transparent hover:scale-[103%] duration-200 drop-shadow hover:drop-shadow-md", draggable: "true", onDragStart: onItemDragStart(tool, onDragStart), children: [(0, import_jsx_runtime146.jsx)("div", { className: "flex justify-center items-center  bg-blue h-8 w-8 p-1 group-hover:bg-blue-500 border border-1 border-gray-200 dark:border-gray-600 group-hover:border-transparent transition-all bg-transparent  rounded", children: (0, import_jsx_runtime146.jsx)(SquareDashed, { size: 48, className: "text-black group-hover:text-white transition-colors dark:text-white" }) }), (0, import_jsx_runtime146.jsx)("div", { className: "font-bold text-center text-xs my-auto text-gray-500 dark:text-gray-400", children: name })] });
+  return (0, import_jsx_runtime145.jsxs)("div", { className: "p-2 w-full h-20 flex flex-col items-center rounded-lg border border-1 border-gray-200 dark:border-gray-600 group transition-all cursor-grab bg-gray-50 hover:bg-gray-100 dark:hover:bg-gray-600/10 dark:bg-transparent hover:scale-[103%] duration-200 drop-shadow hover:drop-shadow-md", draggable: "true", onDragStart: onItemDragStart(tool, onDragStart), children: [(0, import_jsx_runtime145.jsx)("div", { className: "flex justify-center items-center  bg-blue h-8 w-8 p-1 group-hover:bg-blue-500 border border-1 border-gray-200 dark:border-gray-600 group-hover:border-transparent transition-all bg-transparent  rounded", children: (0, import_jsx_runtime145.jsx)(SquareDashed, { size: 48, className: "text-black group-hover:text-white transition-colors dark:text-white" }) }), (0, import_jsx_runtime145.jsx)("div", { className: "font-bold text-center text-xs my-auto text-gray-500 dark:text-gray-400", children: name })] });
 }
 function onItemDragStart(tool, cb) {
   return () => {
@@ -215664,11 +215522,11 @@ function onItemDragStart(tool, cb) {
 }
 
 // build/client/client/jsx/node-editor.js
-var import_jsx_runtime147 = __toESM(require_jsx_runtime());
-var import_react105 = __toESM(require_react());
+var import_jsx_runtime146 = __toESM(require_jsx_runtime());
+var import_react104 = __toESM(require_react());
 
 // ../../node_modules/react-hook-form/dist/index.esm.mjs
-var import_react104 = __toESM(require_react(), 1);
+var import_react103 = __toESM(require_react(), 1);
 var isCheckBoxInput = (element) => element.type === "checkbox";
 var isDateObject = (value) => value instanceof Date;
 var isNullOrUndefined = (value) => value == null;
@@ -215759,7 +215617,7 @@ var INPUT_VALIDATION_RULES = {
   required: "required",
   validate: "validate"
 };
-var HookFormContext = import_react104.default.createContext(null);
+var HookFormContext = import_react103.default.createContext(null);
 var getProxyFormState = (formState, control, localProxyFormState, isRoot = true) => {
   const result = {
     defaultValues: control._defaultValues
@@ -215786,9 +215644,9 @@ var shouldRenderFormState = (formStateData, _proxyFormState, updateFormState, is
 };
 var convertToArrayPayload = (value) => Array.isArray(value) ? value : [value];
 function useSubscribe(props) {
-  const _props = import_react104.default.useRef(props);
+  const _props = import_react103.default.useRef(props);
   _props.current = props;
-  import_react104.default.useEffect(() => {
+  import_react103.default.useEffect(() => {
     const subscription = !props.disabled && _props.current.subject && _props.current.subject.subscribe({
       next: _props.current.next
     });
@@ -216112,7 +215970,7 @@ var createSubject = () => {
   };
 };
 var isPrimitive = (value) => isNullOrUndefined(value) || !isObjectType(value);
-function deepEqual2(object1, object2) {
+function deepEqual3(object1, object2) {
   if (isPrimitive(object1) || isPrimitive(object2)) {
     return object1 === object2;
   }
@@ -216131,7 +215989,7 @@ function deepEqual2(object1, object2) {
     }
     if (key !== "ref") {
       const val2 = object2[key];
-      if (isDateObject(val1) && isDateObject(val2) || isObject4(val1) && isObject4(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual2(val1, val2) : val1 !== val2) {
+      if (isDateObject(val1) && isDateObject(val2) || isObject4(val1) && isObject4(val2) || Array.isArray(val1) && Array.isArray(val2) ? !deepEqual3(val1, val2) : val1 !== val2) {
         return false;
       }
     }
@@ -216174,7 +216032,7 @@ function getDirtyFieldsFromDefaultValues(data, formValues, dirtyFieldsFromValues
           getDirtyFieldsFromDefaultValues(data[key], isNullOrUndefined(formValues) ? {} : formValues[key], dirtyFieldsFromValues[key]);
         }
       } else {
-        dirtyFieldsFromValues[key] = !deepEqual2(data[key], formValues[key]);
+        dirtyFieldsFromValues[key] = !deepEqual3(data[key], formValues[key]);
       }
     }
   }
@@ -216407,7 +216265,7 @@ function createFormControl(props = {}) {
           _formState.isDirty = output.isDirty = _getDirty();
           shouldUpdateField = isPreviousDirty !== output.isDirty;
         }
-        const isCurrentFieldPristine = disabledField || deepEqual2(get(_defaultValues, name), fieldValue);
+        const isCurrentFieldPristine = disabledField || deepEqual3(get(_defaultValues, name), fieldValue);
         isPreviousDirty = !!(!disabledField && get(_formState.dirtyFields, name));
         isCurrentFieldPristine || disabledField ? unset(_formState.dirtyFields, name) : set2(_formState.dirtyFields, name, true);
         output.dirtyFields = _formState.dirtyFields;
@@ -216436,7 +216294,7 @@ function createFormControl(props = {}) {
       delayErrorCallback = null;
       error2 ? set2(_formState.errors, name, error2) : unset(_formState.errors, name);
     }
-    if ((error2 ? !deepEqual2(previousFieldError, error2) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
+    if ((error2 ? !deepEqual3(previousFieldError, error2) : previousFieldError) || !isEmptyObject(fieldState) || shouldUpdateValid) {
       const updatedFormState = {
         ...fieldState,
         ...shouldUpdateValid && isBoolean(isValid3) ? { isValid: isValid3 } : {},
@@ -216505,7 +216363,7 @@ function createFormControl(props = {}) {
     }
     _names.unMount = /* @__PURE__ */ new Set();
   };
-  const _getDirty = (name, data) => !_options.disabled && (name && data && set2(_formValues, name, data), !deepEqual2(getValues(), _defaultValues));
+  const _getDirty = (name, data) => !_options.disabled && (name && data && set2(_formValues, name, data), !deepEqual3(getValues(), _defaultValues));
   const _getWatch = (names2, defaultValue, isGlobal) => generateWatchOutput(names2, _names, {
     ..._state.mount ? _formValues : isUndefined(defaultValue) ? _defaultValues : isString(names2) ? { [names2]: defaultValue } : defaultValue
   }, isGlobal, defaultValue);
@@ -216584,7 +216442,7 @@ function createFormControl(props = {}) {
     const field = get(_fields, name);
     const getCurrentFieldValue = () => target.type ? getFieldValue(field._f) : getEventValue(event);
     const _updateIsFieldValueUpdated = (fieldValue) => {
-      isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual2(fieldValue, get(_formValues, name, fieldValue));
+      isFieldValueUpdated = Number.isNaN(fieldValue) || isDateObject(fieldValue) && isNaN(fieldValue.getTime()) || deepEqual3(fieldValue, get(_formValues, name, fieldValue));
     };
     if (field) {
       let error2;
@@ -216960,7 +216818,7 @@ function createFormControl(props = {}) {
     _state.watch = !!_options.shouldUnregister;
     _subjects.state.next({
       submitCount: keepStateOptions.keepSubmitCount ? _formState.submitCount : 0,
-      isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual2(formValues, _defaultValues)),
+      isDirty: isEmptyResetValues ? false : keepStateOptions.keepDirty ? _formState.isDirty : !!(keepStateOptions.keepDefaultValues && !deepEqual3(formValues, _defaultValues)),
       isSubmitted: keepStateOptions.keepIsSubmitted ? _formState.isSubmitted : false,
       dirtyFields: isEmptyResetValues ? {} : keepStateOptions.keepDirtyValues ? keepStateOptions.keepDefaultValues && _formValues ? getDirtyFields(_defaultValues, _formValues) : _formState.dirtyFields : keepStateOptions.keepDefaultValues && formValues ? getDirtyFields(_defaultValues, formValues) : keepStateOptions.keepDirty ? _formState.dirtyFields : {},
       touchedFields: keepStateOptions.keepTouched ? _formState.touchedFields : {},
@@ -217068,9 +216926,9 @@ function createFormControl(props = {}) {
   };
 }
 function useForm(props = {}) {
-  const _formControl = import_react104.default.useRef(void 0);
-  const _values = import_react104.default.useRef(void 0);
-  const [formState, updateFormState] = import_react104.default.useState({
+  const _formControl = import_react103.default.useRef(void 0);
+  const _values = import_react103.default.useRef(void 0);
+  const [formState, updateFormState] = import_react103.default.useState({
     isDirty: false,
     isValidating: false,
     isLoading: isFunction2(props.defaultValues),
@@ -217102,8 +216960,8 @@ function useForm(props = {}) {
       }
     }
   });
-  import_react104.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
-  import_react104.default.useEffect(() => {
+  import_react103.default.useEffect(() => control._disableForm(props.disabled), [control, props.disabled]);
+  import_react103.default.useEffect(() => {
     if (control._proxyFormState.isDirty) {
       const isDirty2 = control._getDirty();
       if (isDirty2 !== formState.isDirty) {
@@ -217113,8 +216971,8 @@ function useForm(props = {}) {
       }
     }
   }, [control, formState.isDirty]);
-  import_react104.default.useEffect(() => {
-    if (props.values && !deepEqual2(props.values, _values.current)) {
+  import_react103.default.useEffect(() => {
+    if (props.values && !deepEqual3(props.values, _values.current)) {
       control._reset(props.values, control._options.resetOptions);
       _values.current = props.values;
       updateFormState((state) => ({ ...state }));
@@ -217122,12 +216980,12 @@ function useForm(props = {}) {
       control._resetDefaultValues();
     }
   }, [props.values, control]);
-  import_react104.default.useEffect(() => {
+  import_react103.default.useEffect(() => {
     if (props.errors) {
       control._setErrors(props.errors);
     }
   }, [props.errors, control]);
-  import_react104.default.useEffect(() => {
+  import_react103.default.useEffect(() => {
     if (!control._state.mount) {
       control._updateValid();
       control._state.mount = true;
@@ -217138,7 +216996,7 @@ function useForm(props = {}) {
     }
     control._removeUnmounted();
   });
-  import_react104.default.useEffect(() => {
+  import_react103.default.useEffect(() => {
     props.shouldUnregister && control._subjects.values.next({
       values: control._getWatch()
     });
@@ -217219,8 +217077,8 @@ var t2 = function(o3, t3, s3) {
 };
 
 // build/client/client/jsx/node-editor.js
-var import_react106 = __toESM(require_react());
-var import_deep_equal = __toESM(require_deep_equal());
+var import_react105 = __toESM(require_react());
+var import_deep_equal2 = __toESM(require_deep_equal());
 var node_editor_default = NodeEditor2;
 function NodeEditor2({ form, target, description, env, isNewNode, onSave, onCancel }) {
   const displayName = {
@@ -217239,7 +217097,7 @@ function NodeEditor2({ form, target, description, env, isNewNode, onSave, onCanc
     ...target.config,
     displayName: target.config.displayName == "" ? getDisplayName(target.type, description) : target.config.displayName
   };
-  return (0, import_jsx_runtime147.jsxs)("div", { id: "top-level-form", children: [(0, import_jsx_runtime147.jsxs)("h5", { className: "flex items-center justify-between text-lg font-semibold text-gray-500 uppercase dark:text-gray-400", children: [(0, import_jsx_runtime147.jsxs)("span", { children: [isNewNode ? "Create" : "Update", " Node", " "] }), (0, import_jsx_runtime147.jsxs)("button", { type: "button", onClick: onCancel, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime147.jsx)("span", { className: "sr-only", children: "Close menu" })] })] }), (0, import_jsx_runtime147.jsxs)("p", { className: "font-semibold text-gray-800 dark:text-gray-200", children: [(0, import_jsx_runtime147.jsx)("span", { className: "fold-bold", children: "Type" }), ": ", target.info.name] }), (0, import_jsx_runtime147.jsx)("p", { className: "mb-6", children: (0, import_jsx_runtime147.jsxs)("a", { target: "_blank", href: componentDocs(target.info.identifier, env).toString(), children: [(0, import_jsx_runtime147.jsx)("svg", { className: "inline align-bottom ml-2 mr-2 w-5 h-5 text-gray-800 dark:text-white", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime147.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }), (0, import_jsx_runtime147.jsx)("span", { className: "text-sm", children: "Documentation" })] }) }), (0, import_jsx_runtime147.jsx)(Form, { defaultValue: actualValues, node: target, latest: description, env, form: moreForm, onCancel, onSave: addIdThenSave })] });
+  return (0, import_jsx_runtime146.jsxs)("div", { id: "top-level-form", children: [(0, import_jsx_runtime146.jsxs)("h5", { className: "flex items-center justify-between text-lg font-semibold text-gray-500 uppercase dark:text-gray-400", children: [(0, import_jsx_runtime146.jsxs)("span", { children: [isNewNode ? "Create" : "Update", " Node", " "] }), (0, import_jsx_runtime146.jsxs)("button", { type: "button", onClick: onCancel, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime146.jsx)("span", { className: "sr-only", children: "Close menu" })] })] }), (0, import_jsx_runtime146.jsxs)("p", { className: "font-semibold text-gray-800 dark:text-gray-200", children: [(0, import_jsx_runtime146.jsx)("span", { className: "fold-bold", children: "Type" }), ": ", target.info.name] }), (0, import_jsx_runtime146.jsx)("p", { className: "mb-6", children: (0, import_jsx_runtime146.jsxs)("a", { target: "_blank", href: componentDocs(target.info.identifier, env).toString(), children: [(0, import_jsx_runtime146.jsx)("svg", { className: "inline align-bottom ml-2 mr-2 w-5 h-5 text-gray-800 dark:text-white", "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", children: (0, import_jsx_runtime146.jsx)("path", { stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M9.529 9.988a2.502 2.502 0 1 1 5 .191A2.441 2.441 0 0 1 12 12.582V14m-.01 3.008H12M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" }) }), (0, import_jsx_runtime146.jsx)("span", { className: "text-sm", children: "Documentation" })] }) }), (0, import_jsx_runtime146.jsx)(Form, { defaultValue: actualValues, node: target, latest: description, env, form: moreForm, onCancel, onSave: addIdThenSave })] });
   function addIdThenSave(formValues) {
     formValues["id"] = getNextId(target.id, formValues["displayName"], description);
     onSave({ config: formValues });
@@ -217351,7 +217209,7 @@ function Form(props) {
   function onSave(config) {
     props.onSave(config);
   }
-  return (0, import_jsx_runtime147.jsx)(NodeEditorImpl, { form: props.form, schema: objectType(validation), initialValues, latest: props.latest, env: props.env, node: props.node, onSave, onCancel: props.onCancel });
+  return (0, import_jsx_runtime146.jsx)(NodeEditorImpl, { form: props.form, schema: objectType(validation), initialValues, latest: props.latest, env: props.env, node: props.node, onSave, onCancel: props.onCancel });
 }
 function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, latest, env }) {
   const { handleSubmit, register, resetField, setValue, setError, getValues, watch, formState: { errors } } = useForm({
@@ -217360,7 +217218,7 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
   const urls = node && {
     staticUrl: staticApiUrl(node.type, env)
   };
-  const [focusedElement, setFocusedElement] = (0, import_react106.useState)();
+  const [focusedElement, setFocusedElement] = (0, import_react105.useState)();
   function validationClass(name) {
     const entry = errors[name];
     if (entry) {
@@ -217370,9 +217228,9 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
   }
   function maybe_render_error(key) {
     if (errors[key]) {
-      return (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime147.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime147.jsx)("div", { children: (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: errors[key]?.message || "" }) })] });
+      return (0, import_jsx_runtime146.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime146.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime146.jsx)("div", { children: (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, { children: errors[key]?.message || "" }) })] });
     } else {
-      return (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, {});
+      return (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, {});
     }
   }
   function onElementExpand(name) {
@@ -217386,7 +217244,7 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
       onSave(values);
     }, console.error)();
   }
-  return (0, import_jsx_runtime147.jsx)("div", { id: nodeEditorId, className: "z-40 w-full max-w-xs overflow-visible bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime147.jsxs)("div", { children: [Object.entries(form).map(([name, e2], i3) => {
+  return (0, import_jsx_runtime146.jsx)("div", { id: nodeEditorId, className: "z-40 w-full max-w-xs overflow-visible bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime146.jsxs)("div", { children: [Object.entries(form).map(([name, e2], i3) => {
     const entry = e2;
     const entryHint = entry.hint;
     let elementProps;
@@ -217418,14 +217276,14 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
       case "multiselect":
         register(name);
         elementProps = register(name + "_json");
-        (0, import_react106.useEffect)(() => {
+        (0, import_react105.useEffect)(() => {
           setValue(name, initialValues[name]);
         }, [initialValues[name]]);
         break;
       case "select":
         register(name);
         elementProps = register(name + "_json");
-        (0, import_react106.useEffect)(() => {
+        (0, import_react105.useEffect)(() => {
           setValue(name, initialValues[name]);
         }, [initialValues[name]]);
         break;
@@ -217449,30 +217307,30 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
         assertUnreachable(type);
     }
     if (focusedElement && name !== focusedElement)
-      return (0, import_jsx_runtime147.jsx)("span", {}, i3);
+      return (0, import_jsx_runtime146.jsx)("span", {}, i3);
     switch (type) {
       case "text":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("input", { defaultValue: initialValues[name], className: `form-control${validationClass(name)} node-editor-text-input`, id: name, ...elementProps }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("input", { defaultValue: initialValues[name], className: `form-control${validationClass(name)} node-editor-text-input`, id: name, ...elementProps }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       case "constant":
         setValue(name, initialValues[name], { shouldDirty: false });
-        return (0, import_jsx_runtime147.jsx)("input", { defaultValue: initialValues[name], type: "hidden", id: name, ...elementProps }, i3);
+        return (0, import_jsx_runtime146.jsx)("input", { defaultValue: initialValues[name], type: "hidden", id: name, ...elementProps }, i3);
       case "numeric":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("input", { defaultValue: initialValues[name], type: "number", step: entryHint.step, className: `form-control${validationClass(name)} node-editor-numeric-input`, id: name, ...elementProps }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("input", { defaultValue: initialValues[name], type: "number", step: entryHint.step, className: `form-control${validationClass(name)} node-editor-numeric-input`, id: name, ...elementProps }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       case "list":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)(ListInput, { defaultValue: initialValues[name], id: name, validation: entryHint.validation ?? anyType(), onInvalid: () => setError(name, {}), onValid: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)(ListInput, { defaultValue: initialValues[name], id: name, validation: entryHint.validation ?? anyType(), onInvalid: () => setError(name, {}), onValid: (v2) => {
           resetField(name);
           setValue(name, v2);
-        } }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+        } }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       case "custom":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime147.jsx)(import_react105.Suspense, { fallback: (0, import_jsx_runtime147.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime147.jsx)(entryHint.component, { latestDocument: latest, id: name, defaultValue: initialValues[name], latest: getValues(), urls, onChanged: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime146.jsx)(import_react104.Suspense, { fallback: (0, import_jsx_runtime146.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime146.jsx)(entryHint.component, { latestDocument: latest, id: name, defaultValue: initialValues[name], latest: getValues(), urls, onChanged: (v2) => {
           resetField(name);
           setValue(name, v2);
         } }) }), maybe_render_error(name)] }, i3);
       case "custom-form":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), focusedElement == name ? (0, import_jsx_runtime147.jsx)(entryHint.form, { latestDocument: latest, id: name, defaultValue: getValues()[name] ?? initialValues[name], latest: getValues(), urls, onCancel: () => setFocusedElement(void 0), onChanged: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), focusedElement == name ? (0, import_jsx_runtime146.jsx)(entryHint.form, { latestDocument: latest, id: name, defaultValue: getValues()[name] ?? initialValues[name], latest: getValues(), urls, onCancel: () => setFocusedElement(void 0), onChanged: (v2) => {
           setValue(name, v2);
           setFocusedElement(void 0);
-        } }) : (0, import_jsx_runtime147.jsxs)("div", { className: "flex mb-2 border-dotted border-gray-500 border-1 p-2", children: [(0, import_jsx_runtime147.jsx)("span", { className: "flex-grow text-sm", children: entryHint.view(getValues()[name] ?? initialValues[name], getValues()) }), (0, import_jsx_runtime147.jsx)("a", { onClick: () => setFocusedElement(name), href: "#", className: "shrink text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm", children: (0, import_jsx_runtime147.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-6", children: (0, import_jsx_runtime147.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }) }) })] })] }, i3);
+        } }) : (0, import_jsx_runtime146.jsxs)("div", { className: "flex mb-2 border-dotted border-gray-500 border-1 p-2", children: [(0, import_jsx_runtime146.jsx)("span", { className: "flex-grow text-sm", children: entryHint.view(getValues()[name] ?? initialValues[name], getValues()) }), (0, import_jsx_runtime146.jsx)("a", { onClick: () => setFocusedElement(name), href: "#", className: "shrink text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm", children: (0, import_jsx_runtime146.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-6", children: (0, import_jsx_runtime146.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }) }) })] })] }, i3);
       case "multiselect": {
         const { onChange, onBlur: _2, ...p } = elementProps;
         const myOnChange = (e3) => {
@@ -217487,10 +217345,10 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
           void onChange(e3);
         };
         const initial = initialValues[name].map((j2) => JSON.stringify(j2));
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("select", { multiple: true, defaultValue: initial, className: `form-control${validationClass(name)} node-editor-select-input`, id: name, onChange: myOnChange, onBlur: myOnChange, ...p, children: entryHint.options.map((o3, i4) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("select", { multiple: true, defaultValue: initial, className: `form-control${validationClass(name)} node-editor-select-input`, id: name, onChange: myOnChange, onBlur: myOnChange, ...p, children: entryHint.options.map((o3, i4) => {
           const val = JSON.stringify(o3.value);
-          return (0, import_jsx_runtime147.jsx)("option", { value: val, children: o3.display }, i4);
-        }) }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+          return (0, import_jsx_runtime146.jsx)("option", { value: val, children: o3.display }, i4);
+        }) }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       }
       case "select": {
         const { onChange, onBlur: _2, ...p } = elementProps;
@@ -217504,27 +217362,27 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
           setValue(name + "_json", e3.target.value);
           void onChange(e3);
         };
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsxs)("select", { defaultValue: JSON.stringify(initialValues[name]), className: `form-control${validationClass(name)} node-editor-select-input`, id: name, onChange: myOnChange, onBlur: myOnChange, ...p, children: [entryHint.optional ? (0, import_jsx_runtime147.jsx)("option", { value: JSON.stringify(null), children: "---" }) : (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, {}), entryHint.options.map((o3, i4) => (0, import_jsx_runtime147.jsx)("option", { value: JSON.stringify(o3.value), children: o3.display }, i4))] }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsxs)("select", { defaultValue: JSON.stringify(initialValues[name]), className: `form-control${validationClass(name)} node-editor-select-input`, id: name, onChange: myOnChange, onBlur: myOnChange, ...p, children: [entryHint.optional ? (0, import_jsx_runtime146.jsx)("option", { value: JSON.stringify(null), children: "---" }) : (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, {}), entryHint.options.map((o3, i4) => (0, import_jsx_runtime146.jsx)("option", { value: JSON.stringify(o3.value), children: o3.display }, i4))] }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       }
       case "boolean": {
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("input", { type: "checkbox", defaultChecked: initialValues[name], className: `form-control${validationClass(name)}`, id: name, ...elementProps }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("input", { type: "checkbox", defaultChecked: initialValues[name], className: `form-control${validationClass(name)}`, id: name, ...elementProps }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), maybe_render_error(name)] }, i3);
       }
       case "form-list": {
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime147.jsx)(FormList, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), newForm: entryHint.newForm, node, latest, env, form: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime146.jsx)(FormList, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), newForm: entryHint.newForm, node, latest, env, form: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
           setValue(name, v2);
         }, view: entryHint.view }), maybe_render_error(name)] }, i3);
       }
       case "form-list-pick":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime147.jsx)(FormList, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), node, latest, env, discriminatedForm: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime146.jsx)(FormList, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), node, latest, env, discriminatedForm: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
           setValue(name, v2);
         }, view: entryHint.view }), maybe_render_error(name)] }, i3);
       case "form-item":
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime147.jsx)(FormItem, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), node, latest, env, form: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)(Label, { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime146.jsx)(FormItem, { id: name, defaultValue: initialValues[name], onExpand: () => onElementExpand(name), node, latest, env, form: entryHint.form, onContract: () => onElementContract(name), onChange: (v2) => {
           setValue(name, v2);
         }, view: entryHint.view }), maybe_render_error(name)] }, i3);
       case "form-pick": {
         const { onChange, onBlur: _2, ...p } = elementProps;
-        const [formRefreshes, refreshForm] = (0, import_react105.useReducer)((i4) => i4 + 1, 0);
+        const [formRefreshes, refreshForm] = (0, import_react104.useReducer)((i4) => i4 + 1, 0);
         const myOnChange = (e3) => {
           const newVariant = e3.target.value;
           if (newVariant !== variantHint) {
@@ -217537,27 +217395,27 @@ function NodeEditorImpl({ form, schema, onSave, onCancel, initialValues, node, l
         };
         const currentValue = watch(name) ?? initialValues[name] ?? {};
         const variantHint = entryHint.form.match(currentValue) ?? entryHint.form.options[0].key;
-        return (0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime147.jsx)("select", { defaultValue: variantHint, className: `form-control node-editor-select-input`, onChange: myOnChange, onBlur: myOnChange, id: name + "_variant", ...p, children: entryHint.form.options.map(({ key, display }) => (0, import_jsx_runtime147.jsx)("option", { value: key, children: display }, key)) }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime147.jsx)(FormItem, { id: name, defaultValue: currentValue, defaultEditing: focusedElement === name, onExpand: () => onElementExpand(name), node, latest, env, form: entryHint.form.pick(variantHint), onContract: () => onElementContract(name), onChange: (v2) => setValue(name, v2), view: entryHint.view }, formRefreshes), maybe_render_error(name)] }, i3);
+        return (0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { htmlFor: name, className: "node-editor-label", children: name }), (0, import_jsx_runtime146.jsx)("select", { defaultValue: variantHint, className: `form-control node-editor-select-input`, onChange: myOnChange, onBlur: myOnChange, id: name + "_variant", ...p, children: entryHint.form.options.map(({ key, display }) => (0, import_jsx_runtime146.jsx)("option", { value: key, children: display }, key)) }), (0, import_jsx_runtime146.jsx)("p", { className: "node-editor-helper-text", children: entry.help }), (0, import_jsx_runtime146.jsx)(FormItem, { id: name, defaultValue: currentValue, defaultEditing: focusedElement === name, onExpand: () => onElementExpand(name), node, latest, env, form: entryHint.form.pick(variantHint), onContract: () => onElementContract(name), onChange: (v2) => setValue(name, v2), view: entryHint.view }, formRefreshes), maybe_render_error(name)] }, i3);
       }
       default:
         return assertUnreachable(entryHint);
     }
-  }), focusedElement ? (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, {}) : (0, import_jsx_runtime147.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime147.jsx)("button", { id: "btn-form-save", type: "button", onClick: onSaveRequest, className: "text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: "Save" }), (0, import_jsx_runtime147.jsxs)("button", { id: "btn-form-cancel", type: "button", onClick: onCancel, className: "inline-flex w-full justify-center text-gray-500 items-center bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600", children: [(0, import_jsx_runtime147.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 -ml-1 sm:mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime147.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] })] })] }) });
+  }), focusedElement ? (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, {}) : (0, import_jsx_runtime146.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime146.jsx)("button", { id: "btn-form-save", type: "button", onClick: onSaveRequest, className: "text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: "Save" }), (0, import_jsx_runtime146.jsxs)("button", { id: "btn-form-cancel", type: "button", onClick: onCancel, className: "inline-flex w-full justify-center text-gray-500 items-center bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600", children: [(0, import_jsx_runtime146.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 -ml-1 sm:mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime146.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] })] })] }) });
 }
 function FormList(props) {
-  const [selectedItem, setSelectedItem] = (0, import_react106.useState)();
-  const [value, setValue] = (0, import_react106.useState)(props.defaultValue ?? []);
-  (0, import_react106.useEffect)(() => {
+  const [selectedItem, setSelectedItem] = (0, import_react105.useState)();
+  const [value, setValue] = (0, import_react105.useState)(props.defaultValue ?? []);
+  (0, import_react105.useEffect)(() => {
     props.onChange(value);
   }, []);
-  const addButton = (0, import_jsx_runtime147.jsx)("a", { href: "#", className: "float-right text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline", onClick: onAdd, children: "Add" });
+  const addButton = (0, import_jsx_runtime146.jsx)("a", { href: "#", className: "float-right text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline", onClick: onAdd, children: "Add" });
   if (!selectedItem) {
-    return (0, import_jsx_runtime147.jsx)("div", { className: "border-dotted border-gray-500 border-1 p-2", children: value.length == 0 ? (0, import_jsx_runtime147.jsxs)("div", { className: "text-sm", children: ["None", addButton] }) : (0, import_jsx_runtime147.jsx)("div", { className: "", children: value.map((v2, i3) => (0, import_jsx_runtime147.jsx)("div", { children: (0, import_jsx_runtime147.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-1 text-sm", children: [(0, import_jsx_runtime147.jsx)("div", { className: "col-span-1", children: (0, import_jsx_runtime147.jsx)(import_react105.Suspense, { fallback: (0, import_jsx_runtime147.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime147.jsx)(props.view, { ...v2 }) }) }), (0, import_jsx_runtime147.jsxs)("div", { className: "col-span-1 pb-2", children: [(0, import_jsx_runtime147.jsx)("a", { onClick: () => onEdit(i3), href: "#", className: "text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm italic", children: "Edit" }), " / ", (0, import_jsx_runtime147.jsx)("a", { onClick: () => onDelete(i3), href: "#", className: "text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm italic", children: "Remove" }), i3 === value.length - 1 ? addButton : null] })] }) }, i3)) }) });
+    return (0, import_jsx_runtime146.jsx)("div", { className: "border-dotted border-gray-500 border-1 p-2", children: value.length == 0 ? (0, import_jsx_runtime146.jsxs)("div", { className: "text-sm", children: ["None", addButton] }) : (0, import_jsx_runtime146.jsx)("div", { className: "", children: value.map((v2, i3) => (0, import_jsx_runtime146.jsx)("div", { children: (0, import_jsx_runtime146.jsxs)("div", { className: "grid grid-flow-row-dense grid-cols-1 text-sm", children: [(0, import_jsx_runtime146.jsx)("div", { className: "col-span-1", children: (0, import_jsx_runtime146.jsx)(import_react104.Suspense, { fallback: (0, import_jsx_runtime146.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime146.jsx)(props.view, { ...v2 }) }) }), (0, import_jsx_runtime146.jsxs)("div", { className: "col-span-1 pb-2", children: [(0, import_jsx_runtime146.jsx)("a", { onClick: () => onEdit(i3), href: "#", className: "text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm italic", children: "Edit" }), " / ", (0, import_jsx_runtime146.jsx)("a", { onClick: () => onDelete(i3), href: "#", className: "text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm italic", children: "Remove" }), i3 === value.length - 1 ? addButton : null] })] }) }, i3)) }) });
   }
   if (props.discriminatedForm) {
-    return (0, import_jsx_runtime147.jsx)(DiscriminatedForm, { ...props, defaultValue: selectedItem.value, discriminatedForm: props.discriminatedForm, onCancel, onSave });
+    return (0, import_jsx_runtime146.jsx)(DiscriminatedForm, { ...props, defaultValue: selectedItem.value, discriminatedForm: props.discriminatedForm, onCancel, onSave });
   }
-  return props.form ? (0, import_jsx_runtime147.jsx)(Form, { defaultValue: selectedItem.value, form: selectedItem.index === void 0 && props.newForm ? props.newForm.form : props.form, onCancel, onSave, node: props.node, latest: props.latest, env: props.env }) : (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, {});
+  return props.form ? (0, import_jsx_runtime146.jsx)(Form, { defaultValue: selectedItem.value, form: selectedItem.index === void 0 && props.newForm ? props.newForm.form : props.form, onCancel, onSave, node: props.node, latest: props.latest, env: props.env }) : (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, {});
   function onAdd() {
     const newForm = props.discriminatedForm ? props.discriminatedForm.pick(props.discriminatedForm.options[0].key) : props.newForm ? props.newForm : props.form ? props.form : {};
     const newValue = buildDefaults(newForm, {}, props.node, props.latest).initialValues;
@@ -217606,12 +217464,12 @@ function FormList(props) {
   }
 }
 function FormItem(props) {
-  const [editing, setEditing] = (0, import_react106.useState)(props.defaultEditing ?? false);
-  const [value, setValue] = (0, import_react106.useState)(props.defaultValue ?? []);
-  (0, import_react106.useEffect)(() => {
+  const [editing, setEditing] = (0, import_react105.useState)(props.defaultEditing ?? false);
+  const [value, setValue] = (0, import_react105.useState)(props.defaultValue ?? []);
+  (0, import_react105.useEffect)(() => {
     props.onChange(value);
   }, []);
-  return editing ? (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: (0, import_jsx_runtime147.jsx)(Form, { defaultValue: value, form: props.form, onCancel, onSave, latest: props.latest, env: props.env, node: props.node }) }) : (0, import_jsx_runtime147.jsxs)("div", { className: "flex mb-2 border-dotted border-gray-500 border-1 p-2", children: [(0, import_jsx_runtime147.jsx)("span", { className: "flex-grow text-sm", children: (0, import_jsx_runtime147.jsx)(import_react105.Suspense, { fallback: (0, import_jsx_runtime147.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime147.jsx)(props.view, { ...value }) }) }), (0, import_jsx_runtime147.jsx)("a", { onClick: () => onEdit(), href: "#", className: "shrink text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm", children: (0, import_jsx_runtime147.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-6", children: (0, import_jsx_runtime147.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }) }) })] });
+  return editing ? (0, import_jsx_runtime146.jsx)(import_jsx_runtime146.Fragment, { children: (0, import_jsx_runtime146.jsx)(Form, { defaultValue: value, form: props.form, onCancel, onSave, latest: props.latest, env: props.env, node: props.node }) }) : (0, import_jsx_runtime146.jsxs)("div", { className: "flex mb-2 border-dotted border-gray-500 border-1 p-2", children: [(0, import_jsx_runtime146.jsx)("span", { className: "flex-grow text-sm", children: (0, import_jsx_runtime146.jsx)(import_react104.Suspense, { fallback: (0, import_jsx_runtime146.jsx)("div", { children: "..." }), children: (0, import_jsx_runtime146.jsx)(props.view, { ...value }) }) }), (0, import_jsx_runtime146.jsx)("a", { onClick: () => onEdit(), href: "#", className: "shrink text-blue-600 dark:hover:text-white hover:text-gray-900 hover:underline text-sm", children: (0, import_jsx_runtime146.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", strokeWidth: "1.5", stroke: "currentColor", className: "w-6 h-6", children: (0, import_jsx_runtime146.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" }) }) })] });
   function onEdit() {
     setEditing(true);
     props.onExpand();
@@ -217631,29 +217489,29 @@ function FormItem(props) {
   }
 }
 function DiscriminatedForm(props) {
-  const [defaultValue, setDefault] = (0, import_react106.useState)(props.defaultValue);
-  const [discriminator, setDiscriminator] = (0, import_react106.useState)(props.defaultValue ? props.discriminatedForm.match(props.defaultValue) : props.discriminatedForm.options[0].key);
+  const [defaultValue, setDefault] = (0, import_react105.useState)(props.defaultValue);
+  const [discriminator, setDiscriminator] = (0, import_react105.useState)(props.defaultValue ? props.discriminatedForm.match(props.defaultValue) : props.discriminatedForm.options[0].key);
   const onChange = (e2) => {
     const disc = e2.target.value;
     setDiscriminator(disc);
     const newValue = buildDefaults(props.discriminatedForm.pick(disc), {}, props.node, props.latest);
     setDefault(newValue);
   };
-  return (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [(0, import_jsx_runtime147.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime147.jsx)("label", { className: "node-editor-label", children: "Select an option" }), (0, import_jsx_runtime147.jsx)("select", { defaultValue: discriminator, className: "form-control node-editor-select-input", onChange, children: props.discriminatedForm.options.map((o3, i3) => (0, import_jsx_runtime147.jsx)("option", { value: o3.key, children: o3.display }, i3)) })] }), (0, import_jsx_runtime147.jsx)(Form, { defaultValue, form: props.discriminatedForm.pick(discriminator), onCancel: props.onCancel, onSave: props.onSave, node: props.node, latest: props.latest, env: props.env }, discriminator)] });
+  return (0, import_jsx_runtime146.jsxs)(import_jsx_runtime146.Fragment, { children: [(0, import_jsx_runtime146.jsxs)("div", { className: "form-group", children: [(0, import_jsx_runtime146.jsx)("label", { className: "node-editor-label", children: "Select an option" }), (0, import_jsx_runtime146.jsx)("select", { defaultValue: discriminator, className: "form-control node-editor-select-input", onChange, children: props.discriminatedForm.options.map((o3, i3) => (0, import_jsx_runtime146.jsx)("option", { value: o3.key, children: o3.display }, i3)) })] }), (0, import_jsx_runtime146.jsx)(Form, { defaultValue, form: props.discriminatedForm.pick(discriminator), onCancel: props.onCancel, onSave: props.onSave, node: props.node, latest: props.latest, env: props.env }, discriminator)] });
 }
 function ListInput(props) {
-  const [value, setValue] = (0, import_react106.useState)(props.defaultValue ?? []);
-  const [validation, setValidation] = (0, import_react106.useState)(props.validation.safeParse(value));
-  (0, import_react106.useEffect)(() => {
+  const [value, setValue] = (0, import_react105.useState)(props.defaultValue ?? []);
+  const [validation, setValidation] = (0, import_react105.useState)(props.validation.safeParse(value));
+  (0, import_react105.useEffect)(() => {
     if (props.defaultValue)
       runValidation(props.defaultValue);
   }, []);
-  const [focusedItem, setFocusedItem] = (0, import_react106.useState)(void 0);
-  (0, import_react106.useEffect)(() => {
+  const [focusedItem, setFocusedItem] = (0, import_react105.useState)(void 0);
+  (0, import_react105.useEffect)(() => {
   }, [focusedItem]);
-  return (0, import_jsx_runtime147.jsxs)("div", { id: props.id, children: [value.map((item, i3) => {
-    return (0, import_jsx_runtime147.jsxs)("div", { children: [" ", (0, import_jsx_runtime147.jsx)("input", { onChange: onExistingChange(i3), onBlur: onExistingBlur, autoFocus: i3 == focusedItem, className: `form-control${validation.success ? "" : " is-invalid"} node-editor-text-input`, defaultValue: item })] }, i3);
-  }), validation.success == false && (0, import_jsx_runtime147.jsx)("div", { className: "invalid-feedback", children: validation.error.message }), (0, import_jsx_runtime147.jsx)("input", { onChange: onNewChange, className: "form-control node-editor-text-input", value: "" }, value.length)] });
+  return (0, import_jsx_runtime146.jsxs)("div", { id: props.id, children: [value.map((item, i3) => {
+    return (0, import_jsx_runtime146.jsxs)("div", { children: [" ", (0, import_jsx_runtime146.jsx)("input", { onChange: onExistingChange(i3), onBlur: onExistingBlur, autoFocus: i3 == focusedItem, className: `form-control${validation.success ? "" : " is-invalid"} node-editor-text-input`, defaultValue: item })] }, i3);
+  }), validation.success == false && (0, import_jsx_runtime146.jsx)("div", { className: "invalid-feedback", children: validation.error.message }), (0, import_jsx_runtime146.jsx)("input", { onChange: onNewChange, className: "form-control node-editor-text-input", value: "" }, value.length)] });
   function onNewChange(e2) {
     const newValue = value.concat([e2.currentTarget.value]);
     setValue(newValue);
@@ -217691,7 +217549,7 @@ function SelectValidation(name, hint) {
       return true;
     }
     if (hint.options.find((v22) => {
-      return (0, import_deep_equal.default)(v22.value, v2);
+      return (0, import_deep_equal2.default)(v22.value, v2);
     }))
       return true;
     return false;
@@ -217715,6 +217573,191 @@ function getDisplayName(type, _description, _x) {
   return name;
 }
 
+// build/client/client/jsx/connection-editor.js
+var import_jsx_runtime147 = __toESM(require_jsx_runtime());
+var import_react106 = __toESM(require_react());
+function ConnectionEditor(props) {
+  return (0, import_jsx_runtime147.jsx)(ConnectionEditorImpl, { ...props });
+}
+function deriveAvailableModes(source, dest) {
+  const acceptType = dest.subscription.accepts?.type;
+  const produceType = source.subscription.produces?.type;
+  if (!acceptType || !produceType) {
+    throw new Error("Node doesn't support subscriptions");
+  }
+  switch (produceType) {
+    case "simple-stream":
+      return ["take-first-stream"];
+    case "dynamic-streams":
+      return ["take-first-stream", "take-specific-streams", "take-all-streams"];
+    default:
+      assertUnreachable(produceType);
+  }
+}
+function ConnectionEditorImpl(props) {
+  const sourceNodeInfo = props.connection.sourceNode.info;
+  const destNodeInfo = props.connection.destinationNode.info;
+  const sourceNodeInputs = props.connection.sourceNode.subscriptions.flatMap((s3) => s3.expectedStreams);
+  const latest = props.connection.subscription.streams;
+  const availableStreams = outputStreamComponents(sourceNodeInfo.subscription.produces, props.connection.sourceNode.config, sourceNodeInputs);
+  const availableMedia = outputMedia(sourceNodeInfo.subscription.produces, props.connection.sourceNode.config, sourceNodeInputs);
+  const defaultStreamSelection = latest.type == "take-specific-streams" ? latest.filter : [];
+  const availableModes = deriveAvailableModes(sourceNodeInfo, destNodeInfo);
+  const allowedMedia = inputMedia(destNodeInfo.subscription.accepts, props.connection.destinationNode.config);
+  const [mode, setMode] = (0, import_react106.useState)(availableModes.includes(latest.type) ? latest.type : availableModes[0]);
+  const dynamicStreamsMode = destNodeInfo.subscription.accepts?.type == "dynamic-streams" ? destNodeInfo.subscription.accepts.mode : void 0;
+  const inputStreamsGroupingKey = sourceNodeInfo.subscription?.produces?.type == "dynamic-streams" ? sourceNodeInfo.subscription?.produces.groupBy : void 0;
+  const groupingKey = dynamicStreamsMode && typeof dynamicStreamsMode != "string" ? dynamicStreamsMode.groupBy : inputStreamsGroupingKey;
+  const availableGroups = groupingKey ? [...new Set(availableStreams.map((s3) => s3[groupingKey]?.toString())).values()].filter((s3) => !!s3) : [];
+  const [simpleStreamSelection, setSimpleStreamSelection] = (0, import_react106.useState)(true);
+  const [streamSelection, setStreamSelection] = (0, import_react106.useState)(defaultStreamSelection);
+  const defaultMediaSelection = {
+    audio: false,
+    video: false,
+    subtitle: false,
+    playlist: false,
+    ancillary: false
+  };
+  if (latest.type == "take-all-streams" || latest.type == "take-first-stream") {
+    const selectedMedia = latest.filter.map((f) => f.media);
+    for (const k2 in defaultMediaSelection) {
+      if (selectedMedia.includes(k2))
+        defaultMediaSelection[k2] = true;
+    }
+  }
+  const [mediaSelection, setMediaSelection] = (0, import_react106.useState)(defaultMediaSelection);
+  const [validationMessage, setValidationMessage] = (0, import_react106.useState)({
+    streams: void 0,
+    media: void 0
+  });
+  (0, import_react106.useEffect)(() => {
+    doValidation();
+  }, [mediaSelection, streamSelection]);
+  return (0, import_jsx_runtime147.jsx)("div", { className: "z-40 w-64 max-w-xs overflow-y-auto bg-white dark:bg-gray-800", tabIndex: -1, children: (0, import_jsx_runtime147.jsxs)("div", { children: [(0, import_jsx_runtime147.jsxs)("div", { children: [(0, import_jsx_runtime147.jsx)("h4", { className: "mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white", children: "Edit Subscription" }), (0, import_jsx_runtime147.jsxs)("p", { className: "text-l text-gray-900 dark:text-white", children: ["Source: ", props.connection.sourceNode.id] }), (0, import_jsx_runtime147.jsxs)("p", { className: "text-l text-gray-900 dark:text-white", children: ["Destination: ", props.connection.destinationNode.id] })] }), (0, import_jsx_runtime147.jsxs)("button", { type: "button", onClick: props.onCancel, className: "text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-1 right-1 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white", children: [cross(), (0, import_jsx_runtime147.jsx)("span", { className: "sr-only", children: "Close menu" })] }), (0, import_jsx_runtime147.jsxs)("form", { noValidate: true, children: [(0, import_jsx_runtime147.jsx)("div", { className: "form-group", children: modeDropdown() }), (0, import_jsx_runtime147.jsx)("div", { className: "form-group", children: selectionInputs() }), (0, import_jsx_runtime147.jsxs)("div", { className: "flex justify-center w-full mt-2 pb-4 space-x-4", children: [(0, import_jsx_runtime147.jsx)("button", { type: "submit", onClick: onSubmit, className: "text-white w-full justify-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800", children: "Save" }), (0, import_jsx_runtime147.jsxs)("button", { type: "button", onClick: props.onCancel, className: "inline-flex w-full justify-center text-gray-500 items-center bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-primary-300 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5 hover:text-gray-900 focus:z-10 dark:bg-gray-700 dark:text-gray-300 dark:border-gray-500 dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-gray-600", children: [(0, import_jsx_runtime147.jsx)("svg", { "aria-hidden": "true", className: "w-5 h-5 -ml-1 sm:mr-1", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", children: (0, import_jsx_runtime147.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2", d: "M6 18L18 6M6 6l12 12" }) }), "Cancel"] })] })] })] }) });
+  function doValidation() {
+    let isError = false;
+    const newValue = { media: void 0, streams: void 0 };
+    if (mode == "take-specific-streams" && streamSelection.length == 0) {
+      newValue.streams = "At least one stream must be selected";
+      isError = true;
+    }
+    setValidationMessage(newValue);
+    return !isError;
+  }
+  function onSubmit(e2) {
+    e2.preventDefault();
+    if (doValidation()) {
+      switch (mode) {
+        case "take-all-streams":
+        case "take-first-stream":
+          props.onSaved({
+            type: mode,
+            filter: Object.entries(mediaSelection).filter(([_2, v2]) => v2).map(([k2, _2]) => ({ media: k2 }))
+          });
+          break;
+        case "take-specific-streams":
+          props.onSaved({
+            type: mode,
+            filter: streamSelection
+          });
+          break;
+        default:
+          assertUnreachable(mode);
+      }
+    }
+  }
+  function onMultiStreamSelectChange(stream) {
+    return (checked) => {
+      if (!checked) {
+        const newValue = [...streamSelection];
+        const i3 = newValue.findIndex((v2) => {
+          if (streamMatchesFilter(stream, v2)) {
+            return true;
+          }
+          return false;
+        });
+        if (i3 >= 0) {
+          newValue.splice(i3, 1);
+          setStreamSelection(newValue);
+        }
+      } else {
+        const newValue = [...streamSelection];
+        newValue.push(stream);
+        setStreamSelection(newValue);
+      }
+    };
+  }
+  function onGroupSelectChange(group) {
+    return (checked) => {
+      if (!groupingKey)
+        return;
+      const withoutGroup = streamSelection.filter((s3) => s3[groupingKey] != group);
+      if (!checked) {
+        setStreamSelection(withoutGroup);
+      } else {
+        const newGroups = availableStreams.filter((s3) => s3[groupingKey] == group && allowedMedia.includes(s3.media));
+        const final = withoutGroup.concat(newGroups);
+        setStreamSelection(final);
+      }
+    };
+  }
+  function onMediaSelectChange(media) {
+    return (selected) => {
+      const updated = {
+        ...mediaSelection
+      };
+      updated[media] = selected;
+      setMediaSelection(updated);
+    };
+  }
+  function modeDropdown() {
+    if (availableModes.length === 1) {
+      return (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [(0, import_jsx_runtime147.jsxs)("legend", { className: "mt-4", children: ["Strategy: ", SubscriptionTypeInfo[mode]] }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text mb-4 mt-2", children: SubscriptionTypeDescription[mode] })] });
+    } else {
+      return (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [(0, import_jsx_runtime147.jsx)("legend", { className: "mt-4", children: "Strategy" }), (0, import_jsx_runtime147.jsx)(Select, { id: "selection-mode", className: "node-editor-select-input", defaultValue: mode, onChange: (e2) => setMode(e2.target.value), children: availableModes.map((m2, i3) => {
+        return (0, import_jsx_runtime147.jsx)("option", { value: m2, children: SubscriptionTypeInfo[m2] }, i3);
+      }) }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text mb-4 mt-2", children: SubscriptionTypeDescription[mode] })] });
+    }
+  }
+  function selectionInputs() {
+    switch (mode) {
+      case "take-all-streams":
+      case "take-first-stream":
+        return (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: mediaSelectionCheckboxes() });
+      case "take-specific-streams":
+        return groupingKey ? (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [(0, import_jsx_runtime147.jsx)(ToggleSwitch, { id: "simple-select", checked: simpleStreamSelection, onChange: (c2) => setSimpleStreamSelection(c2) }), (0, import_jsx_runtime147.jsx)(Label, { htmlFor: "simple-seledt", children: "Simple" }), simpleStreamSelection ? groupedStreamSelection() : multiStreamSelection()] }) : (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [" ", multiStreamSelection(), " "] });
+      default:
+        assertUnreachable(mode);
+    }
+  }
+  function maybeValidationMessage(message) {
+    return message ? (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center text-sm text-red-800 rounded-lg bg-red-50 dark:bg-gray-800 dark:text-red-400", role: "alert", children: [info(), (0, import_jsx_runtime147.jsx)("span", { className: "sr-only", children: "Info" }), (0, import_jsx_runtime147.jsx)("div", { children: message })] }) }) : (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, {});
+  }
+  function mediaSelectionCheckboxes() {
+    return (0, import_jsx_runtime147.jsxs)(import_jsx_runtime147.Fragment, { children: [(0, import_jsx_runtime147.jsx)("legend", { className: "mt-4", children: "Media Selection" }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The media types that will be used from this node" }), availableMedia.map((media) => {
+      const used = mediaSelection[media];
+      const mediaEnabled = allowedMedia.includes(media);
+      return (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime147.jsx)(ToggleSwitch, { id: "accept", className: `ml-1 ${mediaEnabled ? "" : "opacity-10"}`, checked: used, disabled: !mediaEnabled, onChange: onMediaSelectChange(media) }), (0, import_jsx_runtime147.jsxs)(Label, { className: `${mediaEnabled ? "" : "opacity-10"}`, htmlFor: "accept", children: [media, " "] })] }, media);
+    }), maybeValidationMessage(validationMessage.media)] });
+  }
+  function groupedStreamSelection() {
+    if (!groupingKey)
+      return;
+    return (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: (0, import_jsx_runtime147.jsxs)("fieldset", { className: "flex max-w-md flex-col gap-4", children: [(0, import_jsx_runtime147.jsx)("legend", { className: "mt-4", children: "Stream Selection (simplified)" }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The streams that will be used from this node" }), availableGroups.map((s3, i3) => {
+      const selectedStreams = streamSelection.filter((f) => f[groupingKey] == s3 && allowedMedia.includes(f.media));
+      const totalStreams = availableStreams.filter((f) => f[groupingKey] == s3 && allowedMedia.includes(f.media));
+      return (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime147.jsx)(ToggleSwitch, { id: `stream-${i3}`, name: "streams", value: i3, checked: selectedStreams.length > 0 && selectedStreams.length == totalStreams.length, onChange: onGroupSelectChange(s3) }), (0, import_jsx_runtime147.jsx)(Label, { htmlFor: `stream-${i3}`, children: s3 })] }, i3);
+    }), maybeValidationMessage(validationMessage.streams)] }) });
+  }
+  function multiStreamSelection() {
+    return (0, import_jsx_runtime147.jsx)(import_jsx_runtime147.Fragment, { children: (0, import_jsx_runtime147.jsxs)("fieldset", { className: "flex max-w-md flex-col gap-4", children: [(0, import_jsx_runtime147.jsx)("legend", { className: "mt-4", children: "Stream Selection" }), (0, import_jsx_runtime147.jsx)("p", { className: "node-editor-helper-text mb-4", children: "The streams that will be used from this node" }), availableStreams.map((s3, i3) => {
+      const mediaEnabled = allowedMedia.includes(s3.media);
+      return (0, import_jsx_runtime147.jsxs)("div", { className: "flex items-center gap-2", children: [(0, import_jsx_runtime147.jsx)(ToggleSwitch, { id: `stream-${i3}`, name: "streams", value: i3, checked: !!streamSelection.find((f) => streamMatchesFilter(s3, f)), disabled: !mediaEnabled, onChange: onMultiStreamSelectChange(s3) }), (0, import_jsx_runtime147.jsx)(Label, { htmlFor: `stream-${i3}`, children: streamNameFromDefinition(s3) })] }, i3);
+    }), maybeValidationMessage(validationMessage.streams)] }) });
+  }
+}
+var connection_editor_default = ConnectionEditor;
+
 // build/client/client/tools.js
 var import_react108 = __toESM(require_react());