@decantr/content 3.8.0

package/patterns/petition-card.json

@@ -0,0 +1,106 @@
+{
+  "id": "petition-card",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Petition Card",
+  "description": "Petition signature card with progress toward goal, share actions, trust signals, and countdown for civic engagement platforms.",
+  "category": "civic",
+  "tags": ["2026", "civic", "petition", "engagement", "signatures", "progress"],
+  "components": ["PetitionTitle", "SignatureProgress", "SignButton", "ShareBar", "TrustBadge", "AuthorInfo"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full petition card with title, description, signature progress, sign CTA, share bar, and trust badges for main petition pages",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _p-6 _bg-surface _rounded-xl _border _w-full _max-w-xl"
+      }
+    },
+    "compact": {
+      "description": "List-item compact card showing title, progress, and sign button for browse pages and search results with minimum friction",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-2 _p-4 _bg-surface _rounded-lg _border _w-full"
+      }
+    },
+    "featured": {
+      "description": "Hero-sized featured petition with large title, prominent progress bar, and expanded trust signals for homepage and campaign launches",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-6 _p-8 _bg-surface _rounded-2xl _border _w-full _max-w-3xl"
+      }
+    }
+  },
+  "visual_brief": "A rectangular card (rounded 12px, subtle border and shadow) with petition content vertically stacked. Author info at top shows small 32px avatar with author name and organization label in muted text. Petition title renders in large semibold type (20px standard, 28px featured) with 1-3 lines. Brief description follows in regular 14px body text with 3-line clamp. Signature counter displays prominently below as large numeric text (e.g. '3,247 signatures' in 24px bold) with goal suffix in muted ('of 5,000 goal'). Horizontal progress bar sits directly below at 8px tall with accent-color fill and subtle pulse when active. Sign button is a prominent primary CTA button (full-width) labeled 'Sign this petition' with an optional count-up animation on click. Share bar shows a horizontal row of social icons (email, twitter, facebook, link-copy) each as 36px circular buttons. Trust badges appear as a footer row of small pill badges (e.g. 'Verified Author', 'Fact-checked', '501(c)(3) Sponsor') with trust-icon prefixes. Time-bound petitions show a countdown chip at top-right with days remaining.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-4 _p-6 _bg-surface _rounded-xl _border _w-full _max-w-xl",
+    "slots": {
+      "author-info": "Header row with author avatar (32px), author name, organization, and optional verified check. Small muted metadata.",
+      "petition-title": "Primary heading displaying petition name in large semibold type. 2-3 line clamp.",
+      "description": "Body text paragraph with brief petition summary. 3-line clamp, muted secondary color.",
+      "signature-progress": "Visual progress module combining numeric counter (current + goal) and horizontal progress bar. Numbers count up on increment.",
+      "sign-button": "Primary CTA button spanning full card width. Label 'Sign this petition' with optional disabled state once signed.",
+      "share-bar": "Horizontal row of share action icons (email, twitter, facebook, copy-link). Each is a 36px circular icon button.",
+      "trust-badges": "Footer row of small trust pill badges indicating verification, fact-check status, sponsor credentials.",
+      "countdown-chip": "Optional pill at top-right showing days remaining for time-bound petitions."
+    }
+  },
+  "responsive": {
+    "mobile": "Full-width card with reduced padding. Share bar wraps to 2 rows if needed. Trust badges stack vertically. Featured variant scales title down to 22px.",
+    "tablet": "Standard card width up to container. All elements inline.",
+    "desktop": "Max-width constrained card with full layout and hover interactions on share icons."
+  },
+  "layout_hints": {
+    "petition_priority": "Lead with the cause, then signature momentum, then the action to sign. Trust and sharing cues support that primary conversion path.",
+    "progress_role": "The signature counter and progress bar should feel like social proof attached to the petition, not a generic campaign widget.",
+    "featured_variant": "Featured mode may scale the headline and progress treatment up, but it should still preserve the same sign-and-share hierarchy as the standard card."
+  },
+  "layout_hints": {
+    "petition_priority": "Lead with the cause, then signature momentum, then the action to sign. Trust and sharing cues support that primary conversion path.",
+    "progress_role": "The signature counter and progress bar should feel like social proof attached to the petition, not a generic campaign widget.",
+    "featured_variant": "Featured mode may scale the headline and progress treatment up, but it should still preserve the same sign-and-share hierarchy as the standard card."
+  },
+  "motion": {
+    "micro": {
+      "sign-button-hover": "scale(1.02) + shadow-lift 150ms ease-out",
+      "share-icon-hover": "bg-tint + scale(1.1) 150ms ease-out"
+    },
+    "transitions": {
+      "signature-increment": "number count-up 500ms ease-out + progress-bar fill animation 600ms ease-in-out",
+      "sign-success": "button pulse green + check-icon draw 400ms spring"
+    },
+    "ambient": {
+      "progress-bar-shimmer": "subtle gradient sweep 3s linear infinite when progress > 0 and < 100"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children",
+    "scale-hover"
+  ],
+  "composition": {
+    "PetitionCard": "Card(d-surface, stack) > [AuthorInfo + CountdownChip? + PetitionTitle + Description + SignatureProgress + SignButton + ShareBar + TrustBadge*]",
+    "SignatureProgress": "Module > [CounterText + ProgressBar(animated-fill)]",
+    "ShareBar": "FlexRow > ShareIcon*(d-interactive, circular)",
+    "TrustBadges": "FlexRow(wrap) > TrustBadge*(d-annotation, pill)"
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Petition signature card",
+    "announcements": [
+      "Signature added: {count} of {goal}",
+      "Petition shared via {channel}",
+      "{days} days remaining"
+    ],
+    "keyboard": [
+      "Tab: cycle through interactive elements",
+      "Enter: sign petition or activate focused action",
+      "S: quick-sign from any focused state",
+      "C: copy share link"
+    ]
+  }
+}

package/patterns/pipeline-cards.json

@@ -0,0 +1,99 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "pipeline-cards",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Pipeline Cards",
+  "description": "Grid of numbered step cards showing a sequential process or pipeline. Each card features a colored numbered badge, step name, description, and optional visual content area. Cards rotate through a color palette (coral, amber, cyan, green, yellow, orange, purple) with colored border strokes and matching heading colors. Ideal for process visualization, methodology breakdowns, and feature walkthroughs.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge"
+  ],
+  "contained": false,
+  "default_preset": "outlined",
+  "presets": {
+    "outlined": {
+      "description": "Cards with colored border stroke (3px solid), transparent background, and accent top bar. Each card gets a unique color from a rotating palette. Number badge is a filled circle with the step number in monospace. Step name uses the card's accent color. Description is muted white. Optional visual content area inside the card has a subtle tinted background. On hover, card lifts with translateY(-4px) and gains a colored box-shadow. Last card centers if odd count. 2-column grid layout.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap6 _mw[920px] _mx[auto]",
+        "slots": {
+          "step-number": "Badge circle: _inline-flex _items[center] _justify[center] _w8 _h8 _rounded[50%] _mono _fs[0.8rem] _fw700 _mb3. Background uses the card's accent color, text is dark. Displays the step number (1, 2, 3...).",
+          "step-name": "Step heading with _fs[1.15rem] _fw700 _mb2. Color matches the card's accent color from the rotation palette.",
+          "step-description": "Step body text with _fs[0.85rem] _lh[1.6] _mb4 _fgwhite/75. Brief description of what happens in this step.",
+          "step-visual": "Optional inner content area with _rounded[10px] _p3 and subtle tinted background matching the card's accent color at ~7% opacity. Can contain: chat bubbles, tag lists, code snippets, layer stacks, pattern compositions, mini code blocks, or check results."
+        }
+      }
+    },
+    "filled": {
+      "description": "Cards with vibrant gradient backgrounds instead of border strokes. Each card has a rich gradient (135deg) using the accent color. Text is white or dark depending on the gradient. Number badge has a dark semi-transparent background. Same grid layout and slot structure as outlined.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap6 _mw[920px] _mx[auto]",
+        "slots": {
+          "step-number": "Badge circle with _rounded[50%] _w8 _h8 _bgblack/20 _fgwhite _fw700 _mono _mb3",
+          "step-name": "Step heading with _fs[1.15rem] _fw700 _mb2 _fgwhite",
+          "step-description": "Step body with _fs[0.85rem] _lh[1.6] _mb4 _fgwhite/85",
+          "step-visual": "Optional content area with _rounded[10px] _p3 _bgblack/20"
+        }
+      }
+    },
+    "horizontal": {
+      "description": "Horizontal scrolling row of pipeline cards instead of a grid. Cards are fixed-width and scroll horizontally with snap points. Useful for longer pipelines that would otherwise require too many grid rows. Uses outlined card style with colored borders.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_flex _row _gap6 _overflow[auto] _snap[x_mandatory] _pb4 _px4",
+        "slots": {
+          "step-number": "Badge circle with accent-colored background, monospace number, _rounded[50%] _w8 _h8",
+          "step-name": "Step heading colored to match card accent",
+          "step-description": "Step body text, muted white",
+          "step-visual": "Optional inner content block with tinted background"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _gap6 _mw[920px] _mx[auto]",
+    "slots": {
+      "step-number": "Numbered badge circle with accent color",
+      "step-name": "Step heading with accent color",
+      "step-description": "Step description text",
+      "step-visual": "Optional visual content inside the card"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": []
+  },
+  "visual_brief": "Grid of numbered step cards, each with a colored circular badge showing the step number, a step name heading in the matching accent color, a description paragraph, and an optional visual content area. Cards cycle through a color palette (coral, amber, cyan, green, yellow, orange, purple) with the badge background, heading color, and a left or top border stroke all matching. The outlined preset uses bordered cards with white/transparent backgrounds. The filled preset gives cards a light tinted background of their accent color. The horizontal preset arranges cards in a single scrollable row.",
+  "responsive": {
+    "mobile": "Single-column stack of cards. Numbered badges remain prominent. Visual content areas scale to full width.",
+    "tablet": "Two-column grid. Cards at comfortable reading width.",
+    "desktop": "Three-column grid or horizontal scroll row. Cards show full visual content. Generous inter-card spacing."
+  }
+}

package/patterns/player-form-tracker.json

@@ -0,0 +1,111 @@
+{
+  "id": "player-form-tracker",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Player Form Tracker",
+  "description": "A player performance tracking surface displaying K/D, win rate, average damage, form sparkline, self-reported mental state, and win/loss streaks.",
+  "category": "esports",
+  "tags": [
+    "2026",
+    "esports",
+    "player",
+    "form",
+    "performance",
+    "stats",
+    "health",
+    "tracking"
+  ],
+  "components": [
+    "PlayerCard",
+    "FormSparkline",
+    "StatRow",
+    "MoodIndicator",
+    "StreakBadge",
+    "MetricBar"
+  ],
+  "default_preset": "individual",
+  "presets": {
+    "individual": {
+      "description": "Single-player deep-dive card showing full stat stack, trend sparkline, mood log, and streak indicator for one athlete coaching session",
+      "layout": {
+        "layout": "card-large",
+        "atoms": "_flex _flex-col _gap-4 _w100 _max-w-xl _p-6 _rounded-lg _bg-surface _border"
+      }
+    },
+    "team": {
+      "description": "Five-up roster grid displaying all starting players as smaller linked cards for team-wide form comparison at daily practice stand-ups",
+      "layout": {
+        "layout": "grid-5",
+        "atoms": "_grid _grid-cols-5 _gap-3 _w100 _p-4"
+      }
+    },
+    "comparison": {
+      "description": "Two player cards rendered side by side with aligned stat rows and overlaid sparklines for head-to-head form and matchup evaluation",
+      "layout": {
+        "layout": "grid-2",
+        "atoms": "_grid _grid-cols-2 _gap-6 _w100 _p-4"
+      }
+    }
+  },
+  "visual_brief": "A player card with circular avatar (64px) top-left, player handle in bold sans-serif right of avatar, role badge below name (Duelist, Controller, Sentinel, Initiator, Flex). Prominent form sparkline (48px tall) arcs across the card top area showing last 10 matches performance rating with area fill shaded to trend direction (rising green, declining red). Stat rows below list: K/D ratio, Win Rate %, Avg Damage/Round, Headshot %, each as a row with label left, value right-aligned in monospace, and a small trend arrow (up/down/flat). Metric bars show percentile rank relative to pro league. Mood indicator is a three-dot semaphore (green/yellow/red) labelled 'Feeling: Strong/OK/Rough' based on self-reported check-in. Streak badge pill shows current W/L streak (e.g. 'W4' green or 'L2' red). Team preset renders 5 mini cards horizontally with only avatar, handle, form sparkline, and mood.",
+  "layout_hints": {
+    "container": "d-surface",
+    "note": "Card is clickable (d-interactive) to open full player profile. Stat values in monospace.",
+    "mood_semantics": "Mood is self-reported, not algorithmic. Green=Strong, Yellow=OK, Red=Rough. Never auto-derive from stats."
+  },
+  "default_layout": {
+    "layout": "card-large",
+    "atoms": "_flex _flex-col _gap-4 _w100 _max-w-xl _p-6 _rounded-lg _bg-surface _border",
+    "slots": {
+      "player-card": "Container card holding all player form information with avatar, name, role, and stats.",
+      "form-sparkline": "Horizontal mini-chart showing performance rating trend across last 10 matches with area fill.",
+      "stat-row": "Repeating row with stat label, monospace value, trend arrow, and optional metric bar.",
+      "mood-indicator": "Three-dot semaphore with labeled self-reported mental state.",
+      "streak-badge": "Pill showing current win or loss streak count with semantic color.",
+      "metric-bar": "Thin horizontal bar visualizing percentile rank for a given stat."
+    }
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Player performance form tracker",
+    "announcements": [
+      "Player {handle}: {role}, form {trend}, {streak} streak",
+      "Mood self-reported as {mood}"
+    ],
+    "keyboard": [
+      "Tab: focus player card",
+      "Enter: open full player profile",
+      "M: update mood check-in (when authenticated as player)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Team grid becomes vertical list. Individual card stats stack with metric bars full-width.",
+    "tablet": "Team grid becomes 3+2 split. Comparison preset becomes vertical stack."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "elevation raise + avatar scale(1.05) 150ms ease-out",
+      "sparkline-hover": "data point dots appear 180ms ease"
+    },
+    "transitions": {
+      "mood-update": "indicator dot color crossfade + pulse 400ms ease-in-out",
+      "stat-update": "value counter roll 500ms ease-out"
+    },
+    "ambient": {
+      "hot-streak": "streak badge subtle glow pulse when streak >= 3 wins 2s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "PlayerFormTracker": "Surface(d-surface) > PlayerCard[](d-interactive) > [Header > [PlayerAvatar + [PlayerHandle + RoleBadge]] + FormSparkline + StatRow[] > [StatLabel + StatValue(mono) + TrendArrow + MetricBar] + Footer > [MoodIndicator + StreakBadge]]",
+    "FormSparkline": "Chart(horizontal, area-fill) > [TrendLine + AreaFill(trend-colored) + DataPoints(hover-only)]",
+    "StatRow": "Row > [StatLabel + StatValue(mono) + TrendArrow + MetricBar?]",
+    "MoodIndicator": "Semaphore(3-dot) > [MoodDot + MoodLabel]",
+    "StreakBadge": "Pill(d-annotation, data-streak) > [StreakPrefix + StreakCount]"
+  }
+}

package/patterns/pledge-checkout-panel.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "pledge-checkout-panel",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Pledge Checkout Panel",
+  "description": "Focused campaign checkout or reservation flow for selected reward tier, supporter details, payment/waitlist mode, and confirmation.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "checkout",
+    "pledge",
+    "preorder",
+    "reservation",
+    "conversion"
+  ],
+  "components": [
+    "Form",
+    "Button",
+    "Badge",
+    "Stepper",
+    "Input",
+    "Checkbox"
+  ],
+  "contained": false,
+  "default_preset": "pledge-flow",
+  "presets": {
+    "pledge-flow": {
+      "description": "Three-step pledge checkout with reward review, supporter details, payment or reservation, and confirmation note.",
+      "components": [
+        "Form",
+        "Button",
+        "Badge",
+        "Stepper",
+        "Input",
+        "Checkbox"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap6 _wfull _maxw[64rem] _mx[auto]",
+        "slots": {
+          "checkout-stepper": "Reward, Details, Confirm step indicator.",
+          "selected-reward": "Selected tier summary with price, inventory, and delivery note.",
+          "supporter-form": "Name, email, shipping/beta access fields, consent, and referral code.",
+          "payment-or-reserve": "Payment form, preorder authorization, or waitlist reserve mode.",
+          "order-summary": "Total, estimated delivery/access, guarantees, and campaign caveat.",
+          "confirm-action": "Primary complete pledge/reserve button."
+        }
+      }
+    },
+    "waitlist-reserve": {
+      "description": "Lightweight reservation form for free beta or waitlist campaigns with referral capture.",
+      "components": [
+        "Form",
+        "Button",
+        "Badge",
+        "Input",
+        "Checkbox"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap5 _wfull _maxw[38rem] _mx[auto]",
+        "slots": {
+          "selected-access": "Access tier summary.",
+          "supporter-form": "Name, email, role, referral code, and consent.",
+          "confirm-action": "Reserve spot or join waitlist button."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap6 _wfull _maxw[64rem] _mx[auto]",
+    "slots": {
+      "checkout-stepper": "Checkout progress",
+      "selected-reward": "Selected tier summary",
+      "supporter-form": "Supporter details",
+      "payment-or-reserve": "Payment or reservation mode",
+      "order-summary": "Pledge summary and caveats",
+      "confirm-action": "Complete action"
+    }
+  },
+  "visual_brief": "A focused checkout surface that keeps the retro campaign tone without making forms noisy. Use a single console/manual panel, clear steps, strong form labels, visible trust and fulfillment notes, and one primary completion action. Do not hide campaign caveats or shipping/access notes.",
+  "responsive": {
+    "mobile": "Single-column checkout with sticky bottom primary action only if it does not obscure form fields.",
+    "tablet": "Reward summary above form; order summary below.",
+    "desktop": "Two-column flow with form on the left and sticky order summary console on the right."
+  },
+  "layout_hints": {
+    "trust": "Fulfillment, refund, beta access, and payment timing must be clear before confirmation.",
+    "mode_support": "Support both paid pledge/preorder and free waitlist reservation campaigns.",
+    "form_design": "Inputs should be readable and calm even inside the retro theme."
+  },
+  "motion": {
+    "micro": {
+      "step-change": "stepper advances with short snap transition",
+      "submit": "button press state then loading/progress state"
+    },
+    "transitions": {
+      "validation": "inline field errors appear without moving the whole panel abruptly"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "focus-trap",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "PledgeCheckoutPanel": "CheckoutShell > [Stepper + FormRegion + OrderSummary + ConfirmAction]",
+    "FormRegion": "Form > [SelectedReward + SupporterFields + PaymentOrReserve]",
+    "OrderSummary": "Console > [LineItems + DeliveryNote + TrustCues]"
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Campaign pledge checkout",
+    "keyboard": [
+      "All fields must have visible labels.",
+      "Errors should be announced and linked to fields.",
+      "Stepper navigation must not skip required fields silently."
+    ],
+    "announcements": [
+      "Reward tier selected: {tier}.",
+      "Checkout step {step} of {total}.",
+      "Pledge reserved successfully."
+    ],
+    "focus_management": "On step change, move focus to the new step heading or first invalid field."
+  },
+  "io": {
+    "consumes": [
+      "selected-reward-tier",
+      "supporter-profile",
+      "payment-state"
+    ],
+    "produces": [
+      "campaign-conversion",
+      "supporter-record"
+    ],
+    "actions": [
+      "checkout-next",
+      "checkout-submit",
+      "reservation-submit"
+    ]
+  }
+}

package/patterns/pnl-dashboard.json

@@ -0,0 +1,116 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "pnl-dashboard",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "P&L Dashboard",
+  "description": "Profit & loss analytics dashboard with gross income, expenses, NOI, cash flow, breakdowns by category, property comparison, and projections.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "charts": [
+        "AreaChart",
+        "BarChart",
+        "PieChart"
+      ]
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Select"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full profit-and-loss dashboard with income and expense breakdowns, property comparison, and projections",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Select"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Date range, property filter, export",
+          "summary-cards": "Gross income, expenses, NOI, cash flow",
+          "income-breakdown": "Rental income, other income by category",
+          "expense-breakdown": "Expenses by category",
+          "chart": "Income vs expenses trend",
+          "property-comparison": "P&L by property table",
+          "projections": "Forecasted cash flow"
+        }
+      }
+    },
+    "summary": {
+      "description": "Compact P&L summary for dashboard",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4",
+        "slots": {
+          "metrics": "Key financial metrics"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Title and filters",
+      "summary": "Key metrics",
+      "breakdowns": "Income and expense breakdowns",
+      "comparison": "Property comparison"
+    }
+  },
+  "visual_brief": "Financial dashboard with a header containing title, property/portfolio selector, and date range filter. A summary metrics row shows gross income, total expenses, NOI (net operating income), and cash flow as large value cards with trend indicators. Below, two side-by-side breakdown panels: income categories (rent, fees, other) and expense categories (maintenance, insurance, utilities, management) displayed as horizontal bar charts or itemized lists with amounts. A property comparison table shows these metrics per property. A projections section shows a line chart of projected vs. actual income/expenses.",
+  "responsive": {
+    "mobile": "Summary metrics in a 2x2 grid. Breakdown panels stack vertically. Property comparison becomes a scrollable card list. Projections chart takes full width with simplified labels.",
+    "tablet": "Metrics in a single row. Breakdowns side by side. Comparison table with horizontal scroll.",
+    "desktop": "Full dashboard grid with all sections visible. Charts and tables at comfortable sizes."
+  },
+  "layout_hints": {
+    "financial_story": "The pattern should read from summary health to income/expense explanation to property comparison. Preserve a clear story of profitability rather than a loose collection of finance widgets.",
+    "breakdown_role": "Income and expense panels should feel like explanatory companions to NOI and cash flow, not independent dashboards fighting for attention.",
+    "comparison_discipline": "Property-level comparisons belong after portfolio context is established so users can move from aggregate health into individual asset performance."
+  },
+  "motion": {
+    "micro": "Metric cards and chart controls may respond crisply on hover and focus, with restrained value or chart reveal behavior.",
+    "transitions": "Date-range or filter changes should preserve a sense of continuity in the financial story rather than making values feel unstable."
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount",
+    "real-time-updates",
+    "hover-tooltip"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Profit and loss dashboard",
+    "keyboard": [
+      "Filters, summary cards, breakdown charts, and comparison surfaces should remain keyboard reachable in reading order."
+    ],
+    "announcements": [
+      "Portfolio-level revenue, expenses, NOI, and comparison context should be exposed semantically so the dashboard remains interpretable beyond chart visuals."
+    ]
+  },
+  "composition": {
+    "PnlDashboard": "Container(d-section, flex-col, gap-6) > [Header + SummaryCards + Breakdowns + PropertyComparison + Projections?]",
+    "Header": "Row(d-control) > [Title + PropertyFilter(d-control) + DateRange(d-control) + ExportButton(d-interactive)]",
+    "SummaryCards": "Grid(d-data, responsive: 2/4-col) > MetricCard(d-surface)[]",
+    "Breakdowns": "Row(d-data, 2-col) > [IncomeBreakdown(d-surface) + ExpenseBreakdown(d-surface)]",
+    "PropertyComparison": "Table(d-data) > PropertyRow(d-data-row)[]"
+  }
+}