@aithe/aithe-ui 26.2.2 → 26.3.1

package/dist/components/framework/header.d.ts

@@ -0,0 +1,42 @@
+import { AitheElement } from '../../core/aithe-element';
+import '../theme/locale-switch';
+import '../theme/theme-switch';
+/**
+ * Framework-level page header with brand, navigation, built-in locale/theme toggles and user area.
+ * 框架级页头，包含品牌区、导航区、内置国际化/主题切换和用户区。
+ *
+ * 国际化和主题切换在组件内部完成，无需外部处理。
+ * Locale and theme switching are handled internally — no external event handling required.
+ *
+ * @slot left - Custom brand area (overrides `brand` and `slogan` properties). 自定义品牌区域。
+ * @slot center - Navigation / business columns area. 导航/业务栏目区域。
+ * @slot right - User / login info area. 用户/登录信息区域。
+ *
+ * @csspart center - The center container, for custom alignment via `::part(center) { justify-content: ... }`.
+ *   中间容器，可通过 `::part(center) { justify-content: ... }` 自定义对齐方式。
+ *
+ * @example
+ * ```html
+ * <aithe-header brand="Aithe UI" slogan="Enterprise Design System" show-locale-switch show-theme-switch>
+ *   <aithe-menu slot="center" mode="horizontal" active="home">
+ *     <aithe-menu-item name="home">Home</aithe-menu-item>
+ *   </aithe-menu>
+ *   <aithe-avatar slot="right" text="U"></aithe-avatar>
+ * </aithe-header>
+ * ```
+ */
+export declare class AitheHeader extends AitheElement {
+    brand: string;
+    slogan: string;
+    showLocaleSwitch: boolean;
+    /** Whether to show the theme switch (theme + shadow + typo) in the header. 是否在页头显示主题切换（主题+阴影+排版）。 */
+    showThemeSwitch: boolean;
+    /**
+     * Alignment of the center slot content: `left`, `center`, or `right`.
+     * 中间插槽内容的对齐方式：`left`、`center` 或 `right`。
+     */
+    centerAlign: 'left' | 'center' | 'right';
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=header.d.ts.map

package/dist/components/framework/header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../../src/components/framework/header.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGnD,OAAO,iCAAiC,CAAC;AACzC,OAAO,gCAAgC,CAAC;AAExC;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,qBACa,WAAY,SAAQ,YAAY;IACf,KAAK,SAAc;IAEnB,MAAM,SAAM;IAEsB,gBAAgB,UAAS;IAEvF,qGAAqG;IACxC,eAAe,UAAS;IAErF;;;OAGG;IACoD,WAAW,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CACrF;IAEV,MAAM,CAAC,QAAQ,CAAC,MAAM,0DAoIpB;IAEF,MAAM;CAkCP"}

package/dist/components/framework/header.js

@@ -0,0 +1,237 @@
+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 } from 'lit/decorators.js';
+import { AitheElement } from '../../core/aithe-element';
+import { aitheBaseStyles } from '../../core/styles';
+import '../theme/locale-switch';
+import '../theme/theme-switch';
+/**
+ * Framework-level page header with brand, navigation, built-in locale/theme toggles and user area.
+ * 框架级页头，包含品牌区、导航区、内置国际化/主题切换和用户区。
+ *
+ * 国际化和主题切换在组件内部完成，无需外部处理。
+ * Locale and theme switching are handled internally — no external event handling required.
+ *
+ * @slot left - Custom brand area (overrides `brand` and `slogan` properties). 自定义品牌区域。
+ * @slot center - Navigation / business columns area. 导航/业务栏目区域。
+ * @slot right - User / login info area. 用户/登录信息区域。
+ *
+ * @csspart center - The center container, for custom alignment via `::part(center) { justify-content: ... }`.
+ *   中间容器，可通过 `::part(center) { justify-content: ... }` 自定义对齐方式。
+ *
+ * @example
+ * ```html
+ * <aithe-header brand="Aithe UI" slogan="Enterprise Design System" show-locale-switch show-theme-switch>
+ *   <aithe-menu slot="center" mode="horizontal" active="home">
+ *     <aithe-menu-item name="home">Home</aithe-menu-item>
+ *   </aithe-menu>
+ *   <aithe-avatar slot="right" text="U"></aithe-avatar>
+ * </aithe-header>
+ * ```
+ */
+let AitheHeader = class AitheHeader extends AitheElement {
+    constructor() {
+        super(...arguments);
+        this.brand = 'Aithe UI';
+        this.slogan = '';
+        this.showLocaleSwitch = false;
+        /** Whether to show the theme switch (theme + shadow + typo) in the header. 是否在页头显示主题切换（主题+阴影+排版）。 */
+        this.showThemeSwitch = false;
+        /**
+         * Alignment of the center slot content: `left`, `center`, or `right`.
+         * 中间插槽内容的对齐方式：`left`、`center` 或 `right`。
+         */
+        this.centerAlign = 'right';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        position: sticky;
+        top: 0;
+        z-index: 5;
+      }
+
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--aithe-space-4);
+        padding: var(--aithe-space-4) var(--aithe-space-6);
+        border-bottom: 1px solid var(--aithe-color-border);
+        background: color-mix(in srgb, var(--aithe-color-surface-elevated) 84%, transparent);
+        backdrop-filter: blur(18px);
+      }
+
+      .left {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        flex-shrink: 0;
+        min-width: 0;
+      }
+
+      .brand {
+        font-size: var(--aithe-font-size-xl);
+        font-weight: var(--aithe-font-weight-bold);
+        color: var(--aithe-color-text);
+        white-space: nowrap;
+        letter-spacing: 0.02em;
+        line-height: 1.3;
+      }
+
+      .slogan {
+        font-size: var(--aithe-font-size-sm);
+        color: var(--aithe-color-text-muted);
+        white-space: nowrap;
+        line-height: 1.3;
+        margin-top: 2px;
+      }
+
+      .center {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        min-width: 0;
+      }
+
+      .center.align-left {
+        justify-content: flex-start;
+      }
+
+      .center.align-center {
+        justify-content: center;
+      }
+
+      .center.align-right {
+        justify-content: flex-end;
+      }
+
+      .switches {
+        display: flex;
+        align-items: center;
+        gap: var(--aithe-space-2);
+        flex-shrink: 0;
+      }
+
+      .right {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        flex-shrink: 0;
+        min-width: 0;
+      }
+
+      ::slotted([slot='left']) {
+        flex-shrink: 0;
+      }
+
+      ::slotted([slot='center']) {
+        max-width: 100%;
+      }
+
+      ::slotted([slot='center'] a) {
+        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);
+        text-decoration: none;
+        transition:
+          border-color 0.15s,
+          background 0.15s;
+      }
+
+      ::slotted([slot='center'] a:hover) {
+        border-color: var(--aithe-primary-6);
+        color: var(--aithe-primary-6);
+      }
+
+      ::slotted([slot='right']) {
+        flex-shrink: 0;
+      }
+
+      @media (max-width: 768px) {
+        .header {
+          flex-wrap: wrap;
+          gap: var(--aithe-space-sm);
+          padding: var(--aithe-space-sm) var(--aithe-space-md);
+        }
+
+        .center {
+          order: 3;
+          flex-basis: 100%;
+        }
+
+        .switches {
+          order: 4;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <header class="header" role="banner">
+        <div class="left">
+          <slot name="left">
+            <span class="brand">${this.brand}</span>
+            ${this.slogan
+            ? html `
+                  <span class="slogan">${this.slogan}</span>
+                `
+            : nothing}
+          </slot>
+        </div>
+        <div class="center align-${this.centerAlign}" part="center">
+          <slot name="center"></slot>
+        </div>
+        <div class="switches">
+          ${this.showThemeSwitch
+            ? html `
+                <aithe-theme-switch placement="bottom-end"></aithe-theme-switch>
+              `
+            : nothing}
+          ${this.showLocaleSwitch
+            ? html `
+                <aithe-locale-switch placement="bottom-end"></aithe-locale-switch>
+              `
+            : nothing}
+        </div>
+        <div class="right">
+          <slot name="right"></slot>
+        </div>
+      </header>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheHeader.prototype, "brand", void 0);
+__decorate([
+    property({ type: String })
+], AitheHeader.prototype, "slogan", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-locale-switch' })
+], AitheHeader.prototype, "showLocaleSwitch", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'show-theme-switch' })
+], AitheHeader.prototype, "showThemeSwitch", void 0);
+__decorate([
+    property({ type: String, attribute: 'center-align' })
+], AitheHeader.prototype, "centerAlign", void 0);
+AitheHeader = __decorate([
+    customElement('aithe-header')
+], AitheHeader);
+export { AitheHeader };

package/dist/components/framework/log-panel.d.ts

@@ -0,0 +1,32 @@
+import { AitheElement } from '../../core/aithe-element';
+export declare class AitheLogPanel extends AitheElement {
+    open: boolean;
+    panelPlacement: 'overlay' | 'inline';
+    private _entries;
+    private _filterLevel;
+    private _searchText;
+    private _expandedIds;
+    private _panelHeight;
+    private _unsubscribe;
+    private _unsubscribeClear;
+    private _dragStartY;
+    private _dragStartHeight;
+    private _dragging;
+    private readonly _scrollContainer?;
+    static readonly styles: import("lit").CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _scrollToBottom;
+    private _togglePanel;
+    private _clearLogs;
+    private _setFilter;
+    private _handleSearch;
+    private _toggleExpand;
+    private _copyMessage;
+    private _copyData;
+    private _onDragStart;
+    private _filteredEntries;
+    private _renderEntry;
+    render(): import("lit-html").TemplateResult<1> | null;
+}
+//# sourceMappingURL=log-panel.d.ts.map

package/dist/components/framework/log-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"log-panel.d.ts","sourceRoot":"","sources":["../../../src/components/framework/log-panel.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AA2BnD,qBACa,aAAc,SAAQ,YAAY;IACkB,IAAI,UAAS;IAElB,cAAc,EAAE,SAAS,GAAG,QAAQ,CAClF;IAEH,OAAO,CAAC,QAAQ,CAAkB;IAClC,OAAO,CAAC,YAAY,CAAyB;IAC7C,OAAO,CAAC,WAAW,CAAM;IACzB,OAAO,CAAC,YAAY,CAAqB;IAEzC,OAAO,CAAC,YAAY,CAAO;IAEpC,OAAO,CAAC,YAAY,CAA6B;IACjD,OAAO,CAAC,iBAAiB,CAA6B;IACtD,OAAO,CAAC,WAAW,CAAK;IACxB,OAAO,CAAC,gBAAgB,CAAK;IAC7B,OAAO,CAAC,SAAS,CAAS;IAEN,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAC,CAAc;IAEpE,MAAM,CAAC,QAAQ,CAAC,MAAM,0BAuSpB;IAEF,iBAAiB,IAAI,IAAI;IAczB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,YAAY;IAKpB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,UAAU;IAIlB,OAAO,CAAC,aAAa;IAIrB,OAAO,CAAC,aAAa;IAUrB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,SAAS;IAajB,OAAO,CAAC,YAAY;IAgCpB,OAAO,CAAC,gBAAgB;IAuBxB,OAAO,CAAC,YAAY;IA+FpB,MAAM;CAwEP"}