@miozu/jera 0.6.4 → 0.7.1

package/CLAUDE.md

@@ -370,6 +370,107 @@ Props: `tabs` (array), `active`, `variant` (default/underline/pills), `size` (sm
 Accordion props: `expanded` (array of ids), `multiple`
 AccordionItem props: `id`, `title`, `disabled`
 
+### LeftBar (Sidebar Navigation)
+
+A lightweight, collapsible sidebar for admin-style navigation.
+
+```svelte
+<script>
+  import { LeftBar, LeftBarSection, LeftBarItem, LeftBarGroup, LeftBarToggle, createActiveChecker } from '@miozu/jera';
+  import { page } from '$app/stores';
+  import { Home, Settings, Users, Building2 } from 'lucide-svelte';
+
+  let collapsed = $state(false);
+  const isActive = createActiveChecker(() => $page.url.pathname);
+</script>
+
+<LeftBar bind:collapsed persistKey="my-sidebar">
+  {#snippet header()}
+    <div class="logo">MyApp</div>
+  {/snippet}
+
+  {#snippet navigation()}
+    <LeftBarSection>
+      <LeftBarItem href="/" icon={Home} label="Dashboard" active={isActive('/', 'exact')} />
+      <LeftBarItem href="/users" icon={Users} label="Users" badge={5} active={isActive('/users')} />
+    </LeftBarSection>
+
+    <LeftBarSection title="Management">
+      <LeftBarItem
+        label="Organization"
+        icon={Building2}
+        expandable
+        subroutes={[
+          { label: 'Members', href: '/org/members' },
+          { label: 'Settings', href: '/org/settings' }
+        ]}
+      />
+    </LeftBarSection>
+
+    <!-- Generic group for accounts, projects, workspaces, etc. -->
+    <LeftBarGroup
+      title="Connected Accounts"
+      items={accounts}
+      bind:expanded={accountsExpanded}
+      onItemClick={(account) => goto(`/account/${account.id}`)}
+      onAddClick={() => showConnectModal = true}
+      addLabel="Connect account"
+    />
+  {/snippet}
+
+  {#snippet footer()}
+    <LeftBarToggle />
+  {/snippet}
+</LeftBar>
+```
+
+**LeftBar** props: `collapsed` (bindable), `persistKey`, `header` (snippet), `navigation` (snippet), `footer` (snippet)
+
+**LeftBarSection** props: `title`, `class`
+
+**LeftBarItem** props:
+- `href` - Link destination (renders as `<a>`)
+- `label` - Display text
+- `icon` - Lucide icon component
+- `active` - Boolean for active state
+- `badge` - Number/string for badge count
+- `expandable` - Enable expand/collapse
+- `expanded` - Bindable expansion state
+- `subroutes` - Array of `{ label, href }` for expandable items
+- `preload` - Boolean for SvelteKit preload-data (default: true)
+- `leading` - Snippet for content before icon
+- `trailing` - Snippet for content after label (custom badges, etc.)
+- `isActiveRoute` - Function to check subroute active state
+
+**LeftBarGroup** props (generic collection for accounts, projects, etc.):
+- `title` - Section header
+- `items` - Array of items to display
+- `expanded` - Bindable expansion state
+- `expandedItems` - Object tracking which items are expanded
+- `expandable` - Enable item-level expansion
+- `showAdd` - Show add button
+- `addLabel` - Add button text
+- `showCount` - Show item count badge
+- `onItemClick` - Item click handler
+- `onAddClick` - Add button handler
+- `getItemId`, `getItemName`, `getItemAvatar`, `getItemPlatform` - Item accessors
+- `getSubroutes` - Function returning subroutes for an item
+- `isItemActive`, `isSubrouteActive` - Active state checkers
+- `item` - Custom item rendering snippet
+
+**createActiveChecker** utility:
+```javascript
+import { createActiveChecker } from '@miozu/jera';
+import { page } from '$app/stores';
+
+// Create checker with current pathname
+const isActive = createActiveChecker(() => $page.url.pathname);
+
+// Use in components
+<LeftBarItem active={isActive('/dashboard')} />           // prefix match
+<LeftBarItem active={isActive('/dashboard', 'exact')} />  // exact match
+```
+
 ### CodeBlock
 ```svelte
 <script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miozu/jera",
-  "version": "0.6.4",
+  "version": "0.7.1",
   "description": "Zero-dependency, AI-first component library for Svelte 5",
   "type": "module",
   "scripts": {

package/src/components/navigation/LeftBarGroup.svelte

@@ -0,0 +1,510 @@
+<!--
+  @component LeftBarGroup
+
+  A collapsible group within LeftBar for displaying collections of entities.
+  Generic component that can represent accounts, projects, workspaces, channels, etc.
+
+  @example Basic usage with items
+  <LeftBarGroup
+    title="Connected Accounts"
+    items={accounts}
+    bind:expanded={accountsExpanded}
+    onItemClick={(item) => navigateTo(item)}
+    onAddClick={() => showConnectModal = true}
+    addLabel="Connect account"
+  />
+
+  @example With custom item rendering
+  <LeftBarGroup title="Projects" bind:expanded>
+    {#snippet item(project)}
+      <div class="project-item">
+        <span class="project-color" style="background: {project.color}"></span>
+        <span>{project.name}</span>
+      </div>
+    {/snippet}
+  </LeftBarGroup>
+
+  @example With expandable items and subroutes
+  <LeftBarGroup
+    title="Accounts"
+    items={accounts}
+    expandable
+    bind:expandedItems={expandedAccounts}
+    getSubroutes={(account) => [
+      { label: 'Overview', href: `/account/${account.id}` },
+      { label: 'Settings', href: `/account/${account.id}/settings` }
+    ]}
+  />
+-->
+<script>
+  import { getContext } from 'svelte';
+  import { slide, fade } from 'svelte/transition';
+  import { cubicOut } from 'svelte/easing';
+
+  let {
+    title = '',
+    items = [],
+    expanded = $bindable(false),
+    expandedItems = $bindable({}),
+    expandable = false,
+    searchable = false,
+    searchQuery = '',
+    addLabel = 'Add item',
+    showAdd = true,
+    showCount = true,
+    onItemClick = null,
+    onSubrouteClick = null,
+    onAddClick = null,
+    getItemId = (item) => item.id,
+    getItemName = (item) => item.name || item.label || '',
+    getItemAvatar = (item) => item.avatar_url || item.avatar || null,
+    getItemInitial = (item) => getItemName(item)?.charAt(0)?.toUpperCase() || '?',
+    getItemPlatform = (item) => item.platform || item.type || null,
+    getSubroutes = () => [],
+    isItemActive = () => false,
+    isSubrouteActive = () => false,
+    class: className = '',
+    item: itemSnippet,
+    children
+  } = $props();
+
+  const leftbar = getContext('leftbar');
+  const isCollapsed = $derived(leftbar?.collapsed ?? false);
+
+  // Filter items based on search
+  const filteredItems = $derived(
+    items.filter(item =>
+      !searchQuery ||
+      getItemName(item)?.toLowerCase().includes(searchQuery.toLowerCase())
+    )
+  );
+
+  function toggleExpanded() {
+    expanded = !expanded;
+  }
+
+  function handleItemClick(item) {
+    if (expandable) {
+      const id = getItemId(item);
+      expandedItems = { ...expandedItems, [id]: !expandedItems[id] };
+    }
+    onItemClick?.(item);
+  }
+
+  function handleSubrouteClick(subroute, item) {
+    onSubrouteClick?.(subroute, item);
+    leftbar?.closeMobileOverlay?.();
+  }
+
+  function handleAddClick() {
+    onAddClick?.();
+  }
+
+  // Platform colors
+  const platformColors = {
+    instagram: 'linear-gradient(to bottom right, rgb(168, 85, 247), rgb(236, 72, 153))',
+    shopify: 'linear-gradient(to bottom right, rgb(34, 197, 94), rgb(16, 185, 129))',
+    tiktok: 'linear-gradient(to bottom right, rgb(0, 0, 0), rgb(37, 244, 238))',
+    facebook: 'linear-gradient(to bottom right, rgb(59, 89, 152), rgb(24, 119, 242))',
+    twitter: 'linear-gradient(to bottom right, rgb(29, 161, 242), rgb(29, 161, 242))',
+    default: 'var(--color-base03)'
+  };
+
+  function getAvatarStyle(item) {
+    const platform = getItemPlatform(item);
+    return platformColors[platform] || platformColors.default;
+  }
+</script>
+
+<div class="left-bar-group {className}">
+  <!-- Section Header -->
+  <button
+    class="group-header"
+    onclick={toggleExpanded}
+    aria-expanded={expanded}
+  >
+    {#if !isCollapsed}
+      <span class="group-title" transition:fade={{ duration: 150 }}>{title}</span>
+      {#if showCount && items.length > 0}
+        <span class="group-count" transition:fade={{ duration: 150 }}>{items.length}</span>
+      {/if}
+    {/if}
+    <svg
+      class="group-chevron"
+      class:rotate-180={expanded}
+      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"
+    >
+      <polyline points="6 9 12 15 18 9"></polyline>
+    </svg>
+  </button>
+
+  <!-- Items List -->
+  {#if expanded}
+    <div class="group-content" transition:slide={{ duration: 200, easing: cubicOut }}>
+      <!-- Custom children content -->
+      {#if children}
+        {@render children()}
+      {:else}
+        <!-- Default item rendering -->
+        {#each filteredItems as item}
+          {@const itemId = getItemId(item)}
+          {@const itemName = getItemName(item)}
+          {@const itemAvatar = getItemAvatar(item)}
+          {@const platform = getItemPlatform(item)}
+          {@const subroutes = getSubroutes(item)}
+          {@const isExpanded = expandedItems[itemId]}
+
+          <div class="group-item-wrapper">
+            <!-- Custom item snippet or default -->
+            {#if itemSnippet}
+              {@render itemSnippet(item, isExpanded)}
+            {:else}
+              <button
+                class="group-item"
+                class:active={isItemActive(item)}
+                class:expanded={isExpanded}
+                onclick={() => handleItemClick(item)}
+                title={isCollapsed ? itemName : null}
+              >
+                <!-- Avatar -->
+                <div class="item-avatar-container">
+                  {#if itemAvatar}
+                    <div class="item-avatar-wrapper">
+                      <img src={itemAvatar} alt={itemName} class="item-avatar-img" />
+                    </div>
+                  {:else}
+                    <div class="item-avatar" style="background: {getAvatarStyle(item)}">
+                      {getItemInitial(item)}
+                    </div>
+                  {/if}
+                  {#if platform}
+                    <div class="platform-badge {platform}">
+                      {#if platform === 'instagram'}
+                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="20" rx="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
+                      {:else if platform === 'shopify'}
+                        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path><line x1="3" y1="6" x2="21" y2="6"></line><path d="M16 10a4 4 0 0 1-8 0"></path></svg>
+                      {/if}
+                    </div>
+                  {/if}
+                </div>
+
+                {#if !isCollapsed}
+                  <span class="item-name" transition:fade={{ duration: 150 }}>{itemName}</span>
+                  {#if expandable && subroutes.length > 0}
+                    <svg
+                      class="item-chevron"
+                      class:rotate-180={isExpanded}
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="14"
+                      height="14"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    >
+                      <polyline points="6 9 12 15 18 9"></polyline>
+                    </svg>
+                  {/if}
+                {/if}
+              </button>
+
+              <!-- Subroutes -->
+              {#if isExpanded && !isCollapsed && subroutes.length > 0}
+                <div class="item-subroutes" transition:slide={{ duration: 200, easing: cubicOut }}>
+                  {#each subroutes as subroute}
+                    <a
+                      href={subroute.href}
+                      class="subroute-item"
+                      class:active={isSubrouteActive(subroute)}
+                      onclick={() => handleSubrouteClick(subroute, item)}
+                    >
+                      {subroute.label}
+                    </a>
+                  {/each}
+                </div>
+              {/if}
+            {/if}
+          </div>
+        {/each}
+      {/if}
+
+      <!-- Add Button -->
+      {#if showAdd && onAddClick}
+        <button
+          class="add-item-btn"
+          class:collapsed={isCollapsed}
+          onclick={handleAddClick}
+          title={addLabel}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="16"
+            height="16"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <line x1="12" y1="5" x2="12" y2="19"></line>
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+          </svg>
+          {#if !isCollapsed}
+            <span transition:fade={{ duration: 150 }}>{addLabel}</span>
+          {/if}
+        </button>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .left-bar-group {
+    padding: 0.125rem 0;
+  }
+
+  /* Group Header */
+  .group-header {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--color-base04);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    cursor: pointer;
+    transition: all 200ms ease;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    justify-content: flex-start;
+  }
+
+  .group-header:hover {
+    color: var(--color-base05);
+  }
+
+  .group-title {
+    flex: 1;
+    text-align: left;
+  }
+
+  .group-count {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    background-color: var(--color-base02);
+    color: var(--color-base05);
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
+  .group-chevron {
+    color: var(--color-base04);
+    transition: all 200ms ease;
+    flex-shrink: 0;
+  }
+
+  .group-chevron.rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  /* Group Content */
+  .group-content {
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+    padding: 0 0.5rem;
+  }
+
+  .group-item-wrapper {
+    display: flex;
+    flex-direction: column;
+  }
+
+  /* Item Button */
+  .group-item {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--color-base06);
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    overflow: hidden;
+    border: none;
+    background: transparent;
+    font-family: inherit;
+    text-align: left;
+  }
+
+  .group-item:hover {
+    color: var(--color-base0D);
+    background-color: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+  }
+
+  .group-item.active,
+  .group-item.expanded {
+    color: var(--color-base0D);
+    background-color: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+  }
+
+  /* Avatar */
+  .item-avatar-container {
+    position: relative;
+    flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
+  }
+
+  .item-avatar-wrapper {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .item-avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  .item-avatar {
+    width: 2rem;
+    height: 2rem;
+    border-radius: 0.375rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: white;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  .platform-badge {
+    position: absolute;
+    bottom: -2px;
+    right: -2px;
+    width: 1rem;
+    height: 1rem;
+    border-radius: 9999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: white;
+    border: 1px solid var(--color-base00);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+    z-index: 10;
+  }
+
+  .platform-badge.instagram {
+    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045);
+  }
+
+  .platform-badge.shopify {
+    background-color: var(--color-base0B);
+  }
+
+  .item-name {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-weight: 500;
+  }
+
+  .item-chevron {
+    color: var(--color-base05);
+    transition: all 200ms ease;
+    flex-shrink: 0;
+  }
+
+  .item-chevron.rotate-180 {
+    transform: rotate(180deg);
+  }
+
+  /* Subroutes */
+  .item-subroutes {
+    margin-left: 2.5rem;
+    padding-left: 0.5rem;
+    border-left: 2px solid color-mix(in srgb, var(--color-base03) 30%, transparent);
+    display: flex;
+    flex-direction: column;
+    gap: 0.125rem;
+  }
+
+  .subroute-item {
+    padding: 0.375rem 0.75rem;
+    display: block;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--color-base05);
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    text-decoration: none;
+  }
+
+  .subroute-item:hover {
+    color: var(--color-base0D);
+    background-color: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+  }
+
+  .subroute-item.active {
+    color: var(--color-base0D);
+    background-color: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    font-weight: 500;
+  }
+
+  /* Add Button */
+  .add-item-btn {
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+    margin-top: 0.25rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    justify-content: center;
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    color: var(--color-base0D);
+    cursor: pointer;
+    border-radius: 0.375rem;
+    transition: all 200ms ease;
+    border: 1px solid color-mix(in srgb, var(--color-base0D) 30%, transparent);
+    background: transparent;
+    font-family: inherit;
+  }
+
+  .add-item-btn:hover {
+    color: var(--color-base0D);
+    background-color: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    border-color: var(--color-base0D);
+  }
+
+  .add-item-btn.collapsed {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    margin: 0 auto;
+    justify-content: center;
+  }
+</style>

package/src/components/navigation/LeftBarItem.svelte

@@ -32,12 +32,20 @@
     expandable = false,
     expanded = $bindable(false),
     subroutes = [],
+    badge = null,
+    preload = true,
+    variant = 'default',
     onclick = null,
     isActiveRoute = () => false,
     class: className = '',
+    leading,
+    trailing,
     children
   } = $props();
 
+  // Preload attribute for SvelteKit
+  const preloadAttr = preload ? 'hover' : undefined;
+
   const leftbar = getContext('leftbar');
   const isCollapsed = $derived(leftbar?.collapsed ?? false);
 
@@ -67,13 +75,20 @@
       class="nav-item {className}"
       class:active
       class:collapsed={isCollapsed}
+      data-variant={variant}
       title={isCollapsed ? label : null}
+      data-sveltekit-preload-data={preloadAttr}
     >
+      {@render leading?.()}
       {#if Icon}
         <Icon size={18} class="nav-icon" />
       {/if}
       {#if !isCollapsed}
         <span class="nav-label" transition:fade={{ duration: 150 }}>{label}</span>
+        {#if badge != null}
+          <span class="nav-badge" transition:fade={{ duration: 150 }}>{badge}</span>
+        {/if}
+        {@render trailing?.()}
       {/if}
       {@render children?.()}
     </a>
@@ -81,16 +96,22 @@
     <button
       class="nav-item expandable {className}"
       class:collapsed={isCollapsed}
+      data-variant={variant}
       onclick={handleClick}
       onmouseenter={handleMouseEnter}
       onmouseleave={handleMouseLeave}
       title={isCollapsed ? label : null}
     >
+      {@render leading?.()}
       {#if Icon}
         <Icon size={18} class="nav-icon" />
       {/if}
       {#if !isCollapsed}
         <span class="nav-label" transition:fade={{ duration: 150 }}>{label}</span>
+        {#if badge != null}
+          <span class="nav-badge" transition:fade={{ duration: 150 }}>{badge}</span>
+        {/if}
+        {@render trailing?.()}
         <span transition:fade={{ duration: 150 }}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
@@ -109,6 +130,7 @@
           </svg>
         </span>
       {/if}
+      {@render children?.()}
     </button>
     {#if expanded && !isCollapsed && subroutes.length > 0}
       <ul class="subnav-list" transition:slide={{ duration: 200, easing: cubicOut }}>
@@ -130,14 +152,20 @@
       class="nav-item {className}"
       class:active
       class:collapsed={isCollapsed}
+      data-variant={variant}
       onclick={handleClick}
       title={isCollapsed ? label : null}
     >
+      {@render leading?.()}
       {#if Icon}
         <Icon size={18} class="nav-icon" />
       {/if}
       {#if !isCollapsed}
         <span class="nav-label" transition:fade={{ duration: 150 }}>{label}</span>
+        {#if badge != null}
+          <span class="nav-badge" transition:fade={{ duration: 150 }}>{badge}</span>
+        {/if}
+        {@render trailing?.()}
       {/if}
       {@render children?.()}
     </button>
@@ -217,6 +245,16 @@
     overflow: hidden;
   }
 
+  .nav-badge {
+    padding: 0.125rem 0.375rem;
+    font-size: 0.625rem;
+    font-weight: 600;
+    background-color: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+    color: var(--color-base0D);
+    border-radius: 9999px;
+    flex-shrink: 0;
+  }
+
   .expand-icon {
     color: var(--color-base05);
     flex-shrink: 0;
@@ -267,4 +305,44 @@
     font-weight: 500;
     background-color: color-mix(in srgb, var(--color-base0D) 15%, transparent);
   }
+
+  /* Variants */
+  .nav-item[data-variant="warning"] {
+    color: var(--color-base0A);
+  }
+
+  .nav-item[data-variant="warning"]:hover {
+    color: var(--color-base0A);
+    background-color: color-mix(in srgb, var(--color-base0A) 10%, transparent);
+  }
+
+  .nav-item[data-variant="warning"] :global(svg) {
+    color: var(--color-base0A);
+  }
+
+  .nav-item[data-variant="danger"] {
+    color: var(--color-base08);
+  }
+
+  .nav-item[data-variant="danger"]:hover {
+    color: var(--color-base08);
+    background-color: color-mix(in srgb, var(--color-base08) 10%, transparent);
+  }
+
+  .nav-item[data-variant="danger"] :global(svg) {
+    color: var(--color-base08);
+  }
+
+  .nav-item[data-variant="success"] {
+    color: var(--color-base0B);
+  }
+
+  .nav-item[data-variant="success"]:hover {
+    color: var(--color-base0B);
+    background-color: color-mix(in srgb, var(--color-base0B) 10%, transparent);
+  }
+
+  .nav-item[data-variant="success"] :global(svg) {
+    color: var(--color-base0B);
+  }
 </style>

package/src/components/navigation/LeftBarToggle.svelte

@@ -73,7 +73,7 @@
     background: transparent;
     border: none;
     cursor: pointer;
-    font: inherit;
+    font-family: inherit;
   }
 
   .collapse-toggle:hover {

package/src/components/navigation/index.js

@@ -4,7 +4,15 @@
  * Reusable navigation components including sidebars, tabs, and accordions.
  */
 
-// Sidebar Components
+// LeftBar Components (simpler, lightweight)
+export { default as LeftBar } from './LeftBar.svelte';
+export { default as LeftBarItem } from './LeftBarItem.svelte';
+export { default as LeftBarSection } from './LeftBarSection.svelte';
+export { default as LeftBarGroup } from './LeftBarGroup.svelte';
+export { default as LeftBarPopover } from './LeftBarPopover.svelte';
+export { default as LeftBarToggle } from './LeftBarToggle.svelte';
+
+// Sidebar Components (feature-rich)
 export { default as Sidebar } from './Sidebar.svelte';
 export { default as SidebarSection } from './SidebarSection.svelte';
 export { default as SidebarItem } from './SidebarItem.svelte';

package/src/index.js

@@ -120,6 +120,7 @@ export { default as WorkspaceMenu } from './components/navigation/WorkspaceMenu.
 export { default as LeftBar } from './components/navigation/LeftBar.svelte';
 export { default as LeftBarSection } from './components/navigation/LeftBarSection.svelte';
 export { default as LeftBarItem } from './components/navigation/LeftBarItem.svelte';
+export { default as LeftBarGroup } from './components/navigation/LeftBarGroup.svelte';
 export { default as LeftBarToggle } from './components/navigation/LeftBarToggle.svelte';
 export { default as LeftBarPopover } from './components/navigation/LeftBarPopover.svelte';
 export { default as DropdownContainer } from './components/navigation/DropdownContainer.svelte';
@@ -164,6 +165,7 @@ export {
 export {
   NavigationState,
   createNavigationState,
+  createActiveChecker,
   NAVIGATION_CONTEXT_KEY
 } from './utils/navigation.svelte.js';
 

package/src/utils/navigation.svelte.js

@@ -420,4 +420,36 @@ export function createNavigationState(options = {}) {
 /**
  * Navigation context key for Svelte context
  */
-export const NAVIGATION_CONTEXT_KEY = 'navigation-state';
+export const NAVIGATION_CONTEXT_KEY = 'navigation-state';
+
+/**
+ * Create an active route checker function for use with LeftBar/Sidebar components.
+ * Works with SvelteKit's page store or any path string.
+ *
+ * @example With SvelteKit page store
+ * import { page } from '$app/stores';
+ * const isActive = createActiveChecker(() => $page.url.pathname);
+ *
+ * <LeftBarItem active={isActive('/dashboard')} />
+ * <LeftBarItem active={isActive('/settings', 'exact')} />
+ *
+ * @example With reactive path
+ * let currentPath = $state('/dashboard');
+ * const isActive = createActiveChecker(() => currentPath);
+ *
+ * @param {() => string} getPathname - Function that returns current pathname
+ * @returns {(path: string, matchType?: 'prefix' | 'exact') => boolean}
+ */
+export function createActiveChecker(getPathname) {
+  return function isActive(path, matchType = 'prefix') {
+    const currentPath = getPathname();
+    // Normalize paths by removing trailing slashes
+    const normalizedCurrent = currentPath.replace(/\/$/, '') || '/';
+    const normalizedPath = path.replace(/\/$/, '') || '/';
+
+    if (matchType === 'exact') {
+      return normalizedCurrent === normalizedPath;
+    }
+    return normalizedCurrent.startsWith(normalizedPath);
+  };
+}