@decantr/content 3.8.0

package/patterns/trade-modal.json

@@ -0,0 +1,132 @@
+{
+  "id": "trade-modal",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Trade Modal",
+  "description": "A trade execution modal for buying or selling securities with order-type selection, quantity/price inputs, live market info, estimated total calculation, fee breakdown, and order-preview confirmation before execution.",
+  "category": "finance",
+  "tags": [
+    "2026",
+    "finance",
+    "trading",
+    "modal",
+    "order-entry",
+    "execution",
+    "buy",
+    "sell"
+  ],
+  "components": [
+    "OrderTypeTab",
+    "QuantityInput",
+    "PriceInput",
+    "EstimatedTotal",
+    "ConfirmButton",
+    "MarketInfo",
+    "DirectionToggle",
+    "FeeBreakdown",
+    "OrderPreview"
+  ],
+  "default_preset": "buy",
+  "presets": {
+    "buy": {
+      "description": "Green-accented buy-side trade modal for market, limit, or stop purchases. Direction toggle locked to Buy. Confirm button uses success color scheme to reinforce purchase intent and prevent direction errors.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p5 _max-w-480"
+      }
+    },
+    "sell": {
+      "description": "Red-accented sell-side trade modal mirroring the buy preset with direction locked to Sell. Confirm button uses destructive color. Surfaces position-held indicator to ensure voluntary sale does not exceed current holdings.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p5 _max-w-480"
+      }
+    },
+    "limit": {
+      "description": "Order-type expanded preset showing both quantity and limit-price inputs side-by-side. Calculates estimated total live as price changes. Used when user wants explicit price control rather than market execution.",
+      "layout": {
+        "layout": "form",
+        "atoms": "_w100 _grid _gap4 _p5 _max-w-480"
+      }
+    }
+  },
+  "visual_brief": "A focused modal dialog rendered as a d-surface card floating centered over a backdrop-blur overlay, max-width 480px. Top of modal displays the security symbol in text-2xl bold mono-data ('AAPL') with company name in text-sm muted beneath, and a close X icon button in the top-right corner. A DirectionToggle appears as a two-segment pill (Buy/Sell) with the active side filled in accent color (success green for buy, destructive red for sell) and the inactive side ghosted. Below, OrderTypeTabs render as a three-segment underline-style tabstrip (Market / Limit / Stop) with the active tab showing a primary-colored underline and semibold label. The form body shows a QuantityInput with plus/minus steppers flanking a mono-data numeric input showing share count, labeled 'Quantity' above. When limit or stop is active, a PriceInput appears labeled 'Limit Price' or 'Stop Price' with a currency-symbol prefix and mono-data numeric field. MarketInfo sits as an inline callout row displaying 'Last: $178.42 | Bid: $178.40 | Ask: $178.44 | 24h: +1.23%' in compact d-annotation mono-data. The EstimatedTotal calculates live as 'Est. Total: $17,842.00' in text-lg semibold mono-data. A FeeBreakdown expands below as a small itemized list: 'Commission: $0.00, Exchange fee: $0.03, Total fees: $0.03'. An OrderPreview sub-card (secondary surface, subtle border) previews the complete order in human language: 'Buy 100 shares of AAPL at market, estimated $17,842.00'. Finally, a ConfirmButton spans the full width in the direction-appropriate color (success green for buy, destructive red for sell) with text like 'Place Buy Order' or 'Place Sell Order'. Button press opens a secondary confirmation dialog requiring a second explicit click. Validation warnings appear inline (insufficient balance, exceeds position) in amber or red annotation chips above the confirm button.",
+  "layout_hints": {
+    "container": "d-surface modal, centered, max-w-480, backdrop-blur",
+    "note": "Trade execution is irrevocable financial action. Two-step confirmation required. Color-code aggressively to prevent buy/sell direction errors. Always show estimated total and fees before confirm.",
+    "direction_colors": "Buy=success/emerald, Sell=destructive/red. These colors MUST be consistent across DirectionToggle, ConfirmButton, and EstimatedTotal emphasis. Color-code text and borders, not just fills.",
+    "market_info": "MarketInfo uses d-annotation with live-updating bid/ask/last. Refresh indicator (pulsing dot) shows data freshness. Stale data >5s triggers amber warning.",
+    "order_preview": "OrderPreview is a human-language restatement of the order parameters. Critical for preventing fat-finger errors. Must update live as inputs change.",
+    "fee_transparency": "FeeBreakdown MUST itemize every fee (commission, exchange, SEC, regulatory). Total fees visible before confirm. Never hide fees in footnotes."
+  },
+  "default_layout": {
+    "layout": "form",
+    "atoms": "_w100 _grid _gap4 _p5 _max-w-480",
+    "slots": {
+      "header": "Top section showing security symbol (mono-data text-2xl bold), company name (text-sm muted), and a close icon-button in the top-right corner. Optionally includes a position-held indicator showing current shares owned.",
+      "direction-toggle": "Two-segment pill toggle for Buy/Sell direction. Active side filled with direction-color (success for buy, destructive for sell). Determines color scheme of entire modal including ConfirmButton.",
+      "order-type-tabs": "Three-segment tabstrip (Market / Limit / Stop) with underline indicator on active tab. Tab selection shows/hides PriceInput and changes execution semantics.",
+      "quantity-input": "Numeric input with plus/minus steppers for share-count entry. Uses mono-data tabular-nums. Label above reads 'Quantity'. Validates against available balance (buy) or current position (sell).",
+      "price-input": "Conditional input (shown for Limit and Stop order types) with currency-symbol prefix and mono-data numeric field. Label above reads 'Limit Price' or 'Stop Price' based on active tab.",
+      "market-info": "Inline callout row displaying live market data: Last, Bid, Ask, and 24h change. Uses mono-data compact text. Pulsing indicator shows refresh freshness.",
+      "estimated-total": "Large-text calculated total (quantity × price) with fee-inclusive and fee-exclusive variants. Updates live as inputs change.",
+      "fee-breakdown": "Itemized fee list (commission, exchange, regulatory) in small d-annotation text. Expandable if fees are complex. Total fees always visible.",
+      "order-preview": "Secondary sub-card showing human-language restatement of the complete order. Updates live. Critical readback to prevent fat-finger errors.",
+      "confirm-button": "Full-width primary button in direction-appropriate color. Opens secondary confirmation dialog on first click. Only executes order after second explicit confirmation.",
+      "validation-warnings": "Inline chips above confirm button showing validation errors (insufficient balance, exceeds position, market closed). Color-coded amber (warning) or red (blocking)."
+    }
+  },
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Trade execution modal",
+    "announcements": [
+      "Order type changed to {type}",
+      "Estimated total: {total} including {fees} in fees",
+      "Warning: {message}",
+      "Order submitted — {direction} {quantity} shares of {symbol}"
+    ],
+    "keyboard": [
+      "Tab: cycle through order-type tabs and inputs",
+      "Arrow Up/Down: adjust quantity stepper",
+      "Enter: advance to confirmation dialog from ConfirmButton",
+      "Escape: close modal without executing order",
+      "B/S: toggle Buy/Sell direction"
+    ]
+  },
+  "responsive": {
+    "mobile": "Modal expands to full-screen sheet rising from bottom with rounded top corners. DirectionToggle and OrderTypeTabs remain at top. Inputs stack vertically with full-width. ConfirmButton sticky at bottom of sheet.",
+    "tablet": "Standard centered modal at max-w-480px. Minor padding adjustments."
+  },
+  "motion": {
+    "micro": {
+      "stepper-click": "button scale 1.0 to 0.95 to 1.0 80ms ease-out",
+      "tab-switch": "underline slide to active tab 200ms ease-out",
+      "direction-toggle": "pill-fill cross-fade 150ms ease-in-out"
+    },
+    "transitions": {
+      "modal-open": "scale 0.96 to 1.0 + fade 200ms spring",
+      "modal-close": "scale 1.0 to 0.96 + fade 150ms ease-in",
+      "preview-update": "OrderPreview text cross-fade 150ms ease-out on input change"
+    },
+    "ambient": {
+      "market-data-pulse": "MarketInfo freshness dot opacity 0.4 to 1.0 to 0.4 1s ease-in-out infinite",
+      "stale-data-warning": "MarketInfo border flash amber when data >5s stale"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "focus-trap",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "TradeModal": "Modal(d-surface, backdrop-blur, max-w-480) > [Header + DirectionToggle + OrderTypeTab[] + QuantityInput + PriceInput? + MarketInfo + EstimatedTotal + FeeBreakdown + OrderPreview + ValidationWarnings? + ConfirmButton]",
+    "DirectionToggle": "Toggle(d-control, data-direction) > [BuySegment + SellSegment]",
+    "OrderTypeTab": "Tab(d-control, data-order-type, data-active?) > [TabLabel + ActiveUnderline?]",
+    "QuantityInput": "Input(d-control, data-numeric) > [DecrementStepper + NumericField + IncrementStepper]",
+    "PriceInput": "Input(d-control, data-currency) > [CurrencySymbol + NumericField]",
+    "MarketInfo": "Row(d-annotation) > [LastPrice + BidAsk + ChangePercent + FreshnessDot]",
+    "EstimatedTotal": "Callout(d-annotation, data-total) > [TotalLabel + TotalValue]",
+    "ConfirmButton": "Button(d-control, data-direction-color, full-width) > [ButtonLabel]"
+  }
+}

package/patterns/transcript-stream.json

@@ -0,0 +1,125 @@
+{
+  "id": "transcript-stream",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Transcript Stream",
+  "description": "Real-time speech-to-text transcription display with speaker attribution, timestamps, confidence indicators, and multiple layout modes including continuous scroll, segmented blocks, and subtitle overlay.",
+  "category": "voice",
+  "tags": [
+    "2027",
+    "frontier",
+    "voice",
+    "transcription",
+    "speech-to-text",
+    "real-time",
+    "streaming",
+    "accessibility"
+  ],
+  "components": [
+    "TranscriptContainer",
+    "TranscriptSegment",
+    "SpeakerLabel",
+    "TimestampBadge",
+    "ConfidenceIndicator",
+    "LiveCursor"
+  ],
+  "default_preset": "stream",
+  "presets": {
+    "stream": {
+      "description": "Continuous vertical scroll of transcription text — words appear one by one as recognized, auto-scrolling to keep latest text visible at the bottom",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-3 _overflow-y-auto _scroll-smooth _p-4"
+      }
+    },
+    "segmented": {
+      "description": "Timestamped blocks grouped by speaker turns — each block is a discrete card with speaker label, timestamp range, and full utterance text for easy scanning",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-4 _overflow-y-auto _scroll-smooth _p-4"
+      }
+    },
+    "subtitle": {
+      "description": "Bottom-centered overlay with translucent dark background — max 2 lines of text, centered alignment, auto-fades old text as new speech arrives, optimized for video/media overlays",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_fixed _bottom-0 _left-0 _right-0 _flex _justify-center _p-4 _pointer-events-none"
+      }
+    }
+  },
+  "visual_brief": "A vertically scrolling transcript where text appears word-by-word in real time as speech is transcribed. In stream mode: the container is a full-height scrollable area with a subtle left border accent. Each segment occupies a row — on the left side, a colored dot (10px circle, unique color per speaker derived from a hash of the speaker name) followed by the speaker's name in text-xs font-medium. The transcribed text flows inline to the right of the speaker label, with words appearing one at a time with a very brief fade-in (opacity 0→1 over 100ms). On the far right, a muted timestamp (text-xs, text-muted, tabular-nums) shows HH:MM:SS. The LiveCursor is a 2px-wide vertical bar in accent color, positioned immediately after the last transcribed word, blinking with a 1s opacity animation (1→0→1). Low-confidence words (below 0.7 threshold) render with a dotted underline (text-decoration: underline dotted var(--d-warning)) and slightly reduced opacity (0.7). Hovering a low-confidence word shows a tooltip with the confidence score and alternative hypotheses. The container auto-scrolls to the bottom on each new word, but pauses auto-scroll if the user manually scrolls up (with a 'Jump to latest' pill button appearing at the bottom). In segmented mode: each speaker turn is a distinct card (d-surface, rounded-lg, p-3). The card header shows the speaker dot + name on the left and a timestamp range ('2:04 – 2:18') on the right. The card body contains the full utterance text in text-sm. Cards stack vertically with gap-4. In subtitle mode: text renders in a centered box (max-width 80%, bg-black/75%, backdrop-blur-sm, rounded-lg, px-4 py-2). Text is white, text-base, font-medium, text-center. Maximum 2 lines — older text fades out as new text pushes in. No speaker labels; no timestamps. The container is positioned fixed at the bottom of the viewport.",
+  "layout_hints": {
+    "container": "block, full-height recommended for stream/segmented; fixed overlay for subtitle",
+    "note": "For stream and segmented modes, the container should fill available height to enable scrolling. For subtitle mode, use position:fixed or position:absolute relative to a media player container.",
+    "auto_scroll": "Implement scroll-anchoring: auto-scroll to bottom on new content, but disengage when user scrolls up. Show a 'Jump to latest' button (small pill, bottom-center of container) when disengaged.",
+    "speaker_colors": "Generate deterministic colors per speaker by hashing the speaker ID through a palette of 8 distinct hues. Ensure sufficient contrast against background.",
+    "performance": "For long transcripts (>1000 segments), implement virtualized scrolling to maintain performance. Only render segments within the visible viewport plus a 200px buffer."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-3 _overflow-y-auto _scroll-smooth _p-4 _h-full",
+    "slots": {
+      "transcript-container": "The outer scrollable container holding all transcript segments. Uses overflow-y: auto with scroll-behavior: smooth. Has a subtle left border (3px solid var(--d-accent) at 20% opacity) to visually anchor the timeline. The container listens for scroll events to detect user-initiated scrolling vs programmatic auto-scroll. When the user scrolls more than 100px above the bottom, auto-scroll disengages and a floating 'Jump to latest' pill appears (position: sticky, bottom: 8px, center-aligned, bg-accent, text-accent-foreground, rounded-full, px-3 py-1, text-xs, shadow-md, cursor-pointer). Clicking the pill scrolls to bottom and re-engages auto-scroll.",
+      "transcript-segment": "Repeating slot — one per speaker utterance or continuous speech block. In stream mode: a horizontal flex row (items-start, gap-2). Left column (flex-shrink-0, w-28): SpeakerLabel. Center column (flex-1, min-w-0): the transcribed text, rendered as inline spans — each word is its own span element to enable per-word fade-in animation and per-word confidence styling. Right column (flex-shrink-0, w-16, text-right): TimestampBadge. The segment has a subtle bottom border (1px solid var(--d-border) at 30% opacity) separating it from the next segment. Padding: py-2. In segmented mode: each segment is wrapped in a d-surface card (rounded-lg, p-3, shadow-sm). The header row contains SpeakerLabel (left) and TimestampBadge showing range (right). The body row below contains the full utterance text in text-sm with normal line-height.",
+      "speaker-label": "A horizontal flex element (items-center, gap-1.5) showing a colored dot (10px circle, border-radius-full, flex-shrink-0) and the speaker's name (text-xs, font-medium, truncate, max-w-24). The dot color is deterministic per speaker, derived from hashing the speaker identifier through a curated palette of 8 high-contrast colors. When a speaker is currently speaking, the dot has a pulse animation (scale 1→1.2→1, 1.5s, infinite). The name truncates with ellipsis if longer than the allotted width.",
+      "timestamp-badge": "A small inline badge displaying the segment's timestamp in HH:MM:SS or M:SS format. Uses text-xs, font-mono, tabular-nums, text-muted styling. In segmented mode, shows a range ('2:04 – 2:18'). In stream mode, shows the start time of the segment. In subtitle mode, timestamps are hidden entirely. The badge is flex-shrink-0 to prevent wrapping.",
+      "confidence-indicator": "Applied per-word as a conditional styling modifier rather than a separate visual element. Words with confidence score below 0.7 receive: opacity 0.7, text-decoration underline dotted with var(--d-warning) color, cursor help. On hover, a small tooltip (d-annotation, positioned above the word) shows 'Confidence: 62%' and up to 3 alternative transcriptions ('Did you mean: alternative1, alternative2?'). Words above 0.7 confidence have no special styling.",
+      "live-cursor": "A blinking vertical bar (2px wide, 1em tall) in var(--d-accent) color, positioned inline immediately after the last transcribed word. Blinks with a CSS animation: opacity 1→0→1 over 1s, steps(2) timing for a classic cursor blink. When speech pauses for more than 2 seconds, the cursor fades out (opacity→0 over 500ms). When speech resumes, it fades back in. In subtitle mode, the cursor is hidden — replaced by a subtle ellipsis animation ('...') appended to the last word during active speech."
+    }
+  },
+  "accessibility": {
+    "role": "log",
+    "aria-label": "Live transcription",
+    "aria-live": "polite",
+    "announcements": [
+      "New speaker: {speaker_name}",
+      "{speaker_name} said: {text}",
+      "Transcription paused",
+      "Transcription resumed",
+      "Low confidence word detected: {word}"
+    ],
+    "keyboard": [
+      "Tab: move between segments",
+      "Arrow Up/Down: scroll through transcript",
+      "Home: jump to beginning of transcript",
+      "End: jump to latest transcript (re-engage auto-scroll)",
+      "Enter: expand segment to show confidence details",
+      "Escape: close confidence tooltip"
+    ]
+  },
+  "responsive": {
+    "mobile": "Speaker labels collapse to dot-only (name hidden) to save horizontal space. Timestamps hidden in stream mode — available on tap. Subtitle mode uses max-width: 95% and text-sm. Segments use full-width layout. Touch: tap a segment to reveal timestamp and confidence info.",
+    "tablet": "Full speaker labels shown. Segmented mode cards have comfortable padding. Subtitle mode at max-width: 70%. Timestamp always visible."
+  },
+  "motion": {
+    "micro": {
+      "word-appear": "opacity 0→1 over 100ms ease-out, per word as it is transcribed",
+      "confidence-hover": "tooltip fade-in 150ms ease-out on hover"
+    },
+    "transitions": {
+      "segment-enter": "translateY(8px) + opacity 0 → translateY(0) + opacity 1 over 200ms ease-out",
+      "auto-scroll-pill": "translateY(20px) + opacity 0 → translateY(0) + opacity 1 over 200ms ease-out",
+      "preset-switch": "crossfade 300ms ease-in-out"
+    },
+    "ambient": {
+      "live-cursor-blink": "opacity steps(2) 1s infinite",
+      "speaker-dot-pulse": "scale(1→1.2→1) 1.5s ease-in-out infinite when speaker is active",
+      "subtitle-text-cycle": "old line slides up + fades out, new line slides up from below, 250ms ease-out"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "real-time-updates",
+    "scroll-reveal"
+  ],
+  "composition": {
+    "TranscriptStream": "Section(d-section, flex-col, overflow-y-auto, scroll-smooth) > TranscriptSegment*(d-surface?) > [...content] + LiveCursor",
+    "TranscriptSegment": "Row(flex, items-start, gap-2) > [SpeakerLabel + TranscriptText(inline spans) + TimestampBadge + ConfidenceIndicator?]",
+    "SpeakerLabel": "Flex(items-center, gap-1.5) > [Dot(10px, bg-speaker-color, pulse?) + Name(text-xs, font-medium, truncate)]",
+    "TimestampBadge": "Span(text-xs, font-mono, tabular-nums, text-muted) > TimeString",
+    "ConfidenceIndicator": "Tooltip(d-annotation, on-hover) > [Score + Alternatives?]",
+    "LiveCursor": "Span(inline, 2px-wide, 1em-tall, bg-accent, blink-animation)"
+  }
+}

package/patterns/tree-view.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "tree-view",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Tree View",
+  "description": "File/data tree with ASCII connectors for hierarchical navigation.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Expandable tree with ASCII connectors",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen _overflow[auto]",
+        "slots": {
+          "root": "Tree root node",
+          "nodes": "Child tree nodes"
+        }
+      }
+    },
+    "flat": {
+      "description": "Indented list without connectors",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "items": "Indented list items"
+        }
+      }
+    },
+    "checkbox": {
+      "description": "Tree with selection checkboxes",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "nodes": "Tree nodes with checkboxes"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _mono _fggreen",
+    "slots": {
+      "root": "Tree root",
+      "nodes": "Tree nodes"
+    }
+  },
+  "features": [
+    "expand-collapse",
+    "multi-select",
+    "drag-drop",
+    "context-menu",
+    "search-filter",
+    "keyboard-navigation"
+  ],
+  "keyboard_shortcuts": {
+    "ArrowUp": "Previous node",
+    "ArrowDown": "Next node",
+    "ArrowLeft": "Collapse or go to parent",
+    "ArrowRight": "Expand or go to first child",
+    "Enter": "Select node",
+    "Space": "Toggle checkbox"
+  },
+  "ascii_connectors": {
+    "branch": "├── ",
+    "last": "└── ",
+    "vertical": "│   ",
+    "empty": "    "
+  },
+  "visual_brief": "Hierarchical tree rendered with ASCII connector characters (├── for branches, └── for last items, │ for vertical lines) in monospace font. Each node shows a folder or file icon (or expand/collapse toggle for branches), the item name, and optional metadata. Indentation increases per depth level with connector lines drawn vertically. The flat preset removes ASCII connectors and uses simple indentation. The checkbox preset adds a checkbox before each node for selection. Nodes are clickable to expand/collapse or to select. The currently selected node has a highlighted background.",
+  "responsive": {
+    "mobile": "Tree takes full width. Touch targets enlarged. Deep nesting truncates with horizontal scroll. Checkbox preset uses larger checkboxes.",
+    "tablet": "Standard tree layout. Comfortable node spacing for touch.",
+    "desktop": "Full tree with all connectors rendered crisply. Keyboard navigation (arrow keys). Comfortable indentation."
+  },
+  "layout_hints": {
+    "hierarchy_priority": "Depth and parent-child relationships should remain obvious before metadata or action affordances. The structure is the primary content.",
+    "selection_clarity": "Expanded, collapsed, and selected states should stay visually distinct so users always know where they are in the tree.",
+    "dense_nesting": "When depth gets large, prefer scroll or truncation strategies that preserve hierarchy over squeezing every node into a flattened list."
+  },
+  "motion": {
+    "micro": "Expand/collapse indicators and selected nodes may sharpen or brighten subtly to confirm navigation state.",
+    "transitions": "Opening branches should feel quick and structural, preserving the user's sense of place within the hierarchy."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "tree",
+    "aria-label": "Tree view",
+    "keyboard": [
+      "Arrow-key navigation, expansion, selection, and checkbox toggling should remain consistent with standard tree interaction patterns."
+    ],
+    "announcements": [
+      "Node name, depth, expanded state, and selection state should be exposed semantically so the tree remains understandable without ASCII connectors alone."
+    ]
+  }
+}

package/patterns/unit-detail.json

@@ -0,0 +1,100 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "unit-detail",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Unit Detail",
+  "description": "Single unit details including specs, current tenant, lease info, rent history, maintenance, and documents.",
+  "dependencies": {
+    "patterns": {
+      "tenant-card": "^1.0.0",
+      "payment-history": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Tabs"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge",
+    "Tabs"
+  ],
+  "default_preset": "view",
+  "presets": {
+    "view": {
+      "description": "Full unit detail view with specs, current tenant info, and tabbed rent and maintenance history",
+      "components": [
+        "Button",
+        "icon",
+        "Badge",
+        "Tabs"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Unit number, property name, status badge, edit",
+          "specs": "Beds, baths, sqft, floor, amenities",
+          "tenant": "Current tenant info (embedded tenant-card)",
+          "lease": "Current lease summary",
+          "tabs": "Rent history, maintenance, documents tabs",
+          "rent-history": "Payment history for this unit",
+          "maintenance": "Maintenance history",
+          "documents": "Unit-specific documents"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Unit header",
+      "specs": "Unit specifications",
+      "tenant": "Tenant information",
+      "tabs": "History tabs"
+    }
+  },
+  "visual_brief": "Detail view for a single rental unit. Header shows unit number/name, status badge (occupied, vacant, maintenance), and action buttons. A specs section displays key-value pairs: bedroom count, bathroom count, square footage, floor, rent amount. A tenant information card shows the current tenant (avatar, name, contact, lease dates) or 'Vacant' with a list-unit button. Tabbed content below shows: Rent History (payment records), Maintenance (ticket list), and Documents (lease, inspection reports). The view preset is the only preset, displaying all information.",
+  "responsive": {
+    "mobile": "Single-column stacked layout. Specs in a 2-column key-value grid. Tenant card full-width. Tabs become a dropdown or accordion.",
+    "tablet": "Standard layout. Specs and tenant info side by side. Tabs in a row.",
+    "desktop": "Full layout with specs, tenant card, and tabs all comfortably displayed."
+  },
+  "layout_hints": {
+    "header_priority": "Lead with unit identity, occupancy state, and the most important operational actions. The user should understand whether the unit is occupied and healthy before reading deep history.",
+    "tab_discipline": "Rent history, maintenance, and documents are secondary exploration surfaces. Keep the active tab state strong and the shared unit context stable above them.",
+    "vacancy_translation": "When a unit is vacant, preserve the same structural rhythm as occupied states while swapping tenant context for a clear vacancy action path."
+  },
+  "motion": {
+    "micro": "Header actions and tab states may sharpen slightly on hover and focus. Vacancy or maintenance status indicators may draw gentle emphasis when needed.",
+    "transitions": "Switching between tabs should preserve the sense of remaining on the same unit, not feeling like a full page jump."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Unit detail",
+    "keyboard": [
+      "Header actions should precede tab controls, and tab panels should follow a predictable reading order."
+    ],
+    "announcements": [
+      "Unit identity, status, tenant context, and active tab should be communicated semantically so the page remains understandable without relying on visual arrangement alone."
+    ]
+  },
+  "composition": {
+    "UnitDetail": "Container(d-section, flex-col, gap-6) > [Header + Specs + CurrentTenant? + TabContent]",
+    "Header": "Row(d-surface, space-between) > [UnitNumber(heading2) + StatusBadge(d-annotation) + ActionButtons(d-interactive)]",
+    "Specs": "Grid(d-data, key-value) > [Bedrooms + Bathrooms + SqFt(mono-data) + FloorPlan?]",
+    "TabContent": "Tabs(d-control) > [LeaseTab + PaymentTab + MaintenanceTab + DocumentsTab]"
+  }
+}

package/patterns/unit-list.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "unit-list",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Unit List",
+  "description": "Units within a property displayed as cards or table. Shows unit number, specs, tenant, rent, and status.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Responsive card grid of units showing unit number, specs, tenant, rent, and occupancy status",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title, add unit button",
+          "summary": "Total units, occupied, vacant, revenue",
+          "filters": "Status filter",
+          "items": "Unit cards"
+        }
+      }
+    },
+    "table": {
+      "description": "Sortable data table view of units with columns for number, specs, tenant, rent, and status",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "header": "Title and controls",
+          "table": "Units table"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "header": "Title and add button",
+      "summary": "Unit counts",
+      "items": "Unit cards or rows"
+    }
+  },
+  "visual_brief": "List of units within a property. Header shows 'Units' title with a unit count and an 'Add Unit' button. A summary bar shows counts by status (occupied, vacant, maintenance). The grid preset displays units as bordered cards, each showing unit number, bedroom/bathroom count, square footage, current tenant name (or 'Vacant' in muted text), rent amount, and a status badge. The table preset renders as a data table with those same fields as columns. Cards and rows are clickable to navigate to unit detail.",
+  "responsive": {
+    "mobile": "Single-column card stack. Summary bar shows counts compactly. Add Unit button is a FAB or in the header.",
+    "tablet": "Two-column card grid or table with horizontal scroll.",
+    "desktop": "Three-column card grid or full-width table with all columns visible."
+  },
+  "layout_hints": {
+    "inventory_priority": "The user should be able to scan occupancy, rent, and tenant state for each unit quickly. Unit identity and status come first; detailed specs support that read.",
+    "grid_vs_table": "Card and table variants should preserve the same core fields so switching views does not change the mental model of the unit inventory.",
+    "summary_rhythm": "Keep the summary counts closely tied to the unit collection, not floating as a separate analytics block."
+  },
+  "motion": {
+    "micro": "Clickable cards or rows may lift or sharpen slightly on hover. Status badges may brighten subtly when filtered or selected.",
+    "transitions": "View or filter changes should maintain orientation within the unit list so users do not lose track of current inventory context."
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Unit list",
+    "keyboard": [
+      "Header actions, summary controls, and unit items should follow a straightforward reading order."
+    ],
+    "announcements": [
+      "Unit number, occupancy state, tenant context, and rent should be exposed semantically so the inventory remains understandable in both card and table modes."
+    ]
+  },
+  "composition": {
+    "UnitList": "Grid(d-section, responsive: 1/2/3-col) > UnitCard[]",
+    "UnitCard": "Card(d-surface, hoverable) > [UnitNumber(heading4) + SpecsRow > [Beds + Baths + SqFt(mono-data)] + TenantName?(font-medium) + Rent(mono-data) + StatusBadge(d-annotation, color: occupancy)]"
+  }
+}