@1agh/maude 0.18.2 → 0.19.1

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

@@ -155,7 +155,7 @@ export interface Api {
   saveAnnotations(file: string, svg: string): Promise<boolean>;
   // Aggregate data
   buildIndexData(): Promise<unknown>;
-  buildSystemData(): Promise<unknown>;
+  buildSystemData(dsName?: string | null): Promise<unknown>;
   // Export history (Phase 6.5 T10)
   loadExportHistory(): Promise<ExportHistoryEntry[]>;
   appendExportHistory(entry: ExportHistoryEntry): Promise<void>;
@@ -765,9 +765,34 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     return tokens;
   }
 
-  async function buildSystemData() {
-    const sysAbs = path.join(paths.designRoot, paths.systemDirRel);
-    const sysRel = path.posix.join(paths.designRel, paths.systemDirRel);
+  /**
+   * Build the System view payload.
+   *
+   * - When `dsName` is null/undefined, scope to the top-level system dir
+   *   (`paths.systemDirRel`) and read tokens from `cfg.tokensCssRel`. This is
+   *   the legacy single-DS shape every pre-DDR-048 caller sees.
+   * - When `dsName` is provided, scope to the matching `designSystems[]` entry:
+   *   `sysAbs`/`sysRel` point at the DS folder, `tokensAbs` reads from the
+   *   per-DS `tokensCssRel` (auto-resolved by `normalizeDesignSystems`), and
+   *   the previews/ui_kits galleries are restricted to that DS subtree.
+   *
+   * Returns `null` when `dsName` is set but not found in `cfg.designSystems` so
+   * the HTTP handler can 404 instead of silently falling back.
+   *
+   * DDR-048 — system view renders user tokens only; the per-DS scope is what
+   * keeps multi-DS projects from blending the wrong tokens into the wrong
+   * preview gallery.
+   */
+  async function buildSystemData(dsName?: string | null) {
+    let dsEntry: NonNullable<typeof cfg.designSystems>[number] | null = null;
+    if (dsName) {
+      dsEntry = cfg.designSystems?.find((d) => d.name === dsName) ?? null;
+      if (!dsEntry) return null;
+    }
+
+    const scopedSystemRel = dsEntry ? dsEntry.path : paths.systemDirRel;
+    const sysAbs = path.join(paths.designRoot, scopedSystemRel);
+    const sysRel = path.posix.join(paths.designRel, scopedSystemRel);
 
     let readme: string | null = null;
     let readmePath: string | null = null;
@@ -794,8 +819,12 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
 
     let tokens: ReturnType<typeof parseTokens> = [];
     let tokensPath: string | null = null;
+    // Per-DS tokens path (auto-resolved by normalizeDesignSystems) wins; the
+    // top-level cfg.tokensCssRel is a project-wide fallback for legacy
+    // single-DS configs that don't declare `designSystems[]`. DDR-048.
+    const tokensCssRel = dsEntry?.tokensCssRel ?? cfg.tokensCssRel;
     try {
-      const tokensAbs = path.join(paths.designRoot, cfg.tokensCssRel);
+      const tokensAbs = path.join(paths.designRoot, tokensCssRel);
       const css = await readFile(tokensAbs, 'utf8');
       tokens = parseTokens(css);
       tokensPath = path.relative(paths.repoRoot, tokensAbs);
@@ -812,16 +841,21 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     async function galleryFor(folderName: string) {
       const matches: { abs: string; rel: string }[] = [];
       try {
-        const subs = await readdir(sysAbs, { withFileTypes: true });
-        for (const s of subs) {
-          if (!s.isDirectory()) continue;
-          const candidate = path.join(sysAbs, s.name, folderName);
-          try {
-            const st = await statp(candidate);
-            if (st.isDirectory())
-              matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
-          } catch {
-            /* ignore */
+        // When scoped to a single DS (sysAbs IS the DS folder), only check
+        // the DS-relative `<folderName>` subdir — scanning sub-dirs here
+        // would treat the DS's own `preview/` as a sibling DS root.
+        if (!dsEntry) {
+          const subs = await readdir(sysAbs, { withFileTypes: true });
+          for (const s of subs) {
+            if (!s.isDirectory()) continue;
+            const candidate = path.join(sysAbs, s.name, folderName);
+            try {
+              const st = await statp(candidate);
+              if (st.isDirectory())
+                matches.push({ abs: candidate, rel: path.posix.join(sysRel, s.name, folderName) });
+            } catch {
+              /* ignore */
+            }
           }
         }
         try {
@@ -839,12 +873,12 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
       }
       const items: { label: string; path: string; group: string }[] = [];
       for (const m of matches) {
-        const files = await findFiles(m.abs, m.rel, ['.html']);
+        const files = await findFiles(m.abs, m.rel, ['.tsx', '.html']);
         for (const f of files) {
           const fname = f
             .split('/')
             .pop()
-            ?.replace(/\.html$/i, '');
+            ?.replace(/\.(tsx|html)$/i, '');
           const group = f.split('/').slice(-2, -1)[0] || folderName;
           const label = fname.toLowerCase() === 'index' ? group : fname;
           items.push({ label, path: f, group });
@@ -856,10 +890,29 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
     const previewGallery = await galleryFor('preview');
     const uiKitsGallery = await galleryFor('ui_kits');
 
+    // Always advertise the available DSes so the client can render the picker
+    // even when the initial fetch was unscoped — avoids a second roundtrip.
+    const availableDesignSystems = (cfg.designSystems ?? []).map((d) => ({
+      name: d.name,
+      path: d.path,
+      description: d.description ?? null,
+    }));
+
     return {
       project: cfg.name,
       designRoot: paths.designRel,
       systemDir: sysRel,
+      ds: dsEntry
+        ? {
+            name: dsEntry.name,
+            path: dsEntry.path,
+            description: dsEntry.description ?? null,
+            rootClass: dsEntry.rootClass ?? null,
+            themeDefault: dsEntry.themeDefault ?? null,
+          }
+        : null,
+      availableDesignSystems,
+      defaultDesignSystem: cfg.defaultDesignSystem ?? availableDesignSystems[0]?.name ?? null,
       readme,
       readmePath,
       tokens,
@@ -867,8 +920,8 @@ export function createApi(ctx: Context, onCommentsChanged: (file: string) => voi
       tokensPath,
       previewGallery,
       uiKitsGallery,
-      rootClass: cfg.rootClass,
-      themeDefault: cfg.themeDefault,
+      rootClass: dsEntry?.rootClass ?? cfg.rootClass,
+      themeDefault: dsEntry?.themeDefault ?? cfg.themeDefault,
       teamAccentDefault: cfg.teamAccentDefault,
     };
   }

package/plugins/design/dev-server/artboard-marquee.tsx

@@ -0,0 +1,170 @@
+/**
+ * @file       artboard-marquee.tsx — Task 24 sub-item (Wave 2 follow-up, G8)
+ * @scope      plugins/design/dev-server/artboard-marquee.tsx
+ * @purpose    Drag-to-lasso multi-select for artboards. Bare-button pointerdown
+ *             on empty world (NOT inside any artboard, NOT on floating chrome)
+ *             starts a marquee. 4 px drag threshold suppresses click jitter.
+ *             pointerup intersects the marquee AABB with every artboard's
+ *             screen-coord bbox; hits become Selection entries with
+ *             `artboardId` set. Modifier semantics — bare = replace, Shift
+ *             = add (Alt-subtract / Shift+Alt-intersect are deferred).
+ *
+ *             The marquee rect itself follows DDR-046 rev 2: 1 px solid
+ *             accent border + 8 % accent fill. SOLID, not dashed — solid +
+ *             tinted fill = "active gesture" idiom, dashed = persistent
+ *             group bbox.
+ */
+
+import { useEffect, useRef } from 'react';
+
+import { useArtboardsContext } from './canvas-lib.tsx';
+import { type Selection, useSelectionSet } from './use-selection-set.tsx';
+import { useToolMode } from './use-tool-mode.tsx';
+
+const DRAG_THRESHOLD_PX = 4;
+
+const MARQUEE_CSS = `
+.dc-cv-marquee {
+  position: fixed;
+  pointer-events: none;
+  z-index: 5;
+  border: 1px solid var(--accent, #0d99ff);
+  background: color-mix(in oklab, var(--accent, #0d99ff) 8%, transparent);
+  display: none;
+}
+`.trim();
+
+function ensureMarqueeStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-cv-marquee-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-cv-marquee-css';
+  s.textContent = MARQUEE_CSS;
+  document.head.appendChild(s);
+}
+
+function shouldIgnoreTarget(t: EventTarget | null): boolean {
+  if (!t || !(t as Element).closest) return true;
+  const el = t as Element;
+  // Skip if the pointerdown landed inside any artboard — that's a select-
+  // or-drag gesture, not a marquee. Same hard ceiling as resolveHoverTarget.
+  if (el.closest('[data-dc-screen]')) return true;
+  // Skip floating chrome and existing overlays (their click handlers run).
+  if (
+    el.closest(
+      '.dc-mm, .dc-zoom-tb, .dc-tool-palette, .dc-context-menu, .dc-cv-halo, .dc-cv-group-bbox, .cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, .dc-annot-svg, .dc-annot-ctx, .dc-tp-popover, .dc-annot-resize-handle'
+    )
+  ) {
+    return true;
+  }
+  return false;
+}
+
+export function ArtboardMarqueeOverlay() {
+  ensureMarqueeStyles();
+  const selSet = useSelectionSet();
+  const artboardsCtx = useArtboardsContext();
+  const { tool } = useToolMode();
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const stateRef = useRef<{
+    pointerId: number;
+    startX: number;
+    startY: number;
+    crossed: boolean;
+    shift: boolean;
+  } | null>(null);
+
+  useEffect(() => {
+    if (tool !== 'move') return;
+    if (typeof document === 'undefined') return;
+
+    const onDown = (e: PointerEvent) => {
+      if (e.button !== 0) return;
+      // Bare or Shift only — Cmd/Ctrl/Alt clicks belong to other gestures
+      // (Cmd-select, Alt-copy-drag) and shouldn't start a marquee.
+      if (e.metaKey || e.ctrlKey || e.altKey) return;
+      if (shouldIgnoreTarget(e.target)) return;
+      stateRef.current = {
+        pointerId: e.pointerId,
+        startX: e.clientX,
+        startY: e.clientY,
+        crossed: false,
+        shift: e.shiftKey,
+      };
+    };
+
+    const onMove = (e: PointerEvent) => {
+      const s = stateRef.current;
+      if (!s || e.pointerId !== s.pointerId) return;
+      const dx = e.clientX - s.startX;
+      const dy = e.clientY - s.startY;
+      if (!s.crossed) {
+        if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;
+        s.crossed = true;
+        // Per post-Wave-2 feedback, the marquee never pre-emptively clears
+        // the existing selection. The set is only updated on pointerup if
+        // the marquee actually captured something — empty-marquee + bare-
+        // click preserve the previous selection. Esc is the only deselect.
+      }
+      const div = overlayRef.current;
+      if (!div) return;
+      const left = Math.min(s.startX, e.clientX);
+      const top = Math.min(s.startY, e.clientY);
+      const w = Math.abs(dx);
+      const h = Math.abs(dy);
+      div.style.display = 'block';
+      div.style.left = `${left}px`;
+      div.style.top = `${top}px`;
+      div.style.width = `${w}px`;
+      div.style.height = `${h}px`;
+    };
+
+    const finish = (e: PointerEvent) => {
+      const s = stateRef.current;
+      if (!s || e.pointerId !== s.pointerId) return;
+      stateRef.current = null;
+      const div = overlayRef.current;
+      if (div) div.style.display = 'none';
+      if (!s.crossed) return;
+      if (!artboardsCtx) return;
+
+      // Intersect the marquee AABB with each artboard's screen-coord bbox.
+      // getBoundingClientRect on the article reads the post-zoom, post-pan
+      // screen position — exactly what we want, no manual world↔screen math.
+      const left = Math.min(s.startX, e.clientX);
+      const top = Math.min(s.startY, e.clientY);
+      const right = Math.max(s.startX, e.clientX);
+      const bottom = Math.max(s.startY, e.clientY);
+      const hits: Selection[] = [];
+      for (const r of artboardsCtx.artboards) {
+        const el = document.querySelector(`[data-dc-screen="${r.id}"]`);
+        if (!el) continue;
+        const b = (el as HTMLElement).getBoundingClientRect();
+        if (b.width === 0 && b.height === 0) continue;
+        // AABB intersection test — any overlap counts as a hit.
+        if (b.right < left || b.left > right) continue;
+        if (b.bottom < top || b.top > bottom) continue;
+        hits.push({
+          selector: `[data-dc-screen="${r.id}"]`,
+          artboardId: r.id,
+        });
+      }
+      if (hits.length === 0) return;
+      if (s.shift) selSet.add(hits);
+      else selSet.replace(hits);
+    };
+
+    document.addEventListener('pointerdown', onDown, true);
+    document.addEventListener('pointermove', onMove);
+    document.addEventListener('pointerup', finish);
+    document.addEventListener('pointercancel', finish);
+    return () => {
+      document.removeEventListener('pointerdown', onDown, true);
+      document.removeEventListener('pointermove', onMove);
+      document.removeEventListener('pointerup', finish);
+      document.removeEventListener('pointercancel', finish);
+    };
+  }, [tool, selSet, artboardsCtx]);
+
+  return <div ref={overlayRef} className="dc-cv-marquee" aria-hidden="true" />;
+}

package/plugins/design/dev-server/canvas-lib-resolver.ts

@@ -27,15 +27,24 @@ import path from 'node:path';
 
 import type { BunPlugin } from 'bun';
 
+import { DEV_SERVER_ROOT } from './paths.ts';
+
 export const CANVAS_LIB_SPECIFIER = '@maude/canvas-lib';
 
 /**
  * Returns the dev-server-internal canvas-lib path. The `_designRoot` parameter
  * is retained for one minor (back-compat with callers we don't control) but
  * ignored — canvas-lib now ships with the dev-server install (DDR-025).
+ *
+ * Uses DEV_SERVER_ROOT (paths.ts) instead of `import.meta.dir` per DDR-045 —
+ * inside `bun --compile` standalone binaries `import.meta.dir` resolves to the
+ * virtual `/$bunfs/root` and any subsequent `existsSync` / `fs.watch` against
+ * that path silently fails. Same bug class as v0.18.0/0.18.1; this one surfaces
+ * as `[canvas-lib] failed to watch ... '/$bunfs/root/canvas-lib.tsx'` at boot
+ * and disables canvas-lib HMR.
  */
 export function canvasLibPath(_designRoot?: string): string {
-  return path.join(import.meta.dir, 'canvas-lib.tsx');
+  return path.join(DEV_SERVER_ROOT, 'canvas-lib.tsx');
 }
 
 export interface CanvasLibResolverOptions {