@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/panels/room-name-options.test.ts

@@ -38,15 +38,48 @@ describe('roomNameOptions', () => {
     })
   })
 
-  test('free text is always offered first unless it is exactly a name', () => {
+  test('free text is offered first unless it is exactly a name, which is then active', () => {
     const { typed, options } = roomNameOptions('Wine cellar', SECTIONS)
-    expect(typed).toEqual({ kind: 'typed', value: 'Wine cellar', match: null })
+    expect(typed).toEqual({ kind: 'typed', value: 'Wine cellar', label: 'Wine cellar', match: null })
     expect(options).toEqual([typed!])
-    expect(roomNameOptions('Kitchen', SECTIONS).typed).toBeNull()
+    const exact = roomNameOptions('Kitchen', SECTIONS)
+    expect(exact.typed).toBeNull()
+    expect(exact.options[exact.active]).toMatchObject({ kind: 'suggestion', value: 'Kitchen' })
     // A case-only difference still offers the text as typed.
     expect(roomNameOptions('kitchen', SECTIONS).typed?.value).toBe('kitchen')
   })
 
+  test('an exact English name wins over names that contain it', () => {
+    const storage: RoomNameSection[] = [
+      { id: 'utility', title: 'Utility', names: ['Walk-in closet', 'Closet'] },
+    ]
+    for (const typed of ['Closet', 'closet']) {
+      const { options, active } = roomNameOptions(typed, storage)
+      expect(options[active]?.value).toBe('Closet')
+    }
+  })
+
+  test('a shared label is exact only for the room’s own entry', () => {
+    const shared: RoomNameSection[] = [
+      {
+        id: 'living',
+        title: 'Séjour',
+        names: ['Living room', 'Kitchen', 'Lounge'],
+        labels: ['Salon', 'Cuisine', 'Salon'],
+      },
+    ]
+    const activeValue = (current: string) => {
+      const { options, active } = roomNameOptions('Salon', shared, true, current)
+      return options[active]?.value
+    }
+    expect(activeValue('Lounge')).toBe('Lounge')
+    expect(activeValue('Lounge 2')).toBe('Lounge')
+    expect(activeValue('Living room')).toBe('Living room')
+    // Any other room falls back to the first suggestion.
+    expect(activeValue('Kitchen')).toBe('Living room')
+    expect(activeValue('')).toBe('Living room')
+  })
+
   test('the keyboard order is the typed row, then the groups in order', () => {
     const { groups, options } = roomNameOptions('e', SECTIONS)
     expect(options.slice(1)).toEqual(groups.flatMap((g) => g.options))

package/src/components/ui/panels/room-name-options.ts

@@ -1,8 +1,22 @@
-import type { RoomNameSection } from '../../../lib/room-name-catalog'
+import { type AnyNodeId, useScene } from '@pascal-app/core'
+import {
+  baseRoomName,
+  numberedRoomName,
+  type RoomNameSection,
+} from '../../../lib/room-name-catalog'
+import {
+  type DescriptorTranslator,
+  displayRoomName,
+  editedRoomName,
+} from '../../../lib/room-name-messages'
+import { renameRoom } from '../../../lib/room-structure-commands'
 
 export type RoomNameOption = {
   kind: 'typed' | 'suggestion'
+  /** What a pick stores: the English catalog name, or the typed text as written. */
   value: string
+  /** What the row shows and the search matches, in the UI language. */
+  label: string
   match: { start: number; end: number } | null
 }
 
@@ -11,25 +25,37 @@ export type RoomNameGroup = { id: string; title: string; options: RoomNameOption
 /**
  * The room-name combobox's rows. Until the user types, every section is listed
  * whole — the field's current name is not a filter. Typing keeps, in every
- * section, the names containing the text (ignoring case and surrounding
- * spaces), drops the sections left empty, and puts the typed text first as its
- * own row unless it already is one of the names. `options` is the flat order
- * the keyboard walks: the typed row, then each group's rows.
+ * section, the names whose label or English name contains the text (ignoring
+ * case and surrounding spaces), drops the sections left empty, and puts the
+ * typed text first as its own row unless it is exactly an English catalog
+ * name. `options` is the flat order the keyboard walks: the typed row, then
+ * each group's rows. `current` is the room's stored name.
  */
 export function roomNameOptions(
   typed: string,
   sections: readonly RoomNameSection[],
   filtering = true,
-): { typed: RoomNameOption | null; groups: RoomNameGroup[]; options: RoomNameOption[] } {
+  current = '',
+): {
+  typed: RoomNameOption | null
+  groups: RoomNameGroup[]
+  options: RoomNameOption[]
+  /** The row Enter picks after typing: an exact name, else the first suggestion. */
+  active: number
+} {
   const query = filtering ? typed.trim().toLowerCase() : ''
   const groups = sections.flatMap((section) => {
-    const options = section.names.flatMap((value): RoomNameOption[] => {
-      const start = query ? value.toLowerCase().indexOf(query) : -1
-      if (query && start < 0) return []
+    const options = section.names.flatMap((value, index): RoomNameOption[] => {
+      const label = section.labels?.[index] ?? value
+      // The label is what is shown and highlighted; the English name matches too,
+      // for packs that have not translated every name yet.
+      const start = query ? label.toLowerCase().indexOf(query) : -1
+      if (query && start < 0 && !value.toLowerCase().includes(query)) return []
       return [
         {
           kind: 'suggestion',
           value,
+          label,
           match: start >= 0 ? { start, end: start + query.length } : null,
         },
       ]
@@ -38,10 +64,83 @@ export function roomNameOptions(
   })
   const known = sections.some((section) => section.names.includes(typed))
   const typedRow: RoomNameOption | null =
-    query && !known ? { kind: 'typed', value: typed, match: null } : null
+    query && !known ? { kind: 'typed', value: typed, label: typed, match: null } : null
+  const options = [...(typedRow ? [typedRow] : []), ...groups.flatMap((group) => group.options)]
+  const suggestions = options.filter((option) => option.kind === 'suggestion')
+  // Labels can be shared ("Salon" for both Living room and Lounge): a shared
+  // label is only an exact match for the room's own name.
+  const own = baseRoomName(current).toLowerCase()
+  const byLabel = suggestions.filter((option) => option.label.toLowerCase() === query)
+  const exactRow =
+    suggestions.find((option) => option.value.toLowerCase() === query) ??
+    (byLabel.length === 1
+      ? byLabel[0]
+      : byLabel.find((option) => option.value.toLowerCase() === own))
+  const exact = exactRow ? options.indexOf(exactRow) : -1
   return {
     typed: typedRow,
     groups,
-    options: [...(typedRow ? [typedRow] : []), ...groups.flatMap((group) => group.options)],
+    options,
+    active: exact >= 0 ? exact : typedRow && options.length > 1 ? 1 : 0,
   }
 }
+
+/**
+ * The commit of an edited room-name field, on blur or Enter (unless Enter
+ * picks a suggestion): the room panel's, and the layer tree's with its own
+ * `write`. `committed` is what the field last committed or showed; text still
+ * equal to it writes nothing.
+ */
+export function commitRoomNameEdit(
+  zoneId: string,
+  name: string,
+  committed: string,
+  text: string,
+  i18n: DescriptorTranslator,
+  write: (zoneId: string, name: string) => void = renameRoom,
+) {
+  if (text === committed) return
+  const stored = editedRoomName(name, text, i18n)
+  if (stored !== name) write(zoneId, stored)
+}
+
+/**
+ * The layer tree's rename of a room or zone. Its field shows the name as
+ * `displayRoomName` does and passes the trimmed text, or `undefined` when
+ * cleared; it writes through `updateNode`, as main's tree does.
+ */
+export function commitTreeRoomRename(
+  zoneId: string,
+  text: string | undefined,
+  i18n: DescriptorTranslator,
+) {
+  const { nodes, updateNode } = useScene.getState()
+  const id = zoneId as AnyNodeId
+  const name = nodes[id]?.name ?? ''
+  if (text === undefined) {
+    updateNode(id, { name: undefined })
+    return
+  }
+  commitRoomNameEdit(zoneId, name, displayRoomName(name, i18n), text, i18n, (_, stored) =>
+    updateNode(id, { name: stored }),
+  )
+}
+
+/**
+ * The room panel's pick of a row: a click, or Enter on a suggestion. A suggestion stores its English catalog name,
+ * numbered against the level's other rooms, in every UI language; the typed
+ * row stores the text exactly as typed. Returns what the field shows after it.
+ */
+export function commitRoomNamePick(
+  zoneId: string,
+  name: string,
+  option: RoomNameOption,
+  i18n: DescriptorTranslator,
+): string {
+  const stored =
+    option.kind === 'typed'
+      ? option.value
+      : numberedRoomName(useScene.getState().nodes, zoneId, option.value)
+  if (stored !== name) renameRoom(zoneId, stored)
+  return displayRoomName(stored, i18n)
+}

package/src/components/ui/panels/room-openings-field.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { area, useScene } from '@pascal-app/core'
+import { area, useScene, usePascalI18n } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { useMemo } from 'react'
 import {
@@ -11,12 +11,10 @@ import {
   useFloorEditSession,
 } from '../../../lib/floor-edit-session'
 import { type OpeningSurface, startOpeningDraft } from '../../../lib/floor-opening-draft'
-import { formatAreaLabel } from '../../../lib/measurements'
+import { formatAreaLabel } from '@pascal-app/core'
 import { pill } from './room-construction-rows'
 import { ShapeChoice } from './shape-choice'
 
-const count = (n: number) => `${n} ${n === 1 ? 'opening' : 'openings'}`
-
 /**
  * A room's openings through its floor (or its ceiling), inside the row's
  * settings. The floor has "Edit floor": a session that outlines the openings
@@ -31,6 +29,7 @@ export function RoomOpeningsField({
   zoneId: string
   surface: OpeningSurface
 }) {
+  const i18n = usePascalI18n()
   const nodes = useScene((scene) => scene.nodes)
   const unit = useViewer((s) => s.unit)
   const readOnly = useScene((scene) => scene.readOnly)
@@ -38,40 +37,46 @@ export function RoomOpeningsField({
     () => roomSurfaceOpenings(nodes, zoneId, surface),
     [nodes, zoneId, surface],
   )
+  const openingCount = i18n._({
+    id: 'editor.panels.roomOpeningsField.openings',
+    // {number} rather than #: counts are written without grouping, as before ("1000 openings").
+    message: '{count, plural, =0 {No openings} one {{number} opening} other {{number} openings}}',
+    values: { count: openings.length, number: String(openings.length) },
+  })
   const editing = useFloorEditSession((s) => surface === 'floor' && s.session?.zoneId === zoneId)
   const cut = (
     <ShapeChoice
       data={`cut-opening-${surface}`}
       disabled={readOnly}
-      label="Cut opening"
+      label={i18n._({ id: 'editor.panels.roomOpeningsField.cutOpening', message: 'Cut opening' })}
       onPick={(shape) => startOpeningDraft(zoneId, surface, shape)}
     />
   )
   if (surface === 'ceiling')
     return (
       <div className="flex flex-col gap-1" data-room-openings={surface}>
-        {openings.length > 0 && <span>{count(openings.length)}</span>}
+        {openings.length > 0 && <span>{openingCount}</span>}
         {cut}
       </div>
     )
   if (!editing)
     return (
       <div className="flex min-h-7 items-center justify-between gap-3" data-room-openings={surface}>
-        <span>{openings.length ? count(openings.length) : 'No openings'}</span>
+        <span>{openingCount}</span>
         <button
           className={pill}
           data-edit-floor
           onClick={() => startFloorEdit(zoneId)}
           type="button"
         >
-          Edit floor
+          {i18n._({ id: 'editor.panels.roomOpeningsField.editFloor', message: 'Edit floor' })}
         </button>
       </div>
     )
   return (
     <div className="flex flex-col gap-1.5" data-room-openings={surface} data-editing-floor>
       {openings.length === 0 ? (
-        <p>No openings yet. Cut one for a stair void or a hatch.</p>
+        <p>{i18n._({ id: 'editor.panels.roomOpeningsField.noOpeningsYetCutOneFor', message: 'No openings yet. Cut one for a stair void or a hatch.' })}</p>
       ) : (
         openings.map((opening, index) => (
           <button
@@ -83,10 +88,14 @@ export function RoomOpeningsField({
           >
             <span className="text-foreground">
               {opening.source === 'stair'
-                ? 'Stair opening'
+                ? i18n._({ id: 'editor.panels.roomOpeningsField.stairOpening', message: 'Stair opening' })
                 : opening.source === 'elevator'
-                  ? 'Elevator opening'
-                  : `Opening ${index + 1}`}
+                  ? i18n._({ id: 'editor.panels.roomOpeningsField.elevatorOpening', message: 'Elevator opening' })
+                  : i18n._({
+                      id: 'editor.panels.roomOpeningsField.openingNumber',
+                      message: 'Opening {number}',
+                      values: { number: index + 1 },
+                    })}
             </span>
             <span className="font-mono tabular-nums">
               {formatAreaLabel(area([{ outer: opening.polygon, holes: [] }]), unit, 2)}
@@ -102,7 +111,7 @@ export function RoomOpeningsField({
           onClick={() => (finishFloorEdit() ? undefined : endFloorEdit())}
           type="button"
         >
-          Done
+          {i18n._({ id: 'editor.panels.roomOpeningsField.done', message: 'Done' })}
         </button>
       </div>
     </div>