@edv4h/usketch-plugin-mode7 0.2.0

package/README.md

@@ -0,0 +1,102 @@
+# @edv4h/usketch-plugin-mode7
+
+ファミコン/SNES の **Mode 7** のように、Canvas を「奥へ傾く地平面」として擬似3D視点で見る
+**ビューモード**プラグイン。実際の Shape をそのまま傾けて表示する（編集ではなく閲覧）。ON/OFF トグル、既定 OFF。
+
+## 仕組み
+
+- `perspective()+rotateX(pitch)+rotateZ(yaw)` の **CSS 3D 変換**を、`document.head` に挿した単一の `<style>`
+  シート（`!important` ルール）で「板コンテンツ層」の外側ラッパ div に当てる。各レイヤーは `canvas.tsx` で
+  `data-layer-id` 付き div にラップされ、ルールは `data-mode7-stage="on"` を付けたメインコンテナ配下に
+  スコープされる。コンテナ検出は **`data-testid` ではなく `[data-layer-id]` の親**で行う（`data-testid` は
+  ビルドで除去され実行時に存在しないため）。スタイルシート方式なので React の再レンダで消えず、後からマウント
+  する層にも適用され、per-element の注入も `MutationObserver` も要らない。コアの座標変換（affine `{x,y,zoom}`）には触れない。
+- 傾ける対象は **allow 方式**で、既定は「**固定UIクロム以外のほぼ全層**」（背景/Shape/GPU に加え、
+  選択・コネクタ・各種オーバーレイ層も含む。除外は `vim-status-line`/`vim-which-key`/`vim-help`/
+  `side-panel`/`presentation-overlay` の固定UI）。**HUD の「Mode 7 レイヤー」パネルから実行時に選択できる**
+  （例: Shape 層のオン/オフ）。HUD 自身やプラグインの sky/fog/capture 層は選択肢から除外され、絶対に
+  傾かない（`skipLayerIds` で除外を追加可）。既定一覧は `DEFAULT_TILT_LAYER_IDS` を参照。
+- **sky / fog / capture** の3つの非傾斜オーバーレイ層を追加。capture 層が板のポインタを捕捉して
+  3D 下での編集破綻を防ぎ、ドラッグ=地上移動（viewport pan）・wheel=ズームでカメラを操作する。
+- **取り込み範囲（capture frame）**: 3Dビューが地面として映すのは「切替時のビューポート世界矩形」だけで、
+  その外の Shape は初期3Dビューに出ない（本方式は遠方を描画しない＝現ビューポート分のみ。前進パンで到達は可）。
+  これを可視化するため、切替 ON の瞬間にビューポート世界矩形をスナップショットし、**フラットモードで
+  ワールド固定の破線枠**として描く（HUD トグル `取り込み範囲` / アクション `取り込み範囲の表示切替` で ON/OFF）。
+  枠外の Shape が一目で分かるので、切替前の配置調整に使える。枠自体は非傾斜・非固定レイヤーで shape 化しない。
+- 状態は**ビュー限定（per-viewer・非永続・非同期）** ＝ shape 化しない（presentation と同類）。
+
+## 使い方
+
+```ts
+import { createMode7Plugin } from "@edv4h/usketch-plugin-mode7";
+
+createApp({
+  plugins: [
+    // …renderer / 各 shape プラグインと一緒に登録する
+    createMode7Plugin({
+      enabledInitially: false,          // 既定 OFF（HUD/サービスで opt-in）
+      camera: { pitch: 55, fov: 600 },  // 初期カメラ（部分指定可）
+      look: { sky: "#0b1026", fog: 0.35 },
+      // tiltLayerIds: [...],           // 傾ける層を上書き
+      // shortcuts: { toggle: "…" },    // キーバインド（opt-in・既定なし）
+    }),
+  ],
+});
+```
+
+有効化は HUD の「3Dビュー切替」アクション、サービス `getMode7Api(app.services)?.toggle()`、
+またはイベント `app.events.emit("mode7:toggle")` のいずれでも可能。
+
+## カメラ
+
+| パラメータ | 意味 | 範囲 |
+| --- | --- | --- |
+| `pitch` | 地平面の傾き（0=真上, 大=斜め） | 0–85° |
+| `yaw` | 旋回（進行方向の回転） | -180–180° |
+| `fov` | CSS `perspective()` 距離（小=遠近強） | 200–2000px |
+| `horizon` | 地平線の画面高さ割合（ピボット） | 0.1–0.9 |
+
+見た目: `sky`（空色）/ `fog`（フォグ濃度 0–1）/ `fogColor`。
+
+**描画距離（`drawDistance`, HUD「描画距離(Canvas)」）**: 近端（画面下＝カメラ手前）から**Canvas
+（ワールド）単位**でどこまで地面を描くか。tilt 層は `overflow:visible`（3D保持のため）で描くので、
+`clip-path` でこの距離にクリップして境界を作る（`clip-path` は `overflow` と違い 3D を潰さない）。
+
+既定は **1500**（開いた瞬間に地面が少し奥まで敷かれる）。`0`=**auto**＝ビューポート箱で切る。
+
+- `0`(auto) → 箱で切る。箱の外に Shape が露出せず、グリッド（`bg-grid`）と同じ範囲でピタッと切れる（浮かない）。
+- **箱内の距離** → その手前だけ残す（遠方の散らばりを消す・近距離クローズアップ）。
+- **箱を超える距離** → クリップを**全方向へ**負 inset で広げ（上=奥, 左右=扇状に広がる地面, 画面外は
+  canvas-container が clip）、**同時に `bg-grid:set-overscan` イベントでグリッドを箱外へ延長**する
+  （延長px = `distance*zoom - 箱高 + 余白`）。これで grid と Shape が一緒に奥＋横へ伸び、遠方 Shape の
+  下にもグリッドが敷かれる（専用グリッド不要）。`viewport:changed` でズームにも追従。
+
+※ Shape は DOM 上には残る（コアのカリングではなく描画クリップ）ので、真のジオメトリ間引きは別途。
+
+## アクション（`mode7:<key>` で emit・HUD Controls に自動表示・サービス）
+
+`toggle` / `pitch-up` / `pitch-down` / `yaw-left` / `yaw-right` / `fov-narrow` / `fov-wide` / `reset` /
+`capture-frame`（取り込み範囲の表示切替）。
+
+ショートカットは **opt-in・既定なし**（共有レジストリは `event.key` 照合で macOS の Option+英字合成 /
+Shift+数字変換に弱く、既定を持たせると layout により無反応になるため）。`shortcuts` オプションで任意に割当。
+
+## サービス API
+
+```ts
+import { getMode7Api } from "@edv4h/usketch-plugin-mode7";
+const api = getMode7Api(app.services);
+api?.toggle();
+api?.setPitch(60);
+api?.setYaw(30);
+```
+
+`Mode7Api`: `isActive` / `enable` / `disable` / `toggle` / `getCamera` / `setPitch` / `setYaw` /
+`setFov` / `setHorizon` / `adjust` / `getLook` / `setSky` / `setFog` / `setFogColor` / `reset` /
+`getTiltLayers` / `setTiltLayers` / `toggleTiltLayer` / `getDrawDistance` / `setDrawDistance` /
+`isCaptureFrameVisible` / `setCaptureFrameVisible` / `toggleCaptureFrame` / `getCaptureRect` / `onChange`。
+
+## スコープ外（v2 送り）
+
+3D 中の編集（perspective 逆投影して `screenToWorld` を補正）／WebGPU 真3D／Shape の billboard 立て起こし／
+視差・霧・地平線もやの高度化／minimap の3Dプレビュー。

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { CAMERA_LIMITS, type Camera, DEFAULT_CAMERA, } from "./mode7-camera.js";
+export { getMode7Api, type Mode7Api, mode7Service } from "./mode7-service.js";
+export type { Look } from "./mode7-store.js";
+export { drawDistanceClip, drawDistanceOverscanPx, fogBackground, skyBackground, type TiltTransform, tiltTransform, } from "./mode7-transform.js";
+export { createMode7Plugin, type Mode7PluginOptions } from "./plugin.js";
+export type { Mode7ActionKey, Mode7Shortcuts, } from "./register-mode7-actions.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EACb,KAAK,MAAM,EACX,cAAc,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAE,KAAK,QAAQ,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC9E,YAAY,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACN,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,aAAa,EACb,KAAK,aAAa,EAClB,aAAa,GACb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,aAAa,CAAC;AACzE,YAAY,EACX,cAAc,EACd,cAAc,GACd,MAAM,6BAA6B,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { CAMERA_LIMITS, DEFAULT_CAMERA, } from "./mode7-camera.js";
+export { getMode7Api, mode7Service } from "./mode7-service.js";
+export { drawDistanceClip, drawDistanceOverscanPx, fogBackground, skyBackground, tiltTransform, } from "./mode7-transform.js";
+export { createMode7Plugin } from "./plugin.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACN,aAAa,EAEb,cAAc,GACd,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,WAAW,EAAiB,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAE9E,OAAO,EACN,gBAAgB,EAChB,sBAAsB,EACtB,aAAa,EACb,aAAa,EAEb,aAAa,GACb,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,iBAAiB,EAA2B,MAAM,aAAa,CAAC"}

package/dist/mode7-camera.d.ts

@@ -0,0 +1,32 @@
+export interface Camera {
+    pitch: number;
+    yaw: number;
+    fov: number;
+    horizon: number;
+}
+/** Allowed ranges. pitch stays < 90 so the plane never goes fully edge-on
+ *  (which would collapse to a line); horizon stays off the very edges. */
+export declare const CAMERA_LIMITS: {
+    readonly pitch: {
+        readonly min: 0;
+        readonly max: 85;
+    };
+    readonly fov: {
+        readonly min: 200;
+        readonly max: 2000;
+    };
+    readonly horizon: {
+        readonly min: 0.1;
+        readonly max: 0.9;
+    };
+};
+export declare const DEFAULT_CAMERA: Camera;
+/** Wrap a degree value into (-180, 180]. */
+export declare function wrapDeg(deg: number): number;
+/** Clamp every field to its valid range (pitch/fov/horizon clamped, yaw wrapped). */
+export declare function clampCamera(c: Camera): Camera;
+/** Apply a partial change and re-clamp. Non-finite inputs fall back to limits. */
+export declare function updateCamera(c: Camera, patch: Partial<Camera>): Camera;
+/** Nudge fields by deltas (e.g. from keyboard actions) and re-clamp. */
+export declare function adjustCamera(c: Camera, delta: Partial<Camera>): Camera;
+//# sourceMappingURL=mode7-camera.d.ts.map

package/dist/mode7-camera.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode7-camera.d.ts","sourceRoot":"","sources":["../src/mode7-camera.ts"],"names":[],"mappings":"AAUA,MAAM,WAAW,MAAM;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;CAChB;AAED;0EAC0E;AAC1E,eAAO,MAAM,aAAa;aACzB,KAAK;iBAAI,GAAG,EAAE,CAAC;iBAAE,GAAG,EAAE,EAAE;;aACxB,GAAG;iBAAI,GAAG,EAAE,GAAG;iBAAE,GAAG,EAAE,IAAI;;aAC1B,OAAO;iBAAI,GAAG,EAAE,GAAG;iBAAE,GAAG,EAAE,GAAG;;CACpB,CAAC;AAEX,eAAO,MAAM,cAAc,EAAE,MAAuD,CAAC;AAOrF,4CAA4C;AAC5C,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAM3C;AAED,qFAAqF;AACrF,wBAAgB,WAAW,CAAC,CAAC,EAAE,MAAM,GAAG,MAAM,CAO7C;AAED,kFAAkF;AAClF,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAEtE;AAED,wEAAwE;AACxE,wBAAgB,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,MAAM,CAOtE"}

package/dist/mode7-camera.js

@@ -0,0 +1,56 @@
+// Pure, React-free camera model for the Mode 7 view (so the runtime, service, HUD,
+// and unit tests import it without pulling in React). The camera is GEOMETRY only —
+// it describes how the flat board plane is tilted into a receding ground plane:
+//   - pitch   … ground tilt in degrees (0 = flat top-down, higher = more oblique)
+//   - yaw     … heading rotation in degrees (spin the ground around the view axis)
+//   - fov     … CSS `perspective()` distance in px (smaller = stronger perspective)
+//   - horizon … pivot line as a fraction of viewport height (0=top … 1=bottom);
+//               where the ground meets the sky after the tilt.
+// Appearance (sky color, fog) is separate — see `mode7-transform.ts`.
+/** Allowed ranges. pitch stays < 90 so the plane never goes fully edge-on
+ *  (which would collapse to a line); horizon stays off the very edges. */
+export const CAMERA_LIMITS = {
+    pitch: { min: 0, max: 85 },
+    fov: { min: 200, max: 2000 },
+    horizon: { min: 0.1, max: 0.9 },
+};
+export const DEFAULT_CAMERA = { pitch: 55, yaw: 0, fov: 600, horizon: 0.45 };
+function clamp(v, min, max) {
+    if (!Number.isFinite(v))
+        return min;
+    return Math.min(max, Math.max(min, v));
+}
+/** Wrap a degree value into (-180, 180]. */
+export function wrapDeg(deg) {
+    if (!Number.isFinite(deg))
+        return 0;
+    let d = deg % 360;
+    if (d > 180)
+        d -= 360;
+    if (d <= -180)
+        d += 360;
+    return d;
+}
+/** Clamp every field to its valid range (pitch/fov/horizon clamped, yaw wrapped). */
+export function clampCamera(c) {
+    return {
+        pitch: clamp(c.pitch, CAMERA_LIMITS.pitch.min, CAMERA_LIMITS.pitch.max),
+        yaw: wrapDeg(c.yaw),
+        fov: clamp(c.fov, CAMERA_LIMITS.fov.min, CAMERA_LIMITS.fov.max),
+        horizon: clamp(c.horizon, CAMERA_LIMITS.horizon.min, CAMERA_LIMITS.horizon.max),
+    };
+}
+/** Apply a partial change and re-clamp. Non-finite inputs fall back to limits. */
+export function updateCamera(c, patch) {
+    return clampCamera({ ...c, ...patch });
+}
+/** Nudge fields by deltas (e.g. from keyboard actions) and re-clamp. */
+export function adjustCamera(c, delta) {
+    return clampCamera({
+        pitch: c.pitch + (delta.pitch ?? 0),
+        yaw: c.yaw + (delta.yaw ?? 0),
+        fov: c.fov + (delta.fov ?? 0),
+        horizon: c.horizon + (delta.horizon ?? 0),
+    });
+}
+//# sourceMappingURL=mode7-camera.js.map

package/dist/mode7-camera.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode7-camera.js","sourceRoot":"","sources":["../src/mode7-camera.ts"],"names":[],"mappings":"AAAA,mFAAmF;AACnF,oFAAoF;AACpF,gFAAgF;AAChF,kFAAkF;AAClF,mFAAmF;AACnF,oFAAoF;AACpF,gFAAgF;AAChF,+DAA+D;AAC/D,sEAAsE;AAStE;0EAC0E;AAC1E,MAAM,CAAC,MAAM,aAAa,GAAG;IAC5B,KAAK,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1B,GAAG,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE;IAC5B,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;CACtB,CAAC;AAEX,MAAM,CAAC,MAAM,cAAc,GAAW,EAAE,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;AAErF,SAAS,KAAK,CAAC,CAAS,EAAE,GAAW,EAAE,GAAW;IACjD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC;QAAE,OAAO,GAAG,CAAC;IACpC,OAAO,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACxC,CAAC;AAED,4CAA4C;AAC5C,MAAM,UAAU,OAAO,CAAC,GAAW;IAClC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,OAAO,CAAC,CAAC;IACpC,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC;IAClB,IAAI,CAAC,GAAG,GAAG;QAAE,CAAC,IAAI,GAAG,CAAC;IACtB,IAAI,CAAC,IAAI,CAAC,GAAG;QAAE,CAAC,IAAI,GAAG,CAAC;IACxB,OAAO,CAAC,CAAC;AACV,CAAC;AAED,qFAAqF;AACrF,MAAM,UAAU,WAAW,CAAC,CAAS;IACpC,OAAO;QACN,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC;QACvE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC;QACnB,GAAG,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC;QAC/D,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,EAAE,aAAa,CAAC,OAAO,CAAC,GAAG,CAAC;KAC/E,CAAC;AACH,CAAC;AAED,kFAAkF;AAClF,MAAM,UAAU,YAAY,CAAC,CAAS,EAAE,KAAsB;IAC7D,OAAO,WAAW,CAAC,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC;AACxC,CAAC;AAED,wEAAwE;AACxE,MAAM,UAAU,YAAY,CAAC,CAAS,EAAE,KAAsB;IAC7D,OAAO,WAAW,CAAC;QAClB,KAAK,EAAE,CAAC,CAAC,KAAK,GAAG,CAAC,KAAK,CAAC,KAAK,IAAI,CAAC,CAAC;QACnC,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAC7B,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,CAAC;QAC7B,OAAO,EAAE,CAAC,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,OAAO,IAAI,CAAC,CAAC;KACzC,CAAC,CAAC;AACJ,CAAC"}

package/dist/mode7-layers.d.ts

@@ -0,0 +1,45 @@
+import type { PluginContext } from "@edv4h/usketch-shared";
+import type { Mode7Store } from "./mode7-store.js";
+export declare function SkyLayer({ store }: {
+    store: Mode7Store;
+}): import("react").JSX.Element | null;
+/**
+ * The "capture frame": a fixed, world-anchored rectangle marking the region the 3D
+ * ground plane covered at the last switch-on. Shown only in FLAT mode (so it never
+ * fights the tilt) when the HUD toggle is on — it lets the user see which shapes fall
+ * inside the captured region vs. outside (outside = won't appear in the initial 3D
+ * view). It is a NON-tilted, non-fixed layer, so the viewport transform anchors it to
+ * world space; `zoom` (from the layer render ctx) keeps the border ~constant on screen.
+ */
+export declare function CaptureFrameLayer({ store, zoom }: {
+    store: Mode7Store;
+    zoom: number;
+}): import("react").JSX.Element | null;
+export declare function FogLayer({ store }: {
+    store: Mode7Store;
+}): import("react").JSX.Element | null;
+/**
+ * A live checklist (contributed as a HUD panel) of the board's layers, letting the
+ * user pick which ones render in 3D — e.g. tick the Shape layer(s). Reads the layer
+ * list from `ctx.layers.getLayers()` at render (re-rendered on any store change) and
+ * excludes the control surfaces that must never tilt (HUD + the plugin's overlays).
+ */
+export declare function LayerPicker({ ctx, store, excluded, }: {
+    ctx: PluginContext;
+    store: Mode7Store;
+    excluded: readonly string[];
+}): import("react").JSX.Element;
+export interface CaptureHandlers {
+    /** Drag delta in screen px (content-follows-cursor). */
+    onPan(dx: number, dy: number): void;
+    /** Wheel zoom: raw deltaY and the zoom center in container-local px. */
+    onZoom(deltaY: number, center: {
+        x: number;
+        y: number;
+    }): void;
+}
+export declare function CaptureLayer({ store, handlers, }: {
+    store: Mode7Store;
+    handlers: CaptureHandlers;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=mode7-layers.d.ts.map

package/dist/mode7-layers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode7-layers.d.ts","sourceRoot":"","sources":["../src/mode7-layers.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAiBnD,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,sCAaxD;AAED;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,sCAmBrF;AAED,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,CAAA;CAAE,sCAaxD;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,EAC3B,GAAG,EACH,KAAK,EACL,QAAQ,GACR,EAAE;IACF,GAAG,EAAE,aAAa,CAAC;IACnB,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,SAAS,MAAM,EAAE,CAAC;CAC5B,+BAwCA;AAED,MAAM,WAAW,eAAe;IAC/B,wDAAwD;IACxD,KAAK,CAAC,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,GAAG,IAAI,CAAC;IACpC,wEAAwE;IACxE,MAAM,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,GAAG,IAAI,CAAC;CAC/D;AAED,wBAAgB,YAAY,CAAC,EAC5B,KAAK,EACL,QAAQ,GACR,EAAE;IACF,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,eAAe,CAAC;CAC1B,sCAoCA"}

package/dist/mode7-layers.js

@@ -0,0 +1,112 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useSyncExternalStore } from "react";
+import { fogBackground, fogOpacity, skyBackground } from "./mode7-transform.js";
+function useMode7(store) {
+    return useSyncExternalStore(store.subscribe, store.getState, store.getState);
+}
+/** Center of a pointer/wheel event relative to the layer box (== canvas container,
+ *  since the layer is inset:0 and untilted) — the space the store's viewport uses. */
+function localCenter(e) {
+    const r = e.currentTarget.getBoundingClientRect();
+    return { x: e.clientX - r.left, y: e.clientY - r.top };
+}
+export function SkyLayer({ store }) {
+    const { active, camera, look } = useMode7(store);
+    if (!active)
+        return null;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            background: skyBackground(look.sky, camera.horizon),
+        } }));
+}
+/**
+ * The "capture frame": a fixed, world-anchored rectangle marking the region the 3D
+ * ground plane covered at the last switch-on. Shown only in FLAT mode (so it never
+ * fights the tilt) when the HUD toggle is on — it lets the user see which shapes fall
+ * inside the captured region vs. outside (outside = won't appear in the initial 3D
+ * view). It is a NON-tilted, non-fixed layer, so the viewport transform anchors it to
+ * world space; `zoom` (from the layer render ctx) keeps the border ~constant on screen.
+ */
+export function CaptureFrameLayer({ store, zoom }) {
+    const { active, showCaptureFrame, captureRect } = useMode7(store);
+    if (active || !showCaptureFrame || !captureRect)
+        return null;
+    const border = 2 / (zoom || 1); // world px → ~2 screen px under the viewport scale
+    return (_jsx("div", { style: {
+            position: "absolute",
+            left: captureRect.x,
+            top: captureRect.y,
+            width: captureRect.width,
+            height: captureRect.height,
+            boxSizing: "border-box",
+            border: `${border}px dashed rgba(80, 140, 255, 0.9)`,
+            background: "rgba(80, 140, 255, 0.06)",
+            pointerEvents: "none",
+        } }));
+}
+export function FogLayer({ store }) {
+    const { active, camera, look } = useMode7(store);
+    if (!active || fogOpacity(look.fog) <= 0)
+        return null;
+    return (_jsx("div", { style: {
+            position: "absolute",
+            inset: 0,
+            pointerEvents: "none",
+            background: fogBackground(look.fogColor, look.fog, camera.horizon),
+        } }));
+}
+/**
+ * A live checklist (contributed as a HUD panel) of the board's layers, letting the
+ * user pick which ones render in 3D — e.g. tick the Shape layer(s). Reads the layer
+ * list from `ctx.layers.getLayers()` at render (re-rendered on any store change) and
+ * excludes the control surfaces that must never tilt (HUD + the plugin's overlays).
+ */
+export function LayerPicker({ ctx, store, excluded, }) {
+    const state = useMode7(store);
+    const selected = new Set(state.tiltLayers);
+    const excludedSet = new Set(excluded);
+    const layers = ctx.layers
+        .getLayers()
+        .filter((l) => !excludedSet.has(l.id))
+        .slice()
+        .sort((a, b) => a.order - b.order);
+    return (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 4, opacity: state.active ? 1 : 0.55 }, children: [_jsx("div", { style: { fontSize: 11, color: "var(--fg-tertiary, #888)" }, children: "3D \u306B\u3059\u308B\u30EC\u30A4\u30E4\u30FC" }), layers.length === 0 ? (_jsx("div", { style: { fontSize: 11, color: "var(--fg-tertiary, #888)" }, children: "\u30EC\u30A4\u30E4\u30FC\u304C\u3042\u308A\u307E\u305B\u3093" })) : (layers.map((l) => (_jsxs("label", { style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 6,
+                    fontSize: 12,
+                    cursor: "pointer",
+                }, children: [_jsx("input", { type: "checkbox", checked: selected.has(l.id), onChange: () => store.toggleTiltLayer(l.id) }), _jsx("span", { children: l.id })] }, l.id))))] }));
+}
+export function CaptureLayer({ store, handlers, }) {
+    const { active } = useMode7(store);
+    const drag = useRef(null);
+    if (!active)
+        return null;
+    const end = (e) => {
+        e.stopPropagation();
+        drag.current = null;
+    };
+    return (_jsx("div", { 
+        // Full-viewport capture surface. `stopPropagation` keeps the container's
+        // tool handlers (draw/select) from firing — editing is suspended in this view.
+        style: { position: "absolute", inset: 0, cursor: "grab", touchAction: "none" }, onPointerDown: (e) => {
+            e.stopPropagation();
+            e.currentTarget.setPointerCapture?.(e.pointerId);
+            drag.current = { x: e.clientX, y: e.clientY };
+        }, onPointerMove: (e) => {
+            if (!drag.current)
+                return;
+            e.stopPropagation();
+            const dx = e.clientX - drag.current.x;
+            const dy = e.clientY - drag.current.y;
+            drag.current = { x: e.clientX, y: e.clientY };
+            handlers.onPan(dx, dy);
+        }, onPointerUp: end, onPointerCancel: end, onWheel: (e) => {
+            e.stopPropagation();
+            handlers.onZoom(e.deltaY, localCenter(e));
+        } }));
+}
+//# sourceMappingURL=mode7-layers.js.map

package/dist/mode7-layers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode7-layers.js","sourceRoot":"","sources":["../src/mode7-layers.tsx"],"names":[],"mappings":"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"}

package/dist/mode7-runtime.d.ts

@@ -0,0 +1,14 @@
+import type { PluginContext } from "@edv4h/usketch-shared";
+import type { Mode7Store } from "./mode7-store.js";
+/** The plugin's own layer ids (never tilted). */
+export declare const SKY_LAYER_ID = "mode7-sky";
+export declare const FOG_LAYER_ID = "mode7-fog";
+export declare const CAPTURE_LAYER_ID = "mode7-capture";
+export declare const CAPTURE_FRAME_LAYER_ID = "mode7-capture-frame";
+/**
+ * Wire the runtime to a store. The set of tilted layers is read live from the
+ * store (user-selectable via the HUD). Returns a teardown that clears every
+ * injected transform, unregisters the overlay layers, and drops all listeners.
+ */
+export declare function setupMode7Runtime(ctx: PluginContext, store: Mode7Store): () => void;
+//# sourceMappingURL=mode7-runtime.d.ts.map

package/dist/mode7-runtime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mode7-runtime.d.ts","sourceRoot":"","sources":["../src/mode7-runtime.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,EAAe,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAGnD,iDAAiD;AACjD,eAAO,MAAM,YAAY,cAAc,CAAC;AACxC,eAAO,MAAM,YAAY,cAAc,CAAC;AACxC,eAAO,MAAM,gBAAgB,kBAAkB,CAAC;AAChD,eAAO,MAAM,sBAAsB,wBAAwB,CAAC;AAoC5D;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,aAAa,EAAE,KAAK,EAAE,UAAU,GAAG,MAAM,IAAI,CA8KnF"}

package/dist/mode7-runtime.js

@@ -0,0 +1,220 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CaptureFrameLayer, CaptureLayer, FogLayer, SkyLayer } from "./mode7-layers.js";
+import { drawDistanceClip, drawDistanceOverscanPx, tiltTransform } from "./mode7-transform.js";
+/** The plugin's own layer ids (never tilted). */
+export const SKY_LAYER_ID = "mode7-sky";
+export const FOG_LAYER_ID = "mode7-fog";
+export const CAPTURE_LAYER_ID = "mode7-capture";
+export const CAPTURE_FRAME_LAYER_ID = "mode7-capture-frame";
+/** Wheel-zoom sensitivity (matches viewport-nav's deltaY-proportional feel). */
+const WHEEL_ZOOM = 0.0015;
+/** Extra px added to the grid overscan so it comfortably covers the clip line (rounding). */
+const OVERSCAN_BUFFER = 16;
+/**
+ * The main canvas container: the element that directly wraps the board's layer
+ * divs. We locate it via `[data-layer-id]` (every layer wrapper is a direct child
+ * of the container) rather than `data-testid="canvas-container"` — `data-testid` is
+ * a test-only hook that the production/app build strips out, so it is absent in the
+ * running app and the old selector silently matched nothing (the tilt never applied).
+ * If several containers exist (e.g. a minimap that also renders layers), the largest
+ * by area wins.
+ */
+function mainContainer() {
+    if (typeof document === "undefined")
+        return null;
+    let best = null;
+    let bestArea = 0;
+    const seen = new Set();
+    for (const el of document.querySelectorAll("[data-layer-id]")) {
+        const parent = el.parentElement;
+        if (!parent || seen.has(parent))
+            continue;
+        seen.add(parent);
+        const r = parent.getBoundingClientRect();
+        const area = r.width * r.height;
+        if (area > bestArea) {
+            bestArea = area;
+            best = parent;
+        }
+    }
+    return best;
+}
+/**
+ * Wire the runtime to a store. The set of tilted layers is read live from the
+ * store (user-selectable via the HUD). Returns a teardown that clears every
+ * injected transform, unregisters the overlay layers, and drops all listeners.
+ */
+export function setupMode7Runtime(ctx, store) {
+    const STAGE_ATTR = "data-mode7-stage";
+    let styleEl = null;
+    const ensureStyleEl = () => {
+        if (styleEl || typeof document === "undefined")
+            return;
+        styleEl = document.createElement("style");
+        styleEl.setAttribute("data-mode7", "");
+        document.head.appendChild(styleEl);
+    };
+    /** Keep an attribute-selector value valid (layer ids are simple, but be safe). */
+    const attrValue = (id) => id.replace(/["\\]/g, "");
+    // Drive the background grid's overscan (only re-emit on change) so it extends past the
+    // viewport to stay under the far content a large draw distance reveals. No package
+    // dependency on bg-grid — a plain event it listens for (a no-op if bg-grid is absent).
+    let lastOverscan = -1;
+    const driveGridOverscan = (px) => {
+        if (px === lastOverscan)
+            return;
+        lastOverscan = px;
+        ctx.events.emit("bg-grid:set-overscan", { px });
+    };
+    const applyTilt = () => {
+        const container = mainContainer();
+        if (!container)
+            return;
+        container.setAttribute(STAGE_ATTR, "on");
+        ensureStyleEl();
+        if (!styleEl)
+            return;
+        const { camera, drawDistance } = store.getState();
+        const { transform, transformOrigin } = tiltTransform(camera);
+        // Clip each tilted wrapper (so overflow:visible doesn't float content past the
+        // grid); a finite draw distance tightens the top, one beyond the viewport lets it
+        // extend (negative inset) with the grid overscanned to match. Distance is canvas
+        // units → maps to px via zoom + container height, so this re-runs on viewport (zoom)
+        // changes. clip-path keeps the tilt (overflow flattens).
+        const zoom = ctx.store.getViewport().zoom;
+        const heightPx = container.getBoundingClientRect().height;
+        const clip = drawDistanceClip(drawDistance, zoom, heightPx);
+        const overscan = drawDistanceOverscanPx(drawDistance, zoom, heightPx);
+        driveGridOverscan(overscan > 0 ? overscan + OVERSCAN_BUFFER : 0);
+        const clipRule = `clip-path:${clip} !important;`;
+        // `overflow:visible` + `transform-style:preserve-3d` are essential for layers
+        // like `dom-shapes`: their wrapper has `overflow:hidden` (which the CSS spec
+        // forces `transform-style` to `flat`) and an inner viewport-transform div that
+        // Chrome composites separately — so without these the SHAPES render flat in
+        // screen space while only the wrapper tilts. Overriding overflow keeps the
+        // whole subtree in the 3D context; the canvas container still clips.
+        // A DESCENDANT selector (space, not `>`) matches the wrapper regardless of nesting.
+        const layerRules = store
+            .getState()
+            .tiltLayers.map((id) => `[${STAGE_ATTR}="on"] [data-layer-id="${attrValue(id)}"]{transform:${transform} !important;transform-origin:${transformOrigin} !important;overflow:visible !important;transform-style:preserve-3d !important;${clipRule}}`)
+            .join("");
+        styleEl.textContent = layerRules;
+    };
+    const clearAll = () => {
+        if (styleEl)
+            styleEl.textContent = "";
+        if (typeof document !== "undefined") {
+            for (const el of document.querySelectorAll(`[${STAGE_ATTR}]`))
+                el.removeAttribute(STAGE_ATTR);
+        }
+        driveGridOverscan(0); // restore the grid to the viewport when the view is off
+    };
+    /**
+     * The current viewport as a WORLD rectangle (== `LayerRenderContext.viewportBounds`,
+     * recomputed here because the runtime has no render ctx): screen box [0,0,W,H]
+     * inverted through the affine viewport (`world = (screen - vp) / zoom`).
+     */
+    const viewportWorldRect = () => {
+        const c = mainContainer();
+        if (!c)
+            return null;
+        const r = c.getBoundingClientRect();
+        const vp = ctx.store.getViewport();
+        if (!vp.zoom || r.width <= 0 || r.height <= 0)
+            return null;
+        return {
+            x: -vp.x / vp.zoom,
+            y: -vp.y / vp.zoom,
+            width: r.width / vp.zoom,
+            height: r.height / vp.zoom,
+        };
+    };
+    // Snapshot the capture rect when the view is switched ON (the frame then shows
+    // "what the 3D ground covered" back in flat mode), and seed it the first time the
+    // overlay is switched on with nothing captured yet.
+    let prevActive = false;
+    const maybeCapture = () => {
+        const st = store.getState();
+        const rising = st.active && !prevActive;
+        // Update the edge tracker BEFORE setCaptureRect — it notifies synchronously and
+        // re-enters sync()/maybeCapture(), so a stale `prevActive` would loop forever.
+        prevActive = st.active;
+        if (rising || (st.showCaptureFrame && !st.captureRect)) {
+            const rect = viewportWorldRect();
+            if (rect)
+                store.setCaptureRect(rect);
+        }
+    };
+    const sync = () => {
+        if (store.getState().active)
+            applyTilt();
+        else
+            clearAll();
+        maybeCapture();
+    };
+    // Camera drive from the capture layer (reuse the affine viewport).
+    const handlers = {
+        onPan: (dx, dy) => ctx.store.panBy(dx, dy),
+        onZoom: (deltaY, center) => {
+            const factor = Math.exp(-deltaY * WHEEL_ZOOM);
+            ctx.store.zoomTo(ctx.store.getViewport().zoom * factor, center);
+        },
+    };
+    // Register the three overlay layers once; they self-hide when inactive.
+    ctx.layers.register({
+        id: SKY_LAYER_ID,
+        order: 1,
+        fixed: true,
+        render: () => _jsx(SkyLayer, { store: store }),
+    });
+    ctx.layers.register({
+        id: FOG_LAYER_ID,
+        order: 9000,
+        fixed: true,
+        render: () => _jsx(FogLayer, { store: store }),
+    });
+    ctx.layers.register({
+        id: CAPTURE_LAYER_ID,
+        order: 9500,
+        fixed: true,
+        render: () => _jsx(CaptureLayer, { store: store, handlers: handlers }),
+    });
+    // The capture-frame overlay is NON-fixed (world-anchored via the viewport
+    // transform) so it pans/zooms with the board; it self-hides unless flat + toggled.
+    ctx.layers.register({
+        id: CAPTURE_FRAME_LAYER_ID,
+        order: 8000,
+        render: (rc) => _jsx(CaptureFrameLayer, { store: store, zoom: rc.viewport.zoom }),
+    });
+    // Re-sync on active / camera / tilt-layer changes.
+    const unsubscribe = store.subscribe(sync);
+    // The draw-distance clip is in canvas units → depends on the board zoom + container
+    // height, so re-apply the tilt on viewport changes and window resize while active.
+    const reapplyIfActive = () => {
+        if (store.getState().active)
+            applyTilt();
+    };
+    const offViewport = ctx.store.onMutation((e) => {
+        if (e.type === "viewport:changed")
+            reapplyIfActive();
+    });
+    const onResize = typeof window !== "undefined" ? reapplyIfActive : null;
+    if (onResize)
+        window.addEventListener("resize", onResize);
+    // Initial apply (honors enabledInitially).
+    sync();
+    return () => {
+        clearAll();
+        styleEl?.remove();
+        styleEl = null;
+        unsubscribe();
+        offViewport();
+        if (onResize)
+            window.removeEventListener("resize", onResize);
+        ctx.layers.unregister(SKY_LAYER_ID);
+        ctx.layers.unregister(FOG_LAYER_ID);
+        ctx.layers.unregister(CAPTURE_LAYER_ID);
+        ctx.layers.unregister(CAPTURE_FRAME_LAYER_ID);
+    };
+}
+//# sourceMappingURL=mode7-runtime.js.map