@editframe/elements 0.23.8-beta.0 → 0.25.0-beta.0

package/dist/utils/LRUCache.js

@@ -1,3 +1,7 @@
+//#region src/utils/LRUCache.ts
+/**
+* A simple LRU (Least Recently Used) cache implementation
+*/
 var LRUCache = class {
 	constructor(maxSize) {
 		this.cache = /* @__PURE__ */ new Map();
@@ -32,6 +36,10 @@ var LRUCache = class {
 		return this.cache.size;
 	}
 };
+/**
+* Size-aware LRU cache that tracks memory usage in bytes
+* Evicts entries when total size exceeds the maximum
+*/
 var SizeAwareLRUCache = class {
 	constructor(maxSizeBytes) {
 		this.cache = /* @__PURE__ */ new Map();
@@ -105,11 +113,17 @@ var SizeAwareLRUCache = class {
 		return this.maxSizeBytes;
 	}
 };
+/**
+* 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;
@@ -119,6 +133,10 @@ var RBTreeNode = class {
 		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;
@@ -371,6 +389,10 @@ var RedBlackTree = class {
 		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();
@@ -378,6 +400,9 @@ var OrderedLRUCache = class {
 		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) {
@@ -386,6 +411,9 @@ var OrderedLRUCache = class {
 		}
 		return value;
 	}
+	/**
+	* Set key-value pair (O(log n) for tree operations, O(1) for cache)
+	*/
 	set(key, value) {
 		if (this.cache.has(key)) this.cache.delete(key);
 		else {
@@ -400,9 +428,16 @@ var OrderedLRUCache = class {
 		}
 		this.cache.set(key, value);
 	}
+	/**
+	* Find exact key using tree search (O(log n))
+	*/
 	findExact(key) {
 		if (this.tree.find(key) !== null) return this.get(key);
 	}
+	/**
+	* 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 = [];
@@ -415,6 +450,9 @@ var OrderedLRUCache = class {
 		}
 		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 = [];
@@ -427,6 +465,9 @@ var OrderedLRUCache = class {
 		}
 		return result;
 	}
+	/**
+	* Get all keys in sorted order (O(n))
+	*/
 	getSortedKeys() {
 		return this.tree.getAllSorted();
 	}
@@ -446,4 +487,7 @@ var OrderedLRUCache = class {
 		return this.cache.size;
 	}
 };
+
+//#endregion
 export { LRUCache, OrderedLRUCache, SizeAwareLRUCache };
+//# sourceMappingURL=LRUCache.js.map

package/dist/utils/LRUCache.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LRUCache.js","names":["key: K","color: Color","left: RBTreeNode<K> | null","right: RBTreeNode<K> | null","parent: RBTreeNode<K> | null","result: K[]","x: RBTreeNode<K> | null","result: Array<{ key: K; value: V }>"],"sources":["../../src/utils/LRUCache.ts"],"sourcesContent":["/**\n * A simple LRU (Least Recently Used) cache implementation\n */\nexport class LRUCache<K, V> {\n  private cache = new Map<K, V>();\n  private readonly maxSize: number;\n\n  constructor(maxSize: number) {\n    this.maxSize = maxSize;\n  }\n\n  get(key: K): V | undefined {\n    const value = this.cache.get(key);\n    if (value) {\n      // Refresh position by removing and re-adding\n      this.cache.delete(key);\n      this.cache.set(key, value);\n    }\n    return value;\n  }\n\n  set(key: K, value: V): void {\n    if (this.cache.has(key)) {\n      this.cache.delete(key);\n    } else if (this.cache.size >= this.maxSize) {\n      // Remove oldest entry (first item in map)\n      const firstKey = this.cache.keys().next().value;\n      if (firstKey) {\n        this.cache.delete(firstKey);\n      }\n    }\n    this.cache.set(key, value);\n  }\n\n  has(key: K): boolean {\n    return this.cache.has(key);\n  }\n\n  delete(key: K): boolean {\n    return this.cache.delete(key);\n  }\n\n  clear(): void {\n    this.cache.clear();\n  }\n\n  get size(): number {\n    return this.cache.size;\n  }\n}\n\n/**\n * Size-aware LRU cache that tracks memory usage in bytes\n * Evicts entries when total size exceeds the maximum\n */\nexport class SizeAwareLRUCache<K> {\n  private cache = new Map<K, Promise<ArrayBuffer>>();\n  private sizes = new Map<K, number>();\n  private currentSize = 0;\n  private readonly maxSizeBytes: number;\n\n  constructor(maxSizeBytes: number) {\n    this.maxSizeBytes = maxSizeBytes;\n  }\n\n  get(key: K): Promise<ArrayBuffer> | undefined {\n    const value = this.cache.get(key);\n    if (value) {\n      // Refresh position by removing and re-adding\n      const size = this.sizes.get(key) || 0;\n      this.cache.delete(key);\n      this.cache.set(key, value);\n      this.sizes.delete(key);\n      this.sizes.set(key, size);\n    }\n    return value;\n  }\n\n  set(key: K, value: Promise<ArrayBuffer>): void {\n    // If key already exists, remove it first\n    if (this.cache.has(key)) {\n      const oldSize = this.sizes.get(key) || 0;\n      this.currentSize -= oldSize;\n      this.cache.delete(key);\n      this.sizes.delete(key);\n    }\n\n    // Track the size when the promise resolves\n    const sizeTrackingPromise = value\n      .then((buffer) => {\n        const bufferSize = buffer.byteLength;\n        this.sizes.set(key, bufferSize);\n        this.currentSize += bufferSize;\n\n        // Evict oldest entries if we exceed the size limit\n        this.evictIfNecessary();\n\n        return buffer;\n      })\n      .catch((error) => {\n        // If the promise fails, clean up the entry\n        this.cache.delete(key);\n        this.sizes.delete(key);\n        throw error;\n      });\n\n    this.cache.set(key, sizeTrackingPromise);\n  }\n\n  private evictIfNecessary(): void {\n    while (this.currentSize > this.maxSizeBytes && this.cache.size > 0) {\n      // Remove oldest entry (first item in map)\n      const firstKey = this.cache.keys().next().value;\n      if (firstKey) {\n        const size = this.sizes.get(firstKey) || 0;\n        this.currentSize -= size;\n        this.cache.delete(firstKey);\n        this.sizes.delete(firstKey);\n      } else {\n        break;\n      }\n    }\n  }\n\n  has(key: K): boolean {\n    return this.cache.has(key);\n  }\n\n  delete(key: K): boolean {\n    const size = this.sizes.get(key) || 0;\n    this.currentSize -= size;\n    this.sizes.delete(key);\n    return this.cache.delete(key);\n  }\n\n  clear(): void {\n    this.cache.clear();\n    this.sizes.clear();\n    this.currentSize = 0;\n  }\n\n  get size(): number {\n    return this.cache.size;\n  }\n\n  get currentSizeBytes(): number {\n    return this.currentSize;\n  }\n\n  get maxSize(): number {\n    return this.maxSizeBytes;\n  }\n}\n\n/**\n * Red-Black Tree node colors\n */\nenum Color {\n  RED = \"RED\",\n  BLACK = \"BLACK\",\n}\n\n/**\n * Red-Black Tree node for ordered key storage\n */\nclass RBTreeNode<K> {\n  constructor(\n    public key: K,\n    public color: Color = Color.RED,\n    public left: RBTreeNode<K> | null = null,\n    public right: RBTreeNode<K> | null = null,\n    public parent: RBTreeNode<K> | null = null,\n  ) {}\n}\n\n/**\n * Red-Black Tree implementation for O(log n) operations\n * Supports insert, delete, search, range queries, and nearest neighbor\n */\nclass RedBlackTree<K> {\n  private root: RBTreeNode<K> | null = null;\n  private readonly compareFn: (a: K, b: K) => number;\n\n  constructor(compareFn: (a: K, b: K) => number) {\n    this.compareFn = compareFn;\n  }\n\n  insert(key: K): void {\n    const node = new RBTreeNode(key);\n\n    if (!this.root) {\n      this.root = node;\n      node.color = Color.BLACK;\n      return;\n    }\n\n    this.insertNode(node);\n    this.fixInsert(node);\n  }\n\n  delete(key: K): boolean {\n    const node = this.findNode(key);\n    if (!node) return false;\n\n    this.deleteNode(node);\n    return true;\n  }\n\n  find(key: K): K | null {\n    const node = this.findNode(key);\n    return node ? node.key : null;\n  }\n\n  findNearestInRange(center: K, distance: K): K[] {\n    // Calculate the range bounds\n    const start = this.subtractDistance(center, distance);\n    const end = this.addDistance(center, distance);\n\n    // Use existing range search (O(log n + k))\n    return this.findRange(start, end);\n  }\n\n  private subtractDistance(center: K, distance: K): K {\n    if (typeof center === \"number\" && typeof distance === \"number\") {\n      return (center - distance) as K;\n    }\n\n    // For strings, we can't easily subtract distance, so just return center\n    // This means string searches will be exact matches only\n    return center;\n  }\n\n  private addDistance(center: K, distance: K): K {\n    if (typeof center === \"number\" && typeof distance === \"number\") {\n      return (center + distance) as K;\n    }\n\n    // For strings, we can't easily add distance, so just return center\n    // This means string searches will be exact matches only\n    return center;\n  }\n\n  findRange(start: K, end: K): K[] {\n    const result: K[] = [];\n    this.inorderRange(this.root, start, end, result);\n    return result;\n  }\n\n  getAllSorted(): K[] {\n    const result: K[] = [];\n    this.inorder(this.root, result);\n    return result;\n  }\n\n  private findNode(key: K): RBTreeNode<K> | null {\n    let current = this.root;\n\n    while (current) {\n      const cmp = this.compareFn(key, current.key);\n      if (cmp === 0) return current;\n      current = cmp < 0 ? current.left : current.right;\n    }\n\n    return null;\n  }\n\n  private insertNode(node: RBTreeNode<K>): void {\n    let parent = null;\n    let current = this.root;\n\n    while (current) {\n      parent = current;\n      const cmp = this.compareFn(node.key, current.key);\n      current = cmp < 0 ? current.left : current.right;\n    }\n\n    node.parent = parent;\n    if (!parent) {\n      this.root = node;\n    } else {\n      const cmp = this.compareFn(node.key, parent.key);\n      if (cmp < 0) {\n        parent.left = node;\n      } else {\n        parent.right = node;\n      }\n    }\n  }\n\n  private fixInsert(node: RBTreeNode<K>): void {\n    while (node.parent && node.parent.color === Color.RED) {\n      if (node.parent === node.parent.parent?.left) {\n        const uncle = node.parent.parent.right;\n\n        if (uncle?.color === Color.RED) {\n          node.parent.color = Color.BLACK;\n          uncle.color = Color.BLACK;\n          node.parent.parent.color = Color.RED;\n          node = node.parent.parent;\n        } else {\n          if (node === node.parent.right) {\n            node = node.parent;\n            this.rotateLeft(node);\n          }\n\n          if (node.parent) {\n            node.parent.color = Color.BLACK;\n            if (node.parent.parent) {\n              node.parent.parent.color = Color.RED;\n              this.rotateRight(node.parent.parent);\n            }\n          }\n        }\n      } else {\n        const uncle = node.parent.parent?.left;\n\n        if (uncle?.color === Color.RED) {\n          node.parent.color = Color.BLACK;\n          uncle.color = Color.BLACK;\n          if (node.parent.parent) {\n            node.parent.parent.color = Color.RED;\n            node = node.parent.parent;\n          }\n        } else {\n          if (node === node.parent.left) {\n            node = node.parent;\n            this.rotateRight(node);\n          }\n\n          if (node.parent) {\n            node.parent.color = Color.BLACK;\n            if (node.parent.parent) {\n              node.parent.parent.color = Color.RED;\n              this.rotateLeft(node.parent.parent);\n            }\n          }\n        }\n      }\n    }\n\n    if (this.root) {\n      this.root.color = Color.BLACK;\n    }\n  }\n\n  private deleteNode(node: RBTreeNode<K>): void {\n    let y = node;\n    let yOriginalColor = y.color;\n    let x: RBTreeNode<K> | null;\n\n    if (!node.left) {\n      x = node.right;\n      this.transplant(node, node.right);\n    } else if (!node.right) {\n      x = node.left;\n      this.transplant(node, node.left);\n    } else {\n      y = this.minimum(node.right);\n      yOriginalColor = y.color;\n      x = y.right;\n\n      if (y.parent === node) {\n        if (x) x.parent = y;\n      } else {\n        this.transplant(y, y.right);\n        y.right = node.right;\n        if (y.right) y.right.parent = y;\n      }\n\n      this.transplant(node, y);\n      y.left = node.left;\n      if (y.left) y.left.parent = y;\n      y.color = node.color;\n    }\n\n    if (yOriginalColor === Color.BLACK && x) {\n      this.fixDelete(x);\n    }\n  }\n\n  private fixDelete(node: RBTreeNode<K>): void {\n    while (node !== this.root && node.color === Color.BLACK) {\n      if (node === node.parent?.left) {\n        let sibling = node.parent.right;\n\n        if (sibling?.color === Color.RED) {\n          sibling.color = Color.BLACK;\n          node.parent.color = Color.RED;\n          this.rotateLeft(node.parent);\n          sibling = node.parent.right;\n        }\n\n        if (\n          sibling?.left?.color !== Color.RED &&\n          sibling?.right?.color !== Color.RED\n        ) {\n          if (sibling) {\n            sibling.color = Color.RED;\n          }\n          node = node.parent;\n        } else {\n          if (sibling?.right?.color !== Color.RED) {\n            if (sibling.left) sibling.left.color = Color.BLACK;\n            sibling.color = Color.RED;\n            this.rotateRight(sibling);\n            sibling = node.parent.right;\n          }\n\n          if (sibling) {\n            sibling.color = node.parent.color;\n            node.parent.color = Color.BLACK;\n            if (sibling.right) sibling.right.color = Color.BLACK;\n            this.rotateLeft(node.parent);\n          }\n          if (!this.root) {\n            throw new Error(\"Root is null\");\n          }\n          node = this.root;\n        }\n      } else {\n        let sibling = node.parent?.left;\n\n        if (sibling?.color === Color.RED) {\n          sibling.color = Color.BLACK;\n          if (node.parent) node.parent.color = Color.RED;\n          if (node.parent) this.rotateRight(node.parent);\n          sibling = node.parent?.left;\n        }\n\n        if (\n          sibling?.right?.color !== Color.RED &&\n          sibling?.left?.color !== Color.RED\n        ) {\n          if (sibling) {\n            sibling.color = Color.RED;\n          }\n          if (node.parent === null) {\n            throw new Error(\"Node parent is null\");\n          }\n          node = node.parent;\n        } else {\n          if (sibling?.left?.color !== Color.RED) {\n            if (sibling.right) sibling.right.color = Color.BLACK;\n            sibling.color = Color.RED;\n            this.rotateLeft(sibling);\n            sibling = node.parent?.left;\n          }\n\n          if (sibling) {\n            sibling.color = node.parent?.color || Color.BLACK;\n            if (node.parent) node.parent.color = Color.BLACK;\n            if (sibling.left) sibling.left.color = Color.BLACK;\n            if (node.parent) this.rotateRight(node.parent);\n          }\n          if (!this.root) {\n            throw new Error(\"Root is null\");\n          }\n          node = this.root;\n        }\n      }\n    }\n\n    node.color = Color.BLACK;\n  }\n\n  private rotateLeft(node: RBTreeNode<K>): void {\n    const rightChild = node.right;\n    if (!rightChild) {\n      throw new Error(\"Right child is null\");\n    }\n    node.right = rightChild.left;\n\n    if (rightChild.left) {\n      rightChild.left.parent = node;\n    }\n\n    rightChild.parent = node.parent;\n\n    if (!node.parent) {\n      this.root = rightChild;\n    } else if (node === node.parent.left) {\n      node.parent.left = rightChild;\n    } else {\n      node.parent.right = rightChild;\n    }\n\n    rightChild.left = node;\n    node.parent = rightChild;\n  }\n\n  private rotateRight(node: RBTreeNode<K>): void {\n    const leftChild = node.left;\n    if (!leftChild) {\n      throw new Error(\"Left child is null\");\n    }\n    node.left = leftChild.right;\n\n    if (leftChild.right) {\n      leftChild.right.parent = node;\n    }\n\n    leftChild.parent = node.parent;\n\n    if (!node.parent) {\n      this.root = leftChild;\n    } else if (node === node.parent.right) {\n      node.parent.right = leftChild;\n    } else {\n      node.parent.left = leftChild;\n    }\n\n    leftChild.right = node;\n    node.parent = leftChild;\n  }\n\n  private transplant(u: RBTreeNode<K>, v: RBTreeNode<K> | null): void {\n    if (!u.parent) {\n      this.root = v;\n    } else if (u === u.parent.left) {\n      u.parent.left = v;\n    } else {\n      u.parent.right = v;\n    }\n\n    if (v) {\n      v.parent = u.parent;\n    }\n  }\n\n  private minimum(node: RBTreeNode<K>): RBTreeNode<K> {\n    while (node.left) {\n      node = node.left;\n    }\n    return node;\n  }\n\n  private inorder(node: RBTreeNode<K> | null, result: K[]): void {\n    if (node) {\n      this.inorder(node.left, result);\n      result.push(node.key);\n      this.inorder(node.right, result);\n    }\n  }\n\n  private inorderRange(\n    node: RBTreeNode<K> | null,\n    start: K,\n    end: K,\n    result: K[],\n  ): void {\n    if (!node) return;\n\n    const startCmp = this.compareFn(node.key, start);\n    const endCmp = this.compareFn(node.key, end);\n\n    if (startCmp > 0) {\n      this.inorderRange(node.left, start, end, result);\n    }\n\n    if (startCmp >= 0 && endCmp <= 0) {\n      result.push(node.key);\n    }\n\n    if (endCmp < 0) {\n      this.inorderRange(node.right, start, end, result);\n    }\n  }\n}\n\n/**\n * LRU cache with binary search capabilities using Red-Black tree\n * All operations are O(log n) for ordered queries and O(1) for LRU operations\n */\nexport class OrderedLRUCache<K extends number | string, V> {\n  private cache = new Map<K, V>();\n  private tree: RedBlackTree<K>;\n  private readonly maxSize: number;\n  private readonly compareFn: (a: K, b: K) => number;\n\n  constructor(maxSize: number, compareFn?: (a: K, b: K) => number) {\n    this.maxSize = maxSize;\n    this.compareFn = compareFn || ((a, b) => (a < b ? -1 : a > b ? 1 : 0));\n    this.tree = new RedBlackTree(this.compareFn);\n  }\n\n  /**\n   * Get value by exact key (O(1))\n   */\n  get(key: K): V | undefined {\n    const value = this.cache.get(key);\n    if (value) {\n      // Refresh position by removing and re-adding\n      this.cache.delete(key);\n      this.cache.set(key, value);\n    }\n    return value;\n  }\n\n  /**\n   * Set key-value pair (O(log n) for tree operations, O(1) for cache)\n   */\n  set(key: K, value: V): void {\n    const isUpdate = this.cache.has(key);\n\n    if (isUpdate) {\n      this.cache.delete(key);\n    } else {\n      if (this.cache.size >= this.maxSize) {\n        // Remove oldest entry (first item in map)\n        const firstKey = this.cache.keys().next().value;\n        if (firstKey) {\n          this.cache.delete(firstKey);\n          this.tree.delete(firstKey);\n        }\n      }\n      // Add to tree index for new keys\n      this.tree.insert(key);\n    }\n\n    this.cache.set(key, value);\n  }\n\n  /**\n   * Find exact key using tree search (O(log n))\n   */\n  findExact(key: K): V | undefined {\n    const foundKey = this.tree.find(key);\n    if (foundKey !== null) {\n      return this.get(key);\n    }\n    return undefined;\n  }\n\n  /**\n   * Find keys within distance of center point (O(log n + k) where k is result count)\n   * Returns empty array if no keys found in range\n   */\n  findNearestInRange(center: K, distance: K): Array<{ key: K; value: V }> {\n    const nearestKeys = this.tree.findNearestInRange(center, distance);\n    const result: Array<{ key: K; value: V }> = [];\n\n    for (const key of nearestKeys) {\n      const value = this.get(key);\n      if (value !== undefined) {\n        result.push({ key, value });\n      }\n    }\n\n    return result;\n  }\n\n  /**\n   * Find all key-value pairs in range [start, end] (O(log n + k) where k is result count)\n   */\n  findRange(start: K, end: K): Array<{ key: K; value: V }> {\n    const keys = this.tree.findRange(start, end);\n    const result: Array<{ key: K; value: V }> = [];\n\n    for (const key of keys) {\n      const value = this.get(key);\n      if (value !== undefined) {\n        result.push({ key, value });\n      }\n    }\n\n    return result;\n  }\n\n  /**\n   * Get all keys in sorted order (O(n))\n   */\n  getSortedKeys(): ReadonlyArray<K> {\n    return this.tree.getAllSorted();\n  }\n\n  has(key: K): boolean {\n    return this.cache.has(key);\n  }\n\n  delete(key: K): boolean {\n    const deleted = this.cache.delete(key);\n    if (deleted) {\n      this.tree.delete(key);\n    }\n    return deleted;\n  }\n\n  clear(): void {\n    this.cache.clear();\n    this.tree = new RedBlackTree(this.compareFn);\n  }\n\n  get size(): number {\n    return this.cache.size;\n  }\n}\n"],"mappings":"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"}

package/package.json

@@ -1,57 +1,44 @@
 {
   "name": "@editframe/elements",
-  "version": "0.23.8-beta.0",
+  "version": "0.25.0-beta.0",
   "description": "",
   "exports": {
-    ".": {
-      "import": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
-      }
-    },
-    "./styles.css": "./dist/style.css",
-    "./types.json": {
-      "import": {
-        "default": "./types.json"
-      }
-    }
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
   },
   "type": "module",
   "scripts": {
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "build": "vite build",
-    "build:watch": "vite build --watch",
+    "build": "tsdown",
+    "build:watch": "tsdown --watch",
     "typedoc": "typedoc --json ./types.json --plugin typedoc-plugin-zod --excludeExternals ./src && jq -c . ./types.json > ./types.tmp.json && mv ./types.tmp.json ./types.json"
   },
   "author": "",
   "license": "UNLICENSED",
   "dependencies": {
     "@bramus/style-observer": "^1.3.0",
-    "@editframe/assets": "0.23.8-beta.0",
+    "@editframe/assets": "0.25.0-beta.0",
     "@lit/context": "^1.1.6",
     "@lit/task": "^1.0.3",
     "@opentelemetry/api": "^1.9.0",
     "@opentelemetry/context-zone": "^1.26.0",
     "@opentelemetry/core": "^1.26.0",
-    "@opentelemetry/exporter-trace-otlp-http": "^0.53.0",
     "@opentelemetry/resources": "^1.26.0",
     "@opentelemetry/sdk-trace-base": "^1.26.0",
     "@opentelemetry/sdk-trace-web": "^1.26.0",
     "@opentelemetry/semantic-conventions": "^1.37.0",
-    "d3": "^7.9.0",
     "debug": "^4.3.5",
     "lit": "^3.3.1",
     "mediabunny": "^1.1.1",
     "zod": "^3.24.1"
   },
   "devDependencies": {
-    "@types/d3": "^7.4.3",
     "@types/dom-webcodecs": "^0.1.11",
     "@types/node": "^20.14.13",
     "autoprefixer": "^10.4.19",
-    "rollup-plugin-tsconfig-paths": "^1.5.2",
-    "typescript": "^5.5.4",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-tsconfig-paths": "^4.3.2"
-  }
+    "typescript": "^5.5.4"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts"
 }

package/src/elements/EFCaptions.browsertest.ts

@@ -874,16 +874,16 @@ describe("EFCaptions", () => {
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
-      // Test just before boundary 2.599s - should show " timing"
-      timegroup.currentTimeMs = 2599;
+      // Test at frame before boundary (frame 77 at 30fps = ~2567ms) - should show " timing"
+      timegroup.currentTimeMs = 2567;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
-      console.log(`At 2599ms: wordText="${wordContainer.wordText}"`);
+      console.log(`At 2567ms: wordText="${wordContainer.wordText}"`);
       expect(wordContainer.wordText).toBe(" timing");
 
-      // Test at exact boundary 2.6s - should show " test" (the starting word)
+      // Test at exact boundary frame (frame 78 at 30fps = 2600ms) - should show " test" (the starting word)
       timegroup.currentTimeMs = 2600;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
@@ -916,14 +916,14 @@ describe("EFCaptions", () => {
       const captionsTask = captions.customCaptionsDataTask;
       await captionsTask.taskComplete;
 
-      // Test just before boundary
-      timegroup.currentTimeMs = 2590;
+      // Test at frame before boundary (frame 77 at 30fps = ~2567ms)
+      timegroup.currentTimeMs = 2567;
       await timegroup.seekTask.taskComplete;
       await captions.frameTask.taskComplete;
       await wordContainer.updateComplete;
 
       console.log(
-        `Demo case - At 2590ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
+        `Demo case - At 2567ms: wordText="${wordContainer.wordText}", hidden=${wordContainer.hidden}`,
       );
       expect(wordContainer.wordText).toBe(" captions");
 

package/src/elements/EFTimegroup.ts

@@ -60,7 +60,14 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   static get observedAttributes(): string[] {
     // biome-ignore lint/complexity/noThisInStatic: It's okay to use this here
     const parentAttributes = super.observedAttributes || [];
-    return [...parentAttributes, "mode", "overlap", "currenttime", "fit"];
+    return [
+      ...parentAttributes,
+      "mode",
+      "overlap",
+      "currenttime",
+      "fit",
+      "fps",
+    ];
   }
 
   static styles = css`
@@ -89,6 +96,9 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   mode: "fit" | "fixed" | "sequence" | "contain" = "contain";
   overlapMs = 0;
 
+  @property({ type: Number })
+  fps = 30;
+
   attributeChangedCallback(
     name: string,
     old: string | null,
@@ -100,6 +110,9 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
     if (name === "overlap" && value) {
       this.overlapMs = parseTimeToMs(value);
     }
+    if (name === "fps" && value) {
+      this.fps = Number.parseFloat(value);
+    }
     super.attributeChangedCallback(name, old, value);
   }
 
@@ -113,6 +126,31 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
   #pendingSeekTime: number | undefined;
   #processingPendingSeek = false;
 
+  /**
+   * Get the effective FPS for this timegroup.
+   * During rendering, uses the render options FPS if available.
+   * Otherwise uses the configured fps property.
+   */
+  get effectiveFps(): number {
+    // During rendering, prefer the render options FPS
+    if (typeof window !== "undefined" && window.EF_FRAMEGEN?.renderOptions) {
+      return window.EF_FRAMEGEN.renderOptions.encoderOptions.video.framerate;
+    }
+    return this.fps;
+  }
+
+  /**
+   * Quantize a time value to the nearest frame boundary based on effectiveFps.
+   * @param timeSeconds - Time in seconds
+   * @returns Time quantized to frame boundaries in seconds
+   */
+  private quantizeToFrameTime(timeSeconds: number): number {
+    const fps = this.effectiveFps;
+    if (!fps || fps <= 0) return timeSeconds;
+    const frameDurationS = 1 / fps;
+    return Math.round(timeSeconds / frameDurationS) * frameDurationS;
+  }
+
   private async runThrottledFrameTask(): Promise<void> {
     if (this.playbackController) {
       return this.playbackController.runThrottledFrameTask();
@@ -122,6 +160,10 @@ export class EFTimegroup extends EFTargetable(EFTemporal(TWMixin(LitElement))) {
 
   @property({ type: Number, attribute: "currenttime" })
   set currentTime(time: number) {
+    // Quantize time to frame boundaries based on fps
+    // Do this BEFORE delegating to playbackController to ensure consistency
+    time = this.quantizeToFrameTime(time);
+
     if (this.playbackController) {
       this.playbackController.currentTime = time;
       return;

package/src/gui/PlaybackController.ts

@@ -120,7 +120,12 @@ export class PlaybackController implements ReactiveController {
   }
 
   get currentTime(): number {
-    return this.#currentTime ?? 0;
+    const rawTime = this.#currentTime ?? 0;
+    // Quantize to frame boundaries based on host's fps
+    const fps = (this.#host as any).fps ?? 30;
+    if (!fps || fps <= 0) return rawTime;
+    const frameDurationS = 1 / fps;
+    return Math.round(rawTime / frameDurationS) * frameDurationS;
   }
 
   set currentTime(time: number) {

package/tsdown.config.ts

@@ -0,0 +1,36 @@
+import { readFileSync } from "node:fs";
+import path from "node:path";
+
+import { defineConfig, type Plugin } from "tsdown";
+
+import { createTsdownConfig } from "../tsdown.config.base.ts";
+
+// Plugin to handle CSS ?inline imports
+const inlineCssPlugin = (): Plugin => ({
+  name: "inline-css",
+  resolveId(source, importer) {
+    if (source.endsWith(".css?inline") && importer) {
+      const resolved = path.resolve(
+        path.dirname(importer),
+        source.replace("?inline", ""),
+      );
+      return { id: resolved + "?inline", external: false };
+    }
+    return null;
+  },
+  load(id) {
+    if (id.endsWith("?inline")) {
+      const filePath = id.replace("?inline", "");
+      const css = readFileSync(filePath, "utf-8");
+      return `export default ${JSON.stringify(css)}`;
+    }
+    return null;
+  },
+});
+
+export default defineConfig(
+  createTsdownConfig({
+    plugins: [inlineCssPlugin()],
+    external: [/@editframe\/assets/],
+  }),
+);