@ixfx/components 0.2.4 → 0.2.5

package/dist/timeline/timeline-element.js

@@ -1,888 +0,0 @@
-var __decorate = (this && this.__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;
-};
-import { html, LitElement, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { drawAxis, drawEventRects, drawMajorMinorGrid, drawMarquee, drawTrackBackgrounds, resolveCssVars, resolveGrid, } from './timeline-draw.js';
-import { applyDeadzone, attachTimelineInteractions, AXIS_DEADZONE_PX, computeVerticalAxisZoom, DRAG_ACTIVATION_PX } from './timeline-interactions.js';
-import { timelineStyles } from './timeline-styles.js';
-import './timeline-track-tabs.js';
-import '@clinth/vcanvas';
-/** Reasonable maximum ppu to prevent infinite zoom-in */
-const MAX_PPU = 10_000;
-/** Minimum rendered track height (~1.5em) at max zoom-out */
-const MIN_TRACK_RENDER_HEIGHT = 24;
-let IxfxTimelineElement = class IxfxTimelineElement extends LitElement {
-    constructor() {
-        super(...arguments);
-        // ── Public properties ───────────────────────────────────────────────
-        this.tracks = [];
-        this.events = [];
-        this.min = 0;
-        this.max = 1000;
-        this.trackHeight = `fixed`;
-        this.userScale = `normal`;
-        this.reorderable = false;
-        this.metaEnabled = false;
-        this.altMajorBg = false;
-        this.defaultTrackHeight = 48;
-        this.gridMode = `adaptive`;
-        this.minorStep = 10;
-        this.onDragging = null;
-        /** Set by TimelineController — formats logical value to label string */
-        this.formatLabel = String;
-        // ── Internal state ──────────────────────────────────────────────────
-        /**
-         * _ppu (pixels per unit) is the PRIMARY horizontal zoom state.
-         * _viewRange.min is the PRIMARY horizontal pan state.
-         * _viewRange.max is DERIVED: min + viewportWidth / _ppu.
-         */
-        this._ppu = 1;
-        this._viewRange = { min: 0, max: 4000 };
-        /**
-         * Vertical zoom/pan state. Analogous to horizontal:
-         * - _vViewRange is in "base height units" (pre-scale track pixels).
-         * - _vScale = viewportHeight / (b - a). When range spans all base height, all tracks fit.
-         * - _vScrollOffset = _vViewRange.min * _vScale — the pixel offset applied to content.
-         */
-        this._vViewRange = { min: 0, max: 1 };
-        this._vScale = 1.0;
-        this._selectedIds = new Set();
-        this._tickledId = undefined;
-        this._drag = { kind: `none` };
-        this._metaHeight = 120;
-        this._trackHeightOverrides = new Map();
-        this._trackLayout = [];
-        this._internalEvents = [];
-        this._internalTracks = [];
-        // ── Private refs ────────────────────────────────────────────────────
-        this.#vcanvas = null;
-        this.#cssVarsCache = {};
-        this.#cleanupInteractions = null;
-        this.#axisHeight = 24;
-        this.#prevTickledId = undefined;
-        this.#resizeObserver = null;
-        this.#pendingVerticalZoomToFit = false;
-        this.#hasInitializedZoom = false;
-        /** Called by ResizeObserver when vcanvas/content-area changes size */
-        this.#onResize = (_entries) => {
-            if (!this.#hasInitializedZoom) {
-                // First resize after mount — compute initial zoom-to-fit
-                this.#hasInitializedZoom = true;
-                this.#initZoomToFit();
-                this.#initVerticalZoomToFit();
-                this.#recomputeTrackLayout();
-            }
-            else {
-                // Subsequent resizes — keep ppu/vViewRange, re-derive from new viewport size
-                this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);
-                this.#deriveVerticalZoom(this._vViewRange.min, this._vViewRange.max);
-            }
-            this.#syncVCanvas();
-            this.#invalidateCanvas();
-        };
-        this.#drawCallback = (ctx, region, _signal) => {
-            const ppu = this._ppu;
-            // Convert pixel region back to timeline logical units for culling.
-            // region.x is in vcanvas logical pixels (pure timeline content, no tab offset).
-            const logicalRegion = {
-                x: region.x / ppu + this.min,
-                y: region.y,
-                width: region.width / ppu,
-                height: region.height,
-            };
-            // Resolve CSS vars once per frame
-            this.#cssVarsCache = resolveCssVars(this);
-            const grid = resolveGrid(this._viewRange, this.userScale, this.#getViewportWidth(), this.gridMode, this.minorStep, ppu);
-            // 1. Track backgrounds
-            const trackInfos = this._internalTracks.map(t => ({ key: t.key, color: t.color }));
-            drawTrackBackgrounds(ctx, logicalRegion, this._trackLayout, trackInfos, this.#cssVarsCache, ppu);
-            // 2. Grid
-            drawMajorMinorGrid(ctx, logicalRegion, grid, this.altMajorBg, this.#cssVarsCache, ppu);
-            // 3. Event rects
-            drawEventRects(ctx, logicalRegion, this._internalEvents, this._trackLayout, this._selectedIds, this._tickledId, this._drag, this.#cssVarsCache, ppu);
-            // 4. Marquee
-            drawMarquee(ctx, this._drag, ppu);
-            // 5. Axis (drawn last so it overlays grid lines in the axis band)
-            const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
-            drawAxis(ctx, logicalRegion, grid, this.#axisHeight, this.formatLabel, this.#cssVarsCache, ppu, scrollTop);
-        };
-        // ── Scroll / axis labels ────────────────────────────────────────────
-        this.#onScrollVirtual = (e) => {
-            const detail = e.detail;
-            // Only react to user-initiated scrolls to avoid feedback loops
-            if (detail.userGesture === false)
-                return;
-            const ppu = this._ppu;
-            if (ppu <= 0)
-                return;
-            // Horizontal: convert pixel scroll position to timeline units (no tab offset)
-            const viewMin = detail.logicalScrollLeft / ppu + this.min;
-            this._viewRange = this.#deriveViewRange(viewMin, ppu);
-            // Vertical: reverse-derive _vViewRange from the new logicalScrollTop
-            // logicalScrollTop = _vViewRange.min * _vScale, so _vViewRange.min = logicalScrollTop / _vScale
-            if (this._vScale > 0) {
-                const span = this._vViewRange.max - this._vViewRange.min;
-                const newVMin = detail.logicalScrollTop / this._vScale;
-                this.#deriveVerticalZoom(newVMin, newVMin + span);
-            }
-        };
-        /**
-         * Range slider handler.
-         * Slider controls zoom (via span) + pan (via position).
-         * Derive ppu from the span the slider produces.
-         */
-        this.#onHZoomInput = (e) => {
-            const detail = e.detail;
-            const span = detail.b - detail.a;
-            const vpWidth = this.#getViewportWidth();
-            if (span > 0) {
-                this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));
-            }
-            this._viewRange = this.#deriveViewRange(detail.a, this._ppu);
-            this.#syncVCanvas();
-        };
-        /**
-         * Vertical range slider handler.
-         * Slider controls vertical zoom (via span) + vertical pan (via position).
-         * Derive _vScale from the span the slider produces.
-         */
-        this.#onVZoomInput = (e) => {
-            const detail = e.detail;
-            this.#deriveVerticalZoom(detail.a, detail.b);
-        };
-        // ── Vertical axis drag-zoom handlers ──────────────────────────────────
-        this.#onVAxisPointerDown = (e) => {
-            const zone = e.currentTarget;
-            zone.setPointerCapture(e.pointerId);
-            e.stopPropagation(); // prevent track-tab click/select
-            e.preventDefault();
-            // Compute anchor in base-height units from the click Y position
-            // The zone covers the track area (below the axis header padding)
-            const rect = zone.getBoundingClientRect();
-            const clickFrac = rect.height > 0
-                ? (e.clientY - rect.top) / rect.height
-                : 0.5;
-            const span = this._vViewRange.max - this._vViewRange.min;
-            const anchorBaseY = this._vViewRange.min + clickFrac * span;
-            this._drag = {
-                kind: `v-axis-zoom`,
-                anchorBaseY,
-                startScreenX: e.screenX,
-                startScreenY: e.screenY,
-                startVMin: this._vViewRange.min,
-                startVMax: this._vViewRange.max,
-                startVScale: this._vScale,
-            };
-        };
-        this.#onVAxisPointerMove = (e) => {
-            if (this._drag.kind !== `v-axis-zoom`)
-                return;
-            const drag = this._drag;
-            const rawDx = e.screenX - drag.startScreenX;
-            const rawDy = e.screenY - drag.startScreenY;
-            // Activation threshold — don't start until enough total movement
-            if (Math.abs(rawDx) + Math.abs(rawDy) < DRAG_ACTIVATION_PX)
-                return;
-            // Per-axis deadzone — ignore small off-axis movement
-            const dx = applyDeadzone(rawDx, AXIS_DEADZONE_PX);
-            const dy = applyDeadzone(rawDy, AXIS_DEADZONE_PX);
-            const result = computeVerticalAxisZoom(drag.startVMin, drag.startVMax, drag.startVScale, drag.anchorBaseY, dx, dy);
-            this.setVerticalZoomPan(result.vMin, result.vMax);
-        };
-        this.#onVAxisPointerUp = (e) => {
-            if (this._drag.kind !== `v-axis-zoom`)
-                return;
-            e.currentTarget.releasePointerCapture(e.pointerId);
-            this._drag = { kind: `none` };
-        };
-        // ── Track resize handlers ────────────────────────────────────────────
-        /** Live preview during drag — update heights but don't fire public event */
-        this.#onTrackResizeMove = (e) => {
-            const { trackKey, height } = e.detail;
-            this.#applyTrackResize(trackKey, height);
-        };
-        /** Final resize on pointerup — apply height and fire public event */
-        this.#onTrackResizeEnd = (e) => {
-            const { trackKey, height } = e.detail;
-            this.#applyTrackResize(trackKey, height);
-            this.dispatchEvent(new CustomEvent(`track-resize`, {
-                detail: { trackKey, height },
-                bubbles: true,
-                composed: true,
-            }));
-        };
-    }
-    static { this.styles = [timelineStyles]; }
-    // ── Private refs ────────────────────────────────────────────────────
-    #vcanvas;
-    #cssVarsCache;
-    #cleanupInteractions;
-    #axisHeight;
-    #prevTickledId;
-    #resizeObserver;
-    #pendingVerticalZoomToFit;
-    #hasInitializedZoom;
-    // ── Computed getters (for interactions module) ──────────────────────
-    /** Pixels per logical unit — the zoom level */
-    get pxPerUnit() {
-        return this._ppu;
-    }
-    /** Height of the axis header band in pixels */
-    get axisHeight() {
-        return this.#axisHeight;
-    }
-    /** Width of the track tab area in pixels (from --timeline-tab-width CSS var) */
-    get tabWidth() {
-        return this.#tabWidth;
-    }
-    // ── Viewport helpers ────────────────────────────────────────────────
-    #getViewportWidth() {
-        const raw = this.#vcanvas?.viewportWidth
-            ?? this.#vcanvas?.clientWidth
-            ?? 800;
-        return raw;
-    }
-    /** Minimum ppu: fits the full total range into the viewport */
-    #minPpu() {
-        const totalSpan = this.max - this.min;
-        if (totalSpan <= 0)
-            return 1;
-        const vpWidth = this.#getViewportWidth();
-        return vpWidth / totalSpan;
-    }
-    // ── Vertical viewport helpers ───────────────────────────────────────
-    /** Available vertical pixels for track content (excludes axis) */
-    #getViewportHeight() {
-        return this.#vcanvas?.viewportHeight
-            ?? this.#vcanvas?.clientHeight
-            ?? 300;
-    }
-    /**
-     * Total base height: sum of all visible track base heights (before vScale).
-     * This is the "total range" for the vertical slider.
-     */
-    #getTotalBaseHeight() {
-        let total = 0;
-        for (const track of this._internalTracks) {
-            if (track.hidden)
-                continue;
-            const override = this._trackHeightOverrides.get(track.key);
-            total += override ?? track.height ?? this.defaultTrackHeight;
-        }
-        return total || 1; // avoid zero
-    }
-    /** Smallest base height among visible tracks (before vScale) */
-    #getSmallestBaseTrackHeight() {
-        let smallest = Infinity;
-        for (const track of this._internalTracks) {
-            if (track.hidden)
-                continue;
-            const override = this._trackHeightOverrides.get(track.key);
-            const h = override ?? track.height ?? this.defaultTrackHeight;
-            if (h < smallest)
-                smallest = h;
-        }
-        return smallest === Infinity ? this.defaultTrackHeight : smallest;
-    }
-    /** Largest base height among visible tracks (before vScale) */
-    #getLargestBaseTrackHeight() {
-        let largest = 0;
-        for (const track of this._internalTracks) {
-            if (track.hidden)
-                continue;
-            const override = this._trackHeightOverrides.get(track.key);
-            const h = override ?? track.height ?? this.defaultTrackHeight;
-            if (h > largest)
-                largest = h;
-        }
-        return largest || this.defaultTrackHeight;
-    }
-    /**
-     * Derive vScale and vViewRange from a given vertical view range.
-     * viewportHeight / span = scale factor applied to base track heights.
-     * The axis header takes up fixed space, so available height for tracks is reduced.
-     */
-    #deriveVerticalZoom(vMin, vMax) {
-        const totalBase = this.#getTotalBaseHeight();
-        const vpHeight = this.#getViewportHeight() - this.#axisHeight;
-        // Clamp range to [0, totalBase]
-        let a = vMin;
-        let b = vMax;
-        // Min span (max zoom-in): largest visible track fills the viewport
-        const largestBase = this.#getLargestBaseTrackHeight();
-        const minSpan = Math.max(largestBase, totalBase * 0.05);
-        // Max span (max zoom-out): smallest visible track must not shrink below MIN_TRACK_RENDER_HEIGHT
-        // Since renderedHeight = baseHeight * vScale and vScale = vpHeight / span,
-        // we need: smallestBase * (vpHeight / span) >= MIN_TRACK_RENDER_HEIGHT
-        // → span <= vpHeight * smallestBase / MIN_TRACK_RENDER_HEIGHT
-        const smallestBase = this.#getSmallestBaseTrackHeight();
-        const maxSpanFromMinHeight = vpHeight > 0
-            ? vpHeight * smallestBase / MIN_TRACK_RENDER_HEIGHT
-            : totalBase;
-        const maxSpan = Math.min(totalBase, maxSpanFromMinHeight);
-        let span = b - a;
-        if (span < minSpan) {
-            const center = (a + b) / 2;
-            a = center - minSpan / 2;
-            b = center + minSpan / 2;
-            span = minSpan;
-        }
-        if (span > maxSpan) {
-            const center = (a + b) / 2;
-            a = center - maxSpan / 2;
-            b = center + maxSpan / 2;
-            span = maxSpan;
-        }
-        if (b > totalBase) {
-            b = totalBase;
-            a = Math.max(0, b - span);
-        }
-        if (a < 0) {
-            a = 0;
-            b = Math.min(totalBase, a + span);
-        }
-        this._vViewRange = { min: a, max: b };
-        this._vScale = vpHeight > 0 ? vpHeight / (b - a) : 1;
-    }
-    /** Reset vertical zoom to fit all tracks */
-    #initVerticalZoomToFit() {
-        const totalBase = this.#getTotalBaseHeight();
-        this.#deriveVerticalZoom(0, totalBase);
-    }
-    /** Pixel offset to scroll the content area */
-    get #vScrollOffset() {
-        return this._vViewRange.min * this._vScale;
-    }
-    /**
-     * Derive viewRange from ppu + viewMin, clamped to [min, max].
-     * Returns a new ViewRange.
-     */
-    #deriveViewRange(viewMin, ppu) {
-        const vpWidth = this.#getViewportWidth();
-        const viewSpan = ppu > 0 ? vpWidth / ppu : (this.max - this.min);
-        let newMin = viewMin;
-        let newMax = newMin + viewSpan;
-        // Clamp: don't let max exceed total max
-        if (newMax > this.max) {
-            newMax = this.max;
-            newMin = Math.max(this.min, newMax - viewSpan);
-        }
-        // Clamp: don't let min go below total min
-        if (newMin < this.min) {
-            newMin = this.min;
-            newMax = Math.min(this.max, newMin + viewSpan);
-        }
-        return { min: newMin, max: newMax };
-    }
-    // ── Public methods: zoom & pan ──────────────────────────────────────
-    /** Set the zoom level (pixels per logical unit) */
-    setPpu(ppu) {
-        this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));
-        this._viewRange = this.#deriveViewRange(this._viewRange.min, this._ppu);
-    }
-    /**
-     * Set the view range. ppu is back-computed from the span.
-     * Use for programmatic view changes (e.g. TimelineController).
-     */
-    setViewRange(range) {
-        const vpWidth = this.#getViewportWidth();
-        const span = range.max - range.min;
-        if (span > 0) {
-            this._ppu = Math.max(this.#minPpu(), Math.min(vpWidth / span, MAX_PPU));
-        }
-        this._viewRange = this.#deriveViewRange(range.min, this._ppu);
-    }
-    /**
-     * Set zoom + pan atomically. Used by axis-zoom interaction.
-     * viewMin is the left edge in timeline units; ppu is the new zoom level.
-     */
-    setZoomPan(viewMin, ppu) {
-        this._ppu = Math.max(this.#minPpu(), Math.min(ppu, MAX_PPU));
-        this._viewRange = this.#deriveViewRange(viewMin, this._ppu);
-    }
-    /**
-     * Set vertical zoom + pan atomically. Used by v-axis-zoom interaction.
-     * vMin/vMax define the vertical view range in base-height units.
-     */
-    setVerticalZoomPan(vMin, vMax) {
-        this.#deriveVerticalZoom(vMin, vMax);
-    }
-    selectAll() {
-        this._selectedIds = new Set(this._internalEvents.map(e => e.id));
-        this.#fireSelectionChange();
-        this.#invalidateCanvas();
-    }
-    deselectAll() {
-        this._selectedIds = new Set();
-        this.#fireSelectionChange();
-        this.#invalidateCanvas();
-    }
-    getTrackEvents(trackKey) {
-        return this._internalEvents.filter(e => e.trackKey === trackKey);
-    }
-    get selectedIds() {
-        return [...this._selectedIds];
-    }
-    set selectedIds(ids) {
-        this._selectedIds = new Set(ids);
-        this.#fireSelectionChange();
-        this.#invalidateCanvas();
-    }
-    selectTrack(key, shiftKey = false) {
-        this.dispatchEvent(new CustomEvent(`track-select`, {
-            detail: { trackKey: key, shiftKey },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-    /** Resets all track height overrides to the default height and resets vertical zoom. */
-    resetTrackHeights() {
-        this._trackHeightOverrides = new Map();
-        this.#pendingVerticalZoomToFit = true;
-        // willUpdate will see the flag and reset vertical zoom during the same update cycle
-    }
-    /** Default no-op snapping - no modification of drag values */
-    static { this.defaultDragSnapping = () => ({}); }
-    /** Grid-snapping - snaps start/end to nearest minor gridline */
-    static { this.gridSnapping = (detail) => {
-        const { gridResolution, currentStart, currentEnd } = detail;
-        const { minorStep } = gridResolution;
-        return {
-            start: Math.round(currentStart / minorStep) * minorStep,
-            end: Math.round(currentEnd / minorStep) * minorStep,
-        };
-    }; }
-    /**
-     * Called by timeline-interactions during drag.
-     * Applies onDragging callback if set, then fires 'dragging' event.
-     * Returns constrained values.
-     */
-    processDrag(eventId, rawLogicalX, rawY, currentStart, currentEnd, currentTrackKey, originTrackKey, gridResolution) {
-        let constrainedStart = currentStart;
-        let constrainedEnd = currentEnd;
-        let constrainedTrackKey = currentTrackKey;
-        if (this.onDragging) {
-            const result = this.onDragging({
-                eventId,
-                rawLogicalX,
-                rawY,
-                currentStart,
-                currentEnd,
-                currentTrackKey,
-                gridResolution,
-                originTrackKey,
-            });
-            constrainedStart = result.start ?? currentStart;
-            constrainedEnd = result.end ?? currentEnd;
-            constrainedTrackKey = result.trackKey ?? currentTrackKey;
-        }
-        this.dispatchEvent(new CustomEvent(`dragging`, {
-            detail: {
-                eventId,
-                start: constrainedStart,
-                end: constrainedEnd,
-                trackKey: constrainedTrackKey,
-                rawLogicalX,
-                rawY,
-                originTrackKey,
-            },
-            bubbles: true,
-            composed: true,
-        }));
-        return {
-            start: constrainedStart,
-            end: constrainedEnd,
-            trackKey: constrainedTrackKey,
-        };
-    }
-    /** Returns the vcanvas element (for timeline-interactions) */
-    getVCanvas() {
-        return this.#vcanvas;
-    }
-    /** Returns the currently hovered (tickled) event, or null if none. */
-    get tickledEvent() {
-        if (this._tickledId === undefined)
-            return null;
-        return this._internalEvents.find(e => e.id === this._tickledId) ?? null;
-    }
-    // ── Lifecycle ───────────────────────────────────────────────────────
-    firstUpdated() {
-        this.#vcanvas = this.shadowRoot?.querySelector(`x-vcanvas`);
-        if (this.#vcanvas) {
-            this.#vcanvas.drawCallback = this.#drawCallback;
-            this.#vcanvas.addEventListener(`scroll-virtual`, this.#onScrollVirtual);
-            this.#cleanupInteractions = attachTimelineInteractions(this, this.#vcanvas);
-            // Watch for viewport resizes — adjust viewRange.max, keep ppu stable.
-            // The observer fires immediately with the initial size, which handles
-            // the initial zoom-to-fit without setting state in firstUpdated.
-            this.#resizeObserver = new ResizeObserver(this.#onResize);
-            this.#resizeObserver.observe(this.#vcanvas);
-        }
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.#cleanupInteractions?.();
-        this.#cleanupInteractions = null;
-        this.#resizeObserver?.disconnect();
-        this.#resizeObserver = null;
-    }
-    /**
-     * willUpdate runs before render — safe to set @state() properties here
-     * without triggering an additional update cycle. All state derivation
-     * (internal copies, track layout, vertical zoom) happens here.
-     */
-    willUpdate(changedProps) {
-        // Sync external tracks/events into internal managed copies on shallow change
-        let needsLayoutRecompute = false;
-        let needsVerticalZoomReset = false;
-        let needsHorizontalZoomToFit = false;
-        if (changedProps.has(`tracks`)) {
-            this._internalTracks = [...this.tracks];
-            needsLayoutRecompute = true;
-            needsVerticalZoomReset = true;
-        }
-        if (changedProps.has(`events`)) {
-            this._internalEvents = [...this.events];
-        }
-        if (changedProps.has(`trackHeight`)) {
-            // Mode changed — clear per-track overrides when leaving 'free' mode
-            if (this.trackHeight !== `free` && this._trackHeightOverrides.size > 0) {
-                this._trackHeightOverrides = new Map();
-            }
-            needsLayoutRecompute = true;
-            needsVerticalZoomReset = true;
-        }
-        if (changedProps.has(`_vScale`) || changedProps.has(`defaultTrackHeight`) || changedProps.has(`_trackHeightOverrides`)) {
-            needsLayoutRecompute = true;
-        }
-        if (changedProps.has(`min`) || changedProps.has(`max`)) {
-            needsHorizontalZoomToFit = true;
-        }
-        // Consume pending zoom-to-fit flag (from resetTrackHeights)
-        if (this.#pendingVerticalZoomToFit) {
-            this.#pendingVerticalZoomToFit = false;
-            needsVerticalZoomReset = true;
-        }
-        // Horizontal zoom-to-fit when total range changes
-        if (needsHorizontalZoomToFit) {
-            this.#initZoomToFit();
-        }
-        // Vertical zoom reset must happen BEFORE layout recompute (layout uses _vScale)
-        if (needsVerticalZoomReset) {
-            this.#initVerticalZoomToFit();
-        }
-        if (needsLayoutRecompute) {
-            this.#recomputeTrackLayout();
-        }
-    }
-    /**
-     * updated runs after render — for DOM side-effects only (syncing vcanvas,
-     * scrolling, invalidating canvas, dispatching events).
-     */
-    updated(changedProps) {
-        if (changedProps.has(`_ppu`) || changedProps.has(`_viewRange`) || changedProps.has(`min`) || changedProps.has(`max`)) {
-            this.#syncVCanvas();
-            this.#invalidateCanvas();
-        }
-        if (changedProps.has(`events`) || changedProps.has(`userScale`) || changedProps.has(`altMajorBg`) || changedProps.has(`gridMode`) || changedProps.has(`minorStep`)) {
-            this.#invalidateCanvas();
-        }
-        if (changedProps.has(`_trackLayout`)) {
-            this.#syncVCanvasVertical();
-            this.#positionTabs();
-            this.#invalidateCanvas();
-        }
-        // Sync vertical zoom/pan to vcanvas logicalScrollTop + logicalHeight
-        if (changedProps.has(`_vViewRange`) || changedProps.has(`_vScale`)) {
-            this.#syncVerticalScroll();
-            this.#invalidateCanvas();
-        }
-        if (this._tickledId !== this.#prevTickledId) {
-            this.#prevTickledId = this._tickledId;
-            this.dispatchEvent(new CustomEvent(`tickle-change`, {
-                detail: { event: this.tickledEvent },
-                bubbles: true,
-                composed: true,
-            }));
-        }
-    }
-    render() {
-        const totalBaseHeight = this.#getTotalBaseHeight();
-        return html `
-      <div class="content-wrapper">
-        <div class="content-area">
-          <div class="v-axis-zone"
-            @pointerdown=${this.#onVAxisPointerDown}
-            @pointermove=${this.#onVAxisPointerMove}
-            @pointerup=${this.#onVAxisPointerUp}
-            @pointercancel=${this.#onVAxisPointerUp}
-          ></div>
-          <div class="tab-column">
-            ${this._internalTracks
-            .filter(t => !t.hidden)
-            .map((t) => {
-            const layout = this._trackLayout.find(l => l.trackKey === t.key);
-            if (!layout)
-                return nothing;
-            return html `
-                  <ixfx-timeline-track-tab
-                    .label=${t.label}
-                    track-key="${t.key}"
-                    ?resizable=${this.trackHeight !== `none`}
-                    ?reorderable=${this.reorderable}
-                    @click=${(e) => this.selectTrack(t.key, e.shiftKey)}
-                    @track-resize-move=${this.#onTrackResizeMove}
-                    @track-resize=${this.#onTrackResizeEnd}
-                  ></ixfx-timeline-track-tab>
-                `;
-        })}
-          </div>
-          <x-vcanvas></x-vcanvas>
-        </div>
-        <div class="v-zoom">
-          <ixfx-range-multi
-            orientation="vertical"
-            min="0"
-            max="${totalBaseHeight}"
-            a="${this._vViewRange.min}"
-            b="${this._vViewRange.max}"
-            step="any"
-            crossover="stop"
-            resize-mode="bipolar-flex"
-            @input=${this.#onVZoomInput}
-          ></ixfx-range-multi>
-        </div>
-      </div>
-
-      <div class="h-zoom">
-        <ixfx-range-multi
-          min="${this.min}"
-          max="${this.max}"
-          a="${this._viewRange.min}"
-          b="${this._viewRange.max}"
-          crossover="stop"
-          resize-mode="bipolar-flex"
-          @input=${this.#onHZoomInput}
-        ></ixfx-range-multi>
-      </div>
-
-      <div class="meta-resizer ${this.metaEnabled ? `visible` : ``}"></div>
-      <div class="meta-area ${this.metaEnabled ? `visible` : ``}" style="height:${this._metaHeight}px"></div>
-    `;
-    }
-    // ── VCanvas wiring ──────────────────────────────────────────────────
-    /** Compute initial ppu to fit 80% of the range, then derive viewRange */
-    #initZoomToFit() {
-        const vpWidth = this.#getViewportWidth();
-        const totalSpan = this.max - this.min;
-        const zoomFactor = 0.8;
-        this._ppu = totalSpan > 0 ? vpWidth / (totalSpan * zoomFactor) : 1;
-        this._viewRange = { min: this.min, max: this.min + totalSpan * zoomFactor };
-        this.#syncVCanvas();
-        // ResizeObserver will re-derive viewRange once vcanvas has its final layout
-    }
-    #syncVCanvas() {
-        if (!this.#vcanvas)
-            return;
-        const totalSpan = this.max - this.min;
-        // logicalWidth = pure timeline content width in pixels (no tab offset)
-        this.#vcanvas.logicalWidth = totalSpan * this._ppu;
-        this.#syncVCanvasVertical();
-        this.#syncVCanvasScroll();
-    }
-    /** Sync logicalHeight and logicalScrollTop to the vcanvas */
-    #syncVCanvasVertical() {
-        if (!this.#vcanvas)
-            return;
-        const totalHeight = this._trackLayout.reduce((sum, tl) => sum + tl.height, 0);
-        const canvasHeight = Math.max(totalHeight, 40) + this.#axisHeight;
-        this.#vcanvas.logicalHeight = canvasHeight;
-        this.#vcanvas.logicalScrollTop = this.#vScrollOffset;
-    }
-    #syncVCanvasScroll() {
-        if (!this.#vcanvas)
-            return;
-        // Scroll position in logical pixels: pure timeline scroll offset (no tab area)
-        this.#vcanvas.logicalScrollLeft = (this._viewRange.min - this.min) * this._ppu;
-    }
-    #invalidateCanvas() {
-        this.#vcanvas?.invalidateAll();
-    }
-    /** Called by ResizeObserver when vcanvas/content-area changes size */
-    #onResize;
-    #drawCallback;
-    // ── Scroll / axis labels ────────────────────────────────────────────
-    #onScrollVirtual;
-    // ── Private helpers ─────────────────────────────────────────────────
-    #recomputeTrackLayout() {
-        const layout = [];
-        let y = this.#axisHeight;
-        for (const track of this._internalTracks) {
-            if (track.hidden)
-                continue;
-            const override = this._trackHeightOverrides.get(track.key);
-            const baseHeight = override ?? track.height ?? this.defaultTrackHeight;
-            const height = Math.round(baseHeight * this._vScale);
-            layout.push({ trackKey: track.key, y, height });
-            y += height;
-        }
-        this._trackLayout = layout;
-    }
-    /**
-     * Range slider handler.
-     * Slider controls zoom (via span) + pan (via position).
-     * Derive ppu from the span the slider produces.
-     */
-    #onHZoomInput;
-    /**
-     * Vertical range slider handler.
-     * Slider controls vertical zoom (via span) + vertical pan (via position).
-     * Derive _vScale from the span the slider produces.
-     */
-    #onVZoomInput;
-    // ── Vertical axis drag-zoom handlers ──────────────────────────────────
-    #onVAxisPointerDown;
-    #onVAxisPointerMove;
-    #onVAxisPointerUp;
-    /** Sync vertical scroll position to vcanvas logicalScrollTop */
-    #syncVerticalScroll() {
-        this.#syncVCanvasVertical();
-        this.#positionTabs();
-    }
-    /**
-     * Position track tabs in the .tab-column via absolute CSS positioning.
-     * Applies a vertical translateY to offset for the current vertical scroll.
-     */
-    #positionTabs() {
-        const tabColumn = this.shadowRoot?.querySelector(`.tab-column`);
-        if (!tabColumn)
-            return;
-        const scrollTop = this.#vcanvas?.logicalScrollTop ?? 0;
-        tabColumn.style.transform = `translateY(${-scrollTop}px)`;
-        for (const layout of this._trackLayout) {
-            const tab = tabColumn.querySelector(`ixfx-timeline-track-tab[track-key="${layout.trackKey}"]`);
-            if (!tab)
-                continue;
-            tab.style.top = `${layout.y}px`;
-            tab.style.height = `${layout.height}px`;
-        }
-    }
-    /** Read the tab width from the CSS custom property */
-    get #tabWidth() {
-        const raw = getComputedStyle(this).getPropertyValue(`--timeline-tab-width`).trim();
-        return Number.parseInt(raw, 10) || 120;
-    }
-    // ── Track resize handlers ────────────────────────────────────────────
-    /** Live preview during drag — update heights but don't fire public event */
-    #onTrackResizeMove;
-    /** Final resize on pointerup — apply height and fire public event */
-    #onTrackResizeEnd;
-    /**
-     * Apply track height based on the current `trackHeight` mode.
-     * - `fixed`: sets `defaultTrackHeight` (all tracks change uniformly)
-     * - `free`: sets per-track override in `_trackHeightOverrides`
-     * - `none`: should never be called (resize is disabled)
-     */
-    #applyTrackResize(trackKey, height) {
-        if (this.trackHeight === `fixed`) {
-            this.defaultTrackHeight = height;
-        }
-        else if (this.trackHeight === `free`) {
-            const next = new Map(this._trackHeightOverrides);
-            next.set(trackKey, height);
-            this._trackHeightOverrides = next;
-        }
-        // `updated()` will trigger #recomputeTrackLayout via defaultTrackHeight or _trackHeightOverrides change
-    }
-    #fireSelectionChange() {
-        this.dispatchEvent(new CustomEvent(`selection-change`, {
-            detail: { selectedIds: [...this._selectedIds] },
-            bubbles: true,
-            composed: true,
-        }));
-    }
-};
-__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([
-    property({ type: String, attribute: `user-scale` })
-], IxfxTimelineElement.prototype, "userScale", void 0);
-__decorate([
-    property({ type: Boolean })
-], IxfxTimelineElement.prototype, "reorderable", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `meta` })
-], IxfxTimelineElement.prototype, "metaEnabled", void 0);
-__decorate([
-    property({ type: Boolean, attribute: `alt-major-bg` })
-], IxfxTimelineElement.prototype, "altMajorBg", void 0);
-__decorate([
-    property({ type: Number, attribute: `default-track-height` })
-], IxfxTimelineElement.prototype, "defaultTrackHeight", void 0);
-__decorate([
-    property({ type: String, attribute: `grid-mode` })
-], IxfxTimelineElement.prototype, "gridMode", void 0);
-__decorate([
-    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([
-    customElement(`ixfx-timeline`)
-], IxfxTimelineElement);
-export { IxfxTimelineElement };
-//# sourceMappingURL=timeline-element.js.map