akari-video 1.2.0-beta.5 → 1.3.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akari-video",
-  "version": "1.2.0-beta.5",
+  "version": "1.3.0-beta.1",
   "description": "AKARI Video launcher CLI — start an AI-edited video project from any directory: scaffold, connection check, then hand over to Claude Code (or opencode). AKARI Video を opencode や Claude Code で、どのディレクトリからでも始めるための `akari` ランチャー CLI。接続確認（doctor）→ 未セットアップならプロジェクト雛形を作成 → AI エージェントを起動する。外部 npm 依存ゼロ（Node.js 組み込みモジュールのみ）。",
   "type": "module",
   "bin": {

package/src/kits.mjs

@@ -8,6 +8,7 @@ import {
 import path from 'node:path';
 
 import { resolveLauncherAssets } from './repo-assets.mjs';
+import { compareVersions } from './version.mjs';
 const creatorRootModulePath = resolveLauncherAssets().creatorRootModulePath;
 const creatorRoot = creatorRootModulePath ? await import(pathToFileURL(creatorRootModulePath).href) : null;
 function resolveAssetLibraryRoots(env) {
@@ -20,15 +21,11 @@ const INSTALLED_ASSETS_SCHEMA = 'akari-installed-assets/v0';
 const PLUGIN_DESCRIPTION = 'AKARI Video 拡張キットのスキルをまとめて提供するローカルプラグイン。';
 
 function parseVersion(value) {
-  const match = String(value).match(/^(\d+)\.(\d+)\.(\d+)$/u);
-  return match ? match.slice(1).map(Number) : null;
-}
-
-function compareVersions(left, right) {
-  for (let index = 0; index < 3; index += 1) {
-    if (left[index] !== right[index]) return left[index] - right[index];
-  }
-  return 0;
+  const match = typeof value === 'string'
+    ? value.match(/^(0|[1-9]\d*)\.(0|[1-9]\d*)\.(0|[1-9]\d*)(?:-([0-9A-Za-z-]+(?:\.[0-9A-Za-z-]+)*))?(?:\+[0-9A-Za-z.-]+)?$/u)
+    : null;
+  if (!match || match[4]?.split('.').some(id => /^0\d+$/u.test(id))) return null;
+  return match.slice(1, 4).map(Number);
 }
 
 function satisfies(version, range) {
@@ -36,13 +33,14 @@ function satisfies(version, range) {
   const match = String(range).match(/^(\^|~|>=)?(\d+\.\d+\.\d+)$/u);
   if (!actual || !match) return false;
   const required = parseVersion(match[2]);
-  if (compareVersions(actual, required) < 0) return false;
+  if (!required) return false;
+  if (compareVersions(version, match[2]) < 0) return false;
   if (match[1] === '^') {
     return actual[0] === required[0] && (required[0] !== 0 || actual[1] === required[1]);
   }
   if (match[1] === '~') return actual[0] === required[0] && actual[1] === required[1];
   if (match[1] === '>=') return true;
-  return compareVersions(actual, required) === 0;
+  return compareVersions(version, match[2]) === 0;
 }
 
 export function readKitManifest(kitDir) {

package/src/vendor-sources.mjs

@@ -14,6 +14,8 @@ export const VENDOR_SOURCES = [
   'presets/textanim',
   'assets/font/noto-sans-jp/NotoSansJP-Variable.ttf',
   'packages/schemas',
+  // schemas の frame-scene 検証器が参照する schema 定義だけを同梱する。
+  'packages/frame-scene/src/schema.mjs',
   // schemas の asset / kit 検証は runtimes.mjs を実行し、runtime 宣言は src の
   // レジストリ・ブラウザスクリプトと既定フォントをファイルとして読み込む。
   'packages/overlay-runtime/runtimes.mjs',

package/vendor/packages/akari-launcher/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akari-video",
-  "version": "1.2.0-beta.5",
+  "version": "1.3.0-beta.1",
   "description": "AKARI Video launcher CLI — start an AI-edited video project from any directory: scaffold, connection check, then hand over to Claude Code (or opencode). AKARI Video を opencode や Claude Code で、どのディレクトリからでも始めるための `akari` ランチャー CLI。接続確認（doctor）→ 未セットアップならプロジェクト雛形を作成 → AI エージェントを起動する。外部 npm 依存ゼロ（Node.js 組み込みモジュールのみ）。 [akari-video npm vendor: bin/akari.mjs is reference-only. These CLI entrypoints are not included in the akari-video npm package. Use `akari doctor --json` and run the path reported in `render_cut.path`. Full installations provide it in a monorepo checkout, ~/.akari/app, /Applications/AKARI Video.app/Contents/Resources/packages, or %LOCALAPPDATA%\\Programs\\@akari-videoshell\\resources\\packages.]",
   "type": "module",
   "files": [

package/vendor/packages/frame-scene/src/schema.mjs

@@ -0,0 +1,102 @@
+import Ajv2020 from 'ajv/dist/2020.js';
+import schema from '../../schemas/frame-scene.schema.json' with { type: 'json' };
+
+const ajv = new Ajv2020({ allErrors: true, strict: false });
+const check = ajv.compile(schema);
+const JOINTS = new Set('hips spine chest neck head leftUpperArm leftLowerArm leftHand rightUpperArm rightLowerArm rightHand leftUpperLeg leftLowerLeg leftFoot rightUpperLeg rightLowerLeg rightFoot'.split(' '));
+const known = {
+  '': schema.properties, '/world': schema.$defs.world.properties,
+  '/objects/*': schema.$defs.object.properties, '/scenes/*': schema.$defs.scene.properties,
+  '/scenes/*/camera': schema.$defs.camera.properties, '/scenes/*/camera_to': schema.$defs.camera.properties,
+  '/scenes/*/world': schema.$defs.world.properties,
+  '/scenes/*/set/*': schema.$defs.setObject.properties,
+  '/scenes/*/annotations/*': schema.$defs.annotation.properties,
+  '/scenes/*/annotations/*/anchor': schema.$defs.annotation.properties.anchor.properties,
+  '/objects/*/pose': schema.$defs.pose.oneOf[1].properties,
+  '/scenes/*/set/*/pose': schema.$defs.pose.oneOf[1].properties,
+  '/objects/*/pose/joints/*': { x: true, y: true, z: true },
+  '/scenes/*/set/*/pose/joints/*': { x: true, y: true, z: true },
+  '/objects/*/screen': schema.$defs.object.properties.screen.properties,
+  '/scenes/*/set/*/screen': schema.$defs.object.properties.screen.properties
+};
+const ptr = (base, key) => `${base}/${String(key).replaceAll('~', '~0').replaceAll('/', '~1')}`;
+const issue = (code, path, message) => ({ code, path, message });
+
+export function validateFrameScene(doc, { strict = false, fileBytes } = {}) {
+  const errors = [], warnings = [];
+  if (doc && typeof doc === 'object' && Number.isInteger(doc.version) && doc.version > 0) {
+    return { ok: false, errors: [issue('unsupported_version', '/version', `version ${doc.version} is unsupported`)], warnings };
+  }
+  if ((fileBytes ?? Buffer.byteLength(JSON.stringify(doc) ?? '')) > 512 * 1024) warnings.push(issue('limit.file', '', 'file exceeds 512KB'));
+  if (!check(doc)) for (const e of check.errors ?? []) {
+    const path = e.keyword === 'required' ? ptr(e.instancePath, e.params.missingProperty) : e.instancePath;
+    errors.push(issue(e.keyword === 'minItems' && e.instancePath === '/scenes' ? 'scene.empty' : `schema.${e.keyword.toLowerCase()}`, path, e.message ?? e.keyword));
+  }
+  if (!doc || typeof doc !== 'object' || Array.isArray(doc)) return { ok: false, errors, warnings };
+  const objects = Array.isArray(doc.objects) ? doc.objects : [];
+  const scenes = Array.isArray(doc.scenes) ? doc.scenes : [];
+  if (objects.length > 200) warnings.push(issue('limit.objects', '/objects', 'objects exceeds 200'));
+  if (scenes.length > 50) warnings.push(issue('limit.scenes', '/scenes', 'scenes exceeds 50'));
+  const ids = new Set(), sceneIds = new Set();
+  const ref = (value, path, code = 'object.reference.unresolved') => {
+    if (typeof value === 'string' && !ids.has(value)) errors.push(issue(code, path, `unknown object ${value}`));
+  };
+  for (const [i, o] of objects.entries()) {
+    if (!o || typeof o !== 'object') continue;
+    const p = `/objects/${i}`;
+    if (typeof o.id === 'string') {
+      if (!/^[a-z0-9_-]+$/.test(o.id)) errors.push(issue('object.id.invalid', `${p}/id`, 'id must use [a-z0-9_-]'));
+      if (ids.has(o.id)) errors.push(issue('object.id.duplicate', `${p}/id`, 'duplicate object id'));
+      ids.add(o.id);
+    }
+  }
+  function inspectObject(o, p) {
+    if (!o || typeof o !== 'object') return;
+    if (o.facing !== undefined && (o.ry !== undefined || o.rot !== undefined)) errors.push(issue('object.rotation.exclusive', p, 'facing and ry/rot are exclusive'));
+    if (o.ry !== undefined && o.rot !== undefined) errors.push(issue('object.rotation.exclusive', p, 'ry and rot are exclusive'));
+    if (o.h !== undefined && o.scale !== undefined) errors.push(issue('object.size.exclusive', p, 'h and scale are exclusive'));
+    if (o.pose !== undefined && o.kind !== 'human') errors.push(issue('pose.kind.invalid', `${p}/pose`, 'pose requires human'));
+    if (o.on !== undefined) ref(o.on, `${p}/on`, 'on.unresolved');
+    if (typeof o.facing === 'string' && o.facing !== 'camera') ref(o.facing, `${p}/facing`, 'facing.unresolved');
+    if (o.screen_of !== undefined) ref(o.screen_of, `${p}/screen_of`);
+    const pose = o.pose;
+    if (pose && typeof pose === 'object' && !Array.isArray(pose)) {
+      for (const joint of Object.keys(pose.joints ?? {})) if (!JOINTS.has(joint)) warnings.push(issue('pose.joint.unknown', `${p}/pose/joints/${joint}`, `unknown joint ${joint}`));
+      for (const key of ['look', 'point_at']) if (typeof pose[key] === 'string') ref(pose[key], `${p}/pose/${key}`, 'pose.target.unresolved');
+    }
+  }
+  objects.forEach((o, i) => inspectObject(o, `/objects/${i}`));
+  for (const [i, scene] of scenes.entries()) {
+    if (!scene || typeof scene !== 'object') continue;
+    const p = `/scenes/${i}`;
+    if (typeof scene.id === 'string') {
+      if (!/^[a-z0-9_-]+$/.test(scene.id)) errors.push(issue('scene.id.invalid', `${p}/id`, 'invalid scene id'));
+      if (sceneIds.has(scene.id)) errors.push(issue('scene.id.duplicate', `${p}/id`, 'duplicate scene id'));
+      sceneIds.add(scene.id);
+    }
+    for (const key of ['camera', 'camera_to']) if (typeof scene[key]?.look === 'string') ref(scene[key].look, `${p}/${key}/look`, 'camera.look.unresolved');
+    for (const [id, delta] of Object.entries(scene.set ?? {})) {
+      if (!ids.has(id)) warnings.push(issue('set.unresolved', ptr(`${p}/set`, id), `unknown object ${id}`));
+      else inspectObject({ ...objects.find(o => o?.id === id), ...delta }, ptr(`${p}/set`, id));
+    }
+    const annotations = Array.isArray(scene.annotations) ? scene.annotations : [];
+    if (annotations.length > 100) warnings.push(issue('limit.annotations', `${p}/annotations`, 'annotations exceeds 100'));
+    annotations.forEach((a, j) => {
+      if (a?.anchor?.object !== undefined) ref(a.anchor.object, `${p}/annotations/${j}/anchor/object`, 'anchor.unresolved');
+      if (a?.frame) for (const [key, value] of Object.entries(a.frame)) {
+        if (['at', 'from', 'to'].includes(key) && Array.isArray(value)) value.forEach((n, k) => { if (typeof n !== 'number' || n < 0 || n > 1) errors.push(issue('annotation.coordinate.invalid', `${p}/annotations/${j}/frame/${key}/${k}`, 'coordinate must be 0..1')); });
+        if (key === 'points' && Array.isArray(value)) value.flat().forEach((n, k) => { if (typeof n !== 'number' || n < 0 || n > 1) errors.push(issue('annotation.coordinate.invalid', `${p}/annotations/${j}/frame/points/${k}`, 'coordinate must be 0..1')); });
+      }
+    });
+  }
+  const walk = (value, path = '') => {
+    if (!value || typeof value !== 'object') return;
+    if (Array.isArray(value)) { value.forEach((v, i) => walk(v, `${path}/${i}`)); return; }
+    const normalized = path.replace(/\/\d+(?=\/|$)/g, '/*').replace(/\/set\/[^/]+/, '/set/*').replace(/\/joints\/[^/]+/, '/joints/*');
+    const props = normalized.includes('/annotations/*') && !normalized.endsWith('/anchor') ? undefined : known[normalized];
+    if (props) for (const key of Object.keys(value)) if (!(key in props)) (strict ? errors : warnings).push(issue('key.unknown', ptr(path, key), `unknown key ${key}`));
+    for (const [key, v] of Object.entries(value)) walk(v, ptr(path, key));
+  };
+  walk(doc);
+  return { ok: errors.length === 0, errors, warnings };
+}

package/vendor/packages/overlay-runtime/src/fragment-source-write.mjs

@@ -54,17 +54,25 @@ function textSpans(html, tags = []) {
                 if (!frame?.inSlot || frame.isSlotRoot) tags.push('/' + closing[1].toLowerCase());
             } else if (opening) {
                 const name = opening[1].toLowerCase();
-                const parentInSlot = slotStack.length > 0 && slotStack[slotStack.length - 1].inSlot;
+                const parent = slotStack[slotStack.length - 1];
+                const parentInSlot = parent?.inSlot ?? false;
+                const namespace = name === 'svg' || name === 'math' ? name
+                    : parent?.name === 'foreignobject' && parent.namespace === 'svg'
+                        ? 'html' : (parent?.namespace ?? 'html');
+                const selfClosing = tag[0].endsWith('/>');
                 if (!parentInSlot) tags.push(name);
-                if ((name === 'style' || name === 'script') && !tag[0].endsWith('/>')) {
+                if ((name === 'style' || name === 'script') && !selfClosing) {
                     const close = new RegExp(`</${name}\\s*>`, 'ig');
                     close.lastIndex = cursor;
                     const end = close.exec(html);
                     if (!end) throw new Error(`${name} タグが閉じていません`);
                     cursor = close.lastIndex;
-                } else if (!VOID_ELEMENTS.has(name) && !tag[0].endsWith('/>')) {
+                } else if (selfClosing && namespace !== 'html' && name !== 'style' && name !== 'script') {
+                    if (!parentInSlot) tags.push('/' + name);
+                } else if (!VOID_ELEMENTS.has(name) && !selfClosing) {
                     const isSlotRoot = !parentInSlot && hasSlotAttribute(tag[0], opening[1]);
-                    slotStack.push({ inSlot: parentInSlot || isSlotRoot, isSlotRoot });
+                    slotStack.push({ inSlot: parentInSlot || isSlotRoot, isSlotRoot,
+                        name, namespace });
                 }
             }
             continue;
@@ -85,8 +93,15 @@ export function patchFragmentSourceText(source, edited) {
     const afterTags = [];
     const before = textSpans(source, beforeTags);
     const after = textSpans(edited, afterTags);
-    if (before.length !== after.length || beforeTags.join('\0') !== afterTags.join('\0')) {
-        throw new Error('断片の構造が変わったため、元ソースの文字だけを安全に保存できません');
+    const refusal = '断片の構造が変わったため、元ソースの文字だけを安全に保存できません';
+    const tagIndex = beforeTags.findIndex((tag, index) => tag !== afterTags[index]);
+    if (tagIndex >= 0 || beforeTags.length !== afterTags.length) {
+        const index = tagIndex >= 0 ? tagIndex : Math.min(beforeTags.length, afterTags.length);
+        const label = tag => tag === undefined ? 'なし' : `<${tag}>`;
+        throw new Error(`${refusal}（最初の違い: ${index + 1} 番目・元 ${label(beforeTags[index])} / 編集後 ${label(afterTags[index])}）`);
+    }
+    if (before.length !== after.length) {
+        throw new Error(`${refusal}（文字の区切りの数: 元 ${before.length} / 編集後 ${after.length}）`);
     }
     let result = source;
     for (let index = before.length - 1; index >= 0; index--) {

package/vendor/packages/overlay-runtime/src/interaction.js

@@ -340,6 +340,96 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   // テキスト編集で断片 HTML を保存するときに作者の元指定へ戻せるよう、初回値だけ保持する。
   const hitPolicyOriginalPointerEvents = new WeakMap();
   const hitPolicyAppliedContainers = new WeakSet();
+  const hitPolicyTimes = new WeakMap();
+  const staleHitPolicyContainers = new Set();
+  const pausedHitPolicyContainers = new Set();
+  let pausedHitPolicyTimer = null;
+  let lastPointerHitPolicyRefresh = -Infinity;
+
+  function hitPolicyOperationBusy() {
+    return Boolean(activeEdit || activeDrag || activeResize || activeRotate || activeLine
+      || marqueeFrame || pointerOwner != null);
+  }
+
+  function schedulePausedHitPolicyRefresh(delay = 120) {
+    if (typeof setTimeout !== 'function') return;
+    if (pausedHitPolicyTimer !== null) clearTimeout(pausedHitPolicyTimer);
+    pausedHitPolicyTimer = setTimeout(flushPausedHitPolicies, delay);
+  }
+
+  // runtime は可視コンテナの時刻だけを記録する。CSS の読み取りはここでは行わない。
+  function markOverlayHitPolicyStale(container, localTimeMs, paused = false, reentered = false,
+    animationReady = null) {
+    if (!container) return;
+    let state = hitPolicyTimes.get(container);
+    if (!state) {
+      state = { current: localTimeMs, measured: null, paused: null };
+      hitPolicyTimes.set(container, state);
+    }
+    const timeChanged = state.current !== localTimeMs;
+    const enteredPause = paused && state.paused !== true;
+    state.current = localTimeMs;
+    state.paused = paused;
+    if (reentered) {
+      state.measured = null;
+      hitPolicyAppliedContainers.delete(container);
+    }
+    if (state.measured !== localTimeMs) staleHitPolicyContainers.add(container);
+    // pause()/currentTime の pending 補正はこの tick の測定より後に解決し得る。
+    // 暫定 apply が stale を消しても、停止後の一回は別の印で必ず残す。
+    if (paused && (reentered || timeChanged || enteredPause)) pausedHitPolicyContainers.add(container);
+    if (!paused) pausedHitPolicyContainers.delete(container);
+    if (paused && pausedHitPolicyContainers.size) {
+      // スクラブ中は連続 tick をまとめ、停止後にポインタ無しで確定する。
+      schedulePausedHitPolicyRefresh();
+    }
+    if (paused && (reentered || timeChanged || enteredPause) && animationReady?.then) {
+      const expectedState = state;
+      animationReady.then(() => {
+        if (hitPolicyTimes.get(container) !== expectedState || !state.paused
+          || state.current !== localTimeMs) return;
+        // ready 後の currentTime 補正が 120ms の測定より遅れた場合も追い付く。
+        const alreadyRefreshed = !pausedHitPolicyContainers.has(container);
+        pausedHitPolicyContainers.add(container);
+        schedulePausedHitPolicyRefresh(alreadyRefreshed ? 0 : 120);
+      });
+    }
+  }
+
+  function flushPausedHitPolicies() {
+    pausedHitPolicyTimer = null;
+    if (pausedHitPolicyContainers.size === 0) return;
+    if (hitPolicyOperationBusy()) {
+      // 編集・ジェスチャーが終わるまで印を保持する。
+      pausedHitPolicyTimer = setTimeout(flushPausedHitPolicies, 120);
+      return;
+    }
+    refreshStaleHitPolicies(true);
+  }
+
+  function refreshStaleHitPolicies(includePaused = false) {
+    if (hitPolicyOperationBusy()) return false;
+    let refreshed = false;
+    const candidates = includePaused ? pausedHitPolicyContainers : staleHitPolicyContainers;
+    for (const container of candidates) {
+      if (includePaused) pausedHitPolicyContainers.delete(container);
+      if (!container.isConnected || container.style.visibility === 'hidden') {
+        staleHitPolicyContainers.delete(container);
+        continue;
+      }
+      invalidateOverlayHitPolicy(container);
+      applyOverlayHitPolicy(container);
+      refreshed = true;
+    }
+    return refreshed;
+  }
+
+  function forgetOverlayHitPolicyTracking(container) {
+    staleHitPolicyContainers.delete(container);
+    pausedHitPolicyContainers.delete(container);
+    hitPolicyTimes.delete(container);
+    hitPolicyAppliedContainers.delete(container);
+  }
 
   // overlay_write は操作順を保存する。selftest は今回の書き込みをこの記録から待つ。
   let writeTail = Promise.resolve();
@@ -982,7 +1072,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
 
   // 全画面の外側コンテナと断片ルートは素通しにし、実際に背景・枠・影・文字・置換要素を
   // 描く可視の子孫だけを拾う。data-akari-hit は最寄りの指定を配下へ継承し、機械判定より
-  // 優先する。字幕が 1,000 件級でも全件を走査しないよう、runtime の可視化時に一度だけ呼ぶ。
+  // 優先する。字幕が 1,000 件級でも全件を走査しないよう、runtime は可視コンテナの
+  // 初回・停止後・ポインタ入力時だけ適用し、再生 tick では時刻の印だけを付ける。
   function fragmentRootCoversContainer(element, container) {
     const rootRect = element.getBoundingClientRect();
     const containerRect = container.getBoundingClientRect();
@@ -1056,6 +1147,9 @@ function elementBoxCompanions(style, parentStyle, width, height) {
 
     for (const root of container.children) visit(root, null, true, true);
     hitPolicyAppliedContainers.add(container);
+    const state = hitPolicyTimes.get(container);
+    if (state) state.measured = state.current;
+    staleHitPolicyContainers.delete(container);
     updateShapeLineHitProxyWidths();
   }
 
@@ -1169,6 +1263,34 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     }
   }
 
+  // 08-07 裁定: 背景は選択・削除できる。旧矩形フォールバックと違い、stage 面に
+  // 落ちたクリックで、全面を覆って自ら塗るルートだけを拾う。実際のヒット先が
+  // あるときは使わず 4680d90d8 の巻き込みを防ぎ、素通し規約は変えない。
+  function paintedStageOverlayAt(clientX, clientY) {
+    const candidates = [...stage.children]
+      .flatMap((container, index) => {
+        if (!isSelectable(container)) return [];
+        const value = Number.parseFloat(getComputedStyle(container).zIndex);
+        return [{ container, index, zIndex: Number.isFinite(value) ? value : 0 }];
+      })
+      .sort((a, b) => b.zIndex - a.zIndex || b.index - a.index);
+
+    for (const { container } of candidates) {
+      for (const root of container.children) {
+        if (root.hasAttribute("data-akari-interaction") || root.getAttribute("data-akari-hit") === "pass") continue;
+        const style = getComputedStyle(root);
+        if (style.display === "none" || Number(style.opacity) <= 0
+          || ["hidden", "collapse"].includes(style.visibility)
+          || !fragmentRootCoversContainer(root, container)
+          || !drawsOwnContent(root, style)) continue;
+        const rect = root.getBoundingClientRect();
+        if (clientX >= rect.left && clientX <= rect.right
+          && clientY >= rect.top && clientY <= rect.bottom) return container;
+      }
+    }
+    return null;
+  }
+
   function overlayForEvent(event) {
     const eventTargetOverlay = findOverlayContainer(event.target);
     if (eventTargetOverlay && !isSelectable(eventTargetOverlay)) {
@@ -1180,6 +1302,11 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     ) {
       return selftestOverlayOverride;
     }
+    if (event.target === stage && !eventTargetOverlay
+      && Number.isFinite(event.clientX) && Number.isFinite(event.clientY)) {
+      const paintedOverlay = paintedStageOverlayAt(event.clientX, event.clientY);
+      if (paintedOverlay) return paintedOverlay;
+    }
     return isSelectable(eventTargetOverlay) ? eventTargetOverlay : null;
   }
 
@@ -1722,50 +1849,143 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     Object.assign(selectionFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
       width: `${rect.width}px`, height: `${rect.height}px` });
   }
+  let breadcrumbResizeObserver = null;
+  let breadcrumbHoverActive = false;
+  let breadcrumbHoverSuppressedAt = null;
+  function clearBreadcrumbHover() {
+    if (!breadcrumbHoverActive) return;
+    hideHover();
+  }
+  function breadcrumbBounds(target) {
+    if (target.kind === 'stage') return { rect: stage?.getBoundingClientRect() };
+    if (target.kind === 'node') {
+      const node = treeNode(target.id);
+      const leaf = containerById(target.id);
+      const lineRect = leaf && lineFrameGeometry(leaf);
+      const rect = node?.kind !== 'leaf' ? unionBounds(visibleMembers(target.id))
+        : lineRect ?? (leaf ? fragmentBounds(leaf) : null);
+      return { rect, angle: lineRect?.angle ?? null };
+    }
+    if (target.kind === 'item') {
+      const container = containerById(target.id);
+      return { rect: container ? fragmentBounds(container) : null };
+    }
+    const element = target.element?.isConnected ? target.element
+      : elementByAddress(fragmentRoot(containerById(target.overlayId)), target.ref);
+    if (!element?.isConnected) return null;
+    const geometry = elementScreenGeometry(element);
+    const width = geometry.width * Math.hypot(geometry.axes.x.x, geometry.axes.x.y);
+    const height = geometry.height * Math.hypot(geometry.axes.y.x, geometry.axes.y.y);
+    return { rect: { left: geometry.center.x - width / 2, top: geometry.center.y - height / 2,
+      width, height }, angle: Math.atan2(geometry.axes.x.y, geometry.axes.x.x) * 180 / Math.PI };
+  }
   function renderScopeBreadcrumb() {
     const nav = document.querySelector('[data-akari-ui="preview-scope-breadcrumb"]');
     if (!nav) return;
+    if (!breadcrumbResizeObserver && typeof ResizeObserver !== 'undefined' && nav.parentElement) {
+      breadcrumbResizeObserver = new ResizeObserver(() => renderScopeBreadcrumb());
+      breadcrumbResizeObserver.observe(nav.parentElement);
+    }
+    clearBreadcrumbHover();
+    const entries = [];
+    const append = (label, action, target) => entries.push({ label, action, target });
     if (selectedElementFocus() && selectedOverlay) {
-      nav.hidden = false;
-      nav.replaceChildren();
-      const append = (label, action) => {
-        if (nav.childNodes.length) nav.append(' › ');
-        const button = document.createElement('button');
-        button.type = 'button'; button.textContent = label;
-        button.addEventListener('click', action);
-        nav.appendChild(button);
-      };
-      append('全体', () => { clearSelection(); publishScopedSelection(); });
+      append('全体', () => { clearSelection(); publishScopedSelection(); }, { kind: 'stage' });
       for (const id of lineage(selectionTree(), scopeId)) {
-        append(treeNode(id)?.label ?? id, () => applyScopedSelection({ selectId: id, scopeId: treeNode(id)?.parentId ?? null }));
+        append(treeNode(id)?.label ?? id, () => applyScopedSelection({ selectId: id, scopeId: treeNode(id)?.parentId ?? null }),
+          { kind: 'node', id });
       }
       const name = window.akari.state?.summary?.overlays?.find(overlay => overlay.id === selectedId)?.name ?? selectedId;
-      append(name, () => focusElement(null));
+      append(name, () => focusElement(null), { kind: 'item', id: selectedId });
       const root = fragmentRoot(selectedOverlay);
       const path = [];
       for (let node = focusedElement(); node && node !== root; node = node.parentElement) {
         if (selectableElement(root, node, stage?.getBoundingClientRect())) path.unshift(node);
       }
-      for (const node of path) append(elementLabel(root, node), () => focusElement(node));
-      return;
-    }
-    nav.hidden = scopeId === floorScopeId || !selectionTree().length;
-    nav.replaceChildren();
-    if (nav.hidden) return;
-    const path = lineage(selectionTree(), scopeId);
-    const ids = floorScopeId === null ? [null, ...path] : path.slice(path.indexOf(floorScopeId));
-    ids.forEach((id, index) => {
-      if (index) nav.append(' › ');
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.textContent = id === null ? '全体' : treeNode(id)?.label ?? id;
-      button.addEventListener('click', () => {
+      for (const node of path) append(elementLabel(root, node), () => focusElement(node),
+        { kind: 'element', element: node, overlayId: selectedId, ref: elementAddress(root, node) });
+    } else if (scopeId !== floorScopeId && selectionTree().length) {
+      const path = lineage(selectionTree(), scopeId);
+      const ids = floorScopeId === null ? [null, ...path] : path.slice(path.indexOf(floorScopeId));
+      ids.forEach(id => append(id === null ? '全体' : treeNode(id)?.label ?? id, () => {
         const hit = descendantLeafIds(selectionTree(), selectedId)[0] ?? selectedId;
         const next = resolveScopedSelection(selectionTree(), id, hit);
         applyScopedSelection({ scopeId: id, selectId: next.scopeId === id ? next.selectId : null });
+      }, id === null ? { kind: 'stage' } : { kind: 'node', id }));
+    }
+    nav.replaceChildren();
+    nav.hidden = entries.length === 0;
+    if (nav.hidden) return;
+    const separator = () => {
+      const span = document.createElement('span');
+      span.className = 'akari-breadcrumb-separator'; span.textContent = ' › ';
+      return span;
+    };
+    const button = entry => {
+      const node = document.createElement('button');
+      node.type = 'button'; node.textContent = entry.label;
+      const show = () => {
+        let geometry;
+        try { geometry = breadcrumbBounds(entry.target); } catch { return; }
+        if (!geometry?.rect || geometry.rect.width <= 0 || geometry.rect.height <= 0) return;
+        breadcrumbHoverActive = true;
+        showHoverFrame(geometry.rect, geometry.angle ?? null, entry.target.id ?? '', true);
+      };
+      node.addEventListener('pointerenter', () => {
+        if (!breadcrumbHoverSuppressedAt) show();
       });
-      nav.appendChild(button);
-    });
+      node.addEventListener('pointermove', event => {
+        const point = breadcrumbHoverSuppressedAt;
+        if (!point || Math.hypot(event.clientX - point.x, event.clientY - point.y) < 1) return;
+        breadcrumbHoverSuppressedAt = null;
+        show();
+      });
+      node.addEventListener('focus', show);
+      node.addEventListener('pointerleave', () => {
+        if (node.isConnected) breadcrumbHoverSuppressedAt = null;
+        clearBreadcrumbHover();
+      });
+      node.addEventListener('blur', clearBreadcrumbHover);
+      node.addEventListener('click', event => {
+        breadcrumbHoverSuppressedAt = { x: event.clientX, y: event.clientY };
+        clearBreadcrumbHover(); entry.action();
+      });
+      return node;
+    };
+    const add = (entry, index) => {
+      if (index) nav.appendChild(separator());
+      nav.appendChild(button(entry));
+    };
+    entries.forEach(add);
+    const buttons = [...nav.querySelectorAll('button')];
+    const widths = buttons.map(node => node.getBoundingClientRect().width);
+    const separatorWidth = nav.querySelector('.akari-breadcrumb-separator')?.getBoundingClientRect().width ?? 0;
+    const available = Math.max(0, nav.parentElement.getBoundingClientRect().width - 16);
+    if (widths.reduce((sum, width) => sum + width, 0) + separatorWidth * (entries.length - 1) <= available) return;
+    if (entries.length < 4) {
+      const each = Math.max(3 * 10, (available - separatorWidth * (entries.length - 1) - widths[0]) / Math.max(1, entries.length - 1));
+      buttons.slice(1).forEach(node => { node.style.maxWidth = `${each}px`; });
+      return;
+    }
+    const ellipsis = document.createElement('span');
+    ellipsis.textContent = '…'; ellipsis.setAttribute('aria-hidden', 'true');
+    nav.appendChild(ellipsis);
+    const ellipsisWidth = ellipsis.getBoundingClientRect().width;
+    ellipsis.remove();
+    let start = entries.length - 2;
+    let used = widths[0] + widths[start] + widths[start + 1] + ellipsisWidth + 3 * separatorWidth;
+    while (start > 2 && used + widths[start - 1] + separatorWidth <= available) {
+      start--; used += widths[start] + separatorWidth;
+    }
+    nav.replaceChildren();
+    add(entries[0], 0);
+    nav.appendChild(separator()); nav.appendChild(ellipsis);
+    for (let index = start; index < entries.length; index++) add(entries[index], index);
+    if (used > available) {
+      const tails = [...nav.querySelectorAll('button')].slice(1);
+      const tailWidth = Math.max(30, (available - widths[0] - ellipsisWidth - 3 * separatorWidth) / tails.length);
+      tails.forEach(node => { node.style.maxWidth = `${tailWidth}px`; });
+    }
   }
   function publishScopedSelection(notify = true) {
     syncLazyBag();
@@ -2117,6 +2337,13 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const parts = String(value ?? '').match(/[-+]?(?:\d*\.)?\d+(?:e[-+]?\d+)?px/giu) ?? [];
     return { x: Number.parseFloat(parts[0]) || 0, y: Number.parseFloat(parts[1]) || 0 };
   }
+  const elementDecimal = new Intl.NumberFormat('en-US', { useGrouping: false, maximumFractionDigits: 2 });
+  function formatElementNumber(value) {
+    return elementDecimal.format(Math.round((value + Number.EPSILON) * 100) / 100 || 0);
+  }
+  function formatElementTranslate(x, y) {
+    return `${formatElementNumber(x)}px ${formatElementNumber(y)}px`;
+  }
   function elementScreenGeometry(element) {
     const rect = element.getBoundingClientRect();
     const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
@@ -2185,14 +2412,18 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   }
   function elementWriteStyle(gesture, dimensionNames = []) {
     const style = {};
-    for (const name of dimensionNames) style[name] = gesture.element.style.getPropertyValue(name);
+    for (const name of dimensionNames) {
+      style[name] = `${formatElementNumber(Number.parseFloat(gesture.element.style.getPropertyValue(name)))}px`;
+    }
     for (const name of elementInlineProperties) {
       if (name === 'translate' || dimensionNames.includes(name)) continue;
       const now = gesture.element.style.getPropertyValue(name);
-      if (now && now !== gesture.originalInline[name][0]) style[name] = now;
+      if (now && now !== gesture.originalInline[name][0]) {
+        style[name] = name === 'rotate' ? `${formatElementNumber(Number.parseFloat(now))}deg` : now;
+      }
     }
-    const translate = gesture.element.style.translate;
-    if (translate && translate !== gesture.originalInline.translate[0]) style.translate = translate;
+    const translate = formatElementTranslate(gesture.x, gesture.y);
+    if (translate !== formatElementTranslate(gesture.startX, gesture.startY)) style.translate = translate;
     return style;
   }
   function beginElementGesture(event, handleEl) {
@@ -2214,7 +2445,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       startGeometry: before, startClientX: event.clientX, startClientY: event.clientY,
       startWidth: Number.parseFloat(declared.width) || before.width,
       startHeight: Number.parseFloat(declared.height) || before.height,
-      x: translate.x, y: translate.y, moved: false, writeContext: captureWriteContext() };
+      x: translate.x, y: translate.y, startX: translate.x, startY: translate.y,
+      moved: false, writeContext: captureWriteContext() };
     if (startStyle.display === 'inline') {
       element.style.display = 'inline-block';
       const next = element.getBoundingClientRect();
@@ -2362,12 +2594,15 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const gesture = elementNudge;
     elementNudge = null;
     if (!gesture) return;
-    if (Math.abs(gesture.x - gesture.startX) < 0.5 && Math.abs(gesture.y - gesture.startY) < 0.5) {
+    const translate = formatElementTranslate(gesture.x, gesture.y);
+    if (Math.abs(gesture.x - gesture.startX) < 0.5 && Math.abs(gesture.y - gesture.startY) < 0.5
+      || translate === formatElementTranslate(gesture.startX, gesture.startY)) {
       gesture.element.style.translate = gesture.originalInline;
       if (gesture.originalDisplay !== undefined) gesture.element.style.display = gesture.originalDisplay;
+      refreshSelectionFrame();
       return;
     }
-    const style = { translate: `${gesture.x}px ${gesture.y}px` };
+    const style = { translate };
     if (gesture.originalDisplay !== undefined) style.display = 'inline-block';
     enqueueWrite(gesture.writeContext, gesture.overlayId,
       { element: { ref: gesture.ref, tag: gesture.tag,
@@ -2475,17 +2710,41 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   }
 
   function hideHover() {
+    breadcrumbHoverActive = false;
     hoverEvent = null;
     if (hoverTick !== null) cancelAnimationFrame(hoverTick);
     hoverTick = null;
-    if (hoverFrame) hoverFrame.hidden = true;
+    if (hoverFrame) {
+      hoverFrame.hidden = true;
+      hoverFrame.removeAttribute('data-breadcrumb-hover');
+    }
+  }
+  function showHoverFrame(rect, angle = null, overlayId = '', breadcrumb = false, ariaHidden = true) {
+    if (!hoverFrame) {
+      hoverFrame = document.createElement('div');
+      hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
+      if (ariaHidden) hoverFrame.setAttribute('aria-hidden', 'true');
+      Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none',
+        boxSizing: 'border-box', border: '1px solid var(--akari-accent, #4da3ff)',
+        opacity: '0.45', zIndex: '90' });
+      document.body.appendChild(hoverFrame);
+    }
+    if (breadcrumb) hoverFrame.setAttribute('data-breadcrumb-hover', 'true');
+    else hoverFrame.removeAttribute('data-breadcrumb-hover');
+    hoverFrame.dataset.overlayId = overlayId;
+    hoverFrame.hidden = false;
+    Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
+      width: `${rect.width}px`, height: `${rect.height}px`,
+      transform: angle === null ? '' : `rotate(${angle}deg)` });
   }
   function scheduleHover(event) {
+    if (breadcrumbHoverActive) return;
     if (!interactionEnabled || activeDrag || activeResize || activeEdit || event.buttons) { hideHover(); return; }
     hoverEvent = event;
     if (hoverTick !== null) return;
     hoverTick = requestAnimationFrame(() => {
       hoverTick = null;
+      if (breadcrumbHoverActive) { hoverEvent = null; return; }
       const event = hoverEvent;
       if (!event || activeDrag || activeResize || activeEdit) { hideHover(); return; }
       const container = overlayForEvent(event);
@@ -2501,17 +2760,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
         const rect = element?.getBoundingClientRect() ?? fragmentBounds(container);
         if (!rect || selectedOverlay === container
           && selectedElementFocus()?.ref === elementAddress(root, element)) { hideHover(); return; }
-        if (!hoverFrame) {
-          hoverFrame = document.createElement('div');
-          hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
-          Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none', boxSizing: 'border-box',
-            border: '1px solid var(--akari-accent, #4da3ff)', opacity: '0.45', zIndex: '90' });
-          document.body.appendChild(hoverFrame);
-        }
-        hoverFrame.dataset.overlayId = container.dataset.overlayId;
-        hoverFrame.hidden = false;
-        Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
-          width: `${rect.width}px`, height: `${rect.height}px`, transform: '' });
+        showHoverFrame(rect, null, container.dataset.overlayId, false, false);
         return;
       }
       const next = isSelectable(container) && resolveScopedSelection(selectionTree(), scopeId,
@@ -2524,20 +2773,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       const rect = node && node.kind !== 'leaf' ? unionBounds(visibleMembers(next.selectId))
         : leaf?.dataset.role === 'shape-line' ? lineRect : leaf ? fragmentBounds(leaf) : null;
       if (!rect) { hideHover(); return; }
-      if (!hoverFrame) {
-        hoverFrame = document.createElement('div');
-        hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
-        hoverFrame.setAttribute('aria-hidden', 'true');
-        // Standalone hosts also get a non-interactive, viewport-based frame.
-        Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none',
-          boxSizing: 'border-box', border: '1px solid var(--akari-accent, #4da3ff)', opacity: '0.45', zIndex: '90' });
-        document.body.appendChild(hoverFrame);
-      }
-      hoverFrame.dataset.overlayId = next.selectId;
-      hoverFrame.hidden = false;
-      Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
-        width: `${rect.width}px`, height: `${rect.height}px`,
-        transform: lineRect ? `rotate(${lineRect.angle}deg)` : '' });
+      showHoverFrame(rect, lineRect?.angle ?? null, next.selectId);
     });
   }
 
@@ -2592,13 +2828,15 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       const displayScale = stage?.getBoundingClientRect().width / outputSize().width || 1;
       const outputDx = (rect.left + rect.width / 2 - drag.startCenterX) / displayScale;
       const outputDy = (rect.top + rect.height / 2 - drag.startCenterY) / displayScale;
-      if (!drag.moved || (Math.abs(outputDx) < 0.5 && Math.abs(outputDy) < 0.5)) {
+      const translate = formatElementTranslate(drag.x, drag.y);
+      if (!drag.moved || (Math.abs(outputDx) < 0.5 && Math.abs(outputDy) < 0.5)
+        || translate === formatElementTranslate(drag.startX, drag.startY)) {
         drag.element.style.translate = drag.originalInline;
         if (drag.originalDisplay !== undefined) drag.element.style.display = drag.originalDisplay;
         refreshSelectionFrame();
         return null;
       }
-      const style = { translate: `${drag.x}px ${drag.y}px` };
+      const style = { translate };
       if (drag.originalDisplay !== undefined) style.display = 'inline-block';
       const record = enqueueWrite(drag.writeContext, drag.overlayId,
         { element: { ref: drag.elementRef, tag: drag.elementTag,
@@ -3872,6 +4110,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
 
   function onPointerDown(event) {
     if (!interactionEnabled || !canBeginPointerInteraction(pointerOwner)) return;
+    event = correctedHitPolicyEvent(event);
     if (event.button !== 0 || activeDrag || activeResize || activeRotate || activeLine) return;
     if (selectedId && stage && event.target instanceof Element) {
       const bounds = stage.getBoundingClientRect();
@@ -3887,8 +4126,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     hideHover();
     clickOrigin = { selectedId, scopeId, moved: false, hadMultiple: selectedIds.length > 1 };
 
+    if (event.target instanceof Element && event.target.closest('[data-akari-ui="preview-scope-breadcrumb"]')) return;
     if (selectionTree().length) {
-      if (event.target instanceof Element && event.target.closest('[data-akari-ui="preview-scope-breadcrumb"]')) return;
       const handle = findHandleElement(event.target);
       if (handle) {
         if (selectedIds.length > 1) return;
@@ -4722,6 +4961,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
 
   function onClick(event) {
     if (!interactionEnabled || activeEdit) return;
+    event = correctedHitPolicyEvent(event);
     const hit = overlayForEvent(event);
     // pointerdown already toggled. Do not toggle twice or update the cycle clock.
     if (event.shiftKey && clickOrigin?.scopedHit) {
@@ -5218,11 +5458,73 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   for (const type of ["pointerdown", "pointerup", "click", "dblclick"]) {
     window.addEventListener(type, passTransparentCanvasEvent, true);
   }
+  const correctedHitPolicyEvents = new WeakMap();
+  let redirectedHitPolicyClick = null;
+  function pointerInsideStage(event) {
+    if (!stage || !Number.isFinite(event.clientX) || !Number.isFinite(event.clientY)) return false;
+    const rect = stage.getBoundingClientRect();
+    return event.clientX >= rect.left && event.clientX <= rect.right
+      && event.clientY >= rect.top && event.clientY <= rect.bottom;
+  }
+  function trustedEventAtTarget(event, target) {
+    // 合成 Event は isTrusted=false になり E2 の焦点を失う。元の信頼済み
+    // イベントを保ったまま、選択処理に見せる target だけ現在の hit-test にする。
+    return new Proxy(event, { get(original, key) {
+      if (key === 'target') return target;
+      const value = Reflect.get(original, key, original);
+      return typeof value === 'function' ? value.bind(original) : value;
+    } });
+  }
+  function correctHitPolicyEvent(event, target) {
+    correctedHitPolicyEvents.set(event, target);
+    // Window capture の後続ホストにも素の HTML hit と同じ target を見せる。
+    // Event 自体は元の信頼済みイベントなので、再生停止や混在選択は一度だけ走る。
+    try { Object.defineProperty(event, 'target', { configurable: true, value: target }); }
+    catch { /* document 側は WeakMap の target へフォールバックする。 */ }
+  }
+  function correctedHitPolicyEvent(event) {
+    const target = correctedHitPolicyEvents.get(event);
+    return target && event.target !== target ? trustedEventAtTarget(event, target) : event;
+  }
+  function stopCorrectedHitPolicyPropagation(event) {
+    // window のホスト捕捉は通し、古い preview-stage への下流だけ止める。
+    if (findOverlayContainer(correctedHitPolicyEvents.get(event))) event.stopPropagation();
+  }
+  window.addEventListener('pointermove', event => {
+    if (!pointerInsideStage(event) || !staleHitPolicyContainers.size
+      || hitPolicyOperationBusy()) return;
+    const now = performance.now();
+    if (now - lastPointerHitPolicyRefresh < 125) return;
+    if (!refreshStaleHitPolicies()) return;
+    lastPointerHitPolicyRefresh = now;
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    if (target && target !== event.target) correctHitPolicyEvent(event, target);
+  }, true);
+  window.addEventListener('pointerdown', event => {
+    if (event.button !== 0 || !pointerInsideStage(event) || hitPolicyOperationBusy()) return;
+    redirectedHitPolicyClick = null;
+    if (!refreshStaleHitPolicies()) return;
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    if (!target || target === event.target) return;
+    redirectedHitPolicyClick = { x: event.clientX, y: event.clientY };
+    correctHitPolicyEvent(event, target);
+  }, true);
+  window.addEventListener('click', event => {
+    if (!redirectedHitPolicyClick) return;
+    const redirect = redirectedHitPolicyClick;
+    redirectedHitPolicyClick = null;
+    if (Math.hypot(event.clientX - redirect.x, event.clientY - redirect.y) > 6) return;
+    const target = document.elementFromPoint(event.clientX, event.clientY);
+    if (!target || target === event.target) return;
+    correctHitPolicyEvent(event, target);
+  }, true);
   listenerRoot.addEventListener('pointermove', updateShapeLineHitProxyWidths, true);
   listenerRoot.addEventListener('pointerdown', updateShapeLineHitProxyWidths, true);
   window.addEventListener('resize', updateShapeLineHitProxyWidths);
   listenerRoot.addEventListener("click", onClick, true);
   listenerRoot.addEventListener("pointerdown", onPointerDown, true);
+  listenerRoot.addEventListener("click", stopCorrectedHitPolicyPropagation, true);
+  listenerRoot.addEventListener("pointerdown", stopCorrectedHitPolicyPropagation, true);
   listenerRoot.addEventListener("dblclick", onDoubleClick, true);
   listenerRoot.addEventListener("blur", onBlur, true);
   listenerRoot.addEventListener("input", onEditableInput, true);
@@ -5333,6 +5635,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     // ㉑ 素通し: overlay-runtime.js の tick() が可視化タイミングで呼ぶ。
     applyOverlayHitPolicy,
     invalidateOverlayHitPolicy,
+    markOverlayHitPolicyStale,
+    forgetOverlayHitPolicyTracking,
     syncOverlayHitRegion,
     // Web UI（preview-server）が編集モードを抜けるときに選択枠を畳むための公開口
     // （Phase 2-4 一本化。shell では未使用の追加 export で挙動不変）。

package/vendor/packages/overlay-runtime/src/overlay-runtime.js

@@ -341,6 +341,7 @@ function createOverlayRuntime(options = {}) {
 
   function unmount() {
     for (const overlay of mountedOverlays) {
+      window.akari.interaction?.forgetOverlayHitPolicyTracking?.(overlay.container);
       for (const animation of overlay.animations ?? []) releaseAnimation(animation);
       for (const runtime of overlayRuntimes(overlay)) runtime.dispose(overlay.container);
     }
@@ -490,6 +491,7 @@ function createOverlayRuntime(options = {}) {
         runtimesVersion: runtimeRegistryVersion,
         keepLayoutWhenHidden,
         hitPolicyPending: false,
+        hitPolicyEntry: false,
         // getAnimations({ subtree: true }) の 250ms キャッシュ（tick() 参照）
         animations: undefined,
         animationsAt: 0,
@@ -574,6 +576,7 @@ function createOverlayRuntime(options = {}) {
       }
       mounted.container.style.setProperty("opacity", String(statics.opacity));
       mounted.hitPolicyPending = true;
+      mounted.hitPolicyEntry = true;
       mounted.statics = statics;
       mounted.keyframes = Array.isArray(value.keyframes) ? value.keyframes : undefined;
       mounted.fps = finiteNumber(summary?.output?.fps, 30);
@@ -595,6 +598,7 @@ function createOverlayRuntime(options = {}) {
     mounted.animationsAt = 0;
     mounted.animationEndTimes = [];
     mounted.hitPolicyPending = true;
+    mounted.hitPolicyEntry = true;
     return true;
   }
 
@@ -636,7 +640,14 @@ function createOverlayRuntime(options = {}) {
         // することで、実際に存在する CSS Animation を「今可視のオーバーレイ分だけ」に
         // 抑え、この地雷を踏まない。
         overlay.container.toggleAttribute("data-akari-active", visible);
+        if (!visible && !isPlaying && overlay.animations?.length) {
+          // 停止中の連続シークが同一描画フレームで外→内へ戻っても、CSS が
+          // inactive を一度観測するようにする。これが無いとゲートの off/on が
+          // 相殺され、新しい Animation が生成されず初期 opacity 0 に残る。
+          void overlay.container.offsetWidth;
+        }
         overlay.hitPolicyPending = visible;
+        overlay.hitPolicyEntry = visible;
         // getAnimations() のキャッシュ（下記）は可視化フリップで必ず捨てる。ゲート属性の付け外しで
         // CSS animation の顔ぶれが変わるため、可視化直後の tick は引き直す。非表示化でも捨て、
         // 非可視の間 Animation 参照を持ち越さない。
@@ -650,6 +661,7 @@ function createOverlayRuntime(options = {}) {
         overlay.animationsAt = 0;
         overlay.animationEndTimes = [];
         if (!visible) {
+          window.akari.interaction?.forgetOverlayHitPolicyTracking?.(overlay.container);
           if (!overlay.keepLayoutWhenHidden) {
             overlay.container.setAttribute(RUNTIME_HIDDEN_ATTRIBUTE, "");
           }
@@ -762,15 +774,18 @@ function createOverlayRuntime(options = {}) {
         runtime.render(overlay.container, localTimeMs / 1000,
           { syncVideos: true, maxRenderSize, playing: Boolean(playing) });
       }
-      // opacity と clip-path は現在時刻へ合わせ、可視な間は入場アニメの終了まで毎 tick
-      // 測り直す。フリップ時だけでは通常再生の localTimeMs がほぼ 0 となり、0% 姿勢の
-      // bbox が焼き付くため。キャッシュした有限アニメの終端とローカル時刻で確定を判断する。
-      // 終わった tick で確定する。以後は呼ばず、無限ループも終端無しとして数えないので、
-      // 対象を可視オーバーレイだけにする性能原則「見えている分だけ」は維持される。
+      const ready = !isPlaying
+        ? overlay.animations.map(animation => pendingReady.get(animation)).filter(Boolean) : [];
+      window.akari.interaction?.markOverlayHitPolicyStale?.(
+        overlay.container, localTimeMs, !isPlaying, overlay.hitPolicyEntry,
+        ready.length ? Promise.allSettled(ready) : null);
+      overlay.hitPolicyEntry = false;
+      // 初回の仮判定と有限アニメ終端の確定判定だけをここで適用する。
+      // 途中の姿は上の時刻印を使い、停止後またはポインタ入力時に interaction が
+      // 必要な可視コンテナだけ測り直す。終端 tick が存在しない断片も停止後に更新される。
       if (overlay.hitPolicyPending) {
         window.akari.interaction?.syncOverlayHitRegion?.(overlay.container);
-        // 当たり判定ポリシーは初回適用が WeakSet でガードされるため、ここでの再呼び出しは
-        // 実質 no-op（暫定適用）。確定姿勢に達した tick で invalidate してから測り直す。
+        // 初回以外は WeakSet のガードで no-op。再入場時は時刻印側が解除する。
         window.akari.interaction?.applyOverlayHitPolicy?.(overlay.container);
         if (entryAnimationsSettled(overlay.animationEndTimes, localTimeMs)) {
           window.akari.interaction?.invalidateOverlayHitPolicy?.(overlay.container);