@adea-ai/ui 0.84.0 → 0.87.0

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

package/dist/r/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/dist/r/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'

package/dist/r/src/components/composites/list-row/list-row.tsx

@@ -2,6 +2,7 @@ import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 import { Polymorphic } from '@kobalte/core/polymorphic'
 import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '../../../lib/utils'
 
 /**
@@ -18,9 +19,8 @@ import { cn } from '../../../lib/utils'
  * arithmetic.
  *
  * A row is only interactive when it is given an `as` that can be activated
- * (an anchor, a button) or an `onClick`. Without either it renders as a
- * `div` with no hover treatment, because a hover state on something that does
- * nothing is a lie.
+ * (an anchor, a button) or an `onClick`. Click handlers default to a native
+ * button; a row without either remains a `div` with no hover treatment.
  */
 export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
   T,
@@ -36,30 +36,50 @@ export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
     trailing?: JSX.Element
     /** A dimmed second line under the main content. */
     description?: string
+    /** A short explanation shown on pointer hover and keyboard focus. */
+    tooltip?: string
+    /** Native button type; defaults to `button` for button rows. */
+    type?: ComponentProps<'button'>['type']
   }
 >
 
-export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
+type ListRowBaseProps<T extends ValidComponent = 'div'> = ListRowProps<T> & {
+  as?: T
+  type?: ComponentProps<'button'>['type']
+}
+
+function ListRowBase<T extends ValidComponent = 'div'>(props: ListRowBaseProps<T>) {
   const [local, rest] = splitProps(props as ListRowProps, [
+    'as',
     'class',
     'selected',
     'dense',
     'leading',
     'trailing',
     'description',
+    'tooltip',
+    'type',
+    'tabIndex',
     'children',
   ])
 
   return (
     <Polymorphic
-      as="div"
+      as={(local.as ?? 'div') as T}
+      type={local.as === 'button' ? (local.type ?? 'button') : local.type}
+      tabIndex={local.tabIndex ?? (local.as === 'button' || local.as === 'a' ? 0 : undefined)}
       aria-current={local.selected ? 'true' : undefined}
       data-selected={local.selected ? '' : undefined}
       class={cn(
         'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
         'transition-colors ease-out outline-none',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        { 'h-row-sm': local.dense, 'h-row-md': !local.dense },
+        {
+          'h-row-sm': local.dense && !local.description,
+          'h-row-md': !local.dense && !local.description,
+          'min-h-row-sm py-1': local.dense && local.description,
+          'min-h-row-md py-1.5': !local.dense && local.description,
+        },
         {
           'bg-primary-subtle text-foreground': local.selected,
           'hover:bg-surface-hover': !local.selected,
@@ -76,11 +96,25 @@ export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>
       <span class="flex min-w-0 flex-1 flex-col">
         <span class="truncate">{local.children}</span>
         <Show when={local.description}>
-          <span class="text-muted-foreground truncate text-xs">{local.description}</span>
+          <span
+            data-slot="list-row-description"
+            class={cn(
+              'truncate text-xs',
+              local.selected ? 'text-foreground' : 'text-muted-foreground'
+            )}
+          >
+            {local.description}
+          </span>
         </Show>
       </span>
       <Show when={local.trailing}>
-        <span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">
+        <span
+          data-slot="list-row-trailing"
+          class={cn(
+            'ms-auto flex shrink-0 items-center gap-1',
+            local.selected ? 'text-foreground' : 'text-muted-foreground'
+          )}
+        >
           {local.trailing}
         </span>
       </Show>
@@ -88,6 +122,45 @@ export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>
   )
 }
 
+type ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<
+  ListRowBaseProps<T>,
+  'as'
+> & { rowAs?: T }
+
+/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
+function ListRowTooltipTarget<T extends ValidComponent = 'div'>(
+  props: ListRowTooltipTargetProps<T>
+) {
+  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, ['rowAs'])
+  return <ListRowBase as={local.rowAs} {...(rest as ListRowBaseProps<T>)} />
+}
+
+export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
+  const [local, rest] = splitProps(props as ListRowProps, ['as', 'tooltip'])
+  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])
+  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T
+  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)
+
+  return (
+    <Show
+      when={local.tooltip}
+      fallback={<ListRowBase as={rowAs()} type={rowType()} {...(rest as ListRowBaseProps<T>)} />}
+    >
+      <Tooltip>
+        <TooltipTrigger
+          as={ListRowTooltipTarget}
+          rowAs={rowAs()}
+          type={rowType()}
+          {...(rest as ListRowTooltipTargetProps<T>)}
+        >
+          {rest.children}
+        </TooltipTrigger>
+        <TooltipContent>{local.tooltip}</TooltipContent>
+      </Tooltip>
+    </Show>
+  )
+}
+
 /**
  * A group of rows with an optional heading and a scrolling body. The heading is
  * a plain label rather than a control: grouping is for reading, and a