@adea-ai/ui 0.83.0 → 0.84.0

package/package.json

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

@@ -1558,6 +1558,7 @@
       "title": "Sidebar Nav",
       "description": "",
       "dependencies": [
+        "@corvu/resizable@^0.2.5",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.48.0"
       ],
@@ -1570,6 +1571,11 @@
           "type": "registry:ui",
           "target": "components/layout/sidebar-nav/index.ts"
         },
+        {
+          "path": "src/components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx"
+        },
         {
           "path": "src/components/layout/sidebar-nav/sidebar-nav.tsx",
           "type": "registry:ui",

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

@@ -1,4 +1,11 @@
-import { Show, splitProps, type ComponentProps, type JSX, type ValidComponent } from 'solid-js'
+import {
+  Show,
+  createSignal,
+  splitProps,
+  type ComponentProps,
+  type JSX,
+  type ValidComponent,
+} from 'solid-js'
 import { Button, type ButtonProps } from '../../ui/button'
 import { Spinner } from '../../ui/spinner'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../../ui/tooltip'
@@ -27,7 +34,28 @@ export type ActionButtonProps<T extends ValidComponent = 'button'> = ButtonProps
   busyLabel?: string
 }
 
-function guardedClick(handler: unknown, disabled: () => boolean) {
+function invokeHandler(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)
+  }
+}
+
+function chainedHandler(handler: unknown, before: (event: Event) => void) {
+  return (event: Event) => {
+    before(event)
+    invokeHandler(handler, event)
+  }
+}
+
+function guardedClick(
+  handler: unknown,
+  disabled: () => boolean,
+  onActivate: (event: MouseEvent) => void = () => {}
+) {
   return (event: MouseEvent) => {
     if (disabled()) {
       event.preventDefault()
@@ -35,13 +63,8 @@ function guardedClick(handler: unknown, disabled: () => boolean) {
       return
     }
 
-    if (Array.isArray(handler)) {
-      const [callback, data] = handler as [(data: unknown, event: MouseEvent) => void, unknown]
-      callback(data, event)
-    } else if (typeof handler === 'function') {
-      const callback = handler as (event: MouseEvent) => void
-      callback(event)
-    }
+    onActivate(event)
+    invokeHandler(handler, event)
   }
 }
 
@@ -73,6 +96,8 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
   const busy = () => local.busy ?? false
   const disabled = () => busy() || !!local.disabled
   const busyStatus = () => local.busyLabel ?? 'Working'
+  const [tooltipOpen, setTooltipOpen] = createSignal(false)
+  const [tooltipSuppression, setTooltipSuppression] = createSignal<'pointer' | 'focus' | null>(null)
   const onClickCapture = (rest as { onClickCapture?: unknown }).onClickCapture
   const PolymorphicButton = Button as (buttonProps: ButtonProps<T>) => JSX.Element
   const PolymorphicButtonTarget = ButtonTarget as (targetProps: ButtonTargetProps<T>) => JSX.Element
@@ -90,7 +115,17 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
     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'],
-    onClick: guardedClick(rest.onClick, disabled),
+    onClick: guardedClick(rest.onClick, disabled, (event) => {
+      if (!local.tooltip) return
+      setTooltipSuppression(event.detail > 0 ? 'pointer' : 'focus')
+      setTooltipOpen(false)
+    }),
+    onPointerLeave: chainedHandler(rest.onPointerLeave, () => {
+      if (tooltipSuppression() === 'pointer') setTooltipSuppression(null)
+    }),
+    onBlur: chainedHandler(rest.onBlur, () => {
+      if (tooltipSuppression() === 'focus') setTooltipSuppression(null)
+    }),
     onClickCapture: onClickCapture ? guardedClick(onClickCapture, disabled) : undefined,
     'on:click': guardedClick((rest as Record<string, unknown>)['on:click'], disabled),
     'oncapture:click': guardedClick((rest as Record<string, unknown>)['oncapture:click'], disabled),
@@ -118,7 +153,13 @@ export function ActionButton<T extends ValidComponent = 'button'>(props: ActionB
           </PolymorphicButton>
         }
       >
-        <Tooltip>
+        <Tooltip
+          open={tooltipOpen()}
+          onOpenChange={(open) => {
+            if (open && tooltipSuppression()) return
+            setTooltipOpen(open)
+          }}
+        >
           <TooltipTrigger
             as={PolymorphicButtonTarget}
             {...(buttonProps() as unknown as ComponentProps<typeof PolymorphicButtonTarget>)}

package/src/components/layout/sidebar-nav/index.ts

@@ -13,3 +13,7 @@ export {
   type SidebarNavProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
+export {
+  SidebarNavResizeHandle,
+  type SidebarNavResizeHandleProps,
+} from './sidebar-nav-resize-handle'

package/src/components/layout/sidebar-nav/sidebar-nav-resize-handle.tsx

@@ -0,0 +1,59 @@
+import Resizable from '@corvu/resizable'
+import { cn } from '#lib/utils'
+
+export type SidebarNavResizeHandleProps = {
+  value: number
+  minimum: number
+  maximum: number
+  step?: number
+  label?: string
+  controls?: string
+  class?: string
+  onChange(value: number): void
+  onCommit?(value: number): void
+}
+
+/**
+ * Resize a contextual sidebar without making its host recreate a separator
+ * widget. Corvu owns pointer capture, cancellation, constraints, keyboard
+ * movement and cleanup. Its two invisible panels provide a bounded pixel
+ * ruler; the host retains the real pane layout and preference persistence.
+ * Place this inside the positioned sidebar. The ruler can extend over the
+ * adjacent content, but only its handle participates in pointer hit testing.
+ */
+export function SidebarNavResizeHandle(props: SidebarNavResizeHandleProps) {
+  const maximum = () => Math.max(1, props.maximum)
+  const minimum = () => Math.min(maximum(), Math.max(0, props.minimum))
+  const value = () => Math.min(maximum(), Math.max(minimum(), props.value))
+  const commit = () => props.onCommit?.(value())
+
+  return (
+    <Resizable
+      orientation="horizontal"
+      sizes={[value() / maximum(), 1 - value() / maximum()]}
+      keyboardDelta={`${props.step ?? 16}px`}
+      style={{ width: `${maximum()}px` }}
+      class={cn('pointer-events-none absolute inset-y-0 start-0 flex', props.class)}
+      onSizesChange={(sizes) => {
+        const next = Math.round((sizes[0] ?? 0) * maximum())
+        if (next !== value()) props.onChange(Math.min(maximum(), Math.max(minimum(), next)))
+      }}
+    >
+      <Resizable.Panel minSize={minimum() / maximum()} maxSize={1} aria-hidden="true" />
+      <Resizable.Handle
+        aria-label={props.label ?? 'Resize navigation'}
+        aria-controls={props.controls}
+        aria-orientation="vertical"
+        aria-valuemin={minimum()}
+        aria-valuemax={maximum()}
+        aria-valuenow={value()}
+        onHandleDragEnd={commit}
+        onKeyUp={(event) => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) commit()
+        }}
+        class="pointer-events-auto relative z-(--z-docked) w-px -translate-x-full shrink-0 bg-transparent after:absolute after:inset-y-0 after:-inset-x-1 after:w-3 hover:bg-primary focus-visible:bg-primary focus-visible:ring-3 focus-visible:ring-primary-subtle focus-visible:outline-none"
+      />
+      <Resizable.Panel minSize={0} aria-hidden="true" />
+    </Resizable>
+  )
+}

package/src/components/ui/command/command.tsx

@@ -110,6 +110,7 @@ export function CommandDialog(props: CommandDialogProps) {
         <KobalteDialog.Content
           aria-label={commandProps.label}
           cmdk-dialog=""
+          role="dialog"
           class={cn(
             'bg-popover text-popover-foreground fixed top-1/3 left-1/2 z-(--z-dialog) w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
             'overflow-hidden rounded-xl border border-border shadow-xl',

package/src/lint/index.ts

@@ -79,6 +79,28 @@ const objectHasStaticProperty = (node: any, name: string, seen = new Set<unknown
   })
 }
 
+/** Returns literal values for a statically named property in an object spread. */
+const staticObjectPropertyValues = (node: any, name: string, seen = new Set<unknown>()): any[] => {
+  if (!node || seen.has(node)) return []
+  seen.add(node)
+  if (
+    node.type === 'TSAsExpression' ||
+    node.type === 'TSSatisfiesExpression' ||
+    node.type === 'TSNonNullExpression'
+  )
+    return staticObjectPropertyValues(node.expression, name, seen)
+  if (node.type !== 'ObjectExpression') return []
+  return node.properties.flatMap((property: any) => {
+    if (property.type === 'Property')
+      return staticPropertyKey(property.key, property.computed === true) === name
+        ? [property.value]
+        : []
+    if (property.type === 'SpreadElement')
+      return staticObjectPropertyValues(property.argument, name, seen)
+    return []
+  })
+}
+
 const noInlineStyles: RuleModule = {
   meta: {
     type: 'problem',
@@ -297,6 +319,14 @@ const staticStrings = (node: any): string[] => {
 
 const roleOf = (node: any): string | null => {
   for (const attribute of node.attributes ?? []) {
+    if (attribute.type === 'JSXSpreadAttribute') {
+      const role = staticObjectPropertyValues(attribute.argument, 'role')
+        .flatMap((value) => staticStrings(value))
+        .flatMap((value) => value.split(/\s+/))
+        .find((value) => value in ROLE_PRIMITIVES)
+      if (role) return role
+      continue
+    }
     if (attribute.type !== 'JSXAttribute' || attribute.name?.name !== 'role') continue
     return (
       staticStrings(attribute.value)
@@ -311,31 +341,37 @@ const roleOf = (node: any): string | null => {
 const has = (node: any, name: string): boolean =>
   (node.attributes ?? []).some(
     (attribute: any) =>
-      attribute.type === 'JSXAttribute' &&
-      (attribute.name?.type === 'JSXNamespacedName'
-        ? `${attribute.name.namespace.name}:${attribute.name.name.name}`
-        : attribute.name?.name) === name
+      (attribute.type === 'JSXAttribute' &&
+        (attribute.name?.type === 'JSXNamespacedName'
+          ? `${attribute.name.namespace.name}:${attribute.name.name.name}`
+          : attribute.name?.name) === name) ||
+      (attribute.type === 'JSXSpreadAttribute' && objectHasStaticProperty(attribute.argument, name))
   )
 
+const tabStopValue = (value: any): boolean => {
+  const expression = value?.type === 'JSXExpressionContainer' ? value.expression : value
+  if (expression?.type === 'Literal') return !(Number(expression.value) < 0)
+  if (
+    expression?.type === 'UnaryExpression' &&
+    expression.operator === '-' &&
+    expression.argument?.type === 'Literal'
+  )
+    return !(Number(expression.argument.value) > 0)
+  return true
+}
+
 const hasTabStop = (node: any): boolean =>
   (node.attributes ?? []).some((attribute: any) => {
     if (
-      attribute.type !== 'JSXAttribute' ||
-      !['tabIndex', 'tabindex'].includes(attribute.name?.name)
-    )
-      return false
-    const value =
-      attribute.value?.type === 'JSXExpressionContainer'
-        ? attribute.value.expression
-        : attribute.value
-    if (value?.type === 'Literal') return !(Number(value.value) < 0)
-    if (
-      value?.type === 'UnaryExpression' &&
-      value.operator === '-' &&
-      value.argument?.type === 'Literal'
+      attribute.type === 'JSXAttribute' &&
+      ['tabIndex', 'tabindex'].includes(attribute.name?.name)
     )
-      return !(Number(value.argument.value) > 0)
-    return true
+      return tabStopValue(attribute.value)
+    if (attribute.type === 'JSXSpreadAttribute')
+      return ['tabIndex', 'tabindex'].some((name) =>
+        staticObjectPropertyValues(attribute.argument, name).some(tabStopValue)
+      )
+    return false
   })
 
 const noInteractiveWrappers: RuleModule = {
@@ -415,6 +451,118 @@ const noInteractiveWrappers: RuleModule = {
   },
 }
 
+const BUTTON_MODULE = '@adea-ai/ui/components/ui/button'
+const ACTION_BUTTON_MODULE = '@adea-ai/ui/components/composites/action-button'
+const ICON_BUTTON_SIZES: ReadonlySet<string> = new Set([
+  'icon-2xs',
+  'icon-xs',
+  'icon-sm',
+  'icon-md',
+  'icon-lg',
+  'icon-xl',
+])
+
+const staticJsxValues = (value: any): any[] =>
+  value?.type === 'JSXExpressionContainer' ? [value.expression] : value ? [value] : []
+
+const attributeValues = (node: any, name: string): any[] => {
+  const values: any[] = []
+  for (const attribute of node.attributes ?? []) {
+    if (attribute.type === 'JSXAttribute' && attribute.name?.name === name)
+      values.splice(0, values.length, ...staticJsxValues(attribute.value))
+    if (attribute.type === 'JSXSpreadAttribute') {
+      const spreadValues = staticObjectPropertyValues(attribute.argument, name)
+      if (spreadValues.length > 0) values.splice(0, values.length, spreadValues.at(-1))
+    }
+  }
+  return values
+}
+
+const staticStringValue = (node: any): string | null => {
+  if (node?.type === 'Literal' && typeof node.value === 'string') return node.value
+  if (node?.type === 'TemplateLiteral' && node.expressions.length === 0)
+    return node.quasis[0].value.cooked ?? node.quasis[0].value.raw
+  return null
+}
+
+const isIconButtonSize = (node: any): boolean =>
+  attributeValues(node, 'size').some((value) => {
+    const size = staticStringValue(value)
+    return size !== null && ICON_BUTTON_SIZES.has(size)
+  })
+
+const actionTooltipStatus = (node: any): 'valid' | 'blank' | 'unknown' | 'missing' => {
+  const values = attributeValues(node, 'tooltip')
+  if (values.length === 0) return 'missing'
+  const strings = values.map(staticStringValue)
+  if (strings.some((value) => value !== null && value.trim().length > 0)) return 'valid'
+  if (strings.every((value) => value !== null)) return 'blank'
+  return 'unknown'
+}
+
+const isImportedComponent = (identifier: any, imports: Set<string>): boolean =>
+  identifier?.type === 'Identifier' && imports.has(identifier.name)
+
+/** Requires shared icon actions to carry the shared explanatory-tooltip contract. */
+const requireActionButtonTooltip: RuleModule = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'Consumer icon-size shared Button actions use ActionButton with a nonblank tooltip; dynamic values remain a review boundary.',
+    },
+    schema: [],
+    messages: {
+      useActionButton:
+        'Icon-size Button actions use ActionButton with a nonblank tooltip. Keep the control name in aria-label; the tooltip explains the action.',
+      missingTooltip:
+        'An icon-size ActionButton needs a supplied nonblank tooltip. Keep its accessible name in aria-label as well.',
+    },
+  },
+  create(context) {
+    const buttons = new Set<string>()
+    const actionButtons = new Set<string>()
+    const recordImports = (node: any) => {
+      const source = node.source?.value
+      const target =
+        source === BUTTON_MODULE ? buttons : source === ACTION_BUTTON_MODULE ? actionButtons : null
+      if (!target) return
+      for (const specifier of node.specifiers ?? []) {
+        if (specifier.type !== 'ImportSpecifier') continue
+        const imported = specifier.imported?.name ?? specifier.imported?.value
+        if (
+          (source === BUTTON_MODULE && imported === 'Button') ||
+          (source === ACTION_BUTTON_MODULE && imported === 'ActionButton')
+        )
+          target.add(specifier.local?.name)
+      }
+    }
+
+    return {
+      ImportDeclaration: recordImports,
+      JSXOpeningElement(node: any) {
+        if (!isIconButtonSize(node)) return
+        const name = node.name?.type === 'JSXIdentifier' ? node.name.name : null
+        const isButton = name !== null && buttons.has(name)
+        const isActionButton = name !== null && actionButtons.has(name)
+        const asValues = attributeValues(node, 'as')
+        const targetsButton = asValues.some((value) => isImportedComponent(value, buttons))
+        const targetsActionButton = asValues.some((value) =>
+          isImportedComponent(value, actionButtons)
+        )
+        if (isButton || targetsButton) {
+          context.report({ node, messageId: 'useActionButton' })
+          return
+        }
+        if (!isActionButton && !targetsActionButton) return
+        const status = actionTooltipStatus(node)
+        if (status === 'missing' || status === 'blank')
+          context.report({ node, messageId: 'missingTooltip' })
+      },
+    }
+  },
+}
+
 const noPrimitiveLibraryImports: RuleModule = {
   meta: {
     type: 'problem',
@@ -484,6 +632,7 @@ const plugin = {
     'no-raw-interactive-elements': noRawInteractiveElements,
     'no-primitive-library-imports': noPrimitiveLibraryImports,
     'no-interactive-wrappers': noInteractiveWrappers,
+    'require-action-button-tooltip': requireActionButtonTooltip,
   },
 }