npm - @1agh/maude - Versions diffs - 0.40.0 → 0.41.0 - Mend

@1agh/maude 0.40.0 → 0.41.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (73) hide show

package/apps/studio/ai-banner.tsx +2 -2
package/apps/studio/annotations-layer.tsx +53 -2
package/apps/studio/api.ts +504 -3
package/apps/studio/artboard-marquee.tsx +1 -1
package/apps/studio/bin/_canvas-rects-playwright.mjs +55 -0
package/apps/studio/bin/_canvas-rects-static.mjs +166 -0
package/apps/studio/bin/_fetch-asset.mjs +556 -0
package/apps/studio/bin/annotate.mjs +576 -34
package/apps/studio/bin/canvas-rects.sh +152 -0
package/apps/studio/bin/fetch-asset.sh +34 -0
package/apps/studio/bin/read-annotations.mjs +138 -7
package/apps/studio/bin/smoke.sh +42 -6
package/apps/studio/build.ts +21 -0
package/apps/studio/canvas-comment-mount.tsx +138 -4
package/apps/studio/canvas-edit.ts +744 -11
package/apps/studio/canvas-lib.tsx +219 -2
package/apps/studio/canvas-shell.tsx +487 -20
package/apps/studio/client/app.jsx +1451 -22
package/apps/studio/client/comments-overlay.css +130 -126
package/apps/studio/client/github.js +8 -0
package/apps/studio/client/styles/3-shell-maude.css +48 -0
package/apps/studio/comments-overlay.tsx +148 -41
package/apps/studio/context-menu.tsx +15 -5
package/apps/studio/contextual-toolbar.tsx +262 -4
package/apps/studio/cursors-overlay.tsx +4 -4
package/apps/studio/dist/client.bundle.js +20 -20
package/apps/studio/dist/comment-mount.js +59 -1
package/apps/studio/dist/styles.css +1 -1
package/apps/studio/dom-selection.ts +127 -1
package/apps/studio/drag-state.ts +24 -0
package/apps/studio/equal-spacing-detector.ts +205 -0
package/apps/studio/export-dialog.tsx +1 -1
package/apps/studio/history.ts +47 -1
package/apps/studio/http.ts +223 -0
package/apps/studio/input-router.tsx +12 -0
package/apps/studio/marquee-overlay.tsx +1 -1
package/apps/studio/measure-overlay.tsx +241 -0
package/apps/studio/participants-chrome.tsx +3 -3
package/apps/studio/sizing-mode.ts +117 -0
package/apps/studio/spacing-handles.ts +166 -0
package/apps/studio/test/annotate-write.test.ts +890 -0
package/apps/studio/test/camera-reveal.test.tsx +173 -0
package/apps/studio/test/canvas-edit.test.ts +50 -0
package/apps/studio/test/canvas-origin-gate.test.ts +18 -0
package/apps/studio/test/canvas-rects.test.ts +198 -0
package/apps/studio/test/comments-overlay.test.ts +117 -0
package/apps/studio/test/dom-selection.test.ts +130 -0
package/apps/studio/test/edit-css-occurrence.test.ts +81 -0
package/apps/studio/test/edit-scope-api.test.ts +115 -0
package/apps/studio/test/element-resize.test.ts +136 -0
package/apps/studio/test/element-structural-api.test.ts +360 -0
package/apps/studio/test/element-structural-edit.test.ts +233 -0
package/apps/studio/test/equal-spacing-detector.test.ts +165 -1
package/apps/studio/test/history-rollback.test.ts +26 -0
package/apps/studio/test/knob-props-authored.test.ts +87 -0
package/apps/studio/test/read-annotations.test.ts +154 -0
package/apps/studio/test/sizing-mode.test.ts +102 -0
package/apps/studio/test/spacing-handles.test.ts +138 -0
package/apps/studio/test/specimen-select.test.ts +88 -0
package/apps/studio/test/tool-palette-insert-anchor.test.ts +84 -0
package/apps/studio/test/undo-sequence-byte-compare.test.ts +211 -0
package/apps/studio/tool-palette.tsx +122 -2
package/apps/studio/undo-hud.tsx +2 -2
package/apps/studio/use-element-resize.tsx +732 -0
package/apps/studio/use-keyboard-discipline.tsx +205 -15
package/apps/studio/use-selection-set.tsx +14 -0
package/apps/studio/use-spacing-handles.tsx +388 -0
package/apps/studio/whats-new.json +28 -0
package/cli/commands/design.mjs +6 -1
package/cli/commands/design.test.mjs +49 -1
package/cli/lib/fetch-asset.test.mjs +213 -0
package/package.json +8 -8
package/plugins/design/dependencies.json +10 -2

package/apps/studio/canvas-lib.tsx CHANGED Viewed

@@ -47,6 +47,16 @@
  *   useTheme()         Current theme + setter, syncs to <html data-theme>.
  *   useArtboardBounds(ref) ResizeObserver wrapper returning {width,height}.
  *
+ *   Whiteboard toolkit (feature-whiteboard-ai-toolkit) ────────────────────
+ *   window.__maudeCanvasRects() Installed as a side effect on module load.
+ *                      Returns { artboards, elements, elementsTruncated } in
+ *                      WORLD coords — the geometry manifest `maude design
+ *                      canvas-rects` reads via headless Chromium so the
+ *                      annotation read/write verbs never hand-compute a
+ *                      coordinate. See the section right after DCArtboard.
+ *   getLiveViewport()  The live pan/zoom, readable outside the React tree —
+ *                      what the hook above converts screen rects through.
+ *
  * Authoring vocabulary. Lift these before re-implementing equivalents. The
  * surface intentionally mirrors the .html-era specimen idioms one-for-one
  * (`.specimen-hd`, `.specimen-meta`, `.sku`, `.swatch`, `.stamp`) so existing
@@ -95,6 +105,7 @@ import {
   buildMoveArtboardsRecord,
   diffLayoutPositions,
 } from './commands/move-artboards-command.ts';
+import { scopedCdSelector, selectorIndex, shortText } from './dom-selection.ts';
 import { AgentPresenceProvider, useAgentPresence } from './use-agent-presence.tsx';
 import { type DragState, useArtboardDrag } from './use-artboard-drag.tsx';
 import {
@@ -246,6 +257,28 @@ const ENGINE_CSS = `
   display: flex;
   flex-direction: column;
   overflow: hidden;
+  /* Per-board compositor freeze (RCA: large filter/blend-heavy canvases jank on
+     pan/zoom). Promote each artboard to its own GPU layer that rasterizes ONCE
+     into a fixed bitmap the compositor then translates/scales — instead of
+     re-running its paint every frame. Load-bearing on WebKit/WKWebView, which
+     does NOT hardware-accelerate SVG url() reference filters or feTurbulence
+     (only CSS shorthand filters), so a scale change would otherwise re-RASTER
+     every board's poster/grain/blend at once (the fit-all zoom cliff).
+     will-change:transform (NOT plain translateZ(0)) is the fix: it freezes the
+     rastered bitmap so it never re-rasters under transform updates — fit-all pan
+     composites finished textures, zoom SCALES them (sharp when zoomed out).
+     Filters stay LIVE in the DOM — nothing baked — so the exact look and full
+     editability are preserved; paint just happens once per board, not per frame.
+     isolation:isolate bounds each board's blend backdrop so the texture is
+     self-contained/cacheable (isolation/contain do not themselves promote —
+     will-change does). content-visibility (on .dc-positioned) culls off-screen
+     boards so the promoted-layer count + GPU memory stay bounded to what's in
+     view. NB: this is the realistic ceiling on WebKit — a Chromium engine (Blink)
+     GPU-accelerates url() filters and renders such canvases more smoothly.
+     See .ai/logs/rca/issue-canvas-pan-zoom-jank-large-moodboard.md. */
+  isolation: isolate;
+  contain: paint;
+  will-change: transform;
 }
 .dc-canvas .dc-artboard.dc-positioned { position: absolute; }
 .dc-canvas .dc-artboard-label {
@@ -685,6 +718,15 @@ function fitRectIntoHost(rect: ArtboardRect, hostEl: HTMLElement, pad = 24): Vie
 // then. Written on every applyViewport (exact — no settle/publish lag).
 let liveViewport: ViewportState | null = null;
+/**
+ * The current pan/zoom, read from OUTSIDE the React tree — the
+ * `window.__maudeCanvasRects()` hook (below) has no component instance to
+ * hook into, so it reads this module-scope mirror instead of WorldContext.
+ */
+export function getLiveViewport(): ViewportState | null {
+  return liveViewport ? { ...liveViewport } : null;
+}
 export function useViewportController(opts: ViewportControllerOptions): ViewportControllerHandle {
   const {
     hostRef,
@@ -704,6 +746,13 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
   const [isInteracting, setIsInteracting] = useState(false);
   const interactingRef = useRef(false);
   const isInteractingStateRef = useRef(false);
+  // Snapshot of the zoom at the START of each interaction burst. Lets the
+  // WebKit settle re-raster (writeTransform crisp) fire ONLY when the gesture
+  // actually changed scale — a pure pan is scale-invariant, so re-rasterizing
+  // the whole world plane on pan-settle is wasted work (the "seká po dojezdu"
+  // tail-spike on large canvases). RCA:
+  // .ai/logs/rca/issue-canvas-pan-zoom-jank-large-moodboard.md
+  const zoomAtInteractStartRef = useRef(1);
   // Throttle / settle timers.
   const publishTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -788,6 +837,9 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
     interactingRef.current = true;
     if (!isInteractingStateRef.current) {
       isInteractingStateRef.current = true;
+      // Start of a fresh gesture burst — remember the scale so settle can tell
+      // a pure pan (skip the crisp re-raster) from a zoom (needs it).
+      zoomAtInteractStartRef.current = vpRef.current.zoom;
       setIsInteracting(true);
     }
     if (interactEndTimerRef.current != null) clearTimeout(interactEndTimerRef.current);
@@ -799,7 +851,12 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
       // Motion has stopped — re-write the world transform in crisp mode so the
       // WebKit path drops its compositor layer and re-rasterizes text sharply at
       // the settled scale. No-op on the Blink path (CSS `zoom` is already crisp).
-      writeTransform(vpRef.current, { crisp: true });
+      // Skip it when the burst never changed scale (pure pan): the layer is
+      // already crisp at this zoom, so releasing + repainting the whole world
+      // plane would be a wasted main-thread spike on large canvases.
+      if (vpRef.current.zoom !== zoomAtInteractStartRef.current) {
+        writeTransform(vpRef.current, { crisp: true });
+      }
     }, 220);
   }, [writeTransform]);
@@ -957,6 +1014,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
     const initial = getInitial();
     if (initial) {
       vpRef.current = { ...initial };
+      liveViewport = { ...initial }; // mirror pre-first-gesture so headless capture sees it
       writeTransform(vpRef.current, { crisp: true });
       setViewportPublished({ ...vpRef.current });
     }
@@ -970,6 +1028,7 @@ export function useViewportController(opts: ViewportControllerOptions): Viewport
         hadSize = true;
         const refit = computeFitRef.current();
         vpRef.current = { ...refit };
+        liveViewport = { ...refit };
         writeTransform(vpRef.current, { crisp: true });
         setViewportPublished({ ...vpRef.current });
       }
@@ -1791,7 +1850,23 @@ export function DCArtboard({
         className={`dc-artboard dc-positioned${isInDrag ? ' dc-dragging' : ''}`}
         data-dc-screen={id}
         aria-current={isActive ? 'true' : undefined}
-        style={{ left: liveX, top: liveY, width: rect.w, height: rect.h }}
+        style={{
+          left: liveX,
+          top: liveY,
+          width: rect.w,
+          height: rect.h,
+          // Off-screen artboards skip layout+paint. On a large multi-board
+          // canvas (e.g. an 18-board moodboard) every board otherwise paints
+          // onto one huge .dc-world plane whose device-pixel size exceeds
+          // WebKit's ~16384px texture limit, forcing tile repaints on every
+          // pan/zoom. content-visibility localizes each board's paint and culls
+          // the ones outside the viewport; contain-intrinsic-size preserves the
+          // box so the model-based fit math (computeFit reads ArtboardRects,
+          // never the DOM) and drag hit-testing are unaffected. RCA:
+          // .ai/logs/rca/issue-canvas-pan-zoom-jank-large-moodboard.md
+          contentVisibility: 'auto',
+          containIntrinsicSize: `${rect.w}px ${rect.h}px`,
+        }}
         {...handleProps}
       >
         <button type="button" className="dc-artboard-label sku" aria-label={`Artboard ${label}`}>
@@ -1812,6 +1887,148 @@ export function DCArtboard({
 }
 DCArtboard.displayName = 'DCArtboard';
+// ─────────────────────────────────────────────────────────────────────────────
+// window.__maudeCanvasRects() — the whiteboard-toolkit geometry manifest hook
+// (feature-whiteboard-ai-toolkit). `maude design canvas-rects` (a headless
+// Chromium shim) calls this to get every artboard's + every meaningful
+// element's WORLD-coordinate rect, so the annotation read/write verbs
+// (`read-annotations --rects`, `annotate --in/--pin/--board`) never need to
+// hand-compute a coordinate. Pure DOM + the `liveViewport` mirror above — no
+// React context needed, so it works from a plain page.evaluate() call with no
+// regard for which component tree happens to be mounted.
+//
+// World-coord conversion mirrors DesignCanvasInner's `activeArtboardId` math
+// (canvas = translate(vp.x,vp.y) then scale(vp.zoom) applied to `.dc-world`):
+//   worldX = (screenX - hostRect.left - vp.x) / vp.zoom
+// A `.dc-canvas` host is required (bare DS specimens have no world plane —
+// this hook is for UI canvases with artboards, so it returns an empty
+// manifest there rather than guessing).
+export interface CanvasRectsElement {
+  cdId: string | null;
+  selector: string;
+  index: number;
+  artboard: string | null;
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+  tag: string;
+  text: string;
+}
+export interface CanvasRectsManifest {
+  artboards: ArtboardRect[];
+  elements: CanvasRectsElement[];
+  elementsTruncated: boolean;
+}
+// Comment/annotation/chrome subtrees never make useful annotation targets —
+// mirrors the pickSpecimenEl chrome denylist (canvas-comment-mount.tsx) plus
+// the annotation layer's own root.
+const RECTS_CHROME_SELECTOR =
+  '.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, [data-mc-hover-halo], [data-mdcc-annotations], .dc-minimap, .dc-zoom-toolbar';
+const RECTS_INTERACTIVE_TAGS = new Set([
+  'button',
+  'a',
+  'input',
+  'textarea',
+  'select',
+  'option',
+  'label',
+  'summary',
+  'img',
+  'svg',
+  'video',
+  'picture',
+]);
+const RECTS_ELEMENT_CAP = 400;
+/** True when `el` has no `[data-cd-id]` descendant — a "leaf" in the pipeline's
+ *  stamped tree, i.e. the finest element the JSX source actually distinguishes
+ *  (a text run, an icon, a leaf `<div>`) rather than a structural wrapper. */
+function isCdIdLeaf(el: Element): boolean {
+  return el.querySelector('[data-cd-id]') === null;
+}
+function elementIsCandidate(el: Element): boolean {
+  const tag = el.tagName.toLowerCase();
+  if (RECTS_INTERACTIVE_TAGS.has(tag)) return true;
+  if (el.hasAttribute('role') && el.getAttribute('role') === 'button') return true;
+  if (el.hasAttribute('tabindex')) return true;
+  if (!isCdIdLeaf(el)) return false; // structural wrapper — a leaf sibling/descendant covers it
+  return shortText(el, 1).length > 0;
+}
+function buildCanvasRectsManifest(): CanvasRectsManifest {
+  const empty: CanvasRectsManifest = { artboards: [], elements: [], elementsTruncated: false };
+  if (typeof document === 'undefined') return empty;
+  const host = document.querySelector('.dc-canvas') as HTMLElement | null;
+  if (!host) return empty; // bare specimen / no world plane — nothing to resolve against
+  const vp = getLiveViewport() ?? { x: 0, y: 0, zoom: 1 };
+  const hostRect = host.getBoundingClientRect();
+  const toWorld = (r: DOMRect): { x: number; y: number; w: number; h: number } => ({
+    x: (r.left - hostRect.left - vp.x) / vp.zoom,
+    y: (r.top - hostRect.top - vp.y) / vp.zoom,
+    w: r.width / vp.zoom,
+    h: r.height / vp.zoom,
+  });
+  const artboards: ArtboardRect[] = [];
+  const artboardEls = Array.from(document.querySelectorAll('[data-dc-screen]'));
+  for (const el of artboardEls) {
+    const rect = (el as HTMLElement).getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    const id = el.getAttribute('data-dc-screen');
+    if (!id) continue;
+    artboards.push({ id, ...toWorld(rect) });
+  }
+  const elements: CanvasRectsElement[] = [];
+  let truncated = false;
+  const candidateEls = Array.from(document.querySelectorAll('[data-cd-id]'));
+  for (const el of candidateEls) {
+    if (elements.length >= RECTS_ELEMENT_CAP) {
+      truncated = true;
+      break;
+    }
+    if (el.closest(RECTS_CHROME_SELECTOR)) continue;
+    const artboardEl = el.closest('[data-dc-screen]');
+    if (!artboardEl) continue; // off-artboard chrome (menubar, panels, toolbars)
+    if (!elementIsCandidate(el)) continue;
+    const rect = (el as HTMLElement).getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) continue;
+    const cdId = el.getAttribute('data-cd-id');
+    const artboardId = artboardEl.getAttribute('data-dc-screen');
+    const selector = cdId ? scopedCdSelector(cdId, artboardId) : '';
+    const index = cdId ? selectorIndex(document, selector, el) : 0;
+    elements.push({
+      cdId,
+      selector,
+      index,
+      artboard: artboardId,
+      ...toWorld(rect),
+      tag: el.tagName.toLowerCase(),
+      text: shortText(el, 120),
+    });
+  }
+  return { artboards, elements, elementsTruncated: truncated };
+}
+declare global {
+  interface Window {
+    __maudeCanvasRects?: () => CanvasRectsManifest;
+  }
+}
+if (typeof window !== 'undefined') {
+  window.__maudeCanvasRects = buildCanvasRectsManifest;
+}
 // ─────────────────────────────────────────────────────────────────────────────
 // DrawProof (Phase 25) — the render/verify harness for the draw engine. Renders
 // ONE vector mark across a size ladder × {light, dark, single-color flatten} as