@agent-native/core 0.114.2 → 0.114.4

package/corpus/templates/design/app/components/design/dnd-debug.ts

@@ -0,0 +1,27 @@
+// Drag-and-drop debug logging (host side). Mirrors the bridge's own [dnd:*]
+// console timeline (editor-chrome.bridge.ts) so a single gesture reads
+// end-to-end across the prototype iframe and the parent React app.
+//
+// The iframe and the host are separate windows, so each has its OWN toggle:
+//   • bridge (in the iframe console):  window.__DND_DEBUG = true
+//   • host   (in the top-frame console): window.__DND_DEBUG = true
+// Both default OFF (opt in at runtime). Host lines are cyan and prefixed
+// [dnd:host:*]; bridge lines are purple and prefixed [dnd:*].
+declare global {
+  interface Window {
+    __DND_DEBUG?: boolean;
+  }
+}
+
+export function dndHostLog(phase: string, data?: unknown): void {
+  if (typeof window === "undefined") return;
+  if (!window.__DND_DEBUG) return;
+  try {
+    const tag = `%c[dnd:host:${phase}]`;
+    const style = "color:#0ea5e9;font-weight:bold";
+    if (data === undefined) console.log(tag, style);
+    else console.log(tag, style, data);
+  } catch {
+    /* logging must never break a drag */
+  }
+}

package/corpus/templates/design/app/components/design/multi-screen/draft-primitives.ts

@@ -12,7 +12,7 @@ import {
 
 import { DEFAULT_LINE_STROKE_WIDTH_PX } from "../canvas-primitive-style";
 import { boardPointToScreenLocalPoint } from "./coordinate-transforms";
-import { getFrameCenter } from "./frame-geometry";
+import { getFrameCenter, getScreenPreviewViewport } from "./frame-geometry";
 import type {
   CanvasPrimitiveInsert,
   DraftCreationPreview,
@@ -229,10 +229,27 @@ export function draftPrimitiveToInsert(
   frameGeometry: FrameGeometry,
   metadata?: ResolvedScreenMetadata,
 ): CanvasPrimitiveInsert {
-  const viewport = {
+  const metadataViewport = {
     width: metadata?.width ?? frameGeometry.width,
     height: metadata?.height ?? frameGeometry.height,
   };
+  // A draw must serialize in the same viewport the content is laid out in.
+  // getScreenPreviewViewport is the source of truth: an inline screen renders at
+  // metadata dims and CSS-scales when the frame's aspect matches, but reflows to
+  // the frame when it differs (so the metadata 1280×2560 default no longer
+  // stretches shapes on a non-portrait frame). Fixed-viewport sources
+  // (localhost/fusion) always use their own metadata viewport.
+  const isInline = !metadata || metadata.source === "inline";
+  const previewViewport = getScreenPreviewViewport(metadataViewport, {
+    width: frameGeometry.width,
+    height: frameGeometry.height,
+  });
+  const viewport = isInline
+    ? {
+        width: previewViewport.viewportWidth,
+        height: previewViewport.viewportHeight,
+      }
+    : metadataViewport;
   const scaleX = viewport.width / Math.max(1, frameGeometry.width);
   const scaleY = viewport.height / Math.max(1, frameGeometry.height);
   const roundLocal = (value: number) => Math.round(value) || 0;

package/corpus/templates/design/app/i18n-data.ts

@@ -1191,6 +1191,8 @@ const enUS = {
     escToExit: "Esc to exit",
     tellAgentWhatToChange: "Tell the agent what to change…",
     changesSaveWhenReconnected: "Changes will save when reconnected",
+    changesDiscarded:
+      "Some changes couldn't be saved because the file no longer exists and were discarded.",
     offline: "Offline",
     saving: "Saving...",
     clearedAllAnnotations: "Cleared all annotations",
@@ -5458,6 +5460,7 @@ const designRawLiteralOverrides = {
       escToExit: "Esc 退出",
       tellAgentWhatToChange: "告诉代理要更改什么...",
       changesSaveWhenReconnected: "重新连接时将保存更改",
+      changesDiscarded: "部分更改因文件不存在而无法保存，已被丢弃。",
       offline: "离线",
       saving: "正在保存...",
       clearedAllAnnotations: "已清除所有批注",
@@ -5618,6 +5621,8 @@ const designRawLiteralOverrides = {
       tellAgentWhatToChange: "Dígale al agente qué cambiar...",
       changesSaveWhenReconnected:
         "Los cambios se guardarán cuando se vuelva a conectar",
+      changesDiscarded:
+        "Algunos cambios no se pudieron guardar porque el archivo ya no existe y se descartaron.",
       offline: "Sin conexión",
       saving: "Guardando...",
       clearedAllAnnotations: "Se borraron todas las anotaciones",
@@ -5779,6 +5784,8 @@ const designRawLiteralOverrides = {
       tellAgentWhatToChange: "Dites à l’agent ce qu’il faut changer…",
       changesSaveWhenReconnected:
         "Les modifications seront enregistrées une fois reconnecté",
+      changesDiscarded:
+        "Certaines modifications n’ont pas pu être enregistrées car le fichier n’existe plus et ont été ignorées.",
       offline: "Hors ligne",
       saving: "Enregistrement...",
       clearedAllAnnotations: "Toutes les annotations ont été effacées",
@@ -5941,6 +5948,8 @@ const designRawLiteralOverrides = {
       tellAgentWhatToChange: "Sagen Sie dem Agenten, was er ändern soll ...",
       changesSaveWhenReconnected:
         "Änderungen werden gespeichert, wenn die Verbindung wiederhergestellt wird",
+      changesDiscarded:
+        "Einige Änderungen konnten nicht gespeichert werden, da die Datei nicht mehr existiert, und wurden verworfen.",
       offline: "Offline",
       saving: "Speichern...",
       clearedAllAnnotations: "Alle Anmerkungen gelöscht",
@@ -6099,6 +6108,8 @@ const designRawLiteralOverrides = {
       escToExit: "Esc 終了",
       tellAgentWhatToChange: "何を変更するかをエージェントに伝えてください...",
       changesSaveWhenReconnected: "変更は再接続時に保存されます",
+      changesDiscarded:
+        "ファイルが存在しないため、一部の変更を保存できず破棄しました。",
       offline: "オフライン",
       saving: "保存中...",
       clearedAllAnnotations: "すべての注釈を消去しました",
@@ -6255,6 +6266,8 @@ const designRawLiteralOverrides = {
       escToExit: "Esc 종료",
       tellAgentWhatToChange: "상담사에게 무엇을 변경해야 할지 알려주세요...",
       changesSaveWhenReconnected: "다시 연결되면 변경사항이 저장됩니다.",
+      changesDiscarded:
+        "파일이 더 이상 존재하지 않아 일부 변경사항을 저장하지 못하고 삭제했습니다.",
       offline: "오프라인",
       saving: "저장 중...",
       clearedAllAnnotations: "모든 주석이 지워졌습니다",
@@ -6415,6 +6428,8 @@ const designRawLiteralOverrides = {
       tellAgentWhatToChange: "Diga ao agente o que mudar…",
       changesSaveWhenReconnected:
         "As alterações serão salvas quando reconectadas",
+      changesDiscarded:
+        "Algumas alterações não puderam ser salvas porque o arquivo não existe mais e foram descartadas.",
       offline: "Off-line",
       saving: "Salvando...",
       clearedAllAnnotations: "Todas as anotações foram limpas",
@@ -6572,6 +6587,8 @@ const designRawLiteralOverrides = {
       escToExit: "बाहर निकलने के लिए Esc",
       tellAgentWhatToChange: "एजेंट को बताएं कि क्या बदलना है...",
       changesSaveWhenReconnected: "पुन: कनेक्ट होने पर परिवर्तन सहेजे जाएंगे",
+      changesDiscarded:
+        "कुछ परिवर्तन सहेजे नहीं जा सके क्योंकि फ़ाइल अब मौजूद नहीं है, और उन्हें छोड़ दिया गया।",
       offline: "ऑफ़लाइन",
       saving: "सहेजा जा रहा है...",
       clearedAllAnnotations: "सभी एनोटेशन साफ़ किए गए",
@@ -6728,6 +6745,8 @@ const designRawLiteralOverrides = {
       escToExit: "Esc للخروج",
       tellAgentWhatToChange: "أخبر الوكيل بما يجب تغييره...",
       changesSaveWhenReconnected: "سيتم حفظ التغييرات عند إعادة الاتصال",
+      changesDiscarded:
+        "تعذّر حفظ بعض التغييرات لأن الملف لم يعد موجودًا، وتم تجاهلها.",
       offline: "غير متصل",
       saving: "جارٍ الحفظ...",
       clearedAllAnnotations: "تم مسح جميع التعليقات التوضيحية",

package/corpus/templates/design/app/lib/design-save-outbox.ts

@@ -29,6 +29,33 @@ export interface DesignSaveOutboxStorage {
 export interface DrainDesignSaveOutboxResult {
   saved: DesignSaveOutboxEntry[];
   failed: Array<{ entry: DesignSaveOutboxEntry; error: unknown }>;
+  /**
+   * Entries dropped because retrying can never succeed — the target file no
+   * longer exists (deleted or never created). Retained-and-retried forever they
+   * turn one orphaned screen into a 500 storm that jams every save; dropping
+   * them self-heals stale outbox residue. Separate from `failed`, which is for
+   * transient/conflict errors that SHOULD be retried.
+   */
+  dropped: Array<{ entry: DesignSaveOutboxEntry; error: unknown }>;
+}
+
+/**
+ * A save failure that can never succeed on retry: the server reports the target
+ * file is gone (HTTP 404, or a "File not found" message from update-file's
+ * missing-row guard). Distinct from 409 conflicts and network errors, which are
+ * transient and must stay queued.
+ */
+export function isTerminalSaveError(error: unknown): boolean {
+  if (!error || typeof error !== "object") return false;
+  const candidate = error as { status?: unknown; message?: unknown };
+  // Terminal only when an explicit 404 ALSO names a missing file. A bare 404 can
+  // be a transient route-not-found (e.g. a cold-start action route), so both
+  // signals are required — dropping an edit is unrecoverable, a retry is not.
+  return (
+    candidate.status === 404 &&
+    typeof candidate.message === "string" &&
+    /file not found/i.test(candidate.message)
+  );
 }
 
 const DATABASE_NAME = "agent-native-design-save-outbox";
@@ -293,7 +320,11 @@ async function drainEntries(
   ) => Promise<unknown>,
   storage: DesignSaveOutboxStorage,
 ): Promise<DrainDesignSaveOutboxResult> {
-  const result: DrainDesignSaveOutboxResult = { saved: [], failed: [] };
+  const result: DrainDesignSaveOutboxResult = {
+    saved: [],
+    failed: [],
+    dropped: [],
+  };
   for (const entry of await storage.list(designId, actorScope)) {
     try {
       if (
@@ -332,7 +363,20 @@ async function drainEntries(
       await storage.deleteIfRevision(entry);
       result.saved.push(entry);
     } catch (error) {
-      result.failed.push({ entry, error });
+      if (isTerminalSaveError(error)) {
+        // The target file is gone (deleted/never created) — retrying can never
+        // succeed. Drop the entry so one orphaned screen can't loop update-file
+        // 500s forever and jam every save. Logged, never silently swallowed.
+        await storage.deleteIfRevision(entry);
+        result.dropped.push({ entry, error });
+        if (typeof console !== "undefined") {
+          console.warn(
+            `[design-save-outbox] dropped unrecoverable save for ${entry.actionName} ${entry.resourceId} (file no longer exists)`,
+          );
+        }
+      } else {
+        result.failed.push({ entry, error });
+      }
     }
   }
   return result;

package/corpus/templates/design/app/pages/design-editor/canvas-primitive-insert.ts

@@ -62,6 +62,9 @@ export function nextBlankScreenFilename(files: DesignFile[]): string {
 export function blankScreenHtml(title: string): string {
   const safeTitle = escapeHtmlText(title);
   const safeTitleAttribute = escapeHtmlAttributeValue(title);
+  // Blank screen = free canvas: <body> is the positioned root and drawn shapes
+  // are absolute children (x,y in the HTML). A centering grid / <main> wrapper
+  // trapped shapes at center and got auto-layout-converted on drop.
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -77,17 +80,9 @@ export function blankScreenHtml(title: string): string {
       color: var(--color-text, #111827);
       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     }
-    main {
-      min-height: 100vh;
-      display: grid;
-      place-items: center;
-      padding: 48px;
-    }
   </style>
 </head>
-<body>
-  <main data-agent-native-layer-name="${safeTitleAttribute}">
-  </main>
+<body data-agent-native-layer-name="${safeTitleAttribute}">
 </body>
 </html>`;
 }

package/corpus/templates/design/app/pages/design-editor/history.ts

@@ -173,6 +173,11 @@ export interface ContentHistoryChange {
   fileId: string;
   before: string;
   after: string;
+  /** Agent-authored replacement checkpoint. Prevents the next user edit's
+   * fallback mirror from coalescing backward through this entry, which would
+   * collapse the agent state out of the undo stack and make a single Cmd+Z
+   * jump past all AI-generated content to the pre-agent baseline. */
+  isCheckpoint?: boolean;
 }
 
 export interface ContentHistoryGroup {
@@ -261,7 +266,15 @@ export function mergeLocalContentHistoryFallback(
 ): ContentHistoryChange[] {
   if (change.before === change.after) return stack;
   const last = stack[stack.length - 1];
-  if (last && last.fileId === change.fileId && last.after === change.before) {
+  if (
+    last &&
+    last.fileId === change.fileId &&
+    last.after === change.before &&
+    // An incoming checkpoint must stay its own undo boundary, or one Cmd+Z
+    // reverts an agent edit together with the preceding user edit.
+    !last.isCheckpoint &&
+    !change.isCheckpoint
+  ) {
     return [...stack.slice(0, -1), { ...last, after: change.after }];
   }
   return [...stack.slice(-(MAX_DESIGN_UNDO_STACK - 1)), change];

package/corpus/templates/design/changelog/2026-07-17-drawn-shapes-stay-free-positioned-when-dragged.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-17
+---
+
+Drawn shapes now land exactly where and how big you dragged them — they no longer snap to center, get trapped inside a container, or stretch into a tall ribbon.

package/corpus/templates/design/changelog/2026-07-17-shapes-show-a-live-outline-while-you-draw.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-17
+---
+
+Shapes now show a live outline while you drag to draw them, even when drawing over an existing screen.

package/corpus/templates/design/shared/drag-reflow.ts

@@ -0,0 +1,375 @@
+/**
+ * Pure decision logic for Figma-parity in-screen drag & drop.
+ *
+ * This module is the typed, unit-tested source of truth for the drag
+ * behaviors added in the "live reflow" work (Phase 0 + Phase 1 of the
+ * auto-layout DnD plan). It is deliberately free of DOM access so it can be
+ * exercised directly by vitest.
+ *
+ * The editor bridge (`app/components/design/bridge/editor-chrome.bridge.ts`)
+ * cannot `import` anything — it is compiled to a self-contained IIFE by
+ * `bridge/codegen.ts`. So, exactly like `shared/canvas-math.ts` →
+ * `computeMoveSnapOffset`, the bridge carries a hand-ported copy of these
+ * functions. Keep the two in sync; this file is the reference implementation
+ * and the place where behavior is proven.
+ *
+ * Four independent concerns live here:
+ *   1. Hysteresis — stabilize the resolved drop target so the insertion
+ *      preview never strobes on a boundary (Phase 0.1).
+ *   2. Size guard — refuse to auto-nest a large element into a smaller
+ *      container, Figma-style (Phase 0.2).
+ *   3. Packed-container detection — decide whether a flex container is simple
+ *      enough that live sibling reflow can be modeled by a constant slot
+ *      shift; everything else falls back to an indicator only (Phase 1).
+ *   4. Reflow offsets — the per-sibling translate deltas that visually open /
+ *      close a slot while dragging, for the packed case (Phase 1).
+ */
+
+// ---------------------------------------------------------------------------
+// 1. Hysteresis
+// ---------------------------------------------------------------------------
+
+/**
+ * Identity of a resolved drop target. `containerKey` is any stable string id
+ * for the target container (the bridge uses a per-drag element→key map);
+ * `index` is the insertion index within that container.
+ */
+export interface DragTargetKey {
+  containerKey: string;
+  index: number;
+}
+
+/**
+ * A freshly resolved (raw) drop-target candidate for the current pointer
+ * position, plus the geometry the hysteresis gate needs to decide whether to
+ * accept it. All coordinates are in one consistent space (the bridge uses
+ * iframe-local client coordinates — see canvas-math note about the host
+ * scaling the whole iframe uniformly).
+ */
+export interface CandidatePoint {
+  x: number;
+  y: number;
+}
+
+export interface DragTargetCandidate {
+  /** The resolved target, or null when the pointer is over no valid target. */
+  key: DragTargetKey | null;
+  /** Pointer position this tick, in a consistent space, for the movement
+   *  deadband (distance from where the current target was committed). */
+  pointer: CandidatePoint;
+  /** How far the pointer has penetrated a *different* container from its
+   *  entering edge, px. Pass Infinity for a same-container change. */
+  containerPenetrationPx: number;
+  /** True when the candidate container is an ancestor of the committed one
+   *  (leaving toward a parent) — reverses instantly. */
+  isLeave: boolean;
+}
+
+export interface HysteresisState {
+  key: DragTargetKey;
+  committedAt: number;
+  committedPointer: CandidatePoint;
+  /** The differing candidate currently being timed out, and since when. */
+  pendingKey: DragTargetKey | null;
+  pendingAt: number;
+}
+
+export interface HysteresisOptions {
+  /** Pointer must move at least this far from the last commit before a
+   *  same-container slot change is accepted. Default 8. */
+  movePx?: number;
+  /** …or the new candidate must persist this long (ms). Default 60. */
+  dwellMs?: number;
+  /** Pointer must penetrate a different container this far, px. Default 10. */
+  containerPenetrationPx?: number;
+  /** …or the new container must persist this long (ms). Default 80. */
+  containerDwellMs?: number;
+}
+
+export interface HysteresisResult {
+  key: DragTargetKey | null;
+  changed: boolean;
+  state: HysteresisState | null;
+}
+
+const DEFAULT_HYSTERESIS: Required<HysteresisOptions> = {
+  movePx: 8,
+  dwellMs: 60,
+  containerPenetrationPx: 10,
+  containerDwellMs: 80,
+};
+
+function keysEqual(a: DragTargetKey | null, b: DragTargetKey | null): boolean {
+  if (a === null || b === null) return a === b;
+  return a.containerKey === b.containerKey && a.index === b.index;
+}
+
+function commitTarget(
+  key: DragTargetKey,
+  pointer: CandidatePoint,
+  now: number,
+): HysteresisResult {
+  return {
+    key,
+    changed: true,
+    state: {
+      key,
+      committedAt: now,
+      committedPointer: pointer,
+      pendingKey: null,
+      pendingAt: 0,
+    },
+  };
+}
+
+/**
+ * Stabilize a raw drop-target candidate against the committed one so the
+ * preview only transitions when the pointer deliberately moves to a new
+ * slot/container. A change is accepted when the pointer has moved `movePx`
+ * from the last commit (deliberate move) OR the *new* candidate has persisted
+ * `dwellMs` — dwell is timed from when the candidate first appeared, not from
+ * the committed target's age. Cross-container leaves reverse instantly; other
+ * container entries need penetration or dwell. Pure: `now` is passed in.
+ */
+export function resolveTargetHysteresis(
+  prev: HysteresisState | null,
+  candidate: DragTargetCandidate,
+  now: number,
+  options: HysteresisOptions = {},
+): HysteresisResult {
+  const opts = { ...DEFAULT_HYSTERESIS, ...options };
+
+  if (candidate.key === null) {
+    return { key: null, changed: prev !== null, state: null };
+  }
+  if (prev === null) {
+    return commitTarget(candidate.key, candidate.pointer, now);
+  }
+  if (keysEqual(candidate.key, prev.key)) {
+    return {
+      key: prev.key,
+      changed: false,
+      state: { ...prev, pendingKey: null, pendingAt: 0 },
+    };
+  }
+
+  const pendingContinues = keysEqual(candidate.key, prev.pendingKey);
+  const pendingKey = candidate.key;
+  const pendingAt = pendingContinues ? prev.pendingAt : now;
+  const dwelledFor = now - pendingAt;
+  const sameContainer = candidate.key.containerKey === prev.key.containerKey;
+
+  let accept: boolean;
+  if (sameContainer) {
+    const movedPx = Math.hypot(
+      candidate.pointer.x - prev.committedPointer.x,
+      candidate.pointer.y - prev.committedPointer.y,
+    );
+    accept = movedPx >= opts.movePx || dwelledFor >= opts.dwellMs;
+  } else if (candidate.isLeave) {
+    accept = true;
+  } else {
+    accept =
+      candidate.containerPenetrationPx >= opts.containerPenetrationPx ||
+      dwelledFor >= opts.containerDwellMs;
+  }
+
+  if (accept) {
+    return commitTarget(candidate.key, candidate.pointer, now);
+  }
+  return {
+    key: prev.key,
+    changed: false,
+    state: { ...prev, pendingKey, pendingAt },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// 2. Size guard
+// ---------------------------------------------------------------------------
+
+export interface SizeGuardBox {
+  width: number;
+  height: number;
+}
+
+export interface SizeGuardOptions {
+  /** Cmd/⌘ held — user override, always allow. Default false. */
+  bypass?: boolean;
+  /** Slack in px before a container counts as "too small". Default 0. */
+  tolerancePx?: number;
+  /**
+   * Axis on which the container hugs its content (and would therefore grow to
+   * fit a larger child, so it should NOT be rejected on that axis). Matches
+   * Figma "Hug contents". Default "none".
+   */
+  hugAxis?: "none" | "main" | "cross" | "both" | "width" | "height";
+}
+
+/**
+ * Figma's "don't drop a large image into a button" guard: reject a container
+ * whose content box is smaller than the dragged element on an axis it cannot
+ * grow on. Bypassed by ⌘ (the same modifier that disables snapping).
+ */
+export function isContainerTooSmallForDrag(
+  containerContentBox: SizeGuardBox,
+  draggedRect: SizeGuardBox,
+  options: SizeGuardOptions = {},
+): boolean {
+  if (options.bypass) return false;
+  const tol = options.tolerancePx ?? 0;
+  const hug = options.hugAxis ?? "none";
+  const hugsWidth = hug === "both" || hug === "width" || hug === "main";
+  const hugsHeight = hug === "both" || hug === "height" || hug === "cross";
+
+  const tooNarrow =
+    !hugsWidth && containerContentBox.width + tol < draggedRect.width;
+  const tooShort =
+    !hugsHeight && containerContentBox.height + tol < draggedRect.height;
+  return tooNarrow || tooShort;
+}
+
+// ---------------------------------------------------------------------------
+// 3. Packed-container detection (Phase 1, option-1 restriction)
+// ---------------------------------------------------------------------------
+
+export interface PackedContainerInfo {
+  /** Computed `display`. */
+  display: string;
+  /** Computed `flex-direction`. */
+  flexDirection: string;
+  /** Computed `flex-wrap`. */
+  flexWrap: string;
+  /** Computed `justify-content`. */
+  justifyContent: string;
+  /** Resolved main-axis gap in px (row-gap or column-gap as appropriate). */
+  gap: number;
+  /** True if any direct child has `flex-grow` > 0 (it absorbs space instead
+   *  of translating, so a constant slot shift would misrepresent the drop). */
+  hasFlexGrowChild: boolean;
+}
+
+const START_JUSTIFY = new Set(["flex-start", "start", "normal", "left", ""]);
+
+/**
+ * Whether a container is simple enough that a same-magnitude per-sibling
+ * translate exactly reproduces the post-drop layout (see
+ * `computeReorderOffsets`). Only START-aligned, non-wrapping, fixed-gap,
+ * non-reverse flex rows/columns with no growing child qualify.
+ *
+ * Everything else (space-between/around/evenly, center/end, wrap, grid,
+ * reverse, or a flex-grow child) must fall back to an indicator-only preview,
+ * because the real reflow is NOT a uniform shift and animating a constant
+ * translate would show a preview that does not match where the item lands.
+ */
+export function isSimplePackedContainer(info: PackedContainerInfo): boolean {
+  const isFlex = info.display === "flex" || info.display === "inline-flex";
+  if (!isFlex) return false;
+  if (info.flexDirection !== "row" && info.flexDirection !== "column") {
+    return false;
+  }
+  if (info.flexWrap !== "nowrap") return false;
+  if (!START_JUSTIFY.has(info.justifyContent)) return false;
+  if (!Number.isFinite(info.gap) || info.gap < 0) return false;
+  if (info.hasFlexGrowChild) return false;
+  return true;
+}
+
+/** The main flow axis (x/y) for a packed container's flex-direction. */
+export function mainAxisForDirection(flexDirection: string): "x" | "y" {
+  return flexDirection === "column" || flexDirection === "column-reverse"
+    ? "y"
+    : "x";
+}
+
+// ---------------------------------------------------------------------------
+// 4. Reflow offsets (packed case)
+// ---------------------------------------------------------------------------
+
+export interface ReorderOffsetsInput {
+  /** Number of direct children currently in the container (incl. dragged). */
+  count: number;
+  /** The dragged element's current index. */
+  originIndex: number;
+  /**
+   * Insertion slot in current indexing: the item lands *before* the child at
+   * `targetSlot` (0..count, where `count` means "at the end").
+   */
+  targetSlot: number;
+  /** Dragged element's main-axis size + the container gap, in px. */
+  slotMain: number;
+}
+
+/**
+ * Per-sibling translate offsets (px, signed along the main axis) that preview
+ * a same-container reorder by opening the destination slot and closing the
+ * origin slot. Negative = toward the container start (up/left); positive =
+ * toward the end (down/right). The dragged element's own index is always 0
+ * here (it follows the cursor separately).
+ *
+ * For a packed container, moving the dragged item (size s, plus one gap g)
+ * from `originIndex` to `targetSlot` shifts exactly the siblings between the
+ * two positions by ±(s + g) — the shift magnitude is independent of each
+ * sibling's own size, which is why the constant model is exact for this case.
+ */
+export function computeReorderOffsets(input: ReorderOffsetsInput): number[] {
+  const { count, originIndex, targetSlot, slotMain } = input;
+  const offsets = new Array(count).fill(0);
+  if (targetSlot > originIndex + 1) {
+    // Moving later: siblings between move toward the start to fill the origin.
+    for (let i = originIndex + 1; i <= targetSlot - 1; i += 1) {
+      offsets[i] = -slotMain;
+    }
+  } else if (targetSlot < originIndex) {
+    // Moving earlier: siblings from targetSlot..originIndex-1 move toward end.
+    for (let i = targetSlot; i <= originIndex - 1; i += 1) {
+      offsets[i] = slotMain;
+    }
+  }
+  // targetSlot === originIndex or originIndex + 1 → no net movement.
+  return offsets;
+}
+
+export interface VacateOffsetsInput {
+  count: number;
+  originIndex: number;
+  slotMain: number;
+}
+
+/**
+ * Offsets for the ORIGIN container when the dragged item leaves it entirely
+ * (drag-out or cross-container move): every following sibling closes the gap
+ * by shifting toward the start. This is what erases the "hole" the old
+ * relative-promotion approach left behind.
+ */
+export function computeVacateOffsets(input: VacateOffsetsInput): number[] {
+  const { count, originIndex, slotMain } = input;
+  const offsets = new Array(count).fill(0);
+  for (let i = originIndex + 1; i <= count - 1; i += 1) {
+    offsets[i] = -slotMain;
+  }
+  return offsets;
+}
+
+export interface InsertOffsetsInput {
+  /** Number of children currently in the TARGET container (excl. incoming). */
+  count: number;
+  /** Insertion slot: incoming item lands before child at `targetSlot`. */
+  targetSlot: number;
+  /** Incoming element's main-axis size + the target container's gap, in px. */
+  slotMain: number;
+}
+
+/**
+ * Offsets for a TARGET container the dragged item is entering: children at and
+ * after the insertion slot shift toward the end to open a slot sized to the
+ * incoming element.
+ */
+export function computeInsertOffsets(input: InsertOffsetsInput): number[] {
+  const { count, targetSlot, slotMain } = input;
+  const offsets = new Array(count).fill(0);
+  for (let i = targetSlot; i <= count - 1; i += 1) {
+    offsets[i] = slotMain;
+  }
+  return offsets;
+}

package/corpus/templates/design/shared/full-app.ts

@@ -13,7 +13,7 @@
  * a design as app-backed.
  */
 
-import { defineFeatureFlag } from "@agent-native/core/feature-flags";
+import { defineFeatureFlag } from "@agent-native/core/feature-flags/registry";
 
 /**
  * Runtime rollout for full app building in the Design app. Builder