@decantr/content 3.8.0

package/patterns/audit-trail.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "audit-trail",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Audit Trail",
+  "description": "Chronological audit log displaying actor, action, entity, and timestamp with diff inspection, advanced filtering, search, and CSV export for compliance workflows.",
+  "category": "compliance",
+  "tags": [
+    "2026",
+    "compliance",
+    "audit",
+    "log",
+    "trail",
+    "security",
+    "export"
+  ],
+  "components": [
+    "AuditLog",
+    "AuditEntry",
+    "ActorAvatar",
+    "ActionBadge",
+    "EntityLink",
+    "DiffToggle",
+    "FilterBar",
+    "ExportButton"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full vertical timeline audit log with actor avatars, action badges, entity links, expandable diffs, and a filter bar with export controls",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py4 _w-full"
+      }
+    },
+    "compact": {
+      "description": "One-line-per-entry dense list view — actor name, action verb, entity, and timestamp on a single row with no avatars or expandable detail, optimized for high-volume scanning",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap1 _py2 _w-full _text-sm"
+      }
+    },
+    "grouped": {
+      "description": "Entries grouped by entity with collapsible sections — each entity shows its audit history as a nested timeline, useful for tracing the full lifecycle of a single record",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _py4 _w-full"
+      }
+    }
+  },
+  "visual_brief": "Vertical timeline with a thin 2px line running down the left side (24px from left edge). Each audit entry is positioned to the right of the line, connected by a small horizontal connector. The entry row contains: a small circular ActorAvatar (32px, with initials or photo) overlapping the vertical line, then to its right the actor's name in semibold text, then an ActionBadge pill (Created = blue fill, Updated = yellow/amber fill, Deleted = red fill, Accessed = gray fill, each with a matching icon: plus, pencil, trash, eye), then the entity type in muted text followed by the entity name as a clickable link in accent color, and finally a relative timestamp on the far right in muted monospace text (e.g. '2 hours ago'). Below the main row, a small 'Show changes' toggle link appears for entries that have diffs. Clicking it expands a two-column diff view: left column shows 'Before' state with red-tinted deleted lines, right column shows 'After' state with green-tinted added lines, field names as row labels on the far left. The FilterBar sits above the log as a horizontal row with: actor dropdown (with avatar chips), action type multi-select (checkboxes for each action type), entity type dropdown, date range picker, and a search text input. An ExportButton sits at the right end of the filter bar — clicking it generates a CSV download with a brief loading spinner. The grouped preset wraps entries under collapsible entity headers: the header shows entity type icon, entity name, and entry count badge; expanding shows a mini-timeline of all actions on that entity. Compact preset renders each entry as a single line: 'John Smith created Invoice #1234 — 2h ago' with action verb colored to match its badge color.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap4 _py4 _w-full",
+    "slots": {
+      "filter-bar": "Horizontal row of filter controls above the audit log. Contains: actor filter (searchable dropdown with avatar chips for selected actors), action type filter (multi-select pills: Created, Updated, Deleted, Accessed, all toggleable), entity type filter (dropdown listing all entity types), date range picker (preset options: today, last 7 days, last 30 days, custom range), and a text search input for free-text search across all entry fields. Active filters display as removable chip tags below the row. The ExportButton sits right-aligned — a secondary button with a download icon that triggers CSV generation with a spinner state.",
+      "audit-log": "The main vertical timeline container. Renders a thin continuous vertical line (2px, muted border color) from the first entry to the last. Each AuditEntry is positioned as a card-like row to the right of the line. Entries are sorted by timestamp descending (newest first). Supports infinite scroll with a 'Load more' button at the bottom, or virtual scrolling for large datasets. Entry count badge shows total matching entries at the top.",
+      "audit-entry": "Repeating slot for each log entry. Layout is a horizontal row: ActorAvatar (32px circle with initials/photo, centered on the timeline line), actor name (semibold), ActionBadge (colored pill with icon and verb), entity type (muted label), EntityLink (accent-colored clickable name), and timestamp (muted monospace, right-aligned). Below the row, a DiffToggle link ('Show changes' / 'Hide changes') appears if the entry includes before/after data. The expanded diff section shows a side-by-side comparison table: field name column, 'before' value column with red-tinted removed content, 'after' value column with green-tinted added content. Only changed fields are displayed. For 'Created' entries the diff shows only the 'after' values. For 'Deleted' entries only the 'before' values."
+    }
+  },
+  "responsive": {
+    "mobile": "Timeline line moves to 8px from left edge. Actor avatars are 24px. Entries stack vertically: actor + action on first line, entity on second, timestamp on third. Diff view switches from side-by-side to stacked (before above, after below). Filter bar collapses to a filter icon button that opens a bottom sheet. Export button moves into the filter sheet.",
+    "tablet": "Standard timeline layout with all elements on one row per entry. Filter bar fully visible. Diff view remains side-by-side. Comfortable spacing.",
+    "desktop": "Full-width timeline with generous entry spacing. Filter bar shows all controls in a single row. Diff view has wide columns for comfortable comparison. Virtual scrolling handles large datasets smoothly."
+  },
+  "motion": {
+    "micro": {
+      "entry-hover": "background-color surface-hover + translateX(2px) 120ms ease-out",
+      "badge-hover": "scale(1.05) 100ms ease-out",
+      "avatar-hover": "ring-2 accent 150ms ease-out"
+    },
+    "transitions": {
+      "diff-expand": "max-height 0→auto + opacity 0→1 300ms ease-out",
+      "diff-collapse": "max-height auto→0 + opacity 1→0 200ms ease-in",
+      "filter-chip-add": "scale(0.8)→1 + opacity 0→1 200ms ease-out",
+      "filter-chip-remove": "scale(1)→0.8 + opacity 1→0 150ms ease-in",
+      "export-loading": "opacity pulse 0.5→1→0.5 1s ease-in-out infinite"
+    },
+    "ambient": {
+      "new-entry-highlight": "background-color accent/5 → transparent 2s ease-out on new entry arrival"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-reveal",
+    "click-select",
+    "scroll-reveal"
+  ],
+  "composition": {
+    "AuditTrail": "Container(d-section, flex-col) > [FilterBar(d-control) + ExportButton(d-interactive, icon: download)] + AuditLog(d-data, timeline-vertical)",
+    "AuditLog": "Timeline(d-data, vertical-line) > AuditEntry(d-interactive, expandable)[]",
+    "AuditEntry": "Row(d-interactive, hover-highlight) > [ActorAvatar(d-annotation, circle, on-line) + ActorName(d-data, semibold) + ActionBadge(d-annotation, pill, color: action-type) + EntityLink(d-interactive, accent-link) + Timestamp(d-annotation, mono, muted, right) + DiffToggle?(d-interactive, expandable)]",
+    "DiffToggle": "Panel(d-data, expandable) > DiffTable(d-data, two-column) > DiffRow(field-label + before-value + after-value)[]",
+    "FilterBar": "Row(d-control, flex-wrap) > [ActorFilter(d-control, searchable-dropdown) + ActionTypeFilter(d-control, multi-select-pills) + EntityTypeFilter(d-control, dropdown) + DateRangePicker(d-control) + SearchInput(d-control, text)]"
+  },
+  "layout_hints": {
+    "timeline_priority": "Actor, action, target, and time should be readable in one scan before diffs or export tooling enter the picture.",
+    "diff_attachment": "Expanded diffs should feel attached to the specific log entry they explain, not like a detached secondary document.",
+    "filter_role": "Filters and export controls should support forensic inspection without drowning out the chronological audit log itself."
+  },
+  "accessibility": {
+    "role": "log",
+    "aria-label": "Audit trail log with filtering and export",
+    "keyboard": [
+      "Arrow Up/Down: navigate between audit entries",
+      "Enter: expand/collapse diff view for focused entry",
+      "Tab: move between filter controls and log entries",
+      "E: trigger CSV export",
+      "F: focus the search input in the filter bar",
+      "Escape: collapse expanded diff or close filter dropdowns",
+      "Home: jump to the most recent entry",
+      "End: jump to the oldest loaded entry"
+    ],
+    "announcements": [
+      "{actor} {action} {entity_type} {entity_name} at {timestamp}",
+      "Diff expanded: {changed_field_count} fields changed",
+      "Filter applied: {filter_description}, {result_count} entries shown",
+      "Export started, downloading CSV with {count} entries",
+      "Loaded {count} more entries"
+    ]
+  }
+}

package/patterns/auth-form.json

@@ -0,0 +1,209 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "auth-form",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Auth Form",
+  "description": "Unified authentication form with multiple modes: login, register, forgot-password, reset-password, verify-email, mfa-setup, mfa-verify, phone-verify.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "default_preset": "login",
+  "presets": {
+    "login": {
+      "description": "Email/password login with OAuth options",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Logo and welcome title",
+          "form": "Email and password inputs",
+          "oauth": "Social login buttons (Google, GitHub, etc.)",
+          "divider": "'or continue with' separator",
+          "footer": "Register and forgot password links",
+          "error": "Inline error message area"
+        }
+      }
+    },
+    "register": {
+      "description": "Registration form with password strength indicator",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Logo and create account title",
+          "form": "Name, email, password inputs with strength indicator",
+          "oauth": "Social signup buttons",
+          "divider": "Separator",
+          "footer": "Login link",
+          "error": "Inline error message"
+        }
+      }
+    },
+    "forgot-password": {
+      "description": "Password reset request form with email input and success confirmation message",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Title and instructions",
+          "form": "Email input",
+          "footer": "Back to login link",
+          "success": "Success message after submission"
+        }
+      }
+    },
+    "reset-password": {
+      "description": "Set new password form with confirmation",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Title",
+          "form": "New password and confirm password inputs",
+          "error": "Validation errors"
+        }
+      }
+    },
+    "verify-email": {
+      "description": "Email verification pending screen",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _gap6 _p8 _textc",
+        "slots": {
+          "icon": "Mail icon",
+          "message": "Verification instructions",
+          "resend": "Resend verification button"
+        }
+      }
+    },
+    "mfa-setup": {
+      "description": "Multi-factor authentication setup with QR code",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Setup instructions",
+          "qr": "QR code image for authenticator app",
+          "secret": "Manual entry secret key",
+          "verify": "Verification code input"
+        }
+      }
+    },
+    "mfa-verify": {
+      "description": "Multi-factor authentication code entry during login with six-digit input and backup code fallback",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Enter code prompt",
+          "form": "6-digit code input",
+          "backup": "Use backup code link"
+        }
+      }
+    },
+    "phone-verify": {
+      "description": "Phone number verification with SMS code",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+        "slots": {
+          "header": "Verification prompt",
+          "form": "SMS code input",
+          "resend": "Resend code button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6 _p8 _mw[400px] _wfull",
+    "slots": {
+      "header": "Logo, title, subtitle",
+      "form": "Form inputs",
+      "oauth": "OAuth provider buttons",
+      "divider": "'or continue with' separator",
+      "footer": "Navigation links",
+      "error": "Inline error messages"
+    }
+  },
+  "visual_brief": "Centered single-column form card constrained to 400px max-width. Header area shows logo and a welcome title. Form fields stack vertically with labeled inputs for email and password. A horizontal divider with 'or continue with' text separates the form from OAuth provider buttons (Google, GitHub icons in bordered pill buttons). Footer contains muted text links for Register and Forgot Password. Error messages appear inline below inputs in destructive color. MFA presets show a 6-digit code input with large separated character boxes. Verify-email preset centers a large mail icon with instructional text.",
+  "layout_hints": {
+    "shell_ownership": "The centered shell owns viewport centering and the outer card frame. Route components should render auth content inside that card rhythm, not add another full-height centering wrapper.",
+    "field_stack": "Fields, CTA, OAuth buttons, and footer links should align to one stable column width. OAuth rows should feel like part of the form, not a detached widget.",
+    "verification_states": "Pending-email, MFA, and reset-success states should feel like transitions of the same auth surface rather than unrelated page layouts."
+  },
+  "responsive": {
+    "mobile": "Form takes full width with horizontal padding. OAuth buttons stack vertically. MFA code inputs remain large for touch targets. Footer links stack.",
+    "tablet": "Centered 400px form. Standard spacing. OAuth buttons render in a row.",
+    "desktop": "Centered form with generous padding. All elements comfortably spaced in their standard layout."
+  },
+  "motion": {
+    "micro": "Buttons and OAuth rows use calm hover and focus transitions. Code-entry boxes may softly highlight the active digit slot.",
+    "transitions": "State changes between login, register, reset, and MFA should cross-fade or slide minimally over 180-250ms.",
+    "ambient": "Do not add decorative ambient motion inside auth forms beyond a gentle entrance treatment."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "keyboard-navigation",
+    "inline-edit"
+  ],
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Authentication form",
+    "keyboard": [
+      "Tab moves through fields, provider buttons, and footer links in a logical order.",
+      "Enter submits the current form when focus is inside the primary auth field group.",
+      "OTP and MFA inputs should support sequential typing and backspace navigation between code slots."
+    ],
+    "announcements": [
+      "Announce inline validation errors with field-specific guidance.",
+      "Announce verification-success and reset-email-sent states explicitly."
+    ],
+    "focus_management": "Move focus to the first invalid field after validation failure. When auth mode changes, move focus to the heading or first interactive field in the new mode."
+  }
+}

package/patterns/avatar-grid-tile.json

@@ -0,0 +1,118 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "avatar-grid-tile",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Avatar Grid Tile",
+  "description": "Square card with a circular avatar inside, name underneath, and an optional new-match dot indicator. The repeating tile inside a matches-grid layout. Differs from card-grid (rectangular content cards) and presence-avatars (horizontal stack of presence indicators) by combining a square card surface with a circular photo and a single-line name — optimized for grid-of-people displays.",
+  "category": "card",
+  "tags": [
+    "2026",
+    "card",
+    "tile",
+    "avatar",
+    "grid",
+    "matches",
+    "consumer",
+    "social"
+  ],
+  "components": [
+    "Tile",
+    "AvatarFrame",
+    "Avatar",
+    "PresenceDot",
+    "NewMatchDot",
+    "Name",
+    "TimestampLabel"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Square card with circular 80px avatar centered above a single-line name. Optional violet new-match dot at top-right of the avatar. Used as the repeating tile in a matches-grid.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _flex-col _items-center _gap-2 _p-4 _rounded-2xl _bg-surface _cursor-pointer"
+      }
+    },
+    "with-presence": {
+      "description": "Includes a small green online-status dot at bottom-right of the avatar (like Slack/Messenger presence). Otherwise identical to standard.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _flex-col _items-center _gap-2 _p-4 _rounded-2xl _bg-surface _cursor-pointer"
+      }
+    },
+    "compact": {
+      "description": "Smaller variant — 56px avatar, no card padding. Used in dense grids or sub-lists.",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative _flex _flex-col _items-center _gap-1 _p-2 _cursor-pointer"
+      }
+    }
+  },
+  "visual_brief": "A square-ish card (intrinsic size, expands to grid cell) with the swipecircle-grid-tile decorator: white surface, 20px border-radius, 16px padding, soft coral-tinted shadow, flex-col items-center with 8px gap. At the top: AvatarFrame — a 80×80 circular avatar with the swipecircle-photo-frame decorator (coral outer ring 3px, cream inner gap 2px, soft shadow). The Avatar img inside fills the frame (object-fit cover). At top-right of the AvatarFrame: a NewMatchDot — a 12×12 violet circle (var(--d-secondary)) with a 2px white inner border, positioned absolute (top: -2px, right: -2px). Visible only when data-new=true. On first appearance, animates: scale 0→1.2→1 + opacity 0→1 over 320ms cubic-bezier(0.34, 1.56, 0.64, 1) — pulses in. Optionally pulses gently (scale 1→1.06→1 over 1.6s ease-in-out infinite) until the user views the match. In the with-presence preset: a PresenceDot at bottom-right of the AvatarFrame — 10×10 green circle (var(--d-success)) with white border, positioned absolute (bottom: 2px, right: 2px), visible only when data-online=true. Below the AvatarFrame: Name — single-line text, font-size 14px, font-weight 600, color var(--d-text), text-align center, max-width 100% with text-overflow ellipsis. Optional TimestampLabel below name (visible on hover or always per preset config) — 'Active 2h ago' style, font-size 11px, color var(--d-text-muted). On hover: the tile lifts (translateY -2px), the shadow intensifies, and the AvatarFrame's outer ring increases coral saturation slightly. Press: scale(0.97) for 80ms, spring back over 200ms. Click navigates to that user's profile (`/u/:userId`) — emits 'open-profile' event. Each tile is a single tap target — the entire card is clickable, not just the avatar or name.",
+  "layout_hints": {
+    "container": "square-ish card with circular avatar inside",
+    "size": "Default 144×160px or grid-cell-fill — fills the container",
+    "avatar_size": "80×80 standard / 56×56 compact",
+    "tap_target": "Entire tile is the tap target (not just avatar) — easier on mobile"
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_relative _flex _flex-col _items-center _gap-2 _p-4 _rounded-2xl _bg-surface _cursor-pointer",
+    "slots": {
+      "tile": "Outer card. Position relative (so absolute children anchor here). Flex-col, items-center, gap 8px, padding 16px. Border-radius 20px. Background var(--d-surface). Applies swipecircle-grid-tile decorator. Cursor pointer. data-new='true|false'. data-online='true|false'. Click navigates to user's profile. Carries role='link' or wraps an <a> element pointing to /u/{userId}.",
+      "avatar-frame": "Position relative (anchors PresenceDot and NewMatchDot). 80×80 (standard) or 56×56 (compact). Applies swipecircle-photo-frame decorator: rounded-full, padding 3px, gradient coral-to-accent border. Box-shadow soft.",
+      "avatar": "Img inside the frame. width 100%, height 100%, border-radius 9999px (matches frame), object-fit cover, object-position center. Default placeholder: a soft peach gradient with a 24px User Lucide icon centered.",
+      "presence-dot": "Conditional in with-presence preset. Position absolute, bottom: 2px, right: 2px. 10×10. Border-radius 9999px. Background var(--d-success). Border 2px solid var(--d-surface) (creates a clean cutout effect). Visible only when data-online=true.",
+      "new-match-dot": "Position absolute, top: -2px, right: -2px. 12×12. Border-radius 9999px. Background var(--d-secondary) (violet match accent). Border 2px solid var(--d-surface). Visible only when data-new=true. On first render: scales 0→1.2→1 + opacity 0→1 over 320ms cubic-bezier(0.34, 1.56, 0.64, 1). Optional gentle pulse animation (scale 1→1.06→1 over 1.6s ease-in-out infinite) until viewed.",
+      "name": "Single-line text below the avatar. Font-size 14px, font-weight 600, color var(--d-text), text-align center, white-space nowrap, overflow hidden, text-overflow ellipsis, max-width 100%.",
+      "timestamp-label": "Optional secondary line below name. Font-size 11px, font-weight 500, color var(--d-text-muted). Format examples: 'Matched today', 'Active 2h ago', 'New match!'. Visible per preset config — always in standard, on-hover only in compact."
+    }
+  },
+  "accessibility": {
+    "role": "link",
+    "aria-label": "{name}'s profile{newMatchSuffix}{onlineSuffix}",
+    "keyboard": [
+      "Tab: focus the tile",
+      "Enter or Space: activate (navigate to profile)",
+      "Arrow keys: navigate between tiles in the grid (handled by parent grid's roving tabindex)"
+    ],
+    "announcements": [
+      "{name}, new match",
+      "{name}, online",
+      "{name}, matched {timestamp}"
+    ],
+    "focus_management": "Each tile is a focusable link. The new-match indicator is announced via aria-label suffix when data-new=true. Focus ring uses the swipecircle-pill decorator's primary color outline."
+  },
+  "responsive": {
+    "mobile": "3-column grid on narrow viewports (gap 8px). Avatar 64×64. Reduced padding (12px).",
+    "tablet": "4-column grid (gap 12px). Default avatar size 80×80.",
+    "desktop": "5-column grid in the 480px max-width app column (gap 16px). Hover state active (lift + glow)."
+  },
+  "motion": {
+    "micro": {
+      "tile-hover": "translateY(-2px) + shadow intensify over 200ms ease-out",
+      "tile-press": "scale(0.97) for 80ms, spring back to scale(1) over 200ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "new-match-arrive": "scale 0→1.2→1 + opacity 0→1 over 320ms cubic-bezier(0.34, 1.56, 0.64, 1)",
+      "new-match-pulse": "scale 1→1.06→1 over 1.6s ease-in-out infinite (gentle attention-grabber, until viewed)",
+      "avatar-frame-hover": "outer ring saturation shift +10% over 200ms ease-out"
+    },
+    "transitions": {
+      "grid-stagger": "When the grid first appears, tiles enter with a stagger: opacity 0 + scale 0.95 → opacity 1 + scale 1 over 320ms cubic-bezier(0.34, 1.56, 0.64, 1) with a 40ms delay between each tile. Total stagger time depends on tile count."
+    }
+  },
+  "interactions": [
+    "scale-hover",
+    "lift-hover",
+    "click-select",
+    "stagger-children",
+    "animate-on-mount"
+  ],
+  "composition": {
+    "AvatarGridTile": "Tile(rounded-2xl, swipecircle-grid-tile, flex-col, items-center, gap-2, padding-4) > [AvatarFrame + Name + TimestampLabel(conditional)]",
+    "AvatarFrame": "Div(relative, 80px-circle, swipecircle-photo-frame) > [Avatar(filling) + PresenceDot(absolute, conditional) + NewMatchDot(absolute, conditional)]",
+    "Avatar": "Img(filling, rounded-full, object-cover)",
+    "Name": "Span(text-sm, font-semibold, single-line, ellipsis)",
+    "TimestampLabel": "Span(text-xs, muted, font-medium)"
+  }
+}

package/patterns/backer-progress-console.json

@@ -0,0 +1,137 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "backer-progress-console",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Backer Progress Console",
+  "description": "Campaign momentum console with funding or waitlist progress, backer count, countdown, inventory state, and next unlock cue.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "progress",
+    "backers",
+    "funding",
+    "waitlist",
+    "conversion"
+  ],
+  "components": [
+    "Progress",
+    "KPI",
+    "Badge",
+    "Countdown",
+    "Button"
+  ],
+  "contained": false,
+  "default_preset": "funding-console",
+  "presets": {
+    "funding-console": {
+      "description": "Wide console for crowdfunding or preorder campaigns with raised amount, goal progress, backer count, and days remaining.",
+      "components": [
+        "Progress",
+        "KPI",
+        "Badge",
+        "Countdown",
+        "Button"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[72rem] _mx[auto] _p6",
+        "slots": {
+          "primary-counter": "Raised amount or reservations count in LED treatment.",
+          "goal-progress": "Thick segmented progress track with percentage and target label.",
+          "metric-strip": "Backers, days left, average pledge, or early-bird inventory.",
+          "next-unlock": "Short copy for the next stretch goal or waitlist milestone.",
+          "action": "Inline pledge/reserve button when used outside hero."
+        }
+      }
+    },
+    "waitlist-console": {
+      "description": "Waitlist variant that replaces money raised with signups, referral count, beta slots, and next access wave.",
+      "components": [
+        "Progress",
+        "KPI",
+        "Badge",
+        "Button"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[64rem] _mx[auto] _p6",
+        "slots": {
+          "signup-counter": "Total waitlist signups or reserved spots.",
+          "wave-progress": "Progress toward next access wave.",
+          "referral-state": "Current referral multiplier or unlock state.",
+          "access-note": "Next beta wave timing and availability.",
+          "action": "Join or invite action."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap5 _wfull _maxw[72rem] _mx[auto] _p6",
+    "slots": {
+      "primary-counter": "LED-style campaign total",
+      "goal-progress": "Segmented progress track with target label",
+      "metric-strip": "Backers, days left, inventory, or referral metrics",
+      "next-unlock": "Next milestone cue",
+      "action": "Optional conversion button"
+    }
+  },
+  "visual_brief": "A single substantial arcade-console module, not a set of separate KPI cards. Use one strong bezel or control-panel surface with counters embedded into it. Counter modules need real breathing room: padded interiors, clear grid gaps, visible inset between the console border and metrics, and no labels or numbers touching the module walls. The progress track should be thick, tactile, segmented, and readable from a distance. The module should communicate momentum first, then urgency, then the next action.",
+  "responsive": {
+    "mobile": "Stack primary counter, progress, metric rows, and action. Do not shrink numbers below comfortable reading size.",
+    "tablet": "Primary counter spans full width, with metrics in a two-by-two grid below.",
+    "desktop": "Counter and progress share the top row; metric strip and next unlock sit below as a dashboard-like control panel. Four-up metric rows require clear gutters and enough vertical height for label, value, and note."
+  },
+  "layout_hints": {
+    "single_console": "Treat the module as one instrument panel rather than individual cards.",
+    "labeling": "Every number needs a visible text label and goal context.",
+    "conversion_role": "The console should increase confidence and urgency before asking for action.",
+    "breathing_room": "Recommended scoreboard spacing: generous outer padding, at least 1rem gaps between metric modules, and metric module padding around 1rem+ on all sides."
+  },
+  "motion": {
+    "micro": {
+      "progress-fill": "segment fill grows left to right over 500ms",
+      "counter-flip": "LED digits count up or flip once when data changes"
+    },
+    "transitions": {
+      "mount": "Console frame appears instantly; counters animate after labels render."
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates",
+    "status-pulse",
+    "click-select"
+  ],
+  "composition": {
+    "BackerProgressConsole": "Console(arcade-bezel) > [PrimaryCounter + GoalProgress + MetricStrip + NextUnlock + Action?]",
+    "MetricStrip": "Grid > CampaignMetric[]",
+    "CampaignMetric": "Label + Value + OptionalDelta"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Campaign progress",
+    "keyboard": [
+      "Action button must be reachable after the progress summary.",
+      "Progress should expose aria-valuenow, aria-valuemin, and aria-valuemax when rendered as a progressbar."
+    ],
+    "announcements": [
+      "Campaign progress updated to {percent} percent.",
+      "{days} days remaining."
+    ]
+  },
+  "io": {
+    "consumes": [
+      "campaign-progress",
+      "campaign-metrics"
+    ],
+    "produces": [
+      "urgency-signal"
+    ],
+    "actions": [
+      "pledge-click",
+      "share-click"
+    ]
+  }
+}