@bendyline/squisq-editor-react 1.5.3 → 1.6.1

package/src/imageEditor/icons.tsx

@@ -1,144 +1,64 @@
 /**
- * Inline SVG line icons for the image editor chrome. Stroke-based,
- * `currentColor`-driven so they pick up `--squisq-image-editor-text` etc.
- * automatically. Sized via `font-size`/`em` so they scale with their
- * button label. Kept inline (no sprite, no font) so the package has zero
- * extra runtime cost and tree-shakes per-icon.
+ * Image-editor chrome icons. Thin wrappers around the shared {@link Icon}
+ * component, which renders Font Awesome Free glyphs via the webfont CSS
+ * imported in `styles/index.css`. Color and size flow from the parent's
+ * `color` / `font-size` (e.g. `--squisq-image-editor-text`), matching the
+ * toolbar icons so the whole editor shares one icon style.
  */
 
-import type { SVGProps } from 'react';
+import { Icon, type IconProps } from '../Icon';
 
-type IconProps = Omit<SVGProps<SVGSVGElement>, 'children'>;
+type Props = Omit<IconProps, 'icon'>;
 
-function Svg({ children, ...rest }: SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      width="1em"
-      height="1em"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth={1.75}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      aria-hidden="true"
-      focusable="false"
-      {...rest}
-    >
-      {children}
-    </svg>
-  );
+export function EyeIcon(props: Props) {
+  return <Icon icon="fa-solid fa-eye" {...props} />;
 }
 
-export function EyeIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M2.5 12s3.5-6.5 9.5-6.5S21.5 12 21.5 12s-3.5 6.5-9.5 6.5S2.5 12 2.5 12Z" />
-      <circle cx="12" cy="12" r="2.75" />
-    </Svg>
-  );
+export function EyeOffIcon(props: Props) {
+  return <Icon icon="fa-solid fa-eye-slash" {...props} />;
 }
 
-export function EyeOffIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M3.5 3.5l17 17" />
-      <path d="M9.5 5.7A10.6 10.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-3.2 4" />
-      <path d="M6.2 7.6A17 17 0 0 0 2.5 12s3.5 6.5 9.5 6.5a10.6 10.6 0 0 0 4.3-.9" />
-      <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
-    </Svg>
-  );
+export function LockIcon(props: Props) {
+  return <Icon icon="fa-solid fa-lock" {...props} />;
 }
 
-export function LockIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <rect x="5" y="11" width="14" height="9" rx="1.5" />
-      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
-    </Svg>
-  );
+export function UnlockIcon(props: Props) {
+  return <Icon icon="fa-solid fa-lock-open" {...props} />;
 }
 
-export function UnlockIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <rect x="5" y="11" width="14" height="9" rx="1.5" />
-      <path d="M8 11V8a4 4 0 0 1 7.6-1.7" />
-    </Svg>
-  );
+export function ChevronUpIcon(props: Props) {
+  return <Icon icon="fa-solid fa-chevron-up" {...props} />;
 }
 
-export function ChevronUpIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M6 14l6-6 6 6" />
-    </Svg>
-  );
+export function ChevronDownIcon(props: Props) {
+  return <Icon icon="fa-solid fa-chevron-down" {...props} />;
 }
 
-export function ChevronDownIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M6 10l6 6 6-6" />
-    </Svg>
-  );
+export function CloseIcon(props: Props) {
+  return <Icon icon="fa-solid fa-xmark" {...props} />;
 }
 
-export function CloseIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M6 6l12 12M18 6L6 18" />
-    </Svg>
-  );
+export function CursorIcon(props: Props) {
+  return <Icon icon="fa-solid fa-arrow-pointer" {...props} />;
 }
 
-export function CursorIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M5 4l6.5 14.5 2.2-6 6-2.2L5 4Z" />
-    </Svg>
-  );
+export function TextIcon(props: Props) {
+  return <Icon icon="fa-solid fa-font" {...props} />;
 }
 
-export function TextIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M5 6h14M12 6v13M9 19h6" />
-    </Svg>
-  );
+export function ShapeIcon(props: Props) {
+  return <Icon icon="fa-solid fa-shapes" {...props} />;
 }
 
-export function ShapeIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <rect x="4" y="4" width="16" height="16" rx="2" />
-    </Svg>
-  );
+export function CropIcon(props: Props) {
+  return <Icon icon="fa-solid fa-crop-simple" {...props} />;
 }
 
-export function CropIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M7 2v15a1 1 0 0 0 1 1h15" />
-      <path d="M2 7h15a1 1 0 0 1 1 1v15" />
-    </Svg>
-  );
+export function PlusIcon(props: Props) {
+  return <Icon icon="fa-solid fa-plus" {...props} />;
 }
 
-export function PlusIcon(props: IconProps) {
-  return (
-    <Svg {...props}>
-      <path d="M12 5v14M5 12h14" />
-    </Svg>
-  );
-}
-
-export function NoneIcon(props: IconProps) {
-  // Used for "no fill / transparent" affordance.
-  return (
-    <Svg {...props}>
-      <circle cx="12" cy="12" r="8" />
-      <path d="M6.3 6.3l11.4 11.4" />
-    </Svg>
-  );
+export function NoneIcon(props: Props) {
+  // "No fill / transparent" affordance.
+  return <Icon icon="fa-solid fa-ban" {...props} />;
 }

package/src/imageEditor/image-editor.css

@@ -60,6 +60,19 @@
 .squisq-image-editor-tool-group--right {
   margin-left: auto;
 }
+/* Read-only property value (e.g. a path shape's kind). */
+.squisq-image-editor-readonly-value {
+  text-transform: capitalize;
+  opacity: 0.8;
+}
+/* Anchor for the shape palette popover that drops from the Shape tool. */
+.squisq-image-editor-shape-trigger {
+  position: relative;
+  display: inline-flex;
+}
+.squisq-image-editor-shape-trigger .squisq-shape-palette {
+  z-index: 20;
+}
 .squisq-image-editor-tool-button {
   background: var(--squisq-image-editor-control-bg);
   color: inherit;
@@ -133,21 +146,28 @@
 /* ── Canvas surface ────────────────────────────────────────────────── */
 .squisq-image-editor-surface {
   flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+  background: var(--squisq-image-editor-workspace-bg);
+}
+.squisq-image-editor-canvas-wrap {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 1rem;
-  overflow: auto;
-  background: var(--squisq-image-editor-workspace-bg);
+  min-width: 100%;
+  min-height: 100%;
+  padding: 16px;
+  box-sizing: border-box;
 }
 .squisq-image-editor-canvas {
   display: block;
-  max-width: 100%;
-  max-height: 100%;
+  flex: 0 0 auto;
   background: transparent;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
   user-select: none;
   touch-action: none;
+  image-rendering: pixelated;
 }
 .squisq-image-editor-canvas--tool-text,
 .squisq-image-editor-canvas--tool-shape {
@@ -156,6 +176,9 @@
 .squisq-image-editor-canvas--tool-crop {
   cursor: crosshair;
 }
+.squisq-image-editor-canvas--tool-zoom-rect {
+  cursor: zoom-in;
+}
 
 /* ── Layers panel ──────────────────────────────────────────────────── */
 .squisq-image-editor-panel-header {
@@ -328,6 +351,32 @@
   justify-content: center;
 }
 
+/* ── Zoom controls ──────────────────────────────────────────────────── */
+.squisq-image-editor-tool-group--zoom {
+  gap: 0.15rem;
+}
+.squisq-image-editor-zoom-input {
+  width: 44px;
+  text-align: center;
+  background: var(--squisq-image-editor-control-bg);
+  border: 1px solid var(--squisq-image-editor-control-border);
+  color: inherit;
+  border-radius: 3px;
+  padding: 3px 2px;
+  font: inherit;
+  font-size: 12px;
+  -moz-appearance: textfield;
+}
+.squisq-image-editor-zoom-input::-webkit-inner-spin-button,
+.squisq-image-editor-zoom-input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+}
+.squisq-image-editor-zoom-label {
+  font-size: 12px;
+  color: var(--squisq-image-editor-text-muted);
+  padding: 0 1px;
+}
+
 /* -- Version history dropdown --------------------------------------- */
 .squisq-image-editor-version-dropdown {
   position: relative;

package/src/imageEditor/state.ts

@@ -16,15 +16,18 @@ import {
   touch,
 } from '@bendyline/squisq/imageEdit';
 
+// Distributive Omit: applied per union member so the discriminant (`type`) is preserved.
+type DOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+
 /**
  * Layer payload accepted by the `add-layer` action — the `id` field is
  * optional and will be assigned by the underlying `addLayer` helper if
  * the caller doesn't supply one.
  */
-export type ImageEditLayerInput = ImageEditLayer | (Omit<ImageEditLayer, 'id'> & { id?: string });
+export type ImageEditLayerInput = ImageEditLayer | (DOmit<ImageEditLayer, 'id'> & { id?: string });
 
 /** The currently active interaction tool. */
-export type ImageEditorTool = 'select' | 'text' | 'shape' | 'image' | 'crop';
+export type ImageEditorTool = 'select' | 'text' | 'shape' | 'image' | 'crop' | 'zoom-rect';
 
 /** A pixel-space rectangle in canvas coordinates. */
 export interface CanvasRect {
@@ -41,6 +44,12 @@ export interface ImageEditorState {
   selectedLayerId: string | null;
   /** Active tool. */
   tool: ImageEditorTool;
+  /**
+   * The shape kind the shape tool will drop next (a drawing palette kind,
+   * e.g. `'rectangle'`, `'diamond'`, `'arrow-right'`). Set when the user
+   * picks from the shape palette; defaults to `'rectangle'`.
+   */
+  shapeKind: string;
   /**
    * Dirty flag — true when the in-memory doc has unsaved changes
    * relative to the last `markClean()` call. The hook uses this to
@@ -53,6 +62,7 @@ export type ImageEditorAction =
   | { type: 'load'; doc: ImageEditDoc }
   | { type: 'mark-clean' }
   | { type: 'set-tool'; tool: ImageEditorTool }
+  | { type: 'set-shape-kind'; kind: string }
   | { type: 'select'; layerId: string | null }
   | { type: 'set-canvas'; canvas: ImageEditDoc['canvas'] }
   | { type: 'add-layer'; layer: ImageEditLayerInput; select?: boolean }
@@ -67,6 +77,7 @@ export function initialImageEditorState(doc: ImageEditDoc): ImageEditorState {
     doc,
     selectedLayerId: null,
     tool: 'select',
+    shapeKind: 'rectangle',
     dirty: false,
   };
 }
@@ -77,7 +88,13 @@ export function imageEditorReducer(
 ): ImageEditorState {
   switch (action.type) {
     case 'load':
-      return { doc: action.doc, selectedLayerId: null, tool: 'select', dirty: false };
+      return {
+        doc: action.doc,
+        selectedLayerId: null,
+        tool: 'select',
+        shapeKind: state.shapeKind,
+        dirty: false,
+      };
 
     case 'mark-clean':
       return state.dirty ? { ...state, dirty: false } : state;
@@ -85,6 +102,9 @@ export function imageEditorReducer(
     case 'set-tool':
       return state.tool === action.tool ? state : { ...state, tool: action.tool };
 
+    case 'set-shape-kind':
+      return state.shapeKind === action.kind ? state : { ...state, shapeKind: action.kind };
+
     case 'select':
       return state.selectedLayerId === action.layerId
         ? state

package/src/index.ts

@@ -19,7 +19,15 @@
 
 // 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';
+export type { FolderViewProps, FolderEntry } from './FolderView.js';
 
 // Context
 export { EditorProvider, useEditorContext } from './EditorContext.js';
@@ -37,8 +45,33 @@ export type {
   DocumentLinkProvider,
   ViewPreferences,
   ThemeInheritance,
+  LayoutMode,
 } from './EditorContext.js';
 
+// Block-at-a-time primitives — reusable outside EditorShell. `useBlockNavigator`
+// drives a one-block-at-a-time editing channel from any `(source, setSource)`
+// pair; `BlockCardView` is the matching card chrome; the `blockRange` utilities
+// are pure source-slicing helpers.
+export { useBlockNavigator } from './useBlockNavigator.js';
+export type { BlockNavigator, UseBlockNavigatorOptions } from './useBlockNavigator.js';
+export { BlockCardView } from './BlockCardView.js';
+export type { BlockCardViewProps } from './BlockCardView.js';
+export {
+  getBlockSlices,
+  spliceBlock,
+  lineToOffset,
+  offsetToLine,
+  sliceIndexAtOffset,
+} from './blockRange.js';
+export type { BlockRange, BlockSlice } from './blockRange.js';
+
+// Timeline view — the horizontal block + media track and the line-level
+// markdown write-back helpers it commits edits through.
+export { TimelineTrack } from './TimelineTrack.js';
+export type { TimelineTrackProps } from './TimelineTrack.js';
+export { formatSeconds, setBlockDurationInSource, setMediaClipInSource } from './timelineSource.js';
+export type { MediaClipPatch } from './timelineSource.js';
+
 // File-kind detection — useful for hosts that want to pre-decide chrome
 // around the editor based on whether a file is markdown or code.
 export { resolveFileKind, detectLanguageFromFileName } from './fileKind.js';
@@ -71,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';
@@ -89,6 +124,35 @@ export type { OutlinePanelProps } from './OutlinePanel.js';
 export { ThemeCustomizerPanel } from './ThemeCustomizerPanel.js';
 export type { ThemeCustomizerPanelProps } from './ThemeCustomizerPanel.js';
 export { TemplatePicker, templateLabel } from './TemplatePicker.js';
+export { TransitionPicker } from './TransitionPicker.js';
+export type { TransitionPickerProps } from './TransitionPicker.js';
+export {
+  TRANSITION_GROUPS,
+  TRANSITION_ENTRIES,
+  transitionLabel,
+  findTransitionEntry,
+} from './transitionCatalog.js';
+export type {
+  TransitionGroup,
+  TransitionCatalogEntry,
+  DirectionModel,
+} from './transitionCatalog.js';
+export {
+  readHeadingLineTransition,
+  setHeadingLineTransition,
+  readBlockAttrsTransition,
+  setBlockAttrsTransition,
+  EMPTY_TRANSITION,
+} from './headingTransition.js';
+export type { TransitionFields } from './headingTransition.js';
+export {
+  readBlockAttrsParams,
+  readBlockAttrsValue,
+  setBlockAttrsValue,
+  summarizeBlockProps,
+} from './blockProperties.js';
+export { BlockPropertiesPopover } from './BlockPropertiesPopover.js';
+export type { BlockPropertiesPopoverProps } from './BlockPropertiesPopover.js';
 export { InlinePreviewGutter } from './InlinePreviewGutter.js';
 export type { InlinePreviewGutterProps } from './InlinePreviewGutter.js';
 
@@ -120,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';
 
@@ -129,6 +218,25 @@ export { buildPreviewDoc } from './buildPreviewDoc.js';
 // Tiptap extension: Heading with template annotation support
 export { HeadingWithTemplate } from './TemplateAnnotation.js';
 
+// Diagram editor — Tiptap extension that mounts a React-Flow canvas
+// below any `### Title {[diagram]}` heading and hides the section's
+// child headings (they're rendered as nodes in the canvas).
+export { DiagramExtension } from './diagram/DiagramExtension.js';
+export { DiagramCanvas } from './diagram/DiagramCanvas.js';
+export type { DiagramCommand } from './diagram/DiagramCanvas.js';
+export { DiagramWidget } from './diagram/DiagramWidget.js';
+export { useDiagramData } from './diagram/useDiagramData.js';
+export type { DiagramData, DiagramRFNode, DiagramRFEdge } from './diagram/useDiagramData.js';
+export {
+  moveNode,
+  addConnection,
+  removeConnection,
+  renameNode,
+  addNode,
+  removeNode,
+  listDiagramChildren,
+} from './diagram/diagramCommands.js';
+
 // JSON Form — editable component
 export { JsonEditor } from './jsonEditor/index.js';
 export type { JsonEditorProps } from './jsonEditor/index.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]);
 }