@1agh/maude 0.28.1 → 0.30.0

package/README.md

@@ -106,7 +106,7 @@ Plugin slash-commands reach all executable logic through the on-PATH `maude` bin
 Two clean paths, no middle ground ([DDR-047](.ai/decisions/DDR-047-collab-scope-cut-no-lan-mode-hub-admin-ui.md)):
 
 - **v1.0 — git handoff OR loopback multi-tab.** Push / pull is the cross-machine story. On a single machine, two browser tabs (or two Claude Code instances editing the same repo) sync cursors, comments, and annotations live over loopback WebSocket. The dev server refuses any non-loopback `host` header on the collab WS endpoint.
-- **v1.1 — deploy a hub** (Phase 9, in-flight). Cross-machine live collab needs a hub binary you deploy yourself. No tunnel mode; no shared cloud.
+- **v1.1 — deploy a hub** (Phase 9, in-flight). Cross-machine live collab needs a hub binary you deploy yourself. No tunnel mode; no shared cloud. **Boot order can't eat your work** ([DDR-102](.ai/decisions/DDR-102-cold-start-divergence-resolution.md)): a per-machine journal tells clean catch-ups apart from genuine divergence; diverged canvases snapshot **both** versions to `_history/` before the newer one wins, so the loser is one `/design:rollback` away — and `maude design status` reports per-canvas sync state honestly (synced / pending / auth-rejected).
 
 ## Security
 
@@ -129,8 +129,8 @@ The repo is a **pnpm workspace monorepo** with one published npm package (`@1agh
 | --------- | ------- |
 | `.` (root) | The single npm publisher — CLI, dev-server entry, plugin templates that ship to npm. |
 | `site/` | Docs site — Fumadocs + Next.js, deployed to Vercel ([DDR-005](.ai/decisions/DDR-005-docs-site-stack-and-hosting.md)). |
-| `plugins/design/dev-server/` | Zero-dep Node dev server + browser client. Bundled output (`dist/`) is the only thing in the npm tarball. |
-| `plugins/design/hub/` | Reserved for the v1.1 federated hub (Phase 9). |
+| `apps/studio/` | Zero-dep Node dev server + browser client. Bundled output (`dist/`) is the only thing in the npm tarball. |
+| `apps/hub/` | Reserved for the v1.1 federated hub (Phase 9). |
 
 Common scripts at the root:
 

package/{plugins/design/dev-server → apps/studio}/ai-banner.tsx

@@ -1,6 +1,6 @@
 /**
  * @file       ai-banner.tsx — yellow "Claude is editing this canvas" banner
- * @scope      plugins/design/dev-server/ai-banner.tsx
+ * @scope      apps/studio/ai-banner.tsx
  * @purpose    Mounted by canvas-shell. Subscribes to the inspector WS
  *             `ai-activity` event for the canvas's own file path; shows a
  *             non-modal yellow banner while AI work is in progress and clears
@@ -183,7 +183,6 @@ export function AiBanner(): JSX.Element | null {
 
   if (!entry) return null;
   return (
-    // biome-ignore lint/a11y/useSemanticElements: <output> is a form-result element; role="status" on a div is the canonical live-region banner pattern (APG).
     <div className="dc-ai-banner" role="status" aria-live="polite">
       <span className="dc-ai-banner__dot" aria-hidden="true" />
       <span>{entry.author} is editing this canvas — your changes may conflict</span>

package/apps/studio/annotations-align.ts

@@ -0,0 +1,149 @@
+/**
+ * @file       annotations-align.ts — FigJam v3 align + distribute
+ * @scope      apps/studio/annotations-align.ts
+ * @purpose    Pure bbox math (no React, no DOM) for the multi-select Align
+ *             cluster. Units follow FigJam: a whole group aligns as ONE box
+ *             (its members translate together), an ungrouped stroke is its own
+ *             unit. Align needs ≥ 2 units, distribute ≥ 3 (first/last pinned,
+ *             gaps equalized — Figma "distribute spacing" semantics).
+ */
+
+import { expandIdsToGroups, outermostGroupOf } from './annotations-groups.ts';
+import { type AnchorHost, type Stroke, strokeBBox, translateOne } from './annotations-model.ts';
+
+export type AlignEdge = 'left' | 'h-center' | 'right' | 'top' | 'v-center' | 'bottom';
+export type DistributeAxis = 'h' | 'v';
+
+interface BBox {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+interface AlignUnit {
+  ids: Set<string>;
+  bbox: BBox;
+}
+
+function unionBox(a: BBox, b: BBox): BBox {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return {
+    x,
+    y,
+    w: Math.max(a.x + a.w, b.x + b.w) - x,
+    h: Math.max(a.y + a.h, b.y + b.h) - y,
+  };
+}
+
+/**
+ * Partition the (expanded) selection into alignment units. Anchored text is
+ * skipped (it has no independent bbox and rides its host via `translateOne`'s
+ * no-op); arrows participate — bound endpoints get re-pinned by the caller's
+ * `recomputeBoundArrows` pass after the translate.
+ */
+function unitsOf(strokes: readonly Stroke[], ids: readonly string[]): AlignUnit[] {
+  const anchors = new Map<string, AnchorHost>();
+  for (const s of strokes) {
+    if (s.tool === 'rect' || s.tool === 'ellipse' || s.tool === 'polygon') anchors.set(s.id, s);
+  }
+  const sel = new Set(expandIdsToGroups(ids, strokes));
+  const byGroup = new Map<string, AlignUnit>();
+  const units: AlignUnit[] = [];
+  for (const s of strokes) {
+    if (!sel.has(s.id)) continue;
+    if (s.tool === 'text' && s.anchorId) continue; // rides its host
+    const bb = strokeBBox(s, anchors);
+    if (!bb) continue;
+    const g = outermostGroupOf(s);
+    if (g != null) {
+      const existing = byGroup.get(g);
+      if (existing) {
+        existing.ids.add(s.id);
+        existing.bbox = unionBox(existing.bbox, bb);
+      } else {
+        const unit: AlignUnit = { ids: new Set([s.id]), bbox: bb };
+        byGroup.set(g, unit);
+        units.push(unit);
+      }
+    } else {
+      units.push({ ids: new Set([s.id]), bbox: bb });
+    }
+  }
+  return units;
+}
+
+function applyDeltas(
+  strokes: readonly Stroke[],
+  deltas: Map<string, readonly [number, number]>
+): Stroke[] {
+  if (deltas.size === 0) return strokes as Stroke[];
+  return strokes.map((s) => {
+    const d = deltas.get(s.id);
+    return d ? translateOne(s, d[0], d[1]) : s;
+  });
+}
+
+/** Align every unit's edge/center to the selection's union bbox. */
+export function alignStrokes(
+  strokes: readonly Stroke[],
+  ids: readonly string[],
+  edge: AlignEdge
+): Stroke[] {
+  const units = unitsOf(strokes, ids);
+  if (units.length < 2) return strokes as Stroke[];
+  let sel = units[0]?.bbox;
+  if (!sel) return strokes as Stroke[];
+  for (let i = 1; i < units.length; i++) {
+    const u = units[i];
+    if (u) sel = unionBox(sel, u.bbox);
+  }
+  const deltas = new Map<string, readonly [number, number]>();
+  for (const u of units) {
+    let dx = 0;
+    let dy = 0;
+    if (edge === 'left') dx = sel.x - u.bbox.x;
+    else if (edge === 'h-center') dx = sel.x + sel.w / 2 - (u.bbox.x + u.bbox.w / 2);
+    else if (edge === 'right') dx = sel.x + sel.w - (u.bbox.x + u.bbox.w);
+    else if (edge === 'top') dy = sel.y - u.bbox.y;
+    else if (edge === 'v-center') dy = sel.y + sel.h / 2 - (u.bbox.y + u.bbox.h / 2);
+    else dy = sel.y + sel.h - (u.bbox.y + u.bbox.h);
+    if (dx !== 0 || dy !== 0) {
+      for (const id of u.ids) deltas.set(id, [dx, dy] as const);
+    }
+  }
+  return applyDeltas(strokes, deltas);
+}
+
+/**
+ * Equalize the gaps between units along one axis. First and last unit (by
+ * leading edge) stay pinned; everything between shifts so every gap is equal.
+ */
+export function distributeStrokes(
+  strokes: readonly Stroke[],
+  ids: readonly string[],
+  axis: DistributeAxis
+): Stroke[] {
+  const units = unitsOf(strokes, ids);
+  if (units.length < 3) return strokes as Stroke[];
+  const lead = (u: AlignUnit): number => (axis === 'h' ? u.bbox.x : u.bbox.y);
+  const size = (u: AlignUnit): number => (axis === 'h' ? u.bbox.w : u.bbox.h);
+  const sorted = [...units].sort((a, b) => lead(a) - lead(b));
+  const first = sorted[0];
+  const last = sorted[sorted.length - 1];
+  if (!first || !last) return strokes as Stroke[];
+  const span = lead(last) + size(last) - lead(first);
+  const total = sorted.reduce((m, u) => m + size(u), 0);
+  const gap = (span - total) / (sorted.length - 1);
+  const deltas = new Map<string, readonly [number, number]>();
+  let cursor = lead(first);
+  for (const u of sorted) {
+    const d = cursor - lead(u);
+    if (d !== 0) {
+      for (const id of u.ids) deltas.set(id, axis === 'h' ? ([d, 0] as const) : ([0, d] as const));
+    }
+    cursor += size(u) + gap;
+  }
+  return applyDeltas(strokes, deltas);
+}

package/apps/studio/annotations-bindings.ts

@@ -0,0 +1,197 @@
+/**
+ * @file       annotations-bindings.ts — FigJam v3 connector binding
+ * @scope      apps/studio/annotations-bindings.ts
+ * @purpose    Pure helpers (no React, no DOM) for arrow ↔ shape magnetic
+ *             binding. Semantics follow Excalidraw's binding system + FigJam's
+ *             connector magnets: bind on proximity (~15 px at 100 % zoom,
+ *             callers scale by 1/zoom), anchors snap to the {0, 0.5, 1} ×
+ *             {0, 0.5, 1} magnet grid over the host bbox, bound endpoints are
+ *             DERIVED from the host on every mutation (`recomputeBoundArrows`),
+ *             and deleting a host strips the bind but keeps the arrow with the
+ *             endpoint frozen in place (Excalidraw `fixBindingsAfterDeletion`).
+ */
+
+import {
+  type ArrowBind,
+  type ArrowStroke,
+  rotatePoint,
+  type Stroke,
+  strokeBBox,
+  strokeRotation,
+} from './annotations-model.ts';
+
+/** Hosts an arrow endpoint can attach to (shapes + cards, FigJam set). */
+export function isBindable(s: Stroke): boolean {
+  return (
+    s.tool === 'rect' ||
+    s.tool === 'ellipse' ||
+    s.tool === 'polygon' ||
+    s.tool === 'sticky' ||
+    s.tool === 'image'
+  );
+}
+
+/** Bind proximity threshold in world px at zoom 1 (Excalidraw's 15 px). */
+export const BIND_THRESHOLD_PX = 15;
+
+const MAGNETS = [0, 0.5, 1] as const;
+
+function snapMagnet(v: number): number {
+  let best: number = MAGNETS[0];
+  let bestDist = Number.POSITIVE_INFINITY;
+  for (const m of MAGNETS) {
+    const d = Math.abs(v - m);
+    if (d < bestDist) {
+      bestDist = d;
+      best = m;
+    }
+  }
+  return best;
+}
+
+function clamp01(v: number): number {
+  return Math.max(0, Math.min(1, v));
+}
+
+/**
+ * Topmost bindable host within `threshold` of the world point, with the anchor
+ * snapped to the nearest side/center magnet. `excludeIds` keeps an arrow from
+ * binding to a host that is itself part of the current gesture.
+ */
+export function bindCandidate(
+  wx: number,
+  wy: number,
+  strokes: readonly Stroke[],
+  threshold: number,
+  excludeIds?: ReadonlySet<string>
+): ArrowBind | null {
+  for (let i = strokes.length - 1; i >= 0; i--) {
+    const s = strokes[i];
+    if (!s || !isBindable(s) || excludeIds?.has(s.id)) continue;
+    const bb = strokeBBox(s);
+    if (!bb || bb.w <= 0 || bb.h <= 0) continue;
+    if (
+      wx < bb.x - threshold ||
+      wx > bb.x + bb.w + threshold ||
+      wy < bb.y - threshold ||
+      wy > bb.y + bb.h + threshold
+    ) {
+      continue;
+    }
+    return {
+      hostId: s.id,
+      nx: snapMagnet(clamp01((wx - bb.x) / bb.w)),
+      ny: snapMagnet(clamp01((wy - bb.y) / bb.h)),
+    };
+  }
+  return null;
+}
+
+/** World position of a normalized anchor over the host's bbox. A rotated host
+ *  carries its magnets with it (the anchor rotates around the bbox center). */
+export function anchorPoint(host: Stroke, nx: number, ny: number): [number, number] | null {
+  const bb = strokeBBox(host);
+  if (!bb) return null;
+  const px = bb.x + nx * bb.w;
+  const py = bb.y + ny * bb.h;
+  const rot = strokeRotation(host);
+  if (rot === 0) return [px, py];
+  return rotatePoint(px, py, bb.x + bb.w / 2, bb.y + bb.h / 2, rot);
+}
+
+/**
+ * Re-derive every bound arrow endpoint from its host. Idempotent — an endpoint
+ * already at its anchor is left referentially untouched, and the ORIGINAL
+ * array is returned when nothing changed (so the drag-commit no-op checks keep
+ * working). A bind whose host no longer exists (or stopped being bindable) is
+ * stripped with the endpoint frozen in place — the arrow survives unbound.
+ *
+ * FigJam v3 auto-routing: an AUTO (non-pinned) bind re-picks the side magnet
+ * FACING the arrow's other end on every recompute, so a connector keeps a
+ * sensible direction as the shapes move around each other. A `pinned` bind
+ * (explicit user re-anchor) keeps its magnet.
+ */
+export function recomputeBoundArrows(strokes: readonly Stroke[]): Stroke[] {
+  const byId = new Map<string, Stroke>();
+  for (const s of strokes) byId.set(s.id, s);
+  let mutated = false;
+  const out = strokes.map((s) => {
+    if (s.tool !== 'arrow' || (!s.startBind && !s.endBind)) return s;
+    let next: ArrowStroke = s;
+    // Opposite-end reference points for the facing computation. When both
+    // ends are bound, face the OTHER HOST's center (stable under endpoint
+    // churn); a free end is its literal coordinate.
+    const startHost = s.startBind ? byId.get(s.startBind.hostId) : undefined;
+    const endHost = s.endBind ? byId.get(s.endBind.hostId) : undefined;
+    const centerOf = (host: Stroke | undefined): [number, number] | null => {
+      if (!host) return null;
+      const bb = strokeBBox(host);
+      return bb ? [bb.x + bb.w / 2, bb.y + bb.h / 2] : null;
+    };
+    const startRef: [number, number] = centerOf(endHost) ?? [s.x2, s.y2];
+    const endRef: [number, number] = centerOf(startHost) ?? [s.x1, s.y1];
+    const applyEnd = (
+      bind: ArrowBind | undefined,
+      end: 'start' | 'end',
+      ref: [number, number]
+    ): void => {
+      if (!bind) return;
+      const host = byId.get(bind.hostId);
+      if (!host || !isBindable(host)) {
+        const copy: ArrowStroke = { ...next };
+        delete copy[end === 'start' ? 'startBind' : 'endBind'];
+        next = copy;
+        mutated = true;
+        return;
+      }
+      let effective = bind;
+      if (!bind.pinned) {
+        const facing = facingAnchor(host, ref[0], ref[1]);
+        if (facing && (facing.nx !== bind.nx || facing.ny !== bind.ny)) {
+          effective = { ...bind, nx: facing.nx, ny: facing.ny };
+          next =
+            end === 'start' ? { ...next, startBind: effective } : { ...next, endBind: effective };
+          mutated = true;
+        }
+      }
+      const pt = anchorPoint(host, effective.nx, effective.ny);
+      if (!pt) return;
+      if (end === 'start') {
+        if (next.x1 !== pt[0] || next.y1 !== pt[1]) {
+          next = { ...next, x1: pt[0], y1: pt[1] };
+          mutated = true;
+        }
+      } else if (next.x2 !== pt[0] || next.y2 !== pt[1]) {
+        next = { ...next, x2: pt[0], y2: pt[1] };
+        mutated = true;
+      }
+    };
+    applyEnd(s.startBind, 'start', startRef);
+    applyEnd(next.endBind, 'end', endRef);
+    return next;
+  });
+  return mutated ? out : (strokes as Stroke[]);
+}
+
+/**
+ * Side-magnet anchor on `host` facing the world point `(tx, ty)` — used by the
+ * AI annotate verb + quick-create to pick a sensible attachment side without a
+ * pointer position: the dominant axis of the direction vector decides the
+ * side, the cross axis centers.
+ */
+export function facingAnchor(host: Stroke, tx: number, ty: number): ArrowBind | null {
+  const bb = strokeBBox(host);
+  if (!bb || bb.w <= 0 || bb.h <= 0) return null;
+  const cx = bb.x + bb.w / 2;
+  const cy = bb.y + bb.h / 2;
+  const dx = tx - cx;
+  const dy = ty - cy;
+  // Normalize by the half-extents so a wide-but-short card still picks the
+  // side the target visually faces.
+  const rx = Math.abs(dx) / Math.max(1, bb.w / 2);
+  const ry = Math.abs(dy) / Math.max(1, bb.h / 2);
+  if (rx >= ry) {
+    return { hostId: host.id, nx: dx >= 0 ? 1 : 0, ny: 0.5 };
+  }
+  return { hostId: host.id, nx: 0.5, ny: dy >= 0 ? 1 : 0 };
+}