@djangocfg/ui-tools 2.1.415 → 2.1.416

package/src/tools/chat/composer/slash/state.ts

@@ -0,0 +1,168 @@
+/**
+ * Slash-command state machine — pure functions, no React.
+ *
+ * A small model for the composer's `/` surface: derive `SlashState` from
+ * the raw editor value, narrow the verb list by a filter, and produce
+ * the next editor value when a verb is picked.
+ *
+ * Triggering rule: a slash verb only counts when it is the first token
+ * of the buffer (`"/clear"` matches, `"hello /clear"` does not). The
+ * caret is irrelevant — the machine is buffer-shape driven, matching
+ * the Warp `slash_command_model.rs` design the cmdop port came from.
+ *
+ * Layering: this file imports types only — keep it React-free so it
+ * stays trivially unit-testable.
+ */
+import type { SlashCommand, SlashState } from './types';
+
+/** A `/verb` only counts when it is the very first token of the input. */
+const SLASH_RE = /^\/([a-zA-Z][\w-]*)?(?:[ \n]([\s\S]*))?$/;
+
+/**
+ * Derive the slash state from the raw editor value.
+ *
+ * - Buffer empty or not starting with `/` → `none`.
+ * - `/`, `/c`, `/cle` (no space yet) → `composing` with `filter`.
+ * - `/clear`, `/clear stuff` (verb followed by space) → `command` if
+ *   `verb` matches a known id, else `none`.
+ */
+export function parseSlashState(
+  value: string,
+  commands: readonly SlashCommand[],
+): SlashState {
+  if (!value.startsWith('/')) return { kind: 'none' };
+  const m = SLASH_RE.exec(value);
+  if (!m) return { kind: 'none' };
+  const verb = (m[1] ?? '').toLowerCase();
+  const rest = m[2];
+  // The buffer has advanced past the verb (a space/newline follows).
+  if (rest !== undefined) {
+    const command = commands.find((c) => c.id === verb);
+    if (!command) return { kind: 'none' };
+    return { kind: 'command', command, argument: rest };
+  }
+  // Still typing the verb — `/` alone or `/cle`.
+  return { kind: 'composing', filter: verb };
+}
+
+/**
+ * Narrow a verb list by the `composing` filter.
+ *
+ * Empty filter returns every command in input order. Otherwise the
+ * filter is matched (case-insensitive) against `id`, `token`, `label`
+ * and any `keywords`: prefix matches rank above substring matches.
+ */
+export function filterCommands(
+  commands: readonly SlashCommand[],
+  filter: string,
+): SlashCommand[] {
+  const q = filter.trim().toLowerCase();
+  if (q.length === 0) return [...commands];
+  const scored: { cmd: SlashCommand; score: number; idx: number }[] = [];
+  commands.forEach((cmd, idx) => {
+    const terms = [cmd.id, cmd.token, cmd.label, ...(cmd.keywords ?? [])];
+    let best = -1;
+    for (const term of terms) {
+      const t = term.toLowerCase();
+      if (t.startsWith(q) || t.startsWith(`/${q}`)) best = Math.max(best, 2);
+      else if (t.includes(q)) best = Math.max(best, 1);
+    }
+    if (best >= 0) scored.push({ cmd, score: best, idx });
+  });
+  scored.sort((a, b) => (b.score - a.score) || (a.idx - b.idx));
+  return scored.map((s) => s.cmd);
+}
+
+/**
+ * What should happen when the user picks a verb in the menu.
+ *
+ * - `execute` — the command explicitly opted in via `autoExecute: true`.
+ *   The host should call `command.onExecute?.()` and clear the editor
+ *   buffer. Use for action commands that produce no chat message.
+ * - `insert`  — default. The host should replace the leading `/partial`
+ *   with `text` (which is `<token> `) so the user can keep typing and
+ *   submit normally.
+ */
+export type SlashCommandAction =
+  | { kind: 'execute'; command: SlashCommand }
+  | { kind: 'insert'; command: SlashCommand; text: string };
+
+/**
+ * Decide whether a picked verb runs immediately or just inserts a token.
+ *
+ * Pure — does not touch the editor value. The React layer in
+ * `useSlashCommands` consumes this to branch between `onExecute`
+ * + clear-buffer and `applyCommand` + keep-buffer.
+ *
+ * Default is `insert`. Only `autoExecute === true` triggers `execute`
+ * — `argHint` is display-only and does NOT influence this decision.
+ */
+export function resolveCommandAction(
+  value: string,
+  command: SlashCommand,
+): SlashCommandAction {
+  const shouldAutoExecute = command.autoExecute === true;
+  if (shouldAutoExecute) return { kind: 'execute', command };
+  return { kind: 'insert', command, text: applyCommand(value, command) };
+}
+
+/**
+ * Find the `/verb` slice at the start of the buffer (if any). Returns
+ * the matched token + its end offset so an overlay-mirror highlighter
+ * can wrap the exact same characters the parser considers a slash verb.
+ *
+ * - `/`, `/cle` (still composing)         → returns the partial slice.
+ * - `/clear`, `/clear stuff` (resolved)   → returns the bare `/verb`.
+ * - `hello /clear` (slash not at start)   → returns `null`.
+ */
+export function extractSlashToken(
+  value: string,
+): { token: string; end: number } | null {
+  if (!value.startsWith('/')) return null;
+  const m = SLASH_RE.exec(value);
+  if (!m) return null;
+  const verb = m[1] ?? '';
+  const token = `/${verb}`;
+  return { token, end: token.length };
+}
+
+/**
+ * Whether the current buffer is a slash command that may be submitted.
+ *
+ * Returns `true` when the buffer is NOT a resolved slash command — the
+ * host decides on its own emptiness gates for plain messages. Returns
+ * `true` for resolved commands whose `argHint` is unset (the command is
+ * self-contained) and whose `autoExecute` is not `true`. Returns
+ * `false` when:
+ *
+ *  - the resolved command has `autoExecute: true` (action commands are
+ *    picked from the menu, not submitted as a text message),
+ *  - or the resolved command declares an `argHint` and the trimmed
+ *    argument is empty.
+ *
+ * Pure — no React, no DOM. The composer uses this to gate the Send
+ * button + Enter keypress so half-typed `/note` etc. cannot be
+ * submitted as a message.
+ */
+export function isSubmittableSlash(
+  value: string,
+  commands: readonly SlashCommand[],
+): boolean {
+  const state = parseSlashState(value, commands);
+  if (state.kind !== 'command') return true;
+  if (state.command.autoExecute === true) return false;
+  if (!state.command.argHint) return true;
+  return state.argument.trim().length > 0;
+}
+
+/**
+ * Apply a picked command to the editor value — replaces the leading
+ * `/partial` with `"<token> "` so the user can immediately type the
+ * argument. Any existing argument text is preserved.
+ */
+export function applyCommand(value: string, command: SlashCommand): string {
+  const m = SLASH_RE.exec(value);
+  const rest = m?.[2];
+  const tail = rest !== undefined && rest.length > 0 ? rest : '';
+  return `${command.token} ${tail}`;
+}

package/src/tools/chat/composer/slash/types.ts

@@ -0,0 +1,64 @@
+'use client';
+
+/**
+ * Slash-command types — public surface for the composer's `/` UI.
+ *
+ * Pure type module — no React, no DOM, no side effects. Safe to import
+ * from anywhere (including the pure state machine in `state.ts`).
+ */
+import type { ReactNode } from 'react';
+
+/** One slash verb the composer exposes in the dropdown. */
+export interface SlashCommand {
+  /** Stable id — verb without the leading slash (e.g. `"clear"`). */
+  id: string;
+  /** Display token incl. the slash (e.g. `"/clear"`). */
+  token: string;
+  /** Row label — short, action-style ("Clear conversation"). */
+  label: string;
+  /** Optional one-line description shown beneath the label. */
+  description?: string;
+  /**
+   * Display-only hint rendered next to the label in the menu (e.g.
+   * `<text>`, `<host>`). Does NOT affect selection behavior — use
+   * `autoExecute` to control whether picking runs immediately.
+   */
+  argHint?: string;
+  /** Optional row icon — host-supplied so this module ships zero icon deps. */
+  icon?: ReactNode;
+  /** Extra match terms beyond `id` (aliases used by `filterCommands`). */
+  keywords?: readonly string[];
+  /**
+   * Optional executor. When `autoExecute: true`, the composer invokes
+   * this on selection (with `''` as args) and clears the buffer. For
+   * insert-style commands (the default) hosts typically call this
+   * themselves on submit, with the user-typed arguments.
+   */
+  onExecute?: (args: string) => void | Promise<void>;
+  /**
+   * When true, picking this command runs `onExecute()` immediately and
+   * clears the composer buffer (no `/verb` is inserted). Default false —
+   * commands are inserted as `/verb ` with the cursor positioned for
+   * argument entry, and submitted by the user as a normal message.
+   *
+   * Set to `true` for action commands that should not produce a message
+   * (e.g. `/clear`, `/settings`, `/help`).
+   */
+  autoExecute?: boolean;
+}
+
+/**
+ * Three states of the slash machine — the editor either has no leading
+ * slash (`none`), is typing a verb (`composing`, menu open), or has
+ * resolved a known verb followed by free-text args (`command`).
+ */
+export type SlashState =
+  | { kind: 'none' }
+  | { kind: 'composing'; filter: string }
+  | { kind: 'command'; command: SlashCommand; argument: string };
+
+/** Per-composer slash config — currently just the verb list. */
+export interface SlashConfig {
+  /** The verbs available in this composer instance. */
+  commands: SlashCommand[];
+}

package/src/tools/chat/composer/slash/useSlashCommands.ts

@@ -0,0 +1,204 @@
+'use client';
+
+/**
+ * `useSlashCommands` — React glue over the pure slash machine.
+ *
+ * Given the live editor value, exposes:
+ *   - the current `SlashState`,
+ *   - the filtered verb list while composing,
+ *   - a `highlight` index + keyboard handler for the menu,
+ *   - `pick(cmd)` which either executes the verb (`autoExecute: true`)
+ *     or inserts `"<token> "` so the user can type arguments (default),
+ *   - `clear()` which strips the leading slash to close the menu.
+ *
+ * The hook owns no editor state — the host passes `value` in and
+ * applies the strings `pick` / `onKeyDown` hand back to its editor's
+ * setter. This keeps it usable from the chat composer (driven by
+ * `useChatComposer`) and from any plain `useState` driven input.
+ */
+import { useCallback, useMemo, useState, type KeyboardEvent } from 'react';
+
+import {
+  filterCommands,
+  isSubmittableSlash,
+  parseSlashState,
+  resolveCommandAction,
+} from './state';
+import type { SlashCommand, SlashState } from './types';
+
+export interface UseSlashCommandsOptions {
+  /** Live editor value (the full draft). */
+  value: string;
+  /** Verb set surfaced to the user. */
+  commands: readonly SlashCommand[];
+  /**
+   * Apply a new editor value. Called by `pick` (after an `insert`
+   * action), `clear` (Escape), and the auto-execute branch (clears
+   * the buffer after running the command).
+   */
+  onApply: (next: string) => void;
+}
+
+export interface UseSlashCommandsReturn {
+  /** Current machine state — `none | composing | command`. */
+  state: SlashState;
+  /** True while the dropdown should be visible (including empty-match state). */
+  isOpen: boolean;
+  /** Filtered verbs (empty list is possible when `isOpen` is true). */
+  matches: SlashCommand[];
+  /** Current filter string (the partial verb after the leading slash). */
+  query: string;
+  /** Index of the highlighted row in `matches`. */
+  highlight: number;
+  /** Set the highlight index (pointer-move sync). */
+  setHighlight: (i: number) => void;
+  /** The resolved verb once `state.kind === "command"`, else null. */
+  active: SlashCommand | null;
+  /**
+   * Whether the current buffer may be submitted as a chat message.
+   *
+   * Mirrors `isSubmittableSlash(value, commands)`. The composer ANDs
+   * this with `composer.canSubmit` to disable Send and turn Enter into
+   * a no-op while a slash command is missing its required argument or
+   * is an `autoExecute` action (which must be picked from the menu,
+   * not dispatched as a text message).
+   *
+   * When `commands` is empty (slash effectively disabled) this is
+   * always `true` — the gate is a no-op.
+   */
+  canSubmit: boolean;
+  /**
+   * Apply a verb. Commands with `autoExecute: true` invoke
+   * `command.onExecute?.('')` and clear the buffer. All other commands
+   * (the default) replace the leading `/partial` with `"<token> "` so
+   * the caret lands on the argument, and the user submits normally.
+   */
+  pick: (command: SlashCommand) => void;
+  /** Close the menu by dropping the leading slash. */
+  clear: () => void;
+  /**
+   * Keydown handler for the host editor. Consumes ↑/↓/Enter/Tab/Esc
+   * while the menu is open (calling `e.preventDefault()`); otherwise
+   * the event passes through untouched.
+   */
+  onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
+}
+
+export function useSlashCommands({
+  value,
+  commands,
+  onApply,
+}: UseSlashCommandsOptions): UseSlashCommandsReturn {
+  const [highlight, setHighlightState] = useState(0);
+
+  const state = useMemo(
+    () => parseSlashState(value, commands),
+    [value, commands],
+  );
+
+  const matches = useMemo(
+    () =>
+      state.kind === 'composing'
+        ? filterCommands(commands, state.filter)
+        : [],
+    [state, commands],
+  );
+
+  // Menu stays open for the whole `composing` state — even when the
+  // filter narrows to nothing, so we can render a "No commands match"
+  // line instead of silently closing on the user.
+  const isOpen = state.kind === 'composing';
+  const query = state.kind === 'composing' ? state.filter : '';
+  const active = state.kind === 'command' ? state.command : null;
+  // Empty `commands` means slash is effectively off — never block submit
+  // (the composer instantiates the hook unconditionally, see Composer.tsx).
+  const canSubmit = useMemo(
+    () => (commands.length === 0 ? true : isSubmittableSlash(value, commands)),
+    [value, commands],
+  );
+
+  // Clamp the highlight whenever the match list shrinks.
+  const safeHighlight =
+    matches.length > 0 ? Math.min(highlight, matches.length - 1) : 0;
+
+  const setHighlight = useCallback((i: number) => {
+    setHighlightState(i);
+  }, []);
+
+  const pick = useCallback(
+    (command: SlashCommand) => {
+      const action = resolveCommandAction(value, command);
+      if (action.kind === 'execute') {
+        // Fire-and-forget; the host owns error handling. Clear the
+        // buffer so the dropdown closes and the next draft starts fresh.
+        try {
+          void command.onExecute?.('');
+        } finally {
+          onApply('');
+        }
+      } else {
+        onApply(action.text);
+      }
+      setHighlightState(0);
+    },
+    [value, onApply],
+  );
+
+  const clear = useCallback(() => {
+    onApply(value.replace(/^\//, ''));
+    setHighlightState(0);
+  }, [value, onApply]);
+
+  const onKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      if (!isOpen) return;
+      switch (e.key) {
+        case 'ArrowDown':
+          if (matches.length === 0) return;
+          e.preventDefault();
+          setHighlightState((h) => (h + 1) % matches.length);
+          break;
+        case 'ArrowUp':
+          if (matches.length === 0) return;
+          e.preventDefault();
+          setHighlightState((h) => (h - 1 + matches.length) % matches.length);
+          break;
+        case 'Enter':
+        case 'Tab': {
+          // When there are no matches, swallow Enter so the composer
+          // doesn't submit a `/xyzzy` literal — but leave Tab to the
+          // browser so focus management still works.
+          if (matches.length === 0) {
+            if (e.key === 'Enter') e.preventDefault();
+            return;
+          }
+          e.preventDefault();
+          const sel = matches[safeHighlight];
+          if (sel) pick(sel);
+          break;
+        }
+        case 'Escape':
+          e.preventDefault();
+          clear();
+          break;
+        default:
+          break;
+      }
+    },
+    [isOpen, matches, safeHighlight, pick, clear],
+  );
+
+  return {
+    state,
+    isOpen,
+    matches,
+    query,
+    highlight: safeHighlight,
+    setHighlight,
+    active,
+    canSubmit,
+    pick,
+    clear,
+    onKeyDown,
+  };
+}

package/src/tools/chat/composer/types.ts

@@ -4,6 +4,7 @@ import type { ComponentType, ReactNode } from 'react';
 
 import type { UseChatComposerReturn } from '../hooks/useChatComposer';
 import type { ChatAttachment } from '../types';
+import type { SlashConfig } from './slash/types';
 
 /** Composer visual size — shared across the `<Composer>` API. */
 export type ComposerSize = 'sm' | 'md' | 'lg';
@@ -68,6 +69,13 @@ export interface ComposerSlots {
   inlineStart?: ReactNode;
   /** Raw nodes placed right of the textarea in the `inline` layout. */
   inlineEnd?: ReactNode;
+  /**
+   * Slash-command surface. When provided, the composer mounts an
+   * internal `<SlashMenu>` as a floating popover anchored above the
+   * input surface and routes ↑/↓/Enter/Tab/Esc to the slash hook
+   * while the menu is open. See `./slash/README.md`.
+   */
+  slashCommands?: SlashConfig;
 }
 
 // ── Tier B — full slot replacement ─────────────────────────────────────────

package/src/tools/chat/shell/SuggestedPrompts.tsx

@@ -0,0 +1,194 @@
+'use client';
+
+import type { ReactNode } from 'react';
+
+import { cn } from '@djangocfg/ui-core/lib';
+
+/**
+ * SuggestedPrompts — chat empty-state "starter prompts" surface.
+ *
+ * The pattern every chat consumer wants: a small hero (optional), a
+ * title + description (optional), and a row/grid of clickable prompts
+ * that seed the composer. Pluggable enough to cover ChatGPT-style
+ * card grids and cmdop-style flat chips with the same component.
+ *
+ * Typical wiring inside `<ChatRoot slots={{ empty: ({ setValue, focus }) =>
+ *   <SuggestedPrompts items={...} onPick={(p) => { setValue(p.prompt); focus(); }} />
+ * }} />`.
+ */
+
+export type SuggestedPromptItem = {
+  id: string;
+  /** Displayed on the chip / card. */
+  label: string;
+  /** Sent on click (often equal to `label`). */
+  prompt: string;
+  /** Optional leading icon. */
+  icon?: ReactNode;
+  /** Optional secondary line (rendered in `grid` layout, ignored by `chips`). */
+  description?: string;
+};
+
+export type SuggestedPromptsLayout = 'chips' | 'grid';
+
+export interface SuggestedPromptsProps {
+  items: readonly SuggestedPromptItem[];
+  onPick: (item: SuggestedPromptItem) => void;
+  /** Optional title above the chips. */
+  title?: ReactNode;
+  /** Optional subtitle/description above the chips. */
+  description?: ReactNode;
+  /** Optional hero element above the title (icon, logo, …). */
+  hero?: ReactNode;
+  /** Layout — `chips` (flat rounded-full buttons, default) or `grid` (2-col cards). */
+  layout?: SuggestedPromptsLayout;
+  /** Container className. */
+  className?: string;
+  /** ARIA label for the region wrapper. Default `Suggested prompts`. */
+  ariaLabel?: string;
+  /** Custom render override for one item (escape hatch). */
+  renderItem?: (item: SuggestedPromptItem, idx: number) => ReactNode;
+}
+
+export function SuggestedPrompts({
+  items,
+  onPick,
+  title,
+  description,
+  hero,
+  layout = 'chips',
+  className,
+  ariaLabel = 'Suggested prompts',
+  renderItem,
+}: SuggestedPromptsProps) {
+  const hasHeader = hero != null || title != null || description != null;
+
+  return (
+    <section
+      role="region"
+      aria-label={ariaLabel}
+      className={cn(
+        'flex w-full flex-col items-center text-center',
+        className,
+      )}
+    >
+      {hasHeader ? (
+        <div className="mb-4 flex flex-col items-center gap-1.5">
+          {hero != null ? (
+            <div className="text-foreground/90">{hero}</div>
+          ) : null}
+          {title != null ? (
+            <h3 className="text-base font-semibold text-foreground">
+              {title}
+            </h3>
+          ) : null}
+          {description != null ? (
+            <p className="max-w-md text-sm leading-snug text-muted-foreground">
+              {description}
+            </p>
+          ) : null}
+        </div>
+      ) : null}
+
+      {layout === 'grid' ? (
+        <div
+          className="grid w-full max-w-xl grid-cols-1 gap-2 sm:grid-cols-2"
+          role="list"
+        >
+          {items.map((item, idx) =>
+            renderItem ? (
+              <span key={item.id} role="listitem">
+                {renderItem(item, idx)}
+              </span>
+            ) : (
+              <GridCard key={item.id} item={item} onPick={onPick} />
+            ),
+          )}
+        </div>
+      ) : (
+        <div
+          className="flex w-full max-w-xl flex-wrap justify-center gap-2"
+          role="list"
+        >
+          {items.map((item, idx) =>
+            renderItem ? (
+              <span key={item.id} role="listitem">
+                {renderItem(item, idx)}
+              </span>
+            ) : (
+              <Chip key={item.id} item={item} onPick={onPick} />
+            ),
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function Chip({
+  item,
+  onPick,
+}: {
+  item: SuggestedPromptItem;
+  onPick: (item: SuggestedPromptItem) => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="listitem"
+      onClick={() => onPick(item)}
+      className={cn(
+        'inline-flex items-center gap-1.5 rounded-full border border-border',
+        'bg-card/60 px-3 py-1.5 text-xs text-muted-foreground',
+        'transition-colors duration-150',
+        'hover:border-primary/40 hover:bg-card hover:text-foreground',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        'active:scale-[0.97]',
+      )}
+    >
+      {item.icon != null ? (
+        <span aria-hidden className="shrink-0 text-muted-foreground">
+          {item.icon}
+        </span>
+      ) : null}
+      <span>{item.label}</span>
+    </button>
+  );
+}
+
+function GridCard({
+  item,
+  onPick,
+}: {
+  item: SuggestedPromptItem;
+  onPick: (item: SuggestedPromptItem) => void;
+}) {
+  return (
+    <button
+      type="button"
+      role="listitem"
+      onClick={() => onPick(item)}
+      className={cn(
+        'group flex flex-col gap-1 rounded-md border border-border',
+        'bg-card/60 p-3 text-left',
+        'transition-colors duration-150',
+        'hover:border-primary/40 hover:bg-card',
+        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+      )}
+    >
+      <span className="flex items-center gap-2 text-sm font-medium text-foreground">
+        {item.icon != null ? (
+          <span aria-hidden className="shrink-0 text-muted-foreground group-hover:text-foreground">
+            {item.icon}
+          </span>
+        ) : null}
+        <span>{item.label}</span>
+      </span>
+      {item.description ? (
+        <span className="text-xs leading-snug text-muted-foreground">
+          {item.description}
+        </span>
+      ) : null}
+    </button>
+  );
+}

package/src/tools/chat/shell/index.ts

@@ -13,3 +13,9 @@ export {
 } from './ChatRoot';
 export { EmptyState, type EmptyStateProps } from './EmptyState';
 export { ErrorBanner, type ErrorBannerProps } from './ErrorBanner';
+export {
+  SuggestedPrompts,
+  type SuggestedPromptsProps,
+  type SuggestedPromptItem,
+  type SuggestedPromptsLayout,
+} from './SuggestedPrompts';

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
-import type { ListboxRootProps } from './context/ListboxProvider';
+import type { ListboxRootProps } from './types';
 
 export const LazyListbox = createLazyComponent<ListboxRootProps>(
   () => import('./context/ListboxProvider').then((m) => ({ default: m.ListboxRoot })),

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
-import type { MasonryProps } from './context/MasonryProvider';
+import type { MasonryProps } from './types';
 
 export const LazyMasonry = createLazyComponent<MasonryProps>(
   () => import('./context/MasonryProvider').then((m) => ({ default: m.Masonry })),

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

@@ -1,7 +1,7 @@
 'use client';
 
 import { createLazyComponent, LoadingFallback } from '../../../components/lazy-wrapper';
-import type { TimelineProps } from './context/TimelineProvider';
+import type { TimelineProps } from './types';
 
 export const LazyTimeline = createLazyComponent<TimelineProps>(
   () => import('./context/TimelineProvider').then((m) => ({ default: m.Timeline })),