zabi-components 5.0.22 → 6.0.0

package/dist/organisms/SidebarNavigation.svelte

@@ -41,12 +41,18 @@
         onLogout?: () => void;
         onThemeToggle?: (nextIsLightMode: boolean) => void;
         onEmptyStateAction?: () => void;
+        /**
+         * Highlights a primary (e.g. category) row when the current route is a child
+         * of that section, while `currentPath` points at the leaf (e.g. a component).
+         */
+        activePrimaryHref?: string;
     }
 
     let {
         mode = "expanded",
         items = [],
         currentPath = "",
+        activePrimaryHref = "",
         ariaLabel = "Sidebar navigation",
         className = "",
         showProfile = true,
@@ -81,17 +87,31 @@
     const secondaryItems = $derived(
         items.filter((item) => item.group === "secondary"),
     );
+    function itemMatchesSearch(item: SidebarNavigationItem): boolean {
+        return item.label.toLowerCase().includes(normalizedSearchTerm);
+    }
+
+    /** Keep the current (and section) row visible even when it does not match the filter. */
+    function itemPinnedBySelection(item: SidebarNavigationItem): boolean {
+        if (currentPath === item.href) {
+            return true;
+        }
+        return Boolean(activePrimaryHref) && item.href === activePrimaryHref;
+    }
+
     const filteredPrimaryItems = $derived(
         searchMode === "input" && normalizedSearchTerm
-            ? primaryItems.filter((item) =>
-                  item.label.toLowerCase().includes(normalizedSearchTerm),
+            ? primaryItems.filter(
+                  (item) =>
+                      itemMatchesSearch(item) || itemPinnedBySelection(item),
               )
             : primaryItems,
     );
     const filteredSecondaryItems = $derived(
         searchMode === "input" && normalizedSearchTerm
-            ? secondaryItems.filter((item) =>
-                  item.label.toLowerCase().includes(normalizedSearchTerm),
+            ? secondaryItems.filter(
+                  (item) =>
+                      itemMatchesSearch(item) || itemPinnedBySelection(item),
               )
             : secondaryItems,
     );
@@ -103,7 +123,7 @@
         const widthClass = isCollapsed ? "w-[104px]" : "w-[266px]";
         const surfaceClasses = "bg-background border-border text-headline";
         const baseClasses =
-            "h-full min-h-[640px] border-r flex flex-col justify-between px-6 py-6";
+            "flex h-full min-h-0 max-h-full flex-col overflow-hidden border-r py-6";
 
         return `${baseClasses} ${widthClass} ${surfaceClasses} ${className}`.trim();
     });
@@ -112,16 +132,20 @@
         "size-14 rounded-2xl bg-action-primary text-action-primary flex items-center justify-center font-semibold text-base shrink-0",
     );
 
+    /** Search trigger (collapsed icon strip or button mode): matches nav item interaction tokens. */
+    const searchControlStates =
+        "text-nav-menu-item outline-none transition-colors duration-150 hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
+
     const searchButtonClasses = $derived(
-        "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center justify-center px-0 py-2.5 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0",
+        `flex min-h-11 w-full cursor-pointer items-center justify-center rounded-2xl border border-input-border bg-input px-0 py-2.5 ${searchControlStates}`,
     );
     const searchTriggerClasses = $derived.by(() => {
         return isCollapsed
             ? searchButtonClasses
-            : "w-full rounded-2xl bg-input transition-colors duration-150 flex min-h-11 items-center gap-3 px-4 py-2.5 text-left focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+            : `flex min-h-11 w-full cursor-pointer items-center gap-3 rounded-2xl border border-input-border bg-input px-4 py-2.5 text-left ${searchControlStates}`;
     });
     const iconContainerClasses = $derived(
-        "flex size-6 shrink-0 items-center justify-center leading-none",
+        "flex size-6 shrink-0 items-center justify-center leading-none text-current",
     );
     const shouldRenderSearchButton = $derived(
         isCollapsed || searchMode === "button" || Boolean(onSearchClick),
@@ -132,23 +156,26 @@
     }
 
     function getNavItemClasses(item: SidebarNavigationItem): string {
-        const isActive = currentPath === item.href;
-        const baseClasses =
-            "w-full rounded-lg transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+        const isActive =
+            currentPath === item.href ||
+            (Boolean(activePrimaryHref) && item.href === activePrimaryHref);
         const layoutClasses = isCollapsed
             ? "flex min-h-11 items-center justify-center px-0 py-2.5"
             : "flex min-h-11 items-center gap-3 px-4 py-2.5";
+        const structural =
+            "w-full cursor-pointer rounded-lg no-underline transition-colors duration-150 outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
 
         if (isActive) {
-            return `${baseClasses} ${layoutClasses} bg-action-primary-subtle text-headline`;
+            /* Current page: keep active surface on hover (do not apply inactive hover bg). */
+            return `${structural} ${layoutClasses} bg-nav-menu-active text-inherit hover:bg-nav-menu-active hover:text-inherit active:opacity-90`;
         }
 
-        return `${baseClasses} ${layoutClasses} text-description hover:bg-base-50 hover:text-headline`;
+        return `${structural} ${layoutClasses} text-nav-menu-item hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200`;
     }
 
     function getControlButtonClasses(): string {
         const baseClasses =
-            "w-full rounded-lg text-description hover:text-headline hover:bg-base-50 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+            "w-full cursor-pointer rounded-lg text-nav-menu-item transition-colors duration-150 outline-none hover:bg-nav-menu-hover hover:text-nav-menu-item-hover active:bg-base-200 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus";
         const layoutClasses = isCollapsed
             ? "flex min-h-11 items-center justify-center px-0 py-2.5"
             : "flex min-h-11 items-center gap-3 px-4 py-2.5";
@@ -202,10 +229,22 @@
         }
         return null;
     }
+
+    function getAriaCurrent(
+        item: SidebarNavigationItem,
+    ): "page" | "location" | undefined {
+        if (currentPath === item.href) {
+            return "page";
+        }
+        if (activePrimaryHref && item.href === activePrimaryHref) {
+            return "location";
+        }
+        return undefined;
+    }
 </script>
 
 <nav class={containerClasses} aria-label={ariaLabel} {...restProps}>
-    <div class="flex w-full flex-col gap-11">
+    <div class="flex w-full shrink-0 flex-col gap-6 px-2">
         {#if showProfile}
             <div class="flex w-full items-center gap-3">
                 <div class={avatarClasses} aria-hidden="true">
@@ -226,53 +265,101 @@
             </div>
         {/if}
 
-        <div class="flex w-full flex-col gap-6">
-            {#if showSearch}
-                {#if shouldRenderSearchButton}
-                    <button
-                        type="button"
-                        class={searchTriggerClasses}
-                        onclick={handleSearchClick}
-                        aria-label={searchPlaceholder}
+        {#if showSearch}
+            {#if shouldRenderSearchButton}
+                <button
+                    type="button"
+                    class={searchTriggerClasses}
+                    onclick={handleSearchClick}
+                    aria-label={searchPlaceholder}
+                >
+                    <span
+                        class="truncate text-base text-inherit transition-colors"
                     >
-                        <span class="truncate text-base {getTextToneClass(true)}">
-                            {searchValue || searchPlaceholder}
-                        </span>
-                    </button>
-                {:else}
-                    <div class="relative w-full">
-                        <span
-                            class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 z-10"
-                            aria-hidden="true"
-                        >
-                            <Search size={20} class={getTextToneClass(true)} />
-                        </span>
-                        <Input
-                            type="search"
-                            bind:value={searchValue}
-                            placeholder={searchPlaceholder}
-                            aria-label={searchPlaceholder}
-                            class="w-full min-w-0 rounded-2xl pl-12"
-                        />
-                    </div>
-                {/if}
+                        {searchValue || searchPlaceholder}
+                    </span>
+                </button>
+            {:else}
+                <div class="relative w-full">
+                    <span
+                        class="pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2"
+                        aria-hidden="true"
+                    >
+                        <Search size={20} class={getTextToneClass(true)} />
+                    </span>
+                    <Input
+                        type="search"
+                        bind:value={searchValue}
+                        placeholder={searchPlaceholder}
+                        aria-label={searchPlaceholder}
+                        class="w-full min-w-0 rounded-2xl pl-12"
+                    />
+                </div>
             {/if}
+        {/if}
+    </div>
+
+    <div
+        class="flex min-h-0 flex-1 w-full flex-col gap-6 overflow-y-auto overflow-x-hidden overscroll-y-contain py-1"
+        role="region"
+        aria-label="Navigation links"
+    >
+        {#if hasFilteredItems}
+            <ul
+                class="flex w-full flex-col gap-2 px-2"
+                aria-label="Primary navigation"
+            >
+                {#each filteredPrimaryItems as item (item.id)}
+                    {@const Icon = item.icon}
+                    <li>
+                        <a
+                            href={item.href}
+                            class={getNavItemClasses(item)}
+                            onclick={(event) => handleNavigate(item, event)}
+                            aria-current={getAriaCurrent(item)}
+                            aria-label={isCollapsed ? item.label : undefined}
+                        >
+                            {#if Icon}
+                                <span
+                                    class={iconContainerClasses}
+                                    aria-hidden="true"
+                                >
+                                    <Icon size={20} />
+                                </span>
+                            {/if}
+                            {#if !isCollapsed}
+                                <span
+                                    class="text-base leading-snug text-inherit"
+                                    >{item.label}</span
+                                >
+                            {/if}
+                            {#if !isCollapsed && getItemBadgeText(item) !== null}
+                                <span class="ml-auto">
+                                    <Badge
+                                        variant="default"
+                                        size="sm"
+                                        text={getItemBadgeText(item) ?? ""}
+                                    />
+                                </span>
+                            {/if}
+                        </a>
+                    </li>
+                {/each}
+            </ul>
 
-            {#if hasFilteredItems}
+            {#if filteredSecondaryItems.length > 0}
                 <ul
-                    class="flex w-full flex-col gap-2"
-                    aria-label="Primary navigation"
+                    class="flex w-full flex-col gap-3 px-2"
+                    aria-label="Secondary navigation"
                 >
-                    {#each filteredPrimaryItems as item (item.id)}
+                    {#each filteredSecondaryItems as item (item.id)}
                         {@const Icon = item.icon}
                         <li>
                             <a
                                 href={item.href}
                                 class={getNavItemClasses(item)}
                                 onclick={(event) => handleNavigate(item, event)}
-                                aria-current={currentPath === item.href
-                                    ? "page"
-                                    : undefined}
+                                aria-current={getAriaCurrent(item)}
                                 aria-label={isCollapsed
                                     ? item.label
                                     : undefined}
@@ -286,135 +373,92 @@
                                     </span>
                                 {/if}
                                 {#if !isCollapsed}
-                                    <span class="text-base leading-snug"
+                                    <span
+                                        class="text-base leading-snug text-inherit"
                                         >{item.label}</span
                                     >
                                 {/if}
-                                {#if !isCollapsed && getItemBadgeText(item) !== null}
-                                    <span class="ml-auto">
-                                        <Badge
-                                            variant="default"
-                                            size="sm"
-                                            text={getItemBadgeText(item) ?? ""}
-                                        />
-                                    </span>
-                                {/if}
                             </a>
                         </li>
                     {/each}
                 </ul>
-
-                {#if filteredSecondaryItems.length > 0}
-                    <ul
-                        class="flex w-full flex-col gap-3"
-                        aria-label="Secondary navigation"
-                    >
-                        {#each filteredSecondaryItems as item (item.id)}
-                            {@const Icon = item.icon}
-                            <li>
-                                <a
-                                    href={item.href}
-                                    class={getNavItemClasses(item)}
-                                    onclick={(event) =>
-                                        handleNavigate(item, event)}
-                                    aria-current={currentPath === item.href
-                                        ? "page"
-                                        : undefined}
-                                    aria-label={isCollapsed
-                                        ? item.label
-                                        : undefined}
-                                >
-                                    {#if Icon}
-                                        <span
-                                            class={iconContainerClasses}
-                                            aria-hidden="true"
-                                        >
-                                            <Icon size={20} />
-                                        </span>
-                                    {/if}
-                                    {#if !isCollapsed}
-                                        <span class="text-base leading-snug"
-                                            >{item.label}</span
-                                        >
-                                    {/if}
-                                </a>
-                            </li>
-                        {/each}
-                    </ul>
-                {/if}
-            {:else}
-                <div
-                    class="rounded-2xl border border-border border-dashed bg-base-50 px-4 py-5"
-                >
-                    <h3 class="text-base font-semibold {getTextToneClass()}">
-                        {normalizedSearchTerm
-                        && searchMode === "input"
-                            ? "No matching navigation items"
-                            : emptyStateTitle}
-                    </h3>
-                    <p class="mt-1 text-sm {getTextToneClass(true)}">
-                        {normalizedSearchTerm
-                        && searchMode === "input"
-                            ? `No results found for "${searchValue}". Try another keyword.`
-                            : emptyStateDescription}
-                    </p>
-                    {#if !(normalizedSearchTerm && searchMode === "input")}
-                        <button
-                            type="button"
-                            class="mt-4 inline-flex min-h-11 items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary hover:bg-action-primary-hover focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
-                            onclick={handleEmptyStateAction}
-                        >
-                            {emptyStateActionLabel}
-                        </button>
-                    {/if}
-                </div>
             {/if}
-        </div>
-    </div>
-
-    <div class="flex w-full flex-col gap-2">
-        {#if showLogout}
-            <button
-                type="button"
-                class={getControlButtonClasses()}
-                onclick={handleLogout}
+        {:else}
+            <div
+                class="rounded-2xl border border-border border-dashed bg-base-50 px-4 py-5"
             >
-                <span class={iconContainerClasses} aria-hidden="true">
-                    <LogOut size={20} />
-                </span>
-                {#if !isCollapsed}
-                    <span class="text-base">{logoutLabel}</span>
+                <h3 class="text-base font-semibold {getTextToneClass()}">
+                    {normalizedSearchTerm && searchMode === "input"
+                        ? "No matching navigation items"
+                        : emptyStateTitle}
+                </h3>
+                <p class="mt-1 text-sm {getTextToneClass(true)}">
+                    {normalizedSearchTerm && searchMode === "input"
+                        ? `No results found for "${searchValue}". Try another keyword.`
+                        : emptyStateDescription}
+                </p>
+                {#if !(normalizedSearchTerm && searchMode === "input")}
+                    <button
+                        type="button"
+                        class="mt-4 inline-flex min-h-11 cursor-pointer items-center rounded-lg bg-action-primary px-3 py-2 text-sm text-action-primary outline-none transition-colors hover:bg-action-primary-hover focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus"
+                        onclick={handleEmptyStateAction}
+                    >
+                        {emptyStateActionLabel}
+                    </button>
                 {/if}
-            </button>
+            </div>
         {/if}
+    </div>
 
-        {#if showThemeToggle}
-            <div class={themeToggleContainerClasses}>
+    {#if showLogout || showThemeToggle}
+        <div
+            class="flex w-full shrink-0 flex-col gap-2 border-t border-border pt-4 px-2"
+        >
+            {#if showLogout}
                 <button
                     type="button"
-                    class="inline-flex h-8 w-14 items-center rounded-2xl p-1 transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0 {isLightMode
-                        ? 'bg-action-primary'
-                        : 'bg-base-200'}"
-                    onclick={handleThemeToggle}
-                    role="switch"
-                    aria-checked={isLightMode}
-                    aria-label={isLightMode
-                        ? "Switch to dark mode"
-                        : "Switch to light mode"}
+                    class={getControlButtonClasses()}
+                    onclick={handleLogout}
                 >
-                    <span
-                        class="flex h-6 w-6 items-center justify-center rounded-xl leading-none shadow-sm transition-transform duration-150 {isLightMode
-                            ? 'translate-x-6 bg-base-900 text-action-primary'
-                            : 'translate-x-0 bg-base-900 text-base-50'}"
-                    >
-                        {#if isLightMode}
-                            <Sun size={14} />
-                        {:else}
-                            <Moon size={14} />
-                        {/if}
+                    <span class={iconContainerClasses} aria-hidden="true">
+                        <LogOut size={20} />
                     </span>
+                    {#if !isCollapsed}
+                        <span class="text-base text-inherit">{logoutLabel}</span
+                        >
+                    {/if}
                 </button>
-            </div>
-        {/if}
-    </div>
+            {/if}
+
+            {#if showThemeToggle}
+                <div class={themeToggleContainerClasses}>
+                    <button
+                        type="button"
+                        class="inline-flex h-8 w-14 cursor-pointer items-center rounded-2xl p-1 outline-none transition-colors duration-150 hover:opacity-95 active:opacity-90 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-nav-menu-focus {isLightMode
+                            ? 'bg-action-primary'
+                            : 'bg-base-200'}"
+                        onclick={handleThemeToggle}
+                        role="switch"
+                        aria-checked={isLightMode}
+                        title={lightModeLabel}
+                        aria-label={isLightMode
+                            ? "Switch to dark mode"
+                            : "Switch to light mode"}
+                    >
+                        <span
+                            class="flex h-6 w-6 items-center justify-center rounded-xl leading-none shadow-sm transition-transform duration-150 active:scale-95 {isLightMode
+                                ? 'translate-x-6 bg-base-900 text-action-primary'
+                                : 'translate-x-0 bg-base-900 text-base-50'}"
+                        >
+                            {#if isLightMode}
+                                <Sun size={14} />
+                            {:else}
+                                <Moon size={14} />
+                            {/if}
+                        </span>
+                    </button>
+                </div>
+            {/if}
+        </div>
+    {/if}
 </nav>

package/dist/organisms/SidebarNavigation.svelte.d.ts

@@ -38,6 +38,11 @@ interface Props {
     onLogout?: () => void;
     onThemeToggle?: (nextIsLightMode: boolean) => void;
     onEmptyStateAction?: () => void;
+    /**
+     * Highlights a primary (e.g. category) row when the current route is a child
+     * of that section, while `currentPath` points at the leaf (e.g. a component).
+     */
+    activePrimaryHref?: string;
 }
 declare const SidebarNavigation: Component<Props, {}, "searchValue" | "isLightMode">;
 type SidebarNavigation = ReturnType<typeof SidebarNavigation>;

package/dist/organisms/{SidebarProjectPanel.svelte → SidebarPanel.svelte}

@@ -4,7 +4,7 @@
     import { Search, X } from "@lucide/svelte";
     import type { Component } from "svelte";
 
-    export interface SidebarProjectPanelItem {
+    export interface SidebarPanelItem {
         id: string;
         label: string;
         icon?: Component<{ size?: number; class?: string }>;
@@ -21,30 +21,30 @@
         showSearch?: boolean;
         searchPlaceholder?: string;
         searchValue?: string;
-        items?: SidebarProjectPanelItem[];
+        items?: SidebarPanelItem[];
         selectedItemId?: string;
         emptyStateTitle?: string;
         emptyStateDescription?: string;
         selectLabel?: string;
         closeLabel?: string;
-        onSelect?: (item: SidebarProjectPanelItem) => void;
+        onSelect?: (item: SidebarPanelItem) => void;
         onClose?: () => void;
     }
 
     let {
         className = "",
         widthClass = "w-80",
-        ariaLabel = "Project picker panel",
-        title = "Projects",
-        subtitle = "Choose a project to continue",
+        ariaLabel = "Picker panel",
+        title = "Items",
+        subtitle = "Choose an item to continue",
         showSearch = true,
-        searchPlaceholder = "Search projects...",
+        searchPlaceholder = "Search...",
         searchValue = $bindable(""),
         items = [],
         selectedItemId = $bindable(""),
-        emptyStateTitle = "No projects found",
-        emptyStateDescription = "Try a different keyword or create a new project.",
-        selectLabel = "Select project",
+        emptyStateTitle = "No matches",
+        emptyStateDescription = "Try a different keyword.",
+        selectLabel = "Select item",
         closeLabel = "Close panel",
         onSelect,
         onClose,
@@ -68,14 +68,14 @@
     function getItemClasses(itemId: string): string {
         const isActive = selectedItemId === itemId;
         const baseClasses =
-            "w-full rounded-xl px-3 py-3 text-left transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
+            "w-full cursor-pointer rounded-xl px-3 py-3 text-left transition-colors duration-150 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0";
         if (isActive) {
             return `${baseClasses} bg-action-primary-subtle text-headline`;
         }
         return `${baseClasses} hover:bg-base-50 text-description`;
     }
 
-    function handleSelect(item: SidebarProjectPanelItem): void {
+    function handleSelect(item: SidebarPanelItem): void {
         selectedItemId = item.id;
         if (onSelect) {
             onSelect(item);
@@ -97,7 +97,7 @@
         </div>
         <button
             type="button"
-            class="inline-flex size-8 shrink-0 items-center justify-center rounded-md text-description hover:bg-base-50 hover:text-headline focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
+            class="inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-description hover:bg-base-50 hover:text-headline focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-0"
             aria-label={closeLabel}
             onclick={handleClose}
         >
@@ -124,14 +124,15 @@
     {/if}
 
     {#if filteredItems.length > 0}
-        <ul class="space-y-2" aria-label={selectLabel}>
+        <ul class="space-y-2" role="listbox" aria-label={selectLabel}>
             {#each filteredItems as item (item.id)}
-                <li>
+                <li role="presentation">
                     <button
                         type="button"
+                        role="option"
                         class={getItemClasses(item.id)}
                         onclick={() => handleSelect(item)}
-                        aria-pressed={selectedItemId === item.id}
+                        aria-selected={selectedItemId === item.id}
                     >
                         <span class="flex items-center justify-between gap-3">
                             <span class="flex min-w-0 items-start gap-2">
@@ -171,4 +172,4 @@
             <p class="mt-1 text-sm text-description">{emptyStateDescription}</p>
         </div>
     {/if}
-</aside>
+</aside>

package/dist/organisms/{SidebarProjectPanel.svelte.d.ts → SidebarPanel.svelte.d.ts}

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-export interface SidebarProjectPanelItem {
+export interface SidebarPanelItem {
     id: string;
     label: string;
     icon?: Component<{
@@ -18,15 +18,15 @@ interface Props {
     showSearch?: boolean;
     searchPlaceholder?: string;
     searchValue?: string;
-    items?: SidebarProjectPanelItem[];
+    items?: SidebarPanelItem[];
     selectedItemId?: string;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     selectLabel?: string;
     closeLabel?: string;
-    onSelect?: (item: SidebarProjectPanelItem) => void;
+    onSelect?: (item: SidebarPanelItem) => void;
     onClose?: () => void;
 }
-declare const SidebarProjectPanel: Component<Props, {}, "searchValue" | "selectedItemId">;
-type SidebarProjectPanel = ReturnType<typeof SidebarProjectPanel>;
-export default SidebarProjectPanel;
+declare const SidebarPanel: Component<Props, {}, "searchValue" | "selectedItemId">;
+type SidebarPanel = ReturnType<typeof SidebarPanel>;
+export default SidebarPanel;

package/dist/organisms/index.d.ts

@@ -1,4 +1,3 @@
 export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';

package/dist/organisms/index.js

@@ -1,4 +1,3 @@
 export { default as Navbar } from './Navbar.svelte';
-export { default as Navigation } from './Navigation.svelte';
 export { default as SidebarNavigation } from './SidebarNavigation.svelte';
-export { default as SidebarProjectPanel } from './SidebarProjectPanel.svelte';
+export { default as SidebarPanel } from './SidebarPanel.svelte';