@elurjs/ionic 1.6.1

package/dist/lib/overlays.d.ts

@@ -0,0 +1,400 @@
+/**
+ * @elurjs/ionic / overlays.ts
+ *
+ * Reactive overlay controllers for Elur following the `create*` pattern
+ * (`createStore`, `createRouter`, `createForm` → `createToast`, `createAlert`, etc.).
+ *
+ * Each controller provides:
+ *   - `presented: Signal<boolean>` — reactive presentation state
+ *   - `result: Signal<OverlayEventDetail | null>` — dismiss event detail
+ *   - `present(opts)` — creates + presents the overlay
+ *   - `dismiss(data?, role?)` — dismisses the active overlay
+ *   - `dispose()` — transactional cleanup, dismisses if still presented
+ *
+ * Stale-result protection: only the most recent `present()` call's dismiss
+ * event updates the result signal. Latest-wins: presenting a new overlay
+ * dismisses the previous one.
+ *
+ * @example Function component (preferred)
+ * ```ts
+ * import { signal, html } from "@elurjs/core";
+ * import { createToast, createAlert } from "@elurjs/ionic";
+ *
+ * function SettingsPage() {
+ *   // Create overlay controllers — signals close over function scope
+ *   const toast = createToast();
+ *   const alert = createAlert();
+ *
+ *   const save = async () => {
+ *     // Use withLoading for async tasks
+ *     const ok = await withLoading({ message: "Saving..." }, async () => {
+ *       await fetch("/api/settings", { method: "POST" });
+ *     });
+ *     toast.present({ message: "Saved!", duration: 1500 });
+ *   };
+ *
+ *   const deleteAccount = () => {
+ *     // confirm() returns a Promise<boolean>
+ *     confirm({
+ *       header: "Delete account",
+ *       message: "This cannot be undone.",
+ *       confirmText: "Delete",
+ *     }).then((yes) => {
+ *       if (yes) alert.present({ header: "Done", message: "Account deleted" });
+ *     });
+ *   };
+ *
+ *   return html`
+ *     <ion-content>
+ *       <ion-button @click=${save}>Save</ion-button>
+ *       <ion-button color="danger" @click=${deleteAccount}>Delete</ion-button>
+ *     </ion-content>
+ *   `;
+ * }
+ * ```
+ *
+ * @example Class component with lifecycle cleanup
+ * ```ts
+ * import { ElurComponent, html, signal } from "@elurjs/core";
+ * import { createLoading, IonPage } from "@elurjs/ionic";
+ *
+ * class ProfilePage extends IonPage {
+ *   private loading = createLoading();
+ *   private data = signal<unknown>(null);
+ *
+ *   override async onMount() {
+ *     // withLoading auto-dismisses on settle or error
+ *     const result = await withLoading(
+ *       { message: "Loading profile..." },
+ *       () => fetch("/api/profile").then(r => r.json()),
+ *     );
+ *     this.data.value = result;
+ *   }
+ *
+ *   override onUnmount() {
+ *     // Dispose all overlay controllers to prevent leaks
+ *     this.loading.dispose();
+ *   }
+ *
+ *   override render() {
+ *     return html`
+ *       <ion-content>
+ *         <p>${() => JSON.stringify(this.data.value)}</p>
+ *       </ion-content>
+ *     `;
+ *   }
+ * }
+ * ```
+ *
+ * @example Reactive UI driven by overlay signals
+ * ```ts
+ * import { signal, html } from "@elurjs/core";
+ * import { createModal } from "@elurjs/ionic";
+ *
+ * function ProductList() {
+ *   const modal = createModal();
+ *   const selected = signal<string | null>(null);
+ *
+ *   const openDetail = (id: string) => {
+ *     selected.value = id;
+ *     modal.present({ component: "product-detail" });
+ *   };
+ *
+ *   return html`
+ *     <ion-content>
+ *       <ion-list>
+ *         <ion-button @click=${() => openDetail("1")}>Product 1</ion-button>
+ *       </ion-list>
+ *
+ *       <!-- Reactively show dismiss result -->
+ *       ${() => modal.result.value
+ *         ? html`<p>Modal closed with role: ${modal.result.value.role}</p>`
+ *         : null}
+ *
+ *       <!-- Reactively disable button while modal is open -->
+ *       <ion-button
+ *         disabled=${() => modal.presented.value}
+ *         @click=${() => openDetail("2")}
+ *       >Product 2</ion-button>
+ *     </ion-content>
+ *   `;
+ * }
+ * ```
+ */
+import { type Signal, type ElurTemplate, type ElurComponent } from "@elurjs/core";
+import { toastController, alertController, loadingController, actionSheetController, popoverController, modalController, pickerController } from "@ionic/core";
+export interface OverlayHandle<TDetail = unknown> {
+    /** True while the overlay is presented (visible). */
+    readonly presented: Signal<boolean>;
+    /** The dismiss event detail (role, data) — null until dismissed. */
+    readonly result: Signal<TDetail | null>;
+    /** Present the overlay with the given options. */
+    present(options: Record<string, unknown>): Promise<void>;
+    /** Dismiss the active overlay with optional data and role. */
+    dismiss(data?: unknown, role?: string): Promise<boolean>;
+    /** Cleanup: dismisses any active overlay. Safe to call multiple times. */
+    dispose(): void;
+}
+/**
+ * Create a reactive toast overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createToast(): OverlayHandle;
+/**
+ * Create a reactive alert overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createAlert(): OverlayHandle;
+/**
+ * Create a reactive loading overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createLoading(): OverlayHandle;
+/**
+ * Create a reactive action-sheet overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createActionSheet(): OverlayHandle;
+/**
+ * Create a reactive popover overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createPopover(): OverlayHandle;
+/**
+ * Create a reactive modal overlay controller.
+ * Call `dispose()` in `onUnmount()` when used in a class component.
+ */
+export declare function createModal(): OverlayHandle;
+/**
+ * Present a toast and return immediately (fire-and-forget).
+ * The toast auto-dismisses after its duration.
+ *
+ * @example
+ * ```ts
+ * import { showToast } from "@elurjs/ionic";
+ *
+ * showToast({ message: "Saved!", duration: 1500 });
+ * ```
+ */
+export declare function showToast(options: Record<string, unknown>): Promise<void>;
+/**
+ * Present a loading overlay, run an async task, then dismiss.
+ * Returns the task result. If the task throws, the loading is still dismissed.
+ *
+ * @example
+ * ```ts
+ * import { withLoading } from "@elurjs/ionic";
+ *
+ * const data = await withLoading(
+ *   { message: "Fetching..." },
+ *   () => fetch("/api/data").then(r => r.json()),
+ * );
+ * ```
+ */
+export declare function withLoading<T>(options: Record<string, unknown>, task: () => Promise<T>): Promise<T>;
+/**
+ * Present a confirm alert and return true if "OK" was clicked, false otherwise.
+ *
+ * @example
+ * ```ts
+ * import { confirm } from "@elurjs/ionic";
+ *
+ * const yes = await confirm({
+ *   header: "Delete",
+ *   message: "Are you sure?",
+ *   confirmText: "Delete",
+ * });
+ * if (yes) deleteItem();
+ * ```
+ */
+export declare function confirm(options: {
+    header?: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+}): Promise<boolean>;
+export { toastController, alertController, loadingController, actionSheetController, popoverController, modalController, pickerController, };
+/**
+ * A Elur FrameworkDelegate that can mount ElurTemplate or ElurComponent
+ * instances inside Ionic overlays (modal, popover).
+ *
+ * Ionic's `FrameworkDelegate` interface has two methods:
+ *   - `attachViewToDom(container, component, props, cssClasses)` → HTMLElement
+ *   - `removeViewFromDom(container, component)` → void
+ *
+ * For Elur, "component" is a function that returns a ElurTemplate or
+ * ElurComponent. The delegate creates a wrapper div, mounts the Elur
+ * content into it, appends it to the overlay, and tracks the unmount
+ * handle for cleanup on dismiss.
+ */
+export interface ElurOverlayDelegate {
+    attachViewToDom(container: HTMLElement, component: () => ElurTemplate | ElurComponent, propsOrData?: Record<string, unknown>, cssClasses?: string[]): Promise<HTMLElement>;
+    removeViewFromDom(container: HTMLElement, component: unknown): Promise<void>;
+}
+/**
+ * Create a Elur delegate for use with Ionic modal/popover controllers.
+ * The delegate mounts Elur templates inside overlays and cleans up on
+ * removal.
+ *
+ * @example
+ * ```ts
+ * import { createElurDelegate, createModal } from "@elurjs/ionic";
+ * import { html, signal } from "@elurjs/core";
+ *
+ * const delegate = createElurDelegate();
+ * const modal = createModal();
+ *
+ * // The delegate is passed via `delegate` option
+ * modal.present({
+ *   component: () => html`<ion-content><h1>Hello from modal!</h1></ion-content>`,
+ *   delegate,
+ * });
+ * ```
+ */
+export declare function createElurDelegate(): ElurOverlayDelegate;
+/**
+ * Options for presenting a modal with Elur content.
+ * The `component` function returns a ElurTemplate or ElurComponent that will
+ * be mounted inside the modal via the Elur delegate.
+ */
+export interface ModalOptions {
+    /** Function returning the Elur content to mount inside the modal. */
+    component: () => ElurTemplate | ElurComponent;
+    /** Component props/data passed to the delegate. */
+    componentProps?: Record<string, unknown>;
+    /** CSS classes to add to the mounted content wrapper. */
+    cssClasses?: string[];
+    /** Modal-specific options. */
+    backdropDismiss?: boolean;
+    showBackdrop?: boolean;
+    animated?: boolean;
+    canDismiss?: boolean | (() => Promise<boolean>);
+    /** Custom delegate (if not provided, a default Elur delegate is used). */
+    delegate?: ElurOverlayDelegate;
+    [key: string]: unknown;
+}
+/**
+ * Options for presenting a popover with Elur content.
+ */
+export interface PopoverOptions {
+    /** Function returning the Elur content to mount inside the popover. */
+    component: () => ElurTemplate | ElurComponent;
+    /** Component props/data passed to the delegate. */
+    componentProps?: Record<string, unknown>;
+    /** CSS classes to add to the mounted content wrapper. */
+    cssClasses?: string[];
+    /** The element that the popover should be anchored to. */
+    event?: Event | {
+        target: HTMLElement;
+    };
+    /** Popover-specific options. */
+    backdropDismiss?: boolean;
+    showBackdrop?: boolean;
+    animated?: boolean;
+    /** Custom delegate (if not provided, a default Elur delegate is used). */
+    delegate?: ElurOverlayDelegate;
+    [key: string]: unknown;
+}
+/**
+ * Enhanced modal controller with Elur delegate support.
+ * Unlike the basic `createModal()`, this automatically creates and uses
+ * a Elur delegate so `component` can be a ElurTemplate/ElurComponent.
+ *
+ * @example
+ * ```ts
+ * import { createModalController, createElurDelegate } from "@elurjs/ionic";
+ * import { html, signal } from "@elurjs/core";
+ *
+ * const modal = createModalController();
+ *
+ * modal.present({
+ *   component: () => html`
+ *     <ion-header>
+ *       <ion-toolbar><ion-title>Settings</ion-title></ion-toolbar>
+ *     </ion-header>
+ *     <ion-content><p>Modal content here</p></ion-content>
+ *   `,
+ * });
+ *
+ * // React to dismiss
+ * effect(() => {
+ *   if (modal.result.value) {
+ *     console.log("Modal dismissed:", modal.result.value);
+ *   }
+ * });
+ * ```
+ */
+export declare function createModalController(delegate?: ElurOverlayDelegate): OverlayHandle;
+/**
+ * Enhanced popover controller with Elur delegate support.
+ * Automatically creates and uses a Elur delegate so `component` can be
+ * a ElurTemplate/ElurComponent.
+ *
+ * @example
+ * ```ts
+ * import { createPopoverController } from "@elurjs/ionic";
+ * import { html } from "@elurjs/core";
+ *
+ * const popover = createPopoverController();
+ *
+ * // In an event handler:
+ * popover.present({
+ *   component: () => html`<ion-content><p>Popover content</p></ion-content>`,
+ *   event, // the click event for anchoring
+ * });
+ * ```
+ */
+export declare function createPopoverController(delegate?: ElurOverlayDelegate): OverlayHandle;
+/**
+ * Options for a picker column.
+ */
+export interface PickerColumnOption {
+    text: string;
+    value: string | number;
+    disabled?: boolean;
+}
+/**
+ * Options for presenting a picker overlay.
+ */
+export interface PickerOptions {
+    columns: Array<{
+        name: string;
+        options: PickerColumnOption[];
+        selectedIndex?: number;
+    }>;
+    buttons?: Array<{
+        text: string;
+        role?: string;
+        handler?: (selected: Record<string, PickerColumnOption>) => void;
+    }>;
+    cssClass?: string;
+    animated?: boolean;
+    backdropDismiss?: boolean;
+    [key: string]: unknown;
+}
+/**
+ * Create a reactive picker overlay controller.
+ * Pickers are column-based selection overlays (like iOS date pickers).
+ *
+ * @example
+ * ```ts
+ * import { createPicker } from "@elurjs/ionic";
+ *
+ * const picker = createPicker();
+ * await picker.present({
+ *   columns: [{
+ *     name: "size",
+ *     options: [
+ *       { text: "Small", value: "sm" },
+ *       { text: "Medium", value: "md" },
+ *       { text: "Large", value: "lg" },
+ *     ],
+ *   }],
+ *   buttons: [
+ *     { text: "Cancel", role: "cancel" },
+ *     { text: "Done", role: "confirm" },
+ *   ],
+ * });
+ * ```
+ */
+export declare function createPicker(): OverlayHandle;

package/dist/lib/overlays.js

@@ -0,0 +1,161 @@
+import { mount as e, signal as t } from "@elurjs/core";
+import { actionSheetController as n, alertController as r, loadingController as i, modalController as a, pickerController as o, popoverController as s, toastController as c } from "@ionic/core";
+//#region src/overlays.ts
+var l = null, u = {
+	async attachViewToDom(t, n, r, i) {
+		if (typeof n == "function") {
+			let r = n();
+			return l = e(r, t), t;
+		}
+		if (typeof n == "string") {
+			let e = document.createElement(n);
+			return i && i.forEach((t) => e.classList.add(t)), t.appendChild(e), e;
+		}
+		return n instanceof HTMLElement ? (i && i.forEach((e) => n.classList.add(e)), t.appendChild(n), n) : t;
+	},
+	async removeViewFromDom(e, t) {
+		l &&= (l.unmount(), null);
+	}
+};
+function d(e) {
+	let n = t(!1), r = t(null), i = null, a = !1;
+	async function o(t) {
+		if (a) return;
+		if (i) try {
+			await i.el.dismiss();
+		} catch {}
+		let o = (i?.token ?? 0) + 1, s = { ...t };
+		typeof s.component == "function" && !s.delegate && (s.delegate = u);
+		let c = await e.create(s);
+		await c.present(), i = {
+			el: c,
+			dismissPromise: c.onDidDismiss?.() ?? Promise.resolve(null),
+			token: o
+		}, n.value = !0, i.dismissPromise.then((e) => {
+			i?.token === o && !a && (r.value = e, n.value = !1, i = null);
+		}).catch(() => {
+			i?.token === o && !a && (n.value = !1, i = null);
+		});
+	}
+	async function s(e, t) {
+		if (!i || a) return !1;
+		try {
+			return await i.el.dismiss(e, t);
+		} catch {
+			return !1;
+		}
+	}
+	function c() {
+		if (!a) {
+			if (a = !0, i) {
+				try {
+					i.el.dismiss();
+				} catch {}
+				i = null;
+			}
+			n.value = !1;
+		}
+	}
+	return {
+		presented: n,
+		result: r,
+		present: o,
+		dismiss: s,
+		dispose: c
+	};
+}
+function f() {
+	return d(c);
+}
+function p() {
+	return d(r);
+}
+function m() {
+	return d(i);
+}
+function h() {
+	return d(n);
+}
+function g() {
+	return d(s);
+}
+function _() {
+	return d(a);
+}
+async function v(e) {
+	await (await c.create(e)).present();
+}
+async function y(e, t) {
+	let n = await i.create(e);
+	await n.present();
+	try {
+		return await t();
+	} finally {
+		await n.dismiss();
+	}
+}
+async function b(e) {
+	return new Promise((t) => {
+		r.create({
+			header: e.header,
+			message: e.message,
+			buttons: [{
+				text: e.cancelText ?? "Cancel",
+				role: "cancel",
+				handler: () => t(!1)
+			}, {
+				text: e.confirmText ?? "OK",
+				role: "confirm",
+				handler: () => t(!0)
+			}]
+		}).then((e) => e.present());
+	});
+}
+function x() {
+	let t = /* @__PURE__ */ new Map();
+	return {
+		async attachViewToDom(n, r, i, a) {
+			let o = document.createElement("div");
+			if (a) for (let e of a) o.classList.add(e);
+			let s = e(r(), o);
+			return t.set(o, s.unmount), n.appendChild(o), o;
+		},
+		async removeViewFromDom(e, n) {
+			let r = n, i = t.get(r);
+			i && (i(), t.delete(r)), r.parentElement && r.remove();
+		}
+	};
+}
+function S(e) {
+	let t = e ?? x(), n = d(a), r = n.present;
+	async function i(e) {
+		await r({
+			...e,
+			delegate: t
+		});
+	}
+	return {
+		...n,
+		present: i
+	};
+}
+function C(e) {
+	let t = e ?? x(), n = d(s), r = n.present;
+	async function i(e) {
+		await r({
+			...e,
+			delegate: t
+		});
+	}
+	return {
+		...n,
+		present: i
+	};
+}
+function w() {
+	return typeof customElements < "u" && (customElements.get("ion-picker-legacy") || import("@ionic/core/components/ion-picker-legacy.js").then((e) => e.defineCustomElement()).catch(() => {}), customElements.get("ion-picker-legacy-column") || import("@ionic/core/components/ion-picker-legacy-column.js").then((e) => e.defineCustomElement()).catch(() => {}), customElements.get("ion-backdrop") || import("@ionic/core/components/ion-backdrop.js").then((e) => e.defineCustomElement()).catch(() => {})), d(o);
+}
+//#endregion
+export { n as actionSheetController, r as alertController, b as confirm, h as createActionSheet, p as createAlert, x as createElurDelegate, m as createLoading, _ as createModal, S as createModalController, w as createPicker, g as createPopover, C as createPopoverController, f as createToast, i as loadingController, a as modalController, o as pickerController, s as popoverController, v as showToast, c as toastController, y as withLoading };
+
+//# sourceMappingURL=overlays.js.map

package/dist/lib/overlays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlays.js","names":[],"sources":["../../src/overlays.ts"],"sourcesContent":["/**\n * @elurjs/ionic / overlays.ts\n *\n * Reactive overlay controllers for Elur following the `create*` pattern\n * (`createStore`, `createRouter`, `createForm` → `createToast`, `createAlert`, etc.).\n *\n * Each controller provides:\n *   - `presented: Signal<boolean>` — reactive presentation state\n *   - `result: Signal<OverlayEventDetail | null>` — dismiss event detail\n *   - `present(opts)` — creates + presents the overlay\n *   - `dismiss(data?, role?)` — dismisses the active overlay\n *   - `dispose()` — transactional cleanup, dismisses if still presented\n *\n * Stale-result protection: only the most recent `present()` call's dismiss\n * event updates the result signal. Latest-wins: presenting a new overlay\n * dismisses the previous one.\n *\n * @example Function component (preferred)\n * ```ts\n * import { signal, html } from \"@elurjs/core\";\n * import { createToast, createAlert } from \"@elurjs/ionic\";\n *\n * function SettingsPage() {\n *   // Create overlay controllers — signals close over function scope\n *   const toast = createToast();\n *   const alert = createAlert();\n *\n *   const save = async () => {\n *     // Use withLoading for async tasks\n *     const ok = await withLoading({ message: \"Saving...\" }, async () => {\n *       await fetch(\"/api/settings\", { method: \"POST\" });\n *     });\n *     toast.present({ message: \"Saved!\", duration: 1500 });\n *   };\n *\n *   const deleteAccount = () => {\n *     // confirm() returns a Promise<boolean>\n *     confirm({\n *       header: \"Delete account\",\n *       message: \"This cannot be undone.\",\n *       confirmText: \"Delete\",\n *     }).then((yes) => {\n *       if (yes) alert.present({ header: \"Done\", message: \"Account deleted\" });\n *     });\n *   };\n *\n *   return html`\n *     <ion-content>\n *       <ion-button @click=${save}>Save</ion-button>\n *       <ion-button color=\"danger\" @click=${deleteAccount}>Delete</ion-button>\n *     </ion-content>\n *   `;\n * }\n * ```\n *\n * @example Class component with lifecycle cleanup\n * ```ts\n * import { ElurComponent, html, signal } from \"@elurjs/core\";\n * import { createLoading, IonPage } from \"@elurjs/ionic\";\n *\n * class ProfilePage extends IonPage {\n *   private loading = createLoading();\n *   private data = signal<unknown>(null);\n *\n *   override async onMount() {\n *     // withLoading auto-dismisses on settle or error\n *     const result = await withLoading(\n *       { message: \"Loading profile...\" },\n *       () => fetch(\"/api/profile\").then(r => r.json()),\n *     );\n *     this.data.value = result;\n *   }\n *\n *   override onUnmount() {\n *     // Dispose all overlay controllers to prevent leaks\n *     this.loading.dispose();\n *   }\n *\n *   override render() {\n *     return html`\n *       <ion-content>\n *         <p>${() => JSON.stringify(this.data.value)}</p>\n *       </ion-content>\n *     `;\n *   }\n * }\n * ```\n *\n * @example Reactive UI driven by overlay signals\n * ```ts\n * import { signal, html } from \"@elurjs/core\";\n * import { createModal } from \"@elurjs/ionic\";\n *\n * function ProductList() {\n *   const modal = createModal();\n *   const selected = signal<string | null>(null);\n *\n *   const openDetail = (id: string) => {\n *     selected.value = id;\n *     modal.present({ component: \"product-detail\" });\n *   };\n *\n *   return html`\n *     <ion-content>\n *       <ion-list>\n *         <ion-button @click=${() => openDetail(\"1\")}>Product 1</ion-button>\n *       </ion-list>\n *\n *       <!-- Reactively show dismiss result -->\n *       ${() => modal.result.value\n *         ? html`<p>Modal closed with role: ${modal.result.value.role}</p>`\n *         : null}\n *\n *       <!-- Reactively disable button while modal is open -->\n *       <ion-button\n *         disabled=${() => modal.presented.value}\n *         @click=${() => openDetail(\"2\")}\n *       >Product 2</ion-button>\n *     </ion-content>\n *   `;\n * }\n * ```\n */\n\nimport { signal, type Signal, mount, type ElurTemplate, type ElurComponent } from \"@elurjs/core\";\nimport {\n    toastController,\n    alertController,\n    loadingController,\n    actionSheetController,\n    popoverController,\n    modalController,\n    pickerController,\n} from \"@ionic/core\";\n\n// --- Elur framework delegate for overlays ---\n// Ionic overlays (popover, modal) need a \"framework delegate\" to render\n// content when `component` is not a string tag name or HTMLElement.\n// We provide a delegate that uses Elur `mount()` to render templates.\n\ninterface FrameworkDelegate {\n    attachViewToDom: (\n        parentElement: HTMLElement,\n        userComponent: unknown,\n        userComponentProps?: Record<string, unknown>,\n        cssClasses?: string[],\n    ) => Promise<HTMLElement>;\n    removeViewFromDom: (\n        parentElement: HTMLElement,\n        childElement: HTMLElement,\n    ) => Promise<void>;\n}\n\nlet _delegateHandle: { unmount: () => void } | null = null;\n\nconst elurDelegate: FrameworkDelegate = {\n    async attachViewToDom(parentElement, userComponent, _props, cssClasses) {\n        // If userComponent is a function (ElurTemplate factory), call it and mount\n        if (typeof userComponent === \"function\") {\n            const template = (userComponent as () => ElurTemplate)();\n            const handle = mount(template, parentElement);\n            _delegateHandle = handle;\n            return parentElement;\n        }\n        // If userComponent is a string, create the element\n        if (typeof userComponent === \"string\") {\n            const el = document.createElement(userComponent);\n            if (cssClasses) cssClasses.forEach((c) => el.classList.add(c));\n            parentElement.appendChild(el);\n            return el;\n        }\n        // If userComponent is an HTMLElement, append it\n        if (userComponent instanceof HTMLElement) {\n            if (cssClasses) cssClasses.forEach((c) => userComponent.classList.add(c));\n            parentElement.appendChild(userComponent);\n            return userComponent;\n        }\n        // Fallback: just return the parent\n        return parentElement;\n    },\n    async removeViewFromDom(_parent, _child) {\n        if (_delegateHandle) {\n            _delegateHandle.unmount();\n            _delegateHandle = null;\n        }\n    },\n};\n\n// --- Types ---\n\nexport interface OverlayHandle<TDetail = unknown> {\n    /** True while the overlay is presented (visible). */\n    readonly presented: Signal<boolean>;\n    /** The dismiss event detail (role, data) — null until dismissed. */\n    readonly result: Signal<TDetail | null>;\n    /** Present the overlay with the given options. */\n    present(options: Record<string, unknown>): Promise<void>;\n    /** Dismiss the active overlay with optional data and role. */\n    dismiss(data?: unknown, role?: string): Promise<boolean>;\n    /** Cleanup: dismisses any active overlay. Safe to call multiple times. */\n    dispose(): void;\n}\n\ninterface ActiveOverlay {\n    el: { dismiss: (data?: unknown, role?: string) => Promise<boolean> };\n    dismissPromise: Promise<unknown>;\n    token: number; // stale-result protection\n}\n\n// --- Internal factory ---\n\nfunction createOverlayHandle<TDetail>(\n    controller: {\n        create: (opts: Record<string, unknown>) => Promise<any>;\n    },\n): OverlayHandle<TDetail> {\n    const presented = signal(false);\n    const result = signal<TDetail | null>(null);\n    let active: ActiveOverlay | null = null;\n    let disposed = false;\n\n    async function present(options: Record<string, unknown>): Promise<void> {\n        if (disposed) return;\n\n        // If an overlay is already active, dismiss it first (latest-wins).\n        if (active) {\n            try {\n                await active.el.dismiss();\n            } catch { /* ignore */ }\n        }\n\n        const token = (active?.token ?? 0) + 1;\n\n        // If `component` is a function (ElurTemplate factory), inject our\n        // framework delegate so Ionic can render Elur templates inside\n        // popover/modal overlays.\n        const opts = { ...options };\n        if (typeof opts.component === \"function\" && !opts.delegate) {\n            opts.delegate = elurDelegate;\n        }\n\n        const el = await controller.create(opts);\n        await el.present();\n        active = { el, dismissPromise: el.onDidDismiss?.() ?? Promise.resolve(null), token };\n        presented.value = true;\n\n        // Fire-and-forget the dismiss wait — updates state when the overlay\n        // is dismissed by the user or by dismiss(). This avoids blocking the\n        // caller; they can use the `presented` and `result` signals to react.\n        active.dismissPromise\n            .then((detail) => {\n                if (active?.token === token && !disposed) {\n                    result.value = detail as TDetail;\n                    presented.value = false;\n                    active = null;\n                }\n            })\n            .catch(() => {\n                if (active?.token === token && !disposed) {\n                    presented.value = false;\n                    active = null;\n                }\n            });\n    }\n\n    async function dismiss(data?: unknown, role?: string): Promise<boolean> {\n        if (!active || disposed) return false;\n        try {\n            return await active.el.dismiss(data, role);\n        } catch {\n            return false;\n        }\n    }\n\n    function dispose(): void {\n        if (disposed) return;\n        disposed = true;\n        if (active) {\n            try {\n                active.el.dismiss();\n            } catch { /* ignore */ }\n            active = null;\n        }\n        presented.value = false;\n    }\n\n    return { presented, result, present, dismiss, dispose };\n}\n\n// --- Public factories (create* pattern) ---\n\n/**\n * Create a reactive toast overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createToast(): OverlayHandle {\n    return createOverlayHandle(toastController as any);\n}\n\n/**\n * Create a reactive alert overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createAlert(): OverlayHandle {\n    return createOverlayHandle(alertController as any);\n}\n\n/**\n * Create a reactive loading overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createLoading(): OverlayHandle {\n    return createOverlayHandle(loadingController as any);\n}\n\n/**\n * Create a reactive action-sheet overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createActionSheet(): OverlayHandle {\n    return createOverlayHandle(actionSheetController as any);\n}\n\n/**\n * Create a reactive popover overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createPopover(): OverlayHandle {\n    return createOverlayHandle(popoverController as any);\n}\n\n/**\n * Create a reactive modal overlay controller.\n * Call `dispose()` in `onUnmount()` when used in a class component.\n */\nexport function createModal(): OverlayHandle {\n    return createOverlayHandle(modalController as any);\n}\n\n// --- Convenience: one-shot helpers (no controller needed) ---\n\n/**\n * Present a toast and return immediately (fire-and-forget).\n * The toast auto-dismisses after its duration.\n *\n * @example\n * ```ts\n * import { showToast } from \"@elurjs/ionic\";\n *\n * showToast({ message: \"Saved!\", duration: 1500 });\n * ```\n */\nexport async function showToast(\n    options: Record<string, unknown>,\n): Promise<void> {\n    const toast = await toastController.create(options);\n    await toast.present();\n}\n\n/**\n * Present a loading overlay, run an async task, then dismiss.\n * Returns the task result. If the task throws, the loading is still dismissed.\n *\n * @example\n * ```ts\n * import { withLoading } from \"@elurjs/ionic\";\n *\n * const data = await withLoading(\n *   { message: \"Fetching...\" },\n *   () => fetch(\"/api/data\").then(r => r.json()),\n * );\n * ```\n */\nexport async function withLoading<T>(\n    options: Record<string, unknown>,\n    task: () => Promise<T>,\n): Promise<T> {\n    const loading = await loadingController.create(options);\n    await loading.present();\n    try {\n        return await task();\n    } finally {\n        await loading.dismiss();\n    }\n}\n\n/**\n * Present a confirm alert and return true if \"OK\" was clicked, false otherwise.\n *\n * @example\n * ```ts\n * import { confirm } from \"@elurjs/ionic\";\n *\n * const yes = await confirm({\n *   header: \"Delete\",\n *   message: \"Are you sure?\",\n *   confirmText: \"Delete\",\n * });\n * if (yes) deleteItem();\n * ```\n */\nexport async function confirm(\n    options: { header?: string; message?: string; confirmText?: string; cancelText?: string },\n): Promise<boolean> {\n    return new Promise((resolve) => {\n        alertController\n            .create({\n                header: options.header,\n                message: options.message,\n                buttons: [\n                    { text: options.cancelText ?? \"Cancel\", role: \"cancel\", handler: () => resolve(false) },\n                    { text: options.confirmText ?? \"OK\", role: \"confirm\", handler: () => resolve(true) },\n                ],\n            } as any)\n            .then((el) => el.present());\n    });\n}\n\n// Re-export Ionic controllers for advanced use\nexport {\n    toastController,\n    alertController,\n    loadingController,\n    actionSheetController,\n    popoverController,\n    modalController,\n    pickerController,\n};\n\n// =============================================================================\n// --- Elur delegate for modal/popover content mounting ---\n// =============================================================================\n\n/**\n * A Elur FrameworkDelegate that can mount ElurTemplate or ElurComponent\n * instances inside Ionic overlays (modal, popover).\n *\n * Ionic's `FrameworkDelegate` interface has two methods:\n *   - `attachViewToDom(container, component, props, cssClasses)` → HTMLElement\n *   - `removeViewFromDom(container, component)` → void\n *\n * For Elur, \"component\" is a function that returns a ElurTemplate or\n * ElurComponent. The delegate creates a wrapper div, mounts the Elur\n * content into it, appends it to the overlay, and tracks the unmount\n * handle for cleanup on dismiss.\n */\nexport interface ElurOverlayDelegate {\n    attachViewToDom(\n        container: HTMLElement,\n        component: () => ElurTemplate | ElurComponent,\n        propsOrData?: Record<string, unknown>,\n        cssClasses?: string[],\n    ): Promise<HTMLElement>;\n    removeViewFromDom(container: HTMLElement, component: unknown): Promise<void>;\n}\n\n/**\n * Create a Elur delegate for use with Ionic modal/popover controllers.\n * The delegate mounts Elur templates inside overlays and cleans up on\n * removal.\n *\n * @example\n * ```ts\n * import { createElurDelegate, createModal } from \"@elurjs/ionic\";\n * import { html, signal } from \"@elurjs/core\";\n *\n * const delegate = createElurDelegate();\n * const modal = createModal();\n *\n * // The delegate is passed via `delegate` option\n * modal.present({\n *   component: () => html`<ion-content><h1>Hello from modal!</h1></ion-content>`,\n *   delegate,\n * });\n * ```\n */\nexport function createElurDelegate(): ElurOverlayDelegate {\n    // Track unmount handles by wrapper element for cleanup\n    const handles = new Map<HTMLElement, () => void>();\n\n    return {\n        async attachViewToDom(\n            container: HTMLElement,\n            component: () => ElurTemplate | ElurComponent,\n            _propsOrData?: Record<string, unknown>,\n            cssClasses?: string[],\n        ): Promise<HTMLElement> {\n            // Create a wrapper div to hold the Elur content\n            const wrapper = document.createElement(\"div\");\n            if (cssClasses) {\n                for (const cls of cssClasses) wrapper.classList.add(cls);\n            }\n            // Mount the Elur content into the wrapper\n            const handle = mount(component(), wrapper);\n            handles.set(wrapper, handle.unmount);\n            // Append to the overlay container\n            container.appendChild(wrapper);\n            return wrapper;\n        },\n\n        async removeViewFromDom(_container: HTMLElement, component: unknown): Promise<void> {\n            // component is the wrapper element returned by attachViewToDom\n            const wrapper = component as HTMLElement;\n            const unmount = handles.get(wrapper);\n            if (unmount) {\n                unmount();\n                handles.delete(wrapper);\n            }\n            if (wrapper.parentElement) {\n                wrapper.remove();\n            }\n        },\n    };\n}\n\n// =============================================================================\n// --- Enhanced modal/popover with delegate support ---\n// =============================================================================\n\n/**\n * Options for presenting a modal with Elur content.\n * The `component` function returns a ElurTemplate or ElurComponent that will\n * be mounted inside the modal via the Elur delegate.\n */\nexport interface ModalOptions {\n    /** Function returning the Elur content to mount inside the modal. */\n    component: () => ElurTemplate | ElurComponent;\n    /** Component props/data passed to the delegate. */\n    componentProps?: Record<string, unknown>;\n    /** CSS classes to add to the mounted content wrapper. */\n    cssClasses?: string[];\n    /** Modal-specific options. */\n    backdropDismiss?: boolean;\n    showBackdrop?: boolean;\n    animated?: boolean;\n    canDismiss?: boolean | (() => Promise<boolean>);\n    /** Custom delegate (if not provided, a default Elur delegate is used). */\n    delegate?: ElurOverlayDelegate;\n    [key: string]: unknown;\n}\n\n/**\n * Options for presenting a popover with Elur content.\n */\nexport interface PopoverOptions {\n    /** Function returning the Elur content to mount inside the popover. */\n    component: () => ElurTemplate | ElurComponent;\n    /** Component props/data passed to the delegate. */\n    componentProps?: Record<string, unknown>;\n    /** CSS classes to add to the mounted content wrapper. */\n    cssClasses?: string[];\n    /** The element that the popover should be anchored to. */\n    event?: Event | { target: HTMLElement };\n    /** Popover-specific options. */\n    backdropDismiss?: boolean;\n    showBackdrop?: boolean;\n    animated?: boolean;\n    /** Custom delegate (if not provided, a default Elur delegate is used). */\n    delegate?: ElurOverlayDelegate;\n    [key: string]: unknown;\n}\n\n/**\n * Enhanced modal controller with Elur delegate support.\n * Unlike the basic `createModal()`, this automatically creates and uses\n * a Elur delegate so `component` can be a ElurTemplate/ElurComponent.\n *\n * @example\n * ```ts\n * import { createModalController, createElurDelegate } from \"@elurjs/ionic\";\n * import { html, signal } from \"@elurjs/core\";\n *\n * const modal = createModalController();\n *\n * modal.present({\n *   component: () => html`\n *     <ion-header>\n *       <ion-toolbar><ion-title>Settings</ion-title></ion-toolbar>\n *     </ion-header>\n *     <ion-content><p>Modal content here</p></ion-content>\n *   `,\n * });\n *\n * // React to dismiss\n * effect(() => {\n *   if (modal.result.value) {\n *     console.log(\"Modal dismissed:\", modal.result.value);\n *   }\n * });\n * ```\n */\nexport function createModalController(delegate?: ElurOverlayDelegate): OverlayHandle {\n    const elurDelegate = delegate ?? createElurDelegate();\n    const handle = createOverlayHandle(modalController as any);\n\n    // Wrap present to inject the delegate and convert component\n    const originalPresent = handle.present;\n    async function present(options: ModalOptions): Promise<void> {\n        await originalPresent({\n            ...options,\n            delegate: elurDelegate,\n        });\n    }\n\n    return { ...handle, present };\n}\n\n/**\n * Enhanced popover controller with Elur delegate support.\n * Automatically creates and uses a Elur delegate so `component` can be\n * a ElurTemplate/ElurComponent.\n *\n * @example\n * ```ts\n * import { createPopoverController } from \"@elurjs/ionic\";\n * import { html } from \"@elurjs/core\";\n *\n * const popover = createPopoverController();\n *\n * // In an event handler:\n * popover.present({\n *   component: () => html`<ion-content><p>Popover content</p></ion-content>`,\n *   event, // the click event for anchoring\n * });\n * ```\n */\nexport function createPopoverController(delegate?: ElurOverlayDelegate): OverlayHandle {\n    const elurDelegate = delegate ?? createElurDelegate();\n    const handle = createOverlayHandle(popoverController as any);\n\n    const originalPresent = handle.present;\n    async function present(options: PopoverOptions): Promise<void> {\n        await originalPresent({\n            ...options,\n            delegate: elurDelegate,\n        });\n    }\n\n    return { ...handle, present };\n}\n\n// =============================================================================\n// --- Picker wrapper ---\n// =============================================================================\n\n/**\n * Options for a picker column.\n */\nexport interface PickerColumnOption {\n    text: string;\n    value: string | number;\n    disabled?: boolean;\n}\n\n/**\n * Options for presenting a picker overlay.\n */\nexport interface PickerOptions {\n    columns: Array<{\n        name: string;\n        options: PickerColumnOption[];\n        selectedIndex?: number;\n    }>;\n    buttons?: Array<{\n        text: string;\n        role?: string;\n        handler?: (selected: Record<string, PickerColumnOption>) => void;\n    }>;\n    cssClass?: string;\n    animated?: boolean;\n    backdropDismiss?: boolean;\n    [key: string]: unknown;\n}\n\n/**\n * Create a reactive picker overlay controller.\n * Pickers are column-based selection overlays (like iOS date pickers).\n *\n * @example\n * ```ts\n * import { createPicker } from \"@elurjs/ionic\";\n *\n * const picker = createPicker();\n * await picker.present({\n *   columns: [{\n *     name: \"size\",\n *     options: [\n *       { text: \"Small\", value: \"sm\" },\n *       { text: \"Medium\", value: \"md\" },\n *       { text: \"Large\", value: \"lg\" },\n *     ],\n *   }],\n *   buttons: [\n *     { text: \"Cancel\", role: \"cancel\" },\n *     { text: \"Done\", role: \"confirm\" },\n *   ],\n * });\n * ```\n */\nexport function createPicker(): OverlayHandle {\n    // Ionic 8's ion-picker is a wheel-style component without columns/buttons/isOpen.\n    // The legacy picker (with columns, buttons, isOpen) is accessed via pickerController,\n    // which creates <ion-picker-legacy> internally. These legacy components must be\n    // registered as custom elements, otherwise customElements.whenDefined() hangs\n    // forever and the picker never appears.\n    //\n    // We register them lazily here (not in setup.ts) to preserve tree-shaking —\n    // apps that don't use the picker won't bundle the legacy picker code.\n    if (typeof customElements !== \"undefined\") {\n        if (!customElements.get(\"ion-picker-legacy\")) {\n            import(\"@ionic/core/components/ion-picker-legacy.js\")\n                .then((m) => m.defineCustomElement())\n                .catch(() => { });\n        }\n        if (!customElements.get(\"ion-picker-legacy-column\")) {\n            import(\"@ionic/core/components/ion-picker-legacy-column.js\")\n                .then((m) => m.defineCustomElement())\n                .catch(() => { });\n        }\n        if (!customElements.get(\"ion-backdrop\")) {\n            import(\"@ionic/core/components/ion-backdrop.js\")\n                .then((m) => m.defineCustomElement())\n                .catch(() => { });\n        }\n    }\n    return createOverlayHandle(pickerController as any);\n}\n"],"mappings":"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"}

package/dist/lib/page-state.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});function e(t){if(t===void 0)return!1;if(t===null)return!0;if(typeof t==`function`||typeof t==`symbol`||typeof t==`bigint`||typeof window<`u`&&t instanceof Node||typeof window<`u`&&t instanceof Element||typeof window<`u`&&t instanceof DocumentFragment)return!1;if(typeof t!=`object`)return!0;if(Array.isArray(t))return t.every(e);let n=Object.getPrototypeOf(t);if(n!==null&&n!==Object.prototype)return!1;try{return JSON.stringify(t),!0}catch{return!1}}function t(e){return typeof window>`u`?null:e===`local`?window.localStorage:window.sessionStorage}function n(n,r,i={}){let{storage:a=`session`,namespace:o=`elur-ionic`,keySuffix:s=``}=i,c=`${o}:${n}${s?`:`+s:``}`;function l(){let i=t(a);if(!i)return;let o={},s=!1;for(let[t,i]of Object.entries(r)){let r=i.value;if(!e(r)){typeof console<`u`&&console.warn&&console.warn(`[elur-ionic] PageState: skipping non-serializable value for "${t}" on page "${n}". Only serializable data (primitives, plain arrays, plain objects) can be persisted. DOM nodes, functions, and class instances are not allowed.`);continue}o[t]=r,s=!0}if(s)try{i.setItem(c,JSON.stringify(o))}catch{typeof console<`u`&&console.warn&&console.warn(`[elur-ionic] PageState: failed to save state for page "${n}" (storage quota exceeded or storage disabled).`)}}function u(){let e=t(a);if(!e)return!1;let n=null;try{n=e.getItem(c)}catch{return!1}if(!n)return!1;let i;try{i=JSON.parse(n)}catch{try{e.removeItem(c)}catch{}return!1}for(let[e,t]of Object.entries(r))e in i&&(t.value=i[e]);return!0}function d(){let e=t(a);if(e)try{e.removeItem(c)}catch{}}return{save:l,restore:u,clear:d,get key(){return c}}}function r(e=`session`,n=`elur-ionic`){let r=t(e);if(!r)return;let i=`${n}:`,a=[];try{for(let e=0;e<r.length;e++){let t=r.key(e);t&&t.startsWith(i)&&a.push(t)}for(let e of a)r.removeItem(e)}catch{}}exports.clearAllPageState=r,exports.createPageState=n,exports.isSerializable=e;
+//# sourceMappingURL=page-state.cjs.map

package/dist/lib/page-state.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-state.cjs","names":[],"sources":["../../src/page-state.ts"],"sourcesContent":["/**\n * @elurjs/ionic / page-state.ts\n *\n * Opt-in page-state persistence protocol. Allows pages to save and restore\n * serializable state across navigation, cache eviction, and app reloads.\n *\n * Key design rules:\n *   - **Only serializable data** — JSON.stringify is used; DOM nodes, functions,\n *     symbols, class instances with methods are rejected.\n *   - **Never persist DOM/view instances** — the protocol validates values\n *     before storage and throws on non-serializable content.\n *   - **Opt-in** — pages must explicitly call `save()` to persist state.\n *   - **Per cache key** — state is keyed by route path + params + query,\n *     matching the IonRouterOutlet cache key logic.\n *   - **Storage choice** — `sessionStorage` (default, cleared on tab close)\n *     or `localStorage` (persists across sessions).\n *\n * @example Basic usage in a page component\n * ```ts\n * import { signal, html } from \"@elurjs/core\";\n * import { createPageState, IonPage } from \"@elurjs/ionic\";\n *\n * class SearchPage extends IonPage {\n *   private query = signal(\"\");\n *   private results = signal<string[]>([]);\n *   private pageState = createPageState(\"search\", {\n *     // Declare which signals are persistable\n *     query: this.query,\n *     results: this.results,\n *   });\n *\n *   override onMount() {\n *     // Restore saved state on mount\n *     this.pageState.restore();\n *   }\n *\n *   override onUnmount() {\n *     // Save state before leaving\n *     this.pageState.save();\n *   }\n *\n *   override render() {\n *     return html`\n *       <ion-content>\n *         <ion-searchbar value=${() => this.query.value} @input=${(e: any) => {\n *           this.query.value = e.target.value;\n *           this.pageState.save(); // save on change\n *         }}></ion-searchbar>\n *         <ion-list>\n *           ${() => this.results.value.map(r => html`<ion-item>${r}</ion-item>`)}\n *         </ion-list>\n *       </ion-content>\n *     `;\n *   }\n * }\n * ```\n *\n * @example With localStorage (persists across app restarts)\n * ```ts\n * const pageState = createPageState(\"cart\", {\n *   items: cartItems,\n *   total: cartTotal,\n * }, { storage: \"local\" });\n * ```\n */\n\n// --- Types ---\n\n/** Storage backend selection. */\nexport type StorageBackend = \"session\" | \"local\";\n\n/** Options for page-state persistence. */\nexport interface PageStateOptions {\n    /**\n     * Storage backend: `\"session\"` (sessionStorage, cleared on tab close)\n     * or `\"local\"` (localStorage, persists across sessions).\n     * @default \"session\"\n     */\n    storage?: StorageBackend;\n    /**\n     * Namespace prefix for storage keys. Defaults to \"elur-ionic\".\n     * Useful for multi-app scenarios on the same origin.\n     */\n    namespace?: string;\n    /**\n     * Additional key suffix (e.g. user ID) to isolate state between users.\n     */\n    keySuffix?: string;\n}\n\n/**\n * A map of signal names to signals. Each signal's value must be serializable.\n */\nexport type SignalMap = Record<string, { value: unknown }>;\n\n/**\n * Page-state persistence controller. Created per page instance.\n */\nexport interface PageState {\n    /**\n     * Save the current state of all declared signals to storage.\n     * Only serializable values are stored; non-serializable values are\n     * silently skipped (with a console.warn in dev).\n     */\n    save(): void;\n    /**\n     * Restore saved state from storage into the declared signals.\n     * Returns true if state was found and restored, false otherwise.\n     */\n    restore(): boolean;\n    /**\n     * Clear saved state for this page's key.\n     */\n    clear(): void;\n    /**\n     * Get the storage key that would be used (for debugging).\n     */\n    readonly key: string;\n}\n\n// --- Serialization validation ---\n\n/**\n * Check if a value is serializable (can survive JSON.stringify + parse).\n * Returns true for: primitives, plain arrays, plain objects.\n * Returns false for: functions, symbols, DOM nodes, class instances,\n * undefined, circular references.\n */\nfunction isSerializable(value: unknown): boolean {\n    if (value === undefined) return false;\n    if (value === null) return true;\n    if (typeof value === \"function\") return false;\n    if (typeof value === \"symbol\") return false;\n    if (typeof value === \"bigint\") return false; // JSON.stringify throws on bigint\n\n    // DOM nodes and elements\n    if (typeof window !== \"undefined\" && value instanceof Node) return false;\n    if (typeof window !== \"undefined\" && value instanceof Element) return false;\n    if (typeof window !== \"undefined\" && value instanceof DocumentFragment) return false;\n\n    // Primitives\n    if (typeof value !== \"object\") return true;\n\n    // Arrays — check each element\n    if (Array.isArray(value)) {\n        return value.every(isSerializable);\n    }\n\n    // Plain objects — check constructor and each value\n    const proto = Object.getPrototypeOf(value);\n    if (proto !== null && proto !== Object.prototype) {\n        // Class instances (has non-trivial prototype) — reject\n        return false;\n    }\n\n    try {\n        // Final check: can it survive a round-trip?\n        JSON.stringify(value);\n        return true;\n    } catch {\n        return false; // circular reference or other stringify error\n    }\n}\n\n// --- Storage abstraction ---\n\nfunction getStorage(backend: StorageBackend): Storage | null {\n    if (typeof window === \"undefined\") return null;\n    return backend === \"local\" ? window.localStorage : window.sessionStorage;\n}\n\n// --- Factory ---\n\n/**\n * Create a page-state persistence controller.\n *\n * @param pageId Unique identifier for the page (e.g. route path).\n * @param signals Map of signal names to signals whose values should be persisted.\n * @param options Persistence options.\n *\n * @example\n * ```ts\n * const state = createPageState(\"search\", {\n *   query: searchQuery,\n *   filters: filterSignal,\n * }, { storage: \"local\" });\n *\n * // On page mount:\n * state.restore();\n *\n * // On page leave or data change:\n * state.save();\n * ```\n */\nexport function createPageState(\n    pageId: string,\n    signals: SignalMap,\n    options: PageStateOptions = {},\n): PageState {\n    const {\n        storage: backend = \"session\",\n        namespace = \"elur-ionic\",\n        keySuffix = \"\",\n    } = options;\n\n    const baseKey = `${namespace}:${pageId}${keySuffix ? \":\" + keySuffix : \"\"}`;\n\n    function save(): void {\n        const storage = getStorage(backend);\n        if (!storage) return;\n\n        const data: Record<string, unknown> = {};\n        let hasData = false;\n\n        for (const [name, sig] of Object.entries(signals)) {\n            const value = sig.value;\n            if (!isSerializable(value)) {\n                if (typeof console !== \"undefined\" && console.warn) {\n                    console.warn(\n                        `[elur-ionic] PageState: skipping non-serializable value for \"${name}\" ` +\n                        `on page \"${pageId}\". Only serializable data (primitives, plain arrays, ` +\n                        `plain objects) can be persisted. DOM nodes, functions, and class ` +\n                        `instances are not allowed.`,\n                    );\n                }\n                continue;\n            }\n            data[name] = value;\n            hasData = true;\n        }\n\n        if (hasData) {\n            try {\n                storage.setItem(baseKey, JSON.stringify(data));\n            } catch {\n                // Quota exceeded or storage disabled — fail silently\n                if (typeof console !== \"undefined\" && console.warn) {\n                    console.warn(\n                        `[elur-ionic] PageState: failed to save state for page \"${pageId}\" ` +\n                        `(storage quota exceeded or storage disabled).`,\n                    );\n                }\n            }\n        }\n    }\n\n    function restore(): boolean {\n        const storage = getStorage(backend);\n        if (!storage) return false;\n\n        let raw: string | null = null;\n        try {\n            raw = storage.getItem(baseKey);\n        } catch {\n            return false; // storage access denied\n        }\n\n        if (!raw) return false;\n\n        let data: Record<string, unknown>;\n        try {\n            data = JSON.parse(raw);\n        } catch {\n            // Corrupted data — clear it\n            try { storage.removeItem(baseKey); } catch { /* ignore */ }\n            return false;\n        }\n\n        for (const [name, sig] of Object.entries(signals)) {\n            if (name in data) {\n                sig.value = data[name];\n            }\n        }\n\n        return true;\n    }\n\n    function clear(): void {\n        const storage = getStorage(backend);\n        if (!storage) return;\n        try {\n            storage.removeItem(baseKey);\n        } catch { /* ignore */ }\n    }\n\n    return {\n        save,\n        restore,\n        clear,\n        get key() { return baseKey; },\n    };\n}\n\n// --- Batch helpers ---\n\n/**\n * Clear all elur-ionic page-state entries from a storage backend.\n * Useful for logout flows.\n *\n * @example\n * ```ts\n * import { clearAllPageState } from \"@elurjs/ionic\";\n *\n * function logout() {\n *   clearAllPageState(); // sessionStorage\n *   clearAllPageState(\"local\"); // localStorage\n * }\n * ```\n */\nexport function clearAllPageState(backend: StorageBackend = \"session\", namespace = \"elur-ionic\"): void {\n    const storage = getStorage(backend);\n    if (!storage) return;\n\n    const prefix = `${namespace}:`;\n    const keysToRemove: string[] = [];\n\n    try {\n        for (let i = 0; i < storage.length; i++) {\n            const key = storage.key(i);\n            if (key && key.startsWith(prefix)) {\n                keysToRemove.push(key);\n            }\n        }\n        for (const key of keysToRemove) {\n            storage.removeItem(key);\n        }\n    } catch { /* ignore */ }\n}\n\n// --- Serialization utilities (exported for testing) ---\n\nexport { isSerializable };\n"],"mappings":"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"}