@manyrows/appkit-react 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useId, useMemo, useRef, useState, useEffect } from 'react';
+import React, { createContext, useContext, useId, useMemo, useRef, useState, useEffect, useCallback } from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
 // src/AppKit.tsx
@@ -108,58 +108,6 @@ function AppKitAuthed(props) {
 function mkErr(code, message, details) {
   return { code, message, details };
 }
-function DefaultSkeleton() {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      "aria-busy": "true",
-      "aria-live": "polite",
-      style: {
-        width: "100%",
-        borderRadius: 10,
-        border: "1px solid rgba(0,0,0,0.08)",
-        padding: 12
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              height: 12,
-              width: 140,
-              borderRadius: 6,
-              background: "rgba(0,0,0,0.06)",
-              marginBottom: 10
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              height: 10,
-              width: "65%",
-              borderRadius: 6,
-              background: "rgba(0,0,0,0.06)",
-              marginBottom: 8
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              height: 10,
-              width: "40%",
-              borderRadius: 6,
-              background: "rgba(0,0,0,0.06)"
-            }
-          }
-        )
-      ]
-    }
-  );
-}
 function DefaultError({ err }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -329,6 +277,7 @@ function AppKit(props) {
           workspace: props.workspace.trim(),
           appId: props.appId.trim(),
           baseURL: props.baseURL,
+          theme: props.theme,
           silent: props.silent,
           throwOnError: props.throwOnError,
           // ✅ If host provides children, hide runtime default authed UI.
@@ -419,13 +368,445 @@ function AppKit(props) {
     };
   }, [status, lastError, readyInfo, snapshot]);
   return /* @__PURE__ */ jsx(Ctx.Provider, { value: ctx, children: /* @__PURE__ */ jsxs("div", { className: props.className, style: props.style, children: [
-    showLoading ? props.loading ?? /* @__PURE__ */ jsx(DefaultSkeleton, {}) : null,
+    showLoading && props.loading ? props.loading : null,
     showError && lastError ? props.errorUI ? props.errorUI(lastError) : /* @__PURE__ */ jsx(DefaultError, { err: lastError }) : null,
     props.children,
     /* @__PURE__ */ jsx("div", { id: containerId })
   ] }) });
 }
+function Toast({ toast, onClose }) {
+  useEffect(() => {
+    if (toast) {
+      const timer = setTimeout(onClose, 4e3);
+      return () => clearTimeout(timer);
+    }
+  }, [toast, onClose]);
+  if (!toast) return null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        bottom: 24,
+        left: "50%",
+        transform: "translateX(-50%)",
+        padding: "12px 20px",
+        borderRadius: 8,
+        backgroundColor: toast.type === "success" ? "#2e7d32" : "#d32f2f",
+        color: "#fff",
+        fontSize: 14,
+        fontWeight: 500,
+        boxShadow: "0 4px 12px rgba(0,0,0,0.2)",
+        zIndex: 1e4,
+        display: "flex",
+        alignItems: "center",
+        gap: 12
+      },
+      children: [
+        toast.message,
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onClose,
+            style: {
+              background: "none",
+              border: "none",
+              color: "#fff",
+              cursor: "pointer",
+              fontSize: 18,
+              lineHeight: 1,
+              padding: 0,
+              opacity: 0.8
+            },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+}
+function getInitials(name, email) {
+  if (name) {
+    const parts = name.trim().split(/\s+/);
+    if (parts.length >= 2) {
+      return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+    }
+    return name.slice(0, 2).toUpperCase();
+  }
+  if (email) {
+    return email.slice(0, 2).toUpperCase();
+  }
+  return "?";
+}
+function stringToColor(str) {
+  let hash = 0;
+  for (let i = 0; i < str.length; i++) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  const colors = [
+    "#1976d2",
+    "#388e3c",
+    "#d32f2f",
+    "#7b1fa2",
+    "#c2185b",
+    "#0288d1",
+    "#00796b",
+    "#f57c00"
+  ];
+  return colors[Math.abs(hash) % colors.length];
+}
+function UserButton({ size = "medium" }) {
+  const { snapshot, logout, refresh, readyInfo } = useAppKit();
+  const [open, setOpen] = useState(false);
+  const [loggingOut, setLoggingOut] = useState(false);
+  const account = snapshot?.appData?.account;
+  const initials = getInitials(account?.name, account?.email);
+  const avatarColor = stringToColor(account?.email || "user");
+  const sizeMap = { small: 32, medium: 40, large: 48 };
+  const fontSizeMap = { small: 14, medium: 16, large: 20 };
+  const avatarSize = sizeMap[size];
+  const handleLogout = async () => {
+    setLoggingOut(true);
+    try {
+      await logout();
+    } finally {
+      setLoggingOut(false);
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setOpen(true),
+        "aria-label": "Open profile",
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: avatarSize,
+          height: avatarSize,
+          borderRadius: "50%",
+          backgroundColor: avatarColor,
+          color: "#fff",
+          border: "none",
+          cursor: "pointer",
+          fontSize: fontSizeMap[size],
+          fontWeight: 600,
+          fontFamily: "inherit",
+          padding: 0
+        },
+        children: initials
+      }
+    ),
+    open && /* @__PURE__ */ jsx(
+      ProfileModal,
+      {
+        account,
+        onClose: () => setOpen(false),
+        onLogout: handleLogout,
+        loggingOut,
+        avatarColor,
+        initials,
+        baseURL: readyInfo?.baseURL,
+        jwtToken: snapshot?.jwtToken,
+        onNameUpdated: refresh
+      }
+    )
+  ] });
+}
+function ProfileModal({
+  account,
+  onClose,
+  onLogout,
+  loggingOut,
+  avatarColor,
+  initials,
+  baseURL,
+  jwtToken,
+  onNameUpdated
+}) {
+  const [editing, setEditing] = useState(false);
+  const [editName, setEditName] = useState(account?.name || "");
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [toast, setToast] = useState(null);
+  const clearToast = useCallback(() => setToast(null), []);
+  useEffect(() => {
+    setEditName(account?.name || "");
+    setEditing(false);
+    setError(null);
+  }, [account?.name]);
+  const handleSave = async () => {
+    const trimmed = editName.trim();
+    if (!trimmed) {
+      setError("Display name is required");
+      return;
+    }
+    if (trimmed.length > 200) {
+      setError("Display name is too long");
+      return;
+    }
+    if (trimmed === account?.name) {
+      setEditing(false);
+      return;
+    }
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch(`${baseURL}/a/profile/display-name`, {
+        method: "POST",
+        headers: {
+          Authorization: `Bearer ${jwtToken}`,
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({ displayName: trimmed })
+      });
+      if (!res.ok) {
+        const text = await res.text();
+        throw new Error(text || "Failed to update name");
+      }
+      setEditing(false);
+      onNameUpdated();
+      setToast({ message: "Display name updated", type: "success" });
+    } catch (err) {
+      const msg = err.message || "Failed to update name";
+      setError(msg);
+      setToast({ message: msg, type: "error" });
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      handleSave();
+    } else if (e.key === "Escape") {
+      setEditing(false);
+      setEditName(account?.name || "");
+      setError(null);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        inset: 0,
+        zIndex: 9999,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: onClose,
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "relative",
+              backgroundColor: "#fff",
+              borderRadius: 12,
+              boxShadow: "0 8px 32px rgba(0,0,0,0.2)",
+              width: "100%",
+              maxWidth: 360,
+              margin: 16,
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    padding: "16px 20px",
+                    borderBottom: "1px solid #eee"
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx("h2", { style: { margin: 0, fontSize: 18, fontWeight: 600 }, children: "Profile" }),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: onClose,
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: 4,
+                          fontSize: 20,
+                          lineHeight: 1,
+                          color: "#666"
+                        },
+                        children: "\xD7"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs("div", { style: { padding: 20 }, children: [
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, marginBottom: 20 }, children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        width: 64,
+                        height: 64,
+                        borderRadius: "50%",
+                        backgroundColor: avatarColor,
+                        color: "#fff",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 24,
+                        fontWeight: 600,
+                        flexShrink: 0
+                      },
+                      children: initials
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 18, fontWeight: 600, marginBottom: 2 }, children: account?.name || "User" }),
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        style: {
+                          fontSize: 14,
+                          color: "#666",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap"
+                        },
+                        children: account?.email
+                      }
+                    )
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid #eee", margin: "16px 0" } }),
+                error && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: "10px 14px",
+                      marginBottom: 16,
+                      backgroundColor: "#ffebee",
+                      color: "#c62828",
+                      borderRadius: 6,
+                      fontSize: 14
+                    },
+                    children: error
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { style: { marginBottom: 16 }, children: [
+                  /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 4 }, children: [
+                    /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#888", fontWeight: 600 }, children: "Display Name" }),
+                    !editing && /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: () => setEditing(true),
+                        style: {
+                          background: "none",
+                          border: "none",
+                          cursor: "pointer",
+                          padding: 2,
+                          fontSize: 12,
+                          color: "#1976d2"
+                        },
+                        children: "Edit"
+                      }
+                    )
+                  ] }),
+                  editing ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        type: "text",
+                        value: editName,
+                        onChange: (e) => setEditName(e.target.value),
+                        onKeyDown: handleKeyDown,
+                        disabled: saving,
+                        autoFocus: true,
+                        placeholder: "Enter display name",
+                        style: {
+                          flex: 1,
+                          padding: "8px 12px",
+                          fontSize: 14,
+                          border: `1px solid ${error ? "#d32f2f" : "#ddd"}`,
+                          borderRadius: 6,
+                          outline: "none"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: handleSave,
+                        disabled: saving,
+                        style: {
+                          padding: "8px 14px",
+                          fontSize: 14,
+                          backgroundColor: "#1976d2",
+                          color: "#fff",
+                          border: "none",
+                          borderRadius: 6,
+                          cursor: saving ? "not-allowed" : "pointer",
+                          opacity: saving ? 0.6 : 1
+                        },
+                        children: saving ? "\u2026" : "Save"
+                      }
+                    )
+                  ] }) : /* @__PURE__ */ jsx("div", { style: { fontSize: 15 }, children: account?.name || "\u2014" })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { marginBottom: 20 }, children: [
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "#888", fontWeight: 600, marginBottom: 4 }, children: "Email" }),
+                  /* @__PURE__ */ jsx("div", { style: { fontSize: 15 }, children: account?.email || "\u2014" })
+                ] }),
+                /* @__PURE__ */ jsx("hr", { style: { border: "none", borderTop: "1px solid #eee", margin: "16px 0" } }),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: onLogout,
+                    disabled: loggingOut,
+                    style: {
+                      width: "100%",
+                      padding: "10px 16px",
+                      fontSize: 15,
+                      fontWeight: 500,
+                      color: "#d32f2f",
+                      backgroundColor: "#fff",
+                      border: "1px solid #d32f2f",
+                      borderRadius: 8,
+                      cursor: loggingOut ? "not-allowed" : "pointer",
+                      opacity: loggingOut ? 0.6 : 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      gap: 8
+                    },
+                    children: loggingOut ? "Logging out\u2026" : "Log out"
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Toast, { toast, onClose: clearToast })
+      ]
+    }
+  );
+}
 
-export { AppKit, AppKitAuthed, useAppKit };
+export { AppKit, AppKitAuthed, UserButton, useAppKit };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map