@r2digisolutions/components 0.11.0 → 0.12.0

package/dist/components/organisms/AppShell/AppShell.stories.d.ts

@@ -4,6 +4,8 @@ declare const meta: {
     component: import("svelte").Component<{
         fullHeight?: boolean;
         framed?: boolean;
+        showRail?: boolean;
+        showContextual?: boolean;
     }, {}, "">;
     tags: string[];
     parameters: {
@@ -16,13 +18,23 @@ declare const meta: {
         framed: {
             control: "boolean";
         };
+        showRail: {
+            control: "boolean";
+        };
+        showContextual: {
+            control: "boolean";
+        };
     };
     args: {
         fullHeight: true;
         framed: false;
+        showRail: false;
+        showContextual: false;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Fullscreen: Story;
+export declare const WithRail: Story;
+export declare const Coolify: Story;
 export declare const FramedPreview: Story;

package/dist/components/organisms/AppShell/AppShell.stories.js

@@ -8,15 +8,27 @@ const meta = {
     },
     argTypes: {
         fullHeight: { control: 'boolean' },
-        framed: { control: 'boolean' }
+        framed: { control: 'boolean' },
+        showRail: { control: 'boolean' },
+        showContextual: { control: 'boolean' }
     },
     args: {
         fullHeight: true,
-        framed: false
+        framed: false,
+        showRail: false,
+        showContextual: false
     }
 };
 export default meta;
 export const Fullscreen = {};
+export const WithRail = {
+    name: 'With icon rail',
+    args: { showRail: true }
+};
+export const Coolify = {
+    name: 'Rail + contextual',
+    args: { showRail: true, showContextual: true }
+};
 export const FramedPreview = {
     name: 'Framed preview',
     args: { fullHeight: false, framed: true },

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

@@ -2,6 +2,15 @@
 	import type { Snippet } from 'svelte';
 	import Sidebar, { type SidebarGroup } from '../Sidebar/Sidebar.svelte';
 	import Navbar, { type NavbarLink } from '../Navbar/Navbar.svelte';
+	import NavRail, { type NavRailItem } from '../NavRail/NavRail.svelte';
+	import IconButton from '../../atoms/IconButton/IconButton.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import {
+		AppChrome,
+		getAppChrome,
+		setAppChrome,
+		type AppShellContextual
+	} from './app-chrome.svelte.js';
 
 	interface AppShellProps {
 		brand?: string;
@@ -12,6 +21,20 @@
 		collapsed?: boolean;
 		showSidebar?: boolean;
 		showNavbar?: boolean;
+		/** Icon rail. Shown when the list is non-empty. */
+		rail?: NavRailItem[];
+		railFooter?: NavRailItem[];
+		railValue?: string;
+		railBrand?: Snippet;
+		onrailchange?: (id: string) => void;
+		/** Storybook / explicit contextual nav. Nested layouts can also set this via `getAppChrome()`. */
+		contextualGroups?: SidebarGroup[];
+		contextualValue?: string;
+		contextualBrand?: string;
+		contextualHeader?: Snippet;
+		oncontextualchange?: (id: string) => void;
+		onsidebarchange?: (id: string) => void;
+		sidebarFooter?: Snippet;
 		/**
 		 * Fill the viewport. Use `false` + `framed` for compact Storybook previews.
 		 */
@@ -34,6 +57,18 @@
 		collapsed = $bindable(false),
 		showSidebar = true,
 		showNavbar = true,
+		rail = [],
+		railFooter = [],
+		railValue = $bindable(''),
+		railBrand,
+		onrailchange,
+		contextualGroups = [],
+		contextualValue = $bindable(''),
+		contextualBrand = '',
+		contextualHeader,
+		oncontextualchange,
+		onsidebarchange,
+		sidebarFooter,
 		fullHeight = true,
 		framed = false,
 		mainClass = '',
@@ -41,44 +76,196 @@
 		actions,
 		children
 	}: AppShellProps = $props();
+
+	const chrome = (() => {
+		try {
+			return getAppChrome();
+		} catch {
+			const created = new AppChrome();
+			setAppChrome(created);
+			return created;
+		}
+	})();
+
+	const propContextual = $derived.by((): AppShellContextual | null => {
+		if (contextualGroups.length === 0) return null;
+		return {
+			groups: contextualGroups,
+			value: contextualValue,
+			brand: contextualBrand,
+			header: contextualHeader,
+			onchange: oncontextualchange
+		};
+	});
+
+	const resolvedContextual = $derived(chrome.contextual ?? propContextual);
+	const showRail = $derived(rail.length > 0 || railFooter.length > 0);
+	let mobileOpen = $state(false);
+
+	const mobileShowsContextual = $derived(Boolean(resolvedContextual));
+
+	function closeMobile() {
+		mobileOpen = false;
+	}
+
+	function onPrimaryChange(id: string) {
+		onsidebarchange?.(id);
+		closeMobile();
+	}
+
+	function onContextualNav(id: string) {
+		contextualValue = id;
+		resolvedContextual?.onchange?.(id);
+		closeMobile();
+	}
 </script>
 
 <div
 	class={[
-		'flex w-full overflow-hidden bg-surface',
+		'bg-surface relative flex w-full overflow-hidden',
 		fullHeight && 'h-dvh',
-		!fullHeight && framed && 'h-full min-h-0',
+		!fullHeight && framed && 'min-h-0 h-full',
 		!fullHeight && !framed && 'h-[min(36rem,80vh)]',
-		framed && 'rounded-2xl border border-border shadow-sm',
+		framed && 'rounded-2xl border-border shadow-sm border',
 		className
 	]}
 >
-	{#if showSidebar}
-		<Sidebar
-			{brand}
-			groups={sidebarGroups}
-			bind:value={sidebarValue}
-			bind:collapsed
+	{#snippet contextualHeaderDefault()}
+		{#if resolvedContextual}
+			<div class="min-w-0 space-y-1">
+				{#if resolvedContextual.parentHref && resolvedContextual.parentLabel}
+					<a
+						href={resolvedContextual.parentHref}
+						class="text-muted hover:text-primary block truncate text-[11px]"
+					>
+						{resolvedContextual.parentLabel}
+					</a>
+				{/if}
+				<p class="text-sm font-semibold text-primary truncate">{resolvedContextual.brand}</p>
+				<div class="gap-1.5 flex flex-wrap items-center">
+					{#if resolvedContextual.status}
+						<Badge variant="secondary" size="sm">{resolvedContextual.status}</Badge>
+					{/if}
+					{#if resolvedContextual.description}
+						<span class="text-muted truncate text-[11px]">{resolvedContextual.description}</span>
+					{/if}
+				</div>
+			</div>
+		{/if}
+	{/snippet}
+
+	{#if showRail}
+		<NavRail
+			items={rail}
+			footerItems={railFooter}
+			bind:value={railValue}
+			brand={railBrand}
+			onchange={onrailchange}
 		/>
 	{/if}
-	<div class="flex min-h-0 min-w-0 flex-1 flex-col">
+
+	{#if mobileOpen}
+		<button
+			type="button"
+			class="inset-0 bg-black/40 md:hidden fixed z-30"
+			aria-label="Cerrar menú"
+			onclick={closeMobile}
+		></button>
+	{/if}
+
+	{#if showSidebar}
+		<div
+			class={[
+				'z-40 h-full shrink-0',
+				mobileShowsContextual && 'max-md:hidden',
+				!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}
+				groups={sidebarGroups}
+				bind:value={sidebarValue}
+				bind:collapsed
+				footer={sidebarFooter}
+				onchange={onPrimaryChange}
+			/>
+		</div>
+	{/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>
+	{/if}
+
+	<div class="min-h-0 min-w-0 flex flex-1 flex-col">
 		{#if showNavbar}
 			<Navbar
 				{brand}
 				links={navLinks}
 				bind:value={navValue}
-				showBrand={!showSidebar}
+				showBrand={!showSidebar && !showRail}
 				variant="pills"
 				size="sm"
 				bordered
 				maxWidth="full"
 			>
+				{#snippet leading()}
+					<div class="md:hidden">
+						<IconButton
+							label={mobileOpen ? 'Cerrar menú' : 'Abrir menú'}
+							size="sm"
+							onclick={() => (mobileOpen = !mobileOpen)}
+						>
+							<svg
+								class="h-4 w-4"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								aria-hidden="true"
+							>
+								{#if mobileOpen}
+									<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+								{:else}
+									<path
+										stroke-linecap="round"
+										stroke-linejoin="round"
+										d="M4 6h16M4 12h16M4 18h16"
+									/>
+								{/if}
+							</svg>
+						</IconButton>
+					</div>
+				{/snippet}
 				{#snippet actions()}
 					{#if actions}{@render actions()}{/if}
 				{/snippet}
 			</Navbar>
 		{/if}
-		<main class={['min-h-0 flex-1 overflow-auto p-6', mainClass]}>
+		<main class={['min-h-0 p-6 flex-1 overflow-auto', mainClass]}>
 			{#if children}{@render children()}{/if}
 		</main>
 	</div>

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import { type SidebarGroup } from '../Sidebar/Sidebar.svelte';
 import { type NavbarLink } from '../Navbar/Navbar.svelte';
+import { type NavRailItem } from '../NavRail/NavRail.svelte';
 interface AppShellProps {
     brand?: string;
     sidebarGroups?: SidebarGroup[];
@@ -10,6 +11,20 @@ interface AppShellProps {
     collapsed?: boolean;
     showSidebar?: boolean;
     showNavbar?: boolean;
+    /** Icon rail. Shown when the list is non-empty. */
+    rail?: NavRailItem[];
+    railFooter?: NavRailItem[];
+    railValue?: string;
+    railBrand?: Snippet;
+    onrailchange?: (id: string) => void;
+    /** Storybook / explicit contextual nav. Nested layouts can also set this via `getAppChrome()`. */
+    contextualGroups?: SidebarGroup[];
+    contextualValue?: string;
+    contextualBrand?: string;
+    contextualHeader?: Snippet;
+    oncontextualchange?: (id: string) => void;
+    onsidebarchange?: (id: string) => void;
+    sidebarFooter?: Snippet;
     /**
      * Fill the viewport. Use `false` + `framed` for compact Storybook previews.
      */
@@ -22,6 +37,6 @@ interface AppShellProps {
     actions?: Snippet;
     children?: Snippet;
 }
-declare const AppShell: import("svelte").Component<AppShellProps, {}, "collapsed" | "sidebarValue" | "navValue">;
+declare const AppShell: import("svelte").Component<AppShellProps, {}, "collapsed" | "sidebarValue" | "navValue" | "railValue" | "contextualValue">;
 type AppShell = ReturnType<typeof AppShell>;
 export default AppShell;

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

@@ -1,26 +1,68 @@
 <script lang="ts">
 	import AppShell from './AppShell.svelte';
 	import type { SidebarGroup } from '../Sidebar/Sidebar.svelte';
+	import type { NavRailItem } from '../NavRail/NavRail.svelte';
 	import type { NavbarLink } from '../Navbar/Navbar.svelte';
 	import Button from '../../atoms/Button/Button.svelte';
 	import Avatar from '../../atoms/Avatar/Avatar.svelte';
+	import Badge from '../../atoms/Badge/Badge.svelte';
+	import BrandMark from '../../atoms/BrandMark/BrandMark.svelte';
 
 	let {
 		fullHeight = true,
-		framed = false
+		framed = false,
+		showRail = true,
+		showContextual = false
 	}: {
 		fullHeight?: boolean;
 		framed?: boolean;
+		showRail?: boolean;
+		showContextual?: boolean;
 	} = $props();
 
 	const sidebarGroups: SidebarGroup[] = [
 		{
-			id: 'main',
+			id: 'ops',
 			label: 'Workspace',
 			items: [
-				{ id: 'home', label: 'Home' },
-				{ id: 'projects', label: 'Projects' },
-				{ id: 'billing', label: 'Billing' }
+				{ id: 'home', label: 'Dashboard', href: '#' },
+				{ id: 'projects', label: 'Projects', href: '#' },
+				{ id: 'billing', label: 'Billing', href: '#' }
+			]
+		},
+		{
+			id: 'manage',
+			label: 'Manage',
+			items: [
+				{ id: 'team', label: 'Team', href: '#' },
+				{ id: 'settings', label: 'Settings', href: '#' }
+			]
+		}
+	];
+
+	const rail: NavRailItem[] = [
+		{ id: 'home', label: 'Home', href: '#' },
+		{ id: 'atom', label: 'Atom', href: '#' },
+		{ id: 'crm', label: 'CRM', href: '#' }
+	];
+
+	const railFooter: NavRailItem[] = [{ id: 'settings', label: 'Settings', href: '#' }];
+
+	const contextualGroups: SidebarGroup[] = [
+		{
+			id: 'general',
+			label: 'General',
+			items: [
+				{ id: 'overview', label: 'Overview', href: '#' },
+				{ id: 'datos', label: 'Details', href: '#' }
+			]
+		},
+		{
+			id: 'biz',
+			label: 'Business',
+			items: [
+				{ id: 'contracts', label: 'Clients', href: '#' },
+				{ id: 'plans', label: 'Plans', href: '#' }
 			]
 		}
 	];
@@ -33,6 +75,8 @@
 
 	let sidebarValue = $state('projects');
 	let navValue = $state('overview');
+	let railValue = $state('atom');
+	let contextualValue = $state('overview');
 </script>
 
 <AppShell
@@ -40,24 +84,47 @@
 	{navLinks}
 	{fullHeight}
 	{framed}
+	rail={showRail ? rail : []}
+	railFooter={showRail ? railFooter : []}
+	contextualGroups={showContextual ? contextualGroups : []}
+	contextualBrand="Atom"
 	bind:sidebarValue
 	bind:navValue
+	bind:railValue
+	bind:contextualValue
 >
+	{#snippet railBrand()}
+		<BrandMark mark="R2" size="sm" />
+	{/snippet}
+	{#snippet contextualHeader()}
+		<div class="min-w-0">
+			<p class="text-sm font-semibold text-primary truncate">Atom</p>
+			<div class="mt-1 gap-1.5 flex items-center">
+				<Badge variant="success" size="sm" dot>active</Badge>
+			</div>
+		</div>
+	{/snippet}
 	{#snippet actions()}
 		<Button size="sm">New</Button>
 		<Avatar name="Rafa" size="sm" />
 	{/snippet}
 	<div class="space-y-2">
-		<h1 class="text-xl font-semibold capitalize text-primary">{navValue}</h1>
+		<h1 class="text-xl font-semibold text-primary capitalize">{navValue}</h1>
 		<p class="text-sm text-secondary">
 			Sidebar: <span class="font-medium text-primary">{sidebarValue}</span>
+			{#if showRail}
+				· Rail: <span class="font-medium text-primary">{railValue}</span>
+			{/if}
+			{#if showContextual}
+				· Contextual: <span class="font-medium text-primary">{contextualValue}</span>
+			{/if}
 		</p>
 		<p class="max-w-lg text-sm text-muted">
 			Scrollable content area. The shell fills the viewport so sidebar and main column reach the
 			bottom.
 		</p>
 		{#each Array.from({ length: 12 }, (_, i) => i + 1) as n (n)}
-			<div class="rounded-xl border border-border bg-surface-elevated p-4 text-sm text-secondary">
+			<div class="rounded-xl border-border bg-surface-elevated p-4 text-sm text-secondary border">
 				Content block {n}
 			</div>
 		{/each}

package/dist/components/organisms/AppShell/AppShellStory.svelte.d.ts

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     fullHeight?: boolean;
     framed?: boolean;
+    showRail?: boolean;
+    showContextual?: boolean;
 };
 declare const AppShellStory: import("svelte").Component<$$ComponentProps, {}, "">;
 type AppShellStory = ReturnType<typeof AppShellStory>;

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

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+import type { SidebarGroup } from '../Sidebar/Sidebar.svelte';
+export interface AppShellContextual {
+    groups: SidebarGroup[];
+    value: string;
+    brand?: string;
+    description?: string;
+    status?: string;
+    parentHref?: string;
+    parentLabel?: string;
+    header?: Snippet;
+    onchange?: (id: string) => void;
+}
+export declare class AppChrome {
+    contextual: AppShellContextual | null;
+    setContextual(nav: AppShellContextual | null): void;
+}
+export declare const getAppChrome: () => AppChrome, setAppChrome: (context: AppChrome) => AppChrome;

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

@@ -0,0 +1,8 @@
+import { createContext } from 'svelte';
+export class AppChrome {
+    contextual = $state.raw(null);
+    setContextual(nav) {
+        this.contextual = nav;
+    }
+}
+export const [getAppChrome, setAppChrome] = createContext();

package/dist/components/organisms/NavRail/NavRail.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/svelte';
+declare const meta: {
+    title: string;
+    component: import("svelte").Component<Record<string, never>, {}, "">;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/components/organisms/NavRail/NavRail.stories.js

@@ -0,0 +1,11 @@
+import NavRailStory from './NavRailStory.svelte';
+const meta = {
+    title: 'Organisms/NavRail',
+    component: NavRailStory,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered'
+    }
+};
+export default meta;
+export const Default = {};

package/dist/components/organisms/NavRail/NavRail.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import Tooltip from '../../atoms/Tooltip/Tooltip.svelte';
+	import RailMark from '../../atoms/RailMark/RailMark.svelte';
+	import Divider from '../../atoms/Divider/Divider.svelte';
+
+	export type NavRailIcon = Component<{
+		class?: string;
+		size?: number | string;
+		strokeWidth?: number | string;
+	}>;
+
+	export interface NavRailItem {
+		id: string;
+		label: string;
+		href?: string;
+		icon?: NavRailIcon;
+		disabled?: boolean;
+	}
+
+	interface NavRailProps {
+		items?: NavRailItem[];
+		footerItems?: NavRailItem[];
+		value?: string;
+		class?: string;
+		brand?: Snippet;
+		onchange?: (id: string) => void;
+	}
+
+	let {
+		items = [],
+		footerItems = [],
+		value = $bindable(''),
+		class: className = '',
+		brand,
+		onchange
+	}: NavRailProps = $props();
+
+	function select(id: string, disabled?: boolean) {
+		if (disabled) return;
+		value = id;
+		onchange?.(id);
+	}
+
+	const itemClass = (item: NavRailItem) => [
+		'relative flex h-10 w-10 items-center justify-center rounded-lg transition-colors',
+		'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+		value === item.id
+			? 'bg-brand-50 text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+			: 'text-secondary hover:bg-surface-overlay hover:text-primary',
+		item.disabled && 'pointer-events-none cursor-not-allowed opacity-40'
+	];
+</script>
+
+{#snippet railButton(item: NavRailItem)}
+	<Tooltip content={item.label} side="right">
+		<span class="relative inline-flex">
+			<RailMark active={value === item.id} length="short" inset="sm" />
+			{#if item.href && !item.disabled}
+				<a
+					href={item.href}
+					aria-label={item.label}
+					aria-current={value === item.id ? 'page' : undefined}
+					class={itemClass(item)}
+					onclick={() => select(item.id, item.disabled)}
+				>
+					{#if item.icon}
+						<item.icon class="h-5 w-5" strokeWidth={1.75} />
+					{:else}
+						<span class="text-xs font-semibold">{item.label.slice(0, 1)}</span>
+					{/if}
+				</a>
+			{:else}
+				<button
+					type="button"
+					aria-label={item.label}
+					aria-current={value === item.id ? 'page' : undefined}
+					disabled={item.disabled}
+					class={itemClass(item)}
+					onclick={() => select(item.id, item.disabled)}
+				>
+					{#if item.icon}
+						<item.icon class="h-5 w-5" strokeWidth={1.75} />
+					{:else}
+						<span class="text-xs font-semibold">{item.label.slice(0, 1)}</span>
+					{/if}
+				</button>
+			{/if}
+		</span>
+	</Tooltip>
+{/snippet}
+
+<aside
+	class={[
+		'w-14 border-border bg-surface-elevated py-3 flex h-full shrink-0 flex-col items-center border-r',
+		className
+	]}
+>
+	{#if brand}
+		<div class="mb-3 px-2 flex items-center justify-center">
+			{@render brand()}
+		</div>
+	{/if}
+
+	<nav class="gap-1 flex flex-1 flex-col items-center" aria-label="Rail">
+		{#each items as item (item.id)}
+			{@render railButton(item)}
+		{/each}
+	</nav>
+
+	{#if footerItems.length > 0}
+		<div class="w-8 py-2"><Divider /></div>
+		<nav class="gap-1 flex flex-col items-center" aria-label="Rail footer">
+			{#each footerItems as item (item.id)}
+				{@render railButton(item)}
+			{/each}
+		</nav>
+	{/if}
+</aside>

package/dist/components/organisms/NavRail/NavRail.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Component, Snippet } from 'svelte';
+export type NavRailIcon = Component<{
+    class?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
+export interface NavRailItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: NavRailIcon;
+    disabled?: boolean;
+}
+interface NavRailProps {
+    items?: NavRailItem[];
+    footerItems?: NavRailItem[];
+    value?: string;
+    class?: string;
+    brand?: Snippet;
+    onchange?: (id: string) => void;
+}
+declare const NavRail: Component<NavRailProps, {}, "value">;
+type NavRail = ReturnType<typeof NavRail>;
+export default NavRail;

package/dist/components/organisms/NavRail/NavRailStory.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import NavRail, { type NavRailItem } from './NavRail.svelte';
+	import BrandMark from '../../atoms/BrandMark/BrandMark.svelte';
+
+	const items: NavRailItem[] = [
+		{ id: 'home', label: 'Dashboard', href: '#' },
+		{ id: 'atom', label: 'Atom', href: '#' },
+		{ id: 'crm', label: 'CRM', href: '#' }
+	];
+
+	const footerItems: NavRailItem[] = [{ id: 'settings', label: 'Ajustes', href: '#' }];
+
+	let value = $state('atom');
+</script>
+
+<div class="rounded-xl border-border bg-surface h-[28rem] overflow-hidden border">
+	<div class="flex h-full">
+		<NavRail {items} {footerItems} bind:value>
+			{#snippet brand()}
+				<BrandMark mark="R2" size="sm" />
+			{/snippet}
+		</NavRail>
+		<div class="p-6 text-sm text-secondary flex flex-1 items-center justify-center">
+			Selected: <span class="ml-1 font-medium text-primary">{value}</span>
+		</div>
+	</div>
+</div>

package/dist/components/organisms/NavRail/NavRailStory.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const NavRailStory: import("svelte").Component<Record<string, never>, {}, "">;
+type NavRailStory = ReturnType<typeof NavRailStory>;
+export default NavRailStory;

package/dist/components/organisms/Navbar/Navbar.svelte

@@ -68,42 +68,37 @@
 
 <header
 	class={[
-		'relative z-40 w-full bg-surface-elevated',
-		bordered && 'border-b border-border',
-		sticky && 'sticky top-0',
+		'bg-surface-elevated relative z-40 w-full',
+		bordered && 'border-border border-b',
+		sticky && 'top-0 sticky',
 		blur && 'bg-surface-elevated/85 backdrop-blur-md',
 		className
 	]}
 >
 	<div
-		class={[
-			'mx-auto flex w-full items-center gap-3 px-4 sm:gap-4 sm:px-6',
-			height,
-			maxWidthClass
-		]}
+		class={['gap-3 px-4 sm:gap-4 sm:px-6 mx-auto flex w-full items-center', height, maxWidthClass]}
 	>
+		{#if leading}
+			<div class="flex shrink-0 items-center">{@render leading()}</div>
+		{/if}
 		{#if showBrand}
-			<div class="flex shrink-0 items-center gap-2">
-				{#if leading}
-					{@render leading()}
-				{:else}
-					<span
-						class={[
-							'flex items-center justify-center rounded-lg bg-brand-500 font-bold text-white',
-							size === 'lg' ? 'h-8 w-8 text-xs' : 'h-7 w-7 text-[11px]'
-						]}
-						aria-hidden="true"
-					>
-						{brand.slice(0, 1).toUpperCase()}
-					</span>
-				{/if}
+			<div class="gap-2 flex shrink-0 items-center">
+				<span
+					class={[
+						'rounded-lg bg-brand-500 font-bold text-white flex items-center justify-center',
+						size === 'lg' ? 'h-8 w-8 text-xs' : 'h-7 w-7 text-[11px]'
+					]}
+					aria-hidden="true"
+				>
+					{brand.slice(0, 1).toUpperCase()}
+				</span>
 				<span class={['font-semibold tracking-tight text-primary', brandSize]}>{brand}</span>
 			</div>
 		{/if}
 
 		<nav
 			class={[
-				'hidden h-full min-w-0 items-stretch gap-0.5 md:flex',
+				'min-w-0 gap-0.5 md:flex hidden h-full items-stretch',
 				centerLinks ? 'flex-1 justify-center' : 'flex-1',
 				!showBrand && !centerLinks && 'flex-1'
 			]}
@@ -116,14 +111,14 @@
 					disabled={link.disabled}
 					onclick={() => select(link.id, link.disabled)}
 					class={[
-						'relative flex items-center gap-1.5 px-3 font-medium transition-colors',
-						'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand-500/30',
+						'gap-1.5 px-3 font-medium relative flex items-center transition-colors',
+						'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none focus-visible:ring-inset',
 						linkSize,
 						variant === 'underline' && 'border-b-2',
 						variant === 'underline' &&
 							(active
 								? 'border-brand-500 text-primary'
-								: 'border-transparent text-secondary hover:text-primary'),
+								: 'text-secondary hover:text-primary border-transparent'),
 						variant === 'pills' && 'my-2 rounded-lg',
 						variant === 'pills' &&
 							(active
@@ -137,7 +132,7 @@
 					{link.label}
 					{#if link.badge !== undefined && link.badge !== ''}
 						<span
-							class="rounded-full bg-brand-50 px-1.5 py-0.5 text-[10px] font-semibold text-brand-700 dark:bg-brand-950/50 dark:text-brand-300"
+							class="bg-brand-50 px-1.5 py-0.5 font-semibold text-brand-700 dark:bg-brand-950/50 dark:text-brand-300 rounded-full text-[10px]"
 						>
 							{link.badge}
 						</span>
@@ -147,7 +142,7 @@
 		</nav>
 
 		<nav
-			class="flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto md:hidden"
+			class="min-w-0 gap-0.5 md:hidden flex flex-1 items-center overflow-x-auto"
 			aria-label="Primary"
 		>
 			{#each links as link (link.id)}
@@ -156,8 +151,8 @@
 					disabled={link.disabled}
 					onclick={() => select(link.id, link.disabled)}
 					class={[
-						'shrink-0 rounded-full px-3 py-1 text-xs font-medium transition-colors',
-						'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+						'px-3 py-1 text-xs font-medium shrink-0 rounded-full transition-colors',
+						'focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none',
 						value === link.id
 							? 'bg-brand-50 text-brand-700 dark:bg-brand-950/50 dark:text-brand-300'
 							: 'text-secondary hover:bg-surface-overlay',
@@ -170,7 +165,7 @@
 		</nav>
 
 		{#if actions}
-			<div class="ml-auto flex shrink-0 items-center gap-2">
+			<div class="gap-2 ml-auto flex shrink-0 items-center">
 				{@render actions()}
 			</div>
 		{/if}

package/dist/components/organisms/Sidebar/Sidebar.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
-	import type { Snippet } from 'svelte';
+	import type { Component, Snippet } from 'svelte';
 	import Divider from '../../atoms/Divider/Divider.svelte';
 
+	export type SidebarIcon = Component<{
+		class?: string;
+		size?: number | string;
+		strokeWidth?: number | string;
+	}>;
+
 	export interface SidebarItem {
 		id: string;
 		label: string;
 		href?: string;
+		icon?: SidebarIcon;
 		disabled?: boolean;
 	}
 
@@ -20,7 +27,10 @@
 		groups?: SidebarGroup[];
 		value?: string;
 		collapsed?: boolean;
+		/** Show the collapse toggle. Default true. */
+		collapsible?: boolean;
 		class?: string;
+		header?: Snippet;
 		footer?: Snippet;
 		onchange?: (id: string) => void;
 	}
@@ -30,7 +40,9 @@
 		groups = [],
 		value = $bindable(''),
 		collapsed = $bindable(false),
+		collapsible = true,
 		class: className = '',
+		header,
 		footer,
 		onchange
 	}: SidebarProps = $props();
@@ -40,76 +52,119 @@
 		value = id;
 		onchange?.(id);
 	}
+
+	function itemClass(item: SidebarItem) {
+		return [
+			'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors',
+			'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
+			value === item.id
+				? 'bg-brand-50 font-medium text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
+				: 'text-secondary hover:bg-surface-overlay hover:text-primary',
+			item.disabled && 'pointer-events-none cursor-not-allowed opacity-40',
+			collapsed && 'justify-center'
+		];
+	}
 </script>
 
+{#snippet itemGlyph(item: SidebarItem)}
+	{#if item.icon}
+		<item.icon class="h-4 w-4 shrink-0" strokeWidth={1.75} />
+	{:else}
+		<span
+			class="h-6 w-6 rounded-md bg-surface-overlay font-semibold flex shrink-0 items-center justify-center text-[11px]"
+		>
+			{item.label.slice(0, 1)}
+		</span>
+	{/if}
+{/snippet}
+
+{#snippet navItem(item: SidebarItem)}
+	{#if item.href && !item.disabled}
+		<a
+			href={item.href}
+			title={collapsed ? item.label : undefined}
+			aria-current={value === item.id ? 'page' : undefined}
+			class={itemClass(item)}
+			onclick={() => select(item.id, item.disabled)}
+		>
+			{@render itemGlyph(item)}
+			{#if !collapsed}
+				<span class="truncate">{item.label}</span>
+			{/if}
+		</a>
+	{:else}
+		<button
+			type="button"
+			disabled={item.disabled}
+			title={collapsed ? item.label : undefined}
+			aria-current={value === item.id ? 'page' : undefined}
+			class={itemClass(item)}
+			onclick={() => select(item.id, item.disabled)}
+		>
+			{@render itemGlyph(item)}
+			{#if !collapsed}
+				<span class="truncate">{item.label}</span>
+			{/if}
+		</button>
+	{/if}
+{/snippet}
+
 <aside
 	class={[
-		'flex h-full flex-col border-r border-border bg-surface-elevated transition-[width] duration-200',
+		'border-border bg-surface-elevated flex h-full flex-col border-r transition-[width] duration-200',
 		collapsed ? 'w-[4.25rem]' : 'w-60',
 		className
 	]}
 >
 	<div
 		class={[
-			'flex items-center gap-2 px-3 py-4',
-			collapsed ? 'justify-center' : 'justify-between'
+			'gap-2 px-3 py-4 flex items-center',
+			collapsed ? 'justify-center' : header || !collapsible ? 'justify-start' : 'justify-between'
 		]}
 	>
-		{#if !collapsed}
-			<span class="truncate text-sm font-semibold text-primary">{brand}</span>
+		{#if header && !collapsed}
+			<div class="min-w-0 flex-1">{@render header()}</div>
+		{:else if !collapsed}
+			<span class="text-sm font-semibold text-primary truncate">{brand}</span>
+		{/if}
+		{#if collapsible}
+			<button
+				type="button"
+				onclick={() => (collapsed = !collapsed)}
+				class="rounded-lg p-2 text-secondary hover:bg-surface-overlay hover:text-primary focus-visible:ring-brand-500/30 focus-visible:ring-2 focus-visible:outline-none"
+				aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
+			>
+				<svg
+					class="h-4 w-4"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					aria-hidden="true"
+				>
+					{#if collapsed}
+						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h10M4 18h16" />
+					{:else}
+						<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
+					{/if}
+				</svg>
+			</button>
 		{/if}
-		<button
-			type="button"
-			onclick={() => (collapsed = !collapsed)}
-			class="rounded-lg p-2 text-secondary hover:bg-surface-overlay hover:text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30"
-			aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'}
-		>
-			<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true">
-				{#if collapsed}
-					<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h10M4 18h16" />
-				{:else}
-					<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
-				{/if}
-			</svg>
-		</button>
 	</div>
 
-	<nav class="flex-1 overflow-y-auto px-2 pb-3">
+	<nav class="px-2 pb-3 flex-1 overflow-y-auto">
 		{#each groups as group, gi (group.id)}
 			{#if group.label && !collapsed}
-				<p class="mb-1 mt-3 px-2 text-[11px] font-semibold uppercase tracking-wide text-muted">
+				<p class="mb-1 mt-3 px-2 font-semibold tracking-wide text-muted text-[11px] uppercase">
 					{group.label}
 				</p>
 			{:else if gi > 0}
 				<div class="my-2 px-2"><Divider /></div>
 			{/if}
-			<ul class="flex flex-col gap-0.5">
+			<ul class="gap-0.5 flex flex-col">
 				{#each group.items as item (item.id)}
 					<li>
-						<button
-							type="button"
-							disabled={item.disabled}
-							onclick={() => select(item.id, item.disabled)}
-							title={collapsed ? item.label : undefined}
-							class={[
-								'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-sm transition-colors',
-								'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500/30',
-								value === item.id
-									? 'bg-brand-50 font-medium text-brand-700 dark:bg-brand-950/40 dark:text-brand-300'
-									: 'text-secondary hover:bg-surface-overlay hover:text-primary',
-								item.disabled && 'cursor-not-allowed opacity-40',
-								collapsed && 'justify-center'
-							]}
-						>
-							<span
-								class="flex h-6 w-6 shrink-0 items-center justify-center rounded-md bg-surface-overlay text-[11px] font-semibold"
-							>
-								{item.label.slice(0, 1)}
-							</span>
-							{#if !collapsed}
-								<span class="truncate">{item.label}</span>
-							{/if}
-						</button>
+						{@render navItem(item)}
 					</li>
 				{/each}
 			</ul>
@@ -117,7 +172,7 @@
 	</nav>
 
 	{#if footer}
-		<div class={['border-t border-border p-3', collapsed && 'flex justify-center']}>
+		<div class={['border-border p-3 border-t', collapsed && 'flex justify-center']}>
 			{@render footer()}
 		</div>
 	{/if}

package/dist/components/organisms/Sidebar/Sidebar.svelte.d.ts

@@ -1,8 +1,14 @@
-import type { Snippet } from 'svelte';
+import type { Component, Snippet } from 'svelte';
+export type SidebarIcon = Component<{
+    class?: string;
+    size?: number | string;
+    strokeWidth?: number | string;
+}>;
 export interface SidebarItem {
     id: string;
     label: string;
     href?: string;
+    icon?: SidebarIcon;
     disabled?: boolean;
 }
 export interface SidebarGroup {
@@ -15,10 +21,13 @@ interface SidebarProps {
     groups?: SidebarGroup[];
     value?: string;
     collapsed?: boolean;
+    /** Show the collapse toggle. Default true. */
+    collapsible?: boolean;
     class?: string;
+    header?: Snippet;
     footer?: Snippet;
     onchange?: (id: string) => void;
 }
-declare const Sidebar: import("svelte").Component<SidebarProps, {}, "value" | "collapsed">;
+declare const Sidebar: Component<SidebarProps, {}, "value" | "collapsed">;
 type Sidebar = ReturnType<typeof Sidebar>;
 export default Sidebar;

package/dist/index.d.ts

@@ -656,7 +656,9 @@ export { default as ToastContainer } from './components/organisms/Toast/ToastCon
 export { toastStore, toast } from './components/organisms/Toast/toast.svelte.js';
 export type { Toast, ToastVariant, ToastPosition, ToastAppearance, ToastAction } from './components/organisms/Toast/toast.svelte.js';
 export { default as Sidebar } from './components/organisms/Sidebar/Sidebar.svelte';
-export type { SidebarItem, SidebarGroup } from './components/organisms/Sidebar/Sidebar.svelte';
+export type { SidebarItem, SidebarGroup, SidebarIcon } from './components/organisms/Sidebar/Sidebar.svelte';
+export { default as NavRail } from './components/organisms/NavRail/NavRail.svelte';
+export type { NavRailItem, NavRailIcon } from './components/organisms/NavRail/NavRail.svelte';
 export { default as Navbar } from './components/organisms/Navbar/Navbar.svelte';
 export type { NavbarLink } from './components/organisms/Navbar/Navbar.svelte';
 export { default as BottomNav } from './components/organisms/BottomNav/BottomNav.svelte';
@@ -664,6 +666,8 @@ export type { BottomNavItem, BottomNavIcon } from './components/organisms/Bottom
 export { default as CommandPalette } from './components/organisms/CommandPalette/CommandPalette.svelte';
 export type { CommandItem } from './components/organisms/CommandPalette/CommandPalette.svelte';
 export { default as AppShell } from './components/organisms/AppShell/AppShell.svelte';
+export { getAppChrome, setAppChrome, AppChrome } from './components/organisms/AppShell/app-chrome.svelte.js';
+export type { AppShellContextual } from './components/organisms/AppShell/app-chrome.svelte.js';
 export { default as EditorShell } from './components/organisms/EditorShell/EditorShell.svelte';
 export { default as BlueprintEditor } from './components/organisms/BlueprintEditor/BlueprintEditor.svelte';
 export { default as CanvasEditor } from './components/organisms/CanvasEditor/CanvasEditor.svelte';

package/dist/index.js

@@ -454,10 +454,12 @@ export { default as GanttChart } from './components/organisms/GanttChart/GanttCh
 export { default as ToastContainer } from './components/organisms/Toast/ToastContainer.svelte';
 export { toastStore, toast } from './components/organisms/Toast/toast.svelte.js';
 export { default as Sidebar } from './components/organisms/Sidebar/Sidebar.svelte';
+export { default as NavRail } from './components/organisms/NavRail/NavRail.svelte';
 export { default as Navbar } from './components/organisms/Navbar/Navbar.svelte';
 export { default as BottomNav } from './components/organisms/BottomNav/BottomNav.svelte';
 export { default as CommandPalette } from './components/organisms/CommandPalette/CommandPalette.svelte';
 export { default as AppShell } from './components/organisms/AppShell/AppShell.svelte';
+export { getAppChrome, setAppChrome, AppChrome } from './components/organisms/AppShell/app-chrome.svelte.js';
 export { default as EditorShell } from './components/organisms/EditorShell/EditorShell.svelte';
 export { default as BlueprintEditor } from './components/organisms/BlueprintEditor/BlueprintEditor.svelte';
 export { default as CanvasEditor } from './components/organisms/CanvasEditor/CanvasEditor.svelte';

package/package.json

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