@adea-ai/ui 0.22.2 → 0.23.0

package/README.md

@@ -1,8 +1,11 @@
 # Shared UI
 
-Reusable Base UI/shadcn primitives and React controls for the HQ shell, scene
-controls, room authoring, themes, drawers, loading states, and overlays. Scene
-branding and Three.js runtime behavior stay in their owning packages.
+Reusable shadcn-style Solid controls for the HQ shell, scene controls, room
+authoring, themes, drawers, loading states, and overlays. Primitives come from
+Kobalte (headless) and corvu (the swipeable drawer); the component layer is one
+Solid codebase. Scene branding and Three.js runtime behavior stay in their
+owning packages. The primitive selection is recorded in
+[decision 0007](../../docs/decisions/0007-solid-tanstack-start.md).
 
 ## Theming contract: CSS custom properties are the only color surface
 

package/dist/components/account-drawer.d.ts

@@ -1,11 +1,11 @@
-import { type ReactNode } from 'react';
+import { type JSX } from 'solid-js';
 export type AccountDrawerProps = {
     accountLabel?: string;
     authenticated?: boolean;
     busy?: boolean;
-    musicControl?: ReactNode;
+    musicControl?: JSX.Element;
     triggerTargetId?: string;
     onSignIn?: () => void;
     onSignOut?: () => void;
 };
-export declare function AccountDrawer({ accountLabel, authenticated, busy, musicControl, triggerTargetId, onSignIn, onSignOut, }: AccountDrawerProps): import("react").JSX.Element;
+export declare function AccountDrawer(props: AccountDrawerProps): JSX.Element;

package/dist/components/account-drawer.js

@@ -1,20 +1,120 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { createPortal } from 'react-dom';
-import { useEffect, useState } from 'react';
-import { UserRound } from 'lucide-react';
-import { Button } from '#components/ui/button';
-import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger, } from '#components/ui/drawer';
-import { ThemeToggle } from './theme-toggle';
-export function AccountDrawer({ accountLabel = 'Sign in', authenticated = false, busy = false, musicControl, triggerTargetId, onSignIn, onSignOut, }) {
-    const [triggerTarget, setTriggerTarget] = useState(null);
-    useEffect(() => {
-        setTriggerTarget(triggerTargetId ? document.getElementById(triggerTargetId) : null);
-    }, [triggerTargetId]);
-    const trigger = (_jsxs(DrawerTrigger, { render: _jsx(Button, { variant: "outline", size: "sm", className: "workspace-account-trigger", "aria-label": `Open user menu for ${accountLabel}`, "aria-haspopup": "dialog" }), children: [_jsx(UserRound, { "aria-hidden": "true" }), _jsx("span", { children: accountLabel })] }));
-    return (_jsxs(Drawer, { swipeDirection: "right", children: [triggerTarget ? (createPortal(trigger, triggerTarget)) : (_jsx("div", { className: "fixed right-4 top-4 z-40", children: trigger })), _jsxs(DrawerContent, { className: "w-[min(24rem,90vw)]", children: [_jsx(DrawerHeader, { className: "border-b px-5 pb-4 pt-5 text-left", children: _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [_jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-xl bg-primary text-primary-foreground", children: _jsx(UserRound, { className: "size-5", "aria-hidden": "true" }) }), _jsxs("div", { className: "min-w-0", children: [_jsx(DrawerTitle, { className: "truncate", children: accountLabel }), _jsx(DrawerDescription, { children: authenticated
-                                                        ? 'Signed in · workspace saved'
-                                                        : 'Guest workspace · sign in anytime' })] })] }), _jsx(ThemeToggle, { className: "shrink-0" })] }) }), _jsxs("div", { className: "flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5", children: [musicControl ? (_jsxs("section", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5", "aria-labelledby": "account-music-title", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: "account-music-title", className: "text-sm font-semibold", children: "Music" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Control the workspace soundtrack." })] }), _jsx("div", { className: "flex shrink-0 items-center justify-end", children: musicControl })] })) : null, _jsxs("section", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5", "aria-labelledby": "account-session-title", children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { id: "account-session-title", className: "text-sm font-semibold", children: "Account" }), _jsx("p", { className: "text-sm text-muted-foreground", children: authenticated
-                                                    ? 'Sign out on this device without removing your saved workspace.'
-                                                    : 'Sign in or create an account to keep this workspace across devices.' })] }), _jsx(DrawerClose, { render: _jsx(Button, { type: "button", className: "shrink-0", variant: authenticated ? 'outline' : 'default', disabled: busy, onClick: authenticated ? onSignOut : onSignIn }), children: authenticated ? 'Sign out' : 'Sign in' })] })] })] })] }));
+import { buttonVariants } from "./ui/button.js";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer.js";
+import { ThemeToggle } from "./theme-toggle.js";
+import { Portal, createComponent, insert, memo, template } from "solid-js/web";
+import { UserRound } from "lucide-solid";
+import { Show, createEffect, createSignal } from "solid-js";
+//#region src/components/account-drawer.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<span>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<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"></span><div class=min-w-0>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<section class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"aria-labelledby=account-music-title><div class=min-w-0><h2 id=account-music-title class="text-sm font-semibold">Music</h2><p class="text-sm text-muted-foreground">Control the workspace soundtrack.</p></div><div class="flex shrink-0 items-center justify-end">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div class="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5"><section class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-4 border-t pt-5"aria-labelledby=account-session-title><div class=min-w-0><h2 id=account-session-title class="text-sm font-semibold">Account</h2><p class="text-sm text-muted-foreground">`);
+var _tmpl$5 = /*#__PURE__*/ template(`<div class="fixed right-4 top-4 z-40">`);
+function AccountDrawer(props) {
+	const accountLabel = () => props.accountLabel ?? "Sign in";
+	const [triggerTarget, setTriggerTarget] = createSignal(null);
+	createEffect(() => setTriggerTarget(props.triggerTargetId ? document.getElementById(props.triggerTargetId) : null));
+	const trigger = createComponent(DrawerTrigger, {
+		get ["class"]() {
+			return buttonVariants({
+				variant: "outline",
+				size: "sm",
+				class: "workspace-account-trigger"
+			});
+		},
+		get ["aria-label"]() {
+			return `Open user menu for ${accountLabel()}`;
+		},
+		"aria-haspopup": "dialog",
+		get children() {
+			return [createComponent(UserRound, { "aria-hidden": "true" }), (() => {
+				var _el$ = _tmpl$();
+				insert(_el$, accountLabel);
+				return _el$;
+			})()];
+		}
+	});
+	return createComponent(Drawer, {
+		swipeDirection: "right",
+		get children() {
+			return [createComponent(Show, {
+				get when() {
+					return triggerTarget();
+				},
+				get fallback() {
+					return (() => {
+						var _el$12 = _tmpl$5();
+						insert(_el$12, trigger);
+						return _el$12;
+					})();
+				},
+				get children() {
+					return createComponent(Portal, {
+						get mount() {
+							return triggerTarget();
+						},
+						children: trigger
+					});
+				}
+			}), createComponent(DrawerContent, {
+				"class": "w-[min(24rem,90vw)]",
+				get children() {
+					return [createComponent(DrawerHeader, {
+						"class": "border-b px-5 pb-4 pt-5 text-left",
+						get children() {
+							var _el$2 = _tmpl$2(), _el$4 = _el$2.firstChild.firstChild, _el$5 = _el$4.nextSibling;
+							insert(_el$4, createComponent(UserRound, {
+								"class": "size-5",
+								"aria-hidden": "true"
+							}));
+							insert(_el$5, createComponent(DrawerTitle, {
+								"class": "truncate",
+								get children() {
+									return accountLabel();
+								}
+							}), null);
+							insert(_el$5, createComponent(DrawerDescription, { get children() {
+								return props.authenticated ? "Signed in · workspace saved" : "Guest workspace · sign in anytime";
+							} }), null);
+							insert(_el$2, createComponent(ThemeToggle, { "class": "shrink-0" }), null);
+							return _el$2;
+						}
+					}), (() => {
+						var _el$6 = _tmpl$4(), _el$0 = _el$6.firstChild, _el$11 = _el$0.firstChild.firstChild.nextSibling;
+						insert(_el$6, createComponent(Show, {
+							get when() {
+								return props.musicControl;
+							},
+							get children() {
+								var _el$7 = _tmpl$3(), _el$9 = _el$7.firstChild.nextSibling;
+								insert(_el$9, () => props.musicControl);
+								return _el$7;
+							}
+						}), _el$0);
+						insert(_el$11, () => props.authenticated ? "Sign out on this device without removing your saved workspace." : "Sign in or create an account to keep this workspace across devices.");
+						insert(_el$0, createComponent(DrawerClose, {
+							get ["class"]() {
+								return buttonVariants({
+									variant: props.authenticated ? "outline" : "default",
+									class: "shrink-0"
+								});
+							},
+							get disabled() {
+								return props.busy;
+							},
+							get onClick() {
+								return memo(() => !!props.authenticated)() ? props.onSignOut : props.onSignIn;
+							},
+							get children() {
+								return props.authenticated ? "Sign out" : "Sign in";
+							}
+						}), null);
+						return _el$6;
+					})()];
+				}
+			})];
+		}
+	});
 }
+//#endregion
+export { AccountDrawer };

package/dist/components/on-screen-controls.d.ts

@@ -1,7 +1,8 @@
+import { type JSX } from 'solid-js';
 export type OnScreenControlsProps = {
     onZoomIn?: () => void;
     onZoomOut?: () => void;
     showMovementControls?: boolean;
     showJumpControl?: boolean;
 };
-export declare function OnScreenControls({ onZoomIn, onZoomOut, showMovementControls, showJumpControl, }?: OnScreenControlsProps): import("react").JSX.Element;
+export declare function OnScreenControls(props: OnScreenControlsProps): JSX.Element;

package/dist/components/on-screen-controls.js

@@ -1,50 +1,162 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
-import { ZoomIn, ZoomOut } from 'lucide-react';
-import { Button } from '#components/ui/button';
-import { cn } from '#lib/utils';
+import { cn } from "../lib/utils.js";
+import { Button } from "./ui/button.js";
+import { className, createComponent, delegateEvents, effect, insert, setAttribute, template } from "solid-js/web";
+import { ZoomIn, ZoomOut } from "lucide-solid";
+import { Show, onCleanup } from "solid-js";
+//#region src/components/on-screen-controls.tsx
+var _tmpl$ = /*#__PURE__*/ template(`<button type=button>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]"><span></span><span>`);
+var _tmpl$3 = /*#__PURE__*/ template(`<div 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">`);
+var _tmpl$4 = /*#__PURE__*/ template(`<div data-agent-hq-on-screen-controls 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]"><div class="pointer-events-auto ml-auto flex flex-col items-end gap-2">`);
 function sendKeyEvent(type, code) {
-    window.dispatchEvent(new KeyboardEvent(type, { bubbles: true, cancelable: true, code, key: code }));
+	window.dispatchEvent(new KeyboardEvent(type, {
+		bubbles: true,
+		cancelable: true,
+		code,
+		key: code
+	}));
 }
-function ControlButton({ code, label, children, className }) {
-    const pressed = useRef(false);
-    const pressedPointer = useRef(null);
-    const release = useCallback(() => {
-        if (!pressed.current)
-            return;
-        pressed.current = false;
-        pressedPointer.current = null;
-        sendKeyEvent('keyup', code);
-    }, [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) => {
-            if (pressedPointer.current === event.pointerId)
-                release();
-        };
-        const onBlur = () => release();
-        window.addEventListener('pointerup', onWindowPointerUp);
-        window.addEventListener('blur', onBlur);
-        return () => {
-            window.removeEventListener('pointerup', onWindowPointerUp);
-            window.removeEventListener('blur', onBlur);
-        };
-    }, [release]);
-    const press = useCallback((event) => {
-        event.preventDefault();
-        if (pressed.current)
-            return;
-        pressed.current = true;
-        pressedPointer.current = event.pointerId;
-        event.currentTarget.setPointerCapture(event.pointerId);
-        sendKeyEvent('keydown', code);
-    }, [code]);
-    return (_jsx("button", { type: "button", "aria-label": label, className: 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), onContextMenu: (event) => event.preventDefault(), onPointerCancel: release, onPointerDown: press, onPointerLeave: release, onPointerUp: release, children: children }));
+function ControlButton(props) {
+	let pressed = false;
+	let pressedPointer = null;
+	const release = () => {
+		if (!pressed) return;
+		pressed = false;
+		pressedPointer = null;
+		sendKeyEvent("keyup", props.code);
+	};
+	if (typeof window !== "undefined") {
+		const onWindowPointerUp = (event) => {
+			if (pressedPointer === event.pointerId) release();
+		};
+		const onBlur = () => release();
+		window.addEventListener("pointerup", onWindowPointerUp);
+		window.addEventListener("blur", onBlur);
+		onCleanup(() => {
+			window.removeEventListener("pointerup", onWindowPointerUp);
+			window.removeEventListener("blur", onBlur);
+		});
+	}
+	const press = (event) => {
+		event.preventDefault();
+		if (pressed) return;
+		pressed = true;
+		pressedPointer = event.pointerId;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		sendKeyEvent("keydown", props.code);
+	};
+	return (() => {
+		var _el$ = _tmpl$();
+		_el$.$$pointerup = release;
+		_el$.addEventListener("pointerleave", release);
+		_el$.$$pointerdown = press;
+		_el$.addEventListener("pointercancel", release);
+		_el$.$$contextmenu = (event) => event.preventDefault();
+		insert(_el$, () => props.children);
+		effect((_p$) => {
+			var _v$ = props.label, _v$2 = 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]", props.class);
+			_v$ !== _p$.e && setAttribute(_el$, "aria-label", _p$.e = _v$);
+			_v$2 !== _p$.t && className(_el$, _p$.t = _v$2);
+			return _p$;
+		}, {
+			e: void 0,
+			t: void 0
+		});
+		return _el$;
+	})();
 }
-export function OnScreenControls({ onZoomIn, onZoomOut, showMovementControls = true, showJumpControl = true, } = {}) {
-    const showZoomControls = Boolean(onZoomIn && onZoomOut);
-    return (_jsxs("div", { "data-agent-hq-on-screen-controls": true, 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]", children: [showMovementControls ? (_jsxs("div", { className: "pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-slate-950/20 p-2 backdrop-blur-[2px]", children: [_jsx("span", {}), _jsx(ControlButton, { code: "KeyW", label: "Move forward", className: "size-12 rounded-xl text-xl", children: "\u25B2" }), _jsx("span", {}), _jsx(ControlButton, { code: "KeyA", label: "Move left", className: "size-12 rounded-xl text-xl", children: "\u25C0" }), _jsx(ControlButton, { code: "KeyS", label: "Move backward", className: "size-12 rounded-xl text-xl", children: "\u25BC" }), _jsx(ControlButton, { code: "KeyD", label: "Move right", className: "size-12 rounded-xl text-xl", children: "\u25B6" })] })) : null, _jsxs("div", { className: "pointer-events-auto ml-auto flex flex-col items-end gap-2", children: [showZoomControls ? (_jsxs("div", { className: "flex items-center gap-1.5 rounded-2xl bg-slate-950/20 p-1.5 backdrop-blur-[2px]", role: "group", "aria-label": "Camera zoom", children: [_jsx(Button, { type: "button", variant: "secondary", 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, children: _jsx(ZoomOut, { "aria-hidden": "true" }) }), _jsx(Button, { type: "button", variant: "secondary", 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, children: _jsx(ZoomIn, { "aria-hidden": "true" }) })] })) : null, showJumpControl ? (_jsx(ControlButton, { code: "Space", label: "Jump", className: "text-xs font-semibold", children: "JUMP" })) : null] })] }));
+function OnScreenControls(props) {
+	const showMovementControls = () => props.showMovementControls ?? true;
+	const showJumpControl = () => props.showJumpControl ?? true;
+	const showZoomControls = () => Boolean(props.onZoomIn && props.onZoomOut);
+	return (() => {
+		var _el$2 = _tmpl$4(), _el$6 = _el$2.firstChild;
+		insert(_el$2, createComponent(Show, {
+			get when() {
+				return showMovementControls();
+			},
+			get children() {
+				var _el$3 = _tmpl$2(), _el$5 = _el$3.firstChild.nextSibling;
+				insert(_el$3, createComponent(ControlButton, {
+					code: "KeyW",
+					label: "Move forward",
+					"class": "size-12 rounded-xl text-xl",
+					children: "▲"
+				}), _el$5);
+				insert(_el$3, createComponent(ControlButton, {
+					code: "KeyA",
+					label: "Move left",
+					"class": "size-12 rounded-xl text-xl",
+					children: "◀"
+				}), null);
+				insert(_el$3, createComponent(ControlButton, {
+					code: "KeyS",
+					label: "Move backward",
+					"class": "size-12 rounded-xl text-xl",
+					children: "▼"
+				}), null);
+				insert(_el$3, createComponent(ControlButton, {
+					code: "KeyD",
+					label: "Move right",
+					"class": "size-12 rounded-xl text-xl",
+					children: "▶"
+				}), null);
+				return _el$3;
+			}
+		}), _el$6);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return showZoomControls();
+			},
+			get children() {
+				var _el$7 = _tmpl$3();
+				insert(_el$7, createComponent(Button, {
+					type: "button",
+					variant: "secondary",
+					size: "icon-lg",
+					"aria-label": "Zoom out",
+					title: "Zoom out",
+					"class": "border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80",
+					onClick: () => props.onZoomOut?.(),
+					get children() {
+						return createComponent(ZoomOut, { "aria-hidden": "true" });
+					}
+				}), null);
+				insert(_el$7, createComponent(Button, {
+					type: "button",
+					variant: "secondary",
+					size: "icon-lg",
+					"aria-label": "Zoom in",
+					title: "Zoom in",
+					"class": "border border-white/25 bg-slate-950/65 text-white shadow-lg backdrop-blur-sm hover:bg-slate-900/80",
+					onClick: () => props.onZoomIn?.(),
+					get children() {
+						return createComponent(ZoomIn, { "aria-hidden": "true" });
+					}
+				}), null);
+				return _el$7;
+			}
+		}), null);
+		insert(_el$6, createComponent(Show, {
+			get when() {
+				return showJumpControl();
+			},
+			get children() {
+				return createComponent(ControlButton, {
+					code: "Space",
+					label: "Jump",
+					"class": "text-xs font-semibold",
+					children: "JUMP"
+				});
+			}
+		}), null);
+		return _el$2;
+	})();
 }
+delegateEvents([
+	"contextmenu",
+	"pointerdown",
+	"pointerup"
+]);
+//#endregion
+export { OnScreenControls };

package/dist/components/scene-settings.d.ts

@@ -1,4 +1,4 @@
-import { type ReactNode } from 'react';
+import { type JSX } from 'solid-js';
 export type SceneSettingsProps = {
     cameraViewMode: 'perspective' | 'orthographic';
     onCameraViewModeChange: (value: 'perspective' | 'orthographic') => void;
@@ -15,7 +15,7 @@ export type SceneSettingsProps = {
     accountLabel?: string;
     accountAuthenticated?: boolean;
     accountBusy?: boolean;
-    accountMusicControl?: ReactNode;
+    accountMusicControl?: JSX.Element;
     onAccountSignIn?: () => void;
     onAccountSignOut?: () => void;
     showAccountDrawer?: boolean;
@@ -30,4 +30,4 @@ export type SceneSettingsProps = {
     onSceneEditorChange?: (value: boolean) => void;
 };
 /** Compact scene controls shared by the HQ shell and other scene hosts. */
-export declare function SceneSettings({ cameraViewMode, onCameraViewModeChange, allowCameraViewModeChange, characterDesignerEnabled, onCharacterDesignerChange, characterDesignerTargetId, onOpenRoomDesigner, accountTargetId, accountLabel, accountAuthenticated, accountBusy, accountMusicControl, onAccountSignIn, onAccountSignOut, showAccountDrawer, cameraTargetId, roomDesignerTargetId, sceneEditorTargetId, sceneEditorEnabled, onSceneEditorChange, }: SceneSettingsProps): import("react").JSX.Element;
+export declare function SceneSettings(props: SceneSettingsProps): JSX.Element;