@viniaraujo68/plinth 0.3.0 → 0.5.0

package/dist/table/index.d.ts

@@ -1,4 +1,7 @@
 export { default as DataTable } from "./DataTable.svelte";
-export type { Column, ColumnState, SortDirection, SortState, SortValue } from "./types.js";
+export { default as FilterBar } from "./FilterBar.svelte";
+export { DEFAULT_FILTER_LABELS, type FilterLabels } from "./filter-labels.js";
+export type { ChoiceFilter, ChoiceOperator, Column, ColumnFilter, ColumnState, FilterCombinator, FilterGroup, FilterNode, FilterOperator, FilterOption, FilterRule, NumberFilter, NumberOperator, SortDirection, SortState, SortValue, TextFilter, TextOperator, } from "./types.js";
+export { addNode, emptyFilter, filterableColumns, filterFromParams, filterRows, filterRules, filterToParams, filterValue, findRule, isFilterEmpty, isGroup, isRuleActive, nodeAt, normalizeFilter, NUMBER_OPERATORS, operatorsOf, removeNode, removeRule, replaceNode, setCombinator, setRule, TEXT_OPERATORS, type FilterableColumn, type NodePath, } from "./filter.js";
 export { ariaSort, cellText, cellValue, compareSortValues, competitionRanks, nextSort, sortFromParams, sortRows, sortToParams, sortValue, type SortParamNames, } from "./sort.js";
 export { canHideColumn, columnWidth, emptyColumnState, isColumnStateEmpty, isColumnVisible, moveColumn, orderColumns, parseColumnState, readColumnState, setColumnVisible, setColumnWidth, visibleColumns, writeColumnState, } from "./columns.js";

package/dist/table/index.js

@@ -1,7 +1,10 @@
 // A sortable table that turns into cards on a narrow screen, whose columns the reader can show,
-// hide, reorder and resize, and the pure functions behind it. Not a data grid: no filtering, no
-// virtualization, no saved views. `@viniaraujo68/plinth/table`.
+// hide, reorder, resize and filter, optionally paged, and the pure functions behind it. Not a data
+// grid: no virtualization, no saved views. `@viniaraujo68/plinth/table`.
 export { default as DataTable } from "./DataTable.svelte";
+export { default as FilterBar } from "./FilterBar.svelte";
+export { DEFAULT_FILTER_LABELS } from "./filter-labels.js";
+export { addNode, emptyFilter, filterableColumns, filterFromParams, filterRows, filterRules, filterToParams, filterValue, findRule, isFilterEmpty, isGroup, isRuleActive, nodeAt, normalizeFilter, NUMBER_OPERATORS, operatorsOf, removeNode, removeRule, replaceNode, setCombinator, setRule, TEXT_OPERATORS, } from "./filter.js";
 export { ariaSort, cellText, cellValue, compareSortValues, competitionRanks, nextSort, sortFromParams, sortRows, sortToParams, sortValue, } from "./sort.js";
 // The layout functions the table runs on, for a caller that arranges columns outside the menu —
 // a preset layout, a "show everything" shortcut, or a state kept somewhere other than storage.

package/dist/table/types.d.ts

@@ -73,7 +73,55 @@ export interface Column<T> {
      * `$derived` and the distinction stops mattering.
      */
     cell?: Snippet<[T, number]>;
+    filter?: ColumnFilter<T>;
 }
+export type TextOperator = "contains" | "eq";
+export type NumberOperator = "gte" | "gt" | "lte" | "lt" | "eq";
+export type ChoiceOperator = "in";
+export type FilterOperator = TextOperator | NumberOperator | ChoiceOperator;
+export interface FilterOption {
+    value: string;
+    label: string;
+}
+interface FilterBase<T> {
+    value?: (row: T) => unknown;
+}
+export interface TextFilter<T> extends FilterBase<T> {
+    kind: "text";
+    operators?: readonly TextOperator[];
+}
+export interface NumberFilter<T> extends FilterBase<T> {
+    kind: "number";
+    operators?: readonly NumberOperator[];
+    min?: number;
+    max?: number;
+    step?: number;
+    format?: (value: number) => string;
+}
+export interface ChoiceFilter<T> extends FilterBase<T> {
+    kind: "choice";
+    options: readonly FilterOption[];
+}
+export type ColumnFilter<T> = TextFilter<T> | NumberFilter<T> | ChoiceFilter<T>;
+export type FilterRule = {
+    key: string;
+    operator: TextOperator;
+    value: string;
+} | {
+    key: string;
+    operator: NumberOperator;
+    value: number;
+} | {
+    key: string;
+    operator: ChoiceOperator;
+    value: string[];
+};
+export type FilterCombinator = "and" | "or";
+export interface FilterGroup {
+    combinator: FilterCombinator;
+    children: FilterNode[];
+}
+export type FilterNode = FilterRule | FilterGroup;
 /**
  * The part of a table the reader arranges: which columns show, in what order, and how wide the
  * ones they dragged are. Everything is an override of what the columns declare, so a table whose
@@ -91,3 +139,4 @@ export interface ColumnState {
     /** Widths the reader dragged, in pixels. A column with no entry sizes to its content. */
     widths: Record<string, number>;
 }
+export {};

package/dist/toast/Toaster.svelte

@@ -52,11 +52,12 @@
     success: "alert-success",
     warning: "alert-warning",
     error: "alert-error",
+    loading: "",
   };
 
   // Inline paths rather than an icon font or an iconify plugin: the library must render correctly
   // in a consumer that installed nothing but the package. Variant is never signalled by color
-  // alone, which is what makes the four alerts distinguishable to a colorblind reader.
+  // alone, which is what makes the five alerts distinguishable to a colorblind reader.
   const VARIANT_ICONS: Record<ToastVariant, string[]> = {
     info: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18", "M12 16v-5", "M12 8h.01"],
     success: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18", "m8.5 12.4 2.4 2.4 4.6-5.2"],
@@ -66,8 +67,11 @@
       "M12 17h.01",
     ],
     error: ["M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18", "m14.5 9.5-5 5", "m9.5 9.5 5 5"],
+    loading: ["M21 12a9 9 0 1 1-6.22-8.56"],
   };
 
+  const POLITE_VARIANTS: ToastVariant[] = ["info", "success", "loading"];
+
   const edgeOf = (value: ToastPosition) => {
     if (value.startsWith("top")) return "top";
     if (value.startsWith("middle")) return "middle";
@@ -171,7 +175,7 @@ It is `pointer-events: none` for that reason — an empty region must never swal
       ]}
       data-testid="toast"
       data-variant={toast.variant}
-      role={toast.variant === "info" || toast.variant === "success" ? "status" : "alert"}
+      role={POLITE_VARIANTS.includes(toast.variant) ? "status" : "alert"}
       aria-atomic="true"
       onmouseenter={() => resolvedManager.pause(toast.id)}
       onmouseleave={(event) => resumeUnlessStillHeld(toast.id, event)}
@@ -181,7 +185,7 @@ It is `pointer-events: none` for that reason — an empty region must never swal
       out:scale|global={{ start: 0.96, duration: 160 }}
     >
       <svg
-        class="size-5 shrink-0"
+        class={["size-5 shrink-0", toast.variant === "loading" && "animate-spin"]}
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"

package/dist/toast/index.d.ts

@@ -1,2 +1,2 @@
-export { createToastManager, getDefaultToastManager, toast, ToastManager, type Toast, type ToastApi, type ToastManagerOptions, type ToastOptions, type ToastPosition, type ToastVariant, } from "./toast-manager.svelte.js";
+export { createToastManager, getDefaultToastManager, toast, ToastManager, type Toast, type ToastApi, type ToastManagerOptions, type ToastOptions, type ToastPosition, type ToastPromiseContent, type ToastPromiseMessages, type ToastPromiseOptions, type ToastUpdate, type ToastVariant, } from "./toast-manager.svelte.js";
 export { default as Toaster } from "./Toaster.svelte";

package/dist/toast/toast-manager.svelte.d.ts

@@ -1,5 +1,5 @@
 /** Severity a toast carries. Maps to a daisyUI alert modifier and an icon in `Toaster`. */
-export type ToastVariant = "info" | "success" | "warning" | "error";
+export type ToastVariant = "info" | "success" | "warning" | "error" | "loading";
 /**
  * Where a `Toaster` anchors its stack. Mirrors daisyUI's two-axis toast placement, so the value
  * is a rendering concern only — the manager never sees it.
@@ -29,6 +29,27 @@ export interface ToastOptions {
     description?: string;
     dismissible?: boolean;
 }
+export interface ToastUpdate {
+    message?: string;
+    variant?: ToastVariant;
+    description?: string;
+    duration?: number;
+    dismissible?: boolean;
+}
+export type ToastPromiseContent<T> = string | ((input: T) => string);
+export interface ToastPromiseMessages<T> {
+    loading: string;
+    success: ToastPromiseContent<T>;
+    error: ToastPromiseContent<unknown>;
+}
+type ToastPhaseOptions = Omit<ToastOptions, "id">;
+export interface ToastPromiseOptions {
+    id?: string;
+    loading?: ToastPhaseOptions;
+    success?: ToastPhaseOptions;
+    error?: ToastPhaseOptions;
+    onerror?: (error: unknown) => void;
+}
 export interface ToastManagerOptions {
     /**
      * How many toasts may be on screen at once; the oldest is dropped to make room. A cap exists
@@ -57,6 +78,9 @@ export declare class ToastManager {
     success: (message: string, options?: ToastOptions) => string;
     warning: (message: string, options?: ToastOptions) => string;
     error: (message: string, options?: ToastOptions) => string;
+    loading: (message: string, options?: ToastOptions) => string;
+    update: (id: string, patch: ToastUpdate) => boolean;
+    promise: <T>(input: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, options?: ToastPromiseOptions) => Promise<T | undefined>;
     /** Remove one toast. Unknown ids are ignored, so a caller may dismiss twice. */
     dismiss: (id: string) => void;
     /** Empty the queue. Useful on sign-out or on a navigation that invalidates every message. */
@@ -84,6 +108,9 @@ export interface ToastApi {
     success: (message: string, options?: ToastOptions) => string;
     warning: (message: string, options?: ToastOptions) => string;
     error: (message: string, options?: ToastOptions) => string;
+    loading: (message: string, options?: ToastOptions) => string;
+    update: (id: string, patch: ToastUpdate) => boolean;
+    promise: <T>(input: Promise<T> | (() => Promise<T>), messages: ToastPromiseMessages<T>, options?: ToastPromiseOptions) => Promise<T | undefined>;
     dismiss: (id: string) => void;
     clear: () => void;
     pause: (id: string) => void;
@@ -97,3 +124,4 @@ export interface ToastApi {
  * the server never creates the browser singleton.
  */
 export declare const toast: ToastApi;
+export {};

package/dist/toast/toast-manager.svelte.js

@@ -1,9 +1,11 @@
+import { reportError } from "../error.js";
 /** Errors and warnings linger: they carry something the reader has to act on. */
 const DEFAULT_DURATIONS = {
     info: 4000,
     success: 3000,
     warning: 5000,
     error: 5000,
+    loading: Number.POSITIVE_INFINITY,
 };
 const DEFAULT_LIMIT = 5;
 let nextSequence = 0;
@@ -41,18 +43,58 @@ export class ToastManager {
             message,
             description: options.description,
             duration: options.duration ?? this.#durations[variant],
-            dismissible: options.dismissible ?? true,
+            dismissible: options.dismissible ?? variant !== "loading",
             createdAt: existing?.createdAt ?? Date.now(),
         };
         this.#upsert(next);
         this.#enforceLimit();
         this.#restartClock(next);
+        const clock = this.#clocks.get(id);
+        if (clock)
+            clock.run = undefined;
         return id;
     };
     info = (message, options) => this.show(message, options, "info");
     success = (message, options) => this.show(message, options, "success");
     warning = (message, options) => this.show(message, options, "warning");
     error = (message, options) => this.show(message, options, "error");
+    loading = (message, options) => this.show(message, options, "loading");
+    update = (id, patch) => {
+        const existing = this.#toasts.find((toast) => toast.id === id);
+        if (!existing)
+            return false;
+        const variant = patch.variant ?? existing.variant;
+        const variantChanged = variant !== existing.variant;
+        const next = {
+            ...existing,
+            variant,
+            message: patch.message ?? existing.message,
+            description: "description" in patch ? patch.description : existing.description,
+            duration: patch.duration ?? (variantChanged ? this.#durations[variant] : existing.duration),
+            dismissible: patch.dismissible ?? (variantChanged ? variant !== "loading" : existing.dismissible),
+        };
+        this.#upsert(next);
+        this.#restartClock(next);
+        return true;
+    };
+    promise = async (input, messages, options = {}) => {
+        const id = this.show(messages.loading, { ...options.loading, id: options.id }, "loading");
+        const run = {};
+        const clock = this.#clocks.get(id);
+        if (clock)
+            clock.run = run;
+        let value;
+        try {
+            value = await (typeof input === "function" ? input() : input);
+        }
+        catch (failure) {
+            (options.onerror ?? reportError)(failure);
+            this.#settle(id, run, "error", messages.error, failure, options.error);
+            return undefined;
+        }
+        this.#settle(id, run, "success", messages.success, value, options.success);
+        return value;
+    };
     /** Remove one toast. Unknown ids are ignored, so a caller may dismiss twice. */
     dismiss = (id) => {
         this.#remove(id);
@@ -89,6 +131,20 @@ export class ToastManager {
         clock.paused = false;
         this.#start(id);
     };
+    #settle(id, run, variant, content, input, options) {
+        if (this.#clocks.get(id)?.run !== run)
+            return;
+        let message;
+        try {
+            message = typeof content === "function" ? content(input) : content;
+        }
+        catch (failure) {
+            reportError(failure);
+            this.#remove(id);
+            return;
+        }
+        this.show(message, { ...options, id }, variant);
+    }
     #upsert(toast) {
         const index = this.#toasts.findIndex((current) => current.id === toast.id);
         if (index === -1)
@@ -122,6 +178,7 @@ export class ToastManager {
             // a success) must stay frozen; starting a fresh countdown under the cursor would take the
             // message away without the reader ever leaving it.
             paused: previous?.paused ?? false,
+            run: previous?.run,
         });
         this.#start(toast.id);
     }
@@ -169,6 +226,9 @@ export const toast = {
     success: (message, options) => getDefaultToastManager().success(message, options),
     warning: (message, options) => getDefaultToastManager().warning(message, options),
     error: (message, options) => getDefaultToastManager().error(message, options),
+    loading: (message, options) => getDefaultToastManager().loading(message, options),
+    update: (id, patch) => getDefaultToastManager().update(id, patch),
+    promise: (input, messages, options) => getDefaultToastManager().promise(input, messages, options),
     dismiss: (id) => getDefaultToastManager().dismiss(id),
     clear: () => getDefaultToastManager().clear(),
     pause: (id) => getDefaultToastManager().pause(id),

package/dist/url-state/codec.d.ts

@@ -0,0 +1,15 @@
+export interface StateCodec<State, Serialized> {
+    createDefault: () => State;
+    serialize: (state: State) => Serialized;
+    parse: (serialized: Serialized) => State;
+    key: (state: State) => string;
+    normalize?: (state: State) => State;
+}
+export interface UrlStateCodec<State> extends StateCodec<State, URLSearchParams> {
+    ownedParams: () => string[];
+}
+export interface ExternalStore<Serialized> {
+    read: () => Serialized;
+    write: (serialized: Serialized) => void;
+    subscribe: (onChange: () => void) => void;
+}

package/dist/url-state/codec.js

@@ -0,0 +1 @@
+export {};

package/dist/url-state/index.d.ts

@@ -0,0 +1,5 @@
+export type { ExternalStore, StateCodec, UrlStateCodec } from "./codec.js";
+export { createParamsCodec, param, type NumberParamOptions, type ParamHandler, type ParamsCodec, type ParamsDefinition, type ScalarParamHandler, } from "./params-codec.js";
+export { changedParams } from "./search-params.js";
+export { SyncedState, type SyncedStateOptions } from "./synced-state.svelte.js";
+export { createUrlState, urlStore, type ReplaceHistory, type UrlStateOptions, type UrlStoreOptions, } from "./url-store.svelte.js";

package/dist/url-state/index.js

@@ -0,0 +1,4 @@
+export { createParamsCodec, param, } from "./params-codec.js";
+export { changedParams } from "./search-params.js";
+export { SyncedState } from "./synced-state.svelte.js";
+export { createUrlState, urlStore, } from "./url-store.svelte.js";

package/dist/url-state/params-codec.d.ts

@@ -0,0 +1,73 @@
+import type { UrlStateCodec } from "./codec.js";
+export interface ParamHandler<T> {
+    readonly defaultValue: T;
+    read: (values: readonly string[]) => T;
+    write: (value: T) => string[];
+}
+export interface ScalarParamHandler<Value, T extends Value | undefined = Value | undefined> extends ParamHandler<T> {
+    decode: (raw: string) => Value | undefined;
+    encode: (value: Value) => string | undefined;
+}
+export interface NumberParamOptions {
+    min?: number;
+    max?: number;
+    integer?: boolean;
+}
+declare function string<const T extends string>(options: {
+    oneOf: readonly T[];
+    default: NoInfer<T>;
+}): ScalarParamHandler<T, T>;
+declare function string<const T extends string>(options: {
+    oneOf: readonly T[];
+    default?: undefined;
+}): ScalarParamHandler<T, T | undefined>;
+declare function string(options: {
+    default: string;
+}): ScalarParamHandler<string, string>;
+declare function string(options?: {
+    default?: undefined;
+}): ScalarParamHandler<string, string | undefined>;
+declare function number(options: NumberParamOptions & {
+    default: number;
+}): ScalarParamHandler<number, number>;
+declare function number(options?: NumberParamOptions & {
+    default?: undefined;
+}): ScalarParamHandler<number, number | undefined>;
+declare function boolean(options: {
+    default: boolean;
+}): ScalarParamHandler<boolean, boolean>;
+declare function boolean(options?: {
+    default?: undefined;
+}): ScalarParamHandler<boolean, boolean | undefined>;
+declare function date(options: {
+    default: Date;
+}): ScalarParamHandler<Date, Date>;
+declare function date(options?: {
+    default?: undefined;
+}): ScalarParamHandler<Date, Date | undefined>;
+declare function datetime(options: {
+    default: Date;
+}): ScalarParamHandler<Date, Date>;
+declare function datetime(options?: {
+    default?: undefined;
+}): ScalarParamHandler<Date, Date | undefined>;
+export declare const param: {
+    string: typeof string;
+    number: typeof number;
+    boolean: typeof boolean;
+    date: typeof date;
+    datetime: typeof datetime;
+    list: <Value>(item: {
+        decode: (raw: string) => Value | undefined;
+        encode: (value: Value) => string | undefined;
+    }) => ParamHandler<Value[]>;
+};
+export type ParamsDefinition<State> = {
+    [Field in keyof State]: ParamHandler<State[Field]>;
+};
+export interface ParamsCodec<State> extends UrlStateCodec<State> {
+    readonly definition: ParamsDefinition<State>;
+    normalize: (state: State) => State;
+}
+export declare const createParamsCodec: <State extends object>(definition: ParamsDefinition<State>) => ParamsCodec<State>;
+export {};

package/dist/url-state/params-codec.js

@@ -0,0 +1,116 @@
+const scalar = (decode, encode, defaultValue) => {
+    const encodePresent = (value) => {
+        if (value === null || value === undefined)
+            return undefined;
+        const encoded = encode(value);
+        return encoded === "" ? undefined : encoded;
+    };
+    const encodedDefault = encodePresent(defaultValue);
+    return {
+        defaultValue,
+        decode,
+        encode,
+        read: (values) => {
+            if (values.length === 0)
+                return defaultValue;
+            return (decode(values[0]) ?? defaultValue);
+        },
+        write: (value) => {
+            const encoded = encodePresent(value);
+            return encoded === undefined || encoded === encodedDefault ? [] : [encoded];
+        },
+    };
+};
+function string(options = {}) {
+    const { oneOf } = options;
+    const accepts = (value) => oneOf === undefined || oneOf.includes(value);
+    return scalar((raw) => (accepts(raw) ? raw : undefined), (value) => (typeof value === "string" && accepts(value) ? value : undefined), options.default);
+}
+function number(options = {}) {
+    const { min = -Infinity, max = Infinity, integer = false } = options;
+    const accepts = (value) => typeof value === "number" &&
+        Number.isFinite(value) &&
+        (!integer || Number.isInteger(value)) &&
+        value >= min &&
+        value <= max;
+    return scalar((raw) => {
+        const trimmed = raw.trim();
+        if (trimmed === "")
+            return undefined;
+        const value = Number(trimmed);
+        return accepts(value) ? value : undefined;
+    }, (value) => (accepts(value) ? String(value) : undefined), options.default);
+}
+const decodeBoolean = (raw) => {
+    if (raw === "true")
+        return true;
+    if (raw === "false")
+        return false;
+    return undefined;
+};
+function boolean(options = {}) {
+    return scalar(decodeBoolean, (value) => (typeof value === "boolean" ? String(value) : undefined), options.default);
+}
+const isValidDate = (value) => value instanceof Date && !Number.isNaN(value.getTime());
+const CALENDAR_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
+const decodeCalendarDate = (raw) => {
+    const match = CALENDAR_DATE.exec(raw);
+    if (match === null)
+        return undefined;
+    const [year, month, day] = match.slice(1).map(Number);
+    const date = new Date(0);
+    date.setFullYear(year, month - 1, day);
+    date.setHours(0, 0, 0, 0);
+    const sameDay = date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day;
+    return sameDay ? date : undefined;
+};
+const pad = (value, width) => String(value).padStart(width, "0");
+const encodeCalendarDate = (value) => {
+    if (!isValidDate(value))
+        return undefined;
+    const year = value.getFullYear();
+    if (year < 0 || year > 9999)
+        return undefined;
+    return `${pad(year, 4)}-${pad(value.getMonth() + 1, 2)}-${pad(value.getDate(), 2)}`;
+};
+function date(options = {}) {
+    return scalar(decodeCalendarDate, encodeCalendarDate, options.default);
+}
+const decodeInstant = (raw) => {
+    const time = Date.parse(raw);
+    return Number.isNaN(time) ? undefined : new Date(time);
+};
+const encodeInstant = (value) => isValidDate(value) ? value.toISOString() : undefined;
+function datetime(options = {}) {
+    return scalar(decodeInstant, encodeInstant, options.default);
+}
+const list = (item) => ({
+    defaultValue: [],
+    read: (values) => values.map((raw) => item.decode(raw)).filter((value) => value !== undefined),
+    write: (value) => (Array.isArray(value) ? value : [])
+        .filter((entry) => entry !== null && entry !== undefined)
+        .map((entry) => item.encode(entry))
+        .filter((encoded) => encoded !== undefined && encoded !== ""),
+});
+export const param = { string, number, boolean, date, datetime, list };
+export const createParamsCodec = (definition) => {
+    const fields = Object.keys(definition);
+    const build = (valueOf) => structuredClone(Object.fromEntries(fields.map((field) => [field, valueOf(field)])));
+    const serialize = (state) => {
+        const params = new URLSearchParams();
+        for (const field of fields)
+            for (const value of definition[field].write(state[field]))
+                params.append(field, value);
+        return params;
+    };
+    const parse = (params) => build((field) => definition[field].read(params.getAll(field)));
+    return {
+        definition,
+        ownedParams: () => [...fields],
+        createDefault: () => build((field) => definition[field].defaultValue),
+        serialize,
+        parse,
+        normalize: (state) => parse(serialize(state)),
+        key: (state) => serialize(state).toString(),
+    };
+};

package/dist/url-state/search-params.d.ts

@@ -0,0 +1,4 @@
+export declare const pickParams: (params: URLSearchParams, names: readonly string[]) => URLSearchParams;
+export declare const withOwnedParams: (url: URL, owned: readonly string[], params: URLSearchParams) => URL;
+export declare const sameLocation: (a: URL, b: URL) => boolean;
+export declare const changedParams: (previous: URLSearchParams, next: URLSearchParams) => string[];

package/dist/url-state/search-params.js

@@ -0,0 +1,28 @@
+export const pickParams = (params, names) => {
+    const picked = new URLSearchParams();
+    for (const [name, value] of params)
+        if (names.includes(name))
+            picked.append(name, value);
+    return picked;
+};
+export const withOwnedParams = (url, owned, params) => {
+    const next = new URL(url);
+    for (const name of owned)
+        next.searchParams.delete(name);
+    for (const [name, value] of params)
+        next.searchParams.append(name, value);
+    return next;
+};
+const sortedSearch = (params) => {
+    const sorted = new URLSearchParams(params);
+    sorted.sort();
+    return sorted.toString();
+};
+export const sameLocation = (a, b) => a.origin === b.origin &&
+    a.pathname === b.pathname &&
+    a.hash === b.hash &&
+    sortedSearch(a.searchParams) === sortedSearch(b.searchParams);
+export const changedParams = (previous, next) => {
+    const names = new Set([...previous.keys(), ...next.keys()]);
+    return [...names].filter((name) => JSON.stringify(previous.getAll(name)) !== JSON.stringify(next.getAll(name)));
+};

package/dist/url-state/synced-state.svelte.d.ts

@@ -0,0 +1,20 @@
+import type { ExternalStore, StateCodec } from "./codec.js";
+export interface SyncedStateOptions<State, Serialized = never> {
+    codec: StateCodec<State, Serialized>;
+    store?: ExternalStore<Serialized>;
+    onSynced?: () => void;
+    resetOnCommit?: readonly (keyof State)[];
+}
+export declare class SyncedState<State, Serialized = never> {
+    #private;
+    draft: State;
+    committed: State;
+    constructor(options: SyncedStateOptions<State, Serialized>);
+    get isDirty(): boolean;
+    commit: () => void;
+    update: (change: (state: State) => State) => void;
+    reset: () => void;
+    revert: () => void;
+    normalized: () => State;
+    key: () => string;
+}

package/dist/url-state/synced-state.svelte.js

@@ -0,0 +1,88 @@
+import { untrack } from "svelte";
+export class SyncedState {
+    draft;
+    committed;
+    #codec;
+    #store;
+    #onSynced;
+    #resetOnCommit;
+    #hasSynced = false;
+    constructor(options) {
+        this.#codec = options.codec;
+        this.#store = options.store;
+        this.#onSynced = options.onSynced;
+        this.#resetOnCommit = options.resetOnCommit ?? [];
+        const initial = this.#codec.createDefault();
+        this.draft = $state(structuredClone(initial));
+        this.committed = $state(structuredClone(initial));
+        this.#store?.subscribe(this.#syncFromStore);
+    }
+    get isDirty() {
+        return this.#identity(this.#snapshot(this.draft)) !== this.key();
+    }
+    commit = () => {
+        const previous = this.#snapshot(this.committed);
+        const drafted = this.#snapshot(this.draft);
+        const next = this.#normalize(this.#movedBeyondResetFields(previous, drafted) ? this.#withResetFields(drafted) : drafted);
+        this.committed = next;
+        this.draft = structuredClone(next);
+        this.#writeStore();
+    };
+    update = (change) => {
+        const previous = this.#snapshot(this.committed);
+        const committed = this.#snapshot(change(this.#snapshot(this.committed)));
+        const draft = this.#snapshot(change(this.#snapshot(this.draft)));
+        const moved = this.#movedBeyondResetFields(previous, committed);
+        this.committed = this.#normalize(moved ? this.#withResetFields(committed) : committed);
+        this.draft = moved ? this.#withResetFields(draft) : draft;
+        this.#writeStore();
+    };
+    reset = () => {
+        const defaults = this.#codec.createDefault();
+        this.committed = structuredClone(defaults);
+        this.draft = structuredClone(defaults);
+        this.#writeStore();
+    };
+    revert = () => {
+        this.draft = this.#snapshot(this.committed);
+    };
+    normalized = () => this.#normalize(this.#snapshot(this.committed));
+    key = () => this.#codec.key(this.normalized());
+    #syncFromStore = () => {
+        if (this.#store === undefined)
+            return;
+        const incoming = this.#normalize(this.#codec.parse(this.#store.read()));
+        if (this.#hasSynced && this.#identity(incoming) === this.key())
+            return;
+        this.#hasSynced = true;
+        this.committed = incoming;
+        this.draft = structuredClone(incoming);
+        if (this.#onSynced)
+            untrack(this.#onSynced);
+    };
+    #writeStore() {
+        this.#store?.write(this.#codec.serialize(this.normalized()));
+    }
+    #movedBeyondResetFields(previous, next) {
+        if (this.#resetOnCommit.length === 0)
+            return false;
+        return (this.#identity(this.#withResetFields(previous)) !==
+            this.#identity(this.#withResetFields(next)));
+    }
+    #withResetFields(state) {
+        const defaults = this.#codec.createDefault();
+        const result = structuredClone(state);
+        for (const field of this.#resetOnCommit)
+            result[field] = defaults[field];
+        return result;
+    }
+    #identity(state) {
+        return this.#codec.key(this.#normalize(state));
+    }
+    #normalize(state) {
+        return this.#codec.normalize ? this.#codec.normalize(state) : state;
+    }
+    #snapshot(value) {
+        return $state.snapshot(value);
+    }
+}