@adea-ai/ui 0.84.0 → 0.87.0

package/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/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/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>
+  )
+}

package/src/components/composites/catalog-browser/catalog-types.ts

@@ -0,0 +1,83 @@
+import type { JSX } from 'solid-js'
+
+/** A host-owned catalog record reduced to the fields needed by the browser. */
+export type CatalogBrowserEntry<Value> = Readonly<{
+  id: string
+  value: Value
+  name: string
+  description: string
+  category: string
+  publisher: string
+  installed: boolean
+}>
+
+/** One stable, host-ordered category in the browser. */
+export type CatalogBrowserGroup<Value> = Readonly<{
+  id: string
+  label: string
+  entries: readonly CatalogBrowserEntry<Value>[]
+}>
+
+export type CatalogBrowserTab = Readonly<{
+  id: string
+  label: string
+  /** A host-rendered view, such as navigation settings, outside the catalog. */
+  kind?: 'catalog' | 'supplemental'
+}>
+
+export type CatalogBrowserNotice = Readonly<{
+  id: string
+  role: 'alert' | 'status'
+  message: string
+}>
+
+export type CatalogBrowserMessage = Readonly<{
+  title: string
+  description: string
+  role?: 'alert' | 'status'
+}>
+
+export type CatalogBrowserProps<Value> = Readonly<{
+  /** Optional layout hook for the host's containing surface. */
+  class?: string
+  /** Whether the containing host surface is open; closing it clears view-only state. */
+  open: boolean
+  tabs: readonly CatalogBrowserTab[]
+  tab: string
+  tabsLabel: string
+  onTabChange: (tab: string) => void
+  /** A host-owned view is rendered in the same tab frame without catalog assumptions. */
+  renderSupplementalView?: (tab: string) => JSX.Element | undefined
+  query: string
+  onQueryChange: (query: string) => void
+  searchLabel: string
+  searchPlaceholder: string
+  resultsRegionLabel: string
+  filterControl?: JSX.Element
+  resultCount: number
+  resultLabel: (count: number) => string
+  loadingLabel: string
+  status: 'loading' | 'ready' | 'error'
+  catalogError: CatalogBrowserMessage
+  catalogErrorAction?: JSX.Element
+  installError?: string
+  notices?: readonly CatalogBrowserNotice[]
+  emptyState: CatalogBrowserMessage
+  emptyStateAction?: JSX.Element
+  groups: readonly CatalogBrowserGroup<Value>[]
+  /** All selectable records, including records omitted by the current filter. */
+  entries: readonly CatalogBrowserEntry<Value>[]
+  selectedId: string | null
+  onSelect: (value: Value) => void
+  onBack: () => void
+  backLabel: string
+  detailRegionLabel: string
+  installedLabel: string
+  publishedByLabel: (publisher: string) => string
+  showMoreLabel: (entries: readonly CatalogBrowserEntry<Value>[], remainingCount: number) => string
+  showLessLabel: string
+  /** Temporarily disables catalog controls while a host menu owns interaction. */
+  interactionDisabled?: boolean
+  renderIcon: (value: Value) => JSX.Element
+  renderDetail: (value: Value) => JSX.Element
+}>

package/src/components/composites/catalog-browser/index.ts

@@ -0,0 +1,10 @@
+export { CatalogBrowser } from './catalog-browser'
+export { CatalogDetail, CatalogDetailSection } from './catalog-detail'
+export type {
+  CatalogBrowserEntry,
+  CatalogBrowserGroup,
+  CatalogBrowserMessage,
+  CatalogBrowserNotice,
+  CatalogBrowserProps,
+  CatalogBrowserTab,
+} from './catalog-types'