akari-video 1.2.0-beta.5 → 1.2.0

package/package.json

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

package/src/kits.mjs

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

package/src/vendor-sources.mjs

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

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

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

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

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

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

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

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

@@ -1722,50 +1722,143 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     Object.assign(selectionFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
       width: `${rect.width}px`, height: `${rect.height}px` });
   }
+  let breadcrumbResizeObserver = null;
+  let breadcrumbHoverActive = false;
+  let breadcrumbHoverSuppressedAt = null;
+  function clearBreadcrumbHover() {
+    if (!breadcrumbHoverActive) return;
+    hideHover();
+  }
+  function breadcrumbBounds(target) {
+    if (target.kind === 'stage') return { rect: stage?.getBoundingClientRect() };
+    if (target.kind === 'node') {
+      const node = treeNode(target.id);
+      const leaf = containerById(target.id);
+      const lineRect = leaf && lineFrameGeometry(leaf);
+      const rect = node?.kind !== 'leaf' ? unionBounds(visibleMembers(target.id))
+        : lineRect ?? (leaf ? fragmentBounds(leaf) : null);
+      return { rect, angle: lineRect?.angle ?? null };
+    }
+    if (target.kind === 'item') {
+      const container = containerById(target.id);
+      return { rect: container ? fragmentBounds(container) : null };
+    }
+    const element = target.element?.isConnected ? target.element
+      : elementByAddress(fragmentRoot(containerById(target.overlayId)), target.ref);
+    if (!element?.isConnected) return null;
+    const geometry = elementScreenGeometry(element);
+    const width = geometry.width * Math.hypot(geometry.axes.x.x, geometry.axes.x.y);
+    const height = geometry.height * Math.hypot(geometry.axes.y.x, geometry.axes.y.y);
+    return { rect: { left: geometry.center.x - width / 2, top: geometry.center.y - height / 2,
+      width, height }, angle: Math.atan2(geometry.axes.x.y, geometry.axes.x.x) * 180 / Math.PI };
+  }
   function renderScopeBreadcrumb() {
     const nav = document.querySelector('[data-akari-ui="preview-scope-breadcrumb"]');
     if (!nav) return;
+    if (!breadcrumbResizeObserver && typeof ResizeObserver !== 'undefined' && nav.parentElement) {
+      breadcrumbResizeObserver = new ResizeObserver(() => renderScopeBreadcrumb());
+      breadcrumbResizeObserver.observe(nav.parentElement);
+    }
+    clearBreadcrumbHover();
+    const entries = [];
+    const append = (label, action, target) => entries.push({ label, action, target });
     if (selectedElementFocus() && selectedOverlay) {
-      nav.hidden = false;
-      nav.replaceChildren();
-      const append = (label, action) => {
-        if (nav.childNodes.length) nav.append(' › ');
-        const button = document.createElement('button');
-        button.type = 'button'; button.textContent = label;
-        button.addEventListener('click', action);
-        nav.appendChild(button);
-      };
-      append('全体', () => { clearSelection(); publishScopedSelection(); });
+      append('全体', () => { clearSelection(); publishScopedSelection(); }, { kind: 'stage' });
       for (const id of lineage(selectionTree(), scopeId)) {
-        append(treeNode(id)?.label ?? id, () => applyScopedSelection({ selectId: id, scopeId: treeNode(id)?.parentId ?? null }));
+        append(treeNode(id)?.label ?? id, () => applyScopedSelection({ selectId: id, scopeId: treeNode(id)?.parentId ?? null }),
+          { kind: 'node', id });
       }
       const name = window.akari.state?.summary?.overlays?.find(overlay => overlay.id === selectedId)?.name ?? selectedId;
-      append(name, () => focusElement(null));
+      append(name, () => focusElement(null), { kind: 'item', id: selectedId });
       const root = fragmentRoot(selectedOverlay);
       const path = [];
       for (let node = focusedElement(); node && node !== root; node = node.parentElement) {
         if (selectableElement(root, node, stage?.getBoundingClientRect())) path.unshift(node);
       }
-      for (const node of path) append(elementLabel(root, node), () => focusElement(node));
-      return;
-    }
-    nav.hidden = scopeId === floorScopeId || !selectionTree().length;
-    nav.replaceChildren();
-    if (nav.hidden) return;
-    const path = lineage(selectionTree(), scopeId);
-    const ids = floorScopeId === null ? [null, ...path] : path.slice(path.indexOf(floorScopeId));
-    ids.forEach((id, index) => {
-      if (index) nav.append(' › ');
-      const button = document.createElement('button');
-      button.type = 'button';
-      button.textContent = id === null ? '全体' : treeNode(id)?.label ?? id;
-      button.addEventListener('click', () => {
+      for (const node of path) append(elementLabel(root, node), () => focusElement(node),
+        { kind: 'element', element: node, overlayId: selectedId, ref: elementAddress(root, node) });
+    } else if (scopeId !== floorScopeId && selectionTree().length) {
+      const path = lineage(selectionTree(), scopeId);
+      const ids = floorScopeId === null ? [null, ...path] : path.slice(path.indexOf(floorScopeId));
+      ids.forEach(id => append(id === null ? '全体' : treeNode(id)?.label ?? id, () => {
         const hit = descendantLeafIds(selectionTree(), selectedId)[0] ?? selectedId;
         const next = resolveScopedSelection(selectionTree(), id, hit);
         applyScopedSelection({ scopeId: id, selectId: next.scopeId === id ? next.selectId : null });
+      }, id === null ? { kind: 'stage' } : { kind: 'node', id }));
+    }
+    nav.replaceChildren();
+    nav.hidden = entries.length === 0;
+    if (nav.hidden) return;
+    const separator = () => {
+      const span = document.createElement('span');
+      span.className = 'akari-breadcrumb-separator'; span.textContent = ' › ';
+      return span;
+    };
+    const button = entry => {
+      const node = document.createElement('button');
+      node.type = 'button'; node.textContent = entry.label;
+      const show = () => {
+        let geometry;
+        try { geometry = breadcrumbBounds(entry.target); } catch { return; }
+        if (!geometry?.rect || geometry.rect.width <= 0 || geometry.rect.height <= 0) return;
+        breadcrumbHoverActive = true;
+        showHoverFrame(geometry.rect, geometry.angle ?? null, entry.target.id ?? '', true);
+      };
+      node.addEventListener('pointerenter', () => {
+        if (!breadcrumbHoverSuppressedAt) show();
       });
-      nav.appendChild(button);
-    });
+      node.addEventListener('pointermove', event => {
+        const point = breadcrumbHoverSuppressedAt;
+        if (!point || Math.hypot(event.clientX - point.x, event.clientY - point.y) < 1) return;
+        breadcrumbHoverSuppressedAt = null;
+        show();
+      });
+      node.addEventListener('focus', show);
+      node.addEventListener('pointerleave', () => {
+        if (node.isConnected) breadcrumbHoverSuppressedAt = null;
+        clearBreadcrumbHover();
+      });
+      node.addEventListener('blur', clearBreadcrumbHover);
+      node.addEventListener('click', event => {
+        breadcrumbHoverSuppressedAt = { x: event.clientX, y: event.clientY };
+        clearBreadcrumbHover(); entry.action();
+      });
+      return node;
+    };
+    const add = (entry, index) => {
+      if (index) nav.appendChild(separator());
+      nav.appendChild(button(entry));
+    };
+    entries.forEach(add);
+    const buttons = [...nav.querySelectorAll('button')];
+    const widths = buttons.map(node => node.getBoundingClientRect().width);
+    const separatorWidth = nav.querySelector('.akari-breadcrumb-separator')?.getBoundingClientRect().width ?? 0;
+    const available = Math.max(0, nav.parentElement.getBoundingClientRect().width - 16);
+    if (widths.reduce((sum, width) => sum + width, 0) + separatorWidth * (entries.length - 1) <= available) return;
+    if (entries.length < 4) {
+      const each = Math.max(3 * 10, (available - separatorWidth * (entries.length - 1) - widths[0]) / Math.max(1, entries.length - 1));
+      buttons.slice(1).forEach(node => { node.style.maxWidth = `${each}px`; });
+      return;
+    }
+    const ellipsis = document.createElement('span');
+    ellipsis.textContent = '…'; ellipsis.setAttribute('aria-hidden', 'true');
+    nav.appendChild(ellipsis);
+    const ellipsisWidth = ellipsis.getBoundingClientRect().width;
+    ellipsis.remove();
+    let start = entries.length - 2;
+    let used = widths[0] + widths[start] + widths[start + 1] + ellipsisWidth + 3 * separatorWidth;
+    while (start > 2 && used + widths[start - 1] + separatorWidth <= available) {
+      start--; used += widths[start] + separatorWidth;
+    }
+    nav.replaceChildren();
+    add(entries[0], 0);
+    nav.appendChild(separator()); nav.appendChild(ellipsis);
+    for (let index = start; index < entries.length; index++) add(entries[index], index);
+    if (used > available) {
+      const tails = [...nav.querySelectorAll('button')].slice(1);
+      const tailWidth = Math.max(30, (available - widths[0] - ellipsisWidth - 3 * separatorWidth) / tails.length);
+      tails.forEach(node => { node.style.maxWidth = `${tailWidth}px`; });
+    }
   }
   function publishScopedSelection(notify = true) {
     syncLazyBag();
@@ -2117,6 +2210,13 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const parts = String(value ?? '').match(/[-+]?(?:\d*\.)?\d+(?:e[-+]?\d+)?px/giu) ?? [];
     return { x: Number.parseFloat(parts[0]) || 0, y: Number.parseFloat(parts[1]) || 0 };
   }
+  const elementDecimal = new Intl.NumberFormat('en-US', { useGrouping: false, maximumFractionDigits: 2 });
+  function formatElementNumber(value) {
+    return elementDecimal.format(Math.round((value + Number.EPSILON) * 100) / 100 || 0);
+  }
+  function formatElementTranslate(x, y) {
+    return `${formatElementNumber(x)}px ${formatElementNumber(y)}px`;
+  }
   function elementScreenGeometry(element) {
     const rect = element.getBoundingClientRect();
     const center = { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
@@ -2185,14 +2285,18 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   }
   function elementWriteStyle(gesture, dimensionNames = []) {
     const style = {};
-    for (const name of dimensionNames) style[name] = gesture.element.style.getPropertyValue(name);
+    for (const name of dimensionNames) {
+      style[name] = `${formatElementNumber(Number.parseFloat(gesture.element.style.getPropertyValue(name)))}px`;
+    }
     for (const name of elementInlineProperties) {
       if (name === 'translate' || dimensionNames.includes(name)) continue;
       const now = gesture.element.style.getPropertyValue(name);
-      if (now && now !== gesture.originalInline[name][0]) style[name] = now;
+      if (now && now !== gesture.originalInline[name][0]) {
+        style[name] = name === 'rotate' ? `${formatElementNumber(Number.parseFloat(now))}deg` : now;
+      }
     }
-    const translate = gesture.element.style.translate;
-    if (translate && translate !== gesture.originalInline.translate[0]) style.translate = translate;
+    const translate = formatElementTranslate(gesture.x, gesture.y);
+    if (translate !== formatElementTranslate(gesture.startX, gesture.startY)) style.translate = translate;
     return style;
   }
   function beginElementGesture(event, handleEl) {
@@ -2214,7 +2318,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       startGeometry: before, startClientX: event.clientX, startClientY: event.clientY,
       startWidth: Number.parseFloat(declared.width) || before.width,
       startHeight: Number.parseFloat(declared.height) || before.height,
-      x: translate.x, y: translate.y, moved: false, writeContext: captureWriteContext() };
+      x: translate.x, y: translate.y, startX: translate.x, startY: translate.y,
+      moved: false, writeContext: captureWriteContext() };
     if (startStyle.display === 'inline') {
       element.style.display = 'inline-block';
       const next = element.getBoundingClientRect();
@@ -2362,12 +2467,15 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     const gesture = elementNudge;
     elementNudge = null;
     if (!gesture) return;
-    if (Math.abs(gesture.x - gesture.startX) < 0.5 && Math.abs(gesture.y - gesture.startY) < 0.5) {
+    const translate = formatElementTranslate(gesture.x, gesture.y);
+    if (Math.abs(gesture.x - gesture.startX) < 0.5 && Math.abs(gesture.y - gesture.startY) < 0.5
+      || translate === formatElementTranslate(gesture.startX, gesture.startY)) {
       gesture.element.style.translate = gesture.originalInline;
       if (gesture.originalDisplay !== undefined) gesture.element.style.display = gesture.originalDisplay;
+      refreshSelectionFrame();
       return;
     }
-    const style = { translate: `${gesture.x}px ${gesture.y}px` };
+    const style = { translate };
     if (gesture.originalDisplay !== undefined) style.display = 'inline-block';
     enqueueWrite(gesture.writeContext, gesture.overlayId,
       { element: { ref: gesture.ref, tag: gesture.tag,
@@ -2475,17 +2583,41 @@ function elementBoxCompanions(style, parentStyle, width, height) {
   }
 
   function hideHover() {
+    breadcrumbHoverActive = false;
     hoverEvent = null;
     if (hoverTick !== null) cancelAnimationFrame(hoverTick);
     hoverTick = null;
-    if (hoverFrame) hoverFrame.hidden = true;
+    if (hoverFrame) {
+      hoverFrame.hidden = true;
+      hoverFrame.removeAttribute('data-breadcrumb-hover');
+    }
+  }
+  function showHoverFrame(rect, angle = null, overlayId = '', breadcrumb = false, ariaHidden = true) {
+    if (!hoverFrame) {
+      hoverFrame = document.createElement('div');
+      hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
+      if (ariaHidden) hoverFrame.setAttribute('aria-hidden', 'true');
+      Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none',
+        boxSizing: 'border-box', border: '1px solid var(--akari-accent, #4da3ff)',
+        opacity: '0.45', zIndex: '90' });
+      document.body.appendChild(hoverFrame);
+    }
+    if (breadcrumb) hoverFrame.setAttribute('data-breadcrumb-hover', 'true');
+    else hoverFrame.removeAttribute('data-breadcrumb-hover');
+    hoverFrame.dataset.overlayId = overlayId;
+    hoverFrame.hidden = false;
+    Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
+      width: `${rect.width}px`, height: `${rect.height}px`,
+      transform: angle === null ? '' : `rotate(${angle}deg)` });
   }
   function scheduleHover(event) {
+    if (breadcrumbHoverActive) return;
     if (!interactionEnabled || activeDrag || activeResize || activeEdit || event.buttons) { hideHover(); return; }
     hoverEvent = event;
     if (hoverTick !== null) return;
     hoverTick = requestAnimationFrame(() => {
       hoverTick = null;
+      if (breadcrumbHoverActive) { hoverEvent = null; return; }
       const event = hoverEvent;
       if (!event || activeDrag || activeResize || activeEdit) { hideHover(); return; }
       const container = overlayForEvent(event);
@@ -2501,17 +2633,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
         const rect = element?.getBoundingClientRect() ?? fragmentBounds(container);
         if (!rect || selectedOverlay === container
           && selectedElementFocus()?.ref === elementAddress(root, element)) { hideHover(); return; }
-        if (!hoverFrame) {
-          hoverFrame = document.createElement('div');
-          hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
-          Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none', boxSizing: 'border-box',
-            border: '1px solid var(--akari-accent, #4da3ff)', opacity: '0.45', zIndex: '90' });
-          document.body.appendChild(hoverFrame);
-        }
-        hoverFrame.dataset.overlayId = container.dataset.overlayId;
-        hoverFrame.hidden = false;
-        Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
-          width: `${rect.width}px`, height: `${rect.height}px`, transform: '' });
+        showHoverFrame(rect, null, container.dataset.overlayId, false, false);
         return;
       }
       const next = isSelectable(container) && resolveScopedSelection(selectionTree(), scopeId,
@@ -2524,20 +2646,7 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       const rect = node && node.kind !== 'leaf' ? unionBounds(visibleMembers(next.selectId))
         : leaf?.dataset.role === 'shape-line' ? lineRect : leaf ? fragmentBounds(leaf) : null;
       if (!rect) { hideHover(); return; }
-      if (!hoverFrame) {
-        hoverFrame = document.createElement('div');
-        hoverFrame.setAttribute('data-akari-ui', 'preview-hover-frame');
-        hoverFrame.setAttribute('aria-hidden', 'true');
-        // Standalone hosts also get a non-interactive, viewport-based frame.
-        Object.assign(hoverFrame.style, { position: 'fixed', pointerEvents: 'none',
-          boxSizing: 'border-box', border: '1px solid var(--akari-accent, #4da3ff)', opacity: '0.45', zIndex: '90' });
-        document.body.appendChild(hoverFrame);
-      }
-      hoverFrame.dataset.overlayId = next.selectId;
-      hoverFrame.hidden = false;
-      Object.assign(hoverFrame.style, { left: `${rect.left}px`, top: `${rect.top}px`,
-        width: `${rect.width}px`, height: `${rect.height}px`,
-        transform: lineRect ? `rotate(${lineRect.angle}deg)` : '' });
+      showHoverFrame(rect, lineRect?.angle ?? null, next.selectId);
     });
   }
 
@@ -2592,13 +2701,15 @@ function elementBoxCompanions(style, parentStyle, width, height) {
       const displayScale = stage?.getBoundingClientRect().width / outputSize().width || 1;
       const outputDx = (rect.left + rect.width / 2 - drag.startCenterX) / displayScale;
       const outputDy = (rect.top + rect.height / 2 - drag.startCenterY) / displayScale;
-      if (!drag.moved || (Math.abs(outputDx) < 0.5 && Math.abs(outputDy) < 0.5)) {
+      const translate = formatElementTranslate(drag.x, drag.y);
+      if (!drag.moved || (Math.abs(outputDx) < 0.5 && Math.abs(outputDy) < 0.5)
+        || translate === formatElementTranslate(drag.startX, drag.startY)) {
         drag.element.style.translate = drag.originalInline;
         if (drag.originalDisplay !== undefined) drag.element.style.display = drag.originalDisplay;
         refreshSelectionFrame();
         return null;
       }
-      const style = { translate: `${drag.x}px ${drag.y}px` };
+      const style = { translate };
       if (drag.originalDisplay !== undefined) style.display = 'inline-block';
       const record = enqueueWrite(drag.writeContext, drag.overlayId,
         { element: { ref: drag.elementRef, tag: drag.elementTag,
@@ -3887,8 +3998,8 @@ function elementBoxCompanions(style, parentStyle, width, height) {
     hideHover();
     clickOrigin = { selectedId, scopeId, moved: false, hadMultiple: selectedIds.length > 1 };
 
+    if (event.target instanceof Element && event.target.closest('[data-akari-ui="preview-scope-breadcrumb"]')) return;
     if (selectionTree().length) {
-      if (event.target instanceof Element && event.target.closest('[data-akari-ui="preview-scope-breadcrumb"]')) return;
       const handle = findHandleElement(event.target);
       if (handle) {
         if (selectedIds.length > 1) return;