@bendyline/squisq-editor-react 2.0.0 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -56,9 +56,9 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.0.0",
-    "@bendyline/squisq-formats": "2.0.0",
-    "@bendyline/squisq-react": "2.0.0",
+    "@bendyline/squisq": "2.1.0",
+    "@bendyline/squisq-formats": "2.1.0",
+    "@bendyline/squisq-react": "2.1.0",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
@@ -74,7 +74,8 @@
     "@tiptap/pm": "2.27.2",
     "@tiptap/react": "2.27.2",
     "@tiptap/starter-kit": "2.27.2",
-    "@tiptap/suggestion": "2.27.2"
+    "@tiptap/suggestion": "2.27.2",
+    "mermaid": "11.16.0"
   },
   "devDependencies": {
     "@types/react": "18.3.28",

package/src/DocumentSettingsDialog.tsx

@@ -25,17 +25,14 @@ import {
 import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import { ThemePicker } from './ThemePicker';
 import { resolvePersistedTransformStyleId } from './transformStyleId';
+import {
+  FRONTMATTER_SETTING_DEFAULTS,
+  FRONTMATTER_SETTING_KEYS,
+  omitFrontmatterDefault,
+} from './frontmatterSettings';
 
 // ── Frontmatter key constants ─────────────────────────────────────
 
-/** Mirror of `FM_KEYS` in PreviewControls.tsx. Canonical names are the
- *  ones we write; legacy aliases are still read so older docs work. */
-const FM = {
-  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] },
-  transform: { canonical: 'squisq-transform', legacy: 'transform-style' },
-  captions: { canonical: 'squisq-captions', legacy: 'caption-style' },
-} as const;
-
 function readFm(
   fm: Record<string, unknown> | undefined,
   canonical: string,
@@ -80,9 +77,17 @@ export function DocumentSettingsDialog({
   const currentTheme = readFrontmatterThemeId(frontmatter) ?? '';
   const currentTransform =
     resolvePersistedTransformStyleId(
-      readFm(frontmatter, FM.transform.canonical, FM.transform.legacy),
+      readFm(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.transform.canonical,
+        FRONTMATTER_SETTING_KEYS.transform.legacy,
+      ),
     ) ?? '';
-  const currentCaptions = readFm(frontmatter, FM.captions.canonical, FM.captions.legacy);
+  const currentCaptions = readFm(
+    frontmatter,
+    FRONTMATTER_SETTING_KEYS.captions.canonical,
+    FRONTMATTER_SETTING_KEYS.captions.legacy,
+  );
 
   const [title, setTitle] = useState(currentTitle);
   const [theme, setTheme] = useState(currentTheme);
@@ -132,20 +137,29 @@ export function DocumentSettingsDialog({
 
       const updates: Record<string, string | null> = {
         title: nextTitle,
-        [FM.theme.canonical]: theme || null,
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          theme || FRONTMATTER_SETTING_DEFAULTS.theme,
+          FRONTMATTER_SETTING_DEFAULTS.theme,
+        ),
         // Saving settings canonicalizes all older theme spellings.
-        [FM.theme.legacy[0]]: null,
-        [FM.theme.legacy[1]]: null,
-        [FM.transform.canonical]: transform || null,
-        [FM.transform.legacy]: null,
-        [FM.captions.canonical]: captions || null,
-        ...(currentCaptions && captions !== currentCaptions ? { [FM.captions.legacy]: null } : {}),
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null,
+        [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
+          transform,
+          FRONTMATTER_SETTING_DEFAULTS.transform,
+        ),
+        [FRONTMATTER_SETTING_KEYS.transform.legacy]: null,
+        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
+          captions || FRONTMATTER_SETTING_DEFAULTS.captions,
+          FRONTMATTER_SETTING_DEFAULTS.captions,
+        ),
+        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null,
       };
 
       const nextSource = setFrontmatterValues(markdownSource, updates);
       onSave(nextSource);
     },
-    [title, theme, transform, captions, inferredTitle, markdownSource, currentCaptions, onSave],
+    [title, theme, transform, captions, inferredTitle, markdownSource, onSave],
   );
 
   return (

package/src/EditorContext.tsx

@@ -153,6 +153,8 @@ export interface EditorState {
   colorScheme: EditorColorScheme;
   /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
   editorMode: EditorMode;
+  /** Whether the host-triggered Find toolbar is active. */
+  findMode: boolean;
   /** Monaco language ID for the Raw editor. */
   language: string;
   /**
@@ -263,6 +265,8 @@ export interface EditorActions {
   setMarkdownDoc: (doc: MarkdownDocument) => void;
   /** Switch the active view */
   setActiveView: (view: EditorView) => void;
+  /** Enter or leave the host-triggered Find toolbar mode. */
+  setFindMode: (active: boolean) => void;
   /** Register / unregister the Tiptap editor instance (called by WysiwygEditor) */
   setTiptapEditor: (editor: TiptapEditor | null) => void;
   /** Register / unregister the Monaco editor instance (called by RawEditor) */
@@ -462,6 +466,13 @@ export interface EditorProviderProps {
   fileName?: string;
   /** Explicit Monaco language ID — wins over the fileName-derived one. */
   language?: string;
+  /**
+   * Controlled Find-mode state. No trigger button is rendered by default;
+   * hosts can set this prop or call `setFindMode` from editor context.
+   */
+  findMode?: boolean;
+  /** Notified when Find mode requests a state change (for example, its X button). */
+  onFindModeChange?: (active: boolean) => void;
   /**
    * Initial visibility of the inline preview gutter. Defaults to false.
    * The toolbar's View menu can toggle it at runtime.
@@ -577,6 +588,8 @@ export function EditorProvider({
   allowNarrate = true,
   fileName,
   language,
+  findMode: controlledFindMode,
+  onFindModeChange,
   inlinePreview = false,
   showStatusBar = true,
   outline = false,
@@ -618,6 +631,16 @@ export function EditorProvider({
   const [activeView, setActiveViewRaw] = useState<EditorView>(
     editorMode === 'markdown' ? initialView : 'raw',
   );
+  const [uncontrolledFindMode, setUncontrolledFindMode] = useState(false);
+  const findMode = editorMode !== 'image' && (controlledFindMode ?? uncontrolledFindMode);
+  const setFindMode = useCallback(
+    (active: boolean) => {
+      if (editorMode === 'image') return;
+      if (controlledFindMode === undefined) setUncontrolledFindMode(active);
+      onFindModeChange?.(active);
+    },
+    [controlledFindMode, editorMode, onFindModeChange],
+  );
   const activeViewRef = useRef(activeView);
   activeViewRef.current = activeView;
   const tiptapEditorRef = useRef<TiptapEditor | null>(null);
@@ -1128,6 +1151,7 @@ export function EditorProvider({
       isParsing,
       colorScheme,
       editorMode,
+      findMode,
       language: resolvedLanguage,
       inlinePreviewVisible,
       statusBarVisible,
@@ -1165,6 +1189,7 @@ export function EditorProvider({
       addBlock,
       setMarkdownDoc,
       setActiveView,
+      setFindMode,
       setTiptapEditor,
       setMonacoEditor,
       setColorScheme,
@@ -1189,6 +1214,7 @@ export function EditorProvider({
       isParsing,
       colorScheme,
       editorMode,
+      findMode,
       resolvedLanguage,
       inlinePreviewVisible,
       statusBarVisible,
@@ -1222,6 +1248,7 @@ export function EditorProvider({
       addBlock,
       setMarkdownDoc,
       setActiveView,
+      setFindMode,
       setTiptapEditor,
       setMonacoEditor,
       setColorScheme,

package/src/EditorShell.tsx

@@ -65,6 +65,7 @@ import {
 import type { PrunePolicy, SaveVersionResult } from '@bendyline/squisq/versions';
 import type { CSSProperties, KeyboardEvent as ReactKeyboardEvent, ReactNode } from 'react';
 import { MediaContext } from '@bendyline/squisq-react';
+import { writeCanvasSettingsStyle, type WriteCanvasSettings } from './writeCanvasSettings';
 
 export type { EditorColorScheme } from './EditorContext';
 
@@ -210,6 +211,12 @@ export interface EditorShellProps {
    * toolbar, tabs, and status bar keep their normal sizing.
    */
   thinMargins?: boolean;
+  /**
+   * Host-controlled typography for the markdown Write canvas. `textSize` is
+   * measured in CSS pixels and `lineSpacing` is a unitless line-height
+   * multiplier. This is presentation-only and does not modify the markdown.
+   */
+  writeCanvasSettings?: WriteCanvasSettings;
   /**
    * Render the bottom status bar (word / character / line / block counts
    * and parse-state indicator). Defaults to `true`. Set to `false` in
@@ -243,6 +250,14 @@ export interface EditorShellProps {
    * switches the shell into code mode.
    */
   language?: string;
+  /**
+   * Controlled Find-mode state. Find has no built-in trigger button; hosts
+   * opt in by setting this prop (or by calling `setFindMode` from a toolbar
+   * slot rendered inside the editor context).
+   */
+  findMode?: boolean;
+  /** Called when Find mode requests a state change, including its X button. */
+  onFindModeChange?: (active: boolean) => void;
   /**
    * Optional async provider for `@`-mention suggestions. When supplied,
    * typing `@` inside the editor opens a popover of candidates; selecting
@@ -431,10 +446,13 @@ export function EditorShell({
   fullWidth = false,
   uxFont,
   thinMargins = false,
+  writeCanvasSettings,
   showStatusBar = true,
   imageDisplayMode = 'inline',
   fileName,
   language,
+  findMode,
+  onFindModeChange,
   mentionProvider,
   documentLinkProvider,
   allowRecording = true,
@@ -498,6 +516,8 @@ export function EditorShell({
         allowNarrate={allowNarrate}
         fileName={fileName}
         language={language}
+        findMode={findMode}
+        onFindModeChange={onFindModeChange}
         inlinePreview={inlinePreview}
         showStatusBar={showStatusBar}
         outline={outline}
@@ -527,6 +547,7 @@ export function EditorShell({
           fullWidth={fullWidth}
           uxFont={uxFont}
           thinMargins={thinMargins}
+          writeCanvasSettings={writeCanvasSettings}
           readOnly={readOnly}
           imageSrc={imageSrc}
           imageAlt={imageAlt}
@@ -564,6 +585,7 @@ interface EditorShellInnerProps {
   fullWidth: boolean;
   uxFont?: string;
   thinMargins: boolean;
+  writeCanvasSettings?: WriteCanvasSettings;
   readOnly: boolean;
   imageSrc?: string;
   imageAlt?: string;
@@ -597,6 +619,7 @@ function EditorShellInner({
   fullWidth,
   uxFont,
   thinMargins,
+  writeCanvasSettings,
   readOnly,
   imageSrc,
   imageAlt,
@@ -716,7 +739,7 @@ function EditorShellInner({
    *
    * Without this, upload-via-MediaBin and upload-via-drop both
    * added the file to the bin and nowhere else — the composer sent
-   * an empty body and the downstream gezel reported "nothing came
+   * an empty body and the downstream consumer reported "nothing came
    * through."
    */
   const insertMediaRef = useCallback(
@@ -862,6 +885,7 @@ function EditorShellInner({
         // tabs, status bar) consume `--squisq-ux-font` as their
         // `font-family`, falling back to the system stack when unset.
         ...(uxFont ? ({ '--squisq-ux-font': uxFont } as CSSProperties) : {}),
+        ...writeCanvasSettingsStyle(writeCanvasSettings),
         // Exposed so the toolbar's view-tabs section AND the outline pane read
         // one shared width, lining up the view-tabs' right-edge separator with
         // the outline's right edge. A fixed `outlineWidth` pins it to px;

package/src/PreviewControls.tsx

@@ -47,6 +47,11 @@ import {
 } from './customThemes';
 import { Icon } from './Icon';
 import { resolvePersistedTransformStyleId } from './transformStyleId';
+import {
+  FRONTMATTER_SETTING_DEFAULTS,
+  FRONTMATTER_SETTING_KEYS,
+  omitFrontmatterDefault,
+} from './frontmatterSettings';
 
 // ── Context ──────────────────────────────────────────────────────
 
@@ -198,16 +203,6 @@ export interface PreviewSettingsProviderProps {
   themeOverride?: Theme | null;
 }
 
-/** Frontmatter keys we read/write for preview settings. The squisq-prefixed
- *  keys are the canonical names; the legacy keys are still read so existing
- *  documents keep working. Persistence (writes) uses only the squisq names. */
-const FM_KEYS = {
-  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] as const },
-  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
-  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
-  coverSlide: { canonical: 'squisq-cover-slide', legacy: 'cover-slide' as const },
-} as const;
-
 function readFrontmatterKey(
   fm: Record<string, unknown> | undefined,
   canonical: string,
@@ -226,7 +221,7 @@ export function PreviewSettingsProvider({
   const { markdownSource, setMarkdownSource, allowNarrate } = useEditorContext();
 
   const persistFrontmatter = useCallback(
-    (updates: Record<string, string | null>) => {
+    (updates: Record<string, string | number | boolean | null | undefined>) => {
       const next = setFrontmatterValues(markdownSource, updates);
       if (next !== markdownSource) {
         setMarkdownSource(next);
@@ -271,7 +266,7 @@ export function PreviewSettingsProvider({
   );
   const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
   useEffect(() => setSelectedThemeId(null), [fmTheme]);
-  const resolvedThemeId = selectedThemeId ?? fmTheme ?? 'standard';
+  const resolvedThemeId = selectedThemeId ?? fmTheme ?? FRONTMATTER_SETTING_DEFAULTS.theme;
   // Doc themes precede browser-library themes in `allThemes`; choosing a
   // library-only entry copies it into the document below for portable export.
   const resolvedTheme = useMemo(
@@ -300,9 +295,12 @@ export function PreviewSettingsProvider({
       const selectedCustom = customThemes.find((theme) => theme.id === id);
       const alreadyDocScoped = docThemes.some((theme) => theme.id === id);
       const updates: Record<string, string | null> = {
-        [FM_KEYS.theme.canonical]: id,
-        [FM_KEYS.theme.legacy[0]]: null,
-        [FM_KEYS.theme.legacy[1]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          id,
+          FRONTMATTER_SETTING_DEFAULTS.theme,
+        ),
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null,
       };
       if (selectedCustom && !alreadyDocScoped) {
         updates[FRONTMATTER_CUSTOM_THEMES_KEY] =
@@ -337,7 +335,7 @@ export function PreviewSettingsProvider({
           idx >= 0 ? docThemes.map((t, i) => (i === idx ? theme : t)) : [...docThemes, theme];
         const updates: Record<string, string | null> = {
           [FRONTMATTER_CUSTOM_THEMES_KEY]: writeCustomThemesToFrontmatter(nextThemes) ?? null,
-          [FM_KEYS.theme.canonical]: theme.id,
+          [FRONTMATTER_SETTING_KEYS.theme.canonical]: theme.id,
         };
         if (extras?.templates && extras.templates.length > 0) {
           const existing = doc?.customTemplates ?? [];
@@ -367,7 +365,11 @@ export function PreviewSettingsProvider({
   const fmTransform = useMemo(
     () =>
       resolvePersistedTransformStyleId(
-        readFrontmatterKey(frontmatter, FM_KEYS.transform.canonical, FM_KEYS.transform.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.transform.canonical,
+          FRONTMATTER_SETTING_KEYS.transform.legacy,
+        ),
       ),
     [frontmatter],
   );
@@ -379,7 +381,13 @@ export function PreviewSettingsProvider({
       setSelectedTransformStyle(id);
       if (id !== null) {
         // Empty string = "None" — remove the key rather than writing a blank value.
-        persistFrontmatter({ [FM_KEYS.transform.canonical]: id === '' ? null : id });
+        persistFrontmatter({
+          [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
+            id,
+            FRONTMATTER_SETTING_DEFAULTS.transform,
+          ),
+          [FRONTMATTER_SETTING_KEYS.transform.legacy]: null,
+        });
       }
     },
     [persistFrontmatter],
@@ -391,19 +399,30 @@ export function PreviewSettingsProvider({
   const fmCaptionMode = useMemo(
     () =>
       resolveFrontmatterCaptionMode(
-        readFrontmatterKey(frontmatter, FM_KEYS.captions.canonical, FM_KEYS.captions.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.captions.canonical,
+          FRONTMATTER_SETTING_KEYS.captions.legacy,
+        ),
       ),
     [frontmatter],
   );
   const [selectedCaptionMode, setSelectedCaptionMode] = useState<CaptionMode | null>(null);
   useEffect(() => setSelectedCaptionMode(null), [fmCaptionMode]);
-  const activeCaptionMode = selectedCaptionMode ?? fmCaptionMode ?? 'standard';
+  const activeCaptionMode =
+    selectedCaptionMode ?? fmCaptionMode ?? FRONTMATTER_SETTING_DEFAULTS.captions;
   const activeCaptionsEnabled = activeCaptionMode !== 'off';
   const activeCaptionStyle: CaptionStyle = activeCaptionMode === 'social' ? 'social' : 'standard';
   const handleSetCaptionMode = useCallback(
     (mode: CaptionMode) => {
       setSelectedCaptionMode(mode);
-      persistFrontmatter({ [FM_KEYS.captions.canonical]: mode });
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
+          mode,
+          FRONTMATTER_SETTING_DEFAULTS.captions,
+        ),
+        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null,
+      });
     },
     [persistFrontmatter],
   );
@@ -413,17 +432,31 @@ export function PreviewSettingsProvider({
   const fmCoverSlide = useMemo(
     () =>
       resolveFrontmatterBoolean(
-        readFrontmatterKey(frontmatter, FM_KEYS.coverSlide.canonical, FM_KEYS.coverSlide.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.coverSlide.canonical,
+          FRONTMATTER_SETTING_KEYS.coverSlide.legacy,
+        ),
       ),
     [frontmatter],
   );
   const [selectedCoverSlide, setSelectedCoverSlide] = useState<boolean | null>(null);
   useEffect(() => setSelectedCoverSlide(null), [fmCoverSlide]);
-  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide ?? true;
+  const activeCoverSlide =
+    selectedCoverSlide ?? fmCoverSlide ?? FRONTMATTER_SETTING_DEFAULTS.coverSlide;
   const handleSetCoverSlideEnabled = useCallback(
     (enabled: boolean) => {
       setSelectedCoverSlide(enabled);
-      persistFrontmatter({ [FM_KEYS.coverSlide.canonical]: enabled ? 'true' : 'false' });
+      persistFrontmatter({
+        // The cover is enabled by default, so only persist the non-default
+        // state. Pass the boolean through so YAML writes `false`, not
+        // the string `"false"`.
+        [FRONTMATTER_SETTING_KEYS.coverSlide.canonical]: omitFrontmatterDefault(
+          enabled,
+          FRONTMATTER_SETTING_DEFAULTS.coverSlide,
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverSlide.legacy]: null,
+      });
     },
     [persistFrontmatter],
   );
@@ -583,6 +616,20 @@ const SUMMARIZE_TOOLTIP =
 type ControlKey = 'format' | 'theme' | 'transform' | 'captions' | 'cover';
 const CONTROL_KEYS: ControlKey[] = ['format', 'theme', 'transform', 'captions', 'cover'];
 
+/**
+ * Controls that apply to the active display mode. Page (`linear`) is a
+ * variable-height HTML rendition: the aspect-ratio format switch only
+ * affects embedded canvas sections (which default sensibly) and captions
+ * never applied, so both are hidden there. Cover, Theme, and Summarize
+ * remain live in every mode.
+ */
+function controlKeysForMode(displayMode: string): ControlKey[] {
+  if (displayMode === 'linear') {
+    return CONTROL_KEYS.filter((key) => key !== 'format' && key !== 'captions');
+  }
+  return CONTROL_KEYS;
+}
+
 const PREVIEW_POPOVER_GAP = 4;
 const PREVIEW_POPOVER_MARGIN = 8;
 const PREVIEW_POPOVER_FALLBACK_WIDTH = 220;
@@ -633,6 +680,7 @@ const selectStyle: React.CSSProperties = {
  */
 export function PreviewToolbarControls() {
   const s = usePreviewSettings();
+  const controlKeys = controlKeysForMode(s.activeDisplayMode);
   const [visibleCount, setVisibleCount] = useState(CONTROL_KEYS.length);
   const [popoverOpen, setPopoverOpen] = useState(false);
   // `rootRef` (flex:1) always spans the toolbar's leftover width, so its
@@ -699,7 +747,7 @@ export function PreviewToolbarControls() {
     ro.observe(probe);
     measure();
     return () => ro.disconnect();
-  }, []);
+  }, [controlKeys.length]);
 
   // Close popover on outside click
   useEffect(() => {
@@ -867,9 +915,9 @@ export function PreviewToolbarControls() {
     }
   };
 
-  const hasOverflow = visibleCount < CONTROL_KEYS.length;
-  const visibleKeys = CONTROL_KEYS.slice(0, visibleCount);
-  const overflowKeys = CONTROL_KEYS.slice(visibleCount);
+  const hasOverflow = visibleCount < controlKeys.length;
+  const visibleKeys = controlKeys.slice(0, visibleCount);
+  const overflowKeys = controlKeys.slice(visibleCount);
 
   useEffect(() => {
     if (!hasOverflow && popoverOpen) closePopover();
@@ -887,7 +935,7 @@ export function PreviewToolbarControls() {
           inline/overflow split. Absolutely positioned so it never affects
           layout. */}
       <div className="squisq-preview-controls-probe" ref={probeRef} aria-hidden="true">
-        {CONTROL_KEYS.map((key) => renderControl(key, false))}
+        {controlKeys.map((key) => renderControl(key, false))}
       </div>
 
       {visibleKeys.length > 0 && (

package/src/PreviewPanel.tsx

@@ -14,7 +14,7 @@ import { createPortal } from 'react-dom';
 import { DocPlayer, LinearDocView, useMediaProvider } from '@bendyline/squisq-react';
 import type { AudioController, PlaybackState } from '@bendyline/squisq-react';
 import type { Doc } from '@bendyline/squisq/schemas';
-import { applyTransform } from '@bendyline/squisq/transform';
+import { applyTransform, resolveTransformStyle } from '@bendyline/squisq/transform';
 import { resolveAudioMapping } from '@bendyline/squisq/doc';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import { useEditorContext } from './EditorContext';
@@ -333,6 +333,10 @@ export function PreviewPanel({ basePath = '/', className, workspaceContainer }:
           viewport={activeViewport}
           theme={activeTheme}
           globalKeyboardShortcuts={!audience}
+          showCover={activeCoverSlide}
+          transformPage={
+            activeTransformStyle ? resolveTransformStyle(activeTransformStyle).page : undefined
+          }
         />
       );
     }

package/src/RawEditor.tsx

@@ -16,6 +16,7 @@ import { BLOCK_META_KEY_DESCRIPTORS, tokenizeAttrTokens } from '@bendyline/squis
 import { SQUISQ_MEDIA_MIME, parseSquisqMediaPayload } from './mediaDragMime';
 import { canHandleSquisqMediaDrop, ownsMonacoModel } from './rawEditorIsolation';
 import { useMonacoLoader } from './useMonacoLoader';
+import { isMarkdownFencedCodeLine, markdownFencedCodeLineMask } from './markdownCodeFence';
 
 // Monaco is loaded lazily through `useMonacoLoader` (see the hook for the
 // rationale). The type-only `import type * as monaco from 'monaco-editor'`
@@ -200,6 +201,9 @@ export function RawEditor({
           triggerCharacters: ['['],
           provideCompletionItems(model: monaco.editor.ITextModel, position: monaco.Position) {
             if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+            if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+              return { suggestions: [] };
+            }
             const lineContent = model.getLineContent(position.lineNumber);
 
             // Only trigger inside a heading line that has {[ before the cursor
@@ -314,6 +318,9 @@ export function RawEditor({
             triggerCharacters: ['['],
             provideCompletionItems(model, position) {
               if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+              if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+                return { suggestions: [] };
+              }
               const lineContent = model.getLineContent(position.lineNumber);
               const textBeforeCursor = lineContent.substring(0, position.column - 1);
               const textAfterCursor = lineContent.substring(position.column - 1);
@@ -397,6 +404,9 @@ export function RawEditor({
             triggerCharacters: ['=', ' '],
             provideCompletionItems(model, position) {
               if (!ownsMonacoModel(editor, model)) return { suggestions: [] };
+              if (isMarkdownFencedCodeLine(model.getValue(), position.lineNumber)) {
+                return { suggestions: [] };
+              }
               const lineContent = model.getLineContent(position.lineNumber);
               // Block-meta attributes only mean something on a heading's
               // template annotation — same gate as the template provider.
@@ -624,8 +634,10 @@ export function RawEditor({
 
     const decorations: monaco.editor.IModelDeltaDecoration[] = [];
     const lines = model.getLineCount();
+    const fencedLines = markdownFencedCodeLineMask(model.getValue());
     const re = /\{\[([a-zA-Z0-9_:-]+)\]\}/g;
     for (let line = 1; line <= lines; line++) {
+      if (fencedLines[line - 1]) continue;
       const text = model.getLineContent(line);
       re.lastIndex = 0;
       let match: RegExpExecArray | null;

package/src/RecorderEntry.tsx

@@ -26,6 +26,7 @@ import { RecorderPanel } from './recorder/RecorderPanel.js';
 import type { RecorderSaveResult } from './recorder/RecorderModal.js';
 import { insertMediaBlock } from './recorder/insertMediaBlock.js';
 import { useEditorContext } from './EditorContext';
+import { markdownFencedCodeLineMask } from './markdownCodeFence';
 
 /**
  * Insert a narration annotation `{[audio=filename]}` onto the heading
@@ -42,8 +43,10 @@ function annotateMonacoHeading(
   if (!model) return false;
   const position = editor.getPosition();
   if (!position) return false;
+  const fencedLines = markdownFencedCodeLineMask(model.getValue());
   // Walk upward from the cursor to find the nearest heading line.
   for (let line = position.lineNumber; line >= 1; line--) {
+    if (fencedLines[line - 1]) continue;
     const text = model.getLineContent(line);
     if (!/^#{1,6}\s/.test(text)) continue;
     // Skip if the heading already has an audio annotation — don't
@@ -81,6 +84,7 @@ export function RecorderEntry() {
     bumpMediaRevision,
     markdownSource,
     setMarkdownSource,
+    colorScheme,
   } = useEditorContext();
 
   const handleSave = useCallback(
@@ -150,6 +154,7 @@ export function RecorderEntry() {
     <RecorderPanel
       mediaProvider={mediaProvider}
       container={workspaceContainer}
+      colorScheme={colorScheme}
       onSave={handleSave}
       className="squisq-toolbar-button"
     />