@adea-ai/ui 0.84.0 → 0.85.0

package/dist/index.d.ts

@@ -86,6 +86,7 @@ export * from './components/conversation';
 export * from './components/theme';
 export * from './components/composites/account-menu';
 export * from './components/composites/action-button';
+export * from './components/composites/catalog-browser';
 export * from './components/composites/list-row';
 export * from './components/composites/settings';
 export * from './components/composites/stat';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -91,6 +91,9 @@ import { AppearancePanel } from "./components/theme/appearance-panel.js";
 import { ThemeToggle } from "./components/theme/theme-toggle.js";
 import { AccountMenu } from "./components/composites/account-menu/account-menu.js";
 import { ActionButton } from "./components/composites/action-button/action-button.js";
+import { keyedRows } from "./lib/keyed-rows.js";
+import { CatalogBrowser } from "./components/composites/catalog-browser/catalog-browser.js";
+import { CatalogDetail, CatalogDetailSection } from "./components/composites/catalog-browser/catalog-detail.js";
 import { ListGroup, ListRow } from "./components/composites/list-row/list-row.js";
 import { SettingsField, SettingsPage, SettingsRow, SettingsSection } from "./components/composites/settings/settings.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
@@ -99,5 +102,4 @@ import { AppearanceEditor, AppearancePopover } from "./components/composites/app
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/version-notes.js";
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
-import { keyedRows } from "./lib/keyed-rows.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeSplit, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, EntityIcon, Field, FieldDescription, FieldError, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeSplit, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, zIndexTokens };

package/dist/r/catalog-browser.json

@@ -0,0 +1,47 @@
+{
+  "name": "catalog-browser",
+  "type": "registry:ui",
+  "title": "Catalog Browser",
+  "description": "",
+  "dependencies": [
+    "lucide-solid@^1.48.0"
+  ],
+  "registryDependencies": [
+    "@adea-ai/ui/badge",
+    "@adea-ai/ui/button",
+    "@adea-ai/ui/card",
+    "@adea-ai/ui/empty",
+    "@adea-ai/ui/input-group",
+    "@adea-ai/ui/scroll-area",
+    "@adea-ai/ui/skeleton",
+    "@adea-ai/ui/tabs",
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/composites/catalog-browser/catalog-browser-group.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/catalog-browser/catalog-browser-group.tsx"
+    },
+    {
+      "path": "src/components/composites/catalog-browser/catalog-browser.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/catalog-browser/catalog-browser.tsx"
+    },
+    {
+      "path": "src/components/composites/catalog-browser/catalog-detail.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/catalog-browser/catalog-detail.tsx"
+    },
+    {
+      "path": "src/components/composites/catalog-browser/catalog-types.ts",
+      "type": "registry:ui",
+      "target": "components/composites/catalog-browser/catalog-types.ts"
+    },
+    {
+      "path": "src/components/composites/catalog-browser/index.ts",
+      "type": "registry:ui",
+      "target": "components/composites/catalog-browser/index.ts"
+    }
+  ]
+}

package/dist/r/registry.json

@@ -1792,6 +1792,53 @@
         }
       ]
     },
+    {
+      "name": "catalog-browser",
+      "type": "registry:ui",
+      "title": "Catalog Browser",
+      "description": "",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/badge",
+        "@adea-ai/ui/button",
+        "@adea-ai/ui/card",
+        "@adea-ai/ui/empty",
+        "@adea-ai/ui/input-group",
+        "@adea-ai/ui/scroll-area",
+        "@adea-ai/ui/skeleton",
+        "@adea-ai/ui/tabs",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/catalog-browser/catalog-browser-group.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/catalog-browser/catalog-browser-group.tsx"
+        },
+        {
+          "path": "src/components/composites/catalog-browser/catalog-browser.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/catalog-browser/catalog-browser.tsx"
+        },
+        {
+          "path": "src/components/composites/catalog-browser/catalog-detail.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/catalog-browser/catalog-detail.tsx"
+        },
+        {
+          "path": "src/components/composites/catalog-browser/catalog-types.ts",
+          "type": "registry:ui",
+          "target": "components/composites/catalog-browser/catalog-types.ts"
+        },
+        {
+          "path": "src/components/composites/catalog-browser/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/catalog-browser/index.ts"
+        }
+      ]
+    },
     {
       "name": "list-row",
       "type": "registry:ui",

package/dist/r/src/components/composites/catalog-browser/catalog-browser-group.tsx

@@ -0,0 +1,148 @@
+import { createUniqueId, For, onCleanup, Show, type JSX } from 'solid-js'
+import { ChevronDown, ChevronRight, ChevronUp } from 'lucide-solid'
+import { keyedRows } from '../../../lib/keyed-rows'
+import { Badge } from '../../ui/badge'
+import { Button } from '../../ui/button'
+import { Skeleton } from '../../ui/skeleton'
+import type { CatalogBrowserEntry, CatalogBrowserGroup as CatalogGroup } from './catalog-types'
+
+export function CatalogLoadingState(props: { label: string }) {
+  return (
+    <div
+      class="grid min-w-0 grid-cols-1 gap-3 md:grid-cols-2"
+      aria-busy="true"
+      aria-label={props.label}
+    >
+      <For each={[0, 1, 2, 3, 4, 5, 6]}>
+        {() => (
+          <div class="flex min-w-0 items-center gap-3 rounded-xl border border-border p-3">
+            <Skeleton class="size-9 shrink-0" />
+            <div class="grid min-w-0 flex-1 gap-2">
+              <Skeleton class="h-4 w-2/5" />
+              <Skeleton class="h-3 w-4/5" />
+              <Skeleton class="h-3 w-3/5" />
+            </div>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}
+
+function CatalogBrowserRow<Value>(props: {
+  entry: CatalogBrowserEntry<Value>
+  groupId: string
+  installedLabel: string
+  publishedByLabel: (publisher: string) => string
+  disabled: boolean
+  renderIcon: (value: Value) => JSX.Element
+  onSelect: (entry: CatalogBrowserEntry<Value>, key: string) => void
+  onRef: (key: string, element: HTMLButtonElement | undefined) => void
+}) {
+  const key = JSON.stringify([props.groupId, props.entry.id])
+  let element: HTMLButtonElement | undefined
+  onCleanup(() => {
+    if (element) props.onRef(key, undefined)
+  })
+
+  return (
+    <Button
+      ref={(node) => {
+        element = node
+        props.onRef(key, node)
+      }}
+      data-catalog-entry-id={props.entry.id}
+      variant="outline"
+      size="lg"
+      class="h-auto min-h-row-lg w-full min-w-0 justify-start gap-3 whitespace-normal"
+      disabled={props.disabled}
+      onClick={() => props.onSelect(props.entry, key)}
+    >
+      <span class="shrink-0">{props.renderIcon(props.entry.value)}</span>
+      <span class="flex min-w-0 flex-1 flex-col gap-1 text-left">
+        <span class="flex min-w-0 flex-wrap items-center gap-2">
+          <strong class="min-w-0 truncate">{props.entry.name}</strong>
+          <Show when={props.entry.installed}>
+            <Badge variant="secondary">{props.installedLabel}</Badge>
+          </Show>
+        </span>
+        <span class="text-muted-foreground line-clamp-2 text-xs">{props.entry.description}</span>
+        <span class="text-muted-foreground truncate text-2xs">
+          {props.publishedByLabel(props.entry.publisher)} · {props.entry.category}
+        </span>
+      </span>
+      <ChevronRight aria-hidden="true" />
+    </Button>
+  )
+}
+
+export function CatalogBrowserGroup<Value>(props: {
+  group: CatalogGroup<Value>
+  expanded: boolean
+  previewCount: number
+  disabled: boolean
+  installedLabel: string
+  publishedByLabel: (publisher: string) => string
+  showMoreLabel: (entries: readonly CatalogBrowserEntry<Value>[], remainingCount: number) => string
+  showLessLabel: string
+  renderIcon: (value: Value) => JSX.Element
+  onSelect: (entry: CatalogBrowserEntry<Value>, key: string) => void
+  onRef: (key: string, element: HTMLButtonElement | undefined) => void
+  onToggle: (id: string) => void
+}) {
+  const headingId = `catalog-browser-group-${createUniqueId()}`
+  const listId = `catalog-browser-items-${createUniqueId()}`
+  const hidden = () => props.group.entries.slice(props.previewCount)
+  const preview = () =>
+    props.expanded ? props.group.entries : props.group.entries.slice(0, props.previewCount)
+  const rows = keyedRows(preview, (entry) => entry.id)
+
+  return (
+    <section class="grid min-w-0 gap-2" aria-labelledby={headingId}>
+      <header class="flex min-w-0 items-center gap-2">
+        <h3 id={headingId} class="min-w-0 flex-1 truncate text-sm font-semibold">
+          {props.group.label}
+        </h3>
+        <Badge variant="outline">{props.group.entries.length}</Badge>
+      </header>
+      <div id={listId} class="grid min-w-0 grid-cols-1 gap-2 md:grid-cols-2">
+        <For each={rows()}>
+          {(row) => (
+            <CatalogBrowserRow
+              entry={row.item()}
+              groupId={props.group.id}
+              installedLabel={props.installedLabel}
+              publishedByLabel={props.publishedByLabel}
+              disabled={props.disabled}
+              renderIcon={props.renderIcon}
+              onSelect={props.onSelect}
+              onRef={props.onRef}
+            />
+          )}
+        </For>
+      </div>
+      <Show when={hidden().length > 0}>
+        <Button
+          variant="ghost"
+          size="lg"
+          disabled={props.disabled}
+          aria-expanded={props.expanded}
+          aria-controls={listId}
+          onClick={() => props.onToggle(props.group.id)}
+        >
+          <Show
+            when={props.expanded}
+            fallback={
+              <>
+                {props.showMoreLabel(hidden(), hidden().length)}{' '}
+                <ChevronDown data-icon="inline-end" aria-hidden="true" />
+              </>
+            }
+          >
+            {props.showLessLabel} <ChevronUp data-icon="inline-end" aria-hidden="true" />
+          </Show>
+        </Button>
+      </Show>
+    </section>
+  )
+}

package/dist/r/src/components/composites/catalog-browser/catalog-browser.tsx

@@ -0,0 +1,258 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, Show } from 'solid-js'
+import { ArrowLeft, Blocks, Search } from 'lucide-solid'
+import { keyedRows } from '../../../lib/keyed-rows'
+import { Button } from '../../ui/button'
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '../../ui/empty'
+import { InputGroup, InputGroupAddon, InputGroupInput } from '../../ui/input-group'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../ui/tabs'
+import { ScrollArea } from '../../ui/scroll-area'
+import { cn } from '../../../lib/utils'
+import { CatalogBrowserGroup, CatalogLoadingState } from './catalog-browser-group'
+import type { CatalogBrowserProps } from './catalog-types'
+
+export function CatalogBrowser<Value>(props: CatalogBrowserProps<Value>) {
+  const [expandedGroups, setExpandedGroups] = createSignal<ReadonlySet<string>>(new Set())
+  const [returnKey, setReturnKey] = createSignal<string>()
+  const [lastSelectedId, setLastSelectedId] = createSignal<string>()
+  const rowRefs = new Map<string, HTMLButtonElement>()
+  let searchInput: HTMLInputElement | undefined
+  let backButton: HTMLButtonElement | undefined
+
+  const selectedTab = createMemo(() => props.tabs.find((tab) => tab.id === props.tab))
+  const supplemental = () => selectedTab()?.kind === 'supplemental'
+  const selected = createMemo(() => {
+    const id = props.selectedId
+    return id && !supplemental() ? props.entries.find((entry) => entry.id === id) : undefined
+  })
+  const groupRows = keyedRows(
+    () => props.groups,
+    (group) => group.id
+  )
+  const [wide, setWide] = createSignal(
+    typeof window === 'undefined' || window.matchMedia('(min-width: 48rem)').matches
+  )
+  const updateWide = (event: MediaQueryListEvent) => setWide(event.matches)
+
+  createEffect(() => {
+    if (typeof window === 'undefined') return
+    const query = window.matchMedia('(min-width: 48rem)')
+    query.addEventListener('change', updateWide)
+    onCleanup(() => query.removeEventListener('change', updateWide))
+  })
+
+  createEffect(() => {
+    const open = props.open
+    const selectedId = props.selectedId
+    const selectedEntry = selected()
+    if (!open) {
+      setExpandedGroups(new Set<string>())
+      setLastSelectedId(undefined)
+      setReturnKey(undefined)
+      return
+    }
+    if (selectedId && selectedEntry) {
+      const previous = lastSelectedId()
+      setLastSelectedId(selectedId)
+      if (selectedId !== previous) {
+        window.requestAnimationFrame(() => {
+          if (props.open && props.selectedId === selectedId) backButton?.focus()
+        })
+      }
+      return
+    }
+    const previous = lastSelectedId()
+    if (!previous) return
+    const key = returnKey()
+    setLastSelectedId(undefined)
+    setReturnKey(undefined)
+    window.requestAnimationFrame(() => {
+      if (!props.open || props.selectedId) return
+      const row = key ? rowRefs.get(key) : undefined
+      if (row?.isConnected) row.focus()
+      else searchInput?.focus()
+    })
+  })
+
+  const registerRow = (key: string, element: HTMLButtonElement | undefined) => {
+    if (element) rowRefs.set(key, element)
+    else rowRefs.delete(key)
+  }
+  const selectEntry = (key: string, value: Value) => {
+    setReturnKey(key)
+    props.onSelect(value)
+  }
+  const toggleGroup = (id: string) => {
+    setExpandedGroups((current) => {
+      const next = new Set(current)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return next
+    })
+  }
+  const previewCount = () => (wide() ? 6 : 3)
+  const countLabel = () =>
+    props.status === 'loading' ? props.loadingLabel : props.resultLabel(props.resultCount)
+  const supplementalContent = () => props.renderSupplementalView?.(props.tab)
+
+  return (
+    <div class={cn('flex min-h-0 min-w-0 flex-1 flex-col', props.class)}>
+      <Show
+        when={selected()}
+        fallback={
+          <Tabs
+            class="flex min-h-0 min-w-0 flex-1 flex-col gap-0"
+            value={props.tab}
+            onChange={(value) => value && props.onTabChange(value)}
+          >
+            <TabsList aria-label={props.tabsLabel} class="ms-auto max-w-full flex-wrap px-4 pt-2">
+              <For each={props.tabs}>
+                {(tab) => <TabsTrigger value={tab.id}>{tab.label}</TabsTrigger>}
+              </For>
+            </TabsList>
+            <TabsContent value={props.tab} class="flex min-h-0 min-w-0 flex-1 flex-col gap-3">
+              <Show
+                when={supplemental()}
+                fallback={
+                  <>
+                    <Show when={props.installError}>
+                      {(message) => (
+                        <p class="text-destructive px-4 pt-2 text-sm" role="alert">
+                          {message()}
+                        </p>
+                      )}
+                    </Show>
+                    <div class="flex min-w-0 shrink-0 flex-wrap items-center gap-2 px-4 pt-2">
+                      {props.filterControl}
+                      <InputGroup class="min-w-0 flex-1 sm:max-w-md">
+                        <InputGroupAddon>
+                          <Search aria-hidden="true" />
+                        </InputGroupAddon>
+                        <InputGroupInput
+                          ref={(element) => (searchInput = element)}
+                          type="search"
+                          aria-label={props.searchLabel}
+                          placeholder={props.searchPlaceholder}
+                          value={props.query}
+                          onInput={(event) => props.onQueryChange(event.currentTarget.value)}
+                        />
+                      </InputGroup>
+                      <span class="text-muted-foreground ms-auto text-sm" role="status">
+                        {countLabel()}
+                      </span>
+                    </div>
+                    <ScrollArea
+                      role="region"
+                      aria-label={props.resultsRegionLabel}
+                      orientation="vertical"
+                      class="flex min-h-0 min-w-0 flex-1 flex-col gap-5 px-4 pb-4"
+                    >
+                      <Show when={props.status === 'error'}>
+                        <Empty
+                          class="min-h-0 min-w-0 flex-1"
+                          role={props.catalogError.role ?? 'alert'}
+                        >
+                          <EmptyHeader>
+                            <EmptyMedia variant="icon">
+                              <Blocks aria-hidden="true" />
+                            </EmptyMedia>
+                            <EmptyTitle>{props.catalogError.title}</EmptyTitle>
+                            <EmptyDescription>{props.catalogError.description}</EmptyDescription>
+                          </EmptyHeader>
+                          <Show when={props.catalogErrorAction}>
+                            <EmptyContent>{props.catalogErrorAction}</EmptyContent>
+                          </Show>
+                        </Empty>
+                      </Show>
+                      <Show when={props.status === 'loading'}>
+                        <CatalogLoadingState label={props.loadingLabel} />
+                      </Show>
+                      <Show when={props.status === 'ready'}>
+                        <Show
+                          when={props.resultCount > 0}
+                          fallback={
+                            <Empty class="min-h-0 min-w-0 flex-1" role="status">
+                              <EmptyHeader>
+                                <EmptyMedia variant="icon">
+                                  <Blocks aria-hidden="true" />
+                                </EmptyMedia>
+                                <EmptyTitle>{props.emptyState.title}</EmptyTitle>
+                                <EmptyDescription>{props.emptyState.description}</EmptyDescription>
+                              </EmptyHeader>
+                              <Show when={props.emptyStateAction}>
+                                <EmptyContent>{props.emptyStateAction}</EmptyContent>
+                              </Show>
+                            </Empty>
+                          }
+                        >
+                          <div class="grid min-w-0 gap-5">
+                            <For each={groupRows()}>
+                              {(row) => (
+                                <CatalogBrowserGroup
+                                  group={row.item()}
+                                  expanded={expandedGroups().has(row.item().id)}
+                                  previewCount={previewCount()}
+                                  disabled={props.interactionDisabled ?? false}
+                                  installedLabel={props.installedLabel}
+                                  publishedByLabel={props.publishedByLabel}
+                                  showMoreLabel={props.showMoreLabel}
+                                  showLessLabel={props.showLessLabel}
+                                  renderIcon={props.renderIcon}
+                                  onSelect={(entry, key) => selectEntry(key, entry.value)}
+                                  onRef={registerRow}
+                                  onToggle={toggleGroup}
+                                />
+                              )}
+                            </For>
+                          </div>
+                        </Show>
+                      </Show>
+                      <For each={props.notices ?? []}>
+                        {(notice) => (
+                          <p class="text-muted-foreground text-sm" role={notice.role}>
+                            {notice.message}
+                          </p>
+                        )}
+                      </For>
+                    </ScrollArea>
+                  </>
+                }
+              >
+                {supplementalContent()}
+              </Show>
+            </TabsContent>
+          </Tabs>
+        }
+      >
+        {(entry) => (
+          <div class="flex min-h-0 min-w-0 flex-1 flex-col gap-3" data-catalog-browser-detail>
+            <Button
+              ref={(element) => (backButton = element)}
+              variant="ghost"
+              size="sm"
+              onClick={() => props.onBack()}
+              class="mx-4 mt-2 self-start"
+            >
+              <ArrowLeft data-icon="inline-start" aria-hidden="true" />
+              {props.backLabel}
+            </Button>
+            <ScrollArea
+              role="region"
+              aria-label={props.detailRegionLabel}
+              orientation="vertical"
+              class="min-h-0 min-w-0 flex-1 px-4 pb-4"
+            >
+              {props.renderDetail(entry().value)}
+            </ScrollArea>
+          </div>
+        )}
+      </Show>
+    </div>
+  )
+}

package/dist/r/src/components/composites/catalog-browser/catalog-detail.tsx

@@ -0,0 +1,64 @@
+import { createUniqueId, Show, type JSX } from 'solid-js'
+import { Badge } from '../../ui/badge'
+import { Card, CardContent, CardFooter, CardHeader } from '../../ui/card'
+
+/** Shared item summary and action frame for catalog-owned detail content. */
+export function CatalogDetail(props: {
+  title: string
+  description: string
+  category: string
+  publisher: string
+  publishedByLabel: (publisher: string) => string
+  leading?: JSX.Element
+  eyebrow?: string
+  badges?: JSX.Element
+  action?: JSX.Element
+  status?: JSX.Element
+  children?: JSX.Element
+}) {
+  return (
+    <article class="grid min-w-0 gap-4" data-catalog-detail>
+      <Card>
+        <CardHeader class="flex-row items-start gap-3">
+          <Show when={props.leading}>
+            <span class="shrink-0">{props.leading}</span>
+          </Show>
+          <div class="grid min-w-0 gap-1.5">
+            <div class="flex min-w-0 flex-wrap items-center gap-1.5">
+              <Show when={props.eyebrow}>
+                <Badge variant="outline">{props.eyebrow}</Badge>
+              </Show>
+              <Badge variant="secondary">{props.category}</Badge>
+              {props.badges}
+            </div>
+            <h2 class="text-base leading-tight font-semibold tracking-tight">{props.title}</h2>
+            <p class="text-muted-foreground text-sm">{props.description}</p>
+            <p class="text-muted-foreground text-xs">{props.publishedByLabel(props.publisher)}</p>
+          </div>
+        </CardHeader>
+        <CardFooter class="flex-wrap justify-between gap-3">
+          {props.action}
+          {props.status}
+        </CardFooter>
+      </Card>
+      <div class="grid min-w-0 gap-3">{props.children}</div>
+    </article>
+  )
+}
+
+/** A shared surface and heading for host-specific fields, permissions, and copy. */
+export function CatalogDetailSection(props: { title: string; children?: JSX.Element }) {
+  const headingId = `catalog-detail-section-${createUniqueId()}`
+  return (
+    <section class="min-w-0" aria-labelledby={headingId}>
+      <Card>
+        <CardHeader>
+          <h3 id={headingId} class="text-sm font-semibold tracking-tight">
+            {props.title}
+          </h3>
+        </CardHeader>
+        <CardContent class="grid min-w-0 gap-3">{props.children}</CardContent>
+      </Card>
+    </section>
+  )
+}