@cfast/joy 0.0.1

package/dist/index.js

@@ -0,0 +1,1151 @@
+// src/action-button.tsx
+import "react";
+import JoyButton from "@mui/joy/Button";
+import JoyTooltip from "@mui/joy/Tooltip";
+import { jsx } from "react/jsx-runtime";
+function ActionButton({
+  action,
+  children,
+  whenForbidden = "disable",
+  confirmation: _confirmation,
+  variant = "solid",
+  color = "primary",
+  size = "md",
+  ...buttonProps
+}) {
+  if (action.invisible) {
+    return null;
+  }
+  if (!action.permitted && whenForbidden === "hide") {
+    return null;
+  }
+  const disabled = !action.permitted && whenForbidden === "disable";
+  const button = /* @__PURE__ */ jsx(
+    JoyButton,
+    {
+      ...buttonProps,
+      onClick: () => action.submit(),
+      disabled,
+      loading: action.pending,
+      variant,
+      color,
+      size,
+      children
+    }
+  );
+  if (disabled && action.reason) {
+    const wrapper = /* @__PURE__ */ jsx("span", { children: button });
+    return /* @__PURE__ */ jsx(JoyTooltip, { title: action.reason, children: wrapper });
+  }
+  return button;
+}
+
+// src/confirm-dialog.tsx
+import "react";
+import Modal from "@mui/joy/Modal";
+import ModalDialog from "@mui/joy/ModalDialog";
+import Typography from "@mui/joy/Typography";
+import Button from "@mui/joy/Button";
+import Stack from "@mui/joy/Stack";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default"
+}) {
+  const dialog = /* @__PURE__ */ jsxs(ModalDialog, { variant: "outlined", role: "alertdialog", sx: { maxWidth: 400 }, children: [
+    /* @__PURE__ */ jsx2(Typography, { level: "h4", children: title }),
+    description ? /* @__PURE__ */ jsx2(Typography, { level: "body-md", sx: { mt: 1 }, children: description }) : null,
+    /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", sx: { mt: 2 }, children: [
+      /* @__PURE__ */ jsx2(Button, { variant: "plain", color: "neutral", onClick: onClose, children: cancelLabel }),
+      /* @__PURE__ */ jsx2(
+        Button,
+        {
+          variant: "solid",
+          color: variant === "danger" ? "danger" : "primary",
+          onClick: onConfirm,
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] });
+  return /* @__PURE__ */ jsx2(Modal, { open, onClose, children: dialog });
+}
+
+// src/toast-provider.tsx
+import { useCallback } from "react";
+import { toast, Toaster } from "sonner";
+import { ToastContext } from "@cfast/ui";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ToastProvider({ children }) {
+  const show = useCallback((options) => {
+    const method = options.type ?? "info";
+    switch (method) {
+      case "success":
+        toast.success(options.message, { description: options.description, duration: options.duration });
+        break;
+      case "error":
+        toast.error(options.message, { description: options.description, duration: options.duration });
+        break;
+      case "warning":
+        toast.warning(options.message, { description: options.description, duration: options.duration });
+        break;
+      default:
+        toast.info(options.message, { description: options.description, duration: options.duration });
+        break;
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs2(ToastContext.Provider, { value: { show }, children: [
+    children,
+    /* @__PURE__ */ jsx3(Toaster, { richColors: true, position: "bottom-right" })
+  ] });
+}
+
+// src/form-status.tsx
+import "react";
+import Alert from "@mui/joy/Alert";
+import Stack2 from "@mui/joy/Stack";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function FormStatus({ data }) {
+  if (!data) return null;
+  const elements = [];
+  if (data.success) {
+    elements.push(
+      /* @__PURE__ */ jsx4(Alert, { color: "success", variant: "soft", children: data.success }, "success")
+    );
+  }
+  if (data.error) {
+    elements.push(
+      /* @__PURE__ */ jsx4(Alert, { color: "danger", variant: "soft", 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__ */ jsx4(Alert, { color: "danger", variant: "soft", children: /* @__PURE__ */ jsx4("ul", { style: { margin: 0, paddingLeft: "16px" }, children: errorMessages.map((msg, i) => /* @__PURE__ */ jsx4("li", { children: msg }, i)) }) }, "field-errors")
+      );
+    }
+  }
+  if (elements.length === 0) return null;
+  return /* @__PURE__ */ jsx4(Stack2, { spacing: 1, children: elements });
+}
+
+// src/empty-state.tsx
+import "react";
+import Typography2 from "@mui/joy/Typography";
+import Button2 from "@mui/joy/Button";
+import Stack3 from "@mui/joy/Stack";
+import { useActionStatus } from "@cfast/ui";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function EmptyState({
+  title,
+  description,
+  createAction,
+  createLabel = "Create",
+  icon: Icon
+}) {
+  if (!createAction) {
+    return /* @__PURE__ */ jsxs3(Stack3, { alignItems: "center", spacing: 2, sx: { py: 6, px: 2 }, children: [
+      Icon ? /* @__PURE__ */ jsx5(Icon, { className: "empty-state-icon" }) : null,
+      /* @__PURE__ */ jsx5(Typography2, { level: "h3", children: title }),
+      description ? /* @__PURE__ */ jsx5(Typography2, { level: "body-md", color: "neutral", children: description }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsx5(
+    EmptyStateWithAction,
+    {
+      title,
+      description,
+      createAction,
+      createLabel,
+      icon: Icon
+    }
+  );
+}
+function EmptyStateWithAction({
+  title,
+  description,
+  createAction,
+  createLabel,
+  icon: Icon
+}) {
+  const status = useActionStatus(createAction);
+  if (status.invisible) {
+    return /* @__PURE__ */ jsx5(Stack3, { alignItems: "center", spacing: 2, sx: { py: 6, px: 2 }, children: /* @__PURE__ */ jsx5(Typography2, { level: "h3", children: "Nothing here yet" }) });
+  }
+  return /* @__PURE__ */ jsxs3(Stack3, { alignItems: "center", spacing: 2, sx: { py: 6, px: 2 }, children: [
+    Icon ? /* @__PURE__ */ jsx5(Icon, { className: "empty-state-icon" }) : null,
+    /* @__PURE__ */ jsx5(Typography2, { level: "h3", children: title }),
+    description ? /* @__PURE__ */ jsx5(Typography2, { level: "body-md", color: "neutral", children: description }) : null,
+    status.permitted ? /* @__PURE__ */ jsx5(Button2, { onClick: () => status.submit(), loading: status.pending, children: createLabel }) : null
+  ] });
+}
+
+// src/navigation-progress.tsx
+import "react";
+import LinearProgress from "@mui/joy/LinearProgress";
+import { useNavigation } from "react-router";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function NavigationProgress() {
+  const navigation = useNavigation();
+  const isNavigating = navigation.state === "loading";
+  if (!isNavigating) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx6(
+    LinearProgress,
+    {
+      sx: {
+        position: "fixed",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 9999,
+        "--LinearProgress-radius": "0px",
+        "--LinearProgress-thickness": "3px"
+      }
+    }
+  );
+}
+
+// src/page-container.tsx
+import "react";
+import Typography3 from "@mui/joy/Typography";
+import Breadcrumbs from "@mui/joy/Breadcrumbs";
+import { Link } from "react-router";
+import Stack4 from "@mui/joy/Stack";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function PageContainer({
+  title,
+  breadcrumb,
+  actions,
+  tabs: _tabs,
+  children
+}) {
+  return /* @__PURE__ */ jsxs4("div", { style: { padding: "16px 24px" }, children: [
+    breadcrumb && breadcrumb.length > 0 ? /* @__PURE__ */ jsx7(Breadcrumbs, { size: "sm", sx: { mb: 1, p: 0 }, children: breadcrumb.map(
+      (item, i) => item.to ? /* @__PURE__ */ jsx7(Link, { to: item.to, style: { textDecoration: "none", color: "inherit" }, children: item.label }, i) : /* @__PURE__ */ jsx7(Typography3, { fontSize: "sm", children: item.label }, i)
+    ) }) : null,
+    title || actions ? /* @__PURE__ */ jsxs4(Stack4, { direction: "row", justifyContent: "space-between", alignItems: "center", sx: { mb: 2 }, children: [
+      title ? /* @__PURE__ */ jsx7(Typography3, { level: "h2", children: title }) : null,
+      actions ? /* @__PURE__ */ jsx7(Fragment, { children: actions }) : null
+    ] }) : null,
+    children
+  ] });
+}
+
+// src/app-shell.tsx
+import "react";
+import Sheet from "@mui/joy/Sheet";
+import List from "@mui/joy/List";
+import ListItem from "@mui/joy/ListItem";
+import ListItemButton from "@mui/joy/ListItemButton";
+import { Link as Link2 } from "react-router";
+import { useActionStatus as useActionStatus2 } from "@cfast/ui";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+var AnyListItemButton = ListItemButton;
+var AnySheet = Sheet;
+function AppShell({
+  children,
+  sidebar,
+  header
+}) {
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", minHeight: "100vh" }, children: [
+    sidebar ?? null,
+    /* @__PURE__ */ jsxs5("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+      header ?? null,
+      /* @__PURE__ */ jsx8("main", { style: { flex: 1 }, children })
+    ] })
+  ] });
+}
+function AppShellSidebar({ items }) {
+  return /* @__PURE__ */ jsx8(
+    Sheet,
+    {
+      sx: {
+        width: 240,
+        borderRight: "1px solid",
+        borderColor: "divider",
+        p: 2
+      },
+      children: /* @__PURE__ */ jsx8(List, { size: "sm", children: items.map((item) => /* @__PURE__ */ jsx8(SidebarItem, { item }, item.to)) })
+    }
+  );
+}
+function SidebarItem({ item }) {
+  if (item.action) {
+    return /* @__PURE__ */ jsx8(PermissionFilteredItem, { item });
+  }
+  return /* @__PURE__ */ jsx8(ListItem, { children: /* @__PURE__ */ jsx8(AnyListItemButton, { component: Link2, to: item.to, children: item.label }) });
+}
+function PermissionFilteredItem({ item }) {
+  const status = useActionStatus2(item.action);
+  if (status.invisible || !status.permitted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx8(ListItem, { children: /* @__PURE__ */ jsx8(AnyListItemButton, { component: Link2, to: item.to, children: item.label }) });
+}
+function AppShellHeader({
+  children,
+  userMenu
+}) {
+  return /* @__PURE__ */ jsxs5(
+    AnySheet,
+    {
+      component: "header",
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        px: 3,
+        py: 1.5,
+        borderBottom: "1px solid",
+        borderColor: "divider"
+      },
+      children: [
+        children ?? /* @__PURE__ */ jsx8(Fragment2, {}),
+        userMenu ?? null
+      ]
+    }
+  );
+}
+AppShell.Sidebar = AppShellSidebar;
+AppShell.Header = AppShellHeader;
+
+// src/user-menu.tsx
+import "react";
+import Avatar from "@mui/joy/Avatar";
+import Dropdown from "@mui/joy/Dropdown";
+import Menu from "@mui/joy/Menu";
+import MenuItem from "@mui/joy/MenuItem";
+import MenuButton from "@mui/joy/MenuButton";
+import IconButton from "@mui/joy/IconButton";
+import { Link as Link3 } from "react-router";
+import { useCurrentUser } from "@cfast/auth/client";
+import { getInitials, useActionStatus as useActionStatus3 } from "@cfast/ui";
+
+// src/role-badge.tsx
+import "react";
+import Chip from "@mui/joy/Chip";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var VALID_COLORS = /* @__PURE__ */ new Set(["primary", "neutral", "danger", "success", "warning"]);
+var defaultColors = {
+  admin: "danger",
+  editor: "primary",
+  author: "success",
+  reader: "neutral"
+};
+function isColorPaletteProp(value) {
+  return VALID_COLORS.has(value);
+}
+function RoleBadge({ role, colors }) {
+  const rawColor = colors?.[role] ?? defaultColors[role] ?? "neutral";
+  const chipColor = isColorPaletteProp(rawColor) ? rawColor : "neutral";
+  return /* @__PURE__ */ jsx9(Chip, { size: "sm", variant: "soft", color: chipColor, children: role });
+}
+
+// src/user-menu.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+var AnyMenuItem = MenuItem;
+function UserMenu({
+  links = [],
+  onSignOut
+}) {
+  const user = useCurrentUser();
+  if (!user) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs6(Dropdown, { children: [
+    /* @__PURE__ */ jsx10(MenuButton, { slots: { root: IconButton }, slotProps: { root: { variant: "plain", size: "sm" } }, children: /* @__PURE__ */ jsx10(Avatar, { src: user.avatarUrl ?? void 0, size: "sm", children: getInitials(user.name) }) }),
+    /* @__PURE__ */ jsxs6(Menu, { placement: "bottom-end", size: "sm", children: [
+      /* @__PURE__ */ jsx10(MenuItem, { disabled: true, children: /* @__PURE__ */ jsxs6("div", { children: [
+        /* @__PURE__ */ jsx10("strong", { children: user.name }),
+        /* @__PURE__ */ jsx10("br", {}),
+        /* @__PURE__ */ jsx10("small", { children: user.email })
+      ] }) }),
+      user.roles.length > 0 ? /* @__PURE__ */ jsx10(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx10("div", { style: { display: "flex", gap: "4px" }, children: user.roles.map((role) => /* @__PURE__ */ jsx10(RoleBadge, { role }, role)) }) }) : null,
+      links.map(
+        (link) => link.action ? /* @__PURE__ */ jsx10(PermissionFilteredLink, { link }, link.to) : /* @__PURE__ */ jsx10(AnyMenuItem, { component: Link3, to: link.to, children: link.label }, link.to)
+      ),
+      onSignOut ? /* @__PURE__ */ jsx10(MenuItem, { onClick: onSignOut, children: "Sign out" }) : null
+    ] })
+  ] });
+}
+function PermissionFilteredLink({ link }) {
+  const status = useActionStatus3(link.action);
+  if (status.invisible || !status.permitted) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx10(AnyMenuItem, { component: Link3, to: link.to, children: link.label });
+}
+
+// src/data-table.tsx
+import { useState, useCallback as useCallback2 } from "react";
+import JoyTable from "@mui/joy/Table";
+import JoySheet from "@mui/joy/Sheet";
+import JoyCheckbox from "@mui/joy/Checkbox";
+import { getField, getRecordId } from "@cfast/ui";
+import { jsx as jsx11, jsxs as jsxs7 } 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 columns = normalizeColumns(columnsProp);
+  const [sortKey, setSortKey] = useState(null);
+  const [sortDir, setSortDir] = useState("asc");
+  const [internalSelected, setInternalSelected] = useState(/* @__PURE__ */ new Set());
+  const getId = getRowId ?? defaultGetId;
+  const selectedSet = externalSelectedRows ? new Set(externalSelectedRows.map((r) => getId(r))) : internalSelected;
+  const handleSort = useCallback2((key) => {
+    if (sortKey === key) {
+      setSortDir((d) => d === "asc" ? "desc" : "asc");
+    } else {
+      setSortKey(key);
+      setSortDir("asc");
+    }
+  }, [sortKey]);
+  const toggleRow = useCallback2((id) => {
+    if (onSelectionChange) {
+      const row = data.items.find((r) => getId(r) === id);
+      if (!row) return;
+      const current = externalSelectedRows ?? [];
+      const isSelected = current.some((r) => getId(r) === id);
+      onSelectionChange(isSelected ? current.filter((r) => getId(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, getId]);
+  if (data.items.length === 0 && !data.isLoading) {
+    return /* @__PURE__ */ jsx11("div", { style: { textAlign: "center", padding: "32px", color: "#666" }, children: emptyMessage });
+  }
+  return /* @__PURE__ */ jsx11(JoySheet, { variant: "outlined", sx: { borderRadius: "sm", overflow: "auto" }, children: /* @__PURE__ */ jsxs7(JoyTable, { hoverRow: true, sx: { "& th": { fontWeight: "lg" } }, children: [
+    /* @__PURE__ */ jsx11("thead", { children: /* @__PURE__ */ jsxs7("tr", { children: [
+      selectable ? /* @__PURE__ */ jsx11("th", { style: { width: 40 } }) : null,
+      columns.map((col) => /* @__PURE__ */ jsx11("th", { children: col.sortable !== false ? /* @__PURE__ */ jsxs7(
+        "button",
+        {
+          onClick: () => handleSort(col.key),
+          style: {
+            background: "none",
+            border: "none",
+            cursor: "pointer",
+            fontWeight: "bold",
+            font: "inherit",
+            padding: 0,
+            color: "inherit"
+          },
+          children: [
+            col.label ?? col.key,
+            sortKey === col.key ? sortDir === "asc" ? " \u2191" : " \u2193" : null
+          ]
+        }
+      ) : col.label ?? col.key }, col.key))
+    ] }) }),
+    /* @__PURE__ */ jsx11("tbody", { children: data.items.map((row) => {
+      const id = getId(row);
+      const isSelected = selectedSet.has(id);
+      return /* @__PURE__ */ jsxs7(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          style: onRowClick ? { cursor: "pointer" } : void 0,
+          children: [
+            selectable ? /* @__PURE__ */ jsx11("td", { children: /* @__PURE__ */ jsx11(
+              JoyCheckbox,
+              {
+                checked: isSelected,
+                onChange: () => toggleRow(id),
+                size: "sm"
+              }
+            ) }) : null,
+            columns.map((col) => {
+              const value = getField(row, col.key);
+              return /* @__PURE__ */ jsx11("td", { children: col.render ? col.render(value, row) : String(value ?? "") }, col.key);
+            })
+          ]
+        },
+        String(id)
+      );
+    }) })
+  ] }) });
+}
+function defaultGetId(row) {
+  return getRecordId(row);
+}
+
+// src/filter-bar.tsx
+import { useCallback as useCallback3 } from "react";
+import { useSearchParams, useNavigate, useLocation } from "react-router";
+import JoyInput from "@mui/joy/Input";
+import JoySelect from "@mui/joy/Select";
+import JoyOption from "@mui/joy/Option";
+import JoyStack from "@mui/joy/Stack";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+function FilterBar({
+  filters,
+  searchable
+}) {
+  const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const updateParam = useCallback3(
+    (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__ */ jsxs8(JoyStack, { direction: "row", spacing: 1, flexWrap: "wrap", alignItems: "center", sx: { mb: 2 }, children: [
+    searchable && searchable.length > 0 ? /* @__PURE__ */ jsx12(
+      JoyInput,
+      {
+        type: "search",
+        placeholder: `Search ${searchable.join(", ")}...`,
+        value: searchParams.get("q") ?? "",
+        onChange: (e) => updateParam("q", e.target.value || null),
+        size: "sm",
+        sx: { minWidth: 200 }
+      }
+    ) : null,
+    filters.map((filter) => /* @__PURE__ */ jsx12(
+      JoyFilterInput,
+      {
+        filter,
+        value: searchParams.get(filter.column) ?? "",
+        onChange: (value) => updateParam(filter.column, value || null)
+      },
+      filter.column
+    ))
+  ] });
+}
+function JoyFilterInput({
+  filter,
+  value,
+  onChange
+}) {
+  const label = filter.label ?? filter.column;
+  switch (filter.type) {
+    case "select":
+    case "boolean":
+      return /* @__PURE__ */ jsx12(
+        JoySelect,
+        {
+          value: value || null,
+          onChange: (_e, newValue) => onChange(newValue ? String(newValue) : ""),
+          placeholder: `All ${label}`,
+          size: "sm",
+          sx: { minWidth: 140 },
+          slotProps: { button: { "aria-label": label } },
+          children: (filter.options ?? []).map((opt) => /* @__PURE__ */ jsx12(JoyOption, { value: String(opt.value), children: opt.label }, String(opt.value)))
+        }
+      );
+    case "text":
+    default:
+      return /* @__PURE__ */ jsx12(
+        JoyInput,
+        {
+          placeholder: filter.placeholder ?? label,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          size: "sm",
+          slotProps: { input: { "aria-label": label } }
+        }
+      );
+  }
+}
+
+// src/bulk-action-bar.tsx
+import "react";
+import JoySheet2 from "@mui/joy/Sheet";
+import JoyStack2 from "@mui/joy/Stack";
+import JoyButton2 from "@mui/joy/Button";
+import JoyTypography from "@mui/joy/Typography";
+import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+function BulkActionBar({
+  selectedCount,
+  actions,
+  onAction,
+  onClearSelection
+}) {
+  if (selectedCount === 0) return null;
+  return /* @__PURE__ */ jsxs9(
+    JoySheet2,
+    {
+      variant: "soft",
+      color: "primary",
+      sx: {
+        p: 1,
+        px: 2,
+        borderRadius: "sm",
+        mb: 1,
+        display: "flex",
+        alignItems: "center",
+        gap: 1
+      },
+      children: [
+        /* @__PURE__ */ jsx13(JoyTypography, { level: "body-sm", fontWeight: "lg", children: `${selectedCount} selected` }),
+        /* @__PURE__ */ jsxs9(JoyStack2, { direction: "row", spacing: 1, sx: { ml: "auto" }, children: [
+          actions.map((action) => {
+            const Icon = action.icon;
+            return /* @__PURE__ */ jsx13(
+              JoyButton2,
+              {
+                size: "sm",
+                variant: "soft",
+                onClick: () => onAction(action),
+                startDecorator: Icon ? /* @__PURE__ */ jsx13(Icon, { className: "bulk-action-icon" }) : void 0,
+                children: action.label
+              },
+              action.label
+            );
+          }),
+          /* @__PURE__ */ jsx13(
+            JoyButton2,
+            {
+              size: "sm",
+              variant: "plain",
+              color: "neutral",
+              onClick: onClearSelection,
+              children: "Clear selection"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/drop-zone.tsx
+import { useState as useState2, useCallback as useCallback4, useRef } from "react";
+import JoySheet3 from "@mui/joy/Sheet";
+import JoyTypography2 from "@mui/joy/Typography";
+import JoyLinearProgress from "@mui/joy/LinearProgress";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function DropZone({
+  upload,
+  multiple = false,
+  children
+}) {
+  const [isDragOver, setIsDragOver] = useState2(false);
+  const inputRef = useRef(null);
+  const handleFiles = useCallback4(
+    (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 = useCallback4(
+    (e) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      handleFiles(e.dataTransfer.files);
+    },
+    [handleFiles]
+  );
+  const handleDragOver = useCallback4((e) => {
+    e.preventDefault();
+    setIsDragOver(true);
+  }, []);
+  const handleDragLeave = useCallback4(() => {
+    setIsDragOver(false);
+  }, []);
+  const handleClick = useCallback4(() => {
+    inputRef.current?.click();
+  }, []);
+  const hasError = !!(upload.error || upload.validationError);
+  return /* @__PURE__ */ jsxs10("div", { children: [
+    /* @__PURE__ */ jsx14(
+      JoySheet3,
+      {
+        variant: "outlined",
+        sx: {
+          borderStyle: "dashed",
+          borderWidth: 2,
+          borderColor: hasError ? "danger.400" : isDragOver ? "primary.400" : "neutral.outlinedBorder",
+          borderRadius: "md",
+          p: 4,
+          textAlign: "center",
+          cursor: "pointer",
+          transition: "border-color 0.2s",
+          "&:hover": { borderColor: "primary.300" }
+        },
+        onClick: handleClick,
+        onDrop: handleDrop,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        children: children ?? /* @__PURE__ */ jsx14("div", { children: upload.isUploading ? /* @__PURE__ */ jsxs10("div", { children: [
+          /* @__PURE__ */ jsx14(JoyTypography2, { level: "body-sm", children: `Uploading... ${upload.progress}%` }),
+          /* @__PURE__ */ jsx14(
+            JoyLinearProgress,
+            {
+              determinate: true,
+              value: upload.progress,
+              sx: { mt: 1 }
+            }
+          )
+        ] }) : hasError ? /* @__PURE__ */ jsx14(JoyTypography2, { color: "danger", level: "body-sm", children: upload.error ?? upload.validationError }) : /* @__PURE__ */ jsx14(JoyTypography2, { level: "body-sm", color: "neutral", children: "Drop files here or click to browse" }) })
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept: upload.accept,
+        multiple,
+        style: { display: "none" },
+        onChange: (e) => handleFiles(e.target.files)
+      }
+    )
+  ] });
+}
+
+// src/image-preview.tsx
+import "react";
+import JoyAspectRatio from "@mui/joy/AspectRatio";
+import JoyTypography3 from "@mui/joy/Typography";
+import { jsx as jsx15 } 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__ */ jsx15("div", { children: fallback }) : /* @__PURE__ */ jsx15(
+      JoyAspectRatio,
+      {
+        ratio: width / height,
+        sx: { width, borderRadius: "sm", bgcolor: "neutral.softBg" },
+        children: /* @__PURE__ */ jsx15(JoyTypography3, { level: "body-sm", color: "neutral", children: "No image" })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx15(
+    JoyAspectRatio,
+    {
+      ratio: width / height,
+      sx: { width, borderRadius: "sm", overflow: "hidden" },
+      children: /* @__PURE__ */ jsx15(
+        "img",
+        {
+          src: resolvedSrc,
+          alt,
+          style: { objectFit: "cover", width: "100%", height: "100%" }
+        }
+      )
+    }
+  );
+}
+
+// src/file-list.tsx
+import "react";
+import JoyList from "@mui/joy/List";
+import JoyListItem from "@mui/joy/ListItem";
+import JoyListItemContent from "@mui/joy/ListItemContent";
+import JoyTypography4 from "@mui/joy/Typography";
+import JoyButton3 from "@mui/joy/Button";
+import { jsx as jsx16, jsxs as jsxs11 } 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__ */ jsx16(JoyTypography4, { level: "body-sm", color: "neutral", children: "No files" });
+  }
+  return /* @__PURE__ */ jsx16(JoyList, { size: "sm", children: files.map((file) => /* @__PURE__ */ jsxs11(JoyListItem, { children: [
+    /* @__PURE__ */ jsxs11(JoyListItemContent, { children: [
+      /* @__PURE__ */ jsx16(JoyTypography4, { level: "body-sm", children: file.name }),
+      file.size != null ? /* @__PURE__ */ jsx16(JoyTypography4, { level: "body-xs", color: "neutral", children: formatBytes(file.size) }) : null
+    ] }),
+    onDownload || file.url ? /* @__PURE__ */ jsx16(
+      JoyButton3,
+      {
+        size: "sm",
+        variant: "plain",
+        onClick: onDownload ? () => onDownload(file) : void 0,
+        children: "\u2193"
+      }
+    ) : null
+  ] }, file.key)) });
+}
+
+// src/list-view.tsx
+import { useState as useState3, useCallback as useCallback5 } from "react";
+import JoyButton4 from "@mui/joy/Button";
+import JoyStack3 from "@mui/joy/Stack";
+import JoyTypography5 from "@mui/joy/Typography";
+import { useActionStatus as useActionStatus4 } from "@cfast/ui";
+import { jsx as jsx17, 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] = useState3([]);
+  const handleBulkAction = useCallback5(
+    (action) => {
+      if (action.handler) {
+        action.handler(selectedRows);
+      }
+    },
+    [selectedRows]
+  );
+  const clearSelection = useCallback5(() => {
+    setSelectedRows([]);
+  }, []);
+  const createButton = createAction ? /* @__PURE__ */ jsx17(CreateButton, { action: createAction, label: createLabel }) : null;
+  return /* @__PURE__ */ jsx17(PageContainer, { title, breadcrumb, actions: createButton, children: /* @__PURE__ */ jsxs12(JoyStack3, { spacing: 2, children: [
+    filters && filters.length > 0 ? /* @__PURE__ */ jsx17(FilterBar, { filters, searchable }) : null,
+    selectable && bulkActions && bulkActions.length > 0 ? /* @__PURE__ */ jsx17(
+      BulkActionBar,
+      {
+        selectedCount: selectedRows.length,
+        actions: bulkActions,
+        onAction: handleBulkAction,
+        onClearSelection: clearSelection
+      }
+    ) : null,
+    data.items.length === 0 && !data.isLoading ? /* @__PURE__ */ jsx17(
+      EmptyState,
+      {
+        title: `No ${title.toLowerCase()} found`,
+        description: filters ? "Try adjusting your filters" : void 0,
+        createAction,
+        createLabel
+      }
+    ) : /* @__PURE__ */ jsx17(
+      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(JoyStack3, { direction: "row", justifyContent: "center", alignItems: "center", spacing: 2, children: [
+      /* @__PURE__ */ jsx17(
+        JoyButton4,
+        {
+          size: "sm",
+          variant: "outlined",
+          disabled: data.currentPage === 1,
+          onClick: () => data.goToPage?.(Math.max(1, (data.currentPage ?? 1) - 1)),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsx17(JoyTypography5, { level: "body-sm", children: `Page ${data.currentPage ?? 1} of ${data.totalPages}` }),
+      /* @__PURE__ */ jsx17(
+        JoyButton4,
+        {
+          size: "sm",
+          variant: "outlined",
+          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__ */ jsx17(JoyStack3, { alignItems: "center", children: /* @__PURE__ */ jsx17(JoyButton4, { variant: "soft", onClick: data.loadMore, children: "Load more" }) }) : null
+  ] }) });
+}
+function CreateButton({ action, label }) {
+  const status = useActionStatus4(action);
+  return /* @__PURE__ */ jsx17(ActionButton, { action: status, variant: "solid", color: "primary", children: label });
+}
+
+// src/detail-view.tsx
+import JoyGrid from "@mui/joy/Grid";
+import JoyTypography6 from "@mui/joy/Typography";
+import { fieldForColumn, getField as getField2 } from "@cfast/ui";
+import { jsx as jsx18, 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__ */ jsx18(PageContainer, { title, breadcrumb, children: /* @__PURE__ */ jsx18(JoyGrid, { container: true, spacing: 2, children: displayFields.map((field) => {
+    const value = getField2(record, field.key);
+    const FieldComponent = field.render ? null : resolveFieldComponent(field.key, table);
+    return /* @__PURE__ */ jsxs13(JoyGrid, { xs: 12, md: 6, children: [
+      /* @__PURE__ */ jsx18(
+        JoyTypography6,
+        {
+          level: "body-xs",
+          textTransform: "uppercase",
+          fontWeight: "lg",
+          mb: 0.5,
+          children: field.label ?? field.key
+        }
+      ),
+      /* @__PURE__ */ jsx18("div", { children: field.render ? field.render(value, record) : FieldComponent ? /* @__PURE__ */ jsx18(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 = getField2(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 });
+}
+
+// src/avatar-with-initials.tsx
+import "react";
+import Avatar2 from "@mui/joy/Avatar";
+import { getInitials as getInitials2 } from "@cfast/ui";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function AvatarWithInitials({
+  src,
+  name,
+  size = "md"
+}) {
+  return /* @__PURE__ */ jsx19(Avatar2, { src: src ?? void 0, alt: name, size, children: getInitials2(name) });
+}
+
+// src/impersonation-banner.tsx
+import "react";
+import Sheet2 from "@mui/joy/Sheet";
+import Typography4 from "@mui/joy/Typography";
+import Button3 from "@mui/joy/Button";
+import Stack5 from "@mui/joy/Stack";
+import { useCurrentUser as useCurrentUser2 } from "@cfast/auth/client";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function ImpersonationBanner({
+  stopAction = "/admin/stop-impersonation"
+}) {
+  const user = useCurrentUser2();
+  if (!user?.isImpersonating) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx20(
+    Sheet2,
+    {
+      color: "warning",
+      variant: "solid",
+      sx: {
+        position: "sticky",
+        top: 0,
+        zIndex: 1100,
+        py: 1,
+        px: 3
+      },
+      children: /* @__PURE__ */ jsxs14(Stack5, { direction: "row", spacing: 2, alignItems: "center", justifyContent: "center", children: [
+        /* @__PURE__ */ jsx20(Typography4, { level: "body-sm", sx: { fontWeight: "bold" }, children: `Viewing as ${user.name} (${user.email})` }),
+        /* @__PURE__ */ jsx20("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx20(Button3, { size: "sm", variant: "outlined", color: "warning", type: "submit", children: "Stop Impersonating" }) })
+      ] })
+    }
+  );
+}
+
+// src/index.ts
+import { PermissionGate } from "@cfast/ui";
+
+// src/login-components.tsx
+import Box from "@mui/joy/Box";
+import Card from "@mui/joy/Card";
+import Input from "@mui/joy/Input";
+import Button4 from "@mui/joy/Button";
+import Alert2 from "@mui/joy/Alert";
+import Divider from "@mui/joy/Divider";
+import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function Layout({ children }) {
+  return /* @__PURE__ */ jsx21(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        minHeight: "100vh",
+        bgcolor: "background.surface"
+      },
+      children: /* @__PURE__ */ jsx21(Card, { variant: "outlined", sx: { maxWidth: 400, width: "100%", p: 4 }, children })
+    }
+  );
+}
+function EmailInput({
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx21(
+    Input,
+    {
+      type: "email",
+      placeholder: "you@example.com",
+      value,
+      onChange: (e) => onChange(e.target.value),
+      required: true,
+      size: "lg"
+    }
+  );
+}
+function MagicLinkButton({
+  onClick,
+  loading
+}) {
+  return /* @__PURE__ */ jsx21(
+    Button4,
+    {
+      onClick,
+      loading,
+      size: "lg",
+      fullWidth: true,
+      children: "Send Magic Link"
+    }
+  );
+}
+function PasskeyButton({
+  onClick,
+  loading
+}) {
+  return /* @__PURE__ */ jsxs15(Fragment3, { children: [
+    /* @__PURE__ */ jsx21(Divider, { children: "or" }),
+    /* @__PURE__ */ jsx21(
+      Button4,
+      {
+        variant: "outlined",
+        color: "neutral",
+        onClick,
+        loading,
+        size: "lg",
+        fullWidth: true,
+        children: "Sign in with Passkey"
+      }
+    )
+  ] });
+}
+function SuccessMessage({ email }) {
+  return /* @__PURE__ */ jsxs15(Alert2, { color: "success", children: [
+    "Check your email (",
+    email,
+    ") for a magic link. Click the link to sign in."
+  ] });
+}
+function ErrorMessage({ error }) {
+  return /* @__PURE__ */ jsx21(Alert2, { color: "danger", sx: { mb: 2 }, children: error });
+}
+var joyLoginComponents = {
+  Layout,
+  EmailInput,
+  MagicLinkButton,
+  PasskeyButton,
+  SuccessMessage,
+  ErrorMessage
+};
+export {
+  ActionButton,
+  AppShell,
+  AppShellHeader,
+  AppShellSidebar,
+  AvatarWithInitials,
+  BulkActionBar,
+  ConfirmDialog,
+  DataTable,
+  DetailView,
+  DropZone,
+  EmptyState,
+  FileList,
+  FilterBar,
+  FormStatus,
+  ImagePreview,
+  ImpersonationBanner,
+  ListView,
+  NavigationProgress,
+  PageContainer,
+  PermissionGate,
+  RoleBadge,
+  ToastProvider,
+  UserMenu,
+  joyLoginComponents
+};