akari-video 1.2.0 → 1.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akari-video",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.2",
   "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/vendor/packages/akari-launcher/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akari-video",
-  "version": "1.2.0",
+  "version": "1.3.0-beta.2",
   "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/media-bin/test/media-bin.test.mjs

@@ -5,7 +5,7 @@ import { mkdtemp, rm, writeFile, chmod } from "node:fs/promises";
 import { syncBuiltinESMExports } from "node:module";
 import { tmpdir } from "node:os";
 import path from "node:path";
-import test from "node:test";
+import test, { after } from "node:test";
 import { fileURLToPath } from "node:url";
 
 import { resolveFfmpeg, resolveFfprobe } from "../src/index.mjs";
@@ -37,9 +37,10 @@ function baseEnv(overrides = {}) {
   };
 }
 
-// PATH からシステムの ffmpeg/ffprobe を外し、vendor/ 同梱バイナリへの
-// フォールバックだけが効く状態を作る（task.md 記載の `env PATH=/usr/bin:/bin` と同じ狙い）。
-const STRIPPED_PATH_ENV = baseEnv({ PATH: "/usr/bin:/bin" });
+// PATH からシステムの ffmpeg/ffprobe を OS に依らず外す。
+const emptyPathDirectory = fs.mkdtempSync(path.join(tmpdir(), 'akari-media-bin-empty-path-'));
+after(() => fs.rmSync(emptyPathDirectory, { recursive: true, force: true }));
+const STRIPPED_PATH_ENV = baseEnv({ PATH: emptyPathDirectory });
 
 test("packagedBinaryPath: packageRoot の ../../media-bin を候補にし、win32 は .exe を付ける", () => {
   const packageRoot = fileURLToPath(new URL("../", import.meta.url));
@@ -192,7 +193,8 @@ test("resolveFfmpeg: PATH に ffmpeg があればコマンド名を返す", () =
   assert.equal(resolved, "ffmpeg");
 });
 
-test("resolveFfmpeg: PATH から外すと vendor 同梱バイナリへフォールバックし、実行できる", () => {
+test("resolveFfmpeg: PATH から外すと vendor 同梱バイナリへフォールバックし、実行できる", t => {
+  if (!fs.existsSync(vendorBinaryPath('ffmpeg'))) return t.skip('vendor ffmpeg is not installed when postinstall is skipped');
   const resolved = resolveFfmpeg({ env: STRIPPED_PATH_ENV });
   assert.notEqual(resolved, "ffmpeg");
   assert.ok(path.isAbsolute(resolved), `絶対パスのはず: ${resolved}`);
@@ -202,7 +204,8 @@ test("resolveFfmpeg: PATH から外すと vendor 同梱バイナリへフォー
   assert.match(result.stdout, /ffmpeg version/);
 });
 
-test("resolveFfprobe: PATH から外すと vendor 同梱バイナリへフォールバックし、実行できる", () => {
+test("resolveFfprobe: PATH から外すと vendor 同梱バイナリへフォールバックし、実行できる", t => {
+  if (!fs.existsSync(vendorBinaryPath('ffprobe'))) return t.skip('vendor ffprobe is not installed when postinstall is skipped');
   const resolved = resolveFfprobe({ env: STRIPPED_PATH_ENV });
   assert.notEqual(resolved, "ffprobe");
   assert.ok(path.isAbsolute(resolved), `絶対パスのはず: ${resolved}`);

package/vendor/packages/media-bin/test/preview-audio-sidecar-async.test.mjs

@@ -100,7 +100,7 @@ test('サイドカー生成中もイベントループは止まらない（spawn
     assert.equal(result.ok, true, result.reason);
     assert.equal(result.skipped, false);
     assert.deepEqual(Object.keys(result).sort(),
-      ['channels', 'durationSec', 'key', 'ok', 'path', 'reason', 'sampleRate', 'skipped']);
+      ['channels', 'durationSec', 'format', 'key', 'ok', 'path', 'reason', 'sampleRate', 'skipped']);
     assert.equal(result.sampleRate, 48000);
     assert.equal(result.channels, 1);
     assert.equal(result.durationSec, 1);

package/vendor/packages/overlay-runtime/src/element-selection.d.ts

@@ -1,6 +1,16 @@
 export declare function elementAddress(root: Element, element: Element): string | null;
-export declare function selectableElement(root: Element, element: Element, outputRect?: DOMRect): boolean;
-export declare function nearestSelectableElement(root: Element, hit: Element, outputRect?: DOMRect): Element | null;
-export declare function firstSelectableElement(root: Element, outputRect?: DOMRect): Element | null;
+export interface SelectionBounds { left: number; top: number; right: number; bottom: number; width: number; height: number }
+export declare function drawsSelectionContent(element: Element, style?: CSSStyleDeclaration): boolean;
+export declare function selectionContentBounds(element: Element, options?: {
+  container?: Element;
+  visibleRect?: (rect: DOMRect, element: Element) => SelectionBounds | null;
+  rawRect?: (element: Element) => DOMRect;
+}): SelectionBounds | null;
+export declare function isSelectionContainer(element: Element): boolean;
+export declare function selectableContainer(root: Element, element: Element, outputRect: DOMRect | undefined, bounds: SelectionBounds | null, options?: SelectionOptions): boolean;
+export interface SelectionOptions { boundsFor?: (element: Element) => SelectionBounds | null }
+export declare function selectableElement(root: Element, element: Element, outputRect?: DOMRect, options?: SelectionOptions): boolean;
+export declare function nearestSelectableElement(root: Element, hit: Element, outputRect?: DOMRect, options?: SelectionOptions): Element | null;
+export declare function firstSelectableElement(root: Element, outputRect?: DOMRect, options?: SelectionOptions): Element | null;
 export declare function elementByAddress(root: Element, ref: string): Element | null;
 export declare function elementLabel(root: Element, element: Element): string;

package/vendor/packages/overlay-runtime/src/element-selection.mjs

@@ -17,30 +17,163 @@ function elementAddress(root, element) {
   return index < 0 ? null : `${id ? '#' : '.'}${id || token}[${index}]`;
 }
 
-function selectableElement(root, element, outputRect) {
+function drawsSelectionContent(element, style = getComputedStyle(element)) {
+  const tag = element.tagName.toUpperCase();
+  if (['BASE', 'HEAD', 'LINK', 'META', 'NOSCRIPT', 'SCRIPT', 'STYLE', 'TEMPLATE', 'TITLE'].includes(tag)) return false;
+  if (['AUDIO', 'CANVAS', 'EMBED', 'IFRAME', 'IMG', 'OBJECT', 'SVG', 'VIDEO'].includes(tag)) return true;
+  if (element.namespaceURI === 'http://www.w3.org/2000/svg'
+    && ['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'use', 'text', 'image'].includes(tag.toLowerCase())) return true;
+  if ([...element.childNodes].some(node => node.nodeType === 3 && node.textContent.trim())) return true;
+  const transparent = value => {
+    const color = String(value ?? '').trim().toLowerCase();
+    if (!color || color === 'transparent') return true;
+    const legacy = color.match(/^(?:rgba|hsla)\([^)]*,\s*([\d.]+)\)$/);
+    if (legacy) return Number(legacy[1]) <= 0;
+    const modern = color.match(/\/\s*([\d.]+)%?\s*\)$/);
+    return Boolean(modern && Number(modern[1]) <= 0);
+  };
+  const shadow = String(style.boxShadow ?? '').trim().toLowerCase();
+  const shadowColors = shadow.match(/(?:rgba?|hsla?|color)\([^)]*\)|transparent/g) ?? [];
+  if (!transparent(style.backgroundColor) || style.backgroundImage && style.backgroundImage !== 'none'
+    || shadow && shadow !== 'none' && (shadowColors.length === 0 || shadowColors.some(color => !transparent(color)))) return true;
+  for (const side of ['Top', 'Right', 'Bottom', 'Left']) {
+    if (parseFloat(style[`border${side}Width`]) > 0
+      && !['none', 'hidden'].includes(style[`border${side}Style`])
+      && !transparent(style[`border${side}Color`])) return true;
+  }
+  return parseFloat(style.outlineWidth) > 0 && !['none', 'hidden'].includes(style.outlineStyle)
+    && !transparent(style.outlineColor);
+}
+
+function selectionVisibleRect(rect, element, container) {
+  if (!rect || !(rect.width > 0 && rect.height > 0)) return null;
+  let { left, top, right, bottom } = rect;
+  for (let node = element; node && node !== container; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const paint = /\b(?:paint|content|strict)\b/.test(style.contain ?? '');
+    const clipX = paint || node.tagName.toLowerCase() === 'svg' || (style.overflowX || style.overflow) !== 'visible';
+    const clipY = paint || node.tagName.toLowerCase() === 'svg' || (style.overflowY || style.overflow) !== 'visible';
+    if (clipX || clipY) {
+      const clip = node.getBoundingClientRect();
+      if (clipX) { left = Math.max(left, clip.left); right = Math.min(right, clip.right); }
+      if (clipY) { top = Math.max(top, clip.top); bottom = Math.min(bottom, clip.bottom); }
+    }
+    if (right <= left || bottom <= top) return null;
+  }
+  return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
+
+function selectionContentBounds(element, options = {}) {
+  if (!element) return null;
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+  for (const node of [element, ...element.querySelectorAll('*')]) {
+    if (node.closest('[data-akari-interaction]') || node.closest('defs, symbol, pattern, clipPath, mask, marker')) continue;
+    let visible = true;
+    for (let ancestor = node; ancestor && ancestor !== options.container; ancestor = ancestor.parentElement) {
+      const style = getComputedStyle(ancestor);
+      if (style.display === 'none' || ['hidden', 'collapse'].includes(style.visibility)
+        || Number(style.opacity) === 0) { visible = false; break; }
+    }
+    if (!visible || !drawsSelectionContent(node)) continue;
+    if (node.tagName.toLowerCase() === 'svg'
+      && node.querySelector('path, rect, circle, ellipse, line, polyline, polygon, use, text, image')
+      && getComputedStyle(node).backgroundColor === 'rgba(0, 0, 0, 0)') continue;
+    const raw = options.rawRect?.(node) ?? node.getBoundingClientRect();
+    const rect = options.visibleRect ? options.visibleRect(raw, node)
+      : selectionVisibleRect(raw, node, options.container);
+    if (!rect || !(rect.width > 0 && rect.height > 0)) continue;
+    left = Math.min(left, rect.left); top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right); bottom = Math.max(bottom, rect.bottom);
+  }
+  return Number.isFinite(left) ? { left, top, right, bottom, width: right - left, height: bottom - top } : null;
+}
+
+function selectableContentBranches(root, element, outputRect) {
+  let count = 0;
+  const visit = node => {
+    if (count > 1) return;
+    const style = getComputedStyle(node);
+    if (style.display === 'none' || ['hidden', 'collapse'].includes(style.visibility)
+      || Number(style.opacity) === 0 || isRuntimeElement(node)) return;
+    const rect = node.getBoundingClientRect();
+    if (node !== element && elementAddress(root, node) && rect.width > 1 && rect.height > 1
+      && drawsSelectionContent(node) && (!outputRect || rect.width < outputRect.width * 0.95
+        || rect.height < outputRect.height * 0.95)) { count++; return; }
+    for (const child of node.children) visit(child);
+  };
+  for (const child of element.children) visit(child);
+  return count;
+}
+
+function isSelectionContainer(element) {
+  return Boolean(element?.children?.length) && !drawsSelectionContent(element);
+}
+
+function selectionBoundsFor(element, options) {
+  const memo = options.boundsMemo ??= new Map();
+  if (!memo.has(element)) memo.set(element,
+    options.boundsFor ? options.boundsFor(element) : selectionContentBounds(element));
+  return memo.get(element);
+}
+
+function hasUncoveredPaintedContent(root, element, outputRect, options) {
+  const visit = node => {
+    if (node.closest('[data-akari-interaction], defs, symbol, pattern, clipPath, mask, marker')) return false;
+    if (selectableElement(root, node, outputRect, options)) return false;
+    const rect = node.getBoundingClientRect();
+    if (rect.width > 0 && Number(getComputedStyle(node).opacity) !== 0
+      && drawsSelectionContent(node)) return true;
+    return [...node.children].some(visit);
+  };
+  return [...element.children].some(visit);
+}
+
+function selectableContainer(root, element, outputRect, bounds, options = {}) {
+  if (!isSelectionContainer(element)) return true;
+  if (!bounds) return false;
+  // Keep an animated wrapper reachable while one of its painted phases is visible.
+  if (hasUncoveredPaintedContent(root, element, outputRect, options)) return true;
+  if (selectableContentBranches(root, element, outputRect) <= 1) return false;
+  const box = element.getBoundingClientRect();
+  return !(outputRect && (box.width >= outputRect.width * 0.5 || box.height >= outputRect.height * 0.5)
+    && (box.width >= bounds.width * 1.5 || box.height >= bounds.height * 1.5));
+}
+
+function selectableElement(root, element, outputRect, options = {}) {
+  const memo = options.selectableMemo ??= new Map();
+  if (memo.has(element)) return memo.get(element);
   if (!root || !element || element === root || !root.contains(element) || isRuntimeElement(element)
     || element.closest('svg') !== (element.tagName.toLowerCase() === 'svg' ? element : null)
-    || !elementAddress(root, element)) return false;
+    || !elementAddress(root, element)) { memo.set(element, false); return false; }
   const rect = element.getBoundingClientRect();
-  if (!(rect.width > 1 && rect.height > 1)) return false;
+  if (!(rect.width > 1 && rect.height > 1)) { memo.set(element, false); return false; }
   for (let ancestor = element; ancestor && root.contains(ancestor); ancestor = ancestor.parentElement) {
     const style = getComputedStyle(ancestor);
-    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) return false;
+    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) {
+      memo.set(element, false); return false;
+    }
   }
+  const bounds = selectionBoundsFor(element, options);
+  const coverage = bounds ?? rect;
   const replaced = ['img', 'video', 'canvas', 'svg'].includes(element.tagName.toLowerCase());
-  return replaced || !outputRect || rect.width < outputRect.width * 0.95
-    || rect.height < outputRect.height * 0.95;
+  const eligible = (replaced || !outputRect || coverage.width < outputRect.width * 0.95
+    || coverage.height < outputRect.height * 0.95)
+    && selectableContainer(root, element, outputRect, bounds, options);
+  memo.set(element, eligible);
+  return eligible;
 }
 
-function nearestSelectableElement(root, hit, outputRect) {
+function nearestSelectableElement(root, hit, outputRect, options = {}) {
+  options = { ...options, selectableMemo: new Map(), boundsMemo: new Map() };
   for (let element = hit; element && element !== root; element = element.parentElement) {
-    if (selectableElement(root, element, outputRect)) return element;
+    if (selectableElement(root, element, outputRect, options)) return element;
   }
   return null;
 }
 
-function firstSelectableElement(root, outputRect) {
-  return [root, ...root.querySelectorAll('*')].find(element => selectableElement(root, element, outputRect)) ?? null;
+function firstSelectableElement(root, outputRect, options = {}) {
+  options = { ...options, selectableMemo: new Map(), boundsMemo: new Map() };
+  return [root, ...root.querySelectorAll('*')].find(element => selectableElement(root, element, outputRect, options)) ?? null;
 }
 
 function elementByAddress(root, ref) {
@@ -57,5 +190,6 @@ function elementLabel(root, element) {
   return siblings.length > 1 ? `${name} ${siblings.indexOf(element) + 1}` : name;
 }
 // END element-selection
-export { isRuntimeElement, elementAddress, selectableElement, nearestSelectableElement,
+export { isRuntimeElement, elementAddress, drawsSelectionContent, selectionContentBounds,
+  isSelectionContainer, selectableContainer, selectableElement, nearestSelectableElement,
   firstSelectableElement, elementByAddress, elementLabel };

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

@@ -122,30 +122,163 @@ function elementAddress(root, element) {
   return index < 0 ? null : `${id ? '#' : '.'}${id || token}[${index}]`;
 }
 
-function selectableElement(root, element, outputRect) {
+function drawsSelectionContent(element, style = getComputedStyle(element)) {
+  const tag = element.tagName.toUpperCase();
+  if (['BASE', 'HEAD', 'LINK', 'META', 'NOSCRIPT', 'SCRIPT', 'STYLE', 'TEMPLATE', 'TITLE'].includes(tag)) return false;
+  if (['AUDIO', 'CANVAS', 'EMBED', 'IFRAME', 'IMG', 'OBJECT', 'SVG', 'VIDEO'].includes(tag)) return true;
+  if (element.namespaceURI === 'http://www.w3.org/2000/svg'
+    && ['path', 'rect', 'circle', 'ellipse', 'line', 'polyline', 'polygon', 'use', 'text', 'image'].includes(tag.toLowerCase())) return true;
+  if ([...element.childNodes].some(node => node.nodeType === 3 && node.textContent.trim())) return true;
+  const transparent = value => {
+    const color = String(value ?? '').trim().toLowerCase();
+    if (!color || color === 'transparent') return true;
+    const legacy = color.match(/^(?:rgba|hsla)\([^)]*,\s*([\d.]+)\)$/);
+    if (legacy) return Number(legacy[1]) <= 0;
+    const modern = color.match(/\/\s*([\d.]+)%?\s*\)$/);
+    return Boolean(modern && Number(modern[1]) <= 0);
+  };
+  const shadow = String(style.boxShadow ?? '').trim().toLowerCase();
+  const shadowColors = shadow.match(/(?:rgba?|hsla?|color)\([^)]*\)|transparent/g) ?? [];
+  if (!transparent(style.backgroundColor) || style.backgroundImage && style.backgroundImage !== 'none'
+    || shadow && shadow !== 'none' && (shadowColors.length === 0 || shadowColors.some(color => !transparent(color)))) return true;
+  for (const side of ['Top', 'Right', 'Bottom', 'Left']) {
+    if (parseFloat(style[`border${side}Width`]) > 0
+      && !['none', 'hidden'].includes(style[`border${side}Style`])
+      && !transparent(style[`border${side}Color`])) return true;
+  }
+  return parseFloat(style.outlineWidth) > 0 && !['none', 'hidden'].includes(style.outlineStyle)
+    && !transparent(style.outlineColor);
+}
+
+function selectionVisibleRect(rect, element, container) {
+  if (!rect || !(rect.width > 0 && rect.height > 0)) return null;
+  let { left, top, right, bottom } = rect;
+  for (let node = element; node && node !== container; node = node.parentElement) {
+    const style = getComputedStyle(node);
+    const paint = /\b(?:paint|content|strict)\b/.test(style.contain ?? '');
+    const clipX = paint || node.tagName.toLowerCase() === 'svg' || (style.overflowX || style.overflow) !== 'visible';
+    const clipY = paint || node.tagName.toLowerCase() === 'svg' || (style.overflowY || style.overflow) !== 'visible';
+    if (clipX || clipY) {
+      const clip = node.getBoundingClientRect();
+      if (clipX) { left = Math.max(left, clip.left); right = Math.min(right, clip.right); }
+      if (clipY) { top = Math.max(top, clip.top); bottom = Math.min(bottom, clip.bottom); }
+    }
+    if (right <= left || bottom <= top) return null;
+  }
+  return { left, top, right, bottom, width: right - left, height: bottom - top };
+}
+
+function selectionContentBounds(element, options = {}) {
+  if (!element) return null;
+  let left = Infinity, top = Infinity, right = -Infinity, bottom = -Infinity;
+  for (const node of [element, ...element.querySelectorAll('*')]) {
+    if (node.closest('[data-akari-interaction]') || node.closest('defs, symbol, pattern, clipPath, mask, marker')) continue;
+    let visible = true;
+    for (let ancestor = node; ancestor && ancestor !== options.container; ancestor = ancestor.parentElement) {
+      const style = getComputedStyle(ancestor);
+      if (style.display === 'none' || ['hidden', 'collapse'].includes(style.visibility)
+        || Number(style.opacity) === 0) { visible = false; break; }
+    }
+    if (!visible || !drawsSelectionContent(node)) continue;
+    if (node.tagName.toLowerCase() === 'svg'
+      && node.querySelector('path, rect, circle, ellipse, line, polyline, polygon, use, text, image')
+      && getComputedStyle(node).backgroundColor === 'rgba(0, 0, 0, 0)') continue;
+    const raw = options.rawRect?.(node) ?? node.getBoundingClientRect();
+    const rect = options.visibleRect ? options.visibleRect(raw, node)
+      : selectionVisibleRect(raw, node, options.container);
+    if (!rect || !(rect.width > 0 && rect.height > 0)) continue;
+    left = Math.min(left, rect.left); top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right); bottom = Math.max(bottom, rect.bottom);
+  }
+  return Number.isFinite(left) ? { left, top, right, bottom, width: right - left, height: bottom - top } : null;
+}
+
+function selectableContentBranches(root, element, outputRect) {
+  let count = 0;
+  const visit = node => {
+    if (count > 1) return;
+    const style = getComputedStyle(node);
+    if (style.display === 'none' || ['hidden', 'collapse'].includes(style.visibility)
+      || Number(style.opacity) === 0 || isRuntimeElement(node)) return;
+    const rect = node.getBoundingClientRect();
+    if (node !== element && elementAddress(root, node) && rect.width > 1 && rect.height > 1
+      && drawsSelectionContent(node) && (!outputRect || rect.width < outputRect.width * 0.95
+        || rect.height < outputRect.height * 0.95)) { count++; return; }
+    for (const child of node.children) visit(child);
+  };
+  for (const child of element.children) visit(child);
+  return count;
+}
+
+function isSelectionContainer(element) {
+  return Boolean(element?.children?.length) && !drawsSelectionContent(element);
+}
+
+function selectionBoundsFor(element, options) {
+  const memo = options.boundsMemo ??= new Map();
+  if (!memo.has(element)) memo.set(element,
+    options.boundsFor ? options.boundsFor(element) : selectionContentBounds(element));
+  return memo.get(element);
+}
+
+function hasUncoveredPaintedContent(root, element, outputRect, options) {
+  const visit = node => {
+    if (node.closest('[data-akari-interaction], defs, symbol, pattern, clipPath, mask, marker')) return false;
+    if (selectableElement(root, node, outputRect, options)) return false;
+    const rect = node.getBoundingClientRect();
+    if (rect.width > 0 && Number(getComputedStyle(node).opacity) !== 0
+      && drawsSelectionContent(node)) return true;
+    return [...node.children].some(visit);
+  };
+  return [...element.children].some(visit);
+}
+
+function selectableContainer(root, element, outputRect, bounds, options = {}) {
+  if (!isSelectionContainer(element)) return true;
+  if (!bounds) return false;
+  // Keep an animated wrapper reachable while one of its painted phases is visible.
+  if (hasUncoveredPaintedContent(root, element, outputRect, options)) return true;
+  if (selectableContentBranches(root, element, outputRect) <= 1) return false;
+  const box = element.getBoundingClientRect();
+  return !(outputRect && (box.width >= outputRect.width * 0.5 || box.height >= outputRect.height * 0.5)
+    && (box.width >= bounds.width * 1.5 || box.height >= bounds.height * 1.5));
+}
+
+function selectableElement(root, element, outputRect, options = {}) {
+  const memo = options.selectableMemo ??= new Map();
+  if (memo.has(element)) return memo.get(element);
   if (!root || !element || element === root || !root.contains(element) || isRuntimeElement(element)
     || element.closest('svg') !== (element.tagName.toLowerCase() === 'svg' ? element : null)
-    || !elementAddress(root, element)) return false;
+    || !elementAddress(root, element)) { memo.set(element, false); return false; }
   const rect = element.getBoundingClientRect();
-  if (!(rect.width > 1 && rect.height > 1)) return false;
+  if (!(rect.width > 1 && rect.height > 1)) { memo.set(element, false); return false; }
   for (let ancestor = element; ancestor && root.contains(ancestor); ancestor = ancestor.parentElement) {
     const style = getComputedStyle(ancestor);
-    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) return false;
+    if (style.display === 'none' || style.visibility === 'hidden' || Number(style.opacity) === 0) {
+      memo.set(element, false); return false;
+    }
   }
+  const bounds = selectionBoundsFor(element, options);
+  const coverage = bounds ?? rect;
   const replaced = ['img', 'video', 'canvas', 'svg'].includes(element.tagName.toLowerCase());
-  return replaced || !outputRect || rect.width < outputRect.width * 0.95
-    || rect.height < outputRect.height * 0.95;
+  const eligible = (replaced || !outputRect || coverage.width < outputRect.width * 0.95
+    || coverage.height < outputRect.height * 0.95)
+    && selectableContainer(root, element, outputRect, bounds, options);
+  memo.set(element, eligible);
+  return eligible;
 }
 
-function nearestSelectableElement(root, hit, outputRect) {
+function nearestSelectableElement(root, hit, outputRect, options = {}) {
+  options = { ...options, selectableMemo: new Map(), boundsMemo: new Map() };
   for (let element = hit; element && element !== root; element = element.parentElement) {
-    if (selectableElement(root, element, outputRect)) return element;
+    if (selectableElement(root, element, outputRect, options)) return element;
   }
   return null;
 }
 
-function firstSelectableElement(root, outputRect) {
-  return [root, ...root.querySelectorAll('*')].find(element => selectableElement(root, element, outputRect)) ?? null;
+function firstSelectableElement(root, outputRect, options = {}) {
+  options = { ...options, selectableMemo: new Map(), boundsMemo: new Map() };
+  return [root, ...root.querySelectorAll('*')].find(element => selectableElement(root, element, outputRect, options)) ?? null;
 }
 
 function elementByAddress(root, ref) {
@@ -340,6 +473,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();
@@ -486,6 +709,21 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     return null;
   }
 
+  function contentBounds(element, container) {
+    return selectionContentBounds(element, {
+      container,
+      visibleRect: (rect, node) => visibleFragmentRect(rect, node, container),
+      rawRect: node => node.tagName.toUpperCase() === "CANVAS"
+        ? (canvasHasDecoration(node) ? node.getBoundingClientRect()
+          : window.akari.threeRuntime?.contentBounds?.(node)
+            ?? measureCanvasBounds(node) ?? node.getBoundingClientRect())
+        : node.getBoundingClientRect(),
+    });
+  }
+  function selectionOptions(root) {
+    return { boundsFor: element => contentBounds(element, root?.parentElement) };
+  }
+
   // 断片ルートは「inset:0 全画面ラッパー + flex/絶対配置」パターン（overlay-authoring
   // 規約・text-behind-person.md 等）を許容するため、ルート自身の矩形がコンテナ（断片の
   // 親 = [data-overlay-id] 要素。overlay-runtime.js の mount() が inset:0 で全画面付与）
@@ -504,7 +742,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     );
   }
 
-  function fragmentBounds(container) {
+  function legacyFragmentBounds(container) {
     const root = fragmentRoot(container);
     if (!root) return null;
 
@@ -594,6 +832,13 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     return { left, top, right, bottom, width: right - left, height: bottom - top };
   }
 
+  function fragmentBounds(container) {
+    const root = fragmentRoot(container);
+    if (!root) return null;
+    if (drawsOwnContent(root, getComputedStyle(root))) return legacyFragmentBounds(container);
+    return contentBounds(root, container) ?? legacyFragmentBounds(container);
+  }
+
   function svgReferenceRect(element, value) {
     const id = String(value ?? '').match(/url\(["']?(?:[^#)]*#)([^)"']+)["']?\)/)?.[1];
     const svg = element.namespaceURI === 'http://www.w3.org/2000/svg'
@@ -982,7 +1227,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 +1302,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 +1418,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 +1457,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;
   }
 
@@ -1380,7 +1662,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const transform = readTransform(selectedOverlay);
     const lineRect = lineFrameGeometry(selectedOverlay);
     const focused = focusedElement();
-    const focusedGeometry = focused ? elementScreenGeometry(focused) : null;
+    const focusedGeometry = focused ? focusedSelectionGeometry(focused) : null;
     const focusedWidth = focusedGeometry && focusedGeometry.width * Math.hypot(focusedGeometry.axes.x.x, focusedGeometry.axes.x.y);
     const focusedHeight = focusedGeometry && focusedGeometry.height * Math.hypot(focusedGeometry.axes.y.x, focusedGeometry.axes.y.y);
     const focusedAngle = focusedGeometry && Math.atan2(focusedGeometry.axes.x.y, focusedGeometry.axes.x.x) * 180 / Math.PI;
@@ -1437,7 +1719,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
         }
         const layout = elementHandleLayout(focusedWidth, focusedHeight);
         const name = [...handle.classList].find(token => /^is-(?:n|e|s|w|nw|ne|se|sw|rotate|move)$/.test(token))?.slice(3);
-        handle.style.display = name === 'move' ||
+        handle.style.display = name === 'move' || (isSelectionContainer(focused) && name !== 'rotate') ||
           (['n', 's'].includes(name) && layout.hideHorizontalEdges) ||
           (['e', 'w'].includes(name) && layout.hideVerticalEdges) ? 'none' : '';
         if (name === 'rotate') {
@@ -1448,6 +1730,11 @@ function elementBoxCompanions(style, parentStyle, width, height) {
           const y = name.includes('n') ? -layout.cornerOffsetY : layout.cornerOffsetY;
           if (x || y) handle.style.translate = `${x}px ${y}px`;
           else handle.style.removeProperty('translate');
+        } else if (['n', 's', 'e', 'w'].includes(name)) {
+          const x = name === 'w' ? -layout.cornerOffsetX : name === 'e' ? layout.cornerOffsetX : 0;
+          const y = name === 'n' ? -layout.cornerOffsetY : name === 's' ? layout.cornerOffsetY : 0;
+          if (x || y) handle.style.translate = `${x}px ${y}px`;
+          else handle.style.removeProperty('translate');
         }
         if (name && name !== 'move' && name !== 'rotate') {
           const directions = ['ew-resize', 'nwse-resize', 'ns-resize', 'nesw-resize'];
@@ -1612,7 +1899,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   }
   function focusedElement() {
     if (!selectedElementFocus() || !selectedOverlay) return null;
-    return elementByAddress(fragmentRoot(selectedOverlay), elementFocus.ref);
+    const root = fragmentRoot(selectedOverlay);
+    return elementByAddress(root, elementFocus.ref);
   }
   function selectedElementFocus() {
     return elementFocus?.overlayId === selectedId
@@ -1621,10 +1909,23 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   function reconcileElementFocus() {
     if (!selectedElementFocus()) return;
     const root = fragmentRoot(selectedOverlay);
-    if (root && !elementByAddress(root, elementFocus.ref)) focusElement(null);
+    if (!root) return;
+    const ref = elementFocus.ref;
+    const element = elementByAddress(root, ref);
+    if (!element) { focusElement(null); return; }
+    if (selectedOverlay?.isConnected && !selectableElement(root, element, stage?.getBoundingClientRect(), selectionOptions(root))) {
+      requestAnimationFrame(() => {
+        if (elementFocus?.ref === ref && selectedOverlay?.isConnected) {
+          const currentRoot = fragmentRoot(selectedOverlay);
+          const current = elementByAddress(currentRoot, ref);
+          if (!current || !selectableElement(currentRoot, current, stage?.getBoundingClientRect(), selectionOptions(currentRoot))) focusElement(null);
+        }
+      });
+    }
   }
   function focusElement(element, { notify = true } = {}) {
     const root = fragmentRoot(selectedOverlay);
+    if (element && !selectableElement(root, element, stage?.getBoundingClientRect(), selectionOptions(root))) element = null;
     const ref = element && elementAddress(root, element);
     const next = ref ? { overlayId: selectedId, ref, tag: element.tagName.toLowerCase(),
       label: elementLabel(root, element) } : null;
@@ -1643,7 +1944,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const root = fragmentRoot(container);
     const hit = event.target instanceof Element && root?.contains(event.target) ? event.target
       : document.elementsFromPoint(event.clientX, event.clientY).find(element => root?.contains(element)) ?? null;
-    focusElement(nearestSelectableElement(root, hit, stage?.getBoundingClientRect()));
+    focusElement(nearestSelectableElement(root, hit, stage?.getBoundingClientRect(), selectionOptions(root)));
   }
   function focusElementAtPoint(overlayId, clientX, clientY, attempt = 0) {
     if (window.akari.capabilities?.elementSelection !== true || !Number.isFinite(clientX)
@@ -1662,7 +1963,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       return false;
     }
     const hit = document.elementsFromPoint(clientX, clientY).find(element => root.contains(element)) ?? null;
-    focusElement(nearestSelectableElement(root, hit, stage?.getBoundingClientRect()));
+    focusElement(nearestSelectableElement(root, hit, stage?.getBoundingClientRect(), selectionOptions(root)));
     return true;
   }
 
@@ -1746,7 +2047,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const element = target.element?.isConnected ? target.element
       : elementByAddress(fragmentRoot(containerById(target.overlayId)), target.ref);
     if (!element?.isConnected) return null;
-    const geometry = elementScreenGeometry(element);
+    const geometry = focusedSelectionGeometry(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,
@@ -1773,7 +2074,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       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);
+        if (selectableElement(root, node, stage?.getBoundingClientRect(), selectionOptions(root))) path.unshift(node);
       }
       for (const node of path) append(elementLabel(root, node), () => focusElement(node),
         { kind: 'element', element: node, overlayId: selectedId, ref: elementAddress(root, node) });
@@ -2264,6 +2565,48 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     elementGeometryCache = { element, signature, geometry };
     return geometry;
   }
+  function focusedSelectionGeometry(element) {
+    const geometry = elementScreenGeometry(element);
+    if (!isSelectionContainer(element)) return geometry;
+    const container = selectedOverlay ?? element.parentElement;
+    const bounds = contentBounds(element, container);
+    if (!bounds) return geometry;
+    const scaleX = Math.hypot(geometry.axes.x.x, geometry.axes.x.y);
+    const scaleY = Math.hypot(geometry.axes.y.x, geometry.axes.y.y);
+    if (!(scaleX > 0 && scaleY > 0)) return geometry;
+    const ux = { x: geometry.axes.x.x / scaleX, y: geometry.axes.x.y / scaleX };
+    const uy = { x: geometry.axes.y.x / scaleY, y: geometry.axes.y.y / scaleY };
+    const angle = Math.abs(Math.atan2(ux.y, ux.x));
+    if (angle < 0.001) return { ...geometry,
+      center: { x: bounds.left + bounds.width / 2, y: bounds.top + bounds.height / 2 },
+      width: bounds.width / scaleX, height: bounds.height / scaleY };
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const node of element.querySelectorAll('*')) {
+      if (!drawsSelectionContent(node) || !isPaintedElement(node, container)) continue;
+      const rect = visibleFragmentRect(node.getBoundingClientRect(), node, container);
+      if (!rect) continue;
+      const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+      const dx = center.x - geometry.center.x, dy = center.y - geometry.center.y;
+      const x = dx * ux.x + dy * ux.y, y = dx * uy.x + dy * uy.y;
+      const halfX = (node.offsetWidth || rect.width / scaleX) * scaleX / 2;
+      const halfY = (node.offsetHeight || rect.height / scaleY) * scaleY / 2;
+      minX = Math.min(minX, x - halfX); maxX = Math.max(maxX, x + halfX);
+      minY = Math.min(minY, y - halfY); maxY = Math.max(maxY, y + halfY);
+    }
+    if (!Number.isFinite(minX)) return geometry;
+    const midX = (minX + maxX) / 2, midY = (minY + maxY) / 2;
+    return { ...geometry, center: { x: geometry.center.x + midX * ux.x + midY * uy.x,
+      y: geometry.center.y + midX * ux.y + midY * uy.y },
+    width: (maxX - minX) / scaleX, height: (maxY - minY) / scaleY };
+  }
+  function focusedSelectionRect(element) {
+    const geometry = focusedSelectionGeometry(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 { left: geometry.center.x - width / 2, top: geometry.center.y - height / 2,
+      right: geometry.center.x + width / 2, bottom: geometry.center.y + height / 2,
+      width, height };
+  }
   function moveElementPointTo(gesture, horizontal, vertical, target) {
     const geometry = elementScreenGeometry(gesture.element);
     const point = elementPoint(geometry, horizontal, vertical);
@@ -2629,8 +2972,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
         && (!scoped || scoped.selectId === container.dataset.overlayId)) {
         const root = fragmentRoot(container);
         const hit = event.target instanceof Element && root?.contains(event.target) ? event.target : null;
-        const element = nearestSelectableElement(root, hit, stage?.getBoundingClientRect());
-        const rect = element?.getBoundingClientRect() ?? fragmentBounds(container);
+        const element = nearestSelectableElement(root, hit, stage?.getBoundingClientRect(), selectionOptions(root));
+        const rect = element ? focusedSelectionRect(element) : fragmentBounds(container);
         if (!rect || selectedOverlay === container
           && selectedElementFocus()?.ref === elementAddress(root, element)) { hideHover(); return; }
         showHoverFrame(rect, null, container.dataset.overlayId, false, false);
@@ -3983,6 +4326,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();
@@ -4042,7 +4386,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       if (window.akari.capabilities?.elementSelection === true && event.isTrusted && !event.shiftKey) {
         const root = fragmentRoot(hit);
         const target = event.target instanceof Element && root?.contains(event.target)
-          ? nearestSelectableElement(root, event.target, stage?.getBoundingClientRect()) : null;
+          ? nearestSelectableElement(root, event.target, stage?.getBoundingClientRect(), selectionOptions(root)) : null;
         clickOrigin.hitId = hit.dataset.overlayId;
         clickOrigin.elementRef = target ? elementAddress(root, target) : null;
       }
@@ -4057,7 +4401,10 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       if (!selectedOverlay || (window.akari.capabilities?.elementSelection === true
         ? selectedId !== hit.dataset.overlayId : selectedOverlay !== hit)) return;
       if (!event.shiftKey) {
-        if (clickOrigin?.hitId === selectedId) {
+        const focused = focusedElement();
+        if (focused && isSelectionContainer(focused) && focused.contains(event.target)) {
+          clickOrigin.preservedContainer = true;
+        } else if (clickOrigin?.hitId === selectedId) {
           focusElement(elementByAddress(fragmentRoot(selectedOverlay), clickOrigin.elementRef));
         } else focusElementAt(selectedOverlay, event);
       } else if (selectedElementFocus()) focusElement(null);
@@ -4093,7 +4440,12 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     }
 
     selectOverlay(container);
-    if (!event.shiftKey) focusElementAt(container, event);
+    if (!event.shiftKey) {
+      const focused = focusedElement();
+      if (focused && isSelectionContainer(focused) && focused.contains(event.target)) {
+        clickOrigin.preservedContainer = true;
+      } else focusElementAt(container, event);
+    }
     else if (selectedElementFocus()) focusElement(null);
     if (window.akari.capabilities?.elementSelection === true && clickOrigin) {
       clickOrigin.hitId = selectedId;
@@ -4833,6 +5185,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) {
@@ -4855,7 +5208,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     else selectOverlay(hit);
     if (window.akari.capabilities?.elementSelection === true
       && event.isTrusted && !event.shiftKey && selectedOverlay) {
-      if (!nextId && clickOrigin?.hitId === selectedId) {
+      if (clickOrigin?.preservedContainer) focusElementAt(selectedOverlay, event);
+      else if (!nextId && clickOrigin?.hitId === selectedId) {
         focusElement(elementByAddress(fragmentRoot(selectedOverlay), clickOrigin.elementRef));
       } else focusElementAt(selectedOverlay, event);
     }
@@ -4923,7 +5277,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       if (event.key === 'Escape' || event.key === 'Enter' && event.shiftKey) {
         const root = fragmentRoot(selectedOverlay);
         const parent = nearestSelectableElement(root, focusedElement()?.parentElement,
-          stage?.getBoundingClientRect());
+          stage?.getBoundingClientRect(), selectionOptions(root));
         focusElement(parent); stop(); return;
       }
       if ((event.key === 'Delete' || event.key === 'Backspace'
@@ -4935,7 +5289,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     }
     if (event.key === 'Enter' && !event.shiftKey && !activeEdit && !selectedElementFocus()
       && selectedOverlay && canFocusElement(selectedOverlay)) {
-      const first = firstSelectableElement(fragmentRoot(selectedOverlay), stage?.getBoundingClientRect());
+      const root = fragmentRoot(selectedOverlay);
+      const first = firstSelectableElement(root, stage?.getBoundingClientRect(), selectionOptions(root));
       if (first) {
         focusElement(first);
         event.preventDefault(); event.stopPropagation(); event.stopImmediatePropagation();
@@ -5329,11 +5684,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);
@@ -5444,6 +5861,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);