@adea-ai/ui 0.63.4 → 0.65.0

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]
+}

package/src/components/layout/split-layout/split-layout.tsx

@@ -0,0 +1,346 @@
+import Resizable from '@corvu/resizable'
+import {
+  For,
+  createMemo,
+  createComputed,
+  createUniqueId,
+  createSignal,
+  onCleanup,
+  on,
+  type Accessor,
+  type JSX,
+} from 'solid-js'
+import { X, GripVertical } from 'lucide-solid'
+import { Button } from '../../ui/button'
+import { cn } from '#lib/utils'
+import { computeLayoutFrames, type LayoutRect } from './geometry'
+import { paneDropIntent, type PaneDropIntent } from './drop'
+export type { PaneDropIntent } from './drop'
+const PANE_DRAG_TYPE = 'application/x-adea-pane-move'
+import {
+  listLeaves,
+  MIN_SPLIT_RATIO,
+  MAX_SPLIT_RATIO,
+  type SplitLayoutBranch,
+  type SplitLayoutLeaf,
+  type SplitLayoutState,
+} from './model'
+
+export type SplitLayoutProps<L extends SplitLayoutLeaf> = {
+  state: SplitLayoutState<L>
+  label: string
+  /** Accessible name for a pane region and its close button. */
+  labelForLeaf: (leaf: L) => string
+  /** Called once per stable leaf owner; the accessor tracks opaque payload replacement. */
+  renderLeaf: (leaf: Accessor<L>) => JSX.Element
+  /** Inline visible header composition, separate from the region and close-button name. */
+  renderPaneLabel?: (leaf: Accessor<L>) => JSX.Element
+  /** Whether pane regions participate in sequential keyboard navigation; defaults to programmatic focus only. */
+  paneTabIndex?: 0 | -1
+  /** Accessible splitter name; defaults to the current orientation-specific label. */
+  labelForSeparator?: (branch: SplitLayoutBranch<L>) => string
+  onResize: (splitId: string, ratio: number) => void
+  onFocus?: (leafId: string) => void
+  /** Host performs the model transition and returns the surviving focus destination. */
+  onClose?: (leafId: string) => string | undefined
+  /** Pointer placement only; the host supplies keyboard commands and performs the model transition. */
+  onMove?: (leafId: string, targetId: string, intent: PaneDropIntent) => void
+  /** Stable header composition for host-owned keyboard actions/capability feedback. */
+  renderPaneActions?: (leaf: Accessor<L>) => JSX.Element
+  class?: string
+}
+function rectStyle(rect: LayoutRect): JSX.CSSProperties {
+  return {
+    left: `${rect.x * 100}%`,
+    top: `${rect.y * 100}%`,
+    width: `${rect.width * 100}%`,
+    height: `${rect.height * 100}%`,
+  }
+}
+/** Muxy frame geometry keeps leaf owners stable; Corvu owns constrained separator interactions. */
+export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L>) {
+  let root: HTMLDivElement | undefined
+  let pendingFrame: number | undefined
+  const refs = new Map<string, HTMLElement>()
+  const domIds = new Map<string, string>()
+  const prefix = createUniqueId()
+  let nextDomId = 0
+  let nextDragId = 0
+  const [drag, setDrag] = createSignal<{ id: string; token: string }>()
+  const [drop, setDrop] = createSignal<{ id: string; intent: PaneDropIntent }>()
+  const clearDrag = () => {
+    setDrag(undefined)
+    setDrop(undefined)
+  }
+  const domId = (id: string) => {
+    const existing = domIds.get(id)
+    if (existing) return existing
+    const created = `${prefix}-pane-${nextDomId++}`
+    domIds.set(id, created)
+    return created
+  }
+  const leaves = createMemo(() => listLeaves(props.state.center))
+  const leafMap = createMemo(() => new Map(leaves().map((leaf) => [leaf.id, leaf])))
+  const frames = createMemo(() => computeLayoutFrames(props.state.center))
+  const branches = createMemo(() =>
+    Array.from(frames().values()).flatMap((frame) =>
+      frame.node.kind === 'split' ? [frame.node] : []
+    )
+  )
+  createComputed(() => {
+    const current = drag()
+    if (current && (!props.onMove || !leafMap().has(current.id))) clearDrag()
+    const target = drop()
+    if (target && !leafMap().has(target.id)) setDrop(undefined)
+  })
+  const allowedTarget = (id: string, transfer: DataTransfer | null) => {
+    const current = drag()
+    return props.onMove &&
+      current &&
+      current.id !== id &&
+      leafMap().has(current.id) &&
+      leafMap().has(id) &&
+      transfer?.types.includes(PANE_DRAG_TYPE)
+      ? current
+      : undefined
+  }
+  const dropLabel = createMemo(() => {
+    const target = drop()
+    const leaf = target ? leafMap().get(target.id) : undefined
+    return target && leaf
+      ? `Drop to place pane ${target.intent.placement} ${props.labelForLeaf(leaf)}`
+      : ''
+  })
+  const branchMap = createMemo(() => new Map(branches().map((branch) => [branch.id, branch])))
+  const schedule = (action: () => void) => {
+    if (pendingFrame !== undefined) cancelAnimationFrame(pendingFrame)
+    pendingFrame = requestAnimationFrame(() => {
+      pendingFrame = undefined
+      action()
+    })
+  }
+  // Register before keyed children update: capture a focused editor before an
+  // ordered DOM move can blur it. Never override a newer focus outside this root.
+  createComputed(
+    on(
+      () => props.state.center,
+      () => {
+        const active = root?.ownerDocument.activeElement
+        if (!root || !(active instanceof HTMLElement) || !root.contains(active)) return
+        const field =
+          active instanceof HTMLTextAreaElement || active instanceof HTMLInputElement
+            ? active
+            : undefined
+        const selection = field
+          ? {
+              start: field.selectionStart,
+              end: field.selectionEnd,
+              direction: field.selectionDirection,
+            }
+          : undefined
+        schedule(() => {
+          if (!active.isConnected || !root?.contains(active)) return
+          const current = active.ownerDocument.activeElement
+          if (current !== active && current !== active.ownerDocument.body) return
+          active.focus({ preventScroll: true })
+          if (field && selection?.start !== null && selection?.end !== null && selection)
+            field.setSelectionRange(
+              selection.start,
+              selection.end,
+              selection.direction ?? undefined
+            )
+        })
+      }
+    )
+  )
+  onCleanup(() => {
+    if (pendingFrame !== undefined) cancelAnimationFrame(pendingFrame)
+    clearDrag()
+    refs.clear()
+    domIds.clear()
+  })
+  const close = (id: string) => {
+    const next = props.onClose?.(id)
+    if (next) schedule(() => refs.get(next)?.focus({ preventScroll: true }))
+  }
+  return (
+    <div
+      ref={(el) => {
+        root = el
+      }}
+      role="group"
+      aria-label={props.label}
+      data-slot="split-layout"
+      class={cn('relative size-full min-h-0 min-w-0', props.class)}
+    >
+      <For each={leaves().map((leaf) => leaf.id)}>
+        {(id) => {
+          const initial = leafMap().get(id)!
+          const leaf = () => leafMap().get(id) ?? initial
+          const content = props.renderLeaf(leaf)
+          const paneLabel = props.renderPaneLabel?.(leaf)
+          const actions = props.renderPaneActions?.(leaf)
+          const intent = () => (drop()?.id === id ? drop()?.intent : undefined)
+          onCleanup(() => {
+            refs.delete(id)
+            domIds.delete(id)
+          })
+          return (
+            <section
+              ref={(el) => refs.set(id, el)}
+              id={domId(id)}
+              role="region"
+              aria-label={props.labelForLeaf(leaf())}
+              tabIndex={props.paneTabIndex ?? -1}
+              data-pane-id={id}
+              data-focused={props.state.focusedLeafId === id ? '' : undefined}
+              data-drop-direction={intent()?.direction}
+              data-drop-placement={intent()?.placement}
+              onDragOver={(event) => {
+                if (!allowedTarget(id, event.dataTransfer)) return
+                const next = paneDropIntent(
+                  event.clientX,
+                  event.clientY,
+                  event.currentTarget.getBoundingClientRect()
+                )
+                if (!next) {
+                  setDrop(undefined)
+                  return
+                }
+                event.preventDefault()
+                if (event.dataTransfer) event.dataTransfer.dropEffect = 'move'
+                setDrop({ id, intent: next })
+              }}
+              onDragLeave={(event) => {
+                if (
+                  event.relatedTarget instanceof Node &&
+                  event.currentTarget.contains(event.relatedTarget)
+                )
+                  return
+                if (drop()?.id === id) setDrop(undefined)
+              }}
+              onDrop={(event) => {
+                const current = allowedTarget(id, event.dataTransfer)
+                const next = paneDropIntent(
+                  event.clientX,
+                  event.clientY,
+                  event.currentTarget.getBoundingClientRect()
+                )
+                const accepted =
+                  current && next && event.dataTransfer?.getData(PANE_DRAG_TYPE) === current.token
+                clearDrag()
+                if (!accepted) return
+                event.preventDefault()
+                props.onMove?.(current.id, id, next)
+              }}
+              style={rectStyle(frames().get(id)?.rect ?? { x: 0, y: 0, width: 0, height: 0 })}
+              class="absolute flex min-h-0 min-w-0 flex-col overflow-hidden border border-border data-[focused]:border-primary bg-background text-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring"
+              onFocusIn={() => props.onFocus?.(id)}
+            >
+              <header class="flex min-w-0 shrink-0 items-center gap-2 bg-surface px-2">
+                <span
+                  data-pane-drag-handle=""
+                  draggable={Boolean(props.onMove)}
+                  class="flex min-w-0 flex-1 items-center gap-2 truncate text-sm"
+                  title={props.onMove ? `Drag ${props.labelForLeaf(leaf())} to move` : undefined}
+                  onDragStart={(event) => {
+                    if (!props.onMove || !event.dataTransfer) {
+                      event.preventDefault()
+                      return
+                    }
+                    const token = `${prefix}-${++nextDragId}`
+                    setDrag({ id, token })
+                    event.dataTransfer.setData(PANE_DRAG_TYPE, token)
+                    event.dataTransfer.effectAllowed = 'move'
+                  }}
+                  onDragEnd={clearDrag}
+                >
+                  {props.onMove ? (
+                    <GripVertical class="size-3 shrink-0" aria-hidden="true" />
+                  ) : null}
+                  <span class="min-w-0 flex-1 truncate">
+                    {paneLabel ?? props.labelForLeaf(leaf())}
+                  </span>
+                </span>
+                {actions}
+                {props.onClose ? (
+                  <Button
+                    variant="ghost"
+                    size="icon-xs"
+                    aria-label={`Close ${props.labelForLeaf(leaf())}`}
+                    onClick={() => close(id)}
+                  >
+                    <X />
+                  </Button>
+                ) : null}
+              </header>
+              <div class="min-h-0 min-w-0 flex-1 overflow-auto">{content}</div>
+              {intent() ? (
+                <div
+                  aria-hidden="true"
+                  class={cn('pointer-events-none absolute border-2 border-primary bg-primary/10', {
+                    'inset-y-0 left-0 w-1/2':
+                      intent()?.direction === 'row' && intent()?.placement === 'before',
+                    'inset-y-0 right-0 w-1/2':
+                      intent()?.direction === 'row' && intent()?.placement === 'after',
+                    'inset-x-0 top-0 h-1/2':
+                      intent()?.direction === 'column' && intent()?.placement === 'before',
+                    'inset-x-0 bottom-0 h-1/2':
+                      intent()?.direction === 'column' && intent()?.placement === 'after',
+                  })}
+                />
+              ) : null}
+            </section>
+          )
+        }}
+      </For>
+      <span class="sr-only" role="status">
+        {dropLabel()}
+      </span>
+      <For each={branches().map((branch) => branch.id)}>
+        {(id) => {
+          const initial = branchMap().get(id)!
+          const branch: Accessor<SplitLayoutBranch<L>> = () => branchMap().get(id) ?? initial
+          return (
+            <Resizable
+              orientation={branch().direction === 'row' ? 'horizontal' : 'vertical'}
+              sizes={[branch().ratio, 1 - branch().ratio]}
+              keyboardDelta={0.05}
+              onSizesChange={(sizes) => {
+                if (sizes[0] !== undefined && Math.abs(sizes[0] - branch().ratio) > 0.000001)
+                  props.onResize(id, sizes[0])
+              }}
+              style={rectStyle(frames().get(id)?.rect ?? { x: 0, y: 0, width: 0, height: 0 })}
+              class="pointer-events-none absolute flex min-h-0 min-w-0 data-[orientation=vertical]:flex-col"
+            >
+              <Resizable.Panel
+                minSize={MIN_SPLIT_RATIO}
+                maxSize={MAX_SPLIT_RATIO}
+                aria-hidden="true"
+              />
+              <Resizable.Handle
+                aria-label={
+                  props.labelForSeparator?.(branch()) ??
+                  (branch().direction === 'row' ? 'Resize pane columns' : 'Resize pane rows')
+                }
+                aria-orientation={branch().direction === 'row' ? 'vertical' : 'horizontal'}
+                aria-controls={listLeaves(branch())
+                  .map((leaf) => domId(leaf.id))
+                  .join(' ')}
+                aria-valuemin={10}
+                aria-valuemax={90}
+                aria-valuenow={Math.round(branch().ratio * 100)}
+                class="pointer-events-auto relative w-px shrink-0 bg-border after:absolute after:inset-y-0 after:-inset-x-1 after:w-3 focus-visible:bg-primary focus-visible:outline-none hover:bg-primary data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:inset-x-0 data-[orientation=vertical]:after:-inset-y-1 data-[orientation=vertical]:after:h-3 data-[orientation=vertical]:after:w-full"
+              />
+              <Resizable.Panel
+                minSize={MIN_SPLIT_RATIO}
+                maxSize={MAX_SPLIT_RATIO}
+                aria-hidden="true"
+              />
+            </Resizable>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/index.ts

@@ -77,6 +77,7 @@ export * from './components/ui/tooltip'
 export * from './components/motion'
 
 /* --- Layout -------------------------------------------------------------- */
+export * from './components/layout/split-layout'
 export * from './components/layout/app-shell'
 export * from './components/layout/page'
 export * from './components/layout/panel'