@stellar-expert/ui-framework 1.21.2 → 1.21.4

package/charts/axis/axis.js

@@ -131,6 +131,21 @@ export class Axis {
         this.dataMax = dataMax
     }
 
+    //pixels at the top of the pane that must stay clear of drawn data — the floating range-selector
+    //buttons overlay the top ~26px of the plot, so the pane that starts at the plot top scales its
+    //max up until the tallest point (incl. candle wicks) renders below the controls
+    reservedTopPixels() {
+        const c = this.chart
+        if (this.isXAxis || c.chartType !== 'StockChart' || !c.options.rangeSelector)
+            return 0
+        if (!isNumber(this.len) || !isNumber(this.top) || !isNumber(c.plotTop))
+            return 0
+        //only the top pane sits under the controls; lower panes (e.g. a volume strip) are unaffected
+        if (this.top > c.plotTop + 1)
+            return 0
+        return 26
+    }
+
     setScale() {
         this.getSeriesExtremes()
         let min = pick(this.userMin, this.dataMin)
@@ -146,9 +161,8 @@ export class Axis {
         if (isNumber(this.options.ceiling))
             max = Math.min(max, this.options.ceiling)
 
-        //tick density: x adapts to width (denser, ~one per 42px → more labels when there's room),
-        //y ~one gridline per 72px
-        const targetCount = this.horiz ? Math.max(2, Math.round(this.lenForTicks() / 42))
+        const xTickSpacing = this.type === 'datetime' ? 100 : 42
+        const targetCount = this.horiz ? Math.max(2, Math.round(this.lenForTicks() / xTickSpacing))
             : Math.max(3, Math.round(this.lenForTicks() / 72))
 
         if (this.isLog) {
@@ -226,7 +240,12 @@ export class Axis {
                     drawn = drawn.slice(0, -1)
                 const nIntervals = drawn.length - 1
                 const dataSteps = r.interval > 0 ? (max - r.min) / r.interval : nIntervals
-                const M = Math.max(nIntervals + 0.7, dataSteps + 0.15)
+                let M = Math.max(nIntervals + 0.7, dataSteps + 0.15)
+                //widen the headroom so the data top maps below the reserved zoom-controls band:
+                //(M - dataSteps)/M of the pane height must be at least reserve/len
+                const reserve = this.reservedTopPixels()
+                if (reserve && this.len > reserve * 2)
+                    M = Math.max(M, dataSteps / (1 - reserve / this.len))
                 this.tickInterval = r.interval
                 this.tickPositions = drawn
                 this.labelledPositions = null

package/charts/chart-options-builder.js

@@ -25,9 +25,9 @@ const groupedPlotOptions = {
     series: {
         dataGrouping: {
             units: groupingUnits,
-            //17 (not 16) so the bucket interval clears the weekly/bi-weekly rounding boundary at the 1y
-            //view — keeps the 1y window on monthly buckets instead of tipping to weekly
-            groupPixelWidth: 17
+            //grouping is width-dependent: wider plots get proportionally finer buckets. 16.5px per
+            //bucket puts the 2-month↔6-month transition of a ~10y daily series at a ~540px plot area
+            groupPixelWidth: 16.5
         }
     }
 }

package/charts/chart.scss

@@ -61,6 +61,27 @@
   }
 }
 
+//floating "Reset zoom" control shown over the plot top-right corner after a drag-zoom selection
+//on charts without the range-selector row; positioned inline by zoom.js (top/right from plot box)
+.chart-reset-zoom {
+  position: absolute;
+  z-index: 5;
+  display: inline-block;
+  border: 1px solid var(--color-contrast-border);
+  border-radius: 3px;
+  padding: 2px 8px;
+  font: 12px 'Roboto Condensed', sans-serif;
+  line-height: 1.4;
+  background: rgba(176, 185, 189, 0.1);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background: rgba(176, 185, 189, 0.25);
+  }
+}
+
 .chart-placeholder {
   position: absolute;
   width: 100%;

package/charts/core/chart.js

@@ -3,7 +3,8 @@ import {niceAlignedTicks} from '../axis/tick-positioner'
 import {createSeries} from '../series'
 import {Legend} from '../interaction/legend'
 import {Tooltip} from '../interaction/tooltip'
-import {groupSeriesData} from '../stock/data-grouping'
+import {ZoomSelection} from '../interaction/zoom'
+import {groupSeriesData, defaultGroupPixelWidth} from '../stock/data-grouping'
 import {RangeSelector} from '../stock/range-selector'
 import {renderPolar} from '../polar/polar-chart'
 import {renderPie} from '../pie/pie-chart'
@@ -24,6 +25,7 @@ export class Chart {
             return
         this.legend = new Legend(this)
         this.tooltip = new Tooltip(this)
+        this.zoomSelection = new ZoomSelection(this)
         this.init()
     }
 
@@ -62,9 +64,15 @@ export class Chart {
         this.hideLoading()
         const el = document.createElement('div')
         el.className = 'ix-chart-loading'
-        el.textContent = text || 'Loading…'
+        if (text)
+            el.textContent = text
         Object.assign(el.style, {
-            position: 'absolute', inset: '0', display: 'flex', alignItems: 'center',
+            position: 'absolute',
+            left: (this.plotLeft || 0) + 'px',
+            top: (this.plotTop || 0) + 'px',
+            width: (this.plotWidth || 0) + 'px',
+            height: (this.plotHeight || 0) + 'px',
+            display: 'flex', alignItems: 'center',
             justifyContent: 'center', background: 'rgba(0,0,0,0.25)', color: 'var(--color-text)', zIndex: 15
         })
         this.container.appendChild(el)
@@ -266,6 +274,10 @@ export class Chart {
                 const nIntervals = s.drawn.length - 1
                 const dataSteps = s.interval > 0 ? (s.dataMax - s.base) / s.interval : nIntervals
                 M = Math.max(M, nIntervals + STEP_HEAD, dataSteps + 0.15)
+                //keep the data top below the reserved zoom-controls band (see Axis.reservedTopPixels)
+                const reserve = s.a.reservedTopPixels()
+                if (reserve && s.a.len > reserve * 2)
+                    M = Math.max(M, dataSteps / (1 - reserve / s.a.len))
             }
             for (const s of specs) {
                 s.a.tickInterval = s.interval
@@ -287,16 +299,59 @@ export class Chart {
         const baseGrouping = this.chartType === 'StockChart' &&
             this.options.plotOptions && this.options.plotOptions.series && this.options.plotOptions.series.dataGrouping
         const xAxis = this.xAxis[0]
-        for (const s of this.series) {
+        const groupings = this.series.map(s => {
             const seriesGrouping = s.options.dataGrouping
-            if (baseGrouping || seriesGrouping) {
-                const grouping = merge(baseGrouping || {}, seriesGrouping || {})
+            if (!baseGrouping && !seriesGrouping)
+                return null
+            const grouping = merge(baseGrouping || {}, seriesGrouping || {})
+            if (!isNumber(grouping.groupPixelWidth))
+                grouping.groupPixelWidth = defaultGroupPixelWidth(s.type)
+            return grouping
+        })
+        //bucket density follows the VIEWPORT width rather than the (possibly column-constrained)
+        //container: a chart squeezed into a half-width dashboard column keeps the same bucket size
+        //it would get in a single-column layout, so side-by-side and full-width charts read alike.
+        //SINGLE_COLUMN_CHROME ≈ page paddings + axis margins around a full-width plot; the cap keeps
+        //very wide monitors from over-refining charts that are themselves capped by the page container
+        const SINGLE_COLUMN_CHROME = 238
+        const VIRTUAL_WIDTH_CAP = 1100
+        const virtualWidth = typeof window === 'undefined'
+            ? 0
+            : Math.min(window.innerWidth - SINGLE_COLUMN_CHROME, VIRTUAL_WIDTH_CAP)
+        const groupingWidth = Math.max(this.plotWidth, virtualWidth)
+        let sharedPixelWidth = 0
+        let doGrouping = false
+        this.series.forEach((s, i) => {
+            const grouping = groupings[i]
+            if (!grouping || !s.visible)
+                return
+            sharedPixelWidth = Math.max(sharedPixelWidth, grouping.groupPixelWidth)
+            if (grouping.forced || this.countVisiblePoints(s, xAxis) > groupingWidth / grouping.groupPixelWidth)
+                doGrouping = true
+        })
+        this.series.forEach((s, i) => {
+            const grouping = groupings[i]
+            if (grouping && doGrouping) {
                 const defApprox = /column|bar/.test(s.type) ? 'sum' : 'average'
-                s.plotPoints = groupSeriesData(s.points, grouping, xAxis.min, xAxis.max, this.plotWidth, defApprox)
+                s.plotPoints = groupSeriesData(s.points, {...grouping, groupPixelWidth: sharedPixelWidth},
+                    xAxis.min, xAxis.max, groupingWidth, defApprox)
             } else {
                 s.plotPoints = s.points
             }
-        }
+        })
+    }
+
+    //number of points inside the currently visible x-window (grouping density is decided on what's
+    //on screen, not the full dataset — so zooming into a sparse period turns grouping off)
+    countVisiblePoints(s, xAxis) {
+        const {min, max} = xAxis
+        if (!isNumber(min) || !isNumber(max))
+            return s.points.length
+        let count = 0
+        for (const p of s.points)
+            if (p.x >= min && p.x <= max)
+                count++
+        return count
     }
 
     getStacking(s) {
@@ -345,8 +400,6 @@ export class Chart {
         this.pointRange = pr === Infinity ? (this.xAxis[0].max - this.xAxis[0].min) / 50 : pr
     }
 
-    //breathing room on both x-edges so data doesn't sit flush against the axes; at least half a
-    //point-width (so edge columns/candles aren't clipped) and at least ~2% of the range
     //draw a white separator at the boundary between stacked y-axis panes (e.g. Total XLM over Fee Pool)
     renderPaneSeparators() {
         const tops = new Set()
@@ -374,8 +427,11 @@ export class Chart {
         const range = xa.max - xa.min
         if (!(range > 0))
             return
-        const slotPad = (this.hasSlottedSeries && this.pointRange > 0) ? this.pointRange / 2 : 0
-        const pad = Math.max(slotPad, range * 0.02)
+        //pad only charts with slotted series (columns/candles), so their edge bars aren't clipped in half;
+        //pure line/area charts render flush to the plot edges
+        if (!this.hasSlottedSeries || !(this.pointRange > 0))
+            return
+        const pad = Math.max(this.pointRange / 2, range * 0.02)
         xa.min -= pad
         xa.max += pad
     }
@@ -494,6 +550,7 @@ export class Chart {
             this.navigator.render(navGroup, navTop, 32)
         }
         this.tooltip.bind()
+        this.zoomSelection.bind()
         if (this.rangeSelector)
             this.rangeSelector.reposition()
     }
@@ -501,6 +558,7 @@ export class Chart {
     redraw() {
         //clear and re-render into the same container
         this.tooltip.destroy()
+        this.zoomSelection.destroy()
         this.renderer.destroy()
         this.renderer = new SvgRenderer(this.container, this.chartWidth, this.chartHeight)
         this.render()
@@ -548,6 +606,8 @@ export class Chart {
             this.rangeSelector.destroy()
         if (this.tooltip)
             this.tooltip.destroy()
+        if (this.zoomSelection)
+            this.zoomSelection.destroy()
         if (this.renderer)
             this.renderer.destroy()
         this.container = null

package/charts/core/time.js

@@ -56,16 +56,20 @@ const UNITS = [
 export function getDateTimeTickPositions(minTs, maxTs, targetCount) {
     const range = maxTs - minTs
     const approx = range / Math.max(1, targetCount)
-    //pick unit + multiple whose interval is closest to (>=) approx
+    //pick the unit + multiple NEAREST to the target interval —
+    //not the first one >= target, which over-coarsens (e.g. 5-year ticks where 2-year fit better)
+    const candidates = []
+    for (const unit of UNITS)
+        for (const mult of unit.multiples)
+            candidates.push({unit, mult, ms: unit.ms * mult})
     let chosen = UNITS[UNITS.length - 1]
     let chosenCount = chosen.multiples[chosen.multiples.length - 1]
-    outer: for (const unit of UNITS) {
-        for (const mult of unit.multiples) {
-            if (unit.ms * mult >= approx) {
-                chosen = unit
-                chosenCount = mult
-                break outer
-            }
+    for (let i = 0; i < candidates.length; i++) {
+        const next = candidates[i + 1]
+        if (!next || approx <= (candidates[i].ms + next.ms) / 2) {
+            chosen = candidates[i].unit
+            chosenCount = candidates[i].mult
+            break
         }
     }
 

package/charts/interaction/zoom.js

@@ -0,0 +1,157 @@
+import {isNumber} from '../core/utilities'
+
+//same tint as the navigator selection window, so both "selected range" visuals read as one
+const SELECTION_FILL = 'rgba(102,133,194,0.25)'
+//clicks and sub-threshold jitters don't zoom
+const MIN_SELECTION_PX = 10
+
+//Drag-to-zoom over the plot area: press → drag to highlight an x-range →
+//release to zoom into it. Enabled on stock charts and any chart with chart.zoomType === 'x'.
+export class ZoomSelection {
+    constructor(chart) {
+        this.chart = chart
+    }
+
+    get enabled() {
+        const c = this.chart
+        const zoomType = c.options.chart && c.options.chart.zoomType
+        return zoomType === 'x' || c.chartType === 'StockChart'
+    }
+
+    bind() {
+        if (!this.enabled)
+            return
+        this.svg = this.chart.renderer.root.element
+        this.downHandler = e => this.onDown(e)
+        this.svg.addEventListener('mousedown', this.downHandler)
+        //charts without the range-selector button row get a floating "Reset zoom" control while
+        //a drag-selected range is active (the control survives redraws since bind() re-runs on each)
+        if (this.isZoomed())
+            this.showResetButton()
+    }
+
+    //user-driven extremes are active and there is no range selector to reset them with
+    isZoomed() {
+        const chart = this.chart
+        const xa = chart.xAxis && chart.xAxis[0]
+        return !chart.rangeSelector && !!xa && (xa.userMin !== undefined || xa.userMax !== undefined)
+    }
+
+    showResetButton() {
+        if (this.resetBtn)
+            return
+        const chart = this.chart
+        const btn = document.createElement('span')
+        btn.className = 'chart-reset-zoom'
+        btn.setAttribute('role', 'button')
+        btn.tabIndex = 0
+        btn.textContent = 'Reset zoom'
+        btn.style.top = (chart.plotTop + 6) + 'px'
+        btn.style.right = (Math.max(0, chart.chartWidth - chart.plotLeft - chart.plotWidth) + 6) + 'px'
+        const reset = () => chart.xAxis[0].setExtremes(null, null)
+        btn.addEventListener('click', reset)
+        btn.addEventListener('keydown', e => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault()
+                reset()
+            }
+        })
+        chart.container.appendChild(btn)
+        this.resetBtn = btn
+    }
+
+    removeResetButton() {
+        if (this.resetBtn && this.resetBtn.parentNode)
+            this.resetBtn.parentNode.removeChild(this.resetBtn)
+        this.resetBtn = null
+    }
+
+    toChartX(e) {
+        const rect = this.svg.getBoundingClientRect()
+        return (e.clientX - rect.left) * (this.chart.chartWidth / rect.width)
+    }
+
+    onDown(e) {
+        if (e.button !== 0)
+            return
+        const chart = this.chart
+        const rect = this.svg.getBoundingClientRect()
+        const mx = (e.clientX - rect.left) * (chart.chartWidth / rect.width)
+        const my = (e.clientY - rect.top) * (chart.chartHeight / rect.height)
+        //react only on the plot area itself — the navigator strip and axis labels live outside it
+        //and keep their own interactions
+        if (mx < chart.plotLeft || mx > chart.plotLeft + chart.plotWidth ||
+            my < chart.plotTop || my > chart.plotTop + chart.plotHeight)
+            return
+        e.preventDefault()
+        this.startX = mx
+        this.overlay = chart.renderer.rect(mx, chart.plotTop, 0, chart.plotHeight, {})
+            .css({fill: SELECTION_FILL, 'pointer-events': 'none'})
+            .add(chart.renderer.root)
+        this.moveHandler = ev => this.onMove(ev)
+        this.upHandler = ev => this.onUp(ev)
+        document.addEventListener('mousemove', this.moveHandler)
+        document.addEventListener('mouseup', this.upHandler)
+    }
+
+    selectionBounds(ev) {
+        const chart = this.chart
+        const x = Math.max(chart.plotLeft, Math.min(this.toChartX(ev), chart.plotLeft + chart.plotWidth))
+        return [Math.min(this.startX, x), Math.max(this.startX, x)]
+    }
+
+    onMove(ev) {
+        const [x0, x1] = this.selectionBounds(ev)
+        if (this.overlay)
+            this.overlay.attr({x: x0, width: x1 - x0})
+        //the tooltip's svg-level listener fired before this document-level one — hide what it drew,
+        //so the selection band isn't obscured while dragging
+        if (this.chart.tooltip)
+            this.chart.tooltip.hide()
+    }
+
+    onUp(ev) {
+        const chart = this.chart
+        const [x0, x1] = this.selectionBounds(ev)
+        this.cancel()
+        if (x1 - x0 < MIN_SELECTION_PX)
+            return
+        const xAxis = chart.xAxis[0]
+        const span = (xAxis.max - xAxis.min) || 1
+        const toValue = px => xAxis.min + ((px - xAxis.left) / xAxis.len) * span
+        let vMin = toValue(x0)
+        let vMax = toValue(x1)
+        //respect the axis' minimum zoom window (e.g. 1h on the price chart): widen around the center
+        const minRange = xAxis.options.minRange
+        if (isNumber(minRange) && vMax - vMin < minRange) {
+            const mid = (vMin + vMax) / 2
+            vMin = mid - minRange / 2
+            vMax = mid + minRange / 2
+        }
+        //a manually selected range doesn't correspond to any period button
+        if (chart.rangeSelector)
+            chart.rangeSelector.clearSelection()
+        xAxis.setExtremes(vMin, vMax)
+    }
+
+    //abort an in-flight drag and remove the selection band
+    cancel() {
+        if (this.moveHandler) {
+            document.removeEventListener('mousemove', this.moveHandler)
+            document.removeEventListener('mouseup', this.upHandler)
+            this.moveHandler = this.upHandler = null
+        }
+        if (this.overlay) {
+            this.overlay.destroy()
+            this.overlay = null
+        }
+    }
+
+    destroy() {
+        this.cancel()
+        this.removeResetButton()
+        if (this.svg && this.downHandler)
+            this.svg.removeEventListener('mousedown', this.downHandler)
+        this.svg = null
+    }
+}

package/charts/series/candlestick-series.js

@@ -40,7 +40,7 @@ export class CandlestickSeries extends Series {
                 continue
             const cx = xAxis.toPixels(p.x)
             const catW = Math.abs(xAxis.toPixels(p.x + pr) - xAxis.toPixels(p.x))
-            const w = Math.max(1, catW * 0.6)
+            const w = Math.max(1.5, catW * 0.8 - 0.5)
             const up = p.close >= p.open
             const color = up ? upColor : downColor
             const yHigh = yAxis.toPixels(p.high)

package/charts/stock/data-grouping.js

@@ -1,6 +1,20 @@
 //Downsample raw series points into calendar-aligned time buckets (stock data grouping).
 import {isNumber} from '../core/utilities'
 
+/**
+ * Default bucket pixel size per series type: columns/candles need room for a
+ * readable bar, lines/areas keep near-raw resolution
+ * @param {string} type - series type
+ * @return {number}
+ */
+export function defaultGroupPixelWidth(type) {
+    if (/^(column|bar|candlestick)$/.test(type))
+        return 10
+    if (/^(ohlc|hlc)$/.test(type))
+        return 5
+    return 2
+}
+
 const day = 24 * 3600 * 1000
 const week = 7 * day
 

package/charts/stock/navigator.js

@@ -57,7 +57,8 @@ export class Navigator {
         const yToPx = v => top + height - ((v - yMin) / ((yMax - yMin) || 1)) * (height - 4) - 2
 
         //faint background
-        renderer.rect(left, top, width, height, {}).css({fill: 'var(--color-border-shadow)', 'fill-opacity': 0.15}).add(group)
+        const bg = renderer.rect(left, top, width, height, {}).css({fill: 'var(--color-border-shadow)', 'fill-opacity': 0.15, cursor: 'pointer'}).add(group)
+        this.bindBackground(bg)
         //time breakpoints across the full overview range, so it's clear where the selected window sits
         this.renderTimeAxis(group, top, height, dMin, dMax, xToPx)
         //overview as a thin line (no fill)
@@ -70,7 +71,7 @@ export class Navigator {
                 started = true
             }
         }
-        const lineEl = renderer.path(d.trim(), {'stroke-width': 1, fill: 'none'}).css({stroke: NAV_LINE}).add(group)
+        const lineEl = renderer.path(d.trim(), {'stroke-width': 1, fill: 'none'}).css({stroke: NAV_LINE, 'pointer-events': 'none'}).add(group)
 
         //selection window edges (clamped into the strip) — use the LOGICAL extremes (pre display-padding)
         const x0 = clamp(xToPx(viewMin(xAxis)), left, left + width)
@@ -131,6 +132,33 @@ export class Navigator {
         return rect
     }
 
+    //click on the unselected part of the strip: move the selection window (same span) so it centers
+    //on the clicked date, clamped to the data edges
+    bindBackground(bg) {
+        const chart = this.chart
+        const xAxis = chart.xAxis[0]
+        bg.on('mousedown', e => {
+            e.preventDefault()
+            const svg = chart.renderer.root.element
+            const rect = svg.getBoundingClientRect()
+            const scaleX = chart.chartWidth / rect.width
+            const px = (e.clientX - rect.left) * scaleX
+            const v = this.dataMin + ((px - this.left) / this.width) * (this.dataMax - this.dataMin)
+            const span = viewMax(xAxis) - viewMin(xAxis)
+            let min = v - span / 2
+            let max = v + span / 2
+            if (min < this.dataMin) {
+                min = this.dataMin
+                max = min + span
+            }
+            if (max > this.dataMax) {
+                max = this.dataMax
+                min = max - span
+            }
+            xAxis.setExtremes(min, max)
+        })
+    }
+
     bindBand(band) {
         const chart = this.chart
         const xAxis = chart.xAxis[0]

package/charts/stock/range-selector.js

@@ -88,18 +88,40 @@ export class RangeSelector {
             this.zoomLabel.style.display = compact ? 'none' : ''
     }
 
+    //full data range, unioned with the navigator's own series. Views that lazy-load data on zoom replace
+    //the main series with just the visible sub-window (keeping the full lifespan only in navigator.series),
+    //so the axis' dataMin/dataMax shrink to the loaded slice — anchoring the buttons on those would make
+    //'All' re-select the current window instead of the whole history
+    getUnionExtremes() {
+        const xAxis = this.chart.xAxis[0]
+        let {dataMin, dataMax} = xAxis
+        const navSeries = this.chart.options.navigator && this.chart.options.navigator.series
+        const navData = navSeries && navSeries.data
+        if (navData && navData.length) {
+            for (const p of navData) {
+                const x = Array.isArray(p) ? p[0] : p && p.x
+                if (!isNumber(x))
+                    continue
+                if (!isNumber(dataMin) || x < dataMin) dataMin = x
+                if (!isNumber(dataMax) || x > dataMax) dataMax = x
+            }
+        }
+        return {dataMin, dataMax}
+    }
+
     apply(b, i) {
         const xAxis = this.chart.xAxis[0]
+        const {dataMin, dataMax} = this.getUnionExtremes()
         if (b.type === 'all') {
             this.selected = 'all'
             //explicit full extremes so the initial xAxis.range window doesn't re-apply
-            xAxis.setExtremes(xAxis.dataMin, xAxis.dataMax)
+            xAxis.setExtremes(dataMin, dataMax)
         } else {
             const count = b.count || 1
             //the window always ENDS at the last data point; going back a calendar
             //month/year/day for the start. Anchoring the end on dataMax keeps the right edge flush with the
             //data instead of snapping forward to the next month boundary (which left a gap on the right).
-            const max = xAxis.dataMax
+            const max = dataMax
             const d = new Date(max)
             if (b.type === 'year')
                 d.setUTCFullYear(d.getUTCFullYear() - count)
@@ -114,6 +136,13 @@ export class RangeSelector {
         this.reposition()
     }
 
+    //deselect all period buttons — the current extremes were set manually (e.g. drag-to-zoom)
+    //and don't correspond to any predefined period
+    clearSelection() {
+        this.selected = null
+        this.highlight()
+    }
+
     highlight() {
         if (!this.buttons)
             return

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stellar-expert/ui-framework",
-  "version": "1.21.2",
+  "version": "1.21.4",
   "description": "StellarExpert shared UI components library",
   "author": "orbitlens <orbit@stellar.expert>",
   "license": "MIT",