@editframe/elements 0.37.3-beta → 0.38.1

package/dist/gui/hierarchy/EFHierarchyItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFHierarchyItem.js","names":["EFHierarchyItem","position: \"before\" | \"after\" | \"inside\"","EFTimegroupHierarchyItem","EFAudioHierarchyItem","EFVideoHierarchyItem","EFCaptionsHierarchyItem","EFCaptionsActiveWordHierarchyItem","EFTextHierarchyItem","EFTextSegmentHierarchyItem","EFWaveformHierarchyItem","EFImageHierarchyItem","EFHTMLHierarchyItem"],"sources":["../../../src/gui/hierarchy/EFHierarchyItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport { css, html, LitElement, nothing, type PropertyValues, type TemplateResult } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { EFAudio } from \"../../elements/EFAudio.js\";\nimport { EFCaptions, EFCaptionsActiveWord } from \"../../elements/EFCaptions.js\";\nimport { EFImage } from \"../../elements/EFImage.js\";\nimport { EFText } from \"../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../elements/EFTextSegment.js\";\nimport { EFTimegroup } from \"../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../elements/EFVideo.js\";\nimport { EFWaveform } from \"../../elements/EFWaveform.js\";\nimport { selectionContext } from \"../../canvas/selection/selectionContext.js\";\nimport { findRootTemporal } from \"../../elements/findRootTemporal.js\";\nimport { isEFTemporal } from \"../../elements/EFTemporal.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport { phosphorIcon, ICONS } from \"../icons.js\";\nimport { type HierarchyContext, hierarchyContext } from \"./hierarchyContext.js\";\n\nconst DEFAULT_HIDDEN_TAGS = new Set([\n  \"SPAN\",\n  \"STYLE\",\n  \"SCRIPT\",\n  \"LINK\",\n  \"META\",\n  \"SLOT\",\n  \"TEMPLATE\",\n  \"EF-WORKBENCH\",\n  \"EF-FILMSTRIP\",\n  \"EF-CONTROLS\",\n  \"EF-SCRUBBER\",\n  \"EF-TIMELINE-RULER\",\n  \"EF-TRIM-HANDLES\",\n  \"EF-TEXT-SEGMENT\",\n]);\n\nexport const shouldRenderElement = (\n  element: Element,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n): boolean => {\n  if (element instanceof HTMLElement && element.dataset?.efHidden) {\n    return false;\n  }\n\n  // Skip default hidden tags (but allow them if explicitly shown)\n  if (DEFAULT_HIDDEN_TAGS.has(element.tagName)) {\n    // Still check show selectors - if explicitly shown, allow it\n    if (showSelectors && showSelectors.length > 0) {\n      return showSelectors.some((selector) => {\n        try {\n          return element.matches(selector);\n        } catch {\n          return false;\n        }\n      });\n    }\n    return false;\n  }\n\n  if (showSelectors && showSelectors.length > 0) {\n    return showSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  if (hideSelectors && hideSelectors.length > 0) {\n    return !hideSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  return true;\n};\n\nexport function renderHierarchyChildren(\n  children: Element[],\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n  temporalOnly = false,\n): Array<TemplateResult<1> | typeof nothing> {\n  return children.flatMap((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-timegroup-hierarchy-item>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-image-hierarchy-item>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-audio-hierarchy-item>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-video-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-captions-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-captions-active-word-hierarchy-item>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-text-hierarchy-item>`;\n    }\n    // Skip text segments - they're shown within the parent text element\n    if (child instanceof EFTextSegment) {\n      return nothing;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-waveform-hierarchy-item>`;\n    }\n\n    // Skip non-temporal HTML elements when temporalOnly is true\n    if (temporalOnly) {\n      return nothing;\n    }\n\n    // Handle all other HTML elements (plain DOM nodes, custom elements, etc.)\n    if (child instanceof HTMLElement) {\n      return html`<ef-html-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-html-hierarchy-item>`;\n    }\n\n    // Skip non-HTML elements\n    return nothing;\n  });\n}\n\n@customElement(\"ef-hierarchy-item\")\nexport class EFHierarchyItem<\n  ElementType extends HTMLElement = HTMLElement,\n> extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .item-row {\n        display: flex;\n        align-items: center;\n        height: var(--hierarchy-item-height, 1.5rem);\n        padding-left: var(--hierarchy-item-padding-left, 0.5rem);\n        padding-right: var(--hierarchy-item-padding-right, 0.5rem);\n        padding-top: var(--hierarchy-item-padding-top, 0);\n        padding-bottom: var(--hierarchy-item-padding-bottom, 0);\n        font-size: var(--hierarchy-item-font-size, 0.75rem);\n        font-family: system-ui, -apple-system, sans-serif;\n        cursor: pointer;\n        user-select: none;\n        border-left: 3px solid transparent;\n      }\n      .item-row:hover {\n        background: var(--hierarchy-hover-bg, rgba(148, 163, 184, 0.2));\n      }\n      .item-row[data-selected] {\n        background: var(--hierarchy-selected-bg, rgba(59, 130, 246, 0.3));\n      }\n      .item-row[data-ancestor-selected] {\n        background: var(--hierarchy-ancestor-selected-bg, rgba(59, 130, 246, 0.15));\n      }\n      .item-row[data-focused] {\n        background: var(--hierarchy-focused-bg, var(--filmstrip-timegroup-focused, rgba(148, 163, 184, 0.4)));\n      }\n      .item-row[data-dragging] {\n        opacity: 0.5;\n      }\n      .expand-icon {\n        width: var(--hierarchy-expand-icon-size, 1rem);\n        height: var(--hierarchy-expand-icon-size, 1rem);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        flex-shrink: 0;\n      }\n      .expand-icon svg {\n        width: 0.75rem;\n        height: 0.75rem;\n        transition: transform 0.15s ease;\n      }\n      .expand-icon[data-expanded] svg {\n        transform: rotate(90deg);\n      }\n      .icon {\n        margin-right: var(--hierarchy-icon-gap, 0.25rem);\n        flex-shrink: 0;\n      }\n      .label {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        flex: 1;\n      }\n      .children {\n        padding-left: var(--hierarchy-indent, 0.75rem);\n      }\n      .children[data-collapsed] {\n        display: none;\n      }\n      .drop-indicator {\n        height: 2px;\n        background: var(--hierarchy-drop-indicator, #3b82f6);\n        margin-left: var(--hierarchy-indent, 0.75rem);\n      }\n      .drop-inside {\n        outline: 2px solid var(--hierarchy-drop-indicator, #3b82f6);\n        outline-offset: -2px;\n      }\n    `,\n  ];\n\n  @consume({ context: hierarchyContext, subscribe: true })\n  hierarchyContext?: HierarchyContext;\n\n  @consume({ context: selectionContext, subscribe: true })\n  canvasSelectionContext?: import(\"../../canvas/selection/selectionContext.js\").SelectionContext;\n\n  @property({ type: Object, attribute: false })\n  element: ElementType = new EFTimegroup() as unknown as ElementType;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  @property({ type: Boolean, attribute: false })\n  temporalOnly = false;\n\n  @state()\n  private localExpanded = true;\n\n  private selectionChangeHandler?: (event: CustomEvent) => void;\n\n  get elementId(): string {\n    return this.element?.id || \"\";\n  }\n\n  get icon(): TemplateResult<1> | string {\n    return phosphorIcon(ICONS.code);\n  }\n\n  get typeColor(): string {\n    return \"rgb(148, 163, 184)\"; // Default gray\n  }\n\n  get isFocused(): boolean {\n    const highlightedElement = this.hierarchyContext?.getHighlightedElement?.();\n    return this.element && highlightedElement === this.element;\n  }\n\n  get isSelected(): boolean {\n    // Try to get selection context from hierarchy parent (which can access canvas)\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n\n    if (selectionCtx && this.elementId) {\n      // Check if this element's ID is in the selected IDs\n      return selectionCtx.selectedIds.has(this.elementId);\n    }\n    // Fall back to hierarchy's own selection state\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.selectedElementId === this.elementId;\n  }\n\n  get isAncestorSelected(): boolean {\n    // Check if this element contains any selected element\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n\n    if (selectionCtx && this.element) {\n      for (const selectedId of selectionCtx.selectedIds) {\n        const selectedElement = document.getElementById(selectedId);\n        if (\n          selectedElement &&\n          this.element.contains(selectedElement) &&\n          selectedElement !== this.element\n        ) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  get isExpanded(): boolean {\n    if (!this.hierarchyContext || !this.elementId) return this.localExpanded;\n    return this.hierarchyContext.state.expandedIds.has(this.elementId);\n  }\n\n  get isDragging(): boolean {\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.draggedElementId === this.elementId;\n  }\n\n  get isDropTarget(): boolean {\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.dropTargetId === this.elementId;\n  }\n\n  get dropPosition(): \"before\" | \"after\" | \"inside\" | null {\n    if (!this.isDropTarget || !this.hierarchyContext) return null;\n    return this.hierarchyContext.state.dropPosition;\n  }\n\n  get hasChildren(): boolean {\n    return this.element.children.length > 0;\n  }\n\n  displayLabel(): TemplateResult<1> | string | typeof nothing {\n    return this.elementId || \"(unnamed)\";\n  }\n\n  private handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.hierarchyContext && this.elementId) {\n      this.hierarchyContext.actions.select(this.elementId);\n    }\n    // Also set highlight on click for visual feedback\n    this.hierarchyContext?.setHighlightedElement?.(this.element);\n  }\n\n  private handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.hierarchyContext && this.elementId) {\n      this.hierarchyContext.actions.toggleExpanded(this.elementId);\n    } else {\n      this.localExpanded = !this.localExpanded;\n    }\n  }\n\n  private handleDragStart(e: DragEvent): void {\n    if (!this.hierarchyContext || !this.elementId) return;\n    e.dataTransfer?.setData(\"text/plain\", this.elementId);\n    this.hierarchyContext.actions.startDrag(this.elementId);\n  }\n\n  private handleDragEnd(): void {\n    if (this.hierarchyContext) {\n      this.hierarchyContext.actions.endDrag();\n    }\n  }\n\n  private handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (!this.hierarchyContext || !this.elementId) return;\n\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const y = e.clientY - rect.top;\n    const height = rect.height;\n\n    let position: \"before\" | \"after\" | \"inside\";\n    if (y < height * 0.25) {\n      position = \"before\";\n    } else if (y > height * 0.75) {\n      position = \"after\";\n    } else {\n      position = \"inside\";\n    }\n\n    this.hierarchyContext.actions.updateDropTarget(this.elementId, position);\n  }\n\n  private handleDragLeave(): void {\n    if (this.hierarchyContext && this.isDropTarget) {\n      this.hierarchyContext.actions.updateDropTarget(null, null);\n    }\n  }\n\n  private handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    if (!this.hierarchyContext || !this.elementId) return;\n\n    const sourceId = e.dataTransfer?.getData(\"text/plain\");\n    if (sourceId && this.dropPosition) {\n      this.hierarchyContext.actions.reorder(\n        sourceId,\n        this.elementId,\n        this.dropPosition,\n      );\n    }\n    this.hierarchyContext.actions.endDrag();\n  }\n\n  private handleMouseEnter(): void {\n    // Update canvas highlight (source of truth)\n    this.hierarchyContext?.setHighlightedElement?.(this.element);\n  }\n\n  private handleMouseLeave(): void {\n    // Clear canvas highlight (source of truth)\n    const currentHighlight = this.hierarchyContext?.getHighlightedElement?.();\n    if (currentHighlight === this.element) {\n      this.hierarchyContext?.setHighlightedElement?.(null);\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setupSelectionListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeSelectionListener();\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Set up listener if context becomes available or context changed\n    if (!this.selectionChangeHandler || changedProperties.has(\"hierarchyContext\")) {\n      // Remove old listener if context changed\n      if (changedProperties.has(\"hierarchyContext\") && this.selectionChangeHandler) {\n        this.removeSelectionListener();\n        this.selectionChangeHandler = undefined;\n      }\n      this.setupSelectionListener();\n    }\n  }\n\n  private setupSelectionListener(): void {\n    // Don't set up if already set up\n    if (this.selectionChangeHandler) {\n      return;\n    }\n\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n    if (selectionCtx && \"addEventListener\" in selectionCtx) {\n      this.selectionChangeHandler = () => {\n        this.requestUpdate(); // Trigger re-render to update selected state\n      };\n      (selectionCtx as any).addEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n    }\n  }\n\n  private removeSelectionListener(): void {\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n    if (\n      selectionCtx &&\n      \"removeEventListener\" in selectionCtx &&\n      this.selectionChangeHandler\n    ) {\n      (selectionCtx as any).removeEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n      this.selectionChangeHandler = undefined;\n    }\n  }\n\n  render() {\n    const expanded = this.isExpanded;\n\n    return html`\n      ${this.dropPosition === \"before\" ? html`<div class=\"drop-indicator\"></div>` : nothing}\n      <div\n        class=\"item-row ${this.dropPosition === \"inside\" ? \"drop-inside\" : \"\"}\"\n        style=${styleMap({ borderLeftColor: this.typeColor })}\n        ?data-focused=${this.isFocused}\n        ?data-selected=${this.isSelected}\n        ?data-ancestor-selected=${this.isAncestorSelected}\n        ?data-dragging=${this.isDragging}\n        draggable=\"true\"\n        @click=${this.handleClick}\n        @dragstart=${this.handleDragStart}\n        @dragend=${this.handleDragEnd}\n        @dragover=${this.handleDragOver}\n        @dragleave=${this.handleDragLeave}\n        @drop=${this.handleDrop}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\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        <span class=\"icon\">${this.icon}</span>\n        <span class=\"label\">${this.displayLabel()}</span>\n      </div>\n      ${\n        this.hasChildren\n          ? html`\n            <div class=\"children\" ?data-collapsed=${!expanded}>\n              ${this.renderChildren()}\n            </div>\n          `\n          : nothing\n      }\n      ${this.dropPosition === \"after\" ? html`<div class=\"drop-indicator\"></div>` : nothing}\n    `;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderHierarchyChildren(\n      Array.from(this.element.children),\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.temporalOnly,\n    );\n  }\n}\n\n/**\n * Generate a friendly label for an element based on its type and siblings\n */\nfunction getFriendlyLabel(element: HTMLElement, typeLabel: string): string {\n  // If element has a meaningful ID (not auto-generated), use it\n  const id = element.id || \"\";\n  if (id && !id.includes(\"-\") && !id.match(/^\\d+$/)) {\n    return id;\n  }\n  \n  // Count siblings of same type to generate \"Video 1\", \"Video 2\", etc.\n  const parent = element.parentElement;\n  if (parent) {\n    const tagName = element.tagName;\n    const siblings = Array.from(parent.children).filter(\n      (child) => child.tagName === tagName\n    );\n    const index = siblings.indexOf(element) + 1;\n    \n    // If there's only one of this type, don't add number\n    if (siblings.length === 1) {\n      return typeLabel;\n    }\n    return `${typeLabel} ${index}`;\n  }\n  \n  return typeLabel;\n}\n\n@customElement(\"ef-timegroup-hierarchy-item\")\nexport class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {\n  get icon() {\n    return phosphorIcon(ICONS.filmSlate);\n  }\n\n  get typeColor(): string {\n    return \"rgb(148, 163, 184)\"; // Gray for compositions\n  }\n\n  displayLabel(): string | TemplateResult<1> | typeof nothing {\n    return getFriendlyLabel(this.element, \"Composition\");\n  }\n}\n\n@customElement(\"ef-audio-hierarchy-item\")\nexport class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {\n  get icon() {\n    return phosphorIcon(ICONS.speakerHigh);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green for audio\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Audio\");\n  }\n}\n\n@customElement(\"ef-video-hierarchy-item\")\nexport class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {\n  get icon() {\n    return phosphorIcon(ICONS.filmStrip);\n  }\n\n  get typeColor(): string {\n    return \"rgb(59, 130, 246)\"; // Blue for video\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Video\");\n  }\n}\n\n@customElement(\"ef-captions-hierarchy-item\")\nexport class EFCaptionsHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.subtitles);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element as HTMLElement, \"Captions\");\n  }\n}\n\n@customElement(\"ef-captions-active-word-hierarchy-item\")\nexport class EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.microphone);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  displayLabel() {\n    return \"Active Word\";\n  }\n}\n\n@customElement(\"ef-text-hierarchy-item\")\nexport class EFTextHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.textT);\n  }\n\n  get typeColor(): string {\n    return \"rgb(249, 115, 22)\"; // Orange for text\n  }\n\n  get hasChildren(): boolean {\n    return false; // Text segments are internal, not shown as children\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element as HTMLElement, \"Text\");\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-text-segment-hierarchy-item\")\nexport class EFTextSegmentHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.textT);\n  }\n\n  get typeColor(): string {\n    return \"rgb(249, 115, 22)\"; // Orange\n  }\n\n  displayLabel() {\n    return \"Segment\";\n  }\n}\n\n@customElement(\"ef-waveform-hierarchy-item\")\nexport class EFWaveformHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.waveform);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-image-hierarchy-item\")\nexport class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {\n  get icon() {\n    return phosphorIcon(ICONS.image);\n  }\n\n  get typeColor(): string {\n    return \"rgb(168, 85, 247)\"; // Purple for images\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Image\");\n  }\n}\n\n@customElement(\"ef-html-hierarchy-item\")\nexport class EFHTMLHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-hierarchy-item\": EFHierarchyItem;\n    \"ef-timegroup-hierarchy-item\": EFTimegroupHierarchyItem;\n    \"ef-audio-hierarchy-item\": EFAudioHierarchyItem;\n    \"ef-video-hierarchy-item\": EFVideoHierarchyItem;\n    \"ef-captions-hierarchy-item\": EFCaptionsHierarchyItem;\n    \"ef-captions-active-word-hierarchy-item\": EFCaptionsActiveWordHierarchyItem;\n    \"ef-text-hierarchy-item\": EFTextHierarchyItem;\n    \"ef-text-segment-hierarchy-item\": EFTextSegmentHierarchyItem;\n    \"ef-waveform-hierarchy-item\": EFWaveformHierarchyItem;\n    \"ef-image-hierarchy-item\": EFImageHierarchyItem;\n    \"ef-html-hierarchy-item\": EFHTMLHierarchyItem;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"EFHierarchyItem.js","names":["EFHierarchyItem","position: \"before\" | \"after\" | \"inside\"","EFTimegroupHierarchyItem","EFAudioHierarchyItem","EFVideoHierarchyItem","EFCaptionsHierarchyItem","EFCaptionsActiveWordHierarchyItem","EFTextHierarchyItem","EFTextSegmentHierarchyItem","EFWaveformHierarchyItem","EFImageHierarchyItem","EFHTMLHierarchyItem"],"sources":["../../../src/gui/hierarchy/EFHierarchyItem.ts"],"sourcesContent":["import { consume } from \"@lit/context\";\nimport {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport { EFAudio } from \"../../elements/EFAudio.js\";\nimport { EFCaptions, EFCaptionsActiveWord } from \"../../elements/EFCaptions.js\";\nimport { EFImage } from \"../../elements/EFImage.js\";\nimport { EFText } from \"../../elements/EFText.js\";\nimport { EFTextSegment } from \"../../elements/EFTextSegment.js\";\nimport { EFTimegroup } from \"../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../elements/EFVideo.js\";\nimport { EFWaveform } from \"../../elements/EFWaveform.js\";\nimport { selectionContext } from \"../../canvas/selection/selectionContext.js\";\n\nimport { TWMixin } from \"../TWMixin.js\";\nimport { phosphorIcon, ICONS } from \"../icons.js\";\nimport { type HierarchyContext, hierarchyContext } from \"./hierarchyContext.js\";\nimport { getElementTypeColor } from \"../theme.js\";\n\nconst DEFAULT_HIDDEN_TAGS = new Set([\n  \"SPAN\",\n  \"STYLE\",\n  \"SCRIPT\",\n  \"LINK\",\n  \"META\",\n  \"SLOT\",\n  \"TEMPLATE\",\n  \"EF-WORKBENCH\",\n  \"EF-FILMSTRIP\",\n  \"EF-CONTROLS\",\n  \"EF-SCRUBBER\",\n  \"EF-TIMELINE-RULER\",\n  \"EF-TRIM-HANDLES\",\n  \"EF-TEXT-SEGMENT\",\n]);\n\nexport const shouldRenderElement = (\n  element: Element,\n  hideSelectors?: string[],\n  showSelectors?: string[],\n): boolean => {\n  if (element instanceof HTMLElement && element.dataset?.efHidden) {\n    return false;\n  }\n\n  // Skip default hidden tags (but allow them if explicitly shown)\n  if (DEFAULT_HIDDEN_TAGS.has(element.tagName)) {\n    // Still check show selectors - if explicitly shown, allow it\n    if (showSelectors && showSelectors.length > 0) {\n      return showSelectors.some((selector) => {\n        try {\n          return element.matches(selector);\n        } catch {\n          return false;\n        }\n      });\n    }\n    return false;\n  }\n\n  if (showSelectors && showSelectors.length > 0) {\n    return showSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  if (hideSelectors && hideSelectors.length > 0) {\n    return !hideSelectors.some((selector) => {\n      try {\n        return element.matches(selector);\n      } catch {\n        return false;\n      }\n    });\n  }\n\n  return true;\n};\n\nexport function renderHierarchyChildren(\n  children: Element[],\n  hideSelectors?: string[],\n  showSelectors?: string[],\n  skipRootFiltering = false,\n  temporalOnly = false,\n): Array<TemplateResult<1> | typeof nothing> {\n  return children.flatMap((child) => {\n    if (\n      !skipRootFiltering &&\n      !shouldRenderElement(child, hideSelectors, showSelectors)\n    ) {\n      return nothing;\n    }\n\n    if (child instanceof EFTimegroup) {\n      return html`<ef-timegroup-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-timegroup-hierarchy-item>`;\n    }\n    if (child instanceof EFImage) {\n      return html`<ef-image-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-image-hierarchy-item>`;\n    }\n    if (child instanceof EFAudio) {\n      return html`<ef-audio-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-audio-hierarchy-item>`;\n    }\n    if (child instanceof EFVideo) {\n      return html`<ef-video-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-video-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptions) {\n      return html`<ef-captions-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-captions-hierarchy-item>`;\n    }\n    if (child instanceof EFCaptionsActiveWord) {\n      return html`<ef-captions-active-word-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-captions-active-word-hierarchy-item>`;\n    }\n    if (child instanceof EFText) {\n      return html`<ef-text-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-text-hierarchy-item>`;\n    }\n    // Skip text segments - they're shown within the parent text element\n    if (child instanceof EFTextSegment) {\n      return nothing;\n    }\n    if (child instanceof EFWaveform) {\n      return html`<ef-waveform-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n        .temporalOnly=${temporalOnly}\n      ></ef-waveform-hierarchy-item>`;\n    }\n\n    // Skip non-temporal HTML elements when temporalOnly is true\n    if (temporalOnly) {\n      return nothing;\n    }\n\n    // Handle all other HTML elements (plain DOM nodes, custom elements, etc.)\n    if (child instanceof HTMLElement) {\n      return html`<ef-html-hierarchy-item\n        .element=${child}\n        .hideSelectors=${hideSelectors}\n        .showSelectors=${showSelectors}\n      ></ef-html-hierarchy-item>`;\n    }\n\n    // Skip non-HTML elements\n    return nothing;\n  });\n}\n\n@customElement(\"ef-hierarchy-item\")\nexport class EFHierarchyItem<\n  ElementType extends HTMLElement = HTMLElement,\n> extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n      .item-row {\n        display: flex;\n        align-items: center;\n        height: var(--hierarchy-item-height, 1.5rem);\n        padding-left: var(--hierarchy-item-padding-left, 0.5rem);\n        padding-right: var(--hierarchy-item-padding-right, 0.5rem);\n        padding-top: var(--hierarchy-item-padding-top, 0);\n        padding-bottom: var(--hierarchy-item-padding-bottom, 0);\n        font-size: var(--hierarchy-item-font-size, 0.75rem);\n        font-family: system-ui, -apple-system, sans-serif;\n        cursor: pointer;\n        user-select: none;\n        border-left: 3px solid transparent;\n        transition: background-color 0.1s ease;\n      }\n      .item-row:hover {\n        background: var(--ef-color-hover);\n      }\n      .item-row[data-selected] {\n        background: var(--ef-color-selected);\n        border-left-color: var(--ef-color-primary);\n      }\n      .item-row[data-ancestor-selected] {\n        background: var(--ef-color-selected-subtle);\n      }\n      .item-row[data-focused] {\n        background: var(--ef-color-focused);\n        border-left-color: var(--ef-color-primary);\n      }\n      .item-row[data-dragging] {\n        opacity: 0.5;\n      }\n      .expand-icon {\n        width: var(--hierarchy-expand-icon-size, 1rem);\n        height: var(--hierarchy-expand-icon-size, 1rem);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        flex-shrink: 0;\n      }\n      .expand-icon svg {\n        width: 0.75rem;\n        height: 0.75rem;\n        transition: transform 0.15s ease;\n      }\n      .expand-icon[data-expanded] svg {\n        transform: rotate(90deg);\n      }\n      .icon {\n        margin-right: var(--hierarchy-icon-gap, 0.25rem);\n        flex-shrink: 0;\n      }\n      .label {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        flex: 1;\n      }\n      .children {\n        padding-left: var(--hierarchy-indent, 0.75rem);\n      }\n      .children[data-collapsed] {\n        display: none;\n      }\n      .drop-indicator {\n        height: 2px;\n        background: var(--hierarchy-drop-indicator, #3b82f6);\n        margin-left: var(--hierarchy-indent, 0.75rem);\n      }\n      .drop-inside {\n        outline: 2px solid var(--hierarchy-drop-indicator, #3b82f6);\n        outline-offset: -2px;\n      }\n    `,\n  ];\n\n  @consume({ context: hierarchyContext, subscribe: true })\n  hierarchyContext?: HierarchyContext;\n\n  @consume({ context: selectionContext, subscribe: true })\n  canvasSelectionContext?: import(\"../../canvas/selection/selectionContext.js\").SelectionContext;\n\n  @property({ type: Object, attribute: false })\n  element: ElementType = new EFTimegroup() as unknown as ElementType;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  @property({ type: Boolean, attribute: false })\n  temporalOnly = false;\n\n  @state()\n  private localExpanded = true;\n\n  private selectionChangeHandler?: (event: CustomEvent) => void;\n\n  get elementId(): string {\n    return this.element?.id || \"\";\n  }\n\n  get icon(): TemplateResult<1> | string {\n    return phosphorIcon(ICONS.code);\n  }\n\n  get typeColor(): string {\n    return getElementTypeColor(\"timegroup\", this);\n  }\n\n  get isFocused(): boolean {\n    const highlightedElement = this.hierarchyContext?.getHighlightedElement?.();\n    return this.element && highlightedElement === this.element;\n  }\n\n  get isSelected(): boolean {\n    // Try to get selection context from hierarchy parent (which can access canvas)\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n\n    if (selectionCtx && this.elementId) {\n      // Check if this element's ID is in the selected IDs\n      return selectionCtx.selectedIds.has(this.elementId);\n    }\n    // Fall back to hierarchy's own selection state\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.selectedElementId === this.elementId;\n  }\n\n  get isAncestorSelected(): boolean {\n    // Check if this element contains any selected element\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n\n    if (selectionCtx && this.element) {\n      for (const selectedId of selectionCtx.selectedIds) {\n        const selectedElement = document.getElementById(selectedId);\n        if (\n          selectedElement &&\n          this.element.contains(selectedElement) &&\n          selectedElement !== this.element\n        ) {\n          return true;\n        }\n      }\n    }\n    return false;\n  }\n\n  get isExpanded(): boolean {\n    if (!this.hierarchyContext || !this.elementId) return this.localExpanded;\n    return this.hierarchyContext.state.expandedIds.has(this.elementId);\n  }\n\n  get isDragging(): boolean {\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.draggedElementId === this.elementId;\n  }\n\n  get isDropTarget(): boolean {\n    if (!this.hierarchyContext) return false;\n    return this.hierarchyContext.state.dropTargetId === this.elementId;\n  }\n\n  get dropPosition(): \"before\" | \"after\" | \"inside\" | null {\n    if (!this.isDropTarget || !this.hierarchyContext) return null;\n    return this.hierarchyContext.state.dropPosition;\n  }\n\n  get hasChildren(): boolean {\n    return this.element.children.length > 0;\n  }\n\n  displayLabel(): TemplateResult<1> | string | typeof nothing {\n    return this.elementId || \"(unnamed)\";\n  }\n\n  private handleClick(e: Event): void {\n    e.stopPropagation();\n    if (this.hierarchyContext && this.elementId) {\n      this.hierarchyContext.actions.select(this.elementId);\n    }\n    // Also set highlight on click for visual feedback\n    this.hierarchyContext?.setHighlightedElement?.(this.element);\n  }\n\n  private handleExpandClick(e: Event): void {\n    e.stopPropagation();\n    if (this.hierarchyContext && this.elementId) {\n      this.hierarchyContext.actions.toggleExpanded(this.elementId);\n    } else {\n      this.localExpanded = !this.localExpanded;\n    }\n  }\n\n  private handleDragStart(e: DragEvent): void {\n    if (!this.hierarchyContext || !this.elementId) return;\n    e.dataTransfer?.setData(\"text/plain\", this.elementId);\n    this.hierarchyContext.actions.startDrag(this.elementId);\n  }\n\n  private handleDragEnd(): void {\n    if (this.hierarchyContext) {\n      this.hierarchyContext.actions.endDrag();\n    }\n  }\n\n  private handleDragOver(e: DragEvent): void {\n    e.preventDefault();\n    if (!this.hierarchyContext || !this.elementId) return;\n\n    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n    const y = e.clientY - rect.top;\n    const height = rect.height;\n\n    let position: \"before\" | \"after\" | \"inside\";\n    if (y < height * 0.25) {\n      position = \"before\";\n    } else if (y > height * 0.75) {\n      position = \"after\";\n    } else {\n      position = \"inside\";\n    }\n\n    this.hierarchyContext.actions.updateDropTarget(this.elementId, position);\n  }\n\n  private handleDragLeave(): void {\n    if (this.hierarchyContext && this.isDropTarget) {\n      this.hierarchyContext.actions.updateDropTarget(null, null);\n    }\n  }\n\n  private handleDrop(e: DragEvent): void {\n    e.preventDefault();\n    if (!this.hierarchyContext || !this.elementId) return;\n\n    const sourceId = e.dataTransfer?.getData(\"text/plain\");\n    if (sourceId && this.dropPosition) {\n      this.hierarchyContext.actions.reorder(\n        sourceId,\n        this.elementId,\n        this.dropPosition,\n      );\n    }\n    this.hierarchyContext.actions.endDrag();\n  }\n\n  private handleMouseEnter(): void {\n    // Update canvas highlight (source of truth)\n    this.hierarchyContext?.setHighlightedElement?.(this.element);\n  }\n\n  private handleMouseLeave(): void {\n    // Clear canvas highlight (source of truth)\n    const currentHighlight = this.hierarchyContext?.getHighlightedElement?.();\n    if (currentHighlight === this.element) {\n      this.hierarchyContext?.setHighlightedElement?.(null);\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.setupSelectionListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeSelectionListener();\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Set up listener if context becomes available or context changed\n    if (\n      !this.selectionChangeHandler ||\n      changedProperties.has(\"hierarchyContext\")\n    ) {\n      // Remove old listener if context changed\n      if (\n        changedProperties.has(\"hierarchyContext\") &&\n        this.selectionChangeHandler\n      ) {\n        this.removeSelectionListener();\n        this.selectionChangeHandler = undefined;\n      }\n      this.setupSelectionListener();\n    }\n  }\n\n  private setupSelectionListener(): void {\n    // Don't set up if already set up\n    if (this.selectionChangeHandler) {\n      return;\n    }\n\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n    if (selectionCtx && \"addEventListener\" in selectionCtx) {\n      this.selectionChangeHandler = () => {\n        this.requestUpdate(); // Trigger re-render to update selected state\n      };\n      (selectionCtx as any).addEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n    }\n  }\n\n  private removeSelectionListener(): void {\n    const selectionCtx =\n      this.canvasSelectionContext ||\n      this.hierarchyContext?.getCanvasSelectionContext?.();\n    if (\n      selectionCtx &&\n      \"removeEventListener\" in selectionCtx &&\n      this.selectionChangeHandler\n    ) {\n      (selectionCtx as any).removeEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n      this.selectionChangeHandler = undefined;\n    }\n  }\n\n  render() {\n    const expanded = this.isExpanded;\n\n    return html`\n      ${this.dropPosition === \"before\" ? html`<div class=\"drop-indicator\"></div>` : nothing}\n      <div\n        class=\"item-row ${this.dropPosition === \"inside\" ? \"drop-inside\" : \"\"}\"\n        part=\"row\"\n        style=${styleMap({ borderLeftColor: this.typeColor })}\n        ?data-focused=${this.isFocused}\n        ?data-selected=${this.isSelected}\n        ?data-ancestor-selected=${this.isAncestorSelected}\n        ?data-dragging=${this.isDragging}\n        draggable=\"true\"\n        @click=${this.handleClick}\n        @dragstart=${this.handleDragStart}\n        @dragend=${this.handleDragEnd}\n        @dragover=${this.handleDragOver}\n        @dragleave=${this.handleDragLeave}\n        @drop=${this.handleDrop}\n        @mouseenter=${this.handleMouseEnter}\n        @mouseleave=${this.handleMouseLeave}\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        <span class=\"icon\" part=\"icon\">${this.icon}</span>\n        <span class=\"label\" part=\"label\">${this.displayLabel()}</span>\n      </div>\n      ${\n        this.hasChildren\n          ? html`\n            <div class=\"children\" ?data-collapsed=${!expanded}>\n              ${this.renderChildren()}\n            </div>\n          `\n          : nothing\n      }\n      ${this.dropPosition === \"after\" ? html`<div class=\"drop-indicator\"></div>` : nothing}\n    `;\n  }\n\n  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing {\n    return renderHierarchyChildren(\n      Array.from(this.element.children),\n      this.hideSelectors,\n      this.showSelectors,\n      false,\n      this.temporalOnly,\n    );\n  }\n}\n\n/**\n * Generate a friendly label for an element based on its type and siblings\n */\nfunction getFriendlyLabel(element: HTMLElement, typeLabel: string): string {\n  // If element has a meaningful ID (not auto-generated), use it\n  const id = element.id || \"\";\n  if (id && !id.includes(\"-\") && !id.match(/^\\d+$/)) {\n    return id;\n  }\n\n  // Count siblings of same type to generate \"Video 1\", \"Video 2\", etc.\n  const parent = element.parentElement;\n  if (parent) {\n    const tagName = element.tagName;\n    const siblings = Array.from(parent.children).filter(\n      (child) => child.tagName === tagName,\n    );\n    const index = siblings.indexOf(element) + 1;\n\n    // If there's only one of this type, don't add number\n    if (siblings.length === 1) {\n      return typeLabel;\n    }\n    return `${typeLabel} ${index}`;\n  }\n\n  return typeLabel;\n}\n\n@customElement(\"ef-timegroup-hierarchy-item\")\nexport class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {\n  get icon() {\n    return phosphorIcon(ICONS.filmSlate);\n  }\n\n  get typeColor(): string {\n    return getElementTypeColor(\"timegroup\", this);\n  }\n\n  displayLabel(): string | TemplateResult<1> | typeof nothing {\n    const label = getFriendlyLabel(this.element, \"Composition\");\n    const mode = this.element.mode || \"fixed\";\n    const modeLabels: Record<string, string> = {\n      fixed: \"Fixed\",\n      sequence: \"Sequence\",\n      contain: \"Container\",\n      fit: \"Fit\",\n    };\n    const modeLabel = modeLabels[mode] || mode;\n    return html`${label} <span style=\"opacity: 0.5; font-size: 0.65rem;\">${modeLabel}</span>`;\n  }\n}\n\n@customElement(\"ef-audio-hierarchy-item\")\nexport class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {\n  get icon() {\n    return phosphorIcon(ICONS.speakerHigh);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green for audio\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Audio\");\n  }\n}\n\n@customElement(\"ef-video-hierarchy-item\")\nexport class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {\n  get icon() {\n    return phosphorIcon(ICONS.filmStrip);\n  }\n\n  get typeColor(): string {\n    return \"rgb(59, 130, 246)\"; // Blue for video\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Video\");\n  }\n}\n\n@customElement(\"ef-captions-hierarchy-item\")\nexport class EFCaptionsHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.subtitles);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element as HTMLElement, \"Captions\");\n  }\n}\n\n@customElement(\"ef-captions-active-word-hierarchy-item\")\nexport class EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.microphone);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  displayLabel() {\n    return \"Active Word\";\n  }\n}\n\n@customElement(\"ef-text-hierarchy-item\")\nexport class EFTextHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.textT);\n  }\n\n  get typeColor(): string {\n    return \"rgb(249, 115, 22)\"; // Orange for text\n  }\n\n  get hasChildren(): boolean {\n    return false; // Text segments are internal, not shown as children\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element as HTMLElement, \"Text\");\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-text-segment-hierarchy-item\")\nexport class EFTextSegmentHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.textT);\n  }\n\n  get typeColor(): string {\n    return \"rgb(249, 115, 22)\"; // Orange\n  }\n\n  displayLabel() {\n    return \"Segment\";\n  }\n}\n\n@customElement(\"ef-waveform-hierarchy-item\")\nexport class EFWaveformHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return phosphorIcon(ICONS.waveform);\n  }\n\n  get typeColor(): string {\n    return \"rgb(34, 197, 94)\"; // Green\n  }\n\n  renderChildren(): typeof nothing {\n    return nothing;\n  }\n}\n\n@customElement(\"ef-image-hierarchy-item\")\nexport class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {\n  get icon() {\n    return phosphorIcon(ICONS.image);\n  }\n\n  get typeColor(): string {\n    return \"rgb(168, 85, 247)\"; // Purple for images\n  }\n\n  displayLabel() {\n    return getFriendlyLabel(this.element, \"Image\");\n  }\n}\n\n@customElement(\"ef-html-hierarchy-item\")\nexport class EFHTMLHierarchyItem extends EFHierarchyItem {\n  get icon() {\n    return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-hierarchy-item\": EFHierarchyItem;\n    \"ef-timegroup-hierarchy-item\": EFTimegroupHierarchyItem;\n    \"ef-audio-hierarchy-item\": EFAudioHierarchyItem;\n    \"ef-video-hierarchy-item\": EFVideoHierarchyItem;\n    \"ef-captions-hierarchy-item\": EFCaptionsHierarchyItem;\n    \"ef-captions-active-word-hierarchy-item\": EFCaptionsActiveWordHierarchyItem;\n    \"ef-text-hierarchy-item\": EFTextHierarchyItem;\n    \"ef-text-segment-hierarchy-item\": EFTextSegmentHierarchyItem;\n    \"ef-waveform-hierarchy-item\": EFWaveformHierarchyItem;\n    \"ef-image-hierarchy-item\": EFImageHierarchyItem;\n    \"ef-html-hierarchy-item\": EFHTMLHierarchyItem;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","names":[],"sources":["../../src/gui/icons.ts"],"sourcesContent":["import { html, type TemplateResult } from \"lit\";\n\n/**\n * Helper function to create Phosphor icon SVG templates\n * Icons are sized to match typical UI font sizes (12-14px)\n */\nexport function phosphorIcon(path: string, size = 14): TemplateResult<1> {\n  return html`\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 256 256\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"${path}\" />\n    </svg>\n  `;\n}\n\n// Phosphor icon paths (from @phosphor-icons/core)\nexport const ICONS = {\n  gear: \"M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z\",\n  clock: \"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z\",\n  filmStrip: \"M184,32H72A24,24,0,0,0,48,56V200a24,24,0,0,0,24,24H184a24,24,0,0,0,24-24V56A24,24,0,0,0,184,32Zm8,168a8,8,0,0,1-8,8H72a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H184a8,8,0,0,1,8,8ZM80,80a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Zm80,0a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z\",\n  filmSlate: \"M216,48H40a16,16,0,0,0-16,16V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,64H216V192H40ZM56,88a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,88Zm144,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H208A8,8,0,0,1,200,88ZM56,168a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,168Zm144,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H208A8,8,0,0,1,200,168ZM128,120a8,8,0,0,1-8-8V96a8,8,0,0,1,16,0v16A8,8,0,0,1,128,120Zm0,48a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v16A8,8,0,0,1,128,168Z\",\n  speakerHigh: \"M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88.91,160H32V96H88.91L144,48.36Zm53.66-90.37a8,8,0,0,1,0-11.32,40,40,0,0,1,0,56.58,8,8,0,0,1-11.32-11.32,24,24,0,0,0,0-33.94A8,8,0,0,1,197.66,117.27Zm-17-45.25a8,8,0,0,1,11.32,0,72,72,0,0,1,0,101.82,8,8,0,0,1-11.32-11.32,56,56,0,0,0,0-79.18A8,8,0,0,1,180.66,72Z\",\n  textT: \"M212,56V88a8,8,0,0,1-16,0V64H140V192h20a8,8,0,0,1,0,16H96a8,8,0,0,1,0-16h20V64H60V88a8,8,0,0,1-16,0V56a8,8,0,0,1,8-8H204A8,8,0,0,1,212,56Z\",\n  image: \"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM56,96a12,12,0,1,1,12,12A12,12,0,0,1,56,96Zm152,84H96l48-48,24,24,16-16Z\",\n  subtitles: \"M224,48H32a16,16,0,0,0-16,16V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM48,128a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H56A8,8,0,0,1,48,128Zm112,0a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H168A8,8,0,0,1,160,128Zm-64,32a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H104A8,8,0,0,1,96,160Z\",\n  microphone: \"M128,24A48,48,0,0,0,80,72V128a48,48,0,0,0,96,0V72A48,48,0,0,0,128,24Zm32,104a32,32,0,0,1-64,0V72a32,32,0,0,1,64,0Zm48,0a8,8,0,0,1-16,0A96.11,96.11,0,0,0,128,32a8,8,0,0,1,0-16A112.12,112.12,0,0,1,240,128Zm-40,0a8,8,0,0,1-16,0A72.08,72.08,0,0,0,128,56a8,8,0,0,1,0-16A88.1,88.1,0,0,1,216,128Zm24,40a8,8,0,0,1-8,8H32a8,8,0,0,1,0-16H192A8,8,0,0,1,200,168Z\",\n  waveform: \"M80,96a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8Zm32-32a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v128a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Zm32,16a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v96a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Zm32-48a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v192a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Z\",\n  code: \"M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.3l-48-40a8,8,0,0,1,0-12.3l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,0,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.3l48-40a8,8,0,0,0,0-12.3Zm-82.39-89.37a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z\",\n  arrowLeft: \"M192,128a8,8,0,0,1-2.34,5.66l-56,56a8,8,0,0,1-11.32-11.32L172.69,128,122.34,77.66a8,8,0,0,1,11.32-11.32l56,56A8,8,0,0,1,192,128Z\",\n  arrowRight: \"M64,128a8,8,0,0,1,2.34-5.66l56-56a8,8,0,0,1,11.32,11.32L83.31,128l50.35,50.34a8,8,0,0,1-11.32,11.32l-56-56A8,8,0,0,1,64,128Z\",\n  lightning: \"M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17Z\",\n} as const;\n\n"],"mappings":";;;;;;;AAMA,SAAgB,aAAa,MAAc,OAAO,IAAuB;AACvE,QAAO,IAAI;kBACK,KAAK,YAAY,KAAK;iBACvB,KAAK;;;;AAMtB,MAAa,QAAQ;CACnB,MAAM;CACN,OAAO;CACP,WAAW;CACX,WAAW;CACX,aAAa;CACb,OAAO;CACP,OAAO;CACP,WAAW;CACX,YAAY;CACZ,UAAU;CACV,MAAM;CACN,WAAW;CACX,YAAY;CACZ,WAAW;CACZ"}
+{"version":3,"file":"icons.js","names":[],"sources":["../../src/gui/icons.ts"],"sourcesContent":["import { html, type TemplateResult } from \"lit\";\n\n/**\n * Helper function to create Phosphor icon SVG templates\n * Icons are sized to match typical UI font sizes (12-14px)\n */\nexport function phosphorIcon(path: string, size = 14): TemplateResult<1> {\n  return html`\n    <svg width=\"${size}\" height=\"${size}\" viewBox=\"0 0 256 256\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"${path}\" />\n    </svg>\n  `;\n}\n\n// Phosphor icon paths (from @phosphor-icons/core)\nexport const ICONS = {\n  gear: \"M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z\",\n  clock:\n    \"M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z\",\n  filmStrip:\n    \"M184,32H72A24,24,0,0,0,48,56V200a24,24,0,0,0,24,24H184a24,24,0,0,0,24-24V56A24,24,0,0,0,184,32Zm8,168a8,8,0,0,1-8,8H72a8,8,0,0,1-8-8V56a8,8,0,0,1,8-8H184a8,8,0,0,1,8,8ZM80,80a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Zm80,0a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z\",\n  filmSlate:\n    \"M216,48H40a16,16,0,0,0-16,16V192a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V64A16,16,0,0,0,216,48ZM40,64H216V192H40ZM56,88a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,88Zm144,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H208A8,8,0,0,1,200,88ZM56,168a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H64A8,8,0,0,1,56,168Zm144,0a8,8,0,0,1,8-8h16a8,8,0,0,1,0,16H208A8,8,0,0,1,200,168ZM128,120a8,8,0,0,1-8-8V96a8,8,0,0,1,16,0v16A8,8,0,0,1,128,120Zm0,48a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v16A8,8,0,0,1,128,168Z\",\n  speakerHigh:\n    \"M155.51,24.81a8,8,0,0,0-8.42.88L77.25,80H32A16,16,0,0,0,16,96v64a16,16,0,0,0,16,16H77.25l69.84,54.31A8,8,0,0,0,160,224V32A8,8,0,0,0,155.51,24.81ZM32,96H72v64H32ZM144,207.64,88.91,160H32V96H88.91L144,48.36Zm53.66-90.37a8,8,0,0,1,0-11.32,40,40,0,0,1,0,56.58,8,8,0,0,1-11.32-11.32,24,24,0,0,0,0-33.94A8,8,0,0,1,197.66,117.27Zm-17-45.25a8,8,0,0,1,11.32,0,72,72,0,0,1,0,101.82,8,8,0,0,1-11.32-11.32,56,56,0,0,0,0-79.18A8,8,0,0,1,180.66,72Z\",\n  textT:\n    \"M212,56V88a8,8,0,0,1-16,0V64H140V192h20a8,8,0,0,1,0,16H96a8,8,0,0,1,0-16h20V64H60V88a8,8,0,0,1-16,0V56a8,8,0,0,1,8-8H204A8,8,0,0,1,212,56Z\",\n  image:\n    \"M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,160H40V56H216V200ZM56,96a12,12,0,1,1,12,12A12,12,0,0,1,56,96Zm152,84H96l48-48,24,24,16-16Z\",\n  subtitles:\n    \"M224,48H32a16,16,0,0,0-16,16V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192ZM48,128a8,8,0,0,1,8-8H80a8,8,0,0,1,0,16H56A8,8,0,0,1,48,128Zm112,0a8,8,0,0,1,8-8h32a8,8,0,0,1,0,16H168A8,8,0,0,1,160,128Zm-64,32a8,8,0,0,1,8-8h96a8,8,0,0,1,0,16H104A8,8,0,0,1,96,160Z\",\n  microphone:\n    \"M128,24A48,48,0,0,0,80,72V128a48,48,0,0,0,96,0V72A48,48,0,0,0,128,24Zm32,104a32,32,0,0,1-64,0V72a32,32,0,0,1,64,0Zm48,0a8,8,0,0,1-16,0A96.11,96.11,0,0,0,128,32a8,8,0,0,1,0-16A112.12,112.12,0,0,1,240,128Zm-40,0a8,8,0,0,1-16,0A72.08,72.08,0,0,0,128,56a8,8,0,0,1,0-16A88.1,88.1,0,0,1,216,128Zm24,40a8,8,0,0,1-8,8H32a8,8,0,0,1,0-16H192A8,8,0,0,1,200,168Z\",\n  waveform:\n    \"M80,96a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v64a8,8,0,0,1-8,8H88a8,8,0,0,1-8-8Zm32-32a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v128a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Zm32,16a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v96a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Zm32-48a8,8,0,0,1,8-8h8a8,8,0,0,1,8,8v192a8,8,0,0,1-8,8h-8a8,8,0,0,1-8-8Z\",\n  code: \"M69.12,94.15,28.5,128l40.62,33.85a8,8,0,1,1-10.24,12.3l-48-40a8,8,0,0,1,0-12.3l48-40a8,8,0,0,1,10.24,12.3Zm176,27.7-48-40a8,8,0,0,0-10.24,12.3L227.5,128l-40.62,33.85a8,8,0,1,0,10.24,12.3l48-40a8,8,0,0,0,0-12.3Zm-82.39-89.37a8,8,0,0,0-10.25,4.79l-64,176a8,8,0,0,0,4.79,10.26A8.14,8.14,0,0,0,96,224a8,8,0,0,0,7.52-5.27l64-176A8,8,0,0,0,162.73,32.48Z\",\n  arrowLeft:\n    \"M192,128a8,8,0,0,1-2.34,5.66l-56,56a8,8,0,0,1-11.32-11.32L172.69,128,122.34,77.66a8,8,0,0,1,11.32-11.32l56,56A8,8,0,0,1,192,128Z\",\n  arrowRight:\n    \"M64,128a8,8,0,0,1,2.34-5.66l56-56a8,8,0,0,1,11.32,11.32L83.31,128l50.35,50.34a8,8,0,0,1-11.32,11.32l-56-56A8,8,0,0,1,64,128Z\",\n  lightning:\n    \"M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17Z\",\n} as const;\n"],"mappings":";;;;;;;AAMA,SAAgB,aAAa,MAAc,OAAO,IAAuB;AACvE,QAAO,IAAI;kBACK,KAAK,YAAY,KAAK;iBACvB,KAAK;;;;AAMtB,MAAa,QAAQ;CACnB,MAAM;CACN,OACE;CACF,WACE;CACF,WACE;CACF,aACE;CACF,OACE;CACF,OACE;CACF,WACE;CACF,YACE;CACF,UACE;CACF,MAAM;CACN,WACE;CACF,YACE;CACF,WACE;CACH"}

package/dist/gui/previewSettingsContext.d.ts

@@ -0,0 +1,18 @@
+import { PreviewPresentationMode, PreviewResolutionScale, RenderMode } from "../preview/previewSettings.js";
+
+//#region src/gui/previewSettingsContext.d.ts
+
+/**
+ * Settings for the preview workbench.
+ * Provided by EFWorkbench via context, consumable by any descendant.
+ */
+interface PreviewSettings {
+  presentationMode: PreviewPresentationMode;
+  renderMode: RenderMode;
+  resolutionScale: PreviewResolutionScale;
+  showStats: boolean;
+  showThumbnailTimestamps: boolean;
+}
+//#endregion
+export { PreviewSettings };
+//# sourceMappingURL=previewSettingsContext.d.ts.map

package/dist/gui/previewSettingsContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"previewSettingsContext.js","names":[],"sources":["../../src/gui/previewSettingsContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport type { PreviewPresentationMode, PreviewResolutionScale, RenderMode } from \"../preview/previewSettings.js\";\n\n/**\n * Settings for the preview workbench.\n * Provided by EFWorkbench via context, consumable by any descendant.\n */\nexport interface PreviewSettings {\n  presentationMode: PreviewPresentationMode;\n  renderMode: RenderMode;\n  resolutionScale: PreviewResolutionScale;\n  showStats: boolean;\n  thumbnailCacheMaxSize: number;\n}\n\n/**\n * Context for propagating preview settings through the component tree.\n * Provided by EFWorkbench, consumable by any descendant.\n */\nexport const previewSettingsContext = createContext<PreviewSettings>(\n  Symbol(\"preview-settings\")\n);\n"],"mappings":";;;;;;;AAmBA,MAAa,yBAAyB,cACpC,OAAO,mBAAmB,CAC3B"}
+{"version":3,"file":"previewSettingsContext.js","names":[],"sources":["../../src/gui/previewSettingsContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\nimport type {\n  PreviewPresentationMode,\n  PreviewResolutionScale,\n  RenderMode,\n} from \"../preview/previewSettings.js\";\n\n/**\n * Settings for the preview workbench.\n * Provided by EFWorkbench via context, consumable by any descendant.\n */\nexport interface PreviewSettings {\n  presentationMode: PreviewPresentationMode;\n  renderMode: RenderMode;\n  resolutionScale: PreviewResolutionScale;\n  showStats: boolean;\n  showThumbnailTimestamps: boolean;\n}\n\n/**\n * Context for propagating preview settings through the component tree.\n * Provided by EFWorkbench, consumable by any descendant.\n */\nexport const previewSettingsContext = createContext<PreviewSettings>(\n  Symbol(\"preview-settings\"),\n);\n"],"mappings":";;;;;;;AAuBA,MAAa,yBAAyB,cACpC,OAAO,mBAAmB,CAC3B"}

package/dist/gui/theme.js

@@ -0,0 +1,34 @@
+//#region src/gui/theme.ts
+/**
+* Editframe GUI Theme Utilities
+*
+* Shared utilities for working with theme tokens.
+*/
+/**
+* Fallback colors for element types when CSS variables are not available.
+* These match the default values in ef-theme.css.
+*/
+const fallbackTypeColors = {
+	video: "rgb(59, 130, 246)",
+	audio: "rgb(34, 197, 94)",
+	image: "rgb(168, 85, 247)",
+	text: "rgb(249, 115, 22)",
+	captions: "rgb(34, 197, 94)",
+	timegroup: "rgb(148, 163, 184)"
+};
+/**
+* Get the color for a specific element type from CSS variables.
+* Falls back to hardcoded values if the CSS variable is not defined.
+*
+* @param type - The element type (video, audio, image, text, captions, timegroup)
+* @param element - Optional element to compute styles from (defaults to document.documentElement)
+* @returns The color string (rgb format)
+*/
+function getElementTypeColor(type, element = document.documentElement) {
+	const varName = `--ef-color-type-${type}`;
+	return getComputedStyle(element).getPropertyValue(varName).trim() || fallbackTypeColors[type] || fallbackTypeColors.timegroup;
+}
+
+//#endregion
+export { getElementTypeColor };
+//# sourceMappingURL=theme.js.map

package/dist/gui/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","names":["fallbackTypeColors: Record<string, string>"],"sources":["../../src/gui/theme.ts"],"sourcesContent":["/**\n * Editframe GUI Theme Utilities\n *\n * Shared utilities for working with theme tokens.\n */\n\n/**\n * Fallback colors for element types when CSS variables are not available.\n * These match the default values in ef-theme.css.\n */\nconst fallbackTypeColors: Record<string, string> = {\n  video: \"rgb(59, 130, 246)\", // blue-500\n  audio: \"rgb(34, 197, 94)\", // green-500\n  image: \"rgb(168, 85, 247)\", // purple-500\n  text: \"rgb(249, 115, 22)\", // orange-500\n  captions: \"rgb(34, 197, 94)\", // green-500\n  timegroup: \"rgb(148, 163, 184)\", // slate-400\n};\n\n/**\n * Get the color for a specific element type from CSS variables.\n * Falls back to hardcoded values if the CSS variable is not defined.\n *\n * @param type - The element type (video, audio, image, text, captions, timegroup)\n * @param element - Optional element to compute styles from (defaults to document.documentElement)\n * @returns The color string (rgb format)\n */\nexport function getElementTypeColor(\n  type: string,\n  element: Element = document.documentElement,\n): string {\n  const varName = `--ef-color-type-${type}`;\n  const computedValue = getComputedStyle(element)\n    .getPropertyValue(varName)\n    .trim();\n\n  return (\n    computedValue || fallbackTypeColors[type] || fallbackTypeColors.timegroup!\n  );\n}\n\n/**\n * Get a theme token value from CSS variables.\n *\n * @param tokenName - The CSS variable name (with or without -- prefix)\n * @param element - Optional element to compute styles from (defaults to document.documentElement)\n * @returns The token value, or empty string if not defined\n */\nexport function getThemeToken(\n  tokenName: string,\n  element: Element = document.documentElement,\n): string {\n  const varName = tokenName.startsWith(\"--\") ? tokenName : `--${tokenName}`;\n  return getComputedStyle(element).getPropertyValue(varName).trim();\n}\n\n/**\n * Check if light mode is active on the given element or any ancestor.\n *\n * @param element - The element to check\n * @returns true if light mode is active\n */\nexport function isLightMode(element: Element): boolean {\n  let current: Element | null = element;\n  while (current) {\n    if (current.classList.contains(\"light\")) {\n      return true;\n    }\n    current = current.parentElement;\n  }\n  return false;\n}\n"],"mappings":";;;;;;;;;;AAUA,MAAMA,qBAA6C;CACjD,OAAO;CACP,OAAO;CACP,OAAO;CACP,MAAM;CACN,UAAU;CACV,WAAW;CACZ;;;;;;;;;AAUD,SAAgB,oBACd,MACA,UAAmB,SAAS,iBACpB;CACR,MAAM,UAAU,mBAAmB;AAKnC,QAJsB,iBAAiB,QAAQ,CAC5C,iBAAiB,QAAQ,CACzB,MAAM,IAGU,mBAAmB,SAAS,mBAAmB"}

package/dist/gui/timeline/EFTimeline.d.ts

@@ -1,9 +1,8 @@
 import { TemporalMixinInterface } from "../../elements/EFTemporal.js";
 import { SelectionContext } from "../../canvas/selection/selectionContext.js";
-import "../../elements/EFThumbnailStrip.js";
+import { TimelineState } from "./timelineStateContext.js";
 import "./tracks/preloadTracks.js";
 import "./EFTimelineRow.js";
-import { TimelineState } from "./timelineStateContext.js";
 import "../EFTimelineRuler.js";
 import * as lit34 from "lit";
 import { LitElement, PropertyValues, TemplateResult } from "lit";
@@ -77,6 +76,7 @@ declare class EFTimeline extends EFTimeline_base {
   private isLooping;
   private viewportScrollLeft;
   private _timelineState;
+  private _editingContext;
   private targetController?;
   private tracksScrollRef;
   private containerRef;

package/dist/gui/timeline/EFTimeline.js

@@ -1,17 +1,17 @@
+import { TWMixin } from "../TWMixin2.js";
 import { currentTimeContext } from "../currentTimeContext.js";
 import { durationContext } from "../durationContext.js";
 import { loopContext, playingContext } from "../playingContext.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { isEFTemporal } from "../../elements/EFTemporal.js";
 import { targetTemporalContext } from "../ContextMixin.js";
-import { TWMixin } from "../TWMixin2.js";
 import { TargetController } from "../../elements/TargetController.js";
 import { selectionContext } from "../../canvas/selection/selectionContext.js";
 import { findRootTemporal } from "../../elements/findRootTemporal.js";
 import { shouldRenderElement } from "../hierarchy/EFHierarchyItem.js";
 import { createDirectTemporalSubscription } from "../Controllable.js";
+import { createTimelineEditingContext, timelineEditingContext } from "./timelineEditingContext.js";
 import { DEFAULT_PIXELS_PER_MS, pixelsPerMsToZoom, pxToTime, timeToPx, timelineStateContext } from "./timelineStateContext.js";
-import "../../elements/EFThumbnailStrip.js";
 import "./tracks/preloadTracks.js";
 import { flattenHierarchy } from "./flattenHierarchy.js";
 import "./EFTimelineRow.js";
@@ -62,6 +62,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 			zoomIn: () => {},
 			zoomOut: () => {}
 		};
+		this._editingContext = createTimelineEditingContext();
 		this.tracksScrollRef = createRef();
 		this.containerRef = createRef();
 		this.playheadRef = createRef();
@@ -83,30 +84,19 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         min-height: 100px;
         
         /* Layout coordination via CSS custom properties */
-        --timeline-hierarchy-width: 200px;
-        --timeline-row-height: 24px;
-        --timeline-track-height: 24px;
+        --timeline-hierarchy-width: var(--ef-hierarchy-width, 200px);
+        --timeline-row-height: var(--ef-row-height, 24px);
+        --timeline-track-height: var(--ef-track-height, 24px);
         
-        /* Theme */
-        --timeline-bg: rgb(30 41 59);
-        --timeline-border: rgb(71 85 105);
-        --timeline-header-bg: rgb(51 65 85);
-        --timeline-text: rgb(226 232 240);
-        --timeline-ruler-bg: rgb(51 65 85);
-        --timeline-track-bg: rgb(51 65 85);
-        --timeline-track-hover: rgb(71 85 105);
-        --timeline-playhead: rgb(239 68 68);
-      }
-      
-      :host(.light) {
-        --timeline-bg: rgb(241 245 249);
-        --timeline-border: rgb(203 213 225);
-        --timeline-header-bg: rgb(226 232 240);
-        --timeline-text: rgb(30 41 59);
-        --timeline-ruler-bg: rgb(226 232 240);
-        --timeline-track-bg: rgb(226 232 240);
-        --timeline-track-hover: rgb(203 213 225);
-        --timeline-playhead: rgb(185 28 28);
+        /* Component tokens (reference globals from ef-theme.css) */
+        --timeline-bg: var(--ef-color-bg);
+        --timeline-border: var(--ef-color-border);
+        --timeline-header-bg: var(--ef-color-bg-panel);
+        --timeline-text: var(--ef-color-text);
+        --timeline-ruler-bg: var(--ef-color-bg-panel);
+        --timeline-track-bg: var(--ef-color-bg-inset);
+        --timeline-track-hover: var(--ef-color-hover);
+        --timeline-playhead: var(--ef-color-playhead);
       }
       
       .timeline-container {
@@ -149,8 +139,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         min-width: 32px;
         height: 32px;
         padding: 6px 10px;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border-subtle);
         border-radius: 6px;
         color: inherit;
         font-size: 14px;
@@ -162,8 +152,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
       }
       
       .control-btn:hover:not(:disabled) {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.3);
+        background: var(--ef-color-hover);
+        border-color: var(--ef-color-border);
       }
       
       .control-btn:disabled {
@@ -172,8 +162,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
       }
       
       .control-btn.active {
-        background: rgba(59, 130, 246, 0.6);
-        border-color: rgba(59, 130, 246, 0.8);
+        background: var(--ef-color-primary-subtle);
+        border-color: var(--ef-color-primary);
       }
       
       .time-display {
@@ -181,7 +171,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         font-size: 13px;
         font-weight: 500;
         padding: 6px 12px;
-        background: rgba(0, 0, 0, 0.3);
+        background: var(--ef-color-bg-elevated);
         border-radius: 6px;
         letter-spacing: 0.5px;
       }
@@ -198,8 +188,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         display: flex;
         align-items: center;
         justify-content: center;
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(255, 255, 255, 0.2);
+        background: var(--ef-color-bg-inset);
+        border: 1px solid var(--ef-color-border-subtle);
         border-radius: 6px;
         color: inherit;
         font-size: 18px;
@@ -209,8 +199,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
       }
       
       .zoom-btn:hover {
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.3);
+        background: var(--ef-color-hover);
+        border-color: var(--ef-color-border);
         transform: scale(1.05);
       }
       
@@ -376,8 +366,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         position: absolute;
         top: 0;
         bottom: 0;
-        background: rgba(59, 130, 246, 0.3);
-        border-left: 2px solid rgba(59, 130, 246, 0.7);
+        background: var(--ef-color-primary-subtle);
+        border-left: 2px solid var(--ef-color-primary);
         pointer-events: none;
       }
       
@@ -386,7 +376,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         align-items: center;
         justify-content: center;
         height: 100%;
-        color: rgba(148, 163, 184, 0.6);
+        color: var(--ef-color-text-subtle);
         font-style: italic;
       }
     `];
@@ -481,7 +471,6 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 		if (this.controlTarget && this.controlTarget !== "" && this.controlTarget !== "selection") {
 			const element = document.getElementById(this.controlTarget);
 			if (element && isEFTemporal(element)) return element;
-			if (this.isPlaying) console.warn("[EFTimeline] controlTarget set but element not found:", this.controlTarget, "isPlaying:", this.isPlaying);
 		}
 		const selectionCtx = this.getCanvasSelectionContext();
 		if (selectionCtx) {
@@ -493,9 +482,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 					if (rootTemporal) return rootTemporal;
 				}
 			}
-			if (this.isPlaying && selectedIds.length > 0) console.warn("[EFTimeline] Selection found but no temporal element:", selectedIds[0], "isPlaying:", this.isPlaying);
 		}
-		if (this.isPlaying) console.warn("[EFTimeline] targetTemporal is null during playback. controlTarget:", this.controlTarget, "target:", this.target, "hasSelectionContext:", !!this.getCanvasSelectionContext());
 		return null;
 	}
 	get durationMs() {
@@ -652,6 +639,13 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 	}
 	updated(changedProperties) {
 		super.updated(changedProperties);
+		if (changedProperties.has("showHierarchy")) if (this.showHierarchy) {
+			this.style.removeProperty("--timeline-hierarchy-width");
+			this.removeAttribute("hide-hierarchy");
+		} else {
+			this.style.setProperty("--timeline-hierarchy-width", "0px");
+			this.setAttribute("hide-hierarchy", "");
+		}
 		if (changedProperties.has("targetTemporal") || changedProperties.has("controlTarget")) this.subscribeToPlaybackController();
 		if (changedProperties.has("targetTemporal") || changedProperties.has("target")) requestAnimationFrame(() => {
 			this.restoreTimelineState();
@@ -806,7 +800,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 	/**
 	* Smooth playhead following - scrolls to keep playhead at a fixed screen position.
 	* This eliminates jitter by scrolling exactly as much as the playhead moves.
-	* 
+	*
 	* PERFORMANCE NOTE: We DO update viewportScrollLeft state here, but the context
 	* cascade is prevented in updateTimelineState() during playback. This means:
 	* - State stays in sync (for non-context consumers)
@@ -1033,6 +1027,10 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 	}
 	startPlayheadDrag(e) {
 		this.isDraggingPlayhead = true;
+		this._editingContext.setState({
+			mode: "scrubbing",
+			startTimeMs: this.currentTimeMs
+		});
 		const tracksScroll = this.tracksScrollRef.value;
 		if (tracksScroll) this.viewportScrollLeft = tracksScroll.scrollLeft;
 		const hierarchyWidth = this.showHierarchy ? _EFTimeline.HIERARCHY_WIDTH : 0;
@@ -1082,6 +1080,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 		};
 		const onUp = () => {
 			this.isDraggingPlayhead = false;
+			this._editingContext.setState({ mode: "idle" });
 			if (edgeScrollAnimationId) cancelAnimationFrame(edgeScrollAnimationId);
 			window.removeEventListener("pointermove", onMove);
 			window.removeEventListener("pointerup", onUp);
@@ -1101,8 +1100,22 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 		if (!this.showPlaybackControls) return nothing;
 		return html`
       <div class="playback-controls">
-        ${this.isPlaying ? html`<button class="control-btn" @click=${this.handlePause} title="Pause">⏸</button>` : html`<button class="control-btn" @click=${this.handlePlay} title="Play">▶</button>`}
-        <button class="control-btn ${this.isLooping ? "active" : ""}" @click=${this.handleToggleLoop} title="Loop">🔁</button>
+        ${this.isPlaying ? html`<button class="control-btn" @click=${this.handlePause} title="Pause">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                  <rect x="4" y="3" width="3" height="10" rx="0.5"/>
+                  <rect x="9" y="3" width="3" height="10" rx="0.5"/>
+                </svg>
+              </button>` : html`<button class="control-btn" @click=${this.handlePlay} title="Play">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+                  <path d="M5 3.5v9l7-4.5z"/>
+                </svg>
+              </button>`}
+        <button class="control-btn ${this.isLooping ? "active" : ""}" @click=${this.handleToggleLoop} title="Loop">
+          <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+            <path d="M13.5 7.5H4.707l2.147-2.146a.5.5 0 0 0-.708-.708l-3 3a.5.5 0 0 0 0 .708l3 3a.5.5 0 0 0 .708-.708L4.707 8.5H13.5a1.5 1.5 0 0 1 0 3h-2a.5.5 0 0 0 0 1h2a2.5 2.5 0 0 0 0-5z"/>
+            <path d="M2.5 8.5a1.5 1.5 0 0 1 1.5-1.5h2a.5.5 0 0 0 0-1H4a2.5 2.5 0 0 0 0 5h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L12.793 9.5H4a1.5 1.5 0 0 1-1.5-1.5z"/>
+          </svg>
+        </button>
       </div>
     `;
 	}
@@ -1162,7 +1175,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
 	renderControls() {
 		if (!this.showControls) return nothing;
 		return html`
-      <div class="header">
+      <div class="header" part="header">
         <div class="controls">
           ${this.renderPlaybackControls()}
           ${this.renderTimeDisplay()}
@@ -1172,10 +1185,12 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
     `;
 	}
 	handleTrimChange(e) {
-		const { elementId, type, newValueMs } = e.detail;
+		const { elementId, value } = e.detail;
 		const element = this.targetElement?.querySelector(`#${elementId}`);
-		if (element) if (type === "start") element.trimStartMs = newValueMs;
-		else element.trimEndMs = newValueMs;
+		if (element) {
+			element.trimStartMs = value.startMs;
+			element.trimEndMs = value.endMs;
+		}
 	}
 	/**
 	* Handle row hover events - update canvas highlighted element.
@@ -1215,6 +1230,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
               depth=${row.depth}
               pixels-per-ms=${this.pixelsPerMs}
               ?enable-trim=${this.enableTrim}
+              ?hide-label=${!this.showHierarchy}
               .hideSelectors=${this.hideSelectors}
               .showSelectors=${this.showSelectors}
               .highlightedElement=${highlightedElement}
@@ -1240,7 +1256,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
         ${this.renderControls()}
         <div class="timeline-area">
           <!-- Tracks Viewport - Single scrollable container -->
-          <div class="tracks-viewport">
+          <div class="tracks-viewport" part="tracks">
             <div 
               class="tracks-scroll" 
               ${ref(this.tracksScrollRef)} 
@@ -1251,7 +1267,8 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
                 <div class="ruler-row" style="width: ${this.contentWidthPx + hierarchyWidth}px;">
                   ${this.showHierarchy ? html`<div class="ruler-spacer"></div>` : nothing}
                   <div 
-                    class="ruler-content" 
+                    class="ruler-content"
+                    part="ruler"
                     @pointerdown=${this.handleRulerPointerDown}
                   >
                     <ef-timeline-ruler
@@ -1280,7 +1297,7 @@ let EFTimeline = class EFTimeline$1 extends TWMixin(LitElement) {
                 <div class="playhead-layer">
                   ${this.renderFrameHighlight()}
                   ${this.showPlayhead ? html`
-                    <div ${ref(this.playheadRef)} class="playhead" style="left: ${playheadLeft - 1}px;">
+                    <div ${ref(this.playheadRef)} class="playhead" part="playhead" style="left: ${playheadLeft - 1}px;">
                       <div class="playhead-drag-target" @pointerdown=${this.handlePlayheadPointerDown}></div>
                     </div>
                   ` : nothing}
@@ -1350,6 +1367,7 @@ __decorate([state()], EFTimeline.prototype, "isPlaying", void 0);
 __decorate([state()], EFTimeline.prototype, "isLooping", void 0);
 __decorate([state()], EFTimeline.prototype, "viewportScrollLeft", void 0);
 __decorate([provide({ context: timelineStateContext }), state()], EFTimeline.prototype, "_timelineState", void 0);
+__decorate([provide({ context: timelineEditingContext }), state()], EFTimeline.prototype, "_editingContext", void 0);
 __decorate([consume({
 	context: selectionContext,
 	subscribe: true