@kahitsan/ksui 0.8.0 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kahitsan/ksui",
-  "version": "0.8.0",
+  "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/EntityPicker.tsx

@@ -6,8 +6,8 @@
 //
 // 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`. Thin presets (ClientPicker, PayeePicker) pass
-// those in, so there is exactly one copy of the popup mechanics.
+// `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

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,16 +95,16 @@ export type { MentionTextareaProps } from "./components/composite/MentionTextare
 export { default as MarkdownNotes } from "./components/composite/MarkdownNotes";
 export type { MarkdownNotesProps } from "./components/composite/MarkdownNotes";
 
-// The generic searchable-combobox engine. ClientPicker / PayeePicker are thin
-// presets over it; new pickers can use EntityPicker directly.
+// 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";
 
-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";
+// 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,86 +0,0 @@
-// ClientPicker — the client preset of EntityPicker. A searchable combobox for a
-// "billed-to" / client field, backed by the sibling clients plugin's
-// /api/clients. All the popup mechanics live in EntityPicker; this file only
-// wires the clients endpoint, option shape (name_raw + email/phone), icon, and
-// the post-create callback.
-//
-// Public API is unchanged from the standalone version, so existing callers keep
-// working. Degrades gracefully when the clients plugin isn't deployed.
-
-import { type JSX } from "solid-js";
-import UserRound from "lucide-solid/icons/user-round";
-import EntityPicker from "./EntityPicker";
-
-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;
-}
-
-async function searchClients(query: string): Promise<ClientOption[]> {
-  const params = new URLSearchParams({ status: "active", limit: "10" });
-  if (query) params.set("search", query);
-  const r = await fetch(`/api/clients?${params.toString()}`, { credentials: "include" });
-  if (!r.ok) {
-    throw new Error(
-      r.status === 403
-        ? "Permission denied"
-        : r.status === 404
-          ? "Clients module isn't available — type a name instead"
-          : "Failed to load",
-    );
-  }
-  const json = await r.json();
-  return (json.data || []) as ClientOption[];
-}
-
-async function createClient(name: string): Promise<ClientOption> {
-  const res = await fetch("/api/clients", {
-    method: "POST",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name_raw: name }),
-  });
-  if (!res.ok && res.status !== 200) {
-    const body = await res.json().catch(() => ({ error: "Failed to create client" }));
-    throw new Error(body.error || "Failed to create client");
-  }
-  return (await res.json()) as ClientOption;
-}
-
-function clientSecondary(c: ClientOption): string | null {
-  return [c.email, c.phone].filter(Boolean).join(" · ") || null;
-}
-
-export default function ClientPicker(props: ClientPickerProps): JSX.Element {
-  return (
-    <EntityPicker<ClientOption>
-      selected={props.selected}
-      onChange={props.onChange}
-      search={searchClients}
-      onCreate={async (name) => {
-        const created = await createClient(name);
-        props.onCreate?.(created);
-        return created;
-      }}
-      idOf={(c) => c.id}
-      labelOf={(c) => c.name_raw}
-      secondaryOf={clientSecondary}
-      icon={UserRound}
-      noun="client"
-      placeholder="Walk-in"
-      disabled={props.disabled}
-      defaultOpen={props.defaultOpen}
-      testIdPrefix="client-picker"
-    />
-  );
-}

package/src/components/composite/PayeePicker.tsx

@@ -1,91 +0,0 @@
-// PayeePicker — the payee preset of EntityPicker. A searchable combobox for the
-// "Paid to" / "Received from" / "Payable to" field, backed by the sibling payees
-// plugin's /api/payees. All the popup mechanics live in EntityPicker; this file
-// only wires the payee endpoint, option shape, icon, and create-as-kind.
-//
-// Public API is unchanged from the standalone version, so existing callers keep
-// working. Degrades gracefully — a missing payees plugin surfaces a notice and
-// the free-text fallback (selectedName) keeps the trigger usable.
-
-import { type JSX } from "solid-js";
-import Store from "lucide-solid/icons/store";
-import EntityPicker from "./EntityPicker";
-
-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;
-}
-
-interface PayeePickerProps {
-  selected: PayeeOption | null;
-  selectedName?: string | null;
-  kind?: PayeeKind;
-  createAsKind?: PayeeKind;
-  placeholder?: string;
-  onChange: (next: PayeeOption | null) => void;
-  disabled?: boolean;
-  testIdPrefix?: string;
-}
-
-async function searchPayees(query: string, kind?: PayeeKind): Promise<PayeeOption[]> {
-  const params = new URLSearchParams({ status: "active", limit: "20" });
-  if (query) params.set("search", query);
-  if (kind) params.set("kind", kind);
-  const r = await fetch(`/api/payees?${params.toString()}`, { credentials: "include" });
-  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",
-    );
-  }
-  const json = await r.json();
-  return (json.data || []) as PayeeOption[];
-}
-
-async function createPayee(name: string, kind: PayeeKind): Promise<PayeeOption> {
-  const res = await fetch("/api/payees", {
-    method: "POST",
-    credentials: "include",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ name, kind }),
-  });
-  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");
-  }
-  return (await res.json()) as PayeeOption;
-}
-
-function payeeSecondary(p: PayeeOption): string | null {
-  if (!p.default_subcategory && p.kind === "vendor") return null;
-  return [p.kind === "vendor" ? null : p.kind, p.default_subcategory].filter(Boolean).join(" · ") || null;
-}
-
-export default function PayeePicker(props: PayeePickerProps): JSX.Element {
-  return (
-    <EntityPicker<PayeeOption>
-      selected={props.selected}
-      selectedName={props.selectedName}
-      onChange={props.onChange}
-      search={(q) => searchPayees(q, props.kind)}
-      onCreate={(name) => createPayee(name, props.createAsKind ?? props.kind ?? "vendor")}
-      idOf={(p) => p.id}
-      labelOf={(p) => p.name}
-      secondaryOf={payeeSecondary}
-      icon={Store}
-      noun="payee"
-      placeholder={props.placeholder}
-      disabled={props.disabled}
-      testIdPrefix={props.testIdPrefix ?? "payee-picker"}
-    />
-  );
-}