@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/theme/shape-picker.js

@@ -0,0 +1,232 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * aithe-shape-picker 组件
+ * Shape style picker dropdown for toggling between built-in shape styles.
+ *
+ * 基于 floating overlay 模式实现，支持 placement 属性控制弹出方向。
+ * Built on the floating overlay pattern, supports placement prop for dropdown direction.
+ *
+ * 形状风格与颜色主题相互独立，可自由组合（Theme × Shape）。
+ * Shape style is orthogonal to color themes and can be freely combined (Theme × Shape).
+ *
+ * @fires aithe-shape-change - Emitted when a shape is selected. 选择形状风格时发出，detail 包含 `{ shape: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in shape switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ */
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { shapeMenu } from '../../styles/shape';
+import { t } from '../../styles/i18n';
+let AitheShapePicker = class AitheShapePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.currentShape = aitheUI.getShape();
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const shape = event.detail.value;
+            if (!shape)
+                return;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-shape-change', { shape });
+            if (notPrevented) {
+                aitheUI.setShape(shape);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .icon {
+        font-size: 14px;
+        color: var(--aithe-color-text-muted);
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 200px;
+        padding: var(--aithe-space-2);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    getEffectiveShape() {
+        return this.value ?? this.currentShape;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+        this.unsubscribe = aitheUI.onShapeChange(() => {
+            this.currentShape = aitheUI.getShape();
+        });
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+        this.unsubscribe?.();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const effectiveShape = this.getEffectiveShape();
+        const displayLabel = t(`shapePicker.${effectiveShape}`, effectiveShape.charAt(0).toUpperCase() + effectiveShape.slice(1));
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="icon">⬡</span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${shapeMenu}
+                .active=${effectiveShape}
+                .itemRenderer=${(item) => item.preview
+                ? html `<span
+                        style="display:inline-block;width:24px;height:24px;flex-shrink:0;border:2px solid var(--aithe-color-border);background:var(--aithe-color-surface-muted);border-radius:${item.preview}"
+                      ></span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheShapePicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheShapePicker.prototype, "iconOnly", void 0);
+__decorate([
+    property({ type: String })
+], AitheShapePicker.prototype, "value", void 0);
+__decorate([
+    state()
+], AitheShapePicker.prototype, "open", void 0);
+__decorate([
+    state()
+], AitheShapePicker.prototype, "currentShape", void 0);
+__decorate([
+    query('.trigger')
+], AitheShapePicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheShapePicker.prototype, "overlayEl", void 0);
+AitheShapePicker = __decorate([
+    customElement('aithe-shape-picker')
+], AitheShapePicker);
+export { AitheShapePicker };

package/dist/components/theme/theme-picker.d.ts

@@ -0,0 +1,43 @@
+import { AitheElement } from '../../core/aithe-element';
+import { type AithePlacement } from '../../core/floating';
+import type { AitheThemeName } from '../../types';
+/**
+ * Theme picker dropdown for browsing and selecting built-in Aithe UI themes.
+ * 主题选择器下拉菜单，用于浏览和选择 Aithe UI 内置主题。
+ *
+ * Displays themes grouped by light/dark categories with color dot previews,
+ * rendered via `<aithe-tree-menu>`.
+ * 通过 `<aithe-tree-menu>` 按 Light/Dark 分组展示主题，并带有颜色圆点预览。
+ *
+ * @fires aithe-theme-change - Emitted when a theme is selected. 选择主题时发出，detail 包含 `{ theme: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in theme switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-picker value="light" placement="bottom-end"></aithe-theme-picker>
+ * ```
+ */
+export declare class AitheThemePicker extends AitheElement {
+    /** Currently selected theme name. 当前选中的主题名称。 */
+    value: AitheThemeName;
+    /** Placement of the dropdown overlay relative to the trigger. 下拉浮层相对于触发器的弹出位置。 */
+    placement: AithePlacement;
+    /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+    iconOnly: boolean;
+    private open;
+    private readonly triggerEl?;
+    private readonly overlayEl?;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private readonly handleViewportChange;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(): void;
+    private bindViewport;
+    private unbindViewport;
+    private updatePosition;
+    private readonly handleOutsideClick;
+    private readonly toggleOpen;
+    private readonly handleTreeSelect;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=theme-picker.d.ts.map

package/dist/components/theme/theme-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-picker.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-picker.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,KAAK,cAAc,EAA2B,MAAM,gBAAgB,CAAC;AAE9E,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAK7C;;;;;;;;;;;;;;;GAeG;AACH,qBACa,gBAAiB,SAAQ,YAAY;IAChD,gDAAgD;IACpB,KAAK,EAAE,cAAc,CAAW;IAE5D,kFAAkF;IACtD,SAAS,EAAE,cAAc,CAAgB;IAErE,0FAA0F;IACrC,QAAQ,UAAS;IAE7D,OAAO,CAAC,IAAI,CAAS;IAEX,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IACzC,OAAO,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAc;IAE5D,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAgFpB;IAEF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAA+B;IAEpE,iBAAiB,IAAI,IAAI;IAMzB,oBAAoB,IAAI,IAAI;IAM5B,SAAS,CAAC,OAAO,IAAI,IAAI;IAMzB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,cAAc;IAKtB,OAAO,CAAC,cAAc;IAatB,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAKjC;IAEF,OAAO,CAAC,QAAQ,CAAC,UAAU,CAOzB;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAW/B;IAEF,MAAM;CA6BP"}

package/dist/components/theme/theme-picker.js

@@ -0,0 +1,236 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { css, html, nothing } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { AitheElement } from '../../core/aithe-element';
+import { computeFloatingPosition } from '../../core/floating';
+import { aitheBaseStyles } from '../../core/styles';
+import { aitheUI } from '../../styles/aithe-ui';
+import { themeMenu, THEME_COLORS } from '../../styles/theme';
+import { t } from '../../styles/i18n';
+/**
+ * Theme picker dropdown for browsing and selecting built-in Aithe UI themes.
+ * 主题选择器下拉菜单，用于浏览和选择 Aithe UI 内置主题。
+ *
+ * Displays themes grouped by light/dark categories with color dot previews,
+ * rendered via `<aithe-tree-menu>`.
+ * 通过 `<aithe-tree-menu>` 按 Light/Dark 分组展示主题，并带有颜色圆点预览。
+ *
+ * @fires aithe-theme-change - Emitted when a theme is selected. 选择主题时发出，detail 包含 `{ theme: string }`。
+ *   Call `event.preventDefault()` to suppress the built-in theme switch. 调用 `preventDefault()` 可阻止内置切换逻辑。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-picker value="light" placement="bottom-end"></aithe-theme-picker>
+ * ```
+ */
+let AitheThemePicker = class AitheThemePicker extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /** Currently selected theme name. 当前选中的主题名称。 */
+        this.value = 'light';
+        /** Placement of the dropdown overlay relative to the trigger. 下拉浮层相对于触发器的弹出位置。 */
+        this.placement = 'bottom-end';
+        /** Whether to show only the icon and arrow without the label text. 是否仅显示图标和箭头，不显示标签文字。 */
+        this.iconOnly = false;
+        this.open = false;
+        this.handleViewportChange = () => this.updatePosition();
+        this.handleOutsideClick = (event) => {
+            if (!this.open)
+                return;
+            if (!event.composedPath().includes(this)) {
+                this.open = false;
+            }
+        };
+        this.toggleOpen = () => {
+            this.open = !this.open;
+            if (this.open) {
+                this.bindViewport();
+            }
+            else {
+                this.unbindViewport();
+            }
+        };
+        this.handleTreeSelect = (event) => {
+            const theme = event.detail.value;
+            if (!theme || theme === 'light-group' || theme === 'dark-group' || theme === 'cloud-group')
+                return;
+            this.value = theme;
+            this.open = false;
+            this.unbindViewport();
+            const notPrevented = this.emit('aithe-theme-change', { theme });
+            if (notPrevented) {
+                aitheUI.setTheme(theme);
+            }
+        };
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: inline-flex;
+        position: relative;
+      }
+
+      .trigger {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        min-height: 34px;
+        padding: 0 var(--aithe-space-3);
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-color-surface);
+        color: var(--aithe-color-text);
+        cursor: pointer;
+        font-size: var(--aithe-font-size-sm);
+        font-family: inherit;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      .trigger:hover {
+        border-color: var(--aithe-primary-6);
+      }
+
+      :host([icon-only]) .trigger {
+        min-height: 32px;
+        min-width: 32px;
+        padding: 0 var(--aithe-space-1);
+        justify-content: center;
+      }
+
+      :host([icon-only]) .trigger-label {
+        display: none;
+      }
+
+      .dot {
+        width: 14px;
+        height: 14px;
+        border-radius: var(--aithe-radius-full);
+        background: var(--aithe-primary-6);
+        border: 1px solid rgba(0, 0, 0, 0.15);
+        flex-shrink: 0;
+      }
+
+      .arrow {
+        font-size: 10px;
+        color: var(--aithe-color-text-muted);
+        transition: transform var(--aithe-duration-fast) var(--aithe-ease-standard);
+      }
+
+      .arrow.open {
+        transform: rotate(180deg);
+      }
+
+      .overlay {
+        position: fixed;
+        z-index: var(--aithe-z-dropdown);
+        width: max-content;
+        min-width: 180px;
+        max-width: min(320px, calc(100vw - 24px));
+        max-height: min(70vh, 480px);
+        padding: var(--aithe-space-2);
+        overflow-y: auto;
+        border: 1px solid var(--aithe-color-border);
+        border-radius: var(--aithe-container-radius-lg);
+        background: var(--aithe-color-surface-elevated);
+        box-shadow: var(--aithe-shadow-3);
+      }
+
+      aithe-tree-menu {
+        display: block;
+        width: 100%;
+      }
+    `,
+    ]; }
+    connectedCallback() {
+        super.connectedCallback();
+        this.value = aitheUI.getTheme();
+        document.addEventListener('mousedown', this.handleOutsideClick);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        document.removeEventListener('mousedown', this.handleOutsideClick);
+        this.unbindViewport();
+    }
+    updated() {
+        if (this.open) {
+            queueMicrotask(() => this.updatePosition());
+        }
+    }
+    bindViewport() {
+        window.addEventListener('resize', this.handleViewportChange);
+        window.addEventListener('scroll', this.handleViewportChange, true);
+    }
+    unbindViewport() {
+        window.removeEventListener('resize', this.handleViewportChange);
+        window.removeEventListener('scroll', this.handleViewportChange, true);
+    }
+    updatePosition() {
+        const overlay = this.overlayEl;
+        const trigger = this.triggerEl;
+        if (!overlay || !trigger || !this.open)
+            return;
+        const anchorRect = trigger.getBoundingClientRect();
+        const overlayRect = overlay.getBoundingClientRect();
+        const pos = computeFloatingPosition(anchorRect, overlayRect, this.placement, { offset: 8 });
+        overlay.style.left = `${pos.left}px`;
+        overlay.style.top = `${pos.top}px`;
+    }
+    render() {
+        const displayLabel = t(`theme.${this.value}`, this.value.charAt(0).toUpperCase() + this.value.slice(1));
+        const displayColor = THEME_COLORS[this.value] || 'var(--aithe-primary-6)';
+        return html `
+      <button class="trigger" type="button" @click=${this.toggleOpen}>
+        <span class="dot" style="background:${displayColor}"></span>
+        <span class="trigger-label">${displayLabel}</span>
+        <span class=${classMap({ arrow: true, open: this.open })}>▾</span>
+      </button>
+      ${this.open
+            ? html `
+            <div class="overlay" role="menu">
+              <aithe-tree-menu
+                .items=${themeMenu}
+                .active=${this.value}
+                .itemRenderer=${(item) => item.color
+                ? html `<span
+                        style="display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid rgba(0,0,0,0.15);flex-shrink:0;background:${item.color}"
+                      ></span>`
+                : nothing}
+                @aithe-select=${this.handleTreeSelect}
+              ></aithe-tree-menu>
+            </div>
+          `
+            : nothing}
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheThemePicker.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], AitheThemePicker.prototype, "placement", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'icon-only' })
+], AitheThemePicker.prototype, "iconOnly", void 0);
+__decorate([
+    state()
+], AitheThemePicker.prototype, "open", void 0);
+__decorate([
+    query('.trigger')
+], AitheThemePicker.prototype, "triggerEl", void 0);
+__decorate([
+    query('.overlay')
+], AitheThemePicker.prototype, "overlayEl", void 0);
+AitheThemePicker = __decorate([
+    customElement('aithe-theme-picker')
+], AitheThemePicker);
+export { AitheThemePicker };

package/dist/components/theme/theme-preview.d.ts

@@ -0,0 +1,38 @@
+import { AitheElement } from '../../core/aithe-element';
+/**
+ * Live theme preview panel with an embedded theme picker and sample components.
+ * 实时主题预览面板，内嵌主题选择器和示例组件。
+ *
+ * Renders a mini application layout (sidebar + content area) themed with the
+ * selected preview theme, allowing users to evaluate themes before applying.
+ * 渲染一个迷你应用布局（侧边栏 + 内容区），使用所选预览主题，
+ * 允许用户在应用前评估主题效果。
+ *
+ * @fires aithe-theme-apply - Emitted when the "Apply Theme" button is clicked. 点击"应用主题"按钮时发出，detail 包含 `{ theme: string }`。
+ *
+ * @example
+ * ```html
+ * <aithe-theme-preview value="dark"></aithe-theme-preview>
+ * ```
+ */
+export declare class AitheThemePreview extends AitheElement {
+    /** Currently applied theme name. 当前应用的主题名称。 */
+    value: string;
+    private previewTheme;
+    private previewShape;
+    private previewShadow;
+    private previewTypo;
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    private readonly handleThemeChange;
+    private applyShapeTokensLocally;
+    private applyShadowTokensLocally;
+    private applyTypoTokensLocally;
+    private readonly handleShapeChange;
+    private readonly handleShadowChange;
+    private readonly handleTypoChange;
+    private readonly handleConfirm;
+    private readonly sidebarItems;
+    protected firstUpdated(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=theme-preview.d.ts.map

package/dist/components/theme/theme-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-preview.d.ts","sourceRoot":"","sources":["../../../src/components/theme/theme-preview.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAOnD;;;;;;;;;;;;;;;GAeG;AACH,qBACa,iBAAkB,SAAQ,YAAY;IACjD,+CAA+C;IACnB,KAAK,EAAE,MAAM,CAAW;IAE3C,OAAO,CAAC,YAAY,CAAsB;IAC1C,OAAO,CAAC,YAAY,CAAsC;IAC1D,OAAO,CAAC,aAAa,CAAwC;IAC7D,OAAO,CAAC,WAAW,CAAoC;IAEhE,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAsJpB;IAEF,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAGhC;IAEF,OAAO,CAAC,uBAAuB;IAQ/B,OAAO,CAAC,wBAAwB;IAQhC,OAAO,CAAC,sBAAsB;IAQ9B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAIhC;IAEF,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAIjC;IAEF,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAI/B;IAEF,OAAO,CAAC,QAAQ,CAAC,aAAa,CAO5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAK3B;IAEF,SAAS,CAAC,YAAY,IAAI,IAAI;IAM9B,MAAM;CA0GP"}