@djangocfg/ui-tools 2.1.417 → 2.1.419

package/src/tools/data/JsonTree/README.md

@@ -1,89 +1,142 @@
 # JsonTree
 
-Interactive JSON tree viewer with expand/collapse, copy, and download.
+Interactive JSON viewer with collapsible nodes, search, copy-path, and a
+hover-revealed toolbar (ChatGPT-style).
 
-## Why dark by default
+```tsx
+import { JsonTree } from '@djangocfg/ui-tools/json-tree';
 
-JsonTree renders on a fixed dark surface (`#0d1117`) regardless of
-the host UI theme — same convention as Chrome DevTools, Insomnia,
-Bruno, Postman. JSON inspectors carry their own data-typed palette
-(blue keys, green strings, orange numbers, red null) tuned for dark
-backgrounds; mixing it with light UI tokens flattens values into
-unreadable pastels.
+<JsonTree data={anyJson} />
+```
 
-The palette is intentionally **not** a semantic token. See PrettyCode
-README for the same rationale.
+That covers 95% of cases. The remaining props live in `types.ts`.
+
+## Provenance
+
+Ported from [jalco/ui's `JsonViewer`](https://ui.justinlevine.me/docs/components/json-viewer)
+(MIT, Justin Levine — full source vendored at
+`packages/@sources/jalcoui-main/`). Modifications:
+
+- Removed the Shiki theme module (65 editor palettes) — we keep one
+  Tailwind-token palette that follows the host light/dark theme via
+  `useResolvedTheme`. No `colorTheme` prop.
+- New `toolbar` prop (`'auto' | 'always' | 'never'`). `'auto'` fades the
+  toolbar in on hover or keyboard focus inside the container (the
+  ChatGPT pattern). `'always'` is for debug panels; `'never'` strips it
+  entirely.
+- New `actions` prop selects which buttons to mount. Default omits the
+  download button — file-viewer hosts shouldn't offer "Download" for
+  JSON that already lives on disk.
+- `bordered={false}` strips the card frame for embedded use; the second
+  source of borders (`JsonContent` wrapper) is gone too.
+- Toolbar buttons use ui-core `<Tooltip>` / `<Button>` / `<Input>` so
+  they pick up shared focus/hover styling.
+
+The original `react-json-tree`-based wrapper is gone; consumers that
+called the legacy `<JsonTree mode="full" config={…}>` shape go through
+`LegacyJsonTree` (default export) which adapts old props to the new
+shape — see `legacyAdapter.tsx`.
+
+## API
+
+```ts
+interface JsonTreeProps {
+  data: unknown;
+  title?: string;
+  rootName?: string;                       // default 'root'
+  toolbar?: 'auto' | 'always' | 'never';   // default 'auto'
+  actions?: ('search' | 'expand' | 'copy' | 'download')[];
+                                           // default ['search','expand','copy']
+  defaultExpandedDepth?: number | true;    // default 2; true = expand all
+  bordered?: boolean;                      // default true
+  className?: string;
+  downloadFilename?: string;               // default 'data.json'
+}
+```
 
-## Structure
+### When to override which
 
-```
-JsonTree/
-├── index.tsx                   # Main component (thin orchestrator)
-├── types.ts                    # Types, interfaces, mode presets
-├── hooks/
-│   └── useJsonExpand.ts        # Expand/collapse state + shouldExpandNodeInitially logic
-├── components/
-│   └── JsonContent.tsx         # JSONTree wrapper with theme, getItemString, postprocessValue
-├── lazy.tsx                    # Lazy-loaded export
-├── JsonTree.story.tsx          # Storybook stories
-└── README.md
-```
+| Goal | Set |
+| --- | --- |
+| Embed inside a pane that already draws border + bg | `bordered={false}` |
+| Debug-panel feel (toolbar always visible) | `toolbar="always"` |
+| Strip the toolbar entirely | `toolbar="never"` |
+| Add a Download button (in-memory data) | `actions={['search','expand','copy','download']}` |
+| Read-only display, no Search | `actions={['expand','copy']}` |
+| Long config — open everything | `defaultExpandedDepth={true}` |
 
-## Usage
+## Theme
 
-```tsx
-import JsonTree from '@djangocfg/ui-tools/JsonTree';
+The data-typed palette is hand-tuned per light/dark rather than wired to
+semantic UI tokens — same convention as Chrome DevTools, Insomnia, and
+Bruno. JSON inspectors carry their own contrast model; flattening keys
+and values into theme pastels makes them illegible.
 
-// Full mode (default) — with toolbar, border, expand/copy controls
-<JsonTree data={myObject} />
+The component is **transparent by default** — no internal background,
+so it inherits whatever surface the host provides. Pass `bordered`
+explicitly when you want the card frame.
 
-// Compact — no toolbar, smaller font (11px), depth=1 auto-expand
-<JsonTree data={myObject} mode="compact" />
+## Search
 
-// Inline — minimal, no border, smallest footprint
-<JsonTree data={myObject} mode="inline" />
-```
+Hidden behind the magnifying-glass icon in the toolbar; toggling it
+expands the whole tree so matches inside collapsed nodes become
+visible. Matches highlight in both keys and string values; numeric and
+boolean values match as text.
+
+## Copy-path
+
+Hover any row — a `⊕` icon appears on the right. Clicking it copies
+the full JS access path (`root.dependencies["@tiptap/core"]`, including
+bracket syntax for keys that aren't valid identifiers) to the clipboard.
+
+## Legacy props (back-compat)
 
-## Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `data` | `unknown` | — | JSON data to display |
-| `mode` | `'full' \| 'compact' \| 'inline'` | `'full'` | Display mode (affects font, padding, controls) |
-| `title` | `string` | — | Optional title (full mode only) |
-| `config` | `JsonTreeConfig` | `{}` | Fine-grained config overrides |
-| `jsonTreeProps` | `Partial<CommonExternalProps>` | `{}` | Pass-through to react-json-tree |
-
-## Mode presets
-
-| | `full` | `compact` | `inline` |
-|---|---|---|---|
-| Font size | `13px` | `11px` | `11px` |
-| Auto-expand depth | `2` | `1` | `1` |
-| Expand/copy controls | ✓ | — | — |
-| Collection info | ✓ | ✓ | — |
-| Border | solid | subtle | none |
-
-## Config options
-
-| Option | Default | Description |
-|--------|---------|-------------|
-| `maxAutoExpandDepth` | `2` | Auto-expand depth (0 = collapsed by default) |
-| `maxAutoExpandArrayItems` | `10` | Arrays ≤ N items are auto-expanded |
-| `maxAutoExpandObjectKeys` | `5` | Objects ≤ N keys are auto-expanded |
-| `maxStringLength` | `200` | Truncate long strings |
-| `collectionLimit` | `50` | Max items rendered per collection |
-| `fontSize` | mode-dependent | Override font size (e.g. `'10px'`) |
-| `showCollectionInfo` | `true` | Show `{N}` / `(N)` labels on collapsed nodes |
-| `showExpandControls` | `true` (full) | Show expand/collapse button |
-| `showActionButtons` | `true` (full) | Show copy/download buttons |
-| `preserveKeyOrder` | `true` | Preserve object key insertion order |
-
-## In debug panels
-
-Use `mode="compact"` for log entry data — it renders at 11px with depth-1 auto-expand,
-matching a devtools-style view without taking excessive vertical space.
+The default export — `LegacyJsonTree` — accepts the pre-refactor shape
+so existing call sites compile unchanged:
 
 ```tsx
-<LazyJsonTree data={entry.data} mode="compact" />
+// Old code still works
+import JsonTree from '@djangocfg/ui-tools/json-tree';
+<JsonTree
+  data={obj}
+  mode="full"
+  config={{
+    maxAutoExpandDepth: 3,
+    showActionButtons: true,
+    autoHideToolbar: true,
+  }}
+/>
 ```
+
+`legacyAdapter.ts` maps:
+
+- `mode` → `bordered` + `defaultExpandedDepth` defaults
+- `config.maxAutoExpandDepth` → `defaultExpandedDepth`
+- `config.showExpandControls / showCopy / showDownload / showActionButtons`
+  → `actions` array
+- `config.autoHideToolbar` → `toolbar: 'auto'` (vs `'always'`)
+- `jsonTreeProps` → silently dropped (react-json-tree-specific)
+
+Migrate to the new API at your own pace — new code should target
+`{ JsonTree }` from the named export.
+
+## Lazy entries
+
+`@djangocfg/ui-tools/json-tree` ships two lazy wrappers:
+
+- `LazyJsonTree` — legacy shape, default export. Old code keeps working.
+- `LazyJsonTreeNew` — new shape, for greenfield code.
+
+Both wrap the renderer in `React.lazy` (~80KB chunk including the
+toolbar UI and Tailwind utility surface).
+
+## Related
+
+- `@djangocfg/ui-tools/json-editor` — when you need to **edit** JSON
+  (drag-reorder, JSON Schema validation, undo/redo). Lazy-loads
+  `json-edit-react` (~19KB gz) on demand. Use for debug Store panels
+  and config admin UIs; for read-only display always reach for
+  `json-tree` first.
+- `@djangocfg/ui-tools/pretty-code` — read-only syntax-highlighted code
+  blocks (any language). Use when you have a JSON **string** to display
+  unmodified.

package/src/tools/data/JsonTree/index.tsx

@@ -1,98 +1,6 @@
 'use client';
 
-import React, { memo, useMemo, useRef } from 'react';
+/** Public surface for `@djangocfg/ui-tools/json-tree`. */
 
-import { FloatingToolbar } from '../../../components/FloatingToolbar';
-import { CopyAction, DownloadAction, ExpandAction } from '../../../components/FloatingToolbar/actions';
-import { JsonContent } from './components/JsonContent';
-import { useJsonExpand } from './hooks/useJsonExpand';
-import { JsonTreeComponentProps, MODE_PRESETS } from './types';
-
-export type { Language } from 'prism-react-renderer';
-export type { JsonTreeConfig, JsonTreeComponentProps, JsonTreeMode } from './types';
-
-/**
- * JsonTreeComponent — JSON viewer with expand/collapse, copy, download.
- *
- * Memoised: re-renders only when `title`, `data`, `mode`, `config` or
- * `jsonTreeProps` change. `data` is compared by reference — the parent
- * should not mutate the object in place.
- */
-const JsonTreeComponent = memo(({
-  title,
-  data,
-  mode = 'full',
-  config = {},
-  jsonTreeProps = {},
-}: JsonTreeComponentProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  const mergedConfig = useMemo(() => ({ ...MODE_PRESETS[mode], ...config }), [mode, config]);
-
-  const {
-    maxAutoExpandDepth = 2,
-    maxAutoExpandArrayItems = 10,
-    maxAutoExpandObjectKeys = 5,
-    maxStringLength = 200,
-    collectionLimit = 50,
-    showCollectionInfo = true,
-    showExpandControls = true,
-    showActionButtons = true,
-    className = '',
-    preserveKeyOrder = true,
-    fontSize,
-  } = mergedConfig;
-
-  const { isExpanded, toggle, renderKey, shouldExpandNodeInitially } = useJsonExpand({
-    maxAutoExpandDepth,
-    maxAutoExpandArrayItems,
-    maxAutoExpandObjectKeys,
-  });
-
-  const jsonString = useMemo(() => JSON.stringify(data, null, 2), [data]);
-
-  const containerClasses = useMemo(() => {
-    const base = 'relative w-full';
-    switch (mode) {
-      case 'full': return `${base} border border-border rounded-sm ${className}`;
-      case 'compact': return `${base} border border-border/50 rounded-md ${className}`;
-      default: return `${base} ${className}`;
-    }
-  }, [mode, className]);
-
-  const contentPadding = mode === 'full' ? 'p-4' : mode === 'compact' ? 'p-2' : 'p-1';
-  const showControls = (showExpandControls || showActionButtons) && mode === 'full';
-
-  return (
-    <div ref={containerRef} className={containerClasses}>
-      {showControls && (
-        <FloatingToolbar containerRef={containerRef}>
-          {showExpandControls && <ExpandAction isExpanded={isExpanded} onToggle={toggle} />}
-          {showActionButtons && (
-            <>
-              <CopyAction value={jsonString} title="Copy JSON" />
-              <DownloadAction value={jsonString} filename="data.json" mimeType="application/json" title="Download JSON" />
-            </>
-          )}
-        </FloatingToolbar>
-      )}
-
-      <JsonContent
-        data={data}
-        renderKey={renderKey}
-        title={title}
-        showTitle={mode === 'full'}
-        padding={contentPadding}
-        collectionLimit={collectionLimit}
-        preserveKeyOrder={preserveKeyOrder}
-        showCollectionInfo={showCollectionInfo}
-        maxStringLength={maxStringLength}
-        shouldExpandNodeInitially={shouldExpandNodeInitially}
-        fontSize={fontSize}
-        jsonTreeProps={jsonTreeProps}
-      />
-    </div>
-  );
-});
-
-export default JsonTreeComponent;
+export { JsonTree, JsonTree as default } from './JsonViewer';
+export type { JsonTreeProps, JsonValue, JsonAction, JsonSize } from './types';

package/src/tools/data/JsonTree/lazy.tsx

@@ -1,62 +1,22 @@
 'use client';
 
 /**
- * Lazy-loaded JsonTree Component
+ * `@djangocfg/ui-tools/json-tree` subpath entrypoint.
  *
- * JsonTree (~100KB) is loaded only when component is rendered.
- * Use this for automatic code-splitting with Suspense fallback.
- *
- * For direct imports without lazy loading, use:
- * import JsonTree from '@djangocfg/ui-tools/json-tree'
+ * Single lazy-loaded export (`LazyJsonTree`) wrapping the renderer
+ * (~80KB chunk including the toolbar UI). Suspense fallback ships from
+ * the shared `LoadingFallback`.
  */
 
-import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
-import type { JsonTreeConfig, JsonTreeMode } from './index';
-import type { CommonExternalProps } from 'react-json-tree';
-
-// ============================================================================
-// Types
-// ============================================================================
-
-export interface JsonTreeProps {
-  title?: string;
-  data: unknown;
-  /**
-   * Display mode:
-   * - "full" (default): With toolbar and border
-   * - "compact": No toolbar, subtle styling
-   * - "inline": Minimal, no border
-   */
-  mode?: JsonTreeMode;
-  config?: JsonTreeConfig;
-  jsonTreeProps?: Partial<CommonExternalProps>;
-}
+import { createLazyComponent, LoadingFallback } from '../../../common/lazy-wrapper';
+import type { JsonTreeProps } from './types';
 
-export type { JsonTreeConfig, JsonTreeMode };
+export type { JsonTreeProps, JsonValue, JsonAction, JsonSize } from './types';
 
-// ============================================================================
-// Lazy Component
-// ============================================================================
-
-/**
- * LazyJsonTree - Lazy-loaded JSON visualization tree
- *
- * Automatically shows loading state while JsonTree loads (~100KB)
- *
- * @example
- * // Full mode (with toolbar)
- * <LazyJsonTree data={obj} mode="full" />
- *
- * // Compact mode (no toolbar)
- * <LazyJsonTree data={obj} mode="compact" />
- *
- * // Inline mode (minimal, for embedding)
- * <LazyJsonTree data={obj} mode="inline" />
- */
 export const LazyJsonTree = createLazyComponent<JsonTreeProps>(
-  () => import('./index'),
+  () => import('./JsonViewer').then((m) => ({ default: m.JsonTree })),
   {
     displayName: 'LazyJsonTree',
-    fallback: <LoadingFallback minHeight={100} text="Loading JSON viewer..." />,
-  }
+    fallback: <LoadingFallback minHeight={100} text="Loading JSON viewer…" />,
+  },
 );

package/src/tools/data/JsonTree/types.ts

@@ -1,72 +1,91 @@
-import { CommonExternalProps } from 'react-json-tree';
+/**
+ * Public types for the new JsonTree.
+ *
+ * The shape is intentionally narrow — five props cover ~95% of cases.
+ * Old shape (`mode`, `config`, `jsonTreeProps`, `showActionButtons`, …)
+ * is bridged in `legacyAdapter.ts` so existing consumers compile
+ * unchanged. New code should target this surface.
+ */
 
-export type JsonTreeMode = 'full' | 'compact' | 'inline';
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { [key: string]: JsonValue };
 
-export interface JsonTreeConfig {
-  /** Maximum depth to expand automatically (default: 2) */
-  maxAutoExpandDepth?: number;
-  /** Maximum items in array to auto-expand (default: 10) */
-  maxAutoExpandArrayItems?: number;
-  /** Maximum object keys to auto-expand (default: 5) */
-  maxAutoExpandObjectKeys?: number;
-  /** Maximum string length before truncation (default: 200) */
-  maxStringLength?: number;
-  /** Collection limit for performance (default: 50) */
-  collectionLimit?: number;
-  /** Whether to show collection info (array length, object keys count) */
-  showCollectionInfo?: boolean;
-  /** Whether to show expand/collapse all buttons */
-  showExpandControls?: boolean;
-  /** Whether to show copy/download buttons */
-  showActionButtons?: boolean;
-  /** Custom CSS classes for the container */
-  className?: string;
-  /** Whether to preserve object key order (default: true) */
-  preserveKeyOrder?: boolean;
-  /** Font size for tree nodes (default: '12px' for compact/inline, '13px' for full) */
-  fontSize?: string;
-}
+/** Which toolbar buttons to expose. Default `['search','expand','copy']`. */
+export type JsonAction = 'search' | 'expand' | 'copy' | 'download';
 
-export interface JsonTreeComponentProps {
-  title?: string;
+/**
+ * Font size for the tree body. Toolbar metrics stay constant.
+ *   - `'sm'` (default) — `text-xs`, dense for chat/debug
+ *   - `'md'`           — `text-sm`, reads like Monaco at normal zoom
+ *   - `'lg'`           — `text-base`, presentation / large screen
+ */
+export type JsonSize = 'sm' | 'md' | 'lg';
+
+export interface JsonTreeProps {
+  /** Any JSON-serializable value. */
   data: unknown;
+
+  /** Optional heading label rendered in the toolbar. */
+  title?: string;
+
+  /** Label for the root node in the tree. Default `'root'`. */
+  rootName?: string;
+
   /**
-   * Extra top offset in px for the floating toolbar — use when your layout
-   * has a non-sticky header that useNavbarHeight cannot auto-detect.
-   * Adds to the auto-detected navbar height.
+   * How the toolbar behaves:
+   *   - `'auto'` — fades in on hover / keyboard focus (ChatGPT-style)
+   *   - `'always'` — visible from the start (good for debug panels)
+   *   - `'never'` — no toolbar at all
+   * Default `'auto'`.
    */
-  toolbarOffset?: number;
+  toolbar?: 'auto' | 'always' | 'never';
+
   /**
-   * Display mode:
-   * - "full" (default): With toolbar and border
-   * - "compact": No toolbar, subtle styling
-   * - "inline": Minimal, no border
+   * Which action buttons to render in the toolbar. Default
+   * `['search','expand','copy']`. Add `'download'` for in-memory data
+   * that should be exportable; omit for on-disk file viewers.
    */
-  mode?: JsonTreeMode;
-  config?: JsonTreeConfig;
-  /** Override for react-json-tree props */
-  jsonTreeProps?: Partial<CommonExternalProps>;
-}
+  actions?: readonly JsonAction[];
 
-export const MODE_PRESETS: Record<JsonTreeMode, Partial<JsonTreeConfig>> = {
-  full: {
-    showExpandControls: true,
-    showActionButtons: true,
-    showCollectionInfo: true,
-    fontSize: '13px',
-  },
-  compact: {
-    showExpandControls: false,
-    showActionButtons: false,
-    showCollectionInfo: true,
-    fontSize: '11px',
-    maxAutoExpandDepth: 1,
-  },
-  inline: {
-    showExpandControls: false,
-    showActionButtons: false,
-    showCollectionInfo: false,
-    fontSize: '11px',
-    maxAutoExpandDepth: 1,
-  },
-};
+  /**
+   * Auto-expand depth on mount. `true` = expand everything.
+   * Default `2` — root + first level open, deeper stays collapsed.
+   */
+  defaultExpandedDepth?: number | true;
+
+  /**
+   * Font size for the tree body. Default `'sm'`. Use `'md'` for
+   * full-pane previews (text-viewer.tsx) so it reads at the same
+   * weight as Monaco; `'lg'` for talks / demos.
+   */
+  size?: JsonSize;
+
+  /**
+   * Draw the card frame (border + rounded corners). Default `true`.
+   * Pass `false` to render flush inside a host pane that already owns
+   * the chrome (cmdop preview, OpenAPI response panel).
+   */
+  bordered?: boolean;
+
+  /**
+   * Render the toolbar with reduced padding, smaller icons, and a hidden
+   * "X keys" badge. Use for embedded contexts where the JSON body is
+   * tiny (e.g. error responses with 2 keys) and the default toolbar
+   * dwarfs the content. Default `false`.
+   */
+  compactHeader?: boolean;
+
+  /** Extra class on the root container. */
+  className?: string;
+
+  /**
+   * Filename used for the optional Download action. Default `'data.json'`.
+   * Ignored when `actions` doesn't include `'download'`.
+   */
+  downloadFilename?: string;
+}

package/src/tools/data/Kanban/lazy.tsx

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

package/src/tools/data/Listbox/lazy.tsx

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

package/src/tools/data/Masonry/lazy.tsx

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

package/src/tools/data/Timeline/lazy.tsx

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

package/src/tools/data/Tree/components/TreeRow.tsx

@@ -180,17 +180,6 @@ function TreeRowRaw<T>({ row, className }: TreeRowProps<T>) {
       }}
       {...(dnd.active ? draggable.listeners : {})}
       {...(dnd.active ? draggable.attributes : {})}
-      // Block the browser's native "click moves focus into the
-      // focusable target" behaviour. Tree owns its own focus model
-      // (arrow keys drive `setFocus`, click only selects + activates),
-      // and stealing focus on every click stops downstream auto-focus
-      // patterns from working — e.g. clicking a file in a tree-plus-
-      // preview layout would let the row grab focus after the preview
-      // viewer tries to take it. The synthetic `onClick` below still
-      // fires; only the focus side-effect of mousedown is suppressed.
-      onMouseDown={(e) => {
-        if (e.button === 0) e.preventDefault();
-      }}
       onClick={handleClick}
       onDoubleClick={handleDoubleClick}
       onContextMenu={handleContextMenu}

package/src/tools/data/Tree/lazy.tsx

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

package/src/tools/dev/Map/lazy.tsx

@@ -11,7 +11,7 @@
  */
 
 import * as React from 'react';
-import { createLazyComponent, MapLoadingFallback } from '../../../components';
+import { createLazyComponent, MapLoadingFallback } from '../../../common';
 import type { MapContainerProps } from './components';
 
 // ============================================================================

package/src/tools/dev/Mermaid/Mermaid.client.tsx

@@ -3,8 +3,8 @@
 import React, { useRef } from 'react';
 
 import { useResolvedTheme } from '@djangocfg/ui-core/hooks';
-import { FloatingToolbar } from '../../../components/FloatingToolbar';
-import { CopyAction, FullscreenAction } from '../../../components/FloatingToolbar/actions';
+import { FloatingToolbar } from '../../../common/FloatingToolbar';
+import { CopyAction, FullscreenAction } from '../../../common/FloatingToolbar/actions';
 import { MermaidErrorPanel } from './components/MermaidErrorPanel';
 import { MermaidFullscreenModal } from './components/MermaidFullscreenModal';
 import { useMermaidFullscreen } from './hooks/useMermaidFullscreen';

package/src/tools/dev/Mermaid/lazy.tsx

@@ -10,7 +10,7 @@
  * import Mermaid from '@djangocfg/ui-tools/mermaid'
  */
 
-import { createLazyComponent, CardLoadingFallback } from '../../../components';
+import { createLazyComponent, CardLoadingFallback } from '../../../common';
 import type { MermaidProps } from './index';
 
 // ============================================================================