labellife-design-tool 2.1.1 → 2.1.3

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,20 @@ 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. |
+| `onInputFieldsComplete` | function | `undefined` | Callback fired after the user has completed (submitted or skipped) all input fields. Only called when the popup is enabled. |
+| `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 +434,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 +460,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 +484,6 @@ const MyCustomSection = {
   ),
 };
 
-// Use it
 <SidePanel store={store} sections={[MyCustomSection, TextSection, LayersSection]} />
 ```
 
@@ -480,23 +516,232 @@ 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
+  }}
+/>
+```
+
+---
+
+## 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 | File picker with preview |
+
+### 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} />
+
+// With completion callback
+<Workspace
+  store={store}
+  onInputFieldsComplete={() => {
+    console.log('All input fields have been filled!');
+    // e.g. navigate, save, show a toast, etc.
   }}
 />
 ```
 
-The toolbar includes built-in **Download** and **Import** buttons by default.
+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 Custom Dialog Components
+
+You can replace the built-in popup with your own component — either globally for all types, or per input type.
+
+**Per-type custom dialogs** (override specific types only):
+
+```js
+import { setInputFieldsConfig } from 'labellife-design-tool';
+
+setInputFieldsConfig({
+  CustomTextDialog: MyTextPopup,       // Used for text fields
+  CustomDateDialog: MyDatePopup,       // Used for date fields
+  CustomIntegerDialog: MyNumberPopup,  // Used for integer fields
+  CustomImageDialog: MyImagePopup,     // Used for image fields
+});
+```
+
+**Global custom dialog** (catches any type without a per-type override):
+
+```js
+setInputFieldsConfig({
+  CustomDialog: MyGenericPopup,        // Fallback for all types
+});
+```
+
+**Mix and match** — per-type takes priority over global:
+
+```js
+setInputFieldsConfig({
+  CustomImageDialog: MyImagePopup,     // Only image fields use this
+  CustomDialog: MyGenericPopup,        // Text, date, and integer use this
+});
+```
+
+**Resolution order:** `CustomTextDialog` / `CustomDateDialog` / `CustomIntegerDialog` / `CustomImageDialog` > `CustomDialog` > built-in dialog.
+
+> **Note:** When `showInputFieldsPopup={false}` is set on `<Workspace>`, no popup is shown regardless of any custom dialog configuration.
+
+**Props passed to every custom dialog component:**
+
+| Prop | Type | Description |
+|---|---|---|
+| `field` | object | The current input field element (MST node with `id`, `custom`, etc.) |
+| `fields` | array | All pending input field elements |
+| `currentIndex` | number | Zero-based index of the current field |
+| `totalCount` | number | Total number of fields to process |
+| `onSubmit(elementId, value)` | function | Call to set the value and advance to the next field |
+| `onSkip(elementId)` | function | Call to skip the field and advance |
+| `onComplete()` | function | Call when all fields are processed |
+
+**Example custom dialog:**
+
+```jsx
+const MyImagePopup = ({ field, currentIndex, totalCount, onSubmit, onSkip }) => {
+  const promptText = field.custom?.promptText || 'Upload an image';
+
+  const handleFile = (e) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+    const reader = new FileReader();
+    reader.onload = (ev) => onSubmit(field.id, ev.target.result);
+    reader.readAsDataURL(file);
+  };
+
+  return (
+    <div className="my-dialog">
+      <h3>{promptText}</h3>
+      <p>Field {currentIndex + 1} of {totalCount}</p>
+      <input type="file" accept="image/*" onChange={handleFile} />
+      {!field.custom?.required && (
+        <button onClick={() => onSkip(field.id)}>Skip</button>
+      )}
+    </div>
+  );
+};
+```
+
+### 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 +791,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,130 +802,113 @@ 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
+
+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
+
+inputFieldsDialog.title, inputFieldsDialog.submit, inputFieldsDialog.skip,
+inputFieldsDialog.stepIndicator
 ```
 
----
+</details>
 
-## Theming
+### Theming
 
 ```js
 import { setTheme, getTheme } from 'labellife-design-tool/config';
@@ -691,41 +916,28 @@ import { setTheme, getTheme } from 'labellife-design-tool/config';
 setTheme('light'); // or 'dark'
 ```
 
----
-
-## Utility Functions
-
-### Unit Conversion
-
-```js
-import { unitToPx, pxToUnit } from 'labellife-design-tool/utils/unit';
-
-unitToPx({ unit: 'mm', dpi: 300, unitVal: 50 });  // → pixels
-pxToUnit({ unit: 'mm', dpi: 300, pxVal: 590.55 }); // → millimeters
-```
-
-**Supported units:** `px`, `mm`, `cm`, `in`, `pt`, `pc`
+### Input Fields Dialog Configuration
 
-### Image Utilities
+See [Input Fields — Customizing the Popup Appearance](#customizing-the-popup-appearance) for full details.
 
 ```js
-import { getImageSize } from 'labellife-design-tool/utils/image';
-
-const { width, height } = await getImageSize('https://example.com/photo.jpg');
-```
-
-### Font Utilities
-
-```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,       // Custom dialog for all types (global fallback)
+  CustomTextDialog: null,   // Custom dialog for text fields only
+  CustomDateDialog: null,   // Custom dialog for date fields only
+  CustomIntegerDialog: null,// Custom dialog for integer fields only
+  CustomImageDialog: null,  // Custom dialog for image fields only
+});
 ```
 
 ---
@@ -762,7 +974,6 @@ The design JSON follows this structure:
     {
       "id": "page-1",
       "background": "#ffffff",
-      "duration": 5000,
       "children": [
         {
           "id": "el-1",
@@ -774,16 +985,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 +1013,11 @@ The design JSON follows this structure:
 
 ---
 
-## Peer Dependencies
+## Dependencies
+
+### Peer Dependencies
+
+These must be installed in your host application:
 
 | Package | Version |
 |---|---|
@@ -808,10 +1032,21 @@ 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
+
+All four input field types (Text, Date, Integer, Image) are fully implemented. Future enhancements under consideration:
+
+- **Drag-and-drop image upload** in the input fields popup dialog
+- **URL-based image input** as an alternative to file upload
 
 ---