veryfront 0.1.997 → 0.1.998

package/esm/src/react/components/chat/model-selector.js

@@ -1,14 +1,39 @@
 /**
- * ModelSelector - Dropdown for switching models at runtime
+ * ModelSelector — Popover + Command combobox for switching models at runtime.
  *
- * Opens upward from the trigger using fixed positioning
- * so it never affects the surrounding layout.
+ * Built on the same primitives as `AgentPicker` (Popover → Command), so the
+ * dropdown portals via `Floating` (never clips in the composer/iframe) and gets
+ * keyboard nav + search for free. Rows show the real provider logo from
+ * models.dev. Two trigger styles via `variant`: `pill` (logo + label + chevron)
+ * or `icon` (logo only, like Studio's desktop picker).
  *
- * Implements WAI-ARIA listbox pattern with full keyboard navigation.
+ * @module react/components/chat/model-selector
  */
 import * as React from "../../../../react/react.js";
 import { cn } from "./theme.js";
-import { ChevronDownIcon } from "./icons/index.js";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "./ui/command.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover.js";
+import { Pill } from "./ui/pill.js";
+import { CheckIcon, ChevronDownIcon, SparklesIcon } from "./icons/index.js";
+import { COMPONENT_ERROR } from "../../../errors/error-registry.js";
+/** Provider slug for a model (explicit `provider`, else the `value` prefix). */
+function providerOf(model) {
+    return model?.provider ?? model?.value.split("/")[0];
+}
+/**
+ * Real provider logo from models.dev (`dark:invert` for dark mode, same source
+ * as Studio). Falls back to a generic glyph if the slug has no logo.
+ */
+function ProviderLogo({ provider, className }) {
+    const [failed, setFailed] = React.useState(false);
+    const key = provider?.toLowerCase();
+    if (!key || failed) {
+        return React.createElement(SparklesIcon, { className: cn("size-4.5 text-[var(--faint)]", className) });
+    }
+    return (React.createElement("img", { alt: "", "aria-hidden": "true", referrerPolicy: "no-referrer", onError: () => setFailed(true), className: cn("size-5 shrink-0 object-contain dark:invert", className), src: `https://models.dev/logos/${key}.svg` }));
+}
+/** Search box appears once the model count crosses this. */
+const SEARCH_THRESHOLD = 6;
 function groupByProvider(models) {
     const groups = new Map();
     for (const model of models) {
@@ -23,124 +48,126 @@ function groupByProvider(models) {
     }
     return groups;
 }
-/** Render model selector. */
-export function ModelSelector({ models, value, onChange, className, disabled, }) {
-    const [open, setOpen] = React.useState(false);
-    const triggerRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
-    const [pos, setPos] = React.useState(null);
-    const [focusedIndex, setFocusedIndex] = React.useState(-1);
-    const selected = models.find((m) => m.value === value) ?? models[0];
-    const listboxId = React.useId();
-    // Measure trigger and position dropdown above it, right-aligned
-    React.useEffect(() => {
-        if (!open || !triggerRef.current)
-            return;
-        const r = triggerRef.current.getBoundingClientRect();
-        setPos({
-            bottom: globalThis.innerHeight - r.top + 6,
-            right: globalThis.innerWidth - r.right,
+const ModelSelectorContext = React.createContext(null);
+/**
+ * Read the enclosing `ModelSelector` selection + open state. Throws when used
+ * outside a `<ModelSelector>`.
+ */
+export function useModelSelector() {
+    const ctx = React.useContext(ModelSelectorContext);
+    if (!ctx) {
+        throw COMPONENT_ERROR.create({
+            detail: "useModelSelector must be used within a ModelSelector",
         });
-        // Focus the selected item when opening
-        const selectedIdx = models.findIndex((m) => m.value === (value ?? selected?.value));
-        setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
-    }, [open, models, value, selected?.value]);
-    // Close on outside click
-    React.useEffect(() => {
-        if (!open)
-            return;
-        function handleMouseDown(e) {
-            const target = e.target;
-            if (triggerRef.current?.contains(target) ||
-                dropdownRef.current?.contains(target)) {
-                return;
-            }
-            setOpen(false);
-        }
-        document.addEventListener("mousedown", handleMouseDown);
-        return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [open]);
-    // Keyboard navigation
-    React.useEffect(() => {
-        if (!open)
-            return;
-        function handleKeyDown(e) {
-            switch (e.key) {
-                case "Escape":
-                    setOpen(false);
-                    triggerRef.current?.focus();
-                    break;
-                case "ArrowDown":
-                    e.preventDefault();
-                    setFocusedIndex((prev) => (prev + 1) % models.length);
-                    break;
-                case "ArrowUp":
-                    e.preventDefault();
-                    setFocusedIndex((prev) => (prev - 1 + models.length) % models.length);
-                    break;
-                case "Home":
-                    e.preventDefault();
-                    setFocusedIndex(0);
-                    break;
-                case "End":
-                    e.preventDefault();
-                    setFocusedIndex(models.length - 1);
-                    break;
-                case "Enter":
-                case " ":
-                    e.preventDefault();
-                    if (focusedIndex >= 0 && focusedIndex < models.length) {
-                        onChange(models[focusedIndex].value);
-                        setOpen(false);
-                        triggerRef.current?.focus();
-                    }
-                    break;
-            }
-        }
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [open, focusedIndex, models, onChange]);
-    // Scroll focused item into view
-    React.useEffect(() => {
-        if (!open || focusedIndex < 0)
-            return;
-        const option = dropdownRef.current?.querySelector(`[data-index="${focusedIndex}"]`);
-        option?.scrollIntoView({ block: "nearest" });
-    }, [open, focusedIndex]);
+    }
+    return ctx;
+}
+/** The pill (or icon) combobox trigger. Toggles the popover. */
+function ModelSelectorTrigger({ variant = "pill", children, className }) {
+    const { selected, disabled } = useModelSelector();
+    const trigger = children
+        ? (React.createElement("button", { type: "button", disabled: disabled, className: className }, children))
+        : variant === "icon"
+            ? (React.createElement("button", { type: "button", disabled: disabled, "aria-label": selected?.label ?? "Select model", className: cn("flex size-9 items-center justify-center rounded-full text-[var(--foreground)] transition-colors hover:bg-[var(--tertiary)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--edge-medium)]", "disabled:opacity-50 disabled:cursor-not-allowed", className) },
+                React.createElement(ProviderLogo, { provider: providerOf(selected), className: "size-5" })))
+            : (React.createElement(Pill, { className: cn("min-w-0 max-w-full", disabled && "opacity-50 pointer-events-none", className) },
+                React.createElement(ProviderLogo, { provider: providerOf(selected), className: "size-4" }),
+                React.createElement("span", { className: "min-w-0 truncate" }, selected?.label ?? "Select model"),
+                React.createElement(ChevronDownIcon, { className: "ml-auto" })));
+    return React.createElement(PopoverTrigger, { asChild: true }, trigger);
+}
+ModelSelectorTrigger.displayName = "ModelSelector.Trigger";
+/** The popover surface wrapping a `Command` (search + list region). */
+function ModelSelectorContent({ showSearch = false, searchPlaceholder = "Search models...", children, className, }) {
+    return (React.createElement(PopoverContent, { align: "start", className: cn("min-w-[260px] p-0! rounded-lg", className) },
+        React.createElement(Command, { className: "bg-transparent" },
+            showSearch && React.createElement(CommandInput, { placeholder: searchPlaceholder }),
+            children)));
+}
+ModelSelectorContent.displayName = "ModelSelector.Content";
+/** The scrollable `Command` list region. */
+function ModelSelectorList({ children, className }) {
+    return (React.createElement(CommandList, { className: cn("max-h-[320px]", className) }, children));
+}
+ModelSelectorList.displayName = "ModelSelector.List";
+/** A single model row (provider logo + label + optional badge + check). */
+function ModelSelectorItem({ model, selected, className }) {
+    const { value, selected: selectedModel, onSelect } = useModelSelector();
+    const selectedValue = value ?? selectedModel?.value;
+    const isSelected = selected ?? model.value === selectedValue;
+    return (React.createElement(CommandItem, { value: model.label, onSelect: () => onSelect(model.value), className: className },
+        React.createElement(ProviderLogo, { provider: providerOf(model), className: "size-4.5" }),
+        React.createElement("span", { className: "min-w-0 flex-1 truncate" }, model.label),
+        model.badge && (React.createElement("span", { className: "rounded-full border border-[var(--outline-border)] px-1.5 py-0.5 text-[10px] font-medium text-[var(--faint)]" }, model.badge)),
+        isSelected && React.createElement(CheckIcon, { className: "ml-auto opacity-70" })));
+}
+ModelSelectorItem.displayName = "ModelSelector.Item";
+/** The default preset body — provider-grouped model rows. */
+function ModelSelectorPresetBody({ models, selectedValue, renderRow, onSelect, }) {
     const hasGroups = models.some((m) => m.provider);
     const groups = hasGroups ? groupByProvider(models) : null;
-    function handleSelect(model) {
-        onChange(model.value);
-        setOpen(false);
-        triggerRef.current?.focus();
-    }
-    function renderItem(model, flatIndex) {
-        const isActive = model.value === (value ?? selected?.value);
-        const isFocused = flatIndex === focusedIndex;
-        return (React.createElement("div", { key: model.value, role: "option", "aria-selected": isActive, "data-index": flatIndex, onClick: () => handleSelect(model), onMouseEnter: () => setFocusedIndex(flatIndex), className: cn("w-full text-left px-3 py-2 text-sm transition-all rounded-lg cursor-pointer", isActive
-                ? "bg-[var(--foreground)]/[0.05] text-[var(--foreground)]"
-                : "text-[var(--card-foreground)] hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]", isFocused && !isActive && "bg-[var(--foreground)]/[0.05]") },
-            React.createElement("div", { className: "flex items-center gap-2" },
-                React.createElement("span", { className: "font-medium" }, model.label),
-                model.badge && (React.createElement("span", { className: "px-1.5 py-0.5 text-[10px] font-medium rounded-full bg-[var(--foreground)]/[0.07] text-[var(--muted-foreground)]" }, model.badge))),
-            model.description && (React.createElement("p", { className: "text-xs text-[var(--muted-foreground)] mt-0.5" }, model.description))));
+    function renderModel(model) {
+        const isSelected = model.value === selectedValue;
+        if (renderRow) {
+            return (React.createElement(React.Fragment, { key: model.value }, renderRow({
+                model,
+                selected: isSelected,
+                onSelect: () => onSelect(model.value),
+            })));
+        }
+        return (React.createElement(ModelSelectorItem, { key: model.value, model: model, selected: isSelected }));
     }
-    // Build flat index mapping for grouped layout
-    let flatIndex = 0;
-    const dropdownContent = groups
-        ? Array.from(groups.entries()).map(([provider, items], groupIndex) => (React.createElement("div", { key: provider || "__ungrouped", role: "group", "aria-label": provider || undefined },
-            groupIndex > 0 && React.createElement("div", { className: "h-px bg-[var(--border)] my-1" }),
-            provider && (React.createElement("div", { className: "px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wider text-[var(--input-placeholder)]" }, provider)),
-            items.map((item) => renderItem(item, flatIndex++)))))
-        : models.map((item) => renderItem(item, flatIndex++));
-    return (React.createElement("div", { className: cn("inline-block", className) },
-        React.createElement("button", { ref: triggerRef, type: "button", onClick: () => !disabled && setOpen((prev) => !prev), disabled: disabled, "aria-haspopup": "listbox", "aria-expanded": open, "aria-controls": open ? listboxId : undefined, className: cn("inline-flex items-center gap-1.5 text-xs px-3 py-1.5 rounded-full", "border border-[var(--border)]", "bg-[var(--card)]", "text-[var(--card-foreground)]", "hover:bg-[var(--foreground)]/[0.05] hover:text-[var(--foreground)]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)] focus-visible:ring-offset-2", "transition-all disabled:opacity-50 disabled:cursor-not-allowed") },
-            React.createElement("span", null, selected?.label ?? "Select model"),
-            React.createElement(ChevronDownIcon, { className: cn("size-3 transition-transform rotate-180", open && "rotate-0") })),
-        open && pos && (React.createElement("div", { ref: dropdownRef, id: listboxId, role: "listbox", "aria-label": "Select model", className: "min-w-[220px] max-h-[320px] overflow-auto rounded-xl border border-[var(--border)] bg-[var(--card)] shadow-xl p-1", style: {
-                position: "fixed",
-                bottom: pos.bottom,
-                right: pos.right,
-                zIndex: 9999,
-            } }, dropdownContent))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(CommandEmpty, null, "No models found."),
+        groups
+            ? Array.from(groups.entries()).map(([provider, items]) => (React.createElement(CommandGroup, { key: provider || "__ungrouped", heading: provider || undefined }, items.map((model) => renderModel(model)))))
+            : (React.createElement(CommandGroup, null, models.map((model) => renderModel(model))))));
+}
+/**
+ * `ModelSelector.Root` — context provider + the popover shell. No children
+ * renders the default data-driven preset; pass children to recompose from
+ * `ModelSelector.Trigger` / `Content` / `List` / `Item`.
+ */
+function ModelSelectorRoot({ models, value, onChange, className, disabled, variant = "pill", renderTrigger, renderRow, children, }) {
+    const [open, setOpen] = React.useState(false);
+    const selected = models.find((m) => m.value === value) ?? models[0];
+    const selectedValue = value ?? selected?.value;
+    const showSearch = models.length > SEARCH_THRESHOLD;
+    const handleSelect = React.useCallback((modelValue) => {
+        setOpen(false);
+        onChange(modelValue);
+    }, [onChange]);
+    const context = {
+        value,
+        selected,
+        onSelect: handleSelect,
+        open,
+        setOpen,
+        disabled,
+    };
+    // Back-compat: `renderTrigger` fully replaces the default trigger element and
+    // is rendered directly inside `PopoverTrigger asChild`.
+    const presetTrigger = renderTrigger
+        ? React.createElement(PopoverTrigger, { asChild: true }, renderTrigger({ model: selected, open }))
+        : React.createElement(ModelSelectorTrigger, { variant: variant, className: className });
+    return (React.createElement(ModelSelectorContext.Provider, { value: context },
+        React.createElement(Popover, { open: open, onOpenChange: disabled ? undefined : setOpen }, children ?? (React.createElement(React.Fragment, null,
+            presetTrigger,
+            React.createElement(ModelSelectorContent, { showSearch: showSearch },
+                React.createElement(ModelSelectorList, null,
+                    React.createElement(ModelSelectorPresetBody, { models: models, selectedValue: selectedValue, renderRow: renderRow, onSelect: handleSelect }))))))));
 }
+ModelSelectorRoot.displayName = "ModelSelector.Root";
+/**
+ * ModelSelector — render `<ModelSelector models={...} .../>` for the default
+ * data-driven combobox, or compose `ModelSelector.Trigger` / `Content` /
+ * `List` / `Item` for a custom menu. Mirrors the `ToolCall` compound: render
+ * it, or compose it.
+ */
+export const ModelSelector = Object.assign(ModelSelectorRoot, {
+    Root: ModelSelectorRoot,
+    Trigger: ModelSelectorTrigger,
+    Content: ModelSelectorContent,
+    List: ModelSelectorList,
+    Item: ModelSelectorItem,
+});

package/esm/src/react/components/chat/theme.d.ts

@@ -7,18 +7,6 @@
  * injected via <style> on the chat root element.
  */
 import { type ClassValue } from "../../../utils/clsx.js";
-/**
- * Generates scoped CSS for the chat UI design tokens.
- * Uses [data-vf-chat] as scope so tokens don't leak to the page.
- *
- * If a host application (e.g. Studio) already defines these CSS custom
- * properties on :root, the host values cascade through and our fallbacks
- * are never reached — because we set them on [data-vf-chat] which has
- * lower specificity for inherited vars. We intentionally only set them
- * on the chat root so parent-defined tokens take precedence.
- *
- * Dark mode: supports prefers-color-scheme, .dark, and [data-theme="dark"].
- */
 export declare function generateTokenCSS(): string;
 /** Public API contract for chat theme. */
 export interface ChatTheme {
@@ -57,6 +45,14 @@ export declare const defaultAgentTheme: AgentTheme;
 export declare function mergeThemes<T>(defaultTheme: T, userTheme?: Partial<T>): T;
 /**
  * Utility to combine class names.
+ *
+ * NOTE: this is `clsx` only — it does NOT tailwind-merge. A `className` passed by
+ * a consumer is *appended*, not deduped, so it does not automatically beat a base
+ * utility of the same property (both end up in the class list, last-wins by
+ * CSS-source order, which is usually the base). To override a base utility from
+ * userland, use the `!` important suffix — e.g. `px-8!`, `rounded-xl!`, `size-6!`.
+ * Every cva-based primitive (Button, Card, Input, Textarea, Badge, Pill, Select,
+ * Tabs) inherits this behaviour.
  */
 export declare function cn(...inputs: ClassValue[]): string;
 type VariantMap = Record<string, Record<string, ClassValue>>;
@@ -88,6 +84,7 @@ export declare const chatButtonVariants: VariantClassFunction<{
         "icon-xs": string;
         "icon-sm": string;
         "icon-default": string;
+        "icon-lg": string;
     };
 }>;
 export declare const chatContainerVariants: VariantClassFunction<{

package/esm/src/react/components/chat/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/chat/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,wBAAwB,CAAC;AAiF/D;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAWzC;AAMD,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAe9B,CAAC;AAEF,2CAA2C;AAC3C,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,UAO/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,YAAY,EAAE,CAAC,EACf,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GACrB,CAAC,CAsBH;AAED;;GAEG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAMD,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AAE7D,KAAK,cAAc,CAAC,SAAS,SAAS,UAAU,IAC5C;KACC,IAAI,IAAI,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS;CACrE,GACC;IACA,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEJ,KAAK,oBAAoB,CAAC,SAAS,SAAS,UAAU,IAAI,CACxD,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAChC,MAAM,CAAC;AA8BZ,eAAO,MAAM,eAAe;;;;;;;EAc1B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;EAgC9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;EAYhC,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../../../src/src/react/components/chat/theme.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,OAAO,EAAE,KAAK,UAAU,EAAQ,MAAM,wBAAwB,CAAC;AAkI/D,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAMD,0CAA0C;AAC1C,MAAM,WAAW,SAAS;IACxB,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,OAAO,CAAC,EAAE;QACR,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,IAAI,CAAC,EAAE,MAAM,CAAC;KACf,CAAC;IACF,mBAAmB;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,EAAE,SAgB9B,CAAC;AAEF,2CAA2C;AAC3C,MAAM,WAAW,UAAU;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,EAAE,UAS/B,CAAC;AAMF;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAC3B,YAAY,EAAE,CAAC,EACf,SAAS,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,GACrB,CAAC,CAsBH;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,GAAG,MAAM,CAElD;AAMD,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC;AAE7D,KAAK,cAAc,CAAC,SAAS,SAAS,UAAU,IAC5C;KACC,IAAI,IAAI,MAAM,SAAS,CAAC,CAAC,EAAE,MAAM,SAAS,CAAC,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS;CACrE,GACC;IACA,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAEJ,KAAK,oBAAoB,CAAC,SAAS,SAAS,UAAU,IAAI,CACxD,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,KAChC,MAAM,CAAC;AAgCZ,eAAO,MAAM,eAAe;;;;;;;EAc1B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;EAkC9B,CAAC;AAEF,eAAO,MAAM,qBAAqB;;;;;;EAejC,CAAC"}