labellife-design-tool 2.1.0 → 2.1.2

package/README.md

@@ -1,6 +1,6 @@
 # labellife-design-tool
 
-A fully featured, modular React design editor library for building label, print, and graphic design applications. Built on top of Konva.js for high-performance canvas rendering and MobX-State-Tree for reactive state management.
+A fully featured, modular React design editor library for building label, print, and graphic design applications. Built on top of **Konva.js** for high-performance canvas rendering and **MobX-State-Tree** for reactive state management.
 
 [![npm version](https://img.shields.io/npm/v/labellife-design-tool.svg)](https://www.npmjs.com/package/labellife-design-tool)
 [![license](https://img.shields.io/npm/l/labellife-design-tool.svg)](LICENSE)
@@ -9,33 +9,39 @@ A fully featured, modular React design editor library for building label, print,
 
 ## Table of Contents
 
-- [Features](#features)
-- [Installation](#installation)
-- [Quick Start](#quick-start)
-- [Architecture Overview](#architecture-overview)
-- [Store API](#store-api)
-- [Element Types](#element-types)
-- [UI Components](#ui-components)
-- [Side Panels](#side-panels)
-- [Toolbar](#toolbar)
-- [Image Effects & Filters](#image-effects--filters)
-- [Image Masking](#image-masking)
-- [Export & Download](#export--download)
-- [Internationalization (i18n)](#internationalization-i18n)
-- [Theming](#theming)
-- [Utility Functions](#utility-functions)
-- [Keyboard Shortcuts](#keyboard-shortcuts)
-- [JSON Schema](#json-schema)
-- [Peer Dependencies](#peer-dependencies)
-- [License](#license)
+1. [Features](#features)
+2. [Installation](#installation)
+3. [Quick Start](#quick-start)
+4. [Architecture Overview](#architecture-overview)
+5. [Store API](#store-api)
+6. [Element Types](#element-types)
+7. [UI Components](#ui-components)
+8. [Side Panels](#side-panels)
+9. [Toolbar](#toolbar)
+10. [Input Fields](#input-fields)
+11. [Image Effects & Filters](#image-effects--filters)
+12. [Image Masking](#image-masking)
+13. [Export & Download](#export--download)
+14. [Configuration](#configuration)
+15. [Keyboard Shortcuts](#keyboard-shortcuts)
+16. [JSON Schema](#json-schema)
+17. [Dependencies](#dependencies)
+18. [Roadmap](#roadmap)
+19. [License](#license)
 
 ---
 
 ## Features
 
+### Core Editor
 - **Canvas Editor** — Zoom, pan, drag-and-drop, multi-select, and keyboard shortcuts
 - **Rich Element Types** — Images, text, shapes (60+ presets), lines, SVGs, and groups
 - **Context-Sensitive Toolbar** — Adapts controls to the selected element type
+- **Multi-Page Support** — Add, remove, reorder, and navigate between pages
+- **Undo/Redo** — Full history stack with snapshot-based state management
+- **Responsive Layout** — Flexible container system that adapts to any viewport
+
+### Design Capabilities
 - **Image Editing** — Crop, flip, border, corner radius, masks (circle, triangle, star, diamond, hexagon, pentagon, heart, cloud, cross), and visual effects (blur, brightness, grayscale, sepia, warm, cold)
 - **Text Editing** — Inline editing, 200+ Google Fonts with auto-loading, font weight/style, text decoration, alignment, letter spacing, line height, stroke, background highlight, and curved text
 - **Shapes Library** — 60+ vector shapes including basic geometry, arrows, decorative shapes, organic blobs, and custom SVG paths
@@ -43,13 +49,21 @@ A fully featured, modular React design editor library for building label, print,
 - **Shadow System** — Configurable blur, offset, color, and opacity on any element
 - **Layer Management** — Reorder, lock/unlock, show/hide, delete per element
 - **Grouping** — Group and ungroup elements with preserved relative positioning
-- **Multi-Page Support** — Add, remove, reorder, and navigate between pages
-- **Undo/Redo** — Full history stack with snapshot-based state management
+
+### Template & Input System
+- **Input Fields** — Define placeholder elements (Text, Date, Integer, Image) that prompt end-users for values when a template is loaded
+- **Input Field Popup** — Built-in sequential dialog that collects user input for each field, with full style customization
+- **Required Fields** — Mark input fields as required to prevent skipping
+- **Custom Dialog Support** — Replace the default popup with your own component
+
+### Import / Export
 - **Export** — PNG, JPEG, PDF (multi-page), and JSON serialization
 - **Import** — Load designs from JSON, import images via drag-and-drop or file picker
-- **Internationalization** — Deep-merge translation system with dot-notation key resolution
+
+### Extensibility
 - **Pluggable Panels** — Extend the side panel with custom sections
-- **Responsive Layout** — Flexible container system that adapts to any viewport
+- **Internationalization** — Deep-merge translation system with dot-notation key resolution
+- **Theming** — Light/dark theme support
 - **Unit Conversion** — px, mm, cm, in, pt, pc with configurable DPI
 
 ---
@@ -73,6 +87,7 @@ npm install react react-dom @mui/material @mui/icons-material @emotion/react @em
 ## Quick Start
 
 ```jsx
+import React, { useMemo } from 'react';
 import { createStore } from 'labellife-design-tool/model/store';
 import { DesignContainer, SidePanelWrap, WorkspaceWrap } from 'labellife-design-tool';
 import { SidePanel } from 'labellife-design-tool/side-panel';
@@ -80,20 +95,24 @@ import { Toolbar } from 'labellife-design-tool/toolbar/toolbar';
 import { ZoomButtons } from 'labellife-design-tool/toolbar/zoom-buttons';
 import { Workspace } from 'labellife-design-tool/canvas/workspace';
 
-const store = createStore();
-store.addPage();
-
 function App() {
+  const store = useMemo(() => {
+    const s = createStore();
+    s.setSize(800, 600);
+    s.addPage();
+    return s;
+  }, []);
+
   return (
     <DesignContainer style={{ width: '100vw', height: '100vh' }}>
-      <Toolbar store={store} />
       <SidePanelWrap>
         <SidePanel store={store} />
-        <WorkspaceWrap>
-          <Workspace store={store} />
-          <ZoomButtons store={store} />
-        </WorkspaceWrap>
       </SidePanelWrap>
+      <WorkspaceWrap>
+        <Toolbar store={store} />
+        <Workspace store={store} />
+        <ZoomButtons store={store} />
+      </WorkspaceWrap>
     </DesignContainer>
   );
 }
@@ -104,22 +123,23 @@ function App() {
 ## Architecture Overview
 
 ```
-┌─────────────────────────────────────────────────┐
-│  DesignContainer                                │
-│  ┌─────────────────────────────────────────────┐│
-│  │  Toolbar (context-sensitive)                ││
-│  ├──────────┬──────────────────────────────────┤│
-│  │ SidePanel│  Workspace (Konva Stage)         ││
-│  │          │                                  ││
-│  │ • Text   │  ┌────────────────────────────┐  ││
-│  │ • Shapes │  │  Canvas (zoom, pan, select) │  ││
-│  │ • Upload │  │                            │  ││
-│  │ • Bg     │  │  Elements rendered here    │  ││
-│  │ • Layers │  │                            │  ││
-│  │          │  └────────────────────────────┘  ││
-│  │          │  ZoomButtons                     ││
-│  └──────────┴──────────────────────────────────┘│
-└─────────────────────────────────────────────────┘
+┌──────────────────────────────────────────────────────┐
+│  DesignContainer                                     │
+│  ┌────────────┬─────────────────────────────────────┐│
+│  │  SidePanel │  WorkspaceWrap                      ││
+│  │            │  ┌────────────────────────────────┐ ││
+│  │  • Text    │  │  Toolbar (context-sensitive)    │ ││
+│  │  • Shapes  │  ├────────────────────────────────┤ ││
+│  │  • Upload  │  │  Workspace (Konva Stage)        │ ││
+│  │  • Input   │  │                                │ ││
+│  │  • Bg      │  │  Canvas: zoom, pan, select     │ ││
+│  │  • Layers  │  │  Elements rendered here         │ ││
+│  │            │  │  Input Fields Popup (optional)  │ ││
+│  │            │  │                                │ ││
+│  │            │  ├────────────────────────────────┤ ││
+│  │            │  │  ZoomButtons                    │ ││
+│  └────────────┴──┴────────────────────────────────┘ ││
+└──────────────────────────────────────────────────────┘
 ```
 
 **State management** uses MobX-State-Tree. The `store` is the single source of truth — all UI components observe it reactively.
@@ -139,7 +159,7 @@ const store = createStore();
 ### Canvas Size
 
 ```js
-store.setSize(800, 600);         // Set canvas dimensions in pixels
+store.setSize(800, 600);                  // Set canvas dimensions in pixels
 store.setUnit({ unit: 'mm', dpi: 300 }); // Set working unit and DPI
 ```
 
@@ -188,7 +208,7 @@ store.ungroupElements([groupId]);         // Ungroup a group
 
 // Find
 store.getElementById(id);                // Find element by ID across all pages
-store.find(callback);                     // Find first element matching callback
+store.find(callback);                    // Find first element matching callback
 ```
 
 ### Element Actions
@@ -228,6 +248,8 @@ store.clear();                            // Reset store to empty state
 store.validate(json);                     // Returns array of validation errors
 ```
 
+> **Note:** `loadJSON` automatically loads referenced Google Fonts and triggers the [Input Fields popup](#input-fields) if the template contains input field elements.
+
 ### Events
 
 ```js
@@ -245,8 +267,6 @@ store.addFont({ fontFamily: 'Custom', url: '...' });
 store.removeFont('Custom');
 ```
 
-> When loading a design via `loadJSON`, all fonts referenced in text elements are **automatically loaded** from Google Fonts.
-
 ---
 
 ## Element Types
@@ -330,7 +350,7 @@ store.removeFont('Custom');
 | `selectable` | boolean | `true` | Can be selected |
 | `removable` | boolean | `true` | Can be deleted |
 | `name` | string | `''` | Display name (shown in layers) |
-| `custom` | object | `{}` | Arbitrary custom data |
+| `custom` | object | `{}` | Arbitrary custom data (preserved through serialization) |
 
 ### Shadow (All Elements)
 
@@ -356,8 +376,8 @@ import { DesignContainer, SidePanelWrap, WorkspaceWrap } from 'labellife-design-
 | Component | Description |
 |---|---|
 | `DesignContainer` | Root layout container. Accepts `style` prop for dimensions. |
-| `SidePanelWrap` | Horizontal wrapper for side panel + workspace. |
-| `WorkspaceWrap` | Flex container for the canvas area + zoom buttons. |
+| `SidePanelWrap` | Wrapper for the side panel area. |
+| `WorkspaceWrap` | Flex container for toolbar, canvas, and zoom controls. |
 
 ### Workspace
 
@@ -367,12 +387,19 @@ import { Workspace } from 'labellife-design-tool/canvas/workspace';
 <Workspace store={store} />
 ```
 
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `store` | Store | *required* | The MobX-State-Tree store instance |
+| `showInputFieldsPopup` | boolean | `true` | Show the input fields popup when a template with input fields is loaded. Set to `false` to disable. |
+| `components` | object | `{}` | Override slots (e.g. `{ PageControls: MyComponent }`) |
+
 The workspace provides:
 - **Infinite canvas** with zoom and pan (mouse wheel + drag)
 - **Click selection** and **multi-select** (Shift+click)
 - **Transform handles** for resize and rotation
 - **Auto-fit** to container on mount
 - **Background rendering** per page
+- **Input fields popup** (automatically shown when a loaded template contains input fields)
 
 ### Zoom Buttons
 
@@ -406,13 +433,21 @@ import {
   TextSection,
   ElementsSection,
   UploadSection,
+  InputFieldsSection,
   BackgroundSection,
   LayersSection,
 } from 'labellife-design-tool/side-panel';
 
 <SidePanel
   store={store}
-  sections={[TextSection, ElementsSection, UploadSection, BackgroundSection, LayersSection]}
+  sections={[
+    TextSection,
+    ElementsSection,
+    UploadSection,
+    InputFieldsSection,
+    BackgroundSection,
+    LayersSection,
+  ]}
   defaultSection="text"
 />
 ```
@@ -424,6 +459,7 @@ import {
 | `TextSection` | Text | Add heading, subheading, and body text presets |
 | `ElementsSection` | Elements | 60+ shapes and 6 line styles |
 | `UploadSection` | Upload | Drag-and-drop or file picker for images |
+| `InputFieldsSection` | Input Fields | Add placeholder input elements (Text, Date, Integer, Image) for template-based workflows |
 | `BackgroundSection` | Background | Color picker with 22 preset colors |
 | `LayersSection` | Layers | Layer list with visibility, lock, reorder, and delete |
 
@@ -447,7 +483,6 @@ const MyCustomSection = {
   ),
 };
 
-// Use it
 <SidePanel store={store} sections={[MyCustomSection, TextSection, LayersSection]} />
 ```
 
@@ -480,23 +515,165 @@ The toolbar is **context-sensitive** — it automatically shows relevant control
 | **Line** | Line color |
 | **All** | Opacity, Move up/down, Lock/Unlock, Duplicate, Delete |
 
-### Custom Action Controls
+The toolbar includes built-in **Import** and **Download** buttons by default.
+
+### Customizing Toolbar Buttons
 
 ```jsx
 <Toolbar
   store={store}
   components={{
+    // Add custom action buttons
     ActionControls: ({ store }) => (
-      <>
-        {/* Custom Download button */}
-        <button onClick={() => store.saveAsImage()}>Export</button>
-      </>
+      <button onClick={() => store.saveAsImage()}>Export</button>
     ),
+    // Replace or hide the Import button
+    ImportButton: null,          // Set to null to hide
+    // Replace or hide the Download button
+    DownloadButton: MyDownload,  // Provide a custom component
   }}
 />
 ```
 
-The toolbar includes built-in **Download** and **Import** buttons by default.
+---
+
+## Input Fields
+
+Input fields allow template designers (admins) to define placeholder elements that prompt end-users for values when a template is loaded. This is useful for creating reusable templates where certain fields — such as a name, date, or quantity — need to be filled in by the user.
+
+### Overview
+
+The input fields system consists of three parts:
+
+1. **Admin Panel** (`InputFieldsSection`) — A side panel where the admin adds input field elements to the template and configures their prompt text and whether they are required.
+2. **Metadata** — Each input field element stores its configuration in the `custom` property, which is preserved through JSON serialization.
+3. **User Popup** — When a template containing input fields is loaded via `store.loadJSON()`, a sequential dialog automatically prompts the user to fill in each field.
+
+### Supported Input Types
+
+| Type | Description | Input Control |
+|---|---|---|
+| `text` | Free-form text entry | Text input |
+| `date` | Date value with configurable format | Date picker |
+| `integer` | Whole number value | Number input (integers only) |
+| `image` | Image upload placeholder | **Not yet implemented** — see [Roadmap](#roadmap) |
+
+### Adding Input Fields (Admin Side)
+
+Include `InputFieldsSection` in your side panel sections:
+
+```jsx
+import { InputFieldsSection } from 'labellife-design-tool/side-panel';
+
+<SidePanel
+  store={store}
+  sections={[TextSection, ElementsSection, InputFieldsSection, LayersSection]}
+/>
+```
+
+For each input type, the admin can configure:
+
+- **Prompt Text** — The message displayed to the end-user (e.g. "Enter your name", "Select the event date").
+- **Required** — Whether the field must be filled in. If required, the Skip button is hidden and the Confirm button is disabled until a value is entered.
+- **Date Format** *(date type only)* — Choose from `MM-DD-YYYY`, `Month Name-DD-YYYY`, `Month Name-DD`, `YYYY`, or `MM-DD`.
+
+### Input Field Metadata
+
+Each input field element stores the following in its `custom` property:
+
+```json
+{
+  "inputField": true,
+  "inputType": "text",
+  "placeholder": "Enter text",
+  "promptText": "Please enter your name",
+  "required": false
+}
+```
+
+For date fields, an additional `dateFormat` property is included:
+
+```json
+{
+  "inputField": true,
+  "inputType": "date",
+  "placeholder": "Select date",
+  "promptText": "When is the event?",
+  "required": true,
+  "dateFormat": "MM-DD-YYYY"
+}
+```
+
+### Controlling the Popup
+
+The input fields popup is rendered inside the `<Workspace>` component and is **enabled by default**. When `store.loadJSON()` is called with a template that contains input field elements, the popup automatically appears.
+
+```jsx
+// Popup enabled (default) — dialog appears after loadJSON if input fields exist
+<Workspace store={store} />
+
+// Popup disabled — input fields retain their template placeholder values
+<Workspace store={store} showInputFieldsPopup={false} />
+```
+
+When `showInputFieldsPopup` is set to `false`, all input fields are treated as if they were skipped — their original template values are preserved regardless of whether they are marked as required.
+
+### Customizing the Popup Appearance
+
+Use `setInputFieldsConfig` to override the default dialog styles:
+
+```js
+import { setInputFieldsConfig } from 'labellife-design-tool';
+
+setInputFieldsConfig({
+  // Style overrides (applied via MUI sx prop)
+  dialogStyle: { borderRadius: 16 },
+  titleStyle: { color: '#1a1a1a', fontFamily: 'Georgia' },
+  promptStyle: { fontSize: 15 },
+  inputStyle: { borderRadius: 8 },
+  submitButtonStyle: { backgroundColor: '#4caf50', '&:hover': { backgroundColor: '#388e3c' } },
+  skipButtonStyle: { color: '#757575' },
+
+  // Button text overrides
+  submitButtonText: 'Apply',
+  skipButtonText: 'Leave as is',
+});
+```
+
+### Providing a Custom Dialog Component
+
+For complete control over the popup UI, provide a `CustomDialog` component:
+
+```js
+import { setInputFieldsConfig } from 'labellife-design-tool';
+
+setInputFieldsConfig({
+  CustomDialog: ({ fields, currentIndex, onSubmit, onSkip, onComplete }) => {
+    // fields        — array of input field elements
+    // currentIndex  — index of the current field being displayed
+    // onSubmit(elementId, value) — call to set the value and advance
+    // onSkip(elementId)         — call to skip a field and advance
+    // onComplete()              — call when all fields are processed
+    return <MyCustomDialogUI />;
+  },
+});
+```
+
+### Accessing Input Fields Programmatically
+
+```js
+// Get all input field elements across all pages
+const fields = store.inputFields;
+
+// Get pending fields awaiting user input
+const pending = store._pendingInputFields;
+
+// Manually trigger the input fields flow (called automatically by loadJSON)
+store.requestInputFields();
+
+// Clear all pending fields
+store.clearPendingInputFields();
+```
 
 ---
 
@@ -546,11 +723,8 @@ To remove a mask, click **Remove Mask** in the mask panel.
 Programmatically:
 
 ```js
-// Apply mask
-element.set({ clipSrc: 'circle' });
-
-// Remove mask
-element.set({ clipSrc: '' });
+element.set({ clipSrc: 'circle' });  // Apply mask
+element.set({ clipSrc: '' });        // Remove mask
 ```
 
 ---
@@ -560,172 +734,138 @@ element.set({ clipSrc: '' });
 ### Image Export
 
 ```js
-// Export as data URL
 const dataURL = await store.toDataURL({
   mimeType: 'image/png',   // 'image/png' or 'image/jpeg'
   quality: 1,               // 0–1 (JPEG quality)
   pixelRatio: 2,            // Resolution multiplier
 });
 
-// Export as Blob
 const blob = await store.toBlob({ mimeType: 'image/png' });
 
-// Direct download
 await store.saveAsImage({ fileName: 'my-design.png' });
 ```
 
 ### PDF Export
 
 ```js
-// Multi-page PDF as data URL
-const pdfDataURL = await store.toPDFDataURL({
-  pixelRatio: 2,
-  dpi: 300,
-});
+const pdfDataURL = await store.toPDFDataURL({ pixelRatio: 2, dpi: 300 });
 
-// Direct download
 await store.saveAsPDF({ fileName: 'my-design.pdf' });
 ```
 
 ### JSON Export
 
 ```js
-// Serialize
 const json = store.toJSON();
-
-// Download as file
 store.saveAsJSON({ fileName: 'my-design.json' });
-
-// Load back
 store.loadJSON(json);
 ```
 
 ---
 
-## Internationalization (i18n)
+## Configuration
 
-The library supports full internationalization via a nested translation system with dot-notation key resolution.
+### Internationalization (i18n)
 
-### Setting Translations
+The library supports full internationalization via a nested translation system with dot-notation key resolution.
 
 ```js
-import { setTranslations } from 'labellife-design-tool/config';
+import { setTranslations, t } from 'labellife-design-tool/config';
 
 setTranslations({
   toolbar: {
     flip: 'Spiegelen',
-    flipHorizontally: 'Horizontaal spiegelen',
-    flipVertically: 'Verticaal spiegelen',
     effects: 'Effecten',
-    fitToBackground: 'Passend maken',
-    clip: 'Masker toepassen',
-    removeMask: 'Masker verwijderen',
-    crop: 'Bijsnijden',
-    fill: 'Vulkleur',
-    textStroke: 'Lijnkleur',
-    border: 'Rand',
-    cornerRadius: 'Hoekstraal',
-    color: 'Kleur',
-    opacity: 'Dekking',
-    up: 'Omhoog',
-    down: 'Omlaag',
-    lockedDescription: 'Vergrendelen',
-    unlockedDescription: 'Ontgrendelen',
-    duplicateElements: 'Dupliceren',
-    removeElements: 'Verwijderen',
     download: 'Downloaden',
     import: 'Importeren',
-    fileType: 'Bestandstype',
-    quality: 'Kwaliteit',
     undo: 'Ongedaan maken',
     redo: 'Opnieuw',
-    blur: 'Vervagen',
-    brightness: 'Helderheid',
-    shadow: 'Schaduw',
-    offsetX: 'Verschuiving X',
-    offsetY: 'Verschuiving Y',
+    // ... see full key reference below
   },
   sidePanel: {
     text: 'Tekst',
     elements: 'Elementen',
-    shapes: 'Vormen',
-    lines: 'Lijnen',
     upload: 'Uploaden',
-    uploadTip: 'Sleep afbeeldingen hierheen of klik om te uploaden',
     background: 'Achtergrond',
     layers: 'Lagen',
-    noLayers: 'Geen lagen op deze pagina',
-    headerText: 'Kop toevoegen',
-    subHeaderText: 'Subkop toevoegen',
-    bodyText: 'Broodtekst toevoegen',
+    inputFields: {
+      tab: 'Invoervelden',
+      title: 'Invoervelden',
+      required: 'Verplicht',
+      // ...
+    },
+  },
+  inputFieldsDialog: {
+    title: 'Invoer vereist',
+    submit: 'Bevestigen',
+    skip: 'Overslaan',
+    stepIndicator: 'Veld {current} van {total}',
   },
 });
-```
 
-Translations are **deep-merged**, so you can set them incrementally:
-
-```js
-// First call
+// Translations are deep-merged — safe to call multiple times
 setTranslations({ toolbar: { flip: 'Flip' } });
+setTranslations({ toolbar: { effects: 'Effects' } }); // Does not overwrite toolbar.flip
 
-// Second call — merges, does not overwrite toolbar.flip
-setTranslations({ toolbar: { effects: 'Effects' } });
+// Use the translation function anywhere
+t('toolbar.flip');                // Returns translated value
+t('toolbar.flip', 'Flip');       // Returns default if key not found
 ```
 
-### Using the Translation Function
+<details>
+<summary><strong>Full translation key reference</strong></summary>
 
-```js
-import { t } from 'labellife-design-tool/config';
-
-t('toolbar.flip');                    // Returns translated value
-t('toolbar.flip', 'Flip');           // Returns default if key not found
 ```
+toolbar.flip, toolbar.flipHorizontally, toolbar.flipVertically, toolbar.effects,
+toolbar.fitToBackground, toolbar.clip, toolbar.removeMask, toolbar.crop, toolbar.fill,
+toolbar.textStroke, toolbar.border, toolbar.cornerRadius, toolbar.color, toolbar.opacity,
+toolbar.up, toolbar.down, toolbar.lockedDescription, toolbar.unlockedDescription,
+toolbar.duplicateElements, toolbar.removeElements, toolbar.download, toolbar.import,
+toolbar.fileType, toolbar.quality, toolbar.undo, toolbar.redo, toolbar.blur,
+toolbar.brightness, toolbar.shadow, toolbar.offsetX, toolbar.offsetY,
+toolbar.group, toolbar.ungroup
 
----
-
-## Theming
-
-```js
-import { setTheme, getTheme } from 'labellife-design-tool/config';
+sidePanel.text, sidePanel.elements, sidePanel.shapes, sidePanel.lines,
+sidePanel.upload, sidePanel.uploadTip, sidePanel.background, sidePanel.layers,
+sidePanel.noLayers, sidePanel.headerText, sidePanel.subHeaderText, sidePanel.bodyText,
+sidePanel.inputFields.tab, sidePanel.inputFields.title, sidePanel.inputFields.description,
+sidePanel.inputFields.textInput, sidePanel.inputFields.dateInput,
+sidePanel.inputFields.integerInput, sidePanel.inputFields.imageInput,
+sidePanel.inputFields.required, sidePanel.inputFields.promptTextHint,
+sidePanel.inputFields.dateFormat
 
-setTheme('light'); // or 'dark'
+inputFieldsDialog.title, inputFieldsDialog.submit, inputFieldsDialog.skip,
+inputFieldsDialog.stepIndicator
 ```
 
----
+</details>
 
-## Utility Functions
-
-### Unit Conversion
+### Theming
 
 ```js
-import { unitToPx, pxToUnit } from 'labellife-design-tool/utils/unit';
+import { setTheme, getTheme } from 'labellife-design-tool/config';
 
-unitToPx({ unit: 'mm', dpi: 300, unitVal: 50 });  // → pixels
-pxToUnit({ unit: 'mm', dpi: 300, pxVal: 590.55 }); // → millimeters
+setTheme('light'); // or 'dark'
 ```
 
-**Supported units:** `px`, `mm`, `cm`, `in`, `pt`, `pc`
-
-### Image Utilities
-
-```js
-import { getImageSize } from 'labellife-design-tool/utils/image';
-
-const { width, height } = await getImageSize('https://example.com/photo.jpg');
-```
+### Input Fields Dialog Configuration
 
-### Font Utilities
+See [Input Fields — Customizing the Popup Appearance](#customizing-the-popup-appearance) for full details.
 
 ```js
-import { fetchGoogleFonts, loadGoogleFont, DEFAULT_FONTS } from 'labellife-design-tool';
-
-// Fetch full Google Fonts catalog
-const fonts = await fetchGoogleFonts(apiKey);
-
-// Load a specific font
-await loadGoogleFont('Open Sans');
-
-// DEFAULT_FONTS — array of 200+ popular font family names
+import { setInputFieldsConfig, getInputFieldsConfig } from 'labellife-design-tool';
+
+setInputFieldsConfig({
+  dialogStyle: {},          // MUI sx overrides for the Dialog paper
+  titleStyle: {},           // MUI sx overrides for the Dialog title
+  promptStyle: {},          // MUI sx overrides for the prompt text
+  inputStyle: {},           // MUI sx overrides for the input field
+  submitButtonStyle: {},    // MUI sx overrides for the Confirm button
+  skipButtonStyle: {},      // MUI sx overrides for the Skip button
+  submitButtonText: '',     // Override Confirm button label
+  skipButtonText: '',       // Override Skip button label
+  CustomDialog: null,       // Provide a fully custom dialog component
+});
 ```
 
 ---
@@ -762,7 +902,6 @@ The design JSON follows this structure:
     {
       "id": "page-1",
       "background": "#ffffff",
-      "duration": 5000,
       "children": [
         {
           "id": "el-1",
@@ -774,16 +913,25 @@ The design JSON follows this structure:
           "text": "Hello World",
           "fontSize": 32,
           "fontFamily": "Roboto",
-          "fill": "#000000"
+          "fill": "#000000",
+          "custom": {}
         },
         {
           "id": "el-2",
-          "type": "image",
-          "x": 50,
+          "type": "text",
+          "x": 200,
           "y": 200,
-          "width": 400,
-          "height": 300,
-          "src": "https://example.com/photo.jpg"
+          "width": 250,
+          "height": 40,
+          "text": "Sample Text",
+          "fontSize": 20,
+          "custom": {
+            "inputField": true,
+            "inputType": "text",
+            "placeholder": "Enter text",
+            "promptText": "What is your name?",
+            "required": true
+          }
         }
       ]
     }
@@ -793,7 +941,11 @@ The design JSON follows this structure:
 
 ---
 
-## Peer Dependencies
+## Dependencies
+
+### Peer Dependencies
+
+These must be installed in your host application:
 
 | Package | Version |
 |---|---|
@@ -808,10 +960,20 @@ The design JSON follows this structure:
 
 These are included in the package — no need to install separately:
 
-- `konva` + `react-konva` — Canvas rendering
-- `mobx` + `mobx-state-tree` + `mobx-react-lite` — State management
-- `jspdf` — PDF generation
-- `uuid` — Unique ID generation
+| Package | Purpose |
+|---|---|
+| `konva` + `react-konva` | Canvas rendering |
+| `mobx` + `mobx-state-tree` + `mobx-react-lite` | State management |
+| `jspdf` | PDF generation |
+| `uuid` | Unique ID generation |
+
+---
+
+## Roadmap
+
+The following features are planned but not yet implemented:
+
+- **Image Input Field Popup** — The `image` input type can be added to templates and its metadata is preserved in JSON, but the popup dialog for uploading images at load time is not yet available. Image fields are skipped during the input collection flow.
 
 ---