@1agh/maude 0.39.1 → 0.41.0

package/apps/studio/input-router.tsx

@@ -345,7 +345,13 @@ export function isEditableTarget(t: EventTarget | null): boolean {
  */
 export function isOverlayTarget(t: EventTarget | null): boolean {
   if (!t || !(t as Element).closest) return false;
-  return !!(t as Element).closest('.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin');
+  // [data-mediaref-player] — the inline <video>/<audio controls> on a media
+  // reference chip (DDR-150 dogfood #8). The router must never claim (and
+  // preventDefault) pointerdowns over the player, or its native controls
+  // (play button, scrubber drag, volume) die under the move tool.
+  return !!(t as Element).closest(
+    '.cm-composer, .cm-thread, .cm-mention-popup, .cm-pin, [data-mediaref-player]'
+  );
 }
 
 export function useInputRouter(opts: UseInputRouterOptions): void {
@@ -469,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/runtime-bundle.ts

@@ -79,6 +79,36 @@ export const RUNTIME_PACKAGES = [
   // every real canvas) returned HTTP 500 "Bundle failed".
   'lib0/decoding',
   'lib0/encoding',
+  // DDR-148 — Remotion video-comp authoring. `remotion` carries the React
+  // context stack (RemotionEnvironment / Sequence / Timeline) that a video-comp
+  // canvas AND the `<Player>` preview BOTH consume — so it MUST be a single
+  // externalised bundle (importmap-shared), exactly like React itself, or the
+  // Player's provider and the composition's `useCurrentFrame()` bind to
+  // different context instances and the comp renders frozen at frame 0 (the
+  // dual-package hazard). `@remotion/player` + `@remotion/transitions` each
+  // externalise `remotion` (→ the one bundle) and INLINE their own stateless
+  // helpers — `remotion/no-react` (interpolate/random/validators/NoReactInternals,
+  // all pure), plus `@remotion/paths`/`@remotion/shapes` for transitions — which
+  // hold no cross-package state, so a per-bundle copy is harmless. NOT shipping
+  // `@remotion/renderer`/`@remotion/web-renderer` (export goes through the
+  // capture spine). Pre-built into dist/runtime + floored in .min-sizes.json.
+  'remotion',
+  '@remotion/player',
+  '@remotion/media',
+  '@remotion/transitions',
+  // Transition presentations are separate subpath modules by design (Remotion
+  // tree-shakes to what you import). But a canvas import specifier that isn't
+  // in RUNTIME_PACKAGES tries to resolve against the USER's node_modules at
+  // request-time Bun.build — which doesn't exist on an npm/marketplace install
+  // — so EVERY presentation the skill teaches must be pre-bundled + importmap-
+  // routed. v1 ships the six core wipes ("join 4 clips + crossfade" vocabulary);
+  // exotic presentations (dreamy-zoom, film-burn, …) are a documented follow-up.
+  '@remotion/transitions/fade',
+  '@remotion/transitions/slide',
+  '@remotion/transitions/wipe',
+  '@remotion/transitions/flip',
+  '@remotion/transitions/clock-wipe',
+  '@remotion/transitions/none',
 ] as const;
 
 export type RuntimePackage = (typeof RUNTIME_PACKAGES)[number];

package/apps/studio/server.ts

@@ -18,13 +18,13 @@ import { spawn } from 'node:child_process';
 
 import { createAcp } from './acp/index.ts';
 import { createActivity } from './activity.ts';
-import { createApi } from './api.ts';
+import { ASSET_MAX_VIDEO_BYTES, createApi } from './api.ts';
 import { bootSelfHeal } from './boot-self-heal.ts';
 import { createCanvasListWatch } from './canvas-list-watch.ts';
 import { type AiActivityEntry, createAiActivity } from './collab/ai-activity.ts';
 import { createGitLifecycle } from './collab/git-lifecycle.ts';
 import { createCollab } from './collab/index.ts';
-import { createContext } from './context.ts';
+import { createContext, reloadConfig } from './context.ts';
 import { createFsWatch } from './fs-watch.ts';
 import { createGitWatch } from './git/watch.ts';
 import { createHttp } from './http.ts';
@@ -124,13 +124,16 @@ const { port: BASE_PORT, explicit: PORT_EXPLICIT } = resolvePort();
 
 type BunServer = ReturnType<typeof Bun.serve<WsData, never>>;
 
-// Phase 23 security review (DDR-088 follow-up) — hard ceiling on a buffered
-// request body. Without it Bun's 128 MB default applies, so `POST /_api/asset`
-// would buffer up to 128 MB into RAM BEFORE api.saveAsset's 10 MB check runs
-// (memory amplification from the untrusted canvas origin). 16 MB covers every
-// legit body (10 MB asset + 1 MB annotation SVG + small JSON) with headroom and
-// bounds the pre-handler buffer; the authoritative per-route caps still apply.
-const MAX_REQUEST_BODY = 16 * 1024 * 1024;
+// Phase 23 security review (DDR-088) + DDR-148 — hard ceiling on a request
+// body. Bun's 128 MB default would let the untrusted canvas origin send huge
+// bodies to any route. DDR-088 pinned this at 16 MB. DDR-148 raises it to the
+// video cap + 8 MB headroom so `POST /_api/asset` can accept a 100 MB clip —
+// but that route now STREAMS the body to disk (saveAssetFromStream), so a big
+// upload never lands as one ArrayBuffer in RAM. Other routes keep their small
+// LOGICAL caps (annotation 1 MB, JSON) — a body over those still rejects; the
+// only change is Bun accepts more bytes pre-handler (a bandwidth-bounded
+// transient-buffer tradeoff on the buffering routes, noted in DDR-148).
+const MAX_REQUEST_BODY = ASSET_MAX_VIDEO_BYTES + 8 * 1024 * 1024;
 
 function startServer(port: number): BunServer {
   return Bun.serve<WsData, never>({
@@ -401,6 +404,28 @@ const gitWatch = createGitWatch(ctx);
 // `.ai/logs/rca/issue-acp-new-canvas-not-in-filetree.md`.
 const canvasListWatch = createCanvasListWatch(ctx);
 
+// Config hot-reload — `/design:setup-ds` (or a hand edit) rewrites
+// `.design/config.json` mid-session; without a re-read the server keeps
+// serving the boot snapshot and a newly added canvas group (`system`) never
+// reaches /_index-data, so scaffolded DS files stay invisible even on a
+// manual tree reload. On change: swap ctx.cfg in place (reloadConfig), let
+// canvasListWatch's set-diff emit `canvas-list-update` for canvases the new
+// groups uncover, and tell shells to refetch /_config.
+// RCA: .ai/logs/rca/issue-ds-scaffold-files-not-in-filetree-stale-config.md
+const CONFIG_RELOAD_DEBOUNCE_MS = 150;
+let configReloadTimer: ReturnType<typeof setTimeout> | null = null;
+ctx.bus.on('fs:json', (rel: string) => {
+  if (rel.replace(/\\/g, '/').replace(/^\/+/, '') !== 'config.json') return;
+  if (configReloadTimer) clearTimeout(configReloadTimer);
+  configReloadTimer = setTimeout(() => {
+    configReloadTimer = null;
+    if (!reloadConfig(ctx)) return;
+    console.log('  config.json changed — reloaded live.');
+    void canvasListWatch.refresh();
+    ctx.bus.emit('config-updated');
+  }, CONFIG_RELOAD_DEBOUNCE_MS);
+});
+
 // Phase 9 Task 4 — bidirectional sync agent. No-op when the project isn't
 // linked to a hub (`.design/config.json` has no `linkedHub` field). Kicked
 // off after fsWatch so the agent's bus subscription receives every fs event.

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