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

package/dist/gui/hierarchy/EFHierarchyItem.js

@@ -0,0 +1,551 @@
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { TWMixin } from "../TWMixin2.js";
+import { selectionContext } from "../../canvas/selection/selectionContext.js";
+import { hierarchyContext } from "./hierarchyContext.js";
+import { EFAudio } from "../../elements/EFAudio.js";
+import { EFVideo } from "../../elements/EFVideo.js";
+import { EFCaptions, EFCaptionsActiveWord } from "../../elements/EFCaptions.js";
+import { EFImage } from "../../elements/EFImage.js";
+import { EFText } from "../../elements/EFText.js";
+import { EFTextSegment } from "../../elements/EFTextSegment.js";
+import { EFWaveform } from "../../elements/EFWaveform.js";
+import { ICONS, phosphorIcon } from "../icons.js";
+import { EFTimegroup } from "../../elements/EFTimegroup.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { styleMap } from "lit/directives/style-map.js";
+
+//#region src/gui/hierarchy/EFHierarchyItem.ts
+const DEFAULT_HIDDEN_TAGS = new Set([
+	"SPAN",
+	"STYLE",
+	"SCRIPT",
+	"LINK",
+	"META",
+	"SLOT",
+	"TEMPLATE",
+	"EF-WORKBENCH",
+	"EF-FILMSTRIP",
+	"EF-CONTROLS",
+	"EF-SCRUBBER",
+	"EF-TIMELINE-RULER",
+	"EF-TRIM-HANDLES",
+	"EF-TEXT-SEGMENT"
+]);
+const shouldRenderElement = (element, hideSelectors, showSelectors) => {
+	if (element instanceof HTMLElement && element.dataset?.efHidden) return false;
+	if (DEFAULT_HIDDEN_TAGS.has(element.tagName)) {
+		if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
+			try {
+				return element.matches(selector);
+			} catch {
+				return false;
+			}
+		});
+		return false;
+	}
+	if (showSelectors && showSelectors.length > 0) return showSelectors.some((selector) => {
+		try {
+			return element.matches(selector);
+		} catch {
+			return false;
+		}
+	});
+	if (hideSelectors && hideSelectors.length > 0) return !hideSelectors.some((selector) => {
+		try {
+			return element.matches(selector);
+		} catch {
+			return false;
+		}
+	});
+	return true;
+};
+function renderHierarchyChildren(children, hideSelectors, showSelectors, skipRootFiltering = false, temporalOnly = false) {
+	return children.flatMap((child) => {
+		if (!skipRootFiltering && !shouldRenderElement(child, hideSelectors, showSelectors)) return nothing;
+		if (child instanceof EFTimegroup) return html`<ef-timegroup-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-timegroup-hierarchy-item>`;
+		if (child instanceof EFImage) return html`<ef-image-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-image-hierarchy-item>`;
+		if (child instanceof EFAudio) return html`<ef-audio-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-audio-hierarchy-item>`;
+		if (child instanceof EFVideo) return html`<ef-video-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-video-hierarchy-item>`;
+		if (child instanceof EFCaptions) return html`<ef-captions-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-captions-hierarchy-item>`;
+		if (child instanceof EFCaptionsActiveWord) return html`<ef-captions-active-word-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-captions-active-word-hierarchy-item>`;
+		if (child instanceof EFText) return html`<ef-text-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-text-hierarchy-item>`;
+		if (child instanceof EFTextSegment) return nothing;
+		if (child instanceof EFWaveform) return html`<ef-waveform-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+        .temporalOnly=${temporalOnly}
+      ></ef-waveform-hierarchy-item>`;
+		if (temporalOnly) return nothing;
+		if (child instanceof HTMLElement) return html`<ef-html-hierarchy-item
+        .element=${child}
+        .hideSelectors=${hideSelectors}
+        .showSelectors=${showSelectors}
+      ></ef-html-hierarchy-item>`;
+		return nothing;
+	});
+}
+let EFHierarchyItem = class EFHierarchyItem$1 extends TWMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.element = new EFTimegroup();
+		this.temporalOnly = false;
+		this.localExpanded = true;
+	}
+	static {
+		this.styles = [css`
+      :host {
+        display: block;
+      }
+      .item-row {
+        display: flex;
+        align-items: center;
+        height: var(--hierarchy-item-height, 1.5rem);
+        padding-left: var(--hierarchy-item-padding-left, 0.5rem);
+        padding-right: var(--hierarchy-item-padding-right, 0.5rem);
+        padding-top: var(--hierarchy-item-padding-top, 0);
+        padding-bottom: var(--hierarchy-item-padding-bottom, 0);
+        font-size: var(--hierarchy-item-font-size, 0.75rem);
+        font-family: system-ui, -apple-system, sans-serif;
+        cursor: pointer;
+        user-select: none;
+        border-left: 3px solid transparent;
+      }
+      .item-row:hover {
+        background: var(--hierarchy-hover-bg, rgba(148, 163, 184, 0.2));
+      }
+      .item-row[data-selected] {
+        background: var(--hierarchy-selected-bg, rgba(59, 130, 246, 0.3));
+      }
+      .item-row[data-ancestor-selected] {
+        background: var(--hierarchy-ancestor-selected-bg, rgba(59, 130, 246, 0.15));
+      }
+      .item-row[data-focused] {
+        background: var(--hierarchy-focused-bg, var(--filmstrip-timegroup-focused, rgba(148, 163, 184, 0.4)));
+      }
+      .item-row[data-dragging] {
+        opacity: 0.5;
+      }
+      .expand-icon {
+        width: var(--hierarchy-expand-icon-size, 1rem);
+        height: var(--hierarchy-expand-icon-size, 1rem);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        flex-shrink: 0;
+      }
+      .expand-icon svg {
+        width: 0.75rem;
+        height: 0.75rem;
+        transition: transform 0.15s ease;
+      }
+      .expand-icon[data-expanded] svg {
+        transform: rotate(90deg);
+      }
+      .icon {
+        margin-right: var(--hierarchy-icon-gap, 0.25rem);
+        flex-shrink: 0;
+      }
+      .label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        flex: 1;
+      }
+      .children {
+        padding-left: var(--hierarchy-indent, 0.75rem);
+      }
+      .children[data-collapsed] {
+        display: none;
+      }
+      .drop-indicator {
+        height: 2px;
+        background: var(--hierarchy-drop-indicator, #3b82f6);
+        margin-left: var(--hierarchy-indent, 0.75rem);
+      }
+      .drop-inside {
+        outline: 2px solid var(--hierarchy-drop-indicator, #3b82f6);
+        outline-offset: -2px;
+      }
+    `];
+	}
+	get elementId() {
+		return this.element?.id || "";
+	}
+	get icon() {
+		return phosphorIcon(ICONS.code);
+	}
+	get typeColor() {
+		return "rgb(148, 163, 184)";
+	}
+	get isFocused() {
+		const highlightedElement = this.hierarchyContext?.getHighlightedElement?.();
+		return this.element && highlightedElement === this.element;
+	}
+	get isSelected() {
+		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
+		if (selectionCtx && this.elementId) return selectionCtx.selectedIds.has(this.elementId);
+		if (!this.hierarchyContext) return false;
+		return this.hierarchyContext.state.selectedElementId === this.elementId;
+	}
+	get isAncestorSelected() {
+		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
+		if (selectionCtx && this.element) for (const selectedId of selectionCtx.selectedIds) {
+			const selectedElement = document.getElementById(selectedId);
+			if (selectedElement && this.element.contains(selectedElement) && selectedElement !== this.element) return true;
+		}
+		return false;
+	}
+	get isExpanded() {
+		if (!this.hierarchyContext || !this.elementId) return this.localExpanded;
+		return this.hierarchyContext.state.expandedIds.has(this.elementId);
+	}
+	get isDragging() {
+		if (!this.hierarchyContext) return false;
+		return this.hierarchyContext.state.draggedElementId === this.elementId;
+	}
+	get isDropTarget() {
+		if (!this.hierarchyContext) return false;
+		return this.hierarchyContext.state.dropTargetId === this.elementId;
+	}
+	get dropPosition() {
+		if (!this.isDropTarget || !this.hierarchyContext) return null;
+		return this.hierarchyContext.state.dropPosition;
+	}
+	get hasChildren() {
+		return this.element.children.length > 0;
+	}
+	displayLabel() {
+		return this.elementId || "(unnamed)";
+	}
+	handleClick(e) {
+		e.stopPropagation();
+		if (this.hierarchyContext && this.elementId) this.hierarchyContext.actions.select(this.elementId);
+		this.hierarchyContext?.setHighlightedElement?.(this.element);
+	}
+	handleExpandClick(e) {
+		e.stopPropagation();
+		if (this.hierarchyContext && this.elementId) this.hierarchyContext.actions.toggleExpanded(this.elementId);
+		else this.localExpanded = !this.localExpanded;
+	}
+	handleDragStart(e) {
+		if (!this.hierarchyContext || !this.elementId) return;
+		e.dataTransfer?.setData("text/plain", this.elementId);
+		this.hierarchyContext.actions.startDrag(this.elementId);
+	}
+	handleDragEnd() {
+		if (this.hierarchyContext) this.hierarchyContext.actions.endDrag();
+	}
+	handleDragOver(e) {
+		e.preventDefault();
+		if (!this.hierarchyContext || !this.elementId) return;
+		const rect = e.currentTarget.getBoundingClientRect();
+		const y = e.clientY - rect.top;
+		const height = rect.height;
+		let position;
+		if (y < height * .25) position = "before";
+		else if (y > height * .75) position = "after";
+		else position = "inside";
+		this.hierarchyContext.actions.updateDropTarget(this.elementId, position);
+	}
+	handleDragLeave() {
+		if (this.hierarchyContext && this.isDropTarget) this.hierarchyContext.actions.updateDropTarget(null, null);
+	}
+	handleDrop(e) {
+		e.preventDefault();
+		if (!this.hierarchyContext || !this.elementId) return;
+		const sourceId = e.dataTransfer?.getData("text/plain");
+		if (sourceId && this.dropPosition) this.hierarchyContext.actions.reorder(sourceId, this.elementId, this.dropPosition);
+		this.hierarchyContext.actions.endDrag();
+	}
+	handleMouseEnter() {
+		this.hierarchyContext?.setHighlightedElement?.(this.element);
+	}
+	handleMouseLeave() {
+		if (this.hierarchyContext?.getHighlightedElement?.() === this.element) this.hierarchyContext?.setHighlightedElement?.(null);
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.setupSelectionListener();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeSelectionListener();
+	}
+	willUpdate(changedProperties) {
+		if (!this.selectionChangeHandler || changedProperties.has("hierarchyContext")) {
+			if (changedProperties.has("hierarchyContext") && this.selectionChangeHandler) {
+				this.removeSelectionListener();
+				this.selectionChangeHandler = void 0;
+			}
+			this.setupSelectionListener();
+		}
+	}
+	setupSelectionListener() {
+		if (this.selectionChangeHandler) return;
+		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
+		if (selectionCtx && "addEventListener" in selectionCtx) {
+			this.selectionChangeHandler = () => {
+				this.requestUpdate();
+			};
+			selectionCtx.addEventListener("selectionchange", this.selectionChangeHandler);
+		}
+	}
+	removeSelectionListener() {
+		const selectionCtx = this.canvasSelectionContext || this.hierarchyContext?.getCanvasSelectionContext?.();
+		if (selectionCtx && "removeEventListener" in selectionCtx && this.selectionChangeHandler) {
+			selectionCtx.removeEventListener("selectionchange", this.selectionChangeHandler);
+			this.selectionChangeHandler = void 0;
+		}
+	}
+	render() {
+		const expanded = this.isExpanded;
+		return html`
+      ${this.dropPosition === "before" ? html`<div class="drop-indicator"></div>` : nothing}
+      <div
+        class="item-row ${this.dropPosition === "inside" ? "drop-inside" : ""}"
+        style=${styleMap({ borderLeftColor: this.typeColor })}
+        ?data-focused=${this.isFocused}
+        ?data-selected=${this.isSelected}
+        ?data-ancestor-selected=${this.isAncestorSelected}
+        ?data-dragging=${this.isDragging}
+        draggable="true"
+        @click=${this.handleClick}
+        @dragstart=${this.handleDragStart}
+        @dragend=${this.handleDragEnd}
+        @dragover=${this.handleDragOver}
+        @dragleave=${this.handleDragLeave}
+        @drop=${this.handleDrop}
+        @mouseenter=${this.handleMouseEnter}
+        @mouseleave=${this.handleMouseLeave}
+      >
+        ${this.hasChildren ? html`
+              <span
+                class="expand-icon"
+                ?data-expanded=${expanded}
+                @click=${this.handleExpandClick}
+              >
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M8 5v14l11-7z" />
+                </svg>
+              </span>
+            ` : html`<span class="expand-icon"></span>`}
+        <span class="icon">${this.icon}</span>
+        <span class="label">${this.displayLabel()}</span>
+      </div>
+      ${this.hasChildren ? html`
+            <div class="children" ?data-collapsed=${!expanded}>
+              ${this.renderChildren()}
+            </div>
+          ` : nothing}
+      ${this.dropPosition === "after" ? html`<div class="drop-indicator"></div>` : nothing}
+    `;
+	}
+	renderChildren() {
+		return renderHierarchyChildren(Array.from(this.element.children), this.hideSelectors, this.showSelectors, false, this.temporalOnly);
+	}
+};
+__decorate([consume({
+	context: hierarchyContext,
+	subscribe: true
+})], EFHierarchyItem.prototype, "hierarchyContext", void 0);
+__decorate([consume({
+	context: selectionContext,
+	subscribe: true
+})], EFHierarchyItem.prototype, "canvasSelectionContext", void 0);
+__decorate([property({
+	type: Object,
+	attribute: false
+})], EFHierarchyItem.prototype, "element", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchyItem.prototype, "hideSelectors", void 0);
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFHierarchyItem.prototype, "showSelectors", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: false
+})], EFHierarchyItem.prototype, "temporalOnly", void 0);
+__decorate([state()], EFHierarchyItem.prototype, "localExpanded", void 0);
+EFHierarchyItem = __decorate([customElement("ef-hierarchy-item")], EFHierarchyItem);
+/**
+* Generate a friendly label for an element based on its type and siblings
+*/
+function getFriendlyLabel(element, typeLabel) {
+	const id = element.id || "";
+	if (id && !id.includes("-") && !id.match(/^\d+$/)) return id;
+	const parent = element.parentElement;
+	if (parent) {
+		const tagName = element.tagName;
+		const siblings = Array.from(parent.children).filter((child) => child.tagName === tagName);
+		const index = siblings.indexOf(element) + 1;
+		if (siblings.length === 1) return typeLabel;
+		return `${typeLabel} ${index}`;
+	}
+	return typeLabel;
+}
+let EFTimegroupHierarchyItem = class EFTimegroupHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.filmSlate);
+	}
+	get typeColor() {
+		return "rgb(148, 163, 184)";
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Composition");
+	}
+};
+EFTimegroupHierarchyItem = __decorate([customElement("ef-timegroup-hierarchy-item")], EFTimegroupHierarchyItem);
+let EFAudioHierarchyItem = class EFAudioHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.speakerHigh);
+	}
+	get typeColor() {
+		return "rgb(34, 197, 94)";
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Audio");
+	}
+};
+EFAudioHierarchyItem = __decorate([customElement("ef-audio-hierarchy-item")], EFAudioHierarchyItem);
+let EFVideoHierarchyItem = class EFVideoHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.filmStrip);
+	}
+	get typeColor() {
+		return "rgb(59, 130, 246)";
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Video");
+	}
+};
+EFVideoHierarchyItem = __decorate([customElement("ef-video-hierarchy-item")], EFVideoHierarchyItem);
+let EFCaptionsHierarchyItem = class EFCaptionsHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.subtitles);
+	}
+	get typeColor() {
+		return "rgb(34, 197, 94)";
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Captions");
+	}
+};
+EFCaptionsHierarchyItem = __decorate([customElement("ef-captions-hierarchy-item")], EFCaptionsHierarchyItem);
+let EFCaptionsActiveWordHierarchyItem = class EFCaptionsActiveWordHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.microphone);
+	}
+	get typeColor() {
+		return "rgb(34, 197, 94)";
+	}
+	displayLabel() {
+		return "Active Word";
+	}
+};
+EFCaptionsActiveWordHierarchyItem = __decorate([customElement("ef-captions-active-word-hierarchy-item")], EFCaptionsActiveWordHierarchyItem);
+let EFTextHierarchyItem = class EFTextHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.textT);
+	}
+	get typeColor() {
+		return "rgb(249, 115, 22)";
+	}
+	get hasChildren() {
+		return false;
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Text");
+	}
+	renderChildren() {
+		return nothing;
+	}
+};
+EFTextHierarchyItem = __decorate([customElement("ef-text-hierarchy-item")], EFTextHierarchyItem);
+let EFTextSegmentHierarchyItem = class EFTextSegmentHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.textT);
+	}
+	get typeColor() {
+		return "rgb(249, 115, 22)";
+	}
+	displayLabel() {
+		return "Segment";
+	}
+};
+EFTextSegmentHierarchyItem = __decorate([customElement("ef-text-segment-hierarchy-item")], EFTextSegmentHierarchyItem);
+let EFWaveformHierarchyItem = class EFWaveformHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.waveform);
+	}
+	get typeColor() {
+		return "rgb(34, 197, 94)";
+	}
+	renderChildren() {
+		return nothing;
+	}
+};
+EFWaveformHierarchyItem = __decorate([customElement("ef-waveform-hierarchy-item")], EFWaveformHierarchyItem);
+let EFImageHierarchyItem = class EFImageHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return phosphorIcon(ICONS.image);
+	}
+	get typeColor() {
+		return "rgb(168, 85, 247)";
+	}
+	displayLabel() {
+		return getFriendlyLabel(this.element, "Image");
+	}
+};
+EFImageHierarchyItem = __decorate([customElement("ef-image-hierarchy-item")], EFImageHierarchyItem);
+let EFHTMLHierarchyItem = class EFHTMLHierarchyItem$1 extends EFHierarchyItem {
+	get icon() {
+		return html`<code>${`<${this.element.tagName.toLowerCase()}>`}</code>`;
+	}
+};
+EFHTMLHierarchyItem = __decorate([customElement("ef-html-hierarchy-item")], EFHTMLHierarchyItem);
+
+//#endregion
+export { EFAudioHierarchyItem, EFCaptionsActiveWordHierarchyItem, EFCaptionsHierarchyItem, EFHTMLHierarchyItem, EFHierarchyItem, EFImageHierarchyItem, EFTextHierarchyItem, EFTextSegmentHierarchyItem, EFTimegroupHierarchyItem, EFVideoHierarchyItem, EFWaveformHierarchyItem, renderHierarchyChildren, shouldRenderElement };
+//# sourceMappingURL=EFHierarchyItem.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,38 @@
+import { SelectionContext } from "../../canvas/selection/selectionContext.js";
+
+//#region src/gui/hierarchy/hierarchyContext.d.ts
+interface HierarchyState {
+  selectedElementId: string | null;
+  expandedIds: Set<string>;
+  draggedElementId: string | null;
+  dropTargetId: string | null;
+  dropPosition: "before" | "after" | "inside" | null;
+}
+interface HierarchyActions {
+  select(elementId: string | null): void;
+  toggleExpanded(elementId: string): void;
+  setExpanded(elementId: string, expanded: boolean): void;
+  startDrag(elementId: string): void;
+  updateDropTarget(targetId: string | null, position: "before" | "after" | "inside" | null): void;
+  endDrag(): void;
+  reorder(sourceId: string, targetId: string, position: "before" | "after" | "inside"): void;
+}
+interface HierarchyContext {
+  state: HierarchyState;
+  actions: HierarchyActions;
+  getCanvasSelectionContext?: () => SelectionContext | undefined;
+  /**
+   * Get the currently highlighted element from the canvas.
+   */
+  getHighlightedElement?: () => HTMLElement | null;
+  /**
+   * Set the highlighted element on the canvas.
+   */
+  setHighlightedElement?: (element: HTMLElement | null) => void;
+}
+declare const hierarchyContext: {
+  __context__: HierarchyContext;
+};
+//#endregion
+export { HierarchyActions, HierarchyContext, HierarchyState, hierarchyContext };
+//# sourceMappingURL=hierarchyContext.d.ts.map

package/dist/gui/hierarchy/hierarchyContext.js

@@ -0,0 +1,8 @@
+import { createContext } from "@lit/context";
+
+//#region src/gui/hierarchy/hierarchyContext.ts
+const hierarchyContext = createContext(Symbol("hierarchyContext"));
+
+//#endregion
+export { hierarchyContext };
+//# sourceMappingURL=hierarchyContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hierarchyContext.js","names":[],"sources":["../../../src/gui/hierarchy/hierarchyContext.ts"],"sourcesContent":["import { createContext } from \"@lit/context\";\n\nexport interface HierarchyState {\n  selectedElementId: string | null;\n  expandedIds: Set<string>;\n  draggedElementId: string | null;\n  dropTargetId: string | null;\n  dropPosition: \"before\" | \"after\" | \"inside\" | null;\n}\n\nexport interface HierarchyActions {\n  select(elementId: string | null): void;\n  toggleExpanded(elementId: string): void;\n  setExpanded(elementId: string, expanded: boolean): void;\n  startDrag(elementId: string): void;\n  updateDropTarget(\n    targetId: string | null,\n    position: \"before\" | \"after\" | \"inside\" | null,\n  ): void;\n  endDrag(): void;\n  reorder(\n    sourceId: string,\n    targetId: string,\n    position: \"before\" | \"after\" | \"inside\",\n  ): void;\n}\n\nexport interface HierarchyContext {\n  state: HierarchyState;\n  actions: HierarchyActions;\n  getCanvasSelectionContext?: () =>\n    | import(\"../../canvas/selection/selectionContext.js\").SelectionContext\n    | undefined;\n  /**\n   * Get the currently highlighted element from the canvas.\n   */\n  getHighlightedElement?: () => HTMLElement | null;\n  /**\n   * Set the highlighted element on the canvas.\n   */\n  setHighlightedElement?: (element: HTMLElement | null) => void;\n}\n\nexport const hierarchyContext = createContext<HierarchyContext>(\n  Symbol(\"hierarchyContext\"),\n);\n"],"mappings":";;;AA2CA,MAAa,mBAAmB,cAC9B,OAAO,mBAAmB,CAC3B"}