@imperosoft/cris-webui-components 1.1.4 → 1.2.1

package/dist/index.mjs

@@ -55,6 +55,7 @@ function isTouchActive() {
 
 // src/components/CrisButton.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
+var MIN_PRESS_VISUAL_MS = 120;
 function CrisButton({
   join,
   joinFeedback,
@@ -87,6 +88,12 @@ function CrisButton({
   children,
   onPress,
   onRelease,
+  onTap,
+  onLongPress,
+  holdMs = 2e3,
+  onHoldRepeat,
+  repeatMs = 150,
+  onHoldProgress,
   debug = false
 }) {
   const debugRef = useRef(debug);
@@ -104,6 +111,12 @@ function CrisButton({
   const touchMovedRef = useRef(false);
   const touchPressTimerRef = useRef(null);
   const touchPressedRef = useRef(false);
+  const holdTimerRef = useRef(null);
+  const repeatIntervalRef = useRef(null);
+  const progressRafRef = useRef(null);
+  const pressStartRef = useRef(0);
+  const gestureFiredRef = useRef(false);
+  const pressVisualTimerRef = useRef(null);
   const feedbackJoin = joinFeedback ?? join;
   const feedback = useDigital(feedbackJoin ?? 0);
   const enabledJoin = useDigital(joinEnable ?? 0);
@@ -119,6 +132,12 @@ function CrisButton({
       setPressed(false);
       touchingRef.current = false;
       touchStartedHereRef.current = false;
+      if (pressVisualTimerRef.current) {
+        clearTimeout(pressVisualTimerRef.current);
+        pressVisualTimerRef.current = null;
+      }
+      clearGestureTimers();
+      onHoldProgress?.(0);
       if (join != null && smartId == null) {
         log("sending release via dSet(false)");
         dSet(join, false);
@@ -131,6 +150,22 @@ function CrisButton({
         clearTimeout(touchPressTimerRef.current);
         touchPressTimerRef.current = null;
       }
+      if (holdTimerRef.current) {
+        clearTimeout(holdTimerRef.current);
+        holdTimerRef.current = null;
+      }
+      if (repeatIntervalRef.current) {
+        clearInterval(repeatIntervalRef.current);
+        repeatIntervalRef.current = null;
+      }
+      if (progressRafRef.current != null) {
+        cancelAnimationFrame(progressRafRef.current);
+        progressRafRef.current = null;
+      }
+      if (pressVisualTimerRef.current) {
+        clearTimeout(pressVisualTimerRef.current);
+        pressVisualTimerRef.current = null;
+      }
       if (pressedRef.current && join != null && smartId == null) {
         log("UNMOUNT RELEASE - component unmounting while pressed");
         dSet(join, false);
@@ -146,6 +181,44 @@ function CrisButton({
   } else if (hasControlFeedback && textSelected != null) {
     currentText = textSelected;
   }
+  const clearGestureTimers = () => {
+    if (holdTimerRef.current) {
+      clearTimeout(holdTimerRef.current);
+      holdTimerRef.current = null;
+    }
+    if (repeatIntervalRef.current) {
+      clearInterval(repeatIntervalRef.current);
+      repeatIntervalRef.current = null;
+    }
+    if (progressRafRef.current != null) {
+      cancelAnimationFrame(progressRafRef.current);
+      progressRafRef.current = null;
+    }
+  };
+  const armGestures = () => {
+    gestureFiredRef.current = false;
+    pressStartRef.current = Date.now();
+    if (onLongPress) {
+      holdTimerRef.current = setTimeout(() => {
+        holdTimerRef.current = null;
+        gestureFiredRef.current = true;
+        onLongPress();
+      }, holdMs);
+    }
+    if (onHoldProgress) {
+      const tick = () => {
+        const p = Math.min(1, (Date.now() - pressStartRef.current) / holdMs);
+        onHoldProgress(p);
+        progressRafRef.current = p < 1 ? requestAnimationFrame(tick) : null;
+      };
+      progressRafRef.current = requestAnimationFrame(tick);
+    }
+    if (onHoldRepeat) {
+      repeatIntervalRef.current = setInterval(() => {
+        onHoldRepeat();
+      }, repeatMs);
+    }
+  };
   const handlePress = () => {
     log("handlePress called", { suppressKeyClicks, pressedRef: pressedRef.current, isEnabled });
     if (suppressKeyClicks) {
@@ -158,18 +231,24 @@ function CrisButton({
     }
     pressedRef.current = true;
     setPressed(true);
+    pressStartRef.current = Date.now();
+    if (pressVisualTimerRef.current) {
+      clearTimeout(pressVisualTimerRef.current);
+      pressVisualTimerRef.current = null;
+    }
     if (!isEnabled) {
       log("SKIPPED dSet: not enabled");
       return;
     }
     onPress?.();
+    armGestures();
     if (join != null && smartId == null) {
       log("SENDING PRESS via dSet(true)");
       dSet(join, true);
     }
   };
-  const handleRelease = () => {
-    log("handleRelease called", { suppressKeyClicks, pressedRef: pressedRef.current, isEnabled });
+  const handleRelease = (clean = true) => {
+    log("handleRelease called", { clean, suppressKeyClicks, pressedRef: pressedRef.current, isEnabled });
     if (suppressKeyClicks) {
       log("BLOCKED: suppressKeyClicks");
       return;
@@ -179,7 +258,17 @@ function CrisButton({
       return;
     }
     pressedRef.current = false;
-    setPressed(false);
+    const heldMs = Date.now() - pressStartRef.current;
+    if (heldMs >= MIN_PRESS_VISUAL_MS) {
+      setPressed(false);
+    } else {
+      pressVisualTimerRef.current = setTimeout(() => {
+        pressVisualTimerRef.current = null;
+        setPressed(false);
+      }, MIN_PRESS_VISUAL_MS - heldMs);
+    }
+    clearGestureTimers();
+    onHoldProgress?.(0);
     if (!isEnabled) {
       log("SKIPPED dSet: not enabled");
       return;
@@ -189,6 +278,9 @@ function CrisButton({
       log("SENDING RELEASE via dSet(false)");
       dSet(join, false);
     }
+    if (clean && onTap && !gestureFiredRef.current) {
+      onTap();
+    }
   };
   const SCROLL_THRESHOLD = 8;
   const PRESS_DELAY = 80;
@@ -224,7 +316,7 @@ function CrisButton({
       cancelPressTimer();
       if (touchPressedRef.current) {
         touchPressedRef.current = false;
-        handleRelease();
+        handleRelease(false);
         log("touchMove: scroll detected after press, releasing");
       } else {
         log("touchMove: scroll detected, press cancelled");
@@ -245,11 +337,11 @@ function CrisButton({
     touchStartedHereRef.current = false;
     if (touchPressedRef.current) {
       touchPressedRef.current = false;
-      handleRelease();
+      handleRelease(true);
     } else {
       touchPressedRef.current = false;
       handlePress();
-      handleRelease();
+      handleRelease(true);
     }
   };
   const handleTouchCancel = () => {
@@ -260,7 +352,7 @@ function CrisButton({
     touchStartedHereRef.current = false;
     if (touchPressedRef.current) {
       touchPressedRef.current = false;
-      handleRelease();
+      handleRelease(false);
     }
     touchMovedRef.current = false;
   };
@@ -270,11 +362,11 @@ function CrisButton({
   };
   const handleMouseUp = () => {
     if (isTouchActive() || touchingRef.current) return;
-    handleRelease();
+    handleRelease(true);
   };
   const handleMouseLeave = () => {
     if (isTouchActive() || touchingRef.current) return;
-    handleRelease();
+    handleRelease(false);
   };
   if (!isVisible) return null;
   const classes = [
@@ -450,6 +542,10 @@ function CrisSlider({
   trackSizePercent = 20,
   thumbSizePercent = 4,
   delayMsAfterDragUpdateFeedback = 1e3,
+  value,
+  onChange,
+  onCommit,
+  changeThrottleMs = 100,
   className = "",
   style,
   barClassName = "",
@@ -469,15 +565,27 @@ function CrisSlider({
   const aSet = useJoinsStore2((state) => state.aSet);
   const [ratioCurrent, setRatioCurrent] = useState2(0);
   const [isDragging, setIsDragging] = useState2(false);
+  const draggingRef = useRef2(false);
   const isDraggingOrJustAfterRef = useRef2(false);
   const ratioBeforeDragRef = useRef2(0);
   const afterDragTimeoutRef = useRef2(null);
   const touchingRef = useRef2(false);
+  const changeTimerRef = useRef2(null);
+  const lastChangeAtRef = useRef2(0);
+  const latestValueRef = useRef2(0);
+  const touchStartXRef = useRef2(0);
+  const touchStartYRef = useRef2(0);
+  const touchDecidedRef = useRef2(false);
+  const valueRef = useRef2(value);
+  valueRef.current = value;
+  const analogValueRef = useRef2(analogValue);
+  analogValueRef.current = analogValue;
   const isEnabled = joinEnable == null ? true : enabled;
   const isVisible = joinVisible == null ? true : visible;
   useEffect2(() => {
     if (!isVisible && isDraggingOrJustAfterRef.current) {
       setIsDragging(false);
+      draggingRef.current = false;
       isDraggingOrJustAfterRef.current = false;
       touchingRef.current = false;
       if (effectiveDigitalJoin != null) {
@@ -487,16 +595,24 @@ function CrisSlider({
   }, [isVisible, effectiveDigitalJoin, dSet]);
   useEffect2(() => {
     return () => {
+      if (changeTimerRef.current != null) {
+        clearTimeout(changeTimerRef.current);
+        changeTimerRef.current = null;
+      }
+      if (afterDragTimeoutRef.current !== null) {
+        window.clearTimeout(afterDragTimeoutRef.current);
+        afterDragTimeoutRef.current = null;
+      }
       if (isDraggingOrJustAfterRef.current && effectiveDigitalJoin != null) {
         dSet(effectiveDigitalJoin, false);
       }
     };
   }, [effectiveDigitalJoin, dSet]);
   const analogToRatio = useCallback2(
-    (value) => {
+    (value2) => {
       const range = maxValue - minValue;
       if (range <= 0) return 0;
-      return Math.max(0, Math.min(1, (value - minValue) / range));
+      return Math.max(0, Math.min(1, (value2 - minValue) / range));
     },
     [minValue, maxValue]
   );
@@ -508,16 +624,17 @@ function CrisSlider({
     [minValue, maxValue]
   );
   const updateFromFeedback = useCallback2(() => {
-    if (!isDraggingOrJustAfterRef.current && effectiveAnalogJoin != null) {
-      setRatioCurrent(analogToRatio(analogValue));
-    }
-  }, [analogValue, analogToRatio, effectiveAnalogJoin]);
+    if (isDraggingOrJustAfterRef.current) return;
+    const v = valueRef.current !== void 0 ? valueRef.current : effectiveAnalogJoin != null ? analogValueRef.current : void 0;
+    if (v !== void 0) setRatioCurrent(analogToRatio(v));
+  }, [analogToRatio, effectiveAnalogJoin]);
   useEffect2(() => {
     updateFromFeedback();
-  }, [updateFromFeedback]);
+  }, [value, analogValue, updateFromFeedback]);
   const handleDragStart = useCallback2(() => {
     if (!isEnabled) return;
     setIsDragging(true);
+    draggingRef.current = true;
     if (effectiveDigitalJoin != null) {
       dSet(effectiveDigitalJoin, true);
     }
@@ -531,11 +648,17 @@ function CrisSlider({
     }
   }, [isEnabled, effectiveDigitalJoin, dSet, ratioCurrent]);
   const handleDragEnd = useCallback2(() => {
-    if (!isDragging) return;
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
     setIsDragging(false);
     if (effectiveDigitalJoin != null) {
       dSet(effectiveDigitalJoin, false);
     }
+    if (changeTimerRef.current != null) {
+      clearTimeout(changeTimerRef.current);
+      changeTimerRef.current = null;
+    }
+    onCommit?.(latestValueRef.current);
     if (delayMsAfterDragUpdateFeedback > 0) {
       afterDragTimeoutRef.current = window.setTimeout(() => {
         isDraggingOrJustAfterRef.current = false;
@@ -546,10 +669,10 @@ function CrisSlider({
       isDraggingOrJustAfterRef.current = false;
       updateFromFeedback();
     }
-  }, [isDragging, effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback]);
+  }, [effectiveDigitalJoin, dSet, delayMsAfterDragUpdateFeedback, updateFromFeedback, onCommit]);
   const handleMove = useCallback2(
     (clientX, clientY, bounds) => {
-      if (!isDragging) return;
+      if (!draggingRef.current) return;
       let newRatio;
       if (horizontal) {
         newRatio = (clientX - bounds.left) / bounds.width;
@@ -558,11 +681,31 @@ function CrisSlider({
       }
       newRatio = Math.max(0, Math.min(1, newRatio));
       setRatioCurrent(newRatio);
+      const outValue = ratioToAnalog(newRatio);
+      latestValueRef.current = outValue;
       if (effectiveAnalogJoin != null) {
-        aSet(effectiveAnalogJoin, ratioToAnalog(newRatio));
+        aSet(effectiveAnalogJoin, outValue);
+      }
+      if (onChange) {
+        const now = Date.now();
+        const wait = changeThrottleMs - (now - lastChangeAtRef.current);
+        if (wait <= 0) {
+          if (changeTimerRef.current != null) {
+            clearTimeout(changeTimerRef.current);
+            changeTimerRef.current = null;
+          }
+          lastChangeAtRef.current = now;
+          onChange(outValue);
+        } else if (changeTimerRef.current == null) {
+          changeTimerRef.current = window.setTimeout(() => {
+            changeTimerRef.current = null;
+            lastChangeAtRef.current = Date.now();
+            onChange(latestValueRef.current);
+          }, wait);
+        }
       }
     },
-    [isDragging, horizontal, effectiveAnalogJoin, aSet, ratioToAnalog]
+    [horizontal, effectiveAnalogJoin, aSet, ratioToAnalog, onChange, changeThrottleMs]
   );
   const handleMouseDown = (event) => {
     if (isTouchActive() || touchingRef.current) return;
@@ -572,7 +715,7 @@ function CrisSlider({
     handleMove(event.clientX, event.clientY, bounds);
   };
   const handleMouseMove = (event) => {
-    if (!isDragging) return;
+    if (!draggingRef.current) return;
     const bounds = event.currentTarget.getBoundingClientRect();
     handleMove(event.clientX, event.clientY, bounds);
   };
@@ -580,38 +723,60 @@ function CrisSlider({
     handleDragEnd();
   };
   const handleMouseLeave = (event) => {
-    if (isDragging) {
+    if (draggingRef.current) {
       const bounds = event.currentTarget.getBoundingClientRect();
       handleMove(event.clientX, event.clientY, bounds);
     }
     handleDragEnd();
   };
+  const TOUCH_SLOP = 8;
   const handleTouchStart = (event) => {
     touchStart();
     touchingRef.current = true;
-    handleDragStart();
-    const bounds = event.currentTarget.getBoundingClientRect();
-    const touch = event.touches[0];
-    handleMove(touch.clientX, touch.clientY, bounds);
+    const t = event.touches[0];
+    touchStartXRef.current = t.clientX;
+    touchStartYRef.current = t.clientY;
+    touchDecidedRef.current = false;
   };
   const handleTouchMove = (event) => {
-    if (!isDragging) return;
-    const bounds = event.currentTarget.getBoundingClientRect();
-    const touch = event.touches[0];
-    handleMove(touch.clientX, touch.clientY, bounds);
+    const t = event.touches[0];
+    if (!t) return;
+    if (draggingRef.current) {
+      handleMove(t.clientX, t.clientY, event.currentTarget.getBoundingClientRect());
+      return;
+    }
+    if (touchDecidedRef.current) return;
+    const dx = Math.abs(t.clientX - touchStartXRef.current);
+    const dy = Math.abs(t.clientY - touchStartYRef.current);
+    if (dx < TOUCH_SLOP && dy < TOUCH_SLOP) return;
+    touchDecidedRef.current = true;
+    const along = horizontal ? dx : dy;
+    const cross = horizontal ? dy : dx;
+    if (along >= cross) {
+      handleDragStart();
+      handleMove(t.clientX, t.clientY, event.currentTarget.getBoundingClientRect());
+    }
   };
-  const handleTouchEnd = () => {
+  const handleTouchEnd = (event) => {
     touchEnd();
-    handleDragEnd();
+    if (draggingRef.current) {
+      handleDragEnd();
+    } else if (!touchDecidedRef.current) {
+      const t = event.changedTouches[0];
+      if (t) {
+        handleDragStart();
+        handleMove(t.clientX, t.clientY, event.currentTarget.getBoundingClientRect());
+        handleDragEnd();
+      }
+    }
+    touchDecidedRef.current = false;
+    touchingRef.current = false;
   };
-  const handleTouchCancel = (event) => {
+  const handleTouchCancel = () => {
     touchEnd();
-    if (isDragging && event.touches.length > 0) {
-      const bounds = event.currentTarget.getBoundingClientRect();
-      const touch = event.touches[0];
-      handleMove(touch.clientX, touch.clientY, bounds);
-    }
-    handleDragEnd();
+    touchDecidedRef.current = false;
+    if (draggingRef.current) handleDragEnd();
+    touchingRef.current = false;
   };
   if (!isVisible) return null;
   const containerClasses = [
@@ -639,8 +804,10 @@ function CrisSlider({
     computedBarStyle.height = `${height}%`;
     computedBarStyle.top = `${top}%`;
   }
+  const dragLayerStyle = isDragging ? { willChange: "transform" } : {};
   const computedFillStyle = {
     ...fillStyle,
+    ...dragLayerStyle,
     position: "absolute"
   };
   if (horizontal) {
@@ -662,6 +829,7 @@ function CrisSlider({
   }
   const computedThumbStyle = {
     ...thumbStyle,
+    ...dragLayerStyle,
     position: "absolute"
   };
   if (horizontal) {
@@ -685,7 +853,9 @@ function CrisSlider({
         ...style,
         position: "relative",
         cursor: isEnabled ? "pointer" : "default",
-        touchAction: "none",
+        // Let the browser scroll the cross-axis (so a horizontal swipe over a vertical
+        // fader scrolls the row); the slider handles drags along its own axis.
+        touchAction: horizontal ? "pan-y" : "pan-x",
         userSelect: "none"
       },
       onMouseDown: handleMouseDown,
@@ -2120,6 +2290,654 @@ function CrisCoMatrixListsTie({
     }
   );
 }
+
+// src/components/CrisViewComm.tsx
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
+var ETH = /* @__PURE__ */ new Set(["tcp", "udp", "ssh", "ws"]);
+function commIndicators(c) {
+  const isEth = !!c?.kd && ETH.has(c.kd);
+  return {
+    eth: { visible: isEth || c?.kd === "native", on: !!c?.co },
+    serial: { visible: c?.kd === "serial" || isEth && !!c?.so, on: !!c?.al }
+  };
+}
+var COMM_DEFAULTS = {
+  root: "flex items-center gap-[0.4em]",
+  dot: "w-[2.2em] h-[2.2em] rounded-full flex items-center justify-center",
+  dotOn: "bg-[#22c55e]",
+  dotOff: "bg-[#dc2626]",
+  icon: ""
+};
+function isNode(v) {
+  return v !== void 0 && typeof v !== "string";
+}
+function IndicatorDot({ icon, on, iconScale, cls }) {
+  const iconStyle = {
+    width: iconScale,
+    height: iconScale,
+    filter: "brightness(0) invert(1)",
+    opacity: on ? 1 : 0.5
+  };
+  return /* @__PURE__ */ jsx11("div", { className: `${cls.dot} ${on ? cls.dotOn : cls.dotOff}`, children: isNode(icon) ? icon : /* @__PURE__ */ jsx11("img", { className: cls.icon, src: getIconUrl(icon), alt: "", draggable: false, style: iconStyle }) });
+}
+function CrisViewComm({ comm, classes, icons, className }) {
+  const cls = {
+    root: classes?.root ?? COMM_DEFAULTS.root,
+    dot: classes?.dot ?? COMM_DEFAULTS.dot,
+    dotOn: classes?.dotOn ?? COMM_DEFAULTS.dotOn,
+    dotOff: classes?.dotOff ?? COMM_DEFAULTS.dotOff,
+    icon: classes?.icon ?? COMM_DEFAULTS.icon
+  };
+  const ethIcon = icons?.ethernet ?? "ind-ethernet";
+  const serialIcon = icons?.serial ?? "rs232";
+  const { eth, serial } = commIndicators(comm);
+  if (!eth.visible && !serial.visible) return null;
+  return /* @__PURE__ */ jsxs9("div", { className: `${cls.root} ${className ?? ""}`, children: [
+    eth.visible && /* @__PURE__ */ jsx11(IndicatorDot, { icon: ethIcon, on: eth.on, iconScale: "85%", cls }),
+    serial.visible && /* @__PURE__ */ jsx11(IndicatorDot, { icon: serialIcon, on: serial.on, iconScale: "95%", cls })
+  ] });
+}
+
+// src/components/dsp/CrisViewDspFull.tsx
+import { useState as useState6 } from "react";
+import { useCustomObject as useCustomObject4, useCustomObjectSend as useCustomObjectSend4 } from "@imperosoft/cris-webui-ch5-core";
+
+// src/components/dsp/DspIoPage.tsx
+import { useRef as useRef4 } from "react";
+
+// src/components/dsp/dspModel.ts
+function levelToPercent(lv) {
+  return Math.round(clampLevel(lv) / 65535 * 100);
+}
+function clampLevel(lv) {
+  if (!Number.isFinite(lv)) return 0;
+  return Math.max(0, Math.min(65535, lv));
+}
+function normalizeLinked(raw) {
+  return {
+    label: raw.lb ?? "",
+    channels: raw.ch ?? []
+  };
+}
+function collapseStrips(channels, links) {
+  const byId = new Map(channels.map((c) => [c.id, c]));
+  const grouped = /* @__PURE__ */ new Set();
+  const groups = [];
+  for (const raw of links ?? []) {
+    const { label, channels: members } = normalizeLinked(raw);
+    if (members.length === 0) continue;
+    members.forEach((id) => grouped.add(id));
+    const primary = members.find((id) => byId.has(id));
+    const ref = primary !== void 0 ? byId.get(primary) : void 0;
+    groups.push({
+      kind: "group",
+      key: `g:${members.join("-")}`,
+      label: label || ref?.lb || `Grupo ${members[0]}`,
+      channels: members,
+      lv: clampLevel(ref?.lv),
+      mt: ref?.mt ?? false
+    });
+  }
+  const singles = channels.filter((c) => !grouped.has(c.id)).map((c) => ({
+    kind: "single",
+    key: `c:${c.id}`,
+    label: c.lb ?? `Canal ${c.id}`,
+    channels: [c.id],
+    lv: clampLevel(c.lv),
+    mt: c.mt
+  }));
+  return [...singles, ...groups];
+}
+function linksFor(ln, io) {
+  return io === "in" ? ln?.ip : ln?.op;
+}
+function buildMixerAxis(channels, links) {
+  const items = channels.map((c) => ({
+    id: c.id,
+    channelLabel: c.lb ?? `${c.id}`
+  }));
+  const indexById = new Map(channels.map((c, idx) => [c.id, idx]));
+  for (const raw of links ?? []) {
+    const { label, channels: members } = normalizeLinked(raw);
+    if (members.length < 2) continue;
+    const sorted = [...members].sort((a, b) => a - b);
+    const consecutiveNumbers = sorted.every((n, k) => k === 0 || n === sorted[k - 1] + 1);
+    if (!consecutiveNumbers) continue;
+    const idxs = sorted.map((n) => indexById.get(n));
+    if (idxs.some((x) => x === void 0)) continue;
+    const indices = idxs;
+    const consecutiveIdx = indices.every((x, k) => k === 0 || x === indices[k - 1] + 1);
+    if (!consecutiveIdx) continue;
+    const startIdx = indices[0];
+    items[startIdx].groupStart = true;
+    items[startIdx].groupSpan = indices.length;
+    for (const idx of indices) items[idx].groupCommon = label;
+  }
+  return items;
+}
+
+// src/components/dsp/DspChannelStrip.tsx
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
+function DspChannelStrip({ strip, io, oid, send, cls, icons }) {
+  const primary = strip.channels[0];
+  const sendLevel = (channel, value, queued) => send(oid, { action: "level.set", io, channel, value, queued });
+  const streamLevel = (value) => {
+    if (primary !== void 0) sendLevel(primary, value, false);
+  };
+  const commitLevel = (value) => {
+    strip.channels.forEach((ch) => sendLevel(ch, value, true));
+  };
+  const toggleMute = () => {
+    const value = !strip.mt;
+    strip.channels.forEach(
+      (channel) => send(oid, { action: "mute.set", io, channel, value, queued: false })
+    );
+  };
+  return /* @__PURE__ */ jsxs10("div", { className: cls.strip, style: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsx12("div", { className: "w-full h-[4.1em] flex items-center justify-center", children: /* @__PURE__ */ jsx12("span", { className: cls.stripLabel, title: strip.label, children: strip.label }) }),
+    /* @__PURE__ */ jsxs10("span", { className: cls.levelReadout, children: [
+      levelToPercent(strip.lv),
+      "%"
+    ] }),
+    /* @__PURE__ */ jsx12(
+      CrisSlider,
+      {
+        value: strip.lv,
+        onChange: streamLevel,
+        onCommit: commitLevel,
+        minValue: 0,
+        maxValue: 65535,
+        thumbSizePercent: 7,
+        className: "flex-1 w-full",
+        barClassName: cls.faderBar,
+        fillClassName: cls.faderFill,
+        thumbClassName: cls.faderThumb
+      }
+    ),
+    /* @__PURE__ */ jsx12("div", { className: "w-full h-[3.8em] shrink-0 mt-[0.6em]", children: /* @__PURE__ */ jsx12(
+      CrisButton,
+      {
+        selected: strip.mt,
+        onPress: toggleMute,
+        iconName: icons.muteOff,
+        iconNameActive: icons.muteOn,
+        iconSize: "3.6em",
+        iconStyle: { filter: icons.muteOffFilter },
+        iconStyleActive: { filter: icons.muteOnFilter },
+        className: cls.mute,
+        classActive: cls.muteActive
+      }
+    ) })
+  ] });
+}
+
+// src/components/dsp/useHorizontalWheel.ts
+import { useEffect as useEffect5 } from "react";
+function useHorizontalWheel(ref) {
+  useEffect5(() => {
+    const el = ref.current;
+    if (!el) return;
+    const onWheel = (e) => {
+      if (e.deltaY === 0) return;
+      if (el.scrollWidth <= el.clientWidth) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  }, [ref]);
+}
+
+// src/components/dsp/DspIoPage.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function DspIoPage({ status, io, oid, send, skip, cls, icons, emptyLabel }) {
+  const scrollRef = useRef4(null);
+  useHorizontalWheel(scrollRef);
+  const skipSet = new Set(skip ?? []);
+  const raw = (io === "in" ? status?.ip : status?.op) ?? [];
+  const channels = skipSet.size ? raw.filter((c) => !skipSet.has(c.id)) : raw;
+  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__ */ jsx13("div", { className: cls.message, children: emptyLabel });
+  }
+  return /* @__PURE__ */ jsx13("div", { ref: scrollRef, className: "w-full h-full overflow-x-auto no-scrollbar", children: /* @__PURE__ */ jsx13(
+    "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__ */ jsx13(
+        DspChannelStrip,
+        {
+          strip,
+          io,
+          oid,
+          send,
+          cls,
+          icons
+        },
+        strip.key
+      ))
+    }
+  ) });
+}
+
+// src/components/dsp/DspMixer.tsx
+import { useRef as useRef5 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+var COMMON_W = "9em";
+var CHAN_W = "3em";
+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__ */ jsx14(Fragment3, { children: icon });
+  return /* @__PURE__ */ jsx14(
+    "img",
+    {
+      src: getIconUrl(icon),
+      alt: "",
+      draggable: false,
+      className: "pointer-events-none",
+      style: { width: "4.4em", height: "4.4em", filter: "brightness(0) invert(1)" }
+    }
+  );
+}
+function DspMixer({ status, oid, send, cls, icons }) {
+  const scrollRef = useRef5(null);
+  const startRef = useRef5(null);
+  const movedRef = useRef5(false);
+  const thresholdRef = useRef5(8);
+  const pendingRef = useRef5(null);
+  const inputs = status?.ip ?? [];
+  const outputs = status?.op ?? [];
+  const isOn = (output, input) => outputs.find((o) => o.id === output)?.xp?.[input] === true;
+  const onPointerDown = (e) => {
+    const el = scrollRef.current;
+    if (!el) return;
+    movedRef.current = false;
+    thresholdRef.current = parseFloat(getComputedStyle(el).fontSize || "16") * DRAG_FACTOR;
+    startRef.current = { x: e.clientX, y: e.clientY, sl: el.scrollLeft, st: el.scrollTop };
+    const cell = e.target.closest("[data-cell]");
+    pendingRef.current = cell ? { input: Number(cell.dataset.in), output: Number(cell.dataset.out) } : null;
+    el.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e) => {
+    const el = scrollRef.current;
+    const s = startRef.current;
+    if (!el || !s) return;
+    const dx = e.clientX - s.x;
+    const dy = e.clientY - s.y;
+    if (!movedRef.current && Math.hypot(dx, dy) > thresholdRef.current) movedRef.current = true;
+    if (movedRef.current) {
+      el.scrollLeft = s.sl - dx;
+      el.scrollTop = s.st - dy;
+    }
+  };
+  const onPointerUp = (e) => {
+    const el = scrollRef.current;
+    el?.releasePointerCapture?.(e.pointerId);
+    if (!movedRef.current && pendingRef.current) {
+      const { input, output } = pendingRef.current;
+      send(oid, {
+        action: "crosspoint.set",
+        input,
+        output,
+        value: !isOn(output, input),
+        queued: true
+      });
+    }
+    startRef.current = null;
+    pendingRef.current = null;
+  };
+  if (inputs.length === 0 || outputs.length === 0) {
+    return /* @__PURE__ */ jsx14("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__ */ jsx14(
+    "div",
+    {
+      ref: scrollRef,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      className: "w-full h-full overflow-auto no-scrollbar relative touch-none select-none cursor-grab",
+      children: /* @__PURE__ */ jsxs11(
+        "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})`,
+            minWidth: "min-content"
+          },
+          children: [
+            /* @__PURE__ */ jsx14(
+              "div",
+              {
+                className: cls.mixerCorner,
+                style: { top: 0, left: 0, gridColumn: "1 / span 2", gridRow: "1 / span 2" },
+                children: "OUT \\ IN"
+              }
+            ),
+            inAxis.flatMap((it, ii) => {
+              const col = 3 + ii;
+              if (it.groupCommon !== void 0) {
+                const nodes = [
+                  /* @__PURE__ */ jsx14(
+                    "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__ */ jsx14("span", { className: "line-clamp-1", children: it.channelLabel })
+                    },
+                    `ich:${it.id}`
+                  )
+                ];
+                if (it.groupStart) {
+                  nodes.unshift(
+                    /* @__PURE__ */ jsx14(
+                      "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__ */ jsx14("span", { className: "line-clamp-2", children: it.groupCommon })
+                      },
+                      `icc:${it.id}`
+                    )
+                  );
+                }
+                return nodes;
+              }
+              return [
+                /* @__PURE__ */ jsx14(
+                  "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__ */ jsx14("span", { className: "line-clamp-3", children: it.channelLabel })
+                  },
+                  `is:${it.id}`
+                )
+              ];
+            }),
+            outAxis.flatMap((it, oo) => {
+              const row = 3 + oo;
+              if (it.groupCommon !== void 0) {
+                const nodes = [
+                  /* @__PURE__ */ jsx14(
+                    "div",
+                    {
+                      className: `${cls.mixerChrome} z-20`,
+                      style: { left: 0, gridColumn: "1 / span 2", gridRow: row, justifyContent: "flex-end", paddingRight: "0.6em" },
+                      children: /* @__PURE__ */ jsx14("span", { className: "line-clamp-1", children: it.channelLabel })
+                    },
+                    `och:${it.id}`
+                  )
+                ];
+                if (it.groupStart) {
+                  nodes.unshift(
+                    /* @__PURE__ */ jsx14(
+                      "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__ */ jsx14("span", { className: "line-clamp-2 text-left", children: it.groupCommon })
+                      },
+                      `occ:${it.id}`
+                    )
+                  );
+                }
+                return nodes;
+              }
+              return [
+                /* @__PURE__ */ jsx14(
+                  "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__ */ jsx14("span", { className: "line-clamp-2 text-left", children: it.channelLabel })
+                  },
+                  `os:${it.id}`
+                )
+              ];
+            }),
+            outputs.map(
+              (o, oo) => inputs.map((i, ii) => {
+                const on = isOn(o.id, i.id);
+                return /* @__PURE__ */ jsx14(
+                  "div",
+                  {
+                    "data-cell": true,
+                    "data-in": i.id,
+                    "data-out": o.id,
+                    className: `${cls.cell} ${on ? cls.cellOn : cls.cellOff}`,
+                    style: { gridColumn: 3 + ii, gridRow: 3 + oo },
+                    children: on && /* @__PURE__ */ jsx14(CrosspointOnIcon, { icon: icons.crosspointOn })
+                  },
+                  `x:${i.id}:${o.id}`
+                );
+              })
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/dsp/DspPresets.tsx
+import { useRef as useRef6, useState as useState5 } from "react";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
+var HOLD_MS = 2e3;
+var SAVED_MS = 1e3;
+function PresetButton({ num, name, active, onCall, onSave, cls }) {
+  return /* @__PURE__ */ jsx15(
+    CrisButton,
+    {
+      onTap: onCall,
+      onLongPress: onSave,
+      holdMs: HOLD_MS,
+      selected: active,
+      className: cls.preset,
+      classActive: cls.presetActive,
+      classPressed: cls.presetPressed,
+      children: /* @__PURE__ */ jsxs12("span", { className: "flex items-center justify-center gap-[0.5em]", children: [
+        /* @__PURE__ */ jsx15("span", { className: "text-[1.6em] font-bold leading-none", children: num }),
+        /* @__PURE__ */ jsx15("span", { className: "text-[1.2em] leading-none", children: name })
+      ] })
+    }
+  );
+}
+function DspPresets({
+  oid,
+  send,
+  presets,
+  activeDevice,
+  activeLocal,
+  sustainedFeedback = true,
+  cls
+}) {
+  const [saved, setSaved] = useState5(false);
+  const savedTimer = useRef6(null);
+  const call = (id) => send(oid, { action: "preset.call", value: id });
+  const save = (id) => {
+    send(oid, { action: "preset.save", value: id });
+    setSaved(true);
+    if (savedTimer.current !== null) clearTimeout(savedTimer.current);
+    savedTimer.current = window.setTimeout(() => setSaved(false), SAVED_MS);
+  };
+  const isActive = (p) => {
+    if (!sustainedFeedback) return false;
+    return p.kind === "local" ? activeLocal === p.id : activeDevice === p.id;
+  };
+  return /* @__PURE__ */ jsxs12("div", { className: cls.presetWrap, children: [
+    /* @__PURE__ */ jsx15("span", { className: cls.presetLabel, children: "Preset" }),
+    /* @__PURE__ */ jsxs12("div", { className: "relative flex-1 flex items-stretch gap-[0.3em] mt-[0.25em]", children: [
+      presets.map((p) => /* @__PURE__ */ jsx15(
+        PresetButton,
+        {
+          num: p.id,
+          name: p.name,
+          active: isActive(p),
+          onCall: () => call(p.id),
+          onSave: p.saveAllowed === false ? void 0 : () => save(p.id),
+          cls
+        },
+        p.id
+      )),
+      saved && /* @__PURE__ */ jsx15("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
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+function CrisViewDspFull({
+  oid,
+  presets,
+  skipShowInput,
+  skipShowOutput,
+  skipCrosspoints = false,
+  sustainedPresetFeedback = true,
+  classes,
+  icons,
+  className,
+  initialTab = "in"
+}) {
+  const safeInitial = initialTab === "mix" && skipCrosspoints ? "in" : initialTab;
+  const [tab, setTab] = useState6(safeInitial);
+  const status = useCustomObject4(oid, { subscribe: true });
+  const send = useCustomObjectSend4();
+  const cls = resolveDspClasses(classes);
+  const ic = resolveDspIcons(icons);
+  const tabs = [
+    { id: "in", label: "Inputs" },
+    ...skipCrosspoints ? [] : [{ id: "mix", label: "Mixer" }],
+    { id: "out", label: "Outputs" }
+  ];
+  const hasPresets = !!presets && presets.length > 0;
+  const activeDevice = status?.pr?.dv ?? status?.ps?.dv;
+  const activeLocal = status?.pr?.lc ?? status?.ps?.lc;
+  return /* @__PURE__ */ jsxs13("div", { className: `${cls.root} ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsxs13("div", { className: cls.header, children: [
+      hasPresets && /* @__PURE__ */ jsx16(
+        DspPresets,
+        {
+          oid,
+          send,
+          presets,
+          activeDevice,
+          activeLocal,
+          sustainedFeedback: sustainedPresetFeedback,
+          cls
+        }
+      ),
+      tabs.map((t) => /* @__PURE__ */ jsx16(
+        CrisButton,
+        {
+          text: t.label,
+          selected: tab === t.id,
+          onPress: () => setTab(t.id),
+          className: cls.tab,
+          classActive: cls.tabActive
+        },
+        t.id
+      )),
+      /* @__PURE__ */ jsx16(CrisViewComm, { comm: status?.cm, className: "absolute right-[1em] bottom-[0.3em] text-[1.25em]" })
+    ] }),
+    /* @__PURE__ */ jsx16("div", { className: cls.content, children: status === void 0 ? /* @__PURE__ */ jsx16("div", { className: cls.message, children: "Conectando\u2026" }) : /* @__PURE__ */ jsxs13(Fragment4, { children: [
+      tab === "in" && /* @__PURE__ */ jsx16(
+        DspIoPage,
+        {
+          status,
+          io: "in",
+          oid,
+          send,
+          skip: skipShowInput,
+          cls,
+          icons: ic,
+          emptyLabel: "Sin entradas"
+        }
+      ),
+      tab === "mix" && !skipCrosspoints && /* @__PURE__ */ jsx16(DspMixer, { status, oid, send, cls, icons: ic }),
+      tab === "out" && /* @__PURE__ */ jsx16(
+        DspIoPage,
+        {
+          status,
+          io: "out",
+          oid,
+          send,
+          skip: skipShowOutput,
+          cls,
+          icons: ic,
+          emptyLabel: "Sin salidas"
+        }
+      )
+    ] }) })
+  ] });
+}
 export {
   CrisButton,
   CrisCoDebug,
@@ -2131,9 +2949,18 @@ export {
   CrisSpinner,
   CrisText,
   CrisTextInput,
+  CrisViewComm,
+  CrisViewDspFull,
+  buildMixerAxis,
+  clampLevel,
+  collapseStrips,
+  commIndicators,
   configureIcons,
   getIconConfig,
   getIconFilter,
-  getIconUrl
+  getIconUrl,
+  levelToPercent,
+  linksFor,
+  normalizeLinked
 };
 //# sourceMappingURL=index.mjs.map