@fjader/svelte 0.2.3 → 0.2.5

package/dist/interactors/TooltipManager.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { OtherRowStats } from '../components/marks/lifecycle/other-rows.svelte';
 import type { QueryEngine } from '../query-engine/QueryEngine';
 import type { D3Scale, ScaleStateInstance } from '../types';
 import type { DimValue } from '../query-engine/categorical-identity';
@@ -50,6 +51,11 @@ interface TooltipMarkRegistration {
     };
     constantRadius?: number;
     displayFields?: string[] | null;
+    /**
+     * What an Other bar's point holds, for the tooltip to add its rows; read at
+     * display time, so a selection that changes under the pointer shows at once.
+     */
+    otherStats?: (point: DataRow) => OtherRowStats | null;
     proximityAxis: 'x' | 'y' | 'xy';
     enabled: boolean;
 }
@@ -83,11 +89,13 @@ export declare class TooltipManager {
     currentChannelFields: Record<string, string> | null;
     currentDisplayFields: string[] | null;
     visible: boolean;
-    pointerScreenX: number;
-    pointerScreenY: number;
+    pointerClientX: number;
+    pointerClientY: number;
     matchedRadius: number | null;
     get focusedPoint(): DataRow | null;
     get focusedMatch(): MatchedPoint | null;
+    /** The focused point's Other numbers, or null where it is not an Other bar. */
+    get focusedOtherStats(): OtherRowStats | null;
     get currentPoint(): DataRow | null;
     get currentColor(): string | null;
     get matchedScreenX(): number | null;
@@ -97,6 +105,12 @@ export declare class TooltipManager {
      * Update the cursor's data-space position. Called directly from pointer move handler.
      */
     updatePosition(xData: number | null, yData: number | null): void;
+    /**
+     * Run the hover query again at the last position, if the pointer is still
+     * in the chart: a mark's tooltip table was rewritten under a still pointer,
+     * so the row it shows is the old data's. The next frame runs it.
+     */
+    refresh(): void;
     /**
      * Cycle the focused point index by delta. Wraps around.
      * Remembers the focused category so it persists across cursor moves.
@@ -121,10 +135,11 @@ export declare class TooltipManager {
      */
     get currentMarkLOD(): MarkLODSurface | null;
     /**
-     * Update raw screen position for tooltip positioning.
-     * Called from chart container's pointer move handler.
+     * The pointer's viewport (client) position, where the tooltip is placed: it
+     * renders in the top layer, outside the chart's clipping ancestors. Called from
+     * the chart's pointer move handler.
      */
-    updatePointerScreen(x: number, y: number): void;
+    updatePointerClient(x: number, y: number): void;
     /**
      * Called once per animation frame by GPUCoordinator's render loop.
      */

package/dist/interactors/TooltipManager.svelte.js

@@ -35,8 +35,8 @@ export class TooltipManager {
     currentChannelFields = $state(null);
     currentDisplayFields = $state(null);
     visible = $state(false);
-    pointerScreenX = $state(0);
-    pointerScreenY = $state(0);
+    pointerClientX = $state(0);
+    pointerClientY = $state(0);
     matchedRadius = $state(null);
     // Focused point getters — used by Tooltip and HoverIndicator
     get focusedPoint() {
@@ -45,6 +45,12 @@ export class TooltipManager {
     get focusedMatch() {
         return this.matchedPoints[this.focusedIndex] ?? null;
     }
+    /** The focused point's Other numbers, or null where it is not an Other bar. */
+    get focusedOtherStats() {
+        const point = this.focusedPoint;
+        const stats = this.currentMarkId ? this.#marks.get(this.currentMarkId)?.otherStats : null;
+        return point && stats ? stats(point) : null;
+    }
     // Backwards-compat getters
     get currentPoint() {
         return this.currentPoints[0] ?? null;
@@ -81,6 +87,15 @@ export class TooltipManager {
         this.#pendingY = yData;
         this.#hasPending = true;
     }
+    /**
+     * Run the hover query again at the last position, if the pointer is still
+     * in the chart: a mark's tooltip table was rewritten under a still pointer,
+     * so the row it shows is the old data's. The next frame runs it.
+     */
+    refresh() {
+        if (this.#cursorActive)
+            this.#hasPending = true;
+    }
     /**
      * Cycle the focused point index by delta. Wraps around.
      * Remembers the focused category so it persists across cursor moves.
@@ -129,12 +144,13 @@ export class TooltipManager {
         return this.#chartConfig.getMarkLOD(this.currentMarkId) ?? null;
     }
     /**
-     * Update raw screen position for tooltip positioning.
-     * Called from chart container's pointer move handler.
+     * The pointer's viewport (client) position, where the tooltip is placed: it
+     * renders in the top layer, outside the chart's clipping ancestors. Called from
+     * the chart's pointer move handler.
      */
-    updatePointerScreen(x, y) {
-        this.pointerScreenX = x;
-        this.pointerScreenY = y;
+    updatePointerClient(x, y) {
+        this.pointerClientX = x;
+        this.pointerClientY = y;
     }
     // =========================================================================
     // QUERY SCHEDULING (driven by animation loop)
@@ -170,7 +186,16 @@ export class TooltipManager {
                 if (!sql)
                     continue;
                 queryPromises.push(this.#queryEngine
-                    .query(sql, { callerId: 'tooltip' })
+                    // Per mark: one shared caller id let execute-latest drop every
+                    // lookup but the first and last when a chart has three or more
+                    // marks. Not cached: the tooltip table is rewritten on each data
+                    // change while a lookup's SQL can stay the same.
+                    .query(sql, {
+                    callerId: `tooltip:${markId}`,
+                    cache: false,
+                    // The tooltip table is TEMP, on the main connection.
+                    connectionLocal: true
+                })
                     .then((result) => {
                     const rows = Array.from(result);
                     return rows.length > 0 ? { markId, config, rows } : null;
@@ -484,10 +509,6 @@ export class TooltipManager {
     // =========================================================================
     // LABEL RESOLUTION
     // =========================================================================
-    /**
-     * Resolve band indices, time offsets, and color indices back to human-readable labels.
-     * Renames columns from aliases (x, y, color) to original field names.
-     */
     /** Resolve a single value: band index → label, time offset → formatted date. */
     #resolveValue(axis, key, value, config) {
         const { scaleTypes, bandDomains } = config;
@@ -518,6 +539,10 @@ export class TooltipManager {
         }
         return String(value ?? '');
     }
+    /**
+     * Resolve band indices, time offsets, and color indices back to human-readable labels.
+     * Renames columns from aliases (x, y, color) to original field names.
+     */
     #resolveLabels(row, config) {
         const { scaleTypes, channelFields, bandDomains, colorDomain, columns } = config;
         const point = {};
@@ -562,6 +587,12 @@ export class TooltipManager {
         let rangeInsertIndex = -1;
         for (let i = 0; i < entries.length; i++) {
             const [key, value] = entries[i];
+            // The facet cell's dim id, kept for a click (Toggle reads it to pick the
+            // clicked cell's Other); not displayed: `_` keys never are.
+            if (key === '__facet') {
+                point.__facetId = value;
+                continue;
+            }
             // Skip internal columns
             if (key.startsWith('_') || key.startsWith('__dplot_'))
                 continue;
@@ -583,6 +614,9 @@ export class TooltipManager {
                 // (Toggle selects it) rather than fall back to the raw id.
                 const category = this.#bandScale(key)?.categoryAt(value);
                 point[fieldName] = category === undefined ? value : category;
+                // The raw id beside it: a label can't name an Other bucket (several
+                // share one, and it is no value), so a click on Other reads this.
+                point[key === 'x' ? '__bandIdX' : '__bandIdY'] = value;
                 continue;
             }
             // Resolve time offset to formatted datetime string

package/dist/interactors/other-tooltip.d.ts

@@ -0,0 +1,16 @@
+/**
+ * The rows an Other bar's tooltip adds: how many categories it holds, and,
+ * while a selection reaches into it, how much of it is selected.
+ */
+import type { OtherRowStats } from '../components/marks/lifecycle/other-rows.svelte';
+export interface OtherTooltipRow {
+    key: string;
+    value: string;
+}
+/**
+ * `format` writes a sum the way the chart writes its value axis. Rows:
+ * - categories: "41", or "3 of 41" while a selection is active;
+ * - selected: "1,234 of 5,678 (22%)", only while a selection is active.
+ * A share that rounds to 0 but is not 0 reads "<1%", so a sliver is not "0%".
+ */
+export declare function otherTooltipRows(stats: OtherRowStats, format: (value: number) => string): OtherTooltipRow[];

package/dist/interactors/other-tooltip.js

@@ -0,0 +1,22 @@
+/**
+ * The rows an Other bar's tooltip adds: how many categories it holds, and,
+ * while a selection reaches into it, how much of it is selected.
+ */
+/**
+ * `format` writes a sum the way the chart writes its value axis. Rows:
+ * - categories: "41", or "3 of 41" while a selection is active;
+ * - selected: "1,234 of 5,678 (22%)", only while a selection is active.
+ * A share that rounds to 0 but is not 0 reads "<1%", so a sliver is not "0%".
+ */
+export function otherTooltipRows(stats, format) {
+    const count = String(stats.memberCount);
+    if (!stats.active)
+        return [{ key: 'categories', value: count }];
+    const percent = stats.total === 0 ? 0 : (100 * stats.picked) / stats.total;
+    const rounded = Math.round(percent);
+    const share = rounded === 0 && stats.picked > 0 ? '<1%' : `${rounded}%`;
+    return [
+        { key: 'categories', value: `${stats.pickedCount} of ${count}` },
+        { key: 'selected', value: `${format(stats.picked)} of ${format(stats.total)} (${share})` }
+    ];
+}

package/dist/query-engine/CrossfilterSelection.svelte.d.ts

@@ -16,6 +16,7 @@
  * Both are computed when asked, from the clause, the mark's route and the
  * live registrations: nothing is cached, so nothing goes stale.
  */
+import type { SelectionResponse } from '../components/rendering/activity-reads';
 import type { ExprNode } from '@uwdata/mosaic-sql';
 export type FilterExpr = ExprNode | string | boolean;
 export interface FilterSchema {
@@ -53,12 +54,13 @@ export interface Clause {
  * faceted chart's cells have ids of their own, but share one config.
  * `response` 'filter' makes every selection filter the mark, and a click
  * control's (a discrete registration's) in its own chart too; brushes still
- * skip their own chart.
+ * skip their own chart. 'ignore' makes no selection filter it, so no clause
+ * change re-queries it and preagg builds nothing for it.
  */
 export interface MarkRoute {
     readonly reads: readonly string[];
     readonly chart: object | null;
-    readonly response?: 'auto' | 'filter';
+    readonly response?: SelectionResponse;
 }
 /**
  * What routing reads from one registration of a source: the chart it skips,

package/dist/query-engine/CrossfilterSelection.svelte.js

@@ -57,6 +57,8 @@ export class CrossfilterSelection {
      * no allocation, as it runs per mark per clause on every brush frame.
      */
     filters(route, sourceId, key) {
+        if (route.response === 'ignore')
+            return false;
         if (key !== null && route.reads.includes(key))
             return false;
         const chart = route.chart;

package/dist/query-engine/FieldActivity.svelte.d.ts

@@ -1,6 +1,21 @@
 import type { ClockLoop } from '../animation';
 import { ActivityTable } from '../scales/ActivityTable';
 import type { FieldIdentity } from './categorical-identity';
+/** One mark's Other rows for one bucket: what a click on it selects. */
+export interface OtherEntry {
+    /** The mark's filter group, or null when it is filtered by the selection (`'filter'`). */
+    group: number | null;
+    /** One per Other row: a facet cell (null without facets) and its folded ids. */
+    rows: {
+        facetId: number | null;
+        ids: ArrayLike<number>;
+    }[];
+}
+/** What a click on Other does to a selection: values to set, add or remove. */
+export interface OtherClick {
+    action: 'replace' | 'add' | 'remove';
+    values: unknown[];
+}
 /** What a FieldActivity needs from the page around it. */
 export interface FieldActivityHost {
     /** Drives the fades; null in unit tests and before a coordinator exists, and fades land at once. */
@@ -34,13 +49,28 @@ export declare const DETACHED_HOST: FieldActivityHost;
  * existing ids keep their fades while new ones start in their state.
  * `reconcile` runs from the packer and from `set`, never from a reader, so
  * nothing is resized or retargeted while a template renders.
+ *
+ * THE FREE SLOT. Each group's table holds one slot past the field's ids: 1 while
+ * the group selects nothing on the field, 0 while it selects anything, faded on
+ * the same clock as every id. The shader reads it as the last slot of the
+ * group's run (identityFreeActivity): an Other bar's unselected part dims by it,
+ * so clearing a selection fades it back in with the other bars, rather than its
+ * split sliding.
  */
 export declare class FieldActivity {
     #private;
     readonly key: string;
     constructor(key: string, host?: FieldActivityHost);
-    /** How many ids the tables cover: the applied identity's, 0 without one. */
+    /**
+     * How many slots the tables cover: one per id of the applied identity, and
+     * one past them (FREE_SLOT); 0 without an identity.
+     */
     get count(): number;
+    /**
+     * Group `index`'s selected values, or null when it selects nothing on this
+     * field. Reactive: a reader re-runs when the selection changes.
+     */
+    selectedValues(index: number): ReadonlySet<unknown> | null;
     /** Group `index`'s fade, or null when that group never selected on this field. */
     fadeOf(index: number): ActivityTable | null;
     /**
@@ -76,4 +106,22 @@ export declare class FieldActivity {
      * live: a label is never dimmed on a guess.
      */
     opacityOfId(index: number, id: number, inactiveOpacity?: number): number;
+    /** Register `markId`'s Other rows under `otherId`; null removes them. */
+    setOther(otherId: number, markId: string, entry: OtherEntry | null): void;
+    /**
+     * What a click on Other `otherId` does to group `group`'s selection, given
+     * the values it holds now (`current`), and records it. Null when nothing is
+     * registered under the id (no result yet) or it holds no members.
+     *
+     * - The members: every registered row under the id, or only facet cell
+     *   `facetId`'s when the click came from a cell.
+     * - Shift-click adds them, or takes back what this Other added before if it
+     *   is still selected.
+     * - A plain click on an Other whose marks all filter by the selection (no
+     *   group: `'filter'`) drills down, replacing the selection: such an Other is
+     *   computed inside the selection, so a second click means "the rest of it".
+     * - Otherwise a plain click toggles: it takes back what this Other added if
+     *   that is still selected, and replaces the selection with the members if not.
+     */
+    otherClick(group: number, otherId: number, facetId: number | null, current: ReadonlySet<unknown>, multi: boolean): OtherClick | null;
 }

package/dist/query-engine/FieldActivity.svelte.js

@@ -44,6 +44,13 @@ class GroupFade {
  * existing ids keep their fades while new ones start in their state.
  * `reconcile` runs from the packer and from `set`, never from a reader, so
  * nothing is resized or retargeted while a template renders.
+ *
+ * THE FREE SLOT. Each group's table holds one slot past the field's ids: 1 while
+ * the group selects nothing on the field, 0 while it selects anything, faded on
+ * the same clock as every id. The shader reads it as the last slot of the
+ * group's run (identityFreeActivity): an Other bar's unselected part dims by it,
+ * so clearing a selection fades it back in with the other bars, rather than its
+ * split sliding.
  */
 export class FieldActivity {
     key;
@@ -63,9 +70,20 @@ export class FieldActivity {
         this.key = key;
         this.#host = host;
     }
-    /** How many ids the tables cover: the applied identity's, 0 without one. */
+    /**
+     * How many slots the tables cover: one per id of the applied identity, and
+     * one past them (FREE_SLOT); 0 without an identity.
+     */
     get count() {
-        return this.#identity ? this.#identity.values.length : 0;
+        return this.#identity ? this.#identity.values.length + 1 : 0;
+    }
+    /**
+     * Group `index`'s selected values, or null when it selects nothing on this
+     * field. Reactive: a reader re-runs when the selection changes.
+     */
+    selectedValues(index) {
+        void this.#groupsVersion;
+        return this.#groups[index]?.values ?? null;
     }
     /** Group `index`'s fade, or null when that group never selected on this field. */
     fadeOf(index) {
@@ -164,6 +182,113 @@ export class FieldActivity {
         }
         return values.has(identity.values[id]) ? 1 : inactiveOpacity;
     }
+    // -----------------------------------------------------------------
+    // Other buckets: what each one holds, for a click to select
+    // -----------------------------------------------------------------
+    /**
+     * Every Other bucket's members, by its id and the mark that drew it. Each
+     * mark registers its Other rows per result (`setOther`): the folded ids its
+     * query returned, per facet cell. A click on Other reads them, so what it
+     * selects is exactly what the bar summed.
+     */
+    #others = new Map();
+    /**
+     * What an Other click contributed to a group's selection, by `group:otherId`:
+     * how a second click on the same Other knows what to take back. Dropped with
+     * the id's last entry, so a reused id starts with no memory.
+     */
+    #otherMemory = new Map();
+    /** Register `markId`'s Other rows under `otherId`; null removes them. */
+    setOther(otherId, markId, entry) {
+        let byMark = this.#others.get(otherId);
+        const before = byMark?.get(markId)?.group;
+        if (entry) {
+            if (!byMark)
+                this.#others.set(otherId, (byMark = new Map()));
+            byMark.set(markId, entry);
+        }
+        else {
+            if (!byMark?.delete(markId))
+                return;
+            if (byMark.size === 0) {
+                this.#others.delete(otherId);
+                for (const memKey of [...this.#otherMemory.keys()]) {
+                    if (memKey.endsWith(`:${otherId}`))
+                        this.#otherMemory.delete(memKey);
+                }
+            }
+        }
+        // The bucket's members moved (a new result), or it came or went: whether it
+        // is lit may have changed in the group its marks dim under. A fade it does
+        // not change costs nothing (#retarget returns early).
+        this.#reapply(before);
+        if (entry && entry.group !== before)
+            this.#reapply(entry.group);
+    }
+    #reapply(index) {
+        if (index == null)
+            return;
+        const group = this.#groups[index];
+        if (group && group.values != null)
+            this.#apply(group);
+    }
+    /**
+     * What a click on Other `otherId` does to group `group`'s selection, given
+     * the values it holds now (`current`), and records it. Null when nothing is
+     * registered under the id (no result yet) or it holds no members.
+     *
+     * - The members: every registered row under the id, or only facet cell
+     *   `facetId`'s when the click came from a cell.
+     * - Shift-click adds them, or takes back what this Other added before if it
+     *   is still selected.
+     * - A plain click on an Other whose marks all filter by the selection (no
+     *   group: `'filter'`) drills down, replacing the selection: such an Other is
+     *   computed inside the selection, so a second click means "the rest of it".
+     * - Otherwise a plain click toggles: it takes back what this Other added if
+     *   that is still selected, and replaces the selection with the members if not.
+     */
+    otherClick(group, otherId, facetId, current, multi) {
+        const entries = this.#others.get(otherId);
+        const identity = this.#host.identityOf(this.key);
+        if (!entries || entries.size === 0 || !identity)
+            return null;
+        const members = new Set();
+        let drill = true;
+        for (const entry of entries.values()) {
+            if (entry.group !== null)
+                drill = false;
+            for (const row of entry.rows) {
+                if (facetId !== null && row.facetId !== facetId)
+                    continue;
+                for (let i = 0; i < row.ids.length; i++) {
+                    const id = row.ids[i];
+                    if (identity.synthetic.has(id))
+                        continue;
+                    const value = identity.values[id];
+                    if (value !== undefined)
+                        members.add(value);
+                }
+            }
+        }
+        if (members.size === 0)
+            return null;
+        const memKey = `${group}:${otherId}`;
+        const before = this.#otherMemory.get(memKey);
+        const stillSelected = !!before && before.size > 0 && [...before].every((v) => current.has(v));
+        if (stillSelected && (multi || !drill)) {
+            this.#otherMemory.delete(memKey);
+            return { action: 'remove', values: [...before] };
+        }
+        if (!multi) {
+            // A replace: what any other Other added is gone from the selection.
+            for (const key of [...this.#otherMemory.keys()]) {
+                if (key.startsWith(`${group}:`))
+                    this.#otherMemory.delete(key);
+            }
+        }
+        this.#otherMemory.set(memKey, members);
+        return { action: multi ? 'add' : 'replace', values: [...members] };
+    }
     #group(index) {
         let group = this.#groups[index];
         if (!group) {
@@ -187,10 +312,13 @@ export class FieldActivity {
             group.table.resize(0);
             return;
         }
-        const count = identity.values.length;
+        // Every id, and the free slot past them: clear() sets it to 1 and
+        // setActive() leaves it out, so it fades to 0 while anything is selected
+        // and back to 1 once nothing is (see FieldActivity's FREE_SLOT note).
+        const count = identity.values.length + 1;
         const values = group.values;
         if (values == null) {
-            group.table.resize(count, null);
+            group.table.resize(count, null, true);
             group.table.clear();
             return;
         }
@@ -201,7 +329,49 @@ export class FieldActivity {
             if (id != null)
                 ids.push(id);
         }
-        group.table.resize(count, ids);
+        this.#lightOthers(this.#groups.indexOf(group), ids, count);
+        group.table.resize(count, ids, true);
         group.table.setActive(ids);
     }
+    /**
+     * Add to `ids` (the selected ids) every Other bucket that holds one of them,
+     * by the members its marks in group `index` registered: a bucket is lit while
+     * the selection reaches into it. In the same pass as the rest of the group's
+     * fade, so it is one retarget per update, never two. Marks filtered by the
+     * selection (no group) are skipped: they never dim.
+     */
+    #lightOthers(index, ids, count) {
+        if (this.#others.size === 0 || index < 0)
+            return;
+        let mask = this.#selectedMask;
+        if (mask.length < count)
+            mask = this.#selectedMask = new Uint8Array(count);
+        const selected = ids.length;
+        for (let i = 0; i < selected; i++)
+            mask[ids[i]] = 1;
+        for (const [otherId, entries] of this.#others) {
+            if (otherId >= count)
+                continue;
+            let lit = false;
+            for (const entry of entries.values()) {
+                if (entry.group !== index)
+                    continue;
+                for (const row of entry.rows) {
+                    for (let i = 0; i < row.ids.length && !lit; i++)
+                        lit = mask[row.ids[i]] === 1;
+                    if (lit)
+                        break;
+                }
+                if (lit)
+                    break;
+            }
+            if (lit)
+                ids.push(otherId);
+        }
+        // Unmark only what was marked: the selected ids, not the Others pushed after.
+        for (let i = 0; i < selected; i++)
+            mask[ids[i]] = 0;
+    }
+    /** Reused by #lightOthers: 1 at each selected id, 0 elsewhere between calls. */
+    #selectedMask = new Uint8Array(0);
 }

package/dist/query-engine/FilterGroup.svelte.d.ts

@@ -52,6 +52,16 @@ export interface SourceOpts extends SourceRegistration {
      * once per write and stored on the clause.
      */
     augment?: (value: unknown) => FilterSchema | null;
+    /**
+     * The source's clause was removed by someone other than this registration:
+     * `clearAll`, a `clearSource` from outside (a filter pill's remove button), or
+     * another registration under the same id clearing it. A control that keeps what
+     * it drew (a brush's rectangle) resets it here, because it reads no clause. Not
+     * called for the registration's own `clear()` or `destroy()`, which it initiated;
+     * and a control that clears itself from here does not loop, since the clause is
+     * already gone.
+     */
+    onCleared?: () => void;
 }
 export interface SourceHandle {
     /** Write the source's clause. */
@@ -81,6 +91,13 @@ export interface ToggleHandle extends Omit<SourceHandle, 'update'> {
     toggle(tuple: unknown[], multi: boolean, total?: number): void;
     /** Select exactly these tuples; empty clears. */
     set(tuples: unknown[][]): void;
+    /**
+     * A click on Other bucket `otherId` (from facet cell `facetId`, or null):
+     * selects, adds or takes back the categories it holds, as its field's
+     * registry says (FieldActivity.otherClick). A one-field toggle only: a
+     * bucket names no value in a tuple of several.
+     */
+    toggleOther(otherId: number, facetId: number | null, multi: boolean): void;
 }
 export declare class FilterGroup {
     #private;
@@ -136,7 +153,12 @@ export declare class FilterGroup {
     /**
      * Remove a source's clause. Re-queries only when there was a clause to
      * remove: an unmount or a clear with nothing selected changes no mark's data.
+     *
+     * The source's registrations are told (`onCleared`) so a control that drew the
+     * selection resets it, all of them from outside, and all but `by` when a
+     * registration is the one clearing (it has reset itself).
      */
-    clearSource(sourceId: string): void;
+    clearSource(sourceId: string, by?: SourceOpts): void;
+    /** Remove every clause, and tell the controls that drew them (`onCleared`). */
     clearAll(): void;
 }