@decantr/content 3.8.0

package/patterns/stem-stack.json

@@ -0,0 +1,101 @@
+{
+  "id": "stem-stack",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stem Stack",
+  "description": "Multi-stem audio mixer with per-stem channel strips, faders, pan knobs, meters, plugin slots, and master chain for DAW-style mixing.",
+  "category": "music",
+  "tags": ["2026", "music", "mixer", "stems", "channels", "faders", "daw"],
+  "components": ["StemChannel", "ChannelFader", "PanKnob", "MuteSoloButton", "MeterBar", "PluginSlot"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full mixer with per-stem plugin slots, pan knobs, mute/solo, faders, meters, and master channel on right for complete mixing control",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _gap-2 _p-4 _w-full _bg-surface _min-h-[480px]"
+      }
+    },
+    "compact": {
+      "description": "Track-only view without plugin slots showing just the essential fader, pan, and mute controls for quick balance adjustments",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _gap-2 _p-4 _w-full _bg-surface _min-h-[320px]"
+      }
+    },
+    "expanded": {
+      "description": "Extended view with expanded plugin chains and send controls for deep mixing sessions and mastering workflows",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _gap-2 _p-4 _w-full _bg-surface _min-h-[640px]"
+      }
+    }
+  },
+  "visual_brief": "Vertical channel strips arranged side-by-side in a horizontal row. Each channel strip is approximately 80px wide and 480px tall (standard preset). From top to bottom each strip contains: 3-4 plugin slots as stacked small rectangles (72x24px) with plugin name text, a circular pan knob (40px diameter) with rotation indicator line and pan label, a row with mute and solo buttons (24px each, M/S labeled), a tall vertical fader (dominating center of strip, approximately 240px tall) with draggable knob cap and dB scale markings on one side, stereo level meter bars (2px wide each, flanking the fader on both sides) with color-graded peaks (green <-6dB, yellow -6 to -3dB, red >-3dB) and a peak-hold dot, and a stem name label at the bottom in 11px text with optional color-coding. The master channel on the far right is visually distinct (slight border highlight, primary-color accent) and has fewer plugin slots, emphasizing the master fader and meters. Hovering the fader cap shows a dB value tooltip. Meters update in real-time with audio levels.",
+  "default_layout": {
+    "layout": "flex",
+    "atoms": "_flex _flex-row _gap-2 _p-4 _w-full _bg-surface _min-h-[480px]",
+    "slots": {
+      "stem-channel": "Repeating vertical channel strip (d-surface, 80px wide) containing all controls for one stem. Dark background with subtle border separators.",
+      "plugin-slots": "Stack of 3-4 plugin slot rectangles at top of strip. Each shows plugin name, bypass toggle, and edit-on-click affordance. Empty slots show + indicator.",
+      "pan-knob": "Circular rotary knob (40px diameter) with rotation indicator showing pan position. Center detent, -100 to +100 range. Drag up/down or scroll to adjust.",
+      "mute-solo-button": "Small button row (M and S buttons, 24px each). Mute = yellow active, Solo = blue active. Mutually visible.",
+      "channel-fader": "Vertical slider fader (240px tall) with large draggable cap and dB scale on side. 0dB unity mark highlighted. Drag vertically to adjust.",
+      "meter-bar": "Stereo level meter bars (2px wide each) flanking the fader. Color-graded amplitude with peak-hold dots. Updates in real-time.",
+      "stem-label": "Stem name at bottom of strip (11px text). Optional color coding for stem grouping.",
+      "master-channel": "Distinct master channel at far right with primary accent, fewer plugin slots, and emphasized master fader."
+    }
+  },
+  "responsive": {
+    "mobile": "Channel strips scroll horizontally. Plugin slots reduce to 2. Pan knob becomes slider. Meters simplify to single bar.",
+    "tablet": "Channel strips at 72px wide. Full controls maintained. Horizontal scroll for many stems.",
+    "desktop": "Full 80px strips with all controls visible, hover tooltips, and keyboard automation."
+  },
+  "motion": {
+    "micro": {
+      "fader-drag": "cap follows pointer 60fps with real-time dB text update",
+      "knob-drag": "rotation follows pointer delta 60fps with value readout"
+    },
+    "transitions": {
+      "plugin-add": "slot scale-in + fade 200ms spring",
+      "solo-mode": "non-soloed channels fade to 40% opacity 150ms ease-out"
+    },
+    "ambient": {
+      "meter-levels": "amplitude bars animate in real-time from audio signal",
+      "peak-hold": "peak dot holds for 1.5s then decays"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "StemStack": "Root(d-section, flex-row) > [StemChannel* + MasterChannel(d-surface, emphasized)]",
+    "StemChannel": "Strip(d-surface, vertical) > [PluginSlot* + PanKnob + MuteSoloButton + FaderWithMeters + StemLabel]",
+    "FaderWithMeters": "Container(relative) > [MeterBar(left) + ChannelFader(center) + MeterBar(right)]",
+    "PluginSlots": "Stack > PluginSlot*(d-interactive, empty|filled)"
+  },
+  "layout_hints": {
+    "channel_priority": "Each strip should read top-to-bottom as one coherent signal path so plugin, pan, mute/solo, fader, and metering feel structurally connected.",
+    "master_emphasis": "The master channel should stand out as the session summary without visually drowning out the individual stem strips.",
+    "scroll_behavior": "When the mixer overflows horizontally, channel width and meter readability should hold steady rather than collapsing into unreadable narrow strips."
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Multi-stem audio mixer",
+    "announcements": [
+      "{channel} fader set to {value} dB",
+      "{channel} pan set to {value}",
+      "{channel} {muted|soloed}",
+      "Plugin {name} added to {channel}"
+    ],
+    "keyboard": [
+      "Tab: cycle through channels",
+      "Arrow keys: adjust focused fader/knob",
+      "Shift+Arrow: fine adjustment",
+      "M: mute focused channel",
+      "S: solo focused channel",
+      "0: reset fader to 0dB"
+    ]
+  }
+}

package/patterns/stepper.json

@@ -0,0 +1,115 @@
+{
+  "id": "stepper",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stepper",
+  "description": "A step indicator for multi-step workflows showing numbered circles connected by lines, with distinct visual states for completed, active, and upcoming steps.",
+  "category": "progress",
+  "tags": [
+    "2026",
+    "progress",
+    "stepper",
+    "workflow",
+    "multi-step",
+    "wizard",
+    "indicator"
+  ],
+  "components": [
+    "StepList",
+    "StepItem",
+    "StepConnector",
+    "StepLabel",
+    "StepIcon"
+  ],
+  "default_preset": "horizontal",
+  "presets": {
+    "horizontal": {
+      "description": "Inline horizontal stepper with numbered circles and labels below, connected by lines — the standard layout for checkout flows, onboarding wizards, and form sequences",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _align-start _justify-between _w100"
+      }
+    },
+    "vertical": {
+      "description": "Vertical sidebar stepper with numbered circles and labels beside them, connected by vertical lines — ideal for long multi-step processes with step descriptions",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-0 _w-fit"
+      }
+    },
+    "minimal": {
+      "description": "Compact dot-only stepper without labels or numbers, showing progress as a row of small filled and outlined circles — suited for image carousels and compact wizard headers",
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _align-center _justify-center _gap-2"
+      }
+    }
+  },
+  "visual_brief": "A sequence of numbered circles connected by lines representing workflow progress. In the horizontal preset: circles are 36px diameter, arranged in a horizontal row with equal spacing, centered within the container. Each circle is connected to the next by a horizontal line (2px height) that runs from the right edge of one circle to the left edge of the next. Completed steps render as filled accent-colored circles (background: accent) with a white checkmark SVG icon (2px stroke, 16px size) replacing the number. The connector line following a completed step is solid accent color. The active step renders as a filled accent circle with the step number in white (text-sm, font-bold), plus a pulsing ring animation — a 44px ring in accent color at 20% opacity that scales from 1.0 to 1.3 and fades out over 2s, repeating infinitely. The connector line before the active step is solid accent; after it is dashed in border-muted color. Upcoming steps render as circles with a 2px border in border-muted color (no fill, transparent background) with the step number in text-muted color. Connectors between upcoming steps are 2px dashed lines in border-muted. Labels appear centered below each circle in horizontal mode: step name in text-sm (completed and active: text-default font-medium, upcoming: text-muted). In the vertical preset: circles are 32px diameter, arranged in a vertical column. Connectors are vertical lines (2px wide, 32px tall) running from the bottom of one circle to the top of the next, centered horizontally with the circles. Labels appear to the right of each circle (12px left margin): step name (text-sm, font-medium) on the first line, optional step description (text-xs, text-muted, max-width: 200px) on the second line. The vertical preset works well as a left sidebar with step descriptions providing additional context. In the minimal preset: circles are reduced to 10px diameter dots with no numbers or labels. Completed dots are filled accent. Active dot is filled accent with a subtle scale(1.2) and glow. Upcoming dots are 2px outlined in border-muted. No connector lines — just 8px gaps between dots. The entire stepper is centered.",
+  "layout_hints": {
+    "container": "header, sidebar, or inline",
+    "note": "The horizontal stepper is typically placed at the top of a multi-step form, spanning the full content width. The vertical stepper is placed in a left sidebar (200–280px wide). The minimal stepper is centered below or above the step content. Do not wrap in a card unless the stepper is part of a larger card component.",
+    "connector_alignment": "Horizontal connectors MUST align vertically centered with the step circles. The connector starts at the right edge of circle N and ends at the left edge of circle N+1. Use flex layout with the connector as a flex-1 element between step items.",
+    "step_states": "Three states: completed (accent fill, white check), active (accent fill, white number, pulse ring), upcoming (muted border, muted number). The active step should always be visually prominent.",
+    "click_behavior": "Completed steps MAY be clickable to allow navigating back. Active step is not clickable. Upcoming steps are not clickable unless the workflow allows skipping."
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _align-start _justify-between _w100",
+    "slots": {
+      "step-list": "The outer container for all steps and connectors. Horizontal preset: display flex, align-items: flex-start, justify-content: space-between, width: 100%. Each StepItem is a flex column (align-items center) and StepConnectors are flex-1 elements between items. Vertical preset: display flex, flex-direction: column, gap: 0, width: fit-content. Each StepItem is a flex row and connectors are vertical segments. Minimal preset: display flex, align-items: center, justify-content: center, gap: 8px. The list has role='list' and aria-label='Progress steps'.",
+      "step-item": "Repeating slot — one per workflow step. Contains the circle icon and label. Horizontal: flex column, align-items center, min-width: 80px. The circle is on top, label below with 8px gap. Vertical: flex row, align-items: flex-start, gap: 12px. The circle is on the left, label column on the right. Minimal: just the dot, no label. Each step item has aria-current='step' for the active step. Completed steps have a clickable wrapper (cursor: pointer, role='link') if back-navigation is enabled. Upcoming steps have aria-disabled='true'. The step item manages its own visual state (completed, active, upcoming) based on the current step index.",
+      "step-icon": "The numbered circle for each step. Size: 36px diameter (horizontal), 32px (vertical), 10px (minimal). Completed state: background accent, border: none. Contains a white checkmark SVG icon (viewBox 0 0 16 16, path with 2px stroke, stroke-linecap round, stroke-linejoin round, no fill). Active state: background accent, border: none. Contains the step number (1, 2, 3...) in white, text-sm (horizontal) or text-xs (vertical), font-bold, centered. Additionally has a pulsing ring — a pseudo-element or sibling div, 44px diameter (horizontal) or 40px (vertical), border: 2px solid accent at 20% opacity, border-radius-full, positioned centered behind the circle. The ring animates: scale 1→1.3 + opacity 0.2→0 over 2s ease-out, infinite. Upcoming state: background transparent, border: 2px solid border-muted. Contains the step number in text-muted color. Minimal preset: all states are 10px circles — completed: filled accent, active: filled accent with box-shadow 0 0 0 3px accent-20%, upcoming: border 2px solid border-muted with transparent fill. Transition between states: background-color + border-color 300ms ease.",
+      "step-connector": "The line segment connecting adjacent step circles. Horizontal: height 2px, flex: 1, margin-top: 18px (to vertically center with 36px circles), margin-left and margin-right: 0 (connects flush to circles). Vertical: width 2px, height: 32px, margin-left: 15px (to horizontally center with 32px circles). Between completed steps: solid line, background accent. Between completed and active: solid line, background accent. Between active and upcoming: dashed line (4px dash, 4px gap via background-image repeating-linear-gradient or SVG), color border-muted. Between upcoming steps: dashed line, color border-muted. Minimal preset: no connectors. Transition: background-color 300ms ease when a step completes.",
+      "step-label": "The text label for each step. Horizontal: centered below the circle, margin-top 8px. Text: step name in text-sm. Completed and active: text-default, font-medium. Upcoming: text-muted, font-normal. Max-width: 100px, text-align center, word-wrap for long names. Vertical: positioned to the right of the circle. Step name: text-sm, font-medium (completed/active: text-default, upcoming: text-muted). Optional description on the next line: text-xs, text-muted, max-width 200px, line-clamp: 2. Gap between name and description: 2px. Minimal preset: no labels rendered."
+    }
+  },
+  "accessibility": {
+    "role": "list",
+    "aria-label": "Progress steps",
+    "announcements": [
+      "Step {number} of {total}: {name} — {completed|active|upcoming}",
+      "Step {name} completed",
+      "Now on step {number}: {name}",
+      "Navigated back to step {number}: {name}"
+    ],
+    "keyboard": [
+      "Tab: move focus between clickable completed steps",
+      "Enter: navigate to a completed step (if back-navigation enabled)",
+      "Arrow Left/Up: focus previous step (if navigable)",
+      "Arrow Right/Down: focus next step (if navigable)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Horizontal preset collapses to show only the active step circle with label, plus small dots for other steps (like minimal preset) if more than 4 steps. Vertical preset remains full but with reduced label max-width (140px). Minimal preset stays the same. Step circles reduce to 32px horizontal. Connector lines shorten.",
+    "tablet": "Horizontal preset shows all steps with labels truncated to 80px max-width. Vertical preset renders fully with descriptions. Circle size remains standard. Touch targets for clickable completed steps are 44px minimum.",
+    "desktop": "Full stepper with all labels visible. Horizontal labels can expand to 120px. Vertical descriptions show up to 2 lines. Hover effects on clickable completed steps (scale 1.05 on the circle, underline on label). Pulse animation on active step is smooth at 60fps."
+  },
+  "motion": {
+    "micro": {
+      "step-hover": "scale 1→1.05 on circle, 150ms ease (completed steps only)",
+      "dot-hover": "scale 1→1.2, 150ms ease (minimal preset)"
+    },
+    "transitions": {
+      "step-complete": "circle background color muted→accent 300ms ease + number fades out and checkmark fades in 200ms + connector color muted→accent 300ms ease",
+      "step-activate": "circle background color muted→accent 300ms ease + pulse ring begins",
+      "step-deactivate": "pulse ring fades out 200ms"
+    },
+    "ambient": {
+      "active-pulse": "ring scale 1→1.3 + opacity 0.2→0, 2s ease-out infinite on the active step"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "StepList": "Container(role=list, flex) > [StepItem + StepConnector]* + StepItem(last)",
+    "StepItem": "Item(d-interactive?, flex-col|flex-row) > [StepIcon + StepLabel]",
+    "StepIcon": "Circle(36px|32px|10px, state-driven-colors) > [Checkmark(completed) | Number(active|upcoming) | Dot(minimal)]",
+    "StepConnector": "Line(2px, solid|dashed, accent|muted, flex-1|fixed-height)",
+    "StepLabel": "Text(text-sm, below|beside circle) > [Name + Description?(vertical only)]"
+  }
+}

package/patterns/storefront-hero.json

@@ -0,0 +1,120 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "storefront-hero",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Storefront Hero",
+  "description": "Creator landing page banner with cover image, avatar, bio, social links, and subscribe CTA. The first impression for fans.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Avatar",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full hero with cover image and all details",
+      "components": [
+        "Button",
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col",
+        "slots": {
+          "cover": "Banner/cover image area",
+          "avatar": "Creator profile photo",
+          "name": "Creator display name with verification badge",
+          "tagline": "Short bio/description",
+          "social": "Social media links",
+          "stats": "Subscriber count, post count",
+          "cta": "Primary subscribe button"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Compact header-style hero without cover image, showing avatar, name, and subscribe button inline",
+      "components": [
+        "Button",
+        "Avatar",
+        "icon"
+      ],
+      "layout": {
+        "layout": "inline",
+        "atoms": "_flex _aic _gap4 _p4 _borderB",
+        "slots": {
+          "avatar": "Small avatar",
+          "name": "Creator name",
+          "cta": "Subscribe button"
+        }
+      }
+    },
+    "video": {
+      "description": "Video background hero with autoplaying muted loop, content overlay, and gradient scrim",
+      "components": [
+        "Button",
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _relative",
+        "slots": {
+          "video": "Background video",
+          "overlay": "Content overlay",
+          "avatar": "Creator avatar",
+          "content": "Name, bio, CTA"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col",
+    "slots": {
+      "cover": "Cover image",
+      "avatar": "Creator avatar",
+      "content": "Name, bio, stats",
+      "cta": "Subscribe action"
+    }
+  },
+  "io": {
+    "produces": [
+      "subscribe-click",
+      "share-click"
+    ],
+    "consumes": [
+      "creator-data"
+    ]
+  },
+  "visual_brief": "Full-width hero banner with a large cover image filling the background (or a gradient if no image). A large circular avatar overlaps the bottom edge of the cover, centered or left-aligned. Below the avatar, the creator's display name as a large heading, a short bio paragraph, social link icons (Twitter, YouTube, Instagram, etc.), and subscriber/follower count. A prominent 'Subscribe' CTA button sits on the right or below the bio. The minimal preset removes the cover image and uses a colored background. The video preset replaces the cover image with an autoplaying muted video loop.",
+  "responsive": {
+    "mobile": "Cover image height reduces. Avatar centers above the name. Bio text wraps fully. Social links in a compact icon row. Subscribe button goes full-width.",
+    "tablet": "Standard hero proportions. Avatar and text left-aligned. Subscribe button inline.",
+    "desktop": "Full-width hero with generous cover height. Avatar, bio, social links, and subscribe button all comfortably laid out."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "StorefrontHero": "Section(d-section, full-width) > [CoverImage(full-bleed) + ProfileRow + SocialLinks?]",
+    "ProfileRow": "Row(centered, gap-4) > [Avatar(large, border) + InfoColumn > [CreatorName(heading2) + Bio(text-muted) + StatsRow > [FollowerCount + PostCount]] + SubscribeCTA(d-interactive, variant: primary)]"
+  }
+}

package/patterns/stretch-goal-ladder.json

@@ -0,0 +1,128 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "stretch-goal-ladder",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Stretch Goal Ladder",
+  "description": "Campaign milestone ladder for unlocked, active, and upcoming stretch goals with playful retro progress states.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "stretch-goals",
+    "milestones",
+    "progress",
+    "launch",
+    "rewards"
+  ],
+  "components": [
+    "Progress",
+    "Badge",
+    "icon",
+    "Tooltip"
+  ],
+  "contained": false,
+  "default_preset": "level-map",
+  "presets": {
+    "level-map": {
+      "description": "Horizontal level-select path with milestone gates, unlock labels, and progress connector.",
+      "components": [
+        "Progress",
+        "Badge",
+        "icon",
+        "Tooltip"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap6 _wfull _maxw[76rem] _mx[auto]",
+        "slots": {
+          "goal-node": "Milestone gate with amount/signup target, unlock title, and state.",
+          "connector": "Segmented path line showing current campaign progress.",
+          "active-goal": "Current next unlock emphasized with larger label and CTA note.",
+          "legend": "Unlocked, next, and locked state labels."
+        }
+      }
+    },
+    "vertical-unlocks": {
+      "description": "Mobile-friendly vertical milestone ladder with locked/unlocked states and short notes for each unlock.",
+      "components": [
+        "Progress",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _wfull _maxw[42rem] _mx[auto]",
+        "slots": {
+          "goal-row": "Milestone row with target, status icon, unlock title, and description.",
+          "progress-spine": "Vertical connector line between milestones.",
+          "current-marker": "You are here marker for active milestone."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap6 _wfull _maxw[76rem] _mx[auto]",
+    "slots": {
+      "goal-node": "Milestone gate",
+      "connector": "Segmented unlock path",
+      "active-goal": "Current next unlock summary",
+      "legend": "State labels"
+    }
+  },
+  "visual_brief": "A retro level-select path for campaign stretch goals. Milestones should look like unlock gates or level nodes, not ordinary timeline cards. Use clear states for unlocked, current, and locked. The active goal should tell visitors what happens next if they back or share.",
+  "responsive": {
+    "mobile": "Switch to a vertical ladder with large tap targets and no cramped angled text.",
+    "tablet": "Use a wrapped path with two rows if there are more than four goals.",
+    "desktop": "Horizontal level map with connector line and active-goal summary alongside or below."
+  },
+  "layout_hints": {
+    "state_clarity": "Do not rely on color alone. Use labels and icons for locked/unlocked/current.",
+    "goal_copy": "Each goal should explain the backer benefit, not just the internal milestone.",
+    "path_role": "The ladder should create momentum and shared mission, not just list features."
+  },
+  "motion": {
+    "micro": {
+      "unlock": "node flashes accent color once, then settles into unlocked state",
+      "hover": "current node lifts by 2px with hard shadow"
+    },
+    "transitions": {
+      "path-fill": "connector progresses from left to right or top to bottom over 600ms"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "hover-reveal",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "StretchGoalLadder": "Section > [Header + LevelMap + ActiveGoal + Legend]",
+    "LevelMap": "Path > GoalNode[]",
+    "GoalNode": "Target + UnlockTitle + StateBadge + DetailTooltip?"
+  },
+  "accessibility": {
+    "role": "list",
+    "aria-label": "Campaign stretch goals",
+    "keyboard": [
+      "Tab moves through goal nodes when they expose detail tooltips.",
+      "Enter opens goal detail when available."
+    ],
+    "announcements": [
+      "Stretch goal unlocked: {goal}.",
+      "Next stretch goal: {goal} at {target}."
+    ]
+  },
+  "io": {
+    "consumes": [
+      "stretch-goals",
+      "campaign-progress"
+    ],
+    "produces": [
+      "next-unlock-awareness"
+    ],
+    "actions": [
+      "goal-detail-open"
+    ]
+  }
+}

package/patterns/subscriber-list.json

@@ -0,0 +1,135 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "subscriber-list",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Subscriber List",
+  "description": "Fan/subscriber management table with filtering, search, sorting, and bulk actions. Export and messaging capabilities.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Avatar",
+        "Checkbox",
+        "Select",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Input",
+    "Badge",
+    "Avatar",
+    "Checkbox",
+    "Select",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full data table with all subscriber info",
+      "components": [
+        "Button",
+        "Card",
+        "Input",
+        "Badge",
+        "Avatar",
+        "Checkbox",
+        "Select",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4",
+        "slots": {
+          "filters": "Tier, date, status filters",
+          "search": "Subscriber search input",
+          "table": "Subscriber data rows",
+          "pagination": "Page navigation controls",
+          "bulk-actions": "Mass action buttons"
+        }
+      }
+    },
+    "compact": {
+      "description": "Responsive card grid view with subscriber info cards optimized for mobile and touch interactions",
+      "components": [
+        "Card",
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _md:gc2 _gap4",
+        "slots": {
+          "cards": "Subscriber info cards"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4",
+    "slots": {
+      "filters": "Filter controls",
+      "table": "Subscriber table",
+      "pagination": "Page controls"
+    }
+  },
+  "io": {
+    "produces": [
+      "subscriber-selected",
+      "export-triggered"
+    ],
+    "consumes": [
+      "subscriber-data",
+      "tier-data"
+    ]
+  },
+  "visual_brief": "Data table of subscribers/fans with columns: checkbox (for bulk select), avatar, display name, email, subscription tier badge, joined date, status badge (active, cancelled, paused), and a kebab menu for actions. A header bar contains search input, tier filter dropdown, status filter, and bulk action buttons (message, export). A pagination bar at the bottom shows page controls and total count. The compact preset removes the avatar column and reduces row height.",
+  "responsive": {
+    "mobile": "Table becomes a card list — each subscriber as a card with avatar, name, tier, and status. Bulk actions move to a bottom action bar. Filters collapse to a filter button.",
+    "tablet": "Table with horizontal scroll. Search and primary filters visible. Checkboxes and bulk actions functional.",
+    "desktop": "Full table with all columns visible. Filters, search, and bulk actions in a single toolbar row."
+  },
+  "layout_hints": {
+    "list_priority": "Subscriber identity, tier, and lifecycle state should be easy to scan before bulk actions or export workflows enter the picture.",
+    "selection_discipline": "Bulk action controls should only rise in prominence once selection exists. Until then, the table remains the primary surface.",
+    "card_translation": "Card mode should preserve the same subscriber hierarchy as the table so mobile users do not lose account or tier context."
+  },
+  "motion": {
+    "micro": "Selected rows, status badges, and bulk actions may brighten subtly to confirm state changes.",
+    "transitions": "Filtering, sorting, and pagination should preserve orientation and list trust, especially for managers working through large subscriber sets."
+  },
+  "interactions": [
+    "click-select",
+    "hover-reveal",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Subscriber list",
+    "keyboard": [
+      "Search, filters, row selection, and per-subscriber actions should be reachable in a clear operational order."
+    ],
+    "announcements": [
+      "Subscriber name, tier, joined date, and status should be exposed semantically so both table and card variants remain understandable without relying on badge styling alone."
+    ]
+  },
+  "composition": {
+    "SubscriberList": "Container(d-section, flex-col, gap-4) > [Toolbar + SubscriberTable + Pagination + BulkActions?]",
+    "Toolbar": "Row(d-control) > [SearchInput(d-control) + TierFilter(d-control) + StatusFilter(d-control) + ExportButton(d-interactive)]",
+    "SubscriberTable": "Table(d-data) > SubscriberRow[]",
+    "SubscriberRow": "Row(d-data-row) > [Checkbox(d-control) + Avatar + Name(font-medium) + Email(text-muted) + TierBadge(d-annotation) + JoinDate + StatusBadge(d-annotation) + ActionsMenu(d-interactive)]",
+    "BulkActions": "Bar(d-control, sticky-bottom) > [SelectedCount + MessageButton(d-interactive) + ExportButton(d-interactive)]"
+  }
+}