@konce-pt/angular 0.4.0 → 0.6.0

package/README.md

@@ -37,11 +37,11 @@
 ## Installation
 
 ```bash
-npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
+npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 # or: pnpm add / yarn add
 ```
 
-Peer dependencies: `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/cdk` (all `^22`).
+`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code). Optional: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) for the mobile-first layout system — its Angular directives live in `@konce-pt/angular/grid`.
 
 ## Setup
 
@@ -64,9 +64,18 @@ Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `
 
 ```ts
 import { provideZonelessChangeDetection } from '@angular/core';
-// providers: [provideZonelessChangeDetection(), /* provideKptTablerIcons() */]
+// import { provideKptI18n } from '@konce-pt/angular';
+// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
+
+providers: [
+  provideZonelessChangeDetection(),   // required (zoneless)
+  // provideKptI18n({ locale: 'pl' }), // optional — UI is English by default; set for Polish/other
+  // provideKptTablerIcons(),          // optional — full Tabler icon set
+]
 ```
 
+The UI language defaults to **English** and works with **zero config** — `provideKptI18n(...)` is optional and only needed for Polish (or a custom language). See [Internationalization](#internationalization-i18n) below.
+
 Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
 
 > **Why not `import '…css'` in `main.ts`?** Angular CLI (`@angular/build`) turns side-effect CSS imports into a separate stylesheet that isn't linked from `index.html`, so the app builds **without styles**. Use `angular.json → styles[]` instead.
@@ -169,11 +178,11 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 
 ## Internationalization (i18n)
 
-Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from a signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
+Component labels ship in **English (default)** and **Polish**. The `KptI18n` service is `providedIn: 'root'`, so **English works out of the box with no provider**. Call `provideKptI18n(...)` only to start in Polish (or another language), or to register/override dictionaries. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from this signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
 
 ```ts
 import { provideKptI18n } from '@konce-pt/angular';
-// providers: [provideKptI18n({ locale: 'pl' })]   // Polish UI
+// providers: [provideKptI18n({ locale: 'pl' })]   // optional — Polish UI (EN is the default)
 ```
 
 Switch at runtime:
@@ -232,9 +241,11 @@ Calendar weekday/month names come from the browser's `Intl` API for the active l
 ### Instalacja
 
 ```bash
-npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
+npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 ```
 
+`@angular/core`, `@angular/common` i `@angular/forms` (`^22`) są już w aplikacji Angulara; **`@angular/cdk` (`^22`) to wymagany peer** — komponenty overlay (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) bazują na CDK Overlay — więc instaluj go jawnie (powyżej). Opcjonalnie: `@konce-pt/validators` (walidatory PL: NIP, REGON, PESEL, IBAN, kod pocztowy).
+
 ### Konfiguracja
 
 **Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
@@ -251,15 +262,33 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
 
 > W Angular CLI **nie** używaj `import '…css'` w `main.ts` — bundler wrzuca taki CSS do osobnego, niepodlinkowanego arkusza i aplikacja jest bez stylów. Dla **Vite/webpack** import w `main.ts` działa (tak robi playground).
 
+Zoneless bootstrap (Angular 22) w konfiguracji aplikacji — bez importów CSS w `main.ts`:
+
+```ts
+import { provideZonelessChangeDetection } from '@angular/core';
+// import { provideKptI18n } from '@konce-pt/angular';
+// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
+
+providers: [
+  provideZonelessChangeDetection(),   // wymagane (zoneless)
+  // provideKptI18n({ locale: 'pl' }), // opcjonalne — UI domyślnie po angielsku; ustaw dla PL/innego
+  // provideKptTablerIcons(),          // opcjonalne — pełny zestaw Tabler
+]
+```
+
+Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** — `provideKptI18n(...)` jest opcjonalny, potrzebny tylko dla polskiego (lub własnego języka); szczegóły w sekcji i18n niżej.
+
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+Układ strony: `@konce-pt/grid` (osobna paczka CSS) plus dyrektywy `[kptGrid]`, `[kptCol]`, `[kptFlex]` z `@konce-pt/angular/grid` — siatka mobile-first, utilities flexbox i opcjonalne container queries.
+
 ### Internacjonalizacja (i18n)
 
-Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
+Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
 
 ```ts
 import { provideKptI18n } from '@konce-pt/angular';
-// providers: [provideKptI18n({ locale: 'pl' })]   // polski interfejs
+// providers: [provideKptI18n({ locale: 'pl' })]   // opcjonalne — polski interfejs (EN domyślnie)
 ```
 
 Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.

package/dist/README.md

@@ -37,11 +37,11 @@
 ## Installation
 
 ```bash
-npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
+npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 # or: pnpm add / yarn add
 ```
 
-Peer dependencies: `@angular/core`, `@angular/common`, `@angular/forms`, `@angular/cdk` (all `^22`).
+`@angular/core`, `@angular/common` and `@angular/forms` (all `^22`) are already in an Angular app; **`@angular/cdk` (`^22`) is a required peer** — overlay components (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) build on the CDK Overlay — so install it explicitly (above). Optional: `@konce-pt/validators` for the Polish-market validators (NIP, REGON, PESEL, IBAN, postal code). Optional: [`@konce-pt/grid`](https://www.npmjs.com/package/@konce-pt/grid) for the mobile-first layout system — its Angular directives live in `@konce-pt/angular/grid`.
 
 ## Setup
 
@@ -64,9 +64,18 @@ Zoneless bootstrap (Angular 22) lives in your app config — no CSS imports in `
 
 ```ts
 import { provideZonelessChangeDetection } from '@angular/core';
-// providers: [provideZonelessChangeDetection(), /* provideKptTablerIcons() */]
+// import { provideKptI18n } from '@konce-pt/angular';
+// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
+
+providers: [
+  provideZonelessChangeDetection(),   // required (zoneless)
+  // provideKptI18n({ locale: 'pl' }), // optional — UI is English by default; set for Polish/other
+  // provideKptTablerIcons(),          // optional — full Tabler icon set
+]
 ```
 
+The UI language defaults to **English** and works with **zero config** — `provideKptI18n(...)` is optional and only needed for Polish (or a custom language). See [Internationalization](#internationalization-i18n) below.
+
 Dark theme: set `<html data-theme="dark">` (or rely on `prefers-color-scheme`).
 
 > **Why not `import '…css'` in `main.ts`?** Angular CLI (`@angular/build`) turns side-effect CSS imports into a separate stylesheet that isn't linked from `index.html`, so the app builds **without styles**. Use `angular.json → styles[]` instead.
@@ -169,11 +178,11 @@ import { provideKptTablerIcons } from '@konce-pt/angular/icons';
 
 ## Internationalization (i18n)
 
-Component labels ship in **English (default)** and **Polish**. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from a signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
+Component labels ship in **English (default)** and **Polish**. The `KptI18n` service is `providedIn: 'root'`, so **English works out of the box with no provider**. Call `provideKptI18n(...)` only to start in Polish (or another language), or to register/override dictionaries. All user-facing strings — aria-labels, empty states, paginator, calendars, rich-text menus — read from this signal-based service, so switching locale updates the UI instantly (zoneless-friendly).
 
 ```ts
 import { provideKptI18n } from '@konce-pt/angular';
-// providers: [provideKptI18n({ locale: 'pl' })]   // Polish UI
+// providers: [provideKptI18n({ locale: 'pl' })]   // optional — Polish UI (EN is the default)
 ```
 
 Switch at runtime:
@@ -232,9 +241,11 @@ Calendar weekday/month names come from the browser's `Intl` API for the active l
 ### Instalacja
 
 ```bash
-npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
+npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles @angular/cdk
 ```
 
+`@angular/core`, `@angular/common` i `@angular/forms` (`^22`) są już w aplikacji Angulara; **`@angular/cdk` (`^22`) to wymagany peer** — komponenty overlay (select, autocomplete, datepicker, date-range, dialog, drawer, tooltip, popover, menu…) bazują na CDK Overlay — więc instaluj go jawnie (powyżej). Opcjonalnie: `@konce-pt/validators` (walidatory PL: NIP, REGON, PESEL, IBAN, kod pocztowy).
+
 ### Konfiguracja
 
 **Angular CLI (zalecane)** — dodaj CSS do tablicy **`styles`** w `angular.json`; kolejność ważna, `src/styles.scss` **na końcu**:
@@ -251,15 +262,33 @@ npm i @konce-pt/angular @konce-pt/tokens @konce-pt/styles
 
 > W Angular CLI **nie** używaj `import '…css'` w `main.ts` — bundler wrzuca taki CSS do osobnego, niepodlinkowanego arkusza i aplikacja jest bez stylów. Dla **Vite/webpack** import w `main.ts` działa (tak robi playground).
 
+Zoneless bootstrap (Angular 22) w konfiguracji aplikacji — bez importów CSS w `main.ts`:
+
+```ts
+import { provideZonelessChangeDetection } from '@angular/core';
+// import { provideKptI18n } from '@konce-pt/angular';
+// import { provideKptTablerIcons } from '@konce-pt/angular/icons';
+
+providers: [
+  provideZonelessChangeDetection(),   // wymagane (zoneless)
+  // provideKptI18n({ locale: 'pl' }), // opcjonalne — UI domyślnie po angielsku; ustaw dla PL/innego
+  // provideKptTablerIcons(),          // opcjonalne — pełny zestaw Tabler
+]
+```
+
+Język UI to domyślnie **angielski** i działa **bez żadnej konfiguracji** — `provideKptI18n(...)` jest opcjonalny, potrzebny tylko dla polskiego (lub własnego języka); szczegóły w sekcji i18n niżej.
+
 Motyw ciemny: `<html data-theme="dark">`; nadpisania `--kpt-color-*` w `styles.scss`. Pełny zestaw ikon Tabler: `provideKptTablerIcons()` z `@konce-pt/angular/icons`.
 
+Układ strony: `@konce-pt/grid` (osobna paczka CSS) plus dyrektywy `[kptGrid]`, `[kptCol]`, `[kptFlex]` z `@konce-pt/angular/grid` — siatka mobile-first, utilities flexbox i opcjonalne container queries.
+
 ### Internacjonalizacja (i18n)
 
-Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
+Etykiety komponentów są dostępne po **angielsku (domyślnie)** i **polsku**. Serwis `KptI18n` jest `providedIn: 'root'`, więc **angielski działa od razu, bez providera**. `provideKptI18n(...)` wołasz tylko, by wystartować po polsku (lub w innym języku) albo zarejestrować/nadpisać słowniki. Wszystkie napisy (aria-label, stany puste, paginator, kalendarze, menu edytora) pochodzą z tego serwisu opartego o sygnały — zmiana języka odświeża UI natychmiast (zoneless).
 
 ```ts
 import { provideKptI18n } from '@konce-pt/angular';
-// providers: [provideKptI18n({ locale: 'pl' })]   // polski interfejs
+// providers: [provideKptI18n({ locale: 'pl' })]   // opcjonalne — polski interfejs (EN domyślnie)
 ```
 
 Przełączanie w runtime: `inject(KptI18n).setLocale('en')`.

package/dist/charts/src/lib/llms.txt

@@ -0,0 +1,51 @@
+# KptChart (kpt-chart)
+
+Wykres SVG w czystym Angularze (sygnały, zoneless), bez zależności typu Chart.js/D3.
+Rdzeń obliczeń to czysty TypeScript (przenośny do React w Fazie 2).
+Import: `import { KptChart } from '@konce-pt/angular/charts';`
+
+## Typy wykresów (config.type)
+- `line` — liniowy; interpolacja `linear` | `cubic` | `cubic-monotonic`; `area?: boolean`, `points?: boolean`,
+  `crosshair?: boolean` (hover punktu → pionowa prowadnica + podświetlona pigułka etykiety osi X)
+- `bar` — słupkowy; `orientation: 'vertical' | 'horizontal'`, `borderRadius?: px`
+- `pie` — kołowy
+- `doughnut` — pierścieniowy; `innerRadius?: 0..1` (domyślnie 0.6)
+- `polarArea` — równe kąty, promień ∝ wartość
+- `radar` — osie promieniowe + wielokąt serii
+
+## Wejścia
+- `config: KptChartConfig` (wymagane) — jeden obiekt sterujący całością
+- `width` / `height`: jednostki viewBoxa (600×360); wykres skaluje się do kontenera
+
+## KptChartConfig (skrót)
+- `labels: string[]`, `series: { name; data: number[]; color? }[]`
+- `legend`: `{ display?, position: top|bottom|left|right, align: start|center|end, pointStyle: circle|rect|rectRot|triangle|line, title? }`
+- `title` / `subtitle`: `{ display?, text, align, color?, font?, padding? }`
+- `tooltip`: `{ enabled?, format?(ctx: {series,label,value}): string }`
+- `animation`: `{ enabled?, duration=400, delay=0, stagger=60 }`
+
+## Interakcje
+- Hover na punkcie/słupku/wycinku → tooltip (seria, etykieta, wartość); dymek clampowany do krawędzi.
+- Klik w legendę → ukrycie/pokazanie serii (pie/doughnut/polar: ukrycie wycinka) z przeliczeniem skali.
+- Hover na legendzie → podświetlenie serii, wygaszenie pozostałych.
+
+## Animacje
+Linia: `stroke-dasharray/offset`. Słupki: `scaleY/scaleX` (origin od osi). Wycinki/radar: `scale` od środka.
+Stagger `delay = index * stagger`. Wyłączane przez `animation.enabled=false` i `prefers-reduced-motion`.
+
+## Przykład
+    <kpt-chart [config]="{
+      type: 'line',
+      labels: ['Sty','Lut','Mar'],
+      series: [{ name: 'Sprzedaż', data: [12, 19, 7] }],
+      interpolation: 'cubic-monotonic',
+      legend: { position: 'top' }
+    }" />
+
+## Tokeny / stylowanie
+Paleta z tokenów semantycznych (`--kpt-color-primary|info|success|warning|danger` + skala).
+SCSS w `@layer kpt.components`, klasy `kpt-chart__*`. Kolory serii nadpisywalne przez `series[].color`.
+
+## Rdzeń (pure TS, opcjonalnie)
+Eksport funkcji: `linePath`, `areaPath`, `barLayout`, `pieSlices`, `polarSlices`, `radarGrid`,
+`radarPoints`, `niceScale`, `seriesColor`, `KPT_CHART_PALETTE` — do własnych rozszerzeń/SSR.