@flyos/design-system 3.7.0 → 3.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flyos/design-system",
-  "version": "3.7.0",
+  "version": "3.8.0",
   "description": "FlyOS design system — shared components, directives, pipes, services, and models for Business App developers.",
   "keywords": [
     "flyos",

package/types/flyos-design-system.d.ts

@@ -6333,6 +6333,22 @@ interface GanttRow {
     backgroundColor?: string;
     /** When true this row cannot be dragged/resized/linked even if the chart is editable. */
     readonly?: boolean;
+    /**
+     * Assert expandability before children are loaded (lazy trees). Defaults to "does any row
+     * name me as parent?". Setting `true` renders a chevron for a row with no loaded children yet;
+     * expanding it emits {@link FlyGanttComponent.rowExpand} instead of revealing nothing.
+     */
+    hasChildren?: boolean;
+    /**
+     * Optional baseline (plan-of-record) date, ISO `YYYY-MM-DD`. When both `baselineStart` and
+     * `baselineEnd` are set and {@link FlyGanttComponent.showBaselines} is on, the chart renders a
+     * thin muted underbar (or, for a `milestone` row, a hollow diamond) at these dates beneath the
+     * current bar — the generic "baseline vs current" comparison. App-agnostic on purpose: this is
+     * NOT "planned" or "original" in any one app's vocabulary, just a second pair of dates.
+     */
+    baselineStart?: string | null;
+    /** Paired with {@link baselineStart}; both must be present for the underbar to render. */
+    baselineEnd?: string | null;
 }
 /**
  * The four MS-Project relationship kinds, named `<predecessor endpoint><successor endpoint>`:
@@ -6426,6 +6442,15 @@ interface GanttTick {
     /** Stable key for `@for` tracking. */
     key: string;
 }
+/**
+ * A logical (pre-RTL-mirror) horizontal window, in the same px space as {@link dateToX}. Ticks,
+ * gridlines and weekend bands accept one to skip allocating a decoration cell wholly outside the
+ * visible span — see {@link './gantt-window'} for how the render pane derives it from geometry.
+ */
+interface GanttXWindow {
+    x0: number;
+    x1: number;
+}
 
 /** An in-flight link drag, in render space. `x0,y0` is the fixed origin; `x1,y1` follows the pointer. */
 interface GanttLinkGesture {
@@ -6437,6 +6462,63 @@ interface GanttLinkGesture {
     readonly y1: number;
 }
 
+/**
+ * Virtualization ("scale") math + the viewport wiring for {@link FlyGanttComponent} — the A9
+ * companion to `gantt-scale.ts`'s pure geometry.
+ *
+ * ## Why this is a separate file from `gantt-scale.ts`
+ * The design memo (`.workflow/design/A9-multi-project-gantt.md` §4.5) puts all windowing math
+ * directly in `gantt-scale.ts`, mirroring its existing pure-function seam. That file is, however,
+ * already sitting at its LoC-ratchet ceiling (baselined at 542 lines; `+10%` caps it at 596) —
+ * adding ~150 lines of window math there would fail `conventions-guard` outright. This module is
+ * the sibling extraction the ratchet forces (same shape as `gantt-link-gestures.ts` and
+ * `gantt-label-pane.ts`: a few pure functions plus one signal-based class composed by the host).
+ * The functions below remain dependency-free — no Angular, no DOM — for the same reason
+ * `gantt-scale.ts`'s are: jsdom lays nothing out, so pure functions are the only directly
+ * testable form of this math (skill: design-system-gantt.md §8).
+ *
+ * ## The `viewBox`-pan trick this math drives
+ * The body `<svg>` stays `position: absolute`, sized to only the rendered window
+ * (`heightPx`/`topPx` below), with a `viewBox` y-offset equal to `topPx`. Because the SVG's
+ * user-space origin follows the window, every geometry function in `gantt-scale.ts`
+ * (`rowVms`, `mapX`, `projectBar`, `groupPath`, `diamondPoints`, link routing) keeps emitting
+ * **absolute row-space coordinates** completely unaware that virtualization exists. Nothing here
+ * subtracts `topPx` from a bar's `y` — that would be the wrong-turn the memo warns against.
+ */
+
+/** The slice of rows actually rendered, plus the geometry the body `<svg>` needs to pan to it. */
+interface RowWindow {
+    /** First rendered row index (inclusive), 0-based into the full flattened list. */
+    firstIndex: number;
+    /** Last rendered row index (inclusive). `-1` when there are no rows at all. */
+    lastIndex: number;
+    /** `firstIndex * rowHeight` — the body `<svg>`'s `viewBox` y-offset AND its CSS `top`. */
+    topPx: number;
+    /** Rendered window's pixel height — the body `<svg>`'s own `height`/`viewBox` height. */
+    heightPx: number;
+}
+
+/**
+ * Pure geometry for the baseline (plan-of-record) overlay — a NEW, app-agnostic capability, not
+ * part of the A9 memo. `GanttRow.baselineStart`/`baselineEnd` are a second, optional pair of ISO
+ * dates; when both are present and `showBaselines` is on, the chart renders a thin muted underbar
+ * beneath a `bar`/`group` row, or a small hollow diamond at a `milestone` row's baseline date —
+ * the generic "baseline vs current" comparison a consumer's own vocabulary later gives meaning to
+ * (e.g. "planned vs actual"), which is exactly why nothing here is named after that vocabulary.
+ *
+ * Kept in its own pure, dependency-free module — same reasoning as `gantt-scale.ts`'s docstring —
+ * and, in particular, routed through `dateToX`/`mapX`/`projectBar` so it mirrors under RTL for
+ * free rather than ever computing its own x from scratch.
+ */
+
+/** Render-space geometry for one row's baseline marker, or `null` when there is nothing to draw. */
+interface GanttBaselineVm {
+    /** `'bar'` — draw the underbar rect at `x`/`width`. `'milestone'` — draw the diamond at `x`. */
+    shape: 'bar' | 'milestone';
+    x: number;
+    width: number;
+}
+
 /** One fully-resolved, render-space row ready for the template. */
 interface GanttRowVm {
     flat: GanttFlatRow;
@@ -6458,6 +6540,8 @@ interface GanttRowVm {
     tint: string | null;
     ariaLabel: string;
     editable: boolean;
+    /** Baseline overlay geometry, or `null` when the row has none (or baselines are hidden). */
+    baseline: GanttBaselineVm | null;
 }
 interface LinkVm {
     key: string;
@@ -6493,9 +6577,12 @@ interface LinkVm {
  * placed among those controls matches them; the shell-chrome family (`--surface-card`, …) and
  * then a light-neutral literal are chained as fallbacks for consumers that map neither.
  *
- * **Scale limit:** renders up to `maxRows` (default 500) visible rows; beyond that the list is
- * capped and a footer notes the overflow. Heavy windowing/virtualization is intentionally
- * deferred — see the component skill.
+ * **Scale (A9).** Row count is unbounded by default (`maxRows` now defaults to `0`); only the rows
+ * in view (plus `overscanRows`) mount as DOM/SVG, panned via a `viewBox` y-offset on the body
+ * `<svg>` so `./gantt-scale`'s geometry stays oblivious to windowing (`./gantt-window`'s doc).
+ * Decorations window the same way; bars are never culled. `maxCanvasPx` coarsens the zoom
+ * (`effectiveZoomChange`) past that width; `virtualized = false` restores the pre-A9 path; a
+ * positive `maxRows` keeps the old hard cap (with its overflow footer) too.
  */
 declare class FlyGanttComponent {
     readonly i18n: I18nService;
@@ -6517,8 +6604,20 @@ declare class FlyGanttComponent {
     readonly resizableLabels: _angular_core.InputSignal<boolean>;
     /** Row band height in px. */
     readonly rowHeight: _angular_core.InputSignal<number>;
-    /** Hard cap on rendered rows; beyond it the list is truncated (see class doc). */
+    /** Hard cap on the flattened row list; beyond it the list is truncated (see class doc).
+     *  `0` (the default) is uncapped — windowing (below) is what keeps an uncapped chart cheap. */
     readonly maxRows: _angular_core.InputSignal<number>;
+    /** Controlled collapse state. `null` (the default) keeps the pre-A9 internal-state behaviour —
+     *  adopt controlled mode by echoing {@link collapsedIdsChange} back through this input. */
+    readonly collapsedIds: _angular_core.InputSignal<ReadonlySet<string> | readonly string[] | null>;
+    /** Rows rendered above and below the viewport window (virtualization overscan). */
+    readonly overscanRows: _angular_core.InputSignal<number>;
+    /** Canvas-width ceiling in px; a zoom that would exceed it is coarsened one step at a time. */
+    readonly maxCanvasPx: _angular_core.InputSignal<number>;
+    /** `false` restores the legacy render-everything path (no vertical/horizontal windowing). */
+    readonly virtualized: _angular_core.InputSignal<boolean>;
+    /** Render the baseline underbar/diamond for rows carrying `baselineStart`/`baselineEnd`. */
+    readonly showBaselines: _angular_core.InputSignal<boolean>;
     /** Fires on a committed bar move / resize with the new ISO `start`/`end`. */
     readonly rowDatesChange: _angular_core.OutputEmitterRef<GanttRowDatesChange>;
     /**
@@ -6532,6 +6631,12 @@ declare class FlyGanttComponent {
     readonly rowDblClick: _angular_core.OutputEmitterRef<string>;
     /** Fires once per committed divider drag / keyboard resize with the new pane width in px. */
     readonly labelWidthChange: _angular_core.OutputEmitterRef<number>;
+    /** Emitted whenever collapse state changes, in controlled or uncontrolled mode. */
+    readonly collapsedIdsChange: _angular_core.OutputEmitterRef<readonly string[]>;
+    /** A row with `hasChildren: true` but no loaded children was expanded — go fetch them. */
+    readonly rowExpand: _angular_core.OutputEmitterRef<string>;
+    /** The component coarsened the requested zoom to stay under `maxCanvasPx`. */
+    readonly effectiveZoomChange: _angular_core.OutputEmitterRef<GanttZoom>;
     private readonly _uid;
     readonly markerId: string;
     readonly HEADER_H: number;
@@ -6540,8 +6645,10 @@ declare class FlyGanttComponent {
     readonly HANDLE_W = 8;
     readonly MIN_LABEL_W = 140;
     readonly MAX_LABEL_W = 720;
+    readonly BASELINE_BAR_H: number;
     readonly selectedId: _angular_core.WritableSignal<string | null>;
-    private readonly _collapsed;
+    /** Uncontrolled collapse state — the source of truth whenever the `collapsedIds` input is `null`. */
+    private readonly _uncontrolledCollapsed;
     /** Live drag preview `{id,start,end}` folded into geometry while a gesture runs. */
     private readonly _dragPreview;
     readonly dragTooltip: _angular_core.WritableSignal<{
@@ -6549,36 +6656,68 @@ declare class FlyGanttComponent {
         y: number;
         text: string;
     } | null>;
-    /** True while a divider drag is in flight (suppresses text selection host-wide). */
-    /** User-chosen pane width; `null` = still following the {@link labelWidth} input. */
     private readonly bodyRef;
+    private readonly scrollElRef;
+    private readonly canvasElRef;
+    private readonly labelsElRef;
     readonly rtl: _angular_core.Signal<boolean>;
-    readonly pxPerDay: _angular_core.Signal<number>;
-    readonly domain: _angular_core.Signal<GanttDomain>;
-    readonly innerWidth: _angular_core.Signal<number>;
-    /** Label-pane width actually rendered — the user's dragged width, else the input. */
-    /** Full visible list after tree flatten/collapse. */
+    /** Effective collapse set: the controlled input when the consumer supplied one, else internal state. */
+    private readonly _collapsed;
+    /** Full visible list after tree flatten/collapse (no `maxRows` cap applied yet). */
     private readonly _flat;
-    /** Capped list actually rendered. */
+    /** `_flat`, capped at `maxRows` when it is positive — unchanged from the pre-A9 contract. */
     readonly visibleRows: _angular_core.Signal<GanttFlatRow[]>;
     readonly overflowCount: _angular_core.Signal<number>;
+    /** TRUE total row count for `aria-rowcount` — independent of `maxRows` (pre-A9 defect §2.4/§6.2). */
+    readonly totalRowCount: _angular_core.Signal<number>;
+    /** Full spacer height — keeps the scrollbar honest; the `<svg>` itself only spans `svgHeight`. */
     readonly bodyHeight: _angular_core.Signal<number>;
     private readonly _resolvedDates;
+    readonly domain: _angular_core.Signal<GanttDomain>;
+    /** Zoom coarsened (if needed) to keep `domain span × pxPerDay` under `maxCanvasPx`. */
+    private readonly _clampedScale;
+    readonly effectiveZoom: _angular_core.Signal<GanttZoom>;
+    readonly pxPerDay: _angular_core.Signal<number>;
+    readonly innerWidth: _angular_core.Signal<number>;
+    private readonly _viewport;
+    /** {@link visibleRows} indices `[firstIndex, lastIndex]` currently rendered. */
+    readonly rowWindow: _angular_core.Signal<RowWindow>;
+    /** Logical horizontal window for decorations, or `null` when non-virtualized. */
+    readonly xWindow: _angular_core.Signal<GanttXWindow | null>;
+    /** Body `<svg>`'s CSS `top` / `viewBox` y-offset — the windowing trick (`./gantt-window`). */
+    readonly svgTop: _angular_core.Signal<number>;
+    /** Body `<svg>`'s own height (window only, not the full spacer). */
+    readonly svgHeight: _angular_core.Signal<number>;
+    private _lastEmittedZoom;
+    constructor();
     readonly weekendBands: _angular_core.Signal<GanttTick[]>;
     readonly lowerTicks: _angular_core.Signal<GanttTick[]>;
     readonly upperTicks: _angular_core.Signal<GanttTick[]>;
     /** Render-space today x, or `null` when today is outside the domain (or disabled). */
     readonly todayX: _angular_core.Signal<number | null>;
+    /** Id→absolute-index into {@link visibleRows}, O(N) on data/collapse only (memo §4.4). */
+    private readonly _indexById;
+    /** Only the windowed slice of {@link visibleRows} (memo §4.4). `index` stays the row's ABSOLUTE
+     *  position — `y = index × rowHeight` — the `viewBox` pan, not this math, hides the rest. */
     readonly rowVms: _angular_core.Signal<GanttRowVm[]>;
     /** Only the rows carrying a tint, so the band pass does not emit an empty rect per row. */
     readonly tintedRows: _angular_core.Signal<GanttRowVm[]>;
-    /** Dependency arrows between currently-rendered rows (missing/collapsed endpoints skipped). */
+    /** Dependency arrows whose y-span intersects the row window — O(E), not O(N). Endpoints are
+     *  resolved via {@link _vmForFlat} directly (not off `rowVms()`) since an edge can cross the
+     *  window with one endpoint outside it — the memo §4.3 rule-2 fix for the pre-A9 "both
+     *  endpoints rendered" predicate, which would erase exactly those crossing arrows. */
     readonly linkVms: _angular_core.Signal<LinkVm[]>;
+    /** Full geometry for one row — shared by `rowVms` and `linkVms` (endpoints outside the window). */
+    private _vmForFlat;
     readonly barHeight: _angular_core.Signal<number>;
     barTop(vm: GanttRowVm): number;
+    /** Baseline underbar's top edge — a thin strip directly beneath the main bar. */
+    baselineBarTop(vm: GanttRowVm): number;
     private milestoneR;
     /** Diamond polygon points for a milestone marker. */
     diamondPoints(vm: GanttRowVm): string;
+    /** Hollow outline diamond for a milestone row's baseline date (its own x, same row's y). */
+    baselineDiamondPoints(vm: GanttRowVm): string;
     /**
      * Link connector x for a milestone. A diamond has no width, so the connector is nudged clear
      * of the marker in the forward-in-time direction (which flips under RTL).
@@ -6604,7 +6743,15 @@ declare class FlyGanttComponent {
     onLabelResizeKeydown(ev: Event): void;
     resetLabelWidth(): void;
     isCollapsed(id: string): boolean;
+    /** Any row in the current data naming `id` as its parent — i.e. children are actually loaded. */
+    private _hasLoadedChildren;
     toggleCollapse(id: string, ev?: Event): void;
+    /** Expand every group (clears all collapse state). */
+    expandAll(): void;
+    /** Collapse every group that has (or asserts) children. */
+    collapseAll(): void;
+    /** Scroll a row into the rendered window and pin it there (deep-link / programmatic focus). */
+    scrollToRow(id: string): void;
     /**
      * Enter/Space on a focused label row selects it (mirrors the pointer click).
      * Typed `Event` (not `KeyboardEvent`) because Angular's strict template checker
@@ -6643,7 +6790,7 @@ declare class FlyGanttComponent {
     private _mapTicks;
     private _ariaFor;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FlyGanttComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlyGanttComponent, "fly-gantt", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dependencies": { "alias": "dependencies"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "resizableLabels": { "alias": "resizableLabels"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; }, { "rowDatesChange": "rowDatesChange"; "dependencyCreate": "dependencyCreate"; "dependencyDelete": "dependencyDelete"; "rowClick": "rowClick"; "rowDblClick": "rowDblClick"; "labelWidthChange": "labelWidthChange"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FlyGanttComponent, "fly-gantt", never, { "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "dependencies": { "alias": "dependencies"; "required": false; "isSignal": true; }; "zoom": { "alias": "zoom"; "required": false; "isSignal": true; }; "showToday": { "alias": "showToday"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "labelWidth": { "alias": "labelWidth"; "required": false; "isSignal": true; }; "resizableLabels": { "alias": "resizableLabels"; "required": false; "isSignal": true; }; "rowHeight": { "alias": "rowHeight"; "required": false; "isSignal": true; }; "maxRows": { "alias": "maxRows"; "required": false; "isSignal": true; }; "collapsedIds": { "alias": "collapsedIds"; "required": false; "isSignal": true; }; "overscanRows": { "alias": "overscanRows"; "required": false; "isSignal": true; }; "maxCanvasPx": { "alias": "maxCanvasPx"; "required": false; "isSignal": true; }; "virtualized": { "alias": "virtualized"; "required": false; "isSignal": true; }; "showBaselines": { "alias": "showBaselines"; "required": false; "isSignal": true; }; }, { "rowDatesChange": "rowDatesChange"; "dependencyCreate": "dependencyCreate"; "dependencyDelete": "dependencyDelete"; "rowClick": "rowClick"; "rowDblClick": "rowDblClick"; "labelWidthChange": "labelWidthChange"; "collapsedIdsChange": "collapsedIdsChange"; "rowExpand": "rowExpand"; "effectiveZoomChange": "effectiveZoomChange"; }, never, never, true, never>;
 }
 
 /** The 14 rendered field kinds. Drives the control the renderer picks. */