@pyreon/zero 0.22.0 → 0.24.0

package/lib/index.js

@@ -1,8 +1,11 @@
-import { createContext, createRef, onMount, onUnmount, splitProps } from "@pyreon/core";
-import { jsx, jsxs } from "@pyreon/core/jsx-runtime";
-import { effect, signal } from "@pyreon/reactivity";
-import { useRouter } from "@pyreon/router";
-import { useHead } from "@pyreon/head";
+import { Image, createImage, useImage } from "./image.js";
+import { Link, createLink, prefetchRoute, useLink } from "./link.js";
+import { Script, createScript, useScript } from "./script.js";
+import { buildLocalePath, extractLocaleFromPath, setLocale, useLocale } from "./i18n-routing.js";
+import { Meta, buildMetaTags } from "./meta.js";
+import { ThemeToggle, initTheme, resolvedTheme, setSSRThemeDefault, setTheme, theme, themeScript, toggleTheme } from "./theme.js";
+import { splitProps } from "@pyreon/core";
+import { jsx } from "@pyreon/core/jsx-runtime";
 
 //#region src/icon.tsx
 const FILL_STYLE = "display:block;width:100%;height:100%";
@@ -96,1086 +99,6 @@ function createNamedIcon(registry, options = {}) {
 	};
 }
 
-//#endregion
-//#region src/utils/use-intersection-observer.ts
-/**
-* Observes an element and calls `onIntersect` once it enters the viewport.
-* Automatically disconnects after the first intersection.
-*
-* @param getElement - Getter for the target element (may be undefined before mount).
-* @param onIntersect - Callback fired when the element becomes visible.
-* @param rootMargin - IntersectionObserver rootMargin. Default: "200px".
-*/
-function useIntersectionObserver(getElement, onIntersect, rootMargin = "200px") {
-	onMount(() => {
-		const el = getElement();
-		if (!el) return void 0;
-		const observer = new IntersectionObserver((entries) => {
-			for (const entry of entries) if (entry.isIntersecting) {
-				onIntersect();
-				observer.disconnect();
-			}
-		}, { rootMargin });
-		observer.observe(el);
-		onUnmount(() => observer.disconnect());
-	});
-}
-
-//#endregion
-//#region src/image.tsx
-/**
-* Composable that provides all image optimization behavior — lazy loading,
-* srcset/sizes resolution, format selection, blur-placeholder state,
-* load tracking.
-*
-* Use this for full control when `createImage` is too opinionated about
-* the surrounding markup (e.g. custom container layouts, non-`<div>`
-* wrappers, additional overlay elements).
-*
-* @example
-* function MyImage(props: ImageProps) {
-*   const img = useImage(props)
-*   return (
-*     <figure ref={img.containerRef} style={img.containerStyle}>
-*       <img
-*         src={img.src}
-*         srcSet={img.srcSet}
-*         sizes={img.sizes}
-*         alt={props.alt}
-*         loading={img.loading}
-*         onLoad={img.handleLoad}
-*         style={img.imageStyle}
-*       />
-*       <figcaption>{props.alt}</figcaption>
-*     </figure>
-*   )
-* }
-*/
-function useImage(props) {
-	const isEager = props.priority || props.loading === "eager";
-	const loaded = signal(isEager);
-	const inView = signal(isEager);
-	const containerRef = createRef();
-	const resolvedSrcset = typeof props.srcset === "string" ? props.srcset : props.srcset?.map((s) => `${s.src} ${s.width}w`).join(", ");
-	const sizes = props.sizes ?? "100vw";
-	const fit = props.fit ?? "cover";
-	const hasFormats = !!(props.formats && props.formats.length > 0);
-	const aspectRatio = `${props.width} / ${props.height}`;
-	if (!isEager) useIntersectionObserver(() => containerRef.current ?? void 0, () => inView.set(true));
-	const containerStyle = [
-		"position: relative",
-		"overflow: hidden",
-		`aspect-ratio: ${aspectRatio}`,
-		`max-width: ${props.width}px`,
-		"width: 100%",
-		props.style
-	].filter(Boolean).join("; ");
-	const imageStyle = () => [
-		"display: block",
-		"width: 100%",
-		"height: 100%",
-		`object-fit: ${fit}`,
-		"transition: opacity 0.3s ease",
-		props.placeholder && !loaded() ? "opacity: 0" : "opacity: 1"
-	].join("; ");
-	const placeholderStyle = () => [
-		"position: absolute",
-		"inset: 0",
-		"width: 100%",
-		"height: 100%",
-		"object-fit: cover",
-		"filter: blur(20px)",
-		"transform: scale(1.1)",
-		"transition: opacity 0.4s ease",
-		loaded() ? "opacity: 0; pointer-events: none" : "opacity: 1"
-	].join("; ");
-	return {
-		containerRef,
-		inView,
-		loaded,
-		src: () => inView() ? props.src : "",
-		srcSet: () => !hasFormats && inView() && resolvedSrcset ? resolvedSrcset : "",
-		sizes: resolvedSrcset ? sizes : void 0,
-		aspectRatio,
-		containerStyle,
-		imageStyle,
-		placeholderStyle,
-		loading: isEager ? "eager" : "lazy",
-		fetchPriority: props.priority ? "high" : void 0,
-		handleLoad: () => loaded.set(true),
-		formats: props.formats,
-		hasFormats
-	};
-}
-/**
-* Higher-order component that wraps any component with image optimization.
-*
-* The wrapped component receives {@link ImageRenderProps} with the pre-rendered
-* `image` JSX (bare `<img>` OR `<picture>` tree depending on formats), the
-* pre-rendered `placeholder` JSX, and the container ref + styles. Consumers
-* compose those pieces with whatever wrapper element / layout they want.
-*
-* @example
-* // Custom figure-based image with caption
-* const FigureImage = createImage((props) => (
-*   <figure ref={props.containerRef} class={props.class} style={props.containerStyle}>
-*     {props.placeholder}
-*     {props.image}
-*     <figcaption>Caption goes here</figcaption>
-*   </figure>
-* ))
-*
-* // Usage — identical to default <Image>
-* <FigureImage src="/hero.jpg" alt="Hero" width={1200} height={630} />
-*/
-function createImage(Component) {
-	return function WrappedImage(props) {
-		if (props.raw) return /* @__PURE__ */ jsx("img", {
-			src: props.src,
-			alt: props.alt,
-			width: props.width,
-			height: props.height,
-			class: props.class,
-			style: props.style,
-			decoding: props.decoding ?? "async",
-			loading: props.loading ?? "lazy",
-			fetchPriority: props.priority ? "high" : void 0
-		});
-		const img = useImage(props);
-		const imgEl = /* @__PURE__ */ jsx("img", {
-			src: img.src,
-			srcSet: img.srcSet,
-			sizes: img.sizes,
-			alt: props.alt,
-			width: props.width,
-			height: props.height,
-			loading: img.loading,
-			decoding: props.decoding ?? "async",
-			fetchPriority: img.fetchPriority,
-			onLoad: img.handleLoad,
-			style: img.imageStyle
-		});
-		const placeholderEl = props.placeholder ? /* @__PURE__ */ jsx("img", {
-			src: props.placeholder,
-			alt: "",
-			"aria-hidden": "true",
-			loading: "eager",
-			style: img.placeholderStyle
-		}) : null;
-		const imageEl = img.hasFormats ? /* @__PURE__ */ jsxs("picture", { children: [img.formats?.map((fmt) => /* @__PURE__ */ jsx("source", {
-			type: fmt.type,
-			srcSet: () => img.inView() ? fmt.srcset ?? "" : "",
-			sizes: img.sizes
-		})), imgEl] }) : imgEl;
-		return /* @__PURE__ */ jsx(Component, {
-			containerRef: img.containerRef,
-			class: props.class,
-			containerStyle: img.containerStyle,
-			placeholder: placeholderEl,
-			image: imageEl
-		});
-	};
-}
-/**
-* Default optimized image component with lazy loading, responsive srcset,
-* `<picture>` multi-format support, and blur-up placeholders.
-*
-* @example
-* // With imagePlugin — spread the import directly
-* import hero from "./hero.jpg?optimize"
-* <Image {...hero} alt="Hero" priority />
-*
-* @example
-* // Manual usage
-* <Image src="/hero.jpg" alt="Hero" width={1200} height={630} />
-*/
-const Image = createImage((props) => /* @__PURE__ */ jsxs("div", {
-	ref: props.containerRef,
-	class: props.class,
-	style: props.containerStyle,
-	children: [props.placeholder, props.image]
-}));
-
-//#endregion
-//#region src/link.tsx
-const MAX_PREFETCH_CACHE = 200;
-const prefetched = /* @__PURE__ */ new Map();
-function doPrefetch(href) {
-	if (typeof document === "undefined") return;
-	if (prefetched.has(href)) return;
-	if (prefetched.size >= MAX_PREFETCH_CACHE) {
-		const firstEntry = prefetched.entries().next().value;
-		if (firstEntry) {
-			const [oldestHref, oldestLinks] = firstEntry;
-			for (const link of oldestLinks) link.remove();
-			prefetched.delete(oldestHref);
-		}
-	}
-	const injected = [];
-	const docLink = document.createElement("link");
-	docLink.rel = "prefetch";
-	docLink.href = href;
-	docLink.as = "document";
-	document.head.appendChild(docLink);
-	injected.push(docLink);
-	try {
-		const chunkHint = document.createElement("link");
-		chunkHint.rel = "modulepreload";
-		chunkHint.href = href;
-		document.head.appendChild(chunkHint);
-		injected.push(chunkHint);
-	} catch {}
-	prefetched.set(href, injected);
-}
-/**
-* Prefetch a route's JS chunk by injecting `<link rel="prefetch">` into the
-* document head. Deduplicates — calling with the same href twice is a no-op.
-*
-* @example
-* prefetchRoute('/about')
-* prefetchRoute('/dashboard')
-*/
-function prefetchRoute(href) {
-	doPrefetch(href);
-}
-/**
-* Composable that provides all link behavior — navigation, prefetching,
-* active state, and viewport observation.
-*
-* Use this for full control when `createLink` is too opinionated.
-*
-* @example
-* function MyLink(props: LinkProps) {
-*   const link = useLink(props)
-*   return (
-*     <button ref={link.ref} class={link.classes()} onClick={link.handleClick}>
-*       {props.children}
-*     </button>
-*   )
-* }
-*/
-function useLink(props) {
-	const router = useRouter();
-	const elementRef = createRef();
-	const strategy = props.prefetch ?? "hover";
-	function handleClick(e) {
-		if (props.onClick) props.onClick(e);
-		if (e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || props.external || !props.href) return;
-		e.preventDefault();
-		router.push(props.href);
-	}
-	function handleMouseEnter() {
-		if (strategy === "hover") doPrefetch(props.href);
-	}
-	function handleTouchStart() {
-		if (strategy === "hover" || strategy === "viewport") doPrefetch(props.href);
-	}
-	if (strategy === "viewport") useIntersectionObserver(() => elementRef.current ?? void 0, () => doPrefetch(props.href));
-	const isActive = () => {
-		const currentPath = router.currentRoute()?.path;
-		if (!currentPath || !props.href) return false;
-		if (props.href === "/") return currentPath === "/";
-		return currentPath.startsWith(props.href);
-	};
-	const isExactActive = () => {
-		const currentPath = router.currentRoute()?.path;
-		if (!currentPath) return false;
-		return currentPath === props.href;
-	};
-	const classes = () => {
-		const cls = [];
-		if (props.class) cls.push(props.class);
-		if (props.activeClass && isActive()) cls.push(props.activeClass);
-		if (props.exactActiveClass && isExactActive()) cls.push(props.exactActiveClass);
-		return cls.join(" ");
-	};
-	return {
-		ref: elementRef,
-		handleClick,
-		handleMouseEnter,
-		handleTouchStart,
-		isActive,
-		isExactActive,
-		classes
-	};
-}
-/**
-* Higher-order component that wraps any component with link behavior.
-*
-* The wrapped component receives {@link LinkRenderProps} with all handlers,
-* active state, and accessibility attributes pre-wired.
-*
-* @example
-* // Custom button link
-* const ButtonLink = createLink((props) => (
-*   <button
-*     ref={props.ref}
-*     class={props.class}
-*     onClick={props.onClick}
-*     onMouseEnter={props.onMouseEnter}
-*   >
-*     {props.children}
-*   </button>
-* ))
-*
-* // Custom styled component
-* const CardLink = createLink((props) => (
-*   <div
-*     ref={props.ref}
-*     class={`card ${props.isActive() ? "card--active" : ""}`}
-*     onClick={props.onClick}
-*     onMouseEnter={props.onMouseEnter}
-*   >
-*     {props.children}
-*   </div>
-* ))
-*
-* // Usage
-* <ButtonLink href="/about">About</ButtonLink>
-* <CardLink href="/posts" prefetch="viewport">Posts</CardLink>
-*/
-function createLink(Component) {
-	return function WrappedLink(props) {
-		const link = useLink(props);
-		return /* @__PURE__ */ jsx(Component, {
-			href: props.href,
-			ref: link.ref,
-			onClick: link.handleClick,
-			onMouseEnter: link.handleMouseEnter,
-			onTouchStart: link.handleTouchStart,
-			isActive: link.isActive,
-			isExactActive: link.isExactActive,
-			class: link.classes,
-			...props.style ? { style: props.style } : {},
-			...props.external ? {
-				target: "_blank",
-				rel: "noopener noreferrer"
-			} : {},
-			...props["aria-label"] ? { "aria-label": props["aria-label"] } : {},
-			children: props.children
-		});
-	};
-}
-/**
-* Default navigation link built on an `<a>` tag.
-*
-* @example
-* <Link href="/about" prefetch="viewport">About</Link>
-* <Link href="/posts" activeClass="nav-active">Posts</Link>
-*/
-const Link = createLink((props) => /* @__PURE__ */ jsx("a", {
-	ref: props.ref,
-	href: props.href,
-	...props.class ? { class: props.class } : {},
-	...props.style ? { style: props.style } : {},
-	...props.target ? { target: props.target } : {},
-	...props.rel ? { rel: props.rel } : {},
-	...props["aria-label"] ? { "aria-label": props["aria-label"] } : {},
-	...props.isExactActive() ? { "aria-current": "page" } : {},
-	onClick: props.onClick,
-	onMouseEnter: props.onMouseEnter,
-	onTouchStart: props.onTouchStart,
-	children: props.children
-}));
-
-//#endregion
-//#region src/script.tsx
-/**
-* Composable that provides all script loading behavior — strategy state
-* machine (afterHydration / onIdle / onInteraction / onViewport),
-* deduplication, load/error tracking.
-*
-* Returns reactive signals (`loaded`, `errored`, `pending`) so consumers
-* can render loading indicators, retry buttons, or analytics-readiness
-* gates without re-implementing the strategy machine.
-*
-* @example
-* function MyScript(props: ScriptProps) {
-*   const s = useScript(props)
-*   return (
-*     <>
-*       {() => s.loaded() ? <Analytics /> : <Skeleton />}
-*       {() => s.needsSentinel && <div ref={s.sentinelRef} style="width:0;height:0" />}
-*     </>
-*   )
-* }
-*/
-function useScript(props) {
-	const strategy = props.strategy ?? "afterHydration";
-	const loaded = signal(false);
-	const errored = signal(false);
-	const pending = signal(strategy !== "beforeHydration" && strategy !== "afterHydration");
-	const sentinelRef = strategy === "onViewport" ? createRef() : void 0;
-	function loadScript() {
-		if (typeof document === "undefined") return;
-		if (props.id && document.getElementById(props.id)) {
-			loaded.set(true);
-			pending.set(false);
-			return;
-		}
-		const script = document.createElement("script");
-		if (props.src) script.src = props.src;
-		if (props.id) script.id = props.id;
-		script.async = props.async !== false;
-		script.onload = () => {
-			loaded.set(true);
-			pending.set(false);
-			props.onLoad?.();
-		};
-		script.onerror = () => {
-			errored.set(true);
-			pending.set(false);
-			props.onError?.(/* @__PURE__ */ new Error(`Failed to load: ${props.src}`));
-		};
-		if (props.children && !props.src) {
-			script.textContent = props.children;
-			setTimeout(() => {
-				loaded.set(true);
-				pending.set(false);
-			}, 0);
-		}
-		document.head.appendChild(script);
-	}
-	onMount(() => {
-		switch (strategy) {
-			case "beforeHydration":
-				loaded.set(true);
-				pending.set(false);
-				break;
-			case "afterHydration":
-				loadScript();
-				break;
-			case "onIdle":
-				if ("requestIdleCallback" in window) requestIdleCallback(() => loadScript(), { timeout: 5e3 });
-				else setTimeout(loadScript, 200);
-				break;
-			case "onInteraction": {
-				const events = [
-					"click",
-					"scroll",
-					"keydown",
-					"touchstart"
-				];
-				function handler() {
-					for (const e of events) document.removeEventListener(e, handler);
-					loadScript();
-				}
-				for (const e of events) document.addEventListener(e, handler, {
-					once: true,
-					passive: true
-				});
-				onUnmount(() => {
-					for (const e of events) document.removeEventListener(e, handler);
-				});
-				break;
-			}
-			case "onViewport": break;
-		}
-	});
-	if (strategy === "onViewport") useIntersectionObserver(() => sentinelRef.current ?? void 0, () => loadScript());
-	return {
-		sentinelRef,
-		loaded,
-		errored,
-		pending,
-		needsSentinel: strategy === "onViewport",
-		load: loadScript
-	};
-}
-/**
-* Higher-order component that wraps any component with script load behavior.
-*
-* The wrapped component receives {@link ScriptRenderProps} with the sentinel
-* ref, load-state signals, and a `needsSentinel` flag. Use this when you want
-* to render a loading indicator, retry button, or custom analytics-readiness
-* gate around the script load.
-*
-* @example
-* // Script with a loading indicator
-* const TrackedScript = createScript((props) => (
-*   <>
-*     {() => props.pending() && <Spinner />}
-*     {() => props.errored() && <button onClick={() => location.reload()}>Retry</button>}
-*     {props.needsSentinel && <div ref={props.sentinelRef} style="width:0;height:0" />}
-*   </>
-* ))
-*
-* <TrackedScript src="/analytics.js" strategy="onIdle" />
-*/
-function createScript(Component) {
-	return function WrappedScript(props) {
-		const s = useScript(props);
-		return /* @__PURE__ */ jsx(Component, {
-			sentinelRef: s.sentinelRef,
-			needsSentinel: s.needsSentinel,
-			loaded: s.loaded,
-			errored: s.errored,
-			pending: s.pending
-		});
-	};
-}
-/**
-* Default optimized script component. Renders a 0×0 sentinel `<div>` for the
-* `onViewport` strategy (so IntersectionObserver has an element to observe),
-* `null` for every other strategy.
-*
-* @example
-* // Load analytics after page is interactive
-* <Script src="https://analytics.example.com/script.js" strategy="onIdle" />
-*
-* // Load chat widget when user scrolls
-* <Script src="/chat-widget.js" strategy="onViewport" />
-*
-* // Inline script with deferred execution
-* <Script strategy="afterHydration">
-*   {`console.log("App hydrated!")`}
-* <\/Script>
-*/
-const Script = createScript((props) => {
-	if (!props.needsSentinel) return null;
-	return /* @__PURE__ */ jsx("div", {
-		ref: props.sentinelRef,
-		style: "width:0;height:0;overflow:hidden"
-	});
-});
-
-//#endregion
-//#region src/i18n-routing.ts
-/**
-* Extract locale from a URL path.
-* Returns { locale, pathWithoutLocale }.
-*/
-function extractLocaleFromPath(path, locales, defaultLocale) {
-	const segments = path.split("/").filter(Boolean);
-	const firstSegment = segments[0]?.toLowerCase();
-	if (firstSegment && locales.includes(firstSegment)) return {
-		locale: firstSegment,
-		pathWithoutLocale: "/" + segments.slice(1).join("/") || "/"
-	};
-	return {
-		locale: defaultLocale,
-		pathWithoutLocale: path
-	};
-}
-/**
-* Build a localized path.
-*/
-function buildLocalePath(path, locale, defaultLocale, strategy) {
-	const clean = path === "/" ? "" : path;
-	if (strategy === "prefix-except-default" && locale === defaultLocale) return path;
-	return `/${locale}${clean}`;
-}
-/** @internal Context for the current locale. */
-const LocaleCtx = createContext("en");
-/** Current locale signal — set by the server middleware or client-side detection. */
-const localeSignal = signal("en");
-/**
-* Read the current locale reactively.
-*
-* Returns the locale signal value directly — reactive in both SSR and CSR.
-* The server middleware sets `localeSignal` per-request, and client-side
-* `setLocale()` updates it as well.
-*
-* @example
-* ```tsx
-* const locale = useLocale() // "en", "de", etc.
-* ```
-*/
-function useLocale() {
-	return localeSignal();
-}
-/**
-* Set the locale client-side and update the URL.
-*
-* @example
-* ```tsx
-* <button onClick={() => setLocale('de')}>Deutsch</button>
-* ```
-*/
-function setLocale(locale, config) {
-	localeSignal.set(locale);
-	if (typeof document !== "undefined") document.cookie = `${config.cookieName ?? "locale"}=${locale}; path=/; max-age=31536000`;
-	if (typeof window !== "undefined") {
-		const strategy = config.strategy ?? "prefix-except-default";
-		const { pathWithoutLocale } = extractLocaleFromPath(window.location.pathname, config.locales, config.defaultLocale);
-		const newPath = buildLocalePath(pathWithoutLocale, locale, config.defaultLocale, strategy);
-		window.history.pushState(null, "", newPath);
-		window.dispatchEvent(new PopStateEvent("popstate"));
-	}
-}
-
-//#endregion
-//#region src/meta.tsx
-function faviconLinks(locale, config) {
-	const hasLocaleOverride = locale && config.locales?.[locale];
-	const prefix = hasLocaleOverride ? `/${locale}` : "";
-	const isSvg = (hasLocaleOverride ? config.locales[locale].source : config.source).endsWith(".svg");
-	const links = [];
-	if (isSvg) links.push({
-		rel: "icon",
-		type: "image/svg+xml",
-		href: `${prefix}/favicon.svg`
-	});
-	links.push({
-		rel: "icon",
-		type: "image/png",
-		sizes: "32x32",
-		href: `${prefix}/favicon-32x32.png`
-	}, {
-		rel: "icon",
-		type: "image/png",
-		sizes: "16x16",
-		href: `${prefix}/favicon-16x16.png`
-	}, {
-		rel: "apple-touch-icon",
-		sizes: "180x180",
-		href: `${prefix}/apple-touch-icon.png`
-	});
-	if (config.manifest !== false) links.push({
-		rel: "manifest",
-		href: `${prefix}/site.webmanifest`
-	});
-	return links;
-}
-function ogImagePath(templateName, locale, outDir = "og", format = "png") {
-	const ext = format === "jpeg" ? "jpg" : "png";
-	return `/${outDir}/${templateName}${locale ? `-${locale}` : ""}.${ext}`;
-}
-const resolveStr = (v) => typeof v === "function" ? v() : v;
-/**
-* Declarative meta component for SSR-compatible page metadata.
-*
-* Supports reactive title/description — when passed as `() => string` accessors,
-* they are forwarded to `useHead()` as a reactive getter so updates propagate
-* automatically via signal tracking.
-*
-* @example
-* ```tsx
-* <Meta title="My Page" description="..." image="/og.jpg" canonical="https://..." />
-* ```
-*
-* @example Reactive title
-* ```tsx
-* const count = signal(0)
-* <Meta title={() => `${count()} items`} />
-* ```
-*/
-function Meta(props) {
-	const hasReactiveTitle = typeof props.title === "function";
-	const hasReactiveDescription = typeof props.description === "function";
-	if (hasReactiveTitle || hasReactiveDescription) useHead(() => {
-		const title = resolveStr(props.title);
-		const description = resolveStr(props.description);
-		const tags = buildMetaTags({
-			...props,
-			title,
-			description
-		});
-		const input = {
-			meta: tags.meta,
-			link: tags.link,
-			script: tags.script
-		};
-		if (title) input.title = title;
-		return input;
-	});
-	else {
-		const title = resolveStr(props.title);
-		const description = resolveStr(props.description);
-		const tags = buildMetaTags({
-			...props,
-			title,
-			description
-		});
-		const input = {
-			meta: tags.meta,
-			link: tags.link,
-			script: tags.script
-		};
-		if (title) input.title = title;
-		useHead(input);
-	}
-	return props.children ?? null;
-}
-function buildMetaTags(props) {
-	const meta = [];
-	const link = [];
-	const script = [];
-	const { title, description, canonical, imageAlt, imageWidth, imageHeight, type = "website", siteName, twitterCard = "summary_large_image", twitterSite, twitterCreator, locale = "en_US", alternateLocales, publishedTime, modifiedTime, author, tags, jsonLd, extra, video, videoWidth, videoHeight, audio, favicon, ogTemplate, ogImageDir, ogImageFormat } = props;
-	const robots = props.noIndex ? "noindex, nofollow" : props.robots ?? "index, follow";
-	const image = props.image ?? (ogTemplate ? ogImagePath(ogTemplate, locale !== "en_US" ? locale : void 0, ogImageDir, ogImageFormat) : void 0);
-	const resolvedImageWidth = imageWidth ?? (ogTemplate && !props.image ? 1200 : void 0);
-	const resolvedImageHeight = imageHeight ?? (ogTemplate && !props.image ? 630 : void 0);
-	if (description) meta.push({
-		name: "description",
-		content: description
-	});
-	if (robots) meta.push({
-		name: "robots",
-		content: robots
-	});
-	if (author) meta.push({
-		name: "author",
-		content: author
-	});
-	if (title) meta.push({
-		property: "og:title",
-		content: title
-	});
-	if (description) meta.push({
-		property: "og:description",
-		content: description
-	});
-	if (canonical) meta.push({
-		property: "og:url",
-		content: canonical
-	});
-	if (image) meta.push({
-		property: "og:image",
-		content: image
-	});
-	if (imageAlt) meta.push({
-		property: "og:image:alt",
-		content: imageAlt
-	});
-	if (resolvedImageWidth) meta.push({
-		property: "og:image:width",
-		content: String(resolvedImageWidth)
-	});
-	if (resolvedImageHeight) meta.push({
-		property: "og:image:height",
-		content: String(resolvedImageHeight)
-	});
-	meta.push({
-		property: "og:type",
-		content: type
-	});
-	if (siteName) meta.push({
-		property: "og:site_name",
-		content: siteName
-	});
-	meta.push({
-		property: "og:locale",
-		content: locale
-	});
-	if (video) {
-		meta.push({
-			property: "og:video",
-			content: video
-		});
-		if (videoWidth) meta.push({
-			property: "og:video:width",
-			content: String(videoWidth)
-		});
-		if (videoHeight) meta.push({
-			property: "og:video:height",
-			content: String(videoHeight)
-		});
-		if (video.endsWith(".mp4")) meta.push({
-			property: "og:video:type",
-			content: "video/mp4"
-		});
-		else if (video.endsWith(".webm")) meta.push({
-			property: "og:video:type",
-			content: "video/webm"
-		});
-	}
-	if (audio) meta.push({
-		property: "og:audio",
-		content: audio
-	});
-	if (type === "article") {
-		if (publishedTime) meta.push({
-			property: "article:published_time",
-			content: publishedTime
-		});
-		if (modifiedTime) meta.push({
-			property: "article:modified_time",
-			content: modifiedTime
-		});
-		if (author) meta.push({
-			property: "article:author",
-			content: author
-		});
-		if (tags) for (const tag of tags) meta.push({
-			property: "article:tag",
-			content: tag
-		});
-	}
-	meta.push({
-		name: "twitter:card",
-		content: twitterCard
-	});
-	if (title) meta.push({
-		name: "twitter:title",
-		content: title
-	});
-	if (description) meta.push({
-		name: "twitter:description",
-		content: description
-	});
-	if (image) meta.push({
-		name: "twitter:image",
-		content: image
-	});
-	if (imageAlt) meta.push({
-		name: "twitter:image:alt",
-		content: imageAlt
-	});
-	if (twitterSite) meta.push({
-		name: "twitter:site",
-		content: twitterSite
-	});
-	if (twitterCreator) meta.push({
-		name: "twitter:creator",
-		content: twitterCreator
-	});
-	if (canonical) link.push({
-		rel: "canonical",
-		href: canonical
-	});
-	if (alternateLocales) for (const alt of alternateLocales) link.push({
-		rel: "alternate",
-		hreflang: alt.locale,
-		href: alt.url
-	});
-	if (jsonLd) script.push({
-		type: "application/ld+json",
-		children: JSON.stringify({
-			"@context": "https://schema.org",
-			...jsonLd
-		})
-	});
-	if (extra) for (const tag of extra) meta.push(tag);
-	if (props.i18n) {
-		const i18nConfig = props.i18n;
-		const origin = props.origin ?? "";
-		const { pathWithoutLocale } = extractLocaleFromPath(canonical?.replace(origin, "") ?? "/", i18nConfig.locales, i18nConfig.defaultLocale);
-		const strategy = i18nConfig.strategy ?? "prefix-except-default";
-		for (const loc of i18nConfig.locales) {
-			const localizedPath = strategy === "prefix-except-default" && loc === i18nConfig.defaultLocale ? pathWithoutLocale : `/${loc}${pathWithoutLocale === "/" ? "" : pathWithoutLocale}`;
-			link.push({
-				rel: "alternate",
-				hreflang: loc,
-				href: `${origin}${localizedPath}`
-			});
-			if (loc !== locale) meta.push({
-				property: "og:locale:alternate",
-				content: loc
-			});
-		}
-		link.push({
-			rel: "alternate",
-			hreflang: "x-default",
-			href: `${origin}${pathWithoutLocale}`
-		});
-	}
-	if (favicon) {
-		const faviconLocale = locale !== "en_US" ? locale : void 0;
-		for (const fl of faviconLinks(faviconLocale, favicon)) link.push(fl);
-		if (favicon.themeColor) meta.push({
-			name: "theme-color",
-			content: favicon.themeColor
-		});
-	}
-	return {
-		meta,
-		link,
-		script
-	};
-}
-
-//#endregion
-//#region src/theme.tsx
-const STORAGE_KEY = "zero-theme";
-/** Reactive theme signal. */
-const theme = signal("system");
-/**
-* Reactive signal tracking the OS color-scheme preference. Updated by the
-* `matchMedia('(prefers-color-scheme: dark)').change` event registered in
-* `initTheme`. Components reading `resolvedTheme()` subscribe to BOTH
-* `theme` and this signal, so a user toggling dark mode at the OS level
-* re-renders everything reactively — not just the `<html data-theme>`
-* attribute.
-*
-* SSR default is `_ssrDefault` (mutable via `setSSRThemeDefault`) so the
-* server-rendered theme can differ from the client's OS preference.
-*/
-const _osPrefersDark = signal(false);
-/** SSR fallback when system preference can't be detected. Default: 'light'. */
-let _ssrDefault = "light";
-/**
-* Set the default theme for SSR (when `matchMedia` is unavailable).
-* Call once at server startup before rendering.
-*/
-function setSSRThemeDefault(value) {
-	_ssrDefault = value;
-}
-/**
-* Reactive read of the resolved theme. Subscribes to `theme` (explicit
-* user choice) and — when `theme === 'system'` — to `_osPrefersDark`
-* (OS color-scheme preference). Components using `resolvedTheme()`
-* inside JSX / effects / computeds re-render when either changes.
-*/
-function resolvedTheme() {
-	const t = theme();
-	if (t === "system") {
-		if (typeof window === "undefined") return _ssrDefault;
-		return _osPrefersDark() ? "dark" : "light";
-	}
-	return t;
-}
-/** Toggle between light and dark. */
-function toggleTheme() {
-	setTheme(resolvedTheme() === "dark" ? "light" : "dark");
-}
-/** Set theme explicitly. */
-function setTheme(t) {
-	theme.set(t);
-	if (typeof document !== "undefined") {
-		document.documentElement.dataset.theme = resolvedTheme();
-		try {
-			localStorage.setItem(STORAGE_KEY, t);
-		} catch {}
-	}
-}
-/**
-* Initialize the theme system. Call once in your app entry or layout.
-* Reads from localStorage, listens for system preference changes.
-*/
-function initTheme() {
-	onMount(() => {
-		try {
-			const stored = localStorage.getItem(STORAGE_KEY);
-			if (stored === "light" || stored === "dark" || stored === "system") theme.set(stored);
-		} catch {}
-		document.documentElement.dataset.theme = resolvedTheme();
-		const mq = window.matchMedia("(prefers-color-scheme: dark)");
-		_osPrefersDark.set(mq.matches);
-		function onChange(e) {
-			_osPrefersDark.set(e.matches);
-		}
-		mq.addEventListener("change", onChange);
-		const dispose = effect(() => {
-			const mode = resolvedTheme();
-			document.documentElement.dataset.theme = mode;
-			const faviconLinks = document.querySelectorAll("[data-favicon-theme]");
-			for (const link of faviconLinks) link.media = link.dataset.faviconTheme === mode ? "" : "not all";
-		});
-		return () => {
-			mq.removeEventListener("change", onChange);
-			dispose?.dispose();
-		};
-	});
-}
-/**
-* Theme toggle button component.
-*
-* @example
-* import { ThemeToggle } from "@pyreon/zero/theme"
-* <ThemeToggle />
-*/
-function ThemeToggle(props) {
-	initTheme();
-	return /* @__PURE__ */ jsx("button", {
-		class: props.class,
-		style: props.style,
-		onClick: toggleTheme,
-		"aria-label": "Toggle theme",
-		title: "Toggle theme",
-		type: "button",
-		children: () => resolvedTheme() === "dark" ? /* @__PURE__ */ jsxs("svg", {
-			width: "18",
-			height: "18",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			"aria-hidden": "true",
-			children: [
-				/* @__PURE__ */ jsx("circle", {
-					cx: "12",
-					cy: "12",
-					r: "5"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "12",
-					y1: "1",
-					x2: "12",
-					y2: "3"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "12",
-					y1: "21",
-					x2: "12",
-					y2: "23"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "4.22",
-					y1: "4.22",
-					x2: "5.64",
-					y2: "5.64"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "18.36",
-					y1: "18.36",
-					x2: "19.78",
-					y2: "19.78"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "1",
-					y1: "12",
-					x2: "3",
-					y2: "12"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "21",
-					y1: "12",
-					x2: "23",
-					y2: "12"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "4.22",
-					y1: "19.78",
-					x2: "5.64",
-					y2: "18.36"
-				}),
-				/* @__PURE__ */ jsx("line", {
-					x1: "18.36",
-					y1: "5.64",
-					x2: "19.78",
-					y2: "4.22"
-				})
-			]
-		}) : /* @__PURE__ */ jsx("svg", {
-			width: "18",
-			height: "18",
-			viewBox: "0 0 24 24",
-			fill: "none",
-			stroke: "currentColor",
-			"stroke-width": "2",
-			"stroke-linecap": "round",
-			"stroke-linejoin": "round",
-			"aria-hidden": "true",
-			children: /* @__PURE__ */ jsx("path", { d: "M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" })
-		})
-	});
-}
-/**
-* Inline script to prevent flash of wrong theme.
-* Include this in your index.html <head> BEFORE any stylesheets.
-*
-* @example
-* // index.html
-* <head>
-*   <script>{themeScript}<\/script>
-*   ...
-* </head>
-*/
-const themeScript = `(function(){try{var t=localStorage.getItem("${STORAGE_KEY}");var r=t==="light"?"light":t==="dark"?"dark":window.matchMedia("(prefers-color-scheme:dark)").matches?"dark":"light";document.documentElement.dataset.theme=r;document.querySelectorAll("[data-favicon-theme]").forEach(function(l){l.media=l.dataset.faviconTheme===r?"":"not all"})}catch(e){}})()`;
-
 //#endregion
 //#region src/index.ts
 function serverOnly(name, subpath) {