@abhivarde/svelte-drawer 1.0.4 → 1.0.6

package/README.md

@@ -2,6 +2,7 @@
 
 A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowalski/vaul).
 
+[![skills.sh](https://skills.sh/b/AbhiVarde/svelte-drawer)](https://skills.sh/AbhiVarde/svelte-drawer)
 [![](https://img.shields.io/badge/npm-@abhivarde/svelte--drawer-000?style=flat&logo=npm&logoColor=white)](https://www.npmjs.com/package/@abhivarde/svelte-drawer) [![](https://img.shields.io/badge/npmx-@abhivarde/svelte--drawer-000?style=flat&logo=node.js&logoColor=white)](https://npmx.dev/package/@abhivarde/svelte-drawer)
 
 ## Features
@@ -160,6 +161,24 @@ Add a premium blur effect to the overlay background:
 </Drawer>
 ```
 
+### Close Threshold
+
+Control how far the user needs to drag before the drawer dismisses.
+
+```svelte
+<!-- easier to dismiss (short drag) -->
+<Drawer bind:open closeThreshold={0.15}>
+  ...
+</Drawer>
+
+<!-- harder to dismiss (long drag required) -->
+<Drawer bind:open closeThreshold={0.5}>
+  ...
+</Drawer>
+```
+
+Values range from `0` to `1`. Default is `0.3` (30% of the viewport).
+
 ### Using Variants
 
 ```svelte
@@ -463,31 +482,34 @@ Automatically save and restore drawer state across page reloads.
 
 ### Auto Height (AI & Dynamic Content)
 
-Use `autoHeight` on `DrawerContent` when your drawer content changes height at runtime — AI streaming responses, multi-step forms, search results, or any dynamic list.
+Use `autoHeight` on `DrawerContent` when your drawer content changes height at runtime like AI streaming responses, multi-step forms, search results, or dynamic lists.
 
 ```svelte
 <script>
-  import { Drawer, DrawerOverlay, DrawerContent, DrawerHandle } from '@abhivarde/svelte-drawer';
+  import {
+    Drawer,
+    DrawerOverlay,
+    DrawerContent,
+    DrawerHandle
+  } from '@abhivarde/svelte-drawer';
 
   let open = $state(false);
   let streaming = $state(false);
   let text = $state('');
 
-  const lines = [
-    'Sure! Here is what autoHeight does.',
-    '\n\nIt watches your content as it changes.',
-    '\n\nWhen content grows, the drawer follows automatically.',
-    '\n\nNo magic numbers. No hardcoded heights. Just works.',
-  ];
-
   async function simulate() {
     open = true;
     streaming = true;
     text = '';
-    for (const line of lines) {
-      await new Promise(r => setTimeout(r, 500));
-      text += line;
+
+    const content =
+      'Sure! Here is what autoHeight does. It watches your content with a ResizeObserver. When content grows, the drawer follows automatically. No magic numbers, no hardcoded heights, it just works smoothly with streaming UI like AI chat apps.';
+
+    for (let i = 0; i < content.length; i++) {
+      text += content[i];
+      await new Promise(r => setTimeout(r, 18));
     }
+
     streaming = false;
   }
 </script>
@@ -496,12 +518,22 @@ Use `autoHeight` on `DrawerContent` when your drawer content changes height at r
 
 <Drawer bind:open>
   <DrawerOverlay />
-  <DrawerContent autoHeight class="bg-gray-100 flex flex-col rounded-t-[10px] fixed bottom-0 left-0 right-0 outline-none">
+
+  <DrawerContent
+    autoHeight
+    class="bg-gray-100 flex flex-col rounded-t-[10px] fixed bottom-0 left-0 right-0 outline-none"
+  >
     <div class="p-4 bg-white rounded-t-[10px]">
       <DrawerHandle class="mb-8" />
-      <p class="font-medium mb-2 text-gray-900">AI Response</p>
+
+      <p class="font-medium mb-2 text-gray-900">
+        AI Response
+      </p>
+
       {#if text}
-        <p class="text-sm text-gray-600 whitespace-pre-wrap leading-relaxed">{text}{streaming ? '▌' : ''}</p>
+        <p class="text-sm text-gray-600 leading-relaxed">
+          {text}{streaming ? '▌' : ''}
+        </p>
       {/if}
     </div>
   </DrawerContent>
@@ -512,8 +544,9 @@ Use `autoHeight` on `DrawerContent` when your drawer content changes height at r
 
 - `height: auto` is applied to the drawer when `autoHeight` is true
 - The drawer grows and shrinks naturally as content changes
-- The slide-in animation is unaffected since it runs via CSS transform separately
-- Fully compatible with snap points, portals, and all existing props
+- Perfect for AI streaming, dynamic lists, forms, and async content
+- The slide animation remains smooth since it uses CSS transforms separately
+- Fully compatible with snap points, portals, and existing props
 - Zero impact on drawers that do not use `autoHeight` (opt-in, default `false`)
 
 ## Variants
@@ -544,6 +577,7 @@ Main wrapper component that manages drawer state and animations.
 - `onOpenChange` (function, optional) - Callback when open state changes
 - `direction` ('bottom' | 'top' | 'left' | 'right', default: 'bottom') - Direction from which drawer slides
 - `closeOnEscape` (boolean, optional, default: true) - Whether Escape key closes the drawer
+- `closeThreshold` (number, optional, default: 0.3) - How far the user must drag to dismiss (0–1). Lower = easier to close, higher = requires a longer drag.
 - `snapPoints` (number[], optional) - Array of snap positions between 0-1
 - `activeSnapPoint` (number, bindable, optional) - Current active snap point value
 - `onSnapPointChange` (function, optional) - Callback fired when snap changes

package/dist/components/Drawer.svelte

@@ -15,9 +15,10 @@
     onSnapPointChange = undefined,
     portal = false,
     portalContainer = undefined,
-    persistState = false, 
-    persistKey = "default", 
-    persistSnapPoint = false, 
+    persistState = false,
+    persistKey = "default",
+    persistSnapPoint = false,
+    closeThreshold = 0.3,
     children,
   } = $props();
 
@@ -34,7 +35,7 @@
   let previouslyFocusedElement: HTMLElement | null = null;
   let visible = false;
   let previousSnapPoint: number | undefined = undefined;
-  let stateLoaded = false; 
+  let stateLoaded = false;
 
   onMount(() => {
     if (persistState && !stateLoaded) {
@@ -67,7 +68,7 @@
       saveDrawerState(
         persistKey,
         open,
-        persistSnapPoint ? activeSnapPoint : undefined
+        persistSnapPoint ? activeSnapPoint : undefined,
       );
     }
   });
@@ -171,6 +172,9 @@
     get activeSnapPoint() {
       return activeSnapPoint;
     },
+    get closeThreshold() {
+      return closeThreshold;
+    },
     setActiveSnapPoint(point: number) {
       activeSnapPoint = point;
       onSnapPointChange?.(point);

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

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

package/dist/components/DrawerContent.svelte

@@ -11,6 +11,7 @@
     snapPoints?: number[];
     activeSnapPoint?: number;
     setActiveSnapPoint?: (point: number) => void;
+    closeThreshold: number;
   };
 
   let {
@@ -134,6 +135,7 @@
     dragging = false;
 
     const pos = drawer.drawerPosition.current;
+    const threshold = drawer.closeThreshold * 100;
 
     if (drawer.snapPoints && drawer.snapPoints.length > 0) {
       const nearestSnapPoint = findNearestSnapPoint(pos);
@@ -142,14 +144,14 @@
       const lowestSnapPoint = Math.min(...drawer.snapPoints);
       const lowestSnapPos = snapPointToPosition(lowestSnapPoint);
 
-      if (pos > lowestSnapPos + 30) {
+      if (pos > lowestSnapPos + threshold) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(snapPos);
         drawer.setActiveSnapPoint?.(nearestSnapPoint);
       }
     } else {
-      if (pos > 30) {
+      if (pos > threshold) {
         drawer.closeDrawer();
       } else {
         drawer.drawerPosition.set(0);

package/dist/types.d.ts

@@ -11,6 +11,7 @@ export interface DrawerProps {
     persistState?: boolean;
     persistKey?: string;
     persistSnapPoint?: boolean;
+    closeThreshold?: number;
 }
 export interface DrawerContentProps {
     class?: string;

package/package.json

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