zidane-ui 9.0.4 → 9.1.3

package/src/onboarding/testing/contract.ts

@@ -1,472 +0,0 @@
-/**
- * What every `OnboardingHost` implementation does alike, as a vitest suite: the in-memory fixture
- * (`createFixtureOnboardingHost`), zidane-server (`createServerOnboardingHost`), the desktop app's IPC
- * host.
- *
- * An implementation's test calls {@link describeOnboardingHostContract} with a harness factory. The
- * contract hands it an {@link OnboardingHostContractBackend}: the providers, settings, models,
- * installed connectors, extensions and skills the backend holds (read at each listing), and the
- * calls the backend makes when a key, a sign-in, an install or the final write reaches it. The
- * harness builds the host over a backend that does that (a fake WebSocket server, a mocked IPC
- * bridge) for a `full` run. The capabilities list says which optional members the host offers: the
- * suite checks that the others are undefined and skips what needs them.
- *
- * A backend's browser sign-in shows where to sign in, then finishes when the user answers it
- * (`submit`), or, for a flow that takes no typed answer, when the harness says the browser came back
- * (`finishSignIn`). A provider key listed in `failing` refuses its key, its sign-in and its test.
- *
- *   describeOnboardingHostContract('createServerOnboardingHost', (backend) => ({ host }), [
- *     'providers.saveKey', 'providers.signIn', 'providers.test', 'providers.models',
- *   ]);
- */
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import type { Settings } from 'zidane/chat';
-import type {
-  OnboardingImportPreview,
-  OnboardingImportSelection,
-  OnboardingProvider,
-  OnboardingResult,
-  OnboardingSignInState,
-  SkillSourceListing,
-} from 'zidane/chat/pure';
-
-import type { OnboardingHost, SignInFlow } from '../headless/host';
-
-/** An optional `OnboardingHost` member, by its path. */
-export type OnboardingHostCapability =
-  | 'providers.saveKey'
-  | 'providers.signIn'
-  | 'providers.test'
-  | 'providers.models'
-  | 'imports'
-  | 'connectors'
-  | 'connectors.signIn'
-  | 'connectors.githubToken'
-  | 'skills'
-  | 'skills.images'
-  | 'extensions'
-  | 'themes'
-  | 'appIcons';
-
-const CAPABILITIES: readonly OnboardingHostCapability[] = [
-  'providers.saveKey',
-  'providers.signIn',
-  'providers.test',
-  'providers.models',
-  'imports',
-  'connectors',
-  'connectors.signIn',
-  'connectors.githubToken',
-  'skills',
-  'skills.images',
-  'extensions',
-  'themes',
-  'appIcons',
-];
-
-/** A model the backend serves, as its listing names it. */
-export interface OnboardingContractModel {
-  /** Model id. */
-  id: string;
-  /** Display name. */
-  label: string;
-  /** It takes a reasoning effort. */
-  reasoning: boolean;
-}
-
-/** What the backend behind the host holds, and what it records. */
-export interface OnboardingHostContractBackend {
-  /** The providers and their status. Read at each listing; a saved key or a finished sign-in marks one ready. */
-  providers: OnboardingProvider[];
-  /** The stored settings: what the run starts from. */
-  settings: Partial<Settings>;
-  /** The models each provider serves, by provider key. */
-  models: Record<string, OnboardingContractModel[]>;
-  /** Provider keys whose key, sign-in and test fail. */
-  failing: string[];
-  /** The ids of the connectors already installed. A connector added reaches {@link connectorAdded}. */
-  connectors: string[];
-  /** The names of the native extensions installed. */
-  extensions: string[];
-  /** The names of the skills installed. */
-  skills: string[];
-  /** The skill sources a browse lists, by what the user typed. */
-  skillListings: Readonly<Record<string, SkillSourceListing>>;
-  /** What an install reports while it runs, one line at a time. */
-  installProgress: string[];
-  /** What an import from Claude Code brings over. */
-  importPreview: OnboardingImportPreview;
-  /** The GitHub token the backend already knows. */
-  githubToken: string | null;
-  /** The backend calls this when a key reaches it: the provider turns ready. */
-  keySaved(key: string, value: string | undefined): void;
-  /** The backend calls this when a browser sign-in of a provider finishes: the provider turns ready. */
-  signedIn(key: string): void;
-  /** The backend calls this when a connector's server is added: its id joins {@link connectors}. */
-  connectorAdded(id: string): void;
-  /** The backend calls this when a native extension is installed: its name joins {@link extensions}. */
-  extensionInstalled(name: string): void;
-  /** The backend calls this when skills of a source are installed: their names join {@link skills}. */
-  skillsInstalled(source: string, rels: readonly string[]): void;
-  /** The backend calls this when an import runs. */
-  imported(selection: OnboardingImportSelection): void;
-  /** The backend calls this with the settings a finished run writes. */
-  committed(settings: Partial<Settings>): void;
-}
-
-/** A host built over a contract backend, and what its backend can push. */
-export interface OnboardingHostHarness {
-  /** The host under test. */
-  host: OnboardingHost;
-  /** The browser came back for a sign-in that takes no typed answer. Absent: every sign-in the host offers takes `submit`. */
-  finishSignIn?(id: string): void;
-  /** Stops sign-ins, listeners and connections after each test. */
-  dispose?(): void;
-}
-
-/** Builds a fresh host (and its backend) for one test. */
-export type OnboardingHostHarnessFactory = (
-  backend: OnboardingHostContractBackend,
-) => OnboardingHostHarness | Promise<OnboardingHostHarness>;
-
-const provider = (key: string, label: string, ready: boolean): OnboardingProvider => ({
-  key,
-  label,
-  featured: true,
-  oauth: true,
-  apiKey: true,
-  customFields: [],
-  ready,
-  ...(ready ? { source: 'apikey' as const } : {}),
-});
-
-/** A connector without auth (`deepwiki`), one that signs in (`linear`), and a native extension (`goal`). */
-const CONNECTOR = 'deepwiki';
-const OAUTH_CONNECTOR = 'linear';
-const EXTENSION = 'goal';
-const SKILL_SOURCE = 'acme/skills';
-
-const skill = (name: string) => ({
-  name,
-  description: `The ${name} skill.`,
-  path: `skills/${name}`,
-  install: { source: SKILL_SOURCE, rel: `skills/${name}` },
-});
-
-const SKILL_LISTINGS: Readonly<Record<string, SkillSourceListing>> = {
-  [SKILL_SOURCE]: {
-    input: SKILL_SOURCE,
-    source: {
-      kind: 'github',
-      label: SKILL_SOURCE,
-      owner: 'acme',
-      repo: 'skills',
-      ref: 'main',
-      url: `https://github.com/${SKILL_SOURCE}`,
-    },
-    skills: [skill('tdd'), skill('review')],
-  },
-};
-
-const IMPORT_PREVIEW: OnboardingImportPreview = {
-  sessions: { project: 2, all: 5 },
-  mcps: { copy: ['github'], skip: [] },
-  skills: { copy: ['tdd'], skip: [] },
-  commands: { copy: [], skip: [] },
-  agents: { copy: [], skip: [] },
-  notes: [],
-};
-
-function contractBackend() {
-  const commits: Partial<Settings>[] = [];
-  const markReady = (key: string, source: OnboardingProvider['source']) => {
-    backend.providers = backend.providers.map((p) => (p.key === key ? { ...p, ready: true, source } : p));
-  };
-  const backend: OnboardingHostContractBackend = {
-    providers: [provider('anthropic', 'Anthropic', true), provider('openai', 'OpenAI', false)],
-    settings: { approvalMode: 'ask' },
-    models: {
-      anthropic: [
-        { id: 'claude-a', label: 'Claude A', reasoning: true },
-        { id: 'claude-b', label: 'Claude B', reasoning: false },
-      ],
-      openai: [{ id: 'gpt-a', label: 'GPT A', reasoning: false }],
-    },
-    failing: ['refused'],
-    connectors: [],
-    extensions: [],
-    skills: [],
-    skillListings: SKILL_LISTINGS,
-    installProgress: ['fetching…'],
-    importPreview: IMPORT_PREVIEW,
-    githubToken: 'gho_known',
-    keySaved: (key, value) => markReady(key, value ? 'apikey' : 'configured'),
-    signedIn: (key) => markReady(key, 'oauth'),
-    connectorAdded: (id) => {
-      backend.connectors = [...backend.connectors.filter((c) => c !== id), id];
-    },
-    extensionInstalled: (name) => {
-      backend.extensions = [...backend.extensions.filter((e) => e !== name), name];
-    },
-    skillsInstalled: (source, rels) => {
-      const names = (backend.skillListings[source]?.skills ?? [])
-        .filter((skill) => rels.includes(skill.install.rel))
-        .map((skill) => skill.name);
-      backend.skills = [...backend.skills.filter((s) => !names.includes(s)), ...names];
-    },
-    imported: () => {},
-    committed: (settings) => {
-      commits.push(settings);
-    },
-  };
-  // The provider `failing` names, offered like the others.
-  backend.providers.push(provider('refused', 'Refused', false));
-  return { backend, commits };
-}
-
-const waitFor = <T>(check: () => T) => vi.waitFor(check, { timeout: 3000, interval: 2 });
-const WAITING = new Set<OnboardingSignInState['kind']>(['url', 'device', 'prompt']);
-
-/**
- * Declares the shared `OnboardingHost` suite for one implementation.
- *
- * @param name - The implementation's name, shown in the suite title.
- * @param makeHarness - Builds a fresh host over a backend that holds and records what it is given, once per test.
- * @param capabilities - The optional members the host offers. Every other optional member must be undefined.
- */
-export function describeOnboardingHostContract(
-  name: string,
-  makeHarness: OnboardingHostHarnessFactory,
-  capabilities: readonly OnboardingHostCapability[],
-): void {
-  const has = (...needed: OnboardingHostCapability[]) => needed.every((c) => capabilities.includes(c));
-
-  describe(`OnboardingHost contract: ${name}`, () => {
-    const cleanup: (() => void)[] = [];
-    afterEach(() => {
-      for (const done of cleanup.splice(0).reverse()) done();
-    });
-
-    /** Builds the host and waits until it has detected: the wizard shows nothing before. */
-    const setup = async () => {
-      const recorded = contractBackend();
-      const harness = await makeHarness(recorded.backend);
-      cleanup.push(() => harness.dispose?.());
-      cleanup.push(harness.host.context.subscribe(() => {}));
-      cleanup.push(harness.host.providers.list.subscribe(() => {}));
-      await waitFor(() => expect(harness.host.context.get()).not.toBeNull());
-      return { ...recorded, ...harness };
-    };
-
-    const readyOf = (host: OnboardingHost, key: string) => host.providers.list.get().find((p) => p.key === key)?.ready;
-
-    /** Answers a sign-in the way its user would: types the code, or comes back from the browser. */
-    const answer = async (flow: SignInFlow, id: string, finishSignIn?: (id: string) => void) => {
-      await waitFor(() => expect(WAITING.has(flow.state.get().kind)).toBe(true));
-      if (flow.submit) flow.submit('code-ok');
-      else finishSignIn?.(id);
-    };
-
-    it('offers exactly its capabilities; the members it leaves out are undefined', async () => {
-      const { host } = await setup();
-      expect(typeof host.commit).toBe('function');
-      expect(typeof host.providers.list.get).toBe('function');
-      const record = (value: unknown) => value as Record<string, unknown> | undefined;
-      const member = (c: OnboardingHostCapability) => {
-        const [group, key] = c.split('.') as [string, string | undefined];
-        const parent = record((host as unknown as Record<string, unknown>)[group]);
-        return key ? record(parent)?.[key] : parent;
-      };
-      for (const capability of CAPABILITIES) {
-        const value = member(capability);
-        if (!has(capability)) expect(value, capability).toBeUndefined();
-        else expect(value, capability).toBeDefined();
-      }
-    });
-
-    it('starts a full run from what the backend found and stores', async () => {
-      const { host, backend } = await setup();
-      const setupNow = host.context.get()!;
-      expect(setupNow.mode).toBe('full');
-      expect(setupNow.detection.providers.map((p) => p.key)).toEqual(backend.providers.map((p) => p.key));
-      expect(setupNow.settings).toEqual(backend.settings);
-    });
-
-    it("lists the backend's providers with their status", async () => {
-      const { host } = await setup();
-      await waitFor(() =>
-        expect(host.providers.list.get().map((p) => [p.key, p.label, p.ready])).toEqual([
-          ['anthropic', 'Anthropic', true],
-          ['openai', 'OpenAI', false],
-          ['refused', 'Refused', false],
-        ]),
-      );
-    });
-
-    it('writes the settings a finished run decided', async () => {
-      const { host, commits } = await setup();
-      const result: OnboardingResult = {
-        mode: 'full',
-        surface: host.context.get()!.surface,
-        settings: { set: { approvalMode: 'off' }, reset: [] },
-        records: {},
-      };
-      await host.commit(result);
-      await waitFor(() => expect(commits).toEqual([{ approvalMode: 'off' }]));
-    });
-
-    it.skipIf(!has('providers.saveKey'))('stores a key, then lists the provider as ready', async () => {
-      const { host } = await setup();
-      await waitFor(() => expect(readyOf(host, 'openai')).toBe(false));
-      await host.providers.saveKey!('openai', { value: 'sk-test' });
-      await waitFor(() => expect(readyOf(host, 'openai')).toBe(true));
-    });
-
-    it.skipIf(!has('providers.saveKey'))(
-      'rejects a key the backend refuses, and the provider stays not ready',
-      async () => {
-        const { host } = await setup();
-        await expect(host.providers.saveKey!('refused', { value: 'sk-bad' })).rejects.toBeDefined();
-        expect(readyOf(host, 'refused')).toBe(false);
-      },
-    );
-
-    it.skipIf(!has('providers.signIn'))(
-      'signs in through the browser: where to sign in, the answer, done, and the provider is ready',
-      async () => {
-        const { host, finishSignIn } = await setup();
-        const flow = host.providers.signIn!('openai');
-        cleanup.push(() => flow.cancel());
-        await answer(flow, 'openai', finishSignIn);
-        await waitFor(() => expect(flow.state.get().kind).toBe('done'));
-        await waitFor(() => expect(readyOf(host, 'openai')).toBe(true));
-      },
-    );
-
-    it.skipIf(!has('providers.signIn'))('ends a refused sign-in with an error', async () => {
-      const { host, finishSignIn } = await setup();
-      const flow = host.providers.signIn!('refused');
-      cleanup.push(() => flow.cancel());
-      await answer(flow, 'refused', finishSignIn);
-      await waitFor(() => expect(flow.state.get().kind).toBe('error'));
-      expect(readyOf(host, 'refused')).toBe(false);
-    });
-
-    it.skipIf(!has('providers.signIn'))('stops a cancelled sign-in: an answer after it changes nothing', async () => {
-      const { host } = await setup();
-      const flow = host.providers.signIn!('openai');
-      await waitFor(() => expect(WAITING.has(flow.state.get().kind)).toBe(true));
-      flow.cancel();
-      flow.submit?.('code-ok');
-      await new Promise((resolve) => setTimeout(resolve, 20));
-      expect(flow.state.get().kind).not.toBe('done');
-      expect(readyOf(host, 'openai')).toBe(false);
-    });
-
-    it.skipIf(!has('providers.test'))('tests a model: it answers, on the model asked for', async () => {
-      const { host } = await setup();
-      const result = await host.providers.test!('anthropic', 'claude-b');
-      expect(result.ok).toBe(true);
-      expect(result.model).toBe('claude-b');
-      expect(typeof result.durationMs).toBe('number');
-    });
-
-    it.skipIf(!has('providers.test'))('reports a refused test as not ok, with why', async () => {
-      const { host } = await setup();
-      const result = await host.providers.test!('refused', 'claude-a');
-      expect(result.ok).toBe(false);
-      expect(result.message).toEqual(expect.any(String));
-    });
-
-    it.skipIf(!has('providers.models'))("lists a provider's models; a reasoning model takes efforts", async () => {
-      const { host } = await setup();
-      const models = await host.providers.models!('anthropic');
-      expect(models.map((m) => [m.id, m.label])).toEqual([
-        ['claude-a', 'Claude A'],
-        ['claude-b', 'Claude B'],
-      ]);
-      expect(models[0]!.efforts?.length).toBeGreaterThan(0);
-      expect(models[1]!.efforts).toBeUndefined();
-    });
-
-    it.skipIf(!has('imports'))('previews what an import brings over, and runs it', async () => {
-      const { host, backend } = await setup();
-      expect(await host.imports!.preview()).toEqual(backend.importPreview);
-      await expect(
-        host.imports!.run({
-          sessions: false,
-          mcps: false,
-          skills: true,
-          commands: false,
-          agents: false,
-          allProjects: false,
-        }),
-      ).resolves.toBeUndefined();
-    });
-
-    it.skipIf(!has('connectors'))('adds a connector, then lists it as installed', async () => {
-      const { host } = await setup();
-      const installed = host.connectors!.installed;
-      cleanup.push(installed.subscribe(() => {}));
-      expect(installed.get()).not.toContain(CONNECTOR);
-      await host.connectors!.add(CONNECTOR);
-      await waitFor(() => expect(installed.get()).toContain(CONNECTOR));
-    });
-
-    it.skipIf(!has('connectors.signIn'))('signs a connector in through the browser', async () => {
-      const { host, finishSignIn } = await setup();
-      const flow = host.connectors!.signIn!(OAUTH_CONNECTOR);
-      cleanup.push(() => flow.cancel());
-      await answer(flow, OAUTH_CONNECTOR, finishSignIn);
-      await waitFor(() => expect(flow.state.get().kind).toBe('done'));
-    });
-
-    it.skipIf(!has('connectors.githubToken'))('hands over the GitHub token the backend knows', async () => {
-      const { host, backend } = await setup();
-      expect(await host.connectors!.githubToken!()).toBe(backend.githubToken);
-    });
-
-    it.skipIf(!has('skills'))("browses a source's skills, installs picked ones and lists them", async () => {
-      const { host, backend } = await setup();
-      const installed = host.skills!.installed;
-      cleanup.push(installed.subscribe(() => {}));
-      const listing = await host.skills!.browse(SKILL_SOURCE);
-      const expected = backend.skillListings[SKILL_SOURCE]!;
-      expect(listing.skills.map((s) => s.name)).toEqual(expected.skills.map((s) => s.name));
-      const picked = expected.skills[0]!;
-      const progress: string[] = [];
-      await host.skills!.install(picked.install.source, [picked.install.rel], (line) => progress.push(line));
-      await waitFor(() => expect(installed.get()).toContain(picked.name));
-      expect(progress.length).toBeGreaterThan(0);
-    });
-
-    it.skipIf(!has('skills.images'))('says where skill source pictures come from', async () => {
-      const { host } = await setup();
-      expect(typeof host.skills!.images!.avatar).toBe('function');
-      expect(typeof host.skills!.images!.preview).toBe('function');
-    });
-
-    it.skipIf(!has('extensions'))('installs a native extension, reporting progress, then lists it', async () => {
-      const { host } = await setup();
-      const installed = host.extensions!.installed;
-      cleanup.push(installed.subscribe(() => {}));
-      expect(installed.get()).not.toContain(EXTENSION);
-      const progress: string[] = [];
-      await host.extensions!.install(EXTENSION, (line) => progress.push(line));
-      await waitFor(() => expect(installed.get()).toContain(EXTENSION));
-      expect(progress.length).toBeGreaterThan(0);
-    });
-
-    it.skipIf(!has('themes'))('offers themes, and putting the look back without a preview is harmless', async () => {
-      const { host } = await setup();
-      expect(Array.isArray(host.themes!.list.get())).toBe(true);
-      expect(() => host.themes!.preview(null)).not.toThrow();
-    });
-
-    it.skipIf(!has('appIcons'))('offers its app icons as a readable list', async () => {
-      const { host } = await setup();
-      cleanup.push(host.appIcons!.list.subscribe(() => {}));
-      expect(Array.isArray(host.appIcons!.list.get())).toBe(true);
-    });
-  });
-}

package/src/onboarding/testing/index.ts

@@ -1,7 +0,0 @@
-/**
- * `zidane-ui/onboarding/testing`: an `OnboardingHost` that runs in memory
- * (`createFixtureOnboardingHost`) and its demo data, for docs, demos and an
- * app's own tests. Not for production hosts.
- */
-export * from '../headless/fixture-host';
-export * from '../headless/fixtures';

package/src/onboarding/tutorials.tsx

@@ -1,45 +0,0 @@
-/**
- * The tutorials: how a part of zidane works, as a scene that plays three
- * steps beside their words. The wizard's Connectors and Skills steps open
- * with one, and so can the pages of an app's settings. The words are the
- * core's (`TUTORIALS`, through the `tutorials` label), so both apps say the
- * same thing.
- */
-import type { ReactNode } from 'react';
-import type { TutorialTopic } from 'zidane/chat/pure';
-
-import { HowItWorks } from '../components/HowItWorks';
-import { TUTORIAL_SCENES } from './demos/how-it-works';
-import { useOnboardingLabels } from './OnboardingProvider';
-
-/** Props of {@link Tutorial}. */
-export interface TutorialProps {
-  /** What the tutorial explains. */
-  topic: TutorialTopic;
-  /** Buttons that act on it, such as "Build an extension". */
-  actions?: ReactNode;
-  /** The server it is about, by name: the steps that name this computer name it instead. Absent: this computer. */
-  host?: string;
-  /** Extra classes on the block. */
-  className?: string;
-}
-
-/**
- * Renders the tutorial of a topic: its scene, which plays the steps in turn, beside the steps.
- *
- * @param props - Component props.
- */
-export function Tutorial({ topic, actions, host, className = '' }: TutorialProps) {
-  const labels = useOnboardingLabels();
-  const words = host === undefined ? labels.tutorials[topic] : labels.tutorialOnServer(topic, host);
-  const Scene = TUTORIAL_SCENES[topic];
-  return (
-    <HowItWorks
-      title={words.title}
-      steps={words.steps}
-      illustration={(step) => <Scene step={step} />}
-      actions={actions}
-      className={className}
-    />
-  );
-}

package/src/onboarding/useSignIn.ts

@@ -1,58 +0,0 @@
-/**
- * Runs the browser sign-in of a host for a component. It starts the sign-in
- * and follows its state for `BrowserSignIn`. If the component goes away
- * before the sign-in ends, it cancels the sign-in.
- */
-import { useEffect, useRef, useState } from 'react';
-import type { OnboardingSignInState } from 'zidane/chat/pure';
-
-import { constant, useReadable } from '../chat/headless/store';
-import type { SignInFlow } from './headless/host';
-
-const IDLE = constant<OnboardingSignInState | null>(null);
-
-const ended = (state: OnboardingSignInState | null) => state?.kind === 'done' || state?.kind === 'error';
-
-/** A sign-in a component runs. */
-export interface SignInHandle {
-  /** Where the sign-in is. It is `null` before the sign-in starts. */
-  state: OnboardingSignInState | null;
-  /** Starts a sign-in, replacing one in progress. */
-  start: (begin: () => SignInFlow) => void;
-  /** Answers a question or passes a pasted code. Absent: the flow takes no input. */
-  submit?: (text: string) => void;
-  /** Stops the sign-in and forgets it. */
-  cancel: () => void;
-}
-
-/**
- * Follows one browser sign-in at a time.
- *
- * @param onDone - Called once when a sign-in ends signed in.
- */
-export function useSignIn(onDone?: (account?: string) => void): SignInHandle {
-  const [flow, setFlow] = useState<SignInFlow | null>(null);
-  const state = useReadable(flow ? flow.state : IDLE);
-  const done = useRef(onDone);
-  useEffect(() => {
-    done.current = onDone;
-  });
-  useEffect(() => {
-    if (state?.kind === 'done') done.current?.(state.account);
-  }, [state]);
-  useEffect(
-    () => () => {
-      if (flow && !ended(flow.state.get())) flow.cancel();
-    },
-    [flow],
-  );
-  return {
-    state,
-    start: (begin) => setFlow(begin()),
-    ...(flow?.submit ? { submit: flow.submit } : {}),
-    cancel: () => {
-      flow?.cancel();
-      setFlow(null);
-    },
-  };
-}

package/src/palette/CommandPalette.tsx

@@ -1,59 +0,0 @@
-/**
- * The Cmd+K palette over a {@link PaletteController}: the kit's
- * `PalettePanel` fed with the controller's sections (and any groups the app
- * appends after them), its query, cursor, levels and running state. Mount it
- * in a layer (an `Overlay`, the app's modal slot) while the palette is open.
- */
-import type { PaletteItem } from 'zidane/chat/pure';
-import { useMemo } from 'react';
-
-import type { PaletteSection } from '../components/palette/PaletteList';
-import { PalettePanel, type PalettePanelProps } from '../components/palette/PalettePanel';
-import type { PaletteController } from './usePaletteController';
-
-/** Props for {@link CommandPalette}. */
-export type CommandPaletteProps = Pick<
-  PalettePanelProps<PaletteItem>,
-  'verb' | 'renderRow' | 'renderIcon' | 'renderKeys' | 'className' | 'style'
-> & {
-  /** The palette's state, from `usePaletteController`. */
-  controller: PaletteController;
-  /** Groups shown after the ranked ones, never reordering them. Keep the array stable. */
-  extraGroups?: readonly PaletteSection<PaletteItem>[];
-  /** Turns the header spinner while the app's own search is out. */
-  busy?: boolean;
-};
-
-/**
- * Renders the command palette: sources, levels and running from `controller`, the surface from `PalettePanel`.
- *
- * @param props - {@link CommandPaletteProps}.
- */
-export function CommandPalette({ controller, extraGroups, busy = false, ...rest }: CommandPaletteProps) {
-  const { sections } = controller;
-  const groups = useMemo(
-    () => (extraGroups && extraGroups.length > 0 ? [...sections, ...extraGroups] : sections),
-    [sections, extraGroups],
-  );
-  return (
-    <PalettePanel
-      {...rest}
-      groups={groups}
-      query={controller.query}
-      onQueryChange={controller.setQuery}
-      cursor={controller.cursor}
-      onCursorChange={controller.setCursor}
-      onRun={controller.run}
-      onClose={controller.close}
-      nested={controller.nested}
-      onBack={controller.back}
-      title={controller.title}
-      placeholder={controller.placeholder}
-      settled={controller.settled}
-      loading={controller.loading}
-      running={controller.running || busy}
-      notice={controller.notice}
-      inputRef={controller.inputRef}
-    />
-  );
-}