@agent-native/core 0.169.1 → 0.170.0

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

@@ -79,6 +79,14 @@ export function normalizeDesignMode(value: unknown): EditorMode | null {
     : null;
 }
 
+/**
+ * Scale is a mode, not a one-shot: Figma keeps K armed across selection
+ * changes, while every gesture-scoped tool falls back to move.
+ */
+export function resolveToolAfterSelection(current: DesignTool): DesignTool {
+  return current === "scale" ? "scale" : "move";
+}
+
 export function isSingleScreenAnnotationTool(tool: DesignTool): boolean {
   return tool === "draw" || tool === "comment";
 }

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

@@ -36,9 +36,9 @@ export type DesignLeftPanel =
 /**
  * Keep the still-evolving Design editor side panels out of the default
  * surface until their Figma parity work is ready. Flip this switch to expose
- * Assets, Tools, Tokens, and Code together while iterating on them. The E2E
- * harness sets the Vite flag so those existing advanced-surface tests keep
- * exercising the gated panels.
+ * Assets, Tools, Tokens, Code, and Motion together while iterating on them.
+ * The E2E harness sets the Vite flag so those existing advanced-surface tests
+ * keep exercising the gated panels.
  */
 const designSecondaryLeftPanelsSetting =
   typeof import.meta !== "undefined"

package/corpus/templates/design/app/routes.ts

@@ -1,4 +1,6 @@
 import { type RouteConfig } from "@react-router/dev/routes";
 import { flatRoutes } from "@react-router/fs-routes";
 
-export default flatRoutes() satisfies RouteConfig;
+export default flatRoutes({
+  ignoredRouteFiles: ["**/*.test.{ts,tsx}", "**/*.spec.{ts,tsx}"],
+}) satisfies RouteConfig;

package/corpus/templates/design/changelog/2026-08-20-canvas-edits-patch-the-frame-instead-of-rebuilding-it.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-20
+---
+
+Deleting or editing an element patches the canvas in place instead of rebuilding the frame, so scroll position, focus and running component state survive the edit.

package/corpus/templates/design/changelog/2026-08-21-builder-design-system-imports-reconcile-after-indexing.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Completed Builder design-system imports now update the local Design system with indexed tokens instead of leaving placeholder values.

package/corpus/templates/design/changelog/2026-08-21-draw-mode-needs-shift-y.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Draw mode now needs Shift+Y, so a single stray keystroke can no longer switch the editor into annotate mode.

package/corpus/templates/design/changelog/2026-08-21-eyedropper-shortcut.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-21
+---
+
+Press I anywhere on the canvas to sample a color with the eyedropper and apply it to the selection.

package/corpus/templates/design/changelog/2026-08-21-figma-style-alignment-guides-and-snapping.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-21
+---
+
+Dragging a screen or an element now lights up every edge and centre it lines up with, snaps spacing to gaps that already exist, and shows its pixel size and constraint lines.

package/corpus/templates/design/changelog/2026-08-21-group-transforms-keep-the-selection.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Moving or scaling several objects at once keeps them all selected, so you can keep adjusting instead of falling back to one object.

package/corpus/templates/design/changelog/2026-08-21-inspector-fields-keep-focus-on-enter.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Inspector number fields keep focus after Enter, so the next keystroke edits the field instead of triggering a canvas shortcut.

package/corpus/templates/design/changelog/2026-08-21-pen-alt-keeps-the-incoming-handle.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Pen: holding Alt on a new anchor now keeps the incoming handle where it was and stays broken after you release Alt.

package/corpus/templates/design/changelog/2026-08-21-pen-on-the-board-creates-one-vector.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Finishing a pen path on the canvas board creates one vector instead of two, and leaves the Pen tool armed for the next path.

package/corpus/templates/design/changelog/2026-08-21-scale-a-multi-selection-from-the-group-handles.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-21
+---
+
+Scale now applies to a multi-selection: drag a corner of the group box and every selected object scales together.

package/corpus/templates/design/changelog/2026-08-21-scale-resizes-text-with-the-object.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-08-21
+---
+
+Scale resizes the text inside an object along with its box and stroke, matching Figma.

package/corpus/templates/design/changelog/2026-08-21-selecting-another-object-keeps-the-scale-tool-armed.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Selecting another object keeps the Scale tool armed instead of dropping you back to Move.

package/corpus/templates/design/changelog/2026-08-21-the-shape-tool-remembers-the-shape-you-picked.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+The shape tool now stays on the shape you picked — drawing an ellipse no longer resets the toolbar button to Rectangle.

package/corpus/templates/design/changelog/2026-08-21-vectors-drawn-in-a-frame-land-where-you-drew-them.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-21
+---
+
+Pen paths, lines, arrows, polygons and stars drawn inside a frame now land where you drew them instead of jumping by the frame's position.

package/corpus/templates/design/changelog/2026-08-22-multi-screen-generation-no-longer-loses-a-saved-screens-layo.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-22
+---
+
+Generating or updating several screens in one request no longer loses an already-saved screen's layout and styling when another screen in the same request hits a save conflict — the saved screen keeps its placement, and the conflicting screen is reported so you can retry just that one.

package/corpus/templates/design/changelog/2026-08-22-rename-and-search-fields-are-labeled-for-screen-readers.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-08-22
+---
+
+The rename design and search text fields on the Designs home page now have accessible names, so screen readers announce them instead of leaving them unlabeled.

package/corpus/templates/design/package.json

@@ -29,6 +29,7 @@
     "@tailwindcss/browser": "^4.3.3",
     "acorn": "^8.18.0",
     "alpinejs": "^3.15.12",
+    "diff-match-patch": "^1.0.5",
     "drizzle-orm": "^0.45.2",
     "entities": "8.0.0",
     "fzstd": "^0.1.1",
@@ -81,6 +82,7 @@
     "@tailwindcss/typography": "^0.5.20",
     "@tailwindcss/vite": "catalog:",
     "@tanstack/react-query": "^5.99.2",
+    "@types/diff-match-patch": "^1.0.36",
     "@types/node": "^24.2.1",
     "@types/react": "catalog:",
     "@types/react-dom": "catalog:",

package/corpus/templates/design/server/lib/builder-design-system-proxy.ts

@@ -1,6 +1,13 @@
+import {
+  friendlyTokenName,
+  isColorTokenValue,
+  normalizeBrandKitTokens,
+  resolveBrandKitTokens,
+} from "@agent-native/core/brand-kit";
 import {
   createBuilderDesignSystemProxyFields,
   localBuilderDesignSystemId,
+  type BuilderDesignSystemHydratedReference,
   type BuilderDesignSystemIndexResult,
   type BuilderDesignSystemGitHubSource,
   type BuilderDesignSystemSourceKind,
@@ -10,6 +17,310 @@ import { nanoid } from "nanoid";
 
 import { getDb, schema } from "../db/index.js";
 
+type ProxyData = Record<string, unknown> & {
+  colors?: Record<string, unknown>;
+  typography?: Record<string, unknown>;
+  spacing?: Record<string, unknown>;
+  borders?: Record<string, unknown>;
+  defaults?: Record<string, unknown>;
+  customCSS?: unknown;
+  tokens?: unknown;
+};
+
+type HydratedBuilderDesignSystemReference =
+  BuilderDesignSystemHydratedReference & {
+    completionConfirmed?: boolean;
+  };
+
+export interface BuilderProxyReconciliation {
+  data: string;
+  tokenCount: number;
+  rejectedTokenCount: number;
+  completionConfirmed: boolean;
+}
+
+function parseProxyData(data: string): ProxyData {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(data);
+  } catch {
+    throw new Error("Builder design-system proxy data is not valid JSON.");
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("Builder design-system proxy data must be a JSON object.");
+  }
+  return parsed as ProxyData;
+}
+
+function normalizedTokenName(value: string): string {
+  return value.toLowerCase().replace(/^--/, "").replace(/_/g, "-");
+}
+
+function tokenShade(name: string): number | undefined {
+  const match = name.match(/(?:^|-)(\d{2,4})(?:-|$)/);
+  return match ? Number(match[1]) : undefined;
+}
+
+function findTokenValue(
+  tokens: Array<{ cssVar: string; value: string; type: string }>,
+  names: string[],
+  excludedNamePattern?: RegExp,
+): string | undefined {
+  const candidates = tokens
+    .filter((token) => isColorTokenValue(token.value))
+    .map((token) => {
+      const name = normalizedTokenName(token.cssVar);
+      const exactIndex = names.indexOf(name);
+      const hasName = names.some((candidate) =>
+        new RegExp(`(?:^|-)${candidate}(?:-|$)`, "i").test(name),
+      );
+      return {
+        token,
+        name,
+        score: exactIndex >= 0 ? 100 - exactIndex : hasName ? 10 : 0,
+      };
+    })
+    .filter(
+      (candidate) =>
+        candidate.score > 0 && !excludedNamePattern?.test(candidate.name),
+    );
+  const exactCandidates = candidates
+    .filter((candidate) => names.includes(candidate.name))
+    .sort((a, b) => b.score - a.score);
+  if (exactCandidates.length > 0) {
+    return exactCandidates[0].token.value;
+  }
+
+  const fallbackCandidates = candidates.sort((a, b) => {
+    const aShade = tokenShade(a.name);
+    const bShade = tokenShade(b.name);
+    const aShadeRank = aShade === 500 ? 0 : aShade === undefined ? 1 : 2;
+    const bShadeRank = bShade === 500 ? 0 : bShade === undefined ? 1 : 2;
+    return (
+      aShadeRank - bShadeRank ||
+      (aShade === undefined
+        ? Number.MAX_SAFE_INTEGER
+        : Math.abs(aShade - 500)) -
+        (bShade === undefined
+          ? Number.MAX_SAFE_INTEGER
+          : Math.abs(bShade - 500)) ||
+      a.name.localeCompare(b.name)
+    );
+  });
+  return fallbackCandidates[0]?.token.value;
+}
+
+function findTypedTokenValue(
+  tokens: Array<{ cssVar: string; value: string; type: string }>,
+  patterns: RegExp[],
+  excludedNamePattern?: RegExp,
+): string | undefined {
+  const candidates = tokens
+    .filter((token) => {
+      if (token.type !== "typography") return false;
+      const name = normalizedTokenName(token.cssVar);
+      if (
+        excludedNamePattern?.test(name) ||
+        !/(?:^|-)font(?:-family)?(?:-|$)|(?:^|-)family(?:-|$)/i.test(name) ||
+        /(?:^|-)weight(?:-|$)|(?:^|-)size(?:-|$)|line-?height|leading|letter|tracking/i.test(
+          name,
+        ) ||
+        /^-?\d*\.?\d+(?:px|rem|em|ex|ch|%|vh|vw|vmin|vmax|pt|pc|cm|mm|in|s|ms|deg|fr)?$/i.test(
+          token.value.trim(),
+        )
+      ) {
+        return false;
+      }
+      return true;
+    })
+    .map((token) => ({
+      token,
+      name: normalizedTokenName(token.cssVar),
+      patternIndex: patterns.findIndex((pattern) =>
+        pattern.test(normalizedTokenName(token.cssVar)),
+      ),
+    }))
+    .filter((candidate) => candidate.patternIndex >= 0)
+    .sort(
+      (a, b) => a.patternIndex - b.patternIndex || a.name.localeCompare(b.name),
+    );
+  return candidates[0]?.token.value;
+}
+
+function findTokenByPattern(
+  tokens: Array<{ cssVar: string; value: string; type: string }>,
+  type: string,
+  pattern: RegExp,
+): string | undefined {
+  return tokens.find(
+    (token) => token.type === type && pattern.test(token.cssVar),
+  )?.value;
+}
+
+/**
+ * Merge completed Builder token extraction into the local selectable proxy.
+ * The Builder docs remain the source of truth, but the local row must carry
+ * concrete values because list/detail UI and token indexing read that row.
+ */
+export function reconcileBuilderProxyData(
+  data: string,
+  hydrated: HydratedBuilderDesignSystemReference,
+  syncedAt: string,
+): BuilderProxyReconciliation | null {
+  const parsed = parseProxyData(data);
+  const extracted = normalizeBrandKitTokens(
+    Object.entries(hydrated.tokenValues).map(([cssVar, value]) => ({
+      name: friendlyTokenName(cssVar),
+      cssVar,
+      value,
+      source: "Builder DSI",
+    })),
+  );
+  const completionConfirmed =
+    hydrated.completionConfirmed === true ||
+    hydrated.builderStatus === "ready" ||
+    hydrated.builderStatus === "complete" ||
+    hydrated.builderStatus === "completed";
+  if (extracted.tokens.length === 0) {
+    if (extracted.rejected.length > 0) {
+      return {
+        data,
+        tokenCount: 0,
+        rejectedTokenCount: extracted.rejected.length,
+        completionConfirmed: false,
+      };
+    }
+    if (!completionConfirmed) return null;
+    return {
+      data: JSON.stringify({
+        ...parsed,
+        builderStatus: "ready",
+        builderSyncedAt: syncedAt,
+      }),
+      tokenCount: 0,
+      rejectedTokenCount: 0,
+      completionConfirmed: true,
+    };
+  }
+
+  const legacyCssTokens =
+    typeof parsed.customCSS === "string"
+      ? resolveBrandKitTokens({ customCSS: parsed.customCSS }, "Local CSS")
+      : [];
+  const existing = [
+    ...legacyCssTokens,
+    ...normalizeBrandKitTokens(parsed.tokens).tokens,
+  ].filter((token) => token.source !== "Builder DSI");
+  const tokensByCssVar = new Map(
+    existing.map((token) => [token.cssVar, token]),
+  );
+  for (const token of extracted.tokens) {
+    tokensByCssVar.set(token.cssVar, token);
+  }
+  const tokens = [...tokensByCssVar.values()];
+  const colorTokens = tokens.filter((token) => token.type === "color");
+  const builderColorTokens = extracted.tokens.filter(
+    (token) => token.type === "color",
+  );
+  const nextColors = { ...(parsed.colors ?? {}) };
+  const colorRoles: Record<string, string[]> = {
+    primary: ["primary", "color-primary", "brand-primary"],
+    secondary: ["secondary", "color-secondary", "brand-secondary"],
+    accent: ["accent", "color-accent", "brand-accent"],
+    background: ["background", "color-background", "page-background"],
+    surface: ["surface", "color-surface", "card-background"],
+    text: ["text", "color-text", "foreground", "text-primary"],
+    textMuted: ["text-muted", "muted-foreground", "text-secondary", "muted"],
+  };
+  for (const [role, names] of Object.entries(colorRoles)) {
+    const excludedNamePattern =
+      role === "primary" ? /(?:^|-)text(?:-|$)/i : undefined;
+    const value =
+      findTokenValue(builderColorTokens, names, excludedNamePattern) ??
+      findTokenValue(colorTokens, names, excludedNamePattern);
+    if (value) nextColors[role] = value;
+  }
+
+  const nextTypography = { ...(parsed.typography ?? {}) };
+  const builderTypographyTokens = extracted.tokens.filter(
+    (token) => token.type === "typography",
+  );
+  const headingPatterns = [
+    /(?:^|-)heading(?:-|$)/i,
+    /(?:^|-)display(?:-|$)/i,
+    /(?:^|-)title(?:-|$)/i,
+  ];
+  const bodyPatterns = [
+    /(?:^|-)body(?:-|$)/i,
+    /(?:^|-)base(?:-|$)/i,
+    /(?:^|-)text(?:-|$)/i,
+    /(?:^|-)font-family(?:-|$)/i,
+  ];
+  const headingFont =
+    findTypedTokenValue(builderTypographyTokens, headingPatterns) ??
+    findTypedTokenValue(tokens, headingPatterns);
+  const bodyFont =
+    findTypedTokenValue(
+      builderTypographyTokens,
+      bodyPatterns,
+      /(?:^|-)heading(?:-|$)|(?:^|-)display(?:-|$)|(?:^|-)title(?:-|$)/i,
+    ) ??
+    findTypedTokenValue(
+      tokens,
+      bodyPatterns,
+      /(?:^|-)heading(?:-|$)|(?:^|-)display(?:-|$)|(?:^|-)title(?:-|$)/i,
+    );
+  if (headingFont) nextTypography.headingFont = headingFont;
+  if (bodyFont) nextTypography.bodyFont = bodyFont;
+
+  const nextSpacing = { ...(parsed.spacing ?? {}) };
+  const builderSpacingTokens = extracted.tokens.filter(
+    (token) => token.type === "spacing",
+  );
+  const spacingGapPattern = /gap|gutter|spacing/i;
+  const spacingPaddingPattern = /padding|page-space|outer-space/i;
+  const gap =
+    findTokenByPattern(builderSpacingTokens, "spacing", spacingGapPattern) ??
+    findTokenByPattern(tokens, "spacing", spacingGapPattern);
+  const pagePadding =
+    findTokenByPattern(
+      builderSpacingTokens,
+      "spacing",
+      spacingPaddingPattern,
+    ) ?? findTokenByPattern(tokens, "spacing", spacingPaddingPattern);
+  if (gap) nextSpacing.elementGap = gap;
+  if (pagePadding) nextSpacing.pagePadding = pagePadding;
+
+  const nextBorders = { ...(parsed.borders ?? {}) };
+  const radiusPattern = /radius|rounded|corner/i;
+  const radius =
+    findTokenByPattern(extracted.tokens, "radius", radiusPattern) ??
+    findTokenByPattern(tokens, "radius", radiusPattern);
+  if (radius) nextBorders.radius = radius;
+
+  const nextDefaults = { ...(parsed.defaults ?? {}) };
+  if (typeof nextColors.background === "string") {
+    nextDefaults.background = nextColors.background;
+  }
+
+  return {
+    data: JSON.stringify({
+      ...parsed,
+      builderStatus: completionConfirmed ? "ready" : "in-progress",
+      ...(completionConfirmed ? { builderSyncedAt: syncedAt } : {}),
+      colors: nextColors,
+      typography: nextTypography,
+      spacing: nextSpacing,
+      borders: nextBorders,
+      defaults: nextDefaults,
+      tokens,
+    }),
+    tokenCount: extracted.tokens.length,
+    rejectedTokenCount: extracted.rejected.length,
+    completionConfirmed,
+  };
+}
+
 export async function upsertBuilderProxyDesignSystem({
   result,
   ownerEmail,