@spaethtech/svelte-ui 0.7.1-dev.45.41387ea → 0.7.1-dev.47.cfe1a36

package/dist/components/SideBarMenu/SideBarMenu.svelte

@@ -125,6 +125,7 @@
     hoverExpandCloseMs = 200,
     side = "left",
     api = $bindable(),
+    activeMode = $bindable(),
     class: additionalClass = "",
   }: {
     items?: SideBarMenuItem[];
@@ -187,6 +188,9 @@
      *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
      *  any open popout and returns a stepped drawer to the top. */
     api?: SideBarMenuApi;
+    /** Read-only (bindable) — the currently active {@link SideBarMenuMode}. Bind it to decide whether
+     *  your own header trigger should render (e.g. only in `drawer`/`stepped`). */
+    activeMode?: SideBarMenuMode;
     class?: string;
   } = $props();
 
@@ -216,8 +220,13 @@
     return active;
   }
 
-  // SSR-safe default — the effect below corrects on mount.
-  let currentMode = $state<SideBarMenuMode>("expanded");
+  // Resolve the mode synchronously on the CLIENT at init (from the real viewport width) so the first
+  // client render is already correct — no post-hydration flash from `expanded` → the actual mode. On
+  // the server `window` is undefined, so SSR emits `expanded`; the client corrects during hydration
+  // (not via a delayed effect). The effect below keeps it in sync on subsequent viewport changes.
+  let currentMode = $state<SideBarMenuMode>(
+    typeof window !== "undefined" ? resolveMode(effectiveModes, window.innerWidth) : "expanded",
+  );
 
   $effect(() => {
     const map = effectiveModes;
@@ -234,6 +243,11 @@
     return () => queries.forEach((q) => q.removeEventListener("change", sync));
   });
 
+  // Mirror the resolved mode out for consumers (bindable, read-only).
+  $effect(() => {
+    activeMode = currentMode;
+  });
+
   const isStepped = $derived(currentMode === "stepped");
   const isDrawer = $derived(currentMode === "drawer" || currentMode === "stepped");
   // Dock side. `right` mirrors the frame, drawer slide, hamburger corner, popout side, and item layout.

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

@@ -135,8 +135,11 @@ type $$ComponentProps = {
      *  (SvelteKit `afterNavigate`, etc.) so a programmatic `goto()`/back-button closes the drawer +
      *  any open popout and returns a stepped drawer to the top. */
     api?: SideBarMenuApi;
+    /** Read-only (bindable) — the currently active {@link SideBarMenuMode}. Bind it to decide whether
+     *  your own header trigger should render (e.g. only in `drawer`/`stepped`). */
+    activeMode?: SideBarMenuMode;
     class?: string;
 };
-declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel" | "api">;
+declare const SideBarMenu: import("svelte").Component<$$ComponentProps, {}, "open" | "stepLevel" | "api" | "activeMode">;
 type SideBarMenu = ReturnType<typeof SideBarMenu>;
 export default SideBarMenu;

package/dist/index.d.ts

@@ -41,7 +41,7 @@ export type { Columns, Gap } from "./components/field-group.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";
-export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, } from "./components/SideBarMenu/SideBarMenu.svelte";
+export type { SideBarMenuItem, SideBarMenuBadge, SideBarMenuBadgeVariant, SideBarMenuApi, SideBarMenuMode, } from "./components/SideBarMenu/SideBarMenu.svelte";
 export { default as TabStrip } from "./components/TabStrip/TabStrip.svelte";
 export type { TabDefinition } from "./components/TabStrip/TabStrip.svelte";
 export { default as DataTable } from "./components/DataTable.svelte";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.7.1-dev.45.41387ea",
+  "version": "0.7.1-dev.47.cfe1a36",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"