@r2digisolutions/components 0.10.0 → 0.12.0

package/dist/components/atoms/BrandMark/BrandMark.svelte

@@ -4,9 +4,11 @@
 	export type BrandMarkSize = 'sm' | 'md' | 'lg' | 'xl';
 
 	interface BrandMarkProps {
-		/** 1–2 letter mark, or provide children for a custom glyph */
+		/** 1–2 letter mark, or provide children / logoSrc for a custom glyph */
 		mark?: string;
 		name?: string;
+		/** Official logo image URL (SVG/PNG). Replaces initials / children. */
+		logoSrc?: string;
 		size?: BrandMarkSize;
 		showName?: boolean;
 		class?: string;
@@ -16,6 +18,7 @@
 	const {
 		mark,
 		name = 'Brand',
+		logoSrc,
 		size = 'md',
 		showName = false,
 		class: className = '',
@@ -49,12 +52,15 @@
 <span class={['inline-flex items-center gap-2.5', className]}>
 	<span
 		class={[
-			'inline-flex shrink-0 items-center justify-center bg-brand-500 font-bold tracking-tight text-white shadow-sm',
+			'inline-flex shrink-0 items-center justify-center shadow-sm',
+			logoSrc ? 'overflow-hidden bg-white' : 'bg-brand-500 font-bold tracking-tight text-white',
 			box[size]
 		]}
 		aria-hidden={showName || !!name}
 	>
-		{#if children}
+		{#if logoSrc}
+			<img src={logoSrc} alt="" class="h-[78%] w-[78%] object-contain" />
+		{:else if children}
 			{@render children()}
 		{:else}
 			{initials}

package/dist/components/atoms/BrandMark/BrandMark.svelte.d.ts

@@ -1,9 +1,11 @@
 import type { Snippet } from 'svelte';
 export type BrandMarkSize = 'sm' | 'md' | 'lg' | 'xl';
 interface BrandMarkProps {
-    /** 1–2 letter mark, or provide children for a custom glyph */
+    /** 1–2 letter mark, or provide children / logoSrc for a custom glyph */
     mark?: string;
     name?: string;
+    /** Official logo image URL (SVG/PNG). Replaces initials / children. */
+    logoSrc?: string;
     size?: BrandMarkSize;
     showName?: boolean;
     class?: string;

package/dist/components/molecules/AuthCard/AuthCard.svelte

@@ -8,6 +8,8 @@
 		description?: string;
 		brand?: string;
 		mark?: string;
+		/** Official brand logo URL (SVG/PNG) for BrandMark */
+		logoSrc?: string;
 		class?: string;
 		footer?: Snippet;
 		children?: Snippet;
@@ -18,6 +20,7 @@
 		description,
 		brand = 'R2 Digi',
 		mark,
+		logoSrc,
 		class: className = '',
 		footer,
 		children
@@ -31,7 +34,7 @@
 	class={`mx-auto w-full max-w-md border border-border shadow-sm ${className}`}
 >
 	<div class="mb-6 flex flex-col items-center gap-3 text-center">
-		<BrandMark name={brand} {mark} size="lg" showName />
+		<BrandMark name={brand} {mark} {logoSrc} size="lg" showName />
 		<div>
 			<h1 class="text-xl font-semibold tracking-tight text-primary">{title}</h1>
 			{#if description}

package/dist/components/molecules/AuthCard/AuthCard.svelte.d.ts

@@ -4,6 +4,8 @@ interface AuthCardProps {
     description?: string;
     brand?: string;
     mark?: string;
+    /** Official brand logo URL (SVG/PNG) for BrandMark */
+    logoSrc?: string;
     class?: string;
     footer?: Snippet;
     children?: Snippet;

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();