@flightdev/image 0.0.2

package/dist/components/react.js

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/react.tsx
+function buildOptimizedUrl(src, options, baseUrl = "") {
+  const params = new URLSearchParams();
+  if (options.width) params.set("w", options.width.toString());
+  if (options.height) params.set("h", options.height.toString());
+  if (options.format && options.format !== "auto") params.set("f", options.format);
+  if (options.quality) params.set("q", options.quality.toString());
+  if (options.fit) params.set("fit", options.fit);
+  const queryString = params.toString();
+  const normalizedSrc = src.startsWith("/") ? src : `/${src}`;
+  return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? "?" + queryString : ""}`;
+}
+var Image = React.forwardRef(function Image2({
+  src,
+  alt,
+  width,
+  height,
+  format = "auto",
+  quality = 80,
+  fit = "cover",
+  priority = false,
+  placeholder = "empty",
+  blurDataUrl,
+  sizes,
+  baseUrl = "",
+  loading,
+  onLoad,
+  onError,
+  style,
+  className,
+  ...rest
+}, ref) {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+  const [error, setError] = React.useState(false);
+  const optimizedSrc = buildOptimizedUrl(src, { width, height, format, quality, fit }, baseUrl);
+  const srcSet = React.useMemo(() => {
+    if (!width) return void 0;
+    const widths = [width, width * 1.5, width * 2].map(Math.round);
+    return widths.map((w) => `${buildOptimizedUrl(src, { width: w, height: height ? Math.round(height * w / width) : void 0, format, quality, fit }, baseUrl)} ${w}w`).join(", ");
+  }, [src, width, height, format, quality, fit, baseUrl]);
+  const defaultSizes = width ? `(max-width: ${width}px) 100vw, ${width}px` : void 0;
+  const handleLoad = React.useCallback((e) => {
+    setIsLoaded(true);
+    onLoad?.(e);
+  }, [onLoad]);
+  const handleError = React.useCallback((e) => {
+    setError(true);
+    onError?.(e);
+  }, [onError]);
+  const placeholderStyle = placeholder === "blur" && blurDataUrl && !isLoaded ? {
+    backgroundImage: `url(${blurDataUrl})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    filter: "blur(20px)",
+    transform: "scale(1.1)"
+  } : void 0;
+  const containerStyle = {
+    position: "relative",
+    overflow: "hidden",
+    width: width ? `${width}px` : void 0,
+    height: height ? `${height}px` : void 0,
+    ...style
+  };
+  const imageStyle = {
+    width: "100%",
+    height: "100%",
+    objectFit: fit,
+    opacity: isLoaded ? 1 : 0,
+    transition: "opacity 0.3s ease-in-out"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: containerStyle,
+      className,
+      children: [
+        placeholder === "blur" && blurDataUrl && !isLoaded && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              ...placeholderStyle
+            },
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "img",
+          {
+            ref,
+            src: optimizedSrc,
+            srcSet,
+            sizes: sizes ?? defaultSizes,
+            alt,
+            width,
+            height,
+            loading: priority ? "eager" : loading ?? "lazy",
+            decoding: priority ? "sync" : "async",
+            fetchPriority: priority ? "high" : void 0,
+            onLoad: handleLoad,
+            onError: handleError,
+            style: imageStyle,
+            ...rest
+          }
+        ),
+        priority && typeof document !== "undefined" && /* @__PURE__ */ jsx(
+          "link",
+          {
+            rel: "preload",
+            as: "image",
+            href: optimizedSrc,
+            imageSrcSet: srcSet,
+            imageSizes: sizes ?? defaultSizes
+          }
+        )
+      ]
+    }
+  );
+});
+Image.displayName = "FlightImage";
+var react_default = Image;
+
+export { Image, react_default as default };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map

package/dist/components/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/react.tsx"],"names":["Image"],"mappings":"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","file":"react.js","sourcesContent":["/**\r\n * React Image Component for @flightdev/image\r\n * \r\n * @example\r\n * ```tsx\r\n * import { Image } from '@flightdev/image/react';\r\n * \r\n * <Image\r\n *   src=\"/hero.jpg\"\r\n *   alt=\"Hero\"\r\n *   width={800}\r\n *   height={600}\r\n *   priority\r\n *   placeholder=\"blur\"\r\n * />\r\n * ```\r\n */\r\n\r\nimport * as React from 'react';\r\nimport type { ImageOptimizeOptions, ImageFormat, ImageFit } from '../index.js';\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\nexport interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {\r\n    /** Image source URL or path */\r\n    src: string;\r\n    /** Alt text (required for accessibility) */\r\n    alt: string;\r\n    /** Target width */\r\n    width?: number;\r\n    /** Target height */\r\n    height?: number;\r\n    /** Output format */\r\n    format?: ImageFormat;\r\n    /** Quality (1-100) */\r\n    quality?: number;\r\n    /** Fit mode */\r\n    fit?: ImageFit;\r\n    /** Priority loading (preload) */\r\n    priority?: boolean;\r\n    /** Placeholder type */\r\n    placeholder?: 'blur' | 'empty' | 'none';\r\n    /** Custom blur data URL */\r\n    blurDataUrl?: string;\r\n    /** Sizes attribute for responsive images */\r\n    sizes?: string;\r\n    /** Image service base URL */\r\n    baseUrl?: string;\r\n    /** Loading behavior */\r\n    loading?: 'lazy' | 'eager';\r\n    /** Callback when image loads */\r\n    onLoad?: React.ReactEventHandler<HTMLImageElement>;\r\n    /** Callback on error */\r\n    onError?: React.ReactEventHandler<HTMLImageElement>;\r\n}\r\n\r\n// ============================================================================\r\n// URL Builder\r\n// ============================================================================\r\n\r\nfunction buildOptimizedUrl(\r\n    src: string,\r\n    options: ImageOptimizeOptions,\r\n    baseUrl: string = ''\r\n): string {\r\n    const params = new URLSearchParams();\r\n\r\n    if (options.width) params.set('w', options.width.toString());\r\n    if (options.height) params.set('h', options.height.toString());\r\n    if (options.format && options.format !== 'auto') params.set('f', options.format);\r\n    if (options.quality) params.set('q', options.quality.toString());\r\n    if (options.fit) params.set('fit', options.fit);\r\n\r\n    const queryString = params.toString();\r\n    const normalizedSrc = src.startsWith('/') ? src : `/${src}`;\r\n    return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? '?' + queryString : ''}`;\r\n}\r\n\r\n// ============================================================================\r\n// Image Component\r\n// ============================================================================\r\n\r\n/**\r\n * Optimized Image component for React\r\n * \r\n * Automatically handles:\r\n * - Lazy loading with IntersectionObserver\r\n * - Blur placeholder during load\r\n * - Responsive srcset generation\r\n * - Format optimization\r\n */\r\nexport const Image = React.forwardRef<HTMLImageElement, ImageProps>(function Image(\r\n    {\r\n        src,\r\n        alt,\r\n        width,\r\n        height,\r\n        format = 'auto',\r\n        quality = 80,\r\n        fit = 'cover',\r\n        priority = false,\r\n        placeholder = 'empty',\r\n        blurDataUrl,\r\n        sizes,\r\n        baseUrl = '',\r\n        loading,\r\n        onLoad,\r\n        onError,\r\n        style,\r\n        className,\r\n        ...rest\r\n    },\r\n    ref\r\n) {\r\n    const [isLoaded, setIsLoaded] = React.useState(false);\r\n    const [error, setError] = React.useState(false);\r\n\r\n    // Build optimized URL\r\n    const optimizedSrc = buildOptimizedUrl(src, { width, height, format, quality, fit }, baseUrl);\r\n\r\n    // Generate srcset for responsive images\r\n    const srcSet = React.useMemo(() => {\r\n        if (!width) return undefined;\r\n\r\n        const widths = [width, width * 1.5, width * 2].map(Math.round);\r\n        return widths\r\n            .map(w => `${buildOptimizedUrl(src, { width: w, height: height ? Math.round(height * w / width) : undefined, format, quality, fit }, baseUrl)} ${w}w`)\r\n            .join(', ');\r\n    }, [src, width, height, format, quality, fit, baseUrl]);\r\n\r\n    // Default sizes if not provided\r\n    const defaultSizes = width ? `(max-width: ${width}px) 100vw, ${width}px` : undefined;\r\n\r\n    // Handle load\r\n    const handleLoad = React.useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {\r\n        setIsLoaded(true);\r\n        onLoad?.(e);\r\n    }, [onLoad]);\r\n\r\n    // Handle error\r\n    const handleError = React.useCallback((e: React.SyntheticEvent<HTMLImageElement>) => {\r\n        setError(true);\r\n        onError?.(e);\r\n    }, [onError]);\r\n\r\n    // Placeholder styles\r\n    const placeholderStyle: React.CSSProperties | undefined =\r\n        placeholder === 'blur' && blurDataUrl && !isLoaded\r\n            ? {\r\n                backgroundImage: `url(${blurDataUrl})`,\r\n                backgroundSize: 'cover',\r\n                backgroundPosition: 'center',\r\n                filter: 'blur(20px)',\r\n                transform: 'scale(1.1)',\r\n            }\r\n            : undefined;\r\n\r\n    // Container styles for placeholder\r\n    const containerStyle: React.CSSProperties = {\r\n        position: 'relative',\r\n        overflow: 'hidden',\r\n        width: width ? `${width}px` : undefined,\r\n        height: height ? `${height}px` : undefined,\r\n        ...style,\r\n    };\r\n\r\n    // Image styles\r\n    const imageStyle: React.CSSProperties = {\r\n        width: '100%',\r\n        height: '100%',\r\n        objectFit: fit as React.CSSProperties['objectFit'],\r\n        opacity: isLoaded ? 1 : 0,\r\n        transition: 'opacity 0.3s ease-in-out',\r\n    };\r\n\r\n    return (\r\n        <div\r\n            style={containerStyle}\r\n            className={className}\r\n        >\r\n            {/* Blur placeholder background */}\r\n            {placeholder === 'blur' && blurDataUrl && !isLoaded && (\r\n                <div\r\n                    style={{\r\n                        position: 'absolute',\r\n                        inset: 0,\r\n                        ...placeholderStyle,\r\n                    }}\r\n                    aria-hidden=\"true\"\r\n                />\r\n            )}\r\n\r\n            {/* Actual image */}\r\n            <img\r\n                ref={ref}\r\n                src={optimizedSrc}\r\n                srcSet={srcSet}\r\n                sizes={sizes ?? defaultSizes}\r\n                alt={alt}\r\n                width={width}\r\n                height={height}\r\n                loading={priority ? 'eager' : loading ?? 'lazy'}\r\n                decoding={priority ? 'sync' : 'async'}\r\n                fetchPriority={priority ? 'high' : undefined}\r\n                onLoad={handleLoad}\r\n                onError={handleError}\r\n                style={imageStyle}\r\n                {...rest}\r\n            />\r\n\r\n            {/* Preload link for priority images */}\r\n            {priority && typeof document !== 'undefined' && (\r\n                <link\r\n                    rel=\"preload\"\r\n                    as=\"image\"\r\n                    href={optimizedSrc}\r\n                    imageSrcSet={srcSet}\r\n                    imageSizes={sizes ?? defaultSizes}\r\n                />\r\n            )}\r\n        </div>\r\n    );\r\n});\r\n\r\nImage.displayName = 'FlightImage';\r\n\r\nexport default Image;\r\n"]}

package/dist/components/solid.d.ts

@@ -0,0 +1,44 @@
+import { Component, JSX } from 'solid-js';
+import { ImageFormat, ImageFit } from '../index.js';
+import 'node:buffer';
+
+/** @jsxImportSource solid-js */
+/**
+ * Solid Image Component for @flightdev/image
+ *
+ * @example
+ * ```tsx
+ * import { Image } from '@flightdev/image/solid';
+ *
+ * <Image
+ *   src="/hero.jpg"
+ *   alt="Hero"
+ *   width={800}
+ *   height={600}
+ *   priority
+ *   placeholder="blur"
+ * />
+ * ```
+ */
+
+interface ImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    fit?: ImageFit;
+    priority?: boolean;
+    placeholder?: 'blur' | 'empty' | 'none';
+    blurDataUrl?: string;
+    sizes?: string;
+    baseUrl?: string;
+    class?: string;
+    style?: JSX.CSSProperties;
+    onLoad?: () => void;
+    onError?: () => void;
+}
+declare const Image: Component<ImageProps>;
+
+export { Image, type ImageProps, Image as default };

package/dist/components/solid.js

@@ -0,0 +1,101 @@
+import { createSignal, createMemo, Show } from 'solid-js';
+import { jsxs, jsx } from 'solid-js/jsx-runtime';
+
+// src/components/solid.tsx
+function buildOptimizedUrl(src, options, baseUrl = "") {
+  const params = new URLSearchParams();
+  if (options.width) params.set("w", options.width.toString());
+  if (options.height) params.set("h", options.height.toString());
+  if (options.format && options.format !== "auto") params.set("f", options.format);
+  if (options.quality) params.set("q", options.quality.toString());
+  if (options.fit) params.set("fit", options.fit);
+  const queryString = params.toString();
+  const normalizedSrc = src.startsWith("/") ? src : `/${src}`;
+  return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? "?" + queryString : ""}`;
+}
+var Image = (props) => {
+  const [isLoaded, setIsLoaded] = createSignal(false);
+  const [error, setError] = createSignal(false);
+  const format = () => props.format ?? "auto";
+  const quality = () => props.quality ?? 80;
+  const fit = () => props.fit ?? "cover";
+  const priority = () => props.priority ?? false;
+  const placeholder = () => props.placeholder ?? "empty";
+  const baseUrl = () => props.baseUrl ?? "";
+  const optimizedSrc = createMemo(
+    () => buildOptimizedUrl(props.src, {
+      width: props.width,
+      height: props.height,
+      format: format(),
+      quality: quality(),
+      fit: fit()
+    }, baseUrl())
+  );
+  const srcSet = createMemo(() => {
+    if (!props.width) return void 0;
+    const widths = [props.width, Math.round(props.width * 1.5), props.width * 2];
+    return widths.map((w) => {
+      const h = props.height ? Math.round(props.height * w / props.width) : void 0;
+      return `${buildOptimizedUrl(props.src, { width: w, height: h, format: format(), quality: quality(), fit: fit() }, baseUrl())} ${w}w`;
+    }).join(", ");
+  });
+  const defaultSizes = createMemo(
+    () => props.width ? `(max-width: ${props.width}px) 100vw, ${props.width}px` : void 0
+  );
+  const handleLoad = () => {
+    setIsLoaded(true);
+    props.onLoad?.();
+  };
+  const handleError = () => {
+    setError(true);
+    props.onError?.();
+  };
+  const containerStyle = () => ({
+    position: "relative",
+    overflow: "hidden",
+    width: props.width ? `${props.width}px` : void 0,
+    height: props.height ? `${props.height}px` : void 0,
+    ...props.style
+  });
+  const imageStyle = () => ({
+    width: "100%",
+    height: "100%",
+    "object-fit": fit(),
+    opacity: isLoaded() ? 1 : 0,
+    transition: "opacity 0.3s ease-in-out"
+  });
+  const blurStyle = () => ({
+    position: "absolute",
+    inset: "0",
+    "background-image": props.blurDataUrl ? `url(${props.blurDataUrl})` : void 0,
+    "background-size": "cover",
+    "background-position": "center",
+    filter: "blur(20px)",
+    transform: "scale(1.1)"
+  });
+  return /* @__PURE__ */ jsxs("div", { style: containerStyle(), class: props.class, children: [
+    /* @__PURE__ */ jsx(Show, { when: placeholder() === "blur" && props.blurDataUrl && !isLoaded(), children: /* @__PURE__ */ jsx("div", { style: blurStyle(), "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: optimizedSrc(),
+        srcset: srcSet(),
+        sizes: props.sizes ?? defaultSizes(),
+        alt: props.alt,
+        width: props.width,
+        height: props.height,
+        loading: priority() ? "eager" : "lazy",
+        decoding: priority() ? "sync" : "async",
+        fetchpriority: priority() ? "high" : void 0,
+        onLoad: handleLoad,
+        onError: handleError,
+        style: imageStyle()
+      }
+    )
+  ] });
+};
+var solid_default = Image;
+
+export { Image, solid_default as default };
+//# sourceMappingURL=solid.js.map
+//# sourceMappingURL=solid.js.map

package/dist/components/solid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/solid.tsx"],"names":[],"mappings":"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","file":"solid.js","sourcesContent":["/** @jsxImportSource solid-js */\r\n/**\r\n * Solid Image Component for @flightdev/image\r\n * \r\n * @example\r\n * ```tsx\r\n * import { Image } from '@flightdev/image/solid';\r\n * \r\n * <Image\r\n *   src=\"/hero.jpg\"\r\n *   alt=\"Hero\"\r\n *   width={800}\r\n *   height={600}\r\n *   priority\r\n *   placeholder=\"blur\"\r\n * />\r\n * ```\r\n */\r\n\r\nimport { createSignal, createMemo, Show, type JSX, type Component } from 'solid-js';\r\nimport type { ImageFormat, ImageFit } from '../index.js';\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\nexport interface ImageProps {\r\n    src: string;\r\n    alt: string;\r\n    width?: number;\r\n    height?: number;\r\n    format?: ImageFormat;\r\n    quality?: number;\r\n    fit?: ImageFit;\r\n    priority?: boolean;\r\n    placeholder?: 'blur' | 'empty' | 'none';\r\n    blurDataUrl?: string;\r\n    sizes?: string;\r\n    baseUrl?: string;\r\n    class?: string;\r\n    style?: JSX.CSSProperties;\r\n    onLoad?: () => void;\r\n    onError?: () => void;\r\n}\r\n\r\n// ============================================================================\r\n// URL Builder\r\n// ============================================================================\r\n\r\nfunction buildOptimizedUrl(\r\n    src: string,\r\n    options: { width?: number; height?: number; format?: ImageFormat; quality?: number; fit?: ImageFit },\r\n    baseUrl: string = ''\r\n): string {\r\n    const params = new URLSearchParams();\r\n\r\n    if (options.width) params.set('w', options.width.toString());\r\n    if (options.height) params.set('h', options.height.toString());\r\n    if (options.format && options.format !== 'auto') params.set('f', options.format);\r\n    if (options.quality) params.set('q', options.quality.toString());\r\n    if (options.fit) params.set('fit', options.fit);\r\n\r\n    const queryString = params.toString();\r\n    const normalizedSrc = src.startsWith('/') ? src : `/${src}`;\r\n    return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? '?' + queryString : ''}`;\r\n}\r\n\r\n// ============================================================================\r\n// Solid Component\r\n// ============================================================================\r\n\r\nexport const Image: Component<ImageProps> = (props) => {\r\n    const [isLoaded, setIsLoaded] = createSignal(false);\r\n    const [error, setError] = createSignal(false);\r\n\r\n    const format = () => props.format ?? 'auto';\r\n    const quality = () => props.quality ?? 80;\r\n    const fit = () => props.fit ?? 'cover';\r\n    const priority = () => props.priority ?? false;\r\n    const placeholder = () => props.placeholder ?? 'empty';\r\n    const baseUrl = () => props.baseUrl ?? '';\r\n\r\n    const optimizedSrc = createMemo(() =>\r\n        buildOptimizedUrl(props.src, {\r\n            width: props.width,\r\n            height: props.height,\r\n            format: format(),\r\n            quality: quality(),\r\n            fit: fit(),\r\n        }, baseUrl())\r\n    );\r\n\r\n    const srcSet = createMemo(() => {\r\n        if (!props.width) return undefined;\r\n\r\n        const widths = [props.width, Math.round(props.width * 1.5), props.width * 2];\r\n        return widths\r\n            .map(w => {\r\n                const h = props.height ? Math.round(props.height * w / props.width!) : undefined;\r\n                return `${buildOptimizedUrl(props.src, { width: w, height: h, format: format(), quality: quality(), fit: fit() }, baseUrl())} ${w}w`;\r\n            })\r\n            .join(', ');\r\n    });\r\n\r\n    const defaultSizes = createMemo(() =>\r\n        props.width ? `(max-width: ${props.width}px) 100vw, ${props.width}px` : undefined\r\n    );\r\n\r\n    const handleLoad = () => {\r\n        setIsLoaded(true);\r\n        props.onLoad?.();\r\n    };\r\n\r\n    const handleError = () => {\r\n        setError(true);\r\n        props.onError?.();\r\n    };\r\n\r\n    const containerStyle = (): JSX.CSSProperties => ({\r\n        position: 'relative',\r\n        overflow: 'hidden',\r\n        width: props.width ? `${props.width}px` : undefined,\r\n        height: props.height ? `${props.height}px` : undefined,\r\n        ...props.style,\r\n    });\r\n\r\n    const imageStyle = (): JSX.CSSProperties => ({\r\n        width: '100%',\r\n        height: '100%',\r\n        'object-fit': fit() as 'cover' | 'contain' | 'fill' | 'none' | 'scale-down',\r\n        opacity: isLoaded() ? 1 : 0,\r\n        transition: 'opacity 0.3s ease-in-out',\r\n    });\r\n\r\n    const blurStyle = (): JSX.CSSProperties => ({\r\n        position: 'absolute',\r\n        inset: '0',\r\n        'background-image': props.blurDataUrl ? `url(${props.blurDataUrl})` : undefined,\r\n        'background-size': 'cover',\r\n        'background-position': 'center',\r\n        filter: 'blur(20px)',\r\n        transform: 'scale(1.1)',\r\n    });\r\n\r\n    return (\r\n        <div style={containerStyle()} class={props.class}>\r\n            {/* Blur placeholder */}\r\n            <Show when={placeholder() === 'blur' && props.blurDataUrl && !isLoaded()}>\r\n                <div style={blurStyle()} aria-hidden=\"true\" />\r\n            </Show>\r\n\r\n            {/* Image */}\r\n            <img\r\n                src={optimizedSrc()}\r\n                srcset={srcSet()}\r\n                sizes={props.sizes ?? defaultSizes()}\r\n                alt={props.alt}\r\n                width={props.width}\r\n                height={props.height}\r\n                loading={priority() ? 'eager' : 'lazy'}\r\n                decoding={priority() ? 'sync' : 'async'}\r\n                // @ts-ignore - fetchpriority is valid but not in types\r\n                fetchpriority={priority() ? 'high' : undefined}\r\n                onLoad={handleLoad}\r\n                onError={handleError}\r\n                style={imageStyle()}\r\n            />\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default Image;\r\n"]}

package/dist/components/svelte.d.ts

@@ -0,0 +1,70 @@
+import { ImageFormat, ImageFit } from '../index.js';
+import 'node:buffer';
+
+/**
+ * Svelte Image Component for @flightdev/image
+ *
+ * This file exports utilities and types for a Svelte Image component.
+ * The actual Svelte component should be in a .svelte file.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { createImageProps } from '@flightdev/image/svelte';
+ *
+ *   export let src;
+ *   export let alt;
+ *   export let width = undefined;
+ *   export let height = undefined;
+ *
+ *   $: imageProps = createImageProps({ src, alt, width, height });
+ * </script>
+ *
+ * <img {...imageProps} loading="lazy" />
+ * ```
+ */
+
+interface SvelteImageOptions {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    fit?: ImageFit;
+    priority?: boolean;
+    baseUrl?: string;
+}
+interface SvelteImageProps {
+    src: string;
+    srcset?: string;
+    sizes?: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    loading: 'lazy' | 'eager';
+    decoding: 'sync' | 'async';
+    fetchpriority?: 'high' | 'low' | 'auto';
+    style?: string;
+}
+/**
+ * Create props object for a Svelte img element
+ */
+declare function createImageProps(options: SvelteImageOptions): SvelteImageProps;
+/**
+ * Create blur placeholder style string
+ */
+declare function createBlurPlaceholderStyle(blurDataUrl: string): string;
+/**
+ * Svelte action for lazy loading images with blur placeholder
+ */
+declare function lazyImage(node: HTMLImageElement, blurDataUrl?: string): {
+    destroy(): void;
+};
+declare const _default: {
+    createImageProps: typeof createImageProps;
+    createBlurPlaceholderStyle: typeof createBlurPlaceholderStyle;
+    lazyImage: typeof lazyImage;
+};
+
+export { type SvelteImageOptions, type SvelteImageProps, createBlurPlaceholderStyle, createImageProps, _default as default, lazyImage };

package/dist/components/svelte.js

@@ -0,0 +1,89 @@
+// src/components/svelte.ts
+function buildOptimizedUrl(src, options, baseUrl = "") {
+  const params = new URLSearchParams();
+  if (options.width) params.set("w", options.width.toString());
+  if (options.height) params.set("h", options.height.toString());
+  if (options.format && options.format !== "auto") params.set("f", options.format);
+  if (options.quality) params.set("q", options.quality.toString());
+  if (options.fit) params.set("fit", options.fit);
+  const queryString = params.toString();
+  const normalizedSrc = src.startsWith("/") ? src : `/${src}`;
+  return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? "?" + queryString : ""}`;
+}
+function createImageProps(options) {
+  const {
+    src,
+    alt,
+    width,
+    height,
+    format = "auto",
+    quality = 80,
+    fit = "cover",
+    priority = false,
+    baseUrl = ""
+  } = options;
+  const optimizedSrc = buildOptimizedUrl(src, { width, height, format, quality, fit }, baseUrl);
+  let srcset;
+  if (width) {
+    const widths = [width, Math.round(width * 1.5), width * 2];
+    srcset = widths.map((w) => {
+      const h = height ? Math.round(height * w / width) : void 0;
+      return `${buildOptimizedUrl(src, { width: w, height: h, format, quality, fit }, baseUrl)} ${w}w`;
+    }).join(", ");
+  }
+  const sizes = width ? `(max-width: ${width}px) 100vw, ${width}px` : void 0;
+  return {
+    src: optimizedSrc,
+    srcset,
+    sizes,
+    alt,
+    width,
+    height,
+    loading: priority ? "eager" : "lazy",
+    decoding: priority ? "sync" : "async",
+    fetchpriority: priority ? "high" : void 0,
+    style: `object-fit: ${fit}`
+  };
+}
+function createBlurPlaceholderStyle(blurDataUrl) {
+  return `
+        background-image: url(${blurDataUrl});
+        background-size: cover;
+        background-position: center;
+        filter: blur(20px);
+        transform: scale(1.1);
+    `.trim();
+}
+function lazyImage(node, blurDataUrl) {
+  if (blurDataUrl) {
+    const wrapper = node.parentElement;
+    if (wrapper) {
+      wrapper.style.position = "relative";
+      wrapper.style.overflow = "hidden";
+      const placeholder = document.createElement("div");
+      placeholder.style.cssText = `
+                position: absolute;
+                inset: 0;
+                ${createBlurPlaceholderStyle(blurDataUrl)}
+                transition: opacity 0.3s ease-in-out;
+            `;
+      wrapper.insertBefore(placeholder, node);
+      node.style.opacity = "0";
+      node.style.transition = "opacity 0.3s ease-in-out";
+      node.addEventListener("load", () => {
+        node.style.opacity = "1";
+        placeholder.style.opacity = "0";
+        setTimeout(() => placeholder.remove(), 300);
+      }, { once: true });
+    }
+  }
+  return {
+    destroy() {
+    }
+  };
+}
+var svelte_default = { createImageProps, createBlurPlaceholderStyle, lazyImage };
+
+export { createBlurPlaceholderStyle, createImageProps, svelte_default as default, lazyImage };
+//# sourceMappingURL=svelte.js.map
+//# sourceMappingURL=svelte.js.map

package/dist/components/svelte.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/svelte.ts"],"names":[],"mappings":"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","file":"svelte.js","sourcesContent":["/**\r\n * Svelte Image Component for @flightdev/image\r\n * \r\n * This file exports utilities and types for a Svelte Image component.\r\n * The actual Svelte component should be in a .svelte file.\r\n * \r\n * @example\r\n * ```svelte\r\n * <script>\r\n *   import { createImageProps } from '@flightdev/image/svelte';\r\n *   \r\n *   export let src;\r\n *   export let alt;\r\n *   export let width = undefined;\r\n *   export let height = undefined;\r\n *   \r\n *   $: imageProps = createImageProps({ src, alt, width, height });\r\n * </script>\r\n * \r\n * <img {...imageProps} loading=\"lazy\" />\r\n * ```\r\n */\r\n\r\nimport type { ImageFormat, ImageFit } from '../index.js';\r\n\r\n// ============================================================================\r\n// Types\r\n// ============================================================================\r\n\r\nexport interface SvelteImageOptions {\r\n    src: string;\r\n    alt: string;\r\n    width?: number;\r\n    height?: number;\r\n    format?: ImageFormat;\r\n    quality?: number;\r\n    fit?: ImageFit;\r\n    priority?: boolean;\r\n    baseUrl?: string;\r\n}\r\n\r\nexport interface SvelteImageProps {\r\n    src: string;\r\n    srcset?: string;\r\n    sizes?: string;\r\n    alt: string;\r\n    width?: number;\r\n    height?: number;\r\n    loading: 'lazy' | 'eager';\r\n    decoding: 'sync' | 'async';\r\n    fetchpriority?: 'high' | 'low' | 'auto';\r\n    style?: string;\r\n}\r\n\r\n// ============================================================================\r\n// URL Builder\r\n// ============================================================================\r\n\r\nfunction buildOptimizedUrl(\r\n    src: string,\r\n    options: { width?: number; height?: number; format?: ImageFormat; quality?: number; fit?: ImageFit },\r\n    baseUrl: string = ''\r\n): string {\r\n    const params = new URLSearchParams();\r\n\r\n    if (options.width) params.set('w', options.width.toString());\r\n    if (options.height) params.set('h', options.height.toString());\r\n    if (options.format && options.format !== 'auto') params.set('f', options.format);\r\n    if (options.quality) params.set('q', options.quality.toString());\r\n    if (options.fit) params.set('fit', options.fit);\r\n\r\n    const queryString = params.toString();\r\n    const normalizedSrc = src.startsWith('/') ? src : `/${src}`;\r\n    return `${baseUrl}/_flight/image${normalizedSrc}${queryString ? '?' + queryString : ''}`;\r\n}\r\n\r\n// ============================================================================\r\n// Svelte Utilities\r\n// ============================================================================\r\n\r\n/**\r\n * Create props object for a Svelte img element\r\n */\r\nexport function createImageProps(options: SvelteImageOptions): SvelteImageProps {\r\n    const {\r\n        src,\r\n        alt,\r\n        width,\r\n        height,\r\n        format = 'auto',\r\n        quality = 80,\r\n        fit = 'cover',\r\n        priority = false,\r\n        baseUrl = '',\r\n    } = options;\r\n\r\n    const optimizedSrc = buildOptimizedUrl(src, { width, height, format, quality, fit }, baseUrl);\r\n\r\n    let srcset: string | undefined;\r\n    if (width) {\r\n        const widths = [width, Math.round(width * 1.5), width * 2];\r\n        srcset = widths\r\n            .map(w => {\r\n                const h = height ? Math.round(height * w / width) : undefined;\r\n                return `${buildOptimizedUrl(src, { width: w, height: h, format, quality, fit }, baseUrl)} ${w}w`;\r\n            })\r\n            .join(', ');\r\n    }\r\n\r\n    const sizes = width ? `(max-width: ${width}px) 100vw, ${width}px` : undefined;\r\n\r\n    return {\r\n        src: optimizedSrc,\r\n        srcset,\r\n        sizes,\r\n        alt,\r\n        width,\r\n        height,\r\n        loading: priority ? 'eager' : 'lazy',\r\n        decoding: priority ? 'sync' : 'async',\r\n        fetchpriority: priority ? 'high' : undefined,\r\n        style: `object-fit: ${fit}`,\r\n    };\r\n}\r\n\r\n/**\r\n * Create blur placeholder style string\r\n */\r\nexport function createBlurPlaceholderStyle(blurDataUrl: string): string {\r\n    return `\r\n        background-image: url(${blurDataUrl});\r\n        background-size: cover;\r\n        background-position: center;\r\n        filter: blur(20px);\r\n        transform: scale(1.1);\r\n    `.trim();\r\n}\r\n\r\n/**\r\n * Svelte action for lazy loading images with blur placeholder\r\n */\r\nexport function lazyImage(node: HTMLImageElement, blurDataUrl?: string) {\r\n    if (blurDataUrl) {\r\n        // Set blur background initially\r\n        const wrapper = node.parentElement;\r\n        if (wrapper) {\r\n            wrapper.style.position = 'relative';\r\n            wrapper.style.overflow = 'hidden';\r\n\r\n            const placeholder = document.createElement('div');\r\n            placeholder.style.cssText = `\r\n                position: absolute;\r\n                inset: 0;\r\n                ${createBlurPlaceholderStyle(blurDataUrl)}\r\n                transition: opacity 0.3s ease-in-out;\r\n            `;\r\n            wrapper.insertBefore(placeholder, node);\r\n\r\n            node.style.opacity = '0';\r\n            node.style.transition = 'opacity 0.3s ease-in-out';\r\n\r\n            node.addEventListener('load', () => {\r\n                node.style.opacity = '1';\r\n                placeholder.style.opacity = '0';\r\n                setTimeout(() => placeholder.remove(), 300);\r\n            }, { once: true });\r\n        }\r\n    }\r\n\r\n    return {\r\n        destroy() {\r\n            // Cleanup if needed\r\n        },\r\n    };\r\n}\r\n\r\nexport default { createImageProps, createBlurPlaceholderStyle, lazyImage };\r\n"]}

package/dist/components/vue.d.ts

@@ -0,0 +1,133 @@
+import * as vue from 'vue';
+import { PropType } from 'vue';
+import { ImageFormat, ImageFit } from '../index.js';
+import 'node:buffer';
+
+interface FlightImageProps {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    format?: ImageFormat;
+    quality?: number;
+    fit?: ImageFit;
+    priority?: boolean;
+    placeholder?: 'blur' | 'empty' | 'none';
+    blurDataUrl?: string;
+    sizes?: string;
+    baseUrl?: string;
+}
+declare const FlightImage: vue.DefineComponent<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    format: {
+        type: PropType<ImageFormat>;
+        default: string;
+    };
+    quality: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fit: {
+        type: PropType<ImageFit>;
+        default: string;
+    };
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<"blur" | "empty" | "none">;
+        default: string;
+    };
+    blurDataUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sizes: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        required: true;
+    };
+    alt: {
+        type: StringConstructor;
+        required: true;
+    };
+    width: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    height: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    format: {
+        type: PropType<ImageFormat>;
+        default: string;
+    };
+    quality: {
+        type: NumberConstructor;
+        default: number;
+    };
+    fit: {
+        type: PropType<ImageFit>;
+        default: string;
+    };
+    priority: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    placeholder: {
+        type: PropType<"blur" | "empty" | "none">;
+        default: string;
+    };
+    blurDataUrl: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    sizes: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    baseUrl: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    fit: ImageFit;
+    width: number;
+    height: number;
+    format: ImageFormat;
+    quality: number;
+    priority: boolean;
+    placeholder: "blur" | "empty" | "none";
+    blurDataUrl: string;
+    sizes: string;
+    baseUrl: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { FlightImage, type FlightImageProps, FlightImage as default };