@cyber-dash-tech/revela 0.19.1 → 0.19.3

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),
@@ -150,10 +157,13 @@ const templates: PageTemplateDefinition[] = [
     field("insightBody", "string", "Interpretation, reading note, or caveat below the table."),
     field("insightIcon", "string", "Lucide icon name for the insight title."),
   ], ["Keep rows scannable.", "Do not use a table for pure prose."], ["Table has headers and body rows."]),
-  define("timeline-roadmap", "Timeline / Roadmap", "Show dated phases, milestones, or journey steps.", [
+  define("milestone", "Milestone", "Show dated phases or milestones on a horizontal roadmap axis.", [
+    field("title", "string", "Slide title.", true),
+    field("milestones", "milestones[]", "Horizontal milestones.", true),
+  ], ["Use 3-6 milestones.", "Milestone cards sit above the axis and date labels sit below it.", "Each dot belongs to the same DOM item as its copy."], ["Timeline root exists.", "Every milestone has dot and copy.", "Dot and copy are sibling anchors inside one timeline item."]),
+  define("timeline", "Timeline", "Show dated events, journey steps, or sequence as a vertical timeline.", [
     field("title", "string", "Slide title.", true),
-    field("orientation", "string", "horizontal or vertical."),
-    field("milestones", "milestones[]", "Timeline milestones.", true),
+    field("milestones", "milestones[]", "Timeline events.", true),
     field("insightTitle", "string", "Side panel title."),
     field("insightBody", "string", "Timeline interpretation, so-what, or caveat."),
     field("insightSide", "string", "left or right side panel placement."),
@@ -188,19 +198,21 @@ export function listPageTemplates(): { ok: true; templates: PageTemplateDefiniti
 }
 
 export function renderTemplateSlide(input: RenderTemplateSlideInput): RenderTemplateSlideResult {
-  const template = getPageTemplate(input.templateId)
+  const requestedTemplateId = normalizeTemplateId(input.templateId)
+  const template = getPageTemplate(requestedTemplateId)
   const slideIndex = positiveIndex(input.slideIndex)
   const content = input.content ?? {}
   const designName = input.designName || "lucent"
   const warnings = validateRequiredFields(template, content)
+  const outputTemplate = requestedTemplateId === "timeline-roadmap" ? { ...template, id: "timeline-roadmap", title: "Timeline / Roadmap" } : template
   const html = renderSlideShell({
-    template,
+    template: outputTemplate,
     slideIndex,
     designName,
     title: stringValue(content.title) || template.title,
-    body: renderBody(template.id, content),
+    body: renderBody(requestedTemplateId, content),
   })
-  return { ok: true, templateId: template.id, slideIndex, designName, html, warnings }
+  return { ok: true, templateId: outputTemplate.id, slideIndex, designName, html, warnings }
 }
 
 export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
@@ -272,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"],
@@ -284,9 +310,8 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
       insightIcon: "lightbulb",
       insightBody: "The template layer owns structure, while the design layer owns visual treatment. This keeps agent edits bounded without freezing the final look.",
     }),
-    fixture("timeline-roadmap", {
-      title: "timeline-roadmap",
-      orientation: "horizontal",
+    fixture("milestone", {
+      title: "milestone",
       milestones: [
         { date: "2022", label: "Signal", description: "Map the baseline." },
         { date: "2023", label: "Proof", description: "Validate the evidence threshold." },
@@ -295,9 +320,8 @@ export function builtInPreviewFixtures(): BuiltInPreviewFixture[] {
         { date: "2026", label: "Decision", description: "Commit to the next path." },
       ],
     }),
-    fixture("timeline-roadmap", {
-      title: "timeline-roadmap-vertical",
-      orientation: "vertical",
+    fixture("timeline", {
+      title: "timeline",
       insightTitle: "Reading the journey",
       insightBody: "The timeline should show sequence and decision rhythm, while the side panel explains why the milestones matter.",
       milestones: [
@@ -543,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; }
@@ -577,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; }
@@ -653,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; }
@@ -785,7 +819,7 @@ export function validatePageTemplateContracts(filePath: string): PageTemplateCon
     const body = section[2]
     const slideIndex = Number(/data-slide-index=["'](\d+)["']/i.exec(section[0])?.[1])
     issues.push(...validateVocabularyContract(templateId, body, Number.isInteger(slideIndex) ? slideIndex : undefined))
-    if (templateId === "timeline-roadmap") issues.push(...validateTimelineContract(body, Number.isInteger(slideIndex) ? slideIndex : undefined))
+    if (isTimelineTemplateId(templateId)) issues.push(...validateTimelineContract(templateId, body, Number.isInteger(slideIndex) ? slideIndex : undefined))
   }
   return { ok: !issues.some((issue) => issue.severity === "error"), issues }
 }
@@ -815,7 +849,7 @@ export function validateBoundedTemplateEdit(input: BoundedTemplateEditInput): Pa
   } else {
     const templateId = /data-template=["']([^"']+)["']/i.exec(target)?.[1] || "unknown"
     issues.push(...validateVocabularyContract(templateId, target, slideIndex))
-    if (templateId === "timeline-roadmap") issues.push(...validateTimelineContract(target, slideIndex))
+    if (isTimelineTemplateId(templateId)) issues.push(...validateTimelineContract(templateId, target, slideIndex))
   }
   return { ok: !issues.some((issue) => issue.severity === "error"), issues }
 }
@@ -824,23 +858,23 @@ function define(id: string, title: string, purpose: string, fields: PageTemplate
   return { id, title, purpose, status: "renderable", fields, contentRules, qaRules }
 }
 
-function validateTimelineContract(html: string, slideIndex?: number): PageTemplateContractIssue[] {
+function validateTimelineContract(templateId: string, html: string, slideIndex?: number): PageTemplateContractIssue[] {
   const issues: PageTemplateContractIssue[] = []
   const root = /class=["'][^"']*\btemplate-timeline\b[^"']*["']/i.test(html)
   if (!root) {
-    issues.push({ severity: "error", templateId: "timeline-roadmap", slideIndex, message: "Missing .template-timeline root." })
+    issues.push({ severity: "error", templateId, slideIndex, message: "Missing .template-timeline root." })
     return issues
   }
   const itemMatches = [...html.matchAll(/<article\b[^>]*class=["'][^"']*\btemplate-timeline-item\b[^"']*["'][^>]*>([\s\S]*?)<\/article>/gi)]
-  if (itemMatches.length < 3) issues.push({ severity: "warning", templateId: "timeline-roadmap", slideIndex, message: "Timeline should usually contain at least three milestones." })
+  if (itemMatches.length < 3) issues.push({ severity: "warning", templateId, slideIndex, message: "Timeline should usually contain at least three milestones." })
   for (let index = 0; index < itemMatches.length; index++) {
     const item = itemMatches[index][1]
-    if (!/class=["'][^"']*\btemplate-timeline-dot\b[^"']*["']/i.test(item)) issues.push({ severity: "error", templateId: "timeline-roadmap", slideIndex, message: `Milestone ${index + 1} is missing .template-timeline-dot inside its item.` })
-    if (!/class=["'][^"']*\btemplate-timeline-copy\b[^"']*["']/i.test(item)) issues.push({ severity: "error", templateId: "timeline-roadmap", slideIndex, message: `Milestone ${index + 1} is missing .template-timeline-copy inside its item.` })
+    if (!/class=["'][^"']*\btemplate-timeline-dot\b[^"']*["']/i.test(item)) issues.push({ severity: "error", templateId, slideIndex, message: `Milestone ${index + 1} is missing .template-timeline-dot inside its item.` })
+    if (!/class=["'][^"']*\btemplate-timeline-copy\b[^"']*["']/i.test(item)) issues.push({ severity: "error", templateId, slideIndex, message: `Milestone ${index + 1} is missing .template-timeline-copy inside its item.` })
   }
   const dotCount = (html.match(/\btemplate-timeline-dot\b/g) ?? []).length
   const copyCount = (html.match(/\btemplate-timeline-copy\b/g) ?? []).length
-  if (dotCount !== copyCount) issues.push({ severity: "error", templateId: "timeline-roadmap", slideIndex, message: `Timeline dot count (${dotCount}) must match copy count (${copyCount}).` })
+  if (dotCount !== copyCount) issues.push({ severity: "error", templateId, slideIndex, message: `Timeline dot count (${dotCount}) must match copy count (${copyCount}).` })
   return issues
 }
 
@@ -889,12 +923,26 @@ function field(name: string, type: PageTemplateField["type"], description: strin
 }
 
 function getPageTemplate(templateId: string): PageTemplateDefinition {
-  const id = String(templateId || "").trim()
+  const id = canonicalTemplateId(templateId)
   const template = templates.find((item) => item.id === id)
   if (!template) throw new Error(`Unknown page template: ${templateId}`)
   return template
 }
 
+function normalizeTemplateId(templateId: string): string {
+  return String(templateId || "").trim()
+}
+
+function canonicalTemplateId(templateId: string): string {
+  const id = normalizeTemplateId(templateId)
+  if (id === "timeline-roadmap") return "milestone"
+  return id
+}
+
+function isTimelineTemplateId(templateId: string): boolean {
+  return ["milestone", "timeline", "timeline-roadmap"].includes(templateId)
+}
+
 function renderSlideShell(input: { template: PageTemplateDefinition; slideIndex: number; designName: string; title: string; body: string; catalog?: any }): string {
   const hero = ["cover", "section-divider", "closing"].includes(input.template.id)
   const slideQa = hero ? "false" : "true"
@@ -945,7 +993,10 @@ 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>`
   if (templateId === "timeline-roadmap") return `${renderHeader(content, "Timeline / Roadmap")}<div class="template-body">${timeline(content)}</div>`
   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>`
@@ -991,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>`
@@ -1025,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 ""
@@ -1071,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 {
@@ -1131,8 +1190,10 @@ 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 === "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 === "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 }
   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 }

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

@@ -10,10 +10,13 @@ export * from "./cover"
 export * from "./executive-summary"
 export * from "./key-message-evidence"
 export * from "./metric-highlight"
+export * from "./milestone"
 export * from "./problem-context"
 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/milestone.ts

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

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

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

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

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

package/lib/page-templates/vocabulary.ts

@@ -55,9 +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("timeline-roadmap", ["template-timeline", "template-timeline-item", "template-timeline-dot", "template-timeline-copy", "template-insight-icon"], ["timeline"], ["timeline", "insight"], ["Each timeline item must keep dot and copy as sibling anchors inside one item.", "Horizontal timeline cards reuse .template-card; highlight uses the item modifier."]),
+  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 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."]),
@@ -90,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",
@@ -98,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",
@@ -132,9 +139,10 @@ export function listPageTemplateVocabulary(): PageTemplateVocabulary[] {
 }
 
 export function getPageTemplateVocabulary(templateId: string): PageTemplateVocabulary {
-  const vocabulary = PAGE_TEMPLATE_VOCABULARY.find((item) => item.templateId === templateId)
+  const id = templateId === "timeline-roadmap" ? "milestone" : templateId
+  const vocabulary = PAGE_TEMPLATE_VOCABULARY.find((item) => item.templateId === id)
   if (!vocabulary) throw new Error(`Unknown page template vocabulary: ${templateId}`)
-  return vocabulary
+  return templateId === "timeline-roadmap" ? { ...vocabulary, templateId } : vocabulary
 }
 
 function vocab(templateId: string, requiredClasses: string[], slotNames: string[], replaceableSlots: string[], contractNotes: string[]): PageTemplateVocabulary {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cyber-dash-tech/revela",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "Codex-first CLI/MCP workspace for trusted narrative artifacts from local sources, research, and evidence",
   "type": "module",
   "main": "./index.ts",

package/plugins/revela/.codex-plugin/plugin.json

@@ -1,6 +1,6 @@
 {
   "name": "revela",
-  "version": "0.19.0",
+  "version": "0.19.3",
   "description": "Use Revela in Codex to specify, research, plan, make, and export trusted narrative decision artifacts.",
   "author": {
     "name": "cyber-dash-tech",

package/plugins/revela/mcp/revela-server.ts

@@ -113,7 +113,7 @@ const tools = [
     inputSchema: objectSchema({
       workspaceRoot: stringProp("Optional workspace root."),
       designName: stringProp("Optional design name. Defaults to the active design."),
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
       slideIndex: requiredNumberProp("Positive 1-based slide index."),
       content: objectProp("Template content fields. The built-in template renderer owns the HTML skeleton."),
     }, ["templateId", "slideIndex", "content"]),
@@ -122,14 +122,14 @@ const tools = [
     name: "revela_page_template_foundation",
     description: "Read the built-in template foundation for custom design authoring: scaffold HTML, CSS hooks, slots, and contract notes.",
     inputSchema: objectSchema({
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
     }, ["templateId"]),
   },
   {
     name: "revela_page_template_vocabulary",
     description: "Read machine-readable classes, slots, editable regions, replaceable regions, and contract notes for one page template.",
     inputSchema: objectSchema({
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
     }, ["templateId"]),
   },
   {
@@ -138,7 +138,7 @@ const tools = [
     inputSchema: objectSchema({
       workspaceRoot: stringProp("Optional workspace root."),
       designName: stringProp("Optional design name. Defaults to the active design."),
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
       slideIndex: requiredNumberProp("Positive 1-based slide index."),
       seed: objectProp("Optional scaffold seed fields. This is not the final authoring interface."),
     }, ["templateId", "slideIndex"]),
@@ -150,7 +150,7 @@ const tools = [
       workspaceRoot: stringProp("Optional workspace root."),
       outputPath: requiredStringProp("Workspace-relative HTML deck path."),
       designName: stringProp("Optional design name. Defaults to the active design."),
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
       slideIndex: requiredNumberProp("Positive 1-based slide index."),
       seed: objectProp("Optional scaffold seed fields. LLM should bounded-edit the inserted slide after scaffold creation."),
     }, ["outputPath", "templateId", "slideIndex"]),
@@ -162,7 +162,7 @@ const tools = [
       workspaceRoot: stringProp("Optional workspace root."),
       outputPath: requiredStringProp("Workspace-relative HTML deck path."),
       designName: stringProp("Optional design name. Defaults to the active design."),
-      templateId: requiredStringProp("Built-in template id, such as timeline-roadmap."),
+      templateId: requiredStringProp("Built-in template id, such as milestone or timeline."),
       slideIndex: requiredNumberProp("Positive 1-based slide index."),
       content: objectProp("Template content fields. Prefer scaffold-first flow for new deck creation."),
     }, ["outputPath", "templateId", "slideIndex", "content"]),