Build your own house: walls, windows, doors, floors, roof, stairs, furniture

House parts (stdlib isokit/house): house_wall drawn along a line, with ends
that adapt at corners, T-junctions and straight runs so no two walls
overlap; window and door that sit on a wall and cut its opening (door
styles panel, glass, double, sliding, opening; swing and hinge by
rotation); floor (boards, tiles, carpet, stone); roof (hip, gable, flat,
optional solar); stairs.

Furniture (stdlib isokit/furniture): chair, sofa / armchair, table with
chairs, desk with monitor and chair, TV, bed, cupboard, bookshelf, kitchen
run, bathtub, shower, toilet, washbasin, plant, rug, floor lamp.

Cut-open levels: on gf / 1f the walls in front of a room are cut low
(rooms are found by their floors), the roof becomes an outline on the
floor, and storeys above are left out. A part's storey comes from z
(storey_h, default 3 m).

Scripting: objects_of, objects_at, objects_on, mount_of, mounted, frame,
to_world, to_local, local_of. Prefab meta: shape (line / rect), mount,
storey.

Studio: drag to draw lines and rectangles (walls, roads, fences, hedges,
floors, areas, buildings, roofs). The Room tool draws a floor plus walls,
without doubling walls that already stand on an edge. Windows and doors
snap onto walls with a hover preview, and they move, turn, copy and
delete with their wall in one undo step. New parts land on the storey
the view shows. Palette categories collapse, and the palette scrolls
apart from the object list.

The MCP instructions explain house building, and list_prefabs shows
sits_on. examples/house is a furnished bungalow; the web Studio gets a
House demo button. Tests: wall corners and junctions, zero depth-sort
cycles in every view, cut levels, and the house demo in every view;
check_studio covers the room / window / door / storey flow, check_web
the House demo.

studio/studio.css

@@ -27,11 +27,20 @@ input[type=checkbox] { accent-color: var(--accent); }
 .st-right { border-right: 0; border-left: 1px solid var(--stroke); padding: 10px; }
 .st-panel { padding: 8px 10px; border-bottom: 1px solid var(--stroke); }
 .st-grow-panel { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 140px; }
+/* the palette scrolls on its own, so the object list below stays in view */
+.st-left { overflow: hidden; }
+.st-pal-panel { flex: 0 1 auto; max-height: 62%; min-height: 120px; display: flex; flex-direction: column; }
+.st-pal-panel .st-palette { overflow: auto; min-height: 0; padding-right: 2px; }
 .st-panel h2, .st-right h2 { margin: 2px 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--mute); font-weight: 600; }
 .st-panel h2 small { text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
 .st-panel input[type=search] { width: 100%; margin-bottom: 6px; }
 .st-palette { display: flex; flex-direction: column; gap: 6px; }
-.st-cat { font-size: 11px; color: var(--mute); margin: 4px 0 2px; }
+.st-cat { font-size: 11px; color: var(--mute); margin: 4px 0 2px; cursor: pointer; user-select: none; }
+.st-cat::before { content: "▾"; display: inline-block; width: 12px; }
+.st-cat.st-closed::before { content: "▸"; }
+.st-cat:hover { color: var(--fg); }
+.st-cat small { opacity: .7; }
+.st-tiles[hidden] { display: none; }
 .st-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
 .st-tile { display: flex; align-items: center; gap: 6px; text-align: left; padding: 4px 6px; overflow: hidden; }
 .st-tile i { font-style: normal; width: 18px; text-align: center; flex: 0 0 auto; }
@@ -150,6 +159,11 @@ input[type=checkbox] { accent-color: var(--accent); }
 .ag-grip { position: absolute; left: 0; top: 0; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; background: linear-gradient(135deg, var(--mute) 0 2px, transparent 2px 4px, var(--mute) 4px 5px, transparent 5px); opacity: .5; border-top-left-radius: 8px; }
 .ag-grip:hover { opacity: 1; }
 
+/* previews while placing: footprints, wall planes, where a window lands */
+.iso-svg .st-ghosts { pointer-events: none; }
+.iso-svg .st-ghost { fill: color-mix(in srgb, var(--iso-accent) 16%, transparent); stroke: var(--iso-accent); stroke-width: 1.5; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
+.iso-svg .st-ghost.st-plane { fill: color-mix(in srgb, var(--iso-accent) 28%, transparent); stroke-dasharray: none; }
+
 @media (max-width: 900px) {
   .st-main { grid-template-columns: 200px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 40vh; }
   .st-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--stroke); }