@cfast/ui 0.0.1 → 0.2.0

package/dist/chunk-JEGEIQ3R.js

@@ -1,925 +0,0 @@
-import {
-  fieldForColumn,
-  getField,
-  getRecordId,
-  useActionStatus,
-  useComponent,
-  useToast
-} from "./chunk-RDTUEOLK.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/action-button.tsx
-import { jsx } from "react/jsx-runtime";
-function ActionButton({
-  action,
-  children,
-  whenForbidden = "disable",
-  confirmation: _confirmation,
-  ...buttonProps
-}) {
-  const Button = useComponent("button");
-  if (action.invisible) {
-    return null;
-  }
-  if (!action.permitted && whenForbidden === "hide") {
-    return null;
-  }
-  const disabled = !action.permitted && whenForbidden === "disable";
-  return /* @__PURE__ */ jsx(
-    Button,
-    {
-      ...buttonProps,
-      onClick: () => action.submit(),
-      disabled,
-      loading: action.pending,
-      children
-    }
-  );
-}
-
-// src/components/confirm-provider.tsx
-import { useState, useCallback as useCallback2, useRef as useRef2 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs(ConfirmContext.Provider, { value: { confirm }, children: [
-    children,
-    state ? /* @__PURE__ */ jsx2(
-      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 { jsx as jsx3 } from "react/jsx-runtime";
-function FormStatus({ data }) {
-  const Alert = useComponent("alert");
-  if (!data) return null;
-  const elements = [];
-  if (data.success) {
-    elements.push(
-      /* @__PURE__ */ jsx3(Alert, { color: "success", children: data.success }, "success")
-    );
-  }
-  if (data.error) {
-    elements.push(
-      /* @__PURE__ */ jsx3(Alert, { color: "danger", children: data.error }, "error")
-    );
-  }
-  if (data.fieldErrors) {
-    const errorMessages = Object.entries(data.fieldErrors).flatMap(
-      ([field, errors]) => errors.map((err) => `${field}: ${err}`)
-    );
-    if (errorMessages.length > 0) {
-      elements.push(
-        /* @__PURE__ */ jsx3(Alert, { color: "danger", children: /* @__PURE__ */ jsx3("ul", { style: { margin: 0, paddingLeft: "16px" }, children: errorMessages.map((msg, i) => /* @__PURE__ */ jsx3("li", { children: msg }, i)) }) }, "field-errors")
-      );
-    }
-  }
-  if (elements.length === 0) return null;
-  return /* @__PURE__ */ jsx3("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: elements });
-}
-
-// src/components/role-badge.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx4(Chip, { color: chipColor, variant: "soft", size: "sm", children: role });
-}
-
-// src/components/impersonation-banner.tsx
-import { useCurrentUser } from "@cfast/auth/client";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-function ImpersonationBanner({
-  stopAction = "/admin/stop-impersonation"
-}) {
-  const user = useCurrentUser();
-  const Alert = useComponent("alert");
-  const Button = useComponent("button");
-  if (!user?.isImpersonating) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx5(Alert, { color: "warning", children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        gap: "12px"
-      },
-      children: [
-        /* @__PURE__ */ jsx5("strong", { children: `Viewing as ${user.name} (${user.email})` }),
-        /* @__PURE__ */ jsx5("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx5(Button, { type: "submit", variant: "outlined", size: "sm", children: "Stop Impersonating" }) })
-      ]
-    }
-  ) });
-}
-
-// src/components/data-table.tsx
-import { useState as useState2, useCallback as useCallback3 } from "react";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx6("div", { style: { textAlign: "center", padding: "32px", color: "#666" }, children: emptyMessage });
-  }
-  return /* @__PURE__ */ jsxs3(Table, { hoverRow: true, children: [
-    /* @__PURE__ */ jsx6(TableHead, { children: /* @__PURE__ */ jsxs3(TableRow, { children: [
-      selectable ? /* @__PURE__ */ jsx6(TableCell, { header: true, children: "" }) : null,
-      columns.map((col) => /* @__PURE__ */ jsx6(
-        TableCell,
-        {
-          header: true,
-          sortable: col.sortable !== false,
-          sortDirection: sortKey === col.key ? sortDir : null,
-          onSort: () => handleSort(col.key),
-          children: col.label ?? col.key
-        },
-        col.key
-      ))
-    ] }) }),
-    /* @__PURE__ */ jsx6(TableBody, { children: data.items.map((row) => {
-      const id = (getRowId ?? defaultGetId)(row);
-      const isSelected = selectedSet.has(id);
-      return /* @__PURE__ */ jsxs3(
-        TableRow,
-        {
-          selected: isSelected,
-          onClick: onRowClick ? () => onRowClick(row) : void 0,
-          children: [
-            selectable ? /* @__PURE__ */ jsx6(TableCell, { children: /* @__PURE__ */ jsx6(
-              "input",
-              {
-                type: "checkbox",
-                checked: isSelected,
-                onChange: () => toggleRow(id)
-              }
-            ) }) : null,
-            columns.map((col) => {
-              const value = getField(row, col.key);
-              return /* @__PURE__ */ jsx6(TableCell, { children: col.render ? col.render(value, row) : String(value ?? "") }, col.key);
-            })
-          ]
-        },
-        String(id)
-      );
-    }) })
-  ] });
-}
-function defaultGetId(row) {
-  return getRecordId(row);
-}
-
-// src/components/filter-bar.tsx
-import { useCallback as useCallback4 } from "react";
-import { useSearchParams, useNavigate, useLocation } from "react-router";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      style: {
-        display: "flex",
-        gap: "8px",
-        flexWrap: "wrap",
-        alignItems: "center",
-        marginBottom: "16px"
-      },
-      children: [
-        searchable && searchable.length > 0 ? /* @__PURE__ */ jsx7(
-          "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) => /* @__PURE__ */ jsx7(
-          FilterInput,
-          {
-            filter,
-            value: searchParams.get(filter.column) ?? "",
-            onChange: (value) => updateParam(filter.column, value || null)
-          },
-          filter.column
-        ))
-      ]
-    }
-  );
-}
-function FilterInput({
-  filter,
-  value,
-  onChange
-}) {
-  const label = filter.label ?? filter.column;
-  switch (filter.type) {
-    case "select":
-    case "boolean":
-      return /* @__PURE__ */ jsxs4(
-        "select",
-        {
-          value,
-          onChange: (e) => onChange(e.target.value),
-          "aria-label": label,
-          children: [
-            /* @__PURE__ */ jsx7("option", { value: "", children: `All ${label}` }),
-            (filter.options ?? []).map((opt) => /* @__PURE__ */ jsx7("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
-          ]
-        }
-      );
-    case "text":
-    default:
-      return /* @__PURE__ */ jsx7(
-        "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 { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-function BulkActionBar({
-  selectedCount,
-  actions,
-  onAction,
-  onClearSelection
-}) {
-  const Button = useComponent("button");
-  if (selectedCount === 0) return null;
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "8px 16px",
-        backgroundColor: "#f0f4ff",
-        borderRadius: "4px",
-        marginBottom: "8px"
-      },
-      children: [
-        /* @__PURE__ */ jsx8("span", { children: `${selectedCount} selected` }),
-        actions.map((action) => {
-          const Icon = action.icon;
-          return /* @__PURE__ */ jsx8(
-            Button,
-            {
-              onClick: () => onAction(action),
-              variant: "soft",
-              size: "sm",
-              startDecorator: Icon ? /* @__PURE__ */ jsx8(Icon, { className: "bulk-action-icon" }) : void 0,
-              children: action.label
-            },
-            action.label
-          );
-        }),
-        /* @__PURE__ */ jsx8(
-          Button,
-          {
-            onClick: onClearSelection,
-            variant: "plain",
-            size: "sm",
-            children: "Clear"
-          }
-        )
-      ]
-    }
-  );
-}
-
-// 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 { useState as useState3, useCallback as useCallback5, useRef as useRef3 } from "react";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsxs6("div", { children: [
-    /* @__PURE__ */ jsx9(
-      DropZoneSlot,
-      {
-        isDragOver,
-        isInvalid: !!(upload.error || upload.validationError),
-        onClick: handleClick,
-        onDrop: handleDrop,
-        onDragOver: handleDragOver,
-        onDragLeave: handleDragLeave,
-        accept: upload.accept,
-        children: children ?? defaultContent
-      }
-    ),
-    /* @__PURE__ */ jsx9(
-      "input",
-      {
-        ref: inputRef,
-        type: "file",
-        accept: upload.accept,
-        multiple,
-        style: { display: "none" },
-        onChange: (e) => handleFiles(e.target.files)
-      }
-    )
-  ] });
-}
-
-// src/components/image-preview.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-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 ? /* @__PURE__ */ jsx10("div", { children: fallback }) : /* @__PURE__ */ jsx10(
-      "div",
-      {
-        style: {
-          width,
-          height,
-          backgroundColor: "#f5f5f5",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          borderRadius: "4px",
-          color: "#999"
-        },
-        children: "No image"
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx10(
-    "img",
-    {
-      src: resolvedSrc,
-      alt,
-      style: {
-        width,
-        height,
-        objectFit: "cover",
-        borderRadius: "4px"
-      }
-    }
-  );
-}
-
-// src/components/file-list.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx11("div", { style: { color: "#999" }, children: "No files" });
-  }
-  return /* @__PURE__ */ jsx11(
-    "ul",
-    {
-      style: { listStyle: "none", padding: 0, margin: 0 },
-      "data-testid": "file-list",
-      children: files.map((file) => /* @__PURE__ */ jsx11(
-        FileListItem,
-        {
-          file,
-          onDownload
-        },
-        file.key
-      ))
-    }
-  );
-}
-function FileListItem({
-  file,
-  onDownload
-}) {
-  return /* @__PURE__ */ jsxs7(
-    "li",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "8px 0",
-        borderBottom: "1px solid #eee"
-      },
-      children: [
-        /* @__PURE__ */ jsx11("span", { style: { flex: 1 }, children: file.name }),
-        file.size != null ? /* @__PURE__ */ jsx11("span", { style: { color: "#666", fontSize: "0.85em" }, children: formatBytes(file.size) }) : null,
-        onDownload ? /* @__PURE__ */ jsx11(
-          "button",
-          {
-            onClick: () => onDownload(file),
-            style: {
-              background: "none",
-              border: "none",
-              cursor: "pointer",
-              color: "#1976d2",
-              textDecoration: "underline"
-            },
-            children: "Download"
-          }
-        ) : file.url ? /* @__PURE__ */ jsx11(
-          "a",
-          {
-            href: file.url,
-            download: file.name,
-            style: { color: "#1976d2", textDecoration: "underline" },
-            children: "Download"
-          }
-        ) : null
-      ]
-    }
-  );
-}
-
-// src/components/page-container.tsx
-import { Fragment, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-function PageContainer({
-  title,
-  breadcrumb,
-  actions,
-  tabs: _tabs,
-  children
-}) {
-  const PageContainerSlot = useComponent("pageContainer");
-  const Breadcrumb = useComponent("breadcrumb");
-  return /* @__PURE__ */ jsxs8(Fragment, { children: [
-    breadcrumb && breadcrumb.length > 0 ? /* @__PURE__ */ jsx12(Breadcrumb, { items: breadcrumb }) : null,
-    /* @__PURE__ */ jsx12(PageContainerSlot, { title, actions, children })
-  ] });
-}
-
-// src/components/empty-state.tsx
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
-function EmptyState({
-  title,
-  description,
-  createAction,
-  createLabel = "Create",
-  icon: Icon
-}) {
-  const Button = useComponent("button");
-  if (!createAction) {
-    return /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", padding: "48px 16px" }, children: [
-      Icon ? /* @__PURE__ */ jsx13(Icon, { className: "empty-state-icon" }) : null,
-      /* @__PURE__ */ jsx13("h3", { style: { margin: "16px 0 8px" }, children: title }),
-      description ? /* @__PURE__ */ jsx13("p", { style: { color: "#666" }, children: description }) : null
-    ] });
-  }
-  return /* @__PURE__ */ jsx13(
-    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 /* @__PURE__ */ jsx13("div", { style: { textAlign: "center", padding: "48px 16px" }, children: /* @__PURE__ */ jsx13("h3", { style: { margin: "16px 0 8px" }, children: "Nothing here yet" }) });
-  }
-  return /* @__PURE__ */ jsxs9("div", { style: { textAlign: "center", padding: "48px 16px" }, children: [
-    Icon ? /* @__PURE__ */ jsx13(Icon, { className: "empty-state-icon" }) : null,
-    /* @__PURE__ */ jsx13("h3", { style: { margin: "16px 0 8px" }, children: title }),
-    description ? /* @__PURE__ */ jsx13("p", { style: { color: "#666" }, children: description }) : null,
-    status.permitted ? /* @__PURE__ */ jsx13("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsx13(Button, { onClick: () => status.submit(), loading: status.pending, children: createLabel }) }) : null
-  ] });
-}
-
-// src/components/list-view.tsx
-import { useState as useState4, useCallback as useCallback6 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
-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 ? /* @__PURE__ */ jsx14(CreateButton, { action: createAction, label: createLabel }) : null;
-  return /* @__PURE__ */ jsx14(PageContainer, { title, breadcrumb, actions: createButton, children: /* @__PURE__ */ jsxs10("div", { children: [
-    filters && filters.length > 0 ? /* @__PURE__ */ jsx14(FilterBar, { filters, searchable }) : null,
-    selectable && bulkActions && bulkActions.length > 0 ? /* @__PURE__ */ jsx14(
-      BulkActionBar,
-      {
-        selectedCount: selectedRows.length,
-        actions: bulkActions,
-        onAction: handleBulkAction,
-        onClearSelection: clearSelection
-      }
-    ) : null,
-    data.items.length === 0 && !data.isLoading ? /* @__PURE__ */ jsx14(
-      EmptyState,
-      {
-        title: `No ${title.toLowerCase()} found`,
-        description: filters ? "Try adjusting your filters" : void 0,
-        createAction,
-        createLabel
-      }
-    ) : /* @__PURE__ */ jsx14(
-      DataTable,
-      {
-        data,
-        columns,
-        selectable,
-        selectedRows: selectable ? selectedRows : void 0,
-        onSelectionChange: selectable ? (rows) => setSelectedRows(rows) : void 0
-      }
-    ),
-    data.totalPages && data.totalPages > 1 && data.goToPage ? /* @__PURE__ */ jsxs10(
-      "div",
-      {
-        style: {
-          display: "flex",
-          justifyContent: "center",
-          gap: "8px",
-          marginTop: "16px"
-        },
-        children: [
-          /* @__PURE__ */ jsx14(
-            "button",
-            {
-              disabled: data.currentPage === 1,
-              onClick: () => data.goToPage?.(Math.max(1, (data.currentPage ?? 1) - 1)),
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsx14("span", { children: `Page ${data.currentPage ?? 1} of ${data.totalPages}` }),
-          /* @__PURE__ */ jsx14(
-            "button",
-            {
-              disabled: data.currentPage === data.totalPages,
-              onClick: () => data.goToPage?.(
-                Math.min(data.totalPages ?? 1, (data.currentPage ?? 1) + 1)
-              ),
-              children: "Next"
-            }
-          )
-        ]
-      }
-    ) : null,
-    data.hasMore && data.loadMore ? /* @__PURE__ */ jsx14("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx14("button", { onClick: data.loadMore, children: "Load more" }) }) : null
-  ] }) });
-}
-function CreateButton({ action, label }) {
-  const status = useActionStatus(action);
-  return /* @__PURE__ */ jsx14(ActionButton, { action: status, variant: "solid", color: "primary", children: label });
-}
-
-// src/components/detail-view.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-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 /* @__PURE__ */ jsx15(PageContainer, { title, breadcrumb, children: /* @__PURE__ */ jsx15(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: "1fr 1fr",
-        gap: "16px"
-      },
-      children: displayFields.map((field) => {
-        const value = getField(record, field.key);
-        const FieldComponent = field.render ? null : resolveFieldComponent(field.key, table);
-        return /* @__PURE__ */ jsxs11("div", { children: [
-          /* @__PURE__ */ jsx15(
-            "div",
-            {
-              style: {
-                fontSize: "0.85em",
-                color: "#666",
-                marginBottom: "4px",
-                fontWeight: 600
-              },
-              children: field.label ?? field.key
-            }
-          ),
-          /* @__PURE__ */ jsx15("div", { children: field.render ? field.render(value, record) : FieldComponent ? /* @__PURE__ */ jsx15(FieldComponent, { value }) : String(value ?? "\u2014") })
-        ] }, field.key);
-      })
-    }
-  ) });
-}
-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 = getField(table, _key);
-  if (!col || typeof col !== "object" || !("dataType" in col) || typeof col.dataType !== "string" || !("name" in col) || typeof col.name !== "string") {
-    return null;
-  }
-  return fieldForColumn({ dataType: col.dataType, name: col.name });
-}
-
-export {
-  useConfirm,
-  useActionToast,
-  ActionButton,
-  ConfirmProvider,
-  FormStatus,
-  RoleBadge,
-  ImpersonationBanner,
-  DataTable,
-  FilterBar,
-  BulkActionBar,
-  useColumnInference,
-  DropZone,
-  ImagePreview,
-  FileList,
-  PageContainer,
-  EmptyState,
-  ListView,
-  DetailView
-};