@imperosoft/cris-webui-components 1.3.0 → 1.5.0

package/dist/index.js

@@ -1134,6 +1134,7 @@ function CrisOfflinePage({
   });
   const processorHost = processorHostProp ?? (typeof window !== "undefined" ? window.location.hostname : "localhost");
   const isError = connectionStatus === "error" || hasSeenError && connectionStatus !== "connected";
+  const isWsTransport = (0, import_cris_webui_ch5_core6.getActiveTransport)() === "ws";
   (0, import_react3.useEffect)(() => {
     if (connectionStatus === "error") {
       setHasSeenError(true);
@@ -1182,6 +1183,7 @@ function CrisOfflinePage({
     return () => clearTimeout(timer);
   }, [retryCountdown, retryConnection]);
   (0, import_react3.useEffect)(() => {
+    if (isWsTransport) return;
     if (isError && isDeployedOnProcessor && loginRedirectDelay > 0 && !returnedFromLogin) {
       const timer = setTimeout(() => {
         try {
@@ -1192,7 +1194,7 @@ function CrisOfflinePage({
       }, loginRedirectDelay);
       return () => clearTimeout(timer);
     }
-  }, [isError, isDeployedOnProcessor, loginUrl, loginRedirectDelay, returnedFromLogin]);
+  }, [isError, isDeployedOnProcessor, loginUrl, loginRedirectDelay, returnedFromLogin, isWsTransport]);
   const envInfo = {
     userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "N/A",
     hasCrComLib: typeof window !== "undefined" && typeof window.CrComLib !== "undefined",
@@ -1213,9 +1215,9 @@ function CrisOfflinePage({
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `cris-offline-page absolute inset-0 bg-gray-900 flex flex-col items-center justify-center overflow-auto py-8 ${className}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center max-w-4xl px-4", children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-16 h-16 mx-auto rounded-full flex items-center justify-center ${isError ? "bg-red-500/20" : "bg-yellow-500/20"}`, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `w-8 h-8 rounded-full ${isError ? "bg-red-500" : "bg-yellow-500 animate-pulse"}` }) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("h1", { className: "text-2xl font-bold text-white mb-2", children: isError ? isTimeoutError ? "Processor Unreachable" : "Connection Error" : "Connecting..." }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isDeployedOnProcessor ? returnedFromLogin ? "Connection failed after login. Please try again." : "Redirecting to login page..." : isTimeoutError ? "Could not connect to the processor. Check the IP address and network connection." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isTimeoutError ? "Connection Timeout" : isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
-    isError && !isDeployedOnProcessor && isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", children: isError ? isWsTransport ? "Control system is not responding. Reconnecting automatically..." : isDeployedOnProcessor ? returnedFromLogin ? "Connection failed after login. Please try again." : "Redirecting to login page..." : isTimeoutError ? "Could not connect to the processor. Check the IP address and network connection." : "WebSocket connection failed. SSL certificate may need to be accepted." : "Establishing connection to control system" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-8", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `px-4 py-2 rounded-full text-sm font-medium ${isError ? "bg-red-500/20 text-red-400" : "bg-yellow-500/20 text-yellow-400"}`, children: isError ? isWsTransport ? "Reconnecting" : isTimeoutError ? "Connection Timeout" : isDevMode ? "Dev Mode - Auth Error" : isVC4 ? "VC4 - Not Authorized" : "Auth Error" : "Connecting" }) }),
+    isError && !isWsTransport && !isDeployedOnProcessor && isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-orange-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: [
         "The processor at ",
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-white", children: processorHost }),
@@ -1236,7 +1238,24 @@ function CrisOfflinePage({
         }
       ) })
     ] }),
-    isError && !isDeployedOnProcessor && !isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
+    isError && isWsTransport && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-orange-500/10 border border-orange-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-orange-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: [
+        "The control system at ",
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-white", children: processorHost }),
+        " is not responding."
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginBottom: "1em" }, children: "It may be restarting (e.g. a program update). The connection retries automatically." }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-[1em] justify-center", style: { overflow: "visible" }, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          onClick: retryConnection,
+          className: "bg-orange-600 hover:bg-orange-500 text-white font-medium rounded-xl transition-colors",
+          style: { padding: "1em 2em", fontSize: "1.2em", whiteSpace: "nowrap", overflow: "visible" },
+          children: "Retry Now"
+        }
+      ) })
+    ] }),
+    isError && !isWsTransport && !isDeployedOnProcessor && !isTimeoutError && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mt-[2em] bg-blue-500/10 border border-blue-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: retryCountdown !== null ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "text-center", style: { overflow: "visible" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "text-blue-400 font-medium", style: { fontSize: "1.4em", marginBottom: "1em" }, children: [
         "Retrying connection in ",
         retryCountdown,
@@ -1275,7 +1294,7 @@ function CrisOfflinePage({
       ] }),
       certPageOpened && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginTop: "1em" }, children: "Connection will auto-retry when you return to this page." })
     ] }) }),
-    isError && isDeployedOnProcessor && returnedFromLogin && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-red-500/10 border border-red-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
+    isError && !isWsTransport && isDeployedOnProcessor && returnedFromLogin && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "mt-[2em] bg-red-500/10 border border-red-500/30 rounded-xl", style: { overflow: "visible", padding: "1.5em 1.5em 2em 1.5em" }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-red-400 font-medium", style: { fontSize: "1.2em", marginBottom: "1em" }, children: "Connection failed after authentication." }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-gray-400", style: { fontSize: "1em", marginBottom: "1em" }, children: "This may be due to an expired session or WebSocket connection issue." }),
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex gap-[1em] justify-center flex-wrap", style: { overflow: "visible" }, children: [
@@ -2702,7 +2721,7 @@ function DspIoPage({
   const row = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
-      className: "flex h-full items-stretch gap-[0.3em] px-[0.5em] py-[0.5em]",
+      className: `flex h-full items-stretch gap-[0.3em] px-[0.5em] py-[0.5em]${bare ? "" : " w-max mx-auto"}`,
       style: { minWidth: "min-content" },
       children: sections.map((sec, i) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col h-full", children: [
         hasHeaders && // Header band: spans this group's strips. The 1px separator lives only
@@ -2762,6 +2781,7 @@ var DSP_CLASS_DEFAULTS = {
   faderThumb: "bg-[#4f5152] rounded",
   mute: "w-full h-full rounded-lg flex items-center justify-center transition-colors bg-[#4f5152] text-white",
   muteActive: "bg-[#dc2626] text-white",
+  mixerBackplate: "bg-[#282C34]",
   mixerCorner: "sticky z-30 flex items-center justify-center bg-[#282C34] text-[#4f5152] text-[1.1em] font-bold border border-black/30",
   mixerChrome: "sticky flex items-center justify-center text-center bg-[#282C34] text-white leading-tight border border-black/30",
   cell: "z-10 flex items-center justify-center border border-black/30",
@@ -2856,15 +2876,42 @@ var import_cris_webui_ch5_core13 = require("@imperosoft/cris-webui-ch5-core");
 // src/components/dsp/DspMixer.tsx
 var import_react7 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var GROUP_W = "2.6em";
-var COMMON_W = "9em";
-var CHAN_W = "3em";
-var GROUP_H = "2.2em";
-var COMMON_H = "2.4em";
-var CHAN_H = "2.1em";
-var CELL_W = "7.5em";
-var ROW_H = "4.5em";
+var DEFAULT_GROUP_W = "2.6em";
+var DEFAULT_COMMON_W = "9em";
+var DEFAULT_CHAN_W = "3em";
+var DEFAULT_GROUP_H = "2.2em";
+var DEFAULT_COMMON_H = "2.4em";
+var DEFAULT_CHAN_H = "2.1em";
+var DEFAULT_CELL_W = "7.5em";
+var DEFAULT_ROW_H = "4.5em";
 var DRAG_FACTOR = 0.6;
+function resolveGeometry(o, inputCount, outputCount) {
+  const groupW = o?.groupW ?? DEFAULT_GROUP_W;
+  const commonW = o?.commonW ?? DEFAULT_COMMON_W;
+  const chanW = o?.chanW ?? DEFAULT_CHAN_W;
+  const groupH = o?.groupH ?? DEFAULT_GROUP_H;
+  const commonH = o?.commonH ?? DEFAULT_COMMON_H;
+  const chanH = o?.chanH ?? DEFAULT_CHAN_H;
+  const cellW = o?.cellW ?? DEFAULT_CELL_W;
+  const rowH = o?.rowH ?? DEFAULT_ROW_H;
+  return {
+    groupW,
+    commonW,
+    chanW,
+    groupH,
+    commonH,
+    chanH,
+    cellW,
+    rowH,
+    topLink: groupH,
+    topChan: `calc(${groupH} + ${commonH})`,
+    leftLink: groupW,
+    leftChan: `calc(${groupW} + ${commonW})`,
+    z: { corner: 40, group: 30, link: 25, chan: 20 },
+    inputCount,
+    outputCount
+  };
+}
 function CrosspointOnIcon({ icon }) {
   if (typeof icon !== "string") return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: icon });
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
@@ -2878,7 +2925,17 @@ function CrosspointOnIcon({ icon }) {
     }
   );
 }
-function DspMixer({ status, oid, send, cls, icons }) {
+function DspMixer({
+  status,
+  oid,
+  send,
+  cls,
+  icons,
+  geometry,
+  renderInputHeader,
+  renderOutputHeader,
+  renderCorner
+}) {
   const scrollRef = (0, import_react7.useRef)(null);
   const startRef = (0, import_react7.useRef)(null);
   const movedRef = (0, import_react7.useRef)(false);
@@ -2928,13 +2985,167 @@ function DspMixer({ status, oid, send, cls, icons }) {
   if (inputs.length === 0 || outputs.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls.message, children: "Sin crosspoints" });
   }
+  const geom = resolveGeometry(geometry, inputs.length, outputs.length);
   const inAxis = buildMixerAxisGrouped(inputs, linksFor(status?.ln, "in"), groupsFor(status?.dg, "in"));
   const outAxis = buildMixerAxisGrouped(outputs, linksFor(status?.ln, "out"), groupsFor(status?.dg, "out"));
-  const topLink = GROUP_H;
-  const topChan = `calc(${GROUP_H} + ${COMMON_H})`;
-  const leftLink = GROUP_W;
-  const leftChan = `calc(${GROUP_W} + ${COMMON_W})`;
-  const Z = { corner: 40, group: 30, link: 25, chan: 20 };
+  const { topLink, topChan, leftLink, leftChan, z: Z } = geom;
+  const defaultInputHeader = () => inAxis.flatMap((it, ii) => {
+    const col = 4 + ii;
+    const nodes = [];
+    if (it.groupStart) {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerGroup,
+            style: { top: 0, zIndex: Z.group, gridRow: 1, gridColumn: `${col} / span ${it.groupSpan}` },
+            title: it.groupName,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 px-[0.2em]", children: it.groupName })
+          },
+          `igrp:${it.id}`
+        )
+      );
+    } else if (it.groupName === void 0) {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerChrome,
+            style: { top: 0, zIndex: Z.group, gridRow: 1, gridColumn: col }
+          },
+          `ifill:${it.id}`
+        )
+      );
+    }
+    if (it.linkCommon !== void 0) {
+      if (it.linkStart) {
+        nodes.push(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: `${cls.mixerChrome} px-[0.2em] font-semibold`,
+              style: { top: topLink, zIndex: Z.link, gridRow: 2, gridColumn: `${col} / span ${it.linkSpan}` },
+              title: it.linkCommon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.linkCommon })
+            },
+            `ilnk:${it.id}`
+          )
+        );
+      }
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: `${cls.mixerChrome} px-[0.2em]`,
+            style: { top: topChan, zIndex: Z.chan, gridRow: 3, gridColumn: col },
+            title: it.channelLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-1", children: it.channelLabel })
+          },
+          `ichn:${it.id}`
+        )
+      );
+    } else {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerChrome,
+            style: { top: topLink, zIndex: Z.link, gridRow: 2, gridColumn: col }
+          },
+          `ilf:${it.id}`
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: `${cls.mixerChrome} px-[0.2em]`,
+            style: { top: topChan, zIndex: Z.chan, gridRow: 3, gridColumn: col },
+            title: it.channelLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.channelLabel })
+          },
+          `ichn:${it.id}`
+        )
+      );
+    }
+    return nodes;
+  });
+  const defaultOutputHeader = () => outAxis.flatMap((it, oo) => {
+    const row = 4 + oo;
+    const nodes = [];
+    if (it.groupStart) {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerGroupV,
+            style: {
+              left: 0,
+              zIndex: Z.group,
+              gridColumn: 1,
+              gridRow: `${row} / span ${it.groupSpan}`,
+              writingMode: "vertical-rl",
+              transform: "rotate(180deg)"
+            },
+            title: it.groupName,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.groupName })
+          },
+          `ogrp:${it.id}`
+        )
+      );
+    } else if (it.groupName === void 0) {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerChrome,
+            style: { left: 0, zIndex: Z.group, gridColumn: 1, gridRow: row }
+          },
+          `ofill:${it.id}`
+        )
+      );
+    }
+    if (it.linkCommon !== void 0) {
+      if (it.linkStart) {
+        nodes.push(
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "div",
+            {
+              className: `${cls.mixerChrome} justify-start px-[0.4em] font-semibold`,
+              style: { left: leftLink, zIndex: Z.link, gridColumn: 2, gridRow: `${row} / span ${it.linkSpan}` },
+              title: it.linkCommon,
+              children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 text-left", children: it.linkCommon })
+            },
+            `olnk:${it.id}`
+          )
+        );
+      }
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: cls.mixerChrome,
+            style: { left: leftChan, zIndex: Z.chan, gridColumn: 3, gridRow: row },
+            title: it.channelLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-1", children: it.channelLabel })
+          },
+          `ochn:${it.id}`
+        )
+      );
+    } else {
+      nodes.push(
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: `${cls.mixerChrome} justify-start px-[0.4em]`,
+            style: { left: leftLink, zIndex: Z.chan, gridColumn: "2 / span 2", gridRow: row },
+            title: it.channelLabel,
+            children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 text-left", children: it.channelLabel })
+          },
+          `ochn:${it.id}`
+        )
+      );
+    }
+    return nodes;
+  });
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
@@ -2943,15 +3154,15 @@ function DspMixer({ status, oid, send, cls, icons }) {
       onPointerMove,
       onPointerUp,
       onPointerCancel: onPointerUp,
-      className: "w-full h-full overflow-auto no-scrollbar relative touch-none select-none cursor-grab",
+      className: "w-full h-full overflow-auto no-scrollbar relative touch-none select-none cursor-grab flex",
       children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "div",
         {
-          className: "grid",
+          className: "grid m-auto",
           style: {
             // cols: [out group][out link][out channel][inputs…]   rows: [in group][in link][in channel][outputs…]
-            gridTemplateColumns: `${GROUP_W} ${COMMON_W} ${CHAN_W} repeat(${inputs.length}, ${CELL_W})`,
-            gridTemplateRows: `${GROUP_H} ${COMMON_H} ${CHAN_H} repeat(${outputs.length}, ${ROW_H})`,
+            gridTemplateColumns: `${geom.groupW} ${geom.commonW} ${geom.chanW} repeat(${inputs.length}, ${geom.cellW})`,
+            gridTemplateRows: `${geom.groupH} ${geom.commonH} ${geom.chanH} repeat(${outputs.length}, ${geom.rowH})`,
             minWidth: "min-content"
           },
           children: [
@@ -2959,7 +3170,7 @@ function DspMixer({ status, oid, send, cls, icons }) {
               "div",
               {
                 "aria-hidden": true,
-                className: "sticky bg-[#282C34]",
+                className: `sticky ${cls.mixerBackplate}`,
                 style: { top: 0, zIndex: 15, gridColumn: "1 / -1", gridRow: "1 / span 3" }
               }
             ),
@@ -2967,7 +3178,7 @@ function DspMixer({ status, oid, send, cls, icons }) {
               "div",
               {
                 "aria-hidden": true,
-                className: "sticky bg-[#282C34]",
+                className: `sticky ${cls.mixerBackplate}`,
                 style: { left: 0, zIndex: 15, gridColumn: "1 / span 3", gridRow: "1 / -1" }
               }
             ),
@@ -2976,166 +3187,11 @@ function DspMixer({ status, oid, send, cls, icons }) {
               {
                 className: cls.mixerCorner,
                 style: { top: 0, left: 0, zIndex: Z.corner, gridColumn: "1 / span 3", gridRow: "1 / span 3" },
-                children: "OUT \\ IN"
+                children: renderCorner ? renderCorner(geom) : "OUT \\ IN"
               }
             ),
-            inAxis.flatMap((it, ii) => {
-              const col = 4 + ii;
-              const nodes = [];
-              if (it.groupStart) {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerGroup,
-                      style: { top: 0, zIndex: Z.group, gridRow: 1, gridColumn: `${col} / span ${it.groupSpan}` },
-                      title: it.groupName,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 px-[0.2em]", children: it.groupName })
-                    },
-                    `igrp:${it.id}`
-                  )
-                );
-              } else if (it.groupName === void 0) {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerChrome,
-                      style: { top: 0, zIndex: Z.group, gridRow: 1, gridColumn: col }
-                    },
-                    `ifill:${it.id}`
-                  )
-                );
-              }
-              if (it.linkCommon !== void 0) {
-                if (it.linkStart) {
-                  nodes.push(
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      "div",
-                      {
-                        className: `${cls.mixerChrome} px-[0.2em] font-semibold`,
-                        style: { top: topLink, zIndex: Z.link, gridRow: 2, gridColumn: `${col} / span ${it.linkSpan}` },
-                        title: it.linkCommon,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.linkCommon })
-                      },
-                      `ilnk:${it.id}`
-                    )
-                  );
-                }
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: `${cls.mixerChrome} px-[0.2em]`,
-                      style: { top: topChan, zIndex: Z.chan, gridRow: 3, gridColumn: col },
-                      title: it.channelLabel,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-1", children: it.channelLabel })
-                    },
-                    `ichn:${it.id}`
-                  )
-                );
-              } else {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerChrome,
-                      style: { top: topLink, zIndex: Z.link, gridRow: 2, gridColumn: col }
-                    },
-                    `ilf:${it.id}`
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: `${cls.mixerChrome} px-[0.2em]`,
-                      style: { top: topChan, zIndex: Z.chan, gridRow: 3, gridColumn: col },
-                      title: it.channelLabel,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.channelLabel })
-                    },
-                    `ichn:${it.id}`
-                  )
-                );
-              }
-              return nodes;
-            }),
-            outAxis.flatMap((it, oo) => {
-              const row = 4 + oo;
-              const nodes = [];
-              if (it.groupStart) {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerGroupV,
-                      style: {
-                        left: 0,
-                        zIndex: Z.group,
-                        gridColumn: 1,
-                        gridRow: `${row} / span ${it.groupSpan}`,
-                        writingMode: "vertical-rl",
-                        transform: "rotate(180deg)"
-                      },
-                      title: it.groupName,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2", children: it.groupName })
-                    },
-                    `ogrp:${it.id}`
-                  )
-                );
-              } else if (it.groupName === void 0) {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerChrome,
-                      style: { left: 0, zIndex: Z.group, gridColumn: 1, gridRow: row }
-                    },
-                    `ofill:${it.id}`
-                  )
-                );
-              }
-              if (it.linkCommon !== void 0) {
-                if (it.linkStart) {
-                  nodes.push(
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      "div",
-                      {
-                        className: `${cls.mixerChrome} justify-start px-[0.4em] font-semibold`,
-                        style: { left: leftLink, zIndex: Z.link, gridColumn: 2, gridRow: `${row} / span ${it.linkSpan}` },
-                        title: it.linkCommon,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 text-left", children: it.linkCommon })
-                      },
-                      `olnk:${it.id}`
-                    )
-                  );
-                }
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: cls.mixerChrome,
-                      style: { left: leftChan, zIndex: Z.chan, gridColumn: 3, gridRow: row },
-                      title: it.channelLabel,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-1", children: it.channelLabel })
-                    },
-                    `ochn:${it.id}`
-                  )
-                );
-              } else {
-                nodes.push(
-                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    "div",
-                    {
-                      className: `${cls.mixerChrome} justify-start px-[0.4em]`,
-                      style: { left: leftLink, zIndex: Z.chan, gridColumn: "2 / span 2", gridRow: row },
-                      title: it.channelLabel,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-[1.1em] line-clamp-2 text-left", children: it.channelLabel })
-                    },
-                    `ochn:${it.id}`
-                  )
-                );
-              }
-              return nodes;
-            }),
+            renderInputHeader ? renderInputHeader(inAxis, geom) : defaultInputHeader(),
+            renderOutputHeader ? renderOutputHeader(outAxis, geom) : defaultOutputHeader(),
             outAxis.map(
               (orow, oo) => inAxis.map((icol, ii) => {
                 const on = isOn(orow.id, icol.id);
@@ -3162,12 +3218,34 @@ function DspMixer({ status, oid, send, cls, icons }) {
 
 // src/components/dsp/CrisViewDspMixer.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
-function CrisViewDspMixer({ oid, classes, icons, className }) {
+function CrisViewDspMixer({
+  oid,
+  classes,
+  icons,
+  className,
+  geometry,
+  renderInputHeader,
+  renderOutputHeader,
+  renderCorner
+}) {
   const status = (0, import_cris_webui_ch5_core13.useCustomObject)(oid, { subscribe: true });
   const send = (0, import_cris_webui_ch5_core13.useCustomObjectSend)();
   const cls = resolveDspClasses(classes);
   const ic = resolveDspIcons(icons);
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-full h-full ${className ?? ""}`, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(DspMixer, { status, oid, send, cls, icons: ic }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: `w-full h-full ${className ?? ""}`, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    DspMixer,
+    {
+      status,
+      oid,
+      send,
+      cls,
+      icons: ic,
+      geometry,
+      renderInputHeader,
+      renderOutputHeader,
+      renderCorner
+    }
+  ) });
 }
 
 // src/components/dsp/DspPresets.tsx
@@ -3237,6 +3315,7 @@ function DspPresets({
 
 // src/components/dsp/CrisViewDspFull.tsx
 var import_jsx_runtime19 = require("react/jsx-runtime");
+var lastTabByOid = /* @__PURE__ */ new Map();
 function CrisViewDspFull({
   oid,
   presets,
@@ -3249,8 +3328,13 @@ function CrisViewDspFull({
   className,
   initialTab = "in"
 }) {
-  const safeInitial = initialTab === "mix" && skipCrosspoints ? "in" : initialTab;
-  const [tab, setTab] = (0, import_react9.useState)(safeInitial);
+  const remembered = lastTabByOid.get(oid) ?? initialTab;
+  const safeInitial = remembered === "mix" && skipCrosspoints ? "in" : remembered;
+  const [tab, setTabState] = (0, import_react9.useState)(safeInitial);
+  const setTab = (t) => {
+    lastTabByOid.set(oid, t);
+    setTabState(t);
+  };
   const status = (0, import_cris_webui_ch5_core14.useCustomObject)(oid, { subscribe: true });
   const send = (0, import_cris_webui_ch5_core14.useCustomObjectSend)();
   const cls = resolveDspClasses(classes);