klun-ui 0.2.2 → 0.4.0

package/CHANGELOG.md

@@ -5,6 +5,188 @@ All notable changes to **klun-ui** are documented here. The format follows
 [Semantic Versioning](https://semver.org/) (pre-1.0: minor/patch bumps may carry
 small breaking changes).
 
+## [Unreleased]
+
+## [0.4.0] — 2026-09-17
+
+### Added
+- **Internal messaging** (`MessagesScreen`) — a three-pane mailbox for the admin
+  demo: folders (Inbox / Starred / Sent / Drafts / Archived) and colour-coded
+  labels with live counts, a searchable thread list with unread badges, priority
+  flags, stars and message counts, and a conversation pane with the full reply
+  chain. Flows: compose to teammates (recipient / cc pickers, `RichEditorToolbar`
+  wired to markdown-at-caret, simulated attachments, high priority), send, save
+  draft, reply / reply-all, forward, star, archive, mark read / unread, delete
+  behind `Confirm` and “mark all read”.
+- The unread count feeds the shell: `MetronicSidebar` gained a `badges` prop so
+  the **Messages** entry shows a live badge, and `MessagesScreen` reports through
+  `onUnreadChange`.
+- `messagesModel.ts` — threads, messages, attachments, labels, recipients and
+  helpers (`snippetOf`, `lastSenderOf`, `participantsOf`, `totalUnread`), exported
+  from the templates subpath alongside `MessagesScreen`.
+
+### Added — components
+- `CronEditor` — five-field cron builder with preset chips, per-field selects, a
+  free-text expression box and a live human-readable preview; `describeCron` and
+  `CRON_PRESETS` are exported as well.
+- `Kanban` — dependency-free HTML5 drag & drop board with column limits, custom
+  card rendering, column footers and an `onMove(cardId, from, to, index)` hook.
+- `VirtualTable` — windowed table for very large datasets: only the visible slice
+  plus overscan is mounted, so 100k rows scroll smoothly.
+- `RichEditor` — contentEditable editor wired to `RichEditorToolbar`, with a
+  placeholder, an optional HTML source view and HTML output through `onChange`.
+- `MetronicSidebar` gains `lockedKeys`, `collapsed`, `onToggleCollapsed` and
+  `roleLabel` props.
+
+### Added — admin screens
+- `ApprovalsScreen` — multi-step workflow inbox: KPI strip, scope/type filters,
+  row selection with bulk decisions, a step chain on `Timeline`, `DiffViewer` for
+  permission changes and rich-text decision notes.
+- `TicketsScreen` — SLA-aware support desk with a live countdown, list and
+  `Kanban` board views (drag a card to change its stage), public replies vs
+  internal notes in `RichEditor`, and an assignment / resolve flow.
+- `CalendarScreen` — week grid (08:00–19:00) with click-to-create meetings,
+  room conflict detection before saving, reschedule, meeting notes and an agenda
+  view.
+- `WorkspaceSecurityScreen` — SSO / enforced 2FA / session & idle lifetime, IP
+  allowlist with CIDR validation, password policy, a live posture score and a
+  revoke-everything danger zone.
+- `IntegrationsScreen` — app directory with connect / disconnect, webhook
+  endpoints with events and a signing secret, and a delivery log with retry and
+  `CodeViewer` request / response inspection.
+- `FeatureFlagsScreen` — per-environment toggles, rollout steps, department
+  targeting via `Cascader`, role allowlists, change history and archive.
+- `TemplatesScreen` — notification templates with variable chips inserted at the
+  caret, channel-aware previews (email / SMS / push / Slack), version history and
+  a test-send modal.
+- `ImportExportScreen` — four-step import `Wizard` (upload → map → validate → run)
+  with a 100k-row `VirtualTable` validation preview, export scheduling and a job
+  history with retry.
+- `SearchScreen` — cross-entity search (orders, products, customers, team,
+  tickets, approvals, docs) with grouped results and ↑ ↓ ⏎ navigation.
+
+### Added — shell experience
+- Hash deep links (`#/orders/A-1042`) with browser back / forward support.
+- Persisted demo preferences in `localStorage` (theme, density, skin, locale,
+  collapsed sidebar, simulated role).
+- Permission-aware navigation driven by `ROLE_PERMISSIONS`: locked entries show a
+  lock icon and route to a `Result`-based 403 panel, with a “view as role” group
+  in the command palette and a banner to reset.
+- Skeleton loading states between screens, a simulated outage with retry, and a
+  keyboard-shortcut sheet (`⌘/` or `?`).
+- `nav` / `pages` demo copy for the nine new screens in all four locales.
+
+### Changed
+- Keyboard shortcuts: `⌘K` / `Ctrl K` opens the palette, `/` jumps to global
+  search, `?` / `⌘/` opens the shortcut sheet.
+
+## [0.3.0] — 2026-09-16
+
+### Added
+- **Settings is now a full five-tab page** (`MetronicSettingsTemplate`), each tab
+  interactive and exportable on its own:
+  - **Profile** (`ProfileSection`) — photo upload with a local preview,
+    personal information with validation and dirty tracking, regional
+    preferences (language / timezone / date format / week start).
+  - **Account** (`AccountSection`) — password change with a live strength meter
+    and requirement checklist, two-factor enrolment (setup key + copy button +
+    `DigitInput` verification, recovery codes), active-session list with revoke
+    and “sign out others”, and a danger zone (deactivate + delete behind typed
+    confirmation).
+  - **Notifications** (`NotificationsSection`) — channel matrix (email / push /
+    SMS × event) with column-level select-all and indeterminate state, digest
+    cadence, quiet hours and a test send.
+  - **Billing** (`BillingSection`) — current plan with usage meters, plan
+    switching, payment methods (add / make default / remove), billing details and
+    an invoice history table.
+  - **API keys** (`ApiKeysSection`) — usage summary, create dialog with scope
+    picker, one-time secret reveal, rotate and revoke.
+- Exports: `ProfileSection`, `AccountSection`, `NotificationsSection`,
+  `BillingSection`, `ApiKeysSection`, `SETTINGS_NAV` and `SettingsSectionKey`
+  join the templates subpath.
+- Storybook: one story per settings tab under *Templates / Metronic*.
+- **Interactive demo shell** (`MetronicDashboardTemplate`) — the top bar is now
+  fully wired instead of decorative:
+  - a **⌘K / Ctrl-K command palette** (navigate + actions + recents), also
+    opened from the search box and the help menu;
+  - a **notification centre** with unread indicator, per-item read state and
+    “mark all as read”;
+  - an **appearance menu** that live-switches `data-theme` (light / dark),
+    `data-density` (comfortable / compact) and `data-mode` (metronic / blue /
+    purple / orange / green / slate) across the whole demo;
+  - an **account menu** (profile, billing, team & roles, sign out) and a working
+    “New order” shortcut that jumps to the orders page and opens its dialog.
+- **Orders is a full CRUD page** — create / edit in a modal with validation,
+  a details drawer with a status timeline, advance-status, refund, duplicate and
+  “email receipt” actions, delete behind `Confirm`, working bulk actions
+  (mark fulfilled / refund) and a search empty state.
+- `DashboardScreen` accepts `onViewAllOrders` — “View all” and recent-order rows
+  now jump to the orders page.
+- **Four more back-office screens** (Metronic examples):
+  - **`DepartmentsScreen`** — organisation tree on the Table’s tree mode:
+    expandable departments with manager, headcount and budget usage, full CRUD
+    (deleting a parent reparents its children) and a details drawer that links to
+    the team page.
+  - **`RoleTreeScreen`** — role hierarchy built on the `Tree` component: two
+    panes showing the selected role’s ancestors, the permissions it *owns*
+    versus the ones it *inherits*, its members, and a child-role comparison
+    table with clone / delete actions.
+  - **`TasksScreen`** — cron-style scheduled tasks: human-readable schedule,
+    last / next run, inline enable switch, “run now” with a simulated execution,
+    a run-history drawer and a create/edit dialog with schedule presets,
+    timezone, retries and notify-on-failure.
+  - **`AuditScreen`** — audit trail with search, action / severity / range
+    filters, severity and result badges, and a drawer exposing the request
+    metadata JSON (copyable) plus actor actions.
+- **User management is now a full module** — the members list gained a security
+  summary (2FA coverage, flags, pending invites), department / role / status /
+  security filters, row selection with bulk actions (activate, suspend, reset
+  2FA, assign role, move department) and a **user detail drawer** with four
+  tabs: profile, access (roles plus direct allow/deny overrides and the
+  resulting effective permission set), security (account state, 2FA, password
+  policy, per-device sessions) and activity (that member’s audit trail, with a
+  jump into the audit screen filtered by them).
+- **`DepartmentFilter`** — a cascading department picker built on `Dropdown`:
+  branches expand in place (the chevron only toggles, the row selects), every
+  row shows the member count of its whole branch, and choosing a parent filters
+  the list by that department *and* its sub-departments.
+- **Demo i18n** (`i18n.tsx`) — the shell now renders inside `ConfigProvider`, so
+  every component string follows the active locale pack (pagination, filters,
+  export, modal buttons, …), while nav labels, page headers and shell copy come
+  from a demo dictionary covering en-US, zh-CN, zh-TW and ja-JP. A language menu
+  in the top bar switches between all 17 shipped locales and flips the layout to
+  RTL (Arabic).
+- `PageHeader`, `useDemoText`, `demoTextFor`, `DEMO_TEXT`, `LOCALE_OPTIONS` and
+  `RTL_LOCALES` join the templates subpath.
+- **`Cascader` gained the props it was missing for real-world filters** —
+  `clearable` (an inline `×`), `renderOption` (decorate panel rows without
+  touching the trigger label) and `defaultValue` (uncontrolled usage). The panel
+  is now `role="menu"` with `role="menuitem"` / `aria-selected` rows, and the
+  component ships 9 unit tests.
+
+### Changed
+- **The settings page is full width by default** — it now fills the host content
+  area instead of being capped at 1000px. Pass `maxWidth={1000}` (or any CSS
+  length) to restore a centred column.
+- `MetronicSettingsTemplate` accepts `section` / `defaultSection` /
+  `onSectionChange` so the active tab can be controlled from the router.
+- The page header shows a dirty-state badge that flips between
+  “All changes saved” and “Unsaved changes”.
+- `MetronicTopBar` now takes props (appearance state, notifications and action
+  handlers) instead of rendering static buttons; `OrdersScreen` takes an optional
+  `createRequest` counter used by the shell’s “New order” button.
+- `MetronicSidebar` items take an optional `label` (resolved from the demo
+  dictionary), support multiple nested groups and hairline section breaks, and
+  the top bar gained `localeCode` / `onLocaleChange`.
+- `UsersScreen` accepts `initialDepartment` / `onOpenAudit` / `onOpenRoles` /
+  `onOpenDepartments` so the departments and audit screens can drill straight
+  into it, and `AuditScreen` accepts `initialActor` for the reverse jump.
+- The department filter in the demo is now the design-system **`Cascader`**
+  (multi-column drill-down with per-row member counts) instead of a hand-rolled
+  dropdown, and `Cascader` follows the density tokens — heights and padding come
+  from `--klun-control-h-*` / `--klun-field-px-*`, so compact density shrinks it
+  like every other field.
+
 ## [0.2.2] — 2026-09-16
 
 ### Added

package/README.md

@@ -100,7 +100,7 @@ All components and their prop types are named exports; the `cx` classnames helpe
 
 ## Templates
 
-Full-screen example compositions are available from the `klun-ui/templates` subpath — copy-and-go starting points built entirely from klun-ui components (`DashboardTemplate`, `AIAssistantTemplate`, `AgentChatTemplate`, `CryptoTemplate`, `MarketingTemplate`, `CalendarTemplate`, `PricingTemplate`, `SettingsTemplate`, plus the Metronic examples — `MetronicDashboardTemplate` / `MetronicSettingsTemplate` and the back-office screens `OrdersScreen`, `ProductsScreen` (CRUD with modal + full-page wizard editors), `CustomersScreen`, `UsersScreen`, `RolesScreen` (RBAC), `ReportsScreen` — which render inside the Metronic 9.0 skin at compact density):
+Full-screen example compositions are available from the `klun-ui/templates` subpath — copy-and-go starting points built entirely from klun-ui components (`DashboardTemplate`, `AIAssistantTemplate`, `AgentChatTemplate`, `CryptoTemplate`, `MarketingTemplate`, `CalendarTemplate`, `PricingTemplate`, `SettingsTemplate`, plus the Metronic examples — `MetronicDashboardTemplate` / `MetronicSettingsTemplate` (five interactive tabs: profile, account security, notifications, billing, API keys — also exported individually as `ProfileSection`, `AccountSection`, `NotificationsSection`, `BillingSection`, `ApiKeysSection`) and the back-office screens `OrdersScreen`, `ProductsScreen` (CRUD with modal + full-page wizard editors), `CustomersScreen`, `UsersScreen`, `RolesScreen` (RBAC), `ReportsScreen` — which render inside the Metronic 9.0 skin at compact density):
 
 ```tsx
 import "klun-ui/styles.css";

package/dist/Chip-DiCYJmnv.d.cts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ChipColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: ChipColor;
+    selected?: boolean;
+    /** Show a leading color dot. */
+    dot?: boolean;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Chip — compact, optionally-selectable color category pill. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { type ChipColor as C, Chip as a, type ChipProps as b };

package/dist/Chip-DiCYJmnv.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode } from 'react';
+
+type ChipColor = "gray" | "blue" | "orange" | "red" | "green" | "purple" | "yellow" | "teal" | "sky" | "pink";
+interface ChipProps extends HTMLAttributes<HTMLSpanElement> {
+    color?: ChipColor;
+    selected?: boolean;
+    /** Show a leading color dot. */
+    dot?: boolean;
+    /** Show a dismiss (×) button; receives the click handler. */
+    onDismiss?: () => void;
+    disabled?: boolean;
+    children?: ReactNode;
+}
+/** Klun UI Chip — compact, optionally-selectable color category pill. */
+declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { type ChipColor as C, Chip as a, type ChipProps as b };