@pylonsync/client 0.3.267

package/src/router/match.ts

@@ -0,0 +1,106 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+export interface RouteSpec {
+	/** Path pattern. `/users/:id`, `/posts/:slug?`, `/*` for catch-all. */
+	path: string;
+	/** Component rendered when matched. */
+	component?: () => ReactNode;
+	/** Explicit JSX alternative when you don't want a factory. */
+	element?: ReactNode;
+	/**
+	 * Require an authenticated session. `true` = signed in. `"admin"` =
+	 * signed in AND isAdmin. Custom predicates: render your own gate
+	 * inside the component instead.
+	 */
+	requireAuth?: boolean | "admin";
+	/** Where to send unauthenticated visitors. Default: `/sign-in`. */
+	signInUrl?: string;
+	/** Nested routes — parent renders `<Outlet />` where these appear. */
+	children?: RouteSpec[];
+}
+
+export interface MatchedRoute {
+	route: RouteSpec;
+	params: Record<string, string>;
+	/** Tail of the path that wasn't consumed by this route — used to
+	 *  match children. Empty string when the parent consumed the whole
+	 *  path. */
+	tail: string;
+}
+
+/**
+ * Walk the routes tree depth-first, picking the first leaf that
+ * fully consumes the pathname. Returns the full match chain
+ * (root → ... → leaf) so layouts can render via `<Outlet />`.
+ */
+export function matchRoutes(
+	routes: RouteSpec[],
+	pathname: string,
+): MatchedRoute[] | null {
+	const normalized = normalize(pathname);
+	for (const route of routes) {
+		const here = matchOne(route, normalized);
+		if (!here) continue;
+		if (route.children && route.children.length > 0) {
+			const childChain = matchRoutes(route.children, here.tail);
+			if (childChain) return [here, ...childChain];
+			// A parent with children must match a child too; otherwise
+			// we treat the parent as non-matching for this URL. This
+			// avoids rendering a layout with no page inside it.
+			continue;
+		}
+		// Leaf — require the tail to be empty so we don't half-match.
+		if (here.tail === "" || here.tail === "/") return [here];
+	}
+	return null;
+}
+
+function matchOne(route: RouteSpec, pathname: string): MatchedRoute | null {
+	const pattern = normalize(route.path);
+	const isCatchAll = pattern.endsWith("/*");
+	const patternSegments = pattern
+		.replace(/\/\*$/, "")
+		.split("/")
+		.filter(Boolean);
+	const pathSegments = pathname.split("/").filter(Boolean);
+
+	const params: Record<string, string> = {};
+	let i = 0;
+	for (; i < patternSegments.length; i++) {
+		const p = patternSegments[i]!;
+		const seg = pathSegments[i];
+		if (p.startsWith(":")) {
+			const optional = p.endsWith("?");
+			const name = p.slice(1).replace(/\?$/, "");
+			if (seg === undefined) {
+				if (optional) continue;
+				return null;
+			}
+			params[name] = decodeURIComponent(seg);
+		} else {
+			if (seg === undefined || seg !== p) return null;
+		}
+	}
+
+	if (isCatchAll) {
+		const rest = pathSegments.slice(i).join("/");
+		params["*"] = rest;
+		return { route, params, tail: "" };
+	}
+
+	const tail = "/" + pathSegments.slice(i).join("/");
+	// When children are declared we leave the tail for them; otherwise
+	// the leaf check above requires tail === "".
+	return { route, params, tail: tail === "/" ? "" : tail };
+}
+
+function normalize(p: string): string {
+	if (!p) return "/";
+	const trimmed = p.replace(/\/+$/, "");
+	if (!trimmed.startsWith("/")) return `/${trimmed}`;
+	return trimmed === "" ? "/" : trimmed;
+}
+
+export { normalize };

package/src/router/useRouter.ts

@@ -0,0 +1,40 @@
+"use client";
+
+import { useContext } from "react";
+import { RouterContext, type RouterContextValue } from "./context";
+
+/**
+ * Access the router from any descendant of `<Router />`. Returns a
+ * stable snapshot of the current URL plus `push` / `replace` / `back`
+ * helpers. Throws when used outside a `<Router />` — that's almost
+ * always a bug worth surfacing immediately.
+ *
+ * ```tsx
+ * const { pathname, params, push } = useRouter();
+ * useEffect(() => { if (!user) push("/sign-in"); }, [user]);
+ * ```
+ */
+export function useRouter(): RouterContextValue {
+	const ctx = useContext(RouterContext);
+	if (!ctx) {
+		throw new Error(
+			"[@pylonsync/client] useRouter() must be called inside a <Router /> tree",
+		);
+	}
+	return ctx;
+}
+
+/** Shorthand for `useRouter().params`. */
+export function useParams<T extends Record<string, string>>(): T {
+	return useRouter().params as T;
+}
+
+/** Shorthand for `useRouter().query`. */
+export function useSearchParams(): Record<string, string> {
+	return useRouter().query;
+}
+
+/** Shorthand for `useRouter().pathname`. */
+export function usePathname(): string {
+	return useRouter().pathname;
+}

package/src/theme.css

@@ -0,0 +1,30 @@
+/* @pylonsync/client — default theme tokens.
+   Override any of these CSS vars at the document root (or any ancestor
+   of the auth components) to restyle the entire suite. Tailwind classes
+   in the components reference these via var(--pylon-*) fallbacks so the
+   package works zero-config without Tailwind too. */
+:root {
+	--pylon-ink: #0a0a0a;
+	--pylon-ink-2: #52525b;
+	--pylon-ink-3: #71717a;
+	--pylon-paper: #ffffff;
+	--pylon-paper-2: #f4f4f5;
+	--pylon-rule: #e5e7eb;
+	--pylon-error-ink: #b91c1c;
+	--pylon-error-bg: #fef2f2;
+	--pylon-error-rule: #fecaca;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--pylon-ink: #fafafa;
+		--pylon-ink-2: #a1a1aa;
+		--pylon-ink-3: #71717a;
+		--pylon-paper: #0a0a0a;
+		--pylon-paper-2: #18181b;
+		--pylon-rule: #27272a;
+		--pylon-error-ink: #fca5a5;
+		--pylon-error-bg: #450a0a;
+		--pylon-error-rule: #7f1d1d;
+	}
+}

package/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [
+    "src"
+  ]
+}