@decantr/content 3.8.0

package/patterns/notebook-entry.json

@@ -0,0 +1,129 @@
+{
+  "id": "notebook-entry",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Notebook Entry",
+  "description": "An electronic lab notebook (ELN) entry card combining rich text, embedded images, LaTeX-rendered formulas, timestamp-chained edit history, and reviewer annotations for scientific record-keeping and witness-signing compliance.",
+  "category": "science",
+  "tags": [
+    "2026",
+    "science",
+    "eln",
+    "notebook",
+    "lab",
+    "record",
+    "witness",
+    "rich-text"
+  ],
+  "components": [
+    "EntryHeader",
+    "RichContent",
+    "ImageEmbed",
+    "FormulaBlock",
+    "TimestampChain",
+    "ReviewerNote",
+    "TextBlock",
+    "SignatureBlock",
+    "AuthorAvatar"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full rich-entry rendering with header, body content (text/images/formulas/tables), timestamp chain, and signature block. Intended as the primary reading view for lab notebook entries in research ELN systems.",
+      "layout": {
+        "layout": "document",
+        "atoms": "_w100 _grid _gap4 _p6 _max-w-820"
+      }
+    },
+    "minimal": {
+      "description": "Text-only collapsed rendering suitable for linked-entry preview cards and search results. Hides images and formulas, shows only header metadata and a truncated text body with expand-to-read action.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_w100 _grid _gap2 _p4 _max-w-640"
+      }
+    },
+    "review": {
+      "description": "Review-mode rendering with reviewer annotation marginalia visible alongside the entry body. ReviewerNotes render as yellow sticky-note cards in the right margin anchored to the text range they annotate.",
+      "layout": {
+        "layout": "document",
+        "atoms": "_w100 _grid _grid-cols-[1fr_240px] _gap4 _p6 _max-w-1040"
+      }
+    }
+  },
+  "visual_brief": "A lab-notebook entry rendered as a d-surface document with a thin left accent border and generous padding reflecting the feel of a bound laboratory notebook page. The EntryHeader at the top shows: a DateBadge pill with full date and time ('April 5, 2026 — 14:23'), an experiment-ID chip ('EXP-2026-042'), and an AuthorAvatar (32px circle) with author name and role beneath. A title in text-2xl semibold follows ('Protein Expression Optimization — Trial 3'). A horizontal rule separates header from body. The RichContent body flows in a newspaper-column-inspired layout with readable line-height (1.6) and max-width 70ch. TextBlocks render as paragraphs with proper typography. ImageEmbeds appear as centered figures with thin borders, captions beneath ('Figure 1: SDS-PAGE gel showing lane 1-6 expressed protein') in text-sm italic, and click-to-enlarge behavior opening a full-resolution lightbox. FormulaBlocks render mathematical expressions via LaTeX (e.g., 'OD600 = log(I₀/I) × path-length') in a display-math style with subtle gray background inset. Data tables render with monospaced headers and tabular-nums cells. The TimestampChain sits at the bottom of the entry showing edit-history as a horizontal chain: small timestamp pills connected with arrows ('Created 14:23 → Edited 15:47 → Edited 16:12'). Each pill shows user initial + time, hoverable for full diff. In review preset, ReviewerNotes render as yellow sticky-note cards in the right margin, anchored by thin connector lines to the text range they annotate, with reviewer avatar, note text, and 'resolve' button. A SignatureBlock at the very bottom shows the author signature (e.g., 'Signed: J. Chen 16:12 EDT') and when witnessed, a co-signer block ('Witnessed by: S. Park 17:04 EDT') with tamper-evident hash of the content. The entire entry becomes immutable after signing — further edits create a new dated revision.",
+  "layout_hints": {
+    "container": "d-surface document with left-accent border",
+    "note": "ELN entries are regulated scientific records (21 CFR Part 11 compliant). After signature, entries are immutable. Edits create new revisions with full diff preserved.",
+    "rich_content_width": "RichContent body max-width 70ch for readable line-length. Line-height 1.6. Paragraph spacing generous.",
+    "image_embed": "ImageEmbed figures centered with 1px border, 8px padding, and caption beneath in text-sm italic. Click opens lightbox at full resolution.",
+    "formula_block": "FormulaBlock uses MathJax/KaTeX rendering, display-math style. Inset gray background for visual distinction from body text.",
+    "timestamp_chain": "TimestampChain shows ALL edits with user+timestamp. Never hides revision history. Hoverable pills show diff of that edit.",
+    "signature_block": "SignatureBlock hashes entry content at time of signing for tamper-evidence. After witness co-signature, entry enters locked state (no further edits allowed, only appended revisions)."
+  },
+  "default_layout": {
+    "layout": "document",
+    "atoms": "_w100 _grid _gap4 _p6 _max-w-820",
+    "slots": {
+      "entry-header": "Top section with DateBadge, experiment-ID chip, AuthorAvatar + name + role, and entry title (text-2xl semibold). Horizontal rule separates header from body.",
+      "rich-content": "Main body content with mixed block types: TextBlocks (paragraphs), ImageEmbeds (figures with captions), FormulaBlocks (LaTeX math), tables, lists, quotes. Newspaper-column typography with max-width 70ch.",
+      "image-embeds": "Repeating sub-slot within rich-content. Figure elements with centered image, thin border, italic caption, and click-to-lightbox behavior. Numbered automatically (Figure 1, Figure 2...).",
+      "formula-blocks": "Repeating sub-slot within rich-content. LaTeX-rendered mathematical expressions in display-math style with subtle gray background.",
+      "timestamp-chain": "Horizontal chain of edit-history pills at bottom of entry. Each pill shows user initial + time, hoverable to reveal diff. Chain uses arrows connecting pills chronologically.",
+      "reviewer-notes": "Review-preset-only slot. Yellow sticky-note cards in right margin anchored by connector lines to annotated text ranges. Each note shows reviewer avatar, text, timestamp, and resolve action.",
+      "signature-block": "Footer at entry end showing author signature with timestamp and optional witness co-signature. Includes tamper-evidence content hash. Locks entry from further edits after witnessing."
+    }
+  },
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Laboratory notebook entry",
+    "announcements": [
+      "Entry by {author} from {date}, experiment {id}",
+      "Edited {count} times, last edit {timestamp}",
+      "Entry signed by {author} and witnessed by {witness}",
+      "New reviewer note on {range}"
+    ],
+    "keyboard": [
+      "J/K: navigate between entries",
+      "R: toggle review annotations",
+      "I: open images in lightbox",
+      "E: edit current entry (if unsigned)",
+      "S: sign entry (author) or witness (reviewer)"
+    ]
+  },
+  "responsive": {
+    "mobile": "Entry expands to full width with reduced padding. ReviewerNotes collapse into inline indicators that expand on tap. ImageEmbeds fit 100% width. FormulaBlocks allow horizontal scroll.",
+    "tablet": "Standard document at max-w-820px. Review preset maintains right margin ReviewerNotes at reduced 200px width."
+  },
+  "motion": {
+    "micro": {
+      "image-hover": "subtle shadow-lift 150ms ease-out",
+      "timestamp-hover": "pill brightens + expands 120ms ease-out",
+      "formula-hover": "background darkens subtly 150ms ease-out"
+    },
+    "transitions": {
+      "image-lightbox": "image scale + fade from thumbnail to fullscreen 300ms ease-out",
+      "note-resolve": "yellow note fade + slide-out 250ms ease-in",
+      "signature-lock": "border color shift to success + content dim 400ms ease-out"
+    },
+    "ambient": {
+      "unsigned-pulse": "SignatureBlock subtle amber tint pulse 2s ease-in-out infinite when entry unsigned"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "animate-on-mount",
+    "keyboard-navigation",
+    "hover-reveal"
+  ],
+  "composition": {
+    "NotebookEntry": "Surface(d-surface, document, border-left-accent) > [EntryHeader + RichContent + TimestampChain + ReviewerNote[]? + SignatureBlock]",
+    "EntryHeader": "Header(d-annotation) > [DateBadge + ExperimentIdChip + AuthorAvatar + EntryTitle]",
+    "RichContent": "Body(d-prose, max-w-70ch) > [TextBlock[] + ImageEmbed[] + FormulaBlock[] + DataTable[]]",
+    "ImageEmbed": "Figure(d-surface, bordered, data-interactive) > [Image + Caption + LightboxLink]",
+    "FormulaBlock": "Block(d-annotation, data-formula, mathjax) > [LatexExpression]",
+    "TimestampChain": "Chain(d-annotation, data-timestamp-history) > [TimestampPill[] > [UserInitial + TimeText] + ChainArrow[]]",
+    "ReviewerNote": "Card(d-surface, data-note, sticky-yellow, margin-right) > [ReviewerAvatar + NoteText + Timestamp + ResolveButton + AnchorLine]",
+    "SignatureBlock": "Block(d-annotation, data-signature, data-locked?) > [AuthorSignature + WitnessSignature? + ContentHash]"
+  }
+}

package/patterns/notification-center.json

@@ -0,0 +1,136 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "notification-center",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Notification Center",
+  "description": "Bell menu dropdown with notification list, category filtering, mark-all-read, and a preferences link for managing notification delivery.",
+  "category": "system",
+  "tags": [
+    "2026",
+    "notifications",
+    "bell",
+    "alerts",
+    "system",
+    "popover",
+    "toast",
+    "inbox"
+  ],
+  "components": [
+    "BellButton",
+    "NotificationList",
+    "NotificationItem",
+    "CategoryTabs",
+    "EmptyState",
+    "PreferencesLink",
+    "UnreadBadge"
+  ],
+  "default_preset": "dropdown",
+  "presets": {
+    "dropdown": {
+      "description": "Popover dropdown anchored to the bell icon — a 380px-wide floating panel with category tabs, notification list, and quick actions for desktop navigation bars",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _w-380 _max-h-480 _bg-surface _rounded-xl _shadow-xl _border _overflow-hidden"
+      }
+    },
+    "page": {
+      "description": "Full-page notification center with sidebar category navigation and expanded notification cards — for dedicated notification management screens",
+      "layout": {
+        "layout": "split",
+        "atoms": "_flex _row _h-full _bg-surface _gap-6 _p-6"
+      }
+    },
+    "toast-stack": {
+      "description": "Corner-anchored toast notification stack — ephemeral notifications that auto-dismiss, stacking vertically in the bottom-right or top-right corner of the viewport",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_fixed _bottom-4 _right-4 _flex _col-reverse _gap-2 _z-50 _w-380 _pointer-events-none"
+      }
+    }
+  },
+  "visual_brief": "The BellButton is a 40px icon button with a bell outline icon (20px). When unread notifications exist, a small filled circle badge (18px diameter) sits at the top-right corner of the bell, overlapping by 4px. The badge has a solid accent color background (var(--d-accent)) with white bold text (text-xs, font-bold) showing the unread count — numbers up to 99 display literally, above that shows '99+'. The badge has a subtle 2px white border (matching the background behind the bell) creating a cut-out effect. When clicked, the dropdown popover appears anchored below the bell with a small upward-pointing caret/triangle (8px) aligned to the bell icon. The popover is 380px wide with max-height 480px, background var(--d-bg-surface), border-radius 12px, a prominent shadow (0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08)), and a 1px border (var(--d-border-subtle)). The popover header has 'Notifications' title (text-base font-semibold) on the left and a 'Mark all read' text button (text-xs, text-accent, hover: underline) on the right, with 16px horizontal padding and 12px vertical padding. Below the header, CategoryTabs render as a horizontal tab bar: four tabs (All, Mentions, Updates, System) in text-sm, evenly spaced. The active tab has accent-colored text with a 2px bottom border in accent color. Inactive tabs are text-muted with hover: text-foreground. Below the tabs, the NotificationList scrolls vertically. Each NotificationItem is a horizontal row (padding: 12px 16px) with: a left-edge unread indicator (a 6px filled accent-colored circle, vertically centered, visible only for unread items — read items have no dot, creating a clear visual distinction), a source icon (24px, inside a 32px circle with muted background, representing the notification type: chat bubble for mentions, arrow-up for updates, gear for system, bell for general), a content column (flex: 1, margin-left 12px) with the notification title (text-sm font-medium, single line, truncated) and description (text-xs text-muted, max 2 lines with line-clamp-2), a right column with the relative timestamp (text-xs text-muted, e.g., '2m ago', '1h', 'Yesterday'), and on hover a dismiss X button (16px, text-muted, opacity 0→1 on row hover) that appears at the top-right of the right column. Unread items have a very subtle background tint (var(--d-accent) at 3% opacity). Clicking an item marks it as read (dot disappears with a fade) and navigates to the relevant content. The EmptyState shows when no notifications exist in the current category: a centered column with a large check-circle icon (48px, text-muted) and 'All caught up' heading (text-sm font-medium text-muted), with optional 'No new notifications' subtext (text-xs text-muted). At the bottom of the popover, a thin border-top separator and a full-width link row 'Notification preferences' (text-xs text-muted, centered, padding 10px, hover: text-foreground) leads to the settings page. In the toast-stack preset, each toast is a 380px-wide card (d-surface, border-radius 10px, shadow-lg, border) that slides in from the right, shows for 5 seconds, then slides out. Toasts stack vertically with the newest at the bottom. Each toast has: a left color strip (4px, accent for info, green for success, red for error, amber for warning), the source icon (20px), title (text-sm font-medium), message (text-xs text-muted, 1 line), timestamp, and a close X button.",
+  "layout_hints": {
+    "container": "popover-anchored",
+    "note": "The dropdown preset renders as a popover floating below the bell button, not as a page-level element. Use position: absolute or a portal to ensure correct z-index and positioning. The popover must dismiss on outside click or Escape.",
+    "bell_badge": "The unread count badge is CRITICAL for user attention. It must be clearly visible: filled accent background, white text, slight overlap on the bell icon. Use a 2px border matching the page background to create the 'cut-out' effect. Badge should animate with a subtle scale bounce when the count changes.",
+    "unread_dot": "The 6px unread indicator dot is the primary signal for unread state. It must be consistently positioned (left edge of each item) and use the accent color. When an item is marked as read, the dot should fade out (200ms) rather than disappear instantly.",
+    "notification_density": "Items should be compact but scannable. 12px vertical padding per item. The two-line description with line-clamp-2 prevents overly long notifications from dominating the list. Timestamps should use relative format ('2m', '1h', 'Yesterday') not absolute dates."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative",
+    "slots": {
+      "bell-button": "A 40px square icon button positioned in the app's navigation header. Renders a bell outline icon (20px). Hover state: background tint (var(--d-bg-muted)). Active/open state: background tint persists to indicate the dropdown is open. The UnreadBadge is positioned absolutely at top: -4px, right: -4px — an 18px diameter circle (min-width 18px for wider numbers) with background var(--d-accent), color white, text-xs font-bold, centered text, border: 2px solid var(--d-bg-surface) for the cut-out effect. Badge is hidden (display: none or scale-to-zero) when count is 0. When the count increases, the badge does a scale bounce animation (0→1.2→1.0, 300ms spring). When the count reaches 0, it shrinks away (1.0→0, 200ms ease-in).",
+      "notification-dropdown": "A 380px-wide floating popover panel anchored below the bell button. Background: var(--d-bg-surface). Border: 1px solid var(--d-border-subtle). Border-radius: 12px. Box-shadow: 0 8px 32px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.08). Max-height: 480px with internal scrolling on the notification list. A small upward-pointing caret (8px CSS triangle using border trick, background matching the popover surface, border-top and border-left matching the popover border) aligns with the bell button above. The popover has three vertical sections: header, tabs+list (scrollable), and footer. It appears with a scale+fade animation from the anchor point and dismisses on outside click, Escape key, or bell re-click.",
+      "dropdown-header": "Top section of the popover. Height 44px, padding 12px 16px, flex row, items center, justify between, border-bottom 1px solid var(--d-border-subtle). Left: 'Notifications' text (text-base font-semibold text-foreground). Right: 'Mark all read' button (text-xs text-accent font-medium, cursor pointer, hover: underline, opacity 0.7→1.0 on hover). The mark-all-read button is disabled (opacity 0.4, cursor default) when there are no unread notifications. On click, all unread dots fade out simultaneously with a satisfying 200ms cascade.",
+      "category-tabs": "A horizontal tab bar below the header. Height 36px, padding 0 16px, flex row, gap 0. Four tabs: All, Mentions, Updates, System. Each tab is a text-sm button with padding 8px 12px, flex: 1, text-center. Active tab: text-accent font-medium with a 2px bottom border in var(--d-accent), transitioning via a sliding underline animation (200ms ease-out). Inactive tabs: text-muted, hover: text-foreground. The tab bar has a border-bottom 1px solid var(--d-border-subtle). Tab counts can optionally show as small superscript numbers (text-xs, text-muted) beside each tab label.",
+      "notification-list": "Scrollable container (flex: 1, overflow-y: auto, max-height: ~340px within the popover) containing NotificationItem entries stacked vertically. Has a thin top hairline within each item for visual separation. Scrollbar is styled thin (4px width, rounded, semi-transparent). When scrolled, a subtle top shadow (box-shadow: inset 0 8px 8px -8px rgba(0,0,0,0.05)) indicates more content above.",
+      "notification-item": "Repeating slot — one per notification. A horizontal flex row, padding 12px 16px, gap 12px, items start. Hover: background var(--d-bg-muted). Unread items have background color-mix(in srgb, var(--d-accent) 3%, transparent). Left column: the unread dot (6px filled circle, var(--d-accent), margin-top 6px to align with title text, transition: opacity 200ms for read/unread toggle; invisible but occupying space when read to maintain alignment). Source icon column: a 32px circle with background var(--d-bg-muted), centered 20px icon representing notification type (chat-bubble-left for mentions in blue, arrow-path for updates in green, cog for system in gray, bell for general in accent). Content column (flex: 1, min-width 0 for truncation): title (text-sm font-medium text-foreground, white-space nowrap, overflow hidden, text-ellipsis), description (text-xs text-muted, line-clamp-2, margin-top 2px). Right column (flex-shrink 0, text-right): timestamp (text-xs text-muted, white-space nowrap, e.g., '2m ago', '1h', 'Yesterday'), dismiss X button (16px icon, text-muted, opacity 0, position absolute top-right of item, transition: opacity 150ms, hover: text-foreground; becomes opacity 1 when the parent item is hovered). The entire item is clickable, navigating to the source content.",
+      "empty-state": "Shown when the current category has zero notifications. A centered vertical flex column within the list area: a large check-circle outline icon (48px, text-muted at 50% opacity), 'All caught up' heading (text-sm font-medium text-muted, margin-top 12px), and 'No new notifications' subtext (text-xs text-muted, margin-top 4px). The empty state also shows a subtle illustration or decorative element if the design system supports it. This state should feel celebratory and clean, not broken or empty.",
+      "preferences-footer": "Anchored at the bottom of the popover. A full-width row with border-top 1px solid var(--d-border-subtle), padding 10px 16px, text-center. Contains a 'Notification preferences' link in text-xs text-muted with a small settings/gear icon (12px) to the left. Hover: text-foreground. Clicking navigates to the notification settings page. In page preset, this becomes a sidebar link or prominent section header."
+    }
+  },
+  "accessibility": {
+    "role": "dialog",
+    "aria-label": "Notification center",
+    "announcements": [
+      "Notification center opened, {count} unread notifications",
+      "New notification: {title}",
+      "Notification marked as read",
+      "All notifications marked as read",
+      "Notification dismissed"
+    ],
+    "keyboard": [
+      "Enter/Space on bell: toggle notification dropdown",
+      "Escape: close notification dropdown",
+      "Tab: move between header actions, tabs, and notification items",
+      "Arrow Up/Down: navigate between notification items",
+      "Enter on item: navigate to notification source",
+      "Delete on item: dismiss notification",
+      "Ctrl/Cmd+Shift+N: mark all as read"
+    ]
+  },
+  "responsive": {
+    "mobile": "Dropdown becomes a full-screen slide-up sheet (bottom sheet) with a drag handle at the top. Bell button remains in the navigation bar with the badge. Category tabs become horizontally scrollable. Notification items get larger tap targets (padding 16px). Dismiss X button is always visible (not hover-dependent). Swipe-left on an item reveals dismiss and mute actions. 'Mark all read' is in a top-right action menu. Toast notifications appear at the top of the screen instead of bottom-right, spanning full width with 8px horizontal margin.",
+    "tablet": "Dropdown renders at full 380px width anchored to the bell. Notification items maintain compact sizing. Category tabs show with counts. Toast stack appears in the top-right corner. Page preset uses a two-column layout: categories on the left (200px) and notification list on the right.",
+    "desktop": "Full dropdown experience with hover states, keyboard navigation, and dismiss-on-hover X buttons. Toast stack in bottom-right corner. Page preset shows full three-column layout (categories, list, detail preview). Notifications can be grouped by date (Today, Yesterday, This Week, Older) with sticky date headers."
+  },
+  "motion": {
+    "micro": {
+      "bell-ring": "Bell icon wiggles (rotate -15deg→15deg→-10deg→10deg→0) over 500ms when a new notification arrives, ease-out",
+      "badge-bounce": "Count badge scales 1.0→1.3→1.0 over 300ms spring when count changes",
+      "item-hover": "Background color transition 100ms ease-out",
+      "dismiss-reveal": "X button fades in (opacity 0→1) 150ms ease-out on item hover"
+    },
+    "transitions": {
+      "dropdown-open": "Popover scales from 0.95 to 1.0 + fade in, 200ms ease-out, transform-origin at the bell button anchor point",
+      "dropdown-close": "Popover scales to 0.95 + fade out, 150ms ease-in",
+      "read-dot-fade": "Unread dot fades from opacity 1→0 over 200ms ease-out when marked as read",
+      "mark-all-read": "All unread dots cascade-fade from top to bottom with 30ms stagger between items",
+      "toast-enter": "Toast slides in from right (translateX(100%)→0) + fade, 300ms spring(1, 90, 12)",
+      "toast-exit": "Toast slides out to right (0→translateX(100%)) + fade, 200ms ease-in"
+    },
+    "ambient": {
+      "new-notification-pulse": "Newly arrived notification item background pulses accent-tint once (0%→5%→0% opacity) over 1s ease-out to draw attention",
+      "toast-progress": "Toast auto-dismiss progress: a thin 2px accent bar at the bottom shrinks from 100%→0% width over 5s linear, showing time remaining before auto-dismiss"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates",
+    "stagger-children",
+    "hover-reveal",
+    "click-select"
+  ],
+  "composition": {
+    "NotificationCenter": "Anchor(d-interactive) > [BellButton + UnreadBadge?] + Dropdown?(d-surface, floating)",
+    "Dropdown": "Popover(d-surface, anchored, shadow-xl) > [Header + CategoryTabs + NotificationList + PreferencesFooter]",
+    "Header": "Bar(flex-row, justify-between) > [Title + MarkAllReadButton]",
+    "CategoryTabs": "Tabs(d-control, flex-row) > Tab[](All|Mentions|Updates|System)",
+    "NotificationList": "List(scrollable, flex-col) > NotificationItem* | EmptyState",
+    "NotificationItem": "Item(d-interactive, flex-row) > [UnreadDot? + SourceIcon + Content(Title + Description) + Timestamp + DismissButton?]",
+    "EmptyState": "State(centered, flex-col) > [CheckCircleIcon + Heading + Subtext]",
+    "ToastStack": "Stack(fixed, corner-anchored, z-top) > Toast*(d-surface, auto-dismiss) > [ColorStrip + Icon + Content + CloseButton]"
+  }
+}

package/patterns/offset-cart.json

@@ -0,0 +1,109 @@
+{
+  "id": "offset-cart",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Offset Cart",
+  "description": "A carbon offset marketplace cart with browsable project cards, tonnage selectors, certification badges, and a running impact summary sidebar.",
+  "category": "climate",
+  "tags": [
+    "2026",
+    "climate",
+    "offsets",
+    "marketplace",
+    "cart",
+    "carbon-credits",
+    "sustainability"
+  ],
+  "components": [
+    "OffsetProject",
+    "ImpactBadge",
+    "TonnageSelector",
+    "ProjectImage",
+    "CertificationChip",
+    "TotalImpact"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full marketplace layout with grid of browsable project cards on the left and persistent cart summary sidebar docked to the right edge",
+      "layout": {
+        "layout": "split-3-1",
+        "atoms": "_grid _grid-cols-4 _gap-6 _w100 _p-6"
+      }
+    },
+    "minimal": {
+      "description": "Compact checkout-focused view showing only selected projects in a single column with inline quantity controls and summary footer",
+      "layout": {
+        "layout": "single-column",
+        "atoms": "_flex _flex-col _gap-4 _w100 _max-w-xl _mx-auto _p-6"
+      }
+    },
+    "comparison": {
+      "description": "Side-by-side comparison of multiple candidate offset projects aligned on certification, cost per tonne, vintage, and verification status rows",
+      "layout": {
+        "layout": "horizontal-compare",
+        "atoms": "_grid _grid-cols-3 _gap-4 _w100 _p-6"
+      }
+    }
+  },
+  "visual_brief": "A marketplace grid of offset project cards, each showing a high-quality photograph at the top depicting project type (dense forest canopy for reforestation, wind turbines at sunset for renewable, industrial scrubbers for direct air capture, mangrove coastline for blue carbon). Below the image: project name in bold sans-serif, location in muted italic, certification chips arranged in a row (Verra VCS, Gold Standard, CCB, ACR) with small recognisable logos. Cost per tonne displayed prominently in monospace (e.g. '$18.50/tCO2e'), vintage year, and verification status pill (Verified / Pending). A tonnage selector with minus/plus buttons and numeric input sits at the bottom of each card with an 'Add to Cart' button. Right-docked cart sidebar displays total tonnes, total cost, projected impact in monospace, certification mix as tiny stacked bars, and a prominent checkout button. Cart line items show thumbnail, project name, tonnes x rate, and remove button.",
+  "layout_hints": {
+    "container": "d-section",
+    "note": "Project cards use d-interactive with cursor:pointer. Images must maintain 16:9 aspect ratio. Certifications rendered with text labels, not icon-only.",
+    "currency": "All monetary values in monospace with currency symbol prefix. Tonnage values always include tCO2e unit."
+  },
+  "default_layout": {
+    "layout": "split-3-1",
+    "atoms": "_grid _grid-cols-4 _gap-6 _w100 _p-6",
+    "slots": {
+      "offset-project": "Repeating project card. Contains image, name, location, certifications, price, tonnage selector, and add-to-cart control.",
+      "project-image": "Top-of-card photograph showing project visual. 16:9 aspect, rounded top corners.",
+      "certification-chip": "Small labeled pill with certification standard name (Verra, Gold Standard, etc.) and subtle standard-specific color.",
+      "tonnage-selector": "Input group with minus/plus buttons around a numeric input for tonnes to purchase.",
+      "impact-badge": "Small badge on each card showing equivalent impact (e.g. 'offsets 3 flights' or 'powers 2 homes/yr').",
+      "total-impact": "Right sidebar cart summary showing running total tonnes, total cost, certification mix, line items, and checkout button."
+    }
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Carbon offset marketplace and cart",
+    "announcements": [
+      "Added {tonnes} tCO2e of {project} to cart",
+      "Cart total {tonnes} tCO2e at {cost}"
+    ],
+    "keyboard": [
+      "Tab: cycle through project cards and cart items",
+      "Enter: add selected project to cart",
+      "Arrow Up/Down: adjust tonnage selector",
+      "Delete: remove item from cart when focused"
+    ]
+  },
+  "responsive": {
+    "mobile": "Project grid becomes single column. Cart summary moves to sticky bottom sheet with expand handle.",
+    "tablet": "Project grid 2 columns with cart sidebar remaining docked right."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "elevation raise + image zoom(1.03) 200ms ease-out",
+      "add-to-cart": "button pulse + cart icon bounce 300ms spring"
+    },
+    "transitions": {
+      "cart-add": "new line item slide-in from top 400ms ease-out",
+      "cart-remove": "line item slide-out + height collapse 300ms ease-in"
+    },
+    "ambient": {
+      "checkout-pulse": "subtle button glow on checkout CTA 2.5s ease-in-out infinite"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "OffsetCart": "Section(d-section) > [ProjectGrid > OffsetProject[](d-interactive) + CartSidebar > TotalImpact]",
+    "OffsetProject": "Card(d-surface, data-interactive) > [ProjectImage + ProjectInfo > [ProjectName + Location + CertificationChip[] + PriceLabel + ImpactBadge] + TonnageSelector + AddToCartButton]",
+    "TotalImpact": "Panel(d-surface, sticky) > [TotalTonnes(mono) + TotalCost(mono) + CertificationMix + CartLineItem[] + CheckoutButton]",
+    "TonnageSelector": "InputGroup > [MinusButton + NumberInput + PlusButton]",
+    "CertificationChip": "Chip(d-annotation, data-standard) > [StandardLogo + StandardName]"
+  }
+}

package/patterns/onboarding-wizard.json

@@ -0,0 +1,130 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "onboarding-wizard",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Onboarding Wizard",
+  "description": "Multi-step guided flow with progress indicator, step validation, and completion celebration for user onboarding and setup experiences.",
+  "category": "onboarding",
+  "tags": [
+    "2026",
+    "onboarding",
+    "wizard",
+    "stepper",
+    "multi-step",
+    "setup",
+    "flow",
+    "progress"
+  ],
+  "components": [
+    "StepIndicator",
+    "StepContent",
+    "NavigationButtons",
+    "ProgressBar",
+    "CompletionScreen",
+    "SkipButton"
+  ],
+  "default_preset": "stepper",
+  "presets": {
+    "stepper": {
+      "description": "Numbered horizontal step indicator at the top with sequential content panels below — the classic wizard pattern for linear multi-step flows with validation between steps",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _items-center _min-h-full _bg-surface _p-8"
+      }
+    },
+    "carousel": {
+      "description": "Slide-based onboarding with horizontal transitions between steps — content slides left/right with dot indicators and swipe support, ideal for visual introductions",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _items-center _justify-center _h-full _bg-surface _overflow-hidden"
+      }
+    },
+    "checklist": {
+      "description": "Non-linear task checklist where users can complete setup steps in any order — each task expands inline when clicked, with an overall progress tracker at the top",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _max-w-2xl _mx-auto _p-8 _bg-surface _gap-4"
+      }
+    }
+  },
+  "visual_brief": "A clean, focused onboarding experience centered on the page with generous whitespace. The StepIndicator sits at the top of the content area as a horizontal row of numbered circles (32px diameter each) connected by horizontal lines (2px height, spanning the gap between circles). The current/active step circle is filled with the accent color (var(--d-accent)) with white text showing the step number — it is slightly larger (36px) and has a subtle shadow (0 0 0 4px color-mix(in srgb, var(--d-accent) 15%, transparent)) creating a ring highlight. Completed steps show a white checkmark icon on an accent-filled circle with full opacity. Upcoming/future steps are outlined circles (2px border var(--d-border-muted)) with muted text for the number. The connecting lines between steps use the accent color for completed segments and var(--d-border-muted) for upcoming segments, with the current-step segment showing a gradient transition from accent to muted. Directly below the step indicator is the ProgressBar: a thin horizontal bar (4px height, border-radius: 2px, full width of the step indicator) showing the overall completion percentage with a smooth fill using the accent color on a muted track background. The StepContent area below is the largest section: a max-width 640px centered container with generous padding (40px top, 32px sides). Each step renders a title (text-xl font-semibold, margin-bottom 8px), an optional description (text-sm text-muted, margin-bottom 24px), and the step's form fields or content. Transitions between steps use a horizontal slide animation: forward steps slide in from the right, backward steps slide in from the left, with a 300ms ease-out duration. The NavigationButtons are right-aligned at the bottom of the content area with a top margin of 32px. The 'Back' button is a ghost/outline style (text-sm, no fill, muted border, visible from step 2 onward). The 'Continue' button is a primary filled button (accent background, white text, min-width 120px, text-sm font-medium). Between the Back and Continue buttons sits optional space, and a SkipButton as a subtle text link ('Skip this step', text-xs text-muted, hover: underline) appears only on optional steps. On the final step, 'Continue' changes to 'Complete' or 'Get Started'. The CompletionScreen replaces the step content after the last step: a centered column with a large animated check circle (72px, accent-filled, white checkmark that draws itself with a stroke animation), a 'You are all set!' heading (text-2xl font-bold, margin-top 24px), a congratulatory subtext (text-base text-muted, max-width 400px, text-center), and a primary 'Get Started' button below. A subtle confetti animation plays in the background — small colored particles (accent, green, amber, purple) that burst from the center and float downward with gentle rotation, lasting 2.5 seconds then fading. In the checklist preset, each task is a card (d-surface, border, border-radius 8px, padding 16px) with a checkbox, task name, and description. Completed tasks show a green checkmark and muted/struck-through title. The task expands inline to show its content when clicked.",
+  "layout_hints": {
+    "container": "centered-column",
+    "note": "The wizard should be centered on the page with a max-width of 720px for the overall container and 640px for step content. Generous vertical spacing creates a calm, focused feel. Do NOT cram the wizard into a small card — it should feel spacious.",
+    "step_indicator": "The horizontal step indicator must be visually clear at a glance. Completed (checkmark), active (filled, highlighted), and upcoming (outlined, muted) states must be distinctly different. The connecting lines are essential — they visually link the steps into a journey narrative. Place the step indicator within a max-width container (e.g., 480px for 4-5 steps) centered above the content.",
+    "content_area": "Step content should be max-width 640px centered. Form fields within each step should use the full width. Keep each step focused — one primary action or information group per step. Avoid scrolling within a step if possible.",
+    "navigation_alignment": "Navigation buttons align to the right edge of the content area. The 'Back' button sits to the LEFT of 'Continue' with a 12px gap. The SkipButton, if present, sits to the FAR LEFT of the button row (justify-between with the nav buttons). This creates a clear visual hierarchy: skip (optional, left), back (secondary, right-of-center), continue (primary, far right).",
+    "completion_celebration": "The confetti animation should be delightful but not overwhelming. Use 30-50 particles, small sizes (4-8px), and fade them out after 2.5 seconds. The check circle animation should be the star — the checkmark stroke draws itself over 600ms with a satisfying easing curve."
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _items-center _min-h-full _bg-surface _p-8",
+    "slots": {
+      "step-indicator": "Horizontal row of step markers centered at the top of the wizard. Max-width 480px for 4-5 steps (scales proportionally). Each step marker is a flex column: the circle (32px diameter) on top, and optionally a step label (text-xs text-muted, max-width 80px, text-center, margin-top 6px) below. Circles are connected by horizontal lines (2px height) that span from the right edge of one circle to the left edge of the next, vertically centered with the circles. Circle states — Completed: background var(--d-accent), white checkmark SVG icon (16px), full opacity. Active: background var(--d-accent), white step number (text-sm font-bold), box-shadow: 0 0 0 4px color-mix(in srgb, var(--d-accent) 15%, transparent), slightly larger (36px diameter) with a smooth size transition. Upcoming: background transparent, border 2px solid var(--d-border-muted), step number in text-muted (text-sm). Line states — Between completed steps: background var(--d-accent). Between active and next: a gradient from var(--d-accent) to var(--d-border-muted). Between upcoming steps: background var(--d-border-muted). The active circle and its connecting lines transition smoothly (300ms ease-out) when stepping forward or backward.",
+      "progress-bar": "A thin horizontal bar positioned directly below the step indicator with 12px top margin. Width matches the step indicator container (480px or proportional). Height: 4px. Border-radius: 2px. Track: background var(--d-bg-muted). Fill: background var(--d-accent), width transitions smoothly (400ms ease-out) as the user progresses. The fill width represents overall completion as a percentage (e.g., step 2 of 4 = 50%). On completion, the bar fills to 100% with a brief accent pulse animation.",
+      "step-content": "The main content area below the progress bar. Max-width 640px, width 100%, centered (margin 0 auto), padding-top 40px. Each step renders: a title (text-xl font-semibold text-foreground, text-center or text-left depending on content type), an optional description (text-sm text-muted, margin-top 8px, margin-bottom 24px, max-width 480px, text-center for intro text or text-left for form instructions), and the step body (form fields, selections, informational content). Transitions between steps: the outgoing step slides out (translateX to -100% for forward, +100% for backward) while the incoming step slides in from the opposite side, both over 300ms ease-out. The content area has a min-height (e.g., 300px) to prevent layout shift between steps of different heights.",
+      "navigation-buttons": "A horizontal flex row at the bottom of the step content area. Width matches the step content (max-width 640px). Margin-top 32px. Justify-content: space-between for when SkipButton is present, or flex-end when only Back/Continue show. Left side: SkipButton (text-xs text-muted, ghost style, 'Skip this step' with a right-pointing chevron icon, only visible on optional steps, hover: text-foreground, hover: underline). Right side: a flex row with gap 12px containing the Back button (ghost variant, text-sm, left arrow icon + 'Back' text, visible from step 2 onward, disabled on step 1) and the Continue button (primary variant, text-sm font-medium, 'Continue' text + right arrow icon, min-width 120px, accent background, white text). On the final step, Continue reads 'Complete Setup' or 'Get Started' and may have a sparkle/check icon. The Continue button shows a loading spinner (16px, replacing the arrow icon) during async validation. If validation fails, the button shakes briefly (translateX -4px→4px→-2px→2px→0, 400ms) and an error message appears below it.",
+      "completion-screen": "Replaces step-content and step-indicator after the final step is completed. A centered vertical flex column with items-center. Top: an animated check circle — a 72px diameter circle with background var(--d-accent) and a white checkmark SVG. The checkmark draws itself with a stroke-dasharray animation: dasharray equals the path length, dashoffset animates from full to 0 over 600ms with a cubic-bezier(0.65, 0, 0.35, 1) easing. The circle itself scales from 0.8 to 1.0 with a slight overshoot (spring) during the same period. Below: 'You are all set!' heading (text-2xl font-bold text-foreground, margin-top 24px), a congratulatory description (text-base text-muted, max-width 400px, text-center, margin-top 8px, e.g., 'Your account is configured and ready to go.'), and a primary 'Get Started' button (margin-top 32px, large size, min-width 160px). Confetti animation: 40 small particles (4-8px each, mix of circles and rectangles) in accent, green (#22c55e), amber (#f59e0b), and purple (#8b5cf6) colors burst outward from the center of the screen in a fountain pattern, each with random velocity, gentle gravity, rotation, and opacity fade. The burst lasts 2.5 seconds total, particles fade out individually as they slow. Confetti is rendered in a fixed overlay layer with pointer-events: none.",
+      "skip-button": "A subtle, low-emphasis text button that appears on the left side of the navigation row for optional steps. Renders as text-xs text-muted with no background or border. Text reads 'Skip this step' or 'I'll do this later'. On hover: text color strengthens to text-foreground with an underline. On click: advances to the next step without saving the current step's data. Only present on steps explicitly marked as skippable — mandatory steps do not show this button."
+    }
+  },
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Onboarding wizard",
+    "announcements": [
+      "Step {current} of {total}: {step title}",
+      "Step {title} completed, moving to step {next}",
+      "Onboarding complete — you're all set",
+      "Validation error: {error message}",
+      "Step skipped, moving to step {next}"
+    ],
+    "keyboard": [
+      "Tab: move between form fields and navigation buttons within a step",
+      "Enter: submit current step (equivalent to clicking Continue)",
+      "Escape: go back to previous step or close the wizard if on step 1",
+      "Arrow Left/Right: navigate step indicator (visual only, does not skip steps)",
+      "Shift+Tab: reverse tab order through form fields"
+    ]
+  },
+  "responsive": {
+    "mobile": "Step indicator simplifies to a compact format: 'Step 2 of 4' text label with a full-width progress bar beneath it — numbered circles are hidden to save vertical space. Step content goes full-width with 16px horizontal padding. Navigation buttons stack vertically: Continue button full-width on top, Back button full-width below, SkipButton as a centered text link at the bottom. Step transitions change from horizontal slide to a simple cross-fade (300ms) to avoid horizontal overflow issues. Completion confetti still plays but with fewer particles (20). The check circle scales down to 56px.",
+    "tablet": "Step indicator shows numbered circles but without step labels beneath them to save space. Content area max-width 560px. Navigation buttons remain horizontal. Step transitions use horizontal slide. Completion screen maintains full animations. Touch-friendly button sizes (min height 44px).",
+    "desktop": "Full step indicator with numbered circles, connecting lines, and optional step labels. Content area at max-width 640px with generous surrounding whitespace. All animations at full fidelity. Keyboard shortcuts enabled. Progress bar and step indicator are both visible. Confetti uses the full 40-particle burst."
+  },
+  "motion": {
+    "micro": {
+      "step-circle-activate": "Active circle scales from 32px to 36px + shadow ring expands, 300ms spring",
+      "button-hover": "Primary button: subtle brightness increase (filter: brightness(1.05)), 100ms ease-out",
+      "button-press": "scale(0.98), 80ms ease-out, return 120ms ease-out",
+      "validation-shake": "Continue button shakes translateX(-4px→4px→-2px→2px→0), 400ms ease-out on validation failure"
+    },
+    "transitions": {
+      "step-forward": "Outgoing content slides left (translateX(0→-100%)) + fade; incoming content slides in from right (translateX(100%→0)) + fade, 300ms ease-out",
+      "step-backward": "Outgoing content slides right (translateX(0→100%)) + fade; incoming content slides in from left (translateX(-100%→0)) + fade, 300ms ease-out",
+      "progress-fill": "Progress bar width transitions smoothly 400ms ease-out on step change",
+      "line-fill": "Connecting lines between step circles fill with accent color 300ms ease-out when a step completes",
+      "completion-enter": "Content cross-fades from final step to completion screen, 400ms ease-in-out"
+    },
+    "ambient": {
+      "checkmark-draw": "SVG checkmark stroke-dashoffset animates from pathLength to 0 over 600ms cubic-bezier(0.65, 0, 0.35, 1), creating a drawing effect",
+      "confetti-burst": "40 particles burst outward from center: each with random angle (0-360deg), velocity (200-500px), gravity pull (300px/s²), rotation (random 0-720deg over lifetime), and opacity fade (1.0→0 in final 500ms). Total duration 2.5s. Particles use mix of circle and rounded-rectangle shapes in 4 colors.",
+      "active-ring-pulse": "Active step circle's outer ring shadow pulses opacity 0.1→0.2→0.1 slowly, 3s ease-in-out infinite, providing a subtle breathing effect"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "stagger-children",
+    "click-select",
+    "keyboard-navigation",
+    "focus-trap"
+  ],
+  "composition": {
+    "OnboardingWizard": "Wizard(d-section, centered, max-width) > [StepIndicator + ProgressBar + StepContent + NavigationButtons] | CompletionScreen",
+    "StepIndicator": "Indicator(flex-row, centered) > StepCircle*(numbered|checked|upcoming) + ConnectingLine*(filled|unfilled)",
+    "ProgressBar": "Bar(d-annotation, thin, full-width) > Fill(accent, width-transition)",
+    "StepContent": "Content(d-surface, centered, max-width-640, slide-transition) > [Title + Description? + StepBody(form|info)]",
+    "NavigationButtons": "Actions(flex-row, justify-between|end) > [SkipButton? + BackButton?(ghost) + ContinueButton(primary)]",
+    "CompletionScreen": "Celebration(centered, flex-col) > [CheckCircle(animated-draw) + Heading + Description + CTAButton] + ConfettiOverlay(ephemeral)"
+  }
+}