@elasticias/ui 0.0.16 → 1.0.1

package/types/elasticias-ui.d.ts

@@ -1,17 +1,22 @@
 import * as _angular_core from '@angular/core';
-import { PipeTransform, OnInit, OnDestroy, OnChanges, TemplateRef, EventEmitter, SimpleChanges } from '@angular/core';
-import { AppUtils } from '@elasticias/utils';
+import { PipeTransform, OnInit, OnChanges, TemplateRef, EventEmitter, AfterContentInit, OnDestroy, SimpleChanges, AfterViewInit } from '@angular/core';
 import { Menu } from 'primeng/menu';
-import { ScreenContext } from '@elasticias/screens';
+import * as _elasticias_screens from '@elasticias/screens';
+import { ScreenContext, EfDetailToolbarAction, EfSearchToolbarAction, EfDataCardColumn, EfDataCardSort, EfDateRange, EfDatePresetKey } from '@elasticias/screens';
+export { EfDataCardColumn, EfDataCardColumnAlign, EfDataCardColumnType, EfDataCardSort, EfDataCardSortDirection, EfDatePresetKey, EfDateRange, EfDetailToolbarAction, EfSearchToolbarAction } from '@elasticias/screens';
+import * as _elasticias_core from '@elasticias/core';
+import { EfModule, EfModuleId, EfNavSection, EfNavItem, EfToast, EfToastAction, EfThemeConfigService } from '@elasticias/core';
 import { BlockableUI } from 'primeng/api';
+import { SafeResourceUrl } from '@angular/platform-browser';
+import { ChartConfiguration } from 'chart.js';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { TranslateService } from '@ngx-translate/core';
 import { InputNumber, InputNumberInputEvent } from 'primeng/inputnumber';
 import { Nullable } from 'primeng/ts-helpers';
 import * as _elasticias_ui from '@elasticias/ui';
 import { Table, TableLazyLoadEvent } from 'primeng/table';
+import { Permissions, EmailMetrics, EmailEventRecord, EmailEventKind } from '@elasticias/types';
 import { PrimeNG } from 'primeng/config';
-import { EfThemeConfigService } from '@elasticias/core';
-import { EmailMetrics, EmailEventRecord, EmailEventKind } from '@elasticias/types';
 
 /**
  * Merged currency pipe from ERP (AppCurrencyPipe) and Store (CurrencyFormatPipe).
@@ -30,6 +35,16 @@ declare class TruncatePipe implements PipeTransform {
     static ɵpipe: _angular_core.ɵɵPipeDeclaration<TruncatePipe, "truncate", true>;
 }
 
+/**
+ * Compact human-readable rendering of a number for KPI displays:
+ * 1000 → "1 k", 2_500_000 → "2,5 M" (fr-MA locale, decimal comma).
+ */
+declare class EfCompactPipe implements PipeTransform {
+    transform(value: number | null | undefined, maxDecimals?: number): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfCompactPipe, never>;
+    static ɵpipe: _angular_core.ɵɵPipeDeclaration<EfCompactPipe, "efCompact", true>;
+}
+
 declare class EfPriceDisplayComponent {
     readonly amount: _angular_core.InputSignal<number>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPriceDisplayComponent, never>;
@@ -289,6 +304,50 @@ declare class EfOrderSummaryComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfOrderSummaryComponent, "ef-order-summary", never, { "orderLines": { "alias": "orderLines"; "required": true; "isSignal": true; }; "countGroupLabels": { "alias": "countGroupLabels"; "required": false; "isSignal": true; }; "legend": { "alias": "legend"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
 
+/**
+ * Presentational shapes for {@link EfChangeHistoryComponent}. Structurally
+ * compatible with the backend `ChangeHistoryEntryDto` / `FieldChangeDto` that
+ * the NSwag client returns, so a screen can pass them straight through without
+ * mapping. Kept lib-local so `@elasticias/ui` stays decoupled from any app's
+ * generated API client.
+ */
+interface EfChangeHistoryFieldChange {
+    field?: string;
+    oldValue?: string | null;
+    newValue?: string | null;
+}
+interface EfChangeHistoryEntry {
+    /** Standardized operation code: created | updated | status_changed | deleted | note. */
+    operation?: string;
+    occurredAt?: string | Date | null;
+    userId?: string | null;
+    userName?: string | null;
+    changes?: EfChangeHistoryFieldChange[] | null;
+    fromStatus?: string | null;
+    toStatus?: string | null;
+    note?: string | null;
+}
+
+/** Emitted when the user picks a product (with its active variant) from the menu. */
+interface ProductTypeaheadSelection {
+    product: Record<string, unknown>;
+    variant: Record<string, unknown> | null;
+    unitPrice: number;
+}
+/** A run of result-label text, flagged when it matches the current query. */
+interface HighlightSegment {
+    text: string;
+    mark: boolean;
+}
+/** Internal view-model for one result row. */
+interface ProductTypeaheadRow {
+    key: string;
+    product: Record<string, unknown>;
+    label: string;
+    variants: Record<string, unknown>[];
+    segments: HighlightSegment[];
+}
+
 /**
  * Reusable order builder component for orders, invoices, and quotes
  * Manages complete order entity with automatic change tracking
@@ -303,9 +362,10 @@ declare class EfOrderSummaryComponent {
  *   (orderChanged)="handleOrderChange($event)"
  * />
  */
-declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
+/** Numeric line columns that support inline click-to-edit. */
+type EditableLineField = 'price' | 'qty' | 'discount' | 'tva';
+declare class EfOrderBuilderComponent implements OnInit {
     rowTrackBy: (_: number, item: OrderLineItem) => string | number;
-    protected readonly AppUtils: typeof AppUtils;
     config: _angular_core.InputSignal<DocumentConfig>;
     order: _angular_core.ModelSignal<OrderEntity>;
     products: _angular_core.InputSignal<Record<string, unknown>[]>;
@@ -317,25 +377,19 @@ declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
     backendErrors: _angular_core.InputSignal<{
         [key: string]: string[];
     }>;
+    /** Optional change-history entries; when non-empty the Historique rail card renders. */
+    auditEntries: _angular_core.InputSignal<EfChangeHistoryEntry[]>;
     openCatalogue: _angular_core.OutputEmitterRef<void>;
     orderChanged: _angular_core.OutputEmitterRef<OrderChangeInfo>;
     orderValidated: _angular_core.OutputEmitterRef<ValidationResult>;
     productsAdded: _angular_core.OutputEmitterRef<OrderLineItem[]>;
     private originalOrder;
-    private updateTimeout;
     private initialized;
-    quickAddProduct: _angular_core.WritableSignal<Record<string, unknown>>;
+    quickAddSelection: _angular_core.WritableSignal<ProductTypeaheadSelection>;
     quickAddPrice: _angular_core.WritableSignal<number>;
     quickAddQuantity: _angular_core.WritableSignal<number>;
     quickAddDisabled: _angular_core.Signal<boolean>;
     orderLines: _angular_core.Signal<OrderLineItem[]>;
-    /**
-     * Flatten products → one option per active variant for the inline ef-select.
-     * Simple products (no variants) get a single row with the product label.
-     * Each option exposes `_displayLabel` for `optionLabel` and carries the
-     * underlying product/variant references for `onProductSelect`.
-     */
-    flattenedProductOptions: _angular_core.Signal<Record<string, unknown>[]>;
     grossTotal: _angular_core.Signal<number>;
     discountTotal: _angular_core.Signal<number>;
     tvaTotal: _angular_core.Signal<number>;
@@ -344,7 +398,6 @@ declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
     locale: _angular_core.Signal<string>;
     hasItems: _angular_core.Signal<boolean>;
     productsSummary: _angular_core.Signal<OrderProductsSummary>;
-    hasEditingRow: _angular_core.Signal<boolean>;
     validationResult: _angular_core.Signal<ValidationResult>;
     combinedErrors: _angular_core.Signal<{
         [x: string]: string[];
@@ -353,19 +406,41 @@ declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
     isValid: _angular_core.Signal<boolean>;
     changeInfo: _angular_core.Signal<OrderChangeInfo>;
     hasChanges: _angular_core.Signal<boolean>;
+    focusMode: _angular_core.ModelSignal<boolean>;
+    railOpen: _angular_core.WritableSignal<boolean>;
+    /**
+     * Inline cell editing — lines render their numeric values as read-only text
+     * until the user clicks a value, which swaps just that cell to an input
+     * (V1 behaviour). One cell is editable at a time; blur / Enter / Escape /
+     * Tab commits and returns the cell to display.
+     */
+    editingCell: _angular_core.WritableSignal<{
+        id: OrderLineItem["id"];
+        field: EditableLineField;
+    }>;
+    /** Number of table columns, used for the empty-state colspan. */
+    colCount: _angular_core.Signal<number>;
+    isEditingCell(item: OrderLineItem, field: EditableLineField): boolean;
+    startEditCell(item: OrderLineItem, field: EditableLineField): void;
+    stopEditCell(): void;
+    onEditCellKeydown(event: KeyboardEvent): void;
+    toggleFocus(): void;
+    toggleRail(open?: boolean): void;
+    hasAudit: _angular_core.Signal<boolean>;
+    /** Récap items grouped into columns (column index from reference data). */
+    recapColumns: _angular_core.Signal<OrderSummaryItem[][]>;
     constructor();
     ngOnInit(): void;
-    ngOnDestroy(): void;
-    addNewProductRow(): void;
-    removeOrderLine(id: number | undefined): void;
-    onProductSelect(item: OrderLineItem): void;
-    startEditField(item: OrderLineItem, fieldName: string): void;
-    stopEditField(item: OrderLineItem): void;
+    removeOrderLine(id: string | number | undefined): void;
     onFieldChange(item: OrderLineItem): void;
-    saveEditingRow(item: OrderLineItem): void;
     calculateSubtotal(item: OrderLineItem): number;
     handleOpenCatalogue(): void;
-    onQuickAddProductSelect(option: Record<string, unknown> | null): void;
+    private readonly typeahead;
+    /**
+     * Fill the quick-add bar from a typeahead pick. Does NOT add the line —
+     * the user reviews price/quantity then clicks "Ajouter" (addQuickProduct).
+     */
+    onTypeaheadSelect(selection: ProductTypeaheadSelection): void;
     addQuickProduct(): void;
     addProductsFromCatalogue(selectedProducts: Array<{
         product: Record<string, unknown>;
@@ -381,7 +456,6 @@ declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
     validate(): ValidationResult;
     private updateOrderLines;
     private getCustomerName;
-    private productKey;
     getProduct(productId: unknown): Record<string, unknown> | undefined;
     getCustomer(customerId: string): Record<string, unknown> | undefined;
     initializeOrderLines(): void;
@@ -393,7 +467,63 @@ declare class EfOrderBuilderComponent implements OnInit, OnDestroy {
     };
     exportOrder(): OrderEntity;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfOrderBuilderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfOrderBuilderComponent, "ef-order-builder", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": true; "isSignal": true; }; "products": { "alias": "products"; "required": true; "isSignal": true; }; "customers": { "alias": "customers"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "countGroupLabels": { "alias": "countGroupLabels"; "required": false; "isSignal": true; }; "productKeyField": { "alias": "productKeyField"; "required": false; "isSignal": true; }; "backendErrors": { "alias": "backendErrors"; "required": false; "isSignal": true; }; }, { "order": "orderChange"; "openCatalogue": "openCatalogue"; "orderChanged": "orderChanged"; "orderValidated": "orderValidated"; "productsAdded": "productsAdded"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfOrderBuilderComponent, "ef-order-builder", never, { "config": { "alias": "config"; "required": false; "isSignal": true; }; "order": { "alias": "order"; "required": true; "isSignal": true; }; "products": { "alias": "products"; "required": true; "isSignal": true; }; "customers": { "alias": "customers"; "required": true; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "countGroupLabels": { "alias": "countGroupLabels"; "required": false; "isSignal": true; }; "productKeyField": { "alias": "productKeyField"; "required": false; "isSignal": true; }; "backendErrors": { "alias": "backendErrors"; "required": false; "isSignal": true; }; "auditEntries": { "alias": "auditEntries"; "required": false; "isSignal": true; }; "focusMode": { "alias": "focusMode"; "required": false; "isSignal": true; }; }, { "order": "orderChange"; "openCatalogue": "openCatalogue"; "orderChanged": "orderChanged"; "orderValidated": "orderValidated"; "productsAdded": "productsAdded"; "focusMode": "focusModeChange"; }, never, never, true, never>;
+}
+
+/**
+ * Keyboard-navigable product search. Filters products by display name,
+ * highlights the match, exposes per-product variant chips, and emits the
+ * chosen product + active variant + unit price. Pure input-driven — no API.
+ *
+ * @example
+ * <ef-product-typeahead
+ *   [products]="products()"
+ *   productKeyField="id"
+ *   placeholderKey="label.search_product"
+ *   (productSelect)="onPicked($event)" />
+ */
+declare class EfProductTypeaheadComponent {
+    products: _angular_core.InputSignal<Record<string, unknown>[]>;
+    productKeyField: _angular_core.InputSignal<string>;
+    placeholderKey: _angular_core.InputSignal<string>;
+    disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    currency: _angular_core.InputSignal<string>;
+    locale: _angular_core.InputSignal<string>;
+    /**
+     * How variants are presented.
+     * - `true` (default): compact — one row per product with inline variant
+     *   chips (e.g. `30ml` / `50ml`); clicking a chip switches the active
+     *   variant + price.
+     * - `false`: V1 expanded — one row per active variant, with the variant
+     *   title composed into the label (`Name - 30ml`) and its own price.
+     *
+     * Display-only: the emitted `ProductTypeaheadSelection` (product + chosen
+     * variant + unit price) is identical either way.
+     */
+    showVariants: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    productSelect: _angular_core.OutputEmitterRef<ProductTypeaheadSelection>;
+    query: _angular_core.WritableSignal<string>;
+    open: _angular_core.WritableSignal<boolean>;
+    highlightedIndex: _angular_core.WritableSignal<number>;
+    /** Map of product key -> chosen variant index (defaults to 0). */
+    activeVariant: _angular_core.WritableSignal<Record<string, number>>;
+    private static norm;
+    rows: _angular_core.Signal<ProductTypeaheadRow[]>;
+    buildSegments(label: string, query: string): HighlightSegment[];
+    onInput(value: string): void;
+    moveHighlight(delta: number): void;
+    onKeydown(event: KeyboardEvent): void;
+    /** Active variant index for a row (defaults to 0). */
+    variantIndexOf(row: ProductTypeaheadRow): number;
+    variantOf(row: ProductTypeaheadRow): Record<string, unknown> | null;
+    priceOf(row: ProductTypeaheadRow): number;
+    setActiveVariant(row: ProductTypeaheadRow, index: number): void;
+    selectRow(row: ProductTypeaheadRow): void;
+    selectHighlighted(): void;
+    /** Clear the field after the consumer has consumed the selection. */
+    reset(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfProductTypeaheadComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfProductTypeaheadComponent, "ef-product-typeahead", never, { "products": { "alias": "products"; "required": true; "isSignal": true; }; "productKeyField": { "alias": "productKeyField"; "required": false; "isSignal": true; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "currency": { "alias": "currency"; "required": false; "isSignal": true; }; "locale": { "alias": "locale"; "required": false; "isSignal": true; }; "showVariants": { "alias": "showVariants"; "required": false; "isSignal": true; }; }, { "productSelect": "productSelect"; }, never, never, true, never>;
 }
 
 interface CategoryItem {
@@ -576,16 +706,106 @@ declare class EfProductCatalogueComponent implements OnChanges {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfProductCatalogueComponent, "ef-product-catalogue", never, { "products": { "alias": "products"; "required": false; "isSignal": true; }; "categoryGroups": { "alias": "categoryGroups"; "required": false; "isSignal": true; }; "initialSelectedItems": { "alias": "initialSelectedItems"; "required": false; "isSignal": true; }; "defaultFilters": { "alias": "defaultFilters"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "currencyCode": { "alias": "currencyCode"; "required": false; "isSignal": true; }; "localeCode": { "alias": "localeCode"; "required": false; "isSignal": true; }; }, { "productsValidated": "productsValidated"; }, ["productThumbnailTpl"], never, true, never>;
 }
 
+/**
+ * Dynamic action descriptor for `ef-dialog`. The dialog renders one
+ * `<button class="btn …">` per entry, in array order (left → right);
+ * the rightmost entry is the focused / "primary" by convention.
+ *
+ * When `command` returns a `Promise`, the button auto-toggles
+ * `.is-loading` for the duration and the dialog closes when it
+ * resolves (unless `dismiss === false`).
+ */
+interface EfDialogAction {
+    /** Direct label text. Use `labelKey` for i18n. */
+    label?: string;
+    /** Translation key for the label — takes precedence over `label`. */
+    labelKey?: string;
+    /** Visual severity (controls the .btn class). Default: `'ghost'`. */
+    severity?: 'primary' | 'ghost' | 'tenant' | 'danger';
+    /** PrimeNG icon class (e.g. `'pi pi-trash'`). Optional. */
+    icon?: string;
+    /** Extra class(es) appended to the footer button — for brand-tinted
+     *  actions (e.g. `'btn-whatsapp'`) or layout helpers (`'btn-dialog-leading'`)
+     *  beyond the four standard severities. */
+    styleClass?: string;
+    /** Click handler. Return a `Promise` to auto-toggle the loading
+     *  spinner overlay on the button until it settles. */
+    command?: () => void | Promise<void>;
+    /** Close the dialog after the command resolves. Default: `true`. */
+    dismiss?: boolean;
+    /** Render the button as disabled. */
+    disabled?: boolean;
+    /** Render the button as loading (in-flight). Mutated automatically
+     *  by the dialog when the command returns a Promise. */
+    loading?: boolean;
+}
+type EfDialogSeverity = 'default' | 'danger' | 'warn' | 'info' | 'success' | 'tenant';
+type EfDialogSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+/**
+ * Comptoir dialog — wraps PrimeNG `p-dialog` and skins it against the
+ * `.es-dialog` patterns lifted from the static prototype
+ * (`docs/ux-ui/erp/screens/components.html` § Section 05).
+ *
+ * **Card design with two rules** — the header has a `border-bottom`,
+ * the footer has a `border-top` (`1px var(--rule)`). Header layout:
+ * optional severity-tinted icon · title + subtitle · close ✕.
+ *
+ * **Dynamic actions** — pass an `EfDialogAction[]` via `[actions]`
+ * and the footer renders one button per entry, in order. The rightmost
+ * is conventionally the primary action; consumers control severity
+ * per-entry. Async commands flip the button to `.is-loading` until
+ * resolved, then auto-dismiss (unless opted out).
+ *
+ * ```html
+ * <ef-dialog
+ *   [(visible)]="show"
+ *   headerKey="orders.delete_confirm"
+ *   subtitleKey="orders.delete_irreversible"
+ *   severity="danger"
+ *   size="md"
+ *   [actions]="[
+ *     { labelKey: 'common_cancel', severity: 'ghost' },
+ *     { labelKey: 'common_delete', severity: 'danger',
+ *       command: () => this.api.deleteOrder(this.id) }
+ *   ]"
+ * >
+ *   <div class="es-dialog__highlight">
+ *     <span class="av tenant">L</span>
+ *     <div class="body">
+ *       <div class="nm">SO-2026-198 · Leila Bennani</div>
+ *       <div class="meta">07 mai · 1 132,00 MAD</div>
+ *     </div>
+ *   </div>
+ *   <p>{{ 'orders.delete_warning' | translate }}</p>
+ * </ef-dialog>
+ * ```
+ */
 declare class EfDialogComponent {
-    /** Direct header text (not translated) */
+    private readonly translate;
+    /** Direct header text (not translated). */
     header?: string;
-    /** Translation key — takes priority over header */
+    /** Translation key — takes precedence over `header`. */
     headerKey?: string;
+    /** Direct subtitle text. */
+    subtitle?: string;
+    /** Translation key — takes precedence over `subtitle`. */
+    subtitleKey?: string;
     visible: boolean;
     modal: boolean;
     closable: boolean;
     draggable: boolean;
     resizable: boolean;
+    /** Close the dialog when the user clicks the backdrop mask. */
+    dismissableMask: boolean;
+    /** Close the dialog on Escape (PrimeNG default = true). */
+    closeOnEscape: boolean;
+    /** Severity drives the header icon tint (panel itself stays neutral).
+     *  Pair with `[icon]` to override the default icon-class per severity. */
+    severity: EfDialogSeverity;
+    /** Header icon class (PrimeNG `pi pi-*`). Overrides the severity default. */
+    icon?: string;
+    /** Width preset: sm 380 / md 480 (default) / lg 640 / xl 880 / full. */
+    size: EfDialogSize;
     style?: {
         [key: string]: string;
     };
@@ -593,9 +813,22 @@ declare class EfDialogComponent {
     position: 'center' | 'top' | 'bottom' | 'left' | 'right' | 'topleft' | 'topright' | 'bottomleft' | 'bottomright';
     appendTo?: string;
     /**
-     * Render a standard cancel + save action footer. Caller wires (saveAction)
-     * and (cancelAction). When false (default), the footer falls back to the
-     * `[dialogFooter]` projection slot for fully custom footers.
+     * Render variant.
+     * - `'comptoir'` (default) — applies the `.es-dialog` Comptoir skin,
+     *   custom header (icon + title + subtitle + close), and dynamic-action
+     *   footer.
+     * - `'primeng'` — bare `p-dialog` with its native header (just the
+     *   `[header]` text + PrimeNG's default close). Use for legacy screens
+     *   or to dodge the Comptoir skin one-off.
+     */
+    variant: 'primeng' | 'comptoir';
+    /** Footer actions, rendered left → right. When set (non-empty),
+     *  takes precedence over `defaultActions`. */
+    actions?: EfDialogAction[];
+    /**
+     * Render a standard cancel + save action footer. Backward-compat
+     * shortcut — for richer footers prefer `[actions]`. When false (and
+     * no `[actions]` provided), the footer is omitted entirely.
      */
     defaultActions: boolean;
     saveLabelKey: string;
@@ -603,31 +836,55 @@ declare class EfDialogComponent {
     saveLabel?: string;
     cancelLabel?: string;
     saveIcon: string;
+    cancelIcon?: string;
     saveDisabled: boolean;
-    saveStyleClass: string;
-    cancelStyleClass: string;
+    saveStyleClass?: string;
+    cancelStyleClass?: string;
+    saveSeverity: 'primary' | 'tenant' | 'ghost' | 'danger';
+    cancelSeverity: 'primary' | 'tenant' | 'ghost' | 'danger';
     visibleChange: EventEmitter<boolean>;
     showEvent: EventEmitter<void>;
     hideEvent: EventEmitter<void>;
     saveAction: EventEmitter<void>;
     cancelAction: EventEmitter<void>;
+    /** Emits for every action in the dynamic `[actions]` footer. The
+     *  payload includes the action object and its index. */
+    actionClick: EventEmitter<{
+        action: EfDialogAction;
+        index: number;
+    }>;
+    /** ViewChild ref to the default-action footer template — used in the
+     *  `'primeng'` variant via [footerTemplate] input. */
     defaultFooterTpl?: TemplateRef<void>;
+    /** Severity → default header icon. Override per-instance with `[icon]`. */
+    private static readonly SEV_ICONS;
+    get effectiveStyleClass(): string;
+    get effectiveTitle(): string;
+    get effectiveSubtitle(): string;
+    get effectiveIcon(): string | null;
+    /** True when the dynamic `[actions]` path should render the footer. */
+    get useDynamicActions(): boolean;
+    /** Whether any kind of footer should render at all. */
+    get hasFooter(): boolean;
+    actionLabel(a: EfDialogAction): string;
+    actionClass(a: EfDialogAction): string;
+    handleActionClick(a: EfDialogAction, index: number): void;
     handleVisibleChange(value: boolean): void;
     handleShow(): void;
     handleHide(): void;
-    /**
-     * Default cancel handler — emits and also closes the dialog. Callers can
-     * override behavior via (cancelAction) (close still happens).
-     */
+    /** Default cancel — emits and closes. */
     onDefaultCancel(): void;
+    /** Default save — emits only (consumer closes after success). */
     onDefaultSave(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDialogComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDialogComponent, "ef-dialog", never, { "header": { "alias": "header"; "required": false; }; "headerKey": { "alias": "headerKey"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "modal": { "alias": "modal"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "defaultActions": { "alias": "defaultActions"; "required": false; }; "saveLabelKey": { "alias": "saveLabelKey"; "required": false; }; "cancelLabelKey": { "alias": "cancelLabelKey"; "required": false; }; "saveLabel": { "alias": "saveLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "saveIcon": { "alias": "saveIcon"; "required": false; }; "saveDisabled": { "alias": "saveDisabled"; "required": false; }; "saveStyleClass": { "alias": "saveStyleClass"; "required": false; }; "cancelStyleClass": { "alias": "cancelStyleClass"; "required": false; }; }, { "visibleChange": "visibleChange"; "showEvent": "showEvent"; "hideEvent": "hideEvent"; "saveAction": "saveAction"; "cancelAction": "cancelAction"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDialogComponent, "ef-dialog", never, { "header": { "alias": "header"; "required": false; }; "headerKey": { "alias": "headerKey"; "required": false; }; "subtitle": { "alias": "subtitle"; "required": false; }; "subtitleKey": { "alias": "subtitleKey"; "required": false; }; "visible": { "alias": "visible"; "required": false; }; "modal": { "alias": "modal"; "required": false; }; "closable": { "alias": "closable"; "required": false; }; "draggable": { "alias": "draggable"; "required": false; }; "resizable": { "alias": "resizable"; "required": false; }; "dismissableMask": { "alias": "dismissableMask"; "required": false; }; "closeOnEscape": { "alias": "closeOnEscape"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "size": { "alias": "size"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "position": { "alias": "position"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "actions": { "alias": "actions"; "required": false; }; "defaultActions": { "alias": "defaultActions"; "required": false; }; "saveLabelKey": { "alias": "saveLabelKey"; "required": false; }; "cancelLabelKey": { "alias": "cancelLabelKey"; "required": false; }; "saveLabel": { "alias": "saveLabel"; "required": false; }; "cancelLabel": { "alias": "cancelLabel"; "required": false; }; "saveIcon": { "alias": "saveIcon"; "required": false; }; "cancelIcon": { "alias": "cancelIcon"; "required": false; }; "saveDisabled": { "alias": "saveDisabled"; "required": false; }; "saveStyleClass": { "alias": "saveStyleClass"; "required": false; }; "cancelStyleClass": { "alias": "cancelStyleClass"; "required": false; }; "saveSeverity": { "alias": "saveSeverity"; "required": false; }; "cancelSeverity": { "alias": "cancelSeverity"; "required": false; }; }, { "visibleChange": "visibleChange"; "showEvent": "showEvent"; "hideEvent": "hideEvent"; "saveAction": "saveAction"; "cancelAction": "cancelAction"; "actionClick": "actionClick"; }, never, ["*"], true, never>;
     static ngAcceptInputType_visible: unknown;
     static ngAcceptInputType_modal: unknown;
     static ngAcceptInputType_closable: unknown;
     static ngAcceptInputType_draggable: unknown;
     static ngAcceptInputType_resizable: unknown;
+    static ngAcceptInputType_dismissableMask: unknown;
+    static ngAcceptInputType_closeOnEscape: unknown;
     static ngAcceptInputType_defaultActions: unknown;
     static ngAcceptInputType_saveDisabled: unknown;
 }
@@ -646,13 +903,44 @@ declare class EfFieldsetComponent {
     static ngAcceptInputType_collapsed: unknown;
 }
 
+/** PrimeNG severity vocabulary (v1's default). */
+type EfButtonPrimeNGSeverity = 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'help' | 'contrast';
+/** Comptoir severity vocabulary — maps to `.btn-{name}` rules in
+ *  `@elasticias/ui/styles/patterns`. `'danger'` renders as
+ *  `.btn-ghost` with the cancelled-fg tint applied inline. */
+type EfButtonComptoirSeverity = 'primary' | 'tenant' | 'ghost' | 'danger';
+type EfButtonSeverity = EfButtonPrimeNGSeverity | EfButtonComptoirSeverity;
+/**
+ * Wrapper button for both v1 (PrimeNG-themed) and V2 (Comptoir-themed)
+ * surfaces. `[variant]` picks the rendering path:
+ *
+ * - `'primeng'` (default) — wraps `<p-button>` with PrimeNG severities
+ *   (`primary / success / danger / …`). Keeps v1 imports working
+ *   unchanged.
+ *
+ * - `'comptoir'` — renders a native `<button class="btn btn-{severity}
+ *   btn-sm">` against the Comptoir `.btn` pattern. Severities are
+ *   `'primary' | 'tenant' | 'ghost' | 'danger'`; `'danger'` falls back
+ *   to `.btn-ghost` with the `--st-cancelled-fg` tint applied inline,
+ *   matching the prototype's Delete-button styling.
+ *
+ * Both variants honour `labelKey` (i18n preferred), `icon`,
+ * `disabled`, `loading`, `pTooltip` (via `tooltipKey`), and emit the
+ * same `clickEvent`.
+ */
 declare class EfButtonComponent {
-    /** Direct label text (not translated) */
+    /** Direct label text (not translated). */
     label?: string;
-    /** Translation key — takes priority over label */
+    /** Translation key — takes priority over `label`. */
     labelKey?: string;
     icon?: string;
-    severity: 'primary' | 'secondary' | 'success' | 'info' | 'warn' | 'danger' | 'help' | 'contrast';
+    /**
+     * Which rendering surface to use. Default `'primeng'` keeps v1
+     * consumers unchanged. V2 detail/list screens pass `'comptoir'`
+     * to opt into the Comptoir `.btn` styling.
+     */
+    variant: 'primeng' | 'comptoir';
+    severity: EfButtonSeverity;
     size: 'small' | 'large';
     disabled: boolean;
     rounded: boolean;
@@ -664,15 +952,33 @@ declare class EfButtonComponent {
     type: 'button' | 'submit';
     badge?: string;
     badgeSeverity?: 'success' | 'info' | 'warn' | 'danger' | 'help' | 'primary' | 'secondary' | 'contrast';
-    /** Direct tooltip text (not translated) */
+    /** Direct tooltip text (not translated). Falls back to `label`
+     *  when neither `tooltip` nor `tooltipKey` is set. */
     tooltip?: string;
-    /** Translation key for tooltip — takes priority over tooltip */
+    /** Translation key for tooltip — takes priority over `tooltip`.
+     *  Falls back to `labelKey` when not provided, so buttons with
+     *  visible labels still expose them to screen readers / mobile
+     *  long-press once the label is hidden by responsive CSS. */
     tooltipKey?: string;
     tooltipPosition: 'top' | 'bottom' | 'left' | 'right';
+    /** Resolved tooltip translation key — `tooltipKey` if provided,
+     *  otherwise `labelKey`. Lets responsive icon-only buttons reuse
+     *  their label as the tooltip without restating it at every call
+     *  site. */
+    get effectiveTooltipKey(): string | undefined;
+    /** Resolved plain tooltip text — `tooltip` if provided, otherwise
+     *  `label`. Used only when neither `tooltipKey` nor `labelKey` is
+     *  set. */
+    get effectiveTooltip(): string | undefined;
     clickEvent: EventEmitter<Event>;
+    /** Composed class string for the Comptoir variant —
+     *  `btn btn-{severity} btn-sm` plus any caller-supplied `styleClass`. */
+    get comptoirClass(): string;
+    /** Inline danger tint for the `severity="danger"` Comptoir variant. */
+    get comptoirInlineColor(): string | null;
     handleClick(event: Event): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfButtonComponent, "ef-button", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "raised": { "alias": "raised"; "required": false; }; "text": { "alias": "text"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "type": { "alias": "type"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "badgeSeverity": { "alias": "badgeSeverity"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipKey": { "alias": "tooltipKey"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "clickEvent": "clickEvent"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfButtonComponent, "ef-button", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "size": { "alias": "size"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "rounded": { "alias": "rounded"; "required": false; }; "outlined": { "alias": "outlined"; "required": false; }; "raised": { "alias": "raised"; "required": false; }; "text": { "alias": "text"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "type": { "alias": "type"; "required": false; }; "badge": { "alias": "badge"; "required": false; }; "badgeSeverity": { "alias": "badgeSeverity"; "required": false; }; "tooltip": { "alias": "tooltip"; "required": false; }; "tooltipKey": { "alias": "tooltipKey"; "required": false; }; "tooltipPosition": { "alias": "tooltipPosition"; "required": false; }; }, { "clickEvent": "clickEvent"; }, never, never, true, never>;
     static ngAcceptInputType_disabled: unknown;
     static ngAcceptInputType_rounded: unknown;
     static ngAcceptInputType_outlined: unknown;
@@ -681,17 +987,46 @@ declare class EfButtonComponent {
     static ngAcceptInputType_loading: unknown;
 }
 
+declare class EfButtonGroupComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfButtonGroupComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfButtonGroupComponent, "ef-button-group", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Comptoir form label — renders a `<label>` with the design-system
+ * typography (uppercase Manrope 11px / 700 / `--text-mute`,
+ * 0.06em letter-spacing) defined under `.ef-label` in
+ * `@elasticias/ui/styles/patterns`.
+ *
+ * - `[labelKey]` — translation key (preferred). Falls back to
+ *   `[label]` when missing. The `feedback_i18n_keys` memory says
+ *   always use `*Key` on shared `ef-*` components.
+ * - `[for]` — DOM id of the input the label labels. Mapped through
+ *   `[attr.for]` so an empty value renders no attribute (the input
+ *   doesn't end up with a broken `for=""`).
+ * - `[required]` — toggles a red asterisk via
+ *   `.ef-label.is-required::after`.
+ * - `[styleClass]` — caller-supplied extra class. Defaults to
+ *   `'form-label'` for v1 back-compat. The `.ef-label` Comptoir
+ *   class is always applied on top.
+ */
 declare class EfLabelComponent {
-    /** Direct label text (not translated) */
+    /** Direct label text — use `labelKey` for i18n. */
     label?: string;
-    /** Translation key — takes priority over label */
+    /** Translation key — preferred. */
     labelKey?: string;
-    /** The for attribute linking to an input id */
+    /** DOM id of the labelled input. Empty / unset → no `for` attr. */
     for?: string;
-    /** CSS classes for the label element */
+    /** Caller-supplied extra class. The Comptoir `.ef-label` class is
+     *  always applied; this stacks on top. Defaults to `'form-label'`
+     *  for v1 back-compat. */
     styleClass: string;
-    /** Show required indicator */
+    /** Show the required-asterisk modifier. */
     required: boolean;
+    /** Composes `'ef-label'` + `styleClass` + the `'is-required'`
+     *  modifier into a single class string. Angular's `[class]`
+     *  binding replaces (doesn't merge) so we do the joining here. */
+    get resolvedClass(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfLabelComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfLabelComponent, "ef-label", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "for": { "alias": "for"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "required": { "alias": "required"; "required": false; }; }, {}, never, never, true, never>;
     static ngAcceptInputType_required: unknown;
@@ -872,7 +1207,7 @@ declare class EfToolbarComponent {
     get isSearchState(): boolean;
     get isDetailState(): boolean;
     get hasReadPermission(): boolean;
-    get hasWritePermission(): boolean;
+    get hasCreatePermission(): boolean;
     get hasEditPermission(): boolean;
     get hasDeletePermission(): boolean;
     get hasDuplicatePermission(): boolean;
@@ -892,6 +1227,459 @@ declare class EfToolbarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfToolbarComponent, "ef-toolbar", never, { "context": { "alias": "context"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "backButton": { "alias": "backButton"; "required": false; }; "deleteButton": { "alias": "deleteButton"; "required": false; }; "duplicateButton": { "alias": "duplicateButton"; "required": false; }; "saveButton": { "alias": "saveButton"; "required": false; }; "exportButton": { "alias": "exportButton"; "required": false; }; "printButton": { "alias": "printButton"; "required": false; }; "addButton": { "alias": "addButton"; "required": false; }; "clearButton": { "alias": "clearButton"; "required": false; }; "searchButton": { "alias": "searchButton"; "required": false; }; "showFreeSearchInput": { "alias": "showFreeSearchInput"; "required": false; }; }, { "back": "back"; "save": "save"; "delete": "delete"; "duplicate": "duplicate"; "print": "print"; "triggerCustoAction": "triggerCustoAction"; "add": "add"; "search": "search"; "clear": "clear"; }, never, ["[toolbarStart]", "[toolbarEnd]"], true, never>;
 }
 
+/**
+ * Top-level Comptoir shell.
+ *
+ * Composes the chrome an Elasticias app puts around its `<router-outlet />`.
+ * Apps mount it at their root component:
+ *
+ * ```html
+ * <ef-app-shell>
+ *   <router-outlet />
+ * </ef-app-shell>
+ * ```
+ *
+ * The shell reads:
+ * - `EfViewportService` to switch between desktop and mobile branches
+ * - `EfPermissionService` (via the rail / mobile tabs) for visible modules
+ * - `EfActiveModuleService` for the active module accent
+ *
+ * **Desktop / tablet:** rail (64px) + side (240px) + (top + main).
+ * **Mobile:** delegates to `<ef-app-shell-mobile>` — top bar + scrollable
+ * body + 5-tab bottom bar + FAB slot.
+ *
+ * Top-bar slots are forwarded to `<ef-app-top>` on both layouts: project
+ * with `breadcrumb`, `search`, `actions` attributes. The `side-footer`
+ * slot is forwarded to the bottom of `<ef-module-side>` (desktop only —
+ * mobile drops it; surface identity via `[actions]` instead). The `logo`
+ * slot is forwarded to the top of `<ef-module-rail>` (desktop/tablet
+ * only — mobile uses the bottom tab bar instead).
+ */
+declare class EfAppShellComponent {
+    private readonly vp;
+    /** Show the 3px module-color stripe at the top of the content area. */
+    stripe: boolean;
+    readonly viewport: _angular_core.Signal<_elasticias_core.EfViewport>;
+    readonly isMobile: _angular_core.Signal<boolean>;
+    readonly showSide: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfAppShellComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppShellComponent, "ef-app-shell", never, { "stripe": { "alias": "stripe"; "required": false; }; }, {}, never, ["[breadcrumb]", "[search]", "[actions]", "[fab]", "*", "[logo]", "[side-header-meta]", "[side-footer]", "[breadcrumb]", "[actions]", "*"], true, never>;
+}
+
+/**
+ * Mobile-only shell. Picks up when `ef-app-shell` detects a mobile
+ * viewport. Composition:
+ *
+ * - Top bar (`ef-app-top`) with a menu trigger that opens the module
+ *   switcher in a bottom sheet.
+ * - Scrollable content (`ef-app-main`) — projects `<router-outlet />`.
+ * - 5-tab bottom bar — first 5 visible modules from
+ *   `EfPermissionService.visibleModules()`. Apps that want a usage-
+ *   ranked tab order can replace the registry via `EF_MODULES_TOKEN`.
+ * - FAB slot (`[fab]`) — apps project a `<ef-fab />` here.
+ *
+ * The module switcher (bottom sheet) lists all visible modules so
+ * users can reach modules outside the top-5 tabs.
+ */
+declare class EfAppShellMobileComponent {
+    private readonly perms;
+    private readonly active;
+    private readonly router;
+    readonly activeId: _angular_core.Signal<_elasticias_core.EfModuleId>;
+    readonly switcherOpen: _angular_core.WritableSignal<boolean>;
+    readonly tabs: _angular_core.Signal<EfModule[]>;
+    readonly allVisible: _angular_core.Signal<readonly EfModule[]>;
+    openSwitcher(): void;
+    onSwitcherChange(open: boolean): void;
+    onSelect(module: EfModule): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfAppShellMobileComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppShellMobileComponent, "ef-app-shell-mobile", never, {}, {}, never, ["[breadcrumb]", "[search]", "[actions]", "*", "[fab]"], true, never>;
+}
+
+/**
+ * Content scroll container. Lives at the right of the rail+side
+ * on desktop, full-width on mobile. Sets `data-module` so the
+ * Comptoir SCSS layer's `[data-module="..."]` rules apply the
+ * active module's `--module` accent inside this region.
+ *
+ * Usage:
+ * ```html
+ * <ef-app-main [stripe]="true">
+ *   <router-outlet />
+ * </ef-app-main>
+ * ```
+ *
+ * Reads the active module from `EfActiveModuleService` — no per-app
+ * wiring required.
+ */
+declare class EfAppMainComponent {
+    private readonly activeModule;
+    /** Render the 3px module-color stripe at the top of the content area. */
+    stripe: boolean;
+    /** `data-module` value bound to the host. Null when no module is active. */
+    readonly moduleId: _angular_core.Signal<_elasticias_core.EfModuleId>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfAppMainComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppMainComponent, "ef-app-main", never, { "stripe": { "alias": "stripe"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_stripe: unknown;
+}
+
+/**
+ * Top chrome bar for the desktop and mobile shells.
+ *
+ * Layout is three slots: `breadcrumb` (left), `search` (centre), and
+ * `actions` (right). Apps project into `search` and `actions` for global
+ * features (⌘K, notifications bell, profile chip).
+ *
+ * The breadcrumb slot fills automatically from `EfActiveModuleService`:
+ * a leading dot in the active module's accent, the module label, then
+ * the active nav-item label as the leaf. Apps that need a custom
+ * breadcrumb can still project their own content into `[breadcrumb]`.
+ */
+declare class EfAppTopComponent {
+    private readonly active;
+    readonly module: _angular_core.Signal<_elasticias_core.EfModule>;
+    readonly navItem: _angular_core.Signal<_elasticias_core.EfNavItem>;
+    readonly hasBreadcrumb: _angular_core.Signal<boolean>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfAppTopComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfAppTopComponent, "ef-app-top", never, {}, {}, never, ["[breadcrumb]", "[actions]"], true, never>;
+}
+
+/**
+ * Rail row — either a module button (with the metadata needed by the
+ * template) or a divider rendered between two modules whose `group`
+ * differs.
+ */
+type RailRow = {
+    kind: 'module';
+    module: EfModule;
+} | {
+    kind: 'divider';
+};
+/**
+ * 64px vertical module switcher rendered at the left of `ef-app-shell`
+ * on desktop and tablet. Black (`--ink-active`) background with
+ * white-alpha icons, 44×44px buttons, and a 3px module-color accent
+ * strip on the inside edge of the active button.
+ *
+ * Reads from `EfPermissionService.visibleModules()` and
+ * `EfActiveModuleService.activeModule()`. No per-app wiring needed.
+ *
+ * Apps can supply per-module badge content (e.g., notification counts)
+ * via the `[badges]` input keyed by module id, and project a logo into
+ * the `[logo]` content slot — typical content is the tenant initial,
+ * an avatar, or a small SVG. When a logo is projected, a hairline
+ * divider is rendered between the logo and the first module group.
+ *
+ * Dividers also appear automatically between consecutive modules whose
+ * `EfModule.group` differs (e.g. Sales/operations followed by
+ * Admin/admin).
+ */
+declare class EfModuleRailComponent {
+    private readonly perms;
+    private readonly active;
+    private readonly router;
+    /** Optional notification badges per module id. */
+    badges: Partial<Record<EfModuleId, string | number>>;
+    readonly visibleModules: _angular_core.Signal<readonly EfModule[]>;
+    readonly activeId: _angular_core.Signal<EfModuleId>;
+    /** Visible modules interleaved with dividers at group boundaries. */
+    readonly rows: _angular_core.Signal<RailRow[]>;
+    readonly hasBadges: _angular_core.Signal<boolean>;
+    onSelect(module: EfModule): void;
+    badgeFor(id: EfModuleId): string | number | undefined;
+    trackRow(index: number, row: RailRow): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfModuleRailComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfModuleRailComponent, "ef-module-rail", never, { "badges": { "alias": "badges"; "required": false; }; }, {}, never, ["[logo]"], true, never>;
+}
+
+/**
+ * 240px module-specific side panel. Renders the active module's
+ * `navSections`, filtered by `EfPermissionService.can()` against
+ * each item's `requiredAction` (defaults to `'read'`).
+ *
+ * When no module is active, or the active module has no sections,
+ * the panel collapses (renders nothing) — apps using `ef-app-shell`
+ * already handle the layout reflow.
+ */
+declare class EfModuleSideComponent {
+    private readonly active;
+    private readonly perms;
+    readonly module: _angular_core.Signal<_elasticias_core.EfModule>;
+    readonly moduleId: _angular_core.Signal<_elasticias_core.EfModuleId>;
+    readonly visibleSections: _angular_core.Signal<EfNavSection[]>;
+    trackSection(_: number, s: EfNavSection): string;
+    trackItem(_: number, i: EfNavItem): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfModuleSideComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfModuleSideComponent, "ef-module-side", never, {}, {}, never, ["[side-header-meta]", "*"], true, never>;
+}
+
+/**
+ * Slide-up overlay with a grabber. Replaces dropdowns and dialogs on
+ * mobile per the Comptoir plan. Controlled component — apps drive
+ * `[open]` and listen to `(openChange)`.
+ *
+ * Tapping the backdrop or pressing Escape emits `openChange.emit(false)`.
+ *
+ * Usage:
+ * ```html
+ * <ef-bottom-sheet [open]="filtersOpen()" (openChange)="filtersOpen.set($event)">
+ *   <ng-template>...filters body...</ng-template>
+ * </ef-bottom-sheet>
+ * ```
+ */
+declare class EfBottomSheetComponent {
+    open: boolean;
+    dismissOnBackdrop: boolean;
+    openChange: EventEmitter<boolean>;
+    onBackdropClick(): void;
+    onEscape(): void;
+    close(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfBottomSheetComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfBottomSheetComponent, "ef-bottom-sheet", never, { "open": { "alias": "open"; "required": false; }; "dismissOnBackdrop": { "alias": "dismissOnBackdrop"; "required": false; }; }, { "openChange": "openChange"; }, never, ["*"], true, never>;
+    static ngAcceptInputType_open: unknown;
+    static ngAcceptInputType_dismissOnBackdrop: unknown;
+}
+
+type EfFabPosition = 'bottom-right' | 'bottom-center' | 'bottom-left';
+/**
+ * Floating action button — mobile primary action surface.
+ *
+ * Lives at the bottom of the mobile viewport, carrying the screen's
+ * principal action (e.g. Nouvelle commande). Reads `--tenant-500`
+ * for its background; foreground is `--tenant-contrast` (defaults
+ * to white). When `label` / `labelKey` is provided, renders as an
+ * extended FAB with the label inline.
+ *
+ * Usage:
+ * ```html
+ * <ef-fab icon="pi pi-plus" labelKey="orders.new" (press)="onNew()" />
+ * ```
+ */
+declare class EfFabComponent {
+    icon: string;
+    label?: string;
+    /** Translation key — takes priority over `label`. */
+    labelKey?: string;
+    position: EfFabPosition;
+    disabled: boolean;
+    press: EventEmitter<MouseEvent>;
+    get isExtended(): boolean;
+    onClick(e: MouseEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfFabComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfFabComponent, "ef-fab", never, { "icon": { "alias": "icon"; "required": false; }; "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "position": { "alias": "position"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "press": "press"; }, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+
+interface EfPillItem<T = string> {
+    value: T;
+    /** Direct label (no translation). */
+    label?: string;
+    /** Translation key — takes priority over label. */
+    labelKey?: string;
+    /** Optional count rendered after a thin separator. */
+    count?: number;
+}
+/**
+ * Segmented pill filter. Used for tab-like selectors over a small
+ * set of options — "Toutes · 87 / À approuver · 14 / En retard · 3".
+ *
+ * ```html
+ * <ef-pill-group
+ *   [items]="filters"
+ *   [(value)]="activeFilter"
+ *   (valueChange)="onFilterChange($event)"
+ * />
+ * ```
+ *
+ * The active pill picks up a contrast fill (`--ink-active`); inactive
+ * pills sit on transparent ground with muted text. Heights map to
+ * `--hit` (32px) so it stacks naturally next to compact action buttons.
+ */
+declare class EfPillGroupComponent<T = string> {
+    items: ReadonlyArray<EfPillItem<T>>;
+    value: T | null;
+    ariaLabel: string;
+    /** Hide counts even when items provide them. */
+    hideCounts: boolean;
+    readonly valueChange: EventEmitter<T>;
+    select(item: EfPillItem<T>): void;
+    trackValue(_: number, item: EfPillItem<T>): T;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPillGroupComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPillGroupComponent<any>, "ef-pill-group", never, { "items": { "alias": "items"; "required": true; }; "value": { "alias": "value"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "hideCounts": { "alias": "hideCounts"; "required": false; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
+/** Visual treatment of the tabset. `'pill'` is the default. */
+type EfTabsVariant = 'pill' | 'underline';
+/** Known module slugs whose accent (`var(--m-{slug})`) drives the
+ *  active indicator and count tint when `variant === 'underline'`. */
+type EfTabsModule = 'sales' | 'purchase' | 'stock' | 'pos' | 'marketing' | 'store' | 'finance' | 'admin';
+interface EfTabItem<T = string> {
+    value: T;
+    /** Direct label (not translated). */
+    label?: string;
+    /** Translation key — takes priority over `label`. */
+    labelKey?: string;
+    /** PrimeIcons class string, e.g. `'pi pi-th-large'`. Rendered
+     *  before the label, muted when idle. */
+    icon?: string;
+    /** Optional count rendered after the label in a mono badge. */
+    count?: number;
+    /** Show a dirty/unread dot after the label/count. */
+    dirty?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Comptoir tabset. Pilots the visible *view* on a detail screen
+ * (Identité / Médias / Variantes / SEO / Activité…). Defaults to the
+ * pill variant — chunky toggle suited for sub-modes (Editor / Preview,
+ * Day / Week) — with `'underline'` available for fiche-wide navigation
+ * where the active tab adopts the module accent.
+ *
+ * Two consumer surfaces, mirroring `<ef-data-card>`:
+ *
+ * 1. **Tablist only** — no panels projected. The component renders
+ *    the tab strip and emits `valueChange` ; the consumer owns panel
+ *    rendering via `@switch` / `@if`.
+ *
+ * ```html
+ * <ef-tabs [items]="sections" [(value)]="active" />
+ * @switch (active) {
+ *   @case ('identity') { <product-identity /> }
+ *   @case ('media')    { <product-media /> }
+ * }
+ * ```
+ *
+ * 2. **Tabs + projected panels** — `<ng-template efTabPanel="…">`
+ *    blocks declare the body of each tab. The component shows the one
+ *    whose `efTabPanel` matches the active value.
+ *
+ * ```html
+ * <ef-tabs [items]="sections" [(value)]="active" variant="underline" module="store">
+ *   <ng-template efTabPanel="identity"><product-identity /></ng-template>
+ *   <ng-template efTabPanel="media"><product-media /></ng-template>
+ * </ef-tabs>
+ * ```
+ *
+ * For filter toggles over result sets (Toutes / Pending / Shipped),
+ * prefer `<ef-pill-group>` — it shares the pill look but stays scoped
+ * to filter selection rather than view switching.
+ */
+declare class EfTabsComponent<T = string> implements AfterContentInit {
+    items: ReadonlyArray<EfTabItem<T>>;
+    /** Currently-selected tab value. When no `*efTabPanel` templates
+     *  are projected, panel rendering is the consumer's job (typically
+     *  via `@switch (active)` in the template). */
+    value: T | null;
+    /** Visual variant. `'pill'` (default) is the segmented toggle ;
+     *  `'underline'` draws a 2px indicator under the active tab. */
+    variant: EfTabsVariant;
+    /** Forces the module accent on the active indicator + count tint
+     *  (only meaningful for `variant='underline'`). When omitted, the
+     *  underline inherits `--module` from the closest `[data-module]`
+     *  ancestor (and falls back to `--ink-active`). */
+    module?: EfTabsModule;
+    /** Show edge fades when the tablist overflows horizontally. The
+     *  list itself always scrolls — tabs are never collapsed into a
+     *  menu. */
+    overflow: boolean;
+    /** Hide count badges even when items provide them. */
+    hideCounts: boolean;
+    ariaLabel: string;
+    /** Translation key used as the `aria-label` of the dirty dot.
+     *  Defaults to `'common.dirty'` — apps add the matching entry to
+     *  `fr.json` / `ar.json`. */
+    dirtyLabelKey: string;
+    readonly valueChange: EventEmitter<T>;
+    private tabEls?;
+    private readonly panels;
+    private readonly panelMap;
+    /** Active panel template for the current `value`, or `null` when
+     *  no template matches (incl. tablist-only mode). Read by the
+     *  template via `ngTemplateOutlet`. */
+    activePanel(): TemplateRef<unknown> | null;
+    /** `true` when at least one `*efTabPanel` template has been
+     *  projected — toggles the panel rendering slot in the template. */
+    hasPanels(): boolean;
+    ngAfterContentInit(): void;
+    select(item: EfTabItem<T>): void;
+    onKeydown(event: KeyboardEvent, index: number): void;
+    trackValue(_: number, item: EfTabItem<T>): T;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTabsComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfTabsComponent<any>, "ef-tabs", never, { "items": { "alias": "items"; "required": true; }; "value": { "alias": "value"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "module": { "alias": "module"; "required": false; }; "overflow": { "alias": "overflow"; "required": false; }; "hideCounts": { "alias": "hideCounts"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "dirtyLabelKey": { "alias": "dirtyLabelKey"; "required": false; }; }, { "valueChange": "valueChange"; }, ["panels"], never, true, never>;
+    static ngAcceptInputType_overflow: unknown;
+    static ngAcceptInputType_hideCounts: unknown;
+}
+
+/**
+ * Marks an `<ng-template>` as the panel renderer for a tab value on
+ * `<ef-tabs>`. When at least one panel template is projected,
+ * `ef-tabs` renders the matching one below the tablist. When none is
+ * projected, the component stays a tablist only — the consumer owns
+ * panel rendering via `@switch` / `@if` on the active value.
+ *
+ * ```html
+ * <ef-tabs [items]="sections" [(value)]="active">
+ *   <ng-template efTabPanel="identity">
+ *     <product-identity />
+ *   </ng-template>
+ *   <ng-template efTabPanel="media">
+ *     <product-media />
+ *   </ng-template>
+ * </ef-tabs>
+ * ```
+ *
+ * The input value must match one of the `EfTabItem.value` entries the
+ * tabset is driven by.
+ */
+declare class EfTabPanelDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    value: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTabPanelDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfTabPanelDirective, "[efTabPanel]", never, { "value": { "alias": "efTabPanel"; "required": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Compact identity chip — avatar + name + role — designed to sit at the
+ * bottom of `ef-module-side` (project via the `side-footer` slot of
+ * `ef-app-shell`). On mobile, apps usually surface the same identity in
+ * the top bar `[actions]` slot instead.
+ *
+ * ```html
+ * <ef-app-shell>
+ *   <ef-profile-chip
+ *     side-footer
+ *     [name]="user.name"
+ *     [role]="user.roleLabel"
+ *     (clickEvent)="openUserMenu()"
+ *   />
+ *   <router-outlet />
+ * </ef-app-shell>
+ * ```
+ *
+ * The component is intentionally dumb: apps wire their own identity
+ * source. Initials are derived from `name` unless explicitly overridden.
+ */
+declare class EfProfileChipComponent {
+    /** Direct name text (not translated). */
+    name?: string;
+    /** Direct role text (not translated). */
+    role?: string;
+    /** Translation key for the role line — takes priority over `role`. */
+    roleKey?: string;
+    /** Override the avatar glyph. Defaults to the first letter of `name`. */
+    initial?: string;
+    /** Tenant tone uses `--tenant-500`; neutral uses `--ink-active`. */
+    tone: 'tenant' | 'neutral';
+    /** Render as a non-interactive container (no hover/focus, no click). */
+    readonly: boolean;
+    readonly clickEvent: EventEmitter<Event>;
+    get computedInitial(): string;
+    handleClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfProfileChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfProfileChipComponent, "ef-profile-chip", never, { "name": { "alias": "name"; "required": false; }; "role": { "alias": "role"; "required": false; }; "roleKey": { "alias": "roleKey"; "required": false; }; "initial": { "alias": "initial"; "required": false; }; "tone": { "alias": "tone"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; }, { "clickEvent": "clickEvent"; }, never, never, true, never>;
+    static ngAcceptInputType_readonly: unknown;
+}
+
 declare class EfBlockUiComponent {
     isLoading: boolean;
     contentPanel: any;
@@ -914,75 +1702,1193 @@ declare class EfBlockableDivComponent implements BlockableUI {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfBlockableDivComponent, "ef-blockable-div", never, { "style": { "alias": "style"; "required": false; }; "cssClass": { "alias": "cssClass"; "required": false; }; }, {}, never, ["*"], true, never>;
 }
 
-declare class EfInputTextComponent implements ControlValueAccessor {
+/**
+ * Live-indicator dot with a soft breath animation.
+ *
+ * Used for "Live", presence indicators, anything that says "this is
+ * happening right now." Defaults to the Comptoir `--st-delivered-fg`
+ * green; pass `[severity]="'warn' | 'danger' | 'mute'"` for amber, red,
+ * or grey variants.
+ *
+ * ```html
+ * <ef-pulse labelKey="status.live" />
+ * <ef-pulse label="Offline" severity="mute" />
+ * ```
+ */
+declare class EfPulseComponent {
+    /** Direct label text (no translation). */
     label?: string;
+    /** Translation key — takes priority over label. */
     labelKey?: string;
-    inputId?: string;
-    name?: string;
-    placeholder?: string;
-    placeholderKey?: string;
-    size: 'small' | 'large';
-    type: string;
-    maxlength?: number;
-    readonly: boolean;
-    required: boolean;
-    fluid: boolean;
-    inline: boolean;
-    autocomplete?: string;
-    get isInline(): boolean;
-    valueChangeEvent: EventEmitter<string>;
-    value: string;
-    disabled: boolean;
-    private onChange;
-    private onTouched;
-    readonly ngControl: NgControl;
-    private readonly translateService;
+    /** Visual tone of the dot. */
+    severity: 'success' | 'warn' | 'danger' | 'mute';
+    /** Set false to freeze the breath animation. */
+    active: boolean;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPulseComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPulseComponent, "ef-pulse", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "severity": { "alias": "severity"; "required": false; }; "active": { "alias": "active"; "required": false; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Reusable PDF preview overlay — an `ef-dialog` hosting the browser's native
+ * PDF viewer (an `<iframe>` fed a sanitized object URL) plus an optional action
+ * bar (WhatsApp share · download · open in new tab · print · close).
+ *
+ * Self-contained: pass a `Blob` and a `fileName`, toggle which actions show.
+ * The object URL is created/revoked automatically with the blob's lifetime.
+ *
+ * @example
+ * <ef-pdf-preview
+ *   [(visible)]="pdfVisible"
+ *   [blob]="pdfBlob()"
+ *   [fileName]="pdfName()"
+ *   [showWhatsappShare]="true"
+ *   [whatsappPhone]="customerPhone()" />
+ */
+declare class EfPdfPreviewComponent {
+    private readonly sanitizer;
+    /** The PDF blob to preview. Setting it (re)creates the object URL. */
+    blob: _angular_core.InputSignal<Blob>;
+    /** File name shown in the header + used for download / share. */
+    fileName: _angular_core.InputSignal<string>;
+    /** Two-way dialog visibility. */
+    visible: _angular_core.ModelSignal<boolean>;
+    /** Header title translation key. */
+    titleKey: _angular_core.InputSignal<string>;
+    showDownload: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    showPrint: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    showOpenInNewTab: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show the WhatsApp share button (Web Share API → wa.me fallback). */
+    showWhatsappShare: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Optional recipient phone for the wa.me fallback (digits / +). */
+    whatsappPhone: _angular_core.InputSignal<string>;
+    private readonly objectUrl;
+    private currentUrl;
+    readonly safeUrl: _angular_core.Signal<SafeResourceUrl>;
+    /** Footer buttons, rendered by `ef-dialog`'s `[actions]`. `dismiss:false`
+     *  keeps the preview open after download/print/share/open. */
+    readonly actions: _angular_core.Signal<EfDialogAction[]>;
     constructor();
-    get effectivePlaceholder(): string;
-    get effectiveId(): string;
-    get showRequired(): boolean;
-    get serverErrors(): string[] | null;
-    get isInvalid(): boolean;
-    writeValue(value: string): void;
-    registerOnChange(fn: (value: string) => void): void;
-    registerOnTouched(fn: () => void): void;
-    setDisabledState(isDisabled: boolean): void;
-    handleInput(value: string): void;
-    handleBlur(): void;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfInputTextComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfInputTextComponent, "ef-input-text", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; }; "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; }, { "valueChangeEvent": "valueChangeEvent"; }, never, never, true, never>;
-    static ngAcceptInputType_readonly: unknown;
-    static ngAcceptInputType_required: unknown;
-    static ngAcceptInputType_fluid: unknown;
-    static ngAcceptInputType_inline: unknown;
+    private revoke;
+    close(): void;
+    download(): void;
+    openInNewTab(): void;
+    print(): void;
+    shareWhatsapp(): void;
+    private openWhatsappWeb;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPdfPreviewComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPdfPreviewComponent, "ef-pdf-preview", never, { "blob": { "alias": "blob"; "required": false; "isSignal": true; }; "fileName": { "alias": "fileName"; "required": false; "isSignal": true; }; "visible": { "alias": "visible"; "required": false; "isSignal": true; }; "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; "showDownload": { "alias": "showDownload"; "required": false; "isSignal": true; }; "showPrint": { "alias": "showPrint"; "required": false; "isSignal": true; }; "showOpenInNewTab": { "alias": "showOpenInNewTab"; "required": false; "isSignal": true; }; "showWhatsappShare": { "alias": "showWhatsappShare"; "required": false; "isSignal": true; }; "whatsappPhone": { "alias": "whatsappPhone"; "required": false; "isSignal": true; }; }, { "visible": "visibleChange"; }, never, never, true, never>;
 }
 
-declare class EfSelectComponent implements ControlValueAccessor, OnInit, OnChanges {
+/**
+ * Comptoir status spectrum — the canonical set of chip tones every
+ * status reference can map to via `metadata.color`.
+ *
+ * Tenants customize their status palettes by writing one of these
+ * values into `reference_data.metadata.color` for each entry. The
+ * elastic-portal admin (when ready) picks from this same enum, so
+ * the framework stays tenant-agnostic and the data layer is the
+ * only knob that needs to change per tenant.
+ */
+type EfStatusColor = 'pending' | 'processing' | 'shipped' | 'delivered' | 'cancelled' | 'refunded' | 'onhold' | 'tenant' | 'module' | 'neutral';
+/**
+ * Shape `ef-status-chip` expects when reading from a reference
+ * dictionary. Mirrors the `reference_data` MongoDB collection in
+ * ElasticERP — apps can pass any object with these fields.
+ */
+interface EfStatusReferenceItem {
+    code: string;
     label?: string;
     labelKey?: string;
-    inputId?: string;
-    name?: string;
-    options: any[];
-    optionLabel: string;
-    optionValue?: string;
-    placeholder: string;
-    placeholderKey?: string;
-    size: 'small' | 'large';
-    required: boolean;
-    fluid: boolean;
-    inline: boolean;
-    filter: boolean;
-    showClear: boolean;
-    disabled: boolean;
-    appendTo?: string;
-    /** Filter options by matching key-value pairs */
+    metadata?: {
+        color?: EfStatusColor | string;
+        icon?: string;
+        [key: string]: unknown;
+    };
+}
+/** Canonical tone list — used for membership checks by the resolver. */
+declare const EF_STATUS_COLORS: ReadonlyArray<EfStatusColor>;
+/**
+ * Generic color-name aliases → Comptoir tones. Seeded `reference_data`
+ * commonly stores plain color names in `metadata.color` (e.g.
+ * `sales_order_status`: Draft=gray, Completed=green, Cancelled=red).
+ * Resolving them here keeps chips AND status-keyed charts on the same
+ * `--st-*` tokens without migrating tenant data.
+ */
+declare const EF_STATUS_COLOR_ALIASES: Readonly<Record<string, EfStatusColor>>;
+/**
+ * Resolve a `metadata.color` value — a canonical tone OR a generic
+ * color-name alias — to its Comptoir tone. `undefined` when unknown,
+ * so callers can chain fallbacks (e.g. the status code itself, then
+ * `'neutral'`). Case-insensitive.
+ */
+declare function resolveEfStatusColor(value: string | null | undefined): EfStatusColor | undefined;
+
+/**
+ * Comptoir status chip — single source of truth for any kind of
+ * status / pill across the app.
+ *
+ * Resolves the chip's tone + label from the `reference_data`
+ * collection so each tenant can re-skin its status palette without
+ * touching consumer code:
+ *
+ * 1. Look up `referenceKey` in `SCREEN_REF_DATA_SERVICE`.
+ * 2. Find the entry whose `code` matches the `code` input.
+ * 3. Use `metadata.color` for the chip class and `label` /
+ *    `labelKey` for the text.
+ * 4. Fall back to the `code` itself (lowercased) when no reference
+ *    data is registered — this lets screens render meaningfully even
+ *    before the real `ReferenceDataService` is wired.
+ *
+ * ```html
+ * <ef-status-chip
+ *   referenceKey="sales_order_status"
+ *   [code]="row.status"
+ * />
+ * ```
+ *
+ * Override knobs (escape hatches):
+ * - `[color]` forces a specific Comptoir tone, ignoring metadata.
+ * - `[label]` / `[labelKey]` force the text, ignoring reference data.
+ * - `[hideDot]` removes the leading ● glyph.
+ * - `[showCode]` displays the raw code (useful for admin screens).
+ */
+declare class EfStatusChipComponent {
+    private readonly refDataService;
+    /** Reference key (e.g. `'sales_order_status'`). */
+    readonly referenceKey: _angular_core.InputSignal<string>;
+    /** Entry code to look up (e.g. `'Pending'`). */
+    readonly code: _angular_core.InputSignal<string>;
+    /** Force a specific Comptoir tone (overrides metadata.color). */
+    readonly color: _angular_core.InputSignal<"" | EfStatusColor>;
+    /** Force the displayed label (skips reference lookup). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Translation key — preferred when forcing a label. */
+    readonly labelKey: _angular_core.InputSignal<string>;
+    /** Hide the leading ● dot. */
+    readonly hideDot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the raw `code` after the label (admin-screen helper). */
+    readonly showCode: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The reference entry matching `code`, or `undefined`. */
+    private readonly entry;
+    /** Chip tone — explicit override → metadata (canonical tone or
+     *  generic color-name alias, e.g. `green` → `delivered`) → code
+     *  fallback → `neutral`. */
+    readonly resolvedColor: _angular_core.Signal<EfStatusColor>;
+    /** Resolved label — labelKey input → label input → reference label → code. */
+    readonly resolvedLabel: _angular_core.Signal<string>;
+    /** Translation key returned for the template's translate pipe. */
+    readonly resolvedLabelKey: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfStatusChipComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfStatusChipComponent, "ef-status-chip", never, { "referenceKey": { "alias": "referenceKey"; "required": false; "isSignal": true; }; "code": { "alias": "code"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "hideDot": { "alias": "hideDot"; "required": false; "isSignal": true; }; "showCode": { "alias": "showCode"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Available anchor positions for the toast region.
+ */
+type EfToastRegionPosition = 'top-right' | 'top-left' | 'top-center' | 'bottom-right' | 'bottom-left' | 'bottom-center';
+/**
+ * Comptoir toast region — V2 successor to PrimeNG `<p-toast>`.
+ *
+ * Mounts once at the app root (or any layout shell) and renders the
+ * live `EfToastService.toasts` queue. Auto-dismiss timers + manual
+ * close button + optional inline action buttons. Severity styling
+ * comes from the `.toast.<severity>` rules in `_patterns.scss`,
+ * mapped 1:1 to the Comptoir status spectrum.
+ *
+ * ```html
+ * <!-- App root -->
+ * <ef-toast-region position="bottom-right" />
+ * ```
+ */
+declare class EfToastRegionComponent {
+    private readonly toastService;
+    private readonly destroyRef;
+    /** Anchor position. Default: bottom-right. */
+    readonly position: _angular_core.InputSignal<EfToastRegionPosition>;
+    /** Cap the visible stack — older toasts get auto-dismissed. */
+    readonly maxStack: _angular_core.InputSignal<number>;
+    /** Hide the bottom progress bar across all toasts. */
+    readonly hideProgress: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Toasts currently mid-exit-animation (kept around for the
+     *  duration of the CSS transition before being removed from DOM). */
+    readonly exiting: _angular_core.WritableSignal<ReadonlySet<number>>;
+    /** Live queue from the service — direct read so the template
+     *  re-renders when a toast is pushed or dismissed. */
+    readonly toasts: _angular_core.WritableSignal<readonly EfToast[]>;
+    /** Per-toast lifespan timers (manual setTimeout — robust against
+     *  Angular zoneless mode and visible across HMR reloads). */
+    private readonly timers;
+    constructor();
+    severityClass(t: EfToast): string;
+    iconClass(t: EfToast): string;
+    progressStyle(t: EfToast): {
+        [k: string]: string;
+    } | null;
+    onClose(t: EfToast): void;
+    onActionClick(t: EfToast, action: EfToastAction): void;
+    trackById: (_: number, t: EfToast) => number;
+    private syncTimers;
+    private enforceMaxStack;
+    /** Mark the toast as exiting → wait for the CSS animation → tell
+     *  the service to remove it. Keeps the DOM around for the
+     *  out-animation duration. */
+    private beginExit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfToastRegionComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfToastRegionComponent, "ef-toast-region", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "maxStack": { "alias": "maxStack"; "required": false; "isSignal": true; }; "hideProgress": { "alias": "hideProgress"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Shape of the placeholder rendered while a widget's data is in flight. */
+type EfSkeletonVariant = 'text' | 'kpi' | 'chart' | 'table';
+/**
+ * Comptoir loading skeleton — the one reusable "waiting for results"
+ * placeholder for async card/widget bodies (dashboards, reports,
+ * detail sidebars). Pure CSS shimmer on the design-system tokens;
+ * decorative only (`aria-hidden`), so hosts flag busyness themselves
+ * (`ef-card` sets `aria-busy` on its body when `[loading]` is true).
+ *
+ * Prefer injecting it through `ef-card`'s `[loading]` + `skeleton`
+ * inputs — the card swaps its body for the skeleton with a single
+ * binding. Use the component directly only for non-card shells
+ * (e.g. a KPI tile row):
+ *
+ * ```html
+ * <ef-card titleKey="…" [loading]="state() === 'loading'" skeleton="chart">…</ef-card>
+ * <ef-skeleton class="kpi" variant="kpi" />
+ * ```
+ *
+ * Variants: `text` (default, `rows` lines), `kpi` (label / value /
+ * delta bars), `chart` (one block, `height` px), `table` (header bar
+ * + `rows` row bars).
+ */
+declare class EfSkeletonComponent {
+    /** Placeholder shape. */
+    readonly variant: _angular_core.InputSignal<EfSkeletonVariant>;
+    /** Line/row count for the `text` and `table` variants. */
+    readonly rows: _angular_core.InputSignal<number>;
+    /** Block height (px) for the `chart` variant. */
+    readonly height: _angular_core.InputSignal<number>;
+    readonly lines: _angular_core.Signal<number[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSkeletonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSkeletonComponent, "ef-skeleton", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Comptoir card primitive — `.card` shell with optional `.card-head`,
+ * `.card-body`, `.card-foot`. Phase 7's most reused container.
+ *
+ * Three projection slots:
+ *   `head-extra`  — projected on the right of the head row, after the
+ *                   built-in title/meta. Use for a status chip,
+ *                   action button, kbd hint, etc.
+ *   default       — body content (replaced by the reusable
+ *                   `ef-skeleton` while `[loading]` is true).
+ *   `foot`        — bottom strip with rule-soft separator + paper bg.
+ *
+ * ```html
+ * <ef-card titleKey="orders_status" [tone]="'module'">
+ *   <ng-container head-extra>
+ *     <ef-status-chip referenceKey="sales_order_status" [code]="status" />
+ *   </ng-container>
+ *   <div>… body content …</div>
+ *   <div foot>
+ *     <span class="small text-mute">Modifié il y a 2 min</span>
+ *   </div>
+ * </ef-card>
+ * ```
+ */
+declare class EfCardComponent {
+    /** Translation key for the head title — preferred. */
+    readonly titleKey: _angular_core.InputSignal<string>;
+    /** Direct title fallback when `titleKey` is empty. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Translation key for the head's small meta line. */
+    readonly metaKey: _angular_core.InputSignal<string>;
+    readonly meta: _angular_core.InputSignal<string>;
+    /** Module-tinted head — uses `var(--module)` for the head bg. */
+    readonly tone: _angular_core.InputSignal<"default" | "module">;
+    /** Force the head to render even when no title/meta (e.g. when
+     *  using only the head-extra slot). Defaults to auto-detect. */
+    readonly forceHead: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the foot strip — set when projecting `[foot]` content. */
+    readonly hasFoot: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** When true, the head shows a chevron toggle and the body/foot collapse. */
+    readonly collapsible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Let overlay content (custom dropdowns/menus rendered inside the body)
+     *  escape the card's `overflow: hidden`. PrimeNG overlays should prefer
+     *  `appendTo="body"`; use this for non-PrimeNG absolute-positioned menus. */
+    readonly overflowVisible: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** While true, the body renders the reusable `ef-skeleton` instead of
+     *  the projected content (and flags `aria-busy`). Bind each card's own
+     *  async state so widgets shimmer independently:
+     *  `[loading]="state().series === 'loading'"`. */
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Skeleton shape shown while `loading` — match the body content. */
+    readonly skeleton: _angular_core.InputSignal<EfSkeletonVariant>;
+    /** Line/row count for the `text` / `table` skeleton variants. */
+    readonly skeletonRows: _angular_core.InputSignal<number>;
+    /** Block height (px) for the `chart` skeleton variant. */
+    readonly skeletonHeight: _angular_core.InputSignal<number>;
+    /** Collapsed state (two-way). Bind `[collapsed]="true"` to start collapsed. */
+    readonly collapsed: _angular_core.ModelSignal<boolean>;
+    readonly showHead: _angular_core.Signal<boolean>;
+    readonly showFoot: _angular_core.Signal<boolean>;
+    /** Toggle collapsed state (no-op when not collapsible). */
+    toggle(): void;
+    /** Clicking anywhere on a collapsible head (except the actions area, which
+     *  stops propagation) toggles the card. */
+    onHeadClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfCardComponent, "ef-card", never, { "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "metaKey": { "alias": "metaKey"; "required": false; "isSignal": true; }; "meta": { "alias": "meta"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "forceHead": { "alias": "forceHead"; "required": false; "isSignal": true; }; "hasFoot": { "alias": "hasFoot"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "overflowVisible": { "alias": "overflowVisible"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "skeleton": { "alias": "skeleton"; "required": false; "isSignal": true; }; "skeletonRows": { "alias": "skeletonRows"; "required": false; "isSignal": true; }; "skeletonHeight": { "alias": "skeletonHeight"; "required": false; "isSignal": true; }; "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; }, never, ["[head-extra]", "*", "[foot]"], true, never>;
+}
+
+/**
+ * 12-column form-grid primitive. Children use `.col-2/3/4/6/8/9/12`
+ * to claim spans; on viewports < 720px every span collapses to 12.
+ *
+ * ```html
+ * <ef-form-grid>
+ *   <div class="col-6 ef-field">
+ *     <label>Client</label>
+ *     <ef-select … />
+ *   </div>
+ *   <div class="col-3 ef-field">
+ *     <label>Date</label>
+ *     <ef-datepicker … />
+ *   </div>
+ *   <div class="col-3 ef-field">
+ *     <label>Total</label>
+ *     <span class="read strong">12 350,00 MAD</span>
+ *   </div>
+ * </ef-form-grid>
+ * ```
+ */
+declare class EfFormGridComponent {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfFormGridComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfFormGridComponent, "ef-form-grid", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Sticky detail-screen toolbar. Two slots and an optional declarative
+ * action API:
+ *
+ * - default       — entity identity (ref / name / status chip / meta).
+ * - `[customActions]` input — declarative array of EfDetailToolbarAction;
+ *                             rendered at the start of the right group,
+ *                             before the standard actions.
+ * - `[actions]` slot — full-template escape hatch (rendered after
+ *                      `[customActions]`, before the separator).
+ * - Standard actions — Print, Duplicate, Delete, Save (in that order),
+ *                      shown via `[showPrintAction]` / `[showDuplicateAction]`
+ *                      / `[showDeleteAction]` / `[showSaveAction]` and
+ *                      gated by `[context]`'s permissions.
+ *
+ * Layout: `…identity (left) | …customActions  [actions]  | print  duplicate  delete  save…`
+ *
+ * ```html
+ * <ef-detail-toolbar
+ *   [customActions]="screenActions()"
+ *   [context]="context"
+ *   [showPrintAction]="editionState()"
+ *   [showDuplicateAction]="editionState()"
+ *   [showDeleteAction]="editionState()"
+ *   [saving]="loading()"
+ *   [saveLabelKey]="editionState() ? 'common_save' : 'common_create'"
+ *   (print)="print()"
+ *   (duplicate)="duplicate()"
+ *   (delete)="delete()"
+ *   (save)="save()"
+ * >
+ *   <span class="ref">{{ ref() }}</span>
+ *   <ef-status-chip referenceKey="…" [code]="status()" />
+ * </ef-detail-toolbar>
+ * ```
+ *
+ * Custom actions can declare `permission` and `visible` like
+ * `EfRowAction`. With `[context]` bound, the toolbar filters them
+ * against `ScreenContext.isGranted()` automatically.
+ */
+declare class EfDetailToolbarComponent {
+    /** Custom screen-specific actions, rendered before the standard
+     *  set in the right group. Each one gets the same permission /
+     *  visibility filtering used by EfRowAction. */
+    readonly customActions: _angular_core.InputSignal<readonly EfDetailToolbarAction[]>;
+    /** Optional ScreenContext — when present, custom actions with a
+     *  `permission` field and standard actions Print / Duplicate /
+     *  Delete are filtered against `context.isGranted(...)`. */
+    readonly context: _angular_core.InputSignal<ScreenContext>;
+    /** Render the standard Print action (left of the standard group). */
+    readonly showPrintAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the standard Duplicate action. */
+    readonly showDuplicateAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the standard Delete action (danger-tinted). */
+    readonly showDeleteAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the standard Save action (rightmost, tenant-styled). */
+    readonly showSaveAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable Save while a save round-trip is in flight. */
+    readonly saving: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** i18n key for the Save button label. Screens typically pass
+     *  `'common_create'` in create mode and `'common_save'` in edit. */
+    readonly saveLabelKey: _angular_core.InputSignal<string>;
+    /** Fired when a `customActions` button is clicked. The toast
+     *  service or screen handler should consume `id`. The `command`
+     *  callback on the action is also invoked. */
+    readonly customAction: _angular_core.OutputEmitterRef<EfDetailToolbarAction>;
+    readonly print: _angular_core.OutputEmitterRef<void>;
+    readonly duplicate: _angular_core.OutputEmitterRef<void>;
+    readonly delete: _angular_core.OutputEmitterRef<void>;
+    readonly save: _angular_core.OutputEmitterRef<void>;
+    /** Custom actions after permission + `visible` filtering. */
+    readonly visibleCustomActions: _angular_core.Signal<readonly EfDetailToolbarAction[]>;
+    readonly canPrint: _angular_core.Signal<boolean>;
+    readonly canDuplicate: _angular_core.Signal<boolean>;
+    readonly canDelete: _angular_core.Signal<boolean>;
+    readonly canSave: _angular_core.Signal<boolean>;
+    readonly hasStandardActions: _angular_core.Signal<boolean>;
+    readonly hasCustomActions: _angular_core.Signal<boolean>;
+    /** Whether the `|` separator should render — both groups present. */
+    readonly showSeparator: _angular_core.Signal<boolean>;
+    onCustomClick(action: EfDetailToolbarAction): void;
+    private isCustomVisible;
+    /** Standard action visibility: `show*Action` flag AND permission
+     *  granted by `context` (or no context bound). */
+    private checkStandard;
+    /** Stable trackBy across renders. */
+    trackByAction: (i: number, a: EfDetailToolbarAction) => unknown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDetailToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDetailToolbarComponent, "ef-detail-toolbar", never, { "customActions": { "alias": "customActions"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "showPrintAction": { "alias": "showPrintAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; "showSaveAction": { "alias": "showSaveAction"; "required": false; "isSignal": true; }; "saving": { "alias": "saving"; "required": false; "isSignal": true; }; "saveLabelKey": { "alias": "saveLabelKey"; "required": false; "isSignal": true; }; }, { "customAction": "customAction"; "print": "print"; "duplicate": "duplicate"; "delete": "delete"; "save": "save"; }, never, ["*", "[actions]"], true, never>;
+}
+
+/**
+ * Page-level toolbar for list / search screens. Mirrors the
+ * {@link EfDetailToolbarComponent} concept — two slots and a
+ * declarative action API — but ships with the search-screen
+ * default actions instead of the detail-screen ones.
+ *
+ * - default       — page identity (title / meta / status pills).
+ * - `[customActions]` input — declarative array of
+ *                             EfSearchToolbarAction; rendered at the
+ *                             start of the right group, before the
+ *                             standard actions.
+ * - `[actions]` slot — full-template escape hatch (rendered after
+ *                      `[customActions]`, before the separator).
+ * - Standard actions — Export, Add (in that order), shown via
+ *                      `[showExportAction]` / `[showAddAction]` and
+ *                      gated by `[context]`'s permissions.
+ *
+ * Search / Clear deliberately do **not** live here — those belong
+ * to `ef-smart-bar` (its built-in `(search)` / `(clear)` outputs).
+ * This toolbar owns the page-level actions, not the filter actions.
+ *
+ * Layout: `…title (left) | …customActions  [actions]  | export  add`
+ *
+ * ```html
+ * <ef-search-toolbar
+ *   [context]="context"
+ *   [customActions]="screenActions()"
+ *   showExportAction
+ *   (export)="exportItems()"
+ *   (add)="add()"
+ * >
+ *   <div class="title-meta">
+ *     <h1>{{ 'catalog_products_title' | translate }}</h1>
+ *     <p class="meta">{{ totalCount() }} items</p>
+ *   </div>
+ * </ef-search-toolbar>
+ * ```
+ *
+ * Custom actions can declare `permission` and `visible` like
+ * `EfRowAction`. With `[context]` bound, the toolbar filters them
+ * against `ScreenContext.isGranted()` automatically.
+ */
+declare class EfSearchToolbarComponent {
+    /** Custom screen-specific actions, rendered before the standard
+     *  set in the right group. Each one gets the same permission /
+     *  visibility filtering used by EfRowAction. */
+    readonly customActions: _angular_core.InputSignal<readonly _elasticias_screens.EfDetailToolbarAction[]>;
+    /** Optional ScreenContext — when present, custom actions with a
+     *  `permission` field and standard actions Export / Add are
+     *  filtered against `context.isGranted(...)`. */
+    readonly context: _angular_core.InputSignal<ScreenContext>;
+    /** Render the standard Export action (left of the standard group). */
+    readonly showExportAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Render the standard Add action (rightmost, tenant-styled). */
+    readonly showAddAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Disable Add while a navigation / fetch is in flight. */
+    readonly busy: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** i18n key for the Add button label. Screens typically pass
+     *  `'common_new'` (default) or a screen-specific
+     *  `'catalog_products_new'`. */
+    readonly addLabelKey: _angular_core.InputSignal<string>;
+    /** i18n key for the Export button label. */
+    readonly exportLabelKey: _angular_core.InputSignal<string>;
+    /** Fired when a `customActions` button is clicked. The toast
+     *  service or screen handler should consume `id`. The `command`
+     *  callback on the action is also invoked. */
+    readonly customAction: _angular_core.OutputEmitterRef<_elasticias_screens.EfDetailToolbarAction>;
+    readonly export: _angular_core.OutputEmitterRef<void>;
+    readonly add: _angular_core.OutputEmitterRef<void>;
+    /** Custom actions after permission + `visible` filtering. */
+    readonly visibleCustomActions: _angular_core.Signal<readonly _elasticias_screens.EfDetailToolbarAction[]>;
+    readonly canExport: _angular_core.Signal<boolean>;
+    readonly canAdd: _angular_core.Signal<boolean>;
+    readonly hasStandardActions: _angular_core.Signal<boolean>;
+    readonly hasCustomActions: _angular_core.Signal<boolean>;
+    /** Whether the `|` separator should render — both groups present. */
+    readonly showSeparator: _angular_core.Signal<boolean>;
+    onCustomClick(action: EfSearchToolbarAction): void;
+    private isCustomVisible;
+    /** Standard action visibility: `show*Action` flag AND permission
+     *  granted by `context` (or no context bound). */
+    private checkStandard;
+    /** Stable trackBy across renders. */
+    trackByAction: (i: number, a: EfSearchToolbarAction) => unknown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSearchToolbarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSearchToolbarComponent, "ef-search-toolbar", never, { "customActions": { "alias": "customActions"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "showExportAction": { "alias": "showExportAction"; "required": false; "isSignal": true; }; "showAddAction": { "alias": "showAddAction"; "required": false; "isSignal": true; }; "busy": { "alias": "busy"; "required": false; "isSignal": true; }; "addLabelKey": { "alias": "addLabelKey"; "required": false; "isSignal": true; }; "exportLabelKey": { "alias": "exportLabelKey"; "required": false; "isSignal": true; }; }, { "customAction": "customAction"; "export": "export"; "add": "add"; }, never, ["*", "[actions]"], true, never>;
+}
+
+/**
+ * One key-value row in the totals stack.
+ */
+interface EfTotalsRow {
+    /** Translation key for the row label — preferred. */
+    labelKey?: string;
+    /** Direct label fallback when `labelKey` is empty. */
+    label?: string;
+    /** Pre-formatted value text (e.g. `'12 350,00'`). */
+    value: string | number;
+    /** Optional small unit text right of the value (e.g. `'MAD'`). */
+    unit?: string;
+    /** `'discount'` paints the value in `--st-pending-fg`. */
+    tone?: 'default' | 'discount';
+}
+/**
+ * Display-size grand row (Bricolage 28px) shown after a divider.
+ * Same shape as a regular row but rendered with the `.grand-row` class.
+ */
+interface EfTotalsGrand {
+    labelKey?: string;
+    label?: string;
+    value: string | number;
+    /** Currency / unit suffix shown smaller after the big number. */
+    currency?: string;
+}
+
+/**
+ * Sidebar totals stack — key-value rows with optional display-size
+ * grand-row (Bricolage Grotesque, ~28px). Lives inside an `<ef-card>`
+ * on order / invoice / quote detail screens.
+ *
+ * ```html
+ * <ef-card titleKey="orders_totals">
+ *   <ef-totals
+ *     [rows]="[
+ *       { labelKey: 'totals_subtotal', value: '12 350,00', unit: 'MAD' },
+ *       { labelKey: 'totals_discount', value: '-450,00', unit: 'MAD', tone: 'discount' },
+ *       { labelKey: 'totals_tax',      value: '2 372,40', unit: 'MAD' },
+ *     ]"
+ *     [grand]="{ labelKey: 'totals_grand', value: '14 272,40', currency: 'MAD' }"
+ *   />
+ * </ef-card>
+ * ```
+ */
+declare class EfTotalsComponent {
+    readonly rows: _angular_core.InputSignal<readonly EfTotalsRow[]>;
+    readonly grand: _angular_core.InputSignal<EfTotalsGrand>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTotalsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfTotalsComponent, "ef-totals", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "grand": { "alias": "grand"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * One row in the stats stack — a label/value pair with optional unit
+ * and an optional `big` flag that swaps the value to a Bricolage
+ * display number (~22px).
+ */
+interface EfStatsRow {
+    labelKey?: string;
+    label?: string;
+    value: string | number;
+    /** Small grey unit shown right of the value (e.g. `'MAD'`, `'cmds'`). */
+    unit?: string;
+    /** Render the value as a Bricolage display number. Used for the
+     *  one or two headline metrics in a sidebar stats card. */
+    big?: boolean;
+}
+
+/**
+ * Sidebar mini-KPI stack. Lives inside an `<ef-card>` on detail
+ * screens; rule-soft separators between rows, optional `.big` row
+ * swaps the value to a Bricolage display number.
+ *
+ * ```html
+ * <ef-card titleKey="clients_stats">
+ *   <ef-stats
+ *     [rows]="[
+ *       { labelKey: 'stats_revenue_ytd', value: '128 450', unit: 'MAD', big: true },
+ *       { labelKey: 'stats_orders_count', value: 42 },
+ *       { labelKey: 'stats_last_order',   value: 'Il y a 3 jours' },
+ *     ]"
+ *   />
+ * </ef-card>
+ * ```
+ *
+ * Stats are sidebar-only — never on list/search screens (KPIs there
+ * are forbidden, see CLAUDE.md memory).
+ */
+declare class EfStatsComponent {
+    readonly rows: _angular_core.InputSignal<readonly EfStatsRow[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfStatsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfStatsComponent, "ef-stats", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type EfTimelineState = 'done' | 'now' | 'upcoming';
+/**
+ * One step in a vertical timeline.
+ */
+interface EfTimelineItem {
+    /** Stable id for trackBy / template references. */
+    id?: string | number;
+    labelKey?: string;
+    label?: string;
+    /** Small grey meta line below the label (e.g. `'Karim · 12 mai 14:30'`). */
+    metaKey?: string;
+    meta?: string;
+    /**
+     * Step state — drives the dot styling:
+     * - `'done'`     → filled with `--st-delivered-fg`
+     * - `'now'`      → filled with `--module` + halo
+     * - `'upcoming'` → outlined `--ink-300` (default)
+     */
+    state?: EfTimelineState;
+}
+
+/**
+ * Vertical timeline — used on order / user / client detail screens
+ * to surface the entity's history. Three dot states (`done` / `now`
+ * / `upcoming`) line up with the prototype.
+ *
+ * ```html
+ * <ef-card titleKey="orders_history">
+ *   <ef-timeline
+ *     [items]="[
+ *       { state: 'done', label: 'Commande créée', meta: 'Karim · 12 mai 14:30' },
+ *       { state: 'done', label: 'Paiement reçu',  meta: 'Stripe · 12 mai 14:32' },
+ *       { state: 'now',  label: 'Préparation',    meta: 'En cours' },
+ *       { state: 'upcoming', label: 'Expédition' },
+ *     ]"
+ *   />
+ * </ef-card>
+ * ```
+ *
+ * The `'now'` dot picks up `var(--module)` so each module's accent
+ * tints its own active step.
+ */
+declare class EfTimelineComponent {
+    readonly items: _angular_core.InputSignal<readonly EfTimelineItem[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTimelineComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfTimelineComponent, "ef-timeline", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface OpMeta {
+    cls: string;
+}
+/**
+ * Standardized change-history box. Drop it on any detail screen and feed it the
+ * record's audit entries (from `GET /api/audit/{entityType}/{id}` via the NSwag
+ * `AuditClient`). Renders a vertical timeline inside an {@link EfCardComponent},
+ * resolving operation labels through `audit_op_*` i18n keys and field labels
+ * through `audit_field_*` (falling back to the raw field key when unmapped).
+ *
+ * ```html
+ * <ef-change-history [entries]="auditEntries()" />
+ * ```
+ */
+declare class EfChangeHistoryComponent {
+    private readonly translate;
+    readonly entries: _angular_core.InputSignal<readonly EfChangeHistoryEntry[]>;
+    readonly titleKey: _angular_core.InputSignal<string>;
+    readonly emptyKey: _angular_core.InputSignal<string>;
+    /** Cap the total rows considered (newest first). 0 = no cap. */
+    readonly limit: _angular_core.InputSignal<number>;
+    /** How many recent entries to show inline in the card. 0 = all. The rest
+     *  are reachable via the "view details" dialog. */
+    readonly previewLimit: _angular_core.InputSignal<number>;
+    /** Render inside a collapsible card. */
+    readonly collapsible: _angular_core.InputSignal<boolean>;
+    /** Initial collapsed state — expanded by default. */
+    readonly startCollapsed: _angular_core.InputSignal<boolean>;
+    /** "Show more" dialog visibility. */
+    readonly dialogVisible: _angular_core.WritableSignal<boolean>;
+    /** First `previewLimit` rows shown inline in the card. */
+    readonly previewRows: _angular_core.Signal<{
+        entry: EfChangeHistoryEntry;
+        meta: OpMeta;
+        operationLabel: string;
+    }[]>;
+    /** True when the full list has more entries than the inline preview. */
+    readonly hasMore: _angular_core.Signal<boolean>;
+    openDialog(event?: Event): void;
+    readonly rows: _angular_core.Signal<{
+        entry: EfChangeHistoryEntry;
+        meta: OpMeta;
+        operationLabel: string;
+    }[]>;
+    /** Resolve a field key to its label. Adding an `audit_field_<field>` key is
+     *  OPTIONAL — when it's missing the raw field name is humanized
+     *  (`clientCode` → "Client code"), so new entities/fields work with zero
+     *  i18n maintenance. Add a key only for a properly localized (fr/ar) term. */
+    fieldLabel(field: string | undefined): string;
+    /** Returns the translation when present, otherwise a humanized fallback of
+     *  the source token (ngx-translate echoes the key on a miss). */
+    private resolveLabel;
+    /** `clientCode` / `status_changed` → "Client code" / "Status changed". */
+    private humanize;
+    /** Locale-stable dd/MM/yyyy HH:mm — avoids depending on Angular locale data
+     *  registration (the app's default locale is fr-MA). */
+    formatWhen(value: string | Date | null | undefined): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfChangeHistoryComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfChangeHistoryComponent, "ef-change-history", never, { "entries": { "alias": "entries"; "required": false; "isSignal": true; }; "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; "emptyKey": { "alias": "emptyKey"; "required": false; "isSignal": true; }; "limit": { "alias": "limit"; "required": false; "isSignal": true; }; "previewLimit": { "alias": "previewLimit"; "required": false; "isSignal": true; }; "collapsible": { "alias": "collapsible"; "required": false; "isSignal": true; }; "startCollapsed": { "alias": "startCollapsed"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Sparkline series — array of numeric values, normalized to the
+ * card's viewBox at render time. Pass an empty array to hide the
+ * sparkline.
+ */
+type EfKpiSparkline = ReadonlyArray<number>;
+/**
+ * Trend tone — drives the delta arrow color.
+ * - `'up'`   → success green (`--st-delivered-fg`)
+ * - `'down'` → danger red (`--st-cancelled-fg`)
+ * - `'flat'` → muted grey
+ */
+type EfKpiDeltaTone = 'up' | 'down' | 'flat';
+
+/**
+ * Dashboard headline KPI tile — the one place KPIs are allowed in
+ * the design system. List/search screens stay focused on results;
+ * KPIs live on per-module dashboards (and detail-screen sidebars
+ * via `ef-stats`).
+ *
+ * ```html
+ * <ef-kpi-card
+ *   labelKey="kpi_revenue_7d"
+ *   value="52 480"
+ *   unit="MAD"
+ *   delta="▲ 12%"
+ *   deltaTone="up"
+ *   [spark]="[22, 20, 17, 18, 12, 14, 9, 11, 7, 10, 5, 8, 4, 3, 2]"
+ * />
+ * ```
+ *
+ * Sparkline values are normalized to a fixed 200×28 viewBox; the
+ * stroke colour follows the active module's color (`--module`, e.g.
+ * Sales blue) by default — the convention for report/dashboard
+ * accents — override via `[sparkColor]="'var(--st-pending-fg)'"` for
+ * variants. Pass an empty array to hide the sparkline.
+ */
+declare class EfKpiCardComponent {
+    /** Translation key for the small label above the headline number. */
+    readonly labelKey: _angular_core.InputSignal<string>;
+    /** Direct label fallback. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Pre-formatted headline value (e.g. `'52 480'`, `'603'`). */
+    readonly value: _angular_core.InputSignal<string | number>;
+    /** Optional small unit suffix (e.g. `'MAD'`, `'%'`). */
+    readonly unit: _angular_core.InputSignal<string>;
+    /** Pre-formatted delta text including the arrow glyph (`'▲ 12%'`). */
+    readonly delta: _angular_core.InputSignal<string>;
+    /** Delta tone — drives the arrow color. */
+    readonly deltaTone: _angular_core.InputSignal<EfKpiDeltaTone>;
+    /** Raw series for the sparkline. */
+    readonly spark: _angular_core.InputSignal<EfKpiSparkline>;
+    /** Stroke color for the sparkline polyline. Defaults to the active
+     *  module's color (report-accent convention); SVG resolves the CSS
+     *  custom property natively. */
+    readonly sparkColor: _angular_core.InputSignal<string>;
+    /** Computed `points="x,y x,y …"` attribute, normalized into the
+     *  200×28 viewBox so the polyline always fits. Returns null
+     *  when the series is empty. */
+    readonly sparkPoints: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfKpiCardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfKpiCardComponent, "ef-kpi-card", never, { "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "unit": { "alias": "unit"; "required": false; "isSignal": true; }; "delta": { "alias": "delta"; "required": false; "isSignal": true; }; "deltaTone": { "alias": "deltaTone"; "required": false; "isSignal": true; }; "spark": { "alias": "spark"; "required": false; "isSignal": true; }; "sparkColor": { "alias": "sparkColor"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+type EfChartType = 'line' | 'bar' | 'donut';
+interface EfChartSeries {
+    label?: string;
+    data: ReadonlyArray<number>;
+    color?: string;
+    /** Per-point colors (donut slices / bars). Sparse entries fall back to
+     *  `color`, then the palette — use for status-keyed charts so slices
+     *  reuse the exact status-chip tokens (`--st-*-fg`) instead of accents. */
+    colors?: ReadonlyArray<string | undefined>;
+}
+/** Concrete hexes (canvas can't resolve CSS var() strings). Order matches the tenant accents.
+ *
+ *  Convention: the DOMINANT color of report/dashboard visuals is the **active
+ *  module's color** (`--module`, e.g. Sales blue `--m-sales`). `ef-chart`
+ *  resolves the token at render time and passes it as `moduleColor`, which
+ *  takes the palette's first slot — these accents only color secondary
+ *  series/slices. A series' explicit `color` always wins. */
+declare const EF_CHART_PALETTE: ReadonlyArray<string>;
+declare function buildChartConfig(type: EfChartType, labels: ReadonlyArray<string>, series: ReadonlyArray<EfChartSeries>, 
+/** Resolved `--module` color — becomes the palette's first (dominant) slot. */
+moduleColor?: string): ChartConfiguration;
+
+/**
+ * Thin chart.js wrapper for report/dashboard visuals (line, bar, donut).
+ * Labels/series are data — i18n happens in the parent. Zoneless-safe: the
+ * effect below re-renders whenever inputs change; instance destroyed on cleanup.
+ *
+ * Color convention: the dominant series/slice color defaults to the **active
+ * module's color** — the component resolves `--module` (set by `ef-app-main`'s
+ * `[data-module]`, e.g. Sales blue) from the canvas at render time, since the
+ * chart.js canvas can't consume CSS `var()` strings. Secondary series fall back
+ * to `EF_CHART_PALETTE`; a series' explicit `color` always wins.
+ */
+declare class EfChartComponent implements OnDestroy {
+    readonly type: _angular_core.InputSignal<EfChartType>;
+    readonly labels: _angular_core.InputSignal<readonly string[]>;
+    readonly series: _angular_core.InputSignal<readonly EfChartSeries[]>;
+    readonly height: _angular_core.InputSignal<number>;
+    private readonly canvas;
+    private chart;
+    constructor();
+    ngOnDestroy(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfChartComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfChartComponent, "ef-chart", never, { "type": { "alias": "type"; "required": true; "isSignal": true; }; "labels": { "alias": "labels"; "required": false; "isSignal": true; }; "series": { "alias": "series"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+interface EfRankRow {
+    label: string;
+    value: string;
+    secondary?: string;
+    pct: number;
+}
+/** Top-N ranked rows (label · proportional bar · value). Lives inside an ef-card. */
+declare class EfRankListComponent {
+    readonly rows: _angular_core.InputSignal<readonly EfRankRow[]>;
+    clampPct(pct: number): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfRankListComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfRankListComponent, "ef-rank-list", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Shared base for every Comptoir form control (`ef-input-text`,
+ * `ef-textarea`, `ef-select`, `ef-input-number`, `ef-checkbox`, …).
+ *
+ * Hoists the cross-cutting concerns that every form control wants
+ * to handle the same way:
+ *
+ * - **Identity** — `inputId` / `name` plus an auto-generated id
+ *   (`ef-ctrl-<n>`) so the `<label for>` ↔ `<input id>` binding
+ *   always works for screen readers + click-to-focus, even when
+ *   the consumer didn't pass anything.
+ * - **Label / placeholder i18n** — `labelKey` / `label` and
+ *   `placeholderKey` / `placeholder` with the same precedence
+ *   convention (`*Key` wins, falls back to literal). All ef-*
+ *   form controls follow the
+ *   [feedback_i18n_keys](memory) convention by surfacing both
+ *   inputs.
+ * - **ARIA** — `ariaLabelKey` / `ariaLabel` for screen-reader-only
+ *   labels; `effectiveAriaLabel` returns `null` when a visible
+ *   label is rendered (which already serves as the ARIA name).
+ *   `errorsId` provides a stable id for the error/hint container
+ *   so subclasses can wire `aria-describedby`.
+ * - **State** — `required` / `readonly` / `disabled` shared inputs,
+ *   used directly in subclass templates and toggled by CVA's
+ *   `setDisabledState` in subclasses.
+ *
+ * Subclasses still own their own `value` field, ControlValueAccessor
+ * implementation, and any control-specific inputs (e.g. textarea's
+ * `rows`, select's `options`).
+ *
+ * ```ts
+ * export class EfInputTextComponent extends AbstractEfFormControl
+ *     implements ControlValueAccessor {
+ *   @Input() type = 'text';
+ *   @Input() value = '';
+ *   // ... CVA + value-specific logic
+ * }
+ * ```
+ */
+declare abstract class AbstractEfFormControl {
+    /** Explicit DOM `id` for the inner control. Falls back to
+     *  `name`, then to the auto-generated `_autoId`. */
+    readonly inputId: _angular_core.InputSignal<string>;
+    /** Form `name` attribute — also used as the id fallback. */
+    readonly name: _angular_core.InputSignal<string>;
+    /** Per-instance auto id used when neither `inputId` nor `name`
+     *  is supplied. The static counter is shared across all
+     *  AbstractEfFormControl subclasses, which is fine — uniqueness
+     *  per-page is the only requirement. */
+    private static _nextId;
+    protected readonly _autoId: string;
+    /** Direct label text. Use `labelKey` for i18n. */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Translation key for the label — preferred (memory:
+     *  feedback_i18n_keys says always use `*Key`). */
+    readonly labelKey: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly placeholderKey: _angular_core.InputSignal<string>;
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    readonly ariaLabelKey: _angular_core.InputSignal<string>;
+    readonly required: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** The `[disabled]` input. The **effective** disabled (input OR
+     *  form-driven via CVA) is {@link isDisabled} — bind that in templates. */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Form-driven disabled set by CVA `setDisabledState`, merged with the
+     *  `[disabled]` input. Writable signal (the input itself is read-only). */
+    private readonly _cvaDisabled;
+    /** Effective disabled state — the `[disabled]` input OR a reactive-form
+     *  `disable()`. Templates/logic should use this, not `disabled()`. */
+    readonly isDisabled: _angular_core.Signal<boolean>;
+    /** CVA hook for subclasses: `setDisabledState(d) { this.updateDisabledState(d); }`. */
+    protected updateDisabledState(disabled: boolean): void;
+    /**
+     * Show the inline clear ✕ (the shared `ef-clear-button`). On by default —
+     * every control is clearable; the ✕ only appears when there's a value and
+     * the field is editable (see {@link canClear}). Set `[showClear]="false"`
+     * to opt a field out.
+     */
+    readonly showClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the clear ✕ should currently render: opted in, the control
+     *  holds a value ({@link hasValue}), and the field is editable. */
+    get canClear(): boolean;
+    /** Subclasses report whether they currently hold a clearable value.
+     *  Default `false` (controls that don't override never show a clear). */
+    protected get hasValue(): boolean;
+    /** Reset the control's value (and notify forms / `valueChangeEvent`).
+     *  Overridden by subclasses that support clearing. */
+    clearValue(): void;
+    /**
+     * Forms-independent server/validation errors for this field.
+     *
+     * The signal-based V2 detail screens bind values with `[value]` +
+     * `(valueChangeEvent)` and never register an `NgControl`, so the
+     * `ngControl`-based `serverError` path can't surface backend
+     * validation messages. Two ways to feed them in:
+     *
+     * - Explicit, per-field: `[errors]="serverErrors()['clientType']"`.
+     * - Automatic, by `name`: wrap the fields in `[efServerErrors]="serverErrors()"`
+     *   and the control links itself via {@link EfServerErrorsDirective}
+     *   (no per-field binding). See {@link resolvedExternalErrors}.
+     *
+     * Either way the control renders the messages and the invalid state.
+     * Falls back to the `NgControl` `serverError` path when neither is
+     * present, so `ngModel`-based (v1) screens keep working unchanged.
+     */
+    readonly errors: _angular_core.InputSignal<string[]>;
+    /** Optional enclosing `[efServerErrors]` scope (auto-link by `name`). */
+    private readonly serverErrorsScope;
+    /**
+     * External (server) errors for this control, resolved reactively from
+     * either the explicit `[errors]` input (wins) or the enclosing
+     * `[efServerErrors]` scope keyed by `name`. A `computed` so reads inside
+     * the subclass `serverErrors` / `isInvalid` getters track the source
+     * signals under zoneless change detection.
+     */
+    readonly resolvedExternalErrors: _angular_core.Signal<string[]>;
+    protected readonly translateService: TranslateService;
+    /** Resolved DOM id. Always non-empty so `<label for>` and
+     *  `<input id>` can match unambiguously. */
+    get effectiveId(): string;
+    /** Translated placeholder (or empty string). */
+    get effectivePlaceholder(): string;
+    /**
+     * Resolved `aria-label` value — used when no visible label is
+     * rendered. Returns `null` (no attribute) when a visible label
+     * IS shown, since the visible label already serves as the
+     * accessible name and duplicate `aria-label` would override it.
+     */
+    get effectiveAriaLabel(): string | null;
+    /** Stable id for the error / hint container — wired through
+     *  `aria-describedby` on the input so screen readers announce
+     *  the validation message together with the field name. */
+    get errorsId(): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<AbstractEfFormControl, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<AbstractEfFormControl, "ng-component", never, { "inputId": { "alias": "inputId"; "required": false; "isSignal": true; }; "name": { "alias": "name"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "ariaLabelKey": { "alias": "ariaLabelKey"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "showClear": { "alias": "showClear"; "required": false; "isSignal": true; }; "errors": { "alias": "errors"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+declare class EfInputTextComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    size: 'small' | 'large';
+    type: string;
+    maxlength?: number;
+    fluid: boolean;
+    inline: boolean;
+    autocomplete?: string;
+    /** Clearable (showClear / canClear) is inherited from AbstractEfFormControl;
+     *  we only supply the value predicate + the reset. */
+    protected get hasValue(): boolean;
+    clearValue(): void;
+    /**
+     * Rendering variant — same dual-mode pattern as `ef-button`.
+     * - `'comptoir'` (default) — native `<input class="ef-input">` against
+     *                           the Comptoir pattern styles. Renders at the
+     *                           canonical `--hit-base` (40px) control height.
+     *                           Required for `prefix` / `suffix`.
+     * - `'primeng'`            — wraps `<input pInputText>` (v1). Opt in when
+     *                           you specifically need PrimeNG input behaviour.
+     * See ADR-009 for why comptoir is the height-consistent default.
+     */
+    variant: 'primeng' | 'comptoir';
+    /** Inline prefix addon — e.g. `'/p/'` for slugs, `'$'` for prices.
+     *  Renders only in the Comptoir variant; ignored otherwise. */
+    prefix?: string;
+    /** Inline suffix addon — e.g. `'MAD'`, `'cm'`. Renders only in the
+     *  Comptoir variant; ignored otherwise. */
+    suffix?: string;
+    get isInline(): boolean;
+    valueChangeEvent: EventEmitter<string>;
+    /** Two-way-bindable as `[value]` (one-way) or
+     *  `[(value)]="signal()"` (set + listen via `valueChangeEvent`). */
+    value: string;
+    private onChange;
+    private onTouched;
+    readonly ngControl: NgControl;
+    constructor();
+    get showRequired(): boolean;
+    get serverErrors(): string[] | null;
+    get isInvalid(): boolean;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleInput(value: string): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfInputTextComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfInputTextComponent, "ef-input-text", never, { "size": { "alias": "size"; "required": false; }; "type": { "alias": "type"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChangeEvent": "valueChangeEvent"; }, never, never, true, never>;
+    static ngAcceptInputType_fluid: unknown;
+    static ngAcceptInputType_inline: unknown;
+}
+
+/**
+ * Comptoir select — wraps PrimeNG `p-select` (single) or `p-multiselect`
+ * (multi) and skins it against the `.es` / `.es__panel` patterns lifted
+ * from the static prototype (`docs/ux-ui/erp/screens/components.html`,
+ * Section 04). All the heavy machinery (filter, virtual scroll, group
+ * support, keyboard nav, ARIA listbox semantics, RTL, focus trapping,
+ * lazy loading) comes from PrimeNG; we own only the visuals + the
+ * Elasticias API surface (i18n `*Key` inputs, `selectionChangeEvent`,
+ * `filterByKeys`, content-projected templates).
+ *
+ * The `'comptoir'` variant remains as a lite, no-deps escape hatch
+ * (native `<select>` styled via `.ef-select-native`); use the default
+ * `'primeng'` variant for any screen that needs filter / multi /
+ * group / templating.
+ *
+ * ```html
+ * <ef-select
+ *   labelKey="orders.status"
+ *   placeholderKey="orders.status_placeholder"
+ *   [(value)]="status"
+ *   [options]="statuses"
+ *   optionLabel="label" optionValue="code"
+ *   [filter]="true" [showClear]="true">
+ * </ef-select>
+ *
+ * <ef-select
+ *   labelKey="users.assigned"
+ *   [options]="users" optionLabel="name" optionValue="id"
+ *   [multiple]="true" [filter]="true">
+ *   <ng-template #item let-u>
+ *     <span class="av">{{ u.initials }}</span>
+ *     <span class="body">
+ *       <span class="nm">{{ u.name }}</span>
+ *       <span class="meta">{{ u.role }}</span>
+ *     </span>
+ *   </ng-template>
+ * </ef-select>
+ * ```
+ */
+declare class EfSelectComponent extends AbstractEfFormControl implements ControlValueAccessor, OnInit, OnChanges {
+    options: any[];
+    optionLabel: string;
+    optionValue?: string;
+    optionDisabled?: string;
+    /** Stable identity key — required for groups and virtual scroll. */
+    dataKey?: string;
+    /** Group mode — pair with `optionGroupLabel` + `optionGroupChildren`. */
+    group: boolean;
+    optionGroupLabel: string;
+    optionGroupChildren: string;
+    /** Control height. Default (undefined) = the canonical `--hit-base` (40px),
+     *  matching native inputs (ADR-009). `'small'` opts into the dense 32px
+     *  variant for compact contexts (e.g. table-row editors). */
+    size?: 'small' | 'large';
+    fluid: boolean;
+    inline: boolean;
+    appendTo?: string;
+    /** Multi-selection — internally swaps `<p-select>` for `<p-multiselect>`. */
+    multiple: boolean;
+    filter: boolean;
+    /** Filter the list against these option fields (string or csv).
+     *  PrimeNG default: `optionLabel`. */
+    filterBy?: string;
+    filterPlaceholder?: string;
+    filterPlaceholderKey?: string;
+    /** Auto-focus the filter input when the panel opens (default: true). */
+    autofocusFilter: boolean;
+    editable: boolean;
+    loading: boolean;
+    /** Virtual-scroll for long lists (>100 items). Pair with
+     *  `virtualScrollItemSize` (default 38px). */
+    virtualScroll: boolean;
+    virtualScrollItemSize: number;
+    scrollHeight: string;
+    /** Multi-select trigger display: `'chip'` (default — chips visible
+     *  in the trigger, individually removable) or `'comma'`. */
+    multiDisplay: 'chip' | 'comma';
+    /** Multi-select header "select all" toggle. Off by default — the
+     *  Comptoir multiselect leads with the filter; opt in when bulk
+     *  select-all is genuinely useful. */
+    showToggleAll: boolean;
+    emptyMessage?: string;
+    emptyMessageKey?: string;
+    emptyFilterMessage?: string;
+    emptyFilterMessageKey?: string;
+    styleClass?: string;
+    panelStyleClass?: string;
+    /** Filter options by matching key-value pairs (legacy Elasticias
+     *  helper — pre-filters `options` before they reach PrimeNG). */
     filterByKeys?: {
         [key: string]: any;
     };
+    /**
+     * Rendering variant.
+     * - `'primeng'` (default) — wraps `p-select` / `p-multiselect`, skinned with
+     *                           the `.es` / `.es__panel` patterns (the custom
+     *                           dropdown: filter, styled options, animated panel
+     *                           — see `components.html` Section 04). Also pinned
+     *                           to the canonical `--hit-base` (40px) trigger
+     *                           height (`.es.p-select { min-height: --hit-base }`),
+     *                           so it aligns with inputs/buttons in a row.
+     * - `'comptoir'`           — lite native `<select class="ef-select-native">`.
+     *                           No filter / panel / multi / templates; use it for
+     *                           inline / dense contexts that want the plain native
+     *                           control (e.g. table-row editors).
+     * The `.es` dropdown is the default per the design system; opt into
+     * `comptoir` only when a native control is specifically wanted. See ADR-009.
+     */
+    variant: 'primeng' | 'comptoir';
     get isInline(): boolean;
+    readonly hostClass = true;
     itemTemplate: TemplateRef<any> | null;
     selectedItemTemplate: TemplateRef<any> | null;
+    groupTemplate: TemplateRef<any> | null;
+    headerTemplate: TemplateRef<any> | null;
+    footerTemplate: TemplateRef<any> | null;
+    emptyTemplate: TemplateRef<any> | null;
+    emptyFilterTemplate: TemplateRef<any> | null;
+    filterTemplate: TemplateRef<any> | null;
+    loaderTemplate: TemplateRef<any> | null;
     selectionChangeEvent: EventEmitter<any>;
+    filterChangeEvent: EventEmitter<string>;
+    panelShowEvent: EventEmitter<void>;
+    panelHideEvent: EventEmitter<void>;
+    /** Two-way-bindable as `[value]` (one-way) or
+     *  `[(value)]` (set + listen via `selectionChangeEvent`). */
     value: any;
     filteredOptions: any[];
     private onChange;
@@ -990,10 +2896,17 @@ declare class EfSelectComponent implements ControlValueAccessor, OnInit, OnChang
     /** Resolved lazily in ngOnInit to avoid circular DI with NG_VALUE_ACCESSOR */
     ngControl: NgControl | null;
     private readonly injector;
-    private readonly translateService;
     ngOnInit(): void;
-    get effectivePlaceholder(): string;
-    get effectiveId(): string;
+    /** Translated filter placeholder. Falls back to a generic key, then
+     *  to "Search…" so it always renders something readable. */
+    get effectiveFilterPlaceholder(): string;
+    get effectiveEmptyMessage(): string;
+    get effectiveEmptyFilterMessage(): string;
+    /** Always include `.es` so the global Comptoir skin in
+     *  `_patterns.scss` always finds a hook, regardless of what the
+     *  consumer passes via `styleClass`. */
+    get effectiveStyleClass(): string;
+    get effectivePanelStyleClass(): string;
     get showRequired(): boolean;
     get serverErrors(): string[] | null;
     get isInvalid(): boolean;
@@ -1007,49 +2920,134 @@ declare class EfSelectComponent implements ControlValueAccessor, OnInit, OnChang
         value: any;
     }): void;
     handleClear(): void;
+    handleFilter(event: {
+        originalEvent?: Event;
+        filter: string;
+    }): void;
+    handlePanelShow(): void;
+    handlePanelHide(): void;
+    /** Comptoir variant — native `<select>` change handler. The empty
+     *  string from the placeholder option becomes `null`; otherwise we
+     *  resolve the value through `optionValue` if provided. */
+    handleNativeSelectChange(rawValue: string): void;
     private applyFilters;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSelectComponent, "ef-select", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; }; "size": { "alias": "size"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "filterByKeys": { "alias": "filterByKeys"; "required": false; }; }, { "selectionChangeEvent": "selectionChangeEvent"; }, ["itemTemplate", "selectedItemTemplate"], never, true, never>;
-    static ngAcceptInputType_required: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSelectComponent, "ef-select", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "optionDisabled": { "alias": "optionDisabled"; "required": false; }; "dataKey": { "alias": "dataKey"; "required": false; }; "group": { "alias": "group"; "required": false; }; "optionGroupLabel": { "alias": "optionGroupLabel"; "required": false; }; "optionGroupChildren": { "alias": "optionGroupChildren"; "required": false; }; "size": { "alias": "size"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "appendTo": { "alias": "appendTo"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "filter": { "alias": "filter"; "required": false; }; "filterBy": { "alias": "filterBy"; "required": false; }; "filterPlaceholder": { "alias": "filterPlaceholder"; "required": false; }; "filterPlaceholderKey": { "alias": "filterPlaceholderKey"; "required": false; }; "autofocusFilter": { "alias": "autofocusFilter"; "required": false; }; "editable": { "alias": "editable"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "virtualScroll": { "alias": "virtualScroll"; "required": false; }; "virtualScrollItemSize": { "alias": "virtualScrollItemSize"; "required": false; }; "scrollHeight": { "alias": "scrollHeight"; "required": false; }; "multiDisplay": { "alias": "multiDisplay"; "required": false; }; "showToggleAll": { "alias": "showToggleAll"; "required": false; }; "emptyMessage": { "alias": "emptyMessage"; "required": false; }; "emptyMessageKey": { "alias": "emptyMessageKey"; "required": false; }; "emptyFilterMessage": { "alias": "emptyFilterMessage"; "required": false; }; "emptyFilterMessageKey": { "alias": "emptyFilterMessageKey"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "panelStyleClass": { "alias": "panelStyleClass"; "required": false; }; "filterByKeys": { "alias": "filterByKeys"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "selectionChangeEvent": "selectionChangeEvent"; "filterChangeEvent": "filterChangeEvent"; "panelShowEvent": "panelShowEvent"; "panelHideEvent": "panelHideEvent"; }, ["itemTemplate", "selectedItemTemplate", "groupTemplate", "headerTemplate", "footerTemplate", "emptyTemplate", "emptyFilterTemplate", "filterTemplate", "loaderTemplate"], never, true, never>;
+    static ngAcceptInputType_group: unknown;
     static ngAcceptInputType_fluid: unknown;
     static ngAcceptInputType_inline: unknown;
+    static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_filter: unknown;
-    static ngAcceptInputType_showClear: unknown;
-    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_autofocusFilter: unknown;
+    static ngAcceptInputType_editable: unknown;
+    static ngAcceptInputType_loading: unknown;
+    static ngAcceptInputType_virtualScroll: unknown;
+    static ngAcceptInputType_showToggleAll: unknown;
 }
 
-declare class EfCheckboxComponent implements ControlValueAccessor {
-    /** Direct label text (not translated) */
-    label?: string;
-    /** Translation key — takes priority over label */
-    labelKey?: string;
-    inputId?: string;
-    name?: string;
+/**
+ * Comptoir checkbox.
+ *
+ * Two render variants share the same API:
+ * - `'primeng'` (default) — wraps `p-checkbox`. Stock PrimeNG visuals.
+ * - `'comptoir'`          — native `<input type="checkbox">` styled
+ *   against `.ef-checkbox-native`. Lean, no animation, fits dense
+ *   grids (variants table, role / permission lists, etc.).
+ *
+ * Identity / label / aria / required / readonly / disabled inherited
+ * from `AbstractEfFormControl`. `binary` flips between boolean mode
+ * (`checked: true/false`) and value-mode (`checked` is the bound
+ * value when ticked, `null` when unticked) — the latter pairs with
+ * a parent NgModel array for multi-select scenarios.
+ *
+ * ```html
+ * <ef-checkbox
+ *   labelKey="catalog.is_active"
+ *   variant="comptoir"
+ *   [(checked)]="variant.isActive"
+ *   binary />
+ * ```
+ */
+declare class EfCheckboxComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    /** Underlying checkbox value when ticked (non-binary mode). */
     value?: any;
+    /** Binary mode — checked becomes a boolean rather than the
+     *  `value` input. Default for new code. */
     binary: boolean;
-    required: boolean;
-    disabled: boolean;
+    /**
+     * Render variant.
+     * - `'primeng'` (default) — wraps `p-checkbox`.
+     * - `'comptoir'`          — native `<input type="checkbox">`
+     *                           styled against `.ef-checkbox-native`.
+     */
+    variant: 'primeng' | 'comptoir';
+    /** Two-way bindable `[(checked)]`. */
     checked: any;
+    checkedChange: EventEmitter<any>;
     private onChange;
     private onTouched;
     readonly ngControl: NgControl;
     constructor();
-    get effectiveId(): string;
-    get effectiveLabel(): string | undefined;
     get showRequired(): boolean;
     get serverErrors(): string[] | null;
+    get isInvalid(): boolean;
     writeValue(value: any): void;
     registerOnChange(fn: (value: any) => void): void;
     registerOnTouched(fn: () => void): void;
     setDisabledState(isDisabled: boolean): void;
+    /** Handler for PrimeNG's onChange event. */
     handleChange(event: any): void;
+    /** Handler for the native checkbox change event (Comptoir variant). */
+    handleNativeChange(rawChecked: boolean): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfCheckboxComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfCheckboxComponent, "ef-checkbox", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "binary": { "alias": "binary"; "required": false; }; "required": { "alias": "required"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfCheckboxComponent, "ef-checkbox", never, { "value": { "alias": "value"; "required": false; }; "binary": { "alias": "binary"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
     static ngAcceptInputType_binary: unknown;
-    static ngAcceptInputType_required: unknown;
-    static ngAcceptInputType_disabled: unknown;
 }
 
+/**
+ * Comptoir toggle switch — wraps `p-toggleswitch`, boolean-only.
+ *
+ * Identity / label / aria / required / readonly / disabled inherited
+ * from `AbstractEfFormControl`. Use for on/off state that applies
+ * immediately (row activation toggles, settings), `ef-checkbox` for
+ * form fields that are saved with the enclosing form.
+ *
+ * ```html
+ * <ef-toggleswitch
+ *   [checked]="row.isActive"
+ *   [disabled]="!context.hasEditPermission"
+ *   ariaLabelKey="sales_clients_toggle_active_aria"
+ *   (checkedChange)="setActive(row, $event)" />
+ * ```
+ */
+declare class EfToggleSwitchComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    /** Two-way bindable `[(checked)]` — boolean only. */
+    checked: boolean;
+    checkedChange: EventEmitter<boolean>;
+    private onChange;
+    private onTouched;
+    readonly ngControl: NgControl;
+    constructor();
+    writeValue(value: unknown): void;
+    registerOnChange(fn: (value: boolean) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleChange(event: {
+        checked: boolean;
+    }): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfToggleSwitchComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfToggleSwitchComponent, "ef-toggleswitch", never, { "checked": { "alias": "checked"; "required": false; }; }, { "checkedChange": "checkedChange"; }, never, never, true, never>;
+}
+
+/**
+ * @deprecated Wraps PrimeNG `p-datepicker`, which does not follow the
+ * Comptoir design system. Prefer `ef-datepicker-advanced` in **field
+ * mode** (`mode="field"`, `selectionMode="single" | "range"`) — it is a
+ * Comptoir-native form control (ControlValueAccessor) with the same
+ * `[(ngModel)]` / `formControlName` binding and a `Date` / `[start, end]`
+ * value shape. This wrapper is kept only for legacy V1 screens and will
+ * be removed once they are migrated.
+ */
 declare class EfDatepickerComponent implements ControlValueAccessor {
     label?: string;
     labelKey?: string;
@@ -1101,15 +3099,42 @@ declare class EfDatepickerComponent implements ControlValueAccessor {
     static ngAcceptInputType_showButtonBar: unknown;
 }
 
-declare class EfInputNumberComponent implements ControlValueAccessor {
+/**
+ * Comptoir number input.
+ *
+ * Two render variants share the same API:
+ * - `'comptoir'` (default) — native `<input type="text" inputmode="decimal">`
+ *   styled against `.ef-input` / `.ef-input-group`. Lean, no locale
+ *   formatting on display, but data entry accepts both `,` and `.` as
+ *   the decimal separator (fr-MA users type commas) and ignores
+ *   space group separators; pair with `suffix="MAD"` for unit display
+ *   in dense grids (variants table, inventory adjustments, etc.).
+ *   See ADR-009.
+ * - `'primeng'`            — wraps `p-inputnumber`. Full locale-aware
+ *   currency / decimal formatting, stepper buttons, prefix / suffix.
+ *
+ * Identity / label / placeholder / aria / required / readonly /
+ * disabled are inherited from `AbstractEfFormControl`.
+ *
+ * ```html
+ * <ef-inputnumber
+ *   labelKey="catalog.price"
+ *   variant="primeng"
+ *   mode="currency" currency="MAD" locale="fr-MA"
+ *   [(value)]="variant.price" />
+ *
+ * <ef-inputnumber
+ *   labelKey="catalog.inventory"
+ *   variant="comptoir"
+ *   [showButtons]="true" buttonLayout="horizontal"
+ *   [min]="0" [step]="1"
+ *   [(value)]="variant.inventoryQuantity" />
+ * ```
+ */
+declare class EfInputNumberComponent extends AbstractEfFormControl implements ControlValueAccessor {
     inputNumber?: InputNumber;
-    label?: string;
-    labelKey?: string;
-    required: boolean;
     value?: Nullable<number>;
     invalid: boolean;
-    disabled?: boolean;
-    readonly: boolean;
     format: boolean;
     showButtons: boolean;
     buttonLayout: 'stacked' | 'horizontal' | 'vertical';
@@ -1130,49 +3155,56 @@ declare class EfInputNumberComponent implements ControlValueAccessor {
     min?: number;
     max?: number;
     step: number;
-    allowEmpty: boolean;
-    inputId?: string;
-    name?: string;
-    placeholder?: string;
-    placeholderKey?: string;
+    allowEmpty: boolean;
     inputSize?: number;
+    /** Default (undefined) = canonical `--hit-base` (40px); `'small'` = dense 32px. */
     size?: 'small' | 'large';
     maxlength?: number;
     minlength?: number;
     pattern?: string;
     tabindex?: number;
     title?: string;
-    ariaLabel?: string;
     ariaLabelledBy?: string;
-    ariaDescribedBy?: string;
-    ariaRequired?: boolean;
     inputStyle?: any;
     inputStyleClass?: string;
     style?: any;
     styleClass?: string;
-    showClear: boolean;
-    variant?: 'filled' | 'outlined';
-    autofocus?: boolean;
+    /** PrimeNG visual variant (`'filled'` | `'outlined'`) — only
+     *  honored when {@link variant} === 'primeng'. */
+    primeNgVariant?: 'filled' | 'outlined';
+    autofocus: boolean;
     autocomplete?: string;
-    fluid?: boolean;
+    fluid: boolean;
     inline: boolean;
+    /**
+     * Render variant.
+     * - `'comptoir'` (default) — native `<input type="text" inputmode="decimal">`
+     *                           styled against `.ef-input` / `.ef-input-group`,
+     *                           at the canonical `--hit-base` (40px) height.
+     *                           Accepts `,` and `.` as decimal separator.
+     * - `'primeng'`            — wraps `p-inputnumber`. Opt in for PrimeNG's
+     *                           formatted stepper behaviour.
+     * See ADR-009 for why comptoir is the height-consistent default.
+     */
+    variant: 'primeng' | 'comptoir';
     get isInline(): boolean;
     pt?: any;
     ptOptions?: any;
     dt?: any;
     unstyled?: boolean;
     inputEvent: EventEmitter<InputNumberInputEvent>;
+    valueChangeEvent: EventEmitter<number | null>;
     focusEvent: EventEmitter<Event>;
     blurEvent: EventEmitter<Event>;
     keyDownEvent: EventEmitter<KeyboardEvent>;
     clearEvent: EventEmitter<void>;
+    /** A number field is clearable when it holds any value (including 0). */
+    protected get hasValue(): boolean;
+    clearValue(): void;
     private onChange;
     private onTouched;
     readonly ngControl: NgControl;
-    private readonly translateService;
     constructor();
-    get effectivePlaceholder(): string;
-    get effectiveId(): string;
     get showRequired(): boolean;
     get serverErrors(): string[] | null;
     get isInvalid(): boolean;
@@ -1181,6 +3213,30 @@ declare class EfInputNumberComponent implements ControlValueAccessor {
     registerOnTouched(fn: any): void;
     setDisabledState(isDisabled: boolean): void;
     handleInput(event: InputNumberInputEvent): void;
+    /** Comptoir native input handler — the text input emits a raw
+     *  string; normalize + coerce to number or null (empty / invalid). */
+    handleNativeInput(raw: string): void;
+    /**
+     * Parses comptoir free-text numeric entry.
+     *
+     * fr-MA users type commas as the decimal separator (`23,50`), while
+     * `Number()` only understands `.` — so a comma is normalized to a
+     * dot before parsing, and spaces (JS `\s` covers NBSP / narrow-NBSP
+     * group separators) are stripped. Both `23,50` and `23.50` parse to
+     * 23.5; unparseable text yields `null` (existing empty semantics).
+     */
+    private parseComptoirValue;
+    /**
+     * Blur-time clamp for the comptoir variant. The native input no
+     * longer carries `min` / `max` attributes (it's `type="text"`), so
+     * range enforcement — previously only advisory on `type="number"`
+     * anyway — happens here, and the field text is re-synced to the
+     * canonical parsed value (e.g. a dangling `23,` becomes `23`).
+     */
+    private clampAndReflect;
+    /** Comptoir stepper buttons handler — bumps `value` by `step`,
+     *  clamped to `min` / `max`. */
+    step$(direction: 1 | -1): void;
     handleFocus(event: Event): void;
     handleBlur(event: Event): void;
     handleKeyDown(event: KeyboardEvent): void;
@@ -1188,20 +3244,14 @@ declare class EfInputNumberComponent implements ControlValueAccessor {
     focus(): void;
     clear(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfInputNumberComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfInputNumberComponent, "ef-inputnumber", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "format": { "alias": "format"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; }; "incrementButtonClass": { "alias": "incrementButtonClass"; "required": false; }; "decrementButtonClass": { "alias": "decrementButtonClass"; "required": false; }; "incrementButtonIcon": { "alias": "incrementButtonIcon"; "required": false; }; "decrementButtonIcon": { "alias": "decrementButtonIcon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "useGrouping": { "alias": "useGrouping"; "required": false; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; }; "inputSize": { "alias": "inputSize"; "required": false; }; "size": { "alias": "size"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "title": { "alias": "title"; "required": false; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "ariaDescribedBy": { "alias": "ariaDescribedBy"; "required": false; }; "ariaRequired": { "alias": "ariaRequired"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "pt": { "alias": "pt"; "required": false; }; "ptOptions": { "alias": "ptOptions"; "required": false; }; "dt": { "alias": "dt"; "required": false; }; "unstyled": { "alias": "unstyled"; "required": false; }; }, { "inputEvent": "inputEvent"; "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "keyDownEvent": "keyDownEvent"; "clearEvent": "clearEvent"; }, never, never, true, never>;
-    static ngAcceptInputType_required: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfInputNumberComponent, "ef-inputnumber", never, { "value": { "alias": "value"; "required": false; }; "invalid": { "alias": "invalid"; "required": false; }; "format": { "alias": "format"; "required": false; }; "showButtons": { "alias": "showButtons"; "required": false; }; "buttonLayout": { "alias": "buttonLayout"; "required": false; }; "incrementButtonClass": { "alias": "incrementButtonClass"; "required": false; }; "decrementButtonClass": { "alias": "decrementButtonClass"; "required": false; }; "incrementButtonIcon": { "alias": "incrementButtonIcon"; "required": false; }; "decrementButtonIcon": { "alias": "decrementButtonIcon"; "required": false; }; "prefix": { "alias": "prefix"; "required": false; }; "suffix": { "alias": "suffix"; "required": false; }; "currency": { "alias": "currency"; "required": false; }; "currencyDisplay": { "alias": "currencyDisplay"; "required": false; }; "locale": { "alias": "locale"; "required": false; }; "localeMatcher": { "alias": "localeMatcher"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "useGrouping": { "alias": "useGrouping"; "required": false; }; "minFractionDigits": { "alias": "minFractionDigits"; "required": false; }; "maxFractionDigits": { "alias": "maxFractionDigits"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "step": { "alias": "step"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "inputSize": { "alias": "inputSize"; "required": false; }; "size": { "alias": "size"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "minlength": { "alias": "minlength"; "required": false; }; "pattern": { "alias": "pattern"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "title": { "alias": "title"; "required": false; }; "ariaLabelledBy": { "alias": "ariaLabelledBy"; "required": false; }; "inputStyle": { "alias": "inputStyle"; "required": false; }; "inputStyleClass": { "alias": "inputStyleClass"; "required": false; }; "style": { "alias": "style"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; "primeNgVariant": { "alias": "primeNgVariant"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "pt": { "alias": "pt"; "required": false; }; "ptOptions": { "alias": "ptOptions"; "required": false; }; "dt": { "alias": "dt"; "required": false; }; "unstyled": { "alias": "unstyled"; "required": false; }; }, { "inputEvent": "inputEvent"; "valueChangeEvent": "valueChangeEvent"; "focusEvent": "focusEvent"; "blurEvent": "blurEvent"; "keyDownEvent": "keyDownEvent"; "clearEvent": "clearEvent"; }, never, never, true, never>;
+    static ngAcceptInputType_showButtons: unknown;
+    static ngAcceptInputType_autofocus: unknown;
     static ngAcceptInputType_inline: unknown;
 }
 
-declare class EfPasswordComponent implements ControlValueAccessor {
-    label?: string;
-    labelKey?: string;
-    inputId?: string;
-    name?: string;
-    placeholder?: string;
-    placeholderKey?: string;
-    size: 'small' | 'large';
-    required: boolean;
+declare class EfPasswordComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    size?: 'small' | 'large';
     fluid: boolean;
     inline: boolean;
     toggleMask: boolean;
@@ -1210,17 +3260,16 @@ declare class EfPasswordComponent implements ControlValueAccessor {
     get isInline(): boolean;
     valueChangeEvent: EventEmitter<string>;
     value: string;
-    disabled: boolean;
     private onChange;
     private onTouched;
     readonly ngControl: NgControl;
-    private readonly translateService;
     constructor();
-    get effectivePlaceholder(): string;
-    get effectiveId(): string;
     get showRequired(): boolean;
     get serverErrors(): string[] | null;
     get isInvalid(): boolean;
+    /** Clearable hooks (showClear / canClear inherited from the base). */
+    protected get hasValue(): boolean;
+    clearValue(): void;
     writeValue(value: string): void;
     registerOnChange(fn: (value: string) => void): void;
     registerOnTouched(fn: () => void): void;
@@ -1228,34 +3277,24 @@ declare class EfPasswordComponent implements ControlValueAccessor {
     handleChange(value: string): void;
     handleBlur(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPasswordComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPasswordComponent, "ef-password", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "inputId": { "alias": "inputId"; "required": false; }; "name": { "alias": "name"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; }; "size": { "alias": "size"; "required": false; }; "required": { "alias": "required"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "toggleMask": { "alias": "toggleMask"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; }, { "valueChangeEvent": "valueChangeEvent"; }, never, never, true, never>;
-    static ngAcceptInputType_required: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPasswordComponent, "ef-password", never, { "size": { "alias": "size"; "required": false; }; "fluid": { "alias": "fluid"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; "toggleMask": { "alias": "toggleMask"; "required": false; }; "feedback": { "alias": "feedback"; "required": false; }; "autocomplete": { "alias": "autocomplete"; "required": false; }; }, { "valueChangeEvent": "valueChangeEvent"; }, never, never, true, never>;
     static ngAcceptInputType_fluid: unknown;
     static ngAcceptInputType_inline: unknown;
     static ngAcceptInputType_toggleMask: unknown;
     static ngAcceptInputType_feedback: unknown;
 }
 
-declare class EfMultiSelectComponent implements ControlValueAccessor, OnChanges {
+declare class EfMultiSelectComponent extends AbstractEfFormControl implements ControlValueAccessor, OnChanges {
     changeEvent: EventEmitter<string[]>;
-    label?: string;
-    labelKey?: string;
-    id: string;
-    name: string;
     optionLabel: string;
     optionValue: string;
     options: any;
     filteredOptions: any;
     maxSelectedLabels: number;
-    disabled: boolean;
     display: 'comma' | 'chip';
     size: 'large' | 'small';
     selectionLimit: any;
     filters: any;
-    placeholder: string;
-    placeholderKey?: string;
-    showClear: boolean;
-    required: boolean;
     inline: boolean;
     get isInline(): boolean;
     get isRequired(): boolean;
@@ -1263,9 +3302,7 @@ declare class EfMultiSelectComponent implements ControlValueAccessor, OnChanges
     private propagateChange;
     private propagateTouched;
     readonly ngControl: NgControl;
-    private readonly translateService;
     constructor();
-    get effectivePlaceholder(): string;
     get showRequired(): boolean;
     get serverErrors(): string[] | null;
     writeValue(value: string[]): void;
@@ -1277,22 +3314,16 @@ declare class EfMultiSelectComponent implements ControlValueAccessor, OnChanges
     ngOnChanges(): void;
     private applyFilters;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfMultiSelectComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfMultiSelectComponent, "ef-multi-select", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "options": { "alias": "options"; "required": false; }; "filteredOptions": { "alias": "filteredOptions"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "display": { "alias": "display"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selectionLimit": { "alias": "selectionLimit"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; }; "showClear": { "alias": "showClear"; "required": false; }; "required": { "alias": "required"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, never, true, never>;
-    static ngAcceptInputType_showClear: unknown;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfMultiSelectComponent, "ef-multi-select", never, { "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "options": { "alias": "options"; "required": false; }; "filteredOptions": { "alias": "filteredOptions"; "required": false; }; "maxSelectedLabels": { "alias": "maxSelectedLabels"; "required": false; }; "display": { "alias": "display"; "required": false; }; "size": { "alias": "size"; "required": false; }; "selectionLimit": { "alias": "selectionLimit"; "required": false; }; "filters": { "alias": "filters"; "required": false; }; "inline": { "alias": "inline"; "required": false; }; }, { "changeEvent": "changeEvent"; }, never, never, true, never>;
     static ngAcceptInputType_inline: unknown;
 }
 
-declare class EfSelectButtonComponent implements ControlValueAccessor {
-    /** Direct label text above the selectbutton (not translated) */
-    label?: string;
-    /** Translation key for label — takes priority over label */
-    labelKey?: string;
+declare class EfSelectButtonComponent extends AbstractEfFormControl implements ControlValueAccessor {
     options: any[];
     optionLabel: string;
     optionValue: string;
     multiple: boolean;
     allowEmpty: boolean;
-    disabled: boolean;
     size: 'small' | 'large';
     styleClass?: string;
     itemTemplate?: TemplateRef<any>;
@@ -1307,10 +3338,9 @@ declare class EfSelectButtonComponent implements ControlValueAccessor {
     setDisabledState(isDisabled: boolean): void;
     handleChange(event: any): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSelectButtonComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSelectButtonComponent, "ef-selectbutton", never, { "label": { "alias": "label"; "required": false; }; "labelKey": { "alias": "labelKey"; "required": false; }; "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "size": { "alias": "size"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; }, {}, ["itemTemplate"], never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSelectButtonComponent, "ef-selectbutton", never, { "options": { "alias": "options"; "required": false; }; "optionLabel": { "alias": "optionLabel"; "required": false; }; "optionValue": { "alias": "optionValue"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "allowEmpty": { "alias": "allowEmpty"; "required": false; }; "size": { "alias": "size"; "required": false; }; "styleClass": { "alias": "styleClass"; "required": false; }; }, {}, ["itemTemplate"], never, true, never>;
     static ngAcceptInputType_multiple: unknown;
     static ngAcceptInputType_allowEmpty: unknown;
-    static ngAcceptInputType_disabled: unknown;
 }
 
 /**
@@ -1749,6 +3779,1033 @@ declare class EfDatatableActionBarComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDatatableActionBarComponent, "ef-datatable-actionbar", never, { "context": { "alias": "context"; "required": false; }; "state": { "alias": "state"; "required": false; }; "duplicateButton": { "alias": "duplicateButton"; "required": false; }; "editButton": { "alias": "editButton"; "required": false; }; "deleteButton": { "alias": "deleteButton"; "required": false; }; }, { "duplicate": "duplicate"; "edit": "edit"; "delete": "delete"; }, never, never, true, never>;
 }
 
+/**
+ * Declarative row-action item consumed by `ef-row-actions`.
+ *
+ * The component renders a native Comptoir-styled popup (no PrimeNG
+ * Menu) so the design — kbd hint, danger tone, divider, ink-active
+ * trigger when open — matches the prototype 1:1.
+ *
+ * Use `command` for actions, `separator: true` for a divider line.
+ */
+interface EfRowAction {
+    /** Stable identifier for trackBy / tests. */
+    id?: string;
+    /** Translation key — preferred. */
+    labelKey?: string;
+    /** Direct label — used only when `labelKey` is empty. */
+    label?: string;
+    /** PrimeIcons class (e.g. `'pi pi-pencil'`). */
+    icon?: string;
+    /** Optional keyboard-shortcut hint shown right-aligned (e.g. `'↵'`, `'E'`, `'⌘D'`). */
+    kbd?: string;
+    /** Tone: `'danger'` styles destructive items in the cancelled palette. */
+    severity?: 'default' | 'danger';
+    /** Render a divider in this slot — all other fields ignored. */
+    separator?: boolean;
+    /** Disable without removing. */
+    disabled?: boolean;
+    /**
+     * Hide the item explicitly. Combined with `permission` and any
+     * caller-supplied filter; defaults to `true` (visible).
+     */
+    visible?: boolean;
+    /**
+     * If set, the item is hidden unless the bound `ScreenContext`
+     * grants this permission. Items with no `permission` always show.
+     */
+    permission?: Permissions;
+    /** Click handler. The container handles closing the popup. */
+    command?: () => void;
+}
+
+/** Action identifier emitted by `ef-data-card`'s auto row-actions cell. */
+type EfDataCardRowAction = 'view' | 'edit' | 'duplicate' | 'delete';
+/**
+ * Comptoir data card — column-driven `.tbl-wrap` with header (count
+ * info + actions) and integrated pager.
+ *
+ * Two consumer surfaces:
+ * 1. **Columns + rows + templates** (preferred): declare columns in
+ *    TS as `EfDataCardColumn[]`, project body / header templates via
+ *    `*efColumnTemplate` / `*efColumnHeaderTemplate` for cells that
+ *    need rich HTML. Built-in cell renderers handle text / number /
+ *    money / date / datetime / boolean / mono / chip / reference.
+ * 2. **`tbl-head-info` / `tbl-head-actions` slots**: still projected
+ *    so the consumer can render the count text + density / columns /
+ *    view-toggle buttons next to the table header.
+ *
+ * ```html
+ * <ef-data-card
+ *   [columns]="cols"
+ *   [rows]="orders()"
+ *   [pageNumber]="criteria().pagination.pageNumber"
+ *   [pageSize]="criteria().pagination.pageSize"
+ *   [totalCount]="totalCount()"
+ *   [loading]="loading()"
+ *   [sort]="currentSort()"
+ *   (pageChange)="setPage($event)"
+ *   (sortChange)="setSort($event.field, $event.direction)"
+ *   trackByField="id"
+ * >
+ *   <span tbl-head-info>…count…</span>
+ *
+ *   <ng-template efColumnTemplate="status" let-row>
+ *     <span class="chip" [class]="'chip chip-' + row.status">…</span>
+ *   </ng-template>
+ * </ef-data-card>
+ * ```
+ */
+declare class EfDataCardComponent<TRow = any> implements AfterContentInit {
+    private readonly refDataService;
+    readonly columns: _angular_core.InputSignal<readonly EfDataCardColumn[]>;
+    readonly rows: _angular_core.InputSignal<readonly TRow[]>;
+    /** Field path on each row used as the trackBy key. */
+    readonly trackByField: _angular_core.InputSignal<string>;
+    readonly pageNumber: _angular_core.InputSignal<number>;
+    readonly pageSize: _angular_core.InputSignal<number>;
+    readonly totalCount: _angular_core.InputSignal<number>;
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    readonly hidePager: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Currently active sort. Header click toggles asc / desc. */
+    readonly sort: _angular_core.InputSignal<EfDataCardSort>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Empty string = no error. Non-empty triggers an error chip in tbl-head. */
+    readonly errorMsg: _angular_core.InputSignal<string>;
+    readonly loadingKey: _angular_core.InputSignal<string>;
+    /**
+     * When `true`, double-clicking anywhere on a `<tr>` emits the row
+     * via `rowDoubleClick` and the body rows render with
+     * `cursor: pointer`. Consumers typically wire the output to
+     * `navigateToDetails(row.id)` from {@link AbstractSearchScreenV2}.
+     *
+     * Double-clicks that originate inside an interactive child
+     * (checkbox, button, link, form control) are ignored — those keep
+     * their native behaviour (toggle selection, run an action, …).
+     */
+    readonly rowDoubleClickable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hasActionsColumn: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly rowActionsContext: _angular_core.InputSignal<ScreenContext>;
+    readonly showViewAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showEditAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showDuplicateAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly showDeleteAction: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    readonly sortChange: _angular_core.OutputEmitterRef<EfDataCardSort>;
+    readonly rowDoubleClick: _angular_core.OutputEmitterRef<TRow>;
+    /** Emitted by the auto row-actions cell — `{ action, row }`. */
+    readonly rowAction: _angular_core.OutputEmitterRef<{
+        action: EfDataCardRowAction;
+        row: TRow;
+    }>;
+    private readonly bodyTemplates;
+    private readonly headerTemplates;
+    private readonly bodyTemplateMap;
+    private readonly headerTemplateMap;
+    ngAfterContentInit(): void;
+    /** Columns enriched with effective alignment / sortField defaults
+     *  + the auto `'actions'` column when `[hasActionsColumn]` is on
+     *  and the consumer hasn't declared one already. */
+    readonly effectiveColumns: _angular_core.Signal<readonly EfDataCardColumn[]>;
+    /** Items array for the auto row-actions cell. Rebuilt per call so
+     *  the ef-row-actions component receives a fresh closure per row.
+     *  Visibility is filtered later by ef-row-actions against
+     *  `rowActionsContext` (ScreenContext.isGranted). */
+    defaultRowActions(row: TRow): ReadonlyArray<EfRowAction>;
+    bodyTemplate(columnId: string): TemplateRef<unknown> | undefined;
+    headerTemplate(columnId: string): TemplateRef<unknown> | undefined;
+    /** Pluck `column.field` (or `column.id`) from a row, dotted-path safe. */
+    cellValue(row: TRow, col: EfDataCardColumn): unknown;
+    headerAlignClass(col: EfDataCardColumn): string;
+    cellAlignClass(col: EfDataCardColumn): string;
+    /** Sort indicator: '↑' / '↓' / '' for the given column. */
+    sortIndicator(col: EfDataCardColumn): string;
+    /**
+     * Resolve a reference cell — looks up the row's value in
+     * `referenceKey`, finds the entry where
+     * `entry[referenceValueField] === value`, returns
+     * `entry[referenceLabelField]`. Falls back to the raw value when
+     * no match is found.
+     */
+    resolveReference(value: unknown, col: EfDataCardColumn): string;
+    /** Build an Angular DigitInfo string from min/max fraction-digit hints. */
+    numberFormat(col: EfDataCardColumn): string;
+    /** Tracks how many `ef-row-actions` are currently open inside this
+     *  card. When > 0, `.tbl-wrap` lifts its `overflow: hidden` so the
+     *  popup can escape its rounded edges. */
+    readonly openMenuCount: _angular_core.WritableSignal<number>;
+    onRowActionsToggle(event: Event): void;
+    /** Fires `rowDoubleClick` unless the dblclick originated on an
+     *  interactive child (checkbox, button, link, form control). */
+    onRowDoubleClick(row: TRow, event: MouseEvent): void;
+    onHeaderClick(col: EfDataCardColumn): void;
+    trackByRow: (_: number, row: TRow) => unknown;
+    trackByColumn: (_: number, col: EfDataCardColumn) => string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDataCardComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDataCardComponent<any>, "ef-data-card", never, { "columns": { "alias": "columns"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "trackByField": { "alias": "trackByField"; "required": false; "isSignal": true; }; "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "hidePager": { "alias": "hidePager"; "required": false; "isSignal": true; }; "sort": { "alias": "sort"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "errorMsg": { "alias": "errorMsg"; "required": false; "isSignal": true; }; "loadingKey": { "alias": "loadingKey"; "required": false; "isSignal": true; }; "rowDoubleClickable": { "alias": "rowDoubleClickable"; "required": false; "isSignal": true; }; "hasActionsColumn": { "alias": "hasActionsColumn"; "required": false; "isSignal": true; }; "rowActionsContext": { "alias": "rowActionsContext"; "required": false; "isSignal": true; }; "showViewAction": { "alias": "showViewAction"; "required": false; "isSignal": true; }; "showEditAction": { "alias": "showEditAction"; "required": false; "isSignal": true; }; "showDuplicateAction": { "alias": "showDuplicateAction"; "required": false; "isSignal": true; }; "showDeleteAction": { "alias": "showDeleteAction"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "sortChange": "sortChange"; "rowDoubleClick": "rowDoubleClick"; "rowAction": "rowAction"; }, ["bodyTemplates", "headerTemplates"], ["[tbl-head-info]", "[tbl-head-actions]", "[empty-state]"], true, never>;
+}
+
+/**
+ * Marks an `<ng-template>` as the body cell renderer for a given
+ * column id on `<ef-data-card>`.
+ *
+ * ```html
+ * <ng-template efColumnTemplate="status" let-row let-col="col">
+ *   <span class="chip" [class]="'chip chip-' + row.status">…</span>
+ * </ng-template>
+ * ```
+ *
+ * Context:
+ *   - `$implicit` — the row data
+ *   - `col` — the column config (`EfDataCardColumn`)
+ *   - `index` — the row index in the current page
+ */
+declare class EfColumnTemplateDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    columnId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfColumnTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfColumnTemplateDirective, "[efColumnTemplate]", never, { "columnId": { "alias": "efColumnTemplate"; "required": true; }; }, {}, never, never, true, never>;
+}
+/**
+ * Marks an `<ng-template>` as the **header** cell renderer for a
+ * given column id. Use this when the header needs richer markup
+ * than a translated string (e.g. a select-all checkbox).
+ *
+ * ```html
+ * <ng-template efColumnHeaderTemplate="select">
+ *   <input type="checkbox" class="cb"
+ *     [checked]="allSelected()" (change)="toggleAll()" />
+ * </ng-template>
+ * ```
+ */
+declare class EfColumnHeaderTemplateDirective {
+    readonly templateRef: TemplateRef<unknown>;
+    columnId: string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfColumnHeaderTemplateDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfColumnHeaderTemplateDirective, "[efColumnHeaderTemplate]", never, { "columnId": { "alias": "efColumnHeaderTemplate"; "required": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Row-actions dropdown — V2 successor to `ef-datatable-actionbar`.
+ *
+ * Renders a discreet trailing-cell ⋯ trigger (34×28 pill) that opens
+ * a small Comptoir-styled menu with the items declared in TS:
+ *
+ * ```ts
+ * actions: ReadonlyArray<EfRowAction> = [
+ *   { id: 'view',      labelKey: 'common_view',      icon: 'pi pi-eye',    kbd: '↵',
+ *     permission: Permissions.Read,   command: () => view(row) },
+ *   { id: 'edit',      labelKey: 'common_edit',      icon: 'pi pi-pencil', kbd: 'E',
+ *     permission: Permissions.Edit,   command: () => edit(row) },
+ *   { id: 'duplicate', labelKey: 'common_duplicate', icon: 'pi pi-copy',
+ *                                         command: () => duplicate(row) },
+ *   { separator: true },
+ *   { id: 'delete',    labelKey: 'common_delete',    icon: 'pi pi-trash',  severity: 'danger',
+ *     permission: Permissions.Delete, command: () => delete(row) },
+ * ];
+ * ```
+ *
+ * ```html
+ * <ng-template efColumnTemplate="actions" let-row>
+ *   <ef-row-actions [items]="rowActions(row)" [context]="context" />
+ * </ng-template>
+ * ```
+ *
+ * Behaviour:
+ * - Click the trigger to toggle. Trigger gets `.open` (ink-active) while the menu is open.
+ * - Click outside or press `Escape` to close.
+ * - Clicking an item runs its `command` then closes the menu.
+ * - dblclick on the trigger or menu does NOT propagate, so the data-card's
+ *   `rowDoubleClickable` won't fire from this column.
+ *
+ * Permission filtering: pass `[context]="..."` (a `ScreenContext`); items
+ * declaring a `permission` are hidden unless that permission is granted.
+ * Items with no `permission` always show.
+ */
+declare class EfRowActionsComponent {
+    private readonly host;
+    /** Action descriptors. */
+    readonly items: _angular_core.InputSignal<readonly EfRowAction[]>;
+    /** Optional context — when present, items with a `permission` are
+     *  filtered against `context.isGranted(permission)`. */
+    readonly context: _angular_core.InputSignal<ScreenContext>;
+    /** Override the trigger icon (default ellipsis). */
+    readonly triggerIcon: _angular_core.InputSignal<string>;
+    /** Override the trigger aria-label translation key. */
+    readonly triggerAriaKey: _angular_core.InputSignal<string>;
+    /** Disable the entire trigger (e.g., row not actionable). */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Pin the menu to the inline-start edge of the trigger instead of
+     * inline-end. Use when the actions cell sits at the start of the row.
+     */
+    readonly menuLeft: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Forwarded when the menu opens (e.g., for a data-card to lift overflow). */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Forwarded when the menu closes. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /** Visible items (after permission + visible filtering). */
+    readonly visibleItems: _angular_core.Signal<readonly EfRowAction[]>;
+    /** Open state. */
+    readonly open: _angular_core.WritableSignal<boolean>;
+    toggle(event: MouseEvent): void;
+    runCommand(action: EfRowAction, event: MouseEvent): void;
+    close(): void;
+    /** Bubbling DOM event so ancestors (e.g. ef-data-card) can react —
+     *  see `.tbl-wrap.has-open-menu { overflow: visible }`. */
+    private dispatchToggle;
+    /** Outside click — closes the menu. */
+    onDocumentClick(event: MouseEvent): void;
+    /** Escape closes the menu. */
+    onEscape(): void;
+    /** Swallow dblclick so row-double-click doesn't fire from this column. */
+    onDblClick(event: MouseEvent): void;
+    private isVisible;
+    /** Stable trackBy across renders. */
+    trackByItem: (i: number, action: EfRowAction) => unknown;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfRowActionsComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfRowActionsComponent, "ef-row-actions", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "context": { "alias": "context"; "required": false; "isSignal": true; }; "triggerIcon": { "alias": "triggerIcon"; "required": false; "isSignal": true; }; "triggerAriaKey": { "alias": "triggerAriaKey"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "menuLeft": { "alias": "menuLeft"; "required": false; "isSignal": true; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+interface PageBtn {
+    kind: 'page' | 'ellipsis';
+    value: number;
+}
+/**
+ * Pagination control matching the Comptoir prototype's `.pager`
+ * shape (lines-per-page selector · range · page buttons).
+ *
+ * ```html
+ * <ef-pager
+ *   [pageNumber]="criteria().pagination.pageNumber"
+ *   [pageSize]="criteria().pagination.pageSize"
+ *   [totalCount]="totalCount()"
+ *   (pageChange)="setPage($event)"
+ *   (pageSizeChange)="setPage(1, $event)"
+ * />
+ * ```
+ *
+ * Renders a windowed page list (first / current ±1 / last with
+ * ellipsis) for total > 7 pages. Below 7 pages all buttons show.
+ */
+declare class EfPagerComponent {
+    readonly pageNumber: _angular_core.InputSignal<number>;
+    readonly pageSize: _angular_core.InputSignal<number>;
+    readonly totalCount: _angular_core.InputSignal<number>;
+    readonly pageSizeOptions: _angular_core.InputSignal<readonly number[]>;
+    /** Translation keys (preferred — consumer-side i18n). */
+    readonly linesPerPageLabelKey: _angular_core.InputSignal<string>;
+    readonly ofLabelKey: _angular_core.InputSignal<string>;
+    readonly prevLabelKey: _angular_core.InputSignal<string>;
+    readonly nextLabelKey: _angular_core.InputSignal<string>;
+    /** Hide the lines-per-page selector + range when only paging is wanted. */
+    readonly hideSize: _angular_core.InputSignal<boolean>;
+    readonly pageChange: _angular_core.OutputEmitterRef<number>;
+    readonly pageSizeChange: _angular_core.OutputEmitterRef<number>;
+    readonly totalPages: _angular_core.Signal<number>;
+    readonly range: _angular_core.Signal<{
+        start: number;
+        end: number;
+    }>;
+    /** First page · current ±1 · last page, with ellipsis fillers. */
+    readonly pageButtons: _angular_core.Signal<readonly PageBtn[]>;
+    goToPage(page: number): void;
+    onSizeChange(value: string): void;
+    trackBtn(index: number, btn: PageBtn): string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPagerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPagerComponent, "ef-pager", never, { "pageNumber": { "alias": "pageNumber"; "required": false; "isSignal": true; }; "pageSize": { "alias": "pageSize"; "required": false; "isSignal": true; }; "totalCount": { "alias": "totalCount"; "required": false; "isSignal": true; }; "pageSizeOptions": { "alias": "pageSizeOptions"; "required": false; "isSignal": true; }; "linesPerPageLabelKey": { "alias": "linesPerPageLabelKey"; "required": false; "isSignal": true; }; "ofLabelKey": { "alias": "ofLabelKey"; "required": false; "isSignal": true; }; "prevLabelKey": { "alias": "prevLabelKey"; "required": false; "isSignal": true; }; "nextLabelKey": { "alias": "nextLabelKey"; "required": false; "isSignal": true; }; "hideSize": { "alias": "hideSize"; "required": false; "isSignal": true; }; }, { "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; }, never, never, true, never>;
+}
+
+/**
+ * Comptoir bulk-action bar — ink-active pill that shows a selection
+ * count + projected action buttons. Auto-hides when count is 0.
+ *
+ * ```html
+ * <ef-bulk-bar [count]="selectionCount()">
+ *   <button class="btn">{{ 'common_export' | translate }}</button>
+ *   <button class="btn">{{ 'sales_orders_bulk_approve' | translate }}</button>
+ * </ef-bulk-bar>
+ * ```
+ */
+declare class EfBulkBarComponent {
+    readonly count: _angular_core.InputSignal<number>;
+    /** Translation key for the suffix word ("selected"). */
+    readonly suffixKey: _angular_core.InputSignal<string>;
+    /** Direct suffix text (used only when `suffixKey` is empty). */
+    readonly suffix: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfBulkBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfBulkBarComponent, "ef-bulk-bar", never, { "count": { "alias": "count"; "required": false; "isSignal": true; }; "suffixKey": { "alias": "suffixKey"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Comptoir empty-state — circular dashed icon + title + optional
+ * message + projected actions slot. Drop into a data-card body when
+ * results are zero.
+ *
+ * ```html
+ * <ef-empty-state
+ *   icon="pi pi-inbox"
+ *   titleKey="sales_orders_empty_title"
+ *   messageKey="sales_orders_empty_msg">
+ *   <button class="btn btn-tenant btn-sm">{{ 'sales_orders_new' | translate }}</button>
+ * </ef-empty-state>
+ * ```
+ */
+declare class EfEmptyStateComponent {
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly titleKey: _angular_core.InputSignal<string>;
+    readonly title: _angular_core.InputSignal<string>;
+    readonly messageKey: _angular_core.InputSignal<string>;
+    readonly message: _angular_core.InputSignal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfEmptyStateComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfEmptyStateComponent, "ef-empty-state", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "titleKey": { "alias": "titleKey"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "messageKey": { "alias": "messageKey"; "required": false; "isSignal": true; }; "message": { "alias": "message"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Comptoir smart bar — the search/filter card every list screen
+ * starts with. Composes:
+ *   1. Search input (with `⌘K` kbd hint) + Effacer / Rechercher
+ *      action buttons.
+ *   2. A filter-row slot for `[filters]` (pill-group + filter-pill +
+ *      preset-pill + "+ Plus de filtres").
+ *   3. A drawer slot for `[drawer]` (advanced filters via
+ *      `ef-filter-drawer`).
+ *
+ * The `searchText` is a `model()` so consumers can `[(searchText)]`
+ * for two-way binding, or watch the (search) output for explicit
+ * Rechercher clicks.
+ *
+ * ```html
+ * <ef-smart-bar
+ *   [(searchText)]="searchQuery"
+ *   placeholderKey="sales_orders_search_placeholder"
+ *   (search)="setSearchText($event)"
+ *   (clear)="clearAll()"
+ * >
+ *   <ng-container filters>
+ *     <ef-pill-group …/>
+ *     <ef-filter-pill …/>
+ *     <ef-preset-pill …/>
+ *   </ng-container>
+ *   <ng-container drawer>
+ *     <ef-filter-drawer …/>
+ *   </ng-container>
+ * </ef-smart-bar>
+ * ```
+ */
+declare class EfSmartBarComponent {
+    /** Two-way bound search input. */
+    readonly searchText: _angular_core.ModelSignal<string>;
+    readonly placeholderKey: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly clearLabelKey: _angular_core.InputSignal<string>;
+    readonly clearTitleKey: _angular_core.InputSignal<string>;
+    readonly searchLabelKey: _angular_core.InputSignal<string>;
+    readonly showKbdHint: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hideClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hideSearch: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly loading: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly search: _angular_core.OutputEmitterRef<string>;
+    readonly clear: _angular_core.OutputEmitterRef<void>;
+    onSubmit(): void;
+    onClear(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfSmartBarComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfSmartBarComponent, "ef-smart-bar", never, { "searchText": { "alias": "searchText"; "required": false; "isSignal": true; }; "placeholderKey": { "alias": "placeholderKey"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "clearLabelKey": { "alias": "clearLabelKey"; "required": false; "isSignal": true; }; "clearTitleKey": { "alias": "clearTitleKey"; "required": false; "isSignal": true; }; "searchLabelKey": { "alias": "searchLabelKey"; "required": false; "isSignal": true; }; "showKbdHint": { "alias": "showKbdHint"; "required": false; "isSignal": true; }; "hideClear": { "alias": "hideClear"; "required": false; "isSignal": true; }; "hideSearch": { "alias": "hideSearch"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; }, { "searchText": "searchTextChange"; "search": "search"; "clear": "clear"; }, never, ["[filters]", "[drawer]"], true, never>;
+}
+
+/**
+ * Comptoir filter pill — value-bearing button used in the smart-bar's
+ * filter row. Three tones (`neutral` / `active` / `tenant`), optional
+ * caret (when the pill toggles a popover), optional ✕ clear button.
+ *
+ * The popover content is consumer-projected via the `[popover]` slot
+ * — the pill positions it absolutely below itself per the prototype's
+ * `.popover` class. Visibility is driven by the `popoverOpen` input.
+ *
+ * ```html
+ * <!-- value-bearing, removable -->
+ * <ef-filter-pill
+ *   icon="pi pi-user"
+ *   labelKey="filter_client"
+ *   value="Leila Bennani"
+ *   tone="active"
+ *   hasClear
+ *   (clearClick)="removeFilter('client')"
+ * />
+ *
+ * <!-- with popover (consumer renders preset list inside) -->
+ * <ef-filter-pill
+ *   icon="pi pi-calendar"
+ *   labelKey="filter_date"
+ *   [value]="activeDatePreset().labelKey | translate"
+ *   hasPopover
+ *   [popoverOpen]="datePopoverOpen()"
+ *   (pillClick)="toggleDatePopover()"
+ * >
+ *   <ng-container popover>
+ *     @for (p of presets; track p.key) {
+ *       <div class="preset" [class.active]="p === active">…</div>
+ *     }
+ *   </ng-container>
+ * </ef-filter-pill>
+ * ```
+ */
+declare class EfFilterPillComponent {
+    /** PrimeNG icon class (e.g. `pi pi-calendar`). */
+    readonly icon: _angular_core.InputSignal<string>;
+    /** Translation key — preferred. */
+    readonly labelKey: _angular_core.InputSignal<string>;
+    /** Direct label text (used only when `labelKey` is empty). */
+    readonly label: _angular_core.InputSignal<string>;
+    /** Current value displayed after the label. */
+    readonly value: _angular_core.InputSignal<string>;
+    /** `'active'` paints ink-active; `'tenant'` paints the tenant-50 surface. */
+    readonly tone: _angular_core.InputSignal<"active" | "tenant" | "neutral">;
+    /** Show the ✕ clear button at the end of the pill. */
+    readonly hasClear: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Show a chevron + position the projected `[popover]` slot. */
+    readonly hasPopover: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the popover is currently open (consumer-controlled). */
+    readonly popoverOpen: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Translation key for the ✕ clear button's aria-label. */
+    readonly clearAriaKey: _angular_core.InputSignal<string>;
+    /** Emitted when the pill body is clicked (open popover, etc.). */
+    readonly pillClick: _angular_core.OutputEmitterRef<void>;
+    /** Emitted when the ✕ clear button is clicked (stops propagation). */
+    readonly clearClick: _angular_core.OutputEmitterRef<void>;
+    onPillClick(): void;
+    onClearClick(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfFilterPillComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfFilterPillComponent, "ef-filter-pill", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "hasClear": { "alias": "hasClear"; "required": false; "isSignal": true; }; "hasPopover": { "alias": "hasPopover"; "required": false; "isSignal": true; }; "popoverOpen": { "alias": "popoverOpen"; "required": false; "isSignal": true; }; "clearAriaKey": { "alias": "clearAriaKey"; "required": false; "isSignal": true; }; }, { "pillClick": "pillClick"; "clearClick": "clearClick"; }, never, ["[popover]"], true, never>;
+}
+
+/**
+ * Scopes a map of server/validation errors to its descendant `ef-*` form
+ * controls, which auto-link by their `name` — no per-field `[errors]`
+ * binding needed.
+ *
+ * Drop it on any container that wraps the form fields and bind the screen's
+ * `serverErrors()` signal once:
+ *
+ * ```html
+ * <div class="detail-grid" [efServerErrors]="serverErrors()">
+ *   <ef-input-text name="companyName" ... />   <!-- picks up errors['companyName'] -->
+ *   <ef-select     name="clientType"  ... />   <!-- picks up errors['clientType']  -->
+ * </div>
+ * ```
+ *
+ * Each control resolves its messages via `AbstractEfFormControl`
+ * (`resolvedExternalErrors`): an explicit `[errors]` input still wins when
+ * present, otherwise the control falls back to this scope keyed by `name`.
+ * Keys must match the control `name` (camelCase) — `AbstractScreenComponent.setServerErrors`
+ * already normalizes the backend's PascalCase keys, so the map is camelCase.
+ *
+ * The input is a signal, so updates propagate to controls under zoneless
+ * change detection (controls read it through a `computed`).
+ */
+declare class EfServerErrorsDirective {
+    /** Field-name → messages map (camelCase keys, matching control `name`). */
+    readonly errors: _angular_core.InputSignal<{
+        [key: string]: string[];
+    }>;
+    /** Messages for a control by its `name`, or `null` when none. */
+    errorsFor(name: string | undefined | null): string[] | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfServerErrorsDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<EfServerErrorsDirective, "[efServerErrors]", never, { "errors": { "alias": "efServerErrors"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * The shared inline "clear" affordance — a circular button with the canonical
+ * stroke-✕ glyph. One component so every clearable control (ef-input-text,
+ * ef-inputnumber, ef-select via its `#clearicon` template, ef-product-typeahead,
+ * …) shows the exact same clear icon, hover circle, and hit area.
+ *
+ * Styling lives in `_patterns.scss` under `.ef-clear` (global, so the same
+ * glyph is reachable from PrimeNG templates that can't import this component).
+ *
+ * `mousedown` is prevented so clicking the clear doesn't blur/commit the field
+ * before the `clear` handler runs.
+ */
+declare class EfClearButtonComponent {
+    ariaLabel: string;
+    disabled: boolean;
+    clear: EventEmitter<Event>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfClearButtonComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfClearButtonComponent, "ef-clear-button", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "clear": "clear"; }, never, never, true, never>;
+}
+
+/**
+ * Native Comptoir textarea — no PrimeNG wrapper. Pairs with the
+ * `.ef-textarea` rule in `@elasticias/ui/styles/patterns` (focus
+ * ring, paper-alt bg, rule border).
+ *
+ * Identity / label / placeholder / aria / required / readonly /
+ * disabled inherited from `AbstractEfFormControl`. Implements
+ * ControlValueAccessor so it slots into reactive forms AND works
+ * with `[(value)]` two-way binding via `(valueChangeEvent)`.
+ *
+ * ```html
+ * <ef-textarea
+ *   labelKey="products_details_description_label"
+ *   placeholderKey="products_details_description_placeholder"
+ *   [rows]="4"
+ *   [(value)]="description"
+ * />
+ * ```
+ */
+declare class EfTextareaComponent extends AbstractEfFormControl implements ControlValueAccessor {
+    rows: number;
+    maxlength?: number;
+    autofocus: boolean;
+    valueChangeEvent: EventEmitter<string>;
+    /** Two-way-bindable as `[value]` (one-way) or
+     *  `[(value)]="signal()"` (set + listen via `valueChangeEvent`). */
+    value: string;
+    /** Clearable (showClear / canClear) inherited from AbstractEfFormControl. */
+    protected get hasValue(): boolean;
+    clearValue(): void;
+    private onChange;
+    private onTouched;
+    readonly ngControl: NgControl;
+    constructor();
+    get isInvalid(): boolean;
+    get serverErrors(): string[] | null;
+    get showRequired(): boolean;
+    writeValue(value: string): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleInput(value: string): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfTextareaComponent, "ef-textarea", never, { "rows": { "alias": "rows"; "required": false; }; "maxlength": { "alias": "maxlength"; "required": false; }; "autofocus": { "alias": "autofocus"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "valueChangeEvent": "valueChangeEvent"; }, never, never, true, never>;
+    static ngAcceptInputType_autofocus: unknown;
+}
+
+interface EfPresetItem<T = string> {
+    /** Stable identifier (used as the `value`). */
+    key: T;
+    /** Translation key for the row label (preferred). */
+    labelKey?: string;
+    /** Direct label (used only when `labelKey` is empty). */
+    label?: string;
+    /** Mono hint to the right (date range, count, …). */
+    hint?: string;
+}
+/**
+ * Filter pill that opens a list of presets on click. Consumer-side
+ * use cases: date ranges (`Aujourd'hui · 30 derniers jours · …`),
+ * non-date enums (`Jamais connecté`), any short canned list.
+ *
+ * State model: `open` is a `model()` so callers can let the pill
+ * manage its own visibility (default) or hoist it into a parent
+ * signal for fully controlled use (`[(open)]`).
+ *
+ * ```html
+ * <ef-preset-pill
+ *   icon="pi pi-calendar"
+ *   labelKey="filter_date"
+ *   [presets]="datePresets"
+ *   [(activeKey)]="activeDateKey"
+ *   (presetChange)="onDateRangeChange($event)"
+ * />
+ * ```
+ */
+declare class EfPresetPillComponent<T = string> {
+    private readonly translate;
+    readonly icon: _angular_core.InputSignal<string>;
+    readonly labelKey: _angular_core.InputSignal<string>;
+    readonly label: _angular_core.InputSignal<string>;
+    readonly tone: _angular_core.InputSignal<"active" | "tenant" | "neutral">;
+    readonly presets: _angular_core.InputSignal<readonly EfPresetItem<T>[]>;
+    readonly activeKey: _angular_core.ModelSignal<T>;
+    /** Two-way; consumer can hoist for controlled mode. */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Auto-close the popover after selection (default on). */
+    readonly closeOnSelect: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly presetChange: _angular_core.OutputEmitterRef<EfPresetItem<T>>;
+    /** Displayed value — translates `labelKey` of the active preset if present. */
+    readonly activeLabel: _angular_core.Signal<any>;
+    toggle(): void;
+    select(preset: EfPresetItem<T>): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfPresetPillComponent<any>, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfPresetPillComponent<any>, "ef-preset-pill", never, { "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "tone": { "alias": "tone"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": true; "isSignal": true; }; "activeKey": { "alias": "activeKey"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "closeOnSelect": { "alias": "closeOnSelect"; "required": false; "isSignal": true; }; }, { "activeKey": "activeKeyChange"; "open": "openChange"; "presetChange": "presetChange"; }, never, never, true, never>;
+}
+
+/**
+ * One row in the picker's presets list. UI-specific — carries the
+ * optional `compute` and `hintFn` callbacks that the picker invokes
+ * at render time. Stays in @elasticias/ui because it's a render-time
+ * descriptor, not a state shape.
+ */
+interface EfDatePreset {
+    /** Stable key. Built-in keys (`today`, `this_week`, …) are computed
+     *  automatically; custom keys must come with a date computer. */
+    key: _elasticias_screens.EfDatePresetKey;
+    /** Translation key for the row label. */
+    labelKey?: string;
+    /** Direct label fallback when `labelKey` is empty. */
+    label?: string;
+    /**
+     * Computer for non-built-in presets — given today, return start/end
+     * (inclusive). For built-in keys this is provided by the component.
+     */
+    compute?: (today: Date) => {
+        start: Date;
+        end: Date;
+    };
+    /** Optional secondary text right-aligned (e.g. `'5 j'`, `'T2'`). */
+    hintFn?: (today: Date) => string;
+}
+
+/** Value shape emitted / accepted by the field-mode ControlValueAccessor.
+ *  Mirrors PrimeNG's `p-datepicker`: a lone `Date` for single selection,
+ *  a `[start, end]` tuple for a range — so `ef-datepicker-advanced` is a
+ *  drop-in replacement for the legacy `ef-datepicker` in forms. */
+type EfDateFieldValue = Date | [Date, Date] | null;
+/**
+ * Comptoir period selector for smart-bars — a pill trigger ("Date — 30
+ * derniers jours v") that opens a popover with a preset list and an
+ * optional custom-range view (full month calendar with range band).
+ *
+ * Replaces the legacy `ef-preset-pill` for date filters and the
+ * date-range mini-popover that screens used to roll inline.
+ *
+ * ```html
+ * <ef-datepicker-advanced
+ *   [activePreset]="dateFilter().presetKey"
+ *   [start]="dateFilter().start"
+ *   [end]="dateFilter().end"
+ *   triggerLabelKey="filter_date"
+ *   (rangeChange)="onDateChange($event)"
+ * />
+ * ```
+ *
+ * Built-in presets (computed from `today` at open time):
+ * `today`, `this_week`, `this_month`, `last_30_days`, `last_90_days`,
+ * `this_quarter`, `this_year`. Override with `[presets]="customList"`
+ * if you need a different set.
+ */
+declare class EfDatepickerAdvancedComponent extends AbstractEfFormControl implements ControlValueAccessor, AfterViewInit {
+    private readonly host;
+    private readonly locale;
+    private readonly vcr;
+    private readonly destroyRef;
+    private readonly cdr;
+    /**
+     * Self-injected form control (present only when the consumer binds
+     * `[(ngModel)]` / `formControlName` in field mode). We register as its
+     * `valueAccessor` manually — same pattern as `ef-datepicker` — so no
+     * `NG_VALUE_ACCESSOR` provider is needed and there's no circular DI.
+     * `null` in filter mode (the output-only smart-bar usage).
+     */
+    readonly ngControl: NgControl;
+    /** Always-present wrapper — the anchor for portal positioning (the
+     *  trigger itself lives behind an `@if`, so we anchor to the host box). */
+    private anchorEl;
+    /** Panel template — instantiated and attached to <body> on open. */
+    private panelTpl;
+    /** Active embedded view + its root node, while the panel is open. */
+    private panelView;
+    private panelRoot;
+    private resizeHandler;
+    constructor();
+    ngAfterViewInit(): void;
+    /** Trigger left-side label (translation key). Default: `'filter_date'`. */
+    readonly triggerLabelKey: _angular_core.InputSignal<string>;
+    /** Direct label fallback when `triggerLabelKey` is empty. */
+    readonly triggerLabel: _angular_core.InputSignal<string>;
+    /**
+     * Override the default preset list. The component ships sensible
+     * defaults for `today`, `this_week`, `this_month`, `last_30_days`,
+     * `last_90_days`, `this_quarter`, `this_year` — pass anything to
+     * replace them outright (e.g. include a `last_year` preset).
+     */
+    readonly presets: _angular_core.InputSignal<readonly EfDatePreset[]>;
+    /** Currently active preset key (controlled). */
+    readonly activePreset: _angular_core.InputSignal<string>;
+    /** Currently selected start (controlled — pairs with `activePreset`). */
+    readonly start: _angular_core.InputSignal<Date>;
+    /** Currently selected end. */
+    readonly end: _angular_core.InputSignal<Date>;
+    /** Show a `'Personnalisé…'` row that opens the calendar view. */
+    readonly allowCustomRange: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Component behaviour: smart-bar filter vs. form field. */
+    readonly mode: _angular_core.InputSignal<"filter" | "field">;
+    /** Field mode only — pick a single date or a `[start, end]` range. */
+    readonly selectionMode: _angular_core.InputSignal<"single" | "range">;
+    /** Field mode trigger appearance: a labelled field box (default) or
+     *  the rounded pill used by filter mode. */
+    readonly variant: _angular_core.InputSignal<"field" | "pill">;
+    /**
+     * Field mode only — also pick a time (24h `HH:mm`, free minutes).
+     * Single: the calendar no longer commits on day-click; a time field +
+     * Apply appear. Range: an `HH:mm` field sits under each of Du / Au.
+     * The committed value is a `Date` with hours/minutes set (not
+     * start-of-day) and the trigger renders `DD/MM/YYYY HH:mm`.
+     */
+    readonly showTime: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Emitted whenever a preset or applied custom range changes. */
+    readonly rangeChange: _angular_core.OutputEmitterRef<EfDateRange>;
+    /** Forwarded when the popover opens / closes (mirrors ef-row-actions). */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    readonly open: _angular_core.WritableSignal<boolean>;
+    readonly view: _angular_core.WritableSignal<"custom" | "presets">;
+    /**
+     * Custom view sub-mode: the day grid, the month picker, or the year
+     * picker. Clicking the month / year labels in the calendar header
+     * drills into the corresponding picker; selecting a cell returns to
+     * the day grid.
+     */
+    readonly calMode: _angular_core.WritableSignal<"days" | "months" | "years">;
+    /** First year shown in the 12-cell year picker grid. */
+    readonly yearWindowStart: _angular_core.WritableSignal<number>;
+    /** Custom view: month being displayed (1st of the month, 00:00). */
+    readonly visibleMonth: _angular_core.WritableSignal<Date>;
+    /** Custom view: working start/end, before the user clicks Apply. */
+    readonly draftStart: _angular_core.WritableSignal<Date>;
+    readonly draftEnd: _angular_core.WritableSignal<Date>;
+    /** Effective preset list — defaults if none provided. */
+    readonly effectivePresets: _angular_core.Signal<readonly EfDatePreset[]>;
+    /** Current value resolved against today's date. */
+    readonly resolvedRange: _angular_core.Signal<EfDateRange>;
+    /** 7×6 grid for the visible month, prev/next-month overflow days included. */
+    readonly calendarGrid: _angular_core.Signal<readonly {
+        date: Date;
+        day: number;
+        out: boolean;
+        today: boolean;
+        inRange: boolean;
+        rangeStart: boolean;
+        rangeEnd: boolean;
+    }[]>;
+    /** Day-of-week labels from CLDR (Mon-first). */
+    readonly dowLabels: _angular_core.Signal<readonly string[]>;
+    /** Month + year title for the calendar header. */
+    readonly monthLabel: _angular_core.Signal<string>;
+    readonly yearLabel: _angular_core.Signal<string>;
+    /** Range label for the year-picker header, e.g. `2024 – 2035`. */
+    readonly yearWindowLabel: _angular_core.Signal<string>;
+    /** 12 abbreviated months for the month picker (Jan…Déc), CLDR-localised. */
+    readonly monthCells: _angular_core.Signal<{
+        month: number;
+        label: string;
+        active: boolean;
+        today: boolean;
+    }[]>;
+    /** 12 consecutive years for the year picker, starting at `yearWindowStart`. */
+    readonly yearCells: _angular_core.Signal<{
+        year: number;
+        active: boolean;
+        today: boolean;
+    }[]>;
+    /** Live duration in days for the draft range. Mirrors `applyCustomRange`:
+     *  a lone start is treated as a single-day range (→ "1 jour"). */
+    readonly draftDurationDays: _angular_core.Signal<number>;
+    /** Du / Au inputs as DD/MM/YYYY strings (kept in sync with drafts). */
+    readonly fromText: _angular_core.Signal<string>;
+    readonly toText: _angular_core.Signal<string>;
+    /** Committed value pushed in via `writeValue` / day-pick / Apply. */
+    private readonly fieldValue;
+    /** Committed start / end derived from `fieldValue`. */
+    readonly fieldStart: _angular_core.Signal<Date>;
+    readonly fieldEnd: _angular_core.Signal<Date>;
+    /** Whether the field currently holds a value (vs. placeholder). */
+    readonly hasFieldValue: _angular_core.Signal<boolean>;
+    /** Text rendered in the field-mode trigger (date, +time when enabled). */
+    readonly fieldDisplay: _angular_core.Signal<string>;
+    readonly draftStartTime: _angular_core.WritableSignal<{
+        h: number;
+        m: number;
+    }>;
+    readonly draftEndTime: _angular_core.WritableSignal<{
+        h: number;
+        m: number;
+    }>;
+    /** Du / Au time inputs as `HH:mm` strings (kept in sync with drafts). */
+    readonly fromTimeText: _angular_core.Signal<string>;
+    readonly toTimeText: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    /** Required error is shown once the control is touched. */
+    get showRequired(): boolean;
+    /** Backend validation messages stashed under `serverError`. */
+    get serverErrors(): string[] | null;
+    /** Invalid + interacted — drives the red border on the field box. */
+    get isInvalid(): boolean;
+    writeValue(value: Date | Date[] | string | number | null | undefined): void;
+    registerOnChange(fn: (value: EfDateFieldValue) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected get hasValue(): boolean;
+    clearValue(): void;
+    /** Normalise whatever a form pushes in to our internal value shape.
+     *  Tolerates `null`, `[start, null]`, strings/epochs, and stray
+     *  multi-element arrays (keeps the first two). */
+    private coerceValue;
+    private toDate;
+    /** Commit a field-mode value: update internal state, notify the form,
+     *  and close the popover. `single` → `Date`, `range` → `[start, end]`. */
+    private commitField;
+    /** Merge a day with a draft time. Returns start-of-day when `showTime`
+     *  is off, so date-only commits stay time-free. */
+    private composeDateTime;
+    /** Format a draft time as zero-padded `HH:mm`. */
+    private formatTime;
+    /** Parse `H:mm` … `HH:mm` (24h) → `{h, m}`, or null when out of range. */
+    private parseTimeInput;
+    /** Allow only digits and `:` while typing a time; Enter commits via blur. */
+    onTimeKeydown(event: KeyboardEvent, el: HTMLInputElement): void;
+    /** Commit a typed `HH:mm` value to the start or end draft time. */
+    commitTimeInput(which: 'start' | 'end', el: HTMLInputElement): void;
+    toggle(event: MouseEvent): void;
+    close(): void;
+    onDocumentClick(event: MouseEvent): void;
+    onEscape(): void;
+    selectPreset(preset: EfDatePreset): void;
+    isActivePreset(key: EfDatePresetKey): boolean;
+    presetHint(preset: EfDatePreset): string;
+    openCustomView(): void;
+    backToPresets(): void;
+    headerPrev(): void;
+    headerNext(): void;
+    private stepHeader;
+    /** Open the month picker (triggered by clicking the month label). */
+    openMonthPicker(): void;
+    /** Open the year picker (triggered by clicking the year label). */
+    openYearPicker(): void;
+    /** Pick a month → jump the day grid to it. */
+    selectMonth(month: number): void;
+    /** Pick a year → keep the current month, return to the day grid. */
+    selectYear(year: number): void;
+    /** Allow only digits and `/` for printable keys; Enter commits via blur. */
+    onDateKeydown(event: KeyboardEvent, el: HTMLInputElement): void;
+    /** Commit a typed `JJ/MM/AAAA` value to the start or end draft. */
+    commitDateInput(which: 'start' | 'end', el: HTMLInputElement): void;
+    private attachPortal;
+    private detachPortal;
+    /** Anchor the panel's top-left to the trigger's bottom-left, using
+     *  page coords so the panel scrolls with the trigger naturally.
+     *  Flips to right-aligned (and clamps to the viewport) when the
+     *  default left-anchor would overflow the right edge — otherwise the
+     *  panel is clipped for triggers that sit near the right of the page. */
+    private positionPanel;
+    /** Click handling: 1st click sets start, 2nd click sets end (or swap).
+     *  Field single-date mode short-circuits — one click commits & closes. */
+    selectDay(day: Date): void;
+    applyCustomRange(): void;
+    /** Field single-date mode: commit a typed `JJ/MM/AAAA` value & close.
+     *  With `showTime`, only update the draft — Apply commits date + time. */
+    commitSingleInput(el: HTMLInputElement): void;
+    /** Default preset list — built-in semantics, all keys recognised. */
+    private readonly defaultPresets;
+    private seedDraftFromValue;
+    /** Compute the date range for a preset key. */
+    private computePresetRange;
+    /** Assemble an EfDateRange — exposes `labelKey` (for the trigger
+     *  to render via `| translate`) and a literal `label` fallback. */
+    private buildRange;
+    private builtInRange;
+    private builtInHint;
+    /** 6 weeks × 7 days. Each cell carries its date + flags. */
+    private buildMonthGrid;
+    private buildDowLabels;
+    private startOfDay;
+    private startOfMonth;
+    private addDays;
+    private addMonths;
+    private daysBetween;
+    private formatDayInput;
+    /** Parse a `J/M/AAAA`…`JJ/MM/AAAA` string to a start-of-day Date, or
+     *  null when malformed or out of range (e.g. `31/02/2026`). */
+    private parseDayInput;
+    /** First year of the 12-cell window containing `year` (e.g. 2026 → 2016). */
+    private startOfYearWindow;
+    /** Stable trackBy across renders. */
+    trackByPreset: (_: number, p: EfDatePreset) => string;
+    trackByDay: (_: number, day: {
+        date: Date;
+    }) => number;
+    trackByDow: (_: number, label: string) => string;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfDatepickerAdvancedComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfDatepickerAdvancedComponent, "ef-datepicker-advanced", never, { "triggerLabelKey": { "alias": "triggerLabelKey"; "required": false; "isSignal": true; }; "triggerLabel": { "alias": "triggerLabel"; "required": false; "isSignal": true; }; "presets": { "alias": "presets"; "required": false; "isSignal": true; }; "activePreset": { "alias": "activePreset"; "required": false; "isSignal": true; }; "start": { "alias": "start"; "required": false; "isSignal": true; }; "end": { "alias": "end"; "required": false; "isSignal": true; }; "allowCustomRange": { "alias": "allowCustomRange"; "required": false; "isSignal": true; }; "mode": { "alias": "mode"; "required": false; "isSignal": true; }; "selectionMode": { "alias": "selectionMode"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "showTime": { "alias": "showTime"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+/**
+ * Comptoir advanced-filter drawer — collapsible card that lives at
+ * the bottom of the smart-bar. Consumer projects their grid of
+ * `<div class="field">` controls; the component handles the open
+ * animation, the footer Reset / Apply buttons, and the optional hint
+ * line on the left of the footer.
+ *
+ * ```html
+ * <ef-filter-drawer
+ *   [open]="drawerOpen()"
+ *   hintKey="sales_orders_adv_hint"
+ *   (apply)="runSearch()"
+ *   (reset)="clearAll()"
+ * >
+ *   <div class="field">
+ *     <label for="adv-employee">{{ 'sales_orders_adv_employee' | translate }}</label>
+ *     <select id="adv-employee">…</select>
+ *   </div>
+ *   …
+ * </ef-filter-drawer>
+ * ```
+ */
+declare class EfFilterDrawerComponent {
+    readonly open: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly hintKey: _angular_core.InputSignal<string>;
+    readonly hint: _angular_core.InputSignal<string>;
+    readonly resetLabelKey: _angular_core.InputSignal<string>;
+    readonly applyLabelKey: _angular_core.InputSignal<string>;
+    readonly hideApply: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly apply: _angular_core.OutputEmitterRef<void>;
+    readonly reset: _angular_core.OutputEmitterRef<void>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfFilterDrawerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfFilterDrawerComponent, "ef-filter-drawer", never, { "open": { "alias": "open"; "required": false; "isSignal": true; }; "hintKey": { "alias": "hintKey"; "required": false; "isSignal": true; }; "hint": { "alias": "hint"; "required": false; "isSignal": true; }; "resetLabelKey": { "alias": "resetLabelKey"; "required": false; "isSignal": true; }; "applyLabelKey": { "alias": "applyLabelKey"; "required": false; "isSignal": true; }; "hideApply": { "alias": "hideApply"; "required": false; "isSignal": true; }; }, { "apply": "apply"; "reset": "reset"; }, never, ["*"], true, never>;
+}
+
+/**
+ * Comptoir activation tri-state filter — a `.field`-anatomy pill group
+ * (all / active / inactive) for boolean activation criteria
+ * (`IsActive: bool?` pattern).
+ *
+ * `value` is the criteria value itself: `true`, `false`, or
+ * `undefined`/`null` for "all". `valueChange` emits the same shape, so
+ * the component binds straight onto a search screen's advanced-filter
+ * state; pair with `AbstractSearchScreenV2.activationFilterKey` for
+ * apply / baseline-clear / cache-restore.
+ *
+ * ```html
+ * <ef-activation-filter
+ *   [value]="advancedValues()['isActive']"
+ *   (valueChange)="setAdvancedValue('isActive', $event)"
+ * />
+ * ```
+ */
+declare class EfActivationFilterComponent {
+    private static nextId;
+    readonly labelId: string;
+    /** Current criteria value: `true` / `false` / `undefined` (= all). */
+    readonly value: _angular_core.InputSignal<unknown>;
+    readonly labelKey: _angular_core.InputSignal<string>;
+    readonly allLabelKey: _angular_core.InputSignal<string>;
+    readonly activeLabelKey: _angular_core.InputSignal<string>;
+    readonly inactiveLabelKey: _angular_core.InputSignal<string>;
+    readonly valueChange: _angular_core.OutputEmitterRef<boolean>;
+    readonly selected: _angular_core.Signal<"active" | "inactive" | "all">;
+    readonly buckets: _angular_core.Signal<{
+        key: string;
+        labelKey: string;
+        value: boolean;
+    }[]>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<EfActivationFilterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfActivationFilterComponent, "ef-activation-filter", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "labelKey": { "alias": "labelKey"; "required": false; "isSignal": true; }; "allLabelKey": { "alias": "allLabelKey"; "required": false; "isSignal": true; }; "activeLabelKey": { "alias": "activeLabelKey"; "required": false; "isSignal": true; }; "inactiveLabelKey": { "alias": "inactiveLabelKey"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; }, never, never, true, never>;
+}
+
 /**
  * Theme configurator panel for switching PrimeNG presets, primary colors,
  * surface palettes, ripple effect, and RTL direction.
@@ -1864,5 +4921,5 @@ declare class EfEmailMetricsCardComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<EfEmailMetricsCardComponent, "ef-email-metrics-card", never, { "metrics": { "alias": "metrics"; "required": false; "isSignal": true; }; "recentEvents": { "alias": "recentEvents"; "required": false; "isSignal": true; }; "loading": { "alias": "loading"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "rangeChange": "rangeChange"; }, never, never, true, never>;
 }
 
-export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfButtonComponent, EfCheckboxComponent, EfCurrencyPipe, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfFieldsetComponent, EfInputNumberComponent, EfInputTextComponent, EfLabelComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPasswordComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfSelectButtonComponent, EfSelectComponent, EfThemeConfiguratorComponent, EfToolbarComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, getColumnAlignment, mergeColumnDefaults };
-export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductWithCountGroup, SelectedFilter, ValidationResult };
+export { EF_BADGE_BG_COLORS, EF_BADGE_BG_LIGHT_COLORS, EF_BADGE_BORDER_COLORS, EF_BADGE_DEFAULTS, EF_BADGE_TEXT_COLORS, EF_CHART_PALETTE, EF_DATATABLE_ACTIONS_DEFAULTS, EF_DATATABLE_COLUMN_DEFAULTS, EF_DATATABLE_DEFAULTS, EF_STATUS_COLORS, EF_STATUS_COLOR_ALIASES, EfActivationFilterComponent, EfAppMainComponent, EfAppShellComponent, EfAppShellMobileComponent, EfAppTopComponent, EfBadgeComponent, EfBlockUiComponent, EfBlockableDivComponent, EfBottomSheetComponent, EfBulkBarComponent, EfButtonComponent, EfButtonGroupComponent, EfCardComponent, EfChangeHistoryComponent, EfChartComponent, EfCheckboxComponent, EfClearButtonComponent, EfColumnHeaderTemplateDirective, EfColumnTemplateDirective, EfCompactPipe, EfCurrencyPipe, EfDataCardComponent, EfDatatableActionBarComponent, EfDatatableComponent, EfDatepickerAdvancedComponent, EfDatepickerComponent, EfDetailToolbarComponent, EfDialogComponent, EfEmailMetricsCardComponent, EfEmptyStateComponent, EfFabComponent, EfFieldsetComponent, EfFilterDrawerComponent, EfFilterPillComponent, EfFormGridComponent, EfInputNumberComponent, EfInputTextComponent, EfKpiCardComponent, EfLabelComponent, EfModuleRailComponent, EfModuleSideComponent, EfMultiSelectComponent, EfOrderBuilderComponent, EfOrderSummaryComponent, EfPagerComponent, EfPasswordComponent, EfPdfPreviewComponent, EfPillGroupComponent, EfPresetPillComponent, EfPriceDisplayComponent, EfProductCatalogueComponent, EfProductCatalogueFilterComponent, EfProductTypeaheadComponent, EfProfileChipComponent, EfPulseComponent, EfQuantitySelectorComponent, EfQuantityStepperComponent, EfRankListComponent, EfRowActionsComponent, EfSearchToolbarComponent, EfSelectButtonComponent, EfSelectComponent, EfServerErrorsDirective, EfSkeletonComponent, EfSmartBarComponent, EfStatsComponent, EfStatusChipComponent, EfTabPanelDirective, EfTabsComponent, EfTextareaComponent, EfThemeConfiguratorComponent, EfTimelineComponent, EfToastRegionComponent, EfToggleSwitchComponent, EfToolbarComponent, EfTotalsComponent, OrderEntityHelper, OrderLineItemHelper, TruncatePipe, buildChartConfig, getColumnAlignment, mergeColumnDefaults, resolveEfStatusColor };
+export type { CatalogueProduct, CatalogueProductVariant, CategoryAssignment, CategoryGroup, CategoryItem, DatatableSearchEntity, DocumentConfig, EfBadgeColor, EfBadgeConfig, EfBadgeSize, EfBadgeVariant, EfButtonComptoirSeverity, EfButtonPrimeNGSeverity, EfButtonSeverity, EfChangeHistoryEntry, EfChangeHistoryFieldChange, EfChartSeries, EfChartType, EfDataCardRowAction, EfDatatableActions, EfDatatableColumn, EfDatatableColumnAlign, EfDatatableColumnType, EfDatatableConfig, EfDateFieldValue, EfDatePreset, EfDialogAction, EfDialogSeverity, EfDialogSize, EfFabPosition, EfKpiDeltaTone, EfKpiSparkline, EfPillItem, EfPresetItem, EfRankRow, EfRowAction, EfSkeletonVariant, EfStatsRow, EfStatusColor, EfStatusReferenceItem, EfTabItem, EfTabsModule, EfTabsVariant, EfTimelineItem, EfTimelineState, EfToastRegionPosition, EfTotalsGrand, EfTotalsRow, HighlightSegment, OrderChangeInfo, OrderEntity, OrderLineItem, OrderProductsSummary, OrderSummaryItem, ProductCountGroup, ProductCountGroupLabel, ProductTypeaheadRow, ProductTypeaheadSelection, ProductWithCountGroup, SelectedFilter, ValidationResult };