waveform-analysis 0.1.30 → 0.1.31

package/dist/style.css

@@ -1,2 +1,2 @@
-.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor[data-v-52818b45]{z-index:40;background:#10182852;place-items:center;padding:20px;animation:.16s ease-out waveform-annotation-editor-fade-in-52818b45;display:grid;position:absolute;inset:0}.waveform-annotation-editor__panel[data-v-52818b45]{color:#344054;background:#fff;border:1px solid #e4e7ec;border-radius:12px;gap:20px;width:min(440px,100%);max-height:100%;padding:22px;font-size:13px;animation:.18s ease-out waveform-annotation-editor-rise-in-52818b45;display:grid;overflow-y:auto;box-shadow:0 20px 50px #10182838}.waveform-annotation-editor__header[data-v-52818b45]{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.waveform-annotation-editor__header h2[data-v-52818b45]{color:#101828;margin:0;font-size:18px;line-height:1.3}.waveform-annotation-editor__header p[data-v-52818b45]{color:#667085;margin:5px 0 0;font-size:12px}.waveform-annotation-editor__close[data-v-52818b45]{color:#667085;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:0 0 30px;place-items:center;width:30px;height:30px;padding:0;font-size:22px;line-height:1;display:inline-grid}.waveform-annotation-editor__close[data-v-52818b45]:hover{color:#101828;background:#f2f4f7}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-52818b45],.waveform-annotation-editor__series[data-v-52818b45]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-52818b45]{color:#667085}.waveform-annotation-editor__coordinates b[data-v-52818b45]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-52818b45]{gap:10px}.waveform-annotation-editor__series i[data-v-52818b45]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-52818b45]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-52818b45]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-52818b45]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-52818b45]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-52818b45],.waveform-annotation-editor__color-field[data-v-52818b45]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-52818b45]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-52818b45],.waveform-annotation-editor__colors legend[data-v-52818b45]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-52818b45]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-52818b45]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-52818b45]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-52818b45]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-52818b45]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-52818b45]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}.waveform-annotation-editor__actions[data-v-52818b45]{border-top:1px solid #eaecf0;justify-content:flex-end;gap:8px;padding-top:8px;display:flex}.waveform-annotation-editor__actions button[data-v-52818b45]{color:#475467;cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:6px;height:34px;padding:0 12px}.waveform-annotation-editor__actions button.is-primary[data-v-52818b45]{color:#fff;background:#1677ff;border-color:#1677ff}.waveform-annotation-editor__actions button[data-v-52818b45]:disabled{opacity:.45;cursor:not-allowed}@keyframes waveform-annotation-editor-fade-in-52818b45{0%{opacity:0}to{opacity:1}}@keyframes waveform-annotation-editor-rise-in-52818b45{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=420px){.waveform-annotation-editor[data-v-52818b45]{padding:12px}.waveform-annotation-editor__panel[data-v-52818b45]{gap:16px;padding:18px}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:1fr}}.waveform-tooltip[data-v-b8b5592a]{box-sizing:border-box;z-index:2;color:#333;pointer-events:none;background:#fff;border:1px solid #d9d9d9;border-radius:2px;gap:3px;min-width:180px;max-width:238px;padding:8px 10px;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:absolute;box-shadow:0 4px 12px #1018281f}.waveform-tooltip__time[data-v-b8b5592a]{border-bottom:1px solid #f0f0f0;padding-bottom:4px}.waveform-tooltip__series[data-v-b8b5592a]{grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:6px;display:grid}.waveform-tooltip__series i[data-v-b8b5592a]{border-radius:50%;width:8px;height:8px}.waveform-tooltip__series strong[data-v-b8b5592a]{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.waveform-tooltip__value[data-v-b8b5592a]{white-space:nowrap}.waveform-tooltip__series small[data-v-b8b5592a]{color:#667085;white-space:nowrap}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
+.waveform-annotation-layer[data-v-7254383e]{pointer-events:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]{pointer-events:auto;cursor:grab;touch-action:none}.waveform-annotation-layer--interactive .waveform-annotation[data-v-7254383e]:active{cursor:grabbing}.waveform-annotation__arrow[data-v-7254383e]{stroke-width:2px;stroke-linecap:round;pointer-events:none}.waveform-annotation__box[data-v-7254383e]{stroke-width:1px;rx:3}.waveform-annotation-layer--interactive .waveform-annotation__box[data-v-7254383e]{pointer-events:auto}.waveform-annotation__text[data-v-7254383e]{pointer-events:none;-webkit-user-select:none;user-select:none}.waveform-annotation-context-menu[data-v-c70c98a1]{z-index:30;background:#fff;border:1px solid #dfe5ef;border-radius:4px;min-width:112px;padding:4px;display:grid;position:absolute;box-shadow:0 4px 14px #10182829}.waveform-annotation-context-menu button[data-v-c70c98a1]{color:#344054;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-radius:3px;padding:7px 10px;font-size:12px}.waveform-annotation-context-menu button[data-v-c70c98a1]:hover{background:#f2f4f7}.waveform-annotation-editor[data-v-52818b45]{z-index:40;background:#10182852;place-items:center;padding:20px;animation:.16s ease-out waveform-annotation-editor-fade-in-52818b45;display:grid;position:absolute;inset:0}.waveform-annotation-editor__panel[data-v-52818b45]{color:#344054;background:#fff;border:1px solid #e4e7ec;border-radius:12px;gap:20px;width:min(440px,100%);max-height:100%;padding:22px;font-size:13px;animation:.18s ease-out waveform-annotation-editor-rise-in-52818b45;display:grid;overflow-y:auto;box-shadow:0 20px 50px #10182838}.waveform-annotation-editor__header[data-v-52818b45]{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.waveform-annotation-editor__header h2[data-v-52818b45]{color:#101828;margin:0;font-size:18px;line-height:1.3}.waveform-annotation-editor__header p[data-v-52818b45]{color:#667085;margin:5px 0 0;font-size:12px}.waveform-annotation-editor__close[data-v-52818b45]{color:#667085;cursor:pointer;background:0 0;border:0;border-radius:6px;flex:0 0 30px;place-items:center;width:30px;height:30px;padding:0;font-size:22px;line-height:1;display:inline-grid}.waveform-annotation-editor__close[data-v-52818b45]:hover{color:#101828;background:#f2f4f7}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.waveform-annotation-editor__coordinates span[data-v-52818b45],.waveform-annotation-editor__series[data-v-52818b45]{background:#f8fafc;border:1px solid #eaecf0;border-radius:7px;align-items:center;gap:8px;min-width:0;padding:9px 10px;display:flex}.waveform-annotation-editor__coordinates span[data-v-52818b45]{color:#667085}.waveform-annotation-editor__coordinates b[data-v-52818b45]{color:#1677ff;font-size:11px}.waveform-annotation-editor__coordinates code[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;min-width:0;font-family:SFMono-Regular,Consolas,monospace;font-size:11px;overflow:hidden}.waveform-annotation-editor__series[data-v-52818b45]{gap:10px}.waveform-annotation-editor__series i[data-v-52818b45]{border:1px solid #0000001f;border-radius:2px;flex:0 0 12px;width:12px;height:12px}.waveform-annotation-editor__series-label[data-v-52818b45]{gap:1px;min-width:0;display:grid}.waveform-annotation-editor__series select[data-v-52818b45]{color:#344054;min-width:0;max-width:190px;font:inherit;background:#fff;border:1px solid #d0d5dd;border-radius:5px;margin-left:auto;padding:5px 7px}.waveform-annotation-editor__series small[data-v-52818b45]{color:#667085;font-size:10px}.waveform-annotation-editor__series b[data-v-52818b45]{color:#344054;text-overflow:ellipsis;white-space:nowrap;font-size:12px;overflow:hidden}.waveform-annotation-editor__series code[data-v-52818b45]{color:#667085;margin-left:auto;font-size:11px}.waveform-annotation-editor__field[data-v-52818b45],.waveform-annotation-editor__color-field[data-v-52818b45]{gap:4px;display:grid}.waveform-annotation-editor__label-row[data-v-52818b45]{justify-content:space-between;align-items:center;gap:8px;display:flex}.waveform-annotation-editor__label-row b[data-v-52818b45],.waveform-annotation-editor__colors legend[data-v-52818b45]{color:#344054;font-size:12px;font-weight:600}.waveform-annotation-editor__label-row small[data-v-52818b45]{color:#98a2b3;font-size:11px}.waveform-annotation-editor textarea[data-v-52818b45]{box-sizing:border-box;color:#1d2939;width:100%;min-height:92px;font:inherit;resize:vertical;background:#fff;border:1px solid #d0d5dd;border-radius:7px;padding:10px 11px;line-height:1.5}.waveform-annotation-editor textarea[data-v-52818b45]:focus{border-color:#1677ff;outline:3px solid #1677ff24}.waveform-annotation-editor__colors[data-v-52818b45]{border:0;border-top:1px solid #eaecf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;margin:0;padding:14px 0 0;display:grid}.waveform-annotation-editor__colors legend[data-v-52818b45]{grid-column:1/-1;padding:0}.waveform-annotation-editor__color-field[data-v-52818b45]{color:#667085;text-align:left;place-items:stretch stretch;min-width:0;font-size:11px}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap{border:1px solid #cfd5df;border-radius:6px;width:100%;height:34px;margin-right:0;box-shadow:inset 0 0 0 1px #ffffff61}.waveform-annotation-editor__color-field[data-v-52818b45] .vc-color-wrap:hover{border-color:#98a2b3;box-shadow:0 0 0 3px #1677ff1f}.waveform-annotation-editor__actions[data-v-52818b45]{border-top:1px solid #eaecf0;justify-content:flex-end;gap:8px;padding-top:8px;display:flex}.waveform-annotation-editor__actions button[data-v-52818b45]{color:#475467;cursor:pointer;background:#fff;border:1px solid #d0d5dd;border-radius:6px;height:34px;padding:0 12px}.waveform-annotation-editor__actions button.is-primary[data-v-52818b45]{color:#fff;background:#1677ff;border-color:#1677ff}.waveform-annotation-editor__actions button[data-v-52818b45]:disabled{opacity:.45;cursor:not-allowed}@keyframes waveform-annotation-editor-fade-in-52818b45{0%{opacity:0}to{opacity:1}}@keyframes waveform-annotation-editor-rise-in-52818b45{0%{opacity:0;transform:translateY(8px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (width<=420px){.waveform-annotation-editor[data-v-52818b45]{padding:12px}.waveform-annotation-editor__panel[data-v-52818b45]{gap:16px;padding:18px}.waveform-annotation-editor__coordinates[data-v-52818b45]{grid-template-columns:1fr}}.waveform-tooltip[data-v-93daa641]{box-sizing:border-box;z-index:2;color:#333;pointer-events:none;background:#fff;border:1px solid #d9d9d9;border-radius:2px;gap:3px;width:max-content;max-width:min(320px,100% - 16px);padding:8px 10px;font:12px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace;display:grid;position:absolute;box-shadow:0 4px 12px #1018281f}.waveform-tooltip__time[data-v-93daa641]{border-bottom:1px solid #f0f0f0;padding-bottom:4px}.waveform-tooltip__series[data-v-93daa641]{grid-template-columns:8px minmax(0,1fr);align-items:start;gap:6px;display:grid}.waveform-tooltip__series i[data-v-93daa641]{border-radius:50%;flex:none;width:8px;height:8px;margin-top:4px}.waveform-tooltip__series-content[data-v-93daa641]{overflow-wrap:anywhere;white-space:normal;min-width:0}.waveform-tooltip__series strong[data-v-93daa641]{font-weight:600}.waveform-tooltip__value[data-v-93daa641]{overflow-wrap:anywhere}.waveform-tooltip__series small[data-v-93daa641]{color:#667085}.waveform-track__line[data-v-42a3fd47]{fill:none;stroke-width:1.5px;stroke-linejoin:round;stroke-linecap:round}.waveform-track__error-bar[data-v-42a3fd47]{fill:none}.waveform-track__point[data-v-42a3fd47],.waveform-track__error-bar[data-v-42a3fd47]{pointer-events:none}.waveform-track{isolation:isolate;pointer-events:none}.waveform-track__y-axis-label-bg{fill:#fff;opacity:.9;pointer-events:none}.waveform-track__y-axis-label{pointer-events:none;font-size:12px;font-weight:500}.waveform-track__grid{pointer-events:none}.waveform-track__grid--major line{stroke:#dfe5ef;stroke-width:1px}.waveform-track__grid--minor line{stroke:#f2f5fa;stroke-width:1px}.waveform-track__plot-frame,.waveform-track__plot-background{pointer-events:none}.waveform-track__watermark{fill:#1677ff1a;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Consolas,Monaco,Courier New,monospace}.waveform-track__overlay{fill:#0000;cursor:crosshair;pointer-events:all;touch-action:none}.waveform-track__no-visible-series{fill:#8c8c8c;pointer-events:none;font:13px sans-serif}.waveform-track__overlay.is-zoomable{cursor:grab}.waveform-track__overlay.is-zoomable:active{cursor:grabbing}.waveform-track__overlay.is-annotating{cursor:crosshair}.waveform-track__overlay.is-presentation{cursor:default;pointer-events:none}.waveform-track__zero-line{fill:none;pointer-events:none}.waveform-track__axis-endpoint{fill:#667085;pointer-events:none;font-size:11px}.waveform-track__axis-exponent{fill:#666;font-family:sans-serif;font-size:10px}.waveform-track__axis path,.waveform-track__axis line{stroke:#1f2937}.waveform-track__axis text{fill:#667085;font-size:11px}.waveform-legend[data-v-2ae12e71]{pointer-events:none;overflow:hidden}.waveform-legend__viewport[data-v-2ae12e71]{box-sizing:border-box;width:100%;height:100%;padding:8px;display:flex;overflow:hidden}.waveform-legend__viewport--top-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-start}.waveform-legend__viewport--top[data-v-2ae12e71]{justify-content:center;align-items:flex-start}.waveform-legend__viewport--top-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-start}.waveform-legend__viewport--right[data-v-2ae12e71]{justify-content:flex-end;align-items:center}.waveform-legend__viewport--bottom-right[data-v-2ae12e71]{justify-content:flex-end;align-items:flex-end}.waveform-legend__viewport--bottom[data-v-2ae12e71]{justify-content:center;align-items:flex-end}.waveform-legend__viewport--bottom-left[data-v-2ae12e71]{justify-content:flex-start;align-items:flex-end}.waveform-legend__viewport--left[data-v-2ae12e71]{justify-content:flex-start;align-items:center}.waveform-legend__panel[data-v-2ae12e71]{color:#344054;border:1px solid #d0d5dde6;border-radius:4px;flex:0 auto;gap:5px 12px;max-width:100%;max-height:100%;padding:5px 7px;font:12px/1.35 sans-serif;display:flex;overflow:hidden}.waveform-legend__panel--interactive[data-v-2ae12e71]{pointer-events:auto}.waveform-legend__panel--horizontal[data-v-2ae12e71]{flex-flow:wrap;align-items:center}.waveform-legend__panel--vertical[data-v-2ae12e71]{flex-flow:column;align-items:stretch}.waveform-legend__item[data-v-2ae12e71]{min-width:0;max-width:160px;color:inherit;font:inherit;text-align:left;white-space:nowrap;appearance:none;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:flex}.waveform-legend__item[data-v-2ae12e71]:disabled{opacity:1}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]{cursor:pointer}.waveform-legend__panel--interactive .waveform-legend__item[data-v-2ae12e71]:focus-visible{outline-offset:2px;outline:2px solid #1677ff}.waveform-legend__item.is-hidden[data-v-2ae12e71]{opacity:.45}.waveform-legend__item.is-hidden .waveform-legend__label[data-v-2ae12e71]{text-decoration:line-through}.waveform-legend__swatch[data-v-2ae12e71]{stroke-linecap:round;stroke-linejoin:round;flex:0 0 26px;width:26px;height:16px;overflow:visible}.waveform-legend__label[data-v-2ae12e71]{text-overflow:ellipsis;min-width:0;overflow:hidden}.waveform-track__crosshair[data-v-a6f82099]{pointer-events:none}.waveform-track__crosshair line[data-v-a6f82099]{stroke:#57617b;stroke-width:1px;stroke-dasharray:4 3}.waveform-chart{box-sizing:border-box;color:#475467;background:#fff;border:1px solid #00000014;border-radius:6px;min-width:0;min-height:180px;position:relative;overflow:hidden}.waveform-chart--clean{border-color:#0000}.waveform-chart__pagination{z-index:2;position:absolute;bottom:6px;right:10px}.waveform-chart__title-area{background:#fff;align-items:center;width:100%;min-width:0;padding:0 24px;display:flex;position:relative;overflow:hidden}.waveform-chart__title-measure{visibility:hidden;pointer-events:none;display:block;position:absolute}.waveform-chart__title-visual{flex:none;min-width:0;position:relative;overflow:visible}.waveform-chart__title-text{transform-origin:50%;line-height:1.2;display:block;position:absolute;top:50%;left:50%;overflow:visible}.waveform-chart__pagination .ant-pagination-item,.waveform-chart__pagination .ant-pagination-prev .ant-pagination-item-link,.waveform-chart__pagination .ant-pagination-next .ant-pagination-item-link{background:#fff;border-color:#d9d9d9}.waveform-chart__pagination .ant-pagination-item-active{border-color:#1677ff}.waveform-chart__grid-slot-placeholder{fill:#fafbfc;stroke:#e4e7ec;stroke-dasharray:4 4;pointer-events:none}.waveform-chart__svg{max-width:100%;display:block}.waveform-chart__overlay{fill:#0000;cursor:crosshair;touch-action:none}.waveform-chart__overlay.is-zoomable{cursor:crosshair}.waveform-chart--panning .waveform-chart__overlay.is-zoomable{cursor:grabbing}.waveform-chart__zoom-selection{fill:#1677ff24;stroke:#1677ff;stroke-width:1px;pointer-events:none}.waveform-chart__overlay.is-annotating{cursor:crosshair}.waveform-chart--presentation .waveform-chart__overlay{cursor:default;pointer-events:none}.waveform-chart__label,.waveform-chart__empty{fill:#595959;font-size:12px}
 /*$vite$:1*/

package/dist/types/components/core/useWaveformChartController.d.ts

@@ -1,7 +1,7 @@
 import { type ComponentPublicInstance } from 'vue';
 import { getPageSize } from './grid';
 import type { WaveformHoverState } from './types';
-import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes';
+import type { ResolvedWaveformChartProps, ViewportSelectionState, WaveformChartEmit } from './waveformChartTypes';
 export declare function useWaveformChartController(props: ResolvedWaveformChartProps, emit: WaveformChartEmit): {
     margin: {
         top: number;
@@ -11,19 +11,7 @@ export declare function useWaveformChartController(props: ResolvedWaveformChartP
     };
     getPageSize: typeof getPageSize;
     currentPage: number;
-    selection: {
-        trackIndex: number;
-        independent: boolean;
-        overlay: SVGRectElement;
-        startX: number;
-        startY: number;
-        currentX: number;
-        currentY: number;
-        pointerId: number;
-        mode: "box" | "pan";
-        xDomain: [number, number];
-        yDomains: Record<string, [number, number]>;
-    } | null;
+    selection: ViewportSelectionState | null;
     pointerInsideChart: boolean;
     hoverState: import("vue").ShallowReactive<WaveformHoverState>;
     annotationInteraction: {

package/dist/types/components/core/useWaveformChartLifecycle.d.ts

@@ -2,7 +2,7 @@ import { type ZoomTransform } from 'd3';
 import { type ComputedRef, type Ref, type ShallowRef } from 'vue';
 import type { AnnotationSeriesCandidate } from '../annotation';
 import type { useWaveformAnnotationInteraction } from '../annotation';
-import type { DisplaySeries, DisplayTrack } from './types';
+import type { DisplaySeries, DisplayTrack, TrackLayout } from './types';
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes';
 interface LifecycleContext {
     props: ResolvedWaveformChartProps;
@@ -28,6 +28,7 @@ interface LifecycleContext {
     }>;
     chartSeries: ComputedRef<DisplaySeries[]>;
     chartTracks: ComputedRef<DisplayTrack[]>;
+    trackLayouts: ComputedRef<TrackLayout[]>;
     innerWidth: ComputedRef<number>;
     innerHeight: ComputedRef<number>;
     activeInteractionMode: ComputedRef<string | undefined>;
@@ -35,6 +36,7 @@ interface LifecycleContext {
     internalHiddenSeriesIds: Ref<Set<string>>;
     independentTransforms: ShallowRef<ZoomTransform[]>;
     independentYDomains: Ref<Record<number, [number, number]>>;
+    resolveInitialTrackDomain: (track: TrackLayout) => [number, number];
     annotationInteraction: ReturnType<typeof useWaveformAnnotationInteraction>;
     editorSeriesOptions: Ref<AnnotationSeriesCandidate[]>;
     isPresentationMode: ComputedRef<boolean>;
@@ -48,6 +50,7 @@ interface LifecycleContext {
 }
 export declare function useWaveformChartLifecycle(context: LifecycleContext): {
     goToPage: (page: number) => void;
+    handleBeforeDataReferenceChange: () => void;
     handleDataReferenceChange: () => void;
 };
 export {};

package/dist/types/components/core/useWaveformData.d.ts

@@ -15,4 +15,4 @@ export interface PreparedWaveformSeries {
     hasErrorPoints: boolean;
 }
 export declare function prepareWaveformSeries(data: WaveformData): PreparedWaveformSeries[];
-export declare function usePreparedWaveformSeries(data: () => WaveformData, onDataChange: () => void): import("vue").ShallowRef<PreparedWaveformSeries[], PreparedWaveformSeries[]>;
+export declare function usePreparedWaveformSeries(data: () => WaveformData, onBeforeDataChange: () => void, onDataChange: () => void): import("vue").ShallowRef<PreparedWaveformSeries[], PreparedWaveformSeries[]>;

package/dist/types/components/core/waveformChartTypes.d.ts

@@ -55,17 +55,20 @@ export interface WaveformChartEmit {
     (event: 'annotation-delete', annotation: WaveformAnnotation): void;
     (event: 'page-change', page: number, pageCount: number): void;
 }
-export interface ViewportSelectionState {
+interface ViewportSelectionBase {
     trackIndex: number;
     independent: boolean;
-    overlay: SVGRectElement;
     startX: number;
     startY: number;
     currentX: number;
     currentY: number;
     pointerId: number;
-    mode: 'box' | 'pan';
     xDomain: [number, number];
     yDomains: Record<string, [number, number]>;
 }
+export type ViewportSelectionState = (ViewportSelectionBase & {
+    kind: 'box';
+}) | (ViewportSelectionBase & {
+    kind: 'pan';
+});
 export {};

package/dist/types/components/interaction/pointerCapture.d.ts

@@ -0,0 +1 @@
+export declare function tryReleasePointerCapture(target: SVGRectElement | null | undefined, pointerId: number): void;

package/dist/types/components/interaction/viewportInteractionState.d.ts

@@ -0,0 +1,39 @@
+import type { ViewportSelectionState } from '../core/waveformChartTypes';
+export interface ViewportGestureStart {
+    trackIndex: number;
+    independent: boolean;
+    startX: number;
+    startY: number;
+    pointerId: number;
+    kind: 'box' | 'pan';
+    xDomain: [number, number];
+    yDomains: Record<string, [number, number]>;
+}
+export interface ViewportGesturePosition {
+    currentX: number;
+    currentY: number;
+}
+export type ViewportInteractionEvent = {
+    type: 'begin';
+    gesture: ViewportGestureStart;
+} | {
+    type: 'move';
+    pointerId: number;
+    position: ViewportGesturePosition;
+} | {
+    type: 'finish';
+    pointerId: number;
+    position: ViewportGesturePosition;
+} | {
+    type: 'cancel';
+    pointerId?: number;
+} | {
+    type: 'reset';
+};
+export interface ViewportInteractionTransition {
+    state: ViewportSelectionState | null;
+    accepted: boolean;
+    completed: ViewportSelectionState | null;
+}
+export declare function transitionViewportInteraction(state: ViewportSelectionState | null, event: ViewportInteractionEvent): ViewportInteractionTransition;
+export declare function reduceViewportInteraction(state: ViewportSelectionState | null, event: ViewportInteractionEvent): ViewportSelectionState | null;

package/dist/types/components/interaction/zoomConstraints.d.ts

@@ -0,0 +1,14 @@
+import { type ZoomTransform } from 'd3';
+import type { WaveformPoint } from '../../types';
+interface PointSeriesSource {
+    points: WaveformPoint[];
+}
+export type ZoomSeriesGroup = readonly PointSeriesSource[];
+interface ZoomConstraintOptions {
+    minZoomSpan?: number;
+    minVisiblePoints?: number;
+}
+export declare function resolveMinimumZoomSpan(boundary: [number, number], groups: readonly ZoomSeriesGroup[], options: ZoomConstraintOptions): number;
+export declare function constrainZoomDomain(domain: [number, number], boundary: [number, number], groups: readonly ZoomSeriesGroup[], options: ZoomConstraintOptions): [number, number];
+export declare function transformForDomain(domain: [number, number], baseDomain: [number, number], width: number): ZoomTransform;
+export {};

package/dist/types/core/rendering.d.ts

@@ -1,10 +1,7 @@
 import type { WaveformPoint } from '@/types';
 import type { ResolvedWaveformRenderingOptions } from './renderingOptions';
+import { type VisiblePointRange } from './renderingStrategies';
 export { DEFAULT_WAVEFORM_RENDERING_OPTIONS, resolveWaveformRenderingOptions, type ResolvedWaveformRenderingOptions, } from './renderingOptions';
-interface VisiblePointRange {
-    start: number;
-    end: number;
-}
 interface PointSeriesSource {
     points: WaveformPoint[];
 }

package/dist/types/core/renderingStrategies.d.ts

@@ -0,0 +1,22 @@
+import type { WaveformPoint } from '../types';
+import type { ResolvedWaveformRenderingOptions } from './renderingOptions';
+export interface VisiblePointRange {
+    start: number;
+    end: number;
+}
+export interface RenderablePointSelectionContext {
+    points: WaveformPoint[];
+    range: VisiblePointRange;
+    domain: [number, number];
+    width: number;
+    options: ResolvedWaveformRenderingOptions;
+}
+export type RenderablePointSelectionStrategy = (context: RenderablePointSelectionContext) => WaveformPoint[];
+export declare const completePointSelectionStrategy: RenderablePointSelectionStrategy;
+export declare const peakPreservingPointSelectionStrategy: RenderablePointSelectionStrategy;
+export interface RenderablePointSelectionStrategyRequest {
+    visibleCount: number;
+    width: number;
+    options: ResolvedWaveformRenderingOptions;
+}
+export declare function resolveRenderablePointSelectionStrategy(request: RenderablePointSelectionStrategyRequest): RenderablePointSelectionStrategy;

package/dist/types/demo/types.d.ts

@@ -67,7 +67,6 @@ export interface DemoControlPanelModel {
 }
 export interface DemoChartModel {
     data: WaveformData;
-    minZoomSpan?: number;
     initialXDomain?: [number, number];
     displayMode: WaveformDisplayMode;
     overlayMode: WaveformOverlayMode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "waveform-analysis",
-  "version": "0.1.30",
+  "version": "0.1.31",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -43,6 +43,7 @@
     "eslint-plugin-vue": "10.9.2",
     "globals": "17.7.0",
     "jsdom": "29.1.1",
+    "oxlint": "1.77.0",
     "prettier": "3.9.5",
     "typescript": "~6.0.0",
     "typescript-eslint": "8.64.0",
@@ -61,7 +62,10 @@
     "typecheck": "vue-tsc -b",
     "check:file-length": "node scripts/check-file-length.mjs",
     "lint": "eslint . --max-warnings=0",
+    "lint:oxlint": "oxlint . --deny-warnings",
+    "lint:all": "pnpm lint:oxlint && pnpm lint",
     "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage"
   }

package/src/App.vue

@@ -141,9 +141,6 @@ const [initialXMinimum, initialXMaximum] = initialXValues.reduce<[number, number
   ([minimum, maximum], value) => [Math.min(minimum, value), Math.max(maximum, value)],
   [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY],
 )
-const initialXSpan = initialXMaximum - initialXMinimum
-const minZoomSpan =
-  Number.isFinite(initialXSpan) && initialXSpan > 0 ? initialXSpan / 40 : undefined
 const initialXDomainValue: [number, number] | undefined =
   Number.isFinite(initialXMinimum) && Number.isFinite(initialXMaximum)
     ? [initialXMinimum, initialXMaximum]
@@ -353,7 +350,6 @@ const controlPanelModel = reactive({
 
 const chartModel = reactive({
   data: displayChartData,
-  minZoomSpan,
   initialXDomain,
   displayMode,
   overlayMode,

package/src/components/WaveformChartView.vue

@@ -110,7 +110,7 @@ const {
       {
         'waveform-chart--clean': isCleanView,
         'waveform-chart--presentation': isPresentationMode,
-        'waveform-chart--panning': selection?.mode === 'pan',
+        'waveform-chart--panning': selection?.kind === 'pan',
       },
     ]"
     :style="containerStyle"
@@ -247,7 +247,7 @@ const {
         />
 
         <rect
-          v-if="selectionBox && selection?.mode === 'box'"
+          v-if="selectionBox && selection?.kind === 'box'"
           class="waveform-chart__zoom-selection"
           :x="selectionBox.x"
           :y="selectionBox.y"

package/src/components/core/useWaveformChartController.ts

@@ -78,12 +78,14 @@ export function useWaveformChartController(
     },
     { deep: true },
   )
-  const selection = ref<ViewportSelectionState | null>(null)
+  const selection = shallowRef<ViewportSelectionState | null>(null)
   const spacePressed = ref(false)
   const pointerInsideChart = ref(false)
+  let handleBeforeDataReferenceChange: () => void = () => undefined
   let handleDataReferenceChange: () => void = () => undefined
   const preparedSeries = usePreparedWaveformSeries(
     () => props.data,
+    () => handleBeforeDataReferenceChange(),
     () => handleDataReferenceChange(),
   )
 
@@ -127,6 +129,7 @@ export function useWaveformChartController(
   const {
     chartSeries,
     chartTracks,
+    trackLayouts,
     gridOptions,
     pageCount,
     pagedTracks,
@@ -138,7 +141,6 @@ export function useWaveformChartController(
     initialXDomain,
     sharedZoomDomain,
     resolveInitialTrackDomain,
-    trackLayouts,
     annotationLayoutsForTrack,
     resolveSeriesYScale,
   } = layout
@@ -254,6 +256,7 @@ export function useWaveformChartController(
     gridOptions,
     chartSeries,
     chartTracks,
+    trackLayouts,
     innerWidth,
     innerHeight,
     activeInteractionMode,
@@ -261,6 +264,7 @@ export function useWaveformChartController(
     internalHiddenSeriesIds,
     independentTransforms,
     independentYDomains,
+    resolveInitialTrackDomain,
     annotationInteraction,
     editorSeriesOptions,
     isPresentationMode,
@@ -272,6 +276,7 @@ export function useWaveformChartController(
     cancelPendingHover: hover.cancelPendingHover,
     clearZoomBindings: zoom.clearZoomBindings,
   })
+  handleBeforeDataReferenceChange = lifecycle.handleBeforeDataReferenceChange
   handleDataReferenceChange = lifecycle.handleDataReferenceChange
 
   return reactive({

package/src/components/core/useWaveformChartLifecycle.ts

@@ -11,8 +11,9 @@ import {
 
 import type { AnnotationSeriesCandidate } from '../annotation'
 import type { useWaveformAnnotationInteraction } from '../annotation'
-import type { DisplaySeries, DisplayTrack } from './types'
+import type { DisplaySeries, DisplayTrack, TrackLayout } from './types'
 import type { ResolvedWaveformChartProps, WaveformChartEmit } from './waveformChartTypes'
+import { constrainZoomDomain, transformForDomain } from '../interaction/zoomConstraints'
 
 interface LifecycleContext {
   props: ResolvedWaveformChartProps
@@ -35,6 +36,7 @@ interface LifecycleContext {
   gridOptions: ComputedRef<{ rowCount: number; columnCount: number }>
   chartSeries: ComputedRef<DisplaySeries[]>
   chartTracks: ComputedRef<DisplayTrack[]>
+  trackLayouts: ComputedRef<TrackLayout[]>
   innerWidth: ComputedRef<number>
   innerHeight: ComputedRef<number>
   activeInteractionMode: ComputedRef<string | undefined>
@@ -42,6 +44,7 @@ interface LifecycleContext {
   internalHiddenSeriesIds: Ref<Set<string>>
   independentTransforms: ShallowRef<ZoomTransform[]>
   independentYDomains: Ref<Record<number, [number, number]>>
+  resolveInitialTrackDomain: (track: TrackLayout) => [number, number]
   annotationInteraction: ReturnType<typeof useWaveformAnnotationInteraction>
   editorSeriesOptions: Ref<AnnotationSeriesCandidate[]>
   isPresentationMode: ComputedRef<boolean>
@@ -87,6 +90,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     gridOptions,
     chartSeries,
     chartTracks,
+    trackLayouts,
     innerWidth,
     innerHeight,
     activeInteractionMode,
@@ -94,6 +98,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     internalHiddenSeriesIds,
     independentTransforms,
     independentYDomains,
+    resolveInitialTrackDomain,
     annotationInteraction,
     editorSeriesOptions,
     isPresentationMode,
@@ -139,6 +144,27 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     emit('page-change', nextPage, pageCount.value)
   }
 
+  let pendingIndependentXDomains: Array<[number, number] | undefined> | undefined
+
+  function handleBeforeDataReferenceChange() {
+    if (props.displayMode !== 'independent') return
+    pendingIndependentXDomains = trackLayouts.value.map((track) => {
+      const configuredDomain =
+        props.initialXDomains?.[track.series.trackId ?? track.series.id] ??
+        props.initialXDomains?.[track.series.id] ??
+        props.initialXDomain
+      if (
+        !configuredDomain ||
+        !Number.isFinite(configuredDomain[0]) ||
+        !Number.isFinite(configuredDomain[1]) ||
+        configuredDomain[0] === configuredDomain[1]
+      ) {
+        return undefined
+      }
+      return track.xScale.domain() as [number, number]
+    })
+  }
+
   function handleDataReferenceChange() {
     if (props.displayMode === 'independent') {
       const currentTransforms = independentTransforms.value
@@ -148,7 +174,24 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     }
     clearHover()
     editorSeriesOptions.value = []
-    void nextTick(configureZoom)
+    void nextTick(() => {
+      if (props.displayMode === 'independent' && pendingIndependentXDomains) {
+        const nextTransforms = chartTracks.value.map(() => zoomIdentity)
+        trackLayouts.value.forEach((track) => {
+          const previousDomain = pendingIndependentXDomains?.[track.index]
+          if (!previousDomain) return
+          const boundary = resolveInitialTrackDomain(track)
+          const domain = constrainZoomDomain(previousDomain, boundary, [track.seriesList], props)
+          nextTransforms[track.index] = transformForDomain(domain, boundary, track.width)
+        })
+        independentTransforms.value = nextTransforms
+        pendingIndependentXDomains = undefined
+        void nextTick(configureZoom)
+        return
+      }
+      pendingIndependentXDomains = undefined
+      configureZoom()
+    })
   }
 
   watch(
@@ -158,6 +201,7 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
       () => props.zoomable,
       isPresentationMode,
       () => props.minZoomSpan,
+      () => props.minVisiblePoints,
       () => props.initialXDomain,
       () => props.initialXDomains,
       () => props.displayMode,
@@ -324,5 +368,5 @@ export function useWaveformChartLifecycle(context: LifecycleContext) {
     editorSeriesOptions.value = []
   })
 
-  return { goToPage, handleDataReferenceChange }
+  return { goToPage, handleBeforeDataReferenceChange, handleDataReferenceChange }
 }

package/src/components/core/useWaveformData.ts

@@ -62,9 +62,14 @@ export function prepareWaveformSeries(data: WaveformData): PreparedWaveformSerie
   })
 }
 
-export function usePreparedWaveformSeries(data: () => WaveformData, onDataChange: () => void) {
+export function usePreparedWaveformSeries(
+  data: () => WaveformData,
+  onBeforeDataChange: () => void,
+  onDataChange: () => void,
+) {
   const preparedSeries = shallowRef<PreparedWaveformSeries[]>(prepareWaveformSeries(data()))
   watch(data, (nextData) => {
+    onBeforeDataChange()
     preparedSeries.value = prepareWaveformSeries(nextData)
     onDataChange()
   })

package/src/components/core/waveformChartTypes.ts

@@ -95,16 +95,17 @@ export interface WaveformChartEmit {
   (event: 'page-change', page: number, pageCount: number): void
 }
 
-export interface ViewportSelectionState {
+interface ViewportSelectionBase {
   trackIndex: number
   independent: boolean
-  overlay: SVGRectElement
   startX: number
   startY: number
   currentX: number
   currentY: number
   pointerId: number
-  mode: 'box' | 'pan'
   xDomain: [number, number]
   yDomains: Record<string, [number, number]>
 }
+
+export type ViewportSelectionState =
+  (ViewportSelectionBase & { kind: 'box' }) | (ViewportSelectionBase & { kind: 'pan' })

package/src/components/interaction/WaveformTooltip.test.ts

@@ -38,9 +38,48 @@ describe('WaveformTooltip', () => {
     const tooltip = mountTooltip(100, 200).get('.waveform-tooltip')
 
     expect(tooltip.attributes('style')).toContain('left: 8px')
+    expect(tooltip.attributes('style')).toContain('max-width: 184px')
     expect(tooltip.attributes('style')).not.toContain('right:')
   })
 
+  it('keeps short content content-sized while exposing the available width cap', () => {
+    const tooltip = mountTooltip(100).get('.waveform-tooltip')
+
+    expect(tooltip.attributes('style')).toContain('left: 112px')
+    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+  })
+
+  it('keeps long series content in a wrapping content container', () => {
+    const longName = 'ENG8KJXAc-very-long-series-name-10001'
+    const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
+    const wrapper = mount(WaveformTooltip, {
+      props: {
+        visible: true,
+        position: { x: 100, y: 100 },
+        timeUnit: 'ms',
+        hoveredPoint: pointWithErrors,
+        seriesPoints: [
+          {
+            trackIndex: 0,
+            name: longName,
+            color: '#f00',
+            unit: 'very-long-unit',
+            point: pointWithErrors,
+          },
+        ],
+        containerWidth: 400,
+        containerHeight: 300,
+      },
+    })
+
+    const tooltip = wrapper.get('.waveform-tooltip')
+    expect(tooltip.get('.waveform-tooltip__series-content').text()).toContain(longName)
+    expect(tooltip.get('.waveform-tooltip__series-content').classes()).toContain(
+      'waveform-tooltip__series-content',
+    )
+    expect(tooltip.attributes('style')).toContain('max-width: 280px')
+  })
+
   it('shows resolved asymmetric errors beside the hovered value', () => {
     const pointWithErrors = { x: 1, y: 12, error: 1, upperError: 2 }
     const wrapper = mount(WaveformTooltip, {