@lukeashford/aurelius 4.5.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

@@ -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 |
@@ -601,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.5.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,