@adea-ai/ui 0.83.1 → 0.85.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/layout/sidebar-nav/index.ts

@@ -13,3 +13,7 @@ export {
   type SidebarNavProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
+export {
+  SidebarNavResizeHandle,
+  type SidebarNavResizeHandleProps,
+} from './sidebar-nav-resize-handle'

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx

@@ -0,0 +1,59 @@
+import Resizable from '@corvu/resizable'
+import { cn } from '../../../lib/utils'
+
+export type SidebarNavResizeHandleProps = {
+  value: number
+  minimum: number
+  maximum: number
+  step?: number
+  label?: string
+  controls?: string
+  class?: string
+  onChange(value: number): void
+  onCommit?(value: number): void
+}
+
+/**
+ * Resize a contextual sidebar without making its host recreate a separator
+ * widget. Corvu owns pointer capture, cancellation, constraints, keyboard
+ * movement and cleanup. Its two invisible panels provide a bounded pixel
+ * ruler; the host retains the real pane layout and preference persistence.
+ * Place this inside the positioned sidebar. The ruler can extend over the
+ * adjacent content, but only its handle participates in pointer hit testing.
+ */
+export function SidebarNavResizeHandle(props: SidebarNavResizeHandleProps) {
+  const maximum = () => Math.max(1, props.maximum)
+  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
+  const value = () => Math.min(maximum(), Math.max(minimum(), props.value))
+  const commit = () => props.onCommit?.(value())
+
+  return (
+    <Resizable
+      orientation="horizontal"
+      sizes={[value() / maximum(), 1 - value() / maximum()]}
+      keyboardDelta={`${props.step ?? 16}px`}
+      style={{ width: `${maximum()}px` }}
+      class={cn('pointer-events-none absolute inset-y-0 start-0 flex', props.class)}
+      onSizesChange={(sizes) => {
+        const next = Math.round((sizes[0] ?? 0) * maximum())
+        if (next !== value()) props.onChange(Math.min(maximum(), Math.max(minimum(), next)))
+      }}
+    >
+      <Resizable.Panel minSize={minimum() / maximum()} maxSize={1} aria-hidden="true" />
+      <Resizable.Handle
+        aria-label={props.label ?? 'Resize navigation'}
+        aria-controls={props.controls}
+        aria-orientation="vertical"
+        aria-valuemin={minimum()}
+        aria-valuemax={maximum()}
+        aria-valuenow={value()}
+        onHandleDragEnd={commit}
+        onKeyUp={(event) => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) commit()
+        }}
+        class="pointer-events-auto relative z-(--z-docked) w-px -translate-x-full shrink-0 bg-transparent after:absolute after:inset-y-0 after:-inset-x-1 after:w-3 hover:bg-primary focus-visible:bg-primary focus-visible:ring-3 focus-visible:ring-primary-subtle focus-visible:outline-none"
+      />
+      <Resizable.Panel minSize={0} aria-hidden="true" />
+    </Resizable>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.83.1",
+  "version": "0.85.0",
   "description": "The Adea design system: Kobalte-backed Solid components, semantic OKLCH tokens, and the app-shell layout primitives shared by Adea and Cortana.",
   "keywords": [
     "adea",

package/registry.json

@@ -1558,6 +1558,7 @@
       "title": "Sidebar Nav",
       "description": "",
       "dependencies": [
+        "@corvu/resizable@^0.2.5",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -1570,6 +1571,11 @@
           "type": "registry:ui",
           "target": "components/layout/sidebar-nav/index.ts"
         },
+        {
+          "path": "src/components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx"
+        },
         {
           "path": "src/components/layout/sidebar-nav/sidebar-nav.tsx",
           "type": "registry:ui",
@@ -1786,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",