@adea-ai/ui 0.10.8

package/src/components/scene-settings.tsx

@@ -0,0 +1,202 @@
+"use client";
+
+import { createPortal } from "react-dom";
+import { useEffect, useState, type ReactNode } from "react";
+import { Box, Camera, Focus, Grid3X3, UserRoundPen } from "lucide-react";
+import { AccountDrawer } from "./account-drawer";
+import { Button } from "#components/ui/button";
+
+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;
+};
+
+function usePortalTarget(targetId?: string) {
+  const [target, setTarget] = useState<HTMLElement | null>(null);
+
+  useEffect(() => {
+    setTarget(targetId ? document.getElementById(targetId) : null);
+  }, [targetId]);
+
+  return target;
+}
+
+function renderInTarget(content: ReactNode, target: HTMLElement | null) {
+  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,
+}: SceneSettingsProps) {
+  const cameraTarget = usePortalTarget(cameraTargetId);
+  const characterDesignerTarget = usePortalTarget(characterDesignerTargetId);
+  const roomDesignerTarget = usePortalTarget(roomDesignerTargetId);
+  const sceneEditorTarget = usePortalTarget(sceneEditorTargetId);
+
+  const cameraControl = (
+    <div className="workspace-camera-control" role="group" aria-label="Camera view">
+      <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")}
+      >
+        <Camera aria-hidden="true" />
+        Perspective
+      </Button>
+      <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")}
+      >
+        <Focus aria-hidden="true" />
+        Top-down
+      </Button>
+    </div>
+  );
+
+  const characterDesignerControl = (
+    <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)}
+    >
+      <UserRoundPen className="size-4" aria-hidden="true" />
+      <span className="workspace-character-designer-label">Character</span>
+    </Button>
+  );
+
+  const roomDesignerControl = (
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      aria-haspopup="dialog"
+      aria-label="Open room designer"
+      title="Open room designer"
+      onClick={onOpenRoomDesigner}
+    >
+      <Grid3X3 className="size-4" aria-hidden="true" />
+      <span className="workspace-room-designer-label">Room designer</span>
+    </Button>
+  );
+
+  const sceneEditorControl = (
+    <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)}
+    >
+      <Box className="size-4" aria-hidden="true" />
+      <span className="workspace-scene-editor-label">Scene editor</span>
+    </Button>
+  );
+
+  return (
+    <>
+      {showAccountDrawer ? (
+        <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)
+        ) : (
+          <div className="fixed right-4 top-16 z-40">{characterDesignerControl}</div>
+        )
+      ) : null}
+      {onOpenRoomDesigner && cameraViewMode === "orthographic" ? (
+        roomDesignerTarget ? (
+          createPortal(roomDesignerControl, roomDesignerTarget)
+        ) : (
+          <div className="fixed right-4 top-16 z-40">{roomDesignerControl}</div>
+        )
+      ) : null}
+      {sceneEditorEnabled != null &&
+      !sceneEditorEnabled &&
+      onSceneEditorChange &&
+      cameraViewMode === "perspective" ? (
+        sceneEditorTarget ? (
+          createPortal(sceneEditorControl, sceneEditorTarget)
+        ) : (
+          <div className="fixed right-4 top-16 z-40">{sceneEditorControl}</div>
+        )
+      ) : null}
+    </>
+  );
+}

package/src/components/theme-provider.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import type { ComponentProps, ReactElement, ReactNode } from "react";
+
+// Bun 1.4 can resolve next-themes against a separate React type instance. The
+// runtime component is compatible, but TypeScript then drops `children` from
+// its JSX props. Keep the shared provider's public contract stable by
+// normalizing the third-party component's props at this boundary.
+type CompatibleNextThemesProviderProps = ComponentProps<typeof NextThemesProvider> & {
+  children?: ReactNode;
+};
+
+const CompatibleNextThemesProvider = NextThemesProvider as unknown as (
+  props: CompatibleNextThemesProviderProps
+) => ReactElement;
+
+/** Shared theme provider used by each Next app in the workspace. */
+export function ThemeProvider({ children }: { children: ReactNode }) {
+  return (
+    <CompatibleNextThemesProvider
+      attribute="class"
+      defaultTheme="system"
+      enableSystem
+      disableTransitionOnChange
+    >
+      {children}
+    </CompatibleNextThemesProvider>
+  );
+}

package/src/components/theme-toggle.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+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 }: { className?: string }) {
+  const { theme, setTheme } = useTheme();
+  const mounted = useSyncExternalStore(
+    () => () => undefined,
+    () => true,
+    () => false
+  );
+
+  // next-themes resolves the saved/system theme after mount. Use the stable
+  // light presentation for both SSR and the first client render so the
+  // aria/class attributes cannot mismatch during hydration.
+  const selectedTheme = mounted ? theme : "system";
+
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center gap-1.5 rounded-full border border-input bg-background p-1.5",
+        className
+      )}
+      role="radiogroup"
+      aria-label="Theme"
+    >
+      <Button
+        type="button"
+        role="radio"
+        aria-checked={selectedTheme === "system"}
+        aria-label="System theme"
+        variant={selectedTheme === "system" ? "default" : "ghost"}
+        size="icon-sm"
+        onClick={() => setTheme("system")}
+        className="rounded-full"
+      >
+        <Monitor className="size-4" aria-hidden="true" />
+      </Button>
+      <Button
+        type="button"
+        role="radio"
+        aria-checked={selectedTheme === "light"}
+        aria-label="Light theme"
+        variant={selectedTheme === "light" ? "default" : "ghost"}
+        size="icon-sm"
+        onClick={() => setTheme("light")}
+        className="rounded-full"
+      >
+        <Sun className="size-4" aria-hidden="true" />
+      </Button>
+      <Button
+        type="button"
+        role="radio"
+        aria-checked={selectedTheme === "dark"}
+        aria-label="Dark theme"
+        variant={selectedTheme === "dark" ? "default" : "ghost"}
+        size="icon-sm"
+        onClick={() => setTheme("dark")}
+        className="rounded-full"
+      >
+        <Moon className="size-4" aria-hidden="true" />
+      </Button>
+    </div>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,49 @@
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "#lib/utils";
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant = "default",
+  render,
+  ...props
+}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: "span",
+    props: mergeProps<"span">(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props
+    ),
+    render,
+    state: {
+      slot: "badge",
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -0,0 +1,60 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "#lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)] aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        success:
+          "bg-[#1a7f37]/10 text-[#1a7f37] hover:bg-[#1a7f37]/20 focus-visible:border-[#1a7f37]/40 focus-visible:ring-[#1a7f37]/20 dark:bg-[#3fb950]/20 dark:text-[#7ee787] dark:hover:bg-[#3fb950]/30 dark:focus-visible:ring-[#3fb950]/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,18 @@
+import type { HTMLAttributes } from "react";
+import { cn } from "#lib/utils";
+
+function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn("rounded-xl border bg-card text-card-foreground shadow-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div data-slot="card-content" className={cn("p-4", className)} {...props} />;
+}
+
+export { Card, CardContent };

package/src/components/ui/dialog.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+
+import { cn } from "#lib/utils";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-[120] bg-slate-950/55 backdrop-blur-[2px] transition-opacity duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & { showCloseButton?: boolean }) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Viewport
+        data-slot="dialog-viewport"
+        className="fixed inset-0 z-[120] flex items-center justify-center p-4"
+      >
+        <DialogPrimitive.Popup
+          data-slot="dialog-content"
+          className={cn(
+            "relative grid max-h-[min(44rem,calc(100dvh-2rem))] w-full max-w-2xl gap-0 overflow-hidden rounded-2xl border bg-card text-card-foreground shadow-2xl outline-none transition-[opacity,transform] duration-200 data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0",
+            className
+          )}
+          {...props}
+        >
+          {children}
+          {showCloseButton && (
+            <DialogPrimitive.Close
+              data-slot="dialog-close"
+              className="absolute right-4 top-4 inline-flex size-8 items-center justify-center rounded-lg text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50"
+              aria-label="Close dialog"
+            >
+              <X className="size-4" aria-hidden="true" />
+            </DialogPrimitive.Close>
+          )}
+        </DialogPrimitive.Popup>
+      </DialogPrimitive.Viewport>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-1.5 border-b px-6 py-5 pr-14", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 border-t px-6 py-4 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base font-semibold tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-sm leading-5 text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};