@adea-ai/ui 0.10.8

package/README.md

@@ -0,0 +1,5 @@
+# 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.

package/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "#components",
+    "utils": "#lib/utils",
+    "lib": "#lib",
+    "ui": "#components/ui"
+  }
+}

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@adea-ai/ui",
+  "version": "0.10.8",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./src/index.tsx",
+      "import": "./dist/index.js"
+    },
+    "./components/*": {
+      "types": "./dist/components/*.d.ts",
+      "development": "./src/components/*",
+      "import": "./dist/components/*.js"
+    },
+    "./lib/*": {
+      "types": "./dist/lib/*.d.ts",
+      "development": "./src/lib/*",
+      "import": "./dist/lib/*.js"
+    },
+    "./globals.css": "./src/styles/globals.css",
+    "./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"
+  },
+  "imports": {
+    "#components/*": "./src/components/*.tsx",
+    "#lib/*": "./src/lib/*.ts"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "build": "tsc -p tsconfig.json",
+    "dev": "tsc -p tsconfig.json --watch --preserveWatchOutput",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^1.33.0",
+    "next-themes": "^0.4.6",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "tailwind-merge": "^3.6.0",
+    "three": "^0.185.1",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
+    "@types/three": "^0.185.0"
+  }
+}

package/src/components/account-drawer.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useState, type ReactNode } 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 type AccountDrawerProps = {
+  accountLabel?: string;
+  authenticated?: boolean;
+  busy?: boolean;
+  musicControl?: ReactNode;
+  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);
+
+  useEffect(() => {
+    setTriggerTarget(triggerTargetId ? document.getElementById(triggerTargetId) : null);
+  }, [triggerTargetId]);
+
+  const trigger = (
+    <DrawerTrigger
+      render={
+        <Button
+          variant="outline"
+          size="sm"
+          className="workspace-account-trigger"
+          aria-label={`Open user menu for ${accountLabel}`}
+          aria-haspopup="dialog"
+        />
+      }
+    >
+      <UserRound aria-hidden="true" />
+      <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" />
+              </span>
+              <div className="min-w-0">
+                <DrawerTitle className="truncate">{accountLabel}</DrawerTitle>
+                <DrawerDescription>
+                  {authenticated
+                    ? "Signed in · workspace saved"
+                    : "Guest workspace · sign in anytime"}
+                </DrawerDescription>
+              </div>
+            </div>
+            <ThemeToggle className="shrink-0" />
+          </div>
+        </DrawerHeader>
+        <div className="flex min-h-0 flex-1 flex-col gap-6 overflow-y-auto p-5">
+          {musicControl ? (
+            <section
+              className="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">
+                  Music
+                </h2>
+                <p className="text-sm text-muted-foreground">Control the workspace soundtrack.</p>
+              </div>
+              <div className="flex shrink-0 items-center justify-end">{musicControl}</div>
+            </section>
+          ) : null}
+          <section
+            className="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">
+                Account
+              </h2>
+              <p className="text-sm text-muted-foreground">
+                {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}
+                />
+              }
+            >
+              {authenticated ? "Sign out" : "Sign in"}
+            </DrawerClose>
+          </section>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

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

@@ -0,0 +1,156 @@
+"use client";
+
+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;
+};
+
+function sendKeyEvent(type: "keydown" | "keyup", code: string): void {
+  window.dispatchEvent(
+    new KeyboardEvent(type, { bubbles: true, cancelable: true, code, key: code })
+  );
+}
+
+function ControlButton({ code, label, children, className }: ControlButtonProps) {
+  const pressed = useRef(false);
+  const pressedPointer = useRef<number | null>(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: globalThis.PointerEvent) => {
+      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: PointerEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      if (pressed.current) return;
+      pressed.current = true;
+      pressedPointer.current = event.pointerId;
+      event.currentTarget.setPointerCapture(event.pointerId);
+      sendKeyEvent("keydown", code);
+    },
+    [code]
+  );
+
+  return (
+    <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}
+    </button>
+  );
+}
+
+export type OnScreenControlsProps = {
+  onZoomIn?: () => void;
+  onZoomOut?: () => void;
+  showMovementControls?: boolean;
+  showJumpControl?: boolean;
+};
+
+export function OnScreenControls({
+  onZoomIn,
+  onZoomOut,
+  showMovementControls = true,
+  showJumpControl = true,
+}: OnScreenControlsProps = {}) {
+  const showZoomControls = Boolean(onZoomIn && 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]"
+    >
+      {showMovementControls ? (
+        <div className="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>
+          <span />
+          <ControlButton code="KeyA" label="Move left" className="size-12 rounded-xl text-xl">
+            ◀
+          </ControlButton>
+          <ControlButton code="KeyS" label="Move backward" className="size-12 rounded-xl text-xl">
+            ▼
+          </ControlButton>
+          <ControlButton code="KeyD" label="Move right" className="size-12 rounded-xl text-xl">
+            ▶
+          </ControlButton>
+        </div>
+      ) : null}
+      <div className="pointer-events-auto ml-auto flex flex-col items-end gap-2">
+        {showZoomControls ? (
+          <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"
+          >
+            <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}
+            >
+              <ZoomOut aria-hidden="true" />
+            </Button>
+            <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}
+            >
+              <ZoomIn aria-hidden="true" />
+            </Button>
+          </div>
+        ) : null}
+        {showJumpControl ? (
+          <ControlButton code="Space" label="Jump" className="text-xs font-semibold">
+            JUMP
+          </ControlButton>
+        ) : null}
+      </div>
+    </div>
+  );
+}