@decantr/content 3.8.0

package/patterns/reputation-badge.json

@@ -0,0 +1,111 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "reputation-badge",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Reputation Badge",
+  "description": "User reputation score display with numeric score, trust level indicator, and progress toward next trust threshold. Used in dashboards, content cards, and moderation views.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "contained": true,
+  "components": [
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Inline reputation display with score number and trust level icon. Color-coded by trust threshold.",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _aic _gap2",
+        "slots": {
+          "icon": "Trust level icon: shield for trusted, star for rising, circle for new",
+          "score": "Numeric reputation score",
+          "label": "Trust level text (Trusted / Rising / New)"
+        }
+      }
+    },
+    "large": {
+      "description": "Large reputation card with score, trust level, progress bar toward trust threshold (50 points), and stats breakdown.",
+      "components": [
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4 _border _bordermuted/20 _r3",
+        "slots": {
+          "header": "Trust level icon and label with large score number",
+          "progress-bar": "Progress bar toward trust threshold (50 points)",
+          "stats": "Approved count, rejected count, featured count row",
+          "status": "Trusted indicator or points-to-go message"
+        }
+      }
+    },
+    "compact": {
+      "description": "Minimal inline score number with colored dot indicator. For content cards and list items.",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _aic _gap1",
+        "slots": {
+          "dot": "Colored dot: green for trusted, yellow for rising, gray for new",
+          "score": "Numeric score, small text"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "inline",
+    "atoms": "_inline-flex _aic _gap2",
+    "slots": {
+      "icon": "Trust level icon",
+      "score": "Numeric score",
+      "label": "Trust level text"
+    }
+  },
+  "visual_brief": "Compact inline badge displaying a user's reputation score and trust level. Shows a trust-level icon (shield, star, or checkmark based on level), a numeric score in medium-weight text, and a text label for the trust level (New, Trusted, Verified, etc.) in muted smaller text. A subtle progress indicator shows advancement toward the next trust threshold. The large preset enlarges everything and adds a detailed breakdown tooltip on hover. The compact preset shows icon and score only. Color varies by trust level — gray for new, blue for trusted, gold for verified.",
+  "layout_hints": {
+    "badge_layout": "Inline pill: star icon + score number (font-semibold) + level text (text-muted). Background: subtle primary tint. Tooltip on hover shows breakdown.",
+    "levels": "Level names: Newcomer (0-10), Contributor (11-50), Trusted (51-200), Expert (201+). Color intensifies with level."
+  },
+  "responsive": {
+    "mobile": "Compact preset preferred. Badge renders inline at standard body text size.",
+    "tablet": "Standard badge with icon, score, and label visible.",
+    "desktop": "Full badge with progress indicator. Large preset with tooltip on hover."
+  },
+  "motion": {
+    "micro": "Level indicators and progress cues may brighten or animate softly on hover, but the badge should remain calm and compact.",
+    "transitions": "Score and level updates should cross-fade or count smoothly over 150-220ms without causing layout shift."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Reputation badge",
+    "keyboard": [
+      "If the badge exposes a tooltip or breakdown, keyboard users should be able to reveal it via focus and dismiss it via Escape."
+    ],
+    "announcements": [
+      "Score and trust level should be announced together rather than relying on color or iconography alone."
+    ],
+    "focus_management": "If the badge is interactive, preserve focus on the badge trigger when tooltips or detail popovers close."
+  }
+}

package/patterns/retro-table.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "retro-table",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Retro Table",
+  "description": "ASCII-bordered data tables with box-drawing characters for terminal-style displays.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {
+      "terminal": "^1.0.0"
+    },
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full ASCII borders with box-drawing characters",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen _overflow[auto]",
+        "slots": {
+          "header": "Column headers",
+          "body": "Data rows",
+          "footer": "Summary row",
+          "pagination": "Page controls"
+        }
+      }
+    },
+    "simple": {
+      "description": "Simple pipe separators without full borders",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "header": "Column headers with pipes",
+          "body": "Data rows with pipes"
+        }
+      }
+    },
+    "compact": {
+      "description": "Compact table without vertical lines",
+      "components": [],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _mono _fggreen",
+        "slots": {
+          "header": "Underlined headers",
+          "body": "Space-separated data"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _mono _fggreen",
+    "slots": {
+      "header": "Column headers",
+      "body": "Data rows",
+      "footer": "Summary",
+      "pagination": "Page controls"
+    }
+  },
+  "features": [
+    "sortable-columns",
+    "resizable-columns",
+    "horizontal-scroll",
+    "row-selection",
+    "copy-cell",
+    "export-csv"
+  ],
+  "border_characters": {
+    "top_left": "┌",
+    "top_right": "┐",
+    "bottom_left": "└",
+    "bottom_right": "┘",
+    "horizontal": "─",
+    "vertical": "│",
+    "t_left": "├",
+    "t_right": "┤",
+    "t_top": "┬",
+    "t_bottom": "┴",
+    "cross": "┼"
+  },
+  "visual_brief": "Data table rendered entirely with ASCII box-drawing characters on a monospace font. Headers and cells are separated by lines drawn with characters like ─, │, ┌, ┐, └, ┘, ├, ┤, ┬, ┴, ┼. Column headers are bold or uppercase. Cell content is padded for alignment. The simple preset uses single-line borders. The compact preset uses minimal separators (only horizontal lines between rows). A pagination row at the bottom uses ASCII characters for page indicators. Footer summary row uses double-line border (═, ║) to distinguish from data rows.",
+  "responsive": {
+    "mobile": "Table scrolls horizontally in a container. Column widths minimize. Font size can reduce slightly. Fewer columns shown with a 'more' expand option.",
+    "tablet": "Standard table width. All columns visible with comfortable padding.",
+    "desktop": "Full-width table with generous column padding. Box-drawing characters render crisply at standard monospace sizing."
+  },
+  "layout_hints": {
+    "table_priority": "Headers, rows, and footer summaries should remain easy to parse before the ASCII framing becomes the star. The borders support the data, not vice versa.",
+    "density_control": "Reduce columns or switch presets on narrow widths rather than forcing unreadably tight ASCII geometry.",
+    "summary_role": "Footer summaries should feel like part of the same ledger, just with stronger separation, not like a detached status banner."
+  },
+  "motion": {
+    "micro": "Selected rows or sortable headers may sharpen subtly to confirm focus or interaction state.",
+    "transitions": "Sorting, pagination, and row selection should remain crisp and terminal-like without introducing modern card-style motion."
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "table",
+    "aria-label": "Retro data table",
+    "keyboard": [
+      "Headers, rows, and pagination should remain reachable in the same structural order as the visual table."
+    ],
+    "announcements": [
+      "Column names, row values, and summary totals should be exposed semantically so the table remains useful beyond its ASCII presentation."
+    ]
+  }
+}

package/patterns/reward-tier-selector.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "reward-tier-selector",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Reward Tier Selector",
+  "description": "Campaign reward picker for founder packs, preorder bundles, beta access tiers, and collector editions rendered as physical cartridges or boxed launch packs rather than generic pricing cards.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "rewards",
+    "pricing",
+    "pledge",
+    "preorder",
+    "conversion"
+  ],
+  "components": [
+    "Button",
+    "Badge",
+    "RadioGroup",
+    "Progress",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "cartridge-row",
+  "presets": {
+    "cartridge-row": {
+      "description": "Horizontal reward cartridges with price, contents, inventory meter, delivery window, and select action.",
+      "components": [
+        "Button",
+        "Badge",
+        "RadioGroup",
+        "Progress",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[76rem] _mx[auto]",
+        "slots": {
+          "tier-cartridge": "Repeating reward object shaped like a product cartridge or boxed set, not a generic card.",
+          "tier-title": "Founder Pack, Early Access, Collector Kit, Studio Bundle, or similar.",
+          "price": "Large price or pledge amount with billing/preorder note.",
+          "contents": "Short inventory list of included items or access rights.",
+          "availability": "Limited quantity, sold out, shipping window, or beta wave state.",
+          "select-action": "Choose reward, reserve, or join waitlist button."
+        }
+      }
+    },
+    "comparison-console": {
+      "description": "Wide comparison console with tiers as columns, feature rows as manual-style line items, and a sticky action row.",
+      "components": [
+        "Button",
+        "Badge",
+        "RadioGroup",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap4 _wfull _maxw[78rem] _mx[auto]",
+        "slots": {
+          "tier-header-row": "Tier names, prices, and featured labels.",
+          "feature-row": "Manual-like included feature row with icon/check state.",
+          "action-row": "Sticky or repeated select actions."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap5 _wfull _maxw[76rem] _mx[auto]",
+    "slots": {
+      "tier-cartridge": "Repeating boxed reward tier",
+      "tier-title": "Reward name",
+      "price": "Pledge amount or access price",
+      "contents": "Included benefits and product contents",
+      "availability": "Inventory, delivery, or access state",
+      "select-action": "Choose reward action"
+    }
+  },
+  "visual_brief": "A reward section that looks like choosing product cartridges or boxed founder kits. Each tier should have a strong silhouette, hard borders, a top notch or label strip, visible price, inventory/status strip, and delivery timing. Avoid soft SaaS pricing cards, pill badges, three-column gray boxes, and generic feature checklists. The selected tier should feel mechanically active, like it snapped into a console slot or got pressed down into the deck.",
+  "responsive": {
+    "mobile": "Use a vertical selector with one tier per full-width cartridge. Keep price and select action visible without horizontal scrolling.",
+    "tablet": "Two-column grid of tier cartridges.",
+    "desktop": "Three to four tiers in a row or a wide comparison console. Featured tier can be slightly taller but must not become a nested card."
+  },
+  "layout_hints": {
+    "tier_language": "Use campaign words: reward, founder pack, beta key, collector kit, early-bird, preorder bundle.",
+    "availability": "Show scarcity honestly with inventory or delivery labels, not vague urgency.",
+    "selection_state": "Selected tier should use border/fill/press state, not only color."
+  },
+  "motion": {
+    "micro": {
+      "select": "cartridge shifts down 3px and shows active border over 120ms",
+      "inventory": "meter fills once when tier enters viewport"
+    },
+    "transitions": {
+      "tier-stagger": "Tiers snap in from left to right with short stagger."
+    }
+  },
+  "interactions": [
+    "click-select",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "RewardTierSelector": "Section > [Header + TierCartridge[] + FinePrint]",
+    "TierCartridge": "SelectablePanel > [TierLabel + Price + Contents + Availability + SelectAction]",
+    "Availability": "InventoryMeter? + DeliveryWindow + StatusBadge"
+  },
+  "accessibility": {
+    "role": "radiogroup",
+    "aria-label": "Choose a reward tier",
+    "keyboard": [
+      "Arrow keys move between reward tiers.",
+      "Enter or Space selects the focused tier.",
+      "Tab moves into the selected tier action."
+    ],
+    "announcements": [
+      "Selected {tier} reward.",
+      "{remaining} spots remaining for {tier}."
+    ],
+    "focus_management": "Selected and focused states must be visually distinct for keyboard users."
+  },
+  "io": {
+    "consumes": [
+      "reward-tiers",
+      "inventory-state"
+    ],
+    "produces": [
+      "selected-reward-tier"
+    ],
+    "actions": [
+      "tier-select",
+      "pledge-start"
+    ]
+  }
+}

package/patterns/sample-tracker.json

@@ -0,0 +1,127 @@
+{
+  "id": "sample-tracker",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Sample Tracker",
+  "description": "A laboratory sample inventory tracker rendering biological or chemical samples with barcode identifiers, storage location tags, expiry countdowns, chain-of-custody logs, and status indicators across grid, freezer-map, or timeline views.",
+  "category": "science",
+  "tags": [
+    "2026",
+    "science",
+    "lab",
+    "inventory",
+    "samples",
+    "freezer",
+    "custody",
+    "barcode"
+  ],
+  "components": [
+    "SampleCard",
+    "LocationTag",
+    "ExpiryBadge",
+    "CustodyLog",
+    "BarcodeDisplay",
+    "StatusIcon",
+    "FreezerGrid",
+    "CustodyTimeline"
+  ],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Card-grid rendering of all samples with barcode, name, location, expiry, and status visible at a glance. Responsive grid adapts from 2 columns (mobile) to 6 columns (wide). Best for inventory browsing and search.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _grid _gap3 _p4"
+      }
+    },
+    "freezer": {
+      "description": "Physical freezer-box layout showing samples positioned in their actual storage coordinates (rack/box/row/column). Renders as a 9×9 grid mimicking cryobox positions with occupied/empty cell indicators.",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_w100 _grid _p4"
+      }
+    },
+    "timeline": {
+      "description": "Chronological chain-of-custody timeline showing every access event for each sample (who, when, what was done). Vertical timeline with custody events as nodes connecting back to the sample origin.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap2 _p4"
+      }
+    }
+  },
+  "visual_brief": "A scientific inventory view rendered as a responsive grid of SampleCards inside a d-section container. Each SampleCard is a d-surface with subtle border, padding 12px, and hover elevation. At the top of each card, a BarcodeDisplay renders the sample's unique ID as a visible 1D barcode (Code 128) with the human-readable identifier beneath in mono-data small text (e.g., 'SMPL-2026-00342'). Below the barcode sits the sample name in semibold text-sm with an optional species/type subline in body-muted. A LocationTag renders as a pill-shaped chip with a freezer-icon prefix showing storage position in mono-data format: 'FRZ-3 / Rack B / Box 4 / A3'. Beside it, an ExpiryBadge is color-coded by days remaining: emerald (>90 days), amber (30-90 days), red (<30 days), gray (expired/used). The badge shows the expiry date and a relative countdown ('28 days'). A StatusIcon sits in the top-right corner of each card indicating current state: available (green circle), checked-out (blue arrow-right), in-use (amber pulse dot), depleted (gray X), contaminated (red warning). A CustodyLog footer shows the most recent custody event with a small user avatar, action ('Accessed by J. Chen'), and timestamp ('2h ago'). Clicking a card opens a detail drawer with full custody history, freezer-cooldown logs, QC results, and derived-samples lineage. For freezer preset, cards arrange into a physical 9×9 grid mimicking cryobox layout with position labels (A1-I9) along edges and empty cells showing dashed borders. For timeline preset, SampleCards transform into horizontal rows with a vertical CustodyTimeline rail on the left; each custody event renders as a circular node on the rail with a connector line to the next event, with event details (user, action, timestamp) flowing to the right.",
+  "layout_hints": {
+    "container": "d-section with grid layout",
+    "note": "Sample tracking is regulatory-grade lab data (GLP/GMP compliant). Every access must be logged. Expiry dates must be visible and color-coded. Chain-of-custody cannot be edited after creation.",
+    "sample_card": "SampleCard uses d-surface[data-interactive] with cursor:pointer. Minimum width 200px, maximum 280px. Internal padding 12px, gap 8px between sections.",
+    "expiry_colors": "ExpiryBadge colors MUST be consistent: emerald (>90d), amber (30-90d), red (<30d), gray (expired). Colorblind-safe with icon prefixes (clock, warning, skull).",
+    "status_icons": "StatusIcon uses d-annotation[data-status] in top-right corner 16px diameter. available=green, checked-out=blue, in-use=amber-pulse, depleted=gray, contaminated=red.",
+    "barcode_format": "BarcodeDisplay renders actual scannable Code 128 or QR barcode (not decorative). Human-readable ID always visible beneath for manual entry fallback.",
+    "custody_immutability": "CustodyLog entries are append-only. Display includes user avatar, action verb, and ISO timestamp. Never editable after creation — corrections require new custody entry."
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_w100 _grid _gap3 _p4 _grid-cols-auto",
+    "slots": {
+      "sample-grid": "Responsive grid container holding SampleCards. Adapts column count based on viewport (2 mobile → 6 wide). Each cell contains one SampleCard.",
+      "sample-card": "Repeating slot — one per sample. Contains BarcodeDisplay, sample name, LocationTag, ExpiryBadge, StatusIcon, and CustodyLog preview. Clickable to open detail drawer with full history.",
+      "barcode-display": "Top of each sample card. Renders scannable 1D Code 128 or 2D QR barcode with human-readable ID beneath in mono-data small text.",
+      "location-tag": "Pill-shaped chip showing physical storage coordinates in format 'FRZ-N / Rack X / Box Y / Position'. Clickable to open freezer-map view at that location.",
+      "expiry-badge": "Color-coded pill showing expiry date and relative countdown (days remaining). Colors map to urgency thresholds with icon prefixes.",
+      "status-icon": "Top-right corner indicator showing current sample state: available, checked-out, in-use, depleted, contaminated. 16px diameter with consistent color mapping.",
+      "custody-log-preview": "Footer of each card showing most recent custody event (user avatar, action verb, timestamp). Links to full custody timeline on click.",
+      "freezer-grid": "Freezer-preset-only slot. Physical cryobox layout 9×9 grid with position labels A1-I9 along edges. Empty cells show dashed borders; occupied cells show SampleCard at reduced size.",
+      "custody-timeline": "Timeline-preset-only slot. Vertical rail of custody events per sample, each event as circular node with connector lines. Event details flow to right (user, action, timestamp, notes)."
+    }
+  },
+  "accessibility": {
+    "role": "grid",
+    "aria-label": "Laboratory sample inventory",
+    "announcements": [
+      "Sample {id}: {name}, expires {date}, status {status}",
+      "Opened detail for sample {id}",
+      "Custody: {user} {action} at {timestamp}"
+    ],
+    "keyboard": [
+      "Arrow keys: navigate between sample cards in grid",
+      "Enter: open sample detail drawer",
+      "Escape: close drawer",
+      "/: focus search / barcode input",
+      "L: toggle layout (grid/freezer/timeline)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Grid collapses to 2 columns with SampleCards stacking vertically. BarcodeDisplay remains scannable. LocationTag truncates to freezer+box only. Custody log preview hidden, available via tap.",
+    "tablet": "Grid renders 3-4 columns. All card sections visible. Freezer preset maintains 9×9 grid with horizontal scroll if needed."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "scale 1.02 + shadow-elevation 150ms ease-out",
+      "status-pulse": "in-use amber dot opacity 0.5 to 1.0 to 0.5 1.5s ease-in-out infinite",
+      "expiry-warning": "ExpiryBadge red <7 days subtle shake 300ms every 10s"
+    },
+    "transitions": {
+      "layout-swap": "grid reflow 400ms ease-in-out between grid/freezer/timeline presets",
+      "drawer-open": "right-side drawer slide-in 250ms ease-out",
+      "custody-append": "new custody event fade-in + slide-up 300ms ease-out"
+    },
+    "ambient": {
+      "expiry-countdown": "ExpiryBadge text updates live as days elapse"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "SampleTracker": "Section(d-section) > [SampleGrid | FreezerGrid | CustodyTimeline]",
+    "SampleCard": "Surface(d-surface, data-interactive) > [BarcodeDisplay + SampleName + LocationTag + ExpiryBadge + CustodyLogPreview + StatusIcon]",
+    "BarcodeDisplay": "Element(d-annotation, data-barcode) > [BarcodeImage + HumanReadableID]",
+    "LocationTag": "Chip(d-annotation, data-location) > [FreezerIcon + LocationPath]",
+    "ExpiryBadge": "Badge(d-annotation, data-expiry-urgency) > [ExpiryIcon + DateText + CountdownText]",
+    "StatusIcon": "Indicator(d-annotation, data-status) > [StatusDot]",
+    "CustodyLog": "Footer(d-annotation, data-custody) > [UserAvatar + ActionVerb + Timestamp]",
+    "FreezerGrid": "Grid(d-section, data-freezer-layout, 9x9) > [PositionLabels + OccupiedCell[] + EmptyCell[]]",
+    "CustodyTimeline": "Timeline(d-section) > [CustodyRail + CustodyEvent[]]"
+  }
+}

package/patterns/scene-storyboard.json

@@ -0,0 +1,104 @@
+{
+  "id": "scene-storyboard",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Scene Storyboard",
+  "description": "Visual storyboard grid displaying video scenes as reorderable cards with thumbnails, duration badges, and notes for pre-production and AI video planning.",
+  "category": "media",
+  "tags": ["2026", "media", "storyboard", "video", "scenes", "pre-production"],
+  "components": ["SceneCard", "SceneThumbnail", "DurationBadge", "SceneNotes", "DragHandle"],
+  "default_preset": "grid",
+  "presets": {
+    "grid": {
+      "description": "Responsive card grid of scene thumbnails with metadata badges and drag-to-reorder, suitable for overview and planning views",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-4 _gap-4 _p-4 _w100"
+      }
+    },
+    "strip": {
+      "description": "Horizontal scrollable film-strip layout showing scenes connected by thin sequence lines, ideal for linear narrative review",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _gap-3 _overflow-x-auto _p-4 _w100"
+      }
+    },
+    "detail": {
+      "description": "Two-column layout with storyboard grid on left and selected-scene script and notes panel on right for detailed review",
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _grid-cols-[1fr_320px] _gap-4 _p-4 _w100"
+      }
+    }
+  },
+  "visual_brief": "A grid of 16:9 aspect ratio scene cards (approximately 280x158px image area) rendered as rounded-corner cards with subtle shadow. Each card has a thumbnail preview image filling the top 70%, with a scene number badge (e.g. 'Scene 04') overlaid top-left in a small dark pill. Duration badge sits bottom-right on the thumbnail (e.g. '0:12') in a dark translucent pill with monospace numbers. A drag handle (6-dot grip icon) appears top-right on card hover, fading in at 150ms. Scene notes display below the thumbnail as 2-line truncated body text in muted color. Selected scene card has a 2px accent-color border with a subtle glow. In strip preset, cards sit in a horizontal scrolling row connected by thin 1px horizontal lines between them, suggesting narrative flow. Detail preset shows the grid at 60% width with a parchment-style script sidebar showing the selected scene's dialogue and action lines in serif typography.",
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _grid-cols-4 _gap-4 _p-4 _w100",
+    "slots": {
+      "scene-card": "Repeating card (d-surface, data-interactive) sized to maintain 16:9 thumbnail aspect with text area below. Minimum 240px wide, maximum 320px. Has border-radius 12px and subtle shadow that lifts on hover.",
+      "scene-thumbnail": "Image area at top of card rendering the scene preview. Fills 100% card width, 16:9 aspect ratio. Lazy-loaded with skeleton shimmer fallback. Supports image or video poster frame.",
+      "scene-number-overlay": "Small pill badge positioned absolutely at top-left of thumbnail with 8px inset. Dark translucent background, white text, font-size 11px, font-weight 600.",
+      "duration-badge": "Pill badge at bottom-right of thumbnail with 8px inset. Dark translucent backdrop-blur background. Monospace font for timecode display.",
+      "drag-handle": "6-dot grip icon at top-right of card, opacity 0 by default, opacity 1 on hover. Cursor grab/grabbing. Initiates drag-and-drop reorder.",
+      "scene-notes": "Text area below thumbnail with 12px padding. Shows scene description in 2-line clamp with ellipsis. Font-size 13px, text-muted color."
+    }
+  },
+  "responsive": {
+    "mobile": "Single column grid with full-width cards. Strip preset uses snap-scroll for one-card-at-a-time horizontal navigation. Detail preset stacks script below grid.",
+    "tablet": "2-column grid. Detail sidebar collapses to bottom sheet on scene selection.",
+    "desktop": "4-column grid (3-column for detail preset). Full hover interactions and drag reordering enabled."
+  },
+  "layout_hints": {
+    "sequence_priority": "Scene order and narrative flow should remain obvious before note detail. The board should feel like a planning surface for sequence, not just a collection of thumbnails.",
+    "detail_attachment": "When a scene is selected, its notes or script should feel attached to that card and not like a separate disconnected editor.",
+    "strip_mode": "The strip preset should reinforce left-to-right narrative progression rather than behaving like a generic horizontal gallery."
+  },
+  "layout_hints": {
+    "sequence_priority": "Scene order and narrative flow should remain obvious before note detail. The board should feel like a planning surface for sequence, not just a collection of thumbnails.",
+    "detail_attachment": "When a scene is selected, its notes or script should feel attached to that card and not like a separate disconnected editor.",
+    "strip_mode": "The strip preset should reinforce left-to-right narrative progression rather than behaving like a generic horizontal gallery."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-2px) + shadow-lift 180ms ease-out",
+      "drag-handle-reveal": "opacity 0 to 1 150ms ease-out on hover"
+    },
+    "transitions": {
+      "card-reorder": "FLIP animation 300ms ease-in-out for grid repositioning",
+      "selection-change": "border-color + glow 200ms ease-out"
+    },
+    "ambient": {
+      "thumbnail-load": "skeleton shimmer 1.5s linear infinite until loaded"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "SceneStoryboard": "Root(d-section, grid) > SceneCard*(d-interactive)",
+    "SceneCard": "Card(d-surface) > [SceneThumbnail + SceneNumberOverlay + DurationBadge + DragHandle + SceneNotes]",
+    "StripVariant": "Root(flex-row, scroll-x) > SceneCard*(connected-by-line)",
+    "DetailVariant": "Split > [SceneGrid + ScriptSidebar(d-surface)]"
+  },
+  "accessibility": {
+    "role": "list",
+    "aria-label": "Scene storyboard",
+    "announcements": [
+      "Scene {number} selected",
+      "Scene {number} moved to position {new}",
+      "Scene {number} added"
+    ],
+    "keyboard": [
+      "Tab: cycle through scene cards",
+      "Enter: open scene detail",
+      "Space: select/deselect scene",
+      "Arrow keys: navigate grid",
+      "Ctrl+Arrow: move scene in sequence",
+      "Delete: remove selected scene"
+    ]
+  }
+}