@adea-ai/ui 0.85.0 → 0.87.0

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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()
+    },
+  }
+}

package/dist/r/text-link.json

@@ -0,0 +1,22 @@
+{
+  "name": "text-link",
+  "type": "registry:ui",
+  "title": "Text Link",
+  "description": "",
+  "dependencies": [],
+  "registryDependencies": [
+    "lib"
+  ],
+  "files": [
+    {
+      "path": "src/components/ui/text-link/index.ts",
+      "type": "registry:ui",
+      "target": "components/ui/text-link/index.ts"
+    },
+    {
+      "path": "src/components/ui/text-link/text-link.tsx",
+      "type": "registry:ui",
+      "target": "components/ui/text-link/text-link.tsx"
+    }
+  ]
+}

package/dist/r/theming.json

@@ -10,6 +10,7 @@
     "@adea-ai/ui/button",
     "@adea-ai/ui/radio-group",
     "@adea-ai/ui/toggle-group",
+    "@adea-ai/ui/tooltip",
     "lib"
   ],
   "files": [
@@ -23,6 +24,11 @@
       "type": "registry:ui",
       "target": "components/theming/index.ts"
     },
+    {
+      "path": "src/components/theme/theme-mode-toggle.tsx",
+      "type": "registry:ui",
+      "target": "components/theming/theme-mode-toggle.tsx"
+    },
     {
       "path": "src/components/theme/theme-picker.tsx",
       "type": "registry:ui",

package/package.json

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

@@ -433,6 +433,11 @@
           "path": "src/components/ui/combobox/index.ts",
           "type": "registry:ui",
           "target": "components/ui/combobox/index.ts"
+        },
+        {
+          "path": "src/components/ui/combobox/value-combobox.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/combobox/value-combobox.tsx"
         }
       ]
     },
@@ -614,11 +619,20 @@
       "type": "registry:ui",
       "title": "Empty",
       "description": "",
-      "dependencies": [],
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
       "registryDependencies": [
+        "@adea-ai/ui/action-button",
+        "@adea-ai/ui/spinner",
         "lib"
       ],
       "files": [
+        {
+          "path": "src/components/ui/empty/empty-state.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/empty/empty-state.tsx"
+        },
         {
           "path": "src/components/ui/empty/empty.tsx",
           "type": "registry:ui",
@@ -662,6 +676,8 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/input",
+        "@adea-ai/ui/label",
         "lib"
       ],
       "files": [
@@ -674,6 +690,11 @@
           "path": "src/components/ui/field/index.ts",
           "type": "registry:ui",
           "target": "components/ui/field/index.ts"
+        },
+        {
+          "path": "src/components/ui/field/number-field.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/field/number-field.tsx"
         }
       ]
     },
@@ -716,6 +737,11 @@
           "type": "registry:ui",
           "target": "components/ui/input/index.ts"
         },
+        {
+          "path": "src/components/ui/input/input-control.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/input/input-control.tsx"
+        },
         {
           "path": "src/components/ui/input/input.tsx",
           "type": "registry:ui",
@@ -730,6 +756,7 @@
       "description": "",
       "dependencies": [],
       "registryDependencies": [
+        "@adea-ai/ui/action-button",
         "lib"
       ],
       "files": [
@@ -742,6 +769,11 @@
           "path": "src/components/ui/input-group/input-group.tsx",
           "type": "registry:ui",
           "target": "components/ui/input-group/input-group.tsx"
+        },
+        {
+          "path": "src/components/ui/input-group/secret-input-group.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/input-group/secret-input-group.tsx"
         }
       ]
     },
@@ -1315,6 +1347,28 @@
         }
       ]
     },
+    {
+      "name": "text-link",
+      "type": "registry:ui",
+      "title": "Text Link",
+      "description": "",
+      "dependencies": [],
+      "registryDependencies": [
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/ui/text-link/index.ts",
+          "type": "registry:ui",
+          "target": "components/ui/text-link/index.ts"
+        },
+        {
+          "path": "src/components/ui/text-link/text-link.tsx",
+          "type": "registry:ui",
+          "target": "components/ui/text-link/text-link.tsx"
+        }
+      ]
+    },
     {
       "name": "textarea",
       "type": "registry:ui",
@@ -1454,6 +1508,41 @@
           "path": "src/components/layout/app-shell/index.ts",
           "type": "registry:ui",
           "target": "components/layout/app-shell/index.ts"
+        },
+        {
+          "path": "src/components/layout/app-shell/skip-link.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/app-shell/skip-link.tsx"
+        }
+      ]
+    },
+    {
+      "name": "floating-preview",
+      "type": "registry:ui",
+      "title": "Floating Preview",
+      "description": "",
+      "dependencies": [
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/action-button",
+        "@adea-ai/ui/scroll-area"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/floating-preview/floating-preview.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/floating-preview/floating-preview.tsx"
+        },
+        {
+          "path": "src/components/layout/floating-preview/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/floating-preview/index.ts"
+        },
+        {
+          "path": "src/components/layout/floating-preview/model.ts",
+          "type": "registry:ui",
+          "target": "components/layout/floating-preview/model.ts"
         }
       ]
     },
@@ -1848,6 +1937,7 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
+        "@adea-ai/ui/tooltip",
         "lib"
       ],
       "files": [
@@ -2095,6 +2185,7 @@
         "@adea-ai/ui/button",
         "@adea-ai/ui/radio-group",
         "@adea-ai/ui/toggle-group",
+        "@adea-ai/ui/tooltip",
         "lib"
       ],
       "files": [
@@ -2108,6 +2199,11 @@
           "type": "registry:ui",
           "target": "components/theming/index.ts"
         },
+        {
+          "path": "src/components/theme/theme-mode-toggle.tsx",
+          "type": "registry:ui",
+          "target": "components/theming/theme-mode-toggle.tsx"
+        },
         {
           "path": "src/components/theme/theme-picker.tsx",
           "type": "registry:ui",
@@ -2195,6 +2291,21 @@
       ],
       "registryDependencies": [],
       "files": [
+        {
+          "path": "src/lib/clipboard.ts",
+          "type": "registry:lib",
+          "target": "lib/clipboard.ts"
+        },
+        {
+          "path": "src/lib/download.ts",
+          "type": "registry:lib",
+          "target": "lib/download.ts"
+        },
+        {
+          "path": "src/lib/form-field.ts",
+          "type": "registry:lib",
+          "target": "lib/form-field.ts"
+        },
         {
           "path": "src/lib/keyed-rows.ts",
           "type": "registry:lib",

package/src/components/composites/action-button/action-button.tsx

@@ -111,7 +111,11 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
       .join(' '),
     disabled: disabled() && !local.tooltip,
     'aria-disabled': disabled() ? true : rest['aria-disabled'],
-    tabIndex: local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : rest.tabIndex,
+    // Make tooltip-bearing native controls explicit tab stops in WebKit configurations that
+    // otherwise skip implicit button stops. A caller's tabIndex remains authoritative.
+    tabIndex:
+      rest.tabIndex ??
+      (local.as === 'a' && disabled() ? (local.tooltip ? 0 : -1) : local.tooltip ? 0 : undefined),
     role: local.as === 'a' && disabled() ? 'link' : rest.role,
     href: local.as === 'a' && disabled() ? undefined : (rest as { href?: string }).href,
     'aria-busy': busy() || local['aria-busy'],

package/src/components/composites/list-row/list-row.tsx

@@ -2,6 +2,7 @@ import type { PolymorphicProps } from '@kobalte/core/polymorphic'
 import { Polymorphic } from '@kobalte/core/polymorphic'
 import type { ComponentProps, JSX, ValidComponent } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
+import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
 import { cn } from '#lib/utils'
 
 /**
@@ -18,9 +19,8 @@ import { cn } from '#lib/utils'
  * arithmetic.
  *
  * A row is only interactive when it is given an `as` that can be activated
- * (an anchor, a button) or an `onClick`. Without either it renders as a
- * `div` with no hover treatment, because a hover state on something that does
- * nothing is a lie.
+ * (an anchor, a button) or an `onClick`. Click handlers default to a native
+ * button; a row without either remains a `div` with no hover treatment.
  */
 export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
   T,
@@ -36,30 +36,50 @@ export type ListRowProps<T extends ValidComponent = 'div'> = PolymorphicProps<
     trailing?: JSX.Element
     /** A dimmed second line under the main content. */
     description?: string
+    /** A short explanation shown on pointer hover and keyboard focus. */
+    tooltip?: string
+    /** Native button type; defaults to `button` for button rows. */
+    type?: ComponentProps<'button'>['type']
   }
 >
 
-export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
+type ListRowBaseProps<T extends ValidComponent = 'div'> = ListRowProps<T> & {
+  as?: T
+  type?: ComponentProps<'button'>['type']
+}
+
+function ListRowBase<T extends ValidComponent = 'div'>(props: ListRowBaseProps<T>) {
   const [local, rest] = splitProps(props as ListRowProps, [
+    'as',
     'class',
     'selected',
     'dense',
     'leading',
     'trailing',
     'description',
+    'tooltip',
+    'type',
+    'tabIndex',
     'children',
   ])
 
   return (
     <Polymorphic
-      as="div"
+      as={(local.as ?? 'div') as T}
+      type={local.as === 'button' ? (local.type ?? 'button') : local.type}
+      tabIndex={local.tabIndex ?? (local.as === 'button' || local.as === 'a' ? 0 : undefined)}
       aria-current={local.selected ? 'true' : undefined}
       data-selected={local.selected ? '' : undefined}
       class={cn(
         'group/row flex min-w-0 items-center gap-2.5 rounded-md px-2 text-sm',
         'transition-colors ease-out outline-none',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        { 'h-row-sm': local.dense, 'h-row-md': !local.dense },
+        {
+          'h-row-sm': local.dense && !local.description,
+          'h-row-md': !local.dense && !local.description,
+          'min-h-row-sm py-1': local.dense && local.description,
+          'min-h-row-md py-1.5': !local.dense && local.description,
+        },
         {
           'bg-primary-subtle text-foreground': local.selected,
           'hover:bg-surface-hover': !local.selected,
@@ -76,11 +96,25 @@ export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>
       <span class="flex min-w-0 flex-1 flex-col">
         <span class="truncate">{local.children}</span>
         <Show when={local.description}>
-          <span class="text-muted-foreground truncate text-xs">{local.description}</span>
+          <span
+            data-slot="list-row-description"
+            class={cn(
+              'truncate text-xs',
+              local.selected ? 'text-foreground' : 'text-muted-foreground'
+            )}
+          >
+            {local.description}
+          </span>
         </Show>
       </span>
       <Show when={local.trailing}>
-        <span class="ms-auto flex shrink-0 items-center gap-1 text-muted-foreground">
+        <span
+          data-slot="list-row-trailing"
+          class={cn(
+            'ms-auto flex shrink-0 items-center gap-1',
+            local.selected ? 'text-foreground' : 'text-muted-foreground'
+          )}
+        >
           {local.trailing}
         </span>
       </Show>
@@ -88,6 +122,45 @@ export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>
   )
 }
 
+type ListRowTooltipTargetProps<T extends ValidComponent = 'div'> = Omit<
+  ListRowBaseProps<T>,
+  'as'
+> & { rowAs?: T }
+
+/** Adapts TooltipTrigger's polymorphic target to ListRow's semantic element. */
+function ListRowTooltipTarget<T extends ValidComponent = 'div'>(
+  props: ListRowTooltipTargetProps<T>
+) {
+  const [local, rest] = splitProps(props as ListRowTooltipTargetProps, ['rowAs'])
+  return <ListRowBase as={local.rowAs} {...(rest as ListRowBaseProps<T>)} />
+}
+
+export function ListRow<T extends ValidComponent = 'div'>(props: ListRowProps<T>) {
+  const [local, rest] = splitProps(props as ListRowProps, ['as', 'tooltip'])
+  const hasClickHandler = () => Boolean(rest.onClick || rest['on:click'])
+  const rowAs = () => (local.as ?? (hasClickHandler() ? 'button' : 'div')) as T
+  const rowType = () => (rowAs() === 'button' ? (rest.type ?? 'button') : rest.type)
+
+  return (
+    <Show
+      when={local.tooltip}
+      fallback={<ListRowBase as={rowAs()} type={rowType()} {...(rest as ListRowBaseProps<T>)} />}
+    >
+      <Tooltip>
+        <TooltipTrigger
+          as={ListRowTooltipTarget}
+          rowAs={rowAs()}
+          type={rowType()}
+          {...(rest as ListRowTooltipTargetProps<T>)}
+        >
+          {rest.children}
+        </TooltipTrigger>
+        <TooltipContent>{local.tooltip}</TooltipContent>
+      </Tooltip>
+    </Show>
+  )
+}
+
 /**
  * A group of rows with an optional heading and a scrolling body. The heading is
  * a plain label rather than a control: grouping is for reading, and a