zidane-ui 9.1.1 → 9.1.3

package/src/chat/composer/ComposerBadges.tsx

@@ -1,339 +0,0 @@
-/**
- * The composer's badge strip: a band at the top of the composer's tray ring,
- * above the card, the git bar's mirror under it. A badge is a pill on the
- * ring (an icon, a label, a count). One that opens something is a button,
- * and the one whose panel is shown is the raised chip (`aria-pressed`), like
- * a selected tab. A highlighted badge, something that waits on the user, is
- * raised in the warn tone and breathes.
- *
- *   <ComposerBadges badges={[{ id: 'todos', label: 'Todos', icon: 'i-ph-list-checks', count: '2/5', onSelect }]} />
- *
- * The strip scrolls sideways when it overflows (edge fades, a vertical wheel
- * scrolls it while it can move) and keeps the highlighted, else the active,
- * badge in view without scrolling the page. With `onReorder` the user drags
- * a badge to a new slot, or moves the focused one with Alt+Shift+←/→; the new
- * order is committed once, on drop. `orderComposerBadges` (badge-order.ts)
- * puts a saved order back.
- *
- * Motion: a badge enters on `settle` with the fade and leaves on `exit` in its
- * slot, then its siblings slide over (layout), and the band opens
- * and closes like a collapsible. A new `resetKey` (another conversation) is
- * a fresh strip shown as it is: no badge animates in its first moments, so
- * switching conversations never replays them. Only the band's height eases
- * when the composer changes shape, as the git bar's does.
- */
-import { AnimatePresence, Reorder } from 'motion/react';
-import { useEffect, useMemo, useRef, useState, type CSSProperties, type KeyboardEvent, type ReactNode } from 'react';
-
-import { CountBadge, type CountTone } from '../../components/TabPill';
-import { Tooltip } from '../../components/Tooltip';
-import { moveId, useTabDrag } from '../../hooks/useTabDrag';
-import { currentMotionPrefs, useMotionTransition, useWithFade } from '../../motion/springs';
-import { useChatLabels } from '../useChatLabels';
-
-/** The tint of a badge's icon: the theme's quiet tones and its status colors. */
-export type ComposerBadgeTone = 'muted' | 'subtle' | 'accent' | 'success' | 'warn' | 'danger';
-
-/** One badge of a {@link ComposerBadges} strip. */
-export interface ComposerBadge {
-  /** Stable id: the strip's key and what a saved order names. */
-  id: string;
-  /** The badge's name (`Todos`, `Queued`). */
-  label: string;
-  /** A count or a short value after the label (`3`, `2/5`), drawn as a {@link CountBadge}. */
-  count?: string;
-  /**
-   * Look of the count.
-   * @default 'info' (`attention` on a highlighted badge)
-   */
-  countTone?: CountTone;
-  /** Leading icon class (`i-ph-list-checks`). */
-  icon?: string;
-  /** Tints the icon. Default: the badge's text color (warn on a highlighted badge). */
-  tone?: ComposerBadgeTone;
-  /** Work in progress: the running arc in place of the icon. */
-  loader?: boolean;
-  /** Something waits on the user: raised in the warn tone, breathing, kept in view. */
-  highlight?: boolean;
-  /** Tooltip, and the description assistive tech reads with it. */
-  title?: string;
-  /** What the badge opens is on screen (its panel): the raised chip, `aria-pressed`. */
-  active?: boolean;
-  /** Default slot, lower first (see `orderComposerBadges`). The strip itself draws badges in the order given. */
-  order?: number;
-  /** Called on a click, or Enter / Space. Without it the badge is a plain status pill. */
-  onSelect?: () => void;
-}
-
-/** Props for {@link ComposerBadges}. */
-export interface ComposerBadgesProps {
-  /** The badges, in display order. An empty list closes the band. */
-  badges: readonly ComposerBadge[];
-  /**
-   * What the badges belong to (a session id). A new key shows its badges as
-   * they are, without animating them in or the previous ones out.
-   */
-  resetKey?: string | null;
-  /** Makes badges draggable (and movable with Alt+Shift+←/→); receives every id in the new order, once per move. */
-  onReorder?: (ids: readonly string[]) => void;
-  /** Accessible name of the strip. Default: the `composerBadges` label. */
-  label?: string;
-  /** Extra classes on the band. */
-  className?: string;
-  /** Inline styles on the root element, merged after the component's own. */
-  style?: CSSProperties;
-}
-
-/** A fresh strip's first moments: badges that show up then are part of it, not arrivals. */
-const SETTLE_MS = 250;
-
-const TONE_CLASS: Record<ComposerBadgeTone, string> = {
-  muted: 'text-zg-muted',
-  subtle: 'text-zg-subtle',
-  accent: 'text-zg-accent',
-  success: 'text-zg-success',
-  warn: 'text-zg-warn',
-  danger: 'text-zg-danger',
-};
-
-const HIDDEN = { opacity: 0, scale: 0.86 };
-const SHOWN = { opacity: 1, scale: 1 };
-const LIFTED = { scale: 1.04 };
-const REORDER_KEYS = 'Alt+Shift+ArrowLeft Alt+Shift+ArrowRight';
-
-/**
- * Renders the composer's badge strip (see the module comment). Place it as
- * the first child of the composer's tray ring, before the card.
- *
- * @param props - The {@link ComposerBadgesProps}.
- */
-export function ComposerBadges({
-  badges,
-  resetKey = null,
-  onReorder,
-  label,
-  className = '',
-  style,
-}: ComposerBadgesProps) {
-  const labels = useChatLabels();
-  const open = badges.length > 0;
-  return (
-    <div
-      className={`zg-collapsible zg-composer-badges ${className}`}
-      style={style}
-      data-open={open}
-      // Closed, nothing in it is read or reached, a badge still leaving included.
-      inert={!open || undefined}
-    >
-      <div className="zg-collapsible-inner">
-        {/* Keyed: another conversation's strip is a fresh one, with its own first moments. */}
-        <Strip key={resetKey ?? ''} badges={badges} onReorder={onReorder} label={label ?? labels.composerBadges} />
-      </div>
-    </div>
-  );
-}
-
-function Strip({
-  badges,
-  onReorder,
-  label,
-}: {
-  badges: readonly ComposerBadge[];
-  onReorder: ((ids: readonly string[]) => void) | undefined;
-  label: string;
-}) {
-  const trackRef = useRef<HTMLDivElement>(null);
-  const byId = useMemo(() => new Map(badges.map((badge) => [badge.id, badge])), [badges]);
-  const ids = useMemo(() => badges.map((badge) => badge.id), [badges]);
-  const drag = useTabDrag(ids, (order) => onReorder?.(order));
-  // While a badge is held, one that left meanwhile drops out of the held order.
-  const shown = drag.shown.filter((id) => byId.has(id));
-  const enter = useWithFade('settle');
-  const leave = useWithFade('exit');
-  const slide = useMotionTransition('settle');
-  // State, not a clock read while rendering: the server's render and the hydrating one agree.
-  const [settled, setSettled] = useState(false);
-  useEffect(() => {
-    const timer = setTimeout(() => setSettled(true), SETTLE_MS);
-    return () => clearTimeout(timer);
-  }, []);
-
-  // The badge that asks for the eye, else the open one, stays in view.
-  const focusId = badges.find((b) => b.highlight)?.id ?? badges.find((b) => b.active)?.id ?? null;
-  useEffect(() => {
-    const track = trackRef.current;
-    const el = focusId && track ? badgeElement(track, focusId) : null;
-    if (track && el) reveal(track, el);
-  }, [focusId]);
-
-  // A vertical wheel scrolls the strip sideways while it can move; at an end the page keeps it.
-  useEffect(() => {
-    const track = trackRef.current;
-    if (!track) return undefined;
-    const onWheel = (event: WheelEvent) => {
-      if (event.ctrlKey || Math.abs(event.deltaX) >= Math.abs(event.deltaY)) return;
-      const max = track.scrollWidth - track.clientWidth;
-      const delta = event.deltaMode === 1 ? event.deltaY * 16 : event.deltaY;
-      const next = Math.max(0, Math.min(max, track.scrollLeft + delta));
-      if (max <= 0 || next === track.scrollLeft) return;
-      event.preventDefault();
-      track.scrollLeft = next;
-    };
-    track.addEventListener('wheel', onWheel, { passive: false });
-    return () => track.removeEventListener('wheel', onWheel);
-  }, []);
-
-  const move = onReorder
-    ? (id: string, delta: number): boolean => {
-        const next = moveId(shown, id, delta);
-        if (next.every((x, i) => x === shown[i])) return false;
-        onReorder(next);
-        return true;
-      }
-    : undefined;
-
-  return (
-    <Reorder.Group
-      as="div"
-      axis="x"
-      values={shown}
-      onReorder={drag.onReorder}
-      // Badges slide relative to the strip: the composer moving on the page (content above it
-      // reflowing, the column resizing) never flings them from where they were. A root is only
-      // measured with `layout` on; a layout root itself never animates, it snaps.
-      layout
-      layoutRoot
-      ref={trackRef}
-      role="group"
-      aria-label={label}
-      data-testid="composer-badges"
-      // Badges added from now on make an entrance.
-      data-settled={settled || undefined}
-      className="zg-composer-badges-track zg-no-scrollbar zg-scroll-fade-x"
-    >
-      {/* Not `popLayout`: under a layout root, the re-render that removes a popped badge
-          retargets its siblings' slide mid-flight and they jump the rest of the way. */}
-      <AnimatePresence initial={false}>
-        {shown.map((id) => {
-          const badge = byId.get(id)!;
-          const lifted = drag.dragging === id;
-          return (
-            <Reorder.Item
-              key={id}
-              as="div"
-              value={id}
-              drag={onReorder ? 'x' : false}
-              data-badge={id}
-              data-dragging={lifted || undefined}
-              onDragStart={() => drag.onDragStart(id)}
-              onDragEnd={drag.onDragEnd}
-              onPointerDown={drag.onPointerDown}
-              dragConstraints={drag.bounds}
-              dragElastic={0.08}
-              initial={settled ? HIDDEN : false}
-              animate={SHOWN}
-              exit={{ ...HIDDEN, transition: leave }}
-              transition={{ ...enter, layout: slide }}
-              whileDrag={LIFTED}
-              className="zg-composer-badge-slot"
-            >
-              <Pill
-                badge={badge}
-                onSelect={
-                  badge.onSelect
-                    ? () => {
-                        if (!drag.wasDragged()) badge.onSelect?.();
-                      }
-                    : undefined
-                }
-                onMove={move && ((delta) => move(id, delta))}
-              />
-            </Reorder.Item>
-          );
-        })}
-      </AnimatePresence>
-    </Reorder.Group>
-  );
-}
-
-function Pill({
-  badge,
-  onSelect,
-  onMove,
-}: {
-  badge: ComposerBadge;
-  onSelect: (() => void) | undefined;
-  /** Moves the badge one slot; `false` when it is already at that end. */
-  onMove: ((delta: number) => boolean) | undefined;
-}) {
-  const tone = badge.tone ? TONE_CLASS[badge.tone] : badge.highlight ? TONE_CLASS.warn : '';
-  const body: ReactNode = (
-    <>
-      {badge.loader ? (
-        <span aria-hidden className="zg-arc shrink-0" />
-      ) : (
-        badge.icon && <span aria-hidden className={`${badge.icon} text-zg-ui shrink-0 ${tone}`} />
-      )}
-      <span className="zg-composer-badge-label">{badge.label}</span>
-      {badge.count ? (
-        <CountBadge text={badge.count} tone={badge.countTone ?? (badge.highlight ? 'attention' : 'info')} />
-      ) : null}
-    </>
-  );
-  const state = {
-    'data-highlight': badge.highlight ? '' : undefined,
-    'data-active': badge.active ? '' : undefined,
-  };
-  const pill = onSelect ? (
-    <button
-      type="button"
-      {...state}
-      aria-pressed={badge.active === true}
-      aria-keyshortcuts={onMove ? REORDER_KEYS : undefined}
-      onClick={onSelect}
-      onKeyDown={(event: KeyboardEvent<HTMLButtonElement>) => {
-        if (!onMove || !event.altKey || !event.shiftKey) return;
-        if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return;
-        event.preventDefault();
-        const button = event.currentTarget;
-        // Moving the node drops its focus: give it back once the strip has its new order.
-        if (onMove(event.key === 'ArrowLeft' ? -1 : 1))
-          requestAnimationFrame(() => button.isConnected && button.focus());
-      }}
-      className="zg-composer-badge zg-segment-item zg-press-subtle zg-focus-ring"
-    >
-      {body}
-    </button>
-  ) : (
-    <span {...state} className="zg-composer-badge">
-      {body}
-    </span>
-  );
-  return badge.title ? (
-    <Tooltip label={badge.title} side="top" portal maxWidth={280}>
-      {pill}
-    </Tooltip>
-  ) : (
-    pill
-  );
-}
-
-/** The slot of badge `id` in the strip. */
-function badgeElement(track: HTMLElement, id: string): HTMLElement | null {
-  for (const el of track.querySelectorAll<HTMLElement>('[data-badge]')) if (el.dataset.badge === id) return el;
-  return null;
-}
-
-/** Scroll the strip, and only the strip, so `el` is in view. Smooth at full motion. */
-function reveal(track: HTMLElement, el: HTMLElement): void {
-  const pad = 24;
-  const left = el.offsetLeft;
-  const right = left + el.offsetWidth;
-  const view = track.scrollLeft;
-  const target =
-    left - pad < view ? left - pad : right + pad > view + track.clientWidth ? right + pad - track.clientWidth : null;
-  if (target === null) return;
-  const behavior = currentMotionPrefs().level === 'full' ? 'smooth' : 'auto';
-  if (typeof track.scrollTo === 'function') track.scrollTo({ left: Math.max(0, target), behavior });
-  else track.scrollLeft = Math.max(0, target);
-}

package/src/chat/composer/ComposerControls.tsx

@@ -1,243 +0,0 @@
-/**
- * The composer's controls row, split in its two clusters:
- *
- *   - `ComposerControls` (left, next to `+`): what runs next. Agent, model
- *     and model options, as pickers in ONE `.zg-segment` track, each opening
- *     its own popover (`HostPickers`).
- *   - `ComposerStatusPills` (right, before send): the run chip and the
- *     context orb. Running work is a badge at the top of the composer
- *     (`ConversationBadges`).
- *
- * The agent picker always renders (it picks a default for the next chat
- * without a session). The model and options pills render for a draft too:
- * a draft's options are the last ones used with its model (the remembered
- * knobs), and the session created on send starts with them. The options pill
- * hides when the model has neither a reasoning knob nor feature toggles.
- */
-import { useMemo, type ReactNode } from 'react';
-import type { SessionKnobs } from 'zidane/chat/pure';
-
-import type { ComposerContextStatus, ComposerCostStatus, ComposerSessionView } from '../headless/composer/host-chrome';
-import { composeLiveCost } from '../headless/composer/live-cost';
-import type { ComposerModelOption } from '../headless/composer/models';
-import type { SetDefaultModel } from '../headless/composer/remember-model-pick';
-import { useComposerLabels } from './ComposerHostProvider';
-import { HostContextOrb } from './HostContextOrb';
-import { HostAgentPicker, HostModelOptionsPicker, HostModelPicker, type HostModelImages } from './HostPickers';
-import { ModelOptionsPicker } from './ModelOptionsPicker';
-import { RunStatusChip } from './RunStatusChip';
-import { useDraftKnobs, useModelCatalog, useModelKnobs, useComposerModelName } from './use-composer-stores';
-import { useJoinedRunProgress, useRunAccruedCost, useRunOutputTokens, useRunProgress } from './use-run-meter';
-
-/** What the next new chat starts on, as the app decides it. */
-export interface ComposerDefaults {
-  /** Its folder (`null`: none picked yet). */
-  folder: string | null;
-  /** Its agent. */
-  agentId: string;
-  /** Its model's provider. */
-  providerKey: string | null;
-  /** Its model. */
-  modelId: string | null;
-  /** The stored account its model runs on. */
-  account: string | null;
-  /** The configured effort and options (the space's, else the app's). */
-  knobs?: SessionKnobs;
-}
-
-/** Props for {@link ComposerControls}. */
-export interface ComposerControlsProps {
-  /** The live session, `null` for a draft. */
-  session: ComposerSessionView | null;
-  /** The server the session (or draft) runs on: the pickers list its models. `null`: this computer. */
-  hostId?: string | null;
-  /** The next new chat's defaults. */
-  defaults: ComposerDefaults;
-  /** Sets the next new chat's agent. */
-  onDefaultAgentChange: (id: string) => void;
-  /** Sets the next new chat's model. */
-  onDefaultModel: SetDefaultModel;
-  /** Called once a session write lands (refresh the app's session list). */
-  onCommitted?: () => void | Promise<void>;
-  /** The session's model (its own pick, or the one its context status reports). */
-  modelId: string | null;
-  /** That model's provider. */
-  providerKey: string | null;
-  /** Whether the session's model has a reasoning knob (a draft looks its default model up in the catalog). */
-  activeSupportsReasoning: boolean;
-  /** The feature toggles the session's model declares. */
-  activeModelOptions: readonly ComposerModelOption[];
-  /** The session's enabled options. */
-  activeEnabledOptions: Record<string, boolean>;
-  /** Shown between the agent and the model pills (a retry pill). */
-  retry?: ReactNode;
-  /** The model picker's keyboard shortcut, for its tooltip. */
-  modelShortcut?: ReactNode;
-  /** The model serving the run after a fallback. */
-  serving?: { model: string; provider: string } | null;
-  /** The model picker's Image tab. Absent: none. */
-  images?: HostModelImages | null;
-}
-
-/**
- * The left cluster: agent, model and options pickers (see the header).
- *
- * @param props - The {@link ComposerControlsProps}.
- */
-export function ComposerControls({
-  session,
-  hostId = null,
-  defaults,
-  onDefaultAgentChange,
-  onDefaultModel,
-  onCommitted,
-  modelId,
-  providerKey,
-  activeSupportsReasoning,
-  activeModelOptions,
-  activeEnabledOptions,
-  retry,
-  modelShortcut,
-  serving = null,
-  images = null,
-}: ComposerControlsProps) {
-  const labels = useComposerLabels();
-  const knobs = useModelKnobs();
-  // A server's folder is a path there; a server draft has none yet (its default scope).
-  const catalogCwd = session?.cwd ?? (hostId ? undefined : (defaults.folder ?? undefined));
-
-  // The model steered: the session's, or the default the next new chat launches under.
-  const effectiveModelId = session ? modelId : defaults.modelId;
-  const effectiveProviderKey = session ? providerKey : defaults.providerKey;
-  const effectiveAccount = session ? (session.account ?? null) : defaults.account;
-
-  // One catalog load serves the model popover and the draft's reasoning lookup.
-  const models = useModelCatalog(null, catalogCwd, hostId);
-  const catalog = models.catalog;
-
-  // Unknown / unauthenticated default → nothing: hiding the pill beats a no-op control.
-  const draftEntry = session
-    ? undefined
-    : catalog?.find((e) => e.providerKey === defaults.providerKey && e.modelId === defaults.modelId);
-  const supportsReasoning = session ? activeSupportsReasoning : (draftEntry?.supportsReasoning ?? false);
-  const options = session ? activeModelOptions : (draftEntry?.options ?? []);
-  // A draft's pill: its own pick, else the configured default for the model, else the last used.
-  const remembered = useDraftKnobs(session ? null : defaults.modelId, defaults.knobs);
-  // Only the options this model declares.
-  const draftEnabled = Object.fromEntries(options.filter((o) => remembered.options[o.id]).map((o) => [o.id, true]));
-
-  return (
-    /*
-     * Never wraps: on a tight composer the agent and model names truncate and
-     * the options pill folds to its icon (`zg-chatbox` tiers in styles/composer.css).
-     * Popovers are portaled, so nothing here can clip them.
-     */
-    <div className="zg-chatbox-pickers zg-segment min-w-0 max-w-full">
-      <HostAgentPicker
-        session={session}
-        defaultAgentId={defaults.agentId}
-        onDefaultAgentChange={onDefaultAgentChange}
-        defaultCwd={defaults.folder ?? ''}
-        {...(onCommitted ? { onCommitted } : {})}
-      />
-      {retry}
-      <HostModelPicker
-        session={session}
-        modelId={effectiveModelId}
-        providerKey={effectiveProviderKey}
-        account={effectiveAccount}
-        catalog={catalog}
-        catalogError={models.error}
-        {...(models.retry ? { onRetryCatalog: models.retry } : {})}
-        hostId={hostId}
-        onDefaultModel={onDefaultModel}
-        {...(onCommitted ? { onCommitted } : {})}
-        shortcut={modelShortcut}
-        serving={serving}
-        images={images}
-      />
-      {(supportsReasoning || options.length > 0) &&
-        (session ? (
-          <HostModelOptionsPicker
-            session={session}
-            modelId={modelId}
-            supportsReasoning={supportsReasoning}
-            options={options}
-            enabled={session.modelOptions ?? activeEnabledOptions}
-            {...(onCommitted ? { onCommitted } : {})}
-          />
-        ) : (
-          <ModelOptionsPicker
-            supportsReasoning={supportsReasoning}
-            options={options}
-            effort={remembered.effort}
-            enabled={draftEnabled}
-            onEffort={(level) => knobs.pickDraftEffort(defaults.modelId, level)}
-            onOptions={(next) => knobs.pickDraftOptions(defaults.modelId, next)}
-            title={labels.modelOptionsTitle}
-          />
-        ))}
-    </div>
-  );
-}
-
-/** Props for {@link ComposerStatusPills}. */
-export interface ComposerStatusPillsProps {
-  /** The live session, `null` for a draft (nothing shows). */
-  sessionId: string | null;
-  /** Whether it runs now. */
-  running: boolean;
-  /** Its context status. */
-  contextStatus: ComposerContextStatus | null;
-  /** Its cost as last read; the pills add what the run settled and streams since (`ComposerHost.runs`). */
-  fetchedCost: ComposerCostStatus | null;
-  /** The fraction auto-compaction starts at, `null` when it is off. */
-  autoCompactThreshold?: number | null;
-}
-
-/**
- * The right cluster: the run chip and the context orb. The only part of the
- * conversation that re-renders on the run's progress ticks.
- *
- * @param props - The {@link ComposerStatusPillsProps}.
- */
-export function ComposerStatusPills({
-  sessionId,
-  running,
-  contextStatus,
-  fetchedCost,
-  autoCompactThreshold = null,
-}: ComposerStatusPillsProps) {
-  // A run this window joined mid-way counts from its real start and output.
-  useJoinedRunProgress(sessionId, running);
-  const progress = useRunProgress(sessionId);
-  const accrued = useRunAccruedCost(sessionId);
-  const runOutputTokens = useRunOutputTokens(sessionId);
-  const modelName = useComposerModelName();
-  const streaming = running ? progress : null;
-  const costStatus = useMemo(() => composeLiveCost(fetchedCost, accrued, streaming), [fetchedCost, accrued, streaming]);
-
-  if (!sessionId) return null;
-  if (!contextStatus && !costStatus?.label && !running) return null;
-
-  return (
-    <div className="zg-chatbox-status flex items-center gap-2 min-w-0">
-      <RunStatusChip
-        sessionId={sessionId}
-        running={running}
-        progress={streaming}
-        settledOutputTokens={runOutputTokens}
-        cost={costStatus}
-      />
-      {contextStatus && (
-        <HostContextOrb
-          sessionId={sessionId}
-          status={contextStatus}
-          cost={costStatus}
-          modelName={modelName(contextStatus.modelId)}
-          autoCompactThreshold={autoCompactThreshold}
-        />
-      )}
-    </div>
-  );
-}

package/src/chat/composer/ComposerEditor.tsx

@@ -1,101 +0,0 @@
-/**
- * The composer's Tiptap editor, apart from `Composer` so its ~180 kB load
- * after the first paint (`loadComposerEditor`). It builds the editor and
- * mounts its view; every behaviour stays in `Composer`, reached through
- * `bridge`.
- */
-import Placeholder from '@tiptap/extension-placeholder';
-import { EditorContent, useEditor, type Editor } from '@tiptap/react';
-import StarterKit from '@tiptap/starter-kit';
-import { useLayoutEffect, type RefObject } from 'react';
-
-import { plainTextToDocJson } from './prompt-history-nav';
-import { suggestionExtension } from './suggestion-extension';
-import type { SuggestionSource, SuggestionState } from './suggestions';
-
-/** What the editor reads from its composer: refs to the latest props and state, and the handlers. */
-export interface ComposerEditorBridge {
-  placeholder: RefObject<string>;
-  name: RefObject<string>;
-  mentions: RefObject<SuggestionSource | undefined>;
-  commands: RefObject<SuggestionSource | undefined>;
-  suggest: RefObject<SuggestionState | null>;
-  setSuggest(next: SuggestionState | null): void;
-  keyDown(event: KeyboardEvent): boolean;
-  paste(event: ClipboardEvent): boolean;
-  update(editor: Editor): void;
-}
-
-/** Props for {@link ComposerEditor}. */
-export interface ComposerEditorProps {
-  /** The draft the editor starts with. */
-  text: string;
-  disabled: boolean;
-  autoFocus: boolean;
-  mentions: boolean;
-  commands: boolean;
-  bridge: ComposerEditorBridge;
-  /** Receives the editor once built (and each rebuild). */
-  onEditor(editor: Editor | null): void;
-}
-
-/** Builds the composer's editor and renders its view. */
-export function ComposerEditor({
-  text,
-  disabled,
-  autoFocus,
-  mentions,
-  commands,
-  bridge,
-  onEditor,
-}: ComposerEditorProps) {
-  const editor = useEditor(
-    {
-      immediatelyRender: false,
-      shouldRerenderOnTransaction: false,
-      editable: !disabled,
-      autofocus: autoFocus ? 'end' : false,
-      content: plainTextToDocJson(text),
-      extensions: [
-        // What is typed is what is sent: no input rules, no marks, no blocks but paragraphs.
-        StarterKit.configure({
-          heading: false,
-          horizontalRule: false,
-          bold: false,
-          italic: false,
-          strike: false,
-          underline: false,
-          code: false,
-          codeBlock: false,
-          blockquote: false,
-          bulletList: false,
-          orderedList: false,
-          listItem: false,
-          listKeymap: false,
-          link: false,
-        }),
-        Placeholder.configure({ placeholder: () => bridge.placeholder.current, showOnlyWhenEditable: false }),
-        ...(mentions ? [suggestionExtension('mention', bridge.mentions, bridge.suggest, bridge.setSuggest)] : []),
-        ...(commands ? [suggestionExtension('command', bridge.commands, bridge.suggest, bridge.setSuggest)] : []),
-      ],
-      editorProps: {
-        attributes: () => ({
-          role: 'textbox',
-          'aria-multiline': 'true',
-          'aria-label': bridge.name.current,
-          class: 'zg-composer-editor',
-          'data-testid': 'composer-input',
-        }),
-        handleKeyDown: (_view, event) => bridge.keyDown(event),
-        handlePaste: (_view, event) => bridge.paste(event),
-        // Files land as attachments (the card's drop handler), never as editor content.
-        handleDrop: (_view, event) => Boolean(event.dataTransfer?.files.length),
-      },
-      onUpdate: ({ editor: ed }) => bridge.update(ed),
-    },
-    [mentions, commands],
-  );
-  // Before paint: the composer swaps its placeholder shell for the editor in the same frame.
-  useLayoutEffect(() => onEditor(editor), [editor, onEditor]);
-  return <EditorContent editor={editor} />;
-}