@adea-ai/ui 0.88.0 → 0.89.1

package/dist/index.js

@@ -106,6 +106,8 @@ import { CatalogBrowser } from "./components/composites/catalog-browser/catalog-
 import { CatalogDetail, CatalogDetailSection } from "./components/composites/catalog-browser/catalog-detail.js";
 import { ListGroup, ListRow } from "./components/composites/list-row/list-row.js";
 import { SettingsField, SettingsPage, SettingsRow, SettingsSection } from "./components/composites/settings/settings.js";
+import { SettingsNavigation } from "./components/composites/settings/settings-navigation.js";
+import { SettingsLayout } from "./components/composites/settings/settings-layout.js";
 import { PropertyList, PropertyRow, PropertyTerm, PropertyValue, Stat, StatGroup } from "./components/composites/stat/stat.js";
 import { PalettePreview, ThemeMiniature, ThemeMiniatureSplit } from "./components/composites/appearance-editor/theme-preview.js";
 import { AppearanceEditor, AppearancePopover } from "./components/composites/appearance-editor/appearance-editor.js";
@@ -113,4 +115,4 @@ import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "./lib/ver
 import { UpdateDialog } from "./components/composites/update-dialog/update-dialog.js";
 import { WorkspaceMark } from "./components/composites/workspace-mark/workspace-mark.js";
 import { writeClipboardText } from "./lib/clipboard.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, writeClipboardText, zIndexTokens };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountMenu, ActionButton, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellMain, AppearanceEditor, AppearancePanel, AppearancePopover, AspectRatio, AttachmentCard, Avatar, AvatarFallback, AvatarImage, Badge, Board, BoardCardBody, BoardCardTitle, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator, BusySendButton, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, CalendarSurface, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CatalogBrowser, CatalogDetail, CatalogDetailSection, ChatComposer, Checkbox, CheckboxDescription, CheckboxLabel, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, Combobox, ComboboxClear, ComboboxContent, ComboboxControl, ComboboxInput, ComboboxItem, ComboboxSection, ComboboxTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandLoading, CommandSeparator, CommandShortcut, ComposerAttachmentButton, ComposerHint, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, ConversationAvatar, ConversationSurface, DatePicker, DetailPanel, DetailPanelBody, DetailPanelField, DetailPanelHeader, DetailPanelSection, Dialog, DialogClose, DialogCloseButton, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DiffBlock, DiffSummary, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityIcon, FLOATING_PREVIEW_CORNER_RADIUS, FLOATING_PREVIEW_EDGE_GAP, Field, FieldDescription, FieldError, FieldGroup, FieldInput, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTextArea, FloatingPreview, FormField, HoverCard, HoverCardContent, HoverCardTrigger, InlineCode, Input, InputControl, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputOtp, InputOtpCaret, Item, ItemDescription, ItemEmpty, ItemGroup, ItemGroupEntry, ItemTitle, Kbd, KbdGroup, Label, ListGroup, ListRow, MAX_LAYOUT_DEPTH, MAX_LAYOUT_LEAVES, MAX_SPLIT_RATIO, MIN_SPLIT_RATIO, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, MessageBody, MessageComposer, MessageDayDivider, MessageGroup, MessageRow, ModalDialog, Motion, NO_FLOATING_PREVIEW_OBSTACLES, NO_PREVIEW_MINI_PLAYER_OBSTACLES, NativeSelect, NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuGroupLabel, NavigationMenuItem, NavigationMenuMenu, NavigationMenuSeparator, NavigationMenuTrigger, NavigationMenuViewport, NumberField, OrbitItem, OrbitLayout, PASTE_THRESHOLD_CHARS, PASTE_THRESHOLD_LINES, PASTE_TOKEN_REGEX, PREVIEW_MINI_PLAYER_CORNER_RADIUS, PREVIEW_MINI_PLAYER_EDGE_GAP, Page, PageHeader, PageHeaderActions, PageHeaderContent, PageHeaderDescription, PageHeaderTitle, PageSection, Pagination, PaginationEllipsis, PaginationItem, PaginationNext, PaginationPrevious, PalettePreview, Panel, PanelActions, PanelBody, PanelCard, PanelDescription, PanelFooter, PanelHeader, PanelPlaceholder, PanelTitle, PanelToolbar, Popover, PopoverAnchor, PopoverCloseButton, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger, Presence, Progress, PropertyList, PropertyRow, PropertyTerm, PropertyValue, RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, SecretInputGroup, Select, SelectChevronsUpDown, SelectContent, SelectItem, SelectLabel, SelectSection, SelectTrigger, SelectValue, Separator, SettingsField, SettingsLayout, SettingsNavigation, SettingsPage, SettingsRow, SettingsSection, Sheet, SheetBody, SheetCloseButton, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SideRail, SideRailButton, SideRailContent, SideRailFooter, SideRailHeader, SideRailItem, SideRailSection, SidebarNav, SidebarNavButton, SidebarNavContent, SidebarNavFooter, SidebarNavHeader, SidebarNavItem, SidebarNavResizeHandle, SidebarNavSection, SidebarNavTitle, Skeleton, SkipLink, Slider, Spinner, SplitLayout, Stat, StatGroup, StatusBar, StatusBarItem, StatusBarSpacer, StatusChip, StatusList, Switch, SwitchDescription, SwitchLabel, TALL_CODE_BLOCK_PX, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableNumericCell, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TextLink, Textarea, ThemeMiniature, ThemeMiniatureSplit, ThemeModeToggle, ThemePicker, ThemePreview, ThemeProvider, ThemeSwatch, ThemeToggle, ThreadPanel, Toaster, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, TopBarBreadcrumb, TopBarPill, TopBarSearch, TopBarSection, TopBarTitle, TranscriptComposition, UpdateDialog, ValueCombobox, VirtualWindow, WorkspaceMark, accentPresets, alertVariants, allTokens, badgeVariants, boardCardTitleVariants, builtinThemes, buttonVariants, clampFloatingPreviewPosition, clampPreviewMiniPlayerPosition, closePane, cn, colorTokens, computeLayoutFrames, contrastRatio, controlInteractive, controlSize, controlSizeIcon, controlSizes, countLeaves, countLines, createLayoutState, cva, defaultDarkThemeId, defaultLightThemeId, defaultThemeSelection, densityTokens, designTokens, diffLineVariants, diffStats, diffTargetPath, elevationTokens, entityIconVariants, expandAll, findTokenRanges, focusPane, fontOptions, formatBytes, formatReleaseDate, formatToken, initialsFrom, inlineScriptLiteral, isPasteBlock, itemVariants, keyedRows, layoutDepth, listLeaves, monogram, motionTokens, movePane, neighborLeaf, nextSeq, normalizeLayout, parseDiff, plainTextFromMarkdown, pruneBlocks, radiusTokens, recollapsePastes, remapCarriedBlocks, resizeFloatingPreview, resizePreviewMiniPlayer, resizeSplit, resolveFloatingPreviewFrame, resolvePreviewMiniPlayerFrame, resolvedDensity, sheetVariants, shouldCollapse, sidebarNavItemClass, sidebarNavItemStateClass, splitPane, statusDotVariants, stripTrailingBlankLines, surfaceInteractive, swapPanes, themeById, themeCssVariables, themeFamilies, themeScript, themesForAppearance, toast, toaster, toggleVariants, tokenRangeAt, transcriptDisclosureKey, typographyTokens, undoClosePane, undocumentedTokenAliases, useSideRail, useTheme, validateTheme, validateThemeRegistry, writeClipboardText, zIndexTokens };

package/dist/r/registry.json

@@ -1960,6 +1960,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/sidebar-nav",
+        "@adea-ai/ui/tabs",
         "lib"
       ],
       "files": [
@@ -1968,6 +1970,16 @@
           "type": "registry:ui",
           "target": "components/composites/settings/index.ts"
         },
+        {
+          "path": "src/components/composites/settings/settings-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-layout.tsx"
+        },
+        {
+          "path": "src/components/composites/settings/settings-navigation.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-navigation.tsx"
+        },
         {
           "path": "src/components/composites/settings/settings.tsx",
           "type": "registry:ui",

package/dist/r/settings.json

@@ -5,6 +5,8 @@
   "description": "",
   "dependencies": [],
   "registryDependencies": [
+    "@adea-ai/ui/sidebar-nav",
+    "@adea-ai/ui/tabs",
     "lib"
   ],
   "files": [
@@ -13,6 +15,16 @@
       "type": "registry:ui",
       "target": "components/composites/settings/index.ts"
     },
+    {
+      "path": "src/components/composites/settings/settings-layout.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/settings/settings-layout.tsx"
+    },
+    {
+      "path": "src/components/composites/settings/settings-navigation.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/settings/settings-navigation.tsx"
+    },
     {
       "path": "src/components/composites/settings/settings.tsx",
       "type": "registry:ui",

package/dist/r/src/components/composites/settings/index.ts

@@ -1 +1,8 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsNavigation,
+  type SettingsNavigationGroup,
+  type SettingsNavigationItem,
+  type SettingsNavigationProps,
+} from './settings-navigation'

package/dist/r/src/components/composites/settings/settings-layout.tsx

@@ -0,0 +1,65 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Tabs } from '../../ui/tabs'
+import { SettingsNavigation, type SettingsNavigationGroup } from './settings-navigation'
+
+export type SettingsLayoutProps = Omit<
+  ComponentProps<typeof Tabs>,
+  'children' | 'orientation' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  /** Grouped navigation entries; the host owns their values and panel content. */
+  groups: readonly SettingsNavigationGroup[]
+  /** Accessible name for the vertical tab list. */
+  'aria-label': string
+  /** The host-controlled selected destination. */
+  value: string
+  /** Updates the host-controlled selected destination. */
+  onChange: (value: string) => void
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Panels must be rendered as `TabsContent` descendants. */
+  children?: JSX.Element
+}
+
+/**
+ * SettingsLayout.
+ *
+ * A controlled, vertical settings rail beside its scrollable panel viewport.
+ * The host keeps ownership of selection, URL/hash state and panel content.
+ * At narrow viewports the rail contracts while both columns remain shrinkable.
+ */
+export function SettingsLayout(props: SettingsLayoutProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'groups',
+    'aria-label',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+
+  return (
+    <Tabs
+      {...rest}
+      orientation="vertical"
+      value={local.value}
+      class={cn('min-h-0 min-w-0 flex-1 gap-0', local.class)}
+    >
+      <SettingsNavigation
+        aria-label={local['aria-label']}
+        groups={local.groups}
+        value={local.value}
+        onReselect={local.onReselect}
+        revealSelected={local.revealSelected}
+        class="w-24 md:w-sidebar"
+      />
+      <div data-slot="settings-layout-panels" class="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        {local.children}
+      </div>
+    </Tabs>
+  )
+}

package/dist/r/src/components/composites/settings/settings-navigation.tsx

@@ -0,0 +1,135 @@
+import type { JSX } from 'solid-js'
+import { createEffect, createUniqueId, onCleanup, splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { sidebarNavItemClass, sidebarNavItemStateClass } from '../../layout/sidebar-nav/sidebar-nav'
+import { TabsList, TabsTrigger, type TabsListProps } from '../../ui/tabs'
+
+/** One host-owned destination in a settings tab list. Values must be unique. */
+export type SettingsNavigationItem = {
+  value: string
+  label: string
+  icon?: JSX.Element
+  disabled?: boolean
+}
+
+/** A visible, accessibly named group of settings destinations. */
+export type SettingsNavigationGroup = {
+  label: string
+  items: readonly SettingsNavigationItem[]
+}
+
+export type SettingsNavigationProps = Omit<
+  TabsListProps,
+  'appearance' | 'children' | 'orientation'
+> & {
+  /** Groups are presentation only; the host owns the tab values and panels. */
+  groups: readonly SettingsNavigationGroup[]
+  /** The same controlled value supplied to the enclosing `Tabs`. */
+  value: string
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Every tab list needs a label independent of its visible group headings. */
+  'aria-label': string
+}
+
+/**
+ * SettingsNavigation.
+ *
+ * A grouped vertical tab list for sibling settings panels. It composes the
+ * shared Tabs behaviour with the shared sidebar row recipe; the host supplies
+ * the controlled value, panel content, icons and any persistence or routing.
+ * Use ordinary tabs for a short, ungrouped row of view choices.
+ *
+ * Kobalte owns roving focus, arrow keys, selection and tab/panel ARIA. This
+ * component adds no URL, storage or host-specific state. Set
+ * `revealSelected={false}` when the surrounding layout does not use an internal
+ * scrolling viewport.
+ */
+export function SettingsNavigation(props: SettingsNavigationProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'aria-label',
+    'groups',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+  const triggers = new Map<string, HTMLButtonElement>()
+  const groupIdPrefix = `settings-navigation-${createUniqueId()}`
+
+  createEffect(() => {
+    const value = local.value
+    const reveal = local.revealSelected
+    if (reveal === false) return
+
+    const revealCurrent = () => {
+      const trigger = triggers.get(value)
+      if (typeof reveal === 'function') reveal(trigger)
+      else trigger?.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+    }
+
+    revealCurrent()
+    window.addEventListener('resize', revealCurrent)
+    onCleanup(() => window.removeEventListener('resize', revealCurrent))
+  })
+
+  return (
+    <TabsList
+      data-slot="settings-navigation"
+      aria-label={local['aria-label']}
+      orientation="vertical"
+      class={cn(
+        'flex max-h-full min-h-0 min-w-0 shrink-0 flex-col items-stretch justify-start gap-2 overflow-x-hidden overflow-y-auto px-2 py-2',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.groups.map((group, groupIndex) => {
+        const groupId = `${groupIdPrefix}-group-${groupIndex}`
+        return (
+          <div
+            role="none"
+            data-slot="settings-navigation-group"
+            class="flex min-w-0 flex-col gap-0.5"
+          >
+            <span id={groupId} class="sr-only">
+              {group.label}
+            </span>
+            <span
+              aria-hidden="true"
+              class="px-2 py-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+            >
+              {group.label}
+            </span>
+            {group.items.map((item) => (
+              <TabsTrigger
+                data-slot="settings-navigation-trigger"
+                orientation="vertical"
+                aria-describedby={groupId}
+                value={item.value}
+                disabled={item.disabled}
+                ref={(element: HTMLButtonElement | undefined) => {
+                  if (element) triggers.set(item.value, element)
+                  else triggers.delete(item.value)
+                }}
+                onClick={() => {
+                  if (local.value === item.value) local.onReselect?.(item.value)
+                }}
+                class={cn(
+                  sidebarNavItemClass,
+                  sidebarNavItemStateClass.idle,
+                  'h-row-lg w-full justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground'
+                )}
+              >
+                {item.icon}
+                <span class="min-w-0 truncate">{item.label}</span>
+              </TabsTrigger>
+            ))}
+          </div>
+        )
+      })}
+    </TabsList>
+  )
+}

package/dist/r/src/components/layout/top-bar/top-bar.tsx

@@ -41,7 +41,7 @@ export function TopBar(props: TopBarProps) {
     <header
       data-slot="top-bar"
       class={cn(
-        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)] items-center gap-3 border-b border-border px-3',
+        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         local.macosInset && 'window-inset-macos',
@@ -61,7 +61,7 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
     <div
       data-slot="top-bar-section"
       class={cn(
-        'flex min-w-0 items-center gap-2 overflow-hidden',
+        'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
         local.align === 'end' && 'justify-end',
         local.align !== 'end' && 'justify-start',
         local.class
@@ -71,12 +71,16 @@ export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' |
   )
 }
 
-export function TopBarTitle(props: ComponentProps<'div'>) {
-  const [local, rest] = splitProps(props, ['class'])
+export function TopBarTitle(props: ComponentProps<'div'> & { align?: 'start' | 'center' }) {
+  const [local, rest] = splitProps(props, ['class', 'align'])
   return (
     <div
       data-slot="top-bar-title"
-      class={cn('truncate text-sm font-medium', local.class)}
+      class={cn(
+        'truncate text-sm font-medium',
+        local.align === 'center' && 'text-center',
+        local.class
+      )}
       {...rest}
     />
   )

package/dist/r/src/components/ui/tabs/tabs.tsx

@@ -1,8 +1,31 @@
 import { Tabs as KobalteTabs } from '@kobalte/core/tabs'
-import type { ComponentProps } from 'solid-js'
-import { splitProps } from 'solid-js'
+import type { Accessor, ComponentProps } from 'solid-js'
+import {
+  createContext,
+  createRenderEffect,
+  createSignal,
+  createUniqueId,
+  onCleanup,
+  splitProps,
+  useContext,
+} from 'solid-js'
 import { cn } from '../../../lib/utils'
 
+type TabsIdContextValue = {
+  id: Accessor<string>
+  triggerIds: Accessor<ReadonlyMap<string, string>>
+  registerTriggerId: (value: string, id: string) => void
+  unregisterTriggerId: (value: string, id: string) => void
+}
+
+const TabsIdContext = createContext<TabsIdContextValue>()
+
+function useTabsId() {
+  const tabs = useContext(TabsIdContext)
+  if (!tabs) throw new Error('[adea-ui]: Tabs parts must be used within Tabs.')
+  return tabs
+}
+
 /**
  * Tabs.
  *
@@ -14,12 +37,37 @@ import { cn } from '../../../lib/utils'
  * where a full-width underline would collide with the panel's own header rule.
  */
 export function Tabs(props: ComponentProps<typeof KobalteTabs>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, ['class', 'id'])
+  const generatedId = `tabs-${createUniqueId()}`
+  const id = () => local.id ?? generatedId
+  const [triggerIds, setTriggerIds] = createSignal<ReadonlyMap<string, string>>(new Map())
+  const tabs: TabsIdContextValue = {
+    id,
+    triggerIds,
+    registerTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => new Map(current).set(value, triggerId))
+    },
+    unregisterTriggerId: (value, triggerId) => {
+      setTriggerIds((current) => {
+        if (current.get(value) !== triggerId) return current
+        const next = new Map(current)
+        next.delete(value)
+        return next
+      })
+    },
+  }
+
   return (
-    <KobalteTabs
-      class={cn('flex flex-col gap-2 data-[orientation=vertical]:flex-row', local.class)}
-      {...rest}
-    />
+    <TabsIdContext.Provider value={tabs}>
+      <KobalteTabs
+        id={id()}
+        class={cn(
+          'flex min-h-0 min-w-0 flex-col gap-2 data-[orientation=vertical]:flex-row',
+          local.class
+        )}
+        {...rest}
+      />
+    </TabsIdContext.Provider>
   )
 }
 
@@ -50,10 +98,21 @@ export type TabsTriggerProps = ComponentProps<typeof KobalteTabs.Trigger> & {
 }
 
 export function TabsTrigger(props: TabsTriggerProps) {
-  const [local, rest] = splitProps(props, ['class', 'appearance'])
+  const [local, rest] = splitProps(props, ['class', 'appearance', 'id'])
+  const tabs = useTabsId()
+  const triggerId = () => local.id ?? `${tabs.id()}-trigger-${rest.value}`
+
+  // Register before panels render, including SSR where createEffect is skipped.
+  createRenderEffect(() => {
+    const value = rest.value
+    const id = triggerId()
+    tabs.registerTriggerId(value, id)
+    onCleanup(() => tabs.unregisterTriggerId(value, id))
+  })
 
   return (
     <KobalteTabs.Trigger
+      id={triggerId()}
       class={cn(
         'inline-flex shrink-0 items-center justify-center gap-1.5 whitespace-nowrap text-sm font-medium',
         'transition-colors ease-out outline-none select-none',
@@ -72,6 +131,17 @@ export function TabsTrigger(props: TabsTriggerProps) {
 }
 
 export function TabsContent(props: ComponentProps<typeof KobalteTabs.Content>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <KobalteTabs.Content class={cn('flex-1 outline-none', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, ['class', 'aria-labelledby'])
+  const tabs = useTabsId()
+  return (
+    <KobalteTabs.Content
+      aria-labelledby={
+        local['aria-labelledby'] ??
+        tabs.triggerIds().get(rest.value) ??
+        `${tabs.id()}-trigger-${rest.value}`
+      }
+      class={cn('min-h-0 min-w-0 flex-1 outline-none', local.class)}
+      {...rest}
+    />
+  )
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.88.0",
+  "version": "0.89.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",
@@ -107,6 +107,7 @@
     "check:packed-layout-renderer": "bun scripts/check-packed-layout-renderer.ts",
     "check:packed-appearance": "bun scripts/check-packed-appearance.ts",
     "check:packed-native-select": "bun scripts/check-packed-native-select.ts",
+    "check:packed-settings-navigation": "bun scripts/check-packed-settings-navigation.ts",
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {

package/registry.json

@@ -1960,6 +1960,8 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/sidebar-nav",
+        "@adea-ai/ui/tabs",
         "lib"
       ],
       "files": [
@@ -1968,6 +1970,16 @@
           "type": "registry:ui",
           "target": "components/composites/settings/index.ts"
         },
+        {
+          "path": "src/components/composites/settings/settings-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-layout.tsx"
+        },
+        {
+          "path": "src/components/composites/settings/settings-navigation.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/settings/settings-navigation.tsx"
+        },
         {
           "path": "src/components/composites/settings/settings.tsx",
           "type": "registry:ui",

package/src/components/composites/settings/index.ts

@@ -1 +1,8 @@
 export { SettingsField, SettingsPage, SettingsRow, SettingsSection } from './settings'
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout'
+export {
+  SettingsNavigation,
+  type SettingsNavigationGroup,
+  type SettingsNavigationItem,
+  type SettingsNavigationProps,
+} from './settings-navigation'

package/src/components/composites/settings/settings-layout.tsx

@@ -0,0 +1,65 @@
+import type { ComponentProps, JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Tabs } from '../../ui/tabs'
+import { SettingsNavigation, type SettingsNavigationGroup } from './settings-navigation'
+
+export type SettingsLayoutProps = Omit<
+  ComponentProps<typeof Tabs>,
+  'children' | 'orientation' | 'value' | 'defaultValue' | 'onChange'
+> & {
+  /** Grouped navigation entries; the host owns their values and panel content. */
+  groups: readonly SettingsNavigationGroup[]
+  /** Accessible name for the vertical tab list. */
+  'aria-label': string
+  /** The host-controlled selected destination. */
+  value: string
+  /** Updates the host-controlled selected destination. */
+  onChange: (value: string) => void
+  /** Called when the already-selected destination is activated again. */
+  onReselect?: (value: string) => void
+  /** Reveal the selected row on value changes and window resizes. Defaults to nearest scroll. */
+  revealSelected?: boolean | ((trigger: HTMLButtonElement | undefined) => void)
+  /** Panels must be rendered as `TabsContent` descendants. */
+  children?: JSX.Element
+}
+
+/**
+ * SettingsLayout.
+ *
+ * A controlled, vertical settings rail beside its scrollable panel viewport.
+ * The host keeps ownership of selection, URL/hash state and panel content.
+ * At narrow viewports the rail contracts while both columns remain shrinkable.
+ */
+export function SettingsLayout(props: SettingsLayoutProps) {
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'groups',
+    'aria-label',
+    'value',
+    'onReselect',
+    'revealSelected',
+  ])
+
+  return (
+    <Tabs
+      {...rest}
+      orientation="vertical"
+      value={local.value}
+      class={cn('min-h-0 min-w-0 flex-1 gap-0', local.class)}
+    >
+      <SettingsNavigation
+        aria-label={local['aria-label']}
+        groups={local.groups}
+        value={local.value}
+        onReselect={local.onReselect}
+        revealSelected={local.revealSelected}
+        class="w-24 md:w-sidebar"
+      />
+      <div data-slot="settings-layout-panels" class="min-h-0 min-w-0 flex-1 overflow-y-auto p-4">
+        {local.children}
+      </div>
+    </Tabs>
+  )
+}