@ixfx/components 0.3.1 → 0.4.0

package/dist/{timeline-Cv75Th2U.js → timeline-2OFtN4Ta.js}

@@ -1,7 +1,7 @@
-import { n as safeCustomElement, t as __decorate } from "./decorate-D7rC1gLP.js";
+import { n as safeCustomElement, t as __decorate$1 } from "./decorate-DdjvVHS-.js";
 import { LitElement, css, html, nothing } from "lit";
-import { property, state } from "lit/decorators.js";
-import "@clinth/vcanvas";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
 //#region src/timeline/timeline-controller.ts
 /**
 * External adapter class that can configure a timeline element
@@ -992,24 +992,1425 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends LitElement {
 		this.style.cursor = ``;
 	}
 };
-__decorate([property({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
-__decorate([property({
+__decorate$1([property({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
+__decorate$1([property({
 	type: String,
 	attribute: `track-key`
 })], TimelineTrackTabElement.prototype, "trackKey", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "selected", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "reorderable", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+TimelineTrackTabElement = __decorate$1([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/convert.js
+/**
+* Converts viewport-relative coordinates to canvas-relative (logical) coordinates.
+*
+* This function accounts for the current scroll position and content offset to translate
+* coordinates from the visible viewport space to the logical canvas space.
+*
+* @param x - The x-coordinate in viewport space (pixels from left edge of viewport)
+* @param y - The y-coordinate in viewport space (pixels from top)
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param contentOffset - The horizontal offset applied to center content in single-tile mode
+* @param scrollTop - The current vertical scroll position in pixels
+* @param contentOffsetY - The vertical offset applied to center content in single-tile-row mode
+* @returns The point in canvas (logical) coordinate space
+*
+* @example
+* ```typescript
+* // Viewport coordinate (100, 50) with scroll at 500 and no offset
+* const canvasPoint = viewportToCanvas(100, 50, 500, 0, 0, 0);
+* // Returns: { x: 600, y: 50 }
+* ```
+*/
+function viewportToCanvas(x, y, scrollLeft, contentOffset, scrollTop = 0, contentOffsetY = 0) {
+	return {
+		x: x + scrollLeft - contentOffset,
+		y: y + scrollTop - contentOffsetY
+	};
+}
+/**
+* Converts canvas-relative (logical) coordinates to viewport-relative coordinates.
+*
+* This function translates coordinates from the logical canvas space back to the
+* visible viewport space, accounting for scroll position and content offset.
+*
+* @param x - The x-coordinate in canvas (logical) space
+* @param y - The y-coordinate in canvas (logical) space
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param contentOffset - The horizontal offset applied to center content in single-tile mode
+* @param scrollTop - The current vertical scroll position in pixels
+* @param contentOffsetY - The vertical offset applied to center content in single-tile-row mode
+* @returns The point in viewport coordinate space
+*
+* @example
+* ```typescript
+* // Canvas coordinate (600, 50) with scroll at 500 and no offset
+* const viewportPoint = canvasToViewport(600, 50, 500, 0, 0, 0);
+* // Returns: { x: 100, y: 50 }
+* ```
+*/
+function canvasToViewport(x, y, scrollLeft, contentOffset, scrollTop = 0, contentOffsetY = 0) {
+	return {
+		x: x - scrollLeft + contentOffset,
+		y: y - scrollTop + contentOffsetY
+	};
+}
+/**
+* Clamps a numeric value between a minimum and maximum bound.
+*
+* This is a utility function to constrain values within a valid range.
+*
+* @param value - The value to clamp
+* @param min - The minimum allowed value
+* @param max - The maximum allowed value
+* @returns The clamped value, guaranteed to be between min and max (inclusive)
+*
+* @example
+* ```typescript
+* clamp(15, 0, 10);  // Returns: 10
+* clamp(-5, 0, 10);  // Returns: 0
+* clamp(5, 0, 10);   // Returns: 5
+* ```
+*/
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/styles.js
+/**
+* CSS styles for the VCanvas component.
+*
+* These styles define the layout and positioning of:
+* - The host element (`:host`)
+* - The scroll container (`.scroll-container`)
+* - The content spacer (`.spacer`)
+* - The tile pool container (`.tile-pool`)
+* - Canvas elements
+* - The children container for slotted elements (`.children-container`)
+*
+* The styles use absolute positioning to create a virtualized scrolling experience
+* where tiles are rendered only when visible in the viewport.
+*
+* @example
+* ```typescript
+* import { vcanvasStyles } from '@clinth/vcanvas';
+*
+* // Styles are automatically applied when using the VCanvas component
+* // You typically don't need to use these directly unless extending the component
+* ```
+*/
+const vcanvasStyles = css`
+  :host {
+    display: block;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .scroll-container {
+    overflow-x: auto;
+    overflow-y: clip;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    touch-action: pan-x;
+    scrollbar-width: var(--scrollbar-width, auto);
+    scrollbar-color: var(--scrollbar-color, auto);
+  }
+
+  .scroll-container.vertical {
+    overflow-y: auto;
+    touch-action: pan-x pan-y;
+  }
+
+  .spacer {
+    position: absolute;
+    left: 0;
+    top: 0;
+    pointer-events: none;
+    z-index: -1;
+  }
+
+  .tile-pool {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  canvas {
+    position: absolute;
+    top: 0;
+    pointer-events: auto;
+  }
+
+  .children-container {
+    position: absolute;
+    top: 0;
+    height: 100%;
+    left: 0;
+  }
+
+  @property --left-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@property --right-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0;
+}
+
+@keyframes scrollfade {
+  0% {
+    --left-fade: 0;
+  }
+  10%,
+  100% {
+    --left-fade: 3rem;
+  }
+  0%,
+  90% {
+    --right-fade: 3rem;
+  }
+  100% {
+    --right-fade: 0;
+  }
+}
+
+.scrollable {
+  mask: linear-gradient(to right, #0000, #ffff var(--left-fade) calc(100% - var(--right-fade)), #0000);
+  animation: scrollfade;
+  animation-timeline: --scrollfade;
+  scroll-timeline: --scrollfade x;
+}
+
+`;
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/tile-calculator.js
+/**
+* Calculates the width of a tile based on viewport width and multiplier.
+*
+* @param viewportWidth - The width of the viewport in pixels
+* @param multiplier - The multiplier to apply (typically 0.25 to 1.0)
+* @returns The calculated tile width in pixels
+*
+* @example
+* ```typescript
+* getTileWidth(1000, 0.5);  // Returns: 500
+* ```
+*/
+function getTileWidth(viewportWidth, multiplier) {
+	return viewportWidth * multiplier;
+}
+/**
+* Determines if the content fits within a single tile (single-tile mode).
+*
+* In single-tile mode, the content is centered in the viewport rather than
+* being scrollable. This also returns true when viewport width is 0 as a
+* defensive edge case.
+*
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @returns `true` if content fits in single tile, `false` otherwise
+*
+* @example
+* ```typescript
+* isSingleTileMode(500, 1000);   // Returns: true
+* isSingleTileMode(1500, 1000);  // Returns: false
+* ```
+*/
+function isSingleTileMode(logicalWidth, viewportWidth) {
+	if (viewportWidth === 0) return true;
+	return logicalWidth <= viewportWidth;
+}
+/**
+* Calculates the horizontal offset to center content in single-tile mode.
+*
+* In multi-tile mode (when content exceeds viewport), this returns 0.
+* In single-tile mode, this calculates the offset needed to center the content.
+*
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @returns The horizontal offset in pixels, or 0 in multi-tile mode
+*
+* @example
+* ```typescript
+* // Content width 500 in viewport 1000: center it with 250px offset
+* getContentOffset(500, 1000);   // Returns: 250
+*
+* // Content width 2000 in viewport 1000: no offset needed
+* getContentOffset(2000, 1000);  // Returns: 0
+* ```
+*/
+function getContentOffset(logicalWidth, viewportWidth) {
+	if (logicalWidth < 0 || viewportWidth === 0) return 0;
+	return isSingleTileMode(logicalWidth, viewportWidth) ? (viewportWidth - logicalWidth) / 2 : 0;
+}
+/**
+* Calculates the clipped width of a tile at a specific logical position.
+*
+* This accounts for:
+* - Single-tile mode (returns logicalWidth)
+* - Content boundaries (clips tiles extending beyond content)
+* - Overscroll area (if enabled)
+*
+* @param logicalX - The x-coordinate of the tile's left edge in logical space
+* @param tileWidth - The full width of the tile
+* @param logicalWidth - The total logical width of the content
+* @param viewportWidth - The width of the viewport in pixels
+* @param overscrollMultiplier - Multiplier for overscroll padding
+* @returns The clipped width of the tile (may be 0 if tile is outside valid area)
+*
+* @example
+* ```typescript
+* // Standard tile within bounds
+* getTileClippedWidth(0, 500, 2000, 1000, 1);    // Returns: 500
+*
+* // Tile at end of content that needs clipping
+* getTileClippedWidth(2950, 500, 2000, 1000, 1); // Returns: 50
+* ```
+*/
+function getTileClippedWidth(logicalX, tileWidth, logicalWidth, viewportWidth, overscrollMultiplier) {
+	if (tileWidth === 0) return 0;
+	if (logicalX < 0) return 0;
+	const maxLogicalX = logicalWidth + viewportWidth * overscrollMultiplier;
+	if (logicalX >= maxLogicalX) return 0;
+	if (isSingleTileMode(logicalWidth, viewportWidth)) return logicalWidth;
+	if (logicalX + tileWidth > maxLogicalX) return Math.max(0, maxLogicalX - logicalX);
+	return tileWidth;
+}
+/**
+* Calculates the range of tiles needed to render the current viewport.
+*
+* This determines which tiles are visible based on scroll position and
+* includes buffer tiles for smooth scrolling. Respects maxPoolSize limits.
+*
+* @param scrollLeft - The current horizontal scroll position in pixels
+* @param viewportWidth - The width of the viewport in pixels
+* @param logicalWidth - The total logical width of the content
+* @param options - Configuration options for tile calculation
+* @returns Information about the tile range including indices and positions
+*
+* @example
+* ```typescript
+* const options = {
+*   tileWidthMultiplier: 0.5,
+*   tilesBuffer: 2,
+*   maxPoolSize: 5,
+*   // ... other options
+* };
+* const result = calculateTileRange(600, 1000, 10000, options);
+* // Returns: { firstTile: 1, lastTile: 3, tiles: [...] }
+* ```
+*/
+function calculateTileRange(scrollLeft, viewportWidth, logicalWidth, options) {
+	if (logicalWidth === 0) return {
+		firstTile: 0,
+		lastTile: 0,
+		tiles: []
+	};
+	const tileWidth = getTileWidth(viewportWidth, options.tileWidthMultiplier);
+	if (isSingleTileMode(logicalWidth, viewportWidth)) return {
+		firstTile: 0,
+		lastTile: 0,
+		tiles: [{
+			index: 0,
+			logicalX: 0
+		}]
+	};
+	const firstTile = Math.floor(scrollLeft / tileWidth);
+	const lastTile = Math.floor((scrollLeft + viewportWidth - 1) / tileWidth);
+	const maxTileIndex = Math.max(0, Math.ceil(logicalWidth / tileWidth) - 1);
+	const tiles = [];
+	const startI = firstTile;
+	const endI = Math.min(lastTile + options.tilesBuffer, maxTileIndex);
+	for (let i = startI; i <= endI; i++) {
+		const logicalX = i * tileWidth;
+		if (logicalX >= logicalWidth) continue;
+		tiles.push({
+			index: i,
+			logicalX
+		});
+		if (tiles.length >= options.maxPoolSize) break;
+	}
+	return {
+		firstTile: Math.max(0, firstTile),
+		lastTile: tiles.length > 0 ? tiles[tiles.length - 1].index : 0,
+		tiles
+	};
+}
+/**
+* Calculates the height of a tile based on viewport height and multiplier.
+*/
+function getTileHeight(viewportHeight, multiplier) {
+	return viewportHeight * multiplier;
+}
+/**
+* Determines if content fits within a single tile row (no vertical virtualization needed).
+* Returns true when effectiveLogicalHeight fits within the viewport.
+*/
+function isSingleTileModeY(effectiveLogicalHeight, viewportHeight) {
+	if (viewportHeight === 0) return true;
+	return effectiveLogicalHeight <= viewportHeight;
+}
+/**
+* Calculates the vertical offset to center content in single-tile-row mode.
+*/
+function getContentOffsetY(effectiveLogicalHeight, viewportHeight) {
+	if (effectiveLogicalHeight < 0 || viewportHeight === 0) return 0;
+	return isSingleTileModeY(effectiveLogicalHeight, viewportHeight) ? (viewportHeight - effectiveLogicalHeight) / 2 : 0;
+}
+/**
+* Calculates the clipped height of a tile at a specific logical Y position.
+*/
+function getTileClippedHeight(logicalY, tileHeight, effectiveLogicalHeight, viewportHeight, overscrollMultiplier) {
+	if (tileHeight === 0) return 0;
+	if (logicalY < 0) return 0;
+	const maxLogicalY = effectiveLogicalHeight + viewportHeight * overscrollMultiplier;
+	if (logicalY >= maxLogicalY) return 0;
+	if (isSingleTileModeY(effectiveLogicalHeight, viewportHeight)) return effectiveLogicalHeight;
+	if (logicalY + tileHeight > maxLogicalY) return Math.max(0, maxLogicalY - logicalY);
+	return tileHeight;
+}
+/**
+* Calculates the range of tile rows needed to render the current viewport vertically.
+*
+* @param scrollTop - The current vertical scroll position in pixels
+* @param viewportHeight - The height of the viewport in pixels
+* @param effectiveLogicalHeight - The effective total logical height (logicalHeight || viewportHeight)
+* @param options - Configuration options for tile calculation
+*/
+function calculateTileRowRange(scrollTop, viewportHeight, effectiveLogicalHeight, options) {
+	if (effectiveLogicalHeight === 0) return {
+		firstRow: 0,
+		lastRow: 0,
+		rows: []
+	};
+	const tileHeight = getTileHeight(viewportHeight, options.tileHeightMultiplier);
+	if (isSingleTileModeY(effectiveLogicalHeight, viewportHeight)) return {
+		firstRow: 0,
+		lastRow: 0,
+		rows: [{
+			row: 0,
+			logicalY: 0
+		}]
+	};
+	const firstRow = Math.floor(scrollTop / tileHeight);
+	const lastRow = Math.floor((scrollTop + viewportHeight - 1) / tileHeight);
+	const maxRowIndex = Math.max(0, Math.ceil(effectiveLogicalHeight / tileHeight) - 1);
+	const rows = [];
+	const endI = Math.min(lastRow + options.tilesBuffer, maxRowIndex);
+	for (let i = firstRow; i <= endI; i++) {
+		const logicalY = i * tileHeight;
+		if (logicalY >= effectiveLogicalHeight) continue;
+		rows.push({
+			row: i,
+			logicalY
+		});
+		if (rows.length >= options.maxPoolSize) break;
+	}
+	return {
+		firstRow: Math.max(0, firstRow),
+		lastRow: rows.length > 0 ? rows[rows.length - 1].row : 0,
+		rows
+	};
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/util/debouncer.js
+/**
+* Creates a debounced version of a function that delays execution until after
+* a specified timeout has elapsed since the last call.
+*
+* Debouncing is useful for handling rapidly firing events (like scroll or resize)
+* by ensuring the function only executes once after the event stream settles.
+*
+* @template T - The type of the function to debounce
+* @param fn - The function to debounce
+* @param timeoutMs - The delay in milliseconds before executing the function
+* @returns A debounced version of the function with a `cancel` method
+*
+* @example
+* ```typescript
+* const debouncedLog = debouncer((msg: string) => {
+*   console.log(msg);
+* }, 100);
+*
+* debouncedLog('Hello');  // Will log after 100ms
+* debouncedLog('World');  // Resets timer, will log 'World' after 100ms
+*
+* // Cancel pending execution
+* debouncedLog.cancel();
+* ```
+*/
+function debouncer(fn, timeoutMs) {
+	let timer = null;
+	const debounced = (...args) => {
+		if (timer) clearTimeout(timer);
+		timer = setTimeout(() => {
+			fn(...args);
+		}, timeoutMs);
+	};
+	debounced.cancel = () => {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+	return debounced;
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/util/draw.js
+/** Color palette for debug tile visualization */
+const TILE_COLORS = [
+	`#FF6B6B`,
+	`#4ECDC4`,
+	`#45B7D1`,
+	`#96CEB4`,
+	`#FFEAA7`,
+	`#DDA0DD`,
+	`#98D8C8`,
+	`#F7DC6F`,
+	`#BB8FCE`,
+	`#85C1E9`
+];
+/**
+* Gets a color for a tile based on its index.
+* Colors cycle through the TILE_COLORS palette.
+*
+* @param index - The tile index
+* @returns A hex color string
+*/
+function getTileColor(index) {
+	return TILE_COLORS[index % TILE_COLORS.length];
+}
+/**
+* Draws debug visualization graphics on a tile canvas.
+*
+* This function renders diagnostic information useful for debugging tile
+* boundaries, positions, and sizing. It draws:
+* - A colored background
+* - Diagonal cross lines
+* - Center crosshair
+* - Border rectangle
+* - Text information (tile index, position, size, total width)
+*
+* @param tileIndex - The index of the tile being drawn
+* @param tilesTotal - The total number of tiles in the pool
+* @param widthTotal - The total logical width of the virtual canvas
+* @param ctx - The canvas 2D rendering context
+* @param region - The rectangular region of the tile in logical coordinates
+*
+* @example
+* ```typescript
+* // Enable debug drawing
+* vcanvas.debugDraw = true;
+*
+* // The debug graphics will be drawn on each tile automatically
+* ```
+*/
+function drawDebugGraphic(tileIndex, tilesTotal, widthTotal, ctx, region) {
+	ctx.fillStyle = `whitesmoke`;
+	ctx.fillRect(region.x, region.y, region.width, region.height);
+	ctx.fillStyle = getTileColor(tileIndex);
+	ctx.strokeStyle = getTileColor(tileIndex);
+	ctx.lineWidth = 2;
+	ctx.beginPath();
+	ctx.moveTo(region.x, region.y);
+	ctx.lineTo(region.x + region.width, region.y + region.height);
+	ctx.moveTo(region.x + region.width, region.y);
+	ctx.lineTo(region.x, region.y + region.height);
+	ctx.stroke();
+	ctx.font = `24pt system-ui`;
+	ctx.textBaseline = `top`;
+	ctx.fillText(`#${tileIndex}/${tilesTotal}`, region.x + 20, region.y + 20);
+	ctx.font = `18pt system-ui`;
+	ctx.fillText(`Pos: ${Math.round(region.x)},${Math.round(region.y)}`, region.x + 20, region.y + 60);
+	ctx.fillText(`Size: ${Math.round(region.width)}x${Math.round(region.height)}`, region.x + 20, region.y + 90);
+	ctx.fillText(`VCanvas width: ${Math.round(widthTotal)}`, region.x + 20, region.y + 120);
+	const centerX = region.x + region.width / 2;
+	const centerY = region.y + region.height / 2;
+	ctx.beginPath();
+	ctx.moveTo(region.x, centerY);
+	ctx.lineTo(region.x + region.width, centerY);
+	ctx.moveTo(centerX, region.y);
+	ctx.lineTo(centerX, region.y + region.height);
+	ctx.stroke();
+	ctx.strokeRect(region.x, region.y, region.width, region.height);
+}
+//#endregion
+//#region node_modules/.pnpm/@clinth+vcanvas@0.0.3/node_modules/@clinth/vcanvas/dist/vcanvas.js
+var __decorate = function(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const tileKey = (col, row) => `${col},${row}`;
+const DEFAULT_TILE_WIDTH_MULTIPLIER = .5;
+const DEFAULT_TILE_HEIGHT_MULTIPLIER = .5;
+const DEFAULT_TILES_BUFFER = 2;
+const DEFAULT_OVERLAP_PERCENT = .01;
+const DEFAULT_OVERSCROLL_PAD_MULTIPLIER = 1;
+const DEFAULT_MAX_POOL_SIZE = 3;
+const DEFAULT_SCROLL_DEBOUNCE_MS = 100;
+let VCanvas = class VCanvas extends LitElement {
+	_emitScrollEndEvent(userGesture) {
+		const event = new CustomEvent(`scrollend-virtual`, {
+			detail: {
+				logicalScrollLeft: this._scrollLeft,
+				logicalScrollTop: this._scrollTop,
+				userGesture,
+				containerScrollLeft: this._scrollContainer?.scrollLeft ?? 0,
+				containerScrollTop: this._scrollContainer?.scrollTop ?? 0
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	constructor() {
+		super();
+		/**
+		* Enables detailed console logging of tile operations for debugging.
+		*
+		* When `true`, the component logs information about tile creation,
+		* positioning, and rendering to the console. Useful for debugging
+		* tile-related issues during development.
+		*
+		* @default false
+		*/
+		this.debugTrace = false;
+		this.debugDraw = false;
+		/**
+		* Enables visual hinting for scroll position at container edges.
+		*
+		* When `true`, applies the 'scrollable' class to the scroll container which
+		* adds CSS scroll-driven fade animations at the left and right edges,
+		* providing visual feedback about scroll availability.
+		*
+		* @default false
+		*/
+		this.hinting = false;
+		this._viewportWidth = 0;
+		this._viewportHeight = 0;
+		this._scrollLeft = 0;
+		this._scrollTop = 0;
+		this._logicalHeight = 0;
+		this._tilePool = /* @__PURE__ */ new Map();
+		this._visibleTiles = /* @__PURE__ */ new Set();
+		this._pendingDraws = /* @__PURE__ */ new Map();
+		this._scrollContainer = null;
+		this._spacer = null;
+		this._tilePoolEl = null;
+		this._childrenContainerEl = null;
+		this._resizeObserver = null;
+		this._positionedChildren = /* @__PURE__ */ new Map();
+		this._boundOnScroll = this._onScroll.bind(this);
+		this._renderingOptions = {
+			tileWidthMultiplier: DEFAULT_TILE_WIDTH_MULTIPLIER,
+			tileHeightMultiplier: DEFAULT_TILE_HEIGHT_MULTIPLIER,
+			tilesBuffer: DEFAULT_TILES_BUFFER,
+			overlapPercent: DEFAULT_OVERLAP_PERCENT,
+			overscrollPadMultiplier: DEFAULT_OVERSCROLL_PAD_MULTIPLIER,
+			maxPoolSize: DEFAULT_MAX_POOL_SIZE,
+			scrollDebounceMs: DEFAULT_SCROLL_DEBOUNCE_MS
+		};
+		this._dpr = window.devicePixelRatio || 1;
+		this._logicalWidth = 0;
+		this.logicalWidth = 0;
+		this.logicalHeight = 0;
+		this.drawCallback = null;
+		this._scrollDebounce = debouncer(() => {
+			this._requestRedrawAll(`scrollDebounce`);
+		}, this._renderingOptions.scrollDebounceMs);
+		this._scrollEndDebounce = debouncer(() => {
+			this._emitScrollEndEvent(true);
+		}, this._renderingOptions.scrollDebounceMs);
+		this._resizeDebounce = debouncer(() => {
+			this._onResize();
+		}, this._renderingOptions.scrollDebounceMs);
+	}
+	static {
+		this.styles = vcanvasStyles;
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._setupResizeObserver();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this._resizeObserver = null;
+		this._scrollEndDebounce.cancel();
+		this._pendingDraws.forEach((ctrl) => ctrl.abort());
+		this._tilePool.clear();
+		this._scrollContainer?.removeEventListener(`scroll`, this._boundOnScroll);
+	}
+	firstUpdated() {
+		const scrollContainer = this.shadowRoot?.querySelector(`.scroll-container`);
+		this._scrollContainer = scrollContainer;
+		this._spacer = this.shadowRoot?.querySelector(`.spacer`);
+		this._tilePoolEl = this.shadowRoot?.querySelector(`.tile-pool`);
+		this._childrenContainerEl = this.shadowRoot?.querySelector(`.children-container`);
+		if (this._scrollContainer) this._scrollContainer.addEventListener(`scroll`, this._boundOnScroll);
+		requestAnimationFrame(() => {
+			this._updateViewportDimensions();
+			this._updateSpacer();
+			this._updateScrollContainerClass();
+			this._recalculateTiles(`firstUpdated cb`);
+			this._positionChildren(`firstUpdated cb`);
+		});
+	}
+	/**
+	* The total logical width of the virtual canvas content.
+	*
+	* This represents the full width of the scrollable content in logical units.
+	* Setting this property triggers recalculation of tiles and updates the spacer
+	* element that enables native scroll behavior.
+	*
+	* @example
+	* ```typescript
+	* // Create a virtual canvas 10,000 logical units wide
+	* vcanvas.logicalWidth = 10000;
+	* ```
+	*/
+	set logicalWidth(value) {
+		this._logicalWidth = value;
+		this._updateSpacer();
+		this._updateScrollContainerClass();
+		if (this.hasUpdated) {
+			this._updateTileWidths(`set logicalWidth`);
+			this._recalculateTiles(`set logicalWidth`);
+		}
+	}
+	get logicalWidth() {
+		return this._logicalWidth;
+	}
+	/**
+	* The total logical height of the virtual canvas content.
+	*
+	* When set to 0 (default), the component uses the actual viewport height,
+	* meaning no vertical virtualization is applied. Set to a value greater than
+	* the viewport height to enable vertical scrolling and tile-based virtualization.
+	*
+	* @example
+	* ```typescript
+	* // Create a canvas virtualized in both axes
+	* vcanvas.logicalWidth = 10000;
+	* vcanvas.logicalHeight = 5000;
+	* ```
+	*/
+	set logicalHeight(value) {
+		this._logicalHeight = value;
+		this._updateSpacer();
+		this._updateScrollContainerClass();
+		if (this.hasUpdated) this._recalculateTiles(`set logicalHeight`);
+	}
+	get logicalHeight() {
+		return this._logicalHeight;
+	}
+	/** Effective logical width: uses viewport width when logicalWidth is 0 (no horizontal virtualization). */
+	get effectiveLogicalWidth() {
+		return this._logicalWidth || this._viewportWidth;
+	}
+	/** Effective logical height: uses viewport height when logicalHeight is 0 (no vertical virtualization). */
+	get effectiveLogicalHeight() {
+		return this._logicalHeight || this._viewportHeight;
+	}
+	_setupResizeObserver() {
+		this._resizeObserver = new ResizeObserver(() => {
+			this._resizeDebounce();
+		});
+		this._resizeObserver.observe(this);
+	}
+	_onResize() {
+		const oldWidth = this._viewportWidth;
+		const oldHeight = this._viewportHeight;
+		this._updateViewportDimensions();
+		const widthChanged = oldWidth !== this._viewportWidth;
+		const heightChanged = oldHeight !== this._viewportHeight;
+		if (widthChanged || heightChanged) {
+			this._updateSpacer();
+			this._updateScrollContainerClass();
+			this._recalculateTiles(`onResize`);
+		}
+	}
+	_updateTileWidths(reason) {
+		const tileWidth = this._getTileWidth();
+		for (const tile of this._tilePool.values()) {
+			const clippedWidth = this._getTileClippedWidth(tile.logicalX, tileWidth);
+			tile.canvas.width = clippedWidth * this._dpr;
+			tile.canvas.style.width = `${clippedWidth}px`;
+			tile.ctx.scale(this._dpr, this._dpr);
+		}
+		this._requestRedrawAll(`updateTileWidths (${reason})`);
+	}
+	_updateViewportDimensions() {
+		const rect = this.getBoundingClientRect();
+		this._viewportWidth = rect.width;
+		this._viewportHeight = rect.height;
+	}
+	_onScroll() {
+		if (!this._scrollContainer) return;
+		const newScrollLeft = this._scrollContainer.scrollLeft;
+		const newScrollTop = this._scrollContainer.scrollTop;
+		if (newScrollLeft === this._scrollLeft && newScrollTop === this._scrollTop) return;
+		this._scrollLeft = newScrollLeft;
+		this._scrollTop = newScrollTop;
+		this._recalculateTiles(`onScroll`);
+		this._emitScrollEvent(true);
+		this._scrollDebounce();
+		this._scrollEndDebounce();
+	}
+	_updateSpacer() {
+		if (!this._spacer) return;
+		const noHorizontalScroll = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const noVerticalScroll = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		if (noHorizontalScroll && noVerticalScroll) this._spacer.style.display = `none`;
+		else {
+			this._spacer.style.display = `block`;
+			this._spacer.style.width = `${this.effectiveLogicalWidth}px`;
+			this._spacer.style.height = `${this.effectiveLogicalHeight}px`;
+		}
+		if (this._childrenContainerEl) {
+			this._childrenContainerEl.style.width = `${this.effectiveLogicalWidth}px`;
+			this._childrenContainerEl.style.height = `${this.effectiveLogicalHeight}px`;
+		}
+	}
+	_updateScrollContainerClass() {
+		if (!this._scrollContainer) return;
+		const verticalScroll = this.effectiveLogicalHeight > this._viewportHeight;
+		this._scrollContainer.classList.toggle(`vertical`, verticalScroll);
+	}
+	_getTileWidth() {
+		return getTileWidth(this._viewportWidth, this._renderingOptions.tileWidthMultiplier);
+	}
+	_getTileHeight() {
+		return getTileHeight(this._viewportHeight, this._renderingOptions.tileHeightMultiplier);
+	}
+	_getTileClippedWidth(logicalX, tileWidth) {
+		return getTileClippedWidth(logicalX, tileWidth, this.effectiveLogicalWidth, this._viewportWidth, this._renderingOptions.overscrollPadMultiplier);
+	}
+	_getTileClippedHeight(logicalY, tileHeight) {
+		return getTileClippedHeight(logicalY, tileHeight, this.effectiveLogicalHeight, this._viewportHeight, this._renderingOptions.overscrollPadMultiplier);
+	}
+	_calculateTileRange() {
+		return calculateTileRange(this._scrollLeft, this._viewportWidth, this.effectiveLogicalWidth, this._renderingOptions);
+	}
+	_calculateTileRowRange() {
+		return calculateTileRowRange(this._scrollTop, this._viewportHeight, this.effectiveLogicalHeight, this._renderingOptions);
+	}
+	_recalculateTiles(reason) {
+		this._updateViewportDimensions();
+		const { tiles } = this._calculateTileRange();
+		const { rows } = this._calculateTileRowRange();
+		const neededKeys = /* @__PURE__ */ new Set();
+		for (const { index: col, logicalX } of tiles) for (const { row, logicalY } of rows) {
+			neededKeys.add(tileKey(col, row));
+			if (!this._tilePool.has(tileKey(col, row))) this._tilePool.set(tileKey(col, row), this._createTile(col, row, logicalX, logicalY));
+		}
+		const maxPoolSize = this._renderingOptions.maxPoolSize * Math.max(1, rows.length);
+		const reuseCandidates = [...this._tilePool.keys()].filter((k) => !neededKeys.has(k));
+		const missingKeys = [...neededKeys].filter((k) => !this._tilePool.has(k));
+		const tilesToReuse = Math.min(reuseCandidates.length, missingKeys.length);
+		for (let i = 0; i < tilesToReuse; i++) {
+			const oldKey = reuseCandidates[i];
+			const newKey = missingKeys[i];
+			const tile = this._tilePool.get(oldKey);
+			if (tile && newKey) {
+				const [colStr, rowStr] = newKey.split(`,`);
+				const col = Number(colStr);
+				const row = Number(rowStr);
+				this._tilePool.delete(oldKey);
+				tile.col = col;
+				tile.row = row;
+				tile.logicalX = col * this._getTileWidth();
+				tile.logicalY = row * this._getTileHeight();
+				tile.visible = false;
+				tile.canvas.dataset.tileKey = newKey;
+				this._tilePool.set(newKey, tile);
+			}
+		}
+		const keysAfterReuse = [...this._tilePool.keys()];
+		if (keysAfterReuse.length > maxPoolSize) {
+			const excessCount = keysAfterReuse.length - maxPoolSize;
+			keysAfterReuse.filter((k) => !neededKeys.has(k)).slice(0, excessCount).forEach((k) => {
+				const tile = this._tilePool.get(k);
+				if (tile) {
+					this._tilePool.delete(k);
+					tile.canvas.remove();
+				}
+			});
+		}
+		this._updateTiles(`recalculateTiles (${reason})`);
+	}
+	_createTile(col, row, logicalX, logicalY) {
+		const canvas = document.createElement(`canvas`);
+		const key = tileKey(col, row);
+		canvas.dataset.tileKey = key;
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const clippedWidth = this._getTileClippedWidth(logicalX, tileWidth);
+		const clippedHeight = this._getTileClippedHeight(logicalY, tileHeight);
+		const ctx = canvas.getContext(`2d`);
+		if (!ctx) throw new Error(`Could not get canvas context`);
+		if (this._viewportHeight === 0) this.#debug(`Warning: Creating tile ${key} with viewport height 0. The VCanvas component may not be properly sized or visible.`);
+		canvas.width = clippedWidth * this._dpr;
+		canvas.height = clippedHeight * this._dpr;
+		canvas.style.width = `${clippedWidth}px`;
+		canvas.style.height = `${clippedHeight}px`;
+		ctx.scale(this._dpr, this._dpr);
+		this.#debug(`Created tile ${key} at logicalX ${logicalX} logicalY ${logicalY}`);
+		return {
+			canvas,
+			ctx,
+			logicalX,
+			logicalY,
+			col,
+			row,
+			visible: false,
+			isInDOM: false
+		};
+	}
+	_updateTiles(reason) {
+		const { tiles, firstTile, lastTile } = this._calculateTileRange();
+		const { rows, firstRow, lastRow } = this._calculateTileRowRange();
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const isSingleTileX = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const isSingleTileY = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		const tilesBuffer = this._renderingOptions.tilesBuffer;
+		const tilesRedrawn = [];
+		for (const tile of this._tilePool.values()) tile.visible = false;
+		this._visibleTiles.clear();
+		for (const [key, tile] of this._tilePool) {
+			const colVisible = isSingleTileX ? tile.col === 0 : tile.col >= firstTile - tilesBuffer && tile.col <= lastTile + tilesBuffer;
+			const rowVisible = isSingleTileY ? tile.row === 0 : tile.row >= firstRow - tilesBuffer && tile.row <= lastRow + tilesBuffer;
+			if (colVisible && rowVisible) {
+				this._visibleTiles.add(key);
+				const newLogicalX = tile.col * tileWidth;
+				const newLogicalY = tile.row * tileHeight;
+				const visualX = isSingleTileX ? contentOffsetX : newLogicalX;
+				const visualY = isSingleTileY ? contentOffsetY : newLogicalY;
+				const clippedWidth = this._getTileClippedWidth(newLogicalX, tileWidth);
+				const clippedHeight = this._getTileClippedHeight(newLogicalY, tileHeight);
+				if (!tile.visible || tile.logicalX !== newLogicalX || tile.logicalY !== newLogicalY || tile.canvas.style.left !== `${visualX}px` || tile.canvas.style.top !== `${visualY}px` || tile.canvas.width !== clippedWidth * this._dpr || tile.canvas.height !== clippedHeight * this._dpr) {
+					tile.logicalX = newLogicalX;
+					tile.logicalY = newLogicalY;
+					tile.canvas.width = clippedWidth * this._dpr;
+					tile.canvas.style.width = `${clippedWidth}px`;
+					tile.canvas.height = clippedHeight * this._dpr;
+					tile.canvas.style.height = `${clippedHeight}px`;
+					tile.canvas.style.left = `${visualX}px`;
+					tile.canvas.style.top = `${visualY}px`;
+					tile.ctx.scale(this._dpr, this._dpr);
+					if (!tile.isInDOM && this._tilePoolEl) {
+						this._tilePoolEl.appendChild(tile.canvas);
+						tile.isInDOM = true;
+					}
+					if (!tile.visible) {
+						tilesRedrawn.push(key);
+						this._requestTileDraw(`updateTiles(${reason})`, key);
+					}
+				}
+				tile.visible = true;
+			} else if (tile.visible) {
+				tile.visible = false;
+				tile.isInDOM = false;
+				tile.canvas.remove();
+			}
+		}
+		for (const { index: col, logicalX } of tiles) for (const { row, logicalY } of rows) {
+			const key = tileKey(col, row);
+			if (!this._tilePool.has(key) && this._tilePoolEl) {
+				const newTile = this._createTile(col, row, logicalX, logicalY);
+				const visualX = isSingleTileX ? contentOffsetX : logicalX;
+				const visualY = isSingleTileY ? contentOffsetY : logicalY;
+				newTile.canvas.style.left = `${visualX}px`;
+				newTile.canvas.style.top = `${visualY}px`;
+				newTile.visible = true;
+				newTile.isInDOM = true;
+				this._tilePoolEl.appendChild(newTile.canvas);
+				this._tilePool.set(key, newTile);
+				this._visibleTiles.add(key);
+				tilesRedrawn.push(key);
+				this._requestTileDraw(`updateTiles(${reason})`, key);
+			}
+		}
+		return tilesRedrawn;
+	}
+	_requestRedrawAll(reason) {
+		this.#debug(`Requesting _requestRedrawAll: ${reason} visible tiles: ${this._visibleTiles.size} pending draws: ${this._pendingDraws.size}`);
+		this._pendingDraws.forEach((ctrl) => ctrl.abort());
+		this._pendingDraws.clear();
+		for (const tileIndex of this._visibleTiles) this._requestTileDraw(`requestRedrawAll(${reason})`, tileIndex);
+	}
+	#debug(msg) {
+		if (!this.debugTrace) return;
+		console.log(`[VCanvas]`, msg);
+	}
+	_requestTileDraw(_reason, tileKey, region) {
+		const tile = this._tilePool.get(tileKey);
+		if (!tile || !this.drawCallback) return;
+		const abortCtrl = new AbortController();
+		this._pendingDraws.set(tileKey, abortCtrl);
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const isSingleTileX = isSingleTileMode(this.effectiveLogicalWidth, this._viewportWidth);
+		const isSingleTileY = isSingleTileModeY(this.effectiveLogicalHeight, this._viewportHeight);
+		let drawRegion;
+		if (region) drawRegion = region;
+		else {
+			const overlapX = tileWidth * this._renderingOptions.overlapPercent;
+			const overlapY = tileHeight * this._renderingOptions.overlapPercent;
+			drawRegion = {
+				x: isSingleTileX ? 0 : tile.logicalX - overlapX,
+				y: isSingleTileY ? 0 : tile.logicalY - overlapY,
+				width: isSingleTileX ? this.effectiveLogicalWidth : tileWidth + overlapX * 2,
+				height: isSingleTileY ? this.effectiveLogicalHeight : tileHeight + overlapY * 2
+			};
+		}
+		tile.ctx.save();
+		tile.ctx.translate(-tile.logicalX, -tile.logicalY);
+		const localX = drawRegion.x - tile.logicalX;
+		const localY = drawRegion.y - tile.logicalY;
+		if (region) {
+			tile.ctx.beginPath();
+			tile.ctx.rect(localX, localY, drawRegion.width, drawRegion.height);
+			tile.ctx.clip();
+			tile.ctx.clearRect(localX, localY, drawRegion.width, drawRegion.height);
+		} else tile.ctx.clearRect(0, 0, tile.canvas.width, tile.canvas.height);
+		if (this.debugDraw) drawDebugGraphic(tile.col, this._tilePool.size, this.effectiveLogicalWidth, tile.ctx, drawRegion);
+		try {
+			this.drawCallback(tile.ctx, drawRegion, abortCtrl.signal);
+		} finally {
+			if (tile) tile.ctx.restore();
+			this._pendingDraws.delete(tileKey);
+		}
+	}
+	_emitScrollEvent(userGesture) {
+		const event = new CustomEvent(`scroll-virtual`, {
+			detail: {
+				logicalScrollLeft: this._scrollLeft,
+				logicalScrollTop: this._scrollTop,
+				userGesture,
+				containerScrollLeft: this._scrollContainer?.scrollLeft ?? 0,
+				containerScrollTop: this._scrollContainer?.scrollTop ?? 0,
+				viewportStartLogical: this._scrollLeft,
+				viewportEndLogical: this._scrollLeft + this._viewportWidth,
+				viewportStartLogicalY: this._scrollTop,
+				viewportEndLogicalY: this._scrollTop + this._viewportHeight
+			},
+			bubbles: true,
+			composed: true
+		});
+		this.dispatchEvent(event);
+	}
+	/**
+	* Checks if any part of a rectangular region is currently visible in the viewport.
+	*
+	* This method is useful for determining whether content needs to be rendered
+	* or updated based on its visibility status. The region is specified using
+	* logical coordinates relative to the virtual canvas content.
+	*
+	* @param rect - The rectangular region to check, in logical coordinates
+	* @returns true if any part of the region overlaps with the visible viewport
+	*
+	* @example
+	* ```typescript
+	* const region = { x: 1000, y: 0, width: 500, height: 1000 };
+	* if (vcanvas.isRegionVisible(region)) {
+	*   // Region is at least partially visible, render it
+	* }
+	* ```
+	*/
+	isRegionVisible(rect) {
+		const viewportLeft = this._scrollLeft;
+		const viewportRight = this._scrollLeft + this._viewportWidth;
+		const xVisible = rect.x + rect.width > viewportLeft && rect.x < viewportRight;
+		const viewportTop = this._scrollTop;
+		const viewportBottom = this._scrollTop + this._viewportHeight;
+		const yVisible = rect.y + rect.height > viewportTop && rect.y < viewportBottom;
+		return xVisible && yVisible;
+	}
+	_updateScrollPosition(userGesture) {
+		if (this._scrollContainer) {
+			this._scrollContainer.scrollLeft = this._scrollLeft;
+			this._scrollContainer.scrollTop = this._scrollTop;
+		}
+		this._recalculateTiles(`updateScrollPosition`);
+		this._emitScrollEvent(userGesture);
+		this._scrollDebounce();
+	}
+	get logicalScrollLeft() {
+		return this._scrollLeft;
+	}
+	/**
+	* The current logical scroll position.
+	*
+	* Setting this property smoothly scrolls the virtual canvas to the specified
+	* position. The value is automatically clamped to valid bounds (0 to
+	* logicalWidth - viewportWidth).
+	*
+	* @example
+	* ```typescript
+	* // Scroll to position 5000
+	* vcanvas.logicalScrollLeft = 5000;
+	*
+	* // Get current scroll position
+	* console.log(vcanvas.logicalScrollLeft);
+	* ```
+	*/
+	set logicalScrollLeft(value) {
+		const oldValue = this._scrollLeft;
+		const clampedValue = clamp(value, 0, Math.max(0, this.effectiveLogicalWidth - this._viewportWidth));
+		if (clampedValue !== this._scrollLeft) {
+			this._scrollLeft = clampedValue;
+			this.requestUpdate(`logicalScrollLeft`, oldValue);
+			this._updateScrollPosition(false);
+		}
+	}
+	get logicalScrollTop() {
+		return this._scrollTop;
+	}
+	set logicalScrollTop(value) {
+		const oldValue = this._scrollTop;
+		const clampedValue = clamp(value, 0, Math.max(0, this.effectiveLogicalHeight - this._viewportHeight));
+		if (clampedValue !== this._scrollTop) {
+			this._scrollTop = clampedValue;
+			this.requestUpdate(`logicalScrollTop`, oldValue);
+			this._updateScrollPosition(false);
+		}
+	}
+	get containerScrollLeft() {
+		return this._scrollContainer?.scrollLeft ?? 0;
+	}
+	get containerScrollTop() {
+		return this._scrollContainer?.scrollTop ?? 0;
+	}
+	/**
+	* The current viewport width in pixels.
+	*
+	* This value is automatically updated when the component is resized.
+	* Read-only - use CSS to control the component's size.
+	*
+	* @example
+	* ```typescript
+	* const vw = vcanvas.viewportWidth;
+	* ```
+	*/
+	get viewportWidth() {
+		return this._viewportWidth;
+	}
+	/**
+	* The current viewport height in pixels.
+	*
+	* This value is automatically updated when the component is resized.
+	* Read-only - use CSS to control the component's size.
+	*
+	* @example
+	* ```typescript
+	* const vh = vcanvas.viewportHeight;
+	* ```
+	*/
+	get viewportHeight() {
+		return this._viewportHeight;
+	}
+	/**
+	* Updates rendering options for the virtual canvas.
+	*
+	* Pass a partial options object to update specific settings. Any options
+	* not provided retain their current values. After updating options,
+	* tiles are recalculated to reflect the new configuration.
+	*
+	* @param options - Partial options object specifying which settings to change
+	*
+	* @example
+	* ```typescript
+	* // Reduce tile size and increase pool for smoother scrolling
+	* vcanvas.setRenderingOptions({
+	*   tileWidthMultiplier: 0.25,
+	*   maxPoolSize: 8,
+	* });
+	*
+	* // Restore defaults
+	* vcanvas.setRenderingOptions({
+	*   tileWidthMultiplier: 0.5,
+	*   tilesBuffer: 2,
+	*   maxPoolSize: 5,
+	* });
+	* ```
+	*/
+	setRenderingOptions(options) {
+		this._renderingOptions = {
+			...this._renderingOptions,
+			...options
+		};
+		this._recalculateTiles(`setRenderingOptions`);
+	}
+	/**
+	* Gets the current rendering options.
+	*
+	* Returns a copy of the current configuration options controlling tile
+	* rendering, pool management, and scroll behavior.
+	*
+	* @returns The current VCanvasRenderingOptions configuration
+	*
+	* @example
+	* ```typescript
+	* const options = vcanvas.getRenderingOptions();
+	* console.log('Current tile width multiplier:', options.tileWidthMultiplier);
+	* ```
+	*/
+	getRenderingOptions() {
+		return this._renderingOptions;
+	}
+	/**
+	* Forces a complete redraw of all visible tiles.
+	*
+	* Call this when the visual appearance of the content needs to change
+	* but the logical dimensions remain the same. This aborts any pending
+	* draw operations and triggers new ones for all visible tiles.
+	*
+	* @example
+	* ```typescript
+	* // Redraw after theme change
+	* theme.addEventListener('change', () => {
+	*   vcanvas.invalidateAll();
+	* });
+	* ```
+	*/
+	invalidateAll() {
+		this._requestRedrawAll(`invalidateAll`);
+	}
+	/**
+	* Forces redraw of tiles that intersect with the specified region.
+	*
+	* Use this for partial invalidation when only a portion of the content
+	* has changed. More efficient than invalidateAll() for localized updates.
+	*
+	* @param x - The x-coordinate of the region's left edge (logical coordinates)
+	* @param y - The y-coordinate of the region's top edge (logical coordinates)
+	* @param width - The width of the region to invalidate
+	* @param height - The height of the region to invalidate
+	*
+	* @example
+	* ```typescript
+	* // Redraw a specific area after updating content
+	* vcanvas.invalidateRegion(1000, 0, 500, 1000);
+	* ```
+	*/
+	invalidateRegion(x, y, width, height) {
+		this.#debug(`invalidateRegion: ${x},${y},${width},${height}`);
+		const tileWidth = this._getTileWidth();
+		const tileHeight = this._getTileHeight();
+		const { firstTile, lastTile } = this._calculateTileRange();
+		const { firstRow, lastRow } = this._calculateTileRowRange();
+		const overlap = this._renderingOptions.overlapPercent;
+		const startCol = Math.floor(x / tileWidth);
+		const endCol = Math.ceil((x + width) / tileWidth);
+		const startRow = Math.floor(y / tileHeight);
+		const endRow = Math.ceil((y + height) / tileHeight);
+		for (let col = Math.max(firstTile, startCol); col <= Math.min(lastTile, endCol); col++) for (let row = Math.max(firstRow, startRow); row <= Math.min(lastRow, endRow); row++) {
+			const key = tileKey(col, row);
+			if (this._visibleTiles.has(key)) {
+				const tile = this._tilePool.get(key);
+				if (tile) {
+					const overlapX = tileWidth * overlap;
+					const overlapY = tileHeight * overlap;
+					const tileStartX = tile.logicalX - overlapX;
+					const tileEndX = tile.logicalX + tileWidth + overlapX;
+					const tileStartY = tile.logicalY - overlapY;
+					const tileEndY = tile.logicalY + tileHeight + overlapY;
+					const intersectX = Math.max(x, tileStartX);
+					const intersectWidth = Math.min(x + width, tileEndX) - intersectX;
+					const intersectY = Math.max(y, tileStartY);
+					const intersectHeight = Math.min(y + height, tileEndY) - intersectY;
+					if (intersectWidth > 0 && intersectHeight > 0) {
+						const region = {
+							x: intersectX,
+							y: intersectY,
+							width: intersectWidth,
+							height: intersectHeight
+						};
+						this._requestTileDraw(`invalidateRegion`, key, region);
+					}
+				}
+			}
+		}
+	}
+	/**
+	* Converts viewport-relative coordinates to canvas-relative (logical) coordinates.
+	*
+	* Viewport coordinates are relative to the visible area, while canvas coordinates
+	* are in the logical coordinate system of the virtual canvas content.
+	*
+	* @param x - The x-coordinate in viewport space
+	* @param y - The y-coordinate in viewport space
+	* @returns The coordinates in canvas (logical) space
+	*
+	* @example
+	* ```typescript
+	* // Convert mouse position to logical coordinates for hit testing
+	* vcanvas.addEventListener('click', (e) => {
+	*   const logical = vcanvas.convertFromViewportToCanvas(e.offsetX, e.offsetY);
+	*   console.log('Clicked at logical position:', logical.x);
+	* });
+	* ```
+	*/
+	convertFromViewportToCanvas(x, y) {
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		return viewportToCanvas(x, y, this._scrollLeft, contentOffsetX, this._scrollTop, contentOffsetY);
+	}
+	/**
+	* Converts canvas-relative (logical) coordinates to viewport-relative coordinates.
+	*
+	* This is the inverse of `convertFromViewportToCanvas`. Use this to convert
+	* logical positions back to viewport coordinates for positioning UI elements.
+	*
+	* @param x - The x-coordinate in logical space
+	* @param y - The y-coordinate in logical space
+	* @returns The coordinates in viewport space
+	*
+	* @example
+	* ```typescript
+	* // Convert logical marker position to viewport for tooltip positioning
+	* const viewportPos = vcanvas.convertFromCanvasToViewport(markerX, 0);
+	* tooltip.style.left = `${viewportPos.x}px`;
+	* ```
+	*/
+	convertFromCanvasToViewport(x, y) {
+		const contentOffsetX = getContentOffset(this.effectiveLogicalWidth, this._viewportWidth);
+		const contentOffsetY = getContentOffsetY(this.effectiveLogicalHeight, this._viewportHeight);
+		return canvasToViewport(x, y, this._scrollLeft, contentOffsetX, this._scrollTop, contentOffsetY);
+	}
+	/**
+	* Positions light DOM child elements matching the query within a logical coordinate range.
+	*
+	* This method allows you to position HTML elements (like tooltips, markers, or overlays)
+	* at specific logical coordinates within the virtual canvas. The elements will scroll
+	* with the canvas content, maintaining their logical position.
+	*
+	* @param query - A CSS selector string to match child elements
+	* @param startX - The starting x-coordinate in logical space
+	* @param endX - The ending x-coordinate in logical space (determines width)
+	* @param startY - The starting y-coordinate in logical space (optional)
+	* @param endY - The ending y-coordinate in logical space (optional)
+	*
+	* @example
+	* ```typescript
+	* // Position a marker element at logical position x=200 spanning 200px
+	* vcanvas.positionChildRange('#marker', 200, 400);
+	*
+	* // Position multiple elements with a class
+	* vcanvas.positionChildRange('.timeline-item', 0, 1000);
+	* ```
+	*/
+	positionChildRange(query, startX, endX, startY, endY) {
+		if (Number.isNaN(startX) || Number.isNaN(endX)) {
+			console.warn(`positionChildRange: Invalid startX or endX values: ${startX}, ${endX}`);
+			return;
+		}
+		const children = Array.from(this.children).filter((child) => child.matches?.(query));
+		const resolvedStartY = startY ?? 0;
+		const resolvedEndY = endY ?? this.effectiveLogicalHeight;
+		for (const child of children) this._positionedChildren.set(child, {
+			startX,
+			endX,
+			startY: resolvedStartY,
+			endY: resolvedEndY
+		});
+		this._positionChildren(`positionChildRange`);
+	}
+	/**
+	* Manually triggers an update of child element positioning.
+	*
+	* This is useful when the viewport dimensions have changed outside the normal
+	* update cycle and you need to reposition slotted children immediately.
+	* Normally, child positioning is automatically updated during scroll and resize.
+	*
+	* @example
+	* ```typescript
+	* // Force immediate update after custom layout changes
+	* vcanvas.manualChildPositioningUpdate();
+	* ```
+	*/
+	manualChildPositioningUpdate() {
+		this._positionChildren(`manualChildPositioningUpdate`);
+	}
+	/**
+	* Stops positioning child elements matching the query and resets their styles.
+	*
+	* This removes children from the positioning system and clears any inline
+	* styles that were applied by `positionChildRange()`. The children remain
+	* in the DOM but are no longer positioned by the virtual canvas.
+	*
+	* @param query - A CSS selector string to match child elements
+	*
+	* @example
+	* ```typescript
+	* // Stop positioning a specific child element
+	* vcanvas.positionChildClear('#child-0');
+	*
+	* // Stop positioning all children with a specific class
+	* vcanvas.positionChildClear('.my-element');
+	* ```
+	*/
+	positionChildClear(query) {
+		for (const [child] of this._positionedChildren) if (child.matches?.(query)) {
+			this._positionedChildren.delete(child);
+			child.removeAttribute(`style`);
+		}
+	}
+	_positionChildren(source) {
+		this.#debug(`_positionChildren: ${source} positionedChildren: ${this._positionedChildren.size}`);
+		if (!this.hasUpdated) return;
+		if (!this._childrenContainerEl) return;
+		for (const [child, config] of this._positionedChildren) {
+			const width = config.endX - config.startX;
+			const height = config.endY - config.startY;
+			child.setAttribute(`style`, `position: absolute; left: ${config.startX}px; top: ${config.startY}px; width: ${width}px; height: ${height}px;`);
+		}
+	}
+	render() {
+		return html`
+      <div class=${classMap({
+			"scroll-container": true,
+			"scrollable": this.hinting
+		})}>
+        <div class="spacer"></div>
+        <div class="tile-pool"></div>
+        <div class="children-container">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+	}
+};
+__decorate([property({ type: Boolean })], VCanvas.prototype, "hinting", void 0);
+__decorate([property()], VCanvas.prototype, "logicalWidth", null);
+__decorate([property()], VCanvas.prototype, "logicalHeight", null);
+__decorate([property({ type: Number })], VCanvas.prototype, "logicalScrollLeft", null);
+__decorate([property({ type: Number })], VCanvas.prototype, "logicalScrollTop", null);
+VCanvas = __decorate([customElement(`x-vcanvas`)], VCanvas);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
@@ -1699,54 +3100,54 @@ let IxfxTimelineElement = class IxfxTimelineElement extends LitElement {
 		}));
 	}
 };
-__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
-__decorate([property({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
-__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
-__decorate([property({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
-__decorate([property({
+__decorate$1([property({ type: Array })], IxfxTimelineElement.prototype, "tracks", void 0);
+__decorate$1([property({ type: Array })], IxfxTimelineElement.prototype, "events", void 0);
+__decorate$1([property({ type: Number })], IxfxTimelineElement.prototype, "min", void 0);
+__decorate$1([property({ type: Number })], IxfxTimelineElement.prototype, "max", void 0);
+__decorate$1([property({
 	type: String,
 	attribute: `track-height`
 })], IxfxTimelineElement.prototype, "trackHeight", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: String,
 	attribute: `user-scale`
 })], IxfxTimelineElement.prototype, "userScale", void 0);
-__decorate([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
-__decorate([property({
+__decorate$1([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+__decorate$1([property({
 	type: Boolean,
 	attribute: `meta`
 })], IxfxTimelineElement.prototype, "metaEnabled", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Boolean,
 	attribute: `alt-major-bg`
 })], IxfxTimelineElement.prototype, "altMajorBg", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Number,
 	attribute: `default-track-height`
 })], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: String,
 	attribute: `grid-mode`
 })], IxfxTimelineElement.prototype, "gridMode", void 0);
-__decorate([property({
+__decorate$1([property({
 	type: Number,
 	attribute: `minor-step`
 })], IxfxTimelineElement.prototype, "minorStep", void 0);
-__decorate([property({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_ppu", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_viewRange", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_vScale", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_tickledId", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_drag", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
-__decorate([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
-IxfxTimelineElement = __decorate([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
+__decorate$1([property({ type: Object })], IxfxTimelineElement.prototype, "onDragging", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_ppu", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_viewRange", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_vViewRange", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_vScale", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_selectedIds", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_tickledId", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_drag", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_metaHeight", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_trackHeightOverrides", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_trackLayout", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_internalEvents", void 0);
+__decorate$1([state()], IxfxTimelineElement.prototype, "_internalTracks", void 0);
+IxfxTimelineElement = __decorate$1([safeCustomElement(`ixfx-timeline`)], IxfxTimelineElement);
 //#endregion
 export { resolveCssVars as a, attachTimelineInteractions as i, TimelineTrackTabElement as n, resolveGrid as o, timelineStyles as r, TimelineController as s, IxfxTimelineElement as t };
 
-//# sourceMappingURL=timeline-Cv75Th2U.js.map
+//# sourceMappingURL=timeline-2OFtN4Ta.js.map