@lukeashford/aurelius 4.6.0 → 4.7.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

@@ -175,6 +175,7 @@
   /* ===== 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;
@@ -208,6 +209,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%);

package/llms.md

@@ -102,6 +102,7 @@ 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 |
@@ -115,6 +116,7 @@ Import from `@lukeashford/aurelius`:
 | Col | span, offset, order |
 | ColorSwatch | color, label |
 | Container | size (sm, md, lg, xl, fluid, responsive) |
+| DeliverableCard | deliverable, title, subtitle, 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 |
@@ -124,6 +126,7 @@ Import from `@lukeashford/aurelius`:
 | 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 |
 | Menu | children, open, onOpenChange, asChild, align, side, icon, destructive |
@@ -153,11 +156,11 @@ Import from `@lukeashford/aurelius`:
 | 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 |
+| 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 |
+| 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 +213,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 +227,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.
@@ -249,6 +269,17 @@ navigate for groups).
 **AudioCard**
 - **playerProps**: Forwarded to the underlying ReactPlayer.
 
+**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.
+
 **FileChip**
 - **name**: * File name to display
 - **size**: * File size in bytes (optional, will be formatted)
@@ -261,6 +292,24 @@ 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.
 
+**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
@@ -378,6 +427,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.
@@ -477,9 +527,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 +545,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lukeashford/aurelius",
-  "version": "4.6.0",
+  "version": "4.7.0",
   "description": "Design system for Aurelius applications — A cohesive visual language for creative technologists",
   "main": "dist/index.js",
   "module": "dist/index.mjs",