@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/sidebar/SidebarLayout08.svelte

@@ -0,0 +1,162 @@
+<!--
+  SidebarLayout08.svelte
+  Collapsible tree nav with platform/projects sections, footer quick-links, and user avatar.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  type NavChild = { label: string; href: string; active?: boolean };
+  type NavItem = { label: string; href?: string; active?: boolean; children?: NavChild[] };
+  type FooterLink = { label: string; href: string; icon?: string };
+
+  let {
+    class: className = '',
+    platformItems = [],
+    projectItems = [],
+    footerLinks = [],
+    breadcrumbs = [],
+    logo = 'Documentation',
+    version = 'v1.0.1',
+    user = { name: 'shadcn', email: 'm@example.com' },
+    children
+  }: {
+    class?: string;
+    platformItems?: NavItem[];
+    projectItems?: NavItem[];
+    footerLinks?: FooterLink[];
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    logo?: string;
+    version?: string;
+    user?: { name: string; email: string };
+    children?: Snippet;
+  } = $props();
+
+  let openItems = $state<Set<string>>(new Set());
+
+  function toggle(label: string) {
+    openItems = openItems.has(label)
+      ? new Set([...openItems].filter(i => i !== label))
+      : new Set([...openItems, label]);
+  }
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- Logo -->
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <span class="flex h-6 w-6 items-center justify-center rounded bg-primary text-xs font-bold text-primary-foreground">D</span>
+      <span class="font-semibold text-sm">{logo}</span>
+      <span class="ml-auto text-xs text-muted-foreground">{version}</span>
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+
+    <nav class="flex-1 overflow-y-auto px-2 py-3">
+      {#if platformItems.length > 0}
+        <p class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Platform</p>
+        <ul class="mb-4 space-y-0.5">
+          {#each platformItems as item}
+            <li>
+              {#if item.children}
+                <button
+                  type="button"
+                  class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  onclick={() => toggle(item.label)}
+                >
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+                  <span class="flex-1 text-left">{item.label}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn('transition-transform', openItems.has(item.label) && 'rotate-90')}><path d="m9 18 6-6-6-6"/></svg>
+                </button>
+                {#if openItems.has(item.label)}
+                  <ul class="ml-4 mt-0.5 space-y-0.5 border-l pl-2">
+                    {#each item.children as child}
+                      <li>
+                        <a href={child.href} class={cn('block rounded-md px-2 py-1.5 text-sm transition-colors', child.active ? 'font-medium text-foreground' : 'text-muted-foreground hover:text-foreground')}>{child.label}</a>
+                      </li>
+                    {/each}
+                  </ul>
+                {/if}
+              {:else}
+                <a href={item.href ?? '#'} class={cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground')}>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
+                  <span class="flex-1">{item.label}</span>
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+                </a>
+              {/if}
+            </li>
+          {/each}
+        </ul>
+      {/if}
+
+      {#if projectItems.length > 0}
+        <p class="mb-1 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Projects</p>
+        <ul class="space-y-0.5">
+          {#each projectItems as item}
+            <li>
+              <a href={item.href ?? '#'} class={cn('flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors', item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground')}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
+                <span class="flex-1">{item.label}</span>
+              </a>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </nav>
+
+    <!-- Footer quick links -->
+    {#if footerLinks.length > 0}
+      <div class="border-t px-2 py-2">
+        <ul class="space-y-0.5">
+          {#each footerLinks as link}
+            <li>
+              <a href={link.href} class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
+                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+
+    <!-- User Footer -->
+    <div class="flex items-center gap-3 border-t px-4 py-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-medium">
+        {user.name.slice(0, 2).toUpperCase()}
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <p class="truncate text-sm font-medium">{user.name}</p>
+        <p class="truncate text-xs text-muted-foreground">{user.email}</p>
+      </div>
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+  </aside>
+
+  <main class="flex flex-1 flex-col overflow-hidden">
+    {#if breadcrumbs.length > 0}
+      <div class="flex items-center gap-2 border-b px-6 py-3">
+        <button type="button" class="text-muted-foreground hover:text-foreground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}
+                <BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}
+                <span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}<BreadcrumbSeparator />{/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout09.svelte

@@ -0,0 +1,167 @@
+<!--
+  SidebarLayout09.svelte
+  Three-panel inbox layout: email list left, content center, account/folder nav right.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Input } from '$lib/components/ui';
+
+  type Email = {
+    id: string;
+    from: string;
+    subject: string;
+    preview: string;
+    time: string;
+    read?: boolean;
+  };
+  type Folder = { label: string; href: string; active?: boolean };
+
+  let {
+    class: className = '',
+    emails = [],
+    folders = [],
+    accountName = 'Acme Inc',
+    accountType = 'Enterprise',
+    inboxLabel = 'Inbox',
+    showUnreadsToggle = true,
+    user = { name: 'shadcn', email: 'm@example.com' },
+    selectedEmailId = null,
+    children
+  }: {
+    class?: string;
+    emails?: Email[];
+    folders?: Folder[];
+    accountName?: string;
+    accountType?: string;
+    inboxLabel?: string;
+    showUnreadsToggle?: boolean;
+    user?: { name: string; email: string };
+    selectedEmailId?: string | null;
+    children?: Snippet;
+  } = $props();
+
+  let showUnreads = $state(false);
+  let search = $state('');
+  let activeEmailId = $state(selectedEmailId);
+
+  let filteredEmails = $derived(
+    emails.filter(e =>
+      (!showUnreads || !e.read) &&
+      (!search || e.from.toLowerCase().includes(search.toLowerCase()) || e.subject.toLowerCase().includes(search.toLowerCase()))
+    )
+  );
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Email list panel -->
+  <aside class="flex w-72 flex-col border-r bg-background">
+    <!-- Header -->
+    <div class="flex items-center justify-between border-b px-4 py-3">
+      <h2 class="font-semibold">{inboxLabel}</h2>
+      {#if showUnreadsToggle}
+        <div class="flex items-center gap-2">
+          <span class="text-xs text-muted-foreground">Unreads</span>
+          <button
+            type="button"
+            role="switch"
+            aria-checked={showUnreads}
+            class={cn('relative inline-flex h-5 w-9 items-center rounded-full transition-colors', showUnreads ? 'bg-primary' : 'bg-muted')}
+            onclick={() => (showUnreads = !showUnreads)}
+          >
+            <span class={cn('inline-block h-3.5 w-3.5 rounded-full bg-white shadow transition-transform', showUnreads ? 'translate-x-4' : 'translate-x-1')}></span>
+          </button>
+        </div>
+      {/if}
+    </div>
+
+    <!-- Search -->
+    <div class="px-3 py-2">
+      <Input type="search" placeholder="Search" bind:value={search} class="h-8 text-sm" />
+    </div>
+
+    <!-- Email threads -->
+    <ul class="flex-1 overflow-y-auto divide-y">
+      {#each filteredEmails as email}
+        <li>
+          <button
+            type="button"
+            class={cn(
+              'w-full px-4 py-3 text-left transition-colors hover:bg-muted',
+              activeEmailId === email.id && 'bg-muted'
+            )}
+            onclick={() => (activeEmailId = email.id)}
+          >
+            <div class="mb-1 flex items-center justify-between">
+              <span class={cn('text-sm', !email.read && 'font-semibold')}>{email.from}</span>
+              <span class="text-xs text-muted-foreground">{email.time}</span>
+            </div>
+            <p class={cn('mb-1 text-sm', !email.read && 'font-medium')}>{email.subject}</p>
+            <p class="line-clamp-2 text-xs text-muted-foreground">{email.preview}</p>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  </aside>
+
+  <!-- Main content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <span class="text-sm text-muted-foreground">All Inboxes</span>
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
+      <span class="text-sm font-medium">{inboxLabel}</span>
+    </div>
+    <div class="flex-1 overflow-y-auto">
+      {@render children?.()}
+    </div>
+  </main>
+
+  <!-- Right account/folder nav -->
+  <aside class="flex w-56 flex-col border-l bg-background">
+    <!-- Account header -->
+    <div class="flex items-center gap-2 border-b px-4 py-3">
+      <div class="flex h-7 w-7 items-center justify-center rounded bg-primary text-xs font-bold text-primary-foreground">
+        {accountName.slice(0, 1)}
+      </div>
+      <div>
+        <p class="text-sm font-semibold">{accountName}</p>
+        <p class="text-xs text-muted-foreground">{accountType}</p>
+      </div>
+    </div>
+
+    <!-- Folders -->
+    <nav class="flex-1 overflow-y-auto px-2 py-2">
+      <ul class="space-y-0.5">
+        {#each folders as folder}
+          <li>
+            <a
+              href={folder.href}
+              class={cn(
+                'flex items-center gap-3 rounded-md px-3 py-1.5 text-sm transition-colors',
+                folder.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )}
+            >
+              <!-- Generic folder icon -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
+              {folder.label}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+
+    <!-- User footer -->
+    <div class="flex items-center gap-3 border-t px-4 py-3">
+      <div class="flex h-8 w-8 items-center justify-center rounded-full bg-muted text-xs font-medium">
+        {user.name.slice(0, 2).toUpperCase()}
+      </div>
+      <div class="flex-1 overflow-hidden">
+        <p class="truncate text-sm font-medium">{user.name}</p>
+        <p class="truncate text-xs text-muted-foreground">{user.email}</p>
+      </div>
+      <button type="button" class="text-muted-foreground hover:text-foreground">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 15 5 5 5-5"/><path d="m7 9 5-5 5 5"/></svg>
+      </button>
+    </div>
+  </aside>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout10.svelte

@@ -0,0 +1,159 @@
+<!--
+  SidebarLayout10.svelte
+  Notion-style workspace sidebar: account header, quick links, grouped pages, footer utilities.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  type PageItem = { label: string; href: string; icon?: string; active?: boolean };
+  type PageGroup = { title: string; items: PageItem[]; showMore?: boolean };
+
+  let {
+    class: className = '',
+    workspace = 'Acme Inc',
+    quickLinks = [],
+    groups = [],
+    footerLinks = [],
+    breadcrumbs = [],
+    children
+  }: {
+    class?: string;
+    workspace?: string;
+    quickLinks?: Array<{ label: string; href: string; icon: string }>;
+    groups?: PageGroup[];
+    footerLinks?: Array<{ label: string; href: string; icon: string }>;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    children?: Snippet;
+  } = $props();
+
+  const ICON_MAP: Record<string, string> = {
+    search: 'M21 21l-4.35-4.35M11 19A8 8 0 1 0 11 3a8 8 0 0 0 0 16z',
+    ai: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 6v4l3 3',
+    home: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22V12h6v10',
+    inbox: 'M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z',
+    calendar: 'M8 2v4 M16 2v4 M3 10h18 M21 8H3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h18a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2z',
+    settings: 'M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6z',
+    trash: 'M3 6h18 M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6 M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2',
+    template: 'M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2v-4M9 21H5a2 2 0 0 1-2-2v-4m0 0h18',
+    help: 'M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01',
+  };
+
+  function getIconPath(icon: string): string {
+    return ICON_MAP[icon] ?? 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z';
+  }
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <aside class="flex w-60 flex-col border-r bg-background">
+    <!-- Workspace header -->
+    <div class="flex items-center justify-between border-b px-3 py-3">
+      <button type="button" class="flex items-center gap-2 rounded-md px-2 py-1 text-sm font-semibold hover:bg-muted">
+        <div class="flex h-5 w-5 items-center justify-center rounded bg-primary text-xs font-bold text-primary-foreground">
+          {workspace.slice(0, 1)}
+        </div>
+        {workspace}
+        <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
+      </button>
+    </div>
+
+    <!-- Quick links -->
+    {#if quickLinks.length > 0}
+      <nav class="border-b px-2 py-2">
+        <ul class="space-y-0.5">
+          {#each quickLinks as link}
+            <li>
+              <a href={link.href} class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d={getIconPath(link.icon)} />
+                </svg>
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    {/if}
+
+    <!-- Page groups -->
+    <div class="flex-1 overflow-y-auto px-2 py-2">
+      {#each groups as group}
+        <div class="mb-3">
+          <p class="mb-1 px-2 text-xs font-semibold text-muted-foreground">{group.title}</p>
+          <ul class="space-y-0.5">
+            {#each group.items as item}
+              <li>
+                <a
+                  href={item.href}
+                  class={cn(
+                    'flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors',
+                    item.active ? 'bg-muted font-medium text-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                  )}
+                >
+                  {#if item.icon}
+                    <span class="text-base leading-none">{item.icon}</span>
+                  {:else}
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"/></svg>
+                  {/if}
+                  <span class="flex-1 truncate">{item.label}</span>
+                  <button type="button" class="opacity-0 group-hover:opacity-100 text-muted-foreground hover:text-foreground" onclick={(e) => e.preventDefault()}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+                  </button>
+                </a>
+              </li>
+            {/each}
+            {#if group.showMore}
+              <li>
+                <button type="button" class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+                  More
+                </button>
+              </li>
+            {/if}
+          </ul>
+        </div>
+      {/each}
+    </div>
+
+    <!-- Footer utilities -->
+    {#if footerLinks.length > 0}
+      <nav class="border-t px-2 py-2">
+        <ul class="space-y-0.5">
+          {#each footerLinks as link}
+            <li>
+              <a href={link.href} class="flex items-center gap-2 rounded-md px-2 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
+                <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d={getIconPath(link.icon)} />
+                </svg>
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    {/if}
+  </aside>
+
+  <!-- Main content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    {#if breadcrumbs.length > 0}
+      <div class="flex items-center gap-2 border-b px-6 py-3">
+        <button type="button" class="text-muted-foreground hover:text-foreground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg>
+        </button>
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}<BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}<span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}<BreadcrumbSeparator />{/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+</div>

package/src/registry/blocks/sidebar/SidebarLayout11.svelte

@@ -0,0 +1,135 @@
+<!--
+  SidebarLayout11.svelte
+  File explorer sidebar (VS Code-style): Changes section and expandable Files tree.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  type FileStatus = 'modified' | 'untracked' | 'added' | 'deleted';
+  type ChangedFile = { path: string; status: FileStatus };
+  type FileNode = { name: string; type: 'file' | 'dir'; children?: FileNode[] };
+
+  let {
+    class: className = '',
+    changes = [],
+    files = [],
+    breadcrumbs = [],
+    children
+  }: {
+    class?: string;
+    changes?: ChangedFile[];
+    files?: FileNode[];
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    children?: Snippet;
+  } = $props();
+
+  let openDirs = $state<Set<string>>(new Set(['app', 'components']));
+
+  function toggleDir(path: string) {
+    openDirs = openDirs.has(path)
+      ? new Set([...openDirs].filter(p => p !== path))
+      : new Set([...openDirs, path]);
+  }
+
+  const STATUS_BADGE: Record<FileStatus, { label: string; color: string }> = {
+    modified: { label: 'M', color: 'text-amber-500' },
+    untracked: { label: 'U', color: 'text-green-500' },
+    added: { label: 'A', color: 'text-green-500' },
+    deleted: { label: 'D', color: 'text-red-500' },
+  };
+</script>
+
+{#snippet fileTree(nodes: FileNode[], depth: number, parentPath: string)}
+  {#each nodes as node}
+    {@const path = `${parentPath}/${node.name}`}
+    {#if node.type === 'dir'}
+      <li>
+        <button
+          type="button"
+          class="flex w-full items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+          style="padding-left: {8 + depth * 12}px"
+          onclick={() => toggleDir(path)}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class={cn('shrink-0 transition-transform', openDirs.has(path) && 'rotate-90')}>
+            <path d="m9 18 6-6-6-6"/>
+          </svg>
+          <!-- Folder icon -->
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+            <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/>
+          </svg>
+          <span>{node.name}</span>
+        </button>
+        {#if openDirs.has(path) && node.children}
+          <ul>{@render fileTree(node.children, depth + 1, path)}</ul>
+        {/if}
+      </li>
+    {:else}
+      <li>
+        <a
+          href="#"
+          class="flex items-center gap-1 rounded px-2 py-0.5 text-xs text-muted-foreground hover:bg-muted hover:text-foreground"
+          style="padding-left: {8 + depth * 12 + 13}px"
+        >
+          <!-- File icon -->
+          <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+            <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/>
+          </svg>
+          <span>{node.name}</span>
+        </a>
+      </li>
+    {/if}
+  {/each}
+{/snippet}
+
+<div class={cn('flex h-screen', className)}>
+  <aside class="flex w-64 flex-col border-r bg-background text-sm">
+    <!-- Changes -->
+    {#if changes.length > 0}
+      <div class="border-b">
+        <div class="flex items-center justify-between px-3 py-2">
+          <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Changes</span>
+        </div>
+        <ul class="pb-2">
+          {#each changes as file}
+            <li class="flex items-center justify-between px-3 py-0.5 hover:bg-muted">
+              <span class="truncate text-xs text-foreground">{file.path}</span>
+              <span class={cn('ml-2 shrink-0 text-xs font-semibold', STATUS_BADGE[file.status].color)}>
+                {STATUS_BADGE[file.status].label}
+              </span>
+            </li>
+          {/each}
+        </ul>
+      </div>
+    {/if}
+
+    <!-- Files tree -->
+    <div class="flex-1 overflow-y-auto">
+      <div class="flex items-center justify-between px-3 py-2">
+        <span class="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Files</span>
+      </div>
+      <ul>
+        {@render fileTree(files, 0, '')}
+      </ul>
+    </div>
+  </aside>
+
+  <main class="flex flex-1 flex-col overflow-hidden">
+    {#if breadcrumbs.length > 0}
+      <div class="flex items-center gap-2 border-b px-6 py-3">
+        <Breadcrumb>
+          {#each breadcrumbs as crumb, i}
+            <BreadcrumbItem>
+              {#if crumb.href}<BreadcrumbLink href={crumb.href}>{crumb.label}</BreadcrumbLink>
+              {:else}<span class="text-sm text-foreground">{crumb.label}</span>
+              {/if}
+            </BreadcrumbItem>
+            {#if i < breadcrumbs.length - 1}<BreadcrumbSeparator />{/if}
+          {/each}
+        </Breadcrumb>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+</div>