@adea-ai/ui 0.10.8 → 0.10.9

package/.turbo/turbo-build.log

@@ -0,0 +1 @@
+$ tsc -p tsconfig.json

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

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

package/dist/components/account-drawer.js

@@ -0,0 +1,20 @@
+"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" })] })] })] })] }));
+}

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

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

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

@@ -0,0 +1,50 @@
+"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";
+function sendKeyEvent(type, 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 }));
+}
+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] })] }));
+}

package/dist/components/prop-catalog.d.ts

@@ -0,0 +1,49 @@
+import { type PointerEvent as ReactPointerEvent } from "react";
+import { type LucideIcon } from "lucide-react";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+export type PropCatalogItem = {
+    id: string;
+    label: string;
+    assetUrl: string;
+    category: string;
+    /** Restrict placement to a floor or a wall surface. */
+    placementSurface?: "floor" | "wall";
+    /** Authored wall-mount height for wall-only props. */
+    wallMountHeight?: number;
+    /** Render the placement footprint as a circle instead of an AABB. */
+    footprintShape?: "rectangle" | "circle";
+    /** Small authored lift used to keep floor props off coplanar surfaces. */
+    floorLift?: number;
+    /** Allow other floor props to be placed on this surface. */
+    allowItemsOnTop?: boolean;
+    /** Allow this floor prop to be placed underneath existing furniture. */
+    canOverlapFurniture?: boolean;
+    /** Keep rugs from covering this floor decoration. */
+    blocksRugOverlap?: boolean;
+    /** Top surface height in authored units (tables, counters). */
+    surfaceHeight?: number;
+    /** Small item that stacks on surfaces with surfaceHeight. */
+    placeableOnTop?: boolean;
+    /** Yaw that presents the asset's authored front to the viewer. */
+    frontYaw?: number;
+};
+export type PropCatalogCategory = {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+};
+export declare const defaultPropCatalogCategories: readonly PropCatalogCategory[];
+export declare function getSharedLoader(): GLTFLoader;
+export declare const ModelThumbnail: import("react").MemoExoticComponent<({ item, deferMs, }: {
+    item: PropCatalogItem;
+    /** Delay expensive GLB preview work so nearby controls remain responsive. */
+    deferMs?: number;
+}) => import("react").JSX.Element>;
+export type PropCatalogProps = {
+    items: readonly PropCatalogItem[];
+    selectedId?: string | null;
+    categories?: readonly PropCatalogCategory[];
+    className?: string;
+    onItemPointerDown?: (item: PropCatalogItem, event: ReactPointerEvent<HTMLButtonElement>) => void;
+};
+export declare function PropCatalog({ items, selectedId, categories, className, onItemPointerDown, }: PropCatalogProps): import("react").JSX.Element;

package/dist/components/prop-catalog.js

@@ -0,0 +1,342 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useMemo, useRef, useState, } from "react";
+import { Archive, Armchair, Bath, Baby, BedDouble, ChefHat, ChevronLeft, ChevronRight, Dumbbell, Gamepad2, Image, LampDesk, Leaf, PackageOpen, PanelTop, SquareDashed, Sprout, Store, Tv, Utensils, } from "lucide-react";
+import * as THREE from "three";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+import { MeshoptDecoder } from "three/examples/jsm/libs/meshopt_decoder.module.js";
+import { Card } from "./ui/card";
+import { cn } from "../lib/utils";
+export const defaultPropCatalogCategories = [
+    { id: "seating", label: "Seating", icon: Armchair },
+    { id: "tables", label: "Tables", icon: PanelTop },
+    { id: "bedroom", label: "Bedroom", icon: BedDouble },
+    { id: "storage", label: "Storage", icon: Archive },
+    { id: "lighting", label: "Lighting", icon: LampDesk },
+    { id: "electronics", label: "Electronics", icon: Tv },
+    { id: "entertainment", label: "Entertainment", icon: Gamepad2 },
+    { id: "recreation", label: "Recreation", icon: Dumbbell },
+    { id: "kitchen", label: "Kitchen", icon: ChefHat },
+    { id: "bathroom", label: "Bathroom", icon: Bath },
+    { id: "rugs", label: "Rugs", icon: SquareDashed },
+    { id: "retail", label: "Retail", icon: Store },
+    { id: "fitness", label: "Fitness", icon: Dumbbell },
+    { id: "kids", label: "Kids", icon: Baby },
+    { id: "wall-art", label: "Wall Art", icon: Image },
+    { id: "plants", label: "Plants", icon: Sprout },
+    { id: "food-and-drinks", label: "Food & Drinks", icon: Utensils },
+    { id: "other", label: "Other", icon: PackageOpen },
+];
+function disposeObject(object) {
+    object.traverse((child) => {
+        if (!(child instanceof THREE.Mesh))
+            return;
+        child.geometry.dispose();
+        const materials = Array.isArray(child.material) ? child.material : [child.material];
+        for (const material of materials)
+            material.dispose();
+    });
+}
+// --- Thumbnail infrastructure ------------------------------------------------
+// Shared singleton renderer + canvas for all thumbnails.
+let thumbnailRenderer = null;
+let thumbnailRendererCanvas = null;
+// Shared singleton GLTFLoader so the browser can reuse connections and
+// the loader can cache parsed resources internally. Exported so the
+// room designer can reuse the same loader instance and avoid duplicate
+// GLB fetches/parse work.
+let sharedLoader = null;
+export function getSharedLoader() {
+    if (!sharedLoader) {
+        sharedLoader = new GLTFLoader();
+        // Interior catalog GLBs are Meshopt-compressed. Configure the shared
+        // loader before thumbnails or the room designer can request any asset.
+        sharedLoader.setMeshoptDecoder(MeshoptDecoder);
+    }
+    return sharedLoader;
+}
+// Cache of rendered thumbnail data URLs keyed by asset URL + yaw.
+// Survives category switches and drawer re-opens so thumbnails only
+// render once per session.
+const thumbnailDataCache = new Map();
+// Track in-flight load+render promises so concurrent mounts share one.
+const thumbnailPromiseCache = new Map();
+// Count mounted consumers so category switches can abandon queued thumbnail
+// renders instead of keeping the main thread busy with an invisible catalog.
+const thumbnailConsumerCounts = new Map();
+function thumbnailCacheKey(item) {
+    return `${item.assetUrl}|${item.frontYaw ?? 0}`;
+}
+function renderThumbnailToDataURL(job) {
+    if (!thumbnailRendererCanvas)
+        thumbnailRendererCanvas = document.createElement("canvas");
+    if (!thumbnailRenderer) {
+        thumbnailRenderer = new THREE.WebGLRenderer({
+            canvas: thumbnailRendererCanvas,
+            alpha: true,
+            antialias: true,
+            powerPreference: "low-power",
+        });
+        thumbnailRenderer.setPixelRatio(1);
+        thumbnailRenderer.setSize(96, 96, false);
+        thumbnailRenderer.outputColorSpace = THREE.SRGBColorSpace;
+    }
+    const scene = new THREE.Scene();
+    scene.add(new THREE.HemisphereLight(0xffffff, 0x223044, 2.4));
+    const key = new THREE.DirectionalLight(0xffffff, 2.8);
+    key.position.set(2, 4, 3);
+    scene.add(key);
+    const camera = new THREE.PerspectiveCamera(28, 1, 0.01, 100);
+    const model = job.source;
+    model.rotation.y = job.item.frontYaw ?? 0;
+    model.updateMatrixWorld(true);
+    const bounds = new THREE.Box3().setFromObject(model);
+    const size = bounds.getSize(new THREE.Vector3());
+    const center = bounds.getCenter(new THREE.Vector3());
+    model.position.sub(center);
+    const extent = Math.max(size.x, size.y, size.z, 0.25);
+    camera.position.set(extent * 2.25, extent * 1.55, -extent * 2.25);
+    camera.lookAt(0, Math.max(size.y * 0.12, 0), 0);
+    scene.add(model);
+    thumbnailRenderer.render(scene, camera);
+    // JPEG is ~5x faster to encode than PNG and produces smaller data URLs,
+    // which speeds up both the toDataURL call and the subsequent img.src load.
+    const dataUrl = thumbnailRendererCanvas.toDataURL("image/jpeg", 0.85);
+    scene.remove(model);
+    disposeObject(model);
+    return dataUrl;
+}
+/**
+ * Yield to the event loop so the browser can process user input between
+ * thumbnail renders. Without this, a queue of N renders executes as one
+ * synchronous batch (microtask drain) and blocks the main thread.
+ */
+const nextFrame = () => new Promise((resolve) => requestAnimationFrame(() => resolve()));
+/**
+ * Sequential render queue. Each render waits for one animation frame before
+ * executing, keeping the UI responsive even when many thumbnails are queued.
+ */
+let renderQueue = Promise.resolve();
+function scheduleRender(render) {
+    const result = renderQueue.then(async () => {
+        await nextFrame();
+        return render();
+    });
+    renderQueue = result.catch(() => undefined);
+    return result;
+}
+/**
+ * Load a GLB and render a thumbnail, returning a data URL.
+ * Results are cached so repeated mounts (category switches, drawer re-opens)
+ * skip the fetch + render entirely. Concurrent mounts for the same asset
+ * share a single in-flight promise.
+ *
+ * GLB loads are concurrency-limited to avoid firing 50+ simultaneous HTTP
+ * requests when a category with many items becomes visible. The render
+ * queue (scheduleRender) already serializes the sync WebGL renders, but
+ * the async GLB fetches should still be bounded. Four concurrent loads fill
+ * the visible catalog quickly without starting dozens of requests at once.
+ */
+const MAX_CONCURRENT_THUMBNAIL_LOADS = 4;
+let activeThumbnailLoads = 0;
+const pendingThumbnailLoads = [];
+function dequeueThumbnailLoad() {
+    if (activeThumbnailLoads >= MAX_CONCURRENT_THUMBNAIL_LOADS)
+        return;
+    const next = pendingThumbnailLoads.shift();
+    if (!next)
+        return;
+    activeThumbnailLoads++;
+    next();
+}
+function acquireThumbnail(item) {
+    const key = thumbnailCacheKey(item);
+    const cached = thumbnailDataCache.get(key);
+    if (cached)
+        return { promise: Promise.resolve(cached), release: () => undefined };
+    thumbnailConsumerCounts.set(key, (thumbnailConsumerCounts.get(key) ?? 0) + 1);
+    let promise = thumbnailPromiseCache.get(key);
+    if (!promise) {
+        promise = new Promise((resolve, reject) => {
+            const run = () => {
+                if (!thumbnailConsumerCounts.has(key)) {
+                    activeThumbnailLoads--;
+                    dequeueThumbnailLoad();
+                    thumbnailPromiseCache.delete(key);
+                    resolve(null);
+                    return;
+                }
+                const finishLoad = () => {
+                    activeThumbnailLoads--;
+                    dequeueThumbnailLoad();
+                };
+                getSharedLoader()
+                    .loadAsync(item.assetUrl)
+                    .then(({ scene: source }) => {
+                    finishLoad();
+                    // The GLB parse is async, but the WebGL render + toDataURL is sync.
+                    // Schedule the sync part in an animation frame so it doesn't block.
+                    return scheduleRender(() => {
+                        if (!thumbnailConsumerCounts.has(key)) {
+                            thumbnailPromiseCache.delete(key);
+                            disposeObject(source);
+                            return null;
+                        }
+                        const dataUrl = renderThumbnailToDataURL({ item, source });
+                        thumbnailDataCache.set(key, dataUrl);
+                        thumbnailPromiseCache.delete(key);
+                        return dataUrl;
+                    });
+                }, (error) => {
+                    finishLoad();
+                    throw error;
+                })
+                    .then(resolve, reject);
+            };
+            pendingThumbnailLoads.push(run);
+            dequeueThumbnailLoad();
+        });
+        thumbnailPromiseCache.set(key, promise);
+    }
+    let released = false;
+    return {
+        promise,
+        release: () => {
+            if (released)
+                return;
+            released = true;
+            const consumers = thumbnailConsumerCounts.get(key) ?? 0;
+            if (consumers <= 1)
+                thumbnailConsumerCounts.delete(key);
+            else
+                thumbnailConsumerCounts.set(key, consumers - 1);
+        },
+    };
+}
+export const ModelThumbnail = memo(function ModelThumbnail({ item, deferMs = 0, }) {
+    const wrapperRef = useRef(null);
+    const canvasRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const [failed, setFailed] = useState(false);
+    useEffect(() => {
+        const wrapper = wrapperRef.current;
+        if (!wrapper || typeof IntersectionObserver === "undefined") {
+            setVisible(true);
+            return;
+        }
+        // Use a rootMargin so items slightly below the fold start loading
+        // before the user scrolls to them, making scroll feel instant.
+        const scrollRoot = wrapper.closest("[data-model-thumbnail-root]");
+        const observer = new IntersectionObserver(([entry]) => {
+            setVisible(Boolean(entry?.isIntersecting));
+        }, { root: scrollRoot, rootMargin: "200px" });
+        observer.observe(wrapper);
+        return () => observer.disconnect();
+    }, []);
+    useEffect(() => {
+        if (!visible)
+            return;
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        let cancelled = false;
+        let thumbnail;
+        const load = () => {
+            if (cancelled)
+                return;
+            thumbnail = acquireThumbnail(item);
+            void thumbnail.promise
+                .then((dataUrl) => {
+                if (cancelled || !dataUrl)
+                    return;
+                const ctx = canvas.getContext("2d");
+                if (!ctx)
+                    return;
+                const img = document.createElement("img");
+                img.onload = () => {
+                    if (cancelled)
+                        return;
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                };
+                img.src = dataUrl;
+            })
+                .catch(() => {
+                if (!cancelled)
+                    setFailed(true);
+            });
+        };
+        const timer = window.setTimeout(load, deferMs);
+        return () => {
+            cancelled = true;
+            window.clearTimeout(timer);
+            thumbnail?.release();
+        };
+    }, [deferMs, item, visible]);
+    return (_jsxs("div", { ref: wrapperRef, className: "relative flex aspect-square items-center justify-center overflow-hidden rounded-lg bg-muted/60", children: [_jsx("canvas", { ref: canvasRef, width: 96, height: 96, className: cn("h-full w-full transition-opacity", failed ? "opacity-0" : "opacity-100"), "aria-hidden": "true" }), failed ? _jsx(Leaf, { className: "size-7 text-muted-foreground", "aria-hidden": "true" }) : null, _jsx("span", { className: "pointer-events-none absolute inset-x-1 bottom-1 truncate rounded bg-background/55 px-1.5 py-1 text-center text-[10px] font-medium text-foreground opacity-0 transition-opacity group-hover:opacity-100", children: item.label })] }));
+});
+export function PropCatalog({ items, selectedId = null, categories = defaultPropCatalogCategories, className, onItemPointerDown, }) {
+    const [activeCategory, setActiveCategory] = useState(categories[0]?.id ?? "seating");
+    const [hoveredCategory, setHoveredCategory] = useState(null);
+    const [canScrollLeft, setCanScrollLeft] = useState(false);
+    const [canScrollRight, setCanScrollRight] = useState(false);
+    const categoryScrollRef = useRef(null);
+    const categoryBarRef = useRef(null);
+    const visibleItems = useMemo(() => {
+        return items.filter((item) => item.category === activeCategory);
+    }, [activeCategory, items]);
+    const updateCategoryScroll = () => {
+        const element = categoryScrollRef.current;
+        if (!element)
+            return;
+        setCanScrollLeft(element.scrollLeft > 1);
+        setCanScrollRight(element.scrollLeft + element.clientWidth < element.scrollWidth - 1);
+        setHoveredCategory(null);
+    };
+    useEffect(() => {
+        updateCategoryScroll();
+        const element = categoryScrollRef.current;
+        if (!element)
+            return;
+        const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(updateCategoryScroll);
+        observer?.observe(element);
+        element.addEventListener("scroll", updateCategoryScroll, { passive: true });
+        return () => {
+            observer?.disconnect();
+            element.removeEventListener("scroll", updateCategoryScroll);
+        };
+    }, [categories.length]);
+    const scrollCategories = (direction) => {
+        const element = categoryScrollRef.current;
+        if (!element)
+            return;
+        const maxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+        element.scrollTo({ left: direction === "left" ? 0 : maxScrollLeft, behavior: "auto" });
+        // The left arrow becomes visible after the first rightward scroll, which
+        // can reduce the viewport by one button width. Re-read the final extent
+        // after that layout update so the last category is never stranded.
+        if (direction === "right") {
+            requestAnimationFrame(() => requestAnimationFrame(() => {
+                const finalMaxScrollLeft = Math.max(0, element.scrollWidth - element.clientWidth);
+                element.scrollTo({ left: finalMaxScrollLeft, behavior: "auto" });
+            }));
+        }
+    };
+    const setCategoryHover = (id, target) => {
+        const bar = categoryBarRef.current;
+        if (!bar)
+            return;
+        const targetRect = target.getBoundingClientRect();
+        const barRect = bar.getBoundingClientRect();
+        setHoveredCategory({ id, left: targetRect.left + targetRect.width / 2 - barRect.left });
+    };
+    return (_jsxs("div", { className: cn("flex min-h-0 flex-col gap-3", className), "aria-label": "Prop catalog", children: [_jsxs("div", { ref: categoryBarRef, className: "relative shrink-0 pb-1", role: "tablist", "aria-label": "Prop categories", children: [canScrollLeft ? (_jsx("span", { "aria-hidden": "true", className: "absolute left-0 top-0 z-10 size-8 rounded-md bg-background" })) : null, _jsx("button", { type: "button", tabIndex: canScrollLeft ? 0 : -1, "aria-hidden": !canScrollLeft, className: cn("absolute left-0 top-0 z-20 flex size-8 items-center justify-center rounded-md bg-background text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground", !canScrollLeft ? "pointer-events-none invisible" : null), "aria-label": "Scroll categories left", onClick: () => scrollCategories("left"), children: _jsx(ChevronLeft, { className: "size-5", "aria-hidden": "true" }) }), _jsx("div", { ref: categoryScrollRef, className: "w-full overflow-x-auto overflow-y-visible [scrollbar-width:none] [&::-webkit-scrollbar]:hidden", children: _jsx("div", { className: "flex min-w-max gap-1", children: categories.map(({ id, label, icon: Icon }) => (_jsx("button", { type: "button", role: "tab", "aria-label": label, "aria-selected": activeCategory === id, className: cn("group/category relative flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-background/30 text-muted-foreground transition-colors hover:border-primary/70 hover:bg-accent/70 hover:text-accent-foreground", activeCategory === id ? "border-primary bg-accent text-accent-foreground" : null), onClick: () => setActiveCategory(id), onMouseEnter: (event) => setCategoryHover(id, event.currentTarget), onMouseLeave: () => setHoveredCategory(null), onFocus: (event) => setCategoryHover(id, event.currentTarget), onBlur: () => setHoveredCategory(null), children: _jsx(Icon, { className: "size-4", "aria-hidden": "true" }) }, id))) }) }), canScrollRight ? (_jsx("span", { "aria-hidden": "true", className: "absolute right-0 top-0 z-10 size-8 rounded-md bg-background" })) : null, _jsx("button", { type: "button", tabIndex: canScrollRight ? 0 : -1, "aria-hidden": !canScrollRight, className: cn("absolute right-0 top-0 z-20 flex size-8 items-center justify-center rounded-md bg-background text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground", !canScrollRight ? "pointer-events-none invisible" : null), "aria-label": "Scroll categories right", onClick: () => scrollCategories("right"), children: _jsx(ChevronRight, { className: "size-5", "aria-hidden": "true" }) }), hoveredCategory ? (_jsx("div", { className: "pointer-events-none absolute top-full z-20 mt-1 rounded bg-background/90 px-2 py-1 text-[10px] font-medium text-foreground shadow-md backdrop-blur-sm", style: { left: hoveredCategory.left, transform: "translateX(-50%)" }, children: categories.find((category) => category.id === hoveredCategory.id)?.label })) : null] }), visibleItems.length > 0 ? (_jsx("div", { className: "min-h-0 flex-1 overflow-y-auto pr-1", role: "tabpanel", "data-model-thumbnail-root": true, children: _jsx("div", { className: "grid grid-cols-3 gap-2", children: visibleItems.map((item) => (_jsx(Card, { className: cn("group overflow-hidden border-border bg-card/60 p-1 transition-colors", selectedId === item.id
+                            ? "border-primary bg-accent/70"
+                            : "hover:border-primary/50 hover:bg-accent/40"), children: _jsxs("button", { type: "button", "aria-label": `Add ${item.label}`, className: "block w-full rounded-md text-left outline-none focus-visible:ring-2 focus-visible:ring-ring", onPointerDown: (event) => {
+                                if (event.button !== 0)
+                                    return;
+                                event.preventDefault();
+                                event.stopPropagation();
+                                onItemPointerDown?.(item, event);
+                            }, children: [_jsx(ModelThumbnail, { item: item }), _jsx("span", { className: "sr-only", children: item.label })] }) }, item.id))) }) })) : (_jsx("p", { className: "rounded-lg border border-dashed border-border px-3 py-5 text-center text-xs text-muted-foreground", children: "No props in this category yet." }))] }));
+}

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

@@ -0,0 +1,33 @@
+import { type ReactNode } from "react";
+export type SceneSettingsProps = {
+    cameraViewMode: "perspective" | "orthographic";
+    onCameraViewModeChange: (value: "perspective" | "orthographic") => void;
+    allowCameraViewModeChange?: boolean;
+    /** Standalone character selection and customization menu toggle. */
+    characterDesignerEnabled?: boolean;
+    onCharacterDesignerChange?: (value: boolean) => void;
+    /** DOM target for the character designer control in an app shell toolbar. */
+    characterDesignerTargetId?: string;
+    /** Open the scene-specific room layout and interior prop designer. */
+    onOpenRoomDesigner?: () => void;
+    /** DOM target for the account drawer trigger in an app shell toolbar. */
+    accountTargetId?: string;
+    accountLabel?: string;
+    accountAuthenticated?: boolean;
+    accountBusy?: boolean;
+    accountMusicControl?: ReactNode;
+    onAccountSignIn?: () => void;
+    onAccountSignOut?: () => void;
+    showAccountDrawer?: boolean;
+    /** DOM target for the compact camera controls in an app shell toolbar. */
+    cameraTargetId?: string;
+    /** DOM target for the room designer control in an app shell toolbar. */
+    roomDesignerTargetId?: string;
+    /** DOM target for the development scene editor control in an app shell toolbar. */
+    sceneEditorTargetId?: string;
+    /** Development-only scene editor toggle, available in perspective view. */
+    sceneEditorEnabled?: boolean;
+    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;

package/dist/components/scene-settings.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+import { useEffect, useState } from "react";
+import { Box, Camera, Focus, Grid3X3, UserRoundPen } from "lucide-react";
+import { AccountDrawer } from "./account-drawer";
+import { Button } from "#components/ui/button";
+function usePortalTarget(targetId) {
+    const [target, setTarget] = useState(null);
+    useEffect(() => {
+        setTarget(targetId ? document.getElementById(targetId) : null);
+    }, [targetId]);
+    return target;
+}
+function renderInTarget(content, target) {
+    return target ? createPortal(content, target) : 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, }) {
+    const cameraTarget = usePortalTarget(cameraTargetId);
+    const characterDesignerTarget = usePortalTarget(characterDesignerTargetId);
+    const roomDesignerTarget = usePortalTarget(roomDesignerTargetId);
+    const sceneEditorTarget = usePortalTarget(sceneEditorTargetId);
+    const cameraControl = (_jsxs("div", { className: "workspace-camera-control", role: "group", "aria-label": "Camera view", children: [_jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === "perspective" ? "default" : "outline", className: "workspace-camera-button", "aria-label": "Perspective camera", title: "Perspective camera", "aria-pressed": cameraViewMode === "perspective", onClick: () => onCameraViewModeChange("perspective"), children: [_jsx(Camera, { "aria-hidden": "true" }), "Perspective"] }), _jsxs(Button, { type: "button", size: "sm", variant: cameraViewMode === "orthographic" ? "default" : "outline", className: "workspace-camera-button", "aria-label": "Top-down camera", title: "Top-down camera", "aria-pressed": cameraViewMode === "orthographic", onClick: () => onCameraViewModeChange("orthographic"), children: [_jsx(Focus, { "aria-hidden": "true" }), "Top-down"] })] }));
+    const characterDesignerControl = (_jsxs(Button, { type: "button", variant: 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), children: [_jsx(UserRoundPen, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-character-designer-label", children: "Character" })] }));
+    const roomDesignerControl = (_jsxs(Button, { type: "button", variant: "outline", size: "sm", "aria-haspopup": "dialog", "aria-label": "Open room designer", title: "Open room designer", onClick: onOpenRoomDesigner, children: [_jsx(Grid3X3, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-room-designer-label", children: "Room designer" })] }));
+    const sceneEditorControl = (_jsxs(Button, { type: "button", variant: 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), children: [_jsx(Box, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "workspace-scene-editor-label", children: "Scene editor" })] }));
+    return (_jsxs(_Fragment, { children: [showAccountDrawer ? (_jsx(AccountDrawer, { accountLabel: accountLabel, authenticated: accountAuthenticated, busy: accountBusy, musicControl: accountMusicControl, triggerTargetId: accountTargetId, onSignIn: onAccountSignIn, onSignOut: onAccountSignOut })) : null, allowCameraViewModeChange ? renderInTarget(cameraControl, cameraTarget) : null, characterDesignerEnabled != null &&
+                !characterDesignerEnabled &&
+                onCharacterDesignerChange ? (characterDesignerTarget ? (createPortal(characterDesignerControl, characterDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: characterDesignerControl }))) : null, onOpenRoomDesigner && cameraViewMode === "orthographic" ? (roomDesignerTarget ? (createPortal(roomDesignerControl, roomDesignerTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: roomDesignerControl }))) : null, sceneEditorEnabled != null &&
+                !sceneEditorEnabled &&
+                onSceneEditorChange &&
+                cameraViewMode === "perspective" ? (sceneEditorTarget ? (createPortal(sceneEditorControl, sceneEditorTarget)) : (_jsx("div", { className: "fixed right-4 top-16 z-40", children: sceneEditorControl }))) : null] }));
+}

package/dist/components/theme-provider.d.ts

@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+/** Shared theme provider used by each Next app in the workspace. */
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/theme-provider.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+const CompatibleNextThemesProvider = NextThemesProvider;
+/** Shared theme provider used by each Next app in the workspace. */
+export function ThemeProvider({ children }) {
+    return (_jsx(CompatibleNextThemesProvider, { attribute: "class", defaultTheme: "system", enableSystem: true, disableTransitionOnChange: true, children: children }));
+}

package/dist/components/theme-toggle.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Compact sun/moon theme selector. Wired to the next-themes provider so the
+ * choice persists across the app (localStorage) and applies to every scene.
+ */
+export declare function ThemeToggle({ className }: {
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/theme-toggle.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+/**
+ * Compact sun/moon theme selector. Wired to the next-themes provider so the
+ * choice persists across the app (localStorage) and applies to every scene.
+ */
+export function ThemeToggle({ className }) {
+    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 (_jsxs("div", { className: cn("inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5", className), role: "radiogroup", "aria-label": "Theme", children: [_jsx(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", children: _jsx(Monitor, { className: "size-4", "aria-hidden": "true" }) }), _jsx(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", children: _jsx(Sun, { className: "size-4", "aria-hidden": "true" }) }), _jsx(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", children: _jsx(Moon, { className: "size-4", "aria-hidden": "true" }) })] }));
+}

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,7 @@
+import { useRender } from "@base-ui/react/use-render";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "outline" | "secondary" | "ghost" | "destructive" | "link" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export { Badge, badgeVariants };