ngwr 14.4.0 → 14.5.1

package/graph/styles/_index.scss

@@ -0,0 +1,113 @@
+@use '../../theme/styles' as theme;
+
+.wr-graph {
+  // The scroller's ground and its breathing room around the drawing.
+  --wr-graph-background: var(--wr-color-surface);
+  --wr-graph-padding: 1rem;
+  // Lines and arrowheads are kept quiet beside the cards: 60% of the muted role
+  // over the surface, 2.44:1 on white and 3.47:1 on the dark canvas (token
+  // arithmetic — no contrast gate measures an SVG stroke). That is under the 3:1
+  // WCAG 1.4.11 asks of a meaningful graphic in the light theme, and it is a
+  // maintainer's call rather than an oversight: every relation a line draws is
+  // also written out for assistive technology, and a consumer who needs the
+  // stronger line restores it through this hook.
+  --wr-graph-edge-color: color-mix(in srgb, var(--wr-color-on-surface-muted) 60%, var(--wr-color-surface));
+  // A whole pixel: a fractional stroke is antialiased into a smear that changes
+  // with the device pixel ratio, where a lighter colour stays crisp everywhere.
+  --wr-graph-edge-width: 1px;
+  // The default card, drawn when no `ng-template[wrGraphNode]` is given.
+  --wr-graph-card-background: var(--wr-color-surface);
+  --wr-graph-card-color: var(--wr-color-on-surface);
+  --wr-graph-card-border: var(--wr-color-outline);
+  --wr-graph-card-radius: var(--wr-border-radius-base);
+  --wr-graph-card-padding: 0.5rem 0.75rem;
+  --wr-graph-card-font-size: var(--wr-text-sm);
+
+  display: block;
+  // A grid or flex item's automatic minimum width is its min-content width, and
+  // the stage below is sized inline to the whole drawing — so without this the
+  // host refuses to shrink, stretches its track and the PAGE scrolls sideways.
+  // Zero lets the track decide, and the viewport's `overflow: auto` takes over.
+  min-width: 0;
+  max-width: 100%;
+  font-family: var(--wr-font-family-base);
+
+  // The component scrolls, never the page. `height: 100%` lets a host with a
+  // height constrain it; with no height it simply grows to the drawing.
+  &__viewport {
+    box-sizing: border-box;
+    max-width: 100%;
+    height: 100%;
+    padding: var(--wr-graph-padding);
+    overflow: auto;
+    background: var(--wr-graph-background);
+    border-radius: var(--wr-border-radius-base);
+  }
+
+  // Sized inline from the layout, so the scroll extent is known without measuring.
+  &__stage {
+    position: relative;
+  }
+
+  &__edges,
+  &__node {
+    position: absolute;
+    top: 0;
+    // rtl-ok: x is mirrored in TypeScript for RTL, so the origin stays the physical left edge
+    left: 0;
+  }
+
+  &__edges {
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  &__edge {
+    fill: none;
+    stroke: var(--wr-graph-edge-color);
+    stroke-width: var(--wr-graph-edge-width);
+    stroke-linejoin: round;
+  }
+
+  // The arrowhead. Marker content inherits from the marker's own ancestors, which
+  // is why it takes the hook here rather than from the path that references it.
+  &__edges marker polygon {
+    fill: var(--wr-graph-edge-color);
+  }
+
+  &__node {
+    box-sizing: border-box;
+  }
+
+  &__card {
+    display: flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    padding: var(--wr-graph-card-padding);
+    overflow: hidden;
+    color: var(--wr-graph-card-color);
+    font-size: var(--wr-graph-card-font-size);
+    line-height: 1.25;
+    text-align: center;
+    overflow-wrap: anywhere;
+    background: var(--wr-graph-card-background);
+    border: 1px solid var(--wr-graph-card-border);
+    border-radius: var(--wr-graph-card-radius);
+  }
+
+  // Each node's parents and children: read out, never drawn.
+  &__sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/i18n/ar.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "عداد"
   },
+  "graph": {
+    "label": "مخطط",
+    "parents": "الآباء: {{names}}.",
+    "children": "الأبناء: {{names}}."
+  },
   "progress": {
     "label": "التقدم"
   },

package/i18n/cs.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Ukazatel"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Rodiče: {{names}}.",
+    "children": "Potomci: {{names}}."
+  },
   "progress": {
     "label": "Průběh"
   },

package/i18n/de.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Messanzeige"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Übergeordnet: {{names}}.",
+    "children": "Untergeordnet: {{names}}."
+  },
   "progress": {
     "label": "Fortschritt"
   },

package/i18n/en.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Gauge"
   },
+  "graph": {
+    "label": "Graph",
+    "parents": "Parents: {{names}}.",
+    "children": "Children: {{names}}."
+  },
   "progress": {
     "label": "Progress"
   },

package/i18n/es.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Padres: {{names}}.",
+    "children": "Hijos: {{names}}."
+  },
   "progress": {
     "label": "Progreso"
   },

package/i18n/fr.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Jauge"
   },
+  "graph": {
+    "label": "Graphe",
+    "parents": "Parents : {{names}}.",
+    "children": "Enfants : {{names}}."
+  },
   "progress": {
     "label": "Progression"
   },

package/i18n/he.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "מחוון"
   },
+  "graph": {
+    "label": "גרף",
+    "parents": "הורים: {{names}}.",
+    "children": "ילדים: {{names}}."
+  },
   "progress": {
     "label": "התקדמות"
   },

package/i18n/hi.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "गेज"
   },
+  "graph": {
+    "label": "ग्राफ़",
+    "parents": "पैरेंट: {{names}}।",
+    "children": "चाइल्ड: {{names}}।"
+  },
   "progress": {
     "label": "प्रगति"
   },

package/i18n/id.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Pengukur"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Induk: {{names}}.",
+    "children": "Anak: {{names}}."
+  },
   "progress": {
     "label": "Kemajuan"
   },

package/i18n/it.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicatore"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Genitori: {{names}}.",
+    "children": "Figli: {{names}}."
+  },
   "progress": {
     "label": "Avanzamento"
   },

package/i18n/ja.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "ゲージ"
   },
+  "graph": {
+    "label": "グラフ",
+    "parents": "親：{{names}}。",
+    "children": "子：{{names}}。"
+  },
   "progress": {
     "label": "進行状況"
   },

package/i18n/ko.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "게이지"
   },
+  "graph": {
+    "label": "그래프",
+    "parents": "상위 항목: {{names}}.",
+    "children": "하위 항목: {{names}}."
+  },
   "progress": {
     "label": "진행률"
   },

package/i18n/nl.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Meter"
   },
+  "graph": {
+    "label": "Graaf",
+    "parents": "Ouders: {{names}}.",
+    "children": "Kinderen: {{names}}."
+  },
   "progress": {
     "label": "Voortgang"
   },

package/i18n/pl.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Wskaźnik"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Rodzice: {{names}}.",
+    "children": "Dzieci: {{names}}."
+  },
   "progress": {
     "label": "Postęp"
   },

package/i18n/pt.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Indicador"
   },
+  "graph": {
+    "label": "Grafo",
+    "parents": "Pais: {{names}}.",
+    "children": "Filhos: {{names}}."
+  },
   "progress": {
     "label": "Progresso"
   },

package/i18n/ru.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Индикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Родители: {{names}}.",
+    "children": "Дети: {{names}}."
+  },
   "progress": {
     "label": "Прогресс"
   },

package/i18n/sv.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Mätare"
   },
+  "graph": {
+    "label": "Graf",
+    "parents": "Föräldrar: {{names}}.",
+    "children": "Barn: {{names}}."
+  },
   "progress": {
     "label": "Förlopp"
   },

package/i18n/tr.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Gösterge"
   },
+  "graph": {
+    "label": "Çizge",
+    "parents": "Üst öğeler: {{names}}.",
+    "children": "Alt öğeler: {{names}}."
+  },
   "progress": {
     "label": "İlerleme"
   },

package/i18n/uk.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Індикатор"
   },
+  "graph": {
+    "label": "Граф",
+    "parents": "Батьки: {{names}}.",
+    "children": "Діти: {{names}}."
+  },
   "progress": {
     "label": "Хід виконання"
   },

package/i18n/vi.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "Đồng hồ đo"
   },
+  "graph": {
+    "label": "Đồ thị",
+    "parents": "Nút cha: {{names}}.",
+    "children": "Nút con: {{names}}."
+  },
   "progress": {
     "label": "Tiến trình"
   },

package/i18n/zh-TW.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "儀表"
   },
+  "graph": {
+    "label": "圖",
+    "parents": "父節點：{{names}}。",
+    "children": "子節點：{{names}}。"
+  },
   "progress": {
     "label": "進度"
   },

package/i18n/zh.json

@@ -346,6 +346,11 @@
   "gauge": {
     "label": "仪表盘"
   },
+  "graph": {
+    "label": "图",
+    "parents": "父节点：{{names}}。",
+    "children": "子节点：{{names}}。"
+  },
   "progress": {
     "label": "进度"
   },

package/llms-full.txt

@@ -441,6 +441,16 @@
 - import: `import { WrGradientTextHarness } from 'ngwr/gradient-text/testing'`
 - exports: WrGradientTextHarness, WrGradientTextHarnessFilters
 
+## ngwr/graph
+- import: `import { WrGraph } from 'ngwr/graph'`
+- selector: `ng-template[wrGraphNode]`, `wr-graph`
+- exports: WrGraph, WrGraphNodeTemplate, WrGraphEdge, WrGraphNode, WrGraphNodeContext
+- Draws any graph of blocks joined parent to child — a node can have several parents as well as several children. The layout runs in layers from top to bottom without measuring anything, so a prerendered page ships the finished picture. Display only: the graph scrolls inside its own viewport, and nothing in it is selectable.
+
+## ngwr/graph/testing
+- import: `import { WrGraphHarness } from 'ngwr/graph/testing'`
+- exports: WrGraphHarness, WrGraphNodeHarness, WrGraphHarnessFilters, WrGraphNodeHarnessFilters
+
 ## ngwr/hotkey
 - import: `import { WrHotkey } from 'ngwr/hotkey'`
 - selector: `[wrHotkey]`
@@ -451,7 +461,7 @@
 - import: `import { WrI18n } from 'ngwr/i18n'`
 - selector: `[wrT]`
 - exports: WrI18n, WrTPipe, WrTDirective, WR_I18N_CONFIG, DEFAULT_WR_I18N_CONFIG, WrI18nCatalog, WrI18nConfig, WrI18nConfigResolved, WrI18nParams, WrI18nMissingHandler, WR_I18N_LOADER, WrI18nLoader, WR_I18N_BASE_CATALOGS, WrI18nBaseCatalogs, WrI18nStaticLoader, WrI18nStaticCatalogs, WrI18nStaticScopedCatalogs, WrI18nHttpLoader, WrI18nHttpLoaderConfig, provideWrI18n, provideWrI18nBaseCatalogs, provideWrI18nStaticLoader, provideWrI18nHttpLoader, ProvideWrI18nOptions, useI18nText, readI18nText, useI18nFormatter
-- Reactive i18n service. Active locale lives on a signal, catalogs load lazily through a swappable loader (HTTP or static), and double-brace placeholders interpolate at render time. Scopes let feature modules ship and load their own catalogs.
+- Reactive i18n service. Active locale lives on a signal, catalogs load lazily through a swappable loader (HTTP or static), and double-brace placeholders interpolate at render time. Scopes let feature modules ship and load their own catalogs. Keep ngwr's own strings with `provideWrI18nBaseCatalogs` rather than spreading `wrEn` into your catalog: a spread is shallow, so any namespace you share with ngwr, e.g. `common`, `validation`, `table`, keeps only the side spread last, and the other side's keys stop resolving with nothing logged — ngwr's components fall back to English and a `wrT` read of a lost key renders the raw key.
 
 ## ngwr/i18n/ar
 - import: `import { wrAr } from 'ngwr/i18n/ar'`
@@ -706,7 +716,7 @@
 
 ## ngwr/overlay
 - import: `import { WrOutsideClick } from 'ngwr/overlay'`
-- exports: wrAppendOverlayClose, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, WrResponsiveOverlaysConfig
+- exports: wrAppendOverlayClose, wrFollowDirection, wrMirrorOffsets, WrOutsideClick, WrOverlayContainer, provideWrOverlay, provideWrResponsiveOverlays, WR_OVERLAY, WR_OVERLAY_CONTAINER, WR_RESPONSIVE_OVERLAYS, wrPresentAsSheet, WrResponsiveOverlaysConfig
 
 ## ngwr/page-header
 - import: `import { WrPageHeader } from 'ngwr/page-header'`
@@ -747,7 +757,7 @@
 - import: `import { WrPopover } from 'ngwr/popover'`
 - selector: `[wrPopover]`
 - exports: WrPopover, WrPopoverPosition
-- Anchored content panel. Project a template (popover) or pass a plain string (tooltip — use `mode="tooltip"`). Click, hover, or focus to open. Built on CDK Overlay.
+- Anchored content panel. Project a template (popover) or pass a plain string (tooltip — use `mode="tooltip"`). Click or hover to open; a tooltip also answers a keyboard focus. Built on CDK Overlay.
 
 ## ngwr/popover/testing
 - import: `import { WrPopoverHarness } from 'ngwr/popover/testing'`

package/llms.txt

@@ -1,7 +1,7 @@
 # ngwr
 
 > Angular UI library — standalone, signals-first, zoneless, fully tree-shakable.
-> 225 secondary entry points, 174 component and directive classes, built on
+> 227 secondary entry points, 177 component and directive classes, built on
 > `@angular/cdk` primitives. The only runtime dependency is `tslib`. Docs and
 > live demos: https://ngwr.dev — source: https://github.com/thekhegay/ngwr
 
@@ -84,7 +84,12 @@ Add from their entry points as needed:
   / `select`, and `linkTarget` / `copyable` on `markdown`. There is deliberately no
   `color` key — a bound `[color]="null"` means "no intent", which a default cannot
   express without inventing a sentinel.
-- `provideWrI18n(...)` + `provideWrI18nStaticLoader(...)` — localization.
+- `provideWrI18n(...)` + `provideWrI18nBaseCatalogs({ en: wrEn })` +
+  `provideWrI18nStaticLoader(...)` — localization. ngwr's catalogs go in as a
+  BASE, never spread into yours: a spread is shallow, so any namespace you share
+  with ngwr, e.g. `common`, `validation`, `table`, keeps only the side spread
+  last, and the other side's keys stop resolving with nothing logged — ngwr's
+  components fall back to English and a `wrT` read renders the raw key.
 - `provideWrDateAdapter(...)` — calendar + date-picker (`ngwr/date/adapters/fns`
   or `ngwr/date/adapters/luxon`).
 
@@ -106,8 +111,12 @@ one element at a time; a step whose target is missing is skipped, not floated.
 
 ## Upgrading to v14
 
-Run `ng update ngwr@14`. It rewrites the renames and REPORTS the rest — read its
-output, because the reported half is where the silent failures are.
+Run `ng update ngwr@14`, once, from whatever major the app is on — it runs every
+migration between the installed version and 14, in order. Do not step through the
+majors, and never target a 7.x, 8.x or 9.x release: their schematics die with
+`exports is not defined in ES module scope`. It rewrites the renames and REPORTS
+the rest — read its output, because the reported half is where the silent
+failures are.
 
 Rewritten for you (six renames, one word per concept):
 
@@ -169,7 +178,9 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
   expandable rows, grouping, tree rows (`childrenKey`), summary rows,
   CSV export, virtualized body),
-  `wr-pagination`, `wr-tree`, `wr-virtual-scroll`, `wr-sortable-list`
+  `wr-pagination`, `wr-tree`, `wr-graph` (read-only layered diagram: `nodes`
+  plus `{ from, to }` parent-to-child `edges`, each node a default card or an
+  `ng-template wrGraphNode`), `wr-virtual-scroll`, `wr-sortable-list`
   (drag-to-reorder, with `[wrDragHandle]` — both in ngwr/drag-drop).
 - **Feedback** — `wr-alert`, `wr-result`, `wr-empty`, `wr-skeleton`,
   `wr-spinner`.
@@ -238,17 +249,17 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `wr-tree` and `wr-select` (search mode), alongside the standalone
   `wr-virtual-scroll` wrapper.
 - **Testing** — CDK component harnesses ship beside the components they drive, at
-  `ngwr/<name>/testing`. 70 entry points so far, 104 exported harness names over
-  103 distinct classes — `WrCalendarDayHarness` ships under two, since a date
+  `ngwr/<name>/testing`. 71 entry points so far, 106 exported harness names over
+  105 distinct classes — `WrCalendarDayHarness` ships under two, since a date
   picker's popup IS a calendar — covering the
-  form controls, the overlays, both data views, the navigation / disclosure set
+  form controls, the overlays, the data views, the navigation / disclosure set
   (`tabs`, `stepper`, `carousel`, `pagination`, `segmented`, `collapse`,
   `transfer`) and `markdown`: the form controls
   (`button`, `input`, `textarea`, `checkbox`, `switch`, `radio`, `select`,
   `input-number`, `input-otp`, `slider`, `rating`, `file-upload`, `color-picker`,
   `knob`, `form` for `<wr-form-field>`), the overlays (`date-picker`, `dropdown`,
   `popover`, `dialog`, `drawer`, `action-sheet`, `toast`, `context-menu`, `popconfirm`,
-  `command-palette`, `cascader`, `mention`), the data views (`table`, `tree`),
+  `command-palette`, `cascader`, `mention`), the data views (`table`, `tree`, `graph`),
   `splitter`, `speed-dial`, `lightbox`, `tour`, `calendar`, `event-calendar`,
   `window`, `image-cropper`, every chart and eighteen of the twenty-one animations —
   every control, every overlay and every chart has one. `aurora`, `click-spark`,

package/mcp/providers.js

@@ -46,8 +46,14 @@ const REQUIRED_PROVIDERS = [
         test: /^WrTPipe$|^WrTDirective$|^WrI18n/,
         // Two entry points, and the comment has to say so: the catalog `wrEn` is
         // `ngwr/i18n/en`, not `ngwr/i18n`, which exports neither catalog.
-        provider: "provideWrI18n() + provideWrI18nStaticLoader({ en: wrEn }) // from 'ngwr/i18n' + 'ngwr/i18n/en'",
-        why: 'the pipe and directive read from a catalog you provide',
+        //
+        // `wrEn` goes in as a BASE and the loader carries only the app's keys. A
+        // loader serves only the catalog it is given, so the other way to keep both
+        // is a spread, and a spread is shallow: it silently drops one side of every
+        // namespace the two catalogs share. This line is what an agent pastes, so it
+        // has to be the form that survives the app adding its first `common` key.
+        provider: "provideWrI18n() + provideWrI18nBaseCatalogs({ en: wrEn }) + provideWrI18nStaticLoader({ en: { … } }) // from 'ngwr/i18n' + 'ngwr/i18n/en'",
+        why: "the pipe and directive read from a catalog you provide. Register ngwr's with `provideWrI18nBaseCatalogs`, never spread it into yours: a spread is shallow, so any namespace you share with ngwr, e.g. `common`, `validation`, `table`, keeps only the side spread last, and the other side's keys stop resolving with nothing logged — ngwr's components fall back to English and a `wrT` read of a lost key renders the raw key",
     },
 ];
 export { REQUIRED_PROVIDERS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "14.4.0",
+  "version": "14.5.1",
   "bin": {
     "ngwr-mcp": "mcp/server.js"
   },
@@ -316,6 +316,11 @@
       "types": "./types/ngwr-gradient-text.d.ts",
       "default": "./fesm2022/ngwr-gradient-text.mjs"
     },
+    "./graph": {
+      "sass": "./graph/styles/_index.scss",
+      "types": "./types/ngwr-graph.d.ts",
+      "default": "./fesm2022/ngwr-graph.mjs"
+    },
     "./grid": {
       "sass": "./styles/_grid.scss"
     },
@@ -795,6 +800,10 @@
       "types": "./types/ngwr-gradient-text-testing.d.ts",
       "default": "./fesm2022/ngwr-gradient-text-testing.mjs"
     },
+    "./graph/testing": {
+      "types": "./types/ngwr-graph-testing.d.ts",
+      "default": "./fesm2022/ngwr-graph-testing.mjs"
+    },
     "./hotkey": {
       "types": "./types/ngwr-hotkey.d.ts",
       "default": "./fesm2022/ngwr-hotkey.mjs"