@editframe/elements 0.37.3-beta → 0.38.1

package/dist/gui/timeline/EFTimelineRow.js

@@ -1,14 +1,17 @@
+import { TWMixin } from "../TWMixin2.js";
 import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.95.0/helpers/decorate.js";
 import { isEFTemporal } from "../../elements/EFTemporal.js";
-import { TWMixin } from "../TWMixin2.js";
 import { EFAudio } from "../../elements/EFAudio.js";
 import { EFVideo } from "../../elements/EFVideo.js";
 import { EFCaptions } from "../../elements/EFCaptions.js";
 import { EFImage } from "../../elements/EFImage.js";
 import { EFText } from "../../elements/EFText.js";
 import { ICONS, phosphorIcon } from "../icons.js";
+import { getElementTypeColor } from "../theme.js";
+import { timelineEditingContext } from "./timelineEditingContext.js";
 import { renderTrackChildren } from "./tracks/renderTrackChildren.js";
 import { EFTimegroup } from "../../elements/EFTimegroup.js";
+import { consume } from "@lit/context";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -21,9 +24,11 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 		this.depth = 0;
 		this.pixelsPerMs = .04;
 		this.enableTrim = false;
+		this.hideLabel = false;
 		this.highlightedElement = null;
 		this.selectedIds = /* @__PURE__ */ new Set();
 		this.handleMouseEnter = () => {
+			if (this.editingContext && !this.editingContext.canInteract()) return;
 			this.dispatchEvent(new CustomEvent("row-hover", {
 				detail: { element: this.element },
 				bubbles: true,
@@ -31,6 +36,7 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 			}));
 		};
 		this.handleMouseLeave = () => {
+			if (this.editingContext && !this.editingContext.canInteract()) return;
 			this.dispatchEvent(new CustomEvent("row-hover", {
 				detail: { element: null },
 				bubbles: true,
@@ -55,7 +61,17 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
       :host {
         display: flex;
         min-height: var(--timeline-row-height, 28px);
-        border-bottom: 1px solid rgba(71, 85, 105, 0.4);
+        border-bottom: 1px solid var(--ef-color-border-subtle);
+      }
+
+      :host(.nested-timegroup) {
+        min-height: 18px;
+        --timeline-track-height: 14px;
+      }
+
+      :host(.nested-timegroup) .row-label {
+        font-size: 10px;
+        opacity: 0.7;
       }
 
       /* Root timegroup row with filmstrip - taller to show thumbnails */
@@ -67,8 +83,8 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
         top: 24px;
         /* Higher z-index than regular row labels (z-index: 8) so everything scrolls underneath */
         z-index: 15;
-        background: var(--timeline-bg, rgb(30 41 59));
-        border-bottom: 1px solid rgba(71, 85, 105, 0.6);
+        background: var(--timeline-bg, var(--ef-color-bg));
+        border-bottom: 1px solid var(--ef-color-border);
       }
 
       /* Root timegroup label needs higher z-index to stay above other labels when scrolling */
@@ -78,22 +94,22 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 
       /* Hover state - this row is directly hovered */
       :host(.hovered) {
-        background: rgba(59, 130, 246, 0.1);
+        background: var(--ef-color-hover);
       }
 
       /* Ancestor hovered - a descendant of this row is hovered */
       :host(.ancestor-hovered) {
-        background: rgba(59, 130, 246, 0.05);
+        background: var(--ef-color-selected-subtle);
       }
 
       /* Descendant hovered - an ancestor of this row is hovered */
       :host(.descendant-hovered) {
-        background: rgba(59, 130, 246, 0.03);
+        background: var(--ef-color-selected-subtle);
       }
 
       /* Selected state */
       :host(.selected) {
-        background: rgba(59, 130, 246, 0.2);
+        background: var(--ef-color-selected);
       }
       
       :host(.selected) .row-label {
@@ -102,7 +118,7 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 
       /* Ancestor has selected descendant */
       :host(.ancestor-selected) {
-        background: rgba(59, 130, 246, 0.1);
+        background: var(--ef-color-selected-subtle);
       }
 
       .row-label {
@@ -112,31 +128,38 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
         z-index: 8;
         width: var(--timeline-hierarchy-width, 200px);
         flex-shrink: 0;
-        background: rgb(38, 50, 68);
-        border-right: 1px solid rgba(71, 85, 105, 0.5);
+        background: var(--ef-color-bg-panel);
+        border-right: 1px solid var(--ef-color-border-subtle);
         display: flex;
         align-items: center;
         font-size: 11px;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
-        color: rgba(226, 232, 240, 0.9);
+        color: var(--ef-color-text);
         cursor: pointer;
         transition: background-color 0.1s ease;
       }
 
+      /* Hide label column when hierarchy is disabled */
+      :host([hide-label]) .row-label {
+        display: none;
+      }
+
       .row-label:hover {
-        background: rgb(51, 65, 85);
+        background: color-mix(in srgb, var(--ef-color-bg-panel) 70%, var(--ef-color-hover) 30%);
       }
 
       :host(.hovered) .row-label {
-        background: rgb(55, 90, 150);
-        color: white;
+        background: var(--ef-color-bg-elevated);
+        border-left: 3px solid var(--ef-color-primary);
+        padding-left: calc(var(--indent, 0px) - 3px);
       }
 
       :host(.selected) .row-label {
-        background: rgb(45, 85, 140);
-        color: white;
+        background: var(--ef-color-bg-elevated);
+        border-left: 3px solid var(--ef-color-primary);
+        padding-left: calc(var(--indent, 0px) - 3px);
       }
 
       .row-track {
@@ -204,7 +227,9 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 		}
 		if (changedProperties.has("element")) {
 			const isRoot = this.element instanceof EFTimegroup && this.element.isRootTimegroup;
+			const isNested = this.element instanceof EFTimegroup && !this.element.isRootTimegroup;
 			this.classList.toggle("root-timegroup", isRoot);
+			this.classList.toggle("nested-timegroup", isNested);
 		}
 	}
 	getElementType(element) {
@@ -216,18 +241,6 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 		if (element instanceof EFTimegroup) return "timegroup";
 		return "unknown";
 	}
-	getElementTypeColor(type) {
-		const colors = {
-			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)",
-			unknown: "rgb(148, 163, 184)"
-		};
-		return colors[type] || colors.unknown;
-	}
 	getElementIcon(type) {
 		const iconMap = {
 			video: phosphorIcon(ICONS.filmStrip, 14),
@@ -294,7 +307,7 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
         .showSelectors=${this.showSelectors}
       ></ef-timegroup-track>`;
 		}
-		return html`${renderTrackChildren([this.element], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true, this.enableTrim, true)}`;
+		return html`${renderTrackChildren([this.element], this.pixelsPerMs, this.hideSelectors, this.showSelectors, true, this.enableTrim)}`;
 	}
 	connectedCallback() {
 		super.connectedCallback();
@@ -313,11 +326,12 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
 		const type = this.getElementType(this.element);
 		const label = this.getElementLabel(this.element);
 		const detail = this.getElementDetail(this.element);
-		const typeColor = this.getElementTypeColor(type);
+		const typeColor = getElementTypeColor(type, this);
 		const icon = this.getElementIcon(type);
 		return html`
       <div
         class="row-label"
+        part="label"
         style=${styleMap({
 			paddingLeft: `${this.depth * INDENT_PX}px`,
 			borderLeftColor: typeColor,
@@ -335,7 +349,7 @@ let EFTimelineRow = class EFTimelineRow$1 extends TWMixin(LitElement) {
           </span>
         ` : nothing}
       </div>
-      <div class="row-track">${this.renderTrack()}</div>
+      <div class="row-track" part="track">${this.renderTrack()}</div>
     `;
 	}
 };
@@ -352,6 +366,11 @@ __decorate([property({
 	type: Boolean,
 	attribute: "enable-trim"
 })], EFTimelineRow.prototype, "enableTrim", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "hide-label",
+	reflect: true
+})], EFTimelineRow.prototype, "hideLabel", void 0);
 __decorate([property({
 	type: Array,
 	attribute: false
@@ -368,6 +387,10 @@ __decorate([property({
 	type: Object,
 	attribute: false
 })], EFTimelineRow.prototype, "selectedIds", void 0);
+__decorate([consume({
+	context: timelineEditingContext,
+	subscribe: true
+})], EFTimelineRow.prototype, "editingContext", void 0);
 EFTimelineRow = __decorate([customElement("ef-timeline-row")], EFTimelineRow);
 
 //#endregion

package/dist/gui/timeline/EFTimelineRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"EFTimelineRow.js","names":["EFTimelineRow","colors: Record<string, string>","iconMap: Record<string, TemplateResult>"],"sources":["../../../src/gui/timeline/EFTimelineRow.ts"],"sourcesContent":["import {\n  css,\n  html,\n  LitElement,\n  nothing,\n  type PropertyValues,\n  type TemplateResult,\n} from \"lit\";\nimport { customElement, property } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../elements/EFVideo.js\";\nimport { EFAudio } from \"../../elements/EFAudio.js\";\nimport { EFImage } from \"../../elements/EFImage.js\";\nimport { EFText } from \"../../elements/EFText.js\";\nimport { EFCaptions } from \"../../elements/EFCaptions.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport { renderTrackChildren } from \"./tracks/renderTrackChildren.js\";\nimport { phosphorIcon, ICONS } from \"../icons.js\";\n// NOTE: Track components (ef-timegroup-track, etc.) are NOT imported here\n// to avoid circular dependencies with TrackItem. They must be registered before\n// EFTimelineRow is used. See preloadTracks.ts for the registration sequence.\n\nconst INDENT_PX = 16;\n\n/**\n * EFTimelineRow - A unified timeline row containing both label and track\n *\n * This component renders a single row in the timeline with:\n * - A sticky label on the left (stays fixed during horizontal scroll)\n * - Track content on the right (scrolls horizontally with the timeline)\n *\n * Heights are determined by content, not hardcoded.\n */\n@customElement(\"ef-timeline-row\")\nexport class EFTimelineRow extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        min-height: var(--timeline-row-height, 28px);\n        border-bottom: 1px solid rgba(71, 85, 105, 0.4);\n      }\n\n      /* Root timegroup row with filmstrip - taller to show thumbnails */\n      :host(.root-timegroup) {\n        min-height: 52px;\n        height: 52px;\n        /* Sticky at top below ruler (ruler is 24px) */\n        position: sticky;\n        top: 24px;\n        /* Higher z-index than regular row labels (z-index: 8) so everything scrolls underneath */\n        z-index: 15;\n        background: var(--timeline-bg, rgb(30 41 59));\n        border-bottom: 1px solid rgba(71, 85, 105, 0.6);\n      }\n\n      /* Root timegroup label needs higher z-index to stay above other labels when scrolling */\n      :host(.root-timegroup) .row-label {\n        z-index: 16;\n      }\n\n      /* Hover state - this row is directly hovered */\n      :host(.hovered) {\n        background: rgba(59, 130, 246, 0.1);\n      }\n\n      /* Ancestor hovered - a descendant of this row is hovered */\n      :host(.ancestor-hovered) {\n        background: rgba(59, 130, 246, 0.05);\n      }\n\n      /* Descendant hovered - an ancestor of this row is hovered */\n      :host(.descendant-hovered) {\n        background: rgba(59, 130, 246, 0.03);\n      }\n\n      /* Selected state */\n      :host(.selected) {\n        background: rgba(59, 130, 246, 0.2);\n      }\n      \n      :host(.selected) .row-label {\n        font-weight: 500;\n      }\n\n      /* Ancestor has selected descendant */\n      :host(.ancestor-selected) {\n        background: rgba(59, 130, 246, 0.1);\n      }\n\n      .row-label {\n        position: sticky;\n        left: 0;\n        /* Lower z-index so labels scroll underneath the sticky root timegroup row (z-index: 15) */\n        z-index: 8;\n        width: var(--timeline-hierarchy-width, 200px);\n        flex-shrink: 0;\n        background: rgb(38, 50, 68);\n        border-right: 1px solid rgba(71, 85, 105, 0.5);\n        display: flex;\n        align-items: center;\n        font-size: 11px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: rgba(226, 232, 240, 0.9);\n        cursor: pointer;\n        transition: background-color 0.1s ease;\n      }\n\n      .row-label:hover {\n        background: rgb(51, 65, 85);\n      }\n\n      :host(.hovered) .row-label {\n        background: rgb(55, 90, 150);\n        color: white;\n      }\n\n      :host(.selected) .row-label {\n        background: rgb(45, 85, 140);\n        color: white;\n      }\n\n      .row-track {\n        flex: 1;\n        position: relative;\n        min-width: 0;\n      }\n      \n      :host(:first-child) .row-track::before {\n        display: none;\n      }\n      \n      /* Grouping indicator for nested elements */\n      .row-track::after {\n        content: \"\";\n        position: absolute;\n        left: -12px;\n        top: 0;\n        bottom: 0;\n        width: 2px;\n        background: var(--timeline-border, rgb(71 85 105));\n        opacity: 0.2;\n        z-index: 0;\n      }\n      \n      :host(:first-child) .row-track::after {\n        display: none;\n      }\n    `,\n  ];\n\n  @property({ type: Object, attribute: false })\n  element!: TemporalMixinInterface & Element;\n\n  @property({ type: Number })\n  depth = 0;\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Boolean, attribute: \"enable-trim\" })\n  enableTrim = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  /**\n   * The currently highlighted element from canvas (source of truth).\n   * Passed from parent timeline which reads it from canvas.\n   */\n  @property({ type: Object, attribute: false })\n  highlightedElement: Element | null = null;\n\n  @property({ type: Object, attribute: false })\n  selectedIds: ReadonlySet<string> = new Set();\n\n  // Derived interaction states (computed on-demand)\n  private get isHovered(): boolean {\n    return this.highlightedElement === this.element;\n  }\n\n  private get isSelected(): boolean {\n    const elementId = (this.element as unknown as HTMLElement)?.id;\n    return elementId ? this.selectedIds.has(elementId) : false;\n  }\n\n  private get isAncestorSelected(): boolean {\n    if (!this.element) return false;\n    // Check if this element contains any selected element\n    const elementAsHTMLElement = this.element as unknown as HTMLElement;\n    for (const selectedId of this.selectedIds) {\n      const selectedElement = document.getElementById(selectedId);\n      if (\n        selectedElement &&\n        elementAsHTMLElement.contains(selectedElement) &&\n        selectedElement !== elementAsHTMLElement\n      ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  private get isAncestorHovered(): boolean {\n    if (!this.highlightedElement || !this.element) return false;\n    // This row's element contains the highlighted element (highlighted is a descendant)\n    return (\n      this.element !== this.highlightedElement &&\n      this.element.contains(this.highlightedElement)\n    );\n  }\n\n  private get isDescendantHovered(): boolean {\n    if (!this.highlightedElement || !this.element) return false;\n    // The highlighted element contains this row's element (highlighted is an ancestor)\n    return (\n      this.element !== this.highlightedElement &&\n      this.highlightedElement.contains(this.element)\n    );\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Update host classes based on interaction state\n    if (\n      changedProperties.has(\"highlightedElement\") ||\n      changedProperties.has(\"element\")\n    ) {\n      this.classList.toggle(\"hovered\", this.isHovered);\n      this.classList.toggle(\"ancestor-hovered\", this.isAncestorHovered);\n      this.classList.toggle(\"descendant-hovered\", this.isDescendantHovered);\n    }\n\n    // Update selection classes\n    if (\n      changedProperties.has(\"selectedIds\") ||\n      changedProperties.has(\"element\")\n    ) {\n      this.classList.toggle(\"selected\", this.isSelected);\n      this.classList.toggle(\"ancestor-selected\", this.isAncestorSelected);\n    }\n\n    // Update root timegroup class for filmstrip rows\n    if (changedProperties.has(\"element\")) {\n      const isRoot = this.element instanceof EFTimegroup && this.element.isRootTimegroup;\n      this.classList.toggle(\"root-timegroup\", isRoot);\n    }\n  }\n\n  private handleMouseEnter = (): void => {\n    this.dispatchEvent(\n      new CustomEvent(\"row-hover\", {\n        detail: { element: this.element },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleMouseLeave = (): void => {\n    this.dispatchEvent(\n      new CustomEvent(\"row-hover\", {\n        detail: { element: null },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleClick = (e: Event): void => {\n    e.stopPropagation();\n    const elementId = (this.element as unknown as HTMLElement)?.id;\n    if (elementId) {\n      this.dispatchEvent(\n        new CustomEvent(\"row-select\", {\n          detail: { elementId, element: this.element },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  };\n\n  private getElementType(element: Element): string {\n    if (element instanceof EFVideo) return \"video\";\n    if (element instanceof EFAudio) return \"audio\";\n    if (element instanceof EFImage) return \"image\";\n    if (element instanceof EFText) return \"text\";\n    if (element instanceof EFCaptions) return \"captions\";\n    if (element instanceof EFTimegroup) return \"timegroup\";\n    return \"unknown\";\n  }\n\n  private getElementTypeColor(type: string): string {\n    const colors: Record<string, string> = {\n      video: \"rgb(59, 130, 246)\",     // Blue\n      audio: \"rgb(34, 197, 94)\",      // Green\n      image: \"rgb(168, 85, 247)\",     // Purple\n      text: \"rgb(249, 115, 22)\",      // Orange\n      captions: \"rgb(34, 197, 94)\",   // Green (like audio/subtitles)\n      timegroup: \"rgb(148, 163, 184)\", // Gray\n      unknown: \"rgb(148, 163, 184)\",\n    };\n    return colors[type] || colors.unknown!;\n  }\n\n  private getElementIcon(type: string): TemplateResult {\n    const iconMap: Record<string, TemplateResult> = {\n      video: phosphorIcon(ICONS.filmStrip, 14),\n      audio: phosphorIcon(ICONS.speakerHigh, 14),\n      image: phosphorIcon(ICONS.image, 14),\n      text: phosphorIcon(ICONS.textT, 14),\n      captions: phosphorIcon(ICONS.subtitles, 14),\n      timegroup: phosphorIcon(ICONS.filmSlate, 14),\n      unknown: phosphorIcon(ICONS.code, 14),\n    };\n    return iconMap[type] ?? iconMap.unknown!;\n  }\n\n  private getElementLabel(element: Element): string {\n    const id = element.id || \"\";\n    const type = this.getElementType(element);\n    \n    // If element has a meaningful ID (not auto-generated), use it\n    if (id && !id.includes(\"-\") && !id.match(/^\\d+$/)) {\n      return id;\n    }\n    \n    // For auto-generated IDs, create a friendly name based on type\n    // Count siblings of same type to generate \"Video 1\", \"Video 2\", etc.\n    const parent = element.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (child) => this.getElementType(child) === type\n      );\n      const index = siblings.indexOf(element) + 1;\n      const typeLabels: Record<string, string> = {\n        video: \"Video\",\n        audio: \"Audio\",\n        image: \"Image\",\n        text: \"Text\",\n        captions: \"Captions\",\n        timegroup: \"Composition\",\n        unknown: \"Layer\",\n      };\n      const label = typeLabels[type] || \"Layer\";\n      \n      // If there's only one of this type, don't add number\n      if (siblings.length === 1) {\n        return label;\n      }\n      return `${label} ${index}`;\n    }\n    \n    // Fallback: capitalize the type\n    return type.charAt(0).toUpperCase() + type.slice(1);\n  }\n\n  /**\n   * Get additional detail text for the label (mode, preview, etc.)\n   */\n  private getElementDetail(element: Element): string | null {\n    if (element instanceof EFTimegroup) {\n      const mode = element.mode || \"fixed\";\n      const modeLabels: Record<string, string> = {\n        fixed: \"Fixed\",\n        sequence: \"Sequence\",\n        contain: \"Container\",\n      };\n      return modeLabels[mode] || mode;\n    }\n    if (element instanceof EFText) {\n      // Get text preview\n      const textContent = Array.from(element.childNodes)\n        .filter(node => node.nodeType === Node.TEXT_NODE)\n        .map(node => node.textContent?.trim())\n        .filter(Boolean)\n        .join(\" \");\n      if (textContent) {\n        return textContent.length > 20 ? textContent.slice(0, 20) + \"...\" : textContent;\n      }\n    }\n    return null;\n  }\n\n  private renderTrack(): TemplateResult | typeof nothing {\n    if (!this.element || !isEFTemporal(this.element)) return nothing;\n\n    // For timegroups, use skip-children since children get their own rows\n    if (this.element instanceof EFTimegroup) {\n      // Show filmstrip for root timegroups (no parent timegroup)\n      // Use the timegroup's own isRootTimegroup property for reliability\n      const showFilmstrip = this.element.isRootTimegroup;\n      return html`<ef-timegroup-track\n        .element=${this.element}\n        pixels-per-ms=${this.pixelsPerMs}\n        ?enable-trim=${this.enableTrim}\n        ?skip-children=${true}\n        ?show-filmstrip=${showFilmstrip}\n        .hideSelectors=${this.hideSelectors}\n        .showSelectors=${this.showSelectors}\n      ></ef-timegroup-track>`;\n    }\n\n    return html`${renderTrackChildren(\n      [this.element as unknown as Element],\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      true, // skipRootFiltering - the row itself handles filtering\n      this.enableTrim,\n      true, // useAbsolutePosition - flat row architecture needs absolute positioning\n    )}`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.addEventListener(\"click\", this.handleClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.removeEventListener(\"click\", this.handleClick);\n  }\n\n  render() {\n    if (!this.element) return nothing;\n\n    const type = this.getElementType(this.element);\n    const label = this.getElementLabel(this.element);\n    const detail = this.getElementDetail(this.element);\n    const typeColor = this.getElementTypeColor(type);\n    const icon = this.getElementIcon(type);\n    const indentPx = this.depth * INDENT_PX;\n\n    return html`\n      <div\n        class=\"row-label\"\n        style=${styleMap({ \n          paddingLeft: `${indentPx}px`,\n          borderLeftColor: typeColor,\n          borderLeftWidth: \"3px\",\n          borderLeftStyle: \"solid\",\n        })}\n      >\n        <span style=\"color: ${typeColor}; opacity: 0.9; margin-right: 6px; flex-shrink: 0;\">\n          ${icon}\n        </span>\n        <span style=\"flex-shrink: 0;\">${label}</span>\n        ${detail ? html`\n          <span style=\"margin-left: 6px; opacity: 0.6; font-size: 10px; overflow: hidden; text-overflow: ellipsis;\">\n            ${detail}\n          </span>\n        ` : nothing}\n      </div>\n      <div class=\"row-track\">${this.renderTrack()}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timeline-row\": EFTimelineRow;\n  }\n}\n\n"],"mappings":"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"}
+{"version":3,"file":"EFTimelineRow.js","names":["EFTimelineRow","iconMap: Record<string, TemplateResult>"],"sources":["../../../src/gui/timeline/EFTimelineRow.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 } from \"lit/decorators.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\n\nimport {\n  isEFTemporal,\n  type TemporalMixinInterface,\n} from \"../../elements/EFTemporal.js\";\nimport { EFTimegroup } from \"../../elements/EFTimegroup.js\";\nimport { EFVideo } from \"../../elements/EFVideo.js\";\nimport { EFAudio } from \"../../elements/EFAudio.js\";\nimport { EFImage } from \"../../elements/EFImage.js\";\nimport { EFText } from \"../../elements/EFText.js\";\nimport { EFCaptions } from \"../../elements/EFCaptions.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport { renderTrackChildren } from \"./tracks/renderTrackChildren.js\";\nimport { phosphorIcon, ICONS } from \"../icons.js\";\nimport {\n  timelineEditingContext,\n  type TimelineEditingContext,\n} from \"./timelineEditingContext.js\";\nimport { getElementTypeColor } from \"../theme.js\";\n// NOTE: Track components (ef-timegroup-track, etc.) are NOT imported here\n// to avoid circular dependencies with TrackItem. They must be registered before\n// EFTimelineRow is used. See preloadTracks.ts for the registration sequence.\n\nconst INDENT_PX = 16;\n\n/**\n * EFTimelineRow - A unified timeline row containing both label and track\n *\n * This component renders a single row in the timeline with:\n * - A sticky label on the left (stays fixed during horizontal scroll)\n * - Track content on the right (scrolls horizontally with the timeline)\n *\n * Heights are determined by content, not hardcoded.\n */\n@customElement(\"ef-timeline-row\")\nexport class EFTimelineRow extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        min-height: var(--timeline-row-height, 28px);\n        border-bottom: 1px solid var(--ef-color-border-subtle);\n      }\n\n      :host(.nested-timegroup) {\n        min-height: 18px;\n        --timeline-track-height: 14px;\n      }\n\n      :host(.nested-timegroup) .row-label {\n        font-size: 10px;\n        opacity: 0.7;\n      }\n\n      /* Root timegroup row with filmstrip - taller to show thumbnails */\n      :host(.root-timegroup) {\n        min-height: 52px;\n        height: 52px;\n        /* Sticky at top below ruler (ruler is 24px) */\n        position: sticky;\n        top: 24px;\n        /* Higher z-index than regular row labels (z-index: 8) so everything scrolls underneath */\n        z-index: 15;\n        background: var(--timeline-bg, var(--ef-color-bg));\n        border-bottom: 1px solid var(--ef-color-border);\n      }\n\n      /* Root timegroup label needs higher z-index to stay above other labels when scrolling */\n      :host(.root-timegroup) .row-label {\n        z-index: 16;\n      }\n\n      /* Hover state - this row is directly hovered */\n      :host(.hovered) {\n        background: var(--ef-color-hover);\n      }\n\n      /* Ancestor hovered - a descendant of this row is hovered */\n      :host(.ancestor-hovered) {\n        background: var(--ef-color-selected-subtle);\n      }\n\n      /* Descendant hovered - an ancestor of this row is hovered */\n      :host(.descendant-hovered) {\n        background: var(--ef-color-selected-subtle);\n      }\n\n      /* Selected state */\n      :host(.selected) {\n        background: var(--ef-color-selected);\n      }\n      \n      :host(.selected) .row-label {\n        font-weight: 500;\n      }\n\n      /* Ancestor has selected descendant */\n      :host(.ancestor-selected) {\n        background: var(--ef-color-selected-subtle);\n      }\n\n      .row-label {\n        position: sticky;\n        left: 0;\n        /* Lower z-index so labels scroll underneath the sticky root timegroup row (z-index: 15) */\n        z-index: 8;\n        width: var(--timeline-hierarchy-width, 200px);\n        flex-shrink: 0;\n        background: var(--ef-color-bg-panel);\n        border-right: 1px solid var(--ef-color-border-subtle);\n        display: flex;\n        align-items: center;\n        font-size: 11px;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        color: var(--ef-color-text);\n        cursor: pointer;\n        transition: background-color 0.1s ease;\n      }\n\n      /* Hide label column when hierarchy is disabled */\n      :host([hide-label]) .row-label {\n        display: none;\n      }\n\n      .row-label:hover {\n        background: color-mix(in srgb, var(--ef-color-bg-panel) 70%, var(--ef-color-hover) 30%);\n      }\n\n      :host(.hovered) .row-label {\n        background: var(--ef-color-bg-elevated);\n        border-left: 3px solid var(--ef-color-primary);\n        padding-left: calc(var(--indent, 0px) - 3px);\n      }\n\n      :host(.selected) .row-label {\n        background: var(--ef-color-bg-elevated);\n        border-left: 3px solid var(--ef-color-primary);\n        padding-left: calc(var(--indent, 0px) - 3px);\n      }\n\n      .row-track {\n        flex: 1;\n        position: relative;\n        min-width: 0;\n      }\n      \n      :host(:first-child) .row-track::before {\n        display: none;\n      }\n      \n      /* Grouping indicator for nested elements */\n      .row-track::after {\n        content: \"\";\n        position: absolute;\n        left: -12px;\n        top: 0;\n        bottom: 0;\n        width: 2px;\n        background: var(--timeline-border, rgb(71 85 105));\n        opacity: 0.2;\n        z-index: 0;\n      }\n      \n      :host(:first-child) .row-track::after {\n        display: none;\n      }\n    `,\n  ];\n\n  @property({ type: Object, attribute: false })\n  element!: TemporalMixinInterface & Element;\n\n  @property({ type: Number })\n  depth = 0;\n\n  @property({ type: Number, attribute: \"pixels-per-ms\" })\n  pixelsPerMs = 0.04;\n\n  @property({ type: Boolean, attribute: \"enable-trim\" })\n  enableTrim = false;\n\n  @property({ type: Boolean, attribute: \"hide-label\", reflect: true })\n  hideLabel = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  /**\n   * The currently highlighted element from canvas (source of truth).\n   * Passed from parent timeline which reads it from canvas.\n   */\n  @property({ type: Object, attribute: false })\n  highlightedElement: Element | null = null;\n\n  @property({ type: Object, attribute: false })\n  selectedIds: ReadonlySet<string> = new Set();\n\n  @consume({ context: timelineEditingContext, subscribe: true })\n  editingContext?: TimelineEditingContext;\n\n  // Derived interaction states (computed on-demand)\n  private get isHovered(): boolean {\n    return this.highlightedElement === this.element;\n  }\n\n  private get isSelected(): boolean {\n    const elementId = (this.element as unknown as HTMLElement)?.id;\n    return elementId ? this.selectedIds.has(elementId) : false;\n  }\n\n  private get isAncestorSelected(): boolean {\n    if (!this.element) return false;\n    // Check if this element contains any selected element\n    const elementAsHTMLElement = this.element as unknown as HTMLElement;\n    for (const selectedId of this.selectedIds) {\n      const selectedElement = document.getElementById(selectedId);\n      if (\n        selectedElement &&\n        elementAsHTMLElement.contains(selectedElement) &&\n        selectedElement !== elementAsHTMLElement\n      ) {\n        return true;\n      }\n    }\n    return false;\n  }\n\n  private get isAncestorHovered(): boolean {\n    if (!this.highlightedElement || !this.element) return false;\n    // This row's element contains the highlighted element (highlighted is a descendant)\n    return (\n      this.element !== this.highlightedElement &&\n      this.element.contains(this.highlightedElement)\n    );\n  }\n\n  private get isDescendantHovered(): boolean {\n    if (!this.highlightedElement || !this.element) return false;\n    // The highlighted element contains this row's element (highlighted is an ancestor)\n    return (\n      this.element !== this.highlightedElement &&\n      this.highlightedElement.contains(this.element)\n    );\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Update host classes based on interaction state\n    if (\n      changedProperties.has(\"highlightedElement\") ||\n      changedProperties.has(\"element\")\n    ) {\n      this.classList.toggle(\"hovered\", this.isHovered);\n      this.classList.toggle(\"ancestor-hovered\", this.isAncestorHovered);\n      this.classList.toggle(\"descendant-hovered\", this.isDescendantHovered);\n    }\n\n    // Update selection classes\n    if (\n      changedProperties.has(\"selectedIds\") ||\n      changedProperties.has(\"element\")\n    ) {\n      this.classList.toggle(\"selected\", this.isSelected);\n      this.classList.toggle(\"ancestor-selected\", this.isAncestorSelected);\n    }\n\n    // Update root/nested timegroup classes\n    if (changedProperties.has(\"element\")) {\n      const isRoot =\n        this.element instanceof EFTimegroup && this.element.isRootTimegroup;\n      const isNested =\n        this.element instanceof EFTimegroup && !this.element.isRootTimegroup;\n      this.classList.toggle(\"root-timegroup\", isRoot);\n      this.classList.toggle(\"nested-timegroup\", isNested);\n    }\n  }\n\n  private handleMouseEnter = (): void => {\n    // Skip hover interactions during active editing operations (scrubbing, trimming, etc.)\n    if (this.editingContext && !this.editingContext.canInteract()) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"row-hover\", {\n        detail: { element: this.element },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleMouseLeave = (): void => {\n    // Skip hover interactions during active editing operations (scrubbing, trimming, etc.)\n    if (this.editingContext && !this.editingContext.canInteract()) {\n      return;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent(\"row-hover\", {\n        detail: { element: null },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  private handleClick = (e: Event): void => {\n    e.stopPropagation();\n    const elementId = (this.element as unknown as HTMLElement)?.id;\n    if (elementId) {\n      this.dispatchEvent(\n        new CustomEvent(\"row-select\", {\n          detail: { elementId, element: this.element },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  };\n\n  private getElementType(element: Element): string {\n    if (element instanceof EFVideo) return \"video\";\n    if (element instanceof EFAudio) return \"audio\";\n    if (element instanceof EFImage) return \"image\";\n    if (element instanceof EFText) return \"text\";\n    if (element instanceof EFCaptions) return \"captions\";\n    if (element instanceof EFTimegroup) return \"timegroup\";\n    return \"unknown\";\n  }\n\n  // Use shared type color utility from theme.ts\n  // This reads from CSS variables (--ef-color-type-video, etc.) defined in ef-theme.css\n\n  private getElementIcon(type: string): TemplateResult {\n    const iconMap: Record<string, TemplateResult> = {\n      video: phosphorIcon(ICONS.filmStrip, 14),\n      audio: phosphorIcon(ICONS.speakerHigh, 14),\n      image: phosphorIcon(ICONS.image, 14),\n      text: phosphorIcon(ICONS.textT, 14),\n      captions: phosphorIcon(ICONS.subtitles, 14),\n      timegroup: phosphorIcon(ICONS.filmSlate, 14),\n      unknown: phosphorIcon(ICONS.code, 14),\n    };\n    return iconMap[type] ?? iconMap.unknown!;\n  }\n\n  private getElementLabel(element: Element): string {\n    const id = element.id || \"\";\n    const type = this.getElementType(element);\n\n    // If element has a meaningful ID (not auto-generated), use it\n    if (id && !id.includes(\"-\") && !id.match(/^\\d+$/)) {\n      return id;\n    }\n\n    // For auto-generated IDs, create a friendly name based on type\n    // Count siblings of same type to generate \"Video 1\", \"Video 2\", etc.\n    const parent = element.parentElement;\n    if (parent) {\n      const siblings = Array.from(parent.children).filter(\n        (child) => this.getElementType(child) === type,\n      );\n      const index = siblings.indexOf(element) + 1;\n      const typeLabels: Record<string, string> = {\n        video: \"Video\",\n        audio: \"Audio\",\n        image: \"Image\",\n        text: \"Text\",\n        captions: \"Captions\",\n        timegroup: \"Composition\",\n        unknown: \"Layer\",\n      };\n      const label = typeLabels[type] || \"Layer\";\n\n      // If there's only one of this type, don't add number\n      if (siblings.length === 1) {\n        return label;\n      }\n      return `${label} ${index}`;\n    }\n\n    // Fallback: capitalize the type\n    return type.charAt(0).toUpperCase() + type.slice(1);\n  }\n\n  /**\n   * Get additional detail text for the label (mode, preview, etc.)\n   */\n  private getElementDetail(element: Element): string | null {\n    if (element instanceof EFTimegroup) {\n      const mode = element.mode || \"fixed\";\n      const modeLabels: Record<string, string> = {\n        fixed: \"Fixed\",\n        sequence: \"Sequence\",\n        contain: \"Container\",\n      };\n      return modeLabels[mode] || mode;\n    }\n    if (element instanceof EFText) {\n      // Get text preview\n      const textContent = Array.from(element.childNodes)\n        .filter((node) => node.nodeType === Node.TEXT_NODE)\n        .map((node) => node.textContent?.trim())\n        .filter(Boolean)\n        .join(\" \");\n      if (textContent) {\n        return textContent.length > 20\n          ? textContent.slice(0, 20) + \"...\"\n          : textContent;\n      }\n    }\n    return null;\n  }\n\n  private renderTrack(): TemplateResult | typeof nothing {\n    if (!this.element || !isEFTemporal(this.element)) return nothing;\n\n    // For timegroups, use skip-children since children get their own rows\n    if (this.element instanceof EFTimegroup) {\n      // Show filmstrip for root timegroups (no parent timegroup)\n      // Use the timegroup's own isRootTimegroup property for reliability\n      const showFilmstrip = this.element.isRootTimegroup;\n      return html`<ef-timegroup-track\n        .element=${this.element}\n        pixels-per-ms=${this.pixelsPerMs}\n        ?enable-trim=${this.enableTrim}\n        ?skip-children=${true}\n        ?show-filmstrip=${showFilmstrip}\n        .hideSelectors=${this.hideSelectors}\n        .showSelectors=${this.showSelectors}\n      ></ef-timegroup-track>`;\n    }\n\n    return html`${renderTrackChildren(\n      [this.element as unknown as Element],\n      this.pixelsPerMs,\n      this.hideSelectors,\n      this.showSelectors,\n      true, // skipRootFiltering - the row itself handles filtering\n      this.enableTrim,\n    )}`;\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.addEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.addEventListener(\"click\", this.handleClick);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener(\"mouseenter\", this.handleMouseEnter);\n    this.removeEventListener(\"mouseleave\", this.handleMouseLeave);\n    this.removeEventListener(\"click\", this.handleClick);\n  }\n\n  render() {\n    if (!this.element) return nothing;\n\n    const type = this.getElementType(this.element);\n    const label = this.getElementLabel(this.element);\n    const detail = this.getElementDetail(this.element);\n    const typeColor = getElementTypeColor(type, this);\n    const icon = this.getElementIcon(type);\n    const indentPx = this.depth * INDENT_PX;\n\n    return html`\n      <div\n        class=\"row-label\"\n        part=\"label\"\n        style=${styleMap({\n          paddingLeft: `${indentPx}px`,\n          borderLeftColor: typeColor,\n          borderLeftWidth: \"3px\",\n          borderLeftStyle: \"solid\",\n        })}\n      >\n        <span style=\"color: ${typeColor}; opacity: 0.9; margin-right: 6px; flex-shrink: 0;\">\n          ${icon}\n        </span>\n        <span style=\"flex-shrink: 0;\">${label}</span>\n        ${\n          detail\n            ? html`\n          <span style=\"margin-left: 6px; opacity: 0.6; font-size: 10px; overflow: hidden; text-overflow: ellipsis;\">\n            ${detail}\n          </span>\n        `\n            : nothing\n        }\n      </div>\n      <div class=\"row-track\" part=\"track\">${this.renderTrack()}</div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-timeline-row\": EFTimelineRow;\n  }\n}\n"],"mappings":"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"}

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

@@ -1,30 +1,44 @@
+import { TimelineEditingContext } from "./timelineEditingContext.js";
 import * as lit35 from "lit";
 import { LitElement } from "lit";
-import * as lit_html33 from "lit-html";
+import * as lit_html32 from "lit-html";
 
 //#region src/gui/timeline/TrimHandles.d.ts
+interface TrimValue {
+  startMs: number;
+  endMs: number;
+}
 interface TrimChangeDetail {
   elementId: string;
-  type: "start" | "end";
-  deltaMs: number;
-  newValueMs: number;
+  type: "start" | "end" | "region";
+  value: TrimValue;
 }
 declare const EFTrimHandles_base: typeof LitElement;
 declare class EFTrimHandles extends EFTrimHandles_base {
+  #private;
   static styles: lit35.CSSResult[];
+  mode: "standalone" | "track";
   elementId: string;
-  pixelsPerMs: number;
-  trimStartMs: number;
-  trimEndMs: number;
+  pixelsPerMs: number | null;
+  value: TrimValue;
   intrinsicDurationMs: number;
+  get trimStartMs(): number;
+  set trimStartMs(v: number);
+  get trimEndMs(): number;
+  set trimEndMs(v: number);
   showOverlays: boolean;
+  seekTarget: string;
+  editingContext?: TimelineEditingContext;
   private draggingHandle;
   private dragStartX;
   private dragStartValue;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
   private handlePointerDown;
+  private handleRegionPointerDown;
   private handlePointerMove;
   private handlePointerUp;
-  render(): lit_html33.TemplateResult<1>;
+  render(): lit_html32.TemplateResult<1>;
 }
 declare global {
   interface HTMLElementTagNameMap {
@@ -32,5 +46,5 @@ declare global {
   }
 }
 //#endregion
-export { EFTrimHandles, TrimChangeDetail };
+export { EFTrimHandles, TrimChangeDetail, TrimValue };
 //# sourceMappingURL=TrimHandles.d.ts.map