@adea-ai/ui 0.142.4 → 0.144.0

package/dist/r/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/dist/r/src/components/layout/shell-top-bar/index.ts

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

package/dist/r/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/dist/r/workspace-switcher.json

@@ -0,0 +1,26 @@
+{
+  "name": "workspace-switcher",
+  "type": "registry:ui",
+  "title": "Workspace Switcher",
+  "description": "",
+  "dependencies": [
+    "lucide-solid@^1.51.0"
+  ],
+  "registryDependencies": [
+    "@adea-ai/ui/action-button",
+    "@adea-ai/ui/dropdown-menu",
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/composites/workspace-switcher/index.ts",
+      "type": "registry:ui",
+      "target": "components/composites/workspace-switcher/index.ts"
+    },
+    {
+      "path": "src/components/composites/workspace-switcher/workspace-switcher.tsx",
+      "type": "registry:ui",
+      "target": "components/composites/workspace-switcher/workspace-switcher.tsx"
+    }
+  ]
+}

package/package.json

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

@@ -1918,6 +1918,56 @@
         }
       ]
     },
+    {
+      "name": "shell-rail",
+      "type": "registry:ui",
+      "title": "Shell Rail",
+      "description": "",
+      "dependencies": [
+        "lucide-solid@^1.51.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/kbd",
+        "@adea-ai/ui/separator",
+        "@adea-ai/ui/side-rail",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/shell-rail/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/shell-rail/index.ts"
+        },
+        {
+          "path": "src/components/layout/shell-rail/shell-rail.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/shell-rail/shell-rail.tsx"
+        }
+      ]
+    },
+    {
+      "name": "shell-top-bar",
+      "type": "registry:ui",
+      "title": "Shell Top Bar",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "@adea-ai/ui/separator",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/shell-top-bar/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/shell-top-bar/index.ts"
+        },
+        {
+          "path": "src/components/layout/shell-top-bar/shell-top-bar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/shell-top-bar/shell-top-bar.tsx"
+        }
+      ]
+    },
     {
       "name": "side-rail",
       "type": "registry:ui",
@@ -2143,6 +2193,31 @@
         }
       ]
     },
+    {
+      "name": "accent-picker",
+      "type": "registry:ui",
+      "title": "Accent Picker",
+      "description": "",
+      "dependencies": [
+        "@kobalte/core@^0.13.14"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/tooltip",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/accent-picker/accent-picker.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/accent-picker/accent-picker.tsx"
+        },
+        {
+          "path": "src/components/composites/accent-picker/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/accent-picker/index.ts"
+        }
+      ]
+    },
     {
       "name": "account-menu",
       "type": "registry:ui",
@@ -2518,6 +2593,43 @@
         }
       ]
     },
+    {
+      "name": "icon-picker",
+      "type": "registry:ui",
+      "title": "Icon Picker",
+      "description": "",
+      "dependencies": [
+        "@kobalte/core@^0.13.14",
+        "lucide-solid@^1.51.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/button",
+        "@adea-ai/ui/popover",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/icon-picker/icon-picker.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/icon-picker/icon-picker.tsx"
+        },
+        {
+          "path": "src/components/composites/icon-picker/image-data-url.ts",
+          "type": "registry:ui",
+          "target": "components/composites/icon-picker/image-data-url.ts"
+        },
+        {
+          "path": "src/components/composites/icon-picker/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/icon-picker/index.ts"
+        },
+        {
+          "path": "src/components/composites/icon-picker/shell-icons.ts",
+          "type": "registry:ui",
+          "target": "components/composites/icon-picker/shell-icons.ts"
+        }
+      ]
+    },
     {
       "name": "inline-citation",
       "type": "registry:ui",
@@ -2757,11 +2869,13 @@
       "title": "Settings",
       "description": "",
       "dependencies": [
-        "@kobalte/core@^0.13.14"
+        "@kobalte/core@^0.13.14",
+        "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
         "@adea-ai/ui/sidebar-nav",
         "@adea-ai/ui/tabs",
+        "@adea-ai/ui/tooltip",
         "@adea-ai/ui/typography",
         "lib"
       ],
@@ -3144,6 +3258,32 @@
         }
       ]
     },
+    {
+      "name": "workspace-switcher",
+      "type": "registry:ui",
+      "title": "Workspace Switcher",
+      "description": "",
+      "dependencies": [
+        "lucide-solid@^1.51.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/action-button",
+        "@adea-ai/ui/dropdown-menu",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/composites/workspace-switcher/index.ts",
+          "type": "registry:ui",
+          "target": "components/composites/workspace-switcher/index.ts"
+        },
+        {
+          "path": "src/components/composites/workspace-switcher/workspace-switcher.tsx",
+          "type": "registry:ui",
+          "target": "components/composites/workspace-switcher/workspace-switcher.tsx"
+        }
+      ]
+    },
     {
       "name": "conversation",
       "type": "registry:ui",

package/src/components/composites/accent-picker/accent-picker.tsx

@@ -0,0 +1,106 @@
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+import { accents } from '#lib/accent-presets'
+import { cn } from '#lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
+
+/**
+ * AccentPicker.
+ *
+ * A row of accent swatches with a leading "none" choice, for a setting that
+ * overrides the accent it would otherwise inherit: a project's icon colour, a
+ * workspace's colour over the app's. `null` is a real value, not an empty one:
+ * it means "do not override", so the swatch row never has an unchecked state and
+ * the control can say what the inherited colour is through `inheritLabel`.
+ *
+ * The swatches are the theme's own accent presets, each carrying its light and
+ * dark colour and switching on the `dark` class, so a swatch is the colour the
+ * setting will produce in whichever appearance is in force and the picker needs
+ * no theme provider.
+ */
+export type AccentPickerProps = {
+  /** The group's accessible name, e.g. "Icon colour". */
+  label: string
+  /** An accent preset id, or `null` for no override. */
+  value: string | null
+  onValueChange(value: string | null): void
+  /** What `null` means here, e.g. "Inherit workspace accent". Also the first swatch's name and tooltip. */
+  inheritLabel?: string
+  disabled?: boolean
+  class?: string
+}
+
+const NONE = '__none__'
+
+export function AccentPicker(props: AccentPickerProps) {
+  return (
+    <Radio
+      data-slot="swatch-picker"
+      aria-label={props.label}
+      value={props.value ?? NONE}
+      disabled={props.disabled}
+      onChange={(id) => props.onValueChange(id === NONE ? null : id)}
+      class={cn('flex flex-wrap items-center gap-2', props.class)}
+    >
+      <SwatchItem id={NONE} label={props.inheritLabel ?? 'Inherit (default)'}>
+        <InheritSwatch />
+      </SwatchItem>
+      <For each={accents}>
+        {(accent) => (
+          <SwatchItem id={accent.id} label={accent.label}>
+            <span
+              aria-hidden="true"
+              class="block size-full rounded-full bg-(--swatch-light) dark:bg-(--swatch-dark)"
+              style={{
+                '--swatch-light': accent.light ?? 'currentColor',
+                '--swatch-dark': accent.dark ?? accent.light ?? 'currentColor',
+              }}
+            />
+          </SwatchItem>
+        )}
+      </For>
+    </Radio>
+  )
+}
+
+/**
+ * The "inherit" swatch: a black disc with a red slash, the universal "no
+ * override" mark. It is drawn rather than painted from a token so it reads the
+ * same in every theme and appearance.
+ */
+function InheritSwatch() {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="swatch-inherit"
+      class="relative block size-full overflow-hidden rounded-full bg-(--swatch-inherit)"
+      style={{ '--swatch-inherit': '#000' }}
+    >
+      <span class="absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 -rotate-45 bg-destructive" />
+    </span>
+  )
+}
+
+function SwatchItem(props: { id: string; label: string; children: JSX.Element }) {
+  return (
+    <Radio.Item value={props.id} data-accent-option={props.id} class="contents">
+      <Radio.ItemInput class="peer" />
+      <Tooltip>
+        <TooltipTrigger
+          as={Radio.ItemLabel}
+          class={cn(
+            'flex size-7 cursor-pointer items-center justify-center rounded-full border border-border p-0.5',
+            'peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle',
+            'data-[checked]:border-primary data-[checked]:ring-1 data-[checked]:ring-primary',
+            'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+          )}
+        >
+          {props.children}
+          <span class="sr-only">{props.label}</span>
+        </TooltipTrigger>
+        <TooltipContent>{props.label}</TooltipContent>
+      </Tooltip>
+    </Radio.Item>
+  )
+}

package/src/components/composites/accent-picker/index.ts

@@ -0,0 +1 @@
+export { AccentPicker, type AccentPickerProps } from './accent-picker'