@adea-ai/ui 0.89.1 → 0.93.2

package/dist/r/src/components/layout/sidebar-nav/sidebar-nav.tsx

@@ -44,7 +44,7 @@ export function SidebarNav<T extends ValidComponent = 'nav'>(props: SidebarNavPr
       as="nav"
       aria-label={local['aria-label'] ?? 'Section'}
       class={cn(
-        'bg-sidebar text-sidebar-foreground flex h-full w-sidebar shrink-0 flex-col border-e border-sidebar-border',
+        'bg-sidebar text-sidebar-foreground flex h-full w-sidebar min-w-0 max-w-full shrink-0 flex-col border-e border-sidebar-border',
         local.class
       )}
       {...(rest as ComponentProps<'nav'>)}
@@ -128,6 +128,8 @@ export type SidebarNavSectionProps = ComponentProps<'div'> & {
   /** Render a disclosure control instead of a plain heading. */
   collapsible?: boolean
   defaultOpen?: boolean
+  /** Mark the current project/group without changing its disclosure state. */
+  active?: boolean
   /** Controlled disclosure state. When supplied, the host owns changes. */
   open?: boolean
   /** Called for user-initiated disclosure changes. */
@@ -148,6 +150,7 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
     'label',
     'collapsible',
     'defaultOpen',
+    'active',
     'open',
     'onOpenChange',
     'triggerProps',
@@ -188,17 +191,29 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
 
   return (
     <div data-slot="sidebar-nav-section" class={cn('flex flex-col gap-0.5', local.class)} {...rest}>
-      <div class="group/section-header flex items-center gap-1 rounded-md px-2 py-1.5 hover:bg-sidebar-accent/60">
+      <div
+        data-slot="sidebar-nav-section-header"
+        data-active={local.active ? '' : undefined}
+        class={cn(
+          'group/section-header flex items-center gap-1 rounded-md px-2 py-1.5',
+          { '[@media(pointer:coarse)]:py-0': local.collapsible },
+          local.active ? 'bg-primary-subtle text-foreground' : 'hover:bg-sidebar-accent/60'
+        )}
+      >
         <Polymorphic
           as={local.headingAs ?? 'div'}
           aria-label={local.headingAs ? local.label : undefined}
-          class="flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase"
+          class={cn(
+            'flex min-w-0 flex-1 items-center gap-1.5 text-2xs font-medium tracking-wide uppercase',
+            local.active ? 'text-foreground' : 'text-sidebar-muted-foreground'
+          )}
         >
           <Show when={local.collapsible} fallback={heading}>
             <button
               {...(triggerRest as ComponentProps<'button'>)}
               type="button"
               aria-expanded={open()}
+              aria-current={local.active ? 'page' : triggerRest['aria-current']}
               onClick={(event) => {
                 invokeEventHandler(trigger.onClick, event)
                 if (event.defaultPrevented) return
@@ -212,7 +227,10 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
                 event.stopPropagation()
                 trigger.onReorder?.(event.key === 'ArrowUp' ? 'up' : 'down')
               }}
-              class="flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide text-sidebar-muted-foreground uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle"
+              class={cn(
+                'flex min-w-0 flex-1 items-center gap-1.5 rounded-sm text-2xs font-medium tracking-wide uppercase outline-none transition-colors ease-out hover:text-sidebar-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle [@media(pointer:coarse)]:min-h-11',
+                local.active ? 'text-foreground' : 'text-sidebar-muted-foreground'
+              )}
             >
               {heading}
             </button>
@@ -231,6 +249,53 @@ export function SidebarNavSection(props: SidebarNavSectionProps) {
   )
 }
 
+export type SidebarNavRowProps = ComponentProps<'div'> & {
+  /** Adjacent controls, outside the navigation item's interactive element. */
+  actions?: JSX.Element
+}
+
+/**
+ * A navigation item and its adjacent controls. Actions stay outside the item
+ * to avoid nested buttons; touch, keyboard focus, and expanded menus expose
+ * them without requiring a pointer hover. A narrow lane or enlarged text
+ * may move actions onto a second line rather than clipping the label or controls.
+ */
+export function SidebarNavRow(props: SidebarNavRowProps) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'actions'])
+  return (
+    <div
+      data-slot="sidebar-nav-row"
+      class={cn(
+        'group/sidebar-nav-row flex min-w-0 flex-wrap items-center gap-0.5 [&>[data-slot=sidebar-nav-item]]:flex-1 [&>[data-slot=sidebar-nav-item]]:basis-36',
+        local.class
+      )}
+      {...rest}
+    >
+      {local.children}
+      <Show when={local.actions}>
+        <span
+          data-slot="sidebar-nav-row-actions"
+          class="ms-auto flex shrink-0 items-center gap-0.5 opacity-0 transition-opacity ease-out group-hover/sidebar-nav-row:opacity-100 group-focus-within/sidebar-nav-row:opacity-100 has-[[aria-haspopup=menu][aria-expanded=true]]:opacity-100 has-[[aria-haspopup=true][aria-expanded=true]]:opacity-100 [@media(hover:none)]:opacity-100"
+        >
+          {local.actions}
+        </span>
+      </Show>
+    </div>
+  )
+}
+
+/** Row text may truncate visually; its complete content remains the accessible name. */
+export function SidebarNavLabel(props: ComponentProps<'span'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return (
+    <span
+      data-slot="sidebar-nav-label"
+      class={cn('min-w-0 flex-1 truncate', local.class)}
+      {...rest}
+    />
+  )
+}
+
 export type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicProps<
   T,
   {
@@ -243,10 +308,13 @@ export type SidebarNavItemProps<T extends ValidComponent = 'a'> = PolymorphicPro
   }
 >
 
-/** A sidebar row. Exported classes, so a caller's own element can match it. */
+/**
+ * A sidebar row. Exported classes, so a caller's own element can match it.
+ * Coarse pointers get a 44px target without changing Kiro's desktop density.
+ */
 export const sidebarNavItemClass = [
   'group/nav-item relative flex min-w-0 items-center gap-2.5 rounded-md px-3 py-2 text-sm font-medium',
-  'whitespace-nowrap transition-colors ease-out outline-none select-none',
+  'whitespace-nowrap transition-colors ease-out outline-none select-none [@media(pointer:coarse)]:min-h-11',
   'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
   '[&_svg]:size-4 [&_svg]:shrink-0',
 ].join(' ')
@@ -268,6 +336,7 @@ export function SidebarNavItem<T extends ValidComponent = 'a'>(props: SidebarNav
   return (
     <Polymorphic
       as="a"
+      data-slot="sidebar-nav-item"
       aria-current={local.active ? 'page' : undefined}
       data-active={local.active ? '' : undefined}
       class={cn(

package/dist/r/src/components/layout/top-bar/top-bar.tsx

@@ -1,15 +1,16 @@
 import type { ComponentProps } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
+import { Search } from 'lucide-solid'
 import { cn } from '../../../lib/utils'
 
 /**
  * TopBar.
  *
  * The window's title row and primary toolbar. Three tracks: a leading group, a
- * centred search, and a trailing group. The search is a fixed function of the
- * window width and the two side groups are equal remainders, which is what
- * makes the search *exactly* window-centred by construction — no measurement,
- * no observer, no absolutely-positioned overlay to keep clear of.
+ * centred search, and a trailing group. On wide screens the search is a fixed
+ * function of the window width and the side groups are equal remainders. On
+ * narrow screens the middle track yields space to the controls, and each side
+ * group scrolls when necessary so keyboard focus can reveal every action.
  *
  * On a frameless desktop window this row is also the drag region, so it carries
  * `window-drag` and the controls inside it opt back out. `macos-inset` and
@@ -41,7 +42,7 @@ export function TopBar(props: TopBarProps) {
     <header
       data-slot="top-bar"
       class={cn(
-        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
+        'h-topbar relative z-(--z-sticky) grid shrink-0 grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center gap-3 border-b border-border bg-card text-card-foreground px-3 md:grid-cols-[minmax(0,1fr)_clamp(240px,22vw,480px)_minmax(0,1fr)]',
         local.glass && 'glass-panel',
         local.draggable && 'window-drag',
         local.macosInset && 'window-inset-macos',
@@ -53,25 +54,46 @@ export function TopBar(props: TopBarProps) {
   )
 }
 
-/** A side group. Both sides are equal remainders, which centres the search. */
+function invokeFocusHandler(handler: unknown, event: Event) {
+  if (Array.isArray(handler)) {
+    const [callback, data] = handler as [(data: unknown, event: Event) => void, unknown]
+    callback(data, event)
+  } else if (typeof handler === 'function') {
+    const callback = handler as (event: Event) => void
+    callback(event)
+  }
+}
+
+/** A scrollable side group; equal wide-screen tracks centre the search. */
 export function TopBarSection(props: ComponentProps<'div'> & { align?: 'start' | 'end' }) {
-  const [local, rest] = splitProps(props, ['class', 'align'])
+  const [local, rest] = splitProps(props, ['class', 'align', 'onFocusIn'])
 
   return (
     <div
       data-slot="top-bar-section"
       class={cn(
         'window-no-drag flex min-w-0 items-center gap-2 overflow-x-auto overflow-y-hidden',
-        local.align === 'end' && 'justify-end',
+        local.align === 'end' && 'md:justify-end',
         local.align !== 'end' && 'justify-start',
         local.class
       )}
+      onFocusIn={(event) => {
+        if (event.target instanceof HTMLElement) {
+          event.target.scrollIntoView({ block: 'nearest', inline: 'nearest' })
+        }
+        invokeFocusHandler(local.onFocusIn, event)
+      }}
       {...rest}
     />
   )
 }
 
-export function TopBarTitle(props: ComponentProps<'div'> & { align?: 'start' | 'center' }) {
+export function TopBarTitle(
+  props: ComponentProps<'div'> & {
+    /** Aligns text within this slot; it does not position the slot. */
+    align?: 'start' | 'center'
+  }
+) {
   const [local, rest] = splitProps(props, ['class', 'align'])
   return (
     <div
@@ -122,7 +144,7 @@ export function TopBarSearch(props: TopBarSearchProps) {
       type="button"
       data-slot="top-bar-search"
       class={cn(
-        'text-muted-foreground flex h-control-md w-full items-center gap-2 rounded-md border border-input px-3 text-sm',
+        'text-muted-foreground flex h-control-md w-full min-w-(--control-height-md) items-center justify-center gap-2 rounded-md border border-input px-3 text-sm sm:justify-start',
         'transition-colors ease-out outline-none',
         'hover:bg-surface-hover hover:text-foreground',
         'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
@@ -131,7 +153,8 @@ export function TopBarSearch(props: TopBarSearchProps) {
       )}
       {...rest}
     >
-      <span class="truncate">{local.placeholder ?? 'Search'}</span>
+      <Search aria-hidden="true" class="size-4 shrink-0 sm:hidden" />
+      <span class="sr-only sm:not-sr-only sm:truncate">{local.placeholder ?? 'Search'}</span>
       <Show when={local.shortcut}>
         <kbd class="bg-muted ms-auto hidden h-5 shrink-0 items-center rounded-sm border border-border px-1.5 font-mono text-2xs sm:flex">
           {local.shortcut}

package/dist/r/src/components/ui/dialog/dialog.tsx

@@ -257,15 +257,17 @@ export type DialogContentProps = ComponentProps<typeof KobalteDialogContent> & {
    * user can escape from needs the button.
    */
   closeButton?: JSX.Element | false
+  /** Use a 1rem inset as the positioner bounds for tall, viewport-filling surfaces. */
+  positioner?: 'default' | 'inset'
 }
 
 export function DialogContent(props: DialogContentProps) {
-  const [local, rest] = splitProps(props, ['class', 'children', 'closeButton'])
+  const [local, rest] = splitProps(props, ['class', 'children', 'closeButton', 'positioner'])
 
   return (
     <KobalteDialog.Portal>
       <DialogOverlay />
-      <div class={overlayPositioner}>
+      <div class={cn(overlayPositioner, local.positioner === 'inset' && 'inset-4 grid-rows-1 p-0')}>
         <KobalteDialogContent
           class={cn(
             overlaySurface,

package/dist/r/src/components/ui/modal-dialog/modal-dialog.tsx

@@ -35,12 +35,15 @@ import {
  *      cannot be inferred from the focused element.
  *
  * Use `Dialog` directly when you need its composition; use this when you want a
- * dialog that is correct by default.
+ * dialog that is correct by default. `size="settings"` supplies a wide, bounded
+ * shell for a shared settings layout; ordinary dialogs keep their compact default.
  */
 export type ModalDialogProps = Omit<
   ComponentProps<typeof DialogContent>,
-  'children' | 'aria-label' | 'aria-labelledby'
+  'children' | 'aria-label' | 'aria-labelledby' | 'positioner'
 > & {
+  /** Selects the bounded, scrollable shell used for grouped workspace settings. */
+  size?: 'default' | 'settings'
   open: boolean
   onClose: () => void
   title: string
@@ -70,6 +73,7 @@ export function ModalDialog(props: ModalDialogProps) {
     'onClose',
     'title',
     'modal',
+    'size',
     'description',
     'headerLeading',
     'class',
@@ -114,7 +118,13 @@ export function ModalDialog(props: ModalDialogProps) {
       <Dialog open modal={local.modal ?? true} onOpenChange={(next) => !next && local.onClose()}>
         <DialogContent
           ref={setContent}
-          class={cn('gap-4', local.class)}
+          positioner={local.size === 'settings' ? 'inset' : 'default'}
+          class={cn(
+            'gap-4',
+            local.size === 'settings' &&
+              'flex h-208 max-h-full min-h-0 max-w-6xl flex-col gap-0 overflow-hidden p-0',
+            local.class
+          )}
           aria-label={local['aria-label'] ?? local.title}
           aria-labelledby={
             local['aria-labelledby'] ?? (local['aria-label'] !== undefined ? '' : undefined)
@@ -123,7 +133,13 @@ export function ModalDialog(props: ModalDialogProps) {
           onOpenAutoFocus={focusRestoration.onOpenAutoFocus}
           onCloseAutoFocus={focusRestoration.onCloseAutoFocus}
         >
-          <DialogHeader>
+          <DialogHeader
+            class={
+              local.size === 'settings'
+                ? 'shrink-0 gap-1 border-b border-border px-5 pt-4 pb-3 pe-14'
+                : undefined
+            }
+          >
             <DialogTitle class="flex items-center gap-2">
               <Show when={local.headerLeading}>{local.headerLeading}</Show>
               {local.title}

package/dist/r/src/components/ui/textarea/index.ts

@@ -1 +1 @@
-export { Textarea } from './textarea'
+export { Textarea, textareaVariants, type TextareaProps } from './textarea'

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

@@ -1,8 +1,49 @@
-import type { ComponentProps } from 'solid-js'
+import type { ComponentProps, Ref } from 'solid-js'
 import { splitProps } from 'solid-js'
+import { cva, type VariantProps } from 'class-variance-authority'
 import { useFormFieldControl } from '../../../lib/form-field'
 import { cn } from '../../../lib/utils'
 
+export const textareaVariants = cva(
+  [
+    'flex field-sizing-content 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',
+    'placeholder:text-muted-foreground',
+    'selection:bg-primary selection:text-primary-foreground',
+    'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+    'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
+    'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+  ],
+  {
+    variants: {
+      variant: {
+        default: '',
+        composer: 'border-0 bg-transparent p-0 shadow-none focus-visible:ring-0',
+      },
+      size: {
+        default: 'min-h-16',
+        comfortable: 'min-h-16 max-h-48',
+      },
+      resize: {
+        vertical: 'resize-y',
+        none: 'resize-none',
+        both: 'resize',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+      resize: 'vertical',
+    },
+  }
+)
+
+export type TextareaProps = Omit<ComponentProps<'textarea'>, 'size'> &
+  VariantProps<typeof textareaVariants> & {
+    /** Solid's actual textarea element, rather than its containing component or form. */
+    ref?: Ref<HTMLTextAreaElement>
+  }
+
 /**
  * Textarea.
  *
@@ -13,10 +54,17 @@ import { cn } from '../../../lib/utils'
  * `field-sizing: content` lets the element grow with its content where the
  * engine supports it, which is the behaviour a chat composer wants; `rows`
  * remains the fallback so an unsupported engine still gets a usable height.
+ * `variant="composer"` removes the standalone field surface when nested in a
+ * composer shell. `size="comfortable"` caps growth at the shared 12rem rung, and
+ * the finite `resize` variants keep browser resize behavior explicit.
  */
-export function Textarea(props: ComponentProps<'textarea'>) {
+export function Textarea(props: TextareaProps) {
   const [local, rest] = splitProps(props, [
     'class',
+    'variant',
+    'size',
+    'resize',
+    'ref',
     'id',
     'aria-label',
     'aria-labelledby',
@@ -42,15 +90,9 @@ export function Textarea(props: ComponentProps<'textarea'>) {
       aria-describedby={field?.['aria-describedby'] ?? local['aria-describedby']}
       aria-invalid={field?.['aria-invalid'] ?? local['aria-invalid']}
       aria-errormessage={field?.['aria-errormessage'] ?? local['aria-errormessage']}
+      ref={local.ref}
       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',
-        'placeholder:text-muted-foreground',
-        'selection:bg-primary selection:text-primary-foreground',
-        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
-        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive-subtle',
-        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
-        'resize-y',
+        textareaVariants({ variant: local.variant, size: local.size, resize: local.resize }),
         local.class
       )}
       {...rest}