@sandquist-group/svelte-imgproxy 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Sandquist Group
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,214 @@
+# svelte-imgproxy
+
+Small Svelte 5 image component + helpers for imgproxy.
+
+```sh
+pnpm add @sandquist-group/svelte-imgproxy
+```
+
+Requires Svelte 5 and Node.js 20 or newer.
+
+Designed for a setup like:
+
+```txt
+Svelte app -> https://images.example.com -> imgproxy -> private object storage
+```
+
+The default URL shape preserves aspect ratio and fits within width:
+
+```txt
+https://images.example.com/unsafe/rs:fit:640:0/plain/blog/hero.jpg
+```
+
+`unsafe` is the default imgproxy signature segment. Use a signed imgproxy
+endpoint and configure `signature` when the endpoint is exposed publicly.
+
+## Install locally
+
+```sh
+pnpm add ../svelte-imgproxy
+```
+
+For the published package, install `@sandquist-group/svelte-imgproxy`.
+
+## Configure once
+
+In your app entry/layout, configure the singleton:
+
+```ts
+import { configureImgproxy } from 'svelte-imgproxy';
+
+configureImgproxy({
+  baseUrl: 'https://images.example.com',
+  basePath: 'blog',
+  widths: [320, 640, 960, 1280, 1920],
+  sizes: '(max-width: 1280px) 100vw, 1280px'
+});
+```
+
+## Project-wide SvelteKit configuration (recommended)
+
+Put an `ImgproxyProvider` in the root layout. Every nested `Image` inherits
+the configuration, so components need only receive their image key. Unlike a
+module-level singleton, this also stays isolated per SSR request.
+
+```svelte
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
+  import { ImgproxyProvider } from 'svelte-imgproxy';
+  import { PUBLIC_IMGPROXY_URL } from '$env/static/public';
+
+  let { children } = $props();
+</script>
+
+<ImgproxyProvider
+  config={{
+    baseUrl: PUBLIC_IMGPROXY_URL,
+    basePath: 'blog',
+    widths: [320, 640, 960, 1280, 1920]
+  }}
+>
+  {@render children()}
+</ImgproxyProvider>
+```
+
+Use `configureImgproxy(...)` only for a static, app-wide configuration. It is
+module-level state: it may be called from any eagerly imported module, but it
+must run before `Image` renders and must never be changed per server request.
+
+## Use the component
+
+```svelte
+<script lang="ts">
+  import { Image } from 'svelte-imgproxy';
+</script>
+
+<Image
+  image="hero.jpg"
+  alt="Hero"
+  class="hero-image"
+/>
+```
+
+`Image` is the primary ergonomic export. `ImgproxyImage` and `ImgOptim` remain
+available as aliases.
+
+With `basePath: 'blog'`, `image="hero.jpg"` resolves to object key:
+
+```txt
+blog/hero.jpg
+```
+
+### Per-image base path and opt-out
+
+```svelte
+<Image basePath="portfolio" image="headshot.jpg" alt="Headshot" />
+```
+
+To use an image without the configured base path:
+
+```svelte
+<Image image="shared/banner.jpg" useBasePath={false} alt="Banner" />
+```
+
+### Full object key
+
+Use `objectKey` when you do **not** want the configured base path added:
+
+```svelte
+<ImgproxyImage objectKey="customer-x/banner.jpg" alt="Banner" />
+```
+
+### Dynamic URL/key
+
+Use `url` for dynamic values:
+
+```svelte
+<ImgproxyImage url={post.imageKey} alt={post.title} />
+```
+
+If `url` is relative and a base path is configured, the base path is applied unless it already starts with that base path. Set `useBasePath={false}` to bypass it.
+
+### Custom widths
+
+```svelte
+<ImgproxyImage
+  image="gallery/photo.jpg"
+  alt="Gallery photo"
+  widths={[400, 800, 1200, 1600]}
+  sizes="(max-width: 900px) 100vw, 900px"
+/>
+```
+
+### Rest props and classes
+
+Most normal `<img>` props are forwarded:
+
+```svelte
+<ImgproxyImage
+  image="logo.png"
+  alt="Logo"
+  class="logo"
+  style="height: auto; width: 12rem;"
+  fetchpriority="high"
+/>
+```
+
+`loading` defaults to `lazy`; `decoding` defaults to `async`.
+
+### SvelteKit / SSR configuration
+
+`configureImgproxy(...)` is convenient for a browser-only app or a deployment
+with one shared image endpoint. In a multi-tenant SvelteKit app, avoid changing
+that module-level configuration during a request: pass the configuration to the
+component instead.
+
+```svelte
+<Image
+  image="hero.jpg"
+  alt="Hero"
+  config={{ baseUrl: 'https://images.example.com', basePath: tenant.slug }}
+/>
+```
+
+## Helper-only usage
+
+```ts
+import { buildImgproxyUrl, configureImgproxy } from 'svelte-imgproxy';
+
+configureImgproxy({
+  baseUrl: 'https://images.example.com',
+  basePath: 'blog'
+});
+
+const url = buildImgproxyUrl({
+  source: 'blog/hero.jpg',
+  width: 960
+});
+```
+
+## API exports
+
+- `Image` (primary component export)
+- `ImgproxyProvider` (project-wide configuration)
+- `ImgproxyImage`
+- `ImgOptim` alias
+- `configureImgproxy(config)`
+- `getImgproxyConfig()`
+- `resetImgproxyConfig()`
+- `buildImgproxyUrl(options)`
+- `buildImgproxySrcset(options)`
+- `resolveImgproxySource(input)`
+- `DEFAULT_WIDTHS`
+- `DEFAULT_SIZES`
+
+## Developing
+
+```sh
+pnpm install
+pnpm run dev
+pnpm run check
+pnpm run build
+```
+
+This repo was created from the official Svelte library template via `sv create --template library`.

package/dist/ImgproxyImage.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import type { HTMLImgAttributes } from 'svelte/elements';
+	import {
+		buildImgproxySrcset,
+		buildImgproxyUrl,
+		getImgproxyConfigContext,
+		pickFallbackWidth,
+		resolveImgproxyConfig,
+		resolveImgproxySource
+	} from './imgproxy.js';
+	import type { ImgproxyConfigOverride } from './imgproxy.js';
+
+	type Props = Omit<HTMLImgAttributes, 'src' | 'srcset' | 'sizes'> & {
+		/** Image filename/key. Uses configured basePath by default, e.g. `hero.jpg` -> `blog/hero.jpg`. */
+		image?: string;
+
+		/** Dynamic source/key. Relative values can use configured basePath; absolute URLs are encoded for /plain/. */
+		url?: string;
+
+		/** Full object key, used as-is without adding the configured basePath. */
+		objectKey?: string;
+
+		/** Per-image base path override. */
+		basePath?: string;
+
+		/** Set false to bypass the configured or supplied basePath. */
+		useBasePath?: boolean;
+
+		/** Required accessible alt text. */
+		alt: string;
+
+		/** Responsive widths used to generate srcset. */
+		widths?: number[];
+
+		/** Width used for the fallback src. Defaults to the middle srcset width. */
+		fallbackWidth?: number;
+
+		/** Optional quality override, encoded as `q:<quality>`. */
+		quality?: number;
+
+		/** Optional output format, encoded as `@<format>`. */
+		format?: string;
+
+		/** Optional cache-buster processing option, encoded as `cb:<value>`. */
+		cacheBuster?: string;
+
+		/** Optional extra imgproxy processing options, appended after resize/quality/cachebuster. */
+		processingOptions?: string[];
+
+		/** Override configured imgproxy base URL. */
+		baseUrl?: string;
+
+		/** Per-component configuration; recommended when server-rendering. */
+		config?: ImgproxyConfigOverride;
+
+		/** Override configured signature segment. */
+		signature?: string;
+
+		/** Responsive image sizes attribute. */
+		sizes?: string;
+	};
+
+	let {
+		image,
+		url,
+		objectKey,
+		basePath,
+		useBasePath,
+		alt,
+		widths,
+		fallbackWidth,
+		quality,
+		format,
+		cacheBuster,
+		processingOptions,
+		baseUrl,
+		config: configOverride,
+		signature,
+		sizes,
+		class: className,
+		loading = 'lazy',
+		decoding = 'async',
+		...rest
+	}: Props = $props();
+
+	const getProviderConfig = getImgproxyConfigContext();
+	const cfg = $derived(resolveImgproxyConfig({ ...getProviderConfig?.(), ...configOverride }));
+	const resolvedWidths = $derived(widths ?? cfg.widths ?? [320, 640, 960, 1280, 1920]);
+	const resolvedSizes = $derived(sizes ?? cfg.sizes ?? '(max-width: 1280px) 100vw, 1280px');
+	const source = $derived(resolveImgproxySource({ image, url, objectKey, basePath, useBasePath }, cfg));
+	const resolvedFallbackWidth = $derived(pickFallbackWidth(resolvedWidths, fallbackWidth));
+
+	const src = $derived(
+		buildImgproxyUrl({
+			source,
+			width: resolvedFallbackWidth,
+			baseUrl: baseUrl ?? cfg.baseUrl,
+			signature: signature ?? cfg.signature,
+			quality: quality ?? cfg.quality,
+			format: format ?? cfg.format,
+			cacheBuster,
+			processingOptions
+		})
+	);
+
+	const srcset = $derived(
+		buildImgproxySrcset({
+			source,
+			widths: resolvedWidths,
+			baseUrl: baseUrl ?? cfg.baseUrl,
+			signature: signature ?? cfg.signature,
+			quality: quality ?? cfg.quality,
+			format: format ?? cfg.format,
+			cacheBuster,
+			processingOptions
+		})
+	);
+</script>
+
+<img
+	{...rest}
+	class={className}
+	{src}
+	{srcset}
+	{alt}
+	{loading}
+	{decoding}
+	sizes={resolvedSizes}
+/>

package/dist/ImgproxyImage.svelte.d.ts

@@ -0,0 +1,39 @@
+import type { HTMLImgAttributes } from 'svelte/elements';
+import type { ImgproxyConfigOverride } from './imgproxy.js';
+type Props = Omit<HTMLImgAttributes, 'src' | 'srcset' | 'sizes'> & {
+    /** Image filename/key. Uses configured basePath by default, e.g. `hero.jpg` -> `blog/hero.jpg`. */
+    image?: string;
+    /** Dynamic source/key. Relative values can use configured basePath; absolute URLs are encoded for /plain/. */
+    url?: string;
+    /** Full object key, used as-is without adding the configured basePath. */
+    objectKey?: string;
+    /** Per-image base path override. */
+    basePath?: string;
+    /** Set false to bypass the configured or supplied basePath. */
+    useBasePath?: boolean;
+    /** Required accessible alt text. */
+    alt: string;
+    /** Responsive widths used to generate srcset. */
+    widths?: number[];
+    /** Width used for the fallback src. Defaults to the middle srcset width. */
+    fallbackWidth?: number;
+    /** Optional quality override, encoded as `q:<quality>`. */
+    quality?: number;
+    /** Optional output format, encoded as `@<format>`. */
+    format?: string;
+    /** Optional cache-buster processing option, encoded as `cb:<value>`. */
+    cacheBuster?: string;
+    /** Optional extra imgproxy processing options, appended after resize/quality/cachebuster. */
+    processingOptions?: string[];
+    /** Override configured imgproxy base URL. */
+    baseUrl?: string;
+    /** Per-component configuration; recommended when server-rendering. */
+    config?: ImgproxyConfigOverride;
+    /** Override configured signature segment. */
+    signature?: string;
+    /** Responsive image sizes attribute. */
+    sizes?: string;
+};
+declare const ImgproxyImage: import("svelte").Component<Props, {}, "">;
+type ImgproxyImage = ReturnType<typeof ImgproxyImage>;
+export default ImgproxyImage;

package/dist/ImgproxyProvider.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { setImgproxyConfigContext } from './imgproxy.js';
+	import type { ImgproxyConfigOverride } from './imgproxy.js';
+
+	type Props = {
+		/** Configuration inherited by all nested Image components. */
+		config: ImgproxyConfigOverride;
+		children: Snippet;
+	};
+
+	let { config, children }: Props = $props();
+
+	setImgproxyConfigContext(() => config);
+</script>
+
+{@render children()}

package/dist/ImgproxyProvider.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { ImgproxyConfigOverride } from './imgproxy.js';
+type Props = {
+    /** Configuration inherited by all nested Image components. */
+    config: ImgproxyConfigOverride;
+    children: Snippet;
+};
+declare const ImgproxyProvider: import("svelte").Component<Props, {}, "">;
+type ImgproxyProvider = ReturnType<typeof ImgproxyProvider>;
+export default ImgproxyProvider;

package/dist/imgproxy.d.ts

@@ -0,0 +1,60 @@
+export declare const DEFAULT_WIDTHS: readonly [320, 640, 960, 1280, 1920];
+export declare const DEFAULT_SIZES = "(max-width: 1280px) 100vw, 1280px";
+export type ImgproxyConfig = {
+    /** Public imgproxy endpoint, e.g. https://images.example.com */
+    baseUrl: string;
+    /** Default source-key prefix, e.g. blog, uploads, customer-x. */
+    basePath?: string;
+    /** imgproxy signature segment. Defaults to unsafe. */
+    signature?: string;
+    /** Default responsive widths for srcset. */
+    widths?: number[];
+    /** Default sizes attribute for responsive images. */
+    sizes?: string;
+    /** Default quality processing option. */
+    quality?: number;
+    /** Optional default output format, e.g. webp, avif, jpg, png. */
+    format?: string;
+};
+export type ImgproxySourceInput = {
+    /** Image filename/key. If a basePath is configured, this becomes `${basePath}/${image}`. */
+    image?: string;
+    /** Dynamic source string. Relative values can still use the configured basePath. */
+    url?: string;
+    /** Full object key, used as-is without adding the configured basePath. */
+    objectKey?: string;
+    /** Per-image base path override. */
+    basePath?: string;
+    /** Set false to bypass the configured or supplied basePath. */
+    useBasePath?: boolean;
+};
+/** Configuration accepted by an individual component or helper call. */
+export type ImgproxyConfigOverride = Partial<ImgproxyConfig>;
+/** Sets a reactive configuration getter for descendant Image components. */
+export declare function setImgproxyConfigContext(getConfig: () => ImgproxyConfigOverride): void;
+/** Reads the nearest ImgproxyProvider configuration, if there is one. */
+export declare function getImgproxyConfigContext(): (() => ImgproxyConfigOverride) | undefined;
+export type BuildImgproxyUrlOptions = {
+    source: string;
+    width: number;
+    baseUrl?: string;
+    signature?: string;
+    quality?: number;
+    format?: string;
+    cacheBuster?: string;
+    processingOptions?: string[];
+};
+export declare function configureImgproxy(nextConfig: ImgproxyConfig): void;
+export declare function getImgproxyConfig(): Readonly<ImgproxyConfig>;
+export declare function resetImgproxyConfig(): void;
+export declare function resolveImgproxySource(input: ImgproxySourceInput, cfg?: ImgproxyConfig): string;
+/**
+ * Combines a per-call override with configured defaults. This is useful for
+ * SSR, where module-level configuration could otherwise be shared by requests.
+ */
+export declare function resolveImgproxyConfig(override?: ImgproxyConfigOverride): ImgproxyConfig;
+export declare function buildImgproxyUrl(options: BuildImgproxyUrlOptions): string;
+export declare function buildImgproxySrcset(options: Omit<BuildImgproxyUrlOptions, 'width'> & {
+    widths: readonly number[];
+}): string;
+export declare function pickFallbackWidth(widths: readonly number[], fallbackWidth?: number): number;

package/dist/imgproxy.js

@@ -0,0 +1,126 @@
+import { getContext, hasContext, setContext } from 'svelte';
+export const DEFAULT_WIDTHS = [320, 640, 960, 1280, 1920];
+export const DEFAULT_SIZES = '(max-width: 1280px) 100vw, 1280px';
+const IMGPROXY_CONFIG_CONTEXT = Symbol('svelte-imgproxy.config');
+/** Sets a reactive configuration getter for descendant Image components. */
+export function setImgproxyConfigContext(getConfig) {
+    setContext(IMGPROXY_CONFIG_CONTEXT, getConfig);
+}
+/** Reads the nearest ImgproxyProvider configuration, if there is one. */
+export function getImgproxyConfigContext() {
+    return hasContext(IMGPROXY_CONFIG_CONTEXT)
+        ? getContext(IMGPROXY_CONFIG_CONTEXT)
+        : undefined;
+}
+const defaultConfig = {
+    baseUrl: '',
+    signature: 'unsafe',
+    widths: [...DEFAULT_WIDTHS],
+    sizes: DEFAULT_SIZES
+};
+let config = { ...defaultConfig };
+export function configureImgproxy(nextConfig) {
+    config = {
+        ...config,
+        ...nextConfig,
+        baseUrl: stripTrailingSlash(nextConfig.baseUrl ?? config.baseUrl)
+    };
+}
+export function getImgproxyConfig() {
+    return config;
+}
+export function resetImgproxyConfig() {
+    config = { ...defaultConfig, widths: [...DEFAULT_WIDTHS] };
+}
+export function resolveImgproxySource(input, cfg = config) {
+    const suppliedSources = [input.image, input.url, input.objectKey].filter((source) => Boolean(source));
+    if (suppliedSources.length !== 1) {
+        throw new Error('svelte-imgproxy: provide exactly one of `image`, `url`, or `objectKey`.');
+    }
+    const source = suppliedSources[0];
+    const cleanSource = trimLeadingSlash(source);
+    if (input.objectKey || isAbsoluteSource(cleanSource)) {
+        return cleanSource;
+    }
+    if (input.useBasePath === false) {
+        return cleanSource;
+    }
+    const basePath = input.basePath ?? cfg.basePath;
+    if (!basePath) {
+        return cleanSource;
+    }
+    const cleanBasePath = trimSlashes(basePath);
+    // If the caller already passed a key with this base path, do not double-prefix.
+    if (cleanSource === cleanBasePath || cleanSource.startsWith(`${cleanBasePath}/`)) {
+        return cleanSource;
+    }
+    return `${cleanBasePath}/${cleanSource}`;
+}
+/**
+ * Combines a per-call override with configured defaults. This is useful for
+ * SSR, where module-level configuration could otherwise be shared by requests.
+ */
+export function resolveImgproxyConfig(override = {}) {
+    return {
+        ...config,
+        ...override,
+        baseUrl: stripTrailingSlash(override.baseUrl ?? config.baseUrl),
+        widths: override.widths ?? config.widths,
+        sizes: override.sizes ?? config.sizes
+    };
+}
+export function buildImgproxyUrl(options) {
+    const cfg = getImgproxyConfig();
+    const baseUrl = stripTrailingSlash(options.baseUrl ?? cfg.baseUrl);
+    const signature = options.signature ?? cfg.signature ?? 'unsafe';
+    const quality = options.quality ?? cfg.quality;
+    const format = options.format ?? cfg.format;
+    if (!baseUrl) {
+        throw new Error('svelte-imgproxy: missing imgproxy `baseUrl`. Call configureImgproxy({ baseUrl }) first, or pass `baseUrl` to the component.');
+    }
+    const processingOptions = [
+        `rs:fit:${options.width}:0`,
+        ...(quality ? [`q:${quality}`] : []),
+        ...(options.cacheBuster ? [`cb:${encodeURIComponent(options.cacheBuster)}`] : []),
+        ...(options.processingOptions ?? [])
+    ];
+    const source = encodePlainSource(options.source);
+    const extension = format ? `@${encodeURIComponent(format)}` : '';
+    return `${baseUrl}/${signature}/${processingOptions.join('/')}/plain/${source}${extension}`;
+}
+export function buildImgproxySrcset(options) {
+    return options.widths
+        .filter(isValidWidth)
+        .map((width) => `${buildImgproxyUrl({ ...options, width })} ${width}w`)
+        .join(', ');
+}
+export function pickFallbackWidth(widths, fallbackWidth) {
+    if (fallbackWidth && isValidWidth(fallbackWidth))
+        return fallbackWidth;
+    const validWidths = widths.filter(isValidWidth);
+    return validWidths[Math.floor(validWidths.length / 2)] ?? 640;
+}
+function encodePlainSource(source) {
+    // For object keys with server-side IMGPROXY_BASE_URL, keep slashes readable:
+    //   /plain/blog/my%20image.jpg
+    // For full URLs, encode the whole URL so ?, # and @ cannot break imgproxy parsing.
+    if (isAbsoluteSource(source)) {
+        return encodeURIComponent(source);
+    }
+    return trimLeadingSlash(source).split('/').map(encodeURIComponent).join('/');
+}
+function isAbsoluteSource(source) {
+    return /^[a-z][a-z\d+.-]*:\/\//i.test(source);
+}
+function isValidWidth(width) {
+    return Number.isFinite(width) && width > 0;
+}
+function stripTrailingSlash(value) {
+    return value.replace(/\/+$/, '');
+}
+function trimLeadingSlash(value) {
+    return value.replace(/^\/+/, '');
+}
+function trimSlashes(value) {
+    return value.replace(/^\/+|\/+$/g, '');
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { default as ImgproxyImage } from './ImgproxyImage.svelte';
+export { default as ImgOptim } from './ImgproxyImage.svelte';
+export { default as Image } from './ImgproxyImage.svelte';
+export { default as ImgproxyProvider } from './ImgproxyProvider.svelte';
+export { DEFAULT_SIZES, DEFAULT_WIDTHS, buildImgproxySrcset, buildImgproxyUrl, configureImgproxy, getImgproxyConfig, getImgproxyConfigContext, pickFallbackWidth, resetImgproxyConfig, resolveImgproxyConfig, resolveImgproxySource, setImgproxyConfigContext } from './imgproxy.js';
+export type { BuildImgproxyUrlOptions, ImgproxyConfig, ImgproxyConfigOverride, ImgproxySourceInput } from './imgproxy.js';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as ImgproxyImage } from './ImgproxyImage.svelte';
+export { default as ImgOptim } from './ImgproxyImage.svelte';
+export { default as Image } from './ImgproxyImage.svelte';
+export { default as ImgproxyProvider } from './ImgproxyProvider.svelte';
+export { DEFAULT_SIZES, DEFAULT_WIDTHS, buildImgproxySrcset, buildImgproxyUrl, configureImgproxy, getImgproxyConfig, getImgproxyConfigContext, pickFallbackWidth, resetImgproxyConfig, resolveImgproxyConfig, resolveImgproxySource, setImgproxyConfigContext } from './imgproxy.js';

package/package.json

@@ -0,0 +1,62 @@
+{
+	"name": "@sandquist-group/svelte-imgproxy",
+	"version": "0.1.0",
+	"description": "Responsive Svelte 5 image component and URL helpers for imgproxy.",
+	"author": "Sandquist Group",
+	"license": "MIT",
+	"publishConfig": {
+		"access": "public"
+	},
+	"engines": {
+		"node": ">=20"
+	},
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run prepack",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"prepack": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "pnpm run check && pnpm run build",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"peerDependencies": {
+		"svelte": "^5.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.63.0",
+		"@sveltejs/package": "^2.5.8",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
+		"publint": "^0.3.21",
+		"svelte": "^5.56.1",
+		"svelte-check": "^4.6.0",
+		"typescript": "^6.0.3",
+		"vite": "^8.0.16"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"imgproxy",
+		"image-optimization",
+		"responsive-images",
+		"image-component"
+	]
+}