@sentropic/design-system-vue 0.36.57 → 0.36.59

package/dist/MenuPopover.js

@@ -1,30 +1,144 @@
-import { defineComponent, h } from "vue";
+import { defineComponent, h, onUnmounted, ref, watch } from "vue";
 import { classNames } from "./classNames.js";
 import { Menu } from "./Menu.js";
+// Anchor spacing between panel and trigger.
+const MENU_POPOVER_GAP = 4;
+// Anti-overflow margin between the panel and the viewport edge.
+const MENU_POPOVER_VIEWPORT_MARGIN = 8;
+// Height floor: below this threshold we keep a usable scrollable window
+// rather than a crushed menu (rare case of a trigger glued to the edge).
+const MENU_POPOVER_MIN_HEIGHT = 160;
+function menuPopoverIsWithin(event, node) {
+    if (!node)
+        return false;
+    const path = typeof event.composedPath === "function"
+        ? event.composedPath()
+        : [];
+    if (path.includes(node))
+        return true;
+    const target = event.target;
+    return Boolean(target && node.contains(target));
+}
 export const MenuPopover = defineComponent({
     name: "MenuPopover",
     props: {
         items: { type: Array, default: () => [] },
-        open: { type: Boolean, default: true },
+        open: { type: Boolean, default: undefined },
+        trigger: { type: Object, default: null },
         placement: { type: String, default: "bottom-start" },
+        align: { type: String, default: undefined },
         label: { type: String, default: undefined },
         class: { type: String, default: undefined },
+        closeOnOutside: { type: Boolean, default: true },
+        closeOnEscape: { type: Boolean, default: true },
     },
-    setup(props, { slots, attrs }) {
+    emits: ["update:open"],
+    setup(props, { emit, slots, attrs }) {
+        const localOpen = ref(props.open ?? false);
+        const panelRef = ref(null);
+        const top = ref(0);
+        const left = ref(0);
+        const maxHeight = ref(0);
+        const alignEnd = ref(false);
+        const alignCenter = ref(false);
+        const isOpen = () => (props.open !== undefined ? props.open : localOpen.value);
+        const setOpen = (value) => {
+            if (props.open === undefined)
+                localOpen.value = value;
+            emit("update:open", value);
+        };
+        function computePosition() {
+            const trigger = props.trigger;
+            if (!trigger)
+                return;
+            const rect = trigger.getBoundingClientRect();
+            const verticalUp = props.placement === "top-start" || props.placement === "top-end";
+            const horizontalEnd = props.placement === "bottom-end" || props.placement === "top-end";
+            const resolvedAlign = props.align ?? (horizontalEnd ? "end" : "start");
+            alignEnd.value = resolvedAlign === "end";
+            alignCenter.value = resolvedAlign === "center";
+            if (verticalUp) {
+                // Panel bottom edge sits above the trigger (transform handles the
+                // flip); available space is what's ABOVE the trigger.
+                top.value = rect.top + window.scrollY - MENU_POPOVER_GAP;
+                maxHeight.value = Math.max(rect.top - MENU_POPOVER_GAP - MENU_POPOVER_VIEWPORT_MARGIN, MENU_POPOVER_MIN_HEIGHT);
+            }
+            else {
+                top.value = rect.bottom + window.scrollY + MENU_POPOVER_GAP;
+                // Space actually available BELOW the trigger — `max-height: 100vh`
+                // alone ignores the panel's offset and overflows past the bottom edge.
+                maxHeight.value = Math.max(window.innerHeight - rect.bottom - MENU_POPOVER_GAP - MENU_POPOVER_VIEWPORT_MARGIN, MENU_POPOVER_MIN_HEIGHT);
+            }
+            if (resolvedAlign === "end") {
+                left.value = rect.right + window.scrollX;
+            }
+            else if (resolvedAlign === "center") {
+                left.value = rect.left + window.scrollX + rect.width / 2;
+            }
+            else {
+                left.value = rect.left + window.scrollX;
+            }
+        }
+        let stopPositionTracking = null;
+        let stopCloseHandlers = null;
+        const teardown = () => {
+            stopPositionTracking?.();
+            stopPositionTracking = null;
+            stopCloseHandlers?.();
+            stopCloseHandlers = null;
+        };
+        watch(() => isOpen(), (openNow) => {
+            teardown();
+            if (!openNow)
+                return;
+            computePosition();
+            const onScroll = () => computePosition();
+            const onResize = () => computePosition();
+            window.addEventListener("scroll", onScroll, true);
+            window.addEventListener("resize", onResize);
+            stopPositionTracking = () => {
+                window.removeEventListener("scroll", onScroll, true);
+                window.removeEventListener("resize", onResize);
+            };
+            const onPointerDown = (event) => {
+                if (!props.closeOnOutside)
+                    return;
+                if (menuPopoverIsWithin(event, panelRef.value))
+                    return;
+                if (menuPopoverIsWithin(event, props.trigger))
+                    return;
+                setOpen(false);
+            };
+            const onKeyDown = (event) => {
+                if (!props.closeOnEscape)
+                    return;
+                if (event.key === "Escape") {
+                    event.preventDefault();
+                    setOpen(false);
+                }
+            };
+            window.addEventListener("pointerdown", onPointerDown);
+            window.addEventListener("keydown", onKeyDown);
+            stopCloseHandlers = () => {
+                window.removeEventListener("pointerdown", onPointerDown);
+                window.removeEventListener("keydown", onKeyDown);
+            };
+        }, { immediate: true });
+        onUnmounted(teardown);
         return () => {
+            if (!isOpen())
+                return null;
+            const style = { top: `${top.value}px`, left: `${left.value}px` };
+            if (maxHeight.value)
+                style.maxHeight = `${maxHeight.value}px`;
             return h("div", {
                 ...attrs,
+                ref: panelRef,
                 role: "dialog",
                 "aria-label": props.label,
-                class: classNames("st-menuPopover", `st-menuPopover--${props.placement}`, props.class),
-            }, [
-                slots.trigger?.(),
-                props.open
-                    ? h("div", { class: "st-menuPopover__content" }, props.items && props.items.length
-                        ? h(Menu, { items: props.items, role: "presentation" })
-                        : slots.default?.())
-                    : null,
-            ]);
+                class: classNames("st-menuPopover", `st-menuPopover--${props.placement}`, alignEnd.value ? "st-menuPopover--alignEnd" : null, alignCenter.value ? "st-menuPopover--alignCenter" : null, props.class),
+                style,
+            }, props.items && props.items.length ? h(Menu, { items: props.items, role: "presentation" }) : slots.default?.());
         };
     },
 });

package/dist/MenuPopover.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAgBjC,MAAM,CAAC,MAAM,WAAW,GAAG,eAAe,CAAC;IACzC,IAAI,EAAE,aAAa;IACnB,KAAK,EAAE;QACL,KAAK,EAAE,EAAE,IAAI,EAAE,KAAyB,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,EAAE,EAAE;QAC7D,IAAI,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;QACtC,SAAS,EAAE,EAAE,IAAI,EAAE,MAAoC,EAAE,OAAO,EAAE,cAAc,EAAE;QAClF,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;QAC3C,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE;KAC5C;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE;QAC3B,OAAO,GAAG,EAAE;YACV,OAAO,CAAC,CACN,KAAK,EACL;gBACE,GAAG,KAAK;gBACR,IAAI,EAAE,QAAQ;gBACd,YAAY,EAAE,KAAK,CAAC,KAAK;gBACzB,KAAK,EAAE,UAAU,CACf,gBAAgB,EAChB,mBAAmB,KAAK,CAAC,SAAS,EAAE,EACpC,KAAK,CAAC,KAAK,CACZ;aACF,EACD;gBACE,KAAK,CAAC,OAAO,EAAE,EAAE;gBACjB,KAAK,CAAC,IAAI;oBACR,CAAC,CAAC,CAAC,CACC,KAAK,EACL,EAAE,KAAK,EAAE,yBAAyB,EAAE,EACpC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,MAAM;wBAC/B,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC;wBACvD,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CACtB;oBACH,CAAC,CAAC,IAAI;aACT,CACF,CAAC;QACJ,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC"}
+{"version":3,"file":"MenuPopover.js","sourceRoot":"","sources":["../src/MenuPopover.ts"],"names":[],"mappings":"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"}

package/dist/PanelSection.d.ts

@@ -0,0 +1,50 @@
+export type PanelSectionProps = {
+    id: string;
+    label: string;
+    class?: string;
+};
+/**
+ * One collapsible region inside a {@link PanelStack}. Registers itself with
+ * the parent stack (via provide/inject) on mount, in DOM order, so the stack
+ * can resolve its scroll-owner fallbacks. A PanelSection outside a PanelStack
+ * (no injected context) falls back to a fully expanded, scroll-owning,
+ * non-primary section so it still renders sanely in isolation — but the
+ * component is designed to always live inside a stack.
+ *
+ * Content (default slot) is mounted once and only ever hidden/resized via
+ * CSS classes on collapse — never removed from the DOM — so a chat session,
+ * map or other stateful widget survives collapse/expand without remounting.
+ * Slots: default (content), actions (header-trailing controls).
+ */
+export declare const PanelSection: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    class: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=PanelSection.d.ts.map

package/dist/PanelSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelSection.d.ts","sourceRoot":"","sources":["../src/PanelSection.ts"],"names":[],"mappings":"AAcA,MAAM,MAAM,iBAAiB,GAAG;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4EAqHvB,CAAC"}

package/dist/PanelSection.js

@@ -0,0 +1,102 @@
+import { defineComponent, h, inject, onBeforeUnmount, onMounted, ref, watch, } from "vue";
+import { ChevronDown } from "lucide-vue-next";
+import { classNames } from "./classNames.js";
+import { PANEL_STACK_KEY } from "./PanelStack.js";
+/**
+ * One collapsible region inside a {@link PanelStack}. Registers itself with
+ * the parent stack (via provide/inject) on mount, in DOM order, so the stack
+ * can resolve its scroll-owner fallbacks. A PanelSection outside a PanelStack
+ * (no injected context) falls back to a fully expanded, scroll-owning,
+ * non-primary section so it still renders sanely in isolation — but the
+ * component is designed to always live inside a stack.
+ *
+ * Content (default slot) is mounted once and only ever hidden/resized via
+ * CSS classes on collapse — never removed from the DOM — so a chat session,
+ * map or other stateful widget survives collapse/expand without remounting.
+ * Slots: default (content), actions (header-trailing controls).
+ */
+export const PanelSection = defineComponent({
+    name: "PanelSection",
+    props: {
+        id: { type: String, required: true },
+        label: { type: String, required: true },
+        class: { type: String, default: undefined },
+    },
+    setup(props, { slots, attrs }) {
+        const stack = inject(PANEL_STACK_KEY, undefined);
+        const rootEl = ref(null);
+        const headerEl = ref(null);
+        // Register with the parent stack (mount order) so it can fall back to
+        // "the first section" whenever nothing else designates a scroll owner
+        // (unset or stale `expanded`/`primary`) — see PanelStack.ts's `register`.
+        // Same register-in-onMounted / return-the-unregister-callback idiom as
+        // SelectableRow.
+        let unregister = null;
+        function doRegister() {
+            unregister?.();
+            unregister = null;
+            if (stack && rootEl.value && headerEl.value) {
+                unregister = stack.register(props.id, rootEl.value, headerEl.value);
+            }
+        }
+        onMounted(() => doRegister());
+        // Re-register under the new id if it ever changes while mounted.
+        watch(() => props.id, () => doRegister());
+        onBeforeUnmount(() => {
+            unregister?.();
+            unregister = null;
+        });
+        function onTriggerClick() {
+            stack?.toggle(props.id);
+        }
+        return () => {
+            const triggerId = `st-panelSection-trigger-${props.id}`;
+            const regionId = `st-panelSection-region-${props.id}`;
+            const isPrimary = stack?.isPrimary(props.id) ?? false;
+            const expanded = stack?.isExpanded(props.id) ?? true;
+            const scrollOwner = stack?.isScrollOwner(props.id) ?? true;
+            const rootClasses = classNames("st-panelSection", scrollOwner && "st-panelSection--scrollOwner", props.class);
+            const bodyClasses = classNames("st-panelSection__body", scrollOwner
+                ? "st-panelSection__body--scrollOwner"
+                : !expanded
+                    ? "st-panelSection__body--collapsed"
+                    : null);
+            const headingChild = isPrimary
+                ? h("span", { class: "st-panelSection__title st-panelSection__title--primary", id: triggerId }, props.label)
+                : h("button", {
+                    type: "button",
+                    class: "st-panelSection__trigger",
+                    "aria-expanded": expanded ? "true" : "false",
+                    "aria-controls": regionId,
+                    id: triggerId,
+                    onClick: onTriggerClick,
+                }, [
+                    h("span", { class: "st-panelSection__title" }, props.label),
+                    h("span", {
+                        class: classNames("st-panelSection__icon", expanded && "st-panelSection__icon--expanded"),
+                        "aria-hidden": "true",
+                    }, [h(ChevronDown, { size: 18, strokeWidth: 2.25, "aria-hidden": "true" })]),
+                ]);
+            return h("div", {
+                ...attrs,
+                class: rootClasses,
+                "data-panel-section-id": props.id,
+                ref: rootEl,
+            }, [
+                h("div", { class: "st-panelSection__header", ref: headerEl }, [
+                    h("h3", { class: "st-panelSection__heading" }, [headingChild]),
+                    slots.actions ? h("div", { class: "st-panelSection__actions" }, slots.actions()) : null,
+                ]),
+                // Mounted once, always — collapsing is purely a class/CSS concern
+                // (sizing + hiding this region), never a conditional block.
+                h("div", {
+                    class: bodyClasses,
+                    role: "region",
+                    id: regionId,
+                    "aria-labelledby": triggerId,
+                }, slots.default?.()),
+            ]);
+        };
+    },
+});
+//# sourceMappingURL=PanelSection.js.map

package/dist/PanelSection.js.map

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

package/dist/PanelStack.d.ts

@@ -0,0 +1,158 @@
+import { type InjectionKey, type PropType } from "vue";
+export type PanelStackShape = "split-primary" | "sticky-item";
+/**
+ * Bound ratified by the chat consumer lane: beyond 4 sections, stacking
+ * collapsible regions in a pane capped at 640px makes scrolling unmanageable
+ * and the single-owner rule becomes untenable. Enforced as a dev-time
+ * `console.warn` in `register()` (this package's established convention —
+ * see NavActionStack/WaterfallChart — is to warn and degrade, never throw or
+ * silently truncate); exported here so the bound is also visible through
+ * types/docs to a consumer reading `PanelStackProps`.
+ */
+export declare const PANEL_STACK_MAX_SECTIONS = 4;
+export type PanelStackProps = {
+    /** "sticky-item" (default): one section expanded at a time, all headers stay visible.
+        "split-primary": the `primary` section is always expanded and owns the scroll;
+        the others are content-sized disclosures. */
+    shape?: PanelStackShape;
+    /** Accessible name for the stack region. */
+    label?: string;
+    /** sticky-item, controlled: id of the expanded section. */
+    expanded?: string | null;
+    /** sticky-item, uncontrolled seed. */
+    defaultExpanded?: string | null;
+    onExpandedChange?: (id: string | null) => void;
+    /**
+     * split-primary: id of the section that owns the scroll. Falls back to the
+     * first EXPANDED section (DOM order) when unset or stale, and — if nothing
+     * is expanded — to the first registered section, so the stack never
+     * degrades to zero scroll owners.
+     */
+    primary?: string;
+    /** Usable floor for the primary section, in px. While the primary sits above it the
+        primary absorbs overflow; once it would drop below, a secondary auto-collapses
+        instead of compressing the primary further. Default 160. */
+    primaryMinHeight?: number;
+    class?: string;
+};
+/**
+ * Context contract shared with PanelSection. Every shape-dependent branch
+ * (sticky-item vs split-primary) is decided HERE and only here — PanelSection
+ * never reads `shape`, it only calls these four functions/callback. If the
+ * consumer-lane contract for these two shapes changes, this is the one place
+ * to touch.
+ */
+export declare const PANEL_STACK_KEY: InjectionKey<PanelStackContext>;
+export type PanelStackContext = {
+    /** Is this section the (non-collapsible) primary of a split-primary stack? */
+    isPrimary: (id: string) => boolean;
+    /** Is this section currently expanded (body visible, content-sized or scrolling)? */
+    isExpanded: (id: string) => boolean;
+    /** Is this section's body THE single scroll owner right now (flex:1 1 0, overflow:auto)? */
+    isScrollOwner: (id: string) => boolean;
+    /** Header was activated (click / Space / Enter on the disclosure button). */
+    toggle: (id: string) => void;
+    /**
+     * Register a section's root AND header element, in mount/DOM order;
+     * returns an unregister callback. NOT just bookkeeping — the stack falls
+     * back to the first registered section as the scroll owner whenever
+     * nothing else designates one (unset/stale `expanded` or `primary`), so
+     * the invariant "exactly one scroll owner whenever the stack has ≥1
+     * section" holds even for a misconfigured or dynamically-changing stack.
+     * `headerEl` is used only by split-primary's auto-collapse measurement
+     * (the header of whichever section is CURRENTLY primary is observed for
+     * its height); sticky-item ignores it.
+     */
+    register: (id: string, rootEl: HTMLElement, headerEl: HTMLElement) => () => void;
+};
+export declare const PRIMARY_MIN_BLOCK_SIZE_PX = 160;
+/**
+ * Stacks several PanelSection children inside ONE panel so a docked chat can
+ * share a pane with other content. The invariant is the whole point: exactly
+ * one element in the stack has `overflow: auto` at any moment, and the stack
+ * itself NEVER scrolls — see PanelStack.svelte (the frozen reference this
+ * component mirrors) and styles.css's `.st-panelStack` rule.
+ */
+export declare const PanelStack: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    shape: {
+        type: PropType<PanelStackShape>;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expanded: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    onExpandedChange: {
+        type: PropType<(id: string | null) => void>;
+        default: undefined;
+    };
+    primary: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    primaryMinHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    expandedChange: (_id: string | null) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    shape: {
+        type: PropType<PanelStackShape>;
+        default: string;
+    };
+    label: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    expanded: {
+        type: PropType<string | null>;
+        default: undefined;
+    };
+    defaultExpanded: {
+        type: PropType<string | null>;
+        default: null;
+    };
+    onExpandedChange: {
+        type: PropType<(id: string | null) => void>;
+        default: undefined;
+    };
+    primary: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    primaryMinHeight: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onExpandedChange?: ((_id: string | null) => any) | undefined;
+}>, {
+    class: string;
+    label: string;
+    shape: PanelStackShape;
+    expanded: string | null;
+    primary: string;
+    defaultExpanded: string | null;
+    onExpandedChange: (id: string | null) => void;
+    primaryMinHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//# sourceMappingURL=PanelStack.d.ts.map

package/dist/PanelStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelStack.d.ts","sourceRoot":"","sources":["../src/PanelStack.ts"],"names":[],"mappings":"AAAA,OAAO,EASL,KAAK,YAAY,EACjB,KAAK,QAAQ,EACd,MAAM,KAAK,CAAC;AAGb,MAAM,MAAM,eAAe,GAAG,eAAe,GAAG,aAAa,CAAC;AAE9D;;;;;;;;GAQG;AACH,eAAO,MAAM,wBAAwB,IAAI,CAAC;AAE1C,MAAM,MAAM,eAAe,GAAG;IAC5B;;oDAEgD;IAChD,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,gBAAgB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC/C;;;;;OAKG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;mEAE+D;IAC/D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAKF;;;;;;GAMG;AACH,eAAO,MAAM,eAAe,EAAE,YAAY,CAAC,iBAAiB,CAA4B,CAAC;AAEzF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,8EAA8E;IAC9E,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACnC,qFAAqF;IACrF,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACpC,4FAA4F;IAC5F,aAAa,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,6EAA6E;IAC7E,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B;;;;;;;;;;OAUG;IACH,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,KAAK,MAAM,IAAI,CAAC;CAClF,CAAC;AA4BF,eAAO,MAAM,yBAAyB,MAAM,CAAC;AAE7C;;;;;;GAMG;AACH,eAAO,MAAM,UAAU;;cAGM,QAAQ,CAAC,eAAe,CAAC;;;;;;;;cAEtB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;cAChB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;cAEtC,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;0BAQnC,MAAM,GAAG,IAAI;;;cAbV,QAAQ,CAAC,eAAe,CAAC;;;;;;;;cAEtB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;cAChB,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC;;;;cAEtC,QAAQ,CAAC,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;;;;;;;;;;;;;;;;;;;;;;;;2BAAvB,MAAM,GAAG,IAAI,KAAK,IAAI;;4EAsY1D,CAAC"}