@adea-ai/ui 0.84.0 → 0.87.0

package/src/components/ui/input-group/secret-input-group.tsx

@@ -0,0 +1,58 @@
+import { splitProps, useContext, type ComponentProps, type JSX } from 'solid-js'
+import { ActionButton } from '../../composites/action-button'
+import { FormFieldContext } from '#lib/form-field'
+import { InputGroup, InputGroupInput } from './input-group'
+
+export type SecretInputGroupProps = {
+  value: string
+  disabled: boolean
+  onChange: JSX.EventHandler<HTMLInputElement, Event>
+  onClear?: () => void
+  class?: string
+} & Pick<ComponentProps<'input'>, 'id' | 'aria-label' | 'aria-describedby' | 'aria-invalid'>
+
+/** A password input with an optional keyboard-accessible clear action. */
+export function SecretInputGroup(props: SecretInputGroupProps) {
+  const field = useContext(FormFieldContext)
+  const [local, rest] = splitProps(props, [
+    'value',
+    'disabled',
+    'onChange',
+    'onClear',
+    'aria-label',
+    'class',
+  ])
+
+  const input = (
+    <InputGroupInput
+      {...rest}
+      aria-label={local['aria-label'] ?? (field ? undefined : 'New API key')}
+      type="password"
+      autocomplete="new-password"
+      value={local.value}
+      disabled={local.disabled}
+      onInput={local.onChange}
+    />
+  )
+
+  if (!local.onClear) return <InputGroup class={local.class}>{input}</InputGroup>
+
+  return (
+    <InputGroup class={local.class}>
+      {input}
+      <ActionButton
+        data-slot="input-group-button"
+        variant="ghost"
+        size="xs"
+        class="-me-1 h-6 min-w-0 shrink-0 px-2"
+        disabled={local.disabled}
+        tooltip={local.disabled ? 'This API key is managed by policy' : 'Clear API key'}
+        tooltipSide="top"
+        aria-label="Clear API key"
+        onClick={() => local.onClear?.()}
+      >
+        Clear
+      </ActionButton>
+    </InputGroup>
+  )
+}

package/src/components/ui/native-select/native-select.tsx

@@ -1,6 +1,7 @@
 import { ChevronDownIcon } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { createEffect, For, onMount, Show, splitProps } from 'solid-js'
+import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 export type NativeSelectProps = ComponentProps<'select'> & {
@@ -59,7 +60,26 @@ export type NativeSelectOption = Readonly<{
 }>
 
 export function NativeSelect(props: NativeSelectProps) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'defaultValue', 'options'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'children',
+    'defaultValue',
+    'options',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
   let select: HTMLSelectElement | undefined
 
   // Set selection after native options exist; setting select.value before its
@@ -81,6 +101,12 @@ export function NativeSelect(props: NativeSelectProps) {
           select = element
         }}
         data-slot="native-select"
+        id={field?.id ?? local.id}
+        aria-label={local['aria-label']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         class={cn(
           'h-control-md min-w-0 appearance-none rounded-md border border-input bg-transparent px-control-md pr-9 text-sm',
           'transition-[color,box-shadow,border-color] ease-out outline-none',

package/src/components/ui/progress/progress.tsx

@@ -40,14 +40,18 @@ export function Progress(props: ProgressProps) {
 
   return (
     <KobalteProgress class={cn('flex w-full flex-col gap-1.5', local.class)} {...rest}>
-      <div class="flex items-center justify-between gap-3">
-        <KobalteProgress.Label class="text-muted-foreground text-sm">
-          {local.label}
-        </KobalteProgress.Label>
-        <Show when={!local.hideValue}>
-          <KobalteProgress.ValueLabel class="text-muted-foreground text-sm tabular-nums" />
-        </Show>
-      </div>
+      <Show when={local.label || !local.hideValue}>
+        <div class="flex items-center justify-between gap-3">
+          <Show when={local.label}>
+            <KobalteProgress.Label class="text-muted-foreground text-sm">
+              {local.label}
+            </KobalteProgress.Label>
+          </Show>
+          <Show when={!local.hideValue}>
+            <KobalteProgress.ValueLabel class="text-muted-foreground text-sm tabular-nums" />
+          </Show>
+        </div>
+      </Show>
       <KobalteProgress.Track
         class={cn('bg-input relative h-1.5 w-full overflow-hidden rounded-full', local.trackClass)}
       >

package/src/components/ui/radio-group/radio-group.tsx

@@ -2,6 +2,7 @@ import { RadioGroup as KobalteRadioGroup } from '@kobalte/core/radio-group'
 import { Circle } from 'lucide-solid'
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 /**
@@ -17,8 +18,35 @@ import { cn } from '#lib/utils'
  * tokens so either choice sits correctly next to the other.
  */
 export function RadioGroup(props: ComponentProps<typeof KobalteRadioGroup>) {
-  const [local, rest] = splitProps(props, ['class'])
-  return <KobalteRadioGroup class={cn('grid gap-2', local.class)} {...rest} />
+  const [local, rest] = splitProps(props, [
+    'class',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('group', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
+  return (
+    <KobalteRadioGroup
+      id={field?.id ?? local.id}
+      aria-label={local['aria-label']}
+      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
+      class={cn('grid gap-2', local.class)}
+      {...rest}
+    />
+  )
 }
 
 export type RadioGroupItemProps = ComponentProps<typeof KobalteRadioGroup.Item> & {

package/src/components/ui/switch/switch.tsx

@@ -1,6 +1,7 @@
 import { Switch as KobalteSwitch } from '@kobalte/core/switch'
 import type { ComponentProps, JSX } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 /**
@@ -17,6 +18,8 @@ import { cn } from '#lib/utils'
  * user sees.
  */
 export type SwitchProps = Omit<ComponentProps<typeof KobalteSwitch>, 'children'> & {
+  /** ID for the hidden native switch input; useful with an external label. */
+  inputId?: string
   controlClass?: string
   thumbClass?: string
   labelClass?: string
@@ -44,22 +47,36 @@ export function Switch(props: SwitchProps) {
     'aria-labelledby',
     'aria-describedby',
     'aria-invalid',
+    'aria-errormessage',
     'aria-busy',
+    'id',
+    'inputId',
     'title',
   ])
+  const field = useFormFieldControl('control', {
+    id: local.inputId ?? local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <KobalteSwitch
+      id={field ? undefined : local.id}
       title={local.title}
       class={cn('group/switch flex items-center gap-2.5', local.class)}
       {...rest}
     >
       {/* The name belongs on the input; see Checkbox for why. */}
       <KobalteSwitch.Input
+        id={field?.id ?? local.inputId}
         aria-label={local['aria-label']}
-        aria-labelledby={local['aria-labelledby']}
-        aria-describedby={local['aria-describedby']}
-        aria-invalid={local['aria-invalid']}
+        aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+        aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+        aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+        aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
         aria-busy={local['aria-busy']}
         title={local.title}
       />

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

@@ -59,7 +59,7 @@ export function TabsTrigger(props: TabsTriggerProps) {
         'transition-colors ease-out outline-none select-none',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
         'disabled:pointer-events-none disabled:opacity-50',
-        'text-muted-foreground hover:text-foreground data-[selected]:text-foreground',
+        'text-foreground',
         '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
         local.appearance === 'segmented'
           ? 'h-control-sm rounded-md px-control-sm data-[selected]:bg-card data-[selected]:shadow-xs'

package/src/components/ui/text-link/index.ts

@@ -0,0 +1,2 @@
+// TextLink: inline navigation for prose and content.
+export { TextLink } from './text-link'

package/src/components/ui/text-link/text-link.tsx

@@ -0,0 +1,28 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '#lib/utils'
+
+/**
+ * TextLink.
+ *
+ * An inline, underlined link for prose and content navigation. Use ActionButton
+ * or ListRow when the link is a compact action or a row-sized target.
+ */
+export function TextLink(props: ComponentProps<'a'>) {
+  const [local, rest] = splitProps(props, ['class', 'tabIndex'])
+
+  return (
+    <a
+      data-slot="textlink"
+      class={cn(
+        'rounded-sm text-foreground underline decoration-primary underline-offset-4',
+        'transition-colors ease-out hover:decoration-foreground outline-none',
+        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'motion-reduce:transition-none',
+        local.class
+      )}
+      tabIndex={local.tabIndex ?? 0}
+      {...rest}
+    />
+  )
+}

package/src/components/ui/textarea/textarea.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { useFormFieldControl } from '#lib/form-field'
 import { cn } from '#lib/utils'
 
 /**
@@ -14,11 +15,33 @@ import { cn } from '#lib/utils'
  * remains the fallback so an unsupported engine still gets a usable height.
  */
 export function Textarea(props: ComponentProps<'textarea'>) {
-  const [local, rest] = splitProps(props, ['class'])
+  const [local, rest] = splitProps(props, [
+    'class',
+    'id',
+    'aria-label',
+    'aria-labelledby',
+    'aria-describedby',
+    'aria-invalid',
+    'aria-errormessage',
+  ])
+  const field = useFormFieldControl('control', {
+    id: local.id,
+    'aria-label': local['aria-label'],
+    'aria-labelledby': local['aria-labelledby'],
+    'aria-describedby': local['aria-describedby'],
+    'aria-invalid': local['aria-invalid'],
+    'aria-errormessage': local['aria-errormessage'],
+  })
 
   return (
     <textarea
       data-slot="textarea"
+      id={field?.id ?? local.id}
+      aria-label={local['aria-label']}
+      aria-labelledby={field?.['aria-labelledby'] ?? local['aria-labelledby']}
+      aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
+      aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
+      aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
       class={cn(
         'flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-control-md py-2 text-sm',
         'transition-[color,box-shadow,border-color] ease-out outline-none',

package/src/index.ts

@@ -69,6 +69,7 @@ export * from './components/ui/switch'
 export * from './components/ui/table'
 export * from './components/ui/tabs'
 export * from './components/ui/textarea'
+export * from './components/ui/text-link'
 export * from './components/ui/toast'
 export * from './components/ui/toggle'
 export * from './components/ui/toggle-group'
@@ -79,6 +80,7 @@ export * from './components/motion'
 
 /* --- Layout -------------------------------------------------------------- */
 export * from './components/layout/split-layout'
+export * from './components/layout/floating-preview'
 export * from './components/layout/orbit-layout'
 export * from './components/layout/virtual-window'
 export * from './components/layout/app-shell'
@@ -98,6 +100,7 @@ export * from './components/theme'
 /* --- Composites ---------------------------------------------------------- */
 export * from './components/composites/account-menu'
 export * from './components/composites/action-button'
+export * from './components/composites/catalog-browser'
 export * from './components/composites/list-row'
 export * from './components/composites/settings'
 export * from './components/composites/stat'
@@ -137,6 +140,7 @@ export {
   type ThemeVariant,
 } from './lib/themes'
 export { keyedRows, type KeyedRow } from './lib/keyed-rows'
+export { writeClipboardText } from './lib/clipboard'
 export { formatBytes, formatReleaseDate, plainTextFromMarkdown } from './lib/version-notes'
 export {
   accentPresets,

package/src/lib/clipboard.ts

@@ -0,0 +1,41 @@
+const CLIPBOARD_UNAVAILABLE = 'Clipboard is unavailable in this WebView'
+
+/** Writes text with the async Clipboard API, falling back for older WebViews. */
+export async function writeClipboardText(value: string): Promise<void> {
+  if (typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function') {
+    await navigator.clipboard.writeText(value)
+    return
+  }
+
+  if (typeof document === 'undefined' || !document.body) {
+    throw new Error(CLIPBOARD_UNAVAILABLE)
+  }
+
+  const previousFocus = document.activeElement
+  const textarea = document.createElement('textarea')
+  textarea.value = value
+  textarea.setAttribute('readonly', '')
+  textarea.setAttribute('aria-hidden', 'true')
+  textarea.tabIndex = -1
+  textarea.style.position = 'fixed'
+  textarea.style.opacity = '0'
+  document.body.appendChild(textarea)
+
+  let copied = false
+  try {
+    textarea.focus({ preventScroll: true })
+    textarea.select()
+    copied = typeof document.execCommand === 'function' && document.execCommand('copy')
+  } finally {
+    textarea.remove()
+    if (previousFocus instanceof HTMLElement && previousFocus.isConnected) {
+      try {
+        previousFocus.focus({ preventScroll: true })
+      } catch {
+        // A host may revoke focus during the copy; preserve the clipboard outcome.
+      }
+    }
+  }
+
+  if (!copied) throw new Error(CLIPBOARD_UNAVAILABLE)
+}

package/src/lib/download.ts

@@ -0,0 +1,29 @@
+/** Download a Blob through a temporary, non-focusable anchor. */
+export function downloadBlob(blob: Blob, filename: string): void {
+  const objectUrl = URL.createObjectURL(blob)
+  const previousFocus = document.activeElement as HTMLElement | null
+  let anchor: HTMLAnchorElement | undefined
+
+  try {
+    anchor = document.createElement('a')
+    anchor.href = objectUrl
+    anchor.download = filename
+    anchor.hidden = true
+    anchor.tabIndex = -1
+    anchor.setAttribute('aria-hidden', 'true')
+    document.body.append(anchor)
+    anchor.click()
+  } finally {
+    try {
+      anchor?.remove()
+    } finally {
+      try {
+        if (previousFocus?.isConnected && document.activeElement !== previousFocus) {
+          previousFocus.focus({ preventScroll: true })
+        }
+      } finally {
+        setTimeout(() => URL.revokeObjectURL(objectUrl), 0)
+      }
+    }
+  }
+}

package/src/lib/form-field.ts

@@ -0,0 +1,93 @@
+import type { ComponentProps } from 'solid-js'
+import { createContext, createSignal, useContext } from 'solid-js'
+
+export type FormFieldControlKind = 'control' | 'group'
+
+export type FormFieldContextValue = {
+  group: () => boolean
+  labelId: string
+  controlId: () => string
+  registerControlId: (requestedId?: string) => string | undefined
+  describedBy: () => string | undefined
+  errorId: () => string | undefined
+  invalid: () => boolean
+}
+
+export const FormFieldContext = createContext<FormFieldContextValue>()
+
+function mergeIds(...values: Array<string | undefined>) {
+  return (
+    [...new Set(values.flatMap((value) => value?.split(/\s+/).filter(Boolean) ?? []))].join(' ') ||
+    undefined
+  )
+}
+
+export function createFormFieldContext(props: {
+  controlId?: string
+  defaultControlId: string
+  labelId: string
+  descriptionId?: string
+  errorId?: string
+  hint: () => string | undefined
+  error: () => string | undefined
+  group: () => boolean
+}): FormFieldContextValue {
+  const [controlId, setControlId] = createSignal(props.controlId ?? props.defaultControlId)
+
+  return {
+    group: props.group,
+    labelId: props.labelId,
+    controlId,
+    registerControlId(requestedId) {
+      if (props.group() && !requestedId) return undefined
+      if (requestedId) {
+        setControlId(requestedId)
+        return requestedId
+      }
+      return props.group() ? undefined : controlId()
+    },
+    describedBy: () =>
+      [props.hint() ? props.descriptionId : undefined, props.error() ? props.errorId : undefined]
+        .filter((id): id is string => Boolean(id))
+        .join(' ') || undefined,
+    errorId: () => (props.error() ? props.errorId : undefined),
+    invalid: () => Boolean(props.error()),
+  }
+}
+
+export function useFormFieldControl(
+  kind: FormFieldControlKind,
+  props: {
+    id?: string
+    'aria-label'?: string
+    'aria-labelledby'?: string
+    'aria-describedby'?: string
+    'aria-invalid'?: ComponentProps<'input'>['aria-invalid']
+    'aria-errormessage'?: string
+  } = {}
+) {
+  const field = useContext(FormFieldContext)
+  if (!field) return null
+
+  const groupedDescendant = field.group() && kind !== 'group'
+  const id = groupedDescendant ? props.id : field.registerControlId(props.id)
+  const labelledBy =
+    props['aria-label'] || props['aria-labelledby']
+      ? props['aria-labelledby']
+      : groupedDescendant
+        ? undefined
+        : field.labelId
+  return {
+    id,
+    'aria-labelledby': labelledBy,
+    get 'aria-describedby'() {
+      return mergeIds(props['aria-describedby'], field.describedBy())
+    },
+    get 'aria-invalid'() {
+      return props['aria-invalid'] ?? (field.invalid() || undefined)
+    },
+    get 'aria-errormessage'() {
+      return props['aria-errormessage'] ?? field.errorId()
+    },
+  }
+}