@mulmocast/deck 0.6.0 → 0.7.0

package/lib/blocks.js

@@ -1,4 +1,4 @@
-import { escapeHtml, c, generateSlideId, renderInlineMarkup, blockTitle, resolveChangeColor, resolveAccent, dp } 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).
@@ -191,7 +191,10 @@ const renderBullets = (block, path = "") => {
         const itemCls = itemStyle.fontCls === blockStyle.fontCls && itemStyle.colorCls === blockStyle.colorCls ? "" : ` ${itemStyle.fontCls} ${itemStyle.colorCls}`;
         // 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`) : "";
-        return `  <li class="flex flex-col gap-1${itemCls}"><div class="flex gap-2">${markerHtml}<span${dp(itemPath)}>${renderInlineMarkup(text)}</span></div>${subHtml}</li>`;
+        // 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}>`;

package/lib/layouts/columns.js

@@ -32,7 +32,7 @@ const buildColumnCard = (col, basePath) => {
     if (col.footer) {
         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 || [];

package/lib/layouts/grid.js

@@ -33,7 +33,7 @@ export const layoutGrid = (data) => {
         // 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) {

package/lib/layouts/manifesto.js

@@ -1,8 +1,8 @@
-import { renderInlineMarkup, c, slideHeader, renderOptionalCallout, resolveItemColor, dp } from "../utils.js";
+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"${dp(`${basePath}.title`)}>${renderInlineMarkup(line.title)}</h3>`);

package/lib/layouts/stats.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, resolveItemColor, resolveChangeColor, centeredSlideHeader, renderOptionalCallout, dp } 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 = [];
@@ -8,7 +8,7 @@ export const layoutStats = (data) => {
     stats.forEach((stat, i) => {
         const color = resolveItemColor(stat.color, data.accentColor);
         const base = `stats[${i}]`;
-        parts.push(`<div class="flex-1 bg-d-card rounded-lg shadow-lg p-10 text-center">`);
+        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"${dp(`${base}.numLabel`)}>${renderInlineMarkup(stat.numLabel)}</p>`);

package/lib/layouts/timeline.js

@@ -1,4 +1,4 @@
-import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader, dp } from "../utils.js";
+import { renderInlineMarkup, c, resolveItemColor, centeredSlideHeader, dp, di } from "../utils.js";
 export const layoutTimeline = (data) => {
     const parts = [];
     const items = data.items || [];
@@ -14,7 +14,7 @@ export const layoutTimeline = (data) => {
         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` : "";
         const base = `items[${i}]`;
-        parts.push(`<div class="flex-1 flex flex-col items-center text-center relative z-10">`);
+        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>`);

package/lib/utils.d.ts

@@ -9,6 +9,16 @@ export declare const escapeHtml: (s: string) => string;
  * 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> */
@@ -53,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;

package/lib/utils.js

@@ -15,6 +15,16 @@ export const escapeHtml = (s) => {
  * 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> */
@@ -151,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}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mulmocast/deck",
-  "version": "0.6.0",
+  "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",