@cyber-dash-tech/revela 0.19.8 → 0.20.0

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 / 17</p>
+                    <p class="template-eyebrow">Template 01 / 19</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 / 17</p>
+                    <p class="template-eyebrow">Template 02 / 19</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 / 17</p>
+                    <p class="template-eyebrow">Template 03 / 19</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 / 17</p>
+                            <p class="template-eyebrow">Template 04 / 19</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 / 17</p>
+                    <p class="template-eyebrow">Template 05 / 19</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>
                 
@@ -74,23 +74,67 @@
             <div class="template-page-number">05</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="6" data-design="built-in-preview" data-template="problem-context">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="6" data-design="built-in-preview" data-template="team">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 06 / 17</p>
+                    <p class="template-eyebrow">Template 06 / 19</p>
+                    <h1 class="template-title">team</h1>
+                </header><div class="template-body"><div class="template-team-grid" data-template-slot="members"><article class="template-team-card">
+                        <figure class="template-team-photo"><img src="./assets/card-lens.jpg" alt="Portrait placeholder"></figure>
+                        <div class="template-team-copy">
+                            <h2 class="template-team-name">Maya Chen</h2>
+                            <p class="template-team-role">Product and AI systems</p>
+                            <ul class="template-team-highlights"><li>Led the decision workspace launch from zero to enterprise pilot.</li><li>Built source-linked review loops for regulated teams.</li></ul>
+                            <p class="template-team-education">M.S., Human-Computer Interaction</p>
+                        </div>
+                    </article><article class="template-team-card">
+                        <figure class="template-team-photo"><img src="./assets/report-visual.jpg" alt="Portrait placeholder"></figure>
+                        <div class="template-team-copy">
+                            <h2 class="template-team-name">Jon Bell</h2>
+                            <p class="template-team-role">Go-to-market and partnerships</p>
+                            <ul class="template-team-highlights"><li>Scaled strategic accounts across finance and healthcare.</li><li>Opened channel partnerships with implementation teams.</li></ul>
+                            <p class="template-team-education">MBA, Strategy and Operations</p>
+                        </div>
+                    </article><article class="template-team-card">
+                        <figure class="template-team-photo"><img src="./assets/soft-texture.jpg" alt="Portrait placeholder"></figure>
+                        <div class="template-team-copy">
+                            <h2 class="template-team-name">Ari Patel</h2>
+                            <p class="template-team-role">Data and platform engineering</p>
+                            <ul class="template-team-highlights"><li>Architected reliable artifact generation and QA pipelines.</li><li>Shipped analytics systems used by executive teams.</li></ul>
+                            <p class="template-team-education">B.S., Computer Science</p>
+                        </div>
+                    </article><article class="template-team-card">
+                        <figure class="template-team-photo"><img src="./assets/toc-orb.png" alt="Portrait placeholder"></figure>
+                        <div class="template-team-copy">
+                            <h2 class="template-team-name">Lina Gomez</h2>
+                            <p class="template-team-role">Research and narrative design</p>
+                            <ul class="template-team-highlights"><li>Directed research synthesis for high-stakes board materials.</li><li>Designed traceable evidence models for complex decisions.</li></ul>
+                            <p class="template-team-education">M.A., Communication Design</p>
+                        </div>
+                    </article></div></div>
+                
+            </div>
+            <div class="template-page-number">06</div>
+        </div>
+    </section>
+    <section class="slide template-slide" slide-qa="true" data-slide-index="7" data-design="built-in-preview" data-template="problem-context">
+        <div class="slide-canvas">
+            <div class="template-frame">
+                <header>
+                    <p class="template-eyebrow">Template 07 / 19</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>
                 
             </div>
-            <div class="template-page-number">06</div>
+            <div class="template-page-number">07</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="7" data-design="built-in-preview" data-template="key-message-evidence">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="8" data-design="built-in-preview" data-template="key-message-evidence">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 07 / 17</p>
+                    <p class="template-eyebrow">Template 08 / 19</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>
@@ -98,14 +142,14 @@
                 </div><div class="template-evidence-grid" data-template-slot="evidence"><article class="template-card template-evidence-card"><h3>Evidence 1</h3><p>The generated HTML separates the key-message panel from the evidence grid, so the claim cannot collapse into generic card content.</p></article><article class="template-card template-evidence-card"><h3>Evidence 2</h3><p>Each evidence slot has a stable title and explanation area, giving the agent a predictable place for proof, caveat, or source-backed detail.</p></article><article class="template-card template-evidence-card"><h3>Evidence 3</h3><p>QA can inspect the DOM contract before visual styling, which keeps template structure from depending on a design skin.</p></article></div></div>
                 
             </div>
-            <div class="template-page-number">07</div>
+            <div class="template-page-number">08</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="8" data-design="built-in-preview" data-template="claim-supporting-visual">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="9" data-design="built-in-preview" data-template="claim-supporting-visual">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 08 / 17</p>
+                    <p class="template-eyebrow">Template 09 / 19</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>
@@ -114,14 +158,14 @@
                 </div><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>
                 
             </div>
-            <div class="template-page-number">08</div>
+            <div class="template-page-number">09</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="9" data-design="built-in-preview" data-template="metric-highlight">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="10" data-design="built-in-preview" data-template="metric-highlight">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 09 / 17</p>
+                    <p class="template-eyebrow">Template 10 / 19</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>
@@ -129,14 +173,14 @@
                 </div></div></div>
                 
             </div>
-            <div class="template-page-number">09</div>
+            <div class="template-page-number">10</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="10" data-design="built-in-preview" data-template="chart-takeaways">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="chart-takeaways">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 10 / 17</p>
+                    <p class="template-eyebrow">Template 11 / 19</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-text-panel--color template-chart-takeaway-panel" data-template-slot="takeaways">
                     <h2 class="template-text-panel-title">What to read</h2>
@@ -145,26 +189,26 @@
                 </div></div>
                 
             </div>
-            <div class="template-page-number">10</div>
+            <div class="template-page-number">11</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="11" data-design="built-in-preview" data-template="table">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="12" data-design="built-in-preview" data-template="table">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 11 / 17</p>
+                    <p class="template-eyebrow">Template 12 / 19</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><blockquote class="template-text-panel-quote">Durability shows up when growth, margin, and cash all point in the same direction.</blockquote></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 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="table-comparison">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="13" 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>
+                    <p class="template-eyebrow">Template 13 / 19</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>
@@ -172,14 +216,14 @@
                 </div></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="milestone">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="14" data-design="built-in-preview" data-template="milestone">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 13 / 17</p>
+                    <p class="template-eyebrow">Template 14 / 19</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">
@@ -224,14 +268,14 @@
                     </article></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="timeline">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="15" data-design="built-in-preview" data-template="timeline">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 14 / 17</p>
+                    <p class="template-eyebrow">Template 15 / 19</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 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><blockquote class="template-text-panel-quote">Sequence is evidence when each step changes what the audience can believe.</blockquote></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>
@@ -264,43 +308,60 @@
                     </article></div></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="process-steps">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="16" data-design="built-in-preview" data-template="process-steps">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 15 / 17</p>
+                    <p class="template-eyebrow">Template 16 / 19</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">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="recommendation-decision">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="17" data-design="built-in-preview" data-template="recommendation-decision">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 16 / 17</p>
+                    <p class="template-eyebrow">Template 17 / 19</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">16</div>
+            <div class="template-page-number">17</div>
         </div>
     </section>
-    <section class="slide template-slide" slide-qa="true" data-slide-index="17" data-design="built-in-preview" data-template="risks-tradeoffs">
+    <section class="slide template-slide" slide-qa="true" data-slide-index="18" data-design="built-in-preview" data-template="risks-tradeoffs">
         <div class="slide-canvas">
             <div class="template-frame">
                 <header>
-                    <p class="template-eyebrow">Template 17 / 17</p>
+                    <p class="template-eyebrow">Template 18 / 19</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">17</div>
+            <div class="template-page-number">18</div>
+        </div>
+    </section>
+    <section class="slide template-slide" slide-qa="true" data-slide-index="19" data-design="built-in-preview" data-template="free">
+        <div class="slide-canvas">
+            <div class="template-frame">
+                <header>
+                    <p class="template-eyebrow">Template 19 / 19</p>
+                    <h1 class="template-title">free</h1>
+                </header><div class="template-body"><div class="template-free-stage" data-template-slot="placeholder"><section class="template-free-placeholder">
+                        <span class="template-free-placeholder-label">placeholder</span>
+                        <h2>Flexible content placeholder</h2>
+                        <p>Agent may replace this single region with multiple images, charts, text blocks, tables, or a mixed composition.</p>
+                        <div class="template-free-placeholder-hints"><span class="template-free-placeholder-hint">images</span><span class="template-free-placeholder-hint">charts</span><span class="template-free-placeholder-hint">text</span><span class="template-free-placeholder-hint">tables</span></div>
+                    </section></div></div>
+                
+            </div>
+            <div class="template-page-number">19</div>
         </div>
     </section>
     <!-- revela-slides:end -->

package/lib/page-templates/render.ts

@@ -7,7 +7,7 @@ export type PageTemplateStatus = "metadata-only" | "renderable"
 
 export interface PageTemplateField {
   name: string
-  type: "string" | "string[]" | "items[]" | "metrics[]" | "milestones[]" | "rows[]" | "steps[]"
+  type: "string" | "string[]" | "items[]" | "metrics[]" | "milestones[]" | "rows[]" | "steps[]" | "members[]" | "placeholder"
   required?: boolean
   description: string
 }
@@ -112,6 +112,10 @@ const templates: PageTemplateDefinition[] = [
     field("title", "string", "Slide title.", true),
     field("items", "items[]", "Summary takeaways.", true),
   ], ["Use 3-4 takeaways.", "Each takeaway needs a short label and support line."], ["Contains summary cards."]),
+  define("team", "Team", "Introduce the people behind the work with portrait-led member cards.", [
+    field("title", "string", "Slide title.", true),
+    field("members", "members[]", "Team members with portrait, role, highlights, and education.", true),
+  ], ["Use 3-4 members for a readable 16:9 page.", "Each member should have one portrait, two concise highlights, and one highest education line."], ["Contains team member cards.", "Each card keeps portrait and credentials distinct."]),
   define("problem-context", "Problem / Context", "Frame why the topic matters now.", [
     field("title", "string", "Slide title.", true),
     field("body", "string", "Context paragraph.", true),
@@ -189,6 +193,10 @@ const templates: PageTemplateDefinition[] = [
     field("title", "string", "Slide title.", true),
     field("items", "items[]", "Risks or caveats.", true),
   ], ["Name uncertainty instead of hiding it."], ["Contains risk/tradeoff cards."]),
+  define("free", "Free / Plain", "Start from a title and one flexible placeholder that can later hold images, charts, text, or mixed content.", [
+    field("title", "string", "Slide title.", true),
+    field("placeholder", "placeholder", "One flexible placeholder region for agent-decided content composition.", true),
+  ], ["Use for pages that need a simple title and one replaceable working area.", "The placeholder may later contain multiple images, charts, text blocks, tables, or mixed content selected by the agent."], ["Contains one free placeholder stage.", "The single placeholder remains visible and replaceable."]),
 ]
 
 export function listPageTemplates(): { ok: true; templates: PageTemplateDefinition[] } {
@@ -241,6 +249,15 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
         { label: "Next step is narrow", description: "A pilot decision creates more learning without overcommitting capital or team capacity." },
       ],
     }),
+    fixture("team", {
+      title: "team",
+      members: [
+        { name: "Maya Chen", role: "Product and AI systems", image: "./assets/card-lens.jpg", imageAlt: "Portrait placeholder", highlights: ["Led the decision workspace launch from zero to enterprise pilot.", "Built source-linked review loops for regulated teams."], education: "M.S., Human-Computer Interaction" },
+        { name: "Jon Bell", role: "Go-to-market and partnerships", image: "./assets/report-visual.jpg", imageAlt: "Portrait placeholder", highlights: ["Scaled strategic accounts across finance and healthcare.", "Opened channel partnerships with implementation teams."], education: "MBA, Strategy and Operations" },
+        { name: "Ari Patel", role: "Data and platform engineering", image: "./assets/soft-texture.jpg", imageAlt: "Portrait placeholder", highlights: ["Architected reliable artifact generation and QA pipelines.", "Shipped analytics systems used by executive teams."], education: "B.S., Computer Science" },
+        { name: "Lina Gomez", role: "Research and narrative design", image: "./assets/toc-orb.png", imageAlt: "Portrait placeholder", highlights: ["Directed research synthesis for high-stakes board materials.", "Designed traceable evidence models for complex decisions."], education: "M.A., Communication Design" },
+      ],
+    }),
     fixture("problem-context", {
       title: "problem-context",
       body: "Use this template when the audience needs the situation, tension, and implication before seeing recommendations.",
@@ -371,6 +388,14 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
         { label: "Tradeoff", description: "More structure improves QA, but only if template contracts stay small and semantic." },
       ],
     }),
+    fixture("free", {
+      title: "free",
+      placeholder: {
+        label: "Flexible content placeholder",
+        description: "Agent may replace this single region with multiple images, charts, text blocks, tables, or a mixed composition.",
+        hints: ["images", "charts", "text", "tables"],
+      },
+    }),
   ]
 }
 
@@ -475,23 +500,23 @@ export function templateDeckCss(input: { designName?: string; designAssetBasePat
   const lucentCoverBackground = designName === "lucent" && assetBasePath ? cssUrl(`${assetBasePath}/cover-background.jpg`) : ""
   const lucentClosingBackground = designName === "lucent" && assetBasePath ? cssUrl(`${assetBasePath}/closing-background.jpg`) : ""
   const lucentCoverBackgroundCss = lucentCoverBackground ? `
-.template-slide[data-design="lucent"][data-template="cover"] .slide-canvas {
+.template-slide[data-template="cover"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(7,17,31,0.42) 52%, rgba(7,17,31,0.24)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="agenda"] .slide-canvas {
+.template-slide[data-template="agenda"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(7,17,31,0.58) 52%, rgba(7,17,31,0.32)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }
-.template-slide[data-design="lucent"][data-template="section-divider"] .slide-canvas {
+.template-slide[data-template="section-divider"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.86), rgba(16,26,43,0.62) 58%, rgba(36,58,115,0.36)),
     url("${lucentCoverBackground}") center center / cover no-repeat;
 }` : ""
   const lucentClosingBackgroundCss = lucentClosingBackground ? `
-.template-slide[data-design="lucent"][data-template="closing"] .slide-canvas {
+.template-slide[data-template="closing"] .slide-canvas {
   background:
     linear-gradient(90deg, rgba(7,17,31,0.82), rgba(49,94,234,0.42) 58%, rgba(24,168,216,0.24)),
     url("${lucentClosingBackground}") center center / cover no-repeat;
@@ -591,10 +616,13 @@ ${lucentClosingBackgroundCss}
 .template-text-panel-formula-caption { margin: 0; font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
 .template-text-panel--color .template-text-panel-formula-caption { color: rgba(255,255,255,0.72); }
 .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 { display: grid; gap: 7px; padding-top: 18px; border-top: 1px solid var(--line); }
+.template-text-panel--color .template-chart-takeaway-item { border-top-color: 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-chart-takeaway-item h3 { margin: 0; font-size: 25px; line-height: 1.24; color: var(--text-primary); }
+.template-text-panel--color .template-chart-takeaway-item h3 { color: white; }
+.template-chart-takeaway-item p { margin: 0; font-size: 20px; line-height: 1.46; color: var(--text-secondary); }
+.template-text-panel--color .template-chart-takeaway-item p { 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; }
@@ -652,6 +680,25 @@ ${lucentClosingBackgroundCss}
 .template-timeline--vertical .template-timeline-item:nth-child(even) .template-timeline-copy { grid-column: 3; text-align: left; align-self: center; }
 .template-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
 .template-step-number { font-size: 48px; color: var(--accent-primary); font-weight: 800; margin-bottom: 30px; }
+.template-team-grid { height: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
+.template-team-card { min-width: 0; min-height: 0; display: grid; grid-template-rows: 330px minmax(0, 1fr); overflow: hidden; background: rgba(255,255,255,0.86); border: 1px solid var(--line); border-radius: var(--surface-radius); box-shadow: 0 18px 44px var(--shadow-soft); }
+.template-team-photo { margin: 0; width: 100%; height: 100%; overflow: hidden; background: linear-gradient(135deg, var(--accent-soft), rgba(24,168,216,0.16)); display: grid; place-items: center; }
+.template-team-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
+.template-team-photo span { font-family: var(--font-display); font-size: 72px; line-height: 1; color: var(--accent-primary); font-weight: 800; }
+.template-team-copy { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 26px; }
+.template-team-name { margin: 0; font-size: 30px; line-height: 1.18; color: var(--text-primary); padding-bottom: 3px; overflow: visible; }
+.template-team-role { margin: 0; font-size: 15px; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-primary); font-weight: 800; }
+.template-team-highlights { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
+.template-team-highlights li { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.36; color: var(--text-secondary); }
+.template-team-highlights li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; background: var(--accent-primary); border-radius: 999px; }
+.template-team-education { margin: auto 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.35; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; }
+.template-free-stage { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr); }
+.template-free-placeholder { min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 42px; border: 1px dashed var(--line-strong); border-radius: var(--surface-radius); background: linear-gradient(135deg, rgba(49,94,234,0.06), rgba(24,168,216,0.07)); overflow: hidden; }
+.template-free-placeholder-label { align-self: flex-start; font-size: 13px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-primary); font-weight: 800; }
+.template-free-placeholder h2 { margin: 0; font-size: 38px; line-height: 1.18; color: var(--text-primary); padding-bottom: 4px; overflow: visible; }
+.template-free-placeholder p { margin: 0; max-width: 980px; font-size: 23px; line-height: 1.42; color: var(--text-secondary); }
+.template-free-placeholder-hints { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
+.template-free-placeholder-hint { display: inline-flex; align-items: center; min-height: 32px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); font-weight: 800; background: rgba(255,255,255,0.58); }
 .template-image-card { width: 100%; margin: 18px 0 0; display: grid; gap: 8px; }
 .template-image-frame { width: 100%; height: 128px; border-radius: var(--surface-radius); overflow: hidden; background: var(--surface-tint, #f1f6fc); border: 1px solid var(--line); }
 .template-image-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
@@ -731,6 +778,20 @@ ${lucentClosingBackgroundCss}
 .template-frame--catalog .template-timeline-copy p:last-child { font-size: 15px; line-height: 1.24; }
 .template-frame--catalog .template-steps { gap: 16px; }
 .template-frame--catalog .template-step-number { font-size: 40px; margin-bottom: 20px; }
+.template-frame--catalog .template-team-grid { gap: 16px; }
+.template-frame--catalog .template-team-card { grid-template-rows: 230px minmax(0, 1fr); }
+.template-frame--catalog .template-team-copy { padding: 18px; gap: 8px; }
+.template-frame--catalog .template-team-name { font-size: 22px; line-height: 1.14; }
+.template-frame--catalog .template-team-role { font-size: 11px; line-height: 1.25; }
+.template-frame--catalog .template-team-highlights { gap: 6px; }
+.template-frame--catalog .template-team-highlights li { font-size: 13px; line-height: 1.25; padding-left: 14px; }
+.template-frame--catalog .template-team-highlights li::before { top: 7px; width: 5px; height: 5px; }
+.template-frame--catalog .template-team-education { font-size: 10px; line-height: 1.25; padding-top: 9px; }
+.template-frame--catalog .template-free-placeholder { padding: 28px; gap: 10px; }
+.template-frame--catalog .template-free-placeholder-label { font-size: 10px; }
+.template-frame--catalog .template-free-placeholder h2 { font-size: 28px; line-height: 1.16; }
+.template-frame--catalog .template-free-placeholder p { font-size: 17px; line-height: 1.3; }
+.template-frame--catalog .template-free-placeholder-hint { min-height: 26px; padding: 6px 9px; font-size: 10px; }
 .template-frame--catalog .template-image-frame { height: 86px; }
 .template-frame--catalog .template-image-caption { font-size: 11px; }
 .template-frame--catalog .template-visual-placeholder-frame { height: 110px; }
@@ -1005,6 +1066,7 @@ function renderBody(templateId: string, content: Record<string, any>): string {
   if (["cover", "section-divider", "closing"].includes(templateId)) return `<div data-template-slot="hero">${renderHeader(content, templateId, { hero: true })}</div>`
   if (templateId === "agenda") return renderAgenda(content)
   if (templateId === "executive-summary") return `${renderHeader(content, "Executive Summary")}<div class="template-body template-grid cols-3" data-template-slot="summary-cards">${cards(items(content), "h2", { visualPlaceholder: true })}</div>`
+  if (templateId === "team") return `${renderHeader(content, "Team")}<div class="template-body"><div class="template-team-grid" data-template-slot="members">${teamCards(content.members)}</div></div>`
   if (templateId === "problem-context") return `${renderHeader(content, "Problem / Context")}<div class="template-body template-grid cols-2"><div class="template-card" data-template-slot="context"><p>${escapeHtml(stringValue(content.body))}</p></div><div class="template-card" data-template-slot="supporting-points">${list(items(content))}</div></div>`
   if (templateId === "key-message-evidence") return `${renderHeader(content, "Key Message + Evidence")}<div class="template-body template-grid cols-2">${keyMessagePanel(content)}<div class="template-evidence-grid" data-template-slot="evidence">${evidenceCards(items(content))}</div></div>`
   if (templateId === "claim-supporting-visual") return `${renderHeader(content, "Claim + Supporting Visual")}<div class="template-body template-grid cols-2">${claimTextPanel(content)}${visualSlotPanel()}</div>`
@@ -1018,6 +1080,7 @@ function renderBody(templateId: string, content: Record<string, any>): string {
   if (templateId === "process-steps") return `${renderHeader(content, "Process / Steps")}<div class="template-body"><div class="template-steps" data-template-slot="steps">${steps(content.steps)}</div></div>`
   if (templateId === "recommendation-decision") return `${renderHeader(content, "Recommendation / Decision")}<div class="template-body template-grid cols-3"><div class="template-card" data-template-slot="recommendation"><h2>Recommendation</h2><p>${escapeHtml(stringValue(content.recommendation))}</p>${imageCard(content)}</div><div data-template-slot="rationale">${cards(items(content).slice(0, 1), "h3")}</div><div class="template-card" data-template-slot="next-steps"><h2>Next steps</h2>${orderedSteps(content.steps)}</div></div>`
   if (templateId === "risks-tradeoffs") return `${renderHeader(content, "Risks / Tradeoffs")}<div class="template-body template-grid cols-3" data-template-slot="risks">${cards(items(content), "h3")}</div>`
+  if (templateId === "free") return `${renderHeader(content, "Free / Plain")}<div class="template-body"><div class="template-free-stage" data-template-slot="placeholder">${freePlaceholder(content.placeholder ?? content.placeholders)}</div></div>`
   return renderHeader(content, templateId)
 }
 
@@ -1056,6 +1119,45 @@ function evidenceCards(items: Array<{ label: string; description: string; image?
   return items.map((item, index) => `<article class="template-card template-evidence-card"><h3>${escapeHtml(item.label || `Evidence ${index + 1}`)}</h3><p>${escapeHtml(item.description)}</p>${imageCard(item)}</article>`).join("")
 }
 
+function teamCards(input: any): string {
+  const members = Array.isArray(input) ? input : []
+  return members.slice(0, 6).map((member, index) => {
+    const name = stringValue(member?.name) || `Member ${index + 1}`
+    const role = stringValue(member?.role || member?.title)
+    const image = safeImagePath(stringValue(member?.image))
+    const alt = stringValue(member?.imageAlt) || name
+    const highlights = stringArray(member?.highlights).slice(0, 3)
+    const education = stringValue(member?.education || member?.highestEducation)
+    return `<article class="template-team-card">
+                        <figure class="template-team-photo">${image ? `<img src="${escapeAttribute(image)}" alt="${escapeAttribute(alt)}">` : `<span>${escapeHtml(initials(name))}</span>`}</figure>
+                        <div class="template-team-copy">
+                            <h2 class="template-team-name">${escapeHtml(name)}</h2>
+                            ${role ? `<p class="template-team-role">${escapeHtml(role)}</p>` : ""}
+                            ${highlights.length > 0 ? `<ul class="template-team-highlights">${highlights.map((item) => `<li>${escapeHtml(item)}</li>`).join("")}</ul>` : ""}
+                            ${education ? `<p class="template-team-education">${escapeHtml(education)}</p>` : ""}
+                        </div>
+                    </article>`
+  }).join("")
+}
+
+function freePlaceholder(input: any): string {
+  const legacy = Array.isArray(input) ? input : []
+  const value = legacy.length > 0 ? {
+    label: "Flexible content placeholder",
+    description: "Agent may replace this single region with multiple images, charts, text blocks, tables, or a mixed composition.",
+    hints: legacy.map((item) => stringValue(item?.type || item?.label)).filter(Boolean),
+  } : input
+  const label = stringValue(value?.label) || "Flexible content placeholder"
+  const description = stringValue(value?.description) || "Agent may decide whether this placeholder becomes multiple images, charts, text blocks, tables, or a mixed composition."
+  const hints = stringArray(value?.hints || value?.accepts).slice(0, 6)
+  return `<section class="template-free-placeholder">
+                        <span class="template-free-placeholder-label">placeholder</span>
+                        <h2>${escapeHtml(label)}</h2>
+                        <p>${escapeHtml(description)}</p>
+                        ${hints.length > 0 ? `<div class="template-free-placeholder-hints">${hints.map((hint) => `<span class="template-free-placeholder-hint">${escapeHtml(hint)}</span>`).join("")}</div>` : ""}
+                    </section>`
+}
+
 function chartTakeawayPanel(content: Record<string, any>): string {
   const takeawayItems = items(content)
   const title = stringValue(content.takeawaysTitle) || "What to read"
@@ -1227,6 +1329,12 @@ function items(content: Record<string, any>): Array<{ label: string; description
   }))
 }
 
+function stringArray(value: any): string[] {
+  if (Array.isArray(value)) return value.map(stringValue).filter(Boolean)
+  const single = stringValue(value)
+  return single ? [single] : []
+}
+
 function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<string, any> {
   const title = stringValue(seed.title) || getPageTemplate(templateId).title
   const base = { ...seed, title }
@@ -1235,6 +1343,7 @@ function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<str
   if (templateId === "closing") return { ...base }
   if (templateId === "agenda") return { items: defaultItems(["Situation", "Evidence", "Decision"]), ...base }
   if (templateId === "executive-summary") return { items: defaultItems(["Decision is ready", "Risk is bounded", "Next step is narrow"]), ...base }
+  if (templateId === "team") return { members: [{ name: "Member One", role: "Role or function", highlights: ["Replace with a standout project.", "Replace with a standout experience."], education: "Highest education" }, { name: "Member Two", role: "Role or function", highlights: ["Replace with a standout project.", "Replace with a standout experience."], education: "Highest education" }, { name: "Member Three", role: "Role or function", highlights: ["Replace with a standout project.", "Replace with a standout experience."], education: "Highest education" }], ...base }
   if (templateId === "problem-context") return { body: "Replace with context, tension, and why now.", items: defaultItems(["Context", "Implication"]), ...base }
   if (templateId === "key-message-evidence") return { body: "Replace with the key message the audience should remember.", items: defaultItems(["Evidence 1", "Evidence 2", "Evidence 3"]), ...base }
   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 }
@@ -1247,6 +1356,7 @@ function scaffoldSeed(templateId: string, seed: Record<string, any>): Record<str
   if (templateId === "process-steps") return { steps: defaultItems(["Step 1", "Step 2", "Step 3"]), ...base }
   if (templateId === "recommendation-decision") return { recommendation: "Replace with the recommended decision.", items: defaultItems(["Rationale"]), steps: defaultItems(["Pilot", "Validate", "Ship"]), ...base }
   if (templateId === "risks-tradeoffs") return { items: defaultItems(["Risk", "Tradeoff", "Mitigation"]), ...base }
+  if (templateId === "free") return { placeholder: { label: "Flexible content placeholder", description: "Replace this single region with one or more images, charts, text blocks, tables, or mixed content.", hints: ["images", "charts", "text", "tables"] }, ...base }
   return base
 }
 
@@ -1295,6 +1405,11 @@ function safeImagePath(value: string): string {
   return image
 }
 
+function initials(value: string): string {
+  const parts = value.split(/\s+/).filter(Boolean)
+  return parts.slice(0, 2).map((part) => part.charAt(0).toUpperCase()).join("") || "?"
+}
+
 function escapeHtml(value: string): string {
   return value
     .replace(/&/g, "&amp;")

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

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