@r2digisolutions/components 0.12.0 → 0.13.0

package/dist/components/organisms/AppShell/AppShell.svelte

@@ -73,7 +73,7 @@
 		framed = false,
 		mainClass = '',
 		class: className = '',
-		actions,
+		actions: actionsSlot,
 		children
 	}: AppShellProps = $props();
 
@@ -98,7 +98,12 @@
 		};
 	});
 
-	const resolvedContextual = $derived(chrome.contextual ?? propContextual);
+	const resolvedContextual = $derived(chrome.source?.() ?? propContextual);
+	const contextualKey = $derived(
+		resolvedContextual
+			? `${resolvedContextual.parentHref ?? ''}:${resolvedContextual.brand ?? ''}:${resolvedContextual.description ?? ''}`
+			: ''
+	);
 	const showRail = $derived(rail.length > 0 || railFooter.length > 0);
 	let mobileOpen = $state(false);
 
@@ -198,26 +203,28 @@
 	{/if}
 
 	{#if resolvedContextual}
-		<div
-			class={[
-				'z-40 h-full shrink-0',
-				!mobileOpen && 'max-md:hidden',
-				mobileOpen &&
-					mobileShowsContextual &&
-					'max-md:fixed max-md:inset-y-0 max-md:z-40 max-md:shadow-xl',
-				mobileOpen && mobileShowsContextual && showRail && 'max-md:left-14',
-				mobileOpen && mobileShowsContextual && !showRail && 'max-md:left-0'
-			]}
-		>
-			<Sidebar
-				brand={resolvedContextual.brand ?? brand}
-				groups={resolvedContextual.groups}
-				value={resolvedContextual.value}
-				collapsible={false}
-				header={resolvedContextual.header ?? contextualHeaderDefault}
-				onchange={onContextualNav}
-			/>
-		</div>
+		{#key contextualKey}
+			<div
+				class={[
+					'z-40 h-full shrink-0',
+					!mobileOpen && 'max-md:hidden',
+					mobileOpen &&
+						mobileShowsContextual &&
+						'max-md:fixed max-md:inset-y-0 max-md:z-40 max-md:shadow-xl',
+					mobileOpen && mobileShowsContextual && showRail && 'max-md:left-14',
+					mobileOpen && mobileShowsContextual && !showRail && 'max-md:left-0'
+				]}
+			>
+				<Sidebar
+					brand={resolvedContextual.brand ?? brand}
+					groups={resolvedContextual.groups}
+					value={resolvedContextual.value}
+					collapsible={false}
+					header={resolvedContextual.header ?? contextualHeaderDefault}
+					onchange={onContextualNav}
+				/>
+			</div>
+		{/key}
 	{/if}
 
 	<div class="min-h-0 min-w-0 flex flex-1 flex-col">
@@ -261,7 +268,7 @@
 					</div>
 				{/snippet}
 				{#snippet actions()}
-					{#if actions}{@render actions()}{/if}
+					{#if actionsSlot}{@render actionsSlot()}{/if}
 				{/snippet}
 			</Navbar>
 		{/if}

package/dist/components/organisms/AppShell/app-chrome.svelte.d.ts

@@ -12,7 +12,9 @@ export interface AppShellContextual {
     onchange?: (id: string) => void;
 }
 export declare class AppChrome {
-    contextual: AppShellContextual | null;
-    setContextual(nav: AppShellContextual | null): void;
+    /** Live reader so nested layouts stay reactive when `[id]` is reused. */
+    source: (() => AppShellContextual | null) | null;
+    get contextual(): AppShellContextual | null;
+    setContextual(nav: AppShellContextual | (() => AppShellContextual | null) | null): void;
 }
 export declare const getAppChrome: () => AppChrome, setAppChrome: (context: AppChrome) => AppChrome;

package/dist/components/organisms/AppShell/app-chrome.svelte.js

@@ -1,8 +1,16 @@
 import { createContext } from 'svelte';
 export class AppChrome {
-    contextual = $state.raw(null);
+    /** Live reader so nested layouts stay reactive when `[id]` is reused. */
+    source = $state.raw(null);
+    get contextual() {
+        return this.source?.() ?? null;
+    }
     setContextual(nav) {
-        this.contextual = nav;
+        if (nav === null) {
+            this.source = null;
+            return;
+        }
+        this.source = typeof nav === 'function' ? nav : () => nav;
     }
 }
 export const [getAppChrome, setAppChrome] = createContext();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@r2digisolutions/components",
-	"version": "0.12.0",
+	"version": "0.13.0",
 	"private": false,
 	"description": "R2DigiSolutions Svelte 5 component library — Atomic Design, Tailwind 4, Light/Dark mode",
 	"license": "MIT",