@classic-homes/slides 0.2.1 → 0.3.0

package/dist/{chunk-7FROOJCY.js → chunk-GXGDPBAR.js}

@@ -1,56 +1,154 @@
-// src/inline.ts
-var ESCAPES = {
-  "&": "&",
-  "<": "&lt;",
-  ">": "&gt;",
-  '"': "&quot;",
-  "'": "&#39;"
+// src/brand.ts
+import { colors } from "@classic-homes/theme-tokens";
+import { getContrastRatio } from "@classic-homes/theme-tokens/contrast";
+import { z as z2 } from "zod";
+
+// src/schema/common.ts
+import { z } from "zod";
+var Text = z.string().describe(
+  "Inline text. Supports **bold**, *highlight* (brand accent), `code`, [label](url) and newlines."
+);
+var Track = z.enum(["value", "build", "neutral"]).describe("Accent colour for the slide: value = red, build = teal, neutral = navy.");
+var Background = z.enum(["paper", "navy", "slate", "red", "teal", "plum", "grey", "stone"]).describe(
+  'Slide ground. "paper" is the default light grid; the others are solid brand colours with white text.'
+);
+var Image = z.preprocess(
+  (v) => typeof v === "string" ? { src: v } : v,
+  z.object({
+    src: z.string().min(1).describe(
+      "Relative file path (resolved from the deck file), https URL, data: URI, or asset:<id> in hosted decks."
+    ),
+    alt: z.string().default("").describe("Describe the image for screen readers. Empty only for pure decoration."),
+    fit: z.enum(["cover", "contain"]).default("cover").describe("cover crops to fill; contain shows the whole image."),
+    size: z.enum(["fill", "natural"]).default("fill").describe(
+      "fill stretches to the layout slot; natural keeps small images (logos, badges) at their own size."
+    ),
+    focus: z.string().optional().describe('CSS object-position used when cropping, e.g. "top", "center 30%".')
+  })
+);
+var Item = z.preprocess(
+  (v) => typeof v === "string" ? { text: v } : v,
+  z.object({
+    text: Text,
+    sub: Text.optional().describe("Smaller secondary line under the item.")
+  })
+);
+var Marker = z.enum(["square", "check"]).default("square").describe("Bullet style.");
+var baseSlide = {
+  id: z.string().regex(/^[a-z0-9][a-z0-9-]*$/).optional().describe("Stable slug for this slide (used by editors and agents to address it)."),
+  track: Track.optional(),
+  background: Background.optional(),
+  notes: z.string().optional().describe(
+    'Speaker notes. Blank lines split paragraphs; "- " lines become bullets. Put detail here, not on the slide.'
+  ),
+  time: z.string().optional().describe('Timing cue shown in the notes panel, e.g. "4:00 \xB7 2 min".'),
+  step: z.number().int().positive().optional().describe(
+    "Journey step this slide belongs to. Draws the vertical STEP rail. Requires deck.journey."
+  ),
+  stepDone: z.boolean().optional().describe("Show the step rail with a completed check mark."),
+  showJourney: z.boolean().optional().describe(
+    'Show the compact "you are here" journey strip at the top (uses deck.journey and step).'
+  ),
+  hidden: z.boolean().optional().describe("Skip this slide when presenting and exporting (kept in the editor)."),
+  backgroundImage: Image.optional().describe(
+    "Full-bleed photo behind the slide. Best on title, section and statement slides."
+  ),
+  overlay: z.enum(["dark", "light", "brand"]).optional().describe("Tint over the background image so text stays readable (default dark).")
 };
-function escapeHtml(value) {
-  return value.replace(/[&<>"']/g, (c) => ESCAPES[c]);
-}
-function escapeAttr(value) {
-  return escapeHtml(value);
-}
-var SAFE_URL = /^(https?:|mailto:|tel:|#|\/)/i;
-function inline(text) {
-  if (!text) return "";
-  const codes = [];
-  let s = text.replace(/`([^`]+)`/g, (_, code) => {
-    codes.push(code);
-    return `\uE000${codes.length - 1}\uE000`;
-  });
-  const links = [];
-  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (match, label, url) => {
-    if (!SAFE_URL.test(url)) return label;
-    links.push(`<a href="${escapeAttr(url)}">${formatEmphasis(escapeHtml(label))}</a>`);
-    return `\uE001${links.length - 1}\uE001`;
-  });
-  s = formatEmphasis(escapeHtml(s));
-  s = s.replace(/\r?\n/g, "<br>");
-  s = s.replace(/\uE001(\d+)\uE001/g, (_, i) => links[Number(i)]);
-  s = s.replace(
-    /\uE000(\d+)\uE000/g,
-    (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`
-  );
-  return s;
-}
-function formatEmphasis(escaped) {
-  return escaped.replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(^|[^*])\*(?!\s)(.+?)(?<!\s)\*(?!\*)/g, '$1<em class="hl">$2</em>');
+
+// src/brand.ts
+var Hex = z2.string().regex(/^#[0-9a-fA-F]{6}$/, "Use a 6-digit hex colour like #a91c22.");
+var BrandPaletteSchema = z2.object({
+  primary: Hex.describe('Main accent: rails, bullets, highlights, "value" slides.'),
+  accent: Hex.describe('Second accent: "build" slides and secondary highlights.'),
+  dark: Hex.describe('Headings, navy grounds and "neutral" slides.')
+}).strict();
+var BrandProfileSchema = z2.object({
+  key: z2.string().regex(/^[a-z0-9][a-z0-9-]{1,40}$/, "Lowercase letters, numbers and dashes.").describe("Stable id used by decks (brand.profile)."),
+  name: z2.string().min(1).max(60).describe("Company or division name shown in the logo and tab title."),
+  tagline: z2.string().max(80).optional(),
+  logo: Image.optional().describe(
+    "Logo for light grounds. Omit to use the Classic Homes mark + name."
+  ),
+  logoOnDark: Image.optional().describe("Logo for dark/solid grounds (white version)."),
+  favicon: Image.optional().describe("Square icon for the browser tab."),
+  palette: BrandPaletteSchema.optional().describe(
+    "Replaces the Classic Homes colours for this brand."
+  ),
+  footer: z2.string().max(120).optional().describe("Default footer text on every slide.")
+}).strict();
+var DeckBrandSchema = z2.object({
+  profile: z2.string().optional().describe("Brand profile key; defaults to classic-homes."),
+  name: z2.string().min(1).max(60).optional().describe("Override the company name."),
+  tagline: z2.string().max(80).optional(),
+  logo: Image.optional().describe("Override the logo (light grounds)."),
+  logoOnDark: Image.optional().describe("Override the logo for dark grounds."),
+  favicon: Image.optional().describe("Override the browser-tab icon."),
+  footer: z2.string().max(120).optional().describe("Footer text on every slide.")
+}).strict();
+var CLASSIC_HOMES_PALETTE = {
+  primary: colors.red[700],
+  accent: colors.teal[700],
+  dark: colors.navy[700]
+};
+var CLASSIC_HOMES_BRAND = {
+  key: "classic-homes",
+  name: "Classic Homes",
+  palette: CLASSIC_HOMES_PALETTE
+};
+function resolveBrand(deckBrand, brands = []) {
+  const all = [CLASSIC_HOMES_BRAND, ...brands];
+  const key = deckBrand?.profile ?? CLASSIC_HOMES_BRAND.key;
+  const profile = [...all].reverse().find((b) => b.key === key) ?? CLASSIC_HOMES_BRAND;
+  const palette = profile.palette ?? CLASSIC_HOMES_PALETTE;
+  return {
+    key: profile.key,
+    name: deckBrand?.name ?? profile.name,
+    tagline: deckBrand?.tagline ?? profile.tagline,
+    footer: deckBrand?.footer ?? profile.footer,
+    logo: deckBrand?.logo ?? profile.logo,
+    logoOnDark: deckBrand?.logoOnDark ?? profile.logoOnDark,
+    favicon: deckBrand?.favicon ?? profile.favicon,
+    palette,
+    stock: palette.primary === CLASSIC_HOMES_PALETTE.primary && palette.accent === CLASSIC_HOMES_PALETTE.accent && palette.dark === CLASSIC_HOMES_PALETTE.dark
+  };
 }
-function prose(text) {
-  if (!text) return "";
-  return text.trim().split(/\n\s*\n/).map((para) => {
-    const lines = para.split(/\n/);
-    if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
-      return `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*]\s+/, ""))}</li>`).join("")}</ul>`;
+var PAPER = "#faf9f6";
+function checkPalette(palette) {
+  const issues = [];
+  for (const field of ["primary", "accent", "dark"]) {
+    const c = palette[field];
+    const onPaper = getContrastRatio(c, PAPER);
+    const withWhite = getContrastRatio("#ffffff", c);
+    if (onPaper < 4.5 || withWhite < 4.5) {
+      issues.push({
+        field,
+        message: `${field} ${c} is too light for text (${onPaper.toFixed(1)}:1 on paper, ${withWhite.toFixed(1)}:1 under white text; both need 4.5:1). Pick a darker shade.`
+      });
     }
-    return `<p>${inline(para)}</p>`;
-  }).join("");
+  }
+  return issues;
+}
+function validateBrandProfile(input) {
+  const parsed = BrandProfileSchema.safeParse(input);
+  if (!parsed.success) {
+    return {
+      ok: false,
+      issues: parsed.error.issues.map((i) => ({ path: i.path, message: i.message }))
+    };
+  }
+  const contrast = parsed.data.palette ? checkPalette(parsed.data.palette) : [];
+  if (contrast.length) {
+    return {
+      ok: false,
+      issues: contrast.map((c) => ({ path: ["palette", c.field], message: c.message }))
+    };
+  }
+  return { ok: true, profile: parsed.data };
 }
 
 // src/theme.ts
-import { colors } from "@classic-homes/theme-tokens";
+import { colors as colors2 } from "@classic-homes/theme-tokens";
 
 // src/generated/fonts.ts
 var FONTS = {
@@ -65,29 +163,33 @@ var FONTS = {
 
 // src/theme.ts
 var PALETTE = {
-  red: colors.red[700],
-  redLogo: colors.red[500],
-  teal: colors.teal[700],
+  red: colors2.red[700],
+  redLogo: colors2.red[500],
+  teal: colors2.teal[700],
   // brand teal 500 fails AA as small text on paper; 700 passes
-  tealFill: colors.teal[700],
-  navy: colors.navy[700],
-  plum: colors.plum[700],
-  sage: colors.sage[600],
-  stone: colors.stone[700],
-  grey: colors.gray[600],
-  ink: colors.navy[700],
-  inkSoft: colors.gray[600],
-  inkFaint: colors.gray[500]
+  tealFill: colors2.teal[700],
+  navy: colors2.navy[700],
+  plum: colors2.plum[700],
+  sage: colors2.sage[600],
+  stone: colors2.stone[700],
+  grey: colors2.gray[600],
+  ink: colors2.navy[700],
+  inkSoft: colors2.gray[600],
+  inkFaint: colors2.gray[500]
 };
-function tokensCss() {
+function tokensCss(palette) {
   const p = PALETTE;
+  const primary = palette?.primary ?? p.red;
+  const accent = palette?.accent ?? p.teal;
+  const dark = palette?.dark ?? p.navy;
+  const custom = !!palette && palette.primary !== p.red;
   return `:root{color-scheme:light;
 --paper:hsl(40 20% 97.5%);--paper-2:#fff;--paper-3:hsl(60 11% 96%);
---ink:${p.ink};--ink-soft:${p.inkSoft};--ink-faint:${p.inkFaint};
+--ink:${dark};--ink-soft:${p.inkSoft};--ink-faint:${p.inkFaint};
 --line:hsl(210 12% 80%);--line-strong:hsl(200 14% 55%);--line-faint:hsl(210 14% 90%);
---red:${p.red};--red-logo:${p.redLogo};--red-soft:${colors.red[50]};
---teal:${p.teal};--teal-fill:${p.tealFill};--teal-soft:${colors.teal[50]};
---navy:${p.navy};--slate:${colors.navy[600]};--plum:${p.plum};--sage:${p.sage};--stone:${p.stone};--grey:${p.grey};
+--red:${primary};--red-logo:${custom ? primary : p.redLogo};--red-soft:${custom ? `color-mix(in srgb,${primary} 8%,#fff)` : colors2.red[50]};
+--teal:${accent};--teal-fill:${accent};--teal-soft:${custom ? `color-mix(in srgb,${accent} 8%,#fff)` : colors2.teal[50]};
+--navy:${dark};--slate:${palette ? `color-mix(in srgb,${dark} 75%,#fff)` : colors2.navy[600]};--plum:${p.plum};--sage:${p.sage};--stone:${p.stone};--grey:${p.grey};
 --grid:hsl(196 30% 20% / .03);
 --shadow:0 1px 2px hsl(196 25% 20% / .04),0 6px 18px -10px hsl(196 25% 20% / .12);
 --font-display:"Spectral",Georgia,"Times New Roman",serif;
@@ -114,60 +216,453 @@ var LOGO_PATHS = [
   "M14.202 22.5c-.1-.3-.5-1.4-.6-2.3 0-.2.6-.5.7.1.1.6.4 1.6.6 1.9.3.5-.4.9-.7.3z",
   "M10.302 22.5c.1-.3.5-1.4.6-2.2 0-.3-.5-.6-.7 0-.1.6-.4 1.6-.6 1.9-.3.5.4.9.7.3z"
 ];
-var LOGO_SVG = `<span class="logo" role="img" aria-label="Classic Homes"><svg viewBox="0 0 25 25" aria-hidden="true"><g class="logo-mark">${LOGO_PATHS.map(
+var LOGO_MARK_SVG = `<svg viewBox="0 0 25 25" aria-hidden="true"><g class="logo-mark">${LOGO_PATHS.map(
   (d) => `<path d="${d}"/>`
-).join("")}</g></svg><span class="logo-word" aria-hidden="true">Classic Homes</span></span>`;
-
-// src/layouts/text.ts
-import { z as z2 } from "zod";
+).join("")}</g></svg>`;
+var LOGO_SVG = logoLockup("Classic Homes");
+function logoLockup(name, withMark = true) {
+  const safe = name.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
+  return `<span class="logo${withMark ? "" : " logo--word"}" role="img" aria-label="${safe}">${withMark ? LOGO_MARK_SVG : ""}<span class="logo-word" aria-hidden="true">${safe}</span></span>`;
+}
 
-// src/schema/common.ts
-import { z } from "zod";
-var Text = z.string().describe(
-  "Inline text. Supports **bold**, *highlight* (brand accent), `code`, [label](url) and newlines."
-);
-var Track = z.enum(["value", "build", "neutral"]).describe("Accent colour for the slide: value = red, build = teal, neutral = navy.");
-var Background = z.enum(["paper", "navy", "slate", "red", "teal", "plum", "grey", "stone"]).describe(
-  'Slide ground. "paper" is the default light grid; the others are solid brand colours with white text.'
-);
-var Image = z.preprocess(
-  (v) => typeof v === "string" ? { src: v } : v,
-  z.object({
-    src: z.string().min(1).describe(
-      "Relative file path (resolved from the deck file), https URL, data: URI, or asset:<id> in hosted decks."
-    ),
-    alt: z.string().default("").describe("Describe the image for screen readers. Empty only for pure decoration."),
-    fit: z.enum(["cover", "contain"]).default("cover").describe("cover crops to fill; contain shows the whole image."),
-    size: z.enum(["fill", "natural"]).default("fill").describe(
-      "fill stretches to the layout slot; natural keeps small images (logos, badges) at their own size."
-    ),
-    focus: z.string().optional().describe('CSS object-position used when cropping, e.g. "top", "center 30%".')
-  })
-);
-var Item = z.preprocess(
-  (v) => typeof v === "string" ? { text: v } : v,
-  z.object({
-    text: Text,
-    sub: Text.optional().describe("Smaller secondary line under the item.")
-  })
-);
-var Marker = z.enum(["square", "check"]).default("square").describe("Bullet style.");
-var baseSlide = {
-  id: z.string().regex(/^[a-z0-9][a-z0-9-]*$/).optional().describe("Stable slug for this slide (used by editors and agents to address it)."),
-  track: Track.optional(),
-  background: Background.optional(),
-  notes: z.string().optional().describe(
-    'Speaker notes. Blank lines split paragraphs; "- " lines become bullets. Put detail here, not on the slide.'
+// src/charts.ts
+import { z as z3 } from "zod";
+var CHART_TYPES = [
+  "column",
+  "bar",
+  "stacked-column",
+  "stacked-bar",
+  "line",
+  "area",
+  "pie",
+  "donut",
+  "funnel",
+  "gauge",
+  "scatter",
+  "radar"
+];
+var ChartSeries = z3.object({
+  name: z3.string().min(1).max(40),
+  values: z3.array(z3.number()).min(1).max(40)
+});
+var ChartSpec = z3.object({
+  type: z3.enum(CHART_TYPES).describe(
+    "column/bar compare categories; stacked-* show parts of a whole per category; line/area show change over time; pie/donut show shares (one series); funnel shows drop-off; gauge shows one value against a max; scatter pairs two series; radar compares profiles."
   ),
-  time: z.string().optional().describe('Timing cue shown in the notes panel, e.g. "4:00 \xB7 2 min".'),
-  step: z.number().int().positive().optional().describe(
-    "Journey step this slide belongs to. Draws the vertical STEP rail. Requires deck.journey."
+  labels: z3.array(z3.string().max(40)).min(1).max(40).describe("Category labels (x-axis, slices, stages). One per value."),
+  series: z3.array(ChartSeries).min(1).max(6).describe(
+    "Data series; each has one value per label. Pie, donut, funnel and gauge use the first series."
   ),
-  stepDone: z.boolean().optional().describe("Show the step rail with a completed check mark."),
-  showJourney: z.boolean().optional().describe(
-    'Show the compact "you are here" journey strip at the top (uses deck.journey and step).'
-  )
+  format: z3.enum(["number", "percent", "currency", "compact"]).default("number").describe("How values are shown. percent expects 0\u2013100."),
+  decimals: z3.number().int().min(0).max(3).default(0),
+  unit: z3.string().max(16).optional().describe('Suffix after values, e.g. "homes", "days".'),
+  legend: z3.enum(["auto", "show", "hide"]).default("auto"),
+  labelsOnData: z3.boolean().default(true).describe("Print values on bars, slices and points."),
+  highlight: z3.string().optional().describe("A label to emphasise; other categories are muted."),
+  max: z3.number().optional().describe("Axis or gauge maximum.")
+}).strict();
+function chartIssues(spec) {
+  const out = [];
+  spec.series.forEach((s) => {
+    if (s.values.length !== spec.labels.length) {
+      out.push(
+        `Series "${s.name}" has ${s.values.length} values but there are ${spec.labels.length} labels.`
+      );
+    }
+  });
+  if (spec.type === "scatter" && spec.series.length < 2)
+    out.push("Scatter needs two series (x and y).");
+  if (spec.type === "gauge" && spec.max === void 0) out.push("Gauge needs a max.");
+  return out;
+}
+function chartWarnings(spec) {
+  const out = [];
+  if (["pie", "donut"].includes(spec.type) && spec.labels.length > 7) {
+    out.push(
+      `${spec.labels.length} slices is hard to read; group small ones into "Other" or use a bar chart.`
+    );
+  }
+  if (["pie", "donut", "funnel", "gauge"].includes(spec.type) && spec.series.length > 1) {
+    out.push(`${spec.type} charts only show the first series.`);
+  }
+  if (spec.labels.length > 16 && ["column", "bar", "stacked-column", "stacked-bar"].includes(spec.type)) {
+    out.push("More than 16 categories crowds the axis; consider a line chart or fewer categories.");
+  }
+  return out;
+}
+function formatValue(v, spec) {
+  const opts = { minimumFractionDigits: spec.decimals, maximumFractionDigits: spec.decimals };
+  let s;
+  switch (spec.format) {
+    case "percent":
+      s = `${v.toLocaleString("en-US", opts)}%`;
+      break;
+    case "currency":
+      s = v.toLocaleString("en-US", { style: "currency", currency: "USD", ...opts });
+      break;
+    case "compact":
+      s = v.toLocaleString("en-US", {
+        notation: "compact",
+        maximumFractionDigits: Math.max(1, spec.decimals)
+      });
+      break;
+    default:
+      s = v.toLocaleString("en-US", opts);
+  }
+  return spec.unit ? `${s} ${spec.unit}` : s;
+}
+function chartColors(palette) {
+  const p = palette ?? { primary: PALETTE.red, accent: PALETTE.teal, dark: PALETTE.navy };
+  return [p.primary, p.accent, p.dark, PALETTE.sage, PALETTE.plum, PALETTE.stone];
+}
+var MUTED = "#c9ccc6";
+var TEXT = "#4f4f4f";
+var AXIS = "#d1d5db";
+function chartOption(spec, palette) {
+  const colors3 = chartColors(palette);
+  const fmt = (v) => formatValue(v, spec);
+  const muted = (label, color) => spec.highlight && spec.highlight !== label ? MUTED : color;
+  const showLegend = spec.legend === "show" || spec.legend === "auto" && spec.series.length > 1;
+  const textStyle = { fontFamily: "Figtree, system-ui, sans-serif", color: TEXT, fontSize: 15 };
+  const base = {
+    animation: false,
+    color: colors3,
+    textStyle,
+    legend: showLegend ? { top: 0, textStyle: { ...textStyle, fontSize: 14 }, itemGap: 18 } : { show: false }
+  };
+  const first = spec.series[0];
+  const labelStyle = {
+    show: spec.labelsOnData,
+    color: TEXT,
+    fontSize: 13,
+    formatter: (p) => fmt(p.value)
+  };
+  if (spec.type === "pie" || spec.type === "donut") {
+    return {
+      ...base,
+      legend: spec.legend === "show" ? base.legend : { show: false },
+      series: [
+        {
+          type: "pie",
+          radius: spec.type === "donut" ? ["46%", "72%"] : [0, "72%"],
+          center: ["50%", "54%"],
+          data: spec.labels.map((name, i) => ({
+            name,
+            value: first.values[i],
+            itemStyle: { color: muted(name, colors3[i % colors3.length]) }
+          })),
+          label: {
+            show: true,
+            color: TEXT,
+            fontSize: 14,
+            formatter: (p) => spec.labelsOnData ? `${p.name}
+${fmt(p.value)}` : p.name
+          },
+          itemStyle: { borderColor: "#fff", borderWidth: 2 }
+        }
+      ]
+    };
+  }
+  if (spec.type === "funnel") {
+    return {
+      ...base,
+      legend: { show: false },
+      series: [
+        {
+          type: "funnel",
+          left: "12%",
+          width: "76%",
+          top: 16,
+          bottom: 16,
+          sort: "descending",
+          gap: 3,
+          data: spec.labels.map((name, i) => ({
+            name,
+            value: first.values[i],
+            itemStyle: { color: muted(name, colors3[i % colors3.length]) }
+          })),
+          label: {
+            show: true,
+            position: "inside",
+            color: "#fff",
+            fontSize: 14,
+            formatter: (p) => spec.labelsOnData ? `${p.name}  ${fmt(p.value)}` : p.name
+          }
+        }
+      ]
+    };
+  }
+  if (spec.type === "gauge") {
+    return {
+      ...base,
+      series: [
+        {
+          type: "gauge",
+          min: 0,
+          max: spec.max ?? 100,
+          progress: { show: true, width: 22, itemStyle: { color: colors3[0] } },
+          axisLine: { lineStyle: { width: 22, color: [[1, "#e5e7eb"]] } },
+          axisTick: { show: false },
+          splitLine: { show: false },
+          axisLabel: { show: false },
+          pointer: { show: false },
+          anchor: { show: false },
+          title: { offsetCenter: [0, "30%"], fontSize: 16, color: TEXT },
+          detail: {
+            valueAnimation: false,
+            offsetCenter: [0, "-5%"],
+            fontSize: 44,
+            fontWeight: 600,
+            color: colors3[2],
+            formatter: (v) => fmt(v)
+          },
+          data: [{ value: first.values[0], name: spec.labels[0] }]
+        }
+      ]
+    };
+  }
+  if (spec.type === "radar") {
+    const max = spec.max ?? Math.max(...spec.series.flatMap((s) => s.values)) * 1.1;
+    return {
+      ...base,
+      radar: {
+        indicator: spec.labels.map((name) => ({ name, max })),
+        axisName: { color: TEXT, fontSize: 14 },
+        splitLine: { lineStyle: { color: AXIS } },
+        splitArea: { show: false },
+        axisLine: { lineStyle: { color: AXIS } }
+      },
+      series: [
+        {
+          type: "radar",
+          data: spec.series.map((s, i) => ({
+            name: s.name,
+            value: s.values,
+            areaStyle: { opacity: 0.12 },
+            lineStyle: { width: 2.5, color: colors3[i % colors3.length] },
+            itemStyle: { color: colors3[i % colors3.length] }
+          }))
+        }
+      ]
+    };
+  }
+  if (spec.type === "scatter") {
+    const [xs, ys] = spec.series;
+    return {
+      ...base,
+      legend: { show: false },
+      grid: { left: 70, right: 30, top: 30, bottom: 60, containLabel: true },
+      xAxis: {
+        type: "value",
+        name: xs.name,
+        nameLocation: "middle",
+        nameGap: 34,
+        axisLine: { lineStyle: { color: AXIS } },
+        splitLine: { lineStyle: { color: "#eef0ec" } }
+      },
+      yAxis: {
+        type: "value",
+        name: ys.name,
+        nameLocation: "middle",
+        nameGap: 50,
+        axisLine: { lineStyle: { color: AXIS } },
+        splitLine: { lineStyle: { color: "#eef0ec" } }
+      },
+      series: [
+        {
+          type: "scatter",
+          symbolSize: 16,
+          data: spec.labels.map((name, i) => ({
+            name,
+            value: [xs.values[i], ys.values[i]],
+            itemStyle: { color: muted(name, colors3[0]) }
+          })),
+          label: {
+            show: spec.labelsOnData,
+            formatter: (p) => p.name,
+            position: "top",
+            color: TEXT,
+            fontSize: 12
+          }
+        }
+      ]
+    };
+  }
+  const horizontal = spec.type === "bar" || spec.type === "stacked-bar";
+  const stacked = spec.type.startsWith("stacked");
+  const isLine = spec.type === "line" || spec.type === "area";
+  const category = {
+    type: "category",
+    data: spec.labels,
+    axisLine: { lineStyle: { color: AXIS } },
+    axisTick: { show: false },
+    axisLabel: { color: TEXT, fontSize: 14, interval: 0, hideOverlap: true },
+    boundaryGap: !isLine
+  };
+  const value = {
+    type: "value",
+    max: spec.max,
+    axisLine: { show: false },
+    splitLine: { lineStyle: { color: "#eef0ec" } },
+    axisLabel: {
+      color: "#7a7a7a",
+      fontSize: 13,
+      formatter: (v) => formatValue(v, { ...spec, unit: void 0 })
+    }
+  };
+  return {
+    ...base,
+    grid: { left: 16, right: 24, top: showLegend ? 48 : 20, bottom: 12, containLabel: true },
+    xAxis: horizontal ? value : category,
+    yAxis: horizontal ? { ...category, inverse: true } : value,
+    series: spec.series.map((s, si) => {
+      const color = colors3[si % colors3.length];
+      return {
+        type: isLine ? "line" : "bar",
+        name: s.name,
+        stack: stacked ? "total" : void 0,
+        smooth: false,
+        symbolSize: 8,
+        lineStyle: isLine ? { width: 3 } : void 0,
+        areaStyle: spec.type === "area" ? { opacity: 0.18 } : void 0,
+        barMaxWidth: 56,
+        itemStyle: stacked || isLine ? { color } : void 0,
+        data: s.values.map((v, i) => ({
+          value: v,
+          itemStyle: stacked || isLine ? void 0 : {
+            color: muted(spec.labels[i], color),
+            borderRadius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0]
+          }
+        })),
+        label: {
+          ...labelStyle,
+          show: spec.labelsOnData && (!stacked || spec.series.length <= 3),
+          position: stacked ? "inside" : horizontal ? "right" : "top",
+          color: stacked ? "#fff" : TEXT
+        }
+      };
+    })
+  };
+}
+var renderer;
+function loadChartRenderer() {
+  renderer ??= import("./echarts-render-2QVSBZ6V.js").then((m) => m.createRenderer());
+  return renderer;
+}
+async function renderChartSvg(spec, opts = {}) {
+  const width = opts.width ?? 960;
+  const height = opts.height ?? 520;
+  const r = await loadChartRenderer();
+  const svg = r.render(chartOption(spec, opts.palette), width, height);
+  const label = `${opts.title ? `${opts.title}: ` : ""}${describeChart(spec)}`.replace(
+    /[&<>"]/g,
+    (c) => `&#${c.charCodeAt(0)};`
+  );
+  return svg.replace(/^<svg([^>]*?) width="\d+" height="\d+"/, "<svg$1").replace(/^<svg/, `<svg role="img" aria-label="${label}" preserveAspectRatio="xMidYMid meet"`);
+}
+function describeChart(spec) {
+  const parts = spec.series.slice(0, ["pie", "donut", "funnel", "gauge"].includes(spec.type) ? 1 : 6).map(
+    (s) => `${s.name}: ${spec.labels.map((l, i) => `${l} ${formatValue(s.values[i] ?? 0, spec)}`).join(", ")}`
+  );
+  return `${spec.type.replace("-", " ")} chart. ${parts.join(". ")}.`;
+}
+
+// src/inline.ts
+var ESCAPES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
 };
+function escapeHtml(value) {
+  return value.replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+function escapeAttr(value) {
+  return escapeHtml(value);
+}
+var SAFE_URL = /^(https?:|mailto:|tel:|#|\/)/i;
+function isSafeLinkUrl(url) {
+  return SAFE_URL.test(url);
+}
+function inline(text) {
+  if (!text) return "";
+  const codes = [];
+  let s = text.replace(/`([^`]+)`/g, (_, code) => {
+    codes.push(code);
+    return `\uE000${codes.length - 1}\uE000`;
+  });
+  const links = [];
+  s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (match, label, url) => {
+    if (!isSafeLinkUrl(url)) return label;
+    links.push(`<a href="${escapeAttr(url)}">${formatEmphasis(escapeHtml(label))}</a>`);
+    return `\uE001${links.length - 1}\uE001`;
+  });
+  s = formatEmphasis(escapeHtml(s));
+  s = s.replace(/\r?\n/g, "<br>");
+  s = s.replace(/\uE001(\d+)\uE001/g, (_, i) => links[Number(i)]);
+  s = s.replace(
+    /\uE000(\d+)\uE000/g,
+    (_, i) => `<code>${escapeHtml(codes[Number(i)])}</code>`
+  );
+  return s;
+}
+function formatEmphasis(escaped) {
+  return escaped.replace(/\*\*(.+?)\*\*/g, "<b>$1</b>").replace(/(^|[^*])\*(?!\s)(.+?)(?<!\s)\*(?!\*)/g, '$1<em class="hl">$2</em>');
+}
+function prose(text) {
+  if (!text) return "";
+  return text.trim().split(/\n\s*\n/).map((para) => {
+    const lines = para.split(/\n/);
+    if (lines.every((l) => /^\s*[-*]\s+/.test(l))) {
+      return `<ul>${lines.map((l) => `<li>${inline(l.replace(/^\s*[-*]\s+/, ""))}</li>`).join("")}</ul>`;
+    }
+    return `<p>${inline(para)}</p>`;
+  }).join("");
+}
+
+// src/video.ts
+var YT = /^(?:https:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([\w-]{11})/;
+var VIMEO = /^(?:https:\/\/)?(?:www\.|player\.)?vimeo\.com\/(?:video\/)?(\d{6,12})/;
+function parseVideoUrl(url) {
+  const yt = YT.exec(url);
+  if (yt) {
+    return {
+      provider: "youtube",
+      id: yt[1],
+      watchUrl: `https://www.youtube.com/watch?v=${yt[1]}`,
+      poster: `https://i.ytimg.com/vi/${yt[1]}/hqdefault.jpg`
+    };
+  }
+  const vm = VIMEO.exec(url);
+  if (vm) return { provider: "vimeo", id: vm[1], watchUrl: `https://vimeo.com/${vm[1]}` };
+  return void 0;
+}
+function videoEmbedUrl(ref, o) {
+  if (ref.provider === "youtube") {
+    const q2 = new URLSearchParams({
+      rel: "0",
+      modestbranding: "1",
+      playsinline: "1",
+      enablejsapi: "1"
+    });
+    if (o.start) q2.set("start", String(o.start));
+    if (o.end) q2.set("end", String(o.end));
+    if (o.muted) q2.set("mute", "1");
+    if (o.captions) q2.set("cc_load_policy", "1");
+    if (o.autoplay) q2.set("autoplay", "1");
+    return `https://www.youtube-nocookie.com/embed/${ref.id}?${q2}`;
+  }
+  const q = new URLSearchParams({ dnt: "1", title: "0", byline: "0", portrait: "0" });
+  if (o.muted) q.set("muted", "1");
+  if (o.autoplay) q.set("autoplay", "1");
+  if (o.captions) q.set("texttrack", "en");
+  const hash = o.start ? `#t=${o.start}s` : "";
+  return `https://player.vimeo.com/video/${ref.id}?${q}${hash}`;
+}
+
+// src/layouts/text.ts
+import { z as z4 } from "zod";
 
 // src/layouts/parts.ts
 function eyebrow(text, sub) {
@@ -188,7 +683,7 @@ function items(list, marker = "square") {
   if (!list?.length) return "";
   const cls = marker === "check" ? "clean check" : "clean";
   return `<ul class="${cls}">${list.map(
-    (i) => `<li>${inline(i.text)}${i.sub ? `<span class="sub">${inline(i.sub)}</span>` : ""}</li>`
+    (i) => `<li class="b-item">${inline(i.text)}${i.sub ? `<span class="sub">${inline(i.sub)}</span>` : ""}</li>`
   ).join("")}</ul>`;
 }
 function img(image2, ctx, cls = "") {
@@ -249,9 +744,9 @@ var title = defineLayout({
     title: Text,
     lead: Text.optional(),
     image: Image.optional().describe("Hero photo under the title."),
-    meta: z2.array(Text).max(4).optional().describe("Short facts on one line, e.g. URL, date, presenter."),
-    logo: z2.boolean().default(true).describe("Show the Classic Homes logo."),
-    align: z2.enum(["left", "center"]).default("left")
+    meta: z4.array(Text).max(4).optional().describe("Short facts on one line, e.g. URL, date, presenter."),
+    logo: z4.boolean().default(true).describe("Show the Classic Homes logo."),
+    align: z4.enum(["left", "center"]).default("left")
   },
   defaults: { track: "neutral" },
   example: {
@@ -267,7 +762,7 @@ var title = defineLayout({
   ],
   render: (s, ctx) => ({
     classes: ["title-wrap", `align-${s.align}`],
-    html: `${s.logo ? `<div class="brand-logo">${LOGO_SVG}</div>` : ""}${s.kicker ? `<p class="kicker">${inline(s.kicker)}</p>` : ""}${heading(s.title, 1)}${lead(s.lead)}${s.image ? `<div class="hero">${img(s.image, ctx)}</div>` : ""}${s.meta?.length ? `<div class="title-meta">${s.meta.map((m) => `<span>${inline(m)}</span>`).join("")}</div>` : ""}`
+    html: `${s.logo ? `<div class="brand-logo">${ctx.logo()}</div>` : ""}${s.kicker ? `<p class="kicker">${inline(s.kicker)}</p>` : ""}${heading(s.title, 1)}${lead(s.lead)}${s.image ? `<div class="hero">${img(s.image, ctx)}</div>` : ""}${s.meta?.length ? `<div class="title-meta">${s.meta.map((m) => `<span>${inline(m)}</span>`).join("")}</div>` : ""}`
   })
 });
 var section = defineLayout({
@@ -278,10 +773,10 @@ var section = defineLayout({
     kicker: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    images: z2.array(Image).max(12).optional().describe(
+    images: z4.array(Image).max(12).optional().describe(
       "Optional photos under the title (e.g. the team for this step). Rows wrap after 6."
     ),
-    imageAspect: z2.enum(["portrait", "landscape", "native"]).default("portrait").describe(
+    imageAspect: z4.enum(["portrait", "landscape", "native"]).default("portrait").describe(
       "portrait suits headshots; landscape/native suit a single scene photo (shown wide)."
     )
   },
@@ -313,8 +808,8 @@ var statement = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    style: z2.enum(["headline", "display"]).default("headline").describe("display = large italic serif."),
-    logo: z2.boolean().default(false)
+    style: z4.enum(["headline", "display"]).default("headline").describe("display = large italic serif."),
+    logo: z4.boolean().default(false)
   },
   example: {
     layout: "statement",
@@ -326,8 +821,8 @@ var statement = defineLayout({
     ...maxLen(s.title, 110, ["title"], "Headline"),
     ...maxLen(s.lead, 240, ["lead"], "Lead")
   ],
-  render: (s) => ({
-    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title, s.style === "display" ? 1 : 2)}${lead(s.lead)}${s.logo ? `<div class="brand-logo end">${LOGO_SVG}</div>` : ""}`
+  render: (s, ctx) => ({
+    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title, s.style === "display" ? 1 : 2)}${lead(s.lead)}${s.logo ? `<div class="brand-logo end">${ctx.logo()}</div>` : ""}`
   })
 });
 var bullets = defineLayout({
@@ -339,10 +834,11 @@ var bullets = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    items: z2.array(Item).min(1),
+    items: z4.array(Item).min(1),
     marker: Marker,
-    columns: z2.union([z2.literal(1), z2.literal(2)]).default(1),
-    footnote: Text.optional().describe("Closing line under the list.")
+    columns: z4.union([z4.literal(1), z4.literal(2)]).default(1),
+    footnote: Text.optional().describe("Closing line under the list."),
+    build: z4.boolean().default(false).describe("Reveal one bullet per click while presenting.")
   },
   example: {
     layout: "bullets",
@@ -368,7 +864,7 @@ var bullets = defineLayout({
     const half = Math.ceil(s.items.length / 2);
     const list = s.columns === 2 ? `<div class="cols even">${items(s.items.slice(0, half), s.marker)}${items(s.items.slice(half), s.marker)}</div>` : items(s.items, s.marker);
     return {
-      html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}${list}${footnote(s.footnote)}`
+      html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}${s.build ? `<div data-build>${list}</div>` : list}${footnote(s.footnote)}`
     };
   }
 });
@@ -381,17 +877,18 @@ var cards = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    columns: z2.number().int().min(2).max(4).default(3),
-    style: z2.enum(["card", "banner"]).default("card").describe("banner = coloured header band per card."),
-    cards: z2.array(
-      z2.object({
+    columns: z4.number().int().min(2).max(4).default(3),
+    style: z4.enum(["card", "banner"]).default("card").describe("banner = coloured header band per card."),
+    cards: z4.array(
+      z4.object({
         tag: Text.optional(),
         title: Text,
         body: Text.optional(),
         image: Image.optional()
       })
     ).min(1),
-    footnote: Text.optional().describe("Closing line under the cards.")
+    footnote: Text.optional().describe("Closing line under the cards."),
+    build: z4.boolean().default(false).describe("Reveal one card per click while presenting.")
   },
   example: {
     layout: "cards",
@@ -416,8 +913,8 @@ var cards = defineLayout({
     ])
   ],
   render: (s, ctx) => ({
-    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="cardgrid cards--${s.style}" style="--cols:${s.columns}">${s.cards.map(
-      (c) => `<div class="card">${c.image ? img(c.image, ctx, "card-img") : ""}${s.style === "banner" ? `<div class="card-band">${inline(c.tag ?? c.title)}</div><div class="card-b">${c.tag ? `<h3>${inline(c.title)}</h3>` : ""}${c.body ? `<p>${inline(c.body)}</p>` : ""}</div>` : `<div class="card-b">${c.tag ? `<span class="tag">${inline(c.tag)}</span>` : ""}<h3>${inline(
+    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="cardgrid cards--${s.style}"${s.build ? " data-build" : ""} style="--cols:${s.columns}">${s.cards.map(
+      (c) => `<div class="card b-item">${c.image ? img(c.image, ctx, "card-img") : ""}${s.style === "banner" ? `<div class="card-band">${inline(c.tag ?? c.title)}</div><div class="card-b">${c.tag ? `<h3>${inline(c.title)}</h3>` : ""}${c.body ? `<p>${inline(c.body)}</p>` : ""}</div>` : `<div class="card-b">${c.tag ? `<span class="tag">${inline(c.tag)}</span>` : ""}<h3>${inline(
         c.title
       )}</h3>${c.body ? `<p>${inline(c.body)}</p>` : ""}</div>`}</div>`
     ).join("")}</div>${footnote(s.footnote)}`
@@ -432,8 +929,15 @@ var stats = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    stats: z2.array(
-      z2.object({ value: z2.string().max(12).describe('Short: "60", "2 wks", "3\xD7".'), label: Text })
+    stats: z4.array(
+      z4.object({
+        value: z4.string().max(12).describe('Short: "60", "2 wks", "3\xD7".'),
+        label: Text,
+        trend: z4.enum(["up", "down", "flat"]).optional().describe("Arrow next to the value."),
+        delta: z4.string().max(16).optional().describe('Change text beside the arrow, e.g. "+12%".'),
+        good: z4.enum(["up", "down"]).default("up").describe("Which direction is good news (colours the arrow)."),
+        spark: z4.array(z4.number()).min(2).max(40).optional().describe("Recent values drawn as a tiny line under the number.")
+      })
     ).min(1)
   },
   example: {
@@ -443,7 +947,14 @@ var stats = defineLayout({
     stats: [
       { value: "60", label: "days from contract to final selections" },
       { value: "14", label: "construction stages" },
-      { value: "2", label: "site walkthroughs with your superintendent" }
+      { value: "2", label: "site walkthroughs with your superintendent" },
+      {
+        value: "4.8",
+        label: "average homeowner rating",
+        trend: "up",
+        delta: "+0.3",
+        spark: [4.2, 4.4, 4.5, 4.8]
+      }
     ]
   },
   lint: (s) => [
@@ -452,7 +963,7 @@ var stats = defineLayout({
   ],
   render: (s) => ({
     html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="stat-row">${s.stats.map(
-      (st) => `<div class="stat"><b>${inline(st.value)}</b><span>${inline(st.label)}</span></div>`
+      (st) => `<div class="stat"><b>${inline(st.value)}</b>${st.trend ? `<em class="trend trend--${st.trend === "flat" ? "flat" : st.trend === st.good ? "good" : "bad"}">${st.trend === "up" ? "\u25B2" : st.trend === "down" ? "\u25BC" : "\u25B6"}${st.delta ? ` ${inline(st.delta)}` : ""}</em>` : ""}${st.spark ? sparkline(st.spark) : ""}<span>${inline(st.label)}</span></div>`
     ).join("")}</div>`
   })
 });
@@ -465,12 +976,12 @@ var comparison = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    columns: z2.array(
-      z2.object({
+    columns: z4.array(
+      z4.object({
         heading: Text,
         tone: Track.default("value"),
         text: Text.optional(),
-        items: z2.array(Item).optional(),
+        items: z4.array(Item).optional(),
         marker: Marker
       })
     ).min(2).max(3)
@@ -492,53 +1003,549 @@ var comparison = defineLayout({
       }
     ]
   },
-  lint: (s) => [
-    ...maxLen(s.title, 80, ["title"], "Title"),
-    ...s.columns.flatMap(
-      (c, n) => maxCount(c.items, 6, ["columns", n, "items"], "items in one column")
-    )
-  ],
+  lint: (s) => [
+    ...maxLen(s.title, 80, ["title"], "Title"),
+    ...s.columns.flatMap(
+      (c, n) => maxCount(c.items, 6, ["columns", n, "items"], "items in one column")
+    )
+  ],
+  render: (s) => ({
+    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="split2" style="--cols:${s.columns.length}">${s.columns.map(
+      (c) => `<div class="col tone-${c.tone}"><h3>${inline(c.heading)}</h3>${c.text ? `<p>${inline(c.text)}</p>` : ""}${items(
+        c.items,
+        c.marker
+      )}</div>`
+    ).join("")}</div>`
+  })
+});
+var quote = defineLayout({
+  name: "quote",
+  description: "A pull quote with attribution, optional portrait.",
+  whenToUse: "A homeowner testimonial, a value statement, a line from leadership.",
+  shape: {
+    eyebrow: Text.optional(),
+    quote: Text,
+    cite: Text.optional(),
+    image: Image.optional().describe("Portrait of the person quoted.")
+  },
+  example: {
+    layout: "quote",
+    quote: "They walked us through every step. We always knew what came next.",
+    cite: "The Martinez family \xB7 Wolf Ranch"
+  },
+  lint: (s) => [
+    ...maxLen(s.quote, 240, ["quote"], "Quote"),
+    ...missingAlt(s.image ? [s.image] : [], ["image"])
+  ],
+  render: (s, ctx) => ({
+    html: `${eyebrow(s.eyebrow)}<div class="${s.image ? "cols quote-cols" : ""}"><blockquote class="quote">${inline(
+      s.quote
+    )}${s.cite ? `<cite>${inline(s.cite)}</cite>` : ""}</blockquote>${s.image ? `<div class="portrait">${img(s.image, ctx)}</div>` : ""}</div>`
+  })
+});
+function sparkline(values) {
+  const w = 120;
+  const h = 32;
+  const min = Math.min(...values);
+  const span = Math.max(...values) - min || 1;
+  const pts = values.map(
+    (v, i) => `${(i / (values.length - 1) * w).toFixed(1)},${(h - 3 - (v - min) / span * (h - 6)).toFixed(1)}`
+  ).join(" ");
+  const last = pts.split(" ").pop().split(",");
+  return `<svg class="spark" viewBox="0 0 ${w} ${h}" aria-hidden="true"><polyline points="${pts}"/><circle cx="${last[0]}" cy="${last[1]}" r="3"/></svg>`;
+}
+
+// src/layouts/data.ts
+import { z as z5 } from "zod";
+var CHART_SIZE = { wide: { width: 1040, height: 500 }, side: { width: 720, height: 500 } };
+var chart = defineLayout({
+  name: "chart",
+  description: "A branded chart (column, bar, stacked, line, area, pie, donut, funnel, gauge, scatter, radar) with an optional takeaway column.",
+  whenToUse: "Numbers that tell a story: sales by quarter, timelines, shares, survey scores. State the takeaway in the title.",
+  shape: {
+    eyebrow: Text.optional(),
+    eyebrowSub: Text.optional(),
+    title: Text.describe('Say what the chart shows, e.g. "Closings doubled since spring".'),
+    lead: Text.optional(),
+    chart: ChartSpec,
+    insights: z5.array(Item).max(4).optional().describe("Up to 4 takeaways shown beside the chart."),
+    source: Text.optional().describe("Where the numbers come from.")
+  },
+  example: {
+    layout: "chart",
+    eyebrow: "Sales",
+    title: "Closings *doubled* since spring",
+    chart: {
+      type: "column",
+      labels: ["Q1", "Q2", "Q3", "Q4"],
+      series: [{ name: "Closings", values: [42, 61, 88, 94] }],
+      unit: "homes",
+      highlight: "Q4"
+    },
+    insights: ["Q4 best quarter on record", "**+124%** vs Q1"],
+    source: "Sales ops, closed contracts"
+  },
+  prepare: (s) => ({
+    charts: [
+      {
+        key: JSON.stringify(s.chart),
+        spec: s.chart,
+        ...s.insights?.length ? CHART_SIZE.side : CHART_SIZE.wide
+      }
+    ]
+  }),
+  lint: (s) => [
+    ...maxLen(s.title, 80, ["title"], "Title"),
+    ...chartIssues(s.chart).map(
+      (message) => ({ level: "error", path: ["chart"], message })
+    ),
+    ...chartWarnings(s.chart).map(
+      (message) => ({ level: "warning", path: ["chart"], message })
+    )
+  ],
+  render: (s, ctx) => {
+    const svg = `<figure class="chart-fig">${ctx.chart(JSON.stringify(s.chart))}${s.source ? `<figcaption class="source">Source: ${inline(s.source)}</figcaption>` : ""}</figure>`;
+    return {
+      html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}${s.insights?.length ? `<div class="chart-split">${svg}<div class="insights">${items(s.insights)}</div></div>` : svg}`
+    };
+  }
+});
+var Cell = z5.union([z5.string().max(80), z5.number()]);
+var table = defineLayout({
+  name: "table",
+  description: "A clean data table: header row, aligned numbers, optional highlighted row/column and totals row.",
+  whenToUse: "Exact figures people will compare: pricing, schedules, specs, option matrices.",
+  shape: {
+    eyebrow: Text.optional(),
+    eyebrowSub: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    columns: z5.array(
+      z5.object({
+        label: Text,
+        align: z5.enum(["left", "center", "right"]).optional().describe("Defaults to right for numbers."),
+        format: z5.enum(["text", "number", "percent", "currency"]).default("text")
+      })
+    ).min(1).max(8),
+    rows: z5.array(z5.array(Cell)).min(1).max(14).describe("One array per row, one cell per column. Text cells support inline formatting."),
+    totals: z5.array(Cell).optional().describe("Optional bold totals row."),
+    highlightRow: z5.number().int().positive().optional().describe("1-based row to emphasise."),
+    highlightColumn: z5.number().int().positive().optional().describe("1-based column to emphasise."),
+    footnote: Text.optional()
+  },
+  example: {
+    layout: "table",
+    eyebrow: "Options",
+    title: "Smart home packages",
+    columns: [
+      { label: "Package" },
+      { label: "Devices", format: "number" },
+      { label: "Price", format: "currency" }
+    ],
+    rows: [
+      ["Essentials", 6, 1450],
+      ["Connected", 11, 2900],
+      ["Premier", 18, 4800]
+    ],
+    highlightRow: 2,
+    footnote: "Prices per home; installed before closing."
+  },
+  lint: (s) => {
+    const out = [...maxLen(s.title, 80, ["title"], "Title")];
+    s.rows.forEach((r, i) => {
+      if (r.length !== s.columns.length) {
+        out.push({
+          level: "error",
+          path: ["rows", i],
+          message: `Row has ${r.length} cells but there are ${s.columns.length} columns.`
+        });
+      }
+    });
+    if (s.totals && s.totals.length !== s.columns.length) {
+      out.push({
+        level: "error",
+        path: ["totals"],
+        message: `Totals has ${s.totals.length} cells but there are ${s.columns.length} columns.`
+      });
+    }
+    if (s.rows.length > 10) {
+      out.push({
+        level: "warning",
+        path: ["rows"],
+        message: `${s.rows.length} rows is dense for a slide; split or summarise.`
+      });
+    }
+    return out;
+  },
+  render: (s) => {
+    const cell = (v, ci) => {
+      const col = s.columns[ci];
+      if (typeof v === "number" && col.format !== "text") {
+        return formatValue(v, {
+          format: col.format === "currency" ? "currency" : col.format === "percent" ? "percent" : "number",
+          decimals: 0
+        });
+      }
+      return typeof v === "number" ? escapeHtml(String(v)) : inline(v);
+    };
+    const align = (ci) => s.columns[ci].align ?? (s.columns[ci].format === "text" ? "left" : "right");
+    const td = (tag, v, ci) => `<${tag} class="al-${align(ci)}${s.highlightColumn === ci + 1 ? " hl-col" : ""}">${cell(v, ci)}</${tag}>`;
+    return {
+      html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="table-wrap"><table class="data-table"><thead><tr>${s.columns.map(
+        (c, ci) => `<th scope="col" class="al-${align(ci)}${s.highlightColumn === ci + 1 ? " hl-col" : ""}">${inline(c.label)}</th>`
+      ).join("")}</tr></thead><tbody>${s.rows.map(
+        (r, ri) => `<tr${s.highlightRow === ri + 1 ? ' class="hl-row"' : ""}>${r.map((v, ci) => td(ci === 0 ? "th" : "td", v, ci)).join("")}</tr>`
+      ).join("")}</tbody>${s.totals ? `<tfoot><tr>${s.totals.map((v, ci) => td(ci === 0 ? "th" : "td", v, ci)).join("")}</tr></tfoot>` : ""}</table></div>${footnote(s.footnote)}`
+    };
+  }
+});
+
+// src/layouts/diagrams.ts
+import { z as z6 } from "zod";
+var Build = z6.boolean().default(false).describe("Reveal one item per click while presenting.");
+var Step = z6.object({
+  title: Text,
+  text: Text.optional()
+});
+var buildAttr = (on) => on ? " data-build" : "";
+var flow = defineLayout({
+  name: "flow",
+  description: "A process: 2\u20137 steps joined by arrows, left-to-right or top-to-bottom, with an optional end pill.",
+  whenToUse: "How something happens in order: approval paths, what comes next, hand-offs.",
+  shape: {
+    eyebrow: Text.optional(),
+    eyebrowSub: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    steps: z6.array(Step).min(2).max(7),
+    direction: z6.enum(["horizontal", "vertical"]).default("horizontal"),
+    numbered: z6.boolean().default(true),
+    end: Text.optional().describe('Pill after the last step, e.g. "Step 3" or "Keys!".'),
+    build: Build,
+    footnote: Text.optional()
+  },
+  example: {
+    layout: "flow",
+    eyebrow: "Step 2",
+    title: "What comes next",
+    steps: [
+      { title: "Personalized Color Chart", text: "Design timeline \u2014 60 days from contract" },
+      { title: "New Home Specialists", text: "Home Start Review" }
+    ],
+    end: "Step 3",
+    direction: "vertical"
+  },
+  lint: (s) => [
+    ...maxLen(s.title, 80, ["title"], "Title"),
+    ...s.steps.flatMap((st, i) => maxLen(st.text, 110, ["steps", i, "text"], "Step text")),
+    ...s.direction === "horizontal" && s.steps.length > 5 ? [
+      {
+        level: "warning",
+        path: ["steps"],
+        message: "More than 5 steps side by side gets cramped; try direction: vertical."
+      }
+    ] : []
+  ],
+  render: (s) => ({
+    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<ol class="flow flow--${s.direction}"${buildAttr(
+      s.build
+    )} style="--n:${s.steps.length + (s.end ? 1 : 0)}">${s.steps.map(
+      (st, i) => `<li class="flow-step b-item">${s.numbered ? `<span class="flow-n">${i + 1}</span>` : ""}<div><h3>${inline(
+        st.title
+      )}</h3>${st.text ? `<p>${inline(st.text)}</p>` : ""}</div></li>`
+    ).join(
+      ""
+    )}${s.end ? `<li class="flow-end b-item"><span>${inline(s.end)}</span></li>` : ""}</ol>${footnote(s.footnote)}`
+  })
+});
+var timeline = defineLayout({
+  name: "timeline",
+  description: "Dated milestones along a line, optionally grouped into tinted phases, with the current point marked.",
+  whenToUse: "Schedules and histories: build timeline, closing countdown, company milestones.",
+  shape: {
+    eyebrow: Text.optional(),
+    eyebrowSub: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    items: z6.array(
+      z6.object({
+        date: z6.string().max(24).describe('Short: "Week 1", "Mar 2026", "Day 60".'),
+        title: Text,
+        text: Text.optional()
+      })
+    ).min(2).max(10),
+    phases: z6.array(
+      z6.object({
+        label: Text,
+        from: z6.number().int().positive().describe("First item in the phase (1-based)."),
+        to: z6.number().int().positive().describe("Last item in the phase (1-based).")
+      })
+    ).max(4).optional(),
+    current: z6.number().int().positive().optional().describe('Item to mark as "you are here" (1-based).'),
+    build: Build
+  },
+  example: {
+    layout: "timeline",
+    eyebrow: "Your guide",
+    title: "The whole path \u2014 from contract to year eight",
+    items: [
+      { date: "01", title: "Introduction" },
+      { date: "02", title: "Purchasing" },
+      { date: "03", title: "Design" },
+      { date: "04", title: "Construction" },
+      { date: "05", title: "Closing" },
+      { date: "06", title: "Warranty" },
+      { date: "07", title: "Use & Care" },
+      { date: "08", title: "HOA & Metro" }
+    ],
+    phases: [
+      { label: "Getting to your home", from: 1, to: 5 },
+      { label: "Living in your home", from: 6, to: 8 }
+    ],
+    current: 5
+  },
+  lint: (s) => {
+    const out = [...maxLen(s.title, 80, ["title"], "Title")];
+    (s.phases ?? []).forEach((p, i) => {
+      if (p.from > p.to || p.to > s.items.length) {
+        out.push({
+          level: "error",
+          path: ["phases", i],
+          message: `Phase covers items ${p.from}\u2013${p.to} but there are ${s.items.length} items.`
+        });
+      }
+    });
+    if (s.current && s.current > s.items.length) {
+      out.push({
+        level: "error",
+        path: ["current"],
+        message: `current is ${s.current} but there are ${s.items.length} items.`
+      });
+    }
+    return out;
+  },
+  render: (s) => {
+    const phaseOf = (i) => (s.phases ?? []).findIndex((p) => i + 1 >= p.from && i + 1 <= p.to);
+    const bands = (s.phases ?? []).map(
+      (p, pi) => `<div class="tl-phase tl-phase--${pi % 2}" style="grid-column:${p.from} / ${p.to + 1}"><span>${inline(p.label)}</span></div>`
+    ).join("");
+    return {
+      html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="timeline"${buildAttr(
+        s.build
+      )} style="--n:${s.items.length}">${bands ? `<div class="tl-phases">${bands}</div>` : ""}<ol class="tl-items">${s.items.map((it, i) => {
+        const cls = [
+          "tl-item",
+          "b-item",
+          phaseOf(i) >= 0 ? `tl-in-${phaseOf(i) % 2}` : "",
+          s.current === i + 1 ? "tl-current" : "",
+          s.current && i + 1 < s.current ? "tl-done" : ""
+        ].filter(Boolean).join(" ");
+        return `<li class="${cls}"><span class="tl-dot"></span><span class="tl-date">${escapeHtml(it.date)}</span><h3>${inline(
+          it.title
+        )}</h3>${it.text ? `<p>${inline(it.text)}</p>` : ""}</li>`;
+      }).join("")}</ol></div>`
+    };
+  }
+});
+var cycle = defineLayout({
+  name: "cycle",
+  description: "A repeating process: 3\u20136 steps arranged around a circle with arrows, optional centre label.",
+  whenToUse: "Loops that repeat: seasonal maintenance, feedback cycles, plan-do-review.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    steps: z6.array(Step).min(3).max(6),
+    center: Text.optional().describe("Word in the middle of the circle.")
+  },
+  example: {
+    layout: "cycle",
+    eyebrow: "Use & care",
+    title: "Seasonal maintenance, every year",
+    center: "Your home",
+    steps: [
+      { title: "Spring", text: "Check grading and gutters" },
+      { title: "Summer", text: "Service AC, reseal decks" },
+      { title: "Fall", text: "Blow out sprinklers" },
+      { title: "Winter", text: "Replace furnace filter" }
+    ]
+  },
+  lint: (s) => s.steps.flatMap((st, i) => maxLen(st.text, 70, ["steps", i, "text"], "Step text")),
+  render: (s) => {
+    const n = s.steps.length;
+    const pos = s.steps.map((_, i) => {
+      const a = i / n * Math.PI * 2 - Math.PI / 2;
+      return { x: 50 + 38 * Math.cos(a), y: 50 + 38 * Math.sin(a) };
+    });
+    const arcs = pos.map((_, i) => {
+      const a0 = i / n * Math.PI * 2 - Math.PI / 2 + 0.34;
+      const a1 = (i + 1) / n * Math.PI * 2 - Math.PI / 2 - 0.34;
+      const p = (a) => `${(50 + 38 * Math.cos(a)).toFixed(2)} ${(50 + 38 * Math.sin(a)).toFixed(2)}`;
+      return `<path d="M ${p(a0)} A 38 38 0 0 1 ${p(a1)}" marker-end="url(#cy-arrow)"/>`;
+    }).join("");
+    return {
+      html: `${eyebrow(s.eyebrow)}${heading(s.title)}${lead(s.lead)}<div class="cycle"><svg class="cycle-ring" viewBox="0 0 100 100" aria-hidden="true"><defs><marker id="cy-arrow" viewBox="0 0 10 10" refX="7" refY="5" markerWidth="4" markerHeight="4" orient="auto-start-reverse"><path d="M0 0 L10 5 L0 10 z"/></marker></defs>${arcs}</svg>${s.center ? `<div class="cycle-center">${inline(s.center)}</div>` : ""}${s.steps.map(
+        (st, i) => `<div class="cycle-node" style="left:${pos[i].x.toFixed(2)}%;top:${pos[i].y.toFixed(2)}%"><h3>${inline(st.title)}</h3>${st.text ? `<p>${inline(st.text)}</p>` : ""}</div>`
+      ).join("")}</div>`
+    };
+  }
+});
+var hierarchy = defineLayout({
+  name: "hierarchy",
+  description: "An org chart or tree, up to 3 levels, with optional photos.",
+  whenToUse: "Who reports to whom, how a team is organised, how a topic breaks down.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    nodes: z6.array(
+      z6.object({
+        id: z6.string().regex(/^[a-z0-9-]+$/).describe("Short slug, referenced by children."),
+        parent: z6.string().optional().describe("id of the parent; omit for the top node."),
+        name: Text,
+        role: Text.optional(),
+        photo: Image.optional()
+      })
+    ).min(1).max(16)
+  },
+  example: {
+    layout: "hierarchy",
+    eyebrow: "Your team",
+    title: "Who builds your home",
+    nodes: [
+      { id: "pm", name: "Project Manager", role: "Oversees your community" },
+      { id: "super", parent: "pm", name: "Superintendent", role: "Runs your site day to day" },
+      { id: "cs", parent: "pm", name: "Customer Service", role: "After you move in" },
+      {
+        id: "trades",
+        parent: "super",
+        name: "Trade partners",
+        role: "Framing, plumbing, electrical\u2026"
+      }
+    ]
+  },
+  lint: (s) => {
+    const out = [
+      ...missingAlt(
+        s.nodes.flatMap((n) => n.photo ? [n.photo] : []),
+        ["nodes"]
+      )
+    ];
+    const ids = new Set(s.nodes.map((n) => n.id));
+    const roots = s.nodes.filter((n) => !n.parent);
+    if (roots.length !== 1)
+      out.push({
+        level: "error",
+        path: ["nodes"],
+        message: `Needs exactly one top node (no parent); found ${roots.length}.`
+      });
+    s.nodes.forEach((n, i) => {
+      if (n.parent && !ids.has(n.parent))
+        out.push({
+          level: "error",
+          path: ["nodes", i, "parent"],
+          message: `No node with id "${n.parent}".`
+        });
+    });
+    const depth = (id, seen = /* @__PURE__ */ new Set()) => {
+      const node = s.nodes.find((n) => n.id === id);
+      if (!node?.parent || seen.has(id)) return 1;
+      seen.add(id);
+      return 1 + depth(node.parent, seen);
+    };
+    if (s.nodes.some((n) => depth(n.id) > 3))
+      out.push({ level: "error", path: ["nodes"], message: "Keep the tree to 3 levels." });
+    return out;
+  },
+  render: (s, ctx) => {
+    const kids = (id) => s.nodes.filter((n) => n.parent === id);
+    const node = (n) => {
+      const children = kids(n.id);
+      return `<li><div class="h-node">${n.photo ? img(n.photo, ctx, "avatar") : ""}<div><h3>${inline(n.name)}</h3>${n.role ? `<p>${inline(n.role)}</p>` : ""}</div></div>${children.length ? `<ul>${children.map(node).join("")}</ul>` : ""}</li>`;
+    };
+    const root = s.nodes.find((n) => !n.parent);
+    return {
+      html: `${eyebrow(s.eyebrow)}${heading(s.title)}${lead(s.lead)}<div class="hierarchy"><ul>${root ? node(root) : ""}</ul></div>`
+    };
+  }
+});
+var matrix = defineLayout({
+  name: "matrix",
+  description: "A 2\xD72 grid with labelled axes and a few items in each quadrant.",
+  whenToUse: "Sorting options by two factors: effort vs impact, cost vs value, who handles what when.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text,
+    lead: Text.optional(),
+    xAxis: z6.object({ low: Text, high: Text, label: Text.optional() }),
+    yAxis: z6.object({ low: Text, high: Text, label: Text.optional() }),
+    quadrants: z6.array(z6.object({ title: Text, items: z6.array(Text).max(4).optional() })).length(4).describe("In reading order: top-left, top-right, bottom-left, bottom-right."),
+    highlight: z6.number().int().min(1).max(4).optional().describe("Quadrant to emphasise (1\u20134).")
+  },
+  example: {
+    layout: "matrix",
+    title: "Where to spend your upgrade budget",
+    xAxis: { low: "Easy to add later", high: "Hard to add later", label: "After move-in" },
+    yAxis: { low: "Nice to have", high: "High value", label: "Value" },
+    quadrants: [
+      { title: "Add later", items: ["Paint colours", "Light fixtures"] },
+      { title: "Choose now", items: ["Structural options", "Electrical & low volt"] },
+      { title: "Skip", items: ["Trend finishes"] },
+      { title: "Consider", items: ["Flooring upgrades"] }
+    ],
+    highlight: 2
+  },
   render: (s) => ({
-    html: `${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}<div class="split2" style="--cols:${s.columns.length}">${s.columns.map(
-      (c) => `<div class="col tone-${c.tone}"><h3>${inline(c.heading)}</h3>${c.text ? `<p>${inline(c.text)}</p>` : ""}${items(
-        c.items,
-        c.marker
-      )}</div>`
-    ).join("")}</div>`
+    html: `${eyebrow(s.eyebrow)}${heading(s.title)}${lead(s.lead)}<div class="matrix"><div class="mx-y"><span>${inline(s.yAxis.high)}</span>${s.yAxis.label ? `<b>${inline(s.yAxis.label)}</b>` : ""}<span>${inline(s.yAxis.low)}</span></div><div class="mx-grid">${s.quadrants.map(
+      (q, i) => `<div class="mx-q${s.highlight === i + 1 ? " mx-hl" : ""}"><h3>${inline(q.title)}</h3>${q.items?.length ? `<ul>${q.items.map((t) => `<li>${inline(t)}</li>`).join("")}</ul>` : ""}</div>`
+    ).join(
+      ""
+    )}</div><div class="mx-x"><span>${inline(s.xAxis.low)}</span>${s.xAxis.label ? `<b>${inline(s.xAxis.label)}</b>` : ""}<span>${inline(
+      s.xAxis.high
+    )}</span></div></div>`
   })
 });
-var quote = defineLayout({
-  name: "quote",
-  description: "A pull quote with attribution, optional portrait.",
-  whenToUse: "A homeowner testimonial, a value statement, a line from leadership.",
+var tiers = defineLayout({
+  name: "tiers",
+  description: "A funnel (wide to narrow) or pyramid (narrow to wide) of 3\u20136 labelled tiers with optional values.",
+  whenToUse: "Stages that narrow (leads \u2192 contracts \u2192 closings) or build on each other (foundation \u2192 finish).",
   shape: {
     eyebrow: Text.optional(),
-    quote: Text,
-    cite: Text.optional(),
-    image: Image.optional().describe("Portrait of the person quoted.")
+    title: Text,
+    lead: Text.optional(),
+    style: z6.enum(["funnel", "pyramid"]).default("funnel"),
+    tiers: z6.array(z6.object({ label: Text, value: z6.string().max(16).optional(), note: Text.optional() })).min(3).max(6)
   },
   example: {
-    layout: "quote",
-    quote: "They walked us through every step. We always knew what came next.",
-    cite: "The Martinez family \xB7 Wolf Ranch"
+    layout: "tiers",
+    eyebrow: "Warranty",
+    title: "Coverage that lasts",
+    style: "pyramid",
+    tiers: [
+      { label: "Structural", value: "10 yrs", note: "Load-bearing elements" },
+      { label: "Systems", value: "2 yrs", note: "Plumbing, electrical, HVAC" },
+      { label: "Workmanship", value: "1 yr", note: "Fit and finish" }
+    ]
   },
-  lint: (s) => [
-    ...maxLen(s.quote, 240, ["quote"], "Quote"),
-    ...missingAlt(s.image ? [s.image] : [], ["image"])
-  ],
-  render: (s, ctx) => ({
-    html: `${eyebrow(s.eyebrow)}<div class="${s.image ? "cols quote-cols" : ""}"><blockquote class="quote">${inline(
-      s.quote
-    )}${s.cite ? `<cite>${inline(s.cite)}</cite>` : ""}</blockquote>${s.image ? `<div class="portrait">${img(s.image, ctx)}</div>` : ""}</div>`
-  })
+  lint: (s) => maxCount(s.tiers, 6, ["tiers"], "tiers"),
+  render: (s) => {
+    const n = s.tiers.length;
+    return {
+      html: `${eyebrow(s.eyebrow)}${heading(s.title)}${lead(s.lead)}<ol class="tiers tiers--${s.style}">${s.tiers.map((t, i) => {
+        const rank = s.style === "funnel" ? i : n - 1 - i;
+        const width = 100 - rank * 60 / Math.max(1, n - 1);
+        return `<li style="--w:${width.toFixed(1)}%;--i:${i}"><div class="tier-bar"><span class="tier-label">${inline(t.label)}</span>${t.value ? `<b>${escapeHtml(t.value)}</b>` : ""}</div>${t.note ? `<p class="tier-note">${inline(t.note)}</p>` : ""}</li>`;
+      }).join("")}</ol>`
+    };
+  }
 });
 
 // src/layouts/media.ts
-import { z as z3 } from "zod";
-var Group = z3.object({
+import { z as z7 } from "zod";
+var Group = z7.object({
   heading: Text.optional().describe("Small bold heading above this group."),
   text: Text.optional(),
-  items: z3.array(Item).optional(),
+  items: z7.array(Item).optional(),
   marker: Marker
 });
 var split = defineLayout({
@@ -550,11 +1557,11 @@ var split = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    groups: z3.array(Group).optional().describe("Text blocks under the title, each with an optional heading."),
-    images: z3.array(Image).max(4).default([]).describe("Photos. May be empty when a badge carries the media side."),
-    arrange: z3.enum(["single", "stack", "grid", "overlap"]).default("single").describe("single: one photo \xB7 stack: vertical \xB7 grid: 2\xD72 \xB7 overlap: two photos layered."),
-    mediaSide: z3.enum(["right", "left"]).default("right"),
-    badge: z3.object({ title: Text, text: Text.optional() }).optional().describe(
+    groups: z7.array(Group).optional().describe("Text blocks under the title, each with an optional heading."),
+    images: z7.array(Image).max(4).default([]).describe("Photos. May be empty when a badge carries the media side."),
+    arrange: z7.enum(["single", "stack", "grid", "overlap"]).default("single").describe("single: one photo \xB7 stack: vertical \xB7 grid: 2\xD72 \xB7 overlap: two photos layered."),
+    mediaSide: z7.enum(["right", "left"]).default("right"),
+    badge: z7.object({ title: Text, text: Text.optional() }).optional().describe(
       'Red circle callout over the photos, e.g. "Pre-drywall meeting / about 60 days in".'
     ),
     footnote: Text.optional().describe("Closing line under the text column.")
@@ -610,10 +1617,10 @@ var photos = defineLayout({
     eyebrow: Text.optional(),
     title: Text.optional(),
     lead: Text.optional(),
-    images: z3.array(Image).min(1).max(24),
-    columns: z3.number().int().min(1).max(8).optional().describe("Defaults to a balanced count for the number of photos."),
-    aspect: z3.enum(["portrait", "landscape", "square", "native"]).default("landscape").describe("portrait suits headshots; native keeps each photo uncropped."),
-    captions: z3.boolean().default(false).describe("Show each image alt text as a caption.")
+    images: z7.array(Image).min(1).max(24),
+    columns: z7.number().int().min(1).max(8).optional().describe("Defaults to a balanced count for the number of photos."),
+    aspect: z7.enum(["portrait", "landscape", "square", "native"]).default("landscape").describe("portrait suits headshots; native keeps each photo uncropped."),
+    captions: z7.boolean().default(false).describe("Show each image alt text as a caption.")
   },
   example: {
     layout: "photos",
@@ -648,7 +1655,15 @@ var image = defineLayout({
     title: Text.optional(),
     image: Image,
     caption: Text.optional(),
-    frame: z3.boolean().default(true).describe("White card frame; turn off for full-bleed photos.")
+    frame: z7.boolean().default(true).describe("White card frame; turn off for full-bleed photos."),
+    hotspots: z7.array(
+      z7.object({
+        x: z7.number().min(0).max(100).describe("Horizontal position, % from the left."),
+        y: z7.number().min(0).max(100).describe("Vertical position, % from the top."),
+        label: Text,
+        text: Text.optional()
+      })
+    ).max(12).optional().describe("Numbered markers on the image with a legend, e.g. rooms on a floor plan.")
   },
   example: {
     layout: "image",
@@ -657,12 +1672,143 @@ var image = defineLayout({
     caption: "Model homes are open daily 10\u20135."
   },
   lint: (s) => missingAlt([s.image], ["image"]).map((i) => ({ ...i, path: ["image", "alt"] })),
+  render: (s, ctx) => {
+    if (s.hotspots?.length) {
+      const marks = s.hotspots.map(
+        (h, i) => `<span class="hs-mark" style="left:${h.x}%;top:${h.y}%" aria-hidden="true">${i + 1}</span>`
+      ).join("");
+      const legend = s.hotspots.map(
+        (h) => `<li><b>${inline(h.label)}</b>${h.text ? `<span>${inline(h.text)}</span>` : ""}</li>`
+      ).join("");
+      return {
+        classes: ["has-hotspots"],
+        html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<div class="hs-layout"><figure class="diagram-shot"><div class="hs-wrap">${img(
+          { ...s.image, fit: "contain" },
+          ctx
+        )}${marks}</div>${s.caption ? `<figcaption class="shot-cap">${inline(s.caption)}</figcaption>` : ""}</figure><ol class="hs-legend">${legend}</ol></div>`
+      };
+    }
+    return {
+      classes: s.frame ? [] : ["bleed"],
+      html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<figure class="${s.frame ? "diagram-shot" : "bleed-img"}">${img(
+        { ...s.image, fit: s.frame ? "contain" : s.image.fit },
+        ctx
+      )}${s.caption ? `<figcaption class="shot-cap">${inline(s.caption)}</figcaption>` : ""}</figure>`
+    };
+  }
+});
+var video = defineLayout({
+  name: "video",
+  description: "A YouTube or Vimeo video that loads when the slide is shown, with a poster + QR fallback offline and in print.",
+  whenToUse: "Walkthrough tours, testimonials, how-to clips. Keep them short; needs internet to play.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text.optional(),
+    url: z7.string().url().refine((u) => !!parseVideoUrl(u), "Use a YouTube or Vimeo link.").describe("YouTube or Vimeo link (watch, share or embed URL)."),
+    poster: Image.optional().describe(
+      "Still shown before play and offline. YouTube posters are fetched automatically."
+    ),
+    start: z7.number().int().min(0).optional().describe("Start at this many seconds."),
+    end: z7.number().int().min(1).optional().describe("Stop at this many seconds (YouTube)."),
+    autoplay: z7.boolean().default(false).describe("Start playing when the slide is shown (muted by browsers)."),
+    muted: z7.boolean().default(false),
+    captions: z7.boolean().default(true).describe("Show captions when the video has them."),
+    caption: Text.optional()
+  },
+  example: {
+    layout: "video",
+    eyebrow: "Take the tour",
+    title: "Inside the Aspen floor plan",
+    url: "https://www.youtube.com/watch?v=aqz-KE-bpKQ",
+    caption: "Virtual tour \xB7 2 min"
+  },
+  prepare: (s) => {
+    const ref = parseVideoUrl(s.url);
+    return { qr: [ref.watchUrl], images: !s.poster && ref.poster ? [ref.poster] : [] };
+  },
+  render: (s, ctx) => {
+    const ref = parseVideoUrl(s.url);
+    const src = videoEmbedUrl(ref, s);
+    const posterSrc = s.poster?.src ?? ref.poster;
+    const poster = posterSrc ? `<img class="media-poster" src="${escapeAttr(ctx.image(posterSrc))}" alt="${escapeAttr(
+      s.poster?.alt || (s.title ? `Video: ${s.title}` : "Video poster")
+    )}" decoding="async">` : "";
+    return {
+      classes: ["has-media"],
+      html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<figure class="media-frame" data-media-src="${escapeAttr(
+        src
+      )}" data-media-title="${escapeAttr(s.title ?? "Video")}" data-media-kind="video">${poster}<div class="media-fallback"><span class="play-badge" aria-hidden="true">\u25B6</span><div class="media-qr">${ctx.qr(
+        ref.watchUrl
+      )}<a href="${escapeAttr(ref.watchUrl)}" target="_blank" rel="noopener">Watch on ${ref.provider === "youtube" ? "YouTube" : "Vimeo"} \u2197</a></div></div></figure>${s.caption ? `<p class="shot-cap">${inline(s.caption)}</p>` : ""}`
+    };
+  }
+});
+var embed = defineLayout({
+  name: "embed",
+  description: "A live web page (dashboard, map, form, 3D tour) in a sandboxed frame that loads when the slide is shown, with an open link and QR fallback.",
+  whenToUse: "Showing something interactive: a Matterport tour, a Google Map, a Looker dashboard, a sign-up form. Needs internet; some sites refuse to be framed.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text.optional(),
+    url: z7.string().url().refine((u) => u.startsWith("https://"), "Embeds must use https.").describe("https address of the page to show."),
+    aspect: z7.enum(["16:9", "4:3", "1:1", "tall"]).default("16:9").describe("Frame shape; tall suits forms and phones."),
+    fallback: Image.optional().describe(
+      "Screenshot shown offline, in print, or if the site refuses framing."
+    ),
+    caption: Text.optional()
+  },
+  example: {
+    layout: "embed",
+    eyebrow: "Explore",
+    title: "Find your community",
+    url: "https://www.openstreetmap.org/export/embed.html?bbox=-104.95,38.78,-104.65,39.03&layer=mapnik",
+    caption: "Pan and zoom to see every Classic Homes community."
+  },
+  prepare: (s) => ({ qr: [s.url] }),
+  render: (s, ctx) => ({
+    classes: ["has-media"],
+    html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<figure class="media-frame aspect-${s.aspect.replace(
+      ":",
+      "x"
+    )}" data-media-src="${escapeAttr(s.url)}" data-media-title="${escapeAttr(s.title ?? "Embedded page")}" data-media-kind="embed">${s.fallback ? img(s.fallback, ctx, "media-poster") : ""}<div class="media-fallback"><div class="media-qr">${ctx.qr(s.url)}<a href="${escapeAttr(
+      s.url
+    )}" target="_blank" rel="noopener">${escapeHtml(s.url.replace(/^https:\/\//, "").split("/")[0])} \u2197</a></div></div><a class="media-open" href="${escapeAttr(
+      s.url
+    )}" target="_blank" rel="noopener">Open \u2197</a></figure>${s.caption ? `<p class="shot-cap">${inline(s.caption)}</p>` : ""}`
+  })
+});
+var compare = defineLayout({
+  name: "compare",
+  description: "Before/after: two photos in one frame with a draggable divider (side by side in print).",
+  whenToUse: "Showing change: framing vs finished, model vs your home, standard vs upgraded finish.",
+  shape: {
+    eyebrow: Text.optional(),
+    title: Text.optional(),
+    before: Image,
+    after: Image,
+    beforeLabel: z7.string().max(24).default("Before"),
+    afterLabel: z7.string().max(24).default("After"),
+    caption: Text.optional()
+  },
+  example: {
+    layout: "compare",
+    title: "Framing to finished",
+    before: { src: "images/framing.jpg", alt: "Kitchen during framing" },
+    after: { src: "images/finished.jpg", alt: "Finished kitchen" },
+    beforeLabel: "Week 6",
+    afterLabel: "Move-in"
+  },
+  lint: (s) => missingAlt([s.before, s.after], ["images"]),
   render: (s, ctx) => ({
-    classes: s.frame ? [] : ["bleed"],
-    html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<figure class="${s.frame ? "diagram-shot" : "bleed-img"}">${img(
-      { ...s.image, fit: s.frame ? "contain" : s.image.fit },
-      ctx
-    )}${s.caption ? `<figcaption class="shot-cap">${inline(s.caption)}</figcaption>` : ""}</figure>`
+    html: `${eyebrow(s.eyebrow)}${s.title ? heading(s.title) : ""}<figure class="compare" style="--pos:50%">${img(
+      s.after,
+      ctx,
+      "cmp-after"
+    )}<div class="cmp-before-clip">${img(s.before, ctx, "cmp-before")}</div><span class="cmp-label cmp-label--before">${escapeHtml(
+      s.beforeLabel
+    )}</span><span class="cmp-label cmp-label--after">${escapeHtml(
+      s.afterLabel
+    )}</span><input class="cmp-range" type="range" min="0" max="100" value="50" aria-label="Reveal before or after"><span class="cmp-handle" aria-hidden="true"></span></figure>${s.caption ? `<p class="shot-cap">${inline(s.caption)}</p>` : ""}`
   })
 });
 var walkthrough = defineLayout({
@@ -672,23 +1818,23 @@ var walkthrough = defineLayout({
   shape: {
     eyebrow: Text.optional(),
     title: Text,
-    label: z3.string().default("STAGE").describe("Word on the badge, e.g. STAGE, PHASE, DAY."),
-    start: z3.number().int().positive().default(1).describe(
+    label: z7.string().default("STAGE").describe("Word on the badge, e.g. STAGE, PHASE, DAY."),
+    start: z7.number().int().positive().default(1).describe(
       "Position of the first stage in the whole sequence (1-based). Use to continue a sequence split by other slides."
     ),
-    numberFrom: z3.number().int().default(1).describe("Number shown on the badge of the first stage in the sequence, e.g. 0."),
-    total: z3.number().int().positive().optional().describe(
+    numberFrom: z7.number().int().default(1).describe("Number shown on the badge of the first stage in the sequence, e.g. 0."),
+    total: z7.number().int().positive().optional().describe(
       'Stages in the whole sequence when it spans several walkthroughs (for "n of N" and the rail).'
     ),
-    stages: z3.array(
-      z3.object({
+    stages: z7.array(
+      z7.object({
         image: Image,
-        badge: z3.string().max(10).optional().describe('Replaces the badge for this stage, e.g. "PERMIT" (label is hidden).'),
-        number: z3.union([z3.string().max(4), z3.number().int()]).optional().describe("Number shown under the label for this stage; defaults to its position."),
+        badge: z7.string().max(10).optional().describe('Replaces the badge for this stage, e.g. "PERMIT" (label is hidden).'),
+        number: z7.union([z7.string().max(4), z7.number().int()]).optional().describe("Number shown under the label for this stage; defaults to its position."),
         eyebrow: Text.optional().describe("Overrides the walkthrough eyebrow for this stage."),
         heading: Text.optional(),
         text: Text,
-        notes: z3.string().optional().describe("Speaker notes for this stage (falls back to the slide notes).")
+        notes: z7.string().optional().describe("Speaker notes for this stage (falls back to the slide notes).")
       })
     ).min(2).max(20)
   },
@@ -752,11 +1898,11 @@ var qr = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    items: z3.array(Item).optional(),
-    url: z3.string().url().optional().describe("Where the code points. Required unless image is set."),
+    items: z7.array(Item).optional(),
+    url: z7.string().url().refine(isSafeLinkUrl, "Use an http, https, mailto or tel URL.").optional().describe("Where the code points. Required unless image is set."),
     image: Image.optional().describe("Use a pre-made QR/image instead of generating one from url."),
-    logo: z3.boolean().default(false).describe("Show the Classic Homes logo under the text."),
-    label: z3.string().optional().describe("URL text shown under the code; defaults to the URL without https://.")
+    logo: z7.boolean().default(false).describe("Show the Classic Homes logo under the text."),
+    label: z7.string().optional().describe("URL text shown under the code; defaults to the URL without https://.")
   },
   example: {
     layout: "qr",
@@ -765,6 +1911,7 @@ var qr = defineLayout({
     lead: "Scan to open the Homeowner Guide on your phone.",
     url: "https://guide.classichomes.com"
   },
+  prepare: (s) => ({ qr: !s.image && s.url ? [s.url] : [] }),
   lint: (s) => [
     ...maxLen(s.title, 70, ["title"], "Title"),
     ...s.url || s.image ? [] : [
@@ -780,7 +1927,7 @@ var qr = defineLayout({
     const label = s.label ?? s.url?.replace(/^https?:\/\//, "").replace(/\/$/, "");
     const inner = `${code}${label ? `<div class="u">${escapeHtml(label)}</div>` : ""}`;
     return {
-      html: `<div class="cols"><div>${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}${items(s.items)}${s.logo ? `<div class="brand-logo end">${LOGO_SVG}</div>` : ""}</div><div class="qr-wrap">${s.url ? `<a class="qr-hero" href="${escapeAttr(s.url)}">${inner}</a>` : `<div class="qr-hero">${inner}</div>`}</div></div>`
+      html: `<div class="cols"><div>${eyebrow(s.eyebrow, s.eyebrowSub)}${heading(s.title)}${lead(s.lead)}${items(s.items)}${s.logo ? `<div class="brand-logo end">${ctx.logo()}</div>` : ""}</div><div class="qr-wrap">${s.url ? `<a class="qr-hero" href="${escapeAttr(s.url)}">${inner}</a>` : `<div class="qr-hero">${inner}</div>`}</div></div>`
     };
   }
 });
@@ -792,13 +1939,13 @@ var contacts = defineLayout({
     eyebrow: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    contacts: z3.array(
-      z3.object({
+    contacts: z7.array(
+      z7.object({
         name: Text,
         role: Text.optional(),
-        phone: z3.string().optional(),
-        email: z3.string().email().optional(),
-        url: z3.string().url().optional(),
+        phone: z7.string().optional(),
+        email: z7.string().email().optional(),
+        url: z7.string().url().refine(isSafeLinkUrl, "Use an http, https, mailto or tel URL.").optional(),
         photo: Image.optional()
       })
     ).min(1).max(9)
@@ -836,7 +1983,7 @@ var journey = defineLayout({
     eyebrowSub: Text.optional(),
     title: Text,
     lead: Text.optional(),
-    active: z3.number().int().positive().optional().describe("Step to highlight; defaults to the slide step.")
+    active: z7.number().int().positive().optional().describe("Step to highlight; defaults to the slide step.")
   },
   example: {
     layout: "journey",
@@ -874,15 +2021,169 @@ var LAYOUTS = [
   walkthrough,
   quote,
   qr,
-  contacts
+  contacts,
+  chart,
+  table,
+  flow,
+  timeline,
+  cycle,
+  hierarchy,
+  matrix,
+  tiers,
+  video,
+  embed,
+  compare
 ];
 var byName = new Map(LAYOUTS.map((l) => [l.name, l]));
 function getLayout(name) {
   return byName.get(name);
 }
+var LAYOUT_CATEGORY_ORDER = [
+  "Openers & dividers",
+  "Text",
+  "Data",
+  "Diagrams",
+  "Media",
+  "People & places"
+];
+var LAYOUT_CATEGORIES = {
+  title: "Openers & dividers",
+  section: "Openers & dividers",
+  statement: "Openers & dividers",
+  journey: "Openers & dividers",
+  bullets: "Text",
+  cards: "Text",
+  comparison: "Text",
+  quote: "Text",
+  stats: "Data",
+  chart: "Data",
+  table: "Data",
+  flow: "Diagrams",
+  timeline: "Diagrams",
+  cycle: "Diagrams",
+  hierarchy: "Diagrams",
+  matrix: "Diagrams",
+  tiers: "Diagrams",
+  split: "Media",
+  photos: "Media",
+  image: "Media",
+  compare: "Media",
+  walkthrough: "Media",
+  video: "Media",
+  embed: "Media",
+  qr: "People & places",
+  contacts: "People & places"
+};
+
+// src/edit.ts
+function findSlide(deck, ref) {
+  const index = typeof ref === "number" || /^\d+$/.test(ref) ? Number(ref) - 1 : deck.slides.findIndex((s) => s.id === ref);
+  if (index < 0 || index >= deck.slides.length) {
+    throw new Error(
+      `No slide "${ref}". The deck has ${deck.slides.length} slides; use a 1-based number or a slide id.`
+    );
+  }
+  return index;
+}
+function newSlideId(taken = /* @__PURE__ */ new Set()) {
+  const alphabet = "abcdefghijklmnopqrstuvwxyz0123456789";
+  for (; ; ) {
+    const bytes = new Uint8Array(6);
+    globalThis.crypto.getRandomValues(bytes);
+    const id = `s-${Array.from(bytes, (b) => alphabet[b % alphabet.length]).join("")}`;
+    if (!taken.has(id)) return id;
+  }
+}
+function ensureSlideIds(deck) {
+  const taken = new Set(
+    deck.slides.map((s) => s.id).filter((id) => typeof id === "string")
+  );
+  let added = 0;
+  for (const slide of deck.slides) {
+    if (typeof slide.id === "string" && slide.id) continue;
+    slide.id = newSlideId(taken);
+    taken.add(slide.id);
+    added++;
+  }
+  return added;
+}
+function slideKey(slide, index) {
+  return typeof slide.id === "string" && slide.id ? slide.id : `#${index + 1}`;
+}
+function addSlide(deck, slide, position) {
+  if (typeof slide.id !== "string" || !slide.id) {
+    slide = { ...slide, id: newSlideId(new Set(deck.slides.map((s) => s.id))) };
+  }
+  const at = position === void 0 ? deck.slides.length : Math.max(0, Math.min(deck.slides.length, position - 1));
+  deck.slides.splice(at, 0, slide);
+  return at + 1;
+}
+function updateSlide(deck, ref, patch) {
+  const i = findSlide(deck, ref);
+  const next = patch.layout && patch.layout !== deck.slides[i].layout ? { id: deck.slides[i].id } : { ...deck.slides[i] };
+  for (const [k, v] of Object.entries(patch)) {
+    if (v === null) delete next[k];
+    else next[k] = v;
+  }
+  deck.slides[i] = next;
+  return i + 1;
+}
+function moveSlide(deck, ref, to) {
+  const from = findSlide(deck, ref);
+  const [slide] = deck.slides.splice(from, 1);
+  const at = Math.max(0, Math.min(deck.slides.length, to - 1));
+  deck.slides.splice(at, 0, slide);
+  return at + 1;
+}
+function removeSlide(deck, ref) {
+  const i = findSlide(deck, ref);
+  return deck.slides.splice(i, 1)[0];
+}
+function outline(deck) {
+  return deck.slides.map((s, i) => {
+    const label = s.title ?? s.quote ?? s.kicker ?? "";
+    return `${i + 1}. [${s.layout}]${s.id ? ` #${s.id}` : ""} ${label}`.trim();
+  });
+}
+
+// src/schema/deck.ts
+import { z as z8 } from "zod";
+var slideSchemas = LAYOUTS.map(
+  (layout) => z8.object({ layout: z8.literal(layout.name), ...baseSlide, ...layout.shape }).strict().describe(`${layout.description} Use for: ${layout.whenToUse}`)
+);
+var SlideSchema = z8.discriminatedUnion("layout", slideSchemas);
+var DeckSettingsSchema = z8.object({
+  slideNumbers: z8.boolean().default(false).describe("Show the slide number in the footer."),
+  logo: z8.enum(["title", "all", "none"]).default("title").describe(
+    "Where the logo appears: title/closing slides only, a corner mark on every slide, or nowhere."
+  ),
+  confidential: z8.string().max(40).optional().describe('Footer label such as "Internal \u2014 do not distribute".'),
+  autoAdvance: z8.number().int().min(3).max(600).optional().describe(
+    "Kiosk mode: seconds per slide (loops unattended). For a file or hosted URL, ?kiosk=15 also works."
+  ),
+  loop: z8.boolean().default(false).describe("Return to the first slide after the last (kiosk).")
+}).strict();
+var DeckSchema = z8.object({
+  title: z8.string().min(1).describe("Deck title (browser tab, file name, gallery)."),
+  description: z8.string().optional().describe("One sentence: who the deck is for and what it covers."),
+  author: z8.string().optional(),
+  date: z8.string().optional(),
+  lang: z8.string().default("en"),
+  journey: z8.object({
+    steps: z8.array(Text).min(2).max(10).describe("Short names of each step, in order."),
+    label: z8.string().default("STEP").describe("Word on the vertical step rail.")
+  }).optional().describe(
+    'Optional numbered journey (agenda). Enables the journey layout, step rails and "you are here" strips.'
+  ),
+  brand: DeckBrandSchema.optional().describe(
+    "Which brand the deck speaks for (profile key) plus optional name/logo/favicon/footer overrides."
+  ),
+  settings: DeckSettingsSchema.default({}),
+  slides: z8.array(SlideSchema).min(1)
+}).strict();
 
 // src/editor.ts
-import { z as z4 } from "zod";
+import { z as z9 } from "zod";
 var MULTILINE = /* @__PURE__ */ new Set(["lead", "body", "text", "quote", "footnote", "sub", "notes", "caption"]);
 var LABELS = {
   eyebrowSub: "Eyebrow subtitle",
@@ -906,19 +2207,21 @@ function unwrap(schema) {
   let description = schema.description;
   for (; ; ) {
     description ??= s.description;
-    if (s instanceof z4.ZodOptional || s instanceof z4.ZodNullable) {
+    if (s instanceof z9.ZodOptional || s instanceof z9.ZodNullable) {
       required = false;
       s = s.unwrap();
-    } else if (s instanceof z4.ZodDefault) {
+    } else if (s instanceof z9.ZodDefault) {
       required = false;
       dflt = s._def.defaultValue();
       s = s._def.innerType;
+    } else if (s instanceof z9.ZodEffects && s !== Image && s !== Item) {
+      s = s.innerType();
     } else break;
   }
   return { inner: s, required, default: dflt, description };
 }
 function isText(s) {
-  return s === Text || s instanceof z4.ZodString && s.description === Text.description;
+  return s === Text || s instanceof z9.ZodString && s.description === Text.description;
 }
 function describeField(key, schema) {
   const { inner, required, default: dflt, description } = unwrap(schema);
@@ -931,13 +2234,32 @@ function describeField(key, schema) {
     ...MULTILINE.has(key) ? { multiline: true } : {}
   };
   if (inner === Image) return { ...base, kind: "image" };
+  if (inner === ChartSpec) {
+    return {
+      ...base,
+      kind: "group",
+      hint: "chart",
+      fields: Object.entries(ChartSpec.shape).map(
+        ([k, v]) => describeField(k, v)
+      )
+    };
+  }
   if (inner === Item) return { ...base, kind: "item" };
   if (isText(inner)) return { ...base, kind: "inline" };
-  if (inner instanceof z4.ZodString) return { ...base, kind: "string" };
-  if (inner instanceof z4.ZodBoolean) return { ...base, kind: "boolean" };
-  if (inner instanceof z4.ZodEnum) return { ...base, kind: "enum", options: [...inner.options] };
-  if (inner instanceof z4.ZodLiteral) return { ...base, kind: "enum", options: [inner.value] };
-  if (inner instanceof z4.ZodNumber) {
+  if (inner instanceof z9.ZodString) {
+    if (key === "url" || inner.isURL) {
+      return {
+        ...base,
+        kind: "string",
+        hint: /YouTube|Vimeo/.test(description ?? "") ? "video-url" : "url"
+      };
+    }
+    return { ...base, kind: "string" };
+  }
+  if (inner instanceof z9.ZodBoolean) return { ...base, kind: "boolean" };
+  if (inner instanceof z9.ZodEnum) return { ...base, kind: "enum", options: [...inner.options] };
+  if (inner instanceof z9.ZodLiteral) return { ...base, kind: "enum", options: [inner.value] };
+  if (inner instanceof z9.ZodNumber) {
     return {
       ...base,
       kind: "number",
@@ -946,9 +2268,9 @@ function describeField(key, schema) {
       ...inner.maxValue !== null ? { max: inner.maxValue } : {}
     };
   }
-  if (inner instanceof z4.ZodUnion) {
+  if (inner instanceof z9.ZodUnion) {
     const opts = inner.options;
-    if (opts.every((o) => o instanceof z4.ZodLiteral)) {
+    if (opts.every((o) => o instanceof z9.ZodLiteral)) {
       return {
         ...base,
         kind: "enum",
@@ -957,20 +2279,24 @@ function describeField(key, schema) {
     }
     return { ...base, kind: "string" };
   }
-  if (inner instanceof z4.ZodArray) {
+  if (inner instanceof z9.ZodArray) {
     const el = inner.element;
     return {
       ...base,
       kind: "list",
+      ...el instanceof z9.ZodArray ? { hint: "grid" } : {},
       of: { ...describeField("", el), label: labelFor(key.replace(/s$/, "")) },
       ...inner._def.minLength ? { min: inner._def.minLength.value } : {},
       ...inner._def.maxLength ? { max: inner._def.maxLength.value } : {}
     };
   }
-  if (inner instanceof z4.ZodObject) {
+  if (inner instanceof z9.ZodObject) {
+    const shape = inner.shape;
+    const isPoint = shape.x instanceof z9.ZodNumber && shape.y instanceof z9.ZodNumber;
     return {
       ...base,
       kind: "group",
+      ...isPoint ? { hint: "point" } : {},
       fields: Object.entries(inner.shape).map(
         ([k, v]) => describeField(k, v)
       )
@@ -978,6 +2304,16 @@ function describeField(key, schema) {
   }
   return { ...base, kind: "string" };
 }
+function deckEditorFields() {
+  return {
+    brand: Object.entries(DeckBrandSchema.shape).map(
+      ([k, v]) => describeField(k, v)
+    ),
+    settings: Object.entries(DeckSettingsSchema.shape).map(
+      ([k, v]) => describeField(k, v)
+    )
+  };
+}
 function commonSlideFields() {
   return Object.entries(baseSlide).map(([k, v]) => describeField(k, v));
 }
@@ -986,6 +2322,7 @@ function layoutEditorInfo(name) {
   if (!layout) return void 0;
   return {
     name: layout.name,
+    category: LAYOUT_CATEGORIES[layout.name],
     description: layout.description,
     whenToUse: layout.whenToUse,
     defaults: layout.defaults ?? {},
@@ -1007,32 +2344,15 @@ function isPlaceholderImage(src) {
 function blankSlide(name) {
   const layout = getLayout(name);
   if (!layout) return void 0;
-  return JSON.parse(
+  const slide = JSON.parse(
     JSON.stringify(layout.example),
     (key, value) => key === "src" && typeof value === "string" && !/^(https?:|data:)/.test(value) ? PLACEHOLDER_IMAGE : value
   );
+  return { ...slide, id: newSlideId() };
 }
 
-// src/schema/deck.ts
-import { z as z5 } from "zod";
-var slideSchemas = LAYOUTS.map(
-  (layout) => z5.object({ layout: z5.literal(layout.name), ...baseSlide, ...layout.shape }).strict().describe(`${layout.description} Use for: ${layout.whenToUse}`)
-);
-var SlideSchema = z5.discriminatedUnion("layout", slideSchemas);
-var DeckSchema = z5.object({
-  title: z5.string().min(1).describe("Deck title (browser tab, file name, gallery)."),
-  description: z5.string().optional().describe("One sentence: who the deck is for and what it covers."),
-  author: z5.string().optional(),
-  date: z5.string().optional(),
-  lang: z5.string().default("en"),
-  journey: z5.object({
-    steps: z5.array(Text).min(2).max(10).describe("Short names of each step, in order."),
-    label: z5.string().default("STEP").describe("Word on the vertical step rail.")
-  }).optional().describe(
-    'Optional numbered journey (agenda). Enables the journey layout, step rails and "you are here" strips.'
-  ),
-  slides: z5.array(SlideSchema).min(1)
-}).strict();
+// src/validate.ts
+import QRCode2 from "qrcode";
 
 // src/render.ts
 import QRCode from "qrcode";
@@ -1040,6 +2360,55 @@ import QRCode from "qrcode";
 // src/runtime.ts
 var RUNTIME_JS = String.raw`
 (() => {
+  // The presenter runs this exact script too, retaining the host's script hash.
+  // A MessagePort stays attached to its document if the popup later navigates;
+  // unlike window.postMessage('*'), it cannot leak notes to a replacement page.
+  if (document.body.classList.contains('presenter')) {
+    if (!window.opener) return;
+    const channel = document.querySelector('meta[name="presenter-channel"]').content;
+    const connection = new MessageChannel();
+    const port = connection.port1;
+    let started = Date.now();
+    function scale(container, html) {
+      container.innerHTML = html;
+      const wrap = container.firstElementChild;
+      if (!wrap?.classList.contains('ov-thumb')) return;
+      const width = Math.max(200, container.clientWidth || 760);
+      wrap.style.width = width + 'px';
+      wrap.style.height = width * 9 / 16 + 'px';
+      wrap.firstElementChild.style.transform = 'scale(' + width / 1280 + ')';
+    }
+    function tick() {
+      const seconds = Math.floor((Date.now() - started) / 1000);
+      document.querySelector('.pv-elapsed').textContent = Math.floor(seconds / 60) + ':' + String(seconds % 60).padStart(2, '0');
+      document.querySelector('.pv-time').textContent = new Date().toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
+    }
+    port.onmessage = (event) => {
+      const state = event.data;
+      if (!state || state.type !== 'classic-slides:presenter-state') return;
+      document.title = 'Presenter · ' + state.title;
+      started = state.started;
+      scale(document.querySelector('.pv-cur'), state.current);
+      scale(document.querySelector('.pv-next'), state.next);
+      document.querySelector('.pv-notes-body').innerHTML = state.notes;
+      document.querySelector('.pv-cue').textContent = state.cue;
+      document.querySelector('.pv-count').textContent = state.count;
+      tick();
+    };
+    const keys = ['ArrowDown', 'ArrowRight', 'PageDown', ' ', 'Enter', 'ArrowUp', 'ArrowLeft', 'PageUp', 'Backspace', 'Home', 'End'];
+    document.addEventListener('keydown', (event) => {
+      if (event.metaKey || event.ctrlKey || event.altKey || !keys.includes(event.key)) return;
+      if (event.target?.closest?.('a,button,input,textarea,select,[contenteditable]')) return;
+      event.preventDefault();
+      port.postMessage({ type: 'classic-slides:presenter-key', key: event.key });
+    });
+    window.addEventListener('resize', () => port.postMessage({ type: 'classic-slides:presenter-refresh' }));
+    window.opener.postMessage({ type: 'classic-slides:presenter-ready', channel }, '*', [connection.port2]);
+    const timer = setInterval(tick, 1000);
+    window.addEventListener('beforeunload', () => { clearInterval(timer); port.close(); });
+    return;
+  }
+  const runtimeSource = document.currentScript.textContent;
   const NOTES = JSON.parse(document.getElementById('deck-notes').textContent || '[]');
   const deck = document.getElementById('deck');
   const slides = [...deck.querySelectorAll('.slide')];
@@ -1049,6 +2418,8 @@ var RUNTIME_JS = String.raw`
   const notesTime = document.getElementById('notesTime');
   const rail = document.getElementById('rail');
   const counter = document.getElementById('counter');
+  const body = document.body;
+  const embedded = window.parent !== window;
 
   slides.forEach((s, i) => {
     const b = document.createElement('button');
@@ -1058,27 +2429,72 @@ var RUNTIME_JS = String.raw`
   });
   const dots = [...dotsWrap.children];
 
-  let idx = 0;
-  function setActive(i) {
+  // ---------- progressive reveal ----------
+  const buildItems = slides.map((s) => [...s.querySelectorAll('[data-build] .b-item')]);
+  const shown = slides.map((_, i) => buildItems[i].length); // start fully shown until entered forwards
+  function paintBuild(i) {
+    buildItems[i].forEach((el, j) => el.classList.toggle('b-hidden', j >= shown[i]));
+  }
+
+  // ---------- media (video / embed) ----------
+  function mountMedia(slide) {
+    slide.querySelectorAll('.media-frame[data-media-src]').forEach((f) => {
+      if (f.querySelector('iframe') || !navigator.onLine) return;
+      const ifr = document.createElement('iframe');
+      ifr.src = f.dataset.mediaSrc;
+      ifr.title = f.dataset.mediaTitle || 'Embedded content';
+      ifr.loading = 'eager';
+      ifr.referrerPolicy = 'strict-origin-when-cross-origin';
+      ifr.setAttribute('sandbox', 'allow-scripts allow-same-origin allow-forms allow-popups allow-presentation');
+      if (f.dataset.mediaKind === 'video') {
+        ifr.allow = 'autoplay; encrypted-media; picture-in-picture; fullscreen';
+        ifr.allowFullscreen = true;
+      }
+      f.appendChild(ifr);
+      f.classList.add('live');
+    });
+  }
+  function unmountMedia(slide) {
+    slide.querySelectorAll('.media-frame.live').forEach((f) => {
+      f.querySelector('iframe')?.remove();
+      f.classList.remove('live');
+    });
+  }
+
+  // ---------- before / after ----------
+  deck.querySelectorAll('.compare').forEach((c) => {
+    const r = c.querySelector('.cmp-range');
+    r.addEventListener('input', () => c.style.setProperty('--pos', r.value + '%'));
+    r.addEventListener('keydown', (e) => e.stopPropagation());
+  });
+
+  // ---------- active slide ----------
+  let idx = -1;
+  function setActive(i, fromKeys) {
+    if (i === idx) return;
+    const prev = idx;
     idx = i;
+    if (prev >= 0) unmountMedia(slides[prev]);
+    if (!fromKeys) shown[i] = buildItems[i].length; // arriving by scroll or jump shows everything
+    paintBuild(i);
+    mountMedia(slides[i]);
     dots.forEach((d, j) => d.setAttribute('aria-current', j === i ? 'true' : 'false'));
-    const s = slides[i];
-    const track = s.getAttribute('data-track');
+    const track = slides[i].getAttribute('data-track');
     rail.style.background = track === 'build' ? 'var(--teal)' : track === 'neutral' ? 'var(--navy)' : 'var(--red)';
     counter.textContent = (i + 1) + ' / ' + slides.length;
-    if (notes.classList.contains('open')) {
-      const n = NOTES[i] || {};
-      notesBody.innerHTML = n.html || '<p><i>No notes for this slide.</i></p>';
-      notesTime.textContent = n.time || '';
-    }
-    // Sandboxed or srcdoc frames may refuse history access; the deep link is optional.
+    if (notes?.classList.contains('open')) fillNotes();
     try {
       if (location.hash !== '#slide-' + (i + 1)) history.replaceState(null, '', '#slide-' + (i + 1));
     } catch (_) {}
-    if (window.parent !== window) window.parent.postMessage({ type: 'classic-slides:slide', index: i, count: slides.length }, '*');
+    if (embedded) window.parent.postMessage({ type: 'classic-slides:slide', index: i, count: slides.length }, '*');
+    presenterSync();
+  }
+  function fillNotes() {
+    const n = NOTES[idx] || {};
+    notesBody.innerHTML = n.html || '<p><i>No notes for this slide.</i></p>';
+    notesTime.textContent = n.time || '';
   }
 
-  // Current slide comes from the scroll position, the single source of truth.
   const clamp = (n) => Math.max(0, Math.min(slides.length - 1, n));
   const currentIndex = () => clamp(Math.round(deck.scrollTop / deck.clientHeight));
   function updateRail() {
@@ -1087,53 +2503,232 @@ var RUNTIME_JS = String.raw`
   }
 
   let ticking = false;
+  let jumping = false;
   deck.addEventListener('scroll', () => {
     if (ticking) return;
     ticking = true;
     requestAnimationFrame(() => {
       ticking = false;
       updateRail();
-      const i = currentIndex();
-      if (i !== idx) setActive(i);
+      if (!jumping) setActive(currentIndex());
     });
   }, { passive: true });
 
   // Scroll the deck element itself; scrolling the slide into view would also move an embedding page.
-  function go(n, instant) {
+  function go(n, instant, fromKeys) {
     const t = clamp(n);
-    deck.scrollTo({ top: t * deck.clientHeight, behavior: instant ? 'auto' : 'smooth' });
-    setActive(t);
+    jumping = true;
+    // 'auto' would inherit the CSS smooth scrolling; jumps must really be instant.
+    deck.scrollTo({ top: t * deck.clientHeight, behavior: instant || window.matchMedia?.('(prefers-reduced-motion: reduce)').matches ? 'instant' : 'smooth' });
+    setActive(t, fromKeys);
+    clearTimeout(go.t);
+    // Ignore scroll events until the programmatic scroll settles.
+    go.t = setTimeout(() => { jumping = false; }, instant ? 80 : 1200);
+  }
+  deck.addEventListener('scrollend', () => {
+    if (!jumping) return;
+    clearTimeout(go.t);
+    jumping = false;
+  });
+
+  // next/prev step through build items first, then move between slides.
+  // Entering a slide forwards starts its build from zero; going back shows it complete.
+  function next() {
+    if (idx < 0) return;
+    if (shown[idx] < buildItems[idx].length) { shown[idx]++; paintBuild(idx); presenterSync(); return; }
+    if (idx === slides.length - 1) { if (loop) { shown[0] = 0; go(0, true, true); } return; }
+    shown[idx + 1] = 0;
+    go(idx + 1, false, true);
+  }
+  function prev() {
+    if (idx < 0) return;
+    if (buildItems[idx].length && shown[idx] > 0) { shown[idx]--; paintBuild(idx); presenterSync(); return; }
+    const t = clamp(idx - 1);
+    shown[t] = buildItems[t].length;
+    go(t, false, true);
   }
 
-  // Embedders (editors, previews) can drive the deck: postMessage({ type: 'classic-slides:go', index }).
   window.addEventListener('message', (e) => {
     const d = e.data;
     if (!d || typeof d !== 'object') return;
+    if (pw && e.source === pw && d.type === 'classic-slides:presenter-ready' && d.channel === presenterChannel && e.ports[0]) {
+      presenterPort?.close();
+      presenterPort = e.ports[0];
+      presenterPort.onmessage = (event) => {
+        const command = event.data;
+        if (command?.type === 'classic-slides:presenter-refresh') presenterSync();
+        else if (command?.type === 'classic-slides:presenter-key' && typeof command.key === 'string') {
+          onKey({ key: command.key, preventDefault() {} });
+        }
+      };
+      presenterSync();
+      return;
+    }
+    if (!embedded || e.source !== window.parent) return;
     if (d.type === 'classic-slides:go' && Number.isInteger(d.index)) go(d.index, true);
-    else if (d.type === 'classic-slides:notes') { if (notes.classList.contains('open') !== !!d.open) toggleNotes(); }
+    else if (d.type === 'classic-slides:notes') { if (notes && notes.classList.contains('open') !== !!d.open) toggleNotes(); }
   });
 
-  document.addEventListener('keydown', (e) => {
+  function onKey(e) {
     if (e.metaKey || e.ctrlKey || e.altKey) return;
-    if (['ArrowDown', 'ArrowRight', 'PageDown', ' '].includes(e.key)) { e.preventDefault(); go(idx + 1); }
-    else if (['ArrowUp', 'ArrowLeft', 'PageUp'].includes(e.key)) { e.preventDefault(); go(idx - 1); }
-    else if (e.key === 'Home') { e.preventDefault(); go(0); }
-    else if (e.key === 'End') { e.preventDefault(); go(slides.length - 1); }
-    else if (e.key.toLowerCase() === 'n') toggleNotes();
-    else if (e.key.toLowerCase() === 'f') toggleFs();
-  });
+    const k = e.key;
+    if (overview && k === 'Escape') { e.preventDefault(); closeOverview(); return; }
+    if (overview && k === 'Tab') {
+      const buttons = [...overview.querySelectorAll('button')];
+      const first = buttons[0], last = buttons[buttons.length - 1];
+      if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last?.focus(); }
+      else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first?.focus(); }
+      return;
+    }
+    if (e.target?.closest?.('a,button,input,textarea,select,[contenteditable]:not([contenteditable="false"]),[role="button"],[role="slider"]')) return;
+    if (overview) return;
+    if (['ArrowDown', 'ArrowRight', 'PageDown', ' ', 'Enter'].includes(k)) { e.preventDefault(); next(); }
+    else if (['ArrowUp', 'ArrowLeft', 'PageUp', 'Backspace'].includes(k)) { e.preventDefault(); prev(); }
+    else if (k === 'Home') { e.preventDefault(); go(0); }
+    else if (k === 'End') { e.preventDefault(); go(slides.length - 1); }
+    else if (k.toLowerCase() === 'n') toggleNotes();
+    else if (k.toLowerCase() === 'f') toggleFs();
+    else if (k.toLowerCase() === 'p') openPresenter();
+    else if (k.toLowerCase() === 'o') toggleOverview();
+    else return;
+    wake();
+  }
+  document.addEventListener('keydown', onKey);
 
-  function toggleNotes() { notes.classList.toggle('open'); if (notes.classList.contains('open')) setActive(idx); }
-  document.getElementById('notesBtn').addEventListener('click', toggleNotes);
+  // Shared links may render without speaker notes: no panel, no presenter window.
+  function toggleNotes() { if (!notes) return; notes.classList.toggle('open'); if (notes.classList.contains('open')) fillNotes(); }
+  document.getElementById('notesBtn')?.addEventListener('click', toggleNotes);
   function toggleFs() {
     if (!document.fullscreenElement) document.documentElement.requestFullscreen?.();
     else document.exitFullscreen?.();
   }
 
+  // ---------- idle chrome ----------
+  let idleT;
+  function wake() {
+    body.classList.remove('idle');
+    clearTimeout(idleT);
+    idleT = setTimeout(() => body.classList.add('idle'), 2800);
+  }
+  document.addEventListener('mousemove', wake, { passive: true });
+
+  // ---------- overview (O) ----------
+  let overview = null;
+  let overviewFocus = null;
+  function scaledClone(i, width) {
+    const wrap = document.createElement('div');
+    wrap.className = 'ov-thumb';
+    const inner = slides[i].cloneNode(true);
+    inner.removeAttribute('id');
+    inner.querySelectorAll('iframe').forEach((f) => f.remove());
+    inner.querySelectorAll('.media-frame.live').forEach((f) => f.classList.remove('live'));
+    inner.querySelectorAll('.b-hidden').forEach((el) => el.classList.remove('b-hidden'));
+    inner.style.width = '1280px';
+    inner.style.height = '720px';
+    inner.style.transform = 'scale(' + width / 1280 + ')';
+    inner.style.transformOrigin = '0 0';
+    inner.style.position = 'absolute';
+    inner.style.pointerEvents = 'none';
+    wrap.style.width = width + 'px';
+    wrap.style.height = (width * 9) / 16 + 'px';
+    wrap.appendChild(inner);
+    return wrap;
+  }
+  function toggleOverview() { overview ? closeOverview() : openOverview(); }
+  function openOverview() {
+    overviewFocus = document.activeElement;
+    overview = document.createElement('div');
+    overview.className = 'overview';
+    overview.setAttribute('role', 'dialog');
+    overview.setAttribute('aria-modal', 'true');
+    overview.setAttribute('aria-label', 'All slides');
+    const w = Math.min(300, Math.floor((window.innerWidth - 96) / 4) - 16);
+    slides.forEach((_, i) => {
+      const b = document.createElement('button');
+      b.className = 'ov-item' + (i === idx ? ' ov-current' : '');
+      b.setAttribute('aria-label', 'Go to slide ' + (i + 1));
+      b.appendChild(scaledClone(i, w));
+      const n = document.createElement('span');
+      n.textContent = String(i + 1);
+      b.appendChild(n);
+      b.addEventListener('click', () => { closeOverview(); go(i, true); });
+      overview.appendChild(b);
+    });
+    body.appendChild(overview);
+    const cur = overview.querySelector('.ov-current');
+    if (cur) { overview.scrollTop = cur.offsetTop - overview.clientHeight / 2 + cur.clientHeight / 2; cur.focus(); }
+  }
+  function closeOverview() { overview?.remove(); overview = null; overviewFocus?.focus(); overviewFocus = null; }
+
+  // ---------- presenter window (P) ----------
+  let pw = null;
+  let presenterPort = null;
+  let presenterChannel = '';
+  let presenterUrl = '';
+  const started = Date.now();
+  function openPresenter() {
+    if (!notes) return;
+    if (pw && !pw.closed) { pw.focus(); return; }
+    presenterPort?.close();
+    presenterPort = null;
+    if (presenterUrl) URL.revokeObjectURL(presenterUrl);
+    presenterChannel = Array.from(crypto.getRandomValues(new Uint8Array(24)), (n) => n.toString(16).padStart(2, '0')).join('');
+    const styles = [...document.querySelectorAll('style')].map((s) => s.outerHTML).join('');
+    const html = '<!doctype html><html><head><meta charset="utf-8"><meta name="presenter-channel" content="' + presenterChannel + '"><title>Presenter</title>' + styles +
+      '</head><body class="presenter"><div class="pv-main"><div class="pv-cur"></div><div class="pv-side"><div class="pv-label">Next</div><div class="pv-next"></div>' +
+      '<div class="pv-clock"><b class="pv-elapsed">0:00</b><span class="pv-time"></span><span class="pv-count"></span></div></div></div>' +
+      '<div class="pv-notes"><div class="pv-label">Notes <span class="pv-cue"></span></div><div class="pv-notes-body notes__body"></div></div><script>' + runtimeSource + '<' + '/script></body></html>';
+    presenterUrl = URL.createObjectURL(new Blob([html], { type: 'text/html' }));
+    pw = window.open(presenterUrl, '_blank', 'width=1200,height=760');
+    if (!pw) { URL.revokeObjectURL(presenterUrl); presenterUrl = ''; }
+  }
+  function presenterSync() {
+    if (!pw || pw.closed || !presenterPort || idx < 0) return;
+    const current = scaledClone(idx, 760);
+    buildItems[idx].forEach((_, j) => {
+      if (j >= shown[idx]) current.querySelectorAll('[data-build] .b-item')[j]?.classList.add('b-dim');
+    });
+    const n = NOTES[idx] || {};
+    const steps = buildItems[idx].length ? ' · step ' + shown[idx] + '/' + buildItems[idx].length : '';
+    presenterPort.postMessage({
+      type: 'classic-slides:presenter-state', title: document.title, started,
+      current: current.outerHTML,
+      next: idx + 1 < slides.length ? scaledClone(idx + 1, 360).outerHTML : 'End of deck',
+      notes: n.html || '<p><i>No notes for this slide.</i></p>', cue: n.time || '',
+      count: 'Slide ' + (idx + 1) + ' of ' + slides.length + steps,
+    });
+  }
+  window.addEventListener('beforeunload', () => {
+    presenterPort?.close();
+    if (pw && !pw.closed) pw.close();
+    if (presenterUrl) URL.revokeObjectURL(presenterUrl);
+  });
+
+  // ---------- kiosk ----------
+  const km = /[?&]kiosk=(\d+)/.exec(location.search);
+  const autoAdvance = km ? Number(km[1]) : Number(body.dataset.autoAdvance || 0);
+  const loop = !!km || body.hasAttribute('data-loop');
+  if (autoAdvance >= 3 && (!embedded || body.hasAttribute('data-embedded-kiosk'))) {
+    body.classList.add('kiosk');
+    setInterval(() => {
+      shown[idx] = buildItems[idx].length;
+      if (idx === slides.length - 1) { if (loop) go(0, true); }
+      else go(idx + 1, true);
+    }, autoAdvance * 1000);
+  }
+
+  // ---------- start ----------
   const m = /^#slide-(\d+)$/.exec(location.hash);
-  const initial = m ? Number(m[1]) - 1 : Number(document.body.dataset.initialSlide || 0);
-  if (initial > 0) requestAnimationFrame(() => go(initial, true));
+  const initial = m ? Number(m[1]) - 1 : Number(body.dataset.initialSlide || 0);
+  // The script runs at the end of <body>, so layout exists; jump synchronously.
+  if (initial > 0) go(initial, true);
   else setActive(0);
+  window.addEventListener('online', () => mountMedia(slides[idx]));
+  window.addEventListener('hashchange', () => {
+    const h = /^#slide-(\d+)$/.exec(location.hash);
+    if (h && Number(h[1]) - 1 !== idx) go(Number(h[1]) - 1, true);
+  });
+  wake();
 })();
 `;
 
@@ -1141,13 +2736,14 @@ var RUNTIME_JS = String.raw`
 var DECK_CSS = String.raw`
 *{box-sizing:border-box}
 html{scroll-behavior:smooth}
-@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
+@media (prefers-reduced-motion:reduce){html,.deck{scroll-behavior:auto}}
 body{margin:0;font-family:var(--font-body);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
 a{color:var(--teal)}
 img{display:block;max-width:100%}
 
 /* ---------- deck + slide frame ---------- */
 .deck{height:100vh;overflow-y:scroll;scroll-snap-type:y mandatory;scroll-behavior:smooth}
+@media (prefers-reduced-motion:reduce){.deck{scroll-behavior:auto}}
 .slide{height:100vh;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;flex-direction:column;justify-content:center;
   padding:clamp(24px,5.5vh,76px) clamp(28px,8vw,116px);overflow:hidden;
   background:linear-gradient(var(--grid) 1px,transparent 1px) 0 0/100% 46px,linear-gradient(90deg,var(--grid) 1px,transparent 1px) 0 0/46px 100%,var(--paper)}
@@ -1446,6 +3042,247 @@ img.natural,.media img.natural,.photo-grid img.natural{width:auto;max-width:min(
   .rail,.hud,.dots,.notes,.hint{display:none!important}
 }
 `;
+var DECK_CSS_EXTRA = String.raw`
+/* ---------- brand logo images ---------- */
+.logo--word .logo-word{font-weight:700;letter-spacing:.01em}
+.logo--img img{height:2.1em;width:auto;max-width:14em;object-fit:contain}
+.logo--img .logo-dark{display:none}
+.solid .logo--img .logo-light{display:none}
+.solid .logo--img .logo-dark{display:inline-block}
+
+/* ---------- background photos ---------- */
+.slide.has-bg{background:var(--overlay),var(--bg-img) center/cover no-repeat}
+.slide.overlay-dark{--overlay:linear-gradient(100deg,hsl(196 100% 6% / .78),hsl(196 100% 8% / .45))}
+.slide.overlay-brand{--overlay:linear-gradient(100deg,color-mix(in srgb,var(--navy) 86%,transparent),color-mix(in srgb,var(--navy) 55%,transparent))}
+.slide.overlay-light{--overlay:linear-gradient(100deg,hsl(40 20% 98% / .92),hsl(40 20% 98% / .7))}
+.slide.has-bg.solid .lead{color:#fff}
+
+/* ---------- footer, hidden ---------- */
+.slide-foot{position:absolute;left:clamp(28px,8vw,116px);right:clamp(28px,8vw,116px);bottom:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-faint);pointer-events:none}
+.slide.has-step .slide-foot{left:clamp(92px,10vw,168px)}
+.slide-foot .foot-l{display:flex;align-items:center;gap:16px}
+.slide-foot .foot-l>span+span::before{content:"·";margin-right:16px}
+.slide-foot .foot-logo .logo{font-size:12px}
+.slide-foot .foot-n{font-weight:700;color:var(--ink-soft)}
+.slide.solid .slide-foot,.slide.solid .slide-foot .foot-n{color:hsl(0 0% 100% / .72)}
+.slide.is-hidden>.slide__inner{opacity:.45}
+.hidden-badge{position:absolute;top:14px;right:18px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:var(--ink);color:#fff;padding:4px 8px;border-radius:4px}
+
+/* ---------- progressive reveal ---------- */
+[data-build] .b-item{transition:opacity .35s ease,transform .35s ease}
+[data-build] .b-item.b-hidden{opacity:0;transform:translateY(10px)}
+.b-dim{opacity:.28!important;transform:none!important}
+@media (prefers-reduced-motion:reduce){[data-build] .b-item{transition:none}}
+
+/* ---------- stats trends ---------- */
+.stat .trend{display:inline-block;margin:6px 0 0;font-family:var(--font-mono);font-style:normal;font-size:13px;font-weight:700}
+.trend--good{color:var(--good)}
+.trend--bad{color:var(--red)}
+.trend--flat{color:var(--ink-faint)}
+.stat .spark{display:block;width:100%;max-width:140px;height:32px;margin-top:8px}
+.spark polyline{fill:none;stroke:var(--red);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
+.spark circle{fill:var(--red)}
+.slide[data-track="build"] .spark polyline{stroke:var(--teal)}
+.slide[data-track="build"] .spark circle{fill:var(--teal)}
+.slide[data-track="neutral"] .spark polyline{stroke:var(--navy)}
+.slide[data-track="neutral"] .spark circle{fill:var(--navy)}
+
+/* ---------- chart ---------- */
+.chart-fig{margin:8px 0 0}
+.chart-fig svg{display:block;width:100%;height:auto;max-height:56vh}
+.chart-split{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(20px,3vw,44px);align-items:center}
+@media (max-width:840px){.chart-split{grid-template-columns:1fr}}
+.insights ul.clean li{font-size:clamp(16px,1.7vw,21px)}
+.source{margin-top:6px;font-family:var(--font-mono);font-size:11.5px;color:var(--ink-faint)}
+.slide.solid .chart-fig{background:#fff;border-radius:10px;padding:14px}
+
+/* ---------- table ---------- */
+.table-wrap{margin-top:14px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
+.data-table{width:100%;border-collapse:collapse;font-size:clamp(14px,1.45vw,18px);font-variant-numeric:tabular-nums}
+.data-table th,.data-table td{padding:12px 18px;border-bottom:1px solid var(--line-faint);color:var(--ink-soft)}
+.data-table thead th{background:var(--paper-3);font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
+.data-table tbody th{font-weight:600;color:var(--ink)}
+.data-table tbody tr:nth-child(even){background:hsl(60 11% 98%)}
+.data-table .al-left{text-align:left}.data-table .al-center{text-align:center}.data-table .al-right{text-align:right}
+.data-table .hl-row th,.data-table .hl-row td{background:var(--red-soft);color:var(--ink);font-weight:600}
+.data-table .hl-col{background:color-mix(in srgb,var(--red-soft) 70%,transparent)}
+.data-table thead .hl-col{color:var(--red)}
+.data-table tfoot th,.data-table tfoot td{font-weight:700;color:var(--ink);border-top:2px solid var(--ink);border-bottom:0}
+.slide.solid .data-table th,.slide.solid .data-table td{color:var(--ink-soft)}
+.slide.solid .data-table tbody th,.slide.solid .data-table tfoot *{color:var(--ink)}
+
+/* ---------- flow ---------- */
+.flow{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:clamp(22px,2.6vw,40px)}
+.flow--horizontal{grid-template-columns:repeat(var(--n),minmax(0,1fr));align-items:stretch}
+.flow--vertical{max-width:720px;gap:34px}
+.align-center .flow--vertical{margin-left:auto;margin-right:auto}
+.flow-step{position:relative;display:flex;gap:14px;align-items:flex-start;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:18px 20px;box-shadow:var(--shadow);text-align:left}
+.flow-step h3{margin:0 0 4px;font-size:clamp(16px,1.6vw,20px);color:var(--ink)}
+.flow-step p{margin:0;font-size:clamp(13.5px,1.35vw,16px);line-height:1.45;color:var(--ink-soft)}
+.flow-n{flex:none;width:32px;height:32px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-mono);font-weight:700;display:flex;align-items:center;justify-content:center;font-size:14px}
+.slide[data-track="build"] .flow-n{background:var(--teal-fill)}
+.slide[data-track="neutral"] .flow-n{background:var(--navy)}
+.flow>li:not(:last-child)::after{content:"";position:absolute;background:var(--red);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 11h12.2l-4.6-4.6L13 5l7 7-7 7-1.4-1.4 4.6-4.6H4z'/%3E%3C/svg%3E") center/contain no-repeat}
+.flow--horizontal>li:not(:last-child)::after{width:24px;height:24px;right:calc(-1 * clamp(22px,2.6vw,40px) / 2 - 12px);top:calc(50% - 12px)}
+.flow--vertical>li:not(:last-child)::after{width:26px;height:26px;left:calc(50% - 13px);bottom:-31px;transform:rotate(90deg)}
+.slide[data-track="build"] .flow>li::after{background:var(--teal)}
+.flow-end{position:relative;display:flex;align-items:center;justify-content:center}
+.flow-end span{background:var(--red);color:#fff;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:12px 30px;border-radius:999px;font-size:clamp(14px,1.4vw,17px)}
+.slide.solid .flow-step h3{color:var(--ink)}
+.slide.solid .flow-step p{color:var(--ink-soft)}
+
+/* ---------- timeline ---------- */
+.timeline{margin-top:24px;display:grid;grid-template-columns:1fr;gap:14px}
+.tl-phases{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0 10px}
+.tl-phase{border-radius:8px 8px 0 0;padding:8px 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;border-bottom:3px solid}
+.tl-phase--0{background:var(--red-soft);color:var(--red);border-color:var(--red)}
+.tl-phase--1{background:var(--teal-soft);color:var(--teal);border-color:var(--teal)}
+.tl-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:10px;position:relative}
+.tl-items::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line)}
+.tl-item{position:relative;padding-top:30px;text-align:left}
+.tl-dot{position:absolute;top:2px;left:0;width:16px;height:16px;border-radius:50%;background:#fff;border:2.5px solid var(--line-strong)}
+.tl-in-0 .tl-dot,.tl-done .tl-dot{border-color:var(--red)}
+.tl-in-1 .tl-dot{border-color:var(--teal)}
+.tl-done .tl-dot{background:var(--red)}
+.tl-current .tl-dot{background:var(--red);border-color:var(--red);box-shadow:0 0 0 5px var(--red-soft);transform:scale(1.2)}
+.tl-date{display:block;font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-faint);margin-bottom:4px}
+.tl-item h3{margin:0 0 4px;font-size:clamp(14px,1.45vw,18px);line-height:1.2;color:var(--ink)}
+.tl-item p{margin:0;font-size:clamp(12.5px,1.2vw,14.5px);line-height:1.4;color:var(--ink-soft)}
+.tl-current h3{color:var(--red)}
+.slide.solid .tl-item h3{color:#fff}
+.slide.solid .tl-items::before{background:hsl(0 0% 100% / .35)}
+
+/* ---------- cycle ---------- */
+.cycle{position:relative;width:min(62vh,540px);aspect-ratio:1;margin:10px auto 0}
+.cycle-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
+.cycle-ring path{fill:none;stroke:var(--line-strong);stroke-width:.9}
+.cycle-ring marker path{fill:var(--line-strong);stroke:none}
+.cycle-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:var(--font-display);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--red);text-align:center;max-width:30%}
+.cycle-node{position:absolute;transform:translate(-50%,-50%);width:clamp(140px,15vw,200px);background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;padding:12px 14px;box-shadow:var(--shadow);text-align:center}
+.slide[data-track="build"] .cycle-node{border-top-color:var(--teal)}
+.cycle-node h3{margin:0 0 3px;font-size:clamp(15px,1.5vw,18px);color:var(--ink)}
+.cycle-node p{margin:0;font-size:clamp(12.5px,1.2vw,14px);line-height:1.35;color:var(--ink-soft)}
+
+/* ---------- hierarchy ---------- */
+.hierarchy{margin-top:16px;overflow:visible}
+.hierarchy ul{position:relative;display:flex;justify-content:center;gap:0;margin:0;padding:26px 0 0;list-style:none}
+.hierarchy>ul{padding-top:0}
+.hierarchy li{position:relative;display:flex;flex-direction:column;align-items:center;padding:26px 10px 0}
+.hierarchy>ul>li{padding-top:0}
+.hierarchy li::before,.hierarchy li::after{content:"";position:absolute;top:0;width:50%;height:26px;border-top:2px solid var(--line-strong)}
+.hierarchy li::before{right:50%}
+.hierarchy li::after{left:50%;border-left:2px solid var(--line-strong)}
+.hierarchy li:only-child::before,.hierarchy li:only-child::after{border-top:0}
+.hierarchy li:first-child::before,.hierarchy li:last-child::after{border-top:0}
+.hierarchy li:last-child::before{border-right:2px solid var(--line-strong)}
+.hierarchy li:last-child::after{border-left:0}
+.hierarchy>ul>li::before,.hierarchy>ul>li::after{display:none}
+.hierarchy ul ul::before{content:"";position:absolute;top:0;left:50%;height:26px;border-left:2px solid var(--line-strong)}
+.h-node{display:flex;align-items:center;gap:12px;background:var(--paper-2);border:1px solid var(--line);border-top:3px solid var(--red);border-radius:10px;padding:12px 16px;box-shadow:var(--shadow);text-align:left;min-width:150px;max-width:240px}
+.hierarchy>ul>li>.h-node{border-top-color:var(--navy)}
+.h-node .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
+.h-node h3{margin:0;font-size:clamp(14px,1.4vw,17px);color:var(--ink)}
+.h-node p{margin:2px 0 0;font-size:clamp(12px,1.15vw,13.5px);line-height:1.3;color:var(--ink-soft)}
+.slide.solid .hierarchy li::before,.slide.solid .hierarchy li::after,.slide.solid .hierarchy ul ul::before{border-color:hsl(0 0% 100% / .5)}
+
+/* ---------- matrix ---------- */
+.matrix{display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr auto;gap:10px;margin-top:12px;max-width:980px}
+.mx-y{grid-row:1;display:flex;flex-direction:column-reverse;justify-content:space-between;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:13px;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:.04em}
+.mx-y b,.mx-x b{color:var(--ink);font-family:var(--font-body);letter-spacing:.08em;text-transform:uppercase;font-size:12px}
+.mx-grid{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
+.mx-x{grid-column:2;display:flex;justify-content:space-between;font-size:13px;color:var(--ink-faint);font-family:var(--font-mono);letter-spacing:.04em}
+.mx-q{background:var(--paper-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);min-height:clamp(110px,17vh,170px);text-align:left}
+.mx-q h3{margin:0 0 8px;font-size:clamp(15px,1.5vw,19px);color:var(--ink)}
+.mx-q ul{margin:0;padding-left:18px;color:var(--ink-soft);font-size:clamp(13px,1.3vw,15.5px);line-height:1.5}
+.mx-hl{background:var(--red);border-color:var(--red)}
+.mx-hl h3,.mx-hl ul{color:#fff}
+
+/* ---------- tiers ---------- */
+.tiers{list-style:none;margin:18px auto 0;padding:0;display:flex;flex-direction:column;gap:8px;max-width:880px}
+.tiers li{display:grid;grid-template-columns:1fr minmax(160px,.55fr);align-items:center;gap:22px}
+.tier-bar{width:var(--w);justify-self:center;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 22px;border-radius:6px;color:#fff;background:color-mix(in srgb,var(--red) calc(100% - var(--i) * 14%),var(--navy))}
+.slide[data-track="build"] .tier-bar{background:color-mix(in srgb,var(--teal-fill) calc(100% - var(--i) * 14%),var(--navy))}
+.tier-label{font-weight:700;font-size:clamp(15px,1.55vw,19px)}
+.tier-bar b{color:#fff;font-family:var(--font-display);font-size:clamp(18px,2vw,26px)}
+.tier-note{margin:0;font-size:clamp(13px,1.3vw,15.5px);color:var(--ink-soft);text-align:left}
+.slide.solid .tier-note{color:hsl(0 0% 100% / .85)}
+
+/* ---------- image hotspots ---------- */
+.hs-layout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,40px);align-items:center}
+@media (max-width:840px){.hs-layout{grid-template-columns:1fr}}
+.hs-layout .diagram-shot{margin:0}
+.hs-wrap{position:relative;display:inline-block;max-width:100%}
+.hs-wrap img{display:block;max-height:62vh;width:auto;max-width:100%}
+.hs-mark{position:absolute;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 4px 10px rgba(0,0,0,.3)}
+.hs-legend{margin:0;padding:0;list-style:none;counter-reset:hs;display:flex;flex-direction:column;gap:12px;text-align:left}
+.hs-legend li{counter-increment:hs;position:relative;padding-left:42px;font-size:clamp(14px,1.45vw,17px);line-height:1.4;color:var(--ink-soft)}
+.hs-legend li::before{content:counter(hs);position:absolute;left:0;top:-2px;width:28px;height:28px;border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-mono);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center}
+.hs-legend b{display:block;color:var(--ink)}
+.slide.solid .hs-legend li{color:hsl(0 0% 100% / .85)}
+.slide.solid .hs-legend b{color:#fff}
+
+/* ---------- video / embed ---------- */
+.media-frame{position:relative;margin:8px auto 0;width:min(100%,calc(62vh * 16 / 9));aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--navy);box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}
+.media-frame.aspect-4x3{aspect-ratio:4/3;width:min(100%,calc(62vh * 4 / 3))}
+.media-frame.aspect-1x1{aspect-ratio:1;width:min(100%,62vh)}
+.media-frame.aspect-tall{aspect-ratio:9/14;width:min(100%,calc(64vh * 9 / 14))}
+.media-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.media-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:3}
+.media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:28px;background:linear-gradient(180deg,hsl(196 100% 8% / .25),hsl(196 100% 8% / .6));z-index:2}
+.media-frame.live .media-fallback{display:none}
+.play-badge{width:84px;height:84px;border-radius:50%;background:var(--red);color:#fff;font-size:34px;display:flex;align-items:center;justify-content:center;padding-left:6px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
+.media-qr{background:#fff;border-radius:12px;padding:12px;text-align:center;width:150px;box-shadow:var(--shadow)}
+.media-qr svg{width:100%;height:auto;display:block}
+.media-qr a{display:block;margin-top:8px;font-family:var(--font-mono);font-size:10.5px;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
+.media-open{position:absolute;right:10px;top:10px;z-index:4;font-family:var(--font-mono);font-size:11.5px;background:hsl(0 0% 100% / .92);color:var(--ink);padding:5px 9px;border-radius:6px;text-decoration:none;opacity:.85}
+.media-open:hover{opacity:1}
+.has-media .shot-cap{text-align:center}
+
+/* ---------- compare ---------- */
+.compare{position:relative;margin:8px auto 0;width:min(100%,calc(62vh * 16 / 10));aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:var(--shadow);user-select:none}
+.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
+.cmp-before-clip{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
+.cmp-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.4);pointer-events:none}
+.cmp-handle::after{content:"◀ ▶";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;color:var(--ink);font-size:11px;padding:8px 10px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow)}
+.cmp-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
+.cmp-label{position:absolute;bottom:12px;z-index:2;font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:hsl(196 100% 8% / .72);color:#fff;padding:5px 10px;border-radius:5px}
+.cmp-label--before{left:12px}
+.cmp-label--after{right:12px}
+
+/* ---------- chrome: idle, kiosk, overview, presenter ---------- */
+body.has-foot .hud,body.has-foot .hint{bottom:40px}
+.hud,.hint,.dots,.rail{transition:opacity .4s}
+body.idle .hud,body.idle .hint,body.idle .dots{opacity:0}
+body.kiosk .hud,body.kiosk .hint,body.kiosk .dots{display:none}
+body.kiosk .deck{cursor:none}
+.overview{position:fixed;inset:0;z-index:80;background:hsl(196 100% 6% / .94);display:flex;flex-wrap:wrap;align-content:flex-start;gap:16px;padding:40px 48px;overflow-y:auto}
+.ov-item{position:relative;padding:0;border:2px solid transparent;border-radius:8px;background:none;cursor:pointer}
+.ov-item:hover,.ov-item:focus-visible{border-color:#fff;outline:0}
+.ov-current{border-color:var(--red)}
+.ov-thumb{position:relative;overflow:hidden;border-radius:6px;background:var(--paper)}
+.ov-item>span{position:absolute;left:6px;bottom:6px;font-family:var(--font-mono);font-size:11px;background:hsl(196 100% 6% / .8);color:#fff;padding:2px 6px;border-radius:4px}
+body.presenter{margin:0;height:100vh;display:grid;grid-template-rows:1fr auto;background:#0b1d24;color:#fff;font-family:var(--font-body)}
+.pv-main{display:grid;grid-template-columns:2fr 1fr;gap:20px;padding:20px;min-height:0}
+.pv-cur,.pv-next{position:relative;min-width:0}
+.pv-cur .ov-thumb,.pv-next .ov-thumb{box-shadow:0 10px 30px rgba(0,0,0,.4)}
+.pv-side{display:flex;flex-direction:column;gap:12px;min-width:0}
+.pv-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:hsl(0 0% 100% / .6)}
+.pv-clock{margin-top:auto;display:flex;flex-direction:column;gap:4px;font-family:var(--font-mono)}
+.pv-elapsed{font-size:46px;font-weight:700;color:#fff}
+.pv-time,.pv-count{color:hsl(0 0% 100% / .7);font-size:14px}
+.pv-notes{border-top:3px solid var(--red);padding:16px 24px 22px;max-height:34vh;overflow-y:auto;background:var(--navy)}
+.pv-notes .notes__body{font-size:19px;max-width:none}
+.pv-cue{margin-left:12px;color:hsl(0 0% 100% / .5)}
+
+@media print{
+  .slide-foot{position:absolute}
+  [data-build] .b-item.b-hidden{opacity:1;transform:none}
+  .media-frame iframe{display:none}
+  .media-frame .media-fallback{display:flex!important}
+  .cmp-before-clip{clip-path:inset(0 50% 0 0)}
+  .overview,.hidden-badge{display:none}
+}
+`;
 
 // src/render.ts
 var PREVIEW_SIZE = { width: 1280, height: 720 };
@@ -1466,39 +3303,146 @@ function collectImageSources(value, out = /* @__PURE__ */ new Set()) {
 }
 var CHECK_SVG = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12.5 L10 17.5 L19 7"/></svg>';
 async function renderDeck(input, options = {}) {
-  const result = validateDeck(input);
+  const result = validateDeck(input, { brands: options.brands });
   if (!result.ok || !result.deck) throw new DeckError(result.issues);
   const deck = result.deck;
+  const brand = resolveBrand(deck.brand, options.brands);
+  const visible = deck.slides.filter((sl) => options.includeHidden || !sl.hidden);
+  const qrUrls = /* @__PURE__ */ new Set();
+  const chartReqs = /* @__PURE__ */ new Map();
+  const extraImages = /* @__PURE__ */ new Set();
+  for (const slide of visible) {
+    const prep = getLayout(slide.layout).prepare?.(slide);
+    prep?.qr?.forEach((u) => qrUrls.add(u));
+    prep?.charts?.forEach((c) => chartReqs.set(c.key, c));
+    prep?.images?.forEach((u) => extraImages.add(u));
+  }
   const resolve = options.resolveImage ?? passThrough;
   const images = /* @__PURE__ */ new Map();
+  const brandImages = [brand.logo, brand.logoOnDark, brand.favicon].flatMap(
+    (i) => i ? [i.src] : []
+  );
+  const requiredImages = /* @__PURE__ */ new Set([...collectImageSources(visible), ...brandImages]);
+  const pendingImages = [.../* @__PURE__ */ new Set([...requiredImages, ...extraImages])];
+  let nextImage = 0;
+  let imageError;
+  let imageFailed = false;
   await Promise.all(
-    [...collectImageSources(deck.slides)].map(async (src) => images.set(src, await resolve(src)))
+    Array.from({ length: Math.min(4, pendingImages.length) }, async () => {
+      while (!imageFailed && nextImage < pendingImages.length) {
+        const src = pendingImages[nextImage++];
+        try {
+          images.set(src, await resolve(src));
+        } catch (error) {
+          if (requiredImages.has(src)) {
+            imageFailed = true;
+            imageError = error;
+            return;
+          }
+          images.set(src, src);
+        }
+      }
+    })
   );
+  if (imageFailed) throw imageError;
   const qrs = /* @__PURE__ */ new Map();
-  for (const slide of deck.slides) {
-    if (slide.layout === "qr" && !slide.image) {
-      const url = slide.url;
-      if (!url) continue;
-      qrs.set(
-        url,
-        await QRCode.toString(url, {
-          type: "svg",
-          margin: 0,
-          errorCorrectionLevel: "M",
-          color: { dark: "#002e3fff", light: "#ffffffff" }
-        })
-      );
-    }
+  await Promise.all(
+    [...qrUrls].map(async (url) => {
+      try {
+        qrs.set(
+          url,
+          await QRCode.toString(url, {
+            type: "svg",
+            margin: 0,
+            errorCorrectionLevel: "M",
+            color: { dark: "#002e3fff", light: "#ffffffff" }
+          })
+        );
+      } catch {
+        throw new DeckError([
+          {
+            level: "error",
+            path: ["slides"],
+            message: "A QR code could not be generated. Shorten its URL and try again."
+          }
+        ]);
+      }
+    })
+  );
+  const charts = /* @__PURE__ */ new Map();
+  for (const [key, req] of chartReqs) {
+    charts.set(
+      key,
+      await renderChartSvg(req.spec, {
+        width: req.width,
+        height: req.height,
+        palette: brand.stock ? void 0 : brand.palette
+      })
+    );
+  }
+  const imageBudget = options.maxInlineImageBytes;
+  if (imageBudget !== void 0 && (!Number.isFinite(imageBudget) || imageBudget < 0)) {
+    throw new RangeError("maxInlineImageBytes must be a finite nonnegative number.");
   }
+  let emittedImageBytes = 0;
+  let imagePath = ["brand"];
+  const imageSizes = /* @__PURE__ */ new Map();
+  const warnedImages = /* @__PURE__ */ new Set();
+  const image2 = (src, path = imagePath) => {
+    const resolved = images.get(src) ?? src;
+    if (imageBudget === void 0 || !/^data:/i.test(resolved)) return resolved;
+    let bytes = imageSizes.get(resolved);
+    if (bytes === void 0) {
+      bytes = escapedImageBytes(resolved);
+      imageSizes.set(resolved, bytes);
+    }
+    if (emittedImageBytes + bytes <= imageBudget) {
+      emittedImageBytes += bytes;
+      return resolved;
+    }
+    if (/^https:\/\//i.test(src)) {
+      if (!warnedImages.has(src)) {
+        warnedImages.add(src);
+        result.issues.push({
+          level: "warning",
+          path,
+          message: "An image remains at its original HTTPS URL because the inline image budget was reached."
+        });
+      }
+      return src;
+    }
+    throw new DeckError([
+      {
+        level: "error",
+        path,
+        message: "This embedded image exceeds the rendered inline image budget. Use smaller images or an HTTPS image URL."
+      }
+    ]);
+  };
+  const icon = brand.favicon ? image2(brand.favicon.src, ["brand", "favicon"]) : image2(
+    favicon(brand, (src) => images.get(src) ?? src),
+    ["brand", "favicon"]
+  );
+  const logo = () => deck.settings.logo === "none" ? "" : brandLogo(brand, image2);
   const ctx = {
     deck,
-    image: (src) => images.get(src) ?? src,
-    qr: (url) => qrs.get(url) ?? ""
+    image: image2,
+    qr: (url) => qrs.get(url) ?? "",
+    chart: (key) => charts.get(key) ?? "",
+    logo,
+    brandName: brand.name
   };
   const sections = [];
   const notes = [];
   const slideMap = [];
+  const footerText = [brand.footer, deck.settings.confidential].filter(Boolean);
+  const wantFooter = deck.settings.slideNumbers || footerText.length > 0 || deck.settings.logo === "all";
   deck.slides.forEach((slide, i) => {
+    if (slide.hidden && !options.includeHidden) {
+      slideMap.push([]);
+      return;
+    }
+    imagePath = ["slides", i];
     const layout = getLayout(slide.layout);
     const rendered = layout.render(slide, ctx);
     const list = Array.isArray(rendered) ? rendered : [rendered];
@@ -1508,6 +3452,14 @@ async function renderDeck(input, options = {}) {
     list.forEach((r, j) => {
       const classes = ["slide", `layout-${layout.name}`, ...r.classes ?? []];
       if (bg !== "paper") classes.push("solid", `bg-${bg}`);
+      let style = "";
+      if (slide.backgroundImage) {
+        const overlay = slide.overlay ?? "dark";
+        classes.push("has-bg", `overlay-${overlay}`);
+        if (overlay !== "light" && !classes.includes("solid")) classes.push("solid");
+        style = ` style="--bg-img:url(&quot;${escapeAttr(ctx.image(slide.backgroundImage.src))}&quot;)"`;
+      }
+      if (slide.hidden) classes.push("is-hidden");
       let chrome = "";
       if (slide.step && deck.journey) {
         classes.push("has-step");
@@ -1515,14 +3467,17 @@ async function renderDeck(input, options = {}) {
       }
       const strip = slide.showJourney && deck.journey ? roadmap(deck.journey.steps, slide.step, true) : "";
       const id = slide.id ? list.length > 1 ? `${slide.id}-${j + 1}` : slide.id : "";
+      const number = sections.length + 1;
+      const foot = wantFooter && layout.name !== "title" ? `<footer class="slide-foot" aria-hidden="true"><span class="foot-l">${deck.settings.logo === "all" ? `<span class="foot-logo">${logo()}</span>` : ""}${footerText.map((t) => `<span>${escapeHtml(t)}</span>`).join("")}</span>${deck.settings.slideNumbers ? `<span class="foot-n">${number}</span>` : ""}</footer>` : "";
       sections.push(
-        `<section class="${classes.join(" ")}" data-track="${escapeAttr(track)}" data-index="${i}"${id ? ` id="${escapeAttr(id)}"` : ""} aria-label="Slide ${sections.length + 1}">${chrome}<div class="slide__inner">${strip}${r.html}</div></section>`
+        `<section class="${classes.join(" ")}" data-track="${escapeAttr(track)}" data-index="${i}"${id ? ` id="${escapeAttr(id)}"` : ""}${style} aria-label="Slide ${number}">${chrome}<div class="slide__inner">${strip}${r.html}</div>${foot}${slide.hidden ? '<span class="hidden-badge">Hidden</span>' : ""}</section>`
       );
       notes.push({ html: prose(r.notes ?? slide.notes), time: r.time ?? slide.time });
     });
   });
+  const withNotes = options.speakerNotes !== false;
   const json = (v) => JSON.stringify(v).replace(/</g, "\\u003c");
-  const stripData = (_, v) => typeof v === "string" && v.startsWith("data:") ? "(embedded)" : v;
+  const stripData = (key, v) => !withNotes && key === "notes" ? void 0 : typeof v === "string" && /^data:/i.test(v) ? "(embedded)" : v;
   const source = options.embedSource === false ? "" : `<script type="application/json" id="deck-source">${JSON.stringify(deck, stripData).replace(/</g, "\\u003c")}</script>
 `;
   const html = `<!doctype html>
@@ -1530,27 +3485,74 @@ async function renderDeck(input, options = {}) {
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
-<title>${escapeHtml(deck.title)} &middot; Classic Homes</title>
+<title>${escapeHtml(deck.title)} &middot; ${escapeHtml(brand.name)}</title>
+<link rel="icon" href="${escapeAttr(icon)}">
 ${deck.description ? `<meta name="description" content="${escapeAttr(deck.description)}">
 ` : ""}<meta name="generator" content="@classic-homes/slides">
 <style id="brand-fonts">${fontsCss()}</style>
-<style>${tokensCss()}${DECK_CSS}</style>
+<style>${tokensCss(brand.stock ? void 0 : brand.palette)}${DECK_CSS}${DECK_CSS_EXTRA}</style>
 </head>
-<body${options.initialSlide ? ` data-initial-slide="${Math.max(0, Math.floor(options.initialSlide))}"` : ""}>
+<body${wantFooter ? ' class="has-foot"' : ""}${options.initialSlide ? ` data-initial-slide="${Math.max(0, Math.floor(options.initialSlide))}"` : ""}${deck.settings.autoAdvance ? ` data-auto-advance="${deck.settings.autoAdvance}"` : ""}${deck.settings.loop ? " data-loop" : ""}${options.allowEmbeddedKiosk ? " data-embedded-kiosk" : ""}>
 <div class="rail" id="rail"></div>
 <main class="deck" id="deck">
 ${sections.join("\n")}
 </main>
 <nav class="dots" id="dots" aria-label="Slide navigation"></nav>
-<div class="hud"><span class="counter" id="counter" aria-live="polite"></span><button class="btn" id="notesBtn" aria-label="Toggle speaker notes">&#9636; notes (N)</button></div>
-<div class="hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> or <kbd>Space</kbd> navigate &middot; <kbd>N</kbd> notes &middot; <kbd>F</kbd> fullscreen</div>
-<aside class="notes" id="notes" aria-live="polite"><div class="notes__head"><span class="tag">Speaker notes</span><span class="time" id="notesTime"></span></div><div class="notes__body" id="notesBody"></div></aside>
-<script type="application/json" id="deck-notes">${json(notes)}</script>
+${withNotes ? `<div class="hud"><span class="counter" id="counter" aria-live="polite"></span><button class="btn" id="notesBtn" aria-label="Toggle speaker notes">&#9636; notes (N)</button></div>
+<div class="hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> or <kbd>Space</kbd> navigate &middot; <kbd>N</kbd> notes &middot; <kbd>P</kbd> presenter &middot; <kbd>O</kbd> overview &middot; <kbd>F</kbd> fullscreen</div>
+<aside class="notes" id="notes" aria-live="polite"><div class="notes__head"><span class="tag">Speaker notes</span><span class="time" id="notesTime"></span></div><div class="notes__body" id="notesBody"></div></aside>` : `<div class="hud"><span class="counter" id="counter" aria-live="polite"></span></div>
+<div class="hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> or <kbd>Space</kbd> navigate &middot; <kbd>O</kbd> overview &middot; <kbd>F</kbd> fullscreen</div>`}
+<script type="application/json" id="deck-notes">${json(withNotes ? notes : [])}</script>
 ${source}<script>${RUNTIME_JS}</script>
 </body>
 </html>
 `;
-  return { html, deck, slideCount: sections.length, slideMap, warnings: result.issues };
+  return { html, deck, slideCount: sections.length, slideMap, warnings: result.issues, brand };
+}
+function escapedImageBytes(value) {
+  let bytes = 0;
+  for (let i = 0; i < value.length; i++) {
+    const code = value.codePointAt(i);
+    if (code === 38 || code === 39)
+      bytes += 5;
+    else if (code === 34)
+      bytes += 6;
+    else if (code === 60 || code === 62)
+      bytes += 4;
+    else if (code < 128) bytes++;
+    else if (code < 2048) bytes += 2;
+    else if (code <= 65535) bytes += 3;
+    else {
+      bytes += 4;
+      i++;
+    }
+  }
+  return bytes;
+}
+function brandLogo(brand, image2) {
+  if (brand.logo) {
+    const light = image2(brand.logo.src);
+    const dark = image2((brand.logoOnDark ?? brand.logo).src);
+    return `<span class="logo logo--img" role="img" aria-label="${escapeAttr(brand.name)}"><img class="logo-light" src="${escapeAttr(
+      light
+    )}" alt=""><img class="logo-dark" src="${escapeAttr(dark)}" alt=""></span>`;
+  }
+  if (brand.name === "Classic Homes") return LOGO_SVG;
+  return logoLockup(brand.name, brand.key === "classic-homes");
+}
+function favicon(brand, image2) {
+  if (brand.favicon) return image2(brand.favicon.src);
+  if (brand.key !== "classic-homes") {
+    const letter = (brand.name.match(/[A-Za-z0-9]/)?.[0] ?? "\u2022").toUpperCase();
+    const mono = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="7" fill="${brand.palette.primary}"/><text x="16" y="22.5" text-anchor="middle" font-family="Figtree,Arial,sans-serif" font-size="19" font-weight="700" fill="#fff">${letter}</text></svg>`;
+    return `data:image/svg+xml,${encodeURIComponent(mono)}`;
+  }
+  const colour = brand.stock ? "#c50f22" : brand.palette.primary;
+  const svg = LOGO_MARK_SVG.replace(
+    "<svg ",
+    `<svg xmlns="http://www.w3.org/2000/svg" fill="${colour}" `
+  ).replace(' aria-hidden="true"', "");
+  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
 }
 function extractDeckSource(html) {
   const m = /<script type="application\/json" id="deck-source">([\s\S]*?)<\/script>/.exec(html);
@@ -1567,7 +3569,7 @@ function fromZod(issue) {
   }
   return { level: "error", path: issue.path, message };
 }
-function validateDeck(input) {
+function validateDeck(input, options = {}) {
   const parsed = DeckSchema.safeParse(input);
   if (!parsed.success) {
     return { ok: false, issues: parsed.error.issues.map(fromZod) };
@@ -1578,6 +3580,18 @@ function validateDeck(input) {
   const seen = /* @__PURE__ */ new Set();
   deck.slides.forEach((slide, i) => {
     const layout = getLayout(slide.layout);
+    for (const url of layout.prepare?.(slide)?.qr ?? []) {
+      try {
+        if (url.length > 1e4) throw new Error("URL too long");
+        QRCode2.create(url, { errorCorrectionLevel: "M" });
+      } catch {
+        issues.push({
+          level: "error",
+          path: ["slides", i, "url"],
+          message: "This URL is too long for a QR code. Use a shorter URL."
+        });
+      }
+    }
     for (const issue of layout.lint?.(slide) ?? []) {
       issues.push({ ...issue, path: ["slides", i, ...issue.path] });
     }
@@ -1612,6 +3626,22 @@ function validateDeck(input) {
       });
     }
   });
+  const profile = deck.brand?.profile;
+  if (profile && ![CLASSIC_HOMES_BRAND, ...options.brands ?? []].some((b) => b.key === profile)) {
+    const known = [CLASSIC_HOMES_BRAND, ...options.brands ?? []].map((b) => b.key).join(", ");
+    issues.push({
+      level: "error",
+      path: ["brand", "profile"],
+      message: `Unknown brand profile "${profile}". Available: ${known}.`
+    });
+  }
+  if (deck.slides.every((sl) => sl.hidden)) {
+    issues.push({
+      level: "error",
+      path: ["slides"],
+      message: "Every slide is hidden; unhide at least one."
+    });
+  }
   if (deck.slides[0]?.layout !== "title") {
     issues.push({
       level: "warning",
@@ -1654,22 +3684,52 @@ function stringifyDeck(deck) {
 }
 
 export {
-  escapeHtml,
-  inline,
-  prose,
   baseSlide,
+  BrandPaletteSchema,
+  BrandProfileSchema,
+  DeckBrandSchema,
+  CLASSIC_HOMES_PALETTE,
+  CLASSIC_HOMES_BRAND,
+  resolveBrand,
+  checkPalette,
+  validateBrandProfile,
   PALETTE,
   LOGO_SVG,
+  logoLockup,
+  CHART_TYPES,
+  ChartSpec,
+  formatValue,
+  chartOption,
+  renderChartSvg,
+  describeChart,
+  escapeHtml,
+  inline,
+  prose,
+  parseVideoUrl,
+  videoEmbedUrl,
   LAYOUTS,
   getLayout,
+  LAYOUT_CATEGORY_ORDER,
+  LAYOUT_CATEGORIES,
+  findSlide,
+  newSlideId,
+  ensureSlideIds,
+  slideKey,
+  addSlide,
+  updateSlide,
+  moveSlide,
+  removeSlide,
+  outline,
+  SlideSchema,
+  DeckSettingsSchema,
+  DeckSchema,
+  deckEditorFields,
   commonSlideFields,
   layoutEditorInfo,
   allLayoutEditorInfo,
   PLACEHOLDER_IMAGE,
   isPlaceholderImage,
   blankSlide,
-  SlideSchema,
-  DeckSchema,
   validateDeck,
   formatPath,
   formatIssues,
@@ -1681,4 +3741,4 @@ export {
   parseDeckSource,
   stringifyDeck
 };
-//# sourceMappingURL=chunk-7FROOJCY.js.map
+//# sourceMappingURL=chunk-GXGDPBAR.js.map