@usefragments/ui 1.5.4 → 1.7.0

package/src/utils/theme-presets.ts

@@ -8,6 +8,8 @@
 
 import {
   type SeedConfig,
+  type DensityPreset,
+  type RadiusStyle,
   PALETTES,
   RADIUS_STYLES,
   getSemanticColors,
@@ -21,7 +23,7 @@ import {
   deriveSemanticText,
   deriveSemanticBg,
   deriveSemanticHover,
-} from './seed-derivation';
+} from "./seed-derivation";
 
 // ============================================
 // Theme Output Types
@@ -108,7 +110,8 @@ export interface ThemeConfig {
   radius?: ThemeRadius;
   shadows?: ThemeShadows;
   dark?: ThemeDarkMode;
-  density?: string;
+  density?: DensityPreset;
+  radiusStyle?: RadiusStyle;
 }
 
 // ============================================
@@ -157,8 +160,9 @@ export function seedsToTheme(seeds: SeedConfig): ThemeConfig {
   const infoTextDark = deriveSemanticText(info, true);
 
   return {
-    name: 'Custom',
+    name: "Custom",
     density: seeds.density,
+    radiusStyle: seeds.radiusStyle,
     colors: {
       accent: seeds.brand,
       accentHover: deriveAccentHover(seeds.brand, false),
@@ -199,7 +203,7 @@ export function seedsToTheme(seeds: SeedConfig): ThemeConfig {
       sm: radius.sm,
       md: radius.md,
       lg: radius.lg,
-      full: '9999px',
+      full: "9999px",
     },
     shadows: {
       sm: lightShadows.sm,
@@ -239,7 +243,7 @@ export function seedsToTheme(seeds: SeedConfig): ThemeConfig {
       successBg: deriveSemanticBg(success, true),
       warningBg: deriveSemanticBg(warning, true),
       infoBg: deriveSemanticBg(info, true),
-      backdrop: 'rgba(0, 0, 0, 0.8)',
+      backdrop: "rgba(0, 0, 0, 0.8)",
     },
   };
 }
@@ -257,55 +261,79 @@ export interface PresetDefinition {
 
 const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
   default: {
-    name: 'Default',
-    seeds: { brand: '#18181b', neutral: 'stone', density: 'default', radiusStyle: 'default' },
+    name: "Default",
+    seeds: { brand: "#18181b", neutral: "stone", density: "default", radiusStyle: "default" },
   },
   neutral: {
-    name: 'Neutral',
-    seeds: { brand: '#71717a', neutral: 'stone', density: 'default', radiusStyle: 'default' },
+    name: "Neutral",
+    seeds: { brand: "#71717a", neutral: "stone", density: "default", radiusStyle: "default" },
   },
   slate: {
-    name: 'Slate',
-    seeds: { brand: '#64748b', neutral: 'stone', density: 'default', radiusStyle: 'default' },
+    name: "Slate",
+    seeds: { brand: "#64748b", neutral: "stone", density: "default", radiusStyle: "default" },
     overrides: {
-      surfaces: { bgSecondary: '#f1f5f9', bgTertiary: '#e2e8f0' },
-      dark: { surfaces: { bgSecondary: '#1e293b', bgTertiary: '#334155' } },
+      surfaces: { bgSecondary: "#f1f5f9", bgTertiary: "#e2e8f0" },
+      dark: { surfaces: { bgSecondary: "#1e293b", bgTertiary: "#334155" } },
     },
   },
   emerald: {
-    name: 'Emerald',
-    seeds: { brand: '#10b981', neutral: 'stone', density: 'default', radiusStyle: 'default' },
+    name: "Emerald",
+    seeds: { brand: "#10b981", neutral: "stone", density: "default", radiusStyle: "default" },
   },
   rose: {
-    name: 'Rose',
-    seeds: { brand: '#f43f5e', neutral: 'stone', density: 'default', radiusStyle: 'default' },
+    name: "Rose",
+    seeds: { brand: "#f43f5e", neutral: "stone", density: "default", radiusStyle: "default" },
   },
   classic: {
-    name: 'Classic',
+    name: "Classic",
     seeds: {
-      brand: '#1e40af', neutral: 'stone', density: 'default', radiusStyle: 'default',
-      danger: '#b91c1c', success: '#15803d', warning: '#a16207', info: '#0369a1',
+      brand: "#1e40af",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#b91c1c",
+      success: "#15803d",
+      warning: "#a16207",
+      info: "#0369a1",
     },
   },
   bold: {
-    name: 'Bold',
+    name: "Bold",
     seeds: {
-      brand: '#7c3aed', neutral: 'stone', density: 'default', radiusStyle: 'default',
-      danger: '#dc2626', success: '#16a34a', warning: '#ea580c', info: '#2563eb',
+      brand: "#7c3aed",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#dc2626",
+      success: "#16a34a",
+      warning: "#ea580c",
+      info: "#2563eb",
     },
   },
   neon: {
-    name: 'Neon',
+    name: "Neon",
     seeds: {
-      brand: '#06b6d4', neutral: 'stone', density: 'default', radiusStyle: 'default',
-      danger: '#f43f5e', success: '#4ade80', warning: '#fbbf24', info: '#a78bfa',
+      brand: "#06b6d4",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#f43f5e",
+      success: "#4ade80",
+      warning: "#fbbf24",
+      info: "#a78bfa",
     },
   },
   minimal: {
-    name: 'Minimal',
+    name: "Minimal",
     seeds: {
-      brand: '#525252', neutral: 'stone', density: 'default', radiusStyle: 'default',
-      danger: '#78716c', success: '#65a30d', warning: '#ca8a04', info: '#64748b',
+      brand: "#525252",
+      neutral: "stone",
+      density: "default",
+      radiusStyle: "default",
+      danger: "#78716c",
+      success: "#65a30d",
+      warning: "#ca8a04",
+      info: "#64748b",
     },
   },
 };
@@ -315,7 +343,7 @@ const PRESET_DEFINITIONS: Record<string, PresetDefinition> = {
 // ============================================
 
 function isPlainObject(val: unknown): val is Record<string, unknown> {
-  return typeof val === 'object' && val !== null && !Array.isArray(val);
+  return typeof val === "object" && val !== null && !Array.isArray(val);
 }
 
 function deepMergeObjects(

package/dist/components/Theme/ThemeToggle.module.scss.js

@@ -1,23 +0,0 @@
-const toggleGroup = "_toggleGroup_1jmqh_1";
-const toggleButton = "_toggleButton_1jmqh_10";
-const toggleButtonActive = "_toggleButtonActive_1jmqh_42";
-const sizeSm = "_sizeSm_1jmqh_55";
-const sizeMd = "_sizeMd_1jmqh_64";
-const sizeLg = "_sizeLg_1jmqh_73";
-const styles = {
-  toggleGroup,
-  toggleButton,
-  toggleButtonActive,
-  sizeSm,
-  sizeMd,
-  sizeLg
-};
-export {
-  styles as default,
-  sizeLg,
-  sizeMd,
-  sizeSm,
-  toggleButton,
-  toggleButtonActive,
-  toggleGroup
-};

package/dist/components/Toggle/Toggle.module.scss.cjs

@@ -1,44 +0,0 @@
-"use strict";
-Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const root = "_root_1uoy9_1";
-const rootWithHelper = "_rootWithHelper_1uoy9_48";
-const track = "_track_1uoy9_51";
-const trackSm = "_trackSm_1uoy9_86";
-const trackLg = "_trackLg_1uoy9_96";
-const trackMd = "_trackMd_1uoy9_106";
-const thumb = "_thumb_1uoy9_116";
-const content = "_content_1uoy9_139";
-const label = "_label_1uoy9_143";
-const labelSm = "_labelSm_1uoy9_151";
-const labelLg = "_labelLg_1uoy9_155";
-const helper = "_helper_1uoy9_159";
-const helperSm = "_helperSm_1uoy9_167";
-const styles = {
-  root,
-  rootWithHelper,
-  track,
-  trackSm,
-  trackLg,
-  trackMd,
-  thumb,
-  content,
-  label,
-  labelSm,
-  labelLg,
-  helper,
-  helperSm
-};
-exports.content = content;
-exports.default = styles;
-exports.helper = helper;
-exports.helperSm = helperSm;
-exports.label = label;
-exports.labelLg = labelLg;
-exports.labelSm = labelSm;
-exports.root = root;
-exports.rootWithHelper = rootWithHelper;
-exports.thumb = thumb;
-exports.track = track;
-exports.trackLg = trackLg;
-exports.trackMd = trackMd;
-exports.trackSm = trackSm;

package/dist/components/Toggle/Toggle.module.scss.js

@@ -1,44 +0,0 @@
-const root = "_root_1uoy9_1";
-const rootWithHelper = "_rootWithHelper_1uoy9_48";
-const track = "_track_1uoy9_51";
-const trackSm = "_trackSm_1uoy9_86";
-const trackLg = "_trackLg_1uoy9_96";
-const trackMd = "_trackMd_1uoy9_106";
-const thumb = "_thumb_1uoy9_116";
-const content = "_content_1uoy9_139";
-const label = "_label_1uoy9_143";
-const labelSm = "_labelSm_1uoy9_151";
-const labelLg = "_labelLg_1uoy9_155";
-const helper = "_helper_1uoy9_159";
-const helperSm = "_helperSm_1uoy9_167";
-const styles = {
-  root,
-  rootWithHelper,
-  track,
-  trackSm,
-  trackLg,
-  trackMd,
-  thumb,
-  content,
-  label,
-  labelSm,
-  labelLg,
-  helper,
-  helperSm
-};
-export {
-  content,
-  styles as default,
-  helper,
-  helperSm,
-  label,
-  labelLg,
-  labelSm,
-  root,
-  rootWithHelper,
-  thumb,
-  track,
-  trackLg,
-  trackMd,
-  trackSm
-};

package/src/components/Button/Button.contract.json

@@ -1,218 +0,0 @@
-{
-  "$schema": "https://usefragments.com/schemas/contract.v1.json",
-  "name": "Button",
-  "description": "Interactive element for user actions and form submissions",
-  "category": "forms",
-  "tags": [
-    "action",
-    "button",
-    "form",
-    "interactive"
-  ],
-  "status": "stable",
-  "sourcePath": "src/components/Button/index.tsx",
-  "exportName": "Button",
-  "propsSummary": [
-    "as: button|a",
-    "children: node (required)",
-    "variant: primary|secondary|ghost|link|quiet|danger|outlined|outline|icon (default: \"primary\")",
-    "size: xs|sm|md|lg (default: \"md\")",
-    "icon: boolean",
-    "fullWidth: boolean",
-    "asChild: boolean"
-  ],
-  "props": {
-    "as": {
-      "type": "enum",
-      "description": "Render as a native button or anchor element",
-      "default": "button",
-      "required": false,
-      "values": [
-        "button",
-        "a"
-      ]
-    },
-    "children": {
-      "type": "node",
-      "description": "Button label content",
-      "required": true
-    },
-    "variant": {
-      "type": "enum",
-      "description": "Visual style variant (\"icon\" is a convenience alias for outlined + icon-only layout, \"link\" is accent-coloured + transparent for tertiary CTAs, \"quiet\" is a neutral text button with no box and no height floor for meta lines and footnotes)",
-      "default": "\"primary\"",
-      "required": false,
-      "values": [
-        "primary",
-        "secondary",
-        "ghost",
-        "link",
-        "quiet",
-        "danger",
-        "outlined",
-        "outline",
-        "icon"
-      ],
-      "constraints": [
-        "Only one primary button per context"
-      ]
-    },
-    "size": {
-      "type": "enum",
-      "description": "Button size (\"xs\" is for inline row-action controls where \"sm\" is too tall)",
-      "default": "\"md\"",
-      "required": false,
-      "values": [
-        "xs",
-        "sm",
-        "md",
-        "lg"
-      ]
-    },
-    "icon": {
-      "type": "boolean",
-      "description": "Render as icon-only button (square aspect ratio). Useful with any visual variant; variant=\"icon\" is the default outlined icon-only shortcut.",
-      "default": "false",
-      "required": false
-    },
-    "fullWidth": {
-      "type": "boolean",
-      "description": "Make button full width of container",
-      "default": "false",
-      "required": false
-    },
-    "asChild": {
-      "type": "boolean",
-      "description": "Merge button styling onto child element (e.g. Next.js Link)",
-      "default": "false",
-      "required": false
-    }
-  },
-  "usage": {
-    "when": [
-      "Triggering an action (save, submit, delete, etc.)",
-      "Form submission",
-      "Opening dialogs or menus",
-      "Navigation when action context is needed"
-    ],
-    "whenNot": [
-      "Simple navigation (use Link)",
-      "Toggling state (use Switch or Checkbox)",
-      "Selecting from options (use Select or RadioGroup)"
-    ],
-    "guidelines": [
-      "Use Primary for the main action in a context",
-      "Only one Primary button per section/form",
-      "Use Danger variant for destructive actions",
-      "Loading state should disable the button",
-      "When using asChild, pass interaction and accessibility props directly on Button (they are forwarded to the child element)",
-      "Use variant=\"icon\" for the default icon-only action button, or combine icon={true} with another visual variant when needed"
-    ],
-    "accessibility": [
-      "Button text should describe the action",
-      "Avoid generic labels like \"Click here\"",
-      "Icon-only buttons need aria-label"
-    ]
-  },
-  "examples": [
-    {
-      "name": "Primary",
-      "description": "Default action button for primary actions",
-      "code": "<Button variant=\"primary\">Save Changes</Button>"
-    },
-    {
-      "name": "Secondary",
-      "description": "Less prominent action button",
-      "code": "<Button variant=\"secondary\">Cancel</Button>"
-    },
-    {
-      "name": "Ghost",
-      "description": "Minimal visual weight for subtle actions",
-      "code": "<Button variant=\"ghost\">Learn More</Button>"
-    },
-    {
-      "name": "Link",
-      "description": "Accent-coloured transparent button for tertiary CTAs",
-      "code": "<Button variant=\"link\">View all →</Button>"
-    },
-    {
-      "name": "Quiet",
-      "description": "Neutral text button with no box and no height floor, for meta lines and footnotes",
-      "code": "<Button variant=\"quiet\" size=\"xs\">main</Button>"
-    },
-    {
-      "name": "Danger",
-      "description": "Destructive action requiring attention",
-      "code": "<Button variant=\"danger\">Delete Item</Button>"
-    },
-    {
-      "name": "Outline",
-      "description": "Bordered button with transparent background",
-      "code": "<Button variant=\"outline\">View Details</Button>"
-    },
-    {
-      "name": "Icon",
-      "description": "Convenience icon-only button alias (ghost + square icon sizing)",
-      "code": "<Button variant=\"icon\" aria-label=\"Add item\">\n  <span aria-hidden>+</span>\n</Button>"
-    },
-    {
-      "name": "Sizes",
-      "description": "Available size options",
-      "code": "<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n  <Button size=\"xs\" variant=\"icon\" aria-label=\"Dismiss\">\u00d7</Button>\n  <Button size=\"sm\">Small</Button>\n  <Button size=\"md\">Medium</Button>\n  <Button size=\"lg\">Large</Button>\n</div>"
-    },
-    {
-      "name": "Disabled",
-      "description": "Non-interactive state",
-      "code": "<Button disabled>Cannot Click</Button>"
-    },
-    {
-      "name": "As Child",
-      "description": "Compose button styles onto another interactive element while preserving forwarded props",
-      "code": "<Button asChild variant=\"outlined\" aria-label=\"Open billing settings\">\n  <a href=\"#billing-settings\">Billing Settings</a>\n</Button>"
-    }
-  ],
-  "relations": [
-    {
-      "component": "Link",
-      "relationship": "alternative",
-      "note": "Use Link for navigation without action context"
-    },
-    {
-      "component": "Icon",
-      "relationship": "complementary",
-      "note": "Use Icon inside Button for icon-leading/trailing or icon-only actions"
-    },
-    {
-      "component": "ButtonGroup",
-      "relationship": "parent",
-      "note": "Use ButtonGroup for related action sets"
-    }
-  ],
-  "contract": {
-    "propsSummary": [
-      "variant: primary|secondary|ghost|link|quiet|danger|outlined|outline|icon (default: primary, icon = outlined + icon-only, link = accent transparent, quiet = neutral text button, no box)",
-      "size: xs|sm|md|lg (default: md, xs for inline row-action controls)",
-      "disabled: boolean - disables interaction",
-      "type: button|submit|reset (default: button)",
-      "onClick: (event) => void - action handler",
-      "asChild: boolean - composes styles/props onto a child element (links/router links)",
-      "icon: boolean - icon-only square layout (can be combined with visual variants)"
-    ],
-    "a11yRules": [
-      "A11Y_BTN_LABEL",
-      "A11Y_BTN_FOCUS"
-    ]
-  },
-  "ai": {
-    "compositionPattern": "compound",
-    "subComponents": [
-      "Root"
-    ]
-  },
-  "provenance": {
-    "source": "migrated",
-    "verified": false,
-    "frameworkSupport": "native",
-    "extractedAt": "2026-03-13T23:18:51.517Z"
-  }
-}

package/src/components/Card/Card.contract.json

@@ -1,175 +0,0 @@
-{
-  "$schema": "https://usefragments.com/schemas/contract.v1.json",
-  "name": "Card",
-  "description": "Container for grouping related content",
-  "category": "layout",
-  "tags": ["container", "layout", "surface"],
-  "status": "stable",
-  "sourcePath": "src/components/Card/index.tsx",
-  "exportName": "Card",
-  "propsSummary": [
-    "children: node (required)",
-    "variant: default|outlined|outline|elevated|stat|panel (default: default)",
-    "padding: none|sm|md|lg (default: md)",
-    "as: article|div|section (default: article)",
-    "style: object"
-  ],
-  "props": {
-    "children": {
-      "type": "node",
-      "description": "Card content - use Card.Header, Card.Body, Card.Footer sub-components",
-      "required": true
-    },
-    "variant": {
-      "type": "enum",
-      "description": "Visual style of the card surface",
-      "default": "default",
-      "required": false,
-      "values": ["default", "outlined", "outline", "elevated", "stat", "panel"],
-      "constraints": [
-        "Use \"elevated\" sparingly to maintain visual hierarchy",
-        "Use \"stat\" for compact dashboard metric tiles",
-        "Use \"panel\" with Card.Header divided and padding=\"none\" for dashboard panels"
-      ]
-    },
-    "padding": {
-      "type": "enum",
-      "description": "Internal padding size",
-      "default": "md",
-      "required": false,
-      "values": ["none", "sm", "md", "lg"]
-    },
-    "as": {
-      "type": "enum",
-      "description": "Semantic HTML element for the card root",
-      "default": "article",
-      "required": false,
-      "values": ["article", "div", "section"]
-    },
-    "style": {
-      "type": "object",
-      "description": "",
-      "required": false
-    }
-  },
-  "usage": {
-    "when": [
-      "Grouping related pieces of content together",
-      "Creating visual separation between content sections",
-      "Displaying a preview or summary of an item",
-      "Building dashboard widgets or tiles"
-    ],
-    "whenNot": [
-      "Simple text content that does not need grouping",
-      "Modal or dialog content (use Dialog component)",
-      "Navigation items (use List or Sidebar patterns)"
-    ],
-    "guidelines": [
-      "Use consistent card variants within the same context",
-      "Cards in a grid should have uniform sizing",
-      "Use elevated variant sparingly for emphasis",
-      "Use stat and panel variants for dashboard surfaces so spacing, border, and radius stay consistent",
-      "If a card is clickable, provide clear hover/focus affordances and prefer explicit buttons/links inside the card"
-    ],
-    "accessibility": [
-      "Card is a semantic container (article/div/section); onClick adds keyboard and role=\"button\" behavior, but explicit Button or Link actions are preferred",
-      "Card titles should be appropriate heading levels"
-    ]
-  },
-  "examples": [
-    {
-      "name": "Nested Heading",
-      "description": "Select the heading level required by the surrounding document outline",
-      "code": "<Card variant=\"panel\" padding=\"none\">\n  <Card.Header divided>\n    <Card.Title as=\"h4\">Nested panel</Card.Title>\n  </Card.Header>\n  <Card.Body padding=\"md\">Panel content</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Default",
-      "description": "Standard quiet card surface",
-      "code": "<Card>\n  <Card.Header>\n    <Card.Title>Card Title</Card.Title>\n    <Card.Description>A brief description</Card.Description>\n  </Card.Header>\n  <Card.Body>Card content goes here.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Outlined",
-      "description": "Card with border instead of shadow",
-      "code": "<Card variant=\"outlined\">\n  <Card.Header>\n    <Card.Title>Outlined Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Content with border.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Outline",
-      "description": "Card with border, using the \"outline\" alias for \"outlined\"",
-      "code": "<Card variant=\"outline\">\n  <Card.Header>\n    <Card.Title>Outline Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Uses the Radix/Shadcn-style alias.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Elevated",
-      "description": "Card with prominent shadow for emphasis",
-      "code": "<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Featured Item</Card.Title>\n  </Card.Header>\n  <Card.Body>Important content.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Stat",
-      "description": "Compact metric tile for dashboard grids",
-      "code": "<Card variant=\"stat\">\n  <Stack gap=\"md\">\n    <Stack gap=\"xs\">\n      <Text as=\"strong\" size=\"2xl\" weight=\"bold\" letterSpacing=\"tighter\" tabularNums>94%</Text>\n      <Text as=\"p\" size=\"sm\" color=\"secondary\">Component coverage</Text>\n    </Stack>\n    <Progress value={94} variant=\"success\" size=\"sm\" aria-label=\"Component coverage progress\" />\n  </Stack>\n</Card>"
-    },
-    {
-      "name": "Panel",
-      "description": "Dashboard panel with a divided header and body-owned spacing",
-      "code": "<Card variant=\"panel\" padding=\"none\">\n  <Card.Header divided>\n    <Card.Title>System states</Card.Title>\n  </Card.Header>\n  <Card.Body padding=\"md\">\n    Panel content\n  </Card.Body>\n</Card>"
-    },
-    {
-      "name": "Interactive",
-      "description": "Clickable card surface (root stays a semantic container)",
-      "code": "<Card as=\"section\" onClick={() => alert('Card clicked!')}>\n  <Card.Header>\n    <Card.Title>Click Me</Card.Title>\n    <Card.Description>This card is interactive</Card.Description>\n  </Card.Header>\n  <Card.Body>Click anywhere on this card.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "Section Root",
-      "description": "Use the as prop to match the surrounding document semantics",
-      "code": "<Card as=\"section\" aria-labelledby=\"billing-card-title\">\n  <Card.Header>\n    <Card.Title id=\"billing-card-title\">Billing Summary</Card.Title>\n  </Card.Header>\n  <Card.Body>Section semantics can improve document structure for grouped content.</Card.Body>\n</Card>"
-    },
-    {
-      "name": "With Footer",
-      "description": "Card with header, body, and footer",
-      "code": "<Card>\n  <Card.Header>\n    <Card.Title>Card with Footer</Card.Title>\n    <Card.Description>Complete card layout</Card.Description>\n  </Card.Header>\n  <Card.Body>Main content area.</Card.Body>\n  <Card.Footer>Footer actions go here</Card.Footer>\n</Card>"
-    },
-    {
-      "name": "Content Only",
-      "description": "Card with just body content",
-      "code": "<Card>\n  <Card.Body>Just content, no header or footer.</Card.Body>\n</Card>"
-    }
-  ],
-  "relations": [
-    {
-      "component": "Grid",
-      "relationship": "parent",
-      "note": "Use Grid + Card for responsive card layouts"
-    },
-    {
-      "component": "List",
-      "relationship": "alternative",
-      "note": "Use List for linear, text-first layouts"
-    }
-  ],
-  "contract": {
-    "propsSummary": [
-      "variant: default|outlined|outline|elevated|stat|panel (default: default)",
-      "padding: none|sm|md|lg (default: md)",
-      "as: article|div|section (default: article) - card root element",
-      "onClick: (event) => void - click handler on root (adds role/button keyboard behavior)",
-      "Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer",
-      "Card.Body padding: none|sm|md|lg - use for panel body spacing"
-    ],
-    "a11yRules": ["A11Y_CARD_HEADING", "A11Y_CARD_INTERACTIVE"]
-  },
-  "ai": {
-    "compositionPattern": "compound",
-    "subComponents": ["Header", "Title", "Description", "Body", "Footer"],
-    "requiredChildren": ["Body"],
-    "commonPatterns": [
-      "<Card><Card.Body>{content}</Card.Body></Card>",
-      "<Card><Card.Header><Card.Title>{title}</Card.Title></Card.Header><Card.Body>{content}</Card.Body></Card>",
-      "<Card><Card.Header><Card.Title>{title}</Card.Title><Card.Description>{desc}</Card.Description></Card.Header><Card.Body>{content}</Card.Body><Card.Footer>{actions}</Card.Footer></Card>"
-    ]
-  },
-  "provenance": {
-    "source": "migrated",
-    "verified": false,
-    "frameworkSupport": "native",
-    "extractedAt": "2026-03-13T23:18:51.869Z"
-  }
-}