@textui/widgets 0.1.0

package/dist/overlay/command-palette.js

@@ -0,0 +1,415 @@
+import { defineComponent, h, useEffect, useFocusScope, useInput, useRuntime, useState, useTheme, } from '@textui/core';
+import { TextInput } from '../control/index.js';
+import { Menu } from '../navigation/index.js';
+import { hint } from './shared.js';
+/**
+ * The command palette.
+ *
+ * It searches the command registry rather than a list someone maintained, so
+ * a command registered anywhere is reachable here the moment it exists - which
+ * is the payoff for insisting actions are commands. It also *runs* what it
+ * finds, so choosing "Open dialog" here and pressing the button that opens a
+ * dialog are the same act, reaching the same code.
+ *
+ * A command that declares an argument with `choices` gets a second level:
+ * choosing it lists the choices, and picking one runs the command with it.
+ * That is where sub-items come from - the command says what it needs and the
+ * palette asks, rather than every caller inventing its own submenu.
+ */
+export const CommandPalette = defineComponent('CommandPalette', (props) => {
+    const theme = useTheme();
+    const runtime = useRuntime();
+    const { commands, placeholder, onRun, onClose, execute = true, grouped = true, visibleRows = 8, width = 60, openAt, ...rest } = props;
+    const [query, setQuery] = useState('');
+    const [highlight, setHighlight] = useState(0);
+    /** The command being asked about, when the palette has drilled in. */
+    const [pending, setPending] = useState(null);
+    const [choices, setChoices] = useState([]);
+    /**
+     * Whether the answer to "what may I choose" is still on its way.
+     *
+     * An empty list is a real answer - a host advertises a harness and no models
+     * until somebody has signed into it - and it is not the same answer as "the
+     * request is in flight". Both draw an empty menu, so without this the panel
+     * that will never have anything in it and the one that is about to look
+     * identical, and neither of them says so.
+     */
+    const [asking, setAsking] = useState(false);
+    /** Bumped after a row that stays, so a `commands` function is read again. */
+    const [, setRefresh] = useState(0);
+    // The search field asks for focus itself. See `Dialog`.
+    useFocusScope({ trap: true, restore: true });
+    const app = runtime.app();
+    const given = typeof commands === 'function' ? commands() : commands;
+    const all = given ?? app?.commands.list({ slot: 'palette', enabledOnly: true }) ?? [];
+    const matches = pending ? [] : filterCommands(all, query);
+    const offered = pending ? filterChoices(choices, query) : [];
+    const rows = pending ? offered.map((choice) => choice.value) : matches.map((c) => c.id);
+    const index = Math.max(0, Math.min(highlight, rows.length - 1));
+    const items = pending
+        ? (offered.length > 0
+            ? offered.map((choice) => ({
+                id: choice.value,
+                label: choice.label ?? choice.value,
+                ...(choice.icon ? { icon: choice.icon } : {}),
+                // What it means, when the choice says; "default" otherwise, which is
+                // the only thing the palette itself knows about a value.
+                ...(choice.description
+                    ? { description: choice.description }
+                    : pending.arg.default === choice.value ? { description: 'default' } : {}),
+            }))
+            // One row, saying which kind of nothing this is. A disabled item rather
+            // than no items: the panel keeps its height, so the answer arriving does
+            // not move everything under it.
+            : [{
+                    id: '',
+                    label: asking
+                        ? `Asking${theme.glyphs.ellipsis}`
+                        : (query === '' ? 'Nothing to choose' : 'No match'),
+                    disabled: true,
+                }])
+        : matches.map((command, i) => ({
+            id: command.id,
+            label: command.title,
+            // `badge` when the row has state to report, the category otherwise.
+            // The icon stays put either way: it is what the row *is*.
+            description: command.badge ?? command.category,
+            icon: command.icon,
+            // A row may stand for a command registered under another id, and the
+            // key a person would press belongs to that one.
+            shortcut: command.shortcut ?? app?.keybindings.forCommand(command.id)[0],
+            // A chevron, from `Menu`, for anything that will ask a question.
+            children: argumentOf(command) ? [] : undefined,
+            separatorBefore: grouped && i > 0 && matches[i - 1].category !== command.category,
+        }));
+    const back = () => {
+        // `null` is "never mind": whatever the preview did gets undone by whoever
+        // did it, because only the command knows what it changed.
+        pending?.arg.preview?.(null);
+        setPending(null);
+        setChoices([]);
+        setQuery('');
+        setHighlight(0);
+    };
+    const finish = (id, args) => {
+        // A row that only flips something stays: closing after every switch means
+        // reopening the list to reach the next one, which is the wrong answer for
+        // a list of switches and the right one for a list of actions. The command
+        // says which it is.
+        const definition = given?.find((c) => c.id === id) ?? app?.commands.get(id);
+        const dismiss = definition?.keepOpen !== true;
+        // Close first: the command may open a layer of its own, and the palette
+        // should be gone by the time it does rather than sitting underneath it.
+        if (dismiss)
+            onClose?.();
+        if (execute) {
+            // A caller may hand the palette rows the registry has never seen - a
+            // list built for one screen, a switch per surface the running shell
+            // happens to have. Running those through `execute` would find nothing
+            // and silently do nothing, so a definition that came in through `commands`
+            // and is not registered is run directly.
+            const local = given?.find((c) => c.id === id);
+            if (local && !app?.commands.get(id)) {
+                void local.run?.(args ?? {}, {
+                    app: app,
+                    store: runtime.store,
+                    args: args ?? {},
+                });
+            }
+            else {
+                void app?.execute(id, args, 'palette');
+            }
+        }
+        // A row that stayed just changed something the list is describing, so the
+        // list has to be asked again. Nothing else will invalidate this component:
+        // it is not subscribed to whatever the row touched, and should not be.
+        if (!dismiss)
+            setRefresh((n) => n + 1);
+        onRun?.(id, args);
+    };
+    /** Ask about one command. `choices` may be a function, and may be async. */
+    const drillInto = (command, arg, collected = {}) => {
+        const resolved = typeof arg.choices === 'function' ? arg.choices() : arg.choices ?? [];
+        setPending({ command, arg, collected });
+        setQuery('');
+        setHighlight(0);
+        if (Array.isArray(resolved)) {
+            setAsking(false);
+            setChoices(resolved.map(asChoice));
+            return;
+        }
+        setChoices([]);
+        setAsking(true);
+        // Answered either way: a `choices` function that rejects leaves the panel
+        // saying "nothing to choose", which is true of what it can offer.
+        void resolved
+            .then((list) => setChoices(list.map(asChoice)))
+            .catch(() => setChoices([]))
+            .finally(() => setAsking(false));
+    };
+    /**
+     * Answer one argument, then ask about the next one or run it.
+     *
+     * A command with two things to ask about used to have the first one
+     * collected and the second one skipped, which meant running it with an
+     * argument it said was required - and `execute` refuses that, loudly.
+     */
+    const answer = (value) => {
+        if (!pending)
+            return;
+        const collected = { ...pending.collected, [pending.arg.name]: value };
+        const next = argumentOf(pending.command, collected);
+        if (next) {
+            drillInto(pending.command, next, collected);
+            return;
+        }
+        finish(pending.command.id, collected);
+    };
+    const choose = () => {
+        if (pending) {
+            // An argument with choices is answered by picking one; an argument
+            // without any is answered by typing it. The palette already has a field
+            // and a list, so it is the same overlay either way - and without this a
+            // command that asks for a name could be *opened* and never *answered*.
+            if (pending.arg.choices === undefined) {
+                const typed = query.trim();
+                // Nothing typed is not an answer. Running anyway hands the command an
+                // empty required argument, which is the error it exists to prevent.
+                if (typed === '')
+                    return;
+                answer(typed);
+                return;
+            }
+            const value = rows[index];
+            if (value === undefined)
+                return;
+            answer(value);
+            return;
+        }
+        const command = matches[index];
+        if (!command)
+            return;
+        const arg = argumentOf(command);
+        if (!arg) {
+            finish(command.id);
+            return;
+        }
+        drillInto(command, arg);
+    };
+    // Opening at a command is the same act as choosing it, minus the choosing.
+    useEffect(() => {
+        if (!openAt)
+            return;
+        const command = all.find((c) => c.id === openAt) ?? app?.commands.get(openAt);
+        const arg = command ? argumentOf(command) : undefined;
+        if (command && arg)
+            drillInto(command, arg);
+    }, [openAt]);
+    // The field owns typing; the list owns up, down and enter. Without this
+    // split, Enter submits the search box and the highlighted command is
+    // never the thing that runs.
+    useInput((event) => {
+        if (event.name === 'escape') {
+            // Opened at a command, there is nothing behind the question that
+            // anybody chose to be at: the caller drilled in on their behalf, and
+            // the level underneath is a list of one. Backing out to it reads as
+            // "escape did nothing", and the second escape - the one that would
+            // close it - is spent leaving a screen nobody asked to see.
+            if (pending && !openAt) {
+                back();
+                return true;
+            }
+            // Whatever a highlighted choice previewed has to be put back on the
+            // way out, and `null` is how the command is told to undo it - only it
+            // knows what it changed. `back()` did that, so closing instead of
+            // backing has to do it too, or escaping a theme picker leaves the
+            // theme it was merely showing you.
+            pending?.arg.preview?.(null);
+            onClose?.();
+            return true;
+        }
+        if (event.name === 'left' && pending && query === '' && !openAt) {
+            back();
+            return true;
+        }
+        // Wrapping, both ways. A list you can walk off the end of makes you
+        // check where you are before every press; one that comes round means the
+        // last item is one key from the first.
+        const wrap = (n) => rows.length === 0 ? 0 : (n + rows.length) % rows.length;
+        const move = (to) => {
+            setHighlight(to);
+            // Show what the choice would do while it is merely highlighted. The
+            // command put the `preview` there; the palette only reports movement.
+            if (pending)
+                pending.arg.preview?.(rows[to] ?? null);
+            return true;
+        };
+        if (event.name === 'up')
+            return move(wrap(index - 1));
+        if (event.name === 'down')
+            return move(wrap(index + 1));
+        return false;
+    }, { global: true });
+    const highlighted = pending ? undefined : matches[index];
+    const move = `${theme.glyphs.arrowUp}${theme.glyphs.arrowDown} move`;
+    // What the highlighted row is, in full.
+    //
+    // The rows themselves have to fit, so a choice's own sentence is truncated
+    // there - and a sentence about what a mode does is exactly the thing a
+    // person needs whole. So the line under the list follows the highlight: the
+    // choice's description while there is one, the question's otherwise.
+    const chosen = pending ? offered[index] : undefined;
+    const detail = pending
+        ? chosen?.description
+            ?? pending.arg.description ?? `${pending.command.title} needs a ${pending.arg.name}`
+        : highlighted?.description ?? highlighted?.id ?? '';
+    return h('box', {
+        role: 'dialog',
+        label: 'Commands',
+        border: theme.border,
+        bg: 'overlay',
+        width,
+        direction: 'column',
+        // A border is a gutter as well as a line. Without one - `paper` sets
+        // `border: 'none'` - the rows run flush to the panel edge and the last
+        // character sits against whatever is behind it.
+        ...(theme.border === 'none' ? { padding: { left: 1, right: 1 } } : {}),
+        // The crumb names the command, not its argument. "commands › Theme" is
+        // where you are; "commands › id" is what the parameter happens to be
+        // called, which is the author's business rather than the reader's.
+        title: pending
+            ? ` commands ${theme.glyphs.breadcrumb} ${pending.command.title} `
+            : ' commands ',
+        ...rest,
+    }, h(TextInput, {
+        value: query,
+        onChange: (next) => {
+            setQuery(next);
+            setHighlight(0);
+        },
+        onSubmit: choose,
+        /*
+         * `right` drills into a command's choices, which the hint row has been
+         * advertising as `> sub-items` all along.
+         *
+         * It used to be a case in the handler above, and that handler is global
+         * - so it ran only if the focused field declined the key first, and a
+         * single-line field never declines `right`. The key did nothing and the
+         * footer said it did something. `onEdge` is how a focused field hands
+         * a key back.
+         */
+        onEdge: (edge) => {
+            if (edge !== 'end' || pending)
+                return;
+            const command = matches[index];
+            if (command && argumentOf(command))
+                choose();
+        },
+        placeholder: pending
+            ? (pending.arg.description ?? (pending.arg.choices === undefined
+                ? `${pending.command.title}${theme.glyphs.ellipsis}`
+                : `Choose ${pending.command.title.toLowerCase()}${theme.glyphs.ellipsis}`))
+            : (placeholder ?? `Type a command${theme.glyphs.ellipsis}`),
+        search: true,
+        autoFocus: true,
+        border: 'none',
+    }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), h(Menu, {
+        items,
+        visibleRows,
+        interactive: false,
+        activeId: rows[index],
+        onSelect: (id) => {
+            const at = rows.indexOf(id);
+            if (at >= 0)
+                setHighlight(at);
+            choose();
+        },
+    }), h('box', { height: 1, fill: theme.borderChars().top, fg: 'borderSubtle' }), 
+    // What the highlighted row actually is, and how to move around. A palette
+    // that shows only titles makes you run something to find out what it does.
+    h('box', { direction: 'row', gap: 1 }, h('text', { content: detail, fg: 'muted', flex: 1, truncate: 'end' }), h('text', { content: `${rows.length}`, fg: 'subtle' })), h('box', { direction: 'row', gap: 1 }, h('text', {
+        content: pending
+            ? (pending.arg.choices === undefined
+                ? hint(theme, ['type it', 'enter confirm', 'esc back'])
+                // Nothing to choose is nothing to press enter on, and offering it
+                // is how a panel reads as broken rather than as empty.
+                : hint(theme, rows.length > 0 ? [move, 'enter choose', 'esc back'] : ['esc back']))
+            : hint(theme, [move, 'enter run', `${theme.glyphs.chevronRight} sub-items`, 'esc close']),
+        fg: 'subtle',
+        truncate: 'end',
+    })));
+});
+/**
+ * The argument the palette should ask about, if there is one.
+ *
+ * A fixed set of choices, or something required that nothing has supplied.
+ * Only the first kind used to count, which meant a command declaring "I need a
+ * title" ran with no title and did nothing - the one failure mode that looks
+ * exactly like a broken key.
+ *
+ * Exported because "will this command ask something?" is a question other
+ * chrome has to answer too - a menu row wants a chevron and wants to hand off
+ * rather than run - and the menu bar had written its own version that
+ * *called* the `choices` function to find out. A function is allowed to be
+ * async, so that answer was sometimes a promise, and the copy went on to call
+ * `.map` on it. Whether a command will ask is a property of its declaration;
+ * nothing has to be resolved to know it.
+ */
+export function argumentOf(command, collected = {}) {
+    return (command.args ?? []).find((arg) => collected[arg.name] === undefined &&
+        (arg.choices !== undefined || (arg.required === true && arg.default === undefined)));
+}
+/** The short form and the long one, as one shape. */
+function asChoice(choice) {
+    return typeof choice === 'string' ? { value: choice } : choice;
+}
+/**
+ * Filter on everything a person can see.
+ *
+ * The label, because that is what they are reading; the value, because a host
+ * id is often what somebody types from memory; and the description, because
+ * "asks before editing" is how you find a mode whose label is "Default".
+ */
+function filterChoices(choices, query) {
+    const q = query.trim().toLowerCase();
+    if (q === '')
+        return choices;
+    return choices.filter((choice) => `${choice.label ?? ''} ${choice.value} ${choice.description ?? ''}`
+        .toLowerCase().includes(q));
+}
+export function filterCommands(commands, query) {
+    const q = query.trim().toLowerCase();
+    if (q === '')
+        return commands;
+    const scored = [];
+    for (const command of commands) {
+        const haystacks = [command.title, command.id, ...(command.keywords ?? [])];
+        let best = -1;
+        for (const haystack of haystacks) {
+            const score = subsequenceScore(haystack.toLowerCase(), q);
+            if (score > best)
+                best = score;
+        }
+        if (best >= 0)
+            scored.push({ command, score: best });
+    }
+    return scored.sort((a, b) => b.score - a.score).map((s) => s.command);
+}
+function subsequenceScore(haystack, needle) {
+    if (haystack.startsWith(needle))
+        return 1000 - haystack.length;
+    if (haystack.includes(needle))
+        return 500 - haystack.indexOf(needle);
+    let hi = 0;
+    let score = 0;
+    let streak = 0;
+    for (const char of needle) {
+        const found = haystack.indexOf(char, hi);
+        if (found === -1)
+            return -1;
+        streak = found === hi ? streak + 1 : 0;
+        score += 10 + streak * 5 - (found - hi);
+        hi = found + 1;
+    }
+    return score;
+}

package/dist/overlay/dialog.d.ts

@@ -0,0 +1,16 @@
+import type { BoxProps, SemanticVariant } from '@textui/core';
+export interface DialogProps extends BoxProps {
+    title?: string;
+    /** Buttons along the bottom. The first is the default action. */
+    actions?: {
+        id: string;
+        label: string;
+        tone?: SemanticVariant;
+        onPress?(): void;
+    }[];
+    onClose?(): void;
+    /** Cells wide. The dialog centres itself in whatever is left. */
+    width?: number;
+}
+export declare const Dialog: (props: DialogProps) => import("@textui/core").RenderOutput;
+//# sourceMappingURL=dialog.d.ts.map

package/dist/overlay/dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.d.ts","sourceRoot":"","sources":["../../src/overlay/dialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,WAAW,WAAY,SAAQ,QAAQ;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iEAAiE;IACjE,OAAO,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,IAAI,IAAI,CAAA;KAAE,EAAE,CAAC;IACpF,OAAO,CAAC,IAAI,IAAI,CAAC;IACjB,iEAAiE;IACjE,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,MAAM,6DAmDjB,CAAC"}

package/dist/overlay/dialog.js

@@ -0,0 +1,44 @@
+import { defineComponent, h, useFocusScope, useInput, useTheme } from '@textui/core';
+import { Button } from '../control/index.js';
+export const Dialog = defineComponent('Dialog', (props) => {
+    const theme = useTheme();
+    const { title, actions = [], onClose, children, width = 50, ...rest } = props;
+    // No `autoFocus` on the scope: a dialog's own controls say which of them
+    // wants focus - the first action, or the field in a prompt - and the scope
+    // taking it first would hand it to whichever box happened to register
+    // earliest. The flag never fired before, because a scope is empty when it
+    // is activated; now that it works, it has to mean what it says.
+    useFocusScope({ trap: true, restore: true });
+    // Only consume escape when there is something to do with it. Consuming it
+    // regardless would stop the layer manager dismissing a dialog that was
+    // opened without an `onClose` - which is most of them.
+    useInput((event) => {
+        if (event.name !== 'escape' || !onClose)
+            return false;
+        onClose();
+        return true;
+    }, { global: true });
+    return h('box', {
+        role: 'dialog',
+        label: title,
+        border: theme.border,
+        bg: 'overlay',
+        padding: [0, 1],
+        width,
+        direction: 'column',
+        title,
+        ...rest,
+    }, h('box', { direction: 'column', flex: 1 }, children), actions.length > 0
+        ? h('box', { direction: 'row', gap: 1, justify: 'end' }, ...actions.map((action, i) => h(Button, {
+            key: action.id,
+            label: action.label,
+            tone: action.tone,
+            // Every action is a line at rest; the focused one fills. Making
+            // the default action solid as well meant two filled buttons the
+            // moment focus moved, and no way to tell which one Enter meant.
+            variant: 'outline',
+            autoFocus: i === 0,
+            onPress: action.onPress,
+        })))
+        : null);
+});

package/dist/overlay/index.d.ts

@@ -0,0 +1,84 @@
+import type { ComponentDefinition, Disposable, LayerEntry, LayerPosition, SemanticVariant, TextUIApp } from '@textui/core';
+import type { ToastHostProps } from './toast-host.js';
+/**
+ * Overlays.
+ *
+ * Every one of these is a layer entry, not a component that draws itself over
+ * its neighbours - so focus trapping, dismissal and paint order are decided
+ * once by the layer manager rather than five times, slightly differently.
+ */
+export * from './command-palette.js';
+export * from './dialog.js';
+export * from './layer-scope.js';
+export * from './path-picker.js';
+export * from './prompt-dialog.js';
+export * from './toast.js';
+export * from './toast-host.js';
+export * from './tooltip.js';
+export interface ConfirmOptions {
+    title?: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    tone?: SemanticVariant;
+}
+/**
+ * The composition rule the brief asks for: a dialog can be assembled by hand
+ * out of public components, and the common case gets a one-liner that returns
+ * a promise. Both go through the same layer manager.
+ */
+export declare function confirm(layers: {
+    open(entry: LayerEntry): {
+        dispose(): void;
+    };
+}, options: ConfirmOptions): Promise<boolean>;
+export interface PromptOptions {
+    title?: string;
+    message?: string;
+    placeholder?: string;
+    initialValue?: string;
+    mask?: string;
+}
+export declare function prompt(layers: {
+    open(entry: LayerEntry): {
+        dispose(): void;
+    };
+}, options: PromptOptions): Promise<string | null>;
+/**
+ * Picking a path by looking at it.
+ *
+ * The third question, beside `confirm` and `prompt`, and it exists because the
+ * other two cannot ask it. A path typed blind into a text field is the worst
+ * way to give one: you have to already know the answer, which is the opposite
+ * of what picking is for.
+ *
+ * It reads the **resource registry**, never the filesystem. `search` made that
+ * choice already and it is why search works on whatever is mounted; a picker
+ * that reached for `node:fs` would work on `file:` and nothing else, and the
+ * first thing anyone wants to pick off a remote is a file.
+ */
+export interface PickOptions {
+    /** Where to start looking. A directory URI. */
+    start: string;
+    /** What counts as an answer. Directories are walked through either way. */
+    wants?: 'file' | 'directory';
+    title?: string;
+    placeholder?: string;
+    visibleRows?: number;
+    width?: number;
+}
+export declare function pick(app: TextUIApp, options: PickOptions): Promise<string | null>;
+export interface NotifyOptions {
+    message: string;
+    tone?: SemanticVariant;
+    title?: string;
+    icon?: string;
+    /** Milliseconds on screen. 0 keeps it until it is closed. */
+    timeoutMs?: number;
+    /** Reuse an id to replace a standing toast rather than stack another. */
+    id?: string;
+}
+export declare function notify(app: TextUIApp, options: NotifyOptions): Disposable;
+export declare function toastPosition(anchor: ToastHostProps['anchor']): LayerPosition;
+export declare const OVERLAY_COMPONENTS: ComponentDefinition[];
+//# sourceMappingURL=index.d.ts.map

package/dist/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,mBAAmB,EACnB,UAAU,EACV,UAAU,EACV,aAAa,EACb,eAAe,EACf,SAAS,EACV,MAAM,cAAc,CAAC;AAMtB,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAKtD;;;;;;GAMG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAE7B,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,eAAe,CAAC;CACxB;AAED;;;;GAIG;AACH,wBAAgB,OAAO,CACrB,MAAM,EAAE;IAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG;QAAE,OAAO,IAAI,IAAI,CAAA;KAAE,CAAA;CAAE,EACxD,OAAO,EAAE,cAAc,GACtB,OAAO,CAAC,OAAO,CAAC,CAwClB;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,MAAM,CACpB,MAAM,EAAE;IAAE,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG;QAAE,OAAO,IAAI,IAAI,CAAA;KAAE,CAAA;CAAE,EACxD,OAAO,EAAE,aAAa,GACrB,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA6BxB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,WAAW;IAC1B,+CAA+C;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,KAAK,CAAC,EAAE,MAAM,GAAG,WAAW,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,IAAI,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CA8BjF;AAED,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,eAAe,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAID,wBAAgB,MAAM,CAAC,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,aAAa,GAAG,UAAU,CAQzE;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,cAAc,CAAC,QAAQ,CAAC,GAAG,aAAa,CAO7E;AAED,eAAO,MAAM,kBAAkB,EAAE,mBAAmB,EASnD,CAAC"}