@bendyline/squisq-editor-react 1.6.1 → 1.6.2

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties, RefObject } from 'react';
-import { Doc, MediaProvider, Theme, ViewportPreset, ViewportConfig, CustomTemplateDefinition, SurfaceScheme, ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
+import { Doc, MediaProvider, Theme, ViewportPreset, ViewportConfig, Block, CustomTemplateDefinition, MediaEntry, SurfaceScheme, ImageEditDoc, ImageEditLayer } from '@bendyline/squisq/schemas';
 import { MarkdownDocument, HeadingAttributes } from '@bendyline/squisq/markdown';
 import { ContentContainer } from '@bendyline/squisq/storage';
 import { DocumentVersionManager, SaveVersionOptions, SaveVersionResult, PrunePolicy } from '@bendyline/squisq/versions';
@@ -1549,6 +1549,10 @@ interface PreviewSettings {
      *  that style. The single entry point so the toggle buttons persist in one
      *  frontmatter write. */
     setCaptionMode: (mode: CaptionMode) => void;
+    /** Whether Squisq should synthesize and show its managed cover slide. */
+    activeCoverSlide: boolean;
+    /** Enable/disable the managed cover slide. */
+    setCoverSlideEnabled: (enabled: boolean) => void;
     /** User-authored themes (doc + browser library) for the picker's "Custom" group. */
     customThemes: Theme[];
     /** Open the custom-theme designer for a theme (or null to create a new one). */
@@ -1586,31 +1590,29 @@ declare function PreviewSettingsProvider({ doc, children, themeOverride, }: Prev
  * whole row in and out at a fixed window-width breakpoint, the controls
  * measure how many of them actually fit in the width the toolbar gives them
  * and keep that many inline, folding the rest — from the low-priority end of
- * {@link CONTROL_KEYS} — into a single settings (gear) button's popover. As
+ * {@link CONTROL_KEYS} — into a single ellipsis button's popover. As
  * the toolbar widens or narrows, controls migrate one at a time between the
  * inline row and the menu, so the available space is always well used and the
  * row never wraps onto a second line.
  */
 declare function PreviewToolbarControls(): react_jsx_runtime.JSX.Element;
 /**
- * Segmented display-mode switch (Video / Slideshow / Document / Page) rendered
- * as four connected buttons on the left of the Play toolbar — the prominent,
- * one-click counterpart to the old "Mode:" dropdown. Reads and writes the same
- * `activeDisplayMode` in preview settings.
+ * Segmented display-mode switch (Video / Slideshow / Document / Page), used
+ * inline in the Use toolbar and inside its overflow popover. Reads and writes
+ * the same `activeDisplayMode` in preview settings.
  */
 declare function PreviewModeSwitch(): react_jsx_runtime.JSX.Element;
 /**
- * Segmented aspect-ratio switch (16:9 / 1:1 / 9:16 / 4:3) rendered as connected
- * icon buttons on the left of the Play toolbar, next to the mode switch — the
- * one-click counterpart to the old "Format:" dropdown. Reads and writes the
- * same `activePreset` in preview settings.
+ * Segmented aspect-ratio switch (16:9 / 1:1 / 9:16 / 4:3), used inline in the
+ * Use toolbar and inside its overflow popover. Reads and writes the same
+ * `activePreset` in preview settings.
  */
 declare function PreviewFormatSwitch(): react_jsx_runtime.JSX.Element;
 
 /**
  * ViewSwitcher
  *
- * Tab bar for switching between Raw, WYSIWYG, and Preview editor views.
+ * Tab bar for switching between Write, Source, and Use editor views.
  */
 interface ViewSwitcherProps {
     /** Additional class name */
@@ -1626,13 +1628,15 @@ interface ToolbarProps {
     className?: string;
     /** Whether the Files panel is currently shown */
     showFiles?: boolean;
+    /** Number of files currently available through the MediaProvider. */
+    fileCount?: number;
     /** Toggle the Files panel. When provided, a "Files" button appears in the toolbar. */
     onToggleFiles?: () => void;
     /** Content rendered at the left edge of the toolbar, before the view tabs. */
     slotLeft?: ReactNode;
     /** Content rendered immediately after the view tabs, on the left side of the
      *  toolbar (before the formatting controls). Used for the preview mode
-     *  switch in Play view. */
+     *  switch in Use view. */
     slotAfterTabs?: ReactNode;
     /** Content rendered after the formatting controls (in the middle area). */
     slotAfterActions?: ReactNode;
@@ -1650,7 +1654,7 @@ interface ToolbarProps {
  * - WYSIWYG: calls Tiptap chain commands (toggleBold, etc.)
  * - Raw: appends markdown syntax to the source
  */
-declare function Toolbar({ className, showFiles, onToggleFiles, slotLeft, slotAfterTabs, slotAfterActions, slotRight, showPlayTab, }: ToolbarProps): react_jsx_runtime.JSX.Element;
+declare function Toolbar({ className, showFiles, fileCount, onToggleFiles, slotLeft, slotAfterTabs, slotAfterActions, slotRight, showPlayTab, }: ToolbarProps): react_jsx_runtime.JSX.Element;
 
 /**
  * VersionHistoryPanel
@@ -1700,8 +1704,18 @@ interface ThemeCustomizerPanelProps {
     onSave?: (theme: Theme, json: string) => void;
     /** Fired when the user clicks Reset. Host typically clears its persistent storage. */
     onReset?: () => void;
+    /** Optional text trigger. Omit to use the compact icon trigger. */
+    triggerLabel?: string;
+}
+declare function ThemeCustomizerPanel({ value, onChange, onSave, onReset, triggerLabel, }: ThemeCustomizerPanelProps): react_jsx_runtime.JSX.Element;
+
+interface TemplatePreviewSource {
+    block: Block;
+    theme: Theme;
+    viewport: ViewportConfig;
+    basePath?: string;
+    mediaProvider?: MediaProvider | null;
 }
-declare function ThemeCustomizerPanel({ value, onChange, onSave, onReset, }: ThemeCustomizerPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Convert a camelCase template id to a human-readable label. Accepts both
@@ -1714,6 +1728,8 @@ declare function templateLabel(name: string, customTemplates?: readonly CustomTe
 interface TemplatePickerProps {
     value: string;
     onChange: (name: string) => void;
+    /** Active editor chrome theme, used by the portaled dialog. */
+    colorScheme?: 'light' | 'dark';
     /** When true, shows only the trigger button (no popover) — used in the overflow menu. */
     compact?: boolean;
     /**
@@ -1729,8 +1745,14 @@ interface TemplatePickerProps {
      * hidden.
      */
     onOpenDesigner?: () => void;
+    /**
+     * Active block content used to render live template thumbnails. When omitted,
+     * or when a template cannot be meaningfully derived from the block, cards use
+     * their static wireframe icons.
+     */
+    previewSource?: TemplatePreviewSource;
 }
-declare function TemplatePicker({ value, onChange, compact, recommended, onOpenDesigner, }: TemplatePickerProps): react_jsx_runtime.JSX.Element;
+declare function TemplatePicker({ value, onChange, colorScheme, compact, recommended, onOpenDesigner, previewSource, }: TemplatePickerProps): react_jsx_runtime.JSX.Element;
 
 /**
  * headingTransition
@@ -1740,16 +1762,13 @@ declare function TemplatePicker({ value, onChange, compact, recommended, onOpenD
  *
  * - 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
@@ -1767,27 +1786,41 @@ interface TransitionFields {
 declare const EMPTY_TRANSITION: TransitionFields;
 /**
  * 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.
  */
 declare 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.
  */
 declare function setHeadingLineTransition(line: string, next: TransitionFields): 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.
  */
 declare function readBlockAttrsTransition(blockAttrsInner: string | null | undefined, templateParams: string | null | undefined): TransitionFields;
+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`.
+ */
+declare function setHeadingAttrsTransition(blockAttrsInner: string | null | undefined, templateParams: string | null | undefined, next: TransitionFields): HeadingTransitionAttrs;
 /**
- * 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.
  */
 declare function setBlockAttrsTransition(blockAttrsInner: string | null | undefined, next: TransitionFields): string | null;
 
@@ -1883,12 +1916,11 @@ declare function summarizeBlockProps(blockAttrs: string | null | undefined, temp
  *
  * 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
@@ -1905,9 +1937,14 @@ 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;
 }
-declare function BlockPropertiesPopover({ anchorRect, blockAttrs, templateParams, onChange, onClose, }: BlockPropertiesPopoverProps): react.ReactPortal;
+declare function BlockPropertiesPopover({ anchorRect, blockAttrs, templateParams, onChange, onAnnotationChange, onClose, }: BlockPropertiesPopoverProps): react.ReactPortal;
 
 interface InlinePreviewGutterProps {
     /** Width of the gutter in pixels (default: 320). */
@@ -1939,6 +1976,8 @@ interface MediaBinProps {
     isDark: boolean;
     /** Incremented externally to signal a re-scan of the media list */
     refreshKey?: number;
+    /** Relative media paths currently referenced by the document. */
+    usedMediaPaths?: ReadonlySet<string>;
     /**
      * Fired after a successful upload via the MediaBin's own "+ Upload"
      * button. `relativePath` is what the provider returned (the same
@@ -1950,8 +1989,15 @@ interface MediaBinProps {
      * else, leaving the message body empty when the user hit Send.
      */
     onMediaUploaded?: (relativePath: string, name: string, mimeType: string) => void | Promise<void>;
+    /**
+     * Fired after a file is removed through the MediaBin context menu.
+     * Hosts use this to remove matching markdown refs from the document.
+     */
+    onMediaRemoved?: (relativePath: string, entry: MediaEntry) => void | Promise<void>;
+    /** Fired whenever the panel scans media and knows the current entry count. */
+    onCountChange?: (count: number) => void;
 }
-declare function MediaBin({ mediaProvider, isDark, refreshKey, onMediaUploaded }: MediaBinProps): react_jsx_runtime.JSX.Element;
+declare function MediaBin({ mediaProvider, isDark, refreshKey, usedMediaPaths, onMediaUploaded, onMediaRemoved, onCountChange, }: MediaBinProps): react_jsx_runtime.JSX.Element;
 
 /**
  * StatusBar
@@ -3057,4 +3103,4 @@ interface UseImageEditorReturn {
 }
 declare function useImageEditor(options: UseImageEditorOptions): UseImageEditorReturn;
 
-export { ALL_EMOJIS, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, type CameraStreamOptions, type CanvasRect, type CaptureKind, type CodeContext, type CodeContextSection, CodeContextZones, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DiagramCanvas, type DiagramCommand, type DiagramData, DiagramExtension, type DiagramRFEdge, type DiagramRFNode, DiagramWidget, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, type DocumentLinkCandidate, type DocumentLinkProvider, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMOJI_CATEGORIES, EMPTY_TRANSITION, type EditorActions, type EditorColorScheme, type EditorContextValue, type EditorMode, EditorProvider, type EditorProviderProps, EditorShell, type EditorShellProps, type EditorState, type EditorView, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FolderEntry, FolderView, type FolderViewProps, HeadingWithTemplate, type ImageDisplayMode, ImageEditor, type ImageEditorAction, type ImageEditorProps, type ImageEditorState, type ImageEditorTool, ImageViewer, type ImageViewerProps, InlinePreviewGutter, type InlinePreviewGutterProps, JsonEditor, type JsonEditorProps, type LayoutMode, MediaBin, type MediaBinProps, type MediaClipPatch, type MentionCandidate, type MentionProvider, OutlinePanel, type OutlinePanelProps, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeSwitch, PreviewPanel, type PreviewPanelProps, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, RawEditor, type RawEditorProps, type RecordedBookmark, RecorderButton, type RecorderButtonProps, RecorderModal, type RecorderModalProps, RecorderPanel, type RecorderPanelProps, type RecorderSaveResult, type RecorderSource, type RecorderState, type ResolvedFormat, type ScreenStreamHandle, type ScreenStreamOptions, StatusBar, type StatusBarProps, TRANSITION_ENTRIES, TRANSITION_GROUPS, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, type ThemeInheritance, ThemePicker, type ThemePickerProps, TimelineTrack, type TimelineTrackProps, type TimingJson, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseImageEditorOptions, type UseImageEditorReturn, type UseMediaRecorderOptions, type UseMediaRecorderResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, type ViewPreferences, ViewSwitcher, type ViewSwitcherProps, WysiwygEditor, type WysiwygEditorProps, addConnection, addNode, buildFilename, buildPreviewDoc, buildTimingJson, classifyFile, detectLanguageFromFileName, encodeTimingJson, findTransitionEntry, formatSeconds, getBlockSlices, getCaptureKind, imageEditorReducer, initialImageEditorState, lineToOffset, listDiagramChildren, markdownToTiptap, moveNode, offsetToLine, partitionFiles, processMediaFiles, processTextFile, processTextFiles, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, removeConnection, removeNode, renameNode, requestCameraStream, requestMicStream, requestScreenStream, resolveFileKind, resolveFormat, searchEmojis, setBlockAttrsTransition, setBlockAttrsValue, setBlockDurationInSource, setHeadingLineTransition, setMediaClipInSource, sliceIndexAtOffset, spliceBlock, summarizeBlockProps, supportsDisplayMedia, supportsMediaRecorder, supportsUserMedia, templateLabel, timingPathFor, tiptapToMarkdown, transitionLabel, useBlockNavigator, useCustomTemplates, useCustomThemes, useDiagramData, useDocCustomTemplates, useDocCustomThemes, useEditorContext, useFileDrop, useImageEditor, useMediaRecorder, useMonacoLoader, usePreviewSettings, useStreamPreview };
+export { ALL_EMOJIS, BlockCardView, type BlockCardViewProps, type BlockNavigator, BlockPropertiesPopover, type BlockPropertiesPopoverProps, type BlockRange, type BlockSlice, type CameraStreamOptions, type CanvasRect, type CaptureKind, type CodeContext, type CodeContextSection, CodeContextZones, type CustomTemplateContextValue, CustomTemplateProvider, type CustomTemplateProviderProps, type CustomThemeContextValue, CustomThemeProvider, type CustomThemeProviderProps, DiagramCanvas, type DiagramCommand, type DiagramData, DiagramExtension, type DiagramRFEdge, type DiagramRFNode, DiagramWidget, type DirectionModel, type DocCustomTemplates, type DocCustomThemes, type DocumentLinkCandidate, type DocumentLinkProvider, DocumentSettingsDialog, type DocumentSettingsDialogProps, type DragContentType, type DropTarget, DropZoneOverlay, type DropZoneOverlayProps, EMOJI_CATEGORIES, EMPTY_TRANSITION, type EditorActions, type EditorColorScheme, type EditorContextValue, type EditorMode, EditorProvider, type EditorProviderProps, EditorShell, type EditorShellProps, type EditorState, type EditorView, type EmojiCategory, type EmojiEntry, EmojiPicker, type EmojiPickerProps, type FileCategory, type FileKind, type FolderEntry, FolderView, type FolderViewProps, type HeadingTransitionAttrs, HeadingWithTemplate, type ImageDisplayMode, ImageEditor, type ImageEditorAction, type ImageEditorProps, type ImageEditorState, type ImageEditorTool, ImageViewer, type ImageViewerProps, InlinePreviewGutter, type InlinePreviewGutterProps, JsonEditor, type JsonEditorProps, type LayoutMode, MediaBin, type MediaBinProps, type MediaClipPatch, type MentionCandidate, type MentionProvider, OutlinePanel, type OutlinePanelProps, PlainHtmlPreview, type PlainHtmlPreviewProps, PreviewFormatSwitch, PreviewModeSwitch, PreviewPanel, type PreviewPanelProps, type PreviewSettings, PreviewSettingsProvider, PreviewToolbarControls, RawEditor, type RawEditorProps, type RecordedBookmark, RecorderButton, type RecorderButtonProps, RecorderModal, type RecorderModalProps, RecorderPanel, type RecorderPanelProps, type RecorderSaveResult, type RecorderSource, type RecorderState, type ResolvedFormat, type ScreenStreamHandle, type ScreenStreamOptions, StatusBar, type StatusBarProps, TRANSITION_ENTRIES, TRANSITION_GROUPS, TemplatePicker, ThemeCustomizerPanel, type ThemeCustomizerPanelProps, type ThemeInheritance, ThemePicker, type ThemePickerProps, TimelineTrack, type TimelineTrackProps, type TimingJson, Toolbar, type ToolbarProps, TooltipLayer, type TransitionCatalogEntry, type TransitionFields, type TransitionGroup, TransitionPicker, type TransitionPickerProps, type UseBlockNavigatorOptions, type UseFileDropOptions, type UseFileDropResult, type UseImageEditorOptions, type UseImageEditorReturn, type UseMediaRecorderOptions, type UseMediaRecorderResult, type UseMonacoLoaderResult, VersionHistoryPanel, ViewMenuPanel, type ViewPreferences, ViewSwitcher, type ViewSwitcherProps, WysiwygEditor, type WysiwygEditorProps, addConnection, addNode, buildFilename, buildPreviewDoc, buildTimingJson, classifyFile, detectLanguageFromFileName, encodeTimingJson, findTransitionEntry, formatSeconds, getBlockSlices, getCaptureKind, imageEditorReducer, initialImageEditorState, lineToOffset, listDiagramChildren, markdownToTiptap, moveNode, offsetToLine, partitionFiles, processMediaFiles, processTextFile, processTextFiles, readBlockAttrsParams, readBlockAttrsTransition, readBlockAttrsValue, readHeadingLineTransition, removeConnection, removeNode, renameNode, requestCameraStream, requestMicStream, requestScreenStream, resolveFileKind, resolveFormat, searchEmojis, setBlockAttrsTransition, setBlockAttrsValue, setBlockDurationInSource, setHeadingAttrsTransition, setHeadingLineTransition, setMediaClipInSource, sliceIndexAtOffset, spliceBlock, summarizeBlockProps, supportsDisplayMedia, supportsMediaRecorder, supportsUserMedia, templateLabel, timingPathFor, tiptapToMarkdown, transitionLabel, useBlockNavigator, useCustomTemplates, useCustomThemes, useDiagramData, useDocCustomTemplates, useDocCustomThemes, useEditorContext, useFileDrop, useImageEditor, useMediaRecorder, useMonacoLoader, usePreviewSettings, useStreamPreview };