@bendyline/squisq-editor-react 1.6.1 → 1.6.2

package/src/__tests__/previewControls.test.tsx

@@ -4,7 +4,12 @@
 import { afterEach, describe, expect, it } from 'vitest';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { EditorProvider, useEditorContext } from '../EditorContext';
-import { PreviewModeSwitch, PreviewSettingsProvider, usePreviewSettings } from '../PreviewControls';
+import {
+  PreviewModeSwitch,
+  PreviewSettingsProvider,
+  PreviewToolbarControls,
+  usePreviewSettings,
+} from '../PreviewControls';
 
 function ModeProbe() {
   const { activeDisplayMode } = usePreviewSettings();
@@ -21,6 +26,15 @@ function PreviewHarness() {
   );
 }
 
+function PreviewToolbarHarness() {
+  const { doc } = useEditorContext();
+  return (
+    <PreviewSettingsProvider doc={doc}>
+      <PreviewToolbarControls />
+    </PreviewSettingsProvider>
+  );
+}
+
 function renderPreviewControls(markdown: string) {
   render(
     <EditorProvider initialMarkdown={markdown}>
@@ -29,6 +43,14 @@ function renderPreviewControls(markdown: string) {
   );
 }
 
+function renderPreviewToolbar(markdown: string) {
+  render(
+    <EditorProvider initialMarkdown={markdown}>
+      <PreviewToolbarHarness />
+    </EditorProvider>,
+  );
+}
+
 afterEach(() => cleanup());
 
 describe('PreviewModeSwitch', () => {
@@ -68,3 +90,74 @@ describe('PreviewModeSwitch', () => {
     expect(screen.getByRole('button', { name: 'Page' }).getAttribute('aria-pressed')).toBe('true');
   });
 });
+
+describe('PreviewToolbarControls', () => {
+  it('keeps the overflow popover inside the left viewport edge', async () => {
+    const originalResizeObserver = globalThis.ResizeObserver;
+    const originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+    const originalClientWidth = Object.getOwnPropertyDescriptor(
+      HTMLElement.prototype,
+      'clientWidth',
+    );
+
+    class ResizeObserverStub implements ResizeObserver {
+      readonly callback: ResizeObserverCallback;
+
+      constructor(callback: ResizeObserverCallback) {
+        this.callback = callback;
+      }
+
+      observe() {
+        this.callback([], this);
+      }
+
+      unobserve() {}
+
+      disconnect() {}
+    }
+
+    globalThis.ResizeObserver = ResizeObserverStub;
+    HTMLElement.prototype.getBoundingClientRect = function getBoundingClientRect() {
+      if (this.classList.contains('squisq-preview-controls-popover')) {
+        return new DOMRect(0, 0, 220, 240);
+      }
+      if (this.getAttribute('aria-label') === 'More preview settings') {
+        return new DOMRect(6, 20, 28, 28);
+      }
+      if (this.classList.contains('squisq-preview-control')) {
+        return new DOMRect(0, 0, 100, 24);
+      }
+      return new DOMRect(0, 0, 0, 0);
+    };
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+      configurable: true,
+      get() {
+        return this.classList.contains('squisq-preview-controls') ? 40 : 0;
+      },
+    });
+
+    try {
+      renderPreviewToolbar('# Hello');
+
+      fireEvent.click(await screen.findByRole('button', { name: 'More preview settings' }));
+
+      await waitFor(() => {
+        const popover = document.querySelector<HTMLElement>('.squisq-preview-controls-popover');
+        expect(popover).not.toBeNull();
+        expect(popover?.style.left).toBe('8px');
+      });
+    } finally {
+      if (originalResizeObserver) {
+        globalThis.ResizeObserver = originalResizeObserver;
+      } else {
+        Reflect.deleteProperty(globalThis, 'ResizeObserver');
+      }
+      HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+      if (originalClientWidth) {
+        Object.defineProperty(HTMLElement.prototype, 'clientWidth', originalClientWidth);
+      } else {
+        Reflect.deleteProperty(HTMLElement.prototype, 'clientWidth');
+      }
+    }
+  });
+});

package/src/__tests__/templateAnnotationRoundTrip.test.ts

@@ -16,13 +16,23 @@ describe('Template annotation round-trip', () => {
     expect(back.trim()).toBe(original);
   });
 
+  it('round-trips param-only squiggly annotations', () => {
+    const original = '## Intro {[transition=fade]}';
+    const html = markdownToTiptap(original);
+    expect(html).not.toContain('data-template="transition=fade"');
+    expect(html).toContain('data-template-params="transition=fade"');
+    expect(tiptapToMarkdown(html).trim()).toBe(original);
+  });
+
   it('preserves template annotation through Tiptap-rendered HTML (with badge spans)', () => {
     // Simulates HTML that Tiptap actually renders after parse: includes the
     // squisq-heading-content + squisq-template-badge wrapper spans.
     const tiptapRendered =
       '<h2 data-template="comparisonBar">' +
       '<span class="squisq-heading-content">Getting Started</span>' +
-      '<span class="squisq-template-badge" contenteditable="false" data-template="comparisonBar" data-template-label="Comparison Bar"></span>' +
+      '<span class="squisq-template-badge" contenteditable="false" data-template="comparisonBar">' +
+      '<span class="squisq-template-badge-core" data-template-label="Comparison Bar" aria-hidden="true"></span>' +
+      '</span>' +
       '</h2>';
     const md = tiptapToMarkdown(tiptapRendered);
     expect(md).toContain('## Getting Started');
@@ -39,7 +49,9 @@ describe('Template annotation round-trip', () => {
     const tiptapRendered =
       '<h2 data-block-attrs="transition=fade">' +
       '<span class="squisq-heading-content">Intro</span>' +
-      '<span class="squisq-template-badge squisq-template-badge--empty" contenteditable="false"></span>' +
+      '<span class="squisq-template-badge squisq-template-badge--empty" contenteditable="false">' +
+      '<span class="squisq-template-badge-core" data-template-label="Block" aria-hidden="true"></span>' +
+      '</span>' +
       '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade · 1:30 start"></span>' +
       '</h2>';
     const md = tiptapToMarkdown(tiptapRendered).trim();
@@ -49,4 +61,13 @@ describe('Template annotation round-trip', () => {
     // The CSS-painted summary lives in a data attribute; it must not bleed.
     expect(md).not.toContain('start');
   });
+
+  it('serializes data-template-params without data-template as a squiggly annotation', () => {
+    const tiptapRendered =
+      '<h2 data-template-params="transition=fade">' +
+      '<span class="squisq-heading-content">Intro</span>' +
+      '<span class="squisq-props-badge" contenteditable="false" data-props-summary="Fade"></span>' +
+      '</h2>';
+    expect(tiptapToMarkdown(tiptapRendered).trim()).toBe('## Intro {[transition=fade]}');
+  });
 });

package/src/__tests__/templateContentPreview.test.ts

@@ -0,0 +1,101 @@
+import { describe, expect, it } from 'vitest';
+import { DEFAULT_THEME, markdownToDoc } from '@bendyline/squisq/doc';
+import { parseMarkdown } from '@bendyline/squisq/markdown';
+import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
+import {
+  resolveTemplateContentPreview,
+  resolveTemplateContentPreviewResult,
+  type TemplatePreviewSource,
+} from '../templateContentPreviewResolver';
+
+function previewSource(markdown: string): TemplatePreviewSource {
+  const doc = markdownToDoc(parseMarkdown(markdown), { autoTemplates: false });
+  const block = doc.blocks[0];
+  if (!block) throw new Error('expected markdown to produce a block');
+  return {
+    block,
+    theme: DEFAULT_THEME,
+    viewport: VIEWPORT_PRESETS.landscape,
+    basePath: '/',
+  };
+}
+
+describe('template content previews', () => {
+  it('renders a candidate preview from the active block content', () => {
+    const visual = resolveTemplateContentPreview(
+      'list',
+      previewSource(`## Launch Steps
+
+- Draft the outline
+- Review the visuals
+- Publish the page
+`),
+    );
+
+    expect(visual).toBeTruthy();
+    expect(JSON.stringify(visual?.layers)).toContain('Draft the outline');
+  });
+
+  it('falls back for content-specific templates when the block is too sparse', () => {
+    const visual = resolveTemplateContentPreview('list', previewSource('## About Squisq'));
+
+    expect(visual).toBeNull();
+  });
+
+  it('reports why stat and date previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('statHighlight', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No stat found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('dateEvent', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No date found in this block',
+    });
+  });
+
+  it('reports why image previews cannot be derived', () => {
+    expect(
+      resolveTemplateContentPreviewResult('imageWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No image found in this block',
+    });
+  });
+
+  it('reports why video previews cannot be derived without media', () => {
+    expect(
+      resolveTemplateContentPreviewResult('videoWithCaption', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+
+    expect(
+      resolveTemplateContentPreviewResult('videoPullQuote', previewSource('## About Squisq')),
+    ).toMatchObject({
+      visual: null,
+      warning: 'No audio/video found in this block',
+    });
+  });
+
+  it('does not warn about missing media when an audio or video tag is present', () => {
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoWithCaption',
+        previewSource('## Demo\n\n<video src="media/demo.mp4" controls></video>'),
+      ).warning,
+    ).toBeUndefined();
+
+    expect(
+      resolveTemplateContentPreviewResult(
+        'videoPullQuote',
+        previewSource('## Narration\n\n<audio src="audio/narration.webm" controls></audio>'),
+      ).warning,
+    ).toBeUndefined();
+  });
+});

package/src/__tests__/tiptapBridge.test.ts

@@ -17,6 +17,22 @@ describe('markdownToTiptap', () => {
     expect(html).toContain('Hello world');
   });
 
+  it('preserves extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n\nBeta')).toBe('<p>Alpha</p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p>Beta</p>');
+    expect(markdownToTiptap('Alpha\n\n\n\nBeta')).toBe('<p>Alpha</p><p></p><p></p><p>Beta</p>');
+  });
+
+  it('preserves trailing extra blank lines as empty paragraphs', () => {
+    expect(markdownToTiptap('Alpha\n')).toBe('<p>Alpha</p>');
+    expect(markdownToTiptap('Alpha\n\n')).toBe('<p>Alpha</p><p></p>');
+  });
+
+  it('preserves leading paragraph spaces as visible HTML whitespace', () => {
+    expect(markdownToTiptap('  indented')).toBe('<p>&nbsp;&nbsp;indented</p>');
+    expect(markdownToTiptap('Alpha\n\n   Beta')).toBe('<p>Alpha</p><p>&nbsp;&nbsp;&nbsp;Beta</p>');
+  });
+
   it('converts headings h1-h3', () => {
     expect(markdownToTiptap('# Title')).toContain('<h1');
     expect(markdownToTiptap('## Subtitle')).toContain('<h2');
@@ -193,6 +209,22 @@ describe('tiptapToMarkdown', () => {
     expect(md).toContain('Hello world');
   });
 
+  it('preserves empty paragraphs as extra blank lines', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p>Beta</p>')).toBe('Alpha\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p>Beta</p>')).toBe('Alpha\n\n\nBeta\n');
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p><p></p><p>Beta</p>')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs', () => {
+    expect(tiptapToMarkdown('<p>Alpha</p><p></p>')).toBe('Alpha\n\n');
+  });
+
+  it('restores leading paragraph spaces from visible HTML whitespace', () => {
+    expect(tiptapToMarkdown('<p>&nbsp;&nbsp;indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>\u00a0\u00a0indented</p>')).toBe('  indented\n');
+    expect(tiptapToMarkdown('<p>&#160;&#xA0;indented</p>')).toBe('  indented\n');
+  });
+
   it('converts headings', () => {
     expect(tiptapToMarkdown('<h1>Title</h1>')).toContain('# Title');
     expect(tiptapToMarkdown('<h2>Sub</h2>')).toContain('## Sub');
@@ -430,6 +462,21 @@ describe('round-trip: markdownToTiptap → tiptapToMarkdown', () => {
     expect(result).not.toContain('- [x] buy milk');
   });
 
+  it('preserves extra blank lines between paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\nBeta\n')).toBe('Alpha\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\nBeta\n')).toBe('Alpha\n\n\nBeta\n');
+    expect(roundTrip('Alpha\n\n\n\nBeta\n')).toBe('Alpha\n\n\n\nBeta\n');
+  });
+
+  it('preserves trailing empty paragraphs exactly', () => {
+    expect(roundTrip('Alpha\n\n')).toBe('Alpha\n\n');
+  });
+
+  it('preserves leading paragraph spaces exactly', () => {
+    expect(roundTrip('  indented\n')).toBe('  indented\n');
+    expect(roundTrip('Alpha\n\n   Beta\n')).toBe('Alpha\n\n   Beta\n');
+  });
+
   it('preserves quoted template params with spaces', () => {
     const result = roundTrip(
       '## Gallery {[imageWithCaption src=photo.jpg caption="Beach at sunset"]}',

package/src/diagram/DiagramWidget.tsx

@@ -18,6 +18,7 @@ import { DiagramMaximizedOverlay } from './DiagramMaximizedOverlay';
 import { useDiagramData } from './useDiagramData';
 import { findDiagramHeadingPos } from './DiagramExtension';
 import { SceneBlockToolbar, type SceneBlockAction } from '../scene/SceneBlockToolbar';
+import { SceneSideToolbar } from '../scene/SceneSideToolbar';
 import { nodeIdFromCardLayerId, NODE_WIDTH, NODE_HEIGHT } from '../scene';
 import { Icon } from '../Icon';
 import {
@@ -226,8 +227,6 @@ export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: D
     />
   );
 
-  const sideToolbar = <div className="squisq-scene-side-toolbar">{toolbar}</div>;
-
   if (maximized) {
     return (
       <div
@@ -235,9 +234,10 @@ export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: D
         style={effectiveHeight != null ? { height: effectiveHeight } : undefined}
       >
         <DiagramMaximizedOverlay host={host ?? null} onClose={() => setMaximized(false)}>
+          {/* Maximized has a full screen for a static right column — no collapse. */}
           <div className="squisq-scene-block-max">
             {canvas}
-            {sideToolbar}
+            <div className="squisq-scene-side-toolbar">{toolbar}</div>
           </div>
         </DiagramMaximizedOverlay>
       </div>
@@ -246,6 +246,9 @@ export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: D
 
   return (
     <div className="squisq-scene-shell">
+      {/* Before the canvas so the narrow-width fallback bar sits above it; the
+        wide-width gutter column is absolute and unaffected by DOM order. */}
+      <SceneSideToolbar>{toolbar}</SceneSideToolbar>
       <div
         className="squisq-diagram-inline"
         ref={inlineRef}
@@ -262,7 +265,6 @@ export function DiagramWidget({ editor, headingKey, fallbackParentPos, host }: D
           title="Drag to resize · double-click to reset"
         />
       </div>
-      {sideToolbar}
     </div>
   );
 }

package/src/headingTransition.ts

@@ -6,16 +6,13 @@
  *
  * - Markdown (Monaco): operate on the raw heading line string.
  * - WYSIWYG (Tiptap): operate on the heading node's `dataBlockAttrs` string
- *   (the inner of the Pandoc `{…}` block, no braces — matching how
- *   `tiptapBridge` stores and re-emits it).
+ *   (Pandoc `{…}` inner) and `dataTemplateParams` string (the params inside
+ *   the squisq-native `{[…]}` annotation).
  *
- * Transitions are stored in the Pandoc `{#id .class key=value}` attribute
- * block, NOT the `{[template …]}` annotation. That mirrors the canonical
- * serializer (`core/doc/docToMarkdown.ts` → `ensureTransitionAttributes`,
- * which always emits the `{…}` form) and `diagram/diagramCommands.ts`, so a
- * value set here round-trips through a Doc render without being duplicated
- * or moved. Reads still look at the `{[…]}` params too, so a hand-typed
- * `{[title transition=fade]}` shows up in the picker.
+ * The editor writes transitions to the squisq-native `{[…]}` annotation by
+ * default. It still reads legacy Pandoc `{transition=…}` attributes and
+ * removes/migrates those keys when rewriting, so the two channels cannot drift
+ * after a toolbar edit.
  *
  * All the brace-matching / tokenizing / serializing is delegated to the
  * shared core helpers so this stays in lockstep with the parser by import
@@ -29,6 +26,7 @@ import {
   serializePandocAttributes,
   tokenizeAttrTokens,
   splitKeyValueToken,
+  quoteAttrValue,
   type HeadingAttributes,
 } from '@bendyline/squisq/markdown';
 
@@ -85,6 +83,14 @@ function applyFieldsToParams(
   return out;
 }
 
+function removeFieldsFromAttrs(attrs: HeadingAttributes): HeadingAttributes {
+  if (!attrs.params) return attrs;
+  const params = applyFieldsToParams(attrs.params, EMPTY_TRANSITION);
+  if (Object.keys(params).length > 0) attrs.params = params;
+  else delete attrs.params;
+  return attrs;
+}
+
 /** Parse a bare `key=value …` token string into a params map. */
 function paramsFromTokenString(input: string, skipFirstToken: boolean): Record<string, string> {
   const tokens = tokenizeAttrTokens(input);
@@ -96,6 +102,39 @@ function paramsFromTokenString(input: string, skipFirstToken: boolean): Record<s
   return params;
 }
 
+function templatePartsFromInner(inner: string | null | undefined): {
+  template: string | undefined;
+  params: Record<string, string>;
+} {
+  if (!inner) return { template: undefined, params: {} };
+  const tokens = tokenizeAttrTokens(inner);
+  const firstIsParam = tokens.length > 0 && tokens[0].indexOf('=') > 0;
+  const template = firstIsParam || tokens.length === 0 ? undefined : tokens[0];
+  const startIdx = template ? 1 : 0;
+  const params: Record<string, string> = {};
+  for (const token of tokens.slice(startIdx)) {
+    const kv = splitKeyValueToken(token);
+    if (kv) params[kv.key] = kv.value;
+  }
+  return { template, params };
+}
+
+function paramsToInner(params: Record<string, string>): string | null {
+  const parts = Object.entries(params).map(([key, value]) => `${key}=${quoteAttrValue(value)}`);
+  return parts.length > 0 ? parts.join(' ') : null;
+}
+
+function templateAnnotationOrNull(
+  template: string | undefined,
+  params: Record<string, string>,
+): string | null {
+  const parts: string[] = [];
+  if (template) parts.push(template);
+  const paramInner = paramsToInner(params);
+  if (paramInner) parts.push(paramInner);
+  return parts.length > 0 ? `{[${parts.join(' ')}]}` : null;
+}
+
 // ============================================
 // Heading line (Markdown / Monaco view)
 // ============================================
@@ -141,7 +180,7 @@ function splitHeadingLine(line: string): SplitHeadingLine | null {
 
 /**
  * Read the transition fields off a heading line. Looks in both the Pandoc
- * `{…}` block (canonical) and the `{[…]}` template params (hand-typed),
+ * `{…}` block (legacy) and the `{[…]}` template params (canonical),
  * with the Pandoc block taking precedence. Returns the empty transition for
  * non-heading lines.
  */
@@ -149,7 +188,7 @@ export function readHeadingLineTransition(line: string): TransitionFields {
   const split = splitHeadingLine(line);
   if (!split) return { ...EMPTY_TRANSITION };
   const fromTemplate = split.templateText
-    ? paramsFromTokenString(stripTemplateBraces(split.templateText), true)
+    ? templatePartsFromInner(stripTemplateBraces(split.templateText)).params
     : {};
   const fromPandoc = split.pandocInner
     ? (parsePandocAttrTokens(split.pandocInner).params ?? {})
@@ -159,8 +198,9 @@ export function readHeadingLineTransition(line: string): TransitionFields {
 
 /**
  * Return `line` with its transition rewritten from `next`, writing into the
- * Pandoc `{…}` block and leaving the `{[…]}` template annotation untouched.
- * Non-heading lines are returned unchanged.
+ * squisq-native `{[…]}` annotation. Legacy Pandoc transition keys are removed
+ * while preserving ids, classes, and other Pandoc params. Non-heading lines are
+ * returned unchanged.
  */
 export function setHeadingLineTransition(line: string, next: TransitionFields): string {
   const split = splitHeadingLine(line);
@@ -168,12 +208,18 @@ export function setHeadingLineTransition(line: string, next: TransitionFields):
   const attrs: HeadingAttributes = split.pandocInner
     ? parsePandocAttrTokens(split.pandocInner)
     : {};
-  attrs.params = applyFieldsToParams(attrs.params ?? {}, next);
+  removeFieldsFromAttrs(attrs);
   const pandoc = pandocBlockOrNull(attrs);
 
+  const templateParts = templatePartsFromInner(
+    split.templateText ? stripTemplateBraces(split.templateText) : null,
+  );
+  const templateParams = applyFieldsToParams(templateParts.params, next);
+  const template = templateAnnotationOrNull(templateParts.template, templateParams);
+
   let out = split.prefix + split.text;
   if (pandoc) out += ` ${pandoc}`;
-  if (split.templateText) out += ` ${split.templateText}`;
+  if (template) out += ` ${template}`;
   return out;
 }
 
@@ -188,8 +234,10 @@ function stripTemplateBraces(templateText: string): string {
 // ============================================
 
 /**
- * Read the transition fields from a heading node's `dataBlockAttrs` (Pandoc
- * inner) plus `dataTemplateParams` (the `{[…]}` params). Pandoc wins.
+ * Read the transition fields from a heading node's `dataBlockAttrs` (legacy
+ * Pandoc inner) plus `dataTemplateParams` (canonical `{[…]}` params). Pandoc
+ * wins so the picker mirrors the value that `markdownToDoc` will render when
+ * both channels are present.
  */
 export function readBlockAttrsTransition(
   blockAttrsInner: string | null | undefined,
@@ -200,11 +248,38 @@ export function readBlockAttrsTransition(
   return fieldsFromParams({ ...fromTemplate, ...fromPandoc });
 }
 
+export interface HeadingTransitionAttrs {
+  /** Inner of the Pandoc `{…}` block, without braces. */
+  blockAttrsInner: string | null;
+  /** Param string inside the `{[…]}` annotation, without the template token. */
+  templateParams: string | null;
+}
+
+/**
+ * Rewrite a heading node's transition for Tiptap, writing the transition
+ * family into `dataTemplateParams` and removing any legacy transition keys
+ * from `dataBlockAttrs`.
+ */
+export function setHeadingAttrsTransition(
+  blockAttrsInner: string | null | undefined,
+  templateParams: string | null | undefined,
+  next: TransitionFields,
+): HeadingTransitionAttrs {
+  const attrs: HeadingAttributes = blockAttrsInner ? parsePandocAttrTokens(blockAttrsInner) : {};
+  removeFieldsFromAttrs(attrs);
+  const pandoc = pandocBlockOrNull(attrs);
+
+  const params = applyFieldsToParams(paramsFromTokenString(templateParams ?? '', false), next);
+  return {
+    blockAttrsInner: pandoc ? pandoc.slice(1, -1) : null,
+    templateParams: paramsToInner(params),
+  };
+}
+
 /**
- * Rewrite the transition in a heading node's `dataBlockAttrs` inner string.
- * Returns the new inner (no braces), or null when the block carries no
- * attributes at all — matching how `tiptapBridge` stores `dataBlockAttrs`
- * (absent attribute → null, not `{}`).
+ * Legacy single-channel writer for callers that only own `dataBlockAttrs`.
+ * Internal editor surfaces should use {@link setHeadingAttrsTransition} so new
+ * transition edits land in the squisq-native `{[…]}` params.
  */
 export function setBlockAttrsTransition(
   blockAttrsInner: string | null | undefined,

package/src/index.ts

@@ -141,10 +141,11 @@ export {
   readHeadingLineTransition,
   setHeadingLineTransition,
   readBlockAttrsTransition,
+  setHeadingAttrsTransition,
   setBlockAttrsTransition,
   EMPTY_TRANSITION,
 } from './headingTransition.js';
-export type { TransitionFields } from './headingTransition.js';
+export type { HeadingTransitionAttrs, TransitionFields } from './headingTransition.js';
 export {
   readBlockAttrsParams,
   readBlockAttrsValue,