@agent-native/core 0.138.0 → 0.140.0

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

@@ -1641,6 +1641,8 @@ const enUS = {
       description:
         "A snapshot of the colors, type, spacing, and assets currently stored.",
       colors: "Colors",
+      namedTokens: "Design system tokens",
+      colorRoles: "Color roles",
       noColors: "No color tokens saved.",
       typography: "Typography",
       details: "Details",
@@ -2107,6 +2109,8 @@ const designLocaleOverrides = {
         title: "代币预览",
         description: "当前存储的颜色、类型、间距和资源的快照。",
         colors: "颜色",
+        namedTokens: "设计系统令牌",
+        colorRoles: "颜色角色",
         noColors: "没有保存颜色标记。",
         typography: "版式",
         details: "细节",
@@ -2533,6 +2537,8 @@ const designLocaleOverrides = {
         description:
           "Una instantánea de los colores, tipos, espacios y recursos almacenados actualmente.",
         colors: "Bandera",
+        namedTokens: "Tokens del sistema de diseño",
+        colorRoles: "Roles de color",
         noColors: "No se guardaron fichas de color.",
         typography: "Tipografía",
         details: "Detalles",
@@ -2964,6 +2970,8 @@ const designLocaleOverrides = {
         description:
           "Un instantané des couleurs, du type, de l'espacement et des ressources actuellement stockés.",
         colors: "Couleurs",
+        namedTokens: "Jetons du système de design",
+        colorRoles: "Rôles de couleur",
         noColors: "Aucun jeton de couleur enregistré.",
         typography: "Typographie",
         details: "Détails",
@@ -3396,6 +3404,8 @@ const designLocaleOverrides = {
         description:
           "Eine Momentaufnahme der Farben, des Typs, der Abstände und der aktuell gespeicherten Elemente.",
         colors: "Farben",
+        namedTokens: "Design-System-Tokens",
+        colorRoles: "Farbrollen",
         noColors: "Keine Farbtokens gespeichert.",
         typography: "Typografie",
         details: "Details",
@@ -3823,6 +3833,8 @@ const designLocaleOverrides = {
         description:
           "現在保存されている色、タイプ、間隔、アセットのスナップショット。",
         colors: "色",
+        namedTokens: "デザインシステムのトークン",
+        colorRoles: "カラーロール",
         noColors: "カラートークンは保存されません。",
         typography: "タイポグラフィ",
         details: "詳細",
@@ -4243,6 +4255,8 @@ const designLocaleOverrides = {
         title: "토큰 미리보기",
         description: "현재 저장된 색상, 유형, 간격 및 자산의 스냅샷입니다.",
         colors: "그림 물감",
+        namedTokens: "디자인 시스템 토큰",
+        colorRoles: "색상 역할",
         noColors: "저장된 색상 토큰이 없습니다.",
         typography: "타이포그래피",
         details: "세부",
@@ -4670,6 +4684,8 @@ const designLocaleOverrides = {
         description:
           "Um instantâneo das cores, tipo, espaçamento e ativos armazenados atualmente.",
         colors: "Cores",
+        namedTokens: "Tokens do sistema de design",
+        colorRoles: "Funções de cor",
         noColors: "Nenhum token de cor salvo.",
         typography: "Tipografia",
         details: "Detalhes",
@@ -5088,6 +5104,8 @@ const designLocaleOverrides = {
         description:
           "वर्तमान में संग्रहीत रंग, प्रकार, रिक्ति और संपत्तियों का एक स्नैपशॉट।",
         colors: "रंग",
+        namedTokens: "डिज़ाइन सिस्टम टोकन",
+        colorRoles: "रंग भूमिकाएँ",
         noColors: "कोई रंग टोकन सहेजा नहीं गया.",
         typography: "टाइपोग्राफी",
         details: "विवरण",
@@ -5505,6 +5523,8 @@ const designLocaleOverrides = {
         title: "معاينة الرمز المميز",
         description: "لقطة للألوان والنوع والتباعد والأصول المخزنة حاليًا.",
         colors: "الألوان",
+        namedTokens: "رموز نظام التصميم",
+        colorRoles: "أدوار الألوان",
         noColors: "لم يتم حفظ أي رموز ملونة.",
         typography: "الطباعة",
         details: "تفاصيل",

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx

@@ -433,7 +433,7 @@ export default function DesignSystemSetup() {
 
     const parts: string[] = [];
     parts.push(
-      "Set up a design system from the following sources. Use Builder Design System Intelligence (DSI) as the source of truth for reusable Figma/code/design.md indexing. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system.",
+      "Set up a design system from the following sources. Use Builder Design System Intelligence (DSI) as the source of truth for reusable Figma/code/design.md indexing. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system. Keep each token under the name its source gives it: put the full named vocabulary in `data.tokens` (name, cssVar, value, type, group, source) as well as filling the seven `colors` roles, so tokens like `interactive-01` are not collapsed into `secondary`.",
     );
 
     if (companyInfo.trim()) {

package/corpus/templates/design/app/pages/DesignSystems.tsx

@@ -1,3 +1,9 @@
+import {
+  groupBrandKitTokens,
+  isColorTokenValue,
+  resolveBrandKitTokens,
+  type BrandKitTokenGroup,
+} from "@agent-native/core/brand-kit/tokens";
 import {
   useActionQuery,
   useActionMutation,
@@ -109,6 +115,8 @@ interface DesignSystemData {
   borders?: Record<string, unknown>;
   logos?: Array<{ url?: string; name?: string; variant?: string }>;
   defaults?: Record<string, unknown>;
+  tokens?: unknown;
+  customCSS?: unknown;
   notes?: unknown;
 }
 
@@ -939,6 +947,7 @@ function TokenPreview({
   const colors = getColorTokens(data, t);
   const typeTokens = getTypographyTokens(data, t);
   const detailTokens = getDetailTokens(data, assets, t);
+  const namedGroups = groupBrandKitTokens(resolveBrandKitTokens(data));
 
   return (
     <section className="space-y-6 border-t border-border pt-6">
@@ -951,9 +960,15 @@ function TokenPreview({
         </p>
       </div>
 
+      {namedGroups.length > 0 ? (
+        <NamedTokenGroups groups={namedGroups} />
+      ) : null}
+
       <div className="space-y-3">
         <h4 className="text-xs font-medium uppercase text-muted-foreground">
-          {t("designSystems.tokenPreview.colors")}
+          {namedGroups.length > 0
+            ? t("designSystems.tokenPreview.colorRoles")
+            : t("designSystems.tokenPreview.colors")}
         </h4>
         {colors.length > 0 ? (
           <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
@@ -1002,6 +1017,68 @@ function TokenPreview({
   );
 }
 
+function NamedTokenGroups({ groups }: { groups: BrandKitTokenGroup[] }) {
+  const t = useT();
+  const total = groups.reduce((sum, group) => sum + group.tokens.length, 0);
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-baseline justify-between gap-3">
+        <h4 className="text-xs font-medium uppercase text-muted-foreground">
+          {t("designSystems.tokenPreview.namedTokens")}
+        </h4>
+        <span className="!text-[11px] text-muted-foreground">
+          {t("designSystems.tokenPreview.savedCount", { count: total })}
+        </span>
+      </div>
+
+      {groups.map((group) => (
+        <div key={`${group.type}:${group.label}`} className="space-y-2">
+          <div className="flex items-center gap-2">
+            <span className="text-xs font-medium text-foreground">
+              {group.label}
+            </span>
+            <span className="!text-[11px] text-muted-foreground">
+              {group.tokens.length}
+            </span>
+          </div>
+          <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
+            {group.tokens.map((token) => (
+              <div
+                key={token.cssVar}
+                className="flex min-w-0 items-center gap-3 rounded-lg border border-border bg-muted/30 p-2"
+              >
+                {isColorTokenValue(token.value) ? (
+                  <div
+                    className="h-9 w-9 shrink-0 rounded-md border border-border"
+                    style={{ backgroundColor: token.value }}
+                  />
+                ) : null}
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-xs font-medium text-foreground">
+                    {token.name}
+                  </div>
+                  <div className="truncate font-mono !text-[11px] text-muted-foreground">
+                    {token.cssVar}
+                  </div>
+                  <div className="truncate font-mono !text-[11px] text-muted-foreground">
+                    {token.value}
+                  </div>
+                </div>
+                {token.source ? (
+                  <span className="shrink-0 rounded border border-border px-1.5 py-0.5 !text-[10px] text-muted-foreground">
+                    {token.source}
+                  </span>
+                ) : null}
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
 function PreviewList({
   title,
   items,

package/corpus/templates/design/app/pages/design-editor/html-layer-positioning.ts

@@ -1,3 +1,4 @@
+import { collectAuthoredColorStyles } from "@shared/authored-color-styles";
 import { normalizePoisonedBoardNestedCoords } from "@shared/board-file";
 import type { CodeLayerNode } from "@shared/code-layer";
 
@@ -211,8 +212,12 @@ export function getBodyInlineStyles(content: string): Record<string, string> {
     const doc = new DOMParser().parseFromString(content, "text/html");
     const body = doc.body;
     if (!body) return {};
+    // A generated screen sets its page background in a `body { … }` rule, and a
+    // `background:` shorthand holding var() leaves the longhand empty, so the
+    // inline style alone reports an unstyled page.
+    const authored = collectAuthoredColorStyles(body);
     return {
-      backgroundColor: body.style.backgroundColor,
+      backgroundColor: body.style.backgroundColor || authored.backgroundColor,
       backgroundImage: body.style.backgroundImage,
       backgroundPosition: body.style.backgroundPosition,
       backgroundRepeat: body.style.backgroundRepeat,

package/corpus/templates/design/changelog/2026-08-04-design-system-tokens-show-by-name-in-the-editor.md

@@ -0,0 +1,6 @@
+---
+type: added
+date: 2026-08-04
+---
+
+Design system tokens now show by name across the Brand Kit page and the fill, stroke, effects, page background and selection colour rows, so a colour reads as `cds-link-primary` instead of `0F62FE`.

package/corpus/templates/design/e2e/helpers.ts

@@ -66,6 +66,23 @@ async function postAction(
   return res.json();
 }
 
+/** Create a Brand Kit from a production template and return its title. */
+export async function createDesignSystemFromTemplate(
+  page: Page,
+  templateId: string,
+): Promise<string> {
+  const created = await postAction(page, "create-design-system", {
+    templateId,
+  });
+  const title: string | undefined = created?.title ?? created?.data?.title;
+  if (!title) {
+    throw new Error(
+      `create-design-system did not return a title: ${JSON.stringify(created)}`,
+    );
+  }
+  return title;
+}
+
 export async function createFixtureDesign(
   page: Page,
   title = SEED_TITLE,

package/corpus/templates/design/server/lib/design-system-tokens.ts

@@ -0,0 +1,35 @@
+import {
+  describeBrandKitTokenRejections,
+  normalizeBrandKitTokens,
+} from "@agent-native/core/brand-kit/tokens";
+
+/**
+ * Reject a write whose named tokens cannot be stored verbatim. Keeping the
+ * storable subset would read downstream as a genuinely smaller design system.
+ */
+export function assertStorableDesignSystemTokens(dataJson: string): void {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(dataJson);
+  } catch {
+    throw new Error("data must be a valid JSON object string");
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    throw new Error("data must be a valid JSON object string");
+  }
+
+  const tokens = (parsed as Record<string, unknown>).tokens;
+  if (tokens === undefined) return;
+
+  const { rejected } = normalizeBrandKitTokens(tokens);
+  if (rejected.length > 0) {
+    throw new Error(
+      `data.tokens contains ${rejected.length} entr${
+        rejected.length === 1 ? "y" : "ies"
+      } that cannot be stored: ${describeBrandKitTokenRejections(rejected)}. ` +
+        "Each token needs a name, a CSS custom property (-- followed by " +
+        "letters, digits, hyphens or underscores), and a value with no " +
+        '";", "{", "}", "<", ">", or CSS comment.',
+    );
+  }
+}