@classic-homes/slides 0.3.0 → 0.4.0

package/README.md

@@ -165,7 +165,17 @@ The core entry has no Node dependencies (it runs in Workers and browsers);
 (with `hint`s for chart, grid, url, video-url and point pickers),
 `blankSlide(layout)` gives a valid starting slide, and `renderDeck(deck,
 { includeHidden: true, initialSlide })` plus the `postMessage` API drive a
-live preview.
+live preview. Fields flagged `advanced` (slide id, speaking time, accent
+colour) belong behind an "Advanced" section.
+
+Click-to-edit: render the preview with `editorMarkers: true` and, inside an
+iframe, clicking a title, bullet or picture posts
+`{ type: 'classic-slides:select', index, path }` to the parent (`index` is the
+deck slide, `path` the field such as `['items', 2, 'text']`, or `null` for the
+slide itself). Send `{ type: 'classic-slides:highlight', index, path }` to
+outline the field being edited. Never turn it on for shared or exported decks.
+`layoutGalleryDeck()` returns one deck with every layout's starting slide, for
+rendering a layout picker's thumbnails in one pass.
 
 Rendered HTML embeds the deck source (minus image data), so
 `extractDeckSource(html)` recovers the editable deck.

package/dist/{chunk-YI7A4EWX.js → chunk-JFUJ47TP.js}

@@ -4,7 +4,7 @@ import {
   LAYOUT_CATEGORIES,
   baseSlide,
   getLayout
-} from "./chunk-GXGDPBAR.js";
+} from "./chunk-PTTLL6PQ.js";
 
 // src/catalog.ts
 import { z } from "zod";
@@ -104,4 +104,4 @@ export {
   deckJsonSchema,
   AUTHORING_GUIDE
 };
-//# sourceMappingURL=chunk-YI7A4EWX.js.map
+//# sourceMappingURL=chunk-JFUJ47TP.js.map

package/dist/{chunk-2IPLZ3SA.js → chunk-L7G3VH7K.js}

@@ -2,7 +2,7 @@ import {
   parseDeckSource,
   renderDeck,
   stringifyDeck
-} from "./chunk-GXGDPBAR.js";
+} from "./chunk-PTTLL6PQ.js";
 
 // src/node/index.ts
 import { readFile, stat, writeFile } from "fs/promises";
@@ -103,4 +103,4 @@ export {
   saveDeckFile,
   buildDeckFile
 };
-//# sourceMappingURL=chunk-2IPLZ3SA.js.map
+//# sourceMappingURL=chunk-L7G3VH7K.js.map

package/dist/{chunk-GXGDPBAR.js → chunk-PTTLL6PQ.js}

@@ -620,6 +620,10 @@ function prose(text) {
     return `<p>${inline(para)}</p>`;
   }).join("");
 }
+function plain(text) {
+  if (!text) return "";
+  return text.replace(/`([^`]+)`/g, "$1").replace(/\[([^\]]+)\]\([^)]+\)/g, "$1").replace(/\*\*(.+?)\*\*/g, "$1").replace(/\*(.+?)\*/g, "$1");
+}
 
 // src/video.ts
 var YT = /^(?:https:\/\/)?(?:www\.|m\.)?(?:youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/|shorts\/|live\/)|youtu\.be\/)([\w-]{11})/;
@@ -2193,8 +2197,11 @@ var LABELS = {
   imageAspect: "Photo shape",
   numberFrom: "First badge number",
   url: "URL",
-  id: "Slide id"
+  id: "Slide id",
+  time: "Speaking time",
+  track: "Accent colour"
 };
+var ADVANCED = /* @__PURE__ */ new Set(["id", "time", "track"]);
 function labelFor(key) {
   if (LABELS[key]) return LABELS[key];
   const words = key.replace(/([A-Z])/g, " $1").toLowerCase();
@@ -2231,7 +2238,8 @@ function describeField(key, schema) {
     required,
     ...description ? { description } : {},
     ...dflt !== void 0 ? { default: dflt } : {},
-    ...MULTILINE.has(key) ? { multiline: true } : {}
+    ...MULTILINE.has(key) ? { multiline: true } : {},
+    ...ADVANCED.has(key) ? { advanced: true } : {}
   };
   if (inner === Image) return { ...base, kind: "image" };
   if (inner === ChartSpec) {
@@ -2335,6 +2343,16 @@ function layoutEditorInfo(name) {
 function allLayoutEditorInfo() {
   return LAYOUTS.map((l) => layoutEditorInfo(l.name));
 }
+function layoutGalleryDeck() {
+  const slides = [];
+  const slideFor = {};
+  for (const layout of LAYOUTS) {
+    slideFor[layout.name] = slides.length;
+    slides.push(blankSlide(layout.name));
+  }
+  const journey2 = { steps: ["Contract", "Design", "Build", "Close", "Move in", "Warranty"] };
+  return { deck: { title: "Layouts", journey: journey2, slides }, slideFor };
+}
 var PLACEHOLDER_IMAGE = "data:image/svg+xml;base64," + btoa(
   '<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="1000" viewBox="0 0 1600 1000"><rect width="1600" height="1000" fill="#ecebe6"/><rect x="24" y="24" width="1552" height="952" fill="none" stroke="#b9bcb4" stroke-width="6" stroke-dasharray="28 20"/><text x="800" y="520" text-anchor="middle" font-family="Figtree,Arial,sans-serif" font-size="64" fill="#7a7a7a">Add a photo</text></svg>'
 );
@@ -2567,8 +2585,83 @@ var RUNTIME_JS = String.raw`
     if (!embedded || e.source !== window.parent) return;
     if (d.type === 'classic-slides:go' && Number.isInteger(d.index)) go(d.index, true);
     else if (d.type === 'classic-slides:notes') { if (notes && notes.classList.contains('open') !== !!d.open) toggleNotes(); }
+    else if (d.type === 'classic-slides:highlight' && editor) highlight(d.index, d.path);
   });
 
+  // ---------- editor click-to-edit ----------
+  // Matches the clicked element to a slide field by its visible text (or an
+  // image by its src), walking up from the target, so layouts need no markup.
+  const editor = embedded && body.hasAttribute('data-editor');
+  const fieldsEl = editor && document.getElementById('deck-fields');
+  const FIELDS = fieldsEl ? JSON.parse(fieldsEl.textContent || '[]') : [];
+  const norm = (t) => (t || '').replace(/\s+/g, ' ').trim();
+  function ownText(el) {
+    let t = '';
+    el.childNodes.forEach((n) => { if (n.nodeType === 3) t += n.textContent; });
+    return norm(t);
+  }
+  function fieldFor(el, candidates) {
+    if (el.tagName === 'IMG') {
+      const src = el.getAttribute('src');
+      return candidates.find((c) => c.img && c.img === src);
+    }
+    const text = norm(el.textContent);
+    const own = ownText(el);
+    return candidates.find((c) => c.text && (c.text === text || (own && c.text === own)));
+  }
+  function locate(target) {
+    const section = target.closest && target.closest('.slide');
+    if (!section) return null;
+    const index = Number(section.getAttribute('data-index'));
+    const candidates = FIELDS[index] || [];
+    for (let el = target; el && el !== section; el = el.parentElement) {
+      const field = fieldFor(el, candidates);
+      if (field) return { index, path: field.path, el };
+    }
+    return { index, path: null, el: section };
+  }
+  let hovered = null;
+  let selected = null;
+  function highlight(index, path) {
+    selected?.classList.remove('cs-edit-selected');
+    selected = null;
+    if (!Array.isArray(path)) return;
+    const key = JSON.stringify(path);
+    const candidates = FIELDS[index] || [];
+    for (const section of deck.querySelectorAll('.slide[data-index="' + index + '"]')) {
+      for (const el of section.querySelectorAll('*')) {
+        const field = fieldFor(el, candidates);
+        if (field && JSON.stringify(field.path) === key) {
+          selected = el;
+          el.classList.add('cs-edit-selected');
+          return;
+        }
+      }
+    }
+  }
+  if (editor) {
+    const style = document.createElement('style');
+    style.textContent = '.cs-edit-hover{outline:2px dashed rgba(0,122,255,.7);outline-offset:4px;cursor:pointer}' +
+      '.cs-edit-selected{outline:2px solid rgb(0,122,255);outline-offset:4px}';
+    document.head.appendChild(style);
+    deck.addEventListener('click', (e) => {
+      const hit = locate(e.target);
+      if (!hit) return;
+      // Links on a slide would navigate the preview away
+      if (e.target.closest('a[href]')) e.preventDefault();
+      window.parent.postMessage({ type: 'classic-slides:select', index: hit.index, path: hit.path }, '*');
+    }, true);
+    deck.addEventListener('mouseover', (e) => {
+      const hit = locate(e.target);
+      const el = hit && hit.path ? hit.el : null;
+      if (el === hovered) return;
+      hovered?.classList.remove('cs-edit-hover');
+      hovered = el;
+      el?.classList.add('cs-edit-hover');
+    });
+    deck.addEventListener('mouseleave', () => { hovered?.classList.remove('cs-edit-hover'); hovered = null; });
+  }
+
   function onKey(e) {
     if (e.metaKey || e.ctrlKey || e.altKey) return;
     const k = e.key;
@@ -3286,6 +3379,48 @@ body.presenter{margin:0;height:100vh;display:grid;grid-template-rows:1fr auto;ba
 
 // src/render.ts
 var PREVIEW_SIZE = { width: 1280, height: 720 };
+var NON_VISUAL_KEYS = /* @__PURE__ */ new Set([
+  "layout",
+  "id",
+  "notes",
+  "time",
+  "hidden",
+  "background",
+  "backgroundImage",
+  "overlay",
+  "track",
+  "step",
+  "stepDone",
+  "showJourney",
+  "href",
+  "url",
+  "fit",
+  "focus",
+  "size",
+  "alt"
+]);
+function fieldMarkers(slide, resolveImage = (src) => src) {
+  const out = [];
+  const walk = (value, path) => {
+    if (typeof value === "string") {
+      const text = plain(value).replace(/\s+/g, " ").trim();
+      if (text) out.push({ path, text });
+    } else if (Array.isArray(value)) {
+      value.forEach((v, i) => walk(v, [...path, i]));
+    } else if (value && typeof value === "object") {
+      const obj = value;
+      if (typeof obj.src === "string") {
+        out.push({ path, img: resolveImage(obj.src) });
+        return;
+      }
+      for (const [key, v] of Object.entries(obj)) {
+        if (!NON_VISUAL_KEYS.has(key)) walk(v, [...path, key]);
+      }
+    }
+  };
+  walk(slide, []);
+  return out;
+}
 var passThrough = (src) => {
   if (/^(data:|https?:)/.test(src)) return src;
   throw new Error(
@@ -3476,6 +3611,12 @@ async function renderDeck(input, options = {}) {
     });
   });
   const withNotes = options.speakerNotes !== false;
+  const fields = options.editorMarkers ? `<script type="application/json" id="deck-fields">${JSON.stringify(
+    deck.slides.map(
+      (slide) => fieldMarkers(slide, (src) => images.get(src) ?? src)
+    )
+  ).replace(/</g, "\\u003c")}</script>
+` : "";
   const json = (v) => JSON.stringify(v).replace(/</g, "\\u003c");
   const stripData = (key, v) => !withNotes && key === "notes" ? void 0 : typeof v === "string" && /^data:/i.test(v) ? "(embedded)" : v;
   const source = options.embedSource === false ? "" : `<script type="application/json" id="deck-source">${JSON.stringify(deck, stripData).replace(/</g, "\\u003c")}</script>
@@ -3492,7 +3633,7 @@ ${deck.description ? `<meta name="description" content="${escapeAttr(deck.descri
 <style id="brand-fonts">${fontsCss()}</style>
 <style>${tokensCss(brand.stock ? void 0 : brand.palette)}${DECK_CSS}${DECK_CSS_EXTRA}</style>
 </head>
-<body${wantFooter ? ' class="has-foot"' : ""}${options.initialSlide ? ` data-initial-slide="${Math.max(0, Math.floor(options.initialSlide))}"` : ""}${deck.settings.autoAdvance ? ` data-auto-advance="${deck.settings.autoAdvance}"` : ""}${deck.settings.loop ? " data-loop" : ""}${options.allowEmbeddedKiosk ? " data-embedded-kiosk" : ""}>
+<body${wantFooter ? ' class="has-foot"' : ""}${options.initialSlide ? ` data-initial-slide="${Math.max(0, Math.floor(options.initialSlide))}"` : ""}${deck.settings.autoAdvance ? ` data-auto-advance="${deck.settings.autoAdvance}"` : ""}${deck.settings.loop ? " data-loop" : ""}${options.allowEmbeddedKiosk ? " data-embedded-kiosk" : ""}${options.editorMarkers ? " data-editor" : ""}>
 <div class="rail" id="rail"></div>
 <main class="deck" id="deck">
 ${sections.join("\n")}
@@ -3503,7 +3644,7 @@ ${withNotes ? `<div class="hud"><span class="counter" id="counter" aria-live="po
 <aside class="notes" id="notes" aria-live="polite"><div class="notes__head"><span class="tag">Speaker notes</span><span class="time" id="notesTime"></span></div><div class="notes__body" id="notesBody"></div></aside>` : `<div class="hud"><span class="counter" id="counter" aria-live="polite"></span></div>
 <div class="hint"><kbd>&uarr;</kbd><kbd>&darr;</kbd> or <kbd>Space</kbd> navigate &middot; <kbd>O</kbd> overview &middot; <kbd>F</kbd> fullscreen</div>`}
 <script type="application/json" id="deck-notes">${json(withNotes ? notes : [])}</script>
-${source}<script>${RUNTIME_JS}</script>
+${source}${fields}<script>${RUNTIME_JS}</script>
 </body>
 </html>
 `;
@@ -3727,6 +3868,7 @@ export {
   commonSlideFields,
   layoutEditorInfo,
   allLayoutEditorInfo,
+  layoutGalleryDeck,
   PLACEHOLDER_IMAGE,
   isPlaceholderImage,
   blankSlide,
@@ -3735,10 +3877,11 @@ export {
   formatIssues,
   DeckError,
   PREVIEW_SIZE,
+  fieldMarkers,
   collectImageSources,
   renderDeck,
   extractDeckSource,
   parseDeckSource,
   stringifyDeck
 };
-//# sourceMappingURL=chunk-GXGDPBAR.js.map
+//# sourceMappingURL=chunk-PTTLL6PQ.js.map