@1agh/maude 0.40.0 → 0.41.0

package/apps/studio/http.ts

@@ -1409,6 +1409,7 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
         property?: unknown;
         value?: unknown;
         reset?: unknown;
+        idIndex?: unknown;
       }>(req, 8 * 1024);
       if (!body) return new Response('body required', { status: 400 });
       const result = await api.editCss(body);
@@ -1780,6 +1781,228 @@ export function createHttp(ctx: Context, api: Api, inspect: Inspect, ai: AiActiv
       );
     },
 
+    '/_api/delete-element': async (req: Request) => {
+      // Stage I (feature-element-editing-robustness) — delete an element by
+      // data-cd-id. POST { canvas, id, idIndex? } → api.deleteElementOp (reparse
+      // gate; reused-component instance via idIndex). Logs a whole-file undo seq
+      // (Cmd+Z via /_api/reorder-revert — a structural edit churns positional
+      // ids so an inverse descriptor goes stale). Same MAIN-ORIGIN-ONLY trust
+      // boundary as /_api/reorder: absent from CANVAS_SAFE_API + startCanvasServer
+      // routes (DDR-054); sameOriginWrite CSRF + loopback-Host (DNS-rebinding) gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; idIndex?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.deleteElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, deletedId: result.deletedId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/insert-element': async (req: Request) => {
+      // Stage I — insert a synthesized div/text/image relative to `refId`. POST
+      // { canvas, refId, position, kind, src?, refIndex? } → api.insertElementOp.
+      // Returns the new element's post-transpile id so the shell can select it.
+      // Whole-file undo seq. MAIN-ORIGIN ONLY (absent from both allowlists);
+      // sameOriginWrite + loopback-Host gated. An `image` src is contained to
+      // assets/ in the engine (no remote hotlink / ../ / scheme).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        refId?: unknown;
+        position?: unknown;
+        kind?: unknown;
+        src?: unknown;
+        refIndex?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.insertElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, newId: result.newId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/duplicate-element': async (req: Request) => {
+      // Cmd+D (Task L3) — duplicate an element (a copy as the next sibling). POST
+      // { canvas, id, idIndex? } → api.duplicateElementOp. Whole-file undo seq.
+      // MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated (dual-allowlist).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; id?: unknown; idIndex?: unknown }>(
+        req,
+        8 * 1024
+      );
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.duplicateElementOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, newId: result.newId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/insert-artboard': async (req: Request) => {
+      // Stage I4 — insert a new EMPTY artboard from a screen-size preset. POST
+      // { canvas, id, label, width, height } → api.insertArtboardOp (appends a
+      // <DCArtboard id label width height></DCArtboard> after the last artboard;
+      // size JSX-authoritative per DDR-027). Whole-file undo seq. MAIN-ORIGIN
+      // ONLY (absent from both allowlists); sameOriginWrite + loopback-Host gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        id?: unknown;
+        label?: unknown;
+        width?: unknown;
+        height?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.insertArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, artboardId: result.artboardId, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/assets': async (req: Request) => {
+      // Stage F1 (feature-element-editing-robustness) — list content-addressed
+      // image/video assets under <designRoot>/assets/ for the AssetPicker (Replace
+      // image / insert image). GET → { assets:[{path,name,ext,kind,size,mtimeMs}] }.
+      // MAIN-ORIGIN ONLY: the picker is a shell dialog; absent from CANVAS_SAFE_API
+      // + startCanvasServer routes (dual-allowlist, DDR-054). Loopback-Host gated
+      // (DNS-rebinding); read-only, so no sameOriginWrite (GET).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const r = await api.listAssets();
+      return Response.json(
+        { ok: true, assets: r.assets },
+        { headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/edit-scope': async (req: Request) => {
+      // Stage H (feature-element-editing-robustness) — the INV-3 predictability
+      // verdict. GET ?canvas&id&rendered → { ok, scope:'local'|'shared',
+      // componentName, affects, reason }. READ-only (a parse the shell runs on
+      // selection to render the Local/Shared badge). MAIN-ORIGIN ONLY: absent
+      // from CANVAS_SAFE_API + startCanvasServer routes (dual-allowlist, DDR-054);
+      // loopback-Host gated (DNS-rebinding); no sameOriginWrite (GET).
+      if (req.method !== 'GET') return new Response('Method not allowed', { status: 405 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const url = new URL(req.url);
+      const result = await api.editScopeOp({
+        canvas: url.searchParams.get('canvas') ?? undefined,
+        id: url.searchParams.get('id') ?? undefined,
+        rendered: url.searchParams.get('rendered') ?? undefined,
+      });
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(result, { headers: { 'Cache-Control': 'no-store' } });
+    },
+
+    '/_api/resize-artboard': async (req: Request) => {
+      // Stage D4 — free-hand artboard resize. POST { canvas, artboardId, width?,
+      // height? } → api.resizeArtboardOp (writes the NUMERIC width/height props on
+      // the <DCArtboard id="…">, addressed by its `id` prop since the rendered
+      // <article data-dc-screen> carries no data-cd-id; DDR-027). Whole-file undo
+      // seq. MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated.
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{
+        canvas?: unknown;
+        artboardId?: unknown;
+        width?: unknown;
+        height?: unknown;
+      }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.resizeArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
+    '/_api/delete-artboard': async (req: Request) => {
+      // Delete an artboard by its `id` prop (Backspace / context-menu on a frame).
+      // POST { canvas, artboardId } → api.deleteArtboardOp (removes the
+      // <DCArtboard id="…"> span; refuses the last one). Whole-file undo seq.
+      // MAIN-ORIGIN ONLY; sameOriginWrite + loopback-Host gated (dual-allowlist).
+      if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
+      if (!sameOriginWrite(req))
+        return new Response('cross-origin write rejected', { status: 403 });
+      if (!isLoopbackHost(req.headers.get('host')))
+        return new Response('local request required (DNS-rebinding guard)', { status: 403 });
+      const body = await readJson<{ canvas?: unknown; artboardId?: unknown }>(req, 8 * 1024);
+      if (!body) return new Response('body required', { status: 400 });
+      const result = await api.deleteArtboardOp(body);
+      if (!result.ok) {
+        return Response.json(
+          { ok: false, error: result.error },
+          { status: result.status, headers: { 'Cache-Control': 'no-store' } }
+        );
+      }
+      return Response.json(
+        { ok: true, seq: result.seq },
+        { status: 200, headers: { 'Cache-Control': 'no-store' } }
+      );
+    },
+
     '/_api/asset': async (req: Request) => {
       // Phase 23 / DDR-148 — binary media upload from the canvas (drag-drop /
       // paste). POST raw bytes → content-addressed write under

package/apps/studio/input-router.tsx

@@ -475,6 +475,18 @@ export function useInputRouter(opts: UseInputRouterOptions): void {
       if (action.kind !== 'no-op') {
         e.preventDefault();
         e.stopImmediatePropagation();
+        // preventDefault above stops mousedown's default FOCUS, so a Cmd-click
+        // select would leave the iframe unfocused and every in-canvas keyboard
+        // shortcut (arrow-nudge, Cmd+D, copy/paste-style, Delete) dead until a
+        // drag happened to focus it (dogfood: "funguje jen když hnu myší").
+        // Restore canvas focus explicitly so the keydown listeners fire.
+        if (action.kind === 'select') {
+          try {
+            window.focus();
+          } catch {
+            /* focus may be rejected outside a user gesture */
+          }
+        }
       }
     };
 

package/apps/studio/marquee-overlay.tsx

@@ -54,7 +54,7 @@ function isChromeTarget(t: EventTarget | null): boolean {
   const el = t as Element;
   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, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer'
+      '.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, .dc-el-resize-handle, .dc-multi-artboard-tb, .dc-elem-ctx-tb, .dc-cv-eq-spacing-layer'
     )
   ) {
     return true;

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/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: [] };
+}