@hanzo/iam 0.6.0 → 0.6.2

package/src/react.ts

@@ -46,7 +46,7 @@ import type { ReactNode } from "react";
 import { BrowserIamSdk } from "./browser.js";
 import type { BrowserIamConfig } from "./browser.js";
 import { IamClient } from "./client.js";
-import type { IamUser, IamOrganization, IamInvitation, IamProject, TokenResponse } from "./types.js";
+import type { IamUser, IamOrganization, IamProject, TokenResponse } from "./types.js";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -405,34 +405,26 @@ export function useOrganizations(): OrgState {
     const fetchOrgs = async () => {
       setIsLoading(true);
 
-      // 1. Parse JWT claims for user's workspace org (immediate, no API call)
-      // The user's "owner" is the signup org (for auth). Their personal org
-      // (name == username) is their actual workspace.
+      // 1. Parse JWT sub claim for primary org (immediate, no API call)
       try {
-        let b64 = accessToken.split(".")[1].replace(/-/g, "+").replace(/_/g, "/");
-        while (b64.length % 4) b64 += "=";
-        const payload = JSON.parse(atob(b64));
-
-        const userOwner = (payload.owner as string) ?? "";
-        const userName = (payload.name as string) ?? "";
-        const sub = (payload.sub as string) ?? "";
-
-        // Personal org is the default workspace
-        const workspaceOrg = (userName && userName !== userOwner)
-          ? userName
-          : userOwner || (sub.includes("/") ? sub.split("/")[0] : "");
-
-        if (workspaceOrg && !cancelled) {
-          const immediateOrgs: IamOrganization[] = [
-            { owner: "admin", name: workspaceOrg, displayName: workspaceOrg },
-          ];
-          setOrganizations(immediateOrgs);
-          if (!currentOrgId) {
-            setCurrentOrgId(workspaceOrg);
-            try {
-              localStorage.setItem(STORAGE_ORG_KEY, workspaceOrg);
-            } catch {
-              /* ok */
+        const payload = JSON.parse(atob(accessToken.split(".")[1]));
+        const sub = payload.sub as string;
+        if (sub?.includes("/")) {
+          const primaryOrg = sub.split("/")[0];
+          if (!cancelled) {
+            const syntheticOrg: IamOrganization = {
+              owner: "admin",
+              name: primaryOrg,
+              displayName: primaryOrg,
+            };
+            setOrganizations([syntheticOrg]);
+            if (!currentOrgId) {
+              setCurrentOrgId(primaryOrg);
+              try {
+                localStorage.setItem(STORAGE_ORG_KEY, primaryOrg);
+              } catch {
+                /* ok */
+              }
             }
           }
         }
@@ -597,200 +589,6 @@ export function useIamToken(): {
   };
 }
 
-// ---------------------------------------------------------------------------
-// useOrgManagement
-// ---------------------------------------------------------------------------
-
-export interface OrgManagementState {
-  /** Create a new organization. */
-  createOrg: (org: Partial<IamOrganization>) => Promise<void>;
-  /** Update an existing organization. */
-  updateOrg: (org: Partial<IamOrganization>) => Promise<void>;
-  /** Delete an organization by owner and name. */
-  deleteOrg: (org: { owner: string; name: string }) => Promise<void>;
-  /** Whether a mutation is in progress. */
-  isLoading: boolean;
-}
-
-/**
- * Manage organization CRUD operations.
- *
- * Provides create, update, and delete methods that call the IAM API
- * using the current user's access token.
- */
-export function useOrgManagement(): OrgManagementState {
-  const { config, accessToken } = useIam();
-  const [isLoading, setIsLoading] = useState(false);
-
-  const client = useMemo(
-    () =>
-      new IamClient({
-        serverUrl: config.serverUrl,
-        clientId: config.clientId,
-      }),
-    [config.serverUrl, config.clientId],
-  );
-
-  const createOrg = useCallback(
-    async (org: Partial<IamOrganization>) => {
-      setIsLoading(true);
-      try {
-        await client.createOrganization(org, accessToken ?? undefined);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken],
-  );
-
-  const updateOrg = useCallback(
-    async (org: Partial<IamOrganization>) => {
-      setIsLoading(true);
-      try {
-        await client.updateOrganization(org, accessToken ?? undefined);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken],
-  );
-
-  const deleteOrg = useCallback(
-    async (org: { owner: string; name: string }) => {
-      setIsLoading(true);
-      try {
-        await client.deleteOrganization(org, accessToken ?? undefined);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken],
-  );
-
-  return { createOrg, updateOrg, deleteOrg, isLoading };
-}
-
-// ---------------------------------------------------------------------------
-// useInvitations
-// ---------------------------------------------------------------------------
-
-export interface InvitationsState {
-  /** All invitations for the organization. */
-  invitations: IamInvitation[];
-  /** Create a new invitation. */
-  createInvite: (invitation: Partial<IamInvitation>) => Promise<void>;
-  /** Send an existing invitation. */
-  sendInvite: (invitation: { owner: string; name: string }) => Promise<void>;
-  /** Verify an invitation code. */
-  verifyInvite: (code: string) => Promise<IamInvitation | null>;
-  /** Whether invitations are loading. */
-  isLoading: boolean;
-  /** Re-fetch the invitations list. */
-  refresh: () => Promise<void>;
-}
-
-/**
- * Manage invitations for an organization.
- *
- * Fetches the invitation list on mount and provides create, send,
- * and verify methods using the current user's access token.
- */
-export function useInvitations(orgName: string): InvitationsState {
-  const { config, accessToken, isAuthenticated } = useIam();
-  const [invitations, setInvitations] = useState<IamInvitation[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const client = useMemo(
-    () =>
-      new IamClient({
-        serverUrl: config.serverUrl,
-        clientId: config.clientId,
-      }),
-    [config.serverUrl, config.clientId],
-  );
-
-  const fetchInvitations = useCallback(async () => {
-    if (!isAuthenticated || !accessToken || !orgName) return;
-    setIsLoading(true);
-    try {
-      const data = await client.getInvitations(orgName, accessToken);
-      setInvitations(data);
-    } catch {
-      setInvitations([]);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [client, orgName, accessToken, isAuthenticated]);
-
-  // Fetch invitations on mount and when orgName changes
-  useEffect(() => {
-    if (!isAuthenticated || !accessToken || !orgName) {
-      setInvitations([]);
-      return;
-    }
-
-    let cancelled = false;
-
-    const load = async () => {
-      setIsLoading(true);
-      try {
-        const data = await client.getInvitations(orgName, accessToken);
-        if (!cancelled) setInvitations(data);
-      } catch {
-        if (!cancelled) setInvitations([]);
-      } finally {
-        if (!cancelled) setIsLoading(false);
-      }
-    };
-
-    load();
-    return () => {
-      cancelled = true;
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isAuthenticated, accessToken, orgName, config.serverUrl, config.clientId]);
-
-  const createInvite = useCallback(
-    async (invitation: Partial<IamInvitation>) => {
-      setIsLoading(true);
-      try {
-        await client.createInvitation(invitation, accessToken ?? undefined);
-        await fetchInvitations();
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken, fetchInvitations],
-  );
-
-  const sendInvite = useCallback(
-    async (invitation: { owner: string; name: string }) => {
-      setIsLoading(true);
-      try {
-        await client.sendInvitation(invitation, accessToken ?? undefined);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken],
-  );
-
-  const verifyInvite = useCallback(
-    async (code: string): Promise<IamInvitation | null> => {
-      setIsLoading(true);
-      try {
-        const resp = await client.verifyInvitation(code, accessToken ?? undefined);
-        return resp.data ?? null;
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [client, accessToken],
-  );
-
-  return { invitations, createInvite, sendInvite, verifyInvite, isLoading, refresh: fetchInvitations };
-}
-
 // Re-export context for advanced use
 export { IamContext };
 
@@ -919,403 +717,3 @@ export function OrgProjectSwitcher({
       : null,
   );
 }
-
-// ---------------------------------------------------------------------------
-// UserOrgMenu — shared org switcher + user menu for all Hanzo apps
-// ---------------------------------------------------------------------------
-
-export interface UserOrgMenuProps {
-  /** Additional CSS class for the outer container. */
-  className?: string;
-  /** Called when org changes. Use to sync external state (e.g., tenantStore). */
-  onOrgChange?: (orgId: string) => void;
-  /** Called when user clicks logout. */
-  onLogout?: () => void;
-  /** Whether to show the "Create Organization" option. Defaults to true. */
-  showCreateOrg?: boolean;
-  /** Optional endpoint for org creation (defaults to IAM's /api/add-organization). */
-  createOrgEndpoint?: string;
-}
-
-/**
- * Shared user menu + organization switcher for all Hanzo apps.
- *
- * Shows current user info (name, email, avatar), a dropdown with org list,
- * "Create Organization" option, and logout button. Uses only `@hanzo/iam`
- * hooks — no external UI library required.
- *
- * @example
- * ```tsx
- * import { UserOrgMenu } from '@hanzo/iam/react'
- *
- * function TopBar() {
- *   return (
- *     <nav>
- *       <UserOrgMenu
- *         onOrgChange={(orgId) => myStore.setOrg(orgId)}
- *         onLogout={() => router.push('/login')}
- *       />
- *     </nav>
- *   )
- * }
- * ```
- */
-export function UserOrgMenu({
-  className = "",
-  onOrgChange,
-  onLogout,
-  showCreateOrg = true,
-  createOrgEndpoint,
-}: UserOrgMenuProps) {
-  const { config, isAuthenticated, accessToken, user, logout } = useIam();
-  const orgState = useOrganizations();
-  const [open, setOpen] = useState(false);
-  const [createOpen, setCreateOpen] = useState(false);
-  const [newOrgName, setNewOrgName] = useState("");
-  const [newOrgDisplay, setNewOrgDisplay] = useState("");
-  const [creating, setCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const menuRef = useRef<HTMLDivElement>(null);
-
-  // Close on outside click
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handler);
-    return () => document.removeEventListener("mousedown", handler);
-  }, []);
-
-  const handleSwitchOrg = useCallback(
-    (orgId: string) => {
-      orgState.switchOrg(orgId);
-      onOrgChange?.(orgId);
-      setOpen(false);
-    },
-    [orgState, onOrgChange],
-  );
-
-  const handleLogout = useCallback(() => {
-    setOpen(false);
-    if (onLogout) {
-      onLogout();
-    } else {
-      logout?.();
-    }
-  }, [onLogout, logout]);
-
-  const handleCreateOrg = useCallback(async () => {
-    const name = newOrgName.trim();
-    if (!name) return;
-
-    setCreating(true);
-    setError(null);
-
-    try {
-      const client = new IamClient({
-        serverUrl: config.serverUrl,
-        clientId: config.clientId,
-      });
-
-      if (createOrgEndpoint) {
-        // Use custom endpoint (e.g., playground's /v1/orgs)
-        const res = await fetch(createOrgEndpoint, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            ...(accessToken ? { Authorization: `Bearer ${accessToken}` } : {}),
-          },
-          body: JSON.stringify({
-            name,
-            displayName: newOrgDisplay.trim() || name,
-          }),
-        });
-        if (!res.ok) {
-          const body = await res.json().catch(() => ({}));
-          throw new Error(body.error || body.msg || `HTTP ${res.status}`);
-        }
-      } else {
-        // Use IAM directly
-        await client.createOrganization(
-          { owner: "admin", name, displayName: newOrgDisplay.trim() || name },
-          accessToken ?? undefined,
-        );
-      }
-
-      // Switch to new org
-      orgState.switchOrg(name);
-      onOrgChange?.(name);
-      setNewOrgName("");
-      setNewOrgDisplay("");
-      setCreateOpen(false);
-      setOpen(false);
-
-      // Reload to refresh org list
-      window.location.reload();
-    } catch (e) {
-      setError(e instanceof Error ? e.message : String(e));
-    } finally {
-      setCreating(false);
-    }
-  }, [newOrgName, newOrgDisplay, config, accessToken, createOrgEndpoint, orgState, onOrgChange]);
-
-  if (!isAuthenticated) return null;
-
-  const orgs = orgState.organizations ?? [];
-  const currentLabel =
-    orgs.find((o) => o.name === orgState.currentOrgId)?.displayName ??
-    orgState.currentOrgId ??
-    "Select org";
-
-  const userName = user?.displayName || user?.name || user?.email || "User";
-  const userEmail = user?.email || "";
-  const userAvatar = user?.avatar || "";
-
-  // Inline styles (no external CSS dependencies)
-  const menuStyle: React.CSSProperties = {
-    position: "absolute",
-    top: "100%",
-    right: 0,
-    marginTop: 4,
-    minWidth: 240,
-    borderRadius: 8,
-    border: "1px solid var(--border, #333)",
-    background: "var(--popover, #1a1a1a)",
-    color: "var(--popover-foreground, #fff)",
-    boxShadow: "0 8px 32px rgba(0,0,0,0.4)",
-    zIndex: 50,
-    overflow: "hidden",
-  };
-
-  const itemStyle: React.CSSProperties = {
-    display: "flex",
-    alignItems: "center",
-    gap: 8,
-    padding: "8px 12px",
-    fontSize: 13,
-    cursor: "pointer",
-    transition: "background 0.1s",
-    width: "100%",
-    border: "none",
-    background: "transparent",
-    color: "inherit",
-    textAlign: "left",
-  };
-
-  const activeItemStyle: React.CSSProperties = {
-    ...itemStyle,
-    background: "var(--accent, #2a2a2a)",
-  };
-
-  const separatorStyle: React.CSSProperties = {
-    height: 1,
-    background: "var(--border, #333)",
-    margin: "4px 0",
-  };
-
-  const labelStyle: React.CSSProperties = {
-    padding: "6px 12px",
-    fontSize: 11,
-    fontWeight: 600,
-    textTransform: "uppercase" as const,
-    letterSpacing: "0.05em",
-    color: "var(--muted-foreground, #888)",
-  };
-
-  return createElement(
-    "div",
-    { ref: menuRef, className: `relative ${className}`, style: { position: "relative" } },
-
-    // Trigger button
-    createElement(
-      "button",
-      {
-        onClick: () => setOpen(!open),
-        style: {
-          display: "flex",
-          alignItems: "center",
-          gap: 8,
-          padding: "6px 10px",
-          borderRadius: 6,
-          border: "none",
-          background: "transparent",
-          cursor: "pointer",
-          color: "inherit",
-          fontSize: 13,
-          fontWeight: 500,
-        },
-        "aria-label": "User menu",
-      },
-      userAvatar
-        ? createElement("img", {
-            src: userAvatar,
-            alt: userName,
-            style: { width: 24, height: 24, borderRadius: "50%", objectFit: "cover" as const },
-          })
-        : createElement(
-            "div",
-            {
-              style: {
-                width: 24,
-                height: 24,
-                borderRadius: "50%",
-                background: "var(--primary, #3b82f6)",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                fontSize: 11,
-                fontWeight: 600,
-                color: "#fff",
-              },
-            },
-            userName.charAt(0).toUpperCase(),
-          ),
-      createElement("span", { style: { maxWidth: 120, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" as const } }, currentLabel),
-      createElement("span", { style: { fontSize: 10, opacity: 0.5 } }, open ? "\u25B2" : "\u25BC"),
-    ),
-
-    // Dropdown menu
-    open &&
-      createElement(
-        "div",
-        { style: menuStyle },
-
-        // User info section
-        createElement(
-          "div",
-          { style: { padding: "10px 12px", borderBottom: "1px solid var(--border, #333)" } },
-          createElement("div", { style: { fontSize: 13, fontWeight: 600 } }, userName),
-          userEmail && createElement("div", { style: { fontSize: 11, opacity: 0.6, marginTop: 2 } }, userEmail),
-        ),
-
-        // Organization section
-        createElement("div", { style: labelStyle }, "Organization"),
-        ...orgs.map((org) =>
-          createElement(
-            "button",
-            {
-              key: org.name,
-              onClick: () => handleSwitchOrg(org.name),
-              style: org.name === orgState.currentOrgId ? activeItemStyle : itemStyle,
-              onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
-              onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { if (org.name !== orgState.currentOrgId) (e.target as HTMLElement).style.background = "transparent"; },
-            },
-            org.name === orgState.currentOrgId ? "\u2713 " : "  ",
-            org.displayName || org.name,
-          ),
-        ),
-
-        // Create org option
-        showCreateOrg &&
-          createElement(
-            "div",
-            null,
-            createElement("div", { style: separatorStyle }),
-            !createOpen
-              ? createElement(
-                  "button",
-                  {
-                    onClick: () => setCreateOpen(true),
-                    style: itemStyle,
-                    onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
-                    onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "transparent"; },
-                  },
-                  "+ Create Organization",
-                )
-              : createElement(
-                  "div",
-                  { style: { padding: "8px 12px" } },
-                  createElement("input", {
-                    type: "text",
-                    placeholder: "org-name",
-                    value: newOrgName,
-                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => setNewOrgName(e.target.value),
-                    style: {
-                      width: "100%",
-                      padding: "6px 8px",
-                      fontSize: 12,
-                      borderRadius: 4,
-                      border: "1px solid var(--border, #333)",
-                      background: "var(--background, #111)",
-                      color: "inherit",
-                      marginBottom: 4,
-                    },
-                    disabled: creating,
-                  }),
-                  createElement("input", {
-                    type: "text",
-                    placeholder: "Display Name",
-                    value: newOrgDisplay,
-                    onChange: (e: React.ChangeEvent<HTMLInputElement>) => setNewOrgDisplay(e.target.value),
-                    style: {
-                      width: "100%",
-                      padding: "6px 8px",
-                      fontSize: 12,
-                      borderRadius: 4,
-                      border: "1px solid var(--border, #333)",
-                      background: "var(--background, #111)",
-                      color: "inherit",
-                      marginBottom: 4,
-                    },
-                    disabled: creating,
-                  }),
-                  error && createElement("div", { style: { fontSize: 11, color: "#ef4444", marginBottom: 4 } }, error),
-                  createElement(
-                    "div",
-                    { style: { display: "flex", gap: 4 } },
-                    createElement(
-                      "button",
-                      {
-                        onClick: handleCreateOrg,
-                        disabled: creating || !newOrgName.trim(),
-                        style: {
-                          flex: 1,
-                          padding: "5px 8px",
-                          fontSize: 12,
-                          borderRadius: 4,
-                          border: "none",
-                          background: "var(--primary, #3b82f6)",
-                          color: "#fff",
-                          cursor: creating ? "wait" : "pointer",
-                          opacity: creating || !newOrgName.trim() ? 0.5 : 1,
-                        },
-                      },
-                      creating ? "Creating..." : "Create",
-                    ),
-                    createElement(
-                      "button",
-                      {
-                        onClick: () => { setCreateOpen(false); setError(null); },
-                        style: {
-                          padding: "5px 8px",
-                          fontSize: 12,
-                          borderRadius: 4,
-                          border: "1px solid var(--border, #333)",
-                          background: "transparent",
-                          color: "inherit",
-                          cursor: "pointer",
-                        },
-                      },
-                      "Cancel",
-                    ),
-                  ),
-                ),
-          ),
-
-        // Logout
-        createElement("div", { style: separatorStyle }),
-        createElement(
-          "button",
-          {
-            onClick: handleLogout,
-            style: { ...itemStyle, color: "var(--destructive, #ef4444)" },
-            onMouseEnter: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "var(--accent, #2a2a2a)"; },
-            onMouseLeave: (e: React.MouseEvent<HTMLButtonElement>) => { (e.target as HTMLElement).style.background = "transparent"; },
-          },
-          "Sign out",
-        ),
-      ),
-  );
-}

package/src/types.ts

@@ -1,6 +1,6 @@
 /**
  * Core types for the Hanzo IAM SDK.
- * Based on Casdoor data models.
+ * Hanzo IAM data models.
  */
 
 // ---------------------------------------------------------------------------
@@ -226,26 +226,6 @@ export type IamOrder = Order;
 export type IamUsageRecord = UsageRecord;
 export type IamUsageSummary = UsageSummary;
 
-// ---------------------------------------------------------------------------
-// Invitation
-// ---------------------------------------------------------------------------
-
-export type IamInvitation = {
-  owner: string;
-  name: string;
-  displayName?: string;
-  code: string;
-  quota: number;
-  usedCount: number;
-  application?: string;
-  email?: string;
-  phone?: string;
-  signupGroup?: string;
-  state?: string;
-  createdTime?: string;
-  updatedTime?: string;
-};
-
 // ---------------------------------------------------------------------------
 // Project
 // ---------------------------------------------------------------------------