@xbg.solutions/create-frontend 1.1.1 → 1.2.0

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

@@ -0,0 +1,159 @@
+<!--
+  SidebarLayout12.svelte
+  Calendar app sidebar: user header, mini calendar, calendar lists with checkboxes.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Checkbox } from '$lib/components/ui';
+
+  type CalendarList = {
+    label: string;
+    items: Array<{ label: string; checked: boolean; color?: string }>;
+    collapsible?: boolean;
+  };
+
+  let {
+    class: className = '',
+    user = { name: 'shadcn', email: 'm@example.com' },
+    calendarLists = [],
+    contentTitle = '',
+    children
+  }: {
+    class?: string;
+    user?: { name: string; email: string };
+    calendarLists?: CalendarList[];
+    contentTitle?: string;
+    children?: Snippet;
+  } = $props();
+
+  const today = new Date();
+  let viewYear = $state(today.getFullYear());
+  let viewMonth = $state(today.getMonth());
+
+  const DAYS = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'];
+  const MONTHS = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+  const MONTHS_SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+  function getDaysInMonth(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+  function getFirstDay(y: number, m: number) { return new Date(y, m, 1).getDay(); }
+
+  function getCalDays(y: number, m: number) {
+    const dim = getDaysInMonth(y, m);
+    const fd = getFirstDay(y, m);
+    const prev = getDaysInMonth(y, m - 1);
+    const days: Array<{ day: number; cur: boolean }> = [];
+    for (let i = fd - 1; i >= 0; i--) days.push({ day: prev - i, cur: false });
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true });
+    while (days.length < 42) days.push({ day: days.length - dim - fd + 2, cur: false });
+    return days;
+  }
+
+  let calDays = $derived(getCalDays(viewYear, viewMonth));
+  let selectedDay = $state(today.getDate());
+
+  function prev() { if (viewMonth === 0) { viewMonth = 11; viewYear--; } else viewMonth--; }
+  function next() { if (viewMonth === 11) { viewMonth = 0; viewYear++; } else viewMonth++; }
+
+  let openSections = $state<Set<string>>(new Set(calendarLists.map(l => l.label)));
+
+  function toggleSection(label: string) {
+    openSections = openSections.has(label)
+      ? new Set([...openSections].filter(s => s !== label))
+      : new Set([...openSections, label]);
+  }
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <aside class="flex w-64 flex-col border-r bg-background">
+    <!-- User header -->
+    <div class="flex items-center justify-between border-b px-4 py-3">
+      <div class="flex items-center gap-2">
+        <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>
+          <p class="text-sm font-medium">{user.name}</p>
+          <p class="text-xs text-muted-foreground">{user.email}</p>
+        </div>
+      </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>
+
+    <!-- Mini calendar -->
+    <div class="border-b p-3">
+      <div class="mb-2 flex items-center justify-between">
+        <button type="button" onclick={prev} class="rounded p-1 hover:bg-muted">
+          <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 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-sm font-medium">{MONTHS_SHORT[viewMonth]} {viewYear}</span>
+        <button type="button" onclick={next} class="rounded p-1 hover:bg-muted">
+          <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>
+        </button>
+      </div>
+      <div class="grid grid-cols-7">
+        {#each DAYS as d}
+          <div class="flex h-7 w-7 items-center justify-center text-xs font-medium text-muted-foreground">{d}</div>
+        {/each}
+        {#each calDays as { day, cur }}
+          <button
+            type="button"
+            class={cn(
+              'flex h-7 w-7 items-center justify-center rounded-full text-xs transition-colors',
+              !cur && 'text-muted-foreground/40',
+              cur && 'hover:bg-muted',
+              cur && day === selectedDay && viewYear === today.getFullYear() && viewMonth === today.getMonth() && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => cur && (selectedDay = day)}
+          >{day}</button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Calendar lists -->
+    <nav class="flex-1 overflow-y-auto px-3 py-2">
+      {#each calendarLists as list}
+        <div class="mb-3">
+          <button
+            type="button"
+            class="mb-1 flex w-full items-center justify-between rounded px-1 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground"
+            onclick={() => toggleSection(list.label)}
+          >
+            {list.label}
+            <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('transition-transform', !openSections.has(list.label) && '-rotate-90')}><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+          {#if openSections.has(list.label)}
+            <ul class="space-y-1">
+              {#each list.items as item}
+                <li class="flex items-center gap-2 px-1">
+                  <Checkbox checked={item.checked} />
+                  <span class="text-sm">{item.label}</span>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </div>
+      {/each}
+    </nav>
+
+    <!-- New Calendar -->
+    <div class="border-t px-4 py-3">
+      <button type="button" class="flex items-center gap-1.5 text-sm 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="M5 12h14"/><path d="M12 5v14"/></svg>
+        New Calendar
+      </button>
+    </div>
+  </aside>
+
+  <!-- Main content -->
+  <main class="flex flex-1 flex-col overflow-hidden">
+    {#if contentTitle}
+      <div class="border-b px-6 py-4">
+        <h1 class="text-xl font-semibold">{contentTitle}</h1>
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+</div>

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

@@ -0,0 +1,103 @@
+<!--
+  SidebarLayout13.svelte
+  Settings modal/dialog: left nav list, right content panel, close button, breadcrumb.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  type SettingsItem = { label: string; href?: string; icon?: string; active?: boolean };
+
+  let {
+    class: className = '',
+    items = [],
+    title = 'Settings',
+    onclose
+  }: {
+    class?: string;
+    items?: SettingsItem[];
+    title?: string;
+    onclose?: () => void;
+  } = $props();
+
+  // Lucide-style icon paths for common settings items
+  const ICONS: Record<string, string> = {
+    notifications: 'M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9 M13.73 21a2 2 0 0 1-3.46 0',
+    navigation: 'M3 12h18 M3 6h18 M3 18h18',
+    home: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z',
+    appearance: 'M12 2a5 5 0 1 0 0 10A5 5 0 0 0 12 2z M12 12a7 7 0 1 0 0 14A7 7 0 0 0 12 12z',
+    messages: 'M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z',
+    language: 'M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z M2 12h20 M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z',
+    accessibility: 'M12 2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z M12 8l-4 1 M12 8l4 1 M8 9l-2 8 M16 9l2 8 M10 17l2 5 M14 17l-2 5',
+    read: 'M20 6 9 17l-5-5',
+    audio: 'M11 5 6 9H2v6h4l5 4V5z M15.54 8.46a5 5 0 0 1 0 7.07',
+    accounts: 'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2 M9 7a4 4 0 1 0 8 0 4 4 0 0 0-8 0 M22 21v-2a4 4 0 0 0-3-3.87 M16 3.13a4 4 0 0 1 0 7.75',
+    privacy: 'M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z',
+    advanced: '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',
+  };
+
+  const activeItem = $derived(items.find(i => i.active)?.label ?? items[0]?.label ?? '');
+
+  function iconPath(item: SettingsItem): string {
+    if (!item.icon) return '';
+    return ICONS[item.icon] ?? ICONS['advanced'];
+  }
+</script>
+
+<!-- Modal overlay -->
+<div class={cn('fixed inset-0 z-50 flex items-center justify-center bg-black/50', className)}>
+  <div class="relative flex h-[600px] w-[900px] max-w-[95vw] overflow-hidden rounded-xl border bg-background shadow-xl">
+    <!-- Left nav -->
+    <nav class="flex w-56 flex-col border-r bg-muted/30">
+      <div class="border-b px-4 py-4">
+        <h2 class="font-semibold">{title}</h2>
+      </div>
+      <ul class="flex-1 overflow-y-auto px-2 py-3 space-y-0.5">
+        {#each items as item}
+          <li>
+            <a
+              href={item.href ?? '#'}
+              class={cn(
+                'flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors',
+                item.active || item.label === activeItem
+                  ? 'bg-muted font-medium text-foreground'
+                  : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+              )}
+            >
+              {#if item.icon}
+                <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" class="shrink-0">
+                  <path d={iconPath(item)} />
+                </svg>
+              {/if}
+              {item.label}
+            </a>
+          </li>
+        {/each}
+      </ul>
+    </nav>
+
+    <!-- Right content -->
+    <div class="flex flex-1 flex-col overflow-hidden">
+      <!-- Content header -->
+      <div class="flex items-center justify-between border-b px-6 py-4">
+        <div class="flex items-center gap-2 text-sm text-muted-foreground">
+          <span>{title}</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="font-medium text-foreground">{activeItem}</span>
+        </div>
+        <button
+          type="button"
+          class="rounded-md p-1 text-muted-foreground hover:bg-muted hover:text-foreground"
+          onclick={onclose}
+          aria-label="Close settings"
+        >
+          <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"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+        </button>
+      </div>
+
+      <!-- Slot content -->
+      <div class="flex-1 overflow-y-auto p-6">
+        <slot />
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,87 @@
+<!--
+  SidebarLayout14.svelte
+  Right-side table of contents: main content left, sticky TOC panel on right.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from '$lib/components/ui';
+
+  type TocEntry = { label: string; href: string; level?: number; active?: boolean };
+  type TocSection = { title: string; items: TocEntry[] };
+
+  let {
+    class: className = '',
+    tocSections = [],
+    breadcrumbs = [],
+    showPanelToggle = true,
+    children
+  }: {
+    class?: string;
+    tocSections?: TocSection[];
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    showPanelToggle?: boolean;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- 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">
+        {#if showPanelToggle}
+          <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>
+        {/if}
+        <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>
+        <!-- Right-side panel toggle -->
+        {#if showPanelToggle}
+          <div class="ml-auto">
+            <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="M15 3v18"/></svg>
+            </button>
+          </div>
+        {/if}
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+
+  <!-- Right TOC panel -->
+  <aside class="flex w-56 flex-col border-l bg-background">
+    <div class="overflow-y-auto px-4 py-4">
+      {#each tocSections as section}
+        <div class="mb-4">
+          <p class="mb-2 text-xs font-semibold text-foreground">{section.title}</p>
+          <ul class="space-y-1">
+            {#each section.items as item}
+              <li>
+                <a
+                  href={item.href}
+                  class={cn(
+                    'block text-sm transition-colors leading-snug',
+                    item.level && item.level > 1 ? 'pl-3' : '',
+                    item.active
+                      ? 'font-medium text-foreground'
+                      : 'text-muted-foreground hover:text-foreground'
+                  )}
+                >{item.label}</a>
+              </li>
+            {/each}
+          </ul>
+        </div>
+      {/each}
+    </div>
+  </aside>
+</div>

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

@@ -0,0 +1,228 @@
+<!--
+  SidebarLayout15.svelte
+  Notion workspace with left sidebar + right calendar panel (mini cal + calendar lists).
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '$lib/utils/cn';
+  import { Checkbox } from '$lib/components/ui';
+
+  type PageItem = { label: string; href: string; icon?: string; active?: boolean };
+  type PageGroup = { title: string; items: PageItem[]; showMore?: boolean };
+  type CalList = { label: string; items: Array<{ label: string; checked: boolean }> };
+
+  let {
+    class: className = '',
+    workspace = 'Acme Inc',
+    quickLinks = [],
+    groups = [],
+    footerLinks = [],
+    calendarLists = [],
+    breadcrumbs = [],
+    children
+  }: {
+    class?: string;
+    workspace?: string;
+    quickLinks?: Array<{ label: string; href: string }>;
+    groups?: PageGroup[];
+    footerLinks?: Array<{ label: string; href: string }>;
+    calendarLists?: CalList[];
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    children?: Snippet;
+  } = $props();
+
+  // Mini calendar
+  const today = new Date();
+  let viewYear = $state(today.getFullYear());
+  let viewMonth = $state(today.getMonth());
+  const DAYS = ['Su','Mo','Tu','We','Th','Fr','Sa'];
+  const MONTHS_SHORT = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
+
+  function getDim(y: number, m: number) { return new Date(y, m + 1, 0).getDate(); }
+  function getCalDays(y: number, m: number) {
+    const dim = getDim(y, m);
+    const fd = new Date(y, m, 1).getDay();
+    const prev = getDim(y, m - 1);
+    const days: Array<{ day: number; cur: boolean }> = [];
+    for (let i = fd - 1; i >= 0; i--) days.push({ day: prev - i, cur: false });
+    for (let i = 1; i <= dim; i++) days.push({ day: i, cur: true });
+    while (days.length < 42) days.push({ day: days.length - dim - fd + 2, cur: false });
+    return days;
+  }
+  let calDays = $derived(getCalDays(viewYear, viewMonth));
+  let selectedDay = $state(today.getDate());
+  function prev() { if (viewMonth === 0) { viewMonth = 11; viewYear--; } else viewMonth--; }
+  function next() { if (viewMonth === 11) { viewMonth = 0; viewYear++; } else viewMonth++; }
+
+  let openSections = $state<Set<string>>(new Set(calendarLists.map(l => l.label)));
+  function toggleSection(label: string) {
+    openSections = openSections.has(label)
+      ? new Set([...openSections].filter(s => s !== label))
+      : new Set([...openSections, label]);
+  }
+
+  // User (placeholder)
+  const user = { name: 'shadcn', email: 'm@example.com' };
+</script>
+
+<div class={cn('flex h-screen', className)}>
+  <!-- Left workspace sidebar -->
+  <aside class="flex w-60 flex-col border-r bg-background">
+    <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>
+
+    {#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="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"/></svg>
+                {link.label}
+              </a>
+            </li>
+          {/each}
+        </ul>
+      </nav>
+    {/if}
+
+    <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="text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100" 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>
+
+    {#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="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"/></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">
+        {#each breadcrumbs as crumb, i}
+          {#if i > 0}<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="m9 18 6-6-6-6"/></svg>{/if}
+          <a href={crumb.href ?? '#'} class={cn('text-sm', i === breadcrumbs.length - 1 ? 'font-medium text-foreground' : 'text-muted-foreground hover:text-foreground')}>{crumb.label}</a>
+        {/each}
+      </div>
+    {/if}
+    <div class="flex-1 overflow-y-auto p-6">{@render children?.()}</div>
+  </main>
+
+  <!-- Right calendar panel -->
+  <aside class="flex w-64 flex-col border-l bg-background">
+    <!-- User header -->
+    <div class="flex items-center justify-between border-b px-4 py-3">
+      <div class="flex items-center gap-2">
+        <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>
+          <p class="text-sm font-medium">{user.name}</p>
+          <p class="text-xs text-muted-foreground">{user.email}</p>
+        </div>
+      </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>
+
+    <!-- Mini calendar -->
+    <div class="border-b p-3">
+      <div class="mb-2 flex items-center justify-between">
+        <button type="button" onclick={prev} class="rounded p-1 hover:bg-muted">
+          <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 18-6-6 6-6"/></svg>
+        </button>
+        <span class="text-sm font-medium">{MONTHS_SHORT[viewMonth]} {viewYear}</span>
+        <button type="button" onclick={next} class="rounded p-1 hover:bg-muted">
+          <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>
+        </button>
+      </div>
+      <div class="grid grid-cols-7">
+        {#each DAYS as d}
+          <div class="flex h-7 w-7 items-center justify-center text-xs font-medium text-muted-foreground">{d}</div>
+        {/each}
+        {#each calDays as { day, cur }}
+          <button
+            type="button"
+            class={cn('flex h-7 w-7 items-center justify-center rounded-full text-xs transition-colors',
+              !cur && 'text-muted-foreground/40',
+              cur && 'hover:bg-muted',
+              cur && day === selectedDay && 'bg-primary text-primary-foreground hover:bg-primary'
+            )}
+            onclick={() => cur && (selectedDay = day)}
+          >{day}</button>
+        {/each}
+      </div>
+    </div>
+
+    <!-- Calendar lists -->
+    <nav class="flex-1 overflow-y-auto px-3 py-2">
+      {#each calendarLists as list}
+        <div class="mb-3">
+          <button type="button" class="mb-1 flex w-full items-center justify-between rounded px-1 py-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground" onclick={() => toggleSection(list.label)}>
+            {list.label}
+            <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('transition-transform', !openSections.has(list.label) && '-rotate-90')}><path d="m6 9 6 6 6-6"/></svg>
+          </button>
+          {#if openSections.has(list.label)}
+            <ul class="space-y-1">
+              {#each list.items as item}
+                <li class="flex items-center gap-2 px-1">
+                  <Checkbox checked={item.checked} />
+                  <span class="text-sm">{item.label}</span>
+                </li>
+              {/each}
+            </ul>
+          {/if}
+        </div>
+      {/each}
+    </nav>
+
+    <div class="border-t px-4 py-3">
+      <button type="button" class="flex items-center gap-1.5 text-sm 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="M5 12h14"/><path d="M12 5v14"/></svg>
+        New Calendar
+      </button>
+    </div>
+  </aside>
+</div>

package/src/registry/blocks/sidebar/index.ts

@@ -0,0 +1,15 @@
+export { default as SidebarLayout01 } from './SidebarLayout01.svelte';
+export { default as SidebarLayout02 } from './SidebarLayout02.svelte';
+export { default as SidebarLayout03 } from './SidebarLayout03.svelte';
+export { default as SidebarLayout04 } from './SidebarLayout04.svelte';
+export { default as SidebarLayout05 } from './SidebarLayout05.svelte';
+export { default as SidebarLayout06 } from './SidebarLayout06.svelte';
+export { default as SidebarLayout07 } from './SidebarLayout07.svelte';
+export { default as SidebarLayout08 } from './SidebarLayout08.svelte';
+export { default as SidebarLayout09 } from './SidebarLayout09.svelte';
+export { default as SidebarLayout10 } from './SidebarLayout10.svelte';
+export { default as SidebarLayout11 } from './SidebarLayout11.svelte';
+export { default as SidebarLayout12 } from './SidebarLayout12.svelte';
+export { default as SidebarLayout13 } from './SidebarLayout13.svelte';
+export { default as SidebarLayout14 } from './SidebarLayout14.svelte';
+export { default as SidebarLayout15 } from './SidebarLayout15.svelte';