@decantr/content 3.8.0

package/patterns/share-quest-panel.json

@@ -0,0 +1,134 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "share-quest-panel",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Share Quest Panel",
+  "description": "Post-conversion referral and sharing panel that turns supporter sharing into unlock progress without leaving the campaign tone.",
+  "category": "campaign",
+  "tags": [
+    "campaign",
+    "referral",
+    "share",
+    "post-conversion",
+    "waitlist",
+    "rewards"
+  ],
+  "components": [
+    "Button",
+    "Progress",
+    "Badge",
+    "Input",
+    "icon"
+  ],
+  "contained": false,
+  "default_preset": "referral-quest",
+  "presets": {
+    "referral-quest": {
+      "description": "Quest-style share panel with referral link, unlock progress, share buttons, and next reward.",
+      "components": [
+        "Button",
+        "Progress",
+        "Badge",
+        "Input",
+        "icon"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gap5 _wfull _maxw[58rem] _mx[auto]",
+        "slots": {
+          "success-state": "Thank-you or reservation confirmation.",
+          "referral-link": "Copyable campaign referral link.",
+          "quest-progress": "Progress toward next share/backer unlock.",
+          "share-buttons": "Email, social, copy, and message actions.",
+          "next-unlock": "Reward, queue jump, sticker, bonus content, or beta wave unlocked by sharing."
+        }
+      }
+    },
+    "waitlist-rank": {
+      "description": "Waitlist rank and referral tracker with queue position, invite count, and access-wave unlock.",
+      "components": [
+        "Button",
+        "Progress",
+        "Badge",
+        "Input"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap5 _wfull _maxw[44rem] _mx[auto]",
+        "slots": {
+          "rank-counter": "Current queue rank or access wave.",
+          "referral-link": "Copyable invite link.",
+          "quest-progress": "Invites until next unlock.",
+          "share-buttons": "Share actions."
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gap5 _wfull _maxw[58rem] _mx[auto]",
+    "slots": {
+      "success-state": "Conversion success message",
+      "referral-link": "Copyable campaign link",
+      "quest-progress": "Referral unlock progress",
+      "share-buttons": "Share controls",
+      "next-unlock": "Next referral reward"
+    }
+  },
+  "visual_brief": "A post-conversion panel that feels like a reward quest. It should make the supporter feel done and give them one clear next action: share to unlock or invite. Keep the referral link copyable, progress visible, and next unlock understandable. Avoid manipulative urgency or dark-pattern sharing.",
+  "responsive": {
+    "mobile": "Stack success, referral link, progress, and share buttons. Share buttons should use recognizable icons plus labels.",
+    "tablet": "Two-column layout with success/progress beside share actions.",
+    "desktop": "Centered console with referral link and progress as the primary focus."
+  },
+  "layout_hints": {
+    "post_conversion": "Lead with confirmation before asking for sharing.",
+    "clarity": "Show exactly what sharing unlocks and how many referrals remain.",
+    "controls": "Use copy and share icons inside accessible labeled buttons."
+  },
+  "motion": {
+    "micro": {
+      "copy-success": "link field flashes success color and button label changes briefly",
+      "progress-increment": "progress track fills one segment per referral"
+    }
+  },
+  "interactions": [
+    "click-select",
+    "real-time-updates",
+    "status-pulse",
+    "keyboard-navigation"
+  ],
+  "composition": {
+    "ShareQuestPanel": "Panel > [SuccessState + ReferralLink + QuestProgress + ShareButtons + NextUnlock]",
+    "ReferralLink": "Input(readonly) + CopyButton",
+    "ShareButtons": "ButtonGroup > ShareAction[]"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Campaign sharing and referral progress",
+    "keyboard": [
+      "Referral link copy button should be reachable immediately after the link field.",
+      "Share buttons should include text labels, not icons only."
+    ],
+    "announcements": [
+      "Copied referral link.",
+      "{count} referrals until {unlock}."
+    ]
+  },
+  "io": {
+    "consumes": [
+      "supporter-record",
+      "referral-state"
+    ],
+    "produces": [
+      "referral-share",
+      "share-conversion"
+    ],
+    "actions": [
+      "copy-referral-link",
+      "share-channel-click",
+      "invite-submit"
+    ]
+  }
+}

package/patterns/shot-grid.json

@@ -0,0 +1,104 @@
+{
+  "id": "shot-grid",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Shot Grid",
+  "description": "Grid of individual shot compositions with aspect ratio indicators, shot numbers, duration chips, and optional transition arrows for video shot planning.",
+  "category": "media",
+  "tags": ["2026", "media", "shots", "video", "composition", "cinematography"],
+  "components": ["ShotCard", "AspectBadge", "TransitionArrow", "ShotNumber", "DurationChip"],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Responsive 4-column grid of shot cards with aspect badges and duration chips for general shot planning and review",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-4 _gap-4 _p-4 _w-full"
+      }
+    },
+    "flow": {
+      "description": "Linear flow layout connecting shots with transition arrows indicating cut, fade, dissolve, and other transition types for editorial planning",
+      "layout": {
+        "layout": "flex",
+        "atoms": "_flex _flex-row _flex-wrap _items-center _gap-2 _p-4 _w-full"
+      }
+    },
+    "comparison": {
+      "description": "Side-by-side comparison layout showing two shots for A/B review with synchronized playback and diff indicators",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-2 _gap-6 _p-4 _w-full"
+      }
+    }
+  },
+  "visual_brief": "Grid of rectangular shot cards with variable aspect ratios. Each card renders a single shot thumbnail with a subtle rounded border. Aspect ratio badge appears as a small tag at top-right of thumbnail (e.g. '16:9', '9:16', '4:3', '2.39:1') in monospace uppercase text against a dark translucent pill. Shot number overlays at top-left as a bold numeric badge (e.g. 'SH-042') in a contrasting pill. Duration chip sits at bottom-right showing timecode (e.g. '0:03.5') with a clock icon prefix. In flow preset, cards are connected by arrow icons between them indicating transition type: solid arrow = cut, dotted arrow with fade gradient = fade, diagonal lines = dissolve, curved = wipe. Arrow color reflects transition duration. Cards selected for comparison have an accent border ring. Hover state lifts cards 2px with shadow enhancement.",
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _grid-cols-4 _gap-4 _p-4 _w-full",
+    "slots": {
+      "shot-card": "Individual shot card (d-surface, data-interactive) with thumbnail and metadata overlays. Aspect ratio of card matches the shot's native aspect to preserve composition integrity.",
+      "shot-thumbnail": "Primary image area showing the shot frame. Fills entire card. Supports still image or first-frame preview of video. Lazy-loaded.",
+      "aspect-badge": "Small pill at top-right of card showing aspect ratio in monospace uppercase. Background dark-translucent, 10px font, 4px vertical padding.",
+      "shot-number": "Bold numeric identifier at top-left of card in a contrasting pill. Format 'SH-{number}' or simple '{number}'. Uses primary color background.",
+      "duration-chip": "Timecode display at bottom-right with clock icon prefix. Monospace font, dark translucent pill.",
+      "transition-arrow": "Between-card element in flow preset indicating transition type between adjacent shots. Icon visualization encodes transition type (cut/fade/dissolve/wipe) and width encodes duration."
+    }
+  },
+  "responsive": {
+    "mobile": "Single column with full-width cards. Flow preset stacks vertically with arrows rotated 90 degrees. Comparison preset stacks vertically with divider.",
+    "tablet": "2-column grid. Flow preset maintains horizontal layout with wrap. Badges slightly reduced in size.",
+    "desktop": "4-column grid with all hover states and badges at full size."
+  },
+  "layout_hints": {
+    "shot_priority": "Shot identity, aspect ratio, and duration should be immediately legible. Transition or comparison signals support the shot read rather than replacing it.",
+    "flow_sequence": "The flow preset should emphasize editorial sequence and transition logic, not just spatial adjacency.",
+    "comparison_clarity": "When comparing shots, keep the selected pair visually tied together so users read them as alternatives rather than unrelated cards."
+  },
+  "layout_hints": {
+    "shot_priority": "Shot identity, aspect ratio, and duration should be immediately legible. Transition or comparison signals support the shot read rather than replacing it.",
+    "flow_sequence": "The flow preset should emphasize editorial sequence and transition logic, not just spatial adjacency.",
+    "comparison_clarity": "When comparing shots, keep the selected pair visually tied together so users read them as alternatives rather than unrelated cards."
+  },
+  "motion": {
+    "micro": {
+      "card-hover": "translateY(-2px) + shadow-lift 180ms ease-out",
+      "badge-hover": "scale(1.08) 120ms ease-out"
+    },
+    "transitions": {
+      "card-select": "border-ring + glow 200ms ease-out",
+      "flow-reorder": "FLIP layout 300ms ease-in-out"
+    },
+    "ambient": {
+      "transition-arrow-pulse": "opacity 0.6 to 1 pulse 3s ease-in-out infinite on active flow"
+    }
+  },
+  "interactions": [
+    "lift-hover",
+    "click-select",
+    "animate-on-mount",
+    "stagger-children"
+  ],
+  "composition": {
+    "ShotGrid": "Root(d-section, grid) > ShotCard*(d-interactive)",
+    "ShotCard": "Card(d-surface) > [ShotThumbnail + AspectBadge + ShotNumber + DurationChip]",
+    "FlowVariant": "Root(flex-row, wrap) > [ShotCard + TransitionArrow]*",
+    "ComparisonVariant": "Root(grid-2) > ShotCard*(selected-highlight)"
+  },
+  "accessibility": {
+    "role": "list",
+    "aria-label": "Shot composition grid",
+    "announcements": [
+      "Shot {number} selected",
+      "Transition between {from} and {to} set to {type}",
+      "{count} shots selected for comparison"
+    ],
+    "keyboard": [
+      "Tab: cycle through shots",
+      "Enter: open shot detail",
+      "Space: select shot for comparison",
+      "Arrow keys: navigate grid",
+      "T: cycle transition type (flow preset)"
+    ]
+  }
+}

package/patterns/skeleton-loader.json

@@ -0,0 +1,114 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "skeleton-loader",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Skeleton Loader",
+  "description": "Animated placeholder pattern mimicking content layout during loading states. Renders muted rectangles, circles, and lines with a shimmer sweep animation that indicates ongoing data retrieval without spinner fatigue.",
+  "category": "loading",
+  "tags": [
+    "2026",
+    "loading",
+    "skeleton",
+    "placeholder",
+    "shimmer",
+    "progressive",
+    "perceived-performance"
+  ],
+  "components": [
+    "SkeletonBlock",
+    "SkeletonCircle",
+    "SkeletonLine",
+    "SkeletonGroup"
+  ],
+  "default_preset": "card",
+  "presets": {
+    "card": {
+      "description": "Card skeleton with a large image rectangle at top, title line, and two description lines beneath — mimics a media card",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _p4 _rounded-lg"
+      }
+    },
+    "table": {
+      "description": "Table skeleton with a header row of evenly spaced blocks and multiple body rows of varying-width lines in columns",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _w-full"
+      }
+    },
+    "list": {
+      "description": "List skeleton with repeating rows, each containing a small circle (avatar) on the left and two stacked lines (name + detail) on the right",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap3 _w-full"
+      }
+    },
+    "text": {
+      "description": "Paragraph skeleton with multiple horizontal lines of varying widths (100%, 100%, 80%, 60%) simulating a block of body text",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _w-full"
+      }
+    },
+    "profile": {
+      "description": "Profile skeleton with a large centered circle (avatar), a medium-width name line below, and a wider bio line beneath that",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _aic _gap3 _py4"
+      }
+    }
+  },
+  "visual_brief": "Rounded rectangles and circles rendered in a muted surface color (approximately 8% lighter than the page background, no border, no shadow). Each shape has a shimmer animation: a diagonal linear gradient (transparent at 0%, 10% lighter highlight at 50%, transparent at 100%) that translates continuously from left to right across the element over 1.5 seconds with ease-in-out timing, repeating infinitely. The gradient is angled at approximately 105 degrees for a natural diagonal sweep. Shape dimensions match the content they replace: SkeletonBlock renders as a filled rectangle with 8px border-radius (used for images, cards, headers — configurable aspect ratio); SkeletonCircle renders as a perfect circle (used for avatars, icons — configurable diameter, default 40px); SkeletonLine renders as a thin rounded rectangle 12px tall with 4px border-radius (used for text lines — width varies: 100%, 80%, 60% to mimic ragged text edges). SkeletonGroup is a layout wrapper that arranges its children in rows or columns. In the card preset, a 16:9 ratio SkeletonBlock sits at the top, followed by a SkeletonLine at 70% width (title), then two SkeletonLines at 100% and 60% width (description). In the table preset, a header row uses 4-5 evenly-spaced SkeletonBlocks (80px wide, 16px tall), and body rows repeat 5 times with SkeletonLines of varying widths per column. In the profile preset, a 64px SkeletonCircle is centered, with a 40% width SkeletonLine (name) and a 70% width SkeletonLine (bio) below it. All shimmer animations are synchronized — every skeleton element on the page pulses in unison by using the same animation-delay reference point, creating a cohesive wave effect rather than individual element flickers.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap3 _w-full",
+    "slots": {
+      "skeleton-group": "A layout container that wraps skeleton primitives (SkeletonBlock, SkeletonCircle, SkeletonLine) and arranges them in flex row or column layouts. Supports gap spacing, alignment, and nested groups for complex content shapes. Each group inherits the shimmer animation timing from the root to keep all elements synchronized.",
+      "skeleton-block": "A filled rounded rectangle placeholder for image areas, card headers, or any rectangular content region. Configurable width, height, and aspect-ratio. Default border-radius 8px. Background is a muted surface tone. The shimmer gradient overlay sweeps across it left-to-right.",
+      "skeleton-circle": "A perfect circle placeholder for avatars, icons, or circular UI elements. Configurable diameter (default 40px). Same muted surface color and shimmer treatment as blocks.",
+      "skeleton-line": "A thin horizontal rectangle (12px height, 4px border-radius) representing a line of text. Width is configurable and typically varies across lines (100%, 80%, 60%) to simulate the ragged right edge of real text. Multiple lines stack vertically with consistent gap."
+    }
+  },
+  "accessibility": {
+    "role": "status",
+    "aria-label": "Content loading",
+    "announcements": [
+      "Content is loading, please wait",
+      "Content loaded successfully",
+      "Loading {section_name} content"
+    ],
+    "keyboard": [
+      "Tab: skip past skeleton region to next interactive element",
+      "Screen readers announce 'loading' status and notify when content replaces the skeleton"
+    ]
+  },
+  "responsive": {
+    "mobile": "Skeleton shapes span full container width. Card preset uses 1:1 aspect ratio for image block instead of 16:9. Table preset reduces to 2-3 visible columns. Shimmer animation uses reduced motion query — falls back to a static muted block with subtle opacity pulse if prefers-reduced-motion is set.",
+    "tablet": "Standard layouts maintained. Card preset uses 4:3 aspect ratio. Table preset shows all columns. Profile circle stays 64px.",
+    "desktop": "Full layouts as designed. Card preset uses 16:9 aspect ratio for image block. Multiple skeleton cards can sit in a responsive grid. Shimmer animation runs at full fidelity."
+  },
+  "motion": {
+    "micro": {
+      "shimmer-sweep": "background-position translateX(-100%→100%) 1.5s ease-in-out infinite on each skeleton element"
+    },
+    "transitions": {
+      "skeleton-to-content": "opacity 1→0 + scale(1→0.98) 200ms ease-in on skeleton, then content fades in with opacity 0→1 300ms ease-out",
+      "staggered-reveal": "each skeleton element fades out with 50ms stagger delay for a cascading reveal effect"
+    },
+    "ambient": {
+      "synchronized-shimmer": "all skeleton elements share identical animation-delay: 0ms so the shimmer wave sweeps across the entire layout uniformly"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "real-time-updates",
+    "status-pulse"
+  ],
+  "composition": {
+    "SkeletonGroup": "Container(d-surface, flex, gap) > [SkeletonBlock | SkeletonCircle | SkeletonLine]*",
+    "SkeletonBlock": "Rect(d-muted, rounded-lg, shimmer-gradient, aspect-ratio: configurable)",
+    "SkeletonCircle": "Circle(d-muted, rounded-full, shimmer-gradient, size: configurable)",
+    "SkeletonLine": "Line(d-muted, h-12px, rounded-sm, shimmer-gradient, width: configurable)"
+  }
+}

package/patterns/slash-command.json

@@ -0,0 +1,80 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "slash-command",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Slash Command",
+  "description": "Block-type command palette triggered by / character. Provides quick access to insert different block types with keyboard navigation.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Full command list with icons organized by category",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "dropdown",
+        "atoms": "_absolute _bg[var(--surface)] _shadow _r2 _border _w[320px] _max-h[400px] _overflow[auto] _z[100]",
+        "slots": {
+          "search": "Command filter input",
+          "categories": "Grouped command sections",
+          "commands": "Individual command items"
+        }
+      }
+    },
+    "filtered": {
+      "description": "Show only commands matching current filter",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "dropdown",
+        "atoms": "_absolute _bg[var(--surface)] _shadow _r1 _border _w[280px] _z[100]",
+        "slots": {
+          "results": "Filtered command list only"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "dropdown",
+    "atoms": "_absolute _bg[var(--surface)] _shadow _r2 _border _w[320px] _z[100]",
+    "slots": {
+      "search": "Command filter input (typically inline)",
+      "categories": "Grouped command sections (Text, Lists, Media, Advanced)",
+      "commands": "Individual command items with icon, name, description, shortcut"
+    }
+  },
+  "io": {
+    "consumes": [
+      "position",
+      "query"
+    ],
+    "produces": [
+      "select"
+    ],
+    "actions": [
+      "select-command",
+      "close"
+    ]
+  },
+  "visual_brief": "Floating dropdown menu that appears inline when '/' is typed at the start of a block. Contains a search input at the top (auto-focused, filtering as user types), and categorized command groups below: Text (paragraph, headings H1-H3, quote, callout), Lists (bullet, numbered, todo, toggle), Media (image, video, file, embed), and Advanced (code block, table, divider, math). Each command item shows an icon, name, and a brief description in muted text. The currently selected item has a highlighted background. Keyboard shortcut hints appear on the right. The filtered preset shows only matching commands when search text is entered.",
+  "responsive": {
+    "mobile": "Menu renders as a bottom sheet. Full-width items with larger touch targets. Category headers prominent. No keyboard shortcut hints.",
+    "tablet": "Floating dropdown near the cursor. Standard item sizing.",
+    "desktop": "Compact floating dropdown near the cursor. Full keyboard navigation with up/down arrows and Enter to select."
+  }
+}

package/patterns/sparkline-cell.json

@@ -0,0 +1,103 @@
+{
+  "id": "sparkline-cell",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Sparkline Cell",
+  "description": "An inline mini-chart designed for table cells, showing trend data over time as a compact SVG sparkline with trend indicator and value label.",
+  "category": "data-visualization",
+  "tags": [
+    "2026",
+    "data-visualization",
+    "sparkline",
+    "chart",
+    "inline",
+    "trend",
+    "table"
+  ],
+  "components": [
+    "Sparkline",
+    "TrendIndicator",
+    "ValueLabel"
+  ],
+  "default_preset": "line",
+  "presets": {
+    "line": {
+      "description": "A smooth bezier SVG path sparkline in accent color with a filled circle at the last data point — the most common variant for showing continuous trends",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _align-center _gap-2"
+      }
+    },
+    "bar": {
+      "description": "A mini bar chart with thin vertical bars proportionally sized to data values — well suited for discrete time intervals like daily counts or weekly totals",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _align-center _gap-2"
+      }
+    },
+    "area": {
+      "description": "A filled area chart with a gradient from accent color to transparent beneath the line path — adds visual weight and emphasis compared to the line-only variant",
+      "layout": {
+        "layout": "inline",
+        "atoms": "_inline-flex _align-center _gap-2"
+      }
+    }
+  },
+  "visual_brief": "A compact inline element designed to sit within a table cell, composed of three parts arranged horizontally with an 8px gap: the sparkline SVG on the left, the trend indicator arrow in the middle, and the value label on the right. The sparkline SVG is 80px wide and 24px tall with no axes, labels, or grid lines — pure data visualization. In the line preset, the data renders as a smooth cubic bezier path (SVG <path> with C commands for smooth curves) stroked in the accent color at 2px width with round line-cap and line-join, no fill. The last data point has a small filled circle (4px radius, accent color) to mark the current value. In the area preset, the same bezier path is drawn but with an additional closed path below it filled with a vertical linear gradient from accent color at 30% opacity at the top to transparent at the bottom, creating a soft shaded area. The line itself remains 2px accent stroke on top of the fill. In the bar preset, the sparkline renders as a series of thin vertical rectangles (4px wide, 2px gap between each) whose heights are proportional to data values, aligned to the bottom of the 24px SVG viewport. Bars use accent color fill at 70% opacity, with the last bar at full accent opacity to highlight the current value. The TrendIndicator is a small directional arrow: an upward-pointing triangle (▲) in green (--d-success) for positive trends, a downward-pointing triangle (▼) in red (--d-error) for negative trends, or a horizontal dash (—) in muted text color for flat/neutral trends. The arrow is 10px in size, vertically centered. The ValueLabel shows the percentage change as text (e.g., '+12.4%', '-3.1%', '0.0%') in text-xs font-medium. Positive values use green (--d-success), negative use red (--d-error), neutral use text-muted. The entire component has a line-height matched to the table row for perfect vertical centering. The overall footprint is approximately 140px wide and 24px tall, fitting comfortably in standard table cells.",
+  "layout_hints": {
+    "container": "table-cell or inline",
+    "note": "This component is designed to be placed inside a <td> or any inline container. It should not be used standalone — it is a cell-level data visualization. The sparkline SVG has no interactivity by default but can optionally show a tooltip on hover revealing the exact data point values.",
+    "svg_rendering": "The SVG viewBox should be '0 0 80 24'. Use vector-effect: non-scaling-stroke to keep stroke width consistent. The bezier path should use catmull-rom or monotone interpolation converted to cubic bezier commands for smooth curves that pass through all data points.",
+    "color_semantics": "Positive trend: --d-success (green). Negative trend: --d-error (red). Neutral trend: text-muted. Sparkline path: accent color. These semantic colors ensure the component adapts to light and dark themes."
+  },
+  "default_layout": {
+    "layout": "inline",
+    "atoms": "_inline-flex _align-center _gap-2",
+    "slots": {
+      "sparkline": "The SVG mini-chart element, 80px wide and 24px tall. viewBox='0 0 80 24'. Overflow: visible (to allow the endpoint dot to extend slightly). No axes, no grid, no labels — pure data path only. Line preset: a single <path> element with smooth cubic bezier curves interpolated through all data points, stroke: accent, stroke-width: 2px, fill: none, stroke-linecap: round, stroke-linejoin: round. A <circle> at the last data point (cx=rightmost x, cy=corresponding y) with r=3, fill: accent. Area preset: same <path> as line, plus a <path> that closes the area down to the bottom edge (lineTo right-bottom, lineTo left-bottom, close), filled with a <linearGradient> from accent-30% at y=0 to transparent at y=24, id='sparkline-gradient'. The gradient path renders behind the stroke path. Bar preset: a series of <rect> elements, each 4px wide with 2px gaps, heights mapped proportionally from data values to the 0–24px range, y-position calculated as 24-height, fill: accent at 70% opacity, last bar at 100% opacity. All data points are evenly distributed across the 80px width. The SVG has shape-rendering: geometricPrecision for crisp lines.",
+      "trend-indicator": "A small inline element showing the trend direction. Renders as a 10px equilateral triangle pointing up (▲, color: --d-success) for positive percentage change, pointing down (▼, color: --d-error) for negative change, or a horizontal line (—, color: text-muted) for zero/negligible change. The threshold for 'negligible' is configurable but defaults to ±0.1%. The indicator is vertically centered with the sparkline and value label. It uses the same font-size as the value label (text-xs) for consistent sizing. An aria-hidden='true' attribute is set since the value label conveys the same information textually.",
+      "value-label": "A text element displaying the percentage change value. Format: sign + number + '%' (e.g., '+12.4%', '-3.1%', '0.0%'). Font: text-xs (12px), font-medium (500 weight). Color: --d-success for positive, --d-error for negative, text-muted for zero/neutral. White-space: nowrap to prevent wrapping within the cell. The label has a title attribute with the full description (e.g., 'Increased 12.4% over the last 7 days') for additional context on hover. min-width: 48px to prevent layout shift between positive and negative values. text-align: right."
+    }
+  },
+  "accessibility": {
+    "role": "img",
+    "aria-label": "Sparkline showing {metric} trend: {direction} {percentage} over {period}",
+    "announcements": [
+      "Trend is {up|down|flat} at {percentage} change"
+    ],
+    "keyboard": [
+      "Tab: focus the sparkline cell (if interactive tooltips enabled)",
+      "Enter: show detailed data point values in a tooltip",
+      "Escape: dismiss tooltip"
+    ]
+  },
+  "responsive": {
+    "mobile": "Sparkline width reduces to 60px (viewBox scales proportionally). Value label may be hidden to save space, leaving only the sparkline and trend arrow. Trend indicator remains visible. The entire component min-width is 80px on mobile.",
+    "tablet": "Full 80px sparkline width. All three sub-components visible. Value label font remains text-xs. Component fits comfortably in standard table cells.",
+    "desktop": "Full 80px sparkline with optional hover tooltip showing exact data point values at each position along the path. Cursor changes to crosshair over the sparkline SVG when tooltips are enabled."
+  },
+  "motion": {
+    "micro": {
+      "path-draw": "stroke-dashoffset animation from full-length to 0, 600ms ease-out on initial render (line and area presets)",
+      "bar-grow": "each bar scaleY from 0 to 1 (transform-origin: bottom), staggered 30ms per bar, 300ms ease-out on initial render",
+      "dot-appear": "scale 0→1 + opacity 0→1, 200ms ease-out, delayed until path draw completes"
+    },
+    "transitions": {
+      "data-update": "path morphs from old shape to new shape via d attribute interpolation, 400ms ease-in-out",
+      "trend-change": "color crossfade 200ms ease when trend direction changes"
+    },
+    "ambient": {}
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "real-time-updates"
+  ],
+  "composition": {
+    "SparklineCell": "Container(inline-flex, align-center, gap-2) > [Sparkline(svg) + TrendIndicator + ValueLabel]",
+    "Sparkline": "SVG(80x24, viewBox, no-axes) > [Path(bezier|bars|area) + EndpointDot?]",
+    "TrendIndicator": "Indicator(triangle-up|triangle-down|dash, semantic-color, aria-hidden)",
+    "ValueLabel": "Text(text-xs, font-medium, semantic-color, nowrap) > '{sign}{value}%'"
+  }
+}