@adea-ai/ui 0.64.0 → 0.65.1

package/package.json

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

package/src/components/composites/update-dialog/update-dialog.tsx

@@ -457,7 +457,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
           </Show>
 
           <Show when={notes()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-release-notes">
+            <div class="flex flex-col gap-2">
               <div class="flex items-center gap-2">
                 <h2 id="update-release-notes" class="text-sm font-semibold">
                   What changed in this release
@@ -477,11 +477,11 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {notes()}
               </div>
-            </section>
+            </div>
           </Show>
 
           <Show when={changelog()}>
-            <section class="flex flex-col gap-2" aria-labelledby="update-changelog">
+            <div class="flex flex-col gap-2">
               <h2 id="update-changelog" class="text-sm font-semibold">
                 Installed changelog
               </h2>
@@ -499,7 +499,7 @@ export function UpdateDialog(props: UpdateDialogProps) {
               >
                 {changelog()}
               </div>
-            </section>
+            </div>
           </Show>
         </div>
 

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'

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

@@ -0,0 +1,336 @@
+/*
+ * Copyright (c) 2026 Michael Yong
+ * Copyright (c) 2026 Muxy
+ * SPDX-License-Identifier: MIT
+ *
+ * Portions of the binary split behavior are substantially translated from:
+ * - get-bb/bb apps/app/src/lib/split-layout/ops.ts (MIT), revision
+ *   52a9256373d4d36f9b60e9e2a7f333464091a2ac.
+ * - muxy-app/muxy Muxy/Models/Workspace/SplitNode.swift (MIT), revision
+ *   5c5be8697c57a2fe70cda97fdbaf7c912e2e31b6.
+ * Adapted first in Adea packages/dev-view/src/layout/operations.ts at
+ * 0322ab09ff5e9775bfddc0bf2d81e1df436dbef7. Extracted here with opaque
+ * host-owned leaves and an injected final-pane placeholder; immutable strict
+ * binary operations, accepted limits and undoable close are preserved.
+ * See NOTICE and docs/research/dev-view-donor-audit.md.
+ */
+
+/** A visual identity only. Extend this with host-owned payload; UI never interprets it. */
+export type SplitLayoutLeaf = Readonly<{ kind: 'leaf'; id: string }>
+export type SplitLayoutBranch<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readonly<{
+  kind: 'split'
+  id: string
+  direction: 'row' | 'column'
+  ratio: number
+  children: readonly [SplitLayoutNode<L>, SplitLayoutNode<L>]
+}>
+export type SplitLayoutNode<L extends SplitLayoutLeaf = SplitLayoutLeaf> = L | SplitLayoutBranch<L>
+
+export const MAX_LAYOUT_LEAVES = 8
+export const MAX_LAYOUT_DEPTH = 8
+export const MIN_SPLIT_RATIO = 0.1
+export const MAX_SPLIT_RATIO = 0.9
+
+export type SplitLayoutState<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readonly<{
+  center: SplitLayoutNode<L>
+  focusedLeafId: string
+  closed: readonly Readonly<{ center: SplitLayoutNode<L>; leafId: string }>[]
+}>
+
+export type SplitPaneInput<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readonly<{
+  direction: SplitLayoutBranch<L>['direction']
+  placement: 'before' | 'after'
+  leaf: L
+  splitId: string
+}>
+
+export function listLeaves<L extends SplitLayoutLeaf>(node: SplitLayoutNode<L>): readonly L[] {
+  return node.kind === 'leaf'
+    ? [node]
+    : [...listLeaves(node.children[0]), ...listLeaves(node.children[1])]
+}
+
+export function countLeaves<L extends SplitLayoutLeaf>(node: SplitLayoutNode<L>): number {
+  return node.kind === 'leaf' ? 1 : countLeaves(node.children[0]) + countLeaves(node.children[1])
+}
+
+export function layoutDepth<L extends SplitLayoutLeaf>(node: SplitLayoutNode<L>): number {
+  return node.kind === 'leaf'
+    ? 1
+    : 1 + Math.max(layoutDepth(node.children[0]), layoutDepth(node.children[1]))
+}
+
+function replaceLeaf<L extends SplitLayoutLeaf>(
+  node: SplitLayoutNode<L>,
+  leafId: string,
+  replacement: SplitLayoutNode<L>
+): SplitLayoutNode<L> {
+  if (node.kind === 'leaf') return node.id === leafId ? replacement : node
+  const first = replaceLeaf(node.children[0], leafId, replacement)
+  const second = replaceLeaf(node.children[1], leafId, replacement)
+  return first === node.children[0] && second === node.children[1]
+    ? node
+    : { ...node, children: [first, second] }
+}
+
+function removeLeaf<L extends SplitLayoutLeaf>(
+  node: SplitLayoutNode<L>,
+  leafId: string
+): SplitLayoutNode<L> | null {
+  if (node.kind === 'leaf') return node.id === leafId ? null : node
+  const first = removeLeaf(node.children[0], leafId)
+  const second = removeLeaf(node.children[1], leafId)
+  if (!first) return second
+  if (!second) return first
+  return first === node.children[0] && second === node.children[1]
+    ? node
+    : { ...node, children: [first, second] }
+}
+
+function containsLeaf<L extends SplitLayoutLeaf>(
+  node: SplitLayoutNode<L>,
+  leafId: string
+): boolean {
+  return node.kind === 'leaf'
+    ? node.id === leafId
+    : containsLeaf(node.children[0], leafId) || containsLeaf(node.children[1], leafId)
+}
+
+function assertUniqueInput<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  leaf: L,
+  splitId: string
+) {
+  assertLayoutTree(leaf)
+  if (typeof splitId !== 'string' || splitId.length === 0)
+    throw new Error('invalid_state: split identity must be nonempty')
+  const ids = new Set<string>()
+  const visit = (node: SplitLayoutNode<L>) => {
+    if (ids.has(node.id)) throw new Error('invalid_state: duplicate pane id')
+    ids.add(node.id)
+    if (node.kind === 'split') node.children.forEach(visit)
+  }
+  visit(state.center)
+  if (ids.has(leaf.id) || ids.has(splitId) || leaf.id === splitId)
+    throw new Error('invalid_state: duplicate pane id')
+}
+
+/** Visual-tree validation only; applications still decode and scope persisted preferences. */
+function assertLayoutTree<L extends SplitLayoutLeaf>(center: SplitLayoutNode<L>): void {
+  const ids = new Set<string>()
+  const seen = new WeakSet<object>()
+  let leaves = 0
+  const visit = (node: SplitLayoutNode<L>, depth: number) => {
+    if (depth > MAX_LAYOUT_DEPTH) throw new Error('limit_exceeded: layout depth exceeds eight')
+    if (!node || typeof node !== 'object') throw new Error('invalid_state: missing layout node')
+    if (seen.has(node)) throw new Error('invalid_state: cyclic or reused layout node')
+    seen.add(node)
+    if (typeof node.id !== 'string' || node.id.length === 0)
+      throw new Error('invalid_state: layout identity must be nonempty')
+    if (ids.has(node.id)) throw new Error('invalid_state: duplicate pane id')
+    ids.add(node.id)
+    if (node.kind === 'leaf') {
+      leaves += 1
+      if (leaves > MAX_LAYOUT_LEAVES)
+        throw new Error('limit_exceeded: layout has more than eight leaves')
+      return
+    }
+    if (
+      node.kind !== 'split' ||
+      !Array.isArray(node.children) ||
+      node.children.length !== 2 ||
+      (node.direction !== 'row' && node.direction !== 'column')
+    )
+      throw new Error('invalid_state: layout must be a strict binary row or column tree')
+    visit(node.children[0], depth + 1)
+    visit(node.children[1], depth + 1)
+  }
+  visit(center, 1)
+}
+
+export function createLayoutState<L extends SplitLayoutLeaf>(
+  center: SplitLayoutNode<L>
+): SplitLayoutState<L> {
+  assertLayoutTree(center)
+  const first = listLeaves(center)[0]
+  if (!first) throw new Error('invalid_state: layout requires a leaf')
+  return { center, focusedLeafId: first.id, closed: [] }
+}
+
+export function splitPane<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  targetLeafId: string,
+  input: SplitPaneInput<L>
+): SplitLayoutState<L> {
+  if (!containsLeaf(state.center, targetLeafId)) return state
+  if (countLeaves(state.center) >= MAX_LAYOUT_LEAVES)
+    throw new Error('limit_exceeded: center layout has eight leaves')
+  assertUniqueInput(state, input.leaf, input.splitId)
+  const target = listLeaves(state.center).find((leaf) => leaf.id === targetLeafId)
+  if (!target) return state
+  const children =
+    input.placement === 'before' ? ([input.leaf, target] as const) : ([target, input.leaf] as const)
+  const center = replaceLeaf(state.center, targetLeafId, {
+    kind: 'split',
+    id: input.splitId,
+    direction: input.direction,
+    ratio: 0.5,
+    children,
+  })
+  if (layoutDepth(center) > MAX_LAYOUT_DEPTH)
+    throw new Error('limit_exceeded: center layout depth exceeds eight')
+  return { ...state, center, focusedLeafId: input.leaf.id, closed: [] }
+}
+
+export function closePane<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  leafId: string,
+  createPlaceholderLeaf: () => L
+): SplitLayoutState<L> {
+  if (!containsLeaf(state.center, leafId)) return state
+  const before = state.center
+  const readingOrder = listLeaves(before)
+  const closedIndex = readingOrder.findIndex((leaf) => leaf.id === leafId)
+  const removed = removeLeaf(before, leafId)
+  const center: SplitLayoutNode<L> = removed ?? createPlaceholderLeaf()
+  if (!removed) {
+    if (center.kind !== 'leaf') throw new Error('invalid_state: placeholder must be a leaf')
+    assertLayoutTree(center)
+  }
+  const leaves = listLeaves(center)
+  const fallback = leaves[Math.min(closedIndex, leaves.length - 1)] ?? leaves[0]
+  if (!fallback) throw new Error('invalid_state: layout requires a leaf')
+  return {
+    center,
+    focusedLeafId: state.focusedLeafId === leafId ? fallback.id : state.focusedLeafId,
+    closed: [...state.closed, { center: before, leafId }],
+  }
+}
+
+export function undoClosePane<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>
+): SplitLayoutState<L> {
+  const previous = state.closed.at(-1)
+  if (!previous) return state
+  return {
+    center: previous.center,
+    focusedLeafId: previous.leafId,
+    closed: state.closed.slice(0, -1),
+  }
+}
+
+export function focusPane<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  leafId: string
+): SplitLayoutState<L> {
+  return containsLeaf(state.center, leafId) && state.focusedLeafId !== leafId
+    ? { ...state, focusedLeafId: leafId }
+    : state
+}
+
+export function swapPanes<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  firstLeafId: string,
+  secondLeafId: string
+): SplitLayoutState<L> {
+  if (firstLeafId === secondLeafId) return state
+  const leaves = listLeaves(state.center)
+  const first = leaves.find((leaf) => leaf.id === firstLeafId)
+  const second = leaves.find((leaf) => leaf.id === secondLeafId)
+  if (!first || !second) return state
+  const swap = (node: SplitLayoutNode<L>): SplitLayoutNode<L> => {
+    if (node.kind === 'leaf') {
+      if (node.id === firstLeafId) return second
+      if (node.id === secondLeafId) return first
+      return node
+    }
+    const left = swap(node.children[0])
+    const right = swap(node.children[1])
+    return left === node.children[0] && right === node.children[1]
+      ? node
+      : { ...node, children: [left, right] }
+  }
+  return { ...state, center: swap(state.center), closed: [] }
+}
+
+export function movePane<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  leafId: string,
+  targetLeafId: string,
+  placement: 'before' | 'after',
+  direction: SplitLayoutBranch<L>['direction'],
+  splitId: string
+): SplitLayoutState<L> {
+  if (leafId === targetLeafId) return state
+  const moving = listLeaves(state.center).find((leaf) => leaf.id === leafId)
+  if (!moving || !containsLeaf(state.center, targetLeafId)) return state
+  const detached = removeLeaf(state.center, leafId)
+  if (!detached) return state
+  const moved = splitPane(
+    { center: detached, focusedLeafId: state.focusedLeafId, closed: state.closed },
+    targetLeafId,
+    { direction, placement, leaf: moving, splitId }
+  )
+  return { ...moved, focusedLeafId: leafId }
+}
+
+export function resizeSplit<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  splitId: string,
+  ratio: number
+): SplitLayoutState<L> {
+  if (!Number.isFinite(ratio)) return state
+  const nextRatio = Math.min(MAX_SPLIT_RATIO, Math.max(MIN_SPLIT_RATIO, ratio))
+  let found = false
+  const visit = (node: SplitLayoutNode<L>): SplitLayoutNode<L> => {
+    if (node.kind === 'leaf') return node
+    if (node.id === splitId) {
+      found = true
+      return node.ratio === nextRatio ? node : { ...node, ratio: nextRatio }
+    }
+    const first = visit(node.children[0])
+    const second = visit(node.children[1])
+    return first === node.children[0] && second === node.children[1]
+      ? node
+      : { ...node, children: [first, second] }
+  }
+  const center = visit(state.center)
+  return found && center !== state.center ? { ...state, center, closed: [] } : state
+}
+
+/**
+ * Pure repair walk ported from bb's size normalization: every split ratio is
+ * clamped into the normative range and a non-finite ratio falls back to an
+ * even split. Structure, IDs, and focus are untouched.
+ */
+export function normalizeLayout<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>
+): SplitLayoutState<L> {
+  const visit = (node: SplitLayoutNode<L>): { node: SplitLayoutNode<L>; changed: boolean } => {
+    if (node.kind === 'leaf') return { node, changed: false }
+    const first = visit(node.children[0])
+    const second = visit(node.children[1])
+    const ratio = Number.isFinite(node.ratio)
+      ? Math.min(MAX_SPLIT_RATIO, Math.max(MIN_SPLIT_RATIO, node.ratio))
+      : (MIN_SPLIT_RATIO + MAX_SPLIT_RATIO) / 2
+    const changed = first.changed || second.changed || ratio !== node.ratio
+    return {
+      node: changed ? { ...node, ratio, children: [first.node, second.node] } : node,
+      changed,
+    }
+  }
+  const result = visit(state.center)
+  return result.changed ? { ...state, center: result.node } : state
+}
+
+/** The leaf immediately after (`1`) or before (`-1`) the given leaf in reading order. */
+export function neighborLeaf<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  leafId: string,
+  step: 1 | -1
+): L | undefined {
+  const leaves = listLeaves(state.center)
+  const index = leaves.findIndex((leaf) => leaf.id === leafId)
+  if (index < 0) return undefined
+  return leaves[index + step]
+}