@xeonr/platform-ui 1.3.1 → 1.5.0

package/dist/kit/Color.d.ts

@@ -0,0 +1,69 @@
+import { type KeyboardEvent, type ReactNode, type Ref } from "react";
+import { type IconName } from "./Icon.tsx";
+import { type AnchoredAlign, type AnchoredSide } from "./Anchored.tsx";
+/**
+ * ColorSwatch: a round well filled with a colour — a button. `icon` draws
+ * what the colour paints (a stroke, a fill, text) on top of it, in `ink`.
+ * On its own it is the trigger a product hangs its own picker from; in a row
+ * of them, `selected` marks the chosen one.
+ */
+export declare function ColorSwatch({ color, label, icon, ink, size, selected, disabled, onClick, ...rest }: {
+    /** the colour shown: any CSS colour the product holds (a stored hex, a token) */
+    color: string;
+    /** accessible name — what it is the colour of ("Stroke colour"), or the colour's name */
+    label: string;
+    icon?: IconName | (string & {}) | undefined;
+    /**
+     * The icon's colour on the swatch. Default: derived from the swatch —
+     * black on a light colour, white on a dark one — so it stays legible on
+     * whatever colour the person picked (the page's text colour in a browser
+     * without CSS relative colours).
+     */
+    ink?: string | undefined;
+    /** px (default 26) */
+    size?: number | undefined;
+    selected?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onClick?: (() => void) | undefined;
+    "aria-haspopup"?: "dialog" | "listbox" | undefined;
+    "aria-expanded"?: boolean | undefined;
+    "aria-selected"?: boolean | undefined;
+    role?: string | undefined;
+    ref?: Ref<HTMLButtonElement> | undefined;
+    tabIndex?: number | undefined;
+    onKeyDown?: ((e: KeyboardEvent<HTMLButtonElement>) => void) | undefined;
+}): import("react").JSX.Element;
+export interface ColorPickerProps {
+    /** the chosen colour */
+    value: string;
+    onChange: (color: string) => void;
+    /** the palette offered, as CSS colours; a `{ value, label }` names one for assistive tech */
+    colors: (string | {
+        value: string;
+        label: string;
+    })[];
+    /** accessible name of the trigger ("Stroke colour") */
+    label: string;
+    /** what the colour paints, drawn on the trigger */
+    icon?: IconName | (string & {}) | undefined;
+    ink?: string | undefined;
+    /** also offer the browser's own colour dialog, for a colour outside the palette (hex values only) */
+    custom?: boolean | undefined;
+    /** caption beside the custom well (default "Custom…") */
+    customLabel?: ReactNode | undefined;
+    /** swatches per row (default 6) */
+    columns?: number | undefined;
+    /** trigger size, px */
+    size?: number | undefined;
+    disabled?: boolean | undefined;
+    side?: AnchoredSide | undefined;
+    align?: AnchoredAlign | undefined;
+}
+/**
+ * ColorPicker: a ColorSwatch that opens a palette. Arrow keys move through
+ * the palette, Enter picks, Escape closes (before any modal it sits in), and
+ * the list portals so a toolbar cannot clip it. `custom` adds the browser's
+ * colour dialog under the palette for anything else.
+ */
+export declare function ColorPicker({ value, onChange, colors, label, icon, ink, custom, customLabel, columns, size, disabled, side, align, }: ColorPickerProps): import("react").JSX.Element;
+//# sourceMappingURL=Color.d.ts.map

package/dist/kit/Color.d.ts.map

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

package/dist/kit/Color.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import styled, { css } from "styled-components";
+import { v } from "../theme/tokens.js";
+import { Icon } from "./Icon.js";
+import { Anchored } from "./Anchored.js";
+import { useEscapeLayer } from "./layers.js";
+// A colour the person chooses — a pen in an image editor, a label's colour.
+// Added for the upl.im dashboard (1.4), whose editor toolbar had drawn its own
+// colour well. The colour is data, not chrome: it comes from the caller (a
+// value the product stores), never from a literal in the kit.
+const Well = styled.button `
+  position: relative;
+  flex: none;
+  width: ${(p) => p.$size}px;
+  height: ${(p) => p.$size}px;
+  border-radius: 50%;
+  display: inline-grid;
+  place-items: center;
+  border: 1px solid ${v.line2};
+  font-size: ${(p) => Math.round(p.$size * 0.4)}px;
+  transition: transform 0.12s ease, box-shadow 0.12s ease;
+  /* the colour is the caller's; the ring between it and the selection mark is the surface */
+  ${(p) => p.$selected && css `box-shadow: 0 0 0 2px ${v.surface}, 0 0 0 4px ${v.brand};`}
+  &:hover:not(:disabled) { transform: scale(1.06); }
+  &:disabled { opacity: 0.5; cursor: not-allowed; }
+  &:focus-visible { border-radius: 50%; }
+  > svg { filter: drop-shadow(0 0 1px ${v.scrim}); }
+  /* The default ink is derived from the swatch itself: black on a light
+     colour, white on a dark one (OKLCH lightness thresholded at 0.62). A
+     browser without relative colour syntax keeps the text colour above. */
+  background: var(--x-swatch);
+  color: ${v.text};
+  color: oklch(from var(--x-swatch) clamp(0, (0.62 - l) * 1000, 1) 0 0);
+`;
+/**
+ * ColorSwatch: a round well filled with a colour — a button. `icon` draws
+ * what the colour paints (a stroke, a fill, text) on top of it, in `ink`.
+ * On its own it is the trigger a product hangs its own picker from; in a row
+ * of them, `selected` marks the chosen one.
+ */
+export function ColorSwatch({ color, label, icon, ink, size = 26, selected, disabled, onClick, ...rest }) {
+    return (_jsx(Well, { type: "button", "aria-label": label, title: label, "$size": size, "$selected": !!selected, disabled: disabled, onClick: onClick, style: { "--x-swatch": color, ...(ink ? { color: ink } : {}) }, ...rest, children: icon ? _jsx(Icon, { name: icon }) : null }));
+}
+const Panel = styled.div `
+  padding: 10px;
+  background: ${v.surface};
+  border: 1px solid ${v.line2};
+  border-radius: ${v.rCard};
+  box-shadow: ${v.elev};
+  > .grid { display: grid; gap: 8px; }
+  > .custom {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid ${v.line};
+    font-size: 11.5px;
+    color: ${v.muted};
+    cursor: pointer;
+    input[type="color"] {
+      width: 26px;
+      height: 26px;
+      padding: 0;
+      border: 1px solid ${v.line2};
+      border-radius: 50%;
+      background: none;
+      cursor: pointer;
+      overflow: hidden;
+    }
+    input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
+    input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
+    input[type="color"]::-moz-color-swatch { border: none; border-radius: 50%; }
+  }
+`;
+/**
+ * ColorPicker: a ColorSwatch that opens a palette. Arrow keys move through
+ * the palette, Enter picks, Escape closes (before any modal it sits in), and
+ * the list portals so a toolbar cannot clip it. `custom` adds the browser's
+ * colour dialog under the palette for anything else.
+ */
+export function ColorPicker({ value, onChange, colors, label, icon, ink, custom, customLabel = "Custom…", columns = 6, size, disabled, side, align = "left", }) {
+    const [open, setOpen] = useState(false);
+    const wrap = useRef(null);
+    const layer = useRef(null);
+    const cells = useRef([]);
+    const list = colors.map((c) => (typeof c === "string" ? { value: c, label: c } : c));
+    const chosen = list.findIndex((c) => c.value.toLowerCase() === value.toLowerCase());
+    const [active, setActive] = useState(0);
+    const close = (refocus) => {
+        setOpen(false);
+        if (refocus)
+            wrap.current?.querySelector("button")?.focus();
+    };
+    useEscapeLayer(open, () => close(true));
+    useEffect(() => {
+        if (!open)
+            return;
+        const onDown = (e) => {
+            const t = e.target;
+            if (!wrap.current?.contains(t) && !layer.current?.contains(t))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onDown, true);
+        return () => document.removeEventListener("mousedown", onDown, true);
+    }, [open]);
+    useEffect(() => {
+        if (open)
+            cells.current[active]?.focus();
+    }, [open, active]);
+    const pick = (c) => {
+        onChange(c);
+        close(true);
+    };
+    const onKey = (e) => {
+        const n = list.length;
+        const step = { ArrowRight: 1, ArrowLeft: -1, ArrowDown: columns, ArrowUp: -columns };
+        if (e.key in step) {
+            e.preventDefault();
+            setActive((a) => Math.max(0, Math.min(n - 1, a + step[e.key])));
+        }
+        else if (e.key === "Home") {
+            e.preventDefault();
+            setActive(0);
+        }
+        else if (e.key === "End") {
+            e.preventDefault();
+            setActive(n - 1);
+        }
+        else if (e.key === "Tab" && !custom)
+            close(false);
+    };
+    const hex = /^#[0-9a-f]{6}$/i.test(value) ? value : undefined;
+    return (_jsxs("span", { ref: wrap, style: { display: "inline-flex" }, children: [_jsx(ColorSwatch, { color: value, label: label, icon: icon, ink: ink, size: size, disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => {
+                    if (open) {
+                        close(false);
+                        return;
+                    }
+                    setActive(chosen >= 0 ? chosen : 0);
+                    setOpen(true);
+                }, onKeyDown: (e) => {
+                    if (e.key === "ArrowDown" && !open) {
+                        e.preventDefault();
+                        setActive(chosen >= 0 ? chosen : 0);
+                        setOpen(true);
+                    }
+                } }), open ? (_jsx(Anchored, { anchor: wrap, align: align, side: side, gap: 6, layerRef: layer, children: _jsxs(Panel, { children: [_jsx("div", { className: "grid", role: "listbox", "aria-label": label, style: { gridTemplateColumns: `repeat(${columns}, 24px)` }, onKeyDown: onKey, children: list.map((c, i) => (_jsx(ColorSwatch, { color: c.value, label: c.label, size: 24, ref: (n) => { cells.current[i] = n; }, role: "option", "aria-selected": i === chosen, selected: i === chosen, tabIndex: i === active ? 0 : -1, onClick: () => pick(c.value) }, `${c.value}-${i}`))) }), custom ? (_jsxs("label", { className: "custom", children: [_jsx("input", { type: "color", ...(hex ? { value: hex } : {}), onChange: (e) => onChange(e.target.value), "aria-label": `${label}: custom` }, hex ? "hex" : "none"), customLabel] })) : null] }) })) : null] }));
+}
+//# sourceMappingURL=Color.js.map

package/dist/kit/Color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../src/kit/Color.tsx"],"names":[],"mappings":"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"}

package/dist/kit/Combobox.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import type { IconName } from "./Icon.tsx";
 export interface ComboOption<T> {
     key: string;
     value: T;
@@ -9,7 +10,7 @@ export interface ComboOption<T> {
  * query (so it can debounce and hit whichever RPC it needs) — this only owns
  * the open/highlight/keyboard behaviour.
  */
-export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }: {
+export declare function Combobox<T>({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty, icon, disabled }: {
     value: string;
     onQueryChange: (q: string) => void;
     options: ComboOption<T>[];
@@ -36,5 +37,8 @@ export declare function Combobox<T>({ value, onQueryChange, options, onPick, pla
      * Every chip input does this (it drops the last chip) and fingers expect it.
      */
     onBackspaceWhenEmpty?: (() => void) | undefined;
+    /** a leading glyph inside the box — `search` for a people or entity finder */
+    icon?: IconName | (string & {}) | undefined;
+    disabled?: boolean | undefined;
 }): import("react").JSX.Element;
 //# sourceMappingURL=Combobox.d.ts.map

package/dist/kit/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgDpE,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,EAAE;IACxJ,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;CACjD,+BAoEA"}
+{"version":3,"file":"Combobox.d.ts","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAQpE,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAiD3C,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,CAAC,CAAC;IACT,MAAM,EAAE,SAAS,CAAC;CACnB;AAED;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,aAAa,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,OAAO,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1B,MAAM,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,gEAAgE;IAChE,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD;;;OAGG;IACH,oBAAoB,CAAC,EAAE,CAAC,MAAM,IAAI,CAAC,GAAG,SAAS,CAAC;IAChD,8EAA8E;IAC9E,IAAI,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAChC,+BAoFA"}

package/dist/kit/Combobox.js

@@ -1,10 +1,12 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { v } from "../theme/tokens.js";
 import { Input } from "./Form.js";
 import { Icon } from "./Icon.js";
 import { Anchored } from "./Anchored.js";
+import { InputGroup } from "./Controls.js";
+import { useEscapeLayer } from "./layers.js";
 const Wrap = styled.div `position: relative;`;
 const List = styled.div `
   max-height: 300px;
@@ -41,12 +43,17 @@ const Spin = styled.span `
   color: ${v.faint};
   font-size: 11px;
 `;
+const EndSpin = styled.span `
+  margin-right: 6px;
+  color: ${v.faint};
+  font-size: 11px;
+`;
 /**
  * Combobox: typeahead over a caller-supplied option list. The caller owns the
  * query (so it can debounce and hit whichever RPC it needs) — this only owns
  * the open/highlight/keyboard behaviour.
  */
-export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty }) {
+export function Combobox({ value, onQueryChange, options, onPick, placeholder, label, loading, emptyNote, autoFocus, onSubmit, onBackspaceWhenEmpty, icon, disabled }) {
     const [open, setOpen] = useState(false);
     const [active, setActive] = useState(0);
     const ref = useRef(null);
@@ -69,6 +76,10 @@ export function Combobox({ value, onQueryChange, options, onPick, placeholder, l
         document.addEventListener("mousedown", onDown);
         return () => document.removeEventListener("mousedown", onDown);
     }, [open]);
+    const shown = open && !disabled && (options.length > 0 || !!emptyNote);
+    // Escape closes the list (while there is one to see) before any drawer or
+    // modal it sits in (CON-59)
+    useEscapeLayer(shown, () => setOpen(false));
     const pick = (i) => {
         const opt = options[i];
         if (!opt)
@@ -76,31 +87,31 @@ export function Combobox({ value, onQueryChange, options, onPick, placeholder, l
         onPick(opt.value, opt.key);
         setOpen(false);
     };
-    return (_jsxs(Wrap, { ref: ref, children: [_jsx(Input, { value: value, autoFocus: autoFocus, placeholder: placeholder, "aria-label": label ?? placeholder, autoComplete: "off", onChange: (e) => { onQueryChange(e.target.value); setOpen(true); }, onFocus: () => setOpen(true), onKeyDown: (e) => {
-                    if (e.key === "ArrowDown") {
-                        e.preventDefault();
-                        setOpen(true);
-                        setActive((a) => Math.min(a + 1, options.length - 1));
-                    }
-                    else if (e.key === "ArrowUp") {
-                        e.preventDefault();
-                        setActive((a) => Math.max(a - 1, 0));
-                    }
-                    else if (e.key === "Enter") {
-                        e.preventDefault();
-                        if (open && options.length)
-                            pick(active);
-                        else if (onSubmit && value.trim()) {
-                            onSubmit(value.trim());
-                            setOpen(false);
-                        }
-                    }
-                    else if (e.key === "Backspace" && value === "" && onBackspaceWhenEmpty) {
-                        e.preventDefault();
-                        onBackspaceWhenEmpty();
-                    }
-                    else if (e.key === "Escape")
-                        setOpen(false);
-                } }), loading ? _jsx(Spin, { children: _jsx(Icon, { name: "spinner", spin: true }) }) : null, open && (options.length > 0 || emptyNote) ? (_jsx(Anchored, { anchor: ref, align: "stretch", gap: 5, layerRef: layer, children: _jsxs(List, { role: "listbox", children: [options.map((o, i) => (_jsx(Option, { role: "option", "aria-selected": i === active, "$on": i === active, onMouseEnter: () => setActive(i), onClick: () => pick(i), children: o.render }, o.key))), options.length === 0 && emptyNote ? _jsx(Note, { children: emptyNote }) : null] }) })) : null] }));
+    const input = (_jsx(Input, { value: value, autoFocus: autoFocus, disabled: disabled, placeholder: placeholder, "aria-label": label ?? placeholder, autoComplete: "off", onChange: (e) => { onQueryChange(e.target.value); setOpen(true); }, onFocus: () => setOpen(true), onKeyDown: (e) => {
+            if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setOpen(true);
+                setActive((a) => Math.min(a + 1, options.length - 1));
+            }
+            else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActive((a) => Math.max(a - 1, 0));
+            }
+            else if (e.key === "Enter") {
+                e.preventDefault();
+                if (open && options.length)
+                    pick(active);
+                else if (onSubmit && value.trim()) {
+                    onSubmit(value.trim());
+                    setOpen(false);
+                }
+            }
+            else if (e.key === "Backspace" && value === "" && onBackspaceWhenEmpty) {
+                e.preventDefault();
+                onBackspaceWhenEmpty();
+            }
+        } }));
+    const spinner = _jsx(Icon, { name: "spinner", spin: true });
+    return (_jsxs(Wrap, { ref: ref, children: [icon ? (_jsx(InputGroup, { icon: icon, disabled: disabled, end: loading ? _jsx(EndSpin, { children: spinner }) : undefined, children: input })) : (_jsxs(_Fragment, { children: [input, loading ? _jsx(Spin, { children: spinner }) : null] })), shown ? (_jsx(Anchored, { anchor: ref, align: "stretch", gap: 5, layerRef: layer, children: _jsxs(List, { role: "listbox", children: [options.map((o, i) => (_jsx(Option, { type: "button", role: "option", "aria-selected": i === active, "$on": i === active, onMouseEnter: () => setActive(i), onMouseDown: (e) => e.preventDefault(), onClick: () => pick(i), children: o.render }, o.key))), options.length === 0 && emptyNote ? _jsx(Note, { children: emptyNote }) : null] }) })) : null] }));
 }
 //# sourceMappingURL=Combobox.js.map

package/dist/kit/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Combobox.js","sourceRoot":"","sources":["../../src/kit/Combobox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAkB,MAAM,OAAO,CAAC;AACpE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,CAAC,EAAE,MAAM,oBAAoB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAY,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAY,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAgB,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAgB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAG7C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA,qBAAqB,CAAC;AAE7C,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;gBAGP,CAAC,CAAC,OAAO;sBACH,CAAC,CAAC,KAAK;mBACV,CAAC,CAAC,KAAK;gBACV,CAAC,CAAC,IAAI;;CAErB,CAAC;AAEF,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAkB;;;;;;;;;WASnC,CAAC,CAAC,IAAI;gBACD,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;0BAChC,CAAC,CAAC,KAAK;CAChC,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,CAAA;;;WAGZ,CAAC,CAAC,KAAK;CACjB,CAAC;AAEF,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;;;;;WAKb,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,IAAI,CAAA;;WAEhB,CAAC,CAAC,KAAK;;CAEjB,CAAC;AAQF;;;;GAIG;AACH,MAAM,UAAU,QAAQ,CAAI,EAAE,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,oBAAoB,EAAE,IAAI,EAAE,QAAQ,EA8BrK;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE3C,4EAA4E;IAC5E,4EAA4E;IAC5E,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,OAAO,CAAC,CAAC;IACxD,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QAC5B,cAAc,CAAC,OAAO,CAAC,CAAC;QACxB,SAAS,CAAC,CAAC,CAAC,CAAC;IACf,CAAC;IAED,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI;YAAE,OAAO;QAClB,MAAM,MAAM,GAAG,CAAC,CAAa,EAAE,EAAE;YAC/B,MAAM,CAAC,GAAG,CAAC,CAAC,MAAc,CAAC;YAC3B,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;gBAAE,OAAO,CAAC,KAAK,CAAC,CAAC;QAC/E,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;QAC/C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC;IACjE,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC;IAEX,MAAM,KAAK,GAAG,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC;IACvE,0EAA0E;IAC1E,4BAA4B;IAC5B,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC;IAE5C,MAAM,IAAI,GAAG,CAAC,CAAS,EAAE,EAAE;QACzB,MAAM,GAAG,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC;QACvB,IAAI,CAAC,GAAG;YAAE,OAAO;QACjB,MAAM,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,CAAC,CAAC;QAC3B,OAAO,CAAC,KAAK,CAAC,CAAC;IACjB,CAAC,CAAC;IAEF,MAAM,KAAK,GAAG,CACZ,KAAC,KAAK,IACJ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,gBACZ,KAAK,IAAI,WAAW,EAChC,YAAY,EAAC,KAAK,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,GAAG,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,EAClE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,EAC5B,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;gBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,OAAO,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC;YAAC,CAAC;iBACnH,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE,CAAC;gBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAAC,SAAS,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;YAAC,CAAC;iBACtF,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBAC3B,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,IAAI,IAAI,IAAI,OAAO,CAAC,MAAM;oBAAE,IAAI,CAAC,MAAM,CAAC,CAAC;qBACpC,IAAI,QAAQ,IAAI,KAAK,CAAC,IAAI,EAAE,EAAE,CAAC;oBAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;oBAAC,OAAO,CAAC,KAAK,CAAC,CAAC;gBAAC,CAAC;YAChF,CAAC;iBACI,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,KAAK,KAAK,EAAE,IAAI,oBAAoB,EAAE,CAAC;gBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;gBAAC,oBAAoB,EAAE,CAAC;YAAC,CAAC;QACzH,CAAC,GACD,CACH,CAAC;IACF,MAAM,OAAO,GAAG,KAAC,IAAI,IAAC,IAAI,EAAC,SAAS,EAAC,IAAI,SAAG,CAAC;IAE7C,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,aACX,IAAI,CAAC,CAAC,CAAC,CACN,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,KAAC,OAAO,cAAE,OAAO,GAAW,CAAC,CAAC,CAAC,SAAS,YAAG,KAAK,GAAc,CAC1H,CAAC,CAAC,CAAC,CACF,8BACG,KAAK,EACL,OAAO,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,OAAO,GAAQ,CAAC,CAAC,CAAC,IAAI,IACvC,CACJ,EACA,KAAK,CAAC,CAAC,CAAC,CACP,KAAC,QAAQ,IAAC,MAAM,EAAE,GAAG,EAAE,KAAK,EAAC,SAAS,EAAC,GAAG,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,YAC5D,MAAC,IAAI,IAAC,IAAI,EAAC,SAAS,aACjB,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CACrB,KAAC,MAAM,IAAa,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,mBAAgB,CAAC,KAAK,MAAM,SAAO,CAAC,KAAK,MAAM,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,CAAC,CAAC,YAC7L,CAAC,CAAC,MAAM,IADE,CAAC,CAAC,GAAG,CAET,CACV,CAAC,EACD,OAAO,CAAC,MAAM,KAAK,CAAC,IAAI,SAAS,CAAC,CAAC,CAAC,KAAC,IAAI,cAAE,SAAS,GAAQ,CAAC,CAAC,CAAC,IAAI,IAC/D,GACE,CACZ,CAAC,CAAC,CAAC,IAAI,IACH,CACR,CAAC;AACJ,CAAC"}

package/dist/kit/Controls.d.ts

@@ -0,0 +1,184 @@
+import { type ChangeEvent, type CSSProperties, type HTMLAttributes, type MouseEvent, type ReactNode } from "react";
+import { type IconName } from "./Icon.tsx";
+import { type SegmentedTone } from "./Form.tsx";
+export interface InputGroupProps {
+    /** a leading glyph — a magnifier on a search box, a globe on a hostname */
+    icon?: IconName | (string & {}) | undefined;
+    /** fixed text before the value, inside the box (`https://`) */
+    prefix?: ReactNode | undefined;
+    /** fixed text after the value, inside the box (`.example.com`, `MB`, `%`) */
+    suffix?: ReactNode | undefined;
+    /** controls at the trailing edge — a clear button, a reveal toggle */
+    end?: ReactNode | undefined;
+    /** mono value and affixes, for hostnames, ids and paths */
+    mono?: boolean | undefined;
+    /** draw the group in error; inside a Field with `error` this is automatic */
+    invalid?: boolean | undefined;
+    /**
+     * The group is off: drawn dimmed, and the input inside is disabled too — a
+     * direct child element that does not set `disabled` itself gets
+     * `disabled` (1.4). An input nested deeper must be disabled by the caller.
+     */
+    disabled?: boolean | undefined;
+    /** the group's width in px (default: its container's) */
+    width?: number | undefined;
+    style?: CSSProperties | undefined;
+    className?: string | undefined;
+    /** the input: a kit `Input`, `MonoInput`, or a plain <input> */
+    children: ReactNode;
+}
+/**
+ * InputGroup: an input with a glyph, fixed text or controls inside its box.
+ * The affixes are part of the field — a subdomain box reads `luke` `.upl.im`
+ * as one value — and a click anywhere on the box focuses the input. Unlike
+ * SearchBox it holds no state of its own, so it does not debounce: the input
+ * inside is the caller's, controlled as they like.
+ */
+export declare function InputGroup({ icon, prefix, suffix, end, mono, invalid, disabled, width, style, className, children }: InputGroupProps): import("react").JSX.Element;
+export interface NumberInputProps {
+    /** the number, or null for an empty box */
+    value: number | null;
+    /** a parsed number while typing (unclamped), null for an empty box; clamped to min/max on blur */
+    onChange: (value: number | null) => void;
+    min?: number | undefined;
+    max?: number | undefined;
+    /** what ArrowUp/ArrowDown and the stepper add (default 1; Shift ×10) */
+    step?: number | undefined;
+    /** the unit after the value, inside the box (`MB`, `days`, `%`) */
+    unit?: ReactNode | undefined;
+    /** fixed text before the value (`$`) */
+    prefix?: ReactNode | undefined;
+    /** − / + buttons at the trailing edge */
+    stepper?: boolean | undefined;
+    placeholder?: string | undefined;
+    disabled?: boolean | undefined;
+    /** width of the whole control in px (default: its container's) */
+    width?: number | undefined;
+    /** accessible name, when no Field label names it */
+    label?: string | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    autoFocus?: boolean | undefined;
+    /** accept a decimal point (default: only when `step` is fractional) */
+    decimal?: boolean | undefined;
+}
+/**
+ * NumberInput: a number with its unit, its bounds and a keyboard step. Typed
+ * text is held as typed ("1." stays "1.") and handed up parsed; the bounds are
+ * applied when the field is left, not while a person is half-way through
+ * typing "150" into a box whose minimum is 100. A text input with
+ * `role="spinbutton"`, not `type="number"`, so a scroll wheel passing over it
+ * never changes the value and "e" is not a digit.
+ */
+export declare function NumberInput({ value, onChange, min, max, step, unit, prefix, stepper, placeholder, disabled, width, label, id, name, autoFocus, decimal, }: NumberInputProps): import("react").JSX.Element;
+export interface SliderProps {
+    /** controlled value; omit it (and pass `defaultValue`) to let the slider hold it */
+    value?: number | undefined;
+    defaultValue?: number | undefined;
+    /** every movement */
+    onChange?: ((value: number) => void) | undefined;
+    /** once the pointer or key is released — for a value that costs a request to apply */
+    onCommit?: ((value: number) => void) | undefined;
+    min?: number | undefined;
+    max?: number | undefined;
+    step?: number | undefined;
+    /** accessible name */
+    label: string;
+    disabled?: boolean | undefined;
+    /** show the value beside the track (default true); a function formats it (`(n) => \`${n}px\``) */
+    showValue?: boolean | ((value: number) => ReactNode) | undefined;
+    /** width of the whole control in px (default: its container's) */
+    width?: number | undefined;
+    id?: string | undefined;
+}
+/**
+ * Slider: a number picked by feel rather than typed — a stroke width, a blur
+ * strength, an opacity. A native range input drawn on the tokens, so the
+ * keyboard (arrows, Page Up/Down, Home/End) and the slider role come free.
+ * Its value is shown beside it, because a slider whose number you cannot see
+ * is a slider people overshoot. Reach for NumberInput when the exact value
+ * matters more than the gesture.
+ */
+export declare function Slider({ value, defaultValue, onChange, onCommit, min, max, step, label, disabled, showValue, width, id }: SliderProps): import("react").JSX.Element;
+export interface CheckboxProps {
+    checked: boolean;
+    /**
+     * Optional (1.4): a box whose row handles the click itself (`onClick`, or a
+     * click on the row) needs none; it stays controlled by `checked` either way.
+     */
+    onChange?: ((checked: boolean, event: ChangeEvent<HTMLInputElement>) => void) | undefined;
+    /** some but not all of what it stands for — a select-all over a partial selection */
+    indeterminate?: boolean | undefined;
+    disabled?: boolean | undefined;
+    /** accessible name — the row it selects ("Select report.pdf") */
+    label?: string | undefined;
+    /** px (default 16) */
+    size?: number | undefined;
+    id?: string | undefined;
+    name?: string | undefined;
+    value?: string | undefined;
+    title?: string | undefined;
+    /** the click, before onChange — stop it here when the row it sits on is itself a link or a button */
+    onClick?: ((e: MouseEvent<HTMLInputElement>) => void) | undefined;
+    /** on the box (the outer element), for placing it — absolutely over a card's corner, say */
+    className?: string | undefined;
+    style?: CSSProperties | undefined;
+}
+/**
+ * Checkbox: the box alone, with no label around it — for selecting a table
+ * row, a list item or a card, where the row is the label. Toggle and CheckRow
+ * wrap their input in a <label>, which inside a row that is itself a link
+ * changes what a click activates; this is a real checkbox input the row can
+ * stop. `indeterminate` is the select-all over a partial selection.
+ */
+export declare function Checkbox({ checked, onChange, indeterminate, disabled, label, size, id, name, value, title, onClick, className, style }: CheckboxProps): import("react").JSX.Element;
+/**
+ * TriToggle: On / Off / Inherit — a setting that is either set here or left
+ * to whatever the level above says (a bucket inheriting its account's
+ * default, a folder its bucket's). `undefined` is Inherit. The chosen segment
+ * wears the answer's colour — on is ok, off is crit, inherit neutral — so a
+ * column of them reads at a glance. `inherit={false}` drops the third option
+ * where there is nothing to inherit from; there, `undefined` means not yet
+ * chosen and neither On nor Off is shown selected — showing Off would read as
+ * a decision nobody made. The first segment keeps the tab stop.
+ */
+export declare function TriToggle({ value, onChange, inherit, labels, inheritHint, tones, disabled, label, size }: {
+    value: boolean | undefined;
+    onChange: (value: boolean | undefined) => void;
+    /** offer Inherit (default true); without it, `undefined` shows nothing selected */
+    inherit?: boolean | undefined;
+    /** the three captions (default On / Off / Inherit) */
+    labels?: {
+        on?: ReactNode;
+        off?: ReactNode;
+        inherit?: ReactNode;
+    } | undefined;
+    /** what Inherit currently resolves to, as its tooltip ("Inherits: on, from the account") */
+    inheritHint?: ReactNode | undefined;
+    /** the colour each answer wears when chosen (default on: ok, off: crit, inherit: mut) */
+    tones?: {
+        on?: SegmentedTone;
+        off?: SegmentedTone;
+        inherit?: SegmentedTone;
+    } | undefined;
+    disabled?: boolean | undefined;
+    /** accessible name of the group */
+    label?: string | undefined;
+    size?: "sm" | "md" | undefined;
+}): import("react").JSX.Element;
+/**
+ * SettingRow: one setting on one line — its name and what it means on the
+ * left, its control on the right. The shape of a settings card that is a list
+ * of switches (TriToggle, Toggle, Segmented, a NumberInput) rather than a
+ * form of fields; stacks under 640px.
+ */
+export declare function SettingRow({ label, hint, dim, children, ...rest }: {
+    label: ReactNode;
+    /** what the setting does, or why it has no effect right now */
+    hint?: ReactNode | undefined;
+    /** the setting has no effect right now (its name is muted) */
+    dim?: boolean | undefined;
+    /** the control */
+    children?: ReactNode | undefined;
+} & Omit<HTMLAttributes<HTMLDivElement>, "children">): import("react").JSX.Element;
+//# sourceMappingURL=Controls.d.ts.map

package/dist/kit/Controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Controls.d.ts","sourceRoot":"","sources":["../../src/kit/Controls.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAiF,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGlM,OAAO,EAAQ,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAsC,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAyDpF,MAAM,WAAW,eAAe;IAC9B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,GAAG,SAAS,CAAC;IAC5C,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,sEAAsE;IACtE,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC5B,2DAA2D;IAC3D,IAAI,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,6EAA6E;IAC7E,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,gEAAgE;IAChE,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA0BpI;AAqCD,MAAM,WAAW,gBAAgB;IAC/B,2CAA2C;IAC3C,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,kGAAkG;IAClG,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,wEAAwE;IACxE,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,wCAAwC;IACxC,MAAM,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC/B,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,oDAAoD;IACpD,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAChC,uEAAuE;IACvE,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;CAC/B;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,IAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,GAC9H,EAAE,gBAAgB,+BA4ElB;AAyDD,MAAM,WAAW,WAAW;IAC1B,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAClC,qBAAqB;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IACjD,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,sBAAsB;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,kGAAkG;IAClG,SAAS,CAAC,EAAE,OAAO,GAAG,CAAC,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC,GAAG,SAAS,CAAC;IACjE,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;CACzB;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAO,EAAE,GAAS,EAAE,IAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAgB,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,WAAW,+BA6B1J;AAgCD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAC1F,qFAAqF;IACrF,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,qGAAqG;IACrG,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;IAClE,4FAA4F;IAC5F,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,KAAK,CAAC,EAAE,aAAa,GAAG,SAAS,CAAC;CACnC;AAED;;;;;;GAMG;AACH,wBAAgB,QAAQ,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAS,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,aAAa,+BAuB1J;AAID;;;;;;;;;GASG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAc,EAAE,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE;IAChH,KAAK,EAAE,OAAO,GAAG,SAAS,CAAC;IAC3B,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,mFAAmF;IACnF,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,sDAAsD;IACtD,MAAM,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,SAAS,CAAC;QAAC,GAAG,CAAC,EAAE,SAAS,CAAC;QAAC,OAAO,CAAC,EAAE,SAAS,CAAA;KAAE,GAAG,SAAS,CAAC;IAC9E,4FAA4F;IAC5F,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,yFAAyF;IACzF,KAAK,CAAC,EAAE;QAAE,EAAE,CAAC,EAAE,aAAa,CAAC;QAAC,GAAG,CAAC,EAAE,aAAa,CAAC;QAAC,OAAO,CAAC,EAAE,aAAa,CAAA;KAAE,GAAG,SAAS,CAAC;IACzF,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,SAAS,CAAC;CAChC,+BAoBA;AAoBD;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE;IAClE,KAAK,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,8DAA8D;IAC9D,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC1B,kBAAkB;IAClB,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CAClC,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,+BAUnD"}