@goldencomm/create-baseline 0.0.1 → 0.1.0

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

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2282-9358
+// source=registry/src/ui/columns/columns.tsx
+// component=Columns
+// Code Connect template (v2, parserless) for Columns/3. 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 = 3;
+
+// 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>
+      <Column>${parts("Column 2")}</Column>
+      <Column>${parts("Column 3")}</Column>
+    </Columns>
+  `,
+  imports: ['import { Column, Columns } from "@/components/ui/columns"'],
+  id: "columns-3",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,46 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2282-9463
+// source=registry/src/ui/columns/columns.tsx
+// component=Columns
+// Code Connect template (v2, parserless) for Columns/4. 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 = 4;
+
+// 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>
+      <Column>${parts("Column 2")}</Column>
+      <Column>${parts("Column 3")}</Column>
+      <Column>${parts("Column 4")}</Column>
+    </Columns>
+  `,
+  imports: ['import { Column, Columns } from "@/components/ui/columns"'],
+  id: "columns-4",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,42 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1794-10438
+// source=registry/src/ui/container/container.tsx
+// component=Container
+// Code Connect template (v2, parserless). Spec: components/container/spec.md. Padding is a per-instance binding.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const width = instance.getEnum("Width", { Content: "content", Wide: "wide", Full: "full" });
+
+// 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`
+    <Container${width !== "content" ? figma.code` width="${width}"` : ""}>
+      ${parts("Children")}
+    </Container>
+  `,
+  imports: ['import { Container } from "@/components/ui/container"'],
+  id: "container",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,72 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4461-13577
+// source=registry/src/ui/dialog/dialog.tsx
+// component=Dialog
+// Code Connect template (v2, parserless). Spec: components/dialog/spec.md.
+// Figma draws the open dialog; 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;
+
+// Show booleans map to CHILDREN, never to props (ADR-0013), except Show Close Button, which is upstream's own prop.
+const showMedia = instance.getBoolean("Show Media");
+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") : "";
+// Footer Orientation=vertical previews the narrow layout; code stacks the footer below sm on its own, so it maps to nothing.
+
+// 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`
+        <DialogHeader>
+          <DialogTitle id="dialog-title">${title}</DialogTitle>
+          ${description ? figma.code`<DialogDescription id="dialog-description">${description}</DialogDescription>` : ""}
+        </DialogHeader>`
+  : figma.code``;
+const footer = showFooter
+  ? figma.code`
+        <DialogFooter>
+          ${actions.length ? actions : figma.code`<Button variant="outline" command="close" commandfor="dialog">Cancel</Button>`}
+        </DialogFooter>`
+  : figma.code``;
+
+export default {
+  example: figma.code`
+    <Button variant="outline" command="show-modal" commandfor="dialog">Open</Button>
+    <DialogContent id="dialog"${showClose ? "" : figma.code` showCloseButton={false}`}>
+        ${showMedia ? figma.code`<img src="/image.jpg" alt="" className="aspect-video object-cover" />` : ""}
+        ${header}
+        ${content.length ? content : "…"}
+        ${footer}
+    </DialogContent>
+  `,
+  imports: [
+    'import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "dialog",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,69 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4468-100
+// source=registry/src/ui/drawer/drawer.tsx
+// component=Drawer
+// Code Connect template (v2, parserless). Spec: components/drawer/spec.md. React only (ADR-0030); WordPress and Shopify
+// have no Drawer template: their counterpart is Sheet.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const direction = instance.getEnum("Direction", { down: "down", up: "up", left: "left", right: "right" });
+const showHandle = instance.getBoolean("Show Handle");
+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") : "";
+
+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`
+        <DrawerHeader>
+          <DrawerTitle>${title}</DrawerTitle>
+          ${description ? figma.code`<DrawerDescription>${description}</DrawerDescription>` : ""}
+        </DrawerHeader>`
+  : figma.code``;
+const footer = showFooter
+  ? figma.code`
+        <DrawerFooter>
+          ${actions.length ? actions : figma.code`<DrawerClose render={<Button variant="outline" />}>Cancel</DrawerClose>`}
+        </DrawerFooter>`
+  : figma.code``;
+
+export default {
+  example: figma.code`
+    <Drawer${direction !== "down" ? figma.code` swipeDirection="${direction}"` : ""}${showHandle ? " showSwipeHandle" : ""}>
+      <DrawerTrigger render={<Button variant="outline" />}>Open</DrawerTrigger>
+      <DrawerContent>
+        ${header}
+        <div className="p-4">${content.length ? content : "…"}</div>
+        ${footer}
+      </DrawerContent>
+    </Drawer>
+  `,
+  imports: [
+    'import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "drawer",
+  metadata: { nestable: true },
+};

package/templates/code-connect/dropdown-menu-checkbox-item.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4518-98
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuCheckboxItem
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+// State focus is the highlight (runtime); State disabled is the disabled prop. Checked is the uncontrolled defaultChecked.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const checked = instance.getBoolean("Checked");
+const disabled = instance.getEnum("State", { default: false, focus: false, disabled: true }) === true;
+const inset = instance.getBoolean("Inset");
+
+export default {
+  example: figma.code`<DropdownMenuCheckboxItem${checked ? " defaultChecked" : ""}${inset ? " inset" : ""}${disabled ? " disabled" : ""}>${label}</DropdownMenuCheckboxItem>`,
+  imports: ['import { DropdownMenuCheckboxItem } from "@/components/ui/dropdown-menu"'],
+  id: "dropdown-menu-checkbox-item",
+  metadata: { nestable: true },
+};

package/templates/code-connect/dropdown-menu-item.figma.ts

@@ -0,0 +1,25 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4518-64
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuItem
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+// State focus is the highlight, a runtime state, so it maps to nothing; State disabled is the disabled prop.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const destructive = instance.getEnum("Variant", { default: false, destructive: true }) === true;
+const disabled = instance.getEnum("State", { default: false, focus: false, disabled: true }) === true;
+const inset = instance.getBoolean("Inset");
+const shortcut = instance.getBoolean("Show Shortcut") ? instance.getString("Shortcut") : "";
+const icon = instance.getBoolean("Show Icon");
+
+const props = [destructive ? ` variant="destructive"` : "", inset ? " inset" : "", disabled ? " disabled" : ""].join("");
+export default {
+  example: figma.code`<DropdownMenuItem${props}>${icon ? figma.code`<Icon name="…" />` : ""}${label}${shortcut ? figma.code`<DropdownMenuShortcut>${shortcut}</DropdownMenuShortcut>` : ""}</DropdownMenuItem>`,
+  imports: [
+    'import { DropdownMenuItem, DropdownMenuShortcut } from "@/components/ui/dropdown-menu"',
+    ...(icon ? ['import { Icon } from "@/components/ui/icon"'] : []),
+  ],
+  id: "dropdown-menu-item",
+  metadata: { nestable: true },
+};

package/templates/code-connect/dropdown-menu-label.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1203-10
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuLabel
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const inset = instance.getBoolean("Inset");
+
+export default {
+  example: figma.code`<DropdownMenuLabel${inset ? " inset" : ""}>${label}</DropdownMenuLabel>`,
+  imports: ['import { DropdownMenuLabel } from "@/components/ui/dropdown-menu"'],
+  id: "dropdown-menu-label",
+  metadata: { nestable: true },
+};

package/templates/code-connect/dropdown-menu-radio-item.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4518-132
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuRadioItem
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+// State focus is the highlight (runtime); State disabled is the disabled prop. A radio item sits in a DropdownMenuRadioGroup,
+// whose value (or defaultValue) decides which is checked.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const disabled = instance.getEnum("State", { default: false, focus: false, disabled: true }) === true;
+const inset = instance.getBoolean("Inset");
+
+export default {
+  example: figma.code`<DropdownMenuRadioItem${` value="${label.toLowerCase().replace(/\s+/g, "-")}"`}${inset ? " inset" : ""}${disabled ? " disabled" : ""}>${label}</DropdownMenuRadioItem>`,
+  imports: ['import { DropdownMenuRadioItem } from "@/components/ui/dropdown-menu"'],
+  id: "dropdown-menu-radio-item",
+  metadata: { nestable: true },
+};

package/templates/code-connect/dropdown-menu-separator.figma.ts

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

package/templates/code-connect/dropdown-menu-sub-trigger.figma.ts

@@ -0,0 +1,22 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4518-164
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuSub
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+// The Sub Trigger is drawn alone; code is the submenu around it. State open is runtime.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+const label = instance.getString("Label");
+const inset = instance.getBoolean("Inset");
+
+export default {
+  example: figma.code`<DropdownMenuSub>
+  <DropdownMenuSubTrigger${inset ? " inset" : ""}>${label}</DropdownMenuSubTrigger>
+  <DropdownMenuPortal>
+    <DropdownMenuSubContent>…</DropdownMenuSubContent>
+  </DropdownMenuPortal>
+</DropdownMenuSub>`,
+  imports: ['import { DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger } from "@/components/ui/dropdown-menu"'],
+  id: "dropdown-menu-sub-trigger",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,44 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=484-16
+// source=registry/src/ui/dropdown-menu/dropdown-menu.tsx
+// component=DropdownMenuContent
+// Code Connect template (v2, parserless). Spec: components/dropdown-menu/spec.md.
+// Figma draws the open panel; code is the whole menu, so the snippet adds the root and an unstyled trigger rendered
+// as a Button. The Menu slot's rows render their own templates.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+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 rows = (slot("Menu")?.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`
+    <DropdownMenu>
+      <DropdownMenuTrigger render={<Button variant="outline" />}>Open</DropdownMenuTrigger>
+      <DropdownMenuContent>
+        ${rows}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  `,
+  imports: [
+    'import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"',
+    'import { Button } from "@/components/ui/button"',
+  ],
+  id: "dropdown-menu",
+  metadata: { nestable: true },
+};

package/templates/code-connect/field-horizontal.figma.ts

@@ -0,0 +1,73 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=4294-300
+// source=registry/src/ui/field/field.tsx
+// component=Field
+// Code Connect template (v2, parserless). Spec: components/field/spec.md.
+//
+// `Field/Horizontal`, the other half of the split made on 2026-09-28. One code component, two Figma sets: the
+// anatomy differs enough that a single set carried eight variants nobody could select. Orientation is fixed
+// here, so it is emitted as a literal rather than read from an axis.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Which side the control sits on. In code this is child order, not a prop: a checkbox or radio row puts the
+// control before the label (upstream's own checkbox-group and radio-group demos), a switch or choice card puts
+// it after (upstream's choice-card demo). Figma cannot reorder children, so it is an axis.
+const controlPlacement = instance.getEnum("Control Placement", { left: "left", right: "right" });
+const controlFirst = controlPlacement === "left";
+
+const state = instance.getEnum("State", { default: "default", invalid: "invalid" });
+const isInvalid = state === "invalid";
+
+const label = instance.getString("Label");
+const description = instance.getString("Description");
+const error = instance.getString("Error");
+const showDescription = instance.getBoolean("Show Description");
+const showError = instance.getBoolean("Show Error");
+
+// Same Control swap as the vertical set, with the same eight preferred values. The property ids differ between
+// the two sets because Figma re-issues them when a variant leaves a set, but Code Connect reads properties by
+// name, so both templates are written identically.
+let control;
+const controlInstance = (instance.children || []).filter((c) => c.type === "INSTANCE")[0];
+if (controlInstance) {
+  try {
+    control = controlInstance.executeTemplate().example;
+  } catch (e) {
+    control = undefined;
+  }
+}
+
+const descriptionCode = showDescription ? figma.code`<FieldDescription>${description}</FieldDescription>` : "";
+const errorCode = showError ? figma.code`<FieldError>${error}</FieldError>` : "";
+const controlCode = control ? figma.code`${control}` : figma.code`<Input id="field" />`;
+
+// The label, description and error stack together in a FieldContent column; the control sits beside it on
+// whichever side the axis says. FieldContent is what makes only the text side grow.
+const content = figma.code`
+      <FieldContent>
+        <FieldLabel htmlFor="field">${label}</FieldLabel>
+        ${descriptionCode}
+        ${errorCode}
+      </FieldContent>`;
+
+const example = controlFirst
+  ? figma.code`
+    <Field orientation="horizontal"${isInvalid ? " data-invalid" : ""}>
+      ${controlCode}${content}
+    </Field>
+  `
+  : figma.code`
+    <Field orientation="horizontal"${isInvalid ? " data-invalid" : ""}>${content}
+      ${controlCode}
+    </Field>
+  `;
+
+export default {
+  example,
+  imports: [
+    'import { Field, FieldContent, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"',
+    'import { Input } from "@/components/ui/input"',
+  ],
+  id: "field-horizontal",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,68 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=2040-34976
+// source=registry/src/ui/field/field.tsx
+// component=Field
+// Code Connect template (v2, parserless). Spec: components/field/spec.md.
+// Figma property VALUES are lower-kebab and identical to the code enums, so every getEnum map is an identity map.
+//
+// This template covers `Field/Vertical` only. The set was split on 2026-09-28: vertical and horizontal Field
+// have genuinely different anatomy (horizontal wraps label + description in a FieldContent column, vertical
+// does not), and keeping them as one set meant half its variants were combinations nobody could use. The
+// horizontal half lives in field-horizontal.figma.ts. This node id is the original set's, so this mapping
+// survived the split untouched.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// Figma cannot reorder children, so placement is a variant axis. In code it is simply where FieldDescription
+// sits in the JSX, which is why this maps to order rather than to a prop.
+const placement = instance.getEnum("Description Placement", {
+  "under-label": "under-label",
+  "under-input": "under-input",
+});
+const state = instance.getEnum("State", { default: "default", invalid: "invalid" });
+const isInvalid = state === "invalid";
+
+const label = instance.getString("Label");
+const description = instance.getString("Description");
+const error = instance.getString("Error");
+const showDescription = instance.getBoolean("Show Description");
+const showError = instance.getBoolean("Show Error");
+
+// The Control swap holds the real control (Input, Input Group, Input OTP, Select, Textarea, Checkbox, Radio or
+// Switch). The layer is named after whichever component is swapped in, never "Control", so it is found by type
+// rather than by name. Render that component's own Code Connect template; fall back to a bare <Input /> for
+// controls whose template has not shipped yet, so the snippet stays useful instead of dropping the control.
+let control;
+const controlInstance = (instance.children || []).filter((c) => c.type === "INSTANCE")[0];
+if (controlInstance) {
+  try {
+    control = controlInstance.executeTemplate().example;
+  } catch (e) {
+    control = undefined;
+  }
+}
+
+const descriptionCode = showDescription ? figma.code`<FieldDescription>${description}</FieldDescription>` : "";
+const errorCode = showError ? figma.code`<FieldError>${error}</FieldError>` : "";
+const controlCode = control ? figma.code`${control}` : figma.code`<Input id="field" />`;
+
+// Vertical is the code default, so no orientation prop is emitted. Label, control, description and error are
+// siblings; the description's position is the one thing the axis decides.
+const example = figma.code`
+  <Field${isInvalid ? " data-invalid" : ""}>
+    <FieldLabel htmlFor="field">${label}</FieldLabel>
+    ${placement === "under-label" ? descriptionCode : ""}
+    ${controlCode}
+    ${placement === "under-input" ? descriptionCode : ""}
+    ${errorCode}
+  </Field>
+`;
+
+export default {
+  example,
+  imports: [
+    'import { Field, FieldLabel, FieldDescription, FieldError } from "@/components/ui/field"',
+    'import { Input } from "@/components/ui/input"',
+  ],
+  id: "field",
+  metadata: { nestable: true },
+};

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

@@ -0,0 +1,41 @@
+// url=https://www.figma.com/design/ba28zZ49PAkXhE7PW5kyT9/Design-System?node-id=1942-39787
+// source=registry/src/ui/hover-card/hover-card.tsx
+// component=HoverCardContent
+// Code Connect template (v2, parserless). Spec: components/hover-card/spec.md.
+// Figma draws the shown card; code is the whole composition, so the snippet includes its trigger (an <a> by default).
+// Server components with explicit ids (ADR-0033): HoverCardTrigger points at the card with interestfor.
+import figma from "figma";
+const instance = figma.selectedInstance;
+
+// 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);
+
+export default {
+  example: figma.code`
+    <HoverCardTrigger interestfor="hover-card" href="#">Hover here</HoverCardTrigger>
+    <HoverCardContent id="hover-card">
+      ${content.length ? content : figma.code`<p>…</p>`}
+    </HoverCardContent>
+  `,
+  imports: ['import { HoverCardContent, HoverCardTrigger } from "@/components/ui/hover-card"'],
+  id: "hover-card",
+  metadata: { nestable: true },
+};