+
+
+ handleUpdate({ threshold: checked })}
+ />
+
+ {node.threshold && (
+
+ handleUpdate({ thresholdHeight: v })}
+ min={0.005}
+ precision={3}
+ step={0.005}
+ className="flex-1"
+ />
+ m
+
+ )}
+
+
+ {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 (
+
+
+
Segment {i + 1}
+
+ {(['panel', 'glass', 'empty'] as const).map((t) => (
+
+ ))}
+
+
+
+ setSegmentHeightRatio(i, v / 100)}
+ min={5}
+ max={95}
+ precision={1}
+ step={1}
+ className="flex-1"
+ />
+ %
+
+ {/* Columns */}
+
+
{
+ 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 })
+ }}
+ min={1}
+ max={8}
+ precision={0}
+ step={1}
+ />
+ {numCols > 1 && (
+
+ {normCols.map((ratio, ci) => (
+
+ setSegmentColumnRatio(i, ci, v / 100)}
+ min={5}
+ max={95}
+ precision={1}
+ step={1}
+ className="flex-1"
+ />
+ %
+
+ ))}
+
+ {
+ const updated = node.segments.map((s, idx) =>
+ idx === i ? { ...s, dividerThickness: v } : s,
+ )
+ handleUpdate({ segments: updated })
+ }}
+ min={0.005}
+ precision={3}
+ step={0.005}
+ className="flex-1"
+ />
+ m
+
+
+ {seg.type === 'panel' && (
+
+
+ {
+ const updated = node.segments.map((s, idx) =>
+ idx === i ? { ...s, panelInset: v } : s,
+ )
+ handleUpdate({ segments: updated })
+ }}
+ min={0}
+ precision={3}
+ step={0.005}
+ className="flex-1"
+ />
+ m
+
+
+ {
+ const updated = node.segments.map((s, idx) =>
+ idx === i ? { ...s, panelDepth: v } : s,
+ )
+ handleUpdate({ segments: updated })
+ }}
+ min={0}
+ precision={3}
+ step={0.005}
+ className="flex-1"
+ />
+ m
+
+
+ )}
+
+ )
+ })}
+
+
+ {node.segments.length > 1 && (
+
+ )}
+
+