@pauloricca/spagbol 0.1.0 → 0.1.3

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/nodeDrag.ts

@@ -0,0 +1,33 @@
+import type { Node, NodeChange } from "@xyflow/react";
+import type { GraphDocument, Point } from "../core/index.js";
+
+/** Accumulate only changed native node positions; keep model records immutable. */
+export function previewNodePositions<N extends Node>(
+  previous: ReadonlyMap<string, Point>,
+  changes: readonly NodeChange<N>[],
+): ReadonlyMap<string, Point> {
+  let next: Map<string, Point> | undefined;
+  for (const change of changes) {
+    if (change.type !== "position" || !change.position || !change.id.startsWith("node:"))
+      continue;
+    const { x, y } = change.position;
+    if (!Number.isFinite(x) || !Number.isFinite(y)) continue;
+    const id = change.id.slice(5);
+    const before = (next ?? previous).get(id);
+    if (before?.x === x && before.y === y) continue;
+    next ??= new Map(previous);
+    next.set(id, { x, y });
+  }
+  return next ?? previous;
+}
+
+/** Apply a completed multi-node drag as one atomic controller edit. */
+export function applyNodePositions(
+  graph: GraphDocument,
+  positions: ReadonlyMap<string, Point>,
+): void {
+  for (const node of graph.nodes) {
+    const position = positions.get(node.id);
+    if (position) node.position = { ...position };
+  }
+}

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

package/src/react/zoom.ts

@@ -0,0 +1,18 @@
+/** Teia's user-facing 100% corresponds to a half-scale graph viewport. */
+export const SPAGBOL_ZOOM_BASELINE = 0.5;
+
+function normalizedZoom(zoom: number): number {
+  return Number.isFinite(zoom) && zoom > 0 ? zoom : SPAGBOL_ZOOM_BASELINE;
+}
+
+export function spagbolZoomPercentage(zoom: number): string {
+  return `${Math.round((normalizedZoom(zoom) / SPAGBOL_ZOOM_BASELINE) * 100)}%`;
+}
+
+export function spagbolHeaderTitleScale(zoom: number): number {
+  const userZoom = normalizedZoom(zoom) / SPAGBOL_ZOOM_BASELINE;
+  if (userZoom <= 0.3) return 2.2;
+  if (userZoom <= 0.5) return 1.75;
+  if (userZoom < 0.7) return 1.3;
+  return 1;
+}