@pascal-app/editor 0.5.1 → 0.7.0

package/src/components/ui/sidebar/mobile-tab-bar.tsx

@@ -0,0 +1,46 @@
+'use client'
+
+import { cn } from './../../../lib/utils'
+import type { SidebarTab } from './tab-bar'
+
+interface MobileTabBarProps {
+  tabs: SidebarTab[]
+  activeTab: string
+  onTabPress: (id: string) => void
+}
+
+export function MobileTabBar({ tabs, activeTab, onTabPress }: MobileTabBarProps) {
+  return (
+    <div
+      className="z-50 flex h-14 shrink-0 border-border/50 border-t bg-sidebar text-sidebar-foreground"
+      style={{
+        // Cap the safe-area inset — iOS Chrome can report its bottom UI bar
+        // (50–100px) as part of the safe area which would balloon the tab bar.
+        // 34px matches the iPhone home-indicator height (the typical max).
+        paddingBottom: 'min(env(safe-area-inset-bottom, 0px), 34px)',
+      }}
+    >
+      {tabs.map((tab) => {
+        const isActive = activeTab === tab.id
+        return (
+          <button
+            className={cn(
+              'flex flex-1 flex-col items-center justify-center gap-0.5 text-xs transition-colors',
+              isActive ? 'text-foreground' : 'text-muted-foreground',
+            )}
+            key={tab.id}
+            onClick={() => onTabPress(tab.id)}
+            type="button"
+          >
+            {tab.mobileIcon ? (
+              <span className={cn('flex h-5 w-5 items-center justify-center')}>
+                {tab.mobileIcon}
+              </span>
+            ) : null}
+            <span className="font-medium">{tab.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/components/ui/sidebar/panels/settings-panel/keyboard-shortcuts-dialog.tsx

@@ -88,8 +88,8 @@ const SHORTCUT_CATEGORIES: ShortcutCategory[] = [
   {
     title: 'Item Placement',
     shortcuts: [
-      { keys: ['R'], action: 'Rotate item clockwise by 90 degrees' },
-      { keys: ['T'], action: 'Rotate item counter-clockwise by 90 degrees' },
+      { keys: ['R'], action: 'Rotate item clockwise, or toggle selected door open/closed' },
+      { keys: ['T'], action: 'Rotate item counter-clockwise, or close selected door' },
       {
         keys: ['Shift'],
         action: 'Temporarily bypass placement validation constraints',

package/src/components/ui/sidebar/panels/site-panel/building-tree-node.tsx

@@ -1,7 +1,7 @@
-import { type AnyNodeId, type BuildingNode, LevelNode, useScene } from '@pascal-app/core'
+import { type BuildingNode, LevelNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import { Building2, Plus } from 'lucide-react'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import {
   Tooltip,
@@ -12,12 +12,16 @@ import { focusTreeNode, TreeNode, TreeNodeWrapper } from './tree-node'
 import { TreeNodeActions } from './tree-node-actions'
 
 interface BuildingTreeNodeProps {
-  nodeId: AnyNodeId
+  nodeId: BuildingNode['id']
   depth: number
   isLast?: boolean
 }
 
-export function BuildingTreeNode({ nodeId, depth, isLast }: BuildingTreeNodeProps) {
+export const BuildingTreeNode = memo(function BuildingTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: BuildingTreeNodeProps) {
   const [expanded, setExpanded] = useState(true)
   const createNode = useScene((state) => state.createNode)
   const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
@@ -84,4 +88,4 @@ export function BuildingTreeNode({ nodeId, depth, isLast }: BuildingTreeNodeProp
       ))}
     </TreeNodeWrapper>
   )
-}
+})

package/src/components/ui/sidebar/panels/site-panel/ceiling-tree-node.tsx

@@ -1,7 +1,7 @@
 import { type AnyNodeId, type CeilingNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useCallback, useEffect, useState } from 'react'
+import { memo, useCallback, useEffect, useState } from 'react'
 import { useShallow } from 'zustand/react/shallow'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
@@ -14,7 +14,11 @@ interface CeilingTreeNodeProps {
   isLast?: boolean
 }
 
-export function CeilingTreeNode({ nodeId, depth, isLast }: CeilingTreeNodeProps) {
+export const CeilingTreeNode = memo(function CeilingTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: CeilingTreeNodeProps) {
   const [expanded, setExpanded] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
@@ -113,7 +117,7 @@ export function CeilingTreeNode({ nodeId, depth, isLast }: CeilingTreeNodeProps)
       ))}
     </TreeNodeWrapper>
   )
-}
+})
 
 /**
  * Calculate the area of a polygon using the shoelace formula

package/src/components/ui/sidebar/panels/site-panel/column-tree-node.tsx

@@ -0,0 +1,77 @@
+import { type AnyNodeId, type ColumnNode, useScene } from '@pascal-app/core'
+import { useViewer } from '@pascal-app/viewer'
+import Image from 'next/image'
+import { memo, useCallback, useState } from 'react'
+import useEditor from './../../../../../store/use-editor'
+import { InlineRenameInput } from './inline-rename-input'
+import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
+import { TreeNodeActions } from './tree-node-actions'
+
+interface ColumnTreeNodeProps {
+  nodeId: AnyNodeId
+  depth: number
+  isLast?: boolean
+}
+
+export const ColumnTreeNode = memo(function ColumnTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: ColumnTreeNodeProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const isVisible = useScene((s) => s.nodes[nodeId]?.visible !== false)
+  const node = useScene((s) => s.nodes[nodeId] as ColumnNode | undefined)
+  const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
+  const isHovered = useViewer((state) => state.hoveredId === nodeId)
+  const setSelection = useViewer((state) => state.setSelection)
+  const setHoveredId = useViewer((state) => state.setHoveredId)
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation()
+      const handled = handleTreeSelection(
+        e,
+        nodeId,
+        useViewer.getState().selection.selectedIds,
+        setSelection,
+      )
+      if (!handled && useEditor.getState().phase === 'furnish') {
+        useEditor.getState().setPhase('structure')
+      }
+    },
+    [nodeId, setSelection],
+  )
+
+  const defaultName = node?.name || 'Column'
+
+  return (
+    <TreeNodeWrapper
+      actions={<TreeNodeActions nodeId={nodeId} />}
+      depth={depth}
+      expanded={false}
+      hasChildren={false}
+      icon={
+        <Image alt="" className="object-contain" height={14} src="/icons/column.png" width={14} />
+      }
+      isHovered={isHovered}
+      isLast={isLast}
+      isSelected={isSelected}
+      isVisible={isVisible}
+      label={
+        <InlineRenameInput
+          defaultName={defaultName}
+          isEditing={isEditing}
+          nodeId={nodeId}
+          onStartEditing={() => setIsEditing(true)}
+          onStopEditing={() => setIsEditing(false)}
+        />
+      }
+      nodeId={nodeId}
+      onClick={handleClick}
+      onDoubleClick={() => focusTreeNode(nodeId)}
+      onMouseEnter={() => setHoveredId(nodeId)}
+      onMouseLeave={() => setHoveredId(null)}
+      onToggle={() => {}}
+    />
+  )
+})

package/src/components/ui/sidebar/panels/site-panel/door-tree-node.tsx

@@ -3,7 +3,7 @@
 import { type AnyNodeId, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useCallback, useState } from 'react'
+import { memo, useCallback, useState } from 'react'
 import useEditor from './../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -15,7 +15,11 @@ interface DoorTreeNodeProps {
   isLast?: boolean
 }
 
-export function DoorTreeNode({ nodeId, depth, isLast }: DoorTreeNodeProps) {
+export const DoorTreeNode = memo(function DoorTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: DoorTreeNodeProps) {
   const [isEditing, setIsEditing] = useState(false)
   const isVisible = useScene((s) => s.nodes[nodeId as AnyNodeId]?.visible !== false)
   const isSelected = useViewer((state) => state.selection.selectedIds.includes(nodeId))
@@ -72,4 +76,4 @@ export function DoorTreeNode({ nodeId, depth, isLast }: DoorTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})

package/src/components/ui/sidebar/panels/site-panel/fence-tree-node.tsx

@@ -1,7 +1,7 @@
 import { type AnyNodeId, type FenceNode, useScene } from '@pascal-app/core'
 import { useViewer } from '@pascal-app/viewer'
 import Image from 'next/image'
-import { useState } from 'react'
+import { memo, useState } from 'react'
 import useEditor from '../../../../../store/use-editor'
 import { InlineRenameInput } from './inline-rename-input'
 import { focusTreeNode, handleTreeSelection, TreeNodeWrapper } from './tree-node'
@@ -13,7 +13,11 @@ interface FenceTreeNodeProps {
   isLast?: boolean
 }
 
-export function FenceTreeNode({ nodeId, depth, isLast }: FenceTreeNodeProps) {
+export const FenceTreeNode = memo(function FenceTreeNode({
+  nodeId,
+  depth,
+  isLast,
+}: FenceTreeNodeProps) {
   const node = useScene((state) => state.nodes[nodeId]) as FenceNode | undefined
   const [isEditing, setIsEditing] = useState(false)
   const selectedIds = useViewer((state) => state.selection.selectedIds)
@@ -62,4 +66,4 @@ export function FenceTreeNode({ nodeId, depth, isLast }: FenceTreeNodeProps) {
       onToggle={() => {}}
     />
   )
-}
+})