@adea-ai/ui 0.142.3 → 0.143.0

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.3",
+  "version": "0.143.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",
+        "lucide-solid@^1.51.0"
+      ],
+      "registryDependencies": [
+        "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,42 @@
         }
       ]
     },
+    {
+      "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",
+        "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",
@@ -3144,6 +3255,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,85 @@
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { Ban } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+import { accents } from '#lib/accent-presets'
+import { cn } from '#lib/utils'
+
+/**
+ * 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. */
+  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 ?? 'No colour override'}>
+        <Ban class="size-4 text-muted-foreground" aria-hidden="true" />
+      </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>
+  )
+}
+
+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" />
+      <Radio.ItemLabel
+        title={props.label}
+        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>
+      </Radio.ItemLabel>
+    </Radio.Item>
+  )
+}

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

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

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

@@ -0,0 +1,184 @@
+import { RadioGroup as Radio } from '@kobalte/core/radio-group'
+import { ImageUp, Trash2 } from 'lucide-solid'
+import { For, Show, createSignal, createUniqueId } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Button } from '../../ui/button'
+import {
+  MarkImageError,
+  markImageFromFile,
+  markImageProblemCopy,
+  MARK_IMAGE_MAX_SOURCE_BYTES,
+} from './image-data-url'
+import { resolveShellIcon, shellIconEntries } from './shell-icons'
+
+/**
+ * IconPicker.
+ *
+ * The control behind "choose an icon" for a workspace or a project: a grid of
+ * curated glyphs, and optionally an uploaded picture in their place.
+ *
+ * It is a single-choice group. The glyph grid is a Kobalte radio group, so
+ * arrow keys move the choice and Tab enters and leaves the grid as one stop,
+ * which is the contract a 56-cell grid needs to stay usable from a keyboard. An
+ * uploaded image is a separate state, not a 57th cell: while `image` is set no
+ * glyph is checked, and choosing a glyph asks the caller to drop the image, so
+ * the stored mark is never both.
+ *
+ * The picker does not persist anything. The caller owns `value` and `image`
+ * and saves them with the rest of its form; the image arrives already resized
+ * to the stored square (see `markImageFromFile`).
+ */
+export type IconPickerProps = {
+  /** The group's accessible name, e.g. "Workspace icon". */
+  label: string
+  /** The checked icon key; ignored while `image` is set. */
+  value: string | undefined
+  onValueChange(key: string): void
+  /** The key the surface treats as unset, labelled "default" in the grid. */
+  defaultKey?: string
+  /** An uploaded mark (a data URL) currently chosen in place of a glyph. */
+  image?: string
+  /**
+   * Called with the resized upload, or `undefined` for Remove. Omit it for a
+   * surface that offers glyphs only; the upload row then does not render.
+   */
+  onImageChange?(image: string | undefined): void
+  disabled?: boolean
+  class?: string
+}
+
+export function IconPicker(props: IconPickerProps) {
+  const inputId = createUniqueId()
+  const [problem, setProblem] = createSignal<string>()
+  const [busy, setBusy] = createSignal(false)
+  const [fileInput, setFileInput] = createSignal<HTMLInputElement>()
+
+  const upload = async (file: File | undefined) => {
+    if (!file || !props.onImageChange) return
+    setProblem(undefined)
+    setBusy(true)
+    try {
+      props.onImageChange(await markImageFromFile(file))
+    } catch (error) {
+      setProblem(
+        markImageProblemCopy[error instanceof MarkImageError ? error.problem : 'unreadable']
+      )
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  return (
+    <div data-slot="icon-picker" class={cn('flex flex-col gap-3', props.class)}>
+      <Show when={props.onImageChange}>
+        <div class="flex items-center gap-3" data-slot="icon-picker-upload">
+          <span
+            aria-hidden="true"
+            class="flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-lg border border-border bg-muted"
+          >
+            <Show
+              when={props.image}
+              fallback={<ImageUp class="size-5 text-muted-foreground" aria-hidden="true" />}
+            >
+              {(src) => <img src={src()} alt="" class="size-full object-cover" />}
+            </Show>
+          </span>
+          <div class="flex flex-wrap items-center gap-2">
+            <input
+              ref={setFileInput}
+              id={inputId}
+              type="file"
+              class="sr-only"
+              tabIndex={-1}
+              // The visible button drives this input; hide the duplicate from assistive
+              // technology but keep a name so the form-label rule is satisfied.
+              aria-hidden="true"
+              aria-label={props.image ? 'Replace image' : 'Upload image'}
+              accept="image/png,image/jpeg,image/webp,image/gif"
+              disabled={props.disabled}
+              onChange={(event) => {
+                const input = event.currentTarget
+                void upload(input.files?.[0])
+                // Clearing the value lets the same file be chosen again after Remove.
+                input.value = ''
+              }}
+            />
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={props.disabled || busy()}
+              onClick={() => fileInput()?.click()}
+            >
+              <ImageUp aria-hidden="true" />
+              {props.image ? 'Replace image' : 'Upload image'}
+            </Button>
+            <Show when={props.image}>
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                disabled={props.disabled || busy()}
+                onClick={() => {
+                  setProblem(undefined)
+                  props.onImageChange?.(undefined)
+                }}
+              >
+                <Trash2 aria-hidden="true" />
+                Remove image
+              </Button>
+            </Show>
+          </div>
+        </div>
+        <Show when={problem()}>
+          {(message) => (
+            <p role="alert" class="text-sm text-destructive">
+              {message()}
+            </p>
+          )}
+        </Show>
+        <p class="text-xs text-muted-foreground">
+          PNG, JPEG, WebP or GIF up to {MARK_IMAGE_MAX_SOURCE_BYTES / 1024 / 1024} MB. It is cropped
+          to a square.
+        </p>
+      </Show>
+      <Radio
+        aria-label={props.label}
+        value={props.image ? '' : (props.value ?? '')}
+        disabled={props.disabled}
+        onChange={(key) => {
+          if (key) props.onValueChange(key)
+        }}
+        class="grid grid-cols-[repeat(auto-fill,minmax(2.5rem,1fr))] gap-1.5"
+      >
+        <For each={shellIconEntries}>
+          {(entry) => {
+            const Icon = resolveShellIcon(entry.key)
+            return (
+              <Radio.Item value={entry.key} class="contents">
+                <Radio.ItemInput class="peer" />
+                <Radio.ItemLabel
+                  title={entry.key === props.defaultKey ? `${entry.label} (default)` : entry.label}
+                  class={cn(
+                    'flex size-10 cursor-pointer items-center justify-center rounded-lg border border-border bg-card text-muted-foreground',
+                    'transition-colors ease-out',
+                    'hover:bg-surface-hover hover:text-foreground',
+                    'peer-focus-visible:border-ring peer-focus-visible:ring-3 peer-focus-visible:ring-primary-subtle',
+                    'data-[checked]:border-primary data-[checked]:bg-primary-subtle data-[checked]:text-primary',
+                    'data-[disabled]:pointer-events-none data-[disabled]:opacity-50'
+                  )}
+                >
+                  <Icon class="size-5" aria-hidden="true" />
+                  <span class="sr-only">
+                    {entry.label}
+                    {entry.key === props.defaultKey ? ' (default)' : ''}
+                  </span>
+                </Radio.ItemLabel>
+              </Radio.Item>
+            )
+          }}
+        </For>
+      </Radio>
+    </div>
+  )
+}

package/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/src/components/composites/icon-picker/index.ts

@@ -0,0 +1,20 @@
+export { IconPicker, 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'