@editframe/elements 0.30.2-beta.0 → 0.31.0-beta.1

package/dist/gui/hierarchy/EFHierarchy.js

@@ -0,0 +1,338 @@
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { isEFTemporal } from "../../elements/EFTemporal.js";
+import { TWMixin } from "../TWMixin2.js";
+import { TargetController } from "../../elements/TargetController.js";
+import { selectionContext } from "../../canvas/selection/selectionContext.js";
+import { hierarchyContext } from "./hierarchyContext.js";
+import { renderHierarchyChildren } from "./EFHierarchyItem.js";
+import { consume, provide } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/gui/hierarchy/EFHierarchy.ts
+let EFHierarchy = class EFHierarchy$1 extends TWMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.target = "";
+		this.header = "";
+		this.showHeader = false;
+		this.targetElement = null;
+		this.hierarchyState = {
+			selectedElementId: null,
+			expandedIds: /* @__PURE__ */ new Set(),
+			draggedElementId: null,
+			dropTargetId: null,
+			dropPosition: null
+		};
+		this.hierarchyActions = {
+			select: (elementId) => {
+				const selectionCtx = this.getCanvasSelectionContext();
+				if (selectionCtx) if (elementId) {
+					const element = document.getElementById(elementId);
+					if (element) {
+						const canvas = element.closest("ef-canvas");
+						if (canvas && canvas.tryRegisterElement) canvas.tryRegisterElement(element);
+					}
+					selectionCtx.select(elementId);
+				} else selectionCtx.clear();
+				else this.hierarchyState = {
+					...this.hierarchyState,
+					selectedElementId: elementId
+				};
+				this.dispatchEvent(new CustomEvent("hierarchy-select", {
+					detail: { elementId },
+					bubbles: true,
+					composed: true
+				}));
+			},
+			toggleExpanded: (elementId) => {
+				const newExpanded = new Set(this.hierarchyState.expandedIds);
+				if (newExpanded.has(elementId)) newExpanded.delete(elementId);
+				else newExpanded.add(elementId);
+				this.hierarchyState = {
+					...this.hierarchyState,
+					expandedIds: newExpanded
+				};
+			},
+			setExpanded: (elementId, expanded) => {
+				const newExpanded = new Set(this.hierarchyState.expandedIds);
+				if (expanded) newExpanded.add(elementId);
+				else newExpanded.delete(elementId);
+				this.hierarchyState = {
+					...this.hierarchyState,
+					expandedIds: newExpanded
+				};
+			},
+			startDrag: (elementId) => {
+				this.hierarchyState = {
+					...this.hierarchyState,
+					draggedElementId: elementId
+				};
+			},
+			updateDropTarget: (targetId, position) => {
+				if (targetId === this.hierarchyState.draggedElementId) return;
+				this.hierarchyState = {
+					...this.hierarchyState,
+					dropTargetId: targetId,
+					dropPosition: position
+				};
+			},
+			endDrag: () => {
+				this.hierarchyState = {
+					...this.hierarchyState,
+					draggedElementId: null,
+					dropTargetId: null,
+					dropPosition: null
+				};
+			},
+			reorder: (sourceId, targetId, position) => {
+				this.dispatchEvent(new CustomEvent("hierarchy-reorder", {
+					detail: {
+						sourceId,
+						targetId,
+						position
+					},
+					bubbles: true,
+					composed: true
+				}));
+			}
+		};
+		this.providedContext = {
+			state: this.hierarchyState,
+			actions: this.hierarchyActions,
+			getCanvasSelectionContext: () => this.getCanvasSelectionContext(),
+			getHighlightedElement: () => this.getHighlightedElement(),
+			setHighlightedElement: (el) => this.setHighlightedElement(el)
+		};
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+        overflow: auto;
+        height: 100%;
+        font-size: 12px;
+        
+        --hierarchy-bg: rgb(30 41 59);
+        --hierarchy-border: rgb(71 85 105);
+        --hierarchy-text: rgb(226 232 240);
+        --hierarchy-hover-bg: rgba(148, 163, 184, 0.2);
+        --hierarchy-selected-bg: rgba(59, 130, 246, 0.3);
+        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.15);
+        --hierarchy-focused-bg: rgba(148, 163, 184, 0.4);
+        --hierarchy-drop-indicator: #3b82f6;
+      }
+      
+      :host(.light) {
+        --hierarchy-bg: rgb(241 245 249);
+        --hierarchy-border: rgb(203 213 225);
+        --hierarchy-text: rgb(30 41 59);
+        --hierarchy-hover-bg: rgba(100, 116, 139, 0.15);
+        --hierarchy-selected-bg: rgba(59, 130, 246, 0.2);
+        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.1);
+        --hierarchy-focused-bg: rgba(100, 116, 139, 0.25);
+      }
+      
+      .hierarchy-container {
+        background: var(--hierarchy-bg);
+        color: var(--hierarchy-text);
+        min-height: 100%;
+        padding: 4px 0;
+      }
+      
+      .header {
+        padding: 8px 12px;
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        color: rgba(148, 163, 184, 0.8);
+        border-bottom: 1px solid var(--hierarchy-border);
+        margin-bottom: 4px;
+      }
+      
+      .empty {
+        padding: 16px;
+        text-align: center;
+        color: rgba(148, 163, 184, 0.6);
+        font-style: italic;
+      }
+    `];
+	}
+	/**
+	* Get the target canvas element.
+	* The canvas is the source of truth for selection and highlight state.
+	*/
+	getCanvas() {
+		if (this.targetElement && this.targetElement.selectionContext) return this.targetElement;
+		if (this.target) {
+			const target = document.getElementById(this.target);
+			if (target && target.selectionContext) return target;
+		}
+		return null;
+	}
+	/**
+	* Get canvas selection context from the target canvas element.
+	* Used when hierarchy is a sibling of canvas (can't access via Lit context).
+	*/
+	getCanvasSelectionContext() {
+		if (this.canvasSelectionContext) return this.canvasSelectionContext;
+		return this.getCanvas()?.selectionContext;
+	}
+	/**
+	* Get the currently highlighted element from the canvas.
+	*/
+	getHighlightedElement() {
+		return this.getCanvas()?.highlightedElement ?? null;
+	}
+	/**
+	* Set the highlighted element on the canvas.
+	* Called when user hovers an item in the hierarchy.
+	*/
+	setHighlightedElement(element) {
+		this.getCanvas()?.setHighlightedElement(element);
+	}
+	getTargetElement() {
+		if (this.targetElement) return this.targetElement;
+		if (this.target) return document.getElementById(this.target);
+		return null;
+	}
+	getRootElements() {
+		const target = this.getTargetElement();
+		if (!target) return [];
+		if (isEFTemporal(target)) return [target];
+		return Array.from(target.children);
+	}
+	initializeExpandedState() {
+		const roots = this.getRootElements();
+		const newExpanded = /* @__PURE__ */ new Set();
+		const addExpandedIds = (element) => {
+			if (element.id) newExpanded.add(element.id);
+			for (const child of Array.from(element.children)) if (child.children.length > 0) addExpandedIds(child);
+		};
+		for (const root of roots) addExpandedIds(root);
+		this.hierarchyState = {
+			...this.hierarchyState,
+			expandedIds: newExpanded
+		};
+	}
+	select(elementId) {
+		this.hierarchyActions.select(elementId);
+	}
+	getSelectedElementId() {
+		const selectionCtx = this.getCanvasSelectionContext();
+		if (selectionCtx) {
+			const selectedIds = Array.from(selectionCtx.selectedIds);
+			if (selectedIds.length === 0) return null;
+			return selectedIds[0];
+		}
+		return this.hierarchyState.selectedElementId;
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("target") && !this.targetController) this.targetController = new TargetController(this);
+		this.setupSelectionListener();
+		const selectionCtx = this.getCanvasSelectionContext();
+		if (selectionCtx) {
+			const selectedIds = Array.from(selectionCtx.selectedIds);
+			const selectedId = selectedIds.length === 0 ? null : selectedIds[0];
+			if (this.hierarchyState.selectedElementId !== selectedId) this.hierarchyState = {
+				...this.hierarchyState,
+				selectedElementId: selectedId
+			};
+		}
+		this.providedContext = {
+			state: this.hierarchyState,
+			actions: this.hierarchyActions,
+			getCanvasSelectionContext: () => this.getCanvasSelectionContext(),
+			getHighlightedElement: () => this.getHighlightedElement(),
+			setHighlightedElement: (el) => this.setHighlightedElement(el)
+		};
+		super.willUpdate(changedProperties);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.initializeExpandedState();
+		this.setupSelectionListener();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeSelectionListener();
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("targetElement") || changedProperties.has("target")) {
+			this.initializeExpandedState();
+			this.removeSelectionListener();
+			this.selectionChangeHandler = void 0;
+			this.setupSelectionListener();
+			this.autoSelectFirstRootTimegroup();
+		}
+	}
+	/**
+	* Auto-select the first root timegroup if nothing is currently selected
+	*/
+	autoSelectFirstRootTimegroup() {
+		if (this.getSelectedElementId()) return;
+		const roots = this.getRootElements();
+		for (const root of roots) if (root.tagName.toLowerCase() === "ef-timegroup" && root.id) {
+			this.hierarchyActions.select(root.id);
+			return;
+		}
+		for (const root of roots) if (root.id) {
+			this.hierarchyActions.select(root.id);
+			return;
+		}
+	}
+	setupSelectionListener() {
+		if (this.selectionChangeHandler) return;
+		const selectionCtx = this.getCanvasSelectionContext();
+		if (selectionCtx && "addEventListener" in selectionCtx) {
+			this.selectionChangeHandler = () => {
+				this.requestUpdate();
+			};
+			selectionCtx.addEventListener("selectionchange", this.selectionChangeHandler);
+		}
+	}
+	removeSelectionListener() {
+		const selectionCtx = this.getCanvasSelectionContext();
+		if (selectionCtx && "removeEventListener" in selectionCtx && this.selectionChangeHandler) {
+			selectionCtx.removeEventListener("selectionchange", this.selectionChangeHandler);
+			this.selectionChangeHandler = void 0;
+		}
+	}
+	render() {
+		const roots = this.getRootElements();
+		return html`
+      <div class="hierarchy-container">
+        ${this.showHeader ? html`<div class="header">${this.header}</div>` : nothing}
+        ${roots.length > 0 ? renderHierarchyChildren(roots, this.hideSelectors, this.showSelectors, true) : html`<div class="empty">No elements</div>`}
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: String })], EFHierarchy.prototype, "target", void 0);
+__decorate([property({ type: String })], EFHierarchy.prototype, "header", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-header"
+})], EFHierarchy.prototype, "showHeader", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchy.prototype, "hideSelectors", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchy.prototype, "showSelectors", void 0);
+__decorate([state()], EFHierarchy.prototype, "targetElement", void 0);
+__decorate([consume({
+	context: selectionContext,
+	subscribe: true
+})], EFHierarchy.prototype, "canvasSelectionContext", void 0);
+__decorate([state()], EFHierarchy.prototype, "hierarchyState", void 0);
+__decorate([provide({ context: hierarchyContext }), state()], EFHierarchy.prototype, "providedContext", void 0);
+EFHierarchy = __decorate([customElement("ef-hierarchy")], EFHierarchy);
+
+//#endregion
+export { EFHierarchy };
+//# sourceMappingURL=EFHierarchy.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EFHierarchy.js","names":["EFHierarchy","selectedId: string | null"],"sources":["../../../src/gui/hierarchy/EFHierarchy.ts"],"sourcesContent":["import { consume, provide } from \"@lit/context\";\nimport { css, html, LitElement, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport { isEFTemporal } from \"../../elements/EFTemporal.js\";\nimport { selectionContext } from \"../../canvas/selection/selectionContext.js\";\nimport { TargetController } from \"../../elements/TargetController.js\";\nimport { TWMixin } from \"../TWMixin.js\";\nimport {\n  type HierarchyActions,\n  type HierarchyContext,\n  type HierarchyState,\n  hierarchyContext,\n} from \"./hierarchyContext.js\";\nimport { renderHierarchyChildren } from \"./EFHierarchyItem.js\";\nimport type { EFCanvas } from \"../../canvas/EFCanvas.js\";\n\n@customElement(\"ef-hierarchy\")\nexport class EFHierarchy extends TWMixin(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        overflow: auto;\n        height: 100%;\n        font-size: 12px;\n        \n        --hierarchy-bg: rgb(30 41 59);\n        --hierarchy-border: rgb(71 85 105);\n        --hierarchy-text: rgb(226 232 240);\n        --hierarchy-hover-bg: rgba(148, 163, 184, 0.2);\n        --hierarchy-selected-bg: rgba(59, 130, 246, 0.3);\n        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.15);\n        --hierarchy-focused-bg: rgba(148, 163, 184, 0.4);\n        --hierarchy-drop-indicator: #3b82f6;\n      }\n      \n      :host(.light) {\n        --hierarchy-bg: rgb(241 245 249);\n        --hierarchy-border: rgb(203 213 225);\n        --hierarchy-text: rgb(30 41 59);\n        --hierarchy-hover-bg: rgba(100, 116, 139, 0.15);\n        --hierarchy-selected-bg: rgba(59, 130, 246, 0.2);\n        --hierarchy-ancestor-selected-bg: rgba(59, 130, 246, 0.1);\n        --hierarchy-focused-bg: rgba(100, 116, 139, 0.25);\n      }\n      \n      .hierarchy-container {\n        background: var(--hierarchy-bg);\n        color: var(--hierarchy-text);\n        min-height: 100%;\n        padding: 4px 0;\n      }\n      \n      .header {\n        padding: 8px 12px;\n        font-weight: 600;\n        font-size: 11px;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        color: rgba(148, 163, 184, 0.8);\n        border-bottom: 1px solid var(--hierarchy-border);\n        margin-bottom: 4px;\n      }\n      \n      .empty {\n        padding: 16px;\n        text-align: center;\n        color: rgba(148, 163, 184, 0.6);\n        font-style: italic;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  target = \"\";\n\n  @property({ type: String })\n  header = \"\";\n\n  @property({ type: Boolean, attribute: \"show-header\" })\n  showHeader = false;\n\n  @property({ type: Array, attribute: false })\n  hideSelectors?: string[];\n\n  @property({ type: Array, attribute: false })\n  showSelectors?: string[];\n\n  @state()\n  targetElement: Element | null = null;\n\n  private targetController?: TargetController;\n\n  @consume({ context: selectionContext, subscribe: true })\n  canvasSelectionContext?: import(\"../../canvas/selection/selectionContext.js\").SelectionContext;\n\n  /**\n   * Get the target canvas element.\n   * The canvas is the source of truth for selection and highlight state.\n   */\n  private getCanvas(): EFCanvas | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement && (this.targetElement as any).selectionContext) {\n      return this.targetElement as EFCanvas;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      const target = document.getElementById(this.target);\n      if (target && (target as any).selectionContext) {\n        return target as EFCanvas;\n      }\n    }\n    return null;\n  }\n\n  /**\n   * Get canvas selection context from the target canvas element.\n   * Used when hierarchy is a sibling of canvas (can't access via Lit context).\n   */\n  private getCanvasSelectionContext():\n    | import(\"../../canvas/selection/selectionContext.js\").SelectionContext\n    | undefined {\n    // First try Lit context (works when hierarchy is inside canvas)\n    if (this.canvasSelectionContext) {\n      return this.canvasSelectionContext;\n    }\n    // Use target canvas\n    const canvas = this.getCanvas();\n    return canvas?.selectionContext;\n  }\n\n  /**\n   * Get the currently highlighted element from the canvas.\n   */\n  getHighlightedElement(): HTMLElement | null {\n    const canvas = this.getCanvas();\n    return canvas?.highlightedElement ?? null;\n  }\n\n  /**\n   * Set the highlighted element on the canvas.\n   * Called when user hovers an item in the hierarchy.\n   */\n  setHighlightedElement(element: HTMLElement | null): void {\n    const canvas = this.getCanvas();\n    canvas?.setHighlightedElement(element);\n  }\n\n  @state()\n  private hierarchyState: HierarchyState = {\n    selectedElementId: null,\n    expandedIds: new Set(),\n    draggedElementId: null,\n    dropTargetId: null,\n    dropPosition: null,\n  };\n\n  private selectionChangeHandler?: (event: CustomEvent) => void;\n\n  private hierarchyActions: HierarchyActions = {\n    select: (elementId: string | null) => {\n      const selectionCtx = this.getCanvasSelectionContext();\n      if (selectionCtx) {\n        if (elementId) {\n          // Ensure element is registered with canvas before selecting\n          const element = document.getElementById(elementId);\n          if (element) {\n            // Find the canvas element\n            const canvas = element.closest(\"ef-canvas\") as any;\n            if (canvas && canvas.tryRegisterElement) {\n              // Try to register if not already registered\n              canvas.tryRegisterElement(element);\n            }\n          }\n\n          // Select the element directly by its ID\n          selectionCtx.select(elementId);\n        } else {\n          selectionCtx.clear();\n        }\n      } else {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: elementId,\n        };\n      }\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-select\", {\n          detail: { elementId },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n\n    toggleExpanded: (elementId: string) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (newExpanded.has(elementId)) {\n        newExpanded.delete(elementId);\n      } else {\n        newExpanded.add(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    setExpanded: (elementId: string, expanded: boolean) => {\n      const newExpanded = new Set(this.hierarchyState.expandedIds);\n      if (expanded) {\n        newExpanded.add(elementId);\n      } else {\n        newExpanded.delete(elementId);\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    startDrag: (elementId: string) => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: elementId,\n      };\n    },\n\n    updateDropTarget: (\n      targetId: string | null,\n      position: \"before\" | \"after\" | \"inside\" | null,\n    ) => {\n      if (targetId === this.hierarchyState.draggedElementId) {\n        return;\n      }\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        dropTargetId: targetId,\n        dropPosition: position,\n      };\n    },\n\n    endDrag: () => {\n      this.hierarchyState = {\n        ...this.hierarchyState,\n        draggedElementId: null,\n        dropTargetId: null,\n        dropPosition: null,\n      };\n    },\n\n    reorder: (\n      sourceId: string,\n      targetId: string,\n      position: \"before\" | \"after\" | \"inside\",\n    ) => {\n      this.dispatchEvent(\n        new CustomEvent(\"hierarchy-reorder\", {\n          detail: { sourceId, targetId, position },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    },\n  };\n\n  @provide({ context: hierarchyContext })\n  @state()\n  private providedContext: HierarchyContext = {\n    state: this.hierarchyState,\n    actions: this.hierarchyActions,\n    getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n    getHighlightedElement: () => this.getHighlightedElement(),\n    setHighlightedElement: (el) => this.setHighlightedElement(el),\n  };\n\n  private getTargetElement(): Element | null {\n    // First try TargetController (for registered elements like EFCanvas)\n    if (this.targetElement) {\n      return this.targetElement;\n    }\n    // Fall back to direct lookup for any element with matching ID\n    if (this.target) {\n      return document.getElementById(this.target);\n    }\n    return null;\n  }\n\n  private getRootElements(): Element[] {\n    const target = this.getTargetElement();\n    if (!target) return [];\n\n    if (isEFTemporal(target)) {\n      return [target];\n    }\n\n    return Array.from(target.children);\n  }\n\n  private initializeExpandedState(): void {\n    const roots = this.getRootElements();\n    const newExpanded = new Set<string>();\n\n    const addExpandedIds = (element: Element) => {\n      if (element.id) {\n        newExpanded.add(element.id);\n      }\n      for (const child of Array.from(element.children)) {\n        if (child.children.length > 0) {\n          addExpandedIds(child);\n        }\n      }\n    };\n\n    for (const root of roots) {\n      addExpandedIds(root);\n    }\n\n    this.hierarchyState = {\n      ...this.hierarchyState,\n      expandedIds: newExpanded,\n    };\n  }\n\n  select(elementId: string | null): void {\n    this.hierarchyActions.select(elementId);\n  }\n\n  getSelectedElementId(): string | null {\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      if (selectedIds.length === 0) {\n        return null;\n      }\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      return selectedIds[0]!;\n    }\n    return this.hierarchyState.selectedElementId;\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Set up TargetController if target changes\n    if (changedProperties.has(\"target\") && !this.targetController) {\n      this.targetController = new TargetController(this as any);\n    }\n\n    // Retry setting up selection listener if not yet connected\n    this.setupSelectionListener();\n\n    // Check for selection changes from canvas (via context or direct access)\n    const selectionCtx = this.getCanvasSelectionContext();\n    if (selectionCtx) {\n      const selectedIds = Array.from(selectionCtx.selectedIds);\n      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n      const selectedId: string | null =\n        selectedIds.length === 0 ? null : selectedIds[0]!;\n\n      if (this.hierarchyState.selectedElementId !== selectedId) {\n        this.hierarchyState = {\n          ...this.hierarchyState,\n          selectedElementId: selectedId,\n        };\n      }\n    }\n\n    // Always update provided context to ensure children have fresh getters\n    this.providedContext = {\n      state: this.hierarchyState,\n      actions: this.hierarchyActions,\n      getCanvasSelectionContext: () => this.getCanvasSelectionContext(),\n      getHighlightedElement: () => this.getHighlightedElement(),\n      setHighlightedElement: (el) => this.setHighlightedElement(el),\n    };\n\n    super.willUpdate(changedProperties);\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.initializeExpandedState();\n    this.setupSelectionListener();\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeSelectionListener();\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Re-initialize when target changes\n    if (changedProperties.has(\"targetElement\") || changedProperties.has(\"target\")) {\n      this.initializeExpandedState();\n      this.removeSelectionListener();\n      this.selectionChangeHandler = undefined;\n      this.setupSelectionListener();\n      \n      // Auto-select first root timegroup if nothing is selected\n      this.autoSelectFirstRootTimegroup();\n    }\n  }\n\n  /**\n   * Auto-select the first root timegroup if nothing is currently selected\n   */\n  private autoSelectFirstRootTimegroup(): void {\n    // Only auto-select if nothing is currently selected\n    const currentSelection = this.getSelectedElementId();\n    if (currentSelection) return;\n\n    const roots = this.getRootElements();\n    for (const root of roots) {\n      // Select the first root that is a timegroup (ef-timegroup)\n      if (root.tagName.toLowerCase() === \"ef-timegroup\" && root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\n    }\n\n    // Fallback: select first root with an ID\n    for (const root of roots) {\n      if (root.id) {\n        this.hierarchyActions.select(root.id);\n        return;\n      }\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 = this.getCanvasSelectionContext();\n    if (selectionCtx && \"addEventListener\" in selectionCtx) {\n      this.selectionChangeHandler = () => {\n        this.requestUpdate(); // Trigger re-render to update hierarchy items\n      };\n      (selectionCtx as any).addEventListener(\n        \"selectionchange\",\n        this.selectionChangeHandler,\n      );\n    }\n  }\n\n  private removeSelectionListener(): void {\n    const selectionCtx = this.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 roots = this.getRootElements();\n\n    return html`\n      <div class=\"hierarchy-container\">\n        ${this.showHeader ? html`<div class=\"header\">${this.header}</div>` : nothing}\n        ${\n          roots.length > 0\n            ? renderHierarchyChildren(\n                roots,\n                this.hideSelectors,\n                this.showSelectors,\n                true,\n              )\n            : html`<div class=\"empty\">No elements</div>`\n        }\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-hierarchy\": EFHierarchy;\n  }\n}\n"],"mappings":"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"}

package/dist/gui/hierarchy/EFHierarchyItem.d.ts

@@ -0,0 +1,118 @@
+import { SelectionContext } from "../../canvas/selection/selectionContext.js";
+import { EFVideo } from "../../elements/EFVideo.js";
+import { EFAudio } from "../../elements/EFAudio.js";
+import { EFTimegroup } from "../../elements/EFTimegroup.js";
+import { EFImage } from "../../elements/EFImage.js";
+import { HierarchyContext } from "./hierarchyContext.js";
+import * as lit15 from "lit";
+import { LitElement, PropertyValues, TemplateResult, nothing } from "lit";
+
+//#region src/gui/hierarchy/EFHierarchyItem.d.ts
+declare const EFHierarchyItem_base: typeof LitElement;
+declare class EFHierarchyItem<ElementType extends HTMLElement = HTMLElement> extends EFHierarchyItem_base {
+  static styles: lit15.CSSResult[];
+  hierarchyContext?: HierarchyContext;
+  canvasSelectionContext?: SelectionContext;
+  element: ElementType;
+  hideSelectors?: string[];
+  showSelectors?: string[];
+  temporalOnly: boolean;
+  private localExpanded;
+  private selectionChangeHandler?;
+  get elementId(): string;
+  get icon(): TemplateResult<1> | string;
+  get typeColor(): string;
+  get isFocused(): boolean;
+  get isSelected(): boolean;
+  get isAncestorSelected(): boolean;
+  get isExpanded(): boolean;
+  get isDragging(): boolean;
+  get isDropTarget(): boolean;
+  get dropPosition(): "before" | "after" | "inside" | null;
+  get hasChildren(): boolean;
+  displayLabel(): TemplateResult<1> | string | typeof nothing;
+  private handleClick;
+  private handleExpandClick;
+  private handleDragStart;
+  private handleDragEnd;
+  private handleDragOver;
+  private handleDragLeave;
+  private handleDrop;
+  private handleMouseEnter;
+  private handleMouseLeave;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected willUpdate(changedProperties: PropertyValues): void;
+  private setupSelectionListener;
+  private removeSelectionListener;
+  render(): TemplateResult<1>;
+  renderChildren(): Array<TemplateResult<1> | typeof nothing> | typeof nothing;
+}
+declare class EFTimegroupHierarchyItem extends EFHierarchyItem<EFTimegroup> {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string | TemplateResult<1> | typeof nothing;
+}
+declare class EFAudioHierarchyItem extends EFHierarchyItem<EFAudio> {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFVideoHierarchyItem extends EFHierarchyItem<EFVideo> {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFCaptionsHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFCaptionsActiveWordHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFTextHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  get hasChildren(): boolean;
+  displayLabel(): string;
+  renderChildren(): typeof nothing;
+}
+declare class EFTextSegmentHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFWaveformHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  renderChildren(): typeof nothing;
+}
+declare class EFImageHierarchyItem extends EFHierarchyItem<EFImage> {
+  get icon(): TemplateResult<1>;
+  get typeColor(): string;
+  displayLabel(): string;
+}
+declare class EFHTMLHierarchyItem extends EFHierarchyItem {
+  get icon(): TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-hierarchy-item": EFHierarchyItem;
+    "ef-timegroup-hierarchy-item": EFTimegroupHierarchyItem;
+    "ef-audio-hierarchy-item": EFAudioHierarchyItem;
+    "ef-video-hierarchy-item": EFVideoHierarchyItem;
+    "ef-captions-hierarchy-item": EFCaptionsHierarchyItem;
+    "ef-captions-active-word-hierarchy-item": EFCaptionsActiveWordHierarchyItem;
+    "ef-text-hierarchy-item": EFTextHierarchyItem;
+    "ef-text-segment-hierarchy-item": EFTextSegmentHierarchyItem;
+    "ef-waveform-hierarchy-item": EFWaveformHierarchyItem;
+    "ef-image-hierarchy-item": EFImageHierarchyItem;
+    "ef-html-hierarchy-item": EFHTMLHierarchyItem;
+  }
+}
+//#endregion
+export { EFAudioHierarchyItem, EFCaptionsActiveWordHierarchyItem, EFCaptionsHierarchyItem, EFHTMLHierarchyItem, EFHierarchyItem, EFImageHierarchyItem, EFTextHierarchyItem, EFTextSegmentHierarchyItem, EFTimegroupHierarchyItem, EFVideoHierarchyItem, EFWaveformHierarchyItem };
+//# sourceMappingURL=EFHierarchyItem.d.ts.map