@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,383 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=469-69
+// source=registry/src/ui/badge/badge.tsx
+// component=Badge
+// Code Connect template (v2, parserless). Spec: components/badge/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;
+
+// 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 text = instance.getString("Text");
+const variant = instance.getEnum("Variant", {
+  default: "default",
+  secondary: "secondary",
+  destructive: "destructive",
+  outline: "outline",
+  ghost: "ghost",
+  link: "link",
+});
+const size = instance.getEnum("Size", { md: "md", sm: "sm" });
+
+// Show booleans map to CHILDREN, never to props (ADR-0013)
+// Icon (none | start | end, 2026-10-02) replaced the Show Left / Right Icon booleans
+const iconSide = instance.getEnum("Icon", { none: "none", start: "start", end: "end" });
+const leftIcon = iconSide === "start" ? iconCode("Icon", ' data-icon="inline-start"') : undefined;
+const rightIcon = iconSide === "end" ? iconCode("Icon", ' data-icon="inline-end"') : undefined;
+const hasIcon = Boolean(leftIcon || rightIcon);
+
+export default {
+  example: figma.code`
+    <Badge
+      ${variant !== "default" ? figma.code`variant="${variant}"` : ""}
+      ${size !== "md" ? figma.code`size="${size}"` : ""}
+    >
+      ${leftIcon ? figma.code`${leftIcon}` : ""}
+      ${text}
+      ${rightIcon ? figma.code`${rightIcon}` : ""}
+    </Badge>
+  `,
+  imports: hasIcon
+    ? ['import { Badge } from "@/components/ui/badge"', 'import { Icon } from "@/components/ui/icon"']
+    : ['import { Badge } from "@/components/ui/badge"'],
+  id: "badge",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,23 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=475-117
+// source=registry/src/ui/breadcrumb/breadcrumb.tsx
+// component=BreadcrumbItem
+// Code Connect template (v2, parserless). Spec: components/breadcrumb/spec.md. Current=true is the page (not a link);
+// Type=ellipsis is the collapsed-items glyph.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const type = instance.getEnum("Type", { link: "link", ellipsis: "ellipsis" });
+const current = instance.getEnum("Current", { false: false, true: true }) === true;
+const label = instance.getString("Label");
+
+export default {
+  example:
+    type === "ellipsis"
+      ? figma.code`<BreadcrumbItem><BreadcrumbEllipsis /></BreadcrumbItem>`
+      : current
+        ? figma.code`<BreadcrumbItem><BreadcrumbPage>${label}</BreadcrumbPage></BreadcrumbItem>`
+        : figma.code`<BreadcrumbItem><BreadcrumbLink href="#">${label}</BreadcrumbLink></BreadcrumbItem>`,
+  imports: ['import { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbPage } from "@/components/ui/breadcrumb"'],
+  id: "breadcrumb-item",
+  metadata: { nestable: true },
+};

package/templates/code-connect/breadcrumb-separator.figma.ts

@@ -0,0 +1,12 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=475-118
+// source=registry/src/ui/breadcrumb/breadcrumb.tsx
+// component=BreadcrumbSeparator
+// Code Connect template (v2, parserless). Spec: components/breadcrumb/spec.md. The chevron is the default child.
+import figma from "figma";
+
+export default {
+  example: figma.code`<BreadcrumbSeparator />`,
+  imports: ['import { BreadcrumbSeparator } from "@/components/ui/breadcrumb"'],
+  id: "breadcrumb-separator",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,32 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=475-121
+// source=registry/src/ui/breadcrumb/breadcrumb.tsx
+// component=Breadcrumb
+// Code Connect template (v2, parserless). Spec: components/breadcrumb/spec.md. The Children slot holds items and
+// separators; each renders its own template inside the list.
+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`
+    <Breadcrumb>
+      <BreadcrumbList>
+        ${parts.length ? parts : figma.code`<BreadcrumbItem><BreadcrumbPage>Page</BreadcrumbPage></BreadcrumbItem>`}
+      </BreadcrumbList>
+    </Breadcrumb>
+  `,
+  imports: ['import { Breadcrumb, BreadcrumbList } from "@/components/ui/breadcrumb"'],
+  id: "breadcrumb",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1145-201
+// source=registry/src/ui/button-group/button-group.tsx
+// component=Button Group
+// Code Connect template (v2, parserless). Spec: components/button-group/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;
+
+// The Core batch (2026-09-28) deleted the Variant axis and renamed Stacked to Orientation, so this set is two
+// variants and nothing else. Button Group holds no state and chooses no variant: the buttons inside it do.
+const orientation = instance.getEnum("Orientation", { horizontal: "horizontal", vertical: "vertical" });
+
+// horizontal is the default in code, so it is left out of the snippet.
+const orientationProp = orientation === "vertical" ? ' orientation="vertical"' : "";
+
+// The children are the author's Buttons, which is the whole point of the component -- every number in the
+// group comes from them. The snippet shows the shape rather than guessing at their labels.
+export default {
+  example: figma.code`<ButtonGroup${orientationProp}>
+  <Button variant="outline">One</Button>
+  <Button variant="outline">Two</Button>
+</ButtonGroup>`,
+  imports: [
+    'import { ButtonGroup, ButtonGroupSeparator, ButtonGroupText } from "@/components/ui/button-group"',
+  ],
+  id: "button-group",
+  metadata: { nestable: true },
+};