@dreamerbird/camera-studio 0.0.0-stage → 0.1.0

package/dist/CameraScene.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CameraScene.test.d.ts.map

package/dist/CameraScene.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CameraScene.test.d.ts","sourceRoot":"","sources":["../src/CameraScene.test.tsx"],"names":[],"mappings":""}

package/dist/CameraScene.test.js

@@ -0,0 +1,259 @@
+/*
+ * @jest-environment jsdom
+ */
+/**
+ * CameraScene 组件化(T9):
+ *  1. project 走 prop(组件内不再 getProject('Space')),onFlows 经
+ *     真实 HostFlowsWiring 交付;
+ *  2. i18n 嵌套判定(spec §7):宿主已包 I18nProvider → 跳过自包、
+ *     ui.locale 不生效;无宿主 provider → 自包并应用 ui.locale。
+ *
+ * 整树渲染的代价控制:Canvas 替身直接丢弃子树(Canvas 内组件不进 jsdom,
+ * 也不用伪造 three 运行时);注册表/PlacementManager/poseSession/
+ * videoExport 逐项 doMock 成良性替身,组件体与其余真实子树
+ * (TopToolbar/hostFlows/menuModel…)全量执行。与
+ * App.hostFlows.test.tsx / bootstrap.test.tsx 同套 doMock 手法
+ * (jest-esbuild 不提升 jest.mock,doMock 先行登记)。
+ */
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import ReactDOM from 'react-dom/client';
+import { IDBFactory } from 'fake-indexeddb';
+import { I18nProvider, getLanguage, setLanguage, useI18n, } from '@dreamerbird/studio/i18n';
+import { getHostFlowsHandle } from './hostFlows';
+import { setUiConfig } from './uiConfig';
+globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+globalThis.indexedDB = new IDBFactory();
+URL.createObjectURL = jest.fn(() => 'blob:mock-url');
+URL.revokeObjectURL = jest.fn();
+globalThis.ResizeObserver = class {
+    observe() { }
+    unobserve() { }
+    disconnect() { }
+};
+// getProject 间谍:断言组件内不再调(T9 后 project 一律来自 prop)
+const mockGetProject = jest.fn();
+// core 其余导出保持真实(模块链里 resolvePropLabel 等仍要用)
+jest.doMock('@dreamerbird/core', () => {
+    const actual = jest.requireActual('@dreamerbird/core');
+    return {
+        ...actual,
+        getProject: mockGetProject,
+        getStudioSync: () => undefined,
+        onChange: () => () => { },
+        val: (x) => x,
+    };
+});
+jest.doMock('@dreamerbird/react', () => ({
+    __esModule: true,
+    usePrism: (fn) => fn(),
+    useVal: () => undefined,
+}));
+// Canvas 替身:丢弃子树——Canvas 内组件(SheetProvider/Model/EnvLighting…)
+// 依赖 r3f 包内嵌的另一份 @react-three/fiber 副本,doMock 够不到,也不
+// 值得伪造 three 运行时;本文件断言全在 Canvas 外。其余 fiber 导出仅为
+// 真实模块 import 期绑定,渲染期不被调用
+jest.doMock('@react-three/fiber', () => ({
+    __esModule: true,
+    Canvas: () => React.createElement('div', { 'data-testid': 'canvas-fake' }),
+    useFrame: () => { },
+    useThree: () => ({}),
+}));
+// TopToolbar 替身:它不承载本文件的断言(project/onFlows/i18n),但其
+// 链条里的 studio ToolbarIconButton 依赖 react-merge-refs——jest 把
+// 'react-merge-refs' 与 '*.glb' 都映射到 identity-obj-proxy(同一模块
+// ID),doMock 按解析后 ID 登记会互相覆盖(scene.glb 的 doMock 会顶掉
+// mergeRefs 替身),与其 hack 混合替身不如整模块替身。TopToolbar 自有
+// TopToolbar.test.tsx 覆盖。
+jest.doMock('./TopToolbar', () => ({
+    __esModule: true,
+    TopToolbar: () => null,
+}));
+jest.doMock('./scene.glb', () => 'scene.glb');
+jest.doMock('three/examples/jsm/environments/RoomEnvironment.js', () => ({
+    RoomEnvironment: class RoomEnvironment {
+    },
+}));
+const noop = () => { };
+const noopComponent = () => null;
+jest.doMock('./PlacementManager', () => ({
+    __esModule: true,
+    PlacementRig: noopComponent,
+    PlacementRigErrorBoundary: class extends React.Component {
+        render() {
+            return this.props.children;
+        }
+    },
+    PlacedModels: noopComponent,
+    SelectionGizmo: noopComponent,
+    deletePlacement: noop,
+    getPlacementEntryForObject: () => undefined,
+    getPlacementInstanceForObject: () => undefined,
+    isSelectSuppressed: () => false,
+    readPlacementEntries: () => [],
+    readPlacementPositions: () => [],
+    useGizmoMode: () => ['translate', noop],
+    usePlacementController: () => ({
+        placing: null,
+        pendingEntry: null,
+        startPlacingFromLibrary: async () => { },
+        placeLibraryEntryAt: noop,
+        cancelPlacing: noop,
+        confirmPlacing: noop,
+        clearPending: noop,
+    }),
+    usePlacementSurface: noop,
+    useSelectionGizmoTarget: noop,
+}));
+jest.doMock('./cameraRegistry', () => ({
+    __esModule: true,
+    addCameraToRegistry: noop,
+    getCamerasRegistry: () => ({}),
+    nextCameraEntry: () => ({ cameraKey: 'cam-1' }),
+    readCameraEntries: () => [],
+    removeCamera: noop,
+    // 与真实现同语义:活动 key 在清单里取之,否则顺位第一台,空清单 null
+    resolveActiveCamera: (cameras, key) => cameras.find((e) => e.cameraKey === key) ?? cameras[0] ?? null,
+    useCamerasList: () => [],
+}));
+jest.doMock('./anchorsRegistry', () => ({
+    __esModule: true,
+    addAnchorToRegistry: noop,
+    nextAnchorKey: () => 'anchor-1',
+    removeAnchor: noop,
+    useAnchorsList: () => [],
+}));
+jest.doMock('./pathRegistry', () => ({
+    __esModule: true,
+    addPathToRegistry: noop,
+    nextPathEntry: () => ({ pathKey: 'path-1' }),
+    readPathEntries: () => [],
+    getPathsRegistry: () => ({}),
+    removePathFromRegistry: noop,
+    usePathsList: () => [],
+}));
+jest.doMock('./CameraPath', () => ({
+    __esModule: true,
+    addPathPoint: noop,
+    CameraPath: noopComponent,
+    deletePathPoint: () => false,
+    getPathMeta: () => null,
+    PathEditBar: noopComponent,
+    PathPointEditor: noopComponent,
+    pathExists: () => false,
+    POS_PATH_KEY: 'Pos Path',
+    readPathPoints: () => [],
+    samplePathPoint: () => false,
+    usePathExists: () => false,
+}));
+jest.doMock('./poseMode/poseSession', () => ({
+    __esModule: true,
+    enterPoseSession: noop,
+    getPoseSession: () => null,
+    isModelDoubleClick: () => false,
+    poseHitTest: () => false,
+    requestPoseExit: noop,
+    usePoseSessionKey: () => null,
+}));
+jest.doMock('./videoExport/sinks', () => ({
+    __esModule: true,
+    listSinks: () => [],
+}));
+jest.doMock('./videoExport/exporter', () => ({
+    __esModule: true,
+    startShotExport: () => null,
+}));
+const { CameraScene, SceneI18nRoot } = require('./CameraScene');
+/** 最小 IProject/sheet 替身:组件体只触 address/sheet('Scene')/sequence 形状 */
+const fakeSheet = {
+    address: { projectId: 'proj-x', sheetId: 'Scene', sheetInstanceId: 'default' },
+    sequence: { pointer: { playing: {} } },
+};
+const fakeProject = { sheet: jest.fn(() => fakeSheet) };
+async function renderScene(props) {
+    const el = document.createElement('div');
+    document.body.appendChild(el);
+    const root = ReactDOM.createRoot(el);
+    await act(async () => {
+        root.render(React.createElement(CameraScene, { ...props }));
+    });
+    await act(async () => { }); // 冲刷库条目等异步 effect
+    return { root, el };
+}
+afterEach(() => {
+    setUiConfig({});
+    setLanguage('en');
+    mockGetProject.mockClear();
+    fakeProject.sheet.mockClear();
+    globalThis.localStorage?.clear();
+});
+// ── 1. project 走 prop + onFlows 交付 ──────────────────────────
+test('project 走 prop,不再 getProject(Space);onFlows 经 HostFlowsWiring 交付', async () => {
+    const onFlows = jest.fn();
+    const { root, el } = await renderScene({ project: fakeProject, onFlows });
+    // T9 核心断言:组件内不再自己 getProject,project 由 prop 注入
+    expect(mockGetProject).not.toHaveBeenCalled();
+    expect(fakeProject.sheet).toHaveBeenCalledWith('Scene');
+    // 宿主接线:真实 HostFlowsWiring 交付句柄并挂注册表
+    expect(onFlows).toHaveBeenCalledTimes(1);
+    const flows = onFlows.mock.calls[0][0];
+    expect(getHostFlowsHandle()).toBe(flows);
+    // 场景根与 Canvas 替身都在(document 结构健全)
+    expect(el.querySelector('[data-testid="canvas-fake"]')).not.toBeNull();
+    await act(async () => {
+        root.unmount();
+    });
+    el.remove();
+    expect(getHostFlowsHandle()).toBeNull();
+});
+// ── 2. i18n 嵌套判定(SceneI18nRoot)────────────────────────────
+/** 渲染期把所在层的 i18n context 值抓出来(引用比较用) */
+function Capture({ into }) {
+    into(useI18n());
+    return null;
+}
+test('宿主已包 I18nProvider 时跳过自包:context 同一引用,ui.locale 不生效', async () => {
+    const before = getLanguage();
+    setUiConfig({ locale: 'zh-CN' });
+    let hostValue;
+    let probeValue;
+    const el = document.createElement('div');
+    const root = ReactDOM.createRoot(el);
+    await act(async () => {
+        root.render(React.createElement(I18nProvider, null,
+            React.createElement(Capture, { into: (v) => (hostValue = v) }),
+            React.createElement(SceneI18nRoot, null,
+                React.createElement(Capture, { into: (v) => (probeValue = v) }))));
+    });
+    // 同一 context 对象 = SceneI18nRoot 中间没插第二层 provider
+    expect(probeValue).toBe(hostValue);
+    // 语言以宿主为准:ui.locale 在宿主已包分支不生效
+    expect(getLanguage()).toBe(before);
+    await act(async () => {
+        root.unmount();
+    });
+    el.remove();
+});
+test('无宿主 provider 时自包一层并应用 ui.locale', async () => {
+    setUiConfig({ locale: 'zh-CN' });
+    let rootValue;
+    let probeValue;
+    const el = document.createElement('div');
+    const root = ReactDOM.createRoot(el);
+    await act(async () => {
+        root.render(React.createElement(React.Fragment, null,
+            React.createElement(Capture, { into: (v) => (rootValue = v) }),
+            React.createElement(SceneI18nRoot, null,
+                React.createElement(Capture, { into: (v) => (probeValue = v) }))));
+    });
+    // 外层裸 useI18n() 拿的是模块级 fallbackValue(context 默认 null,
+    // T9 改 i18n 嵌套检测后如此);内层不同引用 = SceneI18nRoot 自包了一层 provider
+    expect(probeValue).not.toBe(rootValue);
+    expect(probeValue).toBeTruthy();
+    // ui.locale 在自包分支生效(studio i18n 单例,全局应用)
+    expect(getLanguage()).toBe('zh-CN');
+    await act(async () => {
+        root.unmount();
+    });
+    el.remove();
+});

package/dist/PathPresetDropRig.d.ts

@@ -0,0 +1,27 @@
+/**
+ * 路径预设拖拽的 Canvas 内容:落点标记(小球)跟随指针,松开 = 在该处
+ * 生成预设路径,画布外松开/Esc/右键 = 取消。
+ *
+ * 落点语义(Blender G 抓取的对应物):
+ * - 默认走视平面——指针射线与「过锚点、垂直于视线的平面」求交,指针上移
+ *   世界里就升高,高度自由;锚点取拖动开始时的落点深度、基准高度取活动
+ *   相机当前 Y(起手位置和旧版手感一致,拖离起手点即进入自由调节)
+ * - 命中已放置的模型时贴它的表面:水平对到模型中心,高度用命中点真实
+ *   高度(面吸附的对应物)
+ * - 轴向约束(同 Blender):拖动中按 Z = 只沿竖直方向调(锁定 x/z),
+ *   Shift+Z = 锁在水平面内(锁定 y),再按一次同样的组合解除;约束以
+ *   按下那一刻的点位为基准,生效期间画轴线提示
+ * - 标记始终显示在将要生成的精确点位(所见即所得)
+ */
+import React from 'react';
+export declare function PathPresetDropRig({ onConfirm, onCancel, heightY, }: {
+    onConfirm: (point: {
+        x: number;
+        y: number;
+        z: number;
+    }) => void;
+    onCancel: () => void;
+    /** 视平面锚点的基准高度(活动相机当前 Y):起手落点保持旧版手感 */
+    heightY: number;
+}): React.JSX.Element;
+//# sourceMappingURL=PathPresetDropRig.d.ts.map

package/dist/PathPresetDropRig.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathPresetDropRig.d.ts","sourceRoot":"","sources":["../src/PathPresetDropRig.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAA6C,MAAM,OAAO,CAAA;AAwEjE,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE;IACD,SAAS,EAAE,CAAC,KAAK,EAAE;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAC,KAAK,IAAI,CAAA;IAC7D,QAAQ,EAAE,MAAM,IAAI,CAAA;IACpB,sCAAsC;IACtC,OAAO,EAAE,MAAM,CAAA;CAChB,qBAuKA"}

package/dist/PathPresetDropRig.js

@@ -0,0 +1,192 @@
+/**
+ * 路径预设拖拽的 Canvas 内容:落点标记(小球)跟随指针,松开 = 在该处
+ * 生成预设路径,画布外松开/Esc/右键 = 取消。
+ *
+ * 落点语义(Blender G 抓取的对应物):
+ * - 默认走视平面——指针射线与「过锚点、垂直于视线的平面」求交,指针上移
+ *   世界里就升高,高度自由;锚点取拖动开始时的落点深度、基准高度取活动
+ *   相机当前 Y(起手位置和旧版手感一致,拖离起手点即进入自由调节)
+ * - 命中已放置的模型时贴它的表面:水平对到模型中心,高度用命中点真实
+ *   高度(面吸附的对应物)
+ * - 轴向约束(同 Blender):拖动中按 Z = 只沿竖直方向调(锁定 x/z),
+ *   Shift+Z = 锁在水平面内(锁定 y),再按一次同样的组合解除;约束以
+ *   按下那一刻的点位为基准,生效期间画轴线提示
+ * - 标记始终显示在将要生成的精确点位(所见即所得)
+ */
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useFrame, useThree } from '@react-three/fiber';
+import { BufferAttribute, BufferGeometry, LineBasicMaterial, LineSegments, Raycaster, Vector3, } from 'three';
+import { computeDropPoint, computeHorizontalConstraintPoint, computeVerticalConstraintPoint, computeViewPlanePoint, } from './dropPoint';
+import { getPlacedModelRoots, getPlacementSurfaces } from './PlacementManager';
+/** 约束轴线:竖直 = 一根竖线;水平 = 当前高度上的十字线。段很长,铺满视野 */
+const GUIDE_HALF = 500;
+function makeGuide() {
+    const geometry = new BufferGeometry();
+    // 最多两段(水平十字),竖直只用第一段
+    geometry.setAttribute('position', new BufferAttribute(new Float32Array(12), 3));
+    const line = new LineSegments(geometry, new LineBasicMaterial({
+        color: 0x66ccff,
+        toneMapped: false,
+        transparent: true,
+        opacity: 0.9,
+        depthTest: false,
+    }));
+    line.frustumCulled = false;
+    line.renderOrder = 19;
+    line.visible = false;
+    return line;
+}
+function updateGuide(guide, mode, p) {
+    if (!mode) {
+        guide.visible = false;
+        return;
+    }
+    const attr = guide.geometry.getAttribute('position');
+    if (mode === 'vertical') {
+        attr.setXYZ(0, p.x, p.y - GUIDE_HALF, p.z);
+        attr.setXYZ(1, p.x, p.y + GUIDE_HALF, p.z);
+        guide.geometry.setDrawRange(0, 2);
+    }
+    else {
+        attr.setXYZ(0, p.x - GUIDE_HALF, p.y, p.z);
+        attr.setXYZ(1, p.x + GUIDE_HALF, p.y, p.z);
+        attr.setXYZ(2, p.x, p.y, p.z - GUIDE_HALF);
+        attr.setXYZ(3, p.x, p.y, p.z + GUIDE_HALF);
+        guide.geometry.setDrawRange(0, 4);
+    }
+    attr.needsUpdate = true;
+    guide.visible = true;
+}
+export function PathPresetDropRig({ onConfirm, onCancel, heightY, }) {
+    const invalidate = useThree((s) => s.invalidate);
+    const gl = useThree((s) => s.gl);
+    const camera = useThree((s) => s.camera);
+    const markerRef = useRef(null);
+    const raycaster = useMemo(() => new Raycaster(), []);
+    const guide = useMemo(makeGuide, []);
+    // 视平面锚点:拖动开始(第一次进入画布)时定死,之后整次拖动不变
+    const anchorRef = useRef(null);
+    // 当前生效点位:标记显示和松手确认共用,保证「看到的=生成的」
+    const currentRef = useRef(new Vector3(0, heightY, 0));
+    // 轴向约束:ref 供帧回调/事件闭包读,state 只为让轴线随约束显隐重渲染
+    const constraintRef = useRef(null);
+    const [, setConstraint] = useState(null);
+    // 约束基准:按下约束键那一刻的点位(Blender 以物体当前位置为轴心)
+    const constraintBaseRef = useRef(new Vector3());
+    // pointermove 一秒上百次:只记坐标并申请一帧,落点计算在帧回调里做一次
+    const pendingMoveRef = useRef(null);
+    // 最近一次指针位置:约束键按下时按新约束就地重解
+    const lastPointerRef = useRef(null);
+    const hitOut = useMemo(() => ({ surfaceRoot: null }), []);
+    /** 一次完整的落点求解:轴向约束优先,其次模型表面吸附,否则视平面;
+     *  各类求解失效时都保持上一帧点位 */
+    const solve = (clientX, clientY) => {
+        const rect = gl.domElement.getBoundingClientRect();
+        const mode = constraintRef.current;
+        if (mode === 'vertical') {
+            const v = computeVerticalConstraintPoint(raycaster, camera, rect, clientX, clientY, constraintBaseRef.current);
+            if (v)
+                currentRef.current.copy(v);
+            return currentRef.current;
+        }
+        if (mode === 'horizontal') {
+            const v = computeHorizontalConstraintPoint(raycaster, camera, rect, clientX, clientY, constraintBaseRef.current);
+            if (v)
+                currentRef.current.copy(v);
+            return currentRef.current;
+        }
+        const p = computeDropPoint(raycaster, camera, getPlacementSurfaces(), rect, clientX, clientY, hitOut);
+        if (!anchorRef.current) {
+            anchorRef.current = new Vector3(p.x, heightY, p.z);
+        }
+        const root = hitOut.surfaceRoot;
+        if (root && getPlacedModelRoots().has(root)) {
+            // 命中已放置模型:路径中心对到模型中心,高度贴命中表面
+            const w = new Vector3();
+            root.getWorldPosition(w);
+            currentRef.current.set(w.x, p.y, w.z);
+        }
+        else {
+            const v = computeViewPlanePoint(raycaster, camera, rect, clientX, clientY, anchorRef.current);
+            if (v)
+                currentRef.current.copy(v);
+        }
+        return currentRef.current;
+    };
+    useFrame(() => {
+        const pending = pendingMoveRef.current;
+        if (!pending)
+            return;
+        pendingMoveRef.current = null;
+        const p = solve(pending.x, pending.y);
+        if (markerRef.current) {
+            markerRef.current.visible = true;
+            markerRef.current.position.copy(p);
+        }
+        updateGuide(guide, constraintRef.current, p);
+    });
+    useEffect(() => {
+        const el = gl.domElement;
+        const onMove = (ev) => {
+            lastPointerRef.current = { x: ev.clientX, y: ev.clientY };
+            pendingMoveRef.current = { x: ev.clientX, y: ev.clientY };
+            invalidate();
+        };
+        const onUp = (ev) => {
+            if (ev.button !== 0)
+                return;
+            // 同 PlacementRigCore:松手在面板 DOM 上(target 非画布)= 静默取消
+            if (ev.target !== el) {
+                onCancel();
+                return;
+            }
+            const p = solve(ev.clientX, ev.clientY);
+            if (p.distanceTo(camera.position) > 300) {
+                onCancel();
+                return;
+            }
+            onConfirm({ x: p.x, y: p.y, z: p.z });
+        };
+        const onKey = (ev) => {
+            if (ev.key === 'Escape') {
+                onCancel();
+                return;
+            }
+            // Blender 式轴向约束:Z = 只调高度,Shift+Z = 只在水平面;
+            // 再按一次同样的组合解除。按住重复的 keydown 不重复翻转
+            if (ev.key.toLowerCase() !== 'z' || ev.repeat)
+                return;
+            const want = ev.shiftKey ? 'horizontal' : 'vertical';
+            const next = constraintRef.current === want ? null : want;
+            constraintRef.current = next;
+            if (next)
+                constraintBaseRef.current.copy(currentRef.current);
+            setConstraint(next);
+            // 就地按新约束重解:轴线/标记立刻反映,不用等下一次指针移动
+            if (lastPointerRef.current) {
+                pendingMoveRef.current = lastPointerRef.current;
+                invalidate();
+            }
+        };
+        const onContextMenu = (ev) => {
+            ev.preventDefault();
+            onCancel();
+        };
+        el.addEventListener('pointermove', onMove);
+        window.addEventListener('pointerup', onUp);
+        window.addEventListener('keydown', onKey);
+        window.addEventListener('contextmenu', onContextMenu);
+        return () => {
+            el.removeEventListener('pointermove', onMove);
+            window.removeEventListener('pointerup', onUp);
+            window.removeEventListener('keydown', onKey);
+            window.removeEventListener('contextmenu', onContextMenu);
+        };
+        // solve 每帧用到的值都来自 ref/useThree,闭包稳定
+    }, [gl, camera, raycaster, invalidate, onConfirm, onCancel]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement("mesh", { ref: markerRef, visible: false },
+            React.createElement("sphereGeometry", { args: [0.3, 16, 16] }),
+            React.createElement("meshBasicMaterial", { color: "#ffaa00", transparent: true, opacity: 0.8, depthTest: false })),
+        React.createElement("primitive", { object: guide })));
+}

package/dist/PathPresetThumb.d.ts

@@ -0,0 +1,11 @@
+/**
+ * 路径预设卡片的 SVG 动画缩略图:3/4 轴测投影 + 地面网格 +
+ * 高度投影虚线,俯视摄像机图标沿路径运动、取景锥始终咬住主体。
+ * 颜色与场景里的路径线(0xa78bfa)同色系,所见即所得。
+ */
+import React from 'react';
+import type { PathPreset } from './pathPresets';
+export declare function PathPresetThumb({ preset }: {
+    preset: PathPreset;
+}): React.JSX.Element;
+//# sourceMappingURL=PathPresetThumb.d.ts.map

package/dist/PathPresetThumb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PathPresetThumb.d.ts","sourceRoot":"","sources":["../src/PathPresetThumb.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,KAAmC,MAAM,OAAO,CAAA;AACvD,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,eAAe,CAAA;AAe7C,wBAAgB,eAAe,CAAC,EAAC,MAAM,EAAC,EAAE;IAAC,MAAM,EAAE,UAAU,CAAA;CAAC,qBA+G7D"}

package/dist/PathPresetThumb.js

@@ -0,0 +1,85 @@
+/**
+ * 路径预设卡片的 SVG 动画缩略图:3/4 轴测投影 + 地面网格 +
+ * 高度投影虚线,俯视摄像机图标沿路径运动、取景锥始终咬住主体。
+ * 颜色与场景里的路径线(0xa78bfa)同色系,所见即所得。
+ */
+import React, { useEffect, useMemo, useRef } from 'react';
+import { buildPresetThumb, THUMB_VH, THUMB_VW } from './presetThumbGeometry';
+// 与预览稿一致的三角色:轨迹紫 / 摄像机青 / 主体琥珀
+const COLOR_TRACK = '#a78bfa';
+const COLOR_CAM = '#22d3ee';
+const COLOR_CAM_CONE = 'rgba(34, 211, 238, 0.28)';
+const COLOR_SUBJECT = '#f59e0b';
+const COLOR_GRID = '#232a36';
+const COLOR_SHADOW = '#2c3542';
+const REDUCED = typeof window !== 'undefined' &&
+    window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+export function PathPresetThumb({ preset }) {
+    const thumb = useMemo(() => buildPresetThumb(preset), [preset]);
+    const trackRef = useRef(null);
+    const shadowRef = useRef(null);
+    const camRef = useRef(null);
+    const camShadowRef = useRef(null);
+    const dropLineRef = useRef(null);
+    useEffect(() => {
+        const track = trackRef.current;
+        const cam = camRef.current;
+        if (!track || !cam)
+            return;
+        const shadow = shadowRef.current;
+        const camShadow = camShadowRef.current;
+        const dropLine = dropLineRef.current;
+        // 各卡片错开相位,整版面不会齐步走
+        const phase = Math.random();
+        let raf = 0;
+        const apply = (now) => {
+            const len = track.getTotalLength();
+            let t = (now / 1000 / preset.durSeconds + phase) % 1;
+            // 开放路径 ping-pong:推近→拉远→推近,正好表达往返语义
+            if (!preset.closed)
+                t = t < 0.5 ? t * 2 : (1 - t) * 2;
+            const pos = track.getPointAtLength(t * len);
+            const ang = (Math.atan2(thumb.subject[1] - pos.y, thumb.subject[0] - pos.x) * 180) /
+                Math.PI;
+            cam.setAttribute('transform', `translate(${pos.x} ${pos.y}) rotate(${ang})`);
+            // 有高度:影子落在地面投影上,垂线连接;纯平面:影子贴在机身下
+            let gx = pos.x;
+            let gy = pos.y;
+            if (shadow) {
+                const gpos = shadow.getPointAtLength(t * shadow.getTotalLength());
+                gx = gpos.x;
+                gy = gpos.y;
+            }
+            camShadow?.setAttribute('cx', String(gx));
+            camShadow?.setAttribute('cy', String(gy));
+            dropLine?.setAttribute('x1', String(pos.x));
+            dropLine?.setAttribute('y1', String(pos.y));
+            dropLine?.setAttribute('x2', String(gx));
+            dropLine?.setAttribute('y2', String(gy));
+        };
+        if (REDUCED) {
+            apply(0); // 静帧:摆在小圈起点即可
+            return;
+        }
+        const loop = (now) => {
+            apply(now);
+            raf = requestAnimationFrame(loop);
+        };
+        raf = requestAnimationFrame(loop);
+        return () => cancelAnimationFrame(raf);
+    }, [thumb, preset.closed, preset.durSeconds]);
+    const [sx, sy] = thumb.subject;
+    return (React.createElement("svg", { viewBox: `0 0 ${THUMB_VW} ${THUMB_VH}`, style: { display: 'block', width: '100%', height: '100%' } },
+        React.createElement("path", { d: thumb.gridD, fill: "none", stroke: COLOR_GRID, strokeWidth: 0.6 }),
+        thumb.groundD && (React.createElement("path", { ref: shadowRef, d: thumb.groundD, fill: "none", stroke: COLOR_SHADOW, strokeWidth: 1, strokeDasharray: "2.5 2.5" })),
+        React.createElement("path", { ref: trackRef, d: thumb.d, fill: "none", stroke: COLOR_TRACK, strokeWidth: 0.8 }),
+        React.createElement("g", { stroke: COLOR_SUBJECT, strokeWidth: 1, opacity: 0.9 },
+            React.createElement("line", { x1: sx - 3.5, y1: sy, x2: sx + 3.5, y2: sy }),
+            React.createElement("line", { x1: sx, y1: sy - 3.5, x2: sx, y2: sy + 3.5 })),
+        React.createElement("line", { ref: dropLineRef, stroke: COLOR_SHADOW, strokeWidth: 0.8, strokeDasharray: "1.5 2" }),
+        React.createElement("ellipse", { ref: camShadowRef, rx: 2.4, ry: 1.2, fill: COLOR_CAM, opacity: 0.35 }),
+        React.createElement("g", { ref: camRef },
+            React.createElement("path", { d: "M 1.4 -1.6 L 8 -3.6 L 8 3.6 L 1.4 1.6 Z", fill: COLOR_CAM_CONE }),
+            React.createElement("circle", { r: 2, fill: COLOR_CAM }),
+            React.createElement("circle", { r: 0.7, fill: "#0e1116" }))));
+}

package/dist/PipCameraSelector.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { CameraEntry } from './cameraRegistry';
+/**
+ * 画中画左上角的相机选择器:显示当前相机名,点击弹下拉列表,
+ * 点选 = 设为活动相机(画中画/镜头视角/导出联动)。点外部/Escape 收起。
+ * 颜色取 studio UI 同款静态值(shadow DOM 令牌到不了这里)。
+ */
+export declare function PipCameraSelector({ cameras, activeKey, onSelect, visible, }: {
+    cameras: readonly CameraEntry[];
+    activeKey: string;
+    onSelect: (cameraKey: string) => void;
+    /** hover 到画中画时由外层置 true;菜单展开期间即使移出也保持可见 */
+    visible: boolean;
+}): React.JSX.Element;
+//# sourceMappingURL=PipCameraSelector.d.ts.map

package/dist/PipCameraSelector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PipCameraSelector.d.ts","sourceRoot":"","sources":["../src/PipCameraSelector.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAA;AACxD,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAA;AAOjD;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,EAChC,OAAO,EACP,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE;IACD,OAAO,EAAE,SAAS,WAAW,EAAE,CAAA;IAC/B,SAAS,EAAE,MAAM,CAAA;IACjB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,2CAA2C;IAC3C,OAAO,EAAE,OAAO,CAAA;CACjB,qBAyGA"}