@agent-native/core 0.140.0 → 0.141.0

package/corpus/templates/design/actions/get-design-system.ts

@@ -1,8 +1,4 @@
 import { defineAction } from "@agent-native/core";
-import {
-  brandKitRoleTokens,
-  resolveBrandKitTokens,
-} from "@agent-native/core/brand-kit/tokens";
 import {
   hydrateBuilderDesignSystemReference,
   parseBuilderDesignSystemProxyReference,
@@ -65,54 +61,6 @@ function formatTokenValues(tokenValues: Record<string, string>): string[] {
   ];
 }
 
-const MAX_LISTED_TOKENS = 40;
-
-/**
- * Require generated CSS to reference tokens rather than paste their values. A
- * colour cannot identify a token afterwards — Carbon points four at one blue.
- */
-function tokenReferenceDirective(data: unknown): string[] {
-  if (!data || typeof data !== "object") return [];
-  const kit = data as {
-    tokens?: unknown;
-    customCSS?: unknown;
-    colors?: object | null;
-    borders?: { radius?: string } | null;
-    spacing?: object | null;
-  };
-  const tokens = [
-    ...resolveBrandKitTokens(kit),
-    ...brandKitRoleTokens(kit),
-  ].filter((token) => token.type === "color");
-  if (tokens.length === 0) return [];
-
-  const seen = new Set<string>();
-  const listed: string[] = [];
-  for (const token of tokens) {
-    if (seen.has(token.cssVar)) continue;
-    seen.add(token.cssVar);
-    listed.push(`- ${token.cssVar}: ${token.value}`);
-    if (listed.length >= MAX_LISTED_TOKENS) break;
-  }
-
-  return [
-    "",
-    "### Reference these color tokens, do not paste their values",
-    "Write the token reference with its value as a fallback:",
-    // guard:allow-raw-color — the do/don't example shown to the generating agent
-    "  background: var(--color-accent, #0f62fe);   /* yes */",
-    // guard:allow-raw-color — the counter-example it must not copy
-    "  background: #0f62fe;                        /* no  */",
-    "The fallback is required — exports and unlinked designs define no custom",
-    "properties, and a bare var() renders transparent there. Define every token",
-    "you reference in the screen's `:root` block too.",
-    ...listed,
-    seen.size > MAX_LISTED_TOKENS
-      ? `- …and ${seen.size - MAX_LISTED_TOKENS} more; call get-design-system for the full set.`
-      : "",
-  ];
-}
-
 function buildDesignSystemAgentContext({
   id,
   title,
@@ -134,7 +82,6 @@ function buildDesignSystemAgentContext({
     "## Selected Design System Context",
     `Use "${title}" (id: ${id}) as the visual source of truth for this generation.`,
     "Apply these tokens, assets, and usage notes before choosing colors, type, spacing, radius, imagery, or component language.",
-    ...tokenReferenceDirective(parseJson(data)),
   ];
 
   if (description?.trim()) {

package/corpus/templates/design/actions/import-design-tokens.ts

@@ -1,9 +1,4 @@
 import { defineAction } from "@agent-native/core";
-import {
-  classifyBrandKitToken as classifyVar,
-  friendlyTokenName as friendlyName,
-  isColorTokenValue as isColorValue,
-} from "@agent-native/core/brand-kit/tokens";
 import { buildDeepLink } from "@agent-native/core/server";
 import {
   CODE_MAX_FILES,
@@ -121,6 +116,70 @@ function designDeepLink(designId: string): string {
   });
 }
 
+function classifyVar(name: string, value: string): ImportedTokenType {
+  const n = name.toLowerCase();
+  if (
+    /color|bg|background|text|border|accent|primary|secondary|surface|muted|foreground|fill|stroke/i.test(
+      n,
+    ) ||
+    isColorValue(value)
+  ) {
+    return "color";
+  }
+  if (/font|size|leading|tracking|weight|heading|body|type/i.test(n)) {
+    return "typography";
+  }
+  if (/radius|rounded/i.test(n)) return "radius";
+  if (/spacing|gap|padding|margin|space/i.test(n)) return "spacing";
+  if (/shadow|blur|drop/i.test(n)) return "shadow";
+  return "other";
+}
+
+function isColorValue(value: string): boolean {
+  const normalized = value.trim().toLowerCase();
+  if (
+    /^(#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(|oklch\(|color\()/i.test(normalized)
+  ) {
+    return true;
+  }
+  return [
+    "red",
+    "blue",
+    "green",
+    "yellow",
+    "orange",
+    "purple",
+    "pink",
+    "cyan",
+    "magenta",
+    "teal",
+    "navy",
+    "maroon",
+    "coral",
+    "salmon",
+    "gold",
+    "silver",
+    "gray",
+    "grey",
+    "indigo",
+    "violet",
+    "lime",
+    "olive",
+    "aqua",
+    "fuchsia",
+    "crimson",
+    "turquoise",
+    "ivory",
+    "beige",
+    "lavender",
+    "tan",
+    "khaki",
+    "plum",
+    "orchid",
+    "sienna",
+  ].includes(normalized);
+}
+
 function toKebab(value: string): string {
   return (
     value
@@ -134,6 +193,13 @@ function toKebab(value: string): string {
   );
 }
 
+function friendlyName(cssVar: string): string {
+  return cssVar
+    .replace(/^--/, "")
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
 function normalizeValue(value: string): string {
   return value
     .trim()

package/corpus/templates/design/actions/index-design-tokens.ts

@@ -1,10 +1,4 @@
 import { defineAction } from "@agent-native/core";
-import {
-  brandKitRoleTokens,
-  classifyBrandKitToken,
-  friendlyTokenName,
-  resolveBrandKitTokens,
-} from "@agent-native/core/brand-kit/tokens";
 import { extractCssVars } from "@agent-native/core/server/design-token-utils";
 import { resolveAccess } from "@agent-native/core/sharing";
 import { eq } from "drizzle-orm";
@@ -18,12 +12,52 @@ import {
   resolveTweaksToCssVars,
 } from "../shared/resolve-tweaks.js";
 
+// ---------------------------------------------------------------------------
+// Token type classification
+// ---------------------------------------------------------------------------
+
+function classifyVar(
+  name: string,
+  value: string,
+): "color" | "typography" | "spacing" | "radius" | "shadow" | "other" {
+  const n = name.toLowerCase();
+  if (
+    /color|bg|background|text|border|accent|primary|secondary|surface|muted|foreground|fill|stroke/i.test(
+      n,
+    ) ||
+    /^(#[0-9a-fA-F]{3,8}|rgba?\(|hsla?\(|oklch\(|color\()/.test(value.trim())
+  ) {
+    return "color";
+  }
+  if (/font|size|leading|tracking|weight|heading|body|type/i.test(n)) {
+    return "typography";
+  }
+  if (/radius|rounded/i.test(n)) {
+    return "radius";
+  }
+  if (/spacing|gap|padding|margin|space/i.test(n)) {
+    return "spacing";
+  }
+  if (/shadow|blur|drop/i.test(n)) {
+    return "shadow";
+  }
+  return "other";
+}
+
+/** Derive a friendly display name from a CSS var name like `--primary-color`. */
+function friendlyName(cssVar: string): string {
+  return cssVar
+    .replace(/^--/, "")
+    .replace(/[-_]/g, " ")
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
 // ---------------------------------------------------------------------------
 // Token entry shape
 // ---------------------------------------------------------------------------
 
 export interface DesignToken {
-  /** The linked Brand Kit's own token name when it has one, else derived. */
+  /** Human-readable display name, e.g. "Primary Color". */
   name: string;
   /** CSS custom property, e.g. "--primary-color". */
   cssVar: string;
@@ -33,13 +67,6 @@ export interface DesignToken {
   type: "color" | "typography" | "spacing" | "radius" | "shadow" | "other";
   /** Opaque source chip label, e.g. "globals.css" or "Brand Kit". */
   source: string;
-  /** Collection path from the Brand Kit, e.g. "Colors/Interactive". */
-  group?: string;
-  /**
-   * Which layer supplied the token. Filter on this, not on `source` — that is a
-   * free-text chip label (a filename, "Brand Kit", "Tweaks", …).
-   */
-  origin: "design" | "brand-kit";
   /**
    * True when the value comes from the design's own tweak selections (i.e.
    * the user has already customised this token in the editor).
@@ -47,16 +74,6 @@ export interface DesignToken {
   isTweakOverride?: boolean;
 }
 
-/** Layer of a token's provenance, before it is flattened into a DesignToken. */
-interface RawToken {
-  value: string;
-  source: string;
-  origin: DesignToken["origin"];
-  /** Present only when a Brand Kit supplied the token's own name. */
-  name?: string;
-  group?: string;
-}
-
 // ---------------------------------------------------------------------------
 // Action
 // ---------------------------------------------------------------------------
@@ -64,11 +81,9 @@ interface RawToken {
 export default defineAction({
   description:
     "Index the design tokens for a design as a friendly { name, cssVar, " +
-    "value, type, source, group } list. Parses CSS custom properties from the " +
+    "value, type, source } list. Parses CSS custom properties from the " +
     "design's HTML :root block, the linked Brand Kit / design system, and " +
-    "the user's applied tweak selections. Tokens the linked Brand Kit stores " +
-    "by name keep that name and collection group; the rest get a name derived " +
-    "from their CSS variable. Returns tokens grouped by type " +
+    "the user's applied tweak selections.  Returns tokens grouped by type " +
     "(color, typography, spacing, radius, shadow, other).",
   schema: z.object({
     designId: z.string().describe("Design project ID"),
@@ -94,21 +109,19 @@ export default defineAction({
       .from(schema.designFiles)
       .where(eq(schema.designFiles.designId, designId));
 
-    /** cssVar -> latest layer that set it */
-    const rawTokens: Map<string, RawToken> = new Map();
+    /** cssVar -> { value, source } */
+    const rawTokens: Map<string, { value: string; source: string }> = new Map();
     // Persisted Brand Kit JSON can outlive its schema. Keep one malformed token
     // from taking down the whole read action while preserving valid siblings.
     const setRawToken = (
       cssVar: string,
       value: unknown,
       source: unknown,
-      provenance: Omit<RawToken, "value" | "source">,
     ): void => {
       if (typeof value !== "string") return;
       rawTokens.set(cssVar, {
         value,
         source: typeof source === "string" && source ? source : "Unknown",
-        ...provenance,
       });
     };
 
@@ -125,7 +138,7 @@ export default defineAction({
       };
       extractCssVars(state, file.content);
       for (const [k, v] of Object.entries(state.cssCustomProperties)) {
-        setRawToken(k, v, file.filename, { origin: "design" });
+        setRawToken(k, v, file.filename);
       }
     }
 
@@ -152,24 +165,38 @@ export default defineAction({
       if (dsRow?.data) {
         try {
           const dsData = JSON.parse(dsRow.data) as Partial<DesignSystemData>;
-          // The role -> var mapping lives in core so a rewriter cannot drift.
-          for (const token of brandKitRoleTokens(dsData)) {
-            setRawToken(token.cssVar, token.value, "Brand Kit", {
-              origin: "brand-kit",
-            });
+          // Flatten the Brand Kit's known token fields into CSS vars
+          const brandColors = dsData.colors ?? {};
+          const colorRoleMap: Record<string, string> = {
+            primary: "--color-primary",
+            secondary: "--color-secondary",
+            accent: "--color-accent",
+            background: "--color-background",
+            surface: "--color-surface",
+            text: "--color-text",
+            textMuted: "--color-text-muted",
+          };
+          for (const [role, cssVar] of Object.entries(colorRoleMap)) {
+            const v = (brandColors as Record<string, string>)[role];
+            if (v) setRawToken(cssVar, v, "Brand Kit");
+          }
+          // Border radius
+          if (dsData.borders?.radius) {
+            setRawToken("--radius", dsData.borders.radius, "Brand Kit");
           }
-          // Layered after the roles: the kit's own names win over the
-          // seven-slot summary.
-          for (const token of resolveBrandKitTokens(dsData, "Brand Kit")) {
+          // Spacing
+          if (dsData.spacing?.elementGap) {
             setRawToken(
-              token.cssVar,
-              token.value,
-              token.source ?? "Brand Kit",
-              {
-                origin: "brand-kit",
-                name: token.name,
-                ...(token.group ? { group: token.group } : {}),
-              },
+              "--spacing-element-gap",
+              dsData.spacing.elementGap,
+              "Brand Kit",
+            );
+          }
+          if (dsData.spacing?.pagePadding) {
+            setRawToken(
+              "--spacing-page-padding",
+              dsData.spacing.pagePadding,
+              "Brand Kit",
             );
           }
         } catch {
@@ -223,28 +250,20 @@ export default defineAction({
       ...Object.keys(tweakSelections).filter(isDirectCssVarSelectionKey),
     ]);
     for (const [cssVar, value] of Object.entries(resolvedOverrides)) {
-      // Retuning a value must not rename the token it came from.
-      const inherited = rawTokens.get(cssVar);
-      setRawToken(cssVar, value, tokenImportSources[cssVar] ?? "Tweaks", {
-        origin: inherited?.origin ?? "design",
-        ...(inherited?.name ? { name: inherited.name } : {}),
-        ...(inherited?.group ? { group: inherited.group } : {}),
-      });
+      setRawToken(cssVar, value, tokenImportSources[cssVar] ?? "Tweaks");
     }
 
     // ------------------------------------------------------------------
     // 4. Build friendly token list
     // ------------------------------------------------------------------
     const tokens: DesignToken[] = [];
-    for (const [cssVar, { value, source, name, group, origin }] of rawTokens) {
+    for (const [cssVar, { value, source }] of rawTokens) {
       tokens.push({
-        name: name ?? friendlyTokenName(cssVar),
+        name: friendlyName(cssVar),
         cssVar,
         value,
-        type: classifyBrandKitToken(cssVar, value),
+        type: classifyVar(cssVar, value),
         source,
-        origin,
-        ...(group ? { group } : {}),
         isTweakOverride: tweakCssVars.has(cssVar),
       });
     }

package/corpus/templates/design/actions/update-design-system.ts

@@ -4,7 +4,6 @@ import { eq } from "drizzle-orm";
 import { z } from "zod";
 
 import { getDb, schema } from "../server/db/index.js";
-import { assertStorableDesignSystemTokens } from "../server/lib/design-system-tokens.js";
 
 export default defineAction({
   description:
@@ -24,11 +23,7 @@ export default defineAction({
       .trim()
       .min(1, "data cannot be empty")
       .optional()
-      .describe(
-        "Updated JSON string of DesignSystemData. Replaces the whole object, so " +
-          "include the existing `tokens` array (the source system's named tokens) " +
-          "alongside any edit, or those names are dropped.",
-      ),
+      .describe("Updated JSON string of DesignSystemData"),
     assets: z
       .string()
       .optional()
@@ -41,8 +36,16 @@ export default defineAction({
       ),
   }),
   run: async ({ id, title, description, data, assets, customInstructions }) => {
+    // Validate that data/assets are valid JSON when provided
     if (data !== undefined) {
-      assertStorableDesignSystemTokens(data);
+      try {
+        const parsed = JSON.parse(data);
+        if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+          throw new Error();
+        }
+      } catch {
+        throw new Error("data must be a valid JSON object string");
+      }
     }
     if (assets !== undefined) {
       try {

package/corpus/templates/design/app/components/design/EditPanel.tsx

@@ -155,12 +155,6 @@ import {
   vscodeDeepLink,
 } from "./edit-panel/code-inspect-helpers";
 import { ComponentSection } from "./edit-panel/component-section";
-import {
-  parseTokenReference,
-  resolveTokenNameForColor,
-  toDesignSystemColorSwatches,
-  type DesignSystemColorSwatch,
-} from "./edit-panel/design-system-swatches";
 import {
   type DocumentColorSourceFile,
   extractDocumentColorPalette,
@@ -389,9 +383,6 @@ export { deriveLockedAspectSize };
 export { mergeRotationValue, normalizeRotationDegrees };
 export { mixedElementFromSelection };
 export { authoredStyleValue, resolveInteractionStateValue };
-
-/** A `var()` reference names itself, so no kit lookup is needed to label it. */
-const EMPTY_SWATCHES: DesignSystemColorSwatch[] = [];
 export { isTextElement };
 export { ComponentSection };
 export { extractDocumentColorPalette, type DocumentColorSourceFile };
@@ -1476,15 +1467,12 @@ function PageProperties({
   styles,
   onStyleChange,
   onStylesChange,
-  designSystemColors,
   canvasBackground,
   onCanvasBackgroundChange,
 }: {
   styles: Record<string, string>;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
-  /** Kit tokens offered by name in the canvas/page background pickers. */
-  designSystemColors?: DesignSystemColorSwatch[];
   canvasBackground?: string | null;
   onCanvasBackgroundChange?: (value: string, meta?: StyleChangeMeta) => void;
 }) {
@@ -1515,7 +1503,6 @@ function PageProperties({
         <PanelSection title={t("editPanel.sections.canvas")}>
           <ColorInput
             label={t("editPanel.labels.background")}
-            designSystemColors={designSystemColors}
             value={canvasBackground ?? ""}
             // meta carries phase: "preview" while dragging vs "commit" on
             // release. Dropping it persists every tick and the picker jumps.
@@ -1526,7 +1513,6 @@ function PageProperties({
       <PanelSection title={t("editPanel.sections.page")}>
         <ColorInput
           label={t("editPanel.labels.background")}
-          designSystemColors={designSystemColors}
           value={styles.backgroundColor || ""}
           onChange={(v, meta) => onStyleChange("backgroundColor", v, meta)}
           backgroundImage={styles.backgroundImage}
@@ -1738,15 +1724,8 @@ function SelectionColorsProperties({
                       className="size-4 shrink-0 rounded-[3px] border border-border/60"
                       style={swatchStyle(color.value)}
                     />
-                    <span
-                      className={cn(
-                        "min-w-0 flex-1 truncate text-left tabular-nums",
-                        // Hex is conventionally upper-case; a token name is not.
-                        !parseTokenReference(color.value) && "uppercase",
-                      )}
-                    >
-                      {resolveTokenNameForColor(color.value, EMPTY_SWATCHES) ??
-                        selectionDisplayHex(color.value)}
+                    <span className="min-w-0 flex-1 truncate text-left uppercase tabular-nums">
+                      {selectionDisplayHex(color.value)}
                     </span>
                     <span className="shrink-0 tabular-nums text-muted-foreground">
                       {opacity}%
@@ -1941,24 +1920,6 @@ export const EditPanel = memo(function EditPanel({
     // eslint-disable-next-line react-hooks/exhaustive-deps -- keyed on filesContentKey (cheap length+id fingerprint) instead of `files` itself so an unstable-but-equal array identity from the parent doesn't force a full re-scan every render.
     [filesContentKey],
   );
-  // The linked Brand Kit's named colour tokens, for the fill picker. Shares
-  // react-query's cache with the Tokens panel, so opening both costs one fetch.
-  const { data: indexedTokens } = useActionQuery<{
-    tokens?: {
-      name: string;
-      cssVar: string;
-      value: string;
-      type: string;
-      group?: string;
-      source?: string;
-    }[];
-  }>("index-design-tokens", designId ? { designId } : undefined, {
-    enabled: Boolean(designId),
-  });
-  const designSystemColors = useMemo(
-    () => toDesignSystemColorSwatches(indexedTokens?.tokens),
-    [indexedTokens],
-  );
   const selectionAlreadyComponent =
     selectedCount === 1 &&
     (selectedElementAlreadyComponent ||
@@ -2365,7 +2326,6 @@ export const EditPanel = memo(function EditPanel({
               {!inspectorElement && !selectedScreenGeometry && (
                 <PageProperties
                   styles={pageStyles}
-                  designSystemColors={designSystemColors}
                   onStyleChange={onStyleChange}
                   onStylesChange={onStylesChange}
                   canvasBackground={canvasBackground}
@@ -2422,13 +2382,11 @@ export const EditPanel = memo(function EditPanel({
                     onStyleChange={onStyleChange}
                     onStylesChange={onStylesChange}
                     documentColorPalette={documentColorPalette}
-                    designSystemColors={designSystemColors}
                     glslShaderContext={glslShaderContext}
                     motionKeyframeContext={motionKeyframeFieldContext}
                     breakpointOverrideContext={breakpointOverrideFieldContext}
                   />
                   <StrokeProperties
-                    designSystemColors={designSystemColors}
                     element={stateResolvedInspectorElement ?? inspectorElement}
                     onStyleChange={onStyleChange}
                     onStylesChange={onStylesChange}
@@ -2439,7 +2397,6 @@ export const EditPanel = memo(function EditPanel({
                     element={stateResolvedInspectorElement ?? inspectorElement}
                     onStyleChange={onStyleChange}
                     onStylesChange={onStylesChange}
-                    designSystemColors={designSystemColors}
                     glslShaderContext={glslShaderContext}
                     motionKeyframeContext={motionKeyframeFieldContext}
                   />

package/corpus/templates/design/app/components/design/bridge/editor-chrome.bridge.ts

@@ -29,8 +29,6 @@
  */
 import { createCanvasGestureController } from "@agent-native/toolkit/canvas-interactions";
 
-import { collectAuthoredColorStyles } from "../../../../shared/authored-color-styles";
-
 declare var __READ_ONLY__: boolean;
 declare var __TEXT_EDITING_ENABLED__: boolean;
 declare var __EDITOR_CHROME_SCALE_X__: string;
@@ -1854,9 +1852,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
   // and `right` — only the inline style tells you which side was actually
   // set). Empty-string values are omitted so callers can treat key-absence as
   // "not authored".
-  // color/backgroundColor/borderColor/outlineColor are reported because
-  // getComputedStyle resolves `var()`: without the authored declaration the
-  // inspector cannot tell a design system token from the colour it resolves to.
   var INLINE_STYLE_PROPERTIES = [
     "position",
     "left",
@@ -1867,12 +1862,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
     "height",
     "transform",
     "whiteSpace",
-    "color",
-    "backgroundColor",
-    "borderColor",
-    "outlineColor",
-    "boxShadow",
-    "textShadow",
   ];
 
   function collectInlineStyles(el: Element): Record<string, string> {
@@ -2132,7 +2121,6 @@ declare var __SELECTED_LAYER_DRAG_PRIORITY__: boolean;
         whiteSpace: cs.whiteSpace,
       },
       inlineStyles: collectInlineStyles(el),
-      authoredColorStyles: collectAuthoredColorStyles(el),
       primitiveKind: el.getAttribute("data-an-primitive") || undefined,
       portableStyleSnapshot: collectPortableStyleSnapshot(el),
       boundingRect: {

package/corpus/templates/design/app/components/design/edit-panel/document-colors.ts

@@ -1,7 +1,6 @@
 import { parseCssColor, rgbaToHex } from "@shared/color-utils";
 
 import type { ElementInfo } from "../types";
-import { authoredColorValue } from "./interaction-state-helpers";
 
 export interface DocumentColorSourceFile {
   id: string;
@@ -64,16 +63,13 @@ export interface SelectionColorValue {
 export function selectionColorValues(
   element: ElementInfo,
 ): SelectionColorValue[] {
-  // Authored, not computed: getComputedStyle has already flattened `var()`.
+  const styles = element.computedStyles;
   const rawValues: SelectionColorValue[] = [
-    "color",
-    "backgroundColor",
-    "borderColor",
-    "outlineColor",
-  ].map((property) => ({
-    property,
-    value: authoredColorValue(element, property) as string,
-  }));
+    { property: "color", value: styles.color },
+    { property: "backgroundColor", value: styles.backgroundColor },
+    { property: "borderColor", value: styles.borderColor },
+    { property: "outlineColor", value: styles.outlineColor },
+  ];
   const seen = new Set<string>();
   return rawValues
     .map((color) => ({ ...color, value: color.value?.trim() }))