@abhivarde/svelte-drawer 0.0.24 → 0.0.25

package/README.md

@@ -398,6 +398,61 @@ Optional pre-styled header and footer components for quick setup.
 
 **Note:** These components are **optional**. You can still build custom headers and footers using plain HTML/Svelte markup without importing these components.
 
+### Persistent State
+
+Automatically save and restore drawer state across page reloads.
+```svelte
+<script>
+  import { Drawer, DrawerOverlay, DrawerContent } from '@abhivarde/svelte-drawer';
+
+  let open = $state(false);
+</script>
+
+<Drawer 
+  bind:open 
+  persistState={true}
+  persistKey="main-drawer"
+>
+  <DrawerOverlay />
+  <DrawerContent class="...">
+    <h2>This drawer remembers if it was open!</h2>
+    <p>Reload the page and it will restore its state.</p>
+  </DrawerContent>
+</Drawer>
+```
+
+**With snap points:**
+```svelte
+<Drawer 
+  bind:open 
+  snapPoints={[0.25, 0.5, 0.9]}
+  bind:activeSnapPoint
+  persistState={true}
+  persistKey="snap-drawer"
+  persistSnapPoint={true}
+>
+  <DrawerOverlay />
+  <DrawerContent class="...">
+    <h2>Position is saved too!</h2>
+    <p>The snap point will be restored on reload.</p>
+  </DrawerContent>
+</Drawer>
+```
+
+**Clear saved state programmatically:**
+```svelte
+<script>
+  import { clearDrawerState } from '@abhivarde/svelte-drawer';
+
+  function resetDrawer() {
+    clearDrawerState('main-drawer');
+    // Drawer will reset to default state on next load
+  }
+</script>
+
+<button onclick={resetDrawer}>Reset Drawer State</button>
+```
+
 ## Variants
 
 Available variants for `DrawerVariants` component:
@@ -431,6 +486,9 @@ Main wrapper component that manages drawer state and animations.
 - `onSnapPointChange` (function, optional) - Callback fired when snap changes
 - `portal` (boolean, optional, default: false) - Render drawer in a portal
 - `portalContainer` (HTMLElement | string, optional) - Custom portal container element or selector
+- `persistState` (boolean, optional, default: false) - Enable persistent state
+- `persistKey` (string, optional, default: "default") - Unique identifier for this drawer
+- `persistSnapPoint` (boolean, optional, default: false) - Whether to persist snap point position
 
 ### DrawerOverlay
 

package/dist/components/Drawer.svelte

@@ -3,6 +3,7 @@
   import { expoOut } from "svelte/easing";
   import { setContext, onMount } from "svelte";
   import DrawerPortal from "./DrawerPortal.svelte";
+  import { saveDrawerState, loadDrawerState } from "../utils/storage"; // NEW
 
   let {
     open = $bindable(false),
@@ -14,6 +15,9 @@
     onSnapPointChange = undefined,
     portal = false,
     portalContainer = undefined,
+    persistState = false, 
+    persistKey = "default", 
+    persistSnapPoint = false, 
     children,
   } = $props();
 
@@ -30,6 +34,43 @@
   let previouslyFocusedElement: HTMLElement | null = null;
   let visible = false;
   let previousSnapPoint: number | undefined = undefined;
+  let stateLoaded = false; 
+
+  onMount(() => {
+    if (persistState && !stateLoaded) {
+      const savedState = loadDrawerState(persistKey);
+
+      if (savedState) {
+        open = savedState.open;
+
+        if (
+          persistSnapPoint &&
+          savedState.snapPoint !== undefined &&
+          snapPoints
+        ) {
+          activeSnapPoint = savedState.snapPoint;
+        }
+      }
+
+      stateLoaded = true;
+    }
+
+    window.addEventListener("keydown", handleKeydown);
+    return () => {
+      window.removeEventListener("keydown", handleKeydown);
+      document.body.style.overflow = "";
+    };
+  });
+
+  $effect(() => {
+    if (persistState && stateLoaded) {
+      saveDrawerState(
+        persistKey,
+        open,
+        persistSnapPoint ? activeSnapPoint : undefined
+      );
+    }
+  });
 
   $effect(() => {
     if (
@@ -108,14 +149,6 @@
     }
   }
 
-  onMount(() => {
-    window.addEventListener("keydown", handleKeydown);
-    return () => {
-      window.removeEventListener("keydown", handleKeydown);
-      document.body.style.overflow = "";
-    };
-  });
-
   setContext("drawer", {
     get open() {
       return open;

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

@@ -8,6 +8,9 @@ declare const Drawer: import("svelte").Component<{
     onSnapPointChange?: any;
     portal?: boolean;
     portalContainer?: any;
+    persistState?: boolean;
+    persistKey?: string;
+    persistSnapPoint?: boolean;
     children: any;
 }, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;

package/dist/index.d.ts

@@ -6,4 +6,5 @@ export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
 export { default as DrawerPortal } from "./components/DrawerPortal.svelte";
 export { default as DrawerHeader } from "./components/DrawerHeader.svelte";
 export { default as DrawerFooter } from "./components/DrawerFooter.svelte";
+export { saveDrawerState, loadDrawerState, clearDrawerState, } from "./utils/storage";
 export type { DrawerProps, DrawerContentProps, DrawerOverlayProps, DrawerHandleProps, DrawerVariant, DrawerVariantsProps, DrawerPortalProps, DrawerHeaderProps, DrawerFooterProps, } from "./types";

package/dist/index.js

@@ -6,3 +6,4 @@ export { default as DrawerHandle } from "./components/DrawerHandle.svelte";
 export { default as DrawerPortal } from "./components/DrawerPortal.svelte";
 export { default as DrawerHeader } from "./components/DrawerHeader.svelte";
 export { default as DrawerFooter } from "./components/DrawerFooter.svelte";
+export { saveDrawerState, loadDrawerState, clearDrawerState, } from "./utils/storage";

package/dist/types.d.ts

@@ -8,6 +8,9 @@ export interface DrawerProps {
     onSnapPointChange?: (snapPoint: number) => void;
     portal?: boolean;
     portalContainer?: HTMLElement | string;
+    persistState?: boolean;
+    persistKey?: string;
+    persistSnapPoint?: boolean;
 }
 export interface DrawerContentProps {
     class?: string;

package/dist/utils/storage.d.ts

@@ -0,0 +1,8 @@
+interface DrawerState {
+    open: boolean;
+    snapPoint?: number;
+}
+export declare function saveDrawerState(key: string, open: boolean, snapPoint?: number): void;
+export declare function loadDrawerState(key: string): DrawerState | null;
+export declare function clearDrawerState(key: string): void;
+export {};

package/dist/utils/storage.js

@@ -0,0 +1,39 @@
+const STORAGE_PREFIX = "svelte-drawer-";
+export function saveDrawerState(key, open, snapPoint) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        const state = { open };
+        if (snapPoint !== undefined) {
+            state.snapPoint = snapPoint;
+        }
+        localStorage.setItem(`${STORAGE_PREFIX}${key}`, JSON.stringify(state));
+    }
+    catch (error) {
+        console.warn("Failed to save drawer state:", error);
+    }
+}
+export function loadDrawerState(key) {
+    if (typeof window === "undefined")
+        return null;
+    try {
+        const stored = localStorage.getItem(`${STORAGE_PREFIX}${key}`);
+        if (!stored)
+            return null;
+        return JSON.parse(stored);
+    }
+    catch (error) {
+        console.warn("Failed to load drawer state:", error);
+        return null;
+    }
+}
+export function clearDrawerState(key) {
+    if (typeof window === "undefined")
+        return;
+    try {
+        localStorage.removeItem(`${STORAGE_PREFIX}${key}`);
+    }
+    catch (error) {
+        console.warn("Failed to clear drawer state:", error);
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abhivarde/svelte-drawer",
-  "version": "0.0.24",
+  "version": "0.0.25",
   "description": "A drawer component for Svelte 5, inspired by Vaul",
   "author": "Abhi Varde",
   "license": "MIT",