@pyreon/zero 0.1.0

package/lib/image.js

@@ -0,0 +1,113 @@
+import { createRef, onMount, onUnmount } from "@pyreon/core";
+import { signal } from "@pyreon/reactivity";
+import { jsx, jsxs } from "@pyreon/core/jsx-runtime";
+
+//#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
+/**
+* Optimized image component with lazy loading, responsive images,
+* multi-format <picture> 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} />
+*/
+function Image(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 imgEl = /* @__PURE__ */ jsx("img", {
+		src: () => inView() ? props.src : "",
+		srcset: () => !hasFormats && inView() && resolvedSrcset ? resolvedSrcset : "",
+		sizes: resolvedSrcset ? sizes : void 0,
+		alt: props.alt,
+		width: props.width,
+		height: props.height,
+		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", {
+			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", {
+			type: fmt.type,
+			srcset: () => inView() ? fmt.srcset : void 0,
+			sizes
+		})), imgEl] }) : imgEl]
+	});
+}
+
+//#endregion
+export { Image };
+//# sourceMappingURL=image.js.map

package/lib/image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.js","names":[],"sources":["../src/utils/use-intersection-observer.ts","../src/image.tsx"],"sourcesContent":["import { onMount, onUnmount } from '@pyreon/core'\n\n/**\n * Observes an element and calls `onIntersect` once it enters the viewport.\n * Automatically disconnects after the first intersection.\n *\n * @param getElement - Getter for the target element (may be undefined before mount).\n * @param onIntersect - Callback fired when the element becomes visible.\n * @param rootMargin - IntersectionObserver rootMargin. Default: \"200px\".\n */\nexport function useIntersectionObserver(\n  getElement: () => HTMLElement | undefined,\n  onIntersect: () => void,\n  rootMargin = '200px',\n) {\n  onMount(() => {\n    const el = getElement()\n    if (!el) return undefined\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            onIntersect()\n            observer.disconnect()\n          }\n        }\n      },\n      { rootMargin },\n    )\n\n    observer.observe(el)\n    onUnmount(() => observer.disconnect())\n    return undefined\n  })\n}\n","import { createRef } from '@pyreon/core'\nimport { signal } from '@pyreon/reactivity'\nimport type { FormatSource } from './image-plugin'\nimport { useIntersectionObserver } from './utils/use-intersection-observer'\n\n// ─── Image optimization component ───────────────────────────────────────────\n//\n// <Image> provides:\n// - Lazy loading via IntersectionObserver (loads when near viewport)\n// - Automatic width/height to prevent CLS (Cumulative Layout Shift)\n// - Responsive srcset generation from width descriptors\n// - Multi-format support via <picture> (WebP/AVIF with fallback)\n// - Blur-up placeholder while loading\n// - Priority loading for above-the-fold images\n\nexport interface ImageProps {\n  /** Image source URL. */\n  src: string\n  /** Alt text (required for accessibility). */\n  alt: string\n  /** Intrinsic width of the image. */\n  width: number\n  /** Intrinsic height of the image. */\n  height: number\n  /** Responsive sizes attribute. Default: \"100vw\" */\n  sizes?: string\n  /** Responsive srcset string or source array. */\n  srcset?: string | ImageSource[]\n  /** Per-format source sets for <picture>. Provided automatically by imagePlugin. */\n  formats?: FormatSource[]\n  /** Loading strategy. \"lazy\" uses IntersectionObserver, \"eager\" loads immediately. Default: \"lazy\" */\n  loading?: 'lazy' | 'eager'\n  /** Mark as priority (LCP image). Disables lazy loading, adds fetchpriority=\"high\". */\n  priority?: boolean\n  /** Low-quality placeholder image URL or base64 data URI for blur-up effect. */\n  placeholder?: string\n  /** CSS class name. */\n  class?: string\n  /** Inline styles. */\n  style?: string\n  /** CSS object-fit. Default: \"cover\" */\n  fit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down'\n  /** Decode async. Default: true */\n  decoding?: 'sync' | 'async' | 'auto'\n}\n\nexport interface ImageSource {\n  src: string\n  width: number\n}\n\n/**\n * Optimized image component with lazy loading, responsive images,\n * multi-format <picture> support, and blur-up placeholders.\n *\n * @example\n * // With imagePlugin — spread the import directly\n * import hero from \"./hero.jpg?optimize\"\n * <Image {...hero} alt=\"Hero\" priority />\n *\n * @example\n * // Manual usage\n * <Image src=\"/hero.jpg\" alt=\"Hero\" width={1200} height={630} />\n */\nexport function Image(props: ImageProps) {\n  const isEager = props.priority || props.loading === 'eager'\n  const loaded = signal(isEager)\n  const inView = signal(isEager)\n  const containerRef = createRef<HTMLElement>()\n\n  // Resolve srcset from string or array\n  const resolvedSrcset =\n    typeof props.srcset === 'string'\n      ? props.srcset\n      : props.srcset?.map((s) => `${s.src} ${s.width}w`).join(', ')\n\n  const sizes = props.sizes ?? '100vw'\n  const fit = props.fit ?? 'cover'\n  const hasFormats = props.formats && props.formats.length > 0\n  const aspectRatio = `${props.width} / ${props.height}`\n\n  if (!isEager) {\n    useIntersectionObserver(\n      () => containerRef.current ?? undefined,\n      () => inView.set(true),\n    )\n  }\n\n  // Static styles (don't depend on signals)\n  const containerStyle = [\n    'position: relative',\n    'overflow: hidden',\n    `aspect-ratio: ${aspectRatio}`,\n    `max-width: ${props.width}px`,\n    'width: 100%',\n    props.style,\n  ]\n    .filter(Boolean)\n    .join('; ')\n\n  const imgEl = (\n    <img\n      src={() => (inView() ? props.src : '')}\n      srcset={() =>\n        !hasFormats && inView() && resolvedSrcset ? resolvedSrcset : ''\n      }\n      sizes={resolvedSrcset ? sizes : undefined}\n      alt={props.alt}\n      width={props.width}\n      height={props.height}\n      loading={isEager ? 'eager' : 'lazy'}\n      decoding={props.decoding ?? 'async'}\n      fetchpriority={props.priority ? 'high' : undefined}\n      onload={() => loaded.set(true)}\n      style={() =>\n        [\n          'display: block',\n          'width: 100%',\n          'height: 100%',\n          `object-fit: ${fit}`,\n          'transition: opacity 0.3s ease',\n          props.placeholder && !loaded() ? 'opacity: 0' : 'opacity: 1',\n        ].join('; ')\n      }\n    />\n  )\n\n  return (\n    <div ref={containerRef} class={props.class} style={containerStyle}>\n      {props.placeholder && (\n        <img\n          src={props.placeholder}\n          alt=\"\"\n          aria-hidden=\"true\"\n          loading=\"eager\"\n          style={() =>\n            [\n              'position: absolute',\n              'inset: 0',\n              'width: 100%',\n              'height: 100%',\n              'object-fit: cover',\n              'filter: blur(20px)',\n              'transform: scale(1.1)',\n              'transition: opacity 0.4s ease',\n              loaded() ? 'opacity: 0; pointer-events: none' : 'opacity: 1',\n            ].join('; ')\n          }\n        />\n      )}\n      {hasFormats ? (\n        <picture>\n          {props.formats?.map((fmt) => (\n            <source\n              type={fmt.type}\n              srcset={() => (inView() ? fmt.srcset : undefined)}\n              sizes={sizes}\n            />\n          ))}\n          {imgEl}\n        </picture>\n      ) : (\n        imgEl\n      )}\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAUA,SAAgB,wBACd,YACA,aACA,aAAa,SACb;AACA,eAAc;EACZ,MAAM,KAAK,YAAY;AACvB,MAAI,CAAC,GAAI,QAAO;EAEhB,MAAM,WAAW,IAAI,sBAClB,YAAY;AACX,QAAK,MAAM,SAAS,QAClB,KAAI,MAAM,gBAAgB;AACxB,iBAAa;AACb,aAAS,YAAY;;KAI3B,EAAE,YAAY,CACf;AAED,WAAS,QAAQ,GAAG;AACpB,kBAAgB,SAAS,YAAY,CAAC;GAEtC;;;;;;;;;;;;;;;;;;AC8BJ,SAAgB,MAAM,OAAmB;CACvC,MAAM,UAAU,MAAM,YAAY,MAAM,YAAY;CACpD,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,SAAS,OAAO,QAAQ;CAC9B,MAAM,eAAe,WAAwB;CAG7C,MAAM,iBACJ,OAAO,MAAM,WAAW,WACpB,MAAM,SACN,MAAM,QAAQ,KAAK,MAAM,GAAG,EAAE,IAAI,GAAG,EAAE,MAAM,GAAG,CAAC,KAAK,KAAK;CAEjE,MAAM,QAAQ,MAAM,SAAS;CAC7B,MAAM,MAAM,MAAM,OAAO;CACzB,MAAM,aAAa,MAAM,WAAW,MAAM,QAAQ,SAAS;CAC3D,MAAM,cAAc,GAAG,MAAM,MAAM,KAAK,MAAM;AAE9C,KAAI,CAAC,QACH,+BACQ,aAAa,WAAW,cACxB,OAAO,IAAI,KAAK,CACvB;CAIH,MAAM,iBAAiB;EACrB;EACA;EACA,iBAAiB;EACjB,cAAc,MAAM,MAAM;EAC1B;EACA,MAAM;EACP,CACE,OAAO,QAAQ,CACf,KAAK,KAAK;CAEb,MAAM,QACJ,oBAAC,OAAD;EACE,WAAY,QAAQ,GAAG,MAAM,MAAM;EACnC,cACE,CAAC,cAAc,QAAQ,IAAI,iBAAiB,iBAAiB;EAE/D,OAAO,iBAAiB,QAAQ;EAChC,KAAK,MAAM;EACX,OAAO,MAAM;EACb,QAAQ,MAAM;EACd,SAAS,UAAU,UAAU;EAC7B,UAAU,MAAM,YAAY;EAC5B,eAAe,MAAM,WAAW,SAAS;EACzC,cAAc,OAAO,IAAI,KAAK;EAC9B,aACE;GACE;GACA;GACA;GACA,eAAe;GACf;GACA,MAAM,eAAe,CAAC,QAAQ,GAAG,eAAe;GACjD,CAAC,KAAK,KAAK;EAEd;AAGJ,QACE,qBAAC,OAAD;EAAK,KAAK;EAAc,OAAO,MAAM;EAAO,OAAO;YAAnD,CACG,MAAM,eACL,oBAAC,OAAD;GACE,KAAK,MAAM;GACX,KAAI;GACJ,eAAY;GACZ,SAAQ;GACR,aACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,QAAQ,GAAG,qCAAqC;IACjD,CAAC,KAAK,KAAK;GAEd,GAEH,aACC,qBAAC,WAAD,aACG,MAAM,SAAS,KAAK,QACnB,oBAAC,UAAD;GACE,MAAM,IAAI;GACV,cAAe,QAAQ,GAAG,IAAI,SAAS;GAChC;GACP,EACF,EACD,MACO,MAEV,MAEE"}