@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,408 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=332-47
+// source=registry/src/ui/button/button.tsx
+// component=Button
+// Code Connect template (v2, parserless). Spec: components/button/spec.md. Vocabulary: ADR-0013.
+// 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;
+
+// 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(layerName: string, extra = "") {
+  const placeholder = instance.findInstance(layerName, { traverseInstances: true });
+  if (!placeholder || placeholder.type !== "INSTANCE") return undefined;
+  const glyph = placeholder.children.find((c) => c.type === "INSTANCE");
+  if (!glyph || glyph.type !== "INSTANCE") return undefined;
+  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}"${extra} />`;
+  const prefix = BASELINE_ICON_PREFIXES[set] ?? set;
+  return figma.code`<Icon className="icon-[${prefix}--${name}${BASELINE_ICON_SUFFIXES[set] ?? ""}]"${extra} />`;
+}
+
+const label = instance.getString("Label");
+const variant = instance.getEnum("Variant", {
+  default: "default",
+  secondary: "secondary",
+  outline: "outline",
+  ghost: "ghost",
+  link: "link",
+  destructive: "destructive",
+});
+// icon sizes are their own Figma component since 2026-10-02 (Icon Button, icon-button.figma.ts)
+const size = instance.getEnum("Size", { xs: "xs", sm: "sm", md: "md", lg: "lg" });
+// hover / focus are CSS states. disabled is a prop; loading is a composition (no loading prop since 2026-10-02):
+// a Spinner on the icon's side (the start when Icon=none) and disabled
+const state = instance.getEnum("State", {
+  default: "default",
+  hover: "default",
+  focus: "default",
+  disabled: "disabled",
+  loading: "loading",
+});
+// Show booleans are slot conveniences: each maps to a CHILD, never to a prop (ADR-0013)
+// Icon (none | start | end, 2026-10-02) replaced Show Left / Right Icon: one "Icon" layer on the side it names
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end" });
+const showKbd = instance.getBoolean("Show Keyboard Shortcut");
+// No count: Count left the Figma component on 2026-10-01. A count is a Badge the designer places over the Button,
+// which Code Connect maps on its own; in code it is a Badge child with positioning classes (button.tsx).
+
+const loading = state === "loading";
+const leftIcon = loading
+  ? iconSide !== "end" ? figma.code`<Spinner data-icon="inline-start" />` : undefined
+  : iconSide === "start" ? iconCode("Icon", ' data-icon="inline-start"') : undefined;
+const rightIcon = loading
+  ? iconSide === "end" ? figma.code`<Spinner data-icon="inline-end" />` : undefined
+  : iconSide === "end" ? iconCode("Icon", ' data-icon="inline-end"') : undefined;
+
+let kbd;
+const kbdGroup = showKbd ? instance.findInstance("Kbd Group", { traverseInstances: true }) : null;
+if (kbdGroup && kbdGroup.type === "INSTANCE") kbd = kbdGroup.executeTemplate().example;
+
+export default {
+  example: figma.code`
+    <Button
+      ${variant !== "default" ? figma.code`variant="${variant}"` : ""}
+      ${size !== "md" ? figma.code`size="${size}"` : ""}
+      ${state !== "default" ? "disabled" : ""}
+    >
+      ${leftIcon ? figma.code`${leftIcon}` : ""}
+      ${label}
+      ${kbd ? figma.code`${kbd}` : ""}
+      ${rightIcon ? figma.code`${rightIcon}` : ""}
+    </Button>
+  `,
+  imports: [
+    'import { Button } from "@/components/ui/button"',
+    'import { Icon } from "@/components/ui/icon"',
+    ...(loading ? ['import { Spinner } from "@/components/ui/spinner"'] : []),
+  ],
+  id: "button",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,74 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4358-14597
+// source=registry/src/ui/card/card.tsx
+// component=Card
+// Code Connect template (v2, parserless). Spec: components/card/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum("Size", { md: "md", sm: "sm" });
+// Show booleans map to CHILDREN, never to props (ADR-0013). Since 2026-10-02 every part lives on the Card itself: the
+// header's Title / Description are text properties, Actions / Content / Footer are slots on the root.
+const showMedia = instance.getBoolean("Show Media");
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+const showAction = instance.getBoolean("Show Actions");
+const bordered = instance.getBoolean("Header Border");
+const vertical = instance.getEnum("Footer Orientation", { horizontal: false, vertical: true }) === true;
+
+// a 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 parts = (name: string) =>
+  (slot(name)?.children ?? [])
+    .filter((c: any) => c.type === "INSTANCE")
+    .map((c: any) => {
+      try {
+        return c.executeTemplate().example;
+      } catch {
+        return undefined;
+      }
+    })
+    .filter(Boolean);
+const actions = parts("Actions");
+const content = parts("Content");
+const footerParts = parts("Footer");
+
+const header = showHeader
+  ? figma.code`
+      <CardHeader${bordered ? figma.code` className="border-b"` : ""}>
+        <CardTitle>${title}</CardTitle>
+        ${description ? figma.code`<CardDescription>${description}</CardDescription>` : ""}
+        ${showAction ? figma.code`<CardAction>${actions.length ? actions : figma.code`<Button variant="link">Action</Button>`}</CardAction>` : ""}
+      </CardHeader>`
+  : figma.code``;
+const footer = showFooter
+  ? figma.code`
+      <CardFooter${vertical ? figma.code` className="flex-col"` : ""}>
+        ${footerParts.length ? footerParts : figma.code`<Button>Action</Button>`}
+      </CardFooter>`
+  : figma.code``;
+
+export default {
+  example: figma.code`
+    <Card${size !== "md" ? figma.code` size="${size}"` : ""}>
+      ${showMedia ? figma.code`<img src="/image.jpg" alt="" className="aspect-video w-full object-cover" />` : ""}
+      ${header}
+      <CardContent>${content.length ? content : "…"}</CardContent>
+      ${footer}
+    </Card>
+  `,
+  imports: [
+    'import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "card",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4557-180
+// source=registry/src/ui/carousel/carousel.tsx
+// component=Carousel
+// Code Connect template (v2, parserless). Spec: components/carousel/spec.md.
+// The Content slot holds the author's Carousel Items, so the snippet shows the shape: items around their content.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const vertical = instance.getEnum("Orientation", { horizontal: false, vertical: true });
+const controls = instance.getBoolean("Show Controls");
+const dots = instance.getBoolean("Show Dots");
+
+export default {
+  example: figma.code`<Carousel${vertical ? ' orientation="vertical"' : ""} className="w-full max-w-xs">
+  <CarouselContent>
+    <CarouselItem>…</CarouselItem>
+    <CarouselItem>…</CarouselItem>
+    <CarouselItem>…</CarouselItem>
+  </CarouselContent>${controls ? figma.code`
+  <CarouselPrevious />
+  <CarouselNext />` : ""}${dots ? figma.code`
+  <CarouselDots />` : ""}
+</Carousel>`,
+  imports: ['import { Carousel, CarouselContent, CarouselDots, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"'],
+  id: "carousel",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=472-96
+// source=registry/src/ui/checkbox/checkbox.tsx
+// component=Checkbox
+// Code Connect template (v2, parserless). Spec: components/checkbox/spec.md.
+// Figma property VALUES are lower-kebab and identical to the code enums, so every getEnum map is an identity map.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Checked carries the third state as a value, because a Figma boolean cannot express one. In code `true` and
+// `false` are the `checked` attribute and `indeterminate` is its own prop.
+const checked = instance.getEnum("Checked", {
+  false: "false",
+  true: "true",
+  indeterminate: "indeterminate",
+});
+
+// State carries only what code consumes. focus-visible is a CSS pseudo-state and is not an axis.
+const state = instance.getEnum("State", { default: "default", invalid: "invalid", disabled: "disabled" });
+
+const attrs = [
+  checked === "true" ? " defaultChecked" : "",
+  checked === "indeterminate" ? " indeterminate" : "",
+  state === "invalid" ? " aria-invalid" : "",
+  state === "disabled" ? " disabled" : "",
+].join("");
+
+// A checkbox is never placed without a label, so the snippet shows the unit a designer actually needs rather
+// than a bare control. Swap Checkbox into a Field in Figma and Field's own template renders the wrapper.
+export default {
+  example: figma.code`<Checkbox id="checkbox"${attrs} />`,
+  imports: ['import { Checkbox } from "@/components/ui/checkbox"'],
+  id: "checkbox",
+  metadata: { nestable: true },
+};

package/templates/code-connect/columns-1.figma.ts

@@ -0,0 +1,43 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1817-1656
+// source=registry/src/ui/columns/columns.tsx
+// component=Columns
+// Code Connect template (v2, parserless) for Columns/1. Spec: components/columns/spec.md. Device is Figma's
+// viewport preview, not a prop: the code collapses by breakpoint. The gap is a per-instance binding.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const columns = 1;
+
+// a slot (found by layer name at any depth) rendered as its instances' own templates; loose layers become "…"
+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 parts = (name: string) => {
+  const out = (slot(name)?.children ?? [])
+    .filter((c: any) => c.type === "INSTANCE")
+    .map((c: any) => {
+      try {
+        return c.executeTemplate().example;
+      } catch {
+        return undefined;
+      }
+    })
+    .filter(Boolean);
+  return out.length ? out : "…";
+};
+
+export default {
+  example: figma.code`
+    <Columns columns={${columns}}>
+      <Column>${parts("Column 1")}</Column>
+    </Columns>
+  `,
+  imports: ['import { Column, Columns } from "@/components/ui/columns"'],
+  id: "columns-1",
+  metadata: { nestable: true },
+};

package/templates/code-connect/columns-2.figma.ts

@@ -0,0 +1,49 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2282-9253
+// source=registry/src/ui/columns/columns.tsx
+// component=Columns
+// Code Connect template (v2, parserless) for Columns/2. Spec: components/columns/spec.md. Device is Figma's
+// viewport preview, not a prop: the code collapses by breakpoint. The gap is a per-instance binding.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Layout is Figma's ratio as tracks + spans (1:2 = 3 tracks, spans 1 and 2), as the Figma grid itself is built.
+const ratio = instance.getEnum("Layout", { "1:1": [2, 1, 1], "1:2": [3, 1, 2], "2:1": [3, 2, 1], "2:3": [5, 2, 3], "3:2": [5, 3, 2] }) as number[];
+const [columns, a, b] = ratio;
+const invert = instance.getEnum("Invert Order", { False: false, True: true }) === true;
+const cell = (span: number, slotName: string) =>
+  span > 1 ? figma.code`<Column span={${span}}>${parts(slotName)}</Column>` : figma.code`<Column>${parts(slotName)}</Column>`;
+
+// a slot (found by layer name at any depth) rendered as its instances' own templates; loose layers become "…"
+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 parts = (name: string) => {
+  const out = (slot(name)?.children ?? [])
+    .filter((c: any) => c.type === "INSTANCE")
+    .map((c: any) => {
+      try {
+        return c.executeTemplate().example;
+      } catch {
+        return undefined;
+      }
+    })
+    .filter(Boolean);
+  return out.length ? out : "…";
+};
+
+export default {
+  example: figma.code`
+    <Columns columns={${columns}}${invert ? figma.code` invertOrder` : ""}>
+      ${cell(a, "Column 1")}
+      ${cell(b, "Column 2")}
+    </Columns>
+  `,
+  imports: ['import { Column, Columns } from "@/components/ui/columns"'],
+  id: "columns-2",
+  metadata: { nestable: true },
+};