@adea-ai/ui 0.122.3 → 0.123.1

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

@@ -1,17 +1,21 @@
-import Resizable from '@corvu/resizable'
 import {
   For,
-  createMemo,
+  createEffect,
   createComputed,
+  createMemo,
   createUniqueId,
   createSignal,
+  onMount,
   onCleanup,
   on,
+  Show,
   type Accessor,
   type JSX,
 } from 'solid-js'
+import { Dynamic } from 'solid-js/web'
 import { X, GripVertical } from 'lucide-solid'
 import { ActionButton } from '../../composites/action-button'
+import { Button } from '../../ui/button'
 import { cn } from '#lib/utils'
 import { computeLayoutFrames, type LayoutRect } from './geometry'
 import { paneDropIntent, type PaneDropIntent } from './drop'
@@ -21,12 +25,16 @@ const DRAG_PREVIEW_MAX_WIDTH = 384
 const DRAG_PREVIEW_MAX_HEIGHT = 256
 import {
   listLeaves,
-  MIN_SPLIT_RATIO,
-  MAX_SPLIT_RATIO,
   type SplitLayoutBranch,
   type SplitLayoutLeaf,
   type SplitLayoutState,
 } from './model'
+import type { SplitLayoutResizeControllerProps } from './resize-controller-core'
+
+type ResizeController<L extends SplitLayoutLeaf> = (
+  props: SplitLayoutResizeControllerProps<L>
+) => JSX.Element
+type ResizeControllerState<L extends SplitLayoutLeaf> = ResizeController<L> | false | 'error'
 
 export type SplitLayoutProps<L extends SplitLayoutLeaf> = {
   state: SplitLayoutState<L>
@@ -59,6 +67,16 @@ function rectStyle(rect: LayoutRect): JSX.CSSProperties {
     height: `${rect.height * 100}%`,
   }
 }
+function separatorPlaceholderStyle(branch: SplitLayoutBranch, rect: LayoutRect): JSX.CSSProperties {
+  const horizontal = branch.direction === 'row'
+  return {
+    left: `${(rect.x + (horizontal ? rect.width * branch.ratio : 0)) * 100}%`,
+    top: `${(rect.y + (horizontal ? 0 : rect.height * branch.ratio)) * 100}%`,
+    width: horizontal ? '1px' : `${rect.width * 100}%`,
+    height: horizontal ? `${rect.height * 100}%` : '1px',
+    transform: horizontal ? 'translateX(-50%)' : 'translateY(-50%)',
+  }
+}
 function dragPreviewPlaceholder(source: HTMLElement, message: string) {
   const placeholder = document.createElement('div')
   placeholder.className = cn(
@@ -171,14 +189,40 @@ function cloneDragPreviewNode(source: Node): Node | undefined {
 export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L>) {
   let root: HTMLDivElement | undefined
   let pendingFrame: number | undefined
+  let disposed = false
+  let resizeLoadGeneration = 0
+  let retryWithAlternateImport = false
+  let alternateImportAttempts = 0
+  let focusHandleAfterRetry = false
+  let focusRecoveryButtonAfterError = false
+  let focusRestoreEpoch = 0
+  let focusEpoch = 0
+  let pendingFocusFrame: number | undefined
   const refs = new Map<string, HTMLElement>()
   const domIds = new Map<string, string>()
   const prefix = createUniqueId()
+  const resizeReloadWarningId = `${prefix}-resize-reload-warning`
   let nextDomId = 0
   let nextDragId = 0
   let dragPreview: HTMLElement | undefined
   const [drag, setDrag] = createSignal<{ id: string; token: string }>()
   const [drop, setDrop] = createSignal<{ id: string; intent: PaneDropIntent }>()
+  const [resizeController, setResizeController] = createSignal<ResizeControllerState<L>>()
+  const cancelPendingFocusRestore = () => {
+    if (pendingFocusFrame !== undefined) cancelAnimationFrame(pendingFocusFrame)
+    pendingFocusFrame = undefined
+  }
+  const trackFocusChange = (event: FocusEvent) => {
+    if (event.target === document.body) return
+    focusEpoch += 1
+    focusHandleAfterRetry = false
+    focusRecoveryButtonAfterError = false
+    cancelPendingFocusRestore()
+  }
+  onMount(() => {
+    document.addEventListener('focusin', trackFocusChange)
+    onCleanup(() => document.removeEventListener('focusin', trackFocusChange))
+  })
   const clearDrag = () => {
     setDrag(undefined)
     setDrop(undefined)
@@ -221,6 +265,79 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
       frame.node.kind === 'split' ? [frame.node] : []
     )
   )
+  createEffect(() => {
+    if (branches().length === 0) {
+      resizeLoadGeneration += 1
+      focusHandleAfterRetry = false
+      focusRecoveryButtonAfterError = false
+      cancelPendingFocusRestore()
+      // Keep a loaded controller so a later split does not re-import a facade
+      // that may have failed before recovery. Clear only transient UI state.
+      if (resizeController() === false || resizeController() === 'error')
+        setResizeController(undefined)
+      return
+    }
+    if (resizeController() !== undefined) return
+    const retry = retryWithAlternateImport
+    const generation = ++resizeLoadGeneration
+    setResizeController(false)
+    const controllerImport = retry
+      ? alternateImportAttempts++ === 0
+        ? import('./resize-controller-retry')
+        : import('./resize-controller-retry-2')
+      : import('./resize-controller')
+    void controllerImport.then(
+      ({ default: Controller }) => {
+        if (disposed || generation !== resizeLoadGeneration || branches().length === 0) return
+        const shouldFocusHandle = focusHandleAfterRetry && focusEpoch === focusRestoreEpoch
+        focusHandleAfterRetry = false
+        focusRecoveryButtonAfterError = false
+        retryWithAlternateImport = false
+        alternateImportAttempts = 0
+        setResizeController(() => Controller)
+        if (shouldFocusHandle)
+          pendingFocusFrame = requestAnimationFrame(() => {
+            pendingFocusFrame = undefined
+            if (
+              disposed ||
+              generation !== resizeLoadGeneration ||
+              branches().length === 0 ||
+              focusEpoch !== focusRestoreEpoch
+            )
+              return
+            const currentFocus = root?.ownerDocument.activeElement
+            if (currentFocus && currentFocus !== root?.ownerDocument.body && currentFocus !== root)
+              return
+            root?.querySelector<HTMLElement>('[data-corvu-resizable-handle]')?.focus({
+              preventScroll: true,
+            })
+          })
+      },
+      () => {
+        // A rejected dynamic import can remain cached under its specifier.
+        // The next split must start from the alternate module entry as well.
+        retryWithAlternateImport = true
+        if (!disposed && generation === resizeLoadGeneration && branches().length > 0) {
+          setResizeController('error')
+          const shouldFocusRetry = focusRecoveryButtonAfterError && focusEpoch === focusRestoreEpoch
+          if (shouldFocusRetry)
+            pendingFocusFrame = requestAnimationFrame(() => {
+              pendingFocusFrame = undefined
+              if (
+                disposed ||
+                generation !== resizeLoadGeneration ||
+                branches().length === 0 ||
+                focusEpoch !== focusRestoreEpoch
+              )
+                return
+              root?.querySelector<HTMLButtonElement>('[data-resize-retry]')?.focus({
+                preventScroll: true,
+              })
+            })
+        }
+      }
+    )
+  })
   createComputed(() => {
     const current = drag()
     if (current && (!props.onMove || !leafMap().has(current.id))) clearDrag()
@@ -288,6 +405,10 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
     )
   )
   onCleanup(() => {
+    disposed = true
+    focusHandleAfterRetry = false
+    focusRecoveryButtonAfterError = false
+    cancelPendingFocusRestore()
     if (pendingFrame !== undefined) cancelAnimationFrame(pendingFrame)
     clearDrag()
     refs.clear()
@@ -452,62 +573,89 @@ export function SplitLayout<L extends SplitLayoutLeaf>(props: SplitLayoutProps<L
         }}
       </For>
       <span class="sr-only" role="status">
-        {dropLabel()}
+        {dropLabel() ||
+          (resizeController() === 'error'
+            ? alternateImportAttempts >= 2
+              ? 'Resize controls did not load after repeated attempts. Reloading may discard unsaved pane content.'
+              : 'Resize controls did not load.'
+            : '')}
       </span>
       <For each={branches().map((branch) => branch.id)}>
         {(id) => {
           const initial = branchMap().get(id)!
           const branch: Accessor<SplitLayoutBranch<L>> = () => branchMap().get(id) ?? initial
+          const rect = () => frames().get(id)?.rect ?? { x: 0, y: 0, width: 0, height: 0 }
           return (
-            <Resizable
-              orientation={branch().direction === 'row' ? 'horizontal' : 'vertical'}
-              sizes={[branch().ratio, 1 - branch().ratio]}
-              keyboardDelta={0.05}
-              onSizesChange={(sizes) => {
-                // Corvu also reports panel registration/unregistration while
-                // mounting or disposing a controller. Those incomplete or
-                // hidden-host sizes are not user resize intent.
-                if (!root?.isConnected || root.getClientRects().length === 0) return
-                if (
-                  sizes.length !== 2 ||
-                  sizes.some((size) => !Number.isFinite(size)) ||
-                  Math.abs(sizes[0]! + sizes[1]! - 1) > 0.000001
-                )
-                  return
-                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"
+            <Show
+              when={typeof resizeController() === 'function'}
+              fallback={
+                <div
+                  role="separator"
+                  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)}
+                  aria-disabled="true"
+                  tabIndex={-1}
+                  data-direction={branch().direction}
+                  style={separatorPlaceholderStyle(branch(), rect())}
+                  class="pointer-events-none absolute bg-border"
+                />
+              }
             >
-              <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"
+              <Dynamic
+                component={resizeController() as ResizeController<L>}
+                branch={branch}
+                rect={() => rectStyle(rect())}
+                domId={domId}
+                root={() => root}
+                labelForSeparator={props.labelForSeparator}
+                onResize={props.onResize}
               />
-            </Resizable>
+            </Show>
           )
         }}
       </For>
+      {resizeController() === 'error' ? (
+        <div class="absolute top-2 right-2 z-(--z-menu) flex max-w-sm flex-col items-end gap-2">
+          {alternateImportAttempts >= 2 ? (
+            <p
+              id={resizeReloadWarningId}
+              role="alert"
+              class="rounded-md border bg-background p-2 text-sm shadow-md"
+            >
+              Reloading may discard unsaved pane content.
+            </p>
+          ) : null}
+          <Button
+            variant="outline"
+            size="sm"
+            data-resize-retry
+            aria-describedby={alternateImportAttempts >= 2 ? resizeReloadWarningId : undefined}
+            onClick={(event) => {
+              if (alternateImportAttempts >= 2) {
+                window.location.reload()
+                return
+              }
+              const ownsFocus = document.activeElement === event.currentTarget
+              focusHandleAfterRetry = ownsFocus
+              focusRecoveryButtonAfterError = ownsFocus
+              focusRestoreEpoch = focusEpoch
+              retryWithAlternateImport = true
+              setResizeController(undefined)
+            }}
+          >
+            {alternateImportAttempts >= 2 ? 'Reload page to retry resizing' : 'Retry pane resizing'}
+          </Button>
+        </div>
+      ) : null}
     </div>
   )
 }

package/src/lib/themes.ts

@@ -24,13 +24,13 @@
  *
  * ## The mapping, and the entry that is not a rename
  *
- * {@link ROLE_FOR} maps canonical roles onto this system's variable vocabulary. One
- * entry will trip a reader: the catalogue's `accent` becomes this system's
- * `primary`, because in the shadcn vocabulary `--primary` is the action colour — the
- * fill of a primary button, the thing a focus ring is drawn in — while `--accent` is
- * a low-contrast hover wash. The catalogue's `accent` is the former, so it goes to
- * `--primary`, and `--accent` is filled from `surfaceHover`, which is what shadcn
- * components actually use it for.
+ * The package-owned `shadcnVariables` adapter maps canonical roles onto this
+ * system's vocabulary. One entry will trip a reader: the catalogue's `accent`
+ * becomes this system's `primary`, because in the shadcn vocabulary `--primary` is
+ * the action colour — the fill of a primary button, the thing a focus ring is drawn
+ * in — while `--accent` is a low-contrast hover wash. The catalogue's `accent` is
+ * the former, so it goes to `--primary`, and `--accent` is filled from
+ * `surfaceHover`, which is what shadcn components actually use it for.
  */
 
 import {
@@ -56,6 +56,7 @@ import {
   type AdeaThemeRecord,
   type ContrastFinding,
 } from '@adea-ai/themes'
+import { shadcnVariables } from '@adea-ai/themes/adapters/shadcn'
 import { isThemeAccentId } from './theme-accents'
 
 export { isThemeAccentId } from './theme-accents'
@@ -106,6 +107,7 @@ export type ThemeColors = {
   sidebarForeground: string
   sidebarAccent: string
   sidebarBorder: string
+  sidebarMutedForeground: string
 }
 
 /** The sixteen ANSI colours a terminal needs, plus its cursor and selection. */
@@ -179,75 +181,56 @@ export type ThemeVariant = {
   provenance: ThemeProvenance
 }
 
-/**
- * Canonical role → this system's `ThemeColors` key.
- *
- * Read by {@link toVariant}. The two derived destructive-action presentation values
- * are intentionally excluded; the shared Themes adapter owns their color math.
- */
-type ThemeRole = Exclude<keyof ThemeColors, 'destructiveAction' | 'destructiveActionForeground'>
-
-const ROLE_FOR: Readonly<Record<ThemeRole, keyof AdeaThemeRecord['colors']>> = {
-  background: 'background',
-  foreground: 'text',
-  card: 'surface',
-  cardForeground: 'text',
-  popover: 'surfaceElevated',
-  popoverForeground: 'text',
-  // Not a rename — see this module's header.
-  primary: 'accent',
-  primaryForeground: 'accentForeground',
-  // shadcn's `secondary` and `muted` are both the first surface rung used as a fill.
-  secondary: 'surface',
-  secondaryForeground: 'text',
-  muted: 'surface',
-  mutedForeground: 'textMuted',
-  // shadcn's `accent` is a hover wash, which is exactly `surfaceHover`.
-  accent: 'surfaceHover',
-  accentForeground: 'text',
-  destructive: 'error',
-  // Overwritten below from the measured pairing; nominal here so the table is total.
-  destructiveForeground: 'error',
-  destructiveSubtle: 'error',
-  success: 'success',
-  successForeground: 'success',
-  successSubtle: 'success',
-  warning: 'warning',
-  warningForeground: 'warning',
-  warningSubtle: 'warning',
-  info: 'info',
-  infoForeground: 'info',
-  infoSubtle: 'info',
-  border: 'border',
-  input: 'border',
-  ring: 'accent',
-  sidebar: 'surface',
-  sidebarForeground: 'text',
-  sidebarAccent: 'surfaceHover',
-  sidebarBorder: 'border',
-}
-
 /** Builds the design system's view of one catalogue entry. */
 function toVariant(theme: AdeaThemeRecord): ThemeVariant {
-  const colors = {} as ThemeColors
-  for (const key of Object.keys(ROLE_FOR) as ThemeRole[]) {
-    colors[key] = theme.colors[ROLE_FOR[key]]
+  const projected = shadcnVariables(theme)
+  const token = (name: string): string => {
+    const value = projected[`--${name}`]
+    if (!value) throw new Error(`${theme.id} has no shared shadcn projection for --${name}`)
+    return value
   }
-  // Keep the semantic foreground paired with the canonical error role. Filled
-  // destructive actions use the distinct projection below so their /90 hover state
-  // remains readable without changing icons, borders, or tinted status surfaces.
-  colors.destructiveForeground = statusForeground(theme, 'error')
-  colors.destructiveSubtle = tint(theme.colors.error, theme.colors.background)
   const destructiveAction = shadcnDestructiveProjection(theme)
-  colors.destructiveAction = destructiveAction.fill
-  colors.destructiveActionForeground = destructiveAction.foreground
-  colors.successForeground = statusForeground(theme, 'success')
-  colors.successSubtle = tint(theme.colors.success, theme.colors.background)
-  colors.warningForeground = statusForeground(theme, 'warning')
-  colors.warningSubtle = tint(theme.colors.warning, theme.colors.background)
-  colors.infoForeground = statusForeground(theme, 'info')
-  colors.infoSubtle = tint(theme.colors.info, theme.colors.background)
-
+  const colors: ThemeColors = {
+    background: token('background'),
+    foreground: token('foreground'),
+    card: token('card'),
+    cardForeground: token('card-foreground'),
+    popover: token('popover'),
+    popoverForeground: token('popover-foreground'),
+    primary: token('primary'),
+    primaryForeground: token('primary-foreground'),
+    secondary: token('secondary'),
+    secondaryForeground: token('secondary-foreground'),
+    muted: token('muted'),
+    mutedForeground: token('muted-foreground'),
+    accent: token('accent'),
+    accentForeground: token('accent-foreground'),
+    // Preserve the UI's semantic error token. The Themes projection uses its
+    // contrast-safe solid-action fill for --destructive; UI keeps that fill in
+    // the separate destructiveAction pair below.
+    destructive: theme.colors.error,
+    destructiveForeground: statusForeground(theme, 'error'),
+    destructiveSubtle: tint(theme.colors.error, theme.colors.background),
+    destructiveAction: destructiveAction.fill,
+    destructiveActionForeground: destructiveAction.foreground,
+    success: token('success'),
+    successForeground: statusForeground(theme, 'success'),
+    successSubtle: tint(theme.colors.success, theme.colors.background),
+    warning: token('warning'),
+    warningForeground: statusForeground(theme, 'warning'),
+    warningSubtle: tint(theme.colors.warning, theme.colors.background),
+    info: token('info'),
+    infoForeground: statusForeground(theme, 'info'),
+    infoSubtle: tint(theme.colors.info, theme.colors.background),
+    border: token('border'),
+    input: token('input'),
+    ring: token('ring'),
+    sidebar: token('sidebar'),
+    sidebarForeground: token('sidebar-foreground'),
+    sidebarAccent: token('sidebar-accent'),
+    sidebarBorder: token('sidebar-border'),
+    sidebarMutedForeground: token('sidebar-muted-foreground'),
+  }
   const syntax = syntaxRoles(theme)
 
   return {
@@ -556,7 +539,7 @@ export function themeCssVariables(theme: ThemeVariant): Record<string, string> {
     '--sidebar-primary': c.primary,
     '--sidebar-primary-foreground': c.primaryForeground,
     '--sidebar-ring': c.ring,
-    '--sidebar-muted-foreground': c.mutedForeground,
+    '--sidebar-muted-foreground': c.sidebarMutedForeground,
     '--surface-sunken': c.muted,
     '--surface-hover': c.accent,
     '--surface-active': c.border,