@xbg.solutions/create-frontend 1.1.1 → 1.2.0

package/src/registry/blocks/account-section/AccountSection03.svelte

@@ -0,0 +1,161 @@
+<!--
+  AccountSection03.svelte
+  Saved addresses: list of 2 address cards with address details + "Default" badge on one,
+  Edit/Delete buttons. "+ Add new address" button.
+  Modal/inline form for adding address (collapsed by default, $state for show).
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  let showAddForm = $state(false);
+  let newAddress = $state({
+    fullName: '',
+    street: '',
+    city: '',
+    state: '',
+    zipCode: '',
+    country: ''
+  });
+
+  const addresses = [
+    {
+      id: 1,
+      fullName: 'Sarah Anderson',
+      street: '123 Main Street, Apt 4B',
+      city: 'New York',
+      state: 'NY',
+      zipCode: '10001',
+      country: 'USA',
+      isDefault: true
+    },
+    {
+      id: 2,
+      fullName: 'Sarah Anderson',
+      street: '456 Oak Avenue',
+      city: 'San Francisco',
+      state: 'CA',
+      zipCode: '94102',
+      country: 'USA',
+      isDefault: false
+    }
+  ];
+</script>
+
+<div class={cn('w-full bg-gray-50 py-8', className)}>
+  <div class="mx-auto max-w-4xl px-4">
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-gray-900">Saved Addresses</h1>
+      <button
+        type="button"
+        onclick={() => (showAddForm = !showAddForm)}
+        class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      >
+        {showAddForm ? 'Cancel' : '+ Add New Address'}
+      </button>
+    </div>
+
+    <!-- Add address form -->
+    {#if showAddForm}
+      <div class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-6">
+        <h2 class="mb-4 text-lg font-semibold text-gray-900">Add New Address</h2>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Full Name</label>
+            <input
+              type="text"
+              bind:value={newAddress.fullName}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="Enter full name"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Street Address</label>
+            <input
+              type="text"
+              bind:value={newAddress.street}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="Street address"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">City</label>
+            <input
+              type="text"
+              bind:value={newAddress.city}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="City"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">State/Province</label>
+            <input
+              type="text"
+              bind:value={newAddress.state}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="State"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">ZIP/Postal Code</label>
+            <input
+              type="text"
+              bind:value={newAddress.zipCode}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="ZIP code"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Country</label>
+            <input
+              type="text"
+              bind:value={newAddress.country}
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+              placeholder="Country"
+            />
+          </div>
+        </div>
+        <div class="mt-4 flex gap-3">
+          <button type="button" class="rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white hover:bg-blue-700">Save Address</button>
+          <button
+            type="button"
+            onclick={() => (showAddForm = false)}
+            class="rounded-lg border border-gray-300 px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Addresses list -->
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {#each addresses as address}
+        <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <div class="mb-4 flex items-start justify-between">
+            <h3 class="text-lg font-semibold text-gray-900">{address.fullName}</h3>
+            {#if address.isDefault}
+              <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">Default</span>
+            {/if}
+          </div>
+
+          <div class="mb-4 space-y-1 text-sm text-gray-600">
+            <p>{address.street}</p>
+            <p>{address.city}, {address.state} {address.zipCode}</p>
+            <p>{address.country}</p>
+          </div>
+
+          <div class="flex gap-3">
+            <button type="button" class="flex-1 rounded-lg border border-blue-600 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50">Edit</button>
+            <button type="button" class="flex-1 rounded-lg border border-red-300 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50">Delete</button>
+          </div>
+        </div>
+      {/each}
+    </div>
+  </div>
+</div>

package/src/registry/blocks/account-section/AccountSection04.svelte

@@ -0,0 +1,164 @@
+<!--
+  AccountSection04.svelte
+  Payment methods: list of 2 payment method cards with card icon (Visa/Mastercard SVG logo),
+  last 4 digits, expiry, "Default" badge. Add new card button. PayPal linked account entry.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  let showAddCard = $state(false);
+
+  const paymentMethods = [
+    {
+      id: 1,
+      type: 'visa',
+      lastFour: '4242',
+      expiry: '12/26',
+      cardName: 'Visa',
+      isDefault: true
+    },
+    {
+      id: 2,
+      type: 'mastercard',
+      lastFour: '5555',
+      expiry: '08/27',
+      cardName: 'Mastercard',
+      isDefault: false
+    }
+  ];
+
+  const paypalLinked = {
+    email: 'sarah.anderson@example.com',
+    isDefault: false
+  };
+</script>
+
+<div class={cn('w-full bg-gray-50 py-8', className)}>
+  <div class="mx-auto max-w-4xl px-4">
+    <div class="mb-6 flex items-center justify-between">
+      <h1 class="text-2xl font-bold text-gray-900">Payment Methods</h1>
+      <button
+        type="button"
+        onclick={() => (showAddCard = !showAddCard)}
+        class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
+      >
+        {showAddCard ? 'Cancel' : '+ Add Card'}
+      </button>
+    </div>
+
+    <!-- Add card form -->
+    {#if showAddCard}
+      <div class="mb-6 rounded-lg border border-blue-200 bg-blue-50 p-6">
+        <h2 class="mb-4 text-lg font-semibold text-gray-900">Add Payment Method</h2>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+          <div class="sm:col-span-2">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Card Number</label>
+            <input
+              type="text"
+              placeholder="1234 5678 9012 3456"
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">Expiry Date</label>
+            <input
+              type="text"
+              placeholder="MM/YY"
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700 mb-1">CVV</label>
+            <input
+              type="text"
+              placeholder="123"
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
+          <div class="sm:col-span-2">
+            <label class="block text-sm font-medium text-gray-700 mb-1">Cardholder Name</label>
+            <input
+              type="text"
+              placeholder="Name on card"
+              class="w-full rounded-lg border border-gray-300 px-4 py-2 text-sm focus:border-blue-500 focus:outline-none"
+            />
+          </div>
+        </div>
+        <div class="mt-4 flex gap-3">
+          <button type="button" class="rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white hover:bg-blue-700">Add Card</button>
+          <button
+            type="button"
+            onclick={() => (showAddCard = false)}
+            class="rounded-lg border border-gray-300 px-6 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    {/if}
+
+    <!-- Payment methods list -->
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      {#each paymentMethods as method}
+        <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+          <div class="mb-4 flex items-start justify-between">
+            <div class="flex items-center gap-3">
+              {#if method.type === 'visa'}
+                <div class="flex h-10 w-16 items-center justify-center rounded bg-blue-600">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 48 32" fill="none"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white" font-size="12" font-weight="bold">VISA</text></svg>
+                </div>
+              {:else if method.type === 'mastercard'}
+                <div class="flex h-10 w-16 items-center justify-center rounded bg-orange-500">
+                  <svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 48 32" fill="none"><circle cx="16" cy="16" r="12" fill="red"/><circle cx="32" cy="16" r="12" fill="orange"/></svg>
+                </div>
+              {/if}
+              <div>
+                <p class="font-medium text-gray-900">{method.cardName}</p>
+                <p class="text-sm text-gray-500">****{method.lastFour}</p>
+              </div>
+            </div>
+            {#if method.isDefault}
+              <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">Default</span>
+            {/if}
+          </div>
+
+          <p class="mb-4 text-sm text-gray-600">Expires {method.expiry}</p>
+
+          <div class="flex gap-3">
+            <button type="button" class="flex-1 rounded-lg border border-blue-600 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50">Edit</button>
+            <button type="button" class="flex-1 rounded-lg border border-red-300 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50">Delete</button>
+          </div>
+        </div>
+      {/each}
+
+      <!-- PayPal -->
+      <div class="rounded-lg border border-gray-200 bg-white p-6 shadow-sm">
+        <div class="mb-4 flex items-start justify-between">
+          <div class="flex items-center gap-3">
+            <div class="flex h-10 w-16 items-center justify-center rounded bg-blue-700">
+              <svg xmlns="http://www.w3.org/2000/svg" width="32" height="20" viewBox="0 0 48 32" fill="none"><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="white" font-size="10" font-weight="bold">PayPal</text></svg>
+            </div>
+            <div>
+              <p class="font-medium text-gray-900">PayPal</p>
+              <p class="text-sm text-gray-500">{paypalLinked.email}</p>
+            </div>
+          </div>
+          {#if paypalLinked.isDefault}
+            <span class="inline-flex items-center rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-700">Default</span>
+          {/if}
+        </div>
+
+        <div class="flex gap-3">
+          <button type="button" class="flex-1 rounded-lg border border-blue-600 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50">Edit</button>
+          <button type="button" class="flex-1 rounded-lg border border-red-300 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50">Remove</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/src/registry/blocks/account-section/AccountSection05.svelte

@@ -0,0 +1,76 @@
+<!--
+  AccountSection05.svelte
+  Wishlist page: "My Wishlist (8)" heading.
+  4-col grid of saved product cards with: image placeholder, name, price,
+  "Move to cart" + remove (X) buttons.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+
+  interface Props {
+    class?: string;
+  }
+
+  let { class: className = '' }: Props = $props();
+
+  const wishlistItems = [
+    { id: 1, name: 'Premium Leather Jacket', price: '$189.99', category: 'Outerwear' },
+    { id: 2, name: 'Classic White Sneakers', price: '$79.99', category: 'Shoes' },
+    { id: 3, name: 'Wool Blend Trousers', price: '$129.99', category: 'Bottoms' },
+    { id: 4, name: 'Silk Scarf', price: '$49.99', category: 'Accessories' },
+    { id: 5, name: 'Cotton T-Shirt', price: '$29.99', category: 'Tops' },
+    { id: 6, name: 'Designer Sunglasses', price: '$159.99', category: 'Accessories' },
+    { id: 7, name: 'Canvas Tote Bag', price: '$89.99', category: 'Bags' },
+    { id: 8, name: 'Cashmere Sweater', price: '$179.99', category: 'Tops' }
+  ];
+</script>
+
+<div class={cn('w-full bg-gray-50 py-8', className)}>
+  <div class="mx-auto max-w-7xl px-4">
+    <div class="mb-8">
+      <h1 class="text-3xl font-bold text-gray-900">My Wishlist ({wishlistItems.length})</h1>
+      <p class="mt-2 text-gray-600">Items you've saved for later</p>
+    </div>
+
+    <!-- Products grid -->
+    <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
+      {#each wishlistItems as item}
+        <div class="rounded-lg bg-white shadow-sm hover:shadow-md transition-shadow overflow-hidden">
+          <!-- Product image placeholder -->
+          <div class="relative aspect-square bg-gray-100">
+            <button
+              type="button"
+              class="absolute right-2 top-2 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md hover:bg-gray-100"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="text-red-500"><path d="M18 6 6 18M6 6 18 18"/></svg>
+            </button>
+            <div class="flex h-full items-center justify-center">
+              <div class="text-center text-gray-400 text-sm">Product Image</div>
+            </div>
+          </div>
+
+          <!-- Product details -->
+          <div class="p-4">
+            <p class="mb-1 text-xs font-medium text-gray-500 uppercase tracking-wide">{item.category}</p>
+            <h3 class="mb-2 text-sm font-semibold text-gray-900 line-clamp-2">{item.name}</h3>
+            <p class="mb-4 text-lg font-bold text-gray-900">{item.price}</p>
+
+            <button type="button" class="w-full rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
+              Move to Cart
+            </button>
+          </div>
+        </div>
+      {/each}
+    </div>
+
+    <!-- Empty state (if no items) -->
+    <!-- {#if wishlistItems.length === 0}
+      <div class="rounded-lg border-2 border-dashed border-gray-300 bg-white py-12 text-center">
+        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mx-auto mb-4 text-gray-400"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
+        <h3 class="mt-2 text-lg font-semibold text-gray-900">Your wishlist is empty</h3>
+        <p class="mt-1 text-gray-600">Add items to your wishlist to save them for later</p>
+        <a href="#" class="mt-4 inline-block rounded-lg bg-blue-600 px-6 py-2 text-sm font-medium text-white hover:bg-blue-700">Continue Shopping</a>
+      </div>
+    {/if} -->
+  </div>
+</div>

package/src/registry/blocks/account-section/index.ts

@@ -0,0 +1,5 @@
+export { default as AccountSection01 } from './AccountSection01.svelte';
+export { default as AccountSection02 } from './AccountSection02.svelte';
+export { default as AccountSection03 } from './AccountSection03.svelte';
+export { default as AccountSection04 } from './AccountSection04.svelte';
+export { default as AccountSection05 } from './AccountSection05.svelte';

package/src/registry/blocks/app-shell/AppShell01.svelte

@@ -0,0 +1,74 @@
+<!--
+  AppShell01.svelte
+  Navbar1 (with links + upgrade) + breadcrumb + page title/description +
+  action buttons (Share, View, Edit, Publish) + slotted content area.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+  import Navbar01 from '$lib/components/blocks/navbar/Navbar01.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    title = 'Project alpha',
+    description = 'Manage your project\'s details such as name, image, description and settings.',
+    breadcrumbs = [{ label: 'Home', href: '#' }, { label: 'Settings', href: '#' }, { label: 'Profile details' }],
+    onshare = () => {},
+    onview = () => {},
+    onedit = () => {},
+    onpublish = () => {},
+    children
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    onshare?: () => void;
+    onview?: () => void;
+    onedit?: () => void;
+    onpublish?: () => void;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<div class={cn('flex min-h-screen flex-col bg-muted/30', className)}>
+  <Navbar01 />
+
+  <div class="flex-1 px-4 py-6 md:px-8">
+    <!-- Breadcrumb -->
+    <nav class="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+      {#each breadcrumbs as crumb, i}
+        {#if i > 0}<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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}
+        {#if crumb.href && i < breadcrumbs.length - 1}
+          <a href={crumb.href} class="hover:text-foreground">{crumb.label}</a>
+        {:else}
+          <span class={i === breadcrumbs.length - 1 ? 'font-medium text-foreground' : ''}>{crumb.label}</span>
+        {/if}
+      {/each}
+    </nav>
+
+    <!-- Page header -->
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-bold">{title}</h1>
+        {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+      </div>
+      <div class="flex shrink-0 items-center gap-2">
+        <Button variant="outline" size="sm" onclick={onshare}>Share</Button>
+        <Button variant="outline" size="sm" onclick={onview}>View</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+        <Button size="sm" onclick={onpublish}>Publish</Button>
+      </div>
+    </div>
+
+    <!-- Content slot -->
+    {#if children}
+      {@render children()}
+    {:else}
+      <div class="flex min-h-32 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+        Slot (swap it with your content)
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/app-shell/AppShell02.svelte

@@ -0,0 +1,87 @@
+<!--
+  AppShell02.svelte
+  Navbar2 + tabs below navbar + page title/description + action buttons +
+  multiple stacked content slots.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+  import Navbar02 from '$lib/components/blocks/navbar/Navbar02.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    title = 'Project alpha',
+    description = 'Manage your profile details such as name, avatar, email and bio.',
+    tabs = ['Profile','Reports','Analytics','Notifications','Help Center'],
+    activeTab = 'Profile',
+    onedit = () => {},
+    onpublish = () => {},
+    children,
+    slots = 3
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    tabs?: string[];
+    activeTab?: string;
+    onedit?: () => void;
+    onpublish?: () => void;
+    children?: Snippet;
+    slots?: number;
+  } = $props();
+
+  let currentTab = $state(activeTab);
+</script>
+
+<div class={cn('flex min-h-screen flex-col bg-muted/30', className)}>
+  <Navbar02 />
+
+  <!-- Tab bar -->
+  <div class="border-b bg-background px-4 md:px-8">
+    <div class="flex gap-0 overflow-x-auto">
+      {#each tabs as tab}
+        <button
+          type="button"
+          onclick={() => (currentTab = tab)}
+          class={cn(
+            'shrink-0 border-b-2 px-4 py-3 text-sm font-medium transition-colors',
+            currentTab === tab
+              ? 'border-foreground text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+        >{tab}</button>
+      {/each}
+    </div>
+  </div>
+
+  <div class="flex-1 px-4 py-6 md:px-8">
+    <!-- Page header -->
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-bold">{title}</h1>
+        {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+      </div>
+      <div class="flex shrink-0 items-center gap-2">
+        <Button size="sm" onclick={onpublish}>Publish</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+        <Button variant="ghost" size="icon" class="h-8 w-8">
+          <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"><circle cx="12" cy="12" r="1"/><circle cx="19" cy="12" r="1"/><circle cx="5" cy="12" r="1"/></svg>
+        </Button>
+      </div>
+    </div>
+
+    <!-- Stacked content slots -->
+    {#if children}
+      {@render children()}
+    {:else}
+      <div class="flex flex-col gap-4">
+        {#each Array(slots) as _}
+          <div class="flex min-h-24 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+            Slot (swap it with your content)
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>

package/src/registry/blocks/app-shell/AppShell03.svelte

@@ -0,0 +1,79 @@
+<!--
+  AppShell03.svelte
+  Navbar2 + breadcrumb + page title/description + inline search + stacked slots.
+-->
+<script lang="ts">
+  import { cn } from '$lib/utils/cn';
+  import { Button } from '$lib/components/ui';
+  import Navbar02 from '$lib/components/blocks/navbar/Navbar02.svelte';
+  import type { Snippet } from 'svelte';
+
+  let {
+    class: className = '',
+    title = 'Project alpha',
+    description = 'Manage your project\'s details such as name, avatar, email and bio.',
+    breadcrumbs = [{ label: 'Home', href: '#' }, { label: 'Settings', href: '#' }, { label: 'Profile details' }],
+    searchPlaceholder = 'Search',
+    onpublish = () => {},
+    onedit = () => {},
+    children,
+    slots = 3
+  }: {
+    class?: string;
+    title?: string;
+    description?: string;
+    breadcrumbs?: Array<{ label: string; href?: string }>;
+    searchPlaceholder?: string;
+    onpublish?: () => void;
+    onedit?: () => void;
+    children?: Snippet;
+    slots?: number;
+  } = $props();
+</script>
+
+<div class={cn('flex min-h-screen flex-col bg-muted/30', className)}>
+  <Navbar02 />
+
+  <div class="flex-1 px-4 py-6 md:px-8">
+    <!-- Breadcrumb -->
+    <nav class="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
+      {#each breadcrumbs as crumb, i}
+        {#if i > 0}<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" 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}
+        {#if crumb.href && i < breadcrumbs.length - 1}
+          <a href={crumb.href} class="hover:text-foreground">{crumb.label}</a>
+        {:else}
+          <span class={i === breadcrumbs.length - 1 ? 'font-medium text-foreground' : ''}>{crumb.label}</span>
+        {/if}
+      {/each}
+    </nav>
+
+    <!-- Page header with inline search -->
+    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+      <div>
+        <h1 class="text-2xl font-bold">{title}</h1>
+        {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+      </div>
+      <div class="flex shrink-0 items-center gap-2">
+        <div class="flex items-center gap-2 rounded-md border bg-background px-3 py-1.5">
+          <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="text-muted-foreground"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
+          <input type="text" placeholder={searchPlaceholder} class="bg-transparent text-sm outline-none placeholder:text-muted-foreground w-40" />
+        </div>
+        <Button size="sm" onclick={onpublish}>Publish</Button>
+        <Button variant="outline" size="sm" onclick={onedit}>Edit</Button>
+      </div>
+    </div>
+
+    <!-- Stacked slots -->
+    {#if children}
+      {@render children()}
+    {:else}
+      <div class="flex flex-col gap-4">
+        {#each Array(slots) as _}
+          <div class="flex min-h-24 items-center justify-center rounded-lg border border-dashed bg-background text-sm text-muted-foreground">
+            Slot (swap it with your content)
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</div>