cursedbelt 5.55.2 → 5.58.0

package/src/react/components/EditorPage.tsx

@@ -0,0 +1,281 @@
+import { ArrowLeft } from 'lucide-react';
+import {
+  type CSSProperties,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
+import { useDiscardGuard } from '../hooks/useDiscardGuard.js';
+import { cn } from '../lib/cn.js';
+import { UnstyledButton } from './UnstyledButton.js';
+import './formKit.css';
+import './editorPage.css';
+
+export interface EditorPageProps {
+  /** What is being made or changed — *"New template"*, *"Edit Dynatrace"*. The page's heading. */
+  title: ReactNode;
+  /** Where Back returns to, said before the title as a crumb — *"Templates"*. */
+  backLabel?: string;
+  /** Leave the page. Back, and Escape from anywhere on it — asked first while `isDirty`. */
+  onBack: () => void;
+  /**
+   * The form holds edits nobody has saved. Back and Escape then ask *"Discard changes?"*
+   * before leaving, as an editing `Modal` does (`useDiscardGuard`) — a half-made thing is
+   * never thrown away by a stray key. The page's own Cancel, if it has one, is the caller's.
+   */
+  isDirty?: boolean;
+  /** Top-right: Cancel / Save, a delete. An `ActionBar`'s buttons, or a few `Button`s. */
+  actions?: ReactNode;
+  /** The form — the left side. Drawn quiet (`QuietForm`) unless `quiet={false}`. */
+  children: ReactNode;
+  /** The live result of the form — the right side, as a mock somebody can tinker with. */
+  preview: ReactNode;
+  /** What the preview is. Its heading, and its tab on a phone. Default "Preview". */
+  previewLabel?: string;
+  /** Small controls over the preview — show or hide parts of it. Drawn beside its heading. */
+  previewTools?: ReactNode;
+  /** The form's share of the width, 0–1, before anybody drags. Default 0.5. */
+  defaultSplit?: number;
+  /** localStorage key the dragged split is kept under. Omit to forget it on close. */
+  storageKey?: string;
+  /** Linear's form: no boxes until a control is pointed at. Default `true`. */
+  quiet?: boolean;
+  /**
+   * `'overlay'` (default) covers the window — the page opens over whatever was there and Back
+   * returns to it untouched. `'inline'` fills its container, for a host whose router owns pages.
+   */
+  presentation?: 'overlay' | 'inline';
+  className?: string;
+}
+
+/** What answers Escape itself, before the page does. */
+const OWNS_ESCAPE =
+  '[role="listbox"],[role="menu"],[role="combobox"][aria-expanded="true"],[aria-haspopup]:not([aria-haspopup="false"])[aria-expanded="true"]';
+
+const MIN_SPLIT = 0.25;
+const MAX_SPLIT = 0.75;
+const clampSplit = (value: number): number => Math.min(MAX_SPLIT, Math.max(MIN_SPLIT, value));
+
+function readSplit(key: string | undefined, fallback: number): number {
+  if (!key || typeof localStorage === 'undefined') return fallback;
+  const stored = Number(localStorage.getItem(key));
+  return Number.isFinite(stored) && stored > 0 ? clampSplit(stored) : fallback;
+}
+
+/**
+ * A creation page: the form on the left, a live mock of what it makes on the right, and a
+ * divider between them that drags.
+ *
+ * The owner, 2026-10-05, on desk's template editor: *"instead of opening a modal I want to open a
+ * page with a split view where I see the forms and fields … on the left and I see what it looks
+ * like so far and can tinker with a mock version of it on the right. I should be able to drag to
+ * resize a vertical divider … On mobile it will need an appropriate narrow layout."*
+ *
+ * - **Wide** (its container ≥ 48rem): two columns and a `separator` between them — drag it,
+ *   or focus it and use ← / → (Home / End for the limits); a double-click puts it back. The
+ *   split is kept under `storageKey`. Each side scrolls on its own, so a long form never pushes
+ *   the preview out of sight.
+ * - **Narrow**: one side at a time, chosen by an Edit / Preview switch in the header — a phone
+ *   has no room for both, and a pinned half-height preview leaves neither usable.
+ *
+ * The header is the page's own: a Back arrow with the crumb, the title, and the actions
+ * top-right where Linear and every desktop editor put Save. Escape anywhere is Back, as it was
+ * when the same form was a dialog.
+ *
+ * Plain stylesheet (`formKit.css`) — draws without Tailwind; `cursedbelt/react/form-kit`.
+ */
+export function EditorPage({
+  title,
+  backLabel = 'Back',
+  onBack,
+  isDirty,
+  actions,
+  children,
+  preview,
+  previewLabel = 'Preview',
+  previewTools,
+  defaultSplit = 0.5,
+  storageKey,
+  quiet = true,
+  presentation = 'overlay',
+  className,
+}: EditorPageProps) {
+  const [split, setSplit] = useState(() => readSplit(storageKey, clampSplit(defaultSplit)));
+  const [mode, setMode] = useState<'edit' | 'preview'>('edit');
+  const [dragging, setDragging] = useState(false);
+  const splitRef = useRef<HTMLDivElement>(null);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const titleId = useId();
+  const formId = useId();
+  const previewId = useId();
+
+  const { guardedClose, discardOverlay, isConfirming, cancelDiscard } = useDiscardGuard({ onClose: onBack, isDirty });
+
+  const commit = useCallback(
+    (value: number) => {
+      const next = clampSplit(value);
+      setSplit(next);
+      if (storageKey && typeof localStorage !== 'undefined') localStorage.setItem(storageKey, String(next));
+    },
+    [storageKey],
+  );
+
+  // An overlay takes focus on open and gives it back on close, so the keyboard is where the
+  // eye is; the first field's own `autoFocus` still wins, because it runs first.
+  useEffect(() => {
+    if (presentation !== 'overlay') return;
+    const before = document.activeElement as HTMLElement | null;
+    const root = rootRef.current;
+    if (root && !root.contains(document.activeElement)) root.focus({ preventScroll: true });
+    return () => {
+      if (before?.isConnected) before.focus({ preventScroll: true });
+    };
+  }, [presentation]);
+
+  const onPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setDragging(true);
+  };
+
+  const onPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+    if (!dragging) return;
+    const box = splitRef.current?.getBoundingClientRect();
+    if (!box || box.width === 0) return;
+    commit((event.clientX - box.left) / box.width);
+  };
+
+  const onPointerUp = (event: PointerEvent<HTMLDivElement>) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+    setDragging(false);
+  };
+
+  const onDividerKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    const step = event.shiftKey ? 0.1 : 0.02;
+    const next =
+      event.key === 'ArrowLeft' ? split - step
+      : event.key === 'ArrowRight' ? split + step
+      : event.key === 'Home' ? MIN_SPLIT
+      : event.key === 'End' ? MAX_SPLIT
+      : null;
+    if (next === null) return;
+    event.preventDefault();
+    commit(next);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== 'Escape' || event.defaultPrevented) return;
+    // A menu, a listbox or an open combobox inside the form closes itself on Escape first. Only a
+    // POPUP's trigger counts: a disclosure (a folded row's ▸, `aria-expanded` with no popup) has
+    // nothing to close, and Escape on it is the page's.
+    if ((event.target as HTMLElement).closest(OWNS_ESCAPE)) return;
+    event.preventDefault();
+    if (isConfirming) cancelDiscard();
+    else guardedClose();
+  };
+
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: a11y-needs — Escape anywhere on the page is Back, as it was in the dialog this replaces; the role is a dialog or a region, which biome cannot read through the ternary.
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-modal is only set when the role is dialog.
+    <div
+      ref={rootRef}
+      className={cn('cbfk-page', className)}
+      data-presentation={presentation}
+      data-mode={mode}
+      data-dragging={dragging ? 'true' : undefined}
+      role={presentation === 'overlay' ? 'dialog' : 'region'}
+      aria-modal={presentation === 'overlay' ? true : undefined}
+      aria-labelledby={titleId}
+      tabIndex={-1}
+      onKeyDown={onKeyDown}
+    >
+      <header className='cbfk-page-head'>
+        <UnstyledButton className='cbfk-page-back' onClick={guardedClose} aria-label={backLabel} tooltip={backLabel}>
+          <ArrowLeft aria-hidden />
+          <span className='cbfk-page-crumb'>{backLabel}</span>
+        </UnstyledButton>
+        <span className='cbfk-page-sep' aria-hidden>
+          /
+        </span>
+        <h1 id={titleId} className='cbfk-page-title'>
+          {title}
+        </h1>
+        <div className='cbfk-page-modes' role='tablist' aria-label='Show'>
+          {(['edit', 'preview'] as const).map((each) => (
+            <UnstyledButton
+              key={each}
+              role='tab'
+              className='cbfk-page-mode'
+              aria-selected={mode === each}
+              aria-controls={each === 'edit' ? formId : previewId}
+              onClick={() => setMode(each)}
+            >
+              {each === 'edit' ? 'Edit' : previewLabel}
+            </UnstyledButton>
+          ))}
+        </div>
+        {actions ? <div className='cbfk-page-actions'>{actions}</div> : null}
+      </header>
+      <div
+        ref={splitRef}
+        className='cbfk-page-split'
+        style={{ '--cbfk-page-split': `${(split * 100).toFixed(2)}%` } as CSSProperties}
+      >
+        <div id={formId} className={cn('cbfk-page-form', quiet && 'cbfk-quiet')}>
+          <div className='cbfk-page-form-inner'>{children}</div>
+        </div>
+        {/* biome-ignore lint/a11y/useSemanticElements: WAI-ARIA's window splitter is a focusable separator with a value; an <hr> is a static rule that takes neither. */}
+        <div
+          className='cbfk-page-divider'
+          role='separator'
+          aria-orientation='vertical'
+          aria-label='Resize the form and the preview'
+          aria-valuemin={MIN_SPLIT * 100}
+          aria-valuemax={MAX_SPLIT * 100}
+          aria-valuenow={Math.round(split * 100)}
+          aria-controls={formId}
+          tabIndex={0}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={onPointerUp}
+          onPointerCancel={onPointerUp}
+          onKeyDown={onDividerKey}
+          onDoubleClick={() => commit(defaultSplit)}
+        />
+        <section id={previewId} className='cbfk-page-preview' aria-label={previewLabel}>
+          <div className='cbfk-page-preview-head'>
+            <p className='cbfk-page-preview-label'>{previewLabel}</p>
+            {previewTools ? <div className='cbfk-page-preview-tools'>{previewTools}</div> : null}
+          </div>
+          <div className='cbfk-page-preview-body'>{preview}</div>
+        </section>
+      </div>
+      {discardOverlay}
+    </div>
+  );
+}
+
+export interface QuietFormProps {
+  children: ReactNode;
+  className?: string;
+}
+
+/**
+ * Linear's form, for any form: inputs, textareas and selects drawn with no box until they are
+ * pointed at or focused, labels muted and small, so the values are the only full-strength text.
+ *
+ * The owner, 2026-10-05, beside a Linear project page: *"I like how it doesn't have boxes around
+ * all the fields and doesn't fill in extra text or explanations. I want this minimal look in our
+ * apps too."* `EditorPage` puts its form inside one; wrap any other form to get the same.
+ * The words are the caller's half: a field that needs a description to be understood has the
+ * wrong label or the wrong placeholder.
+ */
+export function QuietForm({ children, className }: QuietFormProps) {
+  return <div className={cn('cbfk-quiet', className)}>{children}</div>;
+}

package/src/react/components/IconPicker.spec.tsx

@@ -0,0 +1,84 @@
+import { afterEach, describe, expect, test } from 'bun:test';
+import { cleanup, fireEvent, render, waitFor } from '@testing-library/react';
+import { IconPicker, iconDataUrl, type PickedIcon, searchIcons } from './IconPicker.js';
+
+afterEach(cleanup);
+
+/** Iconify's two answers — the search, then each set's drawings — from a table. */
+function fakeIconify(hits: string[]): { fetcher: typeof fetch; asked: string[] } {
+  const asked: string[] = [];
+  const fetcher = (async (input: string | URL | Request) => {
+    const url = new URL(String(input));
+    asked.push(url.pathname + url.search);
+    if (url.pathname === '/search') return Response.json({ icons: hits });
+    const prefix = url.pathname.slice(1).replace(/\.json$/, '');
+    const icons = Object.fromEntries((url.searchParams.get('icons') ?? '').split(',').map((name) => [name, { body: `<path d="M0 0" data-n="${name}"/>` }]));
+    return Response.json({ prefix, icons, width: 24, height: 24 });
+  }) as typeof fetch;
+  return { fetcher, asked };
+}
+
+describe('searchIcons', () => {
+  test('one search, one request per set, and the search’s own order kept', async () => {
+    const { fetcher, asked } = fakeIconify(['tabler:code', 'lucide:code', 'lucide:code-xml']);
+    const found = await searchIcons('code', ['lucide', 'tabler'], fetcher);
+    expect(found.map((icon) => icon.name)).toEqual(['tabler:code', 'lucide:code', 'lucide:code-xml']);
+    expect(found[0]).toMatchObject({ width: 24, height: 24 });
+    expect(asked.filter((path) => path.startsWith('/search'))).toHaveLength(1);
+    expect(asked.filter((path) => path.endsWith('.json') || path.includes('.json?'))).toHaveLength(2);
+  });
+
+  test('an empty query asks nothing', async () => {
+    const { fetcher, asked } = fakeIconify([]);
+    expect(await searchIcons('  ', ['lucide'], fetcher)).toEqual([]);
+    expect(asked).toEqual([]);
+  });
+});
+
+describe('iconDataUrl', () => {
+  test('draws in the colour given, and only a hex or a name is spliced in', () => {
+    const icon = { body: '<path fill="currentColor"/>', width: 24, height: 24 };
+    expect(decodeURIComponent(iconDataUrl(icon, 'orange'))).toContain('color="orange"');
+    const hostile = decodeURIComponent(iconDataUrl(icon, '"><script>x</script>'));
+    expect(hostile).not.toContain('<script>');
+    expect(hostile).not.toContain('color=');
+  });
+});
+
+describe('IconPicker', () => {
+  test('searches what was typed, draws the hits, and hands back the drawing that was picked', async () => {
+    const { fetcher } = fakeIconify(['lucide:code', 'lucide:braces']);
+    let picked: PickedIcon | null = null;
+    const view = render(<IconPicker color='orange' initialQuery='code' fetcher={fetcher} value='lucide:braces' onPick={(icon) => { picked = icon; }} />);
+    const cell = await waitFor(() => view.getByRole('radio', { name: 'code (Lucide)' }));
+    expect(view.getByRole('radio', { name: 'braces (Lucide)' }).getAttribute('aria-checked')).toBe('true');
+    fireEvent.click(cell);
+    expect(picked).toMatchObject({ name: 'lucide:code', width: 24 });
+    expect((picked as PickedIcon | null)?.body).toContain('data-n="code"');
+  });
+
+  test('the search follows the name it was given until somebody types in it', async () => {
+    const { fetcher, asked } = fakeIconify(['lucide:server']);
+    const view = render(<IconPicker color='orange' initialQuery='' fetcher={fetcher} onPick={() => {}} />);
+    view.rerender(<IconPicker color='orange' initialQuery='server' fetcher={fetcher} onPick={() => {}} />);
+    await waitFor(() => view.getByRole('radio', { name: 'server (Lucide)' }));
+    fireEvent.change(view.getByLabelText('Search icons'), { target: { value: 'disk' } });
+    view.rerender(<IconPicker color='orange' initialQuery='other' fetcher={fetcher} onPick={() => {}} />);
+    expect((view.getByLabelText('Search icons') as HTMLInputElement).value).toBe('disk');
+    expect(asked.some((path) => path.includes('query=server'))).toBe(true);
+  });
+
+  test('a set chip narrows the search to that set', async () => {
+    const { fetcher, asked } = fakeIconify(['simple-icons:kubernetes']);
+    const view = render(<IconPicker color='orange' initialQuery='kube' fetcher={fetcher} onPick={() => {}} />);
+    await waitFor(() => view.getByRole('radio', { name: 'kubernetes (Brands)' }));
+    fireEvent.click(view.getByRole('button', { name: 'Brands' }));
+    await waitFor(() => expect(asked.some((path) => path.includes('prefixes=simple-icons&') || path.endsWith('prefixes=simple-icons'))).toBe(true));
+  });
+
+  test('no network says so, in words', async () => {
+    const fetcher = (async () => { throw new TypeError('Failed to fetch'); }) as unknown as typeof fetch;
+    const view = render(<IconPicker color='orange' initialQuery='code' fetcher={fetcher} onPick={() => {}} />);
+    await waitFor(() => expect(view.getByRole('status').textContent).toContain('needs the internet'));
+  });
+});

package/src/react/components/IconPicker.tsx

@@ -0,0 +1,289 @@
+import { type KeyboardEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { cn } from '../lib/cn.js';
+import { SearchInput } from './SearchInput.js';
+import { UnstyledButton } from './UnstyledButton.js';
+import './formKit.css';
+import './editorPage.css';
+
+/**
+ * An icon somebody picked, with its drawing — so whoever stores it can draw it again with no
+ * icon library and no network: `iconDataUrl(icon, color)`.
+ */
+export interface PickedIcon {
+  /** Iconify's name, `set:icon` — `lucide:code`, `simple-icons:kubernetes`. */
+  name: string;
+  /** The SVG's inner markup, every colour `currentColor`. */
+  body: string;
+  width: number;
+  height: number;
+}
+
+export interface IconSet {
+  prefix: string;
+  label: string;
+}
+
+/**
+ * The sets searched, all single-colour (they tint): the general-purpose four, and Simple Icons
+ * for the brands a runbook names — Kubernetes, Datadog, GitHub. Multi-colour logo sets are left
+ * out because a colour of the owner's choosing is the point of the mark.
+ */
+export const ICON_SETS: readonly IconSet[] = [
+  { prefix: 'lucide', label: 'Lucide' },
+  { prefix: 'tabler', label: 'Tabler' },
+  { prefix: 'ph', label: 'Phosphor' },
+  { prefix: 'mdi', label: 'Material' },
+  { prefix: 'simple-icons', label: 'Brands' },
+];
+
+export const ICONIFY_API = 'https://api.iconify.design';
+const RESULTS = 96;
+/** A hex, or a named colour — nothing that could close the attribute it is spliced into. */
+const SAFE_COLOR = /^(?:#[0-9a-f]{3,8}|[a-z]+)$/i;
+
+/**
+ * A picked icon as an `<img>` source, in `color`. An image rather than inline SVG on purpose: a
+ * stored body is drawn wherever the record goes, and an SVG inside an `<img>` cannot run script
+ * or reach the page, whatever the stored markup says. `color` must be a hex or a colour's name —
+ * anything else is left out, and the icon draws in the SVG's default black.
+ */
+export function iconDataUrl(icon: Pick<PickedIcon, 'body' | 'width' | 'height'>, color: string): string {
+  const tint = SAFE_COLOR.test(color) ? ` color="${color}"` : '';
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${icon.width} ${icon.height}" width="${icon.width}" height="${icon.height}"${tint}>${icon.body}</svg>`;
+  return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`;
+}
+
+interface IconifySetJson {
+  prefix: string;
+  icons: Record<string, { body: string; width?: number; height?: number }>;
+  width?: number;
+  height?: number;
+}
+
+/** Iconify's search, then every hit's drawing, one request per set. */
+export async function searchIcons(
+  query: string,
+  prefixes: readonly string[],
+  fetcher: typeof fetch = fetch,
+  signal?: AbortSignal,
+): Promise<PickedIcon[]> {
+  const q = query.trim();
+  if (q === '') return [];
+  const search = new URL('/search', ICONIFY_API);
+  search.searchParams.set('query', q);
+  search.searchParams.set('limit', String(RESULTS));
+  search.searchParams.set('prefixes', prefixes.join(','));
+  const found = await fetcher(search.toString(), { signal });
+  if (!found.ok) throw new Error(`The icon search answered ${found.status}.`);
+  const names = ((await found.json()) as { icons?: string[] }).icons ?? [];
+  const bySet = new Map<string, string[]>();
+  for (const name of names) {
+    const [prefix, icon] = name.split(':');
+    if (!prefix || !icon) continue;
+    bySet.set(prefix, [...(bySet.get(prefix) ?? []), icon]);
+  }
+  const drawn = new Map<string, PickedIcon>();
+  await Promise.all(
+    [...bySet].map(async ([prefix, icons]) => {
+      const url = new URL(`/${prefix}.json`, ICONIFY_API);
+      url.searchParams.set('icons', icons.join(','));
+      const answer = await fetcher(url.toString(), { signal });
+      if (!answer.ok) return;
+      const set = (await answer.json()) as IconifySetJson;
+      for (const [icon, data] of Object.entries(set.icons ?? {})) {
+        drawn.set(`${prefix}:${icon}`, {
+          name: `${prefix}:${icon}`,
+          body: data.body,
+          width: data.width ?? set.width ?? 24,
+          height: data.height ?? set.height ?? 24,
+        });
+      }
+    }),
+  );
+  // In the search's own order — its ranking is the useful part of it.
+  return names.map((name) => drawn.get(name)).filter((icon): icon is PickedIcon => icon !== undefined);
+}
+
+export interface IconPickerProps {
+  /** The chosen icon's name, drawn as selected. */
+  value?: string | null;
+  onPick: (icon: PickedIcon) => void;
+  /**
+   * The colour the results are drawn in — the mark's own, so the choice is made in it. A hex
+   * or a colour's name: the hits are images, which cannot inherit the page's `currentColor`.
+   */
+  color: string;
+  /**
+   * What to search for until somebody types — the thing's name is a good first guess. Followed
+   * as it changes (a name typed after the picker opened still searches), and let go of for good
+   * the moment the search field is typed in.
+   */
+  initialQuery?: string;
+  sets?: readonly IconSet[];
+  /** The request function — a test's seam. */
+  fetcher?: typeof fetch;
+  className?: string;
+}
+
+/**
+ * Search big icon sets and pick one: a search field, a row of sets, and a grid of hits drawn in
+ * the mark's own colour.
+ *
+ * The owner, 2026-10-05: *"For the mark I want a way to search in icon lists to choose a good
+ * icon … if I make a code snippet template I want to be able to pick an icon instead of letters
+ * like "CS". If we can have a search field and access to big icon sets like at shadcn.io/icons or
+ * iconify that will be good."* So Iconify's public API: 200,000 icons across the sets above,
+ * searched where they live rather than shipped in every app's bundle. A picked icon carries its
+ * own drawing (`PickedIcon.body`), so drawing it later needs neither the API nor the network.
+ *
+ * Keys: type to search; ↓ from the field enters the grid; arrows move in it; Enter or Space
+ * picks. Plain stylesheet (`formKit.css`); `cursedbelt/react/form-kit`.
+ */
+export function IconPicker({
+  value,
+  onPick,
+  color,
+  initialQuery = '',
+  sets = ICON_SETS,
+  fetcher,
+  className,
+}: IconPickerProps) {
+  const [query, setQuery] = useState(initialQuery);
+  const [typed, setTyped] = useState(false);
+  const [only, setOnly] = useState<string | null>(null);
+  const [results, setResults] = useState<PickedIcon[]>([]);
+  const [state, setState] = useState<'idle' | 'loading' | 'done' | 'error'>('idle');
+  const [active, setActive] = useState(0);
+  const grid = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!typed) setQuery(initialQuery);
+  }, [initialQuery, typed]);
+  const prefixes = useMemo(() => (only ? [only] : sets.map((set) => set.prefix)), [only, sets]);
+
+  useEffect(() => {
+    if (query.trim() === '') {
+      setResults([]);
+      setState('idle');
+      return;
+    }
+    const abort = new AbortController();
+    setState('loading');
+    const timer = setTimeout(() => {
+      searchIcons(query, prefixes, fetcher, abort.signal).then(
+        (found) => {
+          setResults(found);
+          setActive(0);
+          setState('done');
+        },
+        (cause: unknown) => {
+          if ((cause as { name?: string })?.name === 'AbortError') return;
+          setState('error');
+        },
+      );
+    }, 200);
+    return () => {
+      clearTimeout(timer);
+      abort.abort();
+    };
+  }, [query, prefixes, fetcher]);
+
+  const focusAt = (index: number) => {
+    const buttons = grid.current?.querySelectorAll<HTMLButtonElement>('[data-icon]');
+    if (!buttons || buttons.length === 0) return;
+    const next = Math.max(0, Math.min(buttons.length - 1, index));
+    setActive(next);
+    buttons[next]?.focus();
+  };
+
+  const columns = (): number => {
+    const buttons = grid.current?.querySelectorAll<HTMLElement>('[data-icon]');
+    if (!buttons || buttons.length === 0) return 1;
+    const top = buttons[0]!.offsetTop;
+    let count = 0;
+    for (const button of buttons) {
+      if (button.offsetTop !== top) break;
+      count += 1;
+    }
+    return Math.max(1, count);
+  };
+
+  const onGridKey = (event: KeyboardEvent<HTMLDivElement>) => {
+    const step =
+      event.key === 'ArrowRight' ? 1
+      : event.key === 'ArrowLeft' ? -1
+      : event.key === 'ArrowDown' ? columns()
+      : event.key === 'ArrowUp' ? -columns()
+      : null;
+    if (step === null) return;
+    event.preventDefault();
+    focusAt(active + step);
+  };
+
+  return (
+    <div className={cn('cbfk-icons', className)}>
+      <SearchInput
+        value={query}
+        onChange={(next) => {
+          setTyped(true);
+          setQuery(next);
+        }}
+        syntax={false}
+        placeholder='Search icons — code, server, chart, kubernetes…'
+        aria-label='Search icons'
+        onKeyDown={(event) => {
+          if (event.key === 'ArrowDown' && results.length > 0) {
+            event.preventDefault();
+            focusAt(0);
+          }
+        }}
+      />
+      <fieldset className='cbfk-icons-sets' aria-label='Icon sets'>
+        {[{ prefix: null, label: 'All' }, ...sets].map((set) => (
+          <UnstyledButton
+            key={set.prefix ?? 'all'}
+            className='cbfk-icons-set'
+            aria-pressed={only === set.prefix}
+            onClick={() => setOnly(set.prefix)}
+          >
+            {set.label}
+          </UnstyledButton>
+        ))}
+      </fieldset>
+      <div
+        ref={grid}
+        className='cbfk-icons-grid'
+        role='radiogroup'
+        aria-label='Icons'
+        aria-busy={state === 'loading'}
+        onKeyDown={onGridKey}
+      >
+        {results.map((icon, index) => {
+          const [set, name] = icon.name.split(':');
+          return (
+            <UnstyledButton
+              key={icon.name}
+              role='radio'
+              data-icon={icon.name}
+              className='cbfk-icons-cell'
+              aria-checked={icon.name === value}
+              aria-label={`${name} (${sets.find((each) => each.prefix === set)?.label ?? set})`}
+              tooltip={icon.name}
+              tabIndex={index === active ? 0 : -1}
+              onFocus={() => setActive(index)}
+              onClick={() => onPick(icon)}
+            >
+              <img src={iconDataUrl(icon, color)} alt='' width={22} height={22} draggable={false} />
+            </UnstyledButton>
+          );
+        })}
+      </div>
+      <p className='cbfk-icons-note' role='status'>
+        {state === 'idle' ? 'Type to search Lucide, Tabler, Phosphor, Material and brand icons.'
+        : state === 'loading' ? 'Searching…'
+        : state === 'error' ? 'Icon search needs the internet — api.iconify.design did not answer.'
+        : results.length === 0 ? `No icon matches “${query.trim()}”.`
+        : `${results.length} icons${results.length === RESULTS ? ' — the closest; type more to narrow' : ''}.`}
+      </p>
+    </div>
+  );
+}