@adea-ai/ui 0.109.0 → 0.110.0

package/dist/r/registry.json

@@ -61,7 +61,6 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -569,7 +568,6 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1213,7 +1211,6 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1609,6 +1606,11 @@
           "path": "src/components/layout/contextual-sidebar/index.ts",
           "type": "registry:ui",
           "target": "components/layout/contextual-sidebar/index.ts"
+        },
+        {
+          "path": "src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx"
         }
       ]
     },

package/dist/r/sheet.json

@@ -9,7 +9,6 @@
   ],
   "registryDependencies": [
     "@adea-ai/ui/dialog",
-    "@adea-ai/ui/typography",
     "lib"
   ],
   "files": [

package/dist/r/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -1,7 +1,6 @@
 import type { Accessor, JSX } from 'solid-js'
 import { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'
 import { cn } from '../../../lib/utils'
-import { Sheet, SheetContent, SheetTitle } from '../../ui/sheet'
 import {
   SidebarNav,
   SidebarNavContent,
@@ -11,6 +10,9 @@ import {
 } from '../sidebar-nav/sidebar-nav'
 import { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'
 
+type MobileModule = typeof import('./mobile-contextual-sidebar')
+type MobileLoad = MobileModule | { error: unknown }
+
 export type ContextualSidebarRenderContext = {
   /** Whether the slot is being rendered inside the modal mobile sheet. */
   mobile: boolean
@@ -67,6 +69,22 @@ export type ContextualSidebarProps = {
  */
 export function ContextualSidebar(props: ContextualSidebarProps) {
   const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)
+  const [mobileLoad, setMobileLoad] = createSignal<MobileLoad>()
+  let mobileRequested = false
+  // Keep the resolved component mounted across viewport changes for Sheet cleanup.
+  const loadMobile = () => {
+    if (mobileRequested) return
+    mobileRequested = true
+    // Native module caching shares successful loads without keeping a rejected promise.
+    void import('./mobile-contextual-sidebar').then(
+      (module) => {
+        if (mobileRequested) setMobileLoad(module)
+      },
+      (error: unknown) => {
+        if (mobileRequested) setMobileLoad({ error })
+      }
+    )
+  }
   const [mobileMount, setMobileMount] = createSignal<
     { element: HTMLElement; connected: boolean } | undefined
   >()
@@ -81,6 +99,7 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     const media = window.matchMedia('(max-width: 48rem)')
     const updateViewport = () => {
       const wasNarrow = isNarrowViewport()
+      if (media.matches) loadMobile()
       // Close before mounting a modal. A desktop-expanded host state is not
       // mobile intent, and opening the Sheet for one frame can steal focus.
       if (media.matches && !wasNarrow) props.onOpenChange(false)
@@ -90,10 +109,14 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     // A route can mount after a wide-loaded host crosses into mobile. Clear
     // that stale seed, but preserve a sidebar intentionally opened at a
     // narrow boot viewport.
+    if (media.matches) loadMobile()
     if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)
     setIsNarrowViewport(media.matches)
     media.addEventListener('change', updateViewport)
-    onCleanup(() => media.removeEventListener('change', updateViewport))
+    onCleanup(() => {
+      mobileRequested = false
+      media.removeEventListener('change', updateViewport)
+    })
   })
 
   const renderSidebar = (mobile: boolean) => {
@@ -160,21 +183,23 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
   }
 
   return (
-    <Sheet
-      open={isNarrowViewport() && props.open}
-      onOpenChange={(open) => props.onOpenChange(open)}
-    >
+    <>
       <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>
-      <Show when={isNarrowViewport()}>
-        <SheetContent
-          side="start"
-          class={cn('gap-0 p-0', props.sheetClass)}
-          restoreFocusRef={props.restoreFocusRef}
-        >
-          <SheetTitle class="sr-only">{props.title} navigation</SheetTitle>
-          {renderSidebar(true)}
-        </SheetContent>
+      <Show when={mobileLoad()} keyed>
+        {(loaded) => {
+          if ('error' in loaded) throw loaded.error
+          return (
+            <loaded.MobileSidebar
+              open={isNarrowViewport() && props.open}
+              onOpenChange={props.onOpenChange}
+              label={props.label}
+              sheetClass={props.sheetClass}
+              restoreFocusRef={props.restoreFocusRef}
+              renderSidebar={() => renderSidebar(true)}
+            />
+          )
+        }}
       </Show>
-    </Sheet>
+    </>
   )
 }

package/dist/r/src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx

@@ -0,0 +1,28 @@
+import type { Accessor, JSX } from 'solid-js'
+import { cn } from '../../../lib/utils'
+import { Sheet, SheetContent } from '../../ui/sheet'
+
+export type MobileContextualSidebarProps = {
+  open: boolean
+  onOpenChange(open: boolean): void
+  label: string
+  sheetClass?: string
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  renderSidebar(): JSX.Element
+}
+
+/** Sheet wrappers are loaded only when a contextual sidebar enters mobile mode. */
+export function MobileSidebar(props: MobileContextualSidebarProps) {
+  return (
+    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
+      <SheetContent
+        side="start"
+        aria-label={props.label}
+        class={cn('gap-0 p-0', props.sheetClass)}
+        restoreFocusRef={props.restoreFocusRef}
+      >
+        {props.renderSidebar()}
+      </SheetContent>
+    </Sheet>
+  )
+}

package/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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/dist/r/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'
 

package/package.json

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

package/registry.json

@@ -61,7 +61,6 @@
         "@kobalte/core@^0.13.14"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -569,7 +568,6 @@
         "lucide-solid@^1.51.0"
       ],
       "registryDependencies": [
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1213,7 +1211,6 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/dialog",
-        "@adea-ai/ui/typography",
         "lib"
       ],
       "files": [
@@ -1609,6 +1606,11 @@
           "path": "src/components/layout/contextual-sidebar/index.ts",
           "type": "registry:ui",
           "target": "components/layout/contextual-sidebar/index.ts"
+        },
+        {
+          "path": "src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx"
         }
       ]
     },

package/src/components/layout/contextual-sidebar/contextual-sidebar.tsx

@@ -1,7 +1,6 @@
 import type { Accessor, JSX } from 'solid-js'
 import { Show, createSignal, createUniqueId, onCleanup, onMount } from 'solid-js'
 import { cn } from '#lib/utils'
-import { Sheet, SheetContent, SheetTitle } from '../../ui/sheet'
 import {
   SidebarNav,
   SidebarNavContent,
@@ -11,6 +10,9 @@ import {
 } from '../sidebar-nav/sidebar-nav'
 import { PixelResizeHandle } from '../pixel-resize-handle/pixel-resize-handle'
 
+type MobileModule = typeof import('./mobile-contextual-sidebar')
+type MobileLoad = MobileModule | { error: unknown }
+
 export type ContextualSidebarRenderContext = {
   /** Whether the slot is being rendered inside the modal mobile sheet. */
   mobile: boolean
@@ -67,6 +69,22 @@ export type ContextualSidebarProps = {
  */
 export function ContextualSidebar(props: ContextualSidebarProps) {
   const [isNarrowViewport, setIsNarrowViewport] = createSignal(false)
+  const [mobileLoad, setMobileLoad] = createSignal<MobileLoad>()
+  let mobileRequested = false
+  // Keep the resolved component mounted across viewport changes for Sheet cleanup.
+  const loadMobile = () => {
+    if (mobileRequested) return
+    mobileRequested = true
+    // Native module caching shares successful loads without keeping a rejected promise.
+    void import('./mobile-contextual-sidebar').then(
+      (module) => {
+        if (mobileRequested) setMobileLoad(module)
+      },
+      (error: unknown) => {
+        if (mobileRequested) setMobileLoad({ error })
+      }
+    )
+  }
   const [mobileMount, setMobileMount] = createSignal<
     { element: HTMLElement; connected: boolean } | undefined
   >()
@@ -81,6 +99,7 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     const media = window.matchMedia('(max-width: 48rem)')
     const updateViewport = () => {
       const wasNarrow = isNarrowViewport()
+      if (media.matches) loadMobile()
       // Close before mounting a modal. A desktop-expanded host state is not
       // mobile intent, and opening the Sheet for one frame can steal focus.
       if (media.matches && !wasNarrow) props.onOpenChange(false)
@@ -90,10 +109,14 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
     // A route can mount after a wide-loaded host crosses into mobile. Clear
     // that stale seed, but preserve a sidebar intentionally opened at a
     // narrow boot viewport.
+    if (media.matches) loadMobile()
     if (media.matches && props.wideViewportAtLoad && props.open) props.onOpenChange(false)
     setIsNarrowViewport(media.matches)
     media.addEventListener('change', updateViewport)
-    onCleanup(() => media.removeEventListener('change', updateViewport))
+    onCleanup(() => {
+      mobileRequested = false
+      media.removeEventListener('change', updateViewport)
+    })
   })
 
   const renderSidebar = (mobile: boolean) => {
@@ -160,21 +183,23 @@ export function ContextualSidebar(props: ContextualSidebarProps) {
   }
 
   return (
-    <Sheet
-      open={isNarrowViewport() && props.open}
-      onOpenChange={(open) => props.onOpenChange(open)}
-    >
+    <>
       <Show when={!isNarrowViewport()}>{(_wide) => renderSidebar(false)}</Show>
-      <Show when={isNarrowViewport()}>
-        <SheetContent
-          side="start"
-          class={cn('gap-0 p-0', props.sheetClass)}
-          restoreFocusRef={props.restoreFocusRef}
-        >
-          <SheetTitle class="sr-only">{props.title} navigation</SheetTitle>
-          {renderSidebar(true)}
-        </SheetContent>
+      <Show when={mobileLoad()} keyed>
+        {(loaded) => {
+          if ('error' in loaded) throw loaded.error
+          return (
+            <loaded.MobileSidebar
+              open={isNarrowViewport() && props.open}
+              onOpenChange={props.onOpenChange}
+              label={props.label}
+              sheetClass={props.sheetClass}
+              restoreFocusRef={props.restoreFocusRef}
+              renderSidebar={() => renderSidebar(true)}
+            />
+          )
+        }}
       </Show>
-    </Sheet>
+    </>
   )
 }

package/src/components/layout/contextual-sidebar/mobile-contextual-sidebar.tsx

@@ -0,0 +1,28 @@
+import type { Accessor, JSX } from 'solid-js'
+import { cn } from '#lib/utils'
+import { Sheet, SheetContent } from '../../ui/sheet'
+
+export type MobileContextualSidebarProps = {
+  open: boolean
+  onOpenChange(open: boolean): void
+  label: string
+  sheetClass?: string
+  restoreFocusRef?: Accessor<HTMLElement | undefined>
+  renderSidebar(): JSX.Element
+}
+
+/** Sheet wrappers are loaded only when a contextual sidebar enters mobile mode. */
+export function MobileSidebar(props: MobileContextualSidebarProps) {
+  return (
+    <Sheet open={props.open} onOpenChange={props.onOpenChange}>
+      <SheetContent
+        side="start"
+        aria-label={props.label}
+        class={cn('gap-0 p-0', props.sheetClass)}
+        restoreFocusRef={props.restoreFocusRef}
+      >
+        {props.renderSidebar()}
+      </SheetContent>
+    </Sheet>
+  )
+}