ngwr 10.0.0 → 10.1.0

package/llms.txt

@@ -1,15 +1,15 @@
 # ngwr
 
 > Angular UI library — standalone, signals-first, zoneless, fully tree-shakable.
-> 127 entry points — 105 of them components and directives — built on
+> 130 secondary entry points, 188 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
 
 This file orients AI agents and LLMs that consume ngwr. For exact, current
 component APIs, read the bundled TypeScript types
-(`node_modules/ngwr/types/ngwr-<name>.d.ts`). Note: **ngwr.dev is a single-page
-app** — fetching its routes returns a JS shell, not text. Use the
-machine-readable resources listed at the bottom instead.
+(`node_modules/ngwr/types/ngwr-<name>.d.ts`). ngwr.dev is prerendered, so
+fetching a route returns real HTML you can read; the machine-readable resources
+listed at the bottom are still the faster path for bulk API lookups.
 
 ## Install
 
@@ -52,10 +52,14 @@ Add from their entry points as needed:
 - `provideWrDateAdapter(...)` — calendar + date-picker (`ngwr/date-adapter-fns`
   or `ngwr/date-adapter-luxon`).
 
+Injected rather than provided: `WrTour` (`ngwr/tour`) runs a guided onboarding
+tour — `tour.start([{ target: '[data-tour="save"]', content: '…' }])` spotlights
+one element at a time; a step whose target is missing is skipped, not floated.
+
 ## Schematics — let `ng` wire it
 
 - `ng add ngwr` — installs peers, adds `@use 'ngwr'` to styles, prints provider setup.
-- `ng g ngwr:use WrFoo src/app/x.ts` — adds the import + splices `WrFoo` into that
+- `ng g ngwr:use WrFoo --path src/app/x.ts` — adds the import + splices `WrFoo` into that
   component's `@Component` imports.
 - `ng g ngwr:provider <overlay|icons|toast|i18n|date-adapter|density|theme|…>` —
   adds the matching `provideWr*()` to bootstrap.
@@ -81,9 +85,11 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
   `wr-input-number`, `wr-input-otp`, `wr-date-picker` (date/time/datetime) and
   `wr-date-range-picker` (both in ngwr/date-picker; the range value is
   `[start, end]`, hence a separate component), `wr-file-upload`,
-  `wr-form-field`, `wr-color-picker`.
+  `wr-form-field`, `wr-color-picker`, `wr-transfer` (dual listbox; the value
+  is the RIGHT pane).
 - **Data** — `wr-table` (column pin/resize/drag-reorder, row selection,
-  expandable rows, grouping, summary rows, CSV export, virtualized body),
+  expandable rows, grouping, tree rows (`childrenKey`), summary rows,
+  CSV export, virtualized body),
   `wr-pagination`, `wr-tree`, `wr-virtual-scroll`, `wr-sortable-list`
   (drag-to-reorder).
 - **Feedback** — `wr-alert`, `wr-result`, `wr-empty`, `wr-skeleton`,
@@ -109,19 +115,34 @@ before writing your own. Full catalog: https://ngwr.dev/reference/components.
 - **Icons** — register via `provideWrIcons`, render `<wr-icon name="check" />`.
 - **i18n** — `{{ 'key' | wrT }}` (pipe from `ngwr/i18n`).
 - **Theme** — CSS custom properties `--wr-color-*`, `--wr-border-radius-*`, … set
-  by `provideWrTheme()`.
+  by `provideWrTheme()`. Two contrast tokens per intent, easy to confuse:
+  `--wr-color-<intent>-contrast` is the label ON a filled intent;
+  `--wr-color-<intent>-ink` is the intent used AS text on a surface or its own
+  `-soft` tint. A bare `--wr-color-<intent>` as text fails WCAG AA in light. For
+  muted prose use `--wr-color-on-surface-muted`, not the `medium` intent.
 - **Mobile** — overlays collapse to sheets (`provideWrResponsiveOverlays()`), a
   `responsive` input reflows layout components, a `touch` density preset enlarges
   controls, and `WrHaptics` (ngwr/platform) fires vibration feedback.
 - **Large datasets** — `virtualScroll` is an opt-in input on `wr-table`,
   `wr-tree` and `wr-select` (search mode), alongside the standalone
   `wr-virtual-scroll` wrapper.
+- **Scheduling** — `wr-event-calendar` covers month / week / day in one
+  component. `events` is an input the calendar never writes to: a drag emits
+  `eventChange` with the proposed start / end, and you apply it. Event `end` is
+  EXCLUSIVE. `editable` turns on drag and resize; `Alt` + arrows do the same
+  from the keyboard.
 
 ## Resources (machine-readable)
 
 - This quick-ref: https://ngwr.dev/llms.txt
 - Full reference (every entry point + selector + description):
   https://ngwr.dev/llms-full.txt
+- **One page as markdown — append `.md` to any docs URL.**
+  `https://ngwr.dev/reference/components/select` also serves
+  `https://ngwr.dev/reference/components/select.md`: the same page as markdown,
+  prose and code samples and API tables, without the site chrome. Prefer it over
+  `llms-full.txt` when you already know which component you need. Each HTML page
+  advertises its twin as `<link rel="alternate" type="text/markdown">`.
 - All site URLs (for crawlers): https://ngwr.dev/sitemap.xml
 - Source, README, per-component `.d.ts` types: https://github.com/thekhegay/ngwr
   (installed at `node_modules/ngwr/types/ngwr-<name>.d.ts`; the package also

package/loading-bar/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-loading-bar {
   position: fixed;
   top: 0;

package/marquee/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Endless marquee (reactbits LogoLoop port).
 // Vars driven from component inputs:
 //   --wr-marquee-gap         gap between items (px)
@@ -62,7 +67,7 @@
     image-rendering: -webkit-optimize-contrast;
     -webkit-user-drag: none;
     pointer-events: none;
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
   }
 
   &--scale-hover &__item {
@@ -76,7 +81,7 @@
   }
 
   &--scale-hover &__node {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: transform var(--wr-duration-slow) var(--wr-ease-out);
   }
 
   &__link {

package/overlay/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 // Shared presentation styles for responsive (bottom-sheet) overlays.
 // Added to a component's overlay panel (`wr-dialog-panel`,
 // `wr-select-overlay`, …) when `provideWrResponsiveOverlays()` or a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngwr",
-  "version": "10.0.0",
+  "version": "10.1.0",
   "license": "MIT",
   "description": "Signals-first Angular UI library: 100+ standalone, zoneless-ready components with native Signal Forms, SSR-safe rendering and CSS-variable theming.",
   "author": "Roman Khegay <rk@garuna.dev> (https://garuna.dev)",
@@ -641,6 +641,10 @@
       "types": "./types/ngwr-directives.d.ts",
       "default": "./fesm2022/ngwr-directives.mjs"
     },
+    "./event-calendar": {
+      "types": "./types/ngwr-event-calendar.d.ts",
+      "default": "./fesm2022/ngwr-event-calendar.mjs"
+    },
     "./fuzzy-text": {
       "types": "./types/ngwr-fuzzy-text.d.ts",
       "default": "./fesm2022/ngwr-fuzzy-text.mjs"
@@ -693,6 +697,14 @@
       "types": "./types/ngwr-storage.d.ts",
       "default": "./fesm2022/ngwr-storage.mjs"
     },
+    "./tour": {
+      "types": "./types/ngwr-tour.d.ts",
+      "default": "./fesm2022/ngwr-tour.mjs"
+    },
+    "./transfer": {
+      "types": "./types/ngwr-transfer.d.ts",
+      "default": "./fesm2022/ngwr-transfer.mjs"
+    },
     "./utils": {
       "types": "./types/ngwr-utils.d.ts",
       "default": "./fesm2022/ngwr-utils.mjs"

package/popover/styles/_index.scss

@@ -20,18 +20,54 @@ $_arrow-inset: 0.625rem; // distance from the panel corner for the -start / -end
 
 // edge = which side of the panel the arrow hangs off; align = where along that side.
 $_arrow-placement: (
-  top: (bottom, center),
-  top-start: (bottom, start),
-  top-end: (bottom, end),
-  bottom: (top, center),
-  bottom-start: (top, start),
-  bottom-end: (top, end),
-  left: (right, center),
-  left-start: (right, start),
-  left-end: (right, end),
-  right: (left, center),
-  right-start: (left, start),
-  right-end: (left, end),
+  top: (
+    bottom,
+    center,
+  ),
+  top-start: (
+    bottom,
+    start,
+  ),
+  top-end: (
+    bottom,
+    end,
+  ),
+  bottom: (
+    top,
+    center,
+  ),
+  bottom-start: (
+    top,
+    start,
+  ),
+  bottom-end: (
+    top,
+    end,
+  ),
+  left: (
+    right,
+    center,
+  ),
+  left-start: (
+    right,
+    start,
+  ),
+  left-end: (
+    right,
+    end,
+  ),
+  right: (
+    left,
+    center,
+  ),
+  right-start: (
+    left,
+    start,
+  ),
+  right-end: (
+    left,
+    end,
+  ),
 );
 
 /// Positions the arrow against `$edge`, offset outwards by `$pull`.

package/pull-to-refresh/styles/_index.scss

@@ -1,3 +1,8 @@
+// Pull the whole theme so a standalone `@use 'ngwr/<name>'` brings in every
+// design token this stylesheet references. Sass deduplicates `@use` per
+// compilation, so the umbrella sheet still emits the theme only once.
+@use '../../theme/styles' as theme;
+
 .wr-pull-to-refresh {
   display: block;
   position: relative;

package/result/styles/_index.scss

@@ -48,15 +48,15 @@
   }
 
   &--success &__icon {
-    color: var(--wr-color-success);
+    color: var(--wr-color-success-ink);
   }
 
   &--warning &__icon {
-    color: var(--wr-color-warning);
+    color: var(--wr-color-warning-ink);
   }
 
   &--error &__icon {
-    color: var(--wr-color-danger);
+    color: var(--wr-color-danger-ink);
   }
 
   &--info &__icon {

package/schematics/icon-set/index.js

@@ -9,27 +9,60 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
 /**
- * Curated common icon sets. Identifiers match `ngwr/icon` exports — kept
- * short on purpose so the generated file stays readable.
+ * Curated icon sets, as `<name used in templates>` → `<lucide export>`.
+ *
+ * These used to be bare identifiers imported straight from `ngwr/icon`, which
+ * never compiled: that entry point exports only `WrIcon`, `provideWrIcons` and
+ * `svgIcon`, never the icons themselves. Icons come from an adapter, so the
+ * generated file registers them through `lucideIcons()` — the same wiring
+ * `ng add ngwr` produces.
  */
 const SETS = {
-    basic: ['checkmark', 'close', 'add', 'edit', 'trash', 'search', 'copy'],
-    navigation: [
-        'chevronDown',
-        'chevronLeft',
-        'chevronRight',
-        'chevronUp',
-        'arrowBack',
-        'arrowForward',
-        'arrowTop',
-        'arrowBottom',
-        'menu',
-        'dotsHorizontal',
-        'dotsVertical',
-    ],
-    forms: ['eye', 'eyeOff', 'lock', 'lockOpened', 'calendar', 'time', 'filter', 'checkmark', 'close'],
-    feedback: ['alert', 'alertCircle', 'infoCircleOutline', 'checkmarkCircle', 'closeCircle', 'warning', 'bell'],
+    basic: {
+        checkmark: 'Check',
+        close: 'X',
+        add: 'Plus',
+        edit: 'Pencil',
+        trash: 'Trash2',
+        search: 'Search',
+        copy: 'Copy',
+    },
+    navigation: {
+        'chevron-down': 'ChevronDown',
+        'chevron-left': 'ChevronLeft',
+        'chevron-right': 'ChevronRight',
+        'chevron-up': 'ChevronUp',
+        'arrow-back': 'ArrowLeft',
+        'arrow-forward': 'ArrowRight',
+        'arrow-top': 'ArrowUp',
+        'arrow-bottom': 'ArrowDown',
+        menu: 'Menu',
+        'dots-horizontal': 'MoreHorizontal',
+        'dots-vertical': 'MoreVertical',
+    },
+    forms: {
+        eye: 'Eye',
+        'eye-off': 'EyeOff',
+        lock: 'Lock',
+        'lock-opened': 'LockOpen',
+        calendar: 'Calendar',
+        time: 'Clock',
+        filter: 'Filter',
+        checkmark: 'Check',
+        close: 'X',
+    },
+    feedback: {
+        alert: 'TriangleAlert',
+        'alert-circle': 'CircleAlert',
+        'info-circle': 'Info',
+        'checkmark-circle': 'CircleCheck',
+        'close-circle': 'CircleX',
+        warning: 'TriangleAlert',
+        bell: 'Bell',
+    },
 };
+/** Every icon this schematic knows how to map, merged across the curated sets. */
+const KNOWN_ICONS = Object.values(SETS).reduce((acc, set) => ({ ...acc, ...set }), {});
 /** Default fallback when neither `set` nor `icons` is supplied. */
 const DEFAULT_SET = 'basic';
 function iconSet(options) {
@@ -44,38 +77,54 @@ function iconSet(options) {
         const dirPath = options.path ?? `${sourceRoot}/app`;
         const fileName = (options.name ?? 'icons').replace(/\.ts$/, '');
         const filePath = `${dirPath}/${fileName}.ts`;
-        // Build the deduped icon list — set + explicit icons, or default fallback.
-        const fromSet = options.set ? (SETS[options.set] ?? []) : [];
-        const fromList = options.icons
+        // Build the deduped icon map — set + explicit icons, or default fallback.
+        const fromSet = options.set ? (SETS[options.set] ?? {}) : {};
+        const requested = options.icons
             ? options.icons
                 .split(',')
                 .map(s => s.trim())
                 .filter(Boolean)
             : [];
-        const icons = unique([...fromSet, ...fromList]);
-        if (icons.length === 0)
-            icons.push(...SETS[DEFAULT_SET]);
+        // schema.json promises unknown names are "flagged but not blocked" — actually do it.
+        const unknown = requested.filter(name => !(name in KNOWN_ICONS));
+        if (unknown.length > 0) {
+            context.logger.warn(`ngwr:icon-set: no lucide mapping for ${unknown.join(', ')} — skipped. ` +
+                `Known names: ${Object.keys(KNOWN_ICONS).sort().join(', ')}.`);
+        }
+        const picked = { ...fromSet };
+        for (const name of requested) {
+            if (name in KNOWN_ICONS)
+                picked[name] = KNOWN_ICONS[name];
+        }
+        if (Object.keys(picked).length === 0)
+            Object.assign(picked, SETS[DEFAULT_SET]);
         if (tree.exists(filePath)) {
             context.logger.warn(`ngwr: ${filePath} already exists — skipping. Pass --name to write a different file, or delete it first.`);
             return tree;
         }
         const exportName = options.exportName ?? 'APP_ICONS';
-        const importList = icons.join(', ');
-        const arrayList = icons.join(', ');
-        tree.create(filePath, renderFile(importList, exportName, arrayList));
-        context.logger.info(`✓ Created ${filePath} with ${icons.length} icons.`);
+        tree.create(filePath, renderFile(picked, exportName));
+        context.logger.info(`✓ Created ${filePath} with ${Object.keys(picked).length} icons.`);
         context.logger.info(printWiringHint(fileName, exportName));
         return tree;
     };
 }
-function renderFile(importList, exportName, arrayList) {
+function renderFile(icons, exportName) {
+    const names = Object.keys(icons);
+    // Two icon names can share one glyph (alert / warning), so the import list is
+    // deduped while the map keeps both keys.
+    const imports = [...new Set(names.map(n => icons[n]))].sort().join(', ');
+    const entries = names.map(n => `  '${n}': ${icons[n]},`).join('\n');
     return `/**
  * Tree-shaken ngwr icon set. Generated by \`ng g ngwr:icon-set\`.
  * Edit freely — re-running with --name=<other> writes a separate file.
  */
-import { ${importList} } from 'ngwr/icon';
+import { lucideIcons } from 'ngwr/icon/adapters/lucide';
+import { ${imports} } from 'lucide';
 
-export const ${exportName} = [${arrayList}] as const;
+export const ${exportName} = lucideIcons({
+${entries}
+});
 `;
 }
 function printWiringHint(fileName, exportName) {
@@ -90,7 +139,4 @@ Next step — wire the set into bootstrap:
   });
 `;
 }
-function unique(list) {
-    return Array.from(new Set(list));
-}
 exports.default = iconSet;

package/schematics/icon-set/schema.json

@@ -8,12 +8,17 @@
       "type": "string",
       "default": "icons",
       "description": "Output file name (without extension).",
-      "$default": { "$source": "argv", "index": 0 }
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
     },
     "project": {
       "type": "string",
       "description": "Target Angular project. Defaults to the workspace default project.",
-      "$default": { "$source": "projectName" }
+      "$default": {
+        "$source": "projectName"
+      }
     },
     "path": {
       "type": "string",
@@ -27,7 +32,7 @@
     },
     "icons": {
       "type": "string",
-      "description": "Comma-separated list of ngwr icon names (e.g. `plus,trash,checkmark`). Unknown names are flagged but not blocked."
+      "description": "Comma-separated icon names from the curated sets (e.g. `add,trash,checkmark`). Names with no lucide mapping are reported and skipped."
     },
     "exportName": {
       "type": "string",

package/schematics/ng-add/index.js

@@ -25,8 +25,11 @@ const BASE_PEERS = [
 const DATE_ADAPTER_PEERS = {
     none: [],
     native: [],
-    'date-fns': [['date-fns', '>=3.0.0 || >=4.0.0']],
-    luxon: [['luxon', '>=3.0.0']],
+    // Keep these identical to `peerDependencies` in projects/lib/package.json.
+    // They had drifted to `>=` unions, which reduce to an uncapped `>=3.0.0` and
+    // would happily install a future major the library does not support.
+    'date-fns': [['date-fns', '^3.0.0 || ^4.0.0']],
+    luxon: [['luxon', '^3.0.0']],
 };
 /** Adapter classes named in the next-steps snippet for each choice. */
 const DATE_ADAPTER_PROVIDER = {

package/schematics/page/templates.js

@@ -23,14 +23,14 @@ function renderForm(dashName, pascalName) {
 import { FormsModule } from '@angular/forms';
 
 import { WrButton } from 'ngwr/button';
-import { WrFormField, WrLabel, WrErrorMessage } from 'ngwr/form';
+import { WrFormField } from 'ngwr/form';
 import { WrInput } from 'ngwr/input';
 
 @Component({
   selector: 'app-${dashName}',
   templateUrl: './${dashName}.html',
   styleUrl: './${dashName}.scss',
-  imports: [FormsModule, WrButton, WrFormField, WrLabel, WrErrorMessage, WrInput],
+  imports: [FormsModule, WrButton, WrFormField, WrInput],
 })
 export default class ${pascalName} {
   protected readonly name = signal('');
@@ -53,13 +53,11 @@ export default class ${pascalName} {
     const html = `<form class="${dashName}" (ngSubmit)="onSubmit()">
   <h1>${titleCase(pascalName)}</h1>
 
-  <wr-form-field>
-    <wr-label>Name</wr-label>
+  <wr-form-field label="Name" required>
     <input wrInput [(ngModel)]="name" name="name" required />
   </wr-form-field>
 
-  <wr-form-field>
-    <wr-label>Email</wr-label>
+  <wr-form-field label="Email" required>
     <input wrInput type="email" [(ngModel)]="email" name="email" required />
   </wr-form-field>
 
@@ -83,6 +81,7 @@ function renderTable(dashName, pascalName) {
     const ts = `import { Component, signal } from '@angular/core';
 
 import { WrTable } from 'ngwr/table';
+import type { WrTableColumns } from 'ngwr/table';
 import { WrPagination } from 'ngwr/pagination';
 
 interface Row {
@@ -98,7 +97,11 @@ interface Row {
   imports: [WrTable, WrPagination],
 })
 export default class ${pascalName} {
-  protected readonly columns = ['id', 'name', 'status'] as const;
+  protected readonly columns: WrTableColumns = {
+    id: { title: 'ID' },
+    name: { title: 'Name', sortable: true },
+    status: { title: 'Status' },
+  };
 
   protected readonly rows = signal<readonly Row[]>([
     { id: 1, name: 'Alpha', status: 'active' },
@@ -114,11 +117,11 @@ export default class ${pascalName} {
     const html = `<section class="${dashName}">
   <h1>${titleCase(pascalName)}</h1>
 
-  <wr-table [data]="rows()" [columns]="columns" />
+  <wr-table [columns]="columns" [items]="rows()" />
 
   <wr-pagination
-    [(page)]="page"
-    [pageSize]="pageSize()"
+    [(currentPage)]="page"
+    [(pageSize)]="pageSize"
     [total]="total()"
   />
 </section>
@@ -137,13 +140,12 @@ function renderDashboard(dashName, pascalName) {
 
 import { WrCard } from 'ngwr/card';
 import { WrStatistic } from 'ngwr/statistic';
-import { WrCountUp } from 'ngwr/counter';
 
 @Component({
   selector: 'app-${dashName}',
   templateUrl: './${dashName}.html',
   styleUrl: './${dashName}.scss',
-  imports: [WrCard, WrStatistic, WrCountUp],
+  imports: [WrCard, WrStatistic],
 })
 export default class ${pascalName} {
   protected readonly users = signal(1284);
@@ -156,21 +158,15 @@ export default class ${pascalName} {
 
   <div class="${dashName}__grid">
     <wr-card>
-      <wr-statistic title="Users">
-        <wr-count-up [to]="users()" />
-      </wr-statistic>
+      <wr-statistic label="Users" [value]="users()" />
     </wr-card>
 
     <wr-card>
-      <wr-statistic title="Revenue" prefix="$">
-        <wr-count-up [to]="revenue()" />
-      </wr-statistic>
+      <wr-statistic label="Revenue" prefix="$" [value]="revenue()" />
     </wr-card>
 
     <wr-card>
-      <wr-statistic title="Active">
-        <wr-count-up [to]="active()" />
-      </wr-statistic>
+      <wr-statistic label="Active" [value]="active()" />
     </wr-card>
   </div>
 </section>

package/schematics/provider/index.js

@@ -8,15 +8,30 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const schematics_1 = require("@angular-devkit/schematics");
 const workspace_1 = require("@schematics/angular/utility/workspace");
+// Every entry here has to name a factory that `ngwr` actually exports, with a
+// call that type-checks. `ngwr/loading-bar` and `ngwr/cookie` used to be listed
+// too, but neither ships a provider — they expose the injectable services
+// `WrLoadingBar` / `WrCookie` and need no bootstrap wiring at all, so offering
+// to splice a provider for them only ever produced code that would not compile.
 const PROVIDERS = {
     overlay: { subpath: 'ngwr/overlay', factory: 'provideWrOverlay', call: 'provideWrOverlay()' },
     icons: {
+        // `ngwr/icon` exports only WrIcon / provideWrIcons / svgIcon — there are no
+        // bare icon exports. Icons come from an adapter, exactly as `ng add` wires them.
         subpath: 'ngwr/icon',
         factory: 'provideWrIcons',
-        call: 'provideWrIcons([plus, trash])',
-        extras: [['plus, trash', 'ngwr/icon']],
+        call: 'provideWrIcons(lucideIcons({ plus: Plus, trash: Trash2 }))',
+        extras: [
+            ['lucideIcons', 'ngwr/icon/adapters/lucide'],
+            ['Plus, Trash2', 'lucide'],
+        ],
+    },
+    // `provideWrToastConfig` takes a required config object, so the call cannot be bare.
+    toast: {
+        subpath: 'ngwr/toast',
+        factory: 'provideWrToastConfig',
+        call: 'provideWrToastConfig({})',
     },
-    toast: { subpath: 'ngwr/toast', factory: 'provideWrToast', call: 'provideWrToast()' },
     i18n: { subpath: 'ngwr/i18n', factory: 'provideWrI18n', call: 'provideWrI18n()' },
     'date-adapter': {
         subpath: 'ngwr/date-adapter',
@@ -24,12 +39,6 @@ const PROVIDERS = {
         call: 'provideWrDateAdapter()',
     },
     density: { subpath: 'ngwr/density', factory: 'provideWrDensity', call: 'provideWrDensity()' },
-    'loading-bar': {
-        subpath: 'ngwr/loading-bar',
-        factory: 'provideWrLoadingBar',
-        call: 'provideWrLoadingBar()',
-    },
-    cookie: { subpath: 'ngwr/cookie', factory: 'provideWrCookie', call: 'provideWrCookie()' },
     storage: { subpath: 'ngwr/storage', factory: 'provideWrStorage', call: 'provideWrStorage()' },
     theme: { subpath: 'ngwr/theme', factory: 'provideWrTheme', call: 'provideWrTheme()' },
 };
@@ -46,9 +55,11 @@ function provider(options) {
         const original = tree.readText(filePath);
         let next = original;
         next = ensureImport(next, spec.factory, spec.subpath);
-        if (options.name === 'icons') {
-            next = ensureImport(next, 'plus', 'ngwr/icon');
-            next = ensureImport(next, 'trash', 'ngwr/icon');
+        // Drive the extra imports off `extras` rather than special-casing a provider
+        // name here: the two used to drift apart, and the hard-coded branch was
+        // emitting icon names that `ngwr/icon` has never exported.
+        for (const [symbols, subpath] of spec.extras ?? []) {
+            next = ensureImport(next, symbols, subpath);
         }
         next = ensureProviderCall(next, spec.call);
         if (next === original) {
@@ -113,10 +124,17 @@ function escapeRegExp(value) {
     return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 function printSnippet(spec) {
+    // This runs when no bootstrap file could be resolved, so the snippet is all the
+    // user gets — it has to include `extras`, or the printed code references symbols
+    // it never imports. That was exactly the gap `extras` was declared to close.
+    const imports = [
+        `  import { ${spec.factory} } from '${spec.subpath}';`,
+        ...(spec.extras ?? []).map(([symbols, subpath]) => `  import { ${symbols} } from '${subpath}';`),
+    ].join('\n');
     return `
 ngwr:provider — copy this into your bootstrap:
 
-  import { ${spec.factory} } from '${spec.subpath}';
+${imports}
 
   bootstrapApplication(AppComponent, {
     providers: [/* …, */ ${spec.call}],