@adea-ai/ui 0.22.1 → 0.23.0

package/dist/lib/version-notes.js

@@ -1,31 +1,16 @@
-export function plainTextFromMarkdown(markdown) {
-    return markdown
-        .replace(/\r\n/g, '\n')
-        .replace(/!\[([^\]]*)\]\([^)]*\)/g, '$1')
-        .replace(/\[([^\]]+)\]\([^)]*\)/g, '$1')
-        .replace(/^[ \t]*#{1,6}[ \t]*/gm, '')
-        .replace(/^[ \t]*>[ \t]?/gm, '')
-        .replace(/^[ \t]*---+[ \t]*$/gm, '')
-        .replace(/^[ \t]*[-*+][ \t]+/gm, '• ')
-        .replace(/^[ \t]*\d+\.[ \t]+/gm, '')
-        .replace(/```[^\n]*\n?/g, '')
-        .replace(/`([^`]+)`/g, '$1')
-        .replace(/\*\*([^*]+)\*\*/g, '$1')
-        .replace(/__([^_]+)__/g, '$1')
-        .replace(/\*([^*]+)\*/g, '$1')
-        .replace(/_([^_]+)_/g, '$1')
-        .replace(/\n{3,}/g, '\n\n')
-        .trim();
+//#region src/lib/version-notes.ts
+function plainTextFromMarkdown(markdown) {
+	return markdown.replace(/\r\n/g, "\n").replace(/!\[([^\]]*)\]\([^)]*\)/g, "$1").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/^[ \t]*#{1,6}[ \t]*/gm, "").replace(/^[ \t]*>[ \t]?/gm, "").replace(/^[ \t]*---+[ \t]*$/gm, "").replace(/^[ \t]*[-*+][ \t]+/gm, "• ").replace(/^[ \t]*\d+\.[ \t]+/gm, "").replace(/```[^\n]*\n?/g, "").replace(/`([^`]+)`/g, "$1").replace(/\*\*([^*]+)\*\*/g, "$1").replace(/__([^_]+)__/g, "$1").replace(/\*([^*]+)\*/g, "$1").replace(/_([^_]+)_/g, "$1").replace(/\n{3,}/g, "\n\n").trim();
 }
-export function formatReleaseDate(value) {
-    if (!value)
-        return null;
-    const date = new Date(value);
-    if (Number.isNaN(date.getTime()))
-        return value;
-    return new Intl.DateTimeFormat(undefined, {
-        day: 'numeric',
-        month: 'short',
-        year: 'numeric',
-    }).format(date);
+function formatReleaseDate(value) {
+	if (!value) return null;
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return value;
+	return new Intl.DateTimeFormat(void 0, {
+		day: "numeric",
+		month: "short",
+		year: "numeric"
+	}).format(date);
 }
+//#endregion
+export { formatReleaseDate, plainTextFromMarkdown };

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@adea-ai/ui",
-  "version": "0.22.1",
-  "description": "Shared UI kit for Adea: Base UI-backed shadcn primitives, workspace shells, and theme styles.",
+  "version": "0.23.0",
+  "description": "Shared UI kit for Adea: Kobalte/corvu-backed Solid primitives, workspace shells, and theme styles.",
   "keywords": [
-    "base-ui",
     "components",
-    "react",
-    "shadcn",
+    "corvu",
+    "kobalte",
+    "solid",
     "tailwind",
     "workspace"
   ],
@@ -19,7 +19,6 @@
   "files": [
     "dist",
     "src",
-    "components.json",
     "tsconfig.json",
     "README.md"
   ],
@@ -33,16 +32,19 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "solid": "./src/index.tsx",
       "development": "./src/index.tsx",
       "import": "./dist/index.js"
     },
     "./components/*": {
       "types": "./dist/components/*.d.ts",
+      "solid": "./src/components/*",
       "development": "./src/components/*",
       "import": "./dist/components/*.js"
     },
     "./lib/*": {
       "types": "./dist/lib/*.d.ts",
+      "solid": "./src/lib/*",
       "development": "./src/lib/*",
       "import": "./dist/lib/*.js"
     },
@@ -50,27 +52,27 @@
     "./auth-shell.css": "./src/styles/auth-shell.css",
     "./conventional-workspace.css": "./src/styles/conventional-workspace.css",
     "./theme.css": "./src/styles/theme.css",
-    "./workspace-shell.css": "./src/styles/workspace-shell.css"
+    "./workspace-shell.css": "./src/styles/workspace-shell.css",
+    "./base.css": "./src/styles/base.css"
   },
   "scripts": {
     "lint": "oxlint",
-    "build": "tsc -p tsconfig.json",
-    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "build": "vite build && tsc -p tsconfig.json --emitDeclarationOnly",
+    "dev": "vite build --watch",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@base-ui/react": "^1.7.0",
+    "@corvu/drawer": "^0.2.4",
+    "@kobalte/core": "^0.13.14",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "lucide-react": "^1.33.0",
-    "next-themes": "^0.4.6",
-    "react": "19.3.0",
-    "react-dom": "19.3.0",
+    "lucide-solid": "^1.45.0",
+    "solid-js": "^1.9.15",
     "tailwind-merge": "^3.6.0",
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
-    "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.4"
+    "vite": "^8.0.14",
+    "vite-plugin-solid": "^2.11.14"
   }
 }

package/src/components/account-drawer.tsx

@@ -1,9 +1,8 @@
-'use client'
+import { UserRound } 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 { UserRound } from 'lucide-react'
-import { Button } from '#components/ui/button'
+import { buttonVariants } from '#components/ui/button'
 import {
   Drawer,
   DrawerClose,
@@ -19,111 +18,93 @@ export type AccountDrawerProps = {
   accountLabel?: string
   authenticated?: boolean
   busy?: boolean
-  musicControl?: ReactNode
+  musicControl?: JSX.Element
   triggerTargetId?: string
   onSignIn?: () => void
   onSignOut?: () => void
 }
 
-export function AccountDrawer({
-  accountLabel = 'Sign in',
-  authenticated = false,
-  busy = false,
-  musicControl,
-  triggerTargetId,
-  onSignIn,
-  onSignOut,
-}: AccountDrawerProps) {
-  const [triggerTarget, setTriggerTarget] = useState<HTMLElement | null>(null)
+export function AccountDrawer(props: AccountDrawerProps) {
+  const accountLabel = () => props.accountLabel ?? 'Sign in'
+  const [triggerTarget, setTriggerTarget] = createSignal<HTMLElement | null>(null)
 
-  useEffect(() => {
-    setTriggerTarget(triggerTargetId ? document.getElementById(triggerTargetId) : null)
-  }, [triggerTargetId])
+  createEffect(() =>
+    setTriggerTarget(props.triggerTargetId ? document.getElementById(props.triggerTargetId) : null)
+  )
 
   const trigger = (
     <DrawerTrigger
-      render={
-        <Button
-          variant="outline"
-          size="sm"
-          className="workspace-account-trigger"
-          aria-label={`Open user menu for ${accountLabel}`}
-          aria-haspopup="dialog"
-        />
-      }
+      class={buttonVariants({ variant: 'outline', size: 'sm', class: 'workspace-account-trigger' })}
+      aria-label={`Open user menu for ${accountLabel()}`}
+      aria-haspopup="dialog"
     >
       <UserRound aria-hidden="true" />
-      <span>{accountLabel}</span>
+      <span>{accountLabel()}</span>
     </DrawerTrigger>
   )
 
   return (
     <Drawer swipeDirection="right">
-      {triggerTarget ? (
-        createPortal(trigger, triggerTarget)
-      ) : (
-        <div className="fixed right-4 top-4 z-40">{trigger}</div>
-      )}
-      <DrawerContent className="w-[min(24rem,90vw)]">
-        <DrawerHeader className="border-b px-5 pb-4 pt-5 text-left">
-          <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
-            <div className="flex min-w-0 items-center gap-3">
-              <span className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground">
-                <UserRound className="size-5" aria-hidden="true" />
+      <Show when={triggerTarget()} fallback={<div class="fixed right-4 top-4 z-40">{trigger}</div>}>
+        <Portal mount={triggerTarget()!}>{trigger}</Portal>
+      </Show>
+      <DrawerContent class="w-[min(24rem,90vw)]">
+        <DrawerHeader class="border-b px-5 pb-4 pt-5 text-left">
+          <div class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4">
+            <div class="flex min-w-0 items-center gap-3">
+              <span class="flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground">
+                <UserRound class="size-5" aria-hidden="true" />
               </span>
-              <div className="min-w-0">
-                <DrawerTitle className="truncate">{accountLabel}</DrawerTitle>
+              <div class="min-w-0">
+                <DrawerTitle class="truncate">{accountLabel()}</DrawerTitle>
                 <DrawerDescription>
-                  {authenticated
+                  {props.authenticated
                     ? 'Signed in · workspace saved'
                     : 'Guest workspace · sign in anytime'}
                 </DrawerDescription>
               </div>
             </div>
-            <ThemeToggle className="shrink-0" />
+            <ThemeToggle class="shrink-0" />
           </div>
         </DrawerHeader>
-        <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5">
-          {musicControl ? (
+        <div class="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5">
+          <Show when={props.musicControl}>
             <section
-              className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
+              class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
               aria-labelledby="account-music-title"
             >
-              <div className="min-w-0">
-                <h2 id="account-music-title" className="text-sm font-semibold">
+              <div class="min-w-0">
+                <h2 id="account-music-title" class="text-sm font-semibold">
                   Music
                 </h2>
-                <p className="text-sm text-muted-foreground">Control the workspace soundtrack.</p>
+                <p class="text-sm text-muted-foreground">Control the workspace soundtrack.</p>
               </div>
-              <div className="flex shrink-0 items-center justify-end">{musicControl}</div>
+              <div class="flex shrink-0 items-center justify-end">{props.musicControl}</div>
             </section>
-          ) : null}
+          </Show>
           <section
-            className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
+            class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"
             aria-labelledby="account-session-title"
           >
-            <div className="min-w-0">
-              <h2 id="account-session-title" className="text-sm font-semibold">
+            <div class="min-w-0">
+              <h2 id="account-session-title" class="text-sm font-semibold">
                 Account
               </h2>
-              <p className="text-sm text-muted-foreground">
-                {authenticated
+              <p class="text-sm text-muted-foreground">
+                {props.authenticated
                   ? 'Sign out on this device without removing your saved workspace.'
                   : 'Sign in or create an account to keep this workspace across devices.'}
               </p>
             </div>
             <DrawerClose
-              render={
-                <Button
-                  type="button"
-                  className="shrink-0"
-                  variant={authenticated ? 'outline' : 'default'}
-                  disabled={busy}
-                  onClick={authenticated ? onSignOut : onSignIn}
-                />
-              }
+              class={buttonVariants({
+                variant: props.authenticated ? 'outline' : 'default',
+                class: 'shrink-0',
+              })}
+              disabled={props.busy}
+              onClick={props.authenticated ? props.onSignOut : props.onSignIn}
             >
-              {authenticated ? 'Sign out' : 'Sign in'}
+              {props.authenticated ? 'Sign out' : 'Sign in'}
             </DrawerClose>
           </section>
         </div>

package/src/components/on-screen-controls.tsx

@@ -1,15 +1,14 @@
-'use client'
+import { ZoomIn, ZoomOut } from 'lucide-solid'
+import { onCleanup, Show, type JSX } from 'solid-js'
 
-import { useCallback, useEffect, useRef } from 'react'
-import type { PointerEvent, ReactNode } from 'react'
-import { ZoomIn, ZoomOut } from 'lucide-react'
 import { Button } from '#components/ui/button'
 import { cn } from '#lib/utils'
+
 type ControlButtonProps = {
   code: string
   label: string
-  children: ReactNode
-  className?: string
+  children: JSX.Element
+  class?: string
 }
 
 function sendKeyEvent(type: 'keydown' | 'keyup', code: string): void {
@@ -18,52 +17,49 @@ function sendKeyEvent(type: 'keydown' | 'keyup', code: string): void {
   )
 }
 
-function ControlButton({ code, label, children, className }: ControlButtonProps) {
-  const pressed = useRef(false)
-  const pressedPointer = useRef<number | null>(null)
+function ControlButton(props: ControlButtonProps) {
+  let pressed = false
+  let pressedPointer: number | null = null
 
-  const release = useCallback(() => {
-    if (!pressed.current) return
-    pressed.current = false
-    pressedPointer.current = null
-    sendKeyEvent('keyup', code)
-  }, [code])
+  const release = () => {
+    if (!pressed) return
+    pressed = false
+    pressedPointer = null
+    sendKeyEvent('keyup', props.code)
+  }
 
   // Self-heal: release the key if the pointerup lands elsewhere (e.g. the
   // scene DOM changes mid-teleport) or the window loses focus. PointerId
   // matching preserves multi-touch.
-  useEffect(() => {
-    const onWindowPointerUp = (event: globalThis.PointerEvent) => {
-      if (pressedPointer.current === event.pointerId) release()
+  if (typeof window !== 'undefined') {
+    const onWindowPointerUp = (event: PointerEvent) => {
+      if (pressedPointer === event.pointerId) release()
     }
     const onBlur = () => release()
     window.addEventListener('pointerup', onWindowPointerUp)
     window.addEventListener('blur', onBlur)
-    return () => {
+    onCleanup(() => {
       window.removeEventListener('pointerup', onWindowPointerUp)
       window.removeEventListener('blur', onBlur)
-    }
-  }, [release])
+    })
+  }
 
-  const press = useCallback(
-    (event: PointerEvent<HTMLButtonElement>) => {
-      event.preventDefault()
-      if (pressed.current) return
-      pressed.current = true
-      pressedPointer.current = event.pointerId
-      event.currentTarget.setPointerCapture(event.pointerId)
-      sendKeyEvent('keydown', code)
-    },
-    [code]
-  )
+  const press = (event: PointerEvent & { currentTarget: HTMLButtonElement }) => {
+    event.preventDefault()
+    if (pressed) return
+    pressed = true
+    pressedPointer = event.pointerId
+    event.currentTarget.setPointerCapture(event.pointerId)
+    sendKeyEvent('keydown', props.code)
+  }
 
   return (
     <button
       type="button"
-      aria-label={label}
-      className={cn(
+      aria-label={props.label}
+      class={cn(
         'flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-white/25 bg-slate-950/65 p-2 text-white shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]',
-        className
+        props.class
       )}
       onContextMenu={(event) => event.preventDefault()}
       onPointerCancel={release}
@@ -71,7 +67,7 @@ function ControlButton({ code, label, children, className }: ControlButtonProps)
       onPointerLeave={release}
       onPointerUp={release}
     >
-      {children}
+      {props.children}
     </button>
   )
 }
@@ -83,41 +79,38 @@ export type OnScreenControlsProps = {
   showJumpControl?: boolean
 }
 
-export function OnScreenControls({
-  onZoomIn,
-  onZoomOut,
-  showMovementControls = true,
-  showJumpControl = true,
-}: OnScreenControlsProps = {}) {
-  const showZoomControls = Boolean(onZoomIn && onZoomOut)
+export function OnScreenControls(props: OnScreenControlsProps) {
+  const showMovementControls = () => props.showMovementControls ?? true
+  const showJumpControl = () => props.showJumpControl ?? true
+  const showZoomControls = () => Boolean(props.onZoomIn && props.onZoomOut)
 
   return (
     <div
       data-agent-hq-on-screen-controls
-      className="pointer-events-none fixed inset-x-4 bottom-4 z-30 flex select-none items-end justify-between gap-4 pb-[env(safe-area-inset-bottom)] sm:inset-x-6 sm:bottom-6 [-webkit-touch-callout:none] [-webkit-user-select:none]"
+      class="pointer-events-none fixed inset-x-4 bottom-4 z-30 flex select-none items-end justify-between gap-4 pb-[env(safe-area-inset-bottom)] sm:inset-x-6 sm:bottom-6 [-webkit-touch-callout:none] [-webkit-user-select:none]"
     >
-      {showMovementControls ? (
-        <div className="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]">
+      <Show when={showMovementControls()}>
+        <div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]">
           <span />
-          <ControlButton code="KeyW" label="Move forward" className="size-12 rounded-xl text-xl">
+          <ControlButton code="KeyW" label="Move forward" class="size-12 rounded-xl text-xl">
             ▲
           </ControlButton>
           <span />
-          <ControlButton code="KeyA" label="Move left" className="size-12 rounded-xl text-xl">
+          <ControlButton code="KeyA" label="Move left" class="size-12 rounded-xl text-xl">
             ◀
           </ControlButton>
-          <ControlButton code="KeyS" label="Move backward" className="size-12 rounded-xl text-xl">
+          <ControlButton code="KeyS" label="Move backward" class="size-12 rounded-xl text-xl">
             ▼
           </ControlButton>
-          <ControlButton code="KeyD" label="Move right" className="size-12 rounded-xl text-xl">
+          <ControlButton code="KeyD" label="Move right" class="size-12 rounded-xl text-xl">
             ▶
           </ControlButton>
         </div>
-      ) : null}
-      <div className="pointer-events-auto ml-auto flex flex-col items-end gap-2">
-        {showZoomControls ? (
+      </Show>
+      <div class="pointer-events-auto ml-auto flex flex-col items-end gap-2">
+        <Show when={showZoomControls()}>
           <div
-            className="flex items-center gap-1.5 rounded-2xl bg-slate-950/20 p-1.5 backdrop-blur-[2px]"
+            class="flex items-center gap-1.5 rounded-2xl bg-slate-950/20 p-1.5 backdrop-blur-[2px]"
             role="group"
             aria-label="Camera zoom"
           >
@@ -127,8 +120,8 @@ export function OnScreenControls({
               size="icon-lg"
               aria-label="Zoom out"
               title="Zoom out"
-              className="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
-              onClick={onZoomOut}
+              class="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
+              onClick={() => props.onZoomOut?.()}
             >
               <ZoomOut aria-hidden="true" />
             </Button>
@@ -138,18 +131,18 @@ export function OnScreenControls({
               size="icon-lg"
               aria-label="Zoom in"
               title="Zoom in"
-              className="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
-              onClick={onZoomIn}
+              class="border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80"
+              onClick={() => props.onZoomIn?.()}
             >
               <ZoomIn aria-hidden="true" />
             </Button>
           </div>
-        ) : null}
-        {showJumpControl ? (
-          <ControlButton code="Space" label="Jump" className="text-xs font-semibold">
+        </Show>
+        <Show when={showJumpControl()}>
+          <ControlButton code="Space" label="Jump" class="text-xs font-semibold">
             JUMP
           </ControlButton>
-        ) : null}
+        </Show>
       </div>
     </div>
   )