@djangocfg/ui-tools 2.1.417 → 2.1.419

package/src/tools/dev/ops/LogViewer/utils/ansi.ts

@@ -0,0 +1,231 @@
+// Adapted from jalcoui (MIT) — github.com/jal-co/ui
+
+// Minimal ANSI SGR (Select Graphic Rendition) parser.
+//
+// Scope: 8-color and 16-color (bright) foreground / background codes plus
+// the structural codes (`0` reset, `1` bold, `2` dim, `3` italic, `4`
+// underline). 256-color and truecolor sequences (`38;5;N`, `38;2;R;G;B`)
+// are recognized at the parser level — we step over their parameters so
+// they don't corrupt the next span — but we do not honor the exact RGB;
+// they fall back to the default foreground. The 16-color palette is more
+// than enough for the typical CLI log surface (`chalk`, `consola`,
+// `pino-pretty`, …), and we trade fidelity for guaranteed semantic-token
+// routing.
+
+import type { LogTone } from '../types';
+import { TONE_CLASSES } from '../types';
+
+/** A contiguous text segment with resolved style attributes. */
+export interface AnsiSegment {
+  text: string;
+  /** Resolved tone for color routing — `undefined` means default
+   * foreground. */
+  tone?: LogTone;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}
+
+/**
+ * Map a raw ANSI SGR color code to a {@link LogTone}. The mapping mirrors
+ * the standard chalk-style palette so a log line that says `chalk.red(…)`
+ * lights up as `destructive` under every preset.
+ *
+ * - 30/40 (black)   → muted
+ * - 31/41 (red)     → destructive
+ * - 32/42 (green)   → primary-tinted via the `success` token family —
+ *                     LogViewer routes green to `info` family via the
+ *                     debug bucket? No: green logs are *positive*, so we
+ *                     reuse the existing semantic `success` (we don't
+ *                     ship a separate `success` tone in TONE_CLASSES, so
+ *                     we collapse to `info` — green is rare and `info`
+ *                     reads as positive on every default preset). For
+ *                     callers who need a true success color, that's what
+ *                     `level: "info"` with `message: "✓ …"` is for.
+ * - 33/43 (yellow)  → warning
+ * - 34/44 (blue)    → info
+ * - 35/45 (magenta) → debug (categorical, themed via --primary)
+ * - 36/46 (cyan)    → info
+ * - 37/47 (white)   → undefined (default fg)
+ *
+ * The `90+` bright variants and `40+` backgrounds collapse onto the same
+ * tones — bright/normal differentiation goes through the `bold` flag and
+ * Tailwind weight, not a fresh color scale.
+ */
+const COLOR_TONE: Record<number, LogTone | undefined> = {
+  30: 'muted',
+  31: 'destructive',
+  32: 'info', // see note above
+  33: 'warning',
+  34: 'info',
+  35: 'debug',
+  36: 'info',
+  37: undefined,
+  90: 'muted',
+  91: 'destructive',
+  92: 'info',
+  93: 'warning',
+  94: 'info',
+  95: 'debug',
+  96: 'info',
+  97: undefined,
+};
+
+// Background colors carry no semantic weight in our log surface — we
+// strip them entirely. Recognise them for parser-correctness only.
+const BG_CODES = new Set([40, 41, 42, 43, 44, 45, 46, 47, 100, 101, 102, 103, 104, 105, 106, 107]);
+
+interface State {
+  tone?: LogTone;
+  bold?: boolean;
+  dim?: boolean;
+  italic?: boolean;
+  underline?: boolean;
+}
+
+function applyCode(state: State, code: number): void {
+  if (code === 0) {
+    state.tone = undefined;
+    state.bold = false;
+    state.dim = false;
+    state.italic = false;
+    state.underline = false;
+    return;
+  }
+  if (code === 1) {
+    state.bold = true;
+    return;
+  }
+  if (code === 2) {
+    state.dim = true;
+    return;
+  }
+  if (code === 3) {
+    state.italic = true;
+    return;
+  }
+  if (code === 4) {
+    state.underline = true;
+    return;
+  }
+  if (code === 22) {
+    state.bold = false;
+    state.dim = false;
+    return;
+  }
+  if (code === 23) {
+    state.italic = false;
+    return;
+  }
+  if (code === 24) {
+    state.underline = false;
+    return;
+  }
+  if (code === 39) {
+    state.tone = undefined;
+    return;
+  }
+  if (BG_CODES.has(code) || code === 49) {
+    // background — ignore
+    return;
+  }
+  if (code in COLOR_TONE) {
+    state.tone = COLOR_TONE[code];
+  }
+}
+
+// Matches a single SGR escape: `\x1b[…m`. The CSI parameter bytes are
+// digits separated by `;`. The terminator `m` distinguishes SGR from
+// cursor / mode escapes — those are dropped silently.
+//
+// eslint-disable-next-line no-control-regex
+const ANSI_REGEX = /\x1b\[((?:\d+;?)*)m/g;
+
+/**
+ * Parse an ANSI-tinted string into styled segments. The returned array is
+ * cheap to memoize per log entry — segments are short and immutable.
+ */
+export function parseAnsi(input: string): AnsiSegment[] {
+  if (!input) return [];
+  // Fast path — no escape byte at all.
+  if (input.indexOf('\x1b') === -1) {
+    return [{ text: input }];
+  }
+
+  const segments: AnsiSegment[] = [];
+  const state: State = {};
+  let cursor = 0;
+
+  // Reset the global regex's lastIndex (it persists across calls).
+  ANSI_REGEX.lastIndex = 0;
+
+  let match: RegExpExecArray | null;
+  while ((match = ANSI_REGEX.exec(input)) !== null) {
+    const slice = input.slice(cursor, match.index);
+    if (slice) {
+      segments.push({ text: slice, ...state });
+    }
+
+    const params = match[1];
+    if (params === '') {
+      // `\x1b[m` ≡ `\x1b[0m`
+      applyCode(state, 0);
+    } else {
+      const codes = params.split(';').map((p) => Number.parseInt(p, 10) || 0);
+      // 256-color / truecolor: step over their tail so the rest of the
+      // sequence doesn't get misread.
+      for (let i = 0; i < codes.length; i += 1) {
+        const code = codes[i];
+        if ((code === 38 || code === 48) && codes[i + 1] === 5) {
+          // 256-color — skip the index byte
+          i += 2;
+          continue;
+        }
+        if ((code === 38 || code === 48) && codes[i + 1] === 2) {
+          // truecolor — skip 3 RGB bytes
+          i += 4;
+          continue;
+        }
+        applyCode(state, code);
+      }
+    }
+
+    cursor = match.index + match[0].length;
+  }
+
+  const tail = input.slice(cursor);
+  if (tail) {
+    segments.push({ text: tail, ...state });
+  }
+
+  // If the entire string was escape sequences, return at least one empty
+  // segment so the renderer has something to key off of.
+  return segments.length > 0 ? segments : [{ text: '' }];
+}
+
+/**
+ * Strip ANSI sequences for plain-text use (copy-to-clipboard, search,
+ * download). Keeps every printable character.
+ */
+export function stripAnsi(input: string): string {
+  if (!input || input.indexOf('\x1b') === -1) return input;
+  return input.replace(ANSI_REGEX, '');
+}
+
+/**
+ * Resolve a segment's Tailwind classes against the LogViewer tone table.
+ * Bold / dim / italic / underline come from Tailwind utilities and stack
+ * orthogonally on the tone color.
+ */
+export function classesForSegment(segment: AnsiSegment): string {
+  const parts: string[] = [];
+  if (segment.tone) {
+    parts.push(TONE_CLASSES[segment.tone].text);
+  }
+  if (segment.bold) parts.push('font-semibold');
+  if (segment.dim) parts.push('opacity-70');
+  if (segment.italic) parts.push('italic');
+  if (segment.underline) parts.push('underline');
+  return parts.join(' ');
+}

package/src/tools/forms/CodeEditor/components/Editor.tsx

@@ -46,6 +46,8 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
     autoHeight = false,
     minHeight = 100,
     maxHeight = 600,
+    autoFocus = false,
+    onSave,
   },
   ref
 ) {
@@ -67,9 +69,11 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
   // without going stale when the parent passes new function identities.
   const onChangeRef = useRef(onChange);
   const onMountRef = useRef(onMount);
+  const onSaveRef = useRef(onSave);
   useEffect(() => {
     onChangeRef.current = onChange;
     onMountRef.current = onMount;
+    onSaveRef.current = onSave;
   });
 
   // Expose editor methods via ref
@@ -126,6 +130,21 @@ export const Editor = forwardRef<EditorRef, EditorProps>(function Editor(
       updateContentHeight(editor);
     }
 
+    // Cmd/Ctrl+S → save. Registered as a Monaco command so it wins over
+    // the browser's "save page" default whenever the editor has focus.
+    // Read through the ref so swapping handlers does not need to rebuild.
+    editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, () => {
+      onSaveRef.current?.(editor.getValue());
+    });
+
+    // autoFocus on first mount — Monaco refuses focus during layout
+    // measurement otherwise.
+    if (autoFocus) {
+      // queueMicrotask: defer past Monaco's own post-create layout so the
+      // focus call lands on a fully laid-out editor.
+      queueMicrotask(() => editorRef.current?.focus());
+    }
+
     // Call onMount callback
     onMountRef.current?.(editor);
 

package/src/tools/forms/CodeEditor/hooks/useEditorTheme.ts

@@ -8,12 +8,12 @@ export const EDITOR_BACKGROUND = '#0a0a0a';
 /**
  * Hook that registers and returns the Monaco editor theme.
  *
- * The editor is always dark — devtool-style — regardless of the app theme.
- * Colors are read from the document's CSS variables so the editor still
- * matches the design tokens, with a dark fallback for SSR.
+ * The editor is always dark (Chrome devtools / VSCode convention) — its
+ * palette does not follow the host app theme. Pass `themeOverride` only
+ * if you need a specific Monaco built-in (e.g. `'hc-black'`).
  *
  * @param monaco - Monaco namespace (null during loading)
- * @param themeOverride - Optional explicit theme name (skips the app theme)
+ * @param themeOverride - Optional explicit theme name
  * @returns Resolved Monaco theme name to pass to editor options
  */
 export function useEditorTheme(
@@ -67,16 +67,18 @@ export function useEditorTheme(
 }
 
 /**
- * Read editor colors from the document's dark theme CSS variables.
+ * Editor colors — hard-coded dark palette.
  *
- * Tokens in `tokens.css` are stored wrapped, e.g. `--background: hsl(0 0% 4%)`,
- * so we resolve them through the browser by painting onto a probe element and
- * reading back the computed (already-rgb) color. This works for any color
- * syntax (hsl/oklch/hex).
+ * Previously we resolved against CSS variables (`--background`, `--card`,
+ * …) so the editor matched the host theme, but the editor MUST be dark
+ * regardless of host theme (Chrome devtools / VSCode / Insomnia
+ * convention). On a light-themed app `--background` resolves to white,
+ * which Monaco then paints under `base: 'vs-dark'` — giving the broken
+ * "white Monaco" look. Hard-coding keeps the dark contract honest and
+ * removes a layout-time DOM probe.
  */
 function readEditorColors() {
-  // Dark defaults — used during SSR and as a safety net.
-  const fallback = {
+  return {
     background: EDITOR_BACKGROUND,
     foreground: '#f5f5f5',
     card: '#141414',
@@ -85,67 +87,5 @@ function readEditorColors() {
     lineHighlight: '#1a1a1a',
     selection: '#264F78',
   };
-
-  if (typeof document === 'undefined' || typeof window === 'undefined') {
-    return fallback;
-  }
-
-  const probe = document.createElement('div');
-  probe.style.position = 'absolute';
-  probe.style.pointerEvents = 'none';
-  probe.style.opacity = '0';
-  document.body.appendChild(probe);
-
-  /** Resolve a CSS var to a hex color via computed style; '' on failure. */
-  const resolve = (varName: string): string => {
-    probe.style.color = `var(${varName})`;
-    const computed = getComputedStyle(probe).color;
-    return rgbToHex(computed);
-  };
-
-  try {
-    const background = resolve('--background') || fallback.background;
-    const foreground = resolve('--foreground') || fallback.foreground;
-    const card = resolve('--card') || fallback.card;
-    const border = resolve('--border') || fallback.border;
-    const mutedForeground = resolve('--muted-foreground') || fallback.mutedForeground;
-    const primary = resolve('--primary');
-
-    return {
-      background,
-      foreground,
-      card,
-      border,
-      mutedForeground,
-      lineHighlight: mixHex(background, foreground, 0.06),
-      selection: primary ? mixHex(primary, background, 0.55) : fallback.selection,
-    };
-  } finally {
-    probe.remove();
-  }
-}
-
-/** Convert a computed `rgb(r, g, b)` / `rgba(...)` string to `#rrggbb`. */
-function rgbToHex(rgb: string): string {
-  const match = rgb.match(/(\d+(?:\.\d+)?)/g);
-  if (!match || match.length < 3) return '';
-  const [r, g, b] = match.slice(0, 3).map((n) => Math.round(parseFloat(n)));
-  const toHex = (v: number) => Math.min(255, Math.max(0, v)).toString(16).padStart(2, '0');
-  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
 }
 
-/** Linearly blend `a` toward `b` by `t` (0..1). Both must be `#rrggbb`. */
-function mixHex(a: string, b: string, t: number): string {
-  const pa = parseInt(a.slice(1), 16);
-  const pb = parseInt(b.slice(1), 16);
-  if (Number.isNaN(pa) || Number.isNaN(pb)) return a;
-  const lerp = (shift: number) => {
-    const ca = (pa >> shift) & 0xff;
-    const cb = (pb >> shift) & 0xff;
-    return Math.round(ca + (cb - ca) * t);
-  };
-  const r = lerp(16);
-  const g = lerp(8);
-  const bch = lerp(0);
-  return `#${((r << 16) | (g << 8) | bch).toString(16).padStart(6, '0')}`;
-}

package/src/tools/forms/CodeEditor/lazy.tsx

@@ -20,7 +20,7 @@
  * and only render `<LazyEditor>` lower in the tree where it's needed.
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components';
+import { createLazyComponent, LoadingFallback } from '../../../common';
 import type { EditorProps, DiffEditorProps } from './types';
 
 // ============================================================================

package/src/tools/forms/CodeEditor/types/index.ts

@@ -61,6 +61,13 @@ export interface EditorProps {
   minHeight?: number;
   /** Max height in px when autoHeight is enabled (default: 600) */
   maxHeight?: number;
+  /** Focus the editor once Monaco mounts. Pair with `key={path}` upstream
+   *  for per-file focus reset. */
+  autoFocus?: boolean;
+  /** Bound to Cmd/Ctrl+S inside the editor via Monaco's command palette.
+   *  Receives the current value. The browser default is suppressed by
+   *  Monaco when a command is registered for that chord. */
+  onSave?: (value: string) => void;
 }
 
 export interface DiffEditorProps {

package/src/tools/forms/FileUpload/lazy.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { createLazyComponent } from '../../../components/lazy-wrapper';
+import { createLazyComponent } from '../../../common/lazy-wrapper';
 import type { FileUploadProps } from './types';
 
 export const LazyFileUpload = createLazyComponent<FileUploadProps>(

package/src/tools/forms/JsonEditor/JsonEditor.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+/**
+ * JsonEditor — editable JSON tree.
+ *
+ * Thin wrapper over `json-edit-react` (MIT, CarlosNZ). The library
+ * handles the hard parts (inline editing, drag-reorder, JSON-Schema
+ * validation, undo/redo, keyboard nav, copy-to-clipboard) — we apply
+ * our theme tokens and a sane default surface, nothing more.
+ *
+ * When to use:
+ *   - User is *editing* JSON live (debug Store panel, config UI).
+ *   - You need schema validation or controlled mutations with
+ *     `onUpdate`.
+ *
+ * When NOT to use:
+ *   - Read-only display → use `@djangocfg/ui-tools/json-tree` (≈ 10×
+ *     lighter bundle, search + copy-path included).
+ */
+
+import { JsonEditor as RawEditor, type JsonEditorProps as RawProps } from 'json-edit-react';
+import { useMemo } from 'react';
+import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
+import { cn } from '@djangocfg/ui-core/lib';
+
+export interface JsonEditorProps extends Omit<RawProps, 'theme'> {
+  /** Extra class on the root container. */
+  className?: string;
+  /**
+   * Hide chrome the host already provides. When `false`, no border /
+   * background — the editor sits flush in the surrounding pane.
+   * Default `true`.
+   */
+  bordered?: boolean;
+}
+
+/**
+ * Hand-rolled theme bridge: maps our semantic CSS vars onto
+ * json-edit-react's theme slots. Light/dark resolution lives in our
+ * `useResolvedTheme`; the library only sees concrete colours.
+ *
+ * We keep this minimal — most slots inherit `currentColor`, only the
+ * data-typed tokens get explicit Tailwind palette values so the
+ * keys/strings/numbers stay legible on every host surface.
+ */
+function useEditorTheme(): RawProps['theme'] {
+  const resolved = useResolvedTheme();
+  return useMemo(
+    () => ({
+      displayName: 'djangocfg',
+      styles: {
+        container: {
+          backgroundColor: 'transparent',
+          fontFamily:
+            "'SF Mono', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace",
+          fontSize: '12px',
+        },
+        property:
+          resolved === 'dark' ? 'rgb(167 139 250)' : 'rgb(124 58 237)', // violet-400 / violet-600
+        bracket:
+          resolved === 'dark' ? 'rgb(148 163 184)' : 'rgb(100 116 139)', // slate-400 / slate-500
+        itemCount:
+          resolved === 'dark' ? 'rgb(100 116 139)' : 'rgb(148 163 184)',
+        string:
+          resolved === 'dark' ? 'rgb(52 211 153)' : 'rgb(5 150 105)', // emerald-400 / emerald-600
+        number:
+          resolved === 'dark' ? 'rgb(56 189 248)' : 'rgb(2 132 199)', // sky-400 / sky-600
+        boolean:
+          resolved === 'dark' ? 'rgb(251 191 36)' : 'rgb(217 119 6)', // amber-400 / amber-600
+        null: {
+          color: resolved === 'dark' ? 'rgb(100 116 139)' : 'rgb(148 163 184)',
+          fontStyle: 'italic',
+        },
+        input: {
+          backgroundColor:
+            resolved === 'dark' ? 'rgb(30 41 59)' : 'rgb(241 245 249)',
+          color: resolved === 'dark' ? 'white' : 'rgb(15 23 42)',
+          borderRadius: 4,
+          padding: '2px 6px',
+        },
+        inputHighlight:
+          resolved === 'dark' ? 'rgba(96, 165, 250, 0.25)' : 'rgba(59, 130, 246, 0.15)',
+        iconCollection:
+          resolved === 'dark' ? 'rgb(148 163 184)' : 'rgb(100 116 139)',
+        iconEdit: 'currentColor',
+        iconDelete: 'rgb(239 68 68)',
+        iconAdd: 'rgb(34 197 94)',
+        iconCopy: 'currentColor',
+        iconOk: 'rgb(34 197 94)',
+        iconCancel: 'rgb(239 68 68)',
+      },
+    }),
+    [resolved],
+  );
+}
+
+export function JsonEditor({
+  className,
+  bordered = true,
+  ...props
+}: JsonEditorProps) {
+  const theme = useEditorTheme();
+  return (
+    <div
+      className={cn(
+        'json-editor-host w-full',
+        bordered &&
+          'overflow-hidden rounded-md border border-border/60 bg-card px-3 py-2',
+        className,
+      )}
+    >
+      <RawEditor theme={theme} {...props} />
+    </div>
+  );
+}

package/src/tools/forms/JsonEditor/index.ts

@@ -0,0 +1 @@
+export * from './lazy';

package/src/tools/forms/JsonEditor/lazy.tsx

@@ -0,0 +1,24 @@
+'use client';
+
+/**
+ * `@djangocfg/ui-tools/json-editor` subpath entrypoint.
+ *
+ * Heavy editor (~58 KB minified for `json-edit-react` alone). Lazy-load
+ * so consumers that only display JSON pay nothing — they should use
+ * `@djangocfg/ui-tools/json-tree` instead, which is ~10× lighter.
+ */
+
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
+import type { JsonEditorProps } from './JsonEditor';
+
+export type { JsonEditorProps } from './JsonEditor';
+
+export const LazyJsonEditor = createLazyComponent<JsonEditorProps>(
+  () => import('./JsonEditor').then((m) => ({ default: m.JsonEditor })),
+  {
+    displayName: 'LazyJsonEditor',
+    fallback: <LoadingFallback minHeight={120} text="Loading JSON editor…" />,
+  },
+);
+
+export { LazyJsonEditor as JsonEditor };

package/src/tools/forms/JsonForm/index.ts

@@ -16,7 +16,7 @@
  *
  * @example
  * ```tsx
- * import { JsonSchemaForm } from '@/components/JsonForm';
+ * import { JsonSchemaForm } from '@/common/JsonForm';
  *
  * const schema = {
  *   type: 'object',

package/src/tools/forms/JsonForm/lazy.tsx

@@ -10,7 +10,7 @@
  * import { JsonSchemaForm } from '@djangocfg/ui-tools/json-form'
  */
 
-import { createLazyComponent, CardLoadingFallback } from '../../../components';
+import { createLazyComponent, CardLoadingFallback } from '../../../common';
 import type { JsonSchemaFormProps } from './types';
 
 // ============================================================================

package/src/tools/forms/MarkdownEditor/MarkdownEditor.tsx

@@ -7,6 +7,7 @@ import Mention from '@tiptap/extension-mention';
 import { Markdown } from '@tiptap/markdown';
 import type { AnyExtension } from '@tiptap/core';
 import { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
+import { useHotkey } from '@djangocfg/ui-core/hooks';
 import {
   Bold, Italic, Strikethrough, Heading1, Heading2, Heading3,
   List, ListOrdered, Quote, Minus, Code, type LucideIcon,
@@ -125,6 +126,17 @@ export interface MarkdownEditorProps {
    * empty draft".
    */
   onSubmit?: () => boolean | void;
+  /**
+   * Focus the editor on mount. Pair with `key={file}` upstream when the
+   *  host wants a fresh focus per file change (inspector / editor tab).
+   */
+  autoFocus?: boolean;
+  /**
+   * Called when the user presses Cmd/Ctrl+S inside the editor. Receives
+   * the current markdown. The browser's "save page" default is suppressed
+   *  only when this handler is supplied — otherwise Cmd+S falls through.
+   */
+  onSave?: (markdown: string) => void;
 }
 
 /**
@@ -159,6 +171,8 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     slashCommands,
     onMentionIdsChange,
     onSubmit,
+    autoFocus = false,
+    onSave,
   },
   ref,
 ) {
@@ -380,6 +394,32 @@ export const MarkdownEditor = forwardRef<MarkdownEditorHandle, MarkdownEditorPro
     editor?.setEditable(!disabled);
   }, [editor, disabled]);
 
+  // Declarative autoFocus — runs once the editor instance exists. Hosts
+  // that want per-file focus reset should pair this with `key={path}`.
+  useEffect(() => {
+    if (!autoFocus || !editor) return;
+    editor.commands.focus('end');
+  }, [autoFocus, editor]);
+
+  // Cmd/Ctrl+S → save. Uses the shared `useHotkey` (inInput=true by
+  // default for modifier combos). Guarded to fire only when focus is
+  // inside this editor's ProseMirror DOM, so multiple sibling editors
+  // don't all fire on one chord.
+  const onSaveRef = useRef(onSave);
+  onSaveRef.current = onSave;
+  useHotkey(
+    'mod+s',
+    () => {
+      const h = onSaveRef.current;
+      if (!h || !editor) return;
+      const dom = editor.view.dom;
+      const active = document.activeElement;
+      if (!active || !dom.contains(active)) return;
+      h(getMarkdown(editor));
+    },
+    { enabled: !!editor && !!onSave },
+  );
+
   // Imperative API for hosts that drive the editor without owning a
   // TipTap ref directly — chat composer registration, voice slot,
   // focus-on-stream-end.

package/src/tools/forms/MarkdownEditor/lazy.tsx

@@ -23,7 +23,7 @@
  */
 
 import { Suspense, lazy, forwardRef } from 'react';
-import { LoadingFallback } from '../../../components';
+import { LoadingFallback } from '../../../common';
 import type { MarkdownEditorProps, MarkdownEditorHandle } from './MarkdownEditor';
 
 const MarkdownEditorImpl = lazy(() =>