@pauloricca/spagbol 0.1.0 → 0.1.3

package/src/react/SpagbolCurveEditor.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState, type ReactNode, type PointerEvent, type MouseEvent } from 'react';
+
+/** Normalized view coordinates, not a serialized curve or runtime data model. */
+export interface SpagbolCurveEditorPoint { x: number; y: number; locked?: boolean }
+export interface SpagbolCurveEditorProps {
+  /** x: 0..1, y: -1..1. The host projects its data into these view coordinates. */
+  points: readonly SpagbolCurveEditorPoint[];
+  backgroundCurves?: readonly { points: readonly SpagbolCurveEditorPoint[]; className?: string }[];
+  className?: string;
+  pathClassName?: string;
+  ariaLabel?: string;
+  /** Actual on-screen size, including canvas zoom, for constant-sized hit targets. */
+  displaySize: { width: number; height: number };
+  screenEmphasis?: number;
+  pointScale?: number;
+  minPointSpacing?: number;
+  formatValue?: (normalizedValue: number) => string;
+  toolbar?: ReactNode;
+  underlay?: ReactNode;
+  /** SVG children in the fixed 300 × 128 viewBox; decorative, without pointer events. */
+  overlay?: ReactNode;
+  footer?: ReactNode;
+  /** Apply an insertion in host data and return the new point's index, or null to reject. */
+  onInsertPoint: (point: { x: number; y: number }) => number | null;
+  onMovePoint: (index: number, point: { x: number; y: number }) => void;
+  onRemovePoint: (index: number) => void;
+  onGestureEnd?: () => void;
+}
+
+const width = 300, height = 128, padding = 12;
+const innerWidth = width - padding * 2, innerHeight = height - padding * 2;
+const clamp = (n: number, low: number, high: number) => Math.max(low, Math.min(high, n));
+const screenPoint = (point: { x: number; y: number }) => ({ x: padding + point.x * innerWidth, y: padding + (1 - (point.y + 1) / 2) * innerHeight });
+function path(points: readonly SpagbolCurveEditorPoint[]) {
+  return points.map((point, index) => {
+    const p = screenPoint(point);
+    // Preserve Teia's two-decimal SVG path precision.
+    return `${index ? 'L' : 'M'}${Math.round(p.x * 100) / 100} ${Math.round(p.y * 100) / 100}`;
+  }).join(' ');
+}
+
+export function SpagbolCurveEditor({
+  points, backgroundCurves = [], className = '', pathClassName = '', ariaLabel = 'Curve editor',
+  displaySize, screenEmphasis = 1, pointScale = 1, minPointSpacing = 0.001,
+  formatValue = (value) => String(Math.round(value * 1000) / 1000),
+  toolbar, underlay, overlay, footer, onInsertPoint, onMovePoint, onRemovePoint, onGestureEnd,
+}: SpagbolCurveEditorProps) {
+  const editorRef = useRef<SVGSVGElement | null>(null);
+  const dragRef = useRef<{ pointerId: number; index: number } | null>(null);
+  const removedByPress = useRef(false);
+  const clickRef = useRef<{ index: number | null; time: number }>({ index: null, time: 0 });
+  const [activePoint, setActivePoint] = useState<number | null>(null);
+  const [hoveredPoint, setHoveredPoint] = useState<number | null>(null);
+  const latest = useRef({ points, onMovePoint, onGestureEnd });
+  latest.current = { points, onMovePoint, onGestureEnd };
+
+  function fromPointer(event: { clientX: number; clientY: number }) {
+    const rect = editorRef.current?.getBoundingClientRect();
+    if (!rect || rect.width <= 0 || rect.height <= 0) return null;
+    const x = clamp((event.clientX - rect.left) / rect.width * width, padding, width - padding);
+    const y = clamp((event.clientY - rect.top) / rect.height * height, padding, height - padding);
+    return { x: (x - padding) / innerWidth, y: (1 - (y - padding) / innerHeight) * 2 - 1 };
+  }
+  useEffect(() => {
+    const move = (event: globalThis.PointerEvent) => {
+      const drag = dragRef.current;
+      if (!drag || drag.pointerId !== event.pointerId) return;
+      const current = latest.current.points;
+      const selected = current[drag.index];
+      if (!selected || selected.locked) return;
+      event.preventDefault();
+      const point = fromPointer(event);
+      if (!point) return;
+      const low = drag.index === 0 ? 0 : (current[drag.index - 1]?.x ?? 0) + minPointSpacing;
+      const high = drag.index === current.length - 1 ? 1 : (current[drag.index + 1]?.x ?? 1) - minPointSpacing;
+      // A host may reject a move; never cross adjacent point positions.
+      if (low > high) return;
+      latest.current.onMovePoint(drag.index, { x: clamp(point.x, low, high), y: point.y });
+    };
+    const stop = (event: globalThis.PointerEvent) => {
+      if (dragRef.current?.pointerId !== event.pointerId) return;
+      dragRef.current = null;
+      setActivePoint(null);
+      latest.current.onGestureEnd?.();
+    };
+    window.addEventListener('pointermove', move, { passive: false });
+    window.addEventListener('pointerup', stop);
+    window.addEventListener('pointercancel', stop);
+    return () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', stop);
+      window.removeEventListener('pointercancel', stop);
+    };
+  }, [minPointSpacing]);
+
+  const hitIndex = (target: EventTarget) => {
+    const element = target instanceof Element ? target.closest<SVGElement>('[data-spagbol-curve-point]') : null;
+    return element ? Number(element.dataset.spagbolCurvePoint) : null;
+  };
+  const remove = (index: number) => {
+    if (!points[index] || points[index].locked) return;
+    if (dragRef.current) onGestureEnd?.();
+    dragRef.current = null;
+    setActivePoint(null);
+    onRemovePoint(index);
+  };
+  const pointerDown = (event: PointerEvent<SVGSVGElement>) => {
+    if (event.button !== 0 || dragRef.current) return;
+    event.preventDefault(); event.stopPropagation();
+    removedByPress.current = false;
+    const index = hitIndex(event.target);
+    if (index !== null && Number.isInteger(index)) {
+      const now = performance.now();
+      if (clickRef.current.index === index && now - clickRef.current.time < 360 && !points[index]?.locked) {
+        clickRef.current = { index: null, time: 0 }; removedByPress.current = true; remove(index); return;
+      }
+      clickRef.current = { index, time: now };
+      if (!points[index] || points[index].locked) return;
+      dragRef.current = { pointerId: event.pointerId, index };
+      setActivePoint(index); event.currentTarget.setPointerCapture(event.pointerId); return;
+    }
+    const point = fromPointer(event);
+    if (!point) return;
+    clickRef.current = { index: null, time: 0 };
+    const insertedIndex = onInsertPoint(point);
+    if (insertedIndex === null) return;
+    dragRef.current = { pointerId: event.pointerId, index: insertedIndex };
+    setActivePoint(insertedIndex); event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const doubleClick = (event: MouseEvent<SVGSVGElement>) => {
+    event.preventDefault(); event.stopPropagation();
+    if (removedByPress.current) { removedByPress.current = false; return; }
+    const index = hitIndex(event.target);
+    if (index !== null) remove(index);
+  };
+  const radius = (pixels: number) => ({ rx: pixels / Math.max(0.001, displaySize.width / width), ry: pixels / Math.max(0.001, displaySize.height / height) });
+  const hitRadius = radius(15 * screenEmphasis);
+  const endpointRadius = radius(5 * screenEmphasis * pointScale);
+  const handleRadius = radius(6 * screenEmphasis * pointScale);
+  const valuePoint = points[activePoint ?? hoveredPoint ?? -1];
+  const valueScreen = valuePoint && screenPoint(valuePoint);
+  return <div className={`spagbol-curve-editor ${className} nodrag nopan`}>
+    <div className="spagbol-curve-editor-chart">
+      {toolbar}{underlay}
+      <svg ref={editorRef} className="spagbol-curve-editor-canvas" viewBox="0 0 300 128" preserveAspectRatio="none" aria-label={ariaLabel} role="img" onPointerDown={pointerDown} onDoubleClick={doubleClick}
+        onLostPointerCapture={(event) => {
+          if (dragRef.current?.pointerId === event.pointerId) { dragRef.current = null; setActivePoint(null); onGestureEnd?.(); }
+        }}>
+        <g className="spagbol-curve-editor-chrome">
+          {backgroundCurves.map((curve, index) => <path key={index} className={`spagbol-curve-editor-path is-background ${curve.className ?? ''}`} d={path(curve.points)} />)}
+          <path className={`spagbol-curve-editor-path ${pathClassName}`} d={path(points)} />
+          {overlay}
+        </g>
+        {points.map((point, index) => {
+          const screen = screenPoint(point);
+          return <g key={index} onPointerEnter={() => setHoveredPoint(index)} onPointerLeave={() => setHoveredPoint((current) => current === index ? null : current)}>
+            <ellipse className={`spagbol-curve-editor-hit-target ${point.locked ? 'is-locked' : ''}`} data-spagbol-curve-point={index} cx={screen.x} cy={screen.y} {...hitRadius} />
+            <ellipse className={`spagbol-curve-editor-handle ${point.locked ? 'spagbol-curve-editor-endpoint is-locked' : ''}`} data-spagbol-curve-point={index} cx={screen.x} cy={screen.y} {...(point.locked ? endpointRadius : handleRadius)} />
+          </g>;
+        })}
+      </svg>
+      {valuePoint && valueScreen ? <span className={`spagbol-curve-editor-value-label ${valuePoint.x > 0.72 ? 'is-left' : ''} ${valuePoint.y > 0.72 ? 'is-below' : ''}`} style={{ left: `${valueScreen.x / width * 100}%`, top: `${valueScreen.y / height * 100}%` }} aria-hidden="true">{formatValue(valuePoint.y)}</span> : null}
+    </div>
+    {footer}
+  </div>;
+}

package/src/react/SpagbolNodeFrame.tsx

@@ -39,15 +39,16 @@ export interface SpagbolNodePortProps {
 /** Also usable in a completely custom node renderer. */
 export function SpagbolNodePort({ port, connectable = true, style, position, className }: SpagbolNodePortProps) {
   const { editor } = useSpagbol();
-  const selection = useEditorSelector(editor, snapshot => snapshot.selection);
   const mode = useEditorSelector(editor, snapshot => snapshot.mode);
   const flowId = useNodeId();
-  const selectedLink = mode === 'edit' && selection.linkIds.length === 1
-    ? editor.graph.links.find(link => link.id === selection.linkIds[0]) : undefined;
   const nodeId = flowId?.startsWith('node:') ? flowId.slice(5) : undefined;
-  const reconnecting = selectedLink && (port.direction === 'output'
-    ? selectedLink.source.nodeId === nodeId && selectedLink.source.portId === port.id
-    : selectedLink.target.type === 'port' && selectedLink.target.nodeId === nodeId && selectedLink.target.portId === port.id);
+  const reconnecting = useEditorSelector(editor, snapshot => {
+    if (snapshot.mode !== 'edit' || snapshot.selection.linkIds.length !== 1) return false;
+    const link = graphAt(snapshot.document, snapshot.path).links.find(link => link.id === snapshot.selection.linkIds[0]);
+    return !!link && (port.direction === 'output'
+      ? link.source.nodeId === nodeId && link.source.portId === port.id
+      : link.target.type === 'port' && link.target.nodeId === nodeId && link.target.portId === port.id);
+  });
   const direction = port.direction;
   return (
     <Handle
@@ -56,7 +57,7 @@ export function SpagbolNodePort({ port, connectable = true, style, position, cla
       position={position ?? (direction === "input" ? Position.Left : Position.Right)}
       className={`spagbol-node-port${reconnecting ? ' spagbol-node-port-selected-link' : ''} ${className ?? ""}`}
       isConnectable={
-        editor.editing && port.connectable !== false && connectable
+        mode === "edit" && port.connectable !== false && connectable
       }
       style={style}
       aria-label={`${port.label} ${direction}`}
@@ -85,7 +86,8 @@ export function SpagbolNodeFrame(props: SpagbolNodeFrameProps) {
   const [pointerOver, setPointerOver] = useState(false);
   const updateInternals = useUpdateNodeInternals();
   const flowId = useNodeId();
-  const selection = useEditorSelector(editor, snapshot => snapshot.selection);
+  const singleSelected = useEditorSelector(editor, snapshot => snapshot.selection.nodeIds.length === 1 && snapshot.selection.nodeIds[0] === node.id);
+  const selectedPortId = useEditorSelector(editor, snapshot => snapshot.selection.port?.nodeId === node.id ? snapshot.selection.port.portId : undefined);
   const mode = useEditorSelector(editor, snapshot => snapshot.mode);
   const path = useEditorSelector(editor, snapshot => snapshot.path);
   const boundary = isGroupBoundary(node);
@@ -93,7 +95,7 @@ export function SpagbolNodeFrame(props: SpagbolNodeFrameProps) {
   const ports = portsFor(node, editor.nodes);
   const inputPorts = ports.filter((port) => port.direction === "input" && props.portVisible?.(port) !== false);
   const outputPorts = ports.filter((port) => port.direction === "output" && props.portVisible?.(port) !== false);
-  const compact = !projected && views[node.kind]?.compact !== false && features.compact && (props.forceCompact || node.compact) && !(selected && selection.nodeIds.length === 1) && !(connecting && pointerOver);
+  const compact = !projected && views[node.kind]?.compact !== false && features.compact && (props.forceCompact || node.compact) && !(selected && singleSelected) && !(connecting && pointerOver);
   const headerInput = !boundary ? inputPorts.find(port => port.label === 'signal') : undefined;
   const headerOutput = !boundary && props.headerOutput !== false ? outputPorts.find(port => port.label === 'signal') ?? (outputPorts.length === 1 ? outputPorts[0] : undefined) : undefined;
   const portState = useEditorSelector(editor, snapshot => graphPortStates(graphAt(snapshot.document, snapshot.path)).get(node.id) ?? emptyPortState);
@@ -140,7 +142,7 @@ export function SpagbolNodeFrame(props: SpagbolNodeFrameProps) {
         style={{ gridColumn: boundary || input || inputPorts.length === 0 ? 1 : 2, gridRow: index + 1 + (props.portsHeader ? 1 : 0) }}
       >
         {!projected && !props.hidePorts && <SpagbolNodePort port={port} />}
-        {props.renderPortContent ? props.renderPortContent(port) : <>{boundary && !projected ? <SpagbolNodeGroupPort name={port.label} editable={editor.editing && !props.readOnly} draggable={editor.editing && !props.readOnly} selected={selection.port?.nodeId === node.id && selection.port.portId === port.id} onChange={label => { try { editor.renameBoundaryPort(node.id, port.id, label); } catch { /* Keep the valid label. */ } }} onPointerDown={event => {
+        {props.renderPortContent ? props.renderPortContent(port) : <>{boundary && !projected ? <SpagbolNodeGroupPort name={port.label} editable={editor.editing && !props.readOnly} draggable={editor.editing && !props.readOnly} selected={selectedPortId === port.id} onChange={label => { try { editor.renameBoundaryPort(node.id, port.id, label); } catch { /* Keep the valid label. */ } }} onPointerDown={event => {
           if (!editor.editing || props.readOnly || event.button !== 0) return;
           event.preventDefault(); event.stopPropagation();
           editor.select({ nodeIds: [node.id], port: { nodeId: node.id, portId: port.id, direction: port.direction } });
@@ -203,32 +205,37 @@ export function SpagbolNodeFrame(props: SpagbolNodeFrameProps) {
         <span className="spagbol-node-frame-title">
           {props.title ?? <SpagbolNodeFrameTypePicker node={node} compact={!!compact} selected={selected} disabled={projected || props.readOnly || !editor.editing} />}
         </span>
-        {!projected && <button className="spagbol-node-frame-enabled" type="button" aria-label={node.enabled === false ? 'Enable node' : 'Disable node'} title={node.enabled === false ? 'Enable node' : 'Disable node'} aria-pressed={node.enabled !== false} disabled={!editor.editing || props.readOnly} onPointerDown={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onClick={event => { event.preventDefault(); event.stopPropagation(); editor.updateNode(node.id, { enabled: node.enabled === false }, 'structure'); }}><span className="spagbol-node-frame-enabled-icon" aria-hidden="true" /></button>}
-        {!projected && features.compact && !props.forceCompact && view?.compact !== false && (
+        {!projected && node.graph && features.nestedGraphs && (
           <button
-            className="spagbol-node-frame-header-button nodrag nopan"
-            aria-label={node.compact ? "Expand ports" : "Compact ports"}
-            title={node.compact ? "Expand ports" : "Compact ports"}
-            disabled={!editor.editing}
+            className="spagbol-node-frame-header-button spagbol-node-frame-enter nodrag nopan"
+            type="button"
+            onPointerDown={event => event.stopPropagation()}
+            onDoubleClick={event => event.stopPropagation()}
+            aria-label="Enter nested graph"
+            title="Enter nested graph"
             onClick={(event) => {
               event.stopPropagation();
-              editor.updateNode(node.id, { compact: !node.compact }, "layout");
+              editor.enter(node.id);
             }}
           >
-            {node.compact ? "+" : "−"}
+            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" focusable="false">
+              <path d="m9 6 6 6-6 6" />
+            </svg>
           </button>
         )}
-        {!projected && node.graph && features.nestedGraphs && (
+        {!projected && <button className="spagbol-node-frame-enabled" type="button" aria-label={node.enabled === false ? 'Enable node' : 'Disable node'} title={node.enabled === false ? 'Enable node' : 'Disable node'} aria-pressed={node.enabled !== false} disabled={!editor.editing || props.readOnly} onPointerDown={event => event.stopPropagation()} onDoubleClick={event => event.stopPropagation()} onClick={event => { event.preventDefault(); event.stopPropagation(); editor.updateNode(node.id, { enabled: node.enabled === false }, 'structure'); }}><span className="spagbol-node-frame-enabled-icon" aria-hidden="true" /></button>}
+        {!projected && features.compact && !props.forceCompact && view?.compact !== false && (
           <button
             className="spagbol-node-frame-header-button nodrag nopan"
-            aria-label="Enter nested graph"
-            title="Enter nested graph"
+            aria-label={node.compact ? "Expand ports" : "Compact ports"}
+            title={node.compact ? "Expand ports" : "Compact ports"}
+            disabled={!editor.editing}
             onClick={(event) => {
               event.stopPropagation();
-              editor.enter(node.id);
+              editor.updateNode(node.id, { compact: !node.compact }, "layout");
             }}
           >
-            ↳
+            {node.compact ? "+" : "−"}
           </button>
         )}
       </div>
@@ -274,7 +281,6 @@ export function useNodeViewProps(
   const { editor, projection } = useSpagbol();
   const owner = projection?.groupId ?? groupId;
   const controlPath = projection?.path ?? [node.id];
-  const selection = useEditorSelector(editor, snapshot => snapshot.selection);
   const mode = useEditorSelector(editor, snapshot => snapshot.mode);
   const path = useEditorSelector(editor, snapshot => snapshot.path);
   return useMemo(

package/src/react/SpagbolNodeFrameTypePicker.tsx

@@ -14,7 +14,7 @@ export function SpagbolNodeFrameTypePicker({ node, compact, selected, disabled }
   const [highlight, setHighlight] = useState(0);
   const input = useRef<HTMLInputElement>(null);
   const menu = useRef<HTMLDivElement>(null);
-  const options = useMemo(() => [...editor.nodes.list().filter(item => !nodeKinds || nodeKinds.includes(item.kind)), ...(features.areas ? [{ kind: 'spagbol.area', label: 'Area' }] : [])].filter(item =>
+  const options = useMemo(() => [...editor.nodes.list().filter(item => !nodeKinds || nodeKinds.includes(item.kind)), ...(features.areas ? [{ kind: 'spagbol.area', label: 'Container' }] : [])].filter(item =>
     `${item.kind} ${item.label}`.toLowerCase().includes(query.trim().toLowerCase())
   ).sort((a, b) => Number(b.label.toLowerCase().startsWith(query.toLowerCase())) - Number(a.label.toLowerCase().startsWith(query.toLowerCase()))), [editor, query, nodeKinds, features.areas]);
   useEffect(() => { if (!selected || disabled) setOpen(false); }, [selected, disabled]);

package/src/react/SpagbolSequencer.tsx

@@ -0,0 +1,265 @@
+// Controlled view projections and edit intents; no persisted sequence model or evaluator.
+import { useEffect, useRef, useState, type CSSProperties, type PointerEvent, type ReactNode } from 'react';
+
+export interface SpagbolSequencerItem {
+  id: number;
+  start: number;
+  end: number;
+  level: number;
+}
+
+export interface SpagbolSequencerProps {
+  ariaLabel: string;
+  className?: string;
+  minLevel?: number;
+  rows: number;
+  steps: number;
+  groupSize?: number;
+  currentStep?: number;
+  rowLabel: (row: number) => string;
+  renderRowLabel?: (row: number) => ReactNode;
+  labelPosition?: 'left' | 'right';
+  onRowRef?: (row: number, element: HTMLDivElement | null) => void;
+  itemsForRow: (row: number) => SpagbolSequencerItem[];
+  mode?: 'gate' | 'trigger';
+  defaultItemLength?: number;
+  allowMove?: boolean;
+  allowResize?: boolean;
+  allowLevel?: boolean;
+  onCreateItem: (row: number, start: number, end: number) => void;
+  onCreateItems?: (row: number, gates: Array<{ start: number; end: number }>) => void;
+  onUpdateItem: (row: number, id: number, update: Partial<Pick<SpagbolSequencerItem, 'start' | 'end' | 'level'>>) => void;
+  onDeleteItem: (row: number, id: number) => void;
+}
+
+export function SpagbolSequencer({
+  ariaLabel,
+  className = '',
+  minLevel = 0.1,
+  rows,
+  steps,
+  groupSize = 4,
+  currentStep,
+  rowLabel,
+  renderRowLabel,
+  labelPosition = 'left',
+  onRowRef,
+  itemsForRow,
+  mode = 'gate',
+  defaultItemLength = 1,
+  allowMove = true,
+  allowResize = true,
+  allowLevel = true,
+  onCreateItem,
+  onCreateItems,
+  onUpdateItem,
+  onDeleteItem,
+}: SpagbolSequencerProps) {
+  const activeStep = Number.isFinite(currentStep) ? Math.floor(currentStep ?? -1) : -1;
+  const dragRef = useRef<{ pointerId: number; row: number; gate: SpagbolSequencerItem; x: number; y: number; action: 'move' | 'left' | 'right' | 'level'; moved: boolean } | null>(null);
+  const createRef = useRef<{
+    pointerId: number;
+    row: number;
+    anchorX: number;
+    start: number;
+    end: number;
+    lastStep: number;
+    positions: Set<number>;
+    moved: boolean;
+  } | null>(null);
+  const [createPreview, setCreatePreview] = useState<{ row: number; gates: Array<{ start: number; end: number }> } | null>(null);
+
+  const positionInRow = (event: PointerEvent<HTMLElement>) => {
+    const bounds = event.currentTarget.closest('.spagbol-sequencer-cells')?.getBoundingClientRect();
+    if (!bounds) return 0;
+    return Math.max(0, Math.min(steps, ((event.clientX - bounds.left) / Math.max(1, bounds.width)) * steps));
+  };
+
+  const beginCreate = (event: PointerEvent<HTMLButtonElement>, row: number, step: number) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.stopPropagation();
+    const existing = itemsForRow(row);
+    if (existing.some((gate) => step >= gate.start && step < gate.end)) return;
+    const nextStart = mode === 'gate'
+      ? existing.filter((gate) => gate.start > step).reduce((boundary, gate) => Math.min(boundary, gate.start), steps)
+      : steps;
+    const end = mode === 'trigger' ? Math.min(steps, step + 1) : Math.min(nextStart, step + defaultItemLength);
+    if (end - step < 0.05) return;
+    createRef.current = {
+      pointerId: event.pointerId,
+      row,
+      anchorX: event.clientX,
+      start: step,
+      end,
+      lastStep: step,
+      positions: new Set([step]),
+      moved: false,
+    };
+    setCreatePreview({ row, gates: [{ start: step, end }] });
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+
+  const moveCreate = (event: PointerEvent<HTMLButtonElement>) => {
+    const create = createRef.current;
+    if (!create || create.pointerId !== event.pointerId) return;
+    if (Math.abs(event.clientX - create.anchorX) >= 3) create.moved = true;
+    if (mode === 'trigger') {
+      const nextStep = Math.max(0, Math.min(steps - 1, Math.floor(positionInRow(event))));
+      const direction = nextStep >= create.lastStep ? 1 : -1;
+      for (let step = create.lastStep; step !== nextStep + direction; step += direction) create.positions.add(step);
+      create.lastStep = nextStep;
+      const occupied = itemsForRow(create.row);
+      const gates = [...create.positions]
+        .filter((step) => !occupied.some((gate) => Math.abs(gate.start - step) < 0.000001))
+        .sort((left, right) => left - right)
+        .map((step) => ({ start: step, end: Math.min(steps, step + 1) }));
+      setCreatePreview({ row: create.row, gates });
+      return;
+    }
+    if (!create.moved) return;
+    const nextStart = itemsForRow(create.row)
+      .filter((gate) => gate.start > create.start)
+      .reduce((boundary, gate) => Math.min(boundary, gate.start), steps);
+    create.end = Math.max(create.start + 0.05, Math.min(nextStart, positionInRow(event)));
+    setCreatePreview({ row: create.row, gates: [{ start: create.start, end: create.end }] });
+  };
+
+  const finishCreate = (pointerId: number) => {
+    const create = createRef.current;
+    if (!create || create.pointerId !== pointerId) return;
+    const occupied = itemsForRow(create.row);
+    const gates = mode === 'trigger'
+      ? [...create.positions]
+          .filter((step) => !occupied.some((gate) => Math.abs(gate.start - step) < 0.000001))
+          .sort((left, right) => left - right)
+          .map((step) => ({ start: step, end: Math.min(steps, step + 1) }))
+      : [{ start: create.start, end: create.end }];
+    if (onCreateItems) onCreateItems(create.row, gates);
+    else for (const gate of gates) onCreateItem(create.row, gate.start, gate.end);
+    createRef.current = null;
+    setCreatePreview(null);
+  };
+
+  const beginDrag = (event: PointerEvent<HTMLElement>, row: number, gate: SpagbolSequencerItem, action: 'move' | 'left' | 'right' | 'level') => {
+    if (event.button !== 0) return;
+    event.preventDefault(); event.stopPropagation();
+    dragRef.current = { pointerId: event.pointerId, row, gate, x: event.clientX, y: event.clientY, action, moved: false };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const moveDrag = (event: PointerEvent<HTMLElement>) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== event.pointerId) return;
+    const bounds = event.currentTarget.closest('.spagbol-sequencer-cells')?.getBoundingClientRect();
+    const delta = ((event.clientX - drag.x) / Math.max(1, bounds?.width ?? steps * 26)) * steps;
+    const velocityDelta = (event.clientY - drag.y) / Math.max(1, bounds?.height ?? 26);
+    drag.moved ||= Math.hypot(event.clientX - drag.x, event.clientY - drag.y) >= 3;
+    if (!drag.moved) return;
+    if (drag.action === 'level') return onUpdateItem(drag.row, drag.gate.id, { level: Math.max(minLevel, Math.min(1, drag.gate.level - velocityDelta)) });
+    const length = drag.gate.end - drag.gate.start;
+    if (mode === 'trigger') {
+      const start = Math.max(0, Math.min(steps - 1, drag.gate.start + delta));
+      return onUpdateItem(drag.row, drag.gate.id, { start, end: Math.min(steps, start + 1) });
+    }
+    const otherGates = itemsForRow(drag.row).filter((gate) => gate.id !== drag.gate.id);
+    const previousEnd = otherGates
+      .filter((gate) => gate.start < drag.gate.start)
+      .reduce((boundary, gate) => Math.max(boundary, gate.end), 0);
+    const nextStart = otherGates
+      .filter((gate) => gate.start >= drag.gate.end)
+      .reduce((boundary, gate) => Math.min(boundary, gate.start), steps);
+    if (drag.action === 'move') {
+      const start = Math.max(previousEnd, Math.min(nextStart - length, drag.gate.start + delta));
+      return onUpdateItem(drag.row, drag.gate.id, { start, end: start + length });
+    }
+    if (drag.action === 'left') return onUpdateItem(drag.row, drag.gate.id, { start: Math.max(previousEnd, Math.min(drag.gate.end - 0.05, drag.gate.start + delta)) });
+    onUpdateItem(drag.row, drag.gate.id, { end: Math.max(drag.gate.start + 0.05, Math.min(nextStart, drag.gate.end + delta)) });
+  };
+  const finishDrag = (pointerId: number) => {
+    const drag = dragRef.current;
+    if (!drag || drag.pointerId !== pointerId) return;
+    if (!drag.moved && drag.action === 'move') onDeleteItem(drag.row, drag.gate.id);
+    dragRef.current = null;
+  };
+  const endDrag = (event: PointerEvent<HTMLElement>) => finishDrag(event.pointerId);
+  const cancelDrag = (pointerId: number) => {
+    if (dragRef.current?.pointerId === pointerId) dragRef.current = null;
+  };
+
+  useEffect(() => {
+    const finishPointer = (event: globalThis.PointerEvent) => {
+      finishCreate(event.pointerId);
+      finishDrag(event.pointerId);
+    };
+    const cancelPointer = (event: globalThis.PointerEvent) => {
+      if (createRef.current?.pointerId === event.pointerId) {
+        createRef.current = null;
+        setCreatePreview(null);
+      }
+      cancelDrag(event.pointerId);
+    };
+    window.addEventListener('pointerup', finishPointer);
+    window.addEventListener('pointercancel', cancelPointer);
+    return () => {
+      window.removeEventListener('pointerup', finishPointer);
+      window.removeEventListener('pointercancel', cancelPointer);
+    };
+  });
+
+  return (
+    <div className={`spagbol-sequencer spagbol-sequencer-label-${labelPosition} ${className} nodrag nopan`} style={{ '--spagbol-sequencer-steps': steps } as CSSProperties} aria-label={ariaLabel} onDoubleClick={(event) => event.stopPropagation()}>
+      {Array.from({ length: rows }, (_, row) => (
+        <div className="spagbol-sequencer-row" key={row} ref={(element) => onRowRef?.(row, element)}>
+          {labelPosition === 'left' ? <div className="spagbol-sequencer-label">{renderRowLabel?.(row) ?? rowLabel(row)}</div> : null}
+          <div className="spagbol-sequencer-cells" role="row">
+            {Array.from({ length: steps }, (_, step) => (
+              <button
+                className={['spagbol-sequencer-cell', Math.floor(step / groupSize) % 2 === 1 ? 'spagbol-sequencer-cell-beat-highlight' : '', activeStep === step ? 'spagbol-sequencer-cell-current' : ''].filter(Boolean).join(' ')}
+                key={step}
+                type="button"
+                aria-label={`${rowLabel(row)}, step ${step + 1}`}
+                data-spagbol-sequencer-cell="true"
+                data-row-index={row}
+                data-step-index={step}
+                onPointerDown={(event) => beginCreate(event, row, step)}
+                onPointerMove={moveCreate}
+                onPointerUp={(event) => { if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); finishCreate(event.pointerId); }}
+                onPointerCancel={(event) => { createRef.current = null; setCreatePreview(null); if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId); }}
+                onLostPointerCapture={(event) => finishCreate(event.pointerId)}
+                onClick={(event) => { event.preventDefault(); event.stopPropagation(); }}
+              />
+            ))}
+            {createPreview?.row === row ? createPreview.gates.map((gate, index) => (
+              <div
+                className="spagbol-sequencer-gate spagbol-sequencer-create-preview"
+                key={`${gate.start}:${index}`}
+                style={{ left: `${gate.start / steps * 100}%`, width: `${(gate.end - gate.start) / steps * 100}%` }}
+              />
+            )) : null}
+            {itemsForRow(row).map((gate) => (
+              <div
+                className="spagbol-sequencer-gate"
+                key={gate.id}
+                style={{ top: `${(1 - gate.level) * 100}%`, left: `${gate.start / steps * 100}%`, width: `${(gate.end - gate.start) / steps * 100}%` }}
+                role="button"
+                tabIndex={0}
+                aria-label={`${rowLabel(row)} ${mode} from ${gate.start.toFixed(2)} to ${gate.end.toFixed(2)}, level ${gate.level.toFixed(2)}`}
+                onPointerDown={(event) => { if (allowMove && event.target === event.currentTarget) beginDrag(event, row, gate, 'move'); }}
+                onPointerMove={moveDrag}
+                onPointerUp={endDrag}
+                onPointerCancel={(event) => cancelDrag(event.pointerId)}
+                onLostPointerCapture={(event) => cancelDrag(event.pointerId)}
+                onClick={(event) => { event.preventDefault(); event.stopPropagation(); }}
+              >
+                {allowLevel ? <span className="spagbol-sequencer-level-handle" onPointerDown={(event) => beginDrag(event, row, gate, 'level')} onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={(event) => cancelDrag(event.pointerId)} /> : null}
+                {allowResize ? <><span className="spagbol-sequencer-gate-handle spagbol-sequencer-gate-handle-left" onPointerDown={(event) => beginDrag(event, row, gate, 'left')} onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={(event) => cancelDrag(event.pointerId)} /><span className="spagbol-sequencer-gate-handle spagbol-sequencer-gate-handle-right" onPointerDown={(event) => beginDrag(event, row, gate, 'right')} onPointerMove={moveDrag} onPointerUp={endDrag} onPointerCancel={(event) => cancelDrag(event.pointerId)} /></> : null}
+              </div>
+            ))}
+          </div>
+          {labelPosition === 'right' ? <div className="spagbol-sequencer-label">{renderRowLabel?.(row) ?? rowLabel(row)}</div> : null}
+        </div>
+      ))}
+    </div>
+  );
+}
+