basalt-ui 1.26.0 → 1.28.0

package/dist/controls/multi-select-filter.js

@@ -1,40 +1,54 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Checkbox, Stack } from "@mantine/core";
+import { useState } from "react";
+import { assertRequiredProps } from "../common/validate.js";
 import classes from "./controls.module.css";
 import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
 import { FilterPill } from "./filter-pill.js";
-import { SheetField, SheetOptionList, useControlName } from "./filter-sheet.js";
-function MultiSelectFilter({
-  field,
-  label,
-  icon,
-  noun,
-  options: optionsProp
-}) {
+import { CheckGlyph, useControlName } from "./filter-sheet.js";
+import { PanelRow } from "./panel-row.js";
+const PANEL_FACET_MAX = 6;
+function MultiSelectFilter(props) {
+  assertRequiredProps("MultiSelectFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label, icon, noun, counts, max, options: optionsProp, className, style } = props;
   const [value, setValue] = field.use();
   const surface = useFilterSurface();
   const isDefault = field.isDefault(value);
   useFilterRegistration(!isDefault, () => {
-    setValue(field.fallback);
+    field.clear();
   });
   const options = optionsProp ?? field.options;
   const inSheet = surface === "sheet";
+  const inPanel = surface === "panel";
   const carriesInformation = value.length > 0 && value.length < options.length;
-  const { labelId } = useControlName(label, inSheet);
-  if (inSheet) {
-    return /* @__PURE__ */ jsx(SheetField, { label, labelId, children: /* @__PURE__ */ jsx(
-      SheetOptionList,
+  const { labelId } = useControlName(label, inSheet || inPanel);
+  const toggle = (next) => {
+    const has = value.includes(next);
+    setValue(has ? value.filter((v) => v !== next) : [...value, next]);
+  };
+  if (inSheet || inPanel) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
       {
-        mode: "multi",
+        label,
         labelId,
-        selected: value,
-        options,
-        onToggle: (next) => {
-          const has = value.includes(next);
-          setValue(has ? value.filter((v) => v !== next) : [...value, next]);
-        }
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: /* @__PURE__ */ jsx(
+          FacetList,
+          {
+            labelId,
+            options,
+            selected: value,
+            max: max ?? PANEL_FACET_MAX,
+            onToggle: toggle,
+            ...counts !== void 0 && { counts }
+          }
+        )
       }
-    ) });
+    );
   }
   const body = (
     // Mantine's own `label`, for the same reason `enum-filter.tsx` uses it — `Checkbox.Group`
@@ -65,7 +79,7 @@ function MultiSelectFilter({
               variant: "subtle",
               size: "ctl",
               onClick: () => {
-                setValue(field.fallback);
+                field.clear();
               },
               children: "Clear"
             }
@@ -80,10 +94,98 @@ function MultiSelectFilter({
       label: carriesInformation ? `${value.length} ${noun ?? label.toLowerCase()}` : label,
       active: !isDefault,
       ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
       children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: body })
     }
   );
 }
+function FacetList({
+  labelId,
+  options,
+  selected,
+  counts,
+  max,
+  onToggle
+}) {
+  const [expanded, setExpanded] = useState(false);
+  const shown = expanded ? options : options.slice(0, max);
+  const hidden = options.length - shown.length;
+  const peak = options.reduce((top, option) => Math.max(top, counts?.[option.value] ?? 0), 0);
+  return (
+    // A real `<fieldset>` named by the row's own label — the native element carries the grouping
+    // semantics, and the heading is already visible.
+    /* @__PURE__ */ jsxs("fieldset", { className: classes.facetList, "aria-labelledby": labelId, children: [
+      shown.map((option) => {
+        const isSelected = selected.includes(option.value);
+        const count = counts?.[option.value];
+        return /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: classes.facetOption,
+            ...isSelected && { "data-selected": true },
+            ...option.disabled === true && { "data-disabled": true },
+            children: [
+              /* @__PURE__ */ jsx(
+                "input",
+                {
+                  className: classes.facetInput,
+                  type: "checkbox",
+                  value: option.value,
+                  checked: isSelected,
+                  disabled: option.disabled === true,
+                  "aria-label": option.label,
+                  onChange: () => {
+                    onToggle(option.value);
+                  }
+                }
+              ),
+              count === void 0 ? (
+                // No count/bar on this row — without a visible box, an unselected row was plain
+                // text with no affordance that it toggles at all (only a checkmark appeared, and
+                // only once selected). `size="ctl"` reads `--checkbox-size-ctl`
+                // (`theme/index.ts`'s `ctlSizeVars`), the same var every other home's `Checkbox`
+                // resolves through. Decorative — the real toggle semantics live on `.facetInput`.
+                /* @__PURE__ */ jsx(
+                  Checkbox.Indicator,
+                  {
+                    className: classes.facetCheckbox,
+                    size: "ctl",
+                    checked: isSelected,
+                    "aria-hidden": true,
+                    ...option.disabled === true && { disabled: true }
+                  }
+                )
+              ) : peak > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: classes.facetBar,
+                  "aria-hidden": true,
+                  style: { "--facet-fill": `${count / peak * 100}%` }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: classes.facetLabel, children: option.label }),
+              count !== void 0 && /* @__PURE__ */ jsx("span", { className: classes.facetCount, children: count }),
+              count !== void 0 && isSelected && /* @__PURE__ */ jsx("span", { className: classes.facetCheck, "aria-hidden": true, children: /* @__PURE__ */ jsx(CheckGlyph, {}) })
+            ]
+          },
+          option.value
+        );
+      }),
+      hidden > 0 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: classes.facetMore,
+          onClick: () => {
+            setExpanded(true);
+          },
+          children: `Show ${hidden} more`
+        }
+      )
+    ] })
+  );
+}
 export {
   MultiSelectFilter
 };

package/dist/controls/number-filter.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { BasaltProps } from '../common/props.js';
+import type { FieldHandle, NumberField } from '../state.js';
+/** One row of a numeric preset set. Narrower than `FilterOption` — a preset is never `disabled`:
+ *  the set is declared at the call site, so a row that should not be offered is left out. */
+export type NumberFilterOption = {
+    readonly value: number;
+    readonly label: string;
+};
+export type NumberFilterProps = BasaltProps & {
+    readonly field: FieldHandle<NumberField>;
+    /** The popover/sheet heading and the accessible name — never the pill text, which reads the
+     *  VALUE (see `EnumFilter`'s doc for why a pill may only print what is selected). */
+    readonly label: string;
+    readonly icon?: ReactNode;
+    /** Present → the radio-list form. Absent → the stepper form. */
+    readonly options?: readonly NumberFilterOption[];
+    /**
+     * The stepper's increment, overriding the field's own. Ignored in the `options` form, which has
+     * no stepper.
+     *
+     * @default `field.step` — the field's declared grain, which is `1` for an `int: true` field that
+     * declared none. Absent on both, the input keeps Mantine's own default of 1.
+     */
+    readonly step?: number;
+};
+export declare function NumberFilter(props: NumberFilterProps): ReactNode;
+//# sourceMappingURL=number-filter.d.ts.map

package/dist/controls/number-filter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-filter.d.ts","sourceRoot":"","sources":["../../src/controls/number-filter.tsx"],"names":[],"mappings":"AAwDA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAElD,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,UAAU,CAAA;AASxD;6FAC6F;AAC7F,MAAM,MAAM,kBAAkB,GAAG;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,WAAW,GAAG;IAC5C,QAAQ,CAAC,KAAK,EAAE,WAAW,CAAC,WAAW,CAAC,CAAA;IACxC;yFACqF;IACrF,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,IAAI,CAAC,EAAE,SAAS,CAAA;IACzB,gEAAgE;IAChE,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,kBAAkB,EAAE,CAAA;IAChD;;;;;;OAMG;IACH,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,CAmChE"}

package/dist/controls/number-filter.js

@@ -0,0 +1,172 @@
+import { jsx } from "react/jsx-runtime";
+import { NumberInput } from "@mantine/core";
+import { useEffect, useRef, useState } from "react";
+import { assertRequiredProps } from "../common/validate.js";
+import classes from "./controls.module.css";
+import { EnumFilter } from "./enum-filter.js";
+import { useFilterRegistration, useFilterSurface } from "./filter-context.js";
+import { FilterPill } from "./filter-pill.js";
+import { useControlName } from "./filter-sheet.js";
+import { PanelRow } from "./panel-row.js";
+function NumberFilter(props) {
+  assertRequiredProps("NumberFilter", props, ["field"], {
+    field: "bind it to a store field (`store.field.<name>`), never a value/onChange pair."
+  });
+  const { field, label, icon, options, step, className, style } = props;
+  if (options !== void 0) {
+    return /* @__PURE__ */ jsx(
+      NumberChoice,
+      {
+        field,
+        label,
+        options,
+        ...icon !== void 0 && { icon },
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style }
+      }
+    );
+  }
+  const grain = step ?? field.step;
+  return /* @__PURE__ */ jsx(
+    NumberStepper,
+    {
+      field,
+      label,
+      ...icon !== void 0 && { icon },
+      ...grain !== void 0 && { step: grain },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
+    }
+  );
+}
+function NumberChoice({
+  field,
+  label,
+  icon,
+  options,
+  className,
+  style
+}) {
+  const [value, setValue] = field.use();
+  const rows = options.map((option) => ({ value: String(option.value), label: option.label }));
+  const choice = {
+    fallback: String(field.fallback),
+    options: rows,
+    use: () => [
+      String(value),
+      (next) => {
+        setValue(Number(next));
+      }
+    ],
+    isDefault: (v) => field.isDefault(Number(v)),
+    clear: () => {
+      field.clear();
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    EnumFilter,
+    {
+      field: choice,
+      label,
+      numeric: true,
+      options: rows,
+      ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style }
+    }
+  );
+}
+function NumberStepper({
+  field,
+  label,
+  icon,
+  step,
+  className,
+  style
+}) {
+  const [value, setValue] = field.use();
+  const surface = useFilterSurface();
+  const inSheet = surface === "sheet";
+  const isDefault = field.isDefault(value);
+  useFilterRegistration(!isDefault, () => {
+    field.clear();
+  });
+  const inPanel = surface === "panel";
+  const { labelId, nameProps } = useControlName(label, inSheet || inPanel);
+  const draft = useCommittedNumber(value, setValue, { min: field.min, max: field.max });
+  const input = /* @__PURE__ */ jsx(
+    NumberInput,
+    {
+      ...nameProps,
+      size: "ctl",
+      ...field.min !== void 0 && { min: field.min },
+      ...field.max !== void 0 && { max: field.max },
+      ...field.int && { allowDecimal: false },
+      ...step !== void 0 && { step },
+      value: draft.value,
+      onChange: draft.set,
+      onBlur: draft.commit,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        draft.commit();
+      }
+    }
+  );
+  if (inPanel || inSheet) {
+    return /* @__PURE__ */ jsx(
+      PanelRow,
+      {
+        label,
+        labelId,
+        ...className !== void 0 && { className },
+        ...style !== void 0 && { style },
+        children: input
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    FilterPill,
+    {
+      label: String(value),
+      numeric: true,
+      active: !isDefault,
+      ...icon !== void 0 && { icon },
+      ...className !== void 0 && { className },
+      ...style !== void 0 && { style },
+      children: /* @__PURE__ */ jsx("div", { className: classes.optionList, children: input })
+    }
+  );
+}
+function useCommittedNumber(value, setValue, bounds) {
+  const [draft, setDraft] = useState(value);
+  const seen = useRef(value);
+  const commitRef = useRef(setValue);
+  commitRef.current = setValue;
+  useEffect(() => {
+    if (seen.current === value) return;
+    seen.current = value;
+    setDraft(value);
+  }, [value]);
+  return {
+    value: draft,
+    set: setDraft,
+    commit: () => {
+      const parsed = typeof draft === "number" ? draft : Number.parseFloat(draft);
+      if (!Number.isFinite(parsed)) {
+        setDraft(value);
+        return;
+      }
+      let next = parsed;
+      if (bounds.min !== void 0 && next < bounds.min) next = bounds.min;
+      if (bounds.max !== void 0 && next > bounds.max) next = bounds.max;
+      setDraft(next);
+      if (next === value) return;
+      seen.current = next;
+      commitRef.current(next);
+    }
+  };
+}
+export {
+  NumberFilter
+};

package/dist/controls/panel-row.d.ts

@@ -0,0 +1,132 @@
+import type { ReactNode, RefObject } from 'react';
+import type { BasaltProps } from '../common/props.js';
+/**
+ * Past three options a panel row's choice is a `Select`, not a track. Same arithmetic as
+ * `ViewTabs`' phone form, against the aside's ~300px rather than a phone's: a four-segment track at
+ * that width gives each label ~60px, which truncates every word longer than "Previous".
+ *
+ * **The count, not the whole law.** Three options at three WORDS' worth of label is not the same
+ * claim as three options at three SENTENCES' worth — "Same period last year" clipped mid-word
+ * inside its equal third even at a set of exactly three. `PANEL_TRACK_MAX` is the cheap first gate;
+ * `useTrackFits` (below) is the actual width check that decides whether the track renders at all.
+ */
+export declare const PANEL_TRACK_MAX = 3;
+export type PanelRowProps = BasaltProps & {
+    /** The row's name. Rendered above the control, `xs`/550 — never inside it. */
+    readonly label: string;
+    /** Info glyph + tooltip beside the label — the same affordance `WidgetHeader.info` draws. */
+    readonly hint?: string;
+    /**
+     * The current value, mono and right-aligned on the label line. A slider's readout, a range's
+     * resolved window — anything the control itself does not print.
+     */
+    readonly readout?: ReactNode;
+    /**
+     * A control that rides the LABEL line instead of taking one of its own — a `Switch`, and by
+     * design almost nothing else. Anything with a width belongs in `children`.
+     */
+    readonly end?: ReactNode;
+    /** Dims the row. The control inside keeps its own `disabled` — this is the visual half. */
+    readonly disabled?: boolean;
+    /**
+     * Stamped on the label so the control can point `aria-labelledby` at it. The CONTROL owns the id
+     * (it renders this row), so an id published downward could never reach it — see
+     * `useControlName`'s doc.
+     */
+    readonly labelId?: string;
+    /**
+     * When set, renders the label as a `<label htmlFor={htmlFor}>` instead of a bare `<span>`, so
+     * clicking the label text also activates the control — the affordance Mantine's own labelled
+     * inputs give for free. Pass the `end` control's id (a `Switch`, typically).
+     */
+    readonly htmlFor?: string;
+    /** The full-width control line. Omitted for a row whose control rides `end`. */
+    readonly children?: ReactNode;
+};
+export declare function PanelRow({ label, hint, readout, end, disabled, labelId, htmlFor, children, className, style, }: PanelRowProps): ReactNode;
+/** One option as both surfaces render it — `disabled` is the `SegmentedControl` half. */
+export type PanelChoiceOption = {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean;
+};
+export type PanelChoiceProps = {
+    /** The control's accessible name, as `useControlName` resolved it for this surface. */
+    readonly nameProps: {
+        'aria-labelledby': string;
+    } | {
+        'aria-label': string;
+    };
+    readonly value: string;
+    readonly options: readonly PanelChoiceOption[];
+    /** Numeric labels (`7d` / `30d`) get the mono treatment `segmented-control.module.css` owns. */
+    readonly numeric?: boolean;
+    readonly onChange: (next: string) => void;
+};
+/**
+ * Fit-checks a full-width track: {@link PANEL_TRACK_MAX} (and `ViewTabs`' own `PHONE_TRACK_MAX`) is
+ * the cheap COUNT gate, not the whole law — three short labels and three long ones are not the same
+ * claim at a ~300px column or a phone sheet ("Same period last year" clipped mid-word inside its
+ * equal third even though the set was exactly three; "Week"/"Absolute" clipped inside their equal
+ * column at the phone tier even though the ROOT read as fitting its parent — see
+ * {@link measureMounted}'s doc for why that needs a second signal). This hook is the width gate
+ * underneath the count cap, shared so `PanelChoice` and `ViewTabs`' phone form cannot drift the way
+ * their two hand-rolled ternaries already had once (`PanelChoice`'s own doc).
+ *
+ * **A LIVE toggle, not a one-way latch — it reverts.** The moment the track overflows, `PanelChoice`
+ * swaps it for a `Select`, which un-mounts the only element `measureMounted` could otherwise read.
+ * Two refs survive that swap on purpose: `trackWidthRef` remembers the track's own last-measured
+ * width (refreshed live whenever it IS mounted, used only as a cheap pre-filter — see below — never
+ * as the final answer), and `parentRef` holds the layout parent found once, at the FIRST mount — the
+ * same DOM node hosts either form (`PanelChoice`/`ViewTabs` return one or the other as their sole
+ * element, never a wrapper that differs between them), so it is never itself removed by the swap.
+ * The `ResizeObserver` therefore never watches a node this hook is about to lose: it observes the
+ * PARENT for the whole hook's lifetime and the TRACK only while it exists.
+ *
+ * While `Select` is showing, an observer tick with room to spare (`parent.clientWidth` at or past
+ * the remembered `trackWidthRef`) SPECULATIVELY re-mounts the track rather than trying to predict
+ * the exact threshold from a cached number — the two-signal check above cannot be run without a
+ * live root, and a WRONG guess here is not user-visible: the second effect below re-verifies with
+ * `measureMounted` the instant the fresh root exists, inside the SAME `useLayoutEffect` pass, and
+ * reverts synchronously before paint if the speculation was wrong. Nothing here can loop — a
+ * `ResizeObserver` only fires again on a GENUINE subsequent size change, not because React
+ * re-rendered.
+ *
+ * A SECOND, dependency-free `useLayoutEffect` is what performs that verification (and, on the
+ * ordinary growth-first-detected-while-mounted path, is also what re-arms the observer on the
+ * track's own root once it exists) — the FIRST effect only runs once per `[countFits, dataKey]`,
+ * but the track itself mounts and unmounts every time `fits` changes, and a `ResizeObserver` has to
+ * be told about each new node explicitly; this second effect runs after every render and is a
+ * no-op unless `rootRef.current` is a node it is not already watching.
+ *
+ * The check is THREE-VALUED, not two — `unknown` alongside `fits`/`overflow` — because a
+ * `clientWidth` of `0` is not evidence of overflow, it is evidence the ancestor chain has not been
+ * LAID OUT yet: the aside animates its width in from 0 while `PageAside` claims the region
+ * (`docs/ASIDE-SPEC.md` §0), and every ancestor up to the aside panel itself reads `0` for one or
+ * more layout passes while that transition is in flight. `unknown` updates nothing — it is simply
+ * not yet an answer, and the observer keeps watching for the ancestor chain to settle.
+ *
+ * `useLayoutEffect` runs BEFORE the browser paints, so a CONFIDENT overflow reading is never
+ * actually shown as a track first: the synchronous `setState` for it lands before paint, not after.
+ *
+ * `dataKey` is a caller-built string identifying the CURRENT option set (not read inside the effect
+ * body, just what forces it to re-run — a fresh mount, a fresh `parentRef`/`trackWidthRef` — when
+ * the rendered labels change) — primitive on purpose, so it is an honest `useLayoutEffect`
+ * dependency rather than a fresh array reference on every render.
+ */
+export declare function useTrackFits(countFits: boolean, dataKey: string): {
+    rootRef: RefObject<HTMLDivElement | null>;
+    fits: boolean;
+};
+/**
+ * The single-choice control a panel row draws: a full-width track while the set fits both
+ * {@link PANEL_TRACK_MAX} and the width check {@link useTrackFits} runs, a `Select` past either.
+ *
+ * Internal, and one component rather than the same ternary in each control: `EnumFilter` and
+ * `ViewTabs` both wrote it out and had already drifted — `ViewTabs`' copy lost `data-numeric`, so a
+ * numeric tab set rendered proportional in the aside and mono everywhere else. The split point is
+ * the geometry of a ~300px column, which is a property of the ROW, not of any one filter, so it
+ * belongs beside the row that imposes it.
+ */
+export declare function PanelChoice({ nameProps, value, options, numeric, onChange, }: PanelChoiceProps): ReactNode;
+//# sourceMappingURL=panel-row.d.ts.map

package/dist/controls/panel-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel-row.d.ts","sourceRoot":"","sources":["../../src/controls/panel-row.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAKlD;;;;;;;;;GASG;AACH,eAAO,MAAM,eAAe,IAAI,CAAA;AAEhC,MAAM,MAAM,aAAa,GAAG,WAAW,GAAG;IACxC,8EAA8E;IAC9E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,6FAA6F;IAC7F,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB;;;OAGG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,SAAS,CAAA;IAC5B;;;OAGG;IACH,QAAQ,CAAC,GAAG,CAAC,EAAE,SAAS,CAAA;IACxB,2FAA2F;IAC3F,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB;;;;OAIG;IACH,QAAQ,CAAC,OAAO,CAAC,EAAE,MAAM,CAAA;IACzB,gFAAgF;IAChF,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAA;CAC9B,CAAA;AAED,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,IAAI,EACJ,OAAO,EACP,GAAG,EACH,QAAQ,EACR,OAAO,EACP,OAAO,EACP,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,aAAa,GAAG,SAAS,CAiC3B;AAED,yFAAyF;AACzF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAC5B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,uFAAuF;IACvF,QAAQ,CAAC,SAAS,EAAE;QAAE,iBAAiB,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,CAAA;IAC5E,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,OAAO,EAAE,SAAS,iBAAiB,EAAE,CAAA;IAC9C,gGAAgG;IAChG,QAAQ,CAAC,OAAO,CAAC,EAAE,OAAO,CAAA;IAC1B,QAAQ,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC1C,CAAA;AAyDD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkDG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,OAAO,EAClB,OAAO,EAAE,MAAM,GACd;IAAE,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CA0F9D;AAED;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,EAC1B,SAAS,EACT,KAAK,EACL,OAAO,EACP,OAAO,EACP,QAAQ,GACT,EAAE,gBAAgB,GAAG,SAAS,CAiC9B"}