// FloorCanvas — furniture library
// Each entry: { kind, label, category, w, h (in feet), render(opts) }
// render returns SVG children for the shape, drawn in local coordinates 0..w, 0..h (feet).
// Top-level <g transform> handles position/rotation/scale.

const COLORS = {
  ink: 'var(--ink)',
  paper: 'var(--paper)',
  paper2: 'var(--paper-2)',
  paper3: 'var(--paper-3)',
  paper4: 'var(--paper-4)',
  yellow: 'var(--yellow)',
  red: 'var(--red)',
  blue: 'var(--blue)',
  blueSoft: 'var(--blue-soft)',
};

// strokeWidth is given in pixels (post-scale). Use vector-effect="non-scaling-stroke" everywhere.
const sw = (v) => ({ strokeWidth: v, vectorEffect: 'non-scaling-stroke' });

function FurnitureBox({ w, h, fill = COLORS.paper, stroke = COLORS.ink, strokeWidth = 1.5, children, dashed = false }) {
  return (
    <g>
      <rect x={0} y={0} width={w} height={h} fill={fill} stroke={stroke} {...sw(strokeWidth)} strokeDasharray={dashed ? '0.25 0.15' : null} />
      {children}
    </g>
  );
}

const FURNITURE = [
  // ============ BEDROOM ============
  {
    kind: 'bed-queen', label: 'Queen bed', category: 'Bedroom', w: 5, h: 6.7,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {/* headboard */}
        <rect x={0} y={0} width={w} height={0.6} fill={COLORS.ink} />
        {/* pillows */}
        <rect x={0.3} y={0.85} width={(w - 0.9) / 2} height={1.2} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w / 2 + 0.15} y={0.85} width={(w - 0.9) / 2} height={1.2} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        {/* blanket fold */}
        <line x1={0.3} y1={h - 2} x2={w - 0.3} y2={h - 2} stroke={COLORS.ink} {...sw(1)} />
        <line x1={0.3} y1={h - 1.9} x2={w - 0.3} y2={h - 1.9} stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },
  {
    kind: 'bed-twin', label: 'Twin bed', category: 'Bedroom', w: 3.5, h: 6.3,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0} y={0} width={w} height={0.5} fill={COLORS.ink} />
        <rect x={0.3} y={0.7} width={w - 0.6} height={1.1} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        <line x1={0.3} y1={h - 1.8} x2={w - 0.3} y2={h - 1.8} stroke={COLORS.ink} {...sw(1)} />
      </g>
    ),
  },
  {
    kind: 'nightstand', label: 'Nightstand', category: 'Bedroom', w: 1.6, h: 1.6,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        <circle cx={w / 2} cy={h / 2} r={0.18} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'dresser', label: 'Dresser', category: 'Bedroom', w: 5, h: 1.7,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        <line x1={w / 3} y1={0} x2={w / 3} y2={h} stroke={COLORS.ink} {...sw(1)} />
        <line x1={(2 * w) / 3} y1={0} x2={(2 * w) / 3} y2={h} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w / 6} cy={h / 2} r={0.1} fill={COLORS.ink} />
        <circle cx={w / 2} cy={h / 2} r={0.1} fill={COLORS.ink} />
        <circle cx={(5 * w) / 6} cy={h / 2} r={0.1} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'wardrobe', label: 'Wardrobe', category: 'Bedroom', w: 6, h: 2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(1)} />
        <line x1={0} y1={h * 0.25} x2={w} y2={h * 0.25} stroke={COLORS.ink} {...sw(0.5)} strokeDasharray="0.15 0.1" />
        <circle cx={w / 2 - 0.15} cy={h * 0.55} r={0.08} fill={COLORS.ink} />
        <circle cx={w / 2 + 0.15} cy={h * 0.55} r={0.08} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },

  // ============ LIVING ============
  {
    kind: 'sofa-3', label: 'Sofa', category: 'Living', w: 7, h: 3,
    render: ({ w, h }) => (
      <g>
        {/* back */}
        <rect x={0} y={0} width={w} height={0.6} fill={COLORS.ink} />
        {/* body */}
        <rect x={0} y={0.6} width={w} height={h - 0.6} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {/* arms */}
        <rect x={0} y={0.6} width={0.6} height={h - 0.6} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w - 0.6} y={0.6} width={0.6} height={h - 0.6} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        {/* cushions */}
        {[0, 1, 2].map((i) => (
          <rect key={i} x={0.7 + i * ((w - 1.4) / 3)} y={0.85} width={(w - 1.4) / 3 - 0.1} height={h - 1.2} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'loveseat', label: 'Loveseat', category: 'Living', w: 5, h: 3,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={0.6} fill={COLORS.ink} />
        <rect x={0} y={0.6} width={w} height={h - 0.6} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0} y={0.6} width={0.6} height={h - 0.6} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w - 0.6} y={0.6} width={0.6} height={h - 0.6} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        {[0, 1].map((i) => (
          <rect key={i} x={0.7 + i * ((w - 1.4) / 2)} y={0.85} width={(w - 1.4) / 2 - 0.1} height={h - 1.2} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'armchair', label: 'Armchair', category: 'Living', w: 3, h: 3,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={0.5} fill={COLORS.ink} />
        <rect x={0} y={0.5} width={w} height={h - 0.5} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0} y={0.5} width={0.5} height={h - 0.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w - 0.5} y={0.5} width={0.5} height={h - 0.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        <rect x={0.6} y={0.75} width={w - 1.2} height={h - 1.1} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
      </g>
    ),
  },
  {
    kind: 'coffee-table', label: 'Coffee table', category: 'Living', w: 4, h: 2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper3}>
        <line x1={0} y1={0} x2={w} y2={h} stroke={COLORS.ink} {...sw(0.5)} />
        <line x1={w} y1={0} x2={0} y2={h} stroke={COLORS.ink} {...sw(0.5)} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'tv', label: 'TV', category: 'Living', w: 5, h: 1,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.ink} />
        <rect x={0.1} y={0.1} width={w - 0.2} height={h - 0.2} fill={COLORS.paper2} stroke="none" />
        <line x1={0} y1={h / 2} x2={w} y2={h / 2} stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },
  {
    kind: 'bookshelf', label: 'Bookshelf', category: 'Living', w: 4, h: 1.2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        {[1, 2, 3].map((i) => (
          <line key={i} x1={(w * i) / 4} y1={0} x2={(w * i) / 4} y2={h} stroke={COLORS.ink} {...sw(0.5)} />
        ))}
      </FurnitureBox>
    ),
  },
  {
    kind: 'rug', label: 'Rug', category: 'Living', w: 8, h: 5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} strokeDasharray="0.3 0.2" />
        <rect x={0.4} y={0.4} width={w - 0.8} height={h - 0.8} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },
  {
    kind: 'piano', label: 'Piano', category: 'Living', w: 5, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h * 0.55} fill={COLORS.ink} />
        <rect x={0.2} y={h * 0.55} width={w - 0.4} height={h * 0.45} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        {Array.from({ length: 16 }).map((_, i) => (
          <line key={i} x1={0.2 + ((w - 0.4) / 16) * (i + 1)} y1={h * 0.55} x2={0.2 + ((w - 0.4) / 16) * (i + 1)} y2={h} stroke={COLORS.ink} {...sw(0.4)} />
        ))}
      </g>
    ),
  },

  // ============ DINING ============
  {
    kind: 'dining-table-6', label: 'Dining 6', category: 'Dining', w: 6, h: 3.5,
    render: ({ w, h }) => (
      <g>
        {/* chairs */}
        {[0, 1, 2].map((i) => {
          const cx = 1 + i * 2;
          return (
            <g key={'t' + i}>
              <rect x={cx - 0.7} y={-1.3} width={1.4} height={1.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
              <rect x={cx - 0.7} y={-1.5} width={1.4} height={0.2} fill={COLORS.ink} />
            </g>
          );
        })}
        {[0, 1, 2].map((i) => {
          const cx = 1 + i * 2;
          return (
            <g key={'b' + i}>
              <rect x={cx - 0.7} y={h + 0.2} width={1.4} height={1.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
              <rect x={cx - 0.7} y={h + 1.1} width={1.4} height={0.2} fill={COLORS.ink} />
            </g>
          );
        })}
        {/* table */}
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'dining-table-4', label: 'Dining 4', category: 'Dining', w: 3.5, h: 3.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0.5} y={-1.3} width={2.5} height={1.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
        <rect x={0.5} y={-1.5} width={2.5} height={0.2} fill={COLORS.ink} />
        <rect x={0.5} y={h + 0.2} width={2.5} height={1.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
        <rect x={0.5} y={h + 1.1} width={2.5} height={0.2} fill={COLORS.ink} />
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'dining-round', label: 'Round table', category: 'Dining', w: 4, h: 4,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2 + 0.9} fill="none" stroke={COLORS.ink} {...sw(0.5)} strokeDasharray="0.15 0.1" />
        {[0, 1, 2, 3].map((i) => {
          const a = (i * Math.PI) / 2 + Math.PI / 4;
          const cx = w / 2 + Math.cos(a) * (w / 2 + 0.7);
          const cy = h / 2 + Math.sin(a) * (h / 2 + 0.7);
          return <circle key={i} cx={cx} cy={cy} r={0.55} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />;
        })}
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'chair', label: 'Chair', category: 'Dining', w: 1.6, h: 1.6,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0} y={0} width={w} height={0.25} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'bar-stool', label: 'Bar stool', category: 'Dining', w: 1.4, h: 1.4,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2} cy={h / 2} r={0.15} fill={COLORS.ink} />
      </g>
    ),
  },

  // ============ KITCHEN ============
  {
    kind: 'kitchen-counter', label: 'Counter', category: 'Kitchen', w: 6, h: 2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper3}>
        <line x1={0} y1={0.15} x2={w} y2={0.15} stroke={COLORS.ink} {...sw(0.5)} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'kitchen-island', label: 'Island', category: 'Kitchen', w: 6, h: 3,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper3}>
        <rect x={0.2} y={0.2} width={w - 0.4} height={h - 0.4} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'sink', label: 'Sink', category: 'Kitchen', w: 2.8, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.25} y={0.4} width={(w - 0.65) / 2} height={h - 0.65} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w / 2 + 0.075} y={0.4} width={(w - 0.65) / 2} height={h - 0.65} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w / 2} cy={0.2} r={0.1} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'stove', label: 'Stove', category: 'Kitchen', w: 2.5, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w * 0.3} cy={h * 0.3} r={0.3} fill={COLORS.ink} />
        <circle cx={w * 0.7} cy={h * 0.3} r={0.25} fill={COLORS.ink} />
        <circle cx={w * 0.3} cy={h * 0.65} r={0.25} fill={COLORS.ink} />
        <circle cx={w * 0.7} cy={h * 0.65} r={0.3} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'fridge', label: 'Fridge', category: 'Kitchen', w: 3, h: 2.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={0} y1={h * 0.35} x2={w} y2={h * 0.35} stroke={COLORS.ink} {...sw(1)} />
        <rect x={w - 0.5} y={0.5} width={0.15} height={0.6} fill={COLORS.ink} />
        <rect x={w - 0.5} y={h * 0.35 + 0.4} width={0.15} height={0.6} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'dishwasher', label: 'Dishwasher', category: 'Kitchen', w: 2, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.3} y={0.3} width={w - 0.6} height={0.3} fill={COLORS.ink} />
        <rect x={0.3} y={0.8} width={w - 0.6} height={h - 1.1} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },

  // ============ BATH ============
  {
    kind: 'toilet', label: 'Toilet', category: 'Bath', w: 1.6, h: 2.4,
    render: ({ w, h }) => (
      <g>
        {/* tank */}
        <rect x={0.05} y={0} width={w - 0.1} height={0.8} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {/* bowl */}
        <ellipse cx={w / 2} cy={h - 0.85} rx={(w / 2) - 0.05} ry={0.85} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <ellipse cx={w / 2} cy={h - 0.95} rx={(w / 2) - 0.25} ry={0.6} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(0.8)} />
      </g>
    ),
  },
  {
    kind: 'bath-sink', label: 'Sink', category: 'Bath', w: 2, h: 1.6,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <ellipse cx={w / 2} cy={h / 2 + 0.1} rx={w / 2 - 0.3} ry={h / 2 - 0.3} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w / 2} cy={0.25} r={0.1} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'tub', label: 'Bathtub', category: 'Bath', w: 5, h: 2.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.4} y={0.4} width={w - 1} height={h - 0.8} rx={0.4} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w - 0.3} cy={h / 2} r={0.12} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'shower', label: 'Shower', category: 'Bath', w: 3, h: 3,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={0} y1={0} x2={w} y2={h} stroke={COLORS.ink} {...sw(0.5)} strokeDasharray="0.2 0.15" />
        <line x1={w} y1={0} x2={0} y2={h} stroke={COLORS.ink} {...sw(0.5)} strokeDasharray="0.2 0.15" />
        <circle cx={w / 2} cy={h / 2} r={0.18} fill={COLORS.ink} />
      </g>
    ),
  },

  // ============ OUTDOOR ============
  {
    kind: 'tree', label: 'Tree', category: 'Outdoor', w: 4, h: 4,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2} cy={h / 2} r={w / 2 - 0.4} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
        <circle cx={w / 2} cy={h / 2} r={0.25} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'plant', label: 'Plant', category: 'Outdoor', w: 1.5, h: 1.5,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.2)} />
        <path d={`M ${w / 2},0.2 L ${w * 0.3},${h * 0.45} M ${w / 2},0.2 L ${w * 0.7},${h * 0.45} M ${w / 2},0.2 L ${w / 2},${h / 2}`} stroke={COLORS.ink} {...sw(0.8)} fill="none" />
      </g>
    ),
  },
  // ============ ELEVATIONS ============
  {
    kind: 'elev-front', label: 'Front elev.', category: 'Elevations', w: 24, h: 14,
    render: ({ w, h }) => {
      const wallTop = 3;
      const wallH = h - wallTop;
      return (
        <g>
          {/* roof gable */}
          <polygon points={`0,${wallTop} ${w / 2},0 ${w},${wallTop}`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          <line x1={0} y1={wallTop} x2={w} y2={wallTop} stroke={COLORS.ink} {...sw(1.5)} />
          {/* body */}
          <rect x={0} y={wallTop} width={w} height={wallH} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          {/* siding lines */}
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <line key={i} x1={0} y1={wallTop + (wallH * i) / 7} x2={w} y2={wallTop + (wallH * i) / 7} stroke={COLORS.ink} {...sw(0.3)} />
          ))}
          {/* door */}
          <rect x={w / 2 - 1.2} y={h - 4.5} width={2.4} height={4.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
          <circle cx={w / 2 + 0.8} cy={h - 2.3} r={0.12} fill={COLORS.ink} />
          {/* windows */}
          <g>
            <rect x={3} y={wallTop + 2} width={4} height={3.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
            <line x1={5} y1={wallTop + 2} x2={5} y2={wallTop + 5.5} stroke={COLORS.ink} {...sw(0.6)} />
            <line x1={3} y1={wallTop + 3.75} x2={7} y2={wallTop + 3.75} stroke={COLORS.ink} {...sw(0.6)} />
          </g>
          <g>
            <rect x={w - 7} y={wallTop + 2} width={4} height={3.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
            <line x1={w - 5} y1={wallTop + 2} x2={w - 5} y2={wallTop + 5.5} stroke={COLORS.ink} {...sw(0.6)} />
            <line x1={w - 7} y1={wallTop + 3.75} x2={w - 3} y2={wallTop + 3.75} stroke={COLORS.ink} {...sw(0.6)} />
          </g>
          {/* ground */}
          <line x1={-1} y1={h} x2={w + 1} y2={h} stroke={COLORS.ink} {...sw(2)} />
        </g>
      );
    },
  },
  {
    kind: 'elev-rear', label: 'Rear elev.', category: 'Elevations', w: 24, h: 14,
    render: ({ w, h }) => {
      const wallTop = 3;
      const wallH = h - wallTop;
      return (
        <g>
          <polygon points={`0,${wallTop} ${w / 2},0 ${w},${wallTop}`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          <line x1={0} y1={wallTop} x2={w} y2={wallTop} stroke={COLORS.ink} {...sw(1.5)} />
          <rect x={0} y={wallTop} width={w} height={wallH} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          {[1, 2, 3, 4, 5, 6].map((i) => (
            <line key={i} x1={0} y1={wallTop + (wallH * i) / 7} x2={w} y2={wallTop + (wallH * i) / 7} stroke={COLORS.ink} {...sw(0.3)} />
          ))}
          {/* large picture window */}
          <rect x={w / 2 - 5} y={wallTop + 2} width={10} height={5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
          <line x1={w / 2 - 1.7} y1={wallTop + 2} x2={w / 2 - 1.7} y2={wallTop + 7} stroke={COLORS.ink} {...sw(0.6)} />
          <line x1={w / 2 + 1.7} y1={wallTop + 2} x2={w / 2 + 1.7} y2={wallTop + 7} stroke={COLORS.ink} {...sw(0.6)} />
          <line x1={-1} y1={h} x2={w + 1} y2={h} stroke={COLORS.ink} {...sw(2)} />
        </g>
      );
    },
  },
  {
    kind: 'elev-side', label: 'Side elev.', category: 'Elevations', w: 30, h: 14,
    render: ({ w, h }) => {
      const wallTop = 3;
      const wallH = h - wallTop;
      return (
        <g>
          {/* shed roof slope */}
          <polygon points={`0,${wallTop + 1.5} ${w},0 ${w},${wallTop}`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          <line x1={0} y1={wallTop + 1.5} x2={w} y2={wallTop} stroke={COLORS.ink} {...sw(1.2)} />
          <rect x={0} y={wallTop + 1.5} width={w} height={wallH - 1.5} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          {[1, 2, 3, 4, 5].map((i) => (
            <line key={i} x1={0} y1={wallTop + 1.5 + ((wallH - 1.5) * i) / 6} x2={w} y2={wallTop + 1.5 + ((wallH - 1.5) * i) / 6} stroke={COLORS.ink} {...sw(0.3)} />
          ))}
          {/* windows */}
          {[3, 11, 19].map((x, i) => (
            <g key={i}>
              <rect x={x} y={wallTop + 2.5} width={4} height={3} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
              <line x1={x + 2} y1={wallTop + 2.5} x2={x + 2} y2={wallTop + 5.5} stroke={COLORS.ink} {...sw(0.6)} />
            </g>
          ))}
          {/* side door */}
          <rect x={w - 4.5} y={h - 4.5} width={2.4} height={4.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
          <line x1={-1} y1={h} x2={w + 1} y2={h} stroke={COLORS.ink} {...sw(2)} />
        </g>
      );
    },
  },
  {
    kind: 'car', label: 'Car', category: 'Outdoor', w: 6, h: 14,
    render: ({ w, h }) => (
      <g>
        <rect x={0.3} y={0.3} width={w - 0.6} height={h - 0.6} rx={0.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.6} y={1.5} width={w - 1.2} height={3} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(0.8)} />
        <rect x={0.6} y={h - 4.5} width={w - 1.2} height={3} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(0.8)} />
        <line x1={0.6} y1={h / 2} x2={w - 0.6} y2={h / 2} stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },

  // ============ LANDSCAPING ============
  {
    kind: 'tree-oak', label: 'Oak tree', category: 'Landscaping', w: 6, h: 6,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill="#9bbf7e" stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2 - 1} cy={h / 2 - 1} r={1.2} fill="#7ea862" stroke={COLORS.ink} {...sw(0.6)} />
        <circle cx={w / 2 + 1.2} cy={h / 2 + 0.5} r={1.4} fill="#7ea862" stroke={COLORS.ink} {...sw(0.6)} />
        <circle cx={w / 2 - 0.5} cy={h / 2 + 1.2} r={1} fill="#7ea862" stroke={COLORS.ink} {...sw(0.6)} />
        <circle cx={w / 2} cy={h / 2} r={0.3} fill="#5a3a1e" />
      </g>
    ),
  },
  {
    kind: 'tree-pine', label: 'Pine tree', category: 'Landscaping', w: 4, h: 4,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill="#4d7a3a" stroke={COLORS.ink} {...sw(1.5)} />
        {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
          const a = (i * Math.PI) / 4;
          return <line key={i} x1={w / 2} y1={h / 2} x2={w / 2 + Math.cos(a) * (w / 2 - 0.1)} y2={h / 2 + Math.sin(a) * (h / 2 - 0.1)} stroke={COLORS.ink} {...sw(0.5)} />;
        })}
        <circle cx={w / 2} cy={h / 2} r={0.25} fill="#3a2814" />
      </g>
    ),
  },
  {
    kind: 'tree-palm', label: 'Palm tree', category: 'Landscaping', w: 5, h: 5,
    render: ({ w, h }) => (
      <g>
        {[0, 1, 2, 3, 4, 5, 6, 7].map((i) => {
          const a = (i * Math.PI) / 4;
          const x2 = w / 2 + Math.cos(a) * (w / 2);
          const y2 = h / 2 + Math.sin(a) * (h / 2);
          return <path key={i} d={`M ${w / 2} ${h / 2} Q ${w / 2 + Math.cos(a) * 1} ${h / 2 + Math.sin(a) * 1} ${x2} ${y2}`} stroke="#6b9a4a" {...sw(1.2)} fill="none" strokeLinecap="round" />;
        })}
        <circle cx={w / 2} cy={h / 2} r={0.35} fill="#5a3a1e" stroke={COLORS.ink} {...sw(0.6)} />
      </g>
    ),
  },
  {
    kind: 'shrub', label: 'Shrub', category: 'Landscaping', w: 2.5, h: 2.5,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill="#7ea862" stroke={COLORS.ink} {...sw(1.2)} />
        <circle cx={w / 2 - 0.4} cy={h / 2 - 0.3} r={0.4} fill="#9bbf7e" />
        <circle cx={w / 2 + 0.5} cy={h / 2 + 0.2} r={0.45} fill="#9bbf7e" />
        <circle cx={w / 2 - 0.2} cy={h / 2 + 0.5} r={0.35} fill="#9bbf7e" />
      </g>
    ),
  },
  {
    kind: 'hedge-row', label: 'Hedge row', category: 'Landscaping', w: 8, h: 1.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill="#6b9a4a" stroke={COLORS.ink} {...sw(1.5)} />
        {Array.from({ length: Math.floor(w / 0.8) }).map((_, i) => (
          <circle key={i} cx={0.4 + i * 0.8} cy={h / 2} r={0.35} fill="#7ea862" stroke={COLORS.ink} {...sw(0.4)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'flower-bed', label: 'Flower bed', category: 'Landscaping', w: 5, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill="#c8a872" stroke={COLORS.ink} {...sw(1.2)} />
        {Array.from({ length: 10 }).map((_, i) => {
          const x = 0.4 + (i % 5) * (w - 0.8) / 4;
          const y = 0.4 + Math.floor(i / 5) * (h - 0.8);
          const colors = ['#d72631', '#f5d800', '#e85a9f', '#0033a0'];
          return <circle key={i} cx={x} cy={y} r={0.25} fill={colors[i % 4]} stroke={COLORS.ink} {...sw(0.3)} />;
        })}
      </g>
    ),
  },
  {
    kind: 'paver-stone', label: 'Paver', category: 'Landscaping', w: 2, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill="#d4c098" stroke={COLORS.ink} {...sw(1.2)} />
        <rect x={0.15} y={0.15} width={w - 0.3} height={h - 0.3} fill="none" stroke="#8a7050" {...sw(0.5)} />
      </g>
    ),
  },
  {
    kind: 'paver-path', label: 'Stone path', category: 'Landscaping', w: 2, h: 6,
    render: ({ w, h }) => (
      <g>
        {[0, 1, 2, 3, 4, 5].map((i) => (
          <ellipse key={i} cx={w / 2 + (i % 2 ? 0.3 : -0.3)} cy={0.6 + i} rx={0.6} ry={0.4} fill="#b9ad95" stroke={COLORS.ink} {...sw(1)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'pool', label: 'Pool', category: 'Landscaping', w: 12, h: 24,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} rx={1} fill="#5fb3e3" stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.5} y={0.5} width={w - 1} height={h - 1} rx={0.7} fill="none" stroke="#3a8ec0" {...sw(0.6)} />
        {[0, 1, 2, 3, 4].map((i) => (
          <path key={i} d={`M 1 ${4 + i * 4} Q ${w / 2} ${3 + i * 4} ${w - 1} ${4 + i * 4}`} stroke="#9ed1ef" {...sw(0.5)} fill="none" />
        ))}
      </g>
    ),
  },
  {
    kind: 'fence', label: 'Fence', category: 'Landscaping', w: 8, h: 0.5,
    render: ({ w, h }) => (
      <g>
        <line x1={0} y1={h / 2} x2={w} y2={h / 2} stroke={COLORS.ink} {...sw(1.2)} />
        {Array.from({ length: Math.floor(w / 0.5) + 1 }).map((_, i) => (
          <line key={i} x1={i * 0.5} y1={0} x2={i * 0.5} y2={h} stroke={COLORS.ink} {...sw(0.8)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'fire-pit', label: 'Fire pit', category: 'Landscaping', w: 3, h: 3,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill="#3a2814" stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2} cy={h / 2} r={w / 2 - 0.3} fill="#6f4520" stroke={COLORS.ink} {...sw(0.6)} />
        <path d={`M ${w / 2 - 0.5} ${h / 2 + 0.3} L ${w / 2} ${h / 2 - 0.5} L ${w / 2 + 0.5} ${h / 2 + 0.3} Z`} fill={COLORS.yellow} stroke={COLORS.red} {...sw(0.8)} />
      </g>
    ),
  },
  {
    kind: 'planter', label: 'Planter', category: 'Landscaping', w: 1.5, h: 1.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill="#8a6a4a" stroke={COLORS.ink} {...sw(1.2)} />
        <circle cx={w / 2} cy={h / 2} r={w / 2 - 0.3} fill="#7ea862" stroke={COLORS.ink} {...sw(0.8)} />
      </g>
    ),
  },

  // ============ OFFICE ============
  {
    kind: 'desk', label: 'Desk', category: 'Office', w: 5, h: 2.5,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        <rect x={0.15} y={0.15} width={w - 0.3} height={h - 0.3} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'desk-l', label: 'L-Desk', category: 'Office', w: 5, h: 5,
    render: ({ w, h }) => (
      <g>
        <path d={`M 0 0 L ${w} 0 L ${w} 2.5 L 2.5 2.5 L 2.5 ${h} L 0 ${h} Z`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'office-chair', label: 'Office chair', category: 'Office', w: 2, h: 2,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2 - 0.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <path d={`M 0.3 0.3 A ${w / 2} ${h / 2} 0 0 1 ${w - 0.3} 0.3`} stroke={COLORS.ink} {...sw(1.5)} fill="none" />
        <circle cx={w / 2} cy={h / 2} r={0.18} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'filing-cabinet', label: 'Filing cab.', category: 'Office', w: 1.5, h: 2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        <line x1={0} y1={h / 2} x2={w} y2={h / 2} stroke={COLORS.ink} {...sw(0.8)} />
        <circle cx={w / 2} cy={h / 4} r={0.08} fill={COLORS.ink} />
        <circle cx={w / 2} cy={3 * h / 4} r={0.08} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'conf-table', label: 'Conf. table', category: 'Office', w: 8, h: 3.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} rx={0.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'printer', label: 'Printer', category: 'Office', w: 1.8, h: 1.5,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper2}>
        <rect x={0.2} y={h - 0.4} width={w - 0.4} height={0.2} fill={COLORS.ink} />
        <rect x={0.3} y={0.3} width={w - 0.6} height={0.3} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'whiteboard', label: 'Whiteboard', category: 'Office', w: 5, h: 0.4,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },

  // ============ LAUNDRY ============
  {
    kind: 'washer', label: 'Washer', category: 'Laundry', w: 2.5, h: 2.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2} cy={h / 2 + 0.2} r={w / 2 - 0.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w / 2} cy={h / 2 + 0.2} r={w / 2 - 0.8} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
        <rect x={0.3} y={0.2} width={w - 0.6} height={0.3} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'dryer', label: 'Dryer', category: 'Laundry', w: 2.5, h: 2.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <circle cx={w / 2} cy={h / 2 + 0.2} r={w / 2 - 0.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1)} />
        <rect x={0.3} y={0.2} width={w - 0.6} height={0.3} fill={COLORS.ink} />
        <circle cx={0.5} cy={0.35} r={0.06} fill={COLORS.paper} />
        <circle cx={0.8} cy={0.35} r={0.06} fill={COLORS.paper} />
      </g>
    ),
  },
  {
    kind: 'utility-sink', label: 'Utility sink', category: 'Laundry', w: 2.2, h: 2,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.25} y={0.4} width={w - 0.5} height={h - 0.65} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
        <circle cx={w / 2} cy={0.2} r={0.1} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'iron-board', label: 'Iron board', category: 'Laundry', w: 1.3, h: 4,
    render: ({ w, h }) => (
      <g>
        <ellipse cx={w / 2} cy={h / 2} rx={w / 2 - 0.1} ry={h / 2 - 0.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
      </g>
    ),
  },
  {
    kind: 'laundry-basket', label: 'Basket', category: 'Laundry', w: 1.5, h: 1.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} rx={0.2} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.2)} />
        <line x1={0.2} y1={0.2} x2={w - 0.2} y2={h - 0.2} stroke={COLORS.ink} {...sw(0.3)} />
        <line x1={w - 0.2} y1={0.2} x2={0.2} y2={h - 0.2} stroke={COLORS.ink} {...sw(0.3)} />
      </g>
    ),
  },

  // ============ GARAGE ============
  {
    kind: 'garage-door', label: 'Garage door', category: 'Garage', w: 8, h: 0.5,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        {[1, 2, 3, 4, 5, 6, 7].map((i) => (
          <line key={i} x1={(w * i) / 8} y1={0} x2={(w * i) / 8} y2={h} stroke={COLORS.ink} {...sw(0.5)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'workbench', label: 'Workbench', category: 'Garage', w: 6, h: 2,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper3}>
        <line x1={0} y1={0.3} x2={w} y2={0.3} stroke={COLORS.ink} {...sw(0.6)} />
        <rect x={w - 1.2} y={0.5} width={1} height={0.4} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'tool-cabinet', label: 'Tool cab.', category: 'Garage', w: 3, h: 1.5,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h}>
        {[1, 2, 3].map((i) => (
          <line key={i} x1={0} y1={(h * i) / 4} x2={w} y2={(h * i) / 4} stroke={COLORS.ink} {...sw(0.5)} />
        ))}
        <circle cx={w / 2} cy={h / 8} r={0.06} fill={COLORS.ink} />
      </FurnitureBox>
    ),
  },
  {
    kind: 'bike', label: 'Bike', category: 'Garage', w: 5.5, h: 1.5,
    render: ({ w, h }) => (
      <g>
        <circle cx={1} cy={h / 2} r={0.7} fill="none" stroke={COLORS.ink} {...sw(1.2)} />
        <circle cx={w - 1} cy={h / 2} r={0.7} fill="none" stroke={COLORS.ink} {...sw(1.2)} />
        <line x1={1} y1={h / 2} x2={w / 2} y2={0.2} stroke={COLORS.ink} {...sw(1)} />
        <line x1={w - 1} y1={h / 2} x2={w / 2} y2={0.2} stroke={COLORS.ink} {...sw(1)} />
        <line x1={1} y1={h / 2} x2={w - 1} y2={h / 2} stroke={COLORS.ink} {...sw(1)} />
        <line x1={w / 2} y1={0.2} x2={w / 2 + 0.4} y2={-0.2} stroke={COLORS.ink} {...sw(1)} />
      </g>
    ),
  },
  {
    kind: 'lawnmower', label: 'Mower', category: 'Garage', w: 2.5, h: 3,
    render: ({ w, h }) => (
      <g>
        <rect x={0.2} y={0.5} width={w - 0.4} height={h - 1.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.2)} />
        <circle cx={0.5} cy={h - 0.7} r={0.4} fill={COLORS.ink} />
        <circle cx={w - 0.5} cy={h - 0.7} r={0.4} fill={COLORS.ink} />
        <rect x={w / 2 - 0.2} y={0} width={0.4} height={0.6} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'shelving', label: 'Shelving', category: 'Garage', w: 4, h: 1.5,
    render: ({ w, h }) => (
      <FurnitureBox w={w} h={h} fill={COLORS.paper2}>
        <line x1={0} y1={h / 3} x2={w} y2={h / 3} stroke={COLORS.ink} {...sw(0.6)} />
        <line x1={0} y1={2 * h / 3} x2={w} y2={2 * h / 3} stroke={COLORS.ink} {...sw(0.6)} />
      </FurnitureBox>
    ),
  },

  // ============ STAIRS ============
  {
    kind: 'stairs-straight', label: 'Straight', category: 'Stairs', w: 3.5, h: 10,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {Array.from({ length: 11 }).map((_, i) => (
          <line key={i} x1={0} y1={(h * i) / 12} x2={w} y2={(h * i) / 12} stroke={COLORS.ink} {...sw(0.8)} />
        ))}
        <path d={`M ${w / 2} 0.5 L ${w / 2 + 0.4} 1.1 L ${w / 2 - 0.4} 1.1 Z`} fill={COLORS.ink} />
        <text x={w / 2} y={h / 2} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.4} fill={COLORS.ink}>UP</text>
      </g>
    ),
  },
  {
    kind: 'stairs-l', label: 'L-Stairs', category: 'Stairs', w: 6, h: 6,
    render: ({ w, h }) => (
      <g>
        <path d={`M 0 0 L ${w} 0 L ${w} 3.5 L 3.5 3.5 L 3.5 ${h} L 0 ${h} Z`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {Array.from({ length: 5 }).map((_, i) => (
          <line key={'h' + i} x1={3.5} y1={(3.5 * (i + 1)) / 6} x2={w} y2={(3.5 * (i + 1)) / 6} stroke={COLORS.ink} {...sw(0.6)} />
        ))}
        {Array.from({ length: 5 }).map((_, i) => (
          <line key={'v' + i} x1={(3.5 * (i + 1)) / 6} y1={3.5} x2={(3.5 * (i + 1)) / 6} y2={h} stroke={COLORS.ink} {...sw(0.6)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'stairs-u', label: 'U-Stairs', category: 'Stairs', w: 6, h: 8,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(1)} />
        {Array.from({ length: 7 }).map((_, i) => (
          <line key={i} x1={0} y1={(h * (i + 1)) / 8} x2={w / 2} y2={(h * (i + 1)) / 8} stroke={COLORS.ink} {...sw(0.6)} />
        ))}
        {Array.from({ length: 7 }).map((_, i) => (
          <line key={'r' + i} x1={w / 2} y1={(h * (i + 1)) / 8} x2={w} y2={(h * (i + 1)) / 8} stroke={COLORS.ink} {...sw(0.6)} />
        ))}
      </g>
    ),
  },
  {
    kind: 'stairs-spiral', label: 'Spiral', category: 'Stairs', w: 5, h: 5,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i * Math.PI) / 6;
          return <line key={i} x1={w / 2} y1={h / 2} x2={w / 2 + Math.cos(a) * (w / 2)} y2={h / 2 + Math.sin(a) * (h / 2)} stroke={COLORS.ink} {...sw(0.6)} />;
        })}
        <circle cx={w / 2} cy={h / 2} r={0.4} fill={COLORS.ink} />
      </g>
    ),
  },

  // ============ ELEVATIONS (additional) ============
  {
    kind: 'elev-modern', label: 'Modern elev.', category: 'Elevations', w: 26, h: 12,
    render: ({ w, h }) => (
      <g>
        {/* flat roof slab */}
        <rect x={-0.5} y={0} width={w + 1} height={0.5} fill={COLORS.ink} />
        <rect x={0} y={0.5} width={w} height={h - 0.5} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
        {/* big horizontal band */}
        <rect x={2} y={2} width={w - 4} height={4} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
        {[1, 2, 3, 4].map((i) => (
          <line key={i} x1={2 + ((w - 4) * i) / 5} y1={2} x2={2 + ((w - 4) * i) / 5} y2={6} stroke={COLORS.ink} {...sw(0.5)} />
        ))}
        {/* door */}
        <rect x={w / 2 - 1} y={h - 4} width={2} height={4} fill={COLORS.ink} />
        <line x1={w / 2 + 0.7} y1={h - 2} x2={w / 2 + 0.9} y2={h - 2} stroke={COLORS.paper} {...sw(1.2)} />
        {/* side window */}
        <rect x={w - 5} y={h - 4} width={3.5} height={3} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
        <line x1={-1} y1={h} x2={w + 1} y2={h} stroke={COLORS.ink} {...sw(2)} />
      </g>
    ),
  },
  {
    kind: 'elev-cottage', label: 'Cottage', category: 'Elevations', w: 20, h: 16,
    render: ({ w, h }) => {
      const wallTop = 5;
      return (
        <g>
          <polygon points={`-1,${wallTop} ${w / 2},0 ${w + 1},${wallTop}`} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
          {/* shingle hatches */}
          {[1, 2, 3, 4].map((i) => (
            <line key={i} x1={(w / 2) * (1 - i / 5) - 0.5} y1={wallTop * (i / 5)} x2={w - (w / 2) * (1 - i / 5) + 0.5} y2={wallTop * (i / 5)} stroke={COLORS.ink} {...sw(0.4)} strokeDasharray="0.3 0.2" />
          ))}
          <rect x={0} y={wallTop} width={w} height={h - wallTop} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} />
          {/* dormer */}
          <polygon points={`${w / 2 - 2},${wallTop - 0.5} ${w / 2},${wallTop - 2.5} ${w / 2 + 2},${wallTop - 0.5}`} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
          <rect x={w / 2 - 1.5} y={wallTop - 0.5} width={3} height={1.5} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1)} />
          {/* arched door */}
          <path d={`M ${w / 2 - 1.5} ${h} L ${w / 2 - 1.5} ${h - 3.5} A 1.5 1.5 0 0 1 ${w / 2 + 1.5} ${h - 3.5} L ${w / 2 + 1.5} ${h} Z`} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
          {/* shuttered windows */}
          {[3, w - 6].map((x, i) => (
            <g key={i}>
              <rect x={x - 0.8} y={wallTop + 2} width={0.7} height={3.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(0.6)} />
              <rect x={x} y={wallTop + 2} width={3} height={3.5} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.2)} />
              <line x1={x + 1.5} y1={wallTop + 2} x2={x + 1.5} y2={wallTop + 5.5} stroke={COLORS.ink} {...sw(0.5)} />
              <line x1={x} y1={wallTop + 3.75} x2={x + 3} y2={wallTop + 3.75} stroke={COLORS.ink} {...sw(0.5)} />
              <rect x={x + 3.1} y={wallTop + 2} width={0.7} height={3.5} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(0.6)} />
            </g>
          ))}
          <line x1={-1} y1={h} x2={w + 1} y2={h} stroke={COLORS.ink} {...sw(2)} />
        </g>
      );
    },
  },
  {
    kind: 'window-double', label: 'Double win.', category: 'Elevations', w: 6, h: 4,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(1)} />
        <line x1={0} y1={h / 2} x2={w} y2={h / 2} stroke={COLORS.ink} {...sw(0.6)} />
        <rect x={0.1} y={0.1} width={w - 0.2} height={h - 0.2} fill="none" stroke={COLORS.ink} {...sw(0.4)} />
      </g>
    ),
  },
  {
    kind: 'window-bay', label: 'Bay win.', category: 'Elevations', w: 7, h: 4,
    render: ({ w, h }) => (
      <g>
        <polygon points={`0,${h} 1.5,0 ${w - 1.5},0 ${w},${h}`} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={1.5} y1={0} x2={1.5} y2={h} stroke={COLORS.ink} {...sw(0.8)} />
        <line x1={w - 1.5} y1={0} x2={w - 1.5} y2={h} stroke={COLORS.ink} {...sw(0.8)} />
        <line x1={0.75} y1={h / 2} x2={w - 0.75} y2={h / 2} stroke={COLORS.ink} {...sw(0.5)} />
      </g>
    ),
  },
  {
    kind: 'window-arch', label: 'Arched win.', category: 'Elevations', w: 4, h: 5,
    render: ({ w, h }) => (
      <g>
        <path d={`M 0 ${h} L 0 ${w / 2} A ${w / 2} ${w / 2} 0 0 1 ${w} ${w / 2} L ${w} ${h} Z`} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={w / 2} y1={0.2} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(0.6)} />
        <line x1={0} y1={h - 1.5} x2={w} y2={h - 1.5} stroke={COLORS.ink} {...sw(0.6)} />
      </g>
    ),
  },
  {
    kind: 'window-circle', label: 'Round win.', category: 'Elevations', w: 3, h: 3,
    render: ({ w, h }) => (
      <g>
        <circle cx={w / 2} cy={h / 2} r={w / 2} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={0} y1={h / 2} x2={w} y2={h / 2} stroke={COLORS.ink} {...sw(0.6)} />
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(0.6)} />
      </g>
    ),
  },
  {
    kind: 'door-panel', label: 'Panel door', category: 'Elevations', w: 3, h: 7,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.3} y={0.3} width={w - 0.6} height={2.5} fill="none" stroke={COLORS.ink} {...sw(0.6)} />
        <rect x={0.3} y={3.2} width={w - 0.6} height={3.5} fill="none" stroke={COLORS.ink} {...sw(0.6)} />
        <circle cx={w - 0.4} cy={h / 2} r={0.1} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'door-french', label: 'French door', category: 'Elevations', w: 6, h: 7,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(1)} />
        {[1, 2, 3].map((i) => (
          <line key={i} x1={0} y1={(h * i) / 4} x2={w} y2={(h * i) / 4} stroke={COLORS.ink} {...sw(0.4)} />
        ))}
        <circle cx={w / 2 - 0.3} cy={h / 2} r={0.08} fill={COLORS.ink} />
        <circle cx={w / 2 + 0.3} cy={h / 2} r={0.08} fill={COLORS.ink} />
      </g>
    ),
  },
  {
    kind: 'door-sliding', label: 'Sliding door', category: 'Elevations', w: 8, h: 7,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1.5)} />
        <line x1={w / 2} y1={0} x2={w / 2} y2={h} stroke={COLORS.ink} {...sw(1.2)} />
        <rect x={0.2} y={0.2} width={w / 2 - 0.4} height={h - 0.4} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
        <rect x={w / 2 + 0.2} y={0.2} width={w / 2 - 0.4} height={h - 0.4} fill="none" stroke={COLORS.ink} {...sw(0.5)} />
        <path d={`M ${w / 2 + 0.5} ${h - 1} L ${w - 0.5} ${h - 1}`} stroke={COLORS.ink} {...sw(0.6)} markerEnd="url(#arr)" />
      </g>
    ),
  },
  {
    kind: 'garage-elev', label: 'Garage', category: 'Elevations', w: 10, h: 8,
    render: ({ w, h }) => (
      <g>
        <rect x={0} y={0} width={w} height={h} fill={COLORS.paper3} stroke={COLORS.ink} {...sw(1.5)} />
        <rect x={0.5} y={0.5} width={w - 1} height={h - 1} fill={COLORS.paper2} stroke={COLORS.ink} {...sw(1)} />
        {[1, 2, 3, 4].map((i) => (
          <line key={i} x1={0.5} y1={0.5 + ((h - 1) * i) / 5} x2={w - 0.5} y2={0.5 + ((h - 1) * i) / 5} stroke={COLORS.ink} {...sw(0.6)} />
        ))}
        {[1, 2, 3].map((i) => (
          <line key={'v' + i} x1={0.5 + ((w - 1) * i) / 4} y1={0.5} x2={0.5 + ((w - 1) * i) / 4} y2={h - 0.5} stroke={COLORS.ink} {...sw(0.3)} />
        ))}
      </g>
    ),
  },

  // ============ ELECTRICAL ============
  { kind: 'outlet-duplex', label: 'Outlet', category: 'Electrical', w: 0.8, h: 0.8,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><line x1={0} y1={h/2} x2={w} y2={h/2} stroke={COLORS.ink} {...sw(1.2)} /></g>) },
  { kind: 'outlet-220', label: '220V', category: 'Electrical', w: 0.8, h: 0.8,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><line x1={0} y1={h/2} x2={w} y2={h/2} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.38} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.22} fill={COLORS.ink}>220</text></g>) },
  { kind: 'outlet-gfci', label: 'GFCI', category: 'Electrical', w: 0.8, h: 0.8,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2} fill={COLORS.yellow} stroke={COLORS.ink} {...sw(1.2)} /><line x1={0} y1={h/2} x2={w} y2={h/2} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.38} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.2} fontWeight="700" fill={COLORS.ink}>GFCI</text></g>) },
  { kind: 'switch-single', label: 'Switch', category: 'Electrical', w: 0.7, h: 0.7,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.4} fontWeight="700" fill={COLORS.ink}>S</text></g>) },
  { kind: 'switch-3way', label: '3-way', category: 'Electrical', w: 0.7, h: 0.7,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.32} fontWeight="700" fill={COLORS.ink}>S₃</text></g>) },
  { kind: 'switch-dimmer', label: 'Dimmer', category: 'Electrical', w: 0.7, h: 0.7,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.32} fontWeight="700" fill={COLORS.ink}>Sd</text></g>) },
  { kind: 'light-ceiling', label: 'Ceiling', category: 'Electrical', w: 1.0, h: 1.0,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><line x1={0.1} y1={0.1} x2={w-0.1} y2={h-0.1} stroke={COLORS.ink} {...sw(0.8)} /><line x1={w-0.1} y1={0.1} x2={0.1} y2={h-0.1} stroke={COLORS.ink} {...sw(0.8)} /></g>) },
  { kind: 'light-recessed', label: 'Recessed', category: 'Electrical', w: 0.8, h: 0.8,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><circle cx={w/2} cy={h/2} r={w/4} fill={COLORS.ink} /></g>) },
  { kind: 'light-pendant', label: 'Pendant', category: 'Electrical', w: 0.9, h: 0.9,
    render: ({ w, h }) => (<g><line x1={w/2} y1={0} x2={w/2} y2={h*0.4} stroke={COLORS.ink} {...sw(0.8)} /><circle cx={w/2} cy={h*0.65} r={w*0.3} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><circle cx={w/2} cy={h*0.65} r={0.08} fill={COLORS.ink} /></g>) },
  { kind: 'light-wall', label: 'Sconce', category: 'Electrical', w: 0.9, h: 0.5,
    render: ({ w, h }) => (<g><line x1={0} y1={h} x2={w} y2={h} stroke={COLORS.ink} {...sw(1.5)} /><path d={`M ${w/2 - 0.3} ${h} A 0.3 0.3 0 0 1 ${w/2 + 0.3} ${h}`} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /></g>) },
  { kind: 'smoke-detector', label: 'Smoke', category: 'Electrical', w: 0.9, h: 0.9,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.34} fontWeight="700" fill={COLORS.ink}>SD</text></g>) },
  { kind: 'co-detector', label: 'CO det.', category: 'Electrical', w: 0.9, h: 0.9,
    render: ({ w, h }) => (<g><circle cx={w/2} cy={h/2} r={w/2 - 0.05} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.34} fontWeight="700" fill={COLORS.red}>CO</text></g>) },
  { kind: 'thermostat', label: 'Thermostat', category: 'Electrical', w: 0.8, h: 0.8,
    render: ({ w, h }) => (<g><rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.36} fontWeight="700" fill={COLORS.ink}>T</text></g>) },
  { kind: 'data-jack', label: 'Data', category: 'Electrical', w: 0.7, h: 0.7,
    render: ({ w, h }) => (<g><rect x={0.05} y={0.05} width={w-0.1} height={h-0.1} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.2)} /><text x={w/2} y={h*0.62} textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize={0.34} fontWeight="700" fill={COLORS.ink}>▼</text></g>) },
  { kind: 'panel', label: 'Panel', category: 'Electrical', w: 1.5, h: 2.2,
    render: ({ w, h }) => (<g><rect x={0} y={0} width={w} height={h} fill={COLORS.paper} stroke={COLORS.ink} {...sw(1.5)} /><line x1={0} y1={0.4} x2={w} y2={0.4} stroke={COLORS.ink} {...sw(0.8)} /><text x={w/2} y={0.3} textAnchor="middle" fontFamily="Archivo Black, sans-serif" fontSize={0.22} fill={COLORS.ink}>PANEL</text>{[0,1,2,3].map((i) => (<line key={i} x1={0.2} y1={0.7 + i*0.35} x2={w-0.2} y2={0.7 + i*0.35} stroke={COLORS.ink} {...sw(0.5)} />))}</g>) },
];

const FURNITURE_MAP = Object.fromEntries(FURNITURE.map((f) => [f.kind, f]));
const CATEGORIES = [...new Set(FURNITURE.map((f) => f.category))];

// Tiny preview renderer for the sidebar — fits item in a viewBox.
function FurniturePreview({ kind }) {
  const f = FURNITURE_MAP[kind];
  if (!f) return null;
  const pad = 0.3;
  const vbw = f.w + pad * 2;
  const vbh = f.h + pad * 2 + (kind.startsWith('dining-') ? 3 : 0);
  return (
    <svg viewBox={`${-pad} ${-pad - (kind.startsWith('dining-') ? 1.5 : 0)} ${vbw} ${vbh}`} preserveAspectRatio="xMidYMid meet">
      {f.render({ w: f.w, h: f.h })}
    </svg>
  );
}

Object.assign(window, { FURNITURE, FURNITURE_MAP, CATEGORIES, FurniturePreview, COLORS });