@adea-ai/ui 0.142.4 → 0.144.0

package/dist/r/src/components/composites/icon-picker/image-data-url.ts

@@ -0,0 +1,107 @@
+/**
+ * Turning an uploaded picture into the small square mark a workspace stores.
+ *
+ * The mark travels with the workspace record (it is shown in every list the
+ * workspace appears in), so it is resized to a fixed square and re-encoded
+ * before it leaves the browser rather than stored as the user's original file.
+ * Re-encoding also drops metadata and any embedded script an SVG could carry:
+ * only raster images are accepted and the result is always a `data:image/webp`
+ * or `data:image/png` URL.
+ */
+
+/** The edge, in pixels, of the stored square. 2x the largest tile the apps draw. */
+export const MARK_IMAGE_SIZE = 128
+/** The largest source file read, before resizing. */
+export const MARK_IMAGE_MAX_SOURCE_BYTES = 8 * 1024 * 1024
+/** The largest encoded result kept; a stored mark never exceeds this many characters. */
+export const MARK_IMAGE_MAX_DATA_URL_LENGTH = 48 * 1024
+
+const ACCEPTED_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp', 'image/gif'])
+
+export type MarkImageProblem = 'type' | 'size' | 'unreadable' | 'too-large'
+
+/** Thrown by {@link markImageFromFile}; `problem` keys {@link markImageProblemCopy}. */
+export class MarkImageError extends Error {
+  readonly problem: MarkImageProblem
+  constructor(problem: MarkImageProblem) {
+    super(problem)
+    this.name = 'MarkImageError'
+    this.problem = problem
+  }
+}
+
+export const markImageProblemCopy: Readonly<Record<MarkImageProblem, string>> = {
+  type: 'Choose a PNG, JPEG, WebP or GIF image.',
+  size: 'That image is larger than 8 MB. Choose a smaller one.',
+  unreadable: 'That image could not be read. Try a different file.',
+  'too-large': 'That image is too detailed to store as a mark. Try a simpler one.',
+}
+
+/** Whether a stored value is a mark image this module could have produced. */
+export function isMarkImageDataUrl(value: unknown): value is string {
+  return (
+    typeof value === 'string' &&
+    value.length <= MARK_IMAGE_MAX_DATA_URL_LENGTH &&
+    /^data:image\/(?:webp|png);base64,[A-Za-z0-9+/]+={0,2}$/.test(value)
+  )
+}
+
+/** Pre-flight checks that need no decoding; `undefined` means the file may be read. */
+export function checkMarkImageFile(
+  file: Readonly<{ type: string; size: number }>
+): MarkImageProblem | undefined {
+  if (!ACCEPTED_TYPES.has(file.type)) return 'type'
+  if (file.size > MARK_IMAGE_MAX_SOURCE_BYTES) return 'size'
+  return undefined
+}
+
+/** The source rectangle of the largest centred square, so the mark is a cover crop. */
+export function centredSquare(
+  width: number,
+  height: number
+): Readonly<{ x: number; y: number; side: number }> {
+  const side = Math.min(width, height)
+  return { x: Math.floor((width - side) / 2), y: Math.floor((height - side) / 2), side }
+}
+
+/**
+ * Resize an image file to the stored mark. Rejects with a {@link MarkImageError}
+ * so the caller can show `markImageProblemCopy[error.problem]`.
+ */
+export async function markImageFromFile(file: File): Promise<string> {
+  const problem = checkMarkImageFile(file)
+  if (problem) throw new MarkImageError(problem)
+  let bitmap: ImageBitmap
+  try {
+    bitmap = await createImageBitmap(file)
+  } catch {
+    throw new MarkImageError('unreadable')
+  }
+  try {
+    const canvas = document.createElement('canvas')
+    canvas.width = MARK_IMAGE_SIZE
+    canvas.height = MARK_IMAGE_SIZE
+    const context = canvas.getContext('2d')
+    if (!context) throw new MarkImageError('unreadable')
+    const crop = centredSquare(bitmap.width, bitmap.height)
+    context.drawImage(
+      bitmap,
+      crop.x,
+      crop.y,
+      crop.side,
+      crop.side,
+      0,
+      0,
+      MARK_IMAGE_SIZE,
+      MARK_IMAGE_SIZE
+    )
+    // WebP where the browser can encode it; PNG is the always-available fallback.
+    for (const type of ['image/webp', 'image/png']) {
+      const url = canvas.toDataURL(type, 0.85)
+      if (url.startsWith(`data:${type}`) && isMarkImageDataUrl(url)) return url
+    }
+    throw new MarkImageError('too-large')
+  } finally {
+    bitmap.close()
+  }
+}

package/dist/r/src/components/composites/icon-picker/index.ts

@@ -0,0 +1,25 @@
+export {
+  IconPicker,
+  IconPickerDropdown,
+  type IconPickerDropdownProps,
+  type IconPickerProps,
+} from './icon-picker'
+export {
+  MARK_IMAGE_MAX_DATA_URL_LENGTH,
+  MARK_IMAGE_MAX_SOURCE_BYTES,
+  MARK_IMAGE_SIZE,
+  MarkImageError,
+  centredSquare,
+  checkMarkImageFile,
+  isMarkImageDataUrl,
+  markImageFromFile,
+  markImageProblemCopy,
+  type MarkImageProblem,
+} from './image-data-url'
+export {
+  isShellIconKey,
+  resolveShellIcon,
+  shellIconEntries,
+  shellIconLabel,
+  type ShellIconKey,
+} from './shell-icons'

package/dist/r/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/dist/r/src/components/composites/settings/settings-navigation.tsx

@@ -182,7 +182,7 @@ export function SettingsNavigation(props: SettingsNavigationProps) {
                 class={cn(
                   sidebarNavItemClass,
                   sidebarNavItemStateClass.idle,
-                  'h-row-lg justify-start border-0 px-3 py-2 text-left data-[selected]:bg-primary-subtle data-[selected]:text-foreground',
+                  'h-row-lg justify-start border-0 px-3 py-2 text-left text-foreground data-[selected]:bg-primary-subtle',
                   strip() ? 'w-auto shrink-0' : 'w-full'
                 )}
               >

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

@@ -1,7 +1,9 @@
+import { CircleHelp } from 'lucide-solid'
 import type { ComponentProps, JSX } from 'solid-js'
 import { createUniqueId, Show, splitProps } from 'solid-js'
 import { createFormFieldContext, FormFieldContext } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
 import { Heading } from '../../ui/typography'
 
 /**
@@ -18,10 +20,29 @@ import { Heading } from '../../ui/typography'
  * the first control inside it. `SettingsField` is the visual stacked layout;
  * use `FormField` when the control needs label, help, or validation wiring.
  */
+function HelpTip(props: { label: string; help: string }) {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        as="button"
+        type="button"
+        data-slot="settings-row-help"
+        aria-label={`About ${props.label}`}
+        class="inline-flex size-4 items-center justify-center rounded-full text-muted-foreground hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-none"
+      >
+        <CircleHelp class="size-3.5" aria-hidden="true" />
+      </TooltipTrigger>
+      <TooltipContent>{props.help}</TooltipContent>
+    </Tooltip>
+  )
+}
+
 export function SettingsSection(
   props: ComponentProps<'section'> & {
     title: string
     description?: string
+    /** A short explanation behind a help icon beside the title; prefer it to a long description. */
+    help?: string
     /** A control for the section as a whole, e.g. a master toggle. */
     action?: JSX.Element
     /** Use a spaced content stack for fields, alerts, and cards instead of divided rows. */
@@ -32,6 +53,7 @@ export function SettingsSection(
     'class',
     'title',
     'description',
+    'help',
     'action',
     'bodyLayout',
     'children',
@@ -45,9 +67,12 @@ export function SettingsSection(
     >
       <div class="flex items-start justify-between gap-4">
         <div class="flex min-w-0 flex-col gap-0.5">
-          <Heading as="h2" size="card">
-            {local.title}
-          </Heading>
+          <div class="flex items-center gap-1.5">
+            <Heading as="h2" size="card">
+              {local.title}
+            </Heading>
+            <Show when={local.help}>{(help) => <HelpTip label={local.title} help={help()} />}</Show>
+          </div>
           <Show when={local.description}>
             <p class="max-w-prose text-sm text-muted-foreground text-pretty">{local.description}</p>
           </Show>
@@ -82,6 +107,12 @@ export function SettingsRow(
   props: ComponentProps<'div'> & {
     label: string
     description?: string
+    /**
+     * A short explanation behind a help icon beside the label. Prefer it to a
+     * long description: the row stays quiet and the explanation is one hover or
+     * focus away.
+     */
+    help?: string
     /** Render a vertical stack when the control needs the full width. */
     orientation?: 'horizontal' | 'vertical'
     /** Hide the divider this row would otherwise contribute. */
@@ -100,6 +131,7 @@ export function SettingsRow(
     'class',
     'label',
     'description',
+    'help',
     'orientation',
     'bare',
     'flush',
@@ -132,8 +164,11 @@ export function SettingsRow(
         {...rest}
       >
         <div class="flex min-w-0 flex-col gap-0.5">
-          <div id={labelId} data-slot="settings-row-label" class="text-sm font-medium">
-            {local.label}
+          <div class="flex items-center gap-1.5">
+            <div id={labelId} data-slot="settings-row-label" class="text-sm font-medium">
+              {local.label}
+            </div>
+            <Show when={local.help}>{(help) => <HelpTip label={local.label} help={help()} />}</Show>
           </div>
           <Show when={local.description}>
             <p id={descriptionId} class="max-w-prose text-sm text-muted-foreground text-pretty">

package/dist/r/src/components/composites/tree/tree.tsx

@@ -5,7 +5,9 @@ import {
   createEffect,
   createMemo,
   createUniqueId,
+  For,
   onCleanup,
+  Show,
   splitProps,
   useContext,
 } from 'solid-js'
@@ -29,6 +31,7 @@ type TreeContextValue = {
   activate: (id: string, event: Event) => void
   expand: (id: string, expanded: boolean) => void
   disclosure: () => TreeDisclosure
+  guides: () => boolean
   onActiveIdChange: (id: string) => void
 }
 
@@ -79,6 +82,12 @@ export type TreeProps = Omit<
      * Keyboard behaviour is identical in both modes: Left/Right expand and collapse.
      */
     disclosure?: TreeDisclosure
+    /**
+     * Draw a vertical guide line down each ancestor level of a nested row, so a
+     * group of children reads as belonging to its parent. Off by default: a flat
+     * list or a dense file explorer carries its own rhythm.
+     */
+    guides?: boolean
     /** Called for Enter or pointer activation. Domain action stays host-owned. */
     onActivate?: (id: string, event: Event) => void
     /** Called for Space selection. Selection state stays host-owned. */
@@ -132,6 +141,7 @@ export function Tree(props: TreeProps) {
     'onActiveIdChange',
     'onExpand',
     'disclosure',
+    'guides',
     'onActivate',
     'onSelectItem',
     'onRequestReveal',
@@ -296,6 +306,7 @@ export function Tree(props: TreeProps) {
     activate: (id, event) => local.onActivate?.(id, event),
     expand: (id, expanded) => local.onExpand?.(id, expanded),
     disclosure: () => local.disclosure ?? 'row',
+    guides: () => local.guides ?? false,
     onActiveIdChange: local.onActiveIdChange,
   }
 
@@ -495,6 +506,8 @@ export function TreeRow(props: TreeRowProps) {
         'group/tree-row flex min-h-row-sm w-full min-w-0 items-center gap-1.5 rounded-md pe-1.5 text-left text-sm outline-none transition-colors',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
         {
+          // Guide lines are positioned against the row; without them it keeps its original classes.
+          relative: tree.guides(),
           'bg-primary-subtle text-foreground': local.selected,
           'hover:bg-surface-hover': !local.selected,
         },
@@ -505,6 +518,18 @@ export function TreeRow(props: TreeRowProps) {
       onClick={handleClick}
       onDblClick={handleDoubleClick}
     >
+      <Show when={tree.guides() && local.item.level > 1}>
+        <For each={Array.from({ length: local.item.level - 1 }, (_, index) => index)}>
+          {(index) => (
+            <span
+              aria-hidden="true"
+              data-slot="tree-row-guide"
+              class="pointer-events-none absolute inset-y-0 w-px bg-border"
+              style={{ 'inset-inline-start': `${6 + index * 12 + 7}px` }}
+            />
+          )}
+        </For>
+      </Show>
       <span
         data-slot={markerTarget() ? 'tree-row-disclosure' : undefined}
         class={cn(

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

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

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

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