@decantr/content 3.8.0

package/patterns/dataset-card.json

@@ -0,0 +1,127 @@
+{
+  "id": "dataset-card",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Dataset Card",
+  "description": "A scientific dataset metadata card surfacing schema structure, quality indicators, size statistics, licensing, version, and a sample preview for discoverability in data catalogs and research data management systems.",
+  "category": "science",
+  "tags": [
+    "2026",
+    "science",
+    "data",
+    "dataset",
+    "metadata",
+    "catalog",
+    "fair",
+    "schema"
+  ],
+  "components": [
+    "DatasetTitle",
+    "SchemaTree",
+    "StatsBadge",
+    "QualityIndicator",
+    "LicenseChip",
+    "DownloadButton",
+    "SamplePreview",
+    "VersionTag",
+    "AuthorBlock"
+  ],
+  "default_preset": "summary",
+  "presets": {
+    "summary": {
+      "description": "Compact card showing title, description, size stats, license, and download button. Ideal for dataset discovery grids where many datasets are browsed at once without overwhelming detail.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap3 _p4 _max-w-420"
+      }
+    },
+    "detailed": {
+      "description": "Full metadata rendering with schema tree, per-column statistics, quality indicators, version history, citation guidance, and DOI reference. Intended for the dataset landing page in a data repository.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap4 _p5 _max-w-720"
+      }
+    },
+    "preview": {
+      "description": "Detail card with an embedded tabular sample preview showing first 10 rows of data beneath the schema tree. Helps researchers assess fit-for-purpose before downloading large files.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap4 _p5 _max-w-720"
+      }
+    }
+  },
+  "visual_brief": "A data-catalog card rendered as a d-surface with a prominent header, schema tree body, and action footer. The top section shows DatasetTitle in text-xl semibold with VersionTag pill ('v2.3.1') beside it and a QualityIndicator badge (verified=emerald-check, pending=amber-dot, flagged=red-warning, deprecated=gray-archive) in the top-right. Beneath the title, a one-line description in body-muted text. A meta row of StatsBadges shows: Rows ('124,532'), Columns ('18'), Size ('42 MB'), Last updated ('2 days ago'), Format ('CSV/Parquet'). Each badge uses mono-data for the numeric value with a small glyph icon. An AuthorBlock shows institution logo, author names (or ORCID), and publication/DOI citation with a copy icon. The SchemaTree renders as an indented tree of columns with type annotations: 'patient_id : string', 'measurement_value : float64', 'timestamp : datetime'. Each column row includes a type chip (color-coded: string=slate, numeric=blue, datetime=violet, boolean=teal, geo=green) and optional stats preview (min/max for numeric, cardinality for string, date-range for datetime). Columns with null-constraint or primary-key show small key/asterisk icons. A LicenseChip ('CC BY 4.0' or 'MIT' or 'Restricted Access') sits beneath the schema with a link-out to the full license text. Expandable tags chips for subject keywords. Preview preset adds a SamplePreview table showing first 10 rows of the dataset with column headers matching schema types and cells in mono-data; scrollable horizontally. At the footer, a DownloadButton spans full-width or primary-aligned with a format selector dropdown (CSV / Parquet / JSON / RDF) and file-size indicator beside it. Secondary actions ('View Docs', 'Cite', 'Share') appear as ghost buttons in a row.",
+  "layout_hints": {
+    "container": "d-surface card",
+    "note": "Dataset cards are discovery surfaces in data catalogs. FAIR-principle compliance requires: findable (title+DOI), accessible (license+download), interoperable (format+schema), reusable (license+citation).",
+    "quality_indicator": "QualityIndicator MUST be top-right of card. Colors consistent: verified=emerald, pending=amber, flagged=red, deprecated=gray. Always pair with icon (check/dot/warning/archive).",
+    "schema_tree": "SchemaTree columns use indentation for nesting (JSON/nested structs). Type chips color-coded: string=slate, numeric=blue, datetime=violet, boolean=teal, geo=green. Mono-data for column names.",
+    "stats_badges": "StatsBadge uses mono-data tabular-nums for all figures. Include unit indicators (rows, MB, GB). Format human-readable (124,532 not 124532).",
+    "license_chip": "LicenseChip MUST link to SPDX-identifier or full license text. Restricted-access datasets show lock-icon prefix and access-request flow."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_w100 _grid _gap3 _p4 _max-w-420",
+    "slots": {
+      "dataset-header": "Top section with DatasetTitle, VersionTag pill, QualityIndicator badge, and one-line description. Title is text-xl semibold.",
+      "stats-row": "Horizontal row of StatsBadges showing Rows, Columns, Size, Last-updated, and Format. Each badge has icon glyph + mono-data value.",
+      "author-block": "Institution logo, author names or ORCID links, and citation/DOI with copy-to-clipboard icon. Essential for attribution and reproducibility.",
+      "schema-tree": "Indented tree rendering of dataset columns with type chips, null/primary-key icons, and optional per-column stats preview (min/max/cardinality/date-range).",
+      "license-chip": "Pill chip showing license identifier (CC BY 4.0, MIT, Restricted) with link-out to full license text. Locked chip for restricted-access.",
+      "tags-chips": "Expandable row of keyword/subject tag chips for discovery (e.g., 'genomics', 'time-series', 'clinical').",
+      "sample-preview": "Preview-preset-only slot. Tabular sample of first 10 rows with column headers matching schema. Horizontally scrollable with mono-data cells.",
+      "actions-footer": "Bottom row with DownloadButton (+ format selector dropdown + file-size) and secondary ghost-button actions: View Docs, Cite, Share."
+    }
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Dataset metadata card",
+    "announcements": [
+      "Dataset {title} version {version}, quality {status}",
+      "Schema contains {count} columns",
+      "Download started in {format} format, {size}"
+    ],
+    "keyboard": [
+      "Tab: cycle through actions and interactive elements",
+      "Enter: trigger download or open selected action",
+      "S: expand/collapse schema tree",
+      "P: toggle sample preview visibility",
+      "C: copy DOI citation to clipboard"
+    ]
+  },
+  "responsive": {
+    "mobile": "Card expands to full width. StatsBadges wrap to multiple rows. SchemaTree renders in accordion mode (columns collapsed behind expand arrow). DownloadButton remains full-width prominent.",
+    "tablet": "Standard card layout at max-w-720px. SchemaTree always expanded. SamplePreview shows 5 columns with horizontal scroll."
+  },
+  "motion": {
+    "micro": {
+      "badge-hover": "subtle scale 1.03 + shadow 120ms ease-out",
+      "copy-citation": "checkmark confirmation 400ms ease-out after copy",
+      "chip-focus": "ring-glow primary 150ms ease-out"
+    },
+    "transitions": {
+      "schema-expand": "tree height auto + fade 250ms ease-out",
+      "preview-reveal": "sample-preview slide-down + fade 300ms ease-out",
+      "download-progress": "button transforms to progress-bar 200ms ease-out during download"
+    },
+    "ambient": {
+      "quality-pending-pulse": "pending QualityIndicator dot pulse 1.5s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "DatasetCard": "Surface(d-surface, article) > [DatasetHeader + StatsRow + AuthorBlock + SchemaTree + LicenseChip + TagsChips + SamplePreview? + ActionsFooter]",
+    "DatasetHeader": "Header(d-annotation) > [DatasetTitle + VersionTag + QualityIndicator + Description]",
+    "StatsRow": "Row(d-row) > [StatsBadge(Rows) + StatsBadge(Columns) + StatsBadge(Size) + StatsBadge(Updated) + StatsBadge(Format)]",
+    "AuthorBlock": "Block(d-annotation) > [InstitutionLogo + AuthorList + CitationDOI + CopyButton]",
+    "SchemaTree": "Tree(d-annotation, data-schema) > [ColumnRow[] > [ColumnName + TypeChip + ConstraintIcon? + StatsPreview?]]",
+    "LicenseChip": "Chip(d-annotation, data-license) > [LicenseIcon + LicenseText + LinkOut]",
+    "SamplePreview": "Table(d-data, scrollable) > [HeaderRow + DataRow[]]",
+    "DownloadButton": "Button(d-control, data-primary) > [DownloadIcon + ButtonLabel + FormatSelector + SizeText]"
+  }
+}

package/patterns/daw-transport-bar.json

@@ -0,0 +1,66 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "daw-transport-bar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "DAW Transport Bar",
+  "description": "Studio-grade transport control strip for browser DAWs with playback controls, tempo, key, loop state, metronome, latency, collaborators, and bounce status.",
+  "category": "music",
+  "tags": ["2026", "music", "daw", "transport", "playback", "recording", "collaboration"],
+  "components": ["TransportControls", "TimeDisplay", "TempoKeyDisplay", "LoopToggle", "MetronomeToggle", "LatencyMeter", "PresenceStack", "BounceStatus"],
+  "default_preset": "studio",
+  "presets": {
+    "studio": {
+      "description": "Full DAW transport with record, playback, tempo/key, loop, metronome, latency, collaborators, and bounce progress",
+      "layout": { "layout": "flex", "atoms": "_flex _items-center _justify-between _w-full _bg-surface _border _p-3" }
+    },
+    "compact": {
+      "description": "Mobile transport with play/record, current time, and a secondary sheet for advanced controls",
+      "layout": { "layout": "flex", "atoms": "_flex _items-center _justify-between _w-full _bg-surface _p-2" }
+    }
+  },
+  "visual_brief": "Commercial-grade horizontal command strip that reads like studio hardware and a premium shadcn toolbar, not a web navbar. Left cluster has icon-only rewind, play/pause, stop, record, loop, and metronome controls with 40-44px hit targets, clear pressed/armed states, and restrained borders. Center cluster uses tabular monospace timecode, bar/beat position, tempo, key, and a slim progress rail with a precise playhead. Right cluster shows latency, render/bounce readiness, and collaborator avatars. Use cyan for playback/sync, amber for playhead/readiness, red for record, and neutral chrome everywhere else.",
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _items-center _justify-between _w-full _bg-surface _border _p-3",
+    "slots": {
+      "controls": "Icon-only transport controls. Primary play button is visually dominant; record is red and pulses only when armed.",
+      "timeline-status": "Current timecode, bar/beat, BPM, key, loop range, and a slim progress rail.",
+      "session-status": "Latency, render state, sync state, and active collaborators."
+    }
+  },
+  "composition": {
+    "TransportBar": "Root(studio-rack, flex-row) > [Controls + TimelineStatus + SessionStatus]",
+    "Controls": "Cluster > [Rewind + PlayPause + Stop + Record + Loop + Metronome]",
+    "SessionStatus": "Cluster > [LatencyMeter + BounceStatus + PresenceStack]"
+  },
+  "motion": {
+    "micro": {
+      "button-press": "button compresses 2px and emits 120ms ripple-click",
+      "record-armed": "record dot pulses red once per second"
+    },
+    "ambient": {
+      "playhead": "progress rail advances continuously during playback",
+      "sync-status": "latency meter breathes cyan while connected"
+    }
+  },
+  "interactions": ["ripple-click", "status-pulse", "real-time-updates", "keyboard-navigation"],
+  "responsive": {
+    "mobile": {
+      "layout": "stack",
+      "hide_components": ["latency-detail", "advanced-loop-controls"],
+        "notes": "Keep play, record, current time, BPM, and collaborators visible. Move secondary toggles into an overflow sheet. Never wrap into a cluttered two-line toolbar unless the layout is intentionally stacked."
+      },
+    "desktop": "Full transport remains one row, with status and collaborators visible at all times."
+  },
+  "accessibility": {
+    "role": "toolbar",
+    "aria-label": "DAW transport controls",
+    "keyboard": ["Space: play or pause", "R: arm recording", "L: toggle loop", "M: toggle metronome", "B: bounce current session"],
+    "announcements": ["Playback {playing|paused}", "Recording {armed|stopped}", "Tempo set to {bpm} BPM"]
+  },
+  "layout_hints": {
+    "hardware_feel": "Transport controls should feel dense and tactile, not like generic text buttons.",
+    "status_priority": "Timecode and playback state are the primary read targets; collaborator and bounce status are secondary."
+  }
+}

package/patterns/deal-pipeline-board.json

@@ -0,0 +1,124 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "deal-pipeline-board",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Deal Pipeline Board",
+  "description": "Sales pipeline Kanban board specialized for deal management with stage columns, deal cards showing amounts and close probability, drag-to-advance functionality, and value aggregation per stage.",
+  "category": "crm",
+  "tags": [
+    "2026",
+    "crm",
+    "pipeline",
+    "kanban",
+    "deals",
+    "sales",
+    "board"
+  ],
+  "components": [
+    "PipelineBoard",
+    "StageColumn",
+    "DealCard",
+    "StageHeader",
+    "DealAmount",
+    "ProbabilityIndicator",
+    "WonLostBanner"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full Kanban board with deal cards showing company name, contact, amount, and probability bar — cards are draggable between stage columns with smooth animations",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap4 _hfull _overflow-x-auto _p4"
+      }
+    },
+    "compact": {
+      "description": "Dense one-line-per-deal view within each stage column — shows only company name and amount on a single row, maximizing the number of visible deals for high-volume pipelines",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap3 _hfull _overflow-x-auto _p3"
+      }
+    },
+    "forecast": {
+      "description": "Probability-weighted view where deal amounts are multiplied by close probability — stage totals show weighted pipeline value, and cards display both raw and weighted amounts for forecasting accuracy",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap4 _hfull _overflow-x-auto _p4"
+      }
+    }
+  },
+  "visual_brief": "Horizontal Kanban board with five or more stage columns arranged left to right representing the sales pipeline: Lead, Qualified, Proposal, Negotiation, Won, and Lost. Each column is a vertical container (240-280px wide) with a sticky header and scrollable card area below. Stage headers display the stage name in bold, a deal count badge (e.g., '12 deals'), and a total dollar value with a small dollar-sign icon (e.g., '$340,000'). The header has a subtle bottom border colored to match the stage. Deal cards within each column are white rounded rectangles (full column width, approximately 100px tall) with: the company name in bold 14px text at the top, the contact name in muted 12px text below, the deal amount in prominent 16px semi-bold text with dollar formatting, and a thin horizontal progress bar at the bottom representing close probability (0-100%). The progress bar fills from left to right with the stage's accent color. Cards have a subtle left border colored by how long the deal has been in the current stage (green for recent, amber for aging, red for stale). Dragging a card shows a lifted shadow state and destination columns highlight with a dashed border drop zone. The Won column has a light green background tint with a subtle checkmark watermark. The Lost column has a light red background tint with dimmed card opacity (60%). The forecast preset shows a secondary weighted amount below the raw amount in a smaller muted style. Cards in all presets show a small avatar circle for the deal owner in the top-right corner.",
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _row _gap4 _hfull _overflow-x-auto _p4",
+    "slots": {
+      "stage-column": "Repeating slot — one per pipeline stage. A vertical container with a fixed width (260px), full height, a subtle background tint, and rounded corners. Contains a sticky StageHeader at the top and a scrollable area below for DealCards. The Won column has a green-tinted background. The Lost column has a red-tinted background. Columns accept drag-drop from other columns with a dashed border highlight as the drop indicator.",
+      "stage-header": "Sticky header within each stage column. Shows the stage name (16px bold), a deal count badge (small rounded pill with count), and the total pipeline value for that stage formatted as currency with a dollar icon. A subtle colored bottom border (2px) uses the stage's accent color. In forecast preset, shows both raw total and weighted total.",
+      "deal-card": "Repeating slot within a stage column — one per deal. A rounded card (border-radius 8px, padding 12px) with: company name (14px bold, single line truncated), contact name (12px muted, single line), deal amount (16px semi-bold, formatted as $X,XXX), a ProbabilityIndicator progress bar (4px tall, full width, fills to probability percentage), and a small owner avatar (24px circle) in the top-right corner. Left border (3px) colored by age-in-stage. The card is draggable with a grab cursor. On hover, the card elevates with a shadow increase. In compact preset, the card reduces to a single row: company name + amount on one line.",
+      "probability-indicator": "A thin horizontal progress bar at the bottom of each deal card. Width fills to the deal's close probability percentage. Color matches the stage accent color. In forecast preset, the bar also shows a small percentage label at the right end.",
+      "won-lost-banner": "Visual treatment applied to the Won and Lost stage columns. Won column: light green background (#f0fdf4), a subtle checkmark icon watermark at 5% opacity behind cards, and cards have a green left border. Lost column: light red background (#fef2f2), cards render at 60% opacity with a red left border, and a subtle X icon watermark."
+    }
+  },
+  "responsive": {
+    "mobile": "Columns stack as swipeable horizontal carousel with snap points — one column visible at a time with stage name tabs at the top for quick navigation. Deal cards use full width. Drag-to-move replaced with a 'Move to stage' dropdown on each card. Stage totals visible in the tab bar.",
+    "tablet": "Two to three columns visible at a time with horizontal scroll. Deal cards at full detail level. Drag-and-drop supported with touch. Stage headers remain sticky.",
+    "desktop": "All stage columns visible simultaneously with horizontal scroll if needed. Full drag-and-drop with hover previews. Deal cards show all details including owner avatar and probability bar. Stage headers are sticky during vertical scroll within columns."
+  },
+  "layout_hints": {
+    "pipeline_priority": "Stage progression is the primary read. Totals and card details should support the pipeline state rather than compete with the columns.",
+    "card_signal": "Each deal card should make amount, stage aging, and ownership obvious at a glance so movement decisions feel fast and confident.",
+    "mobile_translation": "When drag-and-drop collapses to explicit actions, preserve the same stage logic so mobile users still understand the board as a pipeline."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-2px) + box-shadow increase 150ms ease-out",
+      "card-grab": "scale(1.03) + shadow elevation 100ms ease-out",
+      "probability-fill": "width transition 400ms ease-out on value change"
+    },
+    "transitions": {
+      "card-drop": "position lerp + scale(1.03→1) 300ms ease-out when card is dropped in new column",
+      "column-highlight": "border-style solid→dashed + background-tint 200ms ease-out on valid drop target",
+      "card-move": "slide-out from source column + slide-in to destination column 350ms ease-in-out",
+      "stage-total-update": "number counter animation 500ms ease-out"
+    },
+    "ambient": {
+      "stale-deal-pulse": "subtle red border pulse on deals that have been in a stage past their expected duration, 3s infinite"
+    }
+  },
+  "interactions": [
+    "drag-reorder",
+    "click-select",
+    "lift-hover",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "PipelineBoard": "Board(d-section, flex-row, gap-4, overflow-x-auto) > StageColumn*(d-surface)",
+    "StageColumn": "Column(d-surface, flex-col, fixed-width, droppable) > [StageHeader(d-annotation) > [StageName + DealCount(d-annotation) + TotalValue(d-data)] + CardList(d-data, scrollable) > DealCard*]",
+    "DealCard": "Card(d-interactive, draggable) > [CompanyName + ContactName(d-annotation) + DealAmount(d-data) + ProbabilityIndicator(d-data) + OwnerAvatar?]",
+    "WonLostBanner": "Overlay(d-annotation, watermark, tinted-bg)"
+  },
+  "accessibility": {
+    "role": "application",
+    "aria-label": "Sales deal pipeline board with draggable deal cards across stages",
+    "keyboard": [
+      "Tab: move focus between stage columns",
+      "Arrow Up/Down: navigate between deal cards within a column",
+      "Arrow Left/Right: move focus between stage columns",
+      "Space: pick up focused deal card for moving",
+      "Arrow Left/Right (while holding): move picked-up card to adjacent stage",
+      "Space/Enter: drop card in current stage",
+      "Escape: cancel card move and return to original position",
+      "D: open deal detail view for focused card"
+    ],
+    "announcements": [
+      "Stage {name}: {count} deals, total value {total}",
+      "Deal: {company}, {amount}, {probability}% probability in {stage} stage",
+      "Deal {company} moved from {fromStage} to {toStage}",
+      "Deal {company} marked as won, value {amount}",
+      "Deal {company} marked as lost",
+      "Pipeline total: {totalDeals} deals worth {totalValue}"
+    ]
+  }
+}

package/patterns/deal-stage-gates.json

@@ -0,0 +1,102 @@
+{
+  "id": "deal-stage-gates",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Deal Stage Gates",
+  "description": "Horizontal stage gate tracker for deal and project progression with approval checkpoints, approver avatars, and milestone date tracking.",
+  "category": "workflow",
+  "tags": ["2026", "workflow", "deal", "stages", "approval", "progression", "pipeline"],
+  "components": ["StageGate", "GateIcon", "ApprovalBadge", "StageName", "ProgressConnector", "ApproverAvatar"],
+  "default_preset": "horizontal",
+  "presets": {
+    "horizontal": {
+      "description": "Horizontal row of stage gates connected by progress bars for standard pipeline tracking across sales, legal, and operations workflows",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _items-center _gap-0 _p-6 _w-full _bg-surface"
+      }
+    },
+    "vertical": {
+      "description": "Vertical sidebar layout for deal pages where stage progression appears alongside primary content with compact stage indicators",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-0 _p-4 _w-full _max-w-xs _bg-surface"
+      }
+    },
+    "milestone": {
+      "description": "Milestone variant with date labels, SLA indicators, and elapsed-time tracking for time-bound deal progression and reporting",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _items-center _gap-0 _p-6 _w-full _bg-surface"
+      }
+    }
+  },
+  "visual_brief": "A horizontal row of rounded rectangle stage gates (approximately 180x88px each) connected by horizontal progress bars. Each gate has a gate icon at top (32px), stage name in semibold 13px (e.g. 'Qualification', 'Negotiation', 'Signed'), completion percentage in smaller muted text, and 2-3 approver avatars (24px overlapping circles) at the bottom. Passed gates have a filled green background with a large white check icon, and avatars display a subtle verified-ring. The current active gate has a pulsing primary-color outline with a glow animation and the gate icon rendered in primary color. Future gates are dimmed to 50% opacity with muted borders. Progress connectors between gates are 4px tall horizontal bars: fully filled between passed gates, half-filled into current gate, empty from current forward. Approval badges appear as small corner pills on passed gates ('Approved' in green). In milestone preset, date labels appear below each gate showing expected and actual completion dates with delta chips.",
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _flex-row _items-center _gap-0 _p-6 _w-full _bg-surface",
+    "slots": {
+      "stage-gate": "Individual gate card (d-surface, data-interactive) representing one stage. Contains gate icon, stage name, completion percentage, approver avatars, and approval badge.",
+      "gate-icon": "Icon representing the stage type (document, handshake, signature, etc.). 32px, rendered in state-appropriate color: success green for passed, primary for active, muted for future.",
+      "stage-name": "Stage label in semibold 13px type. Truncates with ellipsis if too long.",
+      "approval-badge": "Small pill at top-right of passed gates showing 'Approved' in success styling with check icon.",
+      "progress-connector": "Horizontal bar (4px tall) between adjacent gates visualizing progression. Fill width indicates transition state: 0% empty, 50% half (active transition), 100% complete.",
+      "approver-avatars": "Stacked overlapping avatars (24px, 8px overlap) at bottom of gate showing users who have approved or must approve. Verified ring on approved users.",
+      "date-label": "Milestone-variant-only: date text below gate showing expected/actual completion with color-coded delta (ahead/on-time/late)."
+    }
+  },
+  "responsive": {
+    "mobile": "Stages reflow to vertical stack. Progress connectors rotate 90 degrees. Gate width expands to container width. Avatar count reduces to show count-only indicator.",
+    "tablet": "Horizontal layout maintained but gates compress to 140px wide with abbreviated stage names.",
+    "desktop": "Full horizontal layout with all stages visible, hover interactions, and full stage names."
+  },
+  "layout_hints": {
+    "stage_priority": "Stage progression should be the first read, with approvals and milestone dates supporting that path rather than competing with it.",
+    "connector_role": "Progress connectors must reinforce how far a deal has advanced without becoming louder than the gates themselves.",
+    "mobile_translation": "When stacked vertically, preserve the same stage-by-stage progression so the flow still reads as one gated process."
+  },
+  "layout_hints": {
+    "stage_priority": "Stage progression should be the first read, with approvals and milestone dates supporting that path rather than competing with it.",
+    "connector_role": "Progress connectors must reinforce how far a deal has advanced without becoming louder than the gates themselves.",
+    "mobile_translation": "When stacked vertically, preserve the same stage-by-stage progression so the flow still reads as one gated process."
+  },
+  "motion": {
+    "micro": {
+      "active-gate-pulse": "outline glow 2s ease-in-out infinite on current gate",
+      "gate-hover": "translateY(-1px) + shadow-lift 150ms ease-out"
+    },
+    "transitions": {
+      "stage-advance": "progress-connector fill-sweep 600ms ease-in-out + check-icon draw on new passed gate",
+      "approval-add": "avatar fade-in + ring-pulse 300ms ease-out"
+    },
+    "ambient": {
+      "current-gate-glow": "border-shadow pulse matching primary color 2s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "DealStageGates": "Root(d-section, flex-row) > [StageGate + ProgressConnector]*",
+    "StageGate": "Card(d-surface, data-interactive, data-state) > [GateIcon + StageName + PercentageLabel + ApproverAvatars + ApprovalBadge?]",
+    "ProgressConnector": "Bar(absolute-between, fill-by-state)",
+    "MilestoneVariant": "Extended > [StageGate + DateLabel + DeltaChip]"
+  },
+  "accessibility": {
+    "role": "progressbar",
+    "aria-label": "Deal stage progression",
+    "announcements": [
+      "Stage {name} reached",
+      "Approval received from {approver}",
+      "Deal advanced to {stage}",
+      "{days} days in current stage"
+    ],
+    "keyboard": [
+      "Tab: cycle through stages",
+      "Enter: open stage detail",
+      "Arrow keys: navigate between stages",
+      "A: view approvers for focused stage"
+    ]
+  }
+}

package/patterns/depth-layered-canvas.json

@@ -0,0 +1,105 @@
+{
+  "id": "depth-layered-canvas",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Depth-Layered Canvas",
+  "description": "A true z-axis spatial layout with foreground, midground, and background layers using CSS perspective and transform-style: preserve-3d. Layers stack along the depth axis with parallax scrolling and focal-plane blur effects. For immersive dashboards, data landscapes, and spatial storytelling where information lives at different visual depths.",
+  "category": "spatial",
+  "tags": [
+    "2026",
+    "spatial",
+    "immersive",
+    "parallax",
+    "3d",
+    "dashboard",
+    "depth"
+  ],
+  "components": [
+    "SpatialLayer",
+    "FocalPoint",
+    "DepthSlider",
+    "ParallaxContainer",
+    "BlurMask"
+  ],
+  "default_preset": "three-plane",
+  "presets": {
+    "three-plane": {
+      "description": "Classic three-plane depth layout with background environment, midground content, and foreground controls. Parallax ratio: background 0.3x, midground 0.7x, foreground 1.0x.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _full _overflow-hidden"
+      }
+    },
+    "focal-spotlight": {
+      "description": "Single focal point in the foreground with all other content defocused in the background. DepthSlider lets users shift focus between layers. Useful for detail-on-demand data exploration.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _full _overflow-hidden"
+      }
+    },
+    "flat-fallback": {
+      "description": "Flat stacked layout for reduced-motion or non-supporting browsers. All layers collapse to a vertical stack with no perspective transforms. Content ordering preserved: background, midground, foreground top-to-bottom.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap8"
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative _full _overflow-hidden",
+    "slots": {
+      "background-layer": "Deepest visual plane. Ambient content: gradients, data visualizations, environment textures, or slow-moving decorative elements. Rendered at lowest z-index with strongest blur and slowest parallax rate (0.3x scroll speed).",
+      "midground-layer": "Primary content plane. Cards, panels, charts, and interactive widgets live here. Medium parallax rate (0.7x). This is where most user attention should land.",
+      "foreground-layer": "Closest visual plane. Navigation controls, floating action buttons, and contextual toolbars. Moves at 1:1 scroll speed with no blur. Always interactive.",
+      "focal-point": "A single highlighted element that draws depth-of-field focus. When active, surrounding layers receive graduated blur via BlurMask. Can be any content type: a card, chart, or media element.",
+      "depth-controls": "DepthSlider and layer visibility toggles. Lets users adjust parallax intensity, shift focal plane, or collapse to flat view. Should dock to an edge or float accessibly.",
+      "parallax-track": "The scroll or gesture track that drives parallax motion. Can be vertical scroll, horizontal drag, or pointer-follow. ParallaxContainer reads this track to translate layer positions."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria_label": "Spatial content canvas with depth layers",
+    "announcements": [
+      "Announce active focal layer when depth changes",
+      "Announce when transitioning between flat and spatial view"
+    ],
+    "keyboard": [
+      "Tab moves focus between interactive elements across all layers, foreground-first",
+      "Arrow Up/Down adjusts depth slider when focused",
+      "Escape collapses to flat fallback view",
+      "F key toggles focal-point spotlight mode"
+    ],
+    "reduce_motion": "Collapse all layers to flat-fallback preset. Disable parallax transforms. Remove blur transitions. Preserve content order and interactivity."
+  },
+  "responsive": {
+    "mobile": "Collapse to flat-fallback preset. Stack layers vertically. DepthSlider hidden. Focal-point renders inline without blur effect.",
+    "tablet": "Reduce parallax intensity to 50%. Two visible planes (midground + foreground). Background becomes a static backdrop. DepthSlider available but simplified."
+  },
+  "visual_brief": "Three-plane spatial layout using CSS perspective and preserve-3d transforms. Background layer sits deepest with ambient gradients or data visualizations, rendered with blur and slow parallax. Midground layer holds the primary content cards and panels at normal focus. Foreground layer contains interactive controls, tooltips, and floating action elements at the closest depth. A depth slider control on the edge lets users adjust focal plane. Layers shift on scroll with different parallax rates. The flat-fallback preset collapses all layers to a standard stacked layout for reduced-motion preference.",
+  "layout_hints": {
+    "depth_hierarchy": "Keep background, midground, and foreground responsibilities visually distinct. Do not let every layer become equally busy or equally interactive.",
+    "flat_fallback": "The reduced-motion and mobile fallback should still preserve content ordering and task intent, not just remove the 3D transforms.",
+    "overlay_balance": "Foreground controls should feel anchored and usable without crowding the main focal content."
+  },
+  "motion": {
+    "micro": "Depth controls and focal states may animate softly as layers gain or lose focus.",
+    "transitions": "Parallax and focal-plane shifts should feel smooth and spatial, but never induce motion sickness or obscure content state."
+  },
+  "interactions": [
+    "drag-nodes",
+    "pan-background",
+    "zoom-scroll",
+    "click-select",
+    "hover-tooltip",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "DepthLayeredCanvas": "Container(d-section, perspective, preserve-3d, full) > [BackgroundLayer + MidgroundLayer + ForegroundLayer + DepthControls?]",
+    "BackgroundLayer": "SpatialLayer(d-surface, z-back, blur, parallax: 0.3x)",
+    "MidgroundLayer": "SpatialLayer(d-surface, z-mid, parallax: 0.7x) > Content[]",
+    "ForegroundLayer": "SpatialLayer(d-interactive, z-front, parallax: 1x) > Controls[]",
+    "DepthControls": "Panel(d-control, floating) > [DepthSlider(d-control) + FlatToggle(d-interactive)]"
+  }
+}