maestro-effects 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1457 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  clamp: () => clamp,
+  createAnnotationHighlight: () => createAnnotationHighlight,
+  createDiagramDrawer: () => createDiagramDrawer,
+  createHorizontalScroll: () => createHorizontalScroll,
+  createScrollOrganizer: () => createScrollOrganizer,
+  createWaveformVisualizer: () => createWaveformVisualizer,
+  ease: () => ease,
+  lerp: () => lerp
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils.ts
+function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+var ease = {
+  outCubic: (t) => 1 - Math.pow(1 - t, 3),
+  inCubic: (t) => t * t * t,
+  outQuart: (t) => 1 - Math.pow(1 - t, 4),
+  inOutCubic: (t) => t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2
+};
+function seededRandom(seed) {
+  let s = seed | 0;
+  return () => {
+    s = s + 1831565813 | 0;
+    let t = Math.imul(s ^ s >>> 15, 1 | s);
+    t = t + Math.imul(t ^ t >>> 7, 61 | t) ^ t;
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+  };
+}
+var PERM = new Uint8Array(512);
+(() => {
+  const rng = seededRandom(42);
+  const p = new Uint8Array(256);
+  for (let i = 0; i < 256; i++) p[i] = i;
+  for (let i = 255; i > 0; i--) {
+    const j = rng() * (i + 1) | 0;
+    const tmp = p[i];
+    p[i] = p[j];
+    p[j] = tmp;
+  }
+  for (let i = 0; i < 512; i++) PERM[i] = p[i & 255];
+})();
+function fade(t) {
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+function grad(hash, x, y) {
+  const h = hash & 3;
+  const u = h < 2 ? x : y;
+  const v = h < 2 ? y : x;
+  return ((h & 1) === 0 ? u : -u) + ((h & 2) === 0 ? v : -v);
+}
+function noise2D(x, y) {
+  const X = Math.floor(x) & 255;
+  const Y = Math.floor(y) & 255;
+  const xf = x - Math.floor(x);
+  const yf = y - Math.floor(y);
+  const u = fade(xf);
+  const v = fade(yf);
+  const aa = PERM[PERM[X] + Y];
+  const ab = PERM[PERM[X] + Y + 1];
+  const ba = PERM[PERM[X + 1] + Y];
+  const bb = PERM[PERM[X + 1] + Y + 1];
+  return lerp(
+    lerp(grad(aa, xf, yf), grad(ba, xf - 1, yf), u),
+    lerp(grad(ab, xf, yf - 1), grad(bb, xf - 1, yf - 1), u),
+    v
+  );
+}
+
+// src/waveform.ts
+var BASELINE = "#92400E";
+var MID_PEAK = "#D97706";
+var FULL_PEAK = "#F59E0B";
+function defaultColorFn(amp, _x) {
+  if (amp < 0.5) {
+    const t2 = amp / 0.5;
+    return lerpColor(BASELINE, MID_PEAK, t2);
+  }
+  const t = (amp - 0.5) / 0.5;
+  return lerpColor(MID_PEAK, FULL_PEAK, t);
+}
+function hexToRgb(hex) {
+  const v = parseInt(hex.slice(1), 16);
+  return [v >> 16 & 255, v >> 8 & 255, v & 255];
+}
+function lerpColor(a, b, t) {
+  const [r1, g1, b1] = hexToRgb(a);
+  const [r2, g2, b2] = hexToRgb(b);
+  const r = Math.round(lerp(r1, r2, t));
+  const g = Math.round(lerp(g1, g2, t));
+  const bl = Math.round(lerp(b1, b2, t));
+  return `rgb(${r},${g},${bl})`;
+}
+function createWaveformVisualizer(options) {
+  const {
+    canvas,
+    colorFn = defaultColorFn,
+    amplitude: baseAmplitude = 0.6,
+    frequency = 0.02,
+    noiseScale = 1,
+    parallaxStrength = 6,
+    reactToAudio = null,
+    barWidth = 3,
+    barGap = 1,
+    fadeEdges = true
+  } = options;
+  let mode = options.mode ?? "idle";
+  let animId = 0;
+  let disposed = false;
+  let mouseX = 0.5;
+  const ctx = canvas.getContext("2d");
+  let audioCtx = null;
+  let analyser = null;
+  let audioData = null;
+  if (reactToAudio) {
+    audioCtx = new AudioContext();
+    analyser = audioCtx.createAnalyser();
+    analyser.fftSize = 256;
+    const source = audioCtx.createMediaStreamSource(reactToAudio);
+    source.connect(analyser);
+    audioData = new Uint8Array(analyser.frequencyBinCount);
+  }
+  function handleMouseMove(e) {
+    const rect = canvas.getBoundingClientRect();
+    mouseX = clamp((e.clientX - rect.left) / rect.width, 0, 1);
+  }
+  canvas.addEventListener("mousemove", handleMouseMove);
+  function resizeCanvas() {
+    const dpr = Math.min(window.devicePixelRatio, 2);
+    const rect = canvas.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.scale(dpr, dpr);
+  }
+  const ro = new ResizeObserver(resizeCanvas);
+  ro.observe(canvas);
+  resizeCanvas();
+  const startTime = performance.now();
+  function render() {
+    if (disposed) return;
+    const elapsed = (performance.now() - startTime) / 1e3;
+    const rect = canvas.getBoundingClientRect();
+    const w = rect.width;
+    const h = rect.height;
+    ctx.clearRect(0, 0, w, h);
+    const modeMultiplier = mode === "active" ? 2.5 : mode === "listening" ? 0.3 : 1;
+    const modeNoise = mode === "active" ? noiseScale * 2 : noiseScale;
+    const breathe = Math.sin(elapsed * Math.PI * 0.5) * 0.3 + 0.7;
+    const amp = baseAmplitude * modeMultiplier * breathe;
+    const step = barWidth + barGap;
+    const barCount = Math.ceil(w / step);
+    const parallaxOffset = (mouseX - 0.5) * parallaxStrength;
+    if (analyser && audioData) {
+      analyser.getByteFrequencyData(audioData);
+    }
+    for (let i = 0; i < barCount; i++) {
+      const x = i * step + parallaxOffset;
+      const nx = i / barCount;
+      let barAmp;
+      if (audioData && analyser && mode === "active") {
+        const audioIndex = Math.floor(nx * audioData.length);
+        barAmp = (audioData[audioIndex] ?? 0) / 255;
+      } else {
+        const sine = Math.sin(nx * Math.PI * 8 + elapsed * 2) * 0.5 + 0.5;
+        const perlin = (noise2D(nx * 10 * frequency * 100, elapsed * 0.8) + 1) * 0.5;
+        barAmp = lerp(sine, perlin, clamp(modeNoise, 0, 1));
+      }
+      barAmp *= amp;
+      if (mode === "listening") {
+        const centerPull = 1 - Math.abs(nx - 0.5) * 2;
+        barAmp *= centerPull;
+      }
+      let edgeFade = 1;
+      if (fadeEdges) {
+        const edgeDist = Math.min(nx, 1 - nx);
+        edgeFade = clamp(edgeDist / 0.15, 0, 1);
+      }
+      const barHeight = barAmp * h * 0.4 * edgeFade;
+      const cy = h / 2;
+      const color = colorFn(barAmp, nx);
+      ctx.fillStyle = color;
+      ctx.globalAlpha = edgeFade;
+      ctx.fillRect(x, cy - barHeight, barWidth, barHeight * 2);
+      ctx.globalAlpha = 1;
+    }
+    animId = requestAnimationFrame(render);
+  }
+  animId = requestAnimationFrame(render);
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(animId);
+    canvas.removeEventListener("mousemove", handleMouseMove);
+    ro.disconnect();
+    if (audioCtx) {
+      audioCtx.close().catch(() => {
+      });
+    }
+  };
+  cleanup.setMode = (m) => {
+    mode = m;
+  };
+  return cleanup;
+}
+
+// src/scroll-organizer.ts
+function defaultScatteredState(_el, index) {
+  const rng = seededRandom(index * 7 + 31);
+  return {
+    x: (rng() - 0.5) * 600,
+    y: (rng() - 0.5) * 400,
+    rotation: (rng() - 0.5) * 30,
+    // −15° to +15°
+    opacity: rng() * 0.4 + 0.3,
+    // 0.3 to 0.7
+    scale: rng() * 0.3 + 0.8
+    // 0.8 to 1.1
+  };
+}
+function defaultOrganizedState(_el, _index) {
+  return { x: 0, y: 0, rotation: 0, opacity: 1, scale: 1 };
+}
+function lerpState(a, b, t) {
+  return {
+    x: a.x + (b.x - a.x) * t,
+    y: a.y + (b.y - a.y) * t,
+    rotation: a.rotation + (b.rotation - a.rotation) * t,
+    opacity: a.opacity + (b.opacity - a.opacity) * t,
+    scale: a.scale + (b.scale - a.scale) * t
+  };
+}
+function createScrollOrganizer(options) {
+  const {
+    elements,
+    getScatteredState = defaultScatteredState,
+    getOrganizedState = defaultOrganizedState,
+    staggerFactor = 0.05,
+    easing = ease.outCubic
+  } = options;
+  let currentProgress = options.progress ?? 0;
+  let disposed = false;
+  const scatteredStates = elements.map((el, i) => getScatteredState(el, i));
+  const organizedStates = elements.map((el, i) => getOrganizedState(el, i));
+  function applyTransforms() {
+    if (disposed) return;
+    const count = elements.length;
+    for (let i = 0; i < count; i++) {
+      const el = elements[i];
+      const offset = i * staggerFactor;
+      const maxRange = 1 - offset;
+      const localT = clamp((currentProgress - offset) / maxRange, 0, 1);
+      let easedT;
+      if (localT > 0.8) {
+        const snapT = (localT - 0.8) / 0.2;
+        const baseEased = easing(0.8);
+        easedT = baseEased + (1 - baseEased) * ease.outQuart(snapT);
+      } else {
+        easedT = easing(localT);
+      }
+      const state = lerpState(scatteredStates[i], organizedStates[i], easedT);
+      el.style.transform = `translate(${state.x}px, ${state.y}px) rotate(${state.rotation}deg) scale(${state.scale})`;
+      el.style.opacity = String(state.opacity);
+    }
+  }
+  applyTransforms();
+  const setProgress = (value) => {
+    currentProgress = clamp(value, 0, 1);
+    applyTransforms();
+  };
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    for (const el of elements) {
+      el.style.transform = "";
+      el.style.opacity = "";
+    }
+  };
+  cleanup.setProgress = setProgress;
+  return cleanup;
+}
+
+// src/diagram-drawer.ts
+var DEFAULT_COLORS = {
+  node: "#261F1B",
+  nodeAlt: "#2C241F",
+  nodeBorder: "#6B3F18",
+  nodeAccent: "#D97706",
+  nodeAccentSoft: "#B45309",
+  nodeHighlight: "#FFF4D6",
+  nodeText: "#F7F1E8",
+  nodeSubtext: "#C9B8A6",
+  nodeMutedText: "#9F8C79",
+  connection: "#F59E0B",
+  connectionSoft: "#C26A12",
+  glow: "#F59E0B",
+  bracket: "#D97706",
+  bracketText: "#D6C1AB",
+  group: "#2A211C",
+  groupBorder: "#A65B12",
+  io: "#F59E0B"
+};
+var SVG_NS = "http://www.w3.org/2000/svg";
+var NODE_W = 132;
+var NODE_H = 68;
+var STACK_H = 78;
+var NETWORK_W = 96;
+var NETWORK_H = 152;
+var DIAMOND_W = 112;
+var DIAMOND_H = 78;
+var IO_W = 150;
+function nodeSize(type) {
+  switch (type) {
+    case "network":
+      return { w: NETWORK_W, h: NETWORK_H };
+    case "stack":
+      return { w: NODE_W, h: STACK_H };
+    case "diamond":
+      return { w: DIAMOND_W, h: DIAMOND_H };
+    case "io":
+      return { w: IO_W, h: NODE_H };
+    case "group":
+      return { w: 0, h: 0 };
+    default:
+      return { w: NODE_W, h: NODE_H };
+  }
+}
+function alphaHex(a) {
+  return Math.round(clamp(a, 0, 1) * 255).toString(16).padStart(2, "0");
+}
+function setAttrs(el, attrs) {
+  for (const [key, value] of Object.entries(attrs)) {
+    el.setAttribute(key, value);
+  }
+  return el;
+}
+function createSvgEl(tag, attrs = {}) {
+  return setAttrs(document.createElementNS(SVG_NS, tag), attrs);
+}
+function titleCaseType(type) {
+  switch (type) {
+    case "io":
+      return "Input / Output";
+    case "stack":
+      return "Feature Maps";
+    case "network":
+      return "Dense Layer";
+    default:
+      return type.charAt(0).toUpperCase() + type.slice(1);
+  }
+}
+function splitNodeLabel(label) {
+  const lines = label.split("\n").map((line) => line.trim()).filter(Boolean);
+  return {
+    primary: lines[0] ?? "",
+    secondary: lines.slice(1)
+  };
+}
+function splitSubtitle(subtitle) {
+  return subtitle?.split("\n").map((line) => line.trim()).filter(Boolean) ?? [];
+}
+function roundedRectPath(x, y, w, h, r) {
+  const path = new Path2D();
+  path.roundRect(x, y, w, h, r);
+  return path;
+}
+function createDiagramDrawer(options) {
+  const {
+    container,
+    nodes: nodeDefs,
+    direction = "horizontal",
+    drawSpeed = 600,
+    connectionStyle = "stepped",
+    connectionArrows = true,
+    colorScheme: colorOverrides,
+    onNodeDrawn,
+    interactive = false,
+    glowIntensity = 0.4,
+    audioElement = null,
+    scrollFallback = true,
+    padding = 24,
+    nodeSpacing = { x: 80, y: 40 }
+  } = options;
+  const colors = { ...DEFAULT_COLORS, ...colorOverrides };
+  let disposed = false;
+  let animId = 0;
+  const timers = [];
+  container.style.position = "relative";
+  const canvas = document.createElement("canvas");
+  canvas.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;";
+  container.appendChild(canvas);
+  const ctx = canvas.getContext("2d");
+  const svg = document.createElementNS(SVG_NS, "svg");
+  svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;";
+  container.appendChild(svg);
+  const defs = createSvgEl("defs");
+  defs.appendChild(
+    createSvgEl("filter", {
+      id: "maestro-node-shadow",
+      x: "-40%",
+      y: "-40%",
+      width: "180%",
+      height: "180%",
+      colorInterpolationFilters: "sRGB"
+    })
+  );
+  const nodeShadow = defs.lastChild;
+  nodeShadow.appendChild(createSvgEl("feDropShadow", {
+    dx: "0",
+    dy: "8",
+    stdDeviation: "10",
+    "flood-color": colors.glow,
+    "flood-opacity": "0.08"
+  }));
+  svg.appendChild(defs);
+  function resize() {
+    const dpr = Math.min(window.devicePixelRatio, 2);
+    const rect = container.getBoundingClientRect();
+    canvas.width = rect.width * dpr;
+    canvas.height = rect.height * dpr;
+    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  }
+  const ro = new ResizeObserver(resize);
+  ro.observe(container);
+  resize();
+  const flowDefs = nodeDefs.filter((n) => n.type !== "group");
+  const groupDefs = nodeDefs.filter((n) => n.type === "group");
+  const defMap = new Map(nodeDefs.map((n) => [n.id, n]));
+  const depthMap = /* @__PURE__ */ new Map();
+  const roots = flowDefs.filter((n) => !n.parentId || !defMap.has(n.parentId) || defMap.get(n.parentId)?.type === "group");
+  const queue = roots.map((n) => ({ def: n, depth: 0 }));
+  while (queue.length > 0) {
+    const { def, depth } = queue.shift();
+    if (depthMap.has(def.id)) continue;
+    depthMap.set(def.id, depth);
+    for (const child of flowDefs.filter((n) => n.parentId === def.id)) {
+      queue.push({ def: child, depth: depth + 1 });
+    }
+  }
+  const maxDepth = Math.max(0, ...depthMap.values());
+  const byDepth = Array.from({ length: maxDepth + 1 }, () => []);
+  for (const def of flowDefs) {
+    const d = depthMap.get(def.id) ?? 0;
+    byDepth[d].push(def);
+  }
+  const colSizes = byDepth.map((defs2) => {
+    const sizes = defs2.map((d) => nodeSize(d.type));
+    return {
+      w: Math.max(NODE_W, ...sizes.map((s) => s.w)),
+      h: Math.max(NODE_H, ...sizes.map((s) => s.h))
+    };
+  });
+  const layoutMap = /* @__PURE__ */ new Map();
+  if (direction === "horizontal") {
+    let xCursor = padding;
+    for (let d = 0; d <= maxDepth; d++) {
+      const defs2 = byDepth[d];
+      const colW = colSizes[d].w;
+      const totalH = defs2.reduce((sum, def) => sum + nodeSize(def.type).h, 0) + (defs2.length - 1) * nodeSpacing.y;
+      let yCursor = padding + Math.max(0, (container.getBoundingClientRect().height - totalH) / 2);
+      for (const def of defs2) {
+        const { w, h } = nodeSize(def.type);
+        const cx = xCursor + colW / 2;
+        const cy = yCursor + h / 2;
+        const lnode = {
+          def,
+          x: def.position?.x ?? cx,
+          y: def.position?.y ?? cy,
+          w,
+          h,
+          depth: d,
+          visible: false,
+          glowAlpha: 0
+        };
+        layoutMap.set(def.id, lnode);
+        yCursor += h + nodeSpacing.y;
+      }
+      xCursor += colW + nodeSpacing.x;
+    }
+  } else {
+    let yCursor = container.getBoundingClientRect().height - padding;
+    for (let d = 0; d <= maxDepth; d++) {
+      const defs2 = byDepth[d];
+      const rowH = colSizes[d].h;
+      const totalW = defs2.reduce((sum, def) => sum + nodeSize(def.type).w, 0) + (defs2.length - 1) * nodeSpacing.x;
+      let xCursor = padding + Math.max(0, (container.getBoundingClientRect().width - totalW) / 2);
+      for (const def of defs2) {
+        const { w, h } = nodeSize(def.type);
+        const cx = xCursor + w / 2;
+        const cy = yCursor - rowH / 2;
+        const lnode = {
+          def,
+          x: def.position?.x ?? cx,
+          y: def.position?.y ?? cy,
+          w,
+          h,
+          depth: d,
+          visible: false,
+          glowAlpha: 0
+        };
+        layoutMap.set(def.id, lnode);
+        xCursor += w + nodeSpacing.x;
+      }
+      yCursor -= rowH + nodeSpacing.y;
+    }
+  }
+  const containerRect = container.getBoundingClientRect();
+  const cWidth = containerRect.width;
+  const cHeight = containerRect.height;
+  let minX = padding, minY = padding, maxX = padding, maxY = padding;
+  if ([...layoutMap.values()].length > 0) {
+    minX = Math.min(...[...layoutMap.values()].map((n) => n.x - n.w / 2)) - padding;
+    minY = Math.min(...[...layoutMap.values()].map((n) => n.y - n.h / 2)) - padding;
+    maxX = Math.max(...[...layoutMap.values()].map((n) => n.x + n.w / 2)) + padding;
+    maxY = Math.max(...[...layoutMap.values()].map((n) => n.y + n.h / 2)) + padding;
+  }
+  const diagramW = Math.max(1, maxX - minX);
+  const diagramH = Math.max(1, maxY - minY);
+  const zoomScale = Math.min(1, cWidth / diagramW, cHeight / diagramH);
+  const svgGroup = document.createElementNS(SVG_NS, "g");
+  if (zoomScale < 1) {
+    const tx = cWidth / 2 * (1 - zoomScale) / zoomScale;
+    const ty = cHeight / 2 * (1 - zoomScale) / zoomScale;
+    svgGroup.setAttribute("transform", `scale(${zoomScale}) translate(${tx}, ${ty})`);
+  }
+  svg.appendChild(svgGroup);
+  function drawArrowhead(x, y, angle) {
+    const size = 10;
+    ctx.save();
+    ctx.translate(x, y);
+    ctx.rotate(angle);
+    ctx.shadowColor = colors.glow + alphaHex(0.3);
+    ctx.shadowBlur = 14;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(-size, -size * 0.55);
+    ctx.lineTo(-size * 0.9, 0);
+    ctx.lineTo(-size, size * 0.55);
+    ctx.closePath();
+    ctx.fillStyle = colors.connection;
+    ctx.fill();
+    ctx.restore();
+  }
+  function drawConnection(from, to, alpha) {
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.lineCap = "round";
+    ctx.lineJoin = "round";
+    let endX, endY, arrowAngle;
+    const path = new Path2D();
+    if (direction === "horizontal") {
+      const startX = from.x + from.w / 2;
+      const startY = from.y;
+      endX = to.x - to.w / 2;
+      endY = to.y;
+      arrowAngle = 0;
+      if (connectionStyle === "stepped") {
+        const mx = (startX + endX) / 2;
+        path.moveTo(startX, startY);
+        path.lineTo(mx, startY);
+        path.lineTo(mx, endY);
+        path.lineTo(endX, endY);
+      } else if (connectionStyle === "bezier") {
+        const mx = (startX + endX) / 2;
+        path.moveTo(startX, startY);
+        path.bezierCurveTo(mx, startY, mx, endY, endX, endY);
+      } else {
+        path.moveTo(startX, startY);
+        path.lineTo(endX, endY);
+      }
+    } else {
+      const startX = from.x;
+      const startY = from.y - from.h / 2;
+      endX = to.x;
+      endY = to.y + to.h / 2;
+      arrowAngle = -Math.PI / 2;
+      if (connectionStyle === "stepped") {
+        const my = (startY + endY) / 2;
+        path.moveTo(startX, startY);
+        path.lineTo(startX, my);
+        path.lineTo(endX, my);
+        path.lineTo(endX, endY);
+      } else if (connectionStyle === "bezier") {
+        const my = (startY + endY) / 2;
+        path.moveTo(startX, startY);
+        path.bezierCurveTo(startX, my, endX, my, endX, endY);
+      } else {
+        path.moveTo(startX, startY);
+        path.lineTo(endX, endY);
+      }
+    }
+    ctx.strokeStyle = colors.connectionSoft + alphaHex(0.28);
+    ctx.lineWidth = 5;
+    ctx.shadowColor = colors.glow + alphaHex(0.2);
+    ctx.shadowBlur = 14;
+    ctx.stroke(path);
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = colors.connection;
+    ctx.lineWidth = 2.2;
+    ctx.stroke(path);
+    ctx.restore();
+    if (connectionArrows) {
+      drawArrowhead(endX, endY, arrowAngle);
+    }
+  }
+  function drawGroupEnclosure(groupDef, alpha) {
+    if (!groupDef.children || groupDef.children.length === 0) return;
+    const childNodes = groupDef.children.map((id) => layoutMap.get(id)).filter(Boolean);
+    if (childNodes.length === 0) return;
+    const pad = 16;
+    const minX2 = Math.min(...childNodes.map((n) => n.x - n.w / 2)) - pad;
+    const minY2 = Math.min(...childNodes.map((n) => n.y - n.h / 2)) - pad;
+    const maxX2 = Math.max(...childNodes.map((n) => n.x + n.w / 2)) + pad;
+    const maxY2 = Math.max(...childNodes.map((n) => n.y + n.h / 2)) + pad;
+    const gw = maxX2 - minX2;
+    const gh = maxY2 - minY2;
+    ctx.save();
+    const rectPath = roundedRectPath(minX2, minY2, gw, gh, 14);
+    const fill = ctx.createLinearGradient(minX2, minY2, minX2, maxY2);
+    fill.addColorStop(0, colors.group + alphaHex(0.12 * alpha));
+    fill.addColorStop(1, colors.node + alphaHex(0.04 * alpha));
+    ctx.fillStyle = fill;
+    ctx.shadowColor = colors.glow + alphaHex(0.08);
+    ctx.shadowBlur = 18;
+    ctx.fill(rectPath);
+    ctx.shadowBlur = 0;
+    ctx.strokeStyle = colors.groupBorder + alphaHex(0.5 * alpha);
+    ctx.lineWidth = 1.25;
+    ctx.setLineDash([10, 7]);
+    ctx.stroke(rectPath);
+    ctx.setLineDash([]);
+    const corner = 18;
+    ctx.strokeStyle = colors.connection + alphaHex(0.5 * alpha);
+    ctx.lineWidth = 1.2;
+    ctx.beginPath();
+    ctx.moveTo(minX2 + 10, minY2);
+    ctx.lineTo(minX2 + corner, minY2);
+    ctx.moveTo(minX2, minY2 + 10);
+    ctx.lineTo(minX2, minY2 + corner);
+    ctx.moveTo(maxX2 - 10, maxY2);
+    ctx.lineTo(maxX2 - corner, maxY2);
+    ctx.moveTo(maxX2, maxY2 - 10);
+    ctx.lineTo(maxX2, maxY2 - corner);
+    ctx.stroke();
+    ctx.restore();
+    if (groupDef.label) {
+      ctx.save();
+      ctx.fillStyle = colors.bracketText;
+      ctx.font = "600 11px ui-sans-serif, system-ui, sans-serif";
+      ctx.textBaseline = "top";
+      ctx.textAlign = "left";
+      ctx.fillText(groupDef.label.toUpperCase(), minX2 + 14, minY2 + 12);
+      ctx.restore();
+    }
+  }
+  function drawBracket(node, alpha) {
+    const { bracket } = node.def;
+    if (!bracket) return;
+    const { label, position } = bracket;
+    const pad = 12;
+    const labelFont = "600 10px ui-sans-serif, system-ui, sans-serif";
+    ctx.save();
+    ctx.globalAlpha = alpha;
+    ctx.strokeStyle = colors.bracket;
+    ctx.fillStyle = colors.bracketText;
+    ctx.lineWidth = 1.25;
+    ctx.font = labelFont;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    if (position === "top" || position === "bottom") {
+      const y = position === "top" ? node.y - node.h / 2 - pad : node.y + node.h / 2 + pad;
+      const armLen = 8;
+      const hw = node.w / 2;
+      ctx.beginPath();
+      ctx.moveTo(node.x - hw, y + (position === "top" ? armLen : -armLen));
+      ctx.lineTo(node.x - hw, y);
+      ctx.lineTo(node.x + hw, y);
+      ctx.lineTo(node.x + hw, y + (position === "top" ? armLen : -armLen));
+      ctx.stroke();
+      const textY = position === "top" ? y - 6 : y + 16;
+      ctx.fillText(label.toUpperCase(), node.x, textY);
+    } else {
+      const x = position === "left" ? node.x - node.w / 2 - pad : node.x + node.w / 2 + pad;
+      const armLen = 6;
+      const hh = node.h / 2;
+      ctx.beginPath();
+      ctx.moveTo(x + (position === "left" ? armLen : -armLen), node.y - hh);
+      ctx.lineTo(x, node.y - hh);
+      ctx.lineTo(x, node.y + hh);
+      ctx.lineTo(x + (position === "left" ? armLen : -armLen), node.y + hh);
+      ctx.stroke();
+      ctx.save();
+      ctx.translate(x + (position === "left" ? -14 : 14), node.y);
+      ctx.rotate(position === "left" ? -Math.PI / 2 : Math.PI / 2);
+      ctx.fillText(label.toUpperCase(), 0, 0);
+      ctx.restore();
+    }
+    ctx.restore();
+  }
+  function drawStackDepth(node) {
+    const depth = node.def.stackDepth ?? 6;
+    const offsetStep = 4;
+    for (let i = depth - 1; i >= 1; i--) {
+      const ox = i * offsetStep;
+      const oy = -i * offsetStep;
+      const alpha = 0.16 + (1 - i / depth) * 0.24;
+      const x = node.x - node.w / 2 + ox;
+      const y = node.y - node.h / 2 + oy;
+      const path = roundedRectPath(x, y, node.w, node.h, 12);
+      const fill = ctx.createLinearGradient(x, y, x, y + node.h);
+      fill.addColorStop(0, colors.nodeAlt + alphaHex(alpha));
+      fill.addColorStop(1, colors.node + alphaHex(alpha * 0.9));
+      ctx.fillStyle = fill;
+      ctx.strokeStyle = colors.connectionSoft + alphaHex(alpha);
+      ctx.lineWidth = 1.15;
+      ctx.fill(path);
+      ctx.stroke(path);
+    }
+    ctx.globalAlpha = 1;
+  }
+  function drawNetworkNeurons(node) {
+    const neuronCount = 5;
+    const r = 8;
+    const spacing = node.h / (neuronCount + 1);
+    ctx.save();
+    ctx.strokeStyle = colors.connectionSoft + alphaHex(0.55);
+    ctx.lineWidth = 1.35;
+    ctx.globalAlpha = 0.6;
+    const railOffset = 10;
+    ctx.beginPath();
+    ctx.moveTo(node.x - railOffset, node.y - node.h / 2 + 16);
+    ctx.lineTo(node.x - railOffset, node.y + node.h / 2 - 16);
+    ctx.moveTo(node.x + railOffset, node.y - node.h / 2 + 16);
+    ctx.lineTo(node.x + railOffset, node.y + node.h / 2 - 16);
+    ctx.stroke();
+    if (node.def.parentId) {
+      const parent = layoutMap.get(node.def.parentId);
+      if (parent) {
+        const parentCount = 5;
+        const parentSpacing = parent.h / (parentCount + 1);
+        for (let i = 1; i <= neuronCount; i++) {
+          const ny = node.y - node.h / 2 + i * spacing;
+          for (let j = 1; j <= parentCount; j++) {
+            if (Math.abs((i * 13 + j * 7) % 5) < 2) continue;
+            const py = parent.y - parent.h / 2 + j * parentSpacing;
+            const px = parent.x + parent.w / 2;
+            const strandAlpha = 0.28 + (1 - Math.abs(i - j) / neuronCount) * 0.26;
+            ctx.strokeStyle = colors.connectionSoft + alphaHex(strandAlpha);
+            ctx.lineWidth = 1.15;
+            ctx.beginPath();
+            ctx.moveTo(px, py);
+            ctx.lineTo(node.x - node.w / 2, ny);
+            ctx.stroke();
+          }
+        }
+      }
+    }
+    for (let i = 1; i <= neuronCount; i++) {
+      const ny = node.y - node.h / 2 + i * spacing;
+      const glow = ctx.createRadialGradient(node.x, ny, 0, node.x, ny, r * 2.5);
+      glow.addColorStop(0, colors.glow + alphaHex(0.18));
+      glow.addColorStop(1, colors.glow + "00");
+      ctx.fillStyle = glow;
+      ctx.beginPath();
+      ctx.arc(node.x, ny, r * 2.1, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(node.x, ny, r, 0, Math.PI * 2);
+      ctx.fillStyle = colors.nodeText;
+      ctx.globalAlpha = 0.1;
+      ctx.fill();
+      ctx.beginPath();
+      ctx.arc(node.x, ny, r - 1.5, 0, Math.PI * 2);
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = colors.nodeAlt;
+      ctx.fill();
+      ctx.strokeStyle = colors.connection + alphaHex(0.7);
+      ctx.lineWidth = 1.4;
+      ctx.stroke();
+    }
+    ctx.restore();
+  }
+  function drawGlow(node) {
+    if (glowIntensity <= 0 || node.glowAlpha <= 0) return;
+    const r = Math.max(node.w, node.h) * 0.95;
+    const grad2 = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, r);
+    grad2.addColorStop(0, colors.glow + alphaHex(glowIntensity * 0.65 * node.glowAlpha));
+    grad2.addColorStop(1, colors.glow + "00");
+    ctx.fillStyle = grad2;
+    ctx.globalAlpha = 1;
+    ctx.fillRect(node.x - r, node.y - r, r * 2, r * 2);
+  }
+  function renderCanvas() {
+    if (disposed) return;
+    const rect = container.getBoundingClientRect();
+    ctx.clearRect(0, 0, rect.width, rect.height);
+    ctx.save();
+    ctx.translate(rect.width / 2, rect.height / 2);
+    ctx.scale(zoomScale, zoomScale);
+    ctx.translate(-cWidth / 2, -cHeight / 2);
+    for (const gDef of groupDefs) {
+      const anyVisible = (gDef.children ?? []).some((id) => layoutMap.get(id)?.visible);
+      if (anyVisible) drawGroupEnclosure(gDef, 1);
+    }
+    for (const node of layoutMap.values()) {
+      if (!node.visible) continue;
+      if (node.def.type === "stack") drawStackDepth(node);
+    }
+    for (const node of layoutMap.values()) {
+      if (!node.visible) continue;
+      drawGlow(node);
+      if (node.glowAlpha > 0) node.glowAlpha = Math.max(0, node.glowAlpha - 8e-3);
+    }
+    for (const node of layoutMap.values()) {
+      if (!node.visible || !node.def.parentId) continue;
+      const parent = layoutMap.get(node.def.parentId);
+      if (parent?.visible) drawConnection(parent, node, 1);
+    }
+    for (const node of layoutMap.values()) {
+      if (!node.visible || node.def.type !== "network") continue;
+      drawNetworkNeurons(node);
+    }
+    for (const node of layoutMap.values()) {
+      if (!node.visible || !node.def.bracket) continue;
+      drawBracket(node, 1);
+    }
+    ctx.restore();
+    animId = requestAnimationFrame(renderCanvas);
+  }
+  function createSvgNode(node) {
+    const g = document.createElementNS(SVG_NS, "g");
+    const fillColor = node.def.color ?? colors.node;
+    const gradientId = `maestro-node-fill-${node.def.id}`;
+    const nodeGradient = createSvgEl("linearGradient", {
+      id: gradientId,
+      x1: "0%",
+      y1: "0%",
+      x2: "0%",
+      y2: "100%"
+    });
+    nodeGradient.appendChild(createSvgEl("stop", {
+      offset: "0%",
+      "stop-color": node.def.type === "io" ? colors.nodeAlt : node.def.type === "stack" ? colors.nodeHighlight + alphaHex(0.14) : fillColor
+    }));
+    nodeGradient.appendChild(createSvgEl("stop", {
+      offset: "100%",
+      "stop-color": node.def.type === "stack" ? colors.nodeAlt : colors.node
+    }));
+    defs.appendChild(nodeGradient);
+    g.setAttribute("filter", "url(#maestro-node-shadow)");
+    if (node.def.type === "diamond") {
+      const poly = createSvgEl("polygon");
+      const hw = node.w / 2;
+      const hh = node.h / 2;
+      poly.setAttribute("points", `${node.x},${node.y - hh} ${node.x + hw},${node.y} ${node.x},${node.y + hh} ${node.x - hw},${node.y}`);
+      poly.setAttribute("fill", `url(#${gradientId})`);
+      poly.setAttribute("stroke", colors.nodeBorder + alphaHex(0.7));
+      poly.setAttribute("stroke-width", "1.4");
+      g.appendChild(poly);
+    } else if (node.def.type === "network") {
+      const rect = createSvgEl("rect", {
+        x: String(node.x - node.w / 2),
+        y: String(node.y - node.h / 2),
+        width: String(node.w),
+        height: String(node.h),
+        rx: "16",
+        fill: `url(#${gradientId})`,
+        "fill-opacity": "0.96",
+        stroke: colors.connectionSoft + alphaHex(0.72),
+        "stroke-width": "1.6"
+      });
+      g.appendChild(rect);
+      const leftRail = createSvgEl("rect", {
+        x: String(node.x - node.w / 2 + 16),
+        y: String(node.y - node.h / 2 + 14),
+        width: "2",
+        height: String(node.h - 28),
+        rx: "1",
+        fill: colors.connectionSoft,
+        "fill-opacity": "0.5"
+      });
+      const rightRail = createSvgEl("rect", {
+        x: String(node.x + node.w / 2 - 18),
+        y: String(node.y - node.h / 2 + 14),
+        width: "2",
+        height: String(node.h - 28),
+        rx: "1",
+        fill: colors.connectionSoft,
+        "fill-opacity": "0.5"
+      });
+      g.appendChild(leftRail);
+      g.appendChild(rightRail);
+    } else {
+      const rx = node.def.type === "io" ? "28" : "14";
+      const rect = createSvgEl("rect", {
+        x: String(node.x - node.w / 2),
+        y: String(node.y - node.h / 2),
+        width: String(node.w),
+        height: String(node.h),
+        rx,
+        fill: `url(#${gradientId})`,
+        "fill-opacity": node.def.type === "io" ? "0.96" : "1",
+        stroke: colors.nodeBorder + alphaHex(node.def.type === "io" ? 0.85 : 0.65),
+        "stroke-width": node.def.type === "io" ? "1.6" : "1.4"
+      });
+      g.appendChild(rect);
+    }
+    if (node.def.type !== "diamond") {
+      const accentInset = 6;
+      const accentWidth = node.def.type === "io" ? 6 : node.def.type === "stack" ? 6 : 4;
+      const accent = createSvgEl("rect", {
+        x: String(node.x - node.w / 2 + accentInset),
+        y: String(node.y - node.h / 2 + accentInset),
+        width: String(accentWidth),
+        height: String(node.h - accentInset * 2),
+        rx: "3",
+        fill: node.def.type === "io" ? colors.connection : colors.nodeAccent,
+        "fill-opacity": node.def.type === "io" ? "1" : "0.9"
+      });
+      g.appendChild(accent);
+      const highlight = createSvgEl("rect", {
+        x: String(node.x - node.w / 2 + 10),
+        y: String(node.y - node.h / 2 + 8),
+        width: String(node.w - 20),
+        height: "1.5",
+        rx: "1",
+        fill: colors.nodeHighlight,
+        "fill-opacity": node.def.type === "stack" ? "0.14" : "0.08"
+      });
+      g.appendChild(highlight);
+    }
+    const { primary, secondary } = splitNodeLabel(node.def.label);
+    const subtitleLines = splitSubtitle(node.def.subtitle);
+    const textAnchor = node.def.type === "diamond" ? "middle" : "start";
+    const textX = node.def.type === "diamond" ? node.x : node.x - node.w / 2 + 18;
+    let textY = node.y - node.h / 2 + 18;
+    if (node.def.type !== "diamond") {
+      const eyebrow = createSvgEl("text", {
+        x: String(textX),
+        y: String(textY),
+        "text-anchor": textAnchor,
+        fill: colors.nodeMutedText,
+        "font-size": "8.5",
+        "font-family": "ui-sans-serif, system-ui, sans-serif",
+        "font-weight": "700",
+        "letter-spacing": "0.18em"
+      });
+      eyebrow.textContent = titleCaseType(node.def.type).toUpperCase();
+      g.appendChild(eyebrow);
+      textY += 16;
+    }
+    const primaryText = createSvgEl("text", {
+      x: String(textX),
+      y: String(textY),
+      "text-anchor": textAnchor,
+      fill: colors.nodeText,
+      "font-size": node.def.type === "diamond" ? "12.5" : "13",
+      "font-family": "ui-sans-serif, system-ui, sans-serif",
+      "font-weight": "600",
+      "letter-spacing": "0.01em"
+    });
+    primaryText.textContent = primary;
+    g.appendChild(primaryText);
+    textY += 16;
+    for (const line of secondary) {
+      const t = createSvgEl("text", {
+        x: String(textX),
+        y: String(textY),
+        "text-anchor": textAnchor,
+        fill: colors.nodeSubtext,
+        "font-size": "10.5",
+        "font-family": "ui-sans-serif, system-ui, sans-serif",
+        "font-weight": "500"
+      });
+      t.textContent = line;
+      g.appendChild(t);
+      textY += 13;
+    }
+    for (const line of subtitleLines) {
+      const t = createSvgEl("text", {
+        x: String(textX),
+        y: String(textY),
+        "text-anchor": textAnchor,
+        fill: colors.nodeMutedText,
+        "font-size": "9",
+        "font-family": "ui-sans-serif, system-ui, sans-serif",
+        "font-weight": "500"
+      });
+      t.textContent = line;
+      g.appendChild(t);
+      textY += 11.5;
+    }
+    g.style.opacity = "0";
+    g.style.transformOrigin = `${node.x}px ${node.y}px`;
+    g.style.transform = "translateY(6px) scale(0.97)";
+    g.style.transition = "opacity 360ms ease-out, transform 360ms ease-out";
+    if (interactive) {
+      g.style.cursor = "pointer";
+      g.style.pointerEvents = "all";
+    }
+    svgGroup.appendChild(g);
+    node.svgGroup = g;
+    requestAnimationFrame(() => {
+      g.style.opacity = "1";
+      g.style.transform = "translateY(0) scale(1)";
+    });
+  }
+  function revealNode(node) {
+    if (node.visible || disposed) return;
+    node.visible = true;
+    node.glowAlpha = 1;
+    createSvgNode(node);
+    onNodeDrawn?.(node.def.id);
+  }
+  const orderedNodes = [...layoutMap.values()].sort((a, b) => a.depth - b.depth || 0);
+  let audioListenerAdded = false;
+  function onTimeUpdate() {
+    if (disposed || !audioElement) return;
+    const t = audioElement.currentTime;
+    for (const node of orderedNodes) {
+      if (!node.visible && node.def.audioTimestamp !== void 0 && t >= node.def.audioTimestamp) {
+        revealNode(node);
+      }
+    }
+  }
+  function onSeeked() {
+    if (disposed || !audioElement) return;
+    const t = audioElement.currentTime;
+    for (const node of orderedNodes) {
+      if (!node.visible && node.def.audioTimestamp !== void 0 && t >= node.def.audioTimestamp) {
+        node.visible = true;
+        node.glowAlpha = 0;
+        if (!node.svgGroup) createSvgNode(node);
+        if (node.svgGroup) {
+          node.svgGroup.style.transition = "none";
+          node.svgGroup.style.opacity = "1";
+          node.svgGroup.style.transform = "scale(1)";
+        }
+      }
+    }
+  }
+  if (audioElement) {
+    audioElement.addEventListener("timeupdate", onTimeUpdate);
+    audioElement.addEventListener("seeked", onSeeked);
+    audioListenerAdded = true;
+  } else if (scrollFallback) {
+    let setupScrollFallback2 = function() {
+      const totalScrollH = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
+      const nodeCount = orderedNodes.length;
+      let lastDrawnIndex = -1;
+      scrollHandler = () => {
+        if (disposed) return;
+        const progress = clamp(window.scrollY / totalScrollH, 0, 1);
+        const targetIndex = Math.floor(progress * nodeCount);
+        for (let i = lastDrawnIndex + 1; i <= targetIndex && i < nodeCount; i++) {
+          revealNode(orderedNodes[i]);
+          lastDrawnIndex = i;
+        }
+      };
+      window.addEventListener("scroll", scrollHandler, { passive: true });
+    };
+    var setupScrollFallback = setupScrollFallback2;
+    let scrollHandler = null;
+    setupScrollFallback2();
+  } else {
+    orderedNodes.forEach((node, i) => {
+      const timer = setTimeout(() => {
+        if (disposed) return;
+        revealNode(node);
+      }, i * drawSpeed);
+      timers.push(timer);
+    });
+  }
+  animId = requestAnimationFrame(renderCanvas);
+  function drawAll() {
+    for (const node of orderedNodes) {
+      if (!node.visible) {
+        node.visible = true;
+        node.glowAlpha = 0;
+        if (!node.svgGroup) {
+          createSvgNode(node);
+        }
+        const g = node.svgGroup;
+        if (g) {
+          g.style.transition = "none";
+          g.style.opacity = "1";
+          g.style.transform = "scale(1)";
+        }
+      }
+    }
+  }
+  const cleanup = () => {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(animId);
+    for (const t of timers) clearTimeout(t);
+    ro.disconnect();
+    if (audioListenerAdded && audioElement) {
+      audioElement.removeEventListener("timeupdate", onTimeUpdate);
+      audioElement.removeEventListener("seeked", onSeeked);
+    }
+    canvas.remove();
+    svg.remove();
+  };
+  cleanup.drawAll = drawAll;
+  return cleanup;
+}
+
+// src/horizontal-scroll.ts
+function createHorizontalScroll(options) {
+  const {
+    container,
+    panels: panelsOpt = ".panel",
+    lerp: lerpFactor = 0.08,
+    snap = true,
+    snapThreshold = 0.5,
+    onProgress,
+    mobileBreakpoint = 768,
+    keyboard = true
+  } = options;
+  let disposed = false;
+  let animId = 0;
+  let isMobile = false;
+  const panels = typeof panelsOpt === "string" ? Array.from(container.querySelectorAll(panelsOpt)) : panelsOpt;
+  const panelCount = panels.length;
+  if (panelCount === 0) return () => {
+  };
+  let targetScroll = 0;
+  let currentScroll = 0;
+  let velocity = 0;
+  let prevScroll = 0;
+  const spacer = document.createElement("div");
+  spacer.style.cssText = "width:1px;pointer-events:none;";
+  function measureLayout() {
+    const header = document.querySelector("header, [data-maestro-header]");
+    const footer = document.querySelector("footer, [data-maestro-footer]");
+    const headerH = header ? header.getBoundingClientRect().height : 0;
+    const footerH = footer ? footer.getBoundingClientRect().height : 0;
+    document.documentElement.style.setProperty("--maestro-header-h", `${headerH}px`);
+    document.documentElement.style.setProperty("--maestro-footer-h", `${footerH}px`);
+  }
+  function setupDesktop() {
+    measureLayout();
+    const vw = window.innerWidth;
+    const totalWidth = panelCount * vw;
+    spacer.style.height = `${totalWidth}px`;
+    document.body.appendChild(spacer);
+    container.style.position = "fixed";
+    container.style.top = "var(--maestro-header-h, 0px)";
+    container.style.left = "0";
+    container.style.width = "100%";
+    container.style.height = `calc(100vh - var(--maestro-header-h, 0px) - var(--maestro-footer-h, 0px))`;
+    container.style.overflow = "hidden";
+    container.style.display = "flex";
+    container.style.flexWrap = "nowrap";
+  }
+  function teardownDesktop() {
+    spacer.remove();
+    container.style.position = "";
+    container.style.top = "";
+    container.style.left = "";
+    container.style.width = "";
+    container.style.height = "";
+    container.style.overflow = "";
+    container.style.display = "";
+    container.style.flexWrap = "";
+    container.style.transform = "";
+  }
+  function setupMobile() {
+    teardownDesktop();
+    container.style.display = "flex";
+    container.style.flexDirection = "column";
+  }
+  let mobileObserver = null;
+  function setupMobileObserver() {
+    mobileObserver = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const idx = panels.indexOf(entry.target);
+          if (idx !== -1) {
+            onProgress?.(idx, entry.intersectionRatio);
+          }
+        }
+      },
+      { threshold: Array.from({ length: 20 }, (_, i) => i / 19) }
+    );
+    for (const p of panels) mobileObserver.observe(p);
+  }
+  function handleResize() {
+    const wasMobile = isMobile;
+    isMobile = window.innerWidth < mobileBreakpoint;
+    if (isMobile && !wasMobile) {
+      cancelAnimationFrame(animId);
+      setupMobile();
+      setupMobileObserver();
+    } else if (!isMobile && wasMobile) {
+      mobileObserver?.disconnect();
+      mobileObserver = null;
+      setupDesktop();
+      tick();
+    } else if (!isMobile) {
+      const vw = window.innerWidth;
+      spacer.style.height = `${panelCount * vw}px`;
+      measureLayout();
+    }
+  }
+  function handleScroll() {
+    if (isMobile || disposed) return;
+    targetScroll = window.scrollY;
+  }
+  function handleKeydown(e) {
+    if (!keyboard || isMobile || disposed) return;
+    const vw = window.innerWidth;
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      targetScroll = Math.min(targetScroll + vw, (panelCount - 1) * vw);
+      window.scrollTo(0, targetScroll);
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      targetScroll = Math.max(targetScroll - vw, 0);
+      window.scrollTo(0, targetScroll);
+    }
+  }
+  function tick() {
+    if (disposed || isMobile) return;
+    prevScroll = currentScroll;
+    currentScroll = lerp(currentScroll, targetScroll, lerpFactor);
+    velocity = Math.abs(currentScroll - prevScroll);
+    if (snap && velocity < snapThreshold && velocity > 0.01) {
+      const vw = window.innerWidth;
+      const nearestPanel = Math.round(currentScroll / vw);
+      targetScroll = nearestPanel * vw;
+    }
+    container.style.transform = `translateX(${-currentScroll}px)`;
+    if (onProgress) {
+      const vw = window.innerWidth;
+      const panelIndex = Math.floor(currentScroll / vw);
+      const localProgress = clamp(currentScroll / vw - panelIndex, 0, 1);
+      onProgress(clamp(panelIndex, 0, panelCount - 1), localProgress);
+    }
+    animId = requestAnimationFrame(tick);
+  }
+  isMobile = window.innerWidth < mobileBreakpoint;
+  if (isMobile) {
+    setupMobile();
+    setupMobileObserver();
+  } else {
+    setupDesktop();
+    animId = requestAnimationFrame(tick);
+  }
+  window.addEventListener("scroll", handleScroll, { passive: true });
+  window.addEventListener("resize", handleResize);
+  window.addEventListener("keydown", handleKeydown);
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    cancelAnimationFrame(animId);
+    window.removeEventListener("scroll", handleScroll);
+    window.removeEventListener("resize", handleResize);
+    window.removeEventListener("keydown", handleKeydown);
+    mobileObserver?.disconnect();
+    teardownDesktop();
+    document.documentElement.style.removeProperty("--maestro-header-h");
+    document.documentElement.style.removeProperty("--maestro-footer-h");
+  };
+}
+
+// src/annotation.ts
+var SVG_NS2 = "http://www.w3.org/2000/svg";
+function createAnnotationHighlight(options) {
+  const {
+    target,
+    style = "underline",
+    color = "#D97706",
+    wobble = 0.3,
+    strokeWidth = 2.5,
+    duration = 600,
+    delay = 0,
+    trigger = "scroll",
+    scrollOffset = 0.3
+  } = options;
+  let disposed = false;
+  let observer = null;
+  let animated = false;
+  const seed = hashString(target.textContent ?? "" + target.offsetLeft);
+  const rng = seededRandom(seed);
+  const svg = document.createElementNS(SVG_NS2, "svg");
+  svg.style.cssText = "position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:1;";
+  target.style.position = "relative";
+  target.appendChild(svg);
+  function wobbleOffset() {
+    return (rng() - 0.5) * wobble * 12;
+  }
+  function getRect() {
+    return target.getBoundingClientRect();
+  }
+  function createPath() {
+    const rect = getRect();
+    const w = rect.width;
+    const h = rect.height;
+    if (style === "underline") {
+      const path2 = document.createElementNS(SVG_NS2, "path");
+      const y = h + 4;
+      const cp1y = y + wobbleOffset();
+      const cp2y = y + wobbleOffset();
+      const d2 = `M 0 ${y + wobbleOffset()} Q ${w * 0.3} ${cp1y}, ${w * 0.5} ${y + wobbleOffset()} Q ${w * 0.7} ${cp2y}, ${w} ${y + wobbleOffset()}`;
+      path2.setAttribute("d", d2);
+      path2.setAttribute("fill", "none");
+      path2.setAttribute("stroke", color);
+      path2.setAttribute("stroke-width", String(strokeWidth));
+      path2.setAttribute("stroke-linecap", "round");
+      return path2;
+    }
+    if (style === "highlight") {
+      const rectEl = document.createElementNS(SVG_NS2, "rect");
+      const pad = 2;
+      rectEl.setAttribute("x", String(-pad + wobbleOffset() * 0.3));
+      rectEl.setAttribute("y", String(-pad + wobbleOffset() * 0.3));
+      rectEl.setAttribute("width", String(w + pad * 2 + wobbleOffset() * 0.2));
+      rectEl.setAttribute("height", String(h + pad * 2 + wobbleOffset() * 0.2));
+      rectEl.setAttribute("rx", String(3 + Math.abs(wobbleOffset() * 0.5)));
+      rectEl.setAttribute("fill", color);
+      rectEl.setAttribute("opacity", "0.2");
+      return rectEl;
+    }
+    if (style === "circle") {
+      const pad = 12;
+      const cx = w / 2;
+      const cy = h / 2;
+      const rx = w / 2 + pad;
+      const ry = h / 2 + pad;
+      const path2 = document.createElementNS(SVG_NS2, "path");
+      let d2 = "";
+      for (let stroke = 0; stroke < 2; stroke++) {
+        const segments = 8;
+        for (let i = 0; i <= segments; i++) {
+          const angle = i / segments * Math.PI * 2;
+          const x = cx + (rx + wobbleOffset()) * Math.cos(angle);
+          const y = cy + (ry + wobbleOffset()) * Math.sin(angle);
+          d2 += i === 0 && stroke === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
+        }
+      }
+      path2.setAttribute("d", d2);
+      path2.setAttribute("fill", "none");
+      path2.setAttribute("stroke", color);
+      path2.setAttribute("stroke-width", String(strokeWidth));
+      path2.setAttribute("stroke-linecap", "round");
+      path2.setAttribute("stroke-linejoin", "round");
+      return path2;
+    }
+    const path = document.createElementNS(SVG_NS2, "path");
+    const bx = -10;
+    const midY = h / 2;
+    const d = `M ${bx + 6 + wobbleOffset()} ${wobbleOffset()} Q ${bx + wobbleOffset()} ${wobbleOffset()}, ${bx + wobbleOffset()} ${midY * 0.3} L ${bx + wobbleOffset()} ${midY - 5} Q ${bx - 4 + wobbleOffset()} ${midY}, ${bx + wobbleOffset()} ${midY + 5} L ${bx + wobbleOffset()} ${h * 0.7} Q ${bx + wobbleOffset()} ${h}, ${bx + 6 + wobbleOffset()} ${h + wobbleOffset()}`;
+    path.setAttribute("d", d);
+    path.setAttribute("fill", "none");
+    path.setAttribute("stroke", color);
+    path.setAttribute("stroke-width", String(strokeWidth));
+    path.setAttribute("stroke-linecap", "round");
+    return path;
+  }
+  function animate() {
+    if (animated || disposed) return;
+    animated = true;
+    const el = createPath();
+    svg.appendChild(el);
+    if (style === "highlight") {
+      el.style.opacity = "0";
+      el.style.transition = `opacity ${duration}ms ease-out ${delay}ms`;
+      requestAnimationFrame(() => {
+        el.style.opacity = "0.2";
+      });
+      return;
+    }
+    if (el instanceof SVGGeometryElement) {
+      const length = el.getTotalLength();
+      el.setAttribute("stroke-dasharray", String(length));
+      el.setAttribute("stroke-dashoffset", String(length));
+      el.style.transition = `stroke-dashoffset ${duration}ms ease-out ${delay}ms`;
+      requestAnimationFrame(() => {
+        el.setAttribute("stroke-dashoffset", "0");
+      });
+    }
+  }
+  if (trigger === "immediate") {
+    requestAnimationFrame(animate);
+  } else if (trigger === "hover") {
+    const onEnter = () => {
+      animate();
+      target.removeEventListener("mouseenter", onEnter);
+    };
+    target.addEventListener("mouseenter", onEnter);
+  } else {
+    observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            animate();
+            observer?.disconnect();
+          }
+        }
+      },
+      { rootMargin: `0px 0px -${Math.round(scrollOffset * 100)}% 0px` }
+    );
+    observer.observe(target);
+  }
+  return () => {
+    if (disposed) return;
+    disposed = true;
+    observer?.disconnect();
+    svg.remove();
+  };
+}
+function hashString(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    const ch = str.charCodeAt(i);
+    hash = (hash << 5) - hash + ch | 0;
+  }
+  return Math.abs(hash);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clamp,
+  createAnnotationHighlight,
+  createDiagramDrawer,
+  createHorizontalScroll,
+  createScrollOrganizer,
+  createWaveformVisualizer,
+  ease,
+  lerp
+});