loom-browser 0.0.4 → 0.0.6

package/dist/loom-react.esm.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { createContext, forwardRef, useRef, useState, useEffect, useImperativeHandle, useMemo, useContext, useCallback } from 'react';
 import { BigWig } from '@gmod/bbi';
 import { RemoteFile } from 'generic-filehandle2';
@@ -1337,6 +1337,35 @@ function parseLocus(str, cumOffsets) {
         return null;
     return { chr, start, end };
 }
+/**
+ * Format a Locus object as a human-readable string with thousands separators.
+ * e.g., { chr: 'chr17', start: 7668000, end: 7688000 } → "chr17:7,668,000-7,688,000"
+ */
+function formatLocus(locus) {
+    if (isWholeGenomeView(locus))
+        return 'All Chromosomes';
+    return `${locus.chr}:${Math.round(locus.start).toLocaleString()}-${Math.round(locus.end).toLocaleString()}`;
+}
+/**
+ * Format a base pair length as a human-readable string.
+ * e.g., 20000 → "20 kb", 2500000 → "2.5 Mb", 500 → "500 bp"
+ */
+function formatBpLength(bp) {
+    bp = Math.abs(bp);
+    if (bp >= 1e9) {
+        const val = bp / 1e9;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} Gb`;
+    }
+    if (bp >= 1e6) {
+        const val = bp / 1e6;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} Mb`;
+    }
+    if (bp >= 1e3) {
+        const val = bp / 1e3;
+        return `${val % 1 === 0 ? val.toFixed(0) : val.toFixed(1)} kb`;
+    }
+    return `${Math.round(bp)} bp`;
+}
 /**
  * Clamp a locus to valid chromosome bounds.
  *
@@ -8202,6 +8231,72 @@ class SequenceDataSource {
     }
 }
 
+/**
+ * DataSource backed by an in-memory feature array.
+ *
+ * Wraps a pre-loaded feature array in a FeatureCache for spatial queries,
+ * enabling inline features to flow through the same data lifecycle as
+ * URL-based data sources.
+ *
+ * Layer 1 (Data + Layout): no DOM, no canvas.
+ */
+/**
+ * DataSource that serves features from an in-memory array.
+ *
+ * Features are indexed in a FeatureCache on construction for efficient
+ * spatial queries. Calling `setFeatures()` replaces the cache entirely.
+ */
+class MemoryDataSource {
+    constructor(features) {
+        this.cache = new FeatureCache(features);
+    }
+    /** Replace the in-memory features and rebuild the spatial index. */
+    setFeatures(features) {
+        this.cache = new FeatureCache(features);
+    }
+    /** Set a chromosome name resolver for alias resolution. */
+    setChromNameResolver(resolver) {
+        this._resolveChromName = resolver;
+    }
+    /** Set cumulative offsets for whole genome view coordinate transformation. */
+    setCumulativeOffsets(offsets) {
+        this._cumulativeOffsets = offsets;
+    }
+    async fetch(locus, _bpPerPixel, _signal) {
+        if (isWholeGenomeView(locus) && this._cumulativeOffsets) {
+            return this.fetchWG();
+        }
+        const chr = this._resolveChromName
+            ? this._resolveChromName(locus.chr)
+            : locus.chr;
+        return this.cache.queryFeatures(chr, locus.start, locus.end);
+    }
+    fetchWG() {
+        const offsets = this._cumulativeOffsets;
+        const chrNames = mainChromosomeNames(Object.fromEntries(offsets.chromosomeNames.map(name => { var _a; return [name, (_a = offsets.offsets[name]) !== null && _a !== void 0 ? _a : 0]; })));
+        const wgFeatures = [];
+        const allByChrom = this.cache.getAllFeatures();
+        for (const chr of chrNames) {
+            const features = allByChrom[chr];
+            if (!features)
+                continue;
+            const offset = offsets.offsets[chr];
+            if (offset === undefined)
+                continue;
+            for (const f of features) {
+                wgFeatures.push({
+                    ...f,
+                    chr: 'all',
+                    start: offset + f.start,
+                    end: offset + f.end,
+                });
+            }
+        }
+        wgFeatures.sort((a, b) => a.start - b.start);
+        return wgFeatures;
+    }
+}
+
 /**
  * Stateless renderer for interaction (arc/BEDPE) tracks.
  *
@@ -8772,6 +8867,11 @@ function createDataSource(config, workerProvider) {
                 indexed: config.indexed,
                 workerProvider,
             });
+        case 'memory':
+            // Memory data sources are created directly with features by the caller.
+            // This path is only hit during session restore, where in-memory features
+            // are not available — return an empty MemoryDataSource as a placeholder.
+            return new MemoryDataSource([]);
     }
 }
 // ─── Built-in track creators ─────────────────────────────────────────────────
@@ -8950,6 +9050,9 @@ function dataSourceCacheKey(config) {
             return `ucsc:${(_b = config.genome) !== null && _b !== void 0 ? _b : ''}:${(_c = config.track) !== null && _c !== void 0 ? _c : ''}`;
         case 'text':
             return `text:${config.url}:${(_d = config.format) !== null && _d !== void 0 ? _d : ''}:${(_e = config.indexURL) !== null && _e !== void 0 ? _e : ''}`;
+        case 'memory':
+            // Each memory data source is unique — no deduplication.
+            return `memory:${Math.random()}`;
     }
 }
 
@@ -10060,6 +10163,60 @@ class HeadlessGenomeBrowser {
             this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
         return track;
     }
+    /** Add a BigWig-style signal track backed by in-memory features (no URL required). */
+    addWigTrackWithFeatures(features, options) {
+        const { canvas } = this.canvasProvider.createCanvas(0, 0);
+        const track = new WigTrackCanvas(canvas, {
+            locus: this._locus,
+            features: [],
+            config: options === null || options === void 0 ? void 0 : options.config,
+            height: options === null || options === void 0 ? void 0 : options.height,
+            background: options === null || options === void 0 ? void 0 : options.background,
+            theme: this.theme,
+            canvasProvider: this.canvasProvider,
+            name: options === null || options === void 0 ? void 0 : options.name,
+            sequenceProvider: this.sequenceProvider,
+        });
+        const dataSource = new MemoryDataSource(features);
+        if (this.cumulativeOffsets) {
+            dataSource.setCumulativeOffsets(this.cumulativeOffsets);
+        }
+        if (this.genome) {
+            dataSource.setChromNameResolver(alias => this.genome.getChromosomeName(alias));
+        }
+        const dataSourceConfig = { type: 'memory' };
+        this.addTrack(track, dataSource, dataSourceConfig, options === null || options === void 0 ? void 0 : options.maxTrackHeight);
+        if (options === null || options === void 0 ? void 0 : options.metadata)
+            this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
+        return track;
+    }
+    /** Add a BED/annotation track backed by in-memory features (no URL required). Features must include `chr`. */
+    addBedTrackWithFeatures(features, options) {
+        const { canvas } = this.canvasProvider.createCanvas(0, 0);
+        const track = new AnnotationTrackCanvas(canvas, {
+            locus: this._locus,
+            features: [],
+            config: options === null || options === void 0 ? void 0 : options.config,
+            height: options === null || options === void 0 ? void 0 : options.height,
+            background: options === null || options === void 0 ? void 0 : options.background,
+            theme: this.theme,
+            canvasProvider: this.canvasProvider,
+            workerProvider: this.workerProvider,
+            name: options === null || options === void 0 ? void 0 : options.name,
+        });
+        const dataSource = new MemoryDataSource(features);
+        if (this.cumulativeOffsets) {
+            dataSource.setCumulativeOffsets(this.cumulativeOffsets);
+        }
+        if (this.genome) {
+            dataSource.setChromNameResolver(alias => this.genome.getChromosomeName(alias));
+        }
+        const dataSourceConfig = { type: 'memory' };
+        this.addTrack(track, dataSource, dataSourceConfig, options === null || options === void 0 ? void 0 : options.maxTrackHeight);
+        if (options === null || options === void 0 ? void 0 : options.metadata)
+            this.managedTracks[this.managedTracks.length - 1].metadata = options.metadata;
+        return track;
+    }
     /** Add a DNA/RNA sequence track. Data fetching is handled automatically via the genome's sequence provider. */
     addSequenceTrack(options) {
         const trackConfig = { type: 'sequence', config: options === null || options === void 0 ? void 0 : options.config };
@@ -11210,6 +11367,13 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
         this.events.on(BrowserEvent.DataLoaded, ({ track }) => {
             this.updateAxisContent(track);
         });
+        // Repaint axis canvases when theme changes (track canvases update via
+        // track.setTheme(), but axis sidebar is managed here in GenomeBrowser).
+        this.events.on(BrowserEvent.ThemeChanged, () => {
+            for (const mt of this.managedTracks) {
+                this.updateAxisContent(mt.track);
+            }
+        });
         // Re-render ROI overlays when ROIs change or viewport moves
         this.events.on(BrowserEvent.ROIAdded, () => this.renderROIOverlays());
         this.events.on(BrowserEvent.ROIRemoved, () => this.renderROIOverlays());
@@ -11412,9 +11576,10 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
         const { axisDiv } = entry;
         const rawInfo = (_a = track.getAxisInfo) === null || _a === void 0 ? void 0 : _a.call(track);
         if (!rawInfo) {
-            // No axis info — clear content and hide border (e.g., ruler tracks)
+            // No axis info — keep the column for alignment but clear content
             axisDiv.innerHTML = "";
             axisDiv.style.borderRight = "none";
+            axisDiv.style.backgroundColor = this.theme.palette.background;
             entry.axisCanvas = null;
             return;
         }
@@ -12435,6 +12600,23 @@ class GenomeBrowser extends HeadlessGenomeBrowser {
 
 const GenomeBrowserContext = createContext(null);
 
+/** Infer the shell theme from a RenderTheme's palette. */
+function inferShellTheme(theme) {
+    var _a;
+    const bg = (_a = theme === null || theme === void 0 ? void 0 : theme.palette) === null || _a === void 0 ? void 0 : _a.background;
+    if (!bg)
+        return 'modern';
+    // Simple luminance check: dark backgrounds → dark shell theme
+    const el = document.createElement('canvas');
+    const ctx = el.getContext('2d');
+    ctx.fillStyle = bg;
+    const hex = ctx.fillStyle; // normalized to #rrggbb
+    const r = parseInt(hex.slice(1, 3), 16);
+    const g = parseInt(hex.slice(3, 5), 16);
+    const b = parseInt(hex.slice(5, 7), 16);
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+    return luminance < 0.5 ? 'dark' : 'modern';
+}
 const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
     const { defaultLocus, locus, onLocusChange, theme, genome, interactive, wheelZoom, workerProvider, popupProvider, contextMenuProvider, ruler, genes, sequence, session, tracks: trackConfigs, remoteSocket, className, style, children, } = props;
     const containerRef = useRef(null);
@@ -12577,8 +12759,9 @@ const LoomBrowser = forwardRef(function LoomBrowser(props, ref) {
         attachRemote(socket) { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.attachRemote(socket); },
         detachRemote() { var _a; (_a = browserRef.current) === null || _a === void 0 ? void 0 : _a.detachRemote(); },
     }), [browser]);
-    const ctxValue = useMemo(() => ({ browser }), [browser]);
-    return (jsxs(GenomeBrowserContext.Provider, { value: ctxValue, children: [jsx("div", { ref: containerRef, className: className, style: style }), browser && children] }));
+    const shellTheme = useMemo(() => inferShellTheme(theme), [theme]);
+    const ctxValue = useMemo(() => ({ browser, shellTheme }), [browser, shellTheme]);
+    return (jsx(GenomeBrowserContext.Provider, { value: ctxValue, children: jsxs("div", { className: className, style: style, children: [browser && children, jsx("div", { ref: containerRef })] }) }));
 });
 
 /**
@@ -12686,8 +12869,15 @@ function RulerTrack({ config, maxTrackHeight }) {
     return null;
 }
 
-function WigTrack({ url, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
-    useTrackManager((browser) => browser.addWigTrack(url, { config, height, background, windowFunction, maxTrackHeight, name, metadata }), [url, windowFunction], (track) => { if (config)
+function WigTrack({ url, features, config, height, background, windowFunction, maxTrackHeight, name, metadata }) {
+    useTrackManager((browser) => {
+        if (features) {
+            return browser.addWigTrackWithFeatures(features, { config, height, background, maxTrackHeight, name, metadata });
+        }
+        if (!url)
+            throw new Error('WigTrack requires either a `url` or `features` prop');
+        return browser.addWigTrack(url, { config, height, background, windowFunction, maxTrackHeight, name, metadata });
+    }, [url, features, windowFunction], (track) => { if (config)
         track.setConfig(config); }, [config, height, background, name]);
     return null;
 }
@@ -12698,8 +12888,15 @@ function GeneTrack({ config, height, background, genome, track, maxTrackHeight,
     return null;
 }
 
-function BedTrack({ url, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }) {
-    useTrackManager((browser) => browser.addBedTrack(url, { config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }), [url, format, indexURL, indexed], (track) => { if (config)
+function BedTrack({ url, features, config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata }) {
+    useTrackManager((browser) => {
+        if (features) {
+            return browser.addBedTrackWithFeatures(features, { config, height, background, maxTrackHeight, name, metadata });
+        }
+        if (!url)
+            throw new Error('BedTrack requires either a `url` or `features` prop');
+        return browser.addBedTrack(url, { config, height, background, format, indexURL, indexed, maxTrackHeight, name, metadata });
+    }, [url, features, format, indexURL, indexed], (track) => { if (config)
         track.setConfig(config); }, [config, height, background, name]);
     return null;
 }
@@ -12722,6 +12919,757 @@ function GtxTrack({ url, experimentId, config, height, background, windowFunctio
     return null;
 }
 
+/**
+ * <loom-chromosome-select> — Chromosome dropdown for quick navigation.
+ *
+ * Lists main chromosomes (chr1-22, X, Y, M) plus "All" for whole genome view.
+ * Updates automatically when the browser locus changes.
+ */
+const template$5 = document.createElement('template');
+template$5.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+select {
+    font: var(--loom-font, 12px Arial, sans-serif);
+    color: var(--loom-text-color, #333);
+    background: var(--loom-input-bg, white);
+    border: var(--loom-input-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    height: var(--loom-input-height, 22px);
+    padding: 0 4px;
+    box-sizing: border-box;
+    outline: none;
+    cursor: pointer;
+    transition: border-color 0.15s;
+}
+select:focus {
+    border: var(--loom-input-focus-border, 1px solid #4A90D9);
+}
+</style>
+<select></select>
+`;
+class LoomChromosomeSelect extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$5.content.cloneNode(true));
+        this.select = this.shadowRoot.querySelector('select');
+        this.select.addEventListener('change', () => {
+            if (!this._browser)
+                return;
+            const value = this.select.value;
+            if (value === 'all') {
+                this._browser.search('all');
+            }
+            else {
+                const chromSizes = this._browser.chromSizes;
+                if (chromSizes && chromSizes[value] != null) {
+                    this._browser.setLocus({ chr: value, start: 0, end: chromSizes[value] });
+                }
+            }
+        });
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.populate(b);
+            this.updateSelection(b.locus.chr);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.updateSelection(locus.chr);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    populate(browser) {
+        this.select.innerHTML = '';
+        const chromSizes = browser.chromSizes;
+        if (!chromSizes)
+            return;
+        // "All" option for whole genome view
+        if (browser.cumulativeOffsets) {
+            const opt = document.createElement('option');
+            opt.value = 'all';
+            opt.textContent = 'All';
+            this.select.appendChild(opt);
+        }
+        // Main chromosomes in order
+        const names = mainChromosomeNames(chromSizes);
+        for (const name of names) {
+            const opt = document.createElement('option');
+            opt.value = name;
+            opt.textContent = name;
+            this.select.appendChild(opt);
+        }
+    }
+    updateSelection(chr) {
+        if (isWholeGenomeView({ chr, start: 0, end: 0 })) {
+            this.select.value = 'all';
+        }
+        else {
+            this.select.value = chr;
+        }
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-locus-input> — Locus search/display input.
+ *
+ * Shows the current locus as a formatted string. User can type a new locus
+ * and press Enter to navigate. Updates automatically on locuschange events.
+ */
+const template$4 = document.createElement('template');
+template$4.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+input {
+    font: var(--loom-font, 12px Arial, sans-serif);
+    color: var(--loom-text-color, #333);
+    background: var(--loom-input-bg, white);
+    border: var(--loom-input-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    width: var(--loom-input-width, 220px);
+    height: var(--loom-input-height, 22px);
+    padding: 0 8px;
+    box-sizing: border-box;
+    outline: none;
+    transition: border-color 0.15s;
+}
+input:focus {
+    border: var(--loom-input-focus-border, 1px solid #4A90D9);
+}
+input::placeholder {
+    color: var(--loom-text-muted, #737373);
+}
+.search-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+.search-btn:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+.search-btn svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+</style>
+<div class="container">
+    <input type="text" placeholder="Locus Search" spellcheck="false" />
+    <button class="search-btn" title="Go to locus">
+        <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>
+    </button>
+</div>
+`;
+class LoomLocusInput extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$4.content.cloneNode(true));
+        this.input = this.shadowRoot.querySelector('input');
+        this.input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                this.doSearch();
+            }
+        });
+        this.shadowRoot.querySelector('.search-btn').addEventListener('click', () => {
+            this.doSearch();
+        });
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.updateDisplay(b.locus);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.updateDisplay(locus);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    updateDisplay(locus) {
+        if (document.activeElement !== this.input && this.shadowRoot.activeElement !== this.input) {
+            this.input.value = formatLocus(locus);
+        }
+    }
+    doSearch() {
+        if (!this._browser)
+            return;
+        const value = this.input.value.trim();
+        if (value) {
+            this._browser.search(value);
+        }
+        this.input.blur();
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-zoom-controls> — Zoom in/out buttons.
+ */
+const template$3 = document.createElement('template');
+template$3.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+button:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+button:active {
+    transform: scale(0.95);
+}
+button svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+}
+</style>
+<div class="container">
+    <button class="zoom-out" title="Zoom out">
+        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+    </button>
+    <button class="zoom-in" title="Zoom in">
+        <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="16"/><line x1="8" y1="12" x2="16" y2="12"/></svg>
+    </button>
+</div>
+`;
+class LoomZoomControls extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$3.content.cloneNode(true));
+        this.shadowRoot.querySelector('.zoom-out').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.zoomOut();
+        });
+        this.shadowRoot.querySelector('.zoom-in').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.zoomIn();
+        });
+    }
+    set browser(b) {
+        this._browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * <loom-window-size> — Read-only display of current viewport bp range.
+ */
+const template$2 = document.createElement('template');
+template$2.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.label {
+    font: var(--loom-font-small, 11px Arial, sans-serif);
+    color: var(--loom-text-muted, #737373);
+    white-space: nowrap;
+    user-select: none;
+}
+</style>
+<span class="label"></span>
+`;
+class LoomWindowSize extends HTMLElement {
+    constructor() {
+        super();
+        this.unsubscribe = null;
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$2.content.cloneNode(true));
+        this.label = this.shadowRoot.querySelector('.label');
+    }
+    set browser(b) {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+        this._browser = b;
+        if (b) {
+            this.update(b.locus);
+            this.unsubscribe = b.on(BrowserEvent.LocusChange, ({ locus }) => {
+                this.update(locus);
+            });
+        }
+    }
+    get browser() {
+        return this._browser;
+    }
+    update(locus) {
+        this.label.textContent = formatBpLength(locus.end - locus.start);
+    }
+    disconnectedCallback() {
+        if (this.unsubscribe) {
+            this.unsubscribe();
+            this.unsubscribe = null;
+        }
+    }
+}
+
+/**
+ * <loom-export-controls> — SVG/PNG export buttons.
+ *
+ * Adds "Save SVG" and "Save PNG" buttons to the shell navbar.
+ * Calls GenomeBrowser.saveSVGtoFile() and savePNGtoFile() respectively.
+ */
+const template$1 = document.createElement('template');
+template$1.innerHTML = /* html */ `
+<style>
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+.container {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+}
+button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--loom-button-size, 24px);
+    height: var(--loom-button-size, 24px);
+    background: var(--loom-button-bg, white);
+    border: var(--loom-button-border, 1px solid #b0b0b0);
+    border-radius: var(--loom-border-radius, 4px);
+    cursor: pointer;
+    color: var(--loom-icon-color, #555);
+    transition: background 0.15s;
+    padding: 0;
+    line-height: 1;
+}
+button:hover {
+    background: var(--loom-button-hover, #e8e8e8);
+}
+button:active {
+    transform: scale(0.95);
+}
+button svg {
+    width: var(--loom-icon-size, 14px);
+    height: var(--loom-icon-size, 14px);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+</style>
+<div class="container">
+    <button class="save-svg" title="Save as SVG">
+        <svg viewBox="0 0 24 24">
+            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+            <polyline points="7 10 12 15 17 10"/>
+            <line x1="12" y1="15" x2="12" y2="3"/>
+        </svg>
+    </button>
+    <button class="save-png" title="Save as PNG">
+        <svg viewBox="0 0 24 24">
+            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+            <circle cx="8.5" cy="8.5" r="1.5"/>
+            <polyline points="21 15 16 10 5 21"/>
+        </svg>
+    </button>
+</div>
+`;
+class LoomExportControls extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template$1.content.cloneNode(true));
+        this.shadowRoot.querySelector('.save-svg').addEventListener('click', () => {
+            var _a;
+            (_a = this._browser) === null || _a === void 0 ? void 0 : _a.saveSVGtoFile();
+        });
+        this.shadowRoot.querySelector('.save-png').addEventListener('click', () => {
+            var _a;
+            void ((_a = this._browser) === null || _a === void 0 ? void 0 : _a.savePNGtoFile());
+        });
+    }
+    set browser(b) {
+        this._browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * <loom-navbar> — Horizontal navigation bar composing locus input, window size, and zoom controls.
+ */
+// Ensure child custom elements are registered
+if (!customElements.get('loom-chromosome-select')) {
+    customElements.define('loom-chromosome-select', LoomChromosomeSelect);
+}
+if (!customElements.get('loom-locus-input')) {
+    customElements.define('loom-locus-input', LoomLocusInput);
+}
+if (!customElements.get('loom-zoom-controls')) {
+    customElements.define('loom-zoom-controls', LoomZoomControls);
+}
+if (!customElements.get('loom-window-size')) {
+    customElements.define('loom-window-size', LoomWindowSize);
+}
+if (!customElements.get('loom-export-controls')) {
+    customElements.define('loom-export-controls', LoomExportControls);
+}
+const template = document.createElement('template');
+template.innerHTML = /* html */ `
+<style>
+:host {
+    display: block;
+}
+.navbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: var(--loom-navbar-height, 32px);
+    padding: var(--loom-navbar-padding, 0 8px);
+    background: var(--loom-navbar-bg, #f3f3f3);
+    border-bottom: var(--loom-border, 1px solid #ccc);
+    box-sizing: border-box;
+    gap: var(--loom-gap, 8px);
+}
+.left {
+    display: flex;
+    align-items: center;
+    gap: var(--loom-gap, 8px);
+    flex: 1;
+    min-width: 0;
+}
+.right {
+    display: flex;
+    align-items: center;
+    gap: var(--loom-gap, 8px);
+    flex-shrink: 0;
+}
+</style>
+<div class="navbar">
+    <div class="left">
+        <loom-chromosome-select></loom-chromosome-select>
+        <loom-locus-input></loom-locus-input>
+        <loom-window-size></loom-window-size>
+    </div>
+    <div class="right">
+        <loom-export-controls></loom-export-controls>
+        <loom-zoom-controls></loom-zoom-controls>
+    </div>
+</div>
+`;
+class LoomNavbar extends HTMLElement {
+    constructor() {
+        super();
+        this._browser = null;
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.appendChild(template.content.cloneNode(true));
+        this.chromSelect = this.shadowRoot.querySelector('loom-chromosome-select');
+        this.locusInput = this.shadowRoot.querySelector('loom-locus-input');
+        this.zoomControls = this.shadowRoot.querySelector('loom-zoom-controls');
+        this.windowSize = this.shadowRoot.querySelector('loom-window-size');
+        this.exportControls = this.shadowRoot.querySelector('loom-export-controls');
+    }
+    set browser(b) {
+        this._browser = b;
+        this.chromSelect.browser = b;
+        this.locusInput.browser = b;
+        this.zoomControls.browser = b;
+        this.windowSize.browser = b;
+        this.exportControls.browser = b;
+    }
+    get browser() {
+        return this._browser;
+    }
+}
+
+/**
+ * Ensures all Loom UI web components are registered as custom elements.
+ * Safe to call multiple times — each element is only registered once.
+ */
+let registered = false;
+function ensureRegistered() {
+    if (registered || typeof customElements === 'undefined')
+        return;
+    registered = true;
+    const elements = [
+        ['loom-chromosome-select', LoomChromosomeSelect],
+        ['loom-locus-input', LoomLocusInput],
+        ['loom-zoom-controls', LoomZoomControls],
+        ['loom-window-size', LoomWindowSize],
+        ['loom-export-controls', LoomExportControls],
+        ['loom-navbar', LoomNavbar],
+    ];
+    for (const [name, ctor] of elements) {
+        if (!customElements.get(name)) {
+            customElements.define(name, ctor);
+        }
+    }
+}
+
+function ChromosomeSelect({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-chromosome-select", { ref: ref });
+}
+
+function LocusInput({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-locus-input", { ref: ref });
+}
+
+function ZoomControls({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-zoom-controls", { ref: ref });
+}
+
+function WindowSize({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-window-size", { ref: ref });
+}
+
+function ExportControls({ browser: browserProp }) {
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const ref = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    return jsx("loom-export-controls", { ref: ref });
+}
+
+/**
+ * CSS custom property themes for UI shell web components.
+ *
+ * Themes are injected as <style> blocks into Shadow DOM roots.
+ * Components reference CSS custom properties (--loom-*) for all visual styling.
+ */
+/** Classic theme — matches igv.js navbar look. */
+const classicThemeCSS = /* css */ `
+:host {
+    --loom-navbar-bg: #f3f3f3;
+    --loom-navbar-height: 32px;
+    --loom-navbar-padding: 0 8px;
+    --loom-font: 12px Arial, sans-serif;
+    --loom-font-small: 11px Arial, sans-serif;
+    --loom-text-color: #333;
+    --loom-text-muted: #737373;
+    --loom-border: 1px solid #ccc;
+    --loom-border-radius: 4px;
+    --loom-button-bg: white;
+    --loom-button-hover: #e8e8e8;
+    --loom-button-border: 1px solid #b0b0b0;
+    --loom-button-size: 24px;
+    --loom-input-bg: white;
+    --loom-input-border: 1px solid #b0b0b0;
+    --loom-input-focus-border: 1px solid #4A90D9;
+    --loom-input-width: 220px;
+    --loom-input-height: 22px;
+    --loom-accent: #4A90D9;
+    --loom-icon-color: #555;
+    --loom-icon-size: 14px;
+    --loom-gap: 8px;
+}
+`;
+/** Modern theme — softer colors, rounded corners, taller navbar. */
+const modernThemeCSS = /* css */ `
+:host {
+    --loom-navbar-bg: #fafbfc;
+    --loom-navbar-height: 40px;
+    --loom-navbar-padding: 0 12px;
+    --loom-font: 13px Inter, system-ui, -apple-system, sans-serif;
+    --loom-font-small: 11px Inter, system-ui, -apple-system, sans-serif;
+    --loom-text-color: #1a1a1a;
+    --loom-text-muted: #6b7280;
+    --loom-border: 1px solid rgba(0, 0, 0, 0.08);
+    --loom-border-radius: 8px;
+    --loom-button-bg: white;
+    --loom-button-hover: #f0f4ff;
+    --loom-button-border: 1px solid rgba(0, 0, 0, 0.1);
+    --loom-button-size: 28px;
+    --loom-input-bg: white;
+    --loom-input-border: 1px solid rgba(0, 0, 0, 0.12);
+    --loom-input-focus-border: 1px solid #4A90D9;
+    --loom-input-width: 260px;
+    --loom-input-height: 28px;
+    --loom-accent: #4A90D9;
+    --loom-icon-color: #6b7280;
+    --loom-icon-size: 16px;
+    --loom-gap: 10px;
+}
+`;
+/** Dark theme — dark backgrounds, light text, high contrast. */
+const darkThemeCSS = /* css */ `
+:host {
+    --loom-shell-bg: #16162a;
+    --loom-navbar-bg: #1a1a2e;
+    --loom-navbar-height: 36px;
+    --loom-navbar-padding: 0 10px;
+    --loom-font: 12px Arial, sans-serif;
+    --loom-font-small: 11px Arial, sans-serif;
+    --loom-text-color: #e0e0e0;
+    --loom-text-muted: #888;
+    --loom-border: 1px solid #333;
+    --loom-border-radius: 4px;
+    --loom-button-bg: #2a2a3e;
+    --loom-button-hover: #3a3a50;
+    --loom-button-border: 1px solid #444;
+    --loom-button-size: 24px;
+    --loom-input-bg: #2a2a3e;
+    --loom-input-border: 1px solid #444;
+    --loom-input-focus-border: 1px solid #6a9fd9;
+    --loom-input-width: 220px;
+    --loom-input-height: 22px;
+    --loom-accent: #6a9fd9;
+    --loom-icon-color: #b0b0b0;
+    --loom-icon-size: 14px;
+    --loom-gap: 8px;
+}
+`;
+function getThemeCSS(theme) {
+    if (theme === 'modern')
+        return modernThemeCSS;
+    if (theme === 'dark')
+        return darkThemeCSS;
+    return classicThemeCSS;
+}
+
+function Navbar({ browser: browserProp, theme: themeProp }) {
+    var _a;
+    const ctx = useContext(GenomeBrowserContext);
+    const contextBrowser = useGenomeBrowser();
+    const browser = browserProp !== null && browserProp !== void 0 ? browserProp : contextBrowser;
+    const theme = (_a = themeProp !== null && themeProp !== void 0 ? themeProp : ctx === null || ctx === void 0 ? void 0 : ctx.shellTheme) !== null && _a !== void 0 ? _a : 'modern';
+    const ref = useRef(null);
+    const styleRef = useRef(null);
+    ensureRegistered();
+    useEffect(() => {
+        if (ref.current)
+            ref.current.browser = browser;
+    }, [browser]);
+    // Inject shell theme CSS into the navbar's shadow root
+    useEffect(() => {
+        const el = ref.current;
+        if (!(el === null || el === void 0 ? void 0 : el.shadowRoot))
+            return;
+        if (!styleRef.current) {
+            styleRef.current = document.createElement('style');
+            el.shadowRoot.prepend(styleRef.current);
+        }
+        styleRef.current.textContent = getThemeCSS(theme);
+    }, [theme]);
+    return jsx("loom-navbar", { ref: ref });
+}
+
 /**
  * <loom-context-menu> — Right-click context menu Web Component.
  *
@@ -13287,4 +14235,4 @@ var LoomInputDialog$1 = /*#__PURE__*/Object.freeze({
     LoomInputDialog: LoomInputDialog
 });
 
-export { BedTrack, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LoomBrowser, RulerTrack, SequenceTrack, WigTrack, useBrowserEvent, useGenomeBrowser, useLocus };
+export { BedTrack, ChromosomeSelect, ExportControls, GeneTrack, GenomeBrowserContext, GtxTrack, InteractionTrack, LocusInput, LoomBrowser, Navbar, RulerTrack, SequenceTrack, WigTrack, WindowSize, ZoomControls, useBrowserEvent, useGenomeBrowser, useLocus };