@adea-ai/ui 0.63.4 → 0.65.0

package/dist/r/src/styles/theme.css

@@ -826,6 +826,15 @@
   --height-control-md: var(--control-height-md);
   --height-control-lg: var(--control-height-lg);
   --height-control-xl: var(--control-height-xl);
+  /* Tailwind `size-*` prefers --size-* and then --spacing-*. Without this
+     bridge, square icon controls use the padding ladder below for both axes.
+     Height, square size and inline padding remain distinct semantic contracts. */
+  --size-control-2xs: var(--control-height-2xs);
+  --size-control-xs: var(--control-height-xs);
+  --size-control-sm: var(--control-height-sm);
+  --size-control-md: var(--control-height-md);
+  --size-control-lg: var(--control-height-lg);
+  --size-control-xl: var(--control-height-xl);
   --height-row-sm: var(--row-height-sm);
   --height-row-md: var(--row-height-md);
   --height-row-lg: var(--row-height-lg);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.63.4",
+  "version": "0.65.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",
@@ -64,7 +64,13 @@
     "./base.css": "./src/styles/base.css",
     "./fonts.css": "./src/styles/fonts.css",
     "./registry.json": "./registry.json",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./components/layout/split-layout/model": {
+      "types": "./dist/components/layout/split-layout/model.d.ts",
+      "solid": "./src/components/layout/split-layout/model.ts",
+      "development": "./src/components/layout/split-layout/model.ts",
+      "import": "./dist/components/layout/split-layout/model.js"
+    }
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly",
@@ -78,7 +84,9 @@
     "check:tree-shaking": "bun scripts/check-tree-shaking.ts",
     "theme:build": "bun scripts/build-default-theme.ts",
     "theme:check": "bun scripts/build-default-theme.ts --check",
+    "check:packed-layout": "node scripts/check-packed-layout.mjs",
     "check:packed-consumer": "bun scripts/check-packed-consumer.ts",
+    "check:packed-layout-renderer": "bun scripts/check-packed-layout-renderer.ts",
     "check:packed-appearance": "bun scripts/check-packed-appearance.ts"
   },
   "dependencies": {

package/registry.json

@@ -1529,6 +1529,47 @@
         }
       ]
     },
+    {
+      "name": "split-layout",
+      "type": "registry:ui",
+      "title": "Split Layout",
+      "description": "Issue-backed binary layout with stable opaque leaf owners; scoped persistence belongs to the host.",
+      "dependencies": [
+        "@corvu/resizable@^0.2.5",
+        "lucide-solid@^1.48.0"
+      ],
+      "registryDependencies": [
+        "@adea-ai/ui/button",
+        "lib"
+      ],
+      "files": [
+        {
+          "path": "src/components/layout/split-layout/drop.ts",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/drop.ts"
+        },
+        {
+          "path": "src/components/layout/split-layout/geometry.ts",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/geometry.ts"
+        },
+        {
+          "path": "src/components/layout/split-layout/index.ts",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/index.ts"
+        },
+        {
+          "path": "src/components/layout/split-layout/model.ts",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/model.ts"
+        },
+        {
+          "path": "src/components/layout/split-layout/split-layout.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/split-layout.tsx"
+        }
+      ]
+    },
     {
       "name": "status-bar",
       "type": "registry:ui",
@@ -1781,13 +1822,20 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/button",
+        "@adea-ai/ui/button-group",
         "@adea-ai/ui/code-block",
+        "@adea-ai/ui/dropdown-menu",
         "@adea-ai/ui/kbd",
         "@adea-ai/ui/spinner",
         "@adea-ai/ui/textarea",
         "lib"
       ],
       "files": [
+        {
+          "path": "src/components/conversation/busy-send-button.tsx",
+          "type": "registry:ui",
+          "target": "components/conversation/busy-send-button.tsx"
+        },
         {
           "path": "src/components/conversation/conversation-avatar.tsx",
           "type": "registry:ui",

package/src/components/conversation/busy-send-button.tsx

@@ -0,0 +1,161 @@
+/*
+ * Substantially translated from KiroCrew website/src/components/BusySendButton.tsx
+ * at 283e136c0f902e965a535a7c9548c57c7504fed0.
+ * Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ * Licensed under Apache-2.0; see LICENSE and NOTICE.
+ */
+import { ArrowUpFromLine, ChevronDown, Target } from 'lucide-solid'
+import { For, Show, createUniqueId } from 'solid-js'
+import { Button } from '../ui/button/button'
+import { ButtonGroup } from '../ui/button-group/button-group'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../ui/dropdown-menu/dropdown-menu'
+
+export type BusySendMode = 'steer' | 'queue'
+export type BusySendButtonProps = {
+  mode: BusySendMode
+  onModeChange: (mode: BusySendMode) => void
+  /** Executes only the selected action. The host owns the draft and command. */
+  onFire: () => void
+  /** An empty draft or pending delivery disables fire, but not choosing a mode. */
+  disabled?: boolean
+  /** Disable mode selection when the host has no authority to change preferences. */
+  selectionDisabled?: boolean
+  /** Host capability/authority failures: unavailable rows remain visible. */
+  unavailable?: Partial<Record<BusySendMode, string>>
+  /** Supply only when the host implements this alternate-action keyboard chord. */
+  alternateActionHint?: string
+}
+
+const modes: BusySendMode[] = ['steer', 'queue']
+const labels = { steer: 'Steer', queue: 'Queue' }
+const descriptions = {
+  steer: 'Act on this right away',
+  queue: 'Run after the current work finishes',
+}
+
+/**
+ * Kiro's split action/menu composition, with app-owned mode and availability.
+ * Picking a mode never fires it. Persistence, migration and same-session
+ * broadcasts belong to the consumer; this component has no storage or global listeners.
+ * Kobalte replaces the donor manual portal/positioning and document listeners:
+ * arrows wrap and selection/Escape return focus. Kobalte 0.13.14 prevents Tab
+ * without moving focus, so a menu-scoped translation of the donor Tab cycle
+ * fills that gap. It discovers enabled radio rows only; no document trap.
+ * No force-reset timer or runtime authority is translated from the adjacent
+ * donor stop flow.
+ */
+export function BusySendButton(props: BusySendButtonProps) {
+  const reasonId = createUniqueId()
+  const reason = () => props.unavailable?.[props.mode]
+  const variant = () => (props.mode === 'steer' ? ('default' as const) : ('secondary' as const))
+  return (
+    <div data-slot="busy-send-button" class="flex w-fit flex-col gap-1">
+      <DropdownMenu placement="top-end" modal={false}>
+        <ButtonGroup label="Send while busy">
+          <Button
+            type="button"
+            size="icon-sm"
+            variant={variant()}
+            aria-label={props.mode === 'steer' ? 'Steer' : 'Queue message'}
+            aria-describedby={reason() ? reasonId : undefined}
+            disabled={props.disabled || !!reason()}
+            onClick={() => {
+              if (!props.disabled && !reason()) props.onFire()
+            }}
+          >
+            <Show when={props.mode === 'steer'} fallback={<ArrowUpFromLine />}>
+              <Target />
+            </Show>
+          </Button>
+          <DropdownMenuTrigger
+            as={Button}
+            type="button"
+            size="icon-sm"
+            variant={variant()}
+            aria-label="Send options"
+            disabled={props.selectionDisabled}
+          >
+            <ChevronDown />
+          </DropdownMenuTrigger>
+        </ButtonGroup>
+        <DropdownMenuContent hideArrow>
+          <DropdownMenuRadioGroup
+            on:keydown={(event: KeyboardEvent) => {
+              if (
+                event.key !== 'Tab' ||
+                event.isComposing ||
+                !(event.currentTarget instanceof HTMLElement)
+              )
+                return
+              const rows = Array.from(
+                event.currentTarget.querySelectorAll<HTMLElement>(
+                  '[role="menuitemradio"]:not([aria-disabled="true"])'
+                )
+              )
+              if (!rows.length) return
+              event.preventDefault()
+              event.stopPropagation()
+              const active = document.activeElement
+              const index = active instanceof HTMLElement ? rows.indexOf(active) : -1
+              const next =
+                index < 0
+                  ? event.shiftKey
+                    ? rows.length - 1
+                    : 0
+                  : (index + (event.shiftKey ? -1 : 1) + rows.length) % rows.length
+              rows[next]?.focus()
+            }}
+            value={props.mode}
+            onChange={(value) => {
+              if (
+                (value === 'steer' || value === 'queue') &&
+                !props.selectionDisabled &&
+                !props.unavailable?.[value]
+              )
+                props.onModeChange(value)
+            }}
+          >
+            <For each={modes}>
+              {(mode) => (
+                <DropdownMenuRadioItem
+                  value={mode}
+                  closeOnSelect
+                  disabled={props.selectionDisabled || !!props.unavailable?.[mode]}
+                >
+                  <Show when={mode === 'steer'} fallback={<ArrowUpFromLine />}>
+                    <Target />
+                  </Show>
+                  <div class="flex min-w-0 flex-col gap-1">
+                    <span>{labels[mode]}</span>
+                    <span class="text-muted-foreground text-xs">{descriptions[mode]}</span>
+                    <Show when={props.unavailable?.[mode]}>
+                      {(message) => <span class="text-muted-foreground text-xs">{message()}</span>}
+                    </Show>
+                  </div>
+                </DropdownMenuRadioItem>
+              )}
+            </For>
+          </DropdownMenuRadioGroup>
+          <Show when={props.alternateActionHint}>
+            <DropdownMenuSeparator />
+            <p class="text-muted-foreground px-2 py-1 text-xs">{props.alternateActionHint}</p>
+          </Show>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Show when={reason()}>
+        {(message) => (
+          <p id={reasonId} class="text-muted-foreground text-xs">
+            {message()}
+          </p>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/components/conversation/index.ts

@@ -1,3 +1,4 @@
+export { BusySendButton, type BusySendMode, type BusySendButtonProps } from './busy-send-button'
 export {
   ConversationAvatar,
   type ConversationAvatarKind,

package/src/components/layout/split-layout/drop.ts

@@ -0,0 +1,29 @@
+import type { SplitLayoutBranch } from './model'
+export type PaneDropIntent = {
+  direction: SplitLayoutBranch['direction']
+  placement: 'before' | 'after'
+}
+/** Accepted Adea closest-edge intent; invalid/outside geometry cannot authorize a move. */
+export function paneDropIntent(
+  clientX: number,
+  clientY: number,
+  rect: { left: number; top: number; width: number; height: number }
+): PaneDropIntent | undefined {
+  const { left, top, width, height } = rect
+  if (
+    ![clientX, clientY, left, top, width, height].every(Number.isFinite) ||
+    width <= 0 ||
+    height <= 0
+  )
+    return
+  const x = clientX - left
+  const y = clientY - top
+  if (x < 0 || y < 0 || x > width || y > height) return
+  const candidates: { distance: number; intent: PaneDropIntent }[] = [
+    { distance: x, intent: { direction: 'row', placement: 'before' } },
+    { distance: width - x, intent: { direction: 'row', placement: 'after' } },
+    { distance: y, intent: { direction: 'column', placement: 'before' } },
+    { distance: height - y, intent: { direction: 'column', placement: 'after' } },
+  ]
+  return candidates.reduce((best, next) => (next.distance < best.distance ? next : best)).intent
+}

package/src/components/layout/split-layout/geometry.ts

@@ -0,0 +1,40 @@
+/*
+ * Translated from Muxy/Models/Workspace/SplitNode.swift areaFrames at
+ * 5c5be8697c57a2fe70cda97fdbaf7c912e2e31b6.
+ * Copyright (c) 2026 Muxy. SPDX-License-Identifier: MIT. See NOTICE.
+ */
+import {
+  MAX_SPLIT_RATIO,
+  MIN_SPLIT_RATIO,
+  type SplitLayoutLeaf,
+  type SplitLayoutNode,
+} from './model'
+export type LayoutRect = Readonly<{ x: number; y: number; width: number; height: number }>
+export type LayoutFrame<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readonly<{
+  node: SplitLayoutNode<L>
+  rect: LayoutRect
+}>
+/** Stable leaf DOM can use these fractions without being reparented into a changing nested tree. */
+export function computeLayoutFrames<L extends SplitLayoutLeaf>(
+  node: SplitLayoutNode<L>
+): ReadonlyMap<string, LayoutFrame<L>> {
+  const frames = new Map<string, LayoutFrame<L>>()
+  const visit = (current: SplitLayoutNode<L>, rect: LayoutRect) => {
+    frames.set(current.id, { node: current, rect })
+    if (current.kind === 'leaf') return
+    const ratio = Number.isFinite(current.ratio)
+      ? Math.min(MAX_SPLIT_RATIO, Math.max(MIN_SPLIT_RATIO, current.ratio))
+      : 0.5
+    const row = current.direction === 'row'
+    const first = row
+      ? { ...rect, width: rect.width * ratio }
+      : { ...rect, height: rect.height * ratio }
+    const second = row
+      ? { ...rect, x: rect.x + first.width, width: rect.width - first.width }
+      : { ...rect, y: rect.y + first.height, height: rect.height - first.height }
+    visit(current.children[0], first)
+    visit(current.children[1], second)
+  }
+  visit(node, { x: 0, y: 0, width: 1, height: 1 })
+  return frames
+}

package/src/components/layout/split-layout/index.ts

@@ -0,0 +1,4 @@
+/** Issue-backed binary layout with stable opaque leaf owners; scoped persistence belongs to the host. */
+export * from './model'
+export * from './geometry'
+export * from './split-layout'