@djangocfg/ui-tools 2.1.393 → 2.1.395

package/src/tools/Chat/notifier/createCrossTabNotifier.ts

@@ -0,0 +1,99 @@
+import type { ChatMessage } from '../types';
+
+import type { ChatNotifier } from './types';
+
+export interface CrossTabNotifierOptions {
+  /**
+   * The underlying notifier that performs the actual title/favicon
+   * mutation (usually `createBrowserNotifier()`). The decorator only
+   * forwards calls when this tab is the elected leader; followers stay
+   * silent so the title doesn't flicker in stereo across 4 open tabs.
+   */
+  inner: ChatNotifier;
+  /**
+   * Live "this tab is the leader" flag. Read from `useActiveTab` in
+   * the hook layer and passed in via the live-getter form so the
+   * notifier sees the latest value without React re-rendering it.
+   */
+  isLeader: () => boolean;
+  /**
+   * Optional broadcast channel name. Followers subscribe to count
+   * updates here so the in-tab badge UI (FAB counter) stays in sync
+   * even when they're not the one mutating the title.
+   *
+   * Default: `djangocfg-chat:unread`.
+   */
+  channel?: string;
+  /**
+   * Callback for follower tabs: fired when a peer (leader) reports an
+   * unread count update. Use it to drive a Zustand store that the FAB
+   * badge subscribes to.
+   */
+  onPeerUpdate?: (count: number) => void;
+}
+
+interface BroadcastPayload {
+  count: number;
+}
+
+const DEFAULT_CHANNEL = 'djangocfg-chat:unread';
+
+/**
+ * Decorator over an inner notifier that adds cross-tab coordination.
+ *
+ * Behaviour:
+ *   - Leader tab → forwards `setUnread/clear` to the inner notifier
+ *     AND broadcasts the count so follower tabs can update their FAB
+ *     badge UI.
+ *   - Follower tab → does NOT call inner (silent on title/favicon),
+ *     but still broadcasts via `onPeerUpdate` so the host store
+ *     reflects the truth.
+ *
+ * When leadership flips at runtime (e.g. the previous leader closed
+ * its tab), the next `setUnread` call from the new leader will start
+ * mutating the title — there's no special handoff needed because the
+ * inner notifier is idempotent.
+ */
+export function createCrossTabNotifier(opts: CrossTabNotifierOptions): ChatNotifier {
+  const { inner, isLeader, onPeerUpdate } = opts;
+  const channelName = opts.channel ?? DEFAULT_CHANNEL;
+
+  let channel: BroadcastChannel | null = null;
+  if (typeof BroadcastChannel !== 'undefined') {
+    channel = new BroadcastChannel(channelName);
+    if (onPeerUpdate) {
+      channel.addEventListener('message', (e) => {
+        const data = e.data as BroadcastPayload | undefined;
+        if (!data || typeof data.count !== 'number') return;
+        onPeerUpdate(data.count);
+      });
+    }
+  }
+
+  return {
+    setUnread(count: number, latest?: ChatMessage | null) {
+      // Broadcast first so followers learn the count even if our local
+      // inner notifier no-ops in this environment.
+      channel?.postMessage({ count } satisfies BroadcastPayload);
+      if (isLeader()) {
+        inner.setUnread(count, latest);
+      }
+    },
+    clear() {
+      channel?.postMessage({ count: 0 } satisfies BroadcastPayload);
+      if (isLeader()) {
+        inner.clear();
+      } else {
+        // Followers never armed the inner notifier, but call clear()
+        // anyway in case leadership flipped between an old setUnread
+        // and this clear — inner is idempotent.
+        inner.clear();
+      }
+    },
+    dispose() {
+      channel?.close();
+      channel = null;
+      inner.dispose?.();
+    },
+  };
+}

package/src/tools/Chat/notifier/faviconBadge.ts

@@ -0,0 +1,280 @@
+export interface FaviconBadgeOptions {
+  /**
+   * Badge fill color. Default Facebook-ish red.
+   */
+  badgeColor?: string;
+  /**
+   * Text/number color. Default white.
+   */
+  textColor?: string;
+  /**
+   * `true` → paint the count inside the badge (caps at 99+).
+   * `false` → flat dot. Default `false` — Facebook-style restraint.
+   */
+  showCount?: boolean;
+  /**
+   * Optional explicit base favicon URL. If omitted, we read the current
+   * `<link rel="icon">` href; if there is none, we paint onto a blank
+   * canvas so something useful still appears on the tab.
+   */
+  baseUrl?: string;
+  /**
+   * Canvas size in CSS px. 32 is the standard favicon hi-DPI size.
+   */
+  size?: number;
+  /**
+   * Pulse the badge by alternating between the badged frame and the
+   * bare base favicon. Default `true` — periphery-vision cue that
+   * makes the dot findable in a tab bar of dozens of icons. Set
+   * `false` for a static dot (quieter; matches enterprise tastes).
+   */
+  pulse?: boolean;
+  /**
+   * Milliseconds the badge stays visible per cycle. Default 600.
+   */
+  pulseOnMs?: number;
+  /**
+   * Milliseconds the badge is hidden per cycle. Default 400.
+   * Asymmetric on/off (default 600/400) gives a Slack/FB-style
+   * heartbeat — the badge is the dominant state, the gap is brief.
+   */
+  pulseOffMs?: number;
+}
+
+interface BadgeHandle {
+  set(count: number): void;
+  clear(): void;
+}
+
+const LINK_REL_VARIANTS = ['icon', 'shortcut icon'] as const;
+const MANAGED_ATTR = 'data-chat-favicon-badge';
+
+/**
+ * Paints a small badge over the page's favicon using a hidden canvas
+ * and swaps the resulting data URL into `<link rel="icon">`. SSR-safe.
+ *
+ * Notes / gotchas (encoded as invariants):
+ *   - SVG favicons can't be rastered via `<img>` reliably across
+ *     browsers without inlining. We attempt anyway; on failure we paint
+ *     a blank background + the badge so the tab still signals unread.
+ *   - We never mutate the host's original `<link>`. We add a managed
+ *     `<link rel="icon" data-chat-favicon-badge>` ahead of it; on clear
+ *     we remove that managed node. This is the cleanest way to handle
+ *     hosts that swap their own favicons (e.g. Next.js dynamic icons).
+ *   - Cross-origin favicons need CORS to draw; if drawing throws we
+ *     fall back to a CORS-less canvas (badge only, no base image).
+ */
+export function createFaviconBadge(opts: FaviconBadgeOptions = {}): BadgeHandle {
+  if (typeof document === 'undefined') {
+    return { set() {}, clear() {} };
+  }
+
+  const badgeColor = opts.badgeColor ?? '#ef4444';
+  const textColor = opts.textColor ?? '#ffffff';
+  const showCount = opts.showCount ?? false;
+  const size = opts.size ?? 32;
+  const pulse = opts.pulse ?? true;
+  const pulseOnMs = opts.pulseOnMs ?? 600;
+  const pulseOffMs = opts.pulseOffMs ?? 400;
+
+  let baseImg: HTMLImageElement | null = null;
+  let baseLoaded = false;
+  let lastCount = -1;
+
+  // Pulse animation state.
+  let frameOn: string | null = null;   // badged frame data URL
+  let frameOff: string | null = null;  // bare base frame data URL (or empty)
+  let pulseTimer: ReturnType<typeof setTimeout> | null = null;
+  let pulsePhase: 'on' | 'off' = 'on';
+
+  const detectBaseUrl = (): string | null => {
+    if (opts.baseUrl) return opts.baseUrl;
+    for (const rel of LINK_REL_VARIANTS) {
+      const link = document.querySelector<HTMLLinkElement>(
+        `link[rel="${rel}"]:not([${MANAGED_ATTR}])`,
+      );
+      if (link?.href) return link.href;
+    }
+    return null;
+  };
+
+  const loadBase = () => {
+    if (baseImg) return;
+    const url = detectBaseUrl();
+    if (!url) return;
+    const img = new Image();
+    img.crossOrigin = 'anonymous';
+    img.onload = () => {
+      baseLoaded = true;
+      // If a `set()` came in before load completed, re-render now.
+      if (lastCount >= 0) renderFrames(lastCount);
+    };
+    img.onerror = () => {
+      // Network/CORS failure: leave baseLoaded=false; we'll paint badge
+      // on a blank canvas.
+      baseLoaded = false;
+    };
+    img.src = url;
+    baseImg = img;
+  };
+
+  const removeManagedLinks = () => {
+    document
+      .querySelectorAll(`link[${MANAGED_ATTR}]`)
+      .forEach((node) => node.remove());
+  };
+
+  const applyDataUrl = (dataUrl: string) => {
+    removeManagedLinks();
+    const link = document.createElement('link');
+    link.rel = 'icon';
+    link.type = 'image/png';
+    link.href = dataUrl;
+    link.setAttribute(MANAGED_ATTR, 'true');
+    document.head.appendChild(link);
+  };
+
+  // Paint the off-phase frame. If we have a usable base favicon, this
+  // is the bare base; otherwise a transparent canvas. Returning a
+  // transparent frame (rather than `null` + removing the link) is
+  // load-bearing: Chrome only re-rasters the tab favicon when the
+  // managed `<link>`'s href *changes*, so off-phase MUST swap to a
+  // different data URL — not vanish — for the pulse to be visible.
+  const renderOffFrame = (): string | null => {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    if (baseImg && baseLoaded) {
+      try {
+        ctx.drawImage(baseImg, 0, 0, size, size);
+      } catch {
+        // Tainted canvas → fall through to the empty frame.
+        ctx.clearRect(0, 0, size, size);
+      }
+    }
+    // If no base, the canvas stays fully transparent — Chrome falls
+    // back to its default tab glyph, which still gives a visible
+    // on/off contrast against the red badge.
+    try {
+      return canvas.toDataURL('image/png');
+    } catch {
+      return null;
+    }
+  };
+
+  // Paint the badged frame. Reused for both the static (no-pulse) case
+  // and the `on` phase of the pulse loop.
+  const renderBadged = (count: number): string | null => {
+    const canvas = document.createElement('canvas');
+    canvas.width = size;
+    canvas.height = size;
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return null;
+
+    if (baseImg && baseLoaded) {
+      try {
+        ctx.drawImage(baseImg, 0, 0, size, size);
+      } catch {
+        ctx.clearRect(0, 0, size, size);
+      }
+    }
+
+    const r = size * 0.28;
+    const cx = size - r - size * 0.04;
+    const cy = size - r - size * 0.04;
+
+    ctx.fillStyle = badgeColor;
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, Math.PI * 2);
+    ctx.fill();
+
+    if (showCount) {
+      const label = count > 99 ? '99+' : String(count);
+      ctx.fillStyle = textColor;
+      const fontSize = label.length >= 3 ? r * 0.85 : r * 1.25;
+      ctx.font = `600 ${fontSize}px system-ui, -apple-system, sans-serif`;
+      ctx.textAlign = 'center';
+      ctx.textBaseline = 'middle';
+      ctx.fillText(label, cx, cy + fontSize * 0.06);
+    }
+
+    try {
+      return canvas.toDataURL('image/png');
+    } catch {
+      // Tainted-canvas fallback: badge only, no base.
+      const fb = document.createElement('canvas');
+      fb.width = size;
+      fb.height = size;
+      const fctx = fb.getContext('2d');
+      if (!fctx) return null;
+      fctx.fillStyle = badgeColor;
+      fctx.beginPath();
+      fctx.arc(cx, cy, r, 0, Math.PI * 2);
+      fctx.fill();
+      return fb.toDataURL('image/png');
+    }
+  };
+
+  const stopPulse = () => {
+    if (pulseTimer !== null) {
+      clearTimeout(pulseTimer);
+      pulseTimer = null;
+    }
+  };
+
+  const tickPulse = () => {
+    if (frameOn === null) return;
+    // Always swap the managed <link>'s href between two distinct data
+    // URLs — Chrome / Safari skip the redraw if the href is identical
+    // to what was just set, so removing-and-readding the node isn't
+    // enough on its own (`renderOffFrame` guarantees a non-null off
+    // frame whenever frameOn exists).
+    if (pulsePhase === 'on') {
+      applyDataUrl(frameOn);
+      pulsePhase = 'off';
+      pulseTimer = setTimeout(tickPulse, pulseOnMs);
+    } else {
+      applyDataUrl(frameOff ?? frameOn);
+      pulsePhase = 'on';
+      pulseTimer = setTimeout(tickPulse, pulseOffMs);
+    }
+  };
+
+  const renderFrames = (count: number) => {
+    frameOn = renderBadged(count);
+    frameOff = renderOffFrame();
+
+    if (frameOn === null) return;
+
+    if (!pulse) {
+      applyDataUrl(frameOn);
+      return;
+    }
+
+    // (Re-)start the pulse loop. If a previous loop was running we
+    // tear it down first so the cadence doesn't double up.
+    stopPulse();
+    pulsePhase = 'on';
+    tickPulse();
+  };
+
+  return {
+    set(count) {
+      lastCount = count;
+      loadBase();
+      // If base not loaded yet, the onload handler will call
+      // renderFrames(lastCount) once it resolves.
+      renderFrames(count);
+    },
+    clear() {
+      lastCount = -1;
+      stopPulse();
+      frameOn = null;
+      frameOff = null;
+      removeManagedLinks();
+    },
+  };
+}

package/src/tools/Chat/notifier/index.ts

@@ -0,0 +1,20 @@
+export type { ChatNotifier } from './types';
+export {
+  createBrowserNotifier,
+  createNoopNotifier,
+  type BrowserNotifierOptions,
+} from './createBrowserNotifier';
+export {
+  createTitleRotator,
+  type TitleRotatorOptions,
+  type TitleMode,
+} from './titleRotator';
+export {
+  createFaviconBadge,
+  type FaviconBadgeOptions,
+} from './faviconBadge';
+export { isPageHidden, onVisibilityChange } from './visibility';
+export {
+  createCrossTabNotifier,
+  type CrossTabNotifierOptions,
+} from './createCrossTabNotifier';

package/src/tools/Chat/notifier/titleRotator.ts

@@ -0,0 +1,119 @@
+import type { ChatMessage } from '../types';
+
+export type TitleMode = 'rotate' | 'prefix';
+
+export interface TitleRotatorOptions {
+  /** Snapshot taken on first `start()` if omitted. */
+  base?: string;
+  /**
+   * Build the alert string for the current unread state.
+   * Only used in `rotate` mode. Default: `"(N) Base"` — same shape as
+   * the prefix mode, so the two modes differ only in *whether* the
+   * title rotates, not in what it says.
+   */
+  template?: (count: number, latest?: ChatMessage | null, base?: string) => string;
+  /** Only used in `rotate` mode. Default 2000ms — gentle, not nervous. */
+  intervalMs?: number;
+  /**
+   * - `prefix` (default): render `"(N) Base"` once, no interval. The
+   *   restrained Facebook-style cue: rely on the favicon dot for
+   *   attention, keep the title readable.
+   * - `rotate`: swap between base and `template(...)` every
+   *   `intervalMs`. Use when the host has no favicon (or the user
+   *   pinned the tab and favicons are hidden).
+   */
+  mode?: TitleMode;
+}
+
+interface RotatorHandle {
+  start(count: number, latest?: ChatMessage | null): void;
+  update(count: number, latest?: ChatMessage | null): void;
+  stop(): void;
+}
+
+const DEFAULT_TEMPLATE = (count: number, _latest?: ChatMessage | null, base?: string) =>
+  base ? `(${count}) ${base}` : `(${count})`;
+
+/**
+ * Mutates `document.title`. SSR-safe (returns no-op handle).
+ *
+ * Invariants:
+ *   - `stop()` always restores the base title.
+ *   - Multiple `start()` calls without an intervening `stop()` are
+ *     equivalent to `update()`; we never stack timers.
+ *   - In `rotate` mode the timer only ticks when the page is hidden
+ *     (the caller is expected to gate this; see `useChatUnreadNotifier`).
+ */
+export function createTitleRotator(opts: TitleRotatorOptions = {}): RotatorHandle {
+  if (typeof document === 'undefined') {
+    return { start() {}, update() {}, stop() {} };
+  }
+
+  const template = opts.template ?? DEFAULT_TEMPLATE;
+  const intervalMs = opts.intervalMs ?? 2000;
+  const mode: TitleMode = opts.mode ?? 'prefix';
+
+  let baseTitle: string | null = null;
+  let alertTitle = '';
+  let phase: 'base' | 'alert' = 'base';
+  let timer: ReturnType<typeof setInterval> | null = null;
+
+  const captureBaseOnce = () => {
+    if (baseTitle !== null) return;
+    baseTitle = opts.base ?? document.title;
+  };
+
+  const render = () => {
+    if (baseTitle === null) return;
+    document.title = phase === 'alert' ? alertTitle : baseTitle;
+  };
+
+  const tick = () => {
+    phase = phase === 'alert' ? 'base' : 'alert';
+    render();
+  };
+
+  const prefixTitle = (count: number) =>
+    baseTitle ? `(${count}) ${baseTitle}` : `(${count})`;
+
+  return {
+    start(count, latest) {
+      captureBaseOnce();
+      alertTitle = template(count, latest, baseTitle ?? undefined);
+
+      if (mode === 'prefix') {
+        document.title = prefixTitle(count);
+        return;
+      }
+
+      phase = 'alert';
+      render();
+      if (timer === null) {
+        timer = setInterval(tick, intervalMs);
+      }
+    },
+
+    update(count, latest) {
+      // Same path as start — base title is already captured, just refresh
+      // the alert string and re-render in case we're in alert phase.
+      captureBaseOnce();
+      alertTitle = template(count, latest, baseTitle ?? undefined);
+      if (mode === 'prefix') {
+        document.title = prefixTitle(count);
+      } else if (phase === 'alert') {
+        render();
+      }
+    },
+
+    stop() {
+      if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+      }
+      if (baseTitle !== null) {
+        document.title = baseTitle;
+      }
+      phase = 'base';
+    },
+  };
+}

package/src/tools/Chat/notifier/types.ts

@@ -0,0 +1,38 @@
+import type { ChatMessage } from '../types';
+
+/**
+ * Transport-agnostic surface for surfacing "you have new messages" to the
+ * user when they're not actively watching the chat.
+ *
+ * Two reference implementations ship with ui-tools:
+ *   - `createBrowserNotifier` — Facebook-style document.title rotation +
+ *     favicon badge, suitable for browser tabs.
+ *   - `createNoopNotifier` — does nothing; default when no DOM is around
+ *     and the safe pick inside Wails / Electron, where the host wires
+ *     its own native dock-badge bridge instead.
+ *
+ * Hosts that want native badges (Wails dock, macOS notification dot)
+ * implement this interface themselves and pass the instance into
+ * `useChatUnreadNotifier({ notifier })`.
+ */
+export interface ChatNotifier {
+  /**
+   * Called whenever the unread count is non-zero AND the page is not
+   * visible to the user. Implementations must be idempotent — they may
+   * be called repeatedly with the same count.
+   */
+  setUnread(count: number, latest?: ChatMessage | null): void;
+
+  /**
+   * Called when the user is back (page visible, or dock opened) OR when
+   * unread drops to zero. Implementations must fully restore any state
+   * they mutated (title, favicon).
+   */
+  clear(): void;
+
+  /**
+   * Optional: release any resources (DOM listeners, cached canvases).
+   * Called on hook unmount. Safe to omit.
+   */
+  dispose?(): void;
+}

package/src/tools/Chat/notifier/visibility.ts

@@ -0,0 +1,47 @@
+/**
+ * Page-visibility helpers. SSR-safe — every entry point guards on
+ * `typeof document`.
+ *
+ * Why `hidden || !hasFocus` instead of just `hidden`:
+ *   - `document.hidden` flips true only when the tab is fully
+ *     backgrounded (other tab, minimised window).
+ *   - A focused window in the foreground with the chat tab visible but
+ *     the user typing into a different app still counts as "watching"
+ *     for Chrome's purposes. We treat that as away too, so unread
+ *     notifications kick in when you alt-tab to your editor.
+ *
+ * Inside Wails / Electron with a single window, `document.hidden` is
+ * always false and `document.hasFocus()` tracks the OS window — which
+ * is exactly what we want for a desktop dock badge if a host ever
+ * decides to reuse the browser notifier (most won't; they'll ship
+ * their own ChatNotifier).
+ */
+
+export function isPageHidden(): boolean {
+  if (typeof document === 'undefined') return false;
+  if (document.hidden) return true;
+  if (typeof document.hasFocus === 'function' && !document.hasFocus()) return true;
+  return false;
+}
+
+/**
+ * Subscribe to visibility/focus changes. Returns an unsubscribe fn.
+ * No-op in SSR.
+ */
+export function onVisibilityChange(cb: (hidden: boolean) => void): () => void {
+  if (typeof document === 'undefined') return () => {};
+
+  const fire = () => cb(isPageHidden());
+  document.addEventListener('visibilitychange', fire);
+  // `focus` / `blur` on window catch alt-tab-without-visibility-change
+  // (Chrome on macOS notably keeps `visibilityState === 'visible'` for
+  // background-but-on-screen tabs).
+  window.addEventListener('focus', fire);
+  window.addEventListener('blur', fire);
+
+  return () => {
+    document.removeEventListener('visibilitychange', fire);
+    window.removeEventListener('focus', fire);
+    window.removeEventListener('blur', fire);
+  };
+}

package/src/tools/ImageViewer/components/ImageViewer.tsx

@@ -156,8 +156,8 @@ export function ImageViewer({
       className={cn(
         'flex-1 h-full relative overflow-hidden outline-none',
         'bg-[length:16px_16px]',
-        '[background-color:hsl(var(--muted)/0.2)]',
-        '[background-image:linear-gradient(45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(-45deg,hsl(var(--muted)/0.4)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,hsl(var(--muted)/0.4)_75%),linear-gradient(-45deg,transparent_75%,hsl(var(--muted)/0.4)_75%)]',
+        '[background-color:color-mix(in_oklab,var(--muted)_20%,transparent)]',
+        '[background-image:linear-gradient(45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(-45deg,color-mix(in_oklab,var(--muted)_40%,transparent)_25%,transparent_25%),linear-gradient(45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%),linear-gradient(-45deg,transparent_75%,color-mix(in_oklab,var(--muted)_40%,transparent)_75%)]',
         '[background-position:0_0,0_8px,8px_-8px,-8px_0px]'
       )}
     >

package/src/tools/MarkdownEditor/styles.css

@@ -88,13 +88,13 @@
 
 /* Focus ring */
 .markdown-editor:focus-within {
-  border-color: var(--color-ring, hsl(var(--ring, 0 0% 60%)));
-  box-shadow: 0 0 0 2px var(--color-ring, hsl(var(--ring, 0 0% 60%) / 0.3));
+  border-color: var(--color-ring, var(--ring));
+  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-ring, var(--ring)) 30%, transparent);
 }
 
 /* Mention inline chip */
 .markdown-mention {
-  background: var(--color-primary, hsl(var(--primary)));
+  background: var(--color-primary, var(--primary));
   color: var(--color-primary-foreground, #fff);
   padding: 1px 6px;
   border-radius: 4px;
@@ -105,9 +105,9 @@
 
 /* Mention dropdown */
 .markdown-mention-list {
-  background: var(--color-popover, hsl(var(--popover, 0 0% 8%)));
-  color: var(--color-popover-foreground, hsl(var(--popover-foreground, 0 0% 98%)));
-  border: 1px solid var(--color-border, hsl(var(--border, 0 0% 15%)));
+  background: var(--color-popover, var(--popover));
+  color: var(--color-popover-foreground, var(--popover-foreground));
+  border: 1px solid var(--color-border, var(--border));
   border-radius: 8px;
   padding: 4px;
   min-width: 220px;
@@ -133,7 +133,7 @@
 
 .markdown-mention-item:hover,
 .markdown-mention-item.selected {
-  background: var(--color-muted, hsl(var(--muted, 0 0% 15%)));
+  background: var(--color-muted, var(--muted));
 }
 
 .markdown-mention-avatar {

package/src/tools/PrettyCode/lazy.tsx

@@ -67,3 +67,9 @@ export const LazyPrettyCode = createLazyComponent<PrettyCodeProps>(
     fallback: <CodeLoadingFallback />,
   }
 );
+
+// `PrettyCode` is the historical named export — same component as
+// `LazyPrettyCode`, kept for backwards compatibility with callers that
+// imported it from the old root barrel.
+export { LazyPrettyCode as PrettyCode };
+export { default } from './index';