@mk-kit/ui 0.35.0 → 0.37.0

package/types/mk-kit-ui-layout.d.ts

@@ -0,0 +1,236 @@
+import { MkResponsive, MkBreakpointService } from '@mk-kit/ui/core';
+import * as _angular_core from '@angular/core';
+import { InputSignal } from '@angular/core';
+
+/**
+ * A spacing value: a step on the `--mk-space-*` scale (`0 1 2 3 4 5 6 8 10 12
+ * 16`, so `4` = `var(--mk-space-4)` = 16px and follows the density modes) or
+ * any CSS length such as `'1.5rem'` / `'clamp(1rem, 2vw, 2rem)'`.
+ */
+type MkSpace = number | string;
+/** Per-breakpoint spacing, e.g. `{ xs: 2, md: 4 }`. */
+type MkResponsiveSpace = MkResponsive<MkSpace>;
+/**
+ * A number, or a numeric string as it arrives from a plain attribute
+ * (`gap="4"`, `colSpan="2"`), as a number; anything else unchanged.
+ */
+declare function mkNumeric<T>(value: T): T | number;
+/** Translate a {@link MkSpace} into CSS (`null` when unset). */
+declare function mkSpaceToCss(value: MkSpace | null | undefined): string | null;
+/** Flex / grid main-axis distribution keywords, in plain words. */
+type MkJustify = 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly' | 'stretch';
+/** Cross-axis alignment keywords. */
+type MkAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+/** `justify-content` value for a {@link MkJustify} keyword (`null` when unset). */
+declare function mkJustifyToCss(value: MkJustify | null | undefined): string | null;
+/** `align-items` / `align-self` value for a {@link MkAlign} keyword (`null` when unset). */
+declare function mkAlignToCss(value: MkAlign | null | undefined): string | null;
+
+/** Flex direction keywords. */
+type MkFlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse';
+/**
+ * Shared inputs and host style bindings of `mk-stack` and `mk-flex`.
+ * Responsive inputs re-resolve when the viewport crosses a breakpoint.
+ */
+declare abstract class MkFlexBase {
+    protected readonly bp: MkBreakpointService;
+    /** Space between children — a `--mk-space-*` step, a CSS length, or a per-breakpoint map. */
+    abstract readonly gap: InputSignal<MkResponsiveSpace>;
+    /** Main-axis direction; may be responsive, e.g. `{ xs: 'column', md: 'row' }`. */
+    abstract readonly direction: InputSignal<MkResponsive<MkFlexDirection>>;
+    /** Cross-axis alignment of children. */
+    readonly align: InputSignal<MkResponsive<MkAlign> | null>;
+    /** Main-axis distribution of children. */
+    readonly justify: InputSignal<MkResponsive<MkJustify> | null>;
+    /** Let children wrap onto new lines. */
+    readonly wrap: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render as `inline-flex` (sits in a line of text) instead of a block. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly directionCss: _angular_core.Signal<MkFlexDirection | null>;
+    protected readonly gapCss: _angular_core.Signal<string | null>;
+    protected readonly alignCss: _angular_core.Signal<string | null>;
+    protected readonly justifyCss: _angular_core.Signal<string | null>;
+    protected readonly wrapCss: _angular_core.Signal<"wrap" | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlexBase, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkFlexBase, never, never, { "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "wrap": { "alias": "wrap"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Stack — children laid out one after another with a consistent gap, vertical
+ * by default. The everyday layout primitive: form sections, card bodies,
+ * sidebars, a row of buttons (`direction="row"`).
+ *
+ * ```html
+ * <mk-stack gap="4">
+ *   <mk-input … />
+ *   <mk-input … />
+ *   <mk-stack direction="row" gap="2" justify="end">
+ *     <button mkButton variant="ghost">Cancel</button>
+ *     <button mkButton>Save</button>
+ *   </mk-stack>
+ * </mk-stack>
+ *
+ * <!-- Stack on phones, side by side from md up -->
+ * <mk-stack [direction]="{ xs: 'column', md: 'row' }" [gap]="{ xs: 3, md: 6 }">…</mk-stack>
+ * ```
+ */
+declare class MkStack extends MkFlexBase {
+    /** Space between children (default `4` = 16px). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Direction (default `column`). */
+    readonly direction: _angular_core.InputSignal<MkResponsive<MkFlexDirection>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkStack, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkStack, "mk-stack", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Flex — a flexbox container with its options as inputs, horizontal by default
+ * and no gap unless asked. Reach for it when a stack's "one after another"
+ * isn't the point: space-between toolbars, centring, wrapping tag clouds.
+ * Children can fine-tune themselves with `mkFlexItem`.
+ *
+ * ```html
+ * <mk-flex align="center" justify="between" gap="3">
+ *   <h2>Orders</h2>
+ *   <button mkButton>New order</button>
+ * </mk-flex>
+ * <mk-flex wrap gap="2">@for (tag of tags; track tag) { <mk-chip>{{ tag }}</mk-chip> }</mk-flex>
+ * ```
+ */
+declare class MkFlex extends MkFlexBase {
+    /** Space between children (default none). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Direction (default `row`). */
+    readonly direction: _angular_core.InputSignal<MkResponsive<MkFlexDirection>>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlex, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkFlex, "mk-flex", never, { "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Per-child flex options inside `mk-flex` / `mk-stack` (or any flex parent).
+ *
+ * ```html
+ * <mk-flex gap="3">
+ *   <mk-input mkFlexItem grow />      <!-- takes the remaining width -->
+ *   <button mkButton>Search</button>
+ * </mk-flex>
+ * ```
+ */
+declare class MkFlexItem {
+    private readonly bp;
+    /** `flex-grow`; a bare `grow` attribute means `1`. */
+    readonly grow: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /** `flex-shrink`; a bare `shrink` attribute means `1`, `[shrink]="0"` pins the size. */
+    readonly shrink: _angular_core.InputSignalWithTransform<number | null, unknown>;
+    /** `flex-basis` — any CSS length or `auto`; may be responsive. */
+    readonly basis: _angular_core.InputSignal<MkResponsive<string> | null>;
+    /** Override the parent's `align` for this child. */
+    readonly alignSelf: _angular_core.InputSignal<MkResponsive<MkAlign> | null>;
+    /** Visual order; may be responsive (e.g. move a sidebar first on phones). */
+    readonly order: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    protected readonly growCss: _angular_core.Signal<number | null>;
+    protected readonly shrinkCss: _angular_core.Signal<number | null>;
+    protected readonly basisCss: _angular_core.Signal<string | null>;
+    protected readonly alignSelfCss: _angular_core.Signal<string | null>;
+    protected readonly orderCss: _angular_core.Signal<string | number | null>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkFlexItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkFlexItem, "[mkFlexItem]", never, { "grow": { "alias": "grow"; "required": false; "isSignal": true; }; "shrink": { "alias": "shrink"; "required": false; "isSignal": true; }; "basis": { "alias": "basis"; "required": false; "isSignal": true; }; "alignSelf": { "alias": "alignSelf"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** `justify-items` keywords. */
+type MkGridJustify = 'start' | 'center' | 'end' | 'stretch';
+/**
+ * Grid — a CSS grid with the common cases as inputs.
+ *
+ * - `columns` — a count (`3` → three equal tracks) or a raw
+ *   `grid-template-columns` string (`'240px 1fr'`); responsive maps work for
+ *   both: `[columns]="{ xs: 1, md: 2, xl: 4 }"`.
+ * - `minColumnWidth` — auto-responsive without breakpoints: as many
+ *   `≥ 16rem` columns as fit (`auto-fill`; add `autoFit` to stretch the last
+ *   row's items instead of leaving empty tracks). Wins over `columns`.
+ * - `gap`, `rowGap`, `columnGap` — `--mk-space-*` steps or CSS lengths.
+ *
+ * Children can span tracks with `mkGridItem`.
+ *
+ * ```html
+ * <mk-grid [columns]="{ xs: 1, md: 2, xl: 4 }" gap="4">
+ *   @for (kpi of kpis; track kpi.id) { <mk-card>…</mk-card> }
+ * </mk-grid>
+ *
+ * <mk-grid minColumnWidth="16rem" gap="4">…cards…</mk-grid>
+ * ```
+ */
+declare class MkGrid {
+    private readonly bp;
+    /** Column count or `grid-template-columns` value; responsive allowed (default `1`). */
+    readonly columns: _angular_core.InputSignal<MkResponsive<string | number>>;
+    /** Row count or `grid-template-rows` value; responsive allowed. */
+    readonly rows: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Minimum column width for an auto-filling grid, e.g. `16rem`. Overrides `columns`. */
+    readonly minColumnWidth: _angular_core.InputSignal<MkResponsive<string> | null>;
+    /** With `minColumnWidth`: use `auto-fit` so items stretch when a row is short. */
+    readonly autoFit: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Gap between both rows and columns (default `4` = 16px). */
+    readonly gap: _angular_core.InputSignal<MkResponsiveSpace>;
+    /** Row gap override. */
+    readonly rowGap: _angular_core.InputSignal<MkResponsiveSpace | null>;
+    /** Column gap override. */
+    readonly columnGap: _angular_core.InputSignal<MkResponsiveSpace | null>;
+    /** `align-items` for every cell. */
+    readonly align: _angular_core.InputSignal<MkResponsive<MkAlign> | null>;
+    /** `justify-items` for every cell. */
+    readonly justify: _angular_core.InputSignal<MkResponsive<MkGridJustify> | null>;
+    /** `grid-auto-flow` (e.g. `dense` to backfill holes left by spanning items). */
+    readonly flow: _angular_core.InputSignal<"row" | "column" | "dense" | "row dense" | "column dense" | null>;
+    /** Render as `inline-grid`. */
+    readonly inline: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    protected readonly columnsCss: _angular_core.Signal<string | null>;
+    protected readonly rowsCss: _angular_core.Signal<string | null>;
+    protected readonly rowGapCss: _angular_core.Signal<string | null>;
+    protected readonly columnGapCss: _angular_core.Signal<string | null>;
+    protected readonly alignCss: _angular_core.Signal<string | null>;
+    protected readonly justifyCss: _angular_core.Signal<MkGridJustify | null>;
+    protected readonly flowCss: _angular_core.Signal<"row" | "column" | "dense" | "row dense" | "column dense" | null>;
+    /** A track list: a count becomes `repeat(n, minmax(0, 1fr))` so long content cannot blow a column out. */
+    private static tracks;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkGrid, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkGrid, "mk-grid", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "minColumnWidth": { "alias": "minColumnWidth"; "required": false; "isSignal": true; }; "autoFit": { "alias": "autoFit"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "rowGap": { "alias": "rowGap"; "required": false; "isSignal": true; }; "columnGap": { "alias": "columnGap"; "required": false; "isSignal": true; }; "align": { "alias": "align"; "required": false; "isSignal": true; }; "justify": { "alias": "justify"; "required": false; "isSignal": true; }; "flow": { "alias": "flow"; "required": false; "isSignal": true; }; "inline": { "alias": "inline"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Per-cell placement inside `mk-grid`: span several tracks, or pin a start
+ * line. All inputs accept responsive maps, so a hero card can span the full
+ * row on phones and two of four columns on desktop.
+ *
+ * ```html
+ * <mk-grid [columns]="{ xs: 1, lg: 4 }" gap="4">
+ *   <mk-card mkGridItem [colSpan]="{ xs: 1, lg: 2 }">Revenue</mk-card>
+ *   …
+ * </mk-grid>
+ * ```
+ */
+declare class MkGridItem {
+    private readonly bp;
+    /** Number of columns to span (`'all'` = the full row). */
+    readonly colSpan: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Number of rows to span. */
+    readonly rowSpan: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Column line to start at (1-based). */
+    readonly colStart: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** Row line to start at (1-based). */
+    readonly rowStart: _angular_core.InputSignal<MkResponsive<string | number> | null>;
+    /** `align-self` for this cell. */
+    readonly alignSelf: _angular_core.InputSignal<MkResponsive<"start" | "center" | "end" | "stretch"> | null>;
+    /** `justify-self` for this cell. */
+    readonly justifySelf: _angular_core.InputSignal<MkResponsive<"start" | "center" | "end" | "stretch"> | null>;
+    protected readonly columnCss: _angular_core.Signal<string | null>;
+    protected readonly rowCss: _angular_core.Signal<string | null>;
+    protected readonly alignSelfCss: _angular_core.Signal<"start" | "center" | "end" | "stretch" | null>;
+    protected readonly justifySelfCss: _angular_core.Signal<"start" | "center" | "end" | "stretch" | null>;
+    private static line;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkGridItem, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkGridItem, "[mkGridItem]", never, { "colSpan": { "alias": "colSpan"; "required": false; "isSignal": true; }; "rowSpan": { "alias": "rowSpan"; "required": false; "isSignal": true; }; "colStart": { "alias": "colStart"; "required": false; "isSignal": true; }; "rowStart": { "alias": "rowStart"; "required": false; "isSignal": true; }; "alignSelf": { "alias": "alignSelf"; "required": false; "isSignal": true; }; "justifySelf": { "alias": "justifySelf"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { MkFlex, MkFlexBase, MkFlexItem, MkGrid, MkGridItem, MkStack, mkAlignToCss, mkJustifyToCss, mkNumeric, mkSpaceToCss };
+export type { MkAlign, MkFlexDirection, MkGridJustify, MkJustify, MkResponsiveSpace, MkSpace };

package/types/mk-kit-ui-query-builder.d.ts

@@ -0,0 +1,98 @@
+import * as _angular_core from '@angular/core';
+import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkQueryField, MkQueryGroup, MkSize, mkIsQueryGroup, MkQueryRule, MkQueryCombinator, MkQueryNode } from '@mk-kit/ui/core';
+import { MkSelectOption } from '@mk-kit/ui/forms';
+
+/**
+ * QueryBuilder — a rule / group tree the user assembles from your `fields`,
+ * held as plain JSON (`MkQueryGroup`) in the two-way `query` model. Pair it
+ * with `mkQueryToPredicate()` to filter rows in the browser, with
+ * `MkTableDataSource.setQuery()` to send it to the server, or with
+ * `mkQueryToText()` for a readable summary.
+ *
+ * ```html
+ * <mk-query-builder [fields]="fields" [(query)]="query" allowNot />
+ *
+ * fields: MkQueryField[] = [
+ *   { key: 'name', label: 'Name' },
+ *   { key: 'orders', label: 'Orders', type: 'number' },
+ *   { key: 'status', label: 'Status', type: 'select', options: [{ label: 'Active', value: 'active' }, …] },
+ *   { key: 'since', label: 'Customer since', type: 'date' },
+ *   { key: 'vip', label: 'VIP', type: 'boolean' },
+ * ];
+ * rows = computed(() => this.all.filter(mkQueryToPredicate(this.query(), this.fields)));
+ * ```
+ */
+declare class MkQueryBuilder {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    /** The filterable fields, in picker order. */
+    readonly fields: _angular_core.InputSignal<readonly MkQueryField[]>;
+    /** The query tree (two-way). Starts as an empty `and` group. */
+    readonly query: _angular_core.ModelSignal<MkQueryGroup>;
+    /** How deep groups may nest (0 = rules only). */
+    readonly maxDepth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Offer a *Not* toggle on every group. */
+    readonly allowNot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Control size (default `sm`). */
+    readonly size: _angular_core.InputSignal<MkSize>;
+    readonly ariaLabel: _angular_core.InputSignal<string | undefined>;
+    /** Reset to an empty group. */
+    clear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkQueryBuilder, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkQueryBuilder, "mk-query-builder", never, { "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "query": { "alias": "query"; "required": false; "isSignal": true; }; "maxDepth": { "alias": "maxDepth"; "required": false; "isSignal": true; }; "allowNot": { "alias": "allowNot"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "query": "queryChange"; }, never, never, true, never>;
+}
+
+/**
+ * One group of the builder — its combinator toggle, rules, nested groups and
+ * the add / remove actions. Used by `mk-query-builder`; every edit emits a
+ * new immutable group upward.
+ */
+declare class MkQueryGroupComponent {
+    protected readonly i18n: _mk_kit_ui_core.MkI18nStrings;
+    readonly group: _angular_core.InputSignal<MkQueryGroup>;
+    readonly fields: _angular_core.InputSignal<readonly MkQueryField[]>;
+    readonly depth: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly maxDepth: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly allowNot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly root: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly size: _angular_core.InputSignal<MkSize>;
+    /** A new version of this group after an edit. */
+    readonly groupChange: _angular_core.OutputEmitterRef<MkQueryGroup>;
+    /** The user removed this (non-root) group. */
+    readonly remove: _angular_core.OutputEmitterRef<void>;
+    protected readonly fieldOptions: _angular_core.Signal<MkSelectOption[]>;
+    protected readonly canNest: _angular_core.Signal<boolean>;
+    protected readonly booleanOptions: _angular_core.Signal<MkSelectOption[]>;
+    protected isGroup: typeof mkIsQueryGroup;
+    protected fieldOf(rule: MkQueryRule): MkQueryField | undefined;
+    protected typeOf(rule: MkQueryRule): string;
+    protected operatorOptions(rule: MkQueryRule): MkSelectOption[];
+    protected needsValue(rule: MkQueryRule): boolean;
+    protected selectOptions(rule: MkQueryRule): MkSelectOption[];
+    protected isList(rule: MkQueryRule): boolean;
+    protected isRange(rule: MkQueryRule): boolean;
+    protected asArray(value: unknown): unknown[];
+    protected rangePart(rule: MkQueryRule, index: 0 | 1): unknown;
+    protected dateValue(v: unknown): Date | null;
+    protected numberValue(v: unknown): number | null;
+    protected textValue(v: unknown): string;
+    protected setCombinator(combinator: MkQueryCombinator): void;
+    protected toggleNot(): void;
+    protected addRule(): void;
+    protected addGroup(): void;
+    protected removeAt(index: number): void;
+    protected replaceAt(index: number, node: MkQueryNode): void;
+    protected setField(index: number, rule: MkQueryRule, key: unknown): void;
+    protected setOperator(index: number, rule: MkQueryRule, op: unknown): void;
+    protected setValue(index: number, rule: MkQueryRule, value: unknown): void;
+    protected setRangePart(index: number, rule: MkQueryRule, part: 0 | 1, value: unknown): void;
+    protected setDate(index: number, rule: MkQueryRule, d: Date | null): void;
+    protected setDateRange(index: number, rule: MkQueryRule, part: 0 | 1, d: Date | null): void;
+    protected onTextInput(index: number, rule: MkQueryRule, event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkQueryGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkQueryGroupComponent, "mk-query-group", never, { "group": { "alias": "group"; "required": true; "isSignal": true; }; "fields": { "alias": "fields"; "required": true; "isSignal": true; }; "depth": { "alias": "depth"; "required": false; "isSignal": true; }; "maxDepth": { "alias": "maxDepth"; "required": false; "isSignal": true; }; "allowNot": { "alias": "allowNot"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "root": { "alias": "root"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; }, { "groupChange": "groupChange"; "remove": "remove"; }, never, never, true, never>;
+}
+
+export { MkQueryBuilder, MkQueryGroupComponent };

package/types/mk-kit-ui-table.d.ts

@@ -2,6 +2,7 @@ import * as _mk_kit_ui_table from '@mk-kit/ui/table';
 import * as _angular_core from '@angular/core';
 import { TemplateRef, Signal } from '@angular/core';
 import * as _mk_kit_ui_core from '@mk-kit/ui/core';
+import { MkQueryGroup } from '@mk-kit/ui/core';
 import { Observable } from 'rxjs';
 
 /**
@@ -26,6 +27,65 @@ declare class MkTableRowDetail<T = unknown> {
     static ɵdir: _angular_core.ɵɵDirectiveDeclaration<MkTableRowDetail<any>, "[mkTableRowDetail]", never, {}, {}, never, never, true, never>;
 }
 
+/**
+ * CSV export — turn rows into RFC 4180 text and hand it to the browser as a
+ * download. Framework-free so it also serves data that never touched a table.
+ */
+/** A column to export: the row property, its header, and an optional formatter. */
+interface MkCsvColumn<T = Record<string, unknown>> {
+    /** Property key on each row object supplying the cell value. */
+    key: string;
+    /** Header text; defaults to `key`. */
+    header?: string;
+    /** Formatter turning the raw value into cell text (same shape as `MkTableColumn.format`). */
+    format?: (value: unknown, row: T) => string;
+}
+interface MkCsvOptions {
+    /** Field separator (default `,`; use `;` for locales whose Excel expects it). */
+    delimiter?: string;
+    /** Emit the header row first (default `true`). */
+    header?: boolean;
+    /** Line terminator (default `\r\n`, per RFC 4180). */
+    newline?: string;
+    /**
+     * Prefix a UTF-8 byte-order mark (default `true`) so Excel reads accented
+     * characters correctly. Only affects the downloaded file / returned text.
+     */
+    bom?: boolean;
+    /**
+     * Neutralise spreadsheet formula injection (default `true`): a text cell
+     * starting with `=`, `+`, `-`, `@`, tab or CR is prefixed with `'` so a
+     * malicious value cannot execute when opened in Excel / Sheets. Numbers
+     * are never touched, so `-5` stays `-5`.
+     */
+    sanitize?: boolean;
+    /** Property holding child rows; when set, trees are flattened depth-first. */
+    childrenKey?: string;
+}
+/** Options for {@link mkExportCsv}. */
+interface MkCsvExportOptions extends MkCsvOptions {
+    /** File name for the download (default `export.csv`; `.csv` is appended if missing). */
+    filename?: string;
+}
+/**
+ * Serialise `rows` as CSV text.
+ *
+ * Without `columns` every key of the first row is exported in its own order.
+ * Column formatters are applied, so what the user saw in the table is what
+ * lands in the file.
+ */
+declare function mkToCsv<T>(rows: readonly T[], columns?: readonly MkCsvColumn<T>[], options?: MkCsvOptions): string;
+/**
+ * Trigger a browser download of `text` as a file. No-op outside a DOM
+ * (server-side rendering); returns whether a download was started.
+ */
+declare function mkDownloadText(text: string, filename: string, type?: string): boolean;
+/**
+ * Serialise `rows` as CSV and download it. Returns the CSV text so callers
+ * can also keep it (tests, previews, uploads).
+ */
+declare function mkExportCsv<T>(rows: readonly T[], columns?: readonly MkCsvColumn<T>[], options?: MkCsvExportOptions): string;
+
 /** Horizontal text alignment for a table column. */
 type MkTableAlign = 'start' | 'center' | 'end';
 /** Sort direction; `none` means unsorted. */
@@ -105,12 +165,28 @@ interface MkTableGroup<T = Record<string, unknown>> {
     rows: T[];
 }
 /** Payload emitted by {@link MkTable.groupToggle}. */
+/** Payload of `(treeToggle)`: a parent row was expanded or collapsed. */
+interface MkTreeToggle<T = Record<string, unknown>> {
+    /** The parent row. */
+    row: T;
+    /** Whether its child rows are now shown. */
+    expanded: boolean;
+}
 interface MkGroupToggle {
     /** The toggled group's value. */
     key: unknown;
     /** Whether the group is now collapsed. */
     collapsed: boolean;
 }
+/** Options for {@link MkTable.exportCsv}. */
+interface MkTableExportOptions extends MkCsvExportOptions {
+    /** Export only the selected rows (default: every row). */
+    selectedOnly?: boolean;
+    /** Restrict to these column keys, in table order (default: every column). */
+    columns?: readonly string[];
+    /** Start the browser download (default `true`); `false` just returns the text. */
+    download?: boolean;
+}
 /** One rendered tbody entry: either a group header or a data row. */
 type MkTableItem<T> = {
     kind: 'group';
@@ -118,6 +194,12 @@ type MkTableItem<T> = {
 } | {
     kind: 'row';
     row: T;
+    /** Nesting depth in tree mode (0 for roots and for flat tables). */
+    depth: number;
+    /** Whether the row has child rows (tree mode). */
+    hasChildren: boolean;
+    /** Whether its children are currently shown (tree mode). */
+    expanded: boolean;
 };
 /**
  * Table — a themed data table built on a native `<table>` for accessibility.
@@ -242,6 +324,15 @@ declare class MkTable<T = Record<string, unknown>> {
     readonly cellEdit: _angular_core.OutputEmitterRef<MkCellEdit<T>>;
     /** Emitted when a group header is expanded or collapsed. */
     readonly groupToggle: _angular_core.OutputEmitterRef<MkGroupToggle>;
+    /**
+     * Tree rows: the property on each row holding its child rows (`T[]`). When
+     * set, the table renders a tree grid — child rows are indented under their
+     * parent behind an expand toggle in the first column, sorting applies per
+     * sibling group, and ArrowRight / ArrowLeft on a row open / close it.
+     */
+    readonly childrenKey: _angular_core.InputSignal<string | null>;
+    /** Emitted when a parent row is expanded or collapsed (tree mode). */
+    readonly treeToggle: _angular_core.OutputEmitterRef<MkTreeToggle<T>>;
     /** User-set column widths (px), keyed by column key. */
     private readonly colWidths;
     /** User-set column order (keys); `null` = the input order. */
@@ -343,6 +434,8 @@ declare class MkTable<T = Record<string, unknown>> {
     private static readonly sortCollator;
     /** Data sorted by the active column, or the input order when unsorted. */
     protected readonly sortedData: _angular_core.Signal<T[]>;
+    /** Sort one sibling group by the active column (input order when unsorted). */
+    private sortRows;
     /** `aria-sort` value for a header cell. */
     protected ariaSort(col: MkTableColumn<T>): string | null;
     /** Glyph indicating a column's sort state. */
@@ -353,7 +446,7 @@ declare class MkTable<T = Record<string, unknown>> {
     protected cellText(row: T, col: MkTableColumn<T>): string;
     protected onSort(col: MkTableColumn<T>): void;
     protected onRowClick(row: T): void;
-    /** Keyboard activation for clickable rows (Enter / Space). */
+    /** Keyboard activation for clickable rows (Enter / Space) and tree keys. */
     protected onRowKeydown(event: KeyboardEvent, row: T): void;
     /** Stable row identity for `@for` tracking (trackKey when set, else the row). */
     protected trackRow: (row: T) => unknown;
@@ -364,6 +457,12 @@ declare class MkTable<T = Record<string, unknown>> {
     private readonly selectedKeys;
     /** Whether `row` is currently selected. */
     protected isSelected(row: T): boolean;
+    /**
+     * Every data row, in display order, ignoring tree expansion — what
+     * "select all" and the header checkbox reason about. Equals `sortedData`
+     * for flat tables.
+     */
+    private readonly allRows;
     /** True when every visible row is selected. */
     protected readonly allSelected: _angular_core.Signal<boolean>;
     /** True when some — but not all — visible rows are selected. */
@@ -371,7 +470,7 @@ declare class MkTable<T = Record<string, unknown>> {
     private commitSelection;
     /** Toggle a single row's selection without triggering `rowClick`. */
     protected toggleRow(row: T): void;
-    /** Select or deselect all visible rows. */
+    /** Select or deselect all rows (every tree row, expanded or not). */
     protected toggleAll(): void;
     /** Group values currently collapsed. */
     private readonly collapsedGroups;
@@ -382,6 +481,36 @@ declare class MkTable<T = Record<string, unknown>> {
      * rows when grouping is on, else just the sorted rows.
      */
     protected readonly displayItems: _angular_core.Signal<MkTableItem<T>[]>;
+    /**
+     * Append `rows` as render items. In tree mode each row is followed by its
+     * (sorted) children while it is expanded, one level deeper.
+     */
+    private pushRows;
+    /** The child rows of `row` (tree mode), or an empty list. */
+    private childrenOf;
+    /** Keys of parent rows whose children are shown. */
+    private readonly treeExpanded;
+    /** Whether a parent row's children are currently shown (tree mode). */
+    isTreeExpanded(row: T): boolean;
+    /** Show or hide a parent row's children (tree mode). */
+    toggleTreeRow(row: T, event?: Event): void;
+    /** Expand every parent row (tree mode). */
+    expandAllRows(): void;
+    /** Collapse every parent row (tree mode). */
+    collapseAllRows(): void;
+    /**
+     * The table's rows as CSV: current column order, column formatters applied,
+     * sorted the way they are shown, tree children flattened under their parent
+     * whether or not they are expanded. Downloads the file (default name
+     * `table.csv`) and returns the text.
+     */
+    exportCsv(options?: MkTableExportOptions): string;
+    private setTreeExpanded;
+    /**
+     * ArrowRight opens and ArrowLeft closes a parent row's children (swapped in
+     * RTL). Handled for keys pressed on the row itself or on its tree toggle.
+     */
+    protected onTreeKeydown(event: KeyboardEvent, row: T): boolean;
     /** `@for` identity: group headers by value, rows by {@link trackRow}. */
     protected trackItem: (item: MkTableItem<T>) => unknown;
     /** Whether a group is currently collapsed. */
@@ -400,7 +529,7 @@ declare class MkTable<T = Record<string, unknown>> {
     /** Toggle a row's detail panel, honouring `singleExpand`. */
     protected toggleExpand(row: T, event?: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkTable<any>, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTable<any>, "mk-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "stackAt": { "alias": "stackAt"; "required": false; "isSignal": true; }; "clickableRows": { "alias": "clickableRows"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "trackKey": { "alias": "trackKey"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "groupLabel": { "alias": "groupLabel"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "sortChange": "sortChange"; "rowClick": "rowClick"; "selectionChange": "selectionChange"; "expandedChange": "expandedChange"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "cellEdit": "cellEdit"; "groupToggle": "groupToggle"; }, ["rowDetail", "cellTemplates"], ["[mkTableEmpty]"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<MkTable<any>, "mk-table", never, { "columns": { "alias": "columns"; "required": true; "isSignal": true; }; "data": { "alias": "data"; "required": false; "isSignal": true; }; "stickyHeader": { "alias": "stickyHeader"; "required": false; "isSignal": true; }; "zebra": { "alias": "zebra"; "required": false; "isSignal": true; }; "hover": { "alias": "hover"; "required": false; "isSignal": true; }; "density": { "alias": "density"; "required": false; "isSignal": true; }; "stackAt": { "alias": "stackAt"; "required": false; "isSignal": true; }; "clickableRows": { "alias": "clickableRows"; "required": false; "isSignal": true; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; "isSignal": true; }; "selectable": { "alias": "selectable"; "required": false; "isSignal": true; }; "selected": { "alias": "selected"; "required": false; "isSignal": true; }; "trackKey": { "alias": "trackKey"; "required": false; "isSignal": true; }; "rowClass": { "alias": "rowClass"; "required": false; "isSignal": true; }; "expandable": { "alias": "expandable"; "required": false; "isSignal": true; }; "singleExpand": { "alias": "singleExpand"; "required": false; "isSignal": true; }; "resizableColumns": { "alias": "resizableColumns"; "required": false; "isSignal": true; }; "reorderableColumns": { "alias": "reorderableColumns"; "required": false; "isSignal": true; }; "groupBy": { "alias": "groupBy"; "required": false; "isSignal": true; }; "groupLabel": { "alias": "groupLabel"; "required": false; "isSignal": true; }; "childrenKey": { "alias": "childrenKey"; "required": false; "isSignal": true; }; }, { "selected": "selectedChange"; "sortChange": "sortChange"; "rowClick": "rowClick"; "selectionChange": "selectionChange"; "expandedChange": "expandedChange"; "columnResize": "columnResize"; "columnReorder": "columnReorder"; "cellEdit": "cellEdit"; "groupToggle": "groupToggle"; "treeToggle": "treeToggle"; }, ["rowDetail", "cellTemplates"], ["[mkTableEmpty]"], true, never>;
 }
 
 /** Context handed to an `[mkTableCell]` template. */
@@ -549,6 +678,8 @@ interface MkDataRequest {
     sort: MkSortState | null;
     /** Free-text filter query (`''` = none). */
     filter: string;
+    /** Structured filter from `mk-query-builder` (`null` = none). Compacted: no empty groups or unfinished rules. */
+    query: MkQueryGroup | null;
 }
 /** One page of server data returned by a {@link MkDataFetcher}. */
 interface MkDataPage<T> {
@@ -661,6 +792,7 @@ declare class MkTableDataSource<T> {
     private readonly _pageSize;
     private readonly _sort;
     private readonly _filter;
+    private readonly _query;
     /** Rows of the current page (`[]` until the first load lands). */
     readonly rows: Signal<T[]>;
     /** Total row count across all pages (feed to `mk-pagination`'s `total`). */
@@ -677,6 +809,8 @@ declare class MkTableDataSource<T> {
     readonly sort: Signal<MkSortState | null>;
     /** Current filter query (updates immediately, even while debouncing). */
     readonly filter: Signal<string>;
+    /** Current structured query, or `null`. */
+    readonly query: Signal<MkQueryGroup | null>;
     /** True when a settled load reported no rows at all. */
     readonly empty: Signal<boolean>;
     /** Monotonic request id — settles from older epochs are discarded. */
@@ -706,6 +840,12 @@ declare class MkTableDataSource<T> {
      * flushes it early. A no-op when the query is unchanged.
      */
     setFilter(query: string): void;
+    /**
+     * Set (or clear with `null`) the structured query from `mk-query-builder`.
+     * Empty groups and unfinished rules are dropped before the request; a query
+     * with nothing left is sent as `null`. Resets to page 1 and loads at once.
+     */
+    setQuery(query: MkQueryGroup | null): void;
     /**
      * Re-run the current request immediately (e.g. after a mutation). Flushes a
      * pending debounced filter, since the request reads the live filter value.
@@ -735,5 +875,5 @@ declare class MkTableDataSource<T> {
     private clearSub;
 }
 
-export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail };
-export type { MkCellEdit, MkColumnResize, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableGroup };
+export { MkSort, MkSortHeader, MkTable, MkTableCell, MkTableDataSource, MkTableRowDetail, mkDownloadText, mkExportCsv, mkToCsv };
+export type { MkCellEdit, MkColumnResize, MkCsvColumn, MkCsvExportOptions, MkCsvOptions, MkDataFetcher, MkDataPage, MkDataRequest, MkGroupToggle, MkSortChange, MkSortDirection, MkSortState, MkSortable, MkTableAlign, MkTableCellContext, MkTableColumn, MkTableDataSourceOptions, MkTableDensity, MkTableExportOptions, MkTableGroup, MkTreeToggle };

package/types/mk-kit-ui.d.ts

@@ -14,4 +14,7 @@ export * from '@mk-kit/ui/feedback';
 export * from '@mk-kit/ui/rich-text';
 export * from '@mk-kit/ui/block-editor';
 export * from '@mk-kit/ui/context-menu';
+export * from '@mk-kit/ui/layout';
+export * from '@mk-kit/ui/chat';
+export * from '@mk-kit/ui/query-builder';
 export * from '@mk-kit/ui/media';