@decantr/content 3.8.0

package/patterns/command-palette.json

@@ -0,0 +1,115 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "command-palette",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Command Palette",
+  "description": "Cmd+K style command search overlay with fuzzy search, categories, and keyboard navigation.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full command palette with categories and recent commands",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _inset0 _flex _center _z[100] _bg[rgba(0,0,0,0.8)]",
+        "slots": {
+          "search": "Fuzzy search input",
+          "results": "Command list with categories",
+          "preview": "Optional command preview/help",
+          "recent": "Recent commands section"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Simple search-only command palette",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _inset0 _flex _center _z[100] _bg[rgba(0,0,0,0.8)]",
+        "slots": {
+          "search": "Search input",
+          "results": "Flat command list"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_fixed _inset0 _flex _center _z[100]",
+    "slots": {
+      "search": "Fuzzy search input",
+      "results": "Command list",
+      "preview": "Command preview"
+    }
+  },
+  "features": [
+    "fuzzy-search",
+    "keyboard-navigation",
+    "command-categories",
+    "shortcut-hints",
+    "recent-commands"
+  ],
+  "keyboard_shortcuts": {
+    "Ctrl+K": "Open palette",
+    "Cmd+K": "Open palette (Mac)",
+    "Escape": "Close palette",
+    "ArrowUp": "Previous command",
+    "ArrowDown": "Next command",
+    "Enter": "Execute command"
+  },
+  "visual_brief": "Centered modal overlay with a large search input at the top featuring a magnifying glass icon and placeholder text ('Type a command...'). Below the input, a scrollable results list shows matched commands grouped by category (Navigation, Actions, Settings) with muted category headers. Each result row displays an icon on the left, command name in medium weight, description in muted text, and a keyboard shortcut badge on the right. The currently selected item has a highlighted surface background. The overlay has a backdrop blur and rounded corners with a subtle border.",
+  "layout_hints": {
+    "result_priority": "Search input is the hero. Results should read like a decisive command list, not a generic menu. Category grouping must support scanning without dominating the surface.",
+    "overlay_balance": "The palette should feel compact and intentional. Do not let preview panels, badges, or secondary metadata turn it into a cluttered dialog.",
+    "shortcut_visibility": "Keyboard hints should support command discovery, but should not overpower the command label and description.",
+    "required_wrapping": "The d-palette element MUST be rendered inside d-modal[data-align=\"top\"] with a d-modal-backdrop sibling. Without the d-modal wrapper the palette renders as a top-level full-width strip pinned to the viewport. The d-modal provides positioning + max-width centering; d-modal-backdrop provides scrim + click-to-close. This is non-negotiable.",
+    "section_grouping": "Commands MUST be grouped into sections via d-palette-section eyebrow rows. The blueprint provides `navigation.command_palette.commands` with explicit `section` strings (e.g., \"Navigation\", \"Account\") — honor them. A flat alphabetical list is wrong.",
+    "row_anatomy": "Each d-palette-row has 3 slots: [Lucide icon (16px) | label (text-sm) | d-kbd hotkey (right-aligned mono)]. The hotkey slot can be empty for commands without bindings, but the slot rhythm must be preserved for visual alignment."
+  },
+  "responsive": {
+    "mobile": "Palette takes full screen width with slight horizontal margin. Results list fills available height. No keyboard shortcut badges shown. Touch-optimized row heights.",
+    "tablet": "Centered overlay at 560px width. Standard row heights with shortcut badges visible.",
+    "desktop": "Centered overlay at 640px max-width. Full keyboard navigation with shortcut badges. Preview panel optionally visible on the right for selected commands."
+  },
+  "motion": {
+    "micro": "Result hover, selection, and shortcut emphasis may animate subtly over 120-180ms.",
+    "transitions": "Palette open, close, and result filtering should feel immediate but polished: fade and slight scale or slide over 150-220ms."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "keyboard-navigation",
+    "focus-trap",
+    "click-select"
+  ],
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Command palette",
+    "keyboard": [
+      "Arrow keys move between results.",
+      "Enter activates the selected command.",
+      "Escape closes the palette and returns focus to the invoking trigger."
+    ],
+    "announcements": [
+      "Result count and current selection should be announced clearly as the query changes."
+    ],
+    "focus_management": "When the palette opens, move focus to the search field. On close, restore focus to the invoking control or command trigger."
+  }
+}

package/patterns/command-rail.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "command-rail",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Command Rail",
+  "description": "Horizontal or stacked rail of short command snippets for CLI-driven workflows. Used to expose init, refresh, health, publish, or registry commands near the content they affect.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "CodeBlock",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "CodeBlock",
+    "Button",
+    "Badge",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "copyable",
+  "presets": {
+    "copyable": {
+      "description": "A compact command row with label, monospace command, optional context badge, and copy button.",
+      "components": [
+        "CodeBlock",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3",
+        "slots": {
+          "command-label": "Short purpose label such as Init, Refresh, Health, or Publish.",
+          "command-snippet": "One-line monospace command with wrapping protection.",
+          "command-meta": "Optional shell, package manager, or target context.",
+          "copy-action": "Icon button with copied state."
+        }
+      }
+    },
+    "rail": {
+      "description": "Horizontal rail of two to four commands. Each command remains compact and independently copyable.",
+      "components": [
+        "CodeBlock",
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc2 _gap3",
+        "slots": {
+          "command-card": "Compact copyable command surface."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3",
+    "slots": {
+      "command-label": "Command purpose label",
+      "command-snippet": "One-line CLI command",
+      "command-meta": "Optional context badge",
+      "copy-action": "Copy button"
+    }
+  },
+  "visual_brief": "A practical command surface that feels crisp and developer-native without becoming a terminal dump. The command should be the hero of each row, with labels and copy controls kept compact. This pattern should make it obvious what to run next while preserving polish and accessibility.",
+  "responsive": {
+    "mobile": "Stack commands vertically. Commands wrap or horizontally scroll inside their own code region without forcing page overflow.",
+    "tablet": "Two-column command rail when commands are short.",
+    "desktop": "Horizontal or two-column rail. Align copy buttons consistently."
+  },
+  "layout_hints": {
+    "command_length": "Keep commands short enough to scan. Move long explanatory flags into docs or helper text.",
+    "copy_state": "Copy buttons should have an accessible label and a copied confirmation state.",
+    "context": "Use badges for shell, package manager, or project target only when they prevent ambiguity."
+  },
+  "motion": {
+    "micro": "Copy actions can briefly swap icon/state. Hover should sharpen the command surface without moving layout.",
+    "transitions": "Copied confirmation should be immediate and fade out after a short delay."
+  },
+  "interactions": [
+    "click-select",
+    "keyboard-navigation",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Command rail",
+    "keyboard": [
+      "Copy buttons should be reachable after each command snippet."
+    ],
+    "announcements": [
+      "Copied state should be announced with aria-live or an equivalent status pattern."
+    ],
+    "focus_management": "Focus should not enter decorative code tokens one by one. One command and one copy action per item is enough."
+  },
+  "composition": {
+    "CommandRail": "StackOrGrid > CommandItem[]",
+    "CommandItem": "Surface > [Label + CodeSnippet + Meta? + CopyButton]",
+    "CopyButton": "Button(icon-only, aria-label, copied-status)"
+  },
+  "io": {
+    "consumes": [
+      "commands"
+    ],
+    "produces": [
+      "copied-command"
+    ],
+    "actions": [
+      "command-copy"
+    ]
+  }
+}

package/patterns/comment-thread.json

@@ -0,0 +1,155 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "comment-thread",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Comment Thread",
+  "description": "Inline or sidebar comment discussions with reply threading, @mentions, reactions, and resolve functionality.",
+  "dependencies": {
+    "patterns": {
+      "mention-popup": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Button",
+        "Textarea",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "Button",
+    "Textarea",
+    "icon"
+  ],
+  "default_preset": "sidebar",
+  "presets": {
+    "sidebar": {
+      "description": "Full thread display in aside panel",
+      "components": [
+        "Avatar",
+        "Button",
+        "Textarea",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _gap3 _p4",
+        "slots": {
+          "comments": "List of comment messages",
+          "reply-input": "New reply composer",
+          "actions": "Thread-level actions (resolve, delete)"
+        }
+      }
+    },
+    "inline": {
+      "description": "Compact thread attached to text selection",
+      "components": [
+        "Avatar",
+        "Button",
+        "Textarea",
+        "icon"
+      ],
+      "layout": {
+        "layout": "popover",
+        "atoms": "_absolute _w[320px] _bg[var(--surface)] _shadow _r2 _border",
+        "slots": {
+          "anchor": "Connection line to commented text",
+          "comments": "Compact comment list",
+          "reply-input": "Inline reply field"
+        }
+      }
+    },
+    "resolved": {
+      "description": "Collapsed resolved thread indicator",
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap2 _p2 _bg[var(--surface-raised)] _r1",
+        "slots": {
+          "indicator": "Resolved checkmark",
+          "summary": "Brief thread summary",
+          "expand": "Expand to view"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "column",
+    "atoms": "_flex _col _gap3",
+    "slots": {
+      "anchor": "Connection to commented content",
+      "comments": "List of comment messages with avatar, author, timestamp",
+      "reply-input": "Textarea for new replies",
+      "actions": "Resolve, delete, react actions",
+      "resolved-indicator": "Checkmark when thread is resolved"
+    }
+  },
+  "io": {
+    "consumes": [
+      "thread",
+      "currentUser"
+    ],
+    "produces": [
+      "reply",
+      "resolve",
+      "react"
+    ],
+    "actions": [
+      "add-reply",
+      "resolve-thread",
+      "reopen-thread",
+      "add-reaction",
+      "delete-comment",
+      "edit-comment"
+    ]
+  },
+  "visual_brief": "Vertical thread of comment messages with an anchor line connecting to the commented content. Each comment shows a small avatar, author name in bold, timestamp in muted text, and the comment body. Replies indent slightly with a thin left border. A textarea input at the bottom allows new replies with a send button. A resolve button (checkmark icon) sits in the thread header. Resolved threads show a green checkmark and collapsed state. Sidebar preset renders as a right-side panel. Inline preset positions the thread as a popover near the anchor point.",
+  "responsive": {
+    "mobile": "Thread renders full-width as a bottom sheet. Avatar size reduces. Reply input is full-width. Thread collapses to show only the first comment with an expand button.",
+    "tablet": "Sidebar preset renders as a right panel at 320px width. Inline preset uses a popover.",
+    "desktop": "Standard sidebar or inline popover layout. Full avatars and comfortable spacing."
+  },
+  "layout_hints": {
+    "thread_role": "The thread should feel attached to the referenced content first and like a discussion surface second. Anchor cues, indentation, and resolve state should preserve that relationship.",
+    "reply_hierarchy": "Primary comment, replies, and thread actions should read in a clear top-to-bottom progression. Resolve controls should be easy to find without visually dominating the discussion.",
+    "inline_vs_sidebar": "Inline threads should stay compact and context-tethered, while sidebar threads may breathe more and show a fuller reply composer."
+  },
+  "motion": {
+    "micro": "Resolve state, hover actions, and reply affordances may fade or sharpen in gently as attention moves through the thread.",
+    "transitions": "Opening, collapsing, or resolving threads should feel calm and collaborative rather than abrupt or chatty."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "real-time-updates",
+    "inline-edit",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Comment thread",
+    "keyboard": [
+      "Thread messages, reply composer, and resolve actions should follow a predictable reading order.",
+      "Resolved and reopened states should remain clear to keyboard and assistive-technology users."
+    ],
+    "announcements": [
+      "Author, timestamp, reply depth, and resolution state should be communicated semantically, not only through indentation or color."
+    ]
+  },
+  "composition": {
+    "CommentThread": "Container(d-surface, flex-col) > [AnchorLine? + CommentList + ReplyInput + ThreadActions]",
+    "CommentList": "List(flex-col, gap-3) > Comment[]",
+    "Comment": "Row > [Avatar(small) + Body(flex-col) > [AuthorName(font-bold) + Timestamp(text-muted) + CommentText] + ReactionBar?]",
+    "ReplyInput": "Row > [Textarea(d-control) + SendButton(d-interactive)]",
+    "ThreadActions": "Row(d-interactive) > [ResolveButton(icon: check) + DeleteButton?(variant: ghost)]"
+  }
+}

package/patterns/comparison-table.json

@@ -0,0 +1,121 @@
+{
+  "id": "comparison-table",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Comparison Table",
+  "description": "A feature comparison grid for products, plans, or options with sticky headers, category grouping, check/cross indicators, and optional recommended-column highlighting.",
+  "category": "decision-support",
+  "tags": [
+    "2026",
+    "decision-support",
+    "comparison",
+    "table",
+    "pricing",
+    "features",
+    "grid"
+  ],
+  "components": [
+    "ComparisonGrid",
+    "ColumnHeader",
+    "FeatureRow",
+    "CategoryHeader",
+    "CheckIcon",
+    "CrossIcon",
+    "ValueCell",
+    "RecommendedBadge"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full comparison grid with all feature rows visible, sticky headers, and even row striping — the default view for pricing and feature comparison pages",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _overflow-x-auto"
+      }
+    },
+    "highlight": {
+      "description": "Comparison grid with one recommended column visually emphasized via accent background tint and a badge above the header — draws user attention to the preferred option",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _overflow-x-auto"
+      }
+    },
+    "toggle": {
+      "description": "Comparison grid with collapsible category sections that expand and collapse on click — reduces visual clutter for tables with many feature categories",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _overflow-x-auto"
+      }
+    }
+  },
+  "visual_brief": "A structured data grid rendered as an HTML table with clean lines and generous whitespace. The top row contains column headers: the first column is blank or labeled 'Features' (160px min-width, sticky on horizontal scroll), and subsequent columns show product/plan names (text-base font-semibold) with a price beneath (text-lg font-bold for the amount, text-sm text-muted for the billing period). Headers have a white background, a 1px bottom border in border-strong, and are sticky (position: sticky, top: 0, z-index: 10) so they remain visible during vertical scroll. The first column (feature names) is also sticky (position: sticky, left: 0, z-index: 5) with a white background and a 1px right border, so it stays visible during horizontal scroll on mobile. The recommended column has a subtle accent background tint (accent color at 5% opacity) applied to its entire column — header cell, all value cells, and the bottom row. Above the recommended column header sits a RecommendedBadge: a small pill (accent background, white text, text-xs font-semibold, border-radius-full, padding 4px 12px) reading 'Recommended', centered above the column name. Feature rows alternate backgrounds: odd rows transparent, even rows surface-subtle (a faint gray tint). Each feature row is 48px tall with vertical centering. CategoryHeader rows span the full table width (colspan=all), have a bold text-sm label in text-default color, surface-muted background, 40px height, and 16px left padding. They act as section dividers grouping related features. Value cells can contain: a CheckIcon (a 20px accent-colored circle with a white 2px-stroke checkmark SVG centered inside), a CrossIcon (a 20px muted-gray circle with a white 2px-stroke X SVG centered inside), or a text/number value (text-sm, centered in the cell). Cells are centered both horizontally and vertically. The overall table has border-collapse: separate, border-spacing: 0, and a subtle outer border (1px solid border-muted) with border-radius-lg on the wrapping container. The container clips overflow with border-radius and allows horizontal scroll on narrow viewports.",
+  "layout_hints": {
+    "container": "card or section",
+    "note": "Wrap in a d-surface card with overflow-x auto for horizontal scrolling on mobile. The table element itself should have width: 100% with min-width based on column count. Columns should be evenly distributed after the sticky first column.",
+    "sticky_behavior": "Column headers: position sticky top 0 z-10 with bg-white. First column: position sticky left 0 z-5 with bg-white and right border. The intersection cell (top-left) needs z-15 to layer above both sticky axes.",
+    "recommended_column": "In the highlight preset, the recommended column cells get a background tint of color-mix(in srgb, var(--d-accent) 5%, transparent). This tint stacks with the alternating row color.",
+    "check_cross_icons": "Check: 20px circle, accent fill, white checkmark SVG (2px stroke). Cross: 20px circle, muted fill, white X SVG (2px stroke). Both centered in cell. Do NOT use emoji or text characters for these."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_w100 _overflow-x-auto _border _border-muted _rounded-lg",
+    "slots": {
+      "comparison-grid": "The outer scrollable container wrapping the HTML table. Has overflow-x: auto for horizontal scroll on narrow viewports. Border: 1px solid border-muted, border-radius-lg with overflow: hidden to clip the table corners. The inner table has width: 100%, border-collapse: separate, border-spacing: 0. Columns are sized: first column 160px min-width (feature names), remaining columns equal-width (min 140px each). The table supports 2–6 comparison columns comfortably.",
+      "column-header": "Repeating slot — one per product/plan column, plus one for the feature-name column. Each header cell has padding: 16px, vertical-align: bottom, background: white, border-bottom: 2px solid border-strong. The feature-name header (first column) shows 'Features' in text-sm font-semibold text-muted, or is left blank. Product/plan headers show: product name (text-base font-semibold text-default), price amount on next line (text-lg font-bold text-default), billing period below price (text-sm text-muted, e.g., '/month'). Optional CTA button at the bottom of the header cell (small, primary variant for recommended, secondary for others). Sticky: position sticky, top: 0, z-index: 10. For the recommended column in highlight preset, the header cell gets the accent background tint and the RecommendedBadge above.",
+      "recommended-badge": "A small pill-shaped badge rendered above (or at the top of) the recommended column header cell. Background: accent color. Text: 'Recommended' in white, text-xs, font-semibold. Padding: 4px 12px. border-radius-full. Centered horizontally within the column. Only rendered in the highlight preset. The badge sits in a dedicated row above the main header row or is absolutely positioned -24px above the header cell.",
+      "category-header": "A full-width row that spans all columns (using colspan equal to total column count). Background: surface-muted. Height: 40px. Padding-left: 16px. Text: text-sm font-semibold text-default. Acts as a visual section divider (e.g., 'Core Features', 'Integrations', 'Support'). In the toggle preset, the category header has a chevron icon (12px, right-pointing when collapsed, down-pointing when expanded) to the left of the label, and clicking the row toggles visibility of all feature rows in that category. Transition: chevron rotation 200ms ease.",
+      "feature-row": "Repeating slot — one per feature being compared. A table row with 48px height, vertical-align: center. The first cell (feature name) has padding: 12px 16px, text-sm text-default, sticky left: 0, bg-white, border-right: 1px solid border-muted. Remaining cells are ValueCells, centered. Alternating row backgrounds: odd rows transparent, even rows surface-subtle (bg color-mix(in srgb, var(--d-surface) 50%, transparent)). Hover: entire row gets a subtle surface-hover tint. In the toggle preset, rows within a collapsed category have display: none with a height collapse transition.",
+      "value-cell": "A single comparison cell within a feature row. Padding: 12px. Text-align: center, vertical-align: middle. Content can be: (1) CheckIcon — a 20px-diameter circle with accent fill containing a white 2px-stroke checkmark SVG, (2) CrossIcon — a 20px-diameter circle with muted-gray fill containing a white 2px-stroke X SVG, (3) a text value (text-sm, text-default, e.g., '10 GB', 'Unlimited'), or (4) a dash '—' in text-muted for not-applicable. In the highlight preset, cells in the recommended column receive the accent background tint."
+    }
+  },
+  "accessibility": {
+    "role": "table",
+    "aria-label": "Feature comparison table",
+    "announcements": [
+      "Comparing {count} options across {featureCount} features",
+      "{feature}: {product} has {value}",
+      "Category {name} expanded",
+      "Category {name} collapsed"
+    ],
+    "keyboard": [
+      "Tab: move focus between interactive cells and CTA buttons",
+      "Arrow keys: navigate between cells in the grid",
+      "Enter: activate CTA button or toggle category section",
+      "Space: toggle category section in toggle preset",
+      "Home: jump to first cell in current row",
+      "End: jump to last cell in current row"
+    ]
+  },
+  "responsive": {
+    "mobile": "Table scrolls horizontally with the first column (feature names) sticky at left. Column headers remain sticky at top. A subtle horizontal scroll indicator (fade gradient on the right edge) hints at additional columns. Column width reduces to 120px minimum. CTA buttons in headers stack below the price. Recommended badge shrinks to icon-only or smaller text.",
+    "tablet": "Full table visible for up to 3 columns without horizontal scroll. 4+ columns enable horizontal scroll. Sticky behavior on both axes. Touch-friendly row height increases to 52px. Category toggle targets enlarge to 44px height.",
+    "desktop": "Full grid displayed without horizontal scroll for up to 5 columns. Hover states on rows. Sticky headers on both axes. Smooth scroll behavior for long tables. Optional column highlight follows mouse for comparison assistance."
+  },
+  "motion": {
+    "micro": {
+      "row-hover": "background-color fade 120ms ease",
+      "check-appear": "scale 0→1 + opacity 0→1, 200ms ease-out (on initial render)",
+      "badge-hover": "translateY(-1px) 150ms ease"
+    },
+    "transitions": {
+      "category-toggle": "max-height 0↔auto + opacity 0↔1, 250ms ease-in-out for contained rows",
+      "chevron-rotate": "rotate 0→90deg (or reverse), 200ms ease",
+      "scroll-snap": "scroll-behavior smooth for programmatic column focus"
+    },
+    "ambient": {}
+  },
+  "interactions": [
+    "hover-reveal",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "ComparisonGrid": "Container(d-data, overflow-x-auto, rounded-lg) > Table(full-width)",
+    "ColumnHeader": "HeaderRow(d-header, sticky-top) > [FeatureLabel + ProductHeader*(plan-name, price, CTA?)]",
+    "CategoryHeader": "FullWidthRow(d-header, colspan-all, surface-muted) > [ChevronIcon? + CategoryLabel]",
+    "FeatureRow": "Row(d-row, alternating-bg) > [FeatureNameCell(sticky-left) + ValueCell*(d-cell)]",
+    "ValueCell": "Cell(d-cell, centered) > [CheckIcon | CrossIcon | TextValue | Dash]",
+    "RecommendedBadge": "Pill(accent-bg, white-text, rounded-full) > 'Recommended'"
+  }
+}

package/patterns/contact-form.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "contact-form",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Contact Form",
+  "description": "Working contact form with validation, honeypot spam protection, file attachment, and department dropdown.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full contact form with all fields",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _maxw[600px] _mx[auto]",
+        "slots": {
+          "header": "Title and description",
+          "fields": "Form inputs (name, email, department, message)",
+          "attachments": "File attachment area",
+          "submit": "Submit button",
+          "success": "Success message after submission",
+          "info": "Contact info sidebar (optional)"
+        }
+      }
+    },
+    "split": {
+      "description": "Primary contact form with a dominant form column and a narrower companion panel for contact details, response expectations, and social links.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc2 _gap6",
+        "slots": {
+          "header": "Title and description at the top of the form column.",
+          "fields": "Main form inputs (name, email, department, message) in a stable vertical stack.",
+          "attachments": "Optional file attachment area below the message field.",
+          "submit": "Submit button anchored to the end of the form column.",
+          "success": "Success message that clearly replaces the form state after submission.",
+          "info": "Companion contact panel aligned to the top of the split layout with stacked contact channels, response window, and social actions."
+        }
+      }
+    },
+    "compact": {
+      "description": "Simplified contact form with minimal fields",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "fields": "Email and message only",
+          "submit": "Submit button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _maxw[600px] _mx[auto]",
+    "slots": {
+      "header": "Title and description",
+      "fields": "Form inputs",
+      "submit": "Submit button",
+      "success": "Success confirmation",
+      "info": "Contact info (optional)"
+    }
+  },
+  "visual_brief": "Vertically stacked form with a header (title and short description), input fields for name, email, department dropdown, subject, and a multiline message textarea. An optional file attachment area with a paperclip icon sits below the textarea. A honeypot field is hidden from visual display. The submit button is primary-colored at the bottom. Success state replaces the form with a checkmark icon and confirmation message. Compact preset removes the department dropdown and attachment area. An optional contact-info sidebar shows phone, email, and address.",
+  "visual_brief": "Vertically stacked form with a header (title and short description), input fields for name, email, department dropdown, subject, and a multiline message textarea. An optional file attachment area with a paperclip icon sits below the textarea. A honeypot field is hidden from visual display. The submit button is primary-colored at the bottom. Success state replaces the form with a checkmark icon and confirmation message. Compact preset removes the department dropdown and attachment area. Split preset pairs the primary form with a narrower companion panel for phone, email, location, response expectations, and social actions; that panel stays aligned to the top of the layout rather than stretching to match the full form height. Contact channels inside the companion panel render as stacked rows with a small circular icon chip on the left and a two-line label/value block on the right. Social or outreach actions at the bottom should render as unmistakable buttons or action rows with icon, label, and clear hit area rather than loose inline text links.",
+  "layout_hints": {
+    "field_grouping": "Keep related fields in a stable vertical rhythm and avoid splitting short contact forms into overly wide multi-column arrangements.",
+    "submit_zone": "The primary submit action should feel anchored to the end of the form, not float disconnected from the field stack.",
+    "success_state": "Success confirmation should replace or clearly supersede the form state so the user understands the submission is complete.",
+    "split_ratio": "When the optional info panel is shown beside the form, keep the form column visually dominant and the companion panel narrower. Do not use an equal-width split unless the route contract explicitly calls for it.",
+    "info_stack": "Contact info in the companion panel should read as a stacked list of channels or facts, not as a wrapped inline row that leaves large empty card areas behind.",
+    "sidebar_alignment": "The optional info panel should align to the top of the split layout and size to its content. It should not stretch just to match the form column height.",
+    "channel_presentation": "Icon-bearing contact rows should align on a shared baseline with the icon wrapped in a compact circular or rounded chip. Avoid icons floating above labels or drifting independently of the channel text.",
+    "social_actions": "Companion-panel social links should read as explicit actions with button treatment or clear action rows. Do not leave them as loose text labels with ambiguous hit areas."
+  },
+  "responsive": {
+    "mobile": "Full-width form with stacked fields. Submit button goes full-width. Contact info section moves below the form. File attachment uses native file picker.",
+    "tablet": "Form centered at 500px max-width. Contact info appears beside the form if space allows, but split preset may still collapse to a single column if the companion panel would feel cramped.",
+    "desktop": "Form at 500px max-width centered or beside a contact info panel. Split preset uses a dominant form column with a compact top-aligned companion panel instead of a fully stretched equal split. Companion actions should stack or wrap into clearly separated buttons rather than forming a loose text row."
+  },
+  "motion": {
+    "micro": "Inputs and submit actions use calm hover and focus transitions. Attachment zones may highlight softly on drag-over.",
+    "transitions": "Validation and success states should fade or expand gently over 180-250ms without shifting the whole layout abruptly."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Contact form",
+    "keyboard": [
+      "Tab moves through fields, attachment controls, and submit actions in order.",
+      "Enter should submit only when the submit button or an intentional submit control is active."
+    ],
+    "announcements": [
+      "Validation errors should be announced with field-specific explanations.",
+      "Successful submission should be announced clearly."
+    ],
+    "focus_management": "Move focus to the first invalid field on failed validation, and move focus to the success confirmation heading or message after successful submission."
+  },
+  "composition": {
+    "ContactForm": "Stack(d-section) > [Header + FieldStack(d-control) + AttachmentZone? + SubmitAction + SuccessState?]",
+    "SplitContactForm": "ResponsiveSplit(form-dominant) > [FormColumn(ContactForm) + InfoColumn(d-surface, top-aligned) > [ContactChannel* + ResponseNote + ActionRow*]]",
+    "ContactChannel": "Row(compact-icon-chip + label-value stack) > [IconChip + ChannelBody > [Label + Value]]",
+    "CompanionAction": "ActionRow(d-interactive or explicit action pill) > [Icon + Label + optional direction hint]"
+  }
+}