@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/wall-type/wall-type-menu.tsx

@@ -0,0 +1,167 @@
+'use client'
+
+import {
+  type Assembly,
+  getWallAssemblyPreset,
+  usePascalI18n,
+  type WallTypeDefinition,
+} from '@pascal-app/core'
+import { Copy, Pencil, Plus, Trash2 } from 'lucide-react'
+import { useState } from 'react'
+import { cn } from '../../../lib/utils'
+import {
+  deleteProjectWallType,
+  newWallTypeBlockedReason,
+  useProjectWallTypes,
+  type WallTypePlacement,
+  wallTypePlacementOf,
+} from '../../../lib/wall-type'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../primitives/dropdown-menu'
+import { type WallTypeEditorRequest, WallTypeEditorDialog } from './wall-type-editor-dialog'
+
+/**
+ * A wall's project wall types, beside its Assembly preset: make a new type, edit the project
+ * type the wall is built with, duplicate its stack (a preset's, a project type's or its own
+ * custom layers) into a new type, or delete the project type. A type saved here is applied to
+ * the wall (`onApply`) in the same undo step. "New" and "Duplicate" are off, and say why, once
+ * the project keeps as many types as it can (`newWallTypeBlockedReason`).
+ */
+export function WallTypeMenu({
+  assembly,
+  className,
+  onApply,
+  placement,
+}: {
+  /** The wall's stack; absent for a plain single-layer wall. */
+  assembly: Assembly | undefined
+  className?: string
+  onApply: (type: WallTypeDefinition) => void
+  /** The kind of wall a new type starts as when the wall has no stack to read it from. */
+  placement: WallTypePlacement
+}) {
+  const i18n = usePascalI18n()
+  const projectTypes = useProjectWallTypes()
+  const [editing, setEditing] = useState<WallTypeEditorRequest | null>(null)
+  const presetId = assembly?.presetId
+  const project = presetId ? projectTypes.find((type) => type.id === presetId) : undefined
+  const preset = presetId ? getWallAssemblyPreset(presetId) : undefined
+  const label =
+    project?.label ??
+    preset?.label ??
+    (assembly
+      ? i18n._({ id: 'editor.wallTypeMenu.custom', message: 'Custom' })
+      : i18n._({ id: 'editor.buildPanel.wallTypes.plainWall', message: 'Plain wall' }))
+  const blocked = newWallTypeBlockedReason(projectTypes)
+  const startPlacement = assembly ? wallTypePlacementOf(assembly) : placement
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <button
+            aria-label={i18n._({
+              id: 'editor.wallTypeMenu.wallTypesOf',
+              message: 'Wall types: new, edit or duplicate {label}',
+              values: { label },
+            })}
+            className={cn(
+              'flex size-7 shrink-0 items-center justify-center rounded border border-border bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-foreground data-[state=open]:bg-accent',
+              className,
+            )}
+            title={i18n._({
+              id: 'editor.buildPanel.wallTypeControls.editOrDuplicateThisWallType',
+              message: 'Edit or duplicate this wall type',
+            })}
+            type="button"
+          >
+            <Pencil className="size-3.5" />
+          </button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-56">
+          <DropdownMenuLabel className="truncate text-muted-foreground text-xs">
+            {label}
+          </DropdownMenuLabel>
+          <DropdownMenuItem
+            disabled={!project}
+            onSelect={() =>
+              project &&
+              setEditing({
+                mode: 'edit',
+                placement: wallTypePlacementOf(project.assembly),
+                id: project.id,
+                label: project.label,
+                assembly: project.assembly,
+              })
+            }
+          >
+            <Pencil />
+            {i18n._({
+              id: 'editor.buildPanel.wallTypeControls.editLayers',
+              message: 'Edit layers…',
+            })}
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            disabled={!assembly || !!blocked}
+            onSelect={() =>
+              assembly &&
+              setEditing({ mode: 'duplicate', placement: startPlacement, label, assembly })
+            }
+          >
+            <Copy />
+            {i18n._({
+              id: 'editor.buildPanel.wallTypeControls.duplicateAsANewType',
+              message: 'Duplicate as a new type…',
+            })}
+          </DropdownMenuItem>
+          {project ? (
+            <DropdownMenuItem
+              onSelect={() => deleteProjectWallType(project.id)}
+              variant="destructive"
+            >
+              <Trash2 />
+              {i18n._({
+                id: 'editor.buildPanel.wallTypeControls.deleteFromThisProject',
+                message: 'Delete from this project',
+              })}
+            </DropdownMenuItem>
+          ) : null}
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            disabled={!!blocked}
+            onSelect={() => setEditing({ mode: 'new', placement: startPlacement })}
+          >
+            <Plus />
+            {i18n._({
+              id: 'editor.buildPanel.wallTypeControls.newWallType',
+              message: 'New wall type…',
+            })}
+          </DropdownMenuItem>
+          {blocked ? (
+            <p className="px-2 pt-1 pb-1.5 text-[11px] text-muted-foreground leading-snug">
+              {blocked}
+            </p>
+          ) : preset ? (
+            <p className="px-2 pt-1 pb-1.5 text-[11px] text-muted-foreground leading-snug">
+              {i18n._({
+                id: 'editor.buildPanel.wallTypeControls.presetsStayAsCitedDuplicateOne',
+                message: 'Presets stay as cited. Duplicate one to change its layers.',
+              })}
+            </p>
+          ) : null}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <WallTypeEditorDialog
+        onClose={() => setEditing(null)}
+        onSaved={onApply}
+        request={editing}
+      />
+    </>
+  )
+}

package/src/components/viewer/floorplan-compass-button.tsx

@@ -1,8 +1,10 @@
 'use client'
 
+import { usePascalI18n } from '@pascal-app/core'
 import type React from 'react'
 import { cn } from '../../lib/utils'
 import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/primitives/tooltip'
+import { SKY_COMPASS_BOTTOM, useSkyPanel } from './sky-control'
 
 export type FloorplanCompassButtonProps = {
   northRotationDeg: number
@@ -18,16 +20,23 @@ export function FloorplanCompassButton({
   needleRef,
   style,
 }: FloorplanCompassButtonProps) {
+  const i18n = usePascalI18n()
+  // Beside the sky chip (not when moved to the plan's right corner), centre on the docks' row.
+  const besideSky = useSkyPanel((s) => s.hosts > 0) && style?.right === undefined
+  const label = i18n._({
+    id: 'viewer.floorplan.alignNorth',
+    message: 'Align view to north',
+  })
   return (
     <Tooltip>
       <TooltipTrigger asChild>
         <button
-          aria-label="Align view to north"
+          aria-label={label}
           className={cn(
             'group pointer-events-auto absolute bottom-3 z-30 flex h-8 w-8 items-center justify-center rounded-full border border-black/10 bg-white/85 shadow-sm backdrop-blur-md transition hover:bg-white hover:shadow-md dark:border-white/10 dark:bg-neutral-900/85 dark:hover:bg-neutral-900',
             !style && 'left-3',
           )}
-          style={style}
+          style={besideSky ? { bottom: SKY_COMPASS_BOTTOM, ...style } : style}
           onClick={(event) => {
             event.preventDefault()
             event.stopPropagation()
@@ -52,7 +61,7 @@ export function FloorplanCompassButton({
           </span>
         </button>
       </TooltipTrigger>
-      <TooltipContent side="right">Align view to north</TooltipContent>
+      <TooltipContent side="right">{label}</TooltipContent>
     </Tooltip>
   )
 }

package/src/components/viewer/floorplan-preview.tsx

@@ -6,9 +6,10 @@ import {
   type FloorplanGeometry,
   type FloorplanPalette,
   type GeometryContext,
-  getLevelDisplayName,
   isNodeKindEnabled,
   nodeRegistry,
+  useLocale,
+  usePascalI18n,
   useScene,
 } from '@pascal-app/core'
 import { AnyNode as AnyNodeSchema } from '@pascal-app/core/schema'
@@ -27,6 +28,7 @@ import {
   useState,
 } from 'react'
 import { createPortal } from 'react-dom'
+import { localizedLevelName } from '../../i18n/level-name'
 import {
   FLOORPLAN_VIEW_ROTATION_DEG,
   floorplanLocalToWorldPoint,
@@ -143,13 +145,6 @@ function boundsToViewBox(bounds: FloorplanBounds): FloorplanViewBox {
   }
 }
 
-function levelLabel(level: AnyNode): string {
-  return getLevelDisplayName({
-    name: (level as { name?: string }).name,
-    level: (level as { level?: number }).level ?? 0,
-  })
-}
-
 function collectLevelTree(root: AnyNode, nodes: Record<string, AnyNode>): AnyNode[] {
   const result: AnyNode[] = [root]
   const seen = new Set<string>()
@@ -309,6 +304,8 @@ export function FloorplanPreview({
   showLevelSelector = true,
   synchronizeNavigation = false,
 }: FloorplanPreviewProps) {
+  const i18n = usePascalI18n()
+  const locale = useLocale()
   const storeNodes = useScene((state) => (scene ? EMPTY_PREVIEW_NODES : state.nodes))
   const storeInstalledPlugins = useScene((state) =>
     scene ? EMPTY_INSTALLED_PLUGINS : state.installedPlugins,
@@ -869,7 +866,10 @@ export function FloorplanPreview({
         className={className}
         style={{ display: 'grid', placeItems: 'center', background: '#f8fafc', color: '#64748b' }}
       >
-        No floor plans are available for this scene.
+        {i18n._({
+          id: 'viewer.floorplan.empty',
+          message: 'No floor plans are available for this scene.',
+        })}
       </div>
     )
   }
@@ -882,7 +882,15 @@ export function FloorplanPreview({
       {synchronizeNavigation ? <FloorplanCameraSyncMount /> : null}
       <div
         aria-keyshortcuts="ArrowUp ArrowDown ArrowLeft ArrowRight + - 0 F"
-        aria-label={`${activeLevel ? levelLabel(activeLevel) : 'Floor plan'} 2D view`}
+        aria-label={i18n._({
+          id: 'viewer.floorplan.viewLabel',
+          message: '{floor} 2D view',
+          values: {
+            floor: activeLevel
+              ? localizedLevelName(activeLevel, i18n, locale)
+              : i18n._({ id: 'viewer.floorplan.floorPlan', message: 'Floor plan' }),
+          },
+        })}
         onKeyDown={onKeyDown}
         role="application"
         ref={interactionRef}
@@ -969,9 +977,9 @@ export function FloorplanPreview({
             fontWeight: 600,
           }}
         >
-          Floor
+          {i18n._({ id: 'viewer.floorplan.floor', message: 'Floor' })}
           <select
-            aria-label="Floor"
+            aria-label={i18n._({ id: 'viewer.floorplan.floor', message: 'Floor' })}
             onChange={(event) => chooseLevel(event.target.value)}
             style={{
               border: '1px solid rgba(148,163,184,.55)',
@@ -985,7 +993,7 @@ export function FloorplanPreview({
           >
             {levels.map((level) => (
               <option key={level.id} value={level.id}>
-                {levelLabel(level)}
+                {localizedLevelName(level, i18n, locale)}
               </option>
             ))}
           </select>
@@ -1013,28 +1021,28 @@ export function FloorplanPreview({
         }}
       >
         <button
-          aria-label="Zoom out"
+          aria-label={i18n._({ id: 'viewer.floorplan.zoomOut', message: 'Zoom out' })}
           onClick={() => zoom(1.2)}
           style={controlStyle}
-          title="Zoom out"
+          title={i18n._({ id: 'viewer.floorplan.zoomOut', message: 'Zoom out' })}
           type="button"
         >
           <Minus size={16} />
         </button>
         <button
-          aria-label="Fit floor plan"
+          aria-label={i18n._({ id: 'viewer.floorplan.fit', message: 'Fit floor plan' })}
           onClick={() => updateLocalViewBox(fittedViewBox)}
           style={controlStyle}
-          title="Fit floor plan"
+          title={i18n._({ id: 'viewer.floorplan.fit', message: 'Fit floor plan' })}
           type="button"
         >
           <Maximize2 size={15} />
         </button>
         <button
-          aria-label="Zoom in"
+          aria-label={i18n._({ id: 'viewer.floorplan.zoomIn', message: 'Zoom in' })}
           onClick={() => zoom(0.8)}
           style={controlStyle}
-          title="Zoom in"
+          title={i18n._({ id: 'viewer.floorplan.zoomIn', message: 'Zoom in' })}
           type="button"
         >
           <Plus size={16} />

package/src/components/viewer/render-settings-menu.tsx

@@ -0,0 +1,294 @@
+'use client'
+
+import { type PascalI18n, usePascalI18n, useScene } from '@pascal-app/core'
+import {
+  type RenderQuality,
+  requestDeviceLocation,
+  resolveLocation,
+  type TimeOfDay,
+  useViewer,
+  type Weather,
+} from '@pascal-app/viewer'
+import {
+  ArrowDownLeft,
+  Check,
+  Cloud,
+  CloudSun,
+  Gauge,
+  LocateFixed,
+  Moon,
+  PenLine,
+  Sun,
+  Sunrise,
+  Sunset,
+} from 'lucide-react'
+import { useState } from 'react'
+import {
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '../ui/primitives/dropdown-menu'
+import { openSkyPanel, useSkyPanel, weatherIcon } from './sky-control'
+
+/**
+ * Render settings shared by every display dropdown:
+ * - `QualityMenu` (both appearances): Low / Medium / High.
+ * - `DaylightMenu` (colored): time-of-day and weather presets, plus "Use my location" when the
+ *   site has no geocoded point — or, while the sky chip is in the viewport, a row opening it.
+ * - `EdgesToggleItem` (monochrome): ink edges on or off.
+ */
+
+function timeOptions(i18n: PascalI18n) {
+  return [
+    {
+      id: 'golden',
+      icon: Sunrise,
+      name: i18n._({ id: 'viewer.daylight.time.golden', message: 'Golden hour' }),
+    },
+    {
+      id: 'midday',
+      icon: Sun,
+      name: i18n._({ id: 'viewer.daylight.time.midday', message: 'Midday' }),
+    },
+    {
+      id: 'blue',
+      icon: Sunset,
+      name: i18n._({ id: 'viewer.daylight.time.blue', message: 'Blue hour' }),
+    },
+    {
+      id: 'night',
+      icon: Moon,
+      name: i18n._({ id: 'viewer.daylight.time.night', message: 'Night' }),
+    },
+  ] as const satisfies readonly { id: TimeOfDay; icon: typeof Sun; name: string }[]
+}
+
+function weatherOptions(i18n: PascalI18n) {
+  return [
+    { id: 'clear', name: i18n._({ id: 'viewer.daylight.weather.clear', message: 'Clear' }) },
+    { id: 'fair', name: i18n._({ id: 'viewer.daylight.weather.fair', message: 'Fair' }) },
+    { id: 'cloudy', name: i18n._({ id: 'viewer.daylight.weather.cloudy', message: 'Cloudy' }) },
+    {
+      id: 'overcast',
+      name: i18n._({ id: 'viewer.daylight.weather.overcast', message: 'Overcast' }),
+    },
+  ] as const satisfies readonly { id: Weather; name: string }[]
+}
+
+function qualityOptions(i18n: PascalI18n) {
+  return [
+    {
+      id: 'low',
+      name: i18n._({ id: 'viewer.daylight.quality.low', message: 'Low' }),
+      detail: i18n._({
+        id: 'viewer.daylight.quality.lowDetail',
+        message: 'Fastest — no ambient occlusion or bloom',
+      }),
+    },
+    {
+      id: 'medium',
+      name: i18n._({ id: 'viewer.daylight.quality.medium', message: 'Medium' }),
+      detail: i18n._({
+        id: 'viewer.daylight.quality.mediumDetail',
+        message: 'Half-resolution ambient occlusion',
+      }),
+    },
+    {
+      id: 'high',
+      name: i18n._({ id: 'viewer.daylight.quality.high', message: 'High' }),
+      detail: i18n._({
+        id: 'viewer.daylight.quality.highDetail',
+        message: 'Lighting-aware ambient occlusion and bloom',
+      }),
+    },
+  ] as const satisfies readonly { id: RenderQuality; name: string; detail: string }[]
+}
+
+export function QualityMenu({
+  subContentClassName = 'dark min-w-56',
+}: {
+  subContentClassName?: string
+}) {
+  const i18n = usePascalI18n()
+  const quality = useViewer((s) => s.renderQuality)
+  const choice = useViewer((s) => s.renderQualityChoice)
+  const qualities = qualityOptions(i18n)
+  const active = qualities.find((o) => o.id === quality) ?? qualities[2]
+  const autoName = i18n._({ id: 'viewer.daylight.quality.auto', message: 'Auto' })
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger>
+        <Gauge className="h-4 w-4" />
+        <span>{i18n._({ id: 'viewer.daylight.quality.title', message: 'Quality' })}</span>
+        <span className="ml-auto text-muted-foreground text-xs">
+          {choice === 'auto' ? `${autoName} (${active.name})` : active.name}
+        </span>
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className={subContentClassName}>
+        <DropdownMenuItem onSelect={() => useViewer.getState().setRenderQuality('auto')}>
+          <div className="flex flex-col">
+            <span className="text-foreground">{autoName}</span>
+            <span className="text-muted-foreground text-xs">
+              {i18n._({
+                id: 'viewer.daylight.quality.autoDetail',
+                message: 'Picked for this device: {tier}',
+                values: { tier: active.name },
+              })}
+            </span>
+          </div>
+          {choice === 'auto' ? <Check className="ml-auto h-4 w-4 text-foreground" /> : null}
+        </DropdownMenuItem>
+        {qualities.map((option) => (
+          <DropdownMenuItem
+            key={option.id}
+            onSelect={() => useViewer.getState().setRenderQuality(option.id)}
+          >
+            <div className="flex flex-col">
+              <span className="text-foreground">{option.name}</span>
+              <span className="text-muted-foreground text-xs">{option.detail}</span>
+            </div>
+            {choice === option.id ? <Check className="ml-auto h-4 w-4 text-foreground" /> : null}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  )
+}
+
+export function DaylightMenu({
+  subContentClassName = 'dark min-w-48',
+}: {
+  subContentClassName?: string
+}) {
+  const i18n = usePascalI18n()
+  const timeOfDay = useViewer((s) => s.timeOfDay)
+  const weather = useViewer((s) => s.weather)
+  const deviceLocation = useViewer((s) => s.deviceLocation)
+  const siteHasLocation = useScene((state) => {
+    for (const id of state.rootNodeIds) {
+      const node = state.nodes[id] as
+        | { type?: string; parcel?: { originLngLat?: unknown }; dossier?: { point?: unknown } }
+        | undefined
+      if (node?.type === 'site') return Boolean(node.parcel?.originLngLat || node.dossier?.point)
+    }
+    return false
+  })
+  const [locating, setLocating] = useState(false)
+  // The sky chip beside the compass carries time and weather wherever it is mounted.
+  const skyChip = useSkyPanel((s) => s.hosts > 0)
+  const times = timeOptions(i18n)
+  const weathers = weatherOptions(i18n)
+  const activeTime = times.find((o) => o.id === timeOfDay) ?? times[1]
+  const activeWeather = weathers.find((o) => o.id === weather) ?? weathers[1]
+  const source = siteHasLocation ? 'site' : resolveLocation(null, deviceLocation).source
+
+  if (skyChip) {
+    const WeatherIcon = weatherIcon(weather)
+    return (
+      <DropdownMenuItem onSelect={openSkyPanel}>
+        <WeatherIcon className="h-4 w-4" />
+        <span>{i18n._({ id: 'viewer.daylight.sky.menuItem', message: 'Time & weather' })}</span>
+        <span className="ml-auto flex items-center gap-1 text-violet-600 text-xs dark:text-violet-300">
+          {i18n._({ id: 'viewer.daylight.sky.inViewport', message: 'In viewport' })}
+          <ArrowDownLeft className="h-3.5 w-3.5" />
+        </span>
+      </DropdownMenuItem>
+    )
+  }
+
+  return (
+    <>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          <activeTime.icon className="h-4 w-4" />
+          <span>{i18n._({ id: 'viewer.daylight.time.title', message: 'Time of day' })}</span>
+          <span className="ml-auto text-muted-foreground text-xs">{activeTime.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className={subContentClassName}>
+          {times.map((option) => (
+            <DropdownMenuItem
+              key={option.id}
+              onSelect={() => useViewer.getState().setTimeOfDay(option.id)}
+            >
+              <option.icon className="h-4 w-4" />
+              <span>{option.name}</span>
+              {timeOfDay === option.id ? <Check className="ml-auto h-4 w-4" /> : null}
+            </DropdownMenuItem>
+          ))}
+          {source !== 'site' ? (
+            <DropdownMenuItem
+              disabled={locating}
+              onSelect={(event) => {
+                event.preventDefault()
+                setLocating(true)
+                requestDeviceLocation()
+                  .then((location) => useViewer.getState().setDeviceLocation(location))
+                  .catch(() => {})
+                  .finally(() => setLocating(false))
+              }}
+            >
+              <LocateFixed className="h-4 w-4" />
+              <div className="flex flex-col">
+                <span>
+                  {i18n._({ id: 'viewer.daylight.location.use', message: 'Use my location' })}
+                </span>
+                <span className="text-muted-foreground text-xs">
+                  {source === 'device'
+                    ? i18n._({
+                        id: 'viewer.daylight.location.device',
+                        message: 'Sun follows your location',
+                      })
+                    : i18n._({
+                        id: 'viewer.daylight.location.approximate',
+                        message: 'Sun position is approximate',
+                      })}
+                </span>
+              </div>
+            </DropdownMenuItem>
+          ) : null}
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger>
+          {weather === 'clear' ? <CloudSun className="h-4 w-4" /> : <Cloud className="h-4 w-4" />}
+          <span>{i18n._({ id: 'viewer.daylight.weather.title', message: 'Weather' })}</span>
+          <span className="ml-auto text-muted-foreground text-xs">{activeWeather.name}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent className={subContentClassName}>
+          {weathers.map((option) => (
+            <DropdownMenuItem
+              key={option.id}
+              onSelect={() => useViewer.getState().setWeather(option.id)}
+            >
+              <span>{option.name}</span>
+              {weather === option.id ? <Check className="ml-auto h-4 w-4" /> : null}
+            </DropdownMenuItem>
+          ))}
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </>
+  )
+}
+
+/** Ink edges on (soft) or off. The menu stays open on toggle. */
+export function EdgesToggleItem() {
+  const i18n = usePascalI18n()
+  const on = useViewer((s) => s.edges !== 'off')
+  return (
+    <DropdownMenuItem
+      onSelect={(event) => {
+        event.preventDefault()
+        useViewer.getState().setEdges(on ? 'off' : 'soft')
+      }}
+    >
+      <PenLine className="h-4 w-4" />
+      <span>{i18n._({ id: 'viewer.display.edges.title', message: 'Edges' })}</span>
+      <span className="ml-auto text-muted-foreground text-xs">
+        {on
+          ? i18n._({ id: 'viewer.common.on', message: 'On' })
+          : i18n._({ id: 'viewer.common.off', message: 'Off' })}
+      </span>
+    </DropdownMenuItem>
+  )
+}