@neolio42/pixel-office 0.1.0

package/src/components/WorkerPopup.tsx

@@ -0,0 +1,116 @@
+'use client';
+
+import { useState } from 'react';
+import { Session } from '@/lib/types';
+
+const STATE_COLORS: Record<string, string> = {
+  idle: '#444',
+  typing: '#4a7cbf',
+  reading: '#4abf5c',
+  waiting: '#bf8b4a',
+  walking: '#8b4abf',
+};
+
+interface Props {
+  session: Session;
+  anchorX: number;
+  anchorY: number;
+  viewportW: number;
+  viewportH: number;
+  onDismiss: () => void;
+  onOpenTerminal?: () => void;
+}
+
+export function WorkerPopup({ session, anchorX, anchorY, viewportW, viewportH, onDismiss, onOpenTerminal }: Props) {
+  const [focusing, setFocusing] = useState(false);
+
+  async function handleFocusTerminal() {
+    setFocusing(true);
+    try {
+      await fetch('/api/focus-terminal', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ sessionId: session.sessionId }),
+      });
+    } finally {
+      setFocusing(false);
+    }
+  }
+
+  const popupW = 250;
+  const popupH = 140;
+
+  let left = anchorX + 12;
+  let top = anchorY - popupH - 12;
+  if (left + popupW > viewportW - 8) left = anchorX - popupW - 12;
+  if (left < 8) left = 8;
+  if (top < 8) top = anchorY + 40;
+  if (top + popupH > viewportH - 8) top = viewportH - popupH - 8;
+
+  const project = session.cwd.split('/').filter(Boolean).pop() || session.cwd;
+  const stateColor = STATE_COLORS[session.state] ?? '#444';
+  const minutesAgo = Math.floor((Date.now() - session.startedAt) / 60000);
+  const duration = minutesAgo < 1 ? 'just now' : `${minutesAgo}m`;
+  const focus = session.currentFocus;
+  const lastTool = session.recentTools[session.recentTools.length - 1];
+
+  return (
+    <div
+      className="fixed z-20 pointer-events-auto"
+      style={{ left, top, width: popupW }}
+    >
+      <div
+        className="bg-[#0e0e1e] border border-[#1e1e3e] rounded-lg p-2.5"
+        style={{ boxShadow: '0 4px 20px rgba(0,0,0,0.7)' }}
+      >
+        <div className="flex items-center gap-1.5 mb-1.5">
+          <div
+            className="w-1.5 h-1.5 rounded-full flex-shrink-0"
+            style={{ backgroundColor: stateColor }}
+          />
+          <span className="text-[#99a] text-[11px] font-mono font-bold flex-1">{project}</span>
+          <span className="text-[#2a2a3a] text-[10px] font-mono">{duration}</span>
+          <button
+            onClick={onDismiss}
+            className="text-[#333] hover:text-[#666] text-[11px] font-mono leading-none px-0.5 transition-colors cursor-pointer"
+          >
+            ✕
+          </button>
+        </div>
+
+        {/* Focus — primary */}
+        {focus && (
+          <div className="text-[#aab0b8] text-[11px] font-mono mb-1 ml-3 leading-relaxed">{focus}</div>
+        )}
+
+        {/* Current tool — secondary */}
+        {lastTool && (
+          <div className="text-[#3a3a5a] text-[10px] font-mono mb-2 ml-3">{lastTool.summary}</div>
+        )}
+
+        {!focus && !lastTool && (
+          <div className="text-[#333] text-[11px] font-mono mb-2 ml-3 italic">
+            {session.state === 'idle' ? 'Idle' : 'Working'}
+          </div>
+        )}
+
+        {onOpenTerminal ? (
+          <button
+            onClick={() => { onOpenTerminal(); onDismiss(); }}
+            className="w-full py-1 bg-[#0a0a16] hover:bg-[#141428] border border-[#1a1a30] text-[#445] hover:text-[#778] text-[10px] font-mono rounded transition-colors cursor-pointer"
+          >
+            Open Terminal
+          </button>
+        ) : (
+          <button
+            onClick={handleFocusTerminal}
+            disabled={focusing}
+            className="w-full py-1 bg-[#0a0a16] hover:bg-[#141428] border border-[#1a1a30] text-[#445] hover:text-[#778] text-[10px] font-mono rounded transition-colors cursor-pointer disabled:opacity-50"
+          >
+            {focusing ? 'Focusing…' : 'Focus Terminal'}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/game/asset-loader.ts

@@ -0,0 +1,172 @@
+// Asset loader — loads all PNG sprite sheets and pre-colorizes floor/wall tiles
+
+export interface AssetBundle {
+  characters: HTMLImageElement[];   // char_0.png … char_5.png
+  floors: HTMLImageElement[];       // floor_0.png … floor_8.png
+  wallSheet: HTMLImageElement;      // wall_0.png
+  furniture: Map<string, HTMLImageElement>; // keyed by "FOLDER/FILENAME" e.g. "DESK/DESK_FRONT"
+  // Pre-colorized offscreen canvases
+  colorizedFloors: Map<string, HTMLCanvasElement>; // key = floorIndex:h:s:b:c
+  colorizedWall: HTMLCanvasElement;
+}
+
+// HSBC colorize params (Photoshop-style Colorize)
+export interface HsbcParams {
+  h: number;  // hue 0-360
+  s: number;  // saturation 0-100
+  b: number;  // brightness -100..100
+  c: number;  // contrast -100..100
+}
+
+// Floor color presets referenced by office-layout
+export const FLOOR_COLORS = {
+  wood:    { h: 25,  s: 48, b: -43, c: -88 } as HsbcParams,
+  blueCarpet: { h: 209, s: 39, b: -25, c: -80 } as HsbcParams,
+  neutralTile: { h: 209, s: 0,  b: -16, c: -8  } as HsbcParams,
+};
+
+export const WALL_COLORS: HsbcParams = { h: 214, s: 30, b: -100, c: -55 };
+
+// ── HSL helpers ────────────────────────────────────────────────────────────
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  s /= 100; l /= 100;
+  const k = (n: number) => (n + h / 30) % 12;
+  const a = s * Math.min(l, 1 - l);
+  const f = (n: number) => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
+  return [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
+}
+
+// Apply Photoshop-style colorize to a grayscale image and return an offscreen canvas
+export function colorizeImage(img: HTMLImageElement, params: HsbcParams): HTMLCanvasElement {
+  const canvas = document.createElement('canvas');
+  canvas.width = img.naturalWidth;
+  canvas.height = img.naturalHeight;
+  const ctx = canvas.getContext('2d')!;
+  ctx.drawImage(img, 0, 0);
+
+  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+  const data = imageData.data;
+  const { h, s, b, c } = params;
+
+  for (let i = 0; i < data.length; i += 4) {
+    const a = data[i + 3];
+    if (a === 0) continue;
+
+    // 1. Luminance from grayscale source
+    const r = data[i], g = data[i + 1], bl2 = data[i + 2];
+    let L = (0.299 * r + 0.587 * g + 0.114 * bl2) / 255;
+
+    // 2. Apply contrast
+    L = 0.5 + (L - 0.5) * (100 + c) / 100;
+
+    // 3. Apply brightness
+    L = L + b / 200;
+
+    // 4. Clamp
+    L = Math.max(0, Math.min(1, L));
+
+    // 5. HSL → RGB
+    const [nr, ng, nb] = hslToRgb(h, s, L * 100);
+    data[i]     = nr;
+    data[i + 1] = ng;
+    data[i + 2] = nb;
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  return canvas;
+}
+
+// ── Image loading ──────────────────────────────────────────────────────────
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(`Failed to load: ${src}`));
+    img.src = src;
+  });
+}
+
+// Furniture items we actually use in the office layout
+const FURNITURE_ASSETS: Array<{ key: string; path: string }> = [
+  // Desks & PCs
+  { key: 'DESK/DESK_FRONT',           path: '/assets/furniture/DESK/DESK_FRONT.png' },
+  { key: 'PC/PC_FRONT_ON_1',          path: '/assets/furniture/PC/PC_FRONT_ON_1.png' },
+  { key: 'PC/PC_FRONT_ON_2',          path: '/assets/furniture/PC/PC_FRONT_ON_2.png' },
+  { key: 'PC/PC_FRONT_ON_3',          path: '/assets/furniture/PC/PC_FRONT_ON_3.png' },
+  { key: 'PC/PC_FRONT_OFF',           path: '/assets/furniture/PC/PC_FRONT_OFF.png' },
+  // Bookshelves
+  { key: 'BOOKSHELF/BOOKSHELF',       path: '/assets/furniture/BOOKSHELF/BOOKSHELF.png' },
+  { key: 'DOUBLE_BOOKSHELF/DOUBLE_BOOKSHELF', path: '/assets/furniture/DOUBLE_BOOKSHELF/DOUBLE_BOOKSHELF.png' },
+  // Plants & greenery
+  { key: 'PLANT/PLANT',               path: '/assets/furniture/PLANT/PLANT.png' },
+  { key: 'PLANT_2/PLANT_2',           path: '/assets/furniture/PLANT_2/PLANT_2.png' },
+  { key: 'LARGE_PLANT/LARGE_PLANT',   path: '/assets/furniture/LARGE_PLANT/LARGE_PLANT.png' },
+  { key: 'CACTUS/CACTUS',             path: '/assets/furniture/CACTUS/CACTUS.png' },
+  { key: 'HANGING_PLANT/HANGING_PLANT', path: '/assets/furniture/HANGING_PLANT/HANGING_PLANT.png' },
+  { key: 'POT/POT',                   path: '/assets/furniture/POT/POT.png' },
+  // Wall art
+  { key: 'SMALL_PAINTING/SMALL_PAINTING',     path: '/assets/furniture/SMALL_PAINTING/SMALL_PAINTING.png' },
+  { key: 'SMALL_PAINTING_2/SMALL_PAINTING_2', path: '/assets/furniture/SMALL_PAINTING_2/SMALL_PAINTING_2.png' },
+  { key: 'LARGE_PAINTING/LARGE_PAINTING',     path: '/assets/furniture/LARGE_PAINTING/LARGE_PAINTING.png' },
+  { key: 'CLOCK/CLOCK',               path: '/assets/furniture/CLOCK/CLOCK.png' },
+  // Seating & tables
+  { key: 'WHITEBOARD/WHITEBOARD',     path: '/assets/furniture/WHITEBOARD/WHITEBOARD.png' },
+  { key: 'SOFA/SOFA_BACK',            path: '/assets/furniture/SOFA/SOFA_BACK.png' },
+  { key: 'COFFEE_TABLE/COFFEE_TABLE', path: '/assets/furniture/COFFEE_TABLE/COFFEE_TABLE.png' },
+  { key: 'COFFEE/COFFEE',             path: '/assets/furniture/COFFEE/COFFEE.png' },
+  { key: 'WOODEN_CHAIR/WOODEN_CHAIR_BACK', path: '/assets/furniture/WOODEN_CHAIR/WOODEN_CHAIR_BACK.png' },
+  { key: 'CUSHIONED_CHAIR/CUSHIONED_CHAIR_BACK', path: '/assets/furniture/CUSHIONED_CHAIR/CUSHIONED_CHAIR_BACK.png' },
+  // Misc
+  { key: 'BIN/BIN',                   path: '/assets/furniture/BIN/BIN.png' },
+];
+
+export async function loadAssets(): Promise<AssetBundle> {
+  // Load character sheets
+  const characterPromises = Array.from({ length: 6 }, (_, i) =>
+    loadImage(`/assets/characters/char_${i}.png`)
+  );
+
+  // Load floor tiles
+  const floorPromises = Array.from({ length: 9 }, (_, i) =>
+    loadImage(`/assets/floors/floor_${i}.png`)
+  );
+
+  // Load wall sheet
+  const wallPromise = loadImage('/assets/walls/wall_0.png');
+
+  // Load furniture
+  const furniturePromises = FURNITURE_ASSETS.map(({ key, path }) =>
+    loadImage(path).then(img => ({ key, img }))
+  );
+
+  const [characters, floors, wallSheet, furnitureResults] = await Promise.all([
+    Promise.all(characterPromises),
+    Promise.all(floorPromises),
+    wallPromise,
+    Promise.all(furniturePromises),
+  ]);
+
+  const furniture = new Map<string, HTMLImageElement>();
+  for (const { key, img } of furnitureResults) {
+    furniture.set(key, img);
+  }
+
+  // Pre-colorize floor tiles for each variant we use
+  const colorizedFloors = new Map<string, HTMLCanvasElement>();
+  const floorVariants: Array<{ floorIndex: number; params: HsbcParams }> = [
+    { floorIndex: 7, params: FLOOR_COLORS.wood },
+    { floorIndex: 1, params: FLOOR_COLORS.blueCarpet },
+    { floorIndex: 0, params: FLOOR_COLORS.neutralTile },
+  ];
+  for (const { floorIndex, params } of floorVariants) {
+    const key = `${floorIndex}:${params.h}:${params.s}:${params.b}:${params.c}`;
+    colorizedFloors.set(key, colorizeImage(floors[floorIndex], params));
+  }
+
+  // Pre-colorize wall sheet
+  const colorizedWall = colorizeImage(wallSheet, WALL_COLORS);
+
+  return { characters, floors, wallSheet, furniture, colorizedFloors, colorizedWall };
+}

package/src/game/office-layout.ts

@@ -0,0 +1,287 @@
+// Multi-room pixel office layout — sprite-based
+// Grid: 20 wide × 15 tall
+//
+// Rooms:
+//   Main work area: cols 0-12, rows 0-14  (warm wood floor — floor_7)
+//   Break room:     cols 13-19, rows 0-6  (neutral tile — floor_0)
+//   Meeting room:   cols 13-19, rows 7-14 (blue carpet — floor_1)
+
+import { HsbcParams, FLOOR_COLORS } from './asset-loader';
+
+export const TILE_SIZE = 16;
+export const SCALE = 4;           // 4× zoom for crisp pixel art
+export const GRID_W = 20;
+export const GRID_H = 15;
+export const CANVAS_W = GRID_W * TILE_SIZE * SCALE; // 1280
+export const CANVAS_H = GRID_H * TILE_SIZE * SCALE; // 960
+
+// ── Tile types ──────────────────────────────────────────────────────────────
+
+export type FloorVariant = 'wood' | 'tile' | 'carpet';
+
+export type FurnitureType =
+  | 'desk'
+  | 'pc'
+  | 'bookshelf'
+  | 'double_bookshelf'
+  | 'plant'
+  | 'plant_2'
+  | 'large_plant'
+  | 'whiteboard'
+  | 'sofa'
+  | 'coffee_table'
+  | 'coffee'
+  | 'wooden_chair'
+  | 'cushioned_chair'
+  | 'cactus'
+  | 'clock'
+  | 'hanging_plant'
+  | 'painting_small'
+  | 'painting_small_2'
+  | 'painting_large'
+  | 'bin'
+  | 'pot';
+
+export interface GridCell {
+  // Floor info
+  floorIndex: number;      // which floor_*.png to use
+  floorParams: HsbcParams; // colorize params
+  // Wall info
+  isWall: boolean;
+  isDoor: boolean;
+  wallMask: number;        // 4-bit N=1,E=2,S=4,W=8 for auto-tiling
+  // Furniture placed at this cell (drawn separately, not per-cell)
+  furniture?: FurnitureType;
+}
+
+export interface DeskPosition {
+  deskX: number;
+  deskY: number;
+  chairX: number;
+  chairY: number;
+  entryX: number;
+  entryY: number;
+}
+
+// 5 desks in the main work area
+export const DESK_POSITIONS: DeskPosition[] = [
+  { deskX: 1, deskY: 3,  chairX: 1, chairY: 4,  entryX: 6, entryY: 13 },
+  { deskX: 4, deskY: 3,  chairX: 4, chairY: 4,  entryX: 6, entryY: 13 },
+  { deskX: 7, deskY: 3,  chairX: 7, chairY: 4,  entryX: 6, entryY: 13 },
+  { deskX: 2, deskY: 8,  chairX: 2, chairY: 9,  entryX: 6, entryY: 13 },
+  { deskX: 7, deskY: 8,  chairX: 7, chairY: 9,  entryX: 6, entryY: 13 },
+];
+
+export const DOOR_X = 6;
+export const DOOR_Y = 14;
+
+// ── Legacy TileType — kept for renderers that may check it ─────────────────
+export type TileType =
+  | 'floor_wood' | 'floor_tile' | 'floor_carpet'
+  | 'wall' | 'wall_door'
+  | 'desk' | 'desk_right' | 'chair' | 'bookshelf' | 'plant'
+  | 'vending_machine' | 'painting' | 'break_table' | 'couch'
+  | 'whiteboard' | 'window';
+
+// ── Furniture placement list ────────────────────────────────────────────────
+// Each entry has tile coords + which asset to draw + optional pixel offsets
+
+export interface FurniturePlacement {
+  tx: number;   // tile column
+  ty: number;   // tile row (top-left anchor)
+  type: FurnitureType;
+  // asset key into AssetBundle.furniture
+  assetKey: string;
+  // native PNG size
+  pngW: number;
+  pngH: number;
+  // optional horizontal flip
+  flipX?: boolean;
+  // pixel offset within the tile anchor (in source pixels, will be scaled)
+  offsetX?: number;
+  offsetY?: number;
+}
+
+// ── Floor variant helper ────────────────────────────────────────────────────
+
+function floorFor(tx: number, ty: number): { floorIndex: number; floorParams: HsbcParams } {
+  // Side rooms (cols 14-18 are the floor area inside walls at 13 and 19)
+  if (tx >= 14 && tx <= 18) {
+    if (ty >= 1 && ty <= 6)  return { floorIndex: 1, floorParams: FLOOR_COLORS.blueCarpet };
+    if (ty >= 8 && ty <= 14) return { floorIndex: 0, floorParams: FLOOR_COLORS.neutralTile };
+  }
+  // Default: wood
+  return { floorIndex: 7, floorParams: FLOOR_COLORS.wood };
+}
+
+// ── buildGrid ───────────────────────────────────────────────────────────────
+
+export function buildGrid(): GridCell[][] {
+  // Initialize all as wood floor
+  const grid: GridCell[][] = Array.from({ length: GRID_H }, (_, ty) =>
+    Array.from({ length: GRID_W }, (_, tx) => ({
+      ...floorFor(tx, ty),
+      isWall: false,
+      isDoor: false,
+      wallMask: 0,
+    }))
+  );
+
+  const markWall = (x: number, y: number, isDoor = false) => {
+    if (y < 0 || y >= GRID_H || x < 0 || x >= GRID_W) return;
+    grid[y][x].isWall = !isDoor;
+    grid[y][x].isDoor = isDoor;
+    // Wall cells use wood floor underneath for doors
+    const { floorIndex, floorParams } = isDoor ? floorFor(x, y) : { floorIndex: 7, floorParams: FLOOR_COLORS.wood };
+    grid[y][x].floorIndex = floorIndex;
+    grid[y][x].floorParams = floorParams;
+  };
+
+  // Top wall (row 0)
+  for (let x = 0; x < GRID_W; x++) markWall(x, 0);
+
+  // Left wall (col 0)
+  for (let y = 0; y < GRID_H; y++) markWall(0, y);
+
+  // Right wall (col 19)
+  for (let y = 0; y < GRID_H; y++) markWall(19, y);
+
+  // Bottom wall (row 14) — main room bottom with door gap
+  for (let x = 0; x < 13; x++) {
+    if (x === DOOR_X || x === DOOR_X + 1) {
+      markWall(x, 14, true);
+    } else {
+      markWall(x, 14);
+    }
+  }
+
+  // Internal vertical wall (col 13) with doorways
+  for (let y = 0; y < GRID_H; y++) {
+    if (y === 5 || y === 10) {
+      markWall(13, y, true);
+    } else {
+      markWall(13, y);
+    }
+  }
+
+  // Bottom wall for right-side rooms (row 14, cols 14-18)
+  for (let x = 14; x <= 18; x++) markWall(x, 14);
+
+  // Internal horizontal wall (row 7, cols 13-19)
+  for (let x = 13; x < GRID_W; x++) markWall(x, 7);
+
+  // Compute wall bitmasks for auto-tiling
+  const isWallOrOob = (x: number, y: number): boolean => {
+    if (x < 0 || x >= GRID_W || y < 0 || y >= GRID_H) return true;
+    return grid[y][x].isWall;
+  };
+  for (let ty = 0; ty < GRID_H; ty++) {
+    for (let tx = 0; tx < GRID_W; tx++) {
+      if (!grid[ty][tx].isWall) continue;
+      let mask = 0;
+      if (isWallOrOob(tx, ty - 1)) mask |= 1; // N
+      if (isWallOrOob(tx + 1, ty)) mask |= 2; // E
+      if (isWallOrOob(tx, ty + 1)) mask |= 4; // S
+      if (isWallOrOob(tx - 1, ty)) mask |= 8; // W
+      grid[ty][tx].wallMask = mask;
+    }
+  }
+
+  return grid;
+}
+
+// ── Furniture placement list ────────────────────────────────────────────────
+// Built once and used by renderer. Positions mirror old buildGrid() furniture.
+
+export function buildFurniturePlacements(): FurniturePlacement[] {
+  const items: FurniturePlacement[] = [];
+
+  // ── Desks (DESK_FRONT is 48×32 = 3 tiles wide × 2 tiles tall) ────────────
+  for (const d of DESK_POSITIONS) {
+    items.push({
+      tx: d.deskX, ty: d.deskY,
+      type: 'desk', assetKey: 'DESK/DESK_FRONT',
+      pngW: 48, pngH: 32,
+    });
+    items.push({
+      tx: d.deskX + 1, ty: d.deskY - 1,
+      type: 'pc', assetKey: 'PC/PC_FRONT_ON_1',
+      pngW: 16, pngH: 32,
+      offsetY: 12,
+    });
+  }
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // ── MAIN WORK AREA (cols 1-12, rows 1-13) ──────────────────────────────
+  // ══════════════════════════════════════════════════════════════════════════
+  //
+  // Back wall layout (row 1, left to right):
+  //   [1-2] double bookshelf  [4] painting  [6] plant  [8] painting
+  //   [9-10] double bookshelf  [11-12] large painting
+
+  // Back wall: bookshelves sit against wall, paintings hang on wall
+  items.push({ tx: 1, ty: 1, type: 'double_bookshelf', assetKey: 'DOUBLE_BOOKSHELF/DOUBLE_BOOKSHELF', pngW: 32, pngH: 32, offsetY: -16 });
+  items.push({ tx: 9, ty: 1, type: 'double_bookshelf', assetKey: 'DOUBLE_BOOKSHELF/DOUBLE_BOOKSHELF', pngW: 32, pngH: 32, offsetY: -16 });
+  // Paintings hung HIGH on wall (offsetY -22 places them on the dark wall face, above bookshelves)
+  items.push({ tx: 4, ty: 1, type: 'painting_small', assetKey: 'SMALL_PAINTING/SMALL_PAINTING', pngW: 16, pngH: 32, offsetY: -22 });
+  items.push({ tx: 8, ty: 1, type: 'painting_small_2', assetKey: 'SMALL_PAINTING_2/SMALL_PAINTING_2', pngW: 16, pngH: 32, offsetY: -22 });
+  // Large painting on right end of back wall
+  items.push({ tx: 11, ty: 1, type: 'painting_large', assetKey: 'LARGE_PAINTING/LARGE_PAINTING', pngW: 32, pngH: 32, offsetY: -22 });
+
+  // Plants on FLOOR (row 2+), not touching walls
+  // Plant between paintings on back wall — sits on floor at row 2
+  items.push({ tx: 6, ty: 2, type: 'plant', assetKey: 'PLANT/PLANT', pngW: 16, pngH: 32 });
+
+  // Plants in the gap between desk rows (rows 5-7)
+  items.push({ tx: 2, ty: 6, type: 'large_plant', assetKey: 'LARGE_PLANT/LARGE_PLANT', pngW: 32, pngH: 48, offsetY: -16 });
+  items.push({ tx: 12, ty: 6, type: 'hanging_plant', assetKey: 'HANGING_PLANT/HANGING_PLANT', pngW: 16, pngH: 32 });
+  items.push({ tx: 6, ty: 6, type: 'cactus', assetKey: 'CACTUS/CACTUS', pngW: 16, pngH: 32 });
+
+  // Bottom area plants — row 11 max (row 12+ overlaps bottom wall sprites)
+  items.push({ tx: 2, ty: 11, type: 'plant_2', assetKey: 'PLANT_2/PLANT_2', pngW: 16, pngH: 32 });
+  items.push({ tx: 10, ty: 11, type: 'plant', assetKey: 'PLANT/PLANT', pngW: 16, pngH: 32 });
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // ── BREAK ROOM (cols 14-18, rows 1-6, blue carpet) ─────────────────────
+  // ══════════════════════════════════════════════════════════════════════════
+  //
+  // Layout:
+  //   Row 1: [painting] [clock]          (wall-mounted)
+  //   Row 2: [sofa]                      (centered)
+  //   Row 3-4: [coffee table + mug]      (centered)
+  //   Row 5: [plant]                     (corner accent)
+
+  items.push({ tx: 14, ty: 1, type: 'painting_small', assetKey: 'SMALL_PAINTING/SMALL_PAINTING', pngW: 16, pngH: 32, offsetY: -22 });
+  items.push({ tx: 16, ty: 1, type: 'clock', assetKey: 'CLOCK/CLOCK', pngW: 16, pngH: 32, offsetY: -22 });
+  items.push({ tx: 15, ty: 2, type: 'sofa', assetKey: 'SOFA/SOFA_BACK', pngW: 32, pngH: 16 });
+  items.push({ tx: 15, ty: 3, type: 'coffee_table', assetKey: 'COFFEE_TABLE/COFFEE_TABLE', pngW: 32, pngH: 32 });
+  items.push({ tx: 16, ty: 3, type: 'coffee', assetKey: 'COFFEE/COFFEE', pngW: 16, pngH: 16, offsetY: 4 });
+  // Plants — row 4 max (row 5+ overlaps the row 7 internal wall)
+  items.push({ tx: 17, ty: 4, type: 'plant', assetKey: 'PLANT/PLANT', pngW: 16, pngH: 32 });
+  items.push({ tx: 14, ty: 4, type: 'cactus', assetKey: 'CACTUS/CACTUS', pngW: 16, pngH: 32 });
+
+  // ══════════════════════════════════════════════════════════════════════════
+  // ── MEETING ROOM (cols 14-18, rows 8-13, neutral tile) ─────────────────
+  // ══════════════════════════════════════════════════════════════════════════
+  //
+  // Layout:
+  //   Row 8: [whiteboard]                (centered on wall)
+  //   Row 9: (gap)
+  //   Row 10: [chairs] [table] [chairs]  (meeting setup)
+  //   Row 11: [chairs below]
+  //   Row 12-13: [plant corner] [bin]
+
+  items.push({ tx: 15, ty: 8, type: 'whiteboard', assetKey: 'WHITEBOARD/WHITEBOARD', pngW: 32, pngH: 32 });
+  // Chairs above table
+  items.push({ tx: 15, ty: 10, type: 'cushioned_chair', assetKey: 'CUSHIONED_CHAIR/CUSHIONED_CHAIR_BACK', pngW: 16, pngH: 16, offsetY: -12 });
+  items.push({ tx: 16, ty: 10, type: 'cushioned_chair', assetKey: 'CUSHIONED_CHAIR/CUSHIONED_CHAIR_BACK', pngW: 16, pngH: 16, offsetY: -12 });
+  // Table
+  items.push({ tx: 15, ty: 10, type: 'coffee_table', assetKey: 'COFFEE_TABLE/COFFEE_TABLE', pngW: 32, pngH: 32 });
+  // Chairs below table
+  items.push({ tx: 15, ty: 11, type: 'wooden_chair', assetKey: 'WOODEN_CHAIR/WOODEN_CHAIR_BACK', pngW: 16, pngH: 32 });
+  items.push({ tx: 16, ty: 11, type: 'wooden_chair', assetKey: 'WOODEN_CHAIR/WOODEN_CHAIR_BACK', pngW: 16, pngH: 32 });
+  // Corner plant — row 11 max (row 12+ overlaps bottom wall), col 17 (not touching right wall)
+  items.push({ tx: 17, ty: 11, type: 'plant_2', assetKey: 'PLANT_2/PLANT_2', pngW: 16, pngH: 32 });
+
+  return items;
+}