@imperosoft/cris-webui-components 1.2.1 → 1.3.0

package/dist/index.js

@@ -31,8 +31,15 @@ __export(index_exports, {
   CrisText: () => CrisText,
   CrisTextInput: () => CrisTextInput,
   CrisViewComm: () => CrisViewComm,
+  CrisViewDspChannels: () => CrisViewDspChannels,
   CrisViewDspFull: () => CrisViewDspFull,
+  CrisViewDspInputs: () => CrisViewDspInputs,
+  CrisViewDspMixer: () => CrisViewDspMixer,
+  CrisViewDspOutputs: () => CrisViewDspOutputs,
+  CrisViewDspPresets: () => CrisViewDspPresets,
+  buildIoSections: () => buildIoSections,
   buildMixerAxis: () => buildMixerAxis,
+  buildMixerAxisGrouped: () => buildMixerAxisGrouped,
   clampLevel: () => clampLevel,
   collapseStrips: () => collapseStrips,
   commIndicators: () => commIndicators,
@@ -40,6 +47,7 @@ __export(index_exports, {
   getIconConfig: () => getIconConfig,
   getIconFilter: () => getIconFilter,
   getIconUrl: () => getIconUrl,
+  groupsFor: () => groupsFor,
   levelToPercent: () => levelToPercent,
   linksFor: () => linksFor,
   normalizeLinked: () => normalizeLinked
@@ -2388,6 +2396,9 @@ function CrisViewComm({ comm, classes, icons, className }) {
 
 // src/components/dsp/CrisViewDspFull.tsx
 var import_react9 = require("react");
+var import_cris_webui_ch5_core14 = require("@imperosoft/cris-webui-ch5-core");
+
+// src/components/dsp/CrisViewDspInputs.tsx
 var import_cris_webui_ch5_core11 = require("@imperosoft/cris-webui-ch5-core");
 
 // src/components/dsp/DspIoPage.tsx
@@ -2439,6 +2450,127 @@ function collapseStrips(channels, links) {
 function linksFor(ln, io) {
   return io === "in" ? ln?.ip : ln?.op;
 }
+function groupsFor(dg, io) {
+  return io === "in" ? dg?.ip : dg?.op;
+}
+function buildLinkIndex(links) {
+  const idx = /* @__PURE__ */ new Map();
+  for (const raw of links ?? []) {
+    const { label, channels } = normalizeLinked(raw);
+    if (channels.length === 0) continue;
+    const info = { label, channels };
+    for (const id of channels) idx.set(id, info);
+  }
+  return idx;
+}
+function collapseWithin(ids, byId, linkIdx, idSet, usedLink, consumed) {
+  const strips = [];
+  for (const id of ids) {
+    if (consumed.has(id)) continue;
+    const link = linkIdx.get(id);
+    const contained = !!link && link.channels.every((m) => idSet.has(m));
+    if (link && contained && !usedLink.has(link)) {
+      usedLink.add(link);
+      link.channels.forEach((m) => consumed.add(m));
+      const primary = link.channels.find((m) => byId.has(m));
+      const ref = primary !== void 0 ? byId.get(primary) : void 0;
+      strips.push({
+        kind: "group",
+        key: `g:${link.channels.join("-")}`,
+        label: link.label || ref?.lb || `Grupo ${link.channels[0]}`,
+        channels: link.channels,
+        lv: clampLevel(ref?.lv),
+        mt: ref?.mt ?? false
+      });
+    } else {
+      consumed.add(id);
+      const c = byId.get(id);
+      if (!c) continue;
+      strips.push({
+        kind: "single",
+        key: `c:${c.id}`,
+        label: c.lb ?? `Canal ${c.id}`,
+        channels: [c.id],
+        lv: clampLevel(c.lv),
+        mt: c.mt
+      });
+    }
+  }
+  return strips;
+}
+function buildIoSections(channels, links, groups) {
+  if (!groups || groups.length === 0) {
+    return [{ strips: collapseStrips(channels, links) }];
+  }
+  const byId = new Map(channels.map((c) => [c.id, c]));
+  const linkIdx = buildLinkIndex(links);
+  const usedLink = /* @__PURE__ */ new Set();
+  const consumed = /* @__PURE__ */ new Set();
+  const assigned = /* @__PURE__ */ new Set();
+  const sections = [];
+  for (const g of groups) {
+    g.ch.forEach((id) => assigned.add(id));
+    const present = g.ch.filter((id) => byId.has(id));
+    if (present.length === 0) continue;
+    const strips = collapseWithin(present, byId, linkIdx, new Set(g.ch), usedLink, consumed);
+    if (strips.length) sections.push({ groupName: g.id, strips });
+  }
+  const restIds = channels.filter((c) => !assigned.has(c.id)).map((c) => c.id);
+  if (restIds.length) {
+    const strips = collapseWithin(restIds, byId, linkIdx, new Set(restIds), usedLink, consumed);
+    if (strips.length) sections.push({ strips });
+  }
+  return sections;
+}
+function buildMixerAxisGrouped(channels, links, groups) {
+  const byId = new Map(channels.map((c) => [c.id, c]));
+  const ordered = [];
+  const groupOf = /* @__PURE__ */ new Map();
+  const assigned = /* @__PURE__ */ new Set();
+  for (const g of groups ?? []) {
+    for (const id of g.ch) {
+      assigned.add(id);
+      const c = byId.get(id);
+      if (c && !groupOf.has(id)) {
+        ordered.push(c);
+        groupOf.set(id, g.id);
+      }
+    }
+  }
+  for (const c of channels) if (!assigned.has(c.id)) ordered.push(c);
+  const items = ordered.map((c) => ({
+    id: c.id,
+    channelLabel: c.lb ?? `${c.id}`,
+    groupName: groupOf.get(c.id)
+  }));
+  const indexById = new Map(ordered.map((c, idx) => [c.id, idx]));
+  let i = 0;
+  while (i < items.length) {
+    const g = items[i].groupName;
+    if (g === void 0) {
+      i++;
+      continue;
+    }
+    let j = i;
+    while (j < items.length && items[j].groupName === g) j++;
+    items[i].groupStart = true;
+    items[i].groupSpan = j - i;
+    i = j;
+  }
+  for (const raw of links ?? []) {
+    const { label, channels: members } = normalizeLinked(raw);
+    if (members.length < 2) continue;
+    const idxs = members.map((n) => indexById.get(n));
+    if (idxs.some((x) => x === void 0)) continue;
+    const indices = idxs.slice().sort((a, b) => a - b);
+    const consecutive = indices.every((x, k) => k === 0 || x === indices[k - 1] + 1);
+    if (!consecutive) continue;
+    items[indices[0]].linkStart = true;
+    items[indices[0]].linkSpan = indices.length;
+    for (const idx of indices) items[idx].linkCommon = label;
+  }
+  return items;
+}
 function buildMixerAxis(channels, links) {
   const items = channels.map((c) => ({
     id: c.id,
@@ -2538,52 +2670,204 @@ function useHorizontalWheel(ref) {
 
 // src/components/dsp/DspIoPage.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-function DspIoPage({ status, io, oid, send, skip, cls, icons, emptyLabel }) {
+function DspIoPage({
+  status,
+  io,
+  oid,
+  send,
+  show,
+  skip,
+  cls,
+  icons,
+  emptyLabel,
+  bare = false,
+  suppressEmpty = false
+}) {
   const scrollRef = (0, import_react6.useRef)(null);
   useHorizontalWheel(scrollRef);
+  const showSet = show ? new Set(show) : null;
   const skipSet = new Set(skip ?? []);
+  const keep = (id) => (!showSet || showSet.has(id)) && !skipSet.has(id);
   const raw = (io === "in" ? status?.ip : status?.op) ?? [];
-  const channels = skipSet.size ? raw.filter((c) => !skipSet.has(c.id)) : raw;
+  const channels = raw.filter((c) => keep(c.id));
   const allLinks = linksFor(status?.ln, io);
-  const links = skipSet.size ? allLinks?.filter((g) => (g.ch ?? []).some((id) => !skipSet.has(id))) : allLinks;
-  const strips = collapseStrips(channels, links);
-  if (strips.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls.message, children: emptyLabel });
+  const links = allLinks?.filter((g) => (g.ch ?? []).some((id) => keep(id)));
+  const groups = groupsFor(status?.dg, io)?.filter((g) => (g.ch ?? []).some((id) => keep(id)));
+  const sections = buildIoSections(channels, links, groups);
+  const hasHeaders = sections.some((s) => s.groupName);
+  const totalStrips = sections.reduce((n, s) => n + s.strips.length, 0);
+  if (totalStrips === 0) {
+    return suppressEmpty ? null : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cls.message, children: emptyLabel });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: scrollRef, className: "w-full h-full overflow-x-auto no-scrollbar", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  const row = /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "div",
     {
       className: "flex h-full items-stretch gap-[0.3em] px-[0.5em] py-[0.5em]",
       style: { minWidth: "min-content" },
-      children: strips.map((strip) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-        DspChannelStrip,
-        {
-          strip,
-          io,
-          oid,
-          send,
-          cls,
-          icons
-        },
-        strip.key
-      ))
+      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
+        // here (between groups), never down the full channel height.
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
+          {
+            className: "flex items-center justify-center shrink-0 h-[2.2em]",
+            style: { borderLeft: i > 0 ? "1px solid rgba(0,0,0,0.4)" : void 0 },
+            children: sec.groupName && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: cls.groupHeader, title: sec.groupName, children: sec.groupName })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-1 min-h-0 items-stretch gap-[0.3em]", children: sec.strips.map((strip) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          DspChannelStrip,
+          {
+            strip,
+            io,
+            oid,
+            send,
+            cls,
+            icons
+          },
+          strip.key
+        )) })
+      ] }, sec.groupName ?? `rest:${i}`))
+    }
+  );
+  if (bare) return row;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: scrollRef, className: "w-full h-full overflow-x-auto no-scrollbar", children: row });
+}
+
+// src/components/dsp/dspClasses.ts
+var DSP_CLASS_DEFAULTS = {
+  root: "w-full h-full flex flex-col",
+  header: "relative w-full flex items-end justify-center gap-[0.3em] px-[1em] pt-[0.5em]",
+  content: "w-full flex-1 min-h-0",
+  tab: "w-[10.5em] h-[3.25em] rounded-b-none rounded-lg flex items-center justify-center transition-colors bg-[#4f5152] text-white text-[1.4em] font-bold",
+  tabActive: "bg-[#007ca0]",
+  message: "w-full h-full flex items-center justify-center text-gray-400 text-[2em]",
+  presetWrap: "absolute left-[1em] bottom-[0.3em] h-[4.5em] flex flex-col items-center",
+  presetLabel: "text-[#4f5152] text-[1.4em] leading-none",
+  preset: "w-[8em] h-full rounded-lg flex items-center justify-center transition-colors bg-[#4f5152] text-white",
+  presetActive: "bg-[#007ca0]",
+  presetPressed: "bg-[#006080]",
+  savedFlash: "absolute inset-0 flex items-center justify-center rounded bg-[#22c55e] text-white text-[1.2em] font-bold pointer-events-none",
+  groupHeader: "text-[#4f5152] text-center font-semibold leading-tight text-[1.1em] line-clamp-2 px-[0.3em]",
+  // NOTE: no font-size on the mixer chrome/group cells — their `em` sticky
+  // offsets must match the grid's `em` track widths. Text size lives on the
+  // inner label spans (text-[1.1em]) instead.
+  mixerGroup: "sticky flex items-center justify-center text-center bg-[#282C34] text-white font-semibold leading-tight border border-black/30",
+  mixerGroupV: "sticky flex items-center justify-center bg-[#282C34] text-white font-semibold leading-tight border border-black/30",
+  strip: "flex flex-col items-center gap-[0.4em] h-full w-[9em] flex-none px-[0.3em]",
+  stripLabel: "text-[#4f5152] text-center leading-tight text-[1.1em] line-clamp-3",
+  levelReadout: "text-[1.1em] text-[#4f5152] leading-none opacity-70 mt-[0.5em]",
+  faderBar: "bg-[#c0c0c0] rounded",
+  faderFill: "bg-[#007ca0] rounded",
+  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",
+  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",
+  cellOn: "bg-[#22c55e]",
+  cellOff: "bg-[#4f5152]"
+};
+var DSP_ICON_DEFAULTS = {
+  crosspointOn: "audio-volume-ok",
+  muteOff: "audio-volume-high",
+  muteOn: "audio-volume-mute",
+  muteOffFilter: "invert(65%) sepia(70%) saturate(500%) hue-rotate(80deg) brightness(110%) contrast(95%)",
+  muteOnFilter: "brightness(0) invert(1)"
+};
+function mergeDefined(defaults4, overrides) {
+  if (!overrides) return { ...defaults4 };
+  const out = { ...defaults4 };
+  Object.keys(overrides).forEach((k) => {
+    const v = overrides[k];
+    if (v !== void 0) out[k] = v;
+  });
+  return out;
+}
+function resolveDspClasses(classes) {
+  return mergeDefined(DSP_CLASS_DEFAULTS, classes);
+}
+function resolveDspIcons(icons) {
+  return mergeDefined(DSP_ICON_DEFAULTS, icons);
+}
+
+// src/components/dsp/CrisViewDspInputs.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CrisViewDspInputs({
+  oid,
+  skip,
+  emptyLabel = "Sin entradas",
+  classes,
+  icons,
+  className
+}) {
+  const status = (0, import_cris_webui_ch5_core11.useCustomObject)(oid, { subscribe: true });
+  const send = (0, import_cris_webui_ch5_core11.useCustomObjectSend)();
+  const cls = resolveDspClasses(classes);
+  const ic = resolveDspIcons(icons);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `w-full h-full ${className ?? ""}`, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    DspIoPage,
+    {
+      status,
+      io: "in",
+      oid,
+      send,
+      skip,
+      cls,
+      icons: ic,
+      emptyLabel
     }
   ) });
 }
 
+// src/components/dsp/CrisViewDspOutputs.tsx
+var import_cris_webui_ch5_core12 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CrisViewDspOutputs({
+  oid,
+  skip,
+  emptyLabel = "Sin salidas",
+  classes,
+  icons,
+  className
+}) {
+  const status = (0, import_cris_webui_ch5_core12.useCustomObject)(oid, { subscribe: true });
+  const send = (0, import_cris_webui_ch5_core12.useCustomObjectSend)();
+  const cls = resolveDspClasses(classes);
+  const ic = resolveDspIcons(icons);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: `w-full h-full ${className ?? ""}`, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    DspIoPage,
+    {
+      status,
+      io: "out",
+      oid,
+      send,
+      skip,
+      cls,
+      icons: ic,
+      emptyLabel
+    }
+  ) });
+}
+
+// src/components/dsp/CrisViewDspMixer.tsx
+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_runtime14 = require("react/jsx-runtime");
+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 DRAG_FACTOR = 0.6;
 function CrosspointOnIcon({ icon }) {
-  if (typeof icon !== "string") return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_jsx_runtime14.Fragment, { children: icon });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  if (typeof icon !== "string") return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_jsx_runtime16.Fragment, { children: icon });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "img",
     {
       src: getIconUrl(icon),
@@ -2642,11 +2926,16 @@ function DspMixer({ status, oid, send, cls, icons }) {
     pendingRef.current = null;
   };
   if (inputs.length === 0 || outputs.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cls.message, children: "Sin crosspoints" });
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls.message, children: "Sin crosspoints" });
   }
-  const inAxis = buildMixerAxis(inputs, linksFor(status?.ln, "in"));
-  const outAxis = buildMixerAxis(outputs, linksFor(status?.ln, "out"));
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  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 };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     "div",
     {
       ref: scrollRef,
@@ -2655,125 +2944,212 @@ function DspMixer({ status, oid, send, cls, icons }) {
       onPointerUp,
       onPointerCancel: onPointerUp,
       className: "w-full h-full overflow-auto no-scrollbar relative touch-none select-none cursor-grab",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
         "div",
         {
           className: "grid",
           style: {
-            // cols: [output common][output channel][inputs…]   rows: [in common][in channel][outputs…]
-            gridTemplateColumns: `${COMMON_W} ${CHAN_W} repeat(${inputs.length}, ${CELL_W})`,
-            gridTemplateRows: `${COMMON_H} ${CHAN_H} repeat(${outputs.length}, ${ROW_H})`,
+            // 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})`,
             minWidth: "min-content"
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "sticky bg-[#282C34]",
+                style: { top: 0, zIndex: 15, gridColumn: "1 / -1", gridRow: "1 / span 3" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "div",
+              {
+                "aria-hidden": true,
+                className: "sticky bg-[#282C34]",
+                style: { left: 0, zIndex: 15, gridColumn: "1 / span 3", gridRow: "1 / -1" }
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
               "div",
               {
                 className: cls.mixerCorner,
-                style: { top: 0, left: 0, gridColumn: "1 / span 2", gridRow: "1 / span 2" },
+                style: { top: 0, left: 0, zIndex: Z.corner, gridColumn: "1 / span 3", gridRow: "1 / span 3" },
                 children: "OUT \\ IN"
               }
             ),
             inAxis.flatMap((it, ii) => {
-              const col = 3 + ii;
-              if (it.groupCommon !== void 0) {
-                const nodes = [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              const col = 4 + ii;
+              const nodes = [];
+              if (it.groupStart) {
+                nodes.push(
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                     "div",
                     {
-                      className: `${cls.mixerChrome} z-20 px-[0.2em]`,
-                      style: { top: 0, gridRow: "1 / span 2", gridColumn: col, alignItems: "flex-end", paddingBottom: "0.3em" },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-1", children: it.channelLabel })
+                      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 })
                     },
-                    `ich:${it.id}`
+                    `igrp:${it.id}`
                   )
-                ];
-                if (it.groupStart) {
-                  nodes.unshift(
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                );
+              } 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} z-25 px-[0.2em] font-semibold`,
-                        style: { top: 0, gridRow: 1, gridColumn: `${col} / span ${it.groupSpan}` },
-                        title: it.groupCommon,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-2", children: it.groupCommon })
+                        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 })
                       },
-                      `icc:${it.id}`
+                      `ilnk:${it.id}`
                     )
                   );
                 }
-                return nodes;
+                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 [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "div",
-                  {
-                    className: `${cls.mixerChrome} z-20 px-[0.2em]`,
-                    style: { top: 0, gridRow: "1 / span 2", gridColumn: col, alignItems: "center" },
-                    title: it.channelLabel,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-3", children: it.channelLabel })
-                  },
-                  `is:${it.id}`
-                )
-              ];
+              return nodes;
             }),
             outAxis.flatMap((it, oo) => {
-              const row = 3 + oo;
-              if (it.groupCommon !== void 0) {
-                const nodes = [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              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} z-20`,
-                      style: { left: 0, gridColumn: "1 / span 2", gridRow: row, justifyContent: "flex-end", paddingRight: "0.6em" },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-1", children: it.channelLabel })
+                      className: cls.mixerChrome,
+                      style: { left: 0, zIndex: Z.group, gridColumn: 1, gridRow: row }
                     },
-                    `och:${it.id}`
+                    `ofill:${it.id}`
                   )
-                ];
-                if (it.groupStart) {
-                  nodes.unshift(
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                );
+              }
+              if (it.linkCommon !== void 0) {
+                if (it.linkStart) {
+                  nodes.push(
+                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                       "div",
                       {
-                        className: `${cls.mixerChrome} z-25 justify-start px-[0.4em] font-semibold`,
-                        style: { left: 0, gridColumn: 1, gridRow: `${row} / span ${it.groupSpan}` },
-                        title: it.groupCommon,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-2 text-left", children: it.groupCommon })
+                        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 })
                       },
-                      `occ:${it.id}`
+                      `olnk:${it.id}`
                     )
                   );
                 }
-                return nodes;
+                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 [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
-                  "div",
-                  {
-                    className: `${cls.mixerChrome} z-20 justify-start px-[0.4em]`,
-                    style: { left: 0, gridColumn: "1 / span 2", gridRow: row },
-                    title: it.channelLabel,
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "line-clamp-2 text-left", children: it.channelLabel })
-                  },
-                  `os:${it.id}`
-                )
-              ];
+              return nodes;
             }),
-            outputs.map(
-              (o, oo) => inputs.map((i, ii) => {
-                const on = isOn(o.id, i.id);
-                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            outAxis.map(
+              (orow, oo) => inAxis.map((icol, ii) => {
+                const on = isOn(orow.id, icol.id);
+                return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
                   "div",
                   {
                     "data-cell": true,
-                    "data-in": i.id,
-                    "data-out": o.id,
+                    "data-in": icol.id,
+                    "data-out": orow.id,
                     className: `${cls.cell} ${on ? cls.cellOn : cls.cellOff}`,
-                    style: { gridColumn: 3 + ii, gridRow: 3 + oo },
-                    children: on && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CrosspointOnIcon, { icon: icons.crosspointOn })
+                    style: { gridColumn: 4 + ii, gridRow: 4 + oo },
+                    children: on && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CrosspointOnIcon, { icon: icons.crosspointOn })
                   },
-                  `x:${i.id}:${o.id}`
+                  `x:${icol.id}:${orow.id}`
                 );
               })
             )
@@ -2784,13 +3160,23 @@ 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 }) {
+  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 }) });
+}
+
 // src/components/dsp/DspPresets.tsx
 var import_react8 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var HOLD_MS = 2e3;
 var SAVED_MS = 1e3;
 function PresetButton({ num, name, active, onCall, onSave, cls }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     CrisButton,
     {
       onTap: onCall,
@@ -2800,9 +3186,9 @@ function PresetButton({ num, name, active, onCall, onSave, cls }) {
       className: cls.preset,
       classActive: cls.presetActive,
       classPressed: cls.presetPressed,
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "flex items-center justify-center gap-[0.5em]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[1.6em] font-bold leading-none", children: num }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[1.2em] leading-none", children: name })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "flex items-center justify-center gap-[0.5em]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[1.6em] font-bold leading-none", children: num }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "text-[1.2em] leading-none", children: name })
       ] })
     }
   );
@@ -2829,10 +3215,10 @@ function DspPresets({
     if (!sustainedFeedback) return false;
     return p.kind === "local" ? activeLocal === p.id : activeDevice === p.id;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: cls.presetWrap, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: cls.presetLabel, children: "Preset" }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative flex-1 flex items-stretch gap-[0.3em] mt-[0.25em]", children: [
-      presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cls.presetWrap, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: cls.presetLabel, children: "Preset" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative flex-1 flex items-stretch gap-[0.3em] mt-[0.25em]", children: [
+      presets.map((p) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         PresetButton,
         {
           num: p.id,
@@ -2844,64 +3230,13 @@ function DspPresets({
         },
         p.id
       )),
-      saved && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: cls.savedFlash, children: "Saved" })
+      saved && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: cls.savedFlash, children: "Saved" })
     ] })
   ] });
 }
 
-// src/components/dsp/dspClasses.ts
-var DSP_CLASS_DEFAULTS = {
-  root: "w-full h-full flex flex-col",
-  header: "relative w-full flex items-end justify-center gap-[0.3em] px-[1em] pt-[0.5em]",
-  content: "w-full flex-1 min-h-0",
-  tab: "w-[10.5em] h-[3.25em] rounded-b-none rounded-lg flex items-center justify-center transition-colors bg-[#4f5152] text-white text-[1.4em] font-bold",
-  tabActive: "bg-[#007ca0]",
-  message: "w-full h-full flex items-center justify-center text-gray-400 text-[2em]",
-  presetWrap: "absolute left-[1em] bottom-[0.3em] h-[4.5em] flex flex-col items-center",
-  presetLabel: "text-[#4f5152] text-[1.4em] leading-none",
-  preset: "w-[8em] h-full rounded-lg flex items-center justify-center transition-colors bg-[#4f5152] text-white",
-  presetActive: "bg-[#007ca0]",
-  presetPressed: "bg-[#006080]",
-  savedFlash: "absolute inset-0 flex items-center justify-center rounded bg-[#22c55e] text-white text-[1.2em] font-bold pointer-events-none",
-  strip: "flex flex-col items-center gap-[0.4em] h-full w-[9em] flex-none px-[0.3em]",
-  stripLabel: "text-[#4f5152] text-center leading-tight text-[1.1em] line-clamp-3",
-  levelReadout: "text-[1.1em] text-[#4f5152] leading-none opacity-70 mt-[0.5em]",
-  faderBar: "bg-[#c0c0c0] rounded",
-  faderFill: "bg-[#007ca0] rounded",
-  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",
-  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 text-[1.1em] leading-tight border border-black/30",
-  cell: "z-10 flex items-center justify-center border border-black/30",
-  cellOn: "bg-[#22c55e]",
-  cellOff: "bg-[#4f5152]"
-};
-var DSP_ICON_DEFAULTS = {
-  crosspointOn: "audio-volume-ok",
-  muteOff: "audio-volume-high",
-  muteOn: "audio-volume-mute",
-  muteOffFilter: "invert(65%) sepia(70%) saturate(500%) hue-rotate(80deg) brightness(110%) contrast(95%)",
-  muteOnFilter: "brightness(0) invert(1)"
-};
-function mergeDefined(defaults4, overrides) {
-  if (!overrides) return { ...defaults4 };
-  const out = { ...defaults4 };
-  Object.keys(overrides).forEach((k) => {
-    const v = overrides[k];
-    if (v !== void 0) out[k] = v;
-  });
-  return out;
-}
-function resolveDspClasses(classes) {
-  return mergeDefined(DSP_CLASS_DEFAULTS, classes);
-}
-function resolveDspIcons(icons) {
-  return mergeDefined(DSP_ICON_DEFAULTS, icons);
-}
-
 // src/components/dsp/CrisViewDspFull.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CrisViewDspFull({
   oid,
   presets,
@@ -2916,10 +3251,9 @@ function CrisViewDspFull({
 }) {
   const safeInitial = initialTab === "mix" && skipCrosspoints ? "in" : initialTab;
   const [tab, setTab] = (0, import_react9.useState)(safeInitial);
-  const status = (0, import_cris_webui_ch5_core11.useCustomObject)(oid, { subscribe: true });
-  const send = (0, import_cris_webui_ch5_core11.useCustomObjectSend)();
+  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);
-  const ic = resolveDspIcons(icons);
   const tabs = [
     { id: "in", label: "Inputs" },
     ...skipCrosspoints ? [] : [{ id: "mix", label: "Mixer" }],
@@ -2928,9 +3262,9 @@ function CrisViewDspFull({
   const hasPresets = !!presets && presets.length > 0;
   const activeDevice = status?.pr?.dv ?? status?.ps?.dv;
   const activeLocal = status?.pr?.lc ?? status?.ps?.lc;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: `${cls.root} ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: cls.header, children: [
-      hasPresets && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: `${cls.root} ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cls.header, children: [
+      hasPresets && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         DspPresets,
         {
           oid,
@@ -2942,7 +3276,7 @@ function CrisViewDspFull({
           cls
         }
       ),
-      tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         CrisButton,
         {
           text: t.label,
@@ -2953,39 +3287,82 @@ function CrisViewDspFull({
         },
         t.id
       )),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(CrisViewComm, { comm: status?.cm, className: "absolute right-[1em] bottom-[0.3em] text-[1.25em]" })
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CrisViewComm, { comm: status?.cm, className: "absolute right-[1em] bottom-[0.3em] text-[1.25em]" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls.content, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-      tab === "in" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        DspIoPage,
-        {
-          status,
-          io: "in",
-          oid,
-          send,
-          skip: skipShowInput,
-          cls,
-          icons: ic,
-          emptyLabel: "Sin entradas"
-        }
-      ),
-      tab === "mix" && !skipCrosspoints && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DspMixer, { status, oid, send, cls, icons: ic }),
-      tab === "out" && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-        DspIoPage,
-        {
-          status,
-          io: "out",
-          oid,
-          send,
-          skip: skipShowOutput,
-          cls,
-          icons: ic,
-          emptyLabel: "Sin salidas"
-        }
-      )
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cls.content, children: status === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+      tab === "in" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CrisViewDspInputs, { oid, skip: skipShowInput, classes, icons }),
+      tab === "mix" && !skipCrosspoints && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CrisViewDspMixer, { oid, classes, icons }),
+      tab === "out" && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CrisViewDspOutputs, { oid, skip: skipShowOutput, classes, icons })
     ] }) })
   ] });
 }
+
+// src/components/dsp/CrisViewDspPresets.tsx
+var import_cris_webui_ch5_core15 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function CrisViewDspPresets({
+  oid,
+  presets,
+  sustainedPresetFeedback = true,
+  classes,
+  className
+}) {
+  const status = (0, import_cris_webui_ch5_core15.useCustomObject)(oid, { subscribe: true });
+  const send = (0, import_cris_webui_ch5_core15.useCustomObjectSend)();
+  const cls = resolveDspClasses({ presetWrap: "flex flex-col items-center", ...classes });
+  const activeDevice = status?.pr?.dv ?? status?.ps?.dv;
+  const activeLocal = status?.pr?.lc ?? status?.ps?.lc;
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    DspPresets,
+    {
+      oid,
+      send,
+      presets,
+      activeDevice,
+      activeLocal,
+      sustainedFeedback: sustainedPresetFeedback,
+      cls
+    }
+  ) });
+}
+
+// src/components/dsp/CrisViewDspChannels.tsx
+var import_cris_webui_ch5_core16 = require("@imperosoft/cris-webui-ch5-core");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function CrisViewDspChannels({
+  oid,
+  io,
+  show,
+  scroll = false,
+  showEmpty = false,
+  emptyLabel = "",
+  classes,
+  icons,
+  className
+}) {
+  const status = (0, import_cris_webui_ch5_core16.useCustomObject)(oid, { subscribe: true });
+  const send = (0, import_cris_webui_ch5_core16.useCustomObjectSend)();
+  const cls = resolveDspClasses(classes);
+  const ic = resolveDspIcons(icons);
+  if (status === void 0) {
+    return showEmpty ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cls.message, children: "Conectando\u2026" }) : null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DspIoPage,
+    {
+      status,
+      io,
+      oid,
+      send,
+      show,
+      cls,
+      icons: ic,
+      emptyLabel,
+      bare: !scroll,
+      suppressEmpty: !showEmpty
+    }
+  ) });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CrisButton,
@@ -2999,8 +3376,15 @@ function CrisViewDspFull({
   CrisText,
   CrisTextInput,
   CrisViewComm,
+  CrisViewDspChannels,
   CrisViewDspFull,
+  CrisViewDspInputs,
+  CrisViewDspMixer,
+  CrisViewDspOutputs,
+  CrisViewDspPresets,
+  buildIoSections,
   buildMixerAxis,
+  buildMixerAxisGrouped,
   clampLevel,
   collapseStrips,
   commIndicators,
@@ -3008,6 +3392,7 @@ function CrisViewDspFull({
   getIconConfig,
   getIconFilter,
   getIconUrl,
+  groupsFor,
   levelToPercent,
   linksFor,
   normalizeLinked