@cfast/ui 0.0.1 → 0.2.0

package/dist/chunk-PWBG6CGF.js

@@ -0,0 +1,1400 @@
+// src/plugin.tsx
+import { createContext, useContext } from "react";
+
+// src/headless-defaults.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var headlessDefaults = {
+  // Actions
+  button: ({ children, onClick, disabled, loading, type }) => /* @__PURE__ */ jsx("button", { onClick, disabled: disabled || loading, type: type ?? "button", children: loading ? "Loading..." : children }),
+  tooltip: ({ children, title }) => /* @__PURE__ */ jsx("span", { title, children }),
+  confirmDialog: ({ open, onClose, onConfirm, title, description, confirmLabel, cancelLabel }) => open ? /* @__PURE__ */ jsxs("dialog", { open: true, children: [
+    /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx("strong", { children: title }) }),
+    description ? /* @__PURE__ */ jsx("p", { children: description }) : null,
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("button", { onClick: onClose, children: cancelLabel ?? "Cancel" }),
+      /* @__PURE__ */ jsx("button", { onClick: onConfirm, children: confirmLabel ?? "Confirm" })
+    ] })
+  ] }) : null,
+  // Data display
+  table: ({ children }) => /* @__PURE__ */ jsx("table", { children }),
+  tableHead: ({ children }) => /* @__PURE__ */ jsx("thead", { children }),
+  tableBody: ({ children }) => /* @__PURE__ */ jsx("tbody", { children }),
+  tableRow: ({ children, onClick }) => /* @__PURE__ */ jsx("tr", { onClick, children }),
+  tableCell: ({ children, header, sortable, sortDirection, onSort }) => {
+    const Tag = header ? "th" : "td";
+    return /* @__PURE__ */ jsxs(
+      Tag,
+      {
+        onClick: sortable ? onSort : void 0,
+        style: sortable ? { cursor: "pointer" } : void 0,
+        children: [
+          children,
+          sortable && sortDirection ? sortDirection === "asc" ? " \u2191" : " \u2193" : null
+        ]
+      }
+    );
+  },
+  chip: ({ children, size }) => /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: size === "sm" ? "1px 6px" : "2px 8px",
+        borderRadius: "12px",
+        fontSize: size === "sm" ? "12px" : "14px",
+        backgroundColor: "#eee"
+      },
+      children
+    }
+  ),
+  // Layout
+  appShell: ({ children, sidebar, header }) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", minHeight: "100vh" }, children: [
+    sidebar ? /* @__PURE__ */ jsx("nav", { children: sidebar }) : null,
+    /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+      header ?? null,
+      /* @__PURE__ */ jsx("main", { children })
+    ] })
+  ] }),
+  sidebar: ({ children }) => /* @__PURE__ */ jsx("aside", { style: { width: "240px", borderRight: "1px solid #ddd" }, children }),
+  pageContainer: ({ children, title, actions }) => /* @__PURE__ */ jsxs("div", { children: [
+    title || actions ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      title ? /* @__PURE__ */ jsx("h1", { children: title }) : null,
+      actions ?? null
+    ] }) : null,
+    children
+  ] }),
+  breadcrumb: ({ items }) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", children: items.map((item, i) => /* @__PURE__ */ jsxs("span", { children: [
+    i > 0 ? " / " : null,
+    item.to ? /* @__PURE__ */ jsx("a", { href: item.to, children: item.label }) : item.label
+  ] }, i)) }),
+  // Feedback
+  toast: ({ children }) => /* @__PURE__ */ jsx("div", { children }),
+  alert: ({ children, color }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "alert",
+      style: {
+        padding: "8px 12px",
+        borderRadius: "4px",
+        backgroundColor: color === "danger" ? "#fee" : color === "success" ? "#efe" : color === "warning" ? "#ffe" : "#f5f5f5"
+      },
+      children
+    }
+  ),
+  // File
+  dropZone: ({ children, isDragOver, onClick, onDrop, onDragOver, onDragLeave }) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      onClick,
+      onDrop: (e) => {
+        e.preventDefault();
+        onDrop(e.dataTransfer.files);
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        onDragOver(e);
+      },
+      onDragLeave,
+      style: {
+        border: `2px dashed ${isDragOver ? "#4caf50" : "#ccc"}`,
+        borderRadius: "8px",
+        padding: "32px",
+        textAlign: "center",
+        cursor: "pointer"
+      },
+      children
+    }
+  )
+};
+
+// src/plugin.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var UIPluginContext = createContext(null);
+function createUIPlugin(config) {
+  return { components: config.components };
+}
+function UIPluginProvider({
+  plugin,
+  children
+}) {
+  return /* @__PURE__ */ jsx2(UIPluginContext.Provider, { value: plugin, children });
+}
+function useUIPlugin() {
+  return useContext(UIPluginContext);
+}
+function useComponent(slot) {
+  const plugin = useUIPlugin();
+  const merged = { ...headlessDefaults, ...plugin?.components };
+  return merged[slot];
+}
+
+// src/hooks/use-confirm.ts
+import { createContext as createContext2, useContext as useContext2, useCallback } from "react";
+var ConfirmContext = createContext2(null);
+function useConfirm() {
+  const ctx = useContext2(ConfirmContext);
+  if (!ctx) {
+    throw new Error("useConfirm must be used within a <ConfirmProvider>");
+  }
+  return useCallback(
+    (options) => ctx.confirm(options),
+    [ctx]
+  );
+}
+
+// src/hooks/use-toast.ts
+import { createContext as createContext3, useContext as useContext3, useCallback as useCallback2 } from "react";
+var ToastContext = createContext3(null);
+function useToast() {
+  const ctx = useContext3(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a <ToastProvider>");
+  }
+  const show = useCallback2(
+    (options) => ctx.show(options),
+    [ctx]
+  );
+  const success = useCallback2(
+    (message, description) => ctx.show({ message, type: "success", description }),
+    [ctx]
+  );
+  const error = useCallback2(
+    (message, description) => ctx.show({ message, type: "error", description }),
+    [ctx]
+  );
+  const info = useCallback2(
+    (message, description) => ctx.show({ message, type: "info", description }),
+    [ctx]
+  );
+  const warning = useCallback2(
+    (message, description) => ctx.show({ message, type: "warning", description }),
+    [ctx]
+  );
+  return { show, success, error, info, warning };
+}
+
+// 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 { Fragment, jsx as jsx3 } from "react/jsx-runtime";
+function PermissionGate({
+  action,
+  children,
+  fallback
+}) {
+  if (action.invisible) {
+    return null;
+  }
+  if (!action.permitted) {
+    return fallback ? /* @__PURE__ */ jsx3(Fragment, { children: fallback }) : null;
+  }
+  return /* @__PURE__ */ jsx3(Fragment, { children });
+}
+
+// src/components/action-button.tsx
+import { jsx as jsx4 } 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__ */ jsx4(
+    Button,
+    {
+      ...buttonProps,
+      onClick: () => action.submit(),
+      disabled,
+      loading: action.pending,
+      children
+    }
+  );
+}
+
+// src/components/confirm-provider.tsx
+import { useState, useCallback as useCallback3, useRef as useRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmProvider({ children }) {
+  const [state, setState] = useState(null);
+  const ConfirmDialog = useComponent("confirmDialog");
+  const resolveRef = useRef2(null);
+  const confirm = useCallback3((options) => {
+    return new Promise((resolve) => {
+      resolveRef.current = resolve;
+      setState({ ...options, resolve });
+    });
+  }, []);
+  const handleClose = useCallback3(() => {
+    resolveRef.current?.(false);
+    resolveRef.current = null;
+    setState(null);
+  }, []);
+  const handleConfirm = useCallback3(() => {
+    resolveRef.current?.(true);
+    resolveRef.current = null;
+    setState(null);
+  }, []);
+  return /* @__PURE__ */ jsxs2(ConfirmContext.Provider, { value: { confirm }, children: [
+    children,
+    state ? /* @__PURE__ */ jsx5(
+      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 jsx6 } from "react/jsx-runtime";
+function FormStatus({ data }) {
+  const Alert = useComponent("alert");
+  if (!data) return null;
+  const elements = [];
+  if (data.success) {
+    elements.push(
+      /* @__PURE__ */ jsx6(Alert, { color: "success", children: data.success }, "success")
+    );
+  }
+  if (data.error) {
+    elements.push(
+      /* @__PURE__ */ jsx6(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__ */ jsx6(Alert, { color: "danger", children: /* @__PURE__ */ jsx6("ul", { style: { margin: 0, paddingLeft: "16px" }, children: errorMessages.map((msg, i) => /* @__PURE__ */ jsx6("li", { children: msg }, i)) }) }, "field-errors")
+      );
+    }
+  }
+  if (elements.length === 0) return null;
+  return /* @__PURE__ */ jsx6("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: elements });
+}
+
+// src/components/avatar-with-initials.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+var sizeMap = { sm: 32, md: 40, lg: 56 };
+function AvatarWithInitials({
+  src,
+  name,
+  size = "md"
+}) {
+  const px = sizeMap[size];
+  if (src) {
+    return /* @__PURE__ */ jsx7(
+      "img",
+      {
+        src,
+        alt: name,
+        style: {
+          width: px,
+          height: px,
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx7(
+    "span",
+    {
+      "aria-label": name,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: px,
+        height: px,
+        borderRadius: "50%",
+        backgroundColor: "#ddd",
+        fontSize: px * 0.4,
+        fontWeight: "bold"
+      },
+      children: getInitials(name)
+    }
+  );
+}
+
+// src/components/role-badge.tsx
+import { jsx as jsx8 } 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__ */ jsx8(Chip, { color: chipColor, variant: "soft", size: "sm", children: role });
+}
+
+// src/components/impersonation-banner.tsx
+import { useCurrentUser } from "@cfast/auth/client";
+import { jsx as jsx9, jsxs as jsxs3 } 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__ */ jsx9(Alert, { color: "warning", children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx9("strong", { children: `Viewing as ${user.name} (${user.email})` }),
+        /* @__PURE__ */ jsx9("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx9(Button, { type: "submit", variant: "outlined", size: "sm", children: "Stop Impersonating" }) })
+      ]
+    }
+  ) });
+}
+
+// src/record-access.ts
+function getField(obj, key) {
+  if (typeof obj !== "object" || obj === null) {
+    return void 0;
+  }
+  return obj[key];
+}
+function getRecordId(obj) {
+  const id = getField(obj, "id");
+  if (typeof id === "string" || typeof id === "number") {
+    return id;
+  }
+  return 0;
+}
+
+// src/components/data-table.tsx
+import { useState as useState2, useCallback as useCallback4 } from "react";
+import { jsx as jsx10, jsxs as jsxs4 } 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 = useCallback4((key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }, [sortKey]);
+  const toggleRow = useCallback4((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__ */ jsx10("div", { style: { textAlign: "center", padding: "32px", color: "#666" }, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsxs4(Table, { hoverRow: true, children: [
+    /* @__PURE__ */ jsx10(TableHead, { children: /* @__PURE__ */ jsxs4(TableRow, { children: [
+      selectable ? /* @__PURE__ */ jsx10(TableCell, { header: true, children: "" }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx10(
+        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__ */ jsx10(TableBody, { children: data.items.map((row) => {
+      const id = (getRowId ?? defaultGetId)(row);
+      const isSelected = selectedSet.has(id);
+      return /* @__PURE__ */ jsxs4(
+        TableRow,
+        {
+          selected: isSelected,
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          children: [
+            selectable ? /* @__PURE__ */ jsx10(TableCell, { children: /* @__PURE__ */ jsx10(
+              "input",
+              {
+                type: "checkbox",
+                checked: isSelected,
+                onChange: () => toggleRow(id)
+              }
+            ) }) : null,
+            columns.map((col) => {
+              const value = getField(row, col.key);
+              return /* @__PURE__ */ jsx10(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 useCallback5 } from "react";
+import { useSearchParams, useNavigate, useLocation } from "react-router";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+function FilterBar({
+  filters,
+  searchable
+}) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const updateParam = useCallback5(
+    (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__ */ jsxs5(
+    "div",
+    {
+      style: {
+        display: "flex",
+        gap: "8px",
+        flexWrap: "wrap",
+        alignItems: "center",
+        marginBottom: "16px"
+      },
+      children: [
+        searchable && searchable.length > 0 ? /* @__PURE__ */ jsx11(
+          "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__ */ jsx11(
+          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__ */ jsxs5(
+        "select",
+        {
+          value,
+          onChange: (e) => onChange(e.target.value),
+          "aria-label": label,
+          children: [
+            /* @__PURE__ */ jsx11("option", { value: "", children: `All ${label}` }),
+            (filter.options ?? []).map((opt) => /* @__PURE__ */ jsx11("option", { value: String(opt.value), children: opt.label }, String(opt.value)))
+          ]
+        }
+      );
+    case "text":
+    default:
+      return /* @__PURE__ */ jsx11(
+        "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 jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function BulkActionBar({
+  selectedCount,
+  actions,
+  onAction,
+  onClearSelection
+}) {
+  const Button = useComponent("button");
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 16px",
+        backgroundColor: "#f0f4ff",
+        borderRadius: "4px",
+        marginBottom: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx12("span", { children: `${selectedCount} selected` }),
+        actions.map((action) => {
+          const Icon = action.icon;
+          return /* @__PURE__ */ jsx12(
+            Button,
+            {
+              onClick: () => onAction(action),
+              variant: "soft",
+              size: "sm",
+              startDecorator: Icon ? /* @__PURE__ */ jsx12(Icon, { className: "bulk-action-icon" }) : void 0,
+              children: action.label
+            },
+            action.label
+          );
+        }),
+        /* @__PURE__ */ jsx12(
+          Button,
+          {
+            onClick: onClearSelection,
+            variant: "plain",
+            size: "sm",
+            children: "Clear"
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/fields/date-field.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+function getRelativeTime(date) {
+  const now = Date.now();
+  const diffMs = date.getTime() - now;
+  const diffSec = Math.round(diffMs / 1e3);
+  const diffMin = Math.round(diffSec / 60);
+  const diffHour = Math.round(diffMin / 60);
+  const diffDay = Math.round(diffHour / 24);
+  if (Math.abs(diffSec) < 60) return rtf.format(diffSec, "second");
+  if (Math.abs(diffMin) < 60) return rtf.format(diffMin, "minute");
+  if (Math.abs(diffHour) < 24) return rtf.format(diffHour, "hour");
+  if (Math.abs(diffDay) < 30) return rtf.format(diffDay, "day");
+  const diffMonth = Math.round(diffDay / 30);
+  if (Math.abs(diffMonth) < 12) return rtf.format(diffMonth, "month");
+  return rtf.format(Math.round(diffDay / 365), "year");
+}
+function formatDate(date, format, locale) {
+  switch (format) {
+    case "relative":
+      return getRelativeTime(date);
+    case "long":
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "long"
+      }).format(date);
+    case "datetime":
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium",
+        timeStyle: "short"
+      }).format(date);
+    case "short":
+    default:
+      return new Intl.DateTimeFormat(locale, {
+        dateStyle: "medium"
+      }).format(date);
+  }
+}
+function DateField({
+  value,
+  format = "short",
+  locale = "en"
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx13("span", { children: "\u2014" });
+  }
+  const date = value instanceof Date ? value : typeof value === "string" || typeof value === "number" ? new Date(value) : new Date(String(value));
+  if (Number.isNaN(date.getTime())) {
+    return /* @__PURE__ */ jsx13("span", { children: "Invalid date" });
+  }
+  return /* @__PURE__ */ jsx13("time", { dateTime: date.toISOString(), children: formatDate(date, format, locale) });
+}
+
+// src/fields/boolean-field.tsx
+import { jsx as jsx14 } from "react/jsx-runtime";
+function BooleanField({
+  value,
+  trueLabel = "Yes",
+  falseLabel = "No",
+  trueColor = "success",
+  falseColor = "neutral"
+}) {
+  const Chip = useComponent("chip");
+  if (value == null) {
+    return /* @__PURE__ */ jsx14("span", { children: "\u2014" });
+  }
+  const boolValue = Boolean(value);
+  const color = boolValue ? trueColor : falseColor;
+  const chipColor = isChipColor(color) ? color : "neutral";
+  return /* @__PURE__ */ jsx14(
+    Chip,
+    {
+      color: chipColor,
+      variant: "soft",
+      size: "sm",
+      children: boolValue ? trueLabel : falseLabel
+    }
+  );
+}
+var CHIP_COLORS = /* @__PURE__ */ new Set(["success", "neutral", "danger", "primary", "warning"]);
+function isChipColor(value) {
+  return CHIP_COLORS.has(value);
+}
+
+// src/fields/number-field.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function NumberField({
+  value,
+  locale = "en",
+  currency,
+  decimals
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx15("span", { children: "\u2014" });
+  }
+  const num = typeof value === "number" ? value : Number(value);
+  if (Number.isNaN(num)) {
+    return /* @__PURE__ */ jsx15("span", { children: "\u2014" });
+  }
+  const options = {};
+  if (currency) {
+    options.style = "currency";
+    options.currency = currency;
+  }
+  if (decimals !== void 0) {
+    options.minimumFractionDigits = decimals;
+    options.maximumFractionDigits = decimals;
+  }
+  const formatted = new Intl.NumberFormat(locale, options).format(num);
+  return /* @__PURE__ */ jsx15("span", { children: formatted });
+}
+
+// src/fields/text-field.tsx
+import { jsx as jsx16 } from "react/jsx-runtime";
+function TextField({
+  value,
+  maxLength
+}) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx16("span", { children: "\u2014" });
+  }
+  const text = String(value);
+  const display = maxLength && text.length > maxLength ? `${text.slice(0, maxLength)}\u2026` : text;
+  if (maxLength && text.length > maxLength) {
+    return /* @__PURE__ */ jsx16("span", { title: text, children: display });
+  }
+  return /* @__PURE__ */ jsx16("span", { children: display });
+}
+
+// src/fields/email-field.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+function EmailField({ value }) {
+  if (value == null) {
+    return /* @__PURE__ */ jsx17("span", { children: "\u2014" });
+  }
+  const email = String(value);
+  return /* @__PURE__ */ jsx17("a", { href: `mailto:${email}`, children: email });
+}
+
+// src/fields/json-field.tsx
+import { useState as useState3 } from "react";
+import { jsx as jsx18, jsxs as jsxs7 } from "react/jsx-runtime";
+function JsonField({
+  value,
+  collapsed = false
+}) {
+  const [isCollapsed, setIsCollapsed] = useState3(collapsed);
+  if (value == null) {
+    return /* @__PURE__ */ jsx18("span", { children: "\u2014" });
+  }
+  const formatted = JSON.stringify(value, null, 2);
+  if (isCollapsed) {
+    const preview = JSON.stringify(value);
+    const short = preview.length > 60 ? `${preview.slice(0, 60)}\u2026` : preview;
+    return /* @__PURE__ */ jsxs7("span", { children: [
+      /* @__PURE__ */ jsx18("code", { children: short }),
+      " ",
+      /* @__PURE__ */ jsx18(
+        "button",
+        {
+          onClick: () => setIsCollapsed(false),
+          style: { border: "none", background: "none", cursor: "pointer", color: "#666", fontSize: "12px" },
+          children: "expand"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx18(
+    "pre",
+    {
+      style: {
+        margin: 0,
+        fontSize: "13px",
+        backgroundColor: "#f5f5f5",
+        padding: "8px",
+        borderRadius: "4px",
+        overflow: "auto"
+      },
+      children: /* @__PURE__ */ jsx18("code", { children: formatted })
+    }
+  );
+}
+
+// src/fields/field-for-column.ts
+function fieldForColumn(column) {
+  const { dataType, name } = column;
+  const dt = dataType.toLowerCase();
+  if (dt === "boolean" || dt === "integer" && name.startsWith("is")) {
+    return BooleanField;
+  }
+  if (dt.includes("timestamp") || dt.includes("date") || dt.includes("datetime")) {
+    return DateField;
+  }
+  if (dt === "integer" || dt === "real" || dt === "numeric" || dt.includes("int") || dt.includes("float") || dt.includes("double") || dt.includes("decimal")) {
+    return NumberField;
+  }
+  if (name === "email" || name.endsWith("Email")) {
+    return EmailField;
+  }
+  if (dt === "json" || dt === "jsonb" || dt === "blob") {
+    return JsonField;
+  }
+  return TextField;
+}
+function fieldsForTable(table) {
+  const result = {};
+  for (const [key, col] of Object.entries(table)) {
+    if (isColumnMeta(col)) {
+      result[key] = fieldForColumn(col);
+    }
+  }
+  return result;
+}
+function isColumnMeta(value) {
+  return typeof value === "object" && value !== null && "dataType" in value && typeof value.dataType === "string" && "name" in value && typeof value.name === "string";
+}
+
+// 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 useState4, useCallback as useCallback6, useRef as useRef3 } from "react";
+import { jsx as jsx19, jsxs as jsxs8 } from "react/jsx-runtime";
+function DropZone({
+  upload,
+  multiple = false,
+  children
+}) {
+  const DropZoneSlot = useComponent("dropZone");
+  const [isDragOver, setIsDragOver] = useState4(false);
+  const inputRef = useRef3(null);
+  const handleFiles = useCallback6(
+    (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 = useCallback6(
+    (files) => {
+      setIsDragOver(false);
+      handleFiles(files);
+    },
+    [handleFiles]
+  );
+  const handleClick = useCallback6(() => {
+    inputRef.current?.click();
+  }, []);
+  const handleDragOver = useCallback6((_e) => {
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback6(() => {
+    setIsDragOver(false);
+  }, []);
+  const defaultContent = upload.isUploading ? `Uploading... ${upload.progress}%` : upload.error ?? upload.validationError ?? "Drop files here or click to browse";
+  return /* @__PURE__ */ jsxs8("div", { children: [
+    /* @__PURE__ */ jsx19(
+      DropZoneSlot,
+      {
+        isDragOver,
+        isInvalid: !!(upload.error || upload.validationError),
+        onClick: handleClick,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        accept: upload.accept,
+        children: children ?? defaultContent
+      }
+    ),
+    /* @__PURE__ */ jsx19(
+      "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 jsx20 } 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__ */ jsx20("div", { children: fallback }) : /* @__PURE__ */ jsx20(
+      "div",
+      {
+        style: {
+          width,
+          height,
+          backgroundColor: "#f5f5f5",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "4px",
+          color: "#999"
+        },
+        children: "No image"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx20(
+    "img",
+    {
+      src: resolvedSrc,
+      alt,
+      style: {
+        width,
+        height,
+        objectFit: "cover",
+        borderRadius: "4px"
+      }
+    }
+  );
+}
+
+// src/components/file-list.tsx
+import { jsx as jsx21, jsxs as jsxs9 } 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__ */ jsx21("div", { style: { color: "#999" }, children: "No files" });
+  }
+  return /* @__PURE__ */ jsx21(
+    "ul",
+    {
+      style: { listStyle: "none", padding: 0, margin: 0 },
+      "data-testid": "file-list",
+      children: files.map((file) => /* @__PURE__ */ jsx21(
+        FileListItem,
+        {
+          file,
+          onDownload
+        },
+        file.key
+      ))
+    }
+  );
+}
+function FileListItem({
+  file,
+  onDownload
+}) {
+  return /* @__PURE__ */ jsxs9(
+    "li",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "8px",
+        padding: "8px 0",
+        borderBottom: "1px solid #eee"
+      },
+      children: [
+        /* @__PURE__ */ jsx21("span", { style: { flex: 1 }, children: file.name }),
+        file.size != null ? /* @__PURE__ */ jsx21("span", { style: { color: "#666", fontSize: "0.85em" }, children: formatBytes(file.size) }) : null,
+        onDownload ? /* @__PURE__ */ jsx21(
+          "button",
+          {
+            onClick: () => onDownload(file),
+            style: {
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              color: "#1976d2",
+              textDecoration: "underline"
+            },
+            children: "Download"
+          }
+        ) : file.url ? /* @__PURE__ */ jsx21(
+          "a",
+          {
+            href: file.url,
+            download: file.name,
+            style: { color: "#1976d2", textDecoration: "underline" },
+            children: "Download"
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/page-container.tsx
+import { Fragment as Fragment2, jsx as jsx22, jsxs as jsxs10 } from "react/jsx-runtime";
+function PageContainer({
+  title,
+  breadcrumb,
+  actions,
+  tabs: _tabs,
+  children
+}) {
+  const PageContainerSlot = useComponent("pageContainer");
+  const Breadcrumb = useComponent("breadcrumb");
+  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
+    breadcrumb && breadcrumb.length > 0 ? /* @__PURE__ */ jsx22(Breadcrumb, { items: breadcrumb }) : null,
+    /* @__PURE__ */ jsx22(PageContainerSlot, { title, actions, children })
+  ] });
+}
+
+// src/hooks/use-action-status.ts
+import { useActions as useActions2 } from "@cfast/actions/client";
+function useActionStatus(descriptor) {
+  const actions = useActions2(descriptor);
+  const name = descriptor.actionNames[0];
+  return actions[name]();
+}
+
+// src/components/empty-state.tsx
+import { jsx as jsx23, jsxs as jsxs11 } from "react/jsx-runtime";
+function EmptyState({
+  title,
+  description,
+  createAction,
+  createLabel = "Create",
+  icon: Icon
+}) {
+  const Button = useComponent("button");
+  if (!createAction) {
+    return /* @__PURE__ */ jsxs11("div", { style: { textAlign: "center", padding: "48px 16px" }, children: [
+      Icon ? /* @__PURE__ */ jsx23(Icon, { className: "empty-state-icon" }) : null,
+      /* @__PURE__ */ jsx23("h3", { style: { margin: "16px 0 8px" }, children: title }),
+      description ? /* @__PURE__ */ jsx23("p", { style: { color: "#666" }, children: description }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx23(
+    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__ */ jsx23("div", { style: { textAlign: "center", padding: "48px 16px" }, children: /* @__PURE__ */ jsx23("h3", { style: { margin: "16px 0 8px" }, children: "Nothing here yet" }) });
+  }
+  return /* @__PURE__ */ jsxs11("div", { style: { textAlign: "center", padding: "48px 16px" }, children: [
+    Icon ? /* @__PURE__ */ jsx23(Icon, { className: "empty-state-icon" }) : null,
+    /* @__PURE__ */ jsx23("h3", { style: { margin: "16px 0 8px" }, children: title }),
+    description ? /* @__PURE__ */ jsx23("p", { style: { color: "#666" }, children: description }) : null,
+    status.permitted ? /* @__PURE__ */ jsx23("div", { style: { marginTop: "16px" }, children: /* @__PURE__ */ jsx23(Button, { onClick: () => status.submit(), loading: status.pending, children: createLabel }) }) : null
+  ] });
+}
+
+// src/components/list-view.tsx
+import { useState as useState5, useCallback as useCallback7 } from "react";
+import { jsx as jsx24, jsxs as jsxs12 } 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] = useState5([]);
+  const handleBulkAction = useCallback7(
+    (action) => {
+      if (action.handler) {
+        action.handler(selectedRows);
+      }
+    },
+    [selectedRows]
+  );
+  const clearSelection = useCallback7(() => {
+    setSelectedRows([]);
+  }, []);
+  const createButton = createAction ? /* @__PURE__ */ jsx24(CreateButton, { action: createAction, label: createLabel }) : null;
+  return /* @__PURE__ */ jsx24(PageContainer, { title, breadcrumb, actions: createButton, children: /* @__PURE__ */ jsxs12("div", { children: [
+    filters && filters.length > 0 ? /* @__PURE__ */ jsx24(FilterBar, { filters, searchable }) : null,
+    selectable && bulkActions && bulkActions.length > 0 ? /* @__PURE__ */ jsx24(
+      BulkActionBar,
+      {
+        selectedCount: selectedRows.length,
+        actions: bulkActions,
+        onAction: handleBulkAction,
+        onClearSelection: clearSelection
+      }
+    ) : null,
+    data.items.length === 0 && !data.isLoading ? /* @__PURE__ */ jsx24(
+      EmptyState,
+      {
+        title: `No ${title.toLowerCase()} found`,
+        description: filters ? "Try adjusting your filters" : void 0,
+        createAction,
+        createLabel
+      }
+    ) : /* @__PURE__ */ jsx24(
+      DataTable,
+      {
+        data,
+        columns,
+        selectable,
+        selectedRows: selectable ? selectedRows : void 0,
+        onSelectionChange: selectable ? (rows) => setSelectedRows(rows) : void 0
+      }
+    ),
+    data.totalPages && data.totalPages > 1 && data.goToPage ? /* @__PURE__ */ jsxs12(
+      "div",
+      {
+        style: {
+          display: "flex",
+          justifyContent: "center",
+          gap: "8px",
+          marginTop: "16px"
+        },
+        children: [
+          /* @__PURE__ */ jsx24(
+            "button",
+            {
+              disabled: data.currentPage === 1,
+              onClick: () => data.goToPage?.(Math.max(1, (data.currentPage ?? 1) - 1)),
+              children: "Previous"
+            }
+          ),
+          /* @__PURE__ */ jsx24("span", { children: `Page ${data.currentPage ?? 1} of ${data.totalPages}` }),
+          /* @__PURE__ */ jsx24(
+            "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__ */ jsx24("div", { style: { textAlign: "center", marginTop: "16px" }, children: /* @__PURE__ */ jsx24("button", { onClick: data.loadMore, children: "Load more" }) }) : null
+  ] }) });
+}
+function CreateButton({ action, label }) {
+  const status = useActionStatus(action);
+  return /* @__PURE__ */ jsx24(ActionButton, { action: status, variant: "solid", color: "primary", children: label });
+}
+
+// src/components/detail-view.tsx
+import { jsx as jsx25, jsxs as jsxs13 } 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__ */ jsx25(PageContainer, { title, breadcrumb, children: /* @__PURE__ */ jsx25(
+    "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__ */ jsxs13("div", { children: [
+          /* @__PURE__ */ jsx25(
+            "div",
+            {
+              style: {
+                fontSize: "0.85em",
+                color: "#666",
+                marginBottom: "4px",
+                fontWeight: 600
+              },
+              children: field.label ?? field.key
+            }
+          ),
+          /* @__PURE__ */ jsx25("div", { children: field.render ? field.render(value, record) : FieldComponent ? /* @__PURE__ */ jsx25(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 {
+  createUIPlugin,
+  UIPluginProvider,
+  useUIPlugin,
+  useComponent,
+  useConfirm,
+  ToastContext,
+  useToast,
+  useActionToast,
+  PermissionGate,
+  ActionButton,
+  ConfirmProvider,
+  FormStatus,
+  getInitials,
+  AvatarWithInitials,
+  RoleBadge,
+  ImpersonationBanner,
+  getField,
+  getRecordId,
+  DataTable,
+  FilterBar,
+  BulkActionBar,
+  DateField,
+  BooleanField,
+  NumberField,
+  TextField,
+  EmailField,
+  JsonField,
+  fieldForColumn,
+  fieldsForTable,
+  useColumnInference,
+  DropZone,
+  ImagePreview,
+  FileList,
+  PageContainer,
+  useActionStatus,
+  EmptyState,
+  ListView,
+  DetailView
+};