@bendyline/squisq-editor-react 1.6.0 → 1.6.1

package/src/index.ts

@@ -19,7 +19,11 @@
 
 // Shell (top-level component)
 export { EditorShell } from './EditorShell.js';
-export type { EditorShellProps, EditorTheme } from './EditorShell.js';
+export type { EditorShellProps, EditorColorScheme } from './EditorShell.js';
+
+// Code-context sections (host-supplied markdown injected into the code surface)
+export { CodeContextZones } from './codeContext/CodeContextZones.js';
+export type { CodeContext, CodeContextSection } from './codeContext/types.js';
 
 // FolderView — standalone folder browser surface (companion to the shell)
 export { FolderView } from './FolderView.js';
@@ -100,6 +104,8 @@ export type { EmojiEntry, EmojiCategory } from './emojiData.js';
 export {
   PreviewSettingsProvider,
   PreviewToolbarControls,
+  PreviewModeSwitch,
+  PreviewFormatSwitch,
   usePreviewSettings,
 } from './PreviewControls.js';
 export type { PreviewSettings } from './PreviewControls.js';
@@ -178,6 +184,31 @@ export {
   processTextFiles,
 } from './utils/dropUtils.js';
 
+// Monaco lazy loader — exported so hosts embedding RawEditor-like surfaces
+// can share the same load-once Monaco bootstrap.
+export { useMonacoLoader } from './useMonacoLoader.js';
+export type { UseMonacoLoaderResult } from './useMonacoLoader.js';
+
+// Custom themes — provider stack (doc frontmatter + browser-local library)
+export { CustomThemeProvider, useCustomThemes, useDocCustomThemes } from './customThemes/index.js';
+export type {
+  CustomThemeContextValue,
+  CustomThemeProviderProps,
+  DocCustomThemes,
+} from './customThemes/index.js';
+
+// Custom templates — provider stack (doc frontmatter + browser-local library)
+export {
+  CustomTemplateProvider,
+  useCustomTemplates,
+  useDocCustomTemplates,
+} from './customTemplates/index.js';
+export type {
+  CustomTemplateContextValue,
+  CustomTemplateProviderProps,
+  DocCustomTemplates,
+} from './customTemplates/index.js';
+
 // Bridge utilities
 export { markdownToTiptap, tiptapToMarkdown } from './tiptapBridge.js';
 

package/src/jsonEditor/useJsonEditorTokens.ts

@@ -6,15 +6,9 @@
 
 import { useMemo } from 'react';
 import type { CSSProperties } from 'react';
-import {
-  applySurface,
-  resolveFontFamily,
-  type SurfaceScheme,
-  type Theme,
-  DEFAULT_THEME,
-  DARK_SURFACE,
-  LIGHT_SURFACE,
-} from '@bendyline/squisq/schemas';
+import { type SurfaceScheme, type Theme } from '@bendyline/squisq/schemas';
+import { buildJsonFormTokens, resolveJsonFormTheme } from '@bendyline/squisq/jsonForm';
+import { useAutoSurface } from '@bendyline/squisq-react';
 
 export interface JsonEditorTokens {
   style: CSSProperties;
@@ -25,39 +19,15 @@ export function useJsonEditorTokens(
   theme: Theme | undefined,
   surface: SurfaceScheme | 'auto' | undefined,
 ): JsonEditorTokens {
-  return useMemo(() => {
-    const baseTheme = theme ?? DEFAULT_THEME;
-    const resolvedSurface =
-      surface === 'auto'
-        ? typeof window !== 'undefined' &&
-          window.matchMedia?.('(prefers-color-scheme: dark)').matches
-          ? DARK_SURFACE
-          : LIGHT_SURFACE
-        : (surface ?? undefined);
-    const finalTheme = resolvedSurface ? applySurface(baseTheme, resolvedSurface) : baseTheme;
-
-    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
-    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
-    const monoFont = resolveFontFamily(
-      finalTheme.typography.monoFont,
-      'ui-monospace, Consolas, monospace',
-    );
+  // Reactive `prefers-color-scheme` tracking (matches `<JsonView>`), so the
+  // editor re-themes live when the OS switches light/dark under `'auto'`.
+  const auto = useAutoSurface(surface === 'auto');
+  const effectiveSurface = surface === 'auto' ? auto : (surface ?? undefined);
 
-    const style: CSSProperties = {
-      ['--squisq-jsonform-bg' as string]: finalTheme.colors.background,
-      ['--squisq-jsonform-text' as string]: finalTheme.colors.text,
-      ['--squisq-jsonform-muted' as string]: finalTheme.colors.textMuted,
-      ['--squisq-jsonform-primary' as string]: finalTheme.colors.primary,
-      ['--squisq-jsonform-accent' as string]: finalTheme.colors.secondary,
-      ['--squisq-jsonform-warning' as string]: finalTheme.colors.warning,
-      ['--squisq-jsonform-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
-      ['--squisq-jsonform-input-bg' as string]: finalTheme.colors.backgroundLight,
-      ['--squisq-jsonform-title-font' as string]: titleFont,
-      ['--squisq-jsonform-body-font' as string]: bodyFont,
-      ['--squisq-jsonform-mono-font' as string]: monoFont,
-      ['--squisq-jsonform-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
-    };
-
-    return { style, theme: finalTheme };
-  }, [theme, surface]);
+  return useMemo(() => {
+    const style = buildJsonFormTokens(theme, effectiveSurface, {
+      prefix: '--squisq-jsonform',
+    }) as unknown as CSSProperties;
+    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
+  }, [theme, effectiveSurface]);
 }

package/src/recorder/hooks/useMediaRecorder.ts

@@ -35,8 +35,8 @@ export type RecorderState =
   | 'error';
 
 export interface UseMediaRecorderOptions {
-  /** Which capture pipeline to use. */
-  source: RecorderSource;
+  /** Which capture pipeline to use (default: `'mic'`). */
+  source?: RecorderSource;
   /**
    * Preferred MIME type override. When the browser supports it, this
    * wins over the default candidate list. When unset (or unsupported),
@@ -115,9 +115,10 @@ export interface UseMediaRecorderResult {
  * resources (e.g. the screen+mic AudioContext mixer).
  */
 async function acquireStream(
+  source: RecorderSource,
   opts: UseMediaRecorderOptions,
 ): Promise<{ stream: MediaStream; dispose: () => void }> {
-  switch (opts.source) {
+  switch (source) {
     case 'mic': {
       const audio = typeof opts.audioConstraints === 'object' ? opts.audioConstraints : undefined;
       const stream = await requestMicStream(audio);
@@ -135,7 +136,7 @@ async function acquireStream(
       const handle: ScreenStreamHandle = await requestScreenStream({
         video: opts.videoConstraints ?? true,
         systemAudio: opts.systemAudio ?? false,
-        includeMicrophone: opts.source === 'screen+mic',
+        includeMicrophone: source === 'screen+mic',
         microphoneConstraints:
           typeof opts.audioConstraints === 'object' ? opts.audioConstraints : undefined,
       });
@@ -158,7 +159,7 @@ export function getCaptureKind(source: RecorderSource): CaptureKind {
   return captureKindFor(source);
 }
 
-export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaRecorderResult {
+export function useMediaRecorder(options: UseMediaRecorderOptions = {}): UseMediaRecorderResult {
   const [state, setState] = useState<RecorderState>('idle');
   const [stream, setStream] = useState<MediaStream | null>(null);
   const [blob, setBlob] = useState<Blob | null>(null);
@@ -256,11 +257,9 @@ export function useMediaRecorder(options: UseMediaRecorderOptions): UseMediaReco
     setError(null);
     setState('requesting');
     try {
-      const { stream: nextStream, dispose } = await acquireStream(optionsRef.current);
-      const resolved = resolveFormat(
-        captureKindFor(optionsRef.current.source),
-        optionsRef.current.mimeType,
-      );
+      const source = optionsRef.current.source ?? 'mic';
+      const { stream: nextStream, dispose } = await acquireStream(source, optionsRef.current);
+      const resolved = resolveFormat(captureKindFor(source), optionsRef.current.mimeType);
       const recorderOptions: MediaRecorderOptions = {};
       if (resolved.mimeType) recorderOptions.mimeType = resolved.mimeType;
       if (optionsRef.current.bitsPerSecond) {

package/src/styles/code-context.css

@@ -0,0 +1,155 @@
+/**
+ * Code-context sections — host-supplied markdown blurbs rendered inside
+ * Monaco view zones above anchor lines (see src/codeContext/).
+ *
+ * The zone dom node lives in Monaco's `.view-zones` layer, which sits below
+ * `.view-lines` in hit-test order. Raising the zone's z-index inside that
+ * shared stacking context is what makes section content clickable; Monaco's
+ * own `suppressMouseDown` keeps the cursor from jumping.
+ */
+
+.squisq-ccx-zone {
+  z-index: 10;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.squisq-ccx-section {
+  --ccx-fg: #57606a;
+  --ccx-fg-strong: #24292f;
+  --ccx-bg: rgba(175, 184, 193, 0.12);
+  --ccx-bg-hover: rgba(175, 184, 193, 0.22);
+  --ccx-border: rgba(140, 149, 159, 0.35);
+  --ccx-accent: #0969da;
+  font-family: var(--squisq-ux-font, system-ui, -apple-system, sans-serif);
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ccx-fg);
+  border-left: 2px solid var(--ccx-border);
+  background: var(--ccx-bg);
+  margin: 2px 8px 2px 4px;
+  border-radius: 4px;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-ccx-section {
+  --ccx-fg: #9198a1;
+  --ccx-fg-strong: #e6edf3;
+  --ccx-bg: rgba(110, 118, 129, 0.14);
+  --ccx-bg-hover: rgba(110, 118, 129, 0.26);
+  --ccx-border: rgba(110, 118, 129, 0.45);
+  --ccx-accent: #4493f8;
+}
+
+/* ── Collapsed strip ─────────────────────────────────────────────── */
+
+.squisq-ccx-strip {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 3px 10px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.squisq-ccx-strip:hover {
+  background: var(--ccx-bg-hover);
+}
+
+.squisq-ccx-chevron {
+  flex: 0 0 auto;
+  font-size: 9px;
+  opacity: 0.7;
+}
+
+.squisq-ccx-strip-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Flatten the strip's markdown to a single inline line. */
+.squisq-ccx-strip-text .squisq-md,
+.squisq-ccx-strip-text .squisq-md-p {
+  display: inline;
+  margin: 0;
+}
+
+.squisq-ccx-strip-text .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+}
+
+/* ── Expanded body ───────────────────────────────────────────────── */
+
+.squisq-ccx-body {
+  padding: 2px 12px 8px 24px;
+  font-size: 12px;
+  user-select: text;
+}
+
+.squisq-ccx-body--loading {
+  opacity: 0.6;
+  font-style: italic;
+}
+
+.squisq-ccx-body .squisq-md-p {
+  margin: 4px 0;
+}
+
+.squisq-ccx-body .squisq-md-strong {
+  color: var(--ccx-fg-strong);
+  font-size: 11px;
+  text-transform: none;
+}
+
+.squisq-ccx-body .squisq-md-list {
+  margin: 2px 0 6px;
+  padding-left: 18px;
+}
+
+.squisq-ccx-body .squisq-md-li {
+  margin: 1px 0;
+}
+
+.squisq-ccx-body .squisq-md-link {
+  color: var(--ccx-accent);
+  text-decoration: none;
+}
+
+.squisq-ccx-body .squisq-md-link:hover {
+  text-decoration: underline;
+}
+
+.squisq-ccx-body .squisq-md-inline-code,
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  padding: 0 3px;
+  border-radius: 3px;
+  background: rgba(140, 149, 159, 0.18);
+}
+
+.squisq-ccx-body .squisq-md-link .squisq-md-inline-code {
+  color: var(--ccx-accent);
+}
+
+.squisq-ccx-body .squisq-md-code-block {
+  margin: 4px 0;
+  padding: 6px 8px;
+  border-radius: 4px;
+  background: rgba(140, 149, 159, 0.14);
+  overflow-x: auto;
+}
+
+.squisq-ccx-body .squisq-md-code-block code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 11px;
+  white-space: pre;
+}

package/src/styles/editor.css

@@ -1416,22 +1416,142 @@
 
 /* ─── Preview Controls ──────────────────────────────── */
 
+/* Left-side preview switches: the segmented mode switch and the aspect-ratio
+   switch, separated by a divider. Natural width; sits just after the view
+   tabs and never shrinks. */
+.squisq-preview-left-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+  flex: 0 0 auto;
+}
+
+.squisq-preview-seg-divider {
+  width: 1px;
+  height: 20px;
+  background: var(--squisq-border, #d1d5db);
+  flex: 0 0 auto;
+}
+
+/* Segmented switch — a row of connected buttons (display mode: Video /
+   Slideshow / Document / Page; aspect ratio: 16:9 / 1:1 / 9:16 / 4:3),
+   replacing the old "Mode:" / "Format:" dropdowns. */
+.squisq-preview-seg {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  border: 1px solid var(--squisq-border, #d1d5db);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--squisq-input-bg, #fff);
+}
+
+.squisq-preview-seg-btn {
+  appearance: none;
+  border: none;
+  border-left: 1px solid var(--squisq-border, #d1d5db);
+  background: transparent;
+  color: #4b5563;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1;
+  padding: 6px 11px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition:
+    background 0.12s,
+    color 0.12s;
+}
+
+/* Icon segments (aspect ratio) center their glyph and use tighter, square-ish
+   padding so the row of ratio icons reads as a compact cluster. */
+.squisq-preview-seg-btn--icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 8px;
+}
+
+.squisq-preview-seg-btn--icon svg {
+  display: block;
+}
+
+/* Font Awesome glyph segments (captions: cc / social) — size the webfont
+   glyph to sit level with the SVG aspect-ratio icons. */
+.squisq-preview-seg-btn--icon > i {
+  font-size: 15px;
+  line-height: 1;
+}
+
+.squisq-preview-seg-btn:first-child {
+  border-left: none;
+}
+
+.squisq-preview-seg-btn:hover {
+  background: #f3f4f6;
+  color: #111827;
+}
+
+.squisq-preview-seg-btn--active,
+.squisq-preview-seg-btn--active:hover {
+  background: #2563eb;
+  color: #fff;
+}
+
+/* Flex-filler root: spans the toolbar's leftover width, which is the budget
+   PreviewToolbarControls measures to decide how many controls stay inline vs
+   fold into the overflow menu. It also pushes the right-side toolbar buttons
+   to the far edge (replacing the preview-mode spacer). `position: relative`
+   anchors the hidden measurement probe; the 9px lead offsets the first
+   control from the view-tabs divider. */
+.squisq-preview-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1 1 auto;
+  min-width: 0;
+  position: relative;
+  padding-left: 9px;
+}
+
+/* Hidden probe: renders every control at natural width so the fit measurement
+   has per-control widths to work from. Absolutely positioned + hidden so it
+   never affects layout or catches pointer events. */
+.squisq-preview-controls-probe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: nowrap;
+  white-space: nowrap;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* Inline row sits at its natural width (the overflow gear, when present, sits
+   just after it); it never wraps — controls that don't fit move to the menu. */
 .squisq-preview-controls-inline {
   display: flex;
   align-items: center;
   gap: 6px;
-  flex-wrap: wrap;
-  padding: 2px 0 2px 9px;
+  flex-wrap: nowrap;
+  flex: 0 0 auto;
 }
 
-.squisq-preview-controls-inline .squisq-preview-control {
+.squisq-preview-controls-inline .squisq-preview-control,
+.squisq-preview-controls-probe .squisq-preview-control {
   display: flex;
   align-items: center;
   gap: 4px;
+  flex-shrink: 0;
 }
 
 .squisq-preview-controls-compact {
   position: relative;
+  flex: 0 0 auto;
 }
 
 .squisq-preview-controls-popover {
@@ -1622,6 +1742,32 @@
   background: #4b5563;
 }
 
+/* Segmented switches — mode + aspect ratio (dark) */
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg-divider {
+  background: #4b5563;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg {
+  border-color: #4b5563;
+  background: #111827;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg-btn {
+  color: #d1d5db;
+  border-left-color: #4b5563;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg-btn:hover {
+  background: #374151;
+  color: #f9fafb;
+}
+
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg-btn--active,
+.squisq-editor-shell[data-theme='dark'] .squisq-preview-seg-btn--active:hover {
+  background: #2563eb;
+  color: #fff;
+}
+
 /* Overflow menu (dark) */
 .squisq-editor-shell[data-theme='dark'] .squisq-toolbar-overflow-menu {
   background: #1f2937;

package/src/styles/index.css

@@ -5,6 +5,7 @@
 
 @import '@fortawesome/fontawesome-free/css/all.min.css';
 @import './editor.css';
+@import './code-context.css';
 @import './folder-view.css';
 @import '../jsonEditor/json-editor.css';
 @import '../imageEditor/image-editor.css';