@hitslop/svelte 0.1.2 → 0.3.0

package/README.md

@@ -1,29 +1,128 @@
 # @hitslop/svelte
 
+Packaging uses this workspace's TypeScript 6 compiler API; checks use TypeScript
+7 through `@typescript/native`, as does the root toolchain. The Bun patch for
+`@sveltejs/package` resolves TypeScript from the project being packaged instead
+of the packager's install directory. Keep the packager version pinned while the
+patch is needed, and recheck this resolution when upgrading it.
+
 Svelte 5 state adapters for JSON, SQLite, images, and named files in a hitSlop
 document.
 
 ```svelte
 <script lang="ts">
   import { jsonStore } from "@hitslop/svelte";
+  import { ready } from "@hitslop/runtime";
+  import { onDestroy } from "svelte";
   import counterSchema from "../schema";
 
   const document = jsonStore({
     schema: counterSchema,
     initial: { count: 0 },
   });
+  $effect(() => { if (document.isReady) ready(); });
+  onDestroy(() => document.destroy());
 </script>
 
-<button onclick={() => document.current.count += 1}>
+<button disabled={!document.isReady || document.isLoading} onclick={() => document.current.count += 1}>
   {document.current.count}
 </button>
 ```
 
 Exports: `jsonStore`, `sqliteQuery`, `imageStore`, `fileStore`, and their
-class/type counterparts. JSON stores require a Zod 4 schema. The adapter checks
-initial, loaded, externally changed, and outgoing values at the persistence
-boundary; it does not write browser storage.
+class/type counterparts. JSON stores accept the default export of root TypeBox
+`schema.ts` directly, with data types inferred from that schema. No preparation
+or generated files are needed for editor types or typechecking. The adapter
+validates initial, loaded, externally changed, and outgoing values using the
+TypeBox interpreter; it does not coerce, insert defaults, strip unknown fields,
+or write browser storage.
+
+Once loaded, JSON edits save after 150 ms without another change, or after one
+second of continuous editing. Only one write runs at a time; edits during a write
+coalesce into the newest follow-up snapshot. `await document.flush()` captures
+current state immediately, bypasses the delay, and waits for pending writes.
+Concurrent flushes share the same drain. Schema validation runs at I/O boundaries,
+so invalid edits remain in memory and are never written.
+
+`isDirty` stays true while changes are waiting, saving, or failed; `isSaving` is
+true during a write. `error` contains the display message and `errorCode` contains
+the `SlopError` code when available, including `validation_failed`,
+`revision_conflict`, and `storage_error`. A failed save retains the latest edits.
+Call `flush()` to retry, or make a new edit to resume automatic saving. Repeated
+observations of an identical value do not retry a failed save.
+
+External file changes load while the store is clean. While dirty, local edits
+win: a revision conflict reads the new revision and retries the latest full
+local snapshot once. This does not merge another writer's fields. Another
+conflict stops saving and surfaces an error. After loading, explicit `reload()`
+discards edits made before the call and adopts the file; edits made during the
+read survive. Retrying a failed initial load also preserves local edits.
+
+Call `destroy()` on teardown to stop observation and immediately drain a detached
+final snapshot. It is synchronous and safe to call twice. Pending or failed saves
+stay registered with the runtime flush barrier until a flush succeeds. For a
+user-initiated teardown where errors should prevent navigation, await `flush()`
+before removing the component. A destroyed store cannot reload or resume editing.
 
-See the [Svelte authoring examples](https://github.com/hitslop/hitslop/tree/main/examples/slops).
+See the [Svelte authoring examples](https://github.com/hitslop/hitslop/tree/master/examples/slops).
 
 MIT © 2026 hitSlop contributors.
+
+## Capture views
+
+Svelte is the supported authoring integration. Keep the interactive editor in
+`App.svelte`; optionally provide `Icon.svelte` and `Export.svelte` as ordinary
+presentation components. They share data and styles with the editor, not another
+store or persistence model:
+
+```svelte
+<script lang="ts">
+  import { IconTarget, ExportTarget } from "@hitslop/svelte";
+  import Icon from "./Icon.svelte";
+  import Export from "./Export.svelte";
+</script>
+
+<IconTarget><Icon completed={finished} total={tasks.length} /></IconTarget>
+<ExportTarget><Export checklist={checklist.current} view={activeView} /></ExportTarget>
+```
+
+`IconTarget` mounts its children only in icon capture. It supplies a transparent
+512×512 surface; supplying it opts into Finder icon refresh when a document
+closes. The signed `QuickLook/Icon.png` is immutable; only Finder metadata changes.
+Without an icon target, the existing static icon remains.
+
+`ExportTarget` mounts its children for previews and PNG/PDF exports. Pass the
+current selected view explicitly. Keep content in normal flow, with no fixed
+viewport heights, nested scrolling, editing controls, or transient notices.
+Share presentation components and theme variables to avoid visual drift.
+`Export.svelte` is optional: without a target, the existing app is captured with
+`data-slop-capture="static"` and `data-slop-export="hide"` controls omitted.
+
+Preview stays at the manifest viewport. Export uses the current window width
+and full content height. Dedicated exports have their own rectangular content
+surface rather than a stretched window mask. PNG is 2×, limited to 16,384 pixels
+per side and 24 megapixels; use PDF for longer documents. PDF is one page sized
+to the content, with selectable text. Very long PDFs combine WebKit's pages and
+scale uniformly to a maximum 14,400-point page dimension, preserving all content
+and vector sharpness within common PDF reader limits. Their physical page width
+is scaled too; no content is clipped or converted to a bitmap.
+
+The runtime waits for target mounting, used fonts, visible image decoding, and
+stable geometry, with a ten-second timeout for each preparation/settling stage.
+Motion is disabled during capture. Canvas, charts, CSS background images, or
+virtualized lists can register extra work with
+`capture.onPrepare(async (mode, signal) => { ... })`; await required assets or
+rendering and respect the abort signal. The returned function unregisters the
+hook. Hooks should not modify durable data. Do not call `ready()` until initial
+data is usable.
+
+Use `?capture=icon` or `?capture=export` in `slop dev` or the shared gallery to
+inspect disposable capture views. Reload to return to normal editing. Native
+capture remains the authority for image/PDF fidelity.
+
+Background captures operate on temporary snapshots, including a SQLite backup,
+and cannot initialize or modify the source stores. User exports use the current
+session to preserve view state; captures are serialized and restore the editor
+on success or failure. Preview and icon failures are independent. Close-time
+refreshes keep the last successful images on failure; quit gives pending jobs
+up to five seconds after data has been saved.

package/dist/ExportTarget.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { capture } from "@hitslop/runtime";
+  import { onMount, tick, type Snippet } from "svelte";
+  let { children }: { children: Snippet } = $props();
+  let visible = $state(false);
+  let element = $state<HTMLDivElement>();
+  onMount(() => {
+    
+    const node = element;
+    if (!node) return;
+    document.body.append(node);
+    const unregister = capture.registerTarget("export", {
+      element: node,
+      prepare: async () => { visible = true; await tick(); },
+      restore: async () => { visible = false; await tick(); },
+    });
+    return () => { unregister(); node.remove(); };
+  });
+</script>
+<div bind:this={element} data-slop-render="export" style:display={visible ? "block" : "none"} style:width="100%">
+  {#if visible}{@render children()}{/if}
+</div>

package/dist/ExportTarget.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const ExportTarget: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExportTarget = ReturnType<typeof ExportTarget>;
+export default ExportTarget;

package/dist/IconTarget.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { capture } from "@hitslop/runtime";
+  import { onMount, tick, type Snippet } from "svelte";
+  let { children }: { children: Snippet } = $props();
+  let visible = $state(false);
+  let element = $state<HTMLDivElement>();
+  onMount(() => {
+    if (!capture.isRenderer()) return;
+    const node = element;
+    if (!node) return;
+    document.body.append(node);
+    const unregister = capture.registerTarget("icon", {
+      element: node,
+      prepare: async () => { visible = true; await tick(); },
+      restore: async () => { visible = false; await tick(); },
+    });
+    return () => { unregister(); node.remove(); };
+  });
+</script>
+{#if capture.isRenderer()}
+<div bind:this={element} data-slop-render="icon" style:display={visible ? "block" : "none"} style:width="512px" style:height="512px" style:background="transparent">
+  {#if visible}{@render children()}{/if}
+</div>
+{/if}

package/dist/IconTarget.svelte.d.ts

@@ -0,0 +1,7 @@
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+};
+declare const IconTarget: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconTarget = ReturnType<typeof IconTarget>;
+export default IconTarget;

package/dist/file-store.svelte.d.ts

@@ -1,21 +1,10 @@
+import { MediaStore } from "./media-store.svelte.js";
 export type FileStoreOptions = {
     accept?: string;
 };
-export declare class FileStore {
-    readonly name: string;
+export declare class FileStore extends MediaStore<null> {
     readonly options: FileStoreOptions;
-    src: string | null;
-    hasCustomFile: boolean;
-    isLoading: boolean;
-    error: string | null;
-    revision: string | null;
-    private unwatch;
     constructor(name: string, options?: FileStoreOptions);
-    choose(): void;
-    replace(file: File): Promise<void>;
-    remove(): Promise<void>;
-    reload(): Promise<void>;
-    destroy(): void;
-    private adopt;
+    get hasCustomFile(): boolean;
 }
 export declare const fileStore: (name: string, options?: FileStoreOptions) => FileStore;

package/dist/file-store.svelte.js

@@ -1,78 +1,10 @@
-import { slop } from "@hitslop/runtime";
-import { chooseLocalFile, fileToBase64, mediaSourceURL, safeMediaName } from "@hitslop/runtime/adapter";
-export class FileStore {
-    name;
+import { MediaStore } from "./media-store.svelte.js";
+export class FileStore extends MediaStore {
     options;
-    src = $state(null);
-    hasCustomFile = $state(false);
-    isLoading = $state(true);
-    error = $state(null);
-    revision = $state(null);
-    unwatch = null;
     constructor(name, options = {}) {
-        this.name = name;
+        super(name, null, options.accept ?? "");
         this.options = options;
-        safeMediaName(name, "File");
-        void this.reload();
-        this.unwatch = slop.media.onChange(() => { void this.reload(); });
-    }
-    choose() {
-        chooseLocalFile(this.options.accept ?? "", (file) => { void this.replace(file).catch(() => undefined); });
-    }
-    async replace(file) {
-        this.isLoading = true;
-        this.error = null;
-        try {
-            const data = await fileToBase64(file);
-            const result = await slop.media.write(this.name, data, file.type || "application/octet-stream");
-            this.adopt(true, result.revision);
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-            throw error;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async remove() {
-        this.isLoading = true;
-        this.error = null;
-        try {
-            await slop.media.remove(this.name);
-            this.adopt(false, null);
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-            throw error;
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async reload() {
-        this.isLoading = true;
-        try {
-            const result = await slop.media.open(this.name);
-            this.adopt(result.exists, result.revision);
-            this.error = null;
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-            this.adopt(false, null);
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    destroy() {
-        this.unwatch?.();
-        this.unwatch = null;
-    }
-    adopt(exists, revision) {
-        this.hasCustomFile = exists;
-        this.revision = revision;
-        this.src = exists ? mediaSourceURL(this.name, revision) : null;
     }
+    get hasCustomFile() { return this.hasCustomMedia; }
 }
 export const fileStore = (name, options = {}) => new FileStore(name, options);

package/dist/image-store.svelte.d.ts

@@ -1,21 +1,10 @@
+import { MediaStore } from "./media-store.svelte.js";
 export type ImageStoreOptions = {
     fallback: string;
 };
-export declare class ImageStore {
-    readonly name: string;
+export declare class ImageStore extends MediaStore<string> {
     readonly options: ImageStoreOptions;
-    src: string;
-    hasCustomImage: boolean;
-    isLoading: boolean;
-    error: string | null;
-    revision: string | null;
-    private unwatch;
     constructor(name: string, options: ImageStoreOptions);
-    choose(): void;
-    replace(file: File): Promise<void>;
-    remove(): Promise<void>;
-    reload(): Promise<void>;
-    destroy(): void;
-    private adopt;
+    get hasCustomImage(): boolean;
 }
 export declare const imageStore: (name: string, options: ImageStoreOptions) => ImageStore;

package/dist/image-store.svelte.js

@@ -1,81 +1,10 @@
-import { slop } from "@hitslop/runtime";
-import { chooseLocalFile, fileToBase64, mediaSourceURL, safeMediaName } from "@hitslop/runtime/adapter";
-export class ImageStore {
-    name;
+import { MediaStore } from "./media-store.svelte.js";
+export class ImageStore extends MediaStore {
     options;
-    src = $state("");
-    hasCustomImage = $state(false);
-    isLoading = $state(true);
-    error = $state(null);
-    revision = $state(null);
-    unwatch = null;
     constructor(name, options) {
-        this.name = name;
+        super(name, options.fallback, "image/*");
         this.options = options;
-        safeMediaName(name, "Image");
-        this.src = options.fallback;
-        void this.reload();
-        this.unwatch = slop.media.onChange(() => { void this.reload(); });
-    }
-    choose() {
-        chooseLocalFile("image/*", (file) => { void this.replace(file); });
-    }
-    async replace(file) {
-        if (!file.type.startsWith("image/")) {
-            this.error = "Choose an image file.";
-            return;
-        }
-        this.isLoading = true;
-        this.error = null;
-        try {
-            const data = await fileToBase64(file, "image");
-            const result = await slop.media.write(this.name, data, file.type);
-            this.adopt(true, result.revision);
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async remove() {
-        this.isLoading = true;
-        this.error = null;
-        try {
-            await slop.media.remove(this.name);
-            this.adopt(false, null);
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    async reload() {
-        this.isLoading = true;
-        try {
-            const result = await slop.media.open(this.name);
-            this.adopt(result.exists, result.revision);
-            this.error = null;
-        }
-        catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
-            this.adopt(false, null);
-        }
-        finally {
-            this.isLoading = false;
-        }
-    }
-    destroy() {
-        this.unwatch?.();
-        this.unwatch = null;
-    }
-    adopt(exists, revision) {
-        this.hasCustomImage = exists;
-        this.revision = revision;
-        this.src = exists ? mediaSourceURL(this.name, revision) : this.options.fallback;
     }
+    get hasCustomImage() { return this.hasCustomMedia; }
 }
 export const imageStore = (name, options) => new ImageStore(name, options);

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export { jsonStore, JsonStore, type JsonStoreOptions } from "./json-store.svelte
 export { imageStore, ImageStore, type ImageStoreOptions } from "./image-store.svelte.js";
 export { fileStore, FileStore, type FileStoreOptions } from "./file-store.svelte.js";
 export { sqliteQuery, SqliteQuery } from "./sqlite-query.svelte.js";
+export { default as IconTarget } from "./IconTarget.svelte";
+export { default as ExportTarget } from "./ExportTarget.svelte";

package/dist/index.js

@@ -2,3 +2,5 @@ export { jsonStore, JsonStore } from "./json-store.svelte.js";
 export { imageStore, ImageStore } from "./image-store.svelte.js";
 export { fileStore, FileStore } from "./file-store.svelte.js";
 export { sqliteQuery, SqliteQuery } from "./sqlite-query.svelte.js";
+export { default as IconTarget } from "./IconTarget.svelte";
+export { default as ExportTarget } from "./ExportTarget.svelte";

package/dist/json-store.svelte.d.ts

@@ -1,39 +1,32 @@
-import type * as z from "zod";
-export type JsonStoreOptions<Schema extends z.ZodType> = {
-    schema: Schema;
-    initial: z.input<Schema>;
+import type { Static, TSchema } from "typebox";
+export type JsonStoreOptions<S extends TSchema> = {
+    schema: S;
+    initial: NoInfer<Static<S>>;
 };
-type JsonSchema<T> = {
-    safeParse(value: unknown): {
-        success: true;
-        data: T;
-    } | {
-        success: false;
-        error: {
-            issues: ReadonlyArray<{
-                path: PropertyKey[];
-                message: string;
-            }>;
-        };
-    };
-};
-export declare class JsonStore<T> {
-    current: T;
+export declare class JsonStore<S extends TSchema> {
+    current: Static<S>;
     isLoading: boolean;
+    isReady: boolean;
+    isDirty: boolean;
+    isSaving: boolean;
     error: string | null;
+    errorCode: "invalid_request" | "unsupported" | "revision_conflict" | "validation_failed" | "storage_error" | "limit_exceeded" | "closed" | null;
     revision: string | null;
     lastChangeSource: string;
     private persister;
-    readonly schema: JsonSchema<T>;
+    readonly schema: S;
     private unwatch;
     private stopEffect;
-    constructor(options: {
-        schema: JsonSchema<T>;
-        initial: unknown;
-    });
+    private unregisterFlush;
+    private destroyed;
+    private finalSnapshot;
+    private finalError;
+    constructor(options: JsonStoreOptions<S>);
     reload(): Promise<void>;
     destroy(): void;
+    flush(): Promise<void>;
+    private getLocal;
+    private setError;
     private parse;
 }
-export declare const jsonStore: <Schema extends z.ZodType>(options: JsonStoreOptions<Schema>) => JsonStore<z.output<Schema>>;
-export {};
+export declare function jsonStore<S extends TSchema>(options: JsonStoreOptions<S>): JsonStore<S>;

package/dist/json-store.svelte.js

@@ -1,22 +1,36 @@
-import { slop } from "@hitslop/runtime";
-import { JsonPersister } from "@hitslop/runtime/adapter";
+import { slop, SlopError } from "@hitslop/runtime";
+import { JsonPersister, registerFlush } from "@hitslop/runtime/adapter";
 import { untrack } from "svelte";
+import { validate } from "@hitslop/schema/validation";
+import { assertJSON } from "@hitslop/schema/json";
 const snapshot = (value) => {
-    const json = JSON.stringify($state.snapshot(value));
-    if (json === undefined)
-        throw new Error("JsonStore values must be JSON-serializable");
-    return { json, value: JSON.parse(json) };
+    try {
+        const detached = $state.snapshot(value);
+        assertJSON(detached);
+        return { json: JSON.stringify(detached), value: detached };
+    }
+    catch (error) {
+        throw new SlopError("validation_failed", error instanceof Error ? error.message : String(error));
+    }
 };
 export class JsonStore {
     current = $state();
     isLoading = $state(true);
+    isReady = $state(false);
+    isDirty = $state(false);
+    isSaving = $state(false);
     error = $state(null);
+    errorCode = $state(null);
     revision = $state(null);
     lastChangeSource = $state("package");
     persister;
     schema;
     unwatch = null;
     stopEffect = null;
+    unregisterFlush = null;
+    destroyed = false;
+    finalSnapshot = null;
+    finalError = null;
     constructor(options) {
         this.schema = options.schema;
         const fallbackSnapshot = snapshot(this.parse(options.initial));
@@ -32,13 +46,19 @@ export class JsonStore {
                     const result = await slop.json.read();
                     return { ...result, value: this.parse(result.value) };
                 },
-                write: (value, revision) => slop.json.write(this.parse(value), revision),
+                write: (value, revision) => slop.json.write(this.parse(value, false), revision),
+            },
+            getLocal: () => this.getLocal(),
+            onAdopt: (value, source) => {
+                this.current = value;
+                this.lastChangeSource = source;
+                if (this.destroyed)
+                    this.finalSnapshot = snapshot(value);
             },
-            getLocal: () => snapshot(this.parse(this.current)),
-            onAdopt: (value, source) => { this.current = value; this.lastChangeSource = source; },
             onRevision: (revision) => { this.revision = revision; },
             onSource: (source) => { this.lastChangeSource = source; },
-            onError: (message) => { this.error = message; },
+            onError: (error) => this.setError(error),
+            onStatus: ({ isDirty, isSaving }) => { this.isDirty = isDirty; this.isSaving = isSaving; },
         });
         // Snapshotting reads the complete proxy tree, so one effect run observes all
         // nested mutations. This intentionally favors small, document-sized JSON.
@@ -47,45 +67,93 @@ export class JsonStore {
             $effect(() => {
                 let local;
                 try {
-                    local = snapshot(this.parse(this.current));
+                    local = snapshot(this.current);
                 }
                 catch (error) {
-                    untrack(() => { this.error = error instanceof Error ? error.message : String(error); });
+                    untrack(() => this.persister.localInvalid(error));
                     return;
                 }
                 untrack(() => this.persister.localChanged(local.json, local.value));
             });
         });
         void this.reload();
+        this.unregisterFlush = registerFlush(() => this.flush());
         this.unwatch = slop.json.onChange((event) => this.persister.externalChanged(event.revision));
     }
     async reload() {
+        if (this.destroyed)
+            throw new SlopError("closed", "JSON store is destroyed");
         this.isLoading = true;
         try {
             await this.persister.reload();
+            this.isReady = true;
         }
         catch (error) {
-            this.error = error instanceof Error ? error.message : String(error);
+            this.setError(error);
         }
         finally {
             this.isLoading = false;
         }
     }
     destroy() {
+        if (this.destroyed)
+            return;
+        try {
+            this.finalSnapshot = snapshot(this.current);
+        }
+        catch (error) {
+            this.finalError = error;
+        }
+        this.destroyed = true;
         this.unwatch?.();
         this.unwatch = null;
         this.stopEffect?.();
         this.stopEffect = null;
+        // Keep failed writes registered so the host barrier can report/retry them.
+        void this.flush().catch(() => undefined);
     }
-    parse(value) {
-        const result = this.schema.safeParse(value);
-        if (result.success)
-            return result.data;
-        const detail = result.error.issues.map((issue) => {
-            const path = issue.path.length ? issue.path.join(".") : "value";
-            return `${path}: ${issue.message}`;
-        }).join("; ");
-        throw new Error(`JSON schema validation failed: ${detail}`);
+    async flush() {
+        try {
+            let local;
+            try {
+                local = this.getLocal();
+            }
+            catch (error) {
+                this.persister.localInvalid(error);
+                throw error;
+            }
+            this.persister.localChanged(local.json, local.value);
+            await this.persister.flush();
+            if (this.destroyed) {
+                this.unregisterFlush?.();
+                this.unregisterFlush = null;
+            }
+        }
+        catch (error) {
+            this.setError(error);
+            throw error;
+        }
+    }
+    getLocal() {
+        if (this.finalError)
+            throw this.finalError;
+        return this.finalSnapshot ?? snapshot(this.current);
+    }
+    setError(error) {
+        this.error = error == null ? null : error instanceof Error ? error.message : String(error);
+        this.errorCode = error instanceof SlopError ? error.code : null;
     }
+    parse(value, checkJSON = true) {
+        try {
+            if (checkJSON)
+                assertJSON(value);
+            return validate(this.schema, value);
+        }
+        catch (error) {
+            throw new SlopError("validation_failed", error instanceof Error ? error.message : String(error));
+        }
+    }
+}
+export function jsonStore(options) {
+    return new JsonStore(options);
 }
-export const jsonStore = (options) => new JsonStore(options);

package/dist/media-store.svelte.d.ts

@@ -0,0 +1,25 @@
+/** Shared lifecycle for named files and images; subclasses only supply policy. */
+export declare class MediaStore<Fallback extends string | null> {
+    readonly name: string;
+    private readonly fallback;
+    private readonly accept;
+    src: string | Fallback | undefined;
+    hasCustomMedia: boolean;
+    isLoading: boolean;
+    error: string | null;
+    revision: string | null;
+    private readonly task;
+    private readonly unwatch;
+    private mutations;
+    private disposed;
+    private failure;
+    private readonly unregisterFlush;
+    constructor(name: string, fallback: Fallback, accept: string);
+    choose(): void;
+    replace(file: File): Promise<void>;
+    remove(): Promise<void>;
+    private mutate;
+    flush(): Promise<void>;
+    reload(): Promise<void>;
+    destroy(): void;
+}

package/dist/media-store.svelte.js

@@ -0,0 +1,80 @@
+import { slop } from "@hitslop/runtime";
+import { chooseLocalFile, fileToBase64, LatestTask, mediaSourceURL, registerFlush, safeMediaName } from "@hitslop/runtime/adapter";
+/** Shared lifecycle for named files and images; subclasses only supply policy. */
+export class MediaStore {
+    name;
+    fallback;
+    accept;
+    src = $state();
+    hasCustomMedia = $state(false);
+    isLoading = $state(true);
+    error = $state(null);
+    revision = $state(null);
+    task = new LatestTask();
+    unwatch;
+    mutations = Promise.resolve();
+    disposed = false;
+    failure;
+    unregisterFlush;
+    constructor(name, fallback, accept) {
+        this.name = name;
+        this.fallback = fallback;
+        this.accept = accept;
+        safeMediaName(name);
+        this.src = fallback;
+        this.unregisterFlush = registerFlush(() => this.flush());
+        this.unwatch = slop.media.onChange((event) => { if (!event.name || event.name === name)
+            void this.reload(); });
+        void this.reload();
+    }
+    choose() { chooseLocalFile(this.accept, (file) => { void this.replace(file).catch(() => undefined); }); }
+    async replace(file) {
+        if (this.accept === "image/*" && !file.type.startsWith("image/")) {
+            this.error = "Choose an image file.";
+            throw new Error(this.error);
+        }
+        await this.mutate(async () => {
+            const data = await fileToBase64(file);
+            const result = await slop.media.write(this.name, data, file.type || "application/octet-stream");
+            return { exists: true, revision: result.revision };
+        });
+    }
+    async remove() {
+        await this.mutate(async () => { await slop.media.remove(this.name); return { exists: false, revision: null }; });
+    }
+    async mutate(operation) {
+        if (this.disposed)
+            throw new Error("Media store is closed.");
+        this.task.invalidate();
+        this.isLoading = true;
+        this.error = null;
+        const mutation = this.mutations.then(async () => { await operation(); this.failure = undefined; });
+        this.mutations = mutation.catch(() => undefined);
+        try {
+            await mutation;
+            await this.reload();
+        }
+        catch (error) {
+            this.failure = error;
+            if (!this.disposed) {
+                this.error = error instanceof Error ? error.message : String(error);
+                this.isLoading = false;
+            }
+            throw error;
+        }
+    }
+    async flush() { await this.mutations; if (this.failure)
+        throw this.failure; }
+    async reload() {
+        if (this.disposed)
+            return;
+        this.isLoading = true;
+        await this.task.run(() => slop.media.open(this.name), (result) => {
+            this.hasCustomMedia = result.exists;
+            this.revision = result.revision;
+            this.src = result.exists ? mediaSourceURL(this.name, result.revision) : this.fallback;
+            this.error = null;
+        }, (error) => { this.error = error instanceof Error ? error.message : String(error); }, () => { this.isLoading = false; });
+    }
+    destroy() { this.disposed = true; this.task.dispose(); this.unwatch(); this.unregisterFlush(); }
+}

package/dist/sqlite-query.svelte.d.ts

@@ -6,6 +6,7 @@ export declare class SqliteQuery<T> {
     error: string | null;
     lastChangeSource: string;
     private unwatch;
+    private task;
     constructor(statement: SlopStatement);
     execute(statement: SlopStatement): Promise<void>;
     reload(): Promise<void>;

package/dist/sqlite-query.svelte.js

@@ -1,4 +1,5 @@
 import { slop } from "@hitslop/runtime";
+import { LatestTask } from "@hitslop/runtime/adapter";
 export class SqliteQuery {
     statement;
     current = $state([]);
@@ -6,22 +7,17 @@ export class SqliteQuery {
     error = $state(null);
     lastChangeSource = $state("package");
     unwatch = null;
+    task = new LatestTask();
     constructor(statement) {
         this.statement = statement;
         void this.reload();
         this.unwatch = slop.db.onChange((event) => { this.lastChangeSource = event.source; void this.reload(); });
     }
     async execute(statement) { await slop.db.execute(statement.sql, statement.parameters ?? []); }
-    async reload() { this.isLoading = true; try {
-        this.current = await slop.db.query(this.statement.sql, this.statement.parameters ?? []);
-        this.error = null;
+    async reload() {
+        this.isLoading = true;
+        await this.task.run(() => slop.db.query(this.statement.sql, this.statement.parameters ?? []), (rows) => { this.current = rows; this.error = null; }, (error) => { this.error = error instanceof Error ? error.message : String(error); }, () => { this.isLoading = false; });
     }
-    catch (error) {
-        this.error = error instanceof Error ? error.message : String(error);
-    }
-    finally {
-        this.isLoading = false;
-    } }
-    destroy() { this.unwatch?.(); this.unwatch = null; }
+    destroy() { this.task.dispose(); this.unwatch?.(); this.unwatch = null; }
 }
 export const sqliteQuery = (statement) => new SqliteQuery(statement);

package/package.json

@@ -1,37 +1,55 @@
 {
   "name": "@hitslop/svelte",
-  "version": "0.1.2",
+  "version": "0.3.0",
   "description": "Svelte 5 state adapters for the hitSlop runtime.",
   "license": "MIT",
-  "repository": { "type": "git", "url": "git+https://github.com/hitslop/hitslop.git", "directory": "packages/svelte" },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hitslop/hitslop.git",
+    "directory": "packages/svelte"
+  },
   "homepage": "https://hitslop.com",
-  "bugs": { "url": "https://github.com/hitslop/hitslop/issues" },
-  "keywords": ["hitslop", "svelte", "local-first", "mini-apps"],
-  "publishConfig": { "access": "public" },
+  "bugs": {
+    "url": "https://github.com/hitslop/hitslop/issues"
+  },
+  "keywords": [
+    "hitslop",
+    "svelte",
+    "local-first",
+    "mini-apps"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "files": [
     "dist"
   ],
   "exports": {
-    ".": "./dist/index.js"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
   },
   "scripts": {
-    "build": "bun ../../scripts/clean-dist.ts && tsc -p tsconfig.build.json",
+    "build": "bun ../../scripts/clean-dist.ts && svelte-package -i src -o dist",
     "check": "svelte-check --tsgo --tsconfig ./tsconfig.json",
     "test": "bun run --cwd ../runtime build && bun test"
   },
   "dependencies": {
-    "@hitslop/runtime": "^0.1.2"
+    "@hitslop/runtime": "^0.3.0",
+    "@hitslop/schema": "^0.3.0",
+    "typebox": "^1.3.26"
   },
   "peerDependencies": {
-    "svelte": "^5.0.0",
-    "zod": "^4.0.0"
+    "svelte": "^5.0.0"
   },
   "devDependencies": {
+    "@sveltejs/package": "2.5.8",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "svelte": "^5.57.0",
     "svelte-check": "^4.7.6",
-    "@typescript/native": "npm:typescript@^7.0.2",
-    "typescript": "^6.0.3",
-    "zod": "^4.5.2"
+    "typescript": "^6.0.3"
   }
 }