@genome-spy/core 0.67.0 → 0.68.0

package/dist/src/spec/parameter.d.ts

@@ -20,9 +20,22 @@ export interface ParameterBase {
     push?: "outer";
 }
 
+export interface PersistedParameter {
+    /**
+     * Whether the parameter should be persisted in bookmarks and provenance.
+     *
+     * This primarily affects GenomeSpy App behavior.
+     * Set to `false` for ephemeral params (e.g., hover selections) or when the
+     * selection cannot be persisted due to missing `encoding.key`.
+     *
+     * __Default value:__ `true`
+     */
+    persist?: boolean;
+}
+
 // Adapted from: https://github.com/vega/vega-lite/blob/main/src/parameter.ts
 
-export interface VariableParameter extends ParameterBase {
+export interface VariableParameter extends ParameterBase, PersistedParameter {
     /**
      * The [initial value](http://vega.github.io/vega-lite/docs/value.html) of the parameter.
      *
@@ -219,17 +232,9 @@ export interface PointSelectionConfig extends BaseSelectionConfig<"point"> {
      * __Default value:__ `true`
      */
     toggle?: boolean;
-    /**
-     * A set of fields that uniquely identify a tuple. Used for bookmarking point selections
-     * in the GenomeSpy App. Still work in progress.
-     *
-     * TODO: Or maybe use the `key` channel? https://vega.github.io/vega-lite/docs/encoding.html#key
-     */
-    //keyFields?: string[];
 }
 
-export interface IntervalSelectionConfig
-    extends BaseSelectionConfig<"interval"> {
+export interface IntervalSelectionConfig extends BaseSelectionConfig<"interval"> {
     type: "interval";
 
     /**
@@ -294,7 +299,7 @@ export interface BrushConfig extends ShadowProps {
 }
 
 export interface SelectionParameter<T extends SelectionType = SelectionType>
-    extends ParameterBase {
+    extends ParameterBase, PersistedParameter {
     /**
      * Determines the default event processing and data query for the selection. Vega-Lite currently supports two selection types:
      *

package/dist/src/spec/testing.d.ts

@@ -0,0 +1,12 @@
+export type PrimaryPositionalChannel = import("./channel.js").PrimaryPositionalChannel;
+export type Datum = import("../data/flowNode.js").Datum;
+/**
+ * Testing-only lazy data source parameters.
+ */
+export type MockLazyData = {
+    type: "mockLazy";
+    channel?: PrimaryPositionalChannel;
+    delay?: number;
+    data?: Datum[];
+};
+//# sourceMappingURL=testing.d.ts.map

package/dist/src/spec/testing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"testing.d.ts","sourceRoot":"","sources":["../../../src/spec/testing.js"],"names":[],"mappings":"uCAKa,OAAO,cAAc,EAAE,wBAAwB;oBAC/C,OAAO,qBAAqB,EAAE,KAAK;;;;;UAOtC,UAAU;cACV,wBAAwB;YACxB,MAAM;WACN,KAAK,EAAE"}

package/dist/src/spec/testing.js

@@ -0,0 +1,20 @@
+/**
+ * Test-only spec typings for internal helpers and fixtures.
+ */
+
+/**
+ * @typedef {import("./channel.js").PrimaryPositionalChannel} PrimaryPositionalChannel
+ * @typedef {import("../data/flowNode.js").Datum} Datum
+ */
+
+/**
+ * Testing-only lazy data source parameters.
+ *
+ * @typedef {object} MockLazyData
+ * @prop {"mockLazy"} type
+ * @prop {PrimaryPositionalChannel} [channel]
+ * @prop {number} [delay]
+ * @prop {Datum[]} [data]
+ */
+
+export {};

package/dist/src/spec/view.d.ts

@@ -11,6 +11,7 @@ import {
     MarkProps,
     MarkType,
     RectProps,
+    RuleProps,
     ShadowProps,
 } from "./mark.js";
 import { ExprRef } from "./parameter.js";
@@ -83,10 +84,24 @@ export type ViewBackground = Pick<
 > &
     ShadowProps;
 
+export interface SeparatorProps extends Omit<RuleProps, "type"> {
+    type?: "rule";
+
+    /**
+     * Whether separators extend into the plot margin (axes/padding) around
+     * the grid.
+     *
+     * __Default value:__ `true`
+     */
+    includePlotMargin?: boolean;
+}
+
 export interface ViewSpecBase extends ResolveSpec {
     /**
-     * An internal name that can be used for referring the view. For referencing
-     * purposes, the name should be unique within the view hierarchy.
+     * An explicit name used to address the view. It is recommended to keep
+     * names unique among siblings. In the App (where view state is
+     * bookmarkable), the name must be unique within its import scope for
+     * views with configurable visibility, etc.
      */
     name?: string;
 
@@ -162,6 +177,16 @@ export interface ViewSpecBase extends ResolveSpec {
      */
     encoding?: Encoding;
 
+    /**
+     * If true, this view and its descendants do not contribute to scale domains.
+     * Child views inherit this flag automatically.
+     *
+     * **Default value:** `false`
+     *
+     * @internal
+     */
+    domainInert?: boolean;
+
     /**
      * View title.
      * N.B.: Currently, GenomeSpy doesn't do bound calculation, and you need to
@@ -199,7 +224,7 @@ export interface ViewSpecBase extends ResolveSpec {
      * Is the visibility configurable interactively from the [GenomeSpy
      * App](https://genomespy.app/docs/sample-collections/).
      * Configurability requires that the view has an explicitly specified name
-     * that is *unique* in within the view hierarchy.
+     * that is unique within its import scope.
      *
      * **Default:** `false` for children of `layer`, `true` for others.
      */
@@ -225,9 +250,7 @@ export interface DynamicOpacitySpec {
 }
 
 export interface UnitSpec
-    extends ViewSpecBase,
-        DynamicOpacitySpec,
-        AggregateSamplesSpec {
+    extends ViewSpecBase, DynamicOpacitySpec, AggregateSamplesSpec {
     /**
      * The background of the view, including fill, stroke, and stroke width.
      */
@@ -250,9 +273,7 @@ export interface AggregateSamplesSpec {
 }
 
 export interface LayerSpec
-    extends ViewSpecBase,
-        DynamicOpacitySpec,
-        AggregateSamplesSpec {
+    extends ViewSpecBase, DynamicOpacitySpec, AggregateSamplesSpec {
     view?: ViewBackground;
     layer: (LayerSpec | UnitSpec | ImportSpec)[];
 }
@@ -330,7 +351,8 @@ export interface TemplateImport {
 export interface ImportSpec {
     /**
      * The name given to the imported view. This property overrides the name
-     * specified in the imported specification.
+     * specified in the imported specification and defines an import scope that
+     * is used for bookmarkable view visibility and parameter addressing.
      */
     name?: string;
 
@@ -351,6 +373,19 @@ export interface ConcatBase extends ViewSpecBase {
      * The gap between the views, in pixels.
      */
     spacing?: number;
+
+    /**
+     * Draws separator rules between visible child views. The separators are
+     * centered within the spacing gaps and do not affect layout.
+     *
+     * If `true`, the defaults are equivalent to:
+     * `{"type":"rule","size":1,"color":"#ccc","opacity":1,"strokeDash":[4,4],"strokeCap":"butt"}`
+     * Use `includePlotMargin` to control whether the separators extend into the
+     * plot margin.
+     *
+     * __Default value:__ `false`
+     */
+    separator?: boolean | SeparatorProps;
 }
 
 export interface VConcatSpec extends ConcatBase {

package/dist/src/styles/genome-spy.css

@@ -1,13 +1,8 @@
 :root {
     --genome-spy-basic-spacing: 10px;
-    --genome-spy-font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial,
-        sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-@keyframes genome-spy-blinker {
-    50% {
-        opacity: 0;
-    }
+    --genome-spy-font-family:
+        system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
 .genome-spy {
@@ -38,34 +33,11 @@
         }
     }
 
-    .loading-message {
-        position: absolute;
-        inset: 0;
-        display: flex;
-
-        align-items: center;
-        justify-content: center;
-
-        .message {
-            color: #666;
-            opacity: 0;
-            transition: opacity 0.7s;
-        }
-    }
-
     .loading {
         > canvas {
             transform: scale(0.95, 0.95);
             opacity: 0;
         }
-
-        > .loading-message .message {
-            opacity: 1;
-
-            .ellipsis {
-                animation: genome-spy-blinker 1s linear infinite;
-            }
-        }
     }
 
     .loading-indicators {

package/dist/src/styles/genome-spy.css.d.ts

@@ -1,3 +1,3 @@
 export default css;
-declare const css: "\n:root {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial,\nsans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n@keyframes genome-spy-blinker {\n50% {\nopacity: 0;\n}\n}\n\n.genome-spy {\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading-message {\nposition: absolute;\ninset: 0;\ndisplay: flex;\n\nalign-items: center;\njustify-content: center;\n\n.message {\ncolor: #666;\nopacity: 0;\ntransition: opacity 0.7s;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n\n> .loading-message .message {\nopacity: 1;\n\n.ellipsis {\nanimation: genome-spy-blinker 1s linear infinite;\n}\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n";
+declare const css: "\n:root {\n--genome-spy-basic-spacing: 10px;\n--genome-spy-font-family: system-ui, \"Segoe UI\", Roboto, Helvetica, Arial,\nsans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\";\n}\n\n.genome-spy {\nfont-family: var(--genome-spy-font-family);\n\nposition: relative;\n\ndisplay: flex;\nflex-direction: column;\n\n.canvas-wrapper {\nposition: relative;\nflex-grow: 1;\noverflow: hidden;\n}\n\ncanvas {\ndisplay: block;\ntransform: scale(1, 1);\nopacity: 1;\ntransition:\ntransform 0.6s,\nopacity 0.6s;\n\n&:focus,\n&:focus-visible {\noutline: none;\n}\n}\n\n.loading {\n> canvas {\ntransform: scale(0.95, 0.95);\nopacity: 0;\n}\n}\n\n.loading-indicators {\nposition: absolute;\ninset: 0;\n\nuser-select: none;\npointer-events: none;\n\ndiv {\nposition: absolute;\ndisplay: flex;\nalign-items: center;\njustify-content: center;\n\n> div {\nfont-size: 11px;\ntransition: opacity 0.2s;\nbackground: white;\npadding: 2px 5px;\ndisplay: flex;\nborder-radius: 3px;\ngap: 0.5em;\nopacity: 0;\n\n&.loading {\nopacity: 0.5;\n}\n\n&.error {\nopacity: 0.8;\ncolor: firebrick;\n}\n\n> * {\ndisplay: block;\n}\n\nimg {\nwidth: 1.5em;\nheight: 1.5em;\n}\n}\n}\n}\n\n.tooltip {\nposition: absolute;\n\nmax-width: 450px;\noverflow: hidden;\n\n--background-color: #f6f6f6;\nbackground: var(--background-color);\npadding: var(--genome-spy-basic-spacing);\n\n--font-size: 12px;\nfont-size: var(--font-size);\n\nbox-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.21);\n\n&:not(.sticky) {\npointer-events: none;\n}\n\ntransition:\noutline-color 0.3s ease-in-out,\nbox-shadow 0.3s ease-in-out;\n\noutline: 0px solid transparent;\n&.sticky {\noutline: 2px solid black;\nbox-shadow: 0px 3px 18px 0px rgba(0, 0, 0, 0.3);\n}\n\nz-index: 100;\n\n> :last-child {\nmargin-bottom: 0;\n}\n\n> .title {\npadding-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nmargin-bottom: calc(var(--genome-spy-basic-spacing) / 2);\nborder-bottom: 1px dashed var(--background-color);\nborder-bottom: 1px dashed\ncolor-mix(in srgb, black 25%, var(--background-color));\n}\n\n.summary {\nfont-size: 12px;\n}\n\ntable {\n&:first-child {\nmargin-top: 0;\n}\n\nborder-collapse: collapse;\n\nth,\ntd {\npadding: 2px 0.4em;\nvertical-align: top;\nfont-size: var(--font-size);\n\n&:first-child {\npadding-left: 0;\n}\n}\n\nth {\ntext-align: left;\nfont-weight: bold;\n}\n}\n\n.color-legend {\ndisplay: inline-block;\nwidth: 0.8em;\nheight: 0.8em;\nmargin-left: 0.4em;\nbox-shadow: 0px 0px 3px 1px white;\n}\n\n.attributes {\n.hovered {\nbackground-color: #e0e0e0;\n}\n}\n\n.na {\ncolor: #aaa;\nfont-style: italic;\nfont-size: 80%;\n}\n}\n\n.gene-track-tooltip {\n.summary {\nfont-size: 90%;\n}\n}\n\n.message-box {\ndisplay: flex;\nalign-items: center;\njustify-content: center;\nposition: absolute;\ntop: 0;\nheight: 100%;\nwidth: 100%;\n\n> div {\nborder: 1px solid red;\npadding: 10px;\nbackground: #fff0f0;\n}\n}\n}\n\n.gs-input-binding {\ndisplay: grid;\ngrid-template-columns: max-content max-content;\ncolumn-gap: 1em;\nrow-gap: 0.3em;\njustify-items: start;\n\n> select,\n> input:not([type=\"checkbox\"]) {\nwidth: 100%;\n}\n\ninput[type=\"range\"] + span {\ndisplay: inline-block;\nmargin-left: 0.3em;\nmin-width: 2.2em;\nfont-variant-numeric: tabular-nums;\n}\n\ninput[type=\"range\"],\ninput[type=\"radio\"] {\nvertical-align: text-bottom;\n}\n\n.radio-group {\ndisplay: flex;\nalign-items: center;\n}\n\n.description {\nmax-width: 26em;\ngrid-column: 1 / -1;\ncolor: #777;\nfont-size: 90%;\nmargin-top: -0.5em;\n}\n}\n\n.gs-input-bindings {\nflex-basis: content;\nfont-size: 14px;\npadding: var(--genome-spy-basic-spacing);\n}\n";
 //# sourceMappingURL=genome-spy.css.d.ts.map

package/dist/src/styles/genome-spy.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,+5HAiRE"}
+{"version":3,"file":"genome-spy.css.d.ts","sourceRoot":"","sources":["../../../src/styles/genome-spy.css.js"],"names":[],"mappings":";AAAA,0iHAoPE"}

package/dist/src/styles/genome-spy.css.js

@@ -5,12 +5,6 @@ const css = `
 sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
 }
 
-@keyframes genome-spy-blinker {
-50% {
-opacity: 0;
-}
-}
-
 .genome-spy {
 font-family: var(--genome-spy-font-family);
 
@@ -39,34 +33,11 @@ outline: none;
 }
 }
 
-.loading-message {
-position: absolute;
-inset: 0;
-display: flex;
-
-align-items: center;
-justify-content: center;
-
-.message {
-color: #666;
-opacity: 0;
-transition: opacity 0.7s;
-}
-}
-
 .loading {
 > canvas {
 transform: scale(0.95, 0.95);
 opacity: 0;
 }
-
-> .loading-message .message {
-opacity: 1;
-
-.ellipsis {
-animation: genome-spy-blinker 1s linear infinite;
-}
-}
 }
 
 .loading-indicators {

package/dist/src/types/encoder.d.ts

@@ -15,7 +15,12 @@ import {
     ScaleDiverging,
     ScaleContinuousNumeric,
 } from "d3-scale";
-import { Channel, ChannelDef, ChannelWithScale } from "../spec/channel.js";
+import {
+    Channel,
+    ChannelDef,
+    ChannelDefWithScale,
+    ChannelWithScale,
+} from "../spec/channel.js";
 import { ScaleLocus } from "../genome/scaleLocus.js";
 import { ScaleIndex } from "../genome/scaleIndex.js";
 import { Scalar } from "../spec/channel.js";
@@ -31,6 +36,13 @@ export interface Accessor<T = Scalar> {
      */
     asNumberAccessor(): Accessor<number>;
 
+    /**
+     * Returns true if this accessor appears to return the same value as the
+     * other accessor for the same datum. Structural comparison based on the
+     * data source (ignores channel/predicate/scale).
+     */
+    equals(other: Accessor): boolean;
+
     /**
      * True if the accessor returns the same value for all objects
      */
@@ -51,19 +63,42 @@ export interface Accessor<T = Scalar> {
      * before visual encoding, indicates with channel has the scale.
      * If no scale is needed, this is undefined.
      */
-    scaleChannel: ChannelWithScale;
+    scaleChannel?: ChannelWithScale;
 
     /**
      * The ChannelDef that the accessor is based on
      */
     channelDef: ChannelDef;
 
+    /**
+     * A stable key derived from the accessor's data source. Used for equality.
+     */
+    sourceKey?: string;
+
+    /**
+     * A domain key base derived from the channel definition and scale channel.
+     * Format: <scaleChannel>|<kind>|<value>
+     */
+    domainKeyBase?: string;
+
+    /**
+     * A domain key finalized with the resolved data type.
+     * Format: <type>|<domainKeyBase>
+     */
+    domainKey?: string;
+
     /**
      * This accessor should be used when the predicate is true
      */
     predicate: Predicate;
 }
 
+export interface ScaleAccessor<T = Scalar> extends Accessor<T> {
+    scaleChannel: ChannelWithScale;
+    channelDef: ChannelDefWithScale;
+    domainKeyBase: string;
+}
+
 export interface Predicate extends ExprRefFunction {
     /**
      * The parameter the predicate is based on

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

@@ -9,14 +9,15 @@ import ViewRenderingContext from "../view/renderingContext/viewRenderingContext.
  */
 export interface SampleFacetRenderingOptions {
     /**
-     * Location and height on unit scale, zero at top
+     * Location and height. Use unit scale by default; when `pixelToUnit` is
+     * provided, interpret values as pixels and scale them.
      */
     locSize: LocSize;
 
     /**
-     * Target (during transition)
+     * Multiply pixel-based locSize values to unit scale.
      */
-    targetLocSize?: LocSize;
+    pixelToUnit: number;
 }
 
 export interface RenderingOptions {

package/dist/src/types/viewContext.d.ts

@@ -66,20 +66,6 @@ export default interface ViewContext {
 
     getNamedDataFromProvider: (name: string) => any[];
 
-    /**
-     * Allows lazy data sources to signal that they are loading data.
-     * The status is shown in the UI somewhere within or near the view.
-     *
-     * @param view The view where the data source is located.
-     * @param status
-     * @param detail Details about the error, if any.
-     */
-    setDataLoadingStatus: (
-        view: View,
-        status: DataLoadingStatus,
-        detail?: string
-    ) => void;
-
     /**
      * Highlights a view by adding a border around it. This is useful for debugging.
      *

package/dist/src/utils/throttle.d.ts

@@ -3,6 +3,9 @@
  *
  * @param {function} func
  * @param {number} limit
+ * @returns {((...args: any[]) => void) & { cancel: () => void }}
  */
-export default function throttle(func: Function, limit: number): () => void;
+export default function throttle(func: Function, limit: number): ((...args: any[]) => void) & {
+    cancel: () => void;
+};
 //# sourceMappingURL=throttle.d.ts.map

package/dist/src/utils/throttle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"throttle.d.ts","sourceRoot":"","sources":["../../../src/utils/throttle.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,wDAFW,MAAM,cA8BhB"}
+{"version":3,"file":"throttle.d.ts","sourceRoot":"","sources":["../../../src/utils/throttle.js"],"names":[],"mappings":"AAAA;;;;;;GAMG;AACH,wDAHW,MAAM,GACJ,CAAC,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,CAAC,GAAG;IAAE,MAAM,EAAE,MAAM,IAAI,CAAA;CAAE,CA8D/D"}

package/dist/src/utils/throttle.js

@@ -1,37 +1,68 @@
-/* eslint-disable consistent-this */
-
 /**
  * https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf
  *
  * @param {function} func
  * @param {number} limit
+ * @returns {((...args: any[]) => void) & { cancel: () => void }}
  */
 export default function throttle(func, limit) {
-    /** @type {number} */
-    let lastFunc;
+    /** @type {ReturnType<typeof setTimeout> | null} */
+    let timeoutId = null;
+
+    /** @type {number | null} */
+    let lastRan = null;
+
+    /** @type {IArguments | null} */
+    let lastArgs = null;
 
-    /** @type {number} */
-    let lastRan;
+    /** @type {any} */
+    let lastContext = null;
 
-    return function () {
+    const throttled = function () {
         // eslint-disable-next-line no-invalid-this
-        const context = this;
+        lastContext = this;
         // eslint-disable-next-line prefer-rest-params
-        const args = arguments;
-        if (!lastRan) {
-            func.apply(context, args);
-            lastRan = Date.now();
-        } else {
-            clearTimeout(lastFunc);
-            lastFunc = window.setTimeout(
-                function () {
-                    if (Date.now() - lastRan >= limit) {
-                        func.apply(context, args);
-                        lastRan = Date.now();
-                    }
-                },
-                limit - (Date.now() - lastRan)
-            );
+        lastArgs = arguments;
+
+        const now = Date.now();
+        if (lastRan === null) {
+            func.apply(lastContext, lastArgs);
+            lastRan = now;
+            return;
+        }
+
+        const remaining = limit - (now - lastRan);
+        if (remaining <= 0) {
+            if (timeoutId) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+            func.apply(lastContext, lastArgs);
+            lastRan = now;
+            return;
         }
+
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+        }
+        timeoutId = setTimeout(() => {
+            timeoutId = null;
+            if (lastRan !== null && Date.now() - lastRan >= limit) {
+                func.apply(lastContext, lastArgs);
+                lastRan = Date.now();
+            }
+        }, remaining);
+    };
+
+    throttled.cancel = () => {
+        if (timeoutId) {
+            clearTimeout(timeoutId);
+            timeoutId = null;
+        }
+        lastArgs = null;
+        lastContext = null;
+        lastRan = null;
     };
+
+    return throttled;
 }

package/dist/src/utils/throttle.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=throttle.test.d.ts.map

package/dist/src/utils/throttle.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"throttle.test.d.ts","sourceRoot":"","sources":["../../../src/utils/throttle.test.js"],"names":[],"mappings":""}

package/dist/src/utils/transition.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Lightweight cancellation token for transitions.
+ * Use this when you want a cheap, synchronous cancel path without errors.
+ *
+ * @returns {{ canceled: boolean }}
+ */
+export function createCancelToken(): {
+    canceled: boolean;
+};
 /**
  * @param {TransitionOptions} options
  *
@@ -11,6 +20,10 @@
  * @prop {function(function(number):void):void} [requestAnimationFrame]
  *      default: window.requestAnimationFrame
  * @prop {AbortSignal} [signal]
+ * @prop {{ canceled: boolean }} [cancelToken]
+ *      Prefer this for internal transitions where cancellation is expected and should be cheap.
+ *      The transition resolves immediately when canceled and does not throw or reject.
+ *      Use AbortSignal when you need external orchestration or standardized cancellation.
  */
 export default function transition(options: TransitionOptions): Promise<any>;
 export type TransitionOptions = {
@@ -40,5 +53,13 @@ export type TransitionOptions = {
      */
     requestAnimationFrame?: (arg0: (arg0: number) => void) => void;
     signal?: AbortSignal;
+    /**
+     * Prefer this for internal transitions where cancellation is expected and should be cheap.
+     * The transition resolves immediately when canceled and does not throw or reject.
+     * Use AbortSignal when you need external orchestration or standardized cancellation.
+     */
+    cancelToken?: {
+        canceled: boolean;
+    };
 };
 //# sourceMappingURL=transition.d.ts.map

package/dist/src/utils/transition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/utils/transition.js"],"names":[],"mappings":"AAGA;;;;;;;;;;;;;GAaG;AACH,4CAbW,iBAAiB,gBAqE3B;;;;;WAlES,MAAM;;;;SACN,MAAM;;;;eACN,MAAM;;;;YACN,MAAM;cACN,CAAS,IAAM,EAAN,MAAM,KAAE,IAAI;;;;qBACrB,CAAS,IAAM,EAAN,MAAM,KAAE,MAAM;;;;4BACvB,CAAS,IAAqB,EAArB,CAAS,IAAM,EAAN,MAAM,KAAE,IAAI,KAAE,IAAI;aAEpC,WAAW"}
+{"version":3,"file":"transition.d.ts","sourceRoot":"","sources":["../../../src/utils/transition.js"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,qCAFa;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAIjC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,4CAjBW,iBAAiB,gBAuF3B;;;;;WApFS,MAAM;;;;SACN,MAAM;;;;eACN,MAAM;;;;YACN,MAAM;cACN,CAAS,IAAM,EAAN,MAAM,KAAE,IAAI;;;;qBACrB,CAAS,IAAM,EAAN,MAAM,KAAE,MAAM;;;;4BACvB,CAAS,IAAqB,EAArB,CAAS,IAAM,EAAN,MAAM,KAAE,IAAI,KAAE,IAAI;aAEpC,WAAW;;;;;;kBACX;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE"}

package/dist/src/utils/transition.js

@@ -1,6 +1,16 @@
 /** @param {number} ms */
 const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
 
+/**
+ * Lightweight cancellation token for transitions.
+ * Use this when you want a cheap, synchronous cancel path without errors.
+ *
+ * @returns {{ canceled: boolean }}
+ */
+export function createCancelToken() {
+    return { canceled: false };
+}
+
 /**
  * @param {TransitionOptions} options
  *
@@ -14,15 +24,24 @@ const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
  * @prop {function(function(number):void):void} [requestAnimationFrame]
  *      default: window.requestAnimationFrame
  * @prop {AbortSignal} [signal]
+ * @prop {{ canceled: boolean }} [cancelToken]
+ *      Prefer this for internal transitions where cancellation is expected and should be cheap.
+ *      The transition resolves immediately when canceled and does not throw or reject.
+ *      Use AbortSignal when you need external orchestration or standardized cancellation.
  */
 export default function transition(options) {
     const requestAnimationFrame =
         options.requestAnimationFrame || window.requestAnimationFrame;
 
     const signal = options.signal;
+    const cancelToken = options.cancelToken;
 
     const makePromise = () =>
         new Promise((resolve, reject) => {
+            if (cancelToken?.canceled) {
+                return resolve();
+            }
+
             if (signal?.aborted) {
                 return reject("aborted");
             }
@@ -46,6 +65,11 @@ export default function transition(options) {
 
             /** @param {number} stamp */
             const step = (stamp) => {
+                if (cancelToken?.canceled) {
+                    resolve();
+                    return;
+                }
+
                 if (signal?.aborted) {
                     reject("aborted");
                 } else {
@@ -63,6 +87,10 @@ export default function transition(options) {
         });
 
     if (options.delay) {
+        if (cancelToken?.canceled) {
+            return Promise.resolve();
+        }
+
         if (signal?.aborted) {
             return Promise.reject("aborted");
         }

package/dist/src/utils/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAIA,0CAA2C,qBAAqB,CAAC;AAEjE;IAsBI;;OAEG;IACH,uBAFW,WAAW,EAUrB;IAED;;OAEG;IACH,mBAFW,OAAO,EAQjB;IAED,cAVW,OAAO,CAYjB;IAED;;OAEG;IACH,qBAFW,OAAO,EAOjB;IAED,eATW,OAAO,CAWjB;IAED,uBAEC;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAsCpB;IA/BG,8BAA2D;IAiC/D,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAqB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAmBlF;IAED,sBAEC;;CACJ"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../src/utils/ui/tooltip.js"],"names":[],"mappings":"AAIA,0CAA2C,qBAAqB,CAAC;AAEjE;IAsBI;;OAEG;IACH,uBAFW,WAAW,EAUrB;IAED;;OAEG;IACH,mBAFW,OAAO,EAQjB;IAED,cAVW,OAAO,CAYjB;IAED;;OAEG;IACH,qBAFW,OAAO,EAOjB;IAED,eATW,OAAO,CAWjB;IAED,uBAEC;IAED;;OAEG;IACH,0BAFW,OAAO,QAOjB;IAED,wBAEC;IAED;;OAEG;IACH,4BAFW,UAAU,QAsCpB;IA/BG,8BAA2D;IAiC/D,wBAiBC;IAED;;OAEG;IACH,oBAFW,MAAM,GAAG,OAAO,KAAK,EAAE,cAAc,GAAG,WAAW,QAqB7D;IAED,cAGC;IAED;;;;;;;OAOG;IACH,gBAFa,CAAC,SAFH,CAAC,cACD,CAAS,IAAC,EAAD,CAAC,KAAE,OAAO,CAAC,MAAM,GAAG,WAAW,GAAG,OAAO,KAAK,EAAE,cAAc,CAAC,QAyBlF;IAED,sBAEC;;CACJ"}