@kahitsan/ksui 0.10.2 → 0.11.0

package/src/components/base/ExistingAttachmentTile.tsx

@@ -1,14 +1,14 @@
 // Renders one already-uploaded attachment as a 24×24 tile: an image preview or
 // a paperclip/file fallback linking to the s3_link public URL, an "Unavailable"
 // placeholder when the link can't be resolved (see lib/attachments.ts), and an
-// optional remove button. confirm comes from the host UI kit. The third of the
-// attachment widget set alongside AddAttachmentTile + CameraCapture.
+// optional remove button. confirm is ksui's own self-contained dialog. The third
+// of the attachment widget set alongside AddAttachmentTile + CameraCapture.
 
 import { Show, type Component } from "solid-js";
 import Paperclip from "lucide-solid/icons/paperclip";
 import X from "lucide-solid/icons/x";
 import TriangleAlert from "lucide-solid/icons/triangle-alert";
-import { confirm } from "@kserp/host-ui";
+import { confirm } from "../../utils/confirm";
 import { attachmentUrl, isResolvableAttachment } from "../../utils/attachments";
 
 export interface ExistingAttachment {

package/src/components/base/ImageCropper.tsx

@@ -4,12 +4,12 @@
 // corner to resize it. On Apply, the selected region is rendered to a canvas
 // at the requested output size and handed back as a WebP Blob.
 //
-// The widget is dependency-free beyond the host kit: it uses the host's
-// Modal + Button (provided by the consumer via "@kserp/host-ui"), solid-js,
+// The widget is self-contained: it uses ksui's own Modal + Button, solid-js,
 // and a single lucide icon.
 
 import { createSignal, onCleanup, onMount, Show } from "solid-js";
-import { Modal, Button } from "@kserp/host-ui";
+import Modal from "./Modal";
+import Button from "./Button";
 import X from "lucide-solid/icons/x";
 
 interface ImageCropperProps {

package/src/components/base/Modal.tsx

@@ -0,0 +1,198 @@
+// Self-contained modal dialog. Promoted into ksui from the former host kit so
+// the library no longer depends on "@kserp/host-ui": ImageCropper (the only
+// in-library consumer) now imports Modal from here.
+//
+// Like Button/ProgressBar, ksui publishes no sidecar .css — the styles are
+// injected once per page via a runtime <style> tag and referenced with plain,
+// unscoped `ksui-modal-*` class names, so the component carries no Tailwind or
+// host-brand-class dependency. Surface/border colors read from CSS custom
+// properties (`--ksui-modal-bg`, `--ksui-modal-border`) with dark-friendly
+// fallbacks, so a consumer can retint without forking the component.
+//
+// Lifecycle matches the original: mount === open, unmount === closed (wrap in
+// `<Show when={…}>`). The default variant uses the native <dialog> element
+// (top-layer rendering, native ::backdrop, browser Escape + focus trap); the
+// sheet variant uses a <div> overlay so child popovers Portaled into
+// document.body still compose above the backdrop via z-index.
+
+import { JSX, onCleanup, onMount, splitProps } from "solid-js";
+import { autoFocusOnMount, lockPullToRefresh, unlockPullToRefresh, useFocusTrap } from "../../utils/dom";
+
+export type ModalSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "5xl" | "7xl";
+export type ModalTone = "default" | "danger";
+
+const SIZE_MAX_WIDTH: Record<ModalSize, string> = {
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  "2xl": "42rem",
+  "3xl": "48rem",
+  "5xl": "64rem",
+  "7xl": "80rem",
+};
+
+const STYLE_ID = "ksui-modal-style";
+
+function ensureModalStyle(): void {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ID)) return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = `
+.ksui-modal-dialog{position:fixed;inset:0;z-index:50;background:transparent;padding:0;margin:0;max-width:none;max-height:none;width:100vw;height:100vh;border:0;}
+.ksui-modal-dialog[open]{display:flex;align-items:center;justify-content:center;padding:1rem;}
+.ksui-modal-dialog::backdrop{background:rgba(0,0,0,0.6);backdrop-filter:blur(4px);}
+.ksui-modal-sheet-overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;}
+@media (min-width:640px){.ksui-modal-sheet-overlay{align-items:center;padding:1rem;}}
+.ksui-modal-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0.7);backdrop-filter:blur(6px);}
+.ksui-modal-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,#11161f);color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));border-radius:0.75rem;padding:1.5rem;box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:90vh;overflow-x:hidden;overflow-y:auto;}
+.ksui-modal-card.danger{border-color:var(--ksui-modal-border-danger,rgba(239,68,68,0.3));}
+.ksui-modal-sheet-card{position:relative;z-index:10;width:100%;background:var(--ksui-modal-bg,#11161f);color:var(--ksui-modal-fg,inherit);border:1px solid var(--ksui-modal-border,rgba(245,158,11,0.3));box-shadow:0 25px 50px -12px rgba(0,0,0,0.6);max-height:92vh;overflow:hidden;overscroll-behavior:contain;}
+.ksui-modal-sheet-card.danger{border-color:var(--ksui-modal-border-danger,rgba(239,68,68,0.3));}
+@media (min-width:640px){.ksui-modal-sheet-card{width:auto;border-radius:0.75rem;max-height:88vh;}}
+`;
+  document.head.appendChild(style);
+}
+
+export interface ModalProps {
+  /** Fired on Escape, backdrop click, or any other dismissal trigger. */
+  onClose: () => void;
+  /** When false, Escape and backdrop clicks are ignored. Defaults to true. */
+  dismissable?: boolean;
+  /** "default" is a centered native-<dialog> card; "sheet" is a bottom-sheet <div> overlay. */
+  variant?: "default" | "sheet";
+  /** Outer card max width. Defaults to "lg" (default variant) / "3xl" (sheet). */
+  size?: ModalSize;
+  /** Border tint. "danger" for destructive confirms. Defaults to "default". */
+  tone?: ModalTone;
+  /** Optional accessible name for the dialog. */
+  ariaLabel?: string;
+  children: JSX.Element;
+}
+
+type LocalProps = Omit<ModalProps, "variant">;
+
+export function Modal(props: ModalProps): JSX.Element {
+  ensureModalStyle();
+  const [local] = splitProps(props, [
+    "onClose",
+    "dismissable",
+    "size",
+    "tone",
+    "ariaLabel",
+    "children",
+  ]);
+  // Variant is read once at mount; call sites pick it statically.
+  if (props.variant === "sheet") return SheetModal(local, props.size);
+  return DialogModal(local);
+}
+
+function DialogModal(local: LocalProps): JSX.Element {
+  let dialogEl: HTMLDialogElement | undefined;
+
+  lockPullToRefresh();
+  onCleanup(unlockPullToRefresh);
+
+  onMount(() => {
+    if (!dialogEl) return;
+    if (!dialogEl.open) {
+      try {
+        dialogEl.showModal();
+      } catch {
+        // showModal throws if already open or detached; harmless to ignore.
+      }
+    }
+  });
+
+  onCleanup(() => {
+    if (dialogEl?.open) dialogEl.close();
+    queueMicrotask(() => {
+      for (const el of document.querySelectorAll<HTMLDialogElement>("dialog[open]")) {
+        if (el !== dialogEl && el.isConnected && !el.matches(":modal")) {
+          try {
+            el.close();
+            el.showModal();
+          } catch {
+            // detached, or showModal disallowed; skip it.
+          }
+        }
+      }
+    });
+  });
+
+  const handleCancel = (e: Event) => {
+    e.preventDefault();
+    if (local.dismissable === false) return;
+    local.onClose();
+  };
+  const handleBackdropClick = (e: MouseEvent) => {
+    if (local.dismissable === false) return;
+    if (e.target === dialogEl) local.onClose();
+  };
+
+  return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+    <dialog
+      ref={dialogEl}
+      aria-modal="true"
+      aria-label={local.ariaLabel}
+      onCancel={handleCancel}
+      onClick={handleBackdropClick}
+      class="ksui-modal-dialog"
+    >
+      <div
+        ref={(el) => {
+          autoFocusOnMount(el);
+          onCleanup(useFocusTrap(el));
+        }}
+        class={`ksui-modal-card${local.tone === "danger" ? " danger" : ""}`}
+        style={{ "max-width": SIZE_MAX_WIDTH[local.size ?? "lg"] }}
+      >
+        {local.children}
+      </div>
+    </dialog>
+  );
+}
+
+function SheetModal(local: LocalProps, size?: ModalSize): JSX.Element {
+  lockPullToRefresh();
+  onCleanup(unlockPullToRefresh);
+
+  const handleKey = (e: KeyboardEvent) => {
+    if (e.key !== "Escape") return;
+    if (local.dismissable === false) return;
+    local.onClose();
+  };
+  if (typeof window !== "undefined") {
+    window.addEventListener("keydown", handleKey);
+    onCleanup(() => window.removeEventListener("keydown", handleKey));
+  }
+
+  const handleBackdropClick = () => {
+    if (local.dismissable === false) return;
+    local.onClose();
+  };
+
+  return (
+    <div class="ksui-modal-sheet-overlay">
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      <div class="ksui-modal-sheet-backdrop" onClick={handleBackdropClick} />
+      <div
+        ref={(el) => {
+          autoFocusOnMount(el);
+          onCleanup(useFocusTrap(el));
+        }}
+        role="dialog"
+        aria-modal="true"
+        aria-label={local.ariaLabel}
+        class={`ksui-modal-sheet-card${local.tone === "danger" ? " danger" : ""}`}
+        style={{ "max-width": SIZE_MAX_WIDTH[size ?? "3xl"] }}
+      >
+        {local.children}
+      </div>
+    </div>
+  );
+}
+
+export default Modal;

package/src/components/composite/ComboBox.tsx

@@ -21,7 +21,7 @@
 
 import { Portal } from "solid-js/web";
 import { createEffect, createSignal, For, onMount, Show, type JSX } from "solid-js";
-import { highlightMatch } from "@kserp/host-ui";
+import { highlightMatch } from "../../utils/highlight";
 import UserPlus from "lucide-solid/icons/user-plus";
 import Search from "lucide-solid/icons/search";
 import Star from "lucide-solid/icons/star";
@@ -98,7 +98,7 @@ export type ComboBoxProps<T> = ComboBoxSingleProps<T> | ComboBoxMultiProps<T>;
 
 export default function ComboBox<T>(props: ComboBoxProps<T>): JSX.Element {
   // Mode is read once at setup — call sites pick single/multi statically (same
-  // convention as the host-ui Modal variant). Narrowing makes each branch see
+  // convention as the Modal variant). Narrowing makes each branch see
   // its concrete prop shape.
   if (props.multiple) return MultiComboBox(props);
   return SingleComboBox(props);

package/src/components/composite/FormActions.tsx

@@ -1,4 +1,4 @@
-// Cancel / Submit modal footer row, composing the host Button.
+// Cancel / Submit modal footer row, composing ksui's own Button.
 //
 // The same footer is repeated across plugin modals: a
 // `flex flex-col-reverse sm:flex-row gap-2 sm:justify-end` row with a
@@ -8,14 +8,14 @@
 // handlers, saving state, optional icon) as props. No fetch/API call lives
 // here — the caller owns the submit handler.
 //
-// ModalShell is deliberately NOT promoted: the host Modal already supplies the
+// ModalShell is deliberately NOT promoted: the ksui Modal already supplies the
 // backdrop, card, title/close-X path, aria-modal, focus trap, size and tone
-// tokens. Only the body chrome the host Modal does not cover (FormErrorBanner +
+// tokens. Only the body chrome the Modal does not cover (FormErrorBanner +
 // FormActions) is promoted.
 
 import type { JSX } from "solid-js";
 import { Show } from "solid-js";
-import { Button } from "@kserp/host-ui";
+import Button from "../base/Button";
 
 export interface FormActionsProps {
   /** Invoked when the Cancel button is clicked. */

package/src/components/composite/MarkdownNotes.tsx

@@ -3,12 +3,15 @@
 // Renders transaction `notes` with a restricted markdown subset and inline
 // client-mention chips (@[Name](client:N)). Adapted for the remote: routing is
 // host-owned so mention chips link via a plain <a href> instead of @solidjs/
-// router's <A>; usePermissions + highlightMatch come from the host UI kit. The
-// hover card fetches the SIBLING clients plugin at /api/clients/:id and
-// degrades to a non-hovering chip when that 404s.
+// router's <A>; highlightMatch is ksui's own helper and the client-view
+// permission is read through ksui's opt-in integration registry (canAccess),
+// which degrades to false when the host hasn't configured one. The hover card
+// fetches the SIBLING clients plugin at /api/clients/:id and degrades to a
+// non-hovering chip when that 404s.
 
 import { For, Show, createMemo, createSignal, createUniqueId, onCleanup, type JSX } from "solid-js";
-import { usePermissions, highlightMatch } from "@kserp/host-ui";
+import { highlightMatch } from "../../utils/highlight";
+import { canAccess } from "../../utils/integration";
 
 const MENTION_RE = /@\[([^\]]+)\](?:\(client:(\d+)\))?/g;
 
@@ -329,13 +332,7 @@ function MentionHoverCard(props: { clientId: number; name: string }): JSX.Elemen
 }
 
 function MentionChip(props: { name: string; clientId: number | null }): JSX.Element {
-  let canViewClients = () => false;
-  try {
-    const perms = usePermissions();
-    canViewClients = () => perms.has("clients.view");
-  } catch {
-    /* no provider in context, leave canViewClients() returning false */
-  }
+  const canViewClients = () => canAccess("clients.view");
 
   return (
     <Show

package/src/index.ts

@@ -1,20 +1,20 @@
-// @kahitsan/ksui: shared SolidJS UI components for KahitSan/Hilinga plugins.
+// @kahitsan/ksui: a standalone SolidJS UI component library.
 //
-// These were copied byte-for-byte across plugins (counter, transactions, ...);
-// this package is the single canonical copy, PUBLISHED to GitHub Packages and
-// consumed as a normal dependency from `node_modules`: a plugin `npm install`s
-// the published version.
-// The package ships its source under a `solid` export condition (see
-// package.json), so the consumer's vite-plugin-solid compiles these components
-// while solid-js and `@kserp/host-ui` stay EXTERNALIZED to the host runtime
-// globals. The plugin IIFE bundles them identically to a local copy: no runtime
-// change, single Solid instance, host UI kit reused. The `@kserp/host-ui` ambient
-// type contract ships alongside (host-ui.d.ts, the `./host-ui` export).
+// Published to the public npm registry and consumed as a normal dependency. The
+// package ships its source under a `solid` export condition (see package.json),
+// so the consumer's vite-plugin-solid compiles these components while solid-js
+// stays EXTERNALIZED to the app's runtime so there is a single Solid instance.
+// The library is self-contained: it depends only on solid-js + lucide-solid and
+// injects its own CSS at runtime — no host UI kit, no Tailwind, no app-provided
+// primitives are required. Components that can integrate with a surrounding app
+// (a permission check, the active workspace) do so through an OPTIONAL opt-in
+// registry (configurePermissions / configureActiveWorkspace) and degrade
+// gracefully when it is not configured.
 //
 // Components live under two folders by category:
-//   base/      a primitive that stands on its own. It uses only solid-js,
-//              lucide-solid, and/or the host kit via "@kserp/host-ui". It does
-//              not import another ksui component.
+//   base/      a primitive that stands on its own. It uses only solid-js and
+//              lucide-solid (plus ksui's own utils). It does not import another
+//              ksui component.
 //   composite/ a component that wraps a base or composes two or more components
 //              into a higher-level widget.
 // See CONTRIBUTING.md for the placement rule when adding a new component.
@@ -72,6 +72,24 @@ export { default as StatusIndicator, type StatusIndicatorProps, type StatusIndic
 export { default as SectionHeading, type SectionHeadingProps, type SectionHeadingAlign, type SectionHeadingLevel } from "./components/base/SectionHeading";
 export { default as EyebrowBadge, type EyebrowBadgeProps, type EyebrowTone, type EyebrowTracking } from "./components/base/EyebrowBadge";
 
+// Self-contained modal dialog (promoted from the former host kit). Injects its
+// own CSS; no Tailwind / host-brand classes required.
+export { default as Modal, type ModalProps, type ModalSize, type ModalTone } from "./components/base/Modal";
+
+// Server-side / client-side data table with debounced search, column sort,
+// pagination + "Show more" load mode, a filters slot, optional date filter, and
+// an onRefetch handle. Ported from the host kit; injects its own CSS, no Tailwind.
+// The type surface mirrors the kernel's @kserp/host-ui contract exactly, so a
+// caller written against host-ui works unchanged here.
+export {
+  default as DataTable,
+  type DataTableProps,
+  type DataTableColumn,
+  type DataTableRow,
+  type FetchParams,
+  type FetchResult,
+} from "./components/base/DataTable";
+
 // ---------------------------------------------------------------------------
 // Composite components
 // ---------------------------------------------------------------------------
@@ -139,3 +157,18 @@ export { INPUT_CLASS } from "./utils/INPUT_CLASS";
 export { formatPHP } from "./utils/formatPHP";
 export { formatShortDate } from "./utils/formatShortDate";
 export { formatFullDate } from "./utils/formatFullDate";
+
+// Self-contained helpers promoted from the former host kit so the library has no
+// "@kserp/host-ui" dependency.
+export { highlightMatch, HighlightedText, matchesQuery, matchesAny } from "./utils/highlight";
+export { confirm, type ConfirmOptions } from "./utils/confirm";
+export { useFocusTrap, autoFocusOnMount, lockPullToRefresh, unlockPullToRefresh } from "./utils/dom";
+
+// Optional host integrations. Components degrade gracefully when these are not
+// configured; a host app opts in once at startup.
+export {
+  configurePermissions,
+  configureActiveWorkspace,
+  canAccess,
+  getActiveWorkspaceId,
+} from "./utils/integration";

package/src/utils/accounts-index.tsx

@@ -9,14 +9,16 @@
 // The monolith mounts a Provider in the app shell and shares one resource via
 // context. The plugin remote has no such provider, so this version owns a
 // module-level resource created on first use and re-keyed on the active org id
-// (read from the host's useActiveWorkspace()). Because plugin-ui ships as source
-// compiled into each plugin's IIFE, the module-level singleton stays per-plugin.
+// (read from ksui's opt-in integration registry, getActiveWorkspaceId(); a host
+// wires it via configureActiveWorkspace, and it degrades to null — empty index —
+// when unconfigured). Because ksui ships as source compiled into each plugin's
+// IIFE, the module-level singleton stays per-plugin.
 // Degrades gracefully: when the financial-accounts plugin isn't deployed the
 // fetch 404s/fails and the index stays empty, so resolveAccount() then falls back
 // to the type-default glyph.
 
 import { createResource, type Resource } from "solid-js";
-import { useActiveWorkspace } from "@kserp/host-ui";
+import { getActiveWorkspaceId } from "./integration";
 import type { AvatarAccount } from "../components/base/AccountAvatar";
 
 interface IndexShape {
@@ -28,7 +30,7 @@ interface IndexShape {
   nameById: Map<number | string, string>;
 }
 
-async function fetchAccountsIndex(wsId: number | null): Promise<IndexShape> {
+async function fetchAccountsIndex(wsId: number | string | null): Promise<IndexShape> {
   const byId = new Map<number | string, AvatarAccount>();
   const nameById = new Map<number | string, string>();
   if (wsId == null) return { byId, nameById };
@@ -73,8 +75,7 @@ let sharedResource: Resource<IndexShape> | undefined;
 
 export function useAccountsIndex(): Resource<IndexShape> {
   if (!sharedResource) {
-    const { activeWorkspace } = useActiveWorkspace();
-    const [data] = createResource(() => activeWorkspace()?.ws_id ?? null, fetchAccountsIndex);
+    const [data] = createResource(() => getActiveWorkspaceId(), fetchAccountsIndex);
     sharedResource = data;
   }
   return sharedResource;

package/src/utils/confirm.tsx

@@ -0,0 +1,84 @@
+// Promise-based confirm dialog. Ported into ksui from the former host kit so the
+// library is self-contained: ExistingAttachmentTile used to import `confirm`
+// from "@kserp/host-ui"; it now imports it from here.
+//
+// Renders a ksui Modal + Buttons imperatively (outside any component tree) into
+// a transient container appended to <body>, resolves the returned promise when
+// the user confirms/cancels/dismisses, then tears the container down. No host
+// kit, no Tailwind — Modal and Button inject their own styles.
+
+import { createSignal, Show } from "solid-js";
+import { render } from "solid-js/web";
+import Modal from "../components/base/Modal";
+import Button from "../components/base/Button";
+
+export interface ConfirmOptions {
+  title?: string;
+  message?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  /** Tints the dialog + confirm button for destructive actions. */
+  danger?: boolean;
+}
+
+export function confirm(opts: ConfirmOptions): Promise<boolean> {
+  // SSR / non-DOM: no way to ask, so default to "no".
+  if (typeof document === "undefined") return Promise.resolve(false);
+
+  return new Promise<boolean>((resolve) => {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+
+    const [open, setOpen] = createSignal(true);
+    let settled = false;
+    let dispose = () => {};
+
+    const finish = (result: boolean) => {
+      if (settled) return;
+      settled = true;
+      setOpen(false);
+      // Let the Modal run its unmount/cleanup before yanking the container.
+      queueMicrotask(() => {
+        dispose();
+        host.remove();
+        resolve(result);
+      });
+    };
+
+    dispose = render(
+      () => (
+        <Show when={open()}>
+          <Modal
+            onClose={() => finish(false)}
+            size="sm"
+            tone={opts.danger ? "danger" : "default"}
+            ariaLabel={opts.title ?? "Confirm"}
+          >
+            <div style={{ display: "flex", "flex-direction": "column", gap: "0.75rem" }}>
+              <Show when={opts.title}>
+                <h2 style={{ margin: 0, "font-size": "1.125rem", "font-weight": 600 }}>{opts.title}</h2>
+              </Show>
+              <Show when={opts.message}>
+                <p style={{ margin: 0, "font-size": "0.875rem", opacity: 0.85 }}>{opts.message}</p>
+              </Show>
+              <div style={{ display: "flex", "justify-content": "flex-end", gap: "0.5rem", "margin-top": "0.5rem" }}>
+                <Button type="button" intent="secondary" variant="ghost" onClick={() => finish(false)}>
+                  {opts.cancelLabel ?? "Cancel"}
+                </Button>
+                <Button
+                  type="button"
+                  intent={opts.danger ? "danger" : "primary"}
+                  variant="clip1"
+                  onClick={() => finish(true)}
+                >
+                  {opts.confirmLabel ?? "Confirm"}
+                </Button>
+              </div>
+            </div>
+          </Modal>
+        </Show>
+      ),
+      host,
+    );
+  });
+}