@adea-ai/ui 0.142.3 → 0.143.0

package/src/components/composites/icon-picker/shell-icons.ts

@@ -0,0 +1,166 @@
+import {
+  Anchor,
+  Bot,
+  Box,
+  BookOpen,
+  Brain,
+  Briefcase,
+  Building2,
+  Camera,
+  ChartColumn,
+  Cloud,
+  Code,
+  Coffee,
+  Compass,
+  Cpu,
+  Database,
+  Dumbbell,
+  Flag,
+  Flame,
+  FlaskConical,
+  Folder,
+  FolderGit2,
+  Gamepad2,
+  Gem,
+  Globe,
+  GraduationCap,
+  Hammer,
+  Heart,
+  House,
+  Key,
+  Layers,
+  Leaf,
+  Lightbulb,
+  type LucideIcon,
+  Map as MapIcon,
+  Megaphone,
+  MessagesSquare,
+  Moon,
+  Mountain,
+  Music,
+  Newspaper,
+  Package,
+  Palette,
+  Plane,
+  Puzzle,
+  Rocket,
+  Server,
+  Shapes,
+  Shield,
+  ShoppingCart,
+  Sparkles,
+  Star,
+  Sun,
+  Target,
+  Terminal,
+  Trophy,
+  Users,
+  Utensils,
+  Wallet,
+  Wrench,
+  Zap,
+} from 'lucide-solid'
+
+/**
+ * The icons a workspace or a project may choose for itself.
+ *
+ * A curated set rather than the whole Lucide catalogue, for two reasons the
+ * picker depends on: the keys are persisted, so each one is a promise that the
+ * glyph keeps existing, and every icon here is imported by name so a consumer's
+ * bundle pays for these few dozen glyphs and not for the library.
+ *
+ * `home`, `box` and `folder` lead the list because they are the defaults the
+ * apps already use: Home workspaces carry `home`, other workspaces `box` and
+ * projects `folder`. Keys are lowercase kebab-case so they are valid project
+ * `iconKey`s as well as workspace logo values.
+ */
+export const shellIconEntries = [
+  { key: 'home', label: 'Home', icon: House },
+  { key: 'box', label: 'Box', icon: Box },
+  { key: 'folder', label: 'Folder', icon: Folder },
+  { key: 'git-folder', label: 'Repository', icon: FolderGit2 },
+  { key: 'briefcase', label: 'Briefcase', icon: Briefcase },
+  { key: 'building', label: 'Building', icon: Building2 },
+  { key: 'users', label: 'Team', icon: Users },
+  { key: 'rocket', label: 'Rocket', icon: Rocket },
+  { key: 'star', label: 'Star', icon: Star },
+  { key: 'heart', label: 'Heart', icon: Heart },
+  { key: 'code', label: 'Code', icon: Code },
+  { key: 'terminal', label: 'Terminal', icon: Terminal },
+  { key: 'cpu', label: 'Chip', icon: Cpu },
+  { key: 'server', label: 'Server', icon: Server },
+  { key: 'database', label: 'Database', icon: Database },
+  { key: 'cloud', label: 'Cloud', icon: Cloud },
+  { key: 'globe', label: 'Globe', icon: Globe },
+  { key: 'bot', label: 'Agent', icon: Bot },
+  { key: 'brain', label: 'Brain', icon: Brain },
+  { key: 'sparkles', label: 'Sparkles', icon: Sparkles },
+  { key: 'lightbulb', label: 'Idea', icon: Lightbulb },
+  { key: 'flask', label: 'Lab', icon: FlaskConical },
+  { key: 'book', label: 'Book', icon: BookOpen },
+  { key: 'graduation', label: 'Study', icon: GraduationCap },
+  { key: 'newspaper', label: 'News', icon: Newspaper },
+  { key: 'megaphone', label: 'Marketing', icon: Megaphone },
+  { key: 'chart', label: 'Chart', icon: ChartColumn },
+  { key: 'wallet', label: 'Finance', icon: Wallet },
+  { key: 'cart', label: 'Shop', icon: ShoppingCart },
+  { key: 'package', label: 'Package', icon: Package },
+  { key: 'layers', label: 'Layers', icon: Layers },
+  { key: 'puzzle', label: 'Puzzle', icon: Puzzle },
+  { key: 'shield', label: 'Security', icon: Shield },
+  { key: 'key', label: 'Key', icon: Key },
+  { key: 'wrench', label: 'Tools', icon: Wrench },
+  { key: 'hammer', label: 'Build', icon: Hammer },
+  { key: 'zap', label: 'Bolt', icon: Zap },
+  { key: 'flame', label: 'Flame', icon: Flame },
+  { key: 'target', label: 'Target', icon: Target },
+  { key: 'trophy', label: 'Trophy', icon: Trophy },
+  { key: 'flag', label: 'Flag', icon: Flag },
+  { key: 'compass', label: 'Compass', icon: Compass },
+  { key: 'map', label: 'Map', icon: MapIcon },
+  { key: 'plane', label: 'Travel', icon: Plane },
+  { key: 'anchor', label: 'Anchor', icon: Anchor },
+  { key: 'mountain', label: 'Mountain', icon: Mountain },
+  { key: 'leaf', label: 'Garden', icon: Leaf },
+  { key: 'sun', label: 'Sun', icon: Sun },
+  { key: 'moon', label: 'Moon', icon: Moon },
+  { key: 'palette', label: 'Design', icon: Palette },
+  { key: 'camera', label: 'Camera', icon: Camera },
+  { key: 'music', label: 'Music', icon: Music },
+  { key: 'gamepad', label: 'Games', icon: Gamepad2 },
+  { key: 'coffee', label: 'Coffee', icon: Coffee },
+  { key: 'utensils', label: 'Kitchen', icon: Utensils },
+  { key: 'dumbbell', label: 'Gym', icon: Dumbbell },
+  { key: 'gem', label: 'Gem', icon: Gem },
+  { key: 'messages', label: 'Chat', icon: MessagesSquare },
+  { key: 'shapes', label: 'Shapes', icon: Shapes },
+] as const satisfies readonly Readonly<{ key: string; label: string; icon: LucideIcon }>[]
+
+export type ShellIconKey = (typeof shellIconEntries)[number]['key']
+
+const shellIconByKey: ReadonlyMap<string, LucideIcon> = new Map(
+  shellIconEntries.map((entry) => [entry.key, entry.icon])
+)
+
+/** Whether a stored string names an icon in the curated set. */
+export function isShellIconKey(value: string): value is ShellIconKey {
+  return shellIconByKey.has(value)
+}
+
+/**
+ * The glyph for a stored key, or `fallback` when the key is not in the set.
+ * Callers pass the fallback their surface wants (a workspace falls back to
+ * `box`, a project to `folder`), so an unknown key degrades to the default
+ * rather than to an empty tile.
+ */
+export function resolveShellIcon(
+  key: string | null | undefined,
+  fallback: ShellIconKey = 'folder'
+): LucideIcon {
+  return (key ? shellIconByKey.get(key) : undefined) ?? shellIconByKey.get(fallback)!
+}
+
+/** The picker's accessible name for a key. */
+export function shellIconLabel(key: string): string {
+  return shellIconEntries.find((entry) => entry.key === key)?.label ?? key
+}

package/src/components/composites/workspace-switcher/index.ts

@@ -0,0 +1,5 @@
+export {
+  WorkspaceSwitcher,
+  type WorkspaceSwitcherItem,
+  type WorkspaceSwitcherProps,
+} from './workspace-switcher'

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/components/layout/top-bar/top-bar.tsx

@@ -14,9 +14,22 @@ import { cn } from '#lib/utils'
  *
  * The centre track is sized for a lone search field. A bar whose centre holds
  * more than that, such as a search plus an action beside it, passes
- * `centerWidth="wide"`: the centre then stays fluid below 1280px, never
- * narrower than 7rem so its controls are not squeezed out by a long leading
- * group (which scrolls instead), and takes a wider fixed track above it.
+ * `centerWidth="wide"`: the centre then stays fluid below 1280px, with each
+ * side group sized to its content but capped between 30% and 40% of the row
+ * (a longer group scrolls instead): the cap is 30% on the narrowest rows and
+ * grows to 40% as the row widens, so full side groups never squeeze the
+ * centre's search out of it and enlarged text never pushes a short leading
+ * control such as a navigation toggle out of the row. Above 1280px it takes a
+ * wider fixed track.
+ *
+ * A wide bar also never squeezes its centre to nothing. When the row is
+ * narrower than 19rem (measured in rem, so enlarged text reaches it at a wider
+ * window) the centre moves to a second row of its own and the two side groups
+ * share the first, the trailing group taking the remainder beside the leading
+ * group's cap, so the leading and trailing controls and the whole centre each
+ * keep a full row instead of fighting for one. The bar grows from one row
+ * to two only then. The wide layout places the leading group, centre and
+ * trailing group as its first, second and third children.
  *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
@@ -35,9 +48,11 @@ export type TopBarProps = ComponentProps<'header'> & {
   glass?: boolean
   /**
    * How wide the centre track is. `field` (default) suits a lone search field.
-   * `wide` suits a centre that also holds an action: fluid below 1280px and
-   * never narrower than 7rem (the side groups scroll to make room), then a
-   * clamp of 32vw up to 672px between equal side tracks.
+   * `wide` suits a centre that also holds an action: fluid below 1280px between
+   * side groups sized to their content and capped between 30% and 40% of the
+   * row (a longer group scrolls), then a clamp of 32vw up to 672px between equal
+   * side tracks.
+   * Below a 19rem row the centre drops to a second row of its own.
    */
   centerWidth?: 'field' | 'wide'
 }
@@ -57,8 +72,12 @@ export function TopBar(props: TopBarProps) {
       data-slot="top-bar"
       class={cn(
         'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        /* The bar is its own container so its children can move to a second
+           row by the row's width in rem, which enlarged text shrinks. The
+           first row keeps the bar's height (less the 1px bottom border); the
+           second only exists when the centre has dropped onto it. */
         local.centerWidth === 'wide' &&
-          'grid-cols-[auto_minmax(7rem,1fr)_auto] gap-2 md:grid-cols-[auto_minmax(7rem,1fr)_auto] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)]',
+          '@container/top-bar h-auto grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] grid-rows-[minmax(calc(var(--topbar-height)-1px),auto)] gap-x-2 gap-y-0 md:grid-cols-[fit-content(max(30%,min(40%,calc(50%-3.75rem))))_minmax(0,1fr)_fit-content(max(30%,min(40%,calc(50%-3.75rem))))] xl:grid-cols-[minmax(0,1fr)_clamp(240px,32vw,672px)_minmax(0,1fr)] [&>:nth-child(2)]:@max-[19rem]/top-bar:col-span-full [&>:nth-child(2)]:@max-[19rem]/top-bar:row-start-2 [&>:nth-child(2)]:@max-[19rem]/top-bar:pb-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-span-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:col-start-2 [&>:nth-child(3)]:@max-[19rem]/top-bar:row-start-1',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         /* Each edge gets exactly one inline-padding utility. A window inset
@@ -93,7 +112,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
       data-slot="top-bar-section"
       class={cn(
         'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
-        local.align === 'end' && 'md:justify-end',
+        local.align === 'end' && 'md:justify-end-safe',
         local.align !== 'end' && 'justify-start',
         local.class
       )}