@decantr/content 3.8.0

package/patterns/protocol-step.json

@@ -0,0 +1,128 @@
+{
+  "id": "protocol-step",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Protocol Step",
+  "description": "A lab-protocol step card rendering a numbered procedural step with action description, reagent list with volumes and concentrations, required equipment chips, timing controls, safety indicators, and completion confirmation checkbox.",
+  "category": "science",
+  "tags": [
+    "2026",
+    "science",
+    "lab",
+    "protocol",
+    "procedure",
+    "reagents",
+    "safety",
+    "timer"
+  ],
+  "components": [
+    "StepNumber",
+    "StepAction",
+    "ReagentList",
+    "ReagentRow",
+    "EquipmentChip",
+    "TimerDisplay",
+    "SafetyBadge",
+    "CompletionCheck",
+    "NotesBox"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Detailed protocol step showing action, full reagent list with volumes, equipment chips, safety badges, and completion checkbox. Intended as primary rendering during active bench work with all context visible.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap3 _p4"
+      }
+    },
+    "checklist": {
+      "description": "Compact single-line rendering showing step number, abbreviated action, and completion checkbox. Reagents collapse into a popover. Used for quick-scan protocol overviews and printable bench cards.",
+      "layout": {
+        "layout": "row",
+        "atoms": "_w100 _flex _gap2 _p2"
+      }
+    },
+    "timed": {
+      "description": "Step optimized for time-critical procedures featuring a prominent countdown/count-up TimerDisplay with start/pause/reset controls. Completion auto-suggests when timer completes with audible chime.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap3 _p4"
+      }
+    }
+  },
+  "visual_brief": "A lab-notebook-inspired step card rendered as a d-surface with a thin left border in primary accent color. At the top-left corner, a StepNumber renders as a 40px circular badge with the number in bold text ('3') against a filled primary-color background. To its right, the StepAction contains the procedural instruction in text-base semibold followed by an optional description in body-muted text (e.g., 'Add lysis buffer and vortex for 30 seconds'). Below the header, the ReagentList renders as a bordered sub-panel with a d-annotation caption 'Reagents'. Each ReagentRow contains: reagent name (semibold), volume (mono-data, e.g., '50 µL'), concentration (mono-data muted, e.g., '10 mM'), and a small source-chip indicating which stock or lot (e.g., 'Lot #A2394'). Adjacent to ReagentList, EquipmentChips render as pill-shaped tags with tiny iconography (vortex mixer, centrifuge, pipette, heat block, incubator) showing the instruments required. SafetyBadges render as a horizontal row of color-coded pills with warning icons: amber for PPE requirements (gloves, eye protection), red for hazardous materials (flammable, corrosive, toxic), blue for specialized handling (fume hood, biosafety cabinet). For timed steps, the TimerDisplay sits prominently as a large digital-style countdown card (text-3xl mono-data) with start/pause/reset icon buttons. The timer background shifts from neutral to amber when <30s remain and pulses when time expires. A NotesBox sits below as a small textarea for scientist observations. At the bottom-right, the CompletionCheck is a large 24px checkbox labeled 'Mark complete' that, when checked, locks the card in a completed state (subtle green tint, strikethrough action text) and records a timestamp chip showing who completed it and when. Completed cards show a thin success-colored left border replacing the primary border.",
+  "layout_hints": {
+    "container": "d-surface card with colored left border",
+    "note": "Protocol steps are safety-critical scientific procedures. Every reagent MUST show volume AND concentration. Every hazard MUST have a visible SafetyBadge. Completion MUST be timestamped.",
+    "step_number": "StepNumber uses d-annotation[data-step-number] as a 40px filled circle with bold number. Completed steps show checkmark instead of number. Primary color filled.",
+    "reagent_format": "ReagentRow uses mono-data tabular-nums for all volumes and concentrations. Format: 'Reagent Name | 50 µL | 10 mM | Lot #A2394'. Never abbreviate units.",
+    "safety_badges": "SafetyBadge colors MUST map consistently: amber=PPE, red=hazard, blue=specialized-handling. Each badge includes icon+label, never icon-only (unparseable without label).",
+    "timer_states": "TimerDisplay transitions through states: idle (neutral), running (primary), warning (<30s amber), expired (red pulse). Always shows mm:ss format with tabular-nums.",
+    "completion_lock": "CompletionCheck is single-direction (checking locks the step). Undoing completion requires supervisor password to maintain protocol integrity and audit trail."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_w100 _grid _gap3 _p4",
+    "slots": {
+      "step-header": "Top row containing the circular StepNumber badge on the left and the StepAction instruction text on the right. Action uses semibold heading style with optional muted description subline.",
+      "reagent-list": "Sub-panel showing all reagents required for this step. Each ReagentRow lists name, volume, concentration, and source/lot identifier. Uses d-annotation caption 'Reagents' above the list.",
+      "equipment-chips": "Horizontal row of pill-shaped EquipmentChip tags with tiny icons identifying required instruments (vortex, centrifuge, pipette, heat block, incubator). Clickable to surface instrument details.",
+      "safety-badges": "Horizontal row of color-coded SafetyBadges (amber=PPE, red=hazard, blue=specialized). Icon + text for each. Essential for benchtop safety compliance.",
+      "timer-display": "Timed-preset-only slot. Large mono-data countdown/count-up timer with start/pause/reset icon buttons. Background shifts color as time elapses. Audible chime on completion.",
+      "notes-box": "Optional expandable textarea capturing scientist observations, deviations, or measurements at this step. Timestamped when saved.",
+      "completion-check": "Bottom-right large checkbox labeled 'Mark complete'. Locks step when checked and records who completed it with timestamp. Completed steps show success-tinted background."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Protocol step",
+    "announcements": [
+      "Step {number}: {action}",
+      "Required safety: {badges}",
+      "Timer {started|paused|completed} at {time}",
+      "Step {number} marked complete by {user}"
+    ],
+    "keyboard": [
+      "Space: toggle timer start/pause",
+      "R: reset timer",
+      "C: mark step complete",
+      "N: focus notes box",
+      "Tab: cycle through reagents and equipment chips"
+    ]
+  },
+  "responsive": {
+    "mobile": "Step card expands to full-width. ReagentList collapses into expandable accordion. EquipmentChips wrap to multiple lines. TimerDisplay grows to hero size for visibility at the bench where scientists may be gloved and distant.",
+    "tablet": "Full standard layout. ReagentList and EquipmentChips display side-by-side in two columns if space permits."
+  },
+  "motion": {
+    "micro": {
+      "check-toggle": "checkbox fill + checkmark-draw 200ms ease-out",
+      "chip-hover": "scale 1.03 + shadow 120ms ease-out",
+      "timer-tick": "digit flip 80ms ease-in-out per second"
+    },
+    "transitions": {
+      "completion-lock": "card background tint to success + border color shift 300ms ease-out",
+      "timer-warning": "background color pulse to amber 400ms ease-in-out when <30s",
+      "notes-expand": "height auto + fade 200ms ease-out"
+    },
+    "ambient": {
+      "timer-pulse": "expired timer border red-glow 800ms ease-in-out infinite",
+      "running-shimmer": "timer digits subtle brightness pulse 2s ease-in-out infinite while running"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "ProtocolStep": "Surface(d-surface, border-left-accent) > [StepHeader + ReagentList + EquipmentChip[] + SafetyBadge[] + TimerDisplay? + NotesBox? + CompletionCheck]",
+    "StepHeader": "Row(d-row) > [StepNumber + StepAction]",
+    "StepNumber": "Badge(d-annotation, circular, data-step) > [NumberOrCheck]",
+    "ReagentList": "Panel(d-annotation, bordered) > [ListCaption + ReagentRow[]]",
+    "ReagentRow": "Row(d-row, data-reagent) > [ReagentName + VolumeCell + ConcentrationCell + LotChip]",
+    "EquipmentChip": "Chip(d-annotation, data-equipment) > [EquipmentIcon + EquipmentLabel]",
+    "SafetyBadge": "Badge(d-annotation, data-safety-level) > [WarningIcon + HazardLabel]",
+    "TimerDisplay": "Card(d-surface, data-timer-state) > [DigitReadout + StartButton + PauseButton + ResetButton]",
+    "CompletionCheck": "Control(d-control, data-completion) > [Checkbox + CompletionLabel + TimestampChip?]"
+  }
+}

package/patterns/prototype-demo-bezel.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "prototype-demo-bezel",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Prototype Demo Bezel",
+  "description": "Arcade-screen demo frame for product videos, interactive prototypes, image sequences, before-after states, or playable product previews.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "demo",
+    "prototype",
+    "media",
+    "product",
+    "launch"
+  ],
+  "components": [
+    "Media",
+    "Button",
+    "Tabs",
+    "Badge",
+    "Slider"
+  ],
+  "contained": false,
+  "default_preset": "demo-screen",
+  "presets": {
+    "demo-screen": {
+      "description": "Large bezel-framed product demo with controls, caption strip, status LEDs, and CTA.",
+      "components": [
+        "Media",
+        "Button",
+        "Tabs",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[78rem] _mx[auto]",
+        "slots": {
+          "screen": "Product video, screenshot, prototype, or interactive demo inside a thick bezel.",
+          "control-strip": "Play, pause, chapter, or mode controls styled as cabinet buttons.",
+          "caption": "Short explanation of what the viewer is seeing.",
+          "status-leds": "Tiny labeled state lights for Prototype, Shipping, Beta, or Live.",
+          "demo-cta": "Open full demo, watch walkthrough, or try prototype."
+        }
+      }
+    },
+    "before-after-bezel": {
+      "description": "Single bezel with a before-after slider or mode switch to demonstrate product transformation.",
+      "components": [
+        "Media",
+        "Button",
+        "Tabs",
+        "Slider",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[72rem] _mx[auto]",
+        "slots": {
+          "comparison-screen": "Before-after or mode comparison surface.",
+          "mode-tabs": "Scenario tabs or state controls.",
+          "outcome-strip": "Results or proof metrics tied to the demo.",
+          "demo-cta": "Try or watch action."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap5 _wfull _maxw[78rem] _mx[auto]",
+    "slots": {
+      "screen": "Bezel-framed product demo media",
+      "control-strip": "Cabinet-style demo controls",
+      "caption": "Demo explanation",
+      "status-leds": "Prototype state indicators",
+      "demo-cta": "Demo action"
+    }
+  },
+  "visual_brief": "A product demo that looks embedded in a physical arcade screen or product-testing console. The visual content should be real product evidence: screenshot, prototype, render, video frame, packaging, controller, or clear placeholder with aspect ratio. Avoid decorative abstract gradients as the demo. Controls should use recognizable icons and tactile rectangular arcade-button styling with hard press states. Mode controls should read as a clustered control group, with the primary reserve/watch action separated intentionally rather than scattered across the whole bezel.",
+  "responsive": {
+    "mobile": "Use a 4:3 or square screen ratio with controls wrapping below. Captions stay outside the media so they do not cover product details.",
+    "tablet": "Maintain large screen area and place controls in a horizontal strip.",
+    "desktop": "Use a large 16:9 or 5:3 screen with caption and status controls integrated below the bezel."
+  },
+  "layout_hints": {
+    "media_integrity": "Reserve stable aspect ratio so demos do not shift layout when media loads.",
+    "evidence_first": "The demo must reveal the product, not just vibe. Use realistic UI or product imagery.",
+    "controls": "Use icon buttons where possible for play, pause, next, previous, and fullscreen. Cluster related mode controls together; place the primary conversion action at the far edge or in its own clear action area."
+  },
+  "motion": {
+    "micro": {
+      "control-press": "button depresses with hard shadow collapse",
+      "mode-switch": "screen content swaps with quick pixel wipe under reduced motion fallback"
+    },
+    "transitions": {
+      "screen-load": "screen powers on with instant reveal and subtle LED blink."
+    }
+  },
+  "interactions": [
+    "click-select",
+    "keyboard-navigation",
+    "hover-reveal",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "PrototypeDemoBezel": "Section > [ScreenFrame + ControlStrip + Caption + StatusLeds + DemoCta]",
+    "ScreenFrame": "Bezel(arcade-bezel) > ProductMedia",
+    "ControlStrip": "Toolbar > IconButton[] + ModeTabs?"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Product prototype demo",
+    "keyboard": [
+      "Media controls must be keyboard reachable.",
+      "Tabs or mode switches should use standard arrow-key behavior."
+    ],
+    "announcements": [
+      "Demo mode changed to {mode}.",
+      "Video playback {state}."
+    ],
+    "focus_management": "Fullscreen or modal demo views should trap focus and restore it to the launch control on close."
+  },
+  "io": {
+    "consumes": [
+      "product-demo-media",
+      "prototype-status"
+    ],
+    "produces": [
+      "demo-engagement"
+    ],
+    "actions": [
+      "play-demo",
+      "switch-demo-mode",
+      "open-full-demo"
+    ]
+  }
+}

package/patterns/qa-thread.json

@@ -0,0 +1,109 @@
+{
+  "id": "qa-thread",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Q&A Thread",
+  "description": "Threaded question and answer conversation attached to documents with status tracking, assignments, document attachments, and resolution workflow.",
+  "category": "document",
+  "tags": ["2026", "document", "qa", "thread", "collaboration", "review", "annotations"],
+  "components": ["QuestionCard", "AnswerCard", "AssigneeAvatar", "StatusChip", "ResolveButton", "AttachmentChip"],
+  "default_preset": "sidebar",
+  "presets": {
+    "sidebar": {
+      "description": "Side panel view of Q&A threads anchored to document viewer, showing pending and resolved questions with inline answer composition",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-4 _w-full _bg-surface _border-l _overflow-y-auto"
+      }
+    },
+    "inline": {
+      "description": "Expandable inline threads attached directly to document highlights, collapsing to single indicators when not focused for minimal visual intrusion",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-2 _w-full"
+      }
+    },
+    "full": {
+      "description": "Dedicated full-page Q&A view with filtering, sorting, and search across all threads for dedicated review sessions and audits",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-6 _p-6 _w-full _max-w-4xl _mx-auto"
+      }
+    }
+  },
+  "visual_brief": "A vertical stack of question thread cards. Each question card (d-surface with 16px padding, 12px border radius) has an asker avatar (32px circle) with name and timestamp at top, followed by the question text in regular 14px type. Attachment chips appear below the question as small pills showing the document excerpt or page reference (e.g. 'Page 3: Revenue recognition...'), each with a link icon and text-ellipsis. Status chip sits top-right: pending (amber pulse), answered (blue check), resolved (green check with strike-through treatment). Answer cards nest indented 24px below the question with a left border accent, each showing answerer avatar, answer text, timestamp, and optional attachment chips. Resolve button appears on unresolved threads as a primary button at the bottom of the thread. Assignee avatars stack as small 24px overlapping circles showing who is assigned. Hover reveals inline reply composer.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-4 _p-4 _w-full _bg-surface _border-l _overflow-y-auto",
+    "slots": {
+      "question-card": "Top-level thread card (d-surface) containing the original question, asker metadata, status, assignees, attachments, and nested answers.",
+      "asker-info": "Header row with asker avatar (32px circle), asker name, relative timestamp (e.g. '2 hours ago'), and optional role label.",
+      "question-text": "Main question body text in regular 14px type. Supports rich text with inline code, bold, italic.",
+      "attachment-chip": "Pill-shaped chip referencing a document location or file. Shows link icon, page/section reference, and short excerpt with ellipsis. Clickable to jump to source.",
+      "status-chip": "Pill at top-right of question card indicating thread state: pending, answered, resolved. Color-coded with icon.",
+      "assignee-avatars": "Stacked overlapping avatars (24px) showing users assigned to respond to this question.",
+      "answer-card": "Nested answer card (d-annotation) indented below question with left border accent, containing answerer avatar, answer text, timestamp.",
+      "resolve-button": "Primary action button at bottom of unresolved thread allowing authorized users to mark resolved.",
+      "reply-composer": "Inline text input with submit button revealed on hover or expand."
+    }
+  },
+  "responsive": {
+    "mobile": "Sidebar becomes bottom sheet. Answer cards reduce indent to 16px. Attachment chips wrap vertically. Assignee avatars collapse to count badge.",
+    "tablet": "Sidebar at 320px width. Standard layout with all elements visible.",
+    "desktop": "Full sidebar at 380px or dedicated full-page layout. Keyboard shortcuts for navigation and reply."
+  },
+  "layout_hints": {
+    "thread_priority": "Question, answer state, and assignee ownership should be visible before attachment or reply controls complicate the thread.",
+    "nesting_role": "Nested answers should feel structurally attached to the parent question so the conversation remains legible under review pressure.",
+    "sidebar_behavior": "In side-panel mode, the thread should feel anchored to the reviewed document rather than like a detached chat pane."
+  },
+  "layout_hints": {
+    "thread_priority": "Question, answer state, and assignee ownership should be visible before attachment or reply controls complicate the thread.",
+    "nesting_role": "Nested answers should feel structurally attached to the parent question so the conversation remains legible under review pressure.",
+    "sidebar_behavior": "In side-panel mode, the thread should feel anchored to the reviewed document rather than like a detached chat pane."
+  },
+  "motion": {
+    "micro": {
+      "status-change": "chip color transition 200ms ease-out + check-icon draw",
+      "resolve-button-hover": "scale(1.02) + shadow-lift 150ms"
+    },
+    "transitions": {
+      "thread-resolve": "fade to resolved state + strikethrough animation 400ms ease-out",
+      "answer-add": "slide-down + fade 250ms spring"
+    },
+    "ambient": {
+      "pending-pulse": "status chip amber pulse 2s ease-in-out infinite on pending threads"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "real-time-updates",
+    "hover-reveal"
+  ],
+  "composition": {
+    "QAThread": "Root(d-section, stack) > QuestionCard*(d-surface)",
+    "QuestionCard": "Card > [AskerInfo + StatusChip + QuestionText + AttachmentChip* + AssigneeAvatars + AnswerCard* + ResolveButton? + ReplyComposer?]",
+    "AnswerCard": "Nested(d-annotation, indent) > [AnswererInfo + AnswerText + AttachmentChip*]",
+    "AssigneeAvatars": "Stack(overlap) > AssigneeAvatar*(d-presence)"
+  },
+  "accessibility": {
+    "role": "feed",
+    "aria-label": "Document Q&A thread",
+    "announcements": [
+      "Question from {asker}: {preview}",
+      "Answer added by {answerer}",
+      "Thread resolved by {user}",
+      "Assigned to {assignees}"
+    ],
+    "keyboard": [
+      "Tab: cycle through threads",
+      "Enter: expand/collapse thread",
+      "R: reply to focused thread",
+      "Shift+R: mark resolved",
+      "A: assign thread",
+      "J/K: next/previous thread"
+    ]
+  }
+}

package/patterns/quick-start.json

@@ -0,0 +1,88 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "quick-start",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Quick Start",
+  "description": "Numbered step cards with code blocks, chat bubbles, or output content showing a getting-started flow. Each card has a vibrant gradient background, a numbered circle badge, a step title, and a content block. Supports tabbed configuration blocks below the cards for framework-specific setup instructions. Ideal for onboarding sections and quick-start guides.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge"
+  ],
+  "contained": false,
+  "default_preset": "cards",
+  "presets": {
+    "cards": {
+      "description": "3 cards in a horizontal row, each with a vibrant gradient background (coral, amber, purple). Each card contains: a 40px numbered circle badge with semi-transparent dark background, a bold step title, and a content block that can be a monospace code block (dark semi-transparent bg), a chat bubble (rounded corners, left-aligned), or a terminal output block. Cards lift on hover with colored box-shadow. Below the cards, an optional tabbed config section shows framework-specific code with tab buttons (rounded top corners, active tab highlighted in cyan).",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_flex _gap6 _mw[920px] _mx[auto] _mb12",
+        "slots": {
+          "step-number": "Badge circle: _w10 _h10 _rounded[50%] _flex _items[center] _justify[center] _fs[1rem] _fw700 _mb4 _bgblack/20 _fgwhite. Displays the step number.",
+          "step-title": "Step heading with h3 _fs[1rem] _fw700 _mb3 _fgwhite. Brief title like 'Configure', 'Prompt', 'Build'.",
+          "step-content": "Content area that varies by step type. Code block: _bgblack/30 _rounded[8px] _p3 _mono _fs[0.7rem] _lh[1.7] _overflow[auto] _whitespace[pre] _fgwhite/85. Chat bubble: _bgblack/20 _rounded[10px_10px_10px_2px] _p4 _fs[0.82rem] _lh[1.5] _text[left]. Output block: _bgblack/30 _rounded[8px] _p3 _mono _fs[0.68rem] _lh[1.7] _whitespace[pre] _overflow[auto] _fgwhite/85."
+        }
+      }
+    },
+    "vertical": {
+      "description": "Stacked vertical layout with steps arranged top to bottom instead of side by side. Each step is a full-width card with the same gradient, badge, title, and content structure. Better for mobile-first designs or when step content is longer.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_flex _col _gap6 _mw[640px] _mx[auto]",
+        "slots": {
+          "step-number": "Badge circle with numbered step, _rounded[50%] _w10 _h10 _bgblack/20 _fgwhite",
+          "step-title": "Step heading with _fw700 _fgwhite _mb3",
+          "step-content": "Content block: code block, chat bubble, or output depending on the step"
+        }
+      }
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "focus-trap",
+    "click-select"
+  ],
+  "layout_hints": {
+    "direction": "horizontal",
+    "note": "For 3-5 steps, use a HORIZONTAL layout with connecting lines or arrows between numbered circles. Center the entire row within the section. For 6+ steps, use a 2-column grid. NEVER use a left-aligned vertical list for ≤5 steps.",
+    "connector": "Use a subtle horizontal line between step circles (1px solid var(--d-border) or border at 50% opacity).",
+    "step_circle": "Numbered circle with accent border, 40-48px diameter, number centered. Background transparent or surface.",
+    "alignment": "center",
+    "step_text": "Title bold, below or right of circle. Description in muted text, max 2 lines."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_flex _gap6 _mw[920px] _mx[auto]",
+    "slots": {
+      "step-number": "Numbered circle badge",
+      "step-title": "Step title heading",
+      "step-content": "Code block, chat bubble, or output content"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": [
+      "tab-switch"
+    ]
+  }
+}

package/patterns/recipefork-activity-feed.json

@@ -0,0 +1,51 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "recipefork-activity-feed",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Recipefork Activity Feed",
+  "description": "Recipefork-flavored community activity rail with publish, fork, follow, comment, reaction, and cookbook events rendered as linked preview cards.",
+  "dependencies": {
+    "patterns": {
+      "activity-feed": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Image",
+        "Avatar",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Image",
+    "Avatar",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "preview-cards",
+  "presets": {
+    "preview-cards": {
+      "description": "Vertical rail of linked activity cards with preview image, event icon, summary text, actor attribution, and timestamp.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "filters": "Compact event filter chips for all, recipes, social, and cookbooks",
+          "event-card": "Linked activity card with preview image, icon chip, summary, actor attribution, and timestamp"
+        }
+      }
+    }
+  },
+  "visual_brief": "A right-rail social surface that feels native to Recipefork rather than like a generic audit log. Each event has enough food or cookbook imagery to stay visually connected to the product, with compact event-type cues and lightweight timestamps.",
+  "composition": {
+    "RecipeforkActivityFeed": "Stack(recipefork-rail) > [FilterChips + EventCard*]"
+  }
+}

package/patterns/recipefork-chef-ingredients-display.json

@@ -0,0 +1,48 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "recipefork-chef-ingredients-display",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Recipefork Chef Ingredients Display",
+  "description": "Chef Mode ingredient presentation surface with scale controls and measurement-system-aware rendering.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "Button",
+        "Card",
+        "Label",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Badge",
+    "Button",
+    "Card",
+    "Label",
+    "icon"
+  ],
+  "default_preset": "scaled",
+  "presets": {
+    "scaled": {
+      "description": "Ingredient list with recipe scaling controls and converted quantity display.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Section label and Chef Mode badge",
+          "scale-controls": "Multiplier buttons plus servings summary",
+          "ingredient-item": "Quantity, unit, ingredient, preparation"
+        }
+      }
+    }
+  },
+  "visual_brief": "A clean ingredient list optimized for Chef Mode recipe detail pages. Scaling controls sit above the ingredient list, and each ingredient row foregrounds quantity and unit before the ingredient name and preparation note.",
+  "composition": {
+    "ChefIngredientsDisplay": "Card(recipefork-card) > [Header + ScaleControls + IngredientList]"
+  }
+}

package/patterns/recipefork-chef-ingredients-editor.json

@@ -0,0 +1,52 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "recipefork-chef-ingredients-editor",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Recipefork Chef Ingredients Editor",
+  "description": "Structured ingredient editor for Recipefork recipes with quantity, unit, ingredient, preparation, autosuggest helpers, and recipe scaling behavior. This is the canonical ingredient authoring surface used by Chef Mode and the standardized simple-mode ingredient flow.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Input",
+        "Card",
+        "Badge",
+        "Label",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Input",
+    "Card",
+    "Badge",
+    "Label",
+    "icon"
+  ],
+  "default_preset": "structured",
+  "presets": {
+    "structured": {
+      "description": "Row-based structured ingredient editor with autosuggest, scaling controls, and stable ingredient IDs for downstream instruction linking. Although originally introduced for Chef Mode, Recipefork now uses this as the shared ingredient authoring surface across recipe modes.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Section heading with add button",
+          "scale-controls": "Recipe scaling controls and servings summary",
+          "ingredient-row": "Quantity, unit, ingredient, preparation, remove",
+          "suggestions": "Autocomplete panels for units and preparation terms",
+          "preview": "Compact ingredient preview string"
+        }
+      }
+    }
+  },
+  "visual_brief": "A structured ingredient editor rendered as a vertical stack of bordered rows. Each row exposes quantity, unit, ingredient name, and preparation, with autosuggest panels for unit abbreviations and kitchen prep language. Above the rows sits a scaling strip that changes displayed quantities while preserving structured ingredient identity for step linking. The same editor should feel approachable enough for simple recipes while still supporting advanced Chef Mode workflows.",
+  "composition": {
+    "ChefIngredientsEditor": "Card(recipefork-card) > [Header + ScaleControls + IngredientRow* + AddButton]"
+  }
+}