@1agh/maude 0.19.0 → 0.20.0

package/plugins/design/dev-server/commands/move-artboards-command.ts

@@ -0,0 +1,158 @@
+/**
+ * @file       commands/move-artboards-command.ts — undo entry for artboard moves
+ * @scope      plugins/design/dev-server/commands/move-artboards-command.ts
+ * @purpose    Reversible record of an artboard-layout PATCH. Pairs the full
+ *             `before` and `after` layout snapshots with an injected
+ *             `patchFn` (in production, `applyArtboardLayout`; in tests, a
+ *             spy). The command is rebuilt per iframe mount from a
+ *             `CommandRecord` so the stack survives canvas switches
+ *             (DDR-050 rev 2).
+ *
+ * Why full snapshots, not a sparse diff. The server-side endpoint
+ * (`PATCH /_api/canvas-meta`, see api.ts:523–528) shallow-merges patch.layout
+ * over the existing meta. A sparse `{ artboards: [movedOnly] }` would drop
+ * every unchanged rect on its head. Storing the full array is simpler and
+ * resilient — the external-edit invalidation (DDR-050 rule 6) clears the
+ * stack whenever the file changes outside our PATCH so we never restore a
+ * stale layout.
+ */
+
+import type { CommandRecord, CommandSinks, EditCommand } from '../undo-stack.ts';
+import { registerCommand } from '../undo-stack.ts';
+
+export interface ArtboardLayoutEntry {
+  id: string;
+  x: number;
+  y: number;
+  /** Width — JSX-authoritative; carried through for shape-completeness. */
+  w?: number;
+  h?: number;
+}
+
+/**
+ * Signature compatible with canvas-lib's `applyArtboardLayout(layout)`.
+ * Tests pass a spy; production wiring passes the real React-state-+-PATCH
+ * applier.
+ */
+export type LayoutPatchFn = (layout: ArtboardLayoutEntry[]) => void | Promise<void>;
+
+export interface MoveArtboardsPayload {
+  before: readonly ArtboardLayoutEntry[];
+  after: readonly ArtboardLayoutEntry[];
+}
+
+/** Convenience constant — keeps spelling consistent across files. */
+export const MOVE_ARTBOARDS_KIND = 'move-artboards';
+
+export interface MoveArtboardsCommandInit {
+  before: readonly ArtboardLayoutEntry[];
+  after: readonly ArtboardLayoutEntry[];
+  patchFn: LayoutPatchFn;
+  /** Optional label override (equal-spacing wraps with its own copy). */
+  label?: string;
+  /** Telemetry kind. Defaults to `MOVE_ARTBOARDS_KIND`. */
+  kind?: string;
+}
+
+export function createMoveArtboardsCommand(init: MoveArtboardsCommandInit): EditCommand {
+  const { before, after, patchFn } = init;
+  // Snapshot once — mutating the source arrays later cannot poison the command.
+  const beforeSnapshot = before.map(cloneEntry);
+  const afterSnapshot = after.map(cloneEntry);
+  const movedCount = countMoved(beforeSnapshot, afterSnapshot);
+  const label = init.label ?? `move ${movedCount} artboard${movedCount === 1 ? '' : 's'}`;
+  const kind = init.kind ?? MOVE_ARTBOARDS_KIND;
+
+  return {
+    kind,
+    label,
+    async do() {
+      await patchFn(afterSnapshot.map(cloneEntry));
+    },
+    async undo() {
+      await patchFn(beforeSnapshot.map(cloneEntry));
+    },
+  };
+}
+
+/**
+ * Build a persistable record from the same inputs. Use this together with
+ * the EditCommand so the runtime side-effect AND the persisted shape share
+ * one snapshot.
+ */
+export function buildMoveArtboardsRecord(opts: {
+  before: readonly ArtboardLayoutEntry[];
+  after: readonly ArtboardLayoutEntry[];
+  label?: string;
+}): CommandRecord<MoveArtboardsPayload> {
+  const before = opts.before.map(cloneEntry);
+  const after = opts.after.map(cloneEntry);
+  const moved = countMoved(before, after);
+  const label = opts.label ?? `move ${moved} artboard${moved === 1 ? '' : 's'}`;
+  return { kind: MOVE_ARTBOARDS_KIND, label, payload: { before, after } };
+}
+
+/**
+ * Diff helper — returns `null` when `before` and `after` describe the same
+ * layout (call sites use this to skip pushing a no-op drag onto the stack).
+ * Compares positions only; size diffs are ignored (size is JSX-authoritative
+ * per DDR-027, position is the only mutable channel).
+ */
+export function diffLayoutPositions(
+  before: readonly ArtboardLayoutEntry[],
+  after: readonly ArtboardLayoutEntry[]
+): { changed: number } | null {
+  if (before.length !== after.length) return { changed: Math.max(before.length, after.length) };
+  const byId = new Map<string, ArtboardLayoutEntry>();
+  for (const r of before) byId.set(r.id, r);
+  let changed = 0;
+  for (const r of after) {
+    const prev = byId.get(r.id);
+    if (!prev || prev.x !== r.x || prev.y !== r.y) changed++;
+  }
+  if (changed === 0) return null;
+  return { changed };
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Registry — rebuild EditCommand from a persisted CommandRecord + current
+// iframe's sinks. Runs once on module load (top-level side-effect intentional).
+
+registerCommand<MoveArtboardsPayload>(MOVE_ARTBOARDS_KIND, (record, sinks) => {
+  const patchFn = sinks.layoutPatchFn as LayoutPatchFn | undefined;
+  if (!patchFn) return null;
+  return createMoveArtboardsCommand({
+    before: record.payload.before,
+    after: record.payload.after,
+    patchFn,
+    label: record.label,
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Internals
+
+function cloneEntry(r: ArtboardLayoutEntry): ArtboardLayoutEntry {
+  const out: ArtboardLayoutEntry = { id: r.id, x: r.x, y: r.y };
+  if (typeof r.w === 'number') out.w = r.w;
+  if (typeof r.h === 'number') out.h = r.h;
+  return out;
+}
+
+function countMoved(
+  before: readonly ArtboardLayoutEntry[],
+  after: readonly ArtboardLayoutEntry[]
+): number {
+  const byId = new Map<string, ArtboardLayoutEntry>();
+  for (const r of before) byId.set(r.id, r);
+  let n = 0;
+  for (const r of after) {
+    const prev = byId.get(r.id);
+    if (!prev) {
+      n++;
+      continue;
+    }
+    if (prev.x !== r.x || prev.y !== r.y) n++;
+  }
+  return n;
+}

package/plugins/design/dev-server/comments-overlay.tsx

@@ -1143,14 +1143,22 @@ function computeThreadAnchor(comment: OverlayComment): { x: number; y: number }
 }
 
 function computeAnchor(state: ComposerState): { x: number; y: number } {
-  // Try the selected element first — its live screen rect gives the most
-  // natural anchor (composer sits flush under the element the user clicked).
+  // G4 — anchor to the cursor click point first. Earlier versions anchored to
+  // the selected element's bottom-left, which landed the composer flush in
+  // the corner regardless of where the user clicked — surprising for the
+  // common case of "I clicked the middle of an element, expecting the
+  // composer to appear near my cursor". The element-rect path remains as a
+  // fallback for entry points that don't carry a cursor (e.g. opening the
+  // composer from a contextual toolbar button — those should set clientX/Y
+  // to a sensible anchor before dispatching).
+  if (state.clientX || state.clientY) {
+    return { x: state.clientX, y: state.clientY + 8 };
+  }
   if (state.selection.selector) {
     const rect = screenRectFor(state.selection.selector);
     if (rect) {
       return { x: rect.x, y: rect.y + rect.h + 8 };
     }
   }
-  // Fall back to the raw click point — composer drops 8px below the cursor.
-  return { x: state.clientX, y: state.clientY + 8 };
+  return { x: 16, y: 16 };
 }

package/plugins/design/dev-server/config.schema.json

@@ -52,7 +52,7 @@
     },
     "tokensCssRel": {
       "type": "string",
-      "description": "Path to the design system CSS, relative to designRoot. New canvases <link> to this file.",
+      "description": "Project-wide tokens CSS path, relative to designRoot. Used as the fallback when 'designSystems' is unset OR when an entry omits its own 'tokensCssRel'. New canvases <link> to this file by default. Per DDR-048, per-DS entries auto-resolve to '<designSystems[i].path>/colors_and_type.css' when their own field is missing.",
       "default": "system/colors_and_type.css"
     },
     "teamAccentDefault": {
@@ -130,7 +130,7 @@
     },
     "designSystems": {
       "type": "array",
-      "description": "Design systems available in this project. Single-DS projects have one entry; multi-DS projects (marketing vs. admin vs. mobile) list each here. Each canvas's .meta.json declares which DS it uses via the 'designSystem' field.",
+      "description": "Design systems available in this project. Single-DS projects have one entry; multi-DS projects (marketing vs. admin vs. mobile) list each here. Each canvas's .meta.json declares which DS it uses via the 'designSystem' field. The System view's DS picker iterates this array.",
       "items": {
         "type": "object",
         "required": ["name", "path"],
@@ -138,13 +138,39 @@
           "name": {
             "type": "string",
             "pattern": "^[a-z][a-z0-9-]*$",
-            "description": "Kebab-case slug. Used to match canvas .meta.json.designSystem references."
+            "description": "Kebab-case slug. Used to match canvas .meta.json.designSystem references and as the ?ds=<name> query param on /_system-data."
           },
           "path": {
             "type": "string",
-            "description": "Folder under designRoot (e.g. 'system/marketing')."
+            "description": "Folder under designRoot (e.g. 'system/marketing'). The DS-scoped System view reads tokens, previews, and ui_kits from inside this folder."
           },
-          "description": { "type": "string" }
+          "description": { "type": "string" },
+          "tokensCssRel": {
+            "type": "string",
+            "description": "Per-DS tokens CSS path, relative to designRoot. When omitted, auto-resolves to '<path>/colors_and_type.css' (DDR-048). Set explicitly when the DS's tokens live under a non-standard filename."
+          },
+          "rootClass": {
+            "type": "string",
+            "description": "Optional root class applied to canvases in this DS (overrides the project-wide rootClass for this DS's previews + new canvases)."
+          },
+          "themeDefault": {
+            "type": "string",
+            "enum": ["dark", "light"],
+            "description": "Per-DS theme default. Overrides the project-wide themeDefault when rendering this DS's specimens."
+          },
+          "themes": {
+            "type": "array",
+            "items": { "type": "string" },
+            "description": "Optional list of theme names this DS supports (used by the System view's theme toggle when more than one theme is declared)."
+          },
+          "newCanvasDir": {
+            "type": "string",
+            "description": "Override of the project-wide newCanvasDir for canvases scaffolded inside this DS."
+          },
+          "newComponentDir": {
+            "type": "string",
+            "description": "Override of the project-wide newComponentDir for components scaffolded inside this DS."
+          }
         },
         "additionalProperties": false
       },

package/plugins/design/dev-server/context-menu.tsx

@@ -158,10 +158,10 @@ const MENU_CSS = `
 .dc-context-menu {
   position: fixed;
   z-index: 7;
-  background: var(--u-bg-2, var(--bg-1, #fff));
+  background: var(--u-bg-0, var(--bg-0, #fff));
   border: 1px solid var(--u-fg-0, #1c1917);
-  border-radius: 0;
-  box-shadow: 4px 4px 0 var(--u-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
   padding: 4px;
   min-width: 220px;
   font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);

package/plugins/design/dev-server/context.ts

@@ -31,6 +31,7 @@ export interface DevServerConfig {
   designRoot: string;
   canvasGroups: CanvasGroup[];
   designSystems?: DesignSystemEntry[];
+  defaultDesignSystem?: string;
   rootClass: string;
   themeDefault: 'dark' | 'light';
   tokensCssRel: string;
@@ -124,18 +125,51 @@ function loadConfig(repoRoot: string): DevServerConfig {
   try {
     raw = readFileSync(configPath, 'utf8');
   } catch {
-    return { ...DEFAULT_CONFIG, _source: 'defaults' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, _source: 'defaults' });
   }
   try {
     const parsed = JSON.parse(raw);
-    return { ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, ...parsed, _source: '.design/config.json' });
   } catch (e) {
     const msg = e instanceof Error ? e.message : String(e);
     console.error(`  warn: ${configPath} is not valid JSON: ${msg}. Using defaults.`);
-    return { ...DEFAULT_CONFIG, _source: 'defaults (config invalid)' };
+    return normalizeConfig({ ...DEFAULT_CONFIG, _source: 'defaults (config invalid)' });
   }
 }
 
+/**
+ * Fill in per-DS `tokensCssRel` defaults so the system view can read each DS's
+ * tokens without forcing every config author to spell out the path. When an
+ * entry omits `tokensCssRel`, derive it from `<entry.path>/colors_and_type.css`
+ * — the scaffold layout `/design:setup-ds` produces. Also strips leading /
+ * trailing slashes from `entry.path` so downstream `path.posix.join` calls
+ * don't produce double-slash artifacts.
+ *
+ * The top-level `cfg.tokensCssRel` is preserved untouched as the
+ * project-wide fallback for legacy single-DS configs that don't declare
+ * `designSystems[]` at all.
+ *
+ * DDR-048: the system view renders user tokens only; this normalization is the
+ * load-bearing step that makes per-DS rendering possible.
+ */
+export function normalizeDesignSystems<T extends DevServerConfig>(cfg: T): T {
+  if (!cfg.designSystems?.length) return cfg;
+  const designSystems = cfg.designSystems.map((entry) => {
+    const p = entry.path.replace(/^\/+|\/+$/g, '');
+    return {
+      ...entry,
+      path: p,
+      tokensCssRel:
+        entry.tokensCssRel?.replace(/^\/+/, '') ?? path.posix.join(p, 'colors_and_type.css'),
+    };
+  });
+  return { ...cfg, designSystems };
+}
+
+function normalizeConfig(cfg: DevServerConfig): DevServerConfig {
+  return normalizeDesignSystems(cfg);
+}
+
 export function createContext(): Context {
   const repoRoot = resolveRepoRoot();
 

package/plugins/design/dev-server/contextual-toolbar.tsx

@@ -0,0 +1,241 @@
+/**
+ * @file       contextual-toolbar.tsx — T30 (Wave 3)
+ * @scope      plugins/design/dev-server/contextual-toolbar.tsx
+ * @purpose    Selection-anchored floating chrome for ELEMENT selections
+ *             (cd-id entries in the selection set). Mirrors the
+ *             MultiArtboardToolbar pattern but scopes to user content inside
+ *             artboards. Actions surface the existing right-click handlers
+ *             one click closer:
+ *
+ *               • Copy CSS path
+ *               • Copy data-cd-id
+ *               • Add comment
+ *
+ *             Hides when:
+ *               - no selection,
+ *               - selection contains only artboards (MultiArtboardToolbar
+ *                 covers that),
+ *               - selection contains only annotations (their own toolbar
+ *                 fires from `annotations-context-toolbar.tsx`).
+ *
+ *             Anchored 14 px above the element selection union bbox; flips
+ *             below when bbox top is < 60 px from the viewport edge — same
+ *             contract as MultiArtboardToolbar so the two never collide.
+ *
+ *             Selection-change tweens are NOT animated here in v1; the
+ *             instant reposition is acceptable given the toolbar fades in
+ *             only when stickily relevant. A future polish wave can add
+ *             the 180 ms position tween per the plan note.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { useSelectionSet } from './use-selection-set.tsx';
+
+const CTX_TOOLBAR_CSS = `
+.dc-elem-ctx-tb {
+  position: fixed;
+  pointer-events: auto;
+  z-index: 6;
+  display: none;
+  align-items: stretch;
+  gap: 2px;
+  padding: 4px;
+  background: var(--u-bg-0, var(--bg-0, #ffffff));
+  border: 1px solid var(--u-fg-0, #1c1917);
+  border-radius: 8px;
+  box-shadow: 0 6px 24px color-mix(in oklab, var(--u-fg-0, #1c1917) 10%, transparent);
+  font-family: var(--u-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 11px;
+  letter-spacing: 0.02em;
+  color: var(--u-fg-0, #1a1a1a);
+  user-select: none;
+  opacity: 0;
+  transition: opacity 100ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dc-elem-ctx-tb[data-on="true"] {
+  opacity: 1;
+}
+.dc-elem-ctx-tb button {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: 6px;
+  padding: 4px 10px;
+  font: inherit;
+  cursor: pointer;
+  color: inherit;
+  transition: background-color 80ms linear;
+}
+.dc-elem-ctx-tb button:hover {
+  background: color-mix(in oklab, var(--accent, #d63b1f) 8%, transparent);
+}
+.dc-elem-ctx-tb .dc-elem-ctx-count {
+  padding: 4px 8px 4px 10px;
+  color: var(--fg-1, rgba(40,30,20,0.7));
+  border-right: 1px solid var(--u-border-subtle, rgba(0,0,0,0.08));
+  margin-right: 2px;
+  font-variant-numeric: tabular-nums;
+}
+@media (prefers-reduced-motion: reduce) {
+  .dc-elem-ctx-tb, .dc-elem-ctx-tb button { transition: none; }
+}
+`.trim();
+
+function ensureStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-elem-ctx-tb-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-elem-ctx-tb-css';
+  s.textContent = CTX_TOOLBAR_CSS;
+  document.head.appendChild(s);
+}
+
+function copyText(text: string): void {
+  if (typeof navigator === 'undefined' || !navigator.clipboard) return;
+  void navigator.clipboard.writeText(text).catch(() => {
+    /* clipboard blocked */
+  });
+}
+
+function openComposerForSelection(
+  sel: { id?: string; selector: string },
+  anchorEl: Element | null
+): void {
+  if (typeof document === 'undefined') return;
+  // Anchor near the top-right of the targeted element so the composer drops
+  // into a clear area next to it. Matches the comment-tool click affordance
+  // post-G4 (cursor-anchored composer).
+  let clientX = 0;
+  let clientY = 0;
+  if (anchorEl) {
+    const r = (anchorEl as HTMLElement).getBoundingClientRect();
+    clientX = r.right - 8;
+    clientY = r.top + r.height / 2;
+  }
+  try {
+    document.dispatchEvent(
+      new CustomEvent('cm:open-composer', {
+        detail: { selection: sel, clientX, clientY },
+      })
+    );
+  } catch {
+    /* CustomEvent unsupported — fall through */
+  }
+  // Back-compat parent post for legacy mocks.
+  if (typeof window !== 'undefined') {
+    try {
+      window.parent.postMessage({ dgn: 'comment-compose', selection: sel }, '*');
+    } catch {
+      /* parent detached */
+    }
+  }
+}
+
+export function ContextualToolbar() {
+  ensureStyles();
+  const { selected } = useSelectionSet();
+  const ref = useRef<HTMLDivElement | null>(null);
+  const rafRef = useRef<number | null>(null);
+
+  // Element selections = entries with `id` (data-cd-id) set. Pure artboard
+  // selections (artboardId-only, no id) and empty sets fall through.
+  const elementSelections = selected.filter((s) => !!s.id);
+  const visible = elementSelections.length > 0;
+
+  useEffect(() => {
+    const div = ref.current;
+    if (!div) return;
+    if (!visible) {
+      div.style.display = 'none';
+      div.setAttribute('data-on', 'false');
+      return;
+    }
+    const tick = () => {
+      rafRef.current = null;
+      let xMin = Number.POSITIVE_INFINITY;
+      let yMin = Number.POSITIVE_INFINITY;
+      let xMax = Number.NEGATIVE_INFINITY;
+      let yMax = Number.NEGATIVE_INFINITY;
+      let any = false;
+      for (const sel of elementSelections) {
+        const node = sel.id
+          ? document.querySelector(`[data-cd-id="${sel.id}"]`)
+          : document.querySelector(sel.selector);
+        if (!node) continue;
+        const r = (node as HTMLElement).getBoundingClientRect();
+        if (r.width === 0 && r.height === 0) continue;
+        any = true;
+        if (r.left < xMin) xMin = r.left;
+        if (r.top < yMin) yMin = r.top;
+        if (r.right > xMax) xMax = r.right;
+        if (r.bottom > yMax) yMax = r.bottom;
+      }
+      if (!any) {
+        div.style.display = 'none';
+        div.setAttribute('data-on', 'false');
+        rafRef.current = requestAnimationFrame(tick);
+        return;
+      }
+      div.style.display = 'flex';
+      const tw = div.offsetWidth || 0;
+      const centerX = (xMin + xMax) / 2;
+      const top = yMin;
+      const gap = 14;
+      let anchorY = top - div.offsetHeight - gap;
+      if (anchorY < 60) anchorY = yMax + gap;
+      div.style.left = `${Math.round(centerX - tw / 2)}px`;
+      div.style.top = `${Math.round(anchorY)}px`;
+      div.setAttribute('data-on', 'true');
+      rafRef.current = requestAnimationFrame(tick);
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => {
+      if (rafRef.current != null) cancelAnimationFrame(rafRef.current);
+    };
+  }, [visible, elementSelections]);
+
+  if (!visible) {
+    return <div ref={ref} className="dc-elem-ctx-tb" aria-hidden="true" />;
+  }
+
+  // For multi-selection, Copy actions operate on the FIRST element — same
+  // convention as the right-click menu (single-target). Future polish: a
+  // mini-menu that lets the user pick which selection's CSS to copy.
+  const primary = elementSelections[0];
+  const count = elementSelections.length;
+
+  return (
+    <div ref={ref} className="dc-elem-ctx-tb" role="toolbar" aria-label="Element actions">
+      <span className="dc-elem-ctx-count">{count === 1 ? '1 element' : `${count} elements`}</span>
+      <button
+        type="button"
+        title="Copy CSS selector"
+        onClick={() => primary && copyText(primary.selector)}
+      >
+        Copy CSS
+      </button>
+      <button
+        type="button"
+        title="Copy data-cd-id"
+        disabled={!primary?.id}
+        onClick={() => primary?.id && copyText(primary.id)}
+      >
+        Copy ID
+      </button>
+      <button
+        type="button"
+        title="Add comment on this element"
+        onClick={() => {
+          if (!primary) return;
+          const node = primary.id
+            ? document.querySelector(`[data-cd-id="${primary.id}"]`)
+            : document.querySelector(primary.selector);
+          openComposerForSelection(primary, node);
+        }}
+      >
+        Comment
+      </button>
+    </div>
+  );
+}