@lukeashford/aurelius 4.6.0 → 4.8.0

package/dist/styles/deliverable.css

@@ -258,6 +258,58 @@
   pointer-events: auto;
 }
 
+/* === Compact card ===
+ * Surfaced in chat-tree-style artifact lists where the full multi-page
+ * renderer would be cramped. Borrows the cover treatment but constrains it
+ * to card dimensions and adds a footer that invites the viewer to expand
+ * to the full presentation.
+ */
+
+@utility deliverable-card {
+  --deliverable-accent: var(--color-gold);
+  display: flex;
+  flex-direction: column;
+}
+
+@utility deliverable-card-cover {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-2);
+  padding: var(--spacing-6);
+  border-bottom: 1px solid color-mix(in oklab, var(--deliverable-accent) 30%, transparent);
+}
+
+@utility deliverable-card-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+  color: var(--color-silver);
+  font-size: var(--text-xs);
+}
+
+@utility deliverable-card-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-2xl);
+  line-height: var(--text-2xl--line-height);
+  color: var(--deliverable-accent);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+@utility deliverable-card-subtitle {
+  font-size: var(--text-sm);
+  color: var(--color-silver);
+}
+
+@utility deliverable-card-meta {
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-3) var(--spacing-6);
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wider);
+  color: var(--color-silver);
+}
+
 /* === Print path ===
  * Same React tree, different paint. The strategy:
  *   - Cover gets its own named page (`@page cover`) with no margins so it

package/dist/styles/theme.css

@@ -19,6 +19,7 @@
   /* Core RGB helpers (reduce repeated rgba() literals) */
   --ink-rgb: 0 0 0;
   --gold-rgb: 201 162 39;
+  --obsidian-rgb: 10 10 10;
   --glass-rgb: 20 20 20;
 
   /* Gold spectrum (derived from one base where possible) */
@@ -175,12 +176,14 @@
   /* ===== ANIMATIONS ===== */
   --animate-fade-in: fade-in 200ms ease-out;
   --animate-fade-out: fade-out 150ms ease-in;
+  --animate-lightbox-in: lightbox-in 220ms var(--ease-smooth);
   --animate-slide-in-right: slide-in-right 300ms var(--ease-smooth);
   --animate-slide-out-right: slide-out-right 200ms ease-in;
   --animate-pulse-glow: pulse-glow 2s ease-in-out infinite;
   --animate-cursor-blink: cursor-blink 1s steps(1) infinite;
   --animate-snake-spin: snake-spin 1.5s linear infinite;
   --animate-snake-travel: snake-travel 1.5s ease-in-out infinite;
+  --animate-pulse-once: pulse-once 600ms ease-out;
 
   /* ===== LAYOUT TOKENS ===== */
   --container-sm: 640px;
@@ -208,6 +211,17 @@
   }
 }
 
+@keyframes lightbox-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
 @keyframes slide-in-right {
   0% {
     transform: translateX(100%);
@@ -240,6 +254,15 @@
   }
 }
 
+@keyframes pulse-once {
+  0% {
+    background-color: rgb(var(--gold-rgb) / 0.3);
+  }
+  100% {
+    background-color: transparent;
+  }
+}
+
 @keyframes cursor-blink {
   0%,
   50% {
@@ -463,6 +486,54 @@
   }
 }
 
+/* ===== COMPONENT STYLES =====
+   These are component-level CSS classes that use design tokens but need
+   cascade-based context overrides — something Tailwind utilities applied
+   directly on a JSX element can't do without prop drilling. */
+
+/* Mention chip — colours come from CSS variables so the parent prose
+   context (`.prose-inherit` user bubble vs `.prose-invert` assistant bubble)
+   can override them via the cascade. The defaults below are the
+   gold-on-dark variant suitable for the standard charcoal background. */
+@utility aurelius-mention {
+  --aurelius-mention-bg: rgb(var(--gold-rgb) / 0.1);
+  --aurelius-mention-border: rgb(var(--gold-rgb) / 0.3);
+  --aurelius-mention-text: var(--color-gold);
+  --aurelius-mention-hover-bg: rgb(var(--gold-rgb) / 0.2);
+  --aurelius-mention-x: rgb(var(--gold-rgb) / 0.6);
+  --aurelius-mention-x-hover: var(--color-gold);
+
+  background-color: var(--aurelius-mention-bg);
+  border-color: var(--aurelius-mention-border);
+  color: var(--aurelius-mention-text);
+  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+.aurelius-mention:hover {
+  background-color: var(--aurelius-mention-hover-bg);
+}
+
+/* × button inside the chip — colour tracks the chip's text contrast so it
+   remains visible in both the gold-on-dark and dark-on-gold variants. */
+@utility aurelius-mention-x {
+  color: var(--aurelius-mention-x);
+  transition: color 150ms ease;
+}
+.aurelius-mention-x:hover {
+  color: var(--aurelius-mention-x-hover);
+}
+
+/* When the chip lives inside a user bubble (gold background, dark text),
+   gold-on-gold disappears. Override the variables to a dark contrast that
+   reads cleanly on the gold backdrop. */
+.prose-inherit .aurelius-mention {
+  --aurelius-mention-bg: rgb(var(--obsidian-rgb) / 0.12);
+  --aurelius-mention-border: rgb(var(--obsidian-rgb) / 0.45);
+  --aurelius-mention-text: rgb(var(--obsidian-rgb) / 0.9);
+  --aurelius-mention-hover-bg: rgb(var(--obsidian-rgb) / 0.2);
+  --aurelius-mention-x: rgb(var(--obsidian-rgb) / 0.6);
+  --aurelius-mention-x-hover: var(--color-obsidian);
+}
+
 /* ===== UTILITY CLASSES ===== */
 @utility text-gradient-gold {
   background: linear-gradient(
@@ -494,7 +565,7 @@
 
 /* Flex utility for collapsing to zero size (0 0 0%) - use with flex-1 for expand/collapse animations */
 @utility flex-zero {
-  flex: 0 0 0%;
+  flex: 0 0 0;
 }
 
 @utility font-heading {

package/llms.md

@@ -102,41 +102,46 @@ Import from `@lukeashford/aurelius`:
 | Alert | variant (info, success, warning, error), title |
 | ArtifactCard | artifact, onExpand, loading |
 | ArtifactGroup | node, onClick |
+| ArtifactLightboxBody | artifact |
 | ArtifactVariantStack | node, onExpandArtifact, onGroupClick |
 | AttachmentPreview | attachments, onRemove, removable, maxVisible, onOpen |
-| AudioCard | src, title, subtitle, playing, controls, volume, muted, loop, mediaClassName, contentClassName, playerProps, height, loading |
+| AudioCard | src, title, subtitle, handle, playing, controls, volume, muted, loop, mediaClassName, contentClassName, playerProps, height, loading |
 | Avatar | src, alt, name, size (xs, sm, md, lg, xl, 2xl), status (online, offline, busy) |
 | Badge | variant (default, gold, success, error, warning, info) |
 | BrandIcon | size (sm, md, lg), variant (solid, outline) |
 | Breadcrumb | separator, current |
 | Button | variant (primary, important, elevated, outlined, featured, ghost, danger), size (sm, md, lg, xl), loading |
-| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected, noPadding, loading, title, subtitle, action, align, aspect, position |
+| Card | variant (default, elevated, outlined, ghost, featured), interactive, selected, noPadding, loading, title, subtitle, action, handle, handle, align, aspect, position |
 | Checkbox | label |
 | Col | span, offset, order |
 | ColorSwatch | color, label |
+| Combobox | items, selectedIndex, renderItem, onSelectItem, getItemKey, emptyState, maxHeight |
 | Container | size (sm, md, lg, xl, fluid, responsive) |
+| DeliverableCard | deliverable, title, subtitle, handle, loading |
 | Dialog | description, confirmText, cancelText, onConfirm, onCancel, confirmVariant, isLoading, description, acknowledgeText, variant, description, placeholder, defaultValue, submitText, cancelText, onSubmit, onCancel, isLoading |
 | Divider | orientation (horizontal, vertical), variant (solid, dashed, dotted), label, color |
 | Drawer | isOpen, onClose, position (left, right, top, bottom), title, size, children, className |
 | FileChip | name, size, type, status (pending, uploading, uploaded, analyzing, analyzed, upload_failed, analysis_failed), previewUrl, onRemove, removable, error, artifactId, onOpen |
 | HelperText | error |
-| ImageCard | src, alt, title, subtitle, aspectRatio (${number}/${number}), objectFit, overlay, mediaClassName, contentClassName, loading |
+| ImageCard | src, alt, title, subtitle, handle, aspectRatio (${number}/${number}), objectFit, overlay, mediaClassName, contentClassName, loading |
 | Input | error, leadingIcon, trailingIcon |
 | InputGroup | children |
 | Label | required |
+| Lightbox | onClose, actions, caption, children, className |
 | List | variant, ordered, leading, trailing, interactive, selected, disabled, primary, secondary |
-| MarkdownContent | content, isMarkdown, sanitizeConfig, isStreaming, cursorClassName |
+| MarkdownContent | children |
+| MentionChip | name, title, leadingIcon, onClick, onRemove |
 | Menu | children, open, onOpenChange, asChild, align, side, icon, destructive |
 | Message | variant (user, assistant), content, isStreaming, branchInfo, actions, hideActions, attachments, onAttachmentOpen, onJumpHere, isActive, onClick, label, children, disabled |
 | Modal | isOpen, onClose, title, children, className |
 | Navbar | fixed, bordered, position, active, active |
 | Pagination | page, totalPages, onPageChange, siblingCount, showEdges |
-| PdfCard | src, title, subtitle, height, mediaClassName, contentClassName, loading |
+| PdfCard | src, title, subtitle, handle, height, mediaClassName, contentClassName, loading |
 | Popover | children, trigger, position (top, bottom, left, right), align (start, center, end), open, onOpenChange, closeOnClickOutside |
 | Progress | value, max, size (sm, md, lg), variant (default, success, warning, error), showValue, formatValue, indeterminate |
 | Radio | label |
 | Row | gutter, gutterX, gutterY, justify (start, center, end, between, around, evenly), align (start, center, end, stretch, baseline) |
-| ScriptCard | title, subtitle, elements, maxHeight, loading |
+| ScriptCard | title, subtitle, handle, elements, maxHeight, loading |
 | SectionHeading | level (h2, h3) |
 | Select | error, options |
 | Skeleton | children |
@@ -148,16 +153,16 @@ Import from `@lukeashford/aurelius`:
 | Switch | checked, defaultChecked, onCheckedChange, label |
 | Table | responsive, hoverable, selected, sortable, sortDirection |
 | Tabs | defaultValue, value, onValueChange, value, value, forceMount |
-| TextCard | content, title, subtitle, isMarkdown, maxHeight, contentClassName, loading |
+| TextCard | content, title, subtitle, handle, isMarkdown, maxHeight, contentClassName, loading |
 | Textarea | error |
 | Toast | children, position (top-right, top-left, bottom-right, bottom-left, top-center, bottom-center), defaultDuration |
 | Tooltip | content, children, open, side (top, right, bottom, left) |
-| VideoCard | src, title, subtitle, aspectRatio (${number}/${number}), playing, controls, light, volume, muted, loop, mediaClassName, contentClassName, playerProps, loading |
-| ArtifactsPanel | nodes, loading, openArtifactId, onArtifactClosed, artifactCount, onExpand |
+| VideoCard | src, title, subtitle, handle, aspectRatio (${number}/${number}), playing, controls, light, volume, muted, loop, mediaClassName, contentClassName, playerProps, loading |
+| ArtifactsPanel | nodes, loading, openArtifactId, onArtifactClosed, getArtifactActions, artifact, ctx, artifactCount, onExpand |
 | BranchNavigator | current, total, onPrevious, onNext, size, showIcon |
-| ChatInput | position (centered, bottom), placeholder, helperText, onSubmit, disabled, animate, isStreaming, onStop, attachments, onAttachmentsChange, onAttachmentRemove, showAttachmentButton, acceptedFileTypes, notice, onInputChange, initialInputValue, autoFocus |
-| ChatInterface | messages, conversationTree, onTreeChange, conversations, onMessageSubmit, onEditMessage, onRetryMessage, onJumpHere, onJumpToLatest, onStop, onSelectConversation, onNewChat, onRenameConversation, isStreaming, isThinking, thinkingLabel, placeholder, emptyStateHelper, emptyState, showAttachmentButton, enableMessageActions, attachments, onAttachmentsChange, onAttachmentRemove, onAttachmentOpen, artifactNodes, isArtifactsPanelOpen, onArtifactsPanelOpenChange, tasks, tasksTitle, onStopAllTasks |
-| ChatView | items, latestUserMessageIndex, isStreaming, isThinking, thinkingLabel, onScroll |
+| ChatInput | position (centered, bottom), placeholder, helperText, onSubmit, disabled, animate, isStreaming, onStop, attachments, onAttachmentsChange, onAttachmentRemove, showAttachmentButton, acceptedFileTypes, notice, onInputChange, initialInputValue, autoFocus, textareaRef, onTextareaKeyDown |
+| ChatInterface | messages, conversationTree, onTreeChange, conversations, onMessageSubmit, onEditMessage, onRetryMessage, onJumpHere, onJumpToLatest, onStop, onSelectConversation, onNewChat, onRenameConversation, isStreaming, isThinking, thinkingLabel, placeholder, emptyStateHelper, emptyState, showAttachmentButton, enableMessageActions, attachments, onAttachmentsChange, onAttachmentRemove, onAttachmentOpen, artifactNodes, isArtifactsPanelOpen, onArtifactsPanelOpenChange, getArtifactActions, artifact, ctx |
+| ChatView | items, latestUserMessageIndex |
 | Checkpoint | name, executionKind (task, submit, rename, init, ingest), status (completed, failed, cancelled), isActive, muted, branchInfo, onJumpHere |
 | GreyedDivider | messageCount, checkpointCount, onJumpToLatest |
 | HistoryPanel | conversations, onSelectConversation, onNewChat, onRenameConversation |
@@ -210,6 +215,7 @@ based on the artifact type.
 - **Artifact.isPending**: * Whether this artifact is still loading (shows skeleton)
 - **Artifact.fullWidth**: * Whether the artifact should span full width in the grid
 - **Artifact.scriptElements**: * For html artifacts - structured script elements (used by ScriptCard)
+- **Artifact.deliverable**: * For deliverable artifacts - the resolved presentation spec, every artifact reference already inflated. Rendered as a compact card that links to the full DeliverableRenderer; surfaces the cover info and section count.
 - **artifact**: * The artifact object to display
 - **onExpand**: * Callback when the artifact should be expanded/opened
 - **loading**: * Whether the artifact is still loading
@@ -223,6 +229,22 @@ shows the total items.
 - **node**: * The GROUP node to display
 - **onClick**: * Called when the group is clicked (e.g. to navigate into it)
 
+**ArtifactLightboxBody**
+Picks the bare body for an artifact when displayed inside a {@link Lightbox}.
+
+Each kind decides its own internal layout — an image aspect-fits the canvas,
+a deliverable scrolls full-bleed, and so on. Crucially, none of these wrap
+themselves in another Card frame: the lightbox already provides the canvas,
+and a card-inside-modal produces the nested-frame look that signals "cheap
+generic container." Kinds that don't yet have a dedicated bare body fall
+back to {@link ArtifactCard} — adequate, but the stack-of-frames feel is the
+thing to fix next when those kinds matter.
+
+Callers don't choose the body explicitly; the registry dispatches by
+`artifact.type`. To add a kind, extend the switch — never branch on type at
+the call site.
+
+
 **ArtifactVariantStack**
 Renders a VARIANT_SET node as a Card with the set label as title.
 Children are displayed in a horizontal row inside the card body.
@@ -247,8 +269,44 @@ navigate for groups).
 - **onOpen**: * Click handler for chips with an artifactId. When set, chips that carry an artifactId become clickable and forward the id to this handler.
 
 **AudioCard**
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
 - **playerProps**: Forwarded to the underlying ReactPlayer.
 
+**Card**
+- **handle**: * Optional addressable handle (the artifact's `name` / `@-handle`). Renders as a tertiary monospace line below the subtitle, prefixed with `@`. Click copies `@<handle>` to the clipboard and pulses the handle once. Use to surface the typed identifier filmmakers reference in chat.
+
+**Combobox**
+Floating panel for inline autocompletes — `@`-mention pickers, slash-command menus, and
+the like. The panel is unstyled-positioned (`absolute`) so the caller controls placement
+via wrapper, `style`, or by mounting it inside their own positioned container; this keeps
+the component agnostic to how the trigger position is computed (caret coordinates, ref
+rect, popover anchor).
+
+Pair with `useComboboxNav` for the standard arrow-key + Enter/Escape behaviour.
+
+- **items**: * Items to display in the panel. The caller is responsible for filtering before passing.
+- **selectedIndex**: * Index of the currently highlighted (focused, not yet picked) item. Drive this from `useComboboxNav` for the standard arrow-key behaviour, or manage it yourself.
+- **renderItem**: * Render one row. `isSelected` reflects the keyboard highlight; click and hover styling are applied by the panel.
+- **onSelectItem**: * Called when the user clicks a row. Use the same handler you call from the keyboard's Enter key to keep mouse and keyboard paths consistent.
+- **getItemKey**: * Stable key per item. Required because the panel re-mounts rows when `items` changes.
+- **emptyState**: * Optional node rendered when `items` is empty. Skip the panel entirely if you'd rather hide it on no-match.
+- **maxHeight**: * Maximum pixel height of the scrollable list. The panel itself sizes to its content up to this cap; rows beyond it scroll within the panel. @default 256
+- **ComboboxNav.handleKeyDown**: * Standard handler for ArrowUp / ArrowDown / Enter / Escape. Returns true when a key was consumed — the caller should skip its own handling for those events.
+- **UseComboboxNavOptions.onSelect**: * Called when the user presses Enter on the highlighted item.
+- **UseComboboxNavOptions.onDismiss**: * Called when the user presses Escape.
+
+**DeliverableCard**
+Compact preview of a deliverable for surfaces that can't host the full
+multi-page renderer (chat tree, artifact lists). Surfaces the deliverable's
+cover info plus its section count. The whole card is clickable — the
+affordance is the same expand-icon overlay that {@link ArtifactCard} shows
+for every artifact kind, so we don't add a "Open preview" lure here.
+
+- **deliverable**: * Resolved deliverable spec — every artifact reference already inflated. Same shape the full DeliverableRenderer accepts.
+- **title**: Optional override for the cover title (otherwise derived from the spec).
+- **subtitle**: Optional subtitle shown below the title.
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
+
 **FileChip**
 - **name**: * File name to display
 - **size**: * File size in bytes (optional, will be formatted)
@@ -261,11 +319,51 @@ navigate for groups).
 - **artifactId**: * Backend artifact id, set once the upload has been integrated. When both `artifactId` and `onOpen` are present, the chip becomes clickable.
 - **onOpen**: * Click handler invoked with `artifactId` when the chip is clicked. Compose-box (pre-integrate) chips should not pass this — the chip stays non-clickable except for its remove button.
 
+**ImageCard**
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
+
+**Lightbox**
+Full-bleed modal canvas for one piece of content. Premium-haptic alternative
+to a bordered modal: deep void backdrop, scale-fade entrance, no inner frame,
+floating glass action cluster top-right.
+
+The component is content-agnostic — it ships chrome, not artifact knowledge.
+Compose it with kind-aware bodies and action sets to build the artifact
+viewer; reach for it directly any time a single piece of content needs the
+full screen.
+
+Dismiss surfaces: ESC, backdrop click (outside the sized content area),
+close button in the action cluster.
+
+- **onClose**: * Called when the user dismisses the lightbox (ESC, backdrop click, X button). The caller owns the open/closed state — when `onClose` fires, unmount the lightbox.
+- **actions**: * Optional kind-specific actions placed before the close button in the floating top-right cluster. Typically buttons like "Share" or "Download". The cluster always renders the close button; pass `undefined` if the only affordance is dismiss.
+- **caption**: * Optional caption shown bottom-centre over the backdrop. Use for short metadata like a title and subtitle. Non-interactive — clicks pass through to the backdrop and dismiss.
+- **children**: * The artifact body. Sits directly on the backdrop with no inner frame — the body is responsible for its own layout (object-contain image, scrollable deliverable, readable text column, etc.). Click events whose target is the sized content wrapper (i.e. the empty area around the body) dismiss the lightbox; clicks on the body itself do not.
+
 **MarkdownContent**
-- **content**: * Content to display (can be Markdown or HTML)
-- **isMarkdown**: * Whether the content should be treated as Markdown @default true
-- **isStreaming**: * When true, injects a streaming cursor at the end of the content
-- **cursorClassName**: * Additional classes for the streaming cursor
+Renders Markdown content into a real React tree via `react-markdown`. Drop-in for prose
+surfaces (chat messages, artifact bodies, deliverable text). Optional `mentionRenderer`
+adds inline `@artifact_name` chip rendering — see prop docs.
+
+Raw HTML in the source is escaped (not rendered) by react-markdown's defaults; this is
+intentional and safer than the previous pipeline. Pass markdown.
+
+
+**MentionChip**
+Inline chip representing an `@name` artifact mention. Use anywhere a stable reference to a
+project artifact appears — typed input previews, rendered chat messages, deliverable
+descriptions. Renders the name in monospace with a leading `@` glyph and a gold-tinted border,
+mirroring the addressable handle the user sees on the artifact card.
+
+Pair with the `Combobox` primitive for the typing surface, and with the
+`MarkdownContent` `mentionRenderer` prop to render mentions inline inside rendered chat
+messages — typically `mentionRenderer={(name) => <MentionChip name={name} … />}`.
+
+- **name**: * The artifact name (the @-handle, without the leading @).
+- **title**: * Optional human-readable title; shown in the hover tooltip alongside the name.
+- **leadingIcon**: * Optional icon rendered before the name — typically a kind glyph (e.g. `FileImage`, `FileVideo`) or `HelpCircle` for unknown / stale references. Sized at `w-3 h-3` to match the chip's text scale.
+- **onClick**: * Called when the chip is clicked. When provided, the chip becomes keyboard-focusable and gains a hover affordance.
+- **onRemove**: * Called when the remove (×) button is clicked. When provided, an × appears on hover/focus. Use only on input-side previews; rendered messages should leave this unset.
 
 **Message**
 - **MessageBranchInfo.current**: * Current branch index (1-based)
@@ -292,6 +390,7 @@ A card for displaying PDF documents with an embedded viewer.
 - **src**: * URL of the PDF file
 - **title**: * Title of the document
 - **subtitle**: * Subtitle or document metadata
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
 - **height**: * Height of the PDF viewer
 - **mediaClassName**: * Optional class name for the media container
 - **contentClassName**: * Optional class name for the content container
@@ -331,6 +430,7 @@ Follows standard screenplay formatting conventions:
 - **ScriptElement.content**: * The text content of the element
 - **title**: * Title of the script (shown at top)
 - **subtitle**: * Subtitle/metadata (e.g., "30-second spot • Directed by AI Creative")
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
 - **elements**: * Array of script elements in order. Available types: 'scene-heading', 'action', 'character', 'dialogue', 'parenthetical', 'transition', 'title', 'subtitle'
 - **maxHeight**: * Maximum height before scrolling (default: 16rem / 256px)
 
@@ -352,11 +452,13 @@ A card for displaying text content, supporting Markdown and HTML formatting.
 - **content**: * Text content to display (Markdown, HTML, or plain text)
 - **title**: * Optional title for the card
 - **subtitle**: * Optional subtitle or metadata
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
 - **isMarkdown**: * Whether the content should be treated as Markdown @default true
 - **maxHeight**: * Maximum height of the content area before scrolling @default '16rem'
 - **contentClassName**: * Optional class name for the content container
 
 **VideoCard**
+- **handle**: The artifact's `@-handle` — see `Card.Header.handle`.
 - **playerProps**: Forwarded to the underlying ReactPlayer.
 
 **ArtifactsPanel**
@@ -378,6 +480,7 @@ moving back from the content.
 - **loading**: * Whether artifacts are still loading (show skeletons)
 - **openArtifactId**: * When set to a non-null id, surfaces the same expanded artifact card the panel grid would. Drives chip click-through from outside the panel. Pair with `onArtifactClosed` so the parent can clear its controller state when the user dismisses the modal.
 - **onArtifactClosed**: * Called when the user closes the expanded card (X button or backdrop). The parent owns whether subsequent renders re-open by re-supplying `openArtifactId`.
+- **getArtifactActions**: * Resolves the floating action cluster shown over the lightbox when an artifact is opened. Switch on `artifact.type` and return the host-owned buttons for that kind (e.g. Share + Download for deliverables, Download for images). Aurelius ships the close affordance itself; return only the kind-specific actions, or `null` when there are none. The `ctx.onClose` helper lets actions dismiss the lightbox after a successful operation.
 
 **BranchNavigator**
 BranchNavigator provides a UI for switching between conversation branches.
@@ -422,6 +525,8 @@ Features:
 - **onInputChange**: * Called whenever the input value changes, giving the consumer access to the current text
 - **initialInputValue**: * Initial value for the input, used for state restoration (e.g. from DB or localStorage)
 - **autoFocus**: * Whether to automatically focus the input when it becomes enabled
+- **textareaRef**: * Optional ref forwarded to the underlying `<textarea>`. Use this to drive an inline autocomplete (e.g. an `@`-mention picker) — read selection/caret position, mirror the textarea for caret coordinates, or imperatively update its value.
+- **onTextareaKeyDown**: * Optional keydown hook that runs before the input's own handling. Call `e.preventDefault()` to stop ChatInput from acting on the event — for example, to keep Enter from submitting while an autocomplete is consuming it. The submit-on-Enter and default newline behaviours both check `defaultPrevented` and skip when set.
 
 **ChatInterface**
 ChatInterface is the main orchestrator for a full-featured chat experience.
@@ -477,9 +582,7 @@ artifactNodes prop.
 - **artifactNodes**: * Top-level artifact tree nodes for the artifacts panel.
 - **isArtifactsPanelOpen**: * Whether the artifacts panel is currently open (controlled). When set, maps to the tool panel system — opens the artifacts tool.
 - **onArtifactsPanelOpenChange**: * Called when the artifacts panel is opened or closed (controlled).
-- **tasks**: * Tasks to display in the todos list tool panel. Shows a list of tasks with status indicators.
-- **tasksTitle**: * Title for the todos list @default "Tasks"
-- **onStopAllTasks**: * Called when the "Stop All Tasks" button is clicked in the tasks panel. Only shown when at least one task has in_progress status. The consumer app decides what stopping means (cancel API calls, mark tasks cancelled, etc.). * May return a Promise. While the Promise is pending, the button becomes disabled and displays a spinner with "Stopping tasks" so the user knows the stop request is in flight.
+- **getArtifactActions**: * Resolves the floating action cluster shown over the artifact lightbox. The host switches on `artifact.type` and returns the right buttons for that kind (e.g. Share + Download for deliverables, Download for images). Aurelius ships the close affordance itself; return only the kind-specific actions, or `null` when none. Use `ctx.onClose` to dismiss the lightbox after a successful operation.
 
 **ChatView**
 Renders a heterogeneous chat stream — messages, checkpoints, and the
@@ -497,10 +600,6 @@ Key behaviors:
 - **ChatViewMessageItem.onJumpHere**: * Click handler for the bubble. When provided, the bubble becomes a navigational anchor that moves the active leaf to this node. Aurelius suppresses the click for `isActive` rows, link / button targets inside the bubble, and active text selections.
 - **items**: * Rows to render in the chat stream. Heterogeneous: messages, checkpoints, and the greyed-future divider live in the same list, ordered top-to-bottom.
 - **latestUserMessageIndex**: * Index of the latest user-message row to anchor scroll to. When this index changes, the corresponding row scrolls to the top. Defaults to the last-found user message in `items`.
-- **isStreaming**: * Whether the assistant is currently streaming a response. Drives the streaming cursor on the last assistant message and the thinking indicator.
-- **isThinking**: * Whether to show the thinking indicator (between user message and response).
-- **thinkingLabel**: * When set, the thinking indicator renders this label verbatim instead of its rotating phrases. Use for domain-specific waits like "Analyzing uploads..." (any animated suffix is the caller's responsibility).
-- **onScroll**: * Callback when the user scrolls manually.
 
 **Checkpoint**
 A single-line marker in the chat stream that anchors a chat position to a
@@ -739,7 +838,7 @@ Standard Tailwind classes for size (`text-sm`, `text-lg`, etc.), weight (`font-m
 **Columns (Tailwind built-in):** `col-span-{1-12}`, `col-span-full`, `col-auto`, `sm:col-span-*`, `md:col-span-*`, `lg:col-span-*`, `xl:col-span-*`
 
 ### Custom Utilities
-text-gradient-gold, glow, glow-sm, glow-md, glow-lg, flex-zero, font-heading, font-body, scroll-smooth, scrollbar-hide, backdrop-glass, focus-ring, line-clamp-2, line-clamp-3, center-absolute, aspect-wide, container, container-sm, container-md, container-lg, container-xl, container-fluid, row
+aurelius-mention, aurelius-mention-x, text-gradient-gold, glow, glow-sm, glow-md, glow-lg, flex-zero, font-heading, font-body, scroll-smooth, scrollbar-hide, backdrop-glass, focus-ring, line-clamp-2, line-clamp-3, center-absolute, aspect-wide, container, container-sm, container-md, container-lg, container-xl, container-fluid, row
 
 ### Opacity modifiers
 Append `/10`, `/20`, `/30`, etc. to colors: `bg-gold/20`, `border-ash/50`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukeashford/aurelius",
-  "version": "4.6.0",
+  "version": "4.8.0",
   "description": "Design system for Aurelius applications — A cohesive visual language for creative technologists",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -86,7 +86,6 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@types/dompurify": "^3.0.5",
     "@types/jest": "^29.5.14",
     "@types/marked": "^5.0.2",
     "@types/node": "^20.0.0",
@@ -129,11 +128,12 @@
   "dependencies": {
     "@tailwindcss/typography": "^0.5.15",
     "clsx": "^2.1.1",
-    "dompurify": "^3.3.1",
     "lucide-react": "^0.555.0",
-    "marked": "^15.0.12",
+    "react-markdown": "^10.1.0",
     "react-player": "^3.4.0",
-    "tailwind-merge": "^3.4.0"
+    "remark-gfm": "^4.0.1",
+    "tailwind-merge": "^3.4.0",
+    "unist-util-visit": "^5.1.0"
   },
   "overrides": {
     "@tootallnate/once": "3.0.1",