@decantr/content 3.8.0

package/patterns/backer-wall-ticker.json

@@ -0,0 +1,127 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "backer-wall-ticker",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Backer Wall Ticker",
+  "description": "Social-proof ticker and supporter wall for campaign backers, waitlist joins, referrals, quotes, cities, or recent pledge activity.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "backers",
+    "social-proof",
+    "ticker",
+    "launch",
+    "referrals"
+  ],
+  "components": [
+    "Avatar",
+    "Badge",
+    "Marquee",
+    "Toast",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "ticker-wall",
+  "presets": {
+    "ticker-wall": {
+      "description": "Horizontal ticker rows mixed with supporter wall segments for recent pledge activity and testimonials.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "Marquee",
+        "Toast",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _wfull _maxw[78rem] _mx[auto]",
+        "slots": {
+          "ticker-row": "Scrolling or static row of recent backer events.",
+          "supporter-grid": "Dense supporter names, avatars, locations, or quotes.",
+          "proof-summary": "Short trust summary tying backer activity to campaign momentum.",
+          "share-action": "Optional referral or share CTA."
+        }
+      }
+    },
+    "static-wall": {
+      "description": "Reduced-motion friendly static supporter wall with grouped names, quotes, and pledge badges.",
+      "components": [
+        "Avatar",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap3 _wfull _maxw[72rem] _mx[auto]",
+        "slots": {
+          "supporter-tile": "Small supporter entry with name, pledge, location, or quote.",
+          "proof-summary": "Campaign momentum note."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _wfull _maxw[78rem] _mx[auto]",
+    "slots": {
+      "ticker-row": "Recent backer activity ticker",
+      "supporter-grid": "Supporter wall",
+      "proof-summary": "Momentum summary",
+      "share-action": "Optional referral/share CTA"
+    }
+  },
+  "visual_brief": "A lively but legible social-proof surface. The ticker should feel like an arcade scoreboard or receipt roll of new supporters, not a noisy ad marquee. Respect reduced motion by switching to a static wall. Supporter content should build trust through real names, roles, cities, quotes, or pledge levels.",
+  "responsive": {
+    "mobile": "Use a static or very slow single-row ticker plus compact supporter list. Avoid tiny unreadable marquee text.",
+    "tablet": "Two ticker rows or static grouped wall.",
+    "desktop": "Ticker rows can span full width with supporter wall or proof summary below."
+  },
+  "layout_hints": {
+    "motion_safety": "Auto-scrolling must pause on hover/focus and disable under reduced motion.",
+    "proof_quality": "Prefer fewer meaningful supporter signals over endless anonymous names.",
+    "privacy": "Support anonymous backer states and avoid exposing sensitive pledge amounts unless explicitly public."
+  },
+  "motion": {
+    "ambient": {
+      "ticker": "slow horizontal scroll with pause on hover and reduced-motion static fallback",
+      "new-backer": "brief highlight pulse when a new supporter appears"
+    }
+  },
+  "interactions": [
+    "hover-reveal",
+    "click-select",
+    "real-time-updates",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "BackerWallTicker": "Section > [TickerRow[] + SupporterGrid + ProofSummary + ShareAction?]",
+    "TickerRow": "MarqueeOrStaticList > BackerEvent[]",
+    "BackerEvent": "Name + Action + RewardOrLocation + Time"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Campaign supporter activity",
+    "keyboard": [
+      "Ticker pause control must be keyboard reachable when auto-scroll is active.",
+      "Animated updates should not steal focus."
+    ],
+    "announcements": [
+      "New supporter: {name} backed {tier}."
+    ],
+    "focus_management": "Do not continuously announce ticker movement. Announce only meaningful new events."
+  },
+  "io": {
+    "consumes": [
+      "backer-events",
+      "supporter-quotes"
+    ],
+    "produces": [
+      "social-proof"
+    ],
+    "actions": [
+      "ticker-pause",
+      "share-click"
+    ]
+  }
+}

package/patterns/before-after.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "before-after",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Before After",
+  "description": "Side-by-side comparison section showing two states: without and with the product. Visualizes drift and inconsistency on one side versus consistency and alignment on the other. Useful for demonstrating value through contrast, with browser-frame mockups or card-based layouts.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge"
+  ],
+  "contained": false,
+  "default_preset": "browser-frames",
+  "presets": {
+    "browser-frames": {
+      "description": "Two-column grid comparing 'without' (left, warm/red gradient cards) and 'with' (right, cool/green gradient cards). Each column has a label and 3 stacked browser-frame mockups showing progressive states. Without-side shows drift: inconsistent layouts, varying spacing, mismatched components. With-side shows consistency: uniform structure, aligned elements. Includes a 'Zero Drift' pill badge on the with-side.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap12 _mw[920px] _mx[auto]",
+        "slots": {
+          "without-label": "Column label with _fs[0.85rem] _fw700 _uppercase _ls[0.08em] _mb4 _text[center], typically 'Without [Product]' in warm/red tone",
+          "without-frames": "3 stacked browser-frame mockup cards with warm gradient background (coral to pink). Each card has: a browser chrome bar with 3 dots and a label, followed by mock content blocks (varying heights and widths to show inconsistency). Cards use _rounded[14px] _p5 _mb4. Each successive frame shows increasing drift in layout.",
+          "with-label": "Column label with _fs[0.85rem] _fw700 _uppercase _ls[0.08em] _mb4 _text[center], typically 'With [Product]' in cool/green tone",
+          "with-frames": "3 stacked browser-frame mockup cards with cool gradient background (cyan to green). Each card has: a browser chrome bar with 3 dots and a label, followed by uniform mock content blocks (consistent heights and widths). Cards use _rounded[14px] _p5 _mb4. Includes a 'Zero Drift' Badge pill at the bottom: _inline _px4 _py1 _rounded[20px] _bggreen _fgdark _fs[0.72rem] _fw700 _uppercase."
+        }
+      }
+    },
+    "split-cards": {
+      "description": "Two columns of simple comparison cards without browser chrome. Left column uses warm-toned cards with labels showing the 'before' state. Right column uses cool-toned cards with labels showing the 'after' state. Simpler visual treatment focused on content comparison rather than browser mockups.",
+      "components": [
+        "Card",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc2 _gap12 _mw[920px] _mx[auto]",
+        "slots": {
+          "without-label": "Column header label with warm color, uppercase, centered",
+          "without-frames": "Stacked Card components with warm gradient backgrounds, each containing a drift-label and mock content showing inconsistent layouts",
+          "with-label": "Column header label with cool color, uppercase, centered",
+          "with-frames": "Stacked Card components with cool gradient backgrounds, each containing a consistency-label and mock content showing uniform layouts. Includes Zero Drift Badge."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc2 _gap12 _mw[920px] _mx[auto]",
+    "slots": {
+      "without-label": "Before/without column label",
+      "without-frames": "3 progressive state mockups showing drift",
+      "with-label": "After/with column label",
+      "with-frames": "3 consistent state mockups showing alignment"
+    }
+  },
+  "io": {
+    "consumes": [],
+    "produces": [],
+    "actions": []
+  },
+  "visual_brief": "Two-column comparison layout with a 'Without' column on the left and a 'With' column on the right. Each column has a label header and contains three progressive state mockups. The left side shows inconsistent, drifting UI states with misaligned elements and clashing styles. The right side shows clean, consistent, aligned UI states. Browser-frames preset wraps each mockup in a browser chrome frame with address bar and window controls. Split-cards preset uses bordered cards instead. A subtle vertical divider or gap separates the two columns.",
+  "responsive": {
+    "mobile": "Columns stack vertically — 'Without' section on top, 'With' section below. Mockup frames scale to full width. Label headers become more prominent to maintain the comparison narrative.",
+    "tablet": "Side-by-side layout maintained with reduced mockup sizes. Gap between columns tightens.",
+    "desktop": "Full two-column layout with generous spacing. Mockup frames at comfortable viewing size."
+  },
+  "layout_hints": {
+    "comparison_priority": "The contrast between drift and consistency should be obvious before the user studies individual frames. Column labels and overall left-right logic must stay unmistakable.",
+    "frame_rhythm": "Mockups should line up in a steady comparative rhythm so the viewer understands progression rather than seeing two unrelated stacks of cards.",
+    "mobile_translation": "When stacked, preserve the narrative order clearly so the user still reads the comparison as before-versus-after, not as two separate sections."
+  },
+  "motion": {
+    "micro": "Hovered frames may sharpen slightly and the active comparison side may brighten enough to reinforce the contrast.",
+    "transitions": "Any reveal or scroll-based entry should preserve the comparison frame rather than staggering the two sides independently."
+  },
+  "interactions": [
+    "drag-reorder",
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Before and after comparison",
+    "keyboard": [
+      "If frames are interactive, focus should move through the comparison in a predictable without-first, with-second order."
+    ],
+    "announcements": [
+      "Column labels and the intended contrast between inconsistent and consistent states should be exposed semantically, not only through color or position."
+    ]
+  }
+}

package/patterns/block-toolbar.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "block-toolbar",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Block Toolbar",
+  "description": "Floating formatting toolbar that appears on text selection. Provides quick access to text formatting, links, and comments.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Input",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Input",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Common formatting options with link and comment",
+      "components": [
+        "Button",
+        "Input",
+        "icon"
+      ],
+      "layout": {
+        "layout": "floating",
+        "atoms": "_absolute _flex _aic _gap0.5 _p1 _bg[var(--surface)] _shadow _r2 _border _z[100]",
+        "slots": {
+          "format-buttons": "Bold, italic, underline, strikethrough",
+          "link-button": "Insert/edit link",
+          "comment-button": "Add inline comment",
+          "more-menu": "Additional options dropdown"
+        }
+      }
+    },
+    "extended": {
+      "description": "All formatting options including text color",
+      "components": [
+        "Button",
+        "Input",
+        "icon"
+      ],
+      "layout": {
+        "layout": "floating",
+        "atoms": "_absolute _flex _aic _gap0.5 _p1 _bg[var(--surface)] _shadow _r2 _border _z[100]",
+        "slots": {
+          "format-buttons": "Full formatting options",
+          "color-picker": "Text and highlight color",
+          "alignment": "Text alignment options",
+          "link-button": "Insert/edit link",
+          "comment-button": "Add inline comment"
+        }
+      }
+    },
+    "minimal": {
+      "description": "Stripped-down toolbar with only bold, italic, and link formatting for simple text editing",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "floating",
+        "atoms": "_absolute _flex _aic _gap0.5 _p1 _bg[var(--surface)] _shadow _r2 _border _z[100]",
+        "slots": {
+          "format-buttons": "Bold, italic only",
+          "link-button": "Link button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "floating",
+    "atoms": "_absolute _flex _aic _gap0.5 _p1 _bg[var(--surface)] _shadow _r2 _border _z[100]",
+    "slots": {
+      "format-buttons": "Bold, italic, underline, strikethrough, code",
+      "link-button": "Insert/edit link with URL input",
+      "highlight-button": "Text highlight color picker",
+      "comment-button": "Add inline comment to selection",
+      "more-menu": "Additional formatting options dropdown"
+    }
+  },
+  "io": {
+    "consumes": [
+      "position",
+      "activeFormats"
+    ],
+    "produces": [
+      "format",
+      "link",
+      "comment"
+    ],
+    "actions": [
+      "format-bold",
+      "format-italic",
+      "format-underline",
+      "format-strike",
+      "format-code",
+      "insert-link",
+      "add-comment",
+      "highlight"
+    ]
+  },
+  "visual_brief": "Floating horizontal toolbar that appears above or near selected text. Rendered as a compact pill-shaped bar with a subtle shadow and surface background. Contains a row of small icon buttons: bold (B), italic (I), underline (U), strikethrough (S), code, link, highlight color picker, and comment. Buttons show active state with a filled background when the corresponding format is applied. The toolbar positions itself dynamically near the text selection with a small arrow pointing toward the selected content. Extended preset adds heading level, alignment, and list type buttons.",
+  "responsive": {
+    "mobile": "Toolbar renders full-width at the bottom of the screen as a fixed bar above the keyboard. Touch-friendly 44px button targets. Overflow actions collapse into a more menu.",
+    "tablet": "Floating toolbar near selection. Slightly larger touch targets than desktop.",
+    "desktop": "Floating toolbar tracks text selection precisely. Compact button sizing with hover tooltips for labels."
+  },
+  "interactions": [
+    "hover-reveal",
+    "click-select",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "BlockToolbar": "Bar(d-control, floating, shadow, pill) > [FormatButtons + LinkButton + HighlightButton? + CommentButton? + MoreMenu?]",
+    "FormatButtons": "Group(d-interactive, gap-0.5) > IconButton(active?: filled-bg)[]",
+    "LinkButton": "IconButton(d-interactive) > LinkIcon",
+    "MoreMenu": "IconButton(d-interactive) > DropdownIcon"
+  }
+}

package/patterns/blueprint-anatomy.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "blueprint-anatomy",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Blueprint Anatomy",
+  "description": "Explanatory breakdown of a Decantr blueprint contract. Shows sections, routes, features, patterns, guard rules, and generated context as a coherent system rather than a flat JSON file.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "Badge",
+        "CodeBlock",
+        "Accordion",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Card",
+    "Badge",
+    "CodeBlock",
+    "Accordion",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "explainer",
+  "presets": {
+    "explainer": {
+      "description": "Two-region anatomy layout: narrative component list on the left and a compact contract or context preview on the right.",
+      "components": [
+        "Card",
+        "Badge",
+        "CodeBlock",
+        "Accordion",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc[0.9fr_1.1fr] _gap6",
+        "slots": {
+          "anatomy-list": "Stack of contract parts with icon, title, and one-sentence purpose.",
+          "contract-preview": "Code or structured preview focused on the selected part.",
+          "part-badges": "Small badges for route, section, feature, guard, pack, or pattern.",
+          "explanation": "Short prose that connects the part to generated AI context."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _lg:gc[0.9fr_1.1fr] _gap6",
+    "slots": {
+      "anatomy-list": "Blueprint parts",
+      "contract-preview": "JSON or context preview",
+      "part-badges": "Part category badges",
+      "explanation": "Why this part matters"
+    }
+  },
+  "visual_brief": "A contract explanation surface that makes Decantr feel like an intelligent system. It should turn blueprint JSON into a readable mental model: routes, sections, patterns, guard rules, and generated context. The UI should be polished and educational but still operational, with code previews kept tight and legible.",
+  "responsive": {
+    "mobile": "Single-column anatomy list followed by previews. Accordions are acceptable to prevent long scroll walls.",
+    "tablet": "Single-column or two-column if the preview remains readable.",
+    "desktop": "Two-region layout with sticky or persistent preview when helpful."
+  },
+  "layout_hints": {
+    "mental_model": "Explain relationships, not just fields. The user should understand how a blueprint feeds context, health, and implementation.",
+    "preview_size": "Code previews should be cropped or focused. Avoid dumping an entire essence file into this pattern.",
+    "part_order": "Recommended order: purpose, sections, routes, patterns, features, guard rules, generated packs."
+  },
+  "motion": {
+    "micro": "Selecting an anatomy part can update the preview with a subtle cross-fade.",
+    "transitions": "Avoid complex animation in code regions; legibility wins."
+  },
+  "interactions": [
+    "click-select",
+    "keyboard-navigation",
+    "hover-tooltip"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Blueprint anatomy",
+    "keyboard": [
+      "Selectable anatomy parts should be reachable in logical order and update the preview without losing focus."
+    ],
+    "announcements": [
+      "Preview changes should expose the selected anatomy part name."
+    ],
+    "focus_management": "If using tabs or accordions, preserve standard keyboard behavior."
+  },
+  "composition": {
+    "BlueprintAnatomy": "Grid > [AnatomyList + ContractPreview]",
+    "AnatomyList": "Stack > AnatomyPart[]",
+    "AnatomyPart": "ButtonOrDisclosure > [Icon + Title + Purpose + Badges]",
+    "ContractPreview": "CodeBlockOrStructuredPanel(selectedPart)"
+  },
+  "io": {
+    "consumes": [
+      "blueprint-contract"
+    ],
+    "produces": [
+      "selected-contract-part"
+    ],
+    "actions": [
+      "part-select",
+      "copy-snippet"
+    ]
+  }
+}

package/patterns/blueprint-launch-hero.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "blueprint-launch-hero",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Blueprint Launch Hero",
+  "description": "First-viewport registry hero for blueprint discovery pages. It introduces Decantr's blueprint catalog with a strong product signal, concise positioning, search or browse actions, and a compact proof row for counts, freshness, or workflow coverage.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Badge",
+        "Search",
+        "KPI",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Badge",
+    "Search",
+    "KPI",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "registry",
+  "presets": {
+    "registry": {
+      "description": "Product-forward registry hero with eyebrow, headline, concise value copy, primary browse/search action, secondary CLI action, and a proof row of compact metrics.",
+      "components": [
+        "Button",
+        "Badge",
+        "Search",
+        "KPI",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _wfull _maxw[76rem] _mx[auto]",
+        "slots": {
+          "eyebrow": "Small d-label marker for the registry surface or selected namespace.",
+          "headline": "Literal offer or catalog name. Keep it concrete: Blueprint Registry, Launch With Decantr, or Official Blueprints.",
+          "supporting-copy": "Two-to-three sentence value prop that explains what the blueprint helps a builder ship.",
+          "action-row": "Primary browse/search CTA plus a secondary command or docs CTA.",
+          "proof-row": "Compact stat chips for blueprint count, supported workflows, update recency, or official/community split."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _wfull _maxw[76rem] _mx[auto]",
+    "slots": {
+      "eyebrow": "Registry namespace or catalog label",
+      "headline": "Blueprint launch headline",
+      "supporting-copy": "Concise product explanation",
+      "action-row": "Search, browse, or CLI actions",
+      "proof-row": "Compact registry proof metrics"
+    }
+  },
+  "visual_brief": "A confident first-viewport registry hero that feels like an enterprise product surface rather than a marketing splash. The Decantr registry and blueprint catalog should be immediately legible. Use crisp type, restrained proof metrics, and a search or command action that feels operational. Avoid decorative hero cards or vague atmospheric art; this hero should help builders decide what to inspect next.",
+  "responsive": {
+    "mobile": "Single-column stack with headline first, supporting copy second, actions wrapping into full-width buttons, and proof metrics in a two-column or horizontally scrollable strip.",
+    "tablet": "Hero copy and actions remain stacked with a wider proof row. Search can expand to full width.",
+    "desktop": "Wide editorial hero with actions and proof row aligned below the copy. Keep enough vertical restraint that the next registry section is visible."
+  },
+  "layout_hints": {
+    "first_viewport": "The catalog identity must be visible in the first viewport. Do not bury the blueprint signal in an eyebrow only.",
+    "action_priority": "Primary action should move to browse/search. Secondary action can expose a CLI command or docs link.",
+    "proof_density": "Use three to five proof metrics maximum. Metrics should validate catalog usefulness, not become dashboard chrome."
+  },
+  "motion": {
+    "micro": "Actions and proof chips may brighten on hover or focus. Keep motion short and functional.",
+    "transitions": "Hero content can fade in with a subtle stagger, but search and command affordances should be instantly usable."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "click-select",
+    "keyboard-navigation"
+  ],
+  "accessibility": {
+    "role": "banner",
+    "aria-label": "Blueprint registry introduction",
+    "keyboard": [
+      "Search and action controls should be reachable immediately after the skip link or primary navigation."
+    ],
+    "announcements": [
+      "Headline, supporting copy, and proof metrics should remain meaningful without visual-only badges."
+    ],
+    "focus_management": "Focus styles on search and CTAs should match hover intensity and remain visible on dark surfaces."
+  },
+  "composition": {
+    "BlueprintLaunchHero": "Hero(banner) > [Eyebrow + Headline + SupportingCopy + ActionRow + ProofRow]",
+    "ActionRow": "Flex(wrap) > [PrimaryBrowseOrSearch + SecondaryCommandOrDocs]",
+    "ProofRow": "GridOrRail(compact) > MetricChip[]"
+  },
+  "io": {
+    "consumes": [],
+    "produces": [
+      "catalog-intent"
+    ],
+    "actions": [
+      "search",
+      "browse-click",
+      "command-copy"
+    ]
+  }
+}