@sarjallab09/figma-intelligence 1.0.0

package/figma-intelligence-layer/src/shared/component-templates.ts

@@ -0,0 +1,2767 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// Component Templates (Blueprints)
+// Data-driven definitions for 51 professional component stubs with internal
+// node trees, auto-layout, variant properties, and semantic token bindings.
+// All dimensions on 4px/8px grid.
+// ─────────────────────────────────────────────────────────────────────────────
+
+export type NodeKind = "frame" | "text" | "rect" | "ellipse" | "vector";
+
+export type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface IconSlot {
+  /** Default icon name from the catalog (e.g. "icon/action/search") */
+  defaultIcon?: string;
+  /** Whether the slot is required or optional */
+  required: boolean;
+  /** Default size preset */
+  size?: IconSize;
+  /** Color semantic token override */
+  colorToken?: string;
+  /** Whether icon is decorative (aria-hidden) */
+  decorative?: boolean;
+}
+
+export interface BlueprintNode {
+  name: string;
+  kind: NodeKind;
+  width?: number;
+  height?: number;
+
+  // Auto-layout
+  layoutMode?: "HORIZONTAL" | "VERTICAL" | "NONE";
+  paddingX?: number;
+  paddingY?: number;
+  itemSpacing?: number;
+  primaryAxisAlign?: "MIN" | "CENTER" | "MAX" | "SPACE_BETWEEN";
+  counterAxisAlign?: "MIN" | "CENTER" | "MAX";
+  primaryAxisSizing?: "AUTO" | "FIXED";
+  counterAxisSizing?: "AUTO" | "FIXED";
+
+  // Appearance
+  cornerRadius?: number;
+  fillSemantic?: string;       // semantic token name for fill
+  strokeSemantic?: string;     // semantic token name for stroke
+  strokeWeight?: number;
+  opacity?: number;
+  effects?: Array<{
+    type: "DROP_SHADOW";
+    color: { r: number; g: number; b: number; a: number };
+    offset: { x: number; y: number };
+    radius: number;
+    spread: number;
+  }>;
+
+  // Text-specific
+  textContent?: string;
+  textPreset?: string;          // typography preset name (e.g. "label/md")
+  textFillSemantic?: string;    // semantic token for text fill
+
+  // Icon slot — marks this node as an icon placeholder with swap metadata
+  iconSlot?: IconSlot;
+
+  // Children
+  children?: BlueprintNode[];
+}
+
+export interface VariantProperty {
+  name: string;
+  values: string[];
+  defaultValue: string;
+}
+
+export interface ComponentBlueprint {
+  name: string;
+  category: "core" | "forms" | "navigation" | "data" | "feedback" | "overlay" | "layout";
+  description: string;
+  root: BlueprintNode;
+  variantProperties: VariantProperty[];
+  tokenBindings: Array<{
+    nodePath: string;       // dot-separated path to child (e.g. "label")
+    property: "fills" | "strokes" | "cornerRadius" | "paddingLeft";
+    semanticToken: string;
+  }>;
+  /** Icon slots exposed as swappable properties */
+  iconSlots?: Array<{
+    nodePath: string;       // path to the icon slot node
+    propName: string;       // property name for the swap
+    defaultIcon?: string;   // default icon from catalog
+    required: boolean;
+  }>;
+}
+
+// ─── Component definitions ──────────────────────────────────────────────────
+
+const BUTTON: ComponentBlueprint = {
+  name: "Button",
+  category: "core",
+  description: "Primary interactive button with icon slot and label",
+  root: {
+    name: "Button",
+    kind: "frame",
+    width: 120,
+    height: 40,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 16,
+    paddingY: 8,
+    itemSpacing: 8,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/actions/primary/bg/default",
+    children: [
+      {
+        name: "Icon",
+        kind: "frame",
+        width: 16,
+        height: 16,
+        fillSemantic: "color/semantic/icon/inverse",
+        iconSlot: { defaultIcon: "icon/action/add", required: false, size: "xs", colorToken: "color/semantic/icon/inverse", decorative: true },
+      },
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Button",
+        textPreset: "label/md",
+        textFillSemantic: "color/semantic/text/on-color",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State",  values: ["Default", "Hover", "Pressed", "Focused", "Disabled", "Loading"], defaultValue: "Default" },
+    { name: "Size",   values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Type",   values: ["Primary", "Secondary", "Ghost", "Destructive"], defaultValue: "Primary" },
+  ],
+  tokenBindings: [
+    { nodePath: "",      property: "fills",        semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "",      property: "cornerRadius",  semanticToken: "radius/semantic/control/default" },
+    { nodePath: "Label", property: "fills",         semanticToken: "color/semantic/text/on-color" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "leadingIcon", defaultIcon: "icon/action/add", required: false },
+  ],
+};
+
+const INPUT: ComponentBlueprint = {
+  name: "Input",
+  category: "forms",
+  description: "Text input field with label, icon slot, and trailing action",
+  root: {
+    name: "Input",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Label",
+        textPreset: "label/sm",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+      {
+        name: "Field",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "MIN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        paddingX: 12,
+        paddingY: 8,
+        itemSpacing: 8,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          {
+            name: "LeadingIcon",
+            kind: "frame",
+            width: 16,
+            height: 16,
+            fillSemantic: "color/semantic/icon/secondary",
+            iconSlot: { defaultIcon: "icon/action/search", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true },
+          },
+          {
+            name: "Value",
+            kind: "text",
+            textContent: "Placeholder text",
+            textPreset: "body/md",
+            textFillSemantic: "color/semantic/text/tertiary",
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Default", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+    { name: "Size",  values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "Field", property: "fills",       semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Field", property: "strokes",     semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "Field", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Field.LeadingIcon", propName: "leadingIcon", defaultIcon: "icon/action/search", required: false },
+  ],
+};
+
+const SELECT: ComponentBlueprint = {
+  name: "Select",
+  category: "forms",
+  description: "Dropdown select with chevron indicator",
+  root: {
+    name: "Select",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Label",
+        textPreset: "label/sm",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+      {
+        name: "Field",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        paddingX: 12,
+        paddingY: 8,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          {
+            name: "Value",
+            kind: "text",
+            textContent: "Select option",
+            textPreset: "body/md",
+            textFillSemantic: "color/semantic/text/tertiary",
+          },
+          {
+            name: "Chevron",
+            kind: "frame",
+            width: 16,
+            height: 16,
+            fillSemantic: "color/semantic/icon/secondary",
+            iconSlot: { defaultIcon: "icon/navigation/expand-more", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true },
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Default", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+    { name: "Size",  values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [],
+  iconSlots: [
+    { nodePath: "Field.Chevron", propName: "chevronIcon", defaultIcon: "icon/navigation/expand-more", required: true },
+  ],
+};
+
+const CHECKBOX: ComponentBlueprint = {
+  name: "Checkbox",
+  category: "forms",
+  description: "Checkbox with label",
+  root: {
+    name: "Checkbox",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 8,
+    counterAxisAlign: "CENTER",
+    children: [
+      {
+        name: "Box",
+        kind: "frame",
+        width: 16,
+        height: 16,
+        cornerRadius: 4,
+        strokeSemantic: "color/semantic/border/default",
+        strokeWeight: 1.5,
+        fillSemantic: "color/semantic/field/bg/default",
+      },
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Checkbox label",
+        textPreset: "body/md",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Default", "Checked", "Indeterminate", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [],
+};
+
+const TOGGLE: ComponentBlueprint = {
+  name: "Toggle",
+  category: "forms",
+  description: "Toggle switch with track and thumb",
+  root: {
+    name: "Toggle",
+    kind: "frame",
+    width: 40,
+    height: 24,
+    cornerRadius: 12,
+    fillSemantic: "color/semantic/border/default",
+    children: [
+      {
+        name: "Thumb",
+        kind: "ellipse",
+        width: 20,
+        height: 20,
+        fillSemantic: "color/semantic/surface/default",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Off", "On", "Disabled"], defaultValue: "Off" },
+  ],
+  tokenBindings: [],
+};
+
+const RADIO: ComponentBlueprint = {
+  name: "Radio",
+  category: "forms",
+  description: "Radio button with label",
+  root: {
+    name: "Radio",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 8,
+    counterAxisAlign: "CENTER",
+    children: [
+      {
+        name: "Circle",
+        kind: "ellipse",
+        width: 16,
+        height: 16,
+        strokeSemantic: "color/semantic/border/default",
+        strokeWeight: 1.5,
+        fillSemantic: "color/semantic/field/bg/default",
+      },
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Radio label",
+        textPreset: "body/md",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Default", "Selected", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [],
+};
+
+const CARD: ComponentBlueprint = {
+  name: "Card",
+  category: "core",
+  description: "Content card with media slot, heading, body, and footer",
+  root: {
+    name: "Card",
+    kind: "frame",
+    width: 320,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    cornerRadius: 12,
+    fillSemantic: "color/semantic/surface/raised",
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "Media",
+        kind: "rect",
+        width: 320,
+        height: 180,
+        fillSemantic: "color/semantic/surface/subtle",
+      },
+      {
+        name: "Content",
+        kind: "frame",
+        layoutMode: "VERTICAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 16,
+        itemSpacing: 8,
+        children: [
+          {
+            name: "Heading",
+            kind: "text",
+            textContent: "Card Title",
+            textPreset: "heading/h4",
+            textFillSemantic: "color/semantic/text/primary",
+          },
+          {
+            name: "Body",
+            kind: "text",
+            textContent: "Card description text goes here with supporting details.",
+            textPreset: "body/md",
+            textFillSemantic: "color/semantic/text/secondary",
+          },
+        ],
+      },
+      {
+        name: "Footer",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 12,
+        itemSpacing: 8,
+        primaryAxisAlign: "MAX",
+        children: [
+          {
+            name: "Action",
+            kind: "text",
+            textContent: "Learn more",
+            textPreset: "label/md",
+            textFillSemantic: "color/semantic/actions/primary/bg/default",
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size",     values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Elevated", values: ["true", "false"], defaultValue: "false" },
+  ],
+  tokenBindings: [
+    { nodePath: "",        property: "fills",        semanticToken: "color/semantic/surface/raised" },
+    { nodePath: "",        property: "strokes",      semanticToken: "color/semantic/border/default" },
+    { nodePath: "",        property: "cornerRadius",  semanticToken: "radius/semantic/surface/default" },
+  ],
+};
+
+const MODAL: ComponentBlueprint = {
+  name: "Modal",
+  category: "overlay",
+  description: "Dialog modal with header, content, and footer buttons",
+  root: {
+    name: "Modal",
+    kind: "frame",
+    width: 480,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    cornerRadius: 16,
+    fillSemantic: "color/semantic/surface/overlay",
+    effects: [{
+      type: "DROP_SHADOW",
+      color: { r: 0, g: 0, b: 0, a: 0.12 },
+      offset: { x: 0, y: 8 },
+      radius: 24,
+      spread: 0,
+    }],
+    children: [
+      {
+        name: "Header",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 24,
+        paddingY: 20,
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        children: [
+          {
+            name: "Title",
+            kind: "text",
+            textContent: "Modal Title",
+            textPreset: "heading/h4",
+            textFillSemantic: "color/semantic/text/primary",
+          },
+          {
+            name: "CloseBtn",
+            kind: "frame",
+            width: 24,
+            height: 24,
+            cornerRadius: 4,
+            fillSemantic: "color/semantic/surface/subtle",
+          },
+        ],
+      },
+      {
+        name: "Content",
+        kind: "frame",
+        layoutMode: "VERTICAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 24,
+        paddingY: 16,
+        itemSpacing: 12,
+        children: [
+          {
+            name: "Body",
+            kind: "text",
+            textContent: "Modal content goes here. This is a placeholder for the dialog body.",
+            textPreset: "body/md",
+            textFillSemantic: "color/semantic/text/secondary",
+          },
+        ],
+      },
+      {
+        name: "Footer",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 24,
+        paddingY: 16,
+        itemSpacing: 12,
+        primaryAxisAlign: "MAX",
+        children: [
+          {
+            name: "SecondaryBtn",
+            kind: "frame",
+            width: 80,
+            height: 36,
+            cornerRadius: 8,
+            layoutMode: "HORIZONTAL",
+            primaryAxisAlign: "CENTER",
+            counterAxisAlign: "CENTER",
+            strokeSemantic: "color/semantic/border/default",
+            strokeWeight: 1,
+            fillSemantic: "color/semantic/surface/default",
+            children: [{
+              name: "SecondaryLabel",
+              kind: "text",
+              textContent: "Cancel",
+              textPreset: "label/md",
+              textFillSemantic: "color/semantic/text/primary",
+            }],
+          },
+          {
+            name: "PrimaryBtn",
+            kind: "frame",
+            width: 80,
+            height: 36,
+            cornerRadius: 8,
+            layoutMode: "HORIZONTAL",
+            primaryAxisAlign: "CENTER",
+            counterAxisAlign: "CENTER",
+            fillSemantic: "color/semantic/actions/primary/bg/default",
+            children: [{
+              name: "PrimaryLabel",
+              kind: "text",
+              textContent: "Confirm",
+              textPreset: "label/md",
+              textFillSemantic: "color/semantic/text/on-color",
+            }],
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [],
+};
+
+const TOAST: ComponentBlueprint = {
+  name: "Toast",
+  category: "feedback",
+  description: "Notification toast with status icon, message, and close button",
+  root: {
+    name: "Toast",
+    kind: "frame",
+    width: 360,
+    height: 56,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "MIN",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    paddingX: 16,
+    paddingY: 12,
+    itemSpacing: 12,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/feedback/success/bg",
+    children: [
+      {
+        name: "StatusIcon",
+        kind: "frame",
+        width: 20,
+        height: 20,
+        fillSemantic: "color/semantic/feedback/success/text",
+        iconSlot: { defaultIcon: "icon/status/info", required: true, size: "sm", colorToken: "color/semantic/feedback/success/text", decorative: false },
+      },
+      {
+        name: "Message",
+        kind: "text",
+        textContent: "Operation completed successfully.",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/feedback/success/text",
+      },
+      {
+        name: "CloseIcon",
+        kind: "frame",
+        width: 16,
+        height: 16,
+        fillSemantic: "color/semantic/icon/secondary",
+        iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false },
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["Success", "Warning", "Error", "Info"], defaultValue: "Success" },
+  ],
+  tokenBindings: [],
+  iconSlots: [
+    { nodePath: "StatusIcon", propName: "statusIcon", defaultIcon: "icon/status/info", required: true },
+    { nodePath: "CloseIcon", propName: "closeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const BADGE: ComponentBlueprint = {
+  name: "Badge",
+  category: "core",
+  description: "Status badge with label",
+  root: {
+    name: "Badge",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    paddingX: 8,
+    paddingY: 2,
+    cornerRadius: 9999,
+    fillSemantic: "color/semantic/actions/primary/bg/default",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    children: [
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Badge",
+        textPreset: "label/sm",
+        textFillSemantic: "color/semantic/text/on-color",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["Default", "Success", "Warning", "Error", "Info"], defaultValue: "Default" },
+    { name: "Size", values: ["sm", "md"], defaultValue: "sm" },
+  ],
+  tokenBindings: [],
+};
+
+const AVATAR: ComponentBlueprint = {
+  name: "Avatar",
+  category: "core",
+  description: "Avatar with image placeholder and status indicator",
+  root: {
+    name: "Avatar",
+    kind: "frame",
+    width: 40,
+    height: 40,
+    cornerRadius: 9999,
+    fillSemantic: "color/semantic/surface/subtle",
+    children: [
+      {
+        name: "Initials",
+        kind: "text",
+        textContent: "AB",
+        textPreset: "label/md",
+        textFillSemantic: "color/semantic/text/secondary",
+      },
+      {
+        name: "StatusDot",
+        kind: "ellipse",
+        width: 10,
+        height: 10,
+        fillSemantic: "color/semantic/feedback/success/text",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg", "xl"], defaultValue: "md" },
+  ],
+  tokenBindings: [],
+};
+
+const TOOLTIP: ComponentBlueprint = {
+  name: "Tooltip",
+  category: "overlay",
+  description: "Tooltip with content text and arrow",
+  root: {
+    name: "Tooltip",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    paddingX: 12,
+    paddingY: 8,
+    cornerRadius: 6,
+    fillSemantic: "color/semantic/surface/inverse",
+    children: [
+      {
+        name: "Content",
+        kind: "text",
+        textContent: "Tooltip text",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/text/inverse",
+      },
+    ],
+  },
+  variantProperties: [],
+  tokenBindings: [],
+};
+
+const TABS: ComponentBlueprint = {
+  name: "Tabs",
+  category: "navigation",
+  description: "Tab bar with active indicator",
+  root: {
+    name: "Tabs",
+    kind: "frame",
+    width: 400,
+    height: 40,
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 0,
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "Tab1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 8,
+        primaryAxisAlign: "CENTER",
+        counterAxisAlign: "CENTER",
+        children: [{
+          name: "Tab1Label",
+          kind: "text",
+          textContent: "Tab One",
+          textPreset: "label/md",
+          textFillSemantic: "color/semantic/actions/primary/bg/default",
+        }],
+      },
+      {
+        name: "Tab2",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 8,
+        primaryAxisAlign: "CENTER",
+        counterAxisAlign: "CENTER",
+        children: [{
+          name: "Tab2Label",
+          kind: "text",
+          textContent: "Tab Two",
+          textPreset: "label/md",
+          textFillSemantic: "color/semantic/text/secondary",
+        }],
+      },
+      {
+        name: "Tab3",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 8,
+        primaryAxisAlign: "CENTER",
+        counterAxisAlign: "CENTER",
+        children: [{
+          name: "Tab3Label",
+          kind: "text",
+          textContent: "Tab Three",
+          textPreset: "label/md",
+          textFillSemantic: "color/semantic/text/secondary",
+        }],
+      },
+    ],
+  },
+  variantProperties: [],
+  tokenBindings: [],
+};
+
+const BREADCRUMB: ComponentBlueprint = {
+  name: "Breadcrumb",
+  category: "navigation",
+  description: "Breadcrumb navigation with separator",
+  root: {
+    name: "Breadcrumb",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 8,
+    counterAxisAlign: "CENTER",
+    children: [
+      {
+        name: "Crumb1",
+        kind: "text",
+        textContent: "Home",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/actions/primary/bg/default",
+      },
+      {
+        name: "Sep1",
+        kind: "text",
+        textContent: "/",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/text/tertiary",
+      },
+      {
+        name: "Crumb2",
+        kind: "text",
+        textContent: "Category",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/actions/primary/bg/default",
+      },
+      {
+        name: "Sep2",
+        kind: "text",
+        textContent: "/",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/text/tertiary",
+      },
+      {
+        name: "Current",
+        kind: "text",
+        textContent: "Current Page",
+        textPreset: "body/sm",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+    ],
+  },
+  variantProperties: [],
+  tokenBindings: [],
+};
+
+const TAG: ComponentBlueprint = {
+  name: "Tag",
+  category: "core",
+  description: "Tag/chip with optional icon and remove button",
+  root: {
+    name: "Tag",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    paddingX: 8,
+    paddingY: 4,
+    itemSpacing: 4,
+    cornerRadius: 6,
+    counterAxisAlign: "CENTER",
+    fillSemantic: "color/semantic/surface/subtle",
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "Label",
+        kind: "text",
+        textContent: "Tag",
+        textPreset: "label/sm",
+        textFillSemantic: "color/semantic/text/primary",
+      },
+      {
+        name: "RemoveIcon",
+        kind: "frame",
+        width: 12,
+        height: 12,
+        fillSemantic: "color/semantic/icon/secondary",
+        iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false },
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["Default", "Success", "Warning"], defaultValue: "Default" },
+    { name: "Removable", values: ["true", "false"], defaultValue: "true" },
+  ],
+  tokenBindings: [],
+  iconSlots: [
+    { nodePath: "RemoveIcon", propName: "removeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const NAVBAR: ComponentBlueprint = {
+  name: "NavBar",
+  category: "navigation",
+  description: "Top navigation bar with logo, nav items, and actions",
+  root: {
+    name: "NavBar",
+    kind: "frame",
+    width: 1440,
+    height: 64,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "SPACE_BETWEEN",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    paddingX: 32,
+    paddingY: 16,
+    fillSemantic: "color/semantic/surface/default",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "Logo",
+        kind: "frame",
+        width: 120,
+        height: 32,
+        fillSemantic: "color/semantic/actions/primary/bg/default",
+        cornerRadius: 4,
+      },
+      {
+        name: "NavItems",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        itemSpacing: 24,
+        children: [
+          { name: "Nav1", kind: "text", textContent: "Dashboard", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Nav2", kind: "text", textContent: "Projects", textPreset: "label/md", textFillSemantic: "color/semantic/text/secondary" },
+          { name: "Nav3", kind: "text", textContent: "Settings", textPreset: "label/md", textFillSemantic: "color/semantic/text/secondary" },
+        ],
+      },
+      {
+        name: "Actions",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        itemSpacing: 12,
+        counterAxisAlign: "CENTER",
+        children: [
+          {
+            name: "AvatarSlot",
+            kind: "ellipse",
+            width: 32,
+            height: 32,
+            fillSemantic: "color/semantic/surface/subtle",
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [],
+  tokenBindings: [],
+};
+
+const TABLE: ComponentBlueprint = {
+  name: "Table",
+  category: "data",
+  description: "Data table with header row and body rows",
+  root: {
+    name: "Table",
+    kind: "frame",
+    width: 800,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/surface/default",
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "HeaderRow",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 12,
+        fillSemantic: "color/semantic/surface/subtle",
+        children: [
+          { name: "Col1H", kind: "text", textContent: "Name", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary", width: 200 },
+          { name: "Col2H", kind: "text", textContent: "Status", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary", width: 120 },
+          { name: "Col3H", kind: "text", textContent: "Date", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary", width: 120 },
+          { name: "Col4H", kind: "text", textContent: "Actions", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary", width: 100 },
+        ],
+      },
+      {
+        name: "Row1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 12,
+        strokeSemantic: "color/semantic/border/subtle",
+        strokeWeight: 1,
+        children: [
+          { name: "Col1R1", kind: "text", textContent: "Item name", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary", width: 200 },
+          { name: "Col2R1", kind: "text", textContent: "Active", textPreset: "body/sm", textFillSemantic: "color/semantic/feedback/success/text", width: 120 },
+          { name: "Col3R1", kind: "text", textContent: "Mar 21, 2026", textPreset: "body/sm", textFillSemantic: "color/semantic/text/secondary", width: 120 },
+          { name: "Col4R1", kind: "text", textContent: "Edit", textPreset: "body/sm", textFillSemantic: "color/semantic/actions/primary/bg/default", width: 100 },
+        ],
+      },
+      {
+        name: "Row2",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        paddingX: 16,
+        paddingY: 12,
+        fillSemantic: "color/semantic/surface/subtle",
+        children: [
+          { name: "Col1R2", kind: "text", textContent: "Another item", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary", width: 200 },
+          { name: "Col2R2", kind: "text", textContent: "Pending", textPreset: "body/sm", textFillSemantic: "color/semantic/feedback/warning/text", width: 120 },
+          { name: "Col3R2", kind: "text", textContent: "Mar 20, 2026", textPreset: "body/sm", textFillSemantic: "color/semantic/text/secondary", width: 120 },
+          { name: "Col4R2", kind: "text", textContent: "Edit", textPreset: "body/sm", textFillSemantic: "color/semantic/actions/primary/bg/default", width: 100 },
+        ],
+      },
+    ],
+  },
+  variantProperties: [],
+  tokenBindings: [],
+};
+
+// ─── Batch 1: Gap-fill blueprints ───────────────────────────────────────────
+
+const ACCORDION: ComponentBlueprint = {
+  name: "Accordion",
+  category: "data",
+  description: "Expandable content sections with header triggers",
+  root: {
+    name: "Accordion",
+    kind: "frame",
+    width: 400,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    cornerRadius: 8,
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "Item1",
+        kind: "frame",
+        layoutMode: "VERTICAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        children: [
+          {
+            name: "Header",
+            kind: "frame",
+            layoutMode: "HORIZONTAL",
+            primaryAxisAlign: "SPACE_BETWEEN",
+            counterAxisAlign: "CENTER",
+            primaryAxisSizing: "AUTO",
+            counterAxisSizing: "FIXED",
+            height: 48,
+            paddingX: 16,
+            paddingY: 12,
+            fillSemantic: "color/semantic/surface/default",
+            children: [
+              { name: "Title", kind: "text", textContent: "Section title", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+              { name: "Chevron", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/navigation/expand-more", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+            ],
+          },
+          {
+            name: "Content",
+            kind: "frame",
+            layoutMode: "VERTICAL",
+            primaryAxisSizing: "AUTO",
+            counterAxisSizing: "AUTO",
+            paddingX: 16,
+            paddingY: 12,
+            children: [
+              { name: "Body", kind: "text", textContent: "Accordion content goes here. This area expands and collapses.", textPreset: "body/sm", textFillSemantic: "color/semantic/text/secondary" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Collapsed", "Expanded"], defaultValue: "Collapsed" },
+    { name: "Type", values: ["Default", "Bordered", "Flush"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Item1.Header", property: "fills", semanticToken: "color/semantic/surface/default" },
+    { nodePath: "Item1.Header.Title", property: "fills", semanticToken: "color/semantic/text/primary" },
+  ],
+  iconSlots: [
+    { nodePath: "Item1.Header.Chevron", propName: "chevronIcon", defaultIcon: "icon/navigation/expand-more", required: true },
+  ],
+};
+
+const SLIDER: ComponentBlueprint = {
+  name: "Slider",
+  category: "forms",
+  description: "Range input control with track, fill, and draggable thumb",
+  root: {
+    name: "Slider",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 8,
+    children: [
+      {
+        name: "LabelRow",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        children: [
+          { name: "Label", kind: "text", textContent: "Volume", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Value", kind: "text", textContent: "50", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" },
+        ],
+      },
+      {
+        name: "TrackContainer",
+        kind: "frame",
+        height: 24,
+        layoutMode: "HORIZONTAL",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        children: [
+          { name: "Track", kind: "rect", width: 280, height: 4, cornerRadius: 2, fillSemantic: "color/semantic/border/default" },
+          { name: "Fill", kind: "rect", width: 140, height: 4, cornerRadius: 2, fillSemantic: "color/semantic/actions/primary/bg/default" },
+          { name: "Thumb", kind: "ellipse", width: 20, height: 20, fillSemantic: "color/semantic/surface/default", strokeSemantic: "color/semantic/actions/primary/bg/default", strokeWeight: 2 },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Hover", "Active", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "TrackContainer.Fill", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "TrackContainer.Thumb", property: "strokes", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "TrackContainer.Track", property: "fills", semanticToken: "color/semantic/border/default" },
+  ],
+};
+
+const ALERT: ComponentBlueprint = {
+  name: "Alert",
+  category: "feedback",
+  description: "Contextual feedback message with icon, title, body, and actions",
+  root: {
+    name: "Alert",
+    kind: "frame",
+    width: 400,
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 16,
+    paddingY: 12,
+    itemSpacing: 12,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/feedback/info/bg",
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 1,
+    children: [
+      { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/feedback/info/text", iconSlot: { defaultIcon: "icon/status/info", required: true, size: "sm", colorToken: "color/semantic/feedback/info/text", decorative: false } },
+      {
+        name: "Content",
+        kind: "frame",
+        layoutMode: "VERTICAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        itemSpacing: 4,
+        children: [
+          { name: "Title", kind: "text", textContent: "Information", textPreset: "label/md", textFillSemantic: "color/semantic/feedback/info/text" },
+          { name: "Message", kind: "text", textContent: "This is an informational alert message.", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+      { name: "Close", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false } },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["info", "success", "warning", "error"], defaultValue: "info" },
+    { name: "Dismissible", values: ["true", "false"], defaultValue: "true" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/feedback/info/bg" },
+    { nodePath: "Content.Title", property: "fills", semanticToken: "color/semantic/feedback/info/text" },
+    { nodePath: "Icon", property: "fills", semanticToken: "color/semantic/feedback/info/text" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "statusIcon", defaultIcon: "icon/status/info", required: true },
+    { nodePath: "Close", propName: "closeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const CHIP: ComponentBlueprint = {
+  name: "Chip",
+  category: "core",
+  description: "Compact interactive element for filtering, selection, or metadata display",
+  root: {
+    name: "Chip",
+    kind: "frame",
+    height: 32,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 12,
+    itemSpacing: 6,
+    cornerRadius: 16,
+    fillSemantic: "color/semantic/surface/subtle",
+    children: [
+      { name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/settings", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+      { name: "Label", kind: "text", textContent: "Chip label", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Close", kind: "frame", width: 14, height: 14, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false } },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["Filter", "Input", "Suggestion"], defaultValue: "Filter" },
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Selected", "Hover", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+    { nodePath: "", property: "cornerRadius", semanticToken: "radius/semantic/pill" },
+    { nodePath: "Label", property: "fills", semanticToken: "color/semantic/text/primary" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "leadingIcon", defaultIcon: "icon/action/settings", required: false },
+    { nodePath: "Close", propName: "closeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const PROGRESS: ComponentBlueprint = {
+  name: "Progress",
+  category: "feedback",
+  description: "Determinate or indeterminate progress indicator",
+  root: {
+    name: "Progress",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      {
+        name: "LabelRow",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        children: [
+          { name: "Label", kind: "text", textContent: "Uploading...", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Percentage", kind: "text", textContent: "65%", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" },
+        ],
+      },
+      {
+        name: "Track",
+        kind: "rect",
+        width: 280,
+        height: 8,
+        cornerRadius: 4,
+        fillSemantic: "color/semantic/surface/subtle",
+      },
+      {
+        name: "Fill",
+        kind: "rect",
+        width: 182,
+        height: 8,
+        cornerRadius: 4,
+        fillSemantic: "color/semantic/actions/primary/bg/default",
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Type", values: ["linear", "circular"], defaultValue: "linear" },
+  ],
+  tokenBindings: [
+    { nodePath: "Track", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+    { nodePath: "Fill", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const SIDENAVIGATION: ComponentBlueprint = {
+  name: "SideNavigation",
+  category: "navigation",
+  description: "Vertical sidebar navigation with collapsible sections",
+  root: {
+    name: "SideNavigation",
+    kind: "frame",
+    width: 240,
+    height: 600,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    paddingY: 16,
+    itemSpacing: 4,
+    fillSemantic: "color/semantic/surface/default",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    children: [
+      {
+        name: "SectionHeader",
+        kind: "text",
+        textContent: "MAIN",
+        textPreset: "label/sm",
+        textFillSemantic: "color/semantic/text/tertiary",
+      },
+      {
+        name: "NavItem1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        height: 40,
+        paddingX: 12,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 8,
+        cornerRadius: 8,
+        fillSemantic: "color/semantic/actions/primary/bg/default",
+        children: [
+          { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/inverse", iconSlot: { defaultIcon: "icon/navigation/home", required: true, size: "sm", colorToken: "color/semantic/icon/inverse", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Dashboard", textPreset: "label/md", textFillSemantic: "color/semantic/text/on-color" },
+        ],
+      },
+      {
+        name: "NavItem2",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        height: 40,
+        paddingX: 12,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 8,
+        cornerRadius: 8,
+        children: [
+          { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/search", required: true, size: "sm", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Projects", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+      {
+        name: "NavItem3",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        height: 40,
+        paddingX: 12,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 8,
+        cornerRadius: 8,
+        children: [
+          { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/social/person", required: true, size: "sm", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Settings", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Expanded", "Collapsed"], defaultValue: "Expanded" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+    { nodePath: "NavItem1", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+  iconSlots: [
+    { nodePath: "NavItem1.Icon", propName: "navItem1Icon", defaultIcon: "icon/navigation/home", required: true },
+    { nodePath: "NavItem2.Icon", propName: "navItem2Icon", defaultIcon: "icon/action/search", required: true },
+    { nodePath: "NavItem3.Icon", propName: "navItem3Icon", defaultIcon: "icon/social/person", required: true },
+  ],
+};
+
+const ICON: ComponentBlueprint = {
+  name: "Icon",
+  category: "core",
+  description: "SVG-based vector graphic primitive for visual communication and UI affordances",
+  root: {
+    name: "Icon",
+    kind: "frame",
+    width: 24,
+    height: 24,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    children: [
+      { name: "Vector", kind: "vector", width: 20, height: 20, fillSemantic: "color/semantic/icon/default" },
+    ],
+  },
+  variantProperties: [
+    { name: "Size",  values: ["xs", "sm", "md", "lg", "xl"], defaultValue: "md" },
+    { name: "Type",  values: ["Filled", "Outlined"], defaultValue: "Filled" },
+    { name: "Color", values: ["default", "primary", "secondary", "disabled", "inverse", "error", "success"], defaultValue: "default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Vector", property: "fills", semanticToken: "color/semantic/icon/default" },
+  ],
+  iconSlots: [],
+};
+
+const LINK: ComponentBlueprint = {
+  name: "Link",
+  category: "core",
+  description: "Navigational text element for routing between pages or external resources",
+  root: {
+    name: "Link",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Label", kind: "text", textContent: "Learn more", textPreset: "body/md", textFillSemantic: "color/semantic/actions/primary/bg/default" },
+      { name: "ExternalIcon", kind: "frame", width: 14, height: 14, fillSemantic: "color/semantic/actions/primary/bg/default", opacity: 0, iconSlot: { defaultIcon: "icon/action/open-in-new", required: false, size: "xs", colorToken: "color/semantic/actions/primary/bg/default", decorative: true } },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Type", values: ["Standalone", "Inline"], defaultValue: "Standalone" },
+    { name: "External", values: ["true", "false"], defaultValue: "false" },
+  ],
+  tokenBindings: [
+    { nodePath: "Label", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "ExternalIcon", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+  iconSlots: [
+    { nodePath: "ExternalIcon", propName: "externalIcon", defaultIcon: "icon/action/open-in-new", required: false },
+  ],
+};
+
+const MENU: ComponentBlueprint = {
+  name: "Menu",
+  category: "overlay",
+  description: "Contextual action list triggered by a button or right-click",
+  root: {
+    name: "Menu",
+    kind: "frame",
+    width: 200,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingY: 4,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/surface/raised",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.12 }, offset: { x: 0, y: 4 }, radius: 16, spread: -2 }],
+    children: [
+      {
+        name: "MenuItem1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "MIN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 36,
+        paddingX: 12,
+        itemSpacing: 8,
+        children: [
+          { name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/settings", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Edit", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Shortcut", kind: "text", textContent: "⌘E", textPreset: "body/sm", textFillSemantic: "color/semantic/text/tertiary" },
+        ],
+      },
+      {
+        name: "Divider",
+        kind: "rect",
+        height: 1,
+        fillSemantic: "color/semantic/border/subtle",
+      },
+      {
+        name: "MenuItem2",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "MIN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 36,
+        paddingX: 12,
+        itemSpacing: 8,
+        children: [
+          { name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/settings", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Delete", textPreset: "body/sm", textFillSemantic: "color/semantic/feedback/danger/text" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/raised" },
+    { nodePath: "", property: "cornerRadius", semanticToken: "radius/semantic/surface/default" },
+  ],
+  iconSlots: [
+    { nodePath: "MenuItem1.Icon", propName: "menuItem1Icon", defaultIcon: "icon/action/settings", required: false },
+    { nodePath: "MenuItem2.Icon", propName: "menuItem2Icon", defaultIcon: "icon/action/settings", required: false },
+  ],
+};
+
+const SPINNER: ComponentBlueprint = {
+  name: "Spinner",
+  category: "feedback",
+  description: "Indeterminate loading indicator with circular animation",
+  root: {
+    name: "Spinner",
+    kind: "frame",
+    width: 32,
+    height: 32,
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Track", kind: "ellipse", width: 32, height: 32, strokeSemantic: "color/semantic/border/default", strokeWeight: 3 },
+      { name: "Indicator", kind: "ellipse", width: 32, height: 32, strokeSemantic: "color/semantic/actions/primary/bg/default", strokeWeight: 3 },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["xs", "sm", "md", "lg", "xl"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "Track", property: "strokes", semanticToken: "color/semantic/border/default" },
+    { nodePath: "Indicator", property: "strokes", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+// ─── Batch 2: Tier 2 Forms ──────────────────────────────────────────────────
+
+const TEXTAREA: ComponentBlueprint = {
+  name: "Textarea",
+  category: "forms",
+  description: "Multi-line text input with label, helper text, and character counter",
+  root: {
+    name: "Textarea",
+    kind: "frame",
+    width: 320,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      { name: "Label", kind: "text", textContent: "Description", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "Field",
+        kind: "frame",
+        height: 120,
+        layoutMode: "VERTICAL",
+        primaryAxisAlign: "MIN",
+        primaryAxisSizing: "FIXED",
+        counterAxisSizing: "AUTO",
+        paddingX: 12,
+        paddingY: 8,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          { name: "Value", kind: "text", textContent: "Enter your message here...", textPreset: "body/md", textFillSemantic: "color/semantic/text/tertiary" },
+        ],
+      },
+      {
+        name: "Footer",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        children: [
+          { name: "HelperText", kind: "text", textContent: "Optional helper text", textPreset: "body/sm", textFillSemantic: "color/semantic/text/tertiary" },
+          { name: "Counter", kind: "text", textContent: "0/500", textPreset: "body/sm", textFillSemantic: "color/semantic/text/tertiary" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "State", values: ["Default", "Focused", "Filled", "Error", "Disabled", "ReadOnly"], defaultValue: "Default" },
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "Field", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Field", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "Field", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+};
+
+const SEARCH: ComponentBlueprint = {
+  name: "Search",
+  category: "forms",
+  description: "Search input with icon, clear action, and loading state",
+  root: {
+    name: "Search",
+    kind: "frame",
+    width: 320,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "MIN",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    height: 40,
+    paddingX: 12,
+    itemSpacing: 8,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/field/bg/default",
+    strokeSemantic: "color/semantic/field/border/default",
+    strokeWeight: 1,
+    children: [
+      { name: "SearchIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/search", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+      { name: "Value", kind: "text", textContent: "Search...", textPreset: "body/md", textFillSemantic: "color/semantic/text/tertiary" },
+      { name: "ClearIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", opacity: 0, iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false } },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Focused", "Searching", "Filled", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+  iconSlots: [
+    { nodePath: "SearchIcon", propName: "searchIcon", defaultIcon: "icon/action/search", required: true },
+    { nodePath: "ClearIcon", propName: "clearIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const COMBOBOX: ComponentBlueprint = {
+  name: "Combobox",
+  category: "forms",
+  description: "Text input with dropdown suggestions and autocomplete filtering",
+  root: {
+    name: "Combobox",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      { name: "Label", kind: "text", textContent: "Country", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "Field",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        paddingX: 12,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          { name: "Value", kind: "text", textContent: "Type to search...", textPreset: "body/md", textFillSemantic: "color/semantic/text/tertiary" },
+          { name: "Chevron", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/navigation/expand-more", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Open", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Field", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Field", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "Field", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Field.Chevron", propName: "chevronIcon", defaultIcon: "icon/navigation/expand-more", required: true },
+  ],
+};
+
+const DATEPICKER: ComponentBlueprint = {
+  name: "DatePicker",
+  category: "forms",
+  description: "Date selection input with calendar popup for single or range selection",
+  root: {
+    name: "DatePicker",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      { name: "Label", kind: "text", textContent: "Start date", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "Trigger",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        paddingX: 12,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          { name: "Value", kind: "text", textContent: "MM/DD/YYYY", textPreset: "body/md", textFillSemantic: "color/semantic/text/tertiary" },
+          { name: "CalendarIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/status/pending", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["single", "range"], defaultValue: "single" },
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Open", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Trigger", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Trigger", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "Trigger", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Trigger.CalendarIcon", propName: "calendarIcon", defaultIcon: "icon/status/pending", required: true },
+  ],
+};
+
+const NUMBERINPUT: ComponentBlueprint = {
+  name: "NumberInput",
+  category: "forms",
+  description: "Numeric input with increment/decrement stepper buttons",
+  root: {
+    name: "NumberInput",
+    kind: "frame",
+    width: 200,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      { name: "Label", kind: "text", textContent: "Quantity", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "Field",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          { name: "Decrement", kind: "frame", width: 32, height: 40, fillSemantic: "color/semantic/surface/subtle", cornerRadius: 6, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER" },
+          { name: "Value", kind: "text", textContent: "1", textPreset: "body/md", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Increment", kind: "frame", width: 32, height: 40, fillSemantic: "color/semantic/surface/subtle", cornerRadius: 6, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Field", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Field", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+    { nodePath: "Field", property: "cornerRadius", semanticToken: "radius/semantic/field/default" },
+  ],
+};
+
+const FORM: ComponentBlueprint = {
+  name: "Form",
+  category: "forms",
+  description: "Form container wrapping field groups with consistent layout and validation",
+  root: {
+    name: "Form",
+    kind: "frame",
+    width: 400,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 16,
+    paddingX: 24,
+    paddingY: 24,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/surface/default",
+    children: [
+      { name: "FormTitle", kind: "text", textContent: "Create account", textPreset: "label/lg", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "FieldGroup",
+        kind: "frame",
+        layoutMode: "VERTICAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        itemSpacing: 12,
+        children: [
+          { name: "Field1Placeholder", kind: "rect", width: 352, height: 64, cornerRadius: 6, strokeSemantic: "color/semantic/border/subtle", strokeWeight: 1 },
+          { name: "Field2Placeholder", kind: "rect", width: 352, height: 64, cornerRadius: 6, strokeSemantic: "color/semantic/border/subtle", strokeWeight: 1 },
+        ],
+      },
+      {
+        name: "Actions",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "MAX",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        itemSpacing: 8,
+        children: [
+          { name: "Cancel", kind: "text", textContent: "Cancel", textPreset: "label/md", textFillSemantic: "color/semantic/text/secondary" },
+          {
+            name: "Submit",
+            kind: "frame",
+            width: 100,
+            height: 40,
+            layoutMode: "HORIZONTAL",
+            primaryAxisAlign: "CENTER",
+            counterAxisAlign: "CENTER",
+            cornerRadius: 8,
+            fillSemantic: "color/semantic/actions/primary/bg/default",
+            children: [
+              { name: "SubmitLabel", kind: "text", textContent: "Submit", textPreset: "label/md", textFillSemantic: "color/semantic/text/on-color" },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Layout", values: ["Vertical", "Horizontal"], defaultValue: "Vertical" },
+    { name: "State", values: ["Default", "Submitting", "Error"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+    { nodePath: "Actions.Submit", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+// ─── Batch 3: Nav + Data + Layout ───────────────────────────────────────────
+
+const PAGINATION: ComponentBlueprint = {
+  name: "Pagination",
+  category: "navigation",
+  description: "Page navigation with numbered buttons, prev/next controls",
+  root: {
+    name: "Pagination",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Prev", kind: "frame", width: 36, height: 36, cornerRadius: 8, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", fillSemantic: "color/semantic/surface/subtle", children: [{ name: "Arrow", kind: "text", textContent: "‹", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Page1", kind: "frame", width: 36, height: 36, cornerRadius: 8, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", fillSemantic: "color/semantic/actions/primary/bg/default", children: [{ name: "Num", kind: "text", textContent: "1", textPreset: "label/md", textFillSemantic: "color/semantic/text/on-color" }] },
+      { name: "Page2", kind: "frame", width: 36, height: 36, cornerRadius: 8, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Num", kind: "text", textContent: "2", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Page3", kind: "frame", width: 36, height: 36, cornerRadius: 8, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Num", kind: "text", textContent: "3", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Next", kind: "frame", width: 36, height: 36, cornerRadius: 8, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", fillSemantic: "color/semantic/surface/subtle", children: [{ name: "Arrow", kind: "text", textContent: "›", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["numbered", "loadMore", "compact"], defaultValue: "numbered" },
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "Page1", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const LIST: ComponentBlueprint = {
+  name: "List",
+  category: "data",
+  description: "Vertical list of items with optional icons, secondary text, and dividers",
+  root: {
+    name: "List",
+    kind: "frame",
+    width: 320,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    fillSemantic: "color/semantic/surface/default",
+    children: [
+      {
+        name: "ListItem1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 48,
+        paddingX: 16,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 12,
+        children: [
+          { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/content/flag", required: false, size: "sm", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "List item one", textPreset: "body/md", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+      { name: "Divider", kind: "rect", height: 1, fillSemantic: "color/semantic/border/subtle" },
+      {
+        name: "ListItem2",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 48,
+        paddingX: 16,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 12,
+        children: [
+          { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/content/flag", required: false, size: "sm", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "List item two", textPreset: "body/md", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["simple", "interactive", "twoLine", "avatar"], defaultValue: "simple" },
+    { name: "Dividers", values: ["true", "false"], defaultValue: "true" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+  ],
+  iconSlots: [
+    { nodePath: "ListItem1.Icon", propName: "listItem1Icon", defaultIcon: "icon/content/flag", required: false },
+    { nodePath: "ListItem2.Icon", propName: "listItem2Icon", defaultIcon: "icon/content/flag", required: false },
+  ],
+};
+
+const TREEVIEW: ComponentBlueprint = {
+  name: "TreeView",
+  category: "data",
+  description: "Hierarchical expandable tree for navigating nested data",
+  root: {
+    name: "TreeView",
+    kind: "frame",
+    width: 260,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    children: [
+      {
+        name: "Node1",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 36,
+        paddingX: 8,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 4,
+        cornerRadius: 6,
+        children: [
+          { name: "ExpandIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/navigation/chevron-right", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "FolderIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/file/folder", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Documents", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" },
+        ],
+      },
+      {
+        name: "Node1Child",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        height: 36,
+        paddingX: 32,
+        counterAxisAlign: "CENTER",
+        itemSpacing: 4,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/actions/primary/bg/default",
+        children: [
+          { name: "FileIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/inverse", iconSlot: { defaultIcon: "icon/file/file", required: true, size: "xs", colorToken: "color/semantic/icon/inverse", decorative: true } },
+          { name: "Label", kind: "text", textContent: "Report.pdf", textPreset: "body/sm", textFillSemantic: "color/semantic/text/on-color" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+    { name: "Selection", values: ["single", "multi", "none"], defaultValue: "single" },
+  ],
+  tokenBindings: [
+    { nodePath: "Node1Child", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Node1.ExpandIcon", propName: "expandIcon", defaultIcon: "icon/navigation/chevron-right", required: true },
+    { nodePath: "Node1.FolderIcon", propName: "folderIcon", defaultIcon: "icon/file/folder", required: true },
+    { nodePath: "Node1Child.FileIcon", propName: "fileIcon", defaultIcon: "icon/file/file", required: true },
+  ],
+};
+
+const TYPOGRAPHY: ComponentBlueprint = {
+  name: "Typography",
+  category: "core",
+  description: "Text display component for headings, body text, labels, and captions",
+  root: {
+    name: "Typography",
+    kind: "frame",
+    width: 400,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 8,
+    children: [
+      { name: "Display", kind: "text", textContent: "Display Text", textPreset: "display/lg", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Heading", kind: "text", textContent: "Heading Text", textPreset: "heading/md", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Body", kind: "text", textContent: "Body text for paragraphs and content.", textPreset: "body/md", textFillSemantic: "color/semantic/text/secondary" },
+      { name: "Label", kind: "text", textContent: "Label Text", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Caption", kind: "text", textContent: "Caption text", textPreset: "body/sm", textFillSemantic: "color/semantic/text/tertiary" },
+    ],
+  },
+  variantProperties: [
+    { name: "Variant", values: ["display", "heading", "body", "label", "caption"], defaultValue: "body" },
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [],
+};
+
+const DIVIDER: ComponentBlueprint = {
+  name: "Divider",
+  category: "layout",
+  description: "Visual separator line between content sections",
+  root: {
+    name: "Divider",
+    kind: "rect",
+    width: 400,
+    height: 1,
+    fillSemantic: "color/semantic/border/subtle",
+  },
+  variantProperties: [
+    { name: "Orientation", values: ["horizontal", "vertical"], defaultValue: "horizontal" },
+    { name: "Type", values: ["solid", "dashed"], defaultValue: "solid" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/border/subtle" },
+  ],
+};
+
+const SKELETON: ComponentBlueprint = {
+  name: "Skeleton",
+  category: "layout",
+  description: "Loading placeholder mimicking content layout while data loads",
+  root: {
+    name: "Skeleton",
+    kind: "frame",
+    width: 320,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 12,
+    children: [
+      { name: "ImagePlaceholder", kind: "rect", width: 320, height: 180, cornerRadius: 8, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "TitleLine", kind: "rect", width: 240, height: 16, cornerRadius: 4, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "BodyLine1", kind: "rect", width: 320, height: 12, cornerRadius: 4, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "BodyLine2", kind: "rect", width: 280, height: 12, cornerRadius: 4, fillSemantic: "color/semantic/surface/subtle" },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["text", "circle", "rect", "card"], defaultValue: "card" },
+    { name: "Animation", values: ["shimmer", "pulse"], defaultValue: "shimmer" },
+  ],
+  tokenBindings: [
+    { nodePath: "ImagePlaceholder", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+    { nodePath: "TitleLine", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+  ],
+};
+
+// ─── Batch 4: Overlay + Remaining ───────────────────────────────────────────
+
+const POPOVER: ComponentBlueprint = {
+  name: "Popover",
+  category: "overlay",
+  description: "Interactive floating panel with rich content triggered by click",
+  root: {
+    name: "Popover",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 16,
+    paddingY: 12,
+    cornerRadius: 12,
+    fillSemantic: "color/semantic/surface/raised",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.12 }, offset: { x: 0, y: 8 }, radius: 24, spread: -4 }],
+    itemSpacing: 8,
+    children: [
+      {
+        name: "Header",
+        kind: "frame",
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "AUTO",
+        children: [
+          { name: "Title", kind: "text", textContent: "Popover title", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+          { name: "Close", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: false } },
+        ],
+      },
+      { name: "Body", kind: "text", textContent: "Popover content with interactive elements.", textPreset: "body/sm", textFillSemantic: "color/semantic/text/secondary" },
+    ],
+  },
+  variantProperties: [
+    { name: "Placement", values: ["top", "bottom", "left", "right"], defaultValue: "bottom" },
+    { name: "HasArrow", values: ["true", "false"], defaultValue: "true" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/raised" },
+    { nodePath: "", property: "cornerRadius", semanticToken: "radius/semantic/surface/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Header.Close", propName: "closeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+const DROPDOWNMENU: ComponentBlueprint = {
+  name: "DropdownMenu",
+  category: "overlay",
+  description: "Button-triggered menu with action items and keyboard navigation",
+  root: {
+    name: "DropdownMenu",
+    kind: "frame",
+    width: 200,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingY: 4,
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/surface/raised",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.1 }, offset: { x: 0, y: 4 }, radius: 12, spread: -2 }],
+    children: [
+      { name: "Item1", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisSizing: "AUTO", counterAxisSizing: "FIXED", height: 36, paddingX: 12, counterAxisAlign: "CENTER", itemSpacing: 8, children: [{ name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/settings", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } }, { name: "Label", kind: "text", textContent: "Action one", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Item2", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisSizing: "AUTO", counterAxisSizing: "FIXED", height: 36, paddingX: 12, counterAxisAlign: "CENTER", itemSpacing: 8, children: [{ name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/settings", required: false, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } }, { name: "Label", kind: "text", textContent: "Action two", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Alignment", values: ["start", "end"], defaultValue: "start" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/raised" },
+  ],
+  iconSlots: [
+    { nodePath: "Item1.Icon", propName: "item1Icon", defaultIcon: "icon/action/settings", required: false },
+    { nodePath: "Item2.Icon", propName: "item2Icon", defaultIcon: "icon/action/settings", required: false },
+  ],
+};
+
+const AVATARGROUP: ComponentBlueprint = {
+  name: "AvatarGroup",
+  category: "core",
+  description: "Overlapping row of avatars with overflow indicator",
+  root: {
+    name: "AvatarGroup",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    children: [
+      { name: "Avatar1", kind: "ellipse", width: 32, height: 32, fillSemantic: "color/semantic/surface/subtle", strokeSemantic: "color/semantic/surface/default", strokeWeight: 2 },
+      { name: "Avatar2", kind: "ellipse", width: 32, height: 32, fillSemantic: "color/semantic/surface/subtle", strokeSemantic: "color/semantic/surface/default", strokeWeight: 2 },
+      { name: "Avatar3", kind: "ellipse", width: 32, height: 32, fillSemantic: "color/semantic/surface/subtle", strokeSemantic: "color/semantic/surface/default", strokeWeight: 2 },
+      { name: "Overflow", kind: "ellipse", width: 32, height: 32, fillSemantic: "color/semantic/surface/subtle", strokeSemantic: "color/semantic/surface/default", strokeWeight: 2 },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg", "xl"], defaultValue: "md" },
+    { name: "MaxVisible", values: ["3", "4", "5"], defaultValue: "3" },
+  ],
+  tokenBindings: [],
+};
+
+const GRID: ComponentBlueprint = {
+  name: "Grid",
+  category: "layout",
+  description: "CSS Grid-based responsive layout container",
+  root: {
+    name: "Grid",
+    kind: "frame",
+    width: 800,
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 16,
+    children: [
+      { name: "Cell1", kind: "rect", width: 180, height: 120, cornerRadius: 8, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "Cell2", kind: "rect", width: 180, height: 120, cornerRadius: 8, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "Cell3", kind: "rect", width: 180, height: 120, cornerRadius: 8, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "Cell4", kind: "rect", width: 180, height: 120, cornerRadius: 8, fillSemantic: "color/semantic/surface/subtle" },
+    ],
+  },
+  variantProperties: [
+    { name: "Columns", values: ["1", "2", "3", "4", "6", "12"], defaultValue: "4" },
+    { name: "Gap", values: ["sm", "md", "lg"], defaultValue: "md" },
+  ],
+  tokenBindings: [],
+};
+
+const EMPTYSTATE: ComponentBlueprint = {
+  name: "EmptyState",
+  category: "layout",
+  description: "Placeholder for zero-data views with illustration, message, and action",
+  root: {
+    name: "EmptyState",
+    kind: "frame",
+    width: 400,
+    layoutMode: "VERTICAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 16,
+    paddingY: 48,
+    children: [
+      { name: "Illustration", kind: "rect", width: 160, height: 120, cornerRadius: 12, fillSemantic: "color/semantic/surface/subtle" },
+      { name: "Heading", kind: "text", textContent: "No items found", textPreset: "heading/md", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Description", kind: "text", textContent: "Get started by creating your first item.", textPreset: "body/md", textFillSemantic: "color/semantic/text/secondary" },
+      {
+        name: "Action",
+        kind: "frame",
+        width: 140,
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "CENTER",
+        counterAxisAlign: "CENTER",
+        cornerRadius: 8,
+        fillSemantic: "color/semantic/actions/primary/bg/default",
+        children: [
+          { name: "ActionLabel", kind: "text", textContent: "Create item", textPreset: "label/md", textFillSemantic: "color/semantic/text/on-color" },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["compact", "default", "full"], defaultValue: "default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Action", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const BANNER: ComponentBlueprint = {
+  name: "Banner",
+  category: "feedback",
+  description: "Full-width persistent notification bar for system-level messages",
+  root: {
+    name: "Banner",
+    kind: "frame",
+    width: 800,
+    height: 48,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 16,
+    itemSpacing: 12,
+    fillSemantic: "color/semantic/feedback/info/bg",
+    children: [
+      { name: "Icon", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/feedback/info/text", iconSlot: { defaultIcon: "icon/status/info", required: true, size: "sm", colorToken: "color/semantic/feedback/info/text", decorative: false } },
+      { name: "Message", kind: "text", textContent: "New version available. Update now for the latest features.", textPreset: "body/sm", textFillSemantic: "color/semantic/feedback/info/text" },
+      { name: "Action", kind: "text", textContent: "Update", textPreset: "label/sm", textFillSemantic: "color/semantic/actions/primary/bg/default" },
+      { name: "Close", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/feedback/info/text", iconSlot: { defaultIcon: "icon/action/close", required: false, size: "xs", colorToken: "color/semantic/feedback/info/text", decorative: false } },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["info", "success", "warning", "error"], defaultValue: "info" },
+    { name: "Dismissible", values: ["true", "false"], defaultValue: "true" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/feedback/info/bg" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "statusIcon", defaultIcon: "icon/status/info", required: true },
+    { nodePath: "Close", propName: "closeIcon", defaultIcon: "icon/action/close", required: false },
+  ],
+};
+
+// ─── Batch 5: Tier 3 ───────────────────────────────────────────────────────
+
+const DRAWER: ComponentBlueprint = {
+  name: "Drawer",
+  category: "overlay",
+  description: "Slide-in panel from screen edge for secondary content or navigation",
+  root: {
+    name: "Drawer",
+    kind: "frame",
+    width: 360,
+    height: 600,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    fillSemantic: "color/semantic/surface/default",
+    effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.16 }, offset: { x: -4, y: 0 }, radius: 24, spread: 0 }],
+    children: [
+      { name: "Header", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisAlign: "SPACE_BETWEEN", counterAxisAlign: "CENTER", primaryAxisSizing: "AUTO", counterAxisSizing: "FIXED", height: 56, paddingX: 20, strokeSemantic: "color/semantic/border/subtle", strokeWeight: 1, children: [{ name: "Title", kind: "text", textContent: "Drawer Title", textPreset: "heading/sm", textFillSemantic: "color/semantic/text/primary" }, { name: "Close", kind: "frame", width: 20, height: 20, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/action/close", required: true, size: "sm", colorToken: "color/semantic/icon/secondary", decorative: false } }] },
+      { name: "Body", kind: "frame", layoutMode: "VERTICAL", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", paddingX: 20, paddingY: 16, itemSpacing: 12, children: [{ name: "Content", kind: "text", textContent: "Drawer content goes here.", textPreset: "body/md", textFillSemantic: "color/semantic/text/secondary" }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Side", values: ["left", "right", "bottom"], defaultValue: "right" },
+    { name: "Size", values: ["sm", "md", "lg", "full"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Header.Close", propName: "closeIcon", defaultIcon: "icon/action/close", required: true },
+  ],
+};
+
+const SEGMENTEDCONTROL: ComponentBlueprint = {
+  name: "SegmentedControl",
+  category: "core",
+  description: "Button group for single-selection between mutually exclusive options",
+  root: {
+    name: "SegmentedControl",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    cornerRadius: 8,
+    fillSemantic: "color/semantic/surface/subtle",
+    paddingX: 4,
+    paddingY: 4,
+    itemSpacing: 2,
+    children: [
+      { name: "Segment1", kind: "frame", width: 80, height: 32, layoutMode: "HORIZONTAL", primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", cornerRadius: 6, fillSemantic: "color/semantic/surface/default", effects: [{ type: "DROP_SHADOW", color: { r: 0, g: 0, b: 0, a: 0.06 }, offset: { x: 0, y: 1 }, radius: 2, spread: 0 }], children: [{ name: "Label", kind: "text", textContent: "Day", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Segment2", kind: "frame", width: 80, height: 32, layoutMode: "HORIZONTAL", primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", cornerRadius: 6, children: [{ name: "Label", kind: "text", textContent: "Week", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" }] },
+      { name: "Segment3", kind: "frame", width: 80, height: 32, layoutMode: "HORIZONTAL", primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", cornerRadius: 6, children: [{ name: "Label", kind: "text", textContent: "Month", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "Type", values: ["text", "icon", "both"], defaultValue: "text" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+    { nodePath: "Segment1", property: "fills", semanticToken: "color/semantic/surface/default" },
+  ],
+};
+
+const STEPPER: ComponentBlueprint = {
+  name: "Stepper",
+  category: "navigation",
+  description: "Multi-step progress indicator showing workflow completion status",
+  root: {
+    name: "Stepper",
+    kind: "frame",
+    width: 600,
+    layoutMode: "HORIZONTAL",
+    primaryAxisAlign: "SPACE_BETWEEN",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "AUTO",
+    children: [
+      { name: "Step1", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", itemSpacing: 8, counterAxisAlign: "CENTER", children: [{ name: "Circle", kind: "ellipse", width: 32, height: 32, fillSemantic: "color/semantic/actions/primary/bg/default" }, { name: "Label", kind: "text", textContent: "Details", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Connector1", kind: "rect", width: 80, height: 2, fillSemantic: "color/semantic/actions/primary/bg/default" },
+      { name: "Step2", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", itemSpacing: 8, counterAxisAlign: "CENTER", children: [{ name: "Circle", kind: "ellipse", width: 32, height: 32, strokeSemantic: "color/semantic/actions/primary/bg/default", strokeWeight: 2 }, { name: "Label", kind: "text", textContent: "Review", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" }] },
+      { name: "Connector2", kind: "rect", width: 80, height: 2, fillSemantic: "color/semantic/border/default" },
+      { name: "Step3", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", itemSpacing: 8, counterAxisAlign: "CENTER", children: [{ name: "Circle", kind: "ellipse", width: 32, height: 32, strokeSemantic: "color/semantic/border/default", strokeWeight: 2 }, { name: "Label", kind: "text", textContent: "Confirm", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Orientation", values: ["horizontal", "vertical"], defaultValue: "horizontal" },
+    { name: "Type", values: ["numbered", "icon"], defaultValue: "numbered" },
+  ],
+  tokenBindings: [
+    { nodePath: "Step1.Circle", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "Connector1", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const FILEUPLOADER: ComponentBlueprint = {
+  name: "FileUploader",
+  category: "forms",
+  description: "File upload via drag-and-drop zone or button trigger",
+  root: {
+    name: "FileUploader",
+    kind: "frame",
+    width: 400,
+    height: 160,
+    layoutMode: "VERTICAL",
+    primaryAxisAlign: "CENTER",
+    counterAxisAlign: "CENTER",
+    primaryAxisSizing: "FIXED",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 8,
+    cornerRadius: 8,
+    strokeSemantic: "color/semantic/border/default",
+    strokeWeight: 2,
+    fillSemantic: "color/semantic/surface/subtle",
+    children: [
+      { name: "Icon", kind: "frame", width: 32, height: 32, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/content/inbox", required: true, size: "lg", colorToken: "color/semantic/icon/secondary", decorative: true } },
+      { name: "Title", kind: "text", textContent: "Drag & drop files here", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" },
+      { name: "Subtitle", kind: "text", textContent: "or click to browse (max 10MB)", textPreset: "body/sm", textFillSemantic: "color/semantic/text/tertiary" },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["dropzone", "button"], defaultValue: "dropzone" },
+    { name: "State", values: ["Idle", "DragOver", "Uploading", "Complete", "Error"], defaultValue: "Idle" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/subtle" },
+    { nodePath: "", property: "strokes", semanticToken: "color/semantic/border/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "uploadIcon", defaultIcon: "icon/content/inbox", required: true },
+  ],
+};
+
+const INLINEMESSAGE: ComponentBlueprint = {
+  name: "InlineMessage",
+  category: "feedback",
+  description: "Contextual helper or error message associated with a form field",
+  root: {
+    name: "InlineMessage",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Icon", kind: "frame", width: 14, height: 14, fillSemantic: "color/semantic/feedback/info/text", iconSlot: { defaultIcon: "icon/status/info", required: true, size: "xs", colorToken: "color/semantic/feedback/info/text", decorative: false } },
+      { name: "Message", kind: "text", textContent: "This field is required", textPreset: "body/sm", textFillSemantic: "color/semantic/feedback/info/text" },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["info", "success", "warning", "error"], defaultValue: "info" },
+  ],
+  tokenBindings: [
+    { nodePath: "Icon", property: "fills", semanticToken: "color/semantic/feedback/info/text" },
+    { nodePath: "Message", property: "fills", semanticToken: "color/semantic/feedback/info/text" },
+  ],
+  iconSlots: [
+    { nodePath: "Icon", propName: "statusIcon", defaultIcon: "icon/status/info", required: true },
+  ],
+};
+
+const TOOLBAR: ComponentBlueprint = {
+  name: "Toolbar",
+  category: "navigation",
+  description: "Horizontal action bar with grouped icon buttons and controls",
+  root: {
+    name: "Toolbar",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    height: 44,
+    paddingX: 8,
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    fillSemantic: "color/semantic/surface/default",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    cornerRadius: 8,
+    children: [
+      { name: "Action1", kind: "frame", width: 32, height: 32, cornerRadius: 6, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/default", iconSlot: { defaultIcon: "icon/action/edit", required: true, size: "xs", colorToken: "color/semantic/icon/default", decorative: true } }] },
+      { name: "Action2", kind: "frame", width: 32, height: 32, cornerRadius: 6, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/default", iconSlot: { defaultIcon: "icon/editor/format-bold", required: true, size: "xs", colorToken: "color/semantic/icon/default", decorative: true } }] },
+      { name: "Separator", kind: "rect", width: 1, height: 20, fillSemantic: "color/semantic/border/subtle" },
+      { name: "Action3", kind: "frame", width: 32, height: 32, cornerRadius: 6, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Icon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/default", iconSlot: { defaultIcon: "icon/editor/format-italic", required: true, size: "xs", colorToken: "color/semantic/icon/default", decorative: true } }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+    { name: "Overflow", values: ["visible", "menu"], defaultValue: "visible" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Action1.Icon", propName: "action1Icon", defaultIcon: "icon/action/edit", required: true },
+    { nodePath: "Action2.Icon", propName: "action2Icon", defaultIcon: "icon/editor/format-bold", required: true },
+    { nodePath: "Action3.Icon", propName: "action3Icon", defaultIcon: "icon/editor/format-italic", required: true },
+  ],
+};
+
+const CALENDAR: ComponentBlueprint = {
+  name: "Calendar",
+  category: "data",
+  description: "Month-view calendar grid for date selection",
+  root: {
+    name: "Calendar",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    paddingX: 12,
+    paddingY: 12,
+    itemSpacing: 8,
+    cornerRadius: 12,
+    fillSemantic: "color/semantic/surface/default",
+    strokeSemantic: "color/semantic/border/subtle",
+    strokeWeight: 1,
+    children: [
+      { name: "MonthNav", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisAlign: "SPACE_BETWEEN", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", counterAxisAlign: "CENTER", children: [{ name: "Prev", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/text/secondary" }, { name: "MonthYear", kind: "text", textContent: "April 2026", textPreset: "label/md", textFillSemantic: "color/semantic/text/primary" }, { name: "Next", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/text/secondary" }] },
+      { name: "WeekHeaders", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisAlign: "SPACE_BETWEEN", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", children: [{ name: "Sun", kind: "text", textContent: "S", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Mon", kind: "text", textContent: "M", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Tue", kind: "text", textContent: "T", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Wed", kind: "text", textContent: "W", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Thu", kind: "text", textContent: "T", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Fri", kind: "text", textContent: "F", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }, { name: "Sat", kind: "text", textContent: "S", textPreset: "label/sm", textFillSemantic: "color/semantic/text/tertiary" }] },
+      { name: "DayGrid", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisAlign: "SPACE_BETWEEN", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", children: [{ name: "Day1", kind: "frame", width: 32, height: 32, cornerRadius: 16, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", fillSemantic: "color/semantic/actions/primary/bg/default", children: [{ name: "Num", kind: "text", textContent: "1", textPreset: "body/sm", textFillSemantic: "color/semantic/text/on-color" }] }, { name: "Day2", kind: "frame", width: 32, height: 32, cornerRadius: 16, primaryAxisAlign: "CENTER", counterAxisAlign: "CENTER", children: [{ name: "Num", kind: "text", textContent: "2", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" }] }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Type", values: ["single", "range"], defaultValue: "single" },
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "", property: "fills", semanticToken: "color/semantic/surface/default" },
+    { nodePath: "DayGrid.Day1", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const TIMEPICKER: ComponentBlueprint = {
+  name: "TimePicker",
+  category: "forms",
+  description: "Time selection input with dropdown of time slots",
+  root: {
+    name: "TimePicker",
+    kind: "frame",
+    width: 200,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 4,
+    children: [
+      { name: "Label", kind: "text", textContent: "Time", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" },
+      {
+        name: "Trigger",
+        kind: "frame",
+        height: 40,
+        layoutMode: "HORIZONTAL",
+        primaryAxisAlign: "SPACE_BETWEEN",
+        counterAxisAlign: "CENTER",
+        primaryAxisSizing: "AUTO",
+        counterAxisSizing: "FIXED",
+        paddingX: 12,
+        cornerRadius: 6,
+        fillSemantic: "color/semantic/field/bg/default",
+        strokeSemantic: "color/semantic/field/border/default",
+        strokeWeight: 1,
+        children: [
+          { name: "Value", kind: "text", textContent: "09:00 AM", textPreset: "body/md", textFillSemantic: "color/semantic/text/primary" },
+          { name: "ClockIcon", kind: "frame", width: 16, height: 16, fillSemantic: "color/semantic/icon/secondary", iconSlot: { defaultIcon: "icon/status/pending", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+        ],
+      },
+    ],
+  },
+  variantProperties: [
+    { name: "Format", values: ["12h", "24h"], defaultValue: "12h" },
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Open", "Focused", "Error", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "Trigger", property: "fills", semanticToken: "color/semantic/field/bg/default" },
+    { nodePath: "Trigger", property: "strokes", semanticToken: "color/semantic/field/border/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Trigger.ClockIcon", propName: "clockIcon", defaultIcon: "icon/status/pending", required: true },
+  ],
+};
+
+const RANGESLIDER: ComponentBlueprint = {
+  name: "RangeSlider",
+  category: "forms",
+  description: "Dual-thumb slider for selecting a value range",
+  root: {
+    name: "RangeSlider",
+    kind: "frame",
+    width: 280,
+    layoutMode: "VERTICAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "FIXED",
+    itemSpacing: 8,
+    children: [
+      { name: "LabelRow", kind: "frame", layoutMode: "HORIZONTAL", primaryAxisAlign: "SPACE_BETWEEN", primaryAxisSizing: "AUTO", counterAxisSizing: "AUTO", children: [{ name: "Label", kind: "text", textContent: "Price range", textPreset: "label/sm", textFillSemantic: "color/semantic/text/primary" }, { name: "Values", kind: "text", textContent: "$20 – $80", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" }] },
+      { name: "TrackContainer", kind: "frame", height: 24, layoutMode: "HORIZONTAL", counterAxisAlign: "CENTER", primaryAxisSizing: "AUTO", counterAxisSizing: "FIXED", children: [{ name: "Track", kind: "rect", width: 280, height: 4, cornerRadius: 2, fillSemantic: "color/semantic/border/default" }, { name: "Fill", kind: "rect", width: 168, height: 4, cornerRadius: 2, fillSemantic: "color/semantic/actions/primary/bg/default" }, { name: "ThumbMin", kind: "ellipse", width: 20, height: 20, fillSemantic: "color/semantic/surface/default", strokeSemantic: "color/semantic/actions/primary/bg/default", strokeWeight: 2 }, { name: "ThumbMax", kind: "ellipse", width: 20, height: 20, fillSemantic: "color/semantic/surface/default", strokeSemantic: "color/semantic/actions/primary/bg/default", strokeWeight: 2 }] },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+    { name: "State", values: ["Default", "Hover", "Active", "Disabled"], defaultValue: "Default" },
+  ],
+  tokenBindings: [
+    { nodePath: "TrackContainer.Fill", property: "fills", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "TrackContainer.ThumbMin", property: "strokes", semanticToken: "color/semantic/actions/primary/bg/default" },
+    { nodePath: "TrackContainer.ThumbMax", property: "strokes", semanticToken: "color/semantic/actions/primary/bg/default" },
+  ],
+};
+
+const INLINEEDIT: ComponentBlueprint = {
+  name: "InlineEdit",
+  category: "data",
+  description: "Click-to-edit text field that toggles between read and edit modes",
+  root: {
+    name: "InlineEdit",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    paddingX: 4,
+    paddingY: 4,
+    cornerRadius: 4,
+    children: [
+      { name: "Value", kind: "text", textContent: "Click to edit", textPreset: "body/md", textFillSemantic: "color/semantic/text/primary" },
+      { name: "EditIcon", kind: "frame", width: 14, height: 14, fillSemantic: "color/semantic/icon/secondary", opacity: 0, iconSlot: { defaultIcon: "icon/action/edit", required: true, size: "xs", colorToken: "color/semantic/icon/secondary", decorative: true } },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["ReadMode", "EditMode", "Saving", "Error"], defaultValue: "ReadMode" },
+  ],
+  tokenBindings: [],
+  iconSlots: [
+    { nodePath: "EditIcon", propName: "editIcon", defaultIcon: "icon/action/edit", required: true },
+  ],
+};
+
+// ─── Batch 6: Final ─────────────────────────────────────────────────────────
+
+const STATUSDOT: ComponentBlueprint = {
+  name: "StatusDot",
+  category: "core",
+  description: "Colored dot indicator for status with required text label",
+  root: {
+    name: "StatusDot",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 6,
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Dot", kind: "ellipse", width: 10, height: 10, fillSemantic: "color/semantic/feedback/success/text" },
+      { name: "Label", kind: "text", textContent: "Online", textPreset: "body/sm", textFillSemantic: "color/semantic/text/primary" },
+    ],
+  },
+  variantProperties: [
+    { name: "Status", values: ["success", "warning", "error", "info", "neutral", "offline", "online"], defaultValue: "success" },
+    { name: "Size", values: ["sm", "md"], defaultValue: "md" },
+  ],
+  tokenBindings: [
+    { nodePath: "Dot", property: "fills", semanticToken: "color/semantic/feedback/success/text" },
+  ],
+};
+
+const RATING: ComponentBlueprint = {
+  name: "Rating",
+  category: "forms",
+  description: "Star-based rating input for user feedback or read-only display",
+  root: {
+    name: "Rating",
+    kind: "frame",
+    layoutMode: "HORIZONTAL",
+    primaryAxisSizing: "AUTO",
+    counterAxisSizing: "AUTO",
+    itemSpacing: 4,
+    counterAxisAlign: "CENTER",
+    children: [
+      { name: "Star1", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/feedback/warning/text", iconSlot: { defaultIcon: "icon/toggle/star", required: true, size: "md", colorToken: "color/semantic/feedback/warning/text", decorative: false } },
+      { name: "Star2", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/feedback/warning/text", iconSlot: { defaultIcon: "icon/toggle/star", required: true, size: "md", colorToken: "color/semantic/feedback/warning/text", decorative: false } },
+      { name: "Star3", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/feedback/warning/text", iconSlot: { defaultIcon: "icon/toggle/star", required: true, size: "md", colorToken: "color/semantic/feedback/warning/text", decorative: false } },
+      { name: "Star4", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/border/default", iconSlot: { defaultIcon: "icon/toggle/star", required: true, size: "md", colorToken: "color/semantic/border/default", decorative: false } },
+      { name: "Star5", kind: "frame", width: 24, height: 24, fillSemantic: "color/semantic/border/default", iconSlot: { defaultIcon: "icon/toggle/star", required: true, size: "md", colorToken: "color/semantic/border/default", decorative: false } },
+      { name: "Value", kind: "text", textContent: "3.0", textPreset: "label/sm", textFillSemantic: "color/semantic/text/secondary" },
+    ],
+  },
+  variantProperties: [
+    { name: "Size", values: ["sm", "md", "lg"], defaultValue: "md" },
+    { name: "State", values: ["Interactive", "ReadOnly", "Disabled"], defaultValue: "Interactive" },
+  ],
+  tokenBindings: [
+    { nodePath: "Star1", property: "fills", semanticToken: "color/semantic/feedback/warning/text" },
+    { nodePath: "Star4", property: "fills", semanticToken: "color/semantic/border/default" },
+  ],
+  iconSlots: [
+    { nodePath: "Star1", propName: "star1Icon", defaultIcon: "icon/toggle/star", required: true },
+    { nodePath: "Star2", propName: "star2Icon", defaultIcon: "icon/toggle/star", required: true },
+    { nodePath: "Star3", propName: "star3Icon", defaultIcon: "icon/toggle/star", required: true },
+    { nodePath: "Star4", propName: "star4Icon", defaultIcon: "icon/toggle/star", required: true },
+    { nodePath: "Star5", propName: "star5Icon", defaultIcon: "icon/toggle/star", required: true },
+  ],
+};
+
+// ─── Aggregate ──────────────────────────────────────────────────────────────
+
+export const COMPONENT_BLUEPRINTS: ComponentBlueprint[] = [
+  // Original 17
+  BUTTON, INPUT, SELECT, CHECKBOX, TOGGLE, RADIO,
+  CARD, MODAL, TOAST, BADGE, AVATAR, TOOLTIP,
+  TABS, BREADCRUMB, TAG, NAVBAR, TABLE,
+  // Batch 1: Gap-fill + new Tier 1
+  ACCORDION, SLIDER, ALERT, CHIP, PROGRESS, SIDENAVIGATION,
+  ICON, LINK, MENU, SPINNER,
+  // Batch 2: Tier 2 Forms
+  TEXTAREA, SEARCH, COMBOBOX, DATEPICKER, NUMBERINPUT, FORM,
+  // Batch 3: Nav + Data + Layout
+  PAGINATION, LIST, TREEVIEW, TYPOGRAPHY, DIVIDER, SKELETON,
+  // Batch 4: Overlay + Remaining
+  POPOVER, DROPDOWNMENU, AVATARGROUP, GRID, EMPTYSTATE, BANNER,
+  // Batch 5: Tier 3
+  DRAWER, SEGMENTEDCONTROL, STEPPER, FILEUPLOADER, INLINEMESSAGE,
+  TOOLBAR, CALENDAR, TIMEPICKER, RANGESLIDER, INLINEEDIT,
+  // Batch 6: Final
+  STATUSDOT, RATING,
+];
+
+/**
+ * Get blueprints filtered by category.
+ */
+export function getBlueprintsByCategory(
+  categories: Array<"core" | "forms" | "navigation" | "data" | "feedback" | "overlay" | "layout">
+): ComponentBlueprint[] {
+  return COMPONENT_BLUEPRINTS.filter((b) => categories.includes(b.category));
+}
+
+/**
+ * Get a single blueprint by name.
+ */
+export function getBlueprint(name: string): ComponentBlueprint | undefined {
+  return COMPONENT_BLUEPRINTS.find((b) => b.name.toLowerCase() === name.toLowerCase());
+}