@editframe/elements 0.30.1-beta.0 → 0.31.0-beta.0

package/dist/gui/tree/EFTree.d.ts

@@ -0,0 +1,59 @@
+import { TreeItem } from "./treeContext.js";
+import * as lit16 from "lit";
+import { LitElement, PropertyValues } from "lit";
+import * as lit_html16 from "lit-html";
+
+//#region src/gui/tree/EFTree.d.ts
+
+/**
+ * Generic tree component for displaying hierarchical data.
+ *
+ * Takes an array of TreeItem objects and renders them as an expandable tree.
+ * Provides context for selection and expand/collapse state.
+ *
+ * @fires tree-select - When an item is selected. Detail: { id: string, item: TreeItem }
+ *
+ * @example
+ * ```html
+ * <ef-tree
+ *   .items=${[
+ *     { id: "folder1", label: "Folder 1", children: [
+ *       { id: "file1", label: "File 1" },
+ *       { id: "file2", label: "File 2" },
+ *     ]},
+ *     { id: "file3", label: "File 3" },
+ *   ]}
+ *   @tree-select=${(e) => console.log('Selected:', e.detail.id)}
+ * ></ef-tree>
+ * ```
+ */
+declare class EFTree extends LitElement {
+  static styles: lit16.CSSResult;
+  /** Tree items to display */
+  items: TreeItem[];
+  /** Optional header text */
+  header: string;
+  /** Whether to show the header */
+  showHeader: boolean;
+  /** Currently selected item ID (can be set externally) */
+  selectedId: string | null;
+  /** Whether to expand all items by default */
+  expandAll: boolean;
+  private treeState;
+  private treeActions;
+  private providedContext;
+  private findItem;
+  private initializeExpandedState;
+  protected willUpdate(changedProperties: PropertyValues): void;
+  protected updated(changedProperties: PropertyValues): void;
+  connectedCallback(): void;
+  render(): lit_html16.TemplateResult<1>;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-tree": EFTree;
+  }
+}
+//#endregion
+export { EFTree };
+//# sourceMappingURL=EFTree.d.ts.map

package/dist/gui/tree/EFTree.js

@@ -0,0 +1,174 @@
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { collectAllIds, treeContext } from "./treeContext.js";
+import "./EFTreeItem.js";
+import { provide } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/gui/tree/EFTree.ts
+let EFTree = class EFTree$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.items = [];
+		this.header = "";
+		this.showHeader = false;
+		this.selectedId = null;
+		this.expandAll = true;
+		this.treeState = {
+			selectedId: null,
+			expandedIds: /* @__PURE__ */ new Set()
+		};
+		this.treeActions = {
+			select: (id) => {
+				this.treeState = {
+					...this.treeState,
+					selectedId: id
+				};
+				const item = id ? this.findItem(id, this.items) : null;
+				this.dispatchEvent(new CustomEvent("tree-select", {
+					detail: {
+						id,
+						item
+					},
+					bubbles: true,
+					composed: true
+				}));
+			},
+			toggleExpanded: (id) => {
+				const newExpanded = new Set(this.treeState.expandedIds);
+				if (newExpanded.has(id)) newExpanded.delete(id);
+				else newExpanded.add(id);
+				this.treeState = {
+					...this.treeState,
+					expandedIds: newExpanded
+				};
+			},
+			setExpanded: (id, expanded) => {
+				const newExpanded = new Set(this.treeState.expandedIds);
+				if (expanded) newExpanded.add(id);
+				else newExpanded.delete(id);
+				this.treeState = {
+					...this.treeState,
+					expandedIds: newExpanded
+				};
+			}
+		};
+		this.providedContext = {
+			state: this.treeState,
+			actions: this.treeActions
+		};
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+      overflow: auto;
+      font-size: 12px;
+
+      --tree-bg: rgb(30 41 59);
+      --tree-text: rgb(226 232 240);
+      --tree-hover-bg: rgba(148, 163, 184, 0.2);
+      --tree-selected-bg: rgba(59, 130, 246, 0.3);
+    }
+
+    :host(.light) {
+      --tree-bg: rgb(241 245 249);
+      --tree-text: rgb(30 41 59);
+      --tree-hover-bg: rgba(100, 116, 139, 0.15);
+      --tree-selected-bg: rgba(59, 130, 246, 0.2);
+    }
+
+    .tree-container {
+      background: var(--tree-bg);
+      color: var(--tree-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(--tree-border, rgb(71 85 105));
+      margin-bottom: 4px;
+    }
+
+    .empty {
+      padding: 16px;
+      text-align: center;
+      color: rgba(148, 163, 184, 0.6);
+      font-style: italic;
+    }
+  `;
+	}
+	findItem(id, items) {
+		for (const item of items) {
+			if (item.id === id) return item;
+			if (item.children) {
+				const found = this.findItem(id, item.children);
+				if (found) return found;
+			}
+		}
+		return null;
+	}
+	initializeExpandedState() {
+		if (this.expandAll && this.items.length > 0) this.treeState = {
+			...this.treeState,
+			expandedIds: collectAllIds(this.items)
+		};
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("selectedId") && this.selectedId !== this.treeState.selectedId) this.treeState = {
+			...this.treeState,
+			selectedId: this.selectedId
+		};
+		this.providedContext = {
+			state: this.treeState,
+			actions: this.treeActions
+		};
+		super.willUpdate(changedProperties);
+	}
+	updated(changedProperties) {
+		super.updated(changedProperties);
+		if (changedProperties.has("items")) this.initializeExpandedState();
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.initializeExpandedState();
+	}
+	render() {
+		return html`
+      <div class="tree-container">
+        ${this.showHeader ? html`<div class="header">${this.header}</div>` : nothing}
+        ${this.items.length > 0 ? this.items.map((item) => html`<ef-tree-item .item=${item}></ef-tree-item>`) : html`<div class="empty">No items</div>`}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: Array,
+	attribute: false
+})], EFTree.prototype, "items", void 0);
+__decorate([property({ type: String })], EFTree.prototype, "header", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "show-header"
+})], EFTree.prototype, "showHeader", void 0);
+__decorate([property({
+	type: String,
+	attribute: "selected-id"
+})], EFTree.prototype, "selectedId", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "expand-all"
+})], EFTree.prototype, "expandAll", void 0);
+__decorate([state()], EFTree.prototype, "treeState", void 0);
+__decorate([provide({ context: treeContext }), state()], EFTree.prototype, "providedContext", void 0);
+EFTree = __decorate([customElement("ef-tree")], EFTree);
+
+//#endregion
+export { EFTree };
+//# sourceMappingURL=EFTree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EFTree.js","names":["EFTree"],"sources":["../../../src/gui/tree/EFTree.ts"],"sourcesContent":["import { provide } from \"@lit/context\";\nimport { css, html, LitElement, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\n\nimport type { TreeItem, TreeContext, TreeState, TreeActions } from \"./treeContext.js\";\nimport { treeContext, collectAllIds } from \"./treeContext.js\";\nimport \"./EFTreeItem.js\";\n\n/**\n * Generic tree component for displaying hierarchical data.\n * \n * Takes an array of TreeItem objects and renders them as an expandable tree.\n * Provides context for selection and expand/collapse state.\n * \n * @fires tree-select - When an item is selected. Detail: { id: string, item: TreeItem }\n * \n * @example\n * ```html\n * <ef-tree\n *   .items=${[\n *     { id: \"folder1\", label: \"Folder 1\", children: [\n *       { id: \"file1\", label: \"File 1\" },\n *       { id: \"file2\", label: \"File 2\" },\n *     ]},\n *     { id: \"file3\", label: \"File 3\" },\n *   ]}\n *   @tree-select=${(e) => console.log('Selected:', e.detail.id)}\n * ></ef-tree>\n * ```\n */\n@customElement(\"ef-tree\")\nexport class EFTree extends LitElement {\n  static styles = css`\n    :host {\n      display: block;\n      overflow: auto;\n      font-size: 12px;\n\n      --tree-bg: rgb(30 41 59);\n      --tree-text: rgb(226 232 240);\n      --tree-hover-bg: rgba(148, 163, 184, 0.2);\n      --tree-selected-bg: rgba(59, 130, 246, 0.3);\n    }\n\n    :host(.light) {\n      --tree-bg: rgb(241 245 249);\n      --tree-text: rgb(30 41 59);\n      --tree-hover-bg: rgba(100, 116, 139, 0.15);\n      --tree-selected-bg: rgba(59, 130, 246, 0.2);\n    }\n\n    .tree-container {\n      background: var(--tree-bg);\n      color: var(--tree-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(--tree-border, rgb(71 85 105));\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  /** Tree items to display */\n  @property({ type: Array, attribute: false })\n  items: TreeItem[] = [];\n\n  /** Optional header text */\n  @property({ type: String })\n  header = \"\";\n\n  /** Whether to show the header */\n  @property({ type: Boolean, attribute: \"show-header\" })\n  showHeader = false;\n\n  /** Currently selected item ID (can be set externally) */\n  @property({ type: String, attribute: \"selected-id\" })\n  selectedId: string | null = null;\n\n  /** Whether to expand all items by default */\n  @property({ type: Boolean, attribute: \"expand-all\" })\n  expandAll = true;\n\n  @state()\n  private treeState: TreeState = {\n    selectedId: null,\n    expandedIds: new Set(),\n  };\n\n  private treeActions: TreeActions = {\n    select: (id: string | null) => {\n      this.treeState = {\n        ...this.treeState,\n        selectedId: id,\n      };\n      \n      // Find the item for the event detail\n      const item = id ? this.findItem(id, this.items) : null;\n      \n      this.dispatchEvent(\n        new CustomEvent(\"tree-select\", {\n          detail: { id, item },\n          bubbles: true,\n          composed: true,\n        })\n      );\n    },\n\n    toggleExpanded: (id: string) => {\n      const newExpanded = new Set(this.treeState.expandedIds);\n      if (newExpanded.has(id)) {\n        newExpanded.delete(id);\n      } else {\n        newExpanded.add(id);\n      }\n      this.treeState = {\n        ...this.treeState,\n        expandedIds: newExpanded,\n      };\n    },\n\n    setExpanded: (id: string, expanded: boolean) => {\n      const newExpanded = new Set(this.treeState.expandedIds);\n      if (expanded) {\n        newExpanded.add(id);\n      } else {\n        newExpanded.delete(id);\n      }\n      this.treeState = {\n        ...this.treeState,\n        expandedIds: newExpanded,\n      };\n    },\n  };\n\n  @provide({ context: treeContext })\n  @state()\n  private providedContext: TreeContext = {\n    state: this.treeState,\n    actions: this.treeActions,\n  };\n\n  private findItem(id: string, items: TreeItem[]): TreeItem | null {\n    for (const item of items) {\n      if (item.id === id) return item;\n      if (item.children) {\n        const found = this.findItem(id, item.children);\n        if (found) return found;\n      }\n    }\n    return null;\n  }\n\n  private initializeExpandedState(): void {\n    if (this.expandAll && this.items.length > 0) {\n      this.treeState = {\n        ...this.treeState,\n        expandedIds: collectAllIds(this.items),\n      };\n    }\n  }\n\n  protected willUpdate(changedProperties: PropertyValues): void {\n    // Sync external selectedId with internal state\n    if (changedProperties.has(\"selectedId\") && this.selectedId !== this.treeState.selectedId) {\n      this.treeState = {\n        ...this.treeState,\n        selectedId: this.selectedId,\n      };\n    }\n\n    // Always update provided context\n    this.providedContext = {\n      state: this.treeState,\n      actions: this.treeActions,\n    };\n\n    super.willUpdate(changedProperties);\n  }\n\n  protected updated(changedProperties: PropertyValues): void {\n    super.updated(changedProperties);\n\n    // Re-initialize expanded state when items change\n    if (changedProperties.has(\"items\")) {\n      this.initializeExpandedState();\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.initializeExpandedState();\n  }\n\n  render() {\n    return html`\n      <div class=\"tree-container\">\n        ${this.showHeader ? html`<div class=\"header\">${this.header}</div>` : nothing}\n        ${this.items.length > 0\n          ? this.items.map(\n              (item) => html`<ef-tree-item .item=${item}></ef-tree-item>`\n            )\n          : html`<div class=\"empty\">No items</div>`}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ef-tree\": EFTree;\n  }\n}\n"],"mappings":";;;;;;;;AA+BO,mBAAMA,iBAAe,WAAW;;;eAgDjB,EAAE;gBAIb;oBAII;oBAIe;mBAIhB;mBAGmB;GAC7B,YAAY;GACZ,6BAAa,IAAI,KAAK;GACvB;qBAEkC;GACjC,SAAS,OAAsB;AAC7B,SAAK,YAAY;KACf,GAAG,KAAK;KACR,YAAY;KACb;IAGD,MAAM,OAAO,KAAK,KAAK,SAAS,IAAI,KAAK,MAAM,GAAG;AAElD,SAAK,cACH,IAAI,YAAY,eAAe;KAC7B,QAAQ;MAAE;MAAI;MAAM;KACpB,SAAS;KACT,UAAU;KACX,CAAC,CACH;;GAGH,iBAAiB,OAAe;IAC9B,MAAM,cAAc,IAAI,IAAI,KAAK,UAAU,YAAY;AACvD,QAAI,YAAY,IAAI,GAAG,CACrB,aAAY,OAAO,GAAG;QAEtB,aAAY,IAAI,GAAG;AAErB,SAAK,YAAY;KACf,GAAG,KAAK;KACR,aAAa;KACd;;GAGH,cAAc,IAAY,aAAsB;IAC9C,MAAM,cAAc,IAAI,IAAI,KAAK,UAAU,YAAY;AACvD,QAAI,SACF,aAAY,IAAI,GAAG;QAEnB,aAAY,OAAO,GAAG;AAExB,SAAK,YAAY;KACf,GAAG,KAAK;KACR,aAAa;KACd;;GAEJ;yBAIsC;GACrC,OAAO,KAAK;GACZ,SAAS,KAAK;GACf;;;gBA1He,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4HnB,AAAQ,SAAS,IAAY,OAAoC;AAC/D,OAAK,MAAM,QAAQ,OAAO;AACxB,OAAI,KAAK,OAAO,GAAI,QAAO;AAC3B,OAAI,KAAK,UAAU;IACjB,MAAM,QAAQ,KAAK,SAAS,IAAI,KAAK,SAAS;AAC9C,QAAI,MAAO,QAAO;;;AAGtB,SAAO;;CAGT,AAAQ,0BAAgC;AACtC,MAAI,KAAK,aAAa,KAAK,MAAM,SAAS,EACxC,MAAK,YAAY;GACf,GAAG,KAAK;GACR,aAAa,cAAc,KAAK,MAAM;GACvC;;CAIL,AAAU,WAAW,mBAAyC;AAE5D,MAAI,kBAAkB,IAAI,aAAa,IAAI,KAAK,eAAe,KAAK,UAAU,WAC5E,MAAK,YAAY;GACf,GAAG,KAAK;GACR,YAAY,KAAK;GAClB;AAIH,OAAK,kBAAkB;GACrB,OAAO,KAAK;GACZ,SAAS,KAAK;GACf;AAED,QAAM,WAAW,kBAAkB;;CAGrC,AAAU,QAAQ,mBAAyC;AACzD,QAAM,QAAQ,kBAAkB;AAGhC,MAAI,kBAAkB,IAAI,QAAQ,CAChC,MAAK,yBAAyB;;CAIlC,oBAA0B;AACxB,QAAM,mBAAmB;AACzB,OAAK,yBAAyB;;CAGhC,SAAS;AACP,SAAO,IAAI;;UAEL,KAAK,aAAa,IAAI,uBAAuB,KAAK,OAAO,UAAU,QAAQ;UAC3E,KAAK,MAAM,SAAS,IAClB,KAAK,MAAM,KACR,SAAS,IAAI,uBAAuB,KAAK,kBAC3C,GACD,IAAI,oCAAoC;;;;;YA1IjD,SAAS;CAAE,MAAM;CAAO,WAAW;CAAO,CAAC;YAI3C,SAAS,EAAE,MAAM,QAAQ,CAAC;YAI1B,SAAS;CAAE,MAAM;CAAS,WAAW;CAAe,CAAC;YAIrD,SAAS;CAAE,MAAM;CAAQ,WAAW;CAAe,CAAC;YAIpD,SAAS;CAAE,MAAM;CAAS,WAAW;CAAc,CAAC;YAGpD,OAAO;YAoDP,QAAQ,EAAE,SAAS,aAAa,CAAC,EACjC,OAAO;qBAxHT,cAAc,UAAU"}

package/dist/gui/tree/EFTreeItem.d.ts

@@ -0,0 +1,38 @@
+import { TreeContext, TreeItem } from "./treeContext.js";
+import * as lit17 from "lit";
+import { LitElement, nothing } from "lit";
+import * as lit_html17 from "lit-html";
+
+//#region src/gui/tree/EFTreeItem.d.ts
+
+/**
+ * Generic tree item component.
+ *
+ * Renders a single item in a tree with:
+ * - Expand/collapse toggle for items with children
+ * - Optional icon
+ * - Label
+ * - Recursive children rendering
+ *
+ * @fires tree-item-click - When item is clicked (for selection)
+ */
+declare class EFTreeItem extends LitElement {
+  static styles: lit17.CSSResult;
+  treeContext?: TreeContext;
+  item: TreeItem;
+  private localExpanded;
+  get isSelected(): boolean;
+  get isExpanded(): boolean;
+  get hasChildren(): boolean;
+  private handleClick;
+  private handleExpandClick;
+  render(): lit_html17.TemplateResult<1> | typeof nothing;
+}
+declare global {
+  interface HTMLElementTagNameMap {
+    "ef-tree-item": EFTreeItem;
+  }
+}
+//#endregion
+export { EFTreeItem };
+//# sourceMappingURL=EFTreeItem.d.ts.map

package/dist/gui/tree/EFTreeItem.js

@@ -0,0 +1,146 @@
+import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.94.0/helpers/decorate.js";
+import { treeContext } from "./treeContext.js";
+import { consume } from "@lit/context";
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+//#region src/gui/tree/EFTreeItem.ts
+let EFTreeItem = class EFTreeItem$1 extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.localExpanded = true;
+	}
+	static {
+		this.styles = css`
+    :host {
+      display: block;
+    }
+
+    .item-row {
+      display: flex;
+      align-items: center;
+      height: var(--tree-item-height, 1.5rem);
+      padding-left: var(--tree-item-padding-left, 0.5rem);
+      padding-right: var(--tree-item-padding-right, 0.5rem);
+      font-size: var(--tree-item-font-size, 0.75rem);
+      cursor: pointer;
+      user-select: none;
+      color: var(--tree-text, rgb(226 232 240));
+    }
+
+    .item-row:hover {
+      background: var(--tree-hover-bg, rgba(148, 163, 184, 0.2));
+    }
+
+    .item-row[data-selected] {
+      background: var(--tree-selected-bg, rgba(59, 130, 246, 0.3));
+    }
+
+    .expand-icon {
+      width: var(--tree-expand-icon-size, 1rem);
+      height: var(--tree-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(--tree-icon-gap, 0.25rem);
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .label {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .children {
+      padding-left: var(--tree-indent, 1rem);
+    }
+
+    .children[data-collapsed] {
+      display: none;
+    }
+  `;
+	}
+	get isSelected() {
+		if (!this.treeContext || !this.item) return false;
+		return this.treeContext.state.selectedId === this.item.id;
+	}
+	get isExpanded() {
+		if (!this.treeContext || !this.item) return this.localExpanded;
+		return this.treeContext.state.expandedIds.has(this.item.id);
+	}
+	get hasChildren() {
+		return Boolean(this.item?.children && this.item.children.length > 0);
+	}
+	handleClick(e) {
+		e.stopPropagation();
+		if (this.treeContext && this.item) this.treeContext.actions.select(this.item.id);
+	}
+	handleExpandClick(e) {
+		e.stopPropagation();
+		if (this.treeContext && this.item) this.treeContext.actions.toggleExpanded(this.item.id);
+		else this.localExpanded = !this.localExpanded;
+	}
+	render() {
+		if (!this.item) return nothing;
+		const expanded = this.isExpanded;
+		return html`
+      <div
+        class="item-row"
+        ?data-selected=${this.isSelected}
+        @click=${this.handleClick}
+      >
+        ${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>`}
+        ${this.item.icon ? html`<span class="icon">${this.item.icon}</span>` : nothing}
+        <span class="label">${this.item.label}</span>
+      </div>
+      ${this.hasChildren ? html`
+            <div class="children" ?data-collapsed=${!expanded}>
+              ${this.item.children.map((child) => html`<ef-tree-item .item=${child}></ef-tree-item>`)}
+            </div>
+          ` : nothing}
+    `;
+	}
+};
+__decorate([consume({
+	context: treeContext,
+	subscribe: true
+})], EFTreeItem.prototype, "treeContext", void 0);
+__decorate([property({
+	type: Object,
+	attribute: false
+})], EFTreeItem.prototype, "item", void 0);
+__decorate([state()], EFTreeItem.prototype, "localExpanded", void 0);
+EFTreeItem = __decorate([customElement("ef-tree-item")], EFTreeItem);
+
+//#endregion
+export { EFTreeItem };
+//# sourceMappingURL=EFTreeItem.js.map

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

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

package/dist/gui/tree/treeContext.d.ts

@@ -0,0 +1,60 @@
+import { TemplateResult } from "lit";
+
+//#region src/gui/tree/treeContext.d.ts
+
+/**
+ * Generic tree item data structure.
+ * Used by ef-tree for data-driven tree rendering.
+ */
+interface TreeItem {
+  /** Unique identifier for this item */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional icon (Lit TemplateResult or string) */
+  icon?: TemplateResult | string;
+  /** Child items (folders have children, leaves don't) */
+  children?: TreeItem[];
+  /** Arbitrary payload data */
+  data?: unknown;
+}
+/**
+ * Tree component state
+ */
+interface TreeState {
+  /** Currently selected item ID */
+  selectedId: string | null;
+  /** Set of expanded item IDs */
+  expandedIds: Set<string>;
+}
+/**
+ * Tree component actions
+ */
+interface TreeActions {
+  /** Select an item by ID */
+  select: (id: string | null) => void;
+  /** Toggle an item's expanded state */
+  toggleExpanded: (id: string) => void;
+  /** Set an item's expanded state explicitly */
+  setExpanded: (id: string, expanded: boolean) => void;
+}
+/**
+ * Tree context provided to tree items
+ */
+interface TreeContext {
+  state: TreeState;
+  actions: TreeActions;
+}
+/**
+ * Lit context for tree components
+ */
+declare const treeContext: {
+  __context__: TreeContext;
+};
+/**
+ * Helper to collect all item IDs from a tree (for default expanded state)
+ */
+declare function collectAllIds(items: TreeItem[]): Set<string>;
+//#endregion
+export { TreeActions, TreeContext, TreeItem, TreeState, collectAllIds, treeContext };
+//# sourceMappingURL=treeContext.d.ts.map

package/dist/gui/tree/treeContext.js

@@ -0,0 +1,23 @@
+import { createContext } from "@lit/context";
+
+//#region src/gui/tree/treeContext.ts
+/**
+* Lit context for tree components
+*/
+const treeContext = createContext("ef-tree-context");
+/**
+* Helper to collect all item IDs from a tree (for default expanded state)
+*/
+function collectAllIds(items) {
+	const ids = /* @__PURE__ */ new Set();
+	function traverse(item) {
+		ids.add(item.id);
+		if (item.children) for (const child of item.children) traverse(child);
+	}
+	for (const item of items) traverse(item);
+	return ids;
+}
+
+//#endregion
+export { collectAllIds, treeContext };
+//# sourceMappingURL=treeContext.js.map

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

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

package/dist/index.d.ts

@@ -1,29 +1,53 @@
 import { TraceContext } from "./otel/tracingHelpers.js";
+import { TemporalMixinInterface, isEFTemporal } from "./elements/EFTemporal.js";
 import { EFMedia } from "./elements/EFMedia.js";
-import { EFTimegroup } from "./elements/EFTimegroup.js";
-import { EFImage } from "./elements/EFImage.js";
-import { EFAudio } from "./elements/EFAudio.js";
+import { ContainerInfo, getContainerInfoFromElement } from "./elements/ContainerInfo.js";
+import { ElementPositionInfo, PositionInfoMixin, getPositionInfoFromElement } from "./elements/ElementPositionInfo.js";
+import { CanvasElementBounds, CanvasElementData, SelectionState } from "./canvas/api/types.js";
+import { EFPanZoom, PanZoomTransform } from "./elements/EFPanZoom.js";
+import { EFOverlayItem, OverlayItemPosition } from "./gui/EFOverlayItem.js";
+import { EFOverlayLayer } from "./gui/EFOverlayLayer.js";
+import { EFTransformHandles, TransformBounds } from "./gui/EFTransformHandles.js";
+import { EFCanvas } from "./canvas/EFCanvas.js";
+import { EFHierarchy } from "./gui/hierarchy/EFHierarchy.js";
+import { EFTrimHandles, TrimChangeDetail } from "./gui/timeline/TrimHandles.js";
 import { EFVideo } from "./elements/EFVideo.js";
+import { EFThumbnailStrip } from "./elements/EFThumbnailStrip.js";
+import { EFAudio } from "./elements/EFAudio.js";
 import { EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment } from "./elements/EFCaptions.js";
+import { EFTimelineRuler, calculateFrameIntervalMs, calculatePixelsPerFrame, quantizeToFrameTimeMs, shouldShowFrameMarkers } from "./gui/EFTimelineRuler.js";
+import { EFTimeline } from "./gui/timeline/EFTimeline.js";
+import { EFFilmstrip } from "./gui/EFFilmstrip.js";
+import { EFFitScale } from "./gui/EFFitScale.js";
+import { EFWorkbench } from "./gui/EFWorkbench.js";
+import { EFTimegroup } from "./elements/EFTimegroup.js";
+import { elementNeedsFitScale, needsFitScale } from "./gui/FitScaleHelpers.js";
+import { EFImage } from "./elements/EFImage.js";
 import { EFTextSegment } from "./elements/EFTextSegment.js";
 import { EFText } from "./elements/EFText.js";
 import { EFWaveform } from "./elements/EFWaveform.js";
 import { EFConfiguration } from "./gui/EFConfiguration.js";
-import { EFWorkbench } from "./gui/EFWorkbench.js";
 import { EFPreview } from "./gui/EFPreview.js";
-import { EFFilmstrip } from "./gui/EFFilmstrip.js";
+import { HierarchyActions, HierarchyContext, HierarchyState, hierarchyContext } from "./gui/hierarchy/hierarchyContext.js";
+import { EFAudioHierarchyItem, EFCaptionsActiveWordHierarchyItem, EFCaptionsHierarchyItem, EFHTMLHierarchyItem, EFHierarchyItem, EFImageHierarchyItem, EFTextHierarchyItem, EFTextSegmentHierarchyItem, EFTimegroupHierarchyItem, EFVideoHierarchyItem, EFWaveformHierarchyItem } from "./gui/hierarchy/EFHierarchyItem.js";
+import { TreeActions, TreeContext, TreeItem, TreeState, collectAllIds, treeContext } from "./gui/tree/treeContext.js";
+import { EFTreeItem } from "./gui/tree/EFTreeItem.js";
+import { EFTree } from "./gui/tree/EFTree.js";
 import { EFTogglePlay } from "./gui/EFTogglePlay.js";
 import { EFPlay } from "./gui/EFPlay.js";
 import { EFPause } from "./gui/EFPause.js";
 import { EFToggleLoop } from "./gui/EFToggleLoop.js";
 import { EFScrubber } from "./gui/EFScrubber.js";
 import { EFTimeDisplay } from "./gui/EFTimeDisplay.js";
+import { EFActiveRootTemporal } from "./gui/EFActiveRootTemporal.js";
 import { DialChangeDetail, EFDial } from "./gui/EFDial.js";
 import { EFControls } from "./gui/EFControls.js";
 import { EFFocusOverlay } from "./gui/EFFocusOverlay.js";
+import { getCornerPoint, getOppositeCorner, rotatePoint } from "./gui/transformUtils.js";
 import { BoxBounds, EFResizableBox } from "./gui/EFResizableBox.js";
-import { EFFitScale } from "./gui/EFFitScale.js";
 import { EFSurface } from "./elements/EFSurface.js";
-import { EFThumbnailStrip } from "./elements/EFThumbnailStrip.js";
+import { EFCanvasItem } from "./canvas/EFCanvasItem.js";
+import { CanvasAPI } from "./canvas/api/CanvasAPI.js";
+import { SelectionModel } from "./canvas/selection/SelectionModel.js";
 import { RenderInfo, getRenderInfo } from "./getRenderInfo.js";
-export { type BoxBounds, type DialChangeDetail, EFAudio, EFCaptions, EFCaptionsActiveWord, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsSegment, EFConfiguration, EFControls, EFDial, EFFilmstrip, EFFitScale, EFFocusOverlay, EFImage, type EFMedia, EFPause, EFPlay, EFPreview, EFResizableBox, EFScrubber, EFSurface, EFText, EFTextSegment, EFThumbnailStrip, EFTimeDisplay, EFTimegroup, EFToggleLoop, EFTogglePlay, EFVideo, EFWaveform, EFWorkbench, RenderInfo, type TraceContext, getRenderInfo };
+export { type BoxBounds, CanvasAPI, type CanvasElementBounds, type CanvasElementData, type ContainerInfo, type DialChangeDetail, EFActiveRootTemporal, EFAudio, EFAudioHierarchyItem, EFCanvas, EFCanvasItem, EFCaptions, EFCaptionsActiveWord, EFCaptionsActiveWordHierarchyItem, EFCaptionsAfterActiveWord, EFCaptionsBeforeActiveWord, EFCaptionsHierarchyItem, EFCaptionsSegment, EFConfiguration, EFControls, EFDial, EFFilmstrip, EFFitScale, EFFocusOverlay, EFHTMLHierarchyItem, EFHierarchy, EFHierarchyItem, EFImage, EFImageHierarchyItem, type EFMedia, EFOverlayItem, EFOverlayLayer, EFPanZoom, EFPause, EFPlay, EFPreview, EFResizableBox, EFScrubber, EFSurface, EFText, EFTextHierarchyItem, EFTextSegment, EFTextSegmentHierarchyItem, EFThumbnailStrip, EFTimeDisplay, EFTimegroup, EFTimegroupHierarchyItem, EFTimeline, EFTimelineRuler, EFToggleLoop, EFTogglePlay, EFTransformHandles, EFTree, EFTreeItem, EFTrimHandles, EFVideo, EFVideoHierarchyItem, EFWaveform, EFWaveformHierarchyItem, EFWorkbench, type ElementPositionInfo, type HierarchyActions, type HierarchyContext, type HierarchyState, type OverlayItemPosition, type PanZoomTransform, PositionInfoMixin, RenderInfo, SelectionModel, type SelectionState, type TemporalMixinInterface, type TraceContext, type TransformBounds, type TreeActions, type TreeContext, type TreeItem, type TreeState, type TrimChangeDetail, calculateFrameIntervalMs, calculatePixelsPerFrame, collectAllIds, elementNeedsFitScale, getContainerInfoFromElement, getCornerPoint, getOppositeCorner, getPositionInfoFromElement, getRenderInfo, hierarchyContext, isEFTemporal, needsFitScale, quantizeToFrameTimeMs, rotatePoint, shouldShowFrameMarkers, treeContext };