@bendyline/squisq-editor-react 2.0.0 → 2.0.1

package/dist/styles/index.css

@@ -7560,6 +7560,7 @@
   z-index: 100;
   min-width: 200px;
   padding: 4px 0;
+  font-family: var( --squisq-ux-font, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif );
   background: #fff;
   border: 1px solid #e5e7eb;
   border-radius: 6px;
@@ -7574,6 +7575,11 @@
   color: #9ca3af;
   user-select: none;
 }
+.squisq-insert-menu-header--separated {
+  margin-top: 4px;
+  padding-top: 8px;
+  border-top: 1px solid #e5e7eb;
+}
 .squisq-insert-menu[data-theme=dark] {
   background: #1f2937;
   border-color: #374151;
@@ -7588,6 +7594,9 @@
 .squisq-insert-menu[data-theme=dark] .squisq-insert-menu-header {
   color: #6b7280;
 }
+.squisq-insert-menu[data-theme=dark] .squisq-insert-menu-header--separated {
+  border-top-color: #374151;
+}
 .squisq-template-picker {
   display: flex;
   align-items: center;
@@ -8686,6 +8695,9 @@
   margin: 0.5em 0;
   color: var(--squisq-theme-text-muted, #6b7280);
 }
+.squisq-wysiwyg-editor blockquote > p {
+  margin: 0;
+}
 .squisq-wysiwyg-editor pre {
   background: var(--squisq-theme-bg-muted, #1e293b);
   color: var(--squisq-theme-text, #e2e8f0);
@@ -14080,7 +14092,7 @@
 .squisq-tree-btn:hover {
   border-color: var(--squisq-text-muted, #94a3b8);
 }
-.squisq-tree-rows {
+.squisq-tree-outline .squisq-tree-rows {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -14089,15 +14101,45 @@
   border-left: 1px solid var(--squisq-border, #e2e8f0);
   margin-left: 8px;
 }
+.squisq-tree-item {
+  position: relative;
+}
 .squisq-tree-row {
+  position: relative;
   display: flex;
   align-items: center;
   gap: 4px;
   padding: 1px 0;
+  border-radius: 4px;
 }
 .squisq-tree-row:hover .squisq-tree-controls {
   opacity: 1;
 }
+.squisq-tree-item--dragging {
+  opacity: 0.42;
+}
+.squisq-tree-item--drop-before > .squisq-tree-row::before,
+.squisq-tree-item--drop-after::after {
+  content: "";
+  position: absolute;
+  z-index: 2;
+  left: 0;
+  right: 0;
+  height: 2px;
+  border-radius: 999px;
+  background: #6366f1;
+  pointer-events: none;
+}
+.squisq-tree-item--drop-before > .squisq-tree-row::before {
+  top: -1px;
+}
+.squisq-tree-item--drop-after::after {
+  bottom: -1px;
+}
+.squisq-tree-item--drop-child > .squisq-tree-row {
+  background: rgba(99, 102, 241, 0.12);
+  box-shadow: inset 0 0 0 1px #6366f1;
+}
 .squisq-tree-chevron {
   flex: 0 0 auto;
   width: 16px;
@@ -14142,6 +14184,18 @@
   opacity: 0;
   transition: opacity 0.12s;
 }
+.squisq-tree-drag-handle {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  color: var(--squisq-text-muted, #64748b);
+  cursor: grab;
+}
+.squisq-tree-drag-handle:active {
+  cursor: grabbing;
+}
 .squisq-tree-controls button {
   border: none;
   background: transparent;
@@ -14173,7 +14227,7 @@
 }
 .squisq-ascii-timeline-editor {
   --squisq-ascii-timeline-accent: var(--squisq-theme-primary, #6366f1);
-  --squisq-ascii-timeline-label-width: 120px;
+  --squisq-ascii-timeline-label-width: 160px;
   border: 1px solid var(--squisq-border, #e2e8f0);
   border-radius: 10px;
   background: var(--squisq-input-bg, #fff);
@@ -14200,6 +14254,30 @@
 .squisq-ascii-timeline-header small {
   color: var(--squisq-text-muted, #64748b);
 }
+.squisq-ascii-timeline-header-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 10px;
+}
+.squisq-ascii-timeline-header-actions button {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 8px;
+  border: 1px solid var(--squisq-border, #cbd5e1);
+  border-radius: 5px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-ascii-timeline-accent);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+.squisq-ascii-timeline-header-actions button:hover,
+.squisq-ascii-timeline-header-actions button:focus-visible {
+  border-color: var(--squisq-ascii-timeline-accent);
+  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
+}
 .squisq-ascii-timeline-canvas {
   position: relative;
   min-width: 600px;
@@ -14225,9 +14303,64 @@
   text-align: right;
   white-space: nowrap;
 }
-.squisq-ascii-timeline-track-label > span {
+.squisq-ascii-timeline-track-name {
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 3px 4px;
   overflow: hidden;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: right;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+button.squisq-ascii-timeline-track-name {
+  cursor: text;
+}
+button.squisq-ascii-timeline-track-name:hover,
+button.squisq-ascii-timeline-track-name:focus-visible {
+  border-color: var(--squisq-border, #cbd5e1);
+  background: var(--squisq-input-bg, #fff);
+  outline: none;
+}
+.squisq-ascii-timeline-track-name-input {
+  width: 100%;
+  min-width: 0;
+  flex: 1 1 auto;
+  padding: 3px 4px;
+  border: 1px solid var(--squisq-ascii-timeline-accent);
+  border-radius: 4px;
+  background: var(--squisq-input-bg, #fff);
+  color: var(--squisq-text, #1e293b);
+  font: inherit;
+  text-align: right;
+  outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
+}
+.squisq-ascii-timeline-track-delete {
+  display: grid;
+  width: 22px;
+  height: 22px;
+  flex: 0 0 22px;
+  place-items: center;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--squisq-text-muted, #64748b);
+  cursor: pointer;
+}
+.squisq-ascii-timeline-track-delete:hover,
+.squisq-ascii-timeline-track-delete:focus-visible {
+  background: color-mix(in srgb, #ef4444 12%, transparent);
+  color: #dc2626;
+  outline: 2px solid color-mix(in srgb, #ef4444 25%, transparent);
+}
+.squisq-ascii-timeline-track-delete:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
 }
 .squisq-ascii-timeline-track-add {
   display: grid;
@@ -14244,7 +14377,8 @@
   cursor: pointer;
 }
 .squisq-ascii-timeline-track-add:hover,
-.squisq-ascii-timeline-track-add:focus-visible {
+.squisq-ascii-timeline-track-add:focus-visible,
+.squisq-ascii-timeline-track-add[aria-pressed=true] {
   border-color: var(--squisq-ascii-timeline-accent);
   outline: 2px solid color-mix(in srgb, var(--squisq-ascii-timeline-accent) 22%, transparent);
 }
@@ -14253,6 +14387,9 @@
   height: 96px;
   min-width: 420px;
   outline: none;
+  cursor: default;
+}
+.squisq-ascii-timeline-rail--adding {
   cursor: crosshair;
 }
 .squisq-ascii-timeline-rail--readonly {
@@ -14554,7 +14691,7 @@
 }
 @media (max-width: 760px) {
   .squisq-ascii-timeline-editor {
-    --squisq-ascii-timeline-label-width: 88px;
+    --squisq-ascii-timeline-label-width: 132px;
   }
   .squisq-ascii-timeline-inspector {
     grid-template-columns: 1fr 1fr;
@@ -14566,6 +14703,9 @@
   .squisq-ascii-timeline-delete {
     grid-column: 2 / 3;
   }
+  .squisq-ascii-timeline-header-actions small {
+    display: none;
+  }
 }
 @media (prefers-reduced-motion: reduce) {
   .squisq-ascii-timeline-gap-add {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bendyline/squisq-editor-react",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "React editor shell with raw/WYSIWYG/preview modes for Squisq documents",
   "license": "MIT",
   "author": "Bendyline",
@@ -56,9 +56,9 @@
     }
   },
   "dependencies": {
-    "@bendyline/squisq": "2.0.0",
-    "@bendyline/squisq-formats": "2.0.0",
-    "@bendyline/squisq-react": "2.0.0",
+    "@bendyline/squisq": "2.0.1",
+    "@bendyline/squisq-formats": "2.0.1",
+    "@bendyline/squisq-react": "2.0.1",
     "@fortawesome/fontawesome-free": "7.2.0",
     "@monaco-editor/react": "4.7.0",
     "@tiptap/extension-image": "2.27.2",

package/src/DocumentSettingsDialog.tsx

@@ -25,17 +25,14 @@ import {
 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 ─────────────────────────────────────
 
-/** Mirror of `FM_KEYS` in PreviewControls.tsx. Canonical names are the
- *  ones we write; legacy aliases are still read so older docs work. */
-const FM = {
-  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] },
-  transform: { canonical: 'squisq-transform', legacy: 'transform-style' },
-  captions: { canonical: 'squisq-captions', legacy: 'caption-style' },
-} as const;
-
 function readFm(
   fm: Record<string, unknown> | undefined,
   canonical: string,
@@ -80,9 +77,17 @@ export function DocumentSettingsDialog({
   const currentTheme = readFrontmatterThemeId(frontmatter) ?? '';
   const currentTransform =
     resolvePersistedTransformStyleId(
-      readFm(frontmatter, FM.transform.canonical, FM.transform.legacy),
+      readFm(
+        frontmatter,
+        FRONTMATTER_SETTING_KEYS.transform.canonical,
+        FRONTMATTER_SETTING_KEYS.transform.legacy,
+      ),
     ) ?? '';
-  const currentCaptions = readFm(frontmatter, FM.captions.canonical, FM.captions.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);
@@ -132,20 +137,29 @@ export function DocumentSettingsDialog({
 
       const updates: Record<string, string | null> = {
         title: nextTitle,
-        [FM.theme.canonical]: theme || null,
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          theme || FRONTMATTER_SETTING_DEFAULTS.theme,
+          FRONTMATTER_SETTING_DEFAULTS.theme,
+        ),
         // Saving settings canonicalizes all older theme spellings.
-        [FM.theme.legacy[0]]: null,
-        [FM.theme.legacy[1]]: null,
-        [FM.transform.canonical]: transform || null,
-        [FM.transform.legacy]: null,
-        [FM.captions.canonical]: captions || null,
-        ...(currentCaptions && captions !== currentCaptions ? { [FM.captions.legacy]: null } : {}),
+        [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, currentCaptions, onSave],
+    [title, theme, transform, captions, inferredTitle, markdownSource, onSave],
   );
 
   return (

package/src/EditorShell.tsx

@@ -716,7 +716,7 @@ function EditorShellInner({
    *
    * Without this, upload-via-MediaBin and upload-via-drop both
    * added the file to the bin and nowhere else — the composer sent
-   * an empty body and the downstream gezel reported "nothing came
+   * an empty body and the downstream consumer reported "nothing came
    * through."
    */
   const insertMediaRef = useCallback(

package/src/PreviewControls.tsx

@@ -47,6 +47,11 @@ import {
 } from './customThemes';
 import { Icon } from './Icon';
 import { resolvePersistedTransformStyleId } from './transformStyleId';
+import {
+  FRONTMATTER_SETTING_DEFAULTS,
+  FRONTMATTER_SETTING_KEYS,
+  omitFrontmatterDefault,
+} from './frontmatterSettings';
 
 // ── Context ──────────────────────────────────────────────────────
 
@@ -198,16 +203,6 @@ export interface PreviewSettingsProviderProps {
   themeOverride?: Theme | null;
 }
 
-/** Frontmatter keys we read/write for preview settings. The squisq-prefixed
- *  keys are the canonical names; the legacy keys are still read so existing
- *  documents keep working. Persistence (writes) uses only the squisq names. */
-const FM_KEYS = {
-  theme: { canonical: 'squisq-theme', legacy: ['themeId', 'theme'] as const },
-  transform: { canonical: 'squisq-transform', legacy: 'transform-style' as const },
-  captions: { canonical: 'squisq-captions', legacy: 'caption-style' as const },
-  coverSlide: { canonical: 'squisq-cover-slide', legacy: 'cover-slide' as const },
-} as const;
-
 function readFrontmatterKey(
   fm: Record<string, unknown> | undefined,
   canonical: string,
@@ -226,7 +221,7 @@ export function PreviewSettingsProvider({
   const { markdownSource, setMarkdownSource, allowNarrate } = useEditorContext();
 
   const persistFrontmatter = useCallback(
-    (updates: Record<string, string | null>) => {
+    (updates: Record<string, string | number | boolean | null | undefined>) => {
       const next = setFrontmatterValues(markdownSource, updates);
       if (next !== markdownSource) {
         setMarkdownSource(next);
@@ -271,7 +266,7 @@ export function PreviewSettingsProvider({
   );
   const [selectedThemeId, setSelectedThemeId] = useState<string | null>(null);
   useEffect(() => setSelectedThemeId(null), [fmTheme]);
-  const resolvedThemeId = selectedThemeId ?? fmTheme ?? 'standard';
+  const resolvedThemeId = selectedThemeId ?? fmTheme ?? FRONTMATTER_SETTING_DEFAULTS.theme;
   // Doc themes precede browser-library themes in `allThemes`; choosing a
   // library-only entry copies it into the document below for portable export.
   const resolvedTheme = useMemo(
@@ -300,9 +295,12 @@ export function PreviewSettingsProvider({
       const selectedCustom = customThemes.find((theme) => theme.id === id);
       const alreadyDocScoped = docThemes.some((theme) => theme.id === id);
       const updates: Record<string, string | null> = {
-        [FM_KEYS.theme.canonical]: id,
-        [FM_KEYS.theme.legacy[0]]: null,
-        [FM_KEYS.theme.legacy[1]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.canonical]: omitFrontmatterDefault(
+          id,
+          FRONTMATTER_SETTING_DEFAULTS.theme,
+        ),
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[0]]: null,
+        [FRONTMATTER_SETTING_KEYS.theme.legacy[1]]: null,
       };
       if (selectedCustom && !alreadyDocScoped) {
         updates[FRONTMATTER_CUSTOM_THEMES_KEY] =
@@ -337,7 +335,7 @@ export function PreviewSettingsProvider({
           idx >= 0 ? docThemes.map((t, i) => (i === idx ? theme : t)) : [...docThemes, theme];
         const updates: Record<string, string | null> = {
           [FRONTMATTER_CUSTOM_THEMES_KEY]: writeCustomThemesToFrontmatter(nextThemes) ?? null,
-          [FM_KEYS.theme.canonical]: theme.id,
+          [FRONTMATTER_SETTING_KEYS.theme.canonical]: theme.id,
         };
         if (extras?.templates && extras.templates.length > 0) {
           const existing = doc?.customTemplates ?? [];
@@ -367,7 +365,11 @@ export function PreviewSettingsProvider({
   const fmTransform = useMemo(
     () =>
       resolvePersistedTransformStyleId(
-        readFrontmatterKey(frontmatter, FM_KEYS.transform.canonical, FM_KEYS.transform.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.transform.canonical,
+          FRONTMATTER_SETTING_KEYS.transform.legacy,
+        ),
       ),
     [frontmatter],
   );
@@ -379,7 +381,13 @@ export function PreviewSettingsProvider({
       setSelectedTransformStyle(id);
       if (id !== null) {
         // Empty string = "None" — remove the key rather than writing a blank value.
-        persistFrontmatter({ [FM_KEYS.transform.canonical]: id === '' ? null : id });
+        persistFrontmatter({
+          [FRONTMATTER_SETTING_KEYS.transform.canonical]: omitFrontmatterDefault(
+            id,
+            FRONTMATTER_SETTING_DEFAULTS.transform,
+          ),
+          [FRONTMATTER_SETTING_KEYS.transform.legacy]: null,
+        });
       }
     },
     [persistFrontmatter],
@@ -391,19 +399,30 @@ export function PreviewSettingsProvider({
   const fmCaptionMode = useMemo(
     () =>
       resolveFrontmatterCaptionMode(
-        readFrontmatterKey(frontmatter, FM_KEYS.captions.canonical, FM_KEYS.captions.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.captions.canonical,
+          FRONTMATTER_SETTING_KEYS.captions.legacy,
+        ),
       ),
     [frontmatter],
   );
   const [selectedCaptionMode, setSelectedCaptionMode] = useState<CaptionMode | null>(null);
   useEffect(() => setSelectedCaptionMode(null), [fmCaptionMode]);
-  const activeCaptionMode = selectedCaptionMode ?? fmCaptionMode ?? 'standard';
+  const activeCaptionMode =
+    selectedCaptionMode ?? fmCaptionMode ?? FRONTMATTER_SETTING_DEFAULTS.captions;
   const activeCaptionsEnabled = activeCaptionMode !== 'off';
   const activeCaptionStyle: CaptionStyle = activeCaptionMode === 'social' ? 'social' : 'standard';
   const handleSetCaptionMode = useCallback(
     (mode: CaptionMode) => {
       setSelectedCaptionMode(mode);
-      persistFrontmatter({ [FM_KEYS.captions.canonical]: mode });
+      persistFrontmatter({
+        [FRONTMATTER_SETTING_KEYS.captions.canonical]: omitFrontmatterDefault(
+          mode,
+          FRONTMATTER_SETTING_DEFAULTS.captions,
+        ),
+        [FRONTMATTER_SETTING_KEYS.captions.legacy]: null,
+      });
     },
     [persistFrontmatter],
   );
@@ -413,17 +432,31 @@ export function PreviewSettingsProvider({
   const fmCoverSlide = useMemo(
     () =>
       resolveFrontmatterBoolean(
-        readFrontmatterKey(frontmatter, FM_KEYS.coverSlide.canonical, FM_KEYS.coverSlide.legacy),
+        readFrontmatterKey(
+          frontmatter,
+          FRONTMATTER_SETTING_KEYS.coverSlide.canonical,
+          FRONTMATTER_SETTING_KEYS.coverSlide.legacy,
+        ),
       ),
     [frontmatter],
   );
   const [selectedCoverSlide, setSelectedCoverSlide] = useState<boolean | null>(null);
   useEffect(() => setSelectedCoverSlide(null), [fmCoverSlide]);
-  const activeCoverSlide = selectedCoverSlide ?? fmCoverSlide ?? true;
+  const activeCoverSlide =
+    selectedCoverSlide ?? fmCoverSlide ?? FRONTMATTER_SETTING_DEFAULTS.coverSlide;
   const handleSetCoverSlideEnabled = useCallback(
     (enabled: boolean) => {
       setSelectedCoverSlide(enabled);
-      persistFrontmatter({ [FM_KEYS.coverSlide.canonical]: enabled ? 'true' : 'false' });
+      persistFrontmatter({
+        // The cover is enabled by default, so only persist the non-default
+        // state. Pass the boolean through so YAML writes `false`, not
+        // the string `"false"`.
+        [FRONTMATTER_SETTING_KEYS.coverSlide.canonical]: omitFrontmatterDefault(
+          enabled,
+          FRONTMATTER_SETTING_DEFAULTS.coverSlide,
+        ),
+        [FRONTMATTER_SETTING_KEYS.coverSlide.legacy]: null,
+      });
     },
     [persistFrontmatter],
   );

package/src/RecorderEntry.tsx

@@ -81,6 +81,7 @@ export function RecorderEntry() {
     bumpMediaRevision,
     markdownSource,
     setMarkdownSource,
+    colorScheme,
   } = useEditorContext();
 
   const handleSave = useCallback(
@@ -150,6 +151,7 @@ export function RecorderEntry() {
     <RecorderPanel
       mediaProvider={mediaProvider}
       container={workspaceContainer}
+      colorScheme={colorScheme}
       onSave={handleSave}
       className="squisq-toolbar-button"
     />