@adea-ai/ui 0.85.0 → 0.88.0

package/dist/r/src/components/layout/app-shell/index.ts

@@ -1 +1,2 @@
 export { AppShell, AppShellBody, AppShellContent, AppShellMain } from './app-shell'
+export { SkipLink } from './skip-link'

package/dist/r/src/components/layout/app-shell/skip-link.tsx

@@ -0,0 +1,35 @@
+import type { ComponentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * A keyboard-first link to the main content region.
+ *
+ * Place it before the shell's navigation and set the destination element's
+ * `id` to match `href`. The link stays translated above the viewport until it
+ * receives focus, then moves into view. Its text remains available to assistive
+ * technology while it is visually hidden.
+ */
+export function SkipLink(props: ComponentProps<'a'>) {
+  const [local, rest] = splitProps(props, ['class', 'children', 'href', 'tabIndex'])
+
+  return (
+    <a
+      data-slot="skip-link"
+      class={cn(
+        'fixed top-0 start-2 z-(--z-toast) -translate-y-full',
+        'inline-flex items-center rounded-md border border-border bg-background',
+        'px-control-md py-2 text-sm font-medium text-foreground shadow-lg',
+        'underline decoration-2 underline-offset-2 outline-none transition-transform duration-150',
+        'focus:translate-y-0 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-primary-subtle',
+        'motion-reduce:transition-none',
+        local.class
+      )}
+      href={local.href ?? '#main-content'}
+      tabIndex={local.tabIndex ?? 0}
+      {...rest}
+    >
+      {local.children === undefined ? 'Skip to main content' : local.children}
+    </a>
+  )
+}

package/dist/r/src/components/layout/floating-preview/floating-preview.tsx

@@ -0,0 +1,260 @@
+import { createEffect, createSignal, onCleanup, onMount, on, type JSX } from 'solid-js'
+import { Move, X } from 'lucide-solid'
+import { ActionButton } from '../../composites/action-button'
+import { ScrollArea } from '../../ui/scroll-area'
+import {
+  type FloatingPreviewFrame,
+  type FloatingPreviewResizeDirection,
+  type FloatingPreviewSize,
+  resolveFloatingPreviewFrame,
+  resizeFloatingPreview,
+} from './model'
+
+const directions: readonly {
+  direction: FloatingPreviewResizeDirection
+  class: string
+  glyph: string
+}[] = [
+  {
+    direction: 'north',
+    class: 'absolute -top-3 right-6 left-6 h-control-xs w-auto cursor-ns-resize touch-none',
+    glyph: '↕',
+  },
+  {
+    direction: 'south',
+    class: 'absolute -bottom-3 right-6 left-6 h-control-xs w-auto cursor-ns-resize touch-none',
+    glyph: '↕',
+  },
+  {
+    direction: 'east',
+    class: 'absolute -right-3 top-6 bottom-6 w-6 h-auto cursor-ew-resize touch-none',
+    glyph: '↔',
+  },
+  {
+    direction: 'west',
+    class: 'absolute -left-3 top-6 bottom-6 w-6 h-auto cursor-ew-resize touch-none',
+    glyph: '↔',
+  },
+  {
+    direction: 'northwest',
+    class: 'absolute -top-3 -left-3 size-control-xs cursor-nwse-resize touch-none',
+    glyph: '↖',
+  },
+  {
+    direction: 'northeast',
+    class: 'absolute -top-3 -right-3 size-control-xs cursor-nesw-resize touch-none',
+    glyph: '↗',
+  },
+  {
+    direction: 'southwest',
+    class: 'absolute -bottom-3 -left-3 size-control-xs cursor-nesw-resize touch-none',
+    glyph: '↙',
+  },
+  {
+    direction: 'southeast',
+    class: 'absolute -bottom-3 -right-3 size-control-xs cursor-nwse-resize touch-none',
+    glyph: '↘',
+  },
+]
+
+export type FloatingPreviewProps = {
+  label: string
+  source: FloatingPreviewSize
+  onClose?: () => void
+  actions?: JSX.Element
+  children: JSX.Element
+}
+
+/** A host-bounded movable preview frame. Content and actions remain caller-owned. */
+export function FloatingPreview(props: FloatingPreviewProps) {
+  const [frame, setFrame] = createSignal<FloatingPreviewFrame>({ x: 0, y: 0, width: 1, height: 1 })
+  // oxlint-disable-next-line no-unassigned-vars -- assigned through Solid's ref callback.
+  let bounds: HTMLDivElement | undefined
+  let observer: ResizeObserver | undefined
+  let gesture:
+    | {
+        id: number
+        x: number
+        y: number
+        start: FloatingPreviewFrame
+        direction: FloatingPreviewResizeDirection | null
+      }
+    | undefined
+
+  const measure = () => {
+    const rect = bounds?.getBoundingClientRect()
+    if (!rect) return
+    setFrame((current) =>
+      resolveFloatingPreviewFrame({
+        width: current.width > 1 ? current.width : null,
+        position: current.width > 1 ? { x: current.x, y: current.y } : null,
+        source: props.source,
+        container: { width: rect.width, height: rect.height },
+      })
+    )
+  }
+  createEffect(
+    on(
+      () => [props.source.width, props.source.height] as const,
+      () => measure(),
+      { defer: true }
+    )
+  )
+  onMount(() => {
+    if (bounds) {
+      observer = new ResizeObserver(measure)
+      observer.observe(bounds)
+      measure()
+    }
+  })
+  onCleanup(() => observer?.disconnect())
+
+  function start(event: PointerEvent, direction: FloatingPreviewResizeDirection | null) {
+    if (event.button !== 0 || gesture) return
+    event.preventDefault()
+    event.stopPropagation()
+    gesture = { id: event.pointerId, x: event.clientX, y: event.clientY, start: frame(), direction }
+    ;(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId)
+  }
+  function move(event: PointerEvent) {
+    if (!gesture || gesture.id !== event.pointerId) return
+    const rect = bounds?.getBoundingClientRect()
+    if (!rect) return
+    const container = { width: rect.width, height: rect.height }
+    const delta = { x: event.clientX - gesture.x, y: event.clientY - gesture.y }
+    setFrame(
+      gesture.direction
+        ? resizeFloatingPreview({
+            start: gesture.start,
+            direction: gesture.direction,
+            delta,
+            source: props.source,
+            container,
+          })
+        : resolveFloatingPreviewFrame({
+            width: gesture.start.width,
+            position: { x: gesture.start.x + delta.x, y: gesture.start.y + delta.y },
+            source: props.source,
+            container,
+          })
+    )
+  }
+  function end(event: PointerEvent) {
+    if (gesture?.id === event.pointerId) gesture = undefined
+  }
+  function keyboardMove(event: KeyboardEvent) {
+    const delta = { x: 0, y: 0 }
+    if (event.key === 'ArrowLeft') delta.x = -10
+    else if (event.key === 'ArrowRight') delta.x = 10
+    else if (event.key === 'ArrowUp') delta.y = -10
+    else if (event.key === 'ArrowDown') delta.y = 10
+    else return
+    event.preventDefault()
+    const rect = bounds?.getBoundingClientRect()
+    if (!rect) return
+    const current = frame()
+    setFrame(
+      resolveFloatingPreviewFrame({
+        width: current.width,
+        position: { x: current.x + delta.x, y: current.y + delta.y },
+        source: props.source,
+        container: { width: rect.width, height: rect.height },
+      })
+    )
+  }
+  function keyboardResize(event: KeyboardEvent, direction: FloatingPreviewResizeDirection) {
+    if (!event.key.startsWith('Arrow')) return
+    event.preventDefault()
+    const rect = bounds?.getBoundingClientRect()
+    if (!rect) return
+    const delta = {
+      x: event.key === 'ArrowRight' ? 10 : event.key === 'ArrowLeft' ? -10 : 0,
+      y: event.key === 'ArrowDown' ? 10 : event.key === 'ArrowUp' ? -10 : 0,
+    }
+    setFrame(
+      resizeFloatingPreview({
+        start: frame(),
+        direction,
+        delta,
+        source: props.source,
+        container: { width: rect.width, height: rect.height },
+      })
+    )
+  }
+
+  return (
+    <div
+      ref={bounds}
+      class="pointer-events-none absolute inset-0 z-(--z-sticky) overflow-hidden"
+      aria-label={props.label}
+    >
+      <section
+        class="pointer-events-auto absolute flex flex-col overflow-visible rounded-lg border border-border bg-card text-card-foreground shadow-lg"
+        aria-label={props.label}
+        style={{
+          left: `${frame().x}px`,
+          top: `${frame().y}px`,
+          width: `${frame().width}px`,
+          height: `${frame().height}px`,
+        }}
+      >
+        <header class="flex h-control-sm items-center gap-1 border-b border-border p-1">
+          <ActionButton
+            type="button"
+            variant="ghost"
+            size="sm"
+            class="flex-1 cursor-move touch-none"
+            aria-label={`Move ${props.label}`}
+            tooltip={`Move ${props.label}. Use arrow keys to adjust its position.`}
+            onPointerDown={(event) => start(event, null)}
+            onPointerMove={move}
+            onPointerUp={end}
+            onPointerCancel={end}
+            onLostPointerCapture={end}
+            onKeyDown={keyboardMove}
+          >
+            <>
+              <Move aria-hidden="true" />
+              Move
+            </>
+          </ActionButton>
+          <div class="flex items-center gap-1">{props.actions}</div>
+          {props.onClose && (
+            <ActionButton
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              aria-label={`Close ${props.label}`}
+              tooltip={`Close ${props.label}.`}
+              onClick={props.onClose}
+            >
+              <X aria-hidden="true" />
+            </ActionButton>
+          )}
+        </header>
+        <ScrollArea role="region" aria-label={`${props.label} content`} class="flex-1" tabIndex={0}>
+          {props.children}
+        </ScrollArea>
+        {directions.map(({ direction, class: className, glyph }) => (
+          <ActionButton
+            type="button"
+            variant="ghost"
+            size="icon-sm"
+            class={className}
+            data-direction={direction}
+            aria-label={`Resize ${props.label} ${direction}`}
+            tooltip={`Resize ${props.label} from the ${direction} edge. Use arrow keys to resize.`}
+            onPointerDown={(event) => start(event, direction)}
+            onPointerMove={move}
+            onPointerUp={end}
+            onPointerCancel={end}
+            onLostPointerCapture={end}
+            onKeyDown={(event) => keyboardResize(event, direction)}
+          >
+            <span aria-hidden="true">{glyph}</span>
+          </ActionButton>
+        ))}
+      </section>
+    </div>
+  )
+}

package/dist/r/src/components/layout/floating-preview/index.ts

@@ -0,0 +1,2 @@
+export * from './model'
+export * from './floating-preview'

package/dist/r/src/components/layout/floating-preview/model.ts

@@ -0,0 +1,285 @@
+/*
+ * Copyright (c) 2026 Adea contributors
+ * SPDX-License-Identifier: MIT
+ * Geometry translated from t3code apps/web/src/components/preview/
+ * previewMiniPlayerLayout.ts, issue #422, revision
+ * 77bca8b2d76a1f42552e5eee7d277fcb1160347a (MIT). Runtime and device
+ * behavior are excluded. See NOTICE.
+ */
+
+export const PREVIEW_MINI_PLAYER_EDGE_GAP = 12
+export const PREVIEW_MINI_PLAYER_CORNER_RADIUS = 12
+export interface PreviewMiniPlayerSize {
+  readonly width: number
+  readonly height: number
+}
+export interface PreviewMiniPlayerPosition {
+  readonly x: number
+  readonly y: number
+}
+export interface PreviewMiniPlayerFrame extends PreviewMiniPlayerPosition, PreviewMiniPlayerSize {}
+
+export type BrowserViewportResizeDirection =
+  | 'north'
+  | 'south'
+  | 'east'
+  | 'west'
+  | 'northwest'
+  | 'northeast'
+  | 'southwest'
+  | 'southeast'
+
+const PREVIEW_MINI_PLAYER_DEFAULT_BOX = { width: 320, height: 320 } as const
+const PREVIEW_MINI_PLAYER_MIN_SIZE = { width: 240, height: 150 } as const
+
+interface HorizontalSpan {
+  readonly left: number
+  readonly right: number
+}
+
+/**
+ * The composer stack docked to the bottom edge, in container coordinates. It
+ * only reserves the columns it covers, so the margins beside it stay open all
+ * the way down.
+ */
+export interface PreviewMiniPlayerObstacles {
+  readonly composer: (HorizontalSpan & { readonly height: number }) | null
+}
+
+export const NO_PREVIEW_MINI_PLAYER_OBSTACLES: PreviewMiniPlayerObstacles = { composer: null }
+
+const spanOf = (x: number, width: number): HorizontalSpan => ({ left: x, right: x + width })
+
+const spansOverlap = (a: HorizontalSpan, b: HorizontalSpan) => a.left < b.right && a.right > b.left
+
+/** The lowest row (before the edge gap) open to a player covering these columns. */
+function floorFor(
+  span: HorizontalSpan,
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles
+): number {
+  const { composer } = obstacles
+  return composer && spansOverlap(span, composer)
+    ? container.height - Math.max(0, composer.height)
+    : container.height
+}
+
+/**
+ * The box a stored size is fitted into. A player with a position keeps the
+ * rows its own columns have, so a tall frame parked beside the composer
+ * survives the next layout pass; without one it takes the rows above the
+ * composer, which every column has.
+ */
+const availableArea = (
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles,
+  span: HorizontalSpan | null
+): PreviewMiniPlayerSize => ({
+  width: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+  height:
+    (span
+      ? floorFor(span, container, obstacles)
+      : container.height - Math.max(0, obstacles.composer?.height ?? 0)) -
+    PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+})
+
+/**
+ * Width is the player's only free dimension; height always follows the source
+ * aspect ratio so the content fills the box without letterboxing. The player
+ * never grows past the source's own size, and a tight container wins over the
+ * minimum.
+ */
+function fitPreviewMiniPlayerWidth(
+  desiredWidth: number,
+  source: PreviewMiniPlayerSize,
+  max: PreviewMiniPlayerSize
+): PreviewMiniPlayerSize {
+  const aspectRatio = source.width / source.height
+  const width = Math.min(
+    Math.max(
+      desiredWidth,
+      PREVIEW_MINI_PLAYER_MIN_SIZE.width,
+      PREVIEW_MINI_PLAYER_MIN_SIZE.height * aspectRatio
+    ),
+    source.width,
+    Math.max(1, max.width),
+    Math.max(1, max.height * aspectRatio)
+  )
+  return { width: Math.round(width), height: Math.round(width / aspectRatio) }
+}
+
+function defaultPreviewMiniPlayerWidth(source: PreviewMiniPlayerSize): number {
+  return Math.min(
+    PREVIEW_MINI_PLAYER_DEFAULT_BOX.width,
+    (PREVIEW_MINI_PLAYER_DEFAULT_BOX.height * source.width) / source.height
+  )
+}
+
+const clampToContainer = (
+  position: PreviewMiniPlayerPosition,
+  container: PreviewMiniPlayerSize,
+  player: PreviewMiniPlayerSize,
+  bottom = container.height
+): PreviewMiniPlayerPosition => ({
+  x: Math.min(
+    Math.max(position.x, PREVIEW_MINI_PLAYER_EDGE_GAP),
+    Math.max(
+      PREVIEW_MINI_PLAYER_EDGE_GAP,
+      container.width - player.width - PREVIEW_MINI_PLAYER_EDGE_GAP
+    )
+  ),
+  y: Math.min(
+    Math.max(position.y, PREVIEW_MINI_PLAYER_EDGE_GAP),
+    Math.max(PREVIEW_MINI_PLAYER_EDGE_GAP, bottom - player.height - PREVIEW_MINI_PLAYER_EDGE_GAP)
+  ),
+})
+
+const overlapsObstacle = (
+  position: PreviewMiniPlayerPosition,
+  player: PreviewMiniPlayerSize,
+  container: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles
+): boolean =>
+  position.y + player.height > floorFor(spanOf(position.x, player.width), container, obstacles)
+
+/**
+ * Keeps the player inside the container and off the composer. An overlapping
+ * player is pushed out along whichever side needs the smaller move, so a drag
+ * slides along the composer into the margin beside it instead of stopping at
+ * its top edge; when no side leaves it fully clear it sits above the composer.
+ */
+export function clampPreviewMiniPlayerPosition(
+  position: PreviewMiniPlayerPosition,
+  container: PreviewMiniPlayerSize,
+  player: PreviewMiniPlayerSize,
+  obstacles: PreviewMiniPlayerObstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES
+): PreviewMiniPlayerPosition {
+  const inside = clampToContainer(position, container, player)
+  const { composer } = obstacles
+  if (!composer || !overlapsObstacle(inside, player, container, obstacles)) return inside
+  const gap = PREVIEW_MINI_PLAYER_EDGE_GAP
+  const above = { x: inside.x, y: container.height - composer.height - gap - player.height }
+  const beside = [
+    { x: composer.left - gap - player.width, y: inside.y },
+    { x: composer.right + gap, y: inside.y },
+  ]
+  let best = clampToContainer(above, container, player)
+  let bestDistance = Math.abs(best.y - inside.y)
+  for (const candidate of beside) {
+    const clamped = clampToContainer(candidate, container, player)
+    if (clamped.x !== candidate.x || overlapsObstacle(candidate, player, container, obstacles)) {
+      continue
+    }
+    const distance = Math.abs(candidate.x - inside.x)
+    if (distance < bestDistance) {
+      best = candidate
+      bestDistance = distance
+    }
+  }
+  return best
+}
+
+/**
+ * Resolves the on-screen frame from the stored width and position. Clamping
+ * happens here on every layout pass instead of being written back to the
+ * store, so a temporarily narrow container never destroys the user's chosen
+ * width. A player without a position sits in the top-right corner.
+ */
+export function resolvePreviewMiniPlayerFrame(input: {
+  readonly width: number | null
+  readonly position: PreviewMiniPlayerPosition | null
+  readonly source: PreviewMiniPlayerSize
+  readonly container: PreviewMiniPlayerSize
+  readonly obstacles?: PreviewMiniPlayerObstacles
+}): PreviewMiniPlayerFrame {
+  const { width, position, source, container, obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES } = input
+  const size = fitPreviewMiniPlayerWidth(
+    width ?? defaultPreviewMiniPlayerWidth(source),
+    source,
+    availableArea(container, obstacles, position && width ? spanOf(position.x, width) : null)
+  )
+  const anchored = position ?? {
+    x: container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - size.width,
+    y: PREVIEW_MINI_PLAYER_EDGE_GAP,
+  }
+  return { ...clampPreviewMiniPlayerPosition(anchored, container, size, obstacles), ...size }
+}
+
+/**
+ * Resizes from any edge or corner while holding the aspect ratio. The edge
+ * opposite the dragged one stays anchored, so growth stops at the container
+ * on that axis and the pointer keeps tracking the grabbed edge.
+ */
+export function resizePreviewMiniPlayer(input: {
+  readonly start: PreviewMiniPlayerFrame
+  readonly direction: BrowserViewportResizeDirection
+  readonly delta: PreviewMiniPlayerPosition
+  readonly source: PreviewMiniPlayerSize
+  readonly container: PreviewMiniPlayerSize
+  readonly obstacles?: PreviewMiniPlayerObstacles
+}): PreviewMiniPlayerFrame {
+  const {
+    start,
+    direction,
+    delta,
+    source,
+    container,
+    obstacles = NO_PREVIEW_MINI_PLAYER_OBSTACLES,
+  } = input
+  const east = direction.includes('east')
+  const west = direction.includes('west')
+  const north = direction.includes('north')
+  const south = direction.includes('south')
+  const right = start.x + start.width
+  const bottom = start.y + start.height
+  const floor = floorFor(spanOf(start.x, start.width), container, obstacles)
+  const max = {
+    width: west
+      ? right - PREVIEW_MINI_PLAYER_EDGE_GAP
+      : east
+        ? container.width - PREVIEW_MINI_PLAYER_EDGE_GAP - start.x
+        : container.width - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+    height: north
+      ? bottom - PREVIEW_MINI_PLAYER_EDGE_GAP
+      : south
+        ? floor - PREVIEW_MINI_PLAYER_EDGE_GAP - start.y
+        : floor - PREVIEW_MINI_PLAYER_EDGE_GAP * 2,
+  }
+  const desiredWidth = start.width + (east ? delta.x : west ? -delta.x : 0)
+  const desiredHeight = start.height + (south ? delta.y : north ? -delta.y : 0)
+  const horizontal = east || west
+  const vertical = north || south
+  const widthLeads =
+    horizontal && !vertical
+      ? true
+      : vertical && !horizontal
+        ? false
+        : Math.abs(desiredWidth - start.width) / start.width >=
+          Math.abs(desiredHeight - start.height) / start.height
+  const size = fitPreviewMiniPlayerWidth(
+    widthLeads ? desiredWidth : (desiredHeight * source.width) / source.height,
+    source,
+    max
+  )
+  const position = clampPreviewMiniPlayerPosition(
+    { x: west ? right - size.width : start.x, y: north ? bottom - size.height : start.y },
+    container,
+    size,
+    obstacles
+  )
+  return { ...position, ...size }
+}
+
+// Product-neutral names for new consumers. The PreviewMiniPlayer names stay
+// exported for Adea Dev Runtime's existing browser model API.
+export type FloatingPreviewSize = PreviewMiniPlayerSize
+export type FloatingPreviewPosition = PreviewMiniPlayerPosition
+export type FloatingPreviewFrame = PreviewMiniPlayerFrame
+export type FloatingPreviewResizeDirection = BrowserViewportResizeDirection
+export type FloatingPreviewObstacles = PreviewMiniPlayerObstacles
+export const FLOATING_PREVIEW_EDGE_GAP = PREVIEW_MINI_PLAYER_EDGE_GAP
+export const FLOATING_PREVIEW_CORNER_RADIUS = PREVIEW_MINI_PLAYER_CORNER_RADIUS
+export const NO_FLOATING_PREVIEW_OBSTACLES = NO_PREVIEW_MINI_PLAYER_OBSTACLES
+export const resolveFloatingPreviewFrame = resolvePreviewMiniPlayerFrame
+export const resizeFloatingPreview = resizePreviewMiniPlayer
+export const clampFloatingPreviewPosition = clampPreviewMiniPlayerPosition

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

@@ -11,6 +11,8 @@ export {
   sidebarNavItemStateClass,
   type SidebarNavItemProps,
   type SidebarNavProps,
+  type SidebarNavSectionProps,
+  type SidebarNavSectionTriggerProps,
   type SidebarNavTitleProps,
 } from './sidebar-nav'
 export {