@lukeashford/aurelius 4.5.0 → 4.7.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,528 @@
+/* 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;
+}
+
+/* === 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
+ *     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/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%);