npm - svelte-ag - Versions diffs - 1.0.35 → 1.0.37 - Mend

svelte-ag 1.0.35 → 1.0.37

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/dist/lib/api/query/query.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"query.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/query.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAInH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;~~AAK5C~~,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,qBAAa,KAAK,CAChB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBAyBzC,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,EACN,EAAE;QACD,IAAI,EAAE,IAAI,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACnC,SAAS,EAAE,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC;QACb,IAAI,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1C,CAAC;KACH;IAgBK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IA+BxD,IAAI,QAAQ,WAEX;IACD,IAAI,QAAQ,YAEX;IACD,UAAU;IAMV,IAAI,MAAM,gBAET;IACD,IAAI,IAAI,IAAI,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEnD;IACD,IAAI,SAAS,IAAI,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEtD;CACF;AAED,qBAAa,SAAS,CACpB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBA6BnD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAChC,MAAM,EAAE,KAAK,EACb,YAAY,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC;YAkBlC,KAAK;IAOnB;;;OAGG;YACW,eAAe;IAqBvB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;CAkB3F"}
1	+ {"version":3,"file":"query.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/api/query/query.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,kBAAkB,EAAE,cAAc,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAInH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAG5C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAExD,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AAEnE,qBAAa,KAAK,CAChB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBAyBzC,EACV,IAAI,EACJ,MAAM,EACN,KAAK,EACL,SAAS,EACT,KAAK,EACN,EAAE;QACD,IAAI,EAAE,IAAI,CAAC;QACX,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACnC,SAAS,EAAE,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;QACxC,KAAK,EAAE,KAAK,CAAC;QACb,IAAI,CAAC,EAAE;YACL,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;SAC1C,CAAC;KACH;IAgBK,OAAO,IAAI,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;IA+BxD,IAAI,QAAQ,WAEX;IACD,IAAI,QAAQ,YAEX;IACD,UAAU;IAMV,IAAI,MAAM,gBAET;IACD,IAAI,IAAI,IAAI,cAAc,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEnD;IACD,IAAI,SAAS,IAAI,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,IAAI,CAEtD;CACF;AAED,qBAAa,SAAS,CACpB,GAAG,SAAS,YAAY,EACxB,IAAI,SAAS,GAAG,CAAC,MAAM,CAAC,EACxB,MAAM,SAAS,OAAO,CAAC,GAAG,EAAE;IAAE,IAAI,EAAE,IAAI,CAAA;CAAE,CAAC,CAAC,QAAQ,CAAC;;gBA6BnD,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,kBAAkB,CAAC,GAAG,CAAC,EAChC,MAAM,EAAE,KAAK,EACb,YAAY,CAAC,EAAE,YAAY,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC;YAkBlC,KAAK;IAOnB;;;OAGG;YACW,eAAe;IAqBvB,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,GAAG,OAAO,CAAC,WAAW,CAAC,GAAG,EAAE,IAAI,EAAE,MAAM,CAAC,CAAC;CAkB3F"}

package/dist/lib/api/query/query.svelte.js CHANGED Viewed

@@ -1,7 +1,5 @@
 import { stringify } from 'devalue';
 import Bottleneck from 'bottleneck';
-import * as env from '$env/static/public';
-import { sleep } from 'radash';
 import { cacheKey } from './utils.svelte.js';
 export class Query {
     // -------- Constants --------
@@ -111,9 +109,9 @@ export class Requestor {
     }
     // Makes the actual call to the api
     async fetch(input) {
-        if ('PUBLIC_ENVIRONMENT' in env && env.PUBLIC_ENVIRONMENT === 'development') {
-            await sleep(1000);
-        }
+        // if ('PUBLIC_ENVIRONMENT' in env && env.PUBLIC_ENVIRONMENT === 'development') {
+        //   await sleep(1000);
+        // }
         return await this.#limiter.schedule(() => this.#request(this.#path, this.#method, input));
     }
     /**

package/dist/lib/components/breakpoint-badge/BreakpointBadge.svelte CHANGED Viewed

@@ -11,78 +11,69 @@
       bgClass: 'bg-red-100',
       borderClass: 'border-red-300',
       textClass: 'text-red-600',
-      hideClass: 'sm:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'sm:hidden'
     },
     {
       name: 'sm',
       bgClass: 'bg-blue-100',
       borderClass: 'border-blue-300',
       textClass: 'text-blue-600',
-      hideClass: 'hidden sm:block md:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden sm:block md:hidden'
     },
     {
       name: 'md',
       bgClass: 'bg-purple-100',
       borderClass: 'border-purple-300',
       textClass: 'text-purple-600',
-      hideClass: 'hidden md:block lg:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden md:block lg:hidden'
     },
     {
       name: 'lg',
       bgClass: 'bg-green-100',
       borderClass: 'border-green-300',
       textClass: 'text-green-800',
-      hideClass: 'hidden lg:block xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden lg:block xl:hidden'
     },
     {
       name: 'xl',
       bgClass: 'bg-orange-100',
       borderClass: 'border-orange-300',
       textClass: 'text-orange-600',
-      hideClass: 'hidden xl:block 2xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden xl:block 2xl:hidden'
     },
     {
       name: '2xl',
       bgClass: 'bg-yellow-100',
       borderClass: 'border-yellow-300',
       textClass: 'text-yellow-600',
-      hideClass: 'hidden 2xl:block 3xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 2xl:block 3xl:hidden'
     },
     {
       name: '3xl',
       bgClass: 'bg-blue-100',
       borderClass: 'border-blue-300',
       textClass: 'text-blue-600',
-      hideClass: 'hidden 3xl:block 4xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 3xl:block 4xl:hidden'
     },
     {
       name: '4xl',
       bgClass: 'bg-red-100',
       borderClass: 'border-red-300',
       textClass: 'text-red-600',
-      hideClass: 'hidden 4xl:block 5xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 4xl:block 5xl:hidden'
     }
   ];
 </script>
 {#if dev}
-  <div class="w-fit">
+  <div class="w-fit" data-testid="breakpoint-badge">
     {#each breakpoints as bp (bp.name)}
       <div
-        class="{bp.rounded}
+        class="
+          rounded-md border px-2 text-xs font-bold
           {bp.bgClass}
           {bp.hideClass}
-          border
           {bp.borderClass}
-          px-2 text-xs font-bold
           {bp.textClass}"
       >
         {bp.name}

package/dist/lib/components/breakpoint-badge/BreakpointBadge.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BreakpointBadge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/breakpoint-badge/BreakpointBadge.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,0BAA0B,GAAG;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;~~AA6F5D~~,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"BreakpointBadge.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/breakpoint-badge/BreakpointBadge.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,MAAM,0BAA0B,GAAG;IAAE,GAAG,EAAE,OAAO,CAAA;CAAE,CAAC;AAoF5D,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/sidebar/context.svelte.d.ts CHANGED Viewed

@@ -1,11 +1,11 @@
-type Getter<T> = () => T;
+import type { WritableBox } from 'svelte-toolbelt';
 export type SidebarStateProps = {
     /**
      * A getter function that returns the current open state of the sidebar.
      * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
      * component.
      */
-    open: Getter<{
+    open: WritableBox<{
         left: boolean;
         right: boolean;
     }>;
@@ -19,21 +19,23 @@ export type SidebarStateProps = {
 declare class SidebarState {
     #private;
     readonly props: SidebarStateProps;
-    open: {
+    openMobile: {
         left: boolean;
         right: boolean;
     };
-    openMobile: boolean;
     setOpen: SidebarStateProps['setOpen'];
-    state: {
-        left: string;
-        right: string;
-    };
     constructor(props: SidebarStateProps);
+    get open(): {
+        left: boolean;
+        right: boolean;
+    };
+    set open(v: {
+        left: boolean;
+        right: boolean;
+    });
     get isMobile(): boolean;
     handleShortcutKeydown: (e: KeyboardEvent) => void;
-    setOpenMobile: (value: boolean) => void;
-    toggle: (side?: "left" | "right") => boolean | void;
+    toggle: (side?: "left" | "right") => void;
 }
 /**
  * Instantiates a new `SidebarState` instance and sets it in the context.

package/dist/lib/components/sidebar/context.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/context.svelte.ts"],"names":[],"mappings":"~~AAIA~~,KAAK,~~MAAM~~,~~CAAC~~,~~CAAC~~,~~IAAI,~~MAAM,~~CAAC~~,CAAC;~~AAEzB~~,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,IAAI,EAAE,~~MAAM~~,CAAC;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;~~IAEhD~~;;;;OAIG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,cAAM,YAAY;;IAChB,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;~~IAClC~~,~~IAAI;cAZiB,OAAO;eAAS,OAAO;MAYA;IAC5C,~~UAAU~~,UAAiB~~;~~IAC3B~~,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;~~IAEtC~~,KAAK~~;;;MAKF;gBAES~~,~~KAAK,~~EAAE,iBAAiB;~~IAQpC~~,IAAI,QAAQ,YAEX;IAGD,qBAAqB,GAAI,GAAG,aAAa,UAKvC;IAEF,~~aAAa,GAAI,OAAO,OAAO,UAE7B;IAEF,~~MAAM,GAAI,OAAM,MAAM,GAAG,OAAgB,~~oBAEvC~~;CACH;AAID;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAEjE;AAED;;;;GAIG;AACH,wBAAgB,UAAU,IAAI,YAAY,CAEzC"}
1	+ {"version":3,"file":"context.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/context.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAEnD,MAAM,MAAM,iBAAiB,GAAG;IAC9B;;;;OAIG;IACH,IAAI,EAAE,WAAW,CAAC;QAAE,IAAI,EAAE,OAAO,CAAC;QAAC,KAAK,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC;IAErD;;;;OAIG;IACH,OAAO,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAC1D,CAAC;AAEF,cAAM,YAAY;;IAChB,QAAQ,CAAC,KAAK,EAAE,iBAAiB,CAAC;IAGlC,UAAU;;;MAAyC;IACnD,OAAO,EAAE,iBAAiB,CAAC,SAAS,CAAC,CAAC;gBAG1B,KAAK,EAAE,iBAAiB;IAOpC,IAAI,IAAI;cAzBkB,OAAO;eAAS,OAAO;MA2BhD;IACD,IAAI,IAAI,CAAC,CAAC;cA5BgB,OAAO;eAAS,OAAO;KA4BvC,EAET;IAID,IAAI,QAAQ,YAEX;IAGD,qBAAqB,GAAI,GAAG,aAAa,UAKvC;IAEF,MAAM,GAAI,OAAM,MAAM,GAAG,OAAgB,UAGvC;CACH;AAID;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAEjE;AAED;;;;GAIG;AACH,wBAAgB,UAAU,IAAI,YAAY,CAEzC"}

package/dist/lib/components/sidebar/context.svelte.js CHANGED Viewed

@@ -3,21 +3,23 @@ import { getContext, setContext } from 'svelte';
 import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
 class SidebarState {
     props;
-    open = $derived.by(() => this.props.open());
-    openMobile = $state(false);
+    // open = $derived.by(() => this.props.open.current);
+    #open;
+    openMobile = $state({ left: false, right: false });
     setOpen;
     #isMobile;
-    state = $derived.by(() => {
-        return {
-            left: this.open.left ? 'expanded' : 'collapsed',
-            right: this.open.right ? 'expanded' : 'collapsed'
-        };
-    });
     constructor(props) {
         this.setOpen = props.setOpen;
         this.#isMobile = new IsMobile();
+        this.#open = props.open;
         this.props = props;
     }
+    get open() {
+        return this.props.open.current;
+    }
+    set open(v) {
+        this.#open.current = v;
+    }
     // Convenience getter for checking if the sidebar is mobile
     // without this, we would need to use `sidebar.isMobile.current` everywhere
     get isMobile() {
@@ -30,11 +32,11 @@ class SidebarState {
             this.toggle();
         }
     };
-    setOpenMobile = (value) => {
-        this.openMobile = value;
-    };
     toggle = (side = 'left') => {
-        return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open[side], side);
+        if (this.#isMobile.current)
+            return this.setOpen(!this.openMobile[side], side);
+        else
+            return this.setOpen(!this.open[side], side);
     };
 }
 const SYMBOL_KEY = 'scn-sidebar';

package/dist/lib/components/sidebar/sidebar-content.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
   class={cn(
     `
       flex min-h-0 flex-1 flex-col gap-2 overflow-auto
-      group-data-[collapsible=icon]:overflow-hidden
+      group-data-[collapsible=icon]:group-data-[open=false]:overflow-hidden
     `,
     className
   )}

package/dist/lib/components/sidebar/sidebar-group-action.svelte CHANGED Viewed

@@ -28,7 +28,7 @@
         after:absolute after:-inset-2
         after:md:hidden
       `,
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       className
     ),
     'data-sidebar': 'group-action',

package/dist/lib/components/sidebar/sidebar-group-label.svelte CHANGED Viewed

@@ -22,7 +22,10 @@
         focus-visible:ring-2
         [&>svg]:size-4 [&>svg]:shrink-0
       `,
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      `
+        group-data-[collapsible=icon]:group-data-[open=false]:-mt-8
+        group-data-[collapsible=icon]:group-data-[open=false]:opacity-0
+      `,
       className
     ),
     'data-sidebar': 'group-label',

package/dist/lib/components/sidebar/sidebar-group-label.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-group-label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-group-label.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD,CAAC;~~AAyCJ~~,QAAA,MAAM,iBAAiB,yDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"sidebar-group-label.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-group-label.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAErD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC,GAAG;IACpE,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD,CAAC;AA4CJ,QAAA,MAAM,iBAAiB,yDAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/lib/components/sidebar/sidebar-inset.svelte CHANGED Viewed

@@ -20,7 +20,7 @@
     `
       md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl
       md:peer-data-[variant=inset]:shadow-sm
-      md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2
+      md:peer-data-[open=false]:peer-data-[variant=inset]:ml-2
     `,
     className
   )}

package/dist/lib/components/sidebar/sidebar-menu-action.svelte CHANGED Viewed

@@ -34,13 +34,13 @@
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
       'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       showOnHover &&
         `
           group-focus-within/menu-item:opacity-100
           group-hover/menu-item:opacity-100
           peer-data-[active=true]/menu-button:text-sidebar-accent-foreground
-          data-[state=open]:opacity-100
+          data-[open=true]:opacity-100
           md:opacity-0
         `,
       className

package/dist/lib/components/sidebar/sidebar-menu-badge.svelte CHANGED Viewed

@@ -26,7 +26,7 @@
     'peer-data-[size=sm]/menu-button:top-1',
     'peer-data-[size=default]/menu-button:top-1.5',
     'peer-data-[size=lg]/menu-button:top-2.5',
-    'group-data-[collapsible=icon]:hidden',
+    'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
     className
   )}
   {...restProps}

package/dist/lib/components/sidebar/sidebar-menu-button.svelte CHANGED Viewed

@@ -6,7 +6,8 @@
       peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring
       transition-[width,height,padding] outline-none
       group-has-data-[sidebar=menu-action]/menu-item:pr-8
-      group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!
+      group-data-[collapsible=icon]:group-data-[open=false]:size-8!
+      group-data-[collapsible=icon]:group-data-[open=false]:p-2!
       hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
       focus-visible:ring-2
       active:bg-sidebar-accent active:text-sidebar-accent-foreground
@@ -14,7 +15,7 @@
       aria-disabled:pointer-events-none aria-disabled:opacity-50
       data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium
       data-[active=true]:text-sidebar-accent-foreground
-      data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground
+      data-[open=true]:hover:bg-sidebar-accent data-[open=true]:hover:text-sidebar-accent-foreground
       [&>span:last-child]:truncate
       [&>svg]:size-4 [&>svg]:shrink-0
     `),
@@ -32,7 +33,7 @@
         sm: 'h-7 text-xs',
         lg: `
           h-12 text-sm
-          group-data-[collapsible=icon]:p-0!
+          group-data-[collapsible=icon]:group-data-[open=false]:p-0!
         `
       }
     },
@@ -118,7 +119,7 @@
     <Tooltip.Content
       side="right"
       align="center"
-      hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+      hidden={sidebar.open[side] === false || sidebar.isMobile}
       children={tooltipContent}
       {...tooltipContentProps}
     />
@@ -140,7 +141,7 @@
         <Tooltip.Content
           side="right"
           align="center"
-          hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+          hidden={sidebar.open[side] === false || sidebar.isMobile}
           children={tooltipContent}
           {...tooltipContentProps}
         />

package/dist/lib/components/sidebar/sidebar-menu-button.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-menu-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-menu-button.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~mDAuCpC~~,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,SAAS,CAAC,CAAC;AACjG,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7F,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACvF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC;AACpD,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,GAAG;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD,CAAC;AAuFJ,QAAA,MAAM,iBAAiB,uEAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
1	+ {"version":3,"file":"sidebar-menu-button.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-menu-button.svelte.ts"],"names":[],"mappings":"AAGE,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAE1D,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mDAwCpC,CAAC;AAEH,MAAM,MAAM,wBAAwB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,SAAS,CAAC,CAAC;AACjG,MAAM,MAAM,qBAAqB,GAAG,YAAY,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAC;AAG7F,OAAO,EAAc,KAAK,cAAc,EAAE,KAAK,sBAAsB,EAAE,MAAM,SAAS,CAAC;AACvF,OAAO,KAAK,OAAO,MAAM,0BAA0B,CAAC;AACpD,OAAO,KAAK,WAAW,MAAM,+BAA+B,CAAC;AAG7D,OAAO,KAAK,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,iBAAiB,CAAC,EAAE,iBAAiB,CAAC,GAAG;IAC7F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,wBAAwB,CAAC;IACnC,IAAI,CAAC,EAAE,qBAAqB,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IACrF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,iBAAiB,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC;IACvF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAAE,CAAC,CAAC,CAAC;CACvD,CAAC;AAuFJ,QAAA,MAAM,iBAAiB,uEAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/lib/components/sidebar/sidebar-menu-sub-button.svelte CHANGED Viewed

@@ -34,7 +34,7 @@
       'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
       size === 'sm' && 'text-xs',
       size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       className
     ),
     'data-sidebar': 'menu-sub-button',

package/dist/lib/components/sidebar/sidebar-menu-sub.svelte CHANGED Viewed

@@ -16,7 +16,7 @@
   data-sidebar="menu-sub"
   class={cn(
     'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-    'group-data-[collapsible=icon]:hidden',
+    'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
     className
   )}
   {...restProps}

package/dist/lib/components/sidebar/sidebar-provider.svelte CHANGED Viewed

@@ -5,6 +5,8 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';
   import { setSidebar } from './context.svelte.js';
+  import { browser } from '$app/environment';
+  import { box } from 'svelte-toolbelt';
   let {
     ref = $bindable(null),
@@ -12,7 +14,7 @@
       left: true,
       right: true
     }),
-    onOpenChange = () => {},
+    onOpenChange,
     class: className,
     style,
     children,
@@ -26,13 +28,22 @@
   } = $props();
   const sidebar = setSidebar({
-    open: () => open,
+    open: box.with(
+      () => open,
+      (v) => (open = v)
+    ),
     setOpen: (value: boolean, side: 'left' | 'right' = 'left') => {
-      open[side] = value;
-      onOpenChange(value, side);
+      if (sidebar.isMobile) {
+        sidebar.openMobile[side] = value;
+      } else {
+        open[side] = value;
+      }
+      onOpenChange?.(value, side);
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}-${side}=${open[side]}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      if (browser) {
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}-${side}=${open[side]}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      }
     }
   });
 </script>

package/dist/lib/components/sidebar/sidebar-provider.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-provider.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;~~AAIrD~~,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAChE,CAAC;~~AAkDJ~~,QAAA,MAAM,eAAe,kEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"sidebar-provider.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-provider.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAMrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE;QACL,IAAI,EAAE,OAAO,CAAC;QACd,KAAK,EAAE,OAAO,CAAC;KAChB,CAAC;IACF,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,KAAK,IAAI,CAAC;CAChE,CAAC;AA6DJ,QAAA,MAAM,eAAe,kEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/lib/components/sidebar/sidebar-rail.svelte CHANGED Viewed

@@ -42,9 +42,9 @@
       [[data-side=right][data-state=collapsed]_&]:cursor-w-resize
     `,
     `
-      group-data-[collapsible=offcanvas]:translate-x-0
-      group-data-[collapsible=offcanvas]:after:left-full
-      group-data-[collapsible=offcanvas]:hover:bg-sidebar
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:translate-x-0
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:after:left-full
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:hover:bg-sidebar
     `,
     '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
     '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',

package/dist/lib/components/sidebar/sidebar-trigger.svelte CHANGED Viewed

@@ -22,6 +22,7 @@
   type="button"
   onclick={(e) => {
     onclick?.(e);
+    console.log('TOggling', side);
     sidebar.toggle(side);
   }}
   data-sidebar="trigger"

package/dist/lib/components/sidebar/sidebar-trigger.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,gBAAgB,GAAI,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB,CAAC;~~AA4BJ~~,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
1	+ {"version":3,"file":"sidebar-trigger.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar-trigger.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAG5C,KAAK,gBAAgB,GAAI,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACtD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IAClC,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB,CAAC;AA6BJ,QAAA,MAAM,cAAc,yDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/lib/components/sidebar/sidebar.svelte CHANGED Viewed

@@ -9,18 +9,25 @@
   let {
     ref = $bindable(null),
     side = 'left',
+    sideMobile,
     variant = 'sidebar',
     collapsible = 'offcanvas',
+    open,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     side?: 'left' | 'right';
+    sideMobile?: 'left' | 'right' | 'top' | 'bottom';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
+    open?: boolean;
   } = $props();
   const sidebar = useSidebar();
+  // svelte-ignore state_referenced_locally
+  if (open !== undefined) sidebar.setOpen(open, side);
 </script>
 {#if collapsible === 'none'}
@@ -40,16 +47,20 @@
     {@render children?.()}
   </div>
 {:else if sidebar.isMobile}
-  <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+  <Sheet.Root bind:open={() => sidebar.openMobile[side], (v) => sidebar.setOpen(v, side)} {...restProps}>
     <Sheet.Content
       data-sidebar="sidebar"
       data-mobile="true"
-      class="
-        w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground
-        [&>button]:hidden
-      "
+      class={cn(
+        `
+          bg-sidebar p-0 text-sidebar-foreground
+          [&>button]:hidden
+        `,
+        sideMobile === 'top' || sideMobile === 'bottom' ? '' : 'w-(--sidebar-width)',
+        className
+      )}
       style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
-      {side}
+      side={sideMobile ?? side}
     >
       <div class="flex h-full w-full flex-col">
         {@render children?.()}
@@ -63,7 +74,7 @@
       `
         peer relative hidden w-(--sidebar-width) flex-auto grow-0 flex-col overflow-hidden bg-sidebar
         text-sidebar-foreground transition-[width] duration-200 ease-linear
-        data-[collapsible=offcanvas]:w-0
+        data-[collapsible=offcanvas]:data-[open=false]:w-0
         data-[variant=floating]:rounded-lg data-[variant=floating]:border data-[variant=floating]:border-sidebar-border
         data-[variant=floating]:shadow-sm
         md:flex
@@ -72,10 +83,10 @@
       variant === 'floating' || variant === 'inset'
         ? `
           m-2
-          data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon))]
+          data-[collapsible=icon]:data-[open=false]:w-[calc(var(--sidebar-width-icon))]
         `
         : `
-          data-[collapsible=icon]:w-(--sidebar-width-icon)
+          data-[collapsible=icon]:data-[open=false]:w-(--sidebar-width-icon)
           data-[side=left]:border-r
           data-[side=right]:border-l
         `,
@@ -83,8 +94,8 @@
       className
     )}
     data-sidebar="sidebar"
-    data-state={sidebar.state[side]}
-    data-collapsible={sidebar.state[side] === 'collapsed' ? collapsible : ''}
+    data-open={sidebar.open[side]}
+    data-collapsible={collapsible}
     data-variant={variant}
     data-side={side}
     {...restProps}

package/dist/lib/components/sidebar/sidebar.svelte.d.ts CHANGED Viewed

@@ -2,8 +2,10 @@ import type { WithElementRef } from 'bits-ui';
 import type { HTMLAttributes } from 'svelte/elements';
 type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     side?: 'left' | 'right';
+    sideMobile?: 'left' | 'right' | 'top' | 'bottom';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
+    open?: boolean;
 };
 declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Sidebar = ReturnType<typeof Sidebar>;

package/dist/lib/components/sidebar/sidebar.svelte.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;~~CAC7C~~,CAAC;~~AA4EJ~~,QAAA,MAAM,OAAO,yDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
1	+ {"version":3,"file":"sidebar.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/sidebar/sidebar.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAIrD,KAAK,gBAAgB,GAAI,cAAc,CAAC,cAAc,CAAC,cAAc,CAAC,CAAC,GAAG;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;IACjD,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;IAC3C,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,MAAM,CAAC;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB,CAAC;AAqFJ,QAAA,MAAM,OAAO,yDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}

package/dist/lib/vite/vite-plugin-component-source-collector.d.ts CHANGED Viewed

@@ -15,6 +15,6 @@ interface Options {
      */
     safePackages: string[];
 }
-export default function componentSourceCollector(opts?: Options): Plugin;
+export default function componentSourceCollector(opts?: Options): Promise<Plugin>;
 export {};
 //# sourceMappingURL=vite-plugin-component-source-collector.d.ts.map

package/dist/lib/vite/vite-plugin-component-source-collector.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;~~AAKnD~~,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAKD,~~MAAM~~,~~CAAC,OAAO,UAAU,~~wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,MAAM,~~CA4J7F~~"}
1	+ {"version":3,"file":"vite-plugin-component-source-collector.d.ts","sourceRoot":"","sources":["../../../src/lib/vite/vite-plugin-component-source-collector.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAkB,MAAM,MAAM,CAAC;AAMnD,UAAU,OAAO;IACf;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC5B;;OAEG;IACH,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB;AAKD,wBAA8B,wBAAwB,CAAC,IAAI,GAAE,OAA8B,GAAG,OAAO,CAAC,MAAM,CAAC,CAoK5G"}

package/dist/lib/vite/vite-plugin-component-source-collector.js CHANGED Viewed

@@ -1,9 +1,10 @@
 import { exists, writeIfDifferent } from 'ts-ag';
 import { readFile } from 'fs/promises';
 import { resolve, join, relative, dirname } from 'path';
+import { open } from 'fs/promises';
 /** All unique component directories */
 const componentFiles = new Set();
-export default function componentSourceCollector(opts = { safePackages: [] }) {
+export default async function componentSourceCollector(opts = { safePackages: [] }) {
     // constants
     const outFileName = opts.outputFile ?? 'component-sources.css';
     const classRegex = /class(?:=|:)/;
@@ -15,6 +16,7 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
     let firstRound = true;
     let initialTransformDone = false;
     let initialTransformTimer = null;
+    // init
     function shouldAdd(code) {
         return classRegex.test(code);
     }
@@ -26,7 +28,7 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
             (!/\.pnpm|.vite/.test(file) || opts.safePackages.some((p) => file.includes(`node_modules/${p}`)))) {
             const cleanedFileName = file.replace(/\?v=.*$/, '');
             const relativeFilePath = relative(dirname(outputFilePath), cleanedFileName);
-            if (relativeFilePath !== outputFilePath) {
+            if (relativeFilePath !== outFileName) {
                 // Dont add itself
                 componentFiles.add(relativeFilePath);
             }
@@ -42,6 +44,10 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
             }
         }, 1000); // adjust delay as needed
     }
+    async function touch(path) {
+        const handle = await open(path, 'a');
+        await handle.close();
+    }
     const writeOutFile = async () => {
         const lines = Array.from(componentFiles)
             .map((d) => `@source '${d}';`)
@@ -63,6 +69,7 @@ export default function componentSourceCollector(opts = { safePackages: [] }) {
             config = resolved;
             root = config.root;
             outputFilePath = resolve(root, outFileName);
+            await touch(outputFilePath);
             if (config.command === 'build' && firstRound) {
                 componentFiles.clear();
                 firstRound = false;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "svelte-ag",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "Useful svelte components",
   "bugs": "https://github.com/ageorgeh/svelte-ag/issues",
   "repository": {
@@ -78,13 +78,13 @@
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.2.1",
     "@types/node": "^24.11.0",
-    "@typescript/native-preview": "7.0.0-dev.20260228.1",
+    "@typescript/native-preview": "7.0.0-dev.20260301.1",
     "eslint": "^10.0.2",
     "eslint-plugin-better-tailwindcss": "^4.3.1",
     "eslint-plugin-svelte": "^3.15.0",
-    "globals": "^17.3.0",
+    "globals": "^17.4.0",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^16.3.1",
     "prettier": "^3.8.1",
     "prettier-plugin-packagejson": "^3.0.0",
     "prettier-plugin-svelte": "^3.5.0",

package/src/lib/api/query/query.svelte.ts CHANGED Viewed

@@ -4,8 +4,6 @@ import { stringify } from 'devalue';
 import Bottleneck from 'bottleneck';
 import type { Cache } from './cache.svelte';
-import * as env from '$env/static/public';
-import { sleep } from 'radash';
 import { cacheKey } from './utils.svelte.js';
 import type { BatchDetails } from './entrypoint.svelte';
@@ -179,9 +177,9 @@ export class Requestor<
   // Makes the actual call to the api
   private async fetch(input: ApiInput<API, Path, Method>): Promise<ApiResponse<API, Path, Method>> {
-    if ('PUBLIC_ENVIRONMENT' in env && env.PUBLIC_ENVIRONMENT === 'development') {
-      await sleep(1000);
-    }
+    // if ('PUBLIC_ENVIRONMENT' in env && env.PUBLIC_ENVIRONMENT === 'development') {
+    //   await sleep(1000);
+    // }
     return await this.#limiter.schedule(() => this.#request(this.#path, this.#method, input));
   }

package/src/lib/components/breakpoint-badge/BreakpointBadge.svelte CHANGED Viewed

@@ -11,78 +11,69 @@
       bgClass: 'bg-red-100',
       borderClass: 'border-red-300',
       textClass: 'text-red-600',
-      hideClass: 'sm:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'sm:hidden'
     },
     {
       name: 'sm',
       bgClass: 'bg-blue-100',
       borderClass: 'border-blue-300',
       textClass: 'text-blue-600',
-      hideClass: 'hidden sm:block md:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden sm:block md:hidden'
     },
     {
       name: 'md',
       bgClass: 'bg-purple-100',
       borderClass: 'border-purple-300',
       textClass: 'text-purple-600',
-      hideClass: 'hidden md:block lg:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden md:block lg:hidden'
     },
     {
       name: 'lg',
       bgClass: 'bg-green-100',
       borderClass: 'border-green-300',
       textClass: 'text-green-800',
-      hideClass: 'hidden lg:block xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden lg:block xl:hidden'
     },
     {
       name: 'xl',
       bgClass: 'bg-orange-100',
       borderClass: 'border-orange-300',
       textClass: 'text-orange-600',
-      hideClass: 'hidden xl:block 2xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden xl:block 2xl:hidden'
     },
     {
       name: '2xl',
       bgClass: 'bg-yellow-100',
       borderClass: 'border-yellow-300',
       textClass: 'text-yellow-600',
-      hideClass: 'hidden 2xl:block 3xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 2xl:block 3xl:hidden'
     },
     {
       name: '3xl',
       bgClass: 'bg-blue-100',
       borderClass: 'border-blue-300',
       textClass: 'text-blue-600',
-      hideClass: 'hidden 3xl:block 4xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 3xl:block 4xl:hidden'
     },
     {
       name: '4xl',
       bgClass: 'bg-red-100',
       borderClass: 'border-red-300',
       textClass: 'text-red-600',
-      hideClass: 'hidden 4xl:block 5xl:hidden',
-      rounded: 'rounded-md'
+      hideClass: 'hidden 4xl:block 5xl:hidden'
     }
   ];
 </script>
 {#if dev}
-  <div class="w-fit">
+  <div class="w-fit" data-testid="breakpoint-badge">
     {#each breakpoints as bp (bp.name)}
       <div
-        class="{bp.rounded}
+        class="
+          rounded-md border px-2 text-xs font-bold
           {bp.bgClass}
           {bp.hideClass}
-          border
           {bp.borderClass}
-          px-2 text-xs font-bold
           {bp.textClass}"
       >
         {bp.name}

package/src/lib/components/sidebar/context.svelte.ts CHANGED Viewed

@@ -1,8 +1,7 @@
 import { IsMobile } from '$shadcn/hooks/is-mobile.svelte.js';
 import { getContext, setContext } from 'svelte';
 import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
-type Getter<T> = () => T;
+import type { WritableBox } from 'svelte-toolbelt';
 export type SidebarStateProps = {
   /**
@@ -10,7 +9,7 @@ export type SidebarStateProps = {
    * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
    * component.
    */
-  open: Getter<{ left: boolean; right: boolean }>;
+  open: WritableBox<{ left: boolean; right: boolean }>;
   /**
    * A function that sets the open state of the sidebar. To support `bind:open`, we need
@@ -22,23 +21,26 @@ export type SidebarStateProps = {
 class SidebarState {
   readonly props: SidebarStateProps;
-  open = $derived.by(() => this.props.open());
-  openMobile = $state(false);
+  // open = $derived.by(() => this.props.open.current);
+  #open: WritableBox<{ left: boolean; right: boolean }>;
+  openMobile = $state({ left: false, right: false });
   setOpen: SidebarStateProps['setOpen'];
   #isMobile: IsMobile;
-  state = $derived.by(() => {
-    return {
-      left: this.open.left ? 'expanded' : 'collapsed',
-      right: this.open.right ? 'expanded' : 'collapsed'
-    };
-  });
   constructor(props: SidebarStateProps) {
     this.setOpen = props.setOpen;
     this.#isMobile = new IsMobile();
+    this.#open = props.open;
     this.props = props;
   }
+  get open() {
+    return this.props.open.current;
+  }
+  set open(v) {
+    this.#open.current = v;
+  }
   // Convenience getter for checking if the sidebar is mobile
   // without this, we would need to use `sidebar.isMobile.current` everywhere
   get isMobile() {
@@ -53,12 +55,9 @@ class SidebarState {
     }
   };
-  setOpenMobile = (value: boolean) => {
-    this.openMobile = value;
-  };
   toggle = (side: 'left' | 'right' = 'left') => {
-    return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open[side], side);
+    if (this.#isMobile.current) return this.setOpen(!this.openMobile[side], side);
+    else return this.setOpen(!this.open[side], side);
   };
 }

package/src/lib/components/sidebar/sidebar-content.svelte CHANGED Viewed

@@ -17,7 +17,7 @@
   class={cn(
     `
       flex min-h-0 flex-1 flex-col gap-2 overflow-auto
-      group-data-[collapsible=icon]:overflow-hidden
+      group-data-[collapsible=icon]:group-data-[open=false]:overflow-hidden
     `,
     className
   )}

package/src/lib/components/sidebar/sidebar-group-action.svelte CHANGED Viewed

@@ -28,7 +28,7 @@
         after:absolute after:-inset-2
         after:md:hidden
       `,
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       className
     ),
     'data-sidebar': 'group-action',

package/src/lib/components/sidebar/sidebar-group-label.svelte CHANGED Viewed

@@ -22,7 +22,10 @@
         focus-visible:ring-2
         [&>svg]:size-4 [&>svg]:shrink-0
       `,
-      'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      `
+        group-data-[collapsible=icon]:group-data-[open=false]:-mt-8
+        group-data-[collapsible=icon]:group-data-[open=false]:opacity-0
+      `,
       className
     ),
     'data-sidebar': 'group-label',

package/src/lib/components/sidebar/sidebar-inset.svelte CHANGED Viewed

@@ -20,7 +20,7 @@
     `
       md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl
       md:peer-data-[variant=inset]:shadow-sm
-      md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2
+      md:peer-data-[open=false]:peer-data-[variant=inset]:ml-2
     `,
     className
   )}

package/src/lib/components/sidebar/sidebar-menu-action.svelte CHANGED Viewed

@@ -34,13 +34,13 @@
       'peer-data-[size=sm]/menu-button:top-1',
       'peer-data-[size=default]/menu-button:top-1.5',
       'peer-data-[size=lg]/menu-button:top-2.5',
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       showOnHover &&
         `
           group-focus-within/menu-item:opacity-100
           group-hover/menu-item:opacity-100
           peer-data-[active=true]/menu-button:text-sidebar-accent-foreground
-          data-[state=open]:opacity-100
+          data-[open=true]:opacity-100
           md:opacity-0
         `,
       className

package/src/lib/components/sidebar/sidebar-menu-badge.svelte CHANGED Viewed

@@ -26,7 +26,7 @@
     'peer-data-[size=sm]/menu-button:top-1',
     'peer-data-[size=default]/menu-button:top-1.5',
     'peer-data-[size=lg]/menu-button:top-2.5',
-    'group-data-[collapsible=icon]:hidden',
+    'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
     className
   )}
   {...restProps}

package/src/lib/components/sidebar/sidebar-menu-button.svelte CHANGED Viewed

@@ -6,7 +6,8 @@
       peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring
       transition-[width,height,padding] outline-none
       group-has-data-[sidebar=menu-action]/menu-item:pr-8
-      group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2!
+      group-data-[collapsible=icon]:group-data-[open=false]:size-8!
+      group-data-[collapsible=icon]:group-data-[open=false]:p-2!
       hover:bg-sidebar-accent hover:text-sidebar-accent-foreground
       focus-visible:ring-2
       active:bg-sidebar-accent active:text-sidebar-accent-foreground
@@ -14,7 +15,7 @@
       aria-disabled:pointer-events-none aria-disabled:opacity-50
       data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium
       data-[active=true]:text-sidebar-accent-foreground
-      data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground
+      data-[open=true]:hover:bg-sidebar-accent data-[open=true]:hover:text-sidebar-accent-foreground
       [&>span:last-child]:truncate
       [&>svg]:size-4 [&>svg]:shrink-0
     `),
@@ -32,7 +33,7 @@
         sm: 'h-7 text-xs',
         lg: `
           h-12 text-sm
-          group-data-[collapsible=icon]:p-0!
+          group-data-[collapsible=icon]:group-data-[open=false]:p-0!
         `
       }
     },
@@ -118,7 +119,7 @@
     <Tooltip.Content
       side="right"
       align="center"
-      hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+      hidden={sidebar.open[side] === false || sidebar.isMobile}
       children={tooltipContent}
       {...tooltipContentProps}
     />
@@ -140,7 +141,7 @@
         <Tooltip.Content
           side="right"
           align="center"
-          hidden={sidebar.state[side] !== 'collapsed' || sidebar.isMobile}
+          hidden={sidebar.open[side] === false || sidebar.isMobile}
           children={tooltipContent}
           {...tooltipContentProps}
         />

package/src/lib/components/sidebar/sidebar-menu-sub-button.svelte CHANGED Viewed

@@ -34,7 +34,7 @@
       'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
       size === 'sm' && 'text-xs',
       size === 'md' && 'text-sm',
-      'group-data-[collapsible=icon]:hidden',
+      'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
       className
     ),
     'data-sidebar': 'menu-sub-button',

package/src/lib/components/sidebar/sidebar-menu-sub.svelte CHANGED Viewed

@@ -16,7 +16,7 @@
   data-sidebar="menu-sub"
   class={cn(
     'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5',
-    'group-data-[collapsible=icon]:hidden',
+    'group-data-[collapsible=icon]:group-data-[open=false]:hidden',
     className
   )}
   {...restProps}

package/src/lib/components/sidebar/sidebar-provider.svelte CHANGED Viewed

@@ -5,6 +5,8 @@
   import type { HTMLAttributes } from 'svelte/elements';
   import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './constants.js';
   import { setSidebar } from './context.svelte.js';
+  import { browser } from '$app/environment';
+  import { box } from 'svelte-toolbelt';
   let {
     ref = $bindable(null),
@@ -12,7 +14,7 @@
       left: true,
       right: true
     }),
-    onOpenChange = () => {},
+    onOpenChange,
     class: className,
     style,
     children,
@@ -26,13 +28,22 @@
   } = $props();
   const sidebar = setSidebar({
-    open: () => open,
+    open: box.with(
+      () => open,
+      (v) => (open = v)
+    ),
     setOpen: (value: boolean, side: 'left' | 'right' = 'left') => {
-      open[side] = value;
-      onOpenChange(value, side);
+      if (sidebar.isMobile) {
+        sidebar.openMobile[side] = value;
+      } else {
+        open[side] = value;
+      }
+      onOpenChange?.(value, side);
-      // This sets the cookie to keep the sidebar state.
-      document.cookie = `${SIDEBAR_COOKIE_NAME}-${side}=${open[side]}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      if (browser) {
+        // This sets the cookie to keep the sidebar state.
+        document.cookie = `${SIDEBAR_COOKIE_NAME}-${side}=${open[side]}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+      }
     }
   });
 </script>

package/src/lib/components/sidebar/sidebar-rail.svelte CHANGED Viewed

@@ -42,9 +42,9 @@
       [[data-side=right][data-state=collapsed]_&]:cursor-w-resize
     `,
     `
-      group-data-[collapsible=offcanvas]:translate-x-0
-      group-data-[collapsible=offcanvas]:after:left-full
-      group-data-[collapsible=offcanvas]:hover:bg-sidebar
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:translate-x-0
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:after:left-full
+      group-data-[collapsible=offcanvas]:group-data-[open=false]:hover:bg-sidebar
     `,
     '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
     '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',

package/src/lib/components/sidebar/sidebar-trigger.svelte CHANGED Viewed

@@ -22,6 +22,7 @@
   type="button"
   onclick={(e) => {
     onclick?.(e);
+    console.log('TOggling', side);
     sidebar.toggle(side);
   }}
   data-sidebar="trigger"

package/src/lib/components/sidebar/sidebar.svelte CHANGED Viewed

@@ -9,18 +9,25 @@
   let {
     ref = $bindable(null),
     side = 'left',
+    sideMobile,
     variant = 'sidebar',
     collapsible = 'offcanvas',
+    open,
     class: className,
     children,
     ...restProps
   }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
     side?: 'left' | 'right';
+    sideMobile?: 'left' | 'right' | 'top' | 'bottom';
     variant?: 'sidebar' | 'floating' | 'inset';
     collapsible?: 'offcanvas' | 'icon' | 'none';
+    open?: boolean;
   } = $props();
   const sidebar = useSidebar();
+  // svelte-ignore state_referenced_locally
+  if (open !== undefined) sidebar.setOpen(open, side);
 </script>
 {#if collapsible === 'none'}
@@ -40,16 +47,20 @@
     {@render children?.()}
   </div>
 {:else if sidebar.isMobile}
-  <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+  <Sheet.Root bind:open={() => sidebar.openMobile[side], (v) => sidebar.setOpen(v, side)} {...restProps}>
     <Sheet.Content
       data-sidebar="sidebar"
       data-mobile="true"
-      class="
-        w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground
-        [&>button]:hidden
-      "
+      class={cn(
+        `
+          bg-sidebar p-0 text-sidebar-foreground
+          [&>button]:hidden
+        `,
+        sideMobile === 'top' || sideMobile === 'bottom' ? '' : 'w-(--sidebar-width)',
+        className
+      )}
       style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
-      {side}
+      side={sideMobile ?? side}
     >
       <div class="flex h-full w-full flex-col">
         {@render children?.()}
@@ -63,7 +74,7 @@
       `
         peer relative hidden w-(--sidebar-width) flex-auto grow-0 flex-col overflow-hidden bg-sidebar
         text-sidebar-foreground transition-[width] duration-200 ease-linear
-        data-[collapsible=offcanvas]:w-0
+        data-[collapsible=offcanvas]:data-[open=false]:w-0
         data-[variant=floating]:rounded-lg data-[variant=floating]:border data-[variant=floating]:border-sidebar-border
         data-[variant=floating]:shadow-sm
         md:flex
@@ -72,10 +83,10 @@
       variant === 'floating' || variant === 'inset'
         ? `
           m-2
-          data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon))]
+          data-[collapsible=icon]:data-[open=false]:w-[calc(var(--sidebar-width-icon))]
         `
         : `
-          data-[collapsible=icon]:w-(--sidebar-width-icon)
+          data-[collapsible=icon]:data-[open=false]:w-(--sidebar-width-icon)
           data-[side=left]:border-r
           data-[side=right]:border-l
         `,
@@ -83,8 +94,8 @@
       className
     )}
     data-sidebar="sidebar"
-    data-state={sidebar.state[side]}
-    data-collapsible={sidebar.state[side] === 'collapsed' ? collapsible : ''}
+    data-open={sidebar.open[side]}
+    data-collapsible={collapsible}
     data-variant={variant}
     data-side={side}
     {...restProps}

package/src/lib/vite/vite-plugin-component-source-collector.ts CHANGED Viewed

@@ -2,6 +2,7 @@ import type { Plugin, ResolvedConfig } from 'vite';
 import { exists, writeIfDifferent } from 'ts-ag';
 import { readFile } from 'fs/promises';
 import { resolve, join, relative, dirname } from 'path';
+import { open } from 'fs/promises';
 interface Options {
   /**
@@ -23,7 +24,7 @@ interface Options {
 /** All unique component directories */
 const componentFiles = new Set<string>();
-export default function componentSourceCollector(opts: Options = { safePackages: [] }): Plugin {
+export default async function componentSourceCollector(opts: Options = { safePackages: [] }): Promise<Plugin> {
   // constants
   const outFileName = opts.outputFile ?? 'component-sources.css';
   const classRegex = /class(?:=|:)/;
@@ -38,6 +39,7 @@ export default function componentSourceCollector(opts: Options = { safePackages:
   let initialTransformDone = false;
   let initialTransformTimer: NodeJS.Timeout | null = null;
+  // init
   function shouldAdd(code: string) {
     return classRegex.test(code);
   }
@@ -53,7 +55,7 @@ export default function componentSourceCollector(opts: Options = { safePackages:
       const cleanedFileName = file.replace(/\?v=.*$/, '');
       const relativeFilePath = relative(dirname(outputFilePath), cleanedFileName);
-      if (relativeFilePath !== outputFilePath) {
+      if (relativeFilePath !== outFileName) {
         // Dont add itself
         componentFiles.add(relativeFilePath);
       }
@@ -70,6 +72,11 @@ export default function componentSourceCollector(opts: Options = { safePackages:
     }, 1000); // adjust delay as needed
   }
+  async function touch(path: string) {
+    const handle = await open(path, 'a');
+    await handle.close();
+  }
   const writeOutFile = async () => {
     const lines = Array.from(componentFiles)
       .map((d) => `@source '${d}';`)
@@ -95,6 +102,8 @@ export default function componentSourceCollector(opts: Options = { safePackages:
       root = config.root;
       outputFilePath = resolve(root, outFileName);
+      await touch(outputFilePath);
       if (config.command === 'build' && firstRound) {
         componentFiles.clear();
         firstRound = false;