@editframe/elements 0.37.2-beta → 0.38.0

package/dist/gui/tree/EFTreeItem.js

@@ -25,15 +25,15 @@ let EFTreeItem = class EFTreeItem$1 extends LitElement {
       font-size: var(--tree-item-font-size, 0.75rem);
       cursor: pointer;
       user-select: none;
-      color: var(--tree-text, rgb(226 232 240));
+      color: var(--tree-text);
     }
 
     .item-row:hover {
-      background: var(--tree-hover-bg, rgba(148, 163, 184, 0.2));
+      background: var(--tree-hover-bg);
     }
 
     .item-row[data-selected] {
-      background: var(--tree-selected-bg, rgba(59, 130, 246, 0.3));
+      background: var(--tree-selected-bg);
     }
 
     .expand-icon {

package/dist/gui/tree/EFTreeItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFTreeItem.js","names":["EFTreeItem"],"sources":["../../../src/gui/tree/EFTreeItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport type { TreeItem, TreeContext } from \"./treeContext.js\";\nimport { treeContext } from \"./treeContext.js\";\n\n/**\n * Generic tree item component.\n * \n * Renders a single item in a tree with:\n * - Expand/collapse toggle for items with children\n * - Optional icon\n * - Label\n * - Recursive children rendering\n * \n * @fires tree-item-click - When item is clicked (for selection)\n */\n@customElement(\"ef-tree-item\")\nexport class EFTreeItem extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    .item-row {\n      display: flex;\n      align-items: center;\n      height: var(--tree-item-height, 1.5rem);\n      padding-left: var(--tree-item-padding-left, 0.5rem);\n      padding-right: var(--tree-item-padding-right, 0.5rem);\n      font-size: var(--tree-item-font-size, 0.75rem);\n      cursor: pointer;\n      user-select: none;\n      color: var(--tree-text, rgb(226 232 240));\n    }\n\n    .item-row:hover {\n      background: var(--tree-hover-bg, rgba(148, 163, 184, 0.2));\n    }\n\n    .item-row[data-selected] {\n      background: var(--tree-selected-bg, rgba(59, 130, 246, 0.3));\n    }\n\n    .expand-icon {\n      width: var(--tree-expand-icon-size, 1rem);\n      height: var(--tree-expand-icon-size, 1rem);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .expand-icon svg {\n      width: 0.75rem;\n      height: 0.75rem;\n      transition: transform 0.15s ease;\n    }\n\n    .expand-icon[data-expanded] svg {\n      transform: rotate(90deg);\n    }\n\n    .icon {\n      margin-right: var(--tree-icon-gap, 0.25rem);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n    }\n\n    .label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      flex: 1;\n    }\n\n    .children {\n      padding-left: var(--tree-indent, 1rem);\n    }\n\n    .children[data-collapsed] {\n      display: none;\n    }\n  `;\n\n  @consume({ context: treeContext, subscribe: true })\n  treeContext?: TreeContext;\n\n  @property({ type: Object, attribute: false })\n  item!: TreeItem;\n\n  @state()\n  private localExpanded = true;\n\n  get isSelected(): boolean {\n    if (!this.treeContext || !this.item) return false;\n    return this.treeContext.state.selectedId === this.item.id;\n  }\n\n  get isExpanded(): boolean {\n    if (!this.treeContext || !this.item) return this.localExpanded;\n    return this.treeContext.state.expandedIds.has(this.item.id);\n  }\n\n  get hasChildren(): boolean {\n    return Boolean(this.item?.children && this.item.children.length > 0);\n  }\n\n  private handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.treeContext && this.item) {\n      this.treeContext.actions.select(this.item.id);\n    }\n  }\n\n  private handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.treeContext && this.item) {\n      this.treeContext.actions.toggleExpanded(this.item.id);\n    } else {\n      this.localExpanded = !this.localExpanded;\n    }\n  }\n\n  render() {\n    if (!this.item) return nothing;\n\n    const expanded = this.isExpanded;\n\n    return html`\n      <div\n        class=\"item-row\"\n        ?data-selected=${this.isSelected}\n        @click=${this.handleClick}\n      >\n        ${this.hasChildren\n          ? html`\n              <span\n                class=\"expand-icon\"\n                ?data-expanded=${expanded}\n                @click=${this.handleExpandClick}\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M8 5v14l11-7z\" />\n                </svg>\n              </span>\n            `\n          : html`<span class=\"expand-icon\"></span>`}\n        ${this.item.icon\n          ? html`<span class=\"icon\">${this.item.icon}</span>`\n          : nothing}\n        <span class=\"label\">${this.item.label}</span>\n      </div>\n      ${this.hasChildren\n        ? html`\n            <div class=\"children\" ?data-collapsed=${!expanded}>\n              ${this.item.children!.map(\n                (child) => html`<ef-tree-item .item=${child}></ef-tree-item>`\n              )}\n            </div>\n          `\n        : nothing}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-tree-item\": EFTreeItem;\n  }\n}\n"],"mappings":";;;;;;;AAmBO,uBAAMA,qBAAmB,WAAW;;;uBA4EjB;;;gBA3ER,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EnB,IAAI,aAAsB;AACxB,MAAI,CAAC,KAAK,eAAe,CAAC,KAAK,KAAM,QAAO;AAC5C,SAAO,KAAK,YAAY,MAAM,eAAe,KAAK,KAAK;;CAGzD,IAAI,aAAsB;AACxB,MAAI,CAAC,KAAK,eAAe,CAAC,KAAK,KAAM,QAAO,KAAK;AACjD,SAAO,KAAK,YAAY,MAAM,YAAY,IAAI,KAAK,KAAK,GAAG;;CAG7D,IAAI,cAAuB;AACzB,SAAO,QAAQ,KAAK,MAAM,YAAY,KAAK,KAAK,SAAS,SAAS,EAAE;;CAGtE,AAAQ,YAAY,GAAgB;AAClC,IAAE,iBAAiB;AACnB,MAAI,KAAK,eAAe,KAAK,KAC3B,MAAK,YAAY,QAAQ,OAAO,KAAK,KAAK,GAAG;;CAIjD,AAAQ,kBAAkB,GAAgB;AACxC,IAAE,iBAAiB;AACnB,MAAI,KAAK,eAAe,KAAK,KAC3B,MAAK,YAAY,QAAQ,eAAe,KAAK,KAAK,GAAG;MAErD,MAAK,gBAAgB,CAAC,KAAK;;CAI/B,SAAS;AACP,MAAI,CAAC,KAAK,KAAM,QAAO;EAEvB,MAAM,WAAW,KAAK;AAEtB,SAAO,IAAI;;;yBAGU,KAAK,WAAW;iBACxB,KAAK,YAAY;;UAExB,KAAK,cACH,IAAI;;;iCAGiB,SAAS;yBACjB,KAAK,kBAAkB;;;;;;gBAOpC,IAAI,oCAAoC;UAC1C,KAAK,KAAK,OACR,IAAI,sBAAsB,KAAK,KAAK,KAAK,WACzC,QAAQ;8BACU,KAAK,KAAK,MAAM;;QAEtC,KAAK,cACH,IAAI;oDACsC,CAAC,SAAS;gBAC9C,KAAK,KAAK,SAAU,KACnB,UAAU,IAAI,uBAAuB,MAAM,kBAC7C,CAAC;;cAGN,QAAQ;;;;YA5Ef,QAAQ;CAAE,SAAS;CAAa,WAAW;CAAM,CAAC;YAGlD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,OAAO;yBA5ET,cAAc,eAAe"}
+{"version":3,"file":"EFTreeItem.js","names":["EFTreeItem"],"sources":["../../../src/gui/tree/EFTreeItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement, nothing } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport type { TreeItem, TreeContext } from \"./treeContext.js\";\nimport { treeContext } from \"./treeContext.js\";\n\n/**\n * Generic tree item component.\n *\n * Renders a single item in a tree with:\n * - Expand/collapse toggle for items with children\n * - Optional icon\n * - Label\n * - Recursive children rendering\n *\n * @fires tree-item-click - When item is clicked (for selection)\n */\n@customElement(\"ef-tree-item\")\nexport class EFTreeItem extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n    }\n\n    .item-row {\n      display: flex;\n      align-items: center;\n      height: var(--tree-item-height, 1.5rem);\n      padding-left: var(--tree-item-padding-left, 0.5rem);\n      padding-right: var(--tree-item-padding-right, 0.5rem);\n      font-size: var(--tree-item-font-size, 0.75rem);\n      cursor: pointer;\n      user-select: none;\n      color: var(--tree-text);\n    }\n\n    .item-row:hover {\n      background: var(--tree-hover-bg);\n    }\n\n    .item-row[data-selected] {\n      background: var(--tree-selected-bg);\n    }\n\n    .expand-icon {\n      width: var(--tree-expand-icon-size, 1rem);\n      height: var(--tree-expand-icon-size, 1rem);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      cursor: pointer;\n      flex-shrink: 0;\n    }\n\n    .expand-icon svg {\n      width: 0.75rem;\n      height: 0.75rem;\n      transition: transform 0.15s ease;\n    }\n\n    .expand-icon[data-expanded] svg {\n      transform: rotate(90deg);\n    }\n\n    .icon {\n      margin-right: var(--tree-icon-gap, 0.25rem);\n      flex-shrink: 0;\n      display: flex;\n      align-items: center;\n    }\n\n    .label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      flex: 1;\n    }\n\n    .children {\n      padding-left: var(--tree-indent, 1rem);\n    }\n\n    .children[data-collapsed] {\n      display: none;\n    }\n  `;\n\n  @consume({ context: treeContext, subscribe: true })\n  treeContext?: TreeContext;\n\n  @property({ type: Object, attribute: false })\n  item!: TreeItem;\n\n  @state()\n  private localExpanded = true;\n\n  get isSelected(): boolean {\n    if (!this.treeContext || !this.item) return false;\n    return this.treeContext.state.selectedId === this.item.id;\n  }\n\n  get isExpanded(): boolean {\n    if (!this.treeContext || !this.item) return this.localExpanded;\n    return this.treeContext.state.expandedIds.has(this.item.id);\n  }\n\n  get hasChildren(): boolean {\n    return Boolean(this.item?.children && this.item.children.length > 0);\n  }\n\n  private handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.treeContext && this.item) {\n      this.treeContext.actions.select(this.item.id);\n    }\n  }\n\n  private handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.treeContext && this.item) {\n      this.treeContext.actions.toggleExpanded(this.item.id);\n    } else {\n      this.localExpanded = !this.localExpanded;\n    }\n  }\n\n  render() {\n    if (!this.item) return nothing;\n\n    const expanded = this.isExpanded;\n\n    return html`\n      <div\n        class=\"item-row\"\n        ?data-selected=${this.isSelected}\n        @click=${this.handleClick}\n      >\n        ${\n          this.hasChildren\n            ? html`\n              <span\n                class=\"expand-icon\"\n                ?data-expanded=${expanded}\n                @click=${this.handleExpandClick}\n              >\n                <svg viewBox=\"0 0 24 24\" fill=\"currentColor\">\n                  <path d=\"M8 5v14l11-7z\" />\n                </svg>\n              </span>\n            `\n            : html`<span class=\"expand-icon\"></span>`\n        }\n        ${\n          this.item.icon\n            ? html`<span class=\"icon\">${this.item.icon}</span>`\n            : nothing\n        }\n        <span class=\"label\">${this.item.label}</span>\n      </div>\n      ${\n        this.hasChildren\n          ? html`\n            <div class=\"children\" ?data-collapsed=${!expanded}>\n              ${this.item.children!.map(\n                (child) => html`<ef-tree-item .item=${child}></ef-tree-item>`,\n              )}\n            </div>\n          `\n          : nothing\n      }\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-tree-item\": EFTreeItem;\n  }\n}\n"],"mappings":";;;;;;;AAmBO,uBAAMA,qBAAmB,WAAW;;;uBA4EjB;;;gBA3ER,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6EnB,IAAI,aAAsB;AACxB,MAAI,CAAC,KAAK,eAAe,CAAC,KAAK,KAAM,QAAO;AAC5C,SAAO,KAAK,YAAY,MAAM,eAAe,KAAK,KAAK;;CAGzD,IAAI,aAAsB;AACxB,MAAI,CAAC,KAAK,eAAe,CAAC,KAAK,KAAM,QAAO,KAAK;AACjD,SAAO,KAAK,YAAY,MAAM,YAAY,IAAI,KAAK,KAAK,GAAG;;CAG7D,IAAI,cAAuB;AACzB,SAAO,QAAQ,KAAK,MAAM,YAAY,KAAK,KAAK,SAAS,SAAS,EAAE;;CAGtE,AAAQ,YAAY,GAAgB;AAClC,IAAE,iBAAiB;AACnB,MAAI,KAAK,eAAe,KAAK,KAC3B,MAAK,YAAY,QAAQ,OAAO,KAAK,KAAK,GAAG;;CAIjD,AAAQ,kBAAkB,GAAgB;AACxC,IAAE,iBAAiB;AACnB,MAAI,KAAK,eAAe,KAAK,KAC3B,MAAK,YAAY,QAAQ,eAAe,KAAK,KAAK,GAAG;MAErD,MAAK,gBAAgB,CAAC,KAAK;;CAI/B,SAAS;AACP,MAAI,CAAC,KAAK,KAAM,QAAO;EAEvB,MAAM,WAAW,KAAK;AAEtB,SAAO,IAAI;;;yBAGU,KAAK,WAAW;iBACxB,KAAK,YAAY;;UAGxB,KAAK,cACD,IAAI;;;iCAGe,SAAS;yBACjB,KAAK,kBAAkB;;;;;;gBAOlC,IAAI,oCACT;UAEC,KAAK,KAAK,OACN,IAAI,sBAAsB,KAAK,KAAK,KAAK,WACzC,QACL;8BACqB,KAAK,KAAK,MAAM;;QAGtC,KAAK,cACD,IAAI;oDACoC,CAAC,SAAS;gBAC9C,KAAK,KAAK,SAAU,KACnB,UAAU,IAAI,uBAAuB,MAAM,kBAC7C,CAAC;;cAGJ,QACL;;;;YAlFJ,QAAQ;CAAE,SAAS;CAAa,WAAW;CAAM,CAAC;YAGlD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAO,CAAC;YAG5C,OAAO;yBA5ET,cAAc,eAAe"}

package/dist/gui/tree/treeContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"treeContext.js","names":[],"sources":["../../../src/gui/tree/treeContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport type { TemplateResult } from \"lit\";\n\n/**\n * Generic tree item data structure.\n * Used by ef-tree for data-driven tree rendering.\n */\nexport interface TreeItem {\n  /** Unique identifier for this item */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Optional icon (Lit TemplateResult or string) */\n  icon?: TemplateResult | string;\n  /** Child items (folders have children, leaves don't) */\n  children?: TreeItem[];\n  /** Arbitrary payload data */\n  data?: unknown;\n}\n\n/**\n * Tree component state\n */\nexport interface TreeState {\n  /** Currently selected item ID */\n  selectedId: string | null;\n  /** Set of expanded item IDs */\n  expandedIds: Set<string>;\n}\n\n/**\n * Tree component actions\n */\nexport interface TreeActions {\n  /** Select an item by ID */\n  select: (id: string | null) => void;\n  /** Toggle an item's expanded state */\n  toggleExpanded: (id: string) => void;\n  /** Set an item's expanded state explicitly */\n  setExpanded: (id: string, expanded: boolean) => void;\n}\n\n/**\n * Tree context provided to tree items\n */\nexport interface TreeContext {\n  state: TreeState;\n  actions: TreeActions;\n}\n\n/**\n * Lit context for tree components\n */\nexport const treeContext = createContext<TreeContext>(\"ef-tree-context\");\n\n/**\n * Helper to collect all item IDs from a tree (for default expanded state)\n */\nexport function collectAllIds(items: TreeItem[]): Set<string> {\n  const ids = new Set<string>();\n  \n  function traverse(item: TreeItem) {\n    ids.add(item.id);\n    if (item.children) {\n      for (const child of item.children) {\n        traverse(child);\n      }\n    }\n  }\n  \n  for (const item of items) {\n    traverse(item);\n  }\n  \n  return ids;\n}\n"],"mappings":";;;;;;AAqDA,MAAa,cAAc,cAA2B,kBAAkB;;;;AAKxE,SAAgB,cAAc,OAAgC;CAC5D,MAAM,sBAAM,IAAI,KAAa;CAE7B,SAAS,SAAS,MAAgB;AAChC,MAAI,IAAI,KAAK,GAAG;AAChB,MAAI,KAAK,SACP,MAAK,MAAM,SAAS,KAAK,SACvB,UAAS,MAAM;;AAKrB,MAAK,MAAM,QAAQ,MACjB,UAAS,KAAK;AAGhB,QAAO"}
+{"version":3,"file":"treeContext.js","names":[],"sources":["../../../src/gui/tree/treeContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport type { TemplateResult } from \"lit\";\n\n/**\n * Generic tree item data structure.\n * Used by ef-tree for data-driven tree rendering.\n */\nexport interface TreeItem {\n  /** Unique identifier for this item */\n  id: string;\n  /** Display label */\n  label: string;\n  /** Optional icon (Lit TemplateResult or string) */\n  icon?: TemplateResult | string;\n  /** Child items (folders have children, leaves don't) */\n  children?: TreeItem[];\n  /** Arbitrary payload data */\n  data?: unknown;\n}\n\n/**\n * Tree component state\n */\nexport interface TreeState {\n  /** Currently selected item ID */\n  selectedId: string | null;\n  /** Set of expanded item IDs */\n  expandedIds: Set<string>;\n}\n\n/**\n * Tree component actions\n */\nexport interface TreeActions {\n  /** Select an item by ID */\n  select: (id: string | null) => void;\n  /** Toggle an item's expanded state */\n  toggleExpanded: (id: string) => void;\n  /** Set an item's expanded state explicitly */\n  setExpanded: (id: string, expanded: boolean) => void;\n}\n\n/**\n * Tree context provided to tree items\n */\nexport interface TreeContext {\n  state: TreeState;\n  actions: TreeActions;\n}\n\n/**\n * Lit context for tree components\n */\nexport const treeContext = createContext<TreeContext>(\"ef-tree-context\");\n\n/**\n * Helper to collect all item IDs from a tree (for default expanded state)\n */\nexport function collectAllIds(items: TreeItem[]): Set<string> {\n  const ids = new Set<string>();\n\n  function traverse(item: TreeItem) {\n    ids.add(item.id);\n    if (item.children) {\n      for (const child of item.children) {\n        traverse(child);\n      }\n    }\n  }\n\n  for (const item of items) {\n    traverse(item);\n  }\n\n  return ids;\n}\n"],"mappings":";;;;;;AAqDA,MAAa,cAAc,cAA2B,kBAAkB;;;;AAKxE,SAAgB,cAAc,OAAgC;CAC5D,MAAM,sBAAM,IAAI,KAAa;CAE7B,SAAS,SAAS,MAAgB;AAChC,MAAI,IAAI,KAAK,GAAG;AAChB,MAAI,KAAK,SACP,MAAK,MAAM,SAAS,KAAK,SACvB,UAAS,MAAM;;AAKrB,MAAK,MAAM,QAAQ,MACjB,UAAS,KAAK;AAGhB,QAAO"}

package/dist/index.d.ts

@@ -4,8 +4,7 @@ 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 { RenderProgress, RenderToVideoOptions } from "./preview/renderTimegroupToVideo.types.js";
 import { CanvasElementBounds, CanvasElementData, SelectionState } from "./canvas/api/types.js";
 import { EFPanZoom, PanZoomTransform } from "./elements/EFPanZoom.js";
 import { EFOverlayItem, OverlayItemPosition } from "./gui/EFOverlayItem.js";
@@ -13,17 +12,18 @@ import { EFOverlayLayer } from "./gui/EFOverlayLayer.js";
 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 { EFThumbnailStrip } from "./elements/EFThumbnailStrip.js";
+import { EFTrimHandles, TrimChangeDetail, TrimValue } from "./gui/timeline/TrimHandles.js";
+import { EFThumbnailStrip } from "./gui/timeline/tracks/EFThumbnailStrip.js";
 import { EFAudio } from "./elements/EFAudio.js";
+import { EFVideo } from "./elements/EFVideo.js";
 import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "./elements/EFCaptions.js";
 import { EFTimelineRuler, calculateFrameIntervalMs, calculatePixelsPerFrame, quantizeToFrameTimeMs, shouldShowFrameMarkers } from "./gui/EFTimelineRuler.js";
 import { EFTimeline } from "./gui/timeline/EFTimeline.js";
 import { EFFilmstrip } from "./gui/EFFilmstrip.js";
-import { EFFitScale } from "./gui/EFFitScale.js";
+import { EFFitScale, ScaleInput, ScaleOutput, computeFitScale } from "./gui/EFFitScale.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFTimegroup } from "./elements/EFTimegroup.js";
-import "./sandbox/index.js";
+import { CloneFactory, CloneFactoryResult, getCloneFactory, registerCloneFactory, unregisterCloneFactory } from "./elements/cloneFactoryRegistry.js";
 import { elementNeedsFitScale, needsFitScale } from "./gui/FitScaleHelpers.js";
 import { EFImage } from "./elements/EFImage.js";
 import { EFTextSegment } from "./elements/EFTextSegment.js";
@@ -52,7 +52,9 @@ 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 { RenderInfo, RenderInfoSchema, getRenderInfo } from "./getRenderInfo.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 };
+import { CanvasPreviewOptions, CanvasPreviewResult, CaptureOptions, ContentReadyMode } from "./preview/renderTimegroupToCanvas.types.js";
+import { RenderElementOptions, renderElementToCanvas } from "./preview/renderElementToCanvas.js";
+export { type BoxBounds, CanvasAPI, type CanvasElementBounds, type CanvasElementData, type CanvasPreviewOptions, type CanvasPreviewResult, type CaptureOptions, type CloneFactory, type CloneFactoryResult, type ContainerInfo, type ContentReadyMode, 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, type RenderElementOptions, type RenderInfo, RenderInfoSchema, type RenderProgress, type RenderToVideoOptions, type ScaleInput, type ScaleOutput, SelectionModel, type SelectionState, type TemporalMixinInterface, type TraceContext, type TransformBounds, type TreeActions, type TreeContext, type TreeItem, type TreeState, type TrimChangeDetail, type TrimValue, calculateFrameIntervalMs, calculatePixelsPerFrame, collectAllIds, computeFitScale, elementNeedsFitScale, getCloneFactory, getContainerInfoFromElement, getCornerPoint, getOppositeCorner, getPositionInfoFromElement, getRenderData, getRenderInfo, hierarchyContext, isEFTemporal, needsFitScale, quantizeToFrameTimeMs, registerCloneFactory, renderElementToCanvas, rotatePoint, shouldShowFrameMarkers, treeContext, unregisterCloneFactory };

package/dist/index.js

@@ -1,3 +1,4 @@
+import { getCloneFactory, registerCloneFactory, unregisterCloneFactory } from "./elements/cloneFactoryRegistry.js";
 import { isEFTemporal } from "./elements/EFTemporal.js";
 import { EFConfiguration } from "./gui/EFConfiguration.js";
 import "./elements/EFMedia.js";
@@ -19,15 +20,14 @@ import { EFWaveform } from "./elements/EFWaveform.js";
 import { EFAudioHierarchyItem, EFCaptionsActiveWordHierarchyItem, EFCaptionsHierarchyItem, EFHTMLHierarchyItem, EFHierarchyItem, EFImageHierarchyItem, EFTextHierarchyItem, EFTextSegmentHierarchyItem, EFTimegroupHierarchyItem, EFVideoHierarchyItem, EFWaveformHierarchyItem } from "./gui/hierarchy/EFHierarchyItem.js";
 import { EFHierarchy } from "./gui/hierarchy/EFHierarchy.js";
 import { EFTrimHandles } from "./gui/timeline/TrimHandles.js";
-import { EFThumbnailStrip } from "./elements/EFThumbnailStrip.js";
+import { EFThumbnailStrip } from "./gui/timeline/tracks/EFThumbnailStrip.js";
 import { EFTimelineRuler, calculateFrameIntervalMs, calculatePixelsPerFrame, quantizeToFrameTimeMs, shouldShowFrameMarkers } from "./gui/EFTimelineRuler.js";
 import { EFTimeline } from "./gui/timeline/EFTimeline.js";
 import { EFFilmstrip } from "./gui/EFFilmstrip.js";
-import { EFFitScale } from "./gui/EFFitScale.js";
+import { EFFitScale, computeFitScale } from "./gui/EFFitScale.js";
 import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFPanZoom } from "./elements/EFPanZoom.js";
 import { EFTimegroup } from "./elements/EFTimegroup.js";
-import "./sandbox/index.js";
 import { elementNeedsFitScale, needsFitScale } from "./gui/FitScaleHelpers.js";
 import { EFPreview } from "./gui/EFPreview.js";
 import { collectAllIds, treeContext } from "./gui/tree/treeContext.js";
@@ -49,13 +49,14 @@ import { CanvasAPI } from "./canvas/api/CanvasAPI.js";
 import { EFCanvasItem } from "./canvas/EFCanvasItem.js";
 import { EFOverlayItem } from "./gui/EFOverlayItem.js";
 import "./EF_FRAMEGEN.js";
-import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
+import { RenderInfoSchema, getRenderInfo } from "./getRenderInfo.js";
 import "./render/EFRenderAPI.js";
 import { getRenderData } from "./render/getRenderData.js";
+import { renderElementToCanvas } from "./preview/renderElementToCanvas.js";
 
 //#region src/index.ts
 if (typeof window !== "undefined") window.EF_REGISTERED = true;
 
 //#endregion
-export { CanvasAPI, EFActiveRootTemporal, EFAudio, EFAudioHierarchyItem, EFCanvas, EFCanvasItem, EFCaptions, EFCaptionsActiveWord, EFCaptionsActiveWordHierarchyItem, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsHierarchyItem, EFCaptionsSegment, EFConfiguration, EFControls, EFDial, EFFilmstrip, EFFitScale, EFFocusOverlay, EFHTMLHierarchyItem, EFHierarchy, EFHierarchyItem, EFImage, EFImageHierarchyItem, 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, PositionInfoMixin, RenderInfo, SelectionModel, calculateFrameIntervalMs, calculatePixelsPerFrame, collectAllIds, elementNeedsFitScale, getContainerInfoFromElement, getCornerPoint, getOppositeCorner, getPositionInfoFromElement, getRenderData, getRenderInfo, hierarchyContext, isEFTemporal, needsFitScale, quantizeToFrameTimeMs, rotatePoint, shouldShowFrameMarkers, treeContext };
+export { CanvasAPI, EFActiveRootTemporal, EFAudio, EFAudioHierarchyItem, EFCanvas, EFCanvasItem, EFCaptions, EFCaptionsActiveWord, EFCaptionsActiveWordHierarchyItem, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsHierarchyItem, EFCaptionsSegment, EFConfiguration, EFControls, EFDial, EFFilmstrip, EFFitScale, EFFocusOverlay, EFHTMLHierarchyItem, EFHierarchy, EFHierarchyItem, EFImage, EFImageHierarchyItem, 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, PositionInfoMixin, RenderInfoSchema, SelectionModel, calculateFrameIntervalMs, calculatePixelsPerFrame, collectAllIds, computeFitScale, elementNeedsFitScale, getCloneFactory, getContainerInfoFromElement, getCornerPoint, getOppositeCorner, getPositionInfoFromElement, getRenderData, getRenderInfo, hierarchyContext, isEFTemporal, needsFitScale, quantizeToFrameTimeMs, registerCloneFactory, renderElementToCanvas, rotatePoint, shouldShowFrameMarkers, treeContext, unregisterCloneFactory };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./elements/EFTimegroup.js\";\nimport \"./sandbox/index.js\";\n\nexport { EFTimegroup } from \"./elements/EFTimegroup.js\";\nexport type { ContainerInfo } from \"./elements/ContainerInfo.js\";\nexport { getContainerInfoFromElement } from \"./elements/ContainerInfo.js\";\nexport type { ElementPositionInfo } from \"./elements/ElementPositionInfo.js\";\nexport {\n  getPositionInfoFromElement,\n  PositionInfoMixin,\n} from \"./elements/ElementPositionInfo.js\";\nexport { needsFitScale, elementNeedsFitScale } from \"./gui/FitScaleHelpers.js\";\n\nimport \"./elements/EFImage.js\";\n\nexport { EFImage } from \"./elements/EFImage.js\";\n\nimport \"./elements/EFMedia.js\";\n\nexport type { EFMedia } from \"./elements/EFMedia.js\";\n\nimport \"./elements/EFAudio.js\";\n\nexport { EFAudio } from \"./elements/EFAudio.js\";\n\nimport \"./elements/EFVideo.js\";\n\nexport { EFVideo } from \"./elements/EFVideo.js\";\n\nimport \"./elements/EFCaptions.js\";\n\nexport {\n  EFCaptions,\n  EFCaptionsActiveWord,\n  EFCaptionsAfterActiveWord,\n  EFCaptionsBeforeActiveWord,\n  EFCaptionsSegment,\n} from \"./elements/EFCaptions.js\";\n\nimport \"./elements/EFText.js\";\nimport \"./elements/EFTextSegment.js\";\n\nexport { EFText } from \"./elements/EFText.js\";\nexport { EFTextSegment } from \"./elements/EFTextSegment.js\";\n\nimport \"./elements/EFWaveform.js\";\n\nexport { EFWaveform } from \"./elements/EFWaveform.js\";\n\nimport \"./elements/EFTemporal.js\";\n\nexport { isEFTemporal } from \"./elements/EFTemporal.js\";\nexport type { TemporalMixinInterface } from \"./elements/EFTemporal.js\";\n\nimport \"./gui/EFConfiguration.ts\";\n\nexport { EFConfiguration } from \"./gui/EFConfiguration.ts\";\n\nimport \"./gui/EFWorkbench.js\";\n\nexport { EFWorkbench } from \"./gui/EFWorkbench.js\";\n\nimport \"./gui/EFPreview.js\";\n\nexport { EFPreview } from \"./gui/EFPreview.js\";\n\nimport \"./gui/EFFilmstrip.js\";\n\nexport { EFFilmstrip } from \"./gui/EFFilmstrip.js\";\n\nimport \"./gui/hierarchy/EFHierarchy.js\";\nimport \"./gui/hierarchy/EFHierarchyItem.js\";\n\nexport { EFHierarchy } from \"./gui/hierarchy/EFHierarchy.js\";\nexport {\n  EFHierarchyItem,\n  EFTimegroupHierarchyItem,\n  EFAudioHierarchyItem,\n  EFVideoHierarchyItem,\n  EFCaptionsHierarchyItem,\n  EFCaptionsActiveWordHierarchyItem,\n  EFTextHierarchyItem,\n  EFTextSegmentHierarchyItem,\n  EFWaveformHierarchyItem,\n  EFImageHierarchyItem,\n  EFHTMLHierarchyItem,\n} from \"./gui/hierarchy/EFHierarchyItem.js\";\nexport type {\n  HierarchyState,\n  HierarchyActions,\n  HierarchyContext,\n} from \"./gui/hierarchy/hierarchyContext.js\";\nexport { hierarchyContext } from \"./gui/hierarchy/hierarchyContext.js\";\n\n// Generic tree component\nimport \"./gui/tree/EFTree.js\";\nimport \"./gui/tree/EFTreeItem.js\";\n\nexport { EFTree } from \"./gui/tree/EFTree.js\";\nexport { EFTreeItem } from \"./gui/tree/EFTreeItem.js\";\nexport type {\n  TreeItem,\n  TreeState,\n  TreeActions,\n  TreeContext,\n} from \"./gui/tree/treeContext.js\";\nexport { treeContext, collectAllIds } from \"./gui/tree/treeContext.js\";\n\nimport \"./gui/EFTogglePlay.js\";\n\nexport { EFTogglePlay } from \"./gui/EFTogglePlay.js\";\n\nimport \"./gui/EFPlay.js\";\n\nexport { EFPlay } from \"./gui/EFPlay.js\";\n\nimport \"./gui/EFPause.js\";\n\nexport { EFPause } from \"./gui/EFPause.js\";\n\nimport \"./gui/EFToggleLoop.js\";\n\nexport { EFToggleLoop } from \"./gui/EFToggleLoop.js\";\n\nimport \"./gui/EFScrubber.js\";\n\nexport { EFScrubber } from \"./gui/EFScrubber.js\";\n\nimport \"./gui/EFTimeDisplay.js\";\n\nexport { EFTimeDisplay } from \"./gui/EFTimeDisplay.js\";\n\nimport \"./gui/EFActiveRootTemporal.js\";\n\nexport { EFActiveRootTemporal } from \"./gui/EFActiveRootTemporal.js\";\n\nimport \"./gui/EFDial.js\";\n\nexport { type DialChangeDetail, EFDial } from \"./gui/EFDial.js\";\n\nimport \"./gui/EFControls.js\";\n\nexport { EFControls } from \"./gui/EFControls.js\";\n\nimport \"./gui/EFFocusOverlay.js\";\n\nexport { EFFocusOverlay } from \"./gui/EFFocusOverlay.js\";\n\nimport \"./gui/transformUtils.js\";\n\nexport {\n  getCornerPoint,\n  getOppositeCorner,\n  rotatePoint,\n} from \"./gui/transformUtils.js\";\n\nimport \"./gui/EFTransformHandles.ts\";\n\nexport {\n  type TransformBounds,\n  EFTransformHandles,\n} from \"./gui/EFTransformHandles.ts\";\n\nimport \"./gui/EFResizableBox.ts\";\n\nexport { type BoxBounds, EFResizableBox } from \"./gui/EFResizableBox.ts\";\n\nimport \"./gui/EFFitScale.js\";\n\nexport { EFFitScale } from \"./gui/EFFitScale.js\";\n\nimport \"./elements/EFSurface.ts\";\n\nexport { EFSurface } from \"./elements/EFSurface.ts\";\n\nimport \"./elements/EFThumbnailStrip.ts\";\n\nexport { EFThumbnailStrip } from \"./elements/EFThumbnailStrip.ts\";\n\nimport \"./elements/EFPanZoom.js\";\n\nexport { EFPanZoom } from \"./elements/EFPanZoom.js\";\nexport type { PanZoomTransform } from \"./elements/EFPanZoom.js\";\n\nimport \"./canvas/EFCanvas.js\";\nimport \"./canvas/EFCanvasItem.js\";\n\nexport { EFCanvas } from \"./canvas/EFCanvas.js\";\nexport { EFCanvasItem } from \"./canvas/EFCanvasItem.js\";\nexport { CanvasAPI } from \"./canvas/api/CanvasAPI.js\";\nexport type {\n  CanvasElementData,\n  SelectionState,\n  CanvasElementBounds,\n} from \"./canvas/api/types.js\";\nexport { SelectionModel } from \"./canvas/selection/SelectionModel.js\";\n\nimport \"./gui/EFOverlayLayer.ts\";\n\nexport { EFOverlayLayer } from \"./gui/EFOverlayLayer.ts\";\n\nimport \"./gui/EFOverlayItem.ts\";\n\nexport { EFOverlayItem } from \"./gui/EFOverlayItem.ts\";\nexport type { OverlayItemPosition } from \"./gui/EFOverlayItem.ts\";\n\nimport \"./gui/EFTimelineRuler.ts\";\n\nexport {\n  EFTimelineRuler,\n  quantizeToFrameTimeMs,\n  calculateFrameIntervalMs,\n  calculatePixelsPerFrame,\n  shouldShowFrameMarkers,\n} from \"./gui/EFTimelineRuler.ts\";\n\nimport \"./gui/timeline/EFTimeline.js\";\nimport \"./gui/timeline/TrimHandles.js\";\n\nexport { EFTimeline } from \"./gui/timeline/EFTimeline.js\";\nexport {\n  EFTrimHandles,\n  type TrimChangeDetail,\n} from \"./gui/timeline/TrimHandles.js\";\n\nif (typeof window !== \"undefined\") {\n  // @ts-expect-error\n  window.EF_REGISTERED = true;\n}\n\nimport \"./EF_FRAMEGEN.js\";\n\n// Initialize render API\nimport \"./render/EFRenderAPI.js\";\n\nexport { getRenderInfo, RenderInfo } from \"./getRenderInfo.js\";\nexport { getRenderData } from \"./render/getRenderData.js\";\nexport type {\n  RenderToVideoOptions,\n  RenderProgress,\n} from \"./preview/renderTimegroupToVideo.js\";\nexport type { TraceContext } from \"./otel/tracingHelpers.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiOA,IAAI,OAAO,WAAW,YAEpB,QAAO,gBAAgB"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.ts"],"sourcesContent":["import \"./elements/EFTimegroup.js\";\n\nexport { EFTimegroup } from \"./elements/EFTimegroup.js\";\nexport {\n  registerCloneFactory,\n  unregisterCloneFactory,\n  getCloneFactory,\n  type CloneFactory,\n  type CloneFactoryResult,\n} from \"./elements/cloneFactoryRegistry.js\";\nexport type { ContainerInfo } from \"./elements/ContainerInfo.js\";\nexport { getContainerInfoFromElement } from \"./elements/ContainerInfo.js\";\nexport type { ElementPositionInfo } from \"./elements/ElementPositionInfo.js\";\nexport {\n  getPositionInfoFromElement,\n  PositionInfoMixin,\n} from \"./elements/ElementPositionInfo.js\";\nexport { needsFitScale, elementNeedsFitScale } from \"./gui/FitScaleHelpers.js\";\n\nimport \"./elements/EFImage.js\";\n\nexport { EFImage } from \"./elements/EFImage.js\";\n\nimport \"./elements/EFMedia.js\";\n\nexport type { EFMedia } from \"./elements/EFMedia.js\";\n\nimport \"./elements/EFAudio.js\";\n\nexport { EFAudio } from \"./elements/EFAudio.js\";\n\nimport \"./elements/EFVideo.js\";\n\nexport { EFVideo } from \"./elements/EFVideo.js\";\n\nimport \"./elements/EFCaptions.js\";\n\nexport {\n  EFCaptions,\n  EFCaptionsActiveWord,\n  EFCaptionsAfterActiveWord,\n  EFCaptionsBeforeActiveWord,\n  EFCaptionsSegment,\n} from \"./elements/EFCaptions.js\";\n\nimport \"./elements/EFText.js\";\nimport \"./elements/EFTextSegment.js\";\n\nexport { EFText } from \"./elements/EFText.js\";\nexport { EFTextSegment } from \"./elements/EFTextSegment.js\";\n\nimport \"./elements/EFWaveform.js\";\n\nexport { EFWaveform } from \"./elements/EFWaveform.js\";\n\nimport \"./elements/EFTemporal.js\";\n\nexport { isEFTemporal } from \"./elements/EFTemporal.js\";\nexport type { TemporalMixinInterface } from \"./elements/EFTemporal.js\";\n\nimport \"./gui/EFConfiguration.ts\";\n\nexport { EFConfiguration } from \"./gui/EFConfiguration.ts\";\n\nimport \"./gui/EFWorkbench.js\";\n\nexport { EFWorkbench } from \"./gui/EFWorkbench.js\";\n\nimport \"./gui/EFPreview.js\";\n\nexport { EFPreview } from \"./gui/EFPreview.js\";\n\nimport \"./gui/EFFilmstrip.js\";\n\nexport { EFFilmstrip } from \"./gui/EFFilmstrip.js\";\n\nimport \"./gui/hierarchy/EFHierarchy.js\";\nimport \"./gui/hierarchy/EFHierarchyItem.js\";\n\nexport { EFHierarchy } from \"./gui/hierarchy/EFHierarchy.js\";\nexport {\n  EFHierarchyItem,\n  EFTimegroupHierarchyItem,\n  EFAudioHierarchyItem,\n  EFVideoHierarchyItem,\n  EFCaptionsHierarchyItem,\n  EFCaptionsActiveWordHierarchyItem,\n  EFTextHierarchyItem,\n  EFTextSegmentHierarchyItem,\n  EFWaveformHierarchyItem,\n  EFImageHierarchyItem,\n  EFHTMLHierarchyItem,\n} from \"./gui/hierarchy/EFHierarchyItem.js\";\nexport type {\n  HierarchyState,\n  HierarchyActions,\n  HierarchyContext,\n} from \"./gui/hierarchy/hierarchyContext.js\";\nexport { hierarchyContext } from \"./gui/hierarchy/hierarchyContext.js\";\n\n// Generic tree component\nimport \"./gui/tree/EFTree.js\";\nimport \"./gui/tree/EFTreeItem.js\";\n\nexport { EFTree } from \"./gui/tree/EFTree.js\";\nexport { EFTreeItem } from \"./gui/tree/EFTreeItem.js\";\nexport type {\n  TreeItem,\n  TreeState,\n  TreeActions,\n  TreeContext,\n} from \"./gui/tree/treeContext.js\";\nexport { treeContext, collectAllIds } from \"./gui/tree/treeContext.js\";\n\nimport \"./gui/EFTogglePlay.js\";\n\nexport { EFTogglePlay } from \"./gui/EFTogglePlay.js\";\n\nimport \"./gui/EFPlay.js\";\n\nexport { EFPlay } from \"./gui/EFPlay.js\";\n\nimport \"./gui/EFPause.js\";\n\nexport { EFPause } from \"./gui/EFPause.js\";\n\nimport \"./gui/EFToggleLoop.js\";\n\nexport { EFToggleLoop } from \"./gui/EFToggleLoop.js\";\n\nimport \"./gui/EFScrubber.js\";\n\nexport { EFScrubber } from \"./gui/EFScrubber.js\";\n\nimport \"./gui/EFTimeDisplay.js\";\n\nexport { EFTimeDisplay } from \"./gui/EFTimeDisplay.js\";\n\nimport \"./gui/EFActiveRootTemporal.js\";\n\nexport { EFActiveRootTemporal } from \"./gui/EFActiveRootTemporal.js\";\n\nimport \"./gui/EFDial.js\";\n\nexport { type DialChangeDetail, EFDial } from \"./gui/EFDial.js\";\n\nimport \"./gui/EFControls.js\";\n\nexport { EFControls } from \"./gui/EFControls.js\";\n\nimport \"./gui/EFFocusOverlay.js\";\n\nexport { EFFocusOverlay } from \"./gui/EFFocusOverlay.js\";\n\nimport \"./gui/transformUtils.js\";\n\nexport {\n  getCornerPoint,\n  getOppositeCorner,\n  rotatePoint,\n} from \"./gui/transformUtils.js\";\n\nimport \"./gui/EFTransformHandles.ts\";\n\nexport {\n  type TransformBounds,\n  EFTransformHandles,\n} from \"./gui/EFTransformHandles.ts\";\n\nimport \"./gui/EFResizableBox.ts\";\n\nexport { type BoxBounds, EFResizableBox } from \"./gui/EFResizableBox.ts\";\n\nimport \"./gui/EFFitScale.js\";\n\nexport {\n  EFFitScale,\n  computeFitScale,\n  type ScaleInput,\n  type ScaleOutput,\n} from \"./gui/EFFitScale.js\";\n\nimport \"./elements/EFSurface.ts\";\n\nexport { EFSurface } from \"./elements/EFSurface.ts\";\n\nimport \"./elements/EFPanZoom.js\";\n\nexport { EFPanZoom } from \"./elements/EFPanZoom.js\";\nexport type { PanZoomTransform } from \"./elements/EFPanZoom.js\";\n\nimport \"./canvas/EFCanvas.js\";\nimport \"./canvas/EFCanvasItem.js\";\n\nexport { EFCanvas } from \"./canvas/EFCanvas.js\";\nexport { EFCanvasItem } from \"./canvas/EFCanvasItem.js\";\nexport { CanvasAPI } from \"./canvas/api/CanvasAPI.js\";\nexport type {\n  CanvasElementData,\n  SelectionState,\n  CanvasElementBounds,\n} from \"./canvas/api/types.js\";\nexport { SelectionModel } from \"./canvas/selection/SelectionModel.js\";\n\nimport \"./gui/EFOverlayLayer.ts\";\n\nexport { EFOverlayLayer } from \"./gui/EFOverlayLayer.ts\";\n\nimport \"./gui/EFOverlayItem.ts\";\n\nexport { EFOverlayItem } from \"./gui/EFOverlayItem.ts\";\nexport type { OverlayItemPosition } from \"./gui/EFOverlayItem.ts\";\n\nimport \"./gui/EFTimelineRuler.ts\";\n\nexport {\n  EFTimelineRuler,\n  quantizeToFrameTimeMs,\n  calculateFrameIntervalMs,\n  calculatePixelsPerFrame,\n  shouldShowFrameMarkers,\n} from \"./gui/EFTimelineRuler.ts\";\n\nimport \"./gui/timeline/EFTimeline.js\";\nimport \"./gui/timeline/TrimHandles.js\";\nimport \"./gui/timeline/tracks/EFThumbnailStrip.js\";\n\nexport { EFTimeline } from \"./gui/timeline/EFTimeline.js\";\nexport {\n  EFTrimHandles,\n  type TrimValue,\n  type TrimChangeDetail,\n} from \"./gui/timeline/TrimHandles.js\";\nexport { EFThumbnailStrip } from \"./gui/timeline/tracks/EFThumbnailStrip.js\";\n\nif (typeof window !== \"undefined\") {\n  // @ts-expect-error\n  window.EF_REGISTERED = true;\n}\n\nimport \"./EF_FRAMEGEN.js\";\n\n// Initialize render API\nimport \"./render/EFRenderAPI.js\";\n\nexport {\n  getRenderInfo,\n  RenderInfoSchema,\n  type RenderInfo,\n} from \"./getRenderInfo.js\";\nexport { getRenderData } from \"./render/getRenderData.js\";\n// Export types only - actual render functions are loaded dynamically by EFTimegroup\nexport type {\n  RenderToVideoOptions,\n  RenderProgress,\n} from \"./preview/renderTimegroupToVideo.types.js\";\nexport type {\n  ContentReadyMode,\n  CaptureOptions,\n  CanvasPreviewOptions,\n  CanvasPreviewResult,\n} from \"./preview/renderTimegroupToCanvas.types.js\";\nexport type { TraceContext } from \"./otel/tracingHelpers.js\";\n\n// Element-to-canvas rendering\nexport {\n  renderElementToCanvas,\n  type RenderElementOptions,\n} from \"./preview/renderElementToCanvas.js\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2OA,IAAI,OAAO,WAAW,YAEpB,QAAO,gBAAgB"}

package/dist/node.d.ts

@@ -4,5 +4,5 @@ import { ElementPositionInfo } from "./elements/ElementPositionInfo.js";
 import { EFCaptions } from "./elements/EFCaptions.js";
 import { EFTimegroup } from "./elements/EFTimegroup.js";
 import { EFImage } from "./elements/EFImage.js";
-import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
-export { type ContainerInfo, type EFCaptions, type EFImage, type EFMedia, type EFTimegroup, type ElementPositionInfo, RenderInfo, getRenderInfo };
+import { RenderInfo, RenderInfoSchema, getRenderInfo } from "./getRenderInfo.js";
+export { type ContainerInfo, type EFCaptions, type EFImage, type EFMedia, type EFTimegroup, type ElementPositionInfo, type RenderInfo, RenderInfoSchema, getRenderInfo };

package/dist/node.js

@@ -1,3 +1,3 @@
-import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
+import { RenderInfoSchema, getRenderInfo } from "./getRenderInfo.js";
 
-export { RenderInfo, getRenderInfo };
+export { RenderInfoSchema, getRenderInfo };

package/dist/preview/AdaptiveResolutionTracker.js

@@ -29,7 +29,7 @@ const SCALE_STEPS = [
 ];
 /**
 * Timing thresholds
-* 
+*
 * Target: 30fps = 33.33ms per frame
 * Tolerate down to 15fps (half target) before scaling down.
 * Scale up when we have plenty of headroom.
@@ -73,7 +73,7 @@ var AdaptiveResolutionTracker = class {
 					if (this.pressureHistory.length > PRESSURE_HISTORY_SIZE) this.pressureHistory.shift();
 				}
 			});
-			this.pressureObserver.observe("cpu", { sampleInterval: 500 });
+			this.pressureObserver.observe("cpu", { sampleInterval: 500 }).catch(() => {});
 		} catch (e) {
 			logger.warn("[AdaptiveResolutionTracker] Failed to initialize PressureObserver:", e);
 			this.pressureObserver = null;
@@ -82,7 +82,7 @@ var AdaptiveResolutionTracker = class {
 	/**
 	* Record a frame's render time.
 	* Call this AFTER each render completes with how long the render took.
-	* 
+	*
 	* @param renderTimeMs - How long the render() call took in milliseconds
 	* @param timestamp - Optional rAF timestamp for frame interval tracking (display only)
 	*/

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\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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"}
+{"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.9, 0.85, 0.8, 0.75, 0.7, 0.65, 0.6, 0.55, 0.5, 0.45, 0.4, 0.35,\n  0.3, 0.25, 0.2, 0.15, 0.1,\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\n        .observe(\"cpu\", { sampleInterval: 500 })\n        .catch(() => {\n          // Ignore errors from observe (e.g., AbortError if disconnect called before observe resolves)\n        });\n    } catch (e) {\n      logger.warn(\n        \"[AdaptiveResolutionTracker] Failed to initialize PressureObserver:\",\n        e,\n      );\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 =\n      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 =\n      this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    if (\n      avgRenderTime < SCALE_UP_THRESHOLD_MS &&\n      this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n      pressureOk\n    ) {\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(\n        `[AdaptiveResolutionTracker] Scaling DOWN to ${(newScale * 100).toFixed(0)}% (reason: ${reason})`,\n      );\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(\n        `[AdaptiveResolutionTracker] Scaling UP to ${(newScale * 100).toFixed(0)}% (reason: stable performance)`,\n      );\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 =\n      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 =\n      this.frameIntervals.length > 0\n        ? this.frameIntervals.reduce((a, b) => a + b, 0) /\n          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 =\n      this.pressureState === \"nominal\" || this.pressureState === \"fair\";\n    const canScaleUp =\n      canChange &&\n      this.currentScaleIndex > 0 &&\n      avgRenderTime < SCALE_UP_THRESHOLD_MS &&\n      this.samplesAtCurrentScale >= SCALE_UP_STABILITY_SAMPLES &&\n      pressureOk;\n\n    const canScaleDown =\n      canChange && 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(\n      `[AdaptiveResolutionTracker] Initialized at scale ${(SCALE_STEPS[bestIndex]! * 100).toFixed(0)}%`,\n    );\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

@@ -82,7 +82,7 @@ declare class FrameController {
     currentTimeMs: number;
   });
   /**
-   * Cancel any in-progress render operation.
+   * Cancel any in-progress render operation and reset deduplication state.
    */
   abort(): void;
   /**
@@ -103,21 +103,6 @@ declare class FrameController {
    */
   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 };
+export { FrameController, FrameRenderable, FrameState, RenderFrameOptions };
 //# sourceMappingURL=FrameController.d.ts.map

package/dist/preview/FrameController.js

@@ -44,15 +44,27 @@ var FrameController = class {
 	#abortController = null;
 	#renderInProgress = false;
 	#pendingRenderTime = null;
+	#frameCount = 0;
+	#totalQueryMs = 0;
+	#totalPrepareMs = 0;
+	#totalRenderMs = 0;
+	#totalAnimsMs = 0;
+	/**
+	* Last successfully rendered time. Used for deduplication when multiple
+	* callers (e.g., PlaybackController RAF loop and canvas render loop)
+	* both try to render the same frame within one animation frame.
+	*/
+	#lastRenderedTimeMs = -1;
 	constructor(rootElement) {
 		this.#rootElement = rootElement;
 	}
 	/**
-	* Cancel any in-progress render operation.
+	* Cancel any in-progress render operation and reset deduplication state.
 	*/
 	abort() {
 		this.#abortController?.abort();
 		this.#abortController = null;
+		this.#lastRenderedTimeMs = -1;
 	}
 	/**
 	* Render a frame at the specified time.
@@ -68,6 +80,7 @@ var FrameController = class {
 	*/
 	async renderFrame(timeMs, options = {}) {
 		const { waitForLitUpdate = true, onAnimationsUpdate } = options;
+		if (timeMs === this.#lastRenderedTimeMs) return;
 		if (this.#renderInProgress) {
 			this.#pendingRenderTime = timeMs;
 			return;
@@ -81,19 +94,40 @@ var FrameController = class {
 				await this.#rootElement.updateComplete;
 				signal.throwIfAborted();
 			}
+			const tQuery = performance.now();
 			const elements = this.#queryVisibleElements(timeMs);
+			const queryMs = performance.now() - tQuery;
 			signal.throwIfAborted();
+			const tPrepare = performance.now();
 			const elementsNeedingPreparation = elements.filter((el) => el.getFrameState(timeMs).needsPreparation);
 			if (elementsNeedingPreparation.length > 0) {
 				await Promise.all(elementsNeedingPreparation.map((el) => el.prepareFrame(timeMs, signal)));
 				signal.throwIfAborted();
 			}
+			const prepareMs = performance.now() - tPrepare;
+			const tRender = performance.now();
 			const sortedElements = [...elements].sort((a, b) => a.getFrameState(timeMs).priority - b.getFrameState(timeMs).priority);
 			for (const element of sortedElements) {
 				signal.throwIfAborted();
 				element.renderFrame(timeMs);
 			}
+			const renderMs = performance.now() - tRender;
+			const tAnims = performance.now();
 			if (onAnimationsUpdate) onAnimationsUpdate(this.#rootElement);
+			const animsMs = performance.now() - tAnims;
+			this.#frameCount++;
+			this.#totalQueryMs += queryMs;
+			this.#totalPrepareMs += prepareMs;
+			this.#totalRenderMs += renderMs;
+			this.#totalAnimsMs += animsMs;
+			if (this.#frameCount % 60 === 0) {
+				this.#frameCount = 0;
+				this.#totalQueryMs = 0;
+				this.#totalPrepareMs = 0;
+				this.#totalRenderMs = 0;
+				this.#totalAnimsMs = 0;
+			}
+			this.#lastRenderedTimeMs = timeMs;
 		} finally {
 			this.#renderInProgress = false;
 			if (this.#pendingRenderTime !== null) {
@@ -106,12 +140,12 @@ var FrameController = class {
 	/**
 	* Query all visible FrameRenderable elements in the tree.
 	* Uses temporal visibility to filter out elements not visible at current time.
-	* 
+	*
 	* IMPORTANT: For temporal elements, we use temporal visibility (startTimeMs/endTimeMs)
 	* instead of CSS visibility. This is because updateAnimations sets display:none on
 	* elements outside their time range, but that CSS state is from the PREVIOUS frame.
 	* When seeking, we need to evaluate visibility based on the NEW time, not stale CSS.
-	* 
+	*
 	* @param timeMs - The time to use for visibility checks. This should be the target
 	*                 render time, not read from root element (which may be stale).
 	*/
@@ -125,11 +159,7 @@ var FrameController = class {
 				if (!(currentTimeMs >= startMs && currentTimeMs < endMs)) return;
 				if (isFrameRenderable(element)) result.push(element);
 			} else {
-				if (element instanceof HTMLElement) {
-					if (element.style.display === "none") return;
-					const style = getComputedStyle(element);
-					if (style.display === "none" || style.visibility === "hidden") return;
-				}
+				if (element instanceof HTMLElement && element.style.display === "none") return;
 				if (isFrameRenderable(element)) result.push(element);
 			}
 			const children = this.#getChildrenIncludingSlotted(element);
@@ -153,7 +183,7 @@ var FrameController = class {
 				return assignedElements;
 			}
 		}
-		return Array.from(element.children);
+		return element.children;
 	}
 	/**
 	* Check if a render is currently in progress.
@@ -162,60 +192,7 @@ var FrameController = class {
 		return this.#renderInProgress;
 	}
 };
-/**
-* Create a backwards-compatible frameTask wrapper for a FrameRenderable element.
-* 
-* This factory function creates a frameTask object that:
-* - Manages its own AbortController for cancellation
-* - Calls prepareFrame() then renderFrame() in sequence
-* - Silently ignores AbortErrors (expected during cancellation)
-* - Provides taskComplete promise for awaiting completion
-* 
-* @param element - The element implementing FrameRenderable
-* @param options - Optional configuration
-* @returns A frameTask object compatible with legacy code
-* 
-* @example
-* ```typescript
-* class MyElement extends LitElement implements FrameRenderable {
-*   frameTask = createFrameTaskWrapper(this, {
-*     getTimeMs: () => this.currentSourceTimeMs,
-*   });
-* 
-*   getFrameState(timeMs: number): FrameState { ... }
-*   async prepareFrame(timeMs: number, signal: AbortSignal): Promise<void> { ... }
-*   renderFrame(timeMs: number): void { ... }
-* }
-* ```
-*/
-function createFrameTaskWrapper(element, options = {}) {
-	let frameTaskPromise = Promise.resolve();
-	const getTimeMs = options.getTimeMs ?? (() => {
-		if ("desiredSeekTimeMs" in element && typeof element.desiredSeekTimeMs === "number") return element.desiredSeekTimeMs;
-		if ("ownCurrentTimeMs" in element && typeof element.ownCurrentTimeMs === "number") return element.ownCurrentTimeMs;
-		return 0;
-	});
-	const taskObj = {
-		run: () => {
-			const abortController = new AbortController();
-			const timeMs = getTimeMs();
-			frameTaskPromise = (async () => {
-				try {
-					await element.prepareFrame(timeMs, abortController.signal);
-					element.renderFrame(timeMs);
-				} catch (error) {
-					if (error instanceof DOMException && error.name === "AbortError") return;
-					throw error;
-				}
-			})();
-			taskObj.taskComplete = frameTaskPromise;
-			return frameTaskPromise;
-		},
-		taskComplete: Promise.resolve()
-	};
-	return taskObj;
-}
 
 //#endregion
-export { FrameController, PRIORITY_AUDIO, PRIORITY_CAPTIONS, PRIORITY_DEFAULT, PRIORITY_IMAGE, PRIORITY_VIDEO, PRIORITY_WAVEFORM, createFrameTaskWrapper };
+export { FrameController, PRIORITY_AUDIO, PRIORITY_CAPTIONS, PRIORITY_DEFAULT, PRIORITY_IMAGE, PRIORITY_VIDEO, PRIORITY_WAVEFORM };
 //# sourceMappingURL=FrameController.js.map