@decantr/content 3.8.0

package/patterns/character-sheet.json

@@ -0,0 +1,102 @@
+{
+  "id": "character-sheet",
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Character Sheet",
+  "description": "Character consistency tracker for AI video production with reference images, trait tags, appearance log, and consistency scoring across generated frames.",
+  "category": "media",
+  "tags": ["2026", "media", "character", "ai-video", "consistency", "reference"],
+  "components": ["CharacterAvatar", "TraitChip", "ReferenceGallery", "AppearanceLog", "ConsistencyScore"],
+  "default_preset": "detail",
+  "presets": {
+    "card": {
+      "description": "Compact character card with avatar, name, top traits, and small consistency score for list views and sidebars",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-3 _p-4 _bg-surface _rounded-lg _border _w-full _max-w-sm"
+      }
+    },
+    "detail": {
+      "description": "Expanded detail view with large avatar, reference gallery strip, trait chips, consistency ring, and scene appearance log for deep review",
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _flex-col _gap-6 _p-6 _bg-surface _rounded-xl _border _w-full"
+      }
+    },
+    "grid": {
+      "description": "Grid overview rendering all characters as equal-sized cards for cast overview and selection across a production",
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _grid-cols-3 _gap-4 _p-4 _w-full"
+      }
+    }
+  },
+  "visual_brief": "A large circular character avatar (120px diameter in detail preset, 64px in card) rendered with 2px ring border and subtle glow. Character name displayed prominently below in semibold 18px type. Trait chips arranged as a wrapping flex row below the name, each chip being a small pill (outfit: denim jacket, hair: dark curly, age: mid-30s, style: cinematic) with category-specific accent colors. Reference gallery shows 4-6 alternate angle images in a horizontal strip of 80x80px rounded squares with hover lift. Appearance log renders as a vertical scrollable list of scene cards, each showing a 48x27px thumbnail, scene number, and timestamp when the character appears. Consistency score is a circular progress ring (80px diameter) with stroke-width 8px, showing percentage numerically in center (e.g. '94%'), color-graded green>80, amber 60-80, red<60. Score indicates how well AI-generated frames match the original reference.",
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _flex-col _gap-6 _p-6 _bg-surface _rounded-xl _border _w-full",
+    "slots": {
+      "character-avatar": "Large circular avatar at the top displaying the primary reference image. 120px diameter with 2px ring border. Optional upload/change affordance on hover.",
+      "character-header": "Name and role block directly below avatar. Name in large semibold type, role label beneath in muted text.",
+      "trait-chips": "Wrapping flex row of trait pills grouped by category. Each chip shows category:value format with category-specific accent coloring. Editable: clicking a chip opens inline edit.",
+      "reference-gallery": "Horizontal strip of 4-6 alternate reference images as rounded 80x80px thumbnails. Add-reference affordance at end of strip. Clicking a thumbnail previews full-size.",
+      "consistency-score": "Circular progress ring rendering percentage score with color grading. Positioned alongside header in detail preset. Tooltip explains calculation on hover.",
+      "appearance-log": "Vertical scrollable list of scenes where the character appears. Each row has a small thumbnail, scene number, timestamp, and consistency delta for that specific appearance."
+    }
+  },
+  "responsive": {
+    "mobile": "Avatar reduces to 80px. Reference gallery becomes horizontal scroll. Appearance log limits to 5 items with 'view all' link. Trait chips wrap freely.",
+    "tablet": "Standard detail layout with slightly reduced spacing. Grid preset shows 2 columns.",
+    "desktop": "Full detail layout with all sections visible. Grid preset shows 3-4 columns."
+  },
+  "layout_hints": {
+    "identity_priority": "The character avatar, name, and consistency score should establish identity first. Traits, references, and appearance history deepen that read rather than competing with it.",
+    "reference_role": "Reference imagery should feel like authoritative source material attached to the character, not a separate gallery detached from the core sheet.",
+    "consistency_signal": "Consistency score should read as a focused quality indicator beside the identity cluster, not as a generic KPI widget."
+  },
+  "layout_hints": {
+    "identity_priority": "The character avatar, name, and consistency score should establish identity first. Traits, references, and appearance history deepen that read rather than competing with it.",
+    "reference_role": "Reference imagery should feel like authoritative source material attached to the character, not a separate gallery detached from the core sheet.",
+    "consistency_signal": "Consistency score should read as a focused quality indicator beside the identity cluster, not as a generic KPI widget."
+  },
+  "motion": {
+    "micro": {
+      "avatar-hover": "ring-glow intensify 200ms ease-out",
+      "trait-chip-hover": "scale(1.05) + bg-tint 150ms ease-out"
+    },
+    "transitions": {
+      "consistency-score-update": "stroke-dashoffset lerp 600ms ease-out with number counter",
+      "reference-add": "scale(0) to scale(1) 250ms spring"
+    },
+    "ambient": {
+      "score-low-warning": "pulse red glow 2s ease-in-out infinite when score < 60"
+    }
+  },
+  "interactions": [
+    "animate-on-mount",
+    "inline-edit",
+    "click-select"
+  ],
+  "composition": {
+    "CharacterSheet": "Root(d-surface, stack) > [CharacterAvatar + CharacterHeader + ConsistencyScore + TraitChip* + ReferenceGallery + AppearanceLog]",
+    "TraitChips": "FlexRow(wrap) > TraitChip*(d-annotation, data-category)",
+    "ReferenceGallery": "Strip(flex-row, scroll-x) > ReferenceThumbnail* + AddReferenceButton",
+    "AppearanceLog": "List(d-data) > AppearanceEntry*(d-row) > [Thumbnail + SceneInfo + DeltaBadge]"
+  },
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Character reference sheet",
+    "announcements": [
+      "Consistency score updated to {score}%",
+      "Reference image {index} added",
+      "Trait {name} updated to {value}"
+    ],
+    "keyboard": [
+      "Tab: cycle through traits and references",
+      "Enter: edit selected trait or open reference",
+      "Delete: remove selected reference",
+      "Arrow keys: navigate reference gallery"
+    ]
+  }
+}

package/patterns/chart-grid.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chart-grid",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chart Grid",
+  "description": "Grid of chart cards for dashboard data visualization",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody"
+      ],
+      "charts": []
+    }
+  },
+  "contained": false,
+  "components": [
+    "Card",
+    "CardHeader",
+    "CardBody"
+  ],
+  "default_preset": "dashboard",
+  "presets": {
+    "dashboard": {
+      "description": "2x2 grid of chart cards, each with a title, chart placeholder area, and legend",
+      "components": [
+        "Card",
+        "CardHeader",
+        "CardBody"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc2 _gap4",
+        "slots": {
+          "chart-card": "Repeated Card wrapping a chart placeholder area",
+          "chart-title": "Chart title in CardHeader with _textsm _fontmedium",
+          "chart-area": "Placeholder div with min-height and data-chart-type attribute",
+          "legend": "Simple legend row below chart area"
+        }
+      }
+    },
+    "wide": {
+      "description": "Single row of charts, side-scrollable on mobile",
+      "components": [
+        "Card"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _row _gap4 _overflow[auto]",
+        "slots": {
+          "chart-card": "Horizontally scrollable Card with chart placeholder",
+          "chart-title": "Chart title with _textsm _fontmedium",
+          "chart-area": "Placeholder div with min-height and data-chart-type attribute"
+        }
+      }
+    },
+    "mixed": {
+      "description": "Asymmetric layout: one large chart spanning 2 cols + two smaller charts",
+      "components": [
+        "Card"
+      ],
+      "layout": {
+        "layout": "grid",
+        "atoms": "_grid _gc1 _lg:gc2 _gap4",
+        "slots": {
+          "primary-chart": "Large chart Card spanning 2 columns with data-chart-type",
+          "secondary-charts": "Two smaller chart Cards in the second row"
+        }
+      }
+    }
+  },
+  "visual_brief": "Grid of chart cards for dashboard analytics. Each card is a contained surface (d-surface) with a compact header showing the chart title in small medium-weight text and an optional time-range selector. The chart area occupies the card body with a minimum height of 200px and renders line charts, bar charts, area charts, or pie charts via data-chart-type attributes. A simple horizontal legend sits below the chart area with colored dots and labels. The mixed preset features one large chart spanning two columns in the first row, with two smaller charts below. Cards have consistent rounded corners and border styling.",
+  "responsive": {
+    "mobile": "Single column — all charts stack vertically at full width. Chart minimum height reduces to 160px. Legend wraps to multiple lines if needed. Wide preset becomes vertical stack instead of horizontal scroll.",
+    "tablet": "Two-column grid activates. Mixed preset large chart still spans full width, smaller charts go side by side below. Chart height at 200px.",
+    "desktop": "Full two-column grid. Mixed preset spans correctly. Wide preset shows horizontal scrollable row. Charts at full minimum height with comfortable legend spacing."
+  },
+  "layout_hints": {
+    "grid_ownership": "This pattern owns the chart-card grid only. Parent dashboards should provide larger section framing, filters, or explanatory copy outside the chart grid itself.",
+    "chart_balance": "Keep chart titles, value context, and legends tightly associated with each chart so the grid reads as one analytical block instead of a collage of unrelated cards.",
+    "mixed_variant": "When one primary chart spans extra width, secondary charts should remain visually subordinate but rhythmically aligned beneath it."
+  },
+  "motion": {
+    "micro": "Chart cards may brighten their border or surface slightly on hover, and legends may fade in cleanly with the chart content.",
+    "transitions": "Chart data should animate in a restrained way that preserves readability. Filters or time-range changes should cross-fade or morph smoothly rather than jarringly re-rendering the whole grid."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-tooltip",
+    "stagger-children",
+    "real-time-updates"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Chart grid",
+    "keyboard": [
+      "If cards or legends are interactive, tab through each chart card and its controls in reading order."
+    ],
+    "announcements": [
+      "Chart title, metric intent, and key legend information should be exposed semantically rather than relying on color alone."
+    ]
+  },
+  "default_layout": {
+    "layout": "grid",
+    "atoms": "_grid _gc1 _lg:gc2 _gap4",
+    "slots": {
+      "chart-card": "Repeated Card wrapping a chart placeholder area",
+      "chart-title": "Chart title in CardHeader with _textsm _fontmedium",
+      "chart-area": "Placeholder div with min-height and data-chart-type attribute",
+      "legend": "Simple legend row below chart area"
+    }
+  },
+  "io": {
+    "consumes": [
+      "date-range",
+      "filters"
+    ],
+    "produces": []
+  },
+  "composition": {
+    "ChartGrid": "Grid(d-section, responsive: 1/2-col) > ChartCard[]",
+    "ChartCard": "Card(d-surface) > [CardHeader > Title(font-medium) + ChartArea(d-data, min-height) + Legend(d-annotation)]",
+    "Legend": "Row(gap-2) > LegendItem(dot + label)[]"
+  }
+}

package/patterns/chat-header.json

@@ -0,0 +1,105 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chat-header",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chat Header",
+  "description": "Contextual header for active conversation with editable title, status indicator, and action buttons.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "Badge",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Standard chat header with title and actions",
+      "components": [
+        "Button",
+        "Badge",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _px6 _py3 _borderB _bgbg",
+        "slots": {
+          "title": "Editable conversation subject/title",
+          "status": "Online/offline indicator or model name badge",
+          "actions": "Search, export, branch, settings buttons"
+        }
+      }
+    },
+    "compact": {
+      "description": "Minimal header for mobile or constrained layouts",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _aic _jcsb _px4 _py2 _borderB _bgbg",
+        "slots": {
+          "back": "Back navigation button",
+          "title": "Conversation title (truncated)",
+          "menu": "Overflow menu button"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _aic _jcsb _px6 _py3 _borderB _bgbg",
+    "slots": {
+      "title": "Editable conversation subject",
+      "status": "Online/offline or model name",
+      "actions": "Search, export, branch, settings"
+    }
+  },
+  "visual_brief": "Horizontal bar at the top of a chat panel with the conversation title on the left (editable on click, showing a pencil icon on hover), a status indicator dot (green for online, gray for offline, or a model name badge) in the center-left area, and action icon buttons on the right (search, export, branch, settings). The bar has a bottom border separator. Compact preset reduces padding and hides less-used actions behind a more-menu.",
+  "layout_hints": {
+    "title_priority": "Keep the title as the main anchor of the header. Status and action controls should support the title rather than crowd it.",
+    "compact_actions": "On narrow widths, collapse lower-priority actions into overflow before truncating the title into meaninglessness.",
+    "editable_title": "Inline title editing should preserve the header rhythm and should not cause the whole bar to jump when entering edit mode."
+  },
+  "responsive": {
+    "mobile": "Title truncates with ellipsis. Actions collapse into a single kebab menu. Status indicator moves below title.",
+    "tablet": "Full title visible. Two primary actions visible, rest in overflow menu.",
+    "desktop": "All elements visible inline. Title is editable on click. Full action button row."
+  },
+  "motion": {
+    "micro": "Action icons, status pills, and title-edit affordances may animate subtly on hover and focus over 120-180ms.",
+    "transitions": "Overflow menu reveal and title-edit mode changes should animate softly without shifting the overall header layout."
+  },
+  "interactions": [
+    "hover-reveal",
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "region",
+    "aria-label": "Chat header",
+    "keyboard": [
+      "Tab moves through title editing, status, and action controls in header order.",
+      "Keyboard users should be able to enter and exit title edit mode predictably."
+    ],
+    "announcements": [
+      "Conversation title, status, and current action context should be announced before secondary controls."
+    ],
+    "focus_management": "When entering title edit mode, move focus directly into the editable field and return it to the title trigger on cancel or save."
+  },
+  "composition": {
+    "ChatHeader": "Bar(d-surface, row, space-between, border-bottom) > [Title(editable, heading4) + StatusIndicator(d-annotation, dot: online|offline) + ActionButtons(d-interactive)]",
+    "ActionButtons": "Row(gap-2) > IconButton(variant: ghost)[]"
+  }
+}

package/patterns/chat-input.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chat-input",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chat Input",
+  "description": "Message composition area with auto-growing textarea, file attachments, mentions autocomplete, and keyboard shortcuts.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Button",
+    "icon"
+  ],
+  "default_preset": "standard",
+  "presets": {
+    "standard": {
+      "description": "Auto-expanding textarea with attach and send buttons",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _p4 _borderT _bgbg",
+        "slots": {
+          "attachments-preview": "Staged file thumbnails with remove buttons",
+          "textarea": "Auto-growing input with placeholder",
+          "actions": "Attach and send buttons"
+        }
+      }
+    },
+    "rich": {
+      "description": "Full-featured input with formatting toolbar",
+      "components": [
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _col _gap2 _p4 _borderT _bgbg",
+        "slots": {
+          "toolbar": "Formatting buttons (bold, italic, code, link)",
+          "attachments-preview": "Staged file thumbnails",
+          "mentions-popup": "@mention autocomplete dropdown",
+          "textarea": "Rich text input area",
+          "actions": "Attach and send buttons",
+          "counter": "Character/token count display"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "stack",
+    "atoms": "_flex _col _gap2 _p4 _borderT _bgbg",
+    "slots": {
+      "attachments-preview": "Staged file thumbnails with remove buttons",
+      "mentions-popup": "@mention autocomplete dropdown",
+      "textarea": "Auto-growing input with placeholder",
+      "actions": "Attach and send buttons"
+    }
+  },
+  "visual_brief": "Anchored input bar at the bottom of the chat viewport with a subtle top border separator. The textarea auto-grows from one line up to a max height, with a muted placeholder. An attachment button (paperclip icon) sits to the left and a send button (arrow-up icon) sits to the right, coloring to accent when the input has content. Staged file attachments render as thumbnail pills above the textarea with individual remove buttons.",
+  "layout_hints": {
+    "anchored_zone": "The input bar should feel anchored to the bottom of the chat shell and should not float with extra page-level spacing around it.",
+    "attachment_rhythm": "Attachment previews should sit in a stable row above the textarea and not push the send controls into awkward positions.",
+    "send_priority": "Send controls should remain visually clear when the composer grows; avoid layouts where the send button drifts away from the text area."
+  },
+  "responsive": {
+    "mobile": "Input bar stretches full width with 12px horizontal padding. Textarea font size bumps to 16px to prevent iOS zoom. Attachment previews scroll horizontally as a single row. Send button uses a compact 36px icon-only variant. Mentions popup renders as a bottom sheet rather than a dropdown.",
+    "tablet": "Standard layout with comfortable padding. Formatting toolbar (rich preset) shows as a single scrollable row above the textarea. Mentions popup renders as a floating dropdown anchored to the cursor position.",
+    "desktop": "Full-featured input with optional formatting toolbar. Send button shows label text alongside icon. Character/token counter appears in the bottom-right corner. Keyboard shortcut hints shown on hover (Enter to send, Shift+Enter for newline)."
+  },
+  "motion": {
+    "textarea-grow": "Height transitions with a 150ms ease-out when content grows or shrinks. No animation on initial render.",
+    "send-button": "Send icon rotates 45 degrees and scales to 0.9 on press, returns on release (100ms spring). Button color transitions from muted to accent over 200ms when input becomes non-empty.",
+    "attachment-add": "New attachment thumbnails scale from 0.8 to 1.0 with 150ms ease-out. Remove animation scales to 0.8 and fades out over 120ms.",
+    "mentions-popup": "Dropdown slides down from the cursor position with 150ms ease-out and fades in. Dismiss reverses the animation."
+  },
+  "interactions": [
+    "inline-edit",
+    "keyboard-navigation",
+    "animate-on-mount"
+  ],
+  "accessibility": {
+    "role": "form",
+    "aria-label": "Chat input",
+    "keyboard": [
+      "Enter sends when the composer is in send mode, Shift+Enter inserts a newline.",
+      "Tab moves between attachment controls, the composer, and the send button."
+    ],
+    "announcements": [
+      "Attachment add and remove actions should be announced.",
+      "Mention suggestions should be announced as the popup opens and changes."
+    ],
+    "focus_management": "Keep focus in the composer after sending when appropriate, and move focus predictably into mention or attachment controls only when the user explicitly enters them."
+  }
+}

package/patterns/chat-message.json

@@ -0,0 +1,122 @@
+{
+  "$schema": "https://decantr.ai/schemas/pattern.v2.json",
+  "id": "chat-message",
+  "version": "1.0.0",
+  "decantr_compat": ">=2.0.0",
+  "name": "Chat Message",
+  "description": "Single message bubble for user or AI responses. Supports markdown rendering, code blocks, attachments, reactions, and edit mode.",
+  "dependencies": {
+    "patterns": {},
+    "styles": {},
+    "requires_core": {
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "charts": []
+    }
+  },
+  "components": [
+    "Avatar",
+    "Button",
+    "icon"
+  ],
+  "default_preset": "assistant",
+  "presets": {
+    "user": {
+      "description": "Right-aligned message bubble with primary-tinted background for user messages",
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _jce _gap3 _py2",
+        "slots": {
+          "content": "Message content with full markdown rendering",
+          "timestamp": "Relative or absolute timestamp (optional)",
+          "actions": "Copy, edit, delete action buttons on hover"
+        }
+      }
+    },
+    "assistant": {
+      "description": "Left-aligned message bubble with surface background and avatar for AI responses",
+      "components": [
+        "Avatar",
+        "Button",
+        "icon"
+      ],
+      "layout": {
+        "layout": "row",
+        "atoms": "_flex _jcs _gap3 _py2",
+        "slots": {
+          "avatar": "AI avatar or icon",
+          "sender": "Name/label (optional)",
+          "content": "Message content with full markdown rendering",
+          "timestamp": "Relative or absolute timestamp",
+          "actions": "Copy, react, branch action buttons on hover"
+        }
+      }
+    },
+    "system": {
+      "description": "Centered system message with muted styling for status updates",
+      "components": [
+        "icon"
+      ],
+      "layout": {
+        "layout": "stack",
+        "atoms": "_flex _jcc _py2",
+        "slots": {
+          "content": "System message text"
+        }
+      }
+    }
+  },
+  "default_layout": {
+    "layout": "row",
+    "atoms": "_flex _jcs _gap3 _py2",
+    "slots": {
+      "avatar": "Optional avatar/icon",
+      "sender": "Name/label",
+      "timestamp": "Relative or absolute timestamp",
+      "content": "Full markdown rendering with code blocks, images, links",
+      "actions": "Copy, edit, delete, react, branch buttons"
+    }
+  },
+  "visual_brief": "Message bubble layout with avatar on the left (user messages) or a model icon (assistant messages). Sender name in small bold text with a relative timestamp to the right. Content area supports full markdown: paragraphs, headings, bold/italic, bulleted lists, code blocks with syntax highlighting and copy button, inline code, images, and links. Action buttons (copy, edit, delete, react, branch) appear on hover in a small row above or below the message. User messages align left with a subtle surface background. Assistant messages use a slightly different surface shade. System messages are centered with muted italic text.",
+  "responsive": {
+    "mobile": "Avatar size reduces to 28px. Action buttons appear on long-press instead of hover. Code blocks scroll horizontally. Message content takes full width minus avatar.",
+    "tablet": "Standard layout with 32px avatars. Actions appear on hover/tap.",
+    "desktop": "Full layout with 36px avatars, hover actions, and generous content width for code blocks."
+  },
+  "layout_hints": {
+    "message_priority": "Lead with sender role and content first, with timestamp and actions clearly secondary. The bubble should feel like a communication artifact rather than a generic card.",
+    "role_clarity": "User, assistant, and system variants should preserve a stable reading pattern while making authorship obvious at a glance.",
+    "action_reveal": "Hover or long-press actions should support the message without disrupting the conversational flow or changing bubble geometry dramatically."
+  },
+  "motion": {
+    "micro": "Hover actions, copy affordances, and reaction states may fade or sharpen in gently around the message bubble.",
+    "transitions": "Streaming or appended assistant content should feel readable and calm, preserving message continuity rather than performing dramatic reveal animations."
+  },
+  "interactions": [
+    "animate-on-mount",
+    "hover-reveal"
+  ],
+  "accessibility": {
+    "role": "article",
+    "aria-label": "Chat message",
+    "keyboard": [
+      "Message actions should be reachable after the message content in a predictable order."
+    ],
+    "announcements": [
+      "Sender role, timestamp, and message content should be exposed semantically so conversation flow remains understandable without relying on alignment alone."
+    ]
+  },
+  "composition": {
+    "ChatMessage": "Row(d-surface, align: role) > [Avatar? + MessageBody + Timestamp?(mono-data, text-xs)]",
+    "MessageBody": "Bubble(d-surface, variant: role) > [SenderName?(font-bold, text-sm) + Content(markdown) + CodeBlock?(syntax-highlight, copy-button)]",
+    "MessageActions": "Row(d-interactive, show-on-hover) > IconButton(variant: ghost)[]"
+  }
+}