@editframe/elements 0.19.2-beta.0 → 0.20.0-beta.0

package/dist/utils/LRUCache.js

@@ -112,4 +112,385 @@ var SizeAwareLRUCache = class {
 		return this.maxSizeBytes;
 	}
 };
-export { LRUCache, SizeAwareLRUCache };
+/**
+* Red-Black Tree node colors
+*/
+var Color = /* @__PURE__ */ function(Color$1) {
+	Color$1["RED"] = "RED";
+	Color$1["BLACK"] = "BLACK";
+	return Color$1;
+}(Color || {});
+/**
+* Red-Black Tree node for ordered key storage
+*/
+var RBTreeNode = class {
+	constructor(key, color = Color.RED, left = null, right = null, parent = null) {
+		this.key = key;
+		this.color = color;
+		this.left = left;
+		this.right = right;
+		this.parent = parent;
+	}
+};
+/**
+* Red-Black Tree implementation for O(log n) operations
+* Supports insert, delete, search, range queries, and nearest neighbor
+*/
+var RedBlackTree = class {
+	constructor(compareFn) {
+		this.root = null;
+		this.compareFn = compareFn;
+	}
+	insert(key) {
+		const node = new RBTreeNode(key);
+		if (!this.root) {
+			this.root = node;
+			node.color = Color.BLACK;
+			return;
+		}
+		this.insertNode(node);
+		this.fixInsert(node);
+	}
+	delete(key) {
+		const node = this.findNode(key);
+		if (!node) return false;
+		this.deleteNode(node);
+		return true;
+	}
+	find(key) {
+		const node = this.findNode(key);
+		return node ? node.key : null;
+	}
+	findNearestInRange(center, distance) {
+		const start = this.subtractDistance(center, distance);
+		const end = this.addDistance(center, distance);
+		return this.findRange(start, end);
+	}
+	subtractDistance(center, distance) {
+		if (typeof center === "number" && typeof distance === "number") return center - distance;
+		return center;
+	}
+	addDistance(center, distance) {
+		if (typeof center === "number" && typeof distance === "number") return center + distance;
+		return center;
+	}
+	findRange(start, end) {
+		const result = [];
+		this.inorderRange(this.root, start, end, result);
+		return result;
+	}
+	getAllSorted() {
+		const result = [];
+		this.inorder(this.root, result);
+		return result;
+	}
+	findNode(key) {
+		let current = this.root;
+		while (current) {
+			const cmp = this.compareFn(key, current.key);
+			if (cmp === 0) return current;
+			current = cmp < 0 ? current.left : current.right;
+		}
+		return null;
+	}
+	insertNode(node) {
+		let parent = null;
+		let current = this.root;
+		while (current) {
+			parent = current;
+			const cmp = this.compareFn(node.key, current.key);
+			current = cmp < 0 ? current.left : current.right;
+		}
+		node.parent = parent;
+		if (!parent) this.root = node;
+		else {
+			const cmp = this.compareFn(node.key, parent.key);
+			if (cmp < 0) parent.left = node;
+			else parent.right = node;
+		}
+	}
+	fixInsert(node) {
+		while (node.parent && node.parent.color === Color.RED) if (node.parent === node.parent.parent?.left) {
+			const uncle = node.parent.parent.right;
+			if (uncle?.color === Color.RED) {
+				node.parent.color = Color.BLACK;
+				uncle.color = Color.BLACK;
+				node.parent.parent.color = Color.RED;
+				node = node.parent.parent;
+			} else {
+				if (node === node.parent.right) {
+					node = node.parent;
+					this.rotateLeft(node);
+				}
+				if (node.parent) {
+					node.parent.color = Color.BLACK;
+					if (node.parent.parent) {
+						node.parent.parent.color = Color.RED;
+						this.rotateRight(node.parent.parent);
+					}
+				}
+			}
+		} else {
+			const uncle = node.parent.parent?.left;
+			if (uncle?.color === Color.RED) {
+				node.parent.color = Color.BLACK;
+				uncle.color = Color.BLACK;
+				if (node.parent.parent) {
+					node.parent.parent.color = Color.RED;
+					node = node.parent.parent;
+				}
+			} else {
+				if (node === node.parent.left) {
+					node = node.parent;
+					this.rotateRight(node);
+				}
+				if (node.parent) {
+					node.parent.color = Color.BLACK;
+					if (node.parent.parent) {
+						node.parent.parent.color = Color.RED;
+						this.rotateLeft(node.parent.parent);
+					}
+				}
+			}
+		}
+		if (this.root) this.root.color = Color.BLACK;
+	}
+	deleteNode(node) {
+		let y = node;
+		let yOriginalColor = y.color;
+		let x;
+		if (!node.left) {
+			x = node.right;
+			this.transplant(node, node.right);
+		} else if (!node.right) {
+			x = node.left;
+			this.transplant(node, node.left);
+		} else {
+			y = this.minimum(node.right);
+			yOriginalColor = y.color;
+			x = y.right;
+			if (y.parent === node) {
+				if (x) x.parent = y;
+			} else {
+				this.transplant(y, y.right);
+				y.right = node.right;
+				if (y.right) y.right.parent = y;
+			}
+			this.transplant(node, y);
+			y.left = node.left;
+			if (y.left) y.left.parent = y;
+			y.color = node.color;
+		}
+		if (yOriginalColor === Color.BLACK && x) this.fixDelete(x);
+	}
+	fixDelete(node) {
+		while (node !== this.root && node.color === Color.BLACK) if (node === node.parent?.left) {
+			let sibling = node.parent.right;
+			if (sibling?.color === Color.RED) {
+				sibling.color = Color.BLACK;
+				node.parent.color = Color.RED;
+				this.rotateLeft(node.parent);
+				sibling = node.parent.right;
+			}
+			if (sibling?.left?.color !== Color.RED && sibling?.right?.color !== Color.RED) {
+				if (sibling) sibling.color = Color.RED;
+				node = node.parent;
+			} else {
+				if (sibling?.right?.color !== Color.RED) {
+					if (sibling.left) sibling.left.color = Color.BLACK;
+					sibling.color = Color.RED;
+					this.rotateRight(sibling);
+					sibling = node.parent.right;
+				}
+				if (sibling) {
+					sibling.color = node.parent.color;
+					node.parent.color = Color.BLACK;
+					if (sibling.right) sibling.right.color = Color.BLACK;
+					this.rotateLeft(node.parent);
+				}
+				if (!this.root) throw new Error("Root is null");
+				node = this.root;
+			}
+		} else {
+			let sibling = node.parent?.left;
+			if (sibling?.color === Color.RED) {
+				sibling.color = Color.BLACK;
+				if (node.parent) node.parent.color = Color.RED;
+				if (node.parent) this.rotateRight(node.parent);
+				sibling = node.parent?.left;
+			}
+			if (sibling?.right?.color !== Color.RED && sibling?.left?.color !== Color.RED) {
+				if (sibling) sibling.color = Color.RED;
+				if (node.parent === null) throw new Error("Node parent is null");
+				node = node.parent;
+			} else {
+				if (sibling?.left?.color !== Color.RED) {
+					if (sibling.right) sibling.right.color = Color.BLACK;
+					sibling.color = Color.RED;
+					this.rotateLeft(sibling);
+					sibling = node.parent?.left;
+				}
+				if (sibling) {
+					sibling.color = node.parent?.color || Color.BLACK;
+					if (node.parent) node.parent.color = Color.BLACK;
+					if (sibling.left) sibling.left.color = Color.BLACK;
+					if (node.parent) this.rotateRight(node.parent);
+				}
+				if (!this.root) throw new Error("Root is null");
+				node = this.root;
+			}
+		}
+		node.color = Color.BLACK;
+	}
+	rotateLeft(node) {
+		const rightChild = node.right;
+		if (!rightChild) throw new Error("Right child is null");
+		node.right = rightChild.left;
+		if (rightChild.left) rightChild.left.parent = node;
+		rightChild.parent = node.parent;
+		if (!node.parent) this.root = rightChild;
+		else if (node === node.parent.left) node.parent.left = rightChild;
+		else node.parent.right = rightChild;
+		rightChild.left = node;
+		node.parent = rightChild;
+	}
+	rotateRight(node) {
+		const leftChild = node.left;
+		if (!leftChild) throw new Error("Left child is null");
+		node.left = leftChild.right;
+		if (leftChild.right) leftChild.right.parent = node;
+		leftChild.parent = node.parent;
+		if (!node.parent) this.root = leftChild;
+		else if (node === node.parent.right) node.parent.right = leftChild;
+		else node.parent.left = leftChild;
+		leftChild.right = node;
+		node.parent = leftChild;
+	}
+	transplant(u, v) {
+		if (!u.parent) this.root = v;
+		else if (u === u.parent.left) u.parent.left = v;
+		else u.parent.right = v;
+		if (v) v.parent = u.parent;
+	}
+	minimum(node) {
+		while (node.left) node = node.left;
+		return node;
+	}
+	inorder(node, result) {
+		if (node) {
+			this.inorder(node.left, result);
+			result.push(node.key);
+			this.inorder(node.right, result);
+		}
+	}
+	inorderRange(node, start, end, result) {
+		if (!node) return;
+		const startCmp = this.compareFn(node.key, start);
+		const endCmp = this.compareFn(node.key, end);
+		if (startCmp > 0) this.inorderRange(node.left, start, end, result);
+		if (startCmp >= 0 && endCmp <= 0) result.push(node.key);
+		if (endCmp < 0) this.inorderRange(node.right, start, end, result);
+	}
+};
+/**
+* LRU cache with binary search capabilities using Red-Black tree
+* All operations are O(log n) for ordered queries and O(1) for LRU operations
+*/
+var OrderedLRUCache = class {
+	constructor(maxSize, compareFn) {
+		this.cache = /* @__PURE__ */ new Map();
+		this.maxSize = maxSize;
+		this.compareFn = compareFn || ((a, b) => a < b ? -1 : a > b ? 1 : 0);
+		this.tree = new RedBlackTree(this.compareFn);
+	}
+	/**
+	* Get value by exact key (O(1))
+	*/
+	get(key) {
+		const value = this.cache.get(key);
+		if (value) {
+			this.cache.delete(key);
+			this.cache.set(key, value);
+		}
+		return value;
+	}
+	/**
+	* Set key-value pair (O(log n) for tree operations, O(1) for cache)
+	*/
+	set(key, value) {
+		const isUpdate = this.cache.has(key);
+		if (isUpdate) this.cache.delete(key);
+		else {
+			if (this.cache.size >= this.maxSize) {
+				const firstKey = this.cache.keys().next().value;
+				if (firstKey) {
+					this.cache.delete(firstKey);
+					this.tree.delete(firstKey);
+				}
+			}
+			this.tree.insert(key);
+		}
+		this.cache.set(key, value);
+	}
+	/**
+	* Find exact key using tree search (O(log n))
+	*/
+	findExact(key) {
+		const foundKey = this.tree.find(key);
+		if (foundKey !== null) return this.get(key);
+		return void 0;
+	}
+	/**
+	* Find keys within distance of center point (O(log n + k) where k is result count)
+	* Returns empty array if no keys found in range
+	*/
+	findNearestInRange(center, distance) {
+		const nearestKeys = this.tree.findNearestInRange(center, distance);
+		const result = [];
+		for (const key of nearestKeys) {
+			const value = this.get(key);
+			if (value !== void 0) result.push({
+				key,
+				value
+			});
+		}
+		return result;
+	}
+	/**
+	* Find all key-value pairs in range [start, end] (O(log n + k) where k is result count)
+	*/
+	findRange(start, end) {
+		const keys = this.tree.findRange(start, end);
+		const result = [];
+		for (const key of keys) {
+			const value = this.get(key);
+			if (value !== void 0) result.push({
+				key,
+				value
+			});
+		}
+		return result;
+	}
+	/**
+	* Get all keys in sorted order (O(n))
+	*/
+	getSortedKeys() {
+		return this.tree.getAllSorted();
+	}
+	has(key) {
+		return this.cache.has(key);
+	}
+	delete(key) {
+		const deleted = this.cache.delete(key);
+		if (deleted) this.tree.delete(key);
+		return deleted;
+	}
+	clear() {
+		this.cache.clear();
+		this.tree = new RedBlackTree(this.compareFn);
+	}
+	get size() {
+		return this.cache.size;
+	}
+};
+export { LRUCache, OrderedLRUCache, SizeAwareLRUCache };

package/dist/utils/LRUCache.test.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@editframe/elements",
-  "version": "0.19.2-beta.0",
+  "version": "0.20.0-beta.0",
   "description": "",
   "exports": {
     ".": {
@@ -27,7 +27,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.19.2-beta.0",
+    "@editframe/assets": "0.20.0-beta.0",
     "@lit/context": "^1.1.2",
     "@lit/task": "^1.0.1",
     "d3": "^7.9.0",

package/src/elements/ContextProxiesController.ts

@@ -0,0 +1,123 @@
+import type { Context } from "@lit/context";
+import { ContextEvent } from "@lit/context";
+import type { LitElement, ReactiveController } from "lit";
+
+/**
+ * Configuration for context proxying
+ */
+export type ContextProxyConfig = {
+  target: () => HTMLElement | null;
+  contexts: Context<any, any>[];
+};
+
+/**
+ * A ReactiveController that proxies context requests to a target element.
+ *
+ * Usage:
+ * ```typescript
+ * @customElement('my-proxy')
+ * class MyProxy extends LitElement {
+ *   @state()
+ *   targetElement: HTMLElement | null = null;
+ *
+ *   // @ts-expect-error controller is intentionally not referenced directly
+ *   #contextProxyController = new ContextProxyController(this, {
+ *     target: () => this.targetElement,
+ *     contexts: [playingContext, loopContext, targetTimegroupContext]
+ *   });
+ * }
+ * ```
+ */
+export class ContextProxyController implements ReactiveController {
+  private host: LitElement;
+  private proxyMap = new Map<Context<any, any>, () => HTMLElement | null>();
+  private boundHandler: EventListener;
+  private pendingRequests: ContextEvent<any>[] = [];
+
+  constructor(host: LitElement, config: ContextProxyConfig) {
+    this.host = host;
+    this.host.addController(this);
+
+    // Create the bound handler once
+    this.boundHandler = this.handleContextRequest.bind(this);
+
+    // Build the proxy map
+    for (const context of config.contexts) {
+      this.proxyMap.set(context, config.target);
+    }
+  }
+
+  hostConnected(): void {
+    this.host.addEventListener("context-request", this.boundHandler);
+  }
+
+  hostDisconnected(): void {
+    this.host.removeEventListener("context-request", this.boundHandler);
+  }
+
+  hostUpdate(): void {
+    // Process any pending requests when the host updates (e.g., when targetElement changes)
+    this.processPendingRequests();
+  }
+
+  private processPendingRequests(): void {
+    if (this.pendingRequests.length === 0) return;
+
+    // Process all pending requests
+    const requestsToProcess = [...this.pendingRequests];
+    this.pendingRequests = [];
+
+    for (const contextEvent of requestsToProcess) {
+      this.processContextRequest(contextEvent);
+    }
+  }
+
+  private handleContextRequest(event: Event): void {
+    const contextEvent = event as ContextEvent<any>;
+
+    // Check if we should proxy this context
+    const targetGetter = this.proxyMap.get(contextEvent.context);
+
+    if (targetGetter) {
+      // Always stop propagation for contexts we handle
+      contextEvent.stopPropagation();
+
+      // Try to process the request immediately
+      const processed = this.processContextRequest(contextEvent);
+
+      if (!processed) {
+        this.pendingRequests.push(contextEvent);
+      }
+    }
+  }
+
+  private processContextRequest(contextEvent: ContextEvent<any>): boolean {
+    const targetGetter = this.proxyMap.get(contextEvent.context);
+    if (!targetGetter) return false;
+
+    // Get the target element using the getter function
+    const targetElement = targetGetter();
+
+    if (!targetElement) {
+      return false;
+    }
+
+    // Use temporary element approach for all requests (both one-time and subscriptions)
+    // Let Lit's context system handle subscription lifecycle properly
+    const tempElement = document.createElement("div");
+    targetElement.appendChild(tempElement);
+
+    try {
+      const newEvent = new ContextEvent(
+        contextEvent.context,
+        contextEvent.callback,
+        contextEvent.subscribe,
+      );
+
+      tempElement.dispatchEvent(newEvent);
+      return true;
+    } finally {
+      targetElement.removeChild(tempElement);
+    }
+  }
+}