@decantr/content 3.8.0

package/patterns/cta-banner.json

@@ -0,0 +1,103 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "cta-banner",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "CTA Banner",
+  "description": "Full-width gradient call-to-action banner with bold headline, supporting subtext, and a prominent action button. Conversion-focused section designed to sit near the bottom of landing pages. Features a multi-stop gradient background that spans the full viewport width.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button"
+  ],
+  "contained": false,
+  "default_preset": "gradient",
+  "presets": {
+    "gradient": {
+      "description": "Full-width section with a vibrant multi-stop gradient background (coral -> amber -> cyan -> green at 135deg). Dark text on the bright gradient. Centered layout with: bold headline (2.2rem, dark), supporting paragraph (1.1rem, dark/70%), and a dark pill button. Generous padding (100px vertical). The gradient creates a strong visual break from dark content sections above and below.",
+      "components": [
+        "Button"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_py[100px] _px6 _textc _rel _z[1]",
+        "slots": {
+          "headline": "Bold heading with _fs[2.2rem] _fw700 _fgdark _mb3 _ls[-0.02em]. Direct, action-oriented text like 'Ready to Build Something Great?'",
+          "subtext": "Supporting paragraph with _fs[1.1rem] _fgdark/70 _mb8. Brief value proposition or urgency statement.",
+          "cta-button": "Dark pill Button: _inline-flex _items[center] _gap2 _py3 _px9 _bgdark _fgwhite _fw700 _fs[1rem] _border[none] _rounded[100px] _transition. Hover: translateY(-2px) with dark box-shadow."
+        }
+      }
+    },
+    "dark": {
+      "description": "Dark background section with colored text and a colored pill button. Reversed contrast from the gradient preset. Uses the dark app background with a vibrant accent-colored headline, muted subtext, and a primary-colored pill button. Subtler visual treatment, good for sections that should feel integrated with the overall dark theme.",
+      "components": [
+        "Button"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_py[100px] _px6 _textc _rel _z[1] _bgbg",
+        "slots": {
+          "headline": "Bold heading with _fs[2.2rem] _fw700 _fgprimary _mb3 _ls[-0.02em]. Uses the brand accent color.",
+          "subtext": "Supporting paragraph with _fs[1.1rem] _fgmuted _mb8.",
+          "cta-button": "Primary pill Button: _rounded[100px] _bgprimary _fgwhite _fw700 _py3 _px9. Hover lifts with shadow."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "hero",
+    "atoms": "_py[100px] _px6 _textc _rel _z[1]",
+    "slots": {
+      "headline": "Bold, conversion-focused headline",
+      "subtext": "Supporting value proposition text",
+      "cta-button": "Prominent pill-shaped action button"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": [
+      "cta-click"
+    ]
+  },
+  "visual_brief": "Full-viewport-width banner with a multi-stop gradient background (flowing from primary through accent colors). A bold, large headline centered in the banner delivers the conversion message. Below the headline, a single line of supporting subtext in slightly lighter weight. A prominent pill-shaped action button (rounded-full, primary contrast colors) sits centered below the text. The dark preset uses a dark solid background instead of gradient. Generous vertical padding (py-16 to py-24) creates breathing room.",
+  "layout_hints": {
+    "single_focus": "CTA banner should resolve to one obvious action. Avoid secondary utility controls inside the banner unless the route explicitly requires them.",
+    "contrast": "Keep the button and text contrast extremely strong against the gradient background so the section remains legible in both dark and light-adjacent contexts.",
+    "section_break": "Use the banner as a clear conversion moment near the end of a narrative flow, not as a generic filler block."
+  },
+  "responsive": {
+    "mobile": "Text scales down slightly. Button goes full-width with generous padding. Vertical padding reduces. Headline may wrap to two lines.",
+    "tablet": "Standard centered layout. Button at natural width. Comfortable padding.",
+    "desktop": "Full impact — large headline, generous whitespace, button with hover scale effect."
+  },
+  "motion": {
+    "micro": "Button hover and press states may use a compact lift or brightness change. Background gradients should remain stable instead of constantly shifting.",
+    "transitions": "Banner entrances should feel premium but restrained: fade-up or soft scale over 220-320ms.",
+    "ambient": "If the gradient breathes, keep the animation very low amplitude so the CTA remains readable and calm."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "glow-hover",
+    "scale-hover"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Call to action banner",
+    "keyboard": [
+      "Tab should move directly to the primary CTA."
+    ],
+    "announcements": [
+      "Headline and value proposition should be announced before the CTA control."
+    ],
+    "focus_management": "The primary action should be the first interactive target inside the banner and should receive a visible focus treatment that still contrasts against the banner background."
+  }
+}

package/patterns/cta-section.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "cta-section",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "CTA Section",
+  "description": "Full-width call-to-action section with headline, description, and action buttons",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button"
+  ],
+  "contained": false,
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Centered headline + subtext + primary/secondary buttons. Background can have gradient or subtle pattern.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _col _items[center] _text[center] _py12 _px4 _gap4",
+        "slots": {
+          "headline": "Section heading with _heading2, centered",
+          "description": "Supporting paragraph with _body _fgmuted _mw[640px]",
+          "cta-group": "Horizontal Button group with _flex _gap3, primary + secondary"
+        }
+      }
+    },
+    "split": {
+      "description": "Two-column: text on left, image/illustration on right",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_grid _gc1 _lg:gc2 _gap6 _items[center] _py8",
+        "slots": {
+          "text-col": "Left column with headline, description, and CTA buttons: _flex _col _gap4",
+          "headline": "Section heading with _heading2",
+          "description": "Supporting paragraph with _body _fgmuted",
+          "cta-group": "Horizontal Button group with _flex _gap3",
+          "media-col": "Right column with image or illustration"
+        }
+      }
+    },
+    "banner": {
+      "description": "Compact horizontal bar with text on left, single button on right. Good for inline CTAs between content sections.",
+      "components": [
+        "Button"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _justify[between] _items[center] _py4 _px6 _rounded _bgprimary/10",
+        "slots": {
+          "text": "Inline text with _body _fontmedium",
+          "cta": "Single primary Button on the right"
+        }
+      }
+    }
+  },
+  "visual_brief": "Full-width call-to-action section with generous vertical padding (py12) and centered content. A bold heading2-scale headline sits at top, followed by a supporting paragraph in muted text constrained to 640px max-width for readability. Two CTA buttons arranged horizontally below — the primary button filled with brand color, the secondary as a ghost/outlined variant. The section background can carry a subtle gradient, pattern, or elevated surface treatment to stand out from adjacent content sections. The split preset places text and CTA on the left with an illustration or image on the right. The banner preset is a compact horizontal bar with accent background tint, text on the left and a single button on the right.",
+  "layout_hints": {
+    "shell_rhythm": "CTA sections should feel like a deliberate break in the page rhythm, but they still inherit the shell-owned width and spacing system. Do not add extra page wrappers around them.",
+    "cta_priority": "The primary CTA must be visually dominant, but secondary CTAs should still feel aligned and intentional rather than like an afterthought.",
+    "background_treatment": "Use a distinct but controlled background treatment so the CTA reads as a purposeful moment, not as a random card dropped into the page."
+  },
+  "responsive": {
+    "mobile": "Standard preset: content stacks vertically, full-width. CTA buttons stack vertically at full width. Split preset becomes single column with image below text. Banner preset wraps text and button vertically.",
+    "tablet": "Standard stays centered. Split preset activates two-column grid. Banner remains horizontal. Padding adjusts to py8.",
+    "desktop": "Full layout as designed. Standard centered with generous spacing. Split shows two-column with image. Banner compact and horizontal with accent background."
+  },
+  "motion": {
+    "micro": "CTA buttons may lift or brighten subtly on hover and focus, but the section itself should remain visually stable.",
+    "transitions": "CTA sections can fade or reveal softly with the page flow over 200-300ms, avoiding large parallax or attention-seeking animation.",
+    "ambient": "Background gradients or highlights may breathe very subtly, but should never distract from the headline and CTA group."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "glow-hover"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Call to action section",
+    "keyboard": [
+      "Tab moves through the CTA buttons in visual order."
+    ],
+    "announcements": [
+      "Headline and supporting copy should be announced before CTA buttons so the user understands the action context."
+    ],
+    "focus_management": "Do not trap focus in CTA groups. Buttons should remain easy to reach after preceding page content in normal reading order."
+  },
+  "default_layout": {
+    "layout": "hero",
+    "atoms": "_flex _col _items[center] _text[center] _py12 _px4 _gap4",
+    "slots": {
+      "headline": "Section heading, centered",
+      "description": "Supporting paragraph",
+      "cta-group": "Action buttons"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": [
+      "cta-click"
+    ]
+  }
+}

package/patterns/cta.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "cta",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Call to Action",
+  "description": "Prominent call-to-action section with headline, supporting text, and action buttons",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Centered headline + subtext + primary/secondary buttons with optional background treatment",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "hero",
+        "atoms": "_flex _col _items[center] _text[center] _py12 _px4 _gap4",
+        "slots": {
+          "headline": "Section heading with _heading2, centered",
+          "description": "Supporting paragraph with _body _fgmuted _mw[640px]",
+          "cta-group": "Horizontal Button group with _flex _gap3, primary + secondary"
+        }
+      }
+    },
+    "split": {
+      "description": "Two-column: text on left, image/illustration on right",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_grid _gc1 _lg:gc2 _gap6 _items[center] _py8",
+        "slots": {
+          "text-col": "Left column: headline, description, CTA buttons stacked: _flex _col _gap4",
+          "headline": "Section heading with _heading2",
+          "description": "Supporting paragraph with _body _fgmuted",
+          "cta-group": "Horizontal Button group with _flex _gap3",
+          "media-col": "Right column with image or illustration"
+        }
+      }
+    },
+    "banner": {
+      "description": "Compact horizontal bar with text on left, single button on right",
+      "components": [
+        "Button"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _justify[between] _items[center] _py4 _px6 _rounded _bgprimary/10",
+        "slots": {
+          "text": "Inline text with _body _fontmedium",
+          "cta": "Single primary Button on the right"
+        }
+      }
+    }
+  },
+  "visual_brief": "Full-width call-to-action section designed to drive user action. The standard preset centers a bold heading2-scale headline, a supporting paragraph in muted text constrained to 640px max-width, and two horizontally-arranged CTA buttons \u2014 primary filled and secondary ghost-outlined. The section has generous vertical padding (py12) and can carry a subtle gradient background, pattern texture, or elevated surface treatment to visually distinguish it from surrounding content. The split preset places the text and CTAs on the left column with an illustration, screenshot, or decorative image on the right. The banner preset is a compact single-row bar with a tinted background (primary at 10% opacity), text on the left, and a single action button on the right \u2014 useful as an inline CTA between content sections.",
+  "responsive": {
+    "mobile": "Standard: content stacks vertically, full-width. CTA buttons stack vertically at full width, primary on top. Split: becomes single column with image below text. Banner: wraps text and button vertically with centered alignment. Padding reduces to py8 px4.",
+    "tablet": "Standard stays centered with comfortable width. Split activates two-column grid. Banner remains horizontal. Padding at py10.",
+    "desktop": "Full layout \u2014 standard centered with py12. Split shows side-by-side columns with gap6. Banner compact horizontal with accent background."
+  },
+  "motion": {
+    "micro": "CTA button pulses with subtle scale(1.02) and shadow increase on idle after 3s, 1.5s duration loop. Button brightens on hover over 150ms.",
+    "transitions": "Section content fades up (translateY(16px) to 0, opacity 0 to 1) on viewport enter with 400ms ease."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "glow-hover",
+    "scale-hover"
+  ],
+  "accessibility": {
+    "role": "complementary",
+    "aria-label": "Call to action",
+    "keyboard": [
+      "Tab navigates to CTA buttons",
+      "Enter or Space activates the focused CTA button"
+    ],
+    "announcements": [
+      "Call to action section",
+      "Primary action: {button_text}"
+    ],
+    "focus_management": "Primary CTA button receives visible focus ring on Tab. Focus order: headline, description, primary button, secondary button."
+  },
+  "default_layout": {
+    "layout": "hero",
+    "atoms": "_flex _col _items[center] _text[center] _py12 _px4 _gap4",
+    "slots": {
+      "headline": "Section heading, centered",
+      "description": "Supporting paragraph",
+      "cta-group": "Action buttons"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": [
+      "cta-click"
+    ]
+  },
+  "layout_hints": {
+    "background_treatment": "CTA section should stand out from the rest of the page. Use a gradient background: linear-gradient(135deg, color-mix(in srgb, var(--d-primary) 8%, var(--d-bg)), color-mix(in srgb, var(--d-accent) 5%, var(--d-bg))). Or use a glassmorphic surface with backdrop-blur.",
+    "button_treatment": "The primary CTA button should be larger than standard buttons (py-3 px-8, text-lg). For neon themes, add a subtle glow on hover: box-shadow: 0 0 20px rgba(var(--d-primary-rgb), 0.3).",
+    "urgency": "Add a subtle visual urgency element \u2014 a small line of muted text below the button like \"Free for teams up to 5 agents\" or a trust indicator row (logos or badges). This prevents the CTA from feeling empty."
+  }
+}

package/patterns/data-source-connector.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "data-source-connector",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Data Source Connector",
+  "description": "Card-based interface for connecting to external data sources with status indicators, configuration forms, connection testing, and sync controls for integration management.",
+  "category": "integration",
+  "tags": [
+    "2026",
+    "integration",
+    "data-source",
+    "connector",
+    "sync",
+    "configuration",
+    "api"
+  ],
+  "components": [
+    "SourceCard",
+    "SourceIcon",
+    "ConnectionStatus",
+    "SyncButton",
+    "ConfigForm",
+    "TestConnectionButton",
+    "SourceCatalog"
+  ],
+  "default_preset": "catalog",
+  "presets": {
+    "catalog": {
+      "description": "Grid of available data source cards showing icons, names, and connection status — the starting view for browsing and initiating new connections",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _sm:gc2 _lg:gc3 _gap4 _py4 _w-full"
+      }
+    },
+    "connected": {
+      "description": "Filtered view showing only active connections with last sync time, sync status, and quick-action controls — for monitoring and managing established integrations",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _sm:gc2 _lg:gc3 _gap4 _py4 _w-full"
+      }
+    },
+    "setup": {
+      "description": "Configuration form panel for establishing or editing a data source connection — shows credential fields, host/port inputs, and test connection workflow with inline validation",
+      "layout": {
+        "layout": "center",
+        "atoms": "_flex _col _gap6 _maxw-[560px] _mx-auto _py6"
+      }
+    }
+  },
+  "visual_brief": "Responsive grid of SourceCard components. Each card is a surface card (border, rounded-lg, padding 24px) containing: a large recognizable SourceIcon at the top center (48px, e.g. PostgreSQL blue elephant, MySQL dolphin, Stripe purple logo, Snowflake snowflake, MongoDB green leaf, Google Sheets green document icon, Salesforce cloud), the source name in semibold text below the icon, a short one-line description in muted text (e.g. 'Relational database'), and a ConnectionStatus badge at the bottom. Connected sources show a green dot + 'Connected' label with 'Last sync: 2m ago' in small muted text below. Disconnected sources show a gray dot + 'Not connected' and the card has slightly reduced opacity (0.85). Sources with sync errors show a red dot + 'Error' with a warning icon. Hovering a card elevates it with shadow-md and a subtle border accent. Clicking a disconnected card opens the setup panel: a centered form card that slides in from the right (or replaces the grid on mobile). The ConfigForm contains: the source icon and name at the top, a horizontal divider, then input fields specific to the source type (e.g. for PostgreSQL: Host, Port, Database Name, Username, Password with a show/hide toggle, SSL toggle). Each field has a label and placeholder text. Below the fields, a TestConnectionButton: a secondary outlined button that on click shows a spinner, then either a green checkmark + 'Connection successful' or a red X + error message with detail text. Below the test button, a primary 'Save & Connect' button (disabled until test passes). For connected sources, clicking the card shows a detail panel with: connection info summary (host, database, masked credentials), last sync timestamp, sync duration, record counts, a SyncButton (secondary button with rotating arrows icon during sync, 'Sync Now' label), a 'Disconnect' destructive text button, and an 'Edit' button to modify configuration. The SyncButton shows rotating arrows during active sync with a progress label ('Syncing... 45%'), then transitions to a checkmark + 'Synced' on completion.",
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _sm:gc2 _lg:gc3 _gap4 _py4",
+    "slots": {
+      "source-catalog": "The main grid container displaying SourceCard components. Shows all available data sources in a responsive grid (1 column mobile, 2 tablet, 3 desktop). A search input above the grid filters cards by name. Optional category tabs (Databases, APIs, Files, Warehouses) filter the catalog. An 'Add Custom Source' card with a dashed border and plus icon sits at the end of the grid.",
+      "source-card": "Repeating card slot for each data source. Surface card with: SourceIcon (48px, centered, recognizable brand icon or generic database/API icon), source name (semibold, centered below icon), source description (muted, one-line, centered), and ConnectionStatus badge at bottom. Card states: disconnected (normal surface, gray status dot), connected (normal surface, green status dot, last sync time), error (surface with subtle red-tinted border, red status dot, error message). Hover: elevate with shadow-md + border-accent hint. Click: opens setup form (if disconnected) or detail panel (if connected).",
+      "config-form": "Setup/edit panel for configuring a data source connection. Header: source icon (32px) + source name + close X button. Body: form fields varying by source type — common fields include Host/URL input, Port number input, Database/Resource name, Authentication section (username + password with visibility toggle, or API key field, or OAuth connect button). SSL/TLS toggle switch. Advanced section (collapsible): connection timeout, max pool size, custom parameters as key-value pairs. Footer: TestConnectionButton (outlined, shows spinner → success/failure inline) and primary 'Save & Connect' button (disabled until test succeeds). For editing existing connections, fields are pre-filled and the button reads 'Save Changes'.",
+      "connection-detail": "Panel shown when clicking a connected source card. Shows: connection summary (host, database, credentials masked as dots), sync statistics (last sync time, duration, records synced, errors), SyncButton with label and rotating-arrows animation during sync, a 'Disconnect' destructive button with confirmation dialog, and an 'Edit Configuration' button that switches to the config form."
+    }
+  },
+  "responsive": {
+    "mobile": "Grid becomes single column. Source cards are full-width. Config form opens as a full-screen overlay or pushed view. Test connection result shows inline. Search input full-width above cards. Category tabs become a horizontal scrollable chip row.",
+    "tablet": "Two-column grid. Config form opens as a right-side panel (50% width) overlaying the grid. Comfortable card sizes with full icon and text visibility.",
+    "desktop": "Three-column grid with generous card spacing. Config form opens as a slide-out panel from the right (400px fixed width) with the grid still visible and dimmed behind. Connection detail can show as a popover or the same slide-out panel."
+  },
+  "layout_hints": {
+    "catalog_priority": "Lead with source identity and connection state first. Setup and detail panels should feel like progressive disclosure attached to the selected source rather than a separate admin surface.",
+    "status_clarity": "Connected, disconnected, and error states should remain immediately legible before the user reads any deeper configuration detail.",
+    "panel_attachment": "Config and connection-detail panels should feel physically tied to the selected source card so users never lose track of what they are editing."
+  },
+  "layout_hints": {
+    "catalog_priority": "Lead with source identity and connection state first. Setup and detail panels should feel like progressive disclosure attached to the selected source rather than a separate admin surface.",
+    "status_clarity": "Connected, disconnected, and error states should remain immediately legible before the user reads any deeper configuration detail.",
+    "panel_attachment": "Config and connection-detail panels should feel physically tied to the selected source card so users never lose track of what they are editing."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-2px) + shadow-md + border-color accent/30 150ms ease-out",
+      "status-dot-pulse": "scale(1→1.3→1) 2s ease-in-out infinite on connected status",
+      "test-button-press": "scale(0.97) 100ms ease-in"
+    },
+    "transitions": {
+      "config-panel-open": "translateX(100%)→0 + opacity 0→1 300ms ease-out",
+      "config-panel-close": "translateX(0)→100% + opacity 1→0 250ms ease-in",
+      "test-success": "spinner-fade-out 200ms + checkmark-scale(0→1) 300ms ease-out bounce",
+      "test-failure": "spinner-fade-out 200ms + error-icon-shake translateX(-3px→3px→0) 300ms ease-out",
+      "sync-complete": "rotating-arrows-stop + checkmark-fade-in 400ms ease-out",
+      "card-connect": "border-color gray→accent + status-dot-color gray→green 500ms ease-out"
+    },
+    "ambient": {
+      "sync-in-progress": "rotate(0→360deg) 1.2s linear infinite on sync arrows icon",
+      "error-glow": "box-shadow red/10 pulse 2s ease-in-out infinite on error status cards"
+    }
+  },
+  "interactions": [
+    "inline-edit",
+    "click-select",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "DataSourceConnector": "Container(d-section, flex-col, gap-4) > [SearchBar?(d-control) + CategoryTabs?(d-control) + SourceCatalog(d-surface, grid: responsive)] > SourceCard(d-interactive, hover-elevate)* > [SourceIcon(d-annotation, centered, 48px) + SourceName(d-data, semibold) + SourceDescription(d-annotation, muted) + ConnectionStatus(d-annotation, dot + label)] + ConfigForm?(d-surface, slide-panel)",
+    "SourceCatalog": "Grid(d-surface, responsive-columns) > SourceCard(d-interactive)[] + AddCustomCard(d-interactive, dashed-border)",
+    "SourceCard": "Card(d-interactive, surface, rounded-lg, hover: elevate) > [SourceIcon(d-annotation, brand-icon, 48px, centered) + SourceName(d-data, semibold, centered) + SourceDescription(d-annotation, muted, one-line) + ConnectionStatus(d-annotation) > [StatusDot(color: status) + StatusLabel + LastSync?(muted, small)]]",
+    "ConfigForm": "Panel(d-surface, slide-from-right, padding-lg) > [Header > [SourceIcon(32px) + SourceName + CloseButton(d-interactive)] + Divider + FormFields(d-data, flex-col, gap-4) > [Input(d-interactive, type: per-field)]* + TestConnectionButton(d-interactive, secondary, inline-result) + SaveButton(d-interactive, primary, disabled-until-tested)]",
+    "ConnectionDetail": "Panel(d-surface) > [ConnectionSummary(d-data) + SyncStats(d-data) > [LastSync + Duration + RecordCount] + SyncButton(d-interactive, icon: rotating-arrows) + EditButton(d-interactive, secondary) + DisconnectButton(d-interactive, destructive)]"
+  },
+  "accessibility": {
+    "role": "grid",
+    "aria-label": "Data source connector catalog and configuration",
+    "keyboard": [
+      "Arrow keys: navigate between source cards in the grid",
+      "Enter: open configuration form or connection detail for focused card",
+      "Tab: move between form fields within config panel",
+      "Escape: close config panel or connection detail",
+      "T: trigger test connection (when config form is open)",
+      "S: trigger sync (when connection detail is open)",
+      "Backspace/Delete: disconnect source (with confirmation)"
+    ],
+    "announcements": [
+      "{source_name}: {connection_status}",
+      "Configuration form opened for {source_name}",
+      "Testing connection to {source_name}...",
+      "Connection test {result}: {detail}",
+      "Connected to {source_name} successfully",
+      "Sync started for {source_name}",
+      "Sync complete: {record_count} records in {duration}",
+      "Disconnected from {source_name}"
+    ]
+  }
+}

package/patterns/data-table.json

@@ -0,0 +1,138 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "data-table",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Data Table",
+  "description": "Sortable, filterable, paginated data table with row selection",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Table",
+        "Checkbox",
+        "Button",
+        "Input",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Table",
+    "Checkbox",
+    "Button",
+    "Input",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full-featured table with column headers, sortable columns, row selection checkboxes, pagination footer",
+      "components": [
+        "Table",
+        "Checkbox",
+        "Button",
+        "Input",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap4 _w[100%] _overflow[auto]",
+        "slots": {
+          "toolbar": "Top row with optional search Input and action Buttons",
+          "table-header": "Column headers with sort controls",
+          "table-body": "Data rows with optional row selection Checkbox",
+          "pagination": "Footer with page info and prev/next Buttons"
+        }
+      }
+    },
+    "compact": {
+      "description": "Denser rows, no selection, simpler pagination (prev/next only)",
+      "components": [
+        "Table",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap2 _w[100%] _overflow[auto]",
+        "slots": {
+          "table-header": "Column headers without sort controls",
+          "table-body": "Dense data rows without selection",
+          "pagination": "Simple prev/next footer"
+        }
+      }
+    }
+  },
+  "visual_brief": "Full-width data table with a sticky header row. Header cells use uppercase, small, muted text with sort-direction arrows on sortable columns. Data rows have consistent vertical padding (py3) for scan-ability, with subtle zebra-stripe background on hover. Row-selection checkboxes align in the first column. Active selections highlight the row with a faint primary-color tint. A toolbar above the table holds a search input on the left and action buttons (export, delete) on the right. Pagination controls at the bottom show current range, total count, and prev/next buttons with disabled states at boundaries.",
+  "responsive": {
+    "mobile": "Table transforms into a stacked card list. Each row becomes a vertical card with label-value pairs. Toolbar search goes full-width. Pagination simplifies to prev/next only. Horizontal scroll is avoided entirely.",
+    "tablet": "Table displays with horizontal scroll if columns exceed viewport. Sticky first column for row identifiers. Toolbar remains single row.",
+    "desktop": "Full table layout with all columns visible. Sticky header on scroll. Toolbar with search, filters, and bulk action buttons. Full pagination with page numbers."
+  },
+  "motion": {
+    "micro": "Row hover highlights with 150ms background-color transition. Sort arrow rotates 180deg on direction change with 200ms ease. Checkbox scales briefly on check (scale 1.1 for 100ms).",
+    "transitions": "Rows entering from filter/search fade in with 200ms opacity transition. Bulk-selected rows highlight with a slide-in left-border accent over 150ms."
+  },
+  "interactions": [
+    "keyboard-navigation",
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "Table uses semantic <table>, <thead>, <tbody>, <th>, <td> elements. Sort buttons are <button> inside <th> with aria-sort attribute.",
+    "keyboard": [
+      "Arrow keys navigate cells.",
+      "Space toggles row selection.",
+      "Enter activates row action.",
+      "Tab moves between toolbar, table, and pagination."
+    ],
+    "screen_reader": "aria-label on table describes content. aria-sort on sortable headers. Live region announces sort changes and selection count. Pagination uses nav with aria-label."
+  },
+  "layout_hints": {
+    "toolbar_balance": "Search, filters, and bulk actions should feel like one operational control band, not several detached widgets.",
+    "row_density": "Keep row spacing scannable and consistent. Dense data tables should still preserve a clear visual rhythm and avoid accidental crowding.",
+    "mobile_fallback": "The card-list fallback should keep label-value semantics clear instead of becoming a generic stack of text."
+  },
+  "default_layout": {
+    "layout": "column",
+    "atoms": "_flex _col _gap4 _w[100%] _overflow[auto]",
+    "slots": {
+      "toolbar": "Top row with optional search Input and action Buttons",
+      "table-header": "Column headers with sort controls",
+      "table-body": "Data rows with optional row selection Checkbox",
+      "pagination": "Footer with page info and prev/next Buttons"
+    }
+  },
+  "io": {
+    "consumes": [
+      "search",
+      "filters",
+      "data"
+    ],
+    "produces": [
+      "selection",
+      "sort"
+    ],
+    "actions": [
+      "export",
+      "delete",
+      "edit"
+    ]
+  },
+  "composition": {
+    "DataTable": "Container(d-data, full-width) > [Toolbar + Table + Pagination]",
+    "Toolbar": "Row(d-control) > [SearchInput(d-control) + ActionButtons(d-interactive)]",
+    "Table": "Table(d-data) > [TableHeader > HeaderCell(sortable?, sort-indicator?)[] + TableBody > DataRow(d-data-row, hoverable, striped?)[]]",
+    "DataRow": "Row > [Checkbox?(d-control) + DataCell(d-data-cell)[]]",
+    "Pagination": "Row(d-control) > [PageInfo(text-muted) + PageButtons(d-interactive, variant: ghost)[]]"
+  }
+}