@bendyline/squisq-editor-react 2.1.0 → 2.2.0

package/dist/monaco.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/monaco.ts"],"sourcesContent":["/**\n * Canonical Monaco entry for squisq — and for apps downstream of it.\n *\n * Anything that needs Monaco (squisq's own RawEditor via {@link useMonacoLoader},\n * or a downstream app that wants its own editor) should get it from *here*\n * rather than importing `monaco-editor` directly. That guarantees a single\n * shared instance — one language / theme / completion-provider registry — and\n * gives squisq one place to decide which slice of Monaco ships. Downstream\n * hosts therefore need no bundler aliasing or hand-rolled \"slim\" Monaco entry\n * (getting that recipe wrong silently breaks features like the suggest widget).\n *\n * This is the FULL editor. `editor.main.js` pulls in:\n *   - every editor-feature contribution — the suggest-widget controller\n *     (completion popups), hover, folding, find, parameter hints, bracket\n *     matching, …\n *   - TM grammars for ~70 languages (syntax highlighting in fenced code), and\n *   - the rich css / html / json / typescript language *services*.\n *\n * `editor.main.js` has no sibling `.d.ts` (only `editor.api.d.ts` is\n * published), so we take the types from `editor.api`: the side-effect import\n * registers all the contributions, and the re-export exposes the — now\n * augmented — API surface. Both reference the same underlying singleton.\n *\n * NOTE: the language *services* (css/html/json/typescript) need Monaco web\n * workers wired via `globalThis.MonacoEnvironment`. Without that host-side\n * setup their in-editor IntelliSense stays dormant — but highlighting,\n * editing, and custom completion providers (e.g. the `{[template]}` typeahead)\n * all run on the main thread and work with no worker configuration.\n */\n\n// Side-effect: register the full editor + all language contributions.\nimport 'monaco-editor/esm/vs/editor/editor.main.js';\n\n// Typed API surface (the only barrel Monaco publishes declarations for).\nexport * from 'monaco-editor/esm/vs/editor/editor.api';\n"],"mappings":";AA+BA,OAAO;AAGP,cAAc;","names":[]}

package/src/BlockCardView.tsx

@@ -1,121 +0,0 @@
-/**
- * BlockCardView
- *
- * Presentational chrome for the block-at-a-time view: a single card holding
- * one block's editor surface, with Previous / Next navigation, a
- * "Block N of M" position indicator, and an optional "Add block" affordance.
- *
- * It is intentionally decoupled from `EditorContext` / `EditorShell` — it
- * takes plain props (typically sourced from {@link useBlockNavigator}) and
- * renders arbitrary `children`, so any host can reuse the block-at-a-time UX
- * around its own editor or content.
- */
-
-import type { ReactNode } from 'react';
-
-export interface BlockCardViewProps {
-  /** Total number of navigable blocks. */
-  blockCount: number;
-  /** Index of the block currently shown (0-based). */
-  activeBlockKey: number;
-  /** Move to the previous block. */
-  onPrev: () => void;
-  /** Move to the next block. */
-  onNext: () => void;
-  /** Insert a new block after the current one. Omit to hide the affordance. */
-  onAdd?: () => void;
-  /** The editor surface (or any content) for the active block. */
-  children: ReactNode;
-  /** Optional extra class for the outer container. */
-  className?: string;
-}
-
-export function BlockCardView({
-  blockCount,
-  activeBlockKey,
-  onPrev,
-  onNext,
-  onAdd,
-  children,
-  className,
-}: BlockCardViewProps) {
-  const atStart = activeBlockKey <= 0;
-  const atEnd = activeBlockKey >= blockCount - 1;
-  // 1-based for humans; clamp to ≥1 so an empty doc still reads "Block 1 of 1".
-  const position = Math.min(activeBlockKey + 1, Math.max(blockCount, 1));
-  const total = Math.max(blockCount, 1);
-
-  return (
-    <div
-      className={`squisq-block-card${className ? ` ${className}` : ''}`}
-      data-testid="block-card-view"
-    >
-      <div className="squisq-block-card-body">{children}</div>
-      <div className="squisq-block-card-nav" role="toolbar" aria-label="Block navigation">
-        <button
-          type="button"
-          className="squisq-block-card-button squisq-block-card-prev"
-          onClick={onPrev}
-          disabled={atStart}
-          aria-label="Previous block"
-          data-tooltip="Previous block"
-        >
-          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
-            <path
-              d="M9 2.5 L4.5 7 L9 11.5"
-              stroke="currentColor"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-            />
-          </svg>
-          <span>Previous</span>
-        </button>
-        <span className="squisq-block-card-position" aria-live="polite">
-          Block {position} of {total}
-        </span>
-        <button
-          type="button"
-          className="squisq-block-card-button squisq-block-card-next"
-          onClick={onNext}
-          disabled={atEnd}
-          aria-label="Next block"
-          data-tooltip="Next block"
-        >
-          <span>Next</span>
-          <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
-            <path
-              d="M5 2.5 L9.5 7 L5 11.5"
-              stroke="currentColor"
-              strokeWidth="1.6"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              fill="none"
-            />
-          </svg>
-        </button>
-        {onAdd && (
-          <button
-            type="button"
-            className="squisq-block-card-button squisq-block-card-add"
-            onClick={onAdd}
-            aria-label="Add block"
-            data-tooltip="Add block after this one"
-          >
-            <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true">
-              <path
-                d="M7 3 L7 11 M3 7 L11 7"
-                stroke="currentColor"
-                strokeWidth="1.6"
-                strokeLinecap="round"
-                fill="none"
-              />
-            </svg>
-            <span>Add block</span>
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/BlockPreviewPanel.tsx

@@ -1,69 +0,0 @@
-/**
- * BlockPreviewPanel
- *
- * A large, live preview of the active block, shown to the right of the
- * block-at-a-time / timeline editing card when "Show block previews" is on.
- * In document mode that toggle drives the {@link InlinePreviewGutter} (a
- * column of small cards aligned to headings); in card mode there's only one
- * block in view, so a single full-size preview reads better than a gutter.
- *
- * Reuses the shared preview pipeline (`resolveBlockVisual` → `BlockRenderer`)
- * so the frame matches the slideshow and the timeline thumbnails exactly,
- * honoring the active theme and viewport from the preview settings.
- */
-
-import { useMemo } from 'react';
-import type { ViewportConfig } from '@bendyline/squisq/schemas';
-import { VIEWPORT_PRESETS } from '@bendyline/squisq/schemas';
-import { flattenBlocks, DEFAULT_THEME } from '@bendyline/squisq/doc';
-import { useEditorContext } from './EditorContext';
-import { usePreviewSettingsOptional } from './PreviewControls';
-import { BlockThumbnail } from './TimelineBlockPreview';
-import { resolveBlockVisual } from './resolveBlockVisual';
-
-export interface BlockPreviewPanelProps {
-  basePath?: string;
-}
-
-export function BlockPreviewPanel({ basePath = '/' }: BlockPreviewPanelProps) {
-  const { doc, activeBlockStartLine, mediaProvider } = useEditorContext();
-  const previewSettings = usePreviewSettingsOptional();
-  const theme = previewSettings?.activeTheme ?? DEFAULT_THEME;
-  const viewport: ViewportConfig = previewSettings?.activeViewport ?? VIEWPORT_PRESETS.landscape;
-
-  // The block the card editor is scoped to — matched by its heading's source
-  // line (same key the timeline + outline use), falling back to the first
-  // block (e.g. when a heading-less preamble is active).
-  const block = useMemo(() => {
-    if (!doc) return null;
-    const blocks = flattenBlocks(doc.blocks);
-    if (blocks.length === 0) return null;
-    return (
-      blocks.find((b) => b.sourceHeading?.position?.start.line === activeBlockStartLine) ??
-      blocks[0]
-    );
-  }, [doc, activeBlockStartLine]);
-
-  const visual = useMemo(
-    () => (doc && block ? resolveBlockVisual(doc, block, theme, viewport) : null),
-    [doc, block, theme, viewport],
-  );
-
-  if (!visual) return null;
-
-  return (
-    <div className="squisq-block-preview-panel" data-testid="block-preview-panel" aria-hidden>
-      <div
-        className="squisq-block-preview-frame"
-        style={{ aspectRatio: `${viewport.width} / ${viewport.height}` }}
-      >
-        <BlockThumbnail
-          visual={visual}
-          viewport={viewport}
-          basePath={basePath}
-          mediaProvider={mediaProvider}
-        />
-      </div>
-    </div>
-  );
-}

package/src/BlockPropertiesPopover.tsx

@@ -1,222 +0,0 @@
-/**
- * BlockPropertiesPopover
- *
- * 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:
- *
- *   - 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
- * serializes a new inner and bubbles up through `onChange`; the host applies it
- * to the heading node. Positioning/portal/outside-click mirror
- * `TemplateBadgePopover`.
- */
-
-import { useEffect, useId, useRef, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { TransitionPicker } from './TransitionPicker';
-import {
-  readBlockAttrsTransition,
-  setHeadingAttrsTransition,
-  type TransitionFields,
-} from './headingTransition';
-import { readBlockAttrsValue, setBlockAttrsValue } from './blockProperties';
-
-export interface BlockPropertiesPopoverProps {
-  /** DOMRect of the badge that triggered the popover (viewport coords). */
-  anchorRect: DOMRect;
-  /** Current `dataBlockAttrs` inner (Pandoc), or null when unset. */
-  blockAttrs: string | null;
-  /** `dataTemplateParams`, so a hand-typed `{[… transition=]}` reads through. */
-  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;
-  /** Editor surface scheme. Required explicitly because this popover is portaled to `<body>`. */
-  colorScheme?: 'light' | 'dark';
-  /** Active document-theme accent used for focus and selected-state highlights. */
-  accentColor?: string;
-  onClose: () => void;
-}
-
-/** The nested transition flyout is portaled out here; don't treat it as "outside". */
-const TRANSITION_FLYOUT = '.squisq-transition-flyout';
-
-export function BlockPropertiesPopover({
-  anchorRect,
-  blockAttrs,
-  templateParams,
-  onChange,
-  onAnnotationChange,
-  colorScheme = 'light',
-  accentColor,
-  onClose,
-}: BlockPropertiesPopoverProps) {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const panelId = `squisq-block-props-portal-${useId().replace(/:/g, '')}`;
-  // 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(() => {
-    requestAnimationFrame(() => setStyle(computeStyle(anchorRect, panelRef.current)));
-  }, [anchorRect]);
-
-  // Outside click + Escape close. A click inside the popover OR inside the
-  // nested transition flyout (portaled elsewhere in the DOM) is kept open.
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    const onMouse = (e: MouseEvent) => {
-      const target = e.target as HTMLElement;
-      const inPanel = panelRef.current?.contains(target);
-      const inFlyout = target.closest?.(TRANSITION_FLYOUT);
-      if (!inPanel && !inFlyout) onClose();
-    };
-    const id = requestAnimationFrame(() => document.addEventListener('mousedown', onMouse));
-    document.addEventListener('keydown', onKey);
-    return () => {
-      cancelAnimationFrame(id);
-      document.removeEventListener('mousedown', onMouse);
-      document.removeEventListener('keydown', onKey);
-    };
-  }, [onClose]);
-
-  const apply = (next: string | null) => {
-    setInner(next);
-    onChange(next);
-  };
-
-  const transition = readBlockAttrsTransition(inner, templateInner);
-  const duration = readBlockAttrsValue(inner, 'duration');
-  const startTime = readBlockAttrsValue(inner, 'startTime');
-
-  const onTransition = (next: TransitionFields) => {
-    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));
-
-  return createPortal(
-    <div
-      ref={panelRef}
-      id={panelId}
-      className="squisq-block-props-popover"
-      data-theme={colorScheme}
-      role="dialog"
-      aria-label="Block properties"
-      style={{ ...style, ...blockAccentStyle(accentColor) }}
-    >
-      <div className="squisq-block-props-row">
-        <span className="squisq-block-props-label">Transition</span>
-        <TransitionPicker
-          value={transition}
-          onChange={onTransition}
-          colorScheme={colorScheme}
-          accentColor={accentColor}
-        />
-      </div>
-
-      <div className="squisq-block-props-row">
-        <span className="squisq-block-props-label">Duration</span>
-        <NumberField
-          value={duration}
-          placeholder="auto"
-          unit="sec"
-          ariaLabel="Block duration in seconds"
-          onChange={onDuration}
-        />
-      </div>
-
-      <div className="squisq-block-props-row">
-        <span className="squisq-block-props-label">Start time</span>
-        <NumberField
-          value={startTime}
-          placeholder="—"
-          unit="sec"
-          ariaLabel="Block start time in seconds"
-          onChange={onStartTime}
-        />
-      </div>
-    </div>,
-    document.body,
-  );
-}
-
-function blockAccentStyle(accentColor: string | undefined): React.CSSProperties {
-  return accentColor
-    ? ({ ['--squisq-block-props-accent' as string]: accentColor } as React.CSSProperties)
-    : {};
-}
-
-function NumberField({
-  value,
-  placeholder,
-  unit,
-  ariaLabel,
-  onChange,
-}: {
-  value: string;
-  placeholder: string;
-  unit: string;
-  ariaLabel: string;
-  onChange: (v: string) => void;
-}) {
-  return (
-    <div className="squisq-block-props-numfield">
-      <input
-        type="number"
-        min="0"
-        step="0.1"
-        className="squisq-block-props-input"
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.target.value)}
-        aria-label={ariaLabel}
-      />
-      <span className="squisq-block-props-unit">{unit}</span>
-    </div>
-  );
-}
-
-/** Place the panel below the badge, flipping above / clamping to the viewport. */
-function computeStyle(rect: DOMRect, element?: HTMLElement | null): React.CSSProperties {
-  const panel = element?.getBoundingClientRect();
-  const width = panel?.width ?? 280;
-  const height = panel?.height ?? 160;
-  const margin = 8;
-  const gap = 6;
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-
-  const spaceBelow = vh - rect.bottom - margin;
-  let top: number;
-  if (height + gap <= spaceBelow || rect.top - margin < height + gap) {
-    top = rect.bottom + gap;
-  } else {
-    top = rect.top - height - gap;
-  }
-  const maxLeft = Math.max(margin, vw - width - margin);
-  const left = Math.min(Math.max(margin, rect.left), maxLeft);
-
-  return {
-    position: 'fixed',
-    top,
-    left,
-    maxHeight: `${vh - 2 * margin}px`,
-    zIndex: 9999,
-  };
-}

package/src/DocumentSettingsDialog.tsx

@@ -1,272 +0,0 @@
-/**
- * DocumentSettingsDialog
- *
- * Modal editor for the frontmatter values that Squisq currently
- * understands: document title 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
- * (and vice versa).
- *
- * Title behavior: the placeholder shows the title that
- * `inferDocumentTitle()` would derive from frontmatter or headings.
- * When the user-entered title is empty or equal to the inferred title,
- * the `title:` key is removed from frontmatter — there's no point
- * storing a redundant value.
- */
-
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  inferDocumentTitle,
-  parseMarkdown,
-  readFrontmatterThemeId,
-  setFrontmatterValues,
-} from '@bendyline/squisq/markdown';
-import { getTransformStyleSummaries } from '@bendyline/squisq/transform';
-import { ThemePicker } from './ThemePicker';
-import { resolvePersistedTransformStyleId } from './transformStyleId';
-import {
-  FRONTMATTER_SETTING_DEFAULTS,
-  FRONTMATTER_SETTING_KEYS,
-  omitFrontmatterDefault,
-} from './frontmatterSettings';
-
-// ── Frontmatter key constants ─────────────────────────────────────
-
-function readFm(
-  fm: Record<string, unknown> | undefined,
-  canonical: string,
-  legacy: string,
-): string {
-  if (!fm) return '';
-  const v = Object.prototype.hasOwnProperty.call(fm, canonical) ? fm[canonical] : fm[legacy];
-  return typeof v === 'string' ? v : '';
-}
-
-const CAPTION_OPTIONS: readonly { key: string; label: string }[] = [
-  { key: '', label: 'Default (Standard)' },
-  { key: 'standard', label: 'Standard' },
-  { key: 'social', label: 'Social' },
-];
-
-// ── Props ─────────────────────────────────────────────────────────
-
-export interface DocumentSettingsDialogProps {
-  /** Current markdown source string (frontmatter + body). */
-  markdownSource: string;
-  /** Called with the rewritten source after the user clicks Save. */
-  onSave: (nextSource: string) => void;
-  /** Called when the dialog is dismissed (Cancel, Escape, backdrop click). */
-  onClose: () => void;
-}
-
-// ── Component ─────────────────────────────────────────────────────
-
-export function DocumentSettingsDialog({
-  markdownSource,
-  onSave,
-  onClose,
-}: DocumentSettingsDialogProps) {
-  // Parse once at open; further edits flow through local form state and
-  // are committed in a single `setFrontmatterValues` call on Save.
-  const parsed = useMemo(() => parseMarkdown(markdownSource), [markdownSource]);
-  const frontmatter = parsed.frontmatter;
-  const inferredTitle = useMemo(() => inferDocumentTitle(parsed), [parsed]);
-
-  const currentTitle = typeof frontmatter?.title === 'string' ? (frontmatter.title as string) : '';
-  const currentTheme = readFrontmatterThemeId(frontmatter) ?? '';
-  const currentTransform =
-    resolvePersistedTransformStyleId(
-      readFm(
-        frontmatter,
-        FRONTMATTER_SETTING_KEYS.transform.canonical,
-        FRONTMATTER_SETTING_KEYS.transform.legacy,
-      ),
-    ) ?? '';
-  const currentCaptions = readFm(
-    frontmatter,
-    FRONTMATTER_SETTING_KEYS.captions.canonical,
-    FRONTMATTER_SETTING_KEYS.captions.legacy,
-  );
-
-  const [title, setTitle] = useState(currentTitle);
-  const [theme, setTheme] = useState(currentTheme);
-  const [transform, setTransform] = useState(currentTransform);
-  const [captions, setCaptions] = useState(currentCaptions);
-
-  const titleRef = useRef<HTMLInputElement>(null);
-  useEffect(() => {
-    titleRef.current?.focus();
-    titleRef.current?.select();
-  }, []);
-
-  // Esc closes; click on backdrop closes (but not on dialog itself).
-  useEffect(() => {
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    document.addEventListener('keydown', onKey);
-    return () => document.removeEventListener('keydown', onKey);
-  }, [onClose]);
-
-  const handleBackdrop = useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      if (e.target === e.currentTarget) onClose();
-    },
-    [onClose],
-  );
-
-  // Dropdown options — built once per render; cheap.
-  const transformOptions = useMemo(
-    () => [
-      { key: '', label: 'None' },
-      ...getTransformStyleSummaries().map((s) => ({ key: s.id, label: s.name })),
-    ],
-    [],
-  );
-
-  const handleSave = useCallback(
-    (e: React.FormEvent) => {
-      e.preventDefault();
-
-      const trimmedTitle = title.trim();
-      const titleMatchesInferred = !!inferredTitle && trimmedTitle === inferredTitle;
-      // Empty input OR matches the value we'd infer otherwise → no
-      // explicit title needed in frontmatter.
-      const nextTitle = !trimmedTitle || titleMatchesInferred ? null : trimmedTitle;
-
-      const updates: Record<string, string | null> = {
-        title: nextTitle,
-        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
-          theme || FRONTMATTER_SETTING_DEFAULTS.theme,
-          FRONTMATTER_SETTING_DEFAULTS.theme,
-        ),
-        // Saving settings canonicalizes all older theme spellings.
-        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
-        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null,
-        [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
-          transform,
-          FRONTMATTER_SETTING_DEFAULTS.transform,
-        ),
-        [FRONTMATTER_SETTING_KEYS.transform.legacy]: null,
-        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
-          captions || FRONTMATTER_SETTING_DEFAULTS.captions,
-          FRONTMATTER_SETTING_DEFAULTS.captions,
-        ),
-        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null,
-      };
-
-      const nextSource = setFrontmatterValues(markdownSource, updates);
-      onSave(nextSource);
-    },
-    [title, theme, transform, captions, inferredTitle, markdownSource, onSave],
-  );
-
-  return (
-    <div className="squisq-doc-settings-overlay" onMouseDown={handleBackdrop}>
-      <form className="squisq-doc-settings-dialog" onSubmit={handleSave}>
-        <div className="squisq-doc-settings-header">
-          <h2 className="squisq-doc-settings-title">Document settings</h2>
-          <button
-            type="button"
-            className="squisq-doc-settings-close"
-            onClick={onClose}
-            aria-label="Close"
-          >
-            &times;
-          </button>
-        </div>
-
-        <div className="squisq-doc-settings-body">
-          <div className="squisq-doc-settings-field">
-            <label className="squisq-doc-settings-label" htmlFor="squisq-doc-settings-title">
-              Title
-            </label>
-            <input
-              ref={titleRef}
-              id="squisq-doc-settings-title"
-              type="text"
-              className="squisq-doc-settings-input"
-              value={title}
-              onChange={(e) => setTitle(e.target.value)}
-              placeholder={inferredTitle ?? 'Document title'}
-              spellCheck
-            />
-            {inferredTitle ? (
-              <span className="squisq-doc-settings-hint">
-                Defaults to <strong>{inferredTitle}</strong> — leave blank to use it.
-              </span>
-            ) : (
-              <span className="squisq-doc-settings-hint">
-                No title heading found — set one here or add an H1 to the document.
-              </span>
-            )}
-          </div>
-
-          <div className="squisq-doc-settings-field">
-            <span className="squisq-doc-settings-label">Theme</span>
-            <ThemePicker
-              value={theme}
-              onChange={setTheme}
-              includeDefault
-              variant="full"
-              ariaLabel="Theme"
-            />
-          </div>
-
-          <div className="squisq-doc-settings-field">
-            <label className="squisq-doc-settings-label" htmlFor="squisq-doc-settings-transform">
-              Transform
-            </label>
-            <select
-              id="squisq-doc-settings-transform"
-              className="squisq-doc-settings-input"
-              value={transform}
-              onChange={(e) => setTransform(e.target.value)}
-            >
-              {transformOptions.map((o) => (
-                <option key={o.key} value={o.key}>
-                  {o.label}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div className="squisq-doc-settings-field">
-            <label className="squisq-doc-settings-label" htmlFor="squisq-doc-settings-captions">
-              Captions
-            </label>
-            <select
-              id="squisq-doc-settings-captions"
-              className="squisq-doc-settings-input"
-              value={captions}
-              onChange={(e) => setCaptions(e.target.value)}
-            >
-              {CAPTION_OPTIONS.map((o) => (
-                <option key={o.key} value={o.key}>
-                  {o.label}
-                </option>
-              ))}
-            </select>
-          </div>
-        </div>
-
-        <div className="squisq-doc-settings-footer">
-          <button
-            type="button"
-            className="squisq-doc-settings-btn squisq-doc-settings-btn--secondary"
-            onClick={onClose}
-          >
-            Cancel
-          </button>
-          <button
-            type="submit"
-            className="squisq-doc-settings-btn squisq-doc-settings-btn--primary"
-          >
-            Save
-          </button>
-        </div>
-      </form>
-    </div>
-  );
-}