@adea-ai/ui 0.122.3 → 0.123.1

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

package/dist/r/theming.json

@@ -4,7 +4,7 @@
   "title": "Theming",
   "description": "",
   "dependencies": [
-    "@adea-ai/themes@^0.9.10",
+    "@adea-ai/themes@^0.10.4",
     "@kobalte/core@^0.13.14",
     "lucide-solid@^1.51.0"
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.122.3",
+  "version": "0.123.1",
   "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",
@@ -129,7 +129,7 @@
     "check:packed-paste-model": "node scripts/check-packed-paste-model.mjs"
   },
   "dependencies": {
-    "@adea-ai/themes": "^0.9.10",
+    "@adea-ai/themes": "^0.10.4",
     "@corvu/calendar": "^0.1.2",
     "@corvu/drawer": "^0.2.4",
     "@corvu/otp-field": "^0.1.4",

package/registry.json

@@ -1811,6 +1811,7 @@
       ],
       "registryDependencies": [
         "@adea-ai/ui/action-button",
+        "@adea-ai/ui/button",
         "lib"
       ],
       "files": [
@@ -1834,6 +1835,31 @@
           "type": "registry:ui",
           "target": "components/layout/split-layout/model.ts"
         },
+        {
+          "path": "src/components/layout/split-layout/resize-controller-core-retry.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/resize-controller-core-retry.tsx"
+        },
+        {
+          "path": "src/components/layout/split-layout/resize-controller-core.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/resize-controller-core.tsx"
+        },
+        {
+          "path": "src/components/layout/split-layout/resize-controller-retry-2.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/resize-controller-retry-2.tsx"
+        },
+        {
+          "path": "src/components/layout/split-layout/resize-controller-retry.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/resize-controller-retry.tsx"
+        },
+        {
+          "path": "src/components/layout/split-layout/resize-controller.tsx",
+          "type": "registry:ui",
+          "target": "components/layout/split-layout/resize-controller.tsx"
+        },
         {
           "path": "src/components/layout/split-layout/split-layout.tsx",
           "type": "registry:ui",
@@ -1998,7 +2024,7 @@
       "title": "Appearance Editor",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.9.10",
+        "@adea-ai/themes@^0.10.4",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.51.0"
       ],
@@ -2477,7 +2503,7 @@
       "title": "Theming",
       "description": "",
       "dependencies": [
-        "@adea-ai/themes@^0.9.10",
+        "@adea-ai/themes@^0.10.4",
         "@kobalte/core@^0.13.14",
         "lucide-solid@^1.51.0"
       ],
@@ -2592,7 +2618,7 @@
       "title": "Class-name and token helpers",
       "description": "The private helpers the components import: the class-name merge, the variant recipes, the token manifest and the theme bridge. Installed automatically as a peer of any component that needs it.",
       "dependencies": [
-        "@adea-ai/themes@^0.9.10",
+        "@adea-ai/themes@^0.10.4",
         "class-variance-authority@^0.7.1",
         "cn@^0.4.0"
       ],

package/src/components/layout/split-layout/resize-controller-core-retry.tsx

@@ -0,0 +1,66 @@
+import Resizable from '@corvu/resizable'
+import { type Accessor, type JSX } from 'solid-js'
+import {
+  listLeaves,
+  MIN_SPLIT_RATIO,
+  MAX_SPLIT_RATIO,
+  type SplitLayoutBranch,
+  type SplitLayoutLeaf,
+} from './model'
+
+export type SplitLayoutResizeControllerProps<L extends SplitLayoutLeaf> = {
+  branch: Accessor<SplitLayoutBranch<L>>
+  rect: Accessor<JSX.CSSProperties>
+  domId: (id: string) => string
+  root: () => HTMLDivElement | undefined
+  labelForSeparator?: (branch: SplitLayoutBranch<L>) => string
+  onResize: (splitId: string, ratio: number) => void
+}
+
+/** Corvu stays behind the first real split while the pane owners remain mounted. */
+export default function SplitLayoutResizeController<L extends SplitLayoutLeaf>(
+  props: SplitLayoutResizeControllerProps<L>
+) {
+  const id = () => props.branch().id
+  return (
+    <Resizable
+      orientation={props.branch().direction === 'row' ? 'horizontal' : 'vertical'}
+      sizes={[props.branch().ratio, 1 - props.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.
+        const root = props.root()
+        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] - props.branch().ratio) > 0.000001)
+          props.onResize(id(), sizes[0])
+      }}
+      style={props.rect()}
+      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?.(props.branch()) ??
+          (props.branch().direction === 'row' ? 'Resize pane columns' : 'Resize pane rows')
+        }
+        aria-orientation={props.branch().direction === 'row' ? 'vertical' : 'horizontal'}
+        aria-controls={listLeaves(props.branch())
+          .map((leaf) => props.domId(leaf.id))
+          .join(' ')}
+        aria-valuemin={10}
+        aria-valuemax={90}
+        aria-valuenow={Math.round(props.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>
+  )
+}

package/src/components/layout/split-layout/resize-controller-core.tsx

@@ -0,0 +1,66 @@
+import Resizable from '@corvu/resizable'
+import { type Accessor, type JSX } from 'solid-js'
+import {
+  listLeaves,
+  MIN_SPLIT_RATIO,
+  MAX_SPLIT_RATIO,
+  type SplitLayoutBranch,
+  type SplitLayoutLeaf,
+} from './model'
+
+export type SplitLayoutResizeControllerProps<L extends SplitLayoutLeaf> = {
+  branch: Accessor<SplitLayoutBranch<L>>
+  rect: Accessor<JSX.CSSProperties>
+  domId: (id: string) => string
+  root: () => HTMLDivElement | undefined
+  labelForSeparator?: (branch: SplitLayoutBranch<L>) => string
+  onResize: (splitId: string, ratio: number) => void
+}
+
+/** Corvu stays behind the first real split while the pane owners remain mounted. */
+export default function SplitLayoutResizeController<L extends SplitLayoutLeaf>(
+  props: SplitLayoutResizeControllerProps<L>
+) {
+  const id = () => props.branch().id
+  return (
+    <Resizable
+      orientation={props.branch().direction === 'row' ? 'horizontal' : 'vertical'}
+      sizes={[props.branch().ratio, 1 - props.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.
+        const root = props.root()
+        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] - props.branch().ratio) > 0.000001)
+          props.onResize(id(), sizes[0])
+      }}
+      style={props.rect()}
+      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?.(props.branch()) ??
+          (props.branch().direction === 'row' ? 'Resize pane columns' : 'Resize pane rows')
+        }
+        aria-orientation={props.branch().direction === 'row' ? 'vertical' : 'horizontal'}
+        aria-controls={listLeaves(props.branch())
+          .map((leaf) => props.domId(leaf.id))
+          .join(' ')}
+        aria-valuemin={10}
+        aria-valuemax={90}
+        aria-valuenow={Math.round(props.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>
+  )
+}

package/src/components/layout/split-layout/resize-controller-retry-2.tsx

@@ -0,0 +1,2 @@
+/** Independent module entrypoint to recover from a cached failed primary core import. */
+export { default } from './resize-controller-core-retry'

package/src/components/layout/split-layout/resize-controller-retry.tsx

@@ -0,0 +1 @@
+export { default } from './resize-controller-core'

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

@@ -0,0 +1 @@
+export { default } from './resize-controller-core'