@kahitsan/ksui 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "description": "ksui is a set of shared SolidJS UI components plus the @kserp/host-ui type contract for KahitSan/Hilinga plugins. Published to the public npm registry and consumed as a normal dependency. Ships source under a `solid` export condition so the consumer's vite-plugin-solid compiles it with solid-js + @kserp/host-ui externalized to the host runtime.",
   "type": "module",
   "main": "./src/index.ts",

package/src/components/composite/{PayeePicker.tsx → EntityPicker.tsx}

@@ -1,41 +1,59 @@
-// PayeePicker — a searchable combobox for the "Paid to" / "Received from" /
-// "Payable to" field. The canonical copy lives here in @kahitsan/ksui (a
-// composite ERP picker, sibling to ClientPicker / VoucherPicker); plugins
-// import it instead of vendoring their own.
+// EntityPicker — a generic searchable-combobox for picking one record from a
+// sibling plugin's list (clients, payees, …). It owns the whole interaction:
+// a trigger button, a portal popup with debounced search, keyboard/click-outside
+// dismissal, viewport-aware positioning, an optional inline "create new" row,
+// and graceful degradation when the backing plugin is unreachable.
 //
-// Fetches the SIBLING payees plugin's public API at /api/payees and degrades
-// gracefully — when the payees plugin isn't deployed the popup shows a
-// "couldn't load" notice but the free-text fallback (selectedName) keeps the
-// trigger usable, and the consuming API can persist payee as a plain string
-// regardless, so the form still saves.
+// It is DOMAIN-FREE: it knows nothing about clients or payees. The caller wires
+// the data via `search` / `onCreate` and the display via `idOf` / `labelOf` /
+// `secondaryOf` / `icon` / `noun` at each call site (e.g. a payee or client
+// picker), so there is exactly one copy of the popup mechanics.
+//
+// `selectedName` is a free-text fallback shown in the trigger when nothing is
+// picked (e.g. a likely default) — handy when the backing API persists the name
+// as a plain string regardless, so the form still saves if the plugin is absent.
 
 import { Portal } from "solid-js/web";
 import { createEffect, createSignal, For, onCleanup, Show, type JSX } from "solid-js";
-import Store from "lucide-solid/icons/store";
+import { highlightMatch } from "@kserp/host-ui";
 import UserPlus from "lucide-solid/icons/user-plus";
 import Search from "lucide-solid/icons/search";
 import X from "lucide-solid/icons/x";
 import Loader2 from "lucide-solid/icons/loader-2";
 
-export type PayeeKind = "vendor" | "customer" | "both";
+export interface EntityPickerProps<T> {
+  /** Currently selected record, or null. */
+  selected: T | null;
+  /** Free-text fallback shown in the trigger when `selected` is null. */
+  selectedName?: string | null;
+  /** Fired with the chosen record (or null when cleared). */
+  onChange: (next: T | null) => void;
 
-export interface PayeeOption {
-  id: number;
-  name: string;
-  kind: PayeeKind;
-  default_subcategory?: string | null;
-  notes?: string | null;
-  is_active?: boolean;
-}
+  /** Search the backing list. Receives the trimmed query (may be empty for the
+   *  initial list). Should resolve to the matching records, or reject so the
+   *  popup shows the error/fallback. */
+  search: (query: string) => Promise<T[]>;
+  /** Optional create-new handler. When provided AND the query has no exact
+   *  match, a "New <noun> …" row appears; resolving selects the created record. */
+  onCreate?: (name: string) => Promise<T>;
+
+  /** Stable identity for selection matching + result keys. */
+  idOf: (item: T) => string | number;
+  /** Primary display label. */
+  labelOf: (item: T) => string;
+  /** Optional muted secondary line under the label in results. */
+  secondaryOf?: (item: T) => string | null;
+
+  /** Leading icon component (lucide-solid), e.g. Store / UserRound. */
+  icon: (p: { size?: number; class?: string }) => JSX.Element;
+  /** Singular noun for UI copy: "payee", "client". */
+  noun: string;
 
-interface PayeePickerProps {
-  selected: PayeeOption | null;
-  selectedName?: string | null;
-  kind?: PayeeKind;
-  createAsKind?: PayeeKind;
   placeholder?: string;
-  onChange: (next: PayeeOption | null) => void;
   disabled?: boolean;
+  /** Open the popup immediately on mount. */
+  defaultOpen?: boolean;
+  /** Prefix for the component's data-testids (default "entity-picker"). */
   testIdPrefix?: string;
 }
 
@@ -43,17 +61,17 @@ const POPUP_MAX_HEIGHT = 360;
 const POPUP_MIN_WIDTH = 320;
 const SEARCH_DEBOUNCE_MS = 200;
 
-export default function PayeePicker(props: PayeePickerProps): JSX.Element {
+export default function EntityPicker<T>(props: EntityPickerProps<T>): JSX.Element {
   const [open, setOpen] = createSignal(false);
   const [query, setQuery] = createSignal("");
   const [debouncedQuery, setDebouncedQuery] = createSignal("");
-  const [results, setResults] = createSignal<PayeeOption[]>([]);
+  const [results, setResults] = createSignal<T[]>([]);
   const [loading, setLoading] = createSignal(false);
   const [creating, setCreating] = createSignal(false);
   const [error, setError] = createSignal<string | null>(null);
   const [popupStyle, setPopupStyle] = createSignal<JSX.CSSProperties>({});
 
-  const tid = (suffix: string) => `${props.testIdPrefix ?? "payee-picker"}-${suffix}`;
+  const tid = (suffix: string) => `${props.testIdPrefix ?? "entity-picker"}-${suffix}`;
 
   let triggerRef: HTMLButtonElement | undefined;
   let popupRef: HTMLDivElement | undefined;
@@ -61,6 +79,8 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
   let debounceTimer: ReturnType<typeof setTimeout> | undefined;
   let activeFetchToken = 0;
 
+  if (props.defaultOpen) queueMicrotask(() => setOpen(true));
+
   createEffect(() => {
     const q = query();
     if (debounceTimer) clearTimeout(debounceTimer);
@@ -76,24 +96,11 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
     const token = ++activeFetchToken;
     setLoading(true);
     setError(null);
-    const params = new URLSearchParams({ status: "active", limit: "20" });
-    if (q) params.set("search", q);
-    if (props.kind) params.set("kind", props.kind);
-    fetch(`/api/payees?${params.toString()}`, { credentials: "include" })
-      .then((r) => {
-        if (!r.ok)
-          throw new Error(
-            r.status === 403
-              ? "Permission denied"
-              : r.status === 404
-                ? "Payees module isn't available — type a name instead"
-                : "Failed to load",
-          );
-        return r.json();
-      })
-      .then((json) => {
+    props
+      .search(q)
+      .then((rows) => {
         if (token !== activeFetchToken) return;
-        setResults((json.data || []) as PayeeOption[]);
+        setResults(rows ?? []);
       })
       .catch((e) => {
         if (token !== activeFetchToken) return;
@@ -174,37 +181,28 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
   const hasExactMatch = () => {
     const q = trimmedQuery().toLowerCase();
     if (!q) return true;
-    return results().some((r) => r.name.trim().toLowerCase() === q);
+    return results().some((r) => props.labelOf(r).trim().toLowerCase() === q);
   };
 
-  const showCreateOption = () => trimmedQuery().length > 0 && !hasExactMatch() && !loading();
+  const showCreateOption = () =>
+    !!props.onCreate && trimmedQuery().length > 0 && !hasExactMatch() && !loading();
 
-  const select = (p: PayeeOption) => {
-    props.onChange(p);
+  const select = (item: T) => {
+    props.onChange(item);
     close();
   };
 
   const createAndSelect = async () => {
     const name = trimmedQuery();
-    if (!name || creating()) return;
+    if (!name || creating() || !props.onCreate) return;
     setCreating(true);
     setError(null);
     try {
-      const res = await fetch("/api/payees", {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name, kind: props.createAsKind ?? props.kind ?? "vendor" }),
-      });
-      if (!res.ok && res.status !== 200) {
-        const body = await res.json().catch(() => ({ error: "Failed to create payee" }));
-        throw new Error(body.error || "Failed to create payee");
-      }
-      const created = (await res.json()) as PayeeOption;
+      const created = await props.onCreate(name);
       props.onChange(created);
       close();
     } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to create payee");
+      setError(e instanceof Error ? e.message : `Failed to create ${props.noun}`);
     } finally {
       setCreating(false);
     }
@@ -216,12 +214,13 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
   };
 
   const triggerLabel = () => {
-    if (props.selected) return props.selected.name;
+    if (props.selected) return props.labelOf(props.selected);
     if (props.selectedName && props.selectedName.trim()) return props.selectedName.trim();
     return null;
   };
 
-  const placeholder = () => props.placeholder ?? "Tap to pick a payee";
+  const placeholder = () => props.placeholder ?? `Tap to pick a ${props.noun}`;
+  const Icon = props.icon;
 
   return (
     <>
@@ -235,13 +234,10 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
         aria-haspopup="listbox"
         aria-expanded={open()}
       >
-        <Store size={16} class="shrink-0 text-zinc-400" />
+        <Icon size={16} class="shrink-0 text-zinc-400" />
         <Show when={triggerLabel()} fallback={<span class="text-zinc-500 italic">{placeholder()}</span>}>
           <span class="flex-1 min-w-0">
             <span class="block truncate text-zinc-100 font-medium">{triggerLabel()}</span>
-            <Show when={props.selected && !props.selected.id}>
-              <span class="block text-[11px] text-zinc-500">unlinked (legacy)</span>
-            </Show>
           </span>
           <button
             type="button"
@@ -249,7 +245,7 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
             onClick={clear}
             class="shrink-0 p-1 rounded text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
             title="Clear"
-            aria-label="Clear payee"
+            aria-label={`Clear ${props.noun}`}
           >
             <X size={14} />
           </button>
@@ -274,10 +270,10 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
                 aria-expanded={open()}
                 aria-controls={`${tid("listbox")}`}
                 aria-autocomplete="list"
-                aria-label="Search payees"
+                aria-label={`Search ${props.noun}s`}
                 value={query()}
                 onInput={(e) => setQuery(e.currentTarget.value)}
-                placeholder="Search or add a new payee…"
+                placeholder={props.onCreate ? `Search or add a new ${props.noun}…` : `Search ${props.noun}s…`}
                 class="w-full px-1 py-1 text-sm bg-transparent text-zinc-200 placeholder:text-zinc-600 focus:outline-none"
               />
               <Show when={loading()}>
@@ -300,35 +296,40 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
                   id={tid("listbox")}
                   data-testid={tid("listbox")}
                   role="listbox"
-                  aria-label="Payee search results"
+                  aria-label={`${props.noun} search results`}
                   class="m-0 p-0 list-none"
                 >
                   <For each={results()}>
-                    {(p) => (
-                      <li role="option" aria-selected={props.selected?.id === p.id}>
-                        <button
-                          type="button"
-                          data-testid={`${tid("result")}-${p.id}`}
-                          onClick={() => select(p)}
-                          class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-start gap-2 cursor-pointer"
-                        >
-                          <Store size={14} class="text-zinc-500 shrink-0 mt-0.5" />
-                          <span class="flex-1 min-w-0">
-                            <span class="block text-sm text-zinc-100 truncate">{p.name}</span>
-                            <Show when={p.default_subcategory || p.kind !== "vendor"}>
-                              <span class="block text-[11px] text-zinc-500 truncate">
-                                {[p.kind === "vendor" ? null : p.kind, p.default_subcategory]
-                                  .filter(Boolean)
-                                  .join(" · ")}
+                    {(item) => {
+                      const secondary = props.secondaryOf?.(item) ?? null;
+                      const isSel = () =>
+                        props.selected != null && props.idOf(props.selected) === props.idOf(item);
+                      return (
+                        <li role="option" aria-selected={isSel()}>
+                          <button
+                            type="button"
+                            data-testid={`${tid("result")}-${props.idOf(item)}`}
+                            onClick={() => select(item)}
+                            class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-start gap-2 cursor-pointer"
+                          >
+                            <Icon size={14} class="text-zinc-500 shrink-0 mt-0.5" />
+                            <span class="flex-1 min-w-0">
+                              <span class="block text-sm text-zinc-100 truncate">
+                                {highlightMatch(props.labelOf(item), debouncedQuery().trim())}
                               </span>
+                              <Show when={secondary}>
+                                <span class="block text-[11px] text-zinc-500 truncate">
+                                  {highlightMatch(secondary!, debouncedQuery().trim())}
+                                </span>
+                              </Show>
+                            </span>
+                            <Show when={isSel()}>
+                              <span class="text-amber-400 text-xs shrink-0 mt-0.5">✓</span>
                             </Show>
-                          </span>
-                          <Show when={props.selected?.id === p.id}>
-                            <span class="text-amber-400 text-xs shrink-0 mt-0.5">✓</span>
-                          </Show>
-                        </button>
-                      </li>
-                    )}
+                          </button>
+                        </li>
+                      );
+                    }}
                   </For>
                 </ul>
               </Show>
@@ -348,7 +349,7 @@ export default function PayeePicker(props: PayeePickerProps): JSX.Element {
                       <UserPlus size={14} class="text-emerald-400 shrink-0" />
                     </Show>
                     <span class="text-sm text-emerald-300">
-                      New payee "<span class="font-medium">{trimmedQuery()}</span>"
+                      New {props.noun} "<span class="font-medium">{trimmedQuery()}</span>"
                     </span>
                   </button>
                 </div>

package/src/components/composite/picker-types.ts

@@ -0,0 +1,25 @@
+// Domain option shapes shared across the KahitSan plugins.
+//
+// These previously lived inside the ClientPicker / PayeePicker preset
+// components. Those presets were removed in favour of using the generic
+// EntityPicker directly (consumers wire their own search/onCreate), but the
+// option TYPES are still imported widely (transactions, counter, payees), so
+// they keep a stable home here decoupled from any component.
+
+export type PayeeKind = "vendor" | "customer" | "both";
+
+export interface PayeeOption {
+  id: number;
+  name: string;
+  kind: PayeeKind;
+  default_subcategory?: string | null;
+  notes?: string | null;
+  is_active?: boolean;
+}
+
+export interface ClientOption {
+  id: number;
+  name_raw: string;
+  email?: string | null;
+  phone?: string | null;
+}

package/src/index.ts

@@ -95,11 +95,16 @@ export type { MentionTextareaProps } from "./components/composite/MentionTextare
 export { default as MarkdownNotes } from "./components/composite/MarkdownNotes";
 export type { MarkdownNotesProps } from "./components/composite/MarkdownNotes";
 
-export { default as ClientPicker } from "./components/composite/ClientPicker";
-export type { ClientOption } from "./components/composite/ClientPicker";
-
-export { default as PayeePicker } from "./components/composite/PayeePicker";
-export type { PayeeOption, PayeeKind } from "./components/composite/PayeePicker";
+// The generic searchable-combobox engine — the ONE picker the library ships.
+// Build a payee / client / anything picker by supplying search + onCreate +
+// idOf/labelOf/secondaryOf/icon/noun. (The former ClientPicker / PayeePicker
+// presets were removed; consumers wire the endpoint themselves.)
+export { default as EntityPicker } from "./components/composite/EntityPicker";
+export type { EntityPickerProps } from "./components/composite/EntityPicker";
+
+// Shared domain option shapes for the common pickers, decoupled from any
+// component (still imported across transactions / counter / payees).
+export type { ClientOption, PayeeOption, PayeeKind } from "./components/composite/picker-types";
 
 export { default as VoucherPicker, calculateDiscount } from "./components/composite/VoucherPicker";
 export type { VoucherOption } from "./components/composite/VoucherPicker";

package/src/components/composite/ClientPicker.tsx

@@ -1,358 +0,0 @@
-// Source: KahitSan/kserp src/components/ClientPicker.tsx (vendored into the plugin remote).
-//
-// Cross-plugin picker: fetches the SIBLING clients plugin's public API at
-// /api/clients. Degrades gracefully: when the clients plugin isn't deployed
-// the fetch 404s/fails, the popup shows an inline "couldn't load" notice, and
-// the rest of the transaction modal still works (the sale just has no
-// billed-to client). highlightMatch comes from the host UI kit.
-
-import { Portal } from "solid-js/web";
-import { createEffect, createSignal, For, onCleanup, onMount, Show, type JSX } from "solid-js";
-import UserRound from "lucide-solid/icons/user-round";
-import UserPlus from "lucide-solid/icons/user-plus";
-import Search from "lucide-solid/icons/search";
-import X from "lucide-solid/icons/x";
-import Loader2 from "lucide-solid/icons/loader-2";
-import { highlightMatch } from "@kserp/host-ui";
-
-export interface ClientOption {
-  id: number;
-  name_raw: string;
-  email?: string | null;
-  phone?: string | null;
-}
-
-interface ClientPickerProps {
-  selected: ClientOption | null;
-  onChange: (next: ClientOption | null) => void;
-  onCreate?: (created: ClientOption) => void;
-  disabled?: boolean;
-  defaultOpen?: boolean;
-}
-
-const POPUP_MAX_HEIGHT = 360;
-const POPUP_MIN_WIDTH = 320;
-const SEARCH_DEBOUNCE_MS = 200;
-
-export default function ClientPicker(props: ClientPickerProps): JSX.Element {
-  const [open, setOpen] = createSignal(false);
-  onMount(() => {
-    if (props.defaultOpen) queueMicrotask(() => setOpen(true));
-  });
-  const [query, setQuery] = createSignal("");
-  const [debouncedQuery, setDebouncedQuery] = createSignal("");
-  const [results, setResults] = createSignal<ClientOption[]>([]);
-  const [loading, setLoading] = createSignal(false);
-  const [creating, setCreating] = createSignal(false);
-  const [error, setError] = createSignal<string | null>(null);
-  const [popupStyle, setPopupStyle] = createSignal<JSX.CSSProperties>({});
-
-  let triggerRef: HTMLButtonElement | undefined;
-  let popupRef: HTMLDivElement | undefined;
-  let inputRef: HTMLInputElement | undefined;
-  let debounceTimer: ReturnType<typeof setTimeout> | undefined;
-  let activeFetchToken = 0;
-
-  createEffect(() => {
-    const q = query();
-    if (debounceTimer) clearTimeout(debounceTimer);
-    debounceTimer = setTimeout(() => setDebouncedQuery(q), SEARCH_DEBOUNCE_MS);
-    onCleanup(() => {
-      if (debounceTimer) clearTimeout(debounceTimer);
-    });
-  });
-
-  createEffect(() => {
-    if (!open()) return;
-    const q = debouncedQuery().trim();
-    const token = ++activeFetchToken;
-    setLoading(true);
-    setError(null);
-    const params = new URLSearchParams({ status: "active", limit: "10" });
-    if (q) params.set("search", q);
-    fetch(`/api/clients?${params.toString()}`, { credentials: "include" })
-      .then((r) => {
-        if (!r.ok)
-          throw new Error(
-            r.status === 403
-              ? "Permission denied"
-              : r.status === 404
-                ? "Clients module isn't available"
-                : "Failed to load",
-          );
-        return r.json();
-      })
-      .then((json) => {
-        if (token !== activeFetchToken) return;
-        setResults((json.data || []) as ClientOption[]);
-      })
-      .catch((e) => {
-        if (token !== activeFetchToken) return;
-        setError(e instanceof Error ? e.message : "Failed to load");
-        setResults([]);
-      })
-      .finally(() => {
-        if (token !== activeFetchToken) return;
-        setLoading(false);
-      });
-  });
-
-  const updatePosition = () => {
-    if (!triggerRef) return;
-    const rect = triggerRef.getBoundingClientRect();
-    const vpHeight = window.innerHeight;
-    const vpWidth = window.innerWidth;
-    const width = Math.max(POPUP_MIN_WIDTH, rect.width);
-    const spaceBelow = vpHeight - rect.bottom;
-    const spaceAbove = rect.top;
-    const flipUp = spaceBelow < POPUP_MAX_HEIGHT && spaceAbove > spaceBelow;
-    const top = flipUp ? Math.max(8, rect.top - POPUP_MAX_HEIGHT - 4) : rect.bottom + 4;
-    const maxHeight = Math.max(
-      200,
-      Math.min(POPUP_MAX_HEIGHT, flipUp ? spaceAbove - 12 : spaceBelow - 12),
-    );
-    const left = Math.min(Math.max(8, rect.left), vpWidth - width - 8);
-    setPopupStyle({
-      position: "fixed",
-      top: `${top}px`,
-      left: `${left}px`,
-      width: `${width}px`,
-      "max-height": `${maxHeight}px`,
-    });
-  };
-
-  createEffect(() => {
-    if (!open()) return;
-    updatePosition();
-    queueMicrotask(() => inputRef?.focus());
-
-    const onDocClick = (e: MouseEvent) => {
-      const t = e.target as Node;
-      if (triggerRef?.contains(t)) return;
-      if (popupRef?.contains(t)) return;
-      close();
-    };
-    const onEsc = (e: KeyboardEvent) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        close();
-      }
-    };
-    const onReflow = () => updatePosition();
-
-    document.addEventListener("mousedown", onDocClick);
-    document.addEventListener("keydown", onEsc, true);
-    window.addEventListener("resize", onReflow);
-    window.addEventListener("scroll", onReflow, true);
-    onCleanup(() => {
-      document.removeEventListener("mousedown", onDocClick);
-      document.removeEventListener("keydown", onEsc, true);
-      window.removeEventListener("resize", onReflow);
-      window.removeEventListener("scroll", onReflow, true);
-    });
-  });
-
-  const close = () => {
-    setOpen(false);
-    setQuery("");
-    setDebouncedQuery("");
-    setResults([]);
-    setError(null);
-  };
-
-  const trimmedQuery = () => query().trim();
-
-  const hasExactMatch = () => {
-    const q = trimmedQuery().toLowerCase();
-    if (!q) return true;
-    return results().some((r) => r.name_raw.trim().toLowerCase() === q);
-  };
-
-  const showCreateOption = () => trimmedQuery().length > 0 && !hasExactMatch() && !loading();
-
-  const select = (c: ClientOption) => {
-    props.onChange(c);
-    close();
-  };
-
-  const createAndSelect = async () => {
-    const name = trimmedQuery();
-    if (!name || creating()) return;
-    setCreating(true);
-    setError(null);
-    try {
-      const res = await fetch("/api/clients", {
-        method: "POST",
-        credentials: "include",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ name_raw: name }),
-      });
-      if (!res.ok) {
-        const body = await res.json().catch(() => ({ error: "Failed to create client" }));
-        throw new Error(body.error || "Failed to create client");
-      }
-      const created = (await res.json()) as ClientOption;
-      props.onChange(created);
-      props.onCreate?.(created);
-      close();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to create client");
-    } finally {
-      setCreating(false);
-    }
-  };
-
-  const clear = (e: MouseEvent) => {
-    e.stopPropagation();
-    props.onChange(null);
-  };
-
-  return (
-    <>
-      <button
-        ref={triggerRef}
-        type="button"
-        data-testid="client-picker-trigger"
-        disabled={props.disabled}
-        onClick={() => !props.disabled && setOpen((o) => !o)}
-        class={`w-full mt-1.5 flex items-center gap-2 px-3 py-2.5 rounded-lg border transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60 ${
-          props.selected
-            ? "bg-zinc-800/30 border-zinc-700/50 hover:border-amber-500/40 hover:bg-amber-500/5"
-            : "bg-red-500/5 border-red-500/40 hover:bg-red-500/10 hover:border-red-500/60"
-        }`}
-        aria-haspopup="listbox"
-        aria-expanded={open()}
-      >
-        <UserRound size={16} class={`shrink-0 ${props.selected ? "text-zinc-400" : "text-red-300"}`} />
-        <Show
-          when={props.selected}
-          fallback={<span class="text-red-300/90 italic">Walk-in (tap to pick a client)</span>}
-        >
-          <span class="flex-1 min-w-0">
-            <span class="block truncate text-zinc-100 font-medium">{props.selected!.name_raw}</span>
-            <Show when={props.selected!.email || props.selected!.phone}>
-              <span class="block truncate text-[11px] text-zinc-500">
-                {props.selected!.email || props.selected!.phone}
-              </span>
-            </Show>
-          </span>
-          <button
-            type="button"
-            data-testid="client-picker-clear"
-            onClick={clear}
-            class="shrink-0 p-1 rounded text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
-            title="Reset to walk-in"
-            aria-label="Reset to walk-in"
-          >
-            <X size={14} />
-          </button>
-        </Show>
-      </button>
-
-      <Show when={open()}>
-        <Portal>
-          <div
-            ref={popupRef}
-            data-testid="client-picker-popup"
-            class="z-[100] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
-            style={popupStyle()}
-          >
-            <div class="px-2 py-2 border-b border-zinc-800 flex items-center gap-2">
-              <Search size={14} class="text-zinc-500 shrink-0 ml-1" />
-              <input
-                ref={inputRef}
-                type="text"
-                data-testid="client-picker-input"
-                role="combobox"
-                aria-expanded={open()}
-                aria-controls="client-picker-listbox"
-                aria-autocomplete="list"
-                aria-label="Search clients"
-                value={query()}
-                onInput={(e) => setQuery(e.currentTarget.value)}
-                placeholder="Search clients by name, email, phone…"
-                class="w-full px-1 py-1 text-sm bg-transparent text-zinc-200 placeholder:text-zinc-600 focus:outline-none"
-              />
-              <Show when={loading()}>
-                <Loader2 size={14} class="animate-spin text-zinc-500 mr-1 shrink-0" />
-              </Show>
-            </div>
-            <div class="flex-1 overflow-y-auto">
-              <Show when={error()}>
-                <div role="status" class="px-3 py-2 text-xs text-red-400">
-                  {error()}
-                </div>
-              </Show>
-              <Show when={!loading() && results().length === 0 && !showCreateOption() && !error()}>
-                <div role="status" class="px-3 py-4 text-xs text-zinc-500 text-center">
-                  {trimmedQuery() ? "No matches" : "Type to search clients…"}
-                </div>
-              </Show>
-              <Show when={results().length > 0}>
-                <ul
-                  id="client-picker-listbox"
-                  data-testid="client-picker-listbox"
-                  role="listbox"
-                  aria-label="Client search results"
-                  class="m-0 p-0 list-none"
-                >
-                  <For each={results()}>
-                    {(c) => (
-                      <li role="option" aria-selected={props.selected?.id === c.id}>
-                        <button
-                          type="button"
-                          data-testid={`client-picker-result-${c.id}`}
-                          onClick={() => select(c)}
-                          class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-start gap-2 cursor-pointer"
-                        >
-                          <UserRound size={14} class="text-zinc-500 shrink-0 mt-0.5" />
-                          <span class="flex-1 min-w-0">
-                            <span class="block text-sm text-zinc-100 truncate">
-                              {highlightMatch(c.name_raw, debouncedQuery().trim())}
-                            </span>
-                            <Show when={c.email || c.phone}>
-                              <span class="block text-[11px] text-zinc-500 truncate">
-                                {highlightMatch(
-                                  [c.email, c.phone].filter(Boolean).join(" · "),
-                                  debouncedQuery().trim(),
-                                )}
-                              </span>
-                            </Show>
-                          </span>
-                          <Show when={props.selected?.id === c.id}>
-                            <span class="text-amber-400 text-xs shrink-0 mt-0.5">✓</span>
-                          </Show>
-                        </button>
-                      </li>
-                    )}
-                  </For>
-                </ul>
-              </Show>
-              <Show when={showCreateOption()}>
-                <div class="border-t border-zinc-800">
-                  <button
-                    type="button"
-                    data-testid="client-picker-create"
-                    onClick={createAndSelect}
-                    disabled={creating()}
-                    class="w-full text-left px-3 py-2.5 hover:bg-emerald-500/10 transition-colors flex items-center gap-2 cursor-pointer disabled:cursor-wait disabled:opacity-60"
-                  >
-                    <Show
-                      when={!creating()}
-                      fallback={<Loader2 size={14} class="animate-spin text-emerald-400 shrink-0" />}
-                    >
-                      <UserPlus size={14} class="text-emerald-400 shrink-0" />
-                    </Show>
-                    <span class="text-sm text-emerald-300">
-                      Create "<span class="font-medium">{trimmedQuery()}</span>"
-                    </span>
-                  </button>
-                </div>
-              </Show>
-            </div>
-          </div>
-        </Portal>
-      </Show>
-    </>
-  );
-}