@simplysm/solid 13.0.82 → 13.0.83

package/README.md

@@ -5,26 +5,26 @@
 A comprehensive, enterprise-grade UI component library built on SolidJS and Tailwind CSS. Provides a full suite of form controls, data display components, layout primitives, feedback systems, and high-level CRUD abstractions for building business applications.
 
 Key features:
-- **Controlled component pattern** — `value`/`onValueChange` across all form controls
-- **Compound component API** — `Select.Item`, `DataSheet.Column`, `Tabs.Tab`, etc.
-- **Built-in validation** — `required`, `validate`, `lazyValidation` on every form control
-- **5-level sizing** — `"xs" | "sm" | "md" | "lg" | "xl"` on all interactive components
-- **Semantic theming** — `"base" | "primary" | "success" | "warning" | "danger"` color system
-- **Light/Dark mode** — via `ThemeProvider` with system preference detection
-- **i18n** — built-in internationalization via `I18nProvider`
-- **CRUD abstractions** — `CrudSheet` and `CrudDetail` for rapid data management UIs
+- **Controlled component pattern** -- `value`/`onValueChange` across all form controls
+- **Compound component API** -- `Select.Item`, `DataSheet.Column`, `Tabs.Tab`, etc.
+- **Built-in validation** -- `required`, `validate`, `lazyValidation` on every form control
+- **5-level sizing** -- `"xs" | "sm" | "md" | "lg" | "xl"` on all interactive components
+- **Semantic theming** -- `"base" | "primary" | "info" | "success" | "warning" | "danger"` color system
+- **Light/Dark mode** -- via `ThemeProvider` with system preference detection
+- **i18n** -- built-in internationalization via `I18nProvider`
+- **CRUD abstractions** -- `CrudSheet` and `CrudDetail` for rapid data management UIs
 
 ## Documentation
 
 | Category | Description |
 |----------|-------------|
-| [Form Controls](docs/form-controls.md) | Input components — Button, TextInput, NumberInput, DatePicker, TimePicker, Textarea, Select, Combobox, Checkbox, Radio, ColorPicker, DateRangePicker, RichTextEditor, Numpad, StatePreset, ThemeToggle |
-| [Layout](docs/layout.md) | Layout primitives — FormGroup, FormTable, Sidebar, Topbar |
-| [Data](docs/data.md) | Data display — Table, List, Pagination, DataSheet, Calendar, Kanban |
-| [Display](docs/display.md) | Display components — Card, Icon, Tag, Link, Alert, Barcode, Echarts, Progress |
-| [Disclosure](docs/disclosure.md) | Disclosure components — Collapse, Dropdown, Dialog, Tabs |
-| [Feedback](docs/feedback.md) | Feedback systems — Notification, Busy overlay, Print |
-| [Providers](docs/providers.md) | Context providers — Config, Theme, I18n, SyncStorage, Logger, ServiceClient, SharedData, System |
-| [Hooks](docs/hooks.md) | Hooks and primitives — useLocalStorage, useSyncConfig, useLogger, createControllableSignal, createMountTransition, etc. |
-| [Helpers](docs/helpers.md) | Utilities — mergeStyles, createAppStructure, createSlot, createSlots, ripple directive, style constants |
-| [Features](docs/features.md) | High-level components — CrudSheet, CrudDetail, SharedDataSelect, DataSelectButton, AddressSearch, PermissionTable |
+| [Form Controls](docs/form-controls.md) | Input components -- Button, TextInput, NumberInput, DatePicker, TimePicker, Textarea, Select, Combobox, Checkbox, Radio, ColorPicker, DateRangePicker, RichTextEditor, Numpad, StatePreset, ThemeToggle |
+| [Layout](docs/layout.md) | Layout primitives -- FormGroup, FormTable, Sidebar, Topbar |
+| [Data](docs/data.md) | Data display -- Table, List, Pagination, DataSheet, Calendar, Kanban |
+| [Display](docs/display.md) | Display components -- Card, Icon, Tag, Link, Alert, Barcode, Echarts, Progress |
+| [Disclosure](docs/disclosure.md) | Disclosure components -- Collapse, Dropdown, Dialog, Tabs |
+| [Feedback](docs/feedback.md) | Feedback systems -- Notification, Busy overlay, Print |
+| [Providers](docs/providers.md) | Context providers -- Config, Theme, I18n, SyncStorage, Logger, ServiceClient, SharedData, System |
+| [Hooks](docs/hooks.md) | Hooks and primitives -- useLocalStorage, useSyncConfig, useLogger, createControllableSignal, createMountTransition, etc. |
+| [Helpers](docs/helpers.md) | Utilities -- mergeStyles, createAppStructure, createSlot, createSlots, ripple directive, style constants |
+| [Features](docs/features.md) | High-level components -- CrudSheet, CrudDetail, SharedDataSelect, DataSelectButton, AddressSearch, PermissionTable |

package/docs/disclosure.md

@@ -31,8 +31,8 @@ interface DropdownProps {
 Dropdown popup anchored to a trigger element. When `position` is provided instead of a trigger, the popup appears at the given absolute coordinates (useful for context menus). `keyboardNav` enables ArrowUp/Down navigation. Default `maxHeight` is 300px.
 
 **Sub-components:**
-- `Dropdown.Trigger` — the element that opens the dropdown on click
-- `Dropdown.Content` — the popup content
+- `Dropdown.Trigger` -- the element that opens the dropdown on click
+- `Dropdown.Content` -- the popup content
 
 ---
 
@@ -62,14 +62,16 @@ interface DialogProps {
 
 Modal dialog with overlay. Supports both declarative (template) and programmatic usage.
 
-- `mode="float"` — centered floating dialog (default)
-- `mode="fill"` — full-screen dialog
-- `beforeClose` — return `false` to prevent closing
-- `resizable` / `draggable` — enable resize handles / drag-to-move
+- `mode="float"` -- centered floating dialog (default)
+- `mode="fill"` -- full-screen dialog
+- `beforeClose` -- return `false` to prevent closing
+- `resizable` / `draggable` -- enable resize handles / drag-to-move (draggable defaults to `true`)
+- `withCloseButton` -- show close button (defaults to `true`)
+- `closeOnEscape` -- close on Escape key (defaults to `true`)
 
 **Sub-components:**
-- `Dialog.Header` — dialog title bar
-- `Dialog.Action` — dialog action buttons area
+- `Dialog.Header` -- dialog title bar
+- `Dialog.Action` -- dialog action buttons area
 
 ### Programmatic API
 
@@ -81,9 +83,14 @@ interface DialogContextValue {
     options?: DialogShowOptions,
   ): Promise<ExtractCloseResult<P> | undefined>;
 }
+
+interface DialogProviderProps {
+  closeOnEscape?: boolean;
+  closeOnInteractOutside?: boolean;
+}
 ```
 
-Use `DialogProvider` and `useDialog()` for programmatic dialog management. The shown component receives a `close(result?)` prop to close the dialog and return a value.
+Use `DialogProvider` and `useDialog()` for programmatic dialog management. The shown component receives a `close(result?)` prop to close the dialog and return a value. `DialogProvider` accepts default options for `closeOnEscape` and `closeOnInteractOutside`.
 
 ```typescript
 const dialog = useDialog();
@@ -110,7 +117,7 @@ interface TabsProps {
 
 Tab navigation. Content rendering is managed externally based on the selected `value`.
 
-**Sub-component:** `Tabs.Tab` — `{ value: string; disabled?: boolean; class?: string; children?: JSX.Element }`
+**Sub-component:** `Tabs.Tab` -- `{ value: string; disabled?: boolean; class?: string; children?: JSX.Element }`
 
 ---
 

package/docs/display.md

@@ -34,7 +34,7 @@ import { IconUser } from "@tabler/icons-solidjs";
 
 ```typescript
 interface TagProps extends JSX.HTMLAttributes<HTMLSpanElement> {
-  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
 }
 ```
 
@@ -46,7 +46,7 @@ Inline badge/tag with semantic theming.
 
 ```typescript
 interface LinkProps extends JSX.AnchorHTMLAttributes<HTMLAnchorElement> {
-  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
   disabled?: boolean;
 }
 ```
@@ -59,7 +59,7 @@ Styled anchor link with theme and disabled state.
 
 ```typescript
 interface AlertProps extends JSX.HTMLAttributes<HTMLDivElement> {
-  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
 }
 ```
 
@@ -98,13 +98,13 @@ Apache ECharts wrapper. Requires `echarts` as a peer dependency. Set `busy` to s
 ```typescript
 interface ProgressProps extends JSX.HTMLAttributes<HTMLDivElement> {
   value: number;
-  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   inset?: boolean;
 }
 ```
 
-Progress bar. `value` is in the range 0–100 (0 = 0%, 100 = 100%). Pass `children` to display custom content instead of the default percentage text.
+Progress bar. `value` is in the range 0--100 (0 = 0%, 100 = 100%). Pass `children` to display custom content instead of the default percentage text.
 
 ---
 

package/docs/feedback.md

@@ -7,6 +7,19 @@
 ```typescript
 type NotificationTheme = "info" | "success" | "warning" | "danger";
 
+interface NotificationAction {
+  label: string;
+  onClick: () => void;
+}
+
+interface NotificationOptions {
+  action?: NotificationAction;
+}
+
+interface NotificationUpdateOptions {
+  renotify?: boolean;
+}
+
 interface NotificationContextValue {
   items: Accessor<NotificationItem[]>;
   unreadCount: Accessor<number>;
@@ -27,7 +40,9 @@ interface NotificationContextValue {
 }
 ```
 
-Centralized notification management. Each `info`/`success`/`warning`/`danger` call creates a notification and returns its `id`. Use `error(err)` to display an error object as a danger notification.
+Centralized notification management. Each `info`/`success`/`warning`/`danger` call creates a notification and returns its `id`. Use `error(err)` to display an error object as a danger notification. Maintains up to 50 notifications; older items are removed when exceeded.
+
+Notifications can include an `action` button via the `options` parameter.
 
 ### NotificationBell
 
@@ -66,9 +81,9 @@ interface BusyProviderProps {
 
 Full-screen loading overlay with nestable `show`/`hide` calls (managed with an internal counter). Each `show` must have a matching `hide`.
 
-- `variant="spinner"` — centered spinner (default)
-- `variant="bar"` — top progress bar animation
-- `setProgress(percent)` — display a determinate progress bar (0–100, `undefined` for indeterminate)
+- `variant="spinner"` -- centered spinner (default)
+- `variant="bar"` -- top progress bar animation
+- `setProgress(percent)` -- display a determinate progress bar (0--100, `undefined` for indeterminate)
 
 ### BusyContainer
 
@@ -84,8 +99,8 @@ interface BusyContainerProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "c
 ```
 
 Local loading overlay for a specific container. Two modes:
-- `busy` — shows overlay while preserving children
-- `ready={false}` — hides children entirely until data is loaded
+- `busy` -- shows overlay while preserving children
+- `ready={false}` -- hides children entirely until data is loaded
 
 ---
 
@@ -123,6 +138,11 @@ const notification = useNotification();
 notification.success("Saved", "Record updated successfully");
 notification.error(new Error("Connection failed"));
 
+// Notification with action button
+notification.info("Update available", "A new version is ready", {
+  action: { label: "Refresh", onClick: () => location.reload() },
+});
+
 // Global loading
 const busy = useBusy();
 busy.show("Loading data...");

package/docs/form-controls.md

@@ -4,7 +4,7 @@
 
 ```typescript
 interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  theme?: "base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral";
+  theme?: "base" | "primary" | "info" | "success" | "warning" | "danger";
   variant?: "solid" | "outline" | "ghost";
   size?: "xs" | "sm" | "md" | "lg" | "xl";
   inset?: boolean;
@@ -44,7 +44,7 @@ interface TextInputProps {
 
 Single-line text input with format masking and validation. Use `format` for input masks (e.g. `"XXX-XXXX-XXXX"`).
 
-**Sub-component:** `TextInput.Prefix` — renders content before the input.
+**Sub-component:** `TextInput.Prefix` -- renders content before the input.
 
 ---
 
@@ -75,7 +75,7 @@ interface NumberInputProps {
 
 Numeric input with locale-aware formatting. `useGrouping` enables thousands separators (default: `true`).
 
-**Sub-component:** `NumberInput.Prefix` — renders content before the input.
+**Sub-component:** `NumberInput.Prefix` -- renders content before the input.
 
 ---
 
@@ -231,10 +231,10 @@ Dropdown select with single or multiple selection modes. Supports two usage patt
 Providing `itemSearchText` enables a built-in search input. `itemChildren` enables tree-structured items.
 
 **Sub-components:**
-- `Select.Item` — selectable option (`{ value: TValue; disabled?: boolean }`)
-- `Select.Header` — non-selectable header row
-- `Select.Action` — non-selectable action row
-- `Select.ItemTemplate` — custom item renderer
+- `Select.Item` -- selectable option (`{ value: TValue; disabled?: boolean }`)
+- `Select.Header` -- non-selectable header row
+- `Select.Action` -- non-selectable action row
+- `Select.ItemTemplate` -- custom item renderer
 
 ---
 
@@ -335,7 +335,7 @@ interface CheckboxGroupProps<TValue> {
 
 Group of checkboxes with multi-value binding.
 
-**Sub-component:** `CheckboxGroup.Item` — `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
+**Sub-component:** `CheckboxGroup.Item` -- `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
 
 ---
 
@@ -360,7 +360,7 @@ interface RadioGroupProps<TValue> {
 
 Group of radio buttons with single-value binding.
 
-**Sub-component:** `RadioGroup.Item` — `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
+**Sub-component:** `RadioGroup.Item` -- `{ value: TValue; disabled?: boolean; children?: JSX.Element }`
 
 ---
 
@@ -474,7 +474,7 @@ interface ThemeToggleProps extends Omit<JSX.ButtonHTMLAttributes<HTMLButtonEleme
 }
 ```
 
-Button that cycles through light, dark, and system theme modes.
+Button that cycles through light, system, and dark theme modes.
 
 ---
 

package/docs/helpers.md

@@ -127,24 +127,25 @@ void ripple;
 
 Background, border, and text color utilities mapped to the theme system:
 
-- `bg.default`, `bg.subtle`, `bg.surface` — background colors
-- `border.default`, `border.subtle` — border colors
-- `text.default`, `text.muted`, `text.subtle` — text colors
+- `bg.surface`, `bg.muted`, `bg.subtle` -- background colors
+- `border.default`, `border.subtle` -- border colors
+- `text.default`, `text.muted`, `text.placeholder` -- text colors
 
 ### control.styles
 
-Component sizing utilities:
+Component sizing and state utilities:
 
-- `pad.xs`, `pad.sm`, `pad.md`, `pad.lg`, `pad.xl` — padding by size
-- `gap.xs` ... `gap.xl` — gap by size
-- `ComponentSize` — `"xs" | "sm" | "md" | "lg" | "xl"`
+- `pad.xs`, `pad.sm`, `pad.md`, `pad.lg`, `pad.xl` -- padding by size
+- `gap.xs` ... `gap.xl` -- gap by size
+- `state.disabled` -- disabled state styling
+- `ComponentSize` -- `"xs" | "sm" | "md" | "lg" | "xl"`
 
 ### theme.styles
 
 Semantic theme tokens:
 
-- `SemanticTheme` — `"base" | "primary" | "success" | "warning" | "danger" | "danger-light" | "neutral"`
-- `themeTokens` — maps each theme to `{ solid, subtle, outline, ghost }` Tailwind class sets
+- `SemanticTheme` -- `"base" | "primary" | "info" | "success" | "warning" | "danger"`
+- `themeTokens` -- maps each theme to `{ solid, solidHover, light, text, hoverBg, border }` Tailwind class sets
 
 ---
 

package/docs/providers.md

@@ -7,7 +7,7 @@ export const ConfigProvider: ParentComponent<{ clientName: string }>;
 export function useConfig(): { clientName: string };
 ```
 
-Application-level configuration. `clientName` identifies the client app.
+Application-level configuration. `clientName` identifies the client app and is used as a storage key prefix.
 
 ---
 
@@ -28,7 +28,7 @@ export const ThemeProvider: ParentComponent;
 export function useTheme(): ThemeContextValue;
 ```
 
-Light/Dark mode management with system preference detection. `cycleMode()` rotates through light → dark → system.
+Light/Dark mode management with system preference detection. `cycleMode()` rotates through light -> system -> dark -> light. The selected mode is persisted via `SyncStorageProvider`.
 
 ---
 
@@ -51,7 +51,7 @@ export const I18nProvider: ParentComponent;
 export function useI18n(): I18nContextValue;
 ```
 
-Internationalization provider. Supports nested dictionary keys and parameter interpolation via `t("key", { name: "John" })`.
+Internationalization provider. Built-in dictionaries for `"en"` and `"ko"`. Supports nested dictionary keys and parameter interpolation via `t("key", { name: "John" })`. The locale is auto-detected from `navigator.language` and persisted via `SyncStorageProvider`. Use `configure()` to add or override dictionaries.
 
 ---
 
@@ -92,7 +92,7 @@ interface LoggerContextValue {
 export const LoggerProvider: ParentComponent;
 ```
 
-Configurable logging provider. Middleware pattern via `configure()`.
+Configurable logging provider. Defaults to a `consola`-based adapter. Middleware pattern via `configure()`.
 
 ---
 
@@ -110,7 +110,7 @@ export const ServiceClientProvider: ParentComponent;
 export function useServiceClient(): ServiceClientContextValue;
 ```
 
-Service communication provider. Manages WebSocket connections to backend services. Multiple named connections supported via `key`.
+Service communication provider. Manages WebSocket connections to backend services. Multiple named connections supported via `key` (defaults to `"default"`). Auto-infers host, port, and SSL from `window.location` when not specified.
 
 ---
 
@@ -142,7 +142,12 @@ export const SharedDataProvider: (props: { children: JSX.Element }) => JSX.Eleme
 export function useSharedData<TSharedData>(): SharedDataValue<TSharedData>;
 ```
 
-Centralized data management for shared lookup data (e.g. code tables). Data is fetched once and shared across all consumers. `emit()` triggers a re-fetch.
+Centralized data management for shared lookup data (e.g. code tables). Data is fetched once and shared across all consumers. `emit()` triggers a re-fetch. Must be used inside `ServiceClientProvider`.
+
+The returned `SharedDataValue` also provides:
+- `wait()` -- wait until all initial fetches complete
+- `busy` -- whether a fetch is in progress
+- `configure()` -- set definitions to start data subscriptions (can only be called once)
 
 ---
 
@@ -155,7 +160,7 @@ export const SystemProvider: ParentComponent<{
 }>;
 ```
 
-Convenience provider that composes `ConfigProvider`, `SyncStorageProvider`, `LoggerProvider`, `ThemeProvider`, `I18nProvider`, `NotificationProvider`, and `BusyProvider` into a single wrapper.
+Convenience provider that composes `ConfigProvider`, `I18nProvider`, `SyncStorageProvider`, `LoggerProvider`, `NotificationProvider`, `ErrorLoggerProvider`, `PwaUpdateProvider`, `ClipboardProvider`, `ThemeProvider`, `ServiceClientProvider`, `SharedDataProvider`, and `BusyProvider` into a single wrapper.
 
 ---
 
@@ -166,14 +171,10 @@ import { SystemProvider, DialogProvider, PrintProvider } from "@simplysm/solid";
 
 // Typical app provider tree
 <SystemProvider clientName="my-app">
-  <ServiceClientProvider>
-    <SharedDataProvider>
-      <DialogProvider>
-        <PrintProvider>
-          <App />
-        </PrintProvider>
-      </DialogProvider>
-    </SharedDataProvider>
-  </ServiceClientProvider>
+  <DialogProvider>
+    <PrintProvider>
+      <App />
+    </PrintProvider>
+  </DialogProvider>
 </SystemProvider>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simplysm/solid",
-  "version": "13.0.82",
+  "version": "13.0.83",
   "description": "Simplysm package - SolidJS library",
   "author": "simplysm",
   "license": "Apache-2.0",
@@ -52,10 +52,10 @@
     "tabbable": "^6.4.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.19",
-    "@simplysm/core-browser": "13.0.82",
-    "@simplysm/core-common": "13.0.82",
-    "@simplysm/service-client": "13.0.82",
-    "@simplysm/service-common": "13.0.82"
+    "@simplysm/core-browser": "13.0.83",
+    "@simplysm/service-client": "13.0.83",
+    "@simplysm/core-common": "13.0.83",
+    "@simplysm/service-common": "13.0.83"
   },
   "devDependencies": {
     "@solidjs/testing-library": "^0.8.10"