@pauloricca/spagbol 0.1.1 → 0.1.3

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>
+  );
+}
+

package/src/react/editors.css

@@ -0,0 +1,157 @@
+/* Controlled editors extracted from Teia; hosts own storage and execution. */
+.spagbol-curve-editor {
+  display: grid;
+  grid-column: 1 / -1;
+  gap: 0;
+  width: 100%;
+  min-width: 0;
+}
+
+.spagbol-curve-editor-chart {
+  position: relative;
+  height: var(--node-display-height, 128px);
+  overflow: hidden;
+}
+
+.spagbol-curve-editor-canvas {
+  position: relative;
+  z-index: 1;
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background: transparent;
+  cursor: crosshair;
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.spagbol-curve-editor-value-label {
+  --spagbol-curve-editor-value-offset: calc(7px * var(--graph-screen-scale, 1));
+  position: absolute;
+  z-index: 3;
+  padding: calc(2px * var(--graph-screen-scale, 1)) calc(4px * var(--graph-screen-scale, 1));
+  transform: translate(var(--spagbol-curve-editor-value-offset), calc(-100% - var(--spagbol-curve-editor-value-offset)));
+  border: calc(1px * var(--graph-screen-scale, 1)) solid var(--color-foreground-62, rgba(255,255,255,.62));
+  background: var(--color-background, var(--spagbol-bg, #000));
+  color: var(--color-foreground, var(--spagbol-foreground, #fff));
+  font-size: calc(1.1em * var(--graph-screen-scale, 1));
+  font-variant-numeric: tabular-nums;
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+}
+
+.spagbol-curve-editor-value-label.is-left {
+  transform: translate(calc(-100% - var(--spagbol-curve-editor-value-offset)), calc(-100% - var(--spagbol-curve-editor-value-offset)));
+}
+
+.spagbol-curve-editor-value-label.is-below {
+  transform: translate(var(--spagbol-curve-editor-value-offset), var(--spagbol-curve-editor-value-offset));
+}
+
+.spagbol-curve-editor-value-label.is-left.is-below {
+  transform: translate(calc(-100% - var(--spagbol-curve-editor-value-offset)), var(--spagbol-curve-editor-value-offset));
+}
+
+.spagbol-curve-editor-chrome {
+  pointer-events: none;
+}
+
+.spagbol-curve-editor-path {
+  fill: none;
+  stroke: var(--color-accent, var(--spagbol-accent, #2fd061));
+  stroke-linecap: square;
+  stroke-linejoin: round;
+  stroke-width: calc(2px * var(--graph-stroke-scale, 1));
+  vector-effect: non-scaling-stroke;
+}
+.spagbol-curve-editor-path.is-background { opacity: .38; }
+.spagbol-curve-editor-hit-target {
+  fill: transparent;
+  cursor: grab;
+  pointer-events: all;
+}
+
+.spagbol-curve-editor-hit-target.is-locked {
+  cursor: default;
+}
+
+.spagbol-curve-editor-handle {
+  fill: var(--color-background, var(--spagbol-bg, #000));
+  stroke: var(--color-accent, var(--spagbol-accent, #2fd061));
+  stroke-width: calc(2px * var(--graph-stroke-scale, 1) * var(--spagbol-curve-editor-point-scale, 1));
+  cursor: grab;
+  pointer-events: none;
+  vector-effect: non-scaling-stroke;
+}
+
+.spagbol-curve-editor-endpoint {
+  stroke: var(--color-foreground, var(--spagbol-foreground, #fff));
+}
+
+.spagbol-curve-editor-handle.is-locked {
+  cursor: default;
+}
+
+
+.spagbol-sequencer { display: grid; grid-auto-rows: minmax(0, 1fr); width: 100%; min-width: 0; }
+.spagbol-sequencer-row { display: grid; grid-template-columns: 32px minmax(0, 1fr); min-width: 0; }
+.spagbol-sequencer-label-right .spagbol-sequencer-row { grid-template-columns: minmax(0, 1fr) var(--spagbol-sequencer-label-width, 44px); }
+.spagbol-sequencer-label { display: flex; align-items: center; justify-content: flex-end; padding-right: 5px; }
+.spagbol-sequencer-label-right .spagbol-sequencer-label { justify-content: flex-start; padding-right: 0; }
+.spagbol-sequencer-cells { position: relative; display: grid; grid-template-columns: repeat(var(--spagbol-sequencer-steps), minmax(0, 1fr)); min-width: 0; overflow: hidden; }
+.spagbol-sequencer-cell { min-width: 0; padding: 0; border: 0; background: transparent; }
+.spagbol-sequencer-gate { position: absolute; z-index: 2; bottom: 0; min-width: 2px; background: var(--color-accent, var(--spagbol-accent, #2fd061)); cursor: grab; touch-action: none; }
+.spagbol-sequencer-create-preview { pointer-events: none; opacity: 0.7; }
+.spagbol-sequencer-gate-handle { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
+.spagbol-sequencer-gate-handle-left { left: 0; }.spagbol-sequencer-gate-handle-right { right: 0; }
+.spagbol-sequencer-level-handle { position: absolute; top: 0; left: 0; right: 0; height: 7px; cursor: ns-resize; }
+
+
+.spagbol-sequencer .spagbol-sequencer-cells { height: 100%; }
+.spagbol-sequencer .spagbol-sequencer-cell {
+  width: 100%;
+  height: 100%;
+  border-right: 1px solid var(--color-foreground-44, rgba(255,255,255,.44));
+  border-bottom: 1px solid var(--color-foreground-44, rgba(255,255,255,.44));
+  box-sizing: border-box;
+  cursor: pointer;
+}
+.spagbol-sequencer .spagbol-sequencer-row:first-child .spagbol-sequencer-cell { border-top: 1px solid var(--color-foreground-44, rgba(255,255,255,.44)); }
+.spagbol-sequencer .spagbol-sequencer-cell:first-child { border-left: 1px solid var(--color-foreground-44, rgba(255,255,255,.44)); }
+.spagbol-sequencer .spagbol-sequencer-cell-beat-highlight { background: var(--color-foreground-15, rgba(255,255,255,.15)); }
+.spagbol-sequencer .spagbol-sequencer-cell:hover,
+.spagbol-sequencer .spagbol-sequencer-cell:focus-visible { background: var(--color-foreground-20, rgba(255,255,255,.2)); outline: 0; }
+.spagbol-sequencer .spagbol-sequencer-cell-current {
+  background: var(--color-foreground-12, rgba(255,255,255,.12));
+  box-shadow: inset 0 0 0 2px var(--color-foreground-28, rgba(255,255,255,.28));
+}
+.spagbol-sequencer .spagbol-sequencer-gate { border: 0; border-radius: 0; box-shadow: none; }
+
+
+.spagbol-control-joystick {
+  --joystick-handle-size: 12px;
+  position: relative;
+  height: var(--node-display-height, 120px);
+  min-width: 0;
+  box-sizing: border-box;
+  border: calc(1px * var(--graph-stroke-scale, 1)) solid var(--color-foreground, var(--spagbol-foreground, #fff));
+  background: transparent;
+  cursor: crosshair;
+  overflow: hidden;
+  touch-action: none;
+  user-select: none;
+}
+
+.spagbol-control-joystick-handle {
+  position: absolute;
+  width: var(--joystick-handle-size);
+  height: var(--joystick-handle-size);
+  box-sizing: border-box;
+  border: calc(1px * var(--graph-stroke-scale, 1)) solid var(--color-foreground, var(--spagbol-foreground, #fff));
+  background: var(--color-accent, var(--spagbol-accent, #2fd061));
+  pointer-events: none;
+}
+

package/src/react/index.ts

@@ -59,3 +59,7 @@ export {
   type SpagbolCanvasMenuItem,
   type SpagbolCanvasMenuSeparator,
 } from "./SpagbolCanvasControls.js";
+
+export { SpagbolCurveEditor, type SpagbolCurveEditorProps, type SpagbolCurveEditorPoint } from "./SpagbolCurveEditor.js";
+export { SpagbolSequencer, type SpagbolSequencerProps, type SpagbolSequencerItem } from "./SpagbolSequencer.js";
+export { SpagbolControlJoystick, type SpagbolControlJoystickProps } from "./SpagbolControlJoystick.js";

package/src/react/styles.css

@@ -1,3 +1,4 @@
+@import "./editors.css";
 @import "./link-controls.css";
 @import "./controls.css";
 @import "@xyflow/react/dist/style.css";
@@ -19,6 +20,7 @@
   --spagbol-control: rgba(0, 0, 0, 0.62);
   --spagbol-link-underlay: #0b0b0b;
   --spagbol-control-size: 28px;
+  --spagbol-pin-size: 8px;
   --spagbol-font:
     ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
     monospace;
@@ -81,6 +83,17 @@
 .spagbol-canvas .react-flow__edgeupdater { fill: transparent; stroke: transparent; stroke-width: 0; cursor: grab; pointer-events: all; }
 .spagbol-canvas .react-flow__edgeupdater-source { transform: translateX(-12px); }
 .spagbol-canvas .react-flow__edgeupdater-target { transform: translateX(12px); }
+/* Match Teia's square pins; selected endpoints only change colour. */
+.spagbol-canvas .react-flow__handle.spagbol-node-port,
+.spagbol-canvas .react-flow__handle.spagbol-property-port {
+  width: var(--spagbol-pin-size);
+  height: var(--spagbol-pin-size);
+  min-width: var(--spagbol-pin-size);
+  min-height: var(--spagbol-pin-size);
+  border: 1px solid var(--spagbol-foreground);
+  border-radius: 0;
+  background: var(--spagbol-control);
+}
 .spagbol-canvas .spagbol-node-port.spagbol-node-port-selected-link { background: var(--spagbol-accent); border-color: var(--spagbol-accent); box-shadow: 0 0 0 2px var(--spagbol-link-underlay); pointer-events: none; }
 .spagbol-canvas-link-overlay { position: absolute; inset: 0; z-index: 25; pointer-events: none; }
 
@@ -124,7 +137,8 @@
   opacity: 0.48;
   border-style: dashed;
 }
-.spagbol-node-frame-header {
+.spagbol-node-frame-header,
+.spagbol-canvas-picker-heading {
   min-height: 31px;
   padding: 4px 8px;
   border-bottom: 1px solid var(--spagbol-border);
@@ -136,7 +150,8 @@
   cursor: grab;
   user-select: none;
 }
-.spagbol-node-frame-title {
+.spagbol-node-frame-title,
+.spagbol-canvas-picker-title {
   flex: 1;
   min-width: 0;
   overflow: visible;
@@ -145,7 +160,8 @@
   font-size: calc(13px * var(--spagbol-title-scale, 1));
   font-weight: 700;
 }
-.spagbol-canvas .spagbol-node-frame-header-button {
+.spagbol-canvas .spagbol-node-frame-header-button,
+.spagbol-canvas .spagbol-canvas-picker-heading button {
   border: 0;
   background: transparent;
   color: inherit;
@@ -220,11 +236,11 @@
   height: 1px;
   pointer-events: none;
 }
-.spagbol-canvas .spagbol-property-port {
+.spagbol-canvas .react-flow__handle.spagbol-property-port {
   top: 0;
   left: 0;
-  width: 9px;
-  height: 9px;
+  width: var(--spagbol-pin-size);
+  height: var(--spagbol-pin-size);
   border: 1px solid var(--spagbol-accent);
   background: var(--spagbol-bg);
   pointer-events: auto;
@@ -232,11 +248,17 @@
 .spagbol-canvas-area {
   position: relative;
   border: 1px solid var(--spagbol-border);
-  background: #ffffff03;
+  background:
+    linear-gradient(color-mix(in srgb, var(--spagbol-foreground) 8%, transparent), color-mix(in srgb, var(--spagbol-foreground) 8%, transparent)),
+    color-mix(in srgb, var(--spagbol-bg) 42%, transparent);
   pointer-events: none;
 }
 .spagbol-canvas-area-selected {
-  border-color: var(--spagbol-accent);
+  outline: 1px dashed var(--spagbol-foreground);
+  outline-offset: 3px;
+}
+.spagbol-canvas-area-collapsed {
+  overflow: hidden;
 }
 .spagbol-canvas-area-header {
   position: absolute;
@@ -244,29 +266,84 @@
   left: 0;
   right: 0;
   height: 32px;
-  padding: 5px 10px;
-  background: var(--spagbol-surface-raised);
-  color: var(--spagbol-muted);
   display: flex;
-  justify-content: space-between;
-  cursor: move;
+  align-items: center;
+  padding: 0 8px;
+  border-bottom: 1px solid color-mix(in srgb, var(--spagbol-foreground) 28%, transparent);
+  color: var(--spagbol-foreground);
+  cursor: grab;
   pointer-events: auto;
   user-select: none;
   touch-action: none;
 }
-.spagbol-canvas-area-header > span {
+.spagbol-canvas-area-header:active { cursor: grabbing; }
+.spagbol-canvas-area-title,
+.spagbol-canvas-area-title-input {
   flex: 1;
-  font-size: calc(11px * var(--spagbol-title-scale, 1));
+  min-width: 0;
+  max-width: 100%;
+  border: 0;
+  padding: 0;
+  outline: 0;
+  background: transparent;
+  color: var(--spagbol-foreground);
+  font: inherit;
+  font-size: calc(13px * var(--spagbol-title-scale, 1));
+  font-weight: 700;
+}
+.spagbol-canvas-area-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
 }
+.spagbol-canvas-area-title-input { width: auto; min-width: 4ch; }
 .spagbol-canvas-area-actions {
   display: flex;
-  gap: 8px;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
 }
-.spagbol-canvas-area-actions button {
-  border: none;
+.spagbol-canvas .spagbol-canvas-area-actions button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  width: 20px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  padding: 0;
   background: transparent;
-  padding: 0 2px;
+  color: currentColor;
+  cursor: pointer;
+}
+.spagbol-canvas .spagbol-canvas-area-actions button:hover,
+.spagbol-canvas .spagbol-canvas-area-actions button:focus-visible {
+  background: var(--spagbol-bg);
+  color: var(--spagbol-foreground);
+  outline: 0;
 }
+.spagbol-canvas-area-lock-icon {
+  position: relative;
+  display: block;
+  width: 10px;
+  height: 8px;
+  border: 1px solid currentColor;
+}
+.spagbol-canvas-area-lock-icon::before {
+  position: absolute;
+  bottom: 7px;
+  left: 1px;
+  width: 6px;
+  height: 6px;
+  border: 1px solid currentColor;
+  border-bottom: 0;
+  border-radius: 5px 5px 0 0;
+  content: '';
+}
+.spagbol-canvas-area-lock:not([aria-pressed="true"]) .spagbol-canvas-area-lock-icon::before { left: 6px; }
+.spagbol-canvas-area-lock[aria-pressed="true"] .spagbol-canvas-area-lock-icon { background: currentColor; }
 .spagbol-canvas-area-resize {
   position: absolute;
   bottom: 0;
@@ -426,10 +503,10 @@
   gap: 8px;
   text-align: left;
 }
-.spagbol-canvas-menu-check {
-  display: inline-block;
-  width: 12px;
-  flex-shrink: 0;
+.spagbol-canvas-menu-items > button[aria-checked="true"],
+.spagbol-canvas-actions > button[aria-pressed="true"] {
+  background: var(--spagbol-header);
+  color: var(--spagbol-header-text);
 }
 .spagbol-canvas-menu-separator {
   height: 1px;
@@ -472,19 +549,7 @@
   box-shadow: 0 10px 40px #0007;
 }
 .spagbol-canvas-picker-heading {
-  padding: 9px 10px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--spagbol-header);
-  color: var(--spagbol-header-text);
-}
-.spagbol-canvas-picker-heading button {
-  border: 0;
-  background: none;
-  color: inherit;
-  font-size: 18px;
-  line-height: 16px;
+  cursor: default;
 }
 .spagbol-canvas-picker input {
   margin: 8px;
@@ -509,9 +574,12 @@
   border: 0;
   background: transparent;
 }
-.spagbol-canvas-picker-list button:hover {
-  background: var(--spagbol-surface-raised);
-  color: var(--spagbol-accent);
+.spagbol-canvas-picker-list button[aria-selected="true"] {
+  background: var(--spagbol-header);
+  color: var(--spagbol-header-text);
+}
+.spagbol-canvas-picker-list button[aria-selected="true"] small {
+  color: inherit;
 }
 .spagbol-canvas-picker-list small {
   color: var(--spagbol-muted);
@@ -739,10 +807,13 @@
 }
 
 
-.spagbol-canvas-area-title, .spagbol-canvas-area-title-input { flex: 1; min-width: 0; }
-.spagbol-canvas-area-title-input { border: 0; padding: 0; color: inherit; background: transparent; font: inherit; outline: none; }
 
 .spagbol-node-frame-projected > .spagbol-node-frame-header { background: var(--spagbol-bg); color: var(--spagbol-foreground); cursor: pointer; }
 .spagbol-node-panel { border-bottom: 1px dashed var(--spagbol-foreground); background: var(--spagbol-bg); }
 
 .spagbol-node-frame-auto-compact { min-width: 0; }
+
+.spagbol-canvas .spagbol-node-frame-enter { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 30px; width: 30px; height: 30px; padding: 0; cursor: pointer; }
+.spagbol-node-frame-enter svg { display: block; flex: none; }
+.spagbol-node-frame-enter + .spagbol-node-frame-enabled { margin-left: 0; }
+.spagbol-node-frame-enter:hover { background: var(--spagbol-bg); color: var(--spagbol-foreground); }