create-ab-app 0.1.1

package/template/src/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "cn"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-muted", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/template/src/components/ui/sonner.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: (
+          <CircleCheckIcon className="size-4" />
+        ),
+        info: (
+          <InfoIcon className="size-4" />
+        ),
+        warning: (
+          <TriangleAlertIcon className="size-4" />
+        ),
+        error: (
+          <OctagonXIcon className="size-4" />
+        ),
+        loading: (
+          <Loader2Icon className="size-4 animate-spin" />
+        ),
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }

package/template/src/components/ui/tooltip.tsx

@@ -0,0 +1,65 @@
+"use client"
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip"
+import { cn } from "cn"
+
+function TooltipProvider({
+  delay = 0,
+  ...props
+}: TooltipPrimitive.Provider.Props) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delay={delay}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<
+    TooltipPrimitive.Positioner.Props,
+    "align" | "alignOffset" | "side" | "sideOffset"
+  >) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/template/src/components/user-menu.tsx

@@ -0,0 +1,96 @@
+import { useNavigate } from "react-router-dom"
+import {
+  BadgeCheckIcon,
+  CoinsIcon,
+  CreditCardIcon,
+  LogOutIcon,
+  SparklesIcon,
+  WalletIcon,
+} from "lucide-react"
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import {
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu"
+import { useUserIdentity } from "@/hooks/use-user-identity"
+import { useAccountSettings, useAuth, useEntitlements } from "@/lib/sso"
+
+export function UserAvatar({ className }: { className?: string }) {
+  const { name, avatarUrl, initials: fallback } = useUserIdentity()
+  return (
+    <Avatar className={className}>
+      <AvatarImage src={avatarUrl} alt={name} />
+      <AvatarFallback>{fallback}</AvatarFallback>
+    </Avatar>
+  )
+}
+
+/** Avatar plus the name/email block, as used in a menu label or a trigger. */
+export function UserIdentity() {
+  const { name, email } = useUserIdentity()
+  return (
+    <>
+      <UserAvatar />
+      <div className="grid flex-1 text-left text-sm leading-tight">
+        <span className="truncate font-medium">{name}</span>
+        <span className="truncate text-xs">{email}</span>
+      </div>
+    </>
+  )
+}
+
+/** Each item opens Account Settings on its section — the billing entry point. */
+export function UserMenuItems() {
+  const { isActive } = useEntitlements()
+  const { open } = useAccountSettings()
+  const { signOut } = useAuth()
+  const navigate = useNavigate()
+
+  return (
+    <>
+      {!isActive && (
+        <>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={() => open("plans")}>
+              <SparklesIcon />
+              Upgrade
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )}
+
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={() => open("account")}>
+          <BadgeCheckIcon />
+          Account
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => open("plans")}>
+          <CreditCardIcon />
+          Plans &amp; add-ons
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => open("wallet")}>
+          <WalletIcon />
+          Wallet &amp; balance
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => open("credits")}>
+          <CoinsIcon />
+          Credits
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+
+      <DropdownMenuSeparator />
+      <DropdownMenuItem
+        onClick={() => {
+          void signOut().then(() => navigate("/login", { replace: true }))
+        }}
+      >
+        <LogOutIcon />
+        Log out
+      </DropdownMenuItem>
+    </>
+  )
+}

package/template/src/config/env.ts

@@ -0,0 +1,14 @@
+export const env = {
+  authProjectId: import.meta.env.VITE_AUTH_PROJECT_ID ?? "",
+  authApiBaseUrl: import.meta.env.VITE_AUTH_API_BASE_URL || undefined,
+  /** Your own product API — see src/lib/http.ts. */
+  apiBaseUrl: import.meta.env.VITE_API_BASE_URL ?? "",
+  appName: import.meta.env.VITE_APP_NAME || "Acme Inc",
+} as const
+
+/** Env vars the app cannot start without. */
+export function missingRequiredEnv(): string[] {
+  const missing: string[] = []
+  if (!env.authProjectId) missing.push("VITE_AUTH_PROJECT_ID")
+  return missing
+}

package/template/src/config/navigation.ts

@@ -0,0 +1,52 @@
+import {
+  BookOpenIcon,
+  CreditCardIcon,
+  FolderTreeIcon,
+  KeyRoundIcon,
+  PaletteIcon,
+  PlugIcon,
+  RouteIcon,
+  SettingsIcon,
+  SparklesIcon,
+} from "lucide-react"
+
+/** Anything that renders like a Lucide icon. */
+export type IconComponent = React.ComponentType<{ className?: string }>
+
+export type NavItem = {
+  title: string
+  url: string
+  icon?: IconComponent
+  /** Item ids that unlock this entry. Omit to show it to every signed-in user. */
+  requiresIds?: string[]
+  items?: { title: string; url: string; requiresIds?: string[] }[]
+}
+
+/**
+ * The sidebar, as data. Replace these groups with your product's nav — the docs
+ * pages under src/routes/docs can go with them.
+ */
+export const navGettingStarted: NavItem[] = [
+  { title: "Overview", url: "/", icon: BookOpenIcon },
+  { title: "Project structure", url: "/docs/structure", icon: FolderTreeIcon },
+  { title: "Configuration", url: "/docs/configuration", icon: SettingsIcon },
+]
+
+export const navGuides: NavItem[] = [
+  { title: "Auth", url: "/docs/auth", icon: KeyRoundIcon },
+  { title: "Billing & plans", url: "/docs/billing", icon: CreditCardIcon },
+  { title: "Routing & guards", url: "/docs/routing", icon: RouteIcon },
+  { title: "UI & theming", url: "/docs/theming", icon: PaletteIcon },
+  { title: "Your own API", url: "/docs/api", icon: PlugIcon },
+]
+
+export const navExamples: NavItem[] = [
+  { title: "Live example", url: "/example", icon: SparklesIcon },
+]
+
+/** Every nav entry, flattened — used for breadcrumb titles. */
+export const allNavItems: NavItem[] = [
+  ...navGettingStarted,
+  ...navGuides,
+  ...navExamples,
+]

package/template/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/template/src/hooks/use-user-identity.ts

@@ -0,0 +1,27 @@
+import type { MappedProfile } from "@/lib/sso"
+import { useProfile } from "@/lib/sso"
+
+function displayName(profile?: MappedProfile) {
+  if (!profile) return ""
+  const full = [profile.firstName, profile.lastName].filter(Boolean).join(" ")
+  return full || profile.username || profile.email
+}
+
+function initials(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean)
+  if (parts.length === 0) return "?"
+  return (parts[0][0] + (parts[1]?.[0] ?? "")).toUpperCase()
+}
+
+/** The display fields the sidebar and header menus both need. */
+export function useUserIdentity() {
+  const { data: profile, isPending } = useProfile()
+  const name = displayName(profile)
+  return {
+    isPending,
+    name,
+    email: profile?.email ?? profile?.username ?? "",
+    avatarUrl: profile?.avatarUrl,
+    initials: initials(name),
+  }
+}

package/template/src/index.css

@@ -0,0 +1,134 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+@import "@fontsource-variable/geist";
+
+/* SDK styles — must come after Tailwind. */
+@import "ab-ecosystem-sso/styles.css";
+@import "./styles/aas-theme.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+    --font-heading: var(--font-sans);
+    --font-sans: 'Geist Variable', sans-serif;
+    --color-sidebar-ring: var(--sidebar-ring);
+    --color-sidebar-border: var(--sidebar-border);
+    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+    --color-sidebar-accent: var(--sidebar-accent);
+    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+    --color-sidebar-primary: var(--sidebar-primary);
+    --color-sidebar-foreground: var(--sidebar-foreground);
+    --color-sidebar: var(--sidebar);
+    --color-chart-5: var(--chart-5);
+    --color-chart-4: var(--chart-4);
+    --color-chart-3: var(--chart-3);
+    --color-chart-2: var(--chart-2);
+    --color-chart-1: var(--chart-1);
+    --color-ring: var(--ring);
+    --color-input: var(--input);
+    --color-border: var(--border);
+    --color-destructive: var(--destructive);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-accent: var(--accent);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-muted: var(--muted);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-secondary: var(--secondary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-primary: var(--primary);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-popover: var(--popover);
+    --color-card-foreground: var(--card-foreground);
+    --color-card: var(--card);
+    --color-foreground: var(--foreground);
+    --color-background: var(--background);
+    --radius-sm: calc(var(--radius) * 0.6);
+    --radius-md: calc(var(--radius) * 0.8);
+    --radius-lg: var(--radius);
+    --radius-xl: calc(var(--radius) * 1.4);
+    --radius-2xl: calc(var(--radius) * 1.8);
+    --radius-3xl: calc(var(--radius) * 2.2);
+    --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+    --background: oklch(1 0 0);
+    --foreground: oklch(0.145 0 0);
+    --card: oklch(1 0 0);
+    --card-foreground: oklch(0.145 0 0);
+    --popover: oklch(1 0 0);
+    --popover-foreground: oklch(0.145 0 0);
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+    --secondary: oklch(0.97 0 0);
+    --secondary-foreground: oklch(0.205 0 0);
+    --muted: oklch(0.97 0 0);
+    --muted-foreground: oklch(0.556 0 0);
+    --accent: oklch(0.97 0 0);
+    --accent-foreground: oklch(0.205 0 0);
+    --destructive: oklch(0.577 0.245 27.325);
+    --border: oklch(0.922 0 0);
+    --input: oklch(0.922 0 0);
+    --ring: oklch(0.708 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --radius: 0.625rem;
+    --sidebar: oklch(0.985 0 0);
+    --sidebar-foreground: oklch(0.145 0 0);
+    --sidebar-primary: oklch(0.205 0 0);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.97 0 0);
+    --sidebar-accent-foreground: oklch(0.205 0 0);
+    --sidebar-border: oklch(0.922 0 0);
+    --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+    --background: oklch(0.145 0 0);
+    --foreground: oklch(0.985 0 0);
+    --card: oklch(0.205 0 0);
+    --card-foreground: oklch(0.985 0 0);
+    --popover: oklch(0.205 0 0);
+    --popover-foreground: oklch(0.985 0 0);
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+    --secondary: oklch(0.269 0 0);
+    --secondary-foreground: oklch(0.985 0 0);
+    --muted: oklch(0.269 0 0);
+    --muted-foreground: oklch(0.708 0 0);
+    --accent: oklch(0.269 0 0);
+    --accent-foreground: oklch(0.985 0 0);
+    --destructive: oklch(0.704 0.191 22.216);
+    --border: oklch(1 0 0 / 10%);
+    --input: oklch(1 0 0 / 15%);
+    --ring: oklch(0.556 0 0);
+    --chart-1: oklch(0.87 0 0);
+    --chart-2: oklch(0.556 0 0);
+    --chart-3: oklch(0.439 0 0);
+    --chart-4: oklch(0.371 0 0);
+    --chart-5: oklch(0.269 0 0);
+    --sidebar: oklch(0.205 0 0);
+    --sidebar-foreground: oklch(0.985 0 0);
+    --sidebar-primary: oklch(0.488 0.243 264.376);
+    --sidebar-primary-foreground: oklch(0.985 0 0);
+    --sidebar-accent: oklch(0.269 0 0);
+    --sidebar-accent-foreground: oklch(0.985 0 0);
+    --sidebar-border: oklch(1 0 0 / 10%);
+    --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    }
+  body {
+    @apply bg-background text-foreground;
+    }
+  html {
+    @apply font-sans;
+    }
+}

package/template/src/lib/http.ts

@@ -0,0 +1,40 @@
+import { env } from "@/config/env"
+import { tokenStore } from "@/lib/sso"
+
+export class HttpError extends Error {
+  readonly status: number
+  readonly body: unknown
+
+  constructor(status: number, body: unknown, message: string) {
+    super(message)
+    this.name = "HttpError"
+    this.status = status
+    this.body = body
+  }
+}
+
+/** Client for your product API. Attaches the bearer; a 401 drops the token. */
+export async function api<T>(path: string, init: RequestInit = {}): Promise<T> {
+  const token = tokenStore.get()
+  const headers = new Headers(init.headers)
+  headers.set("Accept", "application/json")
+  if (init.body && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/json")
+  }
+  if (token) headers.set("Authorization", `Bearer ${token}`)
+
+  const response = await fetch(`${env.apiBaseUrl}${path}`, { ...init, headers })
+
+  if (response.status === 401) {
+    tokenStore.clear()
+    throw new HttpError(401, null, "Session expired")
+  }
+
+  const isJson = response.headers.get("Content-Type")?.includes("application/json")
+  const body = isJson ? await response.json() : await response.text()
+
+  if (!response.ok) {
+    throw new HttpError(response.status, body, `Request failed: ${response.status}`)
+  }
+  return body as T
+}

package/template/src/lib/sso/account-settings.tsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect } from "react"
+import { useNavigate } from "react-router-dom"
+import { useQueryClient } from "@tanstack/react-query"
+import {
+  openAccountSettings,
+  restoreAccountSettings,
+  type AccountSettingsSection,
+} from "ab-ecosystem-sso"
+
+import { useAuth } from "./auth-context"
+import { ssoProps } from "./config"
+import { ssoKeys } from "./queries"
+
+/** The billing surface: plans, add-ons, wallet and credits all live in this modal. */
+export function useAccountSettings() {
+  const { token, signOut } = useAuth()
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const invalidate = useCallback(() => {
+    void queryClient.invalidateQueries({ queryKey: ssoKeys.all })
+  }, [queryClient])
+
+  const open = useCallback(
+    (initialSection: AccountSettingsSection = "general") =>
+      openAccountSettings({
+        ...ssoProps,
+        token: token ?? undefined,
+        initialSection,
+        // The modal does its own API calls; these just refresh our cached copies.
+        onChangePlan: invalidate,
+        onAddFunds: invalidate,
+        onSaveProfile: invalidate,
+        onLogout: () => {
+          void signOut().then(() => navigate("/login", { replace: true }))
+        },
+      }),
+    [token, invalidate, signOut, navigate],
+  )
+
+  return { open, invalidate }
+}
+
+/** Re-opens the modal after a refresh when a #settings-* hash is present. */
+export function useRestoreAccountSettings() {
+  const { token } = useAuth()
+
+  useEffect(() => {
+    if (!token) return
+    const handle = restoreAccountSettings({ ...ssoProps, token })
+    return () => handle?.close()
+  }, [token])
+}

package/template/src/lib/sso/auth-context.ts

@@ -0,0 +1,16 @@
+import { createContext, use } from "react"
+
+export type AuthContextValue = {
+  token: string | null
+  isAuthenticated: boolean
+  signIn: (token: string) => void
+  signOut: () => Promise<void>
+}
+
+export const AuthContext = createContext<AuthContextValue | null>(null)
+
+export function useAuth(): AuthContextValue {
+  const context = use(AuthContext)
+  if (!context) throw new Error("useAuth must be used inside <AuthProvider>")
+  return context
+}

package/template/src/lib/sso/auth-provider.tsx

@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useSyncExternalStore } from "react"
+import { useQueryClient } from "@tanstack/react-query"
+import { logoutApi } from "ab-ecosystem-sso"
+
+import { AuthContext, type AuthContextValue } from "./auth-context"
+import { ssoConfig } from "./config"
+import { tokenStore } from "./token-store"
+
+/** Owns the token app-wide. The SDK's useSession() returns neither token nor user. */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const queryClient = useQueryClient()
+  const token = useSyncExternalStore(
+    tokenStore.subscribe,
+    tokenStore.get,
+    () => null,
+  )
+
+  const signIn = useCallback((next: string) => {
+    tokenStore.set(next)
+  }, [])
+
+  const signOut = useCallback(async () => {
+    const current = tokenStore.get()
+    if (current) {
+      // Sign out locally even if the network call fails.
+      try {
+        await logoutApi(ssoConfig.projectId, current, ssoConfig.apiBaseUrl)
+      } catch {
+        /* empty */
+      }
+    }
+    tokenStore.clear()
+    queryClient.clear()
+  }, [queryClient])
+
+  const value = useMemo<AuthContextValue>(
+    () => ({ token, isAuthenticated: Boolean(token), signIn, signOut }),
+    [token, signIn, signOut],
+  )
+
+  return <AuthContext value={value}>{children}</AuthContext>
+}