@bendyline/squisq-editor-react 1.6.0 → 1.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -34,10 +34,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
-    "./styles": "./src/styles/index.css"
+    "./styles": "./dist/styles/index.css"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node ../../scripts/build-styles.mjs",
     "dev": "concurrently -n js,dts -c blue,gray -r \"tsup --watch --no-dts --no-clean\" \"tsup --watch --dts-only --no-clean\"",
     "typecheck": "tsc --noEmit"
   },
@@ -46,10 +46,15 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
+  "peerDependenciesMeta": {
+    "monaco-editor": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "@bendyline/squisq": "1.5.0",
-    "@bendyline/squisq-formats": "1.4.0",
-    "@bendyline/squisq-react": "1.4.0",
+    "@bendyline/squisq": "1.5.2",
+    "@bendyline/squisq-formats": "1.4.2",
+    "@bendyline/squisq-react": "1.4.2",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",
@@ -74,5 +79,8 @@
     "react-dom": "18.3.1",
     "tsup": "8.5.1",
     "typescript": "5.9.3"
-  }
+  },
+  "sideEffects": [
+    "**/*.css"
+  ]
 }

package/src/BlockPropertiesPopover.tsx

@@ -3,12 +3,11 @@
  *
  * The on-canvas "block properties" palette — the sibling of the block-template
  * badge. Anchored at the `.squisq-props-badge` chip on a heading, it edits the
- * block's playback/animation metadata, all stored in the heading's Pandoc `{…}`
- * attribute block (`dataBlockAttrs`):
+ * block's playback/animation metadata:
  *
- *   - Transition  (type / direction / duration) — reuses `TransitionPicker`
- *   - Duration    (`duration`)  — how long the block is shown
- *   - Start time  (`startTime`) — timeline position
+ *   - Transition  (type / direction / duration) — stored in `{[…]}` params
+ *   - Duration    (`duration`)  — stored in Pandoc `dataBlockAttrs`
+ *   - Start time  (`startTime`) — stored in Pandoc `dataBlockAttrs`
  *
  * The popover holds the `dataBlockAttrs` inner string as working state and
  * re-derives each control from it, so successive edits compose. Every change
@@ -23,6 +22,7 @@ import { TransitionPicker } from './TransitionPicker';
 import {
   readBlockAttrsTransition,
   setBlockAttrsTransition,
+  setHeadingAttrsTransition,
   type TransitionFields,
 } from './headingTransition';
 import { readBlockAttrsValue, setBlockAttrsValue } from './blockProperties';
@@ -36,6 +36,11 @@ export interface BlockPropertiesPopoverProps {
   templateParams: string | null;
   /** Apply a new `dataBlockAttrs` inner to the heading (null clears it). */
   onChange: (nextInner: string | null) => void;
+  /** Apply a paired `dataBlockAttrs` / `dataTemplateParams` transition rewrite. */
+  onAnnotationChange?: (next: {
+    blockAttrsInner: string | null;
+    templateParams: string | null;
+  }) => void;
   onClose: () => void;
 }
 
@@ -48,10 +53,12 @@ export function BlockPropertiesPopover({
   blockAttrs,
   templateParams,
   onChange,
+  onAnnotationChange,
   onClose,
 }: BlockPropertiesPopoverProps) {
   // Working copy of the Pandoc inner; successive edits compose off it.
   const [inner, setInner] = useState<string | null>(blockAttrs);
+  const [templateInner, setTemplateInner] = useState<string | null>(templateParams);
   const [style, setStyle] = useState<React.CSSProperties>(() => computeStyle(anchorRect));
 
   useEffect(() => {
@@ -84,11 +91,20 @@ export function BlockPropertiesPopover({
     onChange(next);
   };
 
-  const transition = readBlockAttrsTransition(inner, templateParams);
+  const transition = readBlockAttrsTransition(inner, templateInner);
   const duration = readBlockAttrsValue(inner, 'duration');
   const startTime = readBlockAttrsValue(inner, 'startTime');
 
-  const onTransition = (next: TransitionFields) => apply(setBlockAttrsTransition(inner, next));
+  const onTransition = (next: TransitionFields) => {
+    if (!onAnnotationChange) {
+      apply(setBlockAttrsTransition(inner, next));
+      return;
+    }
+    const updated = setHeadingAttrsTransition(inner, templateInner, next);
+    setInner(updated.blockAttrsInner);
+    setTemplateInner(updated.templateParams);
+    onAnnotationChange(updated);
+  };
   const onDuration = (v: string) => apply(setBlockAttrsValue(inner, 'duration', v));
   const onStartTime = (v: string) => apply(setBlockAttrsValue(inner, 'startTime', v));
 

package/src/EditorContext.tsx

@@ -91,7 +91,13 @@ export type DocumentLinkProvider = (query: string) => Promise<DocumentLinkCandid
 // ─── Types ───────────────────────────────────────────────
 
 export type EditorView = 'raw' | 'wysiwyg' | 'preview';
-export type EditorTheme = 'light' | 'dark';
+/**
+ * Light/dark chrome mode for the editor shell (toolbar, tabs, status bar,
+ * side panes). This is the editor's *UI color scheme* — distinct from a
+ * Squisq `Theme` object, which styles the rendered document. Renamed from
+ * the former `EditorTheme` to remove that ambiguity.
+ */
+export type EditorColorScheme = 'light' | 'dark';
 /**
  * Document layout mode. `'document'` shows the whole markdown document in
  * the active view (the historical behavior). `'block'` is the
@@ -128,8 +134,8 @@ export interface EditorState {
   parseError: string | null;
   /** Whether a parse is pending */
   isParsing: boolean;
-  /** Current color theme */
-  theme: EditorTheme;
+  /** Current light/dark chrome color scheme for the editor shell. */
+  colorScheme: EditorColorScheme;
   /** Operating mode — 'markdown' for the full shell, 'code' for Monaco-only. */
   editorMode: EditorMode;
   /** Monaco language ID for the Raw editor. */
@@ -240,8 +246,8 @@ export interface EditorActions {
   setTiptapEditor: (editor: TiptapEditor | null) => void;
   /** Register / unregister the Monaco editor instance (called by RawEditor) */
   setMonacoEditor: (editor: MonacoEditor | null) => void;
-  /** Set the color theme */
-  setTheme: (theme: EditorTheme) => void;
+  /** Set the light/dark chrome color scheme for the editor shell. */
+  setColorScheme: (colorScheme: EditorColorScheme) => void;
   /** Show or hide the inline preview gutter at runtime (driven by the View menu). */
   setInlinePreviewVisible: (visible: boolean) => void;
   /** Show or hide the bottom status bar at runtime (driven by the View menu). */
@@ -360,8 +366,8 @@ export interface EditorProviderProps {
   initialView?: EditorView;
   /** Article ID used when generating the Doc */
   articleId?: string;
-  /** Color theme */
-  theme?: EditorTheme;
+  /** Light/dark chrome color scheme for the editor shell. */
+  colorScheme?: EditorColorScheme;
   /**
    * Workspace-scoped `ContentContainer` for this document — the folder
    * holding the doc, its `_files/` sidecar, sibling documents, and any
@@ -509,7 +515,7 @@ export function EditorProvider({
   initialMarkdown = '',
   initialView = 'raw',
   articleId = 'untitled',
-  theme: initialTheme = 'light',
+  colorScheme: initialColorScheme = 'light',
   workspaceContainer = null,
   allowVersioning = false,
   versionBasename,
@@ -570,7 +576,7 @@ export function EditorProvider({
   );
   const [parseError, setParseError] = useState<string | null>(null);
   const [isParsing, setIsParsing] = useState(false);
-  const [theme, setTheme] = useState<EditorTheme>(initialTheme);
+  const [colorScheme, setColorScheme] = useState<EditorColorScheme>(initialColorScheme);
   const [inlinePreviewVisible, setInlinePreviewVisibleRaw] =
     useState<boolean>(effectiveInlinePreview);
   // Sync visibility when the host changes the prop (e.g., toggle from outside).
@@ -731,10 +737,10 @@ export function EditorProvider({
   const articleIdRef = useRef(articleId);
   articleIdRef.current = articleId;
 
-  // Sync theme when prop changes
+  // Sync color scheme when prop changes
   useEffect(() => {
-    setTheme(initialTheme);
-  }, [initialTheme]);
+    setColorScheme(initialColorScheme);
+  }, [initialColorScheme]);
 
   // Debounced parse on markdown source change
   const parseTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
@@ -971,7 +977,7 @@ export function EditorProvider({
       activeView,
       parseError,
       isParsing,
-      theme,
+      colorScheme,
       editorMode,
       language: resolvedLanguage,
       inlinePreviewVisible,
@@ -1009,7 +1015,7 @@ export function EditorProvider({
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
-      setTheme,
+      setColorScheme,
       setInlinePreviewVisible,
       setStatusBarVisible,
       setOutlineVisible,
@@ -1028,7 +1034,7 @@ export function EditorProvider({
       activeView,
       parseError,
       isParsing,
-      theme,
+      colorScheme,
       editorMode,
       resolvedLanguage,
       inlinePreviewVisible,
@@ -1063,7 +1069,7 @@ export function EditorProvider({
       setActiveView,
       setTiptapEditor,
       setMonacoEditor,
-      setTheme,
+      setColorScheme,
       setInlinePreviewVisible,
       setStatusBarVisible,
       setOutlineVisible,

package/src/EditorShell.tsx

@@ -23,7 +23,9 @@ import { RawEditor } from './RawEditor';
 import { WysiwygEditor } from './WysiwygEditor';
 import { InlinePreviewGutter } from './InlinePreviewGutter';
 import { BlockPreviewPanel } from './BlockPreviewPanel';
-import { OutlinePanel } from './OutlinePanel';
+import { OutlinePanel, OUTLINE_RESPONSIVE_WIDTH } from './OutlinePanel';
+import { CodeContextZones } from './codeContext/CodeContextZones';
+import type { CodeContext } from './codeContext/types';
 import { BlockCardView } from './BlockCardView';
 import { TimelineTrack } from './TimelineTrack';
 import { PreviewPanel } from './PreviewPanel';
@@ -45,6 +47,10 @@ import {
   processTextFile,
   processTextFiles,
 } from './utils/dropUtils';
+import {
+  collectMediaReferencesFromMarkdown,
+  removeMediaReferencesFromMarkdown,
+} from './mediaReferences';
 import type { MediaProvider, Theme } from '@bendyline/squisq/schemas';
 import { DARK_SURFACE, LIGHT_SURFACE } from '@bendyline/squisq/schemas';
 import type { ContentContainer } from '@bendyline/squisq/storage';
@@ -56,7 +62,7 @@ import {
 import type { PrunePolicy, SaveVersionResult } from '@bendyline/squisq/versions';
 import type { CSSProperties, ReactNode } from 'react';
 
-export type { EditorTheme } from './EditorContext';
+export type { EditorColorScheme } from './EditorContext';
 
 export interface EditorShellProps {
   /** Initial markdown content */
@@ -70,8 +76,13 @@ export interface EditorShellProps {
   basePath?: string;
   /** Called when markdown source changes */
   onChange?: (source: string) => void;
-  /** Color theme: 'light' or 'dark' (default: 'light') */
-  theme?: 'light' | 'dark';
+  /**
+   * Light/dark chrome color scheme for the editor shell — toolbar, tabs,
+   * status bar, and side panes (default: `'light'`). This is the editor's
+   * UI mode, **not** a Squisq `Theme` object; the rendered document's
+   * styling is controlled separately via `themeOverride` / `Doc.themeId`.
+   */
+  colorScheme?: 'light' | 'dark';
   /** Additional class name */
   className?: string;
   /** CSS height for the shell container (default: '100vh') */
@@ -166,6 +177,13 @@ export interface EditorShellProps {
    * (Slack, Discord). When omitted, the editor behaves normally.
    */
   submitOnEnter?: () => void;
+  /**
+   * Host-supplied context dictionary rendered inside the Monaco (raw / code)
+   * surface: collapsible markdown sections injected above anchor lines, plus
+   * an optional file-top summary. See {@link CodeContext}. Ignored in
+   * WYSIWYG / preview / image surfaces.
+   */
+  codeContext?: CodeContext;
   /**
    * Let the WYSIWYG editing surface fill its container instead of rendering
    * as a centered 800px "page" column. Useful when embedding in chat
@@ -324,9 +342,11 @@ export interface EditorShellProps {
    */
   outline?: boolean;
   /**
-   * Width in pixels for the outline pane. Defaults to 240. Only takes
-   * effect when {@link EditorShellProps.outline} is true (or the View
-   * menu has toggled it on).
+   * Fixed width in pixels for the outline pane. When omitted, the pane sizes
+   * responsively — never narrower than 260px, growing with the window and
+   * capped at 460px — so it stretches out when there's horizontal space to
+   * spare. Only takes effect when {@link EditorShellProps.outline} is true (or
+   * the View menu has toggled it on).
    */
   outlineWidth?: number;
   /**
@@ -378,7 +398,7 @@ export function EditorShell({
   articleId = 'untitled',
   basePath = '/',
   onChange,
-  theme = 'light',
+  colorScheme = 'light',
   className,
   height = '100vh',
   minHeight,
@@ -397,6 +417,7 @@ export function EditorShell({
   toolbarSlotRight,
   showPlayTab = true,
   submitOnEnter,
+  codeContext,
   fullWidth = false,
   uxFont,
   thinMargins = false,
@@ -417,7 +438,7 @@ export function EditorShell({
   inlinePreview = false,
   inlinePreviewWidth = 320,
   outline = false,
-  outlineWidth = 240,
+  outlineWidth,
   blockTags = true,
   themeInheritance = 'fonts',
   viewPreferences,
@@ -449,7 +470,7 @@ export function EditorShell({
       initialMarkdown={initialMarkdown}
       initialView={effectiveInitialView}
       articleId={articleId}
-      theme={theme}
+      colorScheme={colorScheme}
       workspaceContainer={effectiveContainer}
       allowVersioning={allowVersioning}
       versionBasename={versionBasename}
@@ -487,6 +508,7 @@ export function EditorShell({
         toolbarSlotRight={toolbarSlotRight}
         showPlayTab={showPlayTab}
         submitOnEnter={submitOnEnter}
+        codeContext={codeContext}
         fullWidth={fullWidth}
         uxFont={uxFont}
         thinMargins={thinMargins}
@@ -522,6 +544,7 @@ interface EditorShellInnerProps {
   toolbarSlotRight?: ReactNode;
   showPlayTab: boolean;
   submitOnEnter?: () => void;
+  codeContext?: CodeContext;
   fullWidth: boolean;
   uxFont?: string;
   thinMargins: boolean;
@@ -534,7 +557,7 @@ interface EditorShellInnerProps {
   allowVersioning: boolean;
   versioningAutoSaveIdleMs?: number;
   inlinePreviewWidth: number;
-  outlineWidth: number;
+  outlineWidth?: number;
   themeOverride: Theme | null;
 }
 
@@ -554,6 +577,7 @@ function EditorShellInner({
   toolbarSlotRight,
   showPlayTab,
   submitOnEnter,
+  codeContext,
   fullWidth,
   uxFont,
   thinMargins,
@@ -573,7 +597,7 @@ function EditorShellInner({
     activeView,
     markdownSource,
     doc,
-    theme,
+    colorScheme,
     editorMode,
     insertAtCursor,
     replaceAll,
@@ -592,6 +616,7 @@ function EditorShellInner({
     imageEditTarget,
     closeImageEdit,
     bumpMediaRevision,
+    mediaRevision,
   } = useEditorContext();
   // Dual-catalog custom themes (doc + browser library), mirroring how
   // CustomTemplateProvider is fed. Wraps the preview subtree so the theme
@@ -610,6 +635,12 @@ function EditorShellInner({
   const isTimelineMode = isMarkdownMode && layoutMode === 'timeline' && !isPreview;
   const [showFiles, setShowFiles] = useState(false);
   const [mediaRefreshKey, setMediaRefreshKey] = useState(0);
+  const [mediaCount, setMediaCount] = useState(0);
+  const mediaListRefreshKey = mediaRefreshKey + mediaRevision;
+  const usedMediaPaths = useMemo(
+    () => collectMediaReferencesFromMarkdown(markdownSource),
+    [markdownSource],
+  );
   // Persistent fallback container for image-edit sidecars when the host
   // didn't supply one. Lifted to shell scope so opening the same image
   // multiple times sees the same `.imageEdits/<sanitized>/.versions/...`
@@ -620,7 +651,34 @@ function EditorShellInner({
     imageEditFallbackContainerRef.current = new MemoryContentContainer();
   }
   const imageEditFallbackContainer = imageEditFallbackContainerRef.current;
-  const isDark = theme === 'dark';
+  const isDark = colorScheme === 'dark';
+
+  useEffect(() => {
+    if (!mediaProvider) {
+      setMediaCount(0);
+      return;
+    }
+
+    let cancelled = false;
+    mediaProvider.listMedia().then(
+      (entries) => {
+        if (!cancelled) setMediaCount(entries.length);
+      },
+      (err: unknown) => {
+        if (!cancelled) {
+          setMediaCount(0);
+          console.warn(
+            '[squisq-editor] Failed to read media list:',
+            err instanceof Error ? err.message : err,
+          );
+        }
+      },
+    );
+
+    return () => {
+      cancelled = true;
+    };
+  }, [mediaProvider, mediaListRefreshKey]);
 
   const handleToggleFiles = useCallback(() => {
     setShowFiles((prev) => !prev);
@@ -679,6 +737,24 @@ function EditorShellInner({
     [activeView, tiptapEditor, monacoEditor, insertAtCursor, markdownSource, setMarkdownSource],
   );
 
+  const handleMediaUploaded = useCallback(
+    (relativePath: string, name: string, mimeType: string) => {
+      insertMediaRef(relativePath, name, mimeType);
+      setMediaRefreshKey((k) => k + 1);
+    },
+    [insertMediaRef],
+  );
+
+  const handleMediaRemoved = useCallback(
+    (relativePath: string) => {
+      const nextSource = removeMediaReferencesFromMarkdown(markdownSource, relativePath);
+      if (nextSource !== markdownSource) replaceAll(nextSource);
+      setMediaRefreshKey((k) => k + 1);
+      bumpMediaRevision();
+    },
+    [bumpMediaRevision, markdownSource, replaceAll],
+  );
+
   const handleFileDrop = useCallback(
     async (files: File[], target: DropTarget) => {
       try {
@@ -761,7 +837,7 @@ function EditorShellInner({
   return (
     <div
       className={`squisq-editor-shell ${className || ''}`}
-      data-theme={theme}
+      data-theme={colorScheme}
       data-full-width={fullWidth ? 'true' : undefined}
       data-thin-margins={thinMargins ? 'true' : undefined}
       data-outline-visible={isMarkdownMode && outlineVisible ? 'true' : undefined}
@@ -775,13 +851,16 @@ 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) : {}),
-        // Exposed so the toolbar's view-tabs section can match the outline
-        // pane's width, lining up its right-edge separator with the
-        // outline's right edge. The variable is set unconditionally so the
-        // outline pane itself can also read it if needed; the
-        // `data-outline-visible` gate above keeps the toolbar override
-        // scoped to the case where alignment matters.
-        ...({ '--squisq-outline-width': `${outlineWidth}px` } as CSSProperties),
+        // 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;
+        // otherwise it's the responsive clamp so the pane stretches when
+        // there's room. The `data-outline-visible` gate above keeps the
+        // toolbar override scoped to the case where alignment matters.
+        ...({
+          '--squisq-outline-width':
+            outlineWidth != null ? `${outlineWidth}px` : OUTLINE_RESPONSIVE_WIDTH,
+        } as CSSProperties),
       }}
       {...containerProps}
     >
@@ -802,14 +881,11 @@ function EditorShellInner({
             <div className="squisq-editor-header">
               <Toolbar
                 showFiles={showFiles}
+                fileCount={mediaCount}
                 onToggleFiles={!isCodeMode && filesToggleEnabled ? handleToggleFiles : undefined}
                 slotLeft={toolbarSlotLeft}
-                slotAfterActions={
-                  <>
-                    {toolbarSlotAfterActions}
-                    {!isCodeMode && isPreview && <PreviewToolbarControls />}
-                  </>
-                }
+                slotAfterTabs={!isCodeMode && isPreview && <PreviewToolbarControls />}
+                slotAfterActions={toolbarSlotAfterActions}
                 slotRight={toolbarSlotRight}
                 showPlayTab={showPlayTab}
               />
@@ -845,9 +921,10 @@ function EditorShellInner({
                     allowVersioning={allowVersioning}
                     versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
                     onExport={onImageExport}
+                    surface={colorScheme === 'dark' ? DARK_SURFACE : LIGHT_SURFACE}
                   />
                 ) : (
-                  <ImageViewer src={imageSrc} alt={imageAlt} theme={theme} />
+                  <ImageViewer src={imageSrc} alt={imageAlt} theme={colorScheme} />
                 ))}
               {/* Raw (Monaco) view. Always wrapped in `.squisq-editor-with-gutter`
                 so toggling a pane on/off doesn't change the editor's tree
@@ -870,7 +947,7 @@ function EditorShellInner({
                     >
                       <div key="raw-editor" className="squisq-raw-editor-container">
                         <RawEditor
-                          theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                          monacoTheme={colorScheme === 'dark' ? 'vs-dark' : 'vs'}
                           submitOnEnter={submitOnEnter}
                           readOnly={readOnly}
                         />
@@ -879,12 +956,18 @@ function EditorShellInner({
                   ) : (
                     <div key="raw-editor" className="squisq-raw-editor-container">
                       <RawEditor
-                        theme={theme === 'dark' ? 'vs-dark' : 'vs'}
+                        monacoTheme={colorScheme === 'dark' ? 'vs-dark' : 'vs'}
                         submitOnEnter={submitOnEnter}
                         readOnly={readOnly}
                       />
                     </div>
                   )}
+                  {/* Renders nothing in normal flow — portals context
+                    sections into Monaco view zones via the context's
+                    monacoEditor. Code mode only. */}
+                  {isCodeMode && codeContext && (
+                    <CodeContextZones key="code-context" options={codeContext} />
+                  )}
                   {isMarkdownMode && isCardMode && inlinePreviewVisible && (
                     <BlockPreviewPanel key="block-preview" basePath={basePath} />
                   )}
@@ -952,8 +1035,11 @@ function EditorShellInner({
               <MediaBin
                 mediaProvider={mediaProvider}
                 isDark={isDark}
-                refreshKey={mediaRefreshKey}
-                onMediaUploaded={insertMediaRef}
+                refreshKey={mediaListRefreshKey}
+                usedMediaPaths={usedMediaPaths}
+                onMediaUploaded={handleMediaUploaded}
+                onMediaRemoved={handleMediaRemoved}
+                onCountChange={setMediaCount}
               />
             )}
 
@@ -1006,7 +1092,7 @@ function EditorShellInner({
           }}
           allowVersioning={allowVersioning}
           versioningAutoSaveIdleMs={versioningAutoSaveIdleMs}
-          shellTheme={theme}
+          shellTheme={colorScheme}
         />
       )}
     </div>
@@ -1031,8 +1117,8 @@ interface ImageEditModalProps {
   onSaved: () => void;
   allowVersioning: boolean;
   versioningAutoSaveIdleMs?: number;
-  /** EditorShell's `theme` prop — 'light' or 'dark'. Threaded through so
-   *  the image editor chrome matches the host shell. */
+  /** EditorShell's `colorScheme` prop — 'light' or 'dark'. Threaded through
+   *  so the image editor chrome matches the host shell. */
   shellTheme?: 'light' | 'dark';
 }