@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,31 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2207-24960
+// source=registry/src/ui/meter/meter.tsx
+// component=Meter
+// Code Connect template (v2, parserless). Spec: components/meter/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Show booleans map to CHILDREN, never to props (ADR-0013)
+const showLabel = instance.getBoolean("Show Label");
+const showValue = instance.getBoolean("Show Value");
+const label = instance.getString("Label");
+const valueText = instance.getString("Value");
+// The bar's fill is drawn, not a property; the Value text ("64%") is the best source for the number.
+const parsed = /^\s*(\d+(?:\.\d+)?)\s*%\s*$/.exec(valueText ?? "");
+const value = parsed ? parsed[1] : "50";
+// A value text that is not a percentage ("12 GB of 15 GB") becomes MeterValue's children
+const valueChild = parsed ? figma.code`<MeterValue />` : figma.code`<MeterValue>${valueText}</MeterValue>`;
+
+export default {
+  example: showLabel || showValue
+    ? figma.code`
+    <Meter value={${value}}>
+      ${showLabel ? figma.code`<MeterLabel>${label}</MeterLabel>` : ""}
+      ${showValue ? valueChild : ""}
+    </Meter>
+  `
+    : figma.code`<Meter value={${value}} aria-label="${label}" />`,
+  imports: ['import { Meter, MeterLabel, MeterValue } from "@/components/ui/meter"'],
+  id: "meter",
+  metadata: { nestable: true },
+};

package/templates/code-connect/native-select.figma.ts

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2025-24756
+// source=registry/src/ui/native-select/native-select.tsx
+// component=Select
+// Code Connect template (v2, parserless). Spec: components/native-select/spec.md.
+// Figma property VALUES are lower-kebab and identical to the code enums, so every getEnum map is an identity map.
+//
+// This set is the TRIGGER, which is the native <select> on every platform, so it maps to NativeSelect. The
+// designed panel (Select Panel 2026:24802) is the React-only Base UI composition and is mapped separately.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// State carries only what code consumes. focus-visible is a CSS pseudo-state and was dropped as an axis in
+// the Core batch (2026-09-28).
+const state = instance.getEnum("State", { default: "default", invalid: "invalid", disabled: "disabled" });
+
+// Filled is value PRESENCE, not a prop: a Figma boolean only shows and hides layers, so it has to be an axis
+// (the same call Input's and Textarea's specs record).
+const filled = instance.getEnum("Filled", { false: "false", true: "true" });
+
+const attrs = [
+  state === "invalid" ? " aria-invalid" : "",
+  state === "disabled" ? " disabled" : "",
+].join("");
+
+// A select is never placed without a label, so swap Select into a Field in Figma and Field's own template
+// renders the wrapper. The options are the author's; the snippet shows the shape.
+const placeholder = filled === "true" ? "" : `\n  <option value="" disabled>Select an option</option>`;
+
+export default {
+  example: figma.code`<NativeSelect id="select"${attrs}>${placeholder}
+  <option>Option</option>
+</NativeSelect>`,
+  imports: ['import { NativeSelect } from "@/components/ui/native-select"'],
+  id: "native-select",
+  metadata: { nestable: true },
+};

package/templates/code-connect/navigation-menu-link.figma.ts

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4547-131
+// source=registry/src/ui/navigation-menu/navigation-menu.tsx
+// component=NavigationMenuLink
+// Code Connect template (v2, parserless). Spec: components/navigation-menu/spec.md.
+// active is the current page (aria-current); hover and focus are runtime. Title + Description is upstream's demo
+// ListItem; Show Badge places a Badge beside the title (user, 2026-10-06).
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const active = instance.getEnum("State", { default: false, hover: false, active: true, focus: false });
+const showDescription = instance.getBoolean("Show Description");
+const description = showDescription ? instance.getString("Description") : "";
+const badge = instance.getBoolean("Show Badge");
+
+export default {
+  example: showDescription || badge
+    ? figma.code`<NavigationMenuLink href="#"${active ? " active" : ""}>
+  <div className="flex flex-col gap-(--bl-navigation-menu-link-description-gap)">
+    <div className="flex items-center gap-(--bl-navigation-menu-link-gap) leading-none font-(--bl-navigation-menu-link-title-font-weight)">
+      ${label}${badge ? figma.code`
+      <Badge size="sm">New</Badge>` : ""}
+    </div>${showDescription ? figma.code`
+    <div className="line-clamp-2 text-muted-foreground">${description}</div>` : ""}
+  </div>
+</NavigationMenuLink>`
+    : figma.code`<NavigationMenuLink href="#"${active ? " active" : ""}>${label}</NavigationMenuLink>`,
+  imports: badge
+    ? ['import { NavigationMenuLink } from "@/components/ui/navigation-menu"', 'import { Badge } from "@/components/ui/badge"']
+    : ['import { NavigationMenuLink } from "@/components/ui/navigation-menu"'],
+  id: "navigation-menu-link",
+  metadata: { nestable: true },
+};

package/templates/code-connect/navigation-menu-trigger.figma.ts

@@ -0,0 +1,28 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4547-83
+// source=registry/src/ui/navigation-menu/navigation-menu.tsx
+// component=NavigationMenuTrigger
+// Code Connect template (v2, parserless). Spec: components/navigation-menu/spec.md.
+// State is runtime (hover, an open panel, focus), so it is not read. Show Chevron off is a top-level link drawn as a
+// trigger (upstream's navigationMenuTriggerStyle); on, a trigger with its panel.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const chevron = instance.getBoolean("Show Chevron");
+const id = "nav-" + label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "");
+
+export default {
+  example: chevron
+    ? figma.code`<NavigationMenuItem>
+  <NavigationMenuTrigger commandfor="${id}">${label}</NavigationMenuTrigger>
+  <NavigationMenuContent id="${id}">…</NavigationMenuContent>
+</NavigationMenuItem>`
+    : figma.code`<NavigationMenuItem>
+  <NavigationMenuLink href="#" className={navigationMenuTriggerStyle()}>${label}</NavigationMenuLink>
+</NavigationMenuItem>`,
+  imports: chevron
+    ? ['import { NavigationMenuContent, NavigationMenuItem, NavigationMenuTrigger } from "@/components/ui/navigation-menu"']
+    : ['import { NavigationMenuItem, NavigationMenuLink, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"'],
+  id: "navigation-menu-trigger",
+  metadata: { nestable: true },
+};

package/templates/code-connect/navigation-menu.figma.ts

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2537-49294
+// source=registry/src/ui/navigation-menu/navigation-menu.tsx
+// component=NavigationMenu
+// Code Connect template (v2, parserless). Spec: components/navigation-menu/spec.md.
+// The Children slot holds the author's triggers and links (their own templates), so the snippet shows the shape: a
+// trigger naming its panel by id (ADR-0033), and a top-level link drawn as a trigger.
+import figma from "figma";
+
+export default {
+  example: figma.code`<NavigationMenu aria-label="Main">
+  <NavigationMenuList>
+    <NavigationMenuItem>
+      <NavigationMenuTrigger commandfor="nav-products">Products</NavigationMenuTrigger>
+      <NavigationMenuContent id="nav-products">
+        <ul className="w-96">
+          <li><NavigationMenuLink href="/products/new">New arrivals</NavigationMenuLink></li>
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+    <NavigationMenuItem>
+      <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>Pricing</NavigationMenuLink>
+    </NavigationMenuItem>
+  </NavigationMenuList>
+</NavigationMenu>`,
+  imports: [
+    'import { NavigationMenu, NavigationMenuContent, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle } from "@/components/ui/navigation-menu"',
+  ],
+  id: "navigation-menu",
+  metadata: { nestable: true },
+};

package/templates/code-connect/pagination-ellipsis.figma.ts

@@ -0,0 +1,11 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1700-4114
+// source=registry/src/ui/pagination/pagination.tsx
+// component=PaginationEllipsis
+// Code Connect template (v2, parserless). Spec: components/pagination/spec.md.
+import figma from "figma";
+export default {
+  example: figma.code`<PaginationItem><PaginationEllipsis /></PaginationItem>`,
+  imports: ['import { PaginationEllipsis, PaginationItem } from "@/components/ui/pagination"'],
+  id: "pagination-ellipsis",
+  metadata: { nestable: true },
+};

package/templates/code-connect/pagination-link.figma.ts

@@ -0,0 +1,24 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=482-14
+// source=registry/src/ui/pagination/pagination.tsx
+// component=PaginationLink
+// Code Connect template (v2, parserless). Spec: components/pagination/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const current = instance.getEnum("Current", { false: false, true: true }) === true;
+// the page number is the instance's text layer
+function texts(node: any, found: string[] = []): string[] {
+  for (const child of node?.children ?? []) {
+    if (child.type === "TEXT" && typeof child.textContent === "string") found.push(child.textContent);
+    else texts(child, found);
+  }
+  return found;
+}
+const [label = "1"] = texts(instance);
+
+export default {
+  example: figma.code`<PaginationItem><PaginationLink href="#"${current ? figma.code` isActive` : ""}>${label}</PaginationLink></PaginationItem>`,
+  imports: ['import { PaginationItem, PaginationLink } from "@/components/ui/pagination"'],
+  id: "pagination-link",
+  metadata: { nestable: true },
+};

package/templates/code-connect/pagination-next.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1703-4726
+// source=registry/src/ui/pagination/pagination.tsx
+// component=PaginationNext
+// Code Connect template (v2, parserless). Spec: components/pagination/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// State=disabled is the first (Previous) or last (Next) page: the link leads nowhere. Variant is the project's look
+// (ADR-0031), so it maps to nothing; there is no icon-only Previous/Next (code always shows the text).
+const disabled = instance.getEnum("State", { default: false, disabled: true }) === true;
+
+export default {
+  example: figma.code`<PaginationItem><PaginationNext href="#"${disabled ? figma.code` disabled` : ""} /></PaginationItem>`,
+  imports: ['import { PaginationItem, PaginationNext } from "@/components/ui/pagination"'],
+  id: "pagination-next",
+  metadata: { nestable: true },
+};

package/templates/code-connect/pagination-previous.figma.ts

@@ -0,0 +1,17 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1703-4743
+// source=registry/src/ui/pagination/pagination.tsx
+// component=PaginationPrevious
+// Code Connect template (v2, parserless). Spec: components/pagination/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// State=disabled is the first (Previous) or last (Next) page: the link leads nowhere. Variant is the project's look
+// (ADR-0031), so it maps to nothing; there is no icon-only Previous/Next (code always shows the text).
+const disabled = instance.getEnum("State", { default: false, disabled: true }) === true;
+
+export default {
+  example: figma.code`<PaginationItem><PaginationPrevious href="#"${disabled ? figma.code` disabled` : ""} /></PaginationItem>`,
+  imports: ['import { PaginationItem, PaginationPrevious } from "@/components/ui/pagination"'],
+  id: "pagination-previous",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,33 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1706-5326
+// source=registry/src/ui/pagination/pagination.tsx
+// component=Pagination
+// Code Connect template (v2, parserless). Spec: components/pagination/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// The Variant is the project's look, installed once (ADR-0031: pagination.tsx or pagination.<look>.tsx as
+// components/ui/pagination.tsx), so it maps to nothing here; the links in the Links slot render their own templates.
+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`
+    <Pagination>
+      <PaginationContent>
+        ${parts.length ? parts : figma.code`<PaginationItem><PaginationLink href="#" isActive>1</PaginationLink></PaginationItem>`}
+      </PaginationContent>
+    </Pagination>
+  `,
+  imports: ['import { Pagination, PaginationContent } from "@/components/ui/pagination"'],
+  id: "pagination",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4585-2678
+// source=registry/src/ui/panel/panel.tsx
+// component=Panel
+// Code Connect template (v2, parserless). Spec: components/panel/spec.md. Padding and gap are per-instance bindings.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// 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`
+    <Panel>
+      ${parts("Children")}
+    </Panel>
+  `,
+  imports: ['import { Panel } from "@/components/ui/panel"'],
+  id: "panel",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,58 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=483-17
+// source=registry/src/ui/popover/popover.tsx
+// component=PopoverContent
+// Code Connect template (v2, parserless). Spec: components/popover/spec.md.
+// Figma draws the open panel; code is the whole composition, so the snippet includes its trigger. A server component
+// with explicit ids (ADR-0033): PopoverTrigger points at the content's id and anchors it.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Show booleans map to CHILDREN, never to props (ADR-0013).
+const showHeader = instance.getBoolean("Show Header");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+// the Children slot (found by layer name at any depth): its text as a paragraph, its instances as their 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 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);
+
+const header = showHeader
+  ? figma.code`
+    <PopoverHeader>
+      <PopoverTitle id="popover-title">${title}</PopoverTitle>
+      ${description ? figma.code`<PopoverDescription id="popover-description">${description}</PopoverDescription>` : ""}
+    </PopoverHeader>`
+  : figma.code``;
+
+export default {
+  example: figma.code`
+    <PopoverTrigger commandfor="popover" render={<Button variant="outline" />}>Open</PopoverTrigger>
+    <PopoverContent id="popover"${showHeader ? "" : figma.code` aria-label="…"`}>
+      ${header}
+      ${content}
+    </PopoverContent>
+  `,
+  imports: [
+    'import { PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger } from "@/components/ui/popover"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "popover",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4431-16952
+// source=registry/src/ui/progress/progress.tsx
+// component=Progress
+// Code Connect template (v2, parserless). Spec: components/progress/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Show booleans map to CHILDREN, never to props (ADR-0013)
+const showLabel = instance.getBoolean("Show Label");
+const showValue = instance.getBoolean("Show Value");
+const label = instance.getString("Label");
+const valueText = instance.getString("Value");
+// Indeterminate (a variant since 2026-10-02): no value, so the bar sweeps
+const indeterminate = instance.getEnum("Indeterminate", { false: false, true: true }) === true;
+// The bar's fill is drawn, not a property; the Value text ("56%") is the best source for the number.
+const parsed = /^\s*(\d+(?:\.\d+)?)\s*%\s*$/.exec(valueText ?? "");
+const value = parsed ? parsed[1] : "50";
+const valueAttr = indeterminate ? "" : figma.code` value={${value}}`;
+// A value text that is not a percentage ("Step 3 of 4") becomes ProgressValue's children
+const valueChild = parsed ? figma.code`<ProgressValue />` : figma.code`<ProgressValue>${valueText}</ProgressValue>`;
+
+export default {
+  example: showLabel || showValue
+    ? figma.code`
+    <Progress${valueAttr}>
+      ${showLabel ? figma.code`<ProgressLabel>${label}</ProgressLabel>` : ""}
+      ${showValue && !indeterminate ? valueChild : ""}
+    </Progress>
+  `
+    : figma.code`<Progress${valueAttr} aria-label="${label}" />`,
+  imports: ['import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"'],
+  id: "progress",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,29 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=472-98
+// source=registry/src/ui/radio/radio.tsx
+// component=Radio
+// Code Connect template (v2, parserless). Spec: components/radio/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;
+
+const checked = instance.getEnum("Checked", { false: "false", true: "true" });
+
+// State carries only what code consumes. focus-visible is a CSS pseudo-state and was dropped as an axis in
+// the Core batch (2026-09-28).
+const state = instance.getEnum("State", { default: "default", invalid: "invalid", disabled: "disabled" });
+
+const attrs = [
+  checked === "true" ? " defaultChecked" : "",
+  state === "invalid" ? " aria-invalid" : "",
+  state === "disabled" ? " disabled" : "",
+].join("");
+
+// `name` is what makes a set of radios one group in the browser, so the snippet always shows it: a radio
+// without it is a bug, not a variant. A radio is never placed without a label either -- swap Radio into a
+// Field in Figma and Field's own template renders the wrapper.
+export default {
+  example: figma.code`<RadioGroupItem name="group" value="value" id="radio"${attrs} />`,
+  imports: ['import { RadioGroup, RadioGroupItem } from "@/components/ui/radio"'],
+  id: "radio",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2253-17828
+// source=registry/src/ui/section/section.tsx
+// component=Section
+// Code Connect template (v2, parserless). Spec: components/section/spec.md.
+// Padding and gap are per-instance variable bindings and the scheme is a Color Schemes mode: neither is readable
+// here, so the snippet shows the defaults and the developer sets paddingTop / paddingBottom / scheme from Dev Mode.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// 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`
+    <Section>
+      ${parts("Children")}
+    </Section>
+  `,
+  imports: ['import { Section } from "@/components/ui/section"'],
+  id: "section",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2026-24802
+// source=registry/src/ui/select/select.tsx
+// component=Select Panel
+// Code Connect template (v2, parserless). Spec: components/select/spec.md.
+//
+// The PANEL maps here, because the panel is the only thing that needs the Base UI composition. The trigger set
+// (2025:24756) maps to NativeSelect instead: it is the same box either way, and the native control is what
+// WordPress, Shopify and HTML render.
+import figma from "figma";
+
+// The panel's rows are the author's content, so the snippet shows the composition rather than trying to read
+// item text out of the instance: a designer needs the shape, and the shape is what is easy to get wrong.
+export default {
+  example: figma.code`<Select defaultValue="value">
+  <SelectTrigger>
+    <SelectValue placeholder="Select an option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectGroup>
+      <SelectLabel>Group</SelectLabel>
+      <SelectItem value="value">Option</SelectItem>
+    </SelectGroup>
+  </SelectContent>
+</Select>`,
+  imports: [
+    'import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"',
+  ],
+  id: "select-panel",
+  metadata: { nestable: false },
+};

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

@@ -0,0 +1,70 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4467-82
+// source=registry/src/ui/sheet/sheet.tsx
+// component=Sheet
+// Code Connect template (v2, parserless). Spec: components/sheet/spec.md.
+// Figma draws the open sheet; code is the whole composition, so the snippet includes a trigger. Server components with
+// explicit ids (ADR-0033): the trigger and the closes are Buttons with command / commandfor.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const side = instance.getEnum("Side", { right: "right", left: "left", top: "top", bottom: "bottom" });
+// Show booleans map to CHILDREN, never to props (ADR-0013), except Show Close Button, which is upstream's own prop.
+const showHeader = instance.getBoolean("Show Header");
+const showFooter = instance.getBoolean("Show Footer");
+const showClose = instance.getBoolean("Show Close Button");
+const title = instance.getString("Title");
+const description = instance.getBoolean("Show Description") ? instance.getString("Description") : "";
+
+// 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 content = parts("Content");
+const actions = parts("Actions");
+
+const header = showHeader
+  ? figma.code`
+        <SheetHeader>
+          <SheetTitle id="sheet-title">${title}</SheetTitle>
+          ${description ? figma.code`<SheetDescription id="sheet-description">${description}</SheetDescription>` : ""}
+        </SheetHeader>`
+  : figma.code``;
+const footer = showFooter
+  ? figma.code`
+        <SheetFooter>
+          ${actions.length ? actions : figma.code`<Button variant="outline" command="close" commandfor="sheet">Close</Button>`}
+        </SheetFooter>`
+  : figma.code``;
+
+export default {
+  example: figma.code`
+    <Button variant="outline" command="show-modal" commandfor="sheet">Open</Button>
+    <SheetContent id="sheet"${side !== "right" ? figma.code` side="${side}"` : ""}${showClose ? "" : figma.code` showCloseButton={false}`}>
+        ${header}
+        <div className="px-4">${content.length ? content : "…"}</div>
+        ${footer}
+    </SheetContent>
+  `,
+  imports: [
+    'import { SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "sheet",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4558-284
+// source=registry/src/ui/sidebar/sidebar.tsx
+// component=SidebarMenuButton
+// Code Connect template (v2, parserless). Spec: components/sidebar/spec.md.
+// active is isActive (the current page), disabled the prop; hover is runtime. Show Label off is the collapsed button
+// (the sidebar's state, not a prop), so the label stays in the snippet and becomes its tooltip. Badge and Action are
+// SidebarMenuBadge / SidebarMenuAction beside the button, in its SidebarMenuItem.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const size = instance.getEnum("Size", { sm: "sm", md: "md", lg: "lg" });
+const state = instance.getEnum("State", { default: "", hover: "", active: "active", disabled: "disabled" });
+const icon = instance.getBoolean("Show Icon");
+const badge = instance.getBoolean("Show Badge");
+const action = instance.getBoolean("Show Action");
+const href = "/" + label.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-");
+
+export default {
+  example: figma.code`<SidebarMenuItem>
+  <SidebarMenuButton${size !== "md" ? ` size="${size}"` : ""}${state === "active" ? " isActive" : ""}${state === "disabled" ? " disabled" : ""} render={<a href="${href}" />} tooltip="${label}">${icon ? figma.code`
+    <Icon name="home" />` : ""}
+    <span>${label}</span>
+  </SidebarMenuButton>${badge ? figma.code`
+  <SidebarMenuBadge>24</SidebarMenuBadge>` : ""}${action ? figma.code`
+  <SidebarMenuAction aria-label="More">
+    <Icon name="more-horizontal" />
+  </SidebarMenuAction>` : ""}
+</SidebarMenuItem>`,
+  imports: [
+    'import { SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar"',
+    'import { Icon } from "@/components/ui/icon"',
+  ],
+  id: "sidebar-menu-button",
+  metadata: { nestable: true },
+};