@editframe/elements 0.33.0-beta → 0.34.5-beta

package/dist/gui/timeline/tracks/TimegroupTrack.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimegroupTrack.js","names":["EFTimegroupTrack"],"sources":["../../../../src/gui/timeline/tracks/TimegroupTrack.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\nimport { EFTimegroup } from \"../../../elements/EFTimegroup.js\";\nimport \"../../../elements/EFThumbnailStrip.js\";\n\n/**\n * Check if a timegroup is a root timegroup (has no parent timegroup)\n * Uses the timegroup's own isRootTimegroup property for reliability\n */\nfunction isRootTimegroup(element: Element | null | undefined): boolean {\n  // Handle null/undefined\n  if (!element) {\n    return false;\n  }\n  \n  // Check if element has the isRootTimegroup property (most reliable)\n  // EFTimegroup instances have this property that checks parentTimegroup\n  const elem = element as any;\n  if (typeof elem.isRootTimegroup === 'boolean') {\n    return elem.isRootTimegroup;\n  }\n  \n  // Alternative: check parentTimegroup property directly (EFTimegroup has this)\n  if (elem.parentTimegroup !== undefined) {\n    return !elem.parentTimegroup; // Root if no parent timegroup\n  }\n  \n  // Fallback: check DOM parent tree (less reliable after DOM moves)\n  let parent = element.parentElement;\n  while (parent) {\n    if (parent.tagName.toLowerCase() === \"ef-timegroup\") {\n      return false;\n    }\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/** Height for root timegroup filmstrip row */\nconst FILMSTRIP_ROW_HEIGHT = 48;\n\n@customElement(\"ef-timegroup-track\")\nexport class EFTimegroupTrack extends TrackItem {\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .trim-container {\n        background: linear-gradient(\n          135deg,\n          rgba(148, 163, 184, 0.1) 0%,\n          rgba(148, 163, 184, 0.05) 100%\n        ) !important;\n      }\n      \n      :host(:hover) .trim-container {\n        background: linear-gradient(\n          135deg,\n          rgba(148, 163, 184, 0.15) 0%,\n          rgba(148, 163, 184, 0.08) 100%\n        ) !important;\n      }\n    `,\n  ];\n\n  /**\n   * When true, children are not rendered (used in unified row architecture\n   * where children get their own rows).\n   */\n  @property({ type: Boolean, attribute: \"skip-children\" })\n  skipChildren = false;\n\n  /**\n   * When true, show filmstrip thumbnails for root timegroups\n   * TODO: Re-enable when thumbnail strip performance is improved\n   */\n  @property({ type: Boolean, attribute: \"show-filmstrip\" })\n  showFilmstrip = false;\n\n  /**\n   * Check if this track should show a filmstrip\n   */\n  private get shouldShowFilmstrip(): boolean {\n    const skipChildren = this.skipChildren;\n    const showFilmstrip = this.showFilmstrip;\n    const hasId = !!this.element?.id;\n    const isRoot = isRootTimegroup(this.element);\n    \n    return skipChildren && showFilmstrip && hasId && isRoot;\n  }\n\n  /**\n   * Override trimPortionStyles to use taller height for filmstrip rows\n   */\n  override get trimPortionStyles() {\n    const baseStyles = super.trimPortionStyles;\n    if (this.shouldShowFilmstrip) {\n      // Ensure minimum width for filmstrip tracks so thumbnail strip can render\n      // even when duration is 0 (e.g., sequence mode timegroups before children load)\n      const durationMs = this.element.durationMs ?? 0;\n      const calculatedWidth = this.pixelsPerMs * durationMs;\n      const minWidth = Math.max(calculatedWidth, 500); // Minimum 500px for thumbnail strip visibility\n      \n      return {\n        ...baseStyles,\n        height: `${FILMSTRIP_ROW_HEIGHT}px`,\n        width: `${minWidth}px`,\n        minWidth: `${minWidth}px`, // Ensure minimum width is enforced\n      };\n    }\n    return baseStyles;\n  }\n\n  contents() {\n    // Show filmstrip only for ROOT timegroups (no parent timegroup)\n    const shouldShow = this.shouldShowFilmstrip;\n    \n    if (shouldShow) {\n      // Don't set end-time-ms if duration is 0 - let thumbnail strip use target's duration directly\n      // This allows the thumbnail strip to watch for duration changes and update automatically\n      const durationMs = this.element.durationMs ?? 0;\n      const elementId = this.element.id;\n      \n      if (!elementId) {\n        return nothing;\n      }\n      \n      return html`\n        <ef-thumbnail-strip\n          target=\"${elementId}\"\n          start-time-ms=\"0\"\n          ${durationMs > 0 ? html`end-time-ms=\"${durationMs}\"` : nothing}\n          pixels-per-ms=\"${this.pixelsPerMs}\"\n        ></ef-thumbnail-strip>\n      `;\n    }\n\n    // Mode info is now shown in the label, track is empty for non-root timegroups\n    if (this.skipChildren) {\n      return nothing;\n    }\n    // Wrap children in a fragment for consistent return type\n    return html`${renderTrackChildren(\n      Array.from(this.element.children || []),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    )}`;\n  }\n\n  /**\n   * Override render to use taller height for filmstrip rows\n   */\n  override render() {\n    // Use custom height for filmstrip, standard height otherwise\n    const trackHeight = this.shouldShowFilmstrip \n      ? `${FILMSTRIP_ROW_HEIGHT}px` \n      : \"var(--timeline-track-height, 22px)\";\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container relative mb-0 block text-nowrap border text-sm\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: trackHeight,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: this.shouldShowFilmstrip ? \"transparent\" : \"var(--filmstrip-border)\",\n          })}\n        >\n          ${this.animations()}\n          ${this.contents()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timegroup-track\": EFTimegroupTrack;\n  }\n}\n\n"],"mappings":";;;;;;;;;;;;;AAcA,SAAS,gBAAgB,SAA8C;AAErE,KAAI,CAAC,QACH,QAAO;CAKT,MAAM,OAAO;AACb,KAAI,OAAO,KAAK,oBAAoB,UAClC,QAAO,KAAK;AAId,KAAI,KAAK,oBAAoB,OAC3B,QAAO,CAAC,KAAK;CAIf,IAAI,SAAS,QAAQ;AACrB,QAAO,QAAQ;AACb,MAAI,OAAO,QAAQ,aAAa,KAAK,eACnC,QAAO;AAET,WAAS,OAAO;;AAElB,QAAO;;;AAIT,MAAM,uBAAuB;AAGtB,6BAAMA,2BAAyB,UAAU;;;sBA2B/B;uBAOC;;;gBAjCA,CACd,GAAG,UAAU,QACb,GAAG;;;;;;;;;;;;;;;;MAiBJ;;;;;CAmBD,IAAY,sBAA+B;EACzC,MAAM,eAAe,KAAK;EAC1B,MAAM,gBAAgB,KAAK;EAC3B,MAAM,QAAQ,CAAC,CAAC,KAAK,SAAS;EAC9B,MAAM,SAAS,gBAAgB,KAAK,QAAQ;AAE5C,SAAO,gBAAgB,iBAAiB,SAAS;;;;;CAMnD,IAAa,oBAAoB;EAC/B,MAAM,aAAa,MAAM;AACzB,MAAI,KAAK,qBAAqB;GAG5B,MAAM,aAAa,KAAK,QAAQ,cAAc;GAC9C,MAAM,kBAAkB,KAAK,cAAc;GAC3C,MAAM,WAAW,KAAK,IAAI,iBAAiB,IAAI;AAE/C,UAAO;IACL,GAAG;IACH,QAAQ,GAAG,qBAAqB;IAChC,OAAO,GAAG,SAAS;IACnB,UAAU,GAAG,SAAS;IACvB;;AAEH,SAAO;;CAGT,WAAW;AAIT,MAFmB,KAAK,qBAER;GAGd,MAAM,aAAa,KAAK,QAAQ,cAAc;GAC9C,MAAM,YAAY,KAAK,QAAQ;AAE/B,OAAI,CAAC,UACH,QAAO;AAGT,UAAO,IAAI;;oBAEG,UAAU;;YAElB,aAAa,IAAI,IAAI,gBAAgB,WAAW,KAAK,QAAQ;2BAC9C,KAAK,YAAY;;;;AAMxC,MAAI,KAAK,aACP,QAAO;AAGT,SAAO,IAAI,GAAG,oBACZ,MAAM,KAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,EACvC,KAAK,aACL,KAAK,eACL,KAAK,eACL,OACA,KAAK,WACN;;;;;CAMH,AAAS,SAAS;EAEhB,MAAM,cAAc,KAAK,sBACrB,GAAG,qBAAqB,MACxB;AAEJ,SAAO,IAAI,cAAc,SAAS,KAAK,aAAa,CAAC;;;wBAGjC,KAAK,UAAU;4BACX;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB,KAAK;IAE1C;4BACkB;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB;IAErC;;;0BAGgB,KAAK,UAAU;;kBAEvB,SAAS;GACf,GAAG,KAAK;GACR,QAAQ;GACR,iBAAiB,KAAK,YAClB,kCACA;GACJ,aAAa,KAAK,sBAAsB,gBAAgB;GACzD,CAAC,CAAC;;YAED,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU,CAAC;;;QAGpB,KAAK,gBAAgB,CAAC;;;;YA3H3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC;YAOvD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,CAAC;+BAlC1D,cAAc,qBAAqB"}
+{"version":3,"file":"TimegroupTrack.js","names":["EFTimegroupTrack"],"sources":["../../../../src/gui/timeline/tracks/TimegroupTrack.ts"],"sourcesContent":["import { css, html, nothing } from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n// TrackItem must be pre-loaded before this module is imported\n// See preloadTracks.ts for the initialization sequence\nimport { TrackItem } from \"./TrackItem.js\";\nimport { renderTrackChildren } from \"./renderTrackChildren.js\";\nimport \"../../../elements/EFThumbnailStrip.js\";\n\n/**\n * Check if a timegroup is a root timegroup (has no parent timegroup)\n * Uses the timegroup's own isRootTimegroup property for reliability\n */\nfunction isRootTimegroup(element: Element | null | undefined): boolean {\n  // Handle null/undefined\n  if (!element) {\n    return false;\n  }\n  \n  // Check if element has the isRootTimegroup property (most reliable)\n  // EFTimegroup instances have this property that checks parentTimegroup\n  const elem = element as any;\n  if (typeof elem.isRootTimegroup === 'boolean') {\n    return elem.isRootTimegroup;\n  }\n  \n  // Alternative: check parentTimegroup property directly (EFTimegroup has this)\n  if (elem.parentTimegroup !== undefined) {\n    return !elem.parentTimegroup; // Root if no parent timegroup\n  }\n  \n  // Fallback: check DOM parent tree (less reliable after DOM moves)\n  let parent = element.parentElement;\n  while (parent) {\n    if (parent.tagName.toLowerCase() === \"ef-timegroup\") {\n      return false;\n    }\n    parent = parent.parentElement;\n  }\n  return true;\n}\n\n/** Height for root timegroup filmstrip row */\nconst FILMSTRIP_ROW_HEIGHT = 48;\n\n@customElement(\"ef-timegroup-track\")\nexport class EFTimegroupTrack extends TrackItem {\n  static styles = [\n    ...TrackItem.styles,\n    css`\n      .trim-container {\n        background: linear-gradient(\n          135deg,\n          rgba(148, 163, 184, 0.1) 0%,\n          rgba(148, 163, 184, 0.05) 100%\n        ) !important;\n      }\n      \n      :host(:hover) .trim-container {\n        background: linear-gradient(\n          135deg,\n          rgba(148, 163, 184, 0.15) 0%,\n          rgba(148, 163, 184, 0.08) 100%\n        ) !important;\n      }\n    `,\n  ];\n\n  /**\n   * When true, children are not rendered (used in unified row architecture\n   * where children get their own rows).\n   */\n  @property({ type: Boolean, attribute: \"skip-children\" })\n  skipChildren = false;\n\n  /**\n   * When true, show filmstrip thumbnails for root timegroups\n   * TODO: Re-enable when thumbnail strip performance is improved\n   */\n  @property({ type: Boolean, attribute: \"show-filmstrip\" })\n  showFilmstrip = false;\n\n  /**\n   * Check if this track should show a filmstrip\n   */\n  private get shouldShowFilmstrip(): boolean {\n    const skipChildren = this.skipChildren;\n    const showFilmstrip = this.showFilmstrip;\n    const hasId = !!this.element?.id;\n    const isRoot = isRootTimegroup(this.element);\n    \n    return skipChildren && showFilmstrip && hasId && isRoot;\n  }\n\n  /**\n   * Override trimPortionStyles to use taller height for filmstrip rows\n   */\n  override get trimPortionStyles() {\n    const baseStyles = super.trimPortionStyles;\n    if (this.shouldShowFilmstrip) {\n      // Ensure minimum width for filmstrip tracks so thumbnail strip can render\n      // even when duration is 0 (e.g., sequence mode timegroups before children load)\n      const durationMs = this.element.durationMs ?? 0;\n      const calculatedWidth = this.pixelsPerMs * durationMs;\n      const minWidth = Math.max(calculatedWidth, 500); // Minimum 500px for thumbnail strip visibility\n      \n      return {\n        ...baseStyles,\n        height: `${FILMSTRIP_ROW_HEIGHT}px`,\n        width: `${minWidth}px`,\n        minWidth: `${minWidth}px`, // Ensure minimum width is enforced\n      };\n    }\n    return baseStyles;\n  }\n\n  contents() {\n    // Show filmstrip only for ROOT timegroups (no parent timegroup)\n    const shouldShow = this.shouldShowFilmstrip;\n    \n    if (shouldShow) {\n      // Don't set end-time-ms if duration is 0 - let thumbnail strip use target's duration directly\n      // This allows the thumbnail strip to watch for duration changes and update automatically\n      const durationMs = this.element.durationMs ?? 0;\n      const elementId = this.element.id;\n      \n      if (!elementId) {\n        return nothing;\n      }\n      \n      return nothing;\n      return html`\n        <ef-thumbnail-strip\n          target=\"${elementId}\"\n          start-time-ms=\"0\"\n          ${durationMs > 0 ? html`end-time-ms=\"${durationMs}\"` : nothing}\n          pixels-per-ms=\"${this.pixelsPerMs}\"\n        ></ef-thumbnail-strip>\n      `;\n    }\n\n    // Mode info is now shown in the label, track is empty for non-root timegroups\n    if (this.skipChildren) {\n      return nothing;\n    }\n    // Wrap children in a fragment for consistent return type\n    return html`${renderTrackChildren(\n      Array.from(this.element.children || []),\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.enableTrim,\n    )}`;\n  }\n\n  /**\n   * Override render to use taller height for filmstrip rows\n   */\n  override render() {\n    // Use custom height for filmstrip, standard height otherwise\n    const trackHeight = this.shouldShowFilmstrip \n      ? `${FILMSTRIP_ROW_HEIGHT}px` \n      : \"var(--timeline-track-height, 22px)\";\n\n    return html`<div style=${styleMap(this.gutterStyles)}>\n      <div\n        style=\"background-color: var(--filmstrip-bg);\"\n        ?data-focused=${this.isFocused}\n        @mouseenter=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = this.element;\n          }\n        }}\n        @mouseleave=${() => {\n          if (this.focusContext) {\n            this.focusContext.focusedElement = null;\n          }\n        }}\n      >\n        <div\n          ?data-focused=${this.isFocused}\n          class=\"trim-container relative mb-0 block text-nowrap border text-sm\"\n          style=${styleMap({\n            ...this.trimPortionStyles,\n            height: trackHeight,\n            backgroundColor: this.isFocused\n              ? \"var(--filmstrip-item-focused)\"\n              : \"var(--filmstrip-item-bg)\",\n            borderColor: this.shouldShowFilmstrip ? \"transparent\" : \"var(--filmstrip-border)\",\n          })}\n        >\n          ${this.animations()}\n          ${this.contents()}\n        </div>\n      </div>\n      ${this.renderChildren()}\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timegroup-track\": EFTimegroupTrack;\n  }\n}\n\n"],"mappings":";;;;;;;;;;;;;AAaA,SAAS,gBAAgB,SAA8C;AAErE,KAAI,CAAC,QACH,QAAO;CAKT,MAAM,OAAO;AACb,KAAI,OAAO,KAAK,oBAAoB,UAClC,QAAO,KAAK;AAId,KAAI,KAAK,oBAAoB,OAC3B,QAAO,CAAC,KAAK;CAIf,IAAI,SAAS,QAAQ;AACrB,QAAO,QAAQ;AACb,MAAI,OAAO,QAAQ,aAAa,KAAK,eACnC,QAAO;AAET,WAAS,OAAO;;AAElB,QAAO;;;AAIT,MAAM,uBAAuB;AAGtB,6BAAMA,2BAAyB,UAAU;;;sBA2B/B;uBAOC;;;gBAjCA,CACd,GAAG,UAAU,QACb,GAAG;;;;;;;;;;;;;;;;MAiBJ;;;;;CAmBD,IAAY,sBAA+B;EACzC,MAAM,eAAe,KAAK;EAC1B,MAAM,gBAAgB,KAAK;EAC3B,MAAM,QAAQ,CAAC,CAAC,KAAK,SAAS;EAC9B,MAAM,SAAS,gBAAgB,KAAK,QAAQ;AAE5C,SAAO,gBAAgB,iBAAiB,SAAS;;;;;CAMnD,IAAa,oBAAoB;EAC/B,MAAM,aAAa,MAAM;AACzB,MAAI,KAAK,qBAAqB;GAG5B,MAAM,aAAa,KAAK,QAAQ,cAAc;GAC9C,MAAM,kBAAkB,KAAK,cAAc;GAC3C,MAAM,WAAW,KAAK,IAAI,iBAAiB,IAAI;AAE/C,UAAO;IACL,GAAG;IACH,QAAQ,GAAG,qBAAqB;IAChC,OAAO,GAAG,SAAS;IACnB,UAAU,GAAG,SAAS;IACvB;;AAEH,SAAO;;CAGT,WAAW;AAIT,MAFmB,KAAK,qBAER;AAGK,QAAK,QAAQ;AAGhC,OAAI,CAFc,KAAK,QAAQ,GAG7B,QAAO;AAGT,UAAO;;AAYT,MAAI,KAAK,aACP,QAAO;AAGT,SAAO,IAAI,GAAG,oBACZ,MAAM,KAAK,KAAK,QAAQ,YAAY,EAAE,CAAC,EACvC,KAAK,aACL,KAAK,eACL,KAAK,eACL,OACA,KAAK,WACN;;;;;CAMH,AAAS,SAAS;EAEhB,MAAM,cAAc,KAAK,sBACrB,GAAG,qBAAqB,MACxB;AAEJ,SAAO,IAAI,cAAc,SAAS,KAAK,aAAa,CAAC;;;wBAGjC,KAAK,UAAU;4BACX;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB,KAAK;IAE1C;4BACkB;AAClB,OAAI,KAAK,aACP,MAAK,aAAa,iBAAiB;IAErC;;;0BAGgB,KAAK,UAAU;;kBAEvB,SAAS;GACf,GAAG,KAAK;GACR,QAAQ;GACR,iBAAiB,KAAK,YAClB,kCACA;GACJ,aAAa,KAAK,sBAAsB,gBAAgB;GACzD,CAAC,CAAC;;YAED,KAAK,YAAY,CAAC;YAClB,KAAK,UAAU,CAAC;;;QAGpB,KAAK,gBAAgB,CAAC;;;;YA5H3B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAiB,CAAC;YAOvD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAkB,CAAC;+BAlC1D,cAAc,qBAAqB"}

package/dist/gui/timeline/tracks/TrackItem.d.ts

@@ -0,0 +1,81 @@
+import { TemporalMixinInterface } from "../../../elements/EFTemporal.js";
+import { FocusContext } from "../../focusContext.js";
+import { TrimChangeDetail } from "../TrimHandles.js";
+import * as lit43 from "lit";
+import { LitElement, PropertyValueMap, ReactiveController, TemplateResult, nothing } from "lit";
+
+//#region src/gui/timeline/tracks/TrackItem.d.ts
+declare class ElementTrackController implements ReactiveController {
+  private host;
+  private track;
+  private lastDuration;
+  private durationCheckFrame?;
+  constructor(host: LitElement, track: TrackItem);
+  remove(): void;
+  hostDisconnected(): void;
+  hostConnected(): void;
+  private checkDuration;
+  hostUpdated(): void;
+}
+declare const TrackItem_base: typeof LitElement;
+declare class TrackItem extends TrackItem_base {
+  static styles: lit43.CSSResult[];
+  focusContext?: FocusContext;
+  focusedElement?: HTMLElement | null;
+  get isFocused(): boolean;
+  /**
+   * Get element type for styling and icons
+   */
+  protected getElementType(): "video" | "audio" | "image" | "text" | "timegroup" | "captions" | "unknown";
+  /**
+   * Get color for element type
+   */
+  protected getElementTypeColor(): string;
+  /**
+   * Get icon for element type
+   */
+  protected getElementIcon(): TemplateResult | typeof nothing;
+  /**
+   * Format duration for display
+   */
+  protected formatDuration(ms: number): string;
+  /**
+   * Get tooltip text with element info
+   */
+  protected getTooltipText(): string;
+  element: TemporalMixinInterface & LitElement;
+  pixelsPerMs: number;
+  enableTrim: boolean;
+  hideSelectors?: string[];
+  showSelectors?: string[];
+  /**
+   * When true, positions the track at the element's absolute start time
+   * (startTimeMs) rather than relative to parent (startTimeWithinParentMs).
+   * Used for flat row architectures where each element gets its own row.
+   */
+  useAbsolutePosition: boolean;
+  get gutterStyles(): {
+    position: string;
+    left: string;
+    width: string;
+  };
+  get trimPortionStyles(): {
+    width: string;
+    left: string;
+  };
+  protected handleTrimChange(e: CustomEvent<TrimChangeDetail>): void;
+  contents(): TemplateResult | typeof nothing;
+  animations(): never[];
+  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+  render(): TemplateResult<1>;
+  protected trackController?: ElementTrackController;
+  update(changedProperties: PropertyValueMap<any> | Map<PropertyKey, unknown>): void;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-track-item": TrackItem;
+  }
+}
+//#endregion
+export { TrackItem };
+//# sourceMappingURL=TrackItem.d.ts.map

package/dist/gui/timeline/tracks/TrackItem.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { focusContext } from "../../focusContext.js";
 import { focusedElementContext } from "../../focusedElementContext.js";
 import { TWMixin } from "../../TWMixin2.js";

package/dist/gui/timeline/tracks/VideoTrack.d.ts

@@ -0,0 +1,25 @@
+import { TrackItem } from "./TrackItem.js";
+import "../../../elements/EFThumbnailStrip.js";
+import * as lit39 from "lit";
+import * as lit_html36 from "lit-html";
+import * as lit_html_directives_ref_js5 from "lit-html/directives/ref.js";
+
+//#region src/gui/timeline/tracks/VideoTrack.d.ts
+declare class EFVideoTrack extends TrackItem {
+  #private;
+  static styles: lit39.CSSResult[];
+  audioCanvasRef: lit_html_directives_ref_js5.Ref<HTMLCanvasElement>;
+  private _timelineState?;
+  private _waveformData;
+  private _hasAudio;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  updated(changedProperties: Map<string | number | symbol, unknown>): void;
+  render(): lit_html36.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-video-track": EFVideoTrack;
+  }
+}
+//# sourceMappingURL=VideoTrack.d.ts.map

package/dist/gui/timeline/tracks/VideoTrack.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { EFVideo } from "../../../elements/EFVideo.js";
 import { TrackItem } from "./TrackItem.js";
 import { extractWaveformData } from "./waveformUtils.js";

package/dist/gui/timeline/tracks/WaveformTrack.d.ts

@@ -0,0 +1,14 @@
+import { TrackItem } from "./TrackItem.js";
+import { TemplateResult, nothing } from "lit";
+
+//#region src/gui/timeline/tracks/WaveformTrack.d.ts
+declare class EFWaveformTrack extends TrackItem {
+  contents(): TemplateResult<1>;
+  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-waveform-track": EFWaveformTrack;
+  }
+}
+//# sourceMappingURL=WaveformTrack.d.ts.map

package/dist/gui/timeline/tracks/WaveformTrack.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { ICONS, phosphorIcon } from "../../icons.js";
 import { TrackItem } from "./TrackItem.js";
 import { nothing } from "lit";

package/dist/gui/timeline/tracks/ensureTrackItemInit.d.ts

@@ -0,0 +1 @@
+import { TrackItem } from "./TrackItem.js";

package/dist/gui/timeline/tracks/preloadTracks.d.ts

@@ -0,0 +1,9 @@
+import "./ensureTrackItemInit.js";
+import "./AudioTrack.js";
+import "./VideoTrack.js";
+import "./ImageTrack.js";
+import "./TimegroupTrack.js";
+import "./TextTrack.js";
+import "./HTMLTrack.js";
+import "./CaptionsTrack.js";
+import "./WaveformTrack.js";

package/dist/gui/tree/EFTree.d.ts

@@ -1,7 +1,8 @@
 import { TreeItem } from "./treeContext.js";
-import * as lit16 from "lit";
+import "./EFTreeItem.js";
+import * as lit12 from "lit";
 import { LitElement, PropertyValues } from "lit";
-import * as lit_html16 from "lit-html";
+import * as lit_html12 from "lit-html";
 
 //#region src/gui/tree/EFTree.d.ts
 
@@ -28,7 +29,7 @@ import * as lit_html16 from "lit-html";
  * ```
  */
 declare class EFTree extends LitElement {
-  static styles: lit16.CSSResult;
+  static styles: lit12.CSSResult;
   /** Tree items to display */
   items: TreeItem[];
   /** Optional header text */
@@ -47,7 +48,7 @@ declare class EFTree extends LitElement {
   protected willUpdate(changedProperties: PropertyValues): void;
   protected updated(changedProperties: PropertyValues): void;
   connectedCallback(): void;
-  render(): lit_html16.TemplateResult<1>;
+  render(): lit_html12.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/tree/EFTree.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { collectAllIds, treeContext } from "./treeContext.js";
 import "./EFTreeItem.js";
 import { provide } from "@lit/context";

package/dist/gui/tree/EFTreeItem.d.ts

@@ -1,7 +1,7 @@
 import { TreeContext, TreeItem } from "./treeContext.js";
-import * as lit17 from "lit";
+import * as lit13 from "lit";
 import { LitElement, nothing } from "lit";
-import * as lit_html17 from "lit-html";
+import * as lit_html13 from "lit-html";
 
 //#region src/gui/tree/EFTreeItem.d.ts
 
@@ -17,7 +17,7 @@ import * as lit_html17 from "lit-html";
  * @fires tree-item-click - When item is clicked (for selection)
  */
 declare class EFTreeItem extends LitElement {
-  static styles: lit17.CSSResult;
+  static styles: lit13.CSSResult;
   treeContext?: TreeContext;
   item: TreeItem;
   private localExpanded;
@@ -26,7 +26,7 @@ declare class EFTreeItem extends LitElement {
   get hasChildren(): boolean;
   private handleClick;
   private handleExpandClick;
-  render(): lit_html17.TemplateResult<1> | typeof nothing;
+  render(): lit_html13.TemplateResult<1> | typeof nothing;
 }
 declare global {
   interface HTMLElementTagNameMap {

package/dist/gui/tree/EFTreeItem.js

@@ -1,4 +1,4 @@
-import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { treeContext } from "./treeContext.js";
 import { consume } from "@lit/context";
 import { LitElement, css, html, nothing } from "lit";

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 import { TraceContext } from "./otel/tracingHelpers.js";
+import "./EF_FRAMEGEN.js";
 import { TemporalMixinInterface, isEFTemporal } from "./elements/EFTemporal.js";
 import { EFMedia } from "./elements/EFMedia.js";
 import { ContainerInfo, getContainerInfoFromElement } from "./elements/ContainerInfo.js";
 import { ElementPositionInfo, PositionInfoMixin, getPositionInfoFromElement } from "./elements/ElementPositionInfo.js";
+import { EFVideo } from "./elements/EFVideo.js";
 import { RenderProgress, RenderToVideoOptions } from "./preview/renderTimegroupToVideo.js";
 import { CanvasElementBounds, CanvasElementData, SelectionState } from "./canvas/api/types.js";
 import { EFPanZoom, PanZoomTransform } from "./elements/EFPanZoom.js";
@@ -12,7 +14,6 @@ import { EFTransformHandles, TransformBounds } from "./gui/EFTransformHandles.js
 import { EFCanvas } from "./canvas/EFCanvas.js";
 import { EFHierarchy } from "./gui/hierarchy/EFHierarchy.js";
 import { EFTrimHandles, TrimChangeDetail } from "./gui/timeline/TrimHandles.js";
-import { EFVideo } from "./elements/EFVideo.js";
 import { EFThumbnailStrip } from "./elements/EFThumbnailStrip.js";
 import { EFAudio } from "./elements/EFAudio.js";
 import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "./elements/EFCaptions.js";
@@ -22,6 +23,7 @@ import { EFFilmstrip } from "./gui/EFFilmstrip.js";
 import { EFFitScale } from "./gui/EFFitScale.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFTimegroup } from "./elements/EFTimegroup.js";
+import "./sandbox/index.js";
 import { elementNeedsFitScale, needsFitScale } from "./gui/FitScaleHelpers.js";
 import { EFImage } from "./elements/EFImage.js";
 import { EFTextSegment } from "./elements/EFTextSegment.js";
@@ -50,6 +52,7 @@ import { EFSurface } from "./elements/EFSurface.js";
 import { EFCanvasItem } from "./canvas/EFCanvasItem.js";
 import { CanvasAPI } from "./canvas/api/CanvasAPI.js";
 import { SelectionModel } from "./canvas/selection/SelectionModel.js";
+import "./render/EFRenderAPI.js";
 import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
 import { getRenderData } from "./render/getRenderData.js";
 export { type BoxBounds, CanvasAPI, type CanvasElementBounds, type CanvasElementData, type ContainerInfo, type DialChangeDetail, EFActiveRootTemporal, EFAudio, EFAudioHierarchyItem, EFCanvas, EFCanvasItem, EFCaptions, EFCaptionsActiveWord, EFCaptionsActiveWordHierarchyItem, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsHierarchyItem, EFCaptionsSegment, EFConfiguration, EFControls, EFDial, EFFilmstrip, EFFitScale, EFFocusOverlay, EFHTMLHierarchyItem, EFHierarchy, EFHierarchyItem, EFImage, EFImageHierarchyItem, type EFMedia, EFOverlayItem, EFOverlayLayer, EFPanZoom, EFPause, EFPlay, EFPreview, EFResizableBox, EFScrubber, EFSurface, EFText, EFTextHierarchyItem, EFTextSegment, EFTextSegmentHierarchyItem, EFThumbnailStrip, EFTimeDisplay, EFTimegroup, EFTimegroupHierarchyItem, EFTimeline, EFTimelineRuler, EFToggleLoop, EFTogglePlay, EFTransformHandles, EFTree, EFTreeItem, EFTrimHandles, EFVideo, EFVideoHierarchyItem, EFWaveform, EFWaveformHierarchyItem, EFWorkbench, type ElementPositionInfo, type HierarchyActions, type HierarchyContext, type HierarchyState, type OverlayItemPosition, type PanZoomTransform, PositionInfoMixin, RenderInfo, type RenderProgress, type RenderToVideoOptions, SelectionModel, type SelectionState, type TemporalMixinInterface, type TraceContext, type TransformBounds, type TreeActions, type TreeContext, type TreeItem, type TreeState, type TrimChangeDetail, calculateFrameIntervalMs, calculatePixelsPerFrame, collectAllIds, elementNeedsFitScale, getContainerInfoFromElement, getCornerPoint, getOppositeCorner, getPositionInfoFromElement, getRenderData, getRenderInfo, hierarchyContext, isEFTemporal, needsFitScale, quantizeToFrameTimeMs, rotatePoint, shouldShowFrameMarkers, treeContext };

package/dist/preview/AdaptiveResolutionTracker.js

@@ -1,15 +1,7 @@
+import { logger } from "./logger.js";
+
 //#region src/preview/AdaptiveResolutionTracker.ts
 /**
-* Adaptive Resolution Tracker
-* 
-* Monitors actual render time to dynamically adjust preview resolution
-* for smooth playback without dropped frames.
-* 
-* Key insight: We measure how long each render() takes, not rAF timing.
-* If renders consistently take longer than our frame budget, scale down.
-* If renders consistently have headroom, scale up.
-*/
-/**
 * Available resolution scale steps for adaptive scaling.
 * Finer-grained steps (5% increments) for smoother adaptation.
 * Ordered from highest to lowest quality.
@@ -83,7 +75,7 @@ var AdaptiveResolutionTracker = class {
 			});
 			this.pressureObserver.observe("cpu", { sampleInterval: 500 });
 		} catch (e) {
-			console.warn("[AdaptiveResolutionTracker] Failed to initialize PressureObserver:", e);
+			logger.warn("[AdaptiveResolutionTracker] Failed to initialize PressureObserver:", e);
 			this.pressureObserver = null;
 		}
 	}
@@ -134,7 +126,7 @@ var AdaptiveResolutionTracker = class {
 			this.samplesAtCurrentScale = 0;
 			this.renderTimes = [];
 			const newScale = SCALE_STEPS[this.currentScaleIndex];
-			console.log(`[AdaptiveResolutionTracker] Scaling DOWN to ${(newScale * 100).toFixed(0)}% (reason: ${reason})`);
+			logger.debug(`[AdaptiveResolutionTracker] Scaling DOWN to ${(newScale * 100).toFixed(0)}% (reason: ${reason})`);
 			this.onScaleChange?.(newScale);
 		}
 	}
@@ -148,7 +140,7 @@ var AdaptiveResolutionTracker = class {
 			this.samplesAtCurrentScale = 0;
 			this.renderTimes = [];
 			const newScale = SCALE_STEPS[this.currentScaleIndex];
-			console.log(`[AdaptiveResolutionTracker] Scaling UP to ${(newScale * 100).toFixed(0)}% (reason: stable performance)`);
+			logger.debug(`[AdaptiveResolutionTracker] Scaling UP to ${(newScale * 100).toFixed(0)}% (reason: stable performance)`);
 			this.onScaleChange?.(newScale);
 		}
 	}
@@ -208,7 +200,7 @@ var AdaptiveResolutionTracker = class {
 		this.renderTimes = [];
 		this.lastScaleChangeTime = 0;
 		this.samplesAtCurrentScale = 0;
-		console.log(`[AdaptiveResolutionTracker] Initialized at scale ${(SCALE_STEPS[bestIndex] * 100).toFixed(0)}%`);
+		logger.debug(`[AdaptiveResolutionTracker] Initialized at scale ${(SCALE_STEPS[bestIndex] * 100).toFixed(0)}%`);
 	}
 	/**
 	* Clean up resources.

package/dist/preview/AdaptiveResolutionTracker.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdaptiveResolutionTracker.js","names":[],"sources":["../../src/preview/AdaptiveResolutionTracker.ts"],"sourcesContent":["/**\n * Adaptive Resolution Tracker\n * \n * Monitors actual render time to dynamically adjust preview resolution\n * for smooth playback without dropped frames.\n * \n * Key insight: We measure how long each render() takes, not rAF timing.\n * If renders consistently take longer than our frame budget, scale down.\n * If renders consistently have headroom, scale up.\n */\n\n/**\n * Available resolution scale steps for adaptive scaling.\n * Finer-grained steps (5% increments) for smoother adaptation.\n * Ordered from highest to lowest quality.\n */\nconst SCALE_STEPS = [\n  1.0, 0.95, 0.90, 0.85, 0.80, \n  0.75, 0.70, 0.65, 0.60, 0.55,\n  0.50, 0.45, 0.40, 0.35, 0.30,\n  0.25, 0.20, 0.15, 0.10\n] as const;\ntype ScaleStep = typeof SCALE_STEPS[number];\n\n/**\n * Compute Pressure API types (not yet in TypeScript lib)\n */\ntype PressureState = \"nominal\" | \"fair\" | \"serious\" | \"critical\";\n\ninterface PressureRecord {\n  state: PressureState;\n  time: number;\n}\n\ninterface PressureObserverCallback {\n  (records: PressureRecord[]): void;\n}\n\ninterface PressureObserverOptions {\n  sampleInterval?: number;\n}\n\ndeclare class PressureObserver {\n  constructor(callback: PressureObserverCallback);\n  observe(source: \"cpu\", options?: PressureObserverOptions): Promise<void>;\n  unobserve(source: \"cpu\"): void;\n  disconnect(): void;\n}\n\n/**\n * Timing thresholds\n * \n * Target: 30fps = 33.33ms per frame\n * Tolerate down to 15fps (half target) before scaling down.\n * Scale up when we have plenty of headroom.\n */\nconst TARGET_FRAME_TIME_MS = 33.33; // 30fps target\nconst SCALE_DOWN_THRESHOLD_MS = 66.67; // 15fps (half target) - only scale down if really struggling\nconst SCALE_UP_THRESHOLD_MS = 25; // If avg render time is well below target, consider scaling up\nconst ROLLING_WINDOW_SIZE = 30; // ~1 second of samples at 30fps\nconst MIN_SCALE_CHANGE_INTERVAL_MS = 2000; // Wait 2s between any scale changes\nconst SCALE_UP_STABILITY_SAMPLES = 60; // Need 60 samples (~2s) of good performance to scale up\n\n/** Size of the pressure history for histogram display */\nconst PRESSURE_HISTORY_SIZE = 60;\n\n/**\n * Tracks render time to recommend optimal preview resolution.\n */\nexport class AdaptiveResolutionTracker {\n  private renderTimes: number[] = []; // Rolling window of render times (ms)\n  private currentScaleIndex = 0; // Index into SCALE_STEPS (0 = highest quality)\n  private lastScaleChangeTime = 0;\n  private samplesAtCurrentScale = 0; // How many samples we've collected at current scale\n  \n  // Compute Pressure API\n  private pressureObserver: PressureObserver | null = null;\n  private pressureState: PressureState = \"nominal\";\n  private pressureHistory: PressureState[] = [];\n  \n  // For display - track frame intervals separately from render times\n  private lastFrameTime = 0;\n  private frameIntervals: number[] = [];\n  \n  // Callbacks\n  private onScaleChange?: (scale: ScaleStep) => void;\n  \n  constructor(options?: { onScaleChange?: (scale: ScaleStep) => void }) {\n    this.onScaleChange = options?.onScaleChange;\n    this.initPressureObserver();\n  }\n  \n  /**\n   * Initialize Compute Pressure API observer if available.\n   */\n  private initPressureObserver(): void {\n    if (!(\"PressureObserver\" in globalThis)) {\n      return;\n    }\n    \n    try {\n      this.pressureObserver = new PressureObserver((records) => {\n        if (records.length > 0) {\n          const latest = records[records.length - 1]!;\n          this.pressureState = latest.state;\n          \n          this.pressureHistory.push(latest.state);\n          if (this.pressureHistory.length > PRESSURE_HISTORY_SIZE) {\n            this.pressureHistory.shift();\n          }\n        }\n      });\n      \n      this.pressureObserver.observe(\"cpu\", { sampleInterval: 500 });\n    } catch (e) {\n      console.warn(\"[AdaptiveResolutionTracker] Failed to initialize PressureObserver:\", e);\n      this.pressureObserver = null;\n    }\n  }\n  \n  /**\n   * Record a frame's render time.\n   * Call this AFTER each render completes with how long the render took.\n   * \n   * @param renderTimeMs - How long the render() call took in milliseconds\n   * @param timestamp - Optional rAF timestamp for frame interval tracking (display only)\n   */\n  recordFrame(renderTimeMs: number, timestamp?: number): void {\n    // Track render times for adaptive decisions\n    this.renderTimes.push(renderTimeMs);\n    if (this.renderTimes.length > ROLLING_WINDOW_SIZE) {\n      this.renderTimes.shift();\n    }\n    this.samplesAtCurrentScale++;\n    \n    // Track frame intervals for FPS display (separate from render time)\n    if (timestamp !== undefined && this.lastFrameTime > 0) {\n      const interval = timestamp - this.lastFrameTime;\n      this.frameIntervals.push(interval);\n      if (this.frameIntervals.length > ROLLING_WINDOW_SIZE) {\n        this.frameIntervals.shift();\n      }\n    }\n    if (timestamp !== undefined) {\n      this.lastFrameTime = timestamp;\n    }\n    \n    // Check if we should adjust scale\n    this.checkForScaleAdjustment();\n  }\n  \n  /**\n   * Check if we should scale up or down based on render time trends.\n   */\n  private checkForScaleAdjustment(): void {\n    if (this.renderTimes.length < 10) return; // Need some samples\n    \n    const now = performance.now();\n    if (now - this.lastScaleChangeTime < MIN_SCALE_CHANGE_INTERVAL_MS) {\n      return; // Rate limit changes\n    }\n    \n    const avgRenderTime = this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length;\n    \n    // Scale DOWN if we're consistently slow\n    if (avgRenderTime > SCALE_DOWN_THRESHOLD_MS) {\n      this.scaleDown(\"slow\");\n      return;\n    }\n    \n    // Scale DOWN if CPU pressure is high (proactive)\n    if (this.pressureState === \"critical\" || this.pressureState === \"serious\") {\n      this.scaleDown(\"pressure\");\n      return;\n    }\n    \n    // Scale UP if we have sustained headroom and CPU isn't under pressure\n    // (we already returned above if pressure is serious/critical, but check again for clarity)\n    const pressureOk = this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    if (avgRenderTime < SCALE_UP_THRESHOLD_MS && \n        this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n        pressureOk) {\n      this.scaleUp();\n    }\n  }\n  \n  /**\n   * Decrease resolution (increase scale index).\n   */\n  private scaleDown(reason: \"slow\" | \"pressure\"): void {\n    if (this.currentScaleIndex < SCALE_STEPS.length - 1) {\n      this.currentScaleIndex++;\n      this.lastScaleChangeTime = performance.now();\n      this.samplesAtCurrentScale = 0;\n      this.renderTimes = []; // Clear history at new scale\n      \n      const newScale = SCALE_STEPS[this.currentScaleIndex]!;\n      console.log(`[AdaptiveResolutionTracker] Scaling DOWN to ${(newScale * 100).toFixed(0)}% (reason: ${reason})`);\n      this.onScaleChange?.(newScale);\n    }\n  }\n  \n  /**\n   * Increase resolution (decrease scale index).\n   */\n  private scaleUp(): void {\n    if (this.currentScaleIndex > 0) {\n      this.currentScaleIndex--;\n      this.lastScaleChangeTime = performance.now();\n      this.samplesAtCurrentScale = 0;\n      this.renderTimes = []; // Clear history at new scale\n      \n      const newScale = SCALE_STEPS[this.currentScaleIndex]!;\n      console.log(`[AdaptiveResolutionTracker] Scaling UP to ${(newScale * 100).toFixed(0)}% (reason: stable performance)`);\n      this.onScaleChange?.(newScale);\n    }\n  }\n  \n  /**\n   * Get the current recommended scale factor.\n   */\n  getRecommendedScale(): ScaleStep {\n    return SCALE_STEPS[this.currentScaleIndex]!;\n  }\n  \n  /**\n   * Get current statistics for display.\n   */\n  getStats(): {\n    currentScale: ScaleStep;\n    avgRenderTime: number;\n    fps: number;\n    pressureState: PressureState;\n    pressureHistory: PressureState[];\n    samplesAtCurrentScale: number;\n    canScaleUp: boolean;\n    canScaleDown: boolean;\n    headroom: number; // How much faster than target we're rendering (negative = behind)\n  } {\n    const avgRenderTime = this.renderTimes.length > 0\n      ? this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length\n      : 0;\n    \n    // FPS based on frame intervals (how often we're called), not render time\n    const avgFrameInterval = this.frameIntervals.length > 0\n      ? this.frameIntervals.reduce((a, b) => a + b, 0) / this.frameIntervals.length\n      : 16.67;\n    const fps = avgFrameInterval > 0 ? 1000 / avgFrameInterval : 0;\n    \n    const now = performance.now();\n    const timeSinceLastChange = now - this.lastScaleChangeTime;\n    const canChange = timeSinceLastChange >= MIN_SCALE_CHANGE_INTERVAL_MS;\n    \n    const pressureOk = this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    const canScaleUp = canChange && \n      this.currentScaleIndex > 0 && \n      avgRenderTime < SCALE_UP_THRESHOLD_MS &&\n      this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n      pressureOk;\n    \n    const canScaleDown = canChange && \n      this.currentScaleIndex < SCALE_STEPS.length - 1;\n    \n    // Headroom: positive = we're faster than needed, negative = we're behind\n    const headroom = TARGET_FRAME_TIME_MS - avgRenderTime;\n    \n    return {\n      currentScale: this.getRecommendedScale(),\n      avgRenderTime,\n      fps,\n      pressureState: this.pressureState,\n      pressureHistory: [...this.pressureHistory],\n      samplesAtCurrentScale: this.samplesAtCurrentScale,\n      canScaleUp,\n      canScaleDown,\n      headroom,\n    };\n  }\n  \n  /**\n   * Reset the tracker state.\n   */\n  reset(): void {\n    this.lastFrameTime = 0;\n    this.frameIntervals = [];\n    this.renderTimes = [];\n    this.currentScaleIndex = 0;\n    this.lastScaleChangeTime = 0;\n    this.samplesAtCurrentScale = 0;\n  }\n  \n  /**\n   * Initialize the tracker to start at a specific scale.\n   */\n  initializeAtScale(targetScale: number): void {\n    let bestIndex = 0;\n    for (let i = 0; i < SCALE_STEPS.length; i++) {\n      if (SCALE_STEPS[i]! <= targetScale) {\n        bestIndex = i;\n        break;\n      }\n    }\n    \n    this.currentScaleIndex = bestIndex;\n    this.lastFrameTime = 0;\n    this.frameIntervals = [];\n    this.renderTimes = [];\n    this.lastScaleChangeTime = 0;\n    this.samplesAtCurrentScale = 0;\n    \n    console.log(`[AdaptiveResolutionTracker] Initialized at scale ${(SCALE_STEPS[bestIndex]! * 100).toFixed(0)}%`);\n  }\n  \n  /**\n   * Clean up resources.\n   */\n  dispose(): void {\n    if (this.pressureObserver) {\n      try {\n        this.pressureObserver.disconnect();\n      } catch {\n        // Ignore cleanup errors\n      }\n      this.pressureObserver = null;\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"AdaptiveResolutionTracker.js","names":[],"sources":["../../src/preview/AdaptiveResolutionTracker.ts"],"sourcesContent":["/**\n * Adaptive Resolution Tracker\n * \n * Monitors actual render time to dynamically adjust preview resolution\n * for smooth playback without dropped frames.\n * \n * Key insight: We measure how long each render() takes, not rAF timing.\n * If renders consistently take longer than our frame budget, scale down.\n * If renders consistently have headroom, scale up.\n */\n\nimport { logger } from \"./logger.js\";\n\n/**\n * Available resolution scale steps for adaptive scaling.\n * Finer-grained steps (5% increments) for smoother adaptation.\n * Ordered from highest to lowest quality.\n */\nconst SCALE_STEPS = [\n  1.0, 0.95, 0.90, 0.85, 0.80, \n  0.75, 0.70, 0.65, 0.60, 0.55,\n  0.50, 0.45, 0.40, 0.35, 0.30,\n  0.25, 0.20, 0.15, 0.10\n] as const;\ntype ScaleStep = typeof SCALE_STEPS[number];\n\n/**\n * Compute Pressure API types (not yet in TypeScript lib)\n */\ntype PressureState = \"nominal\" | \"fair\" | \"serious\" | \"critical\";\n\ninterface PressureRecord {\n  state: PressureState;\n  time: number;\n}\n\ninterface PressureObserverCallback {\n  (records: PressureRecord[]): void;\n}\n\ninterface PressureObserverOptions {\n  sampleInterval?: number;\n}\n\ndeclare class PressureObserver {\n  constructor(callback: PressureObserverCallback);\n  observe(source: \"cpu\", options?: PressureObserverOptions): Promise<void>;\n  unobserve(source: \"cpu\"): void;\n  disconnect(): void;\n}\n\n/**\n * Timing thresholds\n * \n * Target: 30fps = 33.33ms per frame\n * Tolerate down to 15fps (half target) before scaling down.\n * Scale up when we have plenty of headroom.\n */\nconst TARGET_FRAME_TIME_MS = 33.33; // 30fps target\nconst SCALE_DOWN_THRESHOLD_MS = 66.67; // 15fps (half target) - only scale down if really struggling\nconst SCALE_UP_THRESHOLD_MS = 25; // If avg render time is well below target, consider scaling up\nconst ROLLING_WINDOW_SIZE = 30; // ~1 second of samples at 30fps\nconst MIN_SCALE_CHANGE_INTERVAL_MS = 2000; // Wait 2s between any scale changes\nconst SCALE_UP_STABILITY_SAMPLES = 60; // Need 60 samples (~2s) of good performance to scale up\n\n/** Size of the pressure history for histogram display */\nconst PRESSURE_HISTORY_SIZE = 60;\n\n/**\n * Tracks render time to recommend optimal preview resolution.\n */\nexport class AdaptiveResolutionTracker {\n  private renderTimes: number[] = []; // Rolling window of render times (ms)\n  private currentScaleIndex = 0; // Index into SCALE_STEPS (0 = highest quality)\n  private lastScaleChangeTime = 0;\n  private samplesAtCurrentScale = 0; // How many samples we've collected at current scale\n  \n  // Compute Pressure API\n  private pressureObserver: PressureObserver | null = null;\n  private pressureState: PressureState = \"nominal\";\n  private pressureHistory: PressureState[] = [];\n  \n  // For display - track frame intervals separately from render times\n  private lastFrameTime = 0;\n  private frameIntervals: number[] = [];\n  \n  // Callbacks\n  private onScaleChange?: (scale: ScaleStep) => void;\n  \n  constructor(options?: { onScaleChange?: (scale: ScaleStep) => void }) {\n    this.onScaleChange = options?.onScaleChange;\n    this.initPressureObserver();\n  }\n  \n  /**\n   * Initialize Compute Pressure API observer if available.\n   */\n  private initPressureObserver(): void {\n    if (!(\"PressureObserver\" in globalThis)) {\n      return;\n    }\n    \n    try {\n      this.pressureObserver = new PressureObserver((records) => {\n        if (records.length > 0) {\n          const latest = records[records.length - 1]!;\n          this.pressureState = latest.state;\n          \n          this.pressureHistory.push(latest.state);\n          if (this.pressureHistory.length > PRESSURE_HISTORY_SIZE) {\n            this.pressureHistory.shift();\n          }\n        }\n      });\n      \n      this.pressureObserver.observe(\"cpu\", { sampleInterval: 500 });\n    } catch (e) {\n      logger.warn(\"[AdaptiveResolutionTracker] Failed to initialize PressureObserver:\", e);\n      this.pressureObserver = null;\n    }\n  }\n  \n  /**\n   * Record a frame's render time.\n   * Call this AFTER each render completes with how long the render took.\n   * \n   * @param renderTimeMs - How long the render() call took in milliseconds\n   * @param timestamp - Optional rAF timestamp for frame interval tracking (display only)\n   */\n  recordFrame(renderTimeMs: number, timestamp?: number): void {\n    // Track render times for adaptive decisions\n    this.renderTimes.push(renderTimeMs);\n    if (this.renderTimes.length > ROLLING_WINDOW_SIZE) {\n      this.renderTimes.shift();\n    }\n    this.samplesAtCurrentScale++;\n    \n    // Track frame intervals for FPS display (separate from render time)\n    if (timestamp !== undefined && this.lastFrameTime > 0) {\n      const interval = timestamp - this.lastFrameTime;\n      this.frameIntervals.push(interval);\n      if (this.frameIntervals.length > ROLLING_WINDOW_SIZE) {\n        this.frameIntervals.shift();\n      }\n    }\n    if (timestamp !== undefined) {\n      this.lastFrameTime = timestamp;\n    }\n    \n    // Check if we should adjust scale\n    this.checkForScaleAdjustment();\n  }\n  \n  /**\n   * Check if we should scale up or down based on render time trends.\n   */\n  private checkForScaleAdjustment(): void {\n    if (this.renderTimes.length < 10) return; // Need some samples\n    \n    const now = performance.now();\n    if (now - this.lastScaleChangeTime < MIN_SCALE_CHANGE_INTERVAL_MS) {\n      return; // Rate limit changes\n    }\n    \n    const avgRenderTime = this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length;\n    \n    // Scale DOWN if we're consistently slow\n    if (avgRenderTime > SCALE_DOWN_THRESHOLD_MS) {\n      this.scaleDown(\"slow\");\n      return;\n    }\n    \n    // Scale DOWN if CPU pressure is high (proactive)\n    if (this.pressureState === \"critical\" || this.pressureState === \"serious\") {\n      this.scaleDown(\"pressure\");\n      return;\n    }\n    \n    // Scale UP if we have sustained headroom and CPU isn't under pressure\n    // (we already returned above if pressure is serious/critical, but check again for clarity)\n    const pressureOk = this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    if (avgRenderTime < SCALE_UP_THRESHOLD_MS && \n        this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n        pressureOk) {\n      this.scaleUp();\n    }\n  }\n  \n  /**\n   * Decrease resolution (increase scale index).\n   */\n  private scaleDown(reason: \"slow\" | \"pressure\"): void {\n    if (this.currentScaleIndex < SCALE_STEPS.length - 1) {\n      this.currentScaleIndex++;\n      this.lastScaleChangeTime = performance.now();\n      this.samplesAtCurrentScale = 0;\n      this.renderTimes = []; // Clear history at new scale\n      \n      const newScale = SCALE_STEPS[this.currentScaleIndex]!;\n      logger.debug(`[AdaptiveResolutionTracker] Scaling DOWN to ${(newScale * 100).toFixed(0)}% (reason: ${reason})`);\n      this.onScaleChange?.(newScale);\n    }\n  }\n  \n  /**\n   * Increase resolution (decrease scale index).\n   */\n  private scaleUp(): void {\n    if (this.currentScaleIndex > 0) {\n      this.currentScaleIndex--;\n      this.lastScaleChangeTime = performance.now();\n      this.samplesAtCurrentScale = 0;\n      this.renderTimes = []; // Clear history at new scale\n      \n      const newScale = SCALE_STEPS[this.currentScaleIndex]!;\n      logger.debug(`[AdaptiveResolutionTracker] Scaling UP to ${(newScale * 100).toFixed(0)}% (reason: stable performance)`);\n      this.onScaleChange?.(newScale);\n    }\n  }\n  \n  /**\n   * Get the current recommended scale factor.\n   */\n  getRecommendedScale(): ScaleStep {\n    return SCALE_STEPS[this.currentScaleIndex]!;\n  }\n  \n  /**\n   * Get current statistics for display.\n   */\n  getStats(): {\n    currentScale: ScaleStep;\n    avgRenderTime: number;\n    fps: number;\n    pressureState: PressureState;\n    pressureHistory: PressureState[];\n    samplesAtCurrentScale: number;\n    canScaleUp: boolean;\n    canScaleDown: boolean;\n    headroom: number; // How much faster than target we're rendering (negative = behind)\n  } {\n    const avgRenderTime = this.renderTimes.length > 0\n      ? this.renderTimes.reduce((a, b) => a + b, 0) / this.renderTimes.length\n      : 0;\n    \n    // FPS based on frame intervals (how often we're called), not render time\n    const avgFrameInterval = this.frameIntervals.length > 0\n      ? this.frameIntervals.reduce((a, b) => a + b, 0) / this.frameIntervals.length\n      : 16.67;\n    const fps = avgFrameInterval > 0 ? 1000 / avgFrameInterval : 0;\n    \n    const now = performance.now();\n    const timeSinceLastChange = now - this.lastScaleChangeTime;\n    const canChange = timeSinceLastChange >= MIN_SCALE_CHANGE_INTERVAL_MS;\n    \n    const pressureOk = this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    const canScaleUp = canChange && \n      this.currentScaleIndex > 0 && \n      avgRenderTime < SCALE_UP_THRESHOLD_MS &&\n      this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n      pressureOk;\n    \n    const canScaleDown = canChange && \n      this.currentScaleIndex < SCALE_STEPS.length - 1;\n    \n    // Headroom: positive = we're faster than needed, negative = we're behind\n    const headroom = TARGET_FRAME_TIME_MS - avgRenderTime;\n    \n    return {\n      currentScale: this.getRecommendedScale(),\n      avgRenderTime,\n      fps,\n      pressureState: this.pressureState,\n      pressureHistory: [...this.pressureHistory],\n      samplesAtCurrentScale: this.samplesAtCurrentScale,\n      canScaleUp,\n      canScaleDown,\n      headroom,\n    };\n  }\n  \n  /**\n   * Reset the tracker state.\n   */\n  reset(): void {\n    this.lastFrameTime = 0;\n    this.frameIntervals = [];\n    this.renderTimes = [];\n    this.currentScaleIndex = 0;\n    this.lastScaleChangeTime = 0;\n    this.samplesAtCurrentScale = 0;\n  }\n  \n  /**\n   * Initialize the tracker to start at a specific scale.\n   */\n  initializeAtScale(targetScale: number): void {\n    let bestIndex = 0;\n    for (let i = 0; i < SCALE_STEPS.length; i++) {\n      if (SCALE_STEPS[i]! <= targetScale) {\n        bestIndex = i;\n        break;\n      }\n    }\n    \n    this.currentScaleIndex = bestIndex;\n    this.lastFrameTime = 0;\n    this.frameIntervals = [];\n    this.renderTimes = [];\n    this.lastScaleChangeTime = 0;\n    this.samplesAtCurrentScale = 0;\n    \n    logger.debug(`[AdaptiveResolutionTracker] Initialized at scale ${(SCALE_STEPS[bestIndex]! * 100).toFixed(0)}%`);\n  }\n  \n  /**\n   * Clean up resources.\n   */\n  dispose(): void {\n    if (this.pressureObserver) {\n      try {\n        this.pressureObserver.disconnect();\n      } catch {\n        // Ignore cleanup errors\n      }\n      this.pressureObserver = null;\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/preview/FrameController.d.ts

@@ -0,0 +1,123 @@
+import { LitElement } from "lit";
+
+//#region src/preview/FrameController.d.ts
+
+/**
+ * State returned by elements describing their readiness for a given time.
+ */
+interface FrameState {
+  /**
+   * Whether async preparation is needed before rendering.
+   * Examples: video needs to seek, captions need to load data.
+   */
+  needsPreparation: boolean;
+  /**
+   * Whether the element is ready to render synchronously.
+   * True when all async work is complete and renderFrame() can be called.
+   */
+  isReady: boolean;
+  /**
+   * Rendering priority hint. Lower numbers render first.
+   * Used to order render calls for elements with dependencies.
+   *
+   * Standard priorities:
+   * - PRIORITY_VIDEO (1): Video elements
+   * - PRIORITY_CAPTIONS (2): Caption overlays
+   * - PRIORITY_AUDIO (3): Audio elements
+   * - PRIORITY_WAVEFORM (4): Audio visualizers (depend on audio)
+   * - PRIORITY_IMAGE (5): Static images
+   * - PRIORITY_DEFAULT (100): Fallback for custom elements
+   */
+  priority: number;
+}
+/**
+ * Interface that elements implement to participate in centralized frame rendering.
+ * Elements keep their rendering logic local but expose a standardized interface.
+ */
+interface FrameRenderable {
+  /**
+   * Query the element's readiness state for a given time.
+   * Must be synchronous and cheap to call.
+   */
+  getFrameState(timeMs: number): FrameState;
+  /**
+   * Async preparation phase. Called when getFrameState().needsPreparation is true.
+   * Performs any async work needed before rendering (seeking, loading, etc.).
+   *
+   * @param timeMs - The time to prepare for
+   * @param signal - Abort signal for cancellation
+   */
+  prepareFrame(timeMs: number, signal: AbortSignal): Promise<void>;
+  /**
+   * Synchronous render phase. Called after all preparation is complete.
+   * Performs the actual rendering (paint to canvas, update DOM, etc.).
+   *
+   * @param timeMs - The time to render
+   */
+  renderFrame(timeMs: number): void;
+}
+/**
+ * Options for FrameController.renderFrame()
+ */
+interface RenderFrameOptions {
+  /**
+   * Whether to wait for Lit updateComplete before querying elements.
+   * Default: true
+   */
+  waitForLitUpdate?: boolean;
+  /**
+   * Callback to update CSS animations after frame rendering completes.
+   * Called with the root element after all elements have rendered.
+   * This centralizes animation synchronization in one place.
+   */
+  onAnimationsUpdate?: (rootElement: Element) => void;
+}
+/**
+ * Central controller for frame rendering.
+ * Lives at the root timegroup and orchestrates all element rendering.
+ */
+declare class FrameController {
+  #private;
+  constructor(rootElement: LitElement & {
+    currentTimeMs: number;
+  });
+  /**
+   * Cancel any in-progress render operation.
+   */
+  abort(): void;
+  /**
+   * Render a frame at the specified time.
+   *
+   * This is the main entry point for frame rendering. It:
+   * 1. Cancels any previous in-progress render
+   * 2. Queries all visible FrameRenderable elements
+   * 3. Runs preparation in parallel for elements that need it
+   * 4. Runs render in priority order
+   *
+   * @param timeMs - The time in milliseconds to render
+   * @param options - Optional configuration
+   */
+  renderFrame(timeMs: number, options?: RenderFrameOptions): Promise<void>;
+  /**
+   * Check if a render is currently in progress.
+   */
+  get isRendering(): boolean;
+}
+/**
+ * Interface for the legacy frameTask object.
+ * Used for backwards compatibility with code expecting the old Task-like API.
+ */
+interface FrameTask {
+  /**
+   * Run the frame task (prepare + render).
+   * @returns Promise that resolves when the task completes
+   */
+  run(): Promise<void>;
+  /**
+   * Promise that resolves when the current task completes.
+   */
+  taskComplete: Promise<void>;
+}
+//#endregion
+export { FrameController, FrameRenderable, FrameState, FrameTask, RenderFrameOptions };
+//# sourceMappingURL=FrameController.d.ts.map