@ixfx/components 0.4.2 → 0.4.4

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

@@ -1,7 +1,7 @@
-import { n as safeCustomElement, t as __decorate$1 } from "./decorate-DdjvVHS-.js";
+import { n as safeCustomElement, t as __decorate } from "./decorate-VRK8rslU.js";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
-import { classMap } from "lit/directives/class-map.js";
+import { property, state } from "lit/decorators.js";
+import "@clinth/vcanvas";
 //#region src/timeline/timeline-controller.ts
 /**
 * External adapter class that can configure a timeline element
@@ -256,7 +256,7 @@ function drawEventRects(ctx, region, events, trackLayout, selectedIds, tickledId
 		const x = evt.start * ppu;
 		const w = (evt.end - evt.start) * ppu;
 		const y = layout.y + padding;
-		const h = layout.height - padding * 2;
+		const h = layout.height - 6;
 		if (w < 1) continue;
 		const isSelected = selectedIds.has(evt.id);
 		const isTickled = tickledId === evt.id;
@@ -992,1425 +992,24 @@ let TimelineTrackTabElement = class TimelineTrackTabElement extends LitElement {
 		this.style.cursor = ``;
 	}
 };
-__decorate$1([property({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
-__decorate$1([property({
+__decorate([property({ type: String })], TimelineTrackTabElement.prototype, "label", void 0);
+__decorate([property({
 	type: String,
 	attribute: `track-key`
 })], TimelineTrackTabElement.prototype, "trackKey", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "selected", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "reorderable", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Boolean,
 	reflect: true
 })], TimelineTrackTabElement.prototype, "resizable", void 0);
-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);
+TimelineTrackTabElement = __decorate([safeCustomElement(`ixfx-timeline-track-tab`)], TimelineTrackTabElement);
 //#endregion
 //#region src/timeline/timeline-element.ts
 /** Reasonable maximum ppu to prevent infinite zoom-in */
@@ -3100,54 +1699,54 @@ let IxfxTimelineElement = class IxfxTimelineElement extends LitElement {
 		}));
 	}
 };
-__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({
+__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({
 	type: String,
 	attribute: `track-height`
 })], IxfxTimelineElement.prototype, "trackHeight", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: String,
 	attribute: `user-scale`
 })], IxfxTimelineElement.prototype, "userScale", void 0);
-__decorate$1([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
-__decorate$1([property({
+__decorate([property({ type: Boolean })], IxfxTimelineElement.prototype, "reorderable", void 0);
+__decorate([property({
 	type: Boolean,
 	attribute: `meta`
 })], IxfxTimelineElement.prototype, "metaEnabled", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Boolean,
 	attribute: `alt-major-bg`
 })], IxfxTimelineElement.prototype, "altMajorBg", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Number,
 	attribute: `default-track-height`
 })], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: String,
 	attribute: `grid-mode`
 })], IxfxTimelineElement.prototype, "gridMode", void 0);
-__decorate$1([property({
+__decorate([property({
 	type: Number,
 	attribute: `minor-step`
 })], IxfxTimelineElement.prototype, "minorStep", void 0);
-__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);
+__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);
 //#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-2OFtN4Ta.js.map
+//# sourceMappingURL=timeline-B2fgDL4U.js.map