@pyreon/zero 0.15.0 → 0.16.0

package/lib/{api-routes-DANluJic.js → api-routes-Ci0kVmM4.js}

@@ -1,4 +1,4 @@
-import { l as __exportAll } from "./fs-router-ZebyutPa.js";
+import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
 
 //#region src/api-routes.ts
 var api_routes_exports = /* @__PURE__ */ __exportAll({
@@ -143,4 +143,4 @@ function generateApiRouteModule(files, routesDir) {
 
 //#endregion
 export { matchApiRoute as i, createApiMiddleware as n, generateApiRouteModule as r, api_routes_exports as t };
-//# sourceMappingURL=api-routes-DANluJic.js.map
+//# sourceMappingURL=api-routes-Ci0kVmM4.js.map

package/lib/client.js

@@ -14,6 +14,7 @@ function createApp(options) {
 		routes: options.routes,
 		mode: options.routerMode ?? "history",
 		...options.url ? { url: options.url } : {},
+		...options.base && options.base !== "/" ? { base: options.base } : {},
 		scrollBehavior: "top"
 	});
 	const hasLayoutInRoutes = options.layout !== void 0 && options.routes.some((r) => r.component === options.layout);
@@ -72,10 +73,12 @@ function startClient(options) {
 	if (typeof document === "undefined") throw new Error("[Pyreon] startClient() can only be called in the browser.");
 	const container = document.getElementById("app");
 	if (!container) throw new Error("[Pyreon] Missing #app container element");
+	const base = typeof __ZERO_BASE__ !== "undefined" && __ZERO_BASE__ !== "/" ? __ZERO_BASE__ : void 0;
 	const { App, router } = createApp({
 		routes: options.routes,
 		routerMode: "history",
-		...options.layout ? { layout: options.layout } : {}
+		...options.layout ? { layout: options.layout } : {},
+		...base ? { base } : {}
 	});
 	const ssrLoaderData = window.__PYREON_LOADER_DATA__;
 	const hasSSRLoaderData = ssrLoaderData !== void 0 && typeof ssrLoaderData === "object" && ssrLoaderData !== null;

package/lib/env.js

@@ -148,11 +148,11 @@ function toValidator(value) {
 * })
 * ```
 */
-function validateEnv(schema, source) {
+function validateEnv(envSchema, source) {
 	const env = source ?? (typeof process !== "undefined" ? process.env : {});
 	const result = {};
 	const errors = [];
-	for (const [key, entry] of Object.entries(schema)) {
+	for (const [key, entry] of Object.entries(envSchema)) {
 		const validator = toValidator(entry);
 		try {
 			result[key] = validator.parse(env[key], key);
@@ -167,17 +167,17 @@ function validateEnv(schema, source) {
 	}
 	return result;
 }
-function publicEnv(schema) {
+function publicEnv(envSchema) {
 	const prefix = "ZERO_PUBLIC_";
 	const env = typeof process !== "undefined" ? process.env : {};
-	if (!schema) {
+	if (!envSchema) {
 		const result = {};
 		for (const [key, value] of Object.entries(env)) if (key.startsWith(prefix) && value !== void 0) result[key.slice(12)] = value;
 		return result;
 	}
 	const prefixedSource = {};
-	for (const key of Object.keys(schema)) prefixedSource[key] = env[`${prefix}${key}`];
-	return validateEnv(schema, prefixedSource);
+	for (const key of Object.keys(envSchema)) prefixedSource[key] = env[`${prefix}${key}`];
+	return validateEnv(envSchema, prefixedSource);
 }
 /**
 * Create an env validator from a custom parse function.

package/lib/font.js

@@ -46,10 +46,10 @@ function parseGoogleFamily(input) {
 			const entries = afterAt.split(";").filter(Boolean);
 			const weights = /* @__PURE__ */ new Set();
 			for (const entry of entries) if (entry.includes(",")) {
-				const parts = entry.split(",");
-				const weight = Number(parts[parts.length - 1]);
+				const tuple = entry.split(",");
+				const weight = Number(tuple[tuple.length - 1]);
 				if (weight > 0) weights.add(weight);
-				if (parts[0] === "1") italic = true;
+				if (tuple[0] === "1") italic = true;
 			} else if (entry.includes("..")) {} else {
 				const weight = Number(entry);
 				if (weight > 0) weights.add(weight);

package/lib/{fs-router-ZebyutPa.js → fs-router-MewHc5SB.js}

@@ -1,27 +1,7 @@
+import { t as __exportAll } from "./rolldown-runtime-CjeV3_4I.js";
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
 
-//#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;
-};
-var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, { get: (a, b) => (typeof require !== "undefined" ? require : a)[b] }) : x)(function(x) {
-	if (typeof require !== "undefined") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + x + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-
-//#endregion
 //#region src/fs-router.ts
 var fs_router_exports = /* @__PURE__ */ __exportAll({
 	detectRouteExports: () => detectRouteExports,
@@ -50,7 +30,9 @@ const ROUTE_EXPORT_NAMES = [
 	"error",
 	"middleware",
 	"loaderKey",
-	"gcTime"
+	"gcTime",
+	"getStaticPaths",
+	"revalidate"
 ];
 /**
 * Detect which optional metadata exports a route file source declares.
@@ -80,10 +62,13 @@ function detectRouteExports(source) {
 	} else for (const name of tok.names) if (ROUTE_EXPORT_NAMES.includes(name)) found.add(name);
 	const rawMeta = found.has("meta") ? extractLiteralExport(source, "meta") : void 0;
 	const rawRenderMode = found.has("renderMode") ? extractLiteralExport(source, "renderMode") : void 0;
+	const rawRevalidate = found.has("revalidate") ? extractLiteralExport(source, "revalidate") : void 0;
 	const cleanMeta = rawMeta !== void 0 ? stripTypeAssertions(rawMeta) : void 0;
 	const cleanRenderMode = rawRenderMode !== void 0 ? stripTypeAssertions(rawRenderMode) : void 0;
+	const cleanRevalidate = rawRevalidate !== void 0 ? stripTypeAssertions(rawRevalidate) : void 0;
 	const metaLiteral = cleanMeta !== void 0 && isPureLiteral(cleanMeta) ? cleanMeta : void 0;
 	const renderModeLiteral = cleanRenderMode !== void 0 && isPureLiteral(cleanRenderMode) ? cleanRenderMode : void 0;
+	const revalidateLiteral = cleanRevalidate !== void 0 && isPureLiteral(cleanRevalidate) ? cleanRevalidate : void 0;
 	return {
 		hasLoader: found.has("loader"),
 		hasGuard: found.has("guard"),
@@ -93,8 +78,11 @@ function detectRouteExports(source) {
 		hasMiddleware: found.has("middleware"),
 		hasLoaderKey: found.has("loaderKey"),
 		hasGcTime: found.has("gcTime"),
+		hasGetStaticPaths: found.has("getStaticPaths"),
+		hasRevalidate: found.has("revalidate"),
 		...metaLiteral !== void 0 ? { metaLiteral } : {},
-		...renderModeLiteral !== void 0 ? { renderModeLiteral } : {}
+		...renderModeLiteral !== void 0 ? { renderModeLiteral } : {},
+		...revalidateLiteral !== void 0 ? { revalidateLiteral } : {}
 	};
 }
 /**
@@ -578,7 +566,9 @@ const EMPTY_EXPORTS = {
 	hasError: false,
 	hasMiddleware: false,
 	hasLoaderKey: false,
-	hasGcTime: false
+	hasGcTime: false,
+	hasGetStaticPaths: false,
+	hasRevalidate: false
 };
 /**
 * True if a route file declares ANY metadata export.
@@ -586,7 +576,7 @@ const EMPTY_EXPORTS = {
 * `import * as mod` (for metadata access) instead of lazy().
 */
 function hasAnyMetaExport(exports) {
-	return exports.hasLoader || exports.hasGuard || exports.hasMeta || exports.hasRenderMode || exports.hasError || exports.hasMiddleware || exports.hasLoaderKey || exports.hasGcTime;
+	return exports.hasLoader || exports.hasGuard || exports.hasMeta || exports.hasRenderMode || exports.hasError || exports.hasMiddleware || exports.hasLoaderKey || exports.hasGcTime || exports.hasGetStaticPaths;
 }
 /**
 * Parse a set of file paths (relative to routes dir) into FileRoute objects.
@@ -788,6 +778,7 @@ function generateRouteModuleFromRoutes(routes, routesDir, options) {
 			if (exp.hasGuard) props.push(`${indent}  beforeEnter: ${mod}.guard`);
 			if (exp.hasLoaderKey) props.push(`${indent}  loaderKey: ${mod}.loaderKey`);
 			if (exp.hasGcTime) props.push(`${indent}  gcTime: ${mod}.gcTime`);
+			if (exp.hasGetStaticPaths) props.push(`${indent}  getStaticPaths: ${mod}.getStaticPaths`);
 			if (exp.hasMeta || exp.hasRenderMode) {
 				const metaParts = [];
 				if (exp.hasMeta) metaParts.push(`...${mod}.meta`);
@@ -805,7 +796,7 @@ function generateRouteModuleFromRoutes(routes, routesDir, options) {
 		}
 		else {
 			const inlineableMeta = (!exp.hasMeta || exp.metaLiteral !== void 0) && (!exp.hasRenderMode || exp.renderModeLiteral !== void 0);
-			const needsFunctionExports = exp.hasLoader || exp.hasGuard || exp.hasError;
+			const needsFunctionExports = exp.hasLoader || exp.hasGuard || exp.hasError || exp.hasGetStaticPaths;
 			if (hasMeta && inlineableMeta && !needsFunctionExports) {
 				const comp = nextLazy(page.filePath, loadingName, errorName);
 				props.push(`${indent}  component: ${comp}`);
@@ -825,6 +816,10 @@ function generateRouteModuleFromRoutes(routes, routesDir, options) {
 					const mod = nextModuleImport(page.filePath);
 					props.push(`${indent}  gcTime: ${mod}.gcTime`);
 				}
+				if (exp.hasGetStaticPaths) {
+					const mod = nextModuleImport(page.filePath);
+					props.push(`${indent}  getStaticPaths: ${mod}.getStaticPaths`);
+				}
 				emitInlineMeta(exp, props, indent);
 				if (errorName) {
 					const errorRef = exp.hasError ? `lazy(() => import("${fullPath}").then((m) => ({ default: m.error })))` : errorName;
@@ -838,6 +833,7 @@ function generateRouteModuleFromRoutes(routes, routesDir, options) {
 				if (exp.hasGuard) props.push(`${indent}  beforeEnter: ${mod}.guard`);
 				if (exp.hasLoaderKey) props.push(`${indent}  loaderKey: ${mod}.loaderKey`);
 				if (exp.hasGcTime) props.push(`${indent}  gcTime: ${mod}.gcTime`);
+				if (exp.hasGetStaticPaths) props.push(`${indent}  getStaticPaths: ${mod}.getStaticPaths`);
 				if (exp.hasMeta || exp.hasRenderMode) {
 					const metaParts = [];
 					if (exp.hasMeta) metaParts.push(`...${mod}.meta`);
@@ -917,7 +913,6 @@ function generateRouteModuleFromRoutes(routes, routesDir, options) {
 * skipping no-middleware files keeps both paths working.
 */
 function generateMiddlewareModule(files, routesDir) {
-	const { readFileSync } = __require("node:fs");
 	const routes = parseFileRoutes(files);
 	const imports = [];
 	const entries = [];
@@ -973,7 +968,7 @@ async function scanRouteFiles(routesDir) {
 */
 async function scanRouteFilesWithExports(routesDir, defaultMode = "ssr") {
 	const { readFile } = await import("node:fs/promises");
-	const { isApiRoute } = await import("./api-routes-DANluJic.js").then((n) => n.t);
+	const { isApiRoute } = await import("./api-routes-Ci0kVmM4.js").then((n) => n.t);
 	const files = (await scanRouteFiles(routesDir)).filter((f) => !isApiRoute(f));
 	const exportsMap = /* @__PURE__ */ new Map();
 	await Promise.all(files.map(async (filePath) => {
@@ -988,5 +983,5 @@ async function scanRouteFilesWithExports(routesDir, defaultMode = "ssr") {
 }
 
 //#endregion
-export { generateRouteModuleFromRoutes as a, scanRouteFilesWithExports as c, generateRouteModule as i, __exportAll as l, fs_router_exports as n, parseFileRoutes as o, generateMiddlewareModule as r, scanRouteFiles as s, filePathToUrlPath as t };
-//# sourceMappingURL=fs-router-ZebyutPa.js.map
+export { generateRouteModuleFromRoutes as a, scanRouteFilesWithExports as c, generateRouteModule as i, fs_router_exports as n, parseFileRoutes as o, generateMiddlewareModule as r, scanRouteFiles as s, filePathToUrlPath as t };
+//# sourceMappingURL=fs-router-MewHc5SB.js.map

package/lib/i18n-routing.js

@@ -42,6 +42,117 @@ function buildLocalePath(path, locale, defaultLocale, strategy) {
 	return `/${locale}${clean}`;
 }
 /**
+* Fan a `FileRoute[]` into per-locale duplicates so the file-system router
+* knows about every localized URL pattern at build time. PR H — was the
+* missing half of the i18n story before this PR (the `i18nRouting()` Vite
+* plugin only handled request-time locale detection; routes themselves
+* were never duplicated, so static-host SSG outputs and SSR matching had
+* no `/de/about` / `/cs/about` records to render against).
+*
+* Strategy semantics:
+*
+* - **`prefix-except-default`** (default): the default locale's routes
+*   keep their original `urlPath` unchanged (`/about` stays `/about`); all
+*   non-default locales get a prefix (`/de/about`, `/cs/about`). Best for
+*   SEO-on-default-locale apps — search engines see canonical URLs at
+*   `/about` while non-default speakers get explicit prefixes.
+*
+* - **`prefix`**: every locale gets its own prefix, including the default
+*   (`/en/about`, `/de/about`, `/cs/about`). Root `/` becomes `/en` /
+*   `/de` / `/cs`. Better when no locale is "primary" — every URL
+*   self-identifies its locale.
+*
+* Layouts, error boundaries, loading components, and 404 pages duplicate
+* along with their pages — same source file (same `filePath`), new
+* locale-prefixed `urlPath` / `dirPath` / `depth`. The route tree built
+* from the expanded array therefore has one fully-formed subtree per
+* locale, so layout matching, dynamic params (`[id]` → `:id`), and
+* catch-all routes (`[...slug]` → `:slug*`) all compose naturally with
+* the locale prefix — no special cases.
+*
+* `getStaticPaths` composition (for SSG): each duplicate route inherits
+* the same `exports.getStaticPaths`. The SSG plugin's `expandUrlPattern`
+* step then expands `/blog/[slug]` × `[en, de]` × `getStaticPaths()
+* → ['a', 'b']` into `/blog/a`, `/blog/b`, `/de/blog/a`, `/de/blog/b`
+* (or all six prefixed forms under `'prefix'` strategy). Cardinality
+* compounds, which is by design — `ssg.concurrency` (PR D) limits
+* in-flight renders independent of route count.
+*
+* No-op when `config.locales` is empty or contains only the default
+* locale (prefix-except-default strategy with no other locales) — returns
+* the input array unchanged. Always return a fresh array on duplication
+* so callers don't accidentally mutate cached input.
+*
+* Reference: the helper is called from `vite-plugin.ts`'s virtual route
+* module load AND `ssg-plugin.ts`'s pre-render path expansion. Tested in
+* isolation — duplication is a pure transform on FileRoute[] with no
+* filesystem or network side effects.
+*/
+function expandRoutesForLocales(routes, config) {
+	const strategy = config.strategy ?? "prefix-except-default";
+	const { locales, defaultLocale } = config;
+	if (locales.length === 0) return routes;
+	for (const locale of locales) validateLocale(locale);
+	validateLocale(defaultLocale);
+	if (strategy === "prefix-except-default" && locales.length === 1 && locales[0] === defaultLocale) return routes;
+	const expanded = [];
+	for (const route of routes) for (const locale of locales) {
+		if (strategy === "prefix-except-default" && locale === defaultLocale) {
+			expanded.push(route);
+			continue;
+		}
+		if (strategy === "prefix-except-default" && route.isLayout && route.urlPath === "/") continue;
+		const newUrlPath = prefixUrlPath(route.urlPath, locale);
+		const newDirPath = route.dirPath === "" ? locale : `${locale}/${route.dirPath}`;
+		const newDepth = newUrlPath === "/" ? 0 : newUrlPath.split("/").filter(Boolean).length;
+		expanded.push({
+			...route,
+			urlPath: newUrlPath,
+			dirPath: newDirPath,
+			depth: newDepth
+		});
+	}
+	return expanded;
+}
+/**
+* Prepend `/locale` to a URL pattern. Handles three shapes:
+*   `/`         → `/de`
+*   `/about`    → `/de/about`
+*   `/users/:id` / `/blog/:slug*` → `/de/users/:id` / `/de/blog/:slug*`
+*
+* Internal helper to `expandRoutesForLocales`; not exported because the
+* public surface for path-building is `buildLocalePath` (which strips
+* existing locale prefixes — different semantics).
+*/
+function prefixUrlPath(urlPath, locale) {
+	if (urlPath === "/") return `/${locale}`;
+	return `/${locale}${urlPath}`;
+}
+/**
+* Validate a locale string (PR L2).
+*
+* The locale drives both URL pattern emission AND filesystem writes
+* (see `expandRoutesForLocales` for full rationale). Reject input that
+* would either:
+*   - break path-traversal boundaries (`..`, `/`, `\`)
+*   - produce invalid URL segments (whitespace, NUL)
+*   - create hidden-file artifacts (`.` leading)
+*   - silently kill the app (empty string)
+*
+* Throws with an actionable `[Pyreon]` error message. Called per-locale
+* by `expandRoutesForLocales` after the empty-locales no-op guard.
+*
+* @internal — exported for unit testing.
+*/
+function validateLocale(locale) {
+	if (typeof locale !== "string" || locale === "") throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. Locales must be non-empty strings (e.g. "en", "de", "en-US").`);
+	if (locale.trim() !== locale) throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. Leading or trailing whitespace not allowed.`);
+	if (locale.includes("/") || locale.includes("\\")) throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. Path separators ("/", "\\\\") not allowed — they would break URL emission and could write outside the dist directory.`);
+	if (locale === ".." || locale === ".") throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. Path-traversal segments not allowed.`);
+	if (locale.startsWith(".")) throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. Leading dot not allowed — it would create a hidden-file directory (\`dist/.${locale.slice(1)}/\`) invisible to most file listings.`);
+	if (locale.includes("\0")) throw new Error(`[Pyreon] Invalid i18n locale: ${JSON.stringify(locale)}. NUL characters not allowed.`);
+}
+/**
 * Create a LocaleContext for use in components and loaders.
 */
 function createLocaleContext(locale, path, config) {
@@ -163,5 +274,5 @@ function setLocale(locale, config) {
 }
 
 //#endregion
-export { LocaleCtx, buildLocalePath, createLocaleContext, detectLocaleFromHeader, extractLocaleFromPath, i18nRouting, localeSignal, setLocale, useLocale };
+export { LocaleCtx, buildLocalePath, createLocaleContext, detectLocaleFromHeader, expandRoutesForLocales, extractLocaleFromPath, i18nRouting, localeSignal, setLocale, useLocale, validateLocale };
 //# sourceMappingURL=i18n-routing.js.map

package/lib/image.js

@@ -29,30 +29,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);
@@ -60,7 +64,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 = [
@@ -71,54 +75,132 @@ 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
-export { Image };
+export { Image, createImage, useImage };
 //# sourceMappingURL=image.js.map