@kahitsan/ksui 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Luis Edward M. Miranda
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+# @kahitsan/ksui
+
+The single canonical copy of the shared SolidJS UI components that KahitSan/Hilinga
+plugins consume — pickers, the mention textarea, markdown notes, the camera +
+attachment tiles, and the data-driven account avatar — plus the `@kserp/host-ui`
+ambient type contract for the host UI kit.
+
+Extracted from `kserp/packages/plugin-ui` (`@kahitsan/plugin-ui`) into its own repo
+so the UI package versions and publishes independently of the kernel.
+
+## Install
+
+Published to the **public npm registry** (npmjs.com) as `@kahitsan/ksui` — no
+registry config or auth needed:
+
+```
+npm install @kahitsan/ksui
+```
+
+## How it ships
+
+This is a SolidJS component library shipped as **source** under a `solid` export
+condition (see `package.json`). The consumer's `vite-plugin-solid` compiles the
+components, while `solid-js` and `@kserp/host-ui` stay **externalized** to the host
+runtime globals — so the component source is bundled into the plugin IIFE exactly
+as a local copy would be: one Solid instance, the host UI kit reused. `lucide-solid`
+is bundled from the consumer's own deps.
+
+Consumers must keep `solid-js` + `@kserp/host-ui` externalized in their
+`vite.remote.config.ts`, and (until a `.d.ts` bundle ships) reference the host kit
+types via the `./host-ui` export:
+
+```ts
+/// <reference types="@kahitsan/ksui/host-ui" />
+```
+
+## Type-checking
+
+`npm run typecheck` runs `tsc --noEmit` standalone (`jsxImportSource: solid-js`, the
+shipped `host-ui.d.ts` in scope). The authoritative gate remains each consuming
+plugin's own `tsc`, where the plugin's `lucide-solid` and host runtime are present.
+
+## Publishing
+
+Push a `v*` tag (e.g. `v0.3.0`); the release workflow publishes to GitHub Packages.

package/host-ui.d.ts

@@ -0,0 +1,145 @@
+// CANONICAL SDK type defs for the host UI kit (window.__KSERP_UI__, externalized
+// as "@kserp/host-ui"). This ships in @kahitsan/plugin-ui and is the single
+// source of truth — every plugin (ours, and any third-party with no kernel
+// source) gets it from the installed package via
+// `/// <reference types="@kahitsan/plugin-ui/host-ui" />`; there are no more
+// per-plugin copies to drift. The host owns the runtime: its remote loader
+// (kserp src/lib/remote-loader.ts) populates the global from the host's kit
+// barrel (kserp src/lib/host-ui.tsx) before loading any remote. Keep this in sync
+// with that barrel — every member here must be exported there, and vice-versa.
+declare module "@kserp/host-ui" {
+  import type { JSX, Accessor } from "solid-js";
+
+  // --- Shared table types (mirror src/components/ui/DataTable/DataTable.tsx) ---
+  export interface DataTableRow {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  }
+  export interface DataTableColumn<T extends DataTableRow> {
+    data: (keyof T & string) | null;
+    title?: string;
+    render?: (
+      data: T[keyof T] | null,
+      type: "display",
+      row: T,
+      meta: { row: number; col: number; search: string },
+    ) => JSX.Element | string;
+    orderable?: boolean;
+    className?: string;
+  }
+  export interface FetchResult<T> {
+    data: T[];
+    total: number;
+  }
+  export interface FetchParams {
+    page: number;
+    limit: number;
+    search: string;
+    sortBy: string | null;
+    sortDir: "asc" | "desc";
+    dateFilter: string | null;
+    dateFrom?: string | null;
+    dateTo?: string | null;
+  }
+
+  export interface DataTableProps<T extends DataTableRow> {
+    columns?: DataTableColumn<T>[];
+    /**
+     * Generic data fetcher. When provided, the table runs in server-side mode.
+     * Optional: omit it and pass `data` for client-side mode.
+     */
+    fetchFn?: (params: FetchParams) => Promise<FetchResult<T>>;
+    /** Static data (client-side mode). Ignored when `fetchFn` is set. */
+    data?: T[];
+    /**
+     * Expose the table's refetch handle to the parent. The callback receives
+     * `{ refetch, resetAndRefetch }`: `refetch()` re-fetches with the current
+     * state; `resetAndRefetch()` resets pagination to page 1 (clearing loadMore
+     * accumulators) before fetching.
+     */
+    onRefetch?: (api: { refetch: () => void; resetAndRefetch: () => void }) => void;
+    // Remaining props are passed through; kept permissive so plugins can use the
+    // full surface of the host component without re-declaring it here.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  }
+  export function DataTable<T extends DataTableRow>(props: DataTableProps<T>): JSX.Element;
+
+  // --- DatePicker ---
+  export interface DateRangeValue {
+    start: string | null;
+    end: string | null;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export function DatePicker(props: any): JSX.Element;
+
+  // --- Modal ---
+  // The Modal is mounted/unmounted by the caller (wrap it in <Show when={open}>);
+  // there is no `open` prop. onClose fires on Escape / backdrop / dismissal.
+  export type ModalSize = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "5xl" | "7xl";
+  export type ModalTone = "default" | "danger";
+  export interface ModalProps {
+    onClose: () => void;
+    dismissable?: boolean;
+    variant?: "default" | "sheet";
+    size?: ModalSize;
+    tone?: ModalTone;
+    ariaLabel?: string;
+    children: JSX.Element;
+  }
+  export function Modal(props: ModalProps): JSX.Element;
+
+  // --- SearchableSelect ---
+  export interface SearchableOption {
+    value: string;
+    label: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    [key: string]: any;
+  }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export function SearchableSelect(props: any): JSX.Element;
+
+  // --- Other components (permissive: full prop surface lives in the host) ---
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const Button: (props: any) => JSX.Element;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const PageShell: (props: any) => JSX.Element;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const PageTitle: (props: any) => JSX.Element;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const PageShareButton: (props: any) => JSX.Element;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const Avatar: (props: any) => JSX.Element;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export const PluginPageLoader: (props: any) => JSX.Element;
+
+  // --- Confirm ---
+  export function confirm(opts: {
+    title?: string;
+    message?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    danger?: boolean;
+  }): Promise<boolean>;
+
+  // --- Host hooks (run on the host's Solid runtime + context providers) ---
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export function useActiveWorkspace(): any;
+  export function useCan(code: string): Accessor<boolean>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export function usePermissions(): any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  export function PermissionGate(props: any): JSX.Element;
+
+  // --- Helpers ---
+  export function highlightMatch(text: string, query: string, markClass?: string): JSX.Element;
+  export function HighlightedText(props: {
+    text: string;
+    query: string;
+    markClass?: string;
+  }): JSX.Element;
+  export function matchesQuery(text: string | null | undefined, query: string): boolean;
+  export function matchesAny(query: string, ...fields: (string | null | undefined)[]): boolean;
+  export function useFocusTrap(el: HTMLElement | undefined): () => void;
+  export function autoFocusOnMount(el: HTMLElement | undefined): void;
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@kahitsan/ksui",
+  "version": "0.3.0",
+  "description": "ksui — shared SolidJS UI components + the @kserp/host-ui type contract for KahitSan/Hilinga plugins. Published to GitHub Packages 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",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": {
+      "solid": "./src/index.ts",
+      "types": "./src/index.ts",
+      "development": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./host-ui": {
+      "types": "./host-ui.d.ts"
+    }
+  },
+  "files": [
+    "src",
+    "host-ui.d.ts"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "lucide-solid": "^1.7.0"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.9.0"
+  },
+  "devDependencies": {
+    "solid-js": "^1.9.0",
+    "typescript": "^5.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KahitSan/ksui.git"
+  },
+  "license": "MIT"
+}

package/src/components/AccountAvatar.tsx

@@ -0,0 +1,169 @@
+// AccountAvatar — renders a small visual chip for an account or a user.
+//
+// Two distinct semantics share this chip, and the chip picks by intent:
+//
+//   • ACCOUNT (a financial account — the default). Shows the account's
+//     uploaded logo, else its chosen icon glyph (the slug picked in the
+//     financial-accounts create/edit modal, or the type default). NEVER an
+//     initials circle, and the container is a ROUNDED SQUARE (rounded-md).
+//     This matches the /financial-accounts page exactly — a financial
+//     account is not a person, so it must not render as an initials avatar.
+//
+//   • USER (a person badge — calendar entries, mention lists, timesheet
+//     attribution). Shows the profile photo, else an initial-on-color
+//     CIRCLE, in a circular (rounded-full) container. Callers opt in with
+//     `{ id: 0, type: 'user', name: 'Myra Abilay', image }` (the `type:
+//     'user'` is the signal) or by passing `variant="user"` explicitly.
+//
+// The variant is inferred from `account.type === 'user'` and can be forced
+// with the `variant` prop. Both paths render their image through the same
+// <img> so chip sizing is identical regardless of source.
+
+import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
+import { getAccountIcon } from "../lib/account-icons";
+import { buildLogoSrc } from "../lib/account-logo-url";
+
+// Shared 16-color palette and initials algorithm — keep in lockstep with
+// the kserp's ~/lib/avatar.ts so the host runtime and the plugin fleet
+// render the same chip for the same user.  Exported so any future widget
+// (or a caller's inline use) can derive a user's color/initials without
+// rendering the chip itself.
+const AVATAR_PALETTE = [
+  "#e11d48", "#db2777", "#c026d3", "#9333ea", "#7c3aed",
+  "#4f46e5", "#2563eb", "#0284c7", "#0891b2", "#0d9488",
+  "#059669", "#65a30d", "#ca8a04", "#ea580c", "#dc2626",
+];
+export function getInitials(name: string): string {
+  const trimmed = name?.trim();
+  if (!trimmed) return "?";
+  const parts = trimmed.split(/\s+/);
+  if (parts.length === 1) return parts[0].charAt(0).toUpperCase();
+  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase();
+}
+export function getAvatarColor(name: string): string {
+  if (!name) return AVATAR_PALETTE[0];
+  let h = 0;
+  for (let i = 0; i < name.length; i++) {
+    h = (h * 31 + name.charCodeAt(i)) | 0;
+  }
+  return AVATAR_PALETTE[Math.abs(h) % AVATAR_PALETTE.length];
+}
+
+/** Build a base64 SVG data URL for the initial-on-color circle.  Because it
+ *  renders as an `<img>`, the chip scales uniformly with every other source
+ *  (photo, s3 logo) — no per-plugin/inline text-size drift.  The viewBox is
+ *  100×100 and the font-size is calculated to keep 2-character initials
+ *  comfortably inside the circle. */
+export function buildInitialsSvg(name: string): string {
+  const initials = getInitials(name);
+  const color = getAvatarColor(name);
+  const fontSize = initials.length > 1 ? 38 : 44;
+  const svg = [
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">',
+    `<circle cx="50" cy="50" r="50" fill="${color}"/>`,
+    `<text x="50" y="50" text-anchor="middle" dominant-baseline="central" ` +
+      `fill="white" font-size="${fontSize}" font-weight="bold" ` +
+      `font-family="system-ui,-apple-system,sans-serif">${initials}</text>`,
+    "</svg>",
+  ].join("");
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+}
+
+export interface AvatarAccount {
+  id: number | string;
+  s3_link?: string | null;
+  icon?: string | null;
+  color?: string | null;
+  type: string;
+  /** Display name. Only used by the USER variant: when no photo is set the
+   *  chip falls through to an initial-on-color circle. Ignored by the
+   *  account variant, which never renders initials. */
+  name?: string;
+  /** User profile photo URL (e.g. Google identity provider). USER variant
+   *  only — higher priority than the initials fallback. */
+  image?: string | null;
+}
+
+interface AccountAvatarProps {
+  account: AvatarAccount;
+  size?: number;
+  class?: string;
+  iconClass?: string;
+  alt?: string;
+  /** Force the rendering intent. Defaults to "user" when
+   *  `account.type === 'user'`, otherwise "account". */
+  variant?: "account" | "user";
+}
+
+export default function AccountAvatar(props: AccountAvatarProps) {
+  const size = () => props.size ?? 28;
+  const iconSize = () => Math.max(12, Math.round(size() * 0.6));
+  const iconStyle = () => (props.account.color ? { color: props.account.color } : undefined);
+
+  const isUser = () =>
+    props.variant === "user" ||
+    (props.variant == null && props.account.type === "user");
+
+  // USER source: profile photo, else the initial-on-color circle.
+  const userImgSrc = () => {
+    if (props.account.s3_link) return buildLogoSrc(props.account.s3_link);
+    if (props.account.image) return props.account.image;
+    if (props.account.name) return buildInitialsSvg(props.account.name);
+    return null;
+  };
+
+  const iconGlyph = () => (
+    <Dynamic
+      component={getAccountIcon(props.account)}
+      size={iconSize()}
+      class={props.iconClass ?? "text-zinc-300"}
+      style={iconStyle()}
+    />
+  );
+
+  return (
+    <span
+      data-testid={`account-avatar-${props.account.id}`}
+      class={`inline-flex items-center justify-center shrink-0 ${props.class ?? ""}`}
+      style={{
+        width: `${size()}px`,
+        height: `${size()}px`,
+      }}
+      title={props.account.name}
+    >
+      <Show
+        when={isUser()}
+        fallback={
+          // ACCOUNT: uploaded logo (rounded square), else the chosen icon
+          // glyph. No initials — a financial account is not a person.
+          <Show when={props.account.s3_link} fallback={iconGlyph()}>
+            <img
+              src={buildLogoSrc(props.account.s3_link)}
+              alt={props.alt ?? ""}
+              class="w-full h-full rounded-md object-cover"
+            />
+          </Show>
+        }
+      >
+        {/* USER: profile photo or initial-on-color circle. */}
+        <Show when={userImgSrc()} fallback={iconGlyph()}>
+          <img
+            src={userImgSrc()!}
+            alt={props.alt ?? (props.account.name ?? "")}
+            class="w-full h-full rounded-full object-cover"
+            onError={(e) => {
+              // A profile photo / s3 logo that expired or was deleted
+              // degrades to the initial-on-color SVG instead of the
+              // broken-image icon.
+              if (props.account.name && !props.account.s3_link) {
+                (e.currentTarget as HTMLImageElement).src =
+                  buildInitialsSvg(props.account.name);
+              }
+            }}
+          />
+        </Show>
+      </Show>
+    </span>
+  );
+}

package/src/components/AddAttachmentTile.tsx

@@ -0,0 +1,96 @@
+// Source: KahitSan/kserp src/components/AddAttachmentTile.tsx (vendored into the plugin remote).
+// Dashed "Add" tile with a small Camera / Image-or-file popover menu.
+
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { Portal } from "solid-js/web";
+import Plus from "lucide-solid/icons/plus";
+import Camera from "lucide-solid/icons/camera";
+import FileIcon from "lucide-solid/icons/file";
+
+interface Props {
+  uploading: boolean;
+  onPickFile: () => void;
+  onPickCamera: () => void;
+}
+
+export default function AddAttachmentTile(props: Props) {
+  const [open, setOpen] = createSignal(false);
+  const [pos, setPos] = createSignal({ top: 0, left: 0 });
+  let btn: HTMLButtonElement | undefined;
+  let menu: HTMLDivElement | undefined;
+
+  const place = () => {
+    if (!btn) return;
+    const r = btn.getBoundingClientRect();
+    setPos({ top: r.bottom + 8, left: r.left });
+  };
+
+  onMount(() => {
+    const handler = (e: MouseEvent) => {
+      if (btn && !btn.contains(e.target as Node) && menu && !menu.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("click", handler);
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    onCleanup(() => {
+      document.removeEventListener("click", handler);
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+    });
+  });
+
+  return (
+    <div class="shrink-0">
+      <button
+        ref={btn}
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          if (props.uploading) return;
+          place();
+          setOpen(!open());
+        }}
+        disabled={props.uploading}
+        class="w-24 h-24 flex flex-col items-center justify-center gap-1 border border-dashed border-zinc-700 bg-zinc-800/30 text-zinc-400 hover:bg-zinc-800/60 hover:border-amber-500/40 hover:text-amber-400 active:bg-zinc-800/80 transition-colors ks-hud-clip-top-left-bottom-right cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed"
+        aria-label="Add attachment"
+      >
+        <Plus size={22} />
+        <span class="text-[10px] uppercase tracking-wider">{props.uploading ? "Uploading" : "Add"}</span>
+      </button>
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={menu}
+            style={{ top: `${pos().top}px`, left: `${pos().left}px` }}
+            class="fixed z-[60] min-w-[160px] rounded-lg border border-zinc-600 bg-zinc-800 shadow-2xl p-1 ks-hud-clip-top-left-bottom-right"
+          >
+            <button
+              type="button"
+              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 rounded cursor-pointer"
+              onClick={() => {
+                setOpen(false);
+                props.onPickCamera();
+              }}
+            >
+              <Camera size={16} />
+              <span>Camera</span>
+            </button>
+            <button
+              type="button"
+              class="w-full flex items-center gap-2 px-3 py-2 text-sm text-zinc-200 hover:bg-zinc-800 rounded cursor-pointer"
+              onClick={() => {
+                setOpen(false);
+                props.onPickFile();
+              }}
+            >
+              <FileIcon size={16} />
+              <span>Image or file</span>
+            </button>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  );
+}

package/src/components/CameraCapture.tsx

@@ -0,0 +1,144 @@
+// Source: KahitSan/kserp src/components/CameraCapture.tsx (vendored into the plugin remote).
+// getUserMedia camera capture modal. Button comes from the host UI kit.
+
+import { createSignal, onCleanup, onMount, Show } from "solid-js";
+import { Button } from "@kserp/host-ui";
+import Camera from "lucide-solid/icons/camera";
+import X from "lucide-solid/icons/x";
+
+interface Props {
+  onCapture: (file: File) => void;
+  onClose: () => void;
+}
+
+export default function CameraCapture(props: Props) {
+  let videoRef: HTMLVideoElement | undefined;
+  let canvasRef: HTMLCanvasElement | undefined;
+  const [stream, setStream] = createSignal<MediaStream | null>(null);
+  const [error, setError] = createSignal("");
+  const [captured, setCaptured] = createSignal<string | null>(null);
+
+  onMount(async () => {
+    stream()
+      ?.getTracks()
+      .forEach((t) => t.stop());
+    try {
+      const s = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment", width: { ideal: 1920 }, height: { ideal: 1080 } },
+        audio: false,
+      });
+      setStream(s);
+      if (videoRef) {
+        videoRef.srcObject = s;
+        videoRef.play();
+      }
+    } catch {
+      setError("Could not access camera. Check permissions or try the Browse button instead.");
+    }
+  });
+
+  onCleanup(() => {
+    stream()
+      ?.getTracks()
+      .forEach((t) => t.stop());
+  });
+
+  function takePhoto() {
+    if (!videoRef || !canvasRef) return;
+    canvasRef.width = videoRef.videoWidth;
+    canvasRef.height = videoRef.videoHeight;
+    const ctx = canvasRef.getContext("2d");
+    if (!ctx) return;
+    ctx.drawImage(videoRef, 0, 0);
+    setCaptured(canvasRef.toDataURL("image/jpeg", 0.9));
+  }
+
+  function confirmCapture() {
+    if (!canvasRef) return;
+    const onCapture = props.onCapture;
+    canvasRef.toBlob(
+      (blob) => {
+        if (blob) {
+          const file = new File([blob], `capture-${Date.now()}.jpg`, { type: "image/jpeg" });
+          onCapture(file);
+        }
+      },
+      "image/jpeg",
+      0.9,
+    );
+  }
+
+  function retake() {
+    setCaptured(null);
+  }
+
+  return (
+    <div
+      data-testid="camera-capture-modal"
+      class="fixed inset-0 z-[60] flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"
+    >
+      <div class="card-bg rounded-xl border border-amber-500/30 overflow-hidden max-w-lg w-full shadow-2xl">
+        <div class="flex items-center justify-between p-3 border-b border-zinc-800/50">
+          <span
+            class="text-sm text-zinc-200 font-medium flex items-center gap-2"
+            data-testid="camera-capture-title"
+          >
+            <Camera size={16} /> Camera
+          </span>
+          <button
+            onClick={() => props.onClose()}
+            class="text-zinc-500 hover:text-zinc-300 cursor-pointer"
+            aria-label="Close camera"
+          >
+            <X size={18} />
+          </button>
+        </div>
+
+        <Show when={error()}>
+          <div class="p-6 text-center">
+            <p class="text-sm text-red-400 mb-3">{error()}</p>
+            <Button intent="secondary" variant="ghost" onClick={() => props.onClose()}>
+              Close
+            </Button>
+          </div>
+        </Show>
+
+        <Show when={!error()}>
+          <div class="relative bg-black aspect-video">
+            <Show when={!captured()}>
+              <video ref={videoRef} autoplay playsinline muted class="w-full h-full object-cover" />
+            </Show>
+            <Show when={captured()}>
+              <img src={captured()!} alt="Captured" class="w-full h-full object-cover" />
+            </Show>
+            <canvas ref={canvasRef} class="hidden" />
+          </div>
+
+          <div class="flex items-center justify-center gap-3 p-3">
+            <Show
+              when={!captured()}
+              fallback={
+                <>
+                  <Button intent="secondary" variant="ghost" onClick={retake}>
+                    Retake
+                  </Button>
+                  <Button intent="primary" variant="clip1" onClick={confirmCapture}>
+                    Use Photo
+                  </Button>
+                </>
+              }
+            >
+              <button
+                type="button"
+                onClick={takePhoto}
+                class="w-14 h-14 rounded-full border-4 border-zinc-400 bg-zinc-200 hover:bg-white active:scale-95 transition-all cursor-pointer"
+                title="Take photo"
+                aria-label="Take photo"
+              />
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </div>
+  );
+}