@1agh/maude 0.40.0 → 0.42.0

package/apps/studio/measure-overlay.tsx

@@ -0,0 +1,241 @@
+/**
+ * @file       measure-overlay.tsx — Task L7 (feature-element-editing-robustness)
+ * @scope      apps/studio/measure-overlay.tsx
+ * @purpose    Alt-hover distance measurement (Figma parity): with exactly one
+ *             element selected, holding Alt and hovering a DIFFERENT stamped
+ *             element paints a red guide line + pixel-distance pill between
+ *             the two boxes' facing edges, on whichever axis(es) actually
+ *             have a gap. Read-only — never writes anything, no undo, no
+ *             write-surface implications.
+ *
+ *             Mirrors `equal-spacing-handles.tsx`'s fixed-rAF-follow scaffold
+ *             (persistent DOM children, no React re-render per frame) and
+ *             reuses its pairwise-gap sibling `computePairGap`
+ *             (equal-spacing-detector.ts) for the math.
+ *
+ *             Alt-tracking mirrors `use-cursor-modifiers.tsx`'s
+ *             `reduceModifiers` reducer, but keeps the result in React state
+ *             (gating hover RESOLUTION, a real cost) rather than a DOM
+ *             attribute (that hook only drives CSS cursor swaps).
+ *
+ *             Distances are printed in WORLD px (screen delta ÷ the world's
+ *             zoom) so the number stays correct at any zoom level — the
+ *             Stage-A host-scroll-0 invariant is what makes a screen-rect
+ *             delta ÷ zoom equivalent to a true world-space measurement.
+ */
+
+import { useEffect, useRef, useState } from 'react';
+import { useArtboardsContext } from './canvas-lib.tsx';
+import { resolveSelectionEl } from './dom-selection.ts';
+import { computePairGap } from './equal-spacing-detector.ts';
+import { resolveHoverTarget } from './input-router.tsx';
+import { type ModifierState, reduceModifiers } from './use-cursor-modifiers.tsx';
+import { useSelectionSet } from './use-selection-set.tsx';
+
+const MEASURE_CSS = `
+.dc-cv-measure-layer {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 7;
+}
+.dc-cv-measure-line {
+  position: absolute;
+  background: #FF3B30;
+  opacity: 0;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dc-cv-measure-line[data-axis="x"] { height: 1px; }
+.dc-cv-measure-line[data-axis="y"] { width: 1px; }
+.dc-cv-measure-line[data-on="true"] { opacity: 1; }
+.dc-cv-measure-pill {
+  position: absolute;
+  transform: translate(-50%, -50%);
+  font-family: var(--maude-chrome-font-mono, ui-monospace, SFMono-Regular, monospace);
+  font-size: 10px;
+  padding: 2px 5px;
+  background: #FF3B30;
+  color: #ffffff;
+  border-radius: 2px;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 120ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+.dc-cv-measure-pill[data-on="true"] { opacity: 1; }
+@media (prefers-reduced-motion: reduce) {
+  .dc-cv-measure-line, .dc-cv-measure-pill { transition-duration: 1ms; }
+}
+`.trim();
+
+function ensureStyles(): void {
+  if (typeof document === 'undefined') return;
+  if (document.getElementById('dc-cv-measure-css')) return;
+  const s = document.createElement('style');
+  s.id = 'dc-cv-measure-css';
+  s.textContent = MEASURE_CSS;
+  document.head.appendChild(s);
+}
+
+interface ScreenRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+function rectOf(el: Element): ScreenRect | null {
+  const b = (el as HTMLElement).getBoundingClientRect();
+  if (b.width === 0 && b.height === 0) return null;
+  return { x: b.left, y: b.top, w: b.width, h: b.height };
+}
+
+/** Persistent line+pill pair for one axis — created once, toggled via
+ *  `data-on` (opacity transition) rather than added/removed each frame. */
+function ensureAxisNodes(layer: HTMLDivElement, axis: 'x' | 'y'): [HTMLDivElement, HTMLDivElement] {
+  let line = layer.querySelector<HTMLDivElement>(`.dc-cv-measure-line[data-axis="${axis}"]`);
+  let pill = layer.querySelector<HTMLDivElement>(`.dc-cv-measure-pill[data-axis="${axis}"]`);
+  if (!line) {
+    line = document.createElement('div');
+    line.className = 'dc-cv-measure-line';
+    line.dataset.axis = axis;
+    layer.appendChild(line);
+  }
+  if (!pill) {
+    pill = document.createElement('div');
+    pill.className = 'dc-cv-measure-pill';
+    pill.dataset.axis = axis;
+    layer.appendChild(pill);
+  }
+  return [line, pill];
+}
+
+function hideAxis(layer: HTMLDivElement, axis: 'x' | 'y'): void {
+  const [line, pill] = ensureAxisNodes(layer, axis);
+  line.dataset.on = 'false';
+  pill.dataset.on = 'false';
+}
+
+function paintAxis(
+  layer: HTMLDivElement,
+  axis: 'x' | 'y',
+  a: ScreenRect,
+  b: ScreenRect,
+  zoom: number
+): void {
+  const g = computePairGap(a, b, axis);
+  const [line, pill] = ensureAxisNodes(layer, axis);
+  if (!g) {
+    line.dataset.on = 'false';
+    pill.dataset.on = 'false';
+    return;
+  }
+  const worldGap = Math.round(g.gap / (zoom || 1));
+  if (axis === 'x') {
+    line.style.left = `${Math.round(g.from)}px`;
+    line.style.top = `${Math.round(g.cross)}px`;
+    line.style.width = `${Math.round(g.gap)}px`;
+    pill.style.left = `${Math.round(g.from + g.gap / 2)}px`;
+    pill.style.top = `${Math.round(g.cross)}px`;
+  } else {
+    line.style.left = `${Math.round(g.cross)}px`;
+    line.style.top = `${Math.round(g.from)}px`;
+    line.style.height = `${Math.round(g.gap)}px`;
+    pill.style.left = `${Math.round(g.cross)}px`;
+    pill.style.top = `${Math.round(g.from + g.gap / 2)}px`;
+  }
+  pill.textContent = `${worldGap}`;
+  line.dataset.on = 'true';
+  pill.dataset.on = 'true';
+}
+
+export function MeasureOverlay() {
+  ensureStyles();
+  const { selected } = useSelectionSet();
+  const world = useArtboardsContext();
+  const layerRef = useRef<HTMLDivElement | null>(null);
+  const [alt, setAlt] = useState(false);
+  const [hoverEl, setHoverEl] = useState<Element | null>(null);
+
+  // Alt + hover tracking, gated together: hover RESOLUTION (a real per-move
+  // cost — resolveHoverTarget walks the DOM) only runs while Alt is held.
+  useEffect(() => {
+    if (typeof document === 'undefined') return;
+    let mods: ModifierState = { alt: false, shift: false, meta: false };
+    const onKeyChange = (e: KeyboardEvent) => {
+      const next = reduceModifiers(mods, e);
+      if (next === mods) return;
+      mods = next;
+      setAlt(mods.alt);
+      if (!mods.alt) setHoverEl(null);
+    };
+    const onPointer = (e: PointerEvent) => {
+      const next = reduceModifiers(mods, e);
+      if (next !== mods) {
+        mods = next;
+        setAlt(mods.alt);
+      }
+      if (!mods.alt) {
+        setHoverEl(null);
+        return;
+      }
+      const t = resolveHoverTarget(document, e.clientX, e.clientY, { deep: true });
+      setHoverEl(t?.el ?? null);
+    };
+    const onBlur = () => {
+      mods = { alt: false, shift: false, meta: false };
+      setAlt(false);
+      setHoverEl(null);
+    };
+    document.addEventListener('keydown', onKeyChange, true);
+    document.addEventListener('keyup', onKeyChange, true);
+    document.addEventListener('pointermove', onPointer, { passive: true });
+    window.addEventListener('blur', onBlur);
+    return () => {
+      document.removeEventListener('keydown', onKeyChange, true);
+      document.removeEventListener('keyup', onKeyChange, true);
+      document.removeEventListener('pointermove', onPointer);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, []);
+
+  const one = selected.length === 1 ? selected[0] : null;
+  const zoom = world?.viewport?.zoom || 1;
+  const active = alt && !!one && !!hoverEl;
+
+  useEffect(() => {
+    const layer = layerRef.current;
+    if (!layer) return;
+    const hideBoth = () => {
+      hideAxis(layer, 'x');
+      hideAxis(layer, 'y');
+    };
+    if (!active || !one || !hoverEl) {
+      hideBoth();
+      return;
+    }
+    let alive = true;
+    let rafId: number | null = null;
+    const tick = () => {
+      rafId = null;
+      if (!alive) return;
+      const selEl = resolveSelectionEl(document, one);
+      const a = selEl && selEl !== hoverEl && hoverEl.isConnected ? rectOf(selEl) : null;
+      const b = a ? rectOf(hoverEl) : null;
+      if (a && b) {
+        paintAxis(layer, 'x', a, b, zoom);
+        paintAxis(layer, 'y', a, b, zoom);
+      } else {
+        hideBoth();
+      }
+      rafId = requestAnimationFrame(tick);
+    };
+    rafId = requestAnimationFrame(tick);
+    return () => {
+      alive = false;
+      if (rafId != null) cancelAnimationFrame(rafId);
+    };
+  }, [active, one, hoverEl, zoom]);
+
+  return <div ref={layerRef} className="dc-cv-measure-layer" aria-hidden="true" />;
+}

package/apps/studio/participants-chrome.tsx

@@ -29,7 +29,7 @@ const CHROME_CSS = `
   display: flex;
   align-items: center;
   pointer-events: auto;
-  font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+  font-family: system-ui, -apple-system, sans-serif;
 }
 .dc-participant {
   width: 26px;
@@ -74,7 +74,7 @@ const CHROME_CSS = `
   background: var(--maude-chrome-bg-1, #fff);
   color: var(--maude-chrome-fg-0, #111);
   border: 1px solid var(--maude-chrome-border, rgba(0,0,0,0.16));
-  border-radius: var(--radius-md, 4px);
+  border-radius: 4px;
   font-size: 12px;
   line-height: 1.35;
   white-space: nowrap;
@@ -93,7 +93,7 @@ const CHROME_CSS = `
   background: var(--maude-hud-accent, oklch(56% 0.170 50));
   color: var(--maude-hud-accent-fg, #fff);
   border: none;
-  border-radius: var(--radius-sm, 2px);
+  border-radius: 2px;
   font-family: inherit;
   font-weight: 500;
   font-size: 11px;

package/apps/studio/server.ts

@@ -25,6 +25,7 @@ import { type AiActivityEntry, createAiActivity } from './collab/ai-activity.ts'
 import { createGitLifecycle } from './collab/git-lifecycle.ts';
 import { createCollab } from './collab/index.ts';
 import { createContext, reloadConfig } from './context.ts';
+import { createExportJobQueue } from './exporters/jobs.ts';
 import { createFsWatch } from './fs-watch.ts';
 import { createGitWatch } from './git/watch.ts';
 import { createHttp } from './http.ts';
@@ -105,7 +106,8 @@ const activity = createActivity(ctx);
 // rca/issue-canvas-hmr-optimistic-update-consistency).
 const acp = createAcp(ctx, aiActivity);
 const ws = createWs(ctx, api, inspect, collab, activity, acp);
-const http = createHttp(ctx, api, inspect, aiActivity);
+const exportJobs = createExportJobQueue(ctx.bus, ctx.paths.designRoot);
+const http = createHttp(ctx, api, inspect, aiActivity, exportJobs);
 const fsWatch = createFsWatch(ctx);
 
 // Port: --port arg > $PORT > $MDCC_DEV_PORT > 4399.

package/apps/studio/sizing-mode.ts

@@ -0,0 +1,117 @@
+/**
+ * @file sizing-mode.ts
+ * @purpose Pure Fixed / Hug / Fill sizing-mode logic for the CssKnobs Size
+ *          control (feature-element-editing-robustness Stage M1). Kept framework-
+ *          free + in a .ts file so it's unit-testable (app.jsx is bundled JSX).
+ *
+ * Figma auto-layout parity: a per-axis Fixed / Hug / Fill mode is the single
+ * biggest source of layout-behaviour clarity for React/flexbox mockups.
+ *   - Fixed = an explicit width/height value.
+ *   - Hug   = shrink to children (`fit-content`).
+ *   - Fill  = stretch to fill the parent — and the CORRECT CSS depends on the
+ *             parent's layout: a flex child fills its MAIN axis via `flex-grow`,
+ *             its CROSS axis via `align-self: stretch`; a block/grid child fills
+ *             via `width/height: 100%`. So the mode must know the parent context
+ *             (captured at selection time in Selection.parentDisplay /
+ *             .parentFlexDirection — the shell can't reach the iframe later).
+ */
+
+export type SizeAxis = 'width' | 'height';
+export type SizeMode = 'fixed' | 'hug' | 'fill';
+
+export interface ParentLayout {
+  display?: string;
+  flexDirection?: string;
+}
+
+const HUG_VALUES = new Set(['fit-content', 'max-content', 'min-content']);
+const FILL_VALUES = new Set(['100%', 'fill', '-webkit-fill-available', 'stretch']);
+
+function parentIsFlex(p: ParentLayout | undefined): boolean {
+  const d = (p?.display || '').trim();
+  return d === 'flex' || d === 'inline-flex';
+}
+
+/** True when `axis` is the flex MAIN axis of the parent (row → width, column → height). */
+export function isMainAxis(axis: SizeAxis, p: ParentLayout | undefined): boolean {
+  const dir = (p?.flexDirection || 'row').trim();
+  const rowMain = dir.startsWith('row'); // row / row-reverse
+  return rowMain ? axis === 'width' : axis === 'height';
+}
+
+/**
+ * Best-effort classification of the current sizing mode for the segmented
+ * control's active-state highlight. Reads AUTHORED values first (what the user
+ * set), so a value the panel wrote round-trips; defaults to `fixed`. Detection is
+ * advisory — the WRITE side (`sizingModePatch`) is what must be deterministic.
+ */
+export function sizingModeOf(
+  axis: SizeAxis,
+  authored: Record<string, string> = {},
+  _computed: Record<string, string> = {},
+  parent?: ParentLayout
+): SizeMode {
+  const a = (authored[axis] || '').trim().toLowerCase();
+  if (HUG_VALUES.has(a)) return 'hug';
+  if (FILL_VALUES.has(a)) return 'fill';
+  if (parentIsFlex(parent)) {
+    const main = isMainAxis(axis, parent);
+    if (main && Number.parseFloat(authored['flex-grow'] || '0') >= 1) return 'fill';
+    if (!main && (authored['align-self'] || '').trim() === 'stretch') return 'fill';
+  }
+  // A numeric authored value (px/rem/%…) or nothing authored → Fixed.
+  return 'fixed';
+}
+
+export interface SizingPatch {
+  /** Properties to write (in order), each `[prop, value]`. */
+  set: Array<[string, string]>;
+  /** Fill-specific properties to REMOVE so a prior Fill doesn't linger. */
+  reset: string[];
+}
+
+/**
+ * The deterministic CSS writes for switching `axis` to `mode`. `currentPx` seeds
+ * the Fixed value (the element's current rendered size). Fill is context-aware:
+ * a flex child fills its main axis via `flex-grow:1` + `flex-basis:0%`, its cross
+ * axis via `align-self:stretch`; a block/grid child via `<axis>: 100%`.
+ */
+export function sizingModePatch(
+  axis: SizeAxis,
+  mode: SizeMode,
+  parent: ParentLayout | undefined,
+  currentPx: number
+): SizingPatch {
+  const flex = parentIsFlex(parent);
+  const main = isMainAxis(axis, parent);
+  // Which fill-specific props a non-fill mode must clear so the old Fill doesn't linger.
+  const fillProps = flex ? (main ? ['flex-grow', 'flex-basis'] : ['align-self']) : [];
+  if (mode === 'fixed') {
+    const px = Number.isFinite(currentPx) && currentPx > 0 ? Math.round(currentPx) : 0;
+    return { set: [[axis, `${px}px`]], reset: fillProps };
+  }
+  if (mode === 'hug') {
+    return { set: [[axis, 'fit-content']], reset: fillProps };
+  }
+  // fill
+  if (flex) {
+    if (main) {
+      return {
+        set: [
+          ['flex-grow', '1'],
+          ['flex-basis', '0%'],
+          [axis, 'auto'],
+        ],
+        reset: [],
+      };
+    }
+    return {
+      set: [
+        ['align-self', 'stretch'],
+        [axis, 'auto'],
+      ],
+      reset: [],
+    };
+  }
+  return { set: [[axis, '100%']], reset: [] };
+}

package/apps/studio/spacing-handles.ts

@@ -0,0 +1,166 @@
+/**
+ * @file       spacing-handles.ts — Stage J (feature-element-editing-robustness)
+ * @purpose    Pure geometry + value math for the on-canvas padding + gap drag
+ *             overlay. Framework-free (unit-testable without a DOM), mirroring
+ *             `equal-spacing-detector.ts`'s screen-coordinate midpoint shape so
+ *             the two spacing affordances (read-only equal-spacing dots vs this
+ *             draggable padding/gap overlay) share a visual vocabulary.
+ *
+ *             Padding: 4 edge lines inset from the element's screen border-box by
+ *             its resolved padding × zoom, one per side, each carrying a drag axis
+ *             (top/bottom = vertical, left/right = horizontal).
+ *             Gap: midpoints between consecutive DIRECT children along the flex
+ *             main axis (row → x, column → y) — flex-only in v1; CSS-Grid gap
+ *             editing is deferred to `feature-grid-track-editor.md` (Stage M3).
+ */
+
+export interface ScreenRect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+export type PaddingSide = 'top' | 'right' | 'bottom' | 'left';
+
+export interface PaddingLine {
+  side: PaddingSide;
+  /** Drag axis: top/bottom edges scrub vertically, left/right horizontally. */
+  axis: 'x' | 'y';
+  /** Line midpoint in screen coords (the handle's paint position). */
+  x: number;
+  y: number;
+  /** Line length in screen px (spans the box's inner width/height on that side). */
+  length: number;
+}
+
+/**
+ * Compute the 4 padding-edge handle positions from the element's screen
+ * border-box rect + its resolved padding (WORLD px, pre-zoom) + the render
+ * zoom. A handle sits at the midpoint of its edge, INSET from the border by
+ * `padding × zoom` — i.e. right on the padding/content boundary, so dragging it
+ * outward (toward the border) shrinks padding, inward (toward center) grows it.
+ */
+export function computePaddingLines(
+  rect: ScreenRect,
+  padding: { top: number; right: number; bottom: number; left: number },
+  zoom: number
+): PaddingLine[] {
+  const z = zoom > 0 ? zoom : 1;
+  const pt = padding.top * z;
+  const pr = padding.right * z;
+  const pb = padding.bottom * z;
+  const pl = padding.left * z;
+  return [
+    { side: 'top', axis: 'y', x: rect.x + rect.w / 2, y: rect.y + pt, length: rect.w - pl - pr },
+    {
+      side: 'right',
+      axis: 'x',
+      x: rect.x + rect.w - pr,
+      y: rect.y + rect.h / 2,
+      length: rect.h - pt - pb,
+    },
+    {
+      side: 'bottom',
+      axis: 'y',
+      x: rect.x + rect.w / 2,
+      y: rect.y + rect.h - pb,
+      length: rect.w - pl - pr,
+    },
+    { side: 'left', axis: 'x', x: rect.x + pl, y: rect.y + rect.h / 2, length: rect.h - pt - pb },
+  ];
+}
+
+/**
+ * New padding value (WORLD px, clamped ≥ 0) for a drag on `side`, given the
+ * screen-space cursor delta and the render zoom. Top/bottom respond to
+ * vertical delta, left/right to horizontal — and the SIGN flips for
+ * bottom/right (dragging toward the element's center — up for bottom, left for
+ * right — GROWS that side's padding, mirroring how top/left already grow when
+ * dragged down/right).
+ */
+export function computePaddingDrag(
+  side: PaddingSide,
+  startValue: number,
+  dxScreen: number,
+  dyScreen: number,
+  zoom: number
+): number {
+  const z = zoom > 0 ? zoom : 1;
+  const d = side === 'top' || side === 'bottom' ? dyScreen / z : dxScreen / z;
+  const signed = side === 'bottom' || side === 'right' ? -d : d;
+  return Math.max(0, round2(startValue + signed));
+}
+
+export type FlexAxis = 'x' | 'y';
+
+/** Row/row-reverse → x (horizontal main axis); column/column-reverse → y. */
+export function flexMainAxis(flexDirection: string | null | undefined): FlexAxis {
+  const dir = (flexDirection || 'row').trim();
+  return dir.startsWith('column') ? 'y' : 'x';
+}
+
+/**
+ * Midpoints between consecutive DIRECT children's screen rects, along `axis`.
+ * Mirrors `detectEqualSpacing`'s midpoint shape but needs no equal-spacing
+ * DETECTION (there's exactly one `gap` value to visualize, not several to
+ * confirm) — just the geometric midpoint of each adjacent pair's facing edges.
+ * Fewer than 2 children → no gaps to show.
+ */
+export function computeGapMidpoints(
+  childRects: ScreenRect[],
+  axis: FlexAxis
+): Array<{ x: number; y: number }> {
+  if (childRects.length < 2) return [];
+  const sorted = [...childRects].sort((a, b) => (axis === 'x' ? a.x - b.x : a.y - b.y));
+  const out: Array<{ x: number; y: number }> = [];
+  for (let i = 0; i < sorted.length - 1; i++) {
+    const a = sorted[i] as ScreenRect;
+    const b = sorted[i + 1] as ScreenRect;
+    if (axis === 'x') {
+      out.push({ x: (a.x + a.w + b.x) / 2, y: a.y + a.h / 2 });
+    } else {
+      out.push({ x: a.x + a.w / 2, y: (a.y + a.h + b.y) / 2 });
+    }
+  }
+  return out;
+}
+
+/** New `gap` value (WORLD px, clamped ≥ 0) for a drag along `axis`. Gap is a
+ *  single shared CSS value, so every handle drags the SAME number 1:1 with the
+ *  cursor (no doubling/halving — dragging a handle N screen px outward should
+ *  feel like N world px of extra breathing room). */
+export function computeGapDrag(
+  axis: FlexAxis,
+  startValue: number,
+  dxScreen: number,
+  dyScreen: number,
+  zoom: number
+): number {
+  const z = zoom > 0 ? zoom : 1;
+  const d = axis === 'x' ? dxScreen / z : dyScreen / z;
+  return Math.max(0, round2(startValue + d));
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+/**
+ * Which padding sides a drag on `side` touches, given the held modifiers —
+ * matches the CSS-panel box-model widget's OWN scrub grammar exactly (`side()`
+ * in `client/app.jsx`, `title="drag to scrub · alt = symmetric · alt+shift =
+ * all sides"`): plain drag = just this side; Alt = the symmetric axis PAIR
+ * (top+bottom, or left+right); Alt+Shift = all four. Every touched side is set
+ * to the SAME value (not each grown by its own delta) — same semantics as the
+ * panel's `sidesFor`/`last` write.
+ */
+export function paddingSideSet(
+  side: PaddingSide,
+  altKey: boolean,
+  shiftKey: boolean
+): PaddingSide[] {
+  if (altKey && shiftKey) return ['top', 'right', 'bottom', 'left'];
+  if (altKey) return side === 'top' || side === 'bottom' ? ['top', 'bottom'] : ['left', 'right'];
+  return [side];
+}