@kanzo-tech/ui 0.0.1-alpha

package/dist/charts/chart-inputs.d.ts

@@ -0,0 +1,174 @@
+import { ReactNode, default as React } from 'react';
+import { ark } from '@ark-ui/react/factory';
+import { MosaicClient, Selection, SelectionClause } from '@uwdata/mosaic-core';
+import { Query, FilterExpr } from '@uwdata/mosaic-sql';
+import { ChartQueryRow as QueryRow } from './query-client.js';
+/**
+ * Mosaic **inputs** — controls that publish into a `Selection` without being charts.
+ *
+ * Unlike marks and interactors, these are real DOM parts (`ark.*`, `data-slot`, forwarded props),
+ * not inert descriptors: they carry no `__chart` static and belong *outside* `<ChartRoot>`. What
+ * makes them Mosaic and not just a styled `<select>` is that each one is a `MosaicClient`: it
+ * declares a `query()` for the values it needs (grouped counts, distinct values, a numeric extent),
+ * the coordinator answers it, and the control publishes `clausePoints` / `clauseMatch` /
+ * `clauseInterval` back into the selection the charts filter by.
+ *
+ * The vgplot equivalents (`vg.menu`, `vg.search`, `vg.slider`) build raw HTML. These use our
+ * controls, our tokens and our accessibility, and are controllable *and* observable: an external
+ * change to the selection flows back into the widget.
+ */
+export interface MosaicInputOptions<T> {
+    /** Filters the widget's own lookup query. `null` = the full relation. */
+    filterBy: Selection | null;
+    /** Where the widget publishes. `null` = nowhere. */
+    as: Selection | null;
+    /** The lookup query, or `null` when there is nothing to ask the coordinator for. */
+    build: (filter: FilterExpr) => Query | null;
+    /** Rebuilds the client — and re-runs the lookup — when any entry changes. */
+    deps: readonly unknown[];
+    clause: (source: MosaicClient, value: T | undefined) => SelectionClause;
+    /** The representative value of the warm-up clause published on hover/focus. */
+    activateValue: T;
+    /** Reads the widget's own clause value back out of the selection. Defaults to an identity cast. */
+    decode?: (value: unknown) => T;
+}
+export interface MosaicInputState<T> {
+    /** Lookup rows, or `null` while the query is in flight (or when there is no query). */
+    rows: readonly QueryRow[] | null;
+    /** The value this widget currently holds in the selection — its observable half. */
+    selected: T | undefined;
+    publish: (value: T | undefined) => void;
+    activate: () => void;
+}
+/**
+ * The conversation with Mosaic that every input in this file has: a lookup query that re-runs under
+ * the crossfilter, a clause published with `source` set so a control never filters itself, and a
+ * warm-up so the first interaction is not the first query.
+ *
+ * Exported because the three controls here are surfaces over it, not the only surfaces it allows —
+ * a chip row, a segmented switch or a map lasso is the same conversation with different chrome, and
+ * without this the alternative is reimplementing it.
+ */
+export declare function useMosaicInput<T>(options: MosaicInputOptions<T>): MosaicInputState<T>;
+interface SelectionProps {
+    /** Where the control publishes. Defaults to the provider's crossfilter; `null` = nowhere. */
+    as?: Selection | null;
+    /** What the control's own lookup filters by. Defaults to the crossfilter; `null` = unfiltered. */
+    filterBy?: Selection | null;
+}
+type ControlSize = "sm" | "md" | "lg";
+/** An explicit entry. Bare values work too — they are labelled by `format`. */
+export interface ChartFilterOption {
+    value: unknown;
+    label?: string;
+    icon?: React.ComponentType<{
+        className?: string;
+    }>;
+}
+export interface ChartFilterProps extends Omit<React.ComponentProps<typeof ark.div>, "defaultValue">, SelectionProps {
+    /** The relation the values and their counts come from. */
+    table?: string;
+    /** The column grouped by. */
+    column?: string;
+    /** The column named in the published clause. Defaults to `column`. */
+    field?: string;
+    /** Explicit options — a literal value or a `{ value, label, icon }` object. Skips the lookup. */
+    options?: readonly unknown[];
+    /** Labels an option value that carries no explicit label. */
+    format?: (value: unknown) => string;
+    /** Trigger label. Defaults to `column`. */
+    label?: ReactNode;
+    /** Tick any number of values (an `IN` list). `false` keeps at most one ticked. */
+    multiple?: boolean;
+    /** Published once, when the control first connects. A bare value or an array of them. */
+    defaultValue?: unknown;
+    /** Most-frequent values kept; past this the list says so rather than rendering the tail. */
+    limit?: number;
+    /**
+     * Draw a filter field above the values.
+     *
+     * It narrows **the fetched page** — the `limit` most frequent values this control asked for — and
+     * runs no query of its own. When the page is truncated the note and the no-match message say so,
+     * because a field that answers "no matching values" about a database it never asked is worse than
+     * no field. Searching the column itself is `ChartSearch`, which publishes a match clause.
+     *
+     * @default false
+     */
+    searchable?: boolean;
+    disabled?: boolean;
+    size?: ControlSize;
+    /** Class for the trigger; `className` styles the wrapper. */
+    controlClassName?: string;
+}
+/**
+ * A facet filter over a column's values, publishing a **points** clause — the same `FacetFilter`
+ * surface as the table's, so a dashboard has one filter idiom rather than two.
+ *
+ * The values are a query, not a prop: the control connects as a Mosaic client and asks for
+ * `SELECT <column>, count(*) … GROUP BY <column>` filtered by `filterBy`. The counts therefore
+ * react to the *other* filters but not to this one — a crossfilter resolver drops a clause when it
+ * builds the predicate for the clause's own source, and `clausePoints` tags the clause with this
+ * client. (A non-crossfilter `filterBy` has no such exemption and would count itself.)
+ */
+export declare function ChartFilter(props: ChartFilterProps): React.JSX.Element;
+export interface ChartSearchProps extends Omit<React.ComponentProps<typeof ark.div>, "defaultValue">, SelectionProps {
+    /** The relation the autocomplete values come from. */
+    table?: string;
+    /** The column to search. */
+    column?: string;
+    /** The column named in the published clause. Defaults to `column`. */
+    field?: string;
+    /** Where the query string has to appear. */
+    type?: "contains" | "prefix" | "suffix" | "regexp";
+    caseSensitive?: boolean;
+    label?: ReactNode;
+    placeholder?: string;
+    /** ms of quiet before publishing. `0` publishes on every keystroke, as vgplot does. */
+    debounce?: number;
+    /** Distinct values offered as a native autocomplete list. `0` skips the lookup entirely. */
+    autocompleteLimit?: number;
+    defaultValue?: string;
+    disabled?: boolean;
+    size?: ControlSize;
+    /** Class for the control; `className` styles the wrapper. */
+    controlClassName?: string;
+}
+/**
+ * A text box publishing a **match** clause (`contains` / `prefix` / `suffix` / `regexp`).
+ *
+ * Every keystroke is a query, so the publish is debounced by default. The distinct values of the
+ * column feed a native `<datalist>`, exactly as vgplot's `search` does — and, as there, the list
+ * narrows with the query, since a match clause does not exempt its own client from the crossfilter.
+ */
+export declare function ChartSearch(props: ChartSearchProps): React.JSX.Element;
+export interface ChartSliderProps extends Omit<React.ComponentProps<typeof ark.div>, "defaultValue">, SelectionProps {
+    /** The relation the extent comes from, when `min`/`max` are not both given. */
+    table?: string;
+    /** The numeric column. */
+    column?: string;
+    /** The column named in the published clause. Defaults to `column`. */
+    field?: string;
+    /**
+     * `point` publishes an equality clause for one thumb; `interval` publishes a two-thumb range.
+     * (vgplot's slider only ever offers `[min, value]`; ours brushes a real interval.)
+     */
+    select?: "point" | "interval";
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Published once, when the control first connects. */
+    defaultValue?: number | readonly [number, number];
+    label?: ReactNode;
+    /** Show the current value beside the label. */
+    showValue?: boolean;
+    disabled?: boolean;
+}
+/**
+ * A slider over a numeric column, publishing a **point** or **interval** clause.
+ *
+ * The extent is a query when `min`/`max` are not both given: `SELECT min(col), max(col)`, answered
+ * by the coordinator. A `Skeleton` shaped like the track holds the space until it arrives.
+ */
+export declare function ChartSlider(props: ChartSliderProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=chart-inputs.d.ts.map

package/dist/charts/chart-inputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-inputs.d.ts","sourceRoot":"","sources":["../../src/charts/chart-inputs.tsx"],"names":[],"mappings":"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"}

package/dist/charts/chart-inputs.js

@@ -0,0 +1,382 @@
+"use client";
+import { jsxs as A, jsx as C } from "react/jsx-runtime";
+import { useRef as B, useEffect as N, useMemo as ne, useState as _, useCallback as Z } from "react";
+import { ark as re } from "@ark-ui/react/factory";
+import { clausePoints as le, clausePoint as oe, clauseMatch as ie, clauseInterval as ce } from "@uwdata/mosaic-core";
+import { Query as G, count as ee, desc as se, max as ae, min as ue } from "@uwdata/mosaic-sql";
+import { useListCollection as me } from "@ark-ui/react/collection";
+import { useFilter as de } from "@ark-ui/react/locale";
+import { cn as J } from "../lib/cn.js";
+import { Combobox as fe, ComboboxInput as he, ComboboxContent as pe, ComboboxEmpty as ve, ComboboxItem as be } from "../simples/combobox.js";
+import { FacetFilter as ge } from "../simples/FacetFilter.js";
+import { Field as ye, FieldLabel as xe } from "../simples/field.js";
+import { Input as Ce } from "../simples/input.js";
+import { Skeleton as Ne } from "../simples/skeleton.js";
+import { Slider as Se, SliderLabel as Ve, SliderValue as we } from "../simples/slider.js";
+import { useMosaic as q } from "./mosaic-provider.js";
+import { ChartQueryClient as Fe } from "./query-client.js";
+function W(t) {
+  const { filterBy: r, as: e, deps: i } = t, { coordinator: a } = q(), d = B(t);
+  d.current = t;
+  const p = B(null), [b, x] = _(null), [y, m] = _(null), [u, v] = _(void 0);
+  N(() => {
+    const s = new Fe(
+      r ?? void 0,
+      (h) => d.current.build(h),
+      m
+    );
+    return p.current = s, m(null), x(s), a.connect(s), () => {
+      p.current = null, a.disconnect(s);
+    };
+  }, [a, r, ...i]), N(() => {
+    if (!e || !b) return;
+    const s = () => {
+      const h = e.valueFor(b), { decode: E } = d.current;
+      v(h === void 0 ? void 0 : E ? E(h) : h);
+    };
+    return s(), e.addEventListener("value", s), () => {
+      e.removeEventListener("value", s), e.valueFor(b) !== void 0 && e.update(d.current.clause(b, void 0));
+    };
+  }, [e, b]);
+  const S = Z(
+    (s) => {
+      v(s);
+      const h = p.current;
+      e && h && e.update(d.current.clause(h, s));
+    },
+    [e]
+  ), k = Z(() => {
+    const s = p.current;
+    e && s && e.activate(d.current.clause(s, d.current.activateValue));
+  }, [e]);
+  return { rows: y, selected: u, publish: S, activate: k };
+}
+function X(t, r) {
+  return {
+    onFocus: (e) => {
+      var i;
+      (i = r.onFocus) == null || i.call(r, e), t();
+    },
+    onPointerEnter: (e) => {
+      var i;
+      (i = r.onPointerEnter) == null || i.call(r, e), e.buttons || t();
+    }
+  };
+}
+const Ie = 50;
+function Be(t) {
+  return typeof t == "object" && t !== null && !Array.isArray(t) && "value" in t;
+}
+function ke(t) {
+  return String(t ?? "");
+}
+function Ee(t) {
+  if (typeof t == "number") return t;
+  if (typeof t == "bigint") return Number(t);
+}
+function Le(t, r, e) {
+  if (t)
+    return e ? `Top ${r} values — the field searches these, not the column. Filter further for the rest.` : `Top ${r} values — filter further to see the rest.`;
+}
+function Te(t, r, e) {
+  return t ? t.map((i) => {
+    const a = Be(i) ? i : { value: i };
+    return {
+      key: String(a.value),
+      label: a.label ?? e(a.value),
+      raw: a.value,
+      icon: a.icon
+    };
+  }) : (r ?? []).map((i) => ({
+    key: String(i.value),
+    label: e(i.value),
+    raw: i.value,
+    count: Ee(i.count)
+  }));
+}
+function We(t) {
+  const {
+    table: r,
+    column: e,
+    field: i = e,
+    as: a,
+    filterBy: d,
+    options: p,
+    format: b = ke,
+    label: x = e,
+    multiple: y = !0,
+    defaultValue: m,
+    limit: u = Ie,
+    searchable: v = !1,
+    disabled: S,
+    size: k = "md",
+    className: s,
+    controlClassName: h,
+    children: E,
+    slot: P,
+    ...Q
+  } = t, { crossfilter: j } = q(), R = a === void 0 ? j : a, K = d === void 0 ? j : d, g = p === void 0 && !!(r && e), { rows: V, selected: L, publish: w, activate: f } = W({
+    as: R,
+    filterBy: K,
+    deps: [r, e, g, u],
+    activateValue: [0],
+    build: (n) => g ? G.from(r).select({ value: e, count: ee() }).where(n).groupby(e).orderby(se(ee()), e).limit(u + 1) : null,
+    clause: (n, c) => y ? le([i], c == null ? void 0 : c.map((H) => [H]), { source: n }) : oe(i, c == null ? void 0 : c[0], { source: n }),
+    decode: (n) => y ? n.map((c) => c[0]) : [n]
+  }), T = B(!1);
+  N(() => {
+    T.current || m === void 0 || (T.current = !0, w(Array.isArray(m) ? m : [m]));
+  }, [m, w]);
+  const M = L ?? [], F = Te(p, V, b), I = F.length > u, O = I ? F.slice(0, u) : F, $ = O.map((n) => ({
+    count: n.count,
+    icon: n.icon,
+    label: n.label,
+    value: n.key
+  })), l = new Map(O.map((n) => [n.key, n.raw]));
+  for (const n of M) l.set(String(n), n);
+  return /* @__PURE__ */ A(
+    re.div,
+    {
+      className: J("w-fit", s),
+      ...Q,
+      ...X(f, t),
+      "data-slot": P ?? "chart-filter",
+      children: [
+        /* @__PURE__ */ C(
+          ge,
+          {
+            className: h,
+            slot: "chart-filter-trigger",
+            disabled: S,
+            empty: g && V === null ? "Loading…" : "No values.",
+            items: $,
+            label: x,
+            multiple: y,
+            note: Le(I, u, v),
+            onValueChange: (n) => w(n.map((c) => l.has(c) ? l.get(c) : c)),
+            searchEmpty: I ? `No match among the top ${u} values.` : void 0,
+            searchable: v,
+            size: k,
+            value: M.map((n) => String(n))
+          }
+        ),
+        E
+      ]
+    }
+  );
+}
+function Xe(t) {
+  const {
+    table: r,
+    column: e,
+    field: i = e,
+    as: a,
+    filterBy: d,
+    type: p = "contains",
+    caseSensitive: b = !1,
+    label: x,
+    placeholder: y = "Search…",
+    debounce: m = 200,
+    autocompleteLimit: u = 100,
+    defaultValue: v,
+    disabled: S,
+    size: k = "md",
+    className: s,
+    controlClassName: h,
+    children: E,
+    slot: P,
+    ...Q
+  } = t, { crossfilter: j } = q(), R = a === void 0 ? j : a, K = d === void 0 ? j : d, g = u > 0 && !!(r && e), { rows: V, selected: L, publish: w, activate: f } = W({
+    as: R,
+    filterBy: K,
+    deps: [r, e, g, u],
+    activateValue: "",
+    build: (o) => g ? G.from(r).select({ value: e }).distinct().where(o).orderby(e).limit(u) : null,
+    clause: (o, z) => ie(i, z ?? null, { source: o, method: p, caseSensitive: b })
+  }), T = ne(
+    () => (V ?? []).map((o) => ({ label: String(o.value), value: String(o.value) })),
+    [V]
+  ), M = T.length >= u, { contains: F } = de({ sensitivity: "base" }), { collection: I, filter: O, set: $ } = me({ filter: F, initialItems: [] }), l = T.map((o) => o.value).join("\0");
+  N(() => {
+    $(T);
+  }, [l, $]);
+  const [n, c] = _(v ?? ""), H = B(v ?? ""), U = B(null);
+  N(() => {
+    const o = L ?? "";
+    o !== H.current && (H.current = o, c(o));
+  }, [L]), N(() => () => {
+    U.current && clearTimeout(U.current);
+  }, []);
+  const Y = B(!1);
+  N(() => {
+    Y.current || !v || (Y.current = !0, w(v));
+  }, [v, w]);
+  const D = (o) => {
+    c(o), U.current && clearTimeout(U.current);
+    const z = () => {
+      H.current = o, w(o || void 0);
+    };
+    m > 0 ? U.current = setTimeout(z, m) : z();
+  };
+  return /* @__PURE__ */ A(
+    ye,
+    {
+      className: J("w-fit min-w-48 gap-1.5", s),
+      disabled: S,
+      ...Q,
+      ...X(f, t),
+      slot: P ?? "chart-search",
+      children: [
+        x ? /* @__PURE__ */ C(xe, { children: x }) : null,
+        g ? (
+          // `allowCustomValue`, because this control is a FILTER and not a picker: what it publishes
+          // is a match clause over whatever you typed, and the list only ever offered completions.
+          // A `<datalist>` was the honest first answer to that and a poor one — unstyleable, different
+          // in every browser, no empty state, and silent about its own cap. Same clause, same
+          // debounce; only the surface changed.
+          /* @__PURE__ */ A(
+            fe,
+            {
+              allowCustomValue: !0,
+              collection: I,
+              slot: "chart-search-list",
+              disabled: S,
+              inputValue: n,
+              onInputValueChange: (o) => {
+                O(o.inputValue), D(o.inputValue);
+              },
+              onValueChange: (o) => {
+                const z = o.value[0];
+                z !== void 0 && D(z);
+              },
+              children: [
+                /* @__PURE__ */ C(he, { className: h, placeholder: y, size: k }),
+                /* @__PURE__ */ A(pe, { children: [
+                  /* @__PURE__ */ C(ve, { children: "No matching values." }),
+                  I.items.map((o) => /* @__PURE__ */ C(be, { item: o, children: o.label }, o.value)),
+                  M ? /* @__PURE__ */ A("p", { className: "border-t px-2 py-1.5 text-muted-foreground text-xs", children: [
+                    "First ",
+                    u,
+                    ". Keep typing to narrow it."
+                  ] }) : null
+                ] })
+              ]
+            }
+          )
+        ) : /* @__PURE__ */ C(
+          Ce,
+          {
+            className: h,
+            disabled: S,
+            onChange: (o) => D(o.target.value),
+            placeholder: y,
+            size: k,
+            type: "search",
+            value: n
+          }
+        ),
+        E
+      ]
+    }
+  );
+}
+function Me(t, r) {
+  return Number.isInteger(t) && Number.isInteger(r) ? 1 : (r - t) / 500 || 1;
+}
+function Ye(t) {
+  const {
+    table: r,
+    column: e,
+    field: i = e,
+    as: a,
+    filterBy: d,
+    select: p = "point",
+    min: b,
+    max: x,
+    step: y,
+    defaultValue: m,
+    label: u,
+    showValue: v = !0,
+    disabled: S,
+    className: k,
+    children: s,
+    slot: h,
+    ...E
+  } = t, { crossfilter: P } = q(), Q = a === void 0 ? P : a, j = d === void 0 ? P : d, R = (b === void 0 || x === void 0) && !!(r && e), K = B(1), { rows: g, selected: V, publish: L, activate: w } = W({
+    as: Q,
+    filterBy: j,
+    deps: [r, e, R],
+    activateValue: p === "interval" ? [0, 0] : 0,
+    build: (l) => R ? G.select({ min: ue(e), max: ae(e) }).from(r).where(l) : null,
+    clause: (l, n) => {
+      if (p !== "interval") return oe(i, n, { source: l });
+      const c = n;
+      return ce(i, c ?? null, {
+        source: l,
+        bin: "ceil",
+        scale: c ? { type: "identity", domain: c } : void 0,
+        pixelSize: K.current
+      });
+    }
+  }), f = ne(() => {
+    const l = g == null ? void 0 : g[0], n = b ?? (typeof (l == null ? void 0 : l.min) == "number" ? l.min : void 0), c = x ?? (typeof (l == null ? void 0 : l.max) == "number" ? l.max : void 0);
+    return n === void 0 || c === void 0 ? null : { min: n, max: c, step: y ?? Me(n, c) };
+  }, [g, b, x, y]);
+  N(() => {
+    K.current = (f == null ? void 0 : f.step) ?? 1;
+  }, [f]);
+  const [T, M] = _(
+    m === void 0 ? null : [...te(m)]
+  ), F = B(!1);
+  N(() => {
+    if (V !== void 0) {
+      F.current = !0, M([...te(V)]);
+      return;
+    }
+    F.current && (F.current = !1, M(null));
+  }, [V]);
+  const I = B(!1);
+  N(() => {
+    I.current || m === void 0 || (I.current = !0, L(m));
+  }, [m, L]);
+  const O = (l) => {
+    M(l), L(p === "interval" ? [l[0], l[1]] : l[0]);
+  }, $ = T ?? (f ? p === "interval" ? [f.min, f.max] : [f.min] : null);
+  return /* @__PURE__ */ A(
+    re.div,
+    {
+      className: J("flex w-full min-w-48 flex-col gap-1.5", k),
+      ...E,
+      ...X(w, t),
+      "data-slot": h ?? "chart-slider",
+      children: [
+        f && $ ? /* @__PURE__ */ C(
+          Se,
+          {
+            disabled: S,
+            max: f.max,
+            min: f.min,
+            onValueChange: (l) => O(l.value),
+            step: f.step,
+            value: $,
+            children: u || v ? /* @__PURE__ */ A("div", { className: "flex items-center", children: [
+              u ? /* @__PURE__ */ C(Ve, { children: u }) : null,
+              v ? /* @__PURE__ */ C(we, {}) : null
+            ] }) : null
+          }
+        ) : /* @__PURE__ */ C(Ne, { className: "h-2 w-full rounded-full" }),
+        s
+      ]
+    }
+  );
+}
+function te(t) {
+  return typeof t == "number" ? [t] : t;
+}
+export {
+  We as ChartFilter,
+  Xe as ChartSearch,
+  Ye as ChartSlider,
+  W as useMosaicInput
+};
+//# sourceMappingURL=chart-inputs.js.map

package/dist/charts/chart-inputs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-inputs.js","sources":["../../src/charts/chart-inputs.tsx"],"sourcesContent":["\"use client\";\n\nimport { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from \"react\";\nimport type React from \"react\";\nimport { ark } from \"@ark-ui/react/factory\";\nimport {\n  clauseInterval,\n  clauseMatch,\n  clausePoint,\n  clausePoints,\n  MosaicClient,\n  type Selection,\n  type SelectionClause,\n} from \"@uwdata/mosaic-core\";\nimport {\n  count as sqlCount,\n  desc as sqlDesc,\n  max as sqlMax,\n  min as sqlMin,\n  Query,\n  type FilterExpr,\n} from \"@uwdata/mosaic-sql\";\nimport { useListCollection } from \"@ark-ui/react/collection\";\nimport { useFilter } from \"@ark-ui/react/locale\";\nimport { cn } from \"../lib/cn.js\";\nimport {\n  Combobox,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxInput,\n  ComboboxItem,\n} from \"../simples/combobox.js\";\nimport { FacetFilter, type FacetFilterItem } from \"../simples/FacetFilter.js\";\nimport { Field, FieldLabel } from \"../simples/field.js\";\nimport { Input } from \"../simples/input.js\";\nimport { Skeleton } from \"../simples/skeleton.js\";\nimport { Slider, SliderLabel, SliderValue } from \"../simples/slider.js\";\nimport { useMosaic } from \"./mosaic-provider.js\";\nimport { ChartQueryClient, type ChartQueryRow as QueryRow } from \"./query-client.js\";\n\n/**\n * Mosaic **inputs** — controls that publish into a `Selection` without being charts.\n *\n * Unlike marks and interactors, these are real DOM parts (`ark.*`, `data-slot`, forwarded props),\n * not inert descriptors: they carry no `__chart` static and belong *outside* `<ChartRoot>`. What\n * makes them Mosaic and not just a styled `<select>` is that each one is a `MosaicClient`: it\n * declares a `query()` for the values it needs (grouped counts, distinct values, a numeric extent),\n * the coordinator answers it, and the control publishes `clausePoints` / `clauseMatch` /\n * `clauseInterval` back into the selection the charts filter by.\n *\n * The vgplot equivalents (`vg.menu`, `vg.search`, `vg.slider`) build raw HTML. These use our\n * controls, our tokens and our accessibility, and are controllable *and* observable: an external\n * change to the selection flows back into the widget.\n */\n\n\nexport interface MosaicInputOptions<T> {\n  /** Filters the widget's own lookup query. `null` = the full relation. */\n  filterBy: Selection | null;\n  /** Where the widget publishes. `null` = nowhere. */\n  as: Selection | null;\n  /** The lookup query, or `null` when there is nothing to ask the coordinator for. */\n  build: (filter: FilterExpr) => Query | null;\n  /** Rebuilds the client — and re-runs the lookup — when any entry changes. */\n  deps: readonly unknown[];\n  clause: (source: MosaicClient, value: T | undefined) => SelectionClause;\n  /** The representative value of the warm-up clause published on hover/focus. */\n  activateValue: T;\n  /** Reads the widget's own clause value back out of the selection. Defaults to an identity cast. */\n  decode?: (value: unknown) => T;\n}\n\nexport interface MosaicInputState<T> {\n  /** Lookup rows, or `null` while the query is in flight (or when there is no query). */\n  rows: readonly QueryRow[] | null;\n  /** The value this widget currently holds in the selection — its observable half. */\n  selected: T | undefined;\n  publish: (value: T | undefined) => void;\n  activate: () => void;\n}\n\n/**\n * The conversation with Mosaic that every input in this file has: a lookup query that re-runs under\n * the crossfilter, a clause published with `source` set so a control never filters itself, and a\n * warm-up so the first interaction is not the first query.\n *\n * Exported because the three controls here are surfaces over it, not the only surfaces it allows —\n * a chip row, a segmented switch or a map lasso is the same conversation with different chrome, and\n * without this the alternative is reimplementing it.\n */\nexport function useMosaicInput<T>(\n  options: MosaicInputOptions<T>\n): MosaicInputState<T> {\n  const { filterBy, as, deps } = options;\n  const { coordinator } = useMosaic();\n  const latest = useRef(options);\n  latest.current = options;\n\n  const clientRef = useRef<ChartQueryClient | null>(null);\n  const [client, setClient] = useState<ChartQueryClient | null>(null);\n  const [rows, setRows] = useState<readonly QueryRow[] | null>(null);\n  const [selected, setSelected] = useState<T | undefined>(undefined);\n\n  useEffect(() => {\n    const instance = new ChartQueryClient(\n      filterBy ?? undefined,\n      (filter) => latest.current.build(filter),\n      setRows,\n    );\n    clientRef.current = instance;\n    setRows(null);\n    setClient(instance);\n    coordinator.connect(instance);\n    return () => {\n      clientRef.current = null;\n      coordinator.disconnect(instance);\n    };\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [coordinator, filterBy, ...deps]);\n\n  useEffect(() => {\n    if (!as || !client) return;\n    const sync = () => {\n      const raw = as.valueFor(client);\n      const { decode } = latest.current;\n      setSelected(raw === undefined ? undefined : decode ? decode(raw) : (raw as T));\n    };\n    sync();\n    as.addEventListener(\"value\", sync);\n    return () => {\n      as.removeEventListener(\"value\", sync);\n      // `Selection.remove` returns a *clone*; the live way to retract a clause is to publish an\n      // empty one, which the resolver drops because its predicate is null.\n      if (as.valueFor(client) !== undefined) as.update(latest.current.clause(client, undefined));\n    };\n  }, [as, client]);\n\n  const publish = useCallback(\n    (value: T | undefined) => {\n      setSelected(value);\n      const instance = clientRef.current;\n      if (as && instance) as.update(latest.current.clause(instance, value));\n    },\n    [as],\n  );\n\n  const activate = useCallback(() => {\n    const instance = clientRef.current;\n    if (as && instance) as.activate(latest.current.clause(instance, latest.current.activateValue));\n  }, [as]);\n\n  return { rows, selected, publish, activate };\n}\n\n/** vgplot's inputs warm the selection on hover/focus; ours do it on the wrapper, and compose. */\nfunction warmUpHandlers(\n  activate: () => void,\n  props: Pick<React.ComponentProps<typeof ark.div>, \"onFocus\" | \"onPointerEnter\">,\n) {\n  return {\n    onFocus: (event: React.FocusEvent<HTMLDivElement>) => {\n      props.onFocus?.(event);\n      activate();\n    },\n    onPointerEnter: (event: React.PointerEvent<HTMLDivElement>) => {\n      props.onPointerEnter?.(event);\n      if (!event.buttons) activate();\n    },\n  };\n}\n\ninterface SelectionProps {\n  /** Where the control publishes. Defaults to the provider's crossfilter; `null` = nowhere. */\n  as?: Selection | null;\n  /** What the control's own lookup filters by. Defaults to the crossfilter; `null` = unfiltered. */\n  filterBy?: Selection | null;\n}\n\ntype ControlSize = \"sm\" | \"md\" | \"lg\";\n\n// ── ChartFilter ──────────────────────────────────────────────────────────────\n\n/** An explicit entry. Bare values work too — they are labelled by `format`. */\nexport interface ChartFilterOption {\n  value: unknown;\n  label?: string;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\nexport interface ChartFilterProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"defaultValue\">,\n    SelectionProps {\n  /** The relation the values and their counts come from. */\n  table?: string;\n  /** The column grouped by. */\n  column?: string;\n  /** The column named in the published clause. Defaults to `column`. */\n  field?: string;\n  /** Explicit options — a literal value or a `{ value, label, icon }` object. Skips the lookup. */\n  options?: readonly unknown[];\n  /** Labels an option value that carries no explicit label. */\n  format?: (value: unknown) => string;\n  /** Trigger label. Defaults to `column`. */\n  label?: ReactNode;\n  /** Tick any number of values (an `IN` list). `false` keeps at most one ticked. */\n  multiple?: boolean;\n  /** Published once, when the control first connects. A bare value or an array of them. */\n  defaultValue?: unknown;\n  /** Most-frequent values kept; past this the list says so rather than rendering the tail. */\n  limit?: number;\n  /**\n   * Draw a filter field above the values.\n   *\n   * It narrows **the fetched page** — the `limit` most frequent values this control asked for — and\n   * runs no query of its own. When the page is truncated the note and the no-match message say so,\n   * because a field that answers \"no matching values\" about a database it never asked is worse than\n   * no field. Searching the column itself is `ChartSearch`, which publishes a match clause.\n   *\n   * @default false\n   */\n  searchable?: boolean;\n  disabled?: boolean;\n  size?: ControlSize;\n  /** Class for the trigger; `className` styles the wrapper. */\n  controlClassName?: string;\n}\n\n/**\n * A `GROUP BY` over a high-cardinality column can answer with thousands of rows, and neither the\n * wire nor the DOM wants them. The lookup is capped at the *most frequent* values — the ones a\n * facet is for — and the control owns up to the truncation instead of pretending the tail is\n * absent. Needle-in-a-haystack lookup is `ChartSearch`'s job, not a facet filter's.\n */\nconst FILTER_LIMIT = 50;\n\ninterface FilterEntry {\n  key: string;\n  label: string;\n  raw: unknown;\n  count?: number;\n  icon?: React.ComponentType<{ className?: string }>;\n}\n\nfunction isOptionObject(value: unknown): value is ChartFilterOption {\n  return typeof value === \"object\" && value !== null && !Array.isArray(value) && \"value\" in value;\n}\n\nfunction defaultFormat(value: unknown): string {\n  return String(value ?? \"\");\n}\n\n/** DuckDB answers a `count(*)` with a BigInt over the WASM bridge. */\nfunction toCount(value: unknown): number | undefined {\n  if (typeof value === \"number\") return value;\n  if (typeof value === \"bigint\") return Number(value);\n  return undefined;\n}\n\nfunction truncationNote(truncated: boolean, limit: number, searchable: boolean) {\n  if (!truncated) return undefined;\n  return searchable\n    ? `Top ${limit} values — the field searches these, not the column. Filter further for the rest.`\n    : `Top ${limit} values — filter further to see the rest.`;\n}\n\nfunction filterEntries(\n  options: readonly unknown[] | undefined,\n  rows: readonly QueryRow[] | null,\n  format: (value: unknown) => string,\n): FilterEntry[] {\n  if (options) {\n    return options.map((entry) => {\n      const option = isOptionObject(entry) ? entry : { value: entry };\n      return {\n        key: String(option.value),\n        label: option.label ?? format(option.value),\n        raw: option.value,\n        icon: option.icon,\n      };\n    });\n  }\n  return (rows ?? []).map((row) => ({\n    key: String(row.value),\n    label: format(row.value),\n    raw: row.value,\n    count: toCount(row.count),\n  }));\n}\n\n/**\n * A facet filter over a column's values, publishing a **points** clause — the same `FacetFilter`\n * surface as the table's, so a dashboard has one filter idiom rather than two.\n *\n * The values are a query, not a prop: the control connects as a Mosaic client and asks for\n * `SELECT <column>, count(*) … GROUP BY <column>` filtered by `filterBy`. The counts therefore\n * react to the *other* filters but not to this one — a crossfilter resolver drops a clause when it\n * builds the predicate for the clause's own source, and `clausePoints` tags the clause with this\n * client. (A non-crossfilter `filterBy` has no such exemption and would count itself.)\n */\nexport function ChartFilter(props: ChartFilterProps) {\n  const {\n    table,\n    column,\n    field = column,\n    as,\n    filterBy,\n    options,\n    format = defaultFormat,\n    label = column,\n    multiple = true,\n    defaultValue,\n    limit = FILTER_LIMIT,\n    searchable = false,\n    disabled,\n    size = \"md\",\n    className,\n    controlClassName,\n    children,\n    slot,\n    ...rest\n  } = props;\n  const { crossfilter } = useMosaic();\n  const target = as === undefined ? crossfilter : as;\n  const source = filterBy === undefined ? crossfilter : filterBy;\n  const lookup = options === undefined && Boolean(table && column);\n\n  const { rows, selected, publish, activate } = useMosaicInput<readonly unknown[]>({\n    as: target,\n    filterBy: source,\n    deps: [table, column, lookup, limit],\n    activateValue: [0],\n    build: (filter) =>\n      lookup\n        ? Query.from(table as string)\n            .select({ value: column as string, count: sqlCount() })\n            .where(filter)\n            .groupby(column as string)\n            .orderby(sqlDesc(sqlCount()), column as string)\n            // One past the cap: enough to know the tail exists without asking a second question.\n            .limit(limit + 1)\n        : null,\n    clause: (client, value) =>\n      multiple\n        ? clausePoints([field as string], value?.map((entry) => [entry]), { source: client })\n        : clausePoint(field as string, value?.[0], { source: client }),\n    decode: (value) => (multiple ? (value as unknown[][]).map((tuple) => tuple[0]) : [value]),\n  });\n\n  const primed = useRef(false);\n  useEffect(() => {\n    if (primed.current || defaultValue === undefined) return;\n    primed.current = true;\n    publish(Array.isArray(defaultValue) ? (defaultValue as unknown[]) : [defaultValue]);\n  }, [defaultValue, publish]);\n\n  const values = selected ?? [];\n\n  const fetched = filterEntries(options, rows, format);\n  const truncated = fetched.length > limit;\n  const entries = truncated ? fetched.slice(0, limit) : fetched;\n  const items: FacetFilterItem[] = entries.map((entry) => ({\n    count: entry.count,\n    icon: entry.icon,\n    label: entry.label,\n    value: entry.key,\n  }));\n\n  // `FacetFilter` speaks strings; a clause carries the raw value the query answered with, so the\n  // way back from a ticked row to `alpha` / `3` / `true` is this map. The selected values are in it\n  // too: one of them may be a value the crossfilter has since faceted away, which `FacetFilter`\n  // keeps listed so it can still be unticked.\n  const raw = new Map<string, unknown>(entries.map((entry) => [entry.key, entry.raw]));\n  for (const value of values) raw.set(String(value), value);\n\n  return (\n    <ark.div\n      className={cn(\"w-fit\", className)}\n      {...rest}\n      {...warmUpHandlers(activate, props)}\n      data-slot={slot ?? \"chart-filter\"}\n    >\n      <FacetFilter\n        className={controlClassName}\n        slot=\"chart-filter-trigger\"\n        disabled={disabled}\n        empty={lookup && rows === null ? \"Loading…\" : \"No values.\"}\n        items={items}\n        label={label}\n        multiple={multiple}\n        // A search field over a truncated list is a half-truth unless it names its own scope, so\n        // both messages change when the tail was dropped: the field covers the fetched page, and a\n        // miss inside it says nothing about the column.\n        note={truncationNote(truncated, limit, searchable)}\n        onValueChange={(next) => publish(next.map((key) => (raw.has(key) ? raw.get(key) : key)))}\n        searchEmpty={truncated ? `No match among the top ${limit} values.` : undefined}\n        searchable={searchable}\n        size={size}\n        value={values.map((value) => String(value))}\n      />\n      {children}\n    </ark.div>\n  );\n}\n\n// ── ChartSearch ──────────────────────────────────────────────────────────────\n\nexport interface ChartSearchProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"defaultValue\">,\n    SelectionProps {\n  /** The relation the autocomplete values come from. */\n  table?: string;\n  /** The column to search. */\n  column?: string;\n  /** The column named in the published clause. Defaults to `column`. */\n  field?: string;\n  /** Where the query string has to appear. */\n  type?: \"contains\" | \"prefix\" | \"suffix\" | \"regexp\";\n  caseSensitive?: boolean;\n  label?: ReactNode;\n  placeholder?: string;\n  /** ms of quiet before publishing. `0` publishes on every keystroke, as vgplot does. */\n  debounce?: number;\n  /** Distinct values offered as a native autocomplete list. `0` skips the lookup entirely. */\n  autocompleteLimit?: number;\n  defaultValue?: string;\n  disabled?: boolean;\n  size?: ControlSize;\n  /** Class for the control; `className` styles the wrapper. */\n  controlClassName?: string;\n}\n\n/**\n * A text box publishing a **match** clause (`contains` / `prefix` / `suffix` / `regexp`).\n *\n * Every keystroke is a query, so the publish is debounced by default. The distinct values of the\n * column feed a native `<datalist>`, exactly as vgplot's `search` does — and, as there, the list\n * narrows with the query, since a match clause does not exempt its own client from the crossfilter.\n */\nexport function ChartSearch(props: ChartSearchProps) {\n  const {\n    table,\n    column,\n    field = column,\n    as,\n    filterBy,\n    type = \"contains\",\n    caseSensitive = false,\n    label,\n    placeholder = \"Search…\",\n    debounce = 200,\n    autocompleteLimit = 100,\n    defaultValue,\n    disabled,\n    size = \"md\",\n    className,\n    controlClassName,\n    children,\n    slot,\n    ...rest\n  } = props;\n  const { crossfilter } = useMosaic();\n  const target = as === undefined ? crossfilter : as;\n  const source = filterBy === undefined ? crossfilter : filterBy;\n  const lookup = autocompleteLimit > 0 && Boolean(table && column);\n\n  const { rows, selected, publish, activate } = useMosaicInput<string>({\n    as: target,\n    filterBy: source,\n    deps: [table, column, lookup, autocompleteLimit],\n    activateValue: \"\",\n    build: (filter) =>\n      lookup\n        ? Query.from(table as string)\n            .select({ value: column as string })\n            .distinct()\n            .where(filter)\n            .orderby(column as string)\n            .limit(autocompleteLimit)\n        : null,\n    clause: (client, value) =>\n      clauseMatch(field as string, value ?? null, { source: client, method: type, caseSensitive }),\n  });\n\n  // The completions, filtered in the browser. The query already asked the database for the\n  // `autocompleteLimit` distinct values of the column; narrowing THOSE as you type is not a second\n  // question, so it does not become a second query.\n  const items = useMemo(\n    () => (rows ?? []).map((row) => ({ label: String(row.value), value: String(row.value) })),\n    [rows],\n  );\n  const capped = items.length >= autocompleteLimit;\n  const { contains } = useFilter({ sensitivity: \"base\" });\n  const { collection, filter: completions, set } = useListCollection<{\n    label: string;\n    value: string;\n  }>({ filter: contains, initialItems: [] });\n\n  // Keyed on the values, not on the array: `rows` is a fresh array on every settled query, and\n  // setting the collection from an identity-unstable dep is a render loop.\n  const itemsKey = items.map((item) => item.value).join(\"\\u0000\");\n  useEffect(() => {\n    set(items);\n    // `items` is derived from `itemsKey`; depending on it directly is the loop above.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [itemsKey, set]);\n\n  const [text, setText] = useState(defaultValue ?? \"\");\n  const published = useRef(defaultValue ?? \"\");\n  const timer = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(() => {\n    const external = selected ?? \"\";\n    if (external !== published.current) {\n      published.current = external;\n      setText(external);\n    }\n  }, [selected]);\n\n  useEffect(() => () => { if (timer.current) clearTimeout(timer.current); }, []);\n\n  const primed = useRef(false);\n  useEffect(() => {\n    if (primed.current || !defaultValue) return;\n    primed.current = true;\n    publish(defaultValue);\n  }, [defaultValue, publish]);\n\n  const change = (next: string) => {\n    setText(next);\n    if (timer.current) clearTimeout(timer.current);\n    const send = () => {\n      published.current = next;\n      publish(next || undefined);\n    };\n    if (debounce > 0) timer.current = setTimeout(send, debounce);\n    else send();\n  };\n\n  return (\n    <Field\n      className={cn(\"w-fit min-w-48 gap-1.5\", className)}\n      disabled={disabled}\n      {...rest}\n      {...warmUpHandlers(activate, props)}\n      slot={slot ?? \"chart-search\"}\n    >\n      {label ? <FieldLabel>{label}</FieldLabel> : null}\n      {lookup ? (\n        // `allowCustomValue`, because this control is a FILTER and not a picker: what it publishes\n        // is a match clause over whatever you typed, and the list only ever offered completions.\n        // A `<datalist>` was the honest first answer to that and a poor one — unstyleable, different\n        // in every browser, no empty state, and silent about its own cap. Same clause, same\n        // debounce; only the surface changed.\n        <Combobox\n          allowCustomValue\n          collection={collection}\n          slot=\"chart-search-list\"\n          disabled={disabled}\n          inputValue={text}\n          onInputValueChange={(details) => {\n            completions(details.inputValue);\n            change(details.inputValue);\n          }}\n          onValueChange={(details) => {\n            const picked = details.value[0];\n            if (picked !== undefined) change(picked);\n          }}\n        >\n          <ComboboxInput className={controlClassName} placeholder={placeholder} size={size} />\n          <ComboboxContent>\n            <ComboboxEmpty>No matching values.</ComboboxEmpty>\n            {collection.items.map((item) => (\n              <ComboboxItem item={item} key={item.value}>\n                {item.label}\n              </ComboboxItem>\n            ))}\n            {/* The cap, said out loud. The datalist could not: it silently stopped at its limit,\n                so \"nothing else matches\" and \"nothing else was asked for\" looked identical. */}\n            {capped ? (\n              <p className=\"border-t px-2 py-1.5 text-muted-foreground text-xs\">\n                First {autocompleteLimit}. Keep typing to narrow it.\n              </p>\n            ) : null}\n          </ComboboxContent>\n        </Combobox>\n      ) : (\n        <Input\n          className={controlClassName}\n          disabled={disabled}\n          onChange={(event) => change(event.target.value)}\n          placeholder={placeholder}\n          size={size}\n          type=\"search\"\n          value={text}\n        />\n      )}\n      {children}\n    </Field>\n  );\n}\n\n// ── ChartSlider ──────────────────────────────────────────────────────────────\n\nexport interface ChartSliderProps\n  extends Omit<React.ComponentProps<typeof ark.div>, \"defaultValue\">,\n    SelectionProps {\n  /** The relation the extent comes from, when `min`/`max` are not both given. */\n  table?: string;\n  /** The numeric column. */\n  column?: string;\n  /** The column named in the published clause. Defaults to `column`. */\n  field?: string;\n  /**\n   * `point` publishes an equality clause for one thumb; `interval` publishes a two-thumb range.\n   * (vgplot's slider only ever offers `[min, value]`; ours brushes a real interval.)\n   */\n  select?: \"point\" | \"interval\";\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Published once, when the control first connects. */\n  defaultValue?: number | readonly [number, number];\n  label?: ReactNode;\n  /** Show the current value beside the label. */\n  showValue?: boolean;\n  disabled?: boolean;\n}\n\ntype SliderValueType = number | readonly [number, number];\n\ninterface SliderExtent {\n  min: number;\n  max: number;\n  step: number;\n}\n\n/** vgplot's `(max - min) / 500`, except an all-integer extent steps by 1 — 500 fractions of a count is noise. */\nfunction defaultStep(min: number, max: number): number {\n  if (Number.isInteger(min) && Number.isInteger(max)) return 1;\n  return (max - min) / 500 || 1;\n}\n\n/**\n * A slider over a numeric column, publishing a **point** or **interval** clause.\n *\n * The extent is a query when `min`/`max` are not both given: `SELECT min(col), max(col)`, answered\n * by the coordinator. A `Skeleton` shaped like the track holds the space until it arrives.\n */\nexport function ChartSlider(props: ChartSliderProps) {\n  const {\n    table,\n    column,\n    field = column,\n    as,\n    filterBy,\n    select = \"point\",\n    min,\n    max,\n    step,\n    defaultValue,\n    label,\n    showValue = true,\n    disabled,\n    className,\n    children,\n    slot,\n    ...rest\n  } = props;\n  const { crossfilter } = useMosaic();\n  const target = as === undefined ? crossfilter : as;\n  const source = filterBy === undefined ? crossfilter : filterBy;\n  const lookup = (min === undefined || max === undefined) && Boolean(table && column);\n  // The binning hint for the interval clause. A ref, not `extent` itself: reading the memo from\n  // the clause would make the widget's own row type circular.\n  const pixelSize = useRef(1);\n\n  const { rows, selected, publish, activate } = useMosaicInput<SliderValueType>({\n    as: target,\n    filterBy: source,\n    deps: [table, column, lookup],\n    activateValue: select === \"interval\" ? ([0, 0] as const) : 0,\n    build: (filter) =>\n      lookup\n        ? Query.select({ min: sqlMin(column as string), max: sqlMax(column as string) })\n            .from(table as string)\n            .where(filter)\n        : null,\n    clause: (client, value) => {\n      if (select !== \"interval\") return clausePoint(field as string, value, { source: client });\n      const domain = value as [number, number] | undefined;\n      return clauseInterval(field as string, domain ?? null, {\n        source: client,\n        bin: \"ceil\",\n        scale: domain ? { type: \"identity\", domain } : undefined,\n        pixelSize: pixelSize.current,\n      });\n    },\n  });\n\n  const extent = useMemo<SliderExtent | null>(() => {\n    const row = rows?.[0];\n    const low = min ?? (typeof row?.min === \"number\" ? row.min : undefined);\n    const high = max ?? (typeof row?.max === \"number\" ? row.max : undefined);\n    if (low === undefined || high === undefined) return null;\n    return { min: low, max: high, step: step ?? defaultStep(low, high) };\n  }, [rows, min, max, step]);\n\n  useEffect(() => {\n    pixelSize.current = extent?.step ?? 1;\n  }, [extent]);\n\n  const [values, setValues] = useState<number[] | null>(\n    defaultValue === undefined ? null : [...toValues(defaultValue)],\n  );\n  /** Distinguishes \"never published\" from \"published and then cleared\" — see the effect below. */\n  const held = useRef(false);\n\n  useEffect(() => {\n    if (selected !== undefined) {\n      held.current = true;\n      setValues([...toValues(selected)]);\n      return;\n    }\n    // The clause is gone: a `Selection.reset()`, a \"Clear filters\" button, another control\n    // retracting it. Fall back to the extent instead of leaving the thumbs where they were — a\n    // slider that still reads 5–22 while nothing is filtered is a control lying about the state,\n    // which is worse than one that never moved. Gated on `held` so the first render does not\n    // stomp on `defaultValue` before the priming effect has published it.\n    if (held.current) {\n      held.current = false;\n      setValues(null);\n    }\n  }, [selected]);\n\n  const primed = useRef(false);\n  useEffect(() => {\n    if (primed.current || defaultValue === undefined) return;\n    primed.current = true;\n    publish(defaultValue);\n  }, [defaultValue, publish]);\n\n  const change = (next: number[]) => {\n    setValues(next);\n    publish(select === \"interval\" ? [next[0] as number, next[1] as number] : (next[0] as number));\n  };\n\n  const shown = values ?? (extent ? (select === \"interval\" ? [extent.min, extent.max] : [extent.min]) : null);\n\n  return (\n    <ark.div\n      className={cn(\"flex w-full min-w-48 flex-col gap-1.5\", className)}\n      {...rest}\n      {...warmUpHandlers(activate, props)}\n      data-slot={slot ?? \"chart-slider\"}\n    >\n      {extent && shown ? (\n        <Slider\n          disabled={disabled}\n          max={extent.max}\n          min={extent.min}\n          onValueChange={(details) => change(details.value)}\n          step={extent.step}\n          value={shown}\n        >\n          {label || showValue ? (\n            <div className=\"flex items-center\">\n              {label ? <SliderLabel>{label}</SliderLabel> : null}\n              {showValue ? <SliderValue /> : null}\n            </div>\n          ) : null}\n        </Slider>\n      ) : (\n        <Skeleton className=\"h-2 w-full rounded-full\" />\n      )}\n      {children}\n    </ark.div>\n  );\n}\n\nfunction toValues(value: SliderValueType): readonly number[] {\n  return typeof value === \"number\" ? [value] : value;\n}\n"],"names":["min","max"],"mappings":";;;;;;;;;;;;;;;;;AA0FO;AAGL;AAGA;AAEA;AAKA;AACE;AAAqB;AACP;AAC2B;AACvC;AAEF;AAKE;AAC+B;AACjC;AAKA;AACA;AACE;AAEA;AAA6E;AAE/E;AAGE;AAGyF;AAC3F;AAGF;AAAgB;AAEZ;AACA;AACA;AAAoE;AACtE;AACG;AAIH;AACA;AAA6F;AAG/F;AACF;AAGA;AAIE;AAAO;;AAEH;AACA;AACF;;AAEE;AACoB;AACtB;AAEJ;AAgEA;AAUA;AACE;AACF;AAEA;AACE;AACF;AAGA;AACE;AACA;AAEF;AAEA;AACE;AACA;AAGF;AAEA;AAKE;AAEI;AACA;AAAO;AACmB;AACkB;AAC9B;AACC;AAAA;AAIe;AACX;AACE;AACd;AACe;AAE5B;AAYO;AACL;AAAM;AACJ;AACA;AACQ;AACR;AACA;AACA;AACS;AACD;AACG;AACX;AACQ;AACK;AACb;AACO;AACP;AACA;AACA;AACA;AACG;AAO4E;AAC3E;AACM;AACyB;AAClB;AAUX;AAI2D;AACsB;AAIzF;AACE;AAEkF;AAGpF;AAKyD;AAC1C;AACD;AACC;AACA;AAQf;AAEA;AACE;AAAK;AAAJ;AACiC;AAC5B;AAC8B;AACf;AAEnB;AAAA;AAAC;AAAA;AACY;AACN;AACL;AAC8C;AAC9C;AACA;AACA;AAIiD;AACsC;AAClB;AACrE;AACA;AAC0C;AAAA;AAAA;AAE3C;AAAA;AAAA;AAGP;AAoCO;AACL;AAAM;AACJ;AACA;AACQ;AACR;AACA;AACO;AACS;AAChB;AACc;AACH;AACS;AACpB;AACA;AACO;AACP;AACA;AACA;AACA;AACG;AAOgE;AAC/D;AACM;AACqC;AAChC;AAST;AAEuF;AAMjF;AAC4E;AACnF;AAYP;AACE;AAAS;AAKX;AAIA;AACE;AACA;AAEkB;AAII;AAA6C;AAErE;AACA;AACE;AAEoB;AAGtB;AACE;AAEA;AACE;AACyB;AAE3B;AACK;AAGP;AACE;AAAC;AAAA;AACkD;AACjD;AACI;AAC8B;AACpB;AAEb;AAA2C;AAC3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAMC;AAAC;AAAA;AACiB;AAChB;AACK;AACL;AACY;AAEV;AACyB;AAC3B;AAEE;AACA;AAAuC;AACzC;AAEA;AAAkF;AAEhF;AAAkC;AAKjC;AAImE;AAAA;AACzD;AAAkB;AAEzB;AACN;AAAA;AAAA;AAAA;AAGF;AAAC;AAAA;AACY;AACX;AAC8C;AAC9C;AACA;AACK;AACE;AAAA;AAAA;AAGV;AAAA;AAAA;AAGP;AAsCA;AACE;AAEF;AAQO;AACL;AAAM;AACJ;AACA;AACQ;AACR;AACA;AACS;AACTA;AACAC;AACA;AACA;AACA;AACY;AACZ;AACA;AACA;AACA;AACG;AAUyE;AACxE;AACM;AACkB;AAC+B;AAMrD;AAEJ;AACA;AACA;AAAuD;AAC7C;AACH;AAC0C;AAC1B;AACtB;AACH;AAIA;AAGA;AACiE;AAGnE;AACE;AAAoC;AAGtC;AAA4B;AACoC;AAKhE;AACE;AACE;AAEA;AAAA;AAOF;AAEgB;AAIlB;AACA;AACE;AAEoB;AAGtB;AACE;AAC4F;AAK9F;AACE;AAAK;AAAJ;AACiE;AAC5D;AAC8B;AACf;AAElB;AACC;AAAC;AAAA;AACC;AACY;AACA;AACoC;AACnC;AACN;AAIF;AAA6C;AACf;AAE/B;AAAA;AAGwC;AAE/C;AAAA;AAAA;AAGP;AAEA;AACE;AACF;;;;;;;"}