@adea-ai/ui 0.107.0 → 0.108.0

package/src/components/layout/pixel-resize-handle/pixel-resize-handle.tsx

@@ -0,0 +1,177 @@
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../ui/resizable'
+import { createSignal, onCleanup } from 'solid-js'
+import { cn } from '#lib/utils'
+
+export type PixelResizeHandleProps = {
+  /** Which physical edge of the ruler the resizable surface is attached to. */
+  side: 'left' | 'right'
+  /** Current width in CSS pixels. */
+  value: number
+  minimum: number
+  maximum: number
+  step?: number
+  label?: string
+  controls?: string
+  class?: string
+  onChange(value: number): void
+  onCommit?(value: number): void
+}
+
+/**
+ * PixelResizeHandle.
+ *
+ * A keyboard- and pointer-operable edge ruler for a host-owned pane. Keep the
+ * pane's actual width and any persistence in its layout owner; this component
+ * reports a bounded pixel value and places the shared resizable grip at the
+ * matching left or right edge.
+ *
+ * Corvu 0.2.5 supplies geometry, keyboard resizing, ARIA and the shared grip,
+ * but its global drag handler does not end on pointer cancellation. Prevent
+ * that handler through its public start hook and use local pointer capture
+ * for bounded pixel gestures, including cancellation and lost capture.
+ */
+export function PixelResizeHandle(props: PixelResizeHandleProps) {
+  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(), Math.round(props.value)))
+  const ratio = () => value() / maximum()
+  const isRight = () => props.side === 'right'
+  const rulerSizes = () => (isRight() ? [1 - ratio(), ratio()] : [ratio(), 1 - ratio()])
+  const commit = () => props.onCommit?.(value())
+  let interacting = false
+  const [drag, setDrag] = createSignal<{
+    pointerId: number
+    startX: number
+    startValue: number
+    handle: HTMLElement
+  }>()
+  const endPointer = (shouldCommit: boolean) => {
+    const current = drag()
+    if (!current) return
+    setDrag(undefined)
+    if (current.handle.hasPointerCapture(current.pointerId))
+      current.handle.releasePointerCapture(current.pointerId)
+    if (shouldCommit) commit()
+  }
+  const endKeyboard = () => {
+    const wasInteracting = interacting
+    interacting = false
+    if (wasInteracting) commit()
+  }
+  onCleanup(() => {
+    endKeyboard()
+    endPointer(false)
+  })
+
+  return (
+    <ResizablePanelGroup
+      orientation="horizontal"
+      dir="ltr"
+      sizes={rulerSizes()}
+      keyboardDelta={`${props.step ?? 16}px`}
+      style={{ width: `${maximum()}px` }}
+      class={cn(
+        'pointer-events-none absolute inset-y-0 flex',
+        {
+          'left-0': props.side === 'left',
+          'right-0': props.side === 'right',
+        },
+        props.class
+      )}
+      onSizesChange={(sizes) => {
+        // Panel registration and teardown also emit sizes. Only user resizing
+        // may update the host preference; collapsing must preserve its width.
+        if (!interacting || sizes.length !== 2) return
+        const next = Math.round((sizes[isRight() ? 1 : 0] ?? ratio()) * maximum())
+        const bounded = Math.min(maximum(), Math.max(minimum(), next))
+        if (bounded !== value()) props.onChange(bounded)
+      }}
+    >
+      <ResizablePanel
+        minSize={isRight() ? 0 : minimum() / maximum()}
+        maxSize={1}
+        aria-hidden="true"
+      />
+      <ResizableHandle
+        withHandle
+        label={props.label ?? `Resize ${props.side} pane`}
+        aria-controls={props.controls}
+        aria-valuemin={minimum()}
+        aria-valuemax={maximum()}
+        aria-valuenow={value()}
+        aria-valuetext={`${value()} pixels`}
+        data-dragging={drag() ? '' : undefined}
+        onHandleDragStart={(event) => {
+          // Corvu checks defaultPrevented before starting its global handler.
+          event.preventDefault()
+          if (event.button !== 0 || !event.isPrimary) return
+          const handle = event.currentTarget
+          if (!(handle instanceof HTMLElement)) return
+          endPointer(false)
+          interacting = false
+          handle.focus()
+          handle.setPointerCapture(event.pointerId)
+          setDrag({
+            pointerId: event.pointerId,
+            startX: event.clientX,
+            startValue: value(),
+            handle,
+          })
+        }}
+        onPointerMove={(event: PointerEvent) => {
+          const current = drag()
+          if (!current || event.pointerId !== current.pointerId) return
+          if (!current.handle.hasPointerCapture(current.pointerId)) {
+            endPointer(false)
+            return
+          }
+          const delta = (event.clientX - current.startX) * (isRight() ? -1 : 1)
+          const next = Math.min(
+            maximum(),
+            Math.max(minimum(), Math.round(current.startValue + delta))
+          )
+          if (next !== value()) props.onChange(next)
+        }}
+        onPointerUp={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(true)
+        }}
+        onPointerCancel={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onLostPointerCapture={(event: PointerEvent) => {
+          if (event.pointerId === drag()?.pointerId) endPointer(false)
+        }}
+        onBlur={() => {
+          endKeyboard()
+          endPointer(false)
+        }}
+        onKeyDown={(event) => {
+          const current = drag()
+          if (current && !current.handle.hasPointerCapture(current.pointerId)) endPointer(false)
+          if (drag()) {
+            event.preventDefault()
+            return
+          }
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) interacting = true
+          // Corvu operates on physical panel order. Home/End here describe
+          // the controlled pane width, including a pane after the separator.
+          if (event.key === 'Home' || event.key === 'End') {
+            event.preventDefault()
+            props.onChange(event.key === 'Home' ? minimum() : maximum())
+          }
+        }}
+        onKeyUp={(event) => {
+          if (['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.key)) {
+            endKeyboard()
+          }
+        }}
+        class="pointer-events-auto"
+      />
+      <ResizablePanel
+        minSize={isRight() ? minimum() / maximum() : 0}
+        maxSize={1}
+        aria-hidden="true"
+      />
+    </ResizablePanelGroup>
+  )
+}

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

@@ -1,59 +1,11 @@
-import Resizable from '@corvu/resizable'
-import { cn } from '#lib/utils'
+import {
+  PixelResizeHandle,
+  type PixelResizeHandleProps,
+} from '../pixel-resize-handle/pixel-resize-handle'
 
-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
-}
+export type SidebarNavResizeHandleProps = Omit<PixelResizeHandleProps, 'side'>
 
-/**
- * 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.
- */
+/** Keep the established left-sidebar API as a thin adapter over the shared edge ruler. */
 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>
-  )
+  return <PixelResizeHandle {...props} side="left" label={props.label ?? 'Resize navigation'} />
 }

package/src/components/ui/resizable/resizable.tsx

@@ -17,7 +17,7 @@ import { cn } from '#lib/utils'
  * adjusted from the keyboard; a bare `cursor-col-resize` div cannot.
  */
 /**
- * Whether the group was given `initialSizes`. Those are corvu's to apply, and a
+ * Whether the group was given `initialSizes` or controlled `sizes`. Those are corvu's to apply, and a
  * panel's own `initialSize` overrides them — so an unsized panel must not invent
  * one when the group already has an answer.
  */
@@ -27,7 +27,9 @@ export function ResizablePanelGroup(props: ComponentProps<typeof Resizable> & {
   const [local, rest] = splitProps(props, ['class'])
 
   return (
-    <GroupSizesContext.Provider value={() => rest.initialSizes !== undefined}>
+    <GroupSizesContext.Provider
+      value={() => rest.initialSizes !== undefined || rest.sizes !== undefined}
+    >
       <Resizable
         class={cn('flex size-full data-[orientation=vertical]:flex-col', local.class)}
         {...rest}

package/src/index.ts

@@ -89,6 +89,7 @@ export * from './components/layout/page'
 export * from './components/layout/panel'
 export * from './components/layout/side-rail'
 export * from './components/layout/sidebar-nav'
+export * from './components/layout/contextual-sidebar'
 export * from './components/layout/status-bar'
 export * from './components/layout/top-bar'
 

package/src/lint/index.ts

@@ -747,6 +747,185 @@ const staticStringValue = (node: any): string | null => {
   return null
 }
 
+interface ImportedJsxBindings {
+  named: WeakSet<object>
+  namespaces: WeakSet<object>
+}
+
+const isImportedJsxComponent = (
+  name: any,
+  imports: ImportedJsxBindings,
+  context: LintContext,
+  namespaceExport?: string
+): boolean => {
+  if (name?.type === 'JSXIdentifier' || name?.type === 'Identifier')
+    return isImportedBinding(name, imports.named, context)
+  const memberName = name?.property?.name
+  return (
+    (name?.type === 'JSXMemberExpression' || name?.type === 'MemberExpression') &&
+    (name.object?.type === 'JSXIdentifier' || name.object?.type === 'Identifier') &&
+    (name.property?.type === 'JSXIdentifier' || name.property?.type === 'Identifier') &&
+    (namespaceExport ? memberName === namespaceExport : /^[A-Z]/.test(memberName ?? '')) &&
+    isImportedBinding(name.object, imports.namespaces, context)
+  )
+}
+
+type IconChildKind = 'empty' | 'icon' | 'text' | 'unknown'
+
+const CONTENT_OVERRIDE_PROPS = new Set([
+  'children',
+  'dangerouslySetInnerHTML',
+  'innerHTML',
+  'textContent',
+])
+
+/** Opaque spreads and objects containing content props may override children. */
+const spreadMayOverrideContent = (argument: any): boolean => {
+  while (
+    argument?.type === 'TSAsExpression' ||
+    argument?.type === 'TSSatisfiesExpression' ||
+    argument?.type === 'TSNonNullExpression'
+  )
+    argument = argument.expression
+  if (argument?.type !== 'ObjectExpression') return true
+  return argument.properties.some((property: any) => {
+    if (property.type !== 'Property') return true
+    const key = staticPropertyKey(property.key, property.computed === true)
+    return key === null || CONTENT_OVERRIDE_PROPS.has(key)
+  })
+}
+
+const hasContentOverride = (openingElement: any): boolean =>
+  (openingElement?.attributes ?? []).some((attribute: any) => {
+    if (attribute.type === 'JSXSpreadAttribute') return spreadMayOverrideContent(attribute.argument)
+    return (
+      attribute.type === 'JSXAttribute' &&
+      attribute.name?.type === 'JSXIdentifier' &&
+      CONTENT_OVERRIDE_PROPS.has(attribute.name.name)
+    )
+  })
+
+const iconChildrenKind = (
+  children: any[],
+  icons: ImportedJsxBindings,
+  context: LintContext
+): IconChildKind => {
+  let hasIcon = false
+  for (const child of children) {
+    const kind = iconChildKind(child, icons, context)
+    if (kind === 'text' || kind === 'unknown') return kind
+    if (kind === 'icon') hasIcon = true
+  }
+  return hasIcon ? 'icon' : 'empty'
+}
+
+const SVG_TEXT_CONTAINERS = new Set(['text', 'foreignObject'])
+
+/** A raw SVG may be labelled or contain dynamic text instead of an icon. */
+const svgMayContainVisibleText = (children: any[]): boolean => {
+  for (const child of children) {
+    if (!child) return true
+    if (child.type === 'JSXText') {
+      if (String(child.value ?? '').trim()) return true
+      continue
+    }
+    if (child.type === 'JSXFragment') {
+      if (svgMayContainVisibleText(child.children ?? [])) return true
+      continue
+    }
+    if (child.type === 'JSXExpressionContainer') {
+      const expression = child.expression
+      if (!expression || expression.type === 'JSXEmptyExpression') continue
+      if (expression.type === 'JSXElement' || expression.type === 'JSXFragment') {
+        if (
+          svgMayContainVisibleText(
+            expression.type === 'JSXElement' ? [expression] : (expression.children ?? [])
+          )
+        )
+          return true
+        continue
+      }
+      const text = staticStringValue(expression)
+      if (text !== null) {
+        if (text.trim()) return true
+        continue
+      }
+      if (
+        expression.type === 'Literal' &&
+        (expression.value === null || typeof expression.value === 'boolean')
+      )
+        continue
+      return true
+    }
+    if (child.type !== 'JSXElement') return true
+
+    const name = child.openingElement?.name
+    if (name?.type !== 'JSXIdentifier') return true
+    if (SVG_TEXT_CONTAINERS.has(name.name)) return true
+    if (hasContentOverride(child.openingElement)) return true
+    if (name.name === 'title' || name.name === 'desc') continue
+    if (!/^[a-z]/.test(name.name) || name.name.includes('-')) return true
+    if (svgMayContainVisibleText(child.children ?? [])) return true
+  }
+  return false
+}
+
+/**
+ * Proves only the uncomplicated icon-only forms that can be read without
+ * executing Solid expressions: imported Lucide components, raw SVG, fragments,
+ * whitespace, and spans that contain only those forms.
+ */
+const iconChildKind = (
+  child: any,
+  icons: ImportedJsxBindings,
+  context: LintContext
+): IconChildKind => {
+  if (!child) return 'unknown'
+  if (child.type === 'JSXText') return String(child.value ?? '').trim() ? 'text' : 'empty'
+  if (child.type === 'JSXFragment') return iconChildrenKind(child.children ?? [], icons, context)
+  if (child.type === 'JSXExpressionContainer') {
+    const expression = child.expression
+    if (!expression || expression.type === 'JSXEmptyExpression') return 'empty'
+    if (expression.type === 'JSXElement' || expression.type === 'JSXFragment')
+      return iconChildKind(expression, icons, context)
+    const text = staticStringValue(expression)
+    if (text !== null) return text.trim() ? 'text' : 'empty'
+    if (
+      expression.type === 'Literal' &&
+      (expression.value === null || typeof expression.value === 'boolean')
+    )
+      return 'empty'
+    if (expression.type === 'Literal' && typeof expression.value === 'number') return 'text'
+    return 'unknown'
+  }
+  if (child.type !== 'JSXElement') return 'unknown'
+
+  const name = child.openingElement?.name
+  if (name?.type === 'JSXIdentifier' && name.name === 'svg')
+    return hasContentOverride(child.openingElement) ||
+      svgMayContainVisibleText(child.children ?? [])
+      ? 'unknown'
+      : 'icon'
+  if (isImportedJsxComponent(name, icons, context))
+    return hasContentOverride(child.openingElement) ? 'unknown' : 'icon'
+  if (name?.type === 'JSXIdentifier' && name.name === 'span') {
+    if (hasContentOverride(child.openingElement)) return 'unknown'
+    return iconChildrenKind(child.children ?? [], icons, context)
+  }
+  return 'unknown'
+}
+
+const hasStaticallyIconOnlyChildren = (
+  node: any,
+  icons: ImportedJsxBindings,
+  context: LintContext
+): boolean => {
+  return (
+    !hasContentOverride(node.openingElement) &&
+    iconChildrenKind(node.children ?? [], icons, context) === 'icon'
+  )
+}
+
 const isIconButtonSize = (node: any): boolean =>
   attributeValues(node, 'size').some((value) => {
     const size = staticStringValue(value)
@@ -762,64 +941,97 @@ const actionTooltipStatus = (node: any): 'valid' | 'blank' | 'unknown' | 'missin
   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.',
+        'Icon-sized shared Buttons and statically proven icon-only Buttons use ActionButton with a tooltip; icon-only ActionButtons need one too.',
     },
     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.',
+        'Icon-size or icon-only Button actions must 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.',
+        'An icon-size or icon-only 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 buttons: ImportedJsxBindings = { named: new WeakSet(), namespaces: new WeakSet() }
+    const actionButtons: ImportedJsxBindings = { named: new WeakSet(), namespaces: new WeakSet() }
+    const icons: ImportedJsxBindings = { named: new WeakSet(), namespaces: new WeakSet() }
     const recordImports = (node: any) => {
       const source = node.source?.value
       const target =
         source === BUTTON_MODULE ? buttons : source === ACTION_BUTTON_MODULE ? actionButtons : null
+      if (source === 'lucide-solid') {
+        if (node.importKind === 'type') return
+        for (const specifier of node.specifiers ?? []) {
+          if (!specifier.local || specifier.importKind === 'type') continue
+          if (specifier.type === 'ImportNamespaceSpecifier') icons.namespaces.add(specifier.local)
+          else if (specifier.type === 'ImportSpecifier') {
+            const imported = specifier.imported?.name ?? specifier.imported?.value
+            if (typeof imported === 'string' && /^[A-Z]/.test(imported))
+              icons.named.add(specifier.local)
+          }
+        }
+        return
+      }
       if (!target) return
+      if (node.importKind === 'type') return
       for (const specifier of node.specifiers ?? []) {
-        if (specifier.type !== 'ImportSpecifier') continue
+        if (specifier.type === 'ImportNamespaceSpecifier' && specifier.local) {
+          target.namespaces.add(specifier.local)
+          continue
+        }
+        if (
+          specifier.type !== 'ImportSpecifier' ||
+          !specifier.local ||
+          specifier.importKind === 'type'
+        )
+          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)
+          target.named.add(specifier.local)
       }
     }
 
     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))
+      Program(node: any) {
+        for (const statement of node.body ?? [])
+          if (statement.type === 'ImportDeclaration') recordImports(statement)
+      },
+      JSXElement(node: any) {
+        const opening = node.openingElement
+        const isButton = isImportedJsxComponent(opening.name, buttons, context, 'Button')
+        const isActionButton = isImportedJsxComponent(
+          opening.name,
+          actionButtons,
+          context,
+          'ActionButton'
+        )
+        const asValues = attributeValues(opening, 'as')
+        const targetsButton = asValues.some((value) =>
+          isImportedJsxComponent(value, buttons, context, 'Button')
+        )
         const targetsActionButton = asValues.some((value) =>
-          isImportedComponent(value, actionButtons)
+          isImportedJsxComponent(value, actionButtons, context, 'ActionButton')
         )
+        if (!isButton && !isActionButton && !targetsButton && !targetsActionButton) return
+        const iconSized = isIconButtonSize(opening)
+        if (!iconSized && !hasStaticallyIconOnlyChildren(node, icons, context)) return
         if (isButton || targetsButton) {
-          context.report({ node, messageId: 'useActionButton' })
+          context.report({ node: opening, messageId: 'useActionButton' })
           return
         }
         if (!isActionButton && !targetsActionButton) return
-        const status = actionTooltipStatus(node)
+        const status = actionTooltipStatus(opening)
         if (status === 'missing' || status === 'blank')
-          context.report({ node, messageId: 'missingTooltip' })
+          context.report({ node: opening, messageId: 'missingTooltip' })
       },
     }
   },