@pascal-app/editor 0.7.0 → 0.8.0

package/src/components/ui/panels/door-panel.tsx

@@ -12,8 +12,8 @@ import { useViewer } from '@pascal-app/viewer'
 import { BookMarked, Copy, DoorOpen, FlipHorizontal2, Move, Trash2 } from 'lucide-react'
 import { useCallback, useRef } from 'react'
 import { usePresetsAdapter } from '../../../contexts/presets-context'
-import { cn } from '../../../lib/utils'
 import { sfxEmitter } from '../../../lib/sfx-bus'
+import { cn } from '../../../lib/utils'
 import useEditor from '../../../store/use-editor'
 import { ActionButton, ActionGroup } from '../controls/action-button'
 import { MetricControl } from '../controls/metric-control'
@@ -148,7 +148,13 @@ export function DoorPanel() {
       const liveNode = useScene.getState().nodes[selectedId as AnyNodeId]
       if (liveNode?.type !== 'door') return
 
-      if (!(previewRef.current && previewRef.current.id === selectedId && previewRef.current.key === key)) {
+      if (
+        !(
+          previewRef.current &&
+          previewRef.current.id === selectedId &&
+          previewRef.current.key === key
+        )
+      ) {
         previewRef.current = {
           id: selectedId as AnyNodeId,
           key,
@@ -333,7 +339,8 @@ export function DoorPanel() {
   const normHeights = node.segments.map((seg) => seg.heightRatio / hSum)
   const isOpening = node.openingKind === 'opening'
   const openingShape = node.openingShape ?? 'rectangle'
-  const doorShape = openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
+  const doorShape =
+    openingShape === 'arch' || openingShape === 'rounded' ? openingShape : 'rectangle'
   const openingRadiusMode = node.openingRadiusMode ?? 'all'
   const openingTopRadii = node.openingTopRadii ?? [0.15, 0.15]
   const cornerRadius = node.cornerRadius ?? 0.15
@@ -578,7 +585,8 @@ export function DoorPanel() {
                     isSelected
                       ? 'border-orange-400/60 bg-orange-400/10 text-foreground'
                       : 'border-border/50 bg-[#2C2C2E] text-muted-foreground hover:bg-[#3e3e3e] hover:text-foreground',
-                    !option.available && 'cursor-not-allowed opacity-45 hover:bg-[#2C2C2E] hover:text-muted-foreground',
+                    !option.available &&
+                      'cursor-not-allowed opacity-45 hover:bg-[#2C2C2E] hover:text-muted-foreground',
                   )}
                   disabled={!option.available}
                   key={option.value}
@@ -962,312 +970,311 @@ export function DoorPanel() {
             />
           </PanelSection>
 
-      {!isGarageDoor && (
-        <PanelSection title="Content Padding">
-          <SliderControl
-            label="Horizontal"
-            max={0.2}
-            min={0}
-            onChange={(v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] })}
-            precision={3}
-            step={0.005}
-            unit="m"
-            value={Math.round(node.contentPadding[0] * 1000) / 1000}
-          />
-          <SliderControl
-            label="Vertical"
-            max={0.2}
-            min={0}
-            onChange={(v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] })}
-            precision={3}
-            step={0.005}
-            unit="m"
-            value={Math.round(node.contentPadding[1] * 1000) / 1000}
-          />
-        </PanelSection>
-      )}
-
-      {isSwingDoor && (
-        <PanelSection title="Swing">
-          <div className="flex flex-col gap-2 px-1 pb-1">
-            <div className="space-y-1">
-              <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-                Hinges Side
-              </span>
-              <SegmentedControl
-                onChange={(v) => handleUpdate({ hingesSide: v })}
-                options={[
-                  { label: 'Left', value: 'left' },
-                  { label: 'Right', value: 'right' },
-                ]}
-                value={node.hingesSide}
-              />
-            </div>
-            <div className="space-y-1">
-              <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-                Direction
-              </span>
-              <SegmentedControl
-                onChange={(v) => handleUpdate({ swingDirection: v })}
-                options={[
-                  { label: 'Inward', value: 'inward' },
-                  { label: 'Outward', value: 'outward' },
-                ]}
-                value={node.swingDirection}
+          {!isGarageDoor && (
+            <PanelSection title="Content Padding">
+              <SliderControl
+                label="Horizontal"
+                max={0.2}
+                min={0}
+                onChange={(v) => handleUpdate({ contentPadding: [v, node.contentPadding[1]] })}
+                precision={3}
+                step={0.005}
+                unit="m"
+                value={Math.round(node.contentPadding[0] * 1000) / 1000}
               />
-            </div>
-          </div>
-        </PanelSection>
-      )}
-
-      {isSwingDoor && (
-        <PanelSection title="Threshold">
-          <ToggleControl
-            checked={node.threshold}
-            label="Enable Threshold"
-            onChange={(checked) => handleUpdate({ threshold: checked })}
-          />
-          {node.threshold && (
-            <div className="mt-1 flex flex-col gap-1">
               <SliderControl
-                label="Height"
-                max={0.1}
-                min={0.005}
-                onChange={(v) => handleUpdate({ thresholdHeight: v })}
+                label="Vertical"
+                max={0.2}
+                min={0}
+                onChange={(v) => handleUpdate({ contentPadding: [node.contentPadding[0], v] })}
                 precision={3}
                 step={0.005}
                 unit="m"
-                value={Math.round(node.thresholdHeight * 1000) / 1000}
+                value={Math.round(node.contentPadding[1] * 1000) / 1000}
               />
-            </div>
+            </PanelSection>
           )}
-        </PanelSection>
-      )}
 
-      {!isGarageDoor && (
-        <PanelSection title="Handle">
           {isSwingDoor && (
-            <ToggleControl
-              checked={node.handle}
-              label="Enable Handle"
-              onChange={(checked) => handleUpdate({ handle: checked })}
-            />
-          )}
-          {(node.handle || !isSwingDoor) && (
-            <div className="mt-1 flex flex-col gap-1">
-              <SliderControl
-                label="Height"
-                max={node.height - 0.1}
-                min={0.5}
-                onChange={(v) => handleUpdate({ handleHeight: v })}
-                precision={2}
-                step={0.05}
-                unit="m"
-                value={Math.round(node.handleHeight * 100) / 100}
-              />
-              {supportsHandleSide && (
+            <PanelSection title="Swing">
+              <div className="flex flex-col gap-2 px-1 pb-1">
                 <div className="space-y-1">
                   <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
-                    Handle Side
+                    Hinges Side
                   </span>
                   <SegmentedControl
-                    onChange={(v) => handleUpdate({ handleSide: v })}
+                    onChange={(v) => handleUpdate({ hingesSide: v })}
                     options={[
                       { label: 'Left', value: 'left' },
                       { label: 'Right', value: 'right' },
                     ]}
-                    value={node.handleSide}
+                    value={node.hingesSide}
                   />
                 </div>
-              )}
-            </div>
+                <div className="space-y-1">
+                  <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                    Direction
+                  </span>
+                  <SegmentedControl
+                    onChange={(v) => handleUpdate({ swingDirection: v })}
+                    options={[
+                      { label: 'Inward', value: 'inward' },
+                      { label: 'Outward', value: 'outward' },
+                    ]}
+                    value={node.swingDirection}
+                  />
+                </div>
+              </div>
+            </PanelSection>
           )}
-        </PanelSection>
-      )}
 
-      {isSwingDoor && (
-        <PanelSection title="Hardware">
-          <ToggleControl
-            checked={node.doorCloser}
-            label="Door Closer"
-            onChange={(checked) => handleUpdate({ doorCloser: checked })}
-          />
-          <ToggleControl
-            checked={node.panicBar}
-            label="Panic Bar"
-            onChange={(checked) => handleUpdate({ panicBar: checked })}
-          />
-          {node.panicBar && (
-            <div className="mt-1 flex flex-col gap-1">
-              <SliderControl
-                label="Bar Height"
-                max={node.height - 0.1}
-                min={0.5}
-                onChange={(v) => handleUpdate({ panicBarHeight: v })}
-                precision={2}
-                step={0.05}
-                unit="m"
-                value={Math.round(node.panicBarHeight * 100) / 100}
+          {isSwingDoor && (
+            <PanelSection title="Threshold">
+              <ToggleControl
+                checked={node.threshold}
+                label="Enable Threshold"
+                onChange={(checked) => handleUpdate({ threshold: checked })}
               />
-            </div>
-          )}
-        </PanelSection>
-      )}
-
-      {!isGarageDoor && (
-        <PanelSection title="Segments">
-          {node.segments.map((seg, i) => {
-            const numCols = seg.columnRatios.length
-            const colSum = seg.columnRatios.reduce((a, b) => a + b, 0)
-            const normCols = seg.columnRatios.map((r) => r / colSum)
-            return (
-              <div className="mb-2 flex flex-col gap-1" key={i}>
-                <div className="flex items-center justify-between pb-1">
-                  <span className="font-medium text-white/80 text-xs">Segment {i + 1}</span>
+              {node.threshold && (
+                <div className="mt-1 flex flex-col gap-1">
+                  <SliderControl
+                    label="Height"
+                    max={0.1}
+                    min={0.005}
+                    onChange={(v) => handleUpdate({ thresholdHeight: v })}
+                    precision={3}
+                    step={0.005}
+                    unit="m"
+                    value={Math.round(node.thresholdHeight * 1000) / 1000}
+                  />
                 </div>
+              )}
+            </PanelSection>
+          )}
 
-                <SegmentedControl
-                  onChange={(t) => {
-                    const updated = node.segments.map((s, idx) =>
-                      idx === i ? { ...s, type: t } : s,
-                    )
-                    handleUpdate({ segments: updated })
-                  }}
-                  options={[
-                    { label: 'Panel', value: 'panel' },
-                    { label: 'Glass', value: 'glass' },
-                    { label: 'Empty', value: 'empty' },
-                  ]}
-                  value={seg.type}
-                />
-
-                <SliderControl
-                  label="Height"
-                  max={95}
-                  min={5}
-                  onChange={(v) => setSegmentHeightRatio(i, v / 100)}
-                  precision={1}
-                  step={1}
-                  unit="%"
-                  value={Math.round(normHeights[i]! * 100 * 10) / 10}
+          {!isGarageDoor && (
+            <PanelSection title="Handle">
+              {isSwingDoor && (
+                <ToggleControl
+                  checked={node.handle}
+                  label="Enable Handle"
+                  onChange={(checked) => handleUpdate({ handle: checked })}
                 />
+              )}
+              {(node.handle || !isSwingDoor) && (
+                <div className="mt-1 flex flex-col gap-1">
+                  <SliderControl
+                    label="Height"
+                    max={node.height - 0.1}
+                    min={0.5}
+                    onChange={(v) => handleUpdate({ handleHeight: v })}
+                    precision={2}
+                    step={0.05}
+                    unit="m"
+                    value={Math.round(node.handleHeight * 100) / 100}
+                  />
+                  {supportsHandleSide && (
+                    <div className="space-y-1">
+                      <span className="font-medium text-[10px] text-muted-foreground/80 uppercase tracking-wider">
+                        Handle Side
+                      </span>
+                      <SegmentedControl
+                        onChange={(v) => handleUpdate({ handleSide: v })}
+                        options={[
+                          { label: 'Left', value: 'left' },
+                          { label: 'Right', value: 'right' },
+                        ]}
+                        value={node.handleSide}
+                      />
+                    </div>
+                  )}
+                </div>
+              )}
+            </PanelSection>
+          )}
 
-                <SliderControl
-                  label="Columns"
-                  max={8}
-                  min={1}
-                  onChange={(v) => {
-                    const n = Math.max(1, Math.min(8, Math.round(v)))
-                    const updated = node.segments.map((s, idx) =>
-                      idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s,
-                    )
-                    handleUpdate({ segments: updated })
-                  }}
-                  precision={0}
-                  step={1}
-                  value={numCols}
-                />
+          {isSwingDoor && (
+            <PanelSection title="Hardware">
+              <ToggleControl
+                checked={node.doorCloser}
+                label="Door Closer"
+                onChange={(checked) => handleUpdate({ doorCloser: checked })}
+              />
+              <ToggleControl
+                checked={node.panicBar}
+                label="Panic Bar"
+                onChange={(checked) => handleUpdate({ panicBar: checked })}
+              />
+              {node.panicBar && (
+                <div className="mt-1 flex flex-col gap-1">
+                  <SliderControl
+                    label="Bar Height"
+                    max={node.height - 0.1}
+                    min={0.5}
+                    onChange={(v) => handleUpdate({ panicBarHeight: v })}
+                    precision={2}
+                    step={0.05}
+                    unit="m"
+                    value={Math.round(node.panicBarHeight * 100) / 100}
+                  />
+                </div>
+              )}
+            </PanelSection>
+          )}
 
-                {numCols > 1 && (
-                  <div className="mt-1 border-border/50 border-t pt-1">
-                    {normCols.map((ratio, ci) => (
-                      <SliderControl
-                        key={`c-${ci}`}
-                        label={`C${ci + 1}`}
-                        max={95}
-                        min={5}
-                        onChange={(v) => setSegmentColumnRatio(i, ci, v / 100)}
-                        precision={1}
-                        step={1}
-                        unit="%"
-                        value={Math.round(ratio * 100 * 10) / 10}
-                      />
-                    ))}
-                    <SliderControl
-                      label="Divider"
-                      max={0.1}
-                      min={0.005}
-                      onChange={(v) => {
+          {!isGarageDoor && (
+            <PanelSection title="Segments">
+              {node.segments.map((seg, i) => {
+                const numCols = seg.columnRatios.length
+                const colSum = seg.columnRatios.reduce((a, b) => a + b, 0)
+                const normCols = seg.columnRatios.map((r) => r / colSum)
+                return (
+                  <div className="mb-2 flex flex-col gap-1" key={i}>
+                    <div className="flex items-center justify-between pb-1">
+                      <span className="font-medium text-white/80 text-xs">Segment {i + 1}</span>
+                    </div>
+
+                    <SegmentedControl
+                      onChange={(t) => {
                         const updated = node.segments.map((s, idx) =>
-                          idx === i ? { ...s, dividerThickness: v } : s,
+                          idx === i ? { ...s, type: t } : s,
                         )
                         handleUpdate({ segments: updated })
                       }}
-                      precision={3}
-                      step={0.005}
-                      unit="m"
-                      value={Math.round(seg.dividerThickness * 1000) / 1000}
+                      options={[
+                        { label: 'Panel', value: 'panel' },
+                        { label: 'Glass', value: 'glass' },
+                        { label: 'Empty', value: 'empty' },
+                      ]}
+                      value={seg.type}
                     />
-                  </div>
-                )}
 
-                {seg.type === 'panel' && (
-                  <div className="mt-1 border-border/50 border-t pt-1">
                     <SliderControl
-                      label="Inset"
-                      max={0.1}
-                      min={0}
-                      onChange={(v) => {
-                        const updated = node.segments.map((s, idx) =>
-                          idx === i ? { ...s, panelInset: v } : s,
-                        )
-                        handleUpdate({ segments: updated })
-                      }}
-                      precision={3}
-                      step={0.005}
-                      unit="m"
-                      value={Math.round(seg.panelInset * 1000) / 1000}
+                      label="Height"
+                      max={95}
+                      min={5}
+                      onChange={(v) => setSegmentHeightRatio(i, v / 100)}
+                      precision={1}
+                      step={1}
+                      unit="%"
+                      value={Math.round(normHeights[i]! * 100 * 10) / 10}
                     />
+
                     <SliderControl
-                      label="Depth"
-                      max={0.1}
-                      min={0}
+                      label="Columns"
+                      max={8}
+                      min={1}
                       onChange={(v) => {
+                        const n = Math.max(1, Math.min(8, Math.round(v)))
                         const updated = node.segments.map((s, idx) =>
-                          idx === i ? { ...s, panelDepth: v } : s,
+                          idx === i ? { ...s, columnRatios: Array(n).fill(1 / n) } : s,
                         )
                         handleUpdate({ segments: updated })
                       }}
-                      precision={3}
-                      step={0.005}
-                      unit="m"
-                      value={Math.round(seg.panelDepth * 1000) / 1000}
+                      precision={0}
+                      step={1}
+                      value={numCols}
                     />
+
+                    {numCols > 1 && (
+                      <div className="mt-1 border-border/50 border-t pt-1">
+                        {normCols.map((ratio, ci) => (
+                          <SliderControl
+                            key={`c-${ci}`}
+                            label={`C${ci + 1}`}
+                            max={95}
+                            min={5}
+                            onChange={(v) => setSegmentColumnRatio(i, ci, v / 100)}
+                            precision={1}
+                            step={1}
+                            unit="%"
+                            value={Math.round(ratio * 100 * 10) / 10}
+                          />
+                        ))}
+                        <SliderControl
+                          label="Divider"
+                          max={0.1}
+                          min={0.005}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, dividerThickness: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.dividerThickness * 1000) / 1000}
+                        />
+                      </div>
+                    )}
+
+                    {seg.type === 'panel' && (
+                      <div className="mt-1 border-border/50 border-t pt-1">
+                        <SliderControl
+                          label="Inset"
+                          max={0.1}
+                          min={0}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, panelInset: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.panelInset * 1000) / 1000}
+                        />
+                        <SliderControl
+                          label="Depth"
+                          max={0.1}
+                          min={0}
+                          onChange={(v) => {
+                            const updated = node.segments.map((s, idx) =>
+                              idx === i ? { ...s, panelDepth: v } : s,
+                            )
+                            handleUpdate({ segments: updated })
+                          }}
+                          precision={3}
+                          step={0.005}
+                          unit="m"
+                          value={Math.round(seg.panelDepth * 1000) / 1000}
+                        />
+                      </div>
+                    )}
                   </div>
+                )
+              })}
+
+              <div className="flex gap-1.5 px-1 pt-1">
+                <ActionButton
+                  label="+ Add Segment"
+                  onClick={() => {
+                    const updated = [
+                      ...node.segments,
+                      {
+                        type: 'panel' as const,
+                        heightRatio: 1,
+                        columnRatios: [1],
+                        dividerThickness: 0.03,
+                        panelDepth: 0.01,
+                        panelInset: 0.04,
+                      },
+                    ]
+                    handleUpdate({ segments: updated })
+                  }}
+                />
+                {node.segments.length > 1 && (
+                  <ActionButton
+                    className="text-white/60 hover:text-white"
+                    label="- Remove"
+                    onClick={() => handleUpdate({ segments: node.segments.slice(0, -1) })}
+                  />
                 )}
               </div>
-            )
-          })}
-
-          <div className="flex gap-1.5 px-1 pt-1">
-            <ActionButton
-              label="+ Add Segment"
-              onClick={() => {
-                const updated = [
-                  ...node.segments,
-                  {
-                    type: 'panel' as const,
-                    heightRatio: 1,
-                    columnRatios: [1],
-                    dividerThickness: 0.03,
-                    panelDepth: 0.01,
-                    panelInset: 0.04,
-                  },
-                ]
-                handleUpdate({ segments: updated })
-              }}
-            />
-            {node.segments.length > 1 && (
-              <ActionButton
-                className="text-white/60 hover:text-white"
-                label="- Remove"
-                onClick={() => handleUpdate({ segments: node.segments.slice(0, -1) })}
-              />
-            )}
-          </div>
-        </PanelSection>
-      )}
-
+            </PanelSection>
+          )}
         </>
       )}
 

package/src/components/ui/panels/fence-panel.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-
 import {
   type AnyNode,
   type AnyNodeId,
@@ -86,10 +85,6 @@ export function FencePanel() {
     setSelection({ selectedIds: [] })
   }, [setSelection])
 
-
-
-
-
   if (!(node && node.type === 'fence' && selectedId && selectedCount === 1)) return null
 
   const length = getWallCurveLength(node)