@cfast/ui 0.0.1

package/dist/chunk-JUNLQJ6H.js

@@ -0,0 +1,1013 @@
+import {
+  fieldForColumn,
+  useActionStatus,
+  useComponent,
+  useToast
+} from "./chunk-FPZAQ2YQ.js";
+
+// src/hooks/use-confirm.ts
+import { createContext, useContext, useCallback } from "react";
+var ConfirmContext = createContext(null);
+function useConfirm() {
+  const ctx = useContext(ConfirmContext);
+  if (!ctx) {
+    throw new Error("useConfirm must be used within a <ConfirmProvider>");
+  }
+  return useCallback(
+    (options) => ctx.confirm(options),
+    [ctx]
+  );
+}
+
+// src/hooks/use-action-toast.ts
+import { useEffect, useRef } from "react";
+import { useActions } from "@cfast/actions/client";
+function useActionToast(descriptor, config) {
+  const actions = useActions(descriptor);
+  const toast = useToast();
+  const prevDataRef = useRef({});
+  useEffect(() => {
+    for (const [name, cfg] of Object.entries(config)) {
+      const actionFn = actions[name];
+      if (!actionFn) continue;
+      const result = actionFn();
+      const prevData = prevDataRef.current[name];
+      if (result.data !== void 0 && result.data !== prevData) {
+        prevDataRef.current[name] = result.data;
+        if (cfg.success) {
+          toast.success(cfg.success);
+        }
+      }
+      if (result.error !== void 0 && result.error !== prevData) {
+        prevDataRef.current[name] = result.error;
+        if (cfg.error) {
+          toast.error(cfg.error);
+        }
+      }
+    }
+  });
+}
+
+// src/components/permission-gate.tsx
+import { createElement, Fragment } from "react";
+function PermissionGate({
+  action,
+  actionName,
+  input,
+  children,
+  fallback
+}) {
+  const status = useActionStatus(action, actionName, input);
+  if (status.invisible) {
+    return null;
+  }
+  if (!status.permitted) {
+    return fallback ? createElement(Fragment, null, fallback) : null;
+  }
+  return createElement(Fragment, null, children);
+}
+
+// src/components/action-button.tsx
+import { createElement as createElement2 } from "react";
+function ActionButton({
+  action,
+  actionName,
+  input,
+  children,
+  whenForbidden = "disable",
+  confirmation: _confirmation,
+  variant,
+  color,
+  size,
+  startDecorator
+}) {
+  const status = useActionStatus(action, actionName, input);
+  const Button = useComponent("button");
+  if (status.invisible) {
+    return null;
+  }
+  if (!status.permitted && whenForbidden === "hide") {
+    return null;
+  }
+  const disabled = !status.permitted && whenForbidden === "disable";
+  return createElement2(Button, {
+    children,
+    onClick: () => status.submit(),
+    disabled,
+    loading: status.pending,
+    variant,
+    color,
+    size,
+    startDecorator
+  });
+}
+
+// src/components/confirm-provider.tsx
+import { createElement as createElement3, useState, useCallback as useCallback2, useRef as useRef2 } from "react";
+function ConfirmProvider({ children }) {
+  const [state, setState] = useState(null);
+  const ConfirmDialog = useComponent("confirmDialog");
+  const resolveRef = useRef2(null);
+  const confirm = useCallback2((options) => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setState({ ...options, resolve });
+    });
+  }, []);
+  const handleClose = useCallback2(() => {
+    resolveRef.current?.(false);
+    resolveRef.current = null;
+    setState(null);
+  }, []);
+  const handleConfirm = useCallback2(() => {
+    resolveRef.current?.(true);
+    resolveRef.current = null;
+    setState(null);
+  }, []);
+  return createElement3(
+    ConfirmContext.Provider,
+    { value: { confirm } },
+    children,
+    state ? createElement3(ConfirmDialog, {
+      open: true,
+      onClose: handleClose,
+      onConfirm: handleConfirm,
+      title: state.title,
+      description: state.description,
+      confirmLabel: state.confirmLabel,
+      cancelLabel: state.cancelLabel,
+      variant: state.variant
+    }) : null
+  );
+}
+
+// src/components/form-status.tsx
+import { createElement as createElement4 } from "react";
+function FormStatus({ data }) {
+  const Alert = useComponent("alert");
+  if (!data) return null;
+  const elements = [];
+  if (data.success) {
+    elements.push(
+      createElement4(Alert, { key: "success", color: "success", children: data.success })
+    );
+  }
+  if (data.error) {
+    elements.push(
+      createElement4(Alert, { key: "error", color: "danger", children: data.error })
+    );
+  }
+  if (data.fieldErrors) {
+    const errorMessages = Object.entries(data.fieldErrors).flatMap(
+      ([field, errors]) => errors.map((err) => `${field}: ${err}`)
+    );
+    if (errorMessages.length > 0) {
+      elements.push(
+        createElement4(Alert, {
+          key: "field-errors",
+          color: "danger",
+          children: createElement4(
+            "ul",
+            { style: { margin: 0, paddingLeft: "16px" } },
+            ...errorMessages.map(
+              (msg, i) => createElement4("li", { key: i }, msg)
+            )
+          )
+        })
+      );
+    }
+  }
+  if (elements.length === 0) return null;
+  return createElement4("div", { style: { display: "flex", flexDirection: "column", gap: "8px" } }, ...elements);
+}
+
+// src/components/role-badge.tsx
+import { createElement as createElement5 } from "react";
+var defaultColors = {
+  admin: "danger",
+  editor: "primary",
+  author: "success",
+  reader: "neutral"
+};
+function RoleBadge({ role, colors }) {
+  const Chip = useComponent("chip");
+  const colorMap = colors ? { ...defaultColors, ...Object.fromEntries(
+    Object.entries(colors).map(([k, v]) => [k, v])
+  ) } : defaultColors;
+  const chipColor = colorMap[role] ?? "neutral";
+  return createElement5(Chip, {
+    children: role,
+    color: chipColor,
+    variant: "soft",
+    size: "sm"
+  });
+}
+
+// src/components/impersonation-banner.tsx
+import { createElement as createElement6 } from "react";
+import { useCurrentUser } from "@cfast/auth/client";
+function ImpersonationBanner({
+  stopAction = "/admin/stop-impersonation"
+}) {
+  const user = useCurrentUser();
+  const Alert = useComponent("alert");
+  const Button = useComponent("button");
+  if (!user?.isImpersonating) {
+    return null;
+  }
+  return createElement6(
+    Alert,
+    {
+      color: "warning",
+      children: createElement6(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "12px"
+          }
+        },
+        createElement6(
+          "strong",
+          null,
+          `Viewing as ${user.name} (${user.email})`
+        ),
+        createElement6(
+          "form",
+          { method: "post", action: stopAction },
+          createElement6(Button, {
+            type: "submit",
+            variant: "outlined",
+            size: "sm",
+            children: "Stop Impersonating"
+          })
+        )
+      )
+    }
+  );
+}
+
+// src/components/data-table.tsx
+import { createElement as createElement7, useState as useState2, useCallback as useCallback3 } from "react";
+function normalizeColumns(columns) {
+  if (!columns) return [];
+  return columns.map((col) => {
+    if (typeof col === "string") {
+      return {
+        key: col,
+        label: col.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim(),
+        sortable: true
+      };
+    }
+    return col;
+  });
+}
+function DataTable({
+  data,
+  columns: columnsProp,
+  selectable = false,
+  selectedRows: externalSelectedRows,
+  onSelectionChange,
+  onRowClick,
+  getRowId,
+  emptyMessage = "No data"
+}) {
+  const Table = useComponent("table");
+  const TableHead = useComponent("tableHead");
+  const TableBody = useComponent("tableBody");
+  const TableRow = useComponent("tableRow");
+  const TableCell = useComponent("tableCell");
+  const columns = normalizeColumns(columnsProp);
+  const [sortKey, setSortKey] = useState2(null);
+  const [sortDir, setSortDir] = useState2("asc");
+  const [internalSelected, setInternalSelected] = useState2(/* @__PURE__ */ new Set());
+  const selectedSet = externalSelectedRows ? new Set(externalSelectedRows.map((r) => (getRowId ?? defaultGetId)(r))) : internalSelected;
+  const handleSort = useCallback3((key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }, [sortKey]);
+  const toggleRow = useCallback3((id) => {
+    if (onSelectionChange) {
+      const row = data.items.find((r) => (getRowId ?? defaultGetId)(r) === id);
+      if (!row) return;
+      const current = externalSelectedRows ?? [];
+      const isSelected = current.some((r) => (getRowId ?? defaultGetId)(r) === id);
+      onSelectionChange(isSelected ? current.filter((r) => (getRowId ?? defaultGetId)(r) !== id) : [...current, row]);
+    } else {
+      setInternalSelected((prev) => {
+        const next = new Set(prev);
+        if (next.has(id)) next.delete(id);
+        else next.add(id);
+        return next;
+      });
+    }
+  }, [data.items, externalSelectedRows, onSelectionChange, getRowId]);
+  if (data.items.length === 0 && !data.isLoading) {
+    return createElement7("div", { style: { textAlign: "center", padding: "32px", color: "#666" } }, emptyMessage);
+  }
+  return createElement7(
+    Table,
+    { hoverRow: true, children: createElement7("div") },
+    createElement7(
+      TableHead,
+      { children: createElement7("div") },
+      createElement7(
+        TableRow,
+        { children: createElement7("div") },
+        selectable ? createElement7(TableCell, { header: true, children: "" }) : null,
+        ...columns.map(
+          (col) => createElement7(TableCell, {
+            key: col.key,
+            header: true,
+            sortable: col.sortable !== false,
+            sortDirection: sortKey === col.key ? sortDir : null,
+            onSort: () => handleSort(col.key),
+            children: col.label ?? col.key
+          })
+        )
+      )
+    ),
+    createElement7(
+      TableBody,
+      { children: createElement7("div") },
+      ...data.items.map((row) => {
+        const id = (getRowId ?? defaultGetId)(row);
+        const isSelected = selectedSet.has(id);
+        return createElement7(
+          TableRow,
+          {
+            key: String(id),
+            selected: isSelected,
+            onClick: onRowClick ? () => onRowClick(row) : void 0,
+            children: createElement7("div")
+          },
+          selectable ? createElement7(TableCell, {
+            children: createElement7("input", {
+              type: "checkbox",
+              checked: isSelected,
+              onChange: () => toggleRow(id)
+            })
+          }) : null,
+          ...columns.map((col) => {
+            const value = row[col.key];
+            return createElement7(TableCell, {
+              key: col.key,
+              children: col.render ? col.render(value, row) : String(value ?? "")
+            });
+          })
+        );
+      })
+    )
+  );
+}
+function defaultGetId(row) {
+  return row.id;
+}
+
+// src/components/filter-bar.tsx
+import { createElement as createElement8, useCallback as useCallback4 } from "react";
+import { useSearchParams, useNavigate, useLocation } from "react-router";
+function FilterBar({
+  filters,
+  searchable
+}) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const updateParam = useCallback4(
+    (key, value) => {
+      const params = new URLSearchParams(searchParams);
+      if (value === null || value === "") {
+        params.delete(key);
+      } else {
+        params.set(key, value);
+      }
+      params.delete("page");
+      params.delete("cursor");
+      navigate(`${location.pathname}?${params.toString()}`);
+    },
+    [searchParams, navigate, location.pathname]
+  );
+  return createElement8(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap",
+        alignItems: "center",
+        marginBottom: "16px"
+      }
+    },
+    // Search input
+    searchable && searchable.length > 0 ? createElement8("input", {
+      type: "search",
+      placeholder: `Search ${searchable.join(", ")}...`,
+      value: searchParams.get("q") ?? "",
+      onChange: (e) => updateParam("q", e.target.value || null),
+      style: { padding: "6px 10px", border: "1px solid #ccc", borderRadius: "4px" }
+    }) : null,
+    ...filters.map(
+      (filter) => createElement8(FilterInput, {
+        key: filter.column,
+        filter,
+        value: searchParams.get(filter.column) ?? "",
+        onChange: (value) => updateParam(filter.column, value || null)
+      })
+    )
+  );
+}
+function FilterInput({
+  filter,
+  value,
+  onChange
+}) {
+  const label = filter.label ?? filter.column;
+  switch (filter.type) {
+    case "select":
+    case "boolean":
+      return createElement8(
+        "select",
+        {
+          value,
+          onChange: (e) => onChange(e.target.value),
+          "aria-label": label
+        },
+        createElement8("option", { value: "" }, `All ${label}`),
+        ...(filter.options ?? []).map(
+          (opt) => createElement8("option", { key: String(opt.value), value: String(opt.value) }, opt.label)
+        )
+      );
+    case "text":
+    default:
+      return createElement8("input", {
+        type: "text",
+        placeholder: filter.placeholder ?? label,
+        value,
+        onChange: (e) => onChange(e.target.value),
+        "aria-label": label,
+        style: { padding: "6px 10px", border: "1px solid #ccc", borderRadius: "4px" }
+      });
+  }
+}
+
+// src/components/bulk-action-bar.tsx
+import { createElement as createElement9 } from "react";
+function BulkActionBar({
+  selectedCount,
+  actions,
+  onAction,
+  onClearSelection
+}) {
+  const Button = useComponent("button");
+  if (selectedCount === 0) return null;
+  return createElement9(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#f0f4ff",
+        borderRadius: "4px",
+        marginBottom: "8px"
+      }
+    },
+    createElement9(
+      "span",
+      null,
+      `${selectedCount} selected`
+    ),
+    ...actions.map(
+      (action) => createElement9(Button, {
+        key: action.label,
+        children: action.label,
+        onClick: () => onAction(action),
+        variant: "soft",
+        size: "sm",
+        startDecorator: action.icon ? createElement9(action.icon, { className: "bulk-action-icon" }) : void 0
+      })
+    ),
+    createElement9(Button, {
+      children: "Clear",
+      onClick: onClearSelection,
+      variant: "plain",
+      size: "sm"
+    })
+  );
+}
+
+// src/hooks/use-column-inference.ts
+import { useMemo } from "react";
+function useColumnInference(table, columns) {
+  return useMemo(() => {
+    if (!table) return [];
+    const result = [];
+    for (const [key, col] of Object.entries(table)) {
+      if (columns && !columns.includes(key)) continue;
+      if (!col || typeof col !== "object" || !("dataType" in col) || !("name" in col)) continue;
+      const meta = col;
+      const field = fieldForColumn(meta);
+      const label = key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim();
+      result.push({
+        key,
+        label,
+        sortable: true,
+        field
+      });
+    }
+    if (columns) {
+      result.sort((a, b) => columns.indexOf(a.key) - columns.indexOf(b.key));
+    }
+    return result;
+  }, [table, columns]);
+}
+
+// src/components/drop-zone.tsx
+import { createElement as createElement10, useState as useState3, useCallback as useCallback5, useRef as useRef3 } from "react";
+function DropZone({
+  upload,
+  multiple = false,
+  children
+}) {
+  const DropZoneSlot = useComponent("dropZone");
+  const [isDragOver, setIsDragOver] = useState3(false);
+  const inputRef = useRef3(null);
+  const handleFiles = useCallback5(
+    (files) => {
+      if (!files || files.length === 0) return;
+      if (multiple) {
+        for (let i = 0; i < files.length; i++) {
+          upload.start(files[i]);
+        }
+      } else {
+        upload.start(files[0]);
+      }
+    },
+    [upload, multiple]
+  );
+  const handleDrop = useCallback5(
+    (files) => {
+      setIsDragOver(false);
+      handleFiles(files);
+    },
+    [handleFiles]
+  );
+  const handleClick = useCallback5(() => {
+    inputRef.current?.click();
+  }, []);
+  const handleDragOver = useCallback5((_e) => {
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback5(() => {
+    setIsDragOver(false);
+  }, []);
+  const defaultContent = upload.isUploading ? `Uploading... ${upload.progress}%` : upload.error ?? upload.validationError ?? "Drop files here or click to browse";
+  return createElement10(
+    "div",
+    null,
+    createElement10(DropZoneSlot, {
+      isDragOver,
+      isInvalid: !!(upload.error || upload.validationError),
+      onClick: handleClick,
+      onDrop: handleDrop,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      accept: upload.accept,
+      children: children ?? defaultContent
+    }),
+    createElement10("input", {
+      ref: inputRef,
+      type: "file",
+      accept: upload.accept,
+      multiple,
+      style: { display: "none" },
+      onChange: (e) => handleFiles(e.target.files)
+    })
+  );
+}
+
+// src/components/image-preview.tsx
+import { createElement as createElement11 } from "react";
+function ImagePreview({
+  fileKey,
+  src,
+  getUrl,
+  width = 200,
+  height = 200,
+  fallback,
+  alt = "Image preview"
+}) {
+  const resolvedSrc = src ?? (fileKey && getUrl ? getUrl(fileKey) : null);
+  if (!resolvedSrc) {
+    return fallback ? createElement11("div", null, fallback) : createElement11(
+      "div",
+      {
+        style: {
+          width,
+          height,
+          backgroundColor: "#f5f5f5",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "4px",
+          color: "#999"
+        }
+      },
+      "No image"
+    );
+  }
+  return createElement11("img", {
+    src: resolvedSrc,
+    alt,
+    style: {
+      width,
+      height,
+      objectFit: "cover",
+      borderRadius: "4px"
+    }
+  });
+}
+
+// src/components/file-list.tsx
+import { createElement as createElement12 } from "react";
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function FileList({
+  files,
+  onDownload
+}) {
+  if (files.length === 0) {
+    return createElement12("div", { style: { color: "#999" } }, "No files");
+  }
+  return createElement12(
+    "ul",
+    {
+      style: { listStyle: "none", padding: 0, margin: 0 },
+      "data-testid": "file-list"
+    },
+    ...files.map(
+      (file) => createElement12(FileListItem, {
+        key: file.key,
+        file,
+        onDownload
+      })
+    )
+  );
+}
+function FileListItem({
+  file,
+  onDownload
+}) {
+  return createElement12(
+    "li",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 0",
+        borderBottom: "1px solid #eee"
+      }
+    },
+    createElement12("span", { style: { flex: 1 } }, file.name),
+    file.size != null ? createElement12("span", { style: { color: "#666", fontSize: "0.85em" } }, formatBytes(file.size)) : null,
+    onDownload ? createElement12(
+      "button",
+      {
+        onClick: () => onDownload(file),
+        style: {
+          background: "none",
+          border: "none",
+          cursor: "pointer",
+          color: "#1976d2",
+          textDecoration: "underline"
+        }
+      },
+      "Download"
+    ) : file.url ? createElement12(
+      "a",
+      {
+        href: file.url,
+        download: file.name,
+        style: { color: "#1976d2", textDecoration: "underline" }
+      },
+      "Download"
+    ) : null
+  );
+}
+
+// src/components/page-container.tsx
+import { createElement as createElement13, Fragment as Fragment2 } from "react";
+function PageContainer({
+  title,
+  breadcrumb,
+  actions,
+  tabs: _tabs,
+  children
+}) {
+  const PageContainerSlot = useComponent("pageContainer");
+  const Breadcrumb = useComponent("breadcrumb");
+  return createElement13(
+    Fragment2,
+    null,
+    breadcrumb && breadcrumb.length > 0 ? createElement13(Breadcrumb, { items: breadcrumb }) : null,
+    createElement13(PageContainerSlot, { title, actions, children })
+  );
+}
+
+// src/components/empty-state.tsx
+import { createElement as createElement14 } from "react";
+function EmptyState({
+  title,
+  description,
+  createAction,
+  createLabel = "Create",
+  icon: Icon
+}) {
+  const Button = useComponent("button");
+  if (!createAction) {
+    return createElement14(
+      "div",
+      { style: { textAlign: "center", padding: "48px 16px" } },
+      Icon ? createElement14(Icon, { className: "empty-state-icon" }) : null,
+      createElement14("h3", { style: { margin: "16px 0 8px" } }, title),
+      description ? createElement14("p", { style: { color: "#666" } }, description) : null
+    );
+  }
+  return createElement14(EmptyStateWithAction, {
+    title,
+    description,
+    createAction,
+    createLabel,
+    icon: Icon,
+    Button
+  });
+}
+function EmptyStateWithAction({
+  title,
+  description,
+  createAction,
+  createLabel,
+  icon: Icon,
+  Button
+}) {
+  const status = useActionStatus(createAction);
+  if (status.invisible) {
+    return createElement14(
+      "div",
+      { style: { textAlign: "center", padding: "48px 16px" } },
+      createElement14("h3", { style: { margin: "16px 0 8px" } }, "Nothing here yet")
+    );
+  }
+  return createElement14(
+    "div",
+    { style: { textAlign: "center", padding: "48px 16px" } },
+    Icon ? createElement14(Icon, { className: "empty-state-icon" }) : null,
+    createElement14("h3", { style: { margin: "16px 0 8px" } }, title),
+    description ? createElement14("p", { style: { color: "#666" } }, description) : null,
+    status.permitted ? createElement14(
+      "div",
+      { style: { marginTop: "16px" } },
+      createElement14(Button, {
+        children: createLabel,
+        onClick: () => status.submit(),
+        loading: status.pending
+      })
+    ) : null
+  );
+}
+
+// src/components/list-view.tsx
+import { createElement as createElement15, useState as useState4, useCallback as useCallback6 } from "react";
+function ListView({
+  title,
+  data,
+  table: _table,
+  columns,
+  actions: _actions,
+  filters,
+  searchable,
+  createAction,
+  createLabel = "Create",
+  selectable = false,
+  bulkActions,
+  breadcrumb
+}) {
+  const [selectedRows, setSelectedRows] = useState4([]);
+  const handleBulkAction = useCallback6(
+    (action) => {
+      if (action.handler) {
+        action.handler(selectedRows);
+      }
+    },
+    [selectedRows]
+  );
+  const clearSelection = useCallback6(() => {
+    setSelectedRows([]);
+  }, []);
+  const createButton = createAction ? createElement15(ActionButton, {
+    action: createAction,
+    children: createLabel,
+    variant: "solid",
+    color: "primary"
+  }) : null;
+  return createElement15(
+    PageContainer,
+    {
+      title,
+      breadcrumb,
+      actions: createButton,
+      children: createElement15(
+        "div",
+        null,
+        // Filters
+        filters && filters.length > 0 ? createElement15(FilterBar, {
+          filters,
+          searchable
+        }) : null,
+        // Bulk actions
+        selectable && bulkActions && bulkActions.length > 0 ? createElement15(BulkActionBar, {
+          selectedCount: selectedRows.length,
+          actions: bulkActions,
+          onAction: handleBulkAction,
+          onClearSelection: clearSelection
+        }) : null,
+        // Data table or empty state
+        data.items.length === 0 && !data.isLoading ? createElement15(EmptyState, {
+          title: `No ${title.toLowerCase()} found`,
+          description: filters ? "Try adjusting your filters" : void 0,
+          createAction,
+          createLabel
+        }) : createElement15(DataTable, {
+          data,
+          columns,
+          selectable,
+          selectedRows: selectable ? selectedRows : void 0,
+          onSelectionChange: selectable ? (rows) => setSelectedRows(rows) : void 0
+        }),
+        // Pagination controls
+        data.totalPages && data.totalPages > 1 && data.goToPage ? createElement15(
+          "div",
+          {
+            style: {
+              display: "flex",
+              justifyContent: "center",
+              gap: "8px",
+              marginTop: "16px"
+            }
+          },
+          createElement15(
+            "button",
+            {
+              disabled: data.currentPage === 1,
+              onClick: () => data.goToPage?.(Math.max(1, (data.currentPage ?? 1) - 1))
+            },
+            "Previous"
+          ),
+          createElement15(
+            "span",
+            null,
+            `Page ${data.currentPage ?? 1} of ${data.totalPages}`
+          ),
+          createElement15(
+            "button",
+            {
+              disabled: data.currentPage === data.totalPages,
+              onClick: () => data.goToPage?.(
+                Math.min(data.totalPages ?? 1, (data.currentPage ?? 1) + 1)
+              )
+            },
+            "Next"
+          )
+        ) : null,
+        // Load more (cursor-based)
+        data.hasMore && data.loadMore ? createElement15(
+          "div",
+          { style: { textAlign: "center", marginTop: "16px" } },
+          createElement15(
+            "button",
+            { onClick: data.loadMore },
+            "Load more"
+          )
+        ) : null
+      )
+    }
+  );
+}
+
+// src/components/detail-view.tsx
+import { createElement as createElement16 } from "react";
+function normalizeFields(fields) {
+  if (!fields) return [];
+  return fields.map((col) => {
+    if (typeof col === "string") {
+      return {
+        key: col,
+        label: col.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim()
+      };
+    }
+    return col;
+  });
+}
+function DetailView({
+  title,
+  table,
+  record,
+  fields: fieldsProp,
+  exclude,
+  breadcrumb
+}) {
+  const fields = normalizeFields(fieldsProp);
+  const displayFields = fields.length > 0 ? fields : inferFieldsFromRecord(record, exclude);
+  return createElement16(
+    PageContainer,
+    {
+      title,
+      breadcrumb,
+      children: createElement16(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr",
+            gap: "16px"
+          }
+        },
+        ...displayFields.map((field) => {
+          const value = record[field.key];
+          const FieldComponent = field.render ? null : resolveFieldComponent(field.key, table);
+          return createElement16(
+            "div",
+            { key: field.key },
+            createElement16(
+              "div",
+              {
+                style: {
+                  fontSize: "0.85em",
+                  color: "#666",
+                  marginBottom: "4px",
+                  fontWeight: 600
+                }
+              },
+              field.label ?? field.key
+            ),
+            createElement16(
+              "div",
+              null,
+              field.render ? field.render(value, record) : FieldComponent ? createElement16(FieldComponent, { value }) : String(value ?? "\u2014")
+            )
+          );
+        })
+      )
+    }
+  );
+}
+function inferFieldsFromRecord(record, exclude) {
+  if (!record || typeof record !== "object") return [];
+  return Object.keys(record).filter((key) => !exclude || !exclude.includes(key)).map((key) => ({
+    key,
+    label: key.replace(/([A-Z])/g, " $1").replace(/^./, (s) => s.toUpperCase()).trim()
+  }));
+}
+function resolveFieldComponent(_key, table) {
+  if (!table || typeof table !== "object") return null;
+  const col = table[_key];
+  if (!col || typeof col !== "object" || !("dataType" in col) || !("name" in col)) {
+    return null;
+  }
+  const meta = col;
+  return fieldForColumn(meta);
+}
+
+export {
+  useConfirm,
+  useActionToast,
+  PermissionGate,
+  ActionButton,
+  ConfirmProvider,
+  FormStatus,
+  RoleBadge,
+  ImpersonationBanner,
+  DataTable,
+  FilterBar,
+  BulkActionBar,
+  useColumnInference,
+  DropZone,
+  ImagePreview,
+  FileList,
+  PageContainer,
+  EmptyState,
+  ListView,
+  DetailView
+};