@adea-ai/ui 0.96.0 → 0.97.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.96.0",
+  "version": "0.97.1",
   "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

@@ -1783,6 +1783,32 @@
         }
       ]
     },
+    {
+      "name": "about-dialog",
+      "type": "registry:ui",
+      "title": "About Dialog",
+      "description": "Shared app identity and version support dialog.",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/action-button",
+        "@adea-ai/ui/alert",
+        "@adea-ai/ui/dialog"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/about-dialog/about-dialog.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/about-dialog/about-dialog.tsx"
+        },
+        {
+          "path": "src/components/composites/about-dialog/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/about-dialog/index.ts"
+        }
+      ]
+    },
     {
       "name": "account-menu",
       "type": "registry:ui",
@@ -1931,6 +1957,34 @@
         }
       ]
     },
+    {
+      "name": "help-center",
+      "type": "registry:ui",
+      "title": "Help Center",
+      "description": "Shared keyboard shortcuts and project resource page.",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/action-button",
+        "@adea-ai/ui/alert",
+        "@adea-ai/ui/card",
+        "@adea-ai/ui/kbd",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/help-center/help-center.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/help-center/help-center.tsx"
+        },
+        {
+          "path": "src/components/composites/help-center/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/help-center/index.ts"
+        }
+      ]
+    },
     {
       "name": "list-row",
       "type": "registry:ui",
@@ -2081,6 +2135,7 @@
         "lucide-solid@^1.48.0"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/action-button",
         "@adea-ai/ui/badge",
         "@adea-ai/ui/button",
         "@adea-ai/ui/dialog",

package/src/components/composites/about-dialog/about-dialog.tsx

@@ -0,0 +1,161 @@
+import {
+  createEffect,
+  createMemo,
+  createSignal,
+  on,
+  onCleanup,
+  Show,
+  type Accessor,
+} from 'solid-js'
+import { ExternalLink } from 'lucide-solid'
+import { ActionButton } from '../action-button'
+import { Alert, AlertDescription } from '../../ui/alert'
+import { Dialog, DialogContent, DialogTitle } from '../../ui/dialog'
+import { createDialogFocusRestoration } from '../../ui/dialog/dialog'
+
+export type AboutDialogProps = {
+  appName: string
+  appIcon: string
+  version?: string
+  platform: string
+  copyright: string
+  sourceUrl: string
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  copyVersionInfo?: (text: string) => Promise<void>
+  openExternal?: (url: string) => Promise<void>
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+}
+
+/** Compact app identity and support details, with clipboard and native-browser adapters. */
+export function AboutDialog(props: AboutDialogProps) {
+  const versionLabel = () => (props.version ? `Version ${props.version}` : 'Version unavailable')
+  const versionInfo = createMemo(() =>
+    [props.appName, versionLabel(), `Platform: ${props.platform}`].join('\n')
+  )
+  const [copied, setCopied] = createSignal(false)
+  const [error, setError] = createSignal('')
+  const [copying, setCopying] = createSignal(false)
+  let disposed = false
+  let epoch = 0
+  let timer: ReturnType<typeof setTimeout> | undefined
+  onCleanup(() => {
+    disposed = true
+    epoch += 1
+    clearTimeout(timer)
+  })
+  createEffect(
+    on(
+      () => props.open,
+      () => {
+        epoch += 1
+        clearTimeout(timer)
+        setCopied(false)
+        setError('')
+        setCopying(false)
+      }
+    )
+  )
+  const focus = createDialogFocusRestoration({
+    open: () => props.open,
+    restoreFocusRef: props.restoreFocusRef,
+  })
+  const copy = async () => {
+    const owner = epoch
+    const active = () => !disposed && props.open && owner === epoch
+    setError('')
+    setCopied(false)
+    setCopying(true)
+    try {
+      if (props.copyVersionInfo) await props.copyVersionInfo(versionInfo())
+      else await navigator.clipboard.writeText(versionInfo())
+      if (!active()) return
+      setCopied(true)
+      clearTimeout(timer)
+      timer = setTimeout(() => {
+        if (active()) setCopied(false)
+      }, 2000)
+    } catch {
+      if (active()) setError('Could not copy version info. Please try again.')
+    } finally {
+      if (active()) setCopying(false)
+    }
+  }
+  const openSource = async () => {
+    const owner = epoch
+    setError('')
+    try {
+      await props.openExternal?.(props.sourceUrl)
+    } catch {
+      if (!disposed && props.open && owner === epoch)
+        setError('Could not open the source repository. Please try again.')
+    }
+  }
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <DialogContent
+        onKeyDown={(event: KeyboardEvent) => {
+          // Tooltip help on the identity actions cannot trap Escape in this popup.
+          if (event.key === 'Escape' && !event.defaultPrevented) {
+            event.preventDefault()
+            props.onOpenChange(false)
+          }
+        }}
+        aria-label={`About ${props.appName}`}
+        aria-labelledby=""
+        aria-describedby={undefined}
+        onOpenAutoFocus={(event) => {
+          focus.onOpenAutoFocus(event)
+          // Let the identity be read before focus opens explanatory action help.
+          if (!event.defaultPrevented && event.currentTarget instanceof HTMLElement) {
+            event.preventDefault()
+            event.currentTarget.focus({ preventScroll: true })
+          }
+        }}
+        onCloseAutoFocus={focus.onCloseAutoFocus}
+      >
+        <div class="flex flex-col items-center gap-3 px-6 py-8 text-center">
+          <img src={props.appIcon} alt="" class="size-16" aria-hidden="true" />
+          <DialogTitle>{props.appName}</DialogTitle>
+          <p class="text-sm text-primary">{versionLabel()}</p>
+          <p class="text-xs text-muted-foreground">{props.copyright}</p>
+          <div class="flex flex-wrap items-center justify-center gap-3">
+            <ActionButton
+              type="button"
+              variant="outline"
+              size="sm"
+              busy={copying()}
+              tooltip="Copy the app version and runtime details for a support report."
+              onClick={() => void copy()}
+            >
+              {copied() ? 'Copied' : 'Copy version info'}
+            </ActionButton>
+            <ActionButton
+              as="a"
+              variant="link"
+              size="sm"
+              href={props.sourceUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              tooltip={`Open the ${props.appName} source repository in your browser.`}
+              onClick={(event) => {
+                if (props.openExternal) {
+                  event.preventDefault()
+                  void openSource()
+                }
+              }}
+            >
+              <ExternalLink aria-hidden="true" />
+              View source
+            </ActionButton>
+          </div>
+          <Show when={error()}>
+            <Alert variant="destructive" role="alert">
+              <AlertDescription>{error()}</AlertDescription>
+            </Alert>
+          </Show>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/composites/about-dialog/index.ts

@@ -0,0 +1,2 @@
+/** Shared app identity and version support dialog. */
+export { AboutDialog, type AboutDialogProps } from './about-dialog'

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

@@ -56,6 +56,12 @@ export type AccountMenuItem = {
 
 export type AccountMenuProps = {
   class?: string
+  /** Anchor a rail menu beside its trigger, or keep the default upward placement. */
+  placement?: ComponentProps<typeof DropdownMenu>['placement']
+  /** Space between the trigger and menu, in pixels. */
+  gutter?: ComponentProps<typeof DropdownMenu>['gutter']
+  /** Hide the menu pointer when aligning it beside a compact rail. */
+  hideArrow?: boolean
   /** The trigger size. Icon-only menus default to the standard icon size. */
   size?: ButtonProps['size']
   /** The entries above the separator. */
@@ -64,6 +70,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. */
@@ -86,10 +94,14 @@ const FALLBACK_ICONS: Record<string, typeof Settings2> = {
 export function AccountMenu(props: AccountMenuProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'placement',
+    'gutter',
+    'hideArrow',
     'size',
     'items',
     'platform',
     'authenticated',
+    'showSession',
     'busy',
     'label',
     'onSignIn',
@@ -119,6 +131,8 @@ export function AccountMenu(props: AccountMenuProps) {
     <Tooltip open={tooltipOpen()} onOpenChange={(open) => setTooltipOpen(open && !menuOpen())}>
       <DropdownMenu
         modal={false}
+        placement={local.placement ?? 'top-start'}
+        gutter={local.gutter}
         onOpenChange={(open) => {
           setMenuOpen(open)
           if (open) setTooltipOpen(false)
@@ -139,7 +153,7 @@ export function AccountMenu(props: AccountMenuProps) {
         </TooltipTrigger>
         <TooltipContent placement="top">{local.label ?? 'Account and settings'}</TooltipContent>
         <DropdownMenuContent
-          placement="top-start"
+          hideArrow={local.hideArrow}
           class="min-w-56 max-h-(--kb-popper-available-height) overflow-x-hidden overflow-y-auto"
           onCloseAutoFocus={(event) => {
             const selection = pendingAfterClose
@@ -174,24 +188,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/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'