@nomideusz/svelte-media 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,33 @@
+# Changelog
+
+Backfilled 2026-08-02 from git history. Entries before that date are
+reconstructed from commits, so they record what changed rather than a release
+that was tagged at the time. The package has not been published to npm yet.
+
+## Unreleased
+
+### Added
+- README — the package's first, documenting the adapter seam, the four sizes,
+  the `(prefix, entityId, filename)` key shape the helpers take, and the fact
+  that all output is WebP regardless of what was uploaded.
+- `sideEffects: false`, so consumers can tree-shake.
+
+## 0.1.1 — 2026-07-07
+
+### Fixed
+- Ship TypeScript-free `.svelte` files (vitePreprocess script pass), so
+  consumers without a TS setup can use the components.
+
+## 0.1.0 — 2026-04-01
+
+### Added
+- S3-compatible storage adapter (`createS3Adapter`) — R2, MinIO, Tigris, AWS —
+  replacing an earlier imgproxy + local-filesystem arrangement.
+- Local disk adapter (`createLocalAdapter`).
+- `processAndStore`: validate, resize to thumbnail/medium/large with sharp, and
+  write every size through the adapter.
+- `ImageUpload` and `ImageGallery` components.
+
+### Note
+Presigned URLs are used for S3 reads, since Railway/Tigris buckets are
+private-only.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bartosz Dymet
+
+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,186 @@
+# @nomideusz/svelte-media
+
+Image upload, resizing and multi-size storage for Svelte 5 apps. One call takes
+a `File`, validates it, renders four sizes with sharp, and writes them through a
+pluggable storage adapter — S3-compatible or local disk.
+
+## Install
+
+```bash
+pnpm add @nomideusz/svelte-media
+```
+
+> Requires Svelte 5 (`^5.0.0`). The processing path is server-only: it uses
+> `sharp` and Node `Buffer`. Import `processAndStore` from server code
+> (`+page.server.ts`, a route handler, a script) — never from a component.
+
+## Why
+
+Every app that accepts images rewrites the same four steps: validate, resize to
+a set of named sizes, upload each one, and hand back the keys. The variable part
+is only *where* the bytes go. This package fixes the pipeline and makes storage
+the seam.
+
+## Quick Start
+
+```ts
+import { createS3Adapter, processAndStore, getMediaUrl } from '@nomideusz/svelte-media';
+
+const storage = createS3Adapter({
+  endpoint:        process.env.S3_ENDPOINT!,     // https://xxx.r2.cloudflarestorage.com
+  region:          'auto',                        // 'auto' for R2, 'us-east-1' for AWS
+  bucket:          process.env.S3_BUCKET!,
+  accessKeyId:     process.env.S3_KEY!,
+  secretAccessKey: process.env.S3_SECRET!,
+  publicUrl:       process.env.S3_PUBLIC_URL!,   // https://pub-xxx.r2.dev
+  forcePathStyle:  true,                          // true for MinIO/R2, false for Railway/AWS
+});
+
+const stored = await processAndStore(storage, file, 'tours', tourId);
+// { filename, originalName, prefix, entityId, sizes: { original, thumbnail, medium, large } }
+
+const src = getMediaUrl(storage, stored.prefix, stored.entityId, stored.filename, 'medium');
+```
+
+Store `stored` on your row — the helpers below all take
+`(prefix, entityId, filename)`, so keep those three. Nothing in the package
+touches a database.
+
+**Output is always WebP**, whatever was uploaded; `generateMediaKey` names every
+file `<cuid2>.webp` and ignores the original extension.
+
+## Sizes
+
+`processAndStore` always writes four variants:
+
+| Size | Dimensions | Fit | Key prefix |
+|---|---|---|---|
+| `original` | unchanged | — | *(none)* |
+| `thumbnail` | 300×300 | `cover` | `thumb_` |
+| `medium` | 800×600 | `inside` | `med_` |
+| `large` | 1200×900 | `inside` | `lg_` |
+
+`cover` crops to fill; `inside` fits within the box and preserves aspect ratio,
+so `medium` and `large` are upper bounds rather than exact dimensions. The table
+is exported as `IMAGE_SIZES`.
+
+## Storage adapters
+
+The seam is three methods:
+
+```ts
+interface StorageAdapter {
+  put(key: string, buffer: Buffer, contentType: string): Promise<void>;
+  delete(key: string): Promise<void>;
+  getUrl(key: string): string;
+}
+```
+
+Two ship with the package:
+
+```ts
+import { createS3Adapter, createLocalAdapter } from '@nomideusz/svelte-media';
+
+createS3Adapter({ /* S3Config, above */ });   // R2, MinIO, Tigris, AWS
+createLocalAdapter({ root: '/data/images' }); // writes under root, mkdir -p
+```
+
+Anything satisfying the interface works — write your own for a CDN or a test
+double.
+
+`createLocalAdapter`'s `getUrl` returns the storage key unchanged, so it is a
+path relative to `root`, not a URL. Serve `root` yourself (a static route, or
+`/uploads/[...key]`) and prefix as needed.
+
+## Validation
+
+```ts
+import { validateImageFile } from '@nomideusz/svelte-media';
+
+const { valid, error } = validateImageFile(file, {
+  maxFileSize: 5 * 1024 * 1024,                   // default: 5 MB
+  allowedTypes: ['image/jpeg', 'image/png', 'image/webp'],
+});
+```
+
+`processAndStore` runs this first and throws on failure, so calling it yourself
+is only needed to reject early and report a friendlier message.
+
+## Deleting
+
+```ts
+import { deleteMedia } from '@nomideusz/svelte-media';
+
+// Removes all four sizes; individual failures are swallowed
+await deleteMedia(storage, stored.prefix, stored.entityId, stored.filename);
+```
+
+## Components
+
+```svelte
+<script lang="ts">
+  import { ImageUpload, ImageGallery } from '@nomideusz/svelte-media';
+
+  // Your endpoint calls processAndStore and returns the StoredMedia
+  async function upload(file: File) {
+    const body = new FormData();
+    body.set('file', file);
+    return await (await fetch('/api/images', { method: 'POST', body })).json();
+  }
+</script>
+
+<ImageUpload onUpload={upload} maxFiles={5} onError={(m) => toast(m)} />
+
+<ImageGallery
+  images={stored}
+  getUrl={(prefix, entityId, filename, size) => `/uploads/${prefix}/${entityId}/${filename}?s=${size}`}
+  size="thumbnail"
+  onDelete={(filename) => remove(filename)}
+/>
+```
+
+`ImageUpload` handles drag-and-drop, selection and the uploading state, but the
+bytes go to *your* endpoint — it never talks to storage, so credentials stay on
+the server. `ImageGallery` takes a `getUrl` callback rather than an adapter for
+the same reason: it renders on the client, where the adapter cannot go.
+
+`ImageUpload` props: `onUpload` (required), `onError?`, `maxFiles = 1`,
+`accept = 'image/jpeg,image/png,image/webp'`, `config?`.
+`ImageGallery` props: `images`, `getUrl` (both required), `onDelete?`,
+`size = 'thumbnail'`.
+
+## API
+
+```ts
+// Adapters
+createS3Adapter(config: S3Config): StorageAdapter
+createLocalAdapter(config: LocalConfig): StorageAdapter
+
+// Pipeline
+processAndStore(adapter, file, prefix, entityId, config?): Promise<StoredMedia>
+deleteMedia(adapter, prefix, entityId, filename): Promise<void>
+getMediaUrl(adapter, prefix, entityId, filename, size = 'medium'): string
+getStorageKey(prefix, entityId, filename, size): string   // `${prefix}/${entityId}/${sizePrefix}${filename}`
+validateImageFile(file, config?): ValidationResult
+generateMediaKey(): string                                 // `<cuid2>.webp`
+IMAGE_SIZES
+
+// Components
+ImageUpload, ImageGallery
+```
+
+Types: `StorageAdapter`, `S3Config`, `LocalConfig`, `StoredMedia`, `ImageSize`,
+`MediaConfig`, `ValidationResult`.
+
+## Development
+
+```bash
+pnpm install
+pnpm check           # Typecheck
+pnpm test            # Vitest
+pnpm run package     # Build the library
+```
+
+## License
+
+MIT

package/dist/components/ImageGallery.svelte

@@ -0,0 +1,143 @@
+<script lang="ts">let { images, getUrl, onDelete, size = "thumbnail" } = $props();
+let expanded = $state(null);
+</script>
+
+{#if images.length > 0}
+    <div class="asini-gallery">
+        {#each images as img (img.filename)}
+            <div class="asini-gallery__item">
+                <button
+                    type="button"
+                    class="asini-gallery__thumb-btn"
+                    onclick={() => {
+                        expanded = img;
+                    }}
+                    aria-label="View {img.originalName}"
+                >
+                    <img
+                        src={getUrl(
+                            img.prefix,
+                            img.entityId,
+                            img.filename,
+                            size,
+                        )}
+                        alt={img.originalName}
+                        class="asini-gallery__thumb"
+                        loading="lazy"
+                    />
+                </button>
+                {#if onDelete}
+                    <button
+                        type="button"
+                        class="asini-gallery__delete"
+                        onclick={() => onDelete?.(img.filename)}
+                        aria-label="Delete {img.originalName}">×</button
+                    >
+                {/if}
+            </div>
+        {/each}
+    </div>
+{/if}
+
+{#if expanded}
+    <div
+        class="asini-lightbox"
+        role="dialog"
+        aria-modal="true"
+        aria-label="Image preview"
+        onclick={() => {
+            expanded = null;
+        }}
+        onkeydown={(e) => {
+            if (e.key === "Escape") expanded = null;
+        }}
+        tabindex="-1"
+    >
+        <div
+            class="asini-lightbox__img-wrap"
+            role="presentation"
+            onclick={(e) => {
+                e.stopPropagation();
+            }}
+        >
+            <img
+                src={getUrl(
+                    expanded.prefix,
+                    expanded.entityId,
+                    expanded.filename,
+                    "large",
+                )}
+                alt={expanded.originalName}
+                class="asini-lightbox__img"
+            />
+        </div>
+    </div>
+{/if}
+
+<style>
+    .asini-gallery {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    .asini-gallery__item {
+        position: relative;
+        display: inline-block;
+    }
+    .asini-gallery__thumb-btn {
+        display: block;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        border-radius: var(--asini-radius-sm);
+        overflow: hidden;
+    }
+    .asini-gallery__thumb {
+        display: block;
+        width: 100px;
+        height: 100px;
+        object-fit: cover;
+        border-radius: var(--asini-radius-sm);
+        border: 1px solid var(--asini-border);
+    }
+    .asini-gallery__delete {
+        position: absolute;
+        top: 2px;
+        right: 2px;
+        width: 20px;
+        height: 20px;
+        border-radius: 50%;
+        background: var(--asini-danger);
+        color: #fff;
+        border: none;
+        font-size: 14px;
+        line-height: 1;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .asini-lightbox {
+        position: fixed;
+        inset: 0;
+        background: rgba(0, 0, 0, 0.8);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+        cursor: pointer;
+    }
+    .asini-lightbox__img-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        outline: none;
+    }
+    .asini-lightbox__img {
+        max-width: 90vw;
+        max-height: 90vh;
+        object-fit: contain;
+        border-radius: var(--asini-radius);
+        cursor: default;
+    }
+</style>

package/dist/components/ImageGallery.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { StoredMedia } from "../core/types.js";
+interface Props {
+    images: StoredMedia[];
+    getUrl: (prefix: string, entityId: string, filename: string, size: "thumbnail" | "medium" | "large") => string;
+    onDelete?: (filename: string) => void;
+    size?: "thumbnail" | "medium";
+}
+declare const ImageGallery: import("svelte").Component<Props, {}, "">;
+type ImageGallery = ReturnType<typeof ImageGallery>;
+export default ImageGallery;

package/dist/components/ImageUpload.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">let {
+  onUpload,
+  onError,
+  maxFiles = 1,
+  accept = "image/jpeg,image/png,image/webp"
+} = $props();
+let dragging = $state(false);
+let uploading = $state(false);
+let input;
+async function handleFiles(files) {
+  if (!files || files.length === 0) return;
+  uploading = true;
+  try {
+    for (const file of Array.from(files).slice(0, maxFiles)) {
+      await onUpload(file);
+    }
+  } catch (e) {
+    onError?.(e instanceof Error ? e.message : "Upload failed");
+  } finally {
+    uploading = false;
+  }
+}
+function onDrop(e) {
+  e.preventDefault();
+  dragging = false;
+  handleFiles(e.dataTransfer?.files ?? null);
+}
+</script>
+
+<div
+  class="asini-upload"
+  class:asini-upload--drag={dragging}
+  class:asini-upload--busy={uploading}
+  role="region"
+  aria-label="Image upload"
+  ondragover={(e) => { e.preventDefault(); dragging = true; }}
+  ondragleave={() => { dragging = false; }}
+  ondrop={onDrop}
+>
+  {#if uploading}
+    <span class="asini-upload__status">Uploading…</span>
+  {:else}
+    <button
+      type="button"
+      class="asini-upload__btn"
+      onclick={() => input.click()}
+      aria-label="Select image"
+    >
+      Choose image
+    </button>
+    <span class="asini-upload__hint">or drag and drop</span>
+  {/if}
+  <input
+    bind:this={input}
+    type="file"
+    {accept}
+    multiple={maxFiles > 1}
+    style="display:none"
+    onchange={(e) => handleFiles((e.target as HTMLInputElement).files)}
+  />
+</div>
+
+<style>
+  .asini-upload {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 2rem;
+    border: 2px dashed var(--asini-border);
+    border-radius: var(--asini-radius);
+    background: var(--asini-surface);
+    color: var(--asini-text-2);
+    transition: border-color 0.15s, background 0.15s;
+    cursor: pointer;
+  }
+  .asini-upload--drag {
+    border-color: var(--asini-accent);
+    background: var(--asini-accent-muted);
+  }
+  .asini-upload--busy {
+    opacity: 0.6;
+    pointer-events: none;
+  }
+  .asini-upload__btn {
+    padding: 0.5rem 1.25rem;
+    border: 1px solid var(--asini-border);
+    border-radius: var(--asini-radius-sm);
+    background: var(--asini-bg);
+    color: var(--asini-text);
+    font-size: 0.875rem;
+    cursor: pointer;
+  }
+  .asini-upload__btn:hover {
+    border-color: var(--asini-accent);
+    color: var(--asini-accent);
+  }
+  .asini-upload__hint {
+    font-size: 0.8rem;
+    color: var(--asini-text-3);
+  }
+  .asini-upload__status {
+    font-size: 0.875rem;
+    color: var(--asini-text-2);
+  }
+</style>

package/dist/components/ImageUpload.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { StoredMedia, MediaConfig } from '../core/types.js';
+interface Props {
+    onUpload: (file: File) => Promise<StoredMedia>;
+    onError?: (message: string) => void;
+    maxFiles?: number;
+    accept?: string;
+    config?: MediaConfig;
+}
+declare const ImageUpload: import("svelte").Component<Props, {}, "">;
+type ImageUpload = ReturnType<typeof ImageUpload>;
+export default ImageUpload;

package/dist/core/adapter.d.ts

@@ -0,0 +1,2 @@
+import type { S3Config, StorageAdapter } from './types.js';
+export declare function createS3Adapter(config: S3Config): StorageAdapter;

package/dist/core/adapter.js

@@ -0,0 +1,33 @@
+import { S3Client, PutObjectCommand, DeleteObjectCommand, } from '@aws-sdk/client-s3';
+export function createS3Adapter(config) {
+    const client = new S3Client({
+        endpoint: config.endpoint,
+        region: config.region,
+        credentials: {
+            accessKeyId: config.accessKeyId,
+            secretAccessKey: config.secretAccessKey,
+        },
+        forcePathStyle: config.forcePathStyle ?? true,
+    });
+    return {
+        async put(key, buffer, contentType) {
+            await client.send(new PutObjectCommand({
+                Bucket: config.bucket,
+                Key: key,
+                Body: buffer,
+                ContentType: contentType,
+                // Keys are unique per upload, so objects never change in place.
+                CacheControl: 'public, max-age=31536000, immutable',
+            }));
+        },
+        async delete(key) {
+            await client.send(new DeleteObjectCommand({
+                Bucket: config.bucket,
+                Key: key,
+            }));
+        },
+        getUrl(key) {
+            return `${config.publicUrl.replace(/\/$/, '')}/${key}`;
+        },
+    };
+}

package/dist/core/local-adapter.d.ts

@@ -0,0 +1,6 @@
+import type { StorageAdapter } from './types.js';
+export interface LocalConfig {
+    /** Absolute path to the storage root directory, e.g. '/data/images' */
+    root: string;
+}
+export declare function createLocalAdapter(config: LocalConfig): StorageAdapter;

package/dist/core/local-adapter.js

@@ -0,0 +1,17 @@
+import { writeFile, unlink, mkdir } from 'node:fs/promises';
+import { join, dirname } from 'node:path';
+export function createLocalAdapter(config) {
+    return {
+        async put(key, buffer, contentType) {
+            const filePath = join(config.root, key);
+            await mkdir(dirname(filePath), { recursive: true });
+            await writeFile(filePath, buffer);
+        },
+        async delete(key) {
+            await unlink(join(config.root, key)).catch(() => { });
+        },
+        getUrl(key) {
+            return key;
+        },
+    };
+}

package/dist/core/process.d.ts

@@ -0,0 +1,24 @@
+import type { StorageAdapter, StoredMedia, ImageSize, MediaConfig, ValidationResult } from './types.js';
+export declare const IMAGE_SIZES: {
+    thumbnail: {
+        width: number;
+        height: number;
+        fit: "cover";
+    };
+    medium: {
+        width: number;
+        height: number;
+        fit: "inside";
+    };
+    large: {
+        width: number;
+        height: number;
+        fit: "inside";
+    };
+};
+export declare function validateImageFile(file: File, config?: MediaConfig): ValidationResult;
+export declare function generateMediaKey(_originalName?: string): string;
+export declare function getStorageKey(prefix: string, entityId: string, filename: string, size: ImageSize): string;
+export declare function processAndStore(adapter: StorageAdapter, file: File, prefix: string, entityId: string, config?: MediaConfig): Promise<StoredMedia>;
+export declare function deleteMedia(adapter: StorageAdapter, prefix: string, entityId: string, filename: string): Promise<void>;
+export declare function getMediaUrl(adapter: StorageAdapter, prefix: string, entityId: string, filename: string, size?: ImageSize): string;

package/dist/core/process.js

@@ -0,0 +1,76 @@
+import sharp from 'sharp';
+import { createId } from '@paralleldrive/cuid2';
+const DEFAULT_MAX_SIZE = 5 * 1024 * 1024;
+const DEFAULT_ALLOWED_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];
+export const IMAGE_SIZES = {
+    thumbnail: { width: 300, height: 300, fit: 'cover' },
+    medium: { width: 800, height: 600, fit: 'inside' },
+    large: { width: 1200, height: 900, fit: 'inside' },
+};
+const SIZE_PREFIXES = {
+    original: '',
+    thumbnail: 'thumb_',
+    medium: 'med_',
+    large: 'large_',
+};
+const SIZE_QUALITY = {
+    original: 95,
+    thumbnail: 80,
+    medium: 85,
+    large: 90,
+};
+export function validateImageFile(file, config) {
+    const maxSize = config?.maxFileSize ?? DEFAULT_MAX_SIZE;
+    const allowed = config?.allowedTypes ?? DEFAULT_ALLOWED_TYPES;
+    if (file.size > maxSize) {
+        const mb = Math.round(maxSize / 1024 / 1024);
+        return { valid: false, error: `File too large (max ${mb}MB)` };
+    }
+    if (!allowed.includes(file.type)) {
+        return { valid: false, error: `Invalid file type. Allowed: JPEG, PNG, WebP` };
+    }
+    return { valid: true };
+}
+export function generateMediaKey(_originalName) {
+    // All processed output is WebP regardless of the uploaded format.
+    return `${createId()}.webp`;
+}
+export function getStorageKey(prefix, entityId, filename, size) {
+    const sizePrefix = SIZE_PREFIXES[size];
+    return `${prefix}/${entityId}/${sizePrefix}${filename}`;
+}
+export async function processAndStore(adapter, file, prefix, entityId, config) {
+    const validation = validateImageFile(file, config);
+    if (!validation.valid)
+        throw new Error(validation.error);
+    const filename = generateMediaKey(file.name);
+    const arrayBuffer = await file.arrayBuffer();
+    const buffer = Buffer.from(arrayBuffer);
+    const sizes = {
+        original: getStorageKey(prefix, entityId, filename, 'original'),
+        thumbnail: getStorageKey(prefix, entityId, filename, 'thumbnail'),
+        medium: getStorageKey(prefix, entityId, filename, 'medium'),
+        large: getStorageKey(prefix, entityId, filename, 'large'),
+    };
+    const originalBuf = await sharp(buffer).rotate().webp({ quality: SIZE_QUALITY.original }).toBuffer();
+    await adapter.put(sizes.original, originalBuf, 'image/webp');
+    for (const size of ['thumbnail', 'medium', 'large']) {
+        const { width, height, fit } = IMAGE_SIZES[size];
+        const resized = await sharp(buffer)
+            .rotate()
+            .resize(width, height, { fit, withoutEnlargement: true })
+            .webp({ quality: SIZE_QUALITY[size] })
+            .toBuffer();
+        await adapter.put(sizes[size], resized, 'image/webp');
+    }
+    // ponytail: existing objects stay JPEG under their old keys — URLs derive
+    // from the stored filename, so old rows keep working without migration.
+    return { filename, originalName: file.name, prefix, entityId, sizes };
+}
+export async function deleteMedia(adapter, prefix, entityId, filename) {
+    const keys = ['original', 'thumbnail', 'medium', 'large'].map((size) => getStorageKey(prefix, entityId, filename, size));
+    await Promise.all(keys.map((key) => adapter.delete(key).catch(() => { })));
+}
+export function getMediaUrl(adapter, prefix, entityId, filename, size = 'medium') {
+    return adapter.getUrl(getStorageKey(prefix, entityId, filename, size));
+}

package/dist/core/types.d.ts

@@ -0,0 +1,47 @@
+export type ImageSize = 'original' | 'thumbnail' | 'medium' | 'large';
+export interface StorageAdapter {
+    put(key: string, buffer: Buffer, contentType: string): Promise<void>;
+    delete(key: string): Promise<void>;
+    getUrl(key: string): string;
+}
+export interface S3Config {
+    /** Full endpoint URL, e.g. https://xxx.r2.cloudflarestorage.com */
+    endpoint: string;
+    /** Region string, e.g. 'auto' for R2 or 'us-east-1' for AWS */
+    region: string;
+    bucket: string;
+    accessKeyId: string;
+    secretAccessKey: string;
+    /** Base public URL for getUrl(), e.g. https://pub-xxx.r2.dev */
+    publicUrl: string;
+    /** Use path-style access (default: true for MinIO/R2, set false for Railway/AWS) */
+    forcePathStyle?: boolean;
+}
+export interface StoredMedia {
+    filename: string;
+    originalName: string;
+    /** Storage prefix, e.g. 'tours' or 'avatars' */
+    prefix: string;
+    /** Entity that owns this media, e.g. tourId or guideId */
+    entityId: string;
+    /** Storage keys for each size */
+    sizes: Record<ImageSize, string>;
+}
+export interface MediaValidationError {
+    isValid: false;
+    error: string;
+}
+export interface MediaValidationOk {
+    isValid: true;
+}
+export type MediaValidation = MediaValidationOk | MediaValidationError;
+export declare const DEFAULT_MAX_SIZE: number;
+export declare const DEFAULT_ALLOWED_TYPES: string[];
+export interface ValidationResult {
+    valid: boolean;
+    error?: string;
+}
+export interface MediaConfig {
+    maxFileSize?: number;
+    allowedTypes?: string[];
+}

package/dist/core/types.js

@@ -0,0 +1,3 @@
+// packages/svelte-media/src/lib/core/types.ts
+export const DEFAULT_MAX_SIZE = 5 * 1024 * 1024; // 5 MB
+export const DEFAULT_ALLOWED_TYPES = ['image/jpeg', 'image/jpg', 'image/png', 'image/webp'];

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export type { StorageAdapter, S3Config, StoredMedia, ImageSize, MediaConfig, ValidationResult, } from './core/types.js';
+export type { LocalConfig } from './core/local-adapter.js';
+export { createS3Adapter } from './core/adapter.js';
+export { createLocalAdapter } from './core/local-adapter.js';
+export { validateImageFile, generateMediaKey, getStorageKey, processAndStore, deleteMedia, getMediaUrl, IMAGE_SIZES, } from './core/process.js';
+export { default as ImageUpload } from './components/ImageUpload.svelte';
+export { default as ImageGallery } from './components/ImageGallery.svelte';

package/dist/index.js

@@ -0,0 +1,5 @@
+export { createS3Adapter } from './core/adapter.js';
+export { createLocalAdapter } from './core/local-adapter.js';
+export { validateImageFile, generateMediaKey, getStorageKey, processAndStore, deleteMedia, getMediaUrl, IMAGE_SIZES, } from './core/process.js';
+export { default as ImageUpload } from './components/ImageUpload.svelte';
+export { default as ImageGallery } from './components/ImageGallery.svelte';

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@nomideusz/svelte-media",
+  "version": "0.1.0",
+  "description": "Image upload, processing, and S3-compatible storage for Svelte 5 apps.",
+  "type": "module",
+  "sideEffects": false,
+  "license": "MIT",
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "package": "svelte-kit sync && svelte-package",
+    "prepublishOnly": "npm run package",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.1079.0",
+    "@aws-sdk/s3-request-presigner": "^3.1079.0",
+    "@paralleldrive/cuid2": "^2.3.1",
+    "sharp": "^0.34.5"
+  },
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/kit": "^2.69.1",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
+    "@types/node": "^25.9.4",
+    "svelte": "^5.56.4",
+    "svelte-check": "^4.7.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.6",
+    "vitest": "^4.1.9"
+  },
+  "keywords": [
+    "svelte",
+    "image",
+    "upload",
+    "s3",
+    "media",
+    "sharp"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nomideusz/svelte-media"
+  }
+}