@bendyline/squisq-editor-react 1.6.2 → 2.0.1

package/src/Toolbar.tsx

@@ -29,7 +29,7 @@ import { ViewMenuPanel } from './ViewMenuPanel';
 import {
   TemplatePicker,
   TEMPLATE_NAMES,
-  TEMPLATE_GALLERY_PORTAL_ID,
+  TEMPLATE_GALLERY_PORTAL_SELECTOR,
   templateLabel,
 } from './TemplatePicker';
 import { TransitionPicker, TRANSITION_FLYOUT_PORTAL_ID } from './TransitionPicker';
@@ -50,7 +50,15 @@ import { CustomLayoutManager } from './customTemplates/CustomLayoutManager';
 import { Icon } from './Icon';
 import type { PickerEntry } from './emojiData';
 import { createPortal } from 'react-dom';
-import { usePreviewSettingsOptional } from './PreviewControls';
+import { PreviewModeMenu, displayModeLabel, usePreviewSettingsOptional } from './PreviewControls';
+import { filterVisibleMediaEntries } from './mediaEntries';
+import {
+  selectionToTable,
+  selectionToTableMarkdown,
+  selectionToTaskItems,
+  selectionToTaskListMarkdown,
+  type SelectionTaskItem,
+} from './selectionConversions';
 
 const VIEWS: { id: EditorView; label: string; shortLabel?: string; shortcut: string }[] = [
   { id: 'wysiwyg', label: 'Write', shortcut: '⌘1' },
@@ -220,6 +228,22 @@ const BUTTONS: ToolbarButton[] = [
     group: 'media',
     faIcon: 'fa-solid fa-diagram-project',
   },
+  {
+    id: 'tree',
+    label: 'tree',
+    icon: '',
+    title: 'Insert tree',
+    group: 'media',
+    faIcon: 'fa-solid fa-folder-tree',
+  },
+  {
+    id: 'timeline',
+    label: 'timeline',
+    icon: '',
+    title: 'Insert timeline',
+    group: 'media',
+    faIcon: 'fa-solid fa-timeline',
+  },
   {
     id: 'drawing',
     label: 'drawing',
@@ -256,6 +280,7 @@ const BUTTONS: ToolbarButton[] = [
 
 const FIRST_MEDIA_INDEX = BUTTONS.findIndex((b) => b.group === 'media');
 const MEDIA_BUTTONS = BUTTONS.filter((b) => b.group === 'media');
+const CONVERT_BUTTONS = MEDIA_BUTTONS.filter((b) => b.id === 'table' || b.id === 'tasklist');
 const INSERT_MENU_WIDTH = 200;
 const TASK_LIST_ITEMS = ['Task 1', 'Task 2', 'Task 3'] as const;
 const TASK_LIST_MARKDOWN = TASK_LIST_ITEMS.map((item) => `- [ ] ${item}`).join('\n');
@@ -280,18 +305,35 @@ function fileCountBadge(count: number): string {
   return count > 99 ? '99+' : String(count);
 }
 
-function taskListContent(): JSONContent {
+function paragraphContent(text: string): JSONContent {
+  return text ? { type: 'paragraph', content: [{ type: 'text', text }] } : { type: 'paragraph' };
+}
+
+function tableContent(rows: string[][]): JSONContent {
+  return {
+    type: 'table',
+    content: rows.map((row, rowIndex) => ({
+      type: 'tableRow',
+      content: row.map((cell) => ({
+        type: rowIndex === 0 ? 'tableHeader' : 'tableCell',
+        content: [paragraphContent(cell)],
+      })),
+    })),
+  };
+}
+
+function taskListContent(
+  items: readonly SelectionTaskItem[] = TASK_LIST_ITEMS.map((text) => ({
+    checked: false,
+    text,
+  })),
+): JSONContent {
   return {
     type: 'taskList',
-    content: TASK_LIST_ITEMS.map((item) => ({
+    content: items.map((item) => ({
       type: 'taskItem',
-      attrs: { checked: false },
-      content: [
-        {
-          type: 'paragraph',
-          content: [{ type: 'text', text: item }],
-        },
-      ],
+      attrs: { checked: item.checked },
+      content: [paragraphContent(item.text)],
     })),
   };
 }
@@ -302,6 +344,26 @@ function insertTaskList(editor: TiptapEditor): void {
   editor.chain().focus().insertContent(content).run();
 }
 
+/**
+ * Expand a full-line Tiptap text selection to the surrounding top-level node
+ * boundaries. Inserting a list/table at an in-paragraph range makes
+ * ProseMirror preserve the emptied paragraph before or after the new block.
+ * Partial-line selections deliberately retain their exact range.
+ */
+function blockConversionRange(editor: TiptapEditor): { from: number; to: number } {
+  const { from, to, $from, $to } = editor.state.selection;
+  return {
+    from:
+      $from.depth === 1 && $from.parent.isTextblock && $from.parentOffset === 0
+        ? $from.before(1)
+        : from,
+    to:
+      $to.depth === 1 && $to.parent.isTextblock && $to.parentOffset === $to.parent.content.size
+        ? $to.after(1)
+        : to,
+  };
+}
+
 // ─── Tiptap active-state map ────────────────────────────
 
 /** Returns true if the given button id is currently active in Tiptap */
@@ -355,6 +417,85 @@ const LAYOUT_STARTER_TEXT_PARAMS =
 /** Multi-line markdown for a new layout (raw / code views). */
 const LAYOUT_STARTER_MARKDOWN = `\n## Layout {[layout]}\n\n### {#text-1} {[text ${LAYOUT_STARTER_TEXT_PARAMS}]}\n\nLayout\n`;
 
+/**
+ * Starter art for a new diagram — diagrams are authored as ASCII-art code
+ * fences (the fence is the source of truth; `AsciiDiagramExtension` mounts
+ * the interactive canvas over it). This exact art is the codec's own
+ * canonical rendering of a two-node flow, so it re-parses and re-renders
+ * byte-stably. The leading rows/columns are deliberate: ASCII has no
+ * separate canvas-origin metadata, so this persisted gutter gives the first
+ * node real grid space to move north/west. Without it, content-fit makes the
+ * node look centered while its authored coordinate is still (0, 0), and a
+ * drag into the apparent margin clamps straight back to that corner.
+ */
+const DIAGRAM_STARTER_ART = [
+  '',
+  '',
+  '        ┌─────────┐',
+  '        │  Start  │',
+  '        └────┬────┘',
+  '             │',
+  '             ▼',
+  '        ┌────┴────┐',
+  '        │  Next   │',
+  '        └─────────┘',
+].join('\n');
+/**
+ * Fenced form for raw / code views — tagged with the explicit `diagram`
+ * language so the block's identity survives markdown ↔ Tiptap round-trips
+ * (the language class round-trips; fence meta does not).
+ */
+const DIAGRAM_STARTER_MARKDOWN = '\n```diagram\n' + DIAGRAM_STARTER_ART + '\n```\n';
+
+/** Insert a starter ASCII-diagram code fence after the current top-level block. */
+function insertAsciiDiagramBlock(editor: TiptapEditor): void {
+  insertFenceBlock(editor, DIAGRAM_STARTER_ART, 'diagram');
+}
+
+/**
+ * Starter art for a new file tree — an ASCII tree fence (the fence is the
+ * source of truth; `TreeViewExtension` mounts the interactive outline).
+ */
+const TREE_STARTER_ART = ['src/', '├── index.ts', '└── utils/', '    └── helpers.ts'].join('\n');
+const TREE_STARTER_MARKDOWN = '\n```tree\n' + TREE_STARTER_ART + '\n```\n';
+
+/** Insert a starter ASCII tree code fence after the current top-level block. */
+function insertTreeBlock(editor: TiptapEditor): void {
+  insertFenceBlock(editor, TREE_STARTER_ART, 'tree');
+}
+
+/** Starter multi-event rail for the authored timeline view. */
+const TIMELINE_STARTER_ART =
+  'Milestones: ● Start {#start} ─────● Review {#review} ─────● Ship {#ship} ───►';
+const TIMELINE_STARTER_MARKDOWN = '\n```timeline\n' + TIMELINE_STARTER_ART + '\n```\n';
+
+/** Insert a starter ASCII timeline code fence after the current top-level block. */
+function insertTimelineBlock(editor: TiptapEditor): void {
+  insertFenceBlock(editor, TIMELINE_STARTER_ART, 'timeline');
+}
+
+/**
+ * Insert a code fence after the current top-level block. `lang` tags the
+ * fence's `language` attribute — pass the explicit authored-view tag so its
+ * identity round-trips through markdown and Tiptap.
+ */
+function insertFenceBlock(editor: TiptapEditor, art: string, lang?: string): void {
+  editor
+    .chain()
+    .focus()
+    .command(({ tr, state, dispatch }) => {
+      const codeBlockType = state.schema.nodes.codeBlock;
+      if (!codeBlockType) return false;
+      const attrs = lang ? { language: lang } : null;
+      const block = codeBlockType.create(attrs, state.schema.text(art));
+      const { $from } = state.selection;
+      const insertPos = $from.depth > 0 ? $from.after(1) : state.doc.content.size;
+      if (dispatch) tr.insert(insertPos, block);
+      return true;
+    })
+    .run();
+}
+
 /**
  * Insert a block-level heading carrying a Scene template (`diagram` /
  * `drawing` / `layout`) at the top level, after the block the caret sits
@@ -506,6 +647,7 @@ export function Toolbar({
     bumpMediaRevision,
   } = useEditorContext();
   const previewSettings = usePreviewSettingsOptional();
+  const [useModeMenuRequest, requestUseModeMenu] = useReducer((count: number) => count + 1, 0);
   // When a canvas textbox is being edited, its Tiptap instance takes over
   // the formatting buttons; otherwise they drive the document editor. The
   // `level` gates which buttons apply (inline labels vs. rich textboxes).
@@ -533,7 +675,7 @@ export function Toolbar({
     let cancelled = false;
     mediaProvider.listMedia().then(
       (entries) => {
-        if (!cancelled) setScannedFileCount(entries.length);
+        if (!cancelled) setScannedFileCount(filterVisibleMediaEntries(entries).length);
       },
       () => {
         if (!cancelled) setScannedFileCount(0);
@@ -682,23 +824,25 @@ export function Toolbar({
     // with the cursor context and change width with their value, all without
     // resizing the flex:1 container itself — a container-only observer would
     // go stale.
-    const ro = new ResizeObserver(measure);
+    const ro = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(measure);
     const observeAll = () => {
-      ro.disconnect();
-      ro.observe(container);
+      ro?.disconnect();
+      ro?.observe(container);
       container
         .querySelectorAll<HTMLElement>(':scope > .squisq-toolbar-group')
-        .forEach((group) => ro.observe(group));
+        .forEach((group) => ro?.observe(group));
     };
     const mo = new MutationObserver(() => {
       observeAll();
       measure();
     });
     mo.observe(container, { childList: true });
+    if (!ro) window.addEventListener('resize', measure);
     observeAll();
     measure();
     return () => {
-      ro.disconnect();
+      ro?.disconnect();
+      if (!ro) window.removeEventListener('resize', measure);
       mo.disconnect();
     };
   }, [activeView]);
@@ -714,7 +858,7 @@ export function Toolbar({
       if (overflowRef.current?.contains(target)) return;
       if (
         target instanceof Element &&
-        target.closest(`#${TEMPLATE_GALLERY_PORTAL_ID}, #${TRANSITION_FLYOUT_PORTAL_ID}`)
+        target.closest(`${TEMPLATE_GALLERY_PORTAL_SELECTOR}, #${TRANSITION_FLYOUT_PORTAL_ID}`)
       ) {
         return;
       }
@@ -856,9 +1000,19 @@ export function Toolbar({
           insertTaskList(tiptapEditor);
           break;
         case 'diagram':
-          // Empty diagram is usable via its "+ Add first node" affordance;
-          // sub-headings under this block become nodes.
-          insertTemplateHeading(tiptapEditor, { template: 'diagram', text: 'Diagram' });
+          // Diagrams are ASCII-art code fences; the AsciiDiagramExtension
+          // mounts the interactive canvas over the inserted starter.
+          insertAsciiDiagramBlock(tiptapEditor);
+          break;
+        case 'tree':
+          // File trees are ASCII tree fences; TreeViewExtension mounts the
+          // interactive outline over the inserted starter.
+          insertTreeBlock(tiptapEditor);
+          break;
+        case 'timeline':
+          // The authored fence is immediately replaced by the WYSIWYG rail
+          // canvas; Preview uses the same events as vector layers.
+          insertTimelineBlock(tiptapEditor);
           break;
         case 'drawing':
           // Empty drawing is usable via the canvas's "Shapes ▾" palette;
@@ -1015,9 +1169,19 @@ export function Toolbar({
             break;
           }
           case 'diagram': {
-            // A diagram is just a heading with the `{[diagram]}` template
-            // annotation; the WYSIWYG view renders its editable canvas.
-            replacement = '\n## Diagram {[diagram]}\n';
+            // A diagram is an ASCII-art code fence; the WYSIWYG view
+            // renders its editable canvas, preview renders it as a slide.
+            replacement = DIAGRAM_STARTER_MARKDOWN;
+            newCursorOffset = replacement.length;
+            break;
+          }
+          case 'tree': {
+            replacement = TREE_STARTER_MARKDOWN;
+            newCursorOffset = replacement.length;
+            break;
+          }
+          case 'timeline': {
+            replacement = TIMELINE_STARTER_MARKDOWN;
             newCursorOffset = replacement.length;
             break;
           }
@@ -1099,7 +1263,13 @@ export function Toolbar({
             insertion = `\n${TASK_LIST_MARKDOWN}\n`;
             break;
           case 'diagram':
-            insertion = '\n## Diagram {[diagram]}\n';
+            insertion = DIAGRAM_STARTER_MARKDOWN;
+            break;
+          case 'tree':
+            insertion = TREE_STARTER_MARKDOWN;
+            break;
+          case 'timeline':
+            insertion = TIMELINE_STARTER_MARKDOWN;
             break;
           case 'drawing':
             insertion = '\n## Drawing {[drawing]}\n';
@@ -1116,6 +1286,68 @@ export function Toolbar({
     [monacoEditor, markdownSource, setMarkdownSource],
   );
 
+  // ── Selected-text conversion handlers ─────────────────
+  const readSelectedText = useCallback((): string => {
+    // Canvas text overlays intentionally have a smaller schema without tables
+    // or task lists. Ignore their selection instead of surfacing actions that
+    // cannot be represented by those layers.
+    if (activeSceneText) return '';
+
+    if (activeView === 'wysiwyg' && tiptapEditor) {
+      const { from, to, empty } = tiptapEditor.state.selection;
+      return empty ? '' : tiptapEditor.state.doc.textBetween(from, to, '\n');
+    }
+
+    if (activeView === 'raw' && monacoEditor) {
+      const selection = monacoEditor.getSelection();
+      const model = monacoEditor.getModel();
+      return selection && model ? model.getValueInRange(selection) : '';
+    }
+
+    return '';
+  }, [activeSceneText, activeView, monacoEditor, tiptapEditor]);
+
+  const handleConvertSelection = useCallback(
+    (target: 'table' | 'tasklist') => {
+      const selectedText = readSelectedText();
+      if (!selectedText.trim()) return;
+
+      if (activeView === 'wysiwyg' && tiptapEditor) {
+        const content =
+          target === 'table'
+            ? tableContent(selectionToTable(selectedText).rows)
+            : taskListContent(selectionToTaskItems(selectedText));
+        tiptapEditor
+          .chain()
+          .focus()
+          .insertContentAt(blockConversionRange(tiptapEditor), content)
+          .run();
+        return;
+      }
+
+      if (activeView === 'raw' && monacoEditor) {
+        const selection = monacoEditor.getSelection();
+        if (!selection) return;
+        const converted =
+          target === 'table'
+            ? selectionToTableMarkdown(selectedText)
+            : selectionToTaskListMarkdown(selectedText);
+        if (!converted) return;
+
+        // Monaco line selections commonly include the newline after the last
+        // selected line. Retain selected edge newlines so the replacement
+        // block never runs into the surrounding Markdown.
+        const leadingNewline = /^(?:\r?\n)/.test(selectedText) ? '\n' : '';
+        const trailingNewline = /(?:\r?\n)$/.test(selectedText) ? '\n' : '';
+        monacoEditor.executeEdits('toolbar-convert-selection', [
+          { range: selection, text: leadingNewline + converted + trailingNewline },
+        ]);
+        monacoEditor.focus();
+      }
+    },
+    [activeView, monacoEditor, readSelectedText, tiptapEditor],
+  );
+
   // ── Image upload handler ───────────────────────────────
   const handleImageFile = useCallback(
     async (file: File) => {
@@ -1352,6 +1584,10 @@ export function Toolbar({
     if (sceneTextLevel === 'block') return BLOCK_SCENE_BUTTONS.has(id);
     return INLINE_SCENE_BUTTONS.has(id);
   };
+  const showConvertActions =
+    insertMenuAnchor !== null &&
+    readSelectedText().trim().length > 0 &&
+    CONVERT_BUTTONS.some((button) => buttonAllowed(button.id));
 
   // ── Progressive heading disclosure ───────────────────
   // H1\u2013H3 are always visible. H4 appears once the document already
@@ -1540,10 +1776,12 @@ export function Toolbar({
             viewport: previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape,
             basePath: '/',
             mediaProvider,
+            customTemplates: doc?.customTemplates,
           }
         : undefined,
     [
       mediaProvider,
+      doc?.customTemplates,
       previewSettings?.activeTheme,
       previewSettings?.activeViewport,
       templatePreviewBlock,
@@ -1692,35 +1930,65 @@ export function Toolbar({
       {/* View tabs — hidden when only one view is available (e.g. code mode). */}
       {showViewTabs && (
         <div className="squisq-toolbar-view-tabs" role="tablist" aria-label="Editor view">
-          {visibleViews.map((view) => (
-            <button
-              key={view.id}
-              role="tab"
-              data-view={view.id}
-              aria-selected={activeView === view.id}
-              className={`squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`}
-              onClick={() => setActiveView(view.id)}
-              data-tooltip={`${view.label} (${view.shortcut})`}
-            >
-              <span
-                className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long"
-                data-label={view.label}
+          {visibleViews.map((view) => {
+            const viewLabel =
+              view.id === 'preview' && previewSettings
+                ? displayModeLabel(previewSettings.activeDisplayMode)
+                : view.label;
+            const tab = (
+              <button
+                role="tab"
+                data-view={view.id}
+                aria-selected={activeView === view.id}
+                className={`squisq-toolbar-view-tab${activeView === view.id ? ' squisq-toolbar-view-tab--active' : ''}`}
+                onClick={() => {
+                  if (view.id === 'preview' && activeView === 'preview' && previewSettings) {
+                    requestUseModeMenu();
+                    return;
+                  }
+                  setActiveView(view.id);
+                }}
+                data-tooltip={`${viewLabel} (${view.shortcut})`}
               >
-                {view.label}
-              </span>
-              {view.shortLabel && view.shortLabel !== view.label && (
                 <span
-                  className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short"
-                  data-label={view.shortLabel}
+                  className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--long"
+                  data-label={viewLabel}
                 >
-                  {view.shortLabel}
+                  {viewLabel}
                 </span>
-              )}
-            </button>
-          ))}
+                {view.shortLabel && view.shortLabel !== view.label && (
+                  <span
+                    className="squisq-toolbar-view-tab-label squisq-toolbar-view-tab-label--short"
+                    data-label={view.shortLabel}
+                  >
+                    {view.shortLabel}
+                  </span>
+                )}
+              </button>
+            );
+
+            if (view.id !== 'preview' || !previewSettings) {
+              return (
+                <div key={view.id} className="squisq-toolbar-view-tab-wrap" role="presentation">
+                  {tab}
+                </div>
+              );
+            }
+
+            return (
+              <div
+                key={view.id}
+                className={`squisq-toolbar-view-tab-wrap squisq-toolbar-use-tab${activeView === 'preview' ? ' squisq-toolbar-use-tab--active' : ''}`}
+                role="presentation"
+              >
+                {tab}
+                <PreviewModeMenu openRequest={useModeMenuRequest} />
+              </div>
+            );
+          })}
         </div>
       )}
-      {/* After-tabs slot — left side, before formatting controls (preview mode switch) */}
+      {/* After-tabs slot — left side, before formatting or preview controls. */}
       {slotAfterTabs}
       {/* Formatting buttons — hidden in preview mode and code mode */}
       {!isPreview && !isCodeMode && (
@@ -1803,7 +2071,12 @@ export function Toolbar({
               data-contextual="transition"
             >
               <div className="squisq-toolbar-separator" />
-              <TransitionPicker value={currentTransition} onChange={handleTransitionPick} />
+              <TransitionPicker
+                value={currentTransition}
+                onChange={handleTransitionPick}
+                colorScheme={colorScheme}
+                accentColor={previewSettings?.activeTheme.colors.primary}
+              />
             </div>
           )}
 
@@ -2074,7 +2347,12 @@ export function Toolbar({
                   the flyout carries follow-up controls (direction/duration). */}
               {showTransitionInOverflow && (
                 <div className="squisq-toolbar-overflow-item squisq-toolbar-overflow-template">
-                  <TransitionPicker value={currentTransition!} onChange={handleTransitionPick} />
+                  <TransitionPicker
+                    value={currentTransition!}
+                    onChange={handleTransitionPick}
+                    colorScheme={colorScheme}
+                    accentColor={previewSettings?.activeTheme.colors.primary}
+                  />
                 </div>
               )}
 
@@ -2231,7 +2509,35 @@ export function Toolbar({
             style={{ position: 'fixed', top: insertMenuAnchor.top, left: insertMenuAnchor.left }}
             role="menu"
           >
-            <div className="squisq-insert-menu-header">Insert</div>
+            {showConvertActions && (
+              <>
+                <div className="squisq-insert-menu-header">Convert</div>
+                {CONVERT_BUTTONS.map((btn) => {
+                  const label = btn.id === 'table' ? 'Table' : 'Task List';
+                  return (
+                    <button
+                      key={`convert-${btn.id}`}
+                      className="squisq-toolbar-overflow-item"
+                      disabled={!buttonAllowed(btn.id)}
+                      onClick={() => {
+                        handleConvertSelection(btn.id as 'table' | 'tasklist');
+                        closeInsertMenu();
+                      }}
+                      role="menuitem"
+                      aria-label={`Convert selection to ${label}`}
+                    >
+                      <span className="squisq-toolbar-overflow-icon">{buttonIcon(btn)}</span>
+                      <span>{label}</span>
+                    </button>
+                  );
+                })}
+              </>
+            )}
+            <div
+              className={`squisq-insert-menu-header${showConvertActions ? ' squisq-insert-menu-header--separated' : ''}`}
+            >
+              Insert
+            </div>
             {MEDIA_BUTTONS.filter((b) => isButtonVisible(b.id)).map((btn) => {
               const disabled = (btn.id === 'image' && !mediaProvider) || !buttonAllowed(btn.id);
               const stripped = btn.title.replace(/^Insert\s+/i, '');

package/src/TransitionPicker.tsx

@@ -30,6 +30,10 @@ import {
 export interface TransitionPickerProps {
   value: TransitionFields;
   onChange: (next: TransitionFields) => void;
+  /** Surface scheme copied onto the portaled flyout so it can style independently of the shell. */
+  colorScheme?: 'light' | 'dark';
+  /** Active document-theme accent used for open and selected states. */
+  accentColor?: string;
 }
 
 /**
@@ -41,7 +45,12 @@ export const TRANSITION_FLYOUT_PORTAL_ID = 'squisq-transition-flyout-portal';
 
 const FLYOUT_ID = TRANSITION_FLYOUT_PORTAL_ID;
 
-export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
+export function TransitionPicker({
+  value,
+  onChange,
+  colorScheme = 'light',
+  accentColor,
+}: TransitionPickerProps) {
   const [open, setOpen] = useState(false);
   const [style, setStyle] = useState<React.CSSProperties>({});
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -119,13 +128,22 @@ export function TransitionPicker({ value, onChange }: TransitionPickerProps) {
 
   const flyout = open
     ? createPortal(
-        <TransitionFlyout style={style} value={value} onChange={onChange} />,
+        <TransitionFlyout
+          style={{ ...style, ...blockAccentStyle(accentColor) }}
+          value={value}
+          onChange={onChange}
+          colorScheme={colorScheme}
+        />,
         document.body,
       )
     : null;
 
   return (
-    <div className="squisq-transition-picker">
+    <div
+      className="squisq-transition-picker"
+      data-theme={colorScheme}
+      style={blockAccentStyle(accentColor)}
+    >
       <button
         ref={triggerRef}
         type="button"
@@ -158,10 +176,12 @@ function TransitionFlyout({
   style,
   value,
   onChange,
+  colorScheme,
 }: {
   style: React.CSSProperties;
   value: TransitionFields;
   onChange: (next: TransitionFields) => void;
+  colorScheme: 'light' | 'dark';
 }) {
   const [query, setQuery] = useState('');
   const searchRef = useRef<HTMLInputElement>(null);
@@ -211,7 +231,13 @@ function TransitionFlyout({
   };
 
   return (
-    <div id={FLYOUT_ID} className="squisq-transition-flyout" role="menu" style={style}>
+    <div
+      id={FLYOUT_ID}
+      className="squisq-transition-flyout"
+      data-theme={colorScheme}
+      role="menu"
+      style={style}
+    >
       <div className="squisq-transition-flyout-search">
         <input
           ref={searchRef}
@@ -313,6 +339,12 @@ function TransitionFlyout({
   );
 }
 
+function blockAccentStyle(accentColor: string | undefined): React.CSSProperties {
+  return accentColor
+    ? ({ ['--squisq-block-props-accent' as string]: accentColor } as React.CSSProperties)
+    : {};
+}
+
 function TransitionOption({
   entry,
   selected,