@adea-ai/ui 0.109.0 → 0.110.0

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

@@ -41,6 +41,10 @@ export type SplitPaneInput<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readon
   splitId: string
 }>
 
+export type BalancedSplitPaneInput<L extends SplitLayoutLeaf = SplitLayoutLeaf> = Readonly<
+  Pick<SplitPaneInput<L>, 'placement' | 'leaf' | 'splitId'>
+>
+
 function replaceLeaf<L extends SplitLayoutLeaf>(
   node: SplitLayoutNode<L>,
   leafId: string,
@@ -86,14 +90,19 @@ function assertUniqueInput<L extends SplitLayoutLeaf>(
   if (typeof splitId !== 'string' || splitId.length === 0)
     throw new Error('invalid_state: split identity must be nonempty')
   const ids = new Set<string>()
+  const splitIds: 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)
+    if (node.kind === 'split') {
+      splitIds.push(node.id)
+      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')
+  return splitIds
 }
 
 /** Visual-tree validation only; applications still decode and scope persisted preferences. */
@@ -163,6 +172,51 @@ export function splitPane<L extends SplitLayoutLeaf>(
   return { ...state, center, focusedLeafId: input.leaf.id, closed: [] }
 }
 
+/**
+ * Add a pane beside the selected leaf and reflow the visual tree into a
+ * balanced row-major grid. One or two leaves share one row; from three leaves
+ * onward, leaves fill a first row and then a second row, with no more than four
+ * columns in either. Each row gives its leaves equal width and the two rows
+ * equal height. Existing opaque leaf objects are preserved. Split IDs are
+ * recycled across rebuilt branches, whose axis and descendants can change;
+ * resize actions must resolve against the current tree. Ratios are recomputed.
+ * This is opt-in: callers
+ * that need an explicit axis and ratio should keep using `splitPane`.
+ */
+export function splitPaneBalanced<L extends SplitLayoutLeaf>(
+  state: SplitLayoutState<L>,
+  targetLeafId: string,
+  input: BalancedSplitPaneInput<L>
+): SplitLayoutState<L> {
+  const leaves = [...listLeaves(state.center)]
+  const targetIndex = leaves.findIndex((leaf) => leaf.id === targetLeafId)
+  if (targetIndex < 0) return state
+  if (leaves.length >= MAX_LAYOUT_LEAVES)
+    throw new Error('limit_exceeded: center layout has eight leaves')
+  const splitIds = assertUniqueInput(state, input.leaf, input.splitId)
+
+  const insertionIndex = targetIndex + (input.placement === 'before' ? 0 : 1)
+  leaves.splice(insertionIndex, 0, input.leaf)
+
+  const build = (start: number, end: number, vertical = false): SplitLayoutNode<L> => {
+    if (end - start === 1) return leaves[start]!
+    const middle = start + Math.ceil((end - start) / 2)
+    // The new identity belongs to the lowest branch separating the selected
+    // pane from its new neighbour. Other branches reuse the existing ID pool.
+    const id = middle === targetIndex + 1 ? input.splitId : splitIds.shift()!
+    return {
+      kind: 'split',
+      id,
+      direction: vertical ? 'column' : 'row',
+      ratio: vertical ? 0.5 : (middle - start) / (end - start),
+      children: [build(start, middle), build(middle, end)],
+    }
+  }
+  const center = build(0, leaves.length, leaves.length > 2)
+  assertLayoutTree(center)
+  return { ...state, center, focusedLeafId: input.leaf.id, closed: [] }
+}
+
 export function closePane<L extends SplitLayoutLeaf>(
   state: SplitLayoutState<L>,
   leafId: string,
@@ -287,21 +341,19 @@ export function resizeSplit<L extends SplitLayoutLeaf>(
 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 visit = (node: SplitLayoutNode<L>): SplitLayoutNode<L> => {
+    if (node.kind === 'leaf') return node
     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,
-    }
+    return first === node.children[0] && second === node.children[1] && ratio === node.ratio
+      ? node
+      : { ...node, ratio, children: [first, second] }
   }
-  const result = visit(state.center)
-  return result.changed ? { ...state, center: result.node } : state
+  const center = visit(state.center)
+  return center === state.center ? state : { ...state, center }
 }
 
 /** The leaf immediately after (`1`) or before (`-1`) the given leaf in reading order. */

package/src/components/ui/alert-dialog/alert-dialog.tsx

@@ -5,9 +5,14 @@ import {
 // Use the alert-specific export rather than DialogRoot.Content, which other imports can replace.
 import type { ComponentProps } from 'solid-js'
 import { createEffect, createSignal, splitProps } from 'solid-js'
-import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
+import {
+  overlayMotion,
+  overlayPositioner,
+  overlayScrim,
+  overlaySurface,
+  overlayTitle,
+} from '#lib/overlay'
 import { cn } from '#lib/utils'
-import { headingVariants } from '../typography'
 
 /**
  * AlertDialog.
@@ -116,12 +121,7 @@ export function AlertDialogFooter(props: ComponentProps<'div'>) {
 
 export function AlertDialogTitle(props: ComponentProps<typeof KobalteAlertDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteAlertDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteAlertDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function AlertDialogDescription(

package/src/components/ui/dialog/dialog.tsx

@@ -7,9 +7,14 @@ import {
 import { X } from 'lucide-solid'
 import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { createRenderEffect, onCleanup, Show, splitProps } from 'solid-js'
-import { overlayMotion, overlayPositioner, overlayScrim, overlaySurface } from '#lib/overlay'
+import {
+  overlayMotion,
+  overlayPositioner,
+  overlayScrim,
+  overlaySurface,
+  overlayTitle,
+} from '#lib/overlay'
 import { cn } from '#lib/utils'
-import { headingVariants } from '../typography'
 
 type FocusCycle = {
   content: HTMLElement
@@ -326,12 +331,7 @@ export function DialogFooter(props: ComponentProps<'div'>) {
 
 export function DialogTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function DialogDescription(props: ComponentProps<typeof KobalteDialog.Description>) {

package/src/components/ui/sheet/sheet.tsx

@@ -8,9 +8,9 @@ import { X } from 'lucide-solid'
 import type { Accessor, ComponentProps, JSX } from 'solid-js'
 import { Show, splitProps } from 'solid-js'
 import { cva, type VariantProps } from '#lib/variants'
+import { overlayTitle } from '#lib/overlay'
 import { cn } from '#lib/utils'
 import { createDialogFocusRestoration, DialogOverlay } from '../dialog/dialog'
-import { headingVariants } from '../typography'
 
 /**
  * Sheet.
@@ -215,12 +215,7 @@ export function SheetFooter(props: ComponentProps<'div'>) {
 
 export function SheetTitle(props: ComponentProps<typeof KobalteDialog.Title>) {
   const [local, rest] = splitProps(props, ['class'])
-  return (
-    <KobalteDialog.Title
-      class={cn(headingVariants({ size: 'card', leading: 'none' }), local.class)}
-      {...rest}
-    />
-  )
+  return <KobalteDialog.Title class={cn(overlayTitle, local.class)} {...rest} />
 }
 
 export function SheetDescription(props: ComponentProps<typeof KobalteDialog.Description>) {

package/src/components/ui/typography/typography.tsx

@@ -25,7 +25,8 @@ import { cn } from '#lib/utils'
  * stack already sets the rhythm (a card or dialog header), and is the only other
  * option.
  */
-export const headingVariants = cva('font-semibold', {
+// cva only returns a closure. A heading-only consumer must discard Text's recipe.
+export const headingVariants = /* @__PURE__ */ cva('font-semibold', {
   variants: {
     size: {
       /** 30px. An app-level headline — a first-run or empty-app screen. Once per app. */
@@ -130,7 +131,7 @@ export function Heading<T extends ValidComponent = 'h2'>(props: HeadingProps<T>)
  *
  * Defaults: `body` renders a `p`, `code` a `code`, every other variant a `span`.
  */
-export const textVariants = cva('', {
+export const textVariants = /* @__PURE__ */ cva('', {
   variants: {
     variant: {
       /** 14px / 400. Body copy and descriptions. */

package/src/lib/overlay.ts

@@ -14,6 +14,12 @@
 export const overlaySurface =
   'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'
 
+/**
+ * Overlay titles have one fixed typography role. Keep this small recipe shared
+ * without loading the configurable Heading component into every dialog.
+ */
+export const overlayTitle = 'font-semibold text-base tracking-tight leading-none'
+
 /** The span of the portal wrapper that centres a dialog-like overlay. */
 export const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'