@pyreon/zero 0.15.0 → 0.16.0

package/lib/index.js

@@ -31,30 +31,34 @@ function useIntersectionObserver(getElement, onIntersect, rootMargin = "200px")
 //#endregion
 //#region src/image.tsx
 /**
-* Optimized image component with lazy loading, responsive images,
-* multi-format <picture> support, and blur-up placeholders.
+* Composable that provides all image optimization behavior — lazy loading,
+* srcset/sizes resolution, format selection, blur-placeholder state,
+* load tracking.
 *
-* @example
-* // With imagePlugin — spread the import directly
-* import hero from "./hero.jpg?optimize"
-* <Image {...hero} alt="Hero" priority />
+* 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
-* // Manual usage
-* <Image src="/hero.jpg" alt="Hero" width={1200} height={630} />
+* 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 Image(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
-	});
+function useImage(props) {
 	const isEager = props.priority || props.loading === "eager";
 	const loaded = signal(isEager);
 	const inView = signal(isEager);
@@ -62,7 +66,7 @@ function Image(props) {
 	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 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 = [
@@ -73,53 +77,131 @@ function Image(props) {
 		"width: 100%",
 		props.style
 	].filter(Boolean).join("; ");
-	const imgEl = /* @__PURE__ */ jsx("img", {
+	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,
-		alt: props.alt,
-		width: props.width,
-		height: props.height,
+		aspectRatio,
+		containerStyle,
+		imageStyle,
+		placeholderStyle,
 		loading: isEager ? "eager" : "lazy",
-		decoding: props.decoding ?? "async",
 		fetchPriority: props.priority ? "high" : void 0,
-		onLoad: () => loaded.set(true),
-		style: () => [
-			"display: block",
-			"width: 100%",
-			"height: 100%",
-			`object-fit: ${fit}`,
-			"transition: opacity 0.3s ease",
-			props.placeholder && !loaded() ? "opacity: 0" : "opacity: 1"
-		].join("; ")
-	});
-	return /* @__PURE__ */ jsxs("div", {
-		ref: containerRef,
-		class: props.class,
-		style: containerStyle,
-		children: [props.placeholder && /* @__PURE__ */ jsx("img", {
+		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: () => [
-				"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("; ")
-		}), hasFormats ? /* @__PURE__ */ jsxs("picture", { children: [props.formats?.map((fmt) => /* @__PURE__ */ jsx("source", {
+			style: img.placeholderStyle
+		}) : null;
+		const imageEl = img.hasFormats ? /* @__PURE__ */ jsxs("picture", { children: [img.formats?.map((fmt) => /* @__PURE__ */ jsx("source", {
 			type: fmt.type,
-			srcSet: () => inView() ? fmt.srcset ?? "" : "",
-			sizes
-		})), imgEl] }) : imgEl]
-	});
+			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
@@ -306,36 +388,67 @@ const Link = createLink((props) => /* @__PURE__ */ jsx("a", {
 //#endregion
 //#region src/script.tsx
 /**
-* Optimized script loading component.
+* Composable that provides all script loading behavior — strategy state
+* machine (afterHydration / onIdle / onInteraction / onViewport),
+* deduplication, load/error tracking.
 *
-* @example
-* // Load analytics after page is interactive
-* <Script src="https://analytics.example.com/script.js" strategy="onIdle" />
+* Returns reactive signals (`loaded`, `errored`, `pending`) so consumers
+* can render loading indicators, retry buttons, or analytics-readiness
+* gates without re-implementing the strategy machine.
 *
-* // 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>
+* @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 Script(props) {
+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)) 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;
-		if (props.onLoad) script.onload = props.onLoad;
-		if (props.onError) script.onerror = () => props.onError?.(/* @__PURE__ */ new Error(`Failed to load: ${props.src}`));
-		if (props.children && !props.src) script.textContent = props.children;
+		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 (props.strategy ?? "afterHydration") {
-			case "beforeHydration": break;
+		switch (strategy) {
+			case "beforeHydration":
+				loaded.set(true);
+				pending.set(false);
+				break;
 			case "afterHydration":
 				loadScript();
 				break;
@@ -366,15 +479,72 @@ function Script(props) {
 			case "onViewport": break;
 		}
 	});
-	const sentinelRef = createRef();
-	const strategy = props.strategy ?? "afterHydration";
 	if (strategy === "onViewport") useIntersectionObserver(() => sentinelRef.current ?? void 0, () => loadScript());
-	if (strategy === "onViewport") return /* @__PURE__ */ jsx("div", {
-		ref: sentinelRef,
+	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"
 	});
-	return null;
-}
+});
 
 //#endregion
 //#region src/i18n-routing.ts
@@ -948,5 +1118,5 @@ function aiPlugin(..._) {
 }
 
 //#endregion
-export { Image, Link, Meta, Script, ThemeToggle, aiPlugin, buildLocalePath, buildMetaTags, createLink, createServer, defineConfig, extractLocaleFromPath, faviconPlugin, initTheme, ogImagePlugin, prefetchRoute, resolvedTheme, seoPlugin, setLocale, setSSRThemeDefault, setTheme, theme, themeScript, toggleTheme, useLink, useLocale, validateEnv };
+export { Image, Link, Meta, Script, ThemeToggle, aiPlugin, buildLocalePath, buildMetaTags, createImage, createLink, createScript, createServer, defineConfig, extractLocaleFromPath, faviconPlugin, initTheme, ogImagePlugin, prefetchRoute, resolvedTheme, seoPlugin, setLocale, setSSRThemeDefault, setTheme, theme, themeScript, toggleTheme, useImage, useLink, useLocale, useScript, validateEnv };
 //# sourceMappingURL=index.js.map

package/lib/og-image.js

@@ -71,14 +71,14 @@ function buildTextOverlaySvg(layers, width, height, locale) {
 		const lines = [];
 		let currentLine = "";
 		const estimateWidth = (s) => {
-			let width = 0;
+			let w = 0;
 			for (let i = 0; i < s.length; i++) {
 				const code = s.charCodeAt(i);
-				if (code >= 12288 && code <= 40959) width += fontSize * 1;
-				else if (code <= 126 && "iljft!|:;.,'".includes(s[i])) width += fontSize * .35;
-				else width += fontSize * .55;
+				if (code >= 12288 && code <= 40959) w += fontSize * 1;
+				else if (code <= 126 && "iljft!|:;.,'".includes(s[i])) w += fontSize * .35;
+				else w += fontSize * .55;
 			}
-			return width;
+			return w;
 		};
 		for (const word of words) {
 			const testLine = currentLine ? `${currentLine} ${word}` : word;

package/lib/rolldown-runtime-CjeV3_4I.js

@@ -0,0 +1,18 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+
+//#endregion
+export { __exportAll as t };

package/lib/script.js

@@ -1,4 +1,5 @@
 import { createRef, onMount, onUnmount } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
 import { jsx } from "@pyreon/core/jsx-runtime";
 
 //#region src/utils/use-intersection-observer.ts
@@ -28,36 +29,67 @@ function useIntersectionObserver(getElement, onIntersect, rootMargin = "200px")
 //#endregion
 //#region src/script.tsx
 /**
-* Optimized script loading component.
+* Composable that provides all script loading behavior — strategy state
+* machine (afterHydration / onIdle / onInteraction / onViewport),
+* deduplication, load/error tracking.
 *
-* @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" />
+* Returns reactive signals (`loaded`, `errored`, `pending`) so consumers
+* can render loading indicators, retry buttons, or analytics-readiness
+* gates without re-implementing the strategy machine.
 *
-* // Inline script with deferred execution
-* <Script strategy="afterHydration">
-*   {`console.log("App hydrated!")`}
-* <\/Script>
+* @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 Script(props) {
+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)) 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;
-		if (props.onLoad) script.onload = props.onLoad;
-		if (props.onError) script.onerror = () => props.onError?.(/* @__PURE__ */ new Error(`Failed to load: ${props.src}`));
-		if (props.children && !props.src) script.textContent = props.children;
+		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 (props.strategy ?? "afterHydration") {
-			case "beforeHydration": break;
+		switch (strategy) {
+			case "beforeHydration":
+				loaded.set(true);
+				pending.set(false);
+				break;
 			case "afterHydration":
 				loadScript();
 				break;
@@ -88,16 +120,73 @@ function Script(props) {
 			case "onViewport": break;
 		}
 	});
-	const sentinelRef = createRef();
-	const strategy = props.strategy ?? "afterHydration";
 	if (strategy === "onViewport") useIntersectionObserver(() => sentinelRef.current ?? void 0, () => loadScript());
-	if (strategy === "onViewport") return /* @__PURE__ */ jsx("div", {
-		ref: sentinelRef,
+	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"
 	});
-	return null;
-}
+});
 
 //#endregion
-export { Script };
+export { Script, createScript, useScript };
 //# sourceMappingURL=script.js.map