klun-ui 0.3.0 → 0.4.1

package/CHANGELOG.md

@@ -5,6 +5,111 @@ 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.1] — 2026-09-17
+
+### Added
+- `Table` stories — a **form-embedded editable table** demo
+  (`Data Display/Table → FormTable`): a `Form.List` object-array field rendered
+  as a `Table` row-per-item, with a `TimePicker` / `CompactSelect` /
+  `CounterInput` / `Checkbox` / `Switch` in each cell, drag-to-reorder, an
+  "+ 新增行" toolbar button, per-row delete, validated save / reset, and
+  “external” insert-row / delete-first-row buttons that mutate the array through
+  `form.setFieldValue`.
+- **Touch and keyboard dragging** in `Table` (`rowDraggable`) and `Kanban`:
+  pointer sensors drive mouse *and* touch, and the keyboard sensor makes the drag
+  handle / card a focusable activator (Space to pick up, arrows to move, Space to
+  drop) with screen-reader instructions.
+
+### Changed
+- Drag & drop engine — `Table` row reordering and `Kanban` now run on `@dnd-kit/core`
+  + `@dnd-kit/sortable` instead of hand-rolled native HTML5 DnD. New runtime
+  dependencies (external in the bundle). The dragged row/card follows the pointer,
+  containers auto-scroll while dragging, and the table's drag handle is the whole
+  util cell (previously only the 22px grip icon inside it was draggable).
+- `Kanban` — same-column reordering now reports through `onMove` too, and
+  `onMove`'s `toIndex` is documented as the position **after** the card is removed
+  from its old slot, so consumers can simply `splice(toIndex, 0, card)`.
+- README — npm version / license / types badges, a “latest release” pointer to
+  this changelog, the 0.4.0 components added to the component table and a
+  **Demo shell** section documenting the interactive template (command palette,
+  deep links, persisted preferences, role simulation with 403 handling,
+  skeletons and the shortcut sheet).
+
+## [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

package/README.md

@@ -1,5 +1,9 @@
 # klun-ui
 
+[![npm version](https://img.shields.io/npm/v/klun-ui)](https://www.npmjs.com/package/klun-ui)
+[![license](https://img.shields.io/npm/l/klun-ui)](./LICENSE)
+[![types included](https://img.shields.io/npm/types/klun-ui)](https://www.npmjs.com/package/klun-ui)
+
 A themeable **React + TypeScript** component library and design system — 120+ components, light/dark modes, and six accent themes (incl. the full Metronic 9.0 skin), all driven by a deep `--klun-*` CSS design-token layer.
 
 - **Standard architecture** — every component is a thin `forwardRef` wrapper that maps props to CSS classes (`className` and `style` pass through, `displayName` set). Styling lives in one stylesheet driven by design tokens, so real `:hover` / `:focus-visible` / `:disabled` states work and consumers can override with their own CSS.
@@ -13,7 +17,13 @@ pnpm add klun-ui react react-dom
 # npm i klun-ui react react-dom  /  yarn add klun-ui react react-dom
 ```
 
-`react` and `react-dom` (>=18) are peer dependencies.
+`react` and `react-dom` (>=18) are peer dependencies. `@dnd-kit/core` + `@dnd-kit/sortable`
+ship as regular dependencies — they power dragging in `Table` (`rowDraggable`) and
+`Kanban`, so those drags work with mouse, touch and keyboard. Nothing else is pulled in.
+
+Latest release: **0.4.0** — new components (`CronEditor`, `Kanban`, `VirtualTable`, `RichEditor`),
+nine admin screens and the interactive demo shell. Full details in the
+[changelog](./CHANGELOG.md).
 
 ## Quick start
 
@@ -87,8 +97,8 @@ For extra-fine control, the button family adds a `size="tiny"` tier (28px, icon-
 | Group | Components |
 |---|---|
 | **Buttons** | Button (kinds: default / fancy / compact / link), ButtonGroup, CopyButton |
-| **Forms** | AutoComplete, Cascader, CharacterCounter, Checkbox, CheckboxGroup, CheckboxCard, ColorDot, ColorPicker, ColorSlider, CompactSelect, CompactSelectForInput, CounterInput, DatePicker, DateRangePicker, DateTimePicker, DigitInput, FileUpload, Form (+ FormItem, FormList, useForm), Hint, ImageUpload, InlineInput, InlineSelect, Input, Label, PasswordStrength, Radio, RadioCard, RangeSlider, RichEditorToolbar, Select, SelectMenu, Slider, Switch, Textarea, TimePicker |
-| **Data display** | Avatar, AvatarGroup, Badge, BulkActionBar (+ BulkAction), Carousel, ChartLegend, ChartTooltip, Chip, CodeViewer (+ LogViewer), ContentLabel, CrossRefBadge, Descriptions, DiffViewer, Kbd, KeyIcon, List (+ ListItem), Markdown, Money, Rating, RelativeTime (+ ExpiryCountdown), StatCard, Statistic, StatusBadge, StatusDot (+ LiveDot), Table, Tag, Timeline, Tooltip, Tree |
+| **Forms** | AutoComplete, Cascader, CharacterCounter, Checkbox, CheckboxGroup, CheckboxCard, ColorDot, ColorPicker, ColorSlider, CompactSelect, CompactSelectForInput, CounterInput, CronEditor, DatePicker, DateRangePicker, DateTimePicker, DigitInput, FileUpload, Form (+ FormItem, FormList, useForm), Hint, ImageUpload, InlineInput, InlineSelect, Input, Label, PasswordStrength, Radio, RadioCard, RangeSlider, RichEditor, RichEditorToolbar, Select, SelectMenu, Slider, Switch, Textarea, TimePicker |
+| **Data display** | Avatar, AvatarGroup, Badge, BulkActionBar (+ BulkAction), Carousel, ChartLegend, ChartTooltip, Chip, CodeViewer (+ LogViewer), ContentLabel, CrossRefBadge, Descriptions, DiffViewer, Kbd, Kanban, KeyIcon, List (+ ListItem), Markdown, Money, Rating, RelativeTime (+ ExpiryCountdown), StatCard, Statistic, StatusBadge, StatusDot (+ LiveDot), Table, Tag, Timeline, Tooltip, Tree, VirtualTable |
 | **Feedback** | Alert, Banner, CircularProgress, EmptyState, GaugeBar, Message (useMessage), Notification (useNotification), ProgressBar, Result, SegmentedProgress, Skeleton, Spinner, Toast, Toaster (+ toast) |
 | **Navigation** | Breadcrumb, Divider, HorizontalFilter, Menu, PageHeader, Pagination, SegmentedControl, StepIndicator, Tabs, Wizard |
 | **Overlays** | CommandMenu, Confirm, ContextMenu, Drawer, Dropdown, ImageViewer, Modal, Popconfirm, Popover |
@@ -100,7 +110,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` (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):
+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), `RoleTreeScreen`, `DepartmentsScreen`, `TasksScreen`, `AuditScreen`, `MessagesScreen` (internal mailbox), `ApprovalsScreen` (multi-step workflow with diffs), `TicketsScreen` (SLA queue with a `Kanban` board), `CalendarScreen` (week grid with room conflicts), `SearchScreen` (cross-entity search), `IntegrationsScreen` (webhooks + delivery log), `FeatureFlagsScreen`, `TemplatesScreen` (notification templates), `ImportExportScreen` (wizard + 100k-row preview), `WorkspaceSecurityScreen` and `ReportsScreen` — which render inside the Metronic 9.0 skin at compact density):
 
 ```tsx
 import "klun-ui/styles.css";
@@ -111,6 +121,16 @@ export default function App() {
 }
 ```
 
+### Demo shell
+
+`MetronicDashboardTemplate` wires the whole demo together, so the examples behave like a real admin app:
+
+- `⌘K` / `Ctrl K` command palette (navigate, act, switch the simulated role, simulate an outage), `/` jumps to search, `?` / `⌘/` opens the shortcut sheet.
+- Hash deep links (`#/orders/A-1042`) with working browser back / forward.
+- Preferences persist in `localStorage` (theme, density, skin, locale, collapsed sidebar, simulated role).
+- Permission-aware navigation driven by `ROLE_PERMISSIONS`: locked entries show a lock and route to a `Result`-based 403 panel.
+- Skeleton loading between screens, a simulated outage with retry, a collapsible sidebar and full i18n copy for the new screens in all four demo locales.
+
 ## Charts
 
 Chart components live on the `klun-ui/charts` subpath and use the optional `recharts` peer dependency — kept out of the main entry so the core bundle stays chart-free: