@pascal-app/editor 1.0.6 → 1.1.0

package/src/components/ui/level-wall-copy-prompt.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import {
+  type AnyNode,
+  type AnyNodeId,
+  getLevelAbove,
+  getLevelBelow,
+  getLevelDisplayName,
+  useScene, usePascalI18n,
+} from '@pascal-app/core'
+import { buildExteriorWallCopy, levelExteriorWalls } from '@pascal-app/core/building'
+import { useViewer } from '@pascal-app/viewer'
+import { create } from 'zustand'
+
+type Offer = { levelId: string; sourceLevelId: string; direction: 'below' | 'above' }
+
+/**
+ * The one open "Copy exterior walls?" offer, for the level just added. While it is open the plan
+ * traces the source level's walls on the new one; that trace is the offer's, never the saved
+ * Walls below / above preference, and it goes with the offer.
+ */
+export const useLevelWallCopyOffer = create<{
+  offer: Offer | null
+  setOffer: (offer: Offer | null) => void
+}>((set) => ({ offer: null, setOffer: (offer) => set({ offer }) }))
+
+let stopWatchingLevel: (() => void) | null = null
+
+/** Opens `offer` (or closes the open one); picking another level closes it. */
+function setOffer(offer: Offer | null) {
+  stopWatchingLevel?.()
+  stopWatchingLevel = null
+  useLevelWallCopyOffer.getState().setOffer(offer)
+  if (!offer) return
+  stopWatchingLevel = useViewer.subscribe((state) => {
+    if (state.selection.levelId !== offer.levelId) setOffer(null)
+  })
+}
+
+/**
+ * After a level is added next to `sourceLevelId` (by default the level under it, else the one over
+ * it, for a basement), and selected: when that level has an outline, offer to copy its exterior
+ * walls up or down, tracing them dashed on the plan while the offer is open.
+ */
+export function offerExteriorWallCopy(levelId: string, sourceLevelId?: string) {
+  const nodes = useScene.getState().nodes as Record<string, AnyNode>
+  const graph = nodes as Record<AnyNodeId, AnyNode>
+  sourceLevelId ??= (getLevelBelow(levelId, graph) ?? getLevelAbove(levelId, graph))?.id
+  const source = sourceLevelId ? nodes[sourceLevelId] : undefined
+  const level = nodes[levelId]
+  if (!sourceLevelId || source?.type !== 'level' || level?.type !== 'level') return setOffer(null)
+  const direction = source.level < level.level ? 'below' : 'above'
+  setOffer(
+    levelExteriorWalls(nodes, sourceLevelId).length ? { levelId, sourceLevelId, direction } : null,
+  )
+}
+
+/** Closes the open offer without copying. */
+export function dismissExteriorWallCopy() {
+  setOffer(null)
+}
+
+/** Copies the offered walls in place, as one undo step of its own. */
+export function acceptExteriorWallCopy(offer: Offer): number {
+  const walls = buildExteriorWallCopy({
+    nodes: useScene.getState().nodes as Record<string, AnyNode>,
+    fromLevelId: offer.sourceLevelId,
+    toLevelId: offer.levelId,
+  })
+  if (walls.length) useScene.getState().applyNodeChanges({ create: walls })
+  setOffer(null)
+  return walls.length
+}
+
+/**
+ * "Copy exterior walls from the level below?" — a small card under the level list, never in the
+ * way: it goes when answered or when another level is picked, and hides once the level has walls.
+ */
+export function LevelWallCopyPrompt() {
+  const i18n = usePascalI18n()
+  const offer = useLevelWallCopyOffer((state) => state.offer)
+  const activeLevelId = useViewer((state) => state.selection.levelId)
+  const sourceName = useScene((state) => {
+    const source = offer ? state.nodes[offer.sourceLevelId as never] : undefined
+    return source?.type === 'level' ? getLevelDisplayName(source) : null
+  })
+  const levelHasWalls = useScene((state) => {
+    const level = offer ? state.nodes[offer.levelId as AnyNodeId] : undefined
+    return (
+      level?.type === 'level' &&
+      level.children.some((id) => state.nodes[id as AnyNodeId]?.type === 'wall')
+    )
+  })
+  if (!offer || !sourceName || activeLevelId !== offer.levelId || levelHasWalls) return null
+  return (
+    <div
+      className="mt-2 w-56 rounded-xl border border-border bg-background/95 p-3 text-xs shadow-2xl backdrop-blur-md"
+      data-level-wall-copy={offer.levelId}
+      role="status"
+    >
+      <p className="font-medium text-foreground text-sm">
+        {i18n._({ id: 'editor.levelWallCopyPrompt.copyExteriorWallsFromTheLevel', message: 'Copy exterior walls from the level {direction}?', values: { direction: offer.direction } })}</p>
+      <p className="mt-0.5 text-muted-foreground">
+        {i18n._({ id: 'editor.levelWallCopyPrompt.sourcenameSOutsideWallsInPlace', message: '{sourceName}’s outside walls, in place, so this level lines up with it.', values: { sourceName } })}</p>
+      <div className="mt-2.5 flex gap-2">
+        <button
+          className="flex-1 rounded-full bg-foreground px-3 py-1.5 font-medium text-background transition-opacity hover:opacity-90"
+          data-level-wall-copy-accept
+          onClick={() => acceptExteriorWallCopy(offer)}
+          type="button"
+        >
+          {i18n._({ id: 'editor.levelWallCopyPrompt.copy', message: 'Copy' })}
+        </button>
+        <button
+          className="flex-1 rounded-full border border-border px-3 py-1.5 text-foreground transition-colors hover:bg-accent"
+          onClick={dismissExteriorWallCopy}
+          type="button"
+        >
+          {i18n._({ id: 'editor.levelWallCopyPrompt.noThanks', message: 'No thanks' })}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/components/ui/panels/collections/collections-popover.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import type { AnyNodeId, CollectionId } from '@pascal-app/core'
-import { useScene } from '@pascal-app/core'
+import { useScene, usePascalI18n } from '@pascal-app/core'
 import {
   Check,
   ChevronDown,
@@ -36,6 +36,7 @@ interface CollectionsPopoverProps {
 }
 
 export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProps) {
+  const i18n = usePascalI18n()
   const collections = useScene((s) => s.collections)
   const nodes = useScene((s) => s.nodes)
   const createCollection = useScene((s) => s.createCollection)
@@ -102,7 +103,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
           <div className="flex items-center gap-1.5">
             <Layers className="h-3.5 w-3.5 text-muted-foreground" />
             <span className="font-semibold text-foreground text-xs tracking-tight">
-              Collections
+              {i18n._({ id: 'editor.panels.collections.collectionsPopover.collections', message: 'Collections' })}
             </span>
           </div>
           <button
@@ -114,7 +115,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             type="button"
           >
             <Plus className="h-3 w-3" />
-            New
+            {i18n._({ id: 'editor.panels.collections.collectionsPopover.new', message: 'New' })}
           </button>
         </div>
 
@@ -132,7 +133,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                   setCreateName('')
                 }
               }}
-              placeholder="Collection name…"
+              placeholder={i18n._({ id: 'editor.panels.collections.collectionsPopover.collectionName', message: 'Collection name…' })}
               value={createName}
             />
             <button
@@ -162,7 +163,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
             <div className="flex flex-col items-center justify-center gap-2 px-4 py-8 text-center">
               <Layers className="h-6 w-6 text-muted-foreground/40" />
               <p className="text-muted-foreground text-xs">
-                No collections yet. Create one to group elements together.
+                {i18n._({ id: 'editor.panels.collections.collectionsPopover.noCollectionsYetCreateOneTo', message: 'No collections yet. Create one to group elements together.' })}
               </p>
             </div>
           ) : (
@@ -182,8 +183,7 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                       key={collection.id}
                     >
                       <span className="truncate text-foreground/80 text-xs">
-                        Delete "{collection.name}"?
-                      </span>
+                        {i18n._({ id: 'editor.panels.collections.collectionsPopover.deleteName', message: 'Delete "{name}"?', values: { name: collection.name } })}</span>
                       <div className="flex shrink-0 items-center gap-1">
                         <button
                           className="rounded-md bg-red-500/20 px-2 py-0.5 font-medium text-[11px] text-red-600 dark:text-red-400 transition-colors hover:bg-red-500/30"
@@ -193,14 +193,14 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                           }}
                           type="button"
                         >
-                          Delete
+                          {i18n._({ id: 'editor.panels.collections.collectionsPopover.delete', message: 'Delete' })}
                         </button>
                         <button
                           className="rounded-md px-2 py-0.5 font-medium text-[11px] text-muted-foreground transition-colors hover:bg-black/6 dark:hover:bg-white/10"
                           onClick={() => setDeletingId(null)}
                           type="button"
                         >
-                          Cancel
+                          {i18n._({ id: 'editor.panels.collections.collectionsPopover.cancel', message: 'Cancel' })}
                         </button>
                       </div>
                     </li>
@@ -314,14 +314,14 @@ export function CollectionsPopover({ nodeIds, children }: CollectionsPopoverProp
                             }}
                           >
                             <Pencil className="h-3.5 w-3.5" />
-                            Rename
+                            {i18n._({ id: 'editor.panels.collections.collectionsPopover.rename', message: 'Rename' })}
                           </DropdownMenuItem>
                           <DropdownMenuItem
                             onClick={() => setDeletingId(collection.id)}
                             variant="destructive"
                           >
                             <Trash2 className="h-3.5 w-3.5" />
-                            Delete
+                            {i18n._({ id: 'editor.panels.collections.collectionsPopover.delete', message: 'Delete' })}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>

package/src/components/ui/panels/deck-boards-fields.tsx

@@ -0,0 +1,136 @@
+'use client'
+
+import {
+  type AnyNodeId,
+  DECK_BOARD_GAPS,
+  DECK_BOARD_SIZES,
+  DECK_BOARD_STOCK,
+  type DeckBoardDirection,
+  type DeckBoardSize,
+  deckBoardSettings,
+  deckJoistSpacingLimit,
+  inchFractionLabel,
+  type MessageDescriptor,
+  setZoneIntent,
+  usePascalI18n,
+  useScene,
+} from '@pascal-app/core'
+import type { ReactNode } from 'react'
+import { useShallow } from 'zustand/react/shallow'
+import { applyRoomPlan } from '../../../lib/room-structure-commands'
+import { SegmentedControl } from '../controls/segmented-control'
+
+const IN = 0.0254
+
+const BOARD_OPTIONS = DECK_BOARD_SIZES.map((value) => ({
+  label: DECK_BOARD_STOCK[value].label,
+  value,
+}))
+
+const GAP_OPTIONS = DECK_BOARD_GAPS.map((gap, index) => ({
+  label: `${inchFractionLabel(gap)} in`,
+  value: String(index),
+}))
+
+const RUN_OPTIONS: ReadonlyArray<{ label: MessageDescriptor; value: DeckBoardDirection }> = [
+  {
+    label: /* i18n */ {
+      id: 'editor.panels.deckBoardsFields.alongHouse',
+      message: 'Along house',
+    },
+    value: 'parallel',
+  },
+  {
+    label: /* i18n */ { id: 'editor.panels.deckBoardsFields.diagonal', message: 'Diagonal' },
+    value: 'diagonal',
+  },
+  {
+    label: /* i18n */ {
+      id: 'editor.panels.deckBoardsFields.outFromHouse',
+      message: 'Out from house',
+    },
+    value: 'perpendicular',
+  },
+]
+
+function Field({ label, children }: { label: string; children: ReactNode }) {
+  return (
+    <div className="flex min-h-7 items-center justify-between gap-3">
+      <span className="shrink-0">{label}</span>
+      {children}
+    </div>
+  )
+}
+
+/**
+ * A deck's boards (`decking`, through core's `setZoneIntent`): their stock, the gap between them
+ * and the way they run against the house. The engine lays them over the deck's frame, and the
+ * frame follows: joists 12 in on centre under diagonal 5/4 or composite boards (IRC R507.7), and
+ * along the house on beams square to it under boards run out from it.
+ */
+export function DeckBoardsFields({ zoneId }: { zoneId: string }) {
+  const i18n = usePascalI18n()
+  const deck = useScene(
+    useShallow((scene) => {
+      const zone = scene.nodes[zoneId as AnyNodeId]
+      if (zone?.type !== 'zone' || zone.roomType !== 'deck') return null
+      return deckBoardSettings(zone)
+    }),
+  )
+  if (!deck) return null
+  const set = (decking: NonNullable<Parameters<typeof setZoneIntent>[1]['patch']['decking']>) =>
+    applyRoomPlan(setZoneIntent(useScene.getState().nodes, { zoneId, patch: { decking } }))
+  const stock = DECK_BOARD_STOCK[deck.boardSize]
+  const gap = DECK_BOARD_GAPS.findIndex((option) => Math.abs(option - deck.gap) < 1e-6)
+  const spacing = Math.min(16 * IN, deckJoistSpacingLimit(deck))
+  return (
+    <div
+      className="mt-3 flex flex-col gap-1.5 text-muted-foreground text-xs"
+      data-deck-boards={deck.boardSize}
+    >
+      <h3 className="font-medium text-xs">
+        {i18n._({ id: 'editor.panels.deckBoardsFields.deckBoards', message: 'Deck boards' })}
+      </h3>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.boards', message: 'Boards' })}>
+        <SegmentedControl
+          onChange={(boardSize: DeckBoardSize) => set({ boardSize })}
+          options={BOARD_OPTIONS}
+          value={deck.boardSize}
+        />
+      </Field>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.gap', message: 'Gap' })}>
+        <SegmentedControl
+          mixed={gap < 0}
+          onChange={(index: string) => set({ gap: DECK_BOARD_GAPS[Number(index)] })}
+          options={GAP_OPTIONS}
+          value={String(Math.max(gap, 0))}
+        />
+      </Field>
+      <Field label={i18n._({ id: 'editor.panels.deckBoardsFields.run', message: 'Run' })}>
+        <SegmentedControl
+          onChange={(direction: DeckBoardDirection) => set({ direction })}
+          options={RUN_OPTIONS.map((option) => ({
+            label: i18n._(option.label),
+            value: option.value,
+          }))}
+          value={deck.direction}
+        />
+      </Field>
+      <p>
+        {i18n._({
+          id: 'editor.panels.deckBoardsFields.boardsSummary',
+          message:
+            '{label} boards {thickness} × {width} in, {gap} in apart, {direction, select, parallel {along the house, on joists square to it} diagonal {at 45° to the house} other {out from the house, on joists along it, carried by beams square to the house}}; joists {spacing} in on centre.',
+          values: {
+            label: stock.label,
+            thickness: inchFractionLabel(stock.thickness),
+            width: inchFractionLabel(stock.width),
+            gap: inchFractionLabel(deck.gap),
+            direction: deck.direction,
+            spacing: Math.round(spacing / IN),
+          },
+        })}
+      </p>
+    </div>
+  )
+}