@adea-ai/ui 0.142.4 → 0.143.0

package/src/components/composites/workspace-switcher/workspace-switcher.tsx

@@ -0,0 +1,128 @@
+import { ChevronDown, Plus, Settings } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
+import { cn } from '#lib/utils'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../ui/dropdown-menu'
+import { ActionButton } from '../action-button'
+
+/**
+ * WorkspaceSwitcher.
+ *
+ * The workspace picker that sits in the top bar beside the sidebar toggle. One
+ * ghost button shows the current workspace's mark and name; pressing it opens a
+ * radio list of the others. Choosing one only changes what the window is
+ * looking at: the switcher reports the id and the host decides what that means,
+ * which is why it carries no status of its own and never closes, restarts or
+ * moves anything.
+ *
+ * It is deliberately the simple interaction (a single menu, not a nested
+ * accordion): the sidebar below it already shows what is inside the chosen
+ * workspace, so the switcher's only job is to name the workspace and let the
+ * user change it.
+ */
+export type WorkspaceSwitcherItem = {
+  id: string
+  name: string
+  /** The workspace's mark, drawn in the trigger and its row. Decorative. */
+  mark: JSX.Element
+  /** A quiet trailing readout in the row, e.g. an unread count. Optional. */
+  detail?: JSX.Element
+}
+
+export type WorkspaceSwitcherProps = {
+  workspaces: readonly WorkspaceSwitcherItem[]
+  /** The current workspace's id. */
+  value: string | undefined
+  onValueChange(id: string): void
+  /** Offered at the foot of the menu when present. */
+  onCreate?(): void
+  createLabel?: string
+  /** Offered beside the create action when present: open the current workspace's settings. */
+  onManage?(): void
+  manageLabel?: string
+  /** The menu's heading; also the trigger's accessible-name prefix. */
+  label?: string
+  /** Shown while no workspace is current. */
+  placeholder?: string
+  disabled?: boolean
+  class?: string
+}
+
+export function WorkspaceSwitcher(props: WorkspaceSwitcherProps) {
+  const [open, setOpen] = createSignal(false)
+  const current = () => props.workspaces.find((item) => item.id === props.value)
+  const label = () => props.label ?? 'Workspaces'
+
+  return (
+    <DropdownMenu modal={false} open={open()} onOpenChange={setOpen}>
+      <DropdownMenuTrigger
+        as={ActionButton}
+        variant="ghost"
+        size="sm"
+        disabled={props.disabled}
+        data-slot="workspace-switcher"
+        tooltip={`Workspace: ${current()?.name ?? props.placeholder ?? 'Choose workspace'}`}
+        aria-label={`Switch workspace, current: ${current()?.name ?? 'none'}`}
+        class={cn('max-w-full min-w-0 shrink', props.class)}
+      >
+        <span aria-hidden="true" class="flex shrink-0">
+          {current()?.mark}
+        </span>
+        <span class="min-w-0 max-w-40 truncate">
+          {current()?.name ?? props.placeholder ?? 'Choose workspace'}
+        </span>
+        <ChevronDown aria-hidden="true" class="size-3.5 shrink-0 text-muted-foreground" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" sideOffset={6} class="min-w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>{label()}</DropdownMenuLabel>
+          <DropdownMenuRadioGroup
+            value={props.value}
+            onChange={(value) => {
+              setOpen(false)
+              const id = String(value)
+              if (id !== props.value) props.onValueChange(id)
+            }}
+          >
+            <For each={props.workspaces}>
+              {(item) => (
+                <DropdownMenuRadioItem value={item.id} closeOnSelect data-workspace-id={item.id}>
+                  <span aria-hidden="true" class="flex shrink-0">
+                    {item.mark}
+                  </span>
+                  <span class="min-w-0 flex-1 truncate">{item.name}</span>
+                  <Show when={item.detail}>{item.detail}</Show>
+                </DropdownMenuRadioItem>
+              )}
+            </For>
+          </DropdownMenuRadioGroup>
+        </DropdownMenuGroup>
+        <Show when={props.onCreate || props.onManage}>
+          <DropdownMenuSeparator />
+          <Show when={props.onCreate}>
+            <DropdownMenuItem onSelect={() => props.onCreate?.()}>
+              <Plus aria-hidden="true" />
+              {props.createLabel ?? 'New workspace'}
+            </DropdownMenuItem>
+          </Show>
+          <Show when={props.onManage}>
+            <DropdownMenuItem onSelect={() => props.onManage?.()}>
+              <Settings aria-hidden="true" />
+              {props.manageLabel ?? 'Workspace settings…'}
+            </DropdownMenuItem>
+          </Show>
+        </Show>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  )
+}

package/src/components/layout/shell-rail/index.ts

@@ -0,0 +1 @@
+export { ShellRail, type ShellRailProps } from './shell-rail'

package/src/components/layout/shell-rail/shell-rail.tsx

@@ -0,0 +1,120 @@
+import { Search } from 'lucide-solid'
+import type { ComponentProps, JSX } from 'solid-js'
+import { children, For, Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Kbd, KbdGroup } from '../../ui/kbd'
+import { Separator } from '../../ui/separator'
+import {
+  SideRail,
+  SideRailContent,
+  SideRailFooter,
+  SideRailHeader,
+  SideRailItem,
+} from '../side-rail'
+
+/**
+ * ShellRail.
+ *
+ * The side rail both applications put at the window's leading edge: always the
+ * collapsed icon column, with the app's mark at the top, a search entry point
+ * under it, the app's destinations in the middle and a footer for account and
+ * settings.
+ *
+ * The rail is never the thing the sidebar toggle collapses. The toggle belongs
+ * to the sidebar beside the rail, which is why this component takes no
+ * `collapsed` prop: a rail that could be expanded would be a second sidebar,
+ * and the two apps would drift on which of them the toggle meant.
+ *
+ * Destinations are the caller's: pass `SideRailItem`s (or a `SideRailSection`)
+ * as children. The mark, the search row and the footer are slots with the
+ * geometry decided here, so the rail's rhythm cannot differ between apps.
+ */
+export type ShellRailProps = Omit<ComponentProps<'nav'>, 'children'> & {
+  /** The app's mark. Decorative: the rail names itself through `aria-label`. */
+  mark: JSX.Element
+  /** Opens search. Omit to leave the search row out. */
+  onSearch?: () => void
+  /** The search row's accessible name. */
+  searchLabel?: string
+  /** The chord as it is announced, e.g. `Meta+K Control+K`. */
+  searchKeyshortcuts?: string
+  /** The cap labels drawn under the icon, in press order, e.g. `['⌘', 'K']`. */
+  searchKeys?: readonly string[]
+  /** Destinations between the search row and the footer. */
+  children?: JSX.Element
+  /** Account, plugins, settings. Pinned to the rail's foot. */
+  footer?: JSX.Element
+}
+
+export function ShellRail(props: ShellRailProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'mark',
+    'onSearch',
+    'searchLabel',
+    'searchKeyshortcuts',
+    'searchKeys',
+    'children',
+    'footer',
+    'aria-label',
+  ])
+
+  // Resolve the footer once: reading a JSX prop twice builds two copies.
+  const footer = children(() => local.footer)
+  const content = children(() => local.children)
+
+  return (
+    <SideRail
+      collapsed
+      data-slot="shell-rail"
+      aria-label={local['aria-label'] ?? 'Global navigation'}
+      class={cn('relative z-(--z-sticky) min-w-0', local.class)}
+      {...rest}
+    >
+      <SideRailHeader data-slot="shell-rail-header" class="h-auto justify-center px-0 pt-1">
+        <span
+          data-slot="shell-rail-mark"
+          aria-hidden="true"
+          class="flex h-rail-item items-center justify-center"
+        >
+          {local.mark}
+        </span>
+      </SideRailHeader>
+
+      <SideRailContent data-slot="shell-rail-content" class="pt-0.5">
+        <Show when={local.onSearch}>
+          <div data-slot="shell-rail-search" class="flex min-w-0 flex-col gap-0.5">
+            <SideRailItem
+              as="button"
+              type="button"
+              label={local.searchLabel ?? 'Search'}
+              aria-label={local.searchLabel ?? 'Search'}
+              keyshortcuts={local.searchKeyshortcuts}
+              shortcut={local.searchKeys?.join('')}
+              onClick={() => local.onSearch?.()}
+            >
+              <Search aria-hidden="true" />
+            </SideRailItem>
+            {/* The chord is drawn as key caps under the icon: the one row that
+                advertises a shortcut. The accessible chord stays on the row. */}
+            <Show when={local.searchKeys?.length}>
+              <KbdGroup
+                size="compact"
+                class="justify-center pb-1"
+                data-slot="shell-rail-search-keys"
+              >
+                <For each={local.searchKeys}>{(key) => <Kbd size="compact">{key}</Kbd>}</For>
+              </KbdGroup>
+            </Show>
+          </div>
+          <Separator class="my-1" />
+        </Show>
+        {content()}
+      </SideRailContent>
+
+      <Show when={footer()}>
+        <SideRailFooter data-slot="shell-rail-footer">{footer()}</SideRailFooter>
+      </Show>
+    </SideRail>
+  )
+}

package/src/components/layout/shell-top-bar/index.ts

@@ -0,0 +1 @@
+export { ShellTopBar, type ShellTopBarProps } from './shell-top-bar'

package/src/components/layout/shell-top-bar/shell-top-bar.tsx

@@ -0,0 +1,185 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { children, Show, splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Separator } from '../../ui/separator'
+
+/**
+ * ShellTopBar.
+ *
+ * The window's top bar as both applications draw it. It has two halves with a
+ * vertical divider between them:
+ *
+ *   - **Leading**: history arrows, the sidebar toggle and the workspace
+ *     switcher, in that order. This is the part that belongs to the window.
+ *   - **Content**: breadcrumbs, search and the view's actions. This is the part
+ *     that belongs to the view, and it always sits to the right of the divider.
+ *
+ * ## Why the divider tracks the sidebar
+ *
+ * With the sidebar open the divider lands on the sidebar's trailing edge, so the
+ * bar reads as the rail and sidebar's header on one side and the content's
+ * header on the other. The bar spans the rail and the sidebar (they sit under
+ * it), so the leading half is as wide as `--rail-width` plus the sidebar's width
+ * less the bar's own start padding. The host publishes the width as
+ * `--shell-sidebar-width` on an ancestor; the fallback of 17rem matches the
+ * default sidebar. Below the 48rem breakpoint the sidebar is a drawer and the
+ * leading half is only as wide as its controls.
+ *
+ * ## Narrow windows
+ *
+ * The bar is its own container. Below 34rem the search drops to a row of its
+ * own so the leading controls, the breadcrumb and the actions keep their room;
+ * the breadcrumb is the first thing to truncate.
+ *
+ * On a frameless desktop window the bar is the drag region (`draggable`) and
+ * every control opts back out; `macosInset` and `windowsInset` reserve the
+ * native window controls.
+ */
+export type ShellTopBarProps = Omit<ComponentProps<'header'>, 'children'> & {
+  /** History arrows. Rendered first, left of the sidebar toggle. */
+  navigation?: JSX.Element
+  /** The sidebar toggle button. */
+  sidebarToggle?: JSX.Element
+  /** The workspace switcher. */
+  workspace?: JSX.Element
+  /**
+   * Whether the sidebar is open at wide widths. Open, the divider aligns with
+   * the sidebar's edge; closed, the leading half hugs its controls.
+   */
+  sidebarOpen?: boolean
+  /**
+   * The open sidebar's width in pixels. Published as `--shell-sidebar-width` on
+   * the bar so the divider tracks a resizable sidebar; leave it unset to use an
+   * ancestor's variable or the 17rem default.
+   */
+  sidebarWidth?: number
+  /** Breadcrumbs or the view's title. Takes the free space and truncates first. */
+  breadcrumb?: JSX.Element
+  /** The view's search. */
+  search?: JSX.Element
+  /** The view's actions, at the trailing edge. */
+  actions?: JSX.Element
+  /** Make the bar a drag region, for a frameless window. */
+  draggable?: boolean
+  /** Reserve space for the macOS traffic lights. */
+  macosInset?: boolean
+  /** Reserve space for the Windows caption buttons. */
+  windowsInset?: boolean
+  /** Blur the content scrolling under the bar. */
+  glass?: boolean
+}
+
+export function ShellTopBar(props: ShellTopBarProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'navigation',
+    'sidebarToggle',
+    'workspace',
+    'sidebarOpen',
+    'sidebarWidth',
+    'breadcrumb',
+    'search',
+    'actions',
+    'draggable',
+    'macosInset',
+    'windowsInset',
+    'glass',
+  ])
+
+  // Resolve each slot once: a JSX prop is a getter that builds its elements on
+  // every read, so testing it with `Show` and then rendering it would build
+  // (and run the refs of) two copies.
+  const navigation = children(() => local.navigation)
+  const sidebarToggle = children(() => local.sidebarToggle)
+  const workspace = children(() => local.workspace)
+  const breadcrumb = children(() => local.breadcrumb)
+  const search = children(() => local.search)
+  const actions = children(() => local.actions)
+
+  return (
+    <header
+      data-slot="shell-top-bar"
+      class={cn(
+        '@container/shell-top-bar relative z-(--z-sticky) flex min-h-topbar shrink-0 flex-wrap items-center border-b border-border bg-card text-card-foreground',
+        local.glass && 'glass-panel',
+        local.draggable && 'window-drag',
+        /* Each edge gets exactly one inline-padding utility, for the reason the
+           shared TopBar documents: two would tie-break by build order. The inset
+           is also published as a variable so the leading half can subtract it. */
+        local.macosInset
+          ? 'window-inset-macos [--shell-top-bar-inset:84px]'
+          : 'ps-3 [--shell-top-bar-inset:0.75rem]',
+        local.windowsInset ? 'window-inset-windows' : 'pe-3',
+        local.class
+      )}
+      style={
+        local.sidebarWidth === undefined
+          ? undefined
+          : { '--shell-sidebar-width': `${local.sidebarWidth}px` }
+      }
+      {...rest}
+    >
+      <div
+        data-slot="shell-top-bar-leading"
+        data-sidebar-open={local.sidebarOpen ? 'true' : 'false'}
+        class={cn(
+          'window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden pe-3',
+          /* Wide and open: span the rail and the sidebar so the divider lands on
+             the sidebar's edge. The sidebar's own border is the 1px the divider
+             overlaps, so no extra allowance is needed. */
+          local.sidebarOpen &&
+            'md:w-[calc(var(--rail-width)+var(--shell-sidebar-width,17rem)-var(--shell-top-bar-inset))]'
+        )}
+      >
+        <Show when={navigation()}>
+          <div data-slot="shell-top-bar-navigation" class="flex shrink-0 items-center gap-2">
+            {navigation()}
+          </div>
+        </Show>
+        <Show when={sidebarToggle()}>
+          <div data-slot="shell-top-bar-toggle" class="flex shrink-0 items-center">
+            {sidebarToggle()}
+          </div>
+        </Show>
+        <Show when={workspace()}>
+          <div data-slot="shell-top-bar-workspace" class="flex min-w-0 items-center">
+            {workspace()}
+          </div>
+        </Show>
+      </div>
+      <Separator
+        orientation="vertical"
+        data-slot="shell-top-bar-divider"
+        aria-hidden="true"
+        class="h-5"
+      />
+      <Show when={breadcrumb()}>
+        <div
+          data-slot="shell-top-bar-breadcrumb"
+          class="window-no-drag flex h-topbar min-w-0 flex-1 items-center truncate ps-3 text-sm [&_:is(a,button)]:window-no-drag"
+        >
+          {breadcrumb()}
+        </div>
+      </Show>
+      <Show when={!breadcrumb()}>
+        <div class="min-w-0 flex-1" aria-hidden="true" />
+      </Show>
+      <Show when={search()}>
+        <div
+          data-slot="shell-top-bar-search"
+          class="window-no-drag min-w-0 max-w-md shrink basis-72 px-3 @max-[34rem]/shell-top-bar:order-last @max-[34rem]/shell-top-bar:max-w-none @max-[34rem]/shell-top-bar:basis-full @max-[34rem]/shell-top-bar:pb-2"
+        >
+          {search()}
+        </div>
+      </Show>
+      <Show when={actions()}>
+        <div
+          data-slot="shell-top-bar-actions"
+          class="window-no-drag flex h-topbar min-w-0 shrink-0 items-center gap-2 overflow-x-auto overflow-y-hidden ps-1"
+        >
+          {actions()}
+        </div>
+      </Show>
+    </header>
+  )
+}

package/src/index.ts

@@ -100,6 +100,8 @@ export * from './components/layout/sidebar-nav'
 export * from './components/layout/contextual-sidebar'
 export * from './components/layout/status-bar'
 export * from './components/layout/top-bar'
+export * from './components/layout/shell-top-bar'
+export * from './components/layout/shell-rail'
 
 /* --- Conversation -------------------------------------------------------- */
 export * from './components/conversation'
@@ -141,6 +143,9 @@ export * from './components/composites/update-dialog'
 export * from './components/composites/about-dialog'
 export * from './components/composites/help-center'
 export * from './components/composites/workspace-mark'
+export * from './components/composites/workspace-switcher'
+export * from './components/composites/icon-picker'
+export * from './components/composites/accent-picker'
 
 /* --- Library ------------------------------------------------------------- */
 export { cn } from './lib/utils'