akari-video 1.3.0-beta.1 → 1.3.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "akari-video",
-  "version": "1.3.0-beta.1",
+  "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.3.0-beta.1",
+  "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) {
@@ -576,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 で全画面付与）
@@ -594,7 +742,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     );
   }
 
-  function fragmentBounds(container) {
+  function legacyFragmentBounds(container) {
     const root = fragmentRoot(container);
     if (!root) return null;
 
@@ -684,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'
@@ -1507,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;
@@ -1564,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') {
@@ -1575,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'];
@@ -1739,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
@@ -1748,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;
@@ -1770,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)
@@ -1789,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;
   }
 
@@ -1873,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,
@@ -1900,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) });
@@ -2391,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);
@@ -2756,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);
@@ -4170,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;
       }
@@ -4185,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);
@@ -4221,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;
@@ -4984,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);
     }
@@ -5052,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'
@@ -5064,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();