@cfast/ui 0.0.1

package/dist/chunk-ASMYTWTR.js

@@ -0,0 +1,356 @@
+import {
+  useToast
+} from "./chunk-UTZTHGNE.js";
+
+// 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 component = plugin?.components[slot];
+  if (component) {
+    return component;
+  }
+  return headlessDefaults[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-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 useCallback2, 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 = 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__ */ 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/role-badge.tsx
+import { jsx as jsx7 } 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__ */ jsx7(Chip, { color: chipColor, variant: "soft", size: "sm", children: role });
+}
+
+// src/components/impersonation-banner.tsx
+import { useCurrentUser } from "@cfast/auth/client";
+import { jsx as jsx8, 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__ */ jsx8(Alert, { color: "warning", children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "12px"
+      },
+      children: [
+        /* @__PURE__ */ jsx8("strong", { children: `Viewing as ${user.name} (${user.email})` }),
+        /* @__PURE__ */ jsx8("form", { method: "post", action: stopAction, children: /* @__PURE__ */ jsx8(Button, { type: "submit", variant: "outlined", size: "sm", children: "Stop Impersonating" }) })
+      ]
+    }
+  ) });
+}
+
+export {
+  createUIPlugin,
+  UIPluginProvider,
+  useUIPlugin,
+  useComponent,
+  useConfirm,
+  useActionToast,
+  PermissionGate,
+  ActionButton,
+  ConfirmProvider,
+  FormStatus,
+  RoleBadge,
+  ImpersonationBanner
+};

package/dist/chunk-B2XXH5V4.js

@@ -0,0 +1,66 @@
+// src/hooks/use-action-status.ts
+import { useActions } from "@cfast/actions/client";
+function useActionStatus(descriptor, actionName, input) {
+  const actions = useActions(descriptor);
+  const name = actionName ?? descriptor.actionNames[0];
+  const actionFn = actions[name];
+  if (!actionFn) {
+    return {
+      permitted: false,
+      invisible: true,
+      reason: `Action "${name}" not found in descriptor`,
+      submit: () => {
+      },
+      pending: false,
+      data: void 0,
+      error: void 0
+    };
+  }
+  const result = actionFn(input);
+  return {
+    permitted: result.permitted,
+    invisible: result.invisible,
+    reason: result.reason,
+    submit: result.submit,
+    pending: result.pending,
+    data: result.data,
+    error: result.error
+  };
+}
+
+// src/hooks/use-toast.ts
+import { createContext, useContext, useCallback } from "react";
+var ToastContext = createContext(null);
+function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a <ToastProvider>");
+  }
+  const show = useCallback(
+    (options) => ctx.show(options),
+    [ctx]
+  );
+  const success = useCallback(
+    (message, description) => ctx.show({ message, type: "success", description }),
+    [ctx]
+  );
+  const error = useCallback(
+    (message, description) => ctx.show({ message, type: "error", description }),
+    [ctx]
+  );
+  const info = useCallback(
+    (message, description) => ctx.show({ message, type: "info", description }),
+    [ctx]
+  );
+  const warning = useCallback(
+    (message, description) => ctx.show({ message, type: "warning", description }),
+    [ctx]
+  );
+  return { show, success, error, info, warning };
+}
+
+export {
+  useActionStatus,
+  ToastContext,
+  useToast
+};