editor-gui

エディター・ツールキット

GUI コンポーネントを組み合わせて、動画編集インターフェースを構築します。各コンポーネントは、独立したカスタム要素です。各コンポーネントは、target 属性を介してコンポジションに接続します。コンポジション自体は、composition スキルを使って構築します。これらのコンポーネントは、その周囲にコントロールとビューを追加します。

クイックスタート

<ef-timegroup id="my-video">
  <ef-video src="/video.mp4"></ef-video>
</ef-timegroup>

<ef-controls target="my-video">
  <ef-toggle-play></ef-toggle-play>
  <ef-scrubber></ef-scrubber>
  <ef-time-display></ef-time-display>
</ef-controls>

ここでは ef-timegroup に mode を設定していないため、デフォルトの contain が使用されます。その長さはハードコードされた数値ではなく、video.mp4 自体の長さから取得されます。期間のモデル全体については、composition スキルの「Timegroups & sequencing」セクションを参照してください。

コアコンセプト：Target と Bridge

各再生コントロール（ef-play、ef-pause、ef-toggle-play、ef-toggle-loop、ef-volume、ef-mute、ef-scrubber、ef-time-display）は、次の順序で操作対象のコンポジションを解決します。

1. 設定されている場合は、独自の target="id-or-selector" 属性を使用します。この場合、直接解決されます。
2. それ以外の場合は、祖先の ef-controls、ef-preview、ef-configuration 要素をたどります。独自の target がある祖先は、1 ホップで解決されます。target のない ef-configuration 祖先は、自身に解決されます。target のない ef-controls または ef-preview 祖先は、さらに上位を調べるために通り過ぎます。
3. 最後の手段として、最も近い外側の時間ルートに解決されます。

ef-controls は純粋なプロキシです。それ自体は何もレンダリングしません。子孫のコントロール群に共通の target を指定できるため、各コントロールに個別に設定する必要はありません。

<ef-timegroup id="my-video" mode="contain">…</ef-timegroup>


<ef-controls target="my-video">
  <ef-toggle-play></ef-toggle-play>
  <ef-scrubber></ef-scrubber>
</ef-controls>

ef-canvas、ef-hierarchy、ef-timeline は、別個の独立した仕組みである共有の SelectionBridge を通じて選択状態を共有します。この仕組みは、前述の再生ブリッジとは異なります。ef-hierarchy の行を選択すると ef-canvas で強調表示され、その逆も機能します。どちらの要素も、もう一方を直接参照する必要はありません。

プレビューとキャンバス

ef-preview は薄いパススルーコンテナーです。ポインターがどの要素に重なっているかを追跡し、focus-changed を発火します。ef-canvas は内部でこれを使い、ホバー時のハイライトを表示します。

ef-canvas は ef-preview と同様に、コンポジションをライト DOM の子要素としてラップします。コンポジションの上に直接、クリックによる選択、ドラッグによる移動、角のリサイズ、回転の機能を追加します。SelectionBridge を通じて、選択状態を ef-hierarchy および ef-timeline と共有します。明示的な target を設定しない場合、最初にスロットへ割り当てられた時間要素の id を自動的に割り当てます。オーバーレイを表示したまま操作できないようにするには、readonly を設定します。

<ef-canvas class="relative">
  <ef-timegroup id="scene" mode="contain" class="w-[1920px] h-[1080px]">
    <ef-video id="bg" src="/bg.mp4" class="absolute inset-0 size-full object-cover"></ef-video>
    <ef-text id="title" duration="5s" class="absolute top-12 left-12 text-6xl text-white">Title</ef-text>
  </ef-timegroup>
</ef-canvas>

• 選択可能な要素、つまり id を持つ任意の TemporalElement をクリックすると選択できます。これにより、現在の選択が置き換えられます。
• キャンバスの何もない背景をクリックすると、選択が解除されます。
• 何もない背景からドラッグすると、マーキーを描画できます。マーキーに触れたすべての要素が選択されます。既存の選択を置き換えずに追加するには、離すときに Shift または Cmd/Ctrl を押したままにします。
• 選択ボックスの本体をドラッグすると移動できます。
• 角または辺のハンドルをドラッグするとサイズを変更できます。縦横比を固定するには Shift を押したままにします。中心からサイズを変更するには Cmd/Ctrl を押したままにします。
• 回転ハンドルをドラッグすると回転できます。15°刻みでスナップするには Shift を押したままにします。
• ef-canvas は、ドラッグ、リサイズ、回転のジェスチャーが終了したときに、単一の canvas-transform イベント（{ elementId }）を発火します。ドラッグ中は継続的に発火しません。
• ef-canvas はキーボード操作を標準でサポートしていません。矢印キーによる移動や削除などはできません。また、単一の要素を Shift キーまたは Cmd キーを押しながらクリックして複数選択することもできません。複数選択への追加に対応しているのは、マーキードラッグのみです。

ef-pan-zoom は、コンテンツをパンおよびズーム可能なビューポート内にラップします。ドラッグするとパンできます。ホイールまたはピンチジェスチャーでズームします。screenToCanvas()、canvasToScreen()、reset()、fitToContent() メソッドと、transform-changed イベントを提供します。シャドウルートはありません。コンテンツラッパーは通常のライト DOM の子要素で、[part="content"] として公開されています。

ef-fit-scale はライト DOM コンテナーです。縦横比を維持しながら、最初の子要素を利用可能なスペースに収まるよう拡大縮小します。ResizeObserver または MutationObserver の変更があるたびに、スケールを再計算します。通常は、固定解像度のコンポジションを ef-pan-zoom 内にラップするために使用します。

再生と表示のコントロール

ef-play と ef-pause は、再生中または一時停止中にそれぞれ自身を非表示にします。独自のボタンをデフォルトスロットのコンテンツとしてラップします。ef-toggle-play はクリックすると、slot="play" と slot="pause" のコンテンツを切り替えます。ef-toggle-loop はクリックするとループモードを切り替えます。3つとも、上記の target/bridge パターンを通じてターゲットを解決します。

ef-volume は 0 から 1 までのネイティブな範囲スライダーで、解決されたコンポジションの音量にバインドされます。ef-mute はクリックすると、slot="muted" と slot="unmuted" のコンテンツを切り替えます。ef-fullscreen と ef-pip は、それぞれの target に対して Fullscreen API と Picture-in-Picture API を切り替えます。どちらもクリックすると、slot="enter" と slot="exit" のコンテンツを切り替えます。ef-pip のターゲットには、<video>、captureStream() を介した <canvas>、または内部を検索するコンテナーを指定できます。ef-resolution はドロップダウンと、幅および高さを入力するカスタム入力欄を備えています。target 要素のインライン CSS サイズを設定し、resolution-change を発火します。

タイムライン

ef-timeline は、固定表示の階層列、要素ごとのトラック行、タイムルーラーを1つのスクロール可能な領域にまとめます。トリミング可能な動画または音声の要素ごとに、行単位でトリムハンドル、サムネイルストリップ、波形ストリップを自動的に追加します。有効化するフラグはありません。

<ef-timegroup id="comp" mode="sequence" class="w-[1920px] h-[1080px]">
  <ef-video src="/clip.mp4" duration="5s"></ef-video>
  <ef-text duration="5s">Title</ef-text>
</ef-timegroup>

<div class="h-64">
  <ef-timeline target="comp" pixels-per-second="80"></ef-timeline>
</div>

ef-timeline は SelectionBridge を介して ef-canvas／ef-hierarchy と選択状態を共有し、行ごとに timeline-select を発火します。フィルタリング属性（hide／show）、ズーム上限属性、パネル表示属性はありません。実際に指定できる少数の属性については、下記の「要素リファレンス」を参照してください。

単体のタイムライン構成要素（いずれも ef-timeline の外でも使用でき、下記の「要素リファレンス」で詳細を説明しています）：

• ef-scrubber — 再生ヘッドスクラバーです。orientation="horizontal"（デフォルト）では、トラック自体の幅に合わせた、ドラッグハンドル付きのプログレスバーを表示します。orientation="vertical" では、スクロールするタイムライントラック内で使用するために、pixels-per-second によって位置が決まる細い再生ヘッド線を表示します。時刻の単位はミリ秒（current-time-ms、duration-ms）です。
• ef-time-display — 解決された PlaybackBridge から取得した秒単位の currentTime / duration を、M:SS / M:SS 形式で表示します。受け付けるのは target のみです。単体で使用する場合、current-time-ms／duration-ms による上書き属性は指定できません。
• ef-timeline-ruler — キャンバスに描画される目盛りと秒数ラベルです。duration、pixels-per-second、fps、または Motion-Designer 形式のタイムライン用の duration-ms と zoom-scale を参照します。
• ef-trim-handles — ドラッグ可能なイン点とアウト点です。mode="standalone" では、2つのハンドル間の全領域をドラッグ可能にします。mode="track" では、ハンドルをコンテナーの端に固定します。ef-timeline の行ではこのモードを使用します。時刻の単位は秒（intrinsic-duration、pixels-per-second）で、ef-scrubber とは単位の規則が異なります。value（{start, end}）は JS プロパティであり、属性ではありません。trim-change を連続して発火し、trim-change-end を1回発火します。
• ef-thumbnail-strip と ef-waveform-strip — ソースとなる <ef-video>／<ef-audio> の属性（src、variants、sourcein／sourceout、trimstart／trimend）をそのまま反映します。どちらも target ID 参照は受け付けません。単体で使用する場合は、ソース要素と並べてこれらの属性を設定するか、ソース要素からコピーしてください。ef-timeline 内では、行ごとにこの連携が自動的に行われます。

変形と操作

ef-transform-handles は制御対象のオーバーレイです。対象要素を自動で追跡することはありません。ホストのローカルピクセル空間で、bounds JS プロパティ（{x, y, width, height, rotation?}）を明示的に設定して配置してください。その後、bounds-change／rotation-change イベントの結果を、独自の対象要素と bounds に反映してください。

<div style="position: relative;">
  <ef-video id="clip" src="/clip.mp4" style="position: absolute; left: 0; top: 0; width: 320px; height: 180px; transform-origin: center;"></ef-video>
  <ef-transform-handles id="handles" enable-rotation></ef-transform-handles>
</div>
<script>
  const clip = document.getElementById("clip");
  const handles = document.getElementById("handles");
  handles.bounds = { x: 0, y: 0, width: 320, height: 180 };
  handles.addEventListener("bounds-change", (e) => {
    const { x, y, width, height } = e.detail.bounds;
    Object.assign(clip.style, { left: `${x}px`, top: `${y}px`, width: `${width}px`, height: `${height}px` });
    handles.bounds = e.detail.bounds;
  });
  handles.addEventListener("rotation-change", (e) => {
    const { rotation } = e.detail;
    clip.style.transform = `rotate(${rotation}deg)`;
    handles.bounds = { ...handles.bounds, rotation };
  });
</script>

サイズ変更では、lock-aspect-ratio 形式の制約によって Shift キーで縦横比を固定でき、角度スナップには rotation-step を使用できます。corners-only は辺のハンドルを非表示にします。enable-drag、enable-resize、enable-rotation はそれぞれ個別の操作を切り替えます。この要素は、ef-canvas に組み込まれている選択ボックスの背後にある汎用ビルディングブロックです。キャンバスの選択機能と切り離した変形ハンドルが必要な場合は、直接使用してください。

ef-dial は円形のドラッグコントロールです。0～360度の value を生成し、値は折り返します。value は JS プロパティのみです。監視対象の HTML 属性はありません。<ef-dial value="45"> を指定しても、ダイヤルは45°に初期化されません。要素を作成した後に .value を設定してください。ドラッグ中に Shift キーを押すと、15°刻みでスナップします。change を発火します。

オーバーレイシステム

ef-overlay-layer と ef-overlay-item は、target/bridge とは異なるパターンを実装します。再生を制御するのではなく、共有 RAF スケジューラーを通じて、毎フレーム、ターゲット要素の画面上の位置を受動的に追跡します。パンやズームをしても位置を合わせたままにするには、ef-overlay-layer を ef-pan-zoom の兄弟要素にするか、その内部にネストする必要があります。

<ef-pan-zoom>
  <ef-fit-scale>
    <ef-timegroup id="comp" mode="contain" class="w-[1920px] h-[1080px]">
      <ef-video id="clip" src="/clip.mp4"></ef-video>
    </ef-timegroup>
  </ef-fit-scale>
</ef-pan-zoom>
<ef-overlay-layer>
  <ef-overlay-item id="clip-overlay">
    <div class="border-2 border-blue-500"></div>
  </ef-overlay-item>
</ef-overlay-layer>
<script>
  document.getElementById("clip-overlay").target = "clip";
</script>

target JS プロパティを使ってターゲットを設定します。CSS セレクター文字列（単純な ID の場合は getElementById にフォールバックします）または要素への直接参照を渡します。HTML 属性の element-id を使う方法もあります。この属性では、代わりにターゲットの data-element-id/data-timegroup-id 属性と照合します。コンポジション内では、これら 2 つのデータ属性はデフォルトで設定されません。自分で追加してください。この要素は、追跡中のターゲットが 0.01px を超えて移動するたびに、{x, y, width, height, rotation} を含む position-changed を発火します。

エディターシェル

ef-workbench は、階層パネル、選択機能付きキャンバス、タイムライン、トランスポートコントロールを組み合わせて、3 パネルのエディターレイアウトを構成します。トランスポートコントロール（再生、一時停止、ループ、時間）はツールバーとは別です。ef-workbench は、コンポジションを単一のデフォルトスロットとして受け取り、すでにラップされていない場合は <ef-configuration>/<ef-canvas> で自動的にラップします。slot="canvas"、slot="hierarchy"、slot="timeline" スロットはありません。

<ef-workbench class="w-full h-screen" resolution="1920x1080">
  <ef-timegroup mode="sequence" class="w-[1920px] h-[1080px]">
    <ef-timegroup mode="fixed" duration="3s">
      <ef-text duration="3s">Opening</ef-text>
    </ef-timegroup>
    <ef-video src="/clip.mp4"></ef-video>
  </ef-timegroup>
</ef-workbench>

resolution（"WIDTHxHEIGHT"）は、コンポジションの実際のレンダリングサイズを設定します。これは固定サイズのステージであり、ef-pan-zoom/fitToContent() によって拡大縮小され、画面に収まります。.exportVideo(options?) を呼び出すと、オフスクリーンのレンダリング用クローンを通じて、コンポジションを MP4 にレンダリングします。ライブプレビューには影響しません。このメソッドは、バブリングする export-start、export-progress、export-complete、export-error イベントをディスパッチします。ツールバーの「エクスポート」ボタンも同じメソッドを使用します。.previewMode JS プロパティ（属性ではなく、"dom" | "canvas"）を使うと、ライブ DOM コンポジションとキャンバスにラスタライズされたプレビューを切り替えられます。ネイティブのレンダーホストは、rendering を設定してワークベンチをステージだけに縮小します。通常の使用で rendering を「ツールバーを非表示にする」ための便利なフラグとして使わないでください。

ef-hierarchy は、単独で使用できるレイヤーパネルのツリーです。ef-workbench を使わずに個別に使用します。ef-canvas と同じ target/選択共有パターンを使用します。両方の要素を同じコンポジションルート ID に設定してください。ef-canvas 自身の ID を指定すると、両者の SelectionBridge が同じルートを解決できず、同期されません。

<ef-hierarchy target="comp" show-header header="Layers" class="w-64"></ef-hierarchy>
<ef-canvas>
  <ef-timegroup id="comp" mode="contain" class="w-[1920px] h-[1080px]">…</ef-timegroup>
</ef-canvas>

選択状態は、@lit/context ではなく SelectionBridge を通じて ef-canvas/ef-timeline と共有されます。このバージョンの Editframe では、@lit/context が完全に削除されています。.select(id) と .getSelectedElementId() で選択を制御します。.setHighlighted(el) と .getHighlightedElement() でホバー時のハイライトを制御し、hierarchy-highlight を発火します。行をドラッグすると、{ sourceId, targetId, position } を含む hierarchy-reorder が発火します。hideSelectors と showSelectors（属性ではなく、文字列配列の JS プロパティ）では、CSS セレクターを使って表示する要素を絞り込めます。

フィードバックの送信

問題や改善案について、Editframe にフィードバックを送信してください。

• Editframe またはこのスキルが原因で問題が発生した場合は、回避策を見つけてタスクを続行してください。その後、問題と回避策を報告してください。
• 現在のタスクだけでなく、ほかのタスクにも役立つ改善点を見つけた場合は、提案を送信してください。たとえば、指示をより明確にする、例を追加する、デフォルトを改善する、新機能を追加するといった提案ができます。

問題や提案の種類ごとに、個別の報告を送信してください。報告に失敗しても、タスクを続行してください。

curl -sS https://editframe.com/api/v1/feedback \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $EDITFRAME_API_KEY" \
  --data-binary @- <<'JSON'
{
  "category": "bug",
  "skill": "editor-gui",
  "summary": "One line that names the problem or the suggestion",
  "details": "For a problem: steps, expected result, actual result, and errors. For a suggestion: the change and how it helps.",
  "workaround": "The workaround that you used. Omit this field for a suggestion."
}
JSON

category は bug、documentation、feature_request、performance、other のいずれかに設定してください。API キーは任意です。キーを指定しない報告は匿名になります。報告に秘密情報、API キー、個人情報を含めないでください。すべてのフィールド、制限、応答については、editframe-api スキルを参照してください。

要素リファレンス

ef-agent-pane

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-font-family	system-ui	このカスタムプロパティの説明は未記入です。

ef-ai-editor

リビジョンごとの会話と手動編集に対応した、共有コンポジションワークスペースです。

属性

属性	React プロパティ	型	デフォルト	説明
presentation	presentationMode	"simple" \	"advanced"	—

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-ai-agent-width	${AGENT_WIDTH_DEFAULT}px	このカスタムプロパティの説明は未記入です。
--ef-font-family	system-ui, sans-serif	このカスタムプロパティの説明は未記入です。

スロット

• （デフォルトスロット）— このスロットの説明は未記入です。

発火するイベント

• browser-cancel (any) — このイベントの説明は未記入です。
• browser-request (any) — このイベントの説明は未記入です。
• composition-edit (unknown) — このイベントの説明は未記入です。
• connection-error (unknown) — このイベントの説明は未記入です。
• editor-context ({ snapshotId: string; timeMs: number; selectedIds: string[] }) — このイベントの説明は未記入です。
• editor-error (string) — このイベントの説明は未記入です。
• export-complete ({ snapshotId: string; filename: string; byteSize: number; durationMs: number; durationSeconds: number; width: number; height: number; fps: number; mimeType: string; url: string }) — このイベントの説明は未記入です。
• export-end ({ snapshotId: string }) — このイベントの説明は未記入です。
• export-error ({ snapshotId: string; error: string }) — このイベントの説明は未記入です。
• export-job (any) — このイベントの説明は未記入です。
• export-progress ({ snapshotId: string; frame: number; totalFrames: number; time: number; duration: number; elapsedMs: number; estimatedRemainingMs: number; speedMultiplier: number; framePreviewCanvas?: HTMLCanvasElement \| undefined }) — このイベントの説明は未記入です。
• export-start ({ snapshotId: string }) — このイベントの説明は未記入です。
• media-import ({ files: File[]; commit: (result: Promise<void>) => void }) — このイベントの説明は未記入です。
• playback-state (Readonly<{ timeMs: number; durationMs: number; paused: boolean; }>) — このイベントの説明は未記入です。
• snapshot-change ({ snapshotId: string; compositionId: string \| undefined; sequence: number; html: string }) — このイベントの説明は未記入です。
• snapshot-export ({ snapshotId: string; filename: string; byteSize: number; durationMs: number; durationSeconds: number; width: number; height: number; fps: number; mimeType: string; url: string }) — このイベントの説明は未記入です。
• task-change ({ taskId: any; runId: any; status: any }) — このイベントの説明は未記入です。
• workspace-activity (any) — このイベントの説明は未記入です。

ef-asset-rail

共有コンポジション用のセッションメディアチップとインポートコントロールです。

ef-canvas

コンポジションの DOM サブツリーに選択およびホバー用のオーバーレイを追加し、クリックによる選択、ドラッグによる移動、角のドラッグによるサイズ変更に対応します。

属性

属性	React プロパティ	型	デフォルト	説明
readonly	readonly	boolean	false	選択、ドラッグ、サイズ変更、回転の操作を無効にします。オーバーレイは表示されたままですが、操作できません。
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID です。

スロット

• （デフォルトスロット）— 選択、ドラッグ、サイズ変更の操作対象としてキャンバスに登録されたコンポジション要素です。

発火するイベント

• canvas-transform ({ elementId: string }) — 選択ボックス上でのドラッグ、サイズ変更、回転のジェスチャーが終了したときに発火します。

ef-canvas-selection-box

この要素は、選択ボックスまたはホバーボックスを描画します。

ef-composition-thumbnail-strip

この要素は、ネストされたコンポジションのフィルムストリップです。

属性

属性	React prop	型	デフォルト	説明
duration	duration	number	—	サムネイルの配置に使用する、トリミング後のクリップの長さ（秒）。
height	height	number	—	ストリップの高さ（ピクセル）。デフォルトは要素のレンダリング時の高さ、または 32 です。
pixels-per-second	pixelsPerSecond	number	100	ズームレベル — コンポジション時間 1 秒あたりにレンダリングするピクセル数。
scroll-left	scrollLeftInClip	number	—	タイムラインビューポートの左端の、クリップ内でのスクロールオフセット。
thumbnail-spacing-px	thumbnailSpacingPx	number	—	サムネイル間の最小間隔（ピクセル）。デフォルトは thumbnailWidth です。
thumbnail-width	thumbnailWidth	number	—	各サムネイルの幅（ピクセル）。デフォルトは height に基づいて算出されます。
viewport-width	viewportWidth	number	—	サムネイル生成の仮想化に使用する、表示ビューポートの幅（ピクセル）。

CSS パーツ

• canvas — フィルムストリップをレンダリングするキャンバスです。

ef-controls

<ef-controls target="#preview"> 要素は、プロキシコンテナーとして機能します。

属性

属性	React prop	型	デフォルト	説明
target	target	string	""	子孫コントロールがデフォルトで再生を操作する対象要素の ID。

ef-dial

この円形ダイヤルをドラッグすると、value を 0 度から 360 度の間に設定できます。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--dial-stroke	var(--ef-color-border, rgba(255,255,255,0.16))	ダイヤルの外側のリングと目盛りの基本ストロークの色。
--dial-tick	var(--ef-color-border-subtle, rgba(255,255,255,0.08))	4 つの主要な目盛りの色。

CSS パーツ

• container — ダイヤルの円形の背景。
• handle — 現在の値を示す、ドラッグ可能なノブ。
• value — ダイヤル中央の数値表示。

発火するイベント

• change（{ value: number }）— ユーザーがダイヤルをドラッグして新しい値にするたびに発火します。

ef-fit-scale

この要素はライト DOM コンテナーです。

属性

属性	React prop	型	デフォルト	説明
paused	paused	boolean	false	スケールの自動再計算を一時停止します。

ef-fullscreen

この要素は、対象要素のブラウザー Fullscreen API のオンとオフを切り替えます。

属性

属性	React prop	型	デフォルト	説明
target	target	string	""	このコンポーネントが操作または状態を読み取る対象要素の ID。

CSS パーツ

• button — enter と exit のスロットコンテンツを含む、クリック対象です。

スロット

• slot="enter" — 対象要素が全画面モードでないときに表示されます。クリックすると全画面モードに切り替わります。
• slot="exit" — 対象要素が全画面モードのときに表示されます。クリックすると全画面モードを終了します。

ef-hierarchy

このツリーは DOM の構成を認識します。

属性

属性	React prop	型	デフォルト	説明
header	header	string	""	ツリーの上に表示するヘッダーテキスト（show-header の場合）。
show-header	showHeader	boolean	false	ヘッダー行を表示するかどうか。
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--hierarchy-bg	var(--ef-color-bg)	ツリーコンテナーの背景色。
--hierarchy-border	var(--ef-color-border)	枠線の色（ヘッダーの区切り線）。
--hierarchy-drop-indicator	var(--ef-color-primary)	ドラッグ＆ドロップで並べ替える際のインジケーター線の色。
--hierarchy-hover-bg	var(--ef-color-border-subtle)	ホバー時の行の背景色。
--hierarchy-selected-bg	var(--ef-color-primary-subtle, rgba(110,168,254,0.18))	選択時の行の背景色。
--hierarchy-text	var(--ef-color-text)	テキストの色。

CSS パーツ

• header — ツリー項目の上に表示される任意のヘッダー。このパーツは show-header 属性が設定されている場合に表示されます。
• list — 階層ツリーを格納する外側のコンテナー。

発行するイベント

• hierarchy-highlight（{ element: Element \| null }）— ハイライトされた要素が変わったときに発行されます。たとえば、ユーザーが ef-canvas 上で要素にカーソルを合わせたときに発行されます。このイベントは EFHierarchyElement.setHighlighted を通じて発行されます。
• hierarchy-reorder（{ sourceId: string; targetId: string; position: "before" \| "after" \| "inside" }）— ユーザーが行をドラッグして新しい位置に移動したときに発行されます。
• hierarchy-select（{ elementId: string \| null }）— ユーザーが要素の行をクリックしたとき、またはスクリプトが EFHierarchyElement.select を直接呼び出したときに発行されます。

メソッド

• select(elementId: string | null): void — ID で要素を選択します。選択を解除するには、代わりに null を渡します。
• getSelectedElementId(): string | null — 最初に選択された要素の ID を返します。何も選択されていない場合は null を返します。
• getHighlightedElement(): Element | null — setHighlighted を通じて現在ハイライトされている要素を返します。ハイライトされている要素がない場合は null を返します。
• setHighlighted(el: Element | null): void — この要素の外部からハイライトする要素を設定します。たとえば、ユーザーが ef-canvas 上で要素にカーソルを合わせたときに、コードからこのメソッドを呼び出せます。このメソッドは hierarchy-highlight イベントも発行します。

ef-hierarchy-item

この要素は EFHierarchyElement の 1 行を描画します。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--hierarchy-drop-indicator	#3b82f6	ドラッグ＆ドロップで並べ替える際のインジケーター線の色。
--hierarchy-indent	0.75rem	ネストのレベルごとのインデント幅。
--hierarchy-item-font-size	0.75rem	行ラベルのフォントサイズ。
--hierarchy-item-height	1.5rem	行の高さ。
--hierarchy-item-padding-left	0.5rem	行の左パディング。

CSS パーツ

• badge — 要素の種類を表示するバッジの span。
• children — ネストされた子項目を格納するラッパー。
• label — 要素名を表示する span。
• row — この項目の行のコンテナー。このパーツには data-focused 属性と data-selected 属性が付与されます。

ef-mute

この要素をクリックすると、ミュートのオン／オフが切り替わります。

属性

属性	React prop	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID。

CSS パーツ

• button — muted および unmuted のスロットコンテンツを含むクリック対象。

スロット

• slot="muted" — 対象がミュート中に表示されます。対象をクリックするとミュートが解除されます。
• slot="unmuted" — 対象がミュートされていないときに表示されます。対象をクリックするとミュートになります。

ef-overlay-item

この要素は、パッシブなオーバーレイアイテムです。

属性

属性	React プロパティ	型	デフォルト	説明
element-id	elementId	string	—	このオーバーレイアイテムが追跡する対象要素の ID（data-element-id／data-timegroup-id と照合されます）。

スロット

• （デフォルトスロット） — 対象要素の上に表示するコンテンツを配置します。

発火するイベント

• position-changed（{ x: number; y: number; width: number; height: number; rotation: number; }） — 対象要素の位置、サイズ、または回転が 0.01px を超えて変化したときに発火します。

ef-overlay-layer

この要素は、オーバーレイコンテナです。

スロット

• （デフォルトスロット） — 1 つ以上の ef-overlay-item または ef-transform-handles 要素を受け付けます。

ef-pause

この要素は、対象が一時停止している間は自身を非表示にします。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御する、または情報を読み取る対象要素の ID です。

CSS パーツ

• button — スロットに配置されたアイコンまたはラベルのコンテンツを含むクリック対象です。

スロット

• （デフォルトスロット） — 独自のボタンまたはアイコン要素をここに配置します。クリックすると再生が一時停止します。

ef-pip

この要素は、ピクチャーインピクチャーの切り替えボタンです。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御する、または情報を読み取る対象要素の ID です。

CSS パーツ

• button — スロットに配置された enter および exit コンテンツを含むクリック対象です。

スロット

• slot="enter" — 対象がピクチャーインピクチャーモードでないときに表示されます。クリックするとピクチャーインピクチャーモードに切り替わります。
• slot="exit" — 対象がピクチャーインピクチャーモードのときに表示されます。クリックするとピクチャーインピクチャーモードを終了します。

ef-play

この要素は、対象の再生中は自身を非表示にします。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御する、または情報を読み取る対象要素の ID です。

CSS パーツ

• button — スロットに配置されたアイコンまたはラベルのコンテンツを含むクリック対象です。

スロット

• （デフォルトスロット） — 独自のボタンまたはアイコン要素をここに配置します。クリックすると再生が始まります。

ef-preview

これは薄いパススルーコンテナです。

属性

属性	React プロパティ	型	デフォルト	説明
loop	loop	boolean	false	設定すると、ネストされたコンポジションルートに転送されます。これにより、ドキュメント内の <Preview loop> は、タイムグループに loop を設定せずに再生をループします。

発火するイベント

• focus-changed（{ element: HTMLElement \| null }） — ホバーされている要素が変わったときに発火します。detail.element フィールドには、新しい要素が格納されます。フォーカスされている要素がない場合は null です。

ef-recorder

画面およびカメラを、ライブ H.264/AAC MP4 としてキャプチャします。

発火するイベント

• recording-state（{ which: "screen" \| "camera"; live: boolean }） — TODO: このイベントの説明を記載してください。
• workspace-error（string） — TODO: このイベントの説明を記載してください。

ef-resolution

この要素は、target 要素のインライン CSS の width および height スタイルを設定する解像度ピッカーです。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID です。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-color-surface	rgba(0, 0, 0, 0.6)	--ef-resolution-bg のフォールバック背景色のソースです（現在、共有テーマトークンセットには含まれていません）。
--ef-resolution-bg	var(--ef-color-surface, rgba(0, 0, 0, 0.6))	ドロップダウン／入力欄の背景色です。
--ef-resolution-border-color	var(--ef-color-border, rgba(255, 255, 255, 0.2))	ドロップダウン／入力欄の境界線の色です。
--ef-resolution-color	var(--ef-color-text, #fff)	テキストの色です。
--ef-resolution-font-size	12px	ドロップダウン／入力欄のフォントサイズです。

CSS パーツ

• height-input — カスタムの高さ入力欄です。このパーツはカスタムモードでのみ表示されます。
• select — プリセット解像度のドロップダウンリストです。
• separator — 幅と高さの入力欄の間にある「×」記号です。
• width-input — カスタムの幅入力欄です。このパーツはカスタムモードでのみ表示されます。

発火するイベント

• resolution-change（{ width: number; height: number }）— 解像度が変更されると、{ width, height } の詳細情報とともに発火します。プリセットの選択、または幅と高さのカスタム入力によって変更されます。

ef-scrubber

この要素は、再生ヘッドのスクラバーです。

属性

属性	React プロパティ	型	デフォルト	説明
container-width	containerWidth	number	—	垂直方向の配置で使用する、ピクセル単位の明示的なコンテナー幅です。
current-time-ms	currentTimeMs	number	—	ミリ秒単位の現在の再生時間です。
duration-ms	durationMs	number	—	ミリ秒単位の合計時間です。
fps	fps	number	—	フレーム単位に量子化した計算に使用するフレームレートです。
orientation	orientation	"horizontal" \	"vertical"	—
pixels-per-second	pixelsPerSecond	number	—	ズームレベルです。コンポジション時間 1 秒あたりに描画されるピクセル数を指定します。
raw-scrub-time-ms	rawScrubTimeMs	number | null	—	ミリ秒単位の量子化前のスクラブ位置です。ドラッグ中にリアルタイムで更新されます。
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID です。
zoom-scale	zoomScale	number	—	垂直方向（タイムライン）のスクラバーのサイズに適用されるズーム倍率です。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-scrubber-background	var(--ef-color-border, rgba(255, 255, 255, 0.2))	未塗りつぶし部分のトラックの色です。
--ef-scrubber-handle-size	12px	ドラッグ可能なハンドルの直径です。
--ef-scrubber-height	4px	トラックの太さです。
--ef-scrubber-progress-color	var(--ef-color-primary, #fff)	塗りつぶし部分（進行状況）のトラックの色です。

CSS パーツ

• handle — ドラッグ可能な円形のつまみです。
• playhead — 現在の時間位置にある垂直線です。
• progress — 塗りつぶされた部分です。現在の位置を示します。
• scrubber — 外側のトラックコンテナーです。

発火するイベント

• seek（number）— ユーザーがスクラバーをドラッグして新しい位置に移動すると発火します。

ef-thumbnail-strip

この要素は、旧 EFThumbnailStrip と同じズームおよびスクロール動作を備えた動画フィルムストリップです。

属性

属性	React プロパティ	型	デフォルト	説明
duration	duration	number	—	サムネイルの配置に使用する、トリミング後のクリップの長さ（秒）です。
height	height	number	—	ストリップの高さ（ピクセル）です（デフォルトは、要素のレンダリング時の高さ、または 32 です）。
pixels-per-second	pixelsPerSecond	number	100	ズームレベルです。コンポジション時間の 1 秒あたりにレンダリングするピクセル数を指定します。
scroll-left	scrollLeftInClip	number	—	タイムラインビューポートの左端の、クリップ内でのスクロールオフセットです。
sourcein	sourcein	string	—	ソース動画内の開始時刻（CSS 時間。例："1.5s"）です。ソースの <ef-video> から反映されます。
sourceout	sourceout	string	—	ソース動画内の終了時刻（CSS 時間）です。ソースの <ef-video> から反映されます。
src	src	string	""	サムネイル生成元となるソース動画ファイルの URL です。
thumbnail-spacing-px	thumbnailSpacingPx	number	—	サムネイル間の最小間隔（ピクセル）です（デフォルトは thumbnailWidth）。
thumbnail-width	thumbnailWidth	number	—	各サムネイルの幅（ピクセル）です（デフォルトは height から算出されます）。
trimend	trimend	string	—	クリップの末尾からトリミングする長さ（CSS 時間）です。ソースの <ef-video> から反映されます。
trimstart	trimstart	string	—	クリップの先頭からトリミングする長さ（CSS 時間）です。ソースの <ef-video> から反映されます。
variants	variants	string	""	アダプティブバリアントラダーの URL です。ソースの <ef-video> から反映されます。
viewport-width	viewportWidth	number	—	サムネイル生成の仮想化に使用する、表示ビューポートの幅（ピクセル）です。

CSS パーツ

• canvas — フィルムストリップをレンダリングするキャンバスです。

ef-time-display

この要素は、解決済みの PlaybackBridge から取得した currentTime と duration の値（秒）をフォーマットします。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが操作または読み取りを行う対象要素の ID です。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-font-family	system-ui	フォントファミリーです（現在、共有テーマトークンセットには含まれていません）。
--ef-font-size-xs	0.75rem	フォントサイズです（現在、共有テーマトークンセットには含まれていません）。

CSS パーツ

• time — フォーマット済みの現在時刻と再生時間のテキストを表示する span です。

ef-timeline

この要素は、コンポジションの階層とトラック行をレンダリングします。

属性

属性	React プロパティ	型	デフォルト	説明
follow-playhead	followPlayhead	boolean	true	再生中に再生ヘッドが表示されるよう、タイムラインを自動スクロールします。
hierarchy-width	labelWidth	number	160	レイヤー階層パネルの幅（ピクセル）です。
pixels-per-second	pixelsPerSecond	number	100	ズームレベルです。コンポジション時間の 1 秒あたりにレンダリングするピクセル数を指定します。
row-height	rowHeight	number	28	各トラック行の高さ（ピクセル）です。
target	target	string	""	このコンポーネントが操作または読み取りを行う対象要素の ID です。

CSS パーツ

• scrub-overlay — 領域全体を覆うオーバーレイです。ユーザーがスクラブする際のポインタードラッグを受け取ります。

ef-timeline-row

この要素は、タイムラインの行を 1 つ描画します。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--trim-handle-width	6px	この行内に描画されるクリップについて、入れ子になった <ef-trim-handles> 自身の --trim-handle-width を上書きします。

CSS パーツ

• bar — 色付きのクリップバーのパーツです。
• label — 行のラベル領域のパーツです。要素名、アイコン、詳細テキストを表示します。
• track — 行のトラック領域のパーツです。クリップバーを表示します。

発火するイベント

• timeline-select（{ elementId: string }）— ユーザーがこの行をクリックすると発火するイベントです。

ef-timeline-ruler

この要素は、目盛りと秒数ラベルを備えた時間ルーラーです。

属性

属性	React プロパティ	型	デフォルト	説明
duration	duration	number	—	合計時間（秒）です。
duration-ms	durationMs	number	—	合計時間（ミリ秒）です。duration で指定されていない場合に使用されます（Motion Designer のタイムライン）。
fps	fps	number	30	フレームレートです。個々のフレームの目盛りが表示されるタイミングを決定します。
pixels-per-second	pixelsPerSecond	number	100	ズームレベルです。コンポジション時間 1 秒あたりに描画されるピクセル数を指定します。
zoom-scale	zoomScale	number	—	duration-ms が設定されている場合に effectivePixelsPerSecond を導出するために使用されるズーム倍率です。

CSS パーツ

• canvas — 目盛りのキャンバス部分です。
• container — ルーラーを囲む外側のラッパー部分です。

ef-toggle-loop

この要素をクリックすると、解決された PlaybackBridge のループモードが切り替わります。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID です。

CSS パーツ

• button — クリック対象です。このパーツは <slot> 要素に直接配置されます。

スロット

• （デフォルトスロット）— 独自のボタンまたはアイコン要素をここに配置します。クリックするとループモードが切り替わります。

ef-toggle-play

この要素をクリックすると、再生と一時停止が切り替わります。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御または読み取りを行う対象要素の ID です。

CSS パーツ

• button — スロットに割り当てられた play および pause のコンテンツを含むクリック対象です。

スロット

• slot="pause" — 対象が再生中に表示されます。対象をクリックすると一時停止します。
• slot="play" — 再生が一時停止中に表示されます。対象をクリックすると再生を開始します。

ef-transform-handles

この要素は、ドラッグ、サイズ変更、オプションの回転ハンドルを備えた選択オーバーレイです。

属性

属性	React プロパティ	型	デフォルト	説明
canvas-scale	canvasScale	number	1	ハンドルのヒット領域を画面上で一定のサイズに保つために使用する、現在のキャンバスのズーム倍率です。
corners-only	cornersOnly	boolean	false	辺のハンドルを非表示にし、角のサイズ変更ハンドルのみを表示します。
enable-drag	enableDrag	boolean	true	選択範囲の本体をドラッグできるようにします。
enable-resize	enableResize	boolean	true	サイズ変更ハンドルを表示します。
enable-rotation	enableRotation	boolean	false	回転ハンドルを表示します。
lock-aspect-ratio	lockAspectRatio	boolean	false	サイズ変更時に元の縦横比を維持します。
min-size	minSize	number	—	サイズ変更時の幅／高さの最小値（ピクセル単位）です。
rotation-step	rotationStep	number	—	回転時にスナップする角度の増分です。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-transform-handles-border-color	var(--ef-color-primary)	境界ボックスオーバーレイの輪郭色です。
--ef-transform-handles-dragging-border-color	var(--ef-color-primary)	ドラッグ中の境界ボックスの輪郭色です。
--ef-transform-handles-handle-border-color	var(--ef-color-primary)	サイズ変更ハンドルの枠線色です。
--ef-transform-handles-handle-color	var(--ef-color-bg-elevated)	サイズ変更ハンドルの塗りつぶし色です。
--ef-transform-handles-rotate-handle-color	var(--ef-color-success)	回転ハンドルの色です。

CSS パーツ

• drag-area — オーバーレイ全体を覆う、目に見えないドラッグ用の領域です。enable-drag が true の場合にのみ表示されます。
• handle — すべてのサイズ変更ハンドルに対応するパーツです。デフォルトではハンドルが8個あり、corners-only が true の場合は4個になります。
• handle-e — 東側の辺にあるサイズ変更ハンドルです。
• handle-n — 北側の辺にあるサイズ変更ハンドルです。
• handle-ne — 北東の角にあるサイズ変更ハンドルです。
• handle-nw — 北西の角にあるサイズ変更ハンドルです。
• handle-s — 南側の辺にあるサイズ変更ハンドルです。
• handle-se — 南東の角にあるサイズ変更ハンドルです。
• handle-sw — 南西の角にあるサイズ変更ハンドルです。
• handle-w — 西側の辺にあるサイズ変更ハンドルです。
• overlay — 選択した要素の上に配置される、外側の境界ボックスです。
• rotate-handle — 回転ハンドルのヒット領域です。enable-rotation が true の場合にのみ表示されます。
• rotate-handle-circle — 回転ハンドル内にある、目に見える円形のノブです。

発火するイベント

• bounds-change ({ bounds: { x: number; y: number; width: number; height: number; rotation?: number; } }) — ドラッグまたはサイズ変更操作中のポインター移動のたびに発火します。
• rotation-change ({ rotation: number }) — 回転のドラッグ中に発火します。

ef-tree

この要素は、データ駆動型の汎用ツリーです。

属性

属性	React プロパティ	型	デフォルト	説明
expand-all	expandAll	boolean	true	デフォルトですべての項目を展開します。
header	header	string	""	ツリーの上に表示するヘッダーテキストです（show-header が有効な場合）。
selected-id	selectedId	string | null	—	現在選択されている項目の ID です。
show-header	showHeader	boolean	false	ヘッダー行を表示するかどうかです。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--tree-bg	var(--ef-color-bg)	ツリーコンテナーの背景色です。
--tree-border	var(--ef-color-border)	枠線の色です。
--tree-hover-bg	var(--ef-color-border-subtle)	ホバー時の行の背景色です。
--tree-selected-bg	var(--ef-color-primary-subtle, rgba(110,168,254,0.18))	選択時の行の背景色です。
--tree-text	var(--ef-color-text)	テキストの色です。

CSS パーツ

• container — ツリー全体を囲む外側のラッパーです。
• empty — 空の状態を示すメッセージです。
• header — オプションのヘッダーです。show-header が true の場合に表示されます。

発火するイベント

• tree-select ({ id: string \| null; item: TreeItem \| null }) — ユーザーが行をクリックすると、このイベントが発火します。

ef-tree-item

この要素は、EFTreeElement 用に、1 行と再帰的な children コンテナーをレンダリングします。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--tree-expand-icon-size	1rem	展開・折りたたみ用の山形アイコンのサイズです。
--tree-icon-gap	0.25rem	アイコンとラベルの間隔です。
--tree-indent	1rem	ネストの各レベルのインデント幅です。
--tree-item-font-size	0.75rem	行ラベルのフォントサイズです。
--tree-item-height	1.5rem	行の高さです。
--tree-item-padding-left	0.5rem	行の左パディングです。
--tree-item-padding-right	0.5rem	行の右パディングです。

CSS パーツ

• children — ネストされた子項目を囲むラッパーです。data-collapsed 属性が設定されます。
• expand-icon — 展開・折りたたみ用の山形アイコンです。
• icon — オプションの項目アイコンです。
• label — 項目のラベルテキストです。
• row — 項目の行です。data-selected 属性が設定されます。

ef-trim-handles

この要素は、秒単位でトリムインおよびトリムアウトのハンドルを表示します。

属性

属性	React プロパティ	型	デフォルト	説明
element-id	elementId	string	""	このトリムハンドルが編集する要素の ID です。trim-change イベントの詳細に含まれます。
intrinsic-duration	intrinsicDuration	number	—	トリム前のソースの長さを秒単位で指定します。ドラッグ可能な範囲の計算に使用します。
mode	mode	"standalone" \	"track"	—
pixels-per-second	pixelsPerSecond	number | null	—	ズームレベルです。コンポジション時間の 1 秒あたりに描画されるピクセル数を指定します。
seek-target	seekTarget	string	""	ユーザーがハンドルをドラッグしたときにシークする時間要素の ID です。
show-overlays	showOverlays	boolean	true	トリムで除外された部分に暗いオーバーレイを表示します。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--trim-handle-active-color	#3b82f6	ホバー中またはドラッグ中のハンドルの色です。
--trim-handle-border-radius-end	0 2px 2px 0	右側のエンドハンドルにある、表示されるノブの角丸です。
--trim-handle-border-radius-start	2px 0 0 2px	左側のスタートハンドルにある、表示されるノブの角丸です。
--trim-handle-color	rgba(255, 255, 255, 0.7)	通常時のハンドルの色です。
--trim-handle-width	8px	各トリムハンドルのヒット領域の幅です。
--trim-overlay-color	rgba(0, 0, 0, 0.4)	トリムで除外された部分に描画される暗いオーバーレイの色です。
--trim-selected-border-color	transparent	選択インジケーターの境界線の色です（standalone モード）。
--trim-selected-border-width	0px	選択インジケーターの境界線の太さです（standalone モード）。

CSS パーツ

• handle — スタートハンドルとエンドハンドルの両方のトリムハンドルに対応するパーツです。
• handle-end — 右側にあるエンドトリムハンドルのパーツです。
• handle-inner — 各トリムハンドル内にある、表示されるノブのパーツです。
• handle-start — 左側にあるスタートトリムハンドルのパーツです。
• overlay — 暗いオーバーレイの両方に対応するパーツです。各オーバーレイはトリムで除外された部分を覆います。
• overlay-end — トリムで除外されたエンド部分に重ねる暗いオーバーレイのパーツです。
• overlay-start — トリムで除外されたスタート部分に重ねる暗いオーバーレイのパーツです。
• region — ドラッグ可能な中央領域のパーツです。standalone モードでのみ表示されます。
• selected-border — 選択インジケーターの境界線に対応するパーツです。standalone モードでのみ表示されます。
• selected-border-bottom — 選択インジケーターの下側の境界線のパーツです。
• selected-border-top — 選択インジケーターの上側の境界線のパーツです。

スロット

• slot="handle-end" — エンドトリムハンドルにある、表示されるノブのカスタムコンテンツを受け取ります。エンドハンドルは右側にあります。
• slot="handle-start" — スタートトリムハンドルにある、表示されるノブのカスタムコンテンツを受け取ります。スタートハンドルは左側にあります。

発火するイベント

• trim-change（{ elementId: string; type: "start" \| "end" \| "region"; value: { start: number; end: number } }）— ユーザーがトリムハンドルまたは領域をドラッグしている間、継続的に発火します。
• trim-change-end（{ elementId: string; type: "start" \| "end" \| "region" }）— ユーザーがトリムハンドルのドラッグを終了したときに 1 回発火します。

ef-volume

この要素は、値を 0 から 1 まで設定できる範囲スライダーです。

属性

属性	React プロパティ	型	デフォルト	説明
target	target	string	""	このコンポーネントが制御する、または値を読み取る対象要素の ID です。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-volume-fill-color	var(--ef-color-primary, #fff)	塗りつぶされた（進行状況）トラックの色です。
--ef-volume-height	4px	トラックとつまみの高さです。
--ef-volume-track-color	var(--ef-color-border, rgba(255, 255, 255, 0.2))	塗りつぶされていないトラックの色です。

CSS パーツ

• slider — ネイティブの <input type="range"> 音量スライダー要素です。

ef-waveform-strip

この要素は、タイムラインの波形ストリップです。

属性

属性	React プロパティ	型	デフォルト	説明
color	color	string	—	波形の色（有効な CSS カラー値）。デフォルトでは、オーディオトラックのテーマカラーが使われます。
duration	duration	number	—	波形のレイアウトに使用する、トリミング後のクリップの長さ（秒）です。
height	height	number	—	ストリップの高さ（ピクセル）。デフォルトでは、要素のレンダリング後の高さ、または 32 です。
media	media	"audio" \	"video"	—
pixels-per-second	pixelsPerSecond	number	100	ズームレベルです。コンポジションの時間 1 秒あたりにレンダリングするピクセル数を指定します。
scroll-left	scrollLeftInClip	number	—	タイムラインビューポートの左端における、クリップ内のスクロールオフセットです。ef-thumbnail-strip と一致します。
sourcein	sourcein	string	—	ソース内の開始時刻（"1.5s" などの CSS 時間）です。ソース要素から反映されます。
sourceout	sourceout	string	—	ソース内の終了時刻（CSS 時間）です。ソース要素から反映されます。
src	src	string	""	波形エンベロープのデコード元となるソースのオーディオ／ビデオファイルの URL です。
trimend	trimend	string	—	クリップの末尾からトリミングする長さ（CSS 時間）です。ソース要素から反映されます。
trimstart	trimstart	string	—	クリップの先頭からトリミングする長さ（CSS 時間）です。ソース要素から反映されます。
variants	variants	string	—	アダプティブバリアントのラダー URL です。ソースの <ef-audio>／<ef-video> から反映されます。
viewport-width	viewportWidth	number	—	波形の描画を仮想化するために使用する、表示ビューポートの幅（ピクセル）です。

CSS パーツ

• canvas — 波形を描画するキャンバスです。

ef-workbench

この要素は、階層パネル、キャンバスと選択ビュー、タイムライン、およびトランスポートコントロールを 1 つのパネルレイアウトにまとめます。DOM プレビューモードでのみ使用されます。

属性

属性	React プロパティ	型	デフォルト	説明
rendering	rendering	boolean	false	ネイティブのレンダーホスト（EF_FRAMEGEN）がフレームのキャプチャを所有している間は true です。ワークベンチを .stage のみの状態に折りたたみます（ツールバー、サイドバー、トランスポート、タイムラインの装飾は表示されません）。
resolution	resolution	string	"1920x1080"	コンポジションの実際のレンダリング解像度です。"WIDTHxHEIGHT" の形式で指定します（例："1920x1080"、"1080x1920"）。

CSS カスタムプロパティ

カスタムプロパティ	デフォルト	説明
--ef-color-danger	#dc2626	破壊的な操作とエラー状態に使用する色です。
--ef-color-hover	#333	ツールバーとズームボタンのホバー時の背景色です。
--ef-color-success	#059669	エクスポートポップオーバーの成功状態に使用する色です。
--ef-color-text-subtle	var(--ef-color-text-muted)	エクスポートポップオーバーのラベルに使用するセカンダリテキストの色です。
--ef-color-warning	#d97706	警告状態とキャンセル状態に使用する色です。
--ef-workbench-sidebar-width	260px	左側の階層パネルの幅です。
--ef-workbench-timeline-height	260px	下部のタイムラインパネルの高さです。

スロット

• （デフォルトスロット）— コンポジションを格納します。コンポジションはライト DOM の <ef-configuration>、<ef-canvas>、または <ef-timegroup> 要素で、必要に応じてワークベンチによって自動的にラップされます。
• slot="toolbar-end" — ヘッダーツールバーの右端にある拡張ポイントです。組み込みのテーマ／エクスポートコントロールの後ろに配置されます。要素に slot="toolbar-end" を割り当てます。
• slot="toolbar-start" — ヘッダーツールバーの左端にある拡張ポイントです。要素に slot="toolbar-start" を割り当てます。要素は <ef-workbench> のライト DOM の子要素として保持されるため、ページ CSS とテーマの --ef-color-* カスタムプロパティが引き続き適用され、レンダーモードではエディターの他の UI とともに非表示になります。

発火するイベント

• export-complete（{ /** カスタムの target が指定された場合は省略されます。 */ buffer?: ArrayBuffer; mimeType: string; }）— エクスポートが正常に完了すると、RenderTimegroupToVideoResult の詳細値とともに、このイベントが 1 回発火します。
• export-error（unknown）— エクスポートでエラーがスローされると、このイベントが発火します。詳細値にはスローされたエラーが格納されます。
• export-progress（{ frame: number; totalFrames: number; /** 直前にレンダリングされたコンポジション時間（秒）。 */ time: number; /** エクスポートされた合計時間（秒）、つまり to - from。 */ duration: number; /** レンダリング開始からの実時間（ミリ秒）。 */ elapsedMs: number; /** * これまでの 1 フレームあたりの平均コストに基づく、残りの推定実時間 * （ミリ秒）。最初のフレームが処理されるまでは 0 です。 */ estimatedRemainingMs: number; /** * 実時間 1 秒あたりにレンダリングされたコンポジションの秒数です。1を超える場合、 * エクスポートはリアルタイムより速く実行されています。最初のフレームが処理される * までは0です。 */ speedMultiplier: number; /** * 最後にキャプチャしたフレームのライブサムネイルです。 * {@link RenderTimegroupToVideoOptions.progressPreviewInterval} フレームごとに同じキャンバス上で再描画されます。 * 進行状況コールバックのたびに同じキャンバスインスタンスが渡されるため、コピーするのではなく、 * そのまま埋め込んでください（例：ステータスポップオーバーに追加する）。 *progressPreviewIntervalが0 の場合は省略されます。 */ framePreviewCanvas?: HTMLCanvasElement; }）— エクスポート中に繰り返し発火し、フレーム数と合計フレーム数を格納した RenderProgress の詳細値が渡されます。
• export-start（unknown）— EFWorkbenchElement.exportVideo が開始されると、このイベントが 1 回発火します。

メソッド

• exportVideo(options?: RenderTimegroupToVideoOptions): Promise<RenderTimegroupToVideoResult> — オフスクリーンの createRenderClone と renderTimegroupToVideo の呼び出しを通じて、コンポジションを MP4 にレンダリングします。デフォルトでは、このワークベンチの resolution でレンダリングします。ライブのインタラクティブプレビューには影響しません。バブリングする export-start、export-progress、export-complete、export-error イベントをディスパッチするため、周囲の UI はポーリングなしで進捗を表示できます。このメソッドはエンコード済みバッファーを返します。ツールバーの Export ボタンでは、バッファーを .mp4 ファイルとしてダウンロードすることもできます。ダウンロード処理については .runToolbarExport を参照してください。
  • options.width（省略可）：number — 出力幅（ピクセル単位）です。デフォルトは timegroup.getBoundingClientRect() の幅です。
  • options.height（省略可）：number — 出力高さ（ピクセル単位）です。デフォルトは timegroup.getBoundingClientRect() の高さです。
  • options.fps（省略可）：number — 出力フレームレートです。デフォルトは timegroup.fps です。
  • options.from（省略可）：number — コンポジションの秒単位で指定する、書き出し範囲の開始位置です。デフォルトは 0 です。
  • options.to（省略可）：number — コンポジションの秒単位で指定する、書き出し範囲の終了位置です。デフォルトは全再生時間です。
  • options.videoCodec（省略可）："avc" \| "hevc" \| "vp9" \| "av1" \| "vp8" — 出力動画コーデックです。デフォルトは "avc" です。
  • options.audioCodec（省略可）："aac" \| "opus" \| "mp3" \| "vorbis" \| "flac" \| "pcm-s16" \| "pcm-s16be" \| "pcm-s24" \| "pcm-s24be" \| "pcm-s32" \| "pcm-s32be" \| "pcm-f32" \| "pcm-f32be" \| "pcm-f64" \| "pcm-f64be" \| "pcm-u8" \| "pcm-s8" \| "ulaw" \| "alaw" — 出力音声コーデックです。デフォルトは AAC です。Linux 上の Chrome など、ネイティブ AAC エンコーダーを搭載していないブラウザーでは、初回使用時に WASM AAC エンコーダーが読み込まれます。デフォルトでは、音声設定に対応する AAC エンコーダーがない場合、またはページのコンテンツセキュリティポリシーによって WASM エンコーダーがブロックされている場合（blob: ワーカーと 'wasm-unsafe-eval' が必要です）に限り、Opus にフォールバックします。
  • options.videoBitrate（省略可）：number \| Quality — ビット/秒の数値、または mediabunny の Quality プリセット（例：QUALITY_HIGH）です。デフォルトは QUALITY_HIGH です。
  • options.audioBitrate（省略可）：number \| Quality — ビット/秒の数値、または mediabunny の Quality プリセット（例：QUALITY_HIGH）です。デフォルトは QUALITY_HIGH です。
  • options.audioSampleRate（省略可）：number — ミックス音声トラックのサンプルレートです。デフォルトは 48000 です。
  • options.includeAudio（省略可）：boolean — コンポジションに音声対応のリーフがある場合、音声トラックをミックスしてエンコードします。デフォルトは true です。無音（動画のみ）で書き出す場合は false に設定します。
  • options.scale（省略可）：number — エンコード出力をこの係数で縮小します（0.5 = 半分のサイズの MP4）。フレームは引き続きコンポジションのフルサイズでキャプチャされるため、コンポジションのレイアウト（px フォント、vw 単位、行の折り返し）には影響せず、その後、小さいエンコード用キャンバスに描画されます。これは従来の Lit パイプラインのスケール動作と同じです。デフォルトは 1 です。
  • options.progressPreviewInterval（省略可）：number — N フレームごとに RenderProgress.framePreviewCanvas を再描画します。デフォルトは DEFAULT_PROGRESS_PREVIEW_INTERVAL です。プレビューを完全に省略し、その drawImage にかかるコストを回避するには 0 を設定します。
  • options.strictVideoPaint（省略可）：boolean — seekForRender に渡されます。最終レンダリングのキャプチャではデフォルトは true です。
  • options.prefetchHorizonSec（省略可）：number — 書き出しの再生ヘッドより何秒先までのプレイティア入力を開くかを設定します。デフォルトは DEFAULT_EXPORT_PREFETCH_HORIZON_SEC です。プリフェッチを無効にして従来の JIT のみの動作に戻すには 0 を設定します。
  • options.capture（省略可）：FrameCaptureStrategy — フレームをエンコード用キャンバスにキャプチャする方法です。"auto"（デフォルト）は、ブラウザーが対応していればネイティブの HTML-in-Canvas を使用し、対応していなければ foreignObject シリアライザーを使用します。どちらもブラウザー独自のエンジンでラスタライズするため、ブラウザーに適した出力が得られます。"painter" は、インタラクティブプレビューで使われる高速で近似的な Canvas2D ペインターを選択します。正確な描画経路に失敗した場合、残りのフレームはペインターにフォールバックします。
  • options.target（省略可）：Target — デフォルトの BufferTarget を上書きします。たとえば、EF_RENDER.renderStreaming のチャンク出力を行う CLI や Playwright では、AppendOnlyStreamTarget を使用できます。これを設定すると、呼び出し元がすでにターゲット経由でバイト列を消費しているため、result.buffer は省略されます。ストリーミングターゲットでは末尾の moov ボックスを書き込むためにシークできないため、fastStart のデフォルトは "in-memory" ではなく "fragmented" になります。
  • options.fastStart（省略可）：false \| "in-memory" \| "reserve" \| "fragmented" — mediabunny の moov 配置方式を設定します。デフォルトは "in-memory" です。カスタムの target を指定した場合は "fragmented" です。
  • options.videoHardwareAcceleration（省略可）："no-preference" \| "prefer-hardware" \| "prefer-software" — 動画エンコーダーの hardwareAcceleration です。デフォルトは "prefer-hardware" です（VideoEncoder.isConfigSupported で確認し、HW エンコーダーがない場合は "no-preference" にフォールバックします）。mediabunny の量子化器のビットレートモードでは、ソフトウェアエンコーダーが選択されます。このエンコーダーは macOS の VideoToolbox と比べて約 8 倍遅いためです。
  • options.signal（省略可）：AbortSignal — 進行中のレンダリングを中止します。
  • options.onProgress（省略可）：((progress: RenderProgress) => void) — 各フレームのエンコード後に呼び出されます。