@decantr/content 3.8.0

package/patterns/chat-thread.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chat-thread",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chat Thread",
+  "description": "Full message thread container with scrollable messages, typing indicator, pagination, and auto-scroll behavior.",
+  "dependencies": {
+    "patterns": {
+      "chat-message": "^1.0.0",
+      "chat-input": "^1.0.0"
+    },
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Avatar",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Standard chat thread with messages and anchored input",
+      "components": [
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _hfull _overflow[hidden]",
+        "slots": {
+          "messages": "Scrollable message list",
+          "typing-indicator": "AI is thinking... indicator",
+          "load-more": "History pagination button",
+          "scroll-to-bottom": "Floating button when scrolled up"
+        }
+      }
+    },
+    "branched": {
+      "description": "Thread with branch indicator for conversation forks",
+      "components": [
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _hfull _overflow[hidden]",
+        "slots": {
+          "branch-indicator": "Visual marker showing conversation branch point",
+          "messages": "Scrollable message list",
+          "typing-indicator": "AI is thinking... indicator"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _hfull _overflow[hidden]",
+    "slots": {
+      "messages": "Scrollable message list with ChatMessage components",
+      "typing-indicator": "AI is thinking... animated indicator",
+      "load-more": "History pagination trigger",
+      "branch-indicator": "Branched conversation marker",
+      "scroll-to-bottom": "Floating FAB when scrolled up"
+    }
+  },
+  "visual_brief": "Vertically scrolling message thread with alternating alignment for user and AI messages. User bubbles align right with accent background; AI responses align left with surface background and wider max-width. A pulsing dot-trio typing indicator appears at the bottom when the AI is generating. A floating scroll-to-bottom FAB fades in when the user scrolls up past a threshold.",
+  "layout_hints": {
+    "scroll_ownership": "The message list is the primary scrollable region and should not fight with outer page wrappers for scroll ownership.",
+    "bubble_measure": "Message bubbles should keep a readable max-width rather than stretching to the container edge, especially for long AI responses.",
+    "typing_state": "Typing indicators and load-more controls should feel like part of the thread rhythm instead of detached widgets."
+  },
+  "responsive": {
+    "mobile": "Messages span full width with minimal horizontal padding (12px). Avatars shrink to 28px or hide entirely. Typing indicator anchors to bottom of viewport. Scroll-to-bottom FAB shifts to bottom-right corner with 16px inset. Load-more button becomes a pull-to-refresh gesture at the top.",
+    "tablet": "Standard layout with comfortable padding. Avatars visible at 36px. Message bubbles max-width at 75% of container. Typing indicator and scroll-to-bottom FAB remain in default positions.",
+    "desktop": "Message bubbles cap at 640px max-width for readability. Full avatars at 40px with timestamp on hover. Branch indicators show as a vertical sidebar gutter. Keyboard shortcuts enabled for navigation between messages."
+  },
+  "motion": {
+    "message-entrance": "New messages slide in from the bottom with a 200ms ease-out and 50ms stagger between sequential messages. AI messages additionally fade from 0 to 1 opacity.",
+    "typing-indicator": "Three dots animate in a 1.2s infinite loop — each dot scales from 0.4 to 1.0 with 150ms offset per dot, creating a wave pulse effect.",
+    "scroll-to-bottom": "FAB fades in (opacity 0 to 1, 150ms) and translates up 8px when scroll position exceeds one viewport height from bottom. Reverse on dismiss.",
+    "auto-scroll": "When a new message arrives and the user is within 100px of the bottom, smooth-scroll to the new message over 300ms ease-in-out."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "real-time-updates",
+    "scroll-reveal",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "log",
+    "aria-label": "Chat conversation",
+    "keyboard": [
+      "Tab moves between message actions and the composer in reading order.",
+      "Keyboard users should be able to reach the scroll-to-bottom control when it appears."
+    ],
+    "announcements": [
+      "New assistant and user messages should be announced appropriately without rereading the entire thread.",
+      "Typing indicator state changes should be announced sparingly."
+    ],
+    "focus_management": "Do not steal focus when new messages arrive. Preserve the reader's current position unless they explicitly choose to jump to the latest message."
+  },
+  "composition": {
+    "ChatThread": "Container(d-surface, flex-col, full-height) > [MessageList + TypingIndicator? + ScrollAnchor]",
+    "MessageList": "List(flex-col, gap-3, scrollable) > Message[]",
+    "TypingIndicator": "Bubble(d-annotation, opacity-70) > PulseDots(3, animated)",
+    "ScrollAnchor": "FAB(d-interactive, floating, show-on-scroll-up)"
+  }
+}

package/patterns/checklist-card.json

@@ -0,0 +1,96 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "checklist-card",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Checklist Card",
+  "description": "Progress-oriented checklist card for onboarding, compliance, and readiness workflows.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "onboarding",
+  "presets": {
+    "onboarding": {
+      "description": "Checklist card with progress bar, prioritized tasks, and one clear next-step action.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _p4",
+        "slots": {
+          "header": "Title, completion summary, and progress indicator",
+          "checklist-item": "Single task row with state, label, and helper text",
+          "footer-action": "Primary next-step action or review button"
+        }
+      }
+    },
+    "compact": {
+      "description": "Shorter checklist summary for dashboard side panels.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p3",
+        "slots": {
+          "header": "Title and compact progress summary",
+          "checklist-item": "Minimal task row"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _p4",
+    "slots": {
+      "header": "Title and progress summary",
+      "checklist-item": "Task row",
+      "footer-action": "Primary action"
+    }
+  },
+  "visual_brief": "Single contained card that makes progress obvious and next steps clear. The tone should feel practical and reassuring, with a visible completion signal, a tidy list of tasks, and a clear sense of what's blocking readiness. This is especially important for compliance and onboarding contexts where the card should reduce cognitive load rather than add to it.",
+  "responsive": {
+    "mobile": "Full-width stacked card. Task rows wrap helper text underneath cleanly and CTA remains easy to reach.",
+    "tablet": "Comfortable card width with visible progress bar and 4-6 checklist items before scrolling becomes necessary.",
+    "desktop": "Contained summary card that can sit above tables or beside operational content without overpowering the page."
+  },
+  "layout_hints": {
+    "progress_priority": "Lead with the progress summary and next blocking item, then the supporting checklist rows.",
+    "task_state": "Each row should make completion state obvious through icon, label, and text, not icon color alone.",
+    "contextual_role": "This pattern is a decision aid. Keep it compact and actionable rather than turning it into a full workflow editor."
+  },
+  "motion": {
+    "micro": "Completed items may fade into a calmer state, and progress bars may animate in gently on load.",
+    "transitions": "Checklist completion should feel affirmative but restrained, especially in enterprise and compliance contexts."
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Checklist progress",
+    "keyboard": [
+      "Tab through checklist actions and any expandable items in top-to-bottom order."
+    ],
+    "announcements": [
+      "Completion state and progress should be announced with task labels so users understand what remains."
+    ]
+  },
+  "composition": {
+    "ChecklistCard": "Card(d-surface, progress) > [Header(progress summary) + ChecklistItem[] + FooterAction?(d-interactive)]",
+    "ChecklistItem": "Row(d-data-row|minimal) > [StateIcon + TaskLabel + HelperText? + Action?]"
+  }
+}

package/patterns/checkout-flow.json

@@ -0,0 +1,148 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "checkout-flow",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Checkout Flow",
+  "description": "Complete purchase/subscribe checkout process with payment form, promo codes, order summary, and success confirmation.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Radio",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Input",
+    "Badge",
+    "Radio",
+    "icon"
+  ],
+  "default_preset": "subscribe",
+  "presets": {
+    "subscribe": {
+      "description": "Recurring tier subscription checkout with plan summary, payment form, and promo code input",
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Radio",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _gc1 _lg:gc2 _gap8 _maxw[960px] _mx[auto]",
+        "slots": {
+          "summary": "Tier/order summary card",
+          "payment-form": "Card/payment method inputs",
+          "promo-code": "Discount code input",
+          "terms": "Terms acceptance checkbox",
+          "submit": "Subscribe/pay button"
+        }
+      }
+    },
+    "purchase": {
+      "description": "One-time product purchase flow with order summary and payment method selection",
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _gc1 _lg:gc2 _gap8 _maxw[960px] _mx[auto]",
+        "slots": {
+          "summary": "Product summary",
+          "payment-form": "Payment inputs",
+          "submit": "Purchase button"
+        }
+      }
+    },
+    "upgrade": {
+      "description": "Tier upgrade flow showing current-vs-new plan comparison with prorated pricing",
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "center",
+        "atoms": "_flex _col _gap6 _maxw[480px] _mx[auto]",
+        "slots": {
+          "comparison": "Current vs new tier",
+          "pricing": "Prorated price",
+          "submit": "Upgrade button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "split",
+    "atoms": "_grid _gc1 _lg:gc2 _gap8",
+    "slots": {
+      "summary": "Order summary",
+      "payment": "Payment form",
+      "submit": "Submit button"
+    }
+  },
+  "io": {
+    "produces": [
+      "checkout-complete",
+      "payment-error"
+    ],
+    "consumes": [
+      "tier-data",
+      "product-data"
+    ]
+  },
+  "visual_brief": "Two-column layout with an order summary card on the right and a payment form on the left. The summary card shows line items with names and prices, a promo code input field, subtotal, tax, and total in bold. The payment form includes radio buttons for payment method (card, PayPal), card number/expiry/CVC inputs with card brand icon detection, billing address fields, and a prominent submit button at the bottom. Subscribe preset adds plan name and billing cycle selector. Upgrade preset shows a comparison of current vs. new plan.",
+  "responsive": {
+    "mobile": "Single column layout — order summary moves above the payment form. Submit button is full-width and sticky at the bottom. Card inputs stack vertically.",
+    "tablet": "Two-column layout maintained. Summary panel is narrower. Payment form takes majority width.",
+    "desktop": "Standard two-column layout with comfortable spacing. Summary card is sticky within its column on scroll."
+  },
+  "layout_hints": {
+    "decision_priority": "Users should understand what they are buying and what they will pay before they commit. Keep the summary and total obvious before the form asks for too much detail.",
+    "form_confidence": "Payment inputs should feel linear and reassuring. Validation, promo codes, and plan comparison belong in clear secondary zones rather than crowding the primary submit path.",
+    "mobile_sequence": "On mobile, keep the order summary, core payment form, and final CTA in one confident top-to-bottom flow rather than scattering confirmation details."
+  },
+  "motion": {
+    "micro": "Payment method selection, promo application, and summary updates may animate subtly to confirm state changes without introducing anxiety.",
+    "transitions": "Step changes or success states should feel reassuring and deliberate, never like the user is being rushed through a purchase."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "keyboard-navigation",
+    "click-select",
+    "focus-trap"
+  ],
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Checkout flow",
+    "keyboard": [
+      "Form controls, payment method selection, promo entry, and the final submit action should follow a predictable top-to-bottom order."
+    ],
+    "announcements": [
+      "Price totals, payment errors, and selected billing method should be exposed semantically so checkout remains trustworthy without visual hierarchy alone."
+    ]
+  },
+  "composition": {
+    "CheckoutFlow": "Grid(d-section, 2-col, responsive: stack) > [PaymentForm + OrderSummary]",
+    "PaymentForm": "Form(d-surface, flex-col) > [MethodSelect > Radio(d-control)[] + CardInputs > [NumberInput + ExpiryInput + CVCInput] + BillingAddress + SubmitButton(d-interactive, variant: primary, full-width)]",
+    "OrderSummary": "Card(d-surface, sticky) > [LineItems > LineItem[] + PromoInput?(d-control) + Subtotal + Tax + Total(heading3, font-bold)]"
+  }
+}

package/patterns/chip-multiselect.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chip-multiselect",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chip Multiselect",
+  "description": "Toggleable multi-select pill input. Used for interest pickers, category selectors, tag filters — anywhere users pick 3-N from a curated set. Differs from tech-pills (read-only display) by being interactive form input. Each chip toggles a selected state with a bounce-scale and check-icon insertion. Validates via min/max counts.",
+  "category": "form",
+  "tags": [
+    "2026",
+    "form",
+    "input",
+    "multiselect",
+    "chips",
+    "tags",
+    "interactive"
+  ],
+  "components": [
+    "ChipGroup",
+    "Chip",
+    "CheckIcon",
+    "HelperText",
+    "ValidationMessage",
+    "CountIndicator"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Wrapping flex grid of toggleable pill chips. Selected chips get coral fill + white text + check icon; unselected use border-only treatment. Optional helper text and inline validation message below.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_flex _flex-wrap _gap-2 _w-full"
+      }
+    },
+    "scrollable-row": {
+      "description": "Single horizontal scrolling row variant for spaces too narrow for wrapping. Chips render in a single row with horizontal overflow scroll. Used inline within filter bars or compact forms.",
+      "layout": {
+        "layout": "flex-row",
+        "atoms": "_flex _flex-row _gap-2 _w-full _overflow-x-auto _pb-2 _scrollbar-thin"
+      }
+    },
+    "grouped": {
+      "description": "Grouped variant where chips are organized under category headings. Each category has its own ChipGroup. Used when interests span distinct domains (e.g., Music vs Sports vs Food).",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-6 _w-full"
+      }
+    }
+  },
+  "visual_brief": "A wrapping flex-grid of pill-shaped chips (border-radius: 9999px, padding: 8px 14px). The container fills its parent's width with 8px gaps both horizontally and vertically. Each Chip in unselected state uses a 1.5px border in the muted border color, transparent fill, and the muted text color (var(--d-text-muted)) for the label — minimal visual weight, clearly tappable. On hover, the border darkens slightly and the chip lifts 1px. On tap, the chip transitions to selected state with a spring animation: the border becomes the primary color (coral), the background fills with the primary color, the text color flips to white, AND a 12px Check icon (Lucide) animates in from the left edge with a slight bounce — opacity 0→1 + translateX -4px→0 over 200ms. The chip itself momentarily scales down to 0.94 then springs back to 1.0 over 280ms cubic-bezier(0.34, 1.56, 0.64, 1) — the satisfying tactile bounce. Selected chips can be tapped again to deselect, reversing the animation. Below the chip group, an optional HelperText (text-xs, muted, font-medium) gives context like 'Pick at least 3 interests' or 'Choose up to 5'. To the right of the helper text (or below it on narrow screens), a CountIndicator shows '{n} of {min}–{max}' in font-medium with the active count in primary color when within range, danger color when below min, and warning color when above max. If validation fails (e.g., user submits with too few selected), a ValidationMessage appears below the helper text in danger color with a subtle slide-down entrance.",
+  "layout_hints": {
+    "container": "flex-wrap horizontal grid",
+    "chip_target": "Each chip min 36px tall × 56px wide for tap targets; padding 8px 14px",
+    "selected_signal": "Three redundant signals: fill, border, AND check icon — important for color-blind accessibility",
+    "validation": "Inline below the chip grid; min/max defined via data attributes (data-min=N, data-max=N)",
+    "scrollbar": "If the container has a max-height that triggers vertical scroll, use overflow-y: auto with scrollbar-thin"
+  },
+  "default_layout": {
+    "layout": "flex-row",
+    "atoms": "_flex _flex-col _gap-3 _w-full",
+    "slots": {
+      "chip-group": "Outer container holding the chip grid + helper + validation. Flex-col, gap 12px. Width fills parent. Carries aria-role='group' and aria-labelledby pointing to the field label (rendered by the parent form).",
+      "chip": "Repeating slot — one per choice. Pill-shaped button (border-radius: 9999px, padding: 8px 14px, font-size: 14px, font-weight: 500). Flex-row, items-center, gap 6px (gap reserved for the check icon). data-selected: 'true' | 'false'. data-disabled: 'true' | 'false'. Cursor: pointer. Min height 36px. Inactive: border 1.5px solid var(--d-border), background transparent, color var(--d-text-muted). Active: applies the swipecircle-chip-selected decorator (or theme equivalent) — border + background var(--d-primary), color white. On press: scale(0.94) for 80ms, spring back to scale(1) over 220ms cubic-bezier(0.34, 1.56, 0.64, 1).",
+      "check-icon": "12px Lucide Check icon, conditionally rendered when data-selected=true. Color white. On chip activation, animates in: opacity 0→1 + translateX(-4px)→0 over 200ms cubic-bezier(0.34, 1.56, 0.64, 1). Sits at the left edge of the chip content, before the label.",
+      "helper-text": "Single-line text below the chip group. font-size 12px, color var(--d-text-muted), font-weight 500. Content: 'Pick at least 3 interests' or 'Choose up to 5 categories' — describes the selection requirement.",
+      "count-indicator": "Inline span next to or below helper text. font-size 12px, font-weight 600. Format: '{count} of {min}–{max}' (e.g., '2 of 3–5'). Color: var(--d-primary) when count is within range, var(--d-danger) when below min, var(--d-warning) when above max.",
+      "validation-message": "Conditionally rendered below helper-text. Visible only when validation fails. font-size 12px, color var(--d-danger), font-weight 500. Animates in via opacity 0→1 + translateY(-4px)→0 over 200ms ease-out. Includes the role='alert' aria attribute for screen readers."
+    }
+  },
+  "accessibility": {
+    "role": "group",
+    "aria-label": "Multi-select chips",
+    "keyboard": [
+      "Tab: focus the chip group, then individual chips",
+      "Arrow Right / Arrow Down: focus next chip",
+      "Arrow Left / Arrow Up: focus previous chip",
+      "Space or Enter: toggle selected state of focused chip",
+      "Home: focus first chip",
+      "End: focus last chip"
+    ],
+    "announcements": [
+      "{chip_label} selected. {count} of {max} interests chosen.",
+      "{chip_label} unselected. {count} of {max} interests chosen.",
+      "Minimum {min} interests required. {needed} more to continue."
+    ],
+    "focus_management": "Each chip is independently tabbable (tabindex=0). The selection state is announced via aria-pressed='true|false' on each chip button. The count indicator uses aria-live='polite' so screen readers announce changes after each toggle."
+  },
+  "responsive": {
+    "mobile": "Wrapping flex-row grid with chips sized to content (gap 8px). On narrow screens, chips wrap naturally to multiple rows. Tap target min 44×44 (achieved via padding).",
+    "tablet": "Same as mobile with slightly more breathing room (gap 10px).",
+    "desktop": "More chips per row visible (gap 12px). Hover states active."
+  },
+  "motion": {
+    "micro": {
+      "chip-press": "scale(0.94) for 80ms then spring back to scale(1) over 220ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "chip-hover": "translateY(-1px) + border darken over 160ms ease-out (inactive only)",
+      "check-icon-in": "opacity 0→1 + translateX(-4px)→0 over 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "check-icon-out": "opacity 1→0 + translateX 0→-4px over 160ms ease-in"
+    },
+    "transitions": {
+      "chip-toggle": "Background and border colors transition together over 200ms ease-out. The check icon's translate creates the satisfying 'snap-in' feel.",
+      "validation-appear": "Validation message slides in from translateY(-4px) opacity 0 to translateY(0) opacity 1 over 200ms ease-out"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "scale-hover",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "ChipMultiselect": "ChipGroup(flex-col, gap-3) > [ChipRow(flex-wrap, gap-2) + HelperRow(flex-row, justify-between)]",
+    "ChipRow": "Div(flex-wrap, gap-2) > Chip*",
+    "Chip": "Button(pill, flex-row, gap-1.5) > [CheckIcon(conditional) + Label]",
+    "HelperRow": "Div(flex-row, items-center, justify-between) > [HelperText + CountIndicator]",
+    "ValidationMessage": "Span(role-alert, danger, text-xs)"
+  }
+}

package/patterns/citation-graph.json

@@ -0,0 +1,118 @@
+{
+  "id": "citation-graph",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Citation Graph",
+  "description": "An interactive network graph visualizing case citation relationships, cross-references, and legal authority chains for research and precedent analysis.",
+  "category": "legal",
+  "tags": [
+    "2026",
+    "legal",
+    "research",
+    "citations",
+    "network",
+    "graph",
+    "precedent"
+  ],
+  "components": [
+    "CitationNode",
+    "CitationEdge",
+    "CaseLabel",
+    "DepthIndicator",
+    "FilterPanel"
+  ],
+  "default_preset": "network",
+  "presets": {
+    "network": {
+      "description": "Force-directed network graph layout with nodes settling organically by citation density and cross-reference clustering patterns",
+      "layout": {
+        "layout": "force-directed",
+        "atoms": "_relative _w100 _h100 _overflow-hidden _bg-canvas"
+      }
+    },
+    "hierarchical": {
+      "description": "Tree-style top-down hierarchical layout with foundational cases at top flowing downward through citing authorities by decision date",
+      "layout": {
+        "layout": "tree-dag",
+        "atoms": "_relative _w100 _h100 _overflow-auto _bg-canvas"
+      }
+    },
+    "timeline": {
+      "description": "Chronological left-to-right layout arranging cases along a time axis with citation arrows arcing forward through decision years",
+      "layout": {
+        "layout": "horizontal-time",
+        "atoms": "_relative _w100 _h100 _overflow-x-auto _bg-canvas"
+      }
+    }
+  },
+  "visual_brief": "A full-bleed dark canvas with circular nodes representing cases. Node size scales logarithmically with citation count (leading cases become large hubs). Node color encodes court level (SCOTUS dark purple, Circuit Courts blue, District Courts teal, State courts amber) or topic area depending on filter. Edges are directed curved arrows: 'cites' edges in muted gray, 'cited-by' in primary blue, 'overruled' in red with dashed stroke, 'distinguished' in orange. Hovering any node expands a tooltip with full case citation (e.g. 'Brown v. Board of Education, 347 U.S. 483 (1954)'), year, jurisdiction, key holding excerpt, and in/out citation counts. Left-side filter panel contains collapsible sections for jurisdiction, date range slider, topic tags, and citation-depth control. A depth indicator pill in the top-right shows current traversal depth (e.g. '3 hops from root case'). Nodes can be dragged to reposition.",
+  "layout_hints": {
+    "container": "d-section",
+    "note": "Full-bleed graph canvas. Node hit targets minimum 24px. Case labels must render textually, not symbolically.",
+    "citation_format": "Always use Bluebook citation format for case labels. Court and year required.",
+    "edge_semantics": "Edge style MUST encode relationship type (cites/overruled/distinguished). Do not collapse to single style."
+  },
+  "default_layout": {
+    "layout": "force-directed",
+    "atoms": "_relative _w100 _h100 _overflow-hidden _bg-canvas",
+    "slots": {
+      "graph-canvas": "Zoomable, pannable SVG or WebGL canvas hosting the network. Runs force simulation or static layout depending on preset.",
+      "citation-node": "Repeating circular node positioned by simulation. Sized by citation count, colored by court or topic.",
+      "citation-edge": "Directed curved arrow connecting two nodes. Style (color, dash, width) encodes citation relationship type.",
+      "case-label": "Text label attached to each node showing short case name. Expands to full citation on hover.",
+      "depth-indicator": "Pill badge in top-right showing current traversal depth from the root focus case.",
+      "filter-panel": "Left-docked sidebar with jurisdiction, date, topic, and depth filters. Collapsible sections."
+    }
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Legal case citation network graph",
+    "announcements": [
+      "Case {citation} has {inCount} inbound and {outCount} outbound citations",
+      "Filter {name} set to {value}",
+      "Traversal depth changed to {depth}"
+    ],
+    "keyboard": [
+      "Tab: cycle through citation nodes",
+      "Enter: focus node and show full detail",
+      "Arrow keys: pan canvas",
+      "+/-: zoom in/out",
+      "F: open filter panel",
+      "Escape: clear selection"
+    ]
+  },
+  "responsive": {
+    "mobile": "Graph remains interactive but filter panel becomes a bottom sheet. Node labels hidden by default, shown on tap.",
+    "tablet": "Filter panel collapses to icon bar. Graph canvas expanded."
+  },
+  "motion": {
+    "micro": {
+      "node-hover": "scale(1.15) + highlight-ring 180ms ease-out",
+      "edge-hover": "stroke-width +1.5px + opacity-boost 150ms"
+    },
+    "transitions": {
+      "filter-apply": "nodes fade to 0.2 then back 400ms ease-in-out",
+      "layout-reflow": "position lerp 800ms spring",
+      "preset-switch": "layout morph 600ms ease"
+    },
+    "ambient": {
+      "active-path": "dash-offset drift 3s linear infinite on focused-path edges"
+    }
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "CitationGraph": "Section(d-section, full-bleed) > [FilterPanel(left) + GraphCanvas > [CitationNode[](d-interactive) + CitationEdge[]] + DepthIndicator(top-right) + Legend]",
+    "GraphCanvas": "Viewport(zoomable, pannable) > [EdgeLayer + NodeLayer + LabelLayer]",
+    "CitationNode": "Circle(sized, court-colored) > [CaseLabel + HoverTooltip > FullCitation]",
+    "CitationEdge": "Path(arrow, styled-by-relation) > RelationBadge?",
+    "FilterPanel": "Panel(d-surface) > [JurisdictionFilter + DateRangeFilter + TopicFilter + DepthSlider]"
+  }
+}