@goldencomm/create-baseline 0.0.1 → 0.1.0

package/package.json

@@ -1,44 +1,27 @@
 {
   "name": "@goldencomm/create-baseline",
-  "version": "0.0.1",
+  "version": "0.1.0",
+  "description": "Scaffolds a GC Baseline project: Next.js with every component and block, or the WordPress or Shopify theme, wired to the client's tokens (npm create @goldencomm/baseline).",
+  "license": "UNLICENSED",
   "type": "module",
-  "description": "Scaffold a standalone GoldenComm Baseline project — Next.js app, Shopify OS 2.0 theme, or WordPress site — wired to the @goldencomm/ds-* design-system packages. Run as `npm create @goldencomm/baseline`.",
+  "engines": {
+    "node": ">=24 <25"
+  },
   "bin": {
     "create-baseline": "./index.mjs"
   },
   "files": [
     "index.mjs",
-    "templates"
-  ],
-  "keywords": [
-    "create",
-    "scaffold",
-    "starter",
-    "design-system",
-    "baseline",
-    "nextjs",
-    "shopify",
-    "wordpress",
-    "goldencomm"
+    "templates",
+    "README.md"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "engines": {
-    "node": ">=20.0.0"
-  },
-  "author": "GoldenComm",
-  "license": "UNLICENSED",
-  "repository": {
-    "type": "git",
-    "url": "git@bitbucket.org:goldencomm/design-system.git",
-    "directory": "tools/create-baseline"
-  },
   "scripts": {
-    "build": "echo \"(no build — single zero-dep mjs entry)\"",
-    "clean": "node -e \"require('fs').rmSync('templates',{recursive:true,force:true})\"",
-    "lint": "echo \"(no lint yet)\"",
-    "typecheck": "echo \"(no TS in this package)\"",
-    "test": "echo \"(no tests yet)\""
+    "prepack": "node ../scripts/create-baseline-templates.mjs",
+    "templates": "node ../scripts/create-baseline-templates.mjs",
+    "build": "node -e \"console.log('create-baseline: nothing to build (templates are filled at prepack)')\"",
+    "parse": "node -e \"console.log('create-baseline: nothing to parse')\""
   }
-}
+}

package/templates/ci/bitbucket-pipelines.yml

@@ -0,0 +1,29 @@
+# GC Baseline client project CI (written by @goldencomm/create-baseline; ADR-0021 §3, ADR-0035).
+# Code Connect is published from CI on master only, against this client's Figma library (a copy of GC Baseline Core):
+#   FIGMA_ACCESS_TOKEN  secured repository variable (scopes file_code_connect:write and file_content:read on that file)
+#   FIGMA_FILE_KEY      repository variable: the key (or URL) of the client's Figma library
+image: node:24
+
+definitions:
+  caches:
+    npm: ~/.npm
+
+pipelines:
+  pull-requests:
+    '**':
+      - step:
+          name: Check Code Connect
+          caches: [npm]
+          script:
+            - cd {{WORKDIR}}
+            - npm ci
+            - npx baseline-tokens code-connect --platform {{PLATFORM}} --out . --figma-file "$FIGMA_FILE_KEY" --parse
+  branches:
+    master:
+      - step:
+          name: Publish Code Connect
+          caches: [npm]
+          script:
+            - cd {{WORKDIR}}
+            - npm ci
+            - npx baseline-tokens code-connect --platform {{PLATFORM}} --out . --figma-file "$FIGMA_FILE_KEY" --publish

package/templates/code-connect/accordion-item.figma.ts

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=391-58
+// source=registry/src/ui/accordion/accordion.tsx
+// component=AccordionItem
+// Code Connect template (v2, parserless). Spec: components/accordion/spec.md.
+// Figma's Accordion is one item: Title is the trigger, Open is the item's defaultOpen, and the Children slot (drawn only
+// when open) is the content: its text as a paragraph, its instances as their own templates. Look is the project's look
+// (ADR-0031), so it maps to nothing here.
+// State (default | hover) is a CSS state and maps to nothing.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const title = instance.getString("Title");
+const open = instance.getEnum("Open", { false: false, true: true }) === true;
+
+function slot(name: string, node: any = instance): any {
+  for (const child of node?.children ?? []) {
+    if (child.name === name && child.type !== "INSTANCE" && child.type !== "TEXT") return child;
+    const hit = child.type === "INSTANCE" ? undefined : slot(name, child);
+    if (hit) return hit;
+  }
+  return undefined;
+}
+const content = (slot("Children")?.children ?? [])
+  .map((c: any) => {
+    if (c.type === "TEXT") return figma.code`<p>${c.textContent}</p>`;
+    if (c.type !== "INSTANCE") return undefined;
+    try {
+      return c.executeTemplate().example;
+    } catch {
+      return undefined;
+    }
+  })
+  .filter(Boolean);
+
+export default {
+  example: figma.code`<AccordionItem${open ? figma.code` defaultOpen` : ""}>
+  <AccordionTrigger>${title}</AccordionTrigger>
+  <AccordionContent>
+    ${content.length ? content : figma.code`<p>…</p>`}
+  </AccordionContent>
+</AccordionItem>`,
+  imports: ['import { AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"'],
+  id: "accordion-item",
+  metadata: { nestable: true },
+};

package/templates/code-connect/accordion.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1472-1750
+// source=registry/src/ui/accordion/accordion.tsx
+// component=Accordion
+// Code Connect template (v2, parserless). Spec: components/accordion/spec.md.
+// Figma's Accordion Group is the Accordion; its Accordions slot holds Accordion instances, which render their own
+// (AccordionItem) templates. Look is the project's look, installed once (ADR-0031: accordion.tsx or
+// accordion.<look>.tsx as components/ui/accordion.tsx), so it maps to nothing here.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// the Accordions slot (found by layer name at any depth), rendered as its instances' own templates
+function slot(name: string, node: any = instance): any {
+  for (const child of node?.children ?? []) {
+    if (child.name === name && child.type !== "INSTANCE" && child.type !== "TEXT") return child;
+    const hit = child.type === "INSTANCE" ? undefined : slot(name, child);
+    if (hit) return hit;
+  }
+  return undefined;
+}
+const items = (slot("Accordions")?.children ?? [])
+  .filter((c: any) => c.type === "INSTANCE")
+  .map((c: any) => {
+    try {
+      return c.executeTemplate().example;
+    } catch {
+      return undefined;
+    }
+  })
+  .filter(Boolean);
+
+export default {
+  example: figma.code`
+    <Accordion>
+      ${items.length ? items : figma.code`<AccordionItem><AccordionTrigger>…</AccordionTrigger><AccordionContent>…</AccordionContent></AccordionItem>`}
+    </Accordion>
+  `,
+  imports: ['import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion"'],
+  id: "accordion",
+  metadata: { nestable: true },
+};

package/templates/code-connect/alert.figma.ts

@@ -0,0 +1,378 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4356-14021
+// source=registry/src/ui/alert/alert.tsx
+// component=Alert
+// Code Connect template (v2, parserless). Spec: components/alert/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// BASELINE_ICONS_START (generated by tokens/icons.mjs from tokens/icons/vocabulary.json; do not edit)
+const BASELINE_SYSTEM_ICONS: Record<string, string> = {
+  "brands/amazon": "brand-amazon",
+  "brands/americanexpress": "brand-americanexpress",
+  "brands/apple": "brand-apple",
+  "brands/applepay": "brand-applepay",
+  "brands/bluesky": "brand-bluesky",
+  "brands/discord": "brand-discord",
+  "brands/facebook": "brand-facebook",
+  "brands/github": "brand-github",
+  "brands/google": "brand-google",
+  "brands/googlepay": "brand-googlepay",
+  "brands/instagram": "brand-instagram",
+  "brands/linkedin": "brand-linkedin",
+  "brands/mastercard": "brand-mastercard",
+  "brands/paypal": "brand-paypal",
+  "brands/pinterest": "brand-pinterest",
+  "brands/reddit": "brand-reddit",
+  "brands/shopify": "brand-shopify",
+  "brands/snapchat": "brand-snapchat",
+  "brands/spotify": "brand-spotify",
+  "brands/telegram": "brand-telegram",
+  "brands/threads": "brand-threads",
+  "brands/tiktok": "brand-tiktok",
+  "brands/tripadvisor": "brand-tripadvisor",
+  "brands/vimeo": "brand-vimeo",
+  "brands/visa": "brand-visa",
+  "brands/whatsapp": "brand-whatsapp",
+  "brands/wordpress": "brand-wordpress",
+  "brands/x": "brand-x",
+  "brands/yelp": "brand-yelp",
+  "brands/youtube": "brand-youtube",
+  "lucide/arrow-down": "arrow-down",
+  "lucide/arrow-left": "arrow-left",
+  "lucide/arrow-right": "arrow-right",
+  "lucide/arrow-up": "arrow-up",
+  "lucide/arrow-up-down": "arrow-up-down",
+  "lucide/calendar": "calendar",
+  "lucide/check": "check",
+  "lucide/chevron-down": "chevron-down",
+  "lucide/chevron-left": "chevron-left",
+  "lucide/chevron-right": "chevron-right",
+  "lucide/chevron-up": "chevron-up",
+  "lucide/chevrons-left": "chevrons-left",
+  "lucide/chevrons-right": "chevrons-right",
+  "lucide/chevrons-up-down": "chevrons-up-down",
+  "lucide/circle": "circle",
+  "lucide/circle-alert": "error",
+  "lucide/circle-check": "success",
+  "lucide/circle-x": "close-circle",
+  "lucide/clock": "clock",
+  "lucide/copy": "copy",
+  "lucide/download": "download",
+  "lucide/ellipsis": "more-horizontal",
+  "lucide/ellipsis-vertical": "more-vertical",
+  "lucide/external-link": "external-link",
+  "lucide/eye": "eye",
+  "lucide/eye-off": "eye-off",
+  "lucide/file": "file",
+  "lucide/funnel": "filter",
+  "lucide/grip-vertical": "grip-vertical",
+  "lucide/house": "home",
+  "lucide/image": "image",
+  "lucide/info": "info",
+  "lucide/link": "link",
+  "lucide/loader-circle": "loader",
+  "lucide/lock": "lock",
+  "lucide/mail": "mail",
+  "lucide/menu": "menu",
+  "lucide/minus": "minus",
+  "lucide/panel-left": "sidebar",
+  "lucide/pause": "pause",
+  "lucide/pencil": "edit",
+  "lucide/phone": "phone",
+  "lucide/play": "play",
+  "lucide/plus": "plus",
+  "lucide/refresh-cw": "refresh",
+  "lucide/search": "search",
+  "lucide/settings": "settings",
+  "lucide/share-2": "share",
+  "lucide/shopping-cart": "cart",
+  "lucide/star": "star",
+  "lucide/trash-2": "trash",
+  "lucide/triangle-alert": "warning",
+  "lucide/upload": "upload",
+  "lucide/user": "user",
+  "lucide/x": "close",
+  "material-symbols/add": "plus",
+  "material-symbols/arrow-back": "arrow-left",
+  "material-symbols/arrow-downward": "arrow-down",
+  "material-symbols/arrow-forward": "arrow-right",
+  "material-symbols/arrow-upward": "arrow-up",
+  "material-symbols/calendar-today": "calendar",
+  "material-symbols/call": "phone",
+  "material-symbols/cancel": "close-circle",
+  "material-symbols/check": "check",
+  "material-symbols/check-circle": "success",
+  "material-symbols/circle": "circle",
+  "material-symbols/close": "close",
+  "material-symbols/content-copy": "copy",
+  "material-symbols/delete": "trash",
+  "material-symbols/description": "file",
+  "material-symbols/download": "download",
+  "material-symbols/drag-indicator": "grip-vertical",
+  "material-symbols/edit": "edit",
+  "material-symbols/error": "error",
+  "material-symbols/filter-list": "filter",
+  "material-symbols/home": "home",
+  "material-symbols/image": "image",
+  "material-symbols/info": "info",
+  "material-symbols/keyboard-arrow-down": "chevron-down",
+  "material-symbols/keyboard-arrow-left": "chevron-left",
+  "material-symbols/keyboard-arrow-right": "chevron-right",
+  "material-symbols/keyboard-arrow-up": "chevron-up",
+  "material-symbols/keyboard-double-arrow-left": "chevrons-left",
+  "material-symbols/keyboard-double-arrow-right": "chevrons-right",
+  "material-symbols/link": "link",
+  "material-symbols/lock": "lock",
+  "material-symbols/mail": "mail",
+  "material-symbols/menu": "menu",
+  "material-symbols/more-horiz": "more-horizontal",
+  "material-symbols/more-vert": "more-vertical",
+  "material-symbols/open-in-new": "external-link",
+  "material-symbols/pause": "pause",
+  "material-symbols/person": "user",
+  "material-symbols/play-arrow": "play",
+  "material-symbols/progress-activity": "loader",
+  "material-symbols/refresh": "refresh",
+  "material-symbols/remove": "minus",
+  "material-symbols/schedule": "clock",
+  "material-symbols/search": "search",
+  "material-symbols/settings": "settings",
+  "material-symbols/share": "share",
+  "material-symbols/shopping-cart": "cart",
+  "material-symbols/star": "star",
+  "material-symbols/swap-vert": "arrow-up-down",
+  "material-symbols/unfold-more": "chevrons-up-down",
+  "material-symbols/upload": "upload",
+  "material-symbols/view-sidebar": "sidebar",
+  "material-symbols/visibility": "eye",
+  "material-symbols/visibility-off": "eye-off",
+  "material-symbols/warning": "warning",
+  "phosphor/arrow-down": "arrow-down",
+  "phosphor/arrow-left": "arrow-left",
+  "phosphor/arrow-right": "arrow-right",
+  "phosphor/arrow-square-out": "external-link",
+  "phosphor/arrow-up": "arrow-up",
+  "phosphor/arrows-clockwise": "refresh",
+  "phosphor/arrows-down-up": "arrow-up-down",
+  "phosphor/calendar": "calendar",
+  "phosphor/caret-double-left": "chevrons-left",
+  "phosphor/caret-double-right": "chevrons-right",
+  "phosphor/caret-down": "chevron-down",
+  "phosphor/caret-left": "chevron-left",
+  "phosphor/caret-right": "chevron-right",
+  "phosphor/caret-up": "chevron-up",
+  "phosphor/caret-up-down": "chevrons-up-down",
+  "phosphor/check": "check",
+  "phosphor/check-circle": "success",
+  "phosphor/circle": "circle",
+  "phosphor/circle-notch": "loader",
+  "phosphor/clock": "clock",
+  "phosphor/copy": "copy",
+  "phosphor/dots-six-vertical": "grip-vertical",
+  "phosphor/dots-three": "more-horizontal",
+  "phosphor/dots-three-vertical": "more-vertical",
+  "phosphor/download-simple": "download",
+  "phosphor/envelope": "mail",
+  "phosphor/eye": "eye",
+  "phosphor/eye-slash": "eye-off",
+  "phosphor/file": "file",
+  "phosphor/funnel": "filter",
+  "phosphor/gear": "settings",
+  "phosphor/house": "home",
+  "phosphor/image": "image",
+  "phosphor/info": "info",
+  "phosphor/link": "link",
+  "phosphor/list": "menu",
+  "phosphor/lock": "lock",
+  "phosphor/magnifying-glass": "search",
+  "phosphor/minus": "minus",
+  "phosphor/pause": "pause",
+  "phosphor/pencil-simple": "edit",
+  "phosphor/phone": "phone",
+  "phosphor/play": "play",
+  "phosphor/plus": "plus",
+  "phosphor/share-network": "share",
+  "phosphor/shopping-cart": "cart",
+  "phosphor/sidebar": "sidebar",
+  "phosphor/star": "star",
+  "phosphor/trash": "trash",
+  "phosphor/upload-simple": "upload",
+  "phosphor/user": "user",
+  "phosphor/warning": "warning",
+  "phosphor/warning-circle": "error",
+  "phosphor/x": "close",
+  "phosphor/x-circle": "close-circle",
+  "remix/add": "plus",
+  "remix/alert": "warning",
+  "remix/arrow-down": "arrow-down",
+  "remix/arrow-down-s": "chevron-down",
+  "remix/arrow-left": "arrow-left",
+  "remix/arrow-left-double": "chevrons-left",
+  "remix/arrow-left-s": "chevron-left",
+  "remix/arrow-right": "arrow-right",
+  "remix/arrow-right-double": "chevrons-right",
+  "remix/arrow-right-s": "chevron-right",
+  "remix/arrow-up": "arrow-up",
+  "remix/arrow-up-down": "arrow-up-down",
+  "remix/arrow-up-s": "chevron-up",
+  "remix/calendar": "calendar",
+  "remix/check": "check",
+  "remix/checkbox-blank-circle": "circle",
+  "remix/checkbox-circle": "success",
+  "remix/close": "close",
+  "remix/close-circle": "close-circle",
+  "remix/delete-bin": "trash",
+  "remix/download-2": "download",
+  "remix/draggable": "grip-vertical",
+  "remix/error-warning": "error",
+  "remix/expand-up-down": "chevrons-up-down",
+  "remix/external-link": "external-link",
+  "remix/eye": "eye",
+  "remix/eye-off": "eye-off",
+  "remix/file": "file",
+  "remix/file-copy": "copy",
+  "remix/filter": "filter",
+  "remix/home": "home",
+  "remix/image": "image",
+  "remix/information": "info",
+  "remix/layout-left": "sidebar",
+  "remix/link": "link",
+  "remix/loader-4": "loader",
+  "remix/lock": "lock",
+  "remix/mail": "mail",
+  "remix/menu": "menu",
+  "remix/more": "more-horizontal",
+  "remix/more-2": "more-vertical",
+  "remix/pause": "pause",
+  "remix/pencil": "edit",
+  "remix/phone": "phone",
+  "remix/play": "play",
+  "remix/refresh": "refresh",
+  "remix/search": "search",
+  "remix/settings-3": "settings",
+  "remix/share": "share",
+  "remix/shopping-cart": "cart",
+  "remix/star": "star",
+  "remix/subtract": "minus",
+  "remix/time": "clock",
+  "remix/upload-2": "upload",
+  "remix/user": "user",
+  "tabler/alert-circle": "error",
+  "tabler/alert-triangle": "warning",
+  "tabler/arrow-down": "arrow-down",
+  "tabler/arrow-left": "arrow-left",
+  "tabler/arrow-right": "arrow-right",
+  "tabler/arrow-up": "arrow-up",
+  "tabler/arrows-sort": "arrow-up-down",
+  "tabler/calendar": "calendar",
+  "tabler/check": "check",
+  "tabler/chevron-down": "chevron-down",
+  "tabler/chevron-left": "chevron-left",
+  "tabler/chevron-right": "chevron-right",
+  "tabler/chevron-up": "chevron-up",
+  "tabler/chevrons-left": "chevrons-left",
+  "tabler/chevrons-right": "chevrons-right",
+  "tabler/circle": "circle",
+  "tabler/circle-check": "success",
+  "tabler/circle-x": "close-circle",
+  "tabler/clock": "clock",
+  "tabler/copy": "copy",
+  "tabler/dots": "more-horizontal",
+  "tabler/dots-vertical": "more-vertical",
+  "tabler/download": "download",
+  "tabler/external-link": "external-link",
+  "tabler/eye": "eye",
+  "tabler/eye-off": "eye-off",
+  "tabler/file": "file",
+  "tabler/filter": "filter",
+  "tabler/grip-vertical": "grip-vertical",
+  "tabler/home": "home",
+  "tabler/info-circle": "info",
+  "tabler/layout-sidebar": "sidebar",
+  "tabler/link": "link",
+  "tabler/loader-2": "loader",
+  "tabler/lock": "lock",
+  "tabler/mail": "mail",
+  "tabler/menu-2": "menu",
+  "tabler/minus": "minus",
+  "tabler/pencil": "edit",
+  "tabler/phone": "phone",
+  "tabler/photo": "image",
+  "tabler/player-pause": "pause",
+  "tabler/player-play": "play",
+  "tabler/plus": "plus",
+  "tabler/refresh": "refresh",
+  "tabler/search": "search",
+  "tabler/selector": "chevrons-up-down",
+  "tabler/settings": "settings",
+  "tabler/share": "share",
+  "tabler/shopping-cart": "cart",
+  "tabler/star": "star",
+  "tabler/trash": "trash",
+  "tabler/upload": "upload",
+  "tabler/user": "user",
+  "tabler/x": "close"
+};
+const BASELINE_ICON_PREFIXES: Record<string, string> = {
+  "lucide": "lucide",
+  "material-symbols": "material-symbols",
+  "phosphor": "ph",
+  "remix": "ri",
+  "tabler": "tabler"
+};
+const BASELINE_ICON_SUFFIXES: Record<string, string> = {
+  "lucide": "",
+  "material-symbols": "-rounded",
+  "phosphor": "",
+  "remix": "-fill",
+  "tabler": "-filled"
+};
+// BASELINE_ICONS_END
+
+// "<Set>/<icon>" glyph -> <Icon name="…"/> for a system icon, <Icon className="icon-[set--name]"/> for a content icon
+const kebab = (s: string) => s.trim().replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+function iconCode() {
+  const placeholder = instance.findInstance("Icon Placeholder", { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return figma.code`<Icon name="info" />`;
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return figma.code`<Icon name="info" />`;
+  const slash = glyph.name.indexOf("/");
+  const set = slash < 0 ? "" : kebab(glyph.name.slice(0, slash));
+  const name = kebab(slash < 0 ? glyph.name : glyph.name.slice(slash + 1));
+  const system = BASELINE_SYSTEM_ICONS[set + "/" + name];
+  if (system) return figma.code`<Icon name="${system}" />`;
+  const prefix = BASELINE_ICON_PREFIXES[set] ?? set;
+  return figma.code`<Icon className="icon-[${prefix}--${name}${BASELINE_ICON_SUFFIXES[set] ?? ""}]" />`;
+}
+
+const variant = instance.getEnum("Variant", { default: "default", destructive: "destructive" });
+const title = instance.getString("Title");
+const description = instance.getString("Description");
+// Show booleans map to CHILDREN, never to props (ADR-0013)
+const showIcon = instance.getBoolean("Show Icon");
+const showTitle = instance.getBoolean("Show Title");
+const showDescription = instance.getBoolean("Show Description");
+const showAction = instance.getBoolean("Show Action");
+
+let action;
+if (showAction) {
+  const button = instance.findInstance("Button");
+  if (button && button.type === "INSTANCE") action = button.executeTemplate().example;
+}
+
+export default {
+  example: figma.code`
+    <Alert${variant !== "default" ? figma.code` variant="${variant}"` : ""}>
+      ${showIcon ? iconCode() : ""}
+      ${showTitle ? figma.code`<AlertTitle>${title}</AlertTitle>` : ""}
+      ${showDescription ? figma.code`<AlertDescription>${description}</AlertDescription>` : ""}
+      ${action ? figma.code`<AlertAction>${action}</AlertAction>` : ""}
+    </Alert>
+  `,
+  imports: [
+    'import { Alert, AlertAction, AlertDescription, AlertTitle } from "@/components/ui/alert"',
+    'import { Icon } from "@/components/ui/icon"',
+  ],
+  id: "alert",
+  metadata: { nestable: true },
+};

package/templates/code-connect/avatar-badge.figma.ts

@@ -0,0 +1,14 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1870-277
+// source=registry/src/ui/avatar/avatar.tsx
+// component=AvatarBadge
+// Code Connect template (v2, parserless). Spec: components/avatar/spec.md.
+// Usually emitted by the Avatar template (its Badge boolean); this maps a badge selected on its own. Its status is the
+// scheme set on it, not a prop.
+import figma from "figma";
+
+export default {
+  example: figma.code`<AvatarBadge />`,
+  imports: ['import { AvatarBadge } from "@/components/ui/avatar"'],
+  id: "avatar-badge",
+  metadata: { nestable: true },
+};

package/templates/code-connect/avatar-group-count.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4359-13922
+// source=registry/src/ui/avatar/avatar.tsx
+// component=AvatarGroupCount
+// Code Connect template (v2, parserless). Spec: components/avatar/spec.md.
+// Size maps to nothing: in code the count takes the size of the group's avatars.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const count = instance.getString("Count");
+
+export default {
+  example: figma.code`<AvatarGroupCount>${count}</AvatarGroupCount>`,
+  imports: ['import { AvatarGroupCount } from "@/components/ui/avatar"'],
+  id: "avatar-group-count",
+  metadata: { nestable: true },
+};

package/templates/code-connect/avatar-group.figma.ts

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1870-301
+// source=registry/src/ui/avatar/avatar.tsx
+// component=AvatarGroup
+// Code Connect template (v2, parserless). Spec: components/avatar/spec.md.
+// The Children slot holds Avatar and Avatar Group Count instances; each renders its own template.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const parts = (instance.children ?? [])
+  .flatMap((c: any) => (c.type === "INSTANCE" ? [c] : c.children ?? []))
+  .filter((c: any) => c.type === "INSTANCE")
+  .map((c: any) => {
+    try {
+      return c.executeTemplate().example;
+    } catch {
+      return undefined;
+    }
+  })
+  .filter(Boolean);
+
+export default {
+  example: figma.code`
+    <AvatarGroup>
+      ${parts.length ? parts : figma.code`<Avatar><AvatarFallback>AB</AvatarFallback></Avatar>`}
+    </AvatarGroup>
+  `,
+  imports: ['import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar"'],
+  id: "avatar-group",
+  metadata: { nestable: true },
+};

package/templates/code-connect/avatar.figma.ts

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1870-229
+// source=registry/src/ui/avatar/avatar.tsx
+// component=Avatar
+// Code Connect template (v2, parserless). Spec: components/avatar/spec.md.
+// Figma property VALUES are identical to the code enums, so every getEnum map is an identity map.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum("Size", { xs: "xs", sm: "sm", md: "md", lg: "lg", xl: "xl" });
+const type = instance.getEnum("Type", { image: "image", fallback: "fallback", icon: "icon" });
+const initials = instance.getString("Fallback");
+// Badge is a Show-style boolean: it maps to a CHILD, never to a prop (ADR-0013). Its status is the scheme on the badge.
+const badge = instance.getBoolean("Badge");
+
+const fallback =
+  type === "icon"
+    ? figma.code`<AvatarFallback><Icon name="user" /></AvatarFallback>`
+    : figma.code`<AvatarFallback>${initials}</AvatarFallback>`;
+
+export default {
+  example: figma.code`
+    <Avatar${size !== "md" ? figma.code` size="${size}"` : ""}>
+      ${type === "image" ? figma.code`<AvatarImage src="/avatar.jpg" alt="${initials}" />` : ""}
+      ${fallback}
+      ${badge ? figma.code`<AvatarBadge />` : ""}
+    </Avatar>
+  `,
+  imports: [
+    'import { Avatar, AvatarBadge, AvatarFallback, AvatarImage } from "@/components/ui/avatar"',
+    'import { Icon } from "@/components/ui/icon"',
+  ],
+  id: "avatar",
+  metadata: { nestable: true },
+};