@bendyline/squisq-editor-react 1.6.1 → 2.0.0

package/src/timeline/timelineOps.ts

@@ -0,0 +1,277 @@
+/**
+ * Pure edits over the authored ASCII timeline model.
+ *
+ * The code fence remains the source of truth. Canvas coordinates are
+ * normalized to the same global, shared scale used by
+ * `asciiTimelineToTemplateData`; commands render the edited model back into
+ * canonical fence text after applying one of these operations.
+ */
+
+import type {
+  AsciiTimeline,
+  AsciiTimelineEvent,
+  AsciiTimelineMarker,
+  AsciiTimelineSide,
+} from '@bendyline/squisq/doc';
+
+const STRUCTURAL_MARKERS = /[●○◉◆◇•]+/gu;
+const LEADING_RAILS = /^[─━═╌╍┄┅┈┉-]+/u;
+const COORDINATE_PRECISION = 1_000;
+const COLUMN_EPSILON = 1 / COORDINATE_PRECISION / 2;
+
+export interface TimelineEventPatch {
+  label?: string;
+  /** `null` clears the optional description. */
+  description?: string | null;
+  side?: AsciiTimelineSide;
+  /** `null` restores the label side/default placement. */
+  descriptionSide?: AsciiTimelineSide | null;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+  /** Normalized position on the global timeline scale. */
+  position?: number;
+}
+
+export interface AddTimelineEventOptions {
+  id?: string;
+  label?: string;
+  description?: string;
+  side?: AsciiTimelineSide;
+  descriptionSide?: AsciiTimelineSide;
+  callout?: boolean;
+  marker?: AsciiTimelineMarker;
+}
+
+export interface AddTimelineEventResult {
+  timeline: AsciiTimeline;
+  eventId: string;
+}
+
+/**
+ * Normalize editable one-line prose exactly as the canonical core renderer
+ * does. This prevents the verified command path from accepting a value that
+ * is silently reinterpreted as timeline syntax on its first render.
+ */
+export function sanitizeTimelineText(value: string): string {
+  const normalized = value
+    .normalize('NFC')
+    .replace(/[\r\n\t]+/g, ' ')
+    .replace(STRUCTURAL_MARKERS, '·')
+    .replace(/\*/g, '∗')
+    .replace(/::/g, '∶')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return normalized.replace(LEADING_RAILS, (run) =>
+    Array.from(run, (character) => (character === '-' ? '−' : '–')).join(''),
+  );
+}
+
+/** Return a globally unique, renderer-safe event id. */
+export function nextTimelineEventId(timeline: AsciiTimeline, base = 'event'): string {
+  const used = new Set(timeline.tracks.flatMap((track) => track.events.map((event) => event.id)));
+  const safeBase = safeId(base) || 'event';
+  if (!used.has(safeBase)) return safeBase;
+  let suffix = 2;
+  while (used.has(`${safeBase}-${suffix}`)) suffix++;
+  return `${safeBase}-${suffix}`;
+}
+
+/**
+ * Add a visible point to `trackId` at a normalized global rail position.
+ * Returns the stable id so the canvas can select/focus the new point after
+ * the fence rewrite.
+ */
+export function addTimelineEventOp(
+  timeline: AsciiTimeline,
+  trackId: string,
+  position: number,
+  options: AddTimelineEventOptions = {},
+): AddTimelineEventResult | null {
+  if (!Number.isFinite(position)) return null;
+  const track = timeline.tracks.find((candidate) => candidate.id === trackId);
+  if (!track) return null;
+
+  const column = columnAtPosition(timeline, position);
+  // Two coincident markers cannot be independently hit on the canvas. A
+  // marker click should select the existing point rather than adding atop it.
+  if (track.events.some((event) => Math.abs(event.column - column) <= COLUMN_EPSILON)) return null;
+
+  const label = sanitizeTimelineText(options.label ?? '') || 'New event';
+  const description = sanitizeTimelineText(options.description ?? '');
+  const eventId = nextTimelineEventId(timeline, options.id ?? label);
+  const insertionIndex = track.events.filter((event) => event.column < column).length;
+  const side = options.side ?? (insertionIndex % 2 === 0 ? 'above' : 'below');
+  const event: AsciiTimelineEvent = {
+    id: eventId,
+    label,
+    ...(description ? { description } : {}),
+    column,
+    side,
+    ...(description && options.descriptionSide ? { descriptionSide: options.descriptionSide } : {}),
+    ...(options.callout === false ? { callout: false } : {}),
+    marker: options.marker ?? 'filled',
+  };
+
+  const events = [...track.events, event].sort(
+    (left, right) => left.column - right.column || left.id.localeCompare(right.id),
+  );
+  const tracks = timeline.tracks.map((candidate) =>
+    candidate.id === trackId ? { ...candidate, events } : candidate,
+  );
+  // ASCII art has no distinct diamond glyph. Promote the authored vocabulary
+  // when the inspector explicitly requests one rather than silently folding
+  // the user's choice back to a filled point in the renderer.
+  const style = options.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { timeline: { ...timeline, tracks, style }, eventId };
+}
+
+/** Update one point without changing its stable id or branch endpoints. */
+export function updateTimelineEventOp(
+  timeline: AsciiTimeline,
+  eventId: string,
+  patch: TimelineEventPatch,
+): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location || Object.keys(patch).length === 0) return timeline;
+
+  const hasLabel = Object.prototype.hasOwnProperty.call(patch, 'label');
+  const hasDescription = Object.prototype.hasOwnProperty.call(patch, 'description');
+  const hasDescriptionSide = Object.prototype.hasOwnProperty.call(patch, 'descriptionSide');
+  const hasPosition = Object.prototype.hasOwnProperty.call(patch, 'position');
+  const label = hasLabel ? sanitizeTimelineText(patch.label ?? '') : location.event.label;
+  if (!label) return timeline;
+
+  let description = hasDescription
+    ? sanitizeTimelineText(patch.description ?? '')
+    : location.event.description;
+  if (!description) description = undefined;
+
+  let column = location.event.column;
+  if (hasPosition) {
+    if (!Number.isFinite(patch.position)) return timeline;
+    column = columnAtPosition(timeline, patch.position as number);
+    const collision = location.track.events.some(
+      (event) => event.id !== eventId && Math.abs(event.column - column) <= COLUMN_EPSILON,
+    );
+    if (collision) return timeline;
+  }
+
+  const editedText = hasLabel || hasDescription;
+  const callout =
+    patch.callout !== undefined
+      ? patch.callout
+      : editedText && location.event.callout === false
+        ? true
+        : location.event.callout;
+  const descriptionSide = !description
+    ? undefined
+    : hasDescriptionSide
+      ? (patch.descriptionSide ?? undefined)
+      : location.event.descriptionSide;
+
+  const nextEvent: AsciiTimelineEvent = {
+    ...location.event,
+    label,
+    column,
+    ...(description ? { description } : {}),
+    ...(patch.side ? { side: patch.side } : {}),
+    ...(descriptionSide ? { descriptionSide } : {}),
+    ...(callout !== undefined ? { callout } : {}),
+    ...(patch.marker ? { marker: patch.marker } : {}),
+  };
+  if (!description) delete nextEvent.description;
+  if (!descriptionSide) delete nextEvent.descriptionSide;
+
+  if (eventsEqual(location.event, nextEvent)) return timeline;
+  const events = location.track.events
+    .map((event) => (event.id === eventId ? nextEvent : event))
+    .sort((left, right) => left.column - right.column || left.id.localeCompare(right.id));
+  // A point authored exactly on a track boundary anchors that edge. Let the
+  // old scale remain stable throughout a drag preview, then move/reassign the
+  // boundary in the single drop transaction. Crossing the next point hands
+  // the edge to that point; moving any point outside a shorter track expands
+  // the track so every marker remains inside its authored bounds.
+  const movedPosition = hasPosition && nextEvent.column !== location.event.column;
+  const anchoredStart =
+    movedPosition && Math.abs(location.event.column - location.track.startColumn) <= COLUMN_EPSILON;
+  const anchoredEnd =
+    movedPosition && Math.abs(location.event.column - location.track.endColumn) <= COLUMN_EPSILON;
+  const eventStart = Math.min(...events.map((event) => event.column));
+  const eventEnd = Math.max(...events.map((event) => event.column));
+  const startColumn = anchoredStart ? eventStart : Math.min(location.track.startColumn, eventStart);
+  const endColumn = anchoredEnd ? eventEnd : Math.max(location.track.endColumn, eventEnd);
+  const tracks = timeline.tracks.map((track) =>
+    track.id === location.track.id ? { ...track, startColumn, endColumn, events } : track,
+  );
+  const style = patch.marker === 'diamond' ? 'unicode' : timeline.style;
+  return { ...timeline, tracks, style };
+}
+
+/**
+ * Remove a point and every incident branch. Empty tracks are removed because
+ * the canonical renderer cannot represent them. The last point in the whole
+ * timeline is retained so an edit cannot erase its own source fence/widget.
+ */
+export function removeTimelineEventOp(timeline: AsciiTimeline, eventId: string): AsciiTimeline {
+  const location = findEvent(timeline, eventId);
+  if (!location) return timeline;
+  const eventCount = timeline.tracks.reduce((sum, track) => sum + track.events.length, 0);
+  if (eventCount <= 1) return timeline;
+
+  const tracks = timeline.tracks
+    .map((track) =>
+      track.id === location.track.id
+        ? { ...track, events: track.events.filter((event) => event.id !== eventId) }
+        : track,
+    )
+    .filter((track) => track.events.length > 0);
+  const links = timeline.links.filter((link) => link.source !== eventId && link.target !== eventId);
+  return { ...timeline, tracks, links };
+}
+
+function globalBounds(timeline: AsciiTimeline): { start: number; span: number } {
+  if (timeline.tracks.length === 0) return { start: 0, span: 1 };
+  const start = Math.min(...timeline.tracks.map((track) => track.startColumn));
+  const end = Math.max(...timeline.tracks.map((track) => track.endColumn));
+  return { start, span: Math.max(1, end - start) };
+}
+
+function columnAtPosition(timeline: AsciiTimeline, position: number): number {
+  const { start, span } = globalBounds(timeline);
+  const clamped = Math.max(0, Math.min(1, position));
+  return Math.round((start + clamped * span) * COORDINATE_PRECISION) / COORDINATE_PRECISION;
+}
+
+function safeId(value: string): string {
+  return (
+    sanitizeTimelineText(value)
+      .toLowerCase()
+      .replace(/[^a-z0-9_.~-]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'event'
+  );
+}
+
+function findEvent(
+  timeline: AsciiTimeline,
+  eventId: string,
+): { track: AsciiTimeline['tracks'][number]; event: AsciiTimelineEvent } | null {
+  for (const track of timeline.tracks) {
+    const event = track.events.find((candidate) => candidate.id === eventId);
+    if (event) return { track, event };
+  }
+  return null;
+}
+
+function eventsEqual(left: AsciiTimelineEvent, right: AsciiTimelineEvent): boolean {
+  return (
+    left.id === right.id &&
+    left.label === right.label &&
+    left.description === right.description &&
+    left.column === right.column &&
+    left.side === right.side &&
+    left.descriptionSide === right.descriptionSide &&
+    left.callout === right.callout &&
+    left.marker === right.marker
+  );
+}

package/src/timeline/timelinePaste.ts

@@ -0,0 +1,8 @@
+/** Paste gate for bare, high-confidence Unicode timeline art. */
+
+import { detectAsciiTimeline } from '@bendyline/squisq/doc';
+
+export function shouldPasteAsTimelineFence(text: string): boolean {
+  if (!text.trim() || /^\s*```/m.test(text)) return false;
+  return detectAsciiTimeline(text).isTimeline;
+}

package/src/tiptapBridge.ts

@@ -11,7 +11,6 @@
  * using squisq's own parser.
  */
 
-import { templateLabel } from './TemplatePicker';
 import { resolveIcon } from '@bendyline/squisq/icons';
 import {
   matchTrailingTemplateAnnotation,
@@ -85,12 +84,28 @@ export function markdownToTiptap(markdown: string): string {
   let listType: 'ul' | 'ol' | 'task' = 'ul';
   let inTable = false;
   let tableLines: string[] = [];
+  let pendingBlankLines = 0;
+
+  const flushPendingBlankParagraphs = () => {
+    if (pendingBlankLines === 0) return;
+    const emptyParagraphs =
+      outputBlocks.length === 0 ? pendingBlankLines : Math.max(0, pendingBlankLines - 1);
+    for (let i = 0; i < emptyParagraphs; i++) {
+      outputBlocks.push('<p></p>');
+    }
+    pendingBlankLines = 0;
+  };
+
+  const pushBlock = (block: string) => {
+    flushPendingBlankParagraphs();
+    outputBlocks.push(block);
+  };
 
   const flushList = () => {
     if (inList && listItems.length > 0) {
       const tag = listType === 'ol' ? 'ol' : 'ul';
       const attr = listType === 'task' ? ' data-type="taskList"' : '';
-      outputBlocks.push(`<${tag}${attr}>${listItems.join('')}</${tag}>`);
+      pushBlock(`<${tag}${attr}>${listItems.join('')}</${tag}>`);
       listItems = [];
       inList = false;
     }
@@ -111,7 +126,7 @@ export function markdownToTiptap(markdown: string): string {
     if (tableLines.length < 2 || !isSeparator) {
       // Not a valid table — render accumulated lines as paragraphs
       for (const tl of tableLines) {
-        outputBlocks.push(`<p>${inlineToHtml(tl)}</p>`);
+        pushBlock(`<p>${inlineToHtml(tl)}</p>`);
       }
       inTable = false;
       tableLines = [];
@@ -146,7 +161,7 @@ export function markdownToTiptap(markdown: string): string {
       })
       .join('');
 
-    outputBlocks.push(`<table><thead><tr>${thHtml}</tr></thead><tbody>${bodyHtml}</tbody></table>`);
+    pushBlock(`<table><thead><tr>${thHtml}</tr></thead><tbody>${bodyHtml}</tbody></table>`);
 
     inTable = false;
     tableLines = [];
@@ -159,15 +174,14 @@ export function markdownToTiptap(markdown: string): string {
     if (line.startsWith('```')) {
       if (!inCodeBlock) {
         flushList();
+        flushPendingBlankParagraphs();
         inCodeBlock = true;
         codeBlockLang = line.slice(3).trim();
         codeBlockLines = [];
         continue;
       } else {
         const langAttr = codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : '';
-        outputBlocks.push(
-          `<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`,
-        );
+        pushBlock(`<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`);
         inCodeBlock = false;
         codeBlockLang = '';
         codeBlockLines = [];
@@ -188,9 +202,12 @@ export function markdownToTiptap(markdown: string): string {
     // Blank line flushes list
     if (line.trim() === '') {
       flushList();
+      pendingBlankLines++;
       continue;
     }
 
+    flushPendingBlankParagraphs();
+
     // Headings
     const headingMatch = line.match(/^(#{1,6})\s+(.+)$/);
     if (headingMatch) {
@@ -233,8 +250,16 @@ export function markdownToTiptap(markdown: string): string {
         // tokens are stored raw — quotes included — so tiptapToMarkdown
         // can re-join them into the annotation verbatim.
         const tokens = tokenizeAttrTokens(templateInner);
-        attrs += ` data-template="${escapeHtml(tokens[0] ?? '')}"`;
-        const params = tokens.slice(1).filter((t) => t.includes('='));
+        if (tokens.length === 0) {
+          // Preserve an authored `{[]}` through the editable Tiptap document
+          // while keeping the raw marker out of the visible heading text.
+          attrs += ' data-template-empty="true"';
+        }
+        const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
+        if (!firstIsParam && tokens[0]) {
+          attrs += ` data-template="${escapeHtml(tokens[0])}"`;
+        }
+        const params = tokens.slice(firstIsParam ? 0 : 1).filter((t) => t.includes('='));
         if (params.length > 0) {
           attrs += ` data-template-params="${escapeHtml(params.join(' '))}"`;
         }
@@ -243,21 +268,21 @@ export function markdownToTiptap(markdown: string): string {
         attrs += ` data-block-attrs="${escapeHtml(pandocInner)}"`;
       }
 
-      outputBlocks.push(`<h${level}${attrs}>${inlineToHtml(text)}</h${level}>`);
+      pushBlock(`<h${level}${attrs}>${inlineToHtml(text)}</h${level}>`);
       continue;
     }
 
     // Thematic break
     if (/^(---|\*\*\*|___)(\s*)$/.test(line.trim())) {
       flushList();
-      outputBlocks.push('<hr>');
+      pushBlock('<hr>');
       continue;
     }
 
     // Blockquote
     if (line.startsWith('> ')) {
       flushList();
-      outputBlocks.push(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
+      pushBlock(`<blockquote><p>${inlineToHtml(line.slice(2))}</p></blockquote>`);
       continue;
     }
 
@@ -325,7 +350,7 @@ export function markdownToTiptap(markdown: string): string {
       flushList();
       const alt = escapeHtml(standaloneImageMatch[1] ?? '');
       const src = escapeHtml(standaloneImageMatch[2] ?? '');
-      outputBlocks.push(`<img alt="${alt}" src="${src}">`);
+      pushBlock(`<img alt="${alt}" src="${src}">`);
       continue;
     }
 
@@ -337,7 +362,7 @@ export function markdownToTiptap(markdown: string): string {
     const trimmed = line.trim();
     if (/^<img\b[^>]*>$/i.test(trimmed)) {
       flushList();
-      outputBlocks.push(trimmed);
+      pushBlock(trimmed);
       continue;
     }
 
@@ -348,24 +373,23 @@ export function markdownToTiptap(markdown: string): string {
     // picks up the tag attributes (`src`, `controls`, …).
     if (/^<(?:video|audio)\b[^>]*>(?:[\s\S]*?<\/(?:video|audio)>)?$/i.test(trimmed)) {
       flushList();
-      outputBlocks.push(trimmed);
+      pushBlock(trimmed);
       continue;
     }
 
     // Regular paragraph
     flushList();
-    outputBlocks.push(`<p>${inlineToHtml(line)}</p>`);
+    pushBlock(`<p>${inlineToHtml(line)}</p>`);
   }
 
   // Close any remaining open blocks
   if (inCodeBlock) {
     const langAttr = codeBlockLang ? ` class="language-${escapeHtml(codeBlockLang)}"` : '';
-    outputBlocks.push(
-      `<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`,
-    );
+    pushBlock(`<pre><code${langAttr}>${escapeHtml(codeBlockLines.join('\n'))}</code></pre>`);
   }
   flushList();
   flushTable();
+  flushPendingBlankParagraphs();
 
   return outputBlocks.join('') || '<p></p>';
 }
@@ -389,33 +413,36 @@ export function tiptapToMarkdown(html: string): string {
     if (headingMatch) {
       const level = parseInt(headingMatch[1], 10);
       const attrs = headingMatch[2];
-      let text = htmlToInline(headingMatch[3]);
+      const headingHtml = headingMatch[3];
+      // Template/property badges are editor chrome, not heading content. Strip
+      // them structurally before converting the inline HTML. Older builds
+      // briefly rendered the template label as real badge text; using the
+      // markup boundary preserves that cleanup without mistaking a legitimate
+      // heading suffix (for example "A Famous Quote") for the badge label.
+      const chromeStart = headingHtml.search(
+        /<span\b[^>]*\bclass="[^"]*\bsquisq-(?:template|props)-badge\b[^"]*"[^>]*>/i,
+      );
+      let text = htmlToInline(chromeStart >= 0 ? headingHtml.slice(0, chromeStart) : headingHtml);
 
       // Re-inject heading annotations from data attributes. Canonical
-      // emit order: Pandoc `{#…}` first, then squisq `{[…]}` template
-      // annotation (matches blockToMdast in core/markdown/convert.ts).
+      // emit order: Pandoc `{#…}` first, then squisq `{[…]}` annotation
+      // (matches blockToMdast in core/markdown/convert.ts).
       const blockAttrsMatch = attrs.match(/data-block-attrs="([^"]*)"/);
       const tmplMatch = attrs.match(/data-template="([^"]+)"/);
-      if (tmplMatch) {
-        // Strip an accidental trailing copy of the template label that an
-        // earlier broken build briefly rendered as real text inside the
-        // badge. Existing documents self-heal on save.
-        const label = templateLabel(tmplMatch[1]);
-        if (label && text.endsWith(label)) {
-          text = text.slice(0, -label.length).trimEnd();
-        }
-      }
+      const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
+      const hasEmptyTemplateAnnotation = /\sdata-template-empty(?:="[^"]*")?/.test(attrs);
       if (blockAttrsMatch) {
         const inner = unescapeHtml(blockAttrsMatch[1]);
         text += ` {${inner}}`;
       }
-      if (tmplMatch) {
-        let annotation = tmplMatch[1];
-        const paramsMatch = attrs.match(/data-template-params="([^"]+)"/);
+      if (tmplMatch || paramsMatch) {
+        let annotation = tmplMatch ? tmplMatch[1] : '';
         if (paramsMatch) {
-          annotation += ' ' + unescapeHtml(paramsMatch[1]);
+          annotation += (annotation ? ' ' : '') + unescapeHtml(paramsMatch[1]);
         }
         text += ` {[${annotation}]}`;
+      } else if (hasEmptyTemplateAnnotation) {
+        text += ' {[]}';
       }
 
       lines.push('#'.repeat(level) + ' ' + text);
@@ -424,12 +451,13 @@ export function tiptapToMarkdown(html: string): string {
       continue;
     }
 
-    // Code blocks
-    const codeMatch = remaining.match(
-      /^<pre><code(?:\s+class="language-([^"]*)")?>(.*?)<\/code><\/pre>/s,
-    );
+    // Code blocks — tolerate attributes on <pre> and <code>: real
+    // editor.getHTML() output carries class="squisq-code-block" on the
+    // <pre> (StarterKit codeBlock HTMLAttributes), which a bare
+    // `<pre><code` anchor never matches, silently dropping the fence.
+    const codeMatch = remaining.match(/^<pre\b[^>]*><code\b([^>]*)>(.*?)<\/code><\/pre>/s);
     if (codeMatch) {
-      const lang = codeMatch[1] || '';
+      const lang = /\bclass="language-([^"]*)"/.exec(codeMatch[1] ?? '')?.[1] ?? '';
       const code = unescapeHtml(codeMatch[2]);
       lines.push('```' + lang);
       lines.push(code);
@@ -575,6 +603,8 @@ export function tiptapToMarkdown(html: string): string {
       if (text.trim()) {
         lines.push(text);
         lines.push('');
+      } else {
+        lines.push('');
       }
       remaining = remaining.slice(pMatch[0].length);
       continue;
@@ -633,13 +663,7 @@ export function tiptapToMarkdown(html: string): string {
     remaining = remaining.slice(1);
   }
 
-  // Clean up trailing blank lines
-  return (
-    lines
-      .join('\n')
-      .replace(/\n{3,}/g, '\n\n')
-      .trim() + '\n'
-  );
+  return lines.join('\n');
 }
 
 /**
@@ -793,6 +817,7 @@ function unescapeHtml(text: string): string {
     .replace(/&lt;/g, '<')
     .replace(/&gt;/g, '>')
     .replace(/&quot;/g, '"')
+    .replace(/&nbsp;|&#160;|&#xA0;/gi, '\u00a0')
     .replace(/&amp;/g, '&');
 }
 
@@ -869,7 +894,7 @@ function inlineToHtml(text: string): string {
   // eslint-disable-next-line no-control-regex
   result = result.replace(/\u0000PH(\d+)\u0000/g, (_m, idx) => placeholders[Number(idx)] ?? '');
 
-  return result;
+  return preserveLeadingSpaces(result);
 }
 
 /** Convert inline HTML back to markdown */
@@ -929,5 +954,15 @@ function htmlToInline(html: string): string {
   // Strip remaining tags
   result = result.replace(RE_STRIP_TAGS, '');
 
-  return unescapeHtml(result);
+  return restoreLeadingSpaces(unescapeHtml(result));
+}
+
+function preserveLeadingSpaces(html: string): string {
+  return html.replace(/^ +/, (spaces) => '&nbsp;'.repeat(spaces.length));
+}
+
+function restoreLeadingSpaces(text: string): string {
+  return text.replace(/(^|\n)(\u00a0+)/g, (_match, prefix: string, spaces: string) => {
+    return prefix + ' '.repeat(spaces.length);
+  });
 }

package/src/transformStyleId.ts

@@ -0,0 +1,17 @@
+import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
+
+const VALID_TRANSFORM_IDS = new Set(getTransformStyleSummaries().map((summary) => summary.id));
+
+/**
+ * Normalize a transform id read from document frontmatter.
+ *
+ * `dataDriven` was written by older Squisq versions. It remains accepted as a
+ * wire-format compatibility value, but every editor surface exposes and writes
+ * only the canonical `data-driven` id.
+ */
+export function resolvePersistedTransformStyleId(value: unknown): string | null {
+  if (typeof value !== 'string') return null;
+  const normalized = value.trim().toLowerCase().replace(/\s+/g, '-');
+  if (normalized === 'datadriven') return 'data-driven';
+  return VALID_TRANSFORM_IDS.has(normalized) ? normalized : null;
+}