@cosxai/ui 0.24.0 → 1.0.0-alpha.0

package/src/actionbar/types.ts

@@ -1,147 +0,0 @@
-import type { ReactNode } from "react";
-
-// Single item in the action bar. Pages register items via
-// useActionBarItems() — the bar itself reads from the registry
-// and renders them grouped by category. Categories with 2+ items
-// fold into one inline-expandable group head.
-
-export type ActionBarItemVariant = "ghost" | "primary" | "soft";
-
-// Slot anchor — which edge of the bar the item gravitates toward.
-// `leading` (default) keeps existing behavior: items pack from the
-// drag grip outward in registration order. `trailing` pins the item
-// to the right edge with a flex spacer separating it from the
-// leading group, regardless of registration order. Use trailing for
-// system status indicators (sync, connection, identity) that need a
-// stable visual home and shouldn't be shuffled by page items
-// registering after them.
-export type ActionBarItemSlot = "leading" | "trailing";
-
-export interface ActionBarItem {
-  // React key for the rendered button. Stable across rerenders.
-  key: string;
-  label: string;
-  icon?: ReactNode;
-  onClick: () => void;
-  // State indicator — active items render with the accent tone.
-  active?: boolean;
-  // Tooltip / aria-label. Falls back to label.
-  title?: string;
-  // Disable without removing.
-  disabled?: boolean;
-  // Group key — items sharing a category collapse into one
-  // expandable group head when 2+ are present. Single items
-  // render inline. Categories are declared at the provider level.
-  category?: string;
-  // Visual mode. Default ghost.
-  variant?: ActionBarItemVariant;
-  // Optional kbd hint shown beside the label (just visual — the
-  // shortcut is wired by the caller via useKeyboardHotkey).
-  hint?: string;
-  // When inside an expanded group, clicking this item normally
-  // collapses the group afterward. Set true to keep it open
-  // (e.g. for items whose post-click state changes the label
-  // and should stay visible).
-  keepGroupOpenOnClick?: boolean;
-  // Slot anchor. Defaults to `leading`. Trailing items render after
-  // a flex spacer so they pin to the right edge regardless of
-  // registration order — system status indicators belong here.
-  slot?: ActionBarItemSlot;
-  // Marks this item as admin-only. Hidden until the ActionBar's
-  // admin-mode toggle is switched on. The toggle button auto-appears
-  // on the bar whenever at least one registered item has adminOnly=
-  // true; when no consumer registers such items, the toggle stays
-  // hidden and the bar looks exactly as it always did.
-  //
-  // Use for elevated-privilege actions that would confuse regular
-  // users (version history, retry render, delete forever, etc.).
-  // Consumer decides eligibility upstream — typically by only
-  // registering the item when the caller has `capabilities.manage`
-  // (or an equivalent gate) === true. The kit does not check
-  // permissions; it only handles the toggle UX.
-  adminOnly?: boolean;
-  // Marks a normally-visible item as hidden when admin mode is on.
-  // Symmetric counterpart to `adminOnly`: pages that want an
-  // exclusive "different toolset" UX (e.g. Share disappears in favour
-  // of Manage Share + Activity + History) mark their regular items
-  // hiddenInAdmin=true so they clear when the toggle flips on.
-  // Pages that want additive layering (regular items stay + admin
-  // items appear alongside) just leave this unset.
-  //
-  // Per-item because different pages within the same app want
-  // different behaviour: block_doc viewer wants exclusive; a
-  // hypothetical PDF admin surface might want additive.
-  hiddenInAdmin?: boolean;
-}
-
-// Category definition — declared at the provider level. Drives
-// the group head's label + icon.
-export interface ActionBarCategory {
-  label: string;
-  icon?: ReactNode;
-}
-
-export type ActionBarCategories = Record<string, ActionBarCategory>;
-
-export interface ActionBarSource {
-  sourceKey: string;
-  items: ActionBarItem[];
-}
-
-// Status dot — bar-intrinsic chrome rendered at the right edge,
-// mirroring the left-edge drag grip. Distinct from `ActionBarItem`
-// (which is page-level content registered through the items
-// registry): a status dot is a fixed system affordance —
-// connection / sync / identity health. The grip on the left says
-// "you can move this thing"; the status dot on the right says
-// "here's how the system is doing."
-//
-// Visual: a small coloured dot, optionally pulsing. Hover shows the
-// title as a native tooltip. Click fires `onClick` — the bar owns
-// no popover behaviour; consumers render their own popover anchored
-// to body / wherever fits their UX.
-//
-// Registered via `useActionBarStatusDot()`. One source of truth at
-// any time (last call wins). Pass `null` to clear.
-export interface ActionBarStatusDot {
-  // Colour of the dot. Any CSS colour string — typically a token
-  // like `var(--ck-status-success)`. The bar applies no defaulting,
-  // so omit the entry (pass null to the hook) to render no dot.
-  color: string;
-  // Hover tooltip + aria-label. Falls back to "Status".
-  title?: string;
-  // Click handler. When omitted the dot renders as a non-interactive
-  // span (no focus ring, no cursor change, no role=button).
-  onClick?: () => void;
-  // When true, the dot pulses (CSS animation). Use sparingly —
-  // pulsing reads as attention-grabbing.
-  pulse?: boolean;
-}
-
-// Registered via `useActionBarPanel()` — the bar-intrinsic popover
-// slot (design#13). The BAR owns positioning (docked above itself,
-// following drag natively) and the chrome themes own the panel's
-// visual identity via `.ck-actionbar-panel`; the consumer owns only
-// the content subtree. One panel at a time (last call wins).
-export interface ActionBarPanel {
-  // Controlled visibility. The bar calls onOpenChange(false) on
-  // outside-click and Escape; the consumer toggles open from its
-  // own affordance (typically the status dot's onClick).
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  // Content subtree. Portalled into the themed panel container the
-  // bar renders — it stays in the CONSUMER's React tree (fresh JSX
-  // identity per render is fine; content never flows through
-  // context state, which would re-render-loop).
-  content: ReactNode;
-  // Panel width in px. Default 320; always viewport-clamped.
-  width?: number;
-  // aria-label for the panel region. Default "Panel".
-  ariaLabel?: string;
-}
-
-// What the context actually stores for the panel slot: the config
-// minus `content`. Only stable primitives + the onOpenChange
-// callback go through context state, so the registration effect
-// re-runs on real changes only.
-export type ActionBarPanelMeta = Omit<ActionBarPanel, "content">;

package/src/actionbar/useActionBarItems.ts

@@ -1,60 +0,0 @@
-import { useContext, useEffect } from "react";
-import { ActionBarContext } from "./actionbar-context";
-import type { ActionBarItem } from "./types";
-
-// Register a set of items into the global action-bar registry.
-// Auto-unregisters on unmount + on sourceKey change.
-//
-// **Pass a `useMemo`'d array.** The effect re-registers whenever
-// the array identity changes; the provider's `register()` then
-// dedups by item-by-item identity, so a fresh array with identical
-// item refs is cheap (state stays === and no re-render fires) but
-// a fresh array with NEW item objects (e.g. consumers whose
-// onClick closures captured updated state) does re-register —
-// downstream renders pick up the fresh handlers.
-//
-// Inline-array consumers (`useActionBarItems(key, [{...}])`)
-// will allocate new items every render and loop infinitely
-// through `register → setState → re-render → register`. The
-// useMemo on the caller side is what keeps that loop bounded
-// to "items whose deps actually changed".
-//
-// Previous versions wrapped items in a local `useMemo` keyed by
-// `[items.length, items.map(i => i.key).join('|')]`. That gate
-// suppressed identity updates whenever the keys + length stayed
-// stable, which is precisely the case for a selection-mode
-// toolbar whose buttons are fixed but whose onClicks close over
-// changing state — they ended up registered ONCE with the first
-// render's closures and never refreshed, shipping stale state to
-// every subsequent click. The gate is gone; the provider's
-// shallow item-identity dedup is the single source of truth.
-//
-// **Important**: the useEffect deps below intentionally do NOT
-// include the ctx object itself — only its stable function refs
-// (register/unregister are useCallback'd in the provider).
-// Including ctx would cause an infinite render loop: register
-// mutates provider state → provider's value memo recomputes →
-// ctx ref changes → effect re-runs → cleanup unregisters →
-// state mutates again → ctx changes → loop. Manifests as the
-// main thread saturating and event clicks never reaching the
-// router. Same fix applies in useCommandSource.
-
-export function useActionBarItems(sourceKey: string, items: ActionBarItem[]) {
-  const ctx = useContext(ActionBarContext);
-  if (!ctx) {
-    throw new Error("useActionBarItems must be used within <ActionBarProvider>");
-  }
-  const { register, unregister } = ctx;
-  useEffect(() => {
-    register(sourceKey, items);
-    return () => unregister(sourceKey);
-  }, [register, unregister, sourceKey, items]);
-}
-
-export function useActionBarItemsContext() {
-  const ctx = useContext(ActionBarContext);
-  if (!ctx) {
-    throw new Error("Action bar context not found");
-  }
-  return ctx;
-}

package/src/actionbar/useActionBarMode.ts

@@ -1,144 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useActionBarItems } from "./useActionBarItems";
-import type { ActionBarItem } from "./types";
-
-// useActionBarMode — one hook that manages a small set of named
-// "modes" (each with its own item list) + registers the active mode's
-// items into the ActionBar registry. Consumer combines this with
-// <ActionBarModeHandle> to give privileged users a peek-out affordance
-// that flips between the modes.
-//
-// Design intent (M4.5 block_doc surface):
-//   - Default mode: standard viewer actions (comment / download / share)
-//   - Manage mode: admin-only shortcuts (preview draft / manage share /
-//     view activity), gated behind `capabilities.manage === true`
-//   - Draft mode (optional third): appears once the user enters draft
-//     preview; distinct action set (publish / discard / raw JSON /
-//     return)
-//
-// The mode name is the ActionBar's source key, so switching modes
-// unregisters the previous set and registers the new set atomically
-// (useActionBarItems handles the cleanup).
-//
-// State persistence: pass `storageKey` for localStorage-backed
-// stickiness across reloads. Nil-safe when window is unavailable
-// (SSR).
-
-export type ActionBarModeConfig<K extends string> = {
-  [key in K]: ActionBarItem[];
-};
-
-export interface UseActionBarModeOptions<K extends string> {
-  /**
-   * Map of mode keys → items. Each mode key becomes the source key
-   * passed to useActionBarItems, so it must be a stable string
-   * (e.g. "viewer", "manage") — mode registrations will not
-   * "cross-contaminate" the item set of another mode.
-   */
-  modes: ActionBarModeConfig<K>;
-  /**
-   * Which mode to start in. Overridden by localStorage when
-   * `storageKey` is set AND localStorage has a valid value.
-   */
-  defaultMode: K;
-  /**
-   * Optional localStorage key. When set, the current mode is
-   * persisted + rehydrated across reloads.
-   */
-  storageKey?: string | undefined;
-}
-
-export interface UseActionBarModeResult<K extends string> {
-  /** The currently active mode key. */
-  mode: K;
-  /** Set the mode explicitly (typically wired to the mode Handle). */
-  setMode: (next: K) => void;
-  /**
-   * Toggle between the FIRST two modes in the config's iteration
-   * order. Convenience for the common two-mode case; a
-   * three-mode consumer uses setMode directly.
-   */
-  toggle: () => void;
-  /**
-   * All configured mode keys in registration order — useful for
-   * building a cycle-through-modes button.
-   */
-  allModes: readonly K[];
-}
-
-function loadPersistedMode<K extends string>(
-  storageKey: string,
-  allModes: readonly K[],
-): K | null {
-  if (typeof window === "undefined") return null;
-  try {
-    const raw = window.localStorage.getItem(storageKey);
-    if (raw && (allModes as readonly string[]).includes(raw)) {
-      return raw as K;
-    }
-  } catch {
-    /* ignore */
-  }
-  return null;
-}
-
-function persistMode(storageKey: string, mode: string) {
-  if (typeof window === "undefined") return;
-  try {
-    window.localStorage.setItem(storageKey, mode);
-  } catch {
-    /* ignore */
-  }
-}
-
-export function useActionBarMode<K extends string>(
-  opts: UseActionBarModeOptions<K>,
-): UseActionBarModeResult<K> {
-  const { modes, defaultMode, storageKey } = opts;
-  const allModes = useMemo(() => Object.keys(modes) as K[], [modes]);
-  const [mode, setModeState] = useState<K>(() => {
-    if (storageKey) {
-      const persisted = loadPersistedMode<K>(storageKey, allModes);
-      if (persisted) return persisted;
-    }
-    return defaultMode;
-  });
-
-  // If the modes config changes (dev / hot reload) so the current
-  // mode key is no longer valid, drop back to the default.
-  useEffect(() => {
-    if (!(allModes as readonly string[]).includes(mode)) {
-      setModeState(defaultMode);
-    }
-  }, [mode, allModes, defaultMode]);
-
-  const setMode = useCallback(
-    (next: K) => {
-      setModeState(next);
-      if (storageKey) persistMode(storageKey, next);
-    },
-    [storageKey],
-  );
-
-  const toggle = useCallback(() => {
-    if (allModes.length < 2) return;
-    const idx = allModes.indexOf(mode);
-    // Cycle to the NEXT mode; wrap-around handles both the "toggle
-    // between 2" and "cycle through 3+" cases.
-    const nextIdx = (idx + 1) % allModes.length;
-    const next = allModes[nextIdx];
-    if (next !== undefined) {
-      setMode(next);
-    }
-  }, [allModes, mode, setMode]);
-
-  // Register the active mode's items with the ActionBar. Uses the
-  // mode key as the source key, so switching modes atomically
-  // unregisters the previous set. Items themselves must be stable
-  // (useMemo'd) — the ActionBar deduplicates by reference, so passing
-  // `modes[mode]` re-uses the caller's memoized array.
-  const activeItems = modes[mode];
-  useActionBarItems(mode, activeItems);
-
-  return { mode, setMode, toggle, allModes };
-}

package/src/actionbar/useActionBarPanel.ts

@@ -1,56 +0,0 @@
-import { useContext, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { ActionBarContext } from "./actionbar-context";
-import type { ActionBarPanel } from "./types";
-import type { ReactNode } from "react";
-
-// Push a panel config into the action bar's popover slot (design#13).
-//
-// The BAR owns positioning: docked above itself, centered, following
-// drag natively (it renders the panel inside its own fixed-position
-// root — no polling, no rect maths in the consumer) and viewport-
-// clamped at the edges. The chrome themes own the panel's visual
-// identity via `.ck-actionbar-panel`; consumers must NOT paint their
-// own background/border/shadow. The consumer owns only the content
-// subtree and the `open` state.
-//
-// RETURNS a ReactNode the consumer MUST render (a portal into the
-// bar's panel container, or null while closed). Content stays in the
-// consumer's own React tree — a fresh JSX identity every render is
-// fine because only the meta (open/onOpenChange/width/ariaLabel)
-// flows through context state; content in state would re-render-loop
-// (setPanel → context change → consumer re-render → new JSX →
-// setPanel → …).
-//
-// The bar calls `onOpenChange(false)` on outside-click and Escape.
-// Pass `null` to clear (also cleared automatically on unmount).
-// Last call wins — one panel at a time, same contract as the status
-// dot.
-export function useActionBarPanel(config: ActionBarPanel | null): ReactNode {
-  const ctx = useContext(ActionBarContext);
-  if (!ctx) {
-    throw new Error("useActionBarPanel must be used within <ActionBarProvider>");
-  }
-  const { setPanel, panelHost } = ctx;
-  const open = config?.open;
-  const onOpenChange = config?.onOpenChange;
-  const width = config?.width;
-  const ariaLabel = config?.ariaLabel;
-  useEffect(() => {
-    if (open === undefined || onOpenChange === undefined) {
-      setPanel(null);
-      return;
-    }
-    setPanel({
-      open,
-      onOpenChange,
-      ...(width !== undefined ? { width } : {}),
-      ...(ariaLabel !== undefined ? { ariaLabel } : {}),
-    });
-    return () => {
-      setPanel(null);
-    };
-  }, [setPanel, open, onOpenChange, width, ariaLabel]);
-  if (!config?.open || panelHost === null || config.content == null) return null;
-  return createPortal(config.content, panelHost);
-}

package/src/actionbar/useActionBarStatusDot.ts

@@ -1,49 +0,0 @@
-import { useContext, useEffect } from "react";
-import { ActionBarContext } from "./actionbar-context";
-import type { ActionBarStatusDot } from "./types";
-
-// Push a status-dot config into the action bar's right-edge slot.
-// The bar renders the dot as bar-intrinsic chrome (mirroring the
-// left-edge drag grip), separate from the items registry.
-//
-// Pass `null` to clear. Last call wins — there's no source-key
-// fan-out as with items, because the status dot is a single
-// system-level affordance (sync / connection / identity) and
-// stacking multiple makes no UX sense.
-//
-// On unmount, the dot is cleared automatically.
-//
-// **Important**: pass a stable config object (typically via
-// `useMemo`), or omit fields you don't change between renders.
-// The effect re-runs when individual fields change — colour
-// transitions or pulse toggles re-render the dot but don't thrash
-// the bar.
-export function useActionBarStatusDot(config: ActionBarStatusDot | null) {
-  const ctx = useContext(ActionBarContext);
-  if (!ctx) {
-    throw new Error("useActionBarStatusDot must be used within <ActionBarProvider>");
-  }
-  const { setStatusDot } = ctx;
-  // Project config to primitive deps so a fresh-but-equivalent
-  // config object doesn't trigger thrash. onClick identity changes
-  // are tolerated through a manual ref capture in the bar render.
-  const color = config?.color;
-  const title = config?.title;
-  const onClick = config?.onClick;
-  const pulse = config?.pulse;
-  useEffect(() => {
-    if (color === undefined) {
-      setStatusDot(null);
-      return;
-    }
-    setStatusDot({
-      color,
-      ...(title !== undefined ? { title } : {}),
-      ...(onClick !== undefined ? { onClick } : {}),
-      ...(pulse !== undefined ? { pulse } : {}),
-    });
-    return () => {
-      setStatusDot(null);
-    };
-  }, [setStatusDot, color, title, onClick, pulse]);
-}

package/src/actionbar/useActionBarToast.ts

@@ -1,33 +0,0 @@
-import { useContext, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { ActionBarContext } from "./actionbar-context";
-import type { ReactNode } from "react";
-
-// Push a transient bubble into the bar's toast slot — rendered above
-// the bar (following it when dragged), themed via
-// `.ck-actionbar-toast`, suppressed while the panel is open. The
-// CONSUMER owns the lifetime: pass the node to show, `null` to hide
-// (typically driven by a setTimeout in the consumer).
-//
-// RETURNS a ReactNode the consumer MUST render (a portal into the
-// bar's toast container, or null while hidden). Same portal-host
-// contract as useActionBarPanel: only the boolean "active" flag goes
-// through context state, so a fresh JSX identity per render can't
-// re-render-loop. Pairs with useActionBarPanel for the notification-
-// center pattern (design#13).
-export function useActionBarToast(content: ReactNode | null): ReactNode {
-  const ctx = useContext(ActionBarContext);
-  if (!ctx) {
-    throw new Error("useActionBarToast must be used within <ActionBarProvider>");
-  }
-  const { setToastActive, toastHost } = ctx;
-  const active = content != null;
-  useEffect(() => {
-    setToastActive(active);
-    return () => {
-      setToastActive(false);
-    };
-  }, [setToastActive, active]);
-  if (!active || toastHost === null) return null;
-  return createPortal(content, toastHost);
-}

package/src/ambient/AmbientBackdrop.tsx

@@ -1,74 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Standalone ambient-mesh backdrop primitive. The ambient chrome
-// applies its mesh on `body` automatically, so consumers don't
-// usually need this. Use it when you want an ambient look INSIDE
-// a single section (a hero banner, a preview region) without
-// flipping the whole app's chrome.
-
-export interface AmbientBackdropProps {
-  children?: ReactNode;
-  // Use light variant tints instead of dark. Default auto-detects
-  // via prefers-color-scheme.
-  variant?: "dark" | "light";
-  // Hide the noise overlay. Default false.
-  noise?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const DARK_BG = `
-  radial-gradient(ellipse at 18% 22%, #3A2A66 0%, transparent 55%),
-  radial-gradient(ellipse at 82% 70%, #2A1E50 0%, transparent 52%),
-  radial-gradient(ellipse at 50% 110%, #4A2870 0%, transparent 50%),
-  #1A1525
-`;
-
-const LIGHT_BG = `
-  radial-gradient(ellipse at 20% 24%, #FCEFE5 0%, transparent 55%),
-  radial-gradient(ellipse at 78% 70%, #EFEAF8 0%, transparent 52%),
-  radial-gradient(ellipse at 50% 110%, #FFE8DC 0%, transparent 50%),
-  #F6F4F0
-`;
-
-export function AmbientBackdrop({
-  children,
-  variant,
-  noise,
-  className,
-  style,
-}: AmbientBackdropProps) {
-  // Auto-pick from prefers-color-scheme when not explicit. SSR-
-  // safe: defaults to dark, the canonical Superlist look.
-  const isDark =
-    variant === "dark" ||
-    (variant === undefined &&
-      (typeof window === "undefined" ||
-        window.matchMedia?.("(prefers-color-scheme: dark)").matches));
-  return (
-    <div
-      className={className}
-      style={{
-        position: "relative",
-        background: isDark ? DARK_BG : LIGHT_BG,
-        ...style,
-      }}
-    >
-      {noise && (
-        <div
-          aria-hidden
-          style={{
-            position: "absolute",
-            inset: 0,
-            pointerEvents: "none",
-            opacity: 0.025,
-            backgroundImage:
-              "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>\")",
-            mixBlendMode: "overlay",
-          }}
-        />
-      )}
-      {children}
-    </div>
-  );
-}

package/src/ambient/CommandInput.tsx

@@ -1,107 +0,0 @@
-import { useState, type CSSProperties, type FormEvent } from "react";
-
-// The signature ambient component — floating AI / command pill
-// at the bottom of the main content. Heavily blurred glass
-// backdrop, gradient avatar on the left (signals "AI / live"),
-// and a thin Superbar gradient line above it that doubles as a
-// section divider. The most distinctive moment in the design
-// language.
-//
-// Works under any chrome — only really "reads" under
-// ambient because the glass + Superbar accent are the defining
-// gestures. Under other chromes the pill is just a styled
-// input + divider.
-
-export interface CommandInputProps {
-  placeholder?: string;
-  onSubmit?: (value: string) => void;
-  // Width cap on the pill itself. Default 520 px (Superlist-ish).
-  maxWidth?: number;
-  // Hide the Superbar divider above. Default false.
-  hideDivider?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export function CommandInput({
-  placeholder = "Ask anything…",
-  onSubmit,
-  maxWidth = 520,
-  hideDivider = false,
-  className,
-  style,
-}: CommandInputProps) {
-  const [value, setValue] = useState("");
-  const submit = (e: FormEvent) => {
-    e.preventDefault();
-    if (!value.trim()) return;
-    onSubmit?.(value.trim());
-    setValue("");
-  };
-
-  return (
-    <div className={className} style={{ width: "100%", ...style }}>
-      {!hideDivider && (
-        <div
-          aria-hidden
-          style={{
-            height: 1,
-            background: "var(--ck-superbar)",
-            opacity: 0.7,
-            margin: "0 auto 20px",
-            maxWidth,
-          }}
-        />
-      )}
-      <form
-        onSubmit={submit}
-        style={{
-          maxWidth,
-          margin: "0 auto",
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          padding: "8px 12px",
-          background: "var(--ck-bg-sidebar, rgba(20,20,28,0.55))",
-          border: "1px solid var(--ck-border-subtle, rgba(255,255,255,0.08))",
-          borderRadius: 999,
-          backdropFilter: "var(--ck-blur-overlay, blur(40px) saturate(180%))",
-          WebkitBackdropFilter: "var(--ck-blur-overlay, blur(40px) saturate(180%))",
-          boxShadow: "var(--ck-shadow-2)",
-        }}
-      >
-        {/* Gradient avatar — coral → violet → blue. Marks the
-            pill as "AI / live", regardless of the consumer's
-            brand accent. */}
-        <span
-          aria-hidden
-          style={{
-            width: 24,
-            height: 24,
-            borderRadius: "50%",
-            background: "var(--ck-superbar)",
-            flexShrink: 0,
-            boxShadow: "0 0 12px color-mix(in srgb, #B66EFF 40%, transparent)",
-          }}
-        />
-        <input
-          type="text"
-          value={value}
-          onChange={(e) => setValue(e.target.value)}
-          placeholder={placeholder}
-          style={{
-            flex: 1,
-            minWidth: 0,
-            height: 32,
-            padding: 0,
-            border: "none",
-            outline: "none",
-            background: "transparent",
-            color: "var(--ck-text-primary)",
-            font: "400 14px/1 var(--ck-font-sans)",
-          }}
-        />
-      </form>
-    </div>
-  );
-}