@agent-native/core 0.92.11 → 0.93.0

package/corpus/templates/design/app/pages/design-editor/auto-layout-suggestion.ts

@@ -0,0 +1,328 @@
+import { applyVisualEdit, buildCodeLayerProjection } from "@shared/code-layer";
+
+import type { AlignableRect } from "./layout-operations";
+
+export interface AutoLayoutInsets {
+  top: number;
+  right: number;
+  bottom: number;
+  left: number;
+}
+
+export interface AutoLayoutSuggestion {
+  containerId: string;
+  direction: "row" | "column";
+  orderedChildIds: string[];
+  gap: number;
+  padding: AutoLayoutInsets;
+  alignItems: "flex-start" | "center" | "flex-end" | "stretch";
+  justifyContent: "flex-start" | "space-between";
+  horizontalSizing: "fixed" | "hug";
+  verticalSizing: "fixed" | "hug";
+  confidence: number;
+  safeToApply: boolean;
+  warnings: Array<"overlap" | "irregular" | "transformed">;
+}
+
+export interface SuggestionRect extends AlignableRect {
+  transformed?: boolean;
+}
+
+export function hasMeaningfulCssTransform(styles: {
+  transform?: string;
+  rotate?: string;
+  scale?: string;
+  classes?: readonly string[];
+}): boolean {
+  const transform = styles.transform?.trim().toLowerCase();
+  const rotate = styles.rotate?.trim().toLowerCase();
+  const scale = styles.scale?.trim().toLowerCase();
+  const hasTransformUtility = (styles.classes ?? []).some((className) => {
+    const classParts = className.split(":");
+    const utility = classParts[classParts.length - 1] ?? className;
+    return /^(?:-?(?:rotate|scale|skew|translate)(?:-[xy])?-.+|transform-(?:gpu|cpu))$/.test(
+      utility,
+    );
+  });
+  return Boolean(
+    (transform && transform !== "none") ||
+    (rotate && rotate !== "none" && rotate !== "0deg" && rotate !== "0") ||
+    (scale && scale !== "none" && scale !== "1" && scale !== "1 1") ||
+    hasTransformUtility,
+  );
+}
+
+export function isExistingFlowLayout(args: {
+  display?: string;
+  computedDisplay?: string | null;
+  classes?: readonly string[];
+}): boolean {
+  const display = (args.computedDisplay || args.display || "")
+    .trim()
+    .toLowerCase();
+  if (["flex", "inline-flex", "grid", "inline-grid"].includes(display)) {
+    return true;
+  }
+  return (args.classes ?? []).some((className) =>
+    /(?:^|:)(?:inline-)?(?:flex|grid)$/.test(className),
+  );
+}
+
+const round = (value: number) => Math.max(0, Math.round(value));
+const FLEX_ALIGN_STRETCH = "stretch"; // i18n-ignore CSS keyword
+const FLEX_ALIGN_END = "flex-end"; // i18n-ignore CSS keyword
+const FLEX_ALIGN_START = "flex-start"; // i18n-ignore CSS keyword
+const FLEX_ALIGN_CENTER = "center"; // i18n-ignore CSS keyword
+
+function median(values: readonly number[]): number {
+  const ordered = [...values].sort((a, b) => a - b);
+  const middle = Math.floor(ordered.length / 2);
+  return ordered.length % 2 === 0
+    ? (ordered[middle - 1]! + ordered[middle]!) / 2
+    : ordered[middle]!;
+}
+
+function relativeVariance(values: readonly number[]): number {
+  if (values.length < 2) return 0;
+  const average = values.reduce((sum, value) => sum + value, 0) / values.length;
+  if (Math.abs(average) < 1) return 0;
+  return (
+    values.reduce((sum, value) => sum + Math.abs(value - average), 0) /
+    values.length /
+    Math.abs(average)
+  );
+}
+
+/**
+ * Infer a reversible flex layout from measured, direct-child geometry.
+ * This intentionally refuses grid-like/overlapping arrangements instead of
+ * silently flattening a design that a one-dimensional flex layout cannot
+ * faithfully reproduce.
+ */
+export function inferAutoLayoutSuggestion(args: {
+  container: AlignableRect;
+  children: readonly SuggestionRect[];
+}): AutoLayoutSuggestion | null {
+  const children = args.children.filter(
+    (child) =>
+      Number.isFinite(child.x) &&
+      Number.isFinite(child.y) &&
+      Number.isFinite(child.width) &&
+      Number.isFinite(child.height) &&
+      child.width >= 0 &&
+      child.height >= 0,
+  );
+  if (children.length === 0) return null;
+
+  const minX = Math.min(...children.map((child) => child.x));
+  const maxX = Math.max(...children.map((child) => child.x + child.width));
+  const minY = Math.min(...children.map((child) => child.y));
+  const maxY = Math.max(...children.map((child) => child.y + child.height));
+  const spreadX = maxX - minX;
+  const spreadY = maxY - minY;
+  const direction: "row" | "column" =
+    children.length === 1 ? "column" : spreadX >= spreadY ? "row" : "column";
+  const primaryStart = (child: SuggestionRect) =>
+    direction === "row" ? child.x : child.y;
+  const primarySize = (child: SuggestionRect) =>
+    direction === "row" ? child.width : child.height;
+  const crossStart = (child: SuggestionRect) =>
+    direction === "row" ? child.y : child.x;
+  const crossSize = (child: SuggestionRect) =>
+    direction === "row" ? child.height : child.width;
+  const ordered = [...children].sort(
+    (a, b) => primaryStart(a) - primaryStart(b) || a.id.localeCompare(b.id),
+  );
+  const rawGaps = ordered.slice(1).map((child, index) => {
+    const previous = ordered[index]!;
+    return (
+      primaryStart(child) - (primaryStart(previous) + primarySize(previous))
+    );
+  });
+  const overlaps = rawGaps.some((gap) => gap < -1);
+  const positiveGaps = rawGaps.filter((gap) => gap >= 0);
+  const gap =
+    children.length === 1
+      ? 10
+      : round(median(positiveGaps.length ? positiveGaps : [0]));
+  const irregular = relativeVariance(positiveGaps) > 0.35;
+  const transformed = children.some((child) => child.transformed);
+
+  const padding = {
+    top: round(minY - args.container.y),
+    right: round(args.container.x + args.container.width - maxX),
+    bottom: round(args.container.y + args.container.height - maxY),
+    left: round(minX - args.container.x),
+  };
+
+  const crossContainerStart =
+    direction === "row" ? args.container.y : args.container.x;
+  const crossContainerSize =
+    direction === "row" ? args.container.height : args.container.width;
+  const crossCenters = children.map(
+    (child) => crossStart(child) + crossSize(child) / 2,
+  );
+  const averageCrossCenter =
+    crossCenters.reduce((sum, value) => sum + value, 0) / crossCenters.length;
+  const normalizedCross =
+    crossContainerSize > 0
+      ? (averageCrossCenter - crossContainerStart) / crossContainerSize
+      : 0;
+  const innerCrossSize = Math.max(
+    0,
+    crossContainerSize -
+      (direction === "row"
+        ? padding.top + padding.bottom
+        : padding.left + padding.right),
+  );
+  const stretches = children.every(
+    (child) => Math.abs(crossSize(child) - innerCrossSize) <= 2,
+  );
+  const alignItems = stretches
+    ? FLEX_ALIGN_STRETCH
+    : normalizedCross > 0.58 // i18n-ignore geometry threshold, no visible copy
+      ? FLEX_ALIGN_END
+      : normalizedCross < 0.42
+        ? FLEX_ALIGN_START
+        : FLEX_ALIGN_CENTER;
+
+  const primaryLeading = direction === "row" ? padding.left : padding.top;
+  const primaryTrailing = direction === "row" ? padding.right : padding.bottom;
+  const justifyContent =
+    children.length > 2 &&
+    relativeVariance(positiveGaps) <= 0.08 &&
+    Math.abs(primaryLeading - primaryTrailing) <= 2
+      ? "space-between"
+      : "flex-start";
+  const tightWidth =
+    Math.abs(args.container.width - (spreadX + padding.left + padding.right)) <=
+    2;
+  const tightHeight =
+    Math.abs(
+      args.container.height - (spreadY + padding.top + padding.bottom),
+    ) <= 2;
+
+  const warnings: AutoLayoutSuggestion["warnings"] = [];
+  if (overlaps) warnings.push("overlap");
+  if (irregular) warnings.push("irregular");
+  if (transformed) warnings.push("transformed");
+  const confidence = Math.max(
+    0,
+    Math.min(
+      1,
+      0.98 -
+        (overlaps ? 0.45 : 0) -
+        (irregular ? 0.18 : 0) -
+        (transformed ? 0.3 : 0),
+    ),
+  );
+
+  return {
+    containerId: args.container.id,
+    direction,
+    orderedChildIds: ordered.map((child) => child.id),
+    gap,
+    padding,
+    alignItems,
+    justifyContent,
+    horizontalSizing: tightWidth ? "hug" : "fixed",
+    verticalSizing: tightHeight ? "hug" : "fixed",
+    confidence,
+    safeToApply: !overlaps && !transformed,
+    warnings,
+  };
+}
+
+export type ApplyAutoLayoutSuggestionResult =
+  | { status: "applied"; content: string }
+  | { status: "conflict" | "failed"; content: string; message?: string };
+
+/** Apply the reviewed proposal atomically from the caller's perspective. */
+export function applyAutoLayoutSuggestion(
+  content: string,
+  suggestion: AutoLayoutSuggestion,
+): ApplyAutoLayoutSuggestionResult {
+  if (!suggestion.safeToApply) {
+    return { status: "failed", content, message: "unsafe-suggestion" };
+  }
+  const initialProjection = buildCodeLayerProjection(content);
+  const container = initialProjection.nodes.find(
+    (node) =>
+      node.id === suggestion.containerId ||
+      node.dataAttributes["data-agent-native-node-id"] ===
+        suggestion.containerId,
+  );
+  if (!container) return { status: "conflict", content };
+  const resolveNodeId = (requestedId: string) =>
+    initialProjection.nodes.find(
+      (node) =>
+        node.id === requestedId ||
+        node.dataAttributes["data-agent-native-node-id"] === requestedId,
+    )?.id;
+  const orderedChildIds = suggestion.orderedChildIds.map(resolveNodeId);
+  if (orderedChildIds.some((id) => !id)) {
+    return { status: "conflict", content, message: "children-changed" };
+  }
+  const resolvedOrderedChildIds = orderedChildIds as string[];
+  const currentChildren = new Set(container.children);
+  if (
+    currentChildren.size !== resolvedOrderedChildIds.length ||
+    resolvedOrderedChildIds.some((id) => !currentChildren.has(id))
+  ) {
+    return { status: "conflict", content, message: "children-changed" };
+  }
+
+  let nextContent = content;
+  for (let index = 1; index < resolvedOrderedChildIds.length; index += 1) {
+    const moved = applyVisualEdit(nextContent, {
+      kind: "moveNode",
+      target: { nodeId: resolvedOrderedChildIds[index]! },
+      anchor: { nodeId: resolvedOrderedChildIds[index - 1]! },
+      placement: "after",
+    });
+    if (moved.result.status === "applied") nextContent = moved.content;
+    else {
+      return { status: "failed", content, message: moved.result.message };
+    }
+  }
+
+  const autoLayout = applyVisualEdit(nextContent, {
+    kind: "autoLayout",
+    targetId: container.id,
+    enabled: true,
+    direction: suggestion.direction,
+    gap: `${suggestion.gap}px`,
+  });
+  if (autoLayout.result.status !== "applied") {
+    return { status: "failed", content, message: autoLayout.result.message };
+  }
+  nextContent = autoLayout.content;
+
+  const styleValues: Array<[string, string]> = [
+    [
+      "padding",
+      `${suggestion.padding.top}px ${suggestion.padding.right}px ${suggestion.padding.bottom}px ${suggestion.padding.left}px`,
+    ],
+    ["align-items", suggestion.alignItems],
+    ["justify-content", suggestion.justifyContent],
+    ...(suggestion.horizontalSizing === "hug"
+      ? ([["width", "fit-content"]] as Array<[string, string]>)
+      : []),
+    ...(suggestion.verticalSizing === "hug"
+      ? ([["height", "fit-content"]] as Array<[string, string]>)
+      : []),
+  ];
+  for (const [property, value] of styleValues) {
+    const styled = applyVisualEdit(nextContent, {
+      kind: "style",
+      target: { nodeId: container.id },
+      property,
+      value,
+    });
+    if (styled.result.status === "applied") nextContent = styled.content;
+    else {
+      return { status: "failed", content, message: styled.result.message };
+    }
+  }
+  return { status: "applied", content: nextContent };
+}

package/corpus/templates/design/app/pages/design-editor/clone-idrefs.ts

@@ -0,0 +1,113 @@
+const SPACE_SEPARATED_IDREF_ATTRIBUTES = [
+  "aria-controls",
+  "aria-describedby",
+  "aria-details",
+  "aria-errormessage",
+  "aria-flowto",
+  "aria-labelledby",
+  "aria-owns",
+  "headers",
+] as const;
+
+const SINGLE_IDREF_ATTRIBUTES = ["for", "form", "list"] as const;
+const FRAGMENT_REFERENCE_ATTRIBUTES = ["href", "xlink:href"] as const;
+
+function allElements(root: Element): Element[] {
+  return [root, ...Array.from(root.querySelectorAll("*"))];
+}
+
+function rewriteUrlIdReferences(value: string, idMap: Map<string, string>) {
+  return value.replace(
+    /url\(\s*(["']?)#([^\s)'";]+)\1\s*\)/g,
+    (match, quote: string, id: string) => {
+      const replacement = idMap.get(id);
+      return replacement ? `url(${quote}#${replacement}${quote})` : match;
+    },
+  );
+}
+
+/**
+ * Give every authored HTML/SVG id in a cloned subtree a fresh value and keep
+ * the subtree's own references attached to the clone rather than the original.
+ *
+ * Duplicate source ids are already invalid HTML. Every occurrence still gets
+ * a unique id; references follow the first occurrence, matching the browser's
+ * normal getElementById/querySelector behavior before cloning.
+ */
+export function reassignClonedAuthoredIds(
+  root: Element,
+  createId: () => string,
+): Map<string, string> {
+  const elements = allElements(root);
+  const idMap = new Map<string, string>();
+
+  for (const element of elements) {
+    const previousId = element.getAttribute("id");
+    if (!previousId) continue;
+    const nextId = createId();
+    element.setAttribute("id", nextId);
+    if (!idMap.has(previousId)) idMap.set(previousId, nextId);
+  }
+
+  if (idMap.size === 0) return idMap;
+
+  for (const element of elements) {
+    for (const attribute of SPACE_SEPARATED_IDREF_ATTRIBUTES) {
+      const value = element.getAttribute(attribute);
+      if (!value) continue;
+      element.setAttribute(
+        attribute,
+        value
+          .trim()
+          .split(/\s+/)
+          .map((id) => idMap.get(id) ?? id)
+          .join(" "),
+      );
+    }
+
+    for (const attribute of SINGLE_IDREF_ATTRIBUTES) {
+      const value = element.getAttribute(attribute);
+      const replacement = value ? idMap.get(value) : undefined;
+      if (replacement) element.setAttribute(attribute, replacement);
+    }
+
+    for (const attribute of FRAGMENT_REFERENCE_ATTRIBUTES) {
+      const value = element.getAttribute(attribute);
+      if (!value?.startsWith("#")) continue;
+      const replacement = idMap.get(value.slice(1));
+      if (replacement) element.setAttribute(attribute, `#${replacement}`);
+    }
+
+    // SVG paint/filter/mask/clip/marker references and inline CSS commonly
+    // use url(#id). Checking every attribute is both bounded to the cloned
+    // subtree and more future-proof than maintaining a partial SVG list.
+    for (const attribute of Array.from(element.attributes)) {
+      if (!attribute.value.includes("url(")) continue;
+      const rewritten = rewriteUrlIdReferences(attribute.value, idMap);
+      if (rewritten !== attribute.value) {
+        element.setAttribute(attribute.name, rewritten);
+      }
+    }
+
+    // SMIL animation references use `id.event` rather than #id/url(#id).
+    for (const attribute of ["begin", "end"] as const) {
+      const value = element.getAttribute(attribute);
+      if (!value) continue;
+      const rewritten = value
+        .split(";")
+        .map((part) => {
+          const trimmed = part.trim();
+          const separator = trimmed.indexOf(".");
+          if (separator <= 0) return trimmed;
+          const replacement = idMap.get(trimmed.slice(0, separator));
+          return replacement
+            ? `${replacement}${trimmed.slice(separator)}`
+            : trimmed;
+        })
+        .join("; ");
+      if (rewritten !== value) element.setAttribute(attribute, rewritten);
+    }
+  }
+
+  return idMap;
+}

package/corpus/templates/design/app/pages/design-editor/created-screen-navigation.ts

@@ -0,0 +1,55 @@
+import type { FrameBounds } from "@shared/canvas-math";
+
+export interface CreatedScreenGeometry {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface CreatedScreenNavigationPlan {
+  activeFileId: string;
+  selectedLayerIds: string[];
+  selectedScreenIds: string[];
+  viewMode: "overview";
+  camera: {
+    fitBounds: FrameBounds;
+    paddingScreenPx: number;
+  };
+}
+
+/**
+ * A newly-created screen always becomes the one obvious target: active in the
+ * layers panel, selected on the all-screens canvas, and revealed by a bounded
+ * fit-camera move. The editor applies this plan in the same React commit as
+ * its optimistic file insertion so there is no transient "nothing happened"
+ * state or camera flash.
+ */
+export function getCreatedScreenNavigationPlan(args: {
+  screenId: string;
+  geometry: CreatedScreenGeometry;
+  paddingScreenPx?: number;
+}): CreatedScreenNavigationPlan {
+  const { geometry } = args;
+  const width = Math.max(1, geometry.width);
+  const height = Math.max(1, geometry.height);
+  return {
+    activeFileId: args.screenId,
+    selectedLayerIds: [args.screenId],
+    selectedScreenIds: [args.screenId],
+    viewMode: "overview",
+    camera: {
+      fitBounds: {
+        left: geometry.x,
+        top: geometry.y,
+        right: geometry.x + width,
+        bottom: geometry.y + height,
+        width,
+        height,
+        centerX: geometry.x + width / 2,
+        centerY: geometry.y + height / 2,
+      },
+      paddingScreenPx: args.paddingScreenPx ?? 96,
+    },
+  };
+}

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

@@ -19,6 +19,38 @@ export function createEditorSaveOperationSource(
 /** Yjs origin tracked by the local undo manager. */
 export const LOCAL_EDIT_ORIGIN = `${TAB_ID}:local`;
 
+/**
+ * Agent-authored design replacements are remote Yjs transactions (or, when
+ * the Yjs update is missed entirely — backgrounded tab, no live collab
+ * session — a plain polled DB content refresh), but from the user's
+ * perspective they are one undoable editor operation (for example, "change
+ * this attached design"). Human peer edits remain outside the local undo
+ * stack. The Yjs `ytext.observe` handler uses this predicate when an active
+ * collaboration session identifies the remote transaction as agent-authored.
+ * The authoritative DB reconcile fallback cannot reliably distinguish an
+ * agent write from a human peer write when that live signal was missed, so it
+ * records any genuinely newer external replacement separately. Both paths
+ * preserve a before/after checkpoint for Cmd+Z.
+ */
+export function shouldCheckpointAgentContent(args: {
+  agentActive: boolean;
+  isLocalEdit: boolean;
+  previousContent: string | null | undefined;
+  nextContent: string;
+}): args is {
+  agentActive: true;
+  isLocalEdit: false;
+  previousContent: string;
+  nextContent: string;
+} {
+  return Boolean(
+    args.agentActive &&
+    !args.isLocalEdit &&
+    typeof args.previousContent === "string" &&
+    args.previousContent !== args.nextContent,
+  );
+}
+
 /**
  * TIE-BREAK: decides whether polled DB content should be adopted into the
  * live editor during the file-content reconcile effect (DesignEditor.tsx).

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

@@ -358,11 +358,28 @@ export type UndoRedoOrderKind =
   | "content"
   | "file-content"
   | "geometry"
-  | "file-created";
+  | "file-created"
+  | "file-deleted";
 
 export function getUndoRedoPriorityOrder(
   preferred: UndoRedoOrderKind | undefined,
 ): UndoRedoOrderKind[] {
+  if (preferred === "file-deleted")
+    return [
+      "file-deleted",
+      "file-created",
+      "content",
+      "file-content",
+      "geometry",
+    ];
+  if (preferred === "file-created")
+    return [
+      "file-created",
+      "file-deleted",
+      "content",
+      "file-content",
+      "geometry",
+    ];
   if (preferred === "geometry") return ["geometry", "content", "file-content"];
   if (preferred === "file-content")
     return ["file-content", "content", "geometry"];
@@ -387,6 +404,10 @@ export interface FileContentSaveRequest {
   expectedVersionHash?: string;
 }
 
+type FileContentSaveRequestsById = Readonly<
+  Record<string, FileContentSaveRequest>
+>;
+
 /**
  * A completed save may retire the unload retry only when it still represents
  * the latest content queued for that file. A newer edit can enter the debounce
@@ -416,7 +437,7 @@ export function shouldClearLatestUnloadSave(
  * the final edit.
  */
 export function flushPendingFileContentSavesOnCleanup(
-  pendingByFileId: Readonly<Record<string, FileContentSaveRequest>>,
+  pendingByFileId: FileContentSaveRequestsById,
   timerIds: readonly number[],
   save: (pending: FileContentSaveRequest) => void,
   clearTimer: (timerId: number) => void,
@@ -425,6 +446,32 @@ export function flushPendingFileContentSavesOnCleanup(
   for (const timerId of timerIds) clearTimer(timerId);
 }
 
+/**
+ * A desktop app switch keeps the guest page mounted, so neither pagehide nor
+ * React cleanup runs. Flush the newest known request per file through the
+ * ordinary serialized mutation path and cancel its debounce timer.
+ */
+export function flushFileContentSavesOnBackground(
+  pendingByFileId: FileContentSaveRequestsById,
+  latestUnacknowledgedByFileId: FileContentSaveRequestsById,
+  timerIds: readonly number[],
+  save: (pending: FileContentSaveRequest) => void,
+  clearTimer: (timerId: number) => void,
+): void {
+  const newestByFileId = new Map<string, FileContentSaveRequest>();
+  for (const pending of Object.values(latestUnacknowledgedByFileId)) {
+    newestByFileId.set(pending.id, pending);
+  }
+  for (const pending of Object.values(pendingByFileId)) {
+    const current = newestByFileId.get(pending.id);
+    if (!current || pending.operationRevision >= current.operationRevision) {
+      newestByFileId.set(pending.id, pending);
+    }
+  }
+  for (const pending of newestByFileId.values()) save(pending);
+  for (const timerId of timerIds) clearTimer(timerId);
+}
+
 /**
  * Pure decision helper (exported for unit testing) for the pagehide/unload
  * keepalive: should it be sent at all?