@decantr/content 3.8.0

package/patterns/unlock-gate.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "unlock-gate",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Unlock Gate",
+  "description": "Paywall/tier gate component that blurs or hides content and prompts subscription. Shows required tier and quick subscribe flow.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Card",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Card",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "blur",
+  "presets": {
+    "blur": {
+      "description": "Blurred preview with unlock overlay",
+      "components": [
+        "Button",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "overlay",
+        "atoms": "_relative _overflow[hidden]",
+        "slots": {
+          "preview": "Blurred content preview",
+          "overlay": "Unlock prompt overlay",
+          "tier-info": "Required tier badge",
+          "cta": "Subscribe button"
+        }
+      }
+    },
+    "solid": {
+      "description": "Solid opaque overlay that fully hides content behind a lock icon and subscribe prompt",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "center",
+        "atoms": "_aspect[16/9] _bgmuted/5 _flex _col _center _r3",
+        "slots": {
+          "message": "Unlock prompt text",
+          "tier-info": "Required tier",
+          "cta": "Subscribe button"
+        }
+      }
+    },
+    "teaser": {
+      "description": "Partial content visible with fade to gate",
+      "components": [
+        "Button",
+        "Card",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_relative",
+        "slots": {
+          "teaser-content": "Visible portion of content",
+          "fade": "Gradient fade to gate",
+          "gate": "Subscribe prompt"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "overlay",
+    "atoms": "_relative",
+    "slots": {
+      "preview": "Content preview",
+      "overlay": "Gate overlay",
+      "cta": "Unlock action"
+    }
+  },
+  "io": {
+    "produces": [
+      "unlock-click",
+      "subscribe-click"
+    ],
+    "consumes": [
+      "tier-data",
+      "preview-content"
+    ]
+  },
+  "visual_brief": "Content paywall overlay. The blur preset applies a strong CSS blur filter to the protected content behind the gate, with a centered overlay card showing a lock icon, the required tier name as a badge, a message ('Subscribe to unlock this content'), and a 'Subscribe' CTA button. The solid preset replaces blurred content with a solid surface that hides the content entirely, showing the same lock icon, tier, and CTA. The teaser preset shows the first portion of content (a paragraph or image preview) unblurred, then fades into the gate overlay with the subscribe prompt.",
+  "responsive": {
+    "mobile": "Gate overlay takes full content width. CTA button full-width. Tier badge and lock icon centered. Blur amount may reduce for performance.",
+    "tablet": "Standard overlay. CTA button at natural width. Comfortable padding.",
+    "desktop": "Overlay centered over the content area. CTA button with hover effects. Teaser shows more content before the fade."
+  },
+  "layout_hints": {
+    "gate_priority": "The user should immediately understand what is locked, why it is locked, and what unlock action is available. The gate must preserve that hierarchy before any surrounding decoration.",
+    "teaser_balance": "Preview content should entice without confusing the boundary between visible and gated material. Keep the transition into the gate unmistakable.",
+    "tier_context": "Required tier information should sit close to the CTA and the value proposition, not drift into secondary metadata territory."
+  },
+  "motion": {
+    "micro": "Lock states, CTA focus, and overlay emphasis may sharpen subtly, but the gate should not feel manipulative or overly animated.",
+    "transitions": "Unlock prompts and teaser fades should feel premium and clear, preserving trust while still communicating exclusivity."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Unlock gate",
+    "keyboard": [
+      "The primary unlock or subscribe action should be reachable immediately after the explanatory content."
+    ],
+    "announcements": [
+      "Locked state, required tier, and available unlock action should be exposed semantically so the gate remains understandable without blur or overlay styling alone."
+    ]
+  },
+  "composition": {
+    "UnlockGate": "Overlay(d-section, relative) > [BlurredContent(d-surface, blur) + GateOverlay]",
+    "GateOverlay": "Card(d-surface, centered, elevated) > [LockIcon(d-annotation, large) + Message(heading4) + TierBadge(d-annotation) + SubscribeButton(d-interactive, variant: primary)]"
+  }
+}

package/patterns/usage-meter.json

@@ -0,0 +1,113 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "usage-meter",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Usage Meter",
+  "description": "Quota and usage visualization with color-coded thresholds, animated progress indicators, category breakdowns, and contextual upgrade prompts when nearing limits.",
+  "category": "billing",
+  "tags": [
+    "2026",
+    "billing",
+    "usage",
+    "quota",
+    "meter",
+    "upgrade",
+    "threshold"
+  ],
+  "components": [
+    "UsageBar",
+    "UsageGauge",
+    "ThresholdMarker",
+    "UpgradePrompt",
+    "UsageBreakdown",
+    "PeriodSelector"
+  ],
+  "default_preset": "bar",
+  "presets": {
+    "bar": {
+      "description": "Horizontal bar meter showing filled portion with threshold markers, percentage label, and contextual color shifts at warning/critical thresholds",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _py3 _w-full"
+      }
+    },
+    "radial": {
+      "description": "Circular gauge arc rendering usage as a swept ring with the same threshold color logic — percentage in the center, label below, suitable for dashboard cards",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _jcc _gap2 _aspect-square"
+      }
+    },
+    "breakdown": {
+      "description": "Stacked horizontal bar with category segments, a color legend, and per-category values — shows how different usage types contribute to the total quota",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap4 _py3 _w-full"
+      }
+    }
+  },
+  "visual_brief": "Horizontal bar meter on a light track (8px tall, rounded-full corners). The filled portion starts from the left and represents current usage as a proportion of the total quota. Color of the filled portion changes by threshold: under 70% uses the theme accent color (blue/indigo), 70-90% shifts to yellow/amber with a subtle warm glow, above 90% turns red with a slow pulsing glow animation on the bar edge (box-shadow pulse). Small triangular threshold markers sit below the bar at configurable points (e.g. 70%, 90%, 100%) as tiny upward-pointing carets with thin labels. To the right of the bar, two values display: the percentage in bold (e.g. '73%') and the absolute values below in muted text (e.g. '7,300 / 10,000 API calls'). A PeriodSelector sits above as small segmented control (This Month / Last Month / Custom). The radial preset renders a circular gauge: a 270-degree arc on a circular track with the same color thresholds, the percentage number large and centered inside the ring, and the label ('API Calls') below the number. The gauge ring is 8px thick with rounded caps. The breakdown preset shows a single stacked horizontal bar where each category is a different-colored segment (e.g. blue for API calls, purple for storage, green for bandwidth). Below the bar, a legend row lists each category with a color dot, category name, and individual usage value. When total usage exceeds 80%, an UpgradePrompt card appears below: a bordered card with a small lightning-bolt icon, a headline like 'Approaching your plan limit', a one-line description, and a primary 'Upgrade Plan' button. The prompt card has a subtle gradient left-border in the warning color.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3 _py3 _w-full",
+    "slots": {
+      "period-selector": "A small segmented control or tab group at the top-left for selecting the billing period. Options: 'Current Period', 'Previous Period', 'Custom Range'. The selected option is filled with accent color; others are outlined. Custom opens a date range picker popover. Compact size, does not dominate the layout.",
+      "usage-bar": "The primary usage visualization. A horizontal bar with a light neutral track (rounded-full, 8px height). Filled portion animates from left to right on mount with an ease-out transition. Color is determined by threshold: accent (0-69%), warning/amber (70-89%), destructive/red (90-100%). At 90%+ the filled edge has a pulsing glow. ThresholdMarker components render as small triangular carets below the track at configured percentage points with tiny labels. To the right of the bar: percentage value in semibold text and absolute usage below in caption-size muted text (e.g. '7,300 / 10,000').",
+      "upgrade-prompt": "Conditional slot that appears only when usage exceeds the upgrade threshold (default 80%). Renders as a compact card with a colored left border (amber at 80%, red at 95%). Contains: a small icon (lightning bolt or warning triangle), a bold one-line headline, a short description explaining the limit, and a primary CTA button ('Upgrade Plan' or 'View Plans'). The card animates in with a slide-up + fade when the threshold is crossed. Includes a small dismiss X button."
+    }
+  },
+  "responsive": {
+    "mobile": "Bar fills full width. Percentage and absolute values move below the bar instead of to the right. Radial gauge scales down but maintains minimum 120px diameter for readability. Breakdown legend stacks vertically as a list. Upgrade prompt is full-width.",
+    "tablet": "Standard layout. Bar has comfortable width with values to the right. Radial gauge at natural size. Breakdown legend is a horizontal row.",
+    "desktop": "Full layout with generous spacing. Multiple usage meters can sit side by side in a grid. Radial gauge fits well in dashboard card layouts. Upgrade prompt aligns below the meter with max-width constraint."
+  },
+  "layout_hints": {
+    "meter_role": "Treat this as one self-contained quota instrument. Parent pricing or billing sections own the surrounding narrative and comparison layout.",
+    "threshold_readability": "The current value, threshold markers, and quota context should read in one quick scan without forcing the user to decode color alone.",
+    "prompt_discipline": "Upgrade prompts should appear as supportive escalation below the meter rather than hijacking the entire surface."
+  },
+  "motion": {
+    "micro": {
+      "bar-hover": "bar height 8px→10px + shadow-sm 150ms ease-out",
+      "threshold-marker-hover": "scale(1→1.3) + opacity label 0→1 150ms ease-out",
+      "upgrade-dismiss": "opacity 1→0 + translateY(0→-8px) 200ms ease-in"
+    },
+    "transitions": {
+      "bar-fill": "width 0→target% 800ms ease-out on mount",
+      "color-shift": "background-color 400ms ease-in-out on threshold change",
+      "gauge-sweep": "stroke-dashoffset 0→target 1000ms ease-out on mount",
+      "upgrade-prompt-enter": "translateY(12px)→0 + opacity 0→1 400ms ease-out"
+    },
+    "ambient": {
+      "critical-pulse": "box-shadow glow scale(1→1.05→1) + opacity(0.6→1→0.6) 2s ease-in-out infinite when usage >=90%"
+    }
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "composition": {
+    "UsageMeter": "Container(d-surface, flex-col, gap-3) > [PeriodSelector(d-control, segmented) + UsageBar(d-data, threshold-color) > [FilledBar(d-data, animated-width, color: threshold) + ThresholdMarker(d-annotation, caret-below)* + ValueLabel(d-data, mono)] + UpgradePrompt?(d-interactive, conditional: usage>80%)]",
+    "UsageBar": "Track(d-data, rounded-full, h-2) > [Fill(color: threshold, width: percentage) + ThresholdMarker(d-annotation, position: absolute)*]",
+    "UsageGauge": "SVG(d-data, aspect-square) > [TrackArc(d-data, 270deg, muted) + FillArc(d-data, sweep: percentage, color: threshold) + CenterLabel(d-data, percentage, large)]",
+    "UsageBreakdown": "Container(d-data, flex-col) > [StackedBar(d-data) > Segment(color: category)* + Legend(d-annotation) > LegendItem(d-annotation, dot + label + value)*]",
+    "UpgradePrompt": "Card(d-interactive, border-left: warning-color, flex-row) > [Icon(d-annotation) + Content(flex-col) > [Headline(d-data, bold) + Description(d-annotation, muted)] + CTAButton(d-interactive, variant: primary)]"
+  },
+  "accessibility": {
+    "role": "meter",
+    "aria-label": "Usage quota meter",
+    "keyboard": [
+      "Tab: move focus between period selector, usage bar, and upgrade prompt",
+      "Arrow Left/Right: change selected period in period selector",
+      "Enter: activate upgrade prompt CTA button",
+      "Escape: dismiss upgrade prompt"
+    ],
+    "announcements": [
+      "Current usage: {percentage}% — {used} of {total} {unit}",
+      "Warning: usage has exceeded {threshold}% of your quota",
+      "Critical: usage at {percentage}%, approaching plan limit",
+      "Period changed to {period_label}",
+      "Upgrade prompt: {headline}"
+    ]
+  }
+}

package/patterns/vacancy-tracker.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "vacancy-tracker",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Vacancy Tracker",
+  "description": "Empty units tracker with vacancy rate, days vacant, lost revenue, listing status, and applicant pipeline.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon",
+    "Badge"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full vacancy tracker with rate metrics, vacant unit list, applicant pipeline, and listing status",
+      "components": [
+        "Button",
+        "icon",
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap6",
+        "slots": {
+          "header": "Title, total vacant count",
+          "summary": "Vacancy rate, days vacant avg, lost revenue",
+          "units": "Vacant unit list",
+          "pipeline": "Applicants in pipeline",
+          "marketing": "Listing status per unit"
+        }
+      }
+    },
+    "mini": {
+      "description": "Compact vacancy widget for dashboard",
+      "components": [
+        "Badge"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4",
+        "slots": {
+          "header": "Title",
+          "rate": "Vacancy rate",
+          "lost": "Lost revenue"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap6",
+    "slots": {
+      "header": "Title",
+      "summary": "Vacancy metrics",
+      "units": "Vacant unit list",
+      "pipeline": "Applicants"
+    }
+  },
+  "visual_brief": "Dashboard panel for tracking vacant units. Header with 'Vacancy Tracker' title. A summary metrics row shows total vacant units, overall vacancy rate (percentage with color coding), total days vacant across all units, and estimated lost revenue. Below, a list of vacant unit cards, each showing unit number, property name, days vacant, last rent amount, listing status badge (listed, unlisted, pending), and an applicant pipeline indicator (number of applicants at each stage). The mini preset condenses to a single summary card showing vacancy rate and count only.",
+  "responsive": {
+    "mobile": "Summary metrics in a 2x2 grid. Vacant unit cards stack full-width. Pipeline indicators simplified to counts only.",
+    "tablet": "Metrics in a row. Two-column card grid for vacant units.",
+    "desktop": "Full dashboard panel with metrics bar, unit cards in a grid, and detailed pipeline indicators."
+  },
+  "layout_hints": {
+    "vacancy_priority": "Lead with the cost and urgency of vacancy first: count, rate, days vacant, and lost revenue. Unit-level and applicant detail should support that portfolio read.",
+    "pipeline_context": "Applicant pipeline indicators should feel attached to each vacant unit so leasing momentum is easy to interpret at a glance.",
+    "dashboard_role": "This pattern is an operational monitoring surface. Keep the metrics and unit cards tightly coupled rather than letting the panel sprawl into separate analytics blocks."
+  },
+  "motion": {
+    "micro": "Vacancy status and pipeline indicators may brighten subtly on hover and focus, especially when a unit needs attention.",
+    "transitions": "Leasing-stage or vacancy-state changes should feel clear and professional, reinforcing operational continuity rather than gamified motion."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Vacancy tracker",
+    "keyboard": [
+      "Summary metrics, vacant unit rows or cards, and leasing actions should be reachable in a stable top-to-bottom order."
+    ],
+    "announcements": [
+      "Vacancy counts, days vacant, and applicant pipeline context should be exposed semantically so urgency is understandable without color or chart treatment alone."
+    ]
+  },
+  "composition": {
+    "VacancyTracker": "Container(d-section, flex-col, gap-4) > [MetricsRow + VacantUnitList + ApplicantPipeline?]",
+    "MetricsRow": "Grid(d-data, responsive: 2/4-col) > [VacancyRate(d-surface, mono-data) + AvgDaysVacant(d-surface) + LostRevenue(d-surface, color: destructive)]",
+    "VacantUnitList": "Table(d-data) > VacantUnitRow[]",
+    "VacantUnitRow": "Row(d-data-row) > [UnitNumber + Property + DaysVacant(mono-data) + ListingStatus(d-annotation) + ApplicantCount + ActionButton(d-interactive)]"
+  }
+}

package/patterns/valuation-chart.json

@@ -0,0 +1,126 @@
+{
+  "id": "valuation-chart",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Valuation Chart",
+  "description": "A time-series valuation chart that renders historical price data with optional projection, confidence bands, benchmark overlays, and annotated event markers for critical moments like funding rounds or product launches.",
+  "category": "finance",
+  "tags": [
+    "2026",
+    "finance",
+    "chart",
+    "valuation",
+    "time-series",
+    "dataviz",
+    "projection",
+    "benchmark"
+  ],
+  "components": [
+    "ChartCanvas",
+    "PriceLine",
+    "ConfidenceBand",
+    "ProjectionDashed",
+    "BenchmarkLine",
+    "EventMarker",
+    "ValueCallout",
+    "AxisLabels",
+    "CrosshairTooltip"
+  ],
+  "default_preset": "line",
+  "presets": {
+    "line": {
+      "description": "Classic single-line price history with time on the x-axis and valuation on the y-axis. Clean and readable, ideal for investor dashboards showing straightforward price evolution without forecast noise.",
+      "layout": {
+        "layout": "chart",
+        "atoms": "_w100 _relative _overflow-hidden"
+      }
+    },
+    "area": {
+      "description": "Area-fill chart with projection extension and confidence band shading showing forecast uncertainty. The filled area beneath the price line uses a gradient fade, while the forecast extends as a dashed line with shaded confidence envelope.",
+      "layout": {
+        "layout": "chart",
+        "atoms": "_w100 _relative _overflow-hidden"
+      }
+    },
+    "candlestick": {
+      "description": "OHLC candlestick rendering with wicks and bodies colored green (up) or red (down). Includes volume histogram below and moving-average overlays. Intended for detailed trader views rather than summary dashboards.",
+      "layout": {
+        "layout": "chart",
+        "atoms": "_w100 _relative _overflow-hidden"
+      }
+    }
+  },
+  "visual_brief": "A wide time-series chart rendered as an SVG inside a d-surface card with chart padding of 24px. The x-axis runs along the bottom with tick labels showing dates (Jan '24, Apr '24, Jul '24, ...) in d-annotation muted text. The y-axis runs along the left with currency-formatted value ticks ($10M, $20M, $50M, ...) in mono-data tabular figures. A subtle horizontal grid-line pattern spans the plot area with very low opacity. The PriceLine is the primary element: a 2px solid stroke in the primary accent color, drawn as a smooth monotone curve connecting historical data points. Each data point has an invisible hover target (12px radius) that reveals a CrosshairTooltip showing the exact date and value. When projection is enabled, the line transitions mid-chart to a dashed pattern (4-4 dash array) with 60% opacity, extending into the future portion of the x-axis, which has a subtle background tint distinguishing historical from projected zones. The ConfidenceBand renders behind the projected line as a shaded polygon with gradient fill (15% opacity primary at edges, 5% at center) representing ±1 standard deviation. A BenchmarkLine (e.g., S&P 500 or peer index) overlays as a thin 1px dashed stroke in a muted secondary color with its own label at the right edge. EventMarkers appear as vertical 1px lines from top to bottom of the plot area at key moments, each topped with a small circular badge (icon: rocket for launch, dollar for funding, flag for milestone) and a rotated label. Hovering an event expands a card with the event description and delta impact. A ValueCallout card anchors to the top-right corner showing the current/latest value in large semibold figures, the absolute delta from a chosen baseline, and a trend arrow (up/down) colored success/destructive. On area preset, the space under PriceLine fills with a vertical gradient from 30% primary at top fading to 0% at the x-axis. On candlestick preset, each trading period renders as a vertical body (filled rectangle) with wicks (thin vertical lines) showing high/low; green for close-above-open, red for close-below-open.",
+  "layout_hints": {
+    "container": "d-surface card with chart padding",
+    "note": "Charts need generous padding to prevent label collisions with chart edges. Minimum 24px padding on all sides, 48px on left for y-axis labels and 32px on bottom for x-axis labels.",
+    "axis_labels": "Use d-annotation text-xs muted for all axis labels. Rotate x-axis labels -30deg only if they would otherwise overlap. Always include unit indicators ($, %, shares) in axis titles.",
+    "projection_distinction": "Historical vs projected zones MUST be visually distinct: different line stroke (solid vs dashed), different background tint for the projected x-axis region (very subtle), and always a vertical 'today' line separating them.",
+    "event_markers": "EventMarkers use d-annotation[data-event-type]. Icon badges at top of vertical line, labels rotated 45deg or stacked vertically to avoid overlap. Click opens detail card. Limit to 8 visible markers to prevent clutter.",
+    "value_callout": "ValueCallout is a d-surface card floating in top-right with absolute positioning, backdrop-blur, and z-index above chart. Contains current value (text-2xl semibold mono-data), delta (text-sm with trend arrow), and timeframe label."
+  },
+  "default_layout": {
+    "layout": "chart",
+    "atoms": "_w100 _relative _overflow-hidden _p6",
+    "slots": {
+      "chart-canvas": "The main SVG plot area responsible for rendering all chart primitives. Contains axis grid lines, price paths, benchmark overlays, and event markers. Must be responsive to container width and maintain aspect ratio (typically 16:9 or 2:1). Uses viewBox for resolution-independent rendering.",
+      "price-line": "The primary data series rendered as an SVG path element using a monotone curve interpolator. Historical segment uses solid 2px stroke in primary color. Projected segment (if present) uses dashed 4-4 stroke pattern at 60% opacity. Anchors to data points with invisible hover targets.",
+      "confidence-band": "Shaded polygon behind the projection line representing forecast uncertainty. Rendered as an SVG path with gradient fill (primary color at low opacity). Only visible when projection data includes upper/lower bounds.",
+      "benchmark-line": "Optional overlay line (or multiple lines) showing comparison index like S&P 500, category average, or peer valuation. Rendered as thin 1px dashed stroke in muted secondary color with right-edge label identifying the benchmark name.",
+      "event-markers": "Repeating slot — one EventMarker per annotated event. Each marker is a vertical 1px line spanning plot height with a circular icon badge at top (24px diameter) and rotated text label. Clickable to reveal full event description in a floating card.",
+      "axis-labels": "X-axis tick labels (dates) along bottom edge and y-axis tick labels (values with currency formatting) along left edge. Uses d-annotation small-caps muted styling with tabular-nums for alignment.",
+      "value-callout": "Floating card anchored top-right corner showing current/latest valuation in large figures, delta from baseline, percent change, trend arrow, and timeframe selector. Uses backdrop-blur and elevated z-index.",
+      "crosshair-tooltip": "On-hover element that follows cursor along the price line, displaying vertical guide line plus a floating tooltip card with exact date, value, benchmark comparison at that point, and any nearby event annotations."
+    }
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Valuation chart showing price history and projections",
+    "announcements": [
+      "Current valuation: {value}, change of {delta} over {timeframe}",
+      "Event: {eventName} on {date} with impact {delta}",
+      "Projection shows range from {low} to {high} by {futureDate}"
+    ],
+    "keyboard": [
+      "Left/Right arrows: move crosshair along time axis",
+      "Up/Down arrows: toggle between visible data series",
+      "Enter: open detail card for currently highlighted event",
+      "Escape: dismiss tooltip or detail card",
+      "T: toggle between absolute and percent-change axis"
+    ]
+  },
+  "responsive": {
+    "mobile": "Chart height reduces to 240px minimum. BenchmarkLine overlays hidden by default, toggle-able. EventMarker labels collapse to icon-only with tap-to-expand. ValueCallout repositions to inline above chart rather than floating overlay. Axis tick density reduced.",
+    "tablet": "Full chart with dual-finger pinch-to-zoom on x-axis. EventMarker labels rotate -45deg for space. ValueCallout remains floating but shrinks to compact mode."
+  },
+  "motion": {
+    "micro": {
+      "line-draw": "stroke-dashoffset animate from full-length to 0 over 800ms ease-out on mount",
+      "crosshair-follow": "x-position transform 80ms linear",
+      "tooltip-fade": "opacity 0 to 1 120ms ease-out"
+    },
+    "transitions": {
+      "data-update": "path morph with d-attribute interpolation 400ms ease-in-out",
+      "zoom-change": "viewBox interpolation 300ms ease-out",
+      "preset-swap": "cross-fade 250ms ease-in-out between line, area, and candlestick renderings"
+    },
+    "ambient": {
+      "projection-shimmer": "confidence-band opacity 0.1 to 0.2 to 0.1 over 3s ease-in-out infinite",
+      "current-value-pulse": "ValueCallout subtle scale 1.0 to 1.02 to 1.0 on data refresh 600ms ease-out"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "real-time-updates"
+  ],
+  "composition": {
+    "ValuationChart": "Section(d-section, d-surface) > [ChartCanvas + ValueCallout]",
+    "ChartCanvas": "SVG(responsive, viewBox) > [GridLines + AxisLabels + PriceLine + ConfidenceBand? + ProjectionDashed? + BenchmarkLine[] + EventMarker[] + CrosshairTooltip]",
+    "PriceLine": "Path(d-annotation, data-series) > [HistoricalSegment + ProjectionSegment?]",
+    "ConfidenceBand": "Polygon(d-annotation, data-band) > [GradientFill]",
+    "EventMarker": "Marker(d-annotation, data-event, data-interactive) > [VerticalLine + IconBadge + Label + DetailCard?]",
+    "ValueCallout": "Card(d-surface, floating, backdrop-blur) > [CurrentValue + DeltaChip + TrendArrow + TimeframeSelector]"
+  }
+}

package/patterns/version-history.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "version-history",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Version History",
+  "description": "Document revision timeline with version preview, diff view, and restore functionality. Shows auto-saves and named checkpoints.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "sidebar",
+  "presets": {
+    "sidebar": {
+      "description": "Vertical timeline in aside panel",
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "column",
+        "atoms": "_flex _col _hfull",
+        "slots": {
+          "header": "Panel header with close button",
+          "timeline": "Chronological version list",
+          "actions": "Restore and compare buttons"
+        }
+      }
+    },
+    "modal": {
+      "description": "Full-screen history viewer with preview pane",
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "split",
+        "atoms": "_grid _grid-cols[300px_1fr] _h[80vh]",
+        "slots": {
+          "timeline": "Left pane with version list",
+          "preview": "Right pane with version content",
+          "diff-toggle": "Switch between content and diff view",
+          "actions": "Restore and download buttons"
+        }
+      }
+    },
+    "compact": {
+      "description": "Condensed dropdown version selector with current version label and version list menu",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "dropdown",
+        "atoms": "_relative",
+        "slots": {
+          "trigger": "Current version display with dropdown arrow",
+          "menu": "Version list dropdown"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "column",
+    "atoms": "_flex _col",
+    "slots": {
+      "timeline": "Chronological version list grouped by date",
+      "preview": "Selected version content view",
+      "compare": "Diff view toggle between versions",
+      "restore": "Restore to selected version button"
+    }
+  },
+  "io": {
+    "consumes": [
+      "versions",
+      "currentVersionId"
+    ],
+    "produces": [
+      "version-select",
+      "restore"
+    ],
+    "actions": [
+      "select-version",
+      "restore-version",
+      "create-checkpoint",
+      "download-version",
+      "compare-versions"
+    ]
+  },
+  "visual_brief": "Sidebar or modal panel showing a chronological list of document versions grouped by date. Each version entry shows a timestamp, an auto-save or named-checkpoint label, the author avatar and name, and a brief summary of changes. Selecting a version shows a preview of the document at that point. A compare toggle enables diff view between the selected version and the current or another version. A 'Restore' button allows reverting to the selected version with a confirmation dialog. The sidebar preset renders as a right-side panel. The modal preset opens as a centered modal. The compact preset shows a condensed timeline with fewer details.",
+  "responsive": {
+    "mobile": "Version history opens as a full-screen overlay. Timeline entries are compact. Preview replaces the timeline view (back button to return). Restore button at the bottom.",
+    "tablet": "Sidebar at 320px width with timeline and inline preview. Compare mode uses a bottom sheet.",
+    "desktop": "Sidebar with timeline, adjacent preview panel, and inline diff view. Full author details and change summaries visible."
+  },
+  "layout_hints": {
+    "timeline_priority": "Lead with chronology and authorship. Restore or compare actions should feel secondary until a version is actively selected.",
+    "preview_attachment": "The selected version preview or diff should feel attached to the highlighted entry so users never lose track of which revision they are viewing.",
+    "compact_mode": "Compact mode should keep the current version and recent named checkpoints most visible rather than trying to render the full timeline density."
+  },
+  "motion": {
+    "micro": "Selected entries may sharpen or glow subtly, and restore/compare actions may acknowledge focus clearly without distracting from the timeline.",
+    "transitions": "Entry selection, preview swaps, and compare-mode toggles should preserve the sense of chronological navigation rather than feeling like unrelated modal jumps."
+  },
+  "interactions": [
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Version history",
+    "keyboard": [
+      "Timeline entries should be keyboard navigable in chronological order, with clear focus and selected state.",
+      "Restore and compare actions should be exposed without requiring pointer hover."
+    ],
+    "announcements": [
+      "Version author, timestamp, and change summary should be announced together so revision choice remains understandable without visual grouping."
+    ]
+  },
+  "composition": {
+    "VersionHistory": "Panel(d-section, flex-col) > [VersionList + DiffView?]",
+    "VersionList": "List(d-data, flex-col) > VersionEntry[]",
+    "VersionEntry": "Row(d-data-row, hoverable, active?: selected) > [Avatar(small) + EntryInfo > [AuthorName(font-medium) + Timestamp(text-muted, mono-data)] + VersionLabel?(d-annotation) + RestoreButton?(d-interactive)]",
+    "DiffView": "Panel(d-surface, split) > [OldContent + NewContent(highlighted-changes)]"
+  }
+}