@adea-ai/ui 0.95.7 → 0.97.0

package/src/components/composites/account-menu/account-menu.tsx

@@ -64,6 +64,8 @@ export type AccountMenuProps = {
   platform?: 'desktop' | 'web'
   /** Whether a session exists. Decides the sign-in/sign-out row. */
   authenticated: boolean
+  /** Local-only applications can omit the session actions altogether. */
+  showSession?: boolean
   /** Disable the session row while a sign-in or sign-out is in flight. */
   busy?: boolean
   /** The name shown on the trigger's accessible label. */
@@ -90,6 +92,7 @@ export function AccountMenu(props: AccountMenuProps) {
     'items',
     'platform',
     'authenticated',
+    'showSession',
     'busy',
     'label',
     'onSignIn',
@@ -174,24 +177,73 @@ export function AccountMenu(props: AccountMenuProps) {
               )}
             </For>
           </DropdownMenuGroup>
-          <DropdownMenuSeparator />
-          <DropdownMenuGroup>
-            <DropdownMenuItem
-              disabled={local.busy}
-              onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
-            >
-              <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
-                <LogOut aria-hidden="true" />
-              </Show>
-              <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
+          <Show when={local.showSession !== false}>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuItem
+                disabled={local.busy}
+                onSelect={() => (local.authenticated ? local.onSignOut?.() : local.onSignIn?.())}
+              >
+                <Show when={local.authenticated} fallback={<LogIn aria-hidden="true" />}>
+                  <LogOut aria-hidden="true" />
+                </Show>
+                <span>{local.authenticated ? 'Sign out' : 'Sign in'}</span>
+              </DropdownMenuItem>
+            </DropdownMenuGroup>
+          </Show>
         </DropdownMenuContent>
       </DropdownMenu>
     </Tooltip>
   )
 }
 
+/** The common support menu, with one app-specific entry before the shared items. */
+export function createAppMenuItems(options: {
+  primaryItem?: AccountMenuItem
+  settingsShortcut?: string
+  onAbout?: AccountMenuItem['onSelectAfterClose']
+  onHelp?: AccountMenuItem['onSelectAfterClose']
+  onFeedback?: AccountMenuItem['onSelectAfterClose']
+  onUpdates?: AccountMenuItem['onSelectAfterClose']
+  onSettings?: AccountMenuItem['onSelectAfterClose']
+}): AccountMenuItem[] {
+  return [
+    ...(options.primaryItem ? [options.primaryItem] : []),
+    {
+      id: 'about',
+      label: 'About',
+      disabled: !options.onAbout,
+      onSelectAfterClose: options.onAbout,
+    },
+    {
+      id: 'help',
+      label: 'Help Center',
+      disabled: !options.onHelp,
+      onSelectAfterClose: options.onHelp,
+    },
+    {
+      id: 'feedback',
+      label: 'Send Feedback',
+      disabled: !options.onFeedback,
+      onSelectAfterClose: options.onFeedback,
+    },
+    {
+      id: 'updates',
+      label: 'Updates',
+      platform: 'desktop',
+      disabled: !options.onUpdates,
+      onSelectAfterClose: options.onUpdates,
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      shortcut: options.settingsShortcut,
+      disabled: !options.onSettings,
+      onSelectAfterClose: options.onSettings,
+    },
+  ]
+}
+
 function AccountMenuButton(props: ComponentProps<typeof Button>) {
   return <DropdownMenuTrigger as={Button} {...props} />
 }

package/src/components/composites/account-menu/index.ts

@@ -1 +1,6 @@
-export { AccountMenu, type AccountMenuItem, type AccountMenuProps } from './account-menu'
+export {
+  AccountMenu,
+  createAppMenuItems,
+  type AccountMenuItem,
+  type AccountMenuProps,
+} from './account-menu'

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

@@ -33,7 +33,6 @@ 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
@@ -59,7 +58,7 @@ function CatalogBrowserRow<Value>(props: {
       // unimportant `h-auto` loses the stylesheet sort and clamps this
       // multi-line row to one control line, spilling its content over the
       // neighbouring rows.
-      class="h-auto! min-h-row-lg w-full min-w-0 justify-start gap-3 whitespace-normal"
+      class="h-auto! min-h-row-lg w-full min-w-0 justify-start gap-3 py-2.5 whitespace-normal"
       disabled={props.disabled}
       onClick={() => props.onSelect(props.entry, key)}
     >
@@ -71,9 +70,18 @@ function CatalogBrowserRow<Value>(props: {
             <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}
+        {/* Exactly one content line: the description truncates and the
+            publisher and category ride the same line as accent chips. */}
+        <span class="flex min-w-0 items-center gap-1.5 text-xs">
+          <span class="text-muted-foreground min-w-0 truncate">{props.entry.description}</span>
+          <span class="ms-auto flex shrink-0 items-center gap-1">
+            <span class="rounded bg-primary-subtle px-1.5 py-0.5 text-2xs font-medium text-primary">
+              {props.entry.publisher}
+            </span>
+            <span class="rounded bg-primary-subtle px-1.5 py-0.5 text-2xs font-medium text-primary">
+              {props.entry.category}
+            </span>
+          </span>
         </span>
       </span>
       <ChevronRight aria-hidden="true" />
@@ -87,7 +95,6 @@ export function CatalogBrowserGroup<Value>(props: {
   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
@@ -108,7 +115,12 @@ export function CatalogBrowserGroup<Value>(props: {
         <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>
+        <Badge
+          variant="outline"
+          class="border-primary/25 bg-primary-subtle tabular-nums text-primary"
+        >
+          {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()}>
@@ -117,7 +129,6 @@ export function CatalogBrowserGroup<Value>(props: {
               entry={row.item()}
               groupId={props.group.id}
               installedLabel={props.installedLabel}
-              publishedByLabel={props.publishedByLabel}
               disabled={props.disabled}
               renderIcon={props.renderIcon}
               onSelect={props.onSelect}

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

@@ -131,7 +131,7 @@ export function CatalogBrowser<Value>(props: CatalogBrowserProps<Value>) {
                     <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>
+                        <InputGroupAddon class="text-primary">
                           <Search aria-hidden="true" />
                         </InputGroupAddon>
                         <InputGroupInput
@@ -143,7 +143,10 @@ export function CatalogBrowser<Value>(props: CatalogBrowserProps<Value>) {
                           onInput={(event) => props.onQueryChange(event.currentTarget.value)}
                         />
                       </InputGroup>
-                      <span class="text-muted-foreground ms-auto text-sm" role="status">
+                      <span
+                        class="text-primary ms-auto text-sm font-medium tabular-nums"
+                        role="status"
+                      >
                         {countLabel()}
                       </span>
                     </div>
@@ -200,7 +203,6 @@ export function CatalogBrowser<Value>(props: CatalogBrowserProps<Value>) {
                                   previewCount={previewCount()}
                                   disabled={props.interactionDisabled ?? false}
                                   installedLabel={props.installedLabel}
-                                  publishedByLabel={props.publishedByLabel}
                                   showMoreLabel={props.showMoreLabel}
                                   showLessLabel={props.showLessLabel}
                                   renderIcon={props.renderIcon}

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

@@ -1,6 +1,5 @@
 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: {
@@ -17,48 +16,50 @@ export function CatalogDetail(props: {
   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>
+    <article class="grid min-w-0 gap-2" data-catalog-detail>
+      <div class="flex min-w-0 items-start gap-3 rounded-xl border border-border p-3">
+        <Show when={props.leading}>
+          <span class="shrink-0">{props.leading}</span>
+        </Show>
+        <div class="grid min-w-0 flex-1 gap-1">
+          <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>
-        </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>
+          <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>
+        <Show when={props.action || props.status}>
+          <div class="flex shrink-0 flex-col items-end gap-2">
+            {props.action}
+            {props.status}
+          </div>
+        </Show>
+      </div>
+      <div class="grid min-w-0 gap-2">{props.children}</div>
     </article>
   )
 }
 
-/** A shared surface and heading for host-specific fields, permissions, and copy. */
+/** A shared compact row 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
+      class="grid min-w-0 gap-1.5 rounded-xl border border-border p-3"
+      aria-labelledby={headingId}
+    >
+      <h3
+        id={headingId}
+        class="text-2xs font-semibold tracking-wider text-muted-foreground uppercase"
+      >
+        {props.title}
+      </h3>
+      <div class="grid min-w-0 gap-1.5">{props.children}</div>
     </section>
   )
 }

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

@@ -73,7 +73,8 @@ export type CatalogBrowserProps<Value> = Readonly<{
   backLabel: string
   detailRegionLabel: string
   installedLabel: string
-  publishedByLabel: (publisher: string) => string
+  /** Optional legacy label: rows now show the bare publisher as an accent chip. */
+  publishedByLabel?: (publisher: string) => string
   showMoreLabel: (entries: readonly CatalogBrowserEntry<Value>[], remainingCount: number) => string
   showLessLabel: string
   /** Temporarily disables catalog controls while a host menu owns interaction. */

package/src/components/composites/help-center/help-center.tsx

@@ -0,0 +1,104 @@
+import { createSignal, For, onCleanup, Show } from 'solid-js'
+import { ExternalLink } from 'lucide-solid'
+import { cn } from '#lib/utils'
+import { ActionButton } from '../action-button'
+import { Alert, AlertDescription } from '../../ui/alert'
+import { Card, CardContent, CardHeader } from '../../ui/card'
+import { Kbd, KbdGroup } from '../../ui/kbd'
+
+export type HelpShortcut = { label: string; keys: readonly string[] }
+export type HelpLink = { label: string; description?: string; url: string }
+export type HelpCenterProps = {
+  appName: string
+  shortcuts: readonly HelpShortcut[]
+  links: readonly HelpLink[]
+  openExternal?: (url: string) => Promise<void>
+  class?: string
+}
+
+/** A shared help page: real keyboard shortcuts and the application's project resources. */
+export function HelpCenter(props: HelpCenterProps) {
+  const [error, setError] = createSignal('')
+  let disposed = false
+  onCleanup(() => {
+    disposed = true
+  })
+  const openLink = async (url: string) => {
+    setError('')
+    try {
+      await props.openExternal?.(url)
+    } catch {
+      if (!disposed) setError('Could not open this help resource. Please try again.')
+    }
+  }
+  return (
+    <div class={cn('flex min-w-0 flex-col gap-5', props.class)}>
+      <div class="flex flex-col gap-2">
+        <h1 class="text-xl font-semibold tracking-tight">Help Center</h1>
+        <p class="text-sm text-muted-foreground">
+          Keyboard shortcuts and resources for {props.appName}.
+        </p>
+      </div>
+      <Card>
+        <CardHeader>
+          <h2 class="text-base font-semibold text-primary">Keyboard shortcuts</h2>
+        </CardHeader>
+        <CardContent>
+          <ul class="flex flex-col gap-3">
+            <For each={props.shortcuts}>
+              {(shortcut) => (
+                <li class="flex flex-wrap items-center justify-between gap-2">
+                  <span class="text-sm">{shortcut.label}</span>
+                  <KbdGroup>
+                    <For each={shortcut.keys}>{(key) => <Kbd>{key}</Kbd>}</For>
+                  </KbdGroup>
+                </li>
+              )}
+            </For>
+          </ul>
+        </CardContent>
+      </Card>
+      <Card>
+        <CardHeader>
+          <h2 class="text-base font-semibold text-primary">Project links</h2>
+        </CardHeader>
+        <CardContent>
+          <ul class="flex flex-col gap-4">
+            <For each={props.links}>
+              {(link) => (
+                <li class="flex min-w-0 flex-col items-start gap-1">
+                  <ActionButton
+                    as="a"
+                    variant="link"
+                    size="sm"
+                    href={link.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    tooltip={`Open ${link.label} in your browser.`}
+                    onClick={(event) => {
+                      if (props.openExternal) {
+                        event.preventDefault()
+                        void openLink(link.url)
+                      }
+                    }}
+                  >
+                    {link.label}
+                    <ExternalLink aria-hidden="true" />
+                  </ActionButton>
+                  <Show when={link.description}>
+                    <p class="text-sm text-muted-foreground">{link.description}</p>
+                  </Show>
+                </li>
+              )}
+            </For>
+          </ul>
+        </CardContent>
+      </Card>
+      <Show when={error()}>
+        <Alert variant="destructive" role="alert">
+          <AlertDescription>{error()}</AlertDescription>
+        </Alert>
+      </Show>
+    </div>
+  )
+}

package/src/components/composites/help-center/index.ts

@@ -0,0 +1,2 @@
+/** Shared keyboard shortcuts and project resource page. */
+export { HelpCenter, type HelpCenterProps, type HelpShortcut, type HelpLink } from './help-center'