portable-agent-layer 0.31.0 → 0.33.0

package/assets/skills/presentation/theme-base/base.css

@@ -244,6 +244,14 @@
 .reveal tr:nth-child(even) td { background: var(--brand-surface); }
 .reveal tr:last-child td { border-bottom: 0; }
 
+/* ── Text alignment utilities — composable on any block element.
+ * `!important` is needed because Reveal's print stylesheet forces
+ * `text-align: left !important` on every div/p/ol/ul, which would otherwise
+ * override author intent (inline styles or any non-`!important` rule). */
+.reveal .text-center { text-align: center !important; }
+.reveal .text-right  { text-align: right !important; }
+.reveal .text-left   { text-align: left !important; }
+
 /* ── Image utilities (composable on any <img> or wrapper) */
 .reveal .image-rounded img,
 .reveal img.image-rounded { border-radius: var(--radius-md); }
@@ -323,3 +331,108 @@
   color: var(--brand-accent);
   height: 2px;
 }
+
+/* ── Print
+ * Reveal's vendored print stylesheet (`@media print { html:not(.print-pdf) … }`)
+ * forces every heading to `color:#000!important` and `p/li/td` to `#000`. That
+ * inverts the white-on-brand text we use on `section` and `closing` dividers
+ * (whose gradient background is on the section element itself, so it still
+ * renders blue) — producing black-on-blue when the user hits Cmd+P without
+ * `?print-pdf`. Restore brand text colors here, and force color-adjust:exact
+ * so the gradient prints reliably. */
+@media print {
+  .reveal section[data-layout="section"],
+  .reveal section[data-layout="closing"] {
+    -webkit-print-color-adjust: exact !important;
+    print-color-adjust: exact !important;
+  }
+  .reveal section[data-layout="section"] h1,
+  .reveal section[data-layout="section"] h4,
+  .reveal section[data-layout="closing"] h1 {
+    color: #fff !important;
+  }
+  .reveal section[data-layout="section"] h2,
+  .reveal section[data-layout="section"] h3 {
+    color: rgba(255, 255, 255, 0.7) !important;
+  }
+  .reveal section[data-layout="section"] p,
+  .reveal section[data-layout="section"] li,
+  .reveal section[data-layout="closing"] h2,
+  .reveal section[data-layout="closing"] p,
+  .reveal section[data-layout="closing"] li {
+    color: rgba(255, 255, 255, 0.85) !important;
+  }
+  .reveal section[data-layout="title"] h1 {
+    color: var(--brand-primary) !important;
+  }
+
+  /* ── Cmd+P scope (browser print on the regular URL, NOT ?print-pdf)
+   * Reveal forces every section to `display:block; position:static; padding:60px 20px;
+   * transform:none`, which strips the flex centering from title/section/closing/quote/
+   * big-stat/pull-quote and leaves their content top-aligned. Restore centering, then
+   * frame every printed page with a hairline so it reads like a printed sheet. */
+
+  /* Hairline frame — inset so it lives inside the printable area and survives
+   * the printer's unprintable-margin clipping. */
+  html:not(.print-pdf) .reveal .slides section {
+    box-shadow: inset 0 0 0 1px var(--neutral-300) !important;
+  }
+
+  /* Make every section fill the printable page. Two effects, no layout
+   * coercion:
+   *   1. The inset frame above wraps the full page edge instead of
+   *      shrink-wrapping content.
+   *   2. The flex-centered layouts below have a tall container to center
+   *      within (without a tall container, `justify-content: center` has
+   *      nothing to center against). */
+  html:not(.print-pdf) .reveal .slides section {
+    min-height: 100vh !important;
+    box-sizing: border-box !important;
+  }
+
+  /* Apply `--table-scale` to td/th in print. Reveal's print stylesheet forces
+   * `font-size: 20pt !important` on all td, which would otherwise override
+   * the screen rule. Scale font AND padding together — scaling font alone
+   * leaves the row height dominated by static cell padding, dampening the
+   * shrink effect. */
+  html:not(.print-pdf) .reveal section[data-layout="table"] td,
+  html:not(.print-pdf) .reveal section[data-layout="table"] th {
+    font-size: calc(20pt * var(--table-scale, 1)) !important;
+    padding: calc(0.5rem * var(--table-scale, 1)) calc(1rem * var(--table-scale, 1)) !important;
+  }
+
+  /* Reveal's print stylesheet forces every section to `display: block`,
+   * stripping the on-screen flex centering from the layouts that use it.
+   * Restore `display: flex` for those layouts ONLY — `flex-direction`,
+   * `justify-content`, and `align-items` come from layouts.css unchanged.
+   * Layouts not listed here stay as `display: block` and sit at the top of
+   * the page; that preserves the natural flow of layouts that depend on it
+   * (image-text and two-column rely on inline-block siblings, content/agenda/
+   * comparison/metric-grid/code/table all flow as block stacks). */
+  html:not(.print-pdf) .reveal .slides section[data-layout="title"],
+  html:not(.print-pdf) .reveal .slides section[data-layout="section"],
+  html:not(.print-pdf) .reveal .slides section[data-layout="closing"],
+  html:not(.print-pdf) .reveal .slides section[data-layout="quote"],
+  html:not(.print-pdf) .reveal .slides section[data-layout="big-stat"],
+  html:not(.print-pdf) .reveal .slides section[data-layout="pull-quote"] {
+    display: flex !important;
+  }
+}
+
+/* ── Print-view polish (`?print-pdf` URL — Reveal stacks each slide as a `.pdf-page`)
+ * Reveal sizes `.pdf-page` to slide dims and stacks them flush-left with no
+ * separation. Center each one and draw a hairline frame so the print preview
+ * reads like a sheaf of printed pages, not a left-aligned wall of slides.
+ *
+ * Why box-shadow inset and not `border`: Reveal forces `@page { margin: 0 }`,
+ * so an outside border would land at the edge of paper and be clipped by the
+ * printer's unprintable margin. An inset shadow draws the line *inside* the
+ * page box and survives the print. */
+html.print-pdf .reveal .slides .pdf-page {
+  box-shadow: inset 0 0 0 1px var(--neutral-300);
+}
+@media screen {
+  html.print-pdf .reveal .slides .pdf-page {
+    margin: 16px auto !important;
+  }
+}

package/assets/skills/presentation/theme-base/layouts.css

@@ -213,9 +213,13 @@
   letter-spacing: var(--tracking-wide);
 }
 
-/* ── 9. table ── styling already in base; just ensure breathing room */
+/* ── 9. table ── styling already in base; just ensure breathing room.
+ * `--table-scale` is set per-slide by build.ts (`injectTableScale`) when row
+ * count exceeds 6 — multiplies the cell font-size to keep dense tables on a
+ * single page. Defaults to 1 (no change) when the var is unset. */
 .reveal section[data-layout="table"] table {
   margin-top: var(--space-3);
+  font-size: calc(var(--text-sm) * var(--table-scale, 1));
 }
 
 /* ── 10. comparison ── 2-3 option boxes with numbered badge + top stripe */
@@ -265,7 +269,12 @@
   max-height: 65vh;
   margin: var(--space-2) 0;
 }
-.reveal section[data-layout="code"] pre code { font-size: 0.9em; }
+/* Code font size scales down for long blocks. The build script sets
+   --code-scale on each code-layout section based on line count: 1.0 for ≤15
+   lines, 0.6 for ≥25 lines, linear in between. Defaults to 1.0 if unset. */
+.reveal section[data-layout="code"] pre code {
+  font-size: calc(0.9em * var(--code-scale, 1));
+}
 
 /* ── 12. big-stat ── One giant number + a muted caption beneath. Use sparingly.
  * Author surface:

package/assets/skills/presentation/tools/build.ts

@@ -8,7 +8,8 @@
 //   <out>/<deck-name>/<deck-name>.md     concatenated slides (written first)
 //   <out>/<deck-name>/<deck-name>.html   self-contained presentation
 //
-// --out defaults to process.cwd(). The deck-name subdir is always created
+// --out defaults to the deck-dir itself (output lands at <deck-dir>/<deck-name>/,
+// which the scaffolder gitignores). The deck-name subdir is always created
 // inside --out, even when --out is explicitly provided. Existing files in
 // the subdir are preserved unless --force is passed.
 
@@ -19,6 +20,71 @@ import { dataUri, escapeForTextarea, readText } from "./lib/inline";
 import { THEME_BASE, VENDOR_REVEAL } from "./lib/paths";
 import { getTemplate } from "./lib/registry";
 
+// Walk markdown line-by-line, skipping fenced code blocks, applying `transform`
+// to each non-fenced line. Used by both the concat-step path rewrite and the
+// HTML-step image inliner so neither touches example image syntax inside ``` blocks.
+async function mapMarkdownOutsideFences(
+  md: string,
+  transform: (line: string) => string | Promise<string>
+): Promise<string> {
+  const out: string[] = [];
+  let inFence = false;
+  for (const line of md.split("\n")) {
+    if (/^```/.test(line)) {
+      inFence = !inFence;
+      out.push(line);
+      continue;
+    }
+    out.push(inFence ? line : await transform(line));
+  }
+  return out.join("\n");
+}
+
+// Rewrite `../assets/X` (the natural relative path from a `slides/*.md` file)
+// to `assets/X` so the concatenated markdown — which lives at the deck root —
+// resolves images correctly when previewed directly. Bare `X.png` references
+// (no path) are left to the doctor to flag; we don't guess where they live.
+function rewriteImageRefsForConcat(md: string): Promise<string> {
+  return mapMarkdownOutsideFences(md, (line) =>
+    line.replace(/(!\[[^\]]*\]\()([^)]+)(\))/g, (whole, open, ref, close) => {
+      const trimmed = ref.trim();
+      if (/^(https?:|data:)/i.test(trimmed)) return whole;
+      if (trimmed.startsWith("../assets/")) {
+        return `${open}${trimmed.slice(3)}${close}`;
+      }
+      return whole;
+    })
+  );
+}
+
+// Inline every local image reference in the concatenated markdown as a data: URI
+// so the resulting HTML is truly self-contained (emailable, USB-stickable).
+// Resolves refs against `deckDir` (the concat-md's location). Missing files are
+// left untouched — the doctor flags them; build doesn't crash on author errors.
+async function inlineImagesInMarkdown(md: string, deckDir: string): Promise<string> {
+  return mapMarkdownOutsideFences(md, async (line) => {
+    const matches = [...line.matchAll(/(!\[[^\]]*\]\()([^)]+)(\))/g)];
+    if (matches.length === 0) return line;
+    let result = line;
+    for (const m of matches) {
+      const [whole, open, ref, close] = m;
+      const trimmed = ref.trim();
+      if (/^(https?:|data:)/i.test(trimmed)) continue;
+      const abs = resolve(deckDir, trimmed);
+      try {
+        await access(abs, fsConst.F_OK);
+      } catch {
+        continue;
+      }
+      // dataUri returns `url("data:...")` for CSS use; strip the `url("…")` wrapper for <img>.
+      const wrapped = await dataUri(abs);
+      const inner = wrapped.replace(/^url\("/, "").replace(/"\)$/, "");
+      result = result.replace(whole, `${open}${inner}${close}`);
+    }
+    return result;
+  });
+}
+
 const ASPECTS: Record<string, [number, number]> = {
   "16:9": [1920, 1080],
   "16:10": [1920, 1200],
@@ -65,6 +131,62 @@ function deckSlug(deckDir: string): string {
   return slug || "deck";
 }
 
+// Build-time injection: code-layout slides with > 15 lines of code get a
+// `style="--code-scale: X"` attribute baked into the slide directive. CSS in
+// layouts.css multiplies the base code font by this variable. Linear from 1.0
+// at 15 lines to 0.6 at 25 lines; clamped at 0.6 beyond. Build-time keeps the
+// attribute on the rendered <section>, so navigation/Highlight re-runs cannot
+// strip it.
+function injectCodeScale(slideMarkdown: string): string {
+  const layoutRe = /<!--\s*\.slide:\s*data-layout="code"([^>]*)-->/i;
+  const layoutMatch = layoutRe.exec(slideMarkdown);
+  if (!layoutMatch) return slideMarkdown;
+
+  const codeRe = /```[^\n]*\n([\s\S]*?)\n```/;
+  const codeMatch = codeRe.exec(slideMarkdown);
+  if (!codeMatch) return slideMarkdown;
+
+  const lines = codeMatch[1].split("\n").length;
+  if (lines <= 15) return slideMarkdown;
+
+  const scale = Math.max(0.6, 1 - (lines - 15) * 0.04).toFixed(2);
+  // Don't double-inject if a previous build already set it.
+  const extras = layoutMatch[1].replace(/\s+style="--code-scale:\s*[^"]+"/i, "").trim();
+  const attrs = extras
+    ? `${extras} style="--code-scale: ${scale}"`
+    : `style="--code-scale: ${scale}"`;
+  const newDirective = `<!-- .slide: data-layout="code" ${attrs} -->`;
+  return slideMarkdown.replace(layoutMatch[0], newDirective);
+}
+
+// Build-time injection: table-layout slides with > 4 rows get a
+// `style="--table-scale: X"` attribute baked into the slide directive. CSS
+// multiplies cell font-size AND cell padding by this var so both shrink
+// together (font-only shrinking is dampened by static padding). Linear from
+// 1.0 at 4 rows to 0.6 at ≥10 rows. Mirrors `injectCodeScale`.
+function injectTableScale(slideMarkdown: string): string {
+  const layoutRe = /<!--\s*\.slide:\s*data-layout="table"([^>]*)-->/i;
+  const layoutMatch = layoutRe.exec(slideMarkdown);
+  if (!layoutMatch) return slideMarkdown;
+
+  // Count markdown table rows (lines starting with `|`) excluding the
+  // separator (`| --- | --- |`) which doesn't render as a row.
+  const sepRe = /^\s*\|(\s*:?-+:?\s*\|)+\s*$/;
+  let rows = 0;
+  for (const line of slideMarkdown.split("\n")) {
+    if (/^\s*\|/.test(line) && !sepRe.test(line)) rows++;
+  }
+  if (rows <= 4) return slideMarkdown;
+
+  const scale = Math.max(0.6, 1 - (rows - 4) * 0.067).toFixed(2);
+  const extras = layoutMatch[1].replace(/\s+style="--table-scale:\s*[^"]+"/i, "").trim();
+  const attrs = extras
+    ? `${extras} style="--table-scale: ${scale}"`
+    : `style="--table-scale: ${scale}"`;
+  const newDirective = `<!-- .slide: data-layout="table" ${attrs} -->`;
+  return slideMarkdown.replace(layoutMatch[0], newDirective);
+}
+
 async function buildConcat(deckDir: string): Promise<string> {
   const slidesDir = join(deckDir, "slides");
   if (await exists(slidesDir)) {
@@ -73,7 +195,8 @@ async function buildConcat(deckDir: string): Promise<string> {
       throw new Error(`slides/ is empty at ${slidesDir}`);
     }
     const parts = await Promise.all(files.map((f) => readText(join(slidesDir, f))));
-    return `${parts.map((p) => p.trim()).join("\n\n---\n\n")}\n`;
+    const joined = `${parts.map((p) => injectTableScale(injectCodeScale(p.trim()))).join("\n\n---\n\n")}\n`;
+    return rewriteImageRefsForConcat(joined);
   }
   const legacy = join(deckDir, "content.md");
   if (await exists(legacy)) {
@@ -90,7 +213,7 @@ async function main() {
   }
   const deckDir = resolve(argv[0]);
 
-  let outRoot = process.cwd();
+  let outRoot = deckDir;
   let force = false;
   for (let i = 1; i < argv.length; i++) {
     if (argv[i] === "--out") outRoot = resolve(argv[++i]);
@@ -110,7 +233,10 @@ async function main() {
   }
 
   const slug = deckSlug(deckDir);
-  const outDir = join(outRoot, slug);
+  // When --out is the deck-dir itself (the default), write directly into it —
+  // no extra <slug>/ subdir. Otherwise create the subdir so multiple decks
+  // can coexist under one shared --out.
+  const outDir = resolve(outRoot) === deckDir ? deckDir : join(outRoot, slug);
   const concatPath = join(outDir, `${slug}.md`);
   const htmlPath = join(outDir, `${slug}.html`);
 
@@ -145,7 +271,7 @@ async function main() {
   const skeleton = await readText(join(THEME_BASE, "skeleton.html"));
   const revealCss = await readText(join(VENDOR_REVEAL, "reveal.css"));
   const highlightCss = await readText(
-    join(VENDOR_REVEAL, "plugin", "highlight", "monokai.css")
+    join(VENDOR_REVEAL, "plugin", "highlight", "github-dark.css")
   );
   const revealJs = await readText(join(VENDOR_REVEAL, "reveal.js"));
   const markdownJs = await readText(
@@ -156,7 +282,11 @@ async function main() {
   );
   const notesJs = await readText(join(VENDOR_REVEAL, "plugin", "notes", "notes.js"));
 
-  const contentMd = await readFile(concatPath, "utf8");
+  // Read the concat back from disk, then inline image refs as data: URIs so
+  // the HTML is self-contained. The on-disk concat keeps plain `assets/X` paths
+  // for direct markdown preview; only the HTML embeds full image bytes.
+  const contentMdRaw = await readFile(concatPath, "utf8");
+  const contentMd = await inlineImagesInMarkdown(contentMdRaw, deckDir);
 
   let deckOverridesCss = "";
   const overridesPath = join(deckDir, "overrides.css");