@cyber-dash-tech/revela 0.19.2 → 0.19.4

package/lib/browser/chrome.ts

@@ -1,5 +1,7 @@
 import puppeteer, { type Browser } from "puppeteer-core"
-import { existsSync } from "fs"
+import { existsSync, mkdtempSync, rmSync } from "fs"
+import { tmpdir } from "os"
+import { join } from "path"
 
 export const CHROME_PATHS = [
   "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
@@ -10,13 +12,26 @@ export const CHROME_PATHS = [
   "/usr/bin/chromium",
 ]
 
+export const CHROME_PATH_ENV_VARS = ["REVELA_CHROME_PATH", "PUPPETEER_EXECUTABLE_PATH"] as const
+
 export function findChromePath(): string {
+  for (const envName of CHROME_PATH_ENV_VARS) {
+    const override = process.env[envName]?.trim()
+    if (!override) continue
+    if (existsSync(override)) return override
+    throw new Error(
+      `Chrome executable configured by ${envName} does not exist: ${override}\n` +
+      "Set REVELA_CHROME_PATH to a valid Chrome/Chromium binary, or unset the override to use auto-detection."
+    )
+  }
+
   for (const p of CHROME_PATHS) {
     if (existsSync(p)) return p
   }
   throw new Error(
     "Could not find a Chrome/Chromium installation.\n" +
-    "Tried:\n" + CHROME_PATHS.map((p) => `  ${p}`).join("\n")
+    "Tried:\n" + CHROME_PATHS.map((p) => `  ${p}`).join("\n") + "\n" +
+    "You can set REVELA_CHROME_PATH=/path/to/chromium or PUPPETEER_EXECUTABLE_PATH=/path/to/chrome."
   )
 }
 
@@ -26,23 +41,92 @@ export interface LaunchChromeOptions {
   allowFileAccess?: boolean
 }
 
+export function createChromeUserDataDir(): string {
+  return mkdtempSync(join(tmpdir(), "revela-chrome-"))
+}
+
+export function cleanupChromeUserDataDir(userDataDir: string): void {
+  rmSync(userDataDir, { recursive: true, force: true })
+}
+
+function withProfileCleanup(browser: Browser, userDataDir: string): Browser {
+  const originalClose = browser.close.bind(browser)
+  browser.close = async () => {
+    try {
+      await originalClose()
+    } finally {
+      try {
+        cleanupChromeUserDataDir(userDataDir)
+      } catch (error) {
+        console.warn(`Could not clean up Chrome profile ${userDataDir}: ${String(error)}`)
+      }
+    }
+  }
+  return browser
+}
+
+function formatLaunchError(error: unknown, executablePath: string, userDataDir: string): Error {
+  const message = error instanceof Error ? error.message : String(error)
+  return new Error(
+    "Failed to launch Chrome/Chromium for Revela browser-backed checks.\n" +
+    `Executable: ${executablePath}\n` +
+    `Platform: ${process.platform} ${process.arch}\n` +
+    `Temporary profile: ${userDataDir}\n` +
+    `REVELA_CHROME_PATH: ${process.env.REVELA_CHROME_PATH || "(unset)"}\n` +
+    `PUPPETEER_EXECUTABLE_PATH: ${process.env.PUPPETEER_EXECUTABLE_PATH || "(unset)"}\n` +
+    "If this happens in Codex/macOS, set REVELA_CHROME_PATH to a Chrome/Chromium binary that can run headless, " +
+    "or run browser-backed tests in an environment that allows Chrome to start.\n" +
+    `Original error: ${message}`
+  )
+}
+
 export async function launchChrome(options: LaunchChromeOptions = {}): Promise<Browser> {
   const width = options.width ?? 1920
   const height = options.height ?? 1080
+  const executablePath = findChromePath()
+  const userDataDir = createChromeUserDataDir()
   const args = [
     "--no-sandbox",
     "--disable-setuid-sandbox",
     "--disable-dev-shm-usage",
+    "--no-first-run",
+    "--no-default-browser-check",
+    "--disable-background-networking",
+    "--disable-background-timer-throttling",
+    "--disable-client-side-phishing-detection",
+    "--disable-component-update",
+    "--disable-default-apps",
+    "--disable-extensions",
+    "--disable-hang-monitor",
+    "--disable-popup-blocking",
+    "--disable-prompt-on-repost",
+    "--disable-sync",
+    "--disable-translate",
+    "--metrics-recording-only",
+    "--mute-audio",
+    "--safebrowsing-disable-auto-update",
+    "--disable-features=Translate,OptimizationHints,MediaRouter",
     `--window-size=${width},${height}`,
   ]
 
   if (options.allowFileAccess) {
-    args.splice(3, 0, "--allow-file-access-from-files")
+    args.push("--allow-file-access-from-files")
   }
 
-  return await puppeteer.launch({
-    executablePath: findChromePath(),
-    headless: true,
-    args,
-  })
+  try {
+    const browser = await puppeteer.launch({
+      executablePath,
+      headless: true,
+      userDataDir,
+      args,
+    })
+    return withProfileCleanup(browser, userDataDir)
+  } catch (error) {
+    try {
+      cleanupChromeUserDataDir(userDataDir)
+    } catch (cleanupError) {
+      console.warn(`Could not clean up Chrome profile ${userDataDir}: ${String(cleanupError)}`)
+    }
+    throw formatLaunchError(error, executablePath, userDataDir)
+  }
 }

package/lib/page-templates/built-in-preview.html

@@ -12,7 +12,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--cover">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 01 / 16</p>
+                    <p class="template-eyebrow">Template 01 / 17</p>
                     <h1 class="template-title template-hero-title">cover</h1>
                 </header></div>
                 
@@ -24,7 +24,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--section-divider">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 02 / 16</p>
+                    <p class="template-eyebrow">Template 02 / 17</p>
                     <h1 class="template-title template-hero-title">section-divider</h1>
                 </header></div>
                 
@@ -36,7 +36,7 @@
         <div class="slide-canvas">
             <div class="template-frame template-hero template-hero--closing">
                 <div data-template-slot="hero"><header>
-                    <p class="template-eyebrow">Template 03 / 16</p>
+                    <p class="template-eyebrow">Template 03 / 17</p>
                     <h1 class="template-title template-hero-title">closing</h1>
                 </header></div>
                 
@@ -50,7 +50,7 @@
                 <div class="template-body template-agenda-panel" data-template-slot="agenda">
                     <div class="template-agenda-inner">
                         <div class="template-agenda-header">
-                            <p class="template-eyebrow">Template 04 / 16</p>
+                            <p class="template-eyebrow">Template 04 / 17</p>
                             <h1 class="template-title">agenda</h1>
                             <p class="template-agenda-footer">Structure-First-Design</p>
                         </div>
@@ -66,7 +66,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 05 / 16</p>
+                    <p class="template-eyebrow">Template 05 / 17</p>
                     <h1 class="template-title">executive-summary</h1>
                 </header><div class="template-body template-grid cols-3" data-template-slot="summary-cards"><article class="template-card"><h2>Decision is ready</h2><p>The facts support moving from discussion to selection without adding another analysis cycle.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Risk is bounded</h2><p>Known caveats are visible, named, and can be managed through rollout gates.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><h2>Next step is narrow</h2><p>A pilot decision creates more learning without overcommitting capital or team capacity.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div>
                 
@@ -78,7 +78,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 06 / 16</p>
+                    <p class="template-eyebrow">Template 06 / 17</p>
                     <h1 class="template-title">problem-context</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-card" data-template-slot="context"><p>Use this template when the audience needs the situation, tension, and implication before seeing recommendations.</p></div><div class="template-card" data-template-slot="supporting-points"><ul class="template-list"><li><strong>Situation</strong> A shift has changed the operating baseline.</li><li><strong>Tension</strong> Current process cannot absorb the new variance cleanly.</li><li><strong>Implication</strong> Delay increases rework and weakens decision confidence.</li></ul></div></div>
                 
@@ -90,7 +90,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 07 / 16</p>
+                    <p class="template-eyebrow">Template 07 / 17</p>
                     <h1 class="template-title">key-message-evidence</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-key-message-panel" data-template-slot="key-message">
                     <h2 class="template-key-message-kicker">Key message</h2>
@@ -105,7 +105,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 08 / 16</p>
+                    <p class="template-eyebrow">Template 08 / 17</p>
                     <h1 class="template-title">claim-supporting-visual</h1>
                 </header><div class="template-body template-grid cols-2"><div class="template-claim-text-panel" data-template-slot="claim">
                     <h2 class="template-claim-text-title">A single visual should carry one argument.</h2>
@@ -121,7 +121,7 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 09 / 16</p>
+                    <p class="template-eyebrow">Template 09 / 17</p>
                     <h1 class="template-title">metric-highlight</h1>
                 </header><div class="template-body"><div class="template-metric-layout template-metric-layout--insight-bottom"><div class="template-stat-grid" data-template-slot="metrics"><article class="template-card"><div class="template-stat-value">67%</div><h2>Adoption signal</h2><p>Primary number plus interpretation.</p></article><article class="template-card"><div class="template-stat-value">3x</div><h2>Review speed</h2><p>Comparison is stated beside the metric.</p></article><article class="template-card"><div class="template-stat-value">14d</div><h2>Pilot window</h2><p>Time bound keeps the ask concrete.</p></article></div><div class="template-insight-panel">
                     <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="scan-search" aria-hidden="true"></i><span>Read the signal</span></h2>
@@ -136,9 +136,9 @@
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 10 / 16</p>
+                    <p class="template-eyebrow">Template 10 / 17</p>
                     <h1 class="template-title">chart-takeaways</h1>
-                </header><div class="template-body template-grid template-chart-layout"><div class="template-chart-panel template-visual-slot-panel" data-template-slot="visual"><span class="template-visual-slot-label">image / chart slot (optional)</span></div><div class="template-text-panel template-chart-takeaway-panel" data-template-slot="takeaways">
+                </header><div class="template-body template-grid template-chart-layout"><div class="template-chart-panel template-visual-slot-panel" data-template-slot="visual"><span class="template-visual-slot-label">image / chart slot (optional)</span></div><div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">What to read</h2>
                     <div class="template-chart-takeaway-list"><section class="template-chart-takeaway-item"><h3>Trend</h3><p>Call out the movement or comparison the chart is meant to prove, including the direction and the comparison baseline.</p></section><section class="template-chart-takeaway-item"><h3>Driver</h3><p>Name the likely reason without overclaiming; separate observed movement from the interpretation or hypothesis.</p></section><section class="template-chart-takeaway-item"><h3>Decision use</h3><p>Explain how the chart changes the recommendation, what threshold matters, and what follow-up evidence would reduce risk.</p></section></div>
                 </div></div>
@@ -147,11 +147,23 @@
             <div class="template-page-number">10</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table-comparison">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 11 / 16</p>
+                    <p class="template-eyebrow">Template 11 / 17</p>
+                    <h1 class="template-title">table</h1>
+                </header><div class="template-body"><div class="template-table-layout"><div class="template-side-panel template-text-panel template-text-panel--clear" data-template-slot="text-card"><h2 class="template-side-panel-title template-text-panel-title">Financial readout</h2><p class="template-side-panel-body template-text-panel-body">Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.</p></div><div class="template-table-region" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Line item</th><th>FY2025</th><th>FY2026 Plan</th><th>YoY / note</th></tr></thead><tbody><tr><td>Revenue</td><td>$84.2M</td><td>$104.8M</td><td>+24% planned growth</td></tr><tr><td>Gross margin</td><td>68.4%</td><td>71.2%</td><td>+280 bps mix shift</td></tr><tr><td>Operating expense</td><td>$42.7M</td><td>$49.1M</td><td>Scale hiring below revenue growth</td></tr><tr><td>EBITDA</td><td>$14.9M</td><td>$23.6M</td><td>+58% operating leverage</td></tr><tr><td>Free cash flow</td><td>$9.8M</td><td>$16.4M</td><td>Cash conversion improves to 69%</td></tr><tr><td>Net retention</td><td>116%</td><td>121%</td><td>Expansion supports plan quality</td></tr></tbody></table></div></div></div></div>
+                
+            </div>
+            <div class="template-page-number">11</div>
+        </div>
+    </section>
+    <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="table-comparison">
+        <div class="slide-canvas">
+            <div class="template-frame">
+                <header>
+                    <p class="template-eyebrow">Template 12 / 17</p>
                     <h1 class="template-title">table-comparison</h1>
                 </header><div class="template-body" data-template-slot="table"><div class="template-table-wrap"><table class="template-table"><thead><tr><th>Layer</th><th>Owns</th><th>Agent task</th></tr></thead><tbody><tr><td>Template</td><td>Structure and DOM contract</td><td>Select the page pattern</td></tr><tr><td>Content</td><td>Claim, evidence, caveat</td><td>Fill the meaning</td></tr><tr><td>Design</td><td>Color, type, surfaces</td><td>Skin stable classes</td></tr></tbody></table><div class="template-insight-panel">
                     <h2 class="template-insight-title"><i class="template-insight-icon" data-lucide="lightbulb" aria-hidden="true"></i><span>Insight</span></h2>
@@ -159,14 +171,14 @@
                 </div></div></div>
                 
             </div>
-            <div class="template-page-number">11</div>
+            <div class="template-page-number">12</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="milestone">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="milestone">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 12 / 16</p>
+                    <p class="template-eyebrow">Template 13 / 17</p>
                     <h1 class="template-title">milestone</h1>
                 </header><div class="template-body"><div class="template-timeline template-timeline--horizontal" data-template-slot="timeline" style="--timeline-count:5"><article class="template-timeline-item">
                         <div class="template-timeline-copy template-card">
@@ -211,16 +223,16 @@
                     </article></div></div>
                 
             </div>
-            <div class="template-page-number">12</div>
+            <div class="template-page-number">13</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="13" data-design="built-in-preview" data-template="timeline">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="timeline">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 13 / 16</p>
+                    <p class="template-eyebrow">Template 14 / 17</p>
                     <h1 class="template-title">timeline</h1>
-                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
+                </header><div class="template-body"><div class="template-timeline-layout template-timeline-layout--left"><div class="template-side-panel template-text-panel template-text-panel--color" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">Reading the journey</h2><p class="template-side-panel-body template-text-panel-body">The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.</p></div><div class="template-timeline template-timeline--vertical" data-template-slot="timeline" style="--timeline-count:4"><article class="template-timeline-item">
                         <span class="template-timeline-dot" aria-hidden="true"></span>
                         <div class="template-timeline-copy">
                             <p class="template-timeline-date">Mar 2019</p>
@@ -251,43 +263,43 @@
                     </article></div></div></div>
                 
             </div>
-            <div class="template-page-number">13</div>
+            <div class="template-page-number">14</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="process-steps">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="process-steps">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 14 / 16</p>
+                    <p class="template-eyebrow">Template 15 / 17</p>
                     <h1 class="template-title">process-steps</h1>
                 </header><div class="template-body"><div class="template-steps" data-template-slot="steps"><article class="template-card"><div class="template-step-number">1</div><h2>Choose</h2><p>Select the page template that matches the communication job.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">2</div><h2>Fill</h2><p>Provide only the content fields the template needs.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">3</div><h2>Style</h2><p>Let the active design control type, color, and surfaces.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article><article class="template-card"><div class="template-step-number">4</div><h2>QA</h2><p>Run contract and visual checks before export.</p><figure class="template-visual-placeholder"><div class="template-visual-placeholder-frame"><span class="template-visual-placeholder-label">image / chart slot (optional)</span></div></figure></article></div></div>
                 
             </div>
-            <div class="template-page-number">14</div>
+            <div class="template-page-number">15</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="recommendation-decision">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="recommendation-decision">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 15 / 16</p>
+                    <p class="template-eyebrow">Template 16 / 17</p>
                     <h1 class="template-title">recommendation-decision</h1>
                 </header><div class="template-body template-grid cols-3"><div class="template-card" data-template-slot="recommendation"><h2>Recommendation</h2><p>Adopt page templates as the structural layer, with designs remaining user-customizable.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/card-lens.jpg" alt="Lucent design asset"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></div><div data-template-slot="rationale"><article class="template-card"><h3>Rationale</h3><p>This keeps generation reliable while leaving style expressive and replaceable.</p></article></div><div class="template-card" data-template-slot="next-steps"><h2>Next steps</h2><ol class="template-list"><li><strong>Pilot</strong> Use the built-in preview to tune every template.</li><li><strong>Validate</strong> Promote only contracts that pass QA and browser review.</li><li><strong>Ship</strong> Document the add-slide workflow for agents.</li></ol></div></div>
                 
             </div>
-            <div class="template-page-number">15</div>
+            <div class="template-page-number">16</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="risks-tradeoffs">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="17" data-design="built-in-preview" data-template="risks-tradeoffs">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 16 / 16</p>
+                    <p class="template-eyebrow">Template 17 / 17</p>
                     <h1 class="template-title">risks-tradeoffs</h1>
                 </header><div class="template-body template-grid cols-3" data-template-slot="risks"><article class="template-card"><h3>Constraint</h3><p>Templates can over-constrain if they become decorative presets instead of communication jobs.</p><figure class="template-image-card"><div class="template-image-frame"><img src="./assets/report-visual.jpg" alt="Report visual"></div><figcaption class="template-image-caption">Design asset example</figcaption></figure></article><article class="template-card"><h3>Mitigation</h3><p>Keep bounded HTML edit flow after scaffold insertion so agents can improve the page directly.</p></article><article class="template-card"><h3>Tradeoff</h3><p>More structure improves QA, but only if template contracts stay small and semantic.</p></article></div>
                 
             </div>
-            <div class="template-page-number">16</div>
+            <div class="template-page-number">17</div>
         </div>
     </section>
     <!-- revela-slides:end -->

package/lib/page-templates/render.ts

@@ -142,6 +142,13 @@ const templates: PageTemplateDefinition[] = [
     field("takeawaysTitle", "string", "Title for the interpretation text panel."),
     field("items", "items[]", "Takeaways.", true),
   ], ["Chart area must be explicit and bounded."], ["Chart panel and takeaways both exist."]),
+  define("table", "Table", "Explain a structured table with a left reading card and right table region.", [
+    field("title", "string", "Slide title.", true),
+    field("textTitle", "string", "Left text card title."),
+    field("textBody", "string", "Left text card body."),
+    field("columns", "string[]", "Column labels.", true),
+    field("rows", "rows[]", "Table rows.", true),
+  ], ["Use the text card to tell the audience how to read the table.", "Keep table rows structured and scannable."], ["Left text card and right table region both exist.", "Table has headers and body rows."]),
   define("table-comparison", "Table / Comparison", "Compare options, segments, or facts in a structured table.", [
     field("title", "string", "Slide title.", true),
     field("columns", "string[]", "Column labels.", true),
@@ -277,6 +284,20 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
         { label: "Decision use", description: "Explain how the chart changes the recommendation, what threshold matters, and what follow-up evidence would reduce risk." },
       ],
     }),
+    fixture("table", {
+      title: "table",
+      textTitle: "Financial readout",
+      textBody: "Read top-line growth first, then check margin, cash conversion, and retention to see whether the plan is financially durable.",
+      columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"],
+      rows: [
+        ["Revenue", "$84.2M", "$104.8M", "+24% planned growth"],
+        ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"],
+        ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"],
+        ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"],
+        ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves to 69%"],
+        ["Net retention", "116%", "121%", "Expansion supports plan quality"],
+      ],
+    }),
     fixture("table-comparison", {
       title: "table-comparison",
       columns: ["Layer", "Owns", "Agent task"],
@@ -546,19 +567,27 @@ ${lucentClosingBackgroundCss}
 .template-chart-placeholder { width: 76%; height: 56%; border-left: 2px solid var(--line-strong); border-bottom: 2px solid var(--line-strong); display: flex; align-items: end; gap: 28px; padding: 0 28px 24px; }
 .template-visual-slot-panel { width: 100%; min-height: 520px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.08), rgba(24,168,216,0.08)); display: grid; place-items: center; padding: 0; }
 .template-visual-slot-label { font-size: 13px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
-.template-text-panel.template-chart-takeaway-panel { gap: 28px; background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
-.template-chart-takeaway-panel .template-text-panel-title { color: white; }
+.template-text-panel.template-chart-takeaway-panel { gap: 28px; }
+.template-text-panel--plain { background: rgba(255,255,255,0.74); border: 1px solid transparent; box-shadow: none; }
+.template-text-panel--clear { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding-left: 0; padding-right: 0; }
+.template-text-panel--color { background: linear-gradient(135deg, #5f82c8 0%, var(--accent-primary) 58%, #18a8d8 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.24); }
+.template-text-panel--color .template-text-panel-title { color: white; }
+.template-text-panel--color .template-text-panel-body { color: rgba(255,255,255,0.78); }
 .template-chart-takeaway-list { display: grid; gap: 22px; width: 100%; }
 .template-chart-takeaway-item { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.24); }
 .template-chart-takeaway-item:first-child { padding-top: 0; border-top: 0; }
 .template-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: white; }
 .template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: rgba(255,255,255,0.78); }
 .template-bar { flex: 1; background: linear-gradient(180deg, var(--accent-primary), var(--accent-cyan)); min-height: 80px; }
+.template-table-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 34px; height: 100%; align-items: stretch; }
+.template-table-layout .template-side-panel { grid-column: 1; grid-row: 1; }
+.template-table-region { grid-column: 2; grid-row: 1; min-width: 0; min-height: 0; height: 100%; }
+.template-table-region .template-table-wrap { height: 100%; }
 .template-table-wrap { display: grid; grid-template-rows: minmax(0, auto) auto; gap: 22px; height: 100%; align-content: start; }
 .template-table { width: 100%; border-collapse: collapse; background: rgba(255,255,255,0.86); box-shadow: 0 18px 44px var(--shadow-soft); }
 .template-table th, .template-table td { padding: 22px 24px; border-bottom: 1px solid var(--line); text-align: left; font-size: 21px; }
 .template-table th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.12em; font-size: 15px; }
-.template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; background: rgba(255,255,255,0.74); border-radius: var(--surface-radius); padding: 42px; }
+.template-text-panel { min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 20px; border-radius: var(--surface-radius); padding: 42px; }
 .template-text-panel-title { margin: 0; font-size: 34px; line-height: 1.28; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
 .template-text-panel-body { margin: 0; font-size: 23px; line-height: 1.52; color: var(--text-secondary); }
 .template-side-panel { align-self: stretch; }
@@ -580,9 +609,7 @@ ${lucentClosingBackgroundCss}
 .template-timeline-layout--right { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
 .template-timeline-layout--right .template-timeline { grid-column: 1; grid-row: 1; }
 .template-timeline-layout--right .template-side-panel { grid-column: 2; grid-row: 1; }
-.template-timeline-layout .template-text-panel { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
-.template-timeline-layout .template-text-panel-title { color: white; }
-.template-timeline-layout .template-text-panel-body { color: rgba(255,255,255,0.78); }
+.template-timeline-layout .template-text-panel--color { background: linear-gradient(135deg, #7a7fe8 0%, #5f82c8 58%, #315eea 115%); color: white; box-shadow: 0 22px 56px rgba(49,94,234,0.22); }
 .template-timeline--horizontal { grid-template-columns: repeat(var(--timeline-count), 1fr); column-gap: 18px; align-items: stretch; --timeline-axis-y: 86%; }
 .template-timeline--horizontal::before { content: ""; position: absolute; left: 4%; right: 4%; top: var(--timeline-axis-y); border-top: 2px solid var(--line-strong); transform: translateY(-1px); }
 .template-timeline-item { position: relative; min-height: 400px; display: grid; justify-items: center; align-items: center; }
@@ -656,6 +683,10 @@ ${lucentClosingBackgroundCss}
 .template-frame--catalog .template-chart-takeaway-item { gap: 4px; padding-top: 11px; }
 .template-frame--catalog .template-chart-takeaway-item h3 { font-size: 19px; line-height: 1.2; }
 .template-frame--catalog .template-chart-takeaway-item p { font-size: 15px; line-height: 1.3; }
+.template-frame--catalog .template-table-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 22px; }
+.template-frame--catalog .template-table-layout .template-text-panel { padding: 22px; gap: 10px; }
+.template-frame--catalog .template-table-layout .template-text-panel-title { font-size: 25px; line-height: 1.3; }
+.template-frame--catalog .template-table-layout .template-text-panel-body { font-size: 18px; line-height: 1.4; }
 .template-frame--catalog .template-table-wrap { gap: 16px; }
 .template-frame--catalog .template-table th,
 .template-frame--catalog .template-table td { padding: 14px 18px; font-size: 17px; line-height: 1.32; }
@@ -962,6 +993,7 @@ function renderBody(templateId: string, content: Record<string, any>): string {
   if (templateId === "claim-supporting-visual") return `${renderHeader(content, "Claim + Supporting Visual")}<div class="template-body template-grid cols-2">${claimTextPanel(content)}${visualSlotPanel()}</div>`
   if (templateId === "metric-highlight") return `${renderHeader(content, "Metric Highlight")}<div class="template-body">${metricHighlight(content)}</div>`
   if (templateId === "chart-takeaways") return `${renderHeader(content, "Chart + Takeaways")}<div class="template-body template-grid template-chart-layout">${visualSlotPanel()}${chartTakeawayPanel(content)}</div>`
+  if (templateId === "table") return `${renderHeader(content, "Table")}<div class="template-body">${tablePage(content)}</div>`
   if (templateId === "table-comparison") return `${renderHeader(content, "Table / Comparison")}<div class="template-body" data-template-slot="table">${table(content)}</div>`
   if (templateId === "milestone") return `${renderHeader(content, "Milestone")}<div class="template-body">${timeline({ ...content, orientation: "horizontal" })}</div>`
   if (templateId === "timeline") return `${renderHeader(content, "Timeline")}<div class="template-body">${timeline({ ...content, orientation: "vertical" })}</div>`
@@ -1010,7 +1042,7 @@ function evidenceCards(items: Array<{ label: string; description: string; image?
 function chartTakeawayPanel(content: Record<string, any>): string {
   const takeawayItems = items(content)
   const title = stringValue(content.takeawaysTitle) || "What to read"
-  return `<div class="template-text-panel template-chart-takeaway-panel" data-template-slot="takeaways">
+  return `<div class="template-text-panel template-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">${escapeHtml(title)}</h2>
                     <div class="template-chart-takeaway-list">${takeawayItems.map((item) => `<section class="template-chart-takeaway-item"><h3>${escapeHtml(item.label)}</h3><p>${escapeHtml(item.description)}</p></section>`).join("")}</div>
                 </div>`
@@ -1044,6 +1076,14 @@ function table(content: Record<string, any>): string {
   return `<div class="template-table-wrap"><table class="template-table"><thead><tr>${columns.map((column) => `<th>${escapeHtml(column)}</th>`).join("")}</tr></thead><tbody>${rows.map((row) => `<tr>${columns.map((column, index) => `<td>${escapeHtml(Array.isArray(row) ? stringValue(row[index]) : stringValue(row[column]) || stringValue(row[slug(column)]))}</td>`).join("")}</tr>`).join("")}</tbody></table>${insight}</div>`
 }
 
+function tablePage(content: Record<string, any>): string {
+  const panelContent = {
+    insightTitle: stringValue(content.textTitle) || "What to read",
+    insightBody: stringValue(content.textBody) || "Use this card to explain the comparison, caveat, or decision implication before the audience scans the table.",
+  }
+  return `<div class="template-table-layout">${renderTextPanel(panelContent, "text-card", "clear")}<div class="template-table-region" data-template-slot="table">${table({ ...content, insightTitle: "", insightBody: "" })}</div></div>`
+}
+
 function renderInsightPanel(content: Record<string, any>): string {
   const body = stringValue(content.insightBody)
   if (!body) return ""
@@ -1090,14 +1130,14 @@ function timelineMilestone(item: any, orientation: "horizontal" | "vertical"): s
 }
 
 function renderSidePanel(content: Record<string, any>): string {
-  return renderTextPanel(content)
+  return renderTextPanel(content, "insight", "color")
 }
 
-function renderTextPanel(content: Record<string, any>): string {
+function renderTextPanel(content: Record<string, any>, slot = "insight", variant: "plain" | "clear" | "color" = "plain"): string {
   const body = stringValue(content.insightBody)
   if (!body) return ""
   const title = stringValue(content.insightTitle) || "Insight"
-  return `<div class="template-side-panel template-text-panel" data-template-slot="insight"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p></div>`
+  return `<div class="template-side-panel template-text-panel template-text-panel--${variant}" data-template-slot="${escapeAttribute(slot)}"><h2 class="template-side-panel-title template-text-panel-title">${escapeHtml(title)}</h2><p class="template-side-panel-body template-text-panel-body">${escapeHtml(body)}</p></div>`
 }
 
 function imageCard(input: any): string {
@@ -1150,6 +1190,7 @@ function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<str
   if (templateId === "claim-supporting-visual") return { claim: "Replace with one visual claim.", body: "Use this copy to guide how the visual should be read.", items: defaultItems(["Anchor", "Callout"]), ...base }
   if (templateId === "metric-highlight") return { metrics: [{ value: "67%", label: "Metric", description: "Replace with interpretation." }, { value: "3x", label: "Comparison", description: "Replace with reading note." }, { value: "14d", label: "Window", description: "Replace with time context." }], insightTitle: "Read the signal", insightBody: "Replace with the decision implication, caveat, or next reading step.", ...base }
   if (templateId === "chart-takeaways") return { takeawaysTitle: "What to read", items: defaultItems(["Trend", "Driver", "Decision use"]), ...base }
+  if (templateId === "table") return { textTitle: "Financial readout", textBody: "Replace with the table reading note, caveat, or decision implication.", columns: ["Line item", "FY2025", "FY2026 Plan", "YoY / note"], rows: [["Revenue", "$84.2M", "$104.8M", "+24% planned growth"], ["Gross margin", "68.4%", "71.2%", "+280 bps mix shift"], ["Operating expense", "$42.7M", "$49.1M", "Scale hiring below revenue growth"], ["EBITDA", "$14.9M", "$23.6M", "+58% operating leverage"], ["Free cash flow", "$9.8M", "$16.4M", "Cash conversion improves"], ["Net retention", "116%", "121%", "Expansion supports plan quality"]], ...base }
   if (templateId === "table-comparison") return { columns: ["Dimension", "Current", "Target"], rows: [["Replace", "Current state", "Target state"], ["Caveat", "Known limit", "Next proof"]], insightTitle: "Insight", insightBody: "Replace with the table reading note or caveat.", ...base }
   if (templateId === "milestone" || templateId === "timeline-roadmap") return { orientation: "horizontal", milestones: [{ date: "2022", label: "Signal", description: "Name the starting condition." }, { date: "2023", label: "Proof", description: "Show the evidence threshold." }, { date: "2024", label: "Inflection", description: "Use the pivotal moment to frame the shift." }, { date: "2025", label: "Scale", description: "Use a taller card for the highlighted milestone.", highlight: true }, { date: "2026", label: "Decision", description: "State what changes next." }], ...base }
   if (templateId === "timeline") return { orientation: "vertical", insightTitle: "Reading the journey", insightBody: "Replace with the timeline interpretation or caveat.", milestones: [{ date: "Mar 2019", label: "Launch", description: "Name the starting event." }, { date: "Nov 2019", label: "Audit", description: "Show the evidence threshold." }, { date: "May 2020", label: "Scale", description: "Explain the operating cadence." }, { date: "Feb 2021", label: "Review", description: "State what changes next." }], ...base }

package/lib/page-templates/templates/index.ts

@@ -16,6 +16,7 @@ export * from "./process-steps"
 export * from "./recommendation-decision"
 export * from "./risks-tradeoffs"
 export * from "./section-divider"
+export * from "./table"
 export * from "./table-comparison"
 export * from "./timeline"
 export * from "./timeline-roadmap"

package/lib/page-templates/templates/table.ts

@@ -0,0 +1,3 @@
+import { templateModule } from "./shared"
+
+export const tableTemplate = templateModule("table")

package/lib/page-templates/vocabulary.ts

@@ -55,10 +55,11 @@ export const PAGE_TEMPLATE_VOCABULARY: PageTemplateVocabulary[] = [
   vocab("key-message-evidence", ["template-key-message-panel", "template-evidence-grid"], ["key-message", "evidence"], ["key-message", "evidence"], ["Key message and evidence regions must remain distinct."]),
   vocab("claim-supporting-visual", ["template-claim-text-panel", "template-visual-slot-panel"], ["claim", "visual"], ["claim", "visual"], ["Visual slot may be replaced by image, chart, table, or diagram container."]),
   vocab("metric-highlight", ["template-stat-grid"], ["metrics"], ["metrics", "insight"], ["Metric values should remain visible outside prose."]),
-  vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and takeaway text panel must both remain present."]),
+  vocab("chart-takeaways", ["template-chart-panel", "template-chart-takeaway-panel", "template-text-panel--color"], ["visual", "takeaways"], ["visual", "takeaways"], ["Chart/image slot and color takeaway text panel must both remain present."]),
+  vocab("table", ["template-table-layout", "template-table-wrap", "template-table", "template-side-panel", "template-text-panel", "template-text-panel--clear"], ["text-card", "table"], ["text-card", "table"], ["Left clear text card explains how to read the structured table.", "Table headers and body should remain structured, not prose-only."]),
   vocab("table-comparison", ["template-table-wrap", "template-table"], ["table"], ["table", "insight"], ["Table headers and body should remain structured, not prose-only."]),
   vocab("milestone", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy", "template-insight-icon"], ["timeline"], ["timeline"], ["Each milestone item must keep dot and copy as sibling anchors inside one item.", "Milestone cards reuse .template-card; highlight uses the item modifier."]),
-  vocab("timeline", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "The optional insight slot explains the sequence without replacing event copy."]),
+  vocab("timeline", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "The optional color insight slot explains the sequence without replacing event copy."]),
   vocab("process-steps", ["template-steps", "template-step-number"], ["steps"], ["steps"], ["Steps should remain ordered in DOM order."]),
   vocab("recommendation-decision", ["template-card"], ["recommendation", "rationale", "next-steps"], ["recommendation", "rationale", "next-steps"], ["Keep recommendation, rationale, and next steps separate."]),
   vocab("risks-tradeoffs", ["template-card"], ["risks"], ["risks"], ["Risk/tradeoff cards should name uncertainty explicitly."]),
@@ -91,6 +92,8 @@ const additionalClasses = [
   "template-chart-takeaway-list",
   "template-chart-takeaway-item",
   "template-bar",
+  "template-table-layout",
+  "template-table-region",
   "template-table",
   "template-table-wrap",
   "template-side-panel",
@@ -99,6 +102,9 @@ const additionalClasses = [
   "template-side-panel--left",
   "template-side-panel--right",
   "template-text-panel",
+  "template-text-panel--plain",
+  "template-text-panel--clear",
+  "template-text-panel--color",
   "template-text-panel-title",
   "template-text-panel-body",
   "template-insight-panel",