@agent-native/core 0.92.6 → 0.92.8

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

@@ -0,0 +1,169 @@
+import type {
+  CanvasFrameGeometry,
+  CanvasFrameGeometryById,
+} from "@shared/canvas-frames";
+
+export const MAX_DESIGN_UNDO_STACK = 50;
+
+export interface GeometryHistorySelection {
+  overviewSelectedScreenIds: string[];
+  selectedLayerIds: string[];
+  activeFileId: string | null;
+}
+
+export interface GeometryHistoryEntry {
+  before: CanvasFrameGeometryById;
+  after: CanvasFrameGeometryById;
+  selectionBefore?: GeometryHistorySelection;
+  selectionAfter?: GeometryHistorySelection;
+}
+
+export interface FileCreationHistoryEntry {
+  filename: string;
+  content: string;
+  fileType: string;
+  geometry?: CanvasFrameGeometry;
+}
+
+export function pruneFileCreationHistoryStack(
+  stack: FileCreationHistoryEntry[],
+  deletedFilenames: Set<string>,
+  options?: { skip?: boolean },
+): { stack: FileCreationHistoryEntry[]; removed: number } {
+  if (options?.skip) return { stack, removed: 0 };
+  const next = stack.filter((entry) => !deletedFilenames.has(entry.filename));
+  return { stack: next, removed: stack.length - next.length };
+}
+
+export function geometryHistoryEntryTouchesFrameIds(
+  entry: GeometryHistoryEntry,
+  frameIds: Set<string>,
+) {
+  for (const frameId of frameIds) {
+    if (entry.before[frameId] || entry.after[frameId]) return true;
+  }
+  return false;
+}
+
+export function pruneGeometryHistoryEntryForDeletedFiles(
+  entry: GeometryHistoryEntry,
+  deletedFileIds: Set<string>,
+): GeometryHistoryEntry | null {
+  if (!geometryHistoryEntryTouchesFrameIds(entry, deletedFileIds)) {
+    return entry;
+  }
+  const before = { ...entry.before };
+  const after = { ...entry.after };
+  for (const frameId of deletedFileIds) {
+    delete before[frameId];
+    delete after[frameId];
+  }
+  const remainingIds = new Set([...Object.keys(before), ...Object.keys(after)]);
+  let hasRemainingChange = false;
+  for (const frameId of remainingIds) {
+    if (before[frameId] !== after[frameId]) {
+      hasRemainingChange = true;
+      break;
+    }
+  }
+  if (!hasRemainingChange) return null;
+  return {
+    before,
+    after,
+    ...(entry.selectionBefore
+      ? { selectionBefore: entry.selectionBefore }
+      : {}),
+    ...(entry.selectionAfter ? { selectionAfter: entry.selectionAfter } : {}),
+  };
+}
+
+export function applyGeometryHistoryDiff(
+  currentGeometry: CanvasFrameGeometryById,
+  entry: GeometryHistoryEntry,
+  direction: "undo" | "redo",
+): CanvasFrameGeometryById {
+  const from = direction === "undo" ? entry.after : entry.before;
+  const to = direction === "undo" ? entry.before : entry.after;
+  const touchedIds = new Set([...Object.keys(from), ...Object.keys(to)]);
+  const next = { ...currentGeometry };
+  for (const frameId of touchedIds) {
+    const target = to[frameId];
+    if (target) {
+      next[frameId] = target;
+    } else {
+      delete next[frameId];
+    }
+  }
+  return next;
+}
+
+export function removeRecentUndoRedoOrderKinds<T extends string>(
+  order: T[],
+  kind: T,
+  count: number,
+): T[] {
+  if (count <= 0) return order;
+  const next = [...order];
+  let remaining = count;
+  for (let index = next.length - 1; index >= 0 && remaining > 0; index -= 1) {
+    if (next[index] !== kind) continue;
+    next.splice(index, 1);
+    remaining -= 1;
+  }
+  return next;
+}
+
+export interface ContentHistoryChange {
+  fileId: string;
+  before: string;
+  after: string;
+}
+
+export interface ContentHistoryGroup {
+  changes: ContentHistoryChange[];
+}
+
+export type ContentHistoryEntry = ContentHistoryChange | ContentHistoryGroup;
+
+export function getContentHistoryChanges(
+  entry: ContentHistoryEntry,
+): ContentHistoryChange[] {
+  return "changes" in entry ? entry.changes : [entry];
+}
+
+export function getAvailableContentHistoryChanges(
+  entry: ContentHistoryEntry,
+  availableFileIds: Iterable<string>,
+  activeFileId?: string | null,
+): ContentHistoryChange[] {
+  const fileIds = new Set(availableFileIds);
+  const activeFileIsAvailable = !!activeFileId && fileIds.has(activeFileId);
+  return getContentHistoryChanges(entry).filter(
+    (change) =>
+      fileIds.has(change.fileId) ||
+      (activeFileIsAvailable && change.fileId === activeFileId),
+  );
+}
+
+export function findLastContentHistoryChangeIndex(
+  stack: ContentHistoryChange[],
+  fileId?: string | null,
+) {
+  if (!fileId) return -1;
+  for (let index = stack.length - 1; index >= 0; index -= 1) {
+    if (stack[index]?.fileId === fileId) return index;
+  }
+  return -1;
+}
+
+export function mergeLocalContentHistoryFallback(
+  stack: ContentHistoryChange[],
+  change: ContentHistoryChange,
+): ContentHistoryChange[] {
+  if (change.before === change.after) return stack;
+  const last = stack[stack.length - 1];
+  if (last && last.fileId === change.fileId && last.after === change.before) {
+    return [...stack.slice(0, -1), { ...last, after: change.after }];
+  }
+  return [...stack.slice(-(MAX_DESIGN_UNDO_STACK - 1)), change];
+}

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

@@ -0,0 +1,185 @@
+import type {
+  DesignHotkeyAlignEdge,
+  DesignHotkeyDistributeAxis,
+} from "@/hooks/useDesignHotkeys";
+
+/**
+ * Generic rect shape shared by the alignment/distribute/tidy pure helpers.
+ * Works for overview screen frames and in-screen layer nodes.
+ */
+export interface AlignableRect {
+  id: string;
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export function computeAlignedPositions(
+  rects: readonly AlignableRect[],
+  bounds: { x: number; y: number; width: number; height: number },
+  edge: DesignHotkeyAlignEdge,
+): Map<string, { x: number; y: number }> {
+  const next = new Map<string, { x: number; y: number }>();
+  for (const rect of rects) {
+    let x = rect.x;
+    let y = rect.y;
+    switch (edge) {
+      case "left":
+        x = bounds.x;
+        break;
+      case "right":
+        x = bounds.x + bounds.width - rect.width;
+        break;
+      case "center-h":
+        x = bounds.x + (bounds.width - rect.width) / 2;
+        break;
+      case "top":
+        y = bounds.y;
+        break;
+      case "bottom":
+        y = bounds.y + bounds.height - rect.height;
+        break;
+      case "center-v":
+        y = bounds.y + (bounds.height - rect.height) / 2;
+        break;
+    }
+    x = Math.round(x);
+    y = Math.round(y);
+    if (x !== Math.round(rect.x) || y !== Math.round(rect.y)) {
+      next.set(rect.id, { x, y });
+    }
+  }
+  return next;
+}
+
+export function computeDistributedPositions(
+  rects: readonly AlignableRect[],
+  axis: DesignHotkeyDistributeAxis,
+): Map<string, { x: number; y: number }> {
+  const next = new Map<string, { x: number; y: number }>();
+  if (rects.length < 3) return next;
+  const sorted = [...rects].sort((a, b) =>
+    axis === "horizontal" ? a.x - b.x : a.y - b.y,
+  );
+  const first = sorted[0]!;
+  const last = sorted[sorted.length - 1]!;
+  const size = (rect: AlignableRect) =>
+    axis === "horizontal" ? rect.width : rect.height;
+  const start = (rect: AlignableRect) =>
+    axis === "horizontal" ? rect.x : rect.y;
+  const totalSpan = start(last) + size(last) - start(first);
+  const totalContentSize = sorted.reduce((sum, rect) => sum + size(rect), 0);
+  const gapCount = sorted.length - 1;
+  const gap = (totalSpan - totalContentSize) / gapCount;
+  let cursor = start(first) + size(first) + gap;
+  for (let index = 1; index < sorted.length - 1; index += 1) {
+    const rect = sorted[index]!;
+    const position = Math.round(cursor);
+    if (position !== Math.round(start(rect))) {
+      next.set(
+        rect.id,
+        axis === "horizontal"
+          ? { x: position, y: rect.y }
+          : { x: rect.x, y: position },
+      );
+    }
+    cursor += size(rect) + gap;
+  }
+  return next;
+}
+
+export function computeTidyPositions(
+  rects: readonly AlignableRect[],
+): Map<string, { x: number; y: number }> {
+  const next = new Map<string, { x: number; y: number }>();
+  if (rects.length === 0) return next;
+  const sorted = [...rects].sort((a, b) => a.y - b.y || a.x - b.x);
+  const columns = Math.max(1, Math.ceil(Math.sqrt(sorted.length)));
+  const median = (values: number[]): number => {
+    const sortedValues = [...values].sort((a, b) => a - b);
+    const mid = Math.floor(sortedValues.length / 2);
+    return sortedValues.length % 2 === 0
+      ? (sortedValues[mid - 1]! + sortedValues[mid]!) / 2
+      : sortedValues[mid]!;
+  };
+  const cellWidth = median(sorted.map((rect) => rect.width));
+  const cellHeight = median(sorted.map((rect) => rect.height));
+  let gap = 24;
+  const gapsFound: number[] = [];
+  for (let i = 0; i < sorted.length; i += 1) {
+    for (let j = 0; j < sorted.length; j += 1) {
+      if (i === j) continue;
+      const a = sorted[i]!;
+      const b = sorted[j]!;
+      const verticallyOverlaps = a.y < b.y + b.height && b.y < a.y + a.height;
+      if (!verticallyOverlaps) continue;
+      const candidateGap = b.x - (a.x + a.width);
+      if (candidateGap > 0) gapsFound.push(candidateGap);
+    }
+  }
+  if (gapsFound.length > 0) gap = Math.max(...gapsFound);
+  const originX = Math.min(...sorted.map((rect) => rect.x));
+  const originY = Math.min(...sorted.map((rect) => rect.y));
+  sorted.forEach((rect, index) => {
+    const col = index % columns;
+    const row = Math.floor(index / columns);
+    const x = Math.round(originX + col * (cellWidth + gap));
+    const y = Math.round(originY + row * (cellHeight + gap));
+    if (x !== Math.round(rect.x) || y !== Math.round(rect.y)) {
+      next.set(rect.id, { x, y });
+    }
+  });
+  return next;
+}
+
+export function inferAutoLayoutFromChildren(
+  container: { x: number; y: number; width: number; height: number },
+  children: readonly AlignableRect[],
+): {
+  direction: "row" | "column";
+  gap: number;
+  padding: number;
+} {
+  if (children.length === 0) {
+    return { direction: "row", gap: 10, padding: 0 };
+  }
+  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 spreadWidth = maxX - minX;
+  const spreadHeight = maxY - minY;
+  const direction: "row" | "column" =
+    spreadWidth >= spreadHeight ? "row" : "column";
+  const sorted = [...children].sort((a, b) =>
+    direction === "row" ? a.x - b.x : a.y - b.y,
+  );
+  const gaps: number[] = [];
+  for (let index = 1; index < sorted.length; index += 1) {
+    const prev = sorted[index - 1]!;
+    const current = sorted[index]!;
+    const gapValue =
+      direction === "row"
+        ? current.x - (prev.x + prev.width)
+        : current.y - (prev.y + prev.height);
+    if (Number.isFinite(gapValue) && gapValue > 0) gaps.push(gapValue);
+  }
+  const median = (values: number[]): number => {
+    const sortedValues = [...values].sort((a, b) => a - b);
+    const mid = Math.floor(sortedValues.length / 2);
+    return sortedValues.length % 2 === 0
+      ? (sortedValues[mid - 1]! + sortedValues[mid]!) / 2
+      : sortedValues[mid]!;
+  };
+  const gap = gaps.length > 0 ? Math.round(median(gaps)) : 10;
+  const insets = [
+    minX - container.x,
+    minY - container.y,
+    container.x + container.width - maxX,
+    container.y + container.height - maxY,
+  ].filter((inset) => Number.isFinite(inset));
+  const padding =
+    insets.length > 0 ? Math.max(0, Math.round(Math.min(...insets))) : 0;
+  return { direction, gap, padding };
+}

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

@@ -0,0 +1,309 @@
+import type { CodeLayerProjection } from "@shared/code-layer";
+import {
+  applyMotionAutoKeyframe,
+  type MotionEase,
+  type MotionTrack,
+} from "@shared/motion-timeline";
+
+import type { MotionDockTrack } from "@/components/design/MotionDock";
+
+import { camelStyleProperty } from "./style-utils";
+
+export interface MotionTimelineRow {
+  id: string | null;
+  designId: string;
+  sourceRef: string | null;
+  filePath: string | null;
+  tracks: unknown;
+  durationMs: number;
+  defaultEase: string;
+  compiledHash: string | null;
+  cssHash?: string | null;
+  source?: "stored" | "recovered-css" | "stored-css-drift";
+  createdAt: string | null;
+  updatedAt: string | null;
+}
+
+export interface MotionTimelineQueryResult {
+  designId: string;
+  timelines: MotionTimelineRow[];
+  count: number;
+}
+
+function isMotionTrack(value: unknown): value is MotionTrack {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return false;
+  const candidate = value as {
+    targetNodeId?: unknown;
+    property?: unknown;
+    keyframes?: unknown;
+  };
+  return (
+    typeof candidate.targetNodeId === "string" &&
+    typeof candidate.property === "string" &&
+    Array.isArray(candidate.keyframes)
+  );
+}
+
+function normalizeMotionTracks(value: unknown): MotionTrack[] {
+  return Array.isArray(value) ? value.filter(isMotionTrack) : [];
+}
+
+function labelForMotionTrack(
+  track: MotionTrack,
+  projection: CodeLayerProjection,
+): string {
+  const node = projection.nodes.find(
+    (candidate) =>
+      candidate.dataAttributes["data-agent-native-node-id"] ===
+        track.targetNodeId || candidate.id === track.targetNodeId,
+  );
+  return node?.layerName || node?.tag || track.targetNodeId;
+}
+
+export function hydrateMotionDockTracks(
+  tracks: unknown,
+  projection: CodeLayerProjection,
+): MotionDockTrack[] {
+  return normalizeMotionTracks(tracks).map((track) => ({
+    ...track,
+    label: labelForMotionTrack(track, projection),
+  }));
+}
+
+export const MOTION_KEYFRAME_TIME_EPSILON = 0.002;
+
+function motionCssPropertyName(property: string): string | null {
+  const trimmed = property.trim();
+  if (!trimmed || trimmed.startsWith("--")) return null;
+  const cssName = trimmed
+    .replace(/^css/, "")
+    .replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+    .toLowerCase();
+  return /^-?[a-z][a-z0-9-]*$/i.test(cssName) ? cssName : null;
+}
+
+/**
+ * Properties auto-keyframe is allowed to record. Discrete / structural
+ * properties (display, position, overflow, font-family, …) do not animate
+ * meaningfully, so committing a multi-property style edit must not invent
+ * tracks for them.
+ */
+const MOTION_ANIMATABLE_PROPERTIES = new Set([
+  "opacity",
+  "transform",
+  "translate",
+  "rotate",
+  "scale",
+  "filter",
+  "backdrop-filter",
+  "color",
+  "background-color",
+  "border-color",
+  "outline-color",
+  "fill",
+  "stroke",
+  "box-shadow",
+  "text-shadow",
+  "width",
+  "height",
+  "min-width",
+  "min-height",
+  "max-width",
+  "max-height",
+  "top",
+  "left",
+  "right",
+  "bottom",
+  "inset",
+  "border-radius",
+  "border-width",
+  "gap",
+  "row-gap",
+  "column-gap",
+  "font-size",
+  "line-height",
+  "letter-spacing",
+  "word-spacing",
+  "text-indent",
+  "background-position",
+  "background-size",
+]);
+
+export function isMotionAnimatableProperty(property: string): boolean {
+  if (MOTION_ANIMATABLE_PROPERTIES.has(property)) return true;
+  return (
+    /^(margin|padding)(-(top|right|bottom|left|inline|block)(-(start|end))?)?$/.test(
+      property,
+    ) ||
+    /^border-(top|right|bottom|left)-(color|width)$/.test(property) ||
+    /^border-(top|bottom)-(left|right)-radius$/.test(property)
+  );
+}
+
+/**
+ * Item 7 — motion auto-key. The pure decision behind
+ * upsertMotionKeyframesFromStyles (DesignEditor's useCallback wrapper, which
+ * only resolves the DOM/projection-dependent targetNodeId and calls this):
+ * given a style-change batch, key every ALREADY-tracked, motion-animatable
+ * property on `targetNodeId` at the current playhead via
+ * applyMotionAutoKeyframe. Matches Figma parity — arming auto-keyframe never
+ * invents a new track for an untracked property; that stays a plain style
+ * change regardless of this function's outcome (the caller commits the style
+ * either way). Returns the SAME `tracks` reference when nothing changed, so
+ * callers can cheaply detect "no-op" via reference equality (as the
+ * setMotionTracks updater here does) without a separate dirty flag.
+ * Extracted as a standalone pure function so the armed/wiring conditions
+ * (property-name mapping to the shared motion catalog, playhead threading,
+ * per-property track lookup) are directly unit-testable — see
+ * DesignEditor.motion.test.ts.
+ */
+export function applyMotionAutoKeyframesForStyles(
+  tracks: MotionDockTrack[],
+  args: {
+    targetNodeId: string;
+    styles: Record<string, string | undefined>;
+    playheadT: number;
+    timelineDurationMs: number;
+    defaultEase?: MotionEase;
+  },
+): MotionDockTrack[] {
+  let next: MotionDockTrack[] = tracks;
+  for (const [rawProperty, rawValue] of Object.entries(args.styles)) {
+    if (rawValue === undefined) continue;
+    const property = motionCssPropertyName(rawProperty);
+    if (!property || !isMotionAnimatableProperty(property)) continue;
+    const value = String(rawValue).trim();
+    if (!value) continue;
+    const keyed = applyMotionAutoKeyframe(
+      next,
+      {
+        targetNodeId: args.targetNodeId,
+        property,
+        value,
+        playheadT: args.playheadT,
+        timelineDurationMs: args.timelineDurationMs,
+      },
+      args.defaultEase,
+    );
+    if (keyed) next = keyed as MotionDockTrack[];
+  }
+  return next;
+}
+
+export function computedMotionStyleValue(
+  computedStyles: Record<string, string> | undefined,
+  property: string,
+): string | undefined {
+  if (!computedStyles) return undefined;
+  return (
+    computedStyles[property] ??
+    computedStyles[camelStyleProperty(property)] ??
+    computedStyles[
+      property.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+    ]
+  );
+}
+
+function defaultMotionBaseValue(property: string, nextValue: string): string {
+  if (property === "opacity") return "1";
+  if (property === "transform" || property === "filter") return "none";
+  return nextValue;
+}
+
+export function upsertMotionStyleKeyframes(args: {
+  tracks: MotionDockTrack[];
+  targetNodeId: string;
+  label: string;
+  styles: Record<string, string>;
+  computedStyles?: Record<string, string>;
+  playhead: number;
+  defaultEase?: string;
+}): MotionDockTrack[] {
+  const t = Math.max(0, Math.min(1, args.playhead));
+  const ease = args.defaultEase ?? "ease";
+  let nextTracks = args.tracks;
+
+  for (const [rawProperty, rawValue] of Object.entries(args.styles)) {
+    if (rawValue === undefined) continue;
+    const value = String(rawValue).trim();
+    if (!value) continue;
+    const property = motionCssPropertyName(rawProperty);
+    if (!property) continue;
+    // Only record properties that actually animate; structural commits
+    // (display, position, overflow, …) must not invent motion tracks.
+    if (!isMotionAnimatableProperty(property)) continue;
+
+    const existingIndex = nextTracks.findIndex(
+      (track) =>
+        track.targetNodeId === args.targetNodeId && track.property === property,
+    );
+
+    if (existingIndex >= 0) {
+      nextTracks = nextTracks.map((track, index) => {
+        if (index !== existingIndex) return track;
+        const withoutCurrentTime = track.keyframes.filter(
+          (keyframe) => Math.abs(keyframe.t - t) > MOTION_KEYFRAME_TIME_EPSILON,
+        );
+        return {
+          ...track,
+          label: track.label || args.label,
+          keyframes: [...withoutCurrentTime, { t, value, ease }].sort(
+            (a, b) => a.t - b.t,
+          ),
+        };
+      });
+      continue;
+    }
+
+    const baseValue =
+      computedMotionStyleValue(args.computedStyles, property) ??
+      computedMotionStyleValue(args.computedStyles, rawProperty) ??
+      defaultMotionBaseValue(property, value);
+    // A brand-new track whose committed value equals its base value would be
+    // a from == to no-op animation — skip it instead of persisting it.
+    if (value === baseValue) continue;
+    const keyframes =
+      t <= MOTION_KEYFRAME_TIME_EPSILON
+        ? [
+            { t: 0, value, ease },
+            { t: 1, value: baseValue, ease },
+          ]
+        : t >= 1 - MOTION_KEYFRAME_TIME_EPSILON
+          ? [
+              { t: 0, value: baseValue, ease },
+              { t: 1, value, ease },
+            ]
+          : [
+              { t: 0, value: baseValue, ease },
+              { t, value, ease },
+              { t: 1, value: baseValue, ease },
+            ];
+    nextTracks = [
+      ...nextTracks,
+      {
+        targetNodeId: args.targetNodeId,
+        property,
+        keyframes,
+        label: args.label,
+      },
+    ];
+  }
+
+  return nextTracks;
+}
+
+export function motionTimelineFingerprint(
+  fileId: string,
+  timeline: MotionTimelineRow | null | undefined,
+): string {
+  if (!timeline) return `${fileId}:empty`;
+  return [
+    fileId,
+    timeline.id ?? "css",
+    timeline.updatedAt ?? "no-updated-at",
+    timeline.compiledHash ?? "no-compiled-hash",
+    timeline.cssHash ?? "no-css-hash",
+    timeline.source ?? "stored",
+    JSON.stringify(timeline.tracks),
+  ].join(":");
+}