@pascal-app/editor 0.8.0 → 0.9.2

package/src/components/ui/primitives/shortcut-token.tsx

@@ -22,6 +22,17 @@ const MOUSE_SHORTCUTS = {
   },
 } as const
 
+// The platform-agnostic command modifier. Both Cmd and Ctrl bind the action; we
+// render the symbol for the *current* device so the hint reads native (⌘ on Mac,
+// Ctrl elsewhere) without implying only one of them works.
+const COMMAND_VALUES = new Set(['Cmd/Ctrl', 'Cmd', 'Command', 'Meta'])
+
+// Resolved once on the client at module load — the editor HUD is client-only, so
+// there's no server render to mismatch against. `navigator.platform` is enough
+// here and matches the detection used elsewhere (floorplan rotate hint).
+const IS_MAC =
+  typeof navigator !== 'undefined' && navigator.platform.toUpperCase().includes('MAC')
+
 type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
   value: string
   displayValue?: string
@@ -30,16 +41,23 @@ type ShortcutTokenProps = React.ComponentProps<'kbd'> & {
 function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTokenProps) {
   const mouseShortcut =
     value in MOUSE_SHORTCUTS ? MOUSE_SHORTCUTS[value as keyof typeof MOUSE_SHORTCUTS] : null
+  const isCommand = COMMAND_VALUES.has(value)
+  const isShift = value === 'Shift'
+  const commandDisplay = IS_MAC ? '⌘' : 'Ctrl'
+  const commandLabel = IS_MAC ? 'Command' : 'Control'
 
   return (
     <kbd
-      aria-label={mouseShortcut?.label ?? displayValue ?? value}
+      aria-label={
+        mouseShortcut?.label ??
+        (isCommand ? commandLabel : isShift ? 'Shift' : (displayValue ?? value))
+      }
       className={cn(
         'inline-flex h-6 items-center rounded border border-border bg-muted px-2 font-medium font-mono text-[11px] text-muted-foreground',
-        mouseShortcut && 'justify-center px-1.5',
+        (mouseShortcut || isShift) && 'justify-center px-1.5',
         className,
       )}
-      title={mouseShortcut?.label ?? value}
+      title={mouseShortcut?.label ?? (isCommand ? commandLabel : isShift ? 'Shift' : value)}
       {...props}
     >
       {mouseShortcut ? (
@@ -54,6 +72,24 @@ function ShortcutToken({ className, displayValue, value, ...props }: ShortcutTok
           />
           <span className="sr-only">{mouseShortcut.label}</span>
         </>
+      ) : isShift ? (
+        // Icon rather than the ⇧ text glyph — the font renders the glyph's
+        // crossbar too high to read as the shift key symbol.
+        <>
+          <Icon
+            aria-hidden="true"
+            className="shrink-0"
+            color="currentColor"
+            height={13}
+            icon="ph:arrow-fat-up"
+            width={13}
+          />
+          <span className="sr-only">Shift</span>
+        </>
+      ) : isCommand ? (
+        // The ⌘ glyph reads small next to letters at the same font size, so bump
+        // it up a touch on Mac. "Ctrl" stays at the token's normal size.
+        <span className={IS_MAC ? 'text-[13px] leading-none' : undefined}>{commandDisplay}</span>
       ) : (
         (displayValue ?? value)
       )}

package/src/components/ui/primitives/sidebar.tsx

@@ -63,6 +63,7 @@ export const useSidebarStore = create<SidebarStore>()(
     {
       name: 'sidebar-preferences',
       partialize: (state) => ({ width: state.width, isCollapsed: state.isCollapsed }),
+      skipHydration: true,
     },
   ),
 )

package/src/components/ui/scene-loader.tsx

@@ -17,15 +17,13 @@ interface SceneLoaderProps {
 }
 
 export function SceneLoader({ className, fullScreen = false }: SceneLoaderProps) {
-  const [loaderClass, setLoaderClass] = useState<string | null>(null)
+  const [loaderClass, setLoaderClass] = useState(LOADERS[0]!)
 
   useEffect(() => {
     // Pick a random loader on mount
     setLoaderClass(LOADERS[Math.floor(Math.random() * LOADERS.length)] ?? LOADERS[0]!)
   }, [])
 
-  if (!loaderClass) return null
-
   return (
     <div
       className={cn(

package/src/components/ui/sidebar/app-sidebar.tsx

@@ -16,6 +16,7 @@ import useEditor from './../../../store/use-editor'
 import { type ExtraPanel, IconRail } from './icon-rail'
 import { SettingsPanel, type SettingsPanelProps } from './panels/settings-panel'
 import { SitePanel, type SitePanelProps } from './panels/site-panel'
+import { useHostPanels } from './use-plugin-panels'
 
 interface AppSidebarProps {
   appMenuButton?: ReactNode
@@ -31,9 +32,12 @@ export function AppSidebar({
   sidebarTop,
   settingsPanelProps,
   sitePanelProps,
-  extraPanels,
+  extraPanels: hostExtraPanels,
   commandPaletteEmptyAction,
 }: AppSidebarProps) {
+  // Host-provided panels merged with registered host panels — the icon rail and
+  // content area treat both identically.
+  const extraPanels = useHostPanels(hostExtraPanels)
   const activePanel = useEditor((s) => s.activeSidebarPanel)
   const setActivePanel = useEditor((s) => s.setActiveSidebarPanel)
   const hasActivePanel =

package/src/components/ui/sidebar/icon-rail.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { Plus } from 'lucide-react'
 import type { ComponentType, ReactNode } from 'react'
 import {
   Tooltip,
@@ -10,7 +11,13 @@ import { cn } from './../../../lib/utils'
 
 export type PanelId = string
 
-export type ExtraPanel = { id: string; icon: ReactNode; label: string; component: ComponentType }
+export type ExtraPanel = {
+  id: string
+  icon: ReactNode
+  label: string
+  component: ComponentType
+  pluginId?: string
+}
 
 interface IconRailProps {
   activePanel: PanelId
@@ -22,13 +29,13 @@ interface IconRailProps {
 
 const sitePanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'site',
-  iconSrc: '/icons/level.png',
+  iconSrc: '/icons/level.webp',
   label: 'Site',
 }
 
 const settingsPanel: { id: PanelId; iconSrc: string; label: string } = {
   id: 'settings',
-  iconSrc: '/icons/settings.png',
+  iconSrc: '/icons/settings.webp',
   label: 'Settings',
 }
 
@@ -41,6 +48,38 @@ export function IconRail({
   extraPanels,
   className,
 }: IconRailProps) {
+  const regularExtraPanels = extraPanels?.filter((panel) => !panel.pluginId && panel.id !== 'plugins')
+  const pluginPanels = extraPanels?.filter((panel) => panel.pluginId)
+  const pluginsPanel = extraPanels?.find((panel) => panel.id === 'plugins')
+
+  const renderExtraPanel = (panel: ExtraPanel) => {
+    const isActive = activePanel === panel.id
+    return (
+      <Tooltip key={panel.id}>
+        <TooltipTrigger asChild>
+          <button
+            className={cn(
+              'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
+              isActive ? 'bg-accent' : 'hover:bg-accent',
+            )}
+            onClick={() => onPanelChange(panel.id)}
+            type="button"
+          >
+            <span
+              className={cn(
+                'flex h-6 w-6 items-center justify-center transition-all',
+                !isActive && 'opacity-50',
+              )}
+            >
+              {panel.id === 'plugins' ? <Plus className="h-5 w-5" /> : panel.icon}
+            </span>
+          </button>
+        </TooltipTrigger>
+        <TooltipContent side="right">{panel.label}</TooltipContent>
+      </Tooltip>
+    )
+  }
+
   return (
     <div
       className={cn(
@@ -83,34 +122,7 @@ export function IconRail({
         )
       })}
 
-      {/* Extra panels (injected between site and settings) */}
-      {extraPanels?.map((panel) => {
-        const isActive = activePanel === panel.id
-        return (
-          <Tooltip key={panel.id}>
-            <TooltipTrigger asChild>
-              <button
-                className={cn(
-                  'flex h-9 w-9 items-center justify-center rounded-lg transition-all',
-                  isActive ? 'bg-accent' : 'hover:bg-accent',
-                )}
-                onClick={() => onPanelChange(panel.id)}
-                type="button"
-              >
-                <span
-                  className={cn(
-                    'flex h-6 w-6 items-center justify-center transition-all',
-                    !isActive && 'opacity-50',
-                  )}
-                >
-                  {panel.icon}
-                </span>
-              </button>
-            </TooltipTrigger>
-            <TooltipContent side="right">{panel.label}</TooltipContent>
-          </Tooltip>
-        )
-      })}
+      {regularExtraPanels?.map(renderExtraPanel)}
 
       {/* Settings panel */}
       {[settingsPanel].map((panel) => {
@@ -140,6 +152,13 @@ export function IconRail({
           </Tooltip>
         )
       })}
+
+      {(pluginPanels?.length || pluginsPanel) && (
+        <div className="mt-1 flex w-9 flex-col items-center gap-1 border-border/70 border-t pt-2">
+          {pluginPanels?.map(renderExtraPanel)}
+          {pluginsPanel && renderExtraPanel(pluginsPanel)}
+        </div>
+      )}
     </div>
   )
 }

package/src/components/ui/sidebar/panels/items-panel/function-tree-panel.tsx

@@ -0,0 +1,263 @@
+'use client'
+
+import type { AssetInput } from '@pascal-app/core'
+import { Root as TooltipRoot } from '@radix-ui/react-tooltip'
+import NextImage from 'next/image'
+import { useMemo, useState } from 'react'
+import { triggerSFX } from '../../../../../lib/sfx-bus'
+import { cn } from '../../../../../lib/utils'
+import { ItemCatalog } from '../../../item-catalog/item-catalog'
+import {
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '../../../../../components/ui/primitives/tooltip'
+
+/** A function-axis taxonomy node, assembled into a tree by the embedder. */
+export type FunctionTreeNode = {
+  slug: string
+  name: string
+  iconUrl?: string | null
+  children: FunctionTreeNode[]
+}
+
+const SOURCE_CHIPS: Array<{ id: NonNullable<AssetInput['source']>; label: string }> = [
+  { id: 'library', label: 'Library' },
+  { id: 'community', label: 'Community' },
+  { id: 'mine', label: 'Mine' },
+]
+
+/** Every slug at or below `node`, so a non-leaf selection matches descendants. */
+function descendantSlugs(node: FunctionTreeNode): Set<string> {
+  const out = new Set<string>()
+  const walk = (n: FunctionTreeNode) => {
+    out.add(n.slug)
+    for (const child of n.children) walk(child)
+  }
+  walk(node)
+  return out
+}
+
+function itemFunctionSlugs(item: AssetInput): string[] {
+  if (item.functionTags && item.functionTags.length > 0) return item.functionTags
+  return item.category ? [item.category] : []
+}
+
+/**
+ * DB-driven hierarchical Items browse. Roots render as the category tab bar;
+ * a selected root with children exposes those children as a secondary chip
+ * row. Selecting any node shows items tagged with that node or any descendant.
+ * Library / Community / Mine narrows by source on top of the tree selection.
+ */
+export function FunctionTreePanel({
+  functionTree,
+  items,
+  onSearchChange,
+  searchResults,
+  leadingTile,
+  emptyState,
+}: {
+  functionTree: FunctionTreeNode[]
+  items?: AssetInput[]
+  onSearchChange?: (query: string) => void
+  searchResults?: AssetInput[] | null
+  leadingTile?: React.ReactNode
+  emptyState?: React.ReactNode
+}) {
+  const [activeRootSlug, setActiveRootSlug] = useState<string | null>(
+    functionTree[0]?.slug ?? null,
+  )
+  const [activeChildSlug, setActiveChildSlug] = useState<string | null>(null)
+  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>('library')
+  const [search, setSearch] = useState('')
+
+  const isServerSearch = onSearchChange !== undefined
+  const isSearchPending = isServerSearch && search.length > 0 && searchResults === null
+
+  const activeRoot = functionTree.find((n) => n.slug === activeRootSlug) ?? functionTree[0]
+  const activeNode =
+    (activeChildSlug && activeRoot?.children.find((c) => c.slug === activeChildSlug)) || activeRoot
+
+  const matchesSource = (item: AssetInput) => {
+    if (!activeSource) return true
+    const itemSource = item.source ?? 'library'
+    if (activeSource === 'mine') return itemSource === 'mine'
+    if (activeSource === 'library') return itemSource === 'library'
+    if (activeSource === 'community') {
+      if (itemSource === 'community') return true
+      if (itemSource === 'mine') return !item.isDraft
+      return false
+    }
+    return true
+  }
+
+  const treeItems = useMemo(() => {
+    const base = items ?? []
+    if (!activeNode) return base.filter(matchesSource)
+    const slugs = descendantSlugs(activeNode)
+    return base.filter(
+      (item) => matchesSource(item) && itemFunctionSlugs(item).some((s) => slugs.has(s)),
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [items, activeNode, activeSource])
+
+  const searchItems = useMemo(() => {
+    if (!(isServerSearch && search && searchResults)) return null
+    return activeSource ? searchResults.filter(matchesSource) : searchResults
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isServerSearch, search, searchResults, activeSource])
+
+  function selectRoot(slug: string) {
+    setActiveRootSlug(slug)
+    setActiveChildSlug(null)
+    setSearch('')
+    onSearchChange?.('')
+  }
+
+  return (
+    <div className="flex h-full flex-col">
+      {/* Root nodes as a category grid — icon when available, otherwise a
+          two-letter abbreviation, with the full name in a hover tooltip.
+          Mirrors the Build tab's tile grid so the two panels read the same. */}
+      <TooltipProvider delayDuration={0} disableHoverableContent>
+        <div className="grid shrink-0 grid-cols-5 gap-1.5 border-border/70 border-b p-2">
+          {functionTree.map((root) => {
+            const isActive = activeRoot?.slug === root.slug
+            return (
+              <TooltipRoot key={root.slug}>
+                <TooltipTrigger asChild>
+                  <button
+                    className={cn(
+                      'relative flex aspect-square items-center justify-center rounded-xl transition-all duration-200',
+                      isActive
+                        ? 'bg-primary/10 ring-1 ring-primary/50'
+                        : 'bg-muted/40 opacity-70 grayscale hover:bg-muted hover:opacity-100 hover:grayscale-0',
+                    )}
+                    onClick={() => {
+                      triggerSFX('sfx:menu-click')
+                      selectRoot(root.slug)
+                    }}
+                    onMouseEnter={() => triggerSFX('sfx:menu-hover')}
+                    type="button"
+                  >
+                    {root.iconUrl ? (
+                      <NextImage
+                        alt={root.name}
+                        className="size-7 object-contain"
+                        height={28}
+                        src={root.iconUrl}
+                        width={28}
+                      />
+                    ) : (
+                      <span className="font-semibold text-muted-foreground text-xs uppercase">
+                        {root.name.slice(0, 2)}
+                      </span>
+                    )}
+                  </button>
+                </TooltipTrigger>
+                <TooltipContent className="icon-grid-tooltip pointer-events-none" side="top">
+                  {root.name}
+                </TooltipContent>
+              </TooltipRoot>
+            )
+          })}
+        </div>
+      </TooltipProvider>
+
+      {/* Search + source filter */}
+      <div className="flex shrink-0 flex-col gap-2 border-border/70 border-b p-2">
+        <div className="flex items-center gap-1.5">
+          <input
+            className="w-1/2 min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none"
+            onChange={(e) => {
+              setSearch(e.target.value)
+              onSearchChange?.(e.target.value)
+            }}
+            placeholder="Search..."
+            type="text"
+            value={search}
+          />
+          <div className="flex w-1/2 min-w-0 shrink-0 rounded-lg bg-muted p-0.5">
+            {SOURCE_CHIPS.map((chip) => {
+              const isActive = activeSource === chip.id
+              return (
+                <button
+                  className={cn(
+                    'min-w-0 flex-1 truncate rounded-md px-1 py-1 text-center font-medium text-[10px] transition-colors',
+                    isActive
+                      ? 'bg-background text-foreground shadow-sm'
+                      : 'text-muted-foreground hover:text-foreground',
+                  )}
+                  key={chip.id}
+                  onClick={() => setActiveSource(isActive ? null : chip.id)}
+                  type="button"
+                >
+                  {chip.label}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
+        {/* Child nodes of the active root as a secondary chip row */}
+        {!search && activeRoot && activeRoot.children.length > 0 && (
+          <div className="flex flex-wrap gap-1">
+            <button
+              className={cn(
+                'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs transition-colors',
+                activeChildSlug === null
+                  ? 'bg-violet-500 text-white'
+                  : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
+              )}
+              onClick={() => setActiveChildSlug(null)}
+              type="button"
+            >
+              All
+            </button>
+            {activeRoot.children.map((child) => {
+              const isActive = activeChildSlug === child.slug
+              return (
+                <button
+                  className={cn(
+                    'cursor-pointer rounded-md px-2 py-0.5 font-medium text-xs capitalize transition-colors',
+                    isActive
+                      ? 'bg-violet-500 text-white'
+                      : 'bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground',
+                  )}
+                  key={child.slug}
+                  onClick={() => setActiveChildSlug(isActive ? null : child.slug)}
+                  type="button"
+                >
+                  {child.name}
+                </button>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Item grid */}
+      <div className="min-h-0 flex-1 overflow-y-auto p-3">
+        {isSearchPending ? (
+          <div className="flex h-full items-center justify-center">
+            <div className="size-5 animate-spin rounded-full border-2 border-muted-foreground/20 border-t-muted-foreground" />
+          </div>
+        ) : isServerSearch && search && searchResults?.length === 0 ? (
+          (emptyState ?? (
+            <div className="flex h-full items-center justify-center text-muted-foreground text-xs">
+              No results for &ldquo;{search}&rdquo;
+            </div>
+          ))
+        ) : (
+          <ItemCatalog
+            category={'furnish' as never}
+            emptyState={emptyState}
+            key={activeNode?.slug ?? 'all'}
+            leadingTile={leadingTile}
+            overrideItems={isServerSearch && search ? (searchItems ?? undefined) : treeItems}
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ui/sidebar/panels/items-panel/index.tsx

@@ -3,12 +3,14 @@
 import type { AssetInput } from '@pascal-app/core'
 import NextImage from 'next/image'
 import { useEffect, useState } from 'react'
+import { triggerSFX } from '../../../../../lib/sfx-bus'
 import { cn } from '../../../../../lib/utils'
 import type { CatalogCategory } from '../../../../../store/use-editor'
 import useEditor from '../../../../../store/use-editor'
 import { furnishTools } from '../../../action-menu/furnish-tools'
 import { CATALOG_ITEMS } from '../../../item-catalog/catalog-items'
 import { ItemCatalog } from '../../../item-catalog/item-catalog'
+import { type FunctionTreeNode, FunctionTreePanel } from './function-tree-panel'
 
 const PLACEMENT_TAGS = new Set(['floor', 'wall', 'ceiling', 'countertop'])
 
@@ -18,6 +20,9 @@ export function ItemsPanel({
   searchResults,
   leadingTile,
   emptyState,
+  functionTree,
+  showSourceFilter = true,
+  showTagFilters = true,
 }: {
   items?: AssetInput[]
   /** Called when the search query changes (community edition uses this for server-side search) */
@@ -34,6 +39,64 @@ export function ItemsPanel({
    * or no search results). Replaces the default "No results" message.
    */
   emptyState?: React.ReactNode
+  /**
+   * DB-driven function taxonomy. When provided, the panel renders the
+   * hierarchical tree browse instead of the legacy hardcoded category tabs.
+   */
+  functionTree?: FunctionTreeNode[]
+  /**
+   * Library/Community/Mine source chips. The open-source editor has no
+   * uploaded items (only the built-in catalog), so it hides these.
+   */
+  showSourceFilter?: boolean
+  /**
+   * Placement/functional tag filter chips under the search row. The
+   * open-source editor hides these to keep the panel to plain categories.
+   */
+  showTagFilters?: boolean
+}) {
+  // When the embedder supplies a function taxonomy, the hierarchical browse
+  // replaces the legacy `furnishTools` category tabs entirely.
+  if (functionTree && functionTree.length > 0) {
+    return (
+      <FunctionTreePanel
+        emptyState={emptyState}
+        functionTree={functionTree}
+        items={items}
+        leadingTile={leadingTile}
+        onSearchChange={onSearchChange}
+        searchResults={searchResults}
+      />
+    )
+  }
+
+  return <LegacyItemsPanel
+    emptyState={emptyState}
+    items={items}
+    leadingTile={leadingTile}
+    onSearchChange={onSearchChange}
+    searchResults={searchResults}
+    showSourceFilter={showSourceFilter}
+    showTagFilters={showTagFilters}
+  />
+}
+
+function LegacyItemsPanel({
+  items,
+  onSearchChange,
+  searchResults,
+  leadingTile,
+  emptyState,
+  showSourceFilter = true,
+  showTagFilters = true,
+}: {
+  items?: AssetInput[]
+  onSearchChange?: (query: string) => void
+  searchResults?: AssetInput[] | null
+  leadingTile?: React.ReactNode
+  emptyState?: React.ReactNode
+  showSourceFilter?: boolean
+  showTagFilters?: boolean
 }) {
   const mode = useEditor((s) => s.mode)
   const catalogCategory = useEditor((s) => s.catalogCategory)
@@ -45,8 +108,11 @@ export function ItemsPanel({
   const [activeFunctionalTag, setActiveFunctionalTag] = useState<string | null>(null)
   // Library / Community / Mine. Default to Library so first-time users see
   // the curated catalog rather than every uploaded item; clicking the chip
-  // again clears the filter (`null` = show everything).
-  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>('library')
+  // again clears the filter (`null` = show everything). With the chips hidden
+  // there is nothing to filter by, so start unfiltered.
+  const [activeSource, setActiveSource] = useState<AssetInput['source'] | null>(
+    showSourceFilter ? 'library' : null,
+  )
   const [search, setSearch] = useState('')
   const isServerSearch = onSearchChange !== undefined
   // True when server search is active but results haven't come back yet
@@ -108,7 +174,7 @@ export function ItemsPanel({
   const allTags = Array.from(new Set(categoryItems.flatMap((item) => item.tags ?? [])))
   const placementTags = allTags.filter((t) => PLACEMENT_TAGS.has(t))
   const functionalTags = allTags.filter((t) => !PLACEMENT_TAGS.has(t))
-  const hasFilters = allTags.length > 1
+  const hasFilters = showTagFilters && allTags.length > 1
 
   const placementCount = (tag: string | null) =>
     categoryItems.filter((item) => {
@@ -129,7 +195,7 @@ export function ItemsPanel({
   return (
     <div className="flex h-full flex-col">
       {/* Category tabs */}
-      <div className="flex shrink-0 gap-1 overflow-x-auto border-border/70 border-b p-2">
+      <div className="flex shrink-0 flex-wrap gap-1 border-border/70 border-b p-2">
         {furnishTools.map((cat) => {
           const isActive = activeCategory.catalogCategory === cat.catalogCategory
           return (
@@ -141,7 +207,11 @@ export function ItemsPanel({
                   : 'text-muted-foreground hover:bg-sidebar-accent/50 hover:text-foreground',
               )}
               key={cat.catalogCategory}
-              onClick={() => selectCategory(cat.catalogCategory)}
+              onClick={() => {
+                triggerSFX('sfx:menu-click')
+                selectCategory(cat.catalogCategory)
+              }}
+              onMouseEnter={() => triggerSFX('sfx:menu-hover')}
               type="button"
             >
               <NextImage
@@ -161,9 +231,13 @@ export function ItemsPanel({
       <div className="flex shrink-0 flex-col gap-2 border-border/70 border-b p-2">
         <div className="flex items-center gap-1.5">
           {/* Search and source filter take 50/50 of the row. `min-w-0` on
-              both sides lets each half shrink to fit when the panel narrows. */}
+              both sides lets each half shrink to fit when the panel narrows.
+              With the source chips hidden, search spans the full row. */}
           <input
-            className="w-1/2 min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none"
+            className={cn(
+              'min-w-0 shrink-0 rounded-lg bg-muted px-2.5 py-1.5 text-xs placeholder:text-muted-foreground focus:outline-none',
+              showSourceFilter ? 'w-1/2' : 'w-full',
+            )}
             onChange={(e) => {
               setSearch(e.target.value)
               onSearchChange?.(e.target.value)
@@ -172,7 +246,7 @@ export function ItemsPanel({
             type="text"
             value={search}
           />
-          {sourceChips.length > 0 && (
+          {showSourceFilter && sourceChips.length > 0 && (
             <div className="flex w-1/2 min-w-0 shrink-0 rounded-lg bg-muted p-0.5">
               {sourceChips.map((chip) => {
                 const isActive = activeSource === chip.id