@bendyline/docblocks-react 1.1.1 → 1.1.2

package/src/DocBlocksShell/DocBlocksShell.tsx

@@ -8,7 +8,7 @@
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { EditorShell } from '@bendyline/squisq-editor-react';
 import type {
-  EditorTheme,
+  EditorColorScheme,
   EditorView,
   ViewPreferences,
   DocumentLinkProvider,
@@ -62,7 +62,7 @@ import {
 
 export interface DocBlocksShellProps {
   /** Optional theme override. Omit or pass 'auto' to follow OS preference. */
-  theme?: EditorTheme | 'auto';
+  theme?: EditorColorScheme | 'auto';
   /** Optional logo image URL for the app menu. */
   logoUrl?: string;
   /**
@@ -148,6 +148,27 @@ function loadLastState(): LastState | null {
   }
 }
 
+/** One-time first-run callout shown over the welcome doc's Play view.
+ *  Once the user starts writing, switches views themselves, or dismisses
+ *  it, it never comes back — on any workspace. */
+const WELCOME_GATEWAY_KEY = 'docblocks:welcomeGatewayDismissed';
+
+function isWelcomeGatewayDismissed(): boolean {
+  try {
+    return localStorage.getItem(WELCOME_GATEWAY_KEY) === '1';
+  } catch {
+    return false;
+  }
+}
+
+function markWelcomeGatewayDismissed(): void {
+  try {
+    localStorage.setItem(WELCOME_GATEWAY_KEY, '1');
+  } catch {
+    // ignore quota errors
+  }
+}
+
 const THEME_PREF_KEY = 'docblocks:themePreference';
 
 function loadThemePreference(): ThemePreference {
@@ -543,6 +564,8 @@ export function DocBlocksShell({
   const [editorKey, setEditorKey] = useState(0);
   const [explorerKey, setExplorerKey] = useState(0);
   const [initialView, setInitialView] = useState<EditorView>('wysiwyg');
+  // First-run gateway over the welcome doc's Play view — see WELCOME_GATEWAY_KEY.
+  const [showWelcomeGateway, setShowWelcomeGateway] = useState(false);
   /** Suppress popstate handling during programmatic navigation. */
   const skipPopState = useRef(false);
   const lastLocalSaveRef = useRef<{
@@ -670,6 +693,7 @@ export function DocBlocksShell({
           setExplorerKey((k) => k + 1);
           pushHash(fs.id, aboutPath);
           saveLastState({ workspaceId: fs.id, filePath: aboutPath, view: 'preview' });
+          if (!isWelcomeGatewayDismissed()) setShowWelcomeGateway(true);
         }
         return;
       }
@@ -709,10 +733,30 @@ export function DocBlocksShell({
       setExplorerKey((k) => k + 1);
       pushHash(fs.id, welcomePath);
       saveLastState({ workspaceId: fs.id, filePath: welcomePath, view: 'preview' });
+      if (!isWelcomeGatewayDismissed()) setShowWelcomeGateway(true);
     },
     [pushHash],
   );
 
+  /** Hide the welcome gateway and never show it again. Safe to call from
+   *  paths where it may not be showing — only persists when it was. */
+  const closeWelcomeGateway = useCallback(() => {
+    setShowWelcomeGateway((showing) => {
+      if (showing) markWelcomeGatewayDismissed();
+      return false;
+    });
+  }, []);
+
+  /** Gateway CTA — flip the welcome doc from Play into the editor. */
+  const handleStartWriting = useCallback(() => {
+    closeWelcomeGateway();
+    setInitialView('wysiwyg');
+    setEditorKey((k) => k + 1);
+    if (activeWorkspaceId && selectedFile) {
+      saveLastState({ workspaceId: activeWorkspaceId, filePath: selectedFile, view: 'wysiwyg' });
+    }
+  }, [closeWelcomeGateway, activeWorkspaceId, selectedFile]);
+
   // Initialise workspace on mount — restore from hash or last-used
   useEffect(() => {
     (async () => {
@@ -843,6 +887,10 @@ export function DocBlocksShell({
       const target = (e.target as HTMLElement).closest?.('[data-view]');
       if (target) {
         const view = target.getAttribute('data-view') as EditorView;
+        if (view) {
+          // The user found the view tabs on their own — the gateway's job is done.
+          closeWelcomeGateway();
+        }
         if (view && activeWorkspaceId && selectedFile) {
           saveLastState({ workspaceId: activeWorkspaceId, filePath: selectedFile, view });
         }
@@ -850,7 +898,7 @@ export function DocBlocksShell({
     };
     window.addEventListener('click', handler, true);
     return () => window.removeEventListener('click', handler, true);
-  }, [activeWorkspaceId, selectedFile]);
+  }, [activeWorkspaceId, selectedFile, closeWelcomeGateway]);
 
   const handleAutoSaved = useCallback((filePath: string, savedContent: string) => {
     lastLocalSaveRef.current = {
@@ -1097,10 +1145,11 @@ export function DocBlocksShell({
     setInitialView('wysiwyg');
     setEditorKey((k) => k + 1);
     setExplorerKey((k) => k + 1);
+    closeWelcomeGateway();
     if (activeWorkspaceId) {
       pushHash(activeWorkspaceId, '/' + filename);
     }
-  }, [provider, activeWorkspaceId, pushHash]);
+  }, [provider, activeWorkspaceId, pushHash, closeWelcomeGateway]);
 
   const handleRevealWorkspace = useCallback(async () => {
     if (!isElectronHost() || !activeWorkspaceId) return;
@@ -1150,37 +1199,7 @@ export function DocBlocksShell({
     if (!isElectronHost()) return;
     const host = getDocBlocksHost();
     return host.onOpenRequest(async (req) => {
-      if (req.filePath) {
-        const workspaces = (await listWorkspaces()).filter(
-          (w) => w.type === 'electron-native' && w.rootPath,
-        );
-        const match = workspaces.find(
-          (w) => req.filePath!.startsWith((w.rootPath ?? '') + '/') || req.filePath === w.rootPath,
-        );
-        if (match && match.rootPath) {
-          const rel = '/' + req.filePath.slice(match.rootPath.length).replace(/^\/+/, '');
-          await openFromIds(match.id, rel, true);
-        }
-      } else if (req.url) {
-        try {
-          const u = new URL(req.url);
-          const path = u.searchParams.get('path');
-          if (path) {
-            const workspaces = (await listWorkspaces()).filter(
-              (w) => w.type === 'electron-native' && w.rootPath,
-            );
-            const match = workspaces.find(
-              (w) => path.startsWith((w.rootPath ?? '') + '/') || path === w.rootPath,
-            );
-            if (match && match.rootPath) {
-              const rel = '/' + path.slice(match.rootPath.length).replace(/^\/+/, '');
-              await openFromIds(match.id, rel, true);
-            }
-          }
-        } catch {
-          // bad URL, ignore
-        }
-      }
+      await openFromIds(req.workspaceId, req.path, true);
     });
   }, [openFromIds]);
 
@@ -1204,12 +1223,13 @@ export function DocBlocksShell({
         setEditorContent(content ?? '');
         setInitialView('wysiwyg');
         setEditorKey((k) => k + 1);
+        closeWelcomeGateway();
         pushHash(activeWorkspaceId, path);
         saveLastState({ workspaceId: activeWorkspaceId, filePath: path, view: 'wysiwyg' });
         if (effectiveCompact) setMobileShowEditor(true);
       }
     },
-    [provider, activeWorkspaceId, pushHash, effectiveCompact],
+    [provider, activeWorkspaceId, pushHash, effectiveCompact, closeWelcomeGateway],
   );
 
   const handleTreeChange = useCallback(async () => {
@@ -1609,7 +1629,15 @@ export function DocBlocksShell({
 
         {/* Editor area — hidden in compact layout when the sidebar is showing. */}
         {(!effectiveCompact || mobileShowEditor) && (
-          <div style={{ flex: 1, overflow: 'hidden', display: 'flex', flexDirection: 'column' }}>
+          <div
+            style={{
+              flex: 1,
+              overflow: 'hidden',
+              display: 'flex',
+              flexDirection: 'column',
+              position: 'relative',
+            }}
+          >
             {selectedFile && mediaProvider ? (
               <MediaContext.Provider value={mediaProvider}>
                 <EditorShell
@@ -1619,7 +1647,7 @@ export function DocBlocksShell({
                   articleId={selectedFile}
                   fileName={selectedFile}
                   onChange={handleEditorChange}
-                  theme={resolvedTheme}
+                  colorScheme={resolvedTheme}
                   height="100%"
                   outlineWidth={280}
                   mediaProvider={mediaProvider}
@@ -1678,6 +1706,25 @@ export function DocBlocksShell({
                     </>
                   }
                 />
+                {showWelcomeGateway && (
+                  <div className="db-welcome-gateway" role="note" aria-label="Welcome tip">
+                    <span className="db-welcome-gateway-text">
+                      You&rsquo;re watching this welcome doc in <strong>Play</strong> view —
+                      it&rsquo;s a regular markdown file, and so is everything you&rsquo;ll write.
+                    </span>
+                    <button className="db-welcome-gateway-cta" onClick={handleStartWriting}>
+                      Start writing
+                    </button>
+                    <button
+                      className="db-welcome-gateway-dismiss"
+                      onClick={closeWelcomeGateway}
+                      aria-label="Dismiss welcome tip"
+                      title="Dismiss"
+                    >
+                      &times;
+                    </button>
+                  </div>
+                )}
               </MediaContext.Provider>
             ) : selectedFolder ? (
               <div className="db-folder-view">

package/src/Export/ExportDialog.tsx

@@ -4,9 +4,9 @@
 
 import { useState, useCallback, useEffect, useRef } from 'react';
 import { getThemeSummaries } from '@bendyline/squisq/schemas';
-import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import type { ExportFormat, ExportOptions, HtmlBundle, HtmlStyle } from './export-options.js';
 import { FORMAT_LABELS, saveExportOptions } from './export-options.js';
+import { loadTransformStyleSummaries, type ExportSummaryOption } from './transform-summaries.js';
 
 export interface ExportDialogProps {
   /** Initial options (pre-populated from last export). */
@@ -105,10 +105,10 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
   const [htmlBundle, setHtmlBundle] = useState<HtmlBundle>(initial.htmlBundle);
   const [includeLinkedDocs, setIncludeLinkedDocs] = useState<boolean>(initial.includeLinkedDocs);
   const [entryAsIndex, setEntryAsIndex] = useState<boolean>(initial.entryAsIndex);
+  const [transforms, setTransforms] = useState<ExportSummaryOption[]>([]);
   const dialogRef = useRef<HTMLDivElement>(null);
 
   const themes = getThemeSummaries();
-  const transforms = getTransformStyleSummaries();
 
   // Both HTML styles honor themes now: rendered HTML through the
   // SquisqPlayer's theme system, plain HTML through squisq's
@@ -139,6 +139,23 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
   // inert control.
   const showEntryAsIndex = showHtmlOptions && (htmlBundle === 'single' || includeLinkedDocs);
 
+  useEffect(() => {
+    if (!showTransform) return;
+    let cancelled = false;
+
+    loadTransformStyleSummaries()
+      .then((nextTransforms) => {
+        if (!cancelled) setTransforms(nextTransforms);
+      })
+      .catch(() => {
+        if (!cancelled) setTransforms([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [showTransform]);
+
   const handleExport = useCallback(() => {
     const opts: ExportOptions = {
       format,
@@ -313,11 +330,15 @@ export function ExportDialog({ initial, exporting, onExport, onClose }: ExportDi
                 value={transformStyle}
                 onChange={(e) => setTransformStyle(e.target.value)}
               >
-                {transforms.map((t) => (
-                  <option key={t.id} value={t.id}>
-                    {t.name}
-                  </option>
-                ))}
+                {transforms.length === 0 ? (
+                  <option value={transformStyle}>Loading...</option>
+                ) : (
+                  transforms.map((t) => (
+                    <option key={t.id} value={t.id}>
+                      {t.name}
+                    </option>
+                  ))
+                )}
               </select>
               <span className="db-export-hint">
                 {transforms.find((t) => t.id === transformStyle)?.description}

package/src/Export/ExportToolbarControls.tsx

@@ -7,15 +7,12 @@
  * Must be rendered inside <EditorProvider> so useEditorContext() works.
  */
 
-import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useState, useCallback, useEffect, useRef, useMemo, type ComponentType } from 'react';
 import { useEditorContext } from '@bendyline/squisq-editor-react';
 import { getThemeSummaries } from '@bendyline/squisq/schemas';
-import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
-import { markdownToDoc } from '@bendyline/squisq/doc';
-import { VideoExportModal } from '@bendyline/squisq-video-react';
-import { PLAYER_BUNDLE } from '@bendyline/squisq-react/standalone-source';
 import type { ContentContainer } from '@bendyline/squisq/storage';
+import type { VideoExportModalProps } from '@bendyline/squisq-video-react';
 import type { ExportOptions } from './export-options.js';
 import {
   DEFAULT_OPTIONS,
@@ -25,6 +22,7 @@ import {
 } from './export-options.js';
 import { ExportDialog } from './ExportDialog.js';
 import { runExport } from './run-export.js';
+import { loadTransformStyleSummaries, type ExportSummaryOption } from './transform-summaries.js';
 
 export interface ExportToolbarControlsProps {
   /** Currently selected file path — used to derive the download filename. */
@@ -33,8 +31,31 @@ export interface ExportToolbarControlsProps {
   mediaContainer?: ContentContainer | null;
 }
 
+type ParsedMarkdown = ReturnType<typeof parseMarkdown>;
+
+interface VideoExportModules {
+  Modal: ComponentType<VideoExportModalProps>;
+  markdownToDoc: (doc: ParsedMarkdown) => VideoExportModalProps['doc'];
+  playerScript: string;
+}
+
+let videoExportModulesPromise: Promise<VideoExportModules> | null = null;
+
+function loadVideoExportModules(): Promise<VideoExportModules> {
+  videoExportModulesPromise ??= Promise.all([
+    import('@bendyline/squisq/doc'),
+    import('@bendyline/squisq-video-react'),
+    import('@bendyline/squisq-react/standalone-source'),
+  ]).then(([docModule, videoModule, playerModule]) => ({
+    Modal: videoModule.VideoExportModal,
+    markdownToDoc: docModule.markdownToDoc,
+    playerScript: playerModule.PLAYER_BUNDLE,
+  }));
+  return videoExportModulesPromise;
+}
+
 /** Build the quick-export label from saved options. */
-function quickLabel(opts: ExportOptions): string {
+function quickLabel(opts: ExportOptions, transformSummaries: ExportSummaryOption[]): string {
   const baseExt = FORMAT_EXTENSIONS[opts.format].toUpperCase().replace('.', '');
   // Recursive HTML always emits a ZIP (multi-doc tree), regardless of
   // the saved `htmlBundle` value. Applies to both plain and rendered
@@ -58,7 +79,7 @@ function quickLabel(opts: ExportOptions): string {
     if (theme) parts.push(theme.name);
   }
   if (opts.format === 'pptx' && opts.transformStyle) {
-    const transform = getTransformStyleSummaries().find((t) => t.id === opts.transformStyle);
+    const transform = transformSummaries.find((t) => t.id === opts.transformStyle);
     if (transform) parts.push(transform.name);
   }
 
@@ -76,6 +97,11 @@ export function ExportToolbarControls({
   const [menuOpen, setMenuOpen] = useState(false);
   const [dialogOpen, setDialogOpen] = useState(false);
   const [videoModalOpen, setVideoModalOpen] = useState(false);
+  const [videoLoading, setVideoLoading] = useState(false);
+  const [videoLoadError, setVideoLoadError] = useState<string | null>(null);
+  const [videoModules, setVideoModules] = useState<VideoExportModules | null>(null);
+  const [videoDoc, setVideoDoc] = useState<VideoExportModalProps['doc'] | null>(null);
+  const [transformSummaries, setTransformSummaries] = useState<ExportSummaryOption[]>([]);
   const [exporting, setExporting] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
 
@@ -108,13 +134,6 @@ export function ExportToolbarControls({
     return docThemeId ? { ...base, themeId: docThemeId } : base;
   }, [lastOptions, docThemeId]);
 
-  /** Build a Doc from the current markdown for video export. */
-  const doc = useMemo(() => {
-    if (!videoModalOpen) return null;
-    const mdDoc = parseMarkdown(markdownSource);
-    return markdownToDoc(mdDoc);
-  }, [videoModalOpen, markdownSource]);
-
   // Close menu on outside click
   useEffect(() => {
     if (!menuOpen) return;
@@ -127,6 +146,30 @@ export function ExportToolbarControls({
     return () => document.removeEventListener('pointerdown', onPointerDown);
   }, [menuOpen]);
 
+  useEffect(() => {
+    if (
+      !menuOpen ||
+      lastOptions?.format !== 'pptx' ||
+      !lastOptions.transformStyle ||
+      transformSummaries.length > 0
+    ) {
+      return;
+    }
+
+    let cancelled = false;
+    loadTransformStyleSummaries()
+      .then((nextSummaries) => {
+        if (!cancelled) setTransformSummaries(nextSummaries);
+      })
+      .catch(() => {
+        if (!cancelled) setTransformSummaries([]);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [lastOptions?.format, lastOptions?.transformStyle, menuOpen, transformSummaries.length]);
+
   const handleToggleMenu = useCallback(() => {
     setMenuOpen((prev) => !prev);
   }, []);
@@ -140,13 +183,27 @@ export function ExportToolbarControls({
     setDialogOpen(false);
   }, []);
 
-  const handleOpenVideoModal = useCallback(() => {
+  const handleOpenVideoModal = useCallback(async () => {
     setMenuOpen(false);
     setVideoModalOpen(true);
-  }, []);
+    setVideoLoading(true);
+    setVideoLoadError(null);
+
+    try {
+      const modules = videoModules ?? (await loadVideoExportModules());
+      setVideoModules(modules);
+      setVideoDoc(modules.markdownToDoc(parseMarkdown(markdownSource)));
+    } catch {
+      setVideoLoadError('Video export could not be loaded.');
+    } finally {
+      setVideoLoading(false);
+    }
+  }, [markdownSource, videoModules]);
 
   const handleCloseVideoModal = useCallback(() => {
     setVideoModalOpen(false);
+    setVideoDoc(null);
+    setVideoLoadError(null);
   }, []);
 
   const handleExport = useCallback(
@@ -174,6 +231,8 @@ export function ExportToolbarControls({
     }
   }, [lastOptions, markdownSource, selectedFile, mediaContainer]);
 
+  const LoadedVideoExportModal = videoModules?.Modal;
+
   return (
     <>
       <div className="db-toolbar-menu" ref={menuRef}>
@@ -194,7 +253,7 @@ export function ExportToolbarControls({
                 onClick={handleQuickExport}
                 disabled={exporting}
               >
-                {quickLabel(lastOptions)}
+                {quickLabel(lastOptions, transformSummaries)}
               </button>
             )}
             <button className="db-toolbar-menu-item" onClick={handleOpenDialog}>
@@ -217,9 +276,38 @@ export function ExportToolbarControls({
         />
       )}
 
-      {videoModalOpen && doc && (
-        <VideoExportModal doc={doc} playerScript={PLAYER_BUNDLE} onClose={handleCloseVideoModal} />
+      {videoModalOpen && (videoLoading || videoLoadError) && (
+        <div className="db-dialog-overlay">
+          <div className="db-dialog">
+            <div className="db-dialog-header">
+              <h2 className="db-dialog-title">Export Video</h2>
+              <button
+                className="db-dialog-close"
+                onClick={handleCloseVideoModal}
+                aria-label="Close"
+              >
+                &times;
+              </button>
+            </div>
+            <div className="db-dialog-body">
+              <p className="db-export-hint">{videoLoadError ?? 'Loading...'}</p>
+            </div>
+          </div>
+        </div>
       )}
+
+      {videoModalOpen &&
+        videoModules &&
+        LoadedVideoExportModal &&
+        videoDoc &&
+        !videoLoading &&
+        !videoLoadError && (
+          <LoadedVideoExportModal
+            doc={videoDoc}
+            playerScript={videoModules.playerScript}
+            onClose={handleCloseVideoModal}
+          />
+        )}
     </>
   );
 }

package/src/Export/run-export.ts

@@ -8,23 +8,7 @@ import type {
   MarkdownInlineNode,
 } from '@bendyline/squisq/markdown';
 import { parseMarkdown } from '@bendyline/squisq/markdown';
-import { markdownToDoc } from '@bendyline/squisq/doc';
 import type { Doc } from '@bendyline/squisq/schemas';
-import { applyTransform } from '@bendyline/squisq/transform';
-import { markdownDocToDocx } from '@bendyline/squisq-formats/docx';
-import { markdownDocToPdf } from '@bendyline/squisq-formats/pdf';
-import { docToPptx } from '@bendyline/squisq-formats/pptx';
-import {
-  docToHtml,
-  docToHtmlZip,
-  collectImagePaths,
-  markdownDocsToPlainHtmlBundle,
-  markdownDocsToHtmlBundle,
-  markdownDocToPlainHtml,
-} from '@bendyline/squisq-formats/html';
-import { containerToZip } from '@bendyline/squisq-formats/container';
-import { MemoryContentContainer } from '@bendyline/squisq/storage';
-import { PLAYER_BUNDLE } from '@bendyline/squisq-react/standalone-source';
 import type { ContentContainer } from '@bendyline/squisq/storage';
 import type { ExportOptions, ExportFormat } from './export-options.js';
 import { FORMAT_EXTENSIONS } from './export-options.js';
@@ -76,6 +60,7 @@ export async function runExport(
   const doc = parseMarkdown(markdown);
 
   if (options.format === 'docx') {
+    const { markdownDocToDocx } = await import('@bendyline/squisq-formats/docx');
     const images = mediaContainer ? await resolveImages(doc, mediaContainer) : undefined;
     const buf = await markdownDocToDocx(doc, { themeId, images });
     downloadBlob(new Blob([buf], { type: MIME_TYPES.docx }), filename);
@@ -83,6 +68,7 @@ export async function runExport(
   }
 
   if (options.format === 'pdf') {
+    const { markdownDocToPdf } = await import('@bendyline/squisq-formats/pdf');
     const buf = await markdownDocToPdf(doc, {
       themeId,
       pageSize: options.pageSize,
@@ -92,7 +78,12 @@ export async function runExport(
   }
 
   if (options.format === 'pptx') {
-    // Use the full transform pipeline: markdown → Doc → transform → PPTX
+    const [{ markdownToDoc }, { applyTransform }, { docToPptx }] = await Promise.all([
+      import('@bendyline/squisq/doc'),
+      import('@bendyline/squisq/transform'),
+      import('@bendyline/squisq-formats/pptx'),
+    ]);
+    // Use the full transform pipeline: markdown -> Doc -> transform -> PPTX
     const baseDoc = markdownToDoc(doc);
     const transformed = applyTransform(baseDoc, options.transformStyle);
     const enrichedDoc = transformed.doc;
@@ -136,6 +127,10 @@ async function runHtmlExport(
   if (options.includeLinkedDocs && mediaContainer && selectedFile) {
     const entryPath = basenameForBundle(selectedFile);
     if (options.htmlStyle === 'rendered') {
+      const [{ markdownDocsToHtmlBundle }, { PLAYER_BUNDLE }] = await Promise.all([
+        import('@bendyline/squisq-formats/html'),
+        import('@bendyline/squisq-react/standalone-source'),
+      ]);
       const blob = await markdownDocsToHtmlBundle({
         entryPath,
         readDocument: (path) => readDocumentFromContainer(mediaContainer, path),
@@ -149,6 +144,7 @@ async function runHtmlExport(
       downloadBlob(blob, zipName);
       return;
     }
+    const { markdownDocsToPlainHtmlBundle } = await import('@bendyline/squisq-formats/html');
     const blob = await markdownDocsToPlainHtmlBundle({
       entryPath,
       readDocument: (path) => readDocumentFromContainer(mediaContainer, path),
@@ -162,11 +158,19 @@ async function runHtmlExport(
   }
 
   if (options.htmlStyle === 'rendered') {
+    const [{ markdownToDoc }, { docToHtml, docToHtmlZip, collectImagePaths }, { PLAYER_BUNDLE }] =
+      await Promise.all([
+        import('@bendyline/squisq/doc'),
+        import('@bendyline/squisq-formats/html'),
+        import('@bendyline/squisq-react/standalone-source'),
+      ]);
     const mdDoc = parseMarkdown(markdown);
     const baseDoc = markdownToDoc(mdDoc);
     if (themeId) baseDoc.themeId = themeId;
 
-    const images = mediaContainer ? await resolveDocImages(baseDoc, mediaContainer) : undefined;
+    const images = mediaContainer
+      ? await resolveDocImages(baseDoc, mediaContainer, collectImagePaths)
+      : undefined;
 
     if (options.htmlBundle === 'zip') {
       const blob = await docToHtmlZip(baseDoc, {
@@ -195,6 +199,12 @@ async function runHtmlExport(
   const localImages = referencedImages.filter((u) => !isExternalUrl(u));
 
   if (options.htmlBundle === 'zip' && mediaContainer && localImages.length > 0) {
+    const [{ markdownDocToPlainHtml }, { MemoryContentContainer }, { containerToZip }] =
+      await Promise.all([
+        import('@bendyline/squisq-formats/html'),
+        import('@bendyline/squisq/storage'),
+        import('@bendyline/squisq-formats/container'),
+      ]);
     // Mirror the markdown's relative paths inside the zip so <img src="..."> still resolves.
     const html = markdownDocToPlainHtml(mdDoc, { title: baseName, themeId });
     const container = new MemoryContentContainer();
@@ -210,6 +220,7 @@ async function runHtmlExport(
     return;
   }
 
+  const { markdownDocToPlainHtml } = await import('@bendyline/squisq-formats/html');
   // Single-file plain HTML — embed local images as base64 data URIs.
   const inlineMap = new Map<string, string>();
   if (mediaContainer) {
@@ -325,6 +336,7 @@ async function readDocumentFromContainer(
 async function resolveDocImages(
   doc: Doc,
   container: ContentContainer,
+  collectImagePaths: (doc: Doc) => Iterable<string>,
 ): Promise<Map<string, ArrayBuffer>> {
   const paths = collectImagePaths(doc);
   const map = new Map<string, ArrayBuffer>();

package/src/Export/transform-summaries.ts

@@ -0,0 +1,14 @@
+export interface ExportSummaryOption {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+let transformStyleSummariesPromise: Promise<ExportSummaryOption[]> | null = null;
+
+export function loadTransformStyleSummaries(): Promise<ExportSummaryOption[]> {
+  transformStyleSummariesPromise ??= import('@bendyline/squisq/transform').then(
+    ({ getTransformStyleSummaries }) => getTransformStyleSummaries(),
+  );
+  return transformStyleSummariesPromise;
+}

package/src/monaco-slim.ts

@@ -0,0 +1,20 @@
+/**
+ * Slim Monaco editor bundle for DocBlocks browser surfaces.
+ *
+ * Squisq's raw editor lazy-loads `monaco-editor/esm/vs/editor/editor.main.js`
+ * so syntax highlighting works in raw mode. Alias both that subpath and the
+ * bare `monaco-editor` specifier to this file to keep the lazy chunk focused
+ * on markdown plus the languages users most often place in fenced blocks.
+ */
+
+export * from 'monaco-editor/esm/vs/editor/editor.api';
+
+import 'monaco-editor/esm/vs/basic-languages/markdown/markdown.contribution';
+import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/typescript/typescript.contribution';
+import 'monaco-editor/esm/vs/basic-languages/html/html.contribution';
+import 'monaco-editor/esm/vs/basic-languages/css/css.contribution';
+import 'monaco-editor/esm/vs/basic-languages/yaml/yaml.contribution';
+import 'monaco-editor/esm/vs/basic-languages/python/python.contribution';
+import 'monaco-editor/esm/vs/basic-languages/shell/shell.contribution';
+import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution';