@adea-ai/ui 0.143.0 → 0.144.0

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

@@ -1,15 +1,18 @@
 import { RadioGroup as Radio } from '@kobalte/core/radio-group'
-import { ImageUp, Trash2 } from 'lucide-solid'
-import { For, Show, createSignal, createUniqueId } from 'solid-js'
+import { ChevronDown, ImageUp, Trash2 } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createSignal, createUniqueId, splitProps } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 import { cn } from '#lib/utils'
 import { Button } from '../../ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '../../ui/popover'
 import {
   MarkImageError,
   markImageFromFile,
   markImageProblemCopy,
   MARK_IMAGE_MAX_SOURCE_BYTES,
 } from './image-data-url'
-import { resolveShellIcon, shellIconEntries } from './shell-icons'
+import { resolveShellIcon, shellIconEntries, shellIconLabel } from './shell-icons'
 
 /**
  * IconPicker.
@@ -182,3 +185,62 @@ export function IconPicker(props: IconPickerProps) {
     </div>
   )
 }
+
+/**
+ * IconPickerDropdown.
+ *
+ * The compact form of the picker for a settings row: one button showing the
+ * current mark, opening the full grid (and the upload row, when the host offers
+ * it) in a popover. Choosing a glyph applies it and closes the popover; an
+ * upload or Remove leaves it open so the result is visible. The host owns the
+ * value exactly as it does for `IconPicker`.
+ */
+export type IconPickerDropdownProps = IconPickerProps & {
+  /** The mark shown on the trigger; defaults to the checked glyph or the uploaded image. */
+  trigger?: JSX.Element
+}
+
+export function IconPickerDropdown(props: IconPickerDropdownProps) {
+  const [open, setOpen] = createSignal(false)
+  const [local, picker] = splitProps(props, ['trigger', 'class'])
+  const Current = () => resolveShellIcon(props.value ?? props.defaultKey ?? '')
+  return (
+    <Popover open={open()} onOpenChange={setOpen} placement="bottom-start">
+      <PopoverTrigger
+        as={Button}
+        type="button"
+        variant="outline"
+        data-slot="icon-picker-trigger"
+        aria-label={`${props.label}: ${props.image ? 'uploaded image' : shellIconLabel(props.value ?? props.defaultKey ?? '')}`}
+        disabled={props.disabled}
+        class={cn('gap-2', local.class)}
+      >
+        <span aria-hidden="true" class="flex size-5 items-center justify-center overflow-hidden">
+          <Show
+            when={local.trigger}
+            fallback={
+              <Show
+                when={props.image}
+                fallback={<Dynamic component={Current()} class="size-4" aria-hidden="true" />}
+              >
+                {(src) => <img src={src()} alt="" class="size-full rounded-sm object-cover" />}
+              </Show>
+            }
+          >
+            {local.trigger}
+          </Show>
+        </span>
+        <ChevronDown class="size-4 text-muted-foreground" aria-hidden="true" />
+      </PopoverTrigger>
+      <PopoverContent class="w-[min(22rem,var(--kb-popper-available-width))]">
+        <IconPicker
+          {...picker}
+          onValueChange={(key) => {
+            picker.onValueChange(key)
+            setOpen(false)
+          }}
+        />
+      </PopoverContent>
+    </Popover>
+  )
+}

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

@@ -1,4 +1,9 @@
-export { IconPicker, type IconPickerProps } from './icon-picker'
+export {
+  IconPicker,
+  IconPickerDropdown,
+  type IconPickerDropdownProps,
+  type IconPickerProps,
+} from './icon-picker'
 export {
   MARK_IMAGE_MAX_DATA_URL_LENGTH,
   MARK_IMAGE_MAX_SOURCE_BYTES,

package/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/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/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(