@toyonix/web-kit 0.0.0-stage → 0.1.0

package/dist/react/DropdownMenu.js

@@ -0,0 +1,36 @@
+"use client";
+import { cx } from "./cx.js";
+import { jsx } from "react/jsx-runtime";
+import { DropdownMenu } from "radix-ui";
+//#region src/react/DropdownMenu.tsx
+const DropdownMenu$1 = DropdownMenu.Root;
+const DropdownMenuTrigger = DropdownMenu.Trigger;
+const DropdownMenuGroup = DropdownMenu.Group;
+function DropdownMenuContent({ className, sideOffset = 6, align = "start", ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Portal, { children: /* @__PURE__ */ jsx(DropdownMenu.Content, {
+		className: cx("tx-menu", className),
+		sideOffset,
+		align,
+		...props
+	}) });
+}
+function DropdownMenuItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Item, {
+		className: cx("tx-menu__item", className),
+		...props
+	});
+}
+function DropdownMenuLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Label, {
+		className: cx("tx-menu__label", className),
+		...props
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenu.Separator, {
+		className: cx("tx-menu__separator", className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu$1 as DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger };

package/dist/react/Table.d.ts

@@ -0,0 +1,5 @@
+import { ComponentProps } from "react";
+//#region src/react/Table.d.ts
+/** A table in a bordered, scrollable frame. Use normal <thead>/<tbody>/<tr>/<th>/<td> inside. */
+export declare function Table({ className, ...props }: ComponentProps<"table">): import("react").JSX.Element;
+//#endregion

package/dist/react/Table.js

@@ -0,0 +1,15 @@
+import { cx } from "./cx.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/Table.tsx
+/** A table in a bordered, scrollable frame. Use normal <thead>/<tbody>/<tr>/<th>/<td> inside. */
+function Table({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "tx-table-wrap",
+		children: /* @__PURE__ */ jsx("table", {
+			className: cx("tx-table", className),
+			...props
+		})
+	});
+}
+//#endregion
+export { Table };

package/dist/react/Tabs.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from "react";
+import { Tabs } from "radix-ui";
+//#region src/react/Tabs.d.ts
+declare const Tabs$1: import("react").ForwardRefExoticComponent<Tabs.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare function TabsList({ className, ...props }: ComponentProps<typeof Tabs.List>): import("react").JSX.Element;
+export declare function TabsTrigger({ className, ...props }: ComponentProps<typeof Tabs.Trigger>): import("react").JSX.Element;
+export declare function TabsContent({ className, ...props }: ComponentProps<typeof Tabs.Content>): import("react").JSX.Element;
+//#endregion
+export { Tabs$1 as Tabs };

package/dist/react/Tabs.js

@@ -0,0 +1,26 @@
+"use client";
+import { cx } from "./cx.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "radix-ui";
+//#region src/react/Tabs.tsx
+const Tabs$1 = Tabs.Root;
+function TabsList({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.List, {
+		className: cx("tx-tabs__list", className),
+		...props
+	});
+}
+function TabsTrigger({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Trigger, {
+		className: cx("tx-tabs__trigger", className),
+		...props
+	});
+}
+function TabsContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Tabs.Content, {
+		className: cx("tx-tabs__content", className),
+		...props
+	});
+}
+//#endregion
+export { Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/react/ThemeScript.d.ts

@@ -0,0 +1,9 @@
+//#region src/react/ThemeScript.d.ts
+/**
+ * Put in <head> of the root layout. Sets html[data-theme] before first paint so there's no
+ * flash of the wrong theme. Pair it with <html suppressHydrationWarning>.
+ */
+export declare function ThemeScript({ nonce }: {
+  nonce?: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/react/ThemeScript.js

@@ -0,0 +1,15 @@
+import { THEME_SCRIPT } from "../theme.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/ThemeScript.tsx
+/**
+* Put in <head> of the root layout. Sets html[data-theme] before first paint so there's no
+* flash of the wrong theme. Pair it with <html suppressHydrationWarning>.
+*/
+function ThemeScript({ nonce }) {
+	return /* @__PURE__ */ jsx("script", {
+		nonce,
+		dangerouslySetInnerHTML: { __html: THEME_SCRIPT }
+	});
+}
+//#endregion
+export { ThemeScript };

package/dist/react/ThemeToggle.d.ts

@@ -0,0 +1,5 @@
+//#region src/react/ThemeToggle.d.ts
+export declare function ThemeToggle({ className }: {
+  className?: string;
+}): import("react").JSX.Element;
+//#endregion

package/dist/react/ThemeToggle.js

@@ -0,0 +1,22 @@
+"use client";
+import { cx } from "./cx.js";
+import { useTheme } from "./use-theme.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/ThemeToggle.tsx
+function ThemeToggle({ className }) {
+	const { resolved, toggle } = useTheme();
+	const next = resolved === "dark" ? "light" : "dark";
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		className: cx("tx-icon-btn", className),
+		onClick: toggle,
+		"aria-label": `Switch to ${next} theme`,
+		title: `Switch to ${next} theme`,
+		children: /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: "◐"
+		})
+	});
+}
+//#endregion
+export { ThemeToggle };

package/dist/react/Tooltip.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+//#region src/react/Tooltip.d.ts
+export interface TooltipProps {
+  /** The tooltip text. */
+  content: ReactNode;
+  /** The element the tooltip describes. Must accept a ref (a DOM element or forwardRef component). */
+  children: ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  delayDuration?: number;
+}
+/** A tooltip. Self-contained: no provider needed. */
+export declare function Tooltip({ content, children, side, delayDuration }: TooltipProps): import("react").JSX.Element;
+//#endregion

package/dist/react/Tooltip.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Tooltip } from "radix-ui";
+//#region src/react/Tooltip.tsx
+/** A tooltip. Self-contained: no provider needed. */
+function Tooltip$1({ content, children, side = "top", delayDuration = 300 }) {
+	return /* @__PURE__ */ jsx(Tooltip.Provider, {
+		delayDuration,
+		children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [/* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children
+		}), /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsx(Tooltip.Content, {
+			className: "tx-tooltip",
+			side,
+			sideOffset: 6,
+			children: content
+		}) })] })
+	});
+}
+//#endregion
+export { Tooltip$1 as Tooltip };

package/dist/react/cx.d.ts

@@ -0,0 +1,4 @@
+//#region src/react/cx.d.ts
+/** Joins class names, skipping falsy values. */
+export declare function cx(...classes: Array<string | false | null | undefined>): string;
+//#endregion

package/dist/react/cx.js

@@ -0,0 +1,7 @@
+//#region src/react/cx.ts
+/** Joins class names, skipping falsy values. */
+function cx(...classes) {
+	return classes.filter(Boolean).join(" ");
+}
+//#endregion
+export { cx };

package/dist/react/form.d.ts

@@ -0,0 +1,19 @@
+import { ComponentProps, ReactNode } from "react";
+//#region src/react/form.d.ts
+export declare function Form({ className, ...props }: ComponentProps<"form">): import("react").JSX.Element;
+/** A labelled field: the label wraps the control, so no id wiring is needed. */
+export declare function Field({ label, hint, className, children, ...props }: ComponentProps<"label"> & {
+  label: ReactNode;
+  hint?: ReactNode;
+}): import("react").JSX.Element;
+export declare function Input({ className, ...props }: ComponentProps<"input">): import("react").JSX.Element;
+export declare function Select({ className, ...props }: ComponentProps<"select">): import("react").JSX.Element;
+export declare function Textarea({ className, ...props }: ComponentProps<"textarea">): import("react").JSX.Element;
+type ChoiceProps = Omit<ComponentProps<"input">, "type"> & {
+  label: ReactNode;
+};
+export declare function Checkbox({ label, className, ...props }: ChoiceProps): import("react").JSX.Element;
+export declare function Radio({ label, className, ...props }: ChoiceProps): import("react").JSX.Element;
+export declare function Switch({ label, className, ...props }: ChoiceProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/react/form.js

@@ -0,0 +1,76 @@
+import { cx } from "./cx.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/form.tsx
+function Form({ className, ...props }) {
+	return /* @__PURE__ */ jsx("form", {
+		className: cx("tx-form", className),
+		...props
+	});
+}
+/** A labelled field: the label wraps the control, so no id wiring is needed. */
+function Field({ label, hint, className, children, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("tx-field", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "tx-label",
+				children: label
+			}),
+			children,
+			hint ? /* @__PURE__ */ jsx("span", {
+				className: "tx-hint",
+				children: hint
+			}) : null
+		]
+	});
+}
+function Input({ className, ...props }) {
+	return /* @__PURE__ */ jsx("input", {
+		className: cx("tx-input", className),
+		...props
+	});
+}
+function Select({ className, ...props }) {
+	return /* @__PURE__ */ jsx("select", {
+		className: cx("tx-select", className),
+		...props
+	});
+}
+function Textarea({ className, ...props }) {
+	return /* @__PURE__ */ jsx("textarea", {
+		className: cx("tx-textarea", className),
+		...props
+	});
+}
+function Checkbox({ label, className, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("tx-check", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			...props
+		}), label]
+	});
+}
+function Radio({ label, className, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("tx-check", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "radio",
+			...props
+		}), label]
+	});
+}
+function Switch({ label, className, ...props }) {
+	return /* @__PURE__ */ jsxs("label", {
+		className: cx("tx-check", className),
+		children: [/* @__PURE__ */ jsx("input", {
+			type: "checkbox",
+			role: "switch",
+			className: "tx-switch",
+			...props
+		}), label]
+	});
+}
+//#endregion
+export { Checkbox, Field, Form, Input, Radio, Select, Switch, Textarea };

package/dist/react/index.d.ts

@@ -0,0 +1,21 @@
+import { cx } from "./cx.js";
+import { AppShell, AppShellProps } from "./AppShell.js";
+import { AppLink, AppLinkProps } from "./AppLink.js";
+import { ThemeScript } from "./ThemeScript.js";
+import { ThemeToggle } from "./ThemeToggle.js";
+import { ThemeState, useTheme } from "./use-theme.js";
+import { useRegistry } from "./use-registry.js";
+import { Container, Row, Section, Stack } from "./layout.js";
+import { Display, Eyebrow, Lead, Mark, Prose, SectionLabel } from "./typography.js";
+import { Button, ButtonProps, ButtonRow, ButtonVariant, LinkButton, LinkButtonProps } from "./Button.js";
+import { Card, CardBody, CardCta, CardGrid, CardMeta, CardProps, CardTitle, CardTop, LinkCard } from "./Card.js";
+import { Badge, BadgeTone, Badges, Tag, Tags } from "./Badge.js";
+import { Alert, AlertTone } from "./Alert.js";
+import { Checkbox, Field, Form, Input, Radio, Select, Switch, Textarea } from "./form.js";
+import { Table } from "./Table.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { Dialog, DialogClose, DialogContent, DialogContentProps, DialogTrigger } from "./Dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./DropdownMenu.js";
+import { Tooltip, TooltipProps } from "./Tooltip.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
+export { Alert, type AlertTone, AppLink, type AppLinkProps, AppShell, type AppShellProps, Badge, type BadgeTone, Badges, Button, type ButtonProps, ButtonRow, type ButtonVariant, Card, CardBody, CardCta, CardGrid, CardMeta, type CardProps, CardTitle, CardTop, Checkbox, CodeBlock, Container, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogTrigger, Display, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Eyebrow, Field, Form, Input, Lead, LinkButton, type LinkButtonProps, LinkCard, Mark, Prose, Radio, Row, Section, SectionLabel, Select, Stack, Switch, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Tags, Textarea, ThemeScript, type ThemeState, ThemeToggle, Tooltip, type TooltipProps, cx, useRegistry, useTheme };

package/dist/react/index.js

@@ -0,0 +1,21 @@
+import { cx } from "./cx.js";
+import { useTheme } from "./use-theme.js";
+import { ThemeToggle } from "./ThemeToggle.js";
+import { useRegistry } from "./use-registry.js";
+import { AppShell } from "./AppShell.js";
+import { AppLink } from "./AppLink.js";
+import { ThemeScript } from "./ThemeScript.js";
+import { Container, Row, Section, Stack } from "./layout.js";
+import { Display, Eyebrow, Lead, Mark, Prose, SectionLabel } from "./typography.js";
+import { Button, ButtonRow, LinkButton } from "./Button.js";
+import { Card, CardBody, CardCta, CardGrid, CardMeta, CardTitle, CardTop, LinkCard } from "./Card.js";
+import { Badge, Badges, Tag, Tags } from "./Badge.js";
+import { Alert } from "./Alert.js";
+import { Checkbox, Field, Form, Input, Radio, Select, Switch, Textarea } from "./form.js";
+import { Table } from "./Table.js";
+import { CodeBlock } from "./CodeBlock.js";
+import { Dialog, DialogClose, DialogContent, DialogTrigger } from "./Dialog.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./DropdownMenu.js";
+import { Tooltip } from "./Tooltip.js";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs.js";
+export { Alert, AppLink, AppShell, Badge, Badges, Button, ButtonRow, Card, CardBody, CardCta, CardGrid, CardMeta, CardTitle, CardTop, Checkbox, CodeBlock, Container, Dialog, DialogClose, DialogContent, DialogTrigger, Display, DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, Eyebrow, Field, Form, Input, Lead, LinkButton, LinkCard, Mark, Prose, Radio, Row, Section, SectionLabel, Select, Stack, Switch, Table, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Tags, Textarea, ThemeScript, ThemeToggle, Tooltip, cx, useRegistry, useTheme };

package/dist/react/layout.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from "react";
+//#region src/react/layout.d.ts
+export declare function Container({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function Section({ className, ...props }: ComponentProps<"section">): import("react").JSX.Element;
+export declare function Stack({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+export declare function Row({ className, ...props }: ComponentProps<"div">): import("react").JSX.Element;
+//#endregion

package/dist/react/layout.js

@@ -0,0 +1,29 @@
+import { cx } from "./cx.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/layout.tsx
+function Container({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("tx-container", className),
+		...props
+	});
+}
+function Section({ className, ...props }) {
+	return /* @__PURE__ */ jsx("section", {
+		className: cx("tx-section", className),
+		...props
+	});
+}
+function Stack({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("tx-stack", className),
+		...props
+	});
+}
+function Row({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cx("tx-row", className),
+		...props
+	});
+}
+//#endregion
+export { Container, Row, Section, Stack };

package/dist/react/typography.d.ts

@@ -0,0 +1,23 @@
+import { ComponentProps, ComponentPropsWithoutRef } from "react";
+//#region src/react/typography.d.ts
+type HeadingLevel = "h1" | "h2" | "h3";
+/** Big serif headline. Wrap words in <em> for the marker highlight. */
+export declare function Display({ as: Tag, className, ...props }: ComponentProps<"h1"> & {
+  as?: HeadingLevel;
+}): import("react").JSX.Element;
+/** Marker highlight for any inline text. */
+export declare function Mark({ className, ...props }: ComponentProps<"em">): import("react").JSX.Element;
+export declare function Lead({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** Small mono uppercase line above a heading. */
+export declare function Eyebrow({ className, ...props }: ComponentProps<"p">): import("react").JSX.Element;
+/** Tilted serif tag that labels a page section. */
+export declare function SectionLabel({ as: Tag, className, ...props }: ComponentProps<"h2"> & {
+  as?: HeadingLevel;
+}): import("react").JSX.Element;
+/** Article typography (MDX output goes inside). `dropcap` styles the first paragraph's letter. */
+export declare function Prose({ as: Tag, dropcap, className, ...props }: ComponentPropsWithoutRef<"article"> & {
+  as?: "article" | "div" | "section";
+  dropcap?: boolean;
+}): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/react/typography.js

@@ -0,0 +1,46 @@
+import { cx } from "./cx.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/react/typography.tsx
+/** Big serif headline. Wrap words in <em> for the marker highlight. */
+function Display({ as: Tag = "h1", className, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("tx-display", className),
+		...props
+	});
+}
+/** Marker highlight for any inline text. */
+function Mark({ className, ...props }) {
+	return /* @__PURE__ */ jsx("em", {
+		className: cx("tx-mark", className),
+		...props
+	});
+}
+function Lead({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cx("tx-lead", className),
+		...props
+	});
+}
+/** Small mono uppercase line above a heading. */
+function Eyebrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("p", {
+		className: cx("tx-eyebrow", className),
+		...props
+	});
+}
+/** Tilted serif tag that labels a page section. */
+function SectionLabel({ as: Tag = "h2", className, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("tx-section-label", className),
+		...props
+	});
+}
+/** Article typography (MDX output goes inside). `dropcap` styles the first paragraph's letter. */
+function Prose({ as: Tag = "article", dropcap = false, className, ...props }) {
+	return /* @__PURE__ */ jsx(Tag, {
+		className: cx("tx-prose", dropcap && "tx-prose--dropcap", className),
+		...props
+	});
+}
+//#endregion
+export { Display, Eyebrow, Lead, Mark, Prose, SectionLabel };

package/dist/react/use-registry.d.ts

@@ -0,0 +1,9 @@
+import { Registry } from "../registry/index.js";
+//#region src/react/use-registry.d.ts
+/**
+ * The app registry. Starts from the build-time `snapshot` (so static HTML has a full nav), then
+ * uses the copy cached for this browser session, or fetches /registry.json once per session.
+ * In local dev it falls back to the production registry.
+ */
+export declare function useRegistry(snapshot?: Registry | null): Registry | null;
+//#endregion

package/dist/react/use-registry.js

@@ -0,0 +1,41 @@
+"use client";
+import { storage } from "../storage/index.js";
+import { REGISTRY_PATH, REGISTRY_URL, fetchRegistry, isNewerRegistry, parseRegistry } from "../registry/index.js";
+import { useEffect, useState } from "react";
+//#region src/react/use-registry.ts
+const CACHE_KEY = "registry";
+function isLocalDev() {
+	const host = window.location.hostname;
+	return host === "localhost" || host === "127.0.0.1" || host === "[::1]";
+}
+/**
+* The app registry. Starts from the build-time `snapshot` (so static HTML has a full nav), then
+* uses the copy cached for this browser session, or fetches /registry.json once per session.
+* In local dev it falls back to the production registry.
+*/
+function useRegistry(snapshot) {
+	const [registry, setRegistry] = useState(snapshot ?? null);
+	useEffect(() => {
+		const adopt = (candidate) => {
+			if (candidate) setRegistry((current) => isNewerRegistry(candidate, current) ? candidate : current);
+		};
+		const cached = parseRegistry(storage.session.get(CACHE_KEY));
+		if (cached) {
+			adopt(cached);
+			return;
+		}
+		const controller = new AbortController();
+		(async () => {
+			let fresh = await fetchRegistry(REGISTRY_PATH, { signal: controller.signal });
+			if (!fresh && isLocalDev() && !controller.signal.aborted) fresh = await fetchRegistry(REGISTRY_URL, { signal: controller.signal });
+			if (fresh && !controller.signal.aborted) {
+				storage.session.set(CACHE_KEY, fresh);
+				adopt(fresh);
+			}
+		})();
+		return () => controller.abort();
+	}, []);
+	return registry;
+}
+//#endregion
+export { useRegistry };

package/dist/react/use-theme.d.ts

@@ -0,0 +1,18 @@
+import { ResolvedTheme, ThemePreference } from "../theme.js";
+//#region src/react/use-theme.d.ts
+export interface ThemeState {
+  /** What the user picked. Shared by every toyonix app. */
+  preference: ThemePreference;
+  /** What's actually shown. */
+  resolved: ResolvedTheme;
+  setPreference: (preference: ThemePreference) => void;
+  /** Switches to the opposite of what's shown (an explicit light/dark choice). */
+  toggle: () => void;
+}
+/**
+ * The theme preference, synced across tabs and across toyonix apps, applied to html[data-theme].
+ * During static rendering and hydration it reports "system"/"light"; the real value follows
+ * immediately after (ThemeScript has already painted the right theme).
+ */
+export declare function useTheme(): ThemeState;
+//#endregion

package/dist/react/use-theme.js

@@ -0,0 +1,46 @@
+"use client";
+import { applyResolvedTheme, resolveTheme } from "../theme.js";
+import { storage } from "../storage/index.js";
+import { useCallback, useEffect, useSyncExternalStore } from "react";
+//#region src/react/use-theme.ts
+const DARK_QUERY = "(prefers-color-scheme: dark)";
+function subscribePreference(listener) {
+	return storage.shared.subscribe("theme", listener);
+}
+function getPreference() {
+	return storage.shared.get("theme") ?? "system";
+}
+function subscribeSystem(listener) {
+	if (typeof window === "undefined" || !window.matchMedia) return () => {};
+	const query = window.matchMedia(DARK_QUERY);
+	query.addEventListener("change", listener);
+	return () => query.removeEventListener("change", listener);
+}
+function getSystemDark() {
+	return typeof window !== "undefined" && !!window.matchMedia?.(DARK_QUERY).matches;
+}
+/**
+* The theme preference, synced across tabs and across toyonix apps, applied to html[data-theme].
+* During static rendering and hydration it reports "system"/"light"; the real value follows
+* immediately after (ThemeScript has already painted the right theme).
+*/
+function useTheme() {
+	const preference = useSyncExternalStore(subscribePreference, getPreference, () => "system");
+	const systemDark = useSyncExternalStore(subscribeSystem, getSystemDark, () => false);
+	const resolved = resolveTheme(preference, systemDark);
+	useEffect(() => {
+		applyResolvedTheme(resolved);
+	}, [resolved]);
+	return {
+		preference,
+		resolved,
+		setPreference: useCallback((next) => {
+			storage.shared.set("theme", next);
+		}, []),
+		toggle: useCallback(() => {
+			storage.shared.set("theme", resolveTheme(getPreference(), getSystemDark()) === "dark" ? "light" : "dark");
+		}, [])
+	};
+}
+//#endregion
+export { useTheme };

package/dist/registry/build.d.ts

@@ -0,0 +1,28 @@
+import { AppStatus, Registry } from "./index.js";
+//#region src/registry/build.d.ts
+export declare const SITE_TOPIC = "toyonix-site";
+export interface BuildRegistryOptions {
+  /** GitHub user or org that owns the sites, e.g. "ToYoNiX". */
+  owner: string;
+  /** Repo topic that marks a site. Defaults to "toyonix-site". */
+  topic?: string;
+  /** GitHub token (GITHUB_TOKEN in Actions). Optional, but unauthenticated calls are rate-limited. */
+  token?: string;
+  /** Injected for tests. */
+  fetch?: typeof fetch;
+  /** Injected for tests. Defaults to the current time. */
+  now?: Date;
+}
+/** The optional "toyonix" field in a site's package.json. */
+export interface SiteMetadata {
+  title?: string;
+  description?: string;
+  nav?: boolean;
+  order?: number;
+  status?: AppStatus;
+}
+export declare class RegistryBuildError extends Error {
+  name: string;
+}
+export declare function buildRegistry(options: BuildRegistryOptions): Promise<Registry>;
+//#endregion