@imperosoft/cris-webui-components 1.3.0 → 1.4.0

package/dist/index.js

@@ -2702,7 +2702,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 +2762,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 +2857,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 +2906,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 +2966,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 +3135,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 +3151,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 +3159,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 +3168,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 +3199,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 +3296,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 +3309,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);