@signosoft/signpad-js 0.3.1 → 0.3.2

package/README.md

@@ -40,11 +40,11 @@ It expertly handles the complexities of **WebHID device connections**, signature
 
 ## 🔐 Lease Setup
 
-To use the Signosoft Signpad component and its hardware drivers, a valid `lease` is **required**.
+To use the Signosoft Signpad component with physical signature hardware, a valid `lease` is **required**.
 
 #### 🛑 CRITICAL: Mandatory Initialization
 
-Without a valid lease, the component <b>WILL NOT INITIALIZE</b> and hardware communication features will be <b>disabled</b>.
+Without a valid lease, the component can still render, but driver initialization and hardware communication features will be <b>disabled</b>.
 
 ### 1. Lease flow
 
@@ -129,7 +129,7 @@ To ensure proper communication via the **WebHID API**:
 First, install the core package:
 
 ```bash
-npm install your-library-name
+npm install @signosoft/signpad-js
 ```
 
 ### 🧰 Framework Integration Guide
@@ -608,6 +608,7 @@ Toggles the visibility of specific User Interface elements.
 | :------------------------- | :-------- | :-------------------------------------------------------------- |
 | `topBarVisible`            | `boolean` | Shows/hides the entire top navigation bar.                      |
 | `topBarClearButtonVisible` | `boolean` | Shows a "Clear" button in the top-left corner.                  |
+| `topBarConnectButtonVisible` | `boolean` | Shows the connect/disconnect button area in the top-right corner. |
 | `bottomBarVisible`         | `boolean` | Shows/hides the entire bottom action bar.                       |
 | `okButtonVisible`          | `boolean` | Shows the **OK** button in the bottom bar.                      |
 | `clearButtonVisible`       | `boolean` | Shows the **Clear** button in the bottom bar.                   |
@@ -634,7 +635,7 @@ Handles component localization. It can load external files or use inline definit
 
 | Field          | Type     | Description                                                                                           |
 | :------------- | :------- | :---------------------------------------------------------------------------------------------------- |
-| `lang`         | `string` | The active language code (supported languages - `'en'`, `'cs'`, `'pt'`).                              |
+| `lang`         | `string` | The active language code. Built-in translations are bundled for `'en'` and `'cs'`; other languages can be supplied via `langPath` or `translations`. |
 | `langPath`     | `string` | URL path to fetch translation files. Expects files in `[path]/[lang].json` format.                    |
 | `translations` | `object` | An inline object containing key-value pairs (e.g., `{ "OK": "Confirm signature" }`). Overrides files. |
 
@@ -658,13 +659,13 @@ Standard event listeners triggered _after_ specific actions. Useful for observin
 
 | Callback       | Payload                                          | Description                                                                                        |
 | :------------- | :----------------------------------------------- | :------------------------------------------------------------------------------------------------- |
-| `onPen`        | `event: CustomEvent<IPenData> `                  | Dispatched when a device or mouse fallback are in contact with component or signature pad display. |
-| `onConnect`    | `event: CustomEvent`                             | Dispatched when a device or mouse fallback connects.                                               |
-| `onDisconnect` | —                                                | Dispatched when the hardware connection is closed.                                                 |
+| `onPen`        | `event: CustomEvent<IPenData>`                   | Dispatched when a device or mouse fallback are in contact with component or signature pad display. |
+| `onConnect`    | `event: CustomEvent<{ deviceInfo: any }>`        | Dispatched when a device or mouse fallback connects.                                               |
+| `onDisconnect` | `event: CustomEvent<void>`                       | Dispatched when the hardware connection is closed.                                                 |
 | `onOk`         | `event: CustomEvent<ISignatureConfirmationData>` | Dispatched when signature is confirmed.                                                            |
-| `onClear`      | —                                                | Dispatched when the canvas has been cleared.                                                       |
-| `onCancel`     | —                                                | Dispatched when the user aborts the session.                                                       |
-| `onError`      | `error: Error`                                   | Dispatched on critical failures (Lease, Driver, etc.).                                             |
+| `onClear`      | `event: CustomEvent<void>`                       | Dispatched when the canvas has been cleared.                                                       |
+| `onCancel`     | `event: CustomEvent<void>`                       | Dispatched when the user aborts the session.                                                       |
+| `onError`      | `event: CustomEvent<Error>`                      | Dispatched on critical failures (lease, driver, connection, etc.).                                 |
 
 > `actionHandlers` and `eventCallbacks` are separate hooks and can both be configured.
 
@@ -689,7 +690,8 @@ this.config = {
   eventCallbacks: {
     onConnect: (e) =>
       console.log("Pad connected:", e.detail.deviceInfo.deviceName),
-    onError: (err) => console.error("Signpad Error:", err.message),
+    onError: (event) =>
+      console.error("Signpad Error:", event.detail.message),
   },
 };
 ```
@@ -703,7 +705,7 @@ The following methods are available on the component instance to control the sig
 | `connect()`      | `Promise<boolean>`                                 | Connects device to component                                                     |
 | `disconnect()`   | `Promise<void>`                                    | Disconnects device from component                                                |
 | `startSigning()` | `Promise<void>`                                    | Initializes a new signing session on the canvas and hardware.                    |
-| `stopSigning()`  | `Promise<any>`                                     | Immediately ends the session and returns the captured signature data.            |
+| `stopSigning()`  | `Promise<any>`                                     | Low-level session stop that returns the raw driver payload.                      |
 | `ok()`           | `Promise<ISignatureConfirmationData \| undefined>` | Finalizes the session, cleans the device screen, and returns the signature data. |
 | `clear()`        | `Promise<void>`                                    | Wipes the signature from the UI and hardware without ending the session.         |
 | `cancel()`       | `Promise<void>`                                    | Aborts the current session and resets the component state.                       |
@@ -848,7 +850,9 @@ This is the standard way to confirm a signature. It:
 
 #### 📜 `stopSigning()`
 
-A low-level method that forces the driver to stop capturing data and returns the raw signature object. Unlike `ok()`, it does not trigger the full "Finalization" flow (UI transitions or device screen clearing).
+A low-level method that forces the driver to stop capturing data and returns the raw driver payload. Unlike `ok()`, it does not trigger the full "Finalization" flow (UI transitions or device screen clearing).
+
+> Note: `stopSigning()` intentionally exposes the unnormalized raw result, which is why it is documented as `Promise<any>`.
 
 #### 📜 `clear()`
 
@@ -890,15 +894,24 @@ signosoft-signpad {
 
   /* CSS Variables */
   --sign-font-family: Arial, Helvetica, sans-serif;
+  --sign-common-border-radius: 8px;
 
   /* Top Bar */
   --sign-top-bar-bg-base: var(--background-color-10);
   --sign-top-bar-text-base: var(--primary-color-0);
   --sign-top-bar-padding: var(--spacing-constraints);
   --sign-top-bar-min-height: var(--min-height);
+  --sign-top-bar-border-top-left-radius: var(--sign-common-border-radius);
+  --sign-top-bar-border-top-right-radius: var(--sign-common-border-radius);
+  --sign-top-bar-border-bottom-left-radius: 0;
+  --sign-top-bar-border-bottom-right-radius: 0;
 
   /* Canvas Area */
   --sign-canvas-bg-base: var(--background-color-0);
+  --sign-canvas-wrapper-border-top-left-radius: 0;
+  --sign-canvas-wrapper-border-top-right-radius: 0;
+  --sign-canvas-wrapper-border-bottom-left-radius: 0;
+  --sign-canvas-wrapper-border-bottom-right-radius: 0;
 
   /* Line */
   --sign-line-height: 22px;
@@ -914,6 +927,10 @@ signosoft-signpad {
   --sign-bottom-bar-padding: var(--spacing-constraints);
   --sign-bottom-bar-min-height: var(--min-height);
   --sign-bottom-bar-gap: 12px;
+  --sign-bottom-bar-border-top-left-radius: 0;
+  --sign-bottom-bar-border-top-right-radius: 0;
+  --sign-bottom-bar-border-bottom-left-radius: var(--sign-common-border-radius);
+  --sign-bottom-bar-border-bottom-right-radius: var(--sign-common-border-radius);
 
   /* Button general settings */
   --sign-button-font-size: 16px;
@@ -968,6 +985,7 @@ signosoft-signpad {
 | `--white-color`         | `#ffffff`           | Pure white color.           |
 | `--grey-color`          | `#b5b9be`           | Disabled state color.       |
 | `--sign-font-family`    | `Arial, sans-serif` | Global font family.         |
+| `--sign-common-border-radius` | `8px`         | Shared radius token reused by bars and buttons. |
 
 #### Layout & Constraints
 
@@ -984,12 +1002,20 @@ signosoft-signpad {
 | `--sign-top-bar-text-base`  | `var(--primary-color-0)`     | Text color in the top bar.       |
 | `--sign-top-bar-padding`    | `var(--spacing-constraints)` | Inner padding of the top bar.    |
 | `--sign-top-bar-min-height` | `var(--min-height)`          | Minimum height of the top bar.   |
+| `--sign-top-bar-border-top-left-radius` | `var(--sign-common-border-radius)` | Top-left radius of the top bar. |
+| `--sign-top-bar-border-top-right-radius` | `var(--sign-common-border-radius)` | Top-right radius of the top bar. |
+| `--sign-top-bar-border-bottom-left-radius` | `0` | Bottom-left radius of the top bar. |
+| `--sign-top-bar-border-bottom-right-radius` | `0` | Bottom-right radius of the top bar. |
 
 #### Canvas & Signature Line
 
 | Variable                            | Default                                        | Description                                   |
 | :---------------------------------- | :--------------------------------------------- | :-------------------------------------------- |
 | `--sign-canvas-bg-base`             | `var(--background-color-0)`                    | Background color of the drawing area.         |
+| `--sign-canvas-wrapper-border-top-left-radius` | `0` | Top-left canvas radius, typically rounded when the top bar is hidden. |
+| `--sign-canvas-wrapper-border-top-right-radius` | `0` | Top-right canvas radius, typically rounded when the top bar is hidden. |
+| `--sign-canvas-wrapper-border-bottom-left-radius` | `0` | Bottom-left canvas radius, typically rounded when the bottom bar is hidden. |
+| `--sign-canvas-wrapper-border-bottom-right-radius` | `0` | Bottom-right canvas radius, typically rounded when the bottom bar is hidden. |
 | `--sign-line-height`                | `22px`                                         | Vertical offset/height for the guide line.    |
 | `--sign-line-margin-bottom`         | `16px`                                         | Bottom spacing used in canvas line layout.    |
 | `--sign-line-border-base`           | `var(--primary-color-10)`                      | Color of the signature guide line.            |
@@ -1006,6 +1032,10 @@ signosoft-signpad {
 | `--sign-bottom-bar-padding`    | `var(--spacing-constraints)` | Inner padding of the bottom bar.         |
 | `--sign-bottom-bar-min-height` | `var(--min-height)`          | Minimum height of the bottom bar.        |
 | `--sign-bottom-bar-gap`        | `12px`                       | Space between buttons in the bottom bar. |
+| `--sign-bottom-bar-border-top-left-radius` | `0` | Top-left radius of the bottom bar. |
+| `--sign-bottom-bar-border-top-right-radius` | `0` | Top-right radius of the bottom bar. |
+| `--sign-bottom-bar-border-bottom-left-radius` | `var(--sign-common-border-radius)` | Bottom-left radius of the bottom bar. |
+| `--sign-bottom-bar-border-bottom-right-radius` | `var(--sign-common-border-radius)` | Bottom-right radius of the bottom bar. |
 
 #### Buttons (General)
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@signosoft/signpad-js",
   "private": false,
-  "version": "0.3.1",
+  "version": "0.3.2",
   "browser": {
     "fs": false
   },