@aithe/aithe-ui 26.2.3 → 26.3.2

package/dist/components/display/autoview.js

@@ -0,0 +1,460 @@
+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;
+};
+/**
+ * @file JSON-driven read-only auto view / JSON 驱动的只读自动视图
+ * @description Renders a read-only detail view from a FormFieldConfig JSON array and a data object.
+ *              Built as a thin adapter on top of <aithe-desc>: parses the field config, resolves
+ *              dependency-based visibility, transforms values per control type, and injects
+ *              type-aware read-only content into <aithe-desc-item> slots.
+ *              基于 <aithe-desc> 的轻量适配器：解析字段配置，解析依赖联动显隐，
+ *              按控件类型转换值，将类型感知的只读内容注入 <aithe-desc-item> 的 slot。
+ */
+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 { t } from '../../styles/i18n';
+import { filterFactory } from '../../core/filter';
+import { FormRuleEngine, ViewRegistry } from '../../core/autoform';
+import { safeStringify } from '../../utils/utils';
+import './desc.js';
+import './label.js';
+import '../basic/tag.js';
+/**
+ * JSON-driven read-only detail view, the display-only counterpart of <aithe-autoform>.
+ * JSON 驱动的只读详情视图，<aithe-autoform> 的只读镜像。
+ *
+ * @description Shares the same FormFieldConfig model as autoform, rendering field values
+ *             as a structured description list. Supports dependency-based show/hide rules,
+ *             per-type read-only renderers (switch→badge, select→label lookup, etc.),
+ *             and custom renderers via ViewRegistry.
+ *             与 autoform 共用 FormFieldConfig 模型，将字段值渲染为结构化描述列表。
+ *             支持依赖联动显隐、按类型的只读渲染器（switch→徽章、select→label 反查等），
+ *             以及通过 ViewRegistry 注册的自定义渲染器。
+ *
+ * @slot title - Custom title content (passed through to desc). 自定义标题内容（透传给 desc）。
+ * @slot extra - Extra action content in the header (passed through to desc). 头部额外操作内容（透传给 desc）。
+ *
+ * @fires aithe-view-ready - Emitted after initial render with current visible values. 初始渲染完成后触发，携带当前可见字段值。
+ *
+ * @example
+ * ```html
+ * <aithe-autoview
+ *   fields='[
+ *     {"name":"username","type":"input","label":"用户名"},
+ *     {"name":"role","type":"select","label":"角色",
+ *      "options":[{"label":"管理员","id":"admin"}]},
+ *     {"name":"active","type":"switch","label":"状态"}
+ *   ]'
+ *   .data=${{username:"张三",role:"admin",active:true}}
+ *   column="2"
+ *   border
+ * ></aithe-autoview>
+ * ```
+ */
+let AitheAutoView = class AitheAutoView extends AitheElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * JSON string of field configuration array. Same model as autoform's `fields`.
+         * 字段配置数组的 JSON 字符串，与 autoform 的 `fields` 模型一致。
+         */
+        this.fields = '[]';
+        /**
+         * Display data object. Values are keyed by field name.
+         * Supports passing an object directly or a JSON string.
+         * 展示数据对象，按字段名取值。支持直接传对象或 JSON 字符串。
+         */
+        this.data = {};
+        /** Number of columns in the grid layout. Passed to desc. 网格列数，透传给 desc。 */
+        this.column = 1;
+        /** Whether to show borders. Passed to desc. 是否显示边框，透传给 desc。 */
+        this.border = true;
+        /** Border style: 'none' / 'full' / 'row'. Passed to desc. 边框样式，透传给 desc。 */
+        this.borderStyle = 'none';
+        /** Label background style: 'filled' / 'none'. Passed to desc. 标签背景样式，透传给 desc。 */
+        this.labelBackground = 'filled';
+        /** Layout direction. Passed to desc. 布局方向，透传给 desc。 */
+        this.direction = 'horizontal';
+        /** Label cell width. Passed to desc. 标签单元格宽度，透传给 desc。 */
+        this.labelWidth = '150px';
+        /** Size preset. Passed to desc. 尺寸规格，透传给 desc。 */
+        this.size = 'md';
+        /** Title text in the header. Passed to desc. 头部标题文本，透传给 desc。 */
+        this.title = '';
+        /** Whether to show the title header. When false, the header row is hidden even if title or extra slot is set. Passed to desc. 是否显示标题头。为 false 时隐藏标题行，即使设置了 title 或 extra slot 也不显示，透传给 desc。 */
+        this.showTitle = true;
+        /** Max visible rows. 0 means no limit. Passed to desc. 最大可见行数，0 表示不限制，透传给 desc。 */
+        this.maxRows = 0;
+        /** Global empty value placeholder. Falls back to i18n. 全局空值占位文本，回退到 i18n。 */
+        this.emptyText = '';
+    }
+    static { this.styles = [
+        aitheBaseStyles,
+        css `
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .autoview-text {
+        color: var(--aithe-color-text);
+        font-size: var(--aithe-font-size-sm);
+        line-height: 1.5;
+        word-break: break-word;
+        overflow-wrap: break-word;
+      }
+
+      .autoview-empty {
+        color: var(--aithe-color-text-muted, var(--aithe-color-text-secondary));
+        font-size: var(--aithe-font-size-sm);
+        line-height: 1.5;
+      }
+
+      .autoview-tags {
+        display: inline-flex;
+        flex-wrap: wrap;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      .autoview-color {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .autoview-color-chip {
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        border-radius: var(--aithe-radius-sm, 3px);
+        border: 1px solid var(--aithe-color-border, #e5e6eb);
+        flex-shrink: 0;
+      }
+    `,
+    ]; }
+    get _data() {
+        if (typeof this.data === 'string') {
+            if (!this.data)
+                return {};
+            try {
+                const parsed = JSON.parse(this.data);
+                return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+            }
+            catch {
+                return {};
+            }
+        }
+        return this.data ?? {};
+    }
+    get _emptyText() {
+        return this.emptyText || t('form.autoView.empty', '--');
+    }
+    /**
+     * Returns the values of all visible fields.
+     * 返回所有可见字段的值。
+     */
+    getValues() {
+        const configs = this.parseFields();
+        const data = this._data;
+        const values = {};
+        for (const field of configs) {
+            if (!this.isVisible(field, data))
+                continue;
+            const name = field.name ?? '';
+            if (!name)
+                continue;
+            values[name] = data[name] ?? field.dft ?? '';
+        }
+        return values;
+    }
+    /** Parses the fields JSON string into a typed array with fallback sanitization. 解析 fields JSON 字符串为类型化数组，含容错。 */
+    parseFields() {
+        const raw = this.fields || '[]';
+        try {
+            return JSON.parse(raw);
+        }
+        catch {
+            try {
+                const sanitized = raw.replaceAll(/\\(?!["\\/bfnrtu])/g, '\\\\');
+                return JSON.parse(sanitized);
+            }
+            catch {
+                return [];
+            }
+        }
+    }
+    /** Normalizes options from JSON string or array. 将 options 从 JSON 字符串或数组统一为数组。 */
+    normalizeOptions(raw) {
+        if (Array.isArray(raw))
+            return raw;
+        if (typeof raw === 'string') {
+            try {
+                const parsed = JSON.parse(raw || '[]');
+                return Array.isArray(parsed) ? parsed : [];
+            }
+            catch {
+                return [];
+            }
+        }
+        return [];
+    }
+    /** Normalizes dependency rules, parsing options for 'update' type rules. 规范化依赖规则。 */
+    normalizeRules(rules) {
+        if (!rules)
+            return [];
+        return rules.map((rule) => ({
+            ...rule,
+            options: rule.type === 'update' && rule.options != null
+                ? this.normalizeOptions(rule.options)
+                : rule.options,
+        }));
+    }
+    /**
+     * Evaluates show/hide rules to determine field visibility.
+     * Only 'show' and 'hide' rule types are honored in read-only mode;
+     * disable/enable/clear/update are ignored.
+     * 评估 show/hide 规则决定字段可见性。
+     * 只读模式下仅生效 show/hide，忽略 disable/enable/clear/update。
+     */
+    isVisible(field, data) {
+        const rules = this.normalizeRules(field.rules);
+        const visibleRules = rules.filter((r) => r.type === 'show' || r.type === 'hide');
+        if (visibleRules.length === 0)
+            return true;
+        const depValues = {};
+        for (const dep of field.dependencies ?? []) {
+            depValues[dep] = data[dep] ?? '';
+        }
+        const result = FormRuleEngine.evaluate(visibleRules, depValues, {
+            visible: true,
+            disabled: false,
+            options: this.normalizeOptions(field.options),
+            value: safeStringify(data[field.name ?? ''] ?? field.dft ?? ''),
+        });
+        return result.visible;
+    }
+    /** Resolves the raw string value for a field from data or default. 从 data 或缺省值解析字段的原始字符串值。 */
+    resolveRawValue(field, data) {
+        const name = field.name ?? '';
+        const val = name in data ? data[name] : (field.dft ?? '');
+        if (val == null)
+            return '';
+        if (typeof val === 'boolean')
+            return val ? 'true' : 'false';
+        if (typeof val === 'number')
+            return String(val);
+        if (Array.isArray(val))
+            return JSON.stringify(val);
+        if (typeof val === 'object')
+            return safeStringify(val);
+        return safeStringify(val);
+    }
+    /** Transforms the raw string value into its typed display value. 将原始字符串值转换为类型化的展示值。 */
+    transformValue(field, rawValue) {
+        const type = field.type ?? 'input';
+        switch (type) {
+            case 'switch':
+                return rawValue === 'true' || rawValue === '';
+            case 'number': {
+                const num = Number(rawValue);
+                return Number.isNaN(num) ? '' : num;
+            }
+            case 'checkbox': {
+                try {
+                    const parsed = JSON.parse(rawValue || '[]');
+                    return Array.isArray(parsed) ? parsed : [];
+                }
+                catch {
+                    return [];
+                }
+            }
+            default:
+                return rawValue;
+        }
+    }
+    /** Renders the type-aware read-only content for a field. 渲染字段的类型感知只读内容。 */
+    renderContent(field, data) {
+        const rawValue = this.resolveRawValue(field, data);
+        const value = this.transformValue(field, rawValue);
+        const options = this.normalizeOptions(field.options);
+        const emptyText = field.emptyText || this._emptyText;
+        const ctx = { value, rawValue, options, field, emptyText };
+        // Custom registered renderer takes precedence.
+        const custom = ViewRegistry.get(field.type ?? 'input');
+        if (custom) {
+            return custom.render(ctx);
+        }
+        return this.renderBuiltin(field, ctx);
+    }
+    /** Renders one of the built-in read-only views by control type. 按控件类型渲染内置只读视图。 */
+    renderBuiltin(field, ctx) {
+        const type = field.type ?? 'input';
+        // Apply filter expression if provided (for input/textarea/number/date types).
+        if (field.filter) {
+            return this.renderFiltered(ctx.rawValue, ctx.emptyText, field.filter);
+        }
+        switch (type) {
+            case 'select':
+            case 'radio':
+                return this.renderOptionLabel(ctx.options, ctx.rawValue, ctx.emptyText);
+            case 'checkbox':
+                return this.renderCheckboxTags(ctx.value, ctx.options, ctx.emptyText);
+            case 'switch':
+                return this.renderSwitch(ctx.value);
+            case 'date-picker':
+            case 'time-picker':
+                return this.renderDate(ctx.rawValue, ctx.emptyText);
+            case 'color-picker':
+                return this.renderColor(ctx.rawValue, ctx.emptyText);
+            case 'rate':
+            case 'slider':
+                return this.renderPlain(ctx.rawValue, ctx.emptyText);
+            default:
+                return this.renderPlain(ctx.rawValue, ctx.emptyText);
+        }
+    }
+    /** Renders a filter-formatted text value. 渲染过滤器格式化后的文本值。 */
+    renderFiltered(rawValue, emptyText, filterExpr) {
+        const filtered = filterFactory.format(rawValue, filterExpr);
+        const text = filtered == null || filtered === '' ? emptyText : safeStringify(filtered);
+        return html `<span class="autoview-text">${text}</span>`;
+    }
+    /** Renders the label of a matched option for select/radio. 渲染 select/radio 匹配选项的 label。 */
+    renderOptionLabel(options, rawValue, emptyText) {
+        const matched = options.find((o) => o.id === rawValue);
+        return html `<span class="autoview-text">${matched?.label ?? emptyText}</span>`;
+    }
+    /** Renders multiple tags for checkbox values. 渲染 checkbox 多值的标签组。 */
+    renderCheckboxTags(value, options, emptyText) {
+        const arr = Array.isArray(value) ? value : [];
+        if (arr.length === 0)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        return html `<span class="autoview-tags">
+      ${arr.map((id) => {
+            const matched = options.find((o) => o.id === id);
+            return html `<aithe-tag variant="default" size="sm">${matched?.label ?? id}</aithe-tag>`;
+        })}
+    </span>`;
+    }
+    /** Renders a yes/no tag for switch. 渲染 switch 的 是/否 标签。 */
+    renderSwitch(value) {
+        const on = value === true;
+        return html `<aithe-tag variant=${on ? 'success' : 'default'} size="sm">
+      ${on ? t('form.autoView.yes', 'Yes') : t('form.autoView.no', 'No')}
+    </aithe-tag>`;
+    }
+    /** Renders a formatted date value. 渲染格式化日期值。 */
+    renderDate(rawValue, emptyText) {
+        if (!rawValue)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        const filtered = filterFactory.format(rawValue, 'date yyyy-MM-dd');
+        return html `<span class="autoview-text">${filtered || emptyText}</span>`;
+    }
+    /** Renders a color chip plus hex text. 渲染色块及色值文本。 */
+    renderColor(rawValue, emptyText) {
+        if (!rawValue)
+            return html `<span class="autoview-empty">${emptyText}</span>`;
+        return html `<span class="autoview-color">
+      <span class="autoview-color-chip" style="background:${rawValue}"></span>
+      <span class="autoview-text">${rawValue}</span>
+    </span>`;
+    }
+    /** Renders a plain text value with empty fallback. 渲染纯文本值，空值回退。 */
+    renderPlain(rawValue, emptyText) {
+        const text = rawValue || emptyText;
+        const isEmpty = !rawValue;
+        return html `<span class=${isEmpty ? 'autoview-empty' : 'autoview-text'}>${text}</span>`;
+    }
+    render() {
+        const configs = this.parseFields();
+        const data = this._data;
+        return html `
+      <aithe-desc
+        column=${this.column}
+        ?border=${this.border}
+        border-style=${this.borderStyle}
+        label-background=${this.labelBackground}
+        direction=${this.direction}
+        label-width=${this.labelWidth}
+        size=${this.size}
+        title=${this.title || nothing}
+        .showTitle=${this.showTitle}
+        max-rows=${this.maxRows}
+      >
+        <slot name="title" slot="title"></slot>
+        <slot name="extra" slot="extra"></slot>
+        ${configs.map((field) => this.renderItem(field, data))}
+      </aithe-desc>
+    `;
+    }
+    /** Renders a single desc-item with type-aware content. 渲染单个 desc-item 及其类型感知内容。 */
+    renderItem(field, data) {
+        if (!this.isVisible(field, data))
+            return html ``;
+        const label = field.hideLabel ? '' : (field.label ?? '');
+        const content = this.renderContent(field, data);
+        return html `
+      <aithe-desc-item
+        label=${label || nothing}
+        .span=${field.span ?? 1}
+        .rowspan=${field.rowspan ?? 1}
+        .align=${field.align ?? 'left'}
+      >${content}</aithe-desc-item>
+    `;
+    }
+    /**
+     * Emits `aithe-view-ready` after the first render with the values of all visible fields.
+     * 初始渲染完成后发射 `aithe-view-ready`，携带所有可见字段的值。
+     */
+    firstUpdated() {
+        this.emit('view-ready', { values: this.getValues() });
+    }
+};
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "fields", void 0);
+__decorate([
+    property({ type: Object })
+], AitheAutoView.prototype, "data", void 0);
+__decorate([
+    property({ type: Number })
+], AitheAutoView.prototype, "column", void 0);
+__decorate([
+    property({ type: Boolean })
+], AitheAutoView.prototype, "border", void 0);
+__decorate([
+    property({ attribute: 'border-style', type: String })
+], AitheAutoView.prototype, "borderStyle", void 0);
+__decorate([
+    property({ attribute: 'label-background', type: String })
+], AitheAutoView.prototype, "labelBackground", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "direction", void 0);
+__decorate([
+    property({ type: String, attribute: 'label-width' })
+], AitheAutoView.prototype, "labelWidth", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "size", void 0);
+__decorate([
+    property({ type: String })
+], AitheAutoView.prototype, "title", void 0);
+__decorate([
+    property({ attribute: 'show-title', type: Boolean })
+], AitheAutoView.prototype, "showTitle", void 0);
+__decorate([
+    property({ type: Number, attribute: 'max-rows' })
+], AitheAutoView.prototype, "maxRows", void 0);
+__decorate([
+    property({ type: String, attribute: 'empty-text' })
+], AitheAutoView.prototype, "emptyText", void 0);
+AitheAutoView = __decorate([
+    customElement('aithe-autoview')
+], AitheAutoView);
+export { AitheAutoView };

package/dist/components/display/brief-box.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file AitheBriefBox — brief card display / AitheBriefBox — 简要卡片展示
+ * @description AitheBriefBox renders a compact card with name, tags, status on the left
+ *              and actions on the right (visible on hover/focus).
+ *              AitheBriefBox 渲染紧凑卡片：左侧 name/tags/status，右侧 actions（hover 显示）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region (visible on hover/focus). 操作按钮区域（hover/focus 时显示）。
+ *
+ * @csspart select - The select region container. 选择区域容器。
+ * @csspart name - The name region container. 名称区域容器。
+ * @csspart tags - The tags region container. 标签区域容器。
+ * @csspart status - The status region container. 状态区域容器。
+ * @csspart actions - The action buttons region container. 操作按钮区域容器。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-brief-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="status">Active</span>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ * </aithe-brief-box>
+ * ```
+ */
+import { type TemplateResult } from 'lit';
+import { AitheMiniBox } from './mini-box';
+export declare class AitheBriefBox extends AitheMiniBox {
+    static readonly styles: (import("lit").CSSResult | import("lit").CSSResult[])[];
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'aithe-brief-box': AitheBriefBox;
+    }
+}
+//# sourceMappingURL=brief-box.d.ts.map

package/dist/components/display/brief-box.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"brief-box.d.ts","sourceRoot":"","sources":["../../../src/components/display/brief-box.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGrD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,qBACa,aAAc,SAAQ,YAAY;IAC7C,gBAAyB,MAAM,0DAkD7B;IAEO,MAAM,IAAI,cAAc;CAqBlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,aAAa,CAAC;KAClC;CACF"}

package/dist/components/display/brief-box.js

@@ -0,0 +1,117 @@
+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;
+};
+/**
+ * @file AitheBriefBox — brief card display / AitheBriefBox — 简要卡片展示
+ * @description AitheBriefBox renders a compact card with name, tags, status on the left
+ *              and actions on the right (visible on hover/focus).
+ *              AitheBriefBox 渲染紧凑卡片：左侧 name/tags/status，右侧 actions（hover 显示）。
+ *
+ * @slot name - Primary label / title region. 主标签/标题区域。
+ * @slot tags - Tags region. 标签区域。
+ * @slot status - Status indicator region. 状态指示器区域。
+ * @slot actions - Action buttons region (visible on hover/focus). 操作按钮区域（hover/focus 时显示）。
+ *
+ * @csspart select - The select region container. 选择区域容器。
+ * @csspart name - The name region container. 名称区域容器。
+ * @csspart tags - The tags region container. 标签区域容器。
+ * @csspart status - The status region container. 状态区域容器。
+ * @csspart actions - The action buttons region container. 操作按钮区域容器。
+ *
+ * @fires aithe-box-click - Fired when the box is clicked. 点击 box 时触发。
+ * @fires aithe-selected-change - Fired when selected changes via checkbox. selected 变化时触发。
+ *
+ * @example
+ * ```html
+ * <aithe-brief-box selectable>
+ *   <aithe-profile slot="name" title="Project Alpha" desc="Frontend application" icon="(class)app"></aithe-profile>
+ *   <span slot="status">Active</span>
+ *   <span slot="tags"><aithe-tag>frontend</aithe-tag></span>
+ *   <span slot="actions"><aithe-button size="sm">Edit</aithe-button></span>
+ * </aithe-brief-box>
+ * ```
+ */
+import { css, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { AitheMiniBox } from './mini-box';
+let AitheBriefBox = class AitheBriefBox extends AitheMiniBox {
+    static { this.styles = [
+        ...AitheMiniBox.styles,
+        css `
+      .brief-left {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      .brief-top {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: var(--aithe-space-2, 8px);
+      }
+
+      .brief-tags {
+        display: flex;
+        gap: var(--aithe-space-1, 4px);
+        overflow: hidden;
+        flex-wrap: nowrap;
+      }
+
+      .brief-status-row {
+        display: flex;
+        align-items: center;
+      }
+
+      .brief-actions {
+        display: none;
+        flex-direction: column;
+        align-items: stretch;
+        gap: var(--aithe-space-1, 4px);
+        flex-shrink: 0;
+        padding-left: var(--aithe-space-2, 8px);
+      }
+
+      .brief-actions ::slotted(*) {
+        display: flex;
+        flex-direction: column;
+        gap: var(--aithe-space-1, 4px);
+      }
+
+      :host(:hover) .brief-actions,
+      :host(:focus-within) .brief-actions {
+        display: flex;
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="box-inner" @click=${this.handleBoxClick}>
+        ${this.renderCheckbox()}
+        <div class="brief-left">
+          <div class="brief-top">
+            <slot name="name"></slot>
+          </div>
+          <div class="brief-tags">
+            <slot name="tags"></slot>
+          </div>
+          <div class="brief-status-row">
+            <slot name="status"></slot>
+          </div>
+        </div>
+        <div class="brief-actions" part="actions">
+          <slot name="actions"></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+AitheBriefBox = __decorate([
+    customElement('aithe-brief-box')
+], AitheBriefBox);
+export { AitheBriefBox };