@decantr/content 3.8.0

package/patterns/prompt-playground.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "prompt-playground",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Prompt Playground",
+  "description": "Split-pane prompt editor with model selector, parameter controls, token counter, and response panel for iterating on AI prompts. Supports side-by-side, stacked, and multi-model comparison layouts.",
+  "category": "ai-tools",
+  "tags": [
+    "2026",
+    "ai-tools",
+    "prompt",
+    "playground",
+    "LLM",
+    "editor",
+    "comparison",
+    "model-selector"
+  ],
+  "components": [
+    "PromptEditor",
+    "ResponsePanel",
+    "ModelSelector",
+    "ParameterSliders",
+    "TokenCounter",
+    "HistoryList",
+    "SaveButton",
+    "ComparisonView"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Side-by-side layout with prompt editor on the left and response panel on the right, top bar with model and parameter controls",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _w-full"
+      }
+    },
+    "stacked": {
+      "description": "Vertical layout with prompt editor on top and response panel below, suitable for narrower viewports or focused editing",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _w-full"
+      }
+    },
+    "comparison": {
+      "description": "Multi-model comparison with shared prompt editor above and 2-3 response panels side-by-side below, each using a different model",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _h-full _w-full"
+      }
+    }
+  },
+  "visual_brief": "Full-height layout divided into distinct zones. The top bar (48px height, surface background, bottom border) contains: a ModelSelector dropdown on the left showing the current model name with a chevron (e.g., 'Claude 3.5 Sonnet'), followed by ParameterSliders — horizontal slider controls for temperature (0-2, default 1, step 0.1) and max tokens (1-4096, default 1024) each with a numeric input box showing the exact value to the right of the slider. After the sliders, a TokenCounter displays three compact values: input tokens, output tokens, and total tokens as 'In: 245 | Out: 512 | Total: 757' using tabular-nums monospace, with a tiny horizontal stacked bar below the numbers showing input (muted) and output (accent) proportions. A SaveButton (outlined, icon: bookmark) sits at the far right of the top bar. Below the top bar, the main area splits into two equal panes separated by a 4px draggable divider. Left pane: the PromptEditor, a monospace text editor (14px, line-height 1.6) with a dark surface background, line numbers in a 40px gutter on the left (muted color), and syntax highlighting for template variables — any text matching {{variable_name}} renders in accent color with a subtle accent background. The editor supports multi-line input with vertical scrolling. A 'System prompt' collapsible section sits above the main input area for system-level instructions. Right pane: the ResponsePanel with a lighter surface background, rendering the AI response with full markdown formatting (headings, bold, italic, code blocks with syntax highlighting, lists, links). At the top of the response panel, a small status bar shows generation time, model name, and a copy-all button. A prominent 'Run' button (accent filled, 40px height, centered between the two panes or in the top bar) triggers generation with a loading spinner replacing its label during processing. In the comparison preset, the prompt editor spans full width at the top (40% height), and below it 2-3 ResponsePanels sit side-by-side, each with its own model label header and independent scroll. The HistoryList is an optional collapsible left sidebar (200px) showing past prompt-response pairs as compact cards (truncated prompt text, timestamp, model used), clickable to restore.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _h-full _w-full",
+    "slots": {
+      "top-bar": "Horizontal bar (48px height) with surface background and bottom border. Contains ModelSelector dropdown, ParameterSliders (temperature and max-tokens each with slider + numeric input), TokenCounter (input/output/total with stacked bar), and SaveButton. Items spaced with gap-4 and vertically centered.",
+      "prompt-editor": "Left pane (or top pane in stacked). Monospace text editor with dark surface background. Line numbers in left gutter. Syntax highlighting for {{template_variables}} in accent color. Collapsible system prompt section above main input. Vertical scrolling. Supports paste, undo/redo, find/replace. Min-height 200px.",
+      "response-panel": "Right pane (or bottom pane in stacked). Lighter surface background. Renders AI response as formatted markdown with headings, lists, code blocks (syntax highlighted with copy button), and inline formatting. Status bar at top shows generation time, tokens used, model name, and copy-all button. Loading state shows a pulsing cursor animation. Empty state shows muted placeholder text 'Run a prompt to see the response'.",
+      "run-button": "Prominent accent-filled button labeled 'Run' (or play icon + 'Run'). Positioned in the divider between editor and response, or in the top bar. During generation: label changes to a spinner + 'Running...', button becomes disabled. Keyboard shortcut: Cmd+Enter / Ctrl+Enter.",
+      "history-list": "Optional collapsible left sidebar (200px wide). Lists past prompt-response pairs as compact cards showing truncated prompt text (first 60 chars), model name badge, timestamp, and token count. Click to restore prompt and response. Search input at top for filtering history. Most recent at top.",
+      "comparison-view": "Comparison preset only. 2-3 ResponsePanels side-by-side below a shared full-width PromptEditor. Each panel has a model selector header, independent scroll, and its own status bar. Differences between responses can be highlighted with a diff toggle."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Prompt playground editor",
+    "announcements": [
+      "Model changed to {model_name}",
+      "Temperature set to {value}",
+      "Max tokens set to {value}",
+      "Generation started with {input_tokens} input tokens",
+      "Generation complete: {output_tokens} output tokens in {duration}",
+      "Generation failed: {error_message}",
+      "Prompt saved to history",
+      "History item loaded: {truncated_prompt}"
+    ],
+    "keyboard": [
+      "Cmd+Enter / Ctrl+Enter: run the current prompt",
+      "Cmd+S / Ctrl+S: save current prompt to history",
+      "Cmd+L / Ctrl+L: focus model selector",
+      "Cmd+H / Ctrl+H: toggle history sidebar",
+      "Tab: cycle between prompt editor, run button, and response panel",
+      "Escape: cancel running generation",
+      "Cmd+/ : toggle system prompt section"
+    ]
+  },
+  "responsive": {
+    "mobile": "Stacked layout forced: prompt editor on top, response below. Top bar wraps to two rows (model selector + run button on first row, sliders on second). History list hidden behind a hamburger menu. Token counter shows only total. Sliders replaced by compact numeric-only inputs. Full-width panes with no draggable divider.",
+    "tablet": "Stacked layout default with option to switch to side-by-side. Top bar in single row with compressed sliders. History as a slide-over drawer from left. Comparison mode shows 2 response panels (not 3).",
+    "desktop": "Full side-by-side layout with draggable divider. Top bar in single row with full slider controls. History sidebar collapsible. Comparison mode supports 2-3 response panels. Keyboard shortcuts fully active. Hover tooltips on all controls."
+  },
+  "layout_hints": {
+    "editor_priority": "The prompt editor and run loop are the primary focus. Token counters, sliders, and history should support iteration without crowding the act of writing and evaluating prompts.",
+    "comparison_mode": "When multiple response panels are visible, keep the shared prompt context obvious so the user reads the comparison as one experiment rather than separate chats.",
+    "control_rhythm": "Top-bar controls should feel compact and tool-like. Preserve a clear separation between experiment controls, editor canvas, and response surfaces."
+  },
+  "motion": {
+    "micro": {
+      "run-button-hover": "shadow elevation increase + slight scale(1.02) 120ms ease-out",
+      "slider-thumb-drag": "thumb scales to 1.2 during drag 100ms ease-out",
+      "token-counter-update": "number cross-fade 200ms ease-out on value change"
+    },
+    "transitions": {
+      "generation-start": "response panel clears with fade 150ms, then pulsing cursor appears",
+      "generation-stream": "text appends character-by-character or chunk-by-chunk with no animation (instant append)",
+      "history-toggle": "sidebar width 0→200px + opacity 300ms ease-in-out",
+      "pane-resize": "divider drag updates pane widths in real-time with no transition delay",
+      "comparison-add": "new response panel slides in from right 300ms ease-out"
+    },
+    "ambient": {
+      "generating-indicator": "run button has a subtle pulse glow during generation, 1.5s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "Playground": "Section(d-section, flex-col, h-full) > [TopBar > [ModelSelector(d-control) + ParameterSliders(d-control) + TokenCounter(d-data, mono-data) + SaveButton(d-interactive)] + MainArea]",
+    "MainArea": "Row(d-section, flex, h-full) > [HistoryList?(d-surface, collapsible) + PromptEditor(d-surface, monospace) + RunButton(d-interactive, accent) + ResponsePanel(d-surface, markdown)]",
+    "PromptEditor": "Editor(d-surface, dark, monospace, line-numbers) > [SystemPrompt?(collapsible) + MainInput(highlight: {{vars}})]",
+    "ResponsePanel": "Panel(d-surface) > [StatusBar(d-annotation, mono-data) + ResponseContent(markdown, scrollable)]",
+    "ComparisonView": "Stack(d-section) > [PromptEditor(full-width) + Row > ResponsePanel*(d-surface, model-labeled)[]]",
+    "HistoryList": "Sidebar(d-surface, w-200, collapsible) > [SearchInput + HistoryCard*(d-interactive, truncated)[]]"
+  }
+}

package/patterns/property-card.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "property-card",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Property Card",
+  "description": "Single property overview card with key metrics including address, unit count, occupancy rate, and monthly revenue.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full property card with image and all metrics",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p0 _r2 _overflow[hidden]",
+        "slots": {
+          "image": "Property photo (aspect-ratio 16/9)",
+          "content": "Property details and metrics",
+          "address": "Street address, city, state, zip",
+          "type": "Property type badge (residential, commercial, multi-family)",
+          "metrics": "Unit count, occupancy rate, monthly revenue",
+          "status": "Property status badge (active, inactive, for sale)",
+          "actions": "Quick action buttons (view, edit, menu)"
+        }
+      }
+    },
+    "compact": {
+      "description": "Condensed card for grid view without image",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _p4",
+        "slots": {
+          "header": "Property name and type badge",
+          "address": "Address line",
+          "metrics": "Compact metrics row",
+          "actions": "View button"
+        }
+      }
+    },
+    "list-item": {
+      "description": "Row format for table/list views",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _gap4 _p3 _borderB",
+        "slots": {
+          "image": "Small thumbnail",
+          "info": "Property name and address",
+          "metrics": "Units, occupancy, revenue",
+          "status": "Status badge",
+          "actions": "Action buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3",
+    "slots": {
+      "image": "Property photo",
+      "content": "Property details",
+      "metrics": "Key metrics",
+      "actions": "Action buttons"
+    }
+  },
+  "visual_brief": "Bordered card with a property photo at the top, followed by the property address and name. A metrics row shows unit count, occupancy rate (as a percentage with color coding — green for high, red for low), and monthly revenue. An action bar at the bottom provides View and Edit buttons. The compact preset removes the photo and shows a denser card with just address, key metrics, and actions. The list-item preset renders as a horizontal row suitable for table-like lists. Status badges indicate property state (active, maintenance, vacant).",
+  "responsive": {
+    "mobile": "Cards take full width. Photo height reduces. Metrics wrap to two rows. Action buttons go full-width.",
+    "tablet": "Two-column card grid. Standard card proportions with photo.",
+    "desktop": "Three-column grid or larger. Cards at comfortable size with all metrics inline."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "PropertyCard": "Card(d-surface, hoverable) > [Image(aspect-ratio: 16/9) + Content > [Address(font-medium) + TypeBadge(d-annotation) + MetricsRow + StatusBadge(d-annotation)] + Actions(d-interactive)]",
+    "MetricsRow": "Row(d-data, gap-3) > [UnitCount(mono-data) + OccupancyRate(mono-data, color: level) + Revenue(mono-data)]"
+  }
+}

package/patterns/property-detail.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "property-detail",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Property Detail",
+  "description": "Full property view with details, gallery, metrics, units, financials, documents, and maintenance history.",
+  "dependencies": {
+    "patterns": {
+      "unit-list": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Tabs"
+      ],
+      "charts": [
+        "AreaChart"
+      ]
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Tabs"
+  ],
+  "default_preset": "view",
+  "presets": {
+    "view": {
+      "description": "Full property detail view with tabs",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Tabs"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Property name, address, edit button, back link",
+          "gallery": "Property photo gallery",
+          "metrics": "Key metrics row (occupancy, revenue, expenses, NOI)",
+          "tabs": "Overview, Units, Financials, Documents, Maintenance tabs",
+          "overview": "Property details (type, year, sqft, beds/baths)",
+          "units": "Unit list (embedded)",
+          "financials": "Property P&L summary",
+          "documents": "Property documents",
+          "maintenance": "Recent maintenance tickets",
+          "timeline": "Property activity history"
+        }
+      }
+    },
+    "create": {
+      "description": "Create or edit property form with address, type, unit count fields, and image upload area",
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select",
+        "Textarea"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _maxw[800px]",
+        "slots": {
+          "header": "Form title",
+          "form": "Property form fields",
+          "images": "Image upload area",
+          "actions": "Save/cancel buttons"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Property header",
+      "gallery": "Photo gallery",
+      "metrics": "Key metrics",
+      "content": "Tabbed content area"
+    }
+  },
+  "visual_brief": "Full property view starting with a header showing property name, address, status badge, and action buttons (Edit, Archive). Below the header, a photo gallery as a horizontal scrollable strip or grid of thumbnails. A metrics row shows key stats: total units, occupancy rate, monthly revenue, NOI. The main content area uses horizontal tabs: Overview (property details and description), Units (unit list), Financials (income/expense summaries), Documents (lease PDFs, insurance), and Maintenance (ticket list). The create preset replaces display fields with an input form.",
+  "responsive": {
+    "mobile": "Single-column layout. Gallery becomes a swipeable carousel. Tabs become a dropdown selector or horizontally scrollable. Content sections stack fully.",
+    "tablet": "Standard layout with scrollable tab bar. Gallery shows 3-4 thumbnails. Content area comfortable width.",
+    "desktop": "Full layout with all tabs visible. Gallery shows full thumbnail row. Content area can show side-by-side panels within tabs."
+  },
+  "layout_hints": {
+    "asset_priority": "Lead with the property's identity and health first: address, status, and key metrics. Tabs should deepen that understanding without displacing the core property context.",
+    "gallery_role": "Photos should support recognition and context, not take over the page. Keep the gallery clearly subordinate to the operational summary.",
+    "tabbed_depth": "Overview, units, financials, documents, and maintenance should feel like one connected asset record, not separate microsites."
+  },
+  "motion": {
+    "micro": "Photo thumbnails, actions, and tab states may sharpen subtly on hover and focus.",
+    "transitions": "Tab and gallery interactions should preserve place and asset identity rather than creating abrupt mode switches."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Property detail",
+    "keyboard": [
+      "Header actions, gallery controls, and tabs should appear before deeper property panels in keyboard order."
+    ],
+    "announcements": [
+      "Property name, status, address, and active tab context should be exposed semantically so the asset record remains understandable without relying on visual tab structure."
+    ]
+  },
+  "composition": {
+    "PropertyDetail": "Container(d-section, flex-col, gap-6) > [Header + Gallery + MetricsRow + TabContent]",
+    "Header": "Row(d-surface, space-between) > [PropertyName(heading2) + Address(text-muted) + StatusBadge(d-annotation) + ActionButtons(d-interactive)]",
+    "Gallery": "Row(d-data, scrollable) > Thumbnail(clickable)[]",
+    "MetricsRow": "Grid(d-data, 4-col) > MetricCard(d-surface)[]",
+    "TabContent": "Tabs(d-control) > [OverviewTab + UnitsTab + FinancialsTab + DocumentsTab + MaintenanceTab]"
+  }
+}

package/patterns/property-grid.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "property-grid",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Property Grid",
+  "description": "Dashboard grid of all properties with filtering, search, view toggles, and portfolio summary.",
+  "dependencies": {
+    "patterns": {
+      "property-card": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select",
+        "Tabs"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Input",
+    "Select",
+    "Tabs"
+  ],
+  "default_preset": "cards",
+  "presets": {
+    "cards": {
+      "description": "Card grid layout with property cards",
+      "components": [
+        "Button",
+        "icon",
+        "Input",
+        "Select"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Title, add property button, view toggle",
+          "summary": "Portfolio summary metrics",
+          "filters": "Property type, status, location filters",
+          "search": "Property search input",
+          "grid": "Property cards grid",
+          "pagination": "Page controls"
+        }
+      }
+    },
+    "table": {
+      "description": "Table layout with sortable columns",
+      "components": [
+        "Button",
+        "icon",
+        "Input"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title and controls",
+          "filters": "Filter controls",
+          "table": "Property table with columns",
+          "pagination": "Table pagination"
+        }
+      }
+    },
+    "map": {
+      "description": "Interactive map view with property location pins and a scrollable sidebar property list",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _h[calc(100vh-200px)]",
+        "slots": {
+          "sidebar": "Property list sidebar",
+          "map": "Interactive map with pins"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Page header with controls",
+      "summary": "Portfolio metrics",
+      "filters": "Search and filters",
+      "items": "Property cards or rows",
+      "pagination": "Page controls"
+    }
+  },
+  "visual_brief": "Dashboard page for all properties. Header row with 'Properties' title, a search input, and an 'Add Property' button. A portfolio summary bar shows total properties, total units, average occupancy, and total monthly revenue. Filter controls below offer search by name, filter by status, and view toggle (cards/table/map). The main area displays property cards in a responsive grid, a data table, or a map view with pins. Pagination controls at the bottom handle large portfolios.",
+  "responsive": {
+    "mobile": "Single-column property cards. Summary metrics in a 2x2 grid. Filters collapse into a filter button. Map view takes full screen.",
+    "tablet": "Two-column card grid. Summary in a row. Filters visible. Table view has horizontal scroll.",
+    "desktop": "Three-column card grid or full-width table. All summary, filters, and pagination visible."
+  },
+  "layout_hints": {
+    "portfolio_priority": "Lead with portfolio-wide scanability first: summary metrics, active filters, then the properties themselves. The user should understand the state of the portfolio before diving into any one asset.",
+    "view_modes": "Cards, table, and map should preserve the same property hierarchy and filter context rather than feeling like unrelated screens.",
+    "toolbar_rhythm": "Search, filters, and add-property actions belong in one operational header band. Parent pages should not wrap this pattern in another competing control bar."
+  },
+  "motion": {
+    "micro": "View toggles and property cards may sharpen or lift subtly on hover. Filter chips or selectors should respond crisply without stealing attention from the portfolio items.",
+    "transitions": "Changing between card, table, and map modes should preserve orientation and current filter state rather than redrawing the whole surface abruptly."
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Property portfolio",
+    "keyboard": [
+      "Header controls, filters, and property items should follow a predictable top-to-bottom, left-to-right order."
+    ],
+    "announcements": [
+      "Portfolio summaries, active filters, and individual property identity should be exposed semantically so the collection remains understandable beyond its visual layout."
+    ]
+  },
+  "composition": {
+    "PropertyGrid": "Container(d-section, flex-col, gap-6) > [Header + PortfolioSummary + Filters + PropertyItems + Pagination]",
+    "Header": "Row(d-control, space-between) > [Title + AddPropertyButton(d-interactive) + ViewToggle(d-interactive)]",
+    "PortfolioSummary": "Row(d-data) > [TotalProperties + TotalUnits + AvgOccupancy(mono-data) + TotalRevenue(mono-data)]",
+    "Filters": "Row(d-control) > [SearchInput(d-control) + StatusFilter(d-control) + TypeFilter(d-control)]",
+    "PropertyItems": "Grid(d-data, responsive: 1/2/3-col) > PropertyCard[]"
+  }
+}

package/patterns/prose-section.json

@@ -0,0 +1,102 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "prose-section",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Prose Section",
+  "description": "Long-form editorial or company-story section with comfortable reading width, optional supporting media, and a stable narrative rhythm for marketing and about pages.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Image",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Image",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Single-column editorial section with overline, heading, body copy, and optional supporting media or quote.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _wfull _maxw[56rem] _mx[auto]",
+        "slots": {
+          "eyebrow": "Optional overline label using d-label[data-anchor]",
+          "heading": "Section heading with heading2 or heading3 scale",
+          "body": "Long-form prose blocks with comfortable line length and muted supporting text",
+          "supporting-media": "Optional image, pull quote, or stat block below the prose"
+        }
+      }
+    },
+    "story": {
+      "description": "Narrative company-story section with wider body copy, optional image pairing, and a sequential scroll rhythm that feels deliberate instead of dense.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_grid _gc1 _lg:gc[1.15fr_0.85fr] _gap8 _wfull _maxw[72rem] _mx[auto] _items[start]",
+        "slots": {
+          "heading-column": "Eyebrow, heading, and lead paragraph anchoring the story",
+          "body-column": "Narrative prose blocks, milestone list, or supporting quote stack",
+          "media-column": "Optional founder portrait, product still, or ambient visual proof aligned to the story"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _wfull _maxw[56rem] _mx[auto]",
+    "slots": {
+      "eyebrow": "Optional section label",
+      "heading": "Narrative section heading",
+      "body": "Long-form prose content",
+      "supporting-media": "Optional media or quote"
+    }
+  },
+  "visual_brief": "Editorial prose block that feels authored and breathable rather than like a utility text dump. Heading and lead copy establish narrative intent first, followed by long-form paragraphs with generous line-height and restrained width. The story preset can pair the prose with a portrait, ambient image, or milestone rail, but the text remains the primary visual element.",
+  "layout_hints": {
+    "measure": "Keep prose at a comfortable reading measure: roughly 60-75 characters per line for body copy. Do not let long-form copy run edge-to-edge across the viewport.",
+    "surface_usage": "This pattern should not automatically wrap itself in a d-surface card. Treat it as editorial content living within the shell rhythm unless a route explicitly needs contained prose.",
+    "vertical_rhythm": "Use a calm vertical rhythm between heading, lead, and body blocks. Paragraph groups should feel authored, not densely stacked utility text.",
+    "supporting_media": "If supporting media is present, it should reinforce the story without overpowering the text column. Favor one strong visual rather than a collage."
+  },
+  "responsive": {
+    "mobile": "Collapse to a single editorial column with tighter section spacing. Supporting media moves above or below the text rather than beside it. Preserve reading measure with comfortable horizontal padding.",
+    "tablet": "Single-column by default with optional media below the prose. Story preset may begin introducing a two-region composition when space allows, but text should remain the focus.",
+    "desktop": "Standard preset stays single-column with a max-width reading measure. Story preset can split into text and supporting-media columns with generous gap spacing."
+  },
+  "motion": {
+    "micro": "Minimal reveal motion only: supporting media and quote accents may fade in softly, but prose should remain calm and stable.",
+    "transitions": "Section-level entrance may use a subtle fade-up or staggered reveal of prose blocks over 200-300ms, never a dramatic slide or parallax.",
+    "ambient": "Avoid ornamental ambient motion inside the prose section itself; let surrounding page treatments carry atmosphere."
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "keyboard-navigation",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Editorial prose section",
+    "keyboard": [
+      "Tab moves between links, CTA buttons, and interactive supporting content in reading order."
+    ],
+    "announcements": [
+      "Screen readers should encounter the heading before body copy and optional supporting media in source order."
+    ],
+    "focus_management": "Keep prose in semantic heading and paragraph structure. Interactive supporting elements should follow the narrative flow rather than interrupt it."
+  },
+  "composition": {
+    "ProseSection": "Container(d-section, editorial rhythm) > [Eyebrow? + Heading + Lead? + Body + SupportingMedia?]",
+    "StorySection": "Grid(editorial split) > [HeadingColumn + BodyColumn + MediaColumn?]",
+    "Body": "Stack(typography-first) > Paragraph[]"
+  }
+}