@hyperyai/sdk 1.0.0

package/src/components/UserProfile.tsx

@@ -0,0 +1,106 @@
+/**
+ * UserProfile Component
+ * Display user profile information in a card format
+ */
+
+'use client';
+
+import React from 'react';
+import { useUser } from '../lib/context';
+
+export interface UserProfileProps {
+  /** Show extended profile information */
+  showExtended?: boolean;
+  /** Custom CSS class */
+  className?: string;
+  /** Show loading state */
+  showLoading?: boolean;
+}
+
+/**
+ * User profile card component
+ * 
+ * @example
+ * ```tsx
+ * <UserProfile showExtended />
+ * ```
+ */
+export function UserProfile({
+  showExtended = true,
+  className,
+  showLoading = true,
+}: UserProfileProps) {
+  const { user, isLoading } = useUser();
+
+  if (isLoading && showLoading) {
+    return (
+      <div className={className || 'bg-white rounded-lg shadow p-6'}>
+        <div className="animate-pulse">
+          <div className="flex items-center space-x-4">
+            <div className="w-16 h-16 bg-gray-200 rounded-full" />
+            <div className="flex-1 space-y-2">
+              <div className="h-4 bg-gray-200 rounded w-3/4" />
+              <div className="h-3 bg-gray-200 rounded w-1/2" />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return null;
+  }
+
+  const defaultStyles = 'bg-white rounded-lg shadow p-6';
+
+  return (
+    <div className={className || defaultStyles}>
+      <div className="flex items-start space-x-4">
+        {/* Avatar */}
+        {user.image ? (
+          <img
+            src={user.image}
+            alt={user.name}
+            className="w-16 h-16 rounded-full object-cover"
+          />
+        ) : (
+          <div className="w-16 h-16 bg-gradient-to-br from-blue-600 to-purple-600 rounded-full flex items-center justify-center text-white text-2xl font-bold">
+            {user.name.charAt(0).toUpperCase()}
+          </div>
+        )}
+
+        {/* User Info */}
+        <div className="flex-1 min-w-0">
+          <h3 className="text-xl font-semibold text-gray-900 truncate">
+            {user.name}
+          </h3>
+          <p className="text-sm text-gray-600 truncate">{user.email}</p>
+
+          {showExtended && (
+            <div className="mt-4 space-y-2">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-gray-500">User ID</span>
+                <code className="text-xs bg-gray-100 px-2 py-1 rounded font-mono">
+                  {user.id}
+                </code>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {showExtended && (
+        <div className="mt-6 pt-6 border-t border-gray-200">
+          <div className="flex items-center justify-between">
+            <span className="text-sm text-gray-500">Profile Status</span>
+            <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
+              Active
+            </span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+

package/src/components/WorkspaceSwitcher.tsx

@@ -0,0 +1,199 @@
+/**
+ * <WorkspaceSwitcher /> — drop-in dropdown that lists every workspace the
+ * user belongs to (across all orgs/teams) and switches the active one.
+ *
+ * Designed for the top-bar of consumer apps. Headless-ish: ships with
+ * sensible default styles via tailwind utility classes but they can be
+ * fully overridden via `className`.
+ *
+ * Example:
+ *   <WorkspaceSwitcher
+ *     onSwitched={(teamId, workspaceId) => router.refresh()}
+ *   />
+ *
+ * The component groups workspaces by team. Personal team is labelled
+ * "Personal" rather than the literal "{Name}'s Workspace" team name to
+ * keep the switcher compact.
+ */
+
+'use client';
+
+import React, { useCallback, useState } from 'react';
+import { ChevronsUpDown, Check, Building2, User as UserIcon } from 'lucide-react';
+import { useHyperyAuth } from '../lib/context';
+import {
+  useMemberships,
+  setActiveWorkspace,
+  type MembershipEntry,
+  type MembershipWorkspace,
+} from '../hooks/useMemberships';
+
+export interface WorkspaceSwitcherProps {
+  /** Called after a successful switch — typically `router.refresh()`. */
+  onSwitched?: (teamId: string, workspaceId: string) => void;
+  /** Override the Hypery base URL (defaults to NEXT_PUBLIC_GATEWAY_URL). */
+  gatewayUrl?: string;
+  /** Extra classes appended to the trigger button. */
+  className?: string;
+  /** Optional aria-label for the trigger. */
+  ariaLabel?: string;
+}
+
+export function WorkspaceSwitcher({
+  onSwitched,
+  gatewayUrl,
+  className = '',
+  ariaLabel = 'Switch workspace',
+}: WorkspaceSwitcherProps) {
+  const { getAccessToken } = useHyperyAuth();
+  const { data, isLoading, reload } = useMemberships();
+  const [open, setOpen] = useState(false);
+  const [switching, setSwitching] = useState<string | null>(null);
+
+  const activeWorkspaceId = data?.activeWorkspaceId ?? null;
+
+  // Resolve the currently-active entry for the trigger label.
+  const flat: Array<{
+    membership: MembershipEntry;
+    workspace: MembershipWorkspace;
+  }> =
+    data?.memberships.flatMap((m) =>
+      m.workspaces.map((w) => ({ membership: m, workspace: w })),
+    ) ?? [];
+  const activeEntry =
+    flat.find((e) => e.workspace.id === activeWorkspaceId) ?? flat[0];
+
+  const handleSwitch = useCallback(
+    async (teamId: string, workspaceId: string) => {
+      setSwitching(workspaceId);
+      try {
+        await setActiveWorkspace({
+          teamId,
+          workspaceId,
+          getAccessToken,
+          gatewayUrl,
+        });
+        await reload();
+        setOpen(false);
+        onSwitched?.(teamId, workspaceId);
+      } catch (err) {
+        console.error('[WorkspaceSwitcher] switch failed:', err);
+      } finally {
+        setSwitching(null);
+      }
+    },
+    [getAccessToken, gatewayUrl, onSwitched, reload],
+  );
+
+  if (isLoading && !data) {
+    return (
+      <button
+        type="button"
+        disabled
+        className={`inline-flex items-center gap-2 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-3 py-1.5 text-sm text-zinc-500 ${className}`}
+      >
+        <span className="size-4 animate-pulse rounded-sm bg-zinc-300 dark:bg-zinc-700" />
+        Loading workspaces…
+      </button>
+    );
+  }
+
+  if (!data || data.memberships.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="relative inline-block text-left">
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        className={`inline-flex items-center gap-2 rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-3 py-1.5 text-sm font-medium text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-blue-500 ${className}`}
+      >
+        {activeEntry?.membership.team.isPersonal ? (
+          <UserIcon className="h-4 w-4 text-zinc-500" aria-hidden />
+        ) : (
+          <Building2 className="h-4 w-4 text-zinc-500" aria-hidden />
+        )}
+        <span className="truncate max-w-[180px]">
+          {activeEntry ? (
+            <>
+              <span className="text-zinc-500">
+                {activeEntry.membership.team.isPersonal
+                  ? 'Personal'
+                  : activeEntry.membership.team.name}
+              </span>
+              <span className="mx-1.5 text-zinc-300 dark:text-zinc-600">·</span>
+              <span>{activeEntry.workspace.name}</span>
+            </>
+          ) : (
+            'Select workspace'
+          )}
+        </span>
+        <ChevronsUpDown className="h-3.5 w-3.5 text-zinc-400" aria-hidden />
+      </button>
+
+      {open && (
+        <>
+          {/* Click-away */}
+          <button
+            type="button"
+            aria-hidden
+            tabIndex={-1}
+            onClick={() => setOpen(false)}
+            className="fixed inset-0 z-40 cursor-default"
+          />
+          <div
+            role="listbox"
+            className="absolute z-50 mt-1 max-h-[28rem] w-72 overflow-y-auto rounded-md border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 shadow-lg p-1"
+          >
+            {data.memberships.map((m) => (
+              <div key={m.team.id} className="py-1">
+                <div className="px-2 pt-1 pb-1 text-[10px] font-semibold uppercase tracking-wider text-zinc-500 flex items-center gap-1.5">
+                  {m.team.isPersonal ? (
+                    <UserIcon className="h-3 w-3" />
+                  ) : (
+                    <Building2 className="h-3 w-3" />
+                  )}
+                  {m.team.isPersonal ? 'Personal' : m.team.name}
+                </div>
+                {m.workspaces.map((w) => {
+                  const isActive = w.id === activeWorkspaceId;
+                  const isSwitching = switching === w.id;
+                  return (
+                    <button
+                      key={w.id}
+                      type="button"
+                      role="option"
+                      aria-selected={isActive}
+                      disabled={isSwitching}
+                      onClick={() => handleSwitch(m.team.id, w.id)}
+                      className={`flex w-full items-center justify-between gap-2 rounded-sm px-2 py-1.5 text-sm text-left hover:bg-zinc-100 dark:hover:bg-zinc-800 ${
+                        isActive ? 'bg-zinc-50 dark:bg-zinc-800/60' : ''
+                      } disabled:opacity-50`}
+                    >
+                      <span className="flex items-center gap-1.5 truncate">
+                        {w.icon && <span aria-hidden>{w.icon}</span>}
+                        <span className="truncate">{w.name}</span>
+                        {w.isDefault && (
+                          <span className="ml-1 text-[9px] uppercase tracking-wider text-zinc-400">
+                            default
+                          </span>
+                        )}
+                      </span>
+                      {isActive && (
+                        <Check className="h-3.5 w-3.5 text-blue-600" />
+                      )}
+                    </button>
+                  );
+                })}
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/control.tsx

@@ -0,0 +1,133 @@
+/**
+ * Control Components
+ * Similar to Clerk's <SignedIn />, <SignedOut />, etc.
+ */
+
+'use client';
+
+import type { ReactNode } from 'react';
+import { useHyperyAuth } from '../lib/context';
+
+export interface SignedInProps {
+  children: ReactNode;
+  /** Fallback content to show while loading */
+  fallback?: ReactNode;
+}
+
+/**
+ * Only renders children when user is authenticated
+ * 
+ * @example
+ * ```tsx
+ * <SignedIn>
+ *   <Dashboard />
+ * </SignedIn>
+ * ```
+ */
+export function SignedIn({ children, fallback }: SignedInProps) {
+  const { isAuthenticated, isLoading } = useHyperyAuth();
+
+  if (isLoading) {
+    return fallback || null;
+  }
+
+  return isAuthenticated ? children : null;
+}
+
+export interface SignedOutProps {
+  children: ReactNode;
+  /** Fallback content to show while loading */
+  fallback?: ReactNode;
+}
+
+/**
+ * Only renders children when user is NOT authenticated
+ * 
+ * @example
+ * ```tsx
+ * <SignedOut>
+ *   <SignIn />
+ * </SignedOut>
+ * ```
+ */
+export function SignedOut({ children, fallback }: SignedOutProps) {
+  const { isAuthenticated, isLoading } = useHyperyAuth();
+
+  if (isLoading) {
+    return fallback || null;
+  }
+
+  return !isAuthenticated ? children : null;
+}
+
+/**
+ * Redirects to sign in when user is not authenticated
+ * 
+ * @example
+ * ```tsx
+ * <RedirectToSignIn />
+ * ```
+ */
+export function RedirectToSignIn() {
+  const { login, isLoading, isAuthenticated } = useHyperyAuth();
+
+  if (!isLoading && !isAuthenticated) {
+    login();
+  }
+
+  return null;
+}
+
+export interface ProtectProps {
+  children: ReactNode;
+  /** Fallback to show when not authenticated */
+  fallback?: ReactNode;
+  /** Custom redirect logic */
+  onUnauthenticated?: () => void;
+}
+
+/**
+ * Protects content - redirects to sign in if not authenticated
+ * 
+ * @example
+ * ```tsx
+ * <Protect fallback={<SignIn />}>
+ *   <ProtectedContent />
+ * </Protect>
+ * ```
+ */
+export function Protect({
+  children,
+  fallback,
+  onUnauthenticated,
+}: ProtectProps) {
+  const { isAuthenticated, isLoading, login, isLoggingOut } = useHyperyAuth();
+
+  if (isLoading) {
+    return fallback || null;
+  }
+
+  // Don't trigger login if we're in the middle of logging out
+  if (!isAuthenticated && !isLoggingOut) {
+    if (onUnauthenticated) {
+      onUnauthenticated();
+      return null;
+    }
+
+    if (fallback) {
+      return fallback;
+    }
+
+    // Default: initiate login
+    login();
+    return null;
+  }
+
+  // If logging out, show fallback or nothing
+  if (isLoggingOut) {
+    return fallback || null;
+  }
+
+  return children;
+}
+

package/src/components/ui/dialog.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { X } from "lucide-react"
+
+import { cn } from "../../lib/utils"
+
+const Dialog = DialogPrimitive.Root
+
+const DialogTrigger = DialogPrimitive.Trigger
+
+const DialogPortal = DialogPrimitive.Portal
+
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    style={{
+      position: 'fixed',
+      inset: 0,
+      zIndex: 50,
+      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      ...style,
+    }}
+    className={className}
+    {...props}
+  />
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, style, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      style={{
+        position: 'fixed',
+        left: '50%',
+        top: '50%',
+        zIndex: 50,
+        display: 'grid',
+        width: '100%',
+        maxWidth: '32rem',
+        transform: 'translate(-50%, -50%)',
+        gap: '1rem',
+        border: '1px solid #e5e7eb',
+        backgroundColor: '#ffffff',
+        padding: '1.5rem',
+        boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        borderRadius: '0.5rem',
+        ...style,
+      }}
+      className={className}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close 
+        style={{
+          position: 'absolute',
+          right: '1rem',
+          top: '1rem',
+          opacity: 0.7,
+          cursor: 'pointer',
+          border: 'none',
+          background: 'transparent',
+        }}
+      >
+        <X style={{ width: '1rem', height: '1rem' }} />
+        <span style={{ position: 'absolute', width: '1px', height: '1px', padding: 0, margin: '-1px', overflow: 'hidden', clip: 'rect(0, 0, 0, 0)', whiteSpace: 'nowrap', borderWidth: 0 }}>Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+))
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-1.5 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+DialogHeader.displayName = "DialogHeader"
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+}
+

package/src/hooks/index.ts

@@ -0,0 +1,65 @@
+/**
+ * Re-export hooks for convenience
+ */
+
+export { useHyperyAuth, useUser } from '../lib/context';
+
+/**
+ * Alias for useHyperyAuth to match Clerk's API
+ * @example
+ * ```tsx
+ * const { isLoaded, isAuthenticated, user } = useAuth();
+ * ```
+ */
+export { useHyperyAuth as useAuth } from '../lib/context';
+
+// Workspace + membership hooks for the WorkspaceSwitcher and consumer apps.
+export {
+  useMemberships,
+  useActiveWorkspace,
+  setActiveWorkspace,
+} from './useMemberships';
+export type {
+  MembershipEntry,
+  MembershipTeam,
+  MembershipWorkspace,
+  MembershipsResponse,
+  ActiveWorkspace,
+} from './useMemberships';
+
+// Mode-aware wallet hook (balance, 1-click add funds, add payment method).
+export { useWallet } from './useWallet';
+export type {
+  BillingMode,
+  WalletState,
+  WalletTier,
+  UseWalletReturn,
+} from './useWallet';
+
+// "Buy with Hypery" marketplace layer (Stripe Connect, consumer side).
+export { useBuyerWallet } from './useBuyerWallet';
+export type {
+  BuyerPaymentMethod,
+  AddCardOptions,
+  UseBuyerWalletReturn,
+} from './useBuyerWallet';
+export { useMarketplace } from './useMarketplace';
+export type {
+  BuyInput,
+  BuySuccess,
+  BuyFailure,
+  BuyResult,
+  UseMarketplaceReturn,
+} from './useMarketplace';
+
+// Seamless auth + charge orchestrator (login → charge → add-card → retry) in
+// popup or redirect mode. Powers <BuyButton>; use directly for custom buttons
+// and for AI-credit top-ups (kind: 'topup').
+export { useCheckout } from './useCheckout';
+export type {
+  CheckoutInput,
+  CheckoutStatus,
+  CheckoutResult,
+  UseCheckoutReturn,
+} from './useCheckout';
+