@adea-ai/ui 0.60.3 → 0.61.0

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

@@ -1,149 +0,0 @@
-import { ZoomIn, ZoomOut } from 'lucide-solid'
-import { onCleanup, Show, type JSX } from 'solid-js'
-
-import { Button } from '#components/ui/button'
-import { cn } from '#lib/utils'
-
-type ControlButtonProps = {
-  code: string
-  label: string
-  children: JSX.Element
-  class?: string
-}
-
-function sendKeyEvent(type: 'keydown' | 'keyup', code: string): void {
-  window.dispatchEvent(
-    new KeyboardEvent(type, { bubbles: true, cancelable: true, code, key: code })
-  )
-}
-
-function ControlButton(props: ControlButtonProps) {
-  let pressed = false
-  let pressedPointer: number | null = null
-
-  const release = () => {
-    if (!pressed) return
-    pressed = false
-    pressedPointer = null
-    sendKeyEvent('keyup', props.code)
-  }
-
-  // Self-heal: release the key if the pointerup lands elsewhere (e.g. the
-  // scene DOM changes mid-teleport) or the window loses focus. PointerId
-  // matching preserves multi-touch.
-  if (typeof window !== 'undefined') {
-    const onWindowPointerUp = (event: PointerEvent) => {
-      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: PointerEvent & { currentTarget: HTMLButtonElement }) => {
-    event.preventDefault()
-    if (pressed) return
-    pressed = true
-    pressedPointer = event.pointerId
-    event.currentTarget.setPointerCapture(event.pointerId)
-    sendKeyEvent('keydown', props.code)
-  }
-
-  return (
-    <button
-      type="button"
-      aria-label={props.label}
-      class={cn(
-        'flex size-14 touch-none select-none items-center justify-center rounded-2xl border border-scrim-edge/25 bg-scrim/65 p-2 text-scrim-foreground shadow-lg backdrop-blur-sm transition active:scale-95 [-webkit-touch-callout:none] [-webkit-user-select:none]',
-        props.class
-      )}
-      onContextMenu={(event) => event.preventDefault()}
-      onPointerCancel={release}
-      onPointerDown={press}
-      onPointerLeave={release}
-      onPointerUp={release}
-    >
-      {props.children}
-    </button>
-  )
-}
-
-export type OnScreenControlsProps = {
-  onZoomIn?: () => void
-  onZoomOut?: () => void
-  showMovementControls?: boolean
-  showJumpControl?: boolean
-}
-
-export function OnScreenControls(props: OnScreenControlsProps) {
-  const showMovementControls = () => props.showMovementControls ?? true
-  const showJumpControl = () => props.showJumpControl ?? true
-  const showZoomControls = () => Boolean(props.onZoomIn && props.onZoomOut)
-
-  return (
-    <div
-      data-agent-hq-on-screen-controls
-      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]"
-    >
-      <Show when={showMovementControls()}>
-        <div class="pointer-events-auto grid grid-cols-3 gap-1.5 rounded-3xl bg-scrim/20 p-2 backdrop-blur-[2px]">
-          <span />
-          <ControlButton code="KeyW" label="Move forward" class="size-12 rounded-xl text-xl">
-            ▲
-          </ControlButton>
-          <span />
-          <ControlButton code="KeyA" label="Move left" class="size-12 rounded-xl text-xl">
-            ◀
-          </ControlButton>
-          <ControlButton code="KeyS" label="Move backward" class="size-12 rounded-xl text-xl">
-            ▼
-          </ControlButton>
-          <ControlButton code="KeyD" label="Move right" class="size-12 rounded-xl text-xl">
-            ▶
-          </ControlButton>
-        </div>
-      </Show>
-      <div class="pointer-events-auto ml-auto flex flex-col items-end gap-2">
-        <Show when={showZoomControls()}>
-          <div
-            class="flex items-center gap-1.5 rounded-2xl bg-scrim/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"
-              class="border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80"
-              onClick={() => props.onZoomOut?.()}
-            >
-              <ZoomOut aria-hidden="true" />
-            </Button>
-            <Button
-              type="button"
-              variant="secondary"
-              size="icon-lg"
-              aria-label="Zoom in"
-              title="Zoom in"
-              class="border border-scrim-edge/25 bg-scrim/65 text-scrim-foreground shadow-lg backdrop-blur-sm hover:bg-scrim/80"
-              onClick={() => props.onZoomIn?.()}
-            >
-              <ZoomIn aria-hidden="true" />
-            </Button>
-          </div>
-        </Show>
-        <Show when={showJumpControl()}>
-          <ControlButton code="Space" label="Jump" class="text-xs font-semibold">
-            JUMP
-          </ControlButton>
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/components/scene-settings.tsx

@@ -1,199 +0,0 @@
-import { Box, Camera, Focus, Grid3X3, UserRoundPen } from 'lucide-solid'
-import { createEffect, createSignal, Show, type JSX } from 'solid-js'
-import { Portal } from 'solid-js/web'
-
-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?: JSX.Element
-  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 | undefined) {
-  const [target, setTarget] = createSignal<HTMLElement | null>(null)
-
-  createEffect(() => {
-    const id = targetId()
-    setTarget(id ? document.getElementById(id) : null)
-  })
-
-  return target
-}
-
-function renderInTarget(content: JSX.Element, target: HTMLElement | null) {
-  return target ? <Portal mount={target}>{content}</Portal> : content
-}
-
-/** Compact scene controls shared by the HQ shell and other scene hosts. */
-export function SceneSettings(props: SceneSettingsProps) {
-  const cameraTarget = usePortalTarget(() => props.cameraTargetId)
-  const characterDesignerTarget = usePortalTarget(() => props.characterDesignerTargetId)
-  const roomDesignerTarget = usePortalTarget(() => props.roomDesignerTargetId)
-  const sceneEditorTarget = usePortalTarget(() => props.sceneEditorTargetId)
-
-  const cameraControl = (
-    <div class="workspace-camera-control" role="group" aria-label="Camera view">
-      <Button
-        type="button"
-        size="sm"
-        variant={props.cameraViewMode === 'perspective' ? 'default' : 'outline'}
-        class="workspace-camera-button"
-        aria-label="Perspective camera"
-        title="Perspective camera"
-        aria-pressed={props.cameraViewMode === 'perspective'}
-        onClick={() => props.onCameraViewModeChange('perspective')}
-      >
-        <Camera aria-hidden="true" />
-        Perspective
-      </Button>
-      <Button
-        type="button"
-        size="sm"
-        variant={props.cameraViewMode === 'orthographic' ? 'default' : 'outline'}
-        class="workspace-camera-button"
-        aria-label="Top-down camera"
-        title="Top-down camera"
-        aria-pressed={props.cameraViewMode === 'orthographic'}
-        onClick={() => props.onCameraViewModeChange('orthographic')}
-      >
-        <Focus aria-hidden="true" />
-        Top-down
-      </Button>
-    </div>
-  )
-
-  const characterDesignerControl = (
-    <Button
-      type="button"
-      variant={props.characterDesignerEnabled ? 'default' : 'outline'}
-      size="sm"
-      aria-haspopup="dialog"
-      aria-label={
-        props.characterDesignerEnabled ? 'Close character designer' : 'Open character designer'
-      }
-      title={
-        props.characterDesignerEnabled ? 'Close character designer' : 'Open character designer'
-      }
-      aria-pressed={props.characterDesignerEnabled}
-      onClick={() => props.onCharacterDesignerChange?.(!props.characterDesignerEnabled)}
-    >
-      <UserRoundPen class="size-4" aria-hidden="true" />
-      <span class="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={() => props.onOpenRoomDesigner?.()}
-    >
-      <Grid3X3 class="size-4" aria-hidden="true" />
-      <span class="workspace-room-designer-label">Room designer</span>
-    </Button>
-  )
-
-  const sceneEditorControl = (
-    <Button
-      type="button"
-      variant={props.sceneEditorEnabled ? 'default' : 'outline'}
-      size="sm"
-      aria-haspopup="dialog"
-      aria-label={props.sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
-      title={props.sceneEditorEnabled ? 'Close scene editor' : 'Open scene editor'}
-      aria-pressed={props.sceneEditorEnabled}
-      onClick={() => props.onSceneEditorChange?.(!props.sceneEditorEnabled)}
-    >
-      <Box class="size-4" aria-hidden="true" />
-      <span class="workspace-scene-editor-label">Scene editor</span>
-    </Button>
-  )
-
-  const showCharacterDesignerControl = () =>
-    props.characterDesignerEnabled != null &&
-    !props.characterDesignerEnabled &&
-    Boolean(props.onCharacterDesignerChange)
-
-  const showRoomDesignerControl = () =>
-    Boolean(props.onOpenRoomDesigner) && props.cameraViewMode === 'orthographic'
-
-  const showSceneEditorControl = () =>
-    props.sceneEditorEnabled != null &&
-    !props.sceneEditorEnabled &&
-    Boolean(props.onSceneEditorChange) &&
-    props.cameraViewMode === 'perspective'
-
-  return (
-    <>
-      <Show when={props.showAccountDrawer ?? true}>
-        <AccountDrawer
-          accountLabel={props.accountLabel}
-          authenticated={props.accountAuthenticated}
-          busy={props.accountBusy}
-          musicControl={props.accountMusicControl}
-          triggerTargetId={props.accountTargetId}
-          onSignIn={props.onAccountSignIn}
-          onSignOut={props.onAccountSignOut}
-        />
-      </Show>
-      <Show when={props.allowCameraViewModeChange ?? true}>
-        {renderInTarget(cameraControl, cameraTarget())}
-      </Show>
-      <Show when={showCharacterDesignerControl()}>
-        <Show
-          when={characterDesignerTarget()}
-          fallback={<div class="fixed right-4 top-16 z-40">{characterDesignerControl}</div>}
-        >
-          {(target) => <Portal mount={target()}>{characterDesignerControl}</Portal>}
-        </Show>
-      </Show>
-      <Show when={showRoomDesignerControl()}>
-        <Show
-          when={roomDesignerTarget()}
-          fallback={<div class="fixed right-4 top-16 z-40">{roomDesignerControl}</div>}
-        >
-          {(target) => <Portal mount={target()}>{roomDesignerControl}</Portal>}
-        </Show>
-      </Show>
-      <Show when={showSceneEditorControl()}>
-        <Show
-          when={sceneEditorTarget()}
-          fallback={<div class="fixed right-4 top-16 z-40">{sceneEditorControl}</div>}
-        >
-          {(target) => <Portal mount={target()}>{sceneEditorControl}</Portal>}
-        </Show>
-      </Show>
-    </>
-  )
-}

package/src/components/theme-preview.tsx

@@ -1,170 +0,0 @@
-/*
- * Copyright (c) 2026 Wing
- * Licensed under the MIT License.
- *
- * Appearance miniatures substantially translated from Zeron
- * crates/ui/src/settings/appearance.rs (the `miniature`, `miniature_split`,
- * and `palette_preview` builders) with the option-card frame rhythm of
- * crates/ui/src/settings/widgets.rs (`option_card`), revision
- * 30a9a9537c5ec96226c87f4bf349b6f77c5dfb59: a sidebar-plus-pane miniature of
- * the real chrome painted from a variant's own colors, the split light/dark
- * half for System mode, and the three-band palette strip. Modified for
- * Adea's token roles (card/background/border/foreground/primary stand in for
- * the donor's surface/bg/border/text/accent) and for the accent default
- * sample, which shows the derived accent wash over foreground glyph bars.
- * See NOTICE and docs/research/dev-view-donor-audit.md.
- *
- * Like theme-swatch.tsx, these components are the sanctioned bridge between
- * runtime token data and the DOM: the colors they paint arrive as theme
- * manifest values, so painting them must inline them (token data may never
- * become a component color literal). The previewed variant's border color
- * travels through the `--preview-border` custom property consumed by the
- * `.theme-preview-border` hook in styles/theme.css.
- */
-import type { JSX } from 'solid-js'
-
-import type { ThemeVariant } from './appearance'
-
-/** Which corners of the miniature round themselves (donor `Corners`). */
-export type MiniatureCorners = 'all' | 'left' | 'right'
-
-const cornerClass: Record<MiniatureCorners, string> = {
-  all: 'rounded-md',
-  left: 'rounded-l-md',
-  right: 'rounded-r-md',
-}
-
-/** The glyph-bar ramp in the accent default sample (donor bar heights). */
-const accentRamp: readonly { height: string; opacity: string }[] = Object.freeze([
-  { height: '13px', opacity: '0.4' },
-  { height: '16px', opacity: '0.7' },
-  { height: '11px', opacity: '1' },
-])
-
-function Bar(props: { fraction: number; opacity: number; color: string }) {
-  return (
-    <span
-      class="h-[5px] rounded-[3px]"
-      // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-      style={{
-        width: `${Math.round(props.fraction * 100)}%`,
-        'background-color': props.color,
-        opacity: props.opacity,
-      }}
-    />
-  )
-}
-
-/**
- * The sidebar-plus-pane miniature of the app chrome, painted from one
- * variant: a sidebar of text bars beside a bordered content pane. (Zeron
- * `miniature`; bar rhythm and opacities preserved.)
- */
-export function ThemeMiniature(props: {
-  variant: ThemeVariant
-  corners?: MiniatureCorners
-  class?: string
-}) {
-  const colors = () => props.variant.colors
-  return (
-    <span
-      data-theme-miniature
-      class={`flex h-full w-full overflow-hidden ${cornerClass[props.corners ?? 'all']} ${props.class ?? ''}`}
-      aria-hidden="true"
-      // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-      style={{ 'background-color': colors().card }}
-    >
-      <span class="flex h-full w-11 shrink-0 flex-col gap-[7px] px-2 pt-3.5">
-        <Bar fraction={0.7} opacity={0.34} color={colors().foreground} />
-        <Bar fraction={1} opacity={0.22} color={colors().foreground} />
-        <Bar fraction={0.85} opacity={0.22} color={colors().foreground} />
-        <Bar fraction={1} opacity={0.22} color={colors().foreground} />
-      </span>
-      <span
-        class="theme-preview-border my-2 mr-2 flex min-w-0 flex-1 flex-col gap-[7px] rounded-md border p-2.5"
-        // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-        style={{ 'background-color': colors().background, '--preview-border': colors().border }}
-      >
-        <Bar fraction={0.62} opacity={0.34} color={colors().foreground} />
-        <Bar fraction={0.88} opacity={0.22} color={colors().foreground} />
-        <Bar fraction={0.76} opacity={0.22} color={colors().foreground} />
-        <Bar fraction={0.52} opacity={0.22} color={colors().foreground} />
-      </span>
-    </span>
-  )
-}
-
-/**
- * The System-mode card: the light and dark miniatures side by side, each
- * rounding only its outer corners. (Zeron `miniature_split`.)
- */
-export function ThemeMiniatureSplit(props: {
-  light: ThemeVariant
-  dark: ThemeVariant
-  class?: string
-}) {
-  return (
-    <span class={`flex h-full w-full ${props.class ?? ''}`} aria-hidden="true">
-      <span class="h-full w-1/2 overflow-hidden">
-        <ThemeMiniature variant={props.light} corners="left" />
-      </span>
-      <span class="h-full w-1/2 overflow-hidden">
-        <ThemeMiniature variant={props.dark} corners="right" />
-      </span>
-    </span>
-  )
-}
-
-/**
- * The compact palette strip in a theme picker row: surface, background, and
- * accent thirds behind the variant's border. (Zeron `palette_preview`.)
- */
-export function PalettePreview(props: { variant: ThemeVariant; class?: string }) {
-  const bands = () => [
-    props.variant.colors.card,
-    props.variant.colors.background,
-    props.variant.colors.primary,
-  ]
-  return (
-    <span
-      class="theme-preview-border flex h-[18px] w-[30px] shrink-0 overflow-hidden rounded-[5px] border"
-      aria-hidden="true"
-      // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-      style={{ '--preview-border': props.variant.colors.border }}
-    >
-      {bands().map((band) => (
-        <span
-          class="h-full w-1/3"
-          // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-          style={{ 'background-color': band }}
-        />
-      ))}
-    </span>
-  )
-}
-
-/**
- * The "Theme default" accent sample: the derived accent wash with a ramp of
- * foreground glyph bars. (Zeron's accent-wash swatch; Adea derives the wash
- * from the accent roles and paints the glyph ramp with foreground opacities.)
- */
-export function AccentDefaultSample(props: { variant: ThemeVariant; class?: string }): JSX.Element {
-  const accent = () => props.variant.colors.primary
-  const foreground = () => props.variant.colors.foreground
-  return (
-    <span
-      class={`flex h-full w-full items-center justify-center gap-[2px] rounded-[6px] ${props.class ?? ''}`}
-      aria-hidden="true"
-      // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-      style={{ 'background-color': `color-mix(in srgb, ${accent()} 16%, transparent)` }}
-    >
-      {accentRamp.map((bar) => (
-        <span
-          class="w-1 rounded-[2px]"
-          // oxlint-disable-next-line no-inline-styles -- dynamic token data, see file docstring
-          style={{ height: bar.height, 'background-color': foreground(), opacity: bar.opacity }}
-        />
-      ))}
-    </span>
-  )
-}