@mulmocast/deck 0.5.1 → 0.7.0

package/lib/blocks.d.ts

@@ -5,9 +5,14 @@ export declare const resolveCellColor: (cellObj: {
 export declare const renderBadge: (text: string, color: string) => string;
 export declare const renderCellValue: (cell: TableCellValue, isRowHeader: boolean) => string;
 export declare const renderTableCore: (headers: string[] | undefined, rows: TableCellValue[][], rowHeaders?: boolean, striped?: boolean) => string;
-/** Render a single content block to HTML */
-export declare const renderContentBlock: (block: ContentBlock) => string;
+/**
+ * Render a single content block to HTML.
+ * @param path - JSON path of this block in the source SlideLayout, used to emit `data-mulmo-path`
+ *               attributes on every editable text node. Optional for back-compat — empty paths
+ *               just suppress the attribute.
+ */
+export declare const renderContentBlock: (block: ContentBlock, path?: string) => string;
 /** Render an array of content blocks to HTML */
-export declare const renderContentBlocks: (blocks: ContentBlock[]) => string;
+export declare const renderContentBlocks: (blocks: ContentBlock[], basePath?: string) => string;
 /** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
-export declare const renderCardContentBlocks: (blocks: ContentBlock[]) => string;
+export declare const renderCardContentBlocks: (blocks: ContentBlock[], basePath?: string) => string;

package/lib/blocks.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, generateSlideId, renderInlineMarkup, blockTitle, resolveChangeColor, resolveAccent } from "./utils.js";
+import { escapeHtml, c, generateSlideId, renderInlineMarkup, blockTitle, resolveChangeColor, resolveAccent, dp, di } from "./utils.js";
 /**
  * Map a TextSize variant to its Tailwind classes.
  * default — body / muted (the original 0.1.x behavior; emitted only when neither size nor numeric fontSize is set).
@@ -62,19 +62,24 @@ export const renderTableCore = (headers, rows, rowHeaders, striped) => {
 const renderTableBlock = (block) => {
     return `<div class="overflow-auto">${blockTitle(block.title)}${renderTableCore(block.headers, block.rows, block.rowHeaders, block.striped)}</div>`;
 };
-/** Render a single content block to HTML */
-export const renderContentBlock = (block) => {
+/**
+ * Render a single content block to HTML.
+ * @param path - JSON path of this block in the source SlideLayout, used to emit `data-mulmo-path`
+ *               attributes on every editable text node. Optional for back-compat — empty paths
+ *               just suppress the attribute.
+ */
+export const renderContentBlock = (block, path = "") => {
     switch (block.type) {
         case "text":
-            return renderText(block);
+            return renderText(block, path);
         case "bullets":
-            return renderBullets(block);
+            return renderBullets(block, path);
         case "code":
             return renderCode(block);
         case "callout":
-            return renderCallout(block);
+            return renderCallout(block, path);
         case "metric":
-            return renderMetric(block);
+            return renderMetric(block, path);
         case "divider":
             return renderDivider(block);
         case "image":
@@ -90,28 +95,29 @@ export const renderContentBlock = (block) => {
         case "table":
             return renderTableBlock(block);
         case "tag":
-            return renderTag(block);
+            return renderTag(block, path);
         default:
             return `<p class="text-sm text-d-muted font-body">[unknown block type]</p>`;
     }
 };
 /** Render a card-internal accent tag (small uppercase label, sits above an h3). Matches reveal.js .tag. */
-const renderTag = (block) => {
+const renderTag = (block, path = "") => {
     const color = c(block.color || "primary");
-    return `<span class="text-xs font-bold uppercase tracking-[0.12em] text-${color} font-accent">${renderInlineMarkup(block.text)}</span>`;
+    return `<span class="text-xs font-bold uppercase tracking-[0.12em] text-${color} font-accent"${dp(path ? `${path}.text` : "")}>${renderInlineMarkup(block.text)}</span>`;
 };
 /** Render an array of content blocks to HTML */
-export const renderContentBlocks = (blocks) => {
-    return blocks.map(renderContentBlock).join("\n");
+export const renderContentBlocks = (blocks, basePath = "") => {
+    return blocks.map((b, i) => renderContentBlock(b, basePath ? `${basePath}[${i}]` : `content[${i}]`)).join("\n");
 };
 /** Render content blocks with fixed aspect-ratio container for image blocks (used in card layouts) */
-export const renderCardContentBlocks = (blocks) => {
+export const renderCardContentBlocks = (blocks, basePath = "") => {
     return blocks
-        .map((block) => {
+        .map((block, i) => {
+        const p = basePath ? `${basePath}[${i}]` : `content[${i}]`;
         if (block.type === "image") {
-            return `<div class="aspect-video shrink-0 overflow-hidden">${renderContentBlock(block)}</div>`;
+            return `<div class="aspect-video shrink-0 overflow-hidden">${renderContentBlock(block, p)}</div>`;
         }
-        return renderContentBlock(block);
+        return renderContentBlock(block, p);
     })
         .join("\n");
 };
@@ -130,7 +136,7 @@ const resolveAlign = (align) => {
         return "text-right";
     return "";
 };
-const renderText = (block) => {
+const renderText = (block, path = "") => {
     // Resolution order for size: explicit numeric `fontSize` (legacy) wins over new `size` variant.
     const legacyXl = block.fontSize !== undefined && block.fontSize >= 18;
     const style = TEXT_SIZE_STYLES[block.size ?? "default"];
@@ -139,7 +145,7 @@ const renderText = (block) => {
     const colorCls = explicitColor ?? style.colorCls ?? "text-d-muted";
     const bold = block.bold ? "font-bold" : "";
     const alignCls = resolveAlign(block.align);
-    return `<p class="${sizeCls} ${colorCls} ${bold} ${alignCls} font-body leading-relaxed">${renderInlineMarkup(block.value)}</p>`;
+    return `<p class="${sizeCls} ${colorCls} ${bold} ${alignCls} font-body leading-relaxed"${dp(path ? `${path}.value` : "")}>${renderInlineMarkup(block.value)}</p>`;
 };
 /** Extract text from a bullet item (string or object) */
 const bulletItemText = (item) => {
@@ -168,7 +174,7 @@ const resolveBulletSize = (block, item) => {
         return item.size;
     return block.size ?? "default";
 };
-const renderBullets = (block) => {
+const renderBullets = (block, path = "") => {
     const tag = block.ordered ? "ol" : "ul";
     const blockStyle = TEXT_SIZE_STYLES[block.size ?? "default"];
     const items = block.items
@@ -183,7 +189,12 @@ const renderBullets = (block) => {
         const itemStyle = TEXT_SIZE_STYLES[resolveBulletSize(block, item)];
         // Emit per-item classes only when they differ from the block-level style so output stays compact in the common case.
         const itemCls = itemStyle.fontCls === blockStyle.fontCls && itemStyle.colorCls === blockStyle.colorCls ? "" : ` ${itemStyle.fontCls} ${itemStyle.colorCls}`;
-        return `  <li class="flex flex-col gap-1${itemCls}"><div class="flex gap-2">${markerHtml}<span>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
+        // For string items, the editable target is `path.items[i]`. For object items, it's `path.items[i].text`.
+        const itemPath = path ? (typeof item === "string" ? `${path}.items[${i}]` : `${path}.items[${i}].text`) : "";
+        // The bullet `<li>` itself carries `data-mulmo-item-path` so editors can drag-reorder; the inner
+        // span keeps `data-mulmo-path` for the text edit target.
+        const itemRoot = path ? `${path}.items[${i}]` : "";
+        return `  <li class="flex flex-col gap-1${itemCls}"${di(itemRoot)}><div class="flex gap-2">${markerHtml}<span${dp(itemPath)}>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
     })
         .join("\n");
     return `<${tag} class="space-y-2 ${blockStyle.fontCls} ${blockStyle.colorCls} font-body">\n${items}\n</${tag}>`;
@@ -191,7 +202,7 @@ const renderBullets = (block) => {
 const renderCode = (block) => {
     return `<pre class="bg-[#0D1117] p-4 rounded text-sm font-mono text-d-dim leading-relaxed whitespace-pre-wrap">${escapeHtml(block.code)}</pre>`;
 };
-const renderCallout = (block) => {
+const renderCallout = (block, path = "") => {
     const isQuote = block.style === "quote";
     const resolveBorderCls = (style) => {
         if (style === "warning")
@@ -205,18 +216,20 @@ const renderCallout = (block) => {
     // Pre-Phase-4 default was `text-sm` (~14px). Map to the size variants only when explicitly requested.
     const sizeStyle = block.size ? TEXT_SIZE_STYLES[block.size] : { fontCls: "text-sm", colorCls: "text-d-muted" };
     const textCls = isQuote ? `italic ${sizeStyle.colorCls}` : sizeStyle.colorCls;
+    const dpLabel = dp(path ? `${path}.label` : "");
+    const dpText = dp(path ? `${path}.text` : "");
     const content = block.label
-        ? `<span class="font-bold text-${c(block.color || "warning")}">${renderInlineMarkup(block.label)}:</span> <span class="${textCls}">${renderInlineMarkup(block.text)}</span>`
-        : `<span class="${textCls}">${renderInlineMarkup(block.text)}</span>`;
+        ? `<span class="font-bold text-${c(block.color || "warning")}"${dpLabel}>${renderInlineMarkup(block.label)}:</span> <span class="${textCls}"${dpText}>${renderInlineMarkup(block.text)}</span>`
+        : `<span class="${textCls}"${dpText}>${renderInlineMarkup(block.text)}</span>`;
     return `<div class="${bg} ${borderCls} p-3 rounded ${sizeStyle.fontCls} font-body">${content}</div>`;
 };
-const renderMetric = (block) => {
+const renderMetric = (block, path = "") => {
     const lines = [];
     lines.push(`<div class="text-center">`);
-    lines.push(`  <p class="text-4xl font-bold text-${c(resolveAccent(block.color))}">${renderInlineMarkup(block.value)}</p>`);
-    lines.push(`  <p class="text-sm text-d-dim mt-1">${renderInlineMarkup(block.label)}</p>`);
+    lines.push(`  <p class="text-4xl font-bold text-${c(resolveAccent(block.color))}"${dp(path ? `${path}.value` : "")}>${renderInlineMarkup(block.value)}</p>`);
+    lines.push(`  <p class="text-sm text-d-dim mt-1"${dp(path ? `${path}.label` : "")}>${renderInlineMarkup(block.label)}</p>`);
     if (block.change) {
-        lines.push(`  <p class="text-sm font-bold text-${c(resolveChangeColor(block.change))} mt-1">${escapeHtml(block.change)}</p>`);
+        lines.push(`  <p class="text-sm font-bold text-${c(resolveChangeColor(block.change))} mt-1"${dp(path ? `${path}.change` : "")}>${escapeHtml(block.change)}</p>`);
     }
     lines.push(`</div>`);
     return lines.join("\n");
@@ -269,7 +282,7 @@ const renderSectionContent = (block) => {
         parts.push(`<p class="text-[15px] text-d-muted font-body">${renderInlineMarkup(block.text)}</p>`);
     }
     if (block.content) {
-        parts.push(block.content.map(renderContentBlock).join("\n"));
+        parts.push(block.content.map((b) => renderContentBlock(b)).join("\n"));
     }
     return parts.join("\n");
 };

package/lib/layouts/big_quote.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, accentBar, resolveAccent, renderEyebrow } from "../utils.js";
+import { renderInlineMarkup, accentBar, resolveAccent, renderEyebrow, dp } from "../utils.js";
 export const layoutBigQuote = (data) => {
     const accent = resolveAccent(data.accentColor);
     const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
@@ -7,15 +7,15 @@ export const layoutBigQuote = (data) => {
     if (eyebrowHtml)
         parts.push(`  <div class="mb-6">${eyebrowHtml}</div>`);
     parts.push(`  ${accentBar(accent, "w-24 mb-8")}`);
-    parts.push(`  <blockquote class="text-[32px] text-d-text font-title italic text-center leading-relaxed">`);
+    parts.push(`  <blockquote class="text-[32px] text-d-text font-title italic text-center leading-relaxed"${dp("quote")}>`);
     parts.push(`    &ldquo;${renderInlineMarkup(data.quote)}&rdquo;`);
     parts.push(`  </blockquote>`);
     parts.push(`  ${accentBar(accent, "w-24 mt-8 mb-6")}`);
     if (data.author) {
-        parts.push(`  <p class="text-lg text-d-muted font-body">${renderInlineMarkup(data.author)}</p>`);
+        parts.push(`  <p class="text-lg text-d-muted font-body"${dp("author")}>${renderInlineMarkup(data.author)}</p>`);
     }
     if (data.role) {
-        parts.push(`  <p class="text-sm text-d-dim font-body mt-1">${renderInlineMarkup(data.role)}</p>`);
+        parts.push(`  <p class="text-sm text-d-dim font-body mt-1"${dp("role")}>${renderInlineMarkup(data.role)}</p>`);
     }
     parts.push(`</div>`);
     return parts.join("\n");

package/lib/layouts/columns.js

@@ -1,44 +1,45 @@
-import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent, renderNumLabel } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, numBadge, iconSquare, slideHeader, renderOptionalCallout, resolveAccent, renderNumLabel, dp } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
-const buildColumnCard = (col) => {
+const buildColumnCard = (col, basePath) => {
     const accent = resolveAccent(col.accentColor);
     const inner = [];
+    const dpTitle = dp(`${basePath}.title`);
     if (col.icon) {
         inner.push(`<div class="flex flex-col items-center mb-3">`);
         inner.push(`  ${iconSquare(col.icon, accent)}`);
         inner.push(`</div>`);
-        inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body">${renderInlineMarkup(col.title)}</h3>`);
+        inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body"${dpTitle}>${renderInlineMarkup(col.title)}</h3>`);
     }
     else if (col.num != null) {
         inner.push(`<div class="flex items-center gap-3 mb-1">`);
         inner.push(`  ${numBadge(col.num, accent)}`);
-        inner.push(`  <h3 class="text-lg font-bold text-d-text font-body">${renderInlineMarkup(col.title)}</h3>`);
+        inner.push(`  <h3 class="text-lg font-bold text-d-text font-body"${dpTitle}>${renderInlineMarkup(col.title)}</h3>`);
         inner.push(`</div>`);
     }
     else {
         if (col.label) {
-            inner.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(col.label)}</p>`);
+            inner.push(`<p class="text-sm font-bold text-${c(accent)} font-body"${dp(`${basePath}.label`)}>${renderInlineMarkup(col.label)}</p>`);
         }
         const numPrefix = renderNumLabel(col.numLabel, accent);
-        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1">${numPrefix}${renderInlineMarkup(col.title)}</h3>`);
+        inner.push(`<h3 class="text-2xl font-title font-bold text-d-text mt-1"${dpTitle}>${numPrefix}${renderInlineMarkup(col.title)}</h3>`);
     }
     if (col.content) {
         const centerCls = col.icon ? "text-center" : "";
         inner.push(`<div class="mt-4 space-y-4 flex-1 min-h-0 overflow-auto flex flex-col ${centerCls}">`);
-        inner.push(renderCardContentBlocks(col.content));
+        inner.push(renderCardContentBlocks(col.content, `${basePath}.content`));
         inner.push(`</div>`);
     }
     if (col.footer) {
-        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${renderInlineMarkup(col.footer)}</p>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3"${dp(`${basePath}.footer`)}>${renderInlineMarkup(col.footer)}</p>`);
     }
-    return cardWrap(accent, inner.join("\n"), "flex-1");
+    return cardWrap(accent, inner.join("\n"), "flex-1", basePath);
 };
 export const layoutColumns = (data) => {
     const cols = data.columns || [];
     const parts = [slideHeader(data)];
     const colElements = [];
     cols.forEach((col, i) => {
-        colElements.push(buildColumnCard(col));
+        colElements.push(buildColumnCard(col, `columns[${i}]`));
         if (data.showArrows && i < cols.length - 1) {
             colElements.push(`<div class="flex items-center shrink-0"><span class="text-2xl text-d-dim">\u25B6</span></div>`);
         }
@@ -48,7 +49,7 @@ export const layoutColumns = (data) => {
     parts.push(`</div>`);
     parts.push(renderOptionalCallout(data.callout));
     if (data.bottomText) {
-        parts.push(`<p class="text-center text-sm text-d-dim font-body pb-4">${renderInlineMarkup(data.bottomText)}</p>`);
+        parts.push(`<p class="text-center text-sm text-d-dim font-body pb-4"${dp("bottomText")}>${renderInlineMarkup(data.bottomText)}</p>`);
     }
     return parts.join("\n");
 };

package/lib/layouts/comparison.js

@@ -1,16 +1,16 @@
-import { renderInlineMarkup, c, accentBar, slideHeader, renderOptionalCallout, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, c, accentBar, slideHeader, renderOptionalCallout, resolveAccent, dp } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
-const buildPanel = (panel) => {
+const buildPanel = (panel, basePath) => {
     const accent = resolveAccent(panel.accentColor);
     const inner = [];
-    inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body">${renderInlineMarkup(panel.title)}</h3>`);
+    inner.push(`<h3 class="text-xl font-bold text-${c(accent)} font-body"${dp(`${basePath}.title`)}>${renderInlineMarkup(panel.title)}</h3>`);
     if (panel.content) {
         inner.push(`<div class="mt-5 space-y-4 flex-1 min-h-0 overflow-auto flex flex-col">`);
-        inner.push(renderContentBlocks(panel.content));
+        inner.push(renderContentBlocks(panel.content, `${basePath}.content`));
         inner.push(`</div>`);
     }
     if (panel.footer) {
-        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3">${renderInlineMarkup(panel.footer)}</p>`);
+        inner.push(`<p class="text-sm text-d-dim font-body mt-auto pt-3"${dp(`${basePath}.footer`)}>${renderInlineMarkup(panel.footer)}</p>`);
     }
     // Tailwind's arbitrary `flex-[1.5]` works at runtime but stops short of clean class sanitization;
     // emitting `flex-grow` inline keeps the output predictable and avoids depending on JIT mode.
@@ -33,8 +33,8 @@ ${inner.join("\n")}
 export const layoutComparison = (data) => {
     const parts = [slideHeader(data)];
     parts.push(`<div class="flex gap-5 px-12 mt-5 flex-1 min-h-0 items-start">`);
-    parts.push(buildPanel(data.left));
-    parts.push(buildPanel(data.right));
+    parts.push(buildPanel(data.left, "left"));
+    parts.push(buildPanel(data.right, "right"));
     parts.push(`</div>`);
     parts.push(renderOptionalCallout(data.callout));
     return parts.join("\n");

package/lib/layouts/funnel.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor } from "../utils.js";
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor, dp } from "../utils.js";
 export const layoutFunnel = (data) => {
     const parts = [slideHeader(data)];
     const stages = data.stages || [];
@@ -7,15 +7,16 @@ export const layoutFunnel = (data) => {
     stages.forEach((stage, i) => {
         const color = resolveItemColor(stage.color, data.accentColor);
         const widthPct = 100 - (i / Math.max(total - 1, 1)) * 55;
+        const base = `stages[${i}]`;
         parts.push(`<div class="bg-${c(color)} rounded-lg flex items-center justify-between px-6 py-4" style="width: ${widthPct}%">`);
         parts.push(`  <div class="flex items-center gap-3">`);
-        parts.push(`    <span class="text-base font-bold text-white font-body">${renderInlineMarkup(stage.label)}</span>`);
+        parts.push(`    <span class="text-base font-bold text-white font-body"${dp(`${base}.label`)}>${renderInlineMarkup(stage.label)}</span>`);
         if (stage.description) {
-            parts.push(`    <span class="text-sm text-white/70 font-body">${renderInlineMarkup(stage.description)}</span>`);
+            parts.push(`    <span class="text-sm text-white/70 font-body"${dp(`${base}.description`)}>${renderInlineMarkup(stage.description)}</span>`);
         }
         parts.push(`  </div>`);
         if (stage.value) {
-            parts.push(`  <span class="text-lg font-bold text-white font-body">${renderInlineMarkup(stage.value)}</span>`);
+            parts.push(`  <span class="text-lg font-bold text-white font-body"${dp(`${base}.value`)}>${renderInlineMarkup(stage.value)}</span>`);
         }
         parts.push(`</div>`);
     });

package/lib/layouts/grid.js

@@ -1,41 +1,43 @@
-import { renderInlineMarkup, cardWrap, numBadge, iconSquare, slideHeader, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, cardWrap, numBadge, iconSquare, slideHeader, resolveAccent, dp } from "../utils.js";
 import { renderCardContentBlocks } from "../blocks.js";
 export const layoutGrid = (data) => {
     const nCols = data.gridColumns || 3;
     const parts = [slideHeader(data)];
     parts.push(`<div class="grid grid-cols-${nCols} gap-4 px-12 mt-5 flex-1 min-h-0 overflow-hidden content-center">`);
-    (data.items || []).forEach((item) => {
+    (data.items || []).forEach((item, i) => {
         const itemAccent = resolveAccent(item.accentColor);
         const inner = [];
+        const base = `items[${i}]`;
+        const dpTitle = dp(`${base}.title`);
         if (item.icon) {
             inner.push(`<div class="flex flex-col items-center mb-2">`);
             inner.push(`  ${iconSquare(item.icon, itemAccent)}`);
             inner.push(`</div>`);
-            inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body">${renderInlineMarkup(item.title)}</h3>`);
+            inner.push(`<h3 class="text-lg font-bold text-d-text text-center font-body"${dpTitle}>${renderInlineMarkup(item.title)}</h3>`);
         }
         else if (item.num != null) {
             inner.push(`<div class="flex items-center gap-3">`);
             inner.push(`  ${numBadge(item.num, itemAccent)}`);
-            inner.push(`  <h3 class="text-sm font-bold text-d-text font-body">${renderInlineMarkup(item.title)}</h3>`);
+            inner.push(`  <h3 class="text-sm font-bold text-d-text font-body"${dpTitle}>${renderInlineMarkup(item.title)}</h3>`);
             inner.push(`</div>`);
         }
         else {
-            inner.push(`<h3 class="text-lg font-bold text-d-text font-body">${renderInlineMarkup(item.title)}</h3>`);
+            inner.push(`<h3 class="text-lg font-bold text-d-text font-body"${dpTitle}>${renderInlineMarkup(item.title)}</h3>`);
         }
         if (item.description) {
-            inner.push(`<p class="text-sm text-d-muted font-body mt-3">${renderInlineMarkup(item.description)}</p>`);
+            inner.push(`<p class="text-sm text-d-muted font-body mt-3"${dp(`${base}.description`)}>${renderInlineMarkup(item.description)}</p>`);
         }
         if (item.content) {
-            inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content)}</div>`);
+            inner.push(`<div class="mt-3 space-y-3 flex-1 min-h-0 overflow-hidden flex flex-col">${renderCardContentBlocks(item.content, `${base}.content`)}</div>`);
         }
         // Asymmetric grids: items can span multiple columns. Class names are mapped explicitly so the JIT compiler keeps them.
         const SPAN_CLS = { 1: "", 2: "col-span-2", 3: "col-span-3", 4: "col-span-4" };
         const spanCls = item.span && item.span > 1 ? SPAN_CLS[item.span] || "" : "";
-        parts.push(cardWrap(itemAccent, inner.join("\n"), spanCls));
+        parts.push(cardWrap(itemAccent, inner.join("\n"), spanCls, base));
     });
     parts.push(`</div>`);
     if (data.footer) {
-        parts.push(`<p class="text-xs text-d-dim font-body px-12 pb-3">${renderInlineMarkup(data.footer)}</p>`);
+        parts.push(`<p class="text-xs text-d-dim font-body px-12 pb-3"${dp("footer")}>${renderInlineMarkup(data.footer)}</p>`);
     }
     return parts.join("\n");
 };

package/lib/layouts/manifesto.js

@@ -1,13 +1,13 @@
-import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor } from "../utils.js";
-const buildManifestoCard = (line, slideAccent) => {
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor, dp, di } from "../utils.js";
+const buildManifestoCard = (line, slideAccent, basePath) => {
     const color = resolveItemColor(line.accentColor, slideAccent);
     const parts = [];
-    parts.push(`<div class="relative bg-d-card rounded-lg shadow-md overflow-hidden flex flex-col">`);
+    parts.push(`<div class="relative bg-d-card rounded-lg shadow-md overflow-hidden flex flex-col"${di(basePath)}>`);
     parts.push(`  <div class="absolute left-0 top-0 bottom-0 w-1 bg-${c(color)}"></div>`);
     parts.push(`  <div class="px-5 py-4 pl-6 flex-1">`);
-    parts.push(`    <h3 class="text-lg font-bold text-d-text font-body leading-snug">${renderInlineMarkup(line.title)}</h3>`);
+    parts.push(`    <h3 class="text-lg font-bold text-d-text font-body leading-snug"${dp(`${basePath}.title`)}>${renderInlineMarkup(line.title)}</h3>`);
     if (line.description) {
-        parts.push(`    <p class="text-sm text-d-muted font-body mt-1 leading-relaxed">${renderInlineMarkup(line.description)}</p>`);
+        parts.push(`    <p class="text-sm text-d-muted font-body mt-1 leading-relaxed"${dp(`${basePath}.description`)}>${renderInlineMarkup(line.description)}</p>`);
     }
     parts.push(`  </div>`);
     parts.push(`</div>`);
@@ -30,8 +30,8 @@ export const layoutManifesto = (data) => {
     const items = data.items || [];
     const parts = [slideHeader(data)];
     parts.push(`<div class="grid ${gridColsClass(cols)} gap-4 px-12 mt-5 flex-1 min-h-0 content-start">`);
-    items.forEach((line) => {
-        parts.push(buildManifestoCard(line, data.accentColor));
+    items.forEach((line, i) => {
+        parts.push(buildManifestoCard(line, data.accentColor, `items[${i}]`));
     });
     parts.push(`</div>`);
     parts.push(renderOptionalCallout(data.callout));

package/lib/layouts/matrix.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, cardWrap, slideHeader, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, c, cardWrap, slideHeader, resolveAccent, dp } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 export const layoutMatrix = (data) => {
     const parts = [slideHeader(data)];
@@ -22,17 +22,18 @@ export const layoutMatrix = (data) => {
             const idx = r * cols + ci;
             const cell = cells[idx] || { label: "" };
             const accent = resolveAccent(cell.accentColor);
+            const base = `cells[${idx}]`;
             const inner = [];
-            inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body">${renderInlineMarkup(cell.label)}</h3>`);
+            inner.push(`<h3 class="text-lg font-bold text-${c(accent)} font-body"${dp(`${base}.label`)}>${renderInlineMarkup(cell.label)}</h3>`);
             if (cell.items) {
                 inner.push(`<ul class="mt-2 space-y-1 text-sm text-d-muted font-body">`);
-                cell.items.forEach((item) => {
-                    inner.push(`  <li class="flex gap-2"><span class="text-d-dim shrink-0">&bull;</span><span>${renderInlineMarkup(item)}</span></li>`);
+                cell.items.forEach((item, ii) => {
+                    inner.push(`  <li class="flex gap-2"><span class="text-d-dim shrink-0">&bull;</span><span${dp(`${base}.items[${ii}]`)}>${renderInlineMarkup(item)}</span></li>`);
                 });
                 inner.push(`</ul>`);
             }
             if (cell.content) {
-                inner.push(`<div class="mt-2 space-y-2">${renderContentBlocks(cell.content)}</div>`);
+                inner.push(`<div class="mt-2 space-y-2">${renderContentBlocks(cell.content, `${base}.content`)}</div>`);
             }
             parts.push(cardWrap(accent, inner.join("\n"), "flex-1"));
         });

package/lib/layouts/split.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, accentBar, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, c, accentBar, resolveAccent, dp } from "../utils.js";
 import { renderContentBlocks } from "../blocks.js";
 const resolveValign = (valign) => {
     if (valign === "top")
@@ -7,7 +7,7 @@ const resolveValign = (valign) => {
         return "justify-end";
     return "justify-center";
 };
-const buildSplitPanel = (panel, fallbackAccent, ratio) => {
+const buildSplitPanel = (panel, fallbackAccent, ratio, basePath) => {
     const accent = panel.accentColor || fallbackAccent;
     const bg = panel.dark ? "bg-d-card" : "";
     const vCls = resolveValign(panel.valign);
@@ -15,20 +15,20 @@ const buildSplitPanel = (panel, fallbackAccent, ratio) => {
     lines.push(`<div class="${bg} flex flex-col ${vCls} px-10 py-8" style="flex: ${ratio}">`);
     if (panel.label) {
         if (panel.labelBadge) {
-            lines.push(`  <span class="inline-block self-start px-6 py-2.5 rounded-lg bg-${c(accent)} text-lg font-bold text-white font-title mb-4">${renderInlineMarkup(panel.label)}</span>`);
+            lines.push(`  <span class="inline-block self-start px-6 py-2.5 rounded-lg bg-${c(accent)} text-lg font-bold text-white font-title mb-4"${dp(`${basePath}.label`)}>${renderInlineMarkup(panel.label)}</span>`);
         }
         else {
-            lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body mb-2">${renderInlineMarkup(panel.label)}</p>`);
+            lines.push(`  <p class="text-sm font-bold text-${c(accent)} font-body mb-2"${dp(`${basePath}.label`)}>${renderInlineMarkup(panel.label)}</p>`);
         }
     }
     if (panel.title) {
-        lines.push(`  <h2 class="text-[36px] leading-tight font-title font-bold text-d-text">${renderInlineMarkup(panel.title)}</h2>`);
+        lines.push(`  <h2 class="text-[36px] leading-tight font-title font-bold text-d-text"${dp(`${basePath}.title`)}>${renderInlineMarkup(panel.title)}</h2>`);
     }
     if (panel.subtitle) {
-        lines.push(`  <p class="text-base text-d-dim font-body mt-3">${renderInlineMarkup(panel.subtitle)}</p>`);
+        lines.push(`  <p class="text-base text-d-dim font-body mt-3"${dp(`${basePath}.subtitle`)}>${renderInlineMarkup(panel.subtitle)}</p>`);
     }
     if (panel.content) {
-        lines.push(`  <div class="mt-6 space-y-3">${renderContentBlocks(panel.content)}</div>`);
+        lines.push(`  <div class="mt-6 space-y-3">${renderContentBlocks(panel.content, `${basePath}.content`)}</div>`);
     }
     lines.push(`</div>`);
     return lines.join("\n");
@@ -41,10 +41,10 @@ export const layoutSplit = (data) => {
     const rightRatio = data.right?.ratio || 50;
     parts.push(`<div class="flex h-full">`);
     if (data.left) {
-        parts.push(buildSplitPanel(data.left, accent, leftRatio));
+        parts.push(buildSplitPanel(data.left, accent, leftRatio, "left"));
     }
     if (data.right) {
-        parts.push(buildSplitPanel(data.right, accent, rightRatio));
+        parts.push(buildSplitPanel(data.right, accent, rightRatio, "right"));
     }
     parts.push(`</div>`);
     return parts.join("\n");

package/lib/layouts/stats.js

@@ -1,21 +1,22 @@
-import { renderInlineMarkup, c, resolveItemColor, resolveChangeColor, centeredSlideHeader, renderOptionalCallout } from "../utils.js";
+import { renderInlineMarkup, c, resolveItemColor, resolveChangeColor, centeredSlideHeader, renderOptionalCallout, dp, di } from "../utils.js";
 export const layoutStats = (data) => {
     const stats = data.stats || [];
     const parts = [];
     parts.push(centeredSlideHeader(data));
     // Stats cards
     parts.push(`<div class="flex gap-6 mt-10">`);
-    stats.forEach((stat) => {
+    stats.forEach((stat, i) => {
         const color = resolveItemColor(stat.color, data.accentColor);
-        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-10 text-center">`);
+        const base = `stats[${i}]`;
+        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-10 text-center"${di(base)}>`);
         parts.push(`  <div class="h-[3px] bg-${c(color)} rounded-full w-12 mx-auto mb-6"></div>`);
         if (stat.numLabel) {
-            parts.push(`  <p class="font-accent font-extrabold text-${c(color)} text-sm tracking-wider mb-2">${renderInlineMarkup(stat.numLabel)}</p>`);
+            parts.push(`  <p class="font-accent font-extrabold text-${c(color)} text-sm tracking-wider mb-2"${dp(`${base}.numLabel`)}>${renderInlineMarkup(stat.numLabel)}</p>`);
         }
-        parts.push(`  <p class="text-[52px] font-bold text-${c(color)} font-body leading-none">${renderInlineMarkup(stat.value)}</p>`);
-        parts.push(`  <p class="text-lg text-d-muted font-body mt-4">${renderInlineMarkup(stat.label)}</p>`);
+        parts.push(`  <p class="text-[52px] font-bold text-${c(color)} font-body leading-none"${dp(`${base}.value`)}>${renderInlineMarkup(stat.value)}</p>`);
+        parts.push(`  <p class="text-lg text-d-muted font-body mt-4"${dp(`${base}.label`)}>${renderInlineMarkup(stat.label)}</p>`);
         if (stat.change) {
-            parts.push(`  <p class="text-base font-bold text-${c(resolveChangeColor(stat.change))} font-body mt-3">${renderInlineMarkup(stat.change)}</p>`);
+            parts.push(`  <p class="text-base font-bold text-${c(resolveChangeColor(stat.change))} font-body mt-3"${dp(`${base}.change`)}>${renderInlineMarkup(stat.change)}</p>`);
         }
         parts.push(`</div>`);
     });

package/lib/layouts/timeline.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader } from "../utils.js";
+import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader, dp, di } from "../utils.js";
 export const layoutTimeline = (data) => {
     const parts = [];
     const items = data.items || [];
@@ -6,21 +6,22 @@ export const layoutTimeline = (data) => {
     // Timeline items
     parts.push(`<div class="flex items-start mt-10 relative">`);
     parts.push(`<div class="absolute left-4 right-4 top-[52px] h-[2px] bg-d-alt"></div>`);
-    items.forEach((item) => {
+    items.forEach((item, i) => {
         const baseColor = resolveItemColor(item.color, data.accentColor);
         // 'hot' items are emphasized — keep the configured color when set, else fall back to warning (amber) for visibility.
         const color = item.hot ? item.color || "warning" : baseColor;
         const dotBorder = item.done ? `bg-${c(color)}` : `bg-d-alt`;
         const dotInner = item.done ? "bg-d-text" : `bg-${c(color)}`;
         const hotRing = item.hot ? ` ring-2 ring-${c(color)} ring-offset-2 ring-offset-d-bg` : "";
-        parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10">`);
+        const base = `items[${i}]`;
+        parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10"${di(base)}>`);
         parts.push(`  <div class="w-10 h-10 rounded-full ${dotBorder} flex items-center justify-center shadow-lg${hotRing}">`);
         parts.push(`    <div class="w-4 h-4 rounded-full ${dotInner}"></div>`);
         parts.push(`  </div>`);
-        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4">${renderInlineMarkup(item.date)}</p>`);
-        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2">${renderInlineMarkup(item.title)}</p>`);
+        parts.push(`  <p class="text-sm font-bold text-${c(color)} font-body mt-4"${dp(`${base}.date`)}>${renderInlineMarkup(item.date)}</p>`);
+        parts.push(`  <p class="text-base font-bold text-d-text font-body mt-2"${dp(`${base}.title`)}>${renderInlineMarkup(item.title)}</p>`);
         if (item.description) {
-            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3">${renderInlineMarkup(item.description)}</p>`);
+            parts.push(`  <p class="text-sm text-d-muted font-body mt-1 px-3"${dp(`${base}.description`)}>${renderInlineMarkup(item.description)}</p>`);
         }
         parts.push(`</div>`);
     });

package/lib/layouts/title.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, accentBar, renderEyebrow, renderChipRow, resolveAccent } from "../utils.js";
+import { renderInlineMarkup, accentBar, renderEyebrow, renderChipRow, resolveAccent, dp } from "../utils.js";
 /**
  * h1 font-size for the title layout, keyed by titleSize variant.
  * Tuned to match reveal.js scale (base 30px × multiplier): default ≈ 2em, hero ≈ 2.5em.
@@ -20,11 +20,11 @@ export const layoutTitle = (data) => {
         `<div class="absolute -bottom-12 -left-16 w-[280px] h-[280px] rounded-full bg-d-accent opacity-10"></div>`,
         `<div class="flex flex-col justify-center h-full px-16 relative z-10">`,
         eyebrowHtml ? `  <div class="mb-4">${eyebrowHtml}</div>` : "",
-        `  <h1 class="${titleCls} leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h1>`,
-        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body">${renderInlineMarkup(data.subtitle)}</p>` : "",
-        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body">${renderInlineMarkup(data.author)}</p>` : "",
+        `  <h1 class="${titleCls} leading-tight font-title font-bold text-d-text"${dp("title")}>${renderInlineMarkup(data.title)}</h1>`,
+        data.subtitle ? `  <p class="text-2xl text-d-muted mt-6 font-body"${dp("subtitle")}>${renderInlineMarkup(data.subtitle)}</p>` : "",
+        data.author ? `  <p class="text-lg text-d-dim mt-10 font-body"${dp("author")}>${renderInlineMarkup(data.author)}</p>` : "",
         data.note
-            ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body">${renderInlineMarkup(data.note)}</p></div>`
+            ? `  <div class="bg-d-card px-4 py-2 mt-6 inline-block rounded"><p class="text-sm text-d-dim font-body"${dp("note")}>${renderInlineMarkup(data.note)}</p></div>`
             : "",
         chipsHtml,
         `</div>`,

package/lib/layouts/waterfall.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, slideHeader, renderOptionalCallout } from "../utils.js";
+import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, dp } from "../utils.js";
 /** Height of the chart area as percentage of available space */
 const CHART_HEIGHT_PCT = 75;
 export const layoutWaterfall = (data) => {
@@ -25,7 +25,7 @@ export const layoutWaterfall = (data) => {
         // Bar (absolute positioned from bottom)
         parts.push(`  <div class="absolute left-1 right-1 bg-${c(color)} rounded-t" style="bottom: ${bottomPct}%; height: ${heightPct}%"></div>`);
         // Bottom label
-        parts.push(`  <p class="absolute bottom-0 w-full text-xs text-d-muted font-body text-center" style="transform: translateY(100%)">${renderInlineMarkup(item.label)}</p>`);
+        parts.push(`  <p class="absolute bottom-0 w-full text-xs text-d-muted font-body text-center" style="transform: translateY(100%)"${dp(`items[${i}].label`)}>${renderInlineMarkup(item.label)}</p>`);
         parts.push(`</div>`);
     });
     parts.push(`</div>`);

package/lib/utils.d.ts

@@ -1,6 +1,26 @@
 import type { SlideTheme, SlideLayout, CalloutBar } from "./schema.js";
 /** Escape HTML special characters */
 export declare const escapeHtml: (s: string) => string;
+/**
+ * Emit a `data-mulmo-path="..."` attribute (with leading space) for an editable text node.
+ * Consumers like @mulmocast/deck-web use this to map clicks in the rendered HTML back to
+ * the source SlideLayout JSON path (e.g. `title`, `stats[0].value`, `columns[0].content[1].text`).
+ *
+ * Empty path → empty string, so callers can pass `dp(path)` unconditionally.
+ */
+export declare const dp: (path: string) => string;
+/**
+ * Emit a `data-mulmo-item-path="..."` attribute (with leading space) for a drag-reorderable
+ * list-item container (e.g. a `<li>` in a bullets block, a stats card, a timeline step, a
+ * manifesto line, a columns card, a grid item). The path identifies the item ROOT in the
+ * SlideLayout JSON — siblings (items in the same parent array) share the same parent prefix.
+ *
+ * Distinct from `data-mulmo-path` (which points at a leaf editable text). This attribute is
+ * used by editor UIs to wire drag-and-drop reorder.
+ */
+export declare const di: (path: string) => string;
+/** Compose a child path: `dpJoin("columns[0]", "title")` → `columns[0].title`. */
+export declare const dpJoin: (base: string, segment: string) => string;
 /** Escape HTML and convert newlines to <br> */
 export declare const nl2br: (s: string) => string;
 /**
@@ -43,8 +63,8 @@ export declare const isSafeCssBackground: (s: string) => boolean;
 export declare const numBadge: (num: number, colorKey: string) => string;
 /** Render an icon in a square container */
 export declare const iconSquare: (icon: string, colorKey: string) => string;
-/** Render a card wrapper with accent top bar */
-export declare const cardWrap: (accentColor: string, innerHtml: string, extraClass?: string) => string;
+/** Render a card wrapper with accent top bar. Pass `itemPath` to emit a drag-reorder anchor. */
+export declare const cardWrap: (accentColor: string, innerHtml: string, extraClass?: string, itemPath?: string) => string;
 /** Render a callout bar at the bottom of a slide */
 export declare const renderCalloutBar: (obj: {
     text: string;
@@ -60,9 +80,9 @@ export declare const renderCalloutBar: (obj: {
 export declare const renderEyebrow: (eyebrow: {
     label: string;
     color?: string;
-} | undefined, defaultColor?: string) => string;
+} | undefined, defaultColor?: string, basePath?: string) => string;
 /** Render a chip-row (small bordered pill badges, e.g. tags below a title). Empty / undefined input renders nothing. */
-export declare const renderChipRow: (chips: string[] | undefined) => string;
+export declare const renderChipRow: (chips: string[] | undefined, basePath?: string) => string;
 /** Render an accent-colored typographic prefix (e.g. "01") to be placed before a card / stat title. */
 export declare const renderNumLabel: (label: string | undefined, colorKey?: string) => string;
 /** Render header text elements (stepLabel + title + subtitle) without wrapping div */
@@ -77,7 +97,7 @@ export declare const renderHeaderText: (data: {
     };
     titleSize?: "small" | "default" | "large" | "hero";
     subtitleSize?: "default" | "big" | "lead";
-}) => string;
+}, basePath?: string) => string;
 /** Render the common slide header (accent bar + title + subtitle, plus optional eyebrow pill) */
 export declare const slideHeader: (data: {
     accentColor?: string;

package/lib/utils.js

@@ -7,6 +7,26 @@ export const escapeHtml = (s) => {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 };
+/**
+ * Emit a `data-mulmo-path="..."` attribute (with leading space) for an editable text node.
+ * Consumers like @mulmocast/deck-web use this to map clicks in the rendered HTML back to
+ * the source SlideLayout JSON path (e.g. `title`, `stats[0].value`, `columns[0].content[1].text`).
+ *
+ * Empty path → empty string, so callers can pass `dp(path)` unconditionally.
+ */
+export const dp = (path) => (path ? ` data-mulmo-path="${escapeHtml(path)}"` : "");
+/**
+ * Emit a `data-mulmo-item-path="..."` attribute (with leading space) for a drag-reorderable
+ * list-item container (e.g. a `<li>` in a bullets block, a stats card, a timeline step, a
+ * manifesto line, a columns card, a grid item). The path identifies the item ROOT in the
+ * SlideLayout JSON — siblings (items in the same parent array) share the same parent prefix.
+ *
+ * Distinct from `data-mulmo-path` (which points at a leaf editable text). This attribute is
+ * used by editor UIs to wire drag-and-drop reorder.
+ */
+export const di = (path) => (path ? ` data-mulmo-item-path="${escapeHtml(path)}"` : "");
+/** Compose a child path: `dpJoin("columns[0]", "title")` → `columns[0].title`. */
+export const dpJoin = (base, segment) => (base ? `${base}.${segment}` : segment);
 /** Escape HTML and convert newlines to <br> */
 export const nl2br = (s) => {
     return escapeHtml(s).replace(/\n/g, "<br>");
@@ -141,9 +161,9 @@ export const iconSquare = (icon, colorKey) => {
   <span class="text-2xl font-mono font-bold text-${c(colorKey)}">${escapeHtml(icon)}</span>
 </div>`;
 };
-/** Render a card wrapper with accent top bar */
-export const cardWrap = (accentColor, innerHtml, extraClass) => {
-    return `<div class="bg-d-card rounded-lg shadow-lg overflow-hidden flex flex-col min-h-0 ${sanitizeCssClass(extraClass || "")}">
+/** Render a card wrapper with accent top bar. Pass `itemPath` to emit a drag-reorder anchor. */
+export const cardWrap = (accentColor, innerHtml, extraClass, itemPath) => {
+    return `<div class="bg-d-card rounded-lg shadow-lg overflow-hidden flex flex-col min-h-0 ${sanitizeCssClass(extraClass || "")}"${itemPath ? ` data-mulmo-item-path="${escapeHtml(itemPath)}"` : ""}>
   ${accentBar(accentColor)}
   <div class="p-5 flex flex-col flex-1 min-h-0 overflow-hidden">
 ${innerHtml}
@@ -167,18 +187,18 @@ export const renderCalloutBar = (obj) => {
  * Render an eyebrow pill (small uppercase letter-spaced category label).
  * Renders nothing when `eyebrow` is undefined, so callers can pass through unconditionally.
  */
-export const renderEyebrow = (eyebrow, defaultColor) => {
+export const renderEyebrow = (eyebrow, defaultColor, basePath = "") => {
     if (!eyebrow)
         return "";
     const color = c(eyebrow.color ?? defaultColor ?? "primary");
-    return `<span class="inline-flex items-center gap-2 font-accent font-extrabold uppercase tracking-[0.16em] text-[12px] px-3 py-1 rounded-full border border-d-textDim/30 bg-${color}/10 text-${color}">${renderInlineMarkup(eyebrow.label)}</span>`;
+    return `<span class="inline-flex items-center gap-2 font-accent font-extrabold uppercase tracking-[0.16em] text-[12px] px-3 py-1 rounded-full border border-d-textDim/30 bg-${color}/10 text-${color}"${dp(dpJoin(basePath, "eyebrow.label"))}>${renderInlineMarkup(eyebrow.label)}</span>`;
 };
 /** Render a chip-row (small bordered pill badges, e.g. tags below a title). Empty / undefined input renders nothing. */
-export const renderChipRow = (chips) => {
+export const renderChipRow = (chips, basePath = "") => {
     if (!chips || chips.length === 0)
         return "";
     const items = chips
-        .map((label) => `<span class="text-sm px-3 py-1.5 rounded-full border border-d-textDim/30 bg-d-card/40 text-d-text">${renderInlineMarkup(label)}</span>`)
+        .map((label, i) => `<span class="text-sm px-3 py-1.5 rounded-full border border-d-textDim/30 bg-d-card/40 text-d-text"${dp(dpJoin(basePath, `chips[${i}]`))}>${renderInlineMarkup(label)}</span>`)
         .join("");
     return `<div class="flex gap-2 flex-wrap mt-4">${items}</div>`;
 };
@@ -203,20 +223,20 @@ const SUBTITLE_SIZE_CLS = {
     big: "text-[22px]",
 };
 /** Render header text elements (stepLabel + title + subtitle) without wrapping div */
-export const renderHeaderText = (data) => {
+export const renderHeaderText = (data, basePath = "") => {
     const accent = resolveAccent(data.accentColor);
     const lines = [];
-    const eyebrowHtml = renderEyebrow(data.eyebrow, accent);
+    const eyebrowHtml = renderEyebrow(data.eyebrow, accent, basePath);
     if (eyebrowHtml)
         lines.push(`<div class="mb-3">${eyebrowHtml}</div>`);
     if (data.stepLabel) {
-        lines.push(`<p class="text-sm font-bold text-${c(accent)} font-body">${renderInlineMarkup(data.stepLabel)}</p>`);
+        lines.push(`<p class="text-sm font-bold text-${c(accent)} font-body"${dp(dpJoin(basePath, "stepLabel"))}>${renderInlineMarkup(data.stepLabel)}</p>`);
     }
     const titleCls = TITLE_SIZE_CLS[data.titleSize ?? "default"];
-    lines.push(`<h2 class="${titleCls} leading-tight font-title font-bold text-d-text">${renderInlineMarkup(data.title)}</h2>`);
+    lines.push(`<h2 class="${titleCls} leading-tight font-title font-bold text-d-text"${dp(dpJoin(basePath, "title"))}>${renderInlineMarkup(data.title)}</h2>`);
     if (data.subtitle) {
         const subtitleCls = SUBTITLE_SIZE_CLS[data.subtitleSize ?? "default"];
-        lines.push(`<p class="${subtitleCls} text-d-dim mt-2 font-body">${renderInlineMarkup(data.subtitle)}</p>`);
+        lines.push(`<p class="${subtitleCls} text-d-dim mt-2 font-body"${dp(dpJoin(basePath, "subtitle"))}>${renderInlineMarkup(data.subtitle)}</p>`);
     }
     return lines.join("\n");
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmocast/deck",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "MulmoCast deck DSL: JSON-described semantic slide layouts (stats, comparison, timeline, ...) rendered to Tailwind-based HTML",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",