klun-ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -7,6 +7,36 @@ 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

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: