@pylonsync/client 0.3.267

package/src/lib/api.ts

@@ -0,0 +1,368 @@
+"use client";
+
+import { db, getBaseUrl, storageKey } from "@pylonsync/react";
+
+export interface AuthProvider {
+	provider: string;
+	auth_url: string;
+}
+
+export interface SessionResponse {
+	token: string;
+	user_id: string;
+	expires_at?: number;
+}
+
+export interface OrgSummary {
+	id: string;
+	name: string;
+	role: "owner" | "admin" | "member" | string;
+	created_at: number;
+}
+
+class ApiError extends Error {
+	code: string;
+	status: number;
+	constructor(code: string, message: string, status: number) {
+		super(message);
+		this.code = code;
+		this.status = status;
+	}
+}
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+	const res = await fetch(`${getBaseUrl()}${path}`, {
+		method: "POST",
+		credentials: "include",
+		headers: { "content-type": "application/json" },
+		body: JSON.stringify(body),
+	});
+	if (!res.ok) {
+		const payload = await res.json().catch(() => ({}) as Record<string, unknown>);
+		const code = (payload?.error as string) ?? `HTTP_${res.status}`;
+		const message =
+			(payload?.message as string) ?? res.statusText ?? "request failed";
+		throw new ApiError(code, message, res.status);
+	}
+	return res.json() as Promise<T>;
+}
+
+async function get<T>(path: string): Promise<T> {
+	const res = await fetch(`${getBaseUrl()}${path}`, {
+		method: "GET",
+		credentials: "include",
+	});
+	if (!res.ok) throw new ApiError(`HTTP_${res.status}`, res.statusText, res.status);
+	return res.json() as Promise<T>;
+}
+
+/**
+ * Mint a guest session if the browser doesn't already have a Pylon
+ * token. Idempotent — calling repeatedly is a no-op once a session
+ * exists. Designed for zero-auth demos (`<EnsureGuest>` is the
+ * component wrapper); apps that need real users should use `<SignIn>`
+ * instead.
+ *
+ * Each browser gets its own anonymous `user_id`, so multi-tab demos
+ * still observe live sync across tabs sharing the same guest. To
+ * reset (e.g. "switch identity"), clear the token from storage and
+ * call this again.
+ */
+export async function ensureGuestSession(): Promise<SessionResponse | null> {
+	if (typeof window === "undefined") return null;
+	const existing = window.localStorage?.getItem(storageKey("token"));
+	if (existing) return null;
+	try {
+		const res = await fetch(`${getBaseUrl()}/api/auth/guest`, {
+			method: "POST",
+			credentials: "include",
+		});
+		if (!res.ok) return null;
+		const body = (await res.json()) as SessionResponse;
+		persistSession(body);
+		return body;
+	} catch {
+		return null;
+	}
+}
+
+export async function listAuthProviders(): Promise<AuthProvider[]> {
+	try {
+		return await get<AuthProvider[]>("/api/auth/providers");
+	} catch {
+		// Older binaries may not expose this — render with no OAuth buttons.
+		return [];
+	}
+}
+
+export async function sendMagicLink(
+	email: string,
+	captchaToken?: string,
+): Promise<{ ok: true }> {
+	return post("/api/auth/magic/send", { email, captchaToken });
+}
+
+export async function verifyMagicLink(
+	email: string,
+	code: string,
+): Promise<SessionResponse> {
+	return post("/api/auth/magic/verify", { email, code });
+}
+
+export async function passwordRegister(input: {
+	email: string;
+	password: string;
+	displayName?: string;
+	captchaToken?: string;
+}): Promise<SessionResponse> {
+	return post("/api/auth/password/register", input);
+}
+
+export async function passwordLogin(input: {
+	email: string;
+	password: string;
+}): Promise<SessionResponse> {
+	return post("/api/auth/password/login", input);
+}
+
+/**
+ * Persist a freshly-minted session locally + tell the sync engine to
+ * re-fetch /api/auth/me so cached `useSession()` consumers re-render
+ * immediately. Components call this after successful sign-in/sign-up.
+ */
+export function persistSession(session: SessionResponse): void {
+	try {
+		if (typeof window !== "undefined" && window.localStorage) {
+			window.localStorage.setItem(storageKey("token"), session.token);
+		}
+	} catch {
+		// localStorage can throw (private mode, quota, etc.) — fall through
+		// and let the sync engine pick up the token on next start.
+	}
+	void db.sync.notifySessionChanged();
+}
+
+export async function listOrgs(): Promise<OrgSummary[]> {
+	try {
+		return await get<OrgSummary[]>("/api/auth/orgs");
+	} catch {
+		return [];
+	}
+}
+
+export async function createOrg(name: string): Promise<OrgSummary> {
+	return post<OrgSummary>("/api/auth/orgs", { name });
+}
+
+export interface OrgMember {
+	user_id: string;
+	role: string;
+	joined_at: number;
+}
+
+export async function listOrgMembers(orgId: string): Promise<OrgMember[]> {
+	try {
+		return await get<OrgMember[]>(`/api/auth/orgs/${orgId}/members`);
+	} catch {
+		return [];
+	}
+}
+
+export async function updateMemberRole(
+	orgId: string,
+	userId: string,
+	role: string,
+): Promise<{ updated: boolean }> {
+	return req<{ updated: boolean }>(
+		"PUT",
+		`/api/auth/orgs/${orgId}/members/${userId}`,
+		{ role },
+	);
+}
+
+export async function removeMember(
+	orgId: string,
+	userId: string,
+): Promise<{ removed: boolean }> {
+	return req<{ removed: boolean }>(
+		"DELETE",
+		`/api/auth/orgs/${orgId}/members/${userId}`,
+	);
+}
+
+export interface PendingInvite {
+	id: string;
+	email: string;
+	role: string;
+	token_prefix: string;
+	invited_by: string;
+	created_at: number;
+	expires_at: number;
+}
+
+export interface InviteResult {
+	id: string;
+	email: string;
+	role: string;
+	expires_at: number;
+	accept_url: string;
+	/** Dev mode only — full token so the inviter can copy/paste when
+	 *  the email transport isn't configured. */
+	token?: string;
+}
+
+export async function listInvites(orgId: string): Promise<PendingInvite[]> {
+	try {
+		return await get<PendingInvite[]>(`/api/auth/orgs/${orgId}/invites`);
+	} catch {
+		return [];
+	}
+}
+
+export async function createInvite(
+	orgId: string,
+	email: string,
+	role: string,
+): Promise<InviteResult> {
+	return post<InviteResult>(`/api/auth/orgs/${orgId}/invites`, { email, role });
+}
+
+export async function revokeInvite(
+	orgId: string,
+	inviteId: string,
+): Promise<{ revoked: boolean }> {
+	return req<{ revoked: boolean }>(
+		"DELETE",
+		`/api/auth/orgs/${orgId}/invites/${inviteId}`,
+	);
+}
+
+export async function acceptInvite(
+	token: string,
+): Promise<{ org_id: string; role: string }> {
+	return post<{ org_id: string; role: string }>(
+		`/api/auth/invites/${encodeURIComponent(token)}/accept`,
+		{},
+	);
+}
+
+export interface ConnectionAuthUrl {
+	url: string;
+}
+
+export async function connectionAuthUrl(
+	name: string,
+	postRedirect?: string,
+): Promise<ConnectionAuthUrl> {
+	return post<ConnectionAuthUrl>(
+		`/api/connections/${encodeURIComponent(name)}/auth-url`,
+		postRedirect ? { post_redirect: postRedirect } : {},
+	);
+}
+
+export interface ActiveSession {
+	token_prefix: string;
+	user_id: string;
+	device?: string;
+	created_at: number;
+	expires_at: number;
+}
+
+export async function listActiveSessions(): Promise<ActiveSession[]> {
+	try {
+		return await get<ActiveSession[]>("/api/auth/sessions");
+	} catch {
+		return [];
+	}
+}
+
+export async function revokeAllSessions(): Promise<{ revoked_count: number }> {
+	return req<{ revoked_count: number }>("DELETE", "/api/auth/sessions");
+}
+
+export async function changePassword(input: {
+	currentPassword: string;
+	newPassword: string;
+}): Promise<{ ok: true }> {
+	return post("/api/auth/password/change", input);
+}
+
+export async function requestPasswordReset(
+	email: string,
+): Promise<{ sent: true }> {
+	return post("/api/auth/password/reset/request", { email });
+}
+
+export async function completePasswordReset(input: {
+	token: string;
+	newPassword: string;
+}): Promise<{ ok: true }> {
+	return post("/api/auth/password/reset/complete", input);
+}
+
+export interface ApiKeySummary {
+	id: string;
+	prefix: string;
+	name: string;
+	scopes?: string | null;
+	expires_at?: number | null;
+	last_used_at?: number | null;
+	created_at: number;
+}
+
+export interface ApiKeyCreated extends ApiKeySummary {
+	/** Shown once on creation. Never returned again. */
+	key: string;
+}
+
+export async function listApiKeys(): Promise<ApiKeySummary[]> {
+	try {
+		return await get<ApiKeySummary[]>("/api/auth/api-keys");
+	} catch {
+		return [];
+	}
+}
+
+export async function createApiKey(input: {
+	name: string;
+	scopes?: string;
+	expiresAt?: number;
+}): Promise<ApiKeyCreated> {
+	return post<ApiKeyCreated>("/api/auth/api-keys", {
+		name: input.name,
+		scopes: input.scopes,
+		expires_at: input.expiresAt,
+	});
+}
+
+export async function revokeApiKey(
+	id: string,
+): Promise<{ revoked: boolean }> {
+	return req<{ revoked: boolean }>(
+		"DELETE",
+		`/api/auth/api-keys/${encodeURIComponent(id)}`,
+	);
+}
+
+async function req<T>(
+	method: "PUT" | "DELETE",
+	path: string,
+	body?: unknown,
+): Promise<T> {
+	const res = await fetch(`${getBaseUrl()}${path}`, {
+		method,
+		credentials: "include",
+		headers: body ? { "content-type": "application/json" } : undefined,
+		body: body ? JSON.stringify(body) : undefined,
+	});
+	if (!res.ok) {
+		const payload = await res.json().catch(() => ({}) as Record<string, unknown>);
+		const code = (payload?.error as string) ?? `HTTP_${res.status}`;
+		const message =
+			(payload?.message as string) ?? res.statusText ?? "request failed";
+		throw new ApiError(code, message, res.status);
+	}
+	return res.json() as Promise<T>;
+}
+
+export { ApiError };

package/src/lib/cn.ts

@@ -0,0 +1,7 @@
+"use client";
+
+import clsx, { type ClassValue } from "clsx";
+
+export function cn(...inputs: ClassValue[]): string {
+	return clsx(inputs);
+}

package/src/router/Router.tsx

@@ -0,0 +1,282 @@
+"use client";
+import React from "react";
+
+import {
+	type AnchorHTMLAttributes,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import { useAuth } from "../hooks/useAuth";
+import { RouterContext, RouterDepthContext } from "./context";
+import { matchRoutes, type MatchedRoute, type RouteSpec } from "./match";
+
+export interface RouterProps {
+	routes: RouteSpec[];
+	/** Render when no route matches. Default: a minimal 404 line. */
+	notFound?: ReactNode;
+	/** Initial pathname for SSR / testing. Default: window.location.pathname. */
+	initialUrl?: string;
+}
+
+/**
+ * Top-level SPA router. Subscribes to `popstate` + intercepted clicks
+ * from `<Link />`, matches the URL against the `routes` tree, and
+ * renders the matched chain with nested `<Outlet />` support.
+ *
+ * Place once near the root of the app:
+ *
+ * ```tsx
+ * <Router routes={[
+ *   { path: "/", component: HomePage },
+ *   {
+ *     path: "/dashboard",
+ *     component: DashboardLayout,
+ *     requireAuth: true,
+ *     children: [
+ *       { path: "/", component: DashboardHome },
+ *       { path: "/settings", component: SettingsPage },
+ *     ],
+ *   },
+ * ]} />
+ * ```
+ */
+export function Router({ routes, notFound, initialUrl }: RouterProps) {
+	const [url, setUrl] = useState<URL>(() => initialURL(initialUrl));
+
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		// Pick up the live URL on mount in case the SSR-painted snapshot
+		// is stale (hashchange, etc).
+		setUrl(new URL(window.location.href));
+		function onPop() {
+			setUrl(new URL(window.location.href));
+		}
+		window.addEventListener("popstate", onPop);
+		return () => window.removeEventListener("popstate", onPop);
+	}, []);
+
+	const navigate = useCallback(
+		(href: string, mode: "push" | "replace") => {
+			if (typeof window === "undefined") return;
+			const next = new URL(href, window.location.origin);
+			if (mode === "push") {
+				window.history.pushState({}, "", next.href);
+			} else {
+				window.history.replaceState({}, "", next.href);
+			}
+			setUrl(next);
+			// Scroll to top on push, matching what users expect from a
+			// SPA navigation. Replace skips this — usually a side-effect
+			// of in-place state (e.g., filter toggles).
+			if (mode === "push") {
+				window.scrollTo(0, 0);
+			}
+		},
+		[],
+	);
+
+	const chain = useMemo(
+		() => matchRoutes(routes, url.pathname),
+		[routes, url.pathname],
+	);
+
+	const params = useMemo(() => {
+		const merged: Record<string, string> = {};
+		for (const m of chain ?? []) Object.assign(merged, m.params);
+		return merged;
+	}, [chain]);
+
+	const query = useMemo(() => parseQuery(url.search), [url.search]);
+
+	const value = useMemo(
+		() => ({
+			pathname: url.pathname,
+			search: url.search,
+			hash: url.hash,
+			query,
+			params,
+			matches: chain ?? [],
+			push: (href: string) => navigate(href, "push"),
+			replace: (href: string) => navigate(href, "replace"),
+			back: () => {
+				if (typeof window !== "undefined") window.history.back();
+			},
+		}),
+		[url, query, params, chain, navigate],
+	);
+
+	return (
+		<RouterContext.Provider value={value}>
+			<RouterDepthContext.Provider value={0}>
+				{chain ? <RouteRenderer chain={chain} depth={0} /> : (notFound ?? <NotFound />)}
+			</RouterDepthContext.Provider>
+		</RouterContext.Provider>
+	);
+}
+
+function RouteRenderer({
+	chain,
+	depth,
+}: {
+	chain: MatchedRoute[];
+	depth: number;
+}) {
+	const m = chain[depth];
+	if (!m) return null;
+	const node = renderRoute(m.route);
+	return (
+		<RouterDepthContext.Provider value={depth}>
+			<AuthGate route={m.route}>{node}</AuthGate>
+		</RouterDepthContext.Provider>
+	);
+}
+
+function AuthGate({
+	route,
+	children,
+}: {
+	route: RouteSpec;
+	children: ReactNode;
+}) {
+	const { isSignedIn, isAdmin } = useAuth();
+	const needsAdmin = route.requireAuth === "admin";
+	const allowed = !route.requireAuth
+		? true
+		: needsAdmin
+			? isSignedIn && isAdmin
+			: isSignedIn;
+	// Effect must be unconditional to honor rules of hooks. The redirect
+	// only fires when both (a) the route is auth-gated and (b) the
+	// caller isn't allowed.
+	useEffect(() => {
+		if (!route.requireAuth || allowed) return;
+		if (typeof window === "undefined") return;
+		const signInUrl = route.signInUrl ?? "/sign-in";
+		const next = encodeURIComponent(
+			window.location.pathname + window.location.search,
+		);
+		window.location.assign(`${signInUrl}?next=${next}`);
+	}, [allowed, route.requireAuth, route.signInUrl]);
+	return allowed ? <>{children}</> : null;
+}
+
+function renderRoute(route: RouteSpec): ReactNode {
+	if (route.element !== undefined) return route.element;
+	if (route.component) {
+		const C = route.component;
+		return <C />;
+	}
+	return null;
+}
+
+/**
+ * Renders the next match in the chain — the page nested under the
+ * current layout. Without an `<Outlet />` a layout component's
+ * children never appear.
+ */
+export function Outlet() {
+	const router = useContext(RouterContext);
+	const depth = useContext(RouterDepthContext);
+	if (!router) return null;
+	if (depth + 1 >= router.matches.length) return null;
+	return <RouteRenderer chain={router.matches} depth={depth + 1} />;
+}
+
+export interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+	href: string;
+	/** Use replaceState instead of pushState (no history entry added). */
+	replace?: boolean;
+}
+
+/**
+ * SPA link. Renders a real `<a>` so middle-click / cmd-click / right-
+ * click → "open in new tab" all behave correctly. Plain left-click is
+ * intercepted and routed via the in-page Router.
+ */
+export function Link({
+	href,
+	replace,
+	onClick,
+	target,
+	rel,
+	children,
+	...rest
+}: LinkProps) {
+	const router = useContext(RouterContext);
+	function handleClick(e: React.MouseEvent<HTMLAnchorElement>) {
+		onClick?.(e);
+		if (e.defaultPrevented) return;
+		if (
+			e.button !== 0 ||
+			e.metaKey ||
+			e.ctrlKey ||
+			e.shiftKey ||
+			e.altKey ||
+			target === "_blank"
+		)
+			return;
+		if (!router) return;
+		// Only intercept same-origin relative paths.
+		try {
+			const u = new URL(href, window.location.origin);
+			if (u.origin !== window.location.origin) return;
+			e.preventDefault();
+			if (replace) router.replace(u.pathname + u.search + u.hash);
+			else router.push(u.pathname + u.search + u.hash);
+		} catch {
+			/* malformed href — let the browser handle it */
+		}
+	}
+	return (
+		<a
+			href={href}
+			target={target}
+			rel={target === "_blank" ? (rel ?? "noopener noreferrer") : rel}
+			onClick={handleClick}
+			{...rest}
+		>
+			{children}
+		</a>
+	);
+}
+
+function NotFound() {
+	return (
+		<div className="mx-auto max-w-md px-6 py-16 text-center">
+			<p className="text-4xl font-semibold tracking-tight text-[var(--pylon-ink,#0a0a0a)]">
+				404
+			</p>
+			<p className="mt-2 text-sm text-[var(--pylon-ink-2,#52525b)]">
+				Nothing here.
+			</p>
+		</div>
+	);
+}
+
+function initialURL(initialUrl?: string): URL {
+	if (initialUrl) {
+		try {
+			return new URL(initialUrl, "http://localhost");
+		} catch {
+			/* fall through */
+		}
+	}
+	if (typeof window !== "undefined") {
+		return new URL(window.location.href);
+	}
+	return new URL("http://localhost/");
+}
+
+function parseQuery(search: string): Record<string, string> {
+	const out: Record<string, string> = {};
+	if (!search) return out;
+	const params = new URLSearchParams(
+		search.startsWith("?") ? search.slice(1) : search,
+	);
+	for (const [k, v] of params.entries()) out[k] = v;
+	return out;
+}

package/src/router/context.ts

@@ -0,0 +1,25 @@
+"use client";
+
+import { createContext } from "react";
+import type { MatchedRoute } from "./match";
+
+export interface RouterContextValue {
+	pathname: string;
+	search: string;
+	hash: string;
+	query: Record<string, string>;
+	params: Record<string, string>;
+	/** The matched chain — root layout to leaf page. */
+	matches: MatchedRoute[];
+	push: (href: string) => void;
+	replace: (href: string) => void;
+	back: () => void;
+}
+
+export const RouterContext = createContext<RouterContextValue | null>(null);
+
+/**
+ * Used internally so a layout's `<Outlet />` knows which depth in the
+ * match chain to render next. Apps don't touch this directly.
+ */
+export const RouterDepthContext = createContext<number>(0);