@decantr/content 3.8.0

package/patterns/intake-form-wizard.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "intake-form-wizard",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Intake Form Wizard",
+  "description": "Multi-step healthcare intake form with conditional branching, progress sidebar, auto-save, file upload, section review, and conversational single-question mode.",
+  "category": "healthcare",
+  "tags": [
+    "2026",
+    "healthcare",
+    "form",
+    "wizard",
+    "intake",
+    "multi-step",
+    "compliance"
+  ],
+  "components": [
+    "FormStep",
+    "QuestionGroup",
+    "ProgressSidebar",
+    "ReviewPanel",
+    "SaveIndicator",
+    "ConditionalBranch",
+    "FileUploadField"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Step-by-step wizard with a left progress sidebar showing section names and completion status, one question group per step in a centered content card",
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _gc1 _lg:gc[240px_1fr] _gap8 _py6 _min-h-screen"
+      }
+    },
+    "conversational": {
+      "description": "One question at a time in a centered, large-input conversational flow — minimal chrome, each answer animates to the next question with a chat-like progression feel",
+      "layout": {
+        "layout": "center",
+        "atoms": "_flex _col _aic _jcc _maxw-[560px] _mx-auto _py8 _min-h-screen"
+      }
+    },
+    "review": {
+      "description": "All previously answered sections displayed in a scrollable summary table with inline edit links — the final step before submission to review and correct answers",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _maxw-[720px] _mx-auto _py6"
+      }
+    }
+  },
+  "visual_brief": "Two-panel layout. Left panel is a fixed ProgressSidebar (240px wide, surface background, full viewport height): a vertical list of section names (e.g. 'Personal Info', 'Medical History', 'Current Medications', 'Insurance', 'Consent') each with a status icon to the left. Completed sections show a green circle with white checkmark. The current section shows an accent-filled circle with a dot. Upcoming sections show an empty gray circle. A thin vertical line connects the circles. Section names are medium-weight text; the current section is bold with accent color. At the bottom of the sidebar, a small muted progress label shows '3 of 5 sections completed'. The right panel is the main form content area with a clean white card (max-width 600px, centered within the right panel, generous padding 32px). The card header shows the current section title in heading-3 style and a one-line description below in muted text. Below the header, QuestionGroup components render vertically: each question has a label (semibold, with a small red asterisk for required fields), a help text line below the label in muted text, and the appropriate input (text field, textarea, radio group, checkbox group, select dropdown, date picker, or FileUploadField). FileUploadField renders as a dashed-border drop zone with an upload icon, 'Drag file or click to browse' text, and accepted file types listed below. Inputs have comfortable vertical spacing (24px gap). Validation errors appear below the input in red text with an error icon. At the bottom of the card, a row with 'Back' secondary button on the left and 'Continue' primary button on the right. The SaveIndicator sits in the top-right corner of the card as a small pill: during save it shows a spinning circle icon + 'Saving...', after save it shows a green checkmark + 'Saved' that fades to subtle opacity after 3 seconds. ConditionalBranch logic hides or reveals question groups based on prior answers (e.g. selecting 'Yes' to allergies reveals an allergy detail text area). The conversational preset shows one large question centered on screen with a large input below it, no sidebar, and a 'Next' button or Enter-to-advance. Previous answers appear as small muted chips above the current question. The review preset lists all sections as collapsible panels with answer summaries in a two-column table (question label | answer) and 'Edit' links that jump back to that section.",
+  "default_layout": {
+    "layout": "split",
+    "atoms": "_grid _gc1 _lg:gc[240px_1fr] _gap8 _py6",
+    "slots": {
+      "progress-sidebar": "Fixed-width left sidebar showing form completion progress. Vertical stepper with connected circles and section labels. Each section: status circle (completed=green checkmark, current=accent dot, upcoming=gray empty) connected by a thin vertical line. Section name text: completed sections are muted with strikethrough-free normal weight, current section is bold accent, upcoming sections are normal weight muted. Bottom of sidebar shows overall progress: 'X of Y completed' label and optionally a thin horizontal progress bar. The sidebar is sticky on scroll so it remains visible as the user scrolls through long form sections.",
+      "form-step": "The main content card for the current step. Clean surface card with rounded corners and comfortable padding (32px). Header: section title (heading-3) and optional description paragraph (muted text). Body: one or more QuestionGroup components stacked vertically with 24px spacing. Each question group can contain multiple related questions (e.g. first name + last name grouped horizontally). Footer: navigation row with 'Back' button (secondary, left-aligned, hidden on first step) and 'Continue' button (primary, right-aligned, changes to 'Submit' on the last step). The card has a subtle border and optional shadow-sm for elevation.",
+      "question-group": "A cluster of related form questions within a FormStep. Contains one or more question rows. Each question row: label (semibold, 14px, with red asterisk if required), optional help text below label (muted, 12px), and the input field. Supported input types: text input, textarea (auto-growing), radio group (vertical list of radio options), checkbox group, select dropdown, date picker, file upload zone. Conditional branching: when a question has branch logic, answering it triggers a smooth reveal of dependent questions below with a slide-down animation. Validation messages appear on blur or on 'Continue' click: red text below the input with an error icon.",
+      "save-indicator": "Small status pill positioned at the top-right corner of the form card. Three states: idle (hidden or very subtle 'Auto-saved'), saving (spinning circle icon + 'Saving...' in muted text), saved (green checkmark + 'Saved' in green text, fades to lower opacity after 3 seconds). Triggers auto-save on each input blur or after a debounced typing pause (default 2 seconds).",
+      "review-panel": "Displayed in the review preset or as the final step. Lists all completed sections as collapsible panels. Each panel header shows section name and a small 'Edit' link. Panel body shows a two-column table: left column is question labels (muted), right column is answers (normal weight). Unanswered optional questions show a dash. File uploads show the filename as a link. At the bottom, a 'Submit' primary button and a consent checkbox if required."
+    }
+  },
+  "responsive": {
+    "mobile": "Sidebar collapses to a horizontal progress bar at the top of the screen (thin bar showing percentage + current section name). Form card goes full-width with reduced padding (16px). Navigation buttons are full-width and stacked (Continue on top, Back below). File upload zone uses a simple button instead of a drag area. Conversational preset works naturally at full width. Review panel tables stack question above answer.",
+    "tablet": "Sidebar remains visible at reduced width (200px). Form card fills remaining space. Standard padding and input sizes. Navigation buttons in a row. Comfortable touch targets on all inputs.",
+    "desktop": "Full two-panel layout with 240px sidebar and centered form card (max-width 600px). Generous spacing and padding. Hover states on all interactive elements. File upload supports drag-and-drop."
+  },
+  "motion": {
+    "micro": {
+      "input-focus": "border-color accent + shadow-ring-accent/20 150ms ease-out",
+      "step-circle-complete": "scale(0.9→1.1→1) + color-fill green 300ms ease-out",
+      "button-press": "scale(0.98) 100ms ease-in"
+    },
+    "transitions": {
+      "step-forward": "current-card translateX(0→-20px) + opacity 1→0 200ms ease-in, then new-card translateX(20px→0) + opacity 0→1 300ms ease-out",
+      "step-backward": "current-card translateX(0→20px) + opacity 1→0 200ms ease-in, then new-card translateX(-20px→0) + opacity 0→1 300ms ease-out",
+      "conditional-reveal": "max-height 0→auto + opacity 0→1 350ms ease-out",
+      "conditional-hide": "max-height auto→0 + opacity 1→0 250ms ease-in",
+      "save-indicator-fade": "opacity 1→0.4 1s ease-out after 3s delay"
+    },
+    "ambient": {
+      "saving-spinner": "rotate(0→360deg) 800ms linear infinite",
+      "required-asterisk-pulse": "opacity 0.6→1→0.6 2s ease-in-out infinite on validation error"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation",
+    "click-select",
+    "focus-trap",
+    "stagger-children"
+  ],
+  "composition": {
+    "IntakeWizard": "Container(d-section, grid: sidebar+main) > [ProgressSidebar(d-surface, sticky, flex-col) + FormStep(d-surface, card, centered, max-w-600) > QuestionGroup(d-data, flex-col, gap-6)* > [Question(d-data) > [Label(required?) + HelpText? + Input(d-interactive) + ValidationMsg?]] + NavigationRow > [BackButton?(d-interactive, secondary) + ContinueButton(d-interactive, primary)]] + ReviewPanel?(d-surface, conditional: final-step) + SaveIndicator(d-annotation, position: absolute, top-right)",
+    "ProgressSidebar": "Nav(d-surface, sticky, flex-col, gap-2) > StepItem(d-annotation, status: completed|current|upcoming) > [StatusCircle(color: status) + SectionLabel(weight: status)]",
+    "FormStep": "Card(d-surface, padding-lg) > [StepHeader > [Title(heading-3) + Description?(muted)] + QuestionGroup* + NavRow]",
+    "QuestionGroup": "Fieldset(d-data, flex-col, gap-6) > QuestionRow > [Label(semibold, required-asterisk?) + HelpText?(muted, text-sm) + Input(d-interactive, type-variant) + ConditionalBranch?(expandable) + ValidationError?(d-annotation, red)]",
+    "ReviewPanel": "Container(d-surface, flex-col, gap-4) > ReviewSection(d-data, collapsible) > [SectionHeader > [SectionName + EditLink(d-interactive)] + AnswerTable(d-data, two-column) > AnswerRow > [QuestionLabel(muted) + AnswerValue]]"
+  },
+  "layout_hints": {
+    "wizard_priority": "Step progress and the current question set should be obvious before secondary save or review chrome. The user should always know where they are in the process.",
+    "conditional_reveal": "Conditional branches should appear as a continuation of the current step, not like a different form dropped into the middle of the wizard.",
+    "review_phase": "Review mode should preserve the same section structure used during intake so users can reconcile answers without rebuilding the form mentally."
+  },
+  "layout_hints": {
+    "wizard_priority": "Step progress and the current question set should be obvious before secondary save or review chrome. The user should always know where they are in the process.",
+    "conditional_reveal": "Conditional branches should appear as a continuation of the current step, not like a different form dropped into the middle of the wizard.",
+    "review_phase": "Review mode should preserve the same section structure used during intake so users can reconcile answers without rebuilding the form mentally."
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Multi-step intake form wizard",
+    "keyboard": [
+      "Tab: move between form fields within the current step",
+      "Enter: advance to the next step (when on Continue button) or submit answer (conversational mode)",
+      "Shift+Tab: move backwards between fields",
+      "Arrow Up/Down: navigate radio and select options",
+      "Space: toggle checkboxes",
+      "Escape: cancel file upload or close date picker",
+      "Alt+Left: go to previous step",
+      "Alt+Right: go to next step"
+    ],
+    "announcements": [
+      "Step {current} of {total}: {section_name}",
+      "Required field: {label}",
+      "Validation error on {label}: {error_message}",
+      "Progress saved automatically",
+      "Conditional questions revealed: {count} additional questions",
+      "Review mode: check your answers before submitting",
+      "Form submitted successfully"
+    ]
+  }
+}

package/patterns/intent-radar.json

@@ -0,0 +1,115 @@
+{
+  "id": "intent-radar",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Intent Radar",
+  "description": "A radial polar interface that visualizes user intent as vectors radiating from a center point, with suggestions pulsing outward based on confidence scores — used for AI command palettes, intent disambiguation, and contextual action discovery.",
+  "category": "agentic",
+  "tags": [
+    "2026",
+    "agentic",
+    "radial",
+    "intent",
+    "command-palette",
+    "disambiguation"
+  ],
+  "components": [
+    "RadarDisplay",
+    "IntentVector",
+    "SuggestionChip",
+    "ConfidenceIndicator",
+    "ActionButton"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full radial radar centered in a modal or dedicated panel — shows all intent vectors with confidence arcs and pulsing suggestion rings",
+      "layout": {
+        "layout": "spatial",
+        "atoms": "_flex _aic _jcc _rel _aspectsquare"
+      }
+    },
+    "compact": {
+      "description": "Semi-circular radar (180° arc) for bottom-sheet or sidebar placement — intent vectors fan upward from a flat base edge, suggestions appear as a horizontal chip row below the arc",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _rel"
+      }
+    },
+    "inline": {
+      "description": "Minimal horizontal bar variant — confidence scores render as a horizontal gradient strip with suggestion chips in a scrollable row, no radial geometry — for tight inline placements like chat input companions",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap3 _px4 _py2 _bb[1px_solid_var(--d-border)]"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "spatial",
+    "atoms": "_flex _aic _jcc _rel _aspectsquare",
+    "slots": {
+      "radar-center": "The focal point of the radial display. Renders as a glowing circle (40–56px diameter) at the exact center of the radar. Shows the current input query text or a microphone/search icon when idle. Pulses gently with a ring animation when the system is interpreting intent. Color shifts from neutral (idle) to primary (active) to accent (confident match found). Acts as the origin point from which all intent vectors radiate.",
+      "intent-vector": "Repeating slot — one per detected intent category. Each vector is a line segment radiating from radar-center outward at an angle determined by the intent's semantic category (e.g., 'create' at 0°, 'search' at 90°, 'navigate' at 180°, 'configure' at 270°). Length corresponds to confidence score (0–1 maps to 0%–100% of radar radius). Line thickness also scales with confidence (1px at low, 3px at high). The vector terminates in a small labeled dot showing the intent category name. Vectors animate smoothly when confidence values update — growing, shrinking, or rotating as the user types. Color is category-coded using theme accent palette.",
+      "suggestion-ring": "Concentric rings at 33%, 66%, and 100% of the radar radius. These are subtle dashed circles that provide visual scale for confidence levels. When a suggestion reaches a ring threshold, the ring segment nearest to that vector briefly brightens. The outermost ring represents the action zone — suggestions that reach it are high-confidence and ready to execute. Rings use very low opacity (0.1–0.15) to avoid visual clutter.",
+      "confidence-arc": "A filled arc segment drawn along the suggestion rings corresponding to each intent vector's angular spread. Width of the arc represents ambiguity — a narrow arc means precise intent, a wide arc means the system is uncertain between adjacent categories. Fill uses a gradient from the vector's color at center to transparent at edges. Arcs animate smoothly as confidence refines. Multiple overlapping arcs create visual 'heat zones' showing where intent energy clusters.",
+      "action-zone": "The interactive outer ring of the radar. When an intent vector's confidence exceeds the action threshold (configurable, default 0.75), a SuggestionChip materializes at the vector's endpoint on the outer ring. Each chip shows the suggested action label, a keyboard shortcut hint, and a small confidence percentage. Chips are clickable/tappable to execute the action. Multiple high-confidence suggestions can coexist on the ring. Chips pulse gently to draw attention, with the highest-confidence chip pulsing most prominently. Pressing Enter executes the top-confidence chip."
+    }
+  },
+  "accessibility": {
+    "role": "search",
+    "aria-label": "Intent radar — type to discover actions",
+    "announcements": [
+      "Top suggestion: {action} with {confidence}% confidence",
+      "{count} possible intents detected",
+      "Action {name} selected, press Enter to execute",
+      "Intent narrowed to {category}"
+    ],
+    "keyboard": [
+      "Type: refine intent — vectors update in real time",
+      "Arrow Up/Down: cycle through ranked suggestions by confidence",
+      "Enter: execute the currently highlighted suggestion",
+      "Tab: move focus between action-zone chips",
+      "Escape: clear input and reset radar to idle state",
+      "1-9: quick-select suggestion by rank number"
+    ]
+  },
+  "responsive": {
+    "mobile": "Switches to compact semi-circular mode automatically. Suggestion chips render as a vertically scrollable list below the half-radar rather than on the arc. Touch-friendly chip sizes (min 44px tap target). Confidence arcs simplified to solid fills.",
+    "tablet": "Full radial radar with slightly reduced radius. Suggestion chips remain on the outer ring but increase tap target size. Two-column chip overflow if more than 6 suggestions."
+  },
+  "layout_hints": {
+    "container_rhythm": "Treat the radar as a single focal visualization region. Parent layouts own section spacing; this pattern owns only its square or semi-circular visualization frame and the immediate chip/action zone around it.",
+    "radial_hierarchy": "Keep radar-center visually dominant, suggestion rings secondary, and action-zone chips tertiary until confidence rises. The outer action ring should feel like the execution boundary, not a second unrelated toolbar.",
+    "compact_fallback": "When the pattern collapses to compact or inline modes, preserve the same semantic order: current query or intent core first, ranked suggestions second, execution affordances last. Do not let chip rows drift away from their associated confidence signal."
+  },
+  "visual_brief": "Circular radial display with a glowing center point showing the current input query. Intent suggestion vectors radiate outward as labeled lines with lengths proportional to confidence scores. High-confidence suggestions appear closer to the edge with brighter colors; low-confidence ones are shorter and dimmer. SuggestionChip components sit at the end of each vector as clickable pill labels. The radar has subtle concentric circle gridlines. Compact preset renders as a smaller inline widget. The inline preset displays a horizontal confidence bar instead of the radial layout.",
+  "motion": {
+    "micro": {
+      "segment-hover": "opacity 0.7→1 + scale(1.02) 150ms ease-out",
+      "label-reveal": "fade + translateY(4px→0) 200ms ease-out on hover"
+    },
+    "transitions": {
+      "data-update": "segment-size lerp 500ms ease-out",
+      "focus-shift": "highlight-ring transition 300ms ease-out"
+    },
+    "ambient": {
+      "radar-sweep": "rotation 8s linear infinite on scan indicator",
+      "pulse-ring": "scale(1→1.3) + opacity(1→0) 2s ease-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "status-pulse",
+    "click-select",
+    "live-simulation"
+  ],
+  "composition": {
+    "IntentRadar": "Display(d-section, spatial, aspect-square) > [SuggestionRings + IntentVectors + RadarCenter + ActionZone]",
+    "RadarCenter": "Core(d-interactive, glowing, pulsing: interpreting) > [QueryText | SearchIcon]",
+    "IntentVectors": "Layer > IntentVector(d-data, radial, length: confidence, color: category)[]",
+    "SuggestionRings": "Layer > Ring(d-annotation, dashed, opacity-low)[]",
+    "ActionZone": "Ring(d-interactive, outer) > SuggestionChip(d-interactive, confidence-pulse)[]"
+  }
+}

package/patterns/json-viewer.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "json-viewer",
+  "version": "1.1.2",
+  "decantr_compat": ">=2.0.0",
+  "name": "JSON Viewer",
+  "description": "Artifact viewer for registry contracts with syntax highlighting, line numbers, copy actions, summary metrics, and optional tabs for JSON, commands, and evidence.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "default_preset": "artifact",
+  "presets": {
+    "artifact": {
+      "description": "Premium artifact panel with a padded toolbar, segmented tab strip, syntax-highlighted JSON, and supporting summary metadata.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _r3 _overflow[hidden] _border _bordermuted/20",
+        "slots": {
+          "header": "Toolbar row with artifact title, summary badges, and copy-to-clipboard Button. Maintain a shared horizontal inset so title and actions never sit flush against the frame.",
+          "tabs": "Segmented tab strip for JSON, Commands, and Evidence views with the same horizontal inset as the toolbar",
+          "summary-strip": "Compact metadata row with line count, byte size, schema id, or root key count",
+          "line-numbers": "Gutter column with line numbers, _fgmuted _textxs _mono",
+          "json-content": "Syntax-highlighted JSON with collapsible nodes. Keys in _fgprimary, strings in _fgwarning, numbers in _fgsuccess, booleans in _fgaccent",
+          "footer": "Optional footer with copy confirmation, notes, or schema guidance"
+        }
+      }
+    },
+    "collapsible": {
+      "description": "Full JSON viewer with collapsible object/array nodes, syntax highlighting, line numbers, and a copy button in the header.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap0 _r3 _overflow[hidden] _border _bordermuted/20",
+        "slots": {
+          "header": "Toolbar row with title, expand/collapse all toggle, and copy-to-clipboard Button",
+          "line-numbers": "Gutter column with line numbers, _fgmuted _textxs _mono",
+          "json-content": "Syntax-highlighted JSON with collapsible nodes. Keys in _fgprimary, strings in _fgsuccess, numbers in _fgwarning, booleans in _fgdestructive",
+          "footer": "Optional footer with byte size and node count"
+        }
+      }
+    },
+    "inline": {
+      "description": "Inline JSON snippet, non-collapsible, with copy button. For small JSON payloads.",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _r2 _overflow[hidden] _border _bordermuted/20",
+        "slots": {
+          "copy-button": "Absolute top-right copy Button",
+          "json-content": "Syntax-highlighted JSON, no line numbers"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap0 _r3 _overflow[hidden] _border _bordermuted/20",
+    "slots": {
+      "header": "Toolbar with title, summary, and copy button",
+      "tabs": "Segmented tab strip",
+      "json-content": "Syntax-highlighted JSON"
+    }
+  },
+  "visual_brief": "A premium contract viewer panel with the feel of a polished shadcn-style code surface, but expressed through Decantr treatments and decorators. The header is compact and editorial: title on the left, a small metadata strip in the middle, and copy actions on the right. Every section inside the frame shares a consistent horizontal inset so the title, tabs, cards, and footer read as one curated artifact surface instead of touching the border. Below the header, a segmented tab control can switch between JSON, Commands, and Evidence views. The JSON body uses a stronger `lum-code-block` treatment with an accent top border, subdued line-number gutter, and vivid but restrained syntax colors. The whole panel should feel like a trustworthy artifact explorer, not just a raw textarea dump.",
+  "layout_hints": {
+    "viewer_treatment": "Use lum-code-block or an equivalent artifact treatment with a dark body, an accent top border, and a compact toolbar. The code panel should feel purposeful and premium, not like a default developer console. The outer frame owns the inset rhythm for every inner band.",
+    "toolbar": "Header bar: title on the left, summary metrics in the middle, and copy/secondary actions on the right. A small segmented tab strip may sit directly beneath or inside the toolbar. Keep a shared x-axis inset across toolbar, tabs, content, and footer.",
+    "syntax": "Syntax highlighting uses theme-accented colors: keys=coral, strings=amber, numbers=cyan, booleans=green, null=muted.",
+    "artifact_summary": "Always surface a few useful stats before the raw JSON: line count, byte size, schema id, root key count, or command availability. Summary chips should feel tucked into the frame, not pressed against the edge."
+  },
+  "responsive": {
+    "mobile": "Full-width viewer with horizontal scroll for deeply nested content. Tabs collapse into a compact segmented control, but the frame still keeps a small internal gutter. Nodes default to collapsed beyond depth 2 and summary metrics wrap into two rows.",
+    "tablet": "Standard viewer width with a compact tab strip. Nodes expand to depth 3 by default and summary metrics stay visible without overwhelming the header.",
+    "desktop": "Full viewer with comfortable width. Tabs, summary metrics, and copy actions all remain visible. Horizontal space accommodates deep nesting without crowding."
+  },
+  "motion": {
+    "micro": "Copy actions, tab switches, and collapsible node toggles may animate subtly over 120-180ms. Avoid flashy motion inside code surfaces.",
+    "transitions": "Tab and artifact-state changes should cross-fade or slide minimally so the viewer remains trustworthy and stable."
+  },
+  "interactions": [
+    "hover-reveal",
+    "click-select",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "JSON contract viewer",
+    "keyboard": [
+      "Tab moves through tabs, copy actions, and expandable nodes.",
+      "Arrow keys may navigate tree nodes when the JSON body is rendered as an interactive tree."
+    ],
+    "announcements": [
+      "Copy success and tab changes should be announced clearly.",
+      "Artifact summary metrics should be available before the raw JSON body."
+    ],
+    "focus_management": "Keep focus stable when switching tabs or copying values, and do not drop keyboard users into the middle of a deep JSON tree unexpectedly."
+  },
+  "composition": {
+    "ArtifactViewer": "Panel(lum-code-block, stack, padded-frame) > [Toolbar + Tabs + SummaryStrip + JsonPane + Footer]",
+    "Toolbar": "Row(d-data, compact) > [Title + SummaryBadges + ActionButtons]",
+    "Tabs": "SegmentedControl(d-interactive) > [JsonTab + CommandsTab + EvidenceTab]",
+    "JsonPane": "CodeRegion(mono, syntax-highlighted) > [LineNumbers + JsonTree]",
+    "SummaryStrip": "Row(d-annotation, compact) > [Lines + Bytes + Schema + RootKeys]"
+  }
+}

package/patterns/kanban-board.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "kanban-board",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Kanban Board",
+  "description": "Drag-and-drop column board with swimlanes, card previews, and column limits for visual project workflow management.",
+  "category": "project-management",
+  "tags": [
+    "2026",
+    "kanban",
+    "project-management",
+    "drag-and-drop",
+    "board",
+    "workflow",
+    "cards"
+  ],
+  "components": [
+    "Board",
+    "Column",
+    "ColumnHeader",
+    "Card",
+    "CardPreview",
+    "DragOverlay",
+    "AddCardButton",
+    "ColumnLimit"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Standard kanban board with 3-5 columns, full-size cards with previews, and visible WIP limits — ideal as a primary project view",
+      "layout": {
+        "layout": "horizontal-scroll",
+        "atoms": "_flex _row _gap-4 _overflow-x-auto _h-full _p-4 _bg-muted"
+      }
+    },
+    "compact": {
+      "description": "Dense kanban layout with mini cards showing only title and status accent — optimized for high card counts and quick scanning across many columns",
+      "layout": {
+        "layout": "horizontal-scroll",
+        "atoms": "_flex _row _gap-2 _overflow-x-auto _h-full _p-2 _bg-muted"
+      }
+    },
+    "grouped": {
+      "description": "Swimlane-based kanban board with horizontal rows grouping cards by assignee, priority, or category — columns repeat within each swimlane row",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _overflow-auto _h-full _p-4 _bg-muted _gap-4"
+      }
+    }
+  },
+  "visual_brief": "A horizontally scrollable board surface set against a muted recessed background (subtle inset shadow conveying depth). Each column is a tall, narrow d-surface card (280px wide, full height minus padding) with a slightly rounded top edge and a thin top-border accent matching the column's status color (e.g., blue for In Progress, amber for Review, green for Done). Column headers sit at the top of each column: bold title text left-aligned, a count badge (pill-shaped, muted background) showing the number of cards, and beneath the title a thin 2px-tall progress bar representing WIP limit usage — the bar fills with accent color and turns red when the limit is exceeded. Cards within each column are compact surface tiles (full column width minus 16px padding) stacked vertically with 8px gaps. Each card has a 4px left-edge color accent strip indicating priority or status (red for urgent, amber for medium, green for low, gray for none). Card content shows a bold title (14px, single line, truncated), a muted description preview (12px, 2 lines max, text-muted), and a bottom row with assignee avatar (20px circle), due date chip, and tag pills. When dragging, the DragOverlay renders the card with a 2-degree clockwise rotation, an elevated box-shadow (0 12px 24px rgba(0,0,0,0.15)), and 85% opacity, clearly communicating the 'in flight' state. Drop targets highlight with a dashed border (2px, accent color) and a subtle pulsing background tint. Empty columns display a centered dashed-border rectangle (border-radius 8px) with muted instructional text ('Drag a card here or click + to add') and a plus icon. The AddCardButton sits at the bottom of each column as a ghost-style button with a plus icon, full column width, with a hover state that shows a subtle background fill.",
+  "layout_hints": {
+    "container": "full-bleed-scroll",
+    "note": "The board scrolls horizontally. Each column is a fixed-width vertical container. Cards within columns scroll vertically when they overflow the column height.",
+    "column_width": "Columns should be 280px wide in standard preset, 220px in compact. Use flex-shrink-0 to prevent columns from collapsing.",
+    "card_interaction": "Cards MUST have cursor: grab (cursor: grabbing when dragging). Each card uses d-surface with data-interactive for hover elevation change.",
+    "wip_limit_bar": "The thin progress bar beneath column headers uses a 2px height. Fill color matches column accent when under limit, switches to var(--d-error) when at or over limit. Include a title attribute showing 'N / M' count.",
+    "drag_overlay": "During drag, the original card position shows a placeholder (dashed border, same dimensions, muted background). The floating drag overlay follows the cursor with transform: rotate(2deg) and elevated shadow.",
+    "swimlane_rows": "In grouped preset, swimlane rows are separated by a 1px hairline divider with a row header on the left showing the group label (assignee name, priority level, etc.)."
+  },
+  "default_layout": {
+    "layout": "horizontal-scroll",
+    "atoms": "_flex _row _gap-4 _overflow-x-auto _h-full _p-4 _bg-muted",
+    "slots": {
+      "board-container": "The outermost scrollable container. Uses horizontal flex layout with overflow-x-auto. Background is a muted recessed surface (var(--d-bg-muted) with a subtle inset box-shadow: inset 0 2px 4px rgba(0,0,0,0.05)). Padding of 16px on all sides. The container stretches to fill the available viewport height. Scroll behavior is smooth with snap points at each column edge (scroll-snap-type: x proximity). A subtle horizontal scrollbar is styled to match the theme (thin, rounded, semi-transparent).",
+      "column": "Repeating slot — one per workflow stage. Each column is a vertical d-surface card, 280px wide (flex-shrink: 0), full height of the board minus container padding. Background is var(--d-bg-surface) with border-radius 12px and a subtle box-shadow (0 1px 3px rgba(0,0,0,0.08)). A 3px top-border in the column's designated status color (configurable per column). Internal layout is flex-col with the header pinned at top, cards in a scrollable middle section (flex: 1, overflow-y: auto with masked top/bottom fade), and the AddCardButton anchored at the bottom. Column spacing between cards is 8px with 12px horizontal padding.",
+      "column-header": "Pinned at the top of each column. Contains: the column title (font-weight 600, text-sm, left-aligned), a count badge (inline pill, background var(--d-bg-muted), text-xs, min-width 24px, text-center showing the card count), and an optional overflow menu (three-dot icon, appears on hover). Below the title row is the WIP limit indicator — a thin 2px-tall bar spanning the full column width. The bar fills proportionally (cards / limit) with the column's accent color, and turns var(--d-error) red with a subtle pulse animation when the limit is reached or exceeded. If no WIP limit is set, the bar is hidden.",
+      "card": "Repeating slot within each column — one per task/item. Each card is a d-surface tile with border-radius 8px, padding 12px, and a 4px left-border accent strip indicating priority (red=#ef4444 urgent, amber=#f59e0b medium, green=#22c55e low, gray=#94a3b8 none). Card layout is vertical stack: Row 1 is the title (font-weight 500, text-sm, single line with text-ellipsis overflow-hidden whitespace-nowrap). Row 2 is the description preview (text-xs, text-muted, max 2 lines with line-clamp-2). Row 3 is a horizontal flex row with: assignee avatar (20px circle, border: 2px solid var(--d-bg-surface)), due date as a small chip (text-xs, if overdue then text-error with a subtle red background tint), and tag pills (text-xs, rounded-full, muted colored backgrounds, max 2 visible then +N). Hover state lifts the card slightly (translateY(-1px), box-shadow increase). The entire card is draggable.",
+      "drag-overlay": "A floating clone of the dragged card rendered in a portal layer above all other content. The overlay follows the cursor position with a 2-degree clockwise rotation (transform: rotate(2deg)) and an elevated shadow (box-shadow: 0 16px 32px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.1)). Opacity is set to 0.9. The overlay has pointer-events: none. Beneath it, the original card position shows a placeholder — a dashed border rectangle (2px dashed var(--d-border-muted)) with the same dimensions and a faint background (var(--d-bg-muted) at 50% opacity).",
+      "add-card-button": "Anchored at the bottom of each column, below the scrollable card area. A full-width ghost button with a centered plus icon and 'Add card' text (text-sm, text-muted). Border: 1px dashed var(--d-border-muted), border-radius 8px, padding 8px. On hover: background fills with var(--d-bg-muted), border becomes solid, text color strengthens. On click: transforms into an inline text input with auto-focus for quick card title entry, with Enter to confirm and Escape to cancel."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Kanban project board",
+    "announcements": [
+      "Card {title} moved from {source column} to {target column}",
+      "Card {title} created in {column}",
+      "Column {name} has reached its work-in-progress limit"
+    ],
+    "keyboard": [
+      "Tab: cycle through columns and cards in reading order",
+      "Arrow Left/Right: move focus between columns",
+      "Arrow Up/Down: move focus between cards within a column",
+      "Space: pick up focused card for keyboard drag",
+      "Arrow keys (while dragging): move card between columns or positions",
+      "Enter: drop card at current position / open card detail",
+      "Escape: cancel drag operation",
+      "N: create new card in focused column",
+      "Delete: archive focused card (with confirmation)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Board collapses to a single-column stack view. Each column becomes a collapsible accordion section with the column header as the trigger. Cards render full-width. Drag-and-drop is replaced with a 'Move to...' action menu accessible via long-press or card overflow menu. AddCardButton becomes a floating action button (FAB) anchored to bottom-right.",
+    "tablet": "Board scrolls horizontally with columns at 260px width. Touch drag-and-drop enabled with a long-press (300ms) to initiate. Two columns visible at a time with smooth horizontal scroll snap. Column headers become sticky at the top during vertical card scroll.",
+    "desktop": "Full horizontal board with 280px columns. Mouse drag-and-drop with immediate grab. 3-5 columns visible depending on viewport width. Keyboard shortcuts fully enabled. Hover states on all interactive elements. Optional column collapse/expand via double-click on header."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-1px) + box-shadow elevation increase, 150ms ease-out",
+      "card-grab": "scale(1.02) + cursor change, 100ms ease-out",
+      "badge-update": "count badge scales 1.0→1.2→1.0, 200ms ease-out on count change"
+    },
+    "transitions": {
+      "card-move": "Card animates from source position to target position, 250ms spring(1, 80, 10)",
+      "card-add": "New card scales from 0.95 to 1.0 + fade in, 200ms ease-out",
+      "card-remove": "Card scales to 0.95 + fade out, 150ms ease-in, then gap closes with 200ms ease-out",
+      "column-reorder": "Columns slide to new positions with 300ms ease-in-out"
+    },
+    "ambient": {
+      "wip-limit-pulse": "When column is at WIP limit, the progress bar pulses opacity 0.7→1.0→0.7, 2s ease-in-out infinite",
+      "drop-zone-pulse": "Active drop target background pulses between transparent and accent-tinted, 1s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "lift-hover",
+    "stagger-children",
+    "animate-on-mount",
+    "status-pulse",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "KanbanBoard": "Board(d-section, horizontal-scroll, full-height) > Column*",
+    "Column": "Column(d-surface, flex-col, fixed-width) > [ColumnHeader + CardList(scrollable) + AddCardButton]",
+    "ColumnHeader": "Header(d-annotation) > [Title + CountBadge + WIPLimitBar?]",
+    "Card": "Card(d-surface, d-interactive, draggable) > [PriorityAccent + Title + Description? + MetaRow(Avatar + DueDate? + Tags?)]",
+    "DragOverlay": "Portal(floating) > Card(rotated, elevated, ghost)",
+    "AddCardButton": "Button(d-interactive, ghost, full-width) > [PlusIcon + Label]"
+  }
+}