@lukeashford/aurelius 4.4.0 → 4.6.0

package/dist/styles/base.css

@@ -8,5 +8,6 @@
 @import './fonts.css';
 @import './theme.css';
 @import './prose.css';
+@import './deliverable.css';
 
 @plugin "@tailwindcss/typography";

package/dist/styles/deliverable.css

@@ -0,0 +1,476 @@
+/* Deliverable renderer styles.
+ *
+ * Each visual class is defined as a Tailwind v4 `@utility` so the design-system
+ * ESLint rule recognises them. The same DOM serves both the on-screen view
+ * and the PDF print path; `@page` and `@media print` rules below replace the
+ * dark theme with a print-friendly version (black on white, page-sized
+ * sections, no actions). The accent color is a CSS variable scoped to the
+ * deliverable root and falls back to the design-system gold.
+ */
+
+@utility deliverable {
+  --deliverable-accent: var(--color-gold);
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-16);
+  width: 100%;
+  max-width: var(--container-xl);
+  margin-inline: auto;
+  padding-inline: var(--spacing-6);
+  padding-block: var(--spacing-12);
+  color: var(--color-white);
+  font-family: var(--font-body);
+}
+
+@utility deliverable-page {
+  width: 100%;
+}
+
+@utility deliverable-heading {
+  font-family: var(--font-heading);
+  font-size: var(--text-3xl);
+  line-height: var(--text-3xl--line-height);
+  color: var(--deliverable-accent);
+  margin-bottom: var(--spacing-6);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+/* === Cover === */
+
+@utility deliverable-cover {
+  min-height: min(80vh, 900px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border: 1px solid color-mix(in oklab, var(--deliverable-accent) 30%, transparent);
+  background-color: var(--color-charcoal);
+  padding: var(--spacing-16);
+}
+
+@utility deliverable-cover-inner {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-6);
+  max-width: 56ch;
+}
+
+@utility deliverable-cover-eyebrow {
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-widest);
+  color: var(--color-silver);
+  font-size: var(--text-xs);
+}
+
+@utility deliverable-cover-title {
+  font-family: var(--font-heading);
+  font-size: var(--text-6xl);
+  line-height: var(--text-6xl--line-height);
+  color: var(--deliverable-accent);
+  letter-spacing: var(--letter-spacing-tight);
+}
+
+@utility deliverable-cover-subtitle {
+  font-size: var(--text-xl);
+  line-height: var(--text-xl--line-height);
+  color: var(--color-silver);
+}
+
+@utility deliverable-cover-client {
+  margin-top: var(--spacing-12);
+  font-size: var(--text-sm);
+  letter-spacing: var(--letter-spacing-wider);
+  text-transform: uppercase;
+  color: var(--color-silver);
+}
+
+@utility deliverable-cover-client-name {
+  color: var(--color-white);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* === Image grid === */
+
+@utility deliverable-image-grid {
+  display: grid;
+  gap: var(--spacing-6);
+}
+
+@utility deliverable-image-grid-cols-1 {
+  grid-template-columns: 1fr;
+}
+
+@utility deliverable-image-grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+@utility deliverable-image-grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+@utility deliverable-image-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  break-inside: avoid;
+}
+
+@utility deliverable-image-img {
+  width: 100%;
+  height: 100%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+  background-color: var(--color-graphite);
+  border: 1px solid var(--color-ash);
+}
+
+@utility deliverable-image-missing {
+  aspect-ratio: 4 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--color-ash);
+  color: var(--color-silver);
+  font-size: var(--text-sm);
+}
+
+@utility deliverable-image-caption {
+  font-size: var(--text-sm);
+  color: var(--color-silver);
+  line-height: var(--line-height-snug);
+}
+
+/* === Spotlight === */
+
+@utility deliverable-spotlight-media {
+  margin-bottom: var(--spacing-6);
+}
+
+@utility deliverable-spotlight-img {
+  width: 100%;
+  max-height: 70vh;
+  object-fit: contain;
+  background-color: var(--color-graphite);
+  border: 1px solid var(--color-ash);
+}
+
+@utility deliverable-spotlight-missing {
+  width: 100%;
+  height: 50vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed var(--color-ash);
+  color: var(--color-silver);
+}
+
+@utility deliverable-spotlight-body {
+  max-width: 72ch;
+  font-size: var(--text-base);
+  line-height: var(--line-height-relaxed);
+}
+
+/* === Text block === */
+
+@utility deliverable-text-block {
+  max-width: 72ch;
+  font-size: var(--text-base);
+  line-height: var(--line-height-relaxed);
+}
+
+/* === Color palette === */
+
+@utility deliverable-palette {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  gap: var(--spacing-4);
+}
+
+@utility deliverable-palette-item {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  align-items: center;
+  text-align: center;
+  break-inside: avoid;
+}
+
+@utility deliverable-palette-chip {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border: 1px solid var(--color-ash);
+}
+
+@utility deliverable-palette-label {
+  font-size: var(--text-sm);
+  color: var(--color-white);
+  font-weight: var(--font-weight-medium);
+}
+
+@utility deliverable-palette-hex {
+  font-family: var(--font-mono);
+  font-size: var(--text-xs);
+  color: var(--color-silver);
+}
+
+/* === Quote === */
+
+@utility deliverable-quote {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 40vh;
+}
+
+@utility deliverable-quote-body {
+  max-width: 64ch;
+  font-family: var(--font-heading);
+  text-align: center;
+}
+
+@utility deliverable-quote-text {
+  font-size: var(--text-3xl);
+  line-height: var(--line-height-snug);
+  color: var(--color-white);
+}
+
+@utility deliverable-quote-attribution {
+  margin-top: var(--spacing-6);
+  font-family: var(--font-body);
+  font-size: var(--text-sm);
+  color: var(--color-silver);
+  letter-spacing: var(--letter-spacing-wider);
+}
+
+/* === Floating action bar === */
+
+@utility deliverable-actions {
+  position: sticky;
+  bottom: var(--spacing-6);
+  display: flex;
+  justify-content: flex-end;
+  margin-top: var(--spacing-8);
+  pointer-events: none;
+}
+
+@utility deliverable-action-button {
+  pointer-events: auto;
+}
+
+/* === Print path ===
+ * Same React tree, different paint. The strategy:
+ *   - Cover gets its own named page (`@page cover`) with no margins so it
+ *     prints full-bleed, with the body running on default pages with
+ *     normal margins.
+ *   - Body sections flow naturally — only the cover forces a page break.
+ *     `break-inside: avoid` on each block keeps headings with their content
+ *     and stops grids from splitting awkwardly.
+ *   - The palette and quote no longer claim a full page each — they were
+ *     web-mode treatments, not print.
+ *   - Running footer carries page numbers; the cover suppresses it via
+ *     `@page :first`.
+ */
+
+@page {
+  size: A4;
+  margin: 18mm 18mm 22mm;
+  @bottom-right {
+    content: counter(page);
+    font-family: var(--font-body);
+    font-size: 9pt;
+    color: var(--color-slate);
+  }
+}
+
+@page :first {
+  margin: 0;
+  @bottom-right {
+    content: none;
+  }
+}
+
+@media print {
+  .deliverable {
+    color: var(--color-obsidian);
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    gap: 0;
+    font-size: 10.5pt;
+    line-height: var(--line-height-relaxed);
+  }
+
+  .deliverable-page {
+    /* Sections flow; break only when content needs more room. Avoid
+       splitting any single block across pages. */
+    page-break-inside: avoid;
+    break-inside: avoid;
+    margin-bottom: 14mm;
+  }
+
+  .deliverable-page + .deliverable-page {
+    margin-top: 0;
+  }
+
+  .deliverable-heading {
+    page-break-after: avoid;
+    break-after: avoid;
+  }
+
+  /* === Cover ===
+   * Full-bleed first page. The cover is always the first section, so
+   * `@page :first { margin: 0 }` lets it bleed; we still pad the content
+   * inside the cover so the type doesn't sit on the page edge.
+   */
+  .deliverable-cover {
+    page-break-after: always;
+    break-after: page;
+    background-color: var(--color-obsidian);
+    color: var(--color-white);
+    min-height: 297mm;
+    width: 210mm;
+    border: none;
+    padding: 36mm 28mm;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    text-align: left;
+  }
+
+  .deliverable-cover-inner {
+    grid-row: 2;
+    align-self: end;
+    max-width: 28em;
+  }
+
+  .deliverable-cover-eyebrow {
+    color: var(--deliverable-accent);
+    font-size: 9pt;
+  }
+
+  .deliverable-cover-title {
+    font-size: 44pt;
+    line-height: 1.05;
+    color: var(--color-white);
+  }
+
+  .deliverable-cover-subtitle {
+    font-size: 13pt;
+    color: var(--color-silver);
+    margin-top: 2mm;
+  }
+
+  .deliverable-cover-client {
+    grid-row: 3;
+    margin-top: 0;
+    color: var(--color-silver);
+  }
+
+  .deliverable-cover-client-name {
+    color: var(--color-white);
+  }
+
+  /* === Body typography === */
+  .deliverable-heading {
+    font-size: 20pt;
+    margin-bottom: 4mm;
+    color: var(--deliverable-accent);
+  }
+
+  .deliverable-text-block,
+  .deliverable-spotlight-body {
+    font-size: 11pt;
+    line-height: 1.55;
+    max-width: 36em;
+    color: var(--color-obsidian);
+  }
+
+  /* === Image grid ===
+   * Tighter than on screen. Each item stays atomic; the grid can break
+   * between rows but not mid-cell.
+   */
+  .deliverable-image-grid {
+    gap: 4mm;
+  }
+
+  .deliverable-image-item {
+    page-break-inside: avoid;
+    break-inside: avoid;
+  }
+
+  .deliverable-image-img {
+    aspect-ratio: 4 / 3;
+    border: none;
+  }
+
+  .deliverable-image-caption {
+    color: var(--color-slate);
+    font-size: 9pt;
+    margin-top: 1.5mm;
+  }
+
+  /* === Spotlight === */
+  .deliverable-spotlight-img {
+    max-height: 140mm;
+    border: none;
+    background-color: transparent;
+  }
+
+  .deliverable-spotlight-media {
+    margin-bottom: 4mm;
+  }
+
+  /* === Palette ===
+   * Inline strip at body width — not a full-page chart. Smaller chips,
+   * label and hex below.
+   */
+  .deliverable-palette {
+    grid-template-columns: repeat(auto-fit, minmax(28mm, 1fr));
+    gap: 4mm;
+    max-width: 160mm;
+  }
+
+  .deliverable-palette-chip {
+    aspect-ratio: 1 / 1;
+    border: 1px solid var(--color-slate);
+  }
+
+  .deliverable-palette-label {
+    font-size: 10pt;
+    color: var(--color-obsidian);
+    margin-top: 2mm;
+  }
+
+  .deliverable-palette-hex {
+    font-size: 8pt;
+    color: var(--color-slate);
+  }
+
+  /* === Quote ===
+   * Editorial pull-quote, not a full page. Generous margins, no min-height
+   * heroics.
+   */
+  .deliverable-quote {
+    min-height: 0;
+    padding: 6mm 0 8mm;
+  }
+
+  .deliverable-quote-body {
+    max-width: 30em;
+    margin-inline: auto;
+  }
+
+  .deliverable-quote-text {
+    font-size: 18pt;
+    line-height: 1.3;
+    color: var(--color-obsidian);
+  }
+
+  .deliverable-quote-attribution {
+    color: var(--color-slate);
+  }
+
+  .deliverable-actions {
+    display: none;
+  }
+}

package/llms.md

@@ -127,7 +127,7 @@ Import from `@lukeashford/aurelius`:
 | 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 |
-| Message | variant (user, assistant), content, isStreaming, branchInfo, actions, hideActions, attachments, onAttachmentOpen, onClick, label, children, disabled |
+| 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 |
@@ -156,7 +156,7 @@ Import from `@lukeashford/aurelius`:
 | ArtifactsPanel | nodes, loading, openArtifactId, onArtifactClosed, 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, onJumpToCheckpoint, onJumpToLatest, onStop, onSelectConversation, onNewChat, onRenameConversation, isStreaming, isThinking, thinkingLabel, placeholder, emptyStateHelper, emptyState, showAttachmentButton, enableMessageActions, attachments, onAttachmentsChange, onAttachmentRemove, onAttachmentOpen, artifactNodes, isArtifactsPanelOpen, onArtifactsPanelOpenChange, tasks, tasksTitle, onStopAllTasks |
+| 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 |
 | Checkpoint | name, executionKind (task, submit, rename, init, ingest), status (completed, failed, cancelled), isActive, muted, branchInfo, onJumpHere |
 | GreyedDivider | messageCount, checkpointCount, onJumpToLatest |
@@ -166,6 +166,13 @@ Import from `@lukeashford/aurelius`:
 | TodosList | tasks, title, onStopAllTasks |
 | ToolPanelContainer | topContent, bottomContent, width, initialTopPercent, onResizeStart, side |
 | ToolSidebar | tools, activeTools, onToggleTool, side |
+| ArtifactImageGridSection | data |
+| ArtifactSpotlightSection | data |
+| ColorPaletteSection | data |
+| CoverSection | data |
+| DeliverableRenderer | deliverable, onDownloadPdf, hideActions, className |
+| QuoteBlockSection | data |
+| TextBlockSection | data |
 | ChatBubbleIcon | children |
 | CheckSquareIcon | children |
 | ChevronLeftIcon | children |
@@ -276,6 +283,8 @@ navigate for groups).
 - **hideActions**: * Whether to hide actions (e.g., during streaming)
 - **attachments**: * Attachments to render above the bubble. Used by user messages to show the files that were attached to that turn. Empty/undefined renders nothing.
 - **onAttachmentOpen**: * Click handler invoked with an attachment's `artifactId`. Wire to open the artifact-card modal in the host app.
+- **onJumpHere**: * Click handler for the bubble — when provided, the message becomes a navigational anchor (mirrors Checkpoint's `onJumpHere`): clicking the bubble moves the active leaf to this node. Suppressed when `isActive` is true (already here) or when the user is selecting text or clicking a markdown link inside the bubble.
+- **isActive**: * When true, this message is the active leaf — `onJumpHere` is suppressed (no point jumping to where you already are) and the affordance hover styling is skipped.
 
 **PdfCard**
 A card for displaying PDF documents with an embedded viewer.
@@ -447,7 +456,7 @@ artifactNodes prop.
 - **onMessageSubmit**: * Called when a message is submitted from the input. Provides the text content and any files attached.
 - **onEditMessage**: * Called when a user message is edited. In tree mode, this creates a new branch.
 - **onRetryMessage**: * Called when an assistant message is retried. In tree mode, this creates a new branch.
-- **onJumpToCheckpoint**: * Called when the user clicks a non-active checkpoint to rewind. Receives the checkpoint id; the consumer should move the active leaf there (without forking) so the artifacts panel and chat re-anchor. In tree mode only.
+- **onJumpHere**: * Called when the user clicks a non-active node — checkpoint or message — to move the active leaf there. Receives the node id; the consumer should move the active leaf without forking so the artifacts panel and chat re-anchor. Mirrors the per-component `onJumpHere`. In tree mode only.
 - **onJumpToLatest**: * Called when the user clicks "Jump to latest" on the greyed-future divider or otherwise asks to return to the deepest leaf they had reached. In tree mode only.
 - **onStop**: * Called when the Stop button is clicked during assistant streaming.
 - **onSelectConversation**: * Called when a conversation is selected from the sidebar.
@@ -484,6 +493,8 @@ Key behaviors:
 - **ChatViewMessageItem.branchInfo**: Branch navigation info — chevrons render only when total > 1.
 - **ChatViewMessageItem.actions**: Actions configuration (copy / edit / retry).
 - **ChatViewMessageItem.muted**: When true, this row is rendered in the greyed-future region.
+- **ChatViewMessageItem.isActive**: * When true, this message is the active leaf — Message will suppress its `onJumpHere` click target. Mirrors `ChatViewCheckpointItem.isActive`.
+- **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.
@@ -597,6 +608,50 @@ side of the chat interface. It follows the IntelliJ pattern:
 - **onToggleTool**: * Called when a tool button is clicked (toggle)
 - **side**: * Which side this sidebar is on — controls border direction
 
+**ArtifactImageGridSection**
+Grid of project artifact images with optional captions. The number of
+columns is fixed by the spec (1–3); the renderer enforces a sensible aspect
+ratio per item and lets the browser flow rows.
+
+
+**ArtifactSpotlightSection**
+A single hero artifact image with optional prose alongside. Reads at full
+page width on screen and prints to a single page.
+
+
+**ColorPaletteSection**
+Color palette presented as labelled swatches with hex values.
+
+
+**CoverSection**
+Title page for a deliverable. Always rendered as the first section.
+
+
+**DeliverableRenderer**
+Render a presentable deliverable (moodboard, pitch deck) from a structured
+spec. The same component drives the on-screen view and the print/PDF
+version — `@media print` styles in `aurelius/styles/base.css` keep them in
+sync. To produce a PDF, drive the page with headless Chromium and let the
+print stylesheet do the work.
+
+The renderer is purely presentational: it takes a fully resolved spec
+(artifact URLs already inflated by the caller) and dispatches each section
+to its typed sub-renderer. Unknown section types are skipped silently
+forward-compat for new section variants added by the backend.
+
+- **deliverable**: Resolved deliverable spec — every artifact reference already inflated.
+- **onDownloadPdf**: * Called when the viewer requests a PDF download. The host application is responsible for fetching and triggering the file save (the URL knows about share tokens and credentials we don't). When omitted, the download affordance is hidden.
+- **hideActions**: Hide the floating action bar entirely. Used when rendering for print.
+
+**QuoteBlockSection**
+Pulled quote with optional attribution. The renderer adds the surrounding
+quotation marks.
+
+
+**TextBlockSection**
+Prose section. Body is rendered as Markdown.
+
+
 **CrossSquareIcon**
 - **variant**: * Visual variant for different states - 'cancelled': subtle ash coloring - 'failed': error red coloring
 

package/package.json

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

package/scripts/eslint.mjs

@@ -107,10 +107,12 @@ export function createAureliusESLintConfig(options = {}) {
       },
     },
 
-    // CSS files: enforce Tailwind v4 CSS usage and tokens (exclude fonts.css and theme.css)
+    // CSS files: enforce Tailwind v4 CSS usage and tokens (exclude foundation
+    // sheets — fonts/theme/deliverable — which define the primitives the
+    // tokens rule would otherwise flag as hard-coded).
     {
       files: ['**/*.css'],
-      ignores: ['**/fonts.css', '**/theme.css'],
+      ignores: ['**/fonts.css', '**/theme.css', '**/deliverable.css'],
       language: 'css/css',
       languageOptions: {
         customSyntax: tailwind4,