@bendyline/squisq 2.3.3 → 2.4.0

package/dist/{chunk-GQNH7PLN.js → chunk-F2IEPSMA.js}

@@ -21,7 +21,7 @@ import {
   parseAsciiTimeline,
   pickAutoTemplate,
   profileBlockContents
-} from "./chunk-QWCFK5FN.js";
+} from "./chunk-CUYHFOFL.js";
 import {
   DEFAULT_THEME,
   FRONTMATTER_CUSTOM_TEMPLATES_KEY,
@@ -57,7 +57,7 @@ import {
   extractPlainText,
   readFrontmatterThemeId,
   walkMarkdownTree
-} from "./chunk-BCCXTMN5.js";
+} from "./chunk-O7JILDEF.js";
 import {
   resolveBlockTransition
 } from "./chunk-4VOD55SX.js";
@@ -423,6 +423,16 @@ var TEMPLATE_ALIASES = Object.freeze({
 function resolveTemplateName(name) {
   return TEMPLATE_ALIASES[name] ?? name;
 }
+var TABLE_FED_TEMPLATES = /* @__PURE__ */ new Set([
+  "dataTable",
+  "barChart",
+  "columnChart",
+  "pieChart",
+  "donutChart",
+  "lineChart",
+  "areaChart",
+  "scatterChart"
+]);
 var CONTAINER_TEMPLATES = /* @__PURE__ */ new Set(["diagram", "drawing", "layout"]);
 function isContainerTemplate(name) {
   return !!name && CONTAINER_TEMPLATES.has(resolveTemplateName(name));
@@ -949,7 +959,7 @@ function sectionHeader(input, context) {
 
 // src/doc/templates/contentBlock.ts
 function completeBodyText(context) {
-  return (context.block?.contents ?? []).map((node) => extractPlainText(node)).join("\n").trim();
+  return (context.block?.contents ?? []).filter((node) => !(node.type === "code" && node.lang?.trim().toLowerCase() === "mermaid")).map((node) => extractPlainText(node)).join("\n").trim();
 }
 function bodyFontSize(body, context) {
   const base = body.length > 1800 ? 18 : body.length > 1100 ? 21 : body.length > 650 ? 24 : 28;
@@ -2739,6 +2749,32 @@ function deriveTemplateInputs(templateName, headingText, contents, options = {})
       if (tableData) return { ...tableData, ...headingText ? { title: headingText } : {} };
       return placeholders ? { headers: ["Column"], rows: [["Data"]] } : null;
     }
+    case "barChart":
+    case "columnChart":
+    case "pieChart":
+    case "donutChart":
+    case "lineChart":
+    case "areaChart":
+    case "scatterChart": {
+      const tableData = extractTableFromContents(contents);
+      if (tableData) {
+        return {
+          headers: tableData.headers,
+          rows: tableData.rows,
+          ...headingText ? { title: headingText } : {}
+        };
+      }
+      return placeholders && !bodyText3.trim() ? {
+        headers: ["Quarter", "Revenue", "Costs"],
+        rows: [
+          ["Q1", "40", "28"],
+          ["Q2", "55", "31"],
+          ["Q3", "48", "30"],
+          ["Q4", "62", "35"]
+        ],
+        ...headingText ? { title: headingText } : {}
+      } : null;
+    }
     case "imageWithCaption": {
       const img = extractFirstImage(contents);
       if (!img) return placeholders ? { caption: headingText } : null;
@@ -5585,6 +5621,1019 @@ function makeCustomTemplateFn(def) {
   };
 }
 
+// src/doc/templates/chart/parse.ts
+var NUMERIC_COLUMN_THRESHOLD = 0.6;
+function parseCellNumber(raw) {
+  if (typeof raw !== "string") return null;
+  let text = raw.trim();
+  if (!text) return null;
+  let negative = false;
+  const accounting = /^\((.*)\)$/.exec(text);
+  if (accounting) {
+    negative = true;
+    text = accounting[1].trim();
+  }
+  text = text.replace(/^([+-]?)\s*[$€£¥]\s*/, "$1");
+  text = text.replace(/%$/, "").trim();
+  text = text.replace(/,/g, "");
+  if (/^[+-]?\d{1,3}(?: \d{3})+(?:\.\d+)?$/.test(text)) {
+    text = text.replace(/ /g, "");
+  }
+  if (!/^[+-]?(\d+\.?\d*|\.\d+)(e[+-]?\d+)?$/i.test(text)) return null;
+  const value = Number(text);
+  if (!Number.isFinite(value)) return null;
+  return negative ? -value : value;
+}
+function isNumericColumn(rows, colIndex) {
+  let nonEmpty = 0;
+  let numeric = 0;
+  for (const row of rows) {
+    const cell = (row[colIndex] ?? "").trim();
+    if (!cell) continue;
+    nonEmpty += 1;
+    if (parseCellNumber(cell) !== null) numeric += 1;
+  }
+  return numeric > 0 && numeric / Math.max(1, nonEmpty) >= NUMERIC_COLUMN_THRESHOLD;
+}
+function resolveColumnRef(ref, headers) {
+  const text = String(ref).trim();
+  if (!text) return null;
+  const lower = text.toLowerCase();
+  const byName = headers.findIndex((h) => h.trim().toLowerCase() === lower);
+  if (byName >= 0) return byName;
+  if (/^\d+$/.test(text)) {
+    const index = Number(text);
+    if (index < headers.length) return index;
+  }
+  return null;
+}
+function buildChartData(table, options = {}) {
+  const headers = Array.isArray(table.headers) ? table.headers : [];
+  const rows = Array.isArray(table.rows) ? table.rows : [];
+  if (headers.length === 0 || rows.length === 0) return null;
+  const warnings = [];
+  let labelIndex = 0;
+  if (options.labelColumn !== void 0 && String(options.labelColumn).trim() !== "") {
+    const resolved = resolveColumnRef(String(options.labelColumn), headers);
+    if (resolved === null) {
+      warnings.push(
+        `labelColumn "${options.labelColumn}" matches no column; using the first column`
+      );
+    } else {
+      labelIndex = resolved;
+    }
+  }
+  let valueIndexes = [];
+  const requested = (options.valueColumns ?? []).map((ref) => String(ref)).filter((ref) => ref.trim() !== "");
+  if (requested.length > 0) {
+    for (const ref of requested) {
+      const resolved = resolveColumnRef(ref, headers);
+      if (resolved === null) {
+        warnings.push(`valueColumns entry "${ref}" matches no column; skipped`);
+      } else if (!valueIndexes.includes(resolved)) {
+        valueIndexes.push(resolved);
+      }
+    }
+  } else {
+    valueIndexes = headers.map((_, index) => index).filter((index) => index !== labelIndex && isNumericColumn(rows, index));
+  }
+  if (valueIndexes.length === 0) return null;
+  return {
+    labels: rows.map((row) => (row[labelIndex] ?? "").trim()),
+    labelHeader: headers[labelIndex] ?? "",
+    labelNumbers: rows.map((row) => parseCellNumber(row[labelIndex] ?? "")),
+    series: valueIndexes.map((index) => ({
+      name: (headers[index] ?? `Column ${index + 1}`).trim() || `Column ${index + 1}`,
+      values: rows.map((row) => parseCellNumber(row[index] ?? ""))
+    })),
+    warnings
+  };
+}
+
+// src/doc/templates/chart/scale.ts
+function niceNum(range, round4) {
+  const exponent = Math.floor(Math.log10(range));
+  const fraction = range / 10 ** exponent;
+  let niceFraction;
+  if (round4) {
+    if (fraction < 1.5) niceFraction = 1;
+    else if (fraction < 3) niceFraction = 2;
+    else if (fraction < 7) niceFraction = 5;
+    else niceFraction = 10;
+  } else {
+    if (fraction <= 1) niceFraction = 1;
+    else if (fraction <= 2) niceFraction = 2;
+    else if (fraction <= 5) niceFraction = 5;
+    else niceFraction = 10;
+  }
+  return niceFraction * 10 ** exponent;
+}
+function niceTicks(min, max, targetCount = 5) {
+  let lo = Number.isFinite(min) ? min : 0;
+  let hi = Number.isFinite(max) ? max : 0;
+  if (lo > hi) [lo, hi] = [hi, lo];
+  if (lo === hi) {
+    const pad = lo === 0 ? 1 : niceNum(Math.abs(lo), true);
+    lo -= pad;
+    hi += pad;
+    if (min >= 0 && lo < 0) lo = 0;
+  }
+  const count = Math.max(2, targetCount);
+  const range = niceNum(hi - lo, false);
+  const step = niceNum(range / (count - 1), true);
+  const niceMin = Math.floor(lo / step) * step;
+  const niceMax = Math.ceil(hi / step) * step;
+  const ticks = [];
+  for (let tick = niceMin; tick <= niceMax + step * 1e-6; tick += step) {
+    ticks.push(Math.abs(tick) < step * 1e-6 ? 0 : Number(tick.toPrecision(12)));
+  }
+  return { ticks, niceMin, niceMax, step };
+}
+function formatChartValue(value, unit) {
+  if (!Number.isFinite(value)) return "\u2014";
+  const sign = value < 0 ? "-" : "";
+  const abs = Math.abs(value);
+  let text;
+  if (abs >= 1e6) {
+    text = `${sign}${trimTrailingZero((abs / 1e6).toFixed(1))}M`;
+  } else if (abs >= 1e3) {
+    text = `${sign}${trimTrailingZero((abs / 1e3).toFixed(abs >= 1e4 ? 0 : 1))}K`;
+  } else {
+    text = `${sign}${abs.toLocaleString("en-US", { maximumFractionDigits: 2 })}`;
+  }
+  return unit ? `${text} ${unit}` : text;
+}
+function trimTrailingZero(text) {
+  return text.replace(/\.0$/, "");
+}
+
+// src/doc/templates/chart/geometry.ts
+function round3(value) {
+  return Math.round(value * 100) / 100;
+}
+function pointOnCircle(cx, cy, r, deg) {
+  const rad = (deg - 90) * Math.PI / 180;
+  return { x: round3(cx + r * Math.cos(rad)), y: round3(cy + r * Math.sin(rad)) };
+}
+function arcPath(cx, cy, rOuter, rInner, startDeg, endDeg) {
+  let sweep = endDeg - startDeg;
+  if (sweep <= 0) return "";
+  if (sweep >= 359.9) sweep = 359.9;
+  const end = startDeg + sweep;
+  const largeArc = sweep > 180 ? 1 : 0;
+  const o1 = pointOnCircle(cx, cy, rOuter, startDeg);
+  const o2 = pointOnCircle(cx, cy, rOuter, end);
+  if (rInner <= 0) {
+    return [
+      `M ${round3(cx)} ${round3(cy)}`,
+      `L ${o1.x} ${o1.y}`,
+      `A ${round3(rOuter)} ${round3(rOuter)} 0 ${largeArc} 1 ${o2.x} ${o2.y}`,
+      "Z"
+    ].join(" ");
+  }
+  const i1 = pointOnCircle(cx, cy, rInner, startDeg);
+  const i2 = pointOnCircle(cx, cy, rInner, end);
+  return [
+    `M ${o1.x} ${o1.y}`,
+    `A ${round3(rOuter)} ${round3(rOuter)} 0 ${largeArc} 1 ${o2.x} ${o2.y}`,
+    `L ${i2.x} ${i2.y}`,
+    `A ${round3(rInner)} ${round3(rInner)} 0 ${largeArc} 0 ${i1.x} ${i1.y}`,
+    "Z"
+  ].join(" ");
+}
+function polylinePath(points) {
+  if (points.length === 0) return "";
+  return points.map((p, i) => `${i === 0 ? "M" : "L"} ${round3(p.x)} ${round3(p.y)}`).join(" ");
+}
+function areaPath(points, baselineY) {
+  if (points.length === 0) return "";
+  const open = polylinePath(points);
+  const first = points[0];
+  const last = points[points.length - 1];
+  return `${open} L ${round3(last.x)} ${round3(baselineY)} L ${round3(first.x)} ${round3(baselineY)} Z`;
+}
+
+// src/doc/templates/chart/layout.ts
+function computeChartFrame(options) {
+  const W = options.viewportWidth;
+  const H = options.viewportHeight;
+  const marginX = W * 0.06;
+  const marginY = H * 0.06;
+  const innerWidth = W - marginX * 2;
+  let cursor = marginY;
+  let titleBand;
+  if (options.hasTitle) {
+    titleBand = { x: marginX, y: cursor, width: innerWidth, height: options.titleFontSize * 2.2 };
+    cursor = titleBand.y + titleBand.height;
+  }
+  let tableBand;
+  let tableHeight = 0;
+  if (options.tableRowCount > 0) {
+    tableHeight = Math.min(H * 0.4, (options.tableRowCount + 1) * options.tableFontSize * 2.4);
+  }
+  const legendHeight = options.legendRows > 0 ? options.legendRows * options.legendRowHeight : 0;
+  const chartArea = {
+    x: marginX,
+    y: cursor,
+    width: innerWidth,
+    height: Math.max(40, H - marginY - cursor - legendHeight - tableHeight)
+  };
+  cursor = chartArea.y + chartArea.height;
+  let legendBand;
+  if (legendHeight > 0) {
+    legendBand = { x: marginX, y: cursor, width: innerWidth, height: legendHeight };
+    cursor += legendHeight;
+  }
+  if (tableHeight > 0) {
+    tableBand = { x: marginX, y: cursor, width: innerWidth, height: tableHeight };
+  }
+  const plot = {
+    x: chartArea.x + options.leftGutter,
+    y: chartArea.y,
+    width: Math.max(20, chartArea.width - options.leftGutter),
+    height: Math.max(20, chartArea.height - options.bottomGutter)
+  };
+  return { titleBand, chartArea, plot, legendBand, tableBand };
+}
+function stackSeries(series) {
+  const rowCount = series.reduce((max, s) => Math.max(max, s.values.length), 0);
+  const positive = new Array(rowCount).fill(0);
+  const negative = new Array(rowCount).fill(0);
+  return series.map(
+    (s) => Array.from({ length: rowCount }, (_, row) => {
+      const value = s.values[row];
+      if (value === null || value === void 0 || !Number.isFinite(value)) {
+        return { y0: positive[row], y1: positive[row] };
+      }
+      if (value >= 0) {
+        const y0 = positive[row];
+        positive[row] += value;
+        return { y0, y1: positive[row] };
+      }
+      const y1 = negative[row];
+      negative[row] += value;
+      return { y0: negative[row], y1 };
+    })
+  );
+}
+function layoutLegend(labels, fontSize, maxWidth) {
+  const swatchSize = fontSize * 0.9;
+  const gap = fontSize * 1.6;
+  const rowHeight = fontSize * 2;
+  const widths = labels.map(
+    (label) => swatchSize + fontSize * 0.5 + label.length * fontSize * 0.58
+  );
+  const rows = [];
+  let current = [];
+  let currentWidth = 0;
+  widths.forEach((width, index) => {
+    const extra = current.length > 0 ? gap : 0;
+    if (current.length > 0 && currentWidth + extra + width > maxWidth) {
+      rows.push(current);
+      current = [];
+      currentWidth = 0;
+    }
+    current.push(index);
+    currentWidth += (current.length > 1 ? gap : 0) + width;
+  });
+  if (current.length > 0) rows.push(current);
+  const items = [];
+  rows.forEach((rowIndexes, rowIndex) => {
+    const rowWidth = rowIndexes.reduce(
+      (sum, index, i) => sum + widths[index] + (i > 0 ? gap : 0),
+      0
+    );
+    let x = Math.max(0, (maxWidth - rowWidth) / 2);
+    rowIndexes.forEach((index) => {
+      items.push({ label: labels[index], index, x, y: rowIndex * rowHeight, swatchSize });
+      x += widths[index] + gap;
+    });
+  });
+  return { items, rows: rows.length, rowHeight };
+}
+function categoryLabelStep(categoryCount, axisLength, fontSize) {
+  if (categoryCount <= 1) return 1;
+  const minPitch = fontSize * 6;
+  const pitch = axisLength / categoryCount;
+  return Math.max(1, Math.ceil(minPitch / Math.max(1, pitch)));
+}
+
+// src/doc/templates/chart/render.ts
+var TEMPLATE_ID = {
+  bar: "barChart",
+  column: "columnChart",
+  pie: "pieChart",
+  donut: "donutChart",
+  line: "lineChart",
+  area: "areaChart",
+  scatter: "scatterChart"
+};
+function renderChart(kind, input, context) {
+  const table = resolveTable(input, context);
+  const data = table ? buildChartData(table, input) : null;
+  if (!table || !data) return contentFallback(input, context);
+  const { theme, viewport } = context;
+  const templateId = TEMPLATE_ID[kind];
+  const title = (input.title ?? "").trim();
+  const titleFontSize = themedFontSize(44, context, true);
+  const axisFontSize = themedFontSize(20, context, false);
+  const labelFontSize = themedFontSize(22, context, false);
+  const legendFontSize = themedFontSize(22, context, false);
+  const tableFontSize = themedFontSize(20, context, false);
+  const bodyFont = getThemeFont(context, "body");
+  const isRadial = kind === "pie" || kind === "donut";
+  const legendLabels = resolveLegendLabels(kind, input, data);
+  const colors = seriesColors(
+    context,
+    input.colorScheme,
+    isRadial ? data.labels.length : data.series.length
+  );
+  if (isRadial && !data.series[0].values.some((v) => v !== null && v > 0)) {
+    return contentFallback(input, context);
+  }
+  const innerWidth = viewport.width * 0.88;
+  const legend = legendLabels.length > 0 ? layoutLegend(legendLabels, legendFontSize, innerWidth) : null;
+  const gutters = computeGutters(kind, data, input, context, axisFontSize, labelFontSize);
+  const frame = computeChartFrame({
+    viewportWidth: viewport.width,
+    viewportHeight: viewport.height,
+    hasTitle: title.length > 0,
+    titleFontSize,
+    leftGutter: gutters.left,
+    bottomGutter: gutters.bottom,
+    legendRows: legend?.rows ?? 0,
+    legendRowHeight: legendFontSize * 2,
+    tableRowCount: input.showTable === true ? table.rows.length : 0,
+    tableFontSize
+  });
+  const entranceHint = getTemplateHint(context, templateId, "entrance", "staggered");
+  const entrance = (index) => ({
+    type: "fadeIn",
+    duration: 0.6,
+    delay: entranceHint === "subtle" ? 0.1 : Math.min(1.2, 0.2 + index * 0.08)
+  });
+  const paint = {
+    kind,
+    input,
+    context,
+    data,
+    frame,
+    colors,
+    axisFontSize,
+    labelFontSize,
+    bodyFont,
+    gridColor: withAlpha(theme.colors.text, 0.12),
+    axisTextColor: theme.colors.textMuted,
+    entrance
+  };
+  const layers = [createBackgroundLayer("bg", themedSurfaceGradient(context, 170))];
+  if (title && frame.titleBand) {
+    layers.push({
+      type: "text",
+      id: "title",
+      content: {
+        text: title,
+        style: {
+          fontSize: titleFontSize,
+          fontFamily: getThemeFont(context, "title"),
+          fontWeight: "bold",
+          color: theme.colors.text,
+          textAlign: "center",
+          shadow: shouldUseShadow(context)
+        }
+      },
+      position: {
+        x: frame.titleBand.x + frame.titleBand.width / 2,
+        y: frame.titleBand.y + frame.titleBand.height / 2,
+        width: frame.titleBand.width,
+        anchor: "center"
+      },
+      animation: { type: "fadeIn", duration: 0.8 }
+    });
+  }
+  switch (kind) {
+    case "bar":
+      layers.push(...paintBars(paint));
+      break;
+    case "column":
+      layers.push(...paintColumns(paint));
+      break;
+    case "pie":
+    case "donut":
+      layers.push(...paintRadial(paint));
+      break;
+    case "line":
+    case "area":
+      layers.push(...paintLines(paint));
+      break;
+    case "scatter":
+      layers.push(...paintScatter(paint));
+      break;
+  }
+  if (legend && frame.legendBand) {
+    layers.push(...paintLegend(paint, legend, frame.legendBand, legendFontSize));
+  }
+  if (input.showTable === true && frame.tableBand) {
+    layers.push(tableLayer(table, frame.tableBand, tableFontSize, input, context));
+  }
+  return layers;
+}
+function resolveTable(input, context) {
+  if (Array.isArray(input.headers) && input.headers.length > 0 && Array.isArray(input.rows) && input.rows.length > 0) {
+    return { headers: input.headers, rows: input.rows };
+  }
+  const contents = input.contents ?? context.block?.contents;
+  return extractTableFromContents(contents);
+}
+function contentFallback(input, context) {
+  const fallbackInput = {
+    ...input,
+    template: "content",
+    title: input.title ?? context.block?.title ?? ""
+  };
+  return contentBlock(fallbackInput, context);
+}
+function resolveLegendLabels(kind, input, data) {
+  if (input.showLegend === false) return [];
+  if (kind === "pie" || kind === "donut") return data.labels;
+  if (data.series.length > 1 || input.showLegend === true) {
+    return data.series.map((s) => s.name);
+  }
+  return [];
+}
+function seriesColors(context, schemeName, count) {
+  const schemes = context.theme.colorSchemes;
+  const names = Object.keys(schemes);
+  const primary = resolveColorScheme(context, schemeName).accent;
+  const palette = [primary];
+  const start = schemeName && names.includes(schemeName) ? names.indexOf(schemeName) : 0;
+  for (let i = 1; i < names.length && palette.length < count; i++) {
+    const accent = schemes[names[(start + i) % names.length]].accent;
+    if (!palette.some((c) => c.toLowerCase() === accent.toLowerCase())) palette.push(accent);
+  }
+  const distinct = palette.length;
+  for (let i = 0; palette.length < count; i++) {
+    palette.push(withAlpha(palette[i % distinct], 0.55));
+  }
+  return palette.slice(0, Math.max(1, count));
+}
+function computeGutters(kind, data, input, context, axisFontSize, labelFontSize) {
+  if (kind === "pie" || kind === "donut") return { left: 0, bottom: 0 };
+  if (kind === "bar") {
+    const longest = data.labels.reduce((max, label) => Math.max(max, label.length), 0);
+    const left = Math.min(
+      context.viewport.width * 0.24,
+      Math.max(labelFontSize * 3, longest * labelFontSize * 0.58 + 16)
+    );
+    return { left, bottom: axisFontSize * 2.4 };
+  }
+  const ticks = valueTicks(kind, data, input);
+  const longestTick = ticks.ticks.reduce(
+    (max, tick) => Math.max(max, formatChartValue(tick, input.unit).length),
+    0
+  );
+  return {
+    left: Math.max(axisFontSize * 2.5, longestTick * axisFontSize * 0.6 + 16),
+    bottom: labelFontSize * 2.6
+  };
+}
+function valueTicks(kind, data, input) {
+  let values;
+  if ((kind === "bar" || kind === "column") && input.stacked === true) {
+    const extents = stackSeries(data.series).flat();
+    values = extents.flatMap((e) => [e.y0, e.y1]);
+  } else {
+    values = data.series.flatMap((s) => s.values.filter((v) => v !== null));
+  }
+  if (values.length === 0) values = [0, 1];
+  let min = Math.min(...values);
+  let max = Math.max(...values);
+  if (kind !== "line" && kind !== "scatter") {
+    min = Math.min(0, min);
+    max = Math.max(0, max);
+  }
+  return niceTicks(min, max, 5);
+}
+function paintValueAxisY(paint, scale, yFor) {
+  const { frame, gridColor, axisTextColor, axisFontSize, bodyFont, input } = paint;
+  const layers = [];
+  scale.ticks.forEach((tick, index) => {
+    const y = yFor(tick);
+    layers.push({
+      type: "shape",
+      id: `grid-${index}`,
+      content: {
+        shape: "rect",
+        fill: tick === 0 ? withAlpha(paint.context.theme.colors.text, 0.35) : gridColor
+      },
+      position: {
+        x: frame.plot.x,
+        y: y - (tick === 0 ? 1 : 0.5),
+        width: frame.plot.width,
+        height: tick === 0 ? 2 : 1
+      }
+    });
+    layers.push({
+      type: "text",
+      id: `tick-${index}`,
+      content: {
+        text: formatChartValue(tick, input.unit),
+        style: {
+          fontSize: axisFontSize,
+          fontFamily: bodyFont,
+          color: axisTextColor,
+          textAlign: "center"
+        }
+      },
+      position: {
+        x: frame.chartArea.x + (frame.plot.x - frame.chartArea.x) / 2,
+        y,
+        anchor: "center"
+      }
+    });
+  });
+  return layers;
+}
+function paintCategoryAxisX(paint, xForCenter) {
+  const { frame, data, labelFontSize, axisTextColor, bodyFont } = paint;
+  const step = categoryLabelStep(data.labels.length, frame.plot.width, labelFontSize);
+  const layers = [];
+  data.labels.forEach((label, index) => {
+    if (index % step !== 0 || !label) return;
+    layers.push({
+      type: "text",
+      id: `cat-${index}`,
+      content: {
+        text: label,
+        style: {
+          fontSize: labelFontSize,
+          fontFamily: bodyFont,
+          color: axisTextColor,
+          textAlign: "center"
+        }
+      },
+      position: {
+        x: xForCenter(index),
+        y: frame.plot.y + frame.plot.height + labelFontSize * 1.2,
+        anchor: "center"
+      }
+    });
+  });
+  return layers;
+}
+function paintColumns(paint) {
+  const { frame, data, colors, input, entrance } = paint;
+  const scale = valueTicks("column", data, input);
+  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const layers = paintValueAxisY(paint, scale, yFor);
+  const n = data.labels.length;
+  const band = frame.plot.width / Math.max(1, n);
+  const innerPad = band * 0.15;
+  layers.push(...paintCategoryAxisX(paint, (i) => frame.plot.x + (i + 0.5) * band));
+  const stacked = input.stacked === true && data.series.length > 1;
+  const extents = stacked ? stackSeries(data.series) : null;
+  const groupWidth = band - innerPad * 2;
+  const barWidth = stacked ? groupWidth : Math.max(2, (groupWidth - 4 * (data.series.length - 1)) / data.series.length);
+  data.series.forEach((series, s) => {
+    series.values.forEach((value, i) => {
+      if (i >= n) return;
+      const extent = extents ? extents[s][i] : value === null ? null : { y0: Math.min(0, value), y1: Math.max(0, value) };
+      if (!extent || extent.y0 === extent.y1) return;
+      const top = yFor(extent.y1);
+      const height = Math.max(1, yFor(extent.y0) - top);
+      const x = stacked ? frame.plot.x + i * band + innerPad : frame.plot.x + i * band + innerPad + s * (barWidth + 4);
+      layers.push({
+        type: "shape",
+        id: `mark-${s}-${i}`,
+        content: { shape: "rect", fill: colors[s], borderRadius: stacked ? 0 : 3 },
+        position: { x, y: top, width: barWidth, height },
+        animation: entrance(i + s)
+      });
+      if (input.showValues === true && value !== null && !stacked) {
+        layers.push(
+          valueLabel(
+            paint,
+            `val-${s}-${i}`,
+            value,
+            x + barWidth / 2,
+            value >= 0 ? top - paint.axisFontSize * 0.9 : top + height + paint.axisFontSize * 0.9
+          )
+        );
+      }
+    });
+  });
+  return layers;
+}
+function paintBars(paint) {
+  const {
+    frame,
+    data,
+    colors,
+    input,
+    entrance,
+    labelFontSize,
+    axisFontSize,
+    bodyFont,
+    axisTextColor,
+    gridColor
+  } = paint;
+  const scale = valueTicks("bar", data, input);
+  const labelGap = axisFontSize * 0.6;
+  const labelWidthPx = (value) => formatChartValue(value, input.unit).length * axisFontSize * 0.58;
+  const showValueLabels = input.showValues === true && !(input.stacked === true);
+  const reservedForLabels = showValueLabels ? data.series.flatMap((series) => series.values).filter((v) => v !== null).reduce((max, v) => Math.max(max, labelWidthPx(v)), 0) + labelGap : 0;
+  const axisWidth = Math.max(20, frame.plot.width - reservedForLabels);
+  const xFor = (v) => frame.plot.x + axisWidth * ((v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const layers = [];
+  scale.ticks.forEach((tick, index) => {
+    const x = xFor(tick);
+    layers.push({
+      type: "shape",
+      id: `grid-${index}`,
+      content: {
+        shape: "rect",
+        fill: tick === 0 ? withAlpha(paint.context.theme.colors.text, 0.35) : gridColor
+      },
+      position: {
+        x: x - (tick === 0 ? 1 : 0.5),
+        y: frame.plot.y,
+        width: tick === 0 ? 2 : 1,
+        height: frame.plot.height
+      }
+    });
+    layers.push({
+      type: "text",
+      id: `tick-${index}`,
+      content: {
+        text: formatChartValue(tick, input.unit),
+        style: {
+          fontSize: axisFontSize,
+          fontFamily: bodyFont,
+          color: axisTextColor,
+          textAlign: "center"
+        }
+      },
+      position: { x, y: frame.plot.y + frame.plot.height + axisFontSize * 1.2, anchor: "center" }
+    });
+  });
+  const n = data.labels.length;
+  const band = frame.plot.height / Math.max(1, n);
+  const innerPad = band * 0.15;
+  const stacked = input.stacked === true && data.series.length > 1;
+  const extents = stacked ? stackSeries(data.series) : null;
+  const groupHeight = band - innerPad * 2;
+  const barHeight = stacked ? groupHeight : Math.max(2, (groupHeight - 4 * (data.series.length - 1)) / data.series.length);
+  data.labels.forEach((label, i) => {
+    if (!label) return;
+    layers.push({
+      type: "text",
+      id: `cat-${i}`,
+      content: {
+        text: label,
+        style: {
+          fontSize: labelFontSize,
+          fontFamily: bodyFont,
+          color: axisTextColor,
+          textAlign: "center"
+        }
+      },
+      position: {
+        x: frame.chartArea.x + (frame.plot.x - frame.chartArea.x) / 2,
+        y: frame.plot.y + (i + 0.5) * band,
+        anchor: "center"
+      }
+    });
+  });
+  data.series.forEach((series, s) => {
+    series.values.forEach((value, i) => {
+      if (i >= n) return;
+      const extent = extents ? extents[s][i] : value === null ? null : { y0: Math.min(0, value), y1: Math.max(0, value) };
+      if (!extent || extent.y0 === extent.y1) return;
+      const left = xFor(extent.y0);
+      const width = Math.max(1, xFor(extent.y1) - left);
+      const y = stacked ? frame.plot.y + i * band + innerPad : frame.plot.y + i * band + innerPad + s * (barHeight + 4);
+      layers.push({
+        type: "shape",
+        id: `mark-${s}-${i}`,
+        content: { shape: "rect", fill: colors[s], borderRadius: stacked ? 0 : 3 },
+        position: { x: left, y, width, height: barHeight },
+        animation: entrance(i + s)
+      });
+      if (showValueLabels && value !== null) {
+        const half = labelWidthPx(value) / 2;
+        const labelX = value >= 0 ? left + width + labelGap + half : left - labelGap - half;
+        layers.push(valueLabel(paint, `val-${s}-${i}`, value, labelX, y + barHeight / 2));
+      }
+    });
+  });
+  return layers;
+}
+function paintRadial(paint) {
+  const { kind, frame, data, colors, input, entrance, context } = paint;
+  const slices = data.labels.map((label, index) => ({ label, value: data.series[0].values[index], index })).filter(
+    (s) => s.value !== null && Number.isFinite(s.value) && s.value > 0
+  );
+  const total = slices.reduce((sum, s) => sum + s.value, 0);
+  const cx = frame.chartArea.x + frame.chartArea.width / 2;
+  const cy = frame.chartArea.y + frame.chartArea.height / 2;
+  const rOuter = Math.min(frame.chartArea.width, frame.chartArea.height) * 0.42;
+  const rInner = kind === "donut" ? rOuter * 0.55 : 0;
+  const layers = [];
+  let startDeg = 0;
+  slices.forEach((slice, order) => {
+    const sweep = slice.value / total * 360;
+    layers.push({
+      type: "path",
+      id: `mark-${slice.index}`,
+      content: {
+        d: arcPath(cx, cy, rOuter, rInner, startDeg, startDeg + sweep),
+        fill: colors[slice.index % colors.length],
+        stroke: context.theme.colors.background,
+        strokeWidth: 2
+      },
+      position: { x: cx - rOuter, y: cy - rOuter, width: rOuter * 2, height: rOuter * 2 },
+      animation: entrance(order)
+    });
+    if (input.showValues === true && sweep >= 14) {
+      const mid = startDeg + sweep / 2;
+      const rad = (mid - 90) * Math.PI / 180;
+      const rLabel = rInner > 0 ? (rInner + rOuter) / 2 : rOuter * 0.68;
+      const pctText = `${Math.round(slice.value / total * 100)}%`;
+      layers.push({
+        type: "text",
+        id: `val-${slice.index}`,
+        content: {
+          text: pctText,
+          style: {
+            fontSize: paint.axisFontSize,
+            fontFamily: paint.bodyFont,
+            fontWeight: "bold",
+            color: pickContrastingText(colors[slice.index % colors.length]),
+            textAlign: "center"
+          }
+        },
+        position: {
+          x: cx + rLabel * Math.cos(rad),
+          y: cy + rLabel * Math.sin(rad),
+          anchor: "center"
+        },
+        animation: entrance(order)
+      });
+    }
+    startDeg += sweep;
+  });
+  return layers;
+}
+function paintLines(paint) {
+  const { kind, frame, data, colors, input, entrance } = paint;
+  const scale = valueTicks(kind, data, input);
+  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const n = data.labels.length;
+  const band = frame.plot.width / Math.max(1, n);
+  const xForCenter = (i) => frame.plot.x + (i + 0.5) * band;
+  const layers = paintValueAxisY(paint, scale, yFor);
+  layers.push(...paintCategoryAxisX(paint, xForCenter));
+  const baselineY = yFor(Math.max(scale.niceMin, Math.min(scale.niceMax, 0)));
+  const showPoints = n <= 30;
+  data.series.forEach((series, s) => {
+    const segments = [];
+    let current = [];
+    series.values.forEach((value, i) => {
+      if (i >= n) return;
+      if (value === null) {
+        if (current.length > 0) segments.push(current);
+        current = [];
+        return;
+      }
+      current.push({ x: xForCenter(i), y: yFor(value) });
+    });
+    if (current.length > 0) segments.push(current);
+    segments.forEach((segment, seg) => {
+      if (kind === "area" && segment.length > 1) {
+        layers.push({
+          type: "path",
+          id: `area-${s}-${seg}`,
+          content: {
+            d: areaPath(segment, baselineY),
+            fill: colors[s],
+            fillOpacity: 0.25,
+            stroke: "none",
+            strokeWidth: 0
+          },
+          position: {
+            x: frame.plot.x,
+            y: frame.plot.y,
+            width: frame.plot.width,
+            height: frame.plot.height
+          },
+          animation: entrance(s)
+        });
+      }
+      if (segment.length > 1) {
+        layers.push({
+          type: "path",
+          id: `line-${s}-${seg}`,
+          content: { d: polylinePath(segment), stroke: colors[s], strokeWidth: 4, fill: "none" },
+          position: {
+            x: frame.plot.x,
+            y: frame.plot.y,
+            width: frame.plot.width,
+            height: frame.plot.height
+          },
+          animation: entrance(s)
+        });
+      }
+    });
+    if (showPoints) {
+      series.values.forEach((value, i) => {
+        if (i >= n || value === null) return;
+        const r = 5;
+        layers.push({
+          type: "shape",
+          id: `pt-${s}-${i}`,
+          content: { shape: "circle", fill: colors[s] },
+          position: { x: xForCenter(i) - r, y: yFor(value) - r, width: r * 2, height: r * 2 },
+          animation: entrance(s)
+        });
+        if (input.showValues === true) {
+          layers.push(
+            valueLabel(
+              paint,
+              `val-${s}-${i}`,
+              value,
+              xForCenter(i),
+              yFor(value) - paint.axisFontSize
+            )
+          );
+        }
+      });
+    }
+  });
+  return layers;
+}
+function paintScatter(paint) {
+  const { frame, data, colors, input, entrance } = paint;
+  const scale = valueTicks("scatter", data, input);
+  const yFor = (v) => frame.plot.y + frame.plot.height * (1 - (v - scale.niceMin) / (scale.niceMax - scale.niceMin));
+  const layers = paintValueAxisY(paint, scale, yFor);
+  const numericCount = data.labelNumbers.filter((v) => v !== null).length;
+  const numericX = data.labels.length > 0 && numericCount / data.labels.length >= 0.6;
+  let xFor;
+  if (numericX) {
+    const xs = data.labelNumbers.filter((v) => v !== null);
+    const xScale = niceTicks(Math.min(...xs), Math.max(...xs), 5);
+    const span = xScale.niceMax - xScale.niceMin;
+    xFor = (i) => {
+      const v = data.labelNumbers[i];
+      return v === null ? null : frame.plot.x + frame.plot.width * ((v - xScale.niceMin) / span);
+    };
+    xScale.ticks.forEach((tick, index) => {
+      const x = frame.plot.x + frame.plot.width * ((tick - xScale.niceMin) / span);
+      layers.push({
+        type: "shape",
+        id: `xgrid-${index}`,
+        content: { shape: "rect", fill: paint.gridColor },
+        position: { x: x - 0.5, y: frame.plot.y, width: 1, height: frame.plot.height }
+      });
+      layers.push({
+        type: "text",
+        id: `xtick-${index}`,
+        content: {
+          text: formatChartValue(tick),
+          style: {
+            fontSize: paint.axisFontSize,
+            fontFamily: paint.bodyFont,
+            color: paint.axisTextColor,
+            textAlign: "center"
+          }
+        },
+        position: {
+          x,
+          y: frame.plot.y + frame.plot.height + paint.axisFontSize * 1.2,
+          anchor: "center"
+        }
+      });
+    });
+  } else {
+    const band = frame.plot.width / Math.max(1, data.labels.length);
+    xFor = (i) => frame.plot.x + (i + 0.5) * band;
+    layers.push(...paintCategoryAxisX(paint, (i) => frame.plot.x + (i + 0.5) * band));
+  }
+  const r = 7;
+  data.series.forEach((series, s) => {
+    series.values.forEach((value, i) => {
+      if (value === null) return;
+      const x = xFor(i);
+      if (x === null) return;
+      layers.push({
+        type: "shape",
+        id: `mark-${s}-${i}`,
+        content: { shape: "circle", fill: colors[s], fillOpacity: 0.85 },
+        position: { x: x - r, y: yFor(value) - r, width: r * 2, height: r * 2 },
+        animation: entrance(Math.floor(i / 3) + s)
+      });
+    });
+  });
+  return layers;
+}
+function paintLegend(paint, legend, band, fontSize) {
+  const layers = [];
+  legend.items.forEach((item, index) => {
+    const color = paint.colors[item.index % paint.colors.length];
+    const rowCenterY = band.y + item.y + legend.rowHeight / 2;
+    layers.push({
+      type: "shape",
+      id: `legend-swatch-${index}`,
+      content: { shape: "rect", fill: color, borderRadius: 3 },
+      position: {
+        x: band.x + item.x,
+        y: rowCenterY - item.swatchSize / 2,
+        width: item.swatchSize,
+        height: item.swatchSize
+      }
+    });
+    layers.push({
+      type: "text",
+      id: `legend-label-${index}`,
+      content: {
+        text: item.label,
+        style: { fontSize, fontFamily: paint.bodyFont, color: paint.context.theme.colors.text }
+      },
+      position: {
+        x: band.x + item.x + item.swatchSize + fontSize * 0.5,
+        y: rowCenterY - fontSize * 0.62
+      }
+    });
+  });
+  return layers;
+}
+function valueLabel(paint, id, value, x, y) {
+  return {
+    type: "text",
+    id,
+    content: {
+      text: formatChartValue(value, paint.input.unit),
+      style: {
+        fontSize: paint.axisFontSize,
+        fontFamily: paint.bodyFont,
+        fontWeight: "bold",
+        color: paint.context.theme.colors.text,
+        textAlign: "center"
+      }
+    },
+    position: { x, y, anchor: "center" }
+  };
+}
+function tableLayer(table, band, fontSize, input, context) {
+  const { theme } = context;
+  const colors = resolveColorScheme(context, input.colorScheme);
+  return {
+    type: "table",
+    id: "table",
+    content: {
+      headers: table.headers,
+      rows: table.rows,
+      align: table.align,
+      style: {
+        headerBackground: colors.accent,
+        headerColor: pickContrastingText(colors.accent),
+        cellBackground: withAlpha(theme.colors.text, 0.04),
+        cellColor: theme.colors.text,
+        borderColor: withAlpha(theme.colors.text, 0.15),
+        fontSize,
+        fontFamily: getThemeFont(context, "body"),
+        headerFontFamily: getThemeFont(context, "title"),
+        borderRadius: 8
+      }
+    },
+    position: { x: band.x, y: band.y, width: band.width, height: band.height },
+    animation: { type: "fadeIn", duration: 1, delay: 0.4 }
+  };
+}
+
+// src/doc/templates/chartBlock.ts
+function barChart(input, context) {
+  return renderChart("bar", input, context);
+}
+function columnChart(input, context) {
+  return renderChart("column", input, context);
+}
+function pieChart(input, context) {
+  return renderChart("pie", input, context);
+}
+function donutChart(input, context) {
+  return renderChart("donut", input, context);
+}
+function lineChart(input, context) {
+  return renderChart("line", input, context);
+}
+function areaChart(input, context) {
+  return renderChart("area", input, context);
+}
+function scatterChart(input, context) {
+  return renderChart("scatter", input, context);
+}
+
 // src/doc/templates/registry.ts
 var templateRegistry = {
   title: titleBlock,
@@ -5608,6 +6657,13 @@ var templateRegistry = {
   videoWithCaption,
   videoPullQuote,
   dataTable,
+  barChart,
+  columnChart,
+  pieChart,
+  donutChart,
+  lineChart,
+  areaChart,
+  scatterChart,
   diagram: diagramBlock,
   tree: treeBlock,
   timeline: timelineBlock,
@@ -5723,6 +6779,49 @@ var CAPTION_POSITION_VALUES = ["bottom", "top", "center"];
 var MAP_STYLE_VALUES = ["terrain", "satellite", "road", "toner", "watercolor"];
 var DATE_EVENT_MOOD_VALUES = ["neutral", "somber", "celebratory"];
 var COLOR_SCHEME_HINT = "theme color-scheme name \u2014 e.g. 'blue', 'green'";
+function CHART_DESCRIPTORS(extra = []) {
+  return [
+    { key: "title", description: "Optional title above the chart" },
+    {
+      key: "labelColumn",
+      description: "Category/label column",
+      valueHint: "header name or 0-based index"
+    },
+    {
+      key: "valueColumns",
+      description: "Value columns to plot",
+      coerce: "stringList",
+      valueHint: "comma-separated header names or 0-based indexes"
+    },
+    {
+      key: "showTable",
+      description: "Render the source table beneath the chart",
+      coerce: "boolean"
+    },
+    { key: "showLegend", description: "Show a series legend", coerce: "boolean" },
+    { key: "showValues", description: "Print numeric value labels on marks", coerce: "boolean" },
+    { key: "unit", description: 'Unit suffix for tick/value labels (e.g. "km")' },
+    {
+      key: "colorScheme",
+      description: "Color scheme seeding the series color rotation",
+      valueHint: COLOR_SCHEME_HINT
+    },
+    // `headers`/`rows` are normally derived from the block's markdown table;
+    // declared so data-fence-supplied values aren't flagged as unknown.
+    {
+      key: "headers",
+      description: "Header cells (normally derived from the table)",
+      coerce: "stringList"
+    },
+    { key: "rows", description: "Table rows (supply via a data fence)" },
+    ...extra
+  ];
+}
+var STACKED_DESCRIPTOR = {
+  key: "stacked",
+  description: "Stack series instead of grouping them side by side",
+  coerce: "boolean"
+};
 var BASE_INPUT_DESCRIPTORS = [
   {
     key: "imageTreatment",
@@ -5844,6 +6943,13 @@ var TEMPLATE_INPUT_DESCRIPTORS = {
     { key: "align", description: "Per-column alignment (supply via a data fence)" },
     { key: "colorScheme", description: "Header color scheme", valueHint: COLOR_SCHEME_HINT }
   ],
+  barChart: CHART_DESCRIPTORS([STACKED_DESCRIPTOR]),
+  columnChart: CHART_DESCRIPTORS([STACKED_DESCRIPTOR]),
+  pieChart: CHART_DESCRIPTORS(),
+  donutChart: CHART_DESCRIPTORS(),
+  lineChart: CHART_DESCRIPTORS(),
+  areaChart: CHART_DESCRIPTORS(),
+  scatterChart: CHART_DESCRIPTORS(),
   tree: [
     { key: "title", description: "Optional title above the tree" },
     { key: "colorScheme", description: "Folder-row color scheme", valueHint: COLOR_SCHEME_HINT },
@@ -6315,6 +7421,55 @@ var BLOCK_MEDIA_LAYOUT_POLICIES = {
     unconsumedMedia: "reserved-slot",
     variants: DENSE_VARIANTS
   },
+  barChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  columnChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  pieChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  donutChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  lineChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  areaChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
+  scatterChart: {
+    summary: "The chart remains wide; supplemental media stacks below the dense data region.",
+    noMedia: "template-default",
+    ownership: "supplemental",
+    unconsumedMedia: "reserved-slot",
+    variants: DENSE_VARIANTS
+  },
   diagram: {
     summary: "The node-and-edge canvas is intrinsic media and retains its spatial coordinate system.",
     noMedia: "intrinsic-visual",
@@ -7300,6 +8455,34 @@ var TEMPLATE_METADATA = {
     label: "Data Table",
     description: "Renders tabular data in a clean, styled table with a header row."
   },
+  barChart: {
+    label: "Bar Chart",
+    description: "Horizontal bars from the block's markdown table \u2014 one bar per row."
+  },
+  columnChart: {
+    label: "Column Chart",
+    description: "Vertical columns from the block's markdown table \u2014 one column per row."
+  },
+  pieChart: {
+    label: "Pie Chart",
+    description: "A pie of the block's markdown table \u2014 each row becomes a labeled slice."
+  },
+  donutChart: {
+    label: "Donut Chart",
+    description: "A donut of the block's markdown table \u2014 each row becomes a labeled slice."
+  },
+  lineChart: {
+    label: "Line Chart",
+    description: "Lines from the block's markdown table \u2014 one line per value column."
+  },
+  areaChart: {
+    label: "Area Chart",
+    description: "Filled area lines from the block's markdown table \u2014 one area per value column."
+  },
+  scatterChart: {
+    label: "Scatter Chart",
+    description: "An x/y scatter plot from the block's markdown table's numeric columns."
+  },
   diagram: {
     label: "Diagram",
     description: "Renders sub-headings as connected nodes \u2014 edit visually as a node-and-edge diagram."
@@ -7445,6 +8628,48 @@ var TEMPLATE_AUTHORING_METADATA = {
     safeForContentFirst: false,
     placement: "heading"
   },
+  barChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  columnChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  pieChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  donutChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  lineChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  areaChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
+  scatterChart: {
+    role: "data",
+    bodyPolicy: "structured",
+    safeForContentFirst: false,
+    placement: "heading"
+  },
   diagram: {
     role: "spatial",
     bodyPolicy: "structured",
@@ -8309,6 +9534,18 @@ function time(raw) {
   if (raw == null) return null;
   return parseTimeSeconds(raw);
 }
+function videoPlacement(params) {
+  const explicit = params.placement ?? params.presentation;
+  if (explicit === "content") return "content";
+  if (explicit === "pip" || explicit === "picture-in-picture") return "picture-in-picture";
+  if (explicit === "overlay" || explicit === "full-frame") return "overlay";
+  if (params.pip === "" || params.pip === "true") return "picture-in-picture";
+  if (params.overlay === "" || params.overlay === "true") return "overlay";
+  return void 0;
+}
+function lockToBlock(raw) {
+  return raw !== "false" && raw !== "0";
+}
 function toMediaClip(parsed, id) {
   const { template, params } = parsed;
   if (!template || !MEDIA_TEMPLATES.has(template)) return null;
@@ -8323,13 +9560,78 @@ function toMediaClip(parsed, id) {
     startAt: time(params.startAt ?? params.startTime) ?? 0,
     anchor
   };
+  const placement = kind === "video" ? videoPlacement(params) : void 0;
+  if (placement && placement !== "content") clip.placement = placement;
+  if (kind === "video" && placement && placement !== "content" && params.lockToBlock != null) {
+    const locked = lockToBlock(params.lockToBlock);
+    clip.lockToBlock = locked;
+    clip.anchor = locked ? "block" : "document";
+    if (locked) clip.startAt = 0;
+  }
   const clipStart = time(params.clipStart);
   const clipEnd = time(params.clipEnd);
   if (clipStart != null) clip.clipStart = clipStart;
   if (clipEnd != null) clip.clipEnd = clipEnd;
+  if (clip.lockToBlock === true) delete clip.clipEnd;
   if (params.spillover === "true" || params.spillover === "") clip.spillover = true;
   return clip;
 }
+function firstVideoElement(children) {
+  const visit = (nodes) => {
+    for (const child of nodes) {
+      if (child.type !== "htmlElement") continue;
+      if (child.tagName === "video") return child;
+      const nested = visit(child.children);
+      if (nested) return nested;
+    }
+    return null;
+  };
+  return visit(children);
+}
+function standaloneHtmlVideo(node) {
+  if (node.type === "htmlBlock") {
+    if (!/^\s*<video\b/i.test(node.rawHtml)) return null;
+    const element = firstVideoElement(node.htmlChildren);
+    return element ? { element, raw: node.rawHtml.trim() } : null;
+  }
+  if (node.type !== "paragraph" || !node.children.every((child) => child.type === "htmlInline")) {
+    return null;
+  }
+  const raw = node.children.map((child) => child.type === "htmlInline" ? child.rawHtml : "").join("");
+  if (!/^\s*<video\b[\s\S]*<\/video>\s*$/i.test(raw)) return null;
+  for (const child of node.children) {
+    if (child.type !== "htmlInline") continue;
+    const element = firstVideoElement(child.htmlChildren);
+    if (element) return { element, raw: raw.trim() };
+  }
+  return null;
+}
+function htmlVideoClip(node, id) {
+  const authored = standaloneHtmlVideo(node);
+  if (!authored) return null;
+  const { element } = authored;
+  const placement = videoPlacement({
+    placement: element.attributes["data-squisq-video-placement"] ?? ""
+  });
+  if (!placement || placement === "content") return null;
+  const src = element.attributes.src;
+  if (!src) return null;
+  const locked = lockToBlock(element.attributes["data-squisq-video-lock-to-block"]);
+  const clip = {
+    id,
+    src,
+    kind: "video",
+    placement,
+    lockToBlock: locked,
+    startAt: locked ? 0 : time(element.attributes["data-squisq-video-start-at"]) ?? 0,
+    anchor: locked ? "block" : "document"
+  };
+  const clipStart = time(element.attributes["data-squisq-video-clip-start"]);
+  const clipEnd = time(element.attributes["data-squisq-video-clip-end"]);
+  if (clipStart != null) clip.clipStart = clipStart;
+  if (!locked && clipEnd != null) clip.clipEnd = clipEnd;
+  return clip;
+}
 function extractMediaFromContents(contents, makeId, blockId) {
   const media = [];
   const documentMedia = [];
@@ -8338,17 +9640,19 @@ function extractMediaFromContents(contents, makeId, blockId) {
   let originalIndex = 0;
   for (const node of contents ?? []) {
     const parsed = parseStandaloneAnnotation(node);
-    const clip = parsed ? toMediaClip(parsed, "") : null;
-    if (parsed && clip) {
+    const clip = parsed ? toMediaClip(parsed, "") : htmlVideoClip(node, "");
+    if (clip) {
       clip.id = makeId(clip.src, index++);
       const line = node.position?.start.line;
       if (line != null) clip.sourceLine = line;
       if (blockId !== void 0) {
-        const rawText = node.type === "paragraph" && node.children?.[0]?.type === "text" ? node.children[0].value.trim() : void 0;
+        const authoredHtml = standaloneHtmlVideo(node);
+        const rawText = node.type === "paragraph" && node.children?.[0]?.type === "text" ? node.children[0].value.trim() : authoredHtml?.raw;
         clip.origin = {
           blockId,
           index: originalIndex,
-          ...rawText !== void 0 ? { raw: rawText } : {}
+          ...rawText !== void 0 ? { raw: rawText } : {},
+          ...authoredHtml ? { format: "html" } : {}
         };
       }
       (clip.anchor === "document" ? documentMedia : media).push(clip);
@@ -8685,6 +9989,12 @@ function markdownToDoc(markdownDoc, options) {
     }
     currentTime += block.duration;
   }
+  const blockById = new Map(allBlocks.map((block) => [block.id, block]));
+  for (const clip of documentMedia) {
+    if (clip.lockToBlock === false && clip.origin?.format === "html" && !/\bdata-squisq-video-start-at\s*=/i.test(clip.origin.raw ?? "")) {
+      clip.startAt = blockById.get(clip.origin.blockId)?.startTime ?? 0;
+    }
+  }
   const captions = phrases.length > 0 ? {
     phrases,
     ...options?.captionsGeneratedAt ? { generatedAt: options.captionsGeneratedAt } : {},
@@ -8770,7 +10080,7 @@ function applyStructuredData(block, diagnostics) {
     }
     data = { ...data, ...result.data };
   }
-  if (block.template === "dataTable") {
+  if (TABLE_FED_TEMPLATES.has(resolveTemplateName(block.template ?? ""))) {
     const provided = (key) => data && key in data || block.templateOverrides && key in block.templateOverrides;
     if (!provided("headers") && !provided("rows")) {
       const table = findFirstTable(block.contents);
@@ -9296,6 +10606,7 @@ export {
   wrapWithPersistentLayers,
   TEMPLATE_ALIASES,
   resolveTemplateName,
+  TABLE_FED_TEMPLATES,
   CONTAINER_TEMPLATES,
   isContainerTemplate,
   resolveColorScheme,
@@ -9359,6 +10670,7 @@ export {
   videoWithCaption,
   videoPullQuote,
   dataTable,
+  buildChartData,
   DIAGRAM_LABEL_LINE_HEIGHT,
   DIAGRAM_LABEL_HORIZONTAL_PADDING,
   DIAGRAM_LABEL_VERTICAL_PADDING,