@mk-kit/ui 0.35.0 → 0.36.0

package/fesm2022/mk-kit-ui.mjs

@@ -14,6 +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/media';
 
 /*

package/fesm2022/mk-kit-ui.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}
+{"version":3,"file":"mk-kit-ui.mjs","sources":["../../../projects/mk-kit/src/public-api.ts","../../../projects/mk-kit/src/mk-kit-ui.ts"],"sourcesContent":["/*\n * Public API Surface of @mk-kit/ui.\n *\n * The library ships Material-style secondary entry points — import from the\n * group entries (`@mk-kit/ui/forms`, `@mk-kit/ui/table`, …) so a code-split\n * app only carries the groups each chunk uses. This root entry re-exports\n * everything for convenience; importing it eagerly pulls all groups into the\n * importing chunk.\n */\nexport * from '@mk-kit/ui/core';\nexport * from '@mk-kit/ui/icon';\nexport * from '@mk-kit/ui/chip';\nexport * from '@mk-kit/ui/checkbox';\nexport * from '@mk-kit/ui/button';\nexport * from '@mk-kit/ui/directives';\nexport * from '@mk-kit/ui/dnd';\nexport * from '@mk-kit/ui/navigation';\nexport * from '@mk-kit/ui/forms';\nexport * from '@mk-kit/ui/datetime';\nexport * from '@mk-kit/ui/table';\nexport * from '@mk-kit/ui/data';\nexport * from '@mk-kit/ui/feedback';\nexport * from '@mk-kit/ui/rich-text';\nexport * from '@mk-kit/ui/block-editor';\nexport * from '@mk-kit/ui/context-menu';\nexport * from '@mk-kit/ui/layout';\nexport * from '@mk-kit/ui/media';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;AAQG;;ACRH;;AAEG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-kit/ui",
-  "version": "0.35.0",
+  "version": "0.36.0",
   "publishConfig": {
     "access": "public"
   },
@@ -107,6 +107,10 @@
       "types": "./types/mk-kit-ui-icon.d.ts",
       "default": "./fesm2022/mk-kit-ui-icon.mjs"
     },
+    "./layout": {
+      "types": "./types/mk-kit-ui-layout.d.ts",
+      "default": "./fesm2022/mk-kit-ui-layout.mjs"
+    },
     "./media": {
       "types": "./types/mk-kit-ui-media.d.ts",
       "default": "./fesm2022/mk-kit-ui-media.mjs"

package/styles/mk-kit.css

@@ -381,6 +381,22 @@ body.mk-app {
   border: 0;
 }
 
+/* Print helpers: `.mk-print-hidden` drops page chrome (toolbars, filters)
+   from paper; `.mk-print-only` shows something (a title, a date) only there.
+   Components ship their own `@media print` rules — mk-table prints as one
+   unbroken sheet with repeating headers and no controls. */
+.mk-print-only {
+  display: none;
+}
+
+@media print {
+  .mk-print-hidden {
+    display: none !important;
+  }
+  .mk-print-only {
+    display: revert;
+  }
+}
 /* mk-drag-handle — the grip a pointer drag must start on. MkDragHandle is a
  * DIRECTIVE (so it composes onto any element, including other components'
  * hosts like mk-icon), and directives cannot carry styles — hence the global

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

@@ -1,5 +1,5 @@
 import * as _angular_core from '@angular/core';
-import { InjectionToken, ComponentRef, Injector, OnDestroy, Type, AfterViewInit, ElementRef, Provider, Signal } from '@angular/core';
+import { InjectionToken, OnDestroy, Signal, ComponentRef, Injector, Type, AfterViewInit, ElementRef, Provider } from '@angular/core';
 import { Observable } from 'rxjs';
 import { ValidationErrors } from '@angular/forms';
 
@@ -84,6 +84,67 @@ declare class MkThemeService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<MkThemeService>;
 }
 
+/** Named viewport ranges, mobile-first: each starts at its min-width. */
+type MkBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+/** Min-widths (px) at which each named breakpoint begins; `xs` is everything below `sm`. */
+type MkBreakpoints = Record<Exclude<MkBreakpoint, 'xs'>, number>;
+/** The default scale (same numbers as Tailwind, so mental models transfer). */
+declare const MK_DEFAULT_BREAKPOINTS: MkBreakpoints;
+/** Override the breakpoint scale app-wide: `{ provide: MK_BREAKPOINTS, useValue: { …, lg: 1100 } }`. */
+declare const MK_BREAKPOINTS: InjectionToken<MkBreakpoints>;
+/**
+ * A value that may differ per breakpoint: either the plain value or a
+ * mobile-first map, `{ xs: 1, md: 2, xl: 4 }`, where each key applies from
+ * that breakpoint up until the next key given.
+ */
+type MkResponsive<T> = T | Partial<Record<MkBreakpoint, T>>;
+/** True when `value` is a per-breakpoint map rather than a plain value. */
+declare function mkIsResponsive<T>(value: MkResponsive<T>): value is Partial<Record<MkBreakpoint, T>>;
+/**
+ * Reactive viewport breakpoints, one `matchMedia` listener per step.
+ *
+ * ```ts
+ * private readonly bp = inject(MkBreakpointService);
+ * readonly compact = this.bp.down('md');          // Signal<boolean>
+ * readonly columns = computed(() => this.bp.resolve({ xs: 1, md: 2, xl: 4 }));
+ * ```
+ *
+ * On the server (no `window`) everything reports `xs`.
+ */
+declare class MkBreakpointService implements OnDestroy {
+    /** The breakpoint scale in effect (see {@link MK_BREAKPOINTS}). */
+    readonly breakpoints: MkBreakpoints;
+    private readonly document;
+    private readonly isBrowser;
+    /** `matches` per step, in scale order (`sm` first). */
+    private readonly steps;
+    private readonly cleanup;
+    private readonly queries;
+    private readonly ups;
+    private readonly downs;
+    /** The widest breakpoint the viewport currently satisfies. */
+    readonly current: Signal<MkBreakpoint>;
+    constructor();
+    /** True while the viewport is at least `bp` wide (`up('md')` = md, lg, xl, 2xl). */
+    up(bp: MkBreakpoint): Signal<boolean>;
+    /** True while the viewport is narrower than `bp` (`down('md')` = xs, sm). */
+    down(bp: MkBreakpoint): Signal<boolean>;
+    /** True while the viewport is at least `from` and narrower than `to`. */
+    between(from: MkBreakpoint, to: MkBreakpoint): Signal<boolean>;
+    /** Any media query as a signal, e.g. `observe('(orientation: portrait)')`. */
+    observe(query: string): Signal<boolean>;
+    /**
+     * Pick the entry of a responsive value for the current viewport —
+     * mobile-first, so `{ xs: 1, md: 2 }` gives 1 on `sm` and 2 on `xl`.
+     * A plain value is returned as is. Read inside a `computed` to track it.
+     */
+    resolve<T>(value: MkResponsive<T>): T | undefined;
+    ngOnDestroy(): void;
+    private watch;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<MkBreakpointService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<MkBreakpointService>;
+}
+
 type MkAriaLivePoliteness = 'polite' | 'assertive';
 /**
  * Announces messages to assistive technology via a visually-hidden
@@ -780,6 +841,9 @@ interface MkI18nStrings {
     /** Row expander toggle labels. */
     expandRow: string;
     collapseRow: string;
+    /** Tree-row toggle labels (`childrenKey`). */
+    expandTreeRow: string;
+    collapseTreeRow: string;
     /** aria-label of a group header's toggle when the group is collapsed. */
     expandGroup: string;
     /** aria-label of a group header's toggle when the group is expanded. */
@@ -1117,5 +1181,5 @@ type MkErrorMessages = Readonly<Record<string, string | ((err: any) => string)>>
  */
 declare function mkFirstErrorMessage(errors: ValidationErrors | null | undefined, strings: MkValidationStrings, overrides?: MkErrorMessages): string | null;
 
-export { MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MkAnchoredPanel, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkUniqueId, mkValidatorChange, provideMkI18n };
-export type { MkAnchoredPosition, MkAnchoredPositionOptions, MkAriaLivePoliteness, MkBlockEditorStrings, MkCodeLanguage, MkDateNames, MkDensity, MkErrorMessages, MkI18nStrings, MkOverlayConfig, MkPlacement, MkResolvedTheme, MkSize$1 as MkSize, MkSortAnnounceDirection, MkThemePreference, MkTone, MkValidationStrings, MkValidatorChangeRef, MkVariant };
+export { MK_BREAKPOINTS, MK_DEFAULT_BREAKPOINTS, MK_DEFAULT_DATE_NAMES, MK_DEFAULT_I18N, MK_DEFAULT_VALIDATION, MK_I18N, MK_OVERLAY_DATA, MkAnchoredPanel, MkBreakpointService, MkFieldContext, MkFocusTrap, MkLiveAnnouncer, MkOverlayRef, MkOverlayService, MkThemeService, mkComputeAnchoredPosition, mkFirstErrorMessage, mkGetFocusable, mkHighlight, mkHighlightJson, mkIsResponsive, mkUniqueId, mkValidatorChange, provideMkI18n };
+export type { MkAnchoredPosition, MkAnchoredPositionOptions, MkAriaLivePoliteness, MkBlockEditorStrings, MkBreakpoint, MkBreakpoints, MkCodeLanguage, MkDateNames, MkDensity, MkErrorMessages, MkI18nStrings, MkOverlayConfig, MkPlacement, MkResolvedTheme, MkResponsive, MkSize$1 as MkSize, MkSortAnnounceDirection, MkThemePreference, MkTone, MkValidationStrings, MkValidatorChangeRef, MkVariant };

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

@@ -37,7 +37,8 @@ declare class MkIcon {
 
 /**
  * IconRegistry — the name → SVG store behind `<mk-icon name="…">`. The built-in
- * {@link MK_DEFAULT_ICONS} set is registered on construction; add your own SVGs
+ * sets — the hand-made {@link MK_DEFAULT_ICONS} and the Lucide-derived
+ * {@link MK_EXTENDED_ICONS} — are registered on construction; add your own SVGs
  * (from a sprite, a design export, anything) with {@link register} /
  * {@link registerIcons}.
  *
@@ -105,4 +106,7 @@ declare const MK_MATERIAL_ICON_ALIASES: Readonly<Record<string, string>>;
  */
 declare function provideMkMaterialIcons(): EnvironmentProviders;
 
-export { MK_DEFAULT_ICONS, MK_MATERIAL_ICON_ALIASES, MkIcon, MkIconRegistry, provideMkMaterialIcons };
+/** Name → SVG markup map of the Lucide-derived icons registered by default. */
+declare const MK_EXTENDED_ICONS: Readonly<Record<string, string>>;
+
+export { MK_DEFAULT_ICONS, MK_EXTENDED_ICONS, MK_MATERIAL_ICON_ALIASES, MkIcon, MkIconRegistry, provideMkMaterialIcons };

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-table.d.ts

@@ -26,6 +26,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 +164,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 +193,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 +323,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 +433,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 +445,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 +456,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 +469,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 +480,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 +528,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. */
@@ -735,5 +863,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,5 @@ 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/media';