third commit

src/components/Palette.tsx

@@ -1,13 +1,16 @@
 import { useState, type PointerEvent, type ReactNode } from "react";
-import { FURNITURE_TYPES, TYPE_LABEL, type FurnitureType } from "../types";
+import type { FurnitureType, FurnitureTypeConfig } from "../types";
+import { ShapeIcon } from "./Icons";
 
 const CLICK_THRESHOLD_PX = 5;
 
 interface Props {
+  types: FurnitureTypeConfig[]; // in palette order
   remaining: Record<FurnitureType, number>;
   onStartDrag: (type: FurnitureType, clientX: number, clientY: number) => void;
   onOpenMenu: (type: FurnitureType) => void;
-  panel: ReactNode; // when set, replaces the tiles (type settings menu)
+  onNewCustom: () => void;
+  panel: ReactNode; // when set, replaces the tiles (type menu, item panel, custom form)
 }
 
 const tile: React.CSSProperties = {
@@ -29,35 +32,19 @@ const tile: React.CSSProperties = {
   color: "#444",
 };
 
-export function ChairIcon({ size = 36 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 36 36">
-      <rect x="4" y="4" width="28" height="28" rx="3" fill="#8fb4d9" stroke="#3b3b3b" strokeWidth="1.5" />
-      <rect x="4" y="4" width="28" height="8" rx="3" fill="#4a6f96" />
-    </svg>
-  );
-}
-
-export function TableIcon({ size = 36 }: { size?: number }) {
-  return (
-    <svg width={size} height={size} viewBox="0 0 36 36">
-      <rect x="2" y="9" width="32" height="18" rx="3" fill="#d9b382" stroke="#3b3b3b" strokeWidth="1.5" />
-    </svg>
-  );
-}
-
 const MIN_W = 152;
 const MAX_W = 600;
 
 interface TileProps {
-  type: FurnitureType;
+  config: FurnitureTypeConfig;
   remaining: number;
   onStartDrag: Props["onStartDrag"];
   onOpenMenu: Props["onOpenMenu"];
 }
 
 /** Press + move > threshold = drag a new item out. Press + release without moving = open menu. */
-function Tile({ type, remaining, onStartDrag, onOpenMenu }: TileProps) {
+function Tile({ config, remaining, onStartDrag, onOpenMenu }: TileProps) {
+  const type = config.id;
   const empty = remaining <= 0;
 
   const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
@@ -90,7 +77,7 @@ function Tile({ type, remaining, onStartDrag, onOpenMenu }: TileProps) {
   return (
     <div
       role="button"
-      aria-label={`${type} (${remaining} remaining)`}
+      aria-label={`${config.name} (${remaining} remaining)`}
       style={{ ...tile, position: "relative", opacity: empty ? 0.45 : 1, filter: empty ? "grayscale(1)" : undefined, cursor: empty ? "pointer" : "grab" }}
       onPointerDown={onPointerDown}
     >
@@ -112,31 +99,27 @@ function Tile({ type, remaining, onStartDrag, onOpenMenu }: TileProps) {
       >
         {remaining}
       </span>
-      {(() => {
-        const Icon = TYPE_ICON[type];
-        return <Icon />;
-      })()}
-      {TYPE_LABEL[type]}
+      <ShapeIcon shape={config.shape} />
+      {config.name}
     </div>
   );
 }
 
-export function ScreenIcon({ size = 36 }: { size?: number }) {
+function NewCustomTile({ onClick }: { onClick: () => void }) {
   return (
-    <svg width={size} height={size} viewBox="0 0 36 36">
-      <rect x="2" y="14" width="32" height="8" rx="2" fill="#2d3748" stroke="#3b3b3b" strokeWidth="1.5" />
-      <rect x="4" y="16" width="28" height="4" fill="#63b3ed" />
-    </svg>
+    <div
+      role="button"
+      aria-label="New custom furniture"
+      onClick={onClick}
+      style={{ ...tile, border: "1.5px dashed #9a9a9a", background: "transparent", cursor: "pointer" }}
+    >
+      <span style={{ font: "300 30px/30px system-ui, sans-serif", color: "#666" }}>+</span>
+      Custom
+    </div>
   );
 }
 
-export const TYPE_ICON: Record<FurnitureType, (p: { size?: number }) => React.JSX.Element> = {
-  chair: ChairIcon,
-  table: TableIcon,
-  screen: ScreenIcon,
-};
-
-export function Palette({ remaining, onStartDrag, onOpenMenu, panel }: Props) {
+export function Palette({ types, remaining, onStartDrag, onOpenMenu, onNewCustom, panel }: Props) {
   const [width, setWidth] = useState(264);
 
   const startResize = (e: PointerEvent) => {
@@ -158,20 +141,32 @@ export function Palette({ remaining, onStartDrag, onOpenMenu, panel }: Props) {
       style={{
         position: "relative",
         width,
-        boxSizing: "border-box",
         flexShrink: 0,
-        padding: 16,
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(84px, 1fr))",
-        alignContent: "start",
-        gap: 12,
         borderRight: "1px solid #d4d4d4",
         background: "#ececec",
       }}
     >
-      {panel ?? FURNITURE_TYPES.map((type) => (
-        <Tile key={type} type={type} remaining={remaining[type]} onStartDrag={onStartDrag} onOpenMenu={onOpenMenu} />
-      ))}
+      <div
+        style={{
+          height: "100%",
+          boxSizing: "border-box",
+          overflowY: "auto",
+          padding: 16,
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(84px, 1fr))",
+          alignContent: "start",
+          gap: 12,
+        }}
+      >
+        {panel ?? (
+          <>
+            {types.map((cfg) => (
+              <Tile key={cfg.id} config={cfg} remaining={remaining[cfg.id]} onStartDrag={onStartDrag} onOpenMenu={onOpenMenu} />
+            ))}
+            <NewCustomTile onClick={onNewCustom} />
+          </>
+        )}
+      </div>
       <div
         onPointerDown={startResize}
         style={{ position: "absolute", top: 0, right: -3, width: 6, height: "100%", cursor: "col-resize", touchAction: "none" }}