@adea-ai/ui 0.22.2 → 0.23.0

package/src/components/scene-settings.tsx

@@ -1,8 +1,7 @@
-'use client'
+import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-solid'
+import { createEffect, createSignal, Show, type JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
 
-import { createPortal } from 'react-dom'
-import { useEffect, useState, type ReactNode } from 'react'
-import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-react'
 import { AccountDrawer } from './account-drawer'
 import { Button } from '#components/ui/button'
 
@@ -22,7 +21,7 @@ export type SceneSettingsProps = {
   accountLabel?: string
   accountAuthenticated?: boolean
   accountBusy?: boolean
-  accountMusicControl?: ReactNode
+  accountMusicControl?: JSX.Element
   onAccountSignIn?: () => void
   onAccountSignOut?: () => void
   showAccountDrawer?: boolean
@@ -37,59 +36,39 @@ export type SceneSettingsProps = {
   onSceneEditorChange?: (value: boolean) => void
 }
 
-function usePortalTarget(targetId?: string) {
-  const [target, setTarget] = useState<HTMLElement | null>(null)
+function usePortalTarget(targetId: () => string | undefined) {
+  const [target, setTarget] = createSignal<HTMLElement | null>(null)
 
-  useEffect(() => {
-    setTarget(targetId ? document.getElementById(targetId) : null)
-  }, [targetId])
+  createEffect(() => {
+    const id = targetId()
+    setTarget(id ? document.getElementById(id) : null)
+  })
 
   return target
 }
 
-function renderInTarget(content: ReactNode, target: HTMLElement | null) {
-  return target ? createPortal(content, target) : content
+function renderInTarget(content: JSX.Element, target: HTMLElement | null) {
+  return target ? <Portal mount={target}>{content}</Portal> : content
 }
 
 /** Compact scene controls shared by the HQ shell and other scene hosts. */
-export function SceneSettings({
-  cameraViewMode,
-  onCameraViewModeChange,
-  allowCameraViewModeChange = true,
-  characterDesignerEnabled,
-  onCharacterDesignerChange,
-  characterDesignerTargetId,
-  onOpenRoomDesigner,
-  accountTargetId,
-  accountLabel,
-  accountAuthenticated,
-  accountBusy,
-  accountMusicControl,
-  onAccountSignIn,
-  onAccountSignOut,
-  showAccountDrawer = true,
-  cameraTargetId,
-  roomDesignerTargetId,
-  sceneEditorTargetId,
-  sceneEditorEnabled,
-  onSceneEditorChange,
-}: SceneSettingsProps) {
-  const cameraTarget = usePortalTarget(cameraTargetId)
-  const characterDesignerTarget = usePortalTarget(characterDesignerTargetId)
-  const roomDesignerTarget = usePortalTarget(roomDesignerTargetId)
-  const sceneEditorTarget = usePortalTarget(sceneEditorTargetId)
+export function SceneSettings(props: SceneSettingsProps) {
+  const cameraTarget = usePortalTarget(() => props.cameraTargetId)
+  const characterDesignerTarget = usePortalTarget(() => props.characterDesignerTargetId)
+  const roomDesignerTarget = usePortalTarget(() => props.roomDesignerTargetId)
+  const sceneEditorTarget = usePortalTarget(() => props.sceneEditorTargetId)
 
   const cameraControl = (
-    <div className="workspace-camera-control" role="group" aria-label="Camera view">
+    <div class="workspace-camera-control" role="group" aria-label="Camera view">
       <Button
         type="button"
         size="sm"
-        variant={cameraViewMode === 'perspective' ? 'default' : 'outline'}
-        className="workspace-camera-button"
+        variant={props.cameraViewMode === 'perspective' ? 'default' : 'outline'}
+        class="workspace-camera-button"
         aria-label="Perspective camera"
         title="Perspective camera"
-        aria-pressed={cameraViewMode === 'perspective'}
-        onClick={() => onCameraViewModeChange('perspective')}
+        aria-pressed={props.cameraViewMode === 'perspective'}
+        onClick={() => props.onCameraViewModeChange('perspective')}
       >
         <Camera aria-hidden="true" />
         Perspective
@@ -97,12 +76,12 @@ export function SceneSettings({
       <Button
         type="button"
         size="sm"
-        variant={cameraViewMode === 'orthographic' ? 'default' : 'outline'}
-        className="workspace-camera-button"
+        variant={props.cameraViewMode === 'orthographic' ? 'default' : 'outline'}
+        class="workspace-camera-button"
         aria-label="Top-down camera"
         title="Top-down camera"
-        aria-pressed={cameraViewMode === 'orthographic'}
-        onClick={() => onCameraViewModeChange('orthographic')}
+        aria-pressed={props.cameraViewMode === 'orthographic'}
+        onClick={() => props.onCameraViewModeChange('orthographic')}
       >
         <Focus aria-hidden="true" />
         Top-down
@@ -113,16 +92,20 @@ export function SceneSettings({
   const characterDesignerControl = (
     <Button
       type="button"
-      variant={characterDesignerEnabled ? 'default' : 'outline'}
+      variant={props.characterDesignerEnabled ? 'default' : 'outline'}
       size="sm"
       aria-haspopup="dialog"
-      aria-label={characterDesignerEnabled ? 'Close character designer' : 'Open character designer'}
-      title={characterDesignerEnabled ? 'Close character designer' : 'Open character designer'}
-      aria-pressed={characterDesignerEnabled}
-      onClick={() => onCharacterDesignerChange?.(!characterDesignerEnabled)}
+      aria-label={
+        props.characterDesignerEnabled ? 'Close character designer' : 'Open character designer'
+      }
+      title={
+        props.characterDesignerEnabled ? 'Close character designer' : 'Open character designer'
+      }
+      aria-pressed={props.characterDesignerEnabled}
+      onClick={() => props.onCharacterDesignerChange?.(!props.characterDesignerEnabled)}
     >
-      <UserRoundPen className="size-4" aria-hidden="true" />
-      <span className="workspace-character-designer-label">Character</span>
+      <UserRoundPen class="size-4" aria-hidden="true" />
+      <span class="workspace-character-designer-label">Character</span>
     </Button>
   )
 
@@ -134,69 +117,83 @@ export function SceneSettings({
       aria-haspopup="dialog"
       aria-label="Open room designer"
       title="Open room designer"
-      onClick={onOpenRoomDesigner}
+      onClick={() => props.onOpenRoomDesigner?.()}
     >
-      <Grid3X3 className="size-4" aria-hidden="true" />
-      <span className="workspace-room-designer-label">Room designer</span>
+      <Grid3X3 class="size-4" aria-hidden="true" />
+      <span class="workspace-room-designer-label">Room designer</span>
     </Button>
   )
 
   const sceneEditorControl = (
     <Button
       type="button"
-      variant={sceneEditorEnabled ? 'default' : 'outline'}
+      variant={props.sceneEditorEnabled ? 'default' : 'outline'}
       size="sm"
       aria-haspopup="dialog"
-      aria-label={sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
-      title={sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
-      aria-pressed={sceneEditorEnabled}
-      onClick={() => onSceneEditorChange?.(!sceneEditorEnabled)}
+      aria-label={props.sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
+      title={props.sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
+      aria-pressed={props.sceneEditorEnabled}
+      onClick={() => props.onSceneEditorChange?.(!props.sceneEditorEnabled)}
     >
-      <Box className="size-4" aria-hidden="true" />
-      <span className="workspace-scene-editor-label">Scene editor</span>
+      <Box class="size-4" aria-hidden="true" />
+      <span class="workspace-scene-editor-label">Scene editor</span>
     </Button>
   )
 
+  const showCharacterDesignerControl = () =>
+    props.characterDesignerEnabled != null &&
+    !props.characterDesignerEnabled &&
+    Boolean(props.onCharacterDesignerChange)
+
+  const showRoomDesignerControl = () =>
+    Boolean(props.onOpenRoomDesigner) && props.cameraViewMode === 'orthographic'
+
+  const showSceneEditorControl = () =>
+    props.sceneEditorEnabled != null &&
+    !props.sceneEditorEnabled &&
+    Boolean(props.onSceneEditorChange) &&
+    props.cameraViewMode === 'perspective'
+
   return (
     <>
-      {showAccountDrawer ? (
+      <Show when={props.showAccountDrawer ?? true}>
         <AccountDrawer
-          accountLabel={accountLabel}
-          authenticated={accountAuthenticated}
-          busy={accountBusy}
-          musicControl={accountMusicControl}
-          triggerTargetId={accountTargetId}
-          onSignIn={onAccountSignIn}
-          onSignOut={onAccountSignOut}
+          accountLabel={props.accountLabel}
+          authenticated={props.accountAuthenticated}
+          busy={props.accountBusy}
+          musicControl={props.accountMusicControl}
+          triggerTargetId={props.accountTargetId}
+          onSignIn={props.onAccountSignIn}
+          onSignOut={props.onAccountSignOut}
         />
-      ) : null}
-      {allowCameraViewModeChange ? renderInTarget(cameraControl, cameraTarget) : null}
-      {characterDesignerEnabled != null &&
-      !characterDesignerEnabled &&
-      onCharacterDesignerChange ? (
-        characterDesignerTarget ? (
-          createPortal(characterDesignerControl, characterDesignerTarget)
-        ) : (
-          <div className="fixed right-4 top-16 z-40">{characterDesignerControl}</div>
-        )
-      ) : null}
-      {onOpenRoomDesigner && cameraViewMode === 'orthographic' ? (
-        roomDesignerTarget ? (
-          createPortal(roomDesignerControl, roomDesignerTarget)
-        ) : (
-          <div className="fixed right-4 top-16 z-40">{roomDesignerControl}</div>
-        )
-      ) : null}
-      {sceneEditorEnabled != null &&
-      !sceneEditorEnabled &&
-      onSceneEditorChange &&
-      cameraViewMode === 'perspective' ? (
-        sceneEditorTarget ? (
-          createPortal(sceneEditorControl, sceneEditorTarget)
-        ) : (
-          <div className="fixed right-4 top-16 z-40">{sceneEditorControl}</div>
-        )
-      ) : null}
+      </Show>
+      <Show when={props.allowCameraViewModeChange ?? true}>
+        {renderInTarget(cameraControl, cameraTarget())}
+      </Show>
+      <Show when={showCharacterDesignerControl()}>
+        <Show
+          when={characterDesignerTarget()}
+          fallback={<div class="fixed right-4 top-16 z-40">{characterDesignerControl}</div>}
+        >
+          {(target) => <Portal mount={target()}>{characterDesignerControl}</Portal>}
+        </Show>
+      </Show>
+      <Show when={showRoomDesignerControl()}>
+        <Show
+          when={roomDesignerTarget()}
+          fallback={<div class="fixed right-4 top-16 z-40">{roomDesignerControl}</div>}
+        >
+          {(target) => <Portal mount={target()}>{roomDesignerControl}</Portal>}
+        </Show>
+      </Show>
+      <Show when={showSceneEditorControl()}>
+        <Show
+          when={sceneEditorTarget()}
+          fallback={<div class="fixed right-4 top-16 z-40">{sceneEditorControl}</div>}
+        >
+          {(target) => <Portal mount={target()}>{sceneEditorControl}</Portal>}
+        </Show>
+      </Show>
     </>
   )
 }

package/src/components/theme-provider.tsx

@@ -1,30 +1,130 @@
-'use client'
+import {
+  createContext,
+  createEffect,
+  createSignal,
+  onCleanup,
+  useContext,
+  type Accessor,
+  type JSX,
+  type ParentProps,
+} from 'solid-js'
 
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-import type { ComponentProps, ReactElement, ReactNode } from 'react'
+export type Theme = 'light' | 'dark' | 'system'
+export type ResolvedTheme = 'light' | 'dark'
 
-// Bun 1.4 can resolve next-themes against a separate React type instance. The
-// runtime component is compatible, but TypeScript then drops `children` from
-// its JSX props. Keep the shared provider's public contract stable by
-// normalizing the third-party component's props at this boundary.
-type CompatibleNextThemesProviderProps = ComponentProps<typeof NextThemesProvider> & {
-  children?: ReactNode
+type ThemeContextValue = {
+  theme: Accessor<Theme>
+  resolvedTheme: Accessor<ResolvedTheme>
+  setTheme: (theme: Theme) => void
 }
 
-const CompatibleNextThemesProvider = NextThemesProvider as unknown as (
-  props: CompatibleNextThemesProviderProps
-) => ReactElement
+const STORAGE_KEY = 'theme'
+const DARK_QUERY = '(prefers-color-scheme: dark)'
+
+const ThemeContext = createContext<ThemeContextValue>()
+
+function readStoredTheme(): Theme {
+  if (typeof window === 'undefined') return 'system'
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    return stored === 'light' || stored === 'dark' || stored === 'system' ? stored : 'system'
+  } catch {
+    return 'system'
+  }
+}
+
+function systemPrefersDark(): boolean {
+  return typeof window !== 'undefined' && window.matchMedia(DARK_QUERY).matches
+}
+
+/**
+ * Applies the resolved theme to the document and suppresses transitions for the
+ * frame that carries the change, so a theme switch cannot animate page-wide.
+ */
+function applyTheme(theme: ResolvedTheme, disableTransitionOnChange: boolean): void {
+  if (typeof document === 'undefined') return
+
+  const root = document.documentElement
+  let restoreTransitions: (() => void) | undefined
+
+  if (disableTransitionOnChange) {
+    const style = document.createElement('style')
+    style.appendChild(document.createTextNode('*{transition:none !important}'))
+    document.head.appendChild(style)
+    void style.offsetHeight
+    restoreTransitions = () => style.remove()
+  }
+
+  root.classList.toggle('dark', theme === 'dark')
+  root.style.colorScheme = theme
+
+  if (restoreTransitions) {
+    requestAnimationFrame(() => requestAnimationFrame(() => restoreTransitions?.()))
+  }
+}
+
+type ThemeProviderProps = ParentProps<{
+  defaultTheme?: Theme
+  disableTransitionOnChange?: boolean
+}>
+
+/**
+ * The shared Solid theme provider. It owns the same contract the previous
+ * provider exposed to the token layer: a `dark` class on the document element
+ * plus a `color-scheme` style, persisted in `localStorage` and defaulting to
+ * the system preference.
+ */
+export function ThemeProvider(props: ThemeProviderProps) {
+  const [theme, setThemeSignal] = createSignal<Theme>(props.defaultTheme ?? readStoredTheme())
+  const [prefersDark, setPrefersDark] = createSignal(systemPrefersDark())
+
+  const resolvedTheme = (): ResolvedTheme => {
+    const current = theme()
+    if (current === 'system') return prefersDark() ? 'dark' : 'light'
+    return current
+  }
+
+  if (typeof window !== 'undefined') {
+    const media = window.matchMedia(DARK_QUERY)
+    const onChange = (event: MediaQueryListEvent) => setPrefersDark(event.matches)
+    media.addEventListener('change', onChange)
+    onCleanup(() => media.removeEventListener('change', onChange))
+  }
+
+  createEffect(() => {
+    applyTheme(resolvedTheme(), props.disableTransitionOnChange ?? true)
+  })
+
+  const setTheme = (next: Theme) => {
+    setThemeSignal(next)
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next)
+    } catch {
+      // A blocked storage API must not break the in-memory theme.
+    }
+  }
 
-/** Shared theme provider used by each Next app in the workspace. */
-export function ThemeProvider({ children }: { children: ReactNode }) {
   return (
-    <CompatibleNextThemesProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      {children}
-    </CompatibleNextThemesProvider>
+    <ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
+      {props.children}
+    </ThemeContext.Provider>
   )
 }
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider.')
+  }
+  return context
+}
+
+/**
+ * Pre-paint theme restore for server-rendered documents. Rendered in the
+ * document head, it applies the stored or system theme before first paint so
+ * hydration never shows the wrong palette.
+ */
+export function ThemeScript(): JSX.Element {
+  const script = `(function(){try{var t=localStorage.getItem('${STORAGE_KEY}')||'system';var d=t==='dark'||(t==='system'&&window.matchMedia('${DARK_QUERY}').matches);var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light'}catch(e){}})();`
+  return <script innerHTML={script} />
+}

package/src/components/theme-toggle.tsx

@@ -1,73 +1,48 @@
-'use client'
+import { Monitor, Moon, Sun } from 'lucide-solid'
+import { For } from 'solid-js'
 
-import { useSyncExternalStore } from 'react'
-import { Monitor, Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
 import { Button } from '#components/ui/button'
 import { cn } from '#lib/utils'
+import { useTheme, type Theme } from './theme-provider'
+
+const THEMES: ReadonlyArray<{ value: Theme; label: string; icon: typeof Sun }> = [
+  { value: 'system', label: 'System theme', icon: Monitor },
+  { value: 'light', label: 'Light theme', icon: Sun },
+  { value: 'dark', label: 'Dark theme', icon: Moon },
+]
 
 /**
- * Compact sun/moon theme selector. Wired to the next-themes provider so the
+ * Compact sun/moon theme selector. Wired to the shared theme provider so the
  * choice persists across the app (localStorage) and applies to every scene.
  */
-export function ThemeToggle({ className }: { className?: string }) {
+export function ThemeToggle(props: { class?: string }) {
   const { theme, setTheme } = useTheme()
-  const mounted = useSyncExternalStore(
-    () => () => undefined,
-    () => true,
-    () => false
-  )
-
-  // next-themes resolves the saved/system theme after mount. Use the stable
-  // light presentation for both SSR and the first client render so the
-  // aria/class attributes cannot mismatch during hydration.
-  const selectedTheme = mounted ? theme : 'system'
 
   return (
     <div
-      className={cn(
+      class={cn(
         'inline-flex items-center gap-2 rounded-full border border-input bg-background p-2',
-        className
+        props.class
       )}
       role="radiogroup"
       aria-label="Theme"
     >
-      <Button
-        type="button"
-        role="radio"
-        aria-checked={selectedTheme === 'system'}
-        aria-label="System theme"
-        variant={selectedTheme === 'system' ? 'default' : 'ghost'}
-        size="icon-sm"
-        onClick={() => setTheme('system')}
-        className="rounded-full"
-      >
-        <Monitor className="size-4" aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        role="radio"
-        aria-checked={selectedTheme === 'light'}
-        aria-label="Light theme"
-        variant={selectedTheme === 'light' ? 'default' : 'ghost'}
-        size="icon-sm"
-        onClick={() => setTheme('light')}
-        className="rounded-full"
-      >
-        <Sun className="size-4" aria-hidden="true" />
-      </Button>
-      <Button
-        type="button"
-        role="radio"
-        aria-checked={selectedTheme === 'dark'}
-        aria-label="Dark theme"
-        variant={selectedTheme === 'dark' ? 'default' : 'ghost'}
-        size="icon-sm"
-        onClick={() => setTheme('dark')}
-        className="rounded-full"
-      >
-        <Moon className="size-4" aria-hidden="true" />
-      </Button>
+      <For each={THEMES}>
+        {(option) => (
+          <Button
+            type="button"
+            role="radio"
+            aria-checked={theme() === option.value}
+            aria-label={option.label}
+            variant={theme() === option.value ? 'default' : 'ghost'}
+            size="icon-sm"
+            onClick={() => setTheme(option.value)}
+            class="rounded-full"
+          >
+            <option.icon class="size-4" aria-hidden="true" />
+          </Button>
+        )}
+      </For>
     </div>
   )
 }

package/src/components/ui/badge.tsx

@@ -1,6 +1,5 @@
-import { mergeProps } from '@base-ui/react/merge-props'
-import { useRender } from '@base-ui/react/use-render'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
@@ -24,26 +23,18 @@ const badgeVariants = cva(
   }
 )
 
-function Badge({
-  className,
-  variant = 'default',
-  render,
-  ...props
-}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
-  return useRender({
-    defaultTagName: 'span',
-    props: mergeProps<'span'>(
-      {
-        className: cn(badgeVariants({ variant }), className),
-      },
-      props
-    ),
-    render,
-    state: {
-      slot: 'badge',
-      variant,
-    },
-  })
+type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVariants>
+
+function Badge(props: BadgeProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant'])
+  return (
+    <span
+      data-slot="badge"
+      data-variant={local.variant ?? 'default'}
+      class={cn(badgeVariants({ variant: local.variant }), local.class)}
+      {...rest}
+    />
+  )
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants, type BadgeProps }

package/src/components/ui/button.tsx

@@ -1,5 +1,5 @@
-import { Button as ButtonPrimitive } from '@base-ui/react/button'
 import { cva, type VariantProps } from 'class-variance-authority'
+import { splitProps, type ComponentProps } from 'solid-js'
 
 import { cn } from '#lib/utils'
 
@@ -42,19 +42,17 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
-  className,
-  variant = 'default',
-  size = 'default',
-  ...props
-}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+type ButtonProps = ComponentProps<'button'> & VariantProps<typeof buttonVariants>
+
+function Button(props: ButtonProps) {
+  const [local, rest] = splitProps(props, ['class', 'variant', 'size'])
   return (
-    <ButtonPrimitive
+    <button
       data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
+      class={cn(buttonVariants({ variant: local.variant, size: local.size }), local.class)}
+      {...rest}
     />
   )
 }
 
-export { Button, buttonVariants }
+export { Button, buttonVariants, type ButtonProps }

package/src/components/ui/card.tsx

@@ -1,18 +1,21 @@
-import type { HTMLAttributes } from 'react'
+import { splitProps, type ComponentProps } from 'solid-js'
+
 import { cn } from '#lib/utils'
 
-function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+function Card(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
   return (
     <div
       data-slot="card"
-      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
-      {...props}
+      class={cn('rounded-xl border bg-card text-card-foreground shadow-sm', local.class)}
+      {...rest}
     />
   )
 }
 
-function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return <div data-slot="card-content" className={cn('p-4', className)} {...props} />
+function CardContent(props: ComponentProps<'div'>) {
+  const [local, rest] = splitProps(props, ['class'])
+  return <div data-slot="card-content" class={cn('p-4', local.class)} {...rest} />
 }
 
 export { Card, CardContent }