@area8975/ui 0.2.2-dev.40 → 0.2.2-dev.42

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@area8975/ui",
-  "version": "0.2.2-dev.40",
+  "version": "0.2.2-dev.42",
   "peerDependencies": {
     "@angular/common": "^22.0.0",
     "@angular/core": "^22.0.0",

package/types/area8975-ui.d.ts

@@ -24,6 +24,111 @@ export interface ChartLegendSource {
 }
 /** Where a chart draws its own legend, `none` when one is linked elsewhere. */
 export type ChartLegendPosition = 'auto' | 'none';
+export type ChartOptions = ApexCharts$1.ApexOptions;
+/** One named set of values, one per category. */
+export interface ChartSeries {
+  name: string;
+  data: (number | null)[];
+  /** Overrides the palette slot, keep it for when a series must match something else. */
+  colour?: string;
+  /** Draws the line dashed, e.g. to set projected figures apart from actual ones. Bars ignore it. */
+  dashed?: boolean;
+}
+/** `fill` takes the host's height, which has to come from layout. */
+export type ChartHeight = number | 'fill';
+/** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
+export type ChartValueFormatter = (value: number) => string;
+/** Inputs, privacy handling and legend wiring every chart shares, whatever it draws. */
+declare abstract class UiChartBase implements ChartLegendSource {
+  protected readonly uiFormat: import("@area8975/ui").UiFormat;
+  private readonly privacy;
+  protected readonly dark: import("@angular/core").WritableSignal<boolean>;
+  protected readonly ink: Signal<import("@area8975/ui").ChartInk>;
+  /** Says what the chart shows, e.g. "Spending by month". */
+  readonly ariaLabel: import("@angular/core").InputSignal<string>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
+  /** Used on the value axis, the tooltip and the table, e.g. to show money. */
+  readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
+  /** Masks the values in privacy mode. Defaults to whether `valueFormatter` came from `injectMoneyFormatter`. */
+  readonly sensitive: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+  /** Heading for the category column in the data table. */
+  readonly categoryLabel: import("@angular/core").InputSignal<string>;
+  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  readonly emptyText: import("@angular/core").InputSignal<string>;
+  /** Shows the data table under the chart instead of only to screen readers. */
+  readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Raw ApexCharts options merged over the defaults, for anything not covered here. */
+  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions | null>;
+  /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
+  readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
+  /** Series switched off in the legend. */
+  readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
+  /** The series the legend is pointing at, the others fade while it's set. */
+  readonly emphasis: import("@angular/core").WritableSignal<string | null>;
+  abstract readonly legendItems: Signal<ChartLegendItem[]>;
+  abstract readonly legendNote: Signal<string>;
+  protected abstract readonly isEmpty: Signal<boolean>;
+  private readonly money;
+  protected readonly privacyMode: Signal<"visible" | "discreet" | "hidden">;
+  protected readonly masked: Signal<boolean>;
+  protected readonly concealed: Signal<boolean>;
+  protected readonly displayFormatter: Signal<ChartValueFormatter>;
+  protected readonly apexHeight: Signal<number | "100%">;
+  protected formatValue(value: number | null | undefined): string;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiChartBase, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiChartBase, never, never, {
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueFormatter": {
+      "alias": "valueFormatter";
+      "required": false;
+      "isSignal": true;
+    };
+    "sensitive": {
+      "alias": "sensitive";
+      "required": false;
+      "isSignal": true;
+    };
+    "categoryLabel": {
+      "alias": "categoryLabel";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "emptyText": {
+      "alias": "emptyText";
+      "required": false;
+      "isSignal": true;
+    };
+    "showTable": {
+      "alias": "showTable";
+      "required": false;
+      "isSignal": true;
+    };
+    "options": {
+      "alias": "options";
+      "required": false;
+      "isSignal": true;
+    };
+    "legend": {
+      "alias": "legend";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
+}
 /**
  * Categorical colours for chart series, in a fixed order that was checked for
  * colour blindness (adjacent pairs stay apart for protan, deutan and tritan).
@@ -188,63 +293,30 @@ export declare function chartColour(index: number, dark?: boolean): string;
  * them apart. Anything past that is grey.
  */
 export declare function chartSeriesStyle(index: number, dashes: boolean, dark?: boolean): ChartSeriesStyle;
-export type ChartOptions = ApexCharts$1.ApexOptions;
-/** One named set of values, one per category. */
-export interface ChartSeries {
-  name: string;
-  data: (number | null)[];
-  /** Overrides the palette slot, keep it for when a series must match something else. */
-  colour?: string;
-  /** Draws the line dashed, e.g. to set projected figures apart from actual ones. Bars ignore it. */
-  dashed?: boolean;
-}
-/** `fill` takes the host's height, which has to come from layout. */
-export type ChartHeight = number | 'fill';
-/** Turns a raw value into what the axis, tooltip and table show, e.g. money. */
-export type ChartValueFormatter = (value: number) => string;
+/**
+ * Blends `colour` towards `towards`, keeping `strength` of the original: 1 leaves
+ * it as it is, 0 gives `towards`. Apex can't parse color-mix(), so it's done
+ * here. Both must be six digit hex, anything else gives null.
+ */
+export declare function mixChartColours(colour: string, towards: string, strength: number): string | null;
+/**
+ * Dark or light text, whichever reads better on a mark filled with `background`.
+ * Judged by APCA, the contrast model drafted for WCAG 3: the WCAG 2 ratio
+ * puts black text on saturated orange and red, where white reads far better.
+ */
+export declare function chartLabelInk(background: string): string;
 /** Inputs every chart with categories along one axis and values up the other shares. */
-declare abstract class UiAxisChartBase implements ChartLegendSource {
-  protected readonly uiFormat: import("@area8975/ui").UiFormat;
-  private readonly privacy;
-  protected readonly dark: import("@angular/core").WritableSignal<boolean>;
-  protected readonly ink: import("@angular/core").Signal<import("@area8975/ui").ChartInk>;
+declare abstract class UiAxisChartBase extends UiChartBase {
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
   readonly categories: import("@angular/core").InputSignal<string[]>;
-  /** Says what the chart shows, e.g. "Spending by month". */
-  readonly ariaLabel: import("@angular/core").InputSignal<string>;
-  readonly height: import("@angular/core").InputSignal<ChartHeight>;
-  /** Used on the value axis, the tooltip and the table, e.g. to show money. */
-  readonly valueFormatter: import("@angular/core").InputSignal<ChartValueFormatter>;
-  /** Masks the values in privacy mode. Defaults to whether `valueFormatter` came from `injectMoneyFormatter`. */
-  readonly sensitive: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
-  /** Heading for the category column in the data table. */
-  readonly categoryLabel: import("@angular/core").InputSignal<string>;
-  readonly loading: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  readonly emptyText: import("@angular/core").InputSignal<string>;
-  /** Shows the data table under the chart instead of only to screen readers. */
-  readonly showTable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** Raw ApexCharts options merged over the defaults, for anything not covered here. */
-  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions | null>;
   /**
    * Only these series get palette colours, the rest go grey so the few that
    * matter stand out. The way to show more series than there are colours.
    */
   readonly highlight: import("@angular/core").InputSignal<string[] | null>;
   readonly highlightKeepsColours: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
-  /** `none` leaves the legend out, for when a `ui-chart-legend` is linked with `for`. */
-  readonly legend: import("@angular/core").InputSignal<ChartLegendPosition>;
-  /** Series switched off in the legend. */
-  readonly hiddenSeries: import("@angular/core").WritableSignal<string[]>;
-  /** The series the legend is pointing at, the others fade while it's set. */
-  readonly emphasis: import("@angular/core").WritableSignal<string | null>;
   /** Charts that draw lines can tell series apart by dashes too, bars can't. */
   protected readonly supportsDashes: boolean;
-  private readonly money;
-  protected readonly privacyMode: import("@angular/core").Signal<"visible" | "discreet" | "hidden">;
-  protected readonly masked: import("@angular/core").Signal<boolean>;
-  protected readonly concealed: import("@angular/core").Signal<boolean>;
-  protected readonly displayFormatter: import("@angular/core").Signal<ChartValueFormatter>;
-  protected readonly apexHeight: import("@angular/core").Signal<number | "100%">;
   protected readonly isEmpty: import("@angular/core").Signal<boolean>;
   protected readonly isMuted: import("@angular/core").Signal<boolean[]>;
   private readonly colourOrder;
@@ -254,7 +326,6 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
   /** Grey context series stay out of the legend, the note says how many there are. */
   readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
   readonly legendNote: import("@angular/core").Signal<string>;
-  protected formatValue(value: number | null | undefined): string;
   static ɵfac: i0.ɵɵFactoryDeclaration<UiAxisChartBase, never>;
   static ɵdir: i0.ɵɵDirectiveDeclaration<UiAxisChartBase, never, never, {
     "series": {
@@ -267,51 +338,6 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
       "required": true;
       "isSignal": true;
     };
-    "ariaLabel": {
-      "alias": "ariaLabel";
-      "required": true;
-      "isSignal": true;
-    };
-    "height": {
-      "alias": "height";
-      "required": false;
-      "isSignal": true;
-    };
-    "valueFormatter": {
-      "alias": "valueFormatter";
-      "required": false;
-      "isSignal": true;
-    };
-    "sensitive": {
-      "alias": "sensitive";
-      "required": false;
-      "isSignal": true;
-    };
-    "categoryLabel": {
-      "alias": "categoryLabel";
-      "required": false;
-      "isSignal": true;
-    };
-    "loading": {
-      "alias": "loading";
-      "required": false;
-      "isSignal": true;
-    };
-    "emptyText": {
-      "alias": "emptyText";
-      "required": false;
-      "isSignal": true;
-    };
-    "showTable": {
-      "alias": "showTable";
-      "required": false;
-      "isSignal": true;
-    };
-    "options": {
-      "alias": "options";
-      "required": false;
-      "isSignal": true;
-    };
     "highlight": {
       "alias": "highlight";
       "required": false;
@@ -322,11 +348,6 @@ declare abstract class UiAxisChartBase implements ChartLegendSource {
       "required": false;
       "isSignal": true;
     };
-    "legend": {
-      "alias": "legend";
-      "required": false;
-      "isSignal": true;
-    };
   }, {}, never, never, true, never>;
 }
 /**
@@ -413,7 +434,8 @@ export declare class UiChartComponent {
 }
 /** The loading, empty and data table states around a chart, shared by every chart type. */
 export declare class UiChartFrameComponent {
-  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions>;
+  /** ApexCharts options to draw, or null for a chart that draws itself as projected content. */
+  readonly options: import("@angular/core").InputSignal<ApexCharts.ApexOptions | null>;
   readonly ariaLabel: import("@angular/core").InputSignal<string>;
   readonly categories: import("@angular/core").InputSignal<string[]>;
   readonly series: import("@angular/core").InputSignal<ChartSeries[]>;
@@ -523,7 +545,7 @@ export declare class UiChartFrameComponent {
   }, {
     "hiddenSeries": "hiddenSeriesChange";
     "emphasis": "emphasisChange";
-  }, never, never, true, never>;
+  }, never, ["*"], true, never>;
 }
 /**
  * The numbers behind a chart as a table. Hidden visually by default so screen
@@ -729,6 +751,168 @@ export declare class UiPieChartComponent extends UiAxisChartBase {
 export declare const PieChartVariants: readonly ["pie", "donut"];
 /** @see {@link PieChartVariants} */
 export type PieChartVariant = typeof PieChartVariants[number];
+/** One block inside a group, sized by its value. */
+export interface TreemapItem {
+  name: string;
+  value: number;
+}
+/** A set of items drawn together in one colour, e.g. a category and who it went to. */
+export interface TreemapGroup {
+  name: string;
+  items: TreemapItem[];
+  /** Overrides the palette slot, keep it for when a group must match something else. */
+  colour?: string;
+}
+/** What `itemSelect` emits when a block is clicked. */
+export interface TreemapSelection {
+  group: string;
+  item: string;
+}
+declare const TREEMAP_GROUP_GAP = 8;
+declare const TREEMAP_BLOCK_GAP = 3;
+declare const TREEMAP_HEADER_HEIGHT = 24;
+interface TreemapRect {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+/** One block as it's drawn, with the colours worked out. */
+interface TreemapBlock {
+  group: string;
+  item: string;
+  value: number;
+  fill: string;
+  labelInk: string;
+}
+/** A group as it's drawn: only its items with something to show. */
+interface DrawnTreemapGroup {
+  name: string;
+  colour: string;
+  total: number;
+  blocks: TreemapBlock[];
+}
+/** How much of its label a block has room for. */
+type TreemapLabel = 'none' | 'name' | 'full';
+interface PlacedTreemapBlock extends TreemapBlock {
+  rect: TreemapRect;
+  label: TreemapLabel;
+}
+interface PlacedTreemapGroup extends DrawnTreemapGroup {
+  rect: TreemapRect;
+  hasHeader: boolean;
+  placedBlocks: PlacedTreemapBlock[];
+}
+/** A group's own colour, or its palette slot, then grey once the palette runs out. */
+declare function treemapGroupColours(groups: TreemapGroup[], dark: boolean): string[];
+/**
+ * The groups worth drawing: hidden ones and items of zero or less are left out,
+ * then any group left with nothing.
+ */
+declare function drawnTreemapGroups(groups: TreemapGroup[], colours: string[], hidden: string[], shades: boolean, ink: ChartInk): DrawnTreemapGroup[];
+/** Every block as one row of the data table, named "<group> – <item>". */
+declare function treemapTableRows(groups: TreemapGroup[]): {
+  categories: string[];
+  values: number[];
+};
+/**
+ * Places each group in `bounds`, a header strip along its top when there's
+ * room, and its blocks under that. Positions are relative to `bounds`, and
+ * each block's are relative to its group.
+ */
+declare function placeTreemapGroups(groups: DrawnTreemapGroup[], bounds: TreemapRect): PlacedTreemapGroup[];
+/**
+ * Splits `bounds` into one rectangle per value, each sized by its share and
+ * kept as close to square as the others allow (the squarified treemap of
+ * Bruls, Huizing and van Wijk). Rectangles come back in the order of
+ * `values`, with `gap` between neighbours but none at the edges.
+ */
+declare function squarify(values: number[], bounds: TreemapRect, gap?: number): TreemapRect[];
+interface PointedBlock {
+  group: PlacedTreemapGroup;
+  block: PlacedTreemapBlock;
+  x: number;
+  y: number;
+}
+/**
+ * Nested blocks sized by value, for showing how a whole splits into groups
+ * and each group into items, e.g. spending by category and who it went to.
+ * Past eight groups the palette runs out and the rest go grey, so give each
+ * group a `colour` when there can be more.
+ */
+export declare class UiTreemapChartComponent extends UiChartBase {
+  readonly groups: import("@angular/core").InputSignal<TreemapGroup[]>;
+  readonly height: import("@angular/core").InputSignal<ChartHeight>;
+  /** Shades each group's items from its colour, biggest strongest, so they stay told apart. */
+  readonly shades: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Makes each block a button that emits `itemSelect`. */
+  readonly selectable: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+  /** Heading for the value column in the data table. */
+  readonly valueLabel: import("@angular/core").InputSignal<string>;
+  readonly itemSelect: import("@angular/core").OutputEmitterRef<TreemapSelection>;
+  private readonly canvas;
+  private readonly size;
+  protected readonly pointed: import("@angular/core").WritableSignal<PointedBlock | null>;
+  /** Set once the first layout is drawn, so blocks glide to new places after that but don't grow in from nothing. */
+  protected readonly settled: import("@angular/core").WritableSignal<boolean>;
+  private readonly percentFormatter;
+  protected readonly fill: import("@angular/core").Signal<boolean>;
+  protected readonly fixedHeight: import("@angular/core").Signal<number | null>;
+  private readonly colours;
+  private readonly drawnGroups;
+  protected readonly placedGroups: import("@angular/core").Signal<PlacedTreemapGroup[]>;
+  private readonly total;
+  private readonly tableRows;
+  protected readonly categories: import("@angular/core").Signal<string[]>;
+  protected readonly series: import("@angular/core").Signal<ChartSeries[]>;
+  protected readonly isEmpty: import("@angular/core").Signal<boolean>;
+  readonly legendItems: import("@angular/core").Signal<ChartLegendItem[]>;
+  readonly legendNote: import("@angular/core").Signal<string>;
+  private readonly emphasised;
+  protected readonly tooltipFooter: import("@angular/core").Signal<string>;
+  protected readonly tooltipPosition: import("@angular/core").Signal<{
+    left: number | null;
+    right: number | null;
+    top: number;
+  } | null>;
+  constructor();
+  protected isFaded(group: PlacedTreemapGroup): boolean;
+  protected point(event: PointerEvent, group: PlacedTreemapGroup, block: PlacedTreemapBlock): void;
+  protected focus(group: PlacedTreemapGroup, block: PlacedTreemapBlock): void;
+  protected select(block: PlacedTreemapBlock): void;
+  protected accessibleName(block: PlacedTreemapBlock): string;
+  private percent;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTreemapChartComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<UiTreemapChartComponent, "ui-treemap-chart", never, {
+    "groups": {
+      "alias": "groups";
+      "required": true;
+      "isSignal": true;
+    };
+    "height": {
+      "alias": "height";
+      "required": false;
+      "isSignal": true;
+    };
+    "shades": {
+      "alias": "shades";
+      "required": false;
+      "isSignal": true;
+    };
+    "selectable": {
+      "alias": "selectable";
+      "required": false;
+      "isSignal": true;
+    };
+    "valueLabel": {
+      "alias": "valueLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {
+    "itemSelect": "itemSelect";
+  }, never, never, true, never>;
+}
 export interface UiFormat {
   /** ISO 4217 code, e.g. "GBP". */
   currency: string;
@@ -1012,7 +1196,7 @@ export declare class UiInputComponent<ValueType = string> {
   readonly name: import("@angular/core").InputSignal<string>;
   readonly placeholder: import("@angular/core").InputSignal<string>;
   readonly autocomplete: import("@angular/core").InputSignal<string>;
-  readonly inputmode: import("@angular/core").InputSignal<"" | "decimal" | "none" | "search" | "text" | "numeric" | "email" | "tel" | "url">;
+  readonly inputmode: import("@angular/core").InputSignal<"" | "none" | "decimal" | "search" | "text" | "numeric" | "email" | "tel" | "url">;
   readonly required: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
   readonly readonly: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
@@ -1341,6 +1525,10 @@ export interface SelectOptionContext<Model> {
 export interface SelectTriggerContext<Model> {
   $implicit: Model;
 }
+/** Context for a projected `#leading` template, inline search single select only. */
+export interface SelectLeadingContext<Model> {
+  $implicit: Model;
+}
 /** One line in the open list. Groups are headings, the rest can be picked. */
 export type SelectRow<Model> = {
   kind: 'group';
@@ -1407,6 +1595,8 @@ export declare class UiSelectComponent<Model = unknown> {
   readonly hasMore: import("@angular/core").WritableSignal<boolean>;
   readonly optionTemplate: import("@angular/core").Signal<TemplateRef<SelectOptionContext<Model>> | undefined>;
   readonly triggerTemplate: import("@angular/core").Signal<TemplateRef<SelectTriggerContext<Model>> | undefined>;
+  /** With an inline search, shown before the chosen item's text, e.g. its colour. Single select only. */
+  readonly leadingTemplate: import("@angular/core").Signal<TemplateRef<SelectLeadingContext<Model>> | undefined>;
   /** Index into the pickable rows, the one keyboard focus sits on. */
   readonly activeIndex: import("@angular/core").WritableSignal<number>;
   readonly listId: string;
@@ -1415,6 +1605,9 @@ export declare class UiSelectComponent<Model = unknown> {
   readonly isEmpty: import("@angular/core").Signal<boolean>;
   /** Tags only replace the trigger text when there's no inline search box. */
   readonly showTags: import("@angular/core").Signal<boolean>;
+  readonly showLeading: import("@angular/core").Signal<boolean>;
+  /** Typing replaces the chosen item's text, so its leading content sits out the search. */
+  readonly leadingHidden: import("@angular/core").Signal<boolean>;
   /** The text to create from, or null when there's nothing to offer. */
   readonly createQuery: import("@angular/core").Signal<string | null>;
   readonly rows: import("@angular/core").Signal<SelectRow<Model>[]>;
@@ -1579,7 +1772,7 @@ export declare class UiSelectComponent<Model = unknown> {
     "create": "create";
     "selectedItem": "selectedItemChange";
     "selectedItems": "selectedItemsChange";
-  }, ["optionTemplate", "triggerTemplate"], never, true, never>;
+  }, ["optionTemplate", "triggerTemplate", "leadingTemplate"], never, true, never>;
 }
 /** Native resize values for the textarea element. */
 export declare const TextareaResizeOptions: readonly ["none", "both", "horizontal", "vertical"];
@@ -2715,12 +2908,16 @@ export interface TableColumn<Row> {
   /** unique key, used for sorting/filtering/visibility/pinning/reordering */
   id: string;
   header: string;
+  /** the cell's value, used for sorting and filtering even when a `uiTableCell` template draws the cell */
   accessor: (row: Row) => unknown;
   /** how the cell value is formatted for display, defaults to plain text */
   displayType?: TableColumnDisplayType;
   /** ISO currency code, used when displayType is 'currency'. Defaults to the currency from `provideUiFormat`. */
   currency?: string;
-  /** Masks the cell in privacy mode, e.g. a transaction's description. Currency cells are already masked, icon cells have no text. */
+  /**
+   * Masks the cell in privacy mode, e.g. a transaction's description. Currency cells are already masked, icon cells have no text.
+   * A `uiTableCell` template is replaced by the mask too.
+   */
   sensitive?: boolean;
   sortable?: boolean;
   filterable?: boolean;
@@ -2736,6 +2933,12 @@ export interface TableColumn<Row> {
   /** false excludes the column from the visibility toggle menu */
   hideable?: boolean;
 }
+/** Context for a `uiTableCell` template. */
+export interface TableCellContext<Row> {
+  $implicit: Row;
+  /** what the column's accessor gives for the row */
+  value: unknown;
+}
 export interface TableRowAction<Row> {
   id: string;
   label: string;
@@ -2820,6 +3023,8 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   protected readonly dragOverColumnId: import("@angular/core").WritableSignal<string | null>;
   protected readonly dragPreview: import("@angular/core").WritableSignal<ColumnDragPreview | null>;
   protected readonly draggedRowIndex: import("@angular/core").WritableSignal<number | null>;
+  private readonly cellDirectives;
+  protected readonly cellTemplates: import("@angular/core").Signal<Map<string, TemplateRef<TableCellContext<unknown>>>>;
   readonly isEmpty: import("@angular/core").Signal<boolean>;
   readonly generatedClasses: import("@angular/core").Signal<string>;
   protected readonly orderedColumns: import("@angular/core").Signal<TableColumn<Row>[]>;
@@ -2845,6 +3050,7 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
   private readonly registry;
   protected readonly uiFormat: import("@area8975/ui").UiFormat;
   private readonly privateText;
+  protected readonly privacy: import("@angular/core").Signal<"visible" | "discreet" | "hidden">;
   private loadedQuery;
   private loadedFilters;
   private resizeState;
@@ -2996,7 +3202,23 @@ export declare class UiTableComponent<Row = unknown> implements OnInit, OnDestro
     "selectedRowIds": "selectedRowIdsChange";
     "selectionChange": "selectionChange";
     "rowsReordered": "rowsReordered";
-  }, never, never, true, never>;
+  }, ["cellDirectives"], never, true, never>;
+}
+/**
+ * Draws a column's cells in place of its formatted value, matched by column id:
+ * `<ng-template uiTableCell="description" let-row>`. The accessor stays the cell's value.
+ */
+export declare class UiTableCellDirective {
+  readonly columnId: import("@angular/core").InputSignal<string>;
+  readonly template: TemplateRef<TableCellContext<unknown>>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<UiTableCellDirective, never>;
+  static ɵdir: i0.ɵɵDirectiveDeclaration<UiTableCellDirective, "ng-template[uiTableCell]", never, {
+    "columnId": {
+      "alias": "uiTableCell";
+      "required": true;
+      "isSignal": true;
+    };
+  }, {}, never, never, true, never>;
 }
 export interface UiLinkedTable {
   readonly query: WritableSignal<string>;