@classic-homes/theme-svelte 1.8.2 → 1.9.1

package/dist/__tests__/sidebar-collapse.test.js

@@ -0,0 +1,58 @@
+/**
+ * Sidebar Collapse Tests
+ *
+ * DashboardLayout applies its `sidebarCollapsed` default only when no open
+ * state is persisted. A first session (nothing in localStorage yet) must
+ * still let the user collapse the sidebar — the default must not re-apply
+ * on every toggle and snap it back open.
+ */
+import { describe, it, expect, beforeEach } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/svelte';
+import { createRawSnippet, flushSync } from 'svelte';
+import DashboardLayout from '../lib/components/layout/DashboardLayout.svelte';
+import { sidebarStore } from '../lib/stores/sidebar.svelte.js';
+let appCounter = 0;
+function freshAppId() {
+    return `test-collapse-${++appCounter}`;
+}
+function renderLayout(appId) {
+    return render(DashboardLayout, {
+        props: {
+            navigation: [{ id: 'main', items: [{ id: 'home', name: 'Home', href: '/' }] }],
+            appId,
+            children: createRawSnippet(() => ({ render: () => '<p>content</p>' })),
+        },
+    });
+}
+describe('sidebar collapse', () => {
+    beforeEach(() => {
+        localStorage.clear();
+        sidebarStore.setMobile(false);
+    });
+    it('collapses on a first session with no persisted state', async () => {
+        const appId = freshAppId();
+        renderLayout(appId);
+        expect(sidebarStore.isOpen).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Collapse sidebar' }));
+        flushSync();
+        expect(sidebarStore.isOpen).toBe(false);
+        expect(localStorage.getItem(`classic-theme-sidebar-${appId}-open`)).toBe('false');
+        expect(screen.getByRole('button', { name: 'Expand sidebar' })).toBeInTheDocument();
+    });
+    it('keeps the collapse after a mobile round-trip in a first session', () => {
+        renderLayout(freshAppId());
+        sidebarStore.toggle();
+        flushSync();
+        sidebarStore.setMobile(true);
+        flushSync();
+        sidebarStore.setMobile(false);
+        flushSync();
+        expect(sidebarStore.isOpen).toBe(false);
+    });
+    it('marks state as persisted once the open state is written', () => {
+        sidebarStore.initialize(freshAppId());
+        expect(sidebarStore.hasPersistedState).toBe(false);
+        sidebarStore.close();
+        expect(sidebarStore.hasPersistedState).toBe(true);
+    });
+});

package/dist/lib/components/layout/DashboardLayout.svelte

@@ -10,7 +10,7 @@
    * - Main content area with proper spacing
    * - Integrated with sidebar store for state management
    */
-  import type { Snippet } from 'svelte';
+  import { untrack, type Snippet } from 'svelte';
   import type {
     NavSection,
     NavItem,
@@ -201,13 +201,18 @@
   $effect(() => {
     sidebarStore.initialize(appId);
 
-    // Only apply prop-based initial state if no persisted state exists
+    // Only apply prop-based initial state if no persisted state exists.
+    // Untracked: open()/close() read `isOpen`, and tracking it would re-run
+    // this effect on every toggle and snap the sidebar back to the default.
     if (!sidebarStore.hasPersistedState && !isMobile) {
-      if (sidebarCollapsed) {
-        sidebarStore.close();
-      } else {
-        sidebarStore.open();
-      }
+      const collapsed = sidebarCollapsed;
+      untrack(() => {
+        if (collapsed) {
+          sidebarStore.close();
+        } else {
+          sidebarStore.open();
+        }
+      });
     }
   });
 

package/dist/lib/components/layout/DashboardLayout.svelte.d.ts

@@ -9,7 +9,7 @@
    * - Main content area with proper spacing
    * - Integrated with sidebar store for state management
    */
-import type { Snippet } from 'svelte';
+import { type Snippet } from 'svelte';
 import type { NavSection, NavItem, User, QuickLink, BackLink, HeaderSearchConfig } from '../../types/layout.js';
 type Breakpoint = 'sm' | 'md' | 'lg';
 interface Props {

package/dist/lib/stores/sidebar.svelte.d.ts

@@ -18,7 +18,8 @@ declare class SidebarStore {
      */
     get initialized(): boolean;
     /**
-     * Whether the sidebar open state was loaded from localStorage
+     * Whether a sidebar open state exists in localStorage (loaded at
+     * initialize, or written since)
      */
     get hasPersistedState(): boolean;
     /**

package/dist/lib/stores/sidebar.svelte.js

@@ -45,7 +45,8 @@ class SidebarStore {
         return __classPrivateFieldGet(this, _SidebarStore_initialized, "f");
     }
     /**
-     * Whether the sidebar open state was loaded from localStorage
+     * Whether a sidebar open state exists in localStorage (loaded at
+     * initialize, or written since)
      */
     get hasPersistedState() {
         return __classPrivateFieldGet(this, _SidebarStore_loadedFromStorage, "f");
@@ -340,6 +341,9 @@ _SidebarStore_initialized = new WeakMap(), _SidebarStore_loadedFromStorage = new
         return;
     try {
         localStorage.setItem(__classPrivateFieldGet(this, _SidebarStore_instances, "m", _SidebarStore_getStorageKey).call(this, 'open'), String(this.isOpen));
+        // The key now exists: a caller that applies defaults only when nothing
+        // is persisted must stop doing so, or it undoes the user's toggle.
+        __classPrivateFieldSet(this, _SidebarStore_loadedFromStorage, true, "f");
     }
     catch {
         // localStorage not available

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.8.2",
+  "version": "1.9.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",