@pioneer_zmc/dsh-workbench 0.2.1

package/web/assets/room-scene.js

@@ -0,0 +1,386 @@
+// 独立业务房间的三维场景（P1b-2 建骨架，P1c-2c-2 接行走）：底座、灯光、镜头与
+// 渲染参数自 E2b 实验（2026-09-27-桌面承载与物品跟随）提取为产品模块，原实验不改。
+// 本模块不重复摆放校验——只消费页面交来的 template 与 validatePlacement 的 assembly：
+//   · 按 template.styleId 精确分派两套底座（ceramic／fairy），未知风格明确报错；
+//   · 底座显式传 doorOpen:false（关门开局）；家具由页面先经 prepareRoomFurniture 异步
+//     备好成批次（E4b-2），本模块同步整组挂入，调用瞬间接管批次的释放所有权；
+//   · 家具平铺到场景根组：装配结果已含世界变换（含承载面高度 Y），不再叠加父桌变换。
+// 行走（P1c-2c-2）：人物站位与门开合的唯一来源是 rooms/walk-session.js 的会话，
+// 帧推进由 rooms/walk-frame.js 承担，输入复用原版 building-walk.js 的 createWalkInput。
+// 两台相机分开——总览机位（OrbitControls）与行走视线互不覆盖；渲染、拾取、底座
+// update（含反射）都用当前活动相机。白天为默认；昼夜经 setPeriod 接底座与灯光。
+// 阅读暂停（E3b-1）：rooms/reading-gate.js 统一闸住输入、帧推进与总览控制器，
+// setReading(true) 期间切模式/开门为无操作，渲染循环只经 gate.advance 推进相机。
+import * as THREE from 'three'
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js'
+import { createWalkInput } from './building-walk.js'
+import { createCeramicRoom } from './rooms/ceramic-room.js'
+import { createFairyRoom } from './rooms/fairy-room.js'
+import { createRoomLighting } from './rooms/room-lighting.js'
+import { createRoomWalkSession } from './rooms/walk-session.js'
+import { createWalkFrame, lookYawToward, WALK_FOV } from './rooms/walk-frame.js'
+import { createRoomReadingGate } from './rooms/reading-gate.js'
+import { prepareRoomFurniture, findFurnitureInstance } from './rooms/furniture-assembly.js'
+
+// 页面经本模块动态入口进入 Three.js（E4b-2）：家具批次的准备与向上查找一并无须单独加载。
+export { prepareRoomFurniture, findFurnitureInstance }
+
+/** styleId → 底座工厂：两套已验收底座，其余风格不存在。 */
+const ROOM_FACTORIES = { ceramic: createCeramicRoom, fairy: createFairyRoom }
+
+/** 室外可见地面：低反光、顶面 Y=0、四块水平面拼出带室内空洞的连续外地面
+ * （北／南条贯穿外宽，东／西条填中间两侧，不重叠、不盖室内地面与门槛）。
+ * 只是视觉延伸——可走范围始终由会话里的隐形边界限制，这里不画任何边界线。 */
+function buildOutdoorGround(styleId, template) {
+  const outer = 60
+  const hole = template.interiorBounds
+  const material = new THREE.MeshStandardMaterial({
+    name: styleId === 'fairy' ? '室外苔地' : '室外暖灰石地',
+    color: styleId === 'fairy' ? '#8a9b74' : '#b7b1a3',
+    roughness: 0.96,
+    metalness: 0,
+  })
+  const group = new THREE.Group()
+  group.name = 'room-outdoor-ground'
+  const strip = (name, minX, maxX, minZ, maxZ) => {
+    const mesh = new THREE.Mesh(new THREE.PlaneGeometry(maxX - minX, maxZ - minZ), material)
+    mesh.name = name
+    mesh.rotation.x = -Math.PI / 2
+    mesh.position.set((minX + maxX) / 2, 0, (minZ + maxZ) / 2)
+    mesh.receiveShadow = true
+    group.add(mesh)
+  }
+  strip('室外地面·北', -outer, outer, -outer, hole.minZ)
+  strip('室外地面·南', -outer, outer, hole.maxZ, outer)
+  strip('室外地面·西', -outer, hole.minX, hole.minZ, hole.maxZ)
+  strip('室外地面·东', hole.maxX, outer, hole.minZ, hole.maxZ)
+  return group
+}
+
+/**
+ * 拾取遮挡判定（纯函数，供测试直呼）：hits 为按距离排序的命中描述——
+ * { kind:'furniture', visible, opacity, pick:{instanceId,assetId,name} } 或
+ * { kind:'occluder', visible, opacity }。口径沿用旧建筑页 pickSign：
+ * 隐藏祖先（含总览裁掉的墙）不参与；挡在前面的可见实体（不透明度 ≥0.6，
+ * 磨砂窗玻璃 0.19／童话圆窗 0.46 都不算）截停，隔墙点不到家具。
+ */
+export function judgeRoomPick(hits) {
+  for (const hit of Array.isArray(hits) ? hits : []) {
+    if (!hit || hit.visible === false) continue
+    if (hit.kind === 'furniture') return hit.pick ?? null
+    if ((hit.opacity ?? 1) >= 0.6) return null
+  }
+  return null
+}
+
+/** 释放一组 Three.js 对象的几何与材质（含贴图）；中途失败与正常销毁共用。 */
+function disposeGroup(group) {
+  for (const child of [...group.children]) {
+    child.traverse((node) => {
+      node.geometry?.dispose?.()
+      const material = node.material
+      if (material) (Array.isArray(material) ? material : [material]).forEach((m) => { m.map?.dispose?.(); m.dispose?.() })
+    })
+    group.remove(child)
+  }
+}
+
+/**
+ * 建一个业务房间场景挂进 container。句柄：
+ *   resetView()       切 overview 并恢复原总览机位；不改行走站位与视线；阅读期间无操作
+ *   enterWalk()       切 walk，保留行走站位与视线；初次由场景初始化进入；阅读期间无操作
+ *   getWalkState()    会话的新状态快照，页面用它同步按钮与提示
+ *   setDoorOpen(open) 只转交会话事务并返回其结果，不改真实门；阅读期间返回
+ *                     { ok:false, code:'reading-active' }，不触碰门事务
+ *   setReading(bool)  阅读暂停闸门（E3b-1）：true 停住全部场景操作（键盘、拖动、
+ *                     总览控制器、拾取），false 后仍在原模式、原位置、原视线
+ *   isReading()       闸门当前状态（销毁后恒 false）
+ *   setPeriod('day'|'night')／dispose()
+ * 场景／会话初始化失败沿用"清理后抛错"路径（页面展示失败原因），不退回无碰撞行走。
+ */
+export function createRoomScene({ container, template, assembly, furniture, onPick = () => {} } = {}) {
+  // styleId 取值必须在函数顶层：setPeriod 闭包引用它——不能随风格校验挪进 try 的块作用域
+  const styleId = template?.styleId
+  const reducedMotion = typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  // 已创建的资源引用：releaseAll 对每一项判空，中途失败与正常销毁共用同一份清理。
+  let renderer = null
+  let scene = null
+  let overviewCamera = null
+  let walkCamera = null
+  let controls = null
+  let lighting = null
+  let room = null
+  let furnitureBatch = null
+  let furnitureGroup = null
+  let outdoorGround = null
+  let session = null
+  let input = null
+  let walkFrame = null
+  let gate = null
+  let observer = null
+  let disposed = false
+  let mode = 'walk' // 初始即门外行走；切模式只经 enterWalk／resetView
+  const canvasListeners = []
+  const pageListeners = []
+
+  function releaseAll() {
+    if (disposed && !renderer) return
+    disposed = true
+    if (renderer) renderer.setAnimationLoop(null)
+    observer?.disconnect()
+    for (const { target, type, listener } of canvasListeners) target.removeEventListener(type, listener)
+    canvasListeners.length = 0
+    for (const { target, type, listener } of pageListeners) target.removeEventListener(type, listener)
+    pageListeners.length = 0
+    gate?.dispose() // 先让阅读闸门失效，再走既有释放路径（不会重新启用输入或连接监听）
+    input?.dispose()
+    // 家具批次所有权在调用 createRoomScene 时已整体转交本场景：任何失败路径都由这里释放
+    furnitureBatch?.dispose()
+    if (outdoorGround) disposeGroup(outdoorGround)
+    room?.dispose()
+    lighting?.dispose()
+    controls?.dispose()
+    renderer?.dispose()
+    if (renderer) renderer.domElement.remove()
+    renderer = null
+    scene = null
+    overviewCamera = null
+    walkCamera = null
+    controls = null
+    lighting = null
+    room = null
+    furnitureBatch = null
+    furnitureGroup = null
+    outdoorGround = null
+    session = null
+    input = null
+    walkFrame = null
+    gate = null
+    observer = null
+  }
+
+  function resize() {
+    if (disposed || !renderer) return
+    const width = Math.max(1, container.clientWidth)
+    const height = Math.max(1, container.clientHeight)
+    renderer.setSize(width, height, false)
+    for (const camera of [overviewCamera, walkCamera]) {
+      if (!camera) continue
+      camera.aspect = width / height
+      camera.updateProjectionMatrix()
+    }
+  }
+
+  /** 回到总览：恢复原总览机位；行走站位与视线原样保留在会话／帧推进器里。
+   *  阅读期间为无操作（输入启停统一交闸门的 syncMode，不在这里直写）。 */
+  function resetView() {
+    if (disposed || gate?.isReading()) return
+    session.setMode('overview')
+    mode = 'overview'
+    walkFrame.resetClock()
+    overviewCamera.position.set(9.5, 8.2, 11.5)
+    controls.target.set(0, 0.9, 0)
+    controls.update()
+    gate.syncMode()
+  }
+
+  /** 继续行走：保留站位与视线，只切输入与相机；切模式清空计时避免切回来补算。
+   *  阅读期间为无操作。 */
+  function enterWalk() {
+    if (disposed || gate?.isReading()) return
+    session.setMode('walk')
+    mode = 'walk'
+    walkFrame.resetClock()
+    renderer.domElement.focus({ preventScroll: true })
+    gate.syncMode()
+  }
+
+  /** 昼夜切换：底座自带动画（童话星夜的萤火/月亮）与公共灯光一起切；day 为默认。 */
+  function setPeriod(period) {
+    if (disposed) return
+    room.setPeriod?.(period)
+    lighting.set(styleId, period)
+  }
+
+  try {
+    // 参数与风格校验也在 try 内（E4b-2）：批次所有权自调用瞬间转交——先验批次并接管，
+    // 风格未知、renderer 或行走会话创建失败同样走到 releaseAll 释放家具，不留隐藏的旧工厂路径。
+    if (!furniture || !furniture.group || typeof furniture.dispose !== 'function') {
+      throw new Error('缺少有效的家具批次（furniture：{ group, dispose }）——请先经 prepareRoomFurniture 准备')
+    }
+    furnitureBatch = furniture
+    const roomFactory = ROOM_FACTORIES[styleId]
+    if (!roomFactory) throw new Error(`未知房间风格：${String(styleId)}（现有：ceramic、fairy）`)
+    renderer = new THREE.WebGLRenderer({ antialias: true })
+    renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 1.75))
+    renderer.shadowMap.enabled = true
+    renderer.shadowMap.type = THREE.PCFSoftShadowMap
+    renderer.toneMapping = THREE.ACESFilmicToneMapping
+    renderer.outputColorSpace = THREE.SRGBColorSpace
+    renderer.domElement.tabIndex = 0
+    renderer.domElement.setAttribute('aria-label', '房间视图：WASD 或方向键行走、Shift 加速、拖动环视；回到总览后拖动旋转、滚轮缩放；点击家具查看身份')
+    container.append(renderer.domElement)
+
+    scene = new THREE.Scene()
+    overviewCamera = new THREE.PerspectiveCamera(40, 1, 0.1, 150)
+    controls = new OrbitControls(overviewCamera, renderer.domElement)
+    controls.enableDamping = true
+    controls.dampingFactor = 0.065
+    controls.minDistance = 6
+    controls.maxDistance = 24
+    controls.minPolarAngle = 0.22
+    controls.maxPolarAngle = Math.PI * 0.49
+    controls.enablePan = false
+    walkCamera = new THREE.PerspectiveCamera(WALK_FOV, 1, 0.1, 150)
+
+    lighting = createRoomLighting(renderer, scene)
+    room = roomFactory({ renderer, scene, reducedMotion, doorOpen: false })
+    scene.add(room.group)
+    room.setPeriod?.('day')
+    lighting.set(styleId, 'day')
+
+    // 家具批次（E4b-2）：模型由页面先经 prepareRoomFurniture 异步备好，这里只整组挂进
+    // 场景——不再内置模型工厂循环；位置/朝向已在批次内按 assembly 世界坐标摆好。
+    furnitureGroup = furnitureBatch.group
+    scene.add(furnitureGroup)
+
+    outdoorGround = buildOutdoorGround(styleId, template)
+    scene.add(outdoorGround)
+
+    // 行走会话：人物站位、walk／overview 模式与门开合事务的唯一来源（P1c-2c-1 模块）。
+    session = createRoomWalkSession({ template, assembly, door: room.door })
+    input = createWalkInput(renderer.domElement)
+    const spawn = session.getState().position
+    const doorCenter = template.entry.door
+    walkFrame = createWalkFrame({
+      session,
+      input,
+      camera: walkCamera,
+      yaw: lookYawToward(spawn, { x: doorCenter.centerX, z: doorCenter.centerZ }),
+    })
+
+    // 阅读暂停闸门（E3b-1）：input、walkFrame、controls 就绪后创建；getMode 只读
+    // 现有 mode，不另建一套 walk/overview 状态。未完成拾取记录放在 clearPick 可
+    // 访问的同一作用域，暂停时由闸门清掉——恢复后不把暂停前的按下与恢复后的
+    // 抬起拼成新点击；阅读中的按下/抬起在下方监听器里直接忽略。
+    let downAt = null
+    gate = createRoomReadingGate({
+      input,
+      controls,
+      walkFrame,
+      getMode: () => mode,
+      clearPick: () => { downAt = null },
+    })
+
+    // 点击家具：拖动超过 6px 不算点击；pointercancel 清掉本次按下记录。
+    // 候选＝家具网格＋四面墙组（含门框、门扇——门是墙组的活动子树），
+    // 由 judgeRoomPick 按距离与可见性裁决：总览裁掉的墙不遮挡，磨砂玻璃不遮挡。
+    const raycaster = new THREE.Raycaster()
+    const onPointerDown = (event) => {
+      if (gate.isReading()) return
+      downAt = [event.clientX, event.clientY]
+    }
+    const onPointerCancel = () => { downAt = null }
+    const effectivelyVisible = (object) => {
+      for (let node = object; node; node = node.parent) if (!node.visible) return false
+      return true
+    }
+    const onPointerUp = (event) => {
+      if (gate.isReading()) return
+      if (!downAt) return
+      const moved = Math.hypot(event.clientX - downAt[0], event.clientY - downAt[1])
+      downAt = null
+      if (moved > 6) return
+      const rect = renderer.domElement.getBoundingClientRect()
+      raycaster.setFromCamera(
+        new THREE.Vector2(((event.clientX - rect.left) / rect.width) * 2 - 1, -((event.clientY - rect.top) / rect.height) * 2 + 1),
+        mode === 'walk' ? walkCamera : overviewCamera,
+      )
+      const targets = [...furnitureGroup.children, ...room.walls.map((wall) => wall.group)]
+      const hits = raycaster.intersectObjects(targets, true).map((hit) => {
+        const material = Array.isArray(hit.object.material) ? hit.object.material[0] : hit.object.material
+        const opacity = material?.transparent ? material.opacity : 1
+        const owner = findFurnitureInstance(hit.object, furnitureGroup) // 书板/书脊/藤叶命中都归所属书架实例
+        return owner
+          ? { kind: 'furniture', visible: effectivelyVisible(hit.object), opacity, pick: { instanceId: owner.userData.instanceId, assetId: owner.userData.assetId, name: owner.userData.name } }
+          : { kind: 'occluder', visible: effectivelyVisible(hit.object), opacity }
+      })
+      const picked = judgeRoomPick(hits)
+      if (picked) onPick(picked)
+    }
+    renderer.domElement.addEventListener('pointerdown', onPointerDown)
+    renderer.domElement.addEventListener('pointerup', onPointerUp)
+    renderer.domElement.addEventListener('pointercancel', onPointerCancel)
+    canvasListeners.push(
+      { target: renderer.domElement, type: 'pointerdown', listener: onPointerDown },
+      { target: renderer.domElement, type: 'pointerup', listener: onPointerUp },
+      { target: renderer.domElement, type: 'pointercancel', listener: onPointerCancel },
+    )
+
+    // 页面隐藏／失焦时输入器自会清空；这里再把帧计时基线一并重置，
+    // 往返缓存（pagehide persisted=true 只冻结）恢复后首帧 dt=0，不把离开的时间算成位移。
+    const pauseForFreeze = () => {
+      input.clear()
+      walkFrame.resetClock()
+    }
+    const onVisibilityChange = () => pauseForFreeze()
+    const onPageHide = (event) => { if (event.persisted) pauseForFreeze() }
+    const onPageShow = () => walkFrame.resetClock()
+    document.addEventListener('visibilitychange', onVisibilityChange)
+    window.addEventListener('pagehide', onPageHide)
+    window.addEventListener('pageshow', onPageShow)
+    pageListeners.push(
+      { target: document, type: 'visibilitychange', listener: onVisibilityChange },
+      { target: window, type: 'pagehide', listener: onPageHide },
+      { target: window, type: 'pageshow', listener: onPageShow },
+    )
+
+    observer = new ResizeObserver(resize)
+    observer.observe(container)
+    resize()
+    overviewCamera.position.set(9.5, 8.2, 11.5)
+    controls.target.set(0, 0.9, 0)
+    controls.update()
+    enterWalk() // 门外开局：站位在会话出生点，视线正对门中心
+
+    // 朝向裁墙只在总览做（背对相机的墙临时隐藏）；行走时四面墙与关闭的门真实可见。
+    // 相机推进只经闸门（E3b-1）：阅读时两种推进都不做，不冻结渲染与底座动画。
+    const worldCamera = new THREE.Vector3()
+    const normal = new THREE.Vector3()
+    renderer.setAnimationLoop((now) => {
+      if (disposed || document.hidden) return
+      gate.advance(now)
+      if (mode === 'walk') {
+        for (const wall of room.walls) wall.group.visible = true
+      } else {
+        overviewCamera.getWorldPosition(worldCamera)
+        for (const wall of room.walls) {
+          normal.copy(wall.normal)
+          wall.group.visible = worldCamera.dot(normal) <= 0.1
+        }
+      }
+      const activeCamera = mode === 'walk' ? walkCamera : overviewCamera
+      room.update?.(now / 1000, activeCamera)
+      lighting.update(now / 1000)
+      renderer.render(scene, activeCamera)
+    })
+  } catch (error) {
+    releaseAll()
+    throw error
+  }
+
+  return {
+    resetView,
+    enterWalk,
+    getWalkState: () => session.getState(),
+    setDoorOpen: (open) => {
+      if (gate?.isReading()) return { ok: false, code: 'reading-active' }
+      return session.setDoorOpen(open)
+    },
+    setReading: (value) => gate?.setReading(value),
+    isReading: () => gate?.isReading() ?? false,
+    setPeriod,
+    dispose: releaseAll,
+  }
+}

package/web/assets/room.css

@@ -0,0 +1,287 @@
+/* 房间页（body.room-page）独立样式：只作用于本页，不改业务页与建筑页。
+   主题色、按钮与提示行的底子在 style.css，这里只补房间视口的布局与定位。 */
+
+.room-stage { margin: 0 0 20px; }
+
+/* 三维视图占页面主要面积：高度取视口的大部分并有下限，窄屏也能完整看到房间。 */
+.room-viewport {
+  position: relative;
+  height: min(74vh, 760px);
+  min-height: 420px;
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--canvas);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+/* canvas 尺寸交给容器（setSize 的第三个参数 false 不写 style，须由 CSS 定显示尺寸）：
+   与建筑页同款规则；漏了这条画布会按属性像素（×像素比）放大裁切，房间中心偏出画面。 */
+.room-viewport canvas { display: block; width: 100%; height: 100%; touch-action: none; }
+
+/* 工具行浮在视口左上：返回业务页＋回到总览＋一句操作提示（按钮样式与共用工具条一致，只补定位）。 */
+.room-toolbar {
+  position: absolute;
+  top: 10px;
+  left: 12px;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+/* 提示行在共用样式里是视口右下绝对定位；房间里它属于工具行，改回静态排布。
+   P1c-2c-2 起带 role=status：行走／总览操作提示与门结果的人话说明都走这一行。 */
+.room-toolbar .scene-hint { position: static; margin: 0; color: #6c7d70; pointer-events: none; }
+
+/* 行走／总览／门按钮：与"回到总览"同款；当前模式对应的按钮呈禁用态（浅显不抢焦点）。 */
+.room-toolbar .reset-button:disabled { opacity: .55; cursor: default; }
+
+/* 返回业务页：外观与工具条按钮同款（浅底描边），链接语义。 */
+.room-back {
+  display: inline-flex;
+  align-items: center;
+  padding: 7px 12px;
+  border-radius: 8px;
+  font-size: 13px;
+  border: 1px solid #b9c6b2;
+  background: rgba(251, 250, 240, .92);
+  color: #29433a;
+}
+.room-back:hover { border-color: #487465; text-decoration: none; }
+
+/* 点击家具后的身份一行：浮在视口左下，textContent 填充。 */
+.pick-info {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  z-index: 2;
+  margin: 0;
+  padding: 6px 12px;
+  border-radius: 8px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  font-size: 13px;
+}
+
+/* 占位声明常驻视口右下：小字、不抢注意力。 */
+.placeholder-note {
+  position: absolute;
+  right: 12px;
+  bottom: 12px;
+  z-index: 2;
+  margin: 0;
+  padding: 4px 10px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--surface) 82%, transparent);
+  color: var(--muted);
+  font-size: 12px;
+}
+
+/* 底座字幕与昼夜面板（2026-09-28 作者令：照着抄旧底座页面）：
+   类名与取值逐项抄自 experiments/2026-09-27-空房间风格底座/style.css；
+   仅去掉 eyebrow 的数字编号、top 下移让开本页工具条（返回业务页／回到总览）。
+   变量随底座风格与昼夜切换（body[data-style]／[data-period] 由 room.js 设置），
+   星夜换浅色字与深色面板，抄旧页原值。 */
+.room-page { --ink:#394740; --subtle:#7c837d; --panel:rgba(255,255,248,.65); --border:rgba(70,80,60,.13); }
+body[data-style="fairy"].room-page { --ink:#43523b; --subtle:#6b7e62; --panel:#fbffe5a8; --border:#6781572a; }
+body[data-style="fairy"][data-period="night"].room-page { --ink:#f0ead8; --subtle:#b3b8c8; --panel:#151d35ad; --border:#c2c9ef21; }
+
+.room-page .intro { position: absolute; pointer-events: none; top: 142px; left: 46px; color: var(--ink); }
+.room-page .eyebrow { font-size: 10px; letter-spacing: 3px; color: var(--subtle); margin: 0 0 18px; }
+.room-page .intro h1 { font-family: "STSong", "SimSun", serif; font-weight: 400; font-size: 43px; letter-spacing: 6px; margin: 0 0 20px; }
+.room-page .intro > p:not(.eyebrow) { font-size: 12px; line-height: 2.1; letter-spacing: 2px; color: var(--subtle); margin: 0; }
+.room-page .material-note { display: flex; align-items: center; gap: 9px; margin-top: 27px; font-size: 10px; color: var(--subtle); letter-spacing: 1px; }
+.room-page .material-chip { width: 25px; height: 25px; background: linear-gradient(140deg, #fff, #c6cac5 65%, #faf9ee); border-radius: 6px; border: 1px solid #ffffff6b; box-shadow: 0 3px 8px #101e1515; }
+body[data-style="fairy"].room-page .material-chip { background: linear-gradient(135deg, #d2bf94, #9b6e48 50%, #5f8248); }
+
+/* 昼夜面板：抄旧页 .period-panel/.small-label/.period-switch。 */
+.room-page .period-panel { position: absolute; right: 44px; bottom: 95px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border); background: var(--panel); backdrop-filter: blur(18px); }
+.room-page .small-label { display: block; font-size: 10px; letter-spacing: 2px; color: var(--subtle); margin-bottom: 12px; }
+.room-page .period-switch { display: flex; gap: 6px; }
+.room-page .period-switch button { font: inherit; color: var(--ink); font-size: 11px; letter-spacing: 1px; padding: 10px 18px; background: transparent; border: 0; border-radius: 9px; cursor: pointer; }
+.room-page .period-switch button:hover { filter: brightness(.97); }
+.room-page .period-switch button:focus-visible { outline: 2px solid #81966a; outline-offset: 5px; }
+.room-page .period-switch button[aria-pressed="true"] { background: #f8f9ef; color: #3d4b3c; box-shadow: 0 2px 6px #0000000a; }
+body[data-period="night"].room-page .period-switch button[aria-pressed="true"] { background: #4b536b; color: #fff1d2; }
+
+/* 窄屏：抄旧页 850px 断点的字幕与面板项；工具条按钮变多，提示行整行换行避开字幕。 */
+@media (max-width: 850px) {
+  .room-page .room-toolbar { left: 12px; right: 12px; }
+  .room-toolbar .scene-hint { flex: 1 1 100%; }
+  .room-page .intro { top: 150px; left: 24px; }
+  .room-page .intro h1 { font-size: 31px; }
+  .room-page .intro > p:not(.eyebrow) { font-size: 11px; }
+  .room-page .material-note { display: none; }
+  .room-page .period-panel { right: 22px; bottom: 75px; }
+}
+
+/* 场景建不起来：占位说明居中，返回链接照常可用。 */
+.room-viewport .scene-fallback {
+  position: absolute;
+  inset: 0;
+  z-index: 3;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  text-align: center;
+}
+
+/* 摆放诊断列表：code 行用等宽与主题色，原因行普通文字。 */
+.room-diag .diag-code { margin: 0 0 2px; font-family: Consolas, "Courier New", monospace; color: var(--warning); }
+.room-diag .problem-list li > p:last-child { margin: 0; color: var(--secondary); }
+
+/* 业务页的"进入房间"入口：跟在业务介绍后面的一行链接，不抢文档与图卡的位置。 */
+.business-page .room-entry-line { margin: 10px 0 0; }
+.business-page .room-entry-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+  font-weight: 600;
+}
+.business-page .room-entry-link:hover { background: var(--accent-hover); text-decoration: none; }
+
+/* E9b：房间页普通页头/空态可见区的"家具图鉴"入口，视觉同业务页进入房间入口；
+   全窗口形态下页头隐藏，工具条里另有常驻入口，这里只管普通形态。 */
+.room-page .furniture-entry-line { margin: 10px 0 0; }
+.room-page .furniture-entry-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  background: var(--accent-bg);
+  border: 1px solid var(--accent-border);
+  color: var(--accent);
+  font-weight: 600;
+}
+.room-page .furniture-entry-link:hover { background: var(--accent-hover); text-decoration: none; }
+
+/* 全窗口形态（作者令：进入房间后房间占满全屏，不留其他东西）：
+   场景创建成功后 room.js 给 body 加 room-live——顶栏与页头让位，视口铺满窗口；
+   错误、空态与场景失败不加这个类，仍是普通滚动文档。 */
+.room-page.room-live { overflow: hidden; }
+.room-page.room-live .app-bar,
+.room-page.room-live .page-content > .top { display: none; }
+.room-page.room-live .room-stage { position: fixed; inset: 0; z-index: 5; margin: 0; }
+.room-page.room-live .room-viewport { height: 100%; min-height: 0; border-radius: 0; border: none; }
+
+/* ── 阅读面板覆盖层（E3b-2）────────────────────────────────────────────
+   root 在 viewport 外、roomStage 内：阅读时背景视口加 inert，面板不受波及。
+   轻微遮罩＋四周留出场景（沿用建筑页"面板是浮卡、能看出还在房子里"的做法）；
+   面板结构复用 style.css 的 .material-*，这里只改房间侧的定位与不透明度。 */
+.room-reader-root {
+  position: absolute;
+  inset: 0;
+  z-index: 4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: clamp(18px, 4vh, 44px) clamp(18px, 4vw, 64px);
+  background: rgba(12, 18, 15, .28);
+}
+.room-reader-root[hidden] { display: none; }
+/* 焦点边界需要可聚焦，不能 display:none；绝对定位避免占用阅读区。 */
+.room-reader-root .reader-focus-guard { position: absolute; width: 1px; height: 1px; overflow: hidden; }
+/* .material-panel 原是建筑视口内绝对定位的浮卡；这里由 root 居中托管，改回常规盒。 */
+.room-page .room-reader-panel {
+  position: relative;
+  inset: auto;
+  width: min(920px, 100%);
+  height: min(640px, 100%);
+  max-width: none;
+  margin-inline: 0;
+  /* 正文保持足够不透明便于阅读；描边随底座风格变量（陶瓷浅／童话暖／星夜深）走。 */
+  background: color-mix(in srgb, var(--surface) 98%, transparent);
+  border-color: var(--border);
+}
+/* 重试行：失败时出现在正文区下方；隐藏时不占位。 */
+.reader-retry-line { flex: none; margin: 10px 0 0; }
+.reader-retry-line[hidden] { display: none; }
+.room-page .reader-retry-line .reset-button { font-size: 13px; }
+
+/* 图阅读页容器（E9c）：reader.js 每次选图新建 iframe（复用 style.css 的
+   .material-reader-frame 外观），这里只管容器自身占满阅读区、隐藏时不占位；
+   iframe 保持可聚焦（不设 pointer-events/touch 屏障），键盘能进图也能离图。 */
+.room-reader-root .material-reader-frame-host {
+  flex: 1;
+  display: flex;
+  min-height: 220px; /* 浅/深主题与窄屏都保留可视高度，关闭按钮不因此被顶出面板 */
+  min-width: 0;
+}
+.room-reader-root .material-reader-frame-host[hidden] { display: none; }
+.room-reader-root .material-reader-frame-host .material-reader-frame { flex: 1; }
+
+/* ── 清单收缩与面板放大（作者令 2026-10-01：看图时清单可收起、窗口可放大，
+      四周留边仍看得出在房间里，不是跳转页面）─────────────────────────── */
+/* 面板头里的两枚工具小按钮（清单收缩／放大还原），与关闭钮同一套轻量观感。
+   关闭钮 DOM 序在前（焦点循环首位＝打开焦点），视觉仍排最右（order）。 */
+.room-reader-root .material-head .material-close { order: 3; }
+.room-reader-root .material-tools { order: 2; flex: none; display: flex; gap: 8px; margin-left: auto; }
+.room-reader-root .material-tool {
+  height: 28px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--border);
+  background: var(--surface-soft); color: var(--secondary); font-size: 12.5px; line-height: 1;
+  cursor: pointer; white-space: nowrap;
+}
+.room-reader-root .material-tool:hover { background: var(--hover); }
+.room-reader-root .material-tool[aria-pressed='true'] { color: var(--accent); border-color: var(--accent-border); }
+/* 收起清单：侧栏整体让位，阅读区独占整行（覆盖 style.css 的两列网格）。 */
+.room-reader-root[data-list='collapsed'] .material-body { grid-template-columns: minmax(0, 1fr); }
+.room-reader-root[data-list='collapsed'] .material-side { display: none; }
+/* 放大：面板放到接近全屏但四周留边（root 的半透明遮罩和边缘房间画面仍在视野里）。 */
+.room-reader-root[data-size='large'] { padding: clamp(10px, 2vh, 20px) clamp(12px, 2vw, 28px); }
+.room-reader-root[data-size='large'] .room-reader-panel { width: min(1560px, 100%); height: min(960px, 100%); }
+
+/* 长路径按原执行单要能读全（E3b-2 验收补齐 R2）：共用 .material-item 是单行省略号
+   （white-space:nowrap＋ellipsis），登记路径长且前缀相同时在清单里被截断。这里在
+   房间阅读面板局部覆盖——条目允许多行、长无空格片段也能折行，取消省略；清单仍限
+   在自己的侧栏内滚动（.material-side 已有 overflow-y:auto）。不改共用 style.css。 */
+.room-reader-root .material-item {
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
+}
+/* 家具标题（面板头）与文档标题不许被长路径撑宽挤走关闭按钮：flex 子项给 min-width:0，
+   长词按 anywhere 折行；正文里的长路径与行内代码同理不撑出面板。 */
+.room-reader-root .material-heading { min-width: 0; }
+.room-reader-root .material-heading h2,
+.room-reader-root .material-reader-title { overflow-wrap: anywhere; }
+.room-reader-root .material-reader-body { min-width: 0; }
+.room-reader-root .material-reader-body code { overflow-wrap: anywhere; }
+.room-reader-root .material-doc-paragraph,
+.room-reader-root .material-doc-heading { overflow-wrap: anywhere; }
+
+/* ── 家具资料绑定提示（E3b-2）：绑定有误但房间照常浏览时的可展开诊断 ── */
+.binding-note {
+  position: absolute;
+  left: 12px;
+  bottom: 44px;
+  z-index: 2;
+  max-width: min(440px, calc(100% - 24px));
+  margin: 0;
+  padding: 8px 12px;
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--surface) 92%, transparent);
+  border: 1px solid var(--border);
+  font-size: 12px;
+  color: var(--text);
+}
+.binding-note summary { cursor: pointer; color: var(--warning); }
+.binding-note ol { margin: 6px 0 0; padding-left: 18px; }
+.binding-note ol p { margin: 2px 0 6px; }
+.binding-note .diag-code { font-family: Consolas, "Courier New", monospace; font-size: 11px; }
+
+/* 窄屏：阅读面板收窄留边、绑定提示避开工具条换行区。 */
+@media (max-width: 850px) {
+  .room-reader-root { padding: 12px; }
+  .room-page .room-reader-panel { width: 100%; height: 100%; }
+  .binding-note { bottom: 64px; }
+}