Give entrance its own dedicated section separate from objects

dist/index.html

@@ -5,7 +5,7 @@
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>furniture-app</title>
-    <script type="module" crossorigin src="/assets/index-r1bklXRq.js"></script>
+    <script type="module" crossorigin src="/assets/index-CEvVbPGt.js"></script>
     <link rel="stylesheet" crossorigin href="/assets/index-Gl7EQEpA.css">
   </head>
   <body>

src/components/ControlPanel.tsx

@@ -284,64 +284,60 @@ export function ControlPanel({
 
             <div className="section">
               <div className="section-title">Scene</div>
-              <div className="row">
+              <button onClick={createObject} style={{ width: '100%' }}>
-                <button onClick={placeEntrance} style={{ flex: 1 }}>
+                Create Object
+              </button>
+            </div>
+
+            <div className="section">
+              <div className="section-title">Entrance</div>
+              {state.entrance ? (
+                <>
+                  <div className="grid-2">
+                    <label className="field">
+                      <span>X</span>
+                      <NumberField value={state.entrance.x} width="100%" onChange={(v) => setEntrance({ x: v })} />
+                    </label>
+                    <label className="field">
+                      <span>Y</span>
+                      <NumberField value={state.entrance.y} width="100%" onChange={(v) => setEntrance({ y: v })} />
+                    </label>
+                    <label className="field">
+                      <span>Width</span>
+                      <NumberField
+                        value={state.entrance.width ?? 20}
+                        min={10}
+                        width="100%"
+                        onChange={(v) => setEntrance({ width: v })}
+                      />
+                    </label>
+                    <label className="field">
+                      <span>Height</span>
+                      <NumberField
+                        value={state.entrance.height ?? 20}
+                        min={10}
+                        width="100%"
+                        onChange={(v) => setEntrance({ height: v })}
+                      />
+                    </label>
+                  </div>
+                  <button
+                    style={{ marginTop: 8, width: '100%' }}
+                    onClick={() => onStateChange({ ...state, entrance: null })}
+                  >
+                    Remove Entrance
+                  </button>
+                </>
+              ) : (
+                <button onClick={placeEntrance} style={{ width: '100%' }}>
                   Place Entrance
                 </button>
-                <button onClick={createObject} style={{ flex: 1 }}>
+              )}
-                  Create Object
-                </button>
-              </div>
             </div>
 
             <div className="section">
               <div className="section-title">Objects</div>
               <div className="obj-list">{objects.map(renderObjectCard)}</div>
-
-              {state.entrance && (
-                <div
-                  className={`obj-card ${selectedId === '__entrance__' ? 'selected' : ''}`}
-                  style={{ marginTop: 6 }}
-                >
-                  <div className="obj-head" onClick={() => onSelect('__entrance__')}>
-                    <span className="obj-swatch" style={{ background: '#3fbf7f' }} />
-                    <span className="obj-name">Entrance</span>
-                    <span className="obj-badge">fixed</span>
-                  </div>
-                  {selectedId === '__entrance__' && (
-                    <div className="obj-body">
-                      <div className="grid-2">
-                        <label className="field">
-                          <span>X</span>
-                          <NumberField value={state.entrance.x} width="100%" onChange={(v) => setEntrance({ x: v })} />
-                        </label>
-                        <label className="field">
-                          <span>Y</span>
-                          <NumberField value={state.entrance.y} width="100%" onChange={(v) => setEntrance({ y: v })} />
-                        </label>
-                        <label className="field">
-                          <span>Width</span>
-                          <NumberField
-                            value={state.entrance.width ?? 20}
-                            min={10}
-                            width="100%"
-                            onChange={(v) => setEntrance({ width: v })}
-                          />
-                        </label>
-                        <label className="field">
-                          <span>Height</span>
-                          <NumberField
-                            value={state.entrance.height ?? 20}
-                            min={10}
-                            width="100%"
-                            onChange={(v) => setEntrance({ height: v })}
-                          />
-                        </label>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
             </div>
           </>
         )}