@adea-ai/ui 0.109.0 → 0.109.1

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

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'