@bendyline/squisq-editor-react 2.7.3 → 2.9.0

package/dist/{chunk-YPRX32GY.js → chunk-SAYCG257.js}

@@ -1,7 +1,7 @@
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-K2WJYVS4.js";
+} from "./chunk-TLRB3IQC.js";
 
 // src/jsonEditor/JsonEditorContext.tsx
 import { createContext, useContext, useEffect, useMemo } from "react";

package/dist/{chunk-K2WJYVS4.js → chunk-TLRB3IQC.js}

@@ -10,6 +10,8 @@ var RE_BOLD_UNDER = /(?<![\p{L}\p{N}_])__(?![\s_])(.+?)(?<![\s_])__(?![\p{L}\p{N
 var RE_ITALIC_STAR = /\*(?![\s*])(.+?)(?<![\s*])\*/g;
 var RE_ITALIC_UNDER = /(?<![\p{L}\p{N}_])_(?![\s_])(.+?)(?<![\s_])_(?![\p{L}\p{N}_])/gu;
 var RE_STRIKETHROUGH = /~~(.+?)~~/g;
+var RE_LEGACY_BOLD_STAR = /\*\*(?![\s*])(.+?)(?<![\s*])([ \t]+)\*\*(?=$|[^\s*])/g;
+var RE_LEGACY_ITALIC_STAR = /(?<!\*)\*(?![\s*])(.+?)(?<![\s*])([ \t]+)\*(?=$|[^\s*])/g;
 var ESCAPABLE_MD_CHARS = ["*", "_", "~", "\\"];
 var RE_MD_ESCAPE = /\\([*_~\\])/g;
 var RE_INLINE_CODE = /`(.+?)`/g;
@@ -18,12 +20,7 @@ var RE_MENTION = /@\[([^\]]+?)\]\(([a-z][a-z0-9+.-]*)\\?:([^)\s]+)\)/gi;
 var RE_MENTION_TAG = /<span\b[^>]*?\bdata-mention\b[^>]*?>(?:<[^>]+>)*([^<]*)<\/span>/gi;
 var RE_ICON_MD = /\{\[([a-zA-Z0-9_:-]+)\]\}/g;
 var RE_ICON_TAG = /<i\b[^>]*?\bdata-icon="([^"]*)"[^>]*?><\/i>/gi;
-var RE_STRONG_TAG = /<strong>(.*?)<\/strong>/g;
-var RE_B_TAG = /<b>(.*?)<\/b>/g;
-var RE_EM_TAG = /<em>(.*?)<\/em>/g;
-var RE_I_TAG = /<i>(.*?)<\/i>/g;
-var RE_S_TAG = /<s>(.*?)<\/s>/g;
-var RE_DEL_TAG = /<del>(.*?)<\/del>/g;
+var RE_MARK_TAG = /<(strong|b|em|i|s|del)>(.*?)<\/\1>/gs;
 var RE_CODE_TAG = /<code>(.*?)<\/code>/g;
 var RE_A_TAG = /<a\b([^>]*)>(.*?)<\/a>/g;
 var RE_IMG_TAG = /<img\b([^>]*)>/g;
@@ -814,8 +811,10 @@ function inlineToHtml(text) {
     RE_MD_ESCAPE,
     (_m, ch) => `\0ESC${ESCAPABLE_MD_CHARS.indexOf(ch)}\0`
   );
+  result = result.replace(RE_LEGACY_BOLD_STAR, "<strong>$1</strong>$2");
   result = result.replace(RE_BOLD_STAR, "<strong>$1</strong>");
   result = result.replace(RE_BOLD_UNDER, "<strong>$1</strong>");
+  result = result.replace(RE_LEGACY_ITALIC_STAR, "<em>$1</em>$2");
   result = result.replace(RE_ITALIC_STAR, "<em>$1</em>");
   result = result.replace(RE_ITALIC_UNDER, "<em>$1</em>");
   result = result.replace(RE_STRIKETHROUGH, "<s>$1</s>");
@@ -961,17 +960,23 @@ function escapeMarkdownTextNodes(html) {
   }
   return out + escapeMarkdownText(html.slice(cursor));
 }
+function markdownFromMarkTags(html) {
+  return html.replace(RE_MARK_TAG, (_match, tag, inner) => {
+    const convertedInner = markdownFromMarkTags(inner);
+    const leading = convertedInner.match(/^\s*/)?.[0] ?? "";
+    const trailing = convertedInner.match(/\s*$/)?.[0] ?? "";
+    const content = convertedInner.slice(leading.length, convertedInner.length - trailing.length);
+    if (!content) return convertedInner;
+    const delimiter = tag === "strong" || tag === "b" ? "**" : tag === "em" || tag === "i" ? "*" : "~~";
+    return `${leading}${delimiter}${content}${delimiter}${trailing}`;
+  });
+}
 function htmlToInline(html) {
   let result = html;
   result = result.replace(/<br\s*\/?>/gi, "  \n");
   result = escapeMarkdownTextNodes(result);
   result = result.replace(RE_ICON_TAG, (_m, token) => `{[${token}]}`);
-  result = result.replace(RE_STRONG_TAG, "**$1**");
-  result = result.replace(RE_B_TAG, "**$1**");
-  result = result.replace(RE_EM_TAG, "*$1*");
-  result = result.replace(RE_I_TAG, "*$1*");
-  result = result.replace(RE_S_TAG, "~~$1~~");
-  result = result.replace(RE_DEL_TAG, "~~$1~~");
+  result = markdownFromMarkTags(result);
   result = result.replace(RE_CODE_TAG, "`$1`");
   result = result.replace(RE_MENTION_TAG, (match, _inner) => {
     const kind = /data-kind="([^"]*)"/i.exec(match)?.[1] ?? "";

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel } from './shell-595XbANu.js';
-export { B as BlockTagVisibility, a as CodeContextSection, D as DocumentLinkCandidate, b as DocumentLinkProvider, c as EditorActions, d as EditorColorScheme, e as EditorContextValue, f as EditorMode, g as EditorProvider, h as EditorProviderProps, i as EditorShell, j as EditorShellProps, k as EditorState, l as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, m as MentionProvider, P as PreviewPanel, n as PreviewPanelProps, R as RawEditor, o as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, p as WysiwygEditor, q as WysiwygEditorProps, u as useEditorContext } from './shell-595XbANu.js';
+import { C as CodeContext, E as EditorHostMode, S as SceneTextChannel } from './shell-Bv6neeA6.js';
+export { B as BlockTagVisibility, a as CodeContextSection, b as CoverImageSaveOutput, D as DashboardImageSaveOutput, c as DocumentLinkCandidate, d as DocumentLinkProvider, e as EditorActions, f as EditorColorScheme, g as EditorContextValue, h as EditorMode, i as EditorProvider, j as EditorProviderProps, k as EditorShell, l as EditorShellProps, m as EditorState, n as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, o as MentionProvider, P as PreviewPanel, p as PreviewPanelProps, R as RawEditor, q as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, W as WriteCanvasSettings, r as WysiwygEditor, s as WysiwygEditorProps, u as useEditorContext } from './shell-Bv6neeA6.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
@@ -8,7 +8,7 @@ import { ContentContainer } from '@bendyline/squisq/storage';
 export { CanvasRect, ImageEditor, ImageEditorAction, ImageEditorProps, ImageEditorState, ImageEditorTool, ImageViewer, ImageViewerProps, UseImageEditorOptions, UseImageEditorReturn, imageEditorReducer, initialImageEditorState, useImageEditor } from './image-editor/index.js';
 import { CodeBlockCopyHandler, DisplayMode, CaptionStyle, VideoPresentation, PipSize, PipShape, PipPosition } from '@bendyline/squisq-react';
 import { IconFamily } from '@bendyline/squisq/icons';
-import { CoverSlideTemplate, CoverSlidePlayback, ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
+import { CoverSlideTemplate, CoverSlidePlayback, DashboardStyleId, DashboardLayoutSummary, ConnectorRouting, AsciiDiagram, Tree, AsciiTimeline, AsciiTimelineSide, AsciiTimelineMarker } from '@bendyline/squisq/doc';
 export { BuildPreviewDocOptions, buildPreviewDoc, documentTitleFromFileName } from '@bendyline/squisq/doc';
 import { MarkdownWrapState } from '@bendyline/squisq/markdown';
 import * as monaco_editor from 'monaco-editor';
@@ -572,7 +572,7 @@ declare function EmojiPicker({ open, onSelect, onClose, anchorRef, className, st
  * DocumentSettingsDialog
  *
  * Modal editor for the frontmatter values that Squisq currently
- * understands: document title plus the persisted preview keys
+ * understands: document title and cover subtitle plus the persisted preview keys
  * (`squisq-theme`, `squisq-transform`, `squisq-captions`). Writes back
  * to the same `setFrontmatterValues` channel that `PreviewControls`
  * uses, so any change made here is reflected in the play-mode controls
@@ -842,6 +842,20 @@ interface PreviewSettings {
     activeVideoLoop: boolean;
     /** Enable/disable automatic Video-mode playback restart. */
     setVideoLoopEnabled: (enabled: boolean) => void;
+    /** Dashboard layout id, or `'auto'` for the block-count auto-pick. */
+    activeDashboardLayout: string;
+    /** Set (and persist) the dashboard layout; null resets to auto. */
+    setDashboardLayout: (id: string | null) => void;
+    /** Whether the dashboard renders the document-title band. */
+    activeDashboardTitle: boolean;
+    /** Enable/disable (and persist) the dashboard title band. */
+    setDashboardTitleEnabled: (enabled: boolean) => void;
+    /** Dashboard cell style variant — the dressing axis beside the layout. */
+    activeDashboardStyle: DashboardStyleId;
+    /** Set (and persist) the dashboard cell style; null resets to `basic`. */
+    setDashboardStyle: (id: string | null) => void;
+    /** Layouts available to the doc: customs first, then built-ins. */
+    dashboardLayoutOptions: DashboardLayoutSummary[];
     /** 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). */

package/dist/index.js

@@ -205,15 +205,15 @@ import {
   usePreviewSettings,
   useTimelineData,
   useTreeViewData
-} from "./chunk-7K4LSSNL.js";
+} from "./chunk-53PXOIMU.js";
 import "./chunk-V4NBQF5C.js";
 import {
   JsonEditor
-} from "./chunk-YPRX32GY.js";
+} from "./chunk-SAYCG257.js";
 import {
   markdownToTiptap,
   tiptapToMarkdown
-} from "./chunk-K2WJYVS4.js";
+} from "./chunk-TLRB3IQC.js";
 import {
   ImageEditor,
   ImageViewer,

package/dist/json-editor/index.js

@@ -1,7 +1,7 @@
 import {
   JsonEditor
-} from "../chunk-YPRX32GY.js";
-import "../chunk-K2WJYVS4.js";
+} from "../chunk-SAYCG257.js";
+import "../chunk-TLRB3IQC.js";
 export {
   JsonEditor
 };

package/dist/shell/index.d.ts

@@ -1,4 +1,4 @@
-export { B as BlockTagVisibility, D as DocumentLinkCandidate, b as DocumentLinkProvider, c as EditorActions, d as EditorColorScheme, e as EditorContextValue, E as EditorHostMode, f as EditorMode, g as EditorProvider, h as EditorProviderProps, i as EditorShell, j as EditorShellProps, k as EditorState, l as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, m as MentionProvider, P as PreviewPanel, n as PreviewPanelProps, R as RawEditor, o as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, p as WysiwygEditor, q as WysiwygEditorProps, u as useEditorContext } from '../shell-595XbANu.js';
+export { B as BlockTagVisibility, c as DocumentLinkCandidate, d as DocumentLinkProvider, e as EditorActions, f as EditorColorScheme, g as EditorContextValue, E as EditorHostMode, h as EditorMode, i as EditorProvider, j as EditorProviderProps, k as EditorShell, l as EditorShellProps, m as EditorState, n as EditorView, I as ImageDisplayMode, L as LayoutMode, M as MentionCandidate, o as MentionProvider, P as PreviewPanel, p as PreviewPanelProps, R as RawEditor, q as RawEditorProps, T as ThemeInheritance, V as ViewPreferences, r as WysiwygEditor, s as WysiwygEditorProps, u as useEditorContext } from '../shell-Bv6neeA6.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@bendyline/squisq/schemas';

package/dist/shell/index.js

@@ -5,9 +5,9 @@ import {
   RawEditor,
   WysiwygEditor,
   useEditorContext
-} from "../chunk-7K4LSSNL.js";
+} from "../chunk-53PXOIMU.js";
 import "../chunk-V4NBQF5C.js";
-import "../chunk-K2WJYVS4.js";
+import "../chunk-TLRB3IQC.js";
 import "../chunk-V44VP242.js";
 import "../chunk-V3J5S7X6.js";
 import "../chunk-GS7QWYFT.js";

package/dist/{shell-595XbANu.d.ts → shell-Bv6neeA6.d.ts}

@@ -301,6 +301,16 @@ interface EditorActions {
      */
     bumpMediaRevision: () => void;
 }
+/**
+ * Host-owned persistence for a rendered cover image. Return `false` when the
+ * user cancels so the export modal stays open without reporting an error.
+ */
+type CoverImageSaveOutput = (blob: Blob, filename: string) => boolean | void | Promise<boolean | void>;
+/**
+ * Host-owned persistence for a rendered dashboard image — the same contract
+ * as {@link CoverImageSaveOutput} (`false` keeps the export dialog open).
+ */
+type DashboardImageSaveOutput = CoverImageSaveOutput;
 interface EditorContextValue extends EditorState, EditorActions {
     /** The live Tiptap editor instance (null when WYSIWYG is not mounted) */
     tiptapEditor: Editor | null;
@@ -382,6 +392,10 @@ interface EditorContextValue extends EditorState, EditorActions {
      * document has no frontmatter `title:`.
      */
     fileName: string | undefined;
+    /** Optional host save flow for cover-slide image exports. */
+    saveCoverImageOutput: CoverImageSaveOutput | undefined;
+    /** Optional host save flow for dashboard image exports. */
+    saveDashboardImageOutput: DashboardImageSaveOutput | undefined;
 }
 type ImageDisplayMode = 'inline' | 'thumbnail';
 /**
@@ -481,6 +495,10 @@ interface EditorProviderProps {
      * language and decide between markdown vs. code mode.
      */
     fileName?: string;
+    /** Optional host save flow for cover-slide image exports. */
+    saveCoverImageOutput?: CoverImageSaveOutput;
+    /** Optional host save flow for dashboard image exports. */
+    saveDashboardImageOutput?: DashboardImageSaveOutput;
     /** Explicit Monaco language ID — wins over the fileName-derived one. */
     language?: string;
     /**
@@ -569,7 +587,7 @@ interface ViewPreferences {
     /** Document vs. block-at-a-time layout. */
     layoutMode?: LayoutMode;
 }
-declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, fileName, language, findMode: controlledFindMode, onFindModeChange, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+declare function EditorProvider({ initialMarkdown, initialView, articleId, colorScheme: initialColorScheme, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, mediaProvider, imageDisplayMode, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode: controlledFindMode, onFindModeChange, inlinePreview, showStatusBar, outline, blockTags, blockTagVisibility: initialBlockTagVisibility, themeInheritance, layoutMode, viewPreferences, onViewPreferencesChange, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Host-supplied context sections rendered INSIDE the Monaco (raw/code)
@@ -908,6 +926,16 @@ interface EditorShellProps {
      * experience. Omit to get today's markdown behavior unchanged.
      */
     fileName?: string;
+    /**
+     * Optional host save flow for cover-slide image exports. When omitted, the
+     * editor uses the browser File System Access picker or download fallback.
+     */
+    saveCoverImageOutput?: CoverImageSaveOutput;
+    /**
+     * Optional host save flow for dashboard image exports. When omitted, the
+     * editor uses the browser File System Access picker or download fallback.
+     */
+    saveDashboardImageOutput?: DashboardImageSaveOutput;
     /**
      * Explicit Monaco language ID override (e.g. `'typescript'`,
      * `'python'`, `'json'`). Wins over the language derived from
@@ -1108,7 +1136,7 @@ interface EditorShellProps {
  * Complete markdown editor shell with toolbar, view switcher, and three
  * editing modes: Raw (Monaco), WYSIWYG (Tiptap), and Preview.
  */
-declare function EditorShell({ initialMarkdown, initialView, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
+declare function EditorShell({ initialMarkdown, initialView, hostMode, defaultViewportPreset, articleId, basePath, onChange, onLinkClick, showCodeCopyButton, onCopyCode, colorScheme, className, height, minHeight, maxHeight, mediaProvider, workspaceContainer, allowVersioning, versionBasename, versioningPrunePolicy, versioningAutoSaveIdleMs, onSaveVersion, showFilesToggle, showFormattingControls, showInsertControls, allowBinaryDownloads, toolbarSlotLeft, toolbarSlotAfterActions, toolbarSlotRight, statusBarSlotRight, showPlayTab, allowPresentationWindow, allowPresentationFullscreen, allowPrint, submitOnEnter, codeContext, fullWidth, uxFont, thinMargins, writeCanvasSettings, showStatusBar, imageDisplayMode, fileName, saveCoverImageOutput, saveDashboardImageOutput, language, findMode, onFindModeChange, mentionProvider, documentLinkProvider, fenceRenderers, linkSchemes, allowRecording, allowNarrate, preserveSourceWrapping, placeholder, readOnly, imageSrc, imageAlt, imageMode, imageEditorContainer, onImageExport, inlinePreview, inlinePreviewWidth, outline, outlineWidth, blockTags, blockTagVisibility, themeInheritance, viewPreferences, onViewPreferencesChange, themeOverride, }: EditorShellProps): react_jsx_runtime.JSX.Element;
 
 /**
  * RawEditor
@@ -1198,4 +1226,4 @@ interface PreviewPanelProps {
  */
 declare function PreviewPanel({ basePath, className, workspaceContainer, onLinkClick, showCodeCopyButton, onCopyCode, }: PreviewPanelProps): react_jsx_runtime.JSX.Element;
 
-export { type BlockTagVisibility as B, type CodeContext as C, type DocumentLinkCandidate as D, type EditorHostMode as E, type ImageDisplayMode as I, type LayoutMode as L, type MentionCandidate as M, PreviewPanel as P, RawEditor as R, type SceneTextChannel as S, type ThemeInheritance as T, type ViewPreferences as V, type WriteCanvasSettings as W, type CodeContextSection as a, type DocumentLinkProvider as b, type EditorActions as c, type EditorColorScheme as d, type EditorContextValue as e, type EditorMode as f, EditorProvider as g, type EditorProviderProps as h, EditorShell as i, type EditorShellProps as j, type EditorState as k, type EditorView as l, type MentionProvider as m, type PreviewPanelProps as n, type RawEditorProps as o, WysiwygEditor as p, type WysiwygEditorProps as q, useEditorContext as u };
+export { type BlockTagVisibility as B, type CodeContext as C, type DashboardImageSaveOutput as D, type EditorHostMode as E, type ImageDisplayMode as I, type LayoutMode as L, type MentionCandidate as M, PreviewPanel as P, RawEditor as R, type SceneTextChannel as S, type ThemeInheritance as T, type ViewPreferences as V, type WriteCanvasSettings as W, type CodeContextSection as a, type CoverImageSaveOutput as b, type DocumentLinkCandidate as c, type DocumentLinkProvider as d, type EditorActions as e, type EditorColorScheme as f, type EditorContextValue as g, type EditorMode as h, EditorProvider as i, type EditorProviderProps as j, EditorShell as k, type EditorShellProps as l, type EditorState as m, type EditorView as n, type MentionProvider as o, type PreviewPanelProps as p, type RawEditorProps as q, WysiwygEditor as r, type WysiwygEditorProps as s, useEditorContext as u };

package/dist/styles/index.css

@@ -9715,6 +9715,19 @@
   background: #f5f5f5;
   padding: 16px;
 }
+.squisq-dashboard-fit {
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  container-type: size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.squisq-dashboard-fit .squisq-dashboard {
+  --squisq-dashboard-fit-width: min(100%, calc(100cqh * var(--squisq-dashboard-aspect, 1.7778)));
+}
 .squisq-editor-shell[data-print-preview=true] > .squisq-status-bar,
 .squisq-editor-shell[data-print-preview=true] > .squisq-timeline,
 .squisq-editor-shell[data-print-preview=true] .squisq-media-bin,
@@ -9807,6 +9820,71 @@
   color: #6b7280;
   font: 500 14px/1.4 var(--squisq-ux-font, sans-serif);
 }
+.squisq-print-preview--flashcards {
+  display: grid;
+  gap: 24px;
+  color: var(--squisq-print-flashcard-text);
+}
+.squisq-print-flashcard-sheet {
+  width: min(1100px, 100%);
+  aspect-ratio: 11 / 8.5;
+  margin-inline: auto;
+  padding: 4%;
+  background: var(--squisq-print-flashcard-bg);
+  box-shadow: 0 8px 30px rgb(15 23 42 / 18%);
+  break-after: page;
+}
+.squisq-print-flashcard-sheet > header {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 2%;
+  color: var(--squisq-print-flashcard-muted);
+  font-size: 12px;
+}
+.squisq-print-flashcard-pair {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 3%;
+  height: 88%;
+}
+.squisq-print-flashcard-face {
+  overflow: hidden;
+  border: 1px solid color-mix(in srgb, var(--squisq-print-flashcard-text) 18%, transparent);
+  border-radius: 16px;
+  padding: 7%;
+  background: var(--squisq-print-flashcard-surface);
+}
+.squisq-print-flashcard-face > small,
+.squisq-print-flashcard-explanation > small {
+  display: block;
+  margin-bottom: 12px;
+  color: var(--squisq-print-flashcard-accent);
+  font-weight: 800;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+}
+.squisq-print-flashcard-face .squisq-flashcards__content-title {
+  margin: 0 0 0.5em;
+  font-size: clamp(20px, 2.4vw, 34px);
+}
+.squisq-print-flashcard-face .squisq-md {
+  font-size: clamp(13px, 1.4vw, 18px);
+  line-height: 1.45;
+}
+.squisq-print-flashcard-choices {
+  display: grid;
+  gap: 8px;
+  margin: 18px 0 0;
+  padding-left: 24px;
+}
+.squisq-print-flashcard-choices .squisq-flashcards__content-title {
+  font-size: 16px;
+}
+.squisq-print-flashcard-explanation {
+  margin-top: 20px;
+  border-top: 1px solid color-mix(in srgb, var(--squisq-print-flashcard-text) 16%, transparent);
+  padding-top: 16px;
+}
 @container squisq-toolbar (max-width: 820px) {
   .squisq-print-trigger > span,
   .squisq-print-toolbar-title,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.7.3",
+  "version": "2.9.0",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -84,10 +84,10 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@bendyline/squisq": "2.7.1",
-    "@bendyline/squisq-formats": "2.4.4",
-    "@bendyline/squisq-react": "2.7.2",
-    "@bendyline/squisq-video-react": "2.3.5",
+    "@bendyline/squisq": "2.9.0",
+    "@bendyline/squisq-formats": "2.4.6",
+    "@bendyline/squisq-react": "2.9.0",
+    "@bendyline/squisq-video-react": "2.4.1",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@tiptap/core": "2.27.2",
     "@tiptap/extension-heading": "2.27.2",