v2.0.2

fix(page): Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator
update
2025-12-11 02:38:18 +00:00 · 2025-12-11 02:38:18 +00:00 · 2025-12-11 02:31:18 +00:00 · 2025-12-10 21:37:21 +00:00 · 2025-12-10 21:37:21 +00:00 · 2025-12-10 20:55:28 +00:00
54 changed files with 7719 additions and 6084 deletions
--- a/.gitea/workflows/default_nottags.yaml
+++ b/.gitea/workflows/default_nottags.yaml
@@ -6,8 +6,8 @@ on:
      - '**'

 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
      - name: Install pnpm and npmci
        run: |
          pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci

      - name: Run npm prepare
        run: npmci npm prepare
--- a/.gitea/workflows/default_tags.yaml
+++ b/.gitea/workflows/default_tags.yaml
@@ -6,8 +6,8 @@ on:
      - '*'

 env:
-  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
-  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  IMAGE: code.foss.global/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@/${{gitea.repository}}.git
  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
@@ -26,7 +26,7 @@ jobs:
      - name: Prepare
        run: |
          pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
          npmci npm prepare

      - name: Audit production dependencies
@@ -54,7 +54,7 @@ jobs:
      - name: Prepare
        run: |
          pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
          npmci npm prepare

      - name: Test stable
@@ -82,7 +82,7 @@ jobs:
      - name: Prepare
        run: |
          pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
          npmci npm prepare

      - name: Release
@@ -104,7 +104,7 @@ jobs:
      - name: Prepare
        run: |
          pnpm install -g pnpm
-          pnpm install -g @shipzone/npmci
+          pnpm install -g @ship.zone/npmci
          npmci npm prepare

      - name: Code quality
--- a/.gitignore
+++ b/.gitignore
@@ -3,7 +3,6 @@
 # artifacts
 coverage/
 public/
-pages/

 # installs
 node_modules/
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1 @@
-registry=https://verdaccio.nevermind.cloud/
+registry=https://registry.npmjs.org/
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,159 @@
 # Changelog

+## 2025-12-11 - 2.0.2 - fix(page)
+Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator
+
+- Extract documentSettings.theme to a local variable in dedocument-page and use safe optional checks when emitting CSS custom properties
+- Use theme pageBackground / coverPageBackground values consistently for page background-image fallback logic
+- Make pagecontainer background follow the --text-bg-color CSS variable instead of a hard #ffffff color
+- Switch footer separator color variable to --color-accent-bg so the footer stripe uses the theme accent background
+
+## 2025-12-10 - 2.0.1 - fix(core)
+Migrate file I/O to @push.rocks/smartfs, adopt TC39 decorators v3 accessor in web components, and update docs/tests
+
+- Added dependency @push.rocks/smartfs and replaced usages of @push.rocks/smartfile.fs with the SmartFs class-based API
+- Updated test helpers and test code to use SmartFs (SmartFsProviderNode) and new file read/write methods
+- Replaced legacy property declarations with TC39 decorators v3 accessor keyword across web components (ts_web/elements/*)
+- Replaced synchronous smartfile directory operations with async SmartFs directory.exists/create flow for .nogit
+- Updated README and added readme.hints.md with SmartFs usage examples, decorator guidance, and other developer hints
+
+## 2025-12-10 - 2.0.0 - BREAKING CHANGE(build)
+Upgrade dependencies and dev tooling; adjust TypeScript config
+
+- Bumped runtime dependencies: @design.estate/*, @push.rocks/*, @git.zone/tsrun (to ^2.0.0), @tsclass/tsclass, puppeteer, @types/node, qrcode types, and others.
+- Updated devDependencies: @git.zone/tsbuild, tsbundle, tstest, tswatch to newer releases.
+- Removed experimentalDecorators and useDefineForClassFields from tsconfig.json — this may change decorator handling and affect compilation.
+- These dependency and config changes may introduce breaking behavior; recommend a major version bump.
+
+## 2025-01-01 - 1.6.11 - fix(license)
+Update copyright notice in license to reflect new ownership
+
+- Updated copyright from Lossless GmbH to Task Venture Capital GmbH.
+
+## 2024-12-08 - 1.6.10 - fix(core)
+Improve stability and performance of document generation
+
+
+## 2024-12-08 - 1.6.9 - fix(contentinvoice.ts)
+Improve invoice item layout and fix alignment issues.
+
+- Fixed missing border on last invoice item.
+- Added highlighted style for invoice lines.
+- Corrected alignment and display of invoice item details.
+- Included VAT percentage display adjustments.
+
+## 2024-12-07 - 1.6.8 - fix(rendering and logging)
+Removed debug logging from document rendering process.
+
+- Removed console logs from content invoice, document rendering, page scaling, and overflow checking.
+
+## 2024-12-07 - 1.6.7 - fix(document rendering)
+Fixed overflow issues in document and page elements
+
+- Ensured content overflow handling in document.ts
+- Adjusted page element overflow settings in page.ts
+
+## 2024-12-07 - 1.6.6 - fix(page-render)
+Fix layout scaling adjustment for page component
+
+- Ensure `font-family` is no longer explicitly set to inherit in `DePage` component.
+- Adjust scaling logic to properly set width and overflow based on calculated scale.
+
+## 2024-12-05 - 1.6.5 - fix(contentinvoice)
+Fix VAT group item number formatting and remove custom font style in invoice sums.
+
+- Removed custom font-family style from the invoice sums.
+- Corrected VAT group item numbers display by properly formatting and removing trailing comma.
+
+## 2024-12-05 - 1.6.4 - fix(styling)
+Consolidated shared styles for consistent font applied across various components.
+
+- Added a shared style file for consistent font family across components
+- Applied shared style to contentinvoice, letterheader, pagecontent, pagefooter, and pageheader components
+
+## 2024-12-05 - 1.6.3 - fix(ui)
+Corrects font family in contentinvoice element.
+
+- Updated the font-family for line items in contentinvoice.ts
+
+## 2024-12-05 - 1.6.2 - fix(translation)
+Corrected missing translation keys for VAT short form across multiple languages.
+
+- Fixed missing 'vatShort' translation for English, German, Spanish, French, and Italian in translation.ts file.
+
+## 2024-12-05 - 1.6.1 - fix(core)
+Ensure consistent project structure and code organization without additional changes.
+
+
+## 2024-12-05 - 1.6.0 - feat(documentSettings + translations + vat in itemLines)
+Updated dependencies in package.json
+
+- Updated @types/node to version ^22.10.1
+- Updated qrcode package to version ^1.5.4
+
+## 2024-12-02 - 1.5.3 - fix(elements)
+Update viewer attributes and fix font integration
+
+- Updated viewer.ts to add missing property decorators for letterData and documentSettings.
+- Fixed font loading by correcting URLs in index.html.
+- Set demoDocumentSettings default header and footer to false.
+
+## 2024-12-02 - 1.5.2 - fix(workflow)
+Corrected Docker image references and package scope in YAML workflows for compatibility.
+
+- Updated Docker image reference from GitLab to code.foss.global for npmci UI workflows.
+- Fixed npm package scope for `@shipzone/npmci` in YAML workflows.
+- Minor formatting corrections for better code readability.
+
+## 2024-12-02 - 1.5.1 - fix(package)
+Fix duplicate node export in package.json
+
+- Resolved a duplication issue with the './node' export in package.json exports field.
+
+## 2024-12-02 - 1.5.0 - feat(core)
+Refactor project structure for better modularity and code organization
+
+- Moved shared components to a dedicated 'dist_ts_shared' directory for better separation of concerns.
+- Updated import statements across the codebase to align with the new file structure.
+- Introduced translations directly under 'ts_shared' for language-specific string management.
+
+## 2024-12-02 - 1.4.0 - feat(translation)
+Add French and Italian translations for document interface
+
+- Expanded translation support by adding French and Italian language translations
+- Fixed duplicated text in German final page statement
+- Improved Spanish translation of reverse VAT note and final page statement
+
+## 2024-12-02 - 1.3.2 - fix(core)
+Minor updates and optimizations in the output PDF formatting process.
+
+- Improved handling of page content overflow in PDF generation.
+- Refined default document settings for consistent rendering.
+
+## 2024-12-02 - 1.3.1 - fix(documentation)
+Updated project description and enhanced documentation in package.json and README
+
+- The package description in package.json was updated to include more features.
+- Added more details about setting up and using the PdfService.
+- Included comprehensive examples for initializing and generating PDFs.
+- Expanded sections covering advanced features, modular components, interactive documents, and localization support.
+
+## 2024-12-02 - 1.3.0 - feat(translation)
+Add multi-language support for document translations.
+
+- Implemented translation interface for document labels.
+- Added Spanish translations alongside existing English and German.
+- Updated content invoice, page header, and page footer elements to utilize language-specific translations.
+
+## 2024-12-01 - 1.2.0 - feat(core)
+Enhance document generation capabilities with improved modular structure and extended translation support.
+
+- Enhanced document generation framework with a more modular structure.
+- Integrated support for translations using JSON-based language maps.
+- Optimized PDF generation process for dynamic document content.
+- Added properties in 'IDocumentSettings' for language code management.
+- Updated README documentation with more comprehensive examples and guidance.
+
 ## 2024-11-30 - 1.1.0 - feat(core)
 Enhanced document generation features and added translation capabilities

--- a/html/index.html
+++ b/html/index.html
@@ -1,6 +1,3 @@
-<!--gitzone element-->
-<!-- made by Task Venture Capital GmbH -->
-<!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
  <head>
    <!--Lets set some basic meta tags-->
--- a/4
+++ b/4
@@ -1,4 +1,4 @@
-Copyright (c) 2022 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2022 Task Venture Capital GmbH (hello@task.vc)

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -16,4 +16,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
--- a/npmextra.json
+++ b/npmextra.json
@@ -5,29 +5,30 @@
      "githost": "code.foss.global",
      "gitscope": "designestate/private",
      "gitrepo": "dedocument-catalog",
-      "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
+      "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
      "npmPackagename": "@designestate_private/dedocument-catalog",
      "license": "MIT",
      "projectDomain": "design.estate",
      "shortDescription": "undefined variable",
      "keywords": [
        "document generation",
-        "invoices",
-        "PDF creation",
-        "TypeScript",
-        "web components",
-        "templating",
-        "dynamic rendering",
-        "responsive design",
+        "invoice automation",
        "business documentation",
-        "automated workflows",
-        "modular architecture",
-        "smart contracts",
-        "javascript",
+        "dynamic rendering",
+        "PDF creation",
+        "web components",
+        "Node.js",
+        "TypeScript",
+        "templating",
+        "modern web technologies",
+        "responsive design",
        "QR code",
-        "custom elements",
-        "nodejs",
-        "data-driven"
+        "modular architecture",
+        "automated workflows",
+        "localization",
+        "digital signatures",
+        "security",
+        "interactive documents"
      ]
    }
  },
--- a/package.json
+++ b/package.json
@@ -1,43 +1,49 @@
 {
  "name": "@design.estate/dees-document",
-  "version": "1.1.0",
+  "version": "2.0.2",
  "private": false,
-  "description": "A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.",
+  "description": "A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.",
  "main": "dist_ts_web/index.js",
  "typings": "dist_ts_web/index.d.ts",
  "exports": {
-    "./ts": "./dist_ts/index.js",
-    "./ts_web": "./dist_ts_web/index.js"
+    ".": "./dist_ts/index.js",
+    "./node": "./dist_ts/index.js",
+    "./web": "./dist_ts_web/index.js",
+    "./shared": "./dist_ts_shared/index.js",
+    "./interfaces": "./dist_ts_shared/interfaces/index.js"
  },
  "scripts": {
    "test": "npm run build && tstest test/",
-    "build": "tsbuild --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbuild element --allowimplicitany && tsbundle element --production",
    "watch": "tswatch element",
    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
  "license": "MIT",
  "dependencies": {
-    "@design.estate/dees-domtools": "^2.0.65",
-    "@design.estate/dees-element": "^2.0.39",
-    "@design.estate/dees-wcctools": "^1.0.90",
-    "@git.zone/tsrun": "^1.3.3",
-    "@push.rocks/smartfile": "^11.0.21",
-    "@push.rocks/smartjson": "^5.0.20",
-    "@push.rocks/smartpath": "^5.0.18",
-    "@push.rocks/smartpdf": "^3.1.8",
-    "@push.rocks/smarttime": "^4.0.8",
-    "@tsclass/tsclass": "^4.1.2",
-    "@types/qrcode": "^1.5.5",
+    "@design.estate/dees-catalog": "^3.3.0",
+    "@design.estate/dees-domtools": "^2.3.6",
+    "@design.estate/dees-element": "^2.1.3",
+    "@design.estate/dees-wcctools": "^1.2.1",
+    "@git.zone/tsrun": "^2.0.0",
+    "@push.rocks/smartfile": "^13.1.0",
+    "@push.rocks/smartfs": "^1.2.0",
+    "@push.rocks/smartjson": "^6.0.0",
+    "@push.rocks/smartpath": "^6.0.0",
+    "@push.rocks/smartpdf": "^4.1.1",
+    "@push.rocks/smarttime": "^4.1.1",
+    "@tsclass/tsclass": "^9.3.0",
+    "@types/node": "^25.0.0",
+    "@types/qrcode": "^1.5.6",
+    "puppeteer": "^24.32.1",
    "qrcode": "^1.5.4"
  },
  "devDependencies": {
-    "@git.zone/tsbuild": "^2.2.0",
-    "@git.zone/tsbundle": "^2.1.0",
-    "@git.zone/tstest": "^1.0.90",
-    "@git.zone/tswatch": "^2.0.25",
-    "@push.rocks/projectinfo": "^5.0.2",
-    "@push.rocks/tapbundle": "^5.5.3"
+    "@git.zone/tsbuild": "^3.1.2",
+    "@git.zone/tsbundle": "^2.6.3",
+    "@git.zone/tstest": "^3.1.3",
+    "@git.zone/tswatch": "^2.3.7",
+    "@push.rocks/projectinfo": "^5.0.2"
  },
  "files": [
    "ts/**/*",
@@ -57,29 +63,30 @@
  "type": "module",
  "repository": {
    "type": "git",
-    "url": "git+https://gitlab.com/designestate/private/dedocument-catalog.git"
+    "url": "git+https://code.foss.global/designestate/private/dedocument-catalog.git"
  },
  "bugs": {
-    "url": "https://gitlab.com/designestate/private/dedocument-catalog/issues"
+    "url": "https://code.foss.global/designestate/private/dedocument-catalog/issues"
  },
-  "homepage": "https://gitlab.com/designestate/private/dedocument-catalog#readme",
+  "homepage": "https://code.foss.global/designestate/private/dedocument-catalog#readme",
  "keywords": [
    "document generation",
-    "invoices",
-    "PDF creation",
-    "TypeScript",
-    "web components",
-    "templating",
-    "dynamic rendering",
-    "responsive design",
+    "invoice automation",
    "business documentation",
-    "automated workflows",
-    "modular architecture",
-    "smart contracts",
-    "javascript",
+    "dynamic rendering",
+    "PDF creation",
+    "web components",
+    "Node.js",
+    "TypeScript",
+    "templating",
+    "modern web technologies",
+    "responsive design",
    "QR code",
-    "custom elements",
-    "nodejs",
-    "data-driven"
+    "modular architecture",
+    "automated workflows",
+    "localization",
+    "digital signatures",
+    "security",
+    "interactive documents"
  ]
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.hints.md
+++ b/readme.hints.md
@@ -1 +1,40 @@
- 
+# Development Hints
+
+## Dependencies (v2.0.0)
+
+- Uses `@push.rocks/smartfs` (v1.2.0) for filesystem operations - SmartFs is class-based with fluent API
+- Uses `@push.rocks/smartfile` (v13.1.0) - note: v13 removed the `.fs` namespace, use smartfs instead
+- Uses `@git.zone/tstest/tapbundle` for tests (NOT @push.rocks/tapbundle)
+- Test files must end with `export default tap.start()`
+
+## TC39 Decorators v3
+
+All decorated properties in web components use the `accessor` keyword:
+```typescript
+@property({ type: Object })
+accessor letterData: TInvoice;
+```
+
+## SmartFs Usage
+
+```typescript
+import { SmartFs, SmartFsProviderNode } from '@push.rocks/smartfs';
+const smartfs = new SmartFs(new SmartFsProviderNode());
+
+// Reading files
+await smartfs.file('/path/to/file').encoding('utf8').read();
+
+// Writing files
+await smartfs.file('/path/to/file').write(buffer);
+
+// Directory operations
+await smartfs.directory('/path').exists();
+await smartfs.directory('/path').create();
+```
+
+## Project Structure
+
+- `ts/` - Node.js server-side code (PdfService)
+- `ts_web/` - Browser web components (Lit-based)
+- `ts_shared/` - Shared code (translations, interfaces)
+- `test/` - Test files
--- a/readme.md
+++ b/readme.md
@@ -1,185 +1,276 @@
 # @design.estate/dees-document

-A comprehensive solution for generating documents like invoices, integrating elements, templates, and services to streamline document creation.
+A powerful TypeScript framework for dynamically generating professional business documents like invoices with web components and PDF export capabilities. 🧾

-## Install
+## Issue Reporting and Security

-To add `@design.estate/dees-document` to your project, run the following command in your terminal:
+For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
+
+## Installation

 ```shell
-npm install @design.estate/dees-document --save
+pnpm install @design.estate/dees-document
 ```

-This will install the package and add it to your project's dependencies, ensuring all required modules are available in your `node_modules` directory.
+## Features
+
+- 📄 **PDF Generation** - Server-side PDF creation from structured data using Puppeteer
+- 🎨 **Web Components** - Lit-based custom elements for document rendering
+- 🌍 **Multi-language Support** - Built-in translation system (EN, DE, ES)
+- 📱 **Automatic Pagination** - Smart content overflow handling across pages
+- 💳 **QR Payment Codes** - EPC QR codes for SEPA payments
+- 🖨️ **Print Mode** - Optimized rendering for both screen and print
+- 📐 **A4 Format** - Precise DIN A4 document dimensions
+- ✨ **Theming** - Customizable colors, backgrounds, and branding

 ## Usage

-The `@design.estate/dees-document` package provides a robust framework for creating documents including invoices, contracts, and various other business-related documents. It is built on modern web technologies including TypeScript and ES modules to ensure a type-safe and easy-to-integrate experience. Below, we will guide you through the comprehensive usage of this package, from setting up your environment to generating PDF documents. 
-
-### Getting Started
-
-Before creating documents, initialize the document service which is central to this package. This is typically done at the beginning of your application.
+### Server-Side PDF Generation

 ```typescript
-import { PdfService, IPdfServiceConstructorOptions } from '@design.estate/dees-document';
+import { PdfService } from '@design.estate/dees-document';
+import type { TInvoice } from '@tsclass/tsclass/finance';

-async function setupPdfService() {
-  const options: IPdfServiceConstructorOptions = {
-    // Add necessary configuration here
-  };
-  
-  const pdfService = await PdfService.createAndStart(options);
-  console.log('PDF Service started successfully.');
-  return pdfService;
-}
+// Initialize the PDF service
+const pdfService = new PdfService({});
+await pdfService.start();
+
+// Create invoice data
+const invoice: TInvoice = {
+  type: 'invoice',
+  invoiceType: 'debitnote',
+  id: 'INV-2024-001',
+  invoiceId: 'INV-2024-001',
+  date: Date.now(),
+  currency: 'EUR',
+  dueInDays: 30,
+  reverseCharge: false,
+  from: {
+    name: 'Your Company GmbH',
+    type: 'company',
+    status: 'active',
+    address: {
+      streetName: 'Business Street',
+      houseNumber: '123',
+      city: 'Berlin',
+      country: 'Germany',
+      postalCode: '10115',
+    },
+    sepaConnection: {
+      bic: 'DEUTDEFF',
+      iban: 'DE89370400440532013000',
+    },
+    registrationDetails: {
+      vatId: 'DE123456789',
+      registrationName: 'Amtsgericht Berlin',
+      registrationId: 'HRB 12345',
+    },
+  },
+  to: {
+    name: 'Customer Inc.',
+    type: 'company',
+    status: 'active',
+    address: {
+      streetName: 'Client Avenue',
+      houseNumber: '456',
+      city: 'Munich',
+      country: 'Germany',
+      postalCode: '80331',
+    },
+    registrationDetails: {
+      vatId: 'DE987654321',
+    },
+  },
+  items: [
+    {
+      name: 'Web Development Services',
+      unitQuantity: 40,
+      unitNetPrice: 95,
+      unitType: 'hours',
+      vatPercentage: 19,
+      position: 1,
+    },
+    {
+      name: 'Hosting (Annual)',
+      unitQuantity: 1,
+      unitNetPrice: 299,
+      unitType: 'item',
+      vatPercentage: 19,
+      position: 2,
+    },
+  ],
+  subject: 'Invoice INV-2024-001',
+  versionInfo: {
+    type: 'final',
+    version: '1.0.0',
+  },
+};
+
+// Generate PDF
+const pdfResult = await pdfService.createPdfFromLetterObject({
+  letterData: invoice,
+  documentSettings: {
+    languageCode: 'EN',
+    enableDefaultHeader: true,
+    enableDefaultFooter: true,
+    enableFoldMarks: true,
+    dateStyle: 'long',
+  },
+});
+
+// Save to file
+import { SmartFs, SmartFsProviderNode } from '@push.rocks/smartfs';
+const fs = new SmartFs(new SmartFsProviderNode());
+await fs.file('./invoice.pdf').write(Buffer.from(pdfResult.buffer));
+
+// Don't forget to stop the service when done
+await pdfService.stop();
 ```

-This script initializes `PdfService`. Modify the options to tailor the service to your needs.
+### Document Settings

-### Creating Documents
+Customize document appearance with `IDocumentSettings`:

-With the PDF service ready, you can proceed to generate documents. The following section provides a detailed example of creating an invoice. This example is applicable to various document types with necessary adjustments.
+```typescript
+const documentSettings = {
+  // Language for translations
+  languageCode: 'DE', // 'EN' | 'DE' | 'ES'

-#### Step-by-Step: Create an Invoice
+  // Layout options
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+  enableFoldMarks: true,
+  enableTopDraftText: true,
+  enableInvoiceContractRefSection: true,

-1. **Define the Data Structure**: Describe the invoice details. This includes sender and recipient information, the items being invoiced, and more.
+  // Display options
+  vatGroupPositions: true,
+  dateStyle: 'long', // 'short' | 'medium' | 'long' | 'full'

-   ```typescript
-   import { ILetter } from '@design.estate/dees-document';
+  // Theming
+  theme: {
+    colorPrimaryForeground: '#ffffff',
+    colorPrimaryBackground: '#e4002b',
+    colorAccentForeground: '#333333',
+    colorAccentBackground: '#f5f5f5',
+    pageBackground: 'url(your-watermark.png)',
+    coverPageBackground: 'url(your-cover.png)',
+  },
+};
+```

-   const invoiceData: ILetter = {
-     from: {
-       name: "Your Company Name",
-       address: {
-         streetName: "Your Street",
-         houseNumber: "123",
-         city: "Your City",
-         country: "Your Country",
-         postalCode: "12345",
-       },
-       email: "your-email@example.com",
-       phone: "123-456-7890",
-     },
-     to: {
-       name: "Recipient Company Name",
-       address: {
-         streetName: "Recipient Street",
-         houseNumber: "456",
-         city: "Recipient City",
-         country: "Recipient Country",
-         postalCode: "67890",
-       },
-       email: "recipient-email@example.com",
-       phone: "098-765-4321",
-     },
-     content: {
-       invoiceData: {
-         items: [
-           {
-             name: "Service or Product Name",
-             unitQuantity: 2,
-             unitNetPrice: 100.00,
-             unitType: 'service',
-             vatPercentage: 19,
-             currency: 'EUR',
-           }
-         ]
-       }
-     },
-     subject: "Invoice for Services Rendered",
-     date: new Date().getTime(),
-     versionInfo: {
-       type: "final",
-       version: "1.0.0"
-     },
-   };
-   ```
+### Web Component Usage

-   Here, `ILetter` interface details all components of an invoice including sender (`from`) and recipient (`to`) information, as well as the invoiced items.
+For browser-based document viewing:

-2. **Generate the PDF**: Transform the invoice details into a PDF.
+```typescript
+import '@design.estate/dees-document/web';

-   ```typescript
-   async function generateInvoice(pdfService: PdfService, invoiceData: ILetter) {
-     const pdfBuffer = await pdfService.createPdfFromLetterObject(invoiceData);
-     console.log('Invoice PDF generated successfully.');
+// In your HTML/Lit template
+html`
+  <dedocument-viewer
+    .letterData=${invoiceData}
+    .documentSettings=${documentSettings}
+  ></dedocument-viewer>
+`;

-     // Save the PDF, send it via email, etc.
-   }
-   ```
+// Or render the document directly
+html`
+  <dedocument-dedocument
+    .letterData=${invoiceData}
+    .documentSettings=${documentSettings}
+  ></dedocument-dedocument>
+`;
+```

-   The function `createPdfFromLetterObject` returns a `Buffer` containing the generated PDF. From here, you can save this PDF to a file, send it to clients, or archive it.
+### Translation System

-3. **Integrate It All**: Here's how everything ties together into a complete script for generating an invoice:
+The package includes a translation system for multi-language document generation:

-   ```typescript
-   async function main() {
-     const pdfService = await setupPdfService();
-     await generateInvoice(pdfService, invoiceData);
-   }
+```typescript
+import { translate } from '@design.estate/dees-document/shared';

-   main().then(() => console.log('Invoice generation process completed.'));
-   ```
+// Translate document labels
+translate('DE', 'invoice@@totalGross'); // "Gesamtbetrag (Brutto)"
+translate('EN', 'invoice@@totalGross'); // "Total (Gross)"
+translate('ES', 'invoice@@totalGross'); // "Total (Bruto)"
+```

-   This script initiates the PDF service and generates the invoice PDF with the provided information.
+## Module Exports

-### Advanced Document Features
+The package provides multiple entry points:

-The package is designed to create not only invoices but a wide range of document types. Leverage its modular architecture to build and customize documents to fit specific needs.
+```typescript
+// Node.js server-side (PDF generation)
+import { PdfService } from '@design.estate/dees-document';
+import { PdfService } from '@design.estate/dees-document/node';

-#### Advanced Scenarios
+// Browser web components
+import '@design.estate/dees-document/web';

-1. **Custom Styling**: Customize the appearance of elements within your documents, such as headers, footers, and more.
+// Shared utilities and types
+import { translate, IDocumentSettings } from '@design.estate/dees-document/shared';

-   ```typescript
-   import { DeDocumentViewer } from '@design.estate/dees-element';
+// TypeScript interfaces
+import type { IDocumentSettings } from '@design.estate/dees-document/interfaces';
+```

-   const customStyledViewer = new DeDocumentViewer();
-   customStyledViewer.style.setProperty('--main-bg-color', 'lightblue');
-   document.body.appendChild(customStyledViewer);
-   ```
+## Document Components

-   Customize via CSS or dynamically through TypeScript where necessary.
+The framework includes these web components:

-2. **Interactive Document Elements**: Incorporate UI components like buttons, input fields, or visualizations tailored for your document needs.
+| Component | Description |
+|-----------|-------------|
+| `<dedocument-dedocument>` | Main document container with pagination |
+| `<dedocument-viewer>` | Document viewer with controls |
+| `<dedocument-page>` | Single A4 page with scaling support |
+| `<dedocument-pageheader>` | Company logo and branding header |
+| `<dedocument-letterheader>` | Sender/recipient addresses |
+| `<dedocument-pagecontent>` | Main content area |
+| `<dedocument-pagefooter>` | Company info and page numbers |
+| `<dedocument-contentinvoice>` | Invoice-specific content layout |
+| `<dedocument-paymentcode>` | EPC QR code for SEPA payments |

-3. **Multi-page Document Generation**: Handle overflow of content and automatic page generation while maintaining headers and footers.
+## Draft vs Final Documents

-   ```typescript
-   pdfService.adjustDePageScaling();
-   ```
+Control document version display:

-   Toggle between print and digital formats and handle scaling.
+```typescript
+const invoice = {
+  // ... other fields
+  versionInfo: {
+    type: 'draft', // Shows watermark "DRAFT" across pages
+    version: '0.1.0',
+  },
+};

-4. **Embedding Images and Logos**: Add company logos, graphics, or auxiliary content to enhance document presentation.
-
-### Additional Capabilities
-
-Beyond these examples, delve deeper into advanced functionalities such as:
-
- **Document Management**: Manage multiple document templates, manage versions, and add annotations or notes.
- **Dynamic Rendering**: Use templating for dynamic content rendering based on variable inputs.
- **Responsive Design for Digital Documents**: Ensure documents are displayed correctly across devices.
-
-### Concluding Remarks
-
-The `@design.estate/dees-document` package is an essential tool in the modern document generation ecosystem. Its expansive capabilities, from basic invoices to complex document templates, make it a versatile solution for businesses of all scales. Implementing this service broadly simplifies document management workflows and enhances document presentation precision and quality. For further depth, consult the package's documentation or explore the examples included in the module.
+// For final documents
+const invoice = {
+  // ... other fields
+  versionInfo: {
+    type: 'final', // Clean document without watermark
+    version: '1.0.0',
+  },
+};
+```

 ## License and Legal Information

-This repository contains open-source code that is licensed under the MIT License. A copy of the MIT License can be found in the [license](license) file within this repository. 
+This repository contains open-source code licensed under the MIT License. A copy of the license can be found in the [LICENSE](./LICENSE) file.

 **Please note:** The MIT License does not grant permission to use the trade names, trademarks, service marks, or product names of the project, except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the NOTICE file.

 ### Trademarks

-This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH and are not included within the scope of the MIT license granted herein. Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines, and any usage must be approved in writing by Task Venture Capital GmbH.
+This project is owned and maintained by Task Venture Capital GmbH. The names and logos associated with Task Venture Capital GmbH and any related products or services are trademarks of Task Venture Capital GmbH or third parties, and are not included within the scope of the MIT license granted herein.
+
+Use of these trademarks must comply with Task Venture Capital GmbH's Trademark Guidelines or the guidelines of the respective third-party owners, and any usage must be approved in writing. Third-party trademarks used herein are the property of their respective owners and used only in a descriptive manner, e.g. for an implementation of an API or similar.

 ### Company Information

-Task Venture Capital GmbH  
-Registered at District court Bremen HRB 35230 HB, Germany
+Task Venture Capital GmbH
+Registered at District Court Bremen HRB 35230 HB, Germany

-For any legal inquiries or if you require further information, please contact us via email at hello@task.vc.
+For any legal inquiries or further information, please contact us via email at hello@task.vc.

 By using this repository, you acknowledge that you have read this section, agree to comply with its terms, and understand that the licensing of the code does not imply endorsement by Task Venture Capital GmbH of any derivative works.
--- a/test/plugins.ts
+++ b/test/plugins.ts
@@ -1,9 +1,7 @@
 import * as tsclass from '@tsclass/tsclass';
-import * as smartfile from '@push.rocks/smartfile';
+import { SmartFs, SmartFsProviderNode } from '@push.rocks/smartfs';
 import * as path from 'path';

-export {
-  tsclass,
-  smartfile,
-  path,
-}
+export const smartfs = new SmartFs(new SmartFsProviderNode());
+
+export { tsclass, path };
--- a/test/test.ts
+++ b/test/test.ts
@@ -1,120 +1,106 @@
-import * as plugins from './plugins.js';
-import * as paths from './paths.js';
-import * as interfaces from '../ts/interfaces/index.js';
-import { expect, tap } from '@push.rocks/tapbundle';
-import * as deesDocumentServer from '../ts/index.js';
+import * as plugins from "./plugins.js";
+import * as paths from "./paths.js";
+import * as interfaces from "../ts_shared/interfaces/index.js";
+import { expect, tap } from "@git.zone/tstest/tapbundle";
+import * as deesDocumentServer from "../ts/index.js";

 let testPdfServiceInstance: deesDocumentServer.PdfService;
-const testLetterData: plugins.tsclass.business.ILetter = {
-  accentColor: null,
-  type: 'invoice',
+const testLetterData: plugins.tsclass.finance.TInvoice = {
+  type: "invoice",
+  invoiceType: "debitnote",
  date: null,
-  needsCoverSheet: true,
  objectActions: [],
  pdf: null,
-  content: {
-    invoiceData: {
-      id: 'XX-CLIENT-48765',
-      reverseCharge: true,
-      dueInDays: 30,
-      currency: 'EUR',
-      notes: [],
-      type: 'debitnote',
-      billedBy: {
-        address: null,
-        description: null,
-        name: 'Some Service GmbH',
-        type: null,
-        customerNumber: null,
-        email: null,
-        facebookUrl: null,
-        fax: null,
-        legalEntity: null,
-        sepaConnection: {
-          bic: 'BPOTBEB1',
-          iban: 'BE72000000001616',
-        },
-      },
-      billedTo: null,
-      status: null,
-      deliveryDate: new Date().getTime(),
-      periodOfPerformance: null,
-      printResult: null,
-      items: [
-        {
-          name: 'Website Creation',
-          unitQuantity: 1,
-          unitNetPrice: 1200,
-          unitType: 'item',
-          vatPercentage: 0,
-          position: 1,
-        },
-      ],
+  id: "XX-CLIENT-48765",
+  invoiceId: "XX-CLIENT-48765",
+  reverseCharge: true,
+  dueInDays: 30,
+  currency: "EUR",
+  notes: [],
+  status: null,
+  deliveryDate: new Date().getTime(),
+  periodOfPerformance: null,
+  printResult: null,
+  items: [
+    {
+      name: "Website Creation",
+      unitQuantity: 1,
+      unitNetPrice: 1200,
+      unitType: "item",
+      vatPercentage: 0,
+      position: 1,
    },
-    contractData: {
-      contractDate: Date.now(),
-      id: 'LL-CONTRACT-48765',
-    },
-    textData: [],
-    timesheetData: '',
-  },
+  ],
  from: {
-    name: 'PdfService Test Company',
-    type: 'company',
-    description: 'doing pdf stuff',
+    name: "PdfService Test Company",
+    type: "company",
+    status: "active",
+    foundedDate: { day: 1, month: 1, year: 2025 },
+    description: "doing pdf stuff",
    address: {
-      streetName: 'Awesome Street',
-      houseNumber: '5',
-      city: 'Bremen',
-      country: 'Germany',
-      postalCode: '28359',
+      streetName: "Awesome Street",
+      houseNumber: "5",
+      city: "Bremen",
+      country: "Germany",
+      postalCode: "28359",
    },
    sepaConnection: {
-      bic: 'BPOTBEB1',
-      iban: 'BE72000000001616',
+      bic: "BPOTBEB1",
+      iban: "BE72000000001616",
+    },
+    registrationDetails: {
+      vatId: "",
+      registrationName: "",
+      registrationId: "",
    },
  },
  to: {
-    name: 'Awesome To Company',
-    type: 'company',
-    description: 'a company that does stuff',
+    name: "Awesome To Company",
+    type: "company",
+    status: "active",
+    foundedDate: { day: 1, month: 1, year: 2025 },
+    description: "a company that does stuff",
    address: {
-      streetName: 'Awesome Street',
-      houseNumber: '5',
-      city: 'Bremen',
-      country: 'Germany',
-      postalCode: '28359',
+      streetName: "Awesome Street",
+      houseNumber: "5",
+      city: "Bremen",
+      country: "Germany",
+      postalCode: "28359",
+    },
+    registrationDetails: {
+      vatId: "",
+      registrationName: "",
+      registrationId: "",
    },
  },
  incidenceId: null,
  language: null,
  legalContact: null,
-  logoUrl: null,
  pdfAttachments: null,
-  subject: 'Invoice XX-CLIENT-48765',
+  subject: "Invoice XX-CLIENT-48765",
  versionInfo: {
-    type: 'final',
-    version: '1.0.0',
+    type: "final",
+    version: "1.0.0",
  },
 };

-tap.test('should create a document from an invoice', async () => {
+tap.test("should create a document from an invoice", async () => {
  testPdfServiceInstance = new deesDocumentServer.PdfService({});
  await testPdfServiceInstance.start();
  expect(testPdfServiceInstance).toBeInstanceOf(deesDocumentServer.PdfService);
 });

-tap.test('should create an invoice', async () => {
+tap.test("should create an invoice", async () => {
  let counter = 0;
  const saveResult = async (optionsArg: {
-    letterData: plugins.tsclass.business.ILetter;
+    letterData: plugins.tsclass.finance.TInvoice;
    documentSettings: interfaces.IDocumentSettings;
  }) => {
-    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(optionsArg);
-    await plugins.smartfile.memory.toFs(
-      Buffer.from(pdfResult.buffer),
-      plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`)
+    const pdfResult = await testPdfServiceInstance.createPdfFromLetterObject(
+      optionsArg
    );
+    await plugins.smartfs.file(plugins.path.join(paths.nogitDir, `test-${counter++}.pdf`))
+      .write(Buffer.from(pdfResult.buffer));
  };
  await saveResult({
    letterData: testLetterData,
@@ -124,106 +110,106 @@ tap.test('should create an invoice', async () => {
    letterData: {
      ...testLetterData,
      versionInfo: {
-        type: 'draft',
-        version: '1.0.0',
+        type: "draft",
+        version: "1.0.0",
      },
    },
    documentSettings: {},
  });
-  (testLetterData.content.invoiceData.items = [
+  (testLetterData.items = [
    {
-      name: 'Website Creation',
+      name: "Website Creation",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 0,
      position: 1,
    },
    {
-      name: 'Hosting',
+      name: "Hosting",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 19,
      position: 2,
    },
    {
-      name: 'Overnight Shipping',
+      name: "Overnight Shipping",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 24,
      position: 3,
    },
    {
-      name: 'Website Creation',
+      name: "Website Creation",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 0,
      position: 4,
    },
    {
-      name: 'Hosting',
+      name: "Hosting",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 19,
      position: 5,
    },
    {
-      name: 'Overnight Shipping',
+      name: "Overnight Shipping",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 24,
      position: 6,
    },
    {
-      name: 'Website Creation',
+      name: "Website Creation",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 0,
      position: 7,
    },
    {
-      name: 'Hosting',
+      name: "Hosting",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 19,
      position: 8,
    },
    {
-      name: 'Overnight Shipping',
+      name: "Overnight Shipping",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 24,
      position: 9,
    },
    {
-      name: 'Website Creation',
+      name: "Website Creation",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 0,
      position: 10,
    },
    {
-      name: 'Hosting',
+      name: "Hosting",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 19,
      position: 11,
    },
    {
-      name: 'Overnight Shipping',
+      name: "Overnight Shipping",
      unitQuantity: 1,
      unitNetPrice: 1200,
-      unitType: 'item',
+      unitType: "item",
      vatPercentage: 24,
      position: 12,
    },
@@ -234,8 +220,8 @@ tap.test('should create an invoice', async () => {
    });
 });

-tap.test('should stop the service', async () => {
+tap.test("should stop the service", async () => {
  await testPdfServiceInstance.stop();
 });

-tap.start();
+export default tap.start();
--- a/ts/00_commitinfo_data.ts
+++ b/ts/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-document',
-  version: '1.1.0',
-  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
+  version: '2.0.2',
+  description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }
--- a/ts/classes.pdfservice.ts
+++ b/ts/classes.pdfservice.ts
@@ -1,18 +1,16 @@
-import * as plugins from './plugins.js';
-import * as paths from './paths.js';
-import * as helpers from './helpers.js';
-import * as interfaces from '../ts/interfaces/index.js';
+import * as plugins from "./plugins.js";
+import * as helpers from "./helpers.js";

-export interface IPdfServiceConstructorOptions {
-
-}
+export interface IPdfServiceConstructorOptions {}

 /**
 * a pdf service for generating pdfs
 */
 export class PdfService {
  // STATIC
-  public static async createAndStart(optionsArg: IPdfServiceConstructorOptions) {
+  public static async createAndStart(
+    optionsArg: IPdfServiceConstructorOptions
+  ) {
    const pdfService = new PdfService(optionsArg);
    await pdfService.start();
    return pdfService;
@@ -46,17 +44,23 @@ export class PdfService {
   * creates an letter
   */
  public async createPdfFromLetterObject(optionsArg: {
-    letterData: plugins.tsclass.business.ILetter,
-    documentSettings: interfaces.IDocumentSettings
-  }) {
+    letterData: plugins.tsclass.business.TLetter;
+    documentSettings: plugins.shared.interfaces.IDocumentSettings;
+  }): Promise<plugins.smartpdf.IPdf> {
    const html = `
      <script type="module">
        ${await helpers.getBundleAsString()}
      </script>
-      <dedocument-dedocument printMode documentSettings="${plugins.smartjson.stringifyBase64(optionsArg.documentSettings)}" letterData="${plugins.smartjson.stringifyBase64(optionsArg.letterData)}"></dedocument-dedocument>
+      <dedocument-dedocument printMode documentSettings="${plugins.smartjson.stringifyBase64(
+        optionsArg.documentSettings
+      )}" letterData="${plugins.smartjson.stringifyBase64(
+      optionsArg.letterData
+    )}"></dedocument-dedocument>
    `;
    // console.log(html);
-    const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(html);
+    const pdfResult = await this.smartpdfInstance.getA4PdfResultForHtmlString(
+      html
+    );
    return pdfResult;
  }
 }
--- a/ts/helpers.ts
+++ b/ts/helpers.ts
@@ -2,5 +2,5 @@ import * as plugins from './plugins.js';
 import * as paths from './paths.js';

 export const getBundleAsString = async () => {
-  return plugins.smartfile.fs.toStringSync(paths.bundleFile);
-}
+  return plugins.smartfs.file(paths.bundleFile).encoding('utf8').read();
+};
--- a/ts/interfaces/document.ts
+++ b/ts/interfaces/document.ts
@@ -1,5 +0,0 @@
-export interface IDocumentSettings {
-  enableTopDraftText?: boolean;
-  enableDefaultHeader?: boolean;
-  enableDefaultFooter?: boolean;
-}
--- a/ts/interfaces/index.ts
+++ b/ts/interfaces/index.ts
@@ -1,2 +0,0 @@
-export * from './document.js';
-export * from './translation.js';
--- a/ts/interfaces/translation.ts
+++ b/ts/interfaces/translation.ts
@@ -1,4 +0,0 @@
-export interface IDeDocumentTranslations {
-  "invoice": string;
-  "quantity": string;
-}
--- a/ts/paths.ts
+++ b/ts/paths.ts
@@ -1,9 +1,14 @@
 import * as plugins from './plugins.js';

-export const packageDir = plugins.path.join(plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url), '../');
+export const packageDir = plugins.path.join(
+  plugins.smartpath.get.dirnameFromImportMetaUrl(import.meta.url),
+  '../',
+);

 export const nogitDir = plugins.path.join(packageDir, '.nogit/');
-plugins.smartfile.fs.ensureDirSync(nogitDir);
+if (!(await plugins.smartfs.directory(nogitDir).exists())) {
+  await plugins.smartfs.directory(nogitDir).create();
+}

 export const bundleDir = plugins.path.join(packageDir, './dist_bundle');
 export const bundleFile = plugins.path.join(bundleDir, './bundle.js');
--- a/ts/plugins.ts
+++ b/ts/plugins.ts
@@ -1,26 +1,25 @@
 // node native
 import * as path from 'path';

-export {
-  path
-}
+export { path };
+
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+
+export { shared };

 // @push.rocks/scope
 import * as smartfile from '@push.rocks/smartfile';
+import { SmartFs, SmartFsProviderNode } from '@push.rocks/smartfs';
 import * as smartjson from '@push.rocks/smartjson';
 import * as smartpath from '@push.rocks/smartpath';
 import * as smartpdf from '@push.rocks/smartpdf';

-export {
-  smartfile,
-  smartpath,
-  smartjson,
-  smartpdf,
-}
+export const smartfs = new SmartFs(new SmartFsProviderNode());
+
+export { smartfile, smartpath, smartjson, smartpdf };

 // @tsclass scope
 import * as tsclass from '@tsclass/tsclass';

-export {
-  tsclass,
-}
+export { tsclass };
--- a/ts/tspublish.json
+++ b/ts/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
--- a/ts_shared/demoletter.ts
+++ b/ts_shared/demoletter.ts
@@ -0,0 +1,248 @@
+import * as plugins from "./plugins.js";
+import * as interfaces from "./interfaces/index.js";
+
+const fromContact: plugins.tsclass.business.TContact = {
+  name: "Awesome From Company",
+  type: "company",
+  status: "active",
+  foundedDate: { day: 1, month: 1, year: 2025 },
+  description: "a company that does stuff",
+  address: {
+    streetName: "Awesome Street",
+    houseNumber: "5",
+    city: "Bremen",
+    country: "Germany",
+    postalCode: "28359",
+  },
+  sepaConnection: {
+    bic: "BPOTBEB1",
+    iban: "BE01234567891616",
+  },
+  email: "hello@awesome.company",
+  phone: "+49 421 1234567",
+  fax: "+49 421 1234568",
+  registrationDetails: {
+    registrationId: "HRB 35230 HB",
+    registrationName: "Amtsgericht Bremen",
+    vatId: "DE12345678",
+  },
+};
+
+const toContact: plugins.tsclass.business.TContact = {
+  name: "Awesome To GmbH",
+  type: "company",
+  status: "active",
+  foundedDate: { day: 1, month: 1, year: 2025 },
+  customerNumber: "LL-CLIENT-123",
+  description: "a company that does stuff",
+  address: {
+    streetName: "Awesome Street",
+    houseNumber: "5",
+    city: "Bremen",
+    country: "Germany",
+    postalCode: "28359",
+  },
+  registrationDetails: {
+    registrationId: "HRB 35230 HB",
+    registrationName: "Amtsgericht Bremen",
+    vatId: "DE12345678",
+  },
+};
+
+export const demoLetter: plugins.tsclass.finance.TInvoice = {
+  type: "accounting-doc",
+  accountingDocType: "invoice",
+  accountingDocId: "LL-INV-48765",
+  accountingDocStatus: "draft",
+  id: "LL-INV-48765",
+  versionInfo: {
+    version: "1.0.0",
+    type: "draft",
+  },
+  language: "de",
+  date: Date.now(),
+  incidenceId: "LL-INV-48765",
+  subject: "LL-INV-48765",
+  reverseCharge: true,
+  dueInDays: 30,
+  from: fromContact,
+  to: toContact,
+  status: null,
+  deliveryDate: new Date().getTime(),
+  periodOfPerformance: {
+    from: +new Date().setDate(new Date().getDate() - 7),
+    to: +new Date(),
+  },
+  printResult: null,
+  currency: "EUR",
+  notes: [],
+  items: [
+    {
+      name: "Item with 19% VAT",
+      unitQuantity: 2,
+      unitNetPrice: 100,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 0,
+    },
+    {
+      name: "Item with 7% VAT",
+      unitQuantity: 4,
+      unitNetPrice: 100,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 1,
+    },
+    {
+      name: "Item with 7% VAT",
+      unitQuantity: 3,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 2,
+    },
+    {
+      name: "Item with 21% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 21,
+      position: 3,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 6,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 4,
+    },
+    {
+      name: "Item with 19% VAT",
+      unitQuantity: 8,
+      unitNetPrice: 100,
+      unitType: "hours",
+      vatPercentage: 19,
+      position: 5,
+    },
+    {
+      name: "Item with 7% VAT",
+      unitQuantity: 9,
+      unitNetPrice: 100,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 6,
+    },
+    {
+      name: "Item with 7% VAT",
+      unitQuantity: 4,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 7,
+      position: 8,
+    },
+    {
+      name: "Item with 21% VAT",
+      unitQuantity: 3,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 21,
+      position: 9,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 10,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 11,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 12,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 13,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 14,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 15,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 16,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 17,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 18,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 19,
+    },
+    {
+      name: "Item with 0% VAT",
+      unitQuantity: 1,
+      unitNetPrice: 230,
+      unitType: "hours",
+      vatPercentage: 0,
+      position: 20,
+    },
+  ],
+};
+
+export const demoDocumentSettings: interfaces.IDocumentSettings = {
+  enableTopDraftText: true,
+  enableDefaultHeader: true,
+  enableDefaultFooter: true,
+  languageCode: "DE",
+};
--- a/ts_shared/index.ts
+++ b/ts_shared/index.ts
@@ -0,0 +1,15 @@
+const DPI = 96 / 2.54; // <PX> / <INCH>
+export const A4_HEIGHT = cmToPx(29.7); // DPI * 29.7cm
+export const A4_WIDTH = cmToPx(21); // DPI * 21cm
+
+export function cmToPx(value: number): number {
+  return DPI * value;
+}
+
+import * as interfaces from "./interfaces/index.js";
+export { interfaces };
+
+import * as translation from "./translation.js";
+export { translation };
+
+export * from "./demoletter.js";
--- a/ts_shared/interfaces/document.ts
+++ b/ts_shared/interfaces/document.ts
@@ -0,0 +1,23 @@
+import * as translation from "../translation.js";
+
+export interface IDocumentTheme {
+  colorPrimaryForeground?: string;
+  colorPrimaryBackground?: string;
+  colorAccentForeground?: string;
+  colorAccentBackground?: string;
+  fontFamily?: string;
+  pageBackground?: string;
+  coverPageBackground?: string;
+}
+
+export interface IDocumentSettings {
+  enableTopDraftText?: boolean;
+  enableDefaultHeader?: boolean;
+  enableDefaultFooter?: boolean;
+  enableFoldMarks?: boolean;
+  enableInvoiceContractRefSection?: boolean;
+  languageCode?: translation.LanguageCode;
+  dateStyle?: Intl.DateTimeFormatOptions["dateStyle"];
+  vatGroupPositions?: boolean;
+  theme?: IDocumentTheme;
+}
--- a/ts_shared/interfaces/index.ts
+++ b/ts_shared/interfaces/index.ts
@@ -0,0 +1 @@
+export * from './document.js';
--- a/ts_shared/plugins.ts
+++ b/ts_shared/plugins.ts
@@ -0,0 +1,4 @@
+// tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };
--- a/ts_shared/translation.ts
+++ b/ts_shared/translation.ts
@@ -0,0 +1,200 @@
+// Define English translations without enforcing TTranslationImplementation yet
+export const EN_translations = {
+  address: "Address",
+  "bank.accountHolder": "beneficiary",
+  "bank.bic": "bic",
+  "bank.iban": "iban",
+  "bank.institution": "institution",
+  "bankConnection@@title": "Bank Connection",
+  "contact@@title": "Contact Info",
+  "customer.number": "Your Customer ID",
+  description: "Description",
+  "empty.logo": "no logo provided",
+  "empty.number.customer": "not registered",
+  empty: "not provided",
+  fax: "Fax",
+  introStatement: "We hereby invoice the following products and services",
+  "invoice.number": "Invoice number",
+  invoice: "Invoice",
+  "item.position": "Pos.",
+  mail: "Mail",
+  "overlay@@draft": "Draft",
+  "page.continueNext": "Continues on page",
+  "page.final": "This is the final page of this document.",
+  page: "Page",
+  pageOf: "of",
+  "payment.qr": "Pay via QR code",
+  "payment.qr.description": "Scan the QR code with you banking app",
+  "payment.terms": "Payment Terms",
+  "payment.terms.direct": "Without deduction until",
+  "periodOfPerformance.day": "Delivery Date",
+  "periodOfPerformance.range": "Delivery Period",
+  phone: "Phone",
+  "price.total.net": "Total Net Price",
+  "price.unit.net": "Unit Net Price",
+  price: "Price",
+  quantity: "Quantity",
+  referencedContract: "Referenced contract",
+  "referencedContract.text":
+    "This invoice is adhering to agreements made by contract between the parties on",
+  "registration.label": "Registration Info",
+  subject: "Subject",
+  sum: "Sum",
+  totalGross: "Total gross",
+  "unit.type": "Unit Type",
+  "vat.position": "on item positions",
+  "vat.reverseCharge.note":
+    "VAT arises on a reverse charge basis and is payable by the customer.",
+  "vat.short": "VAT",
+  "vat.yourId": "Your vat id on file",
+  vat: "Valued Added Tax",
+};
+
+// Infer keys of EN_translations
+
+/**
+ * For example:
+ *   - price
+ */
+type RawTranslationKeys = keyof typeof EN_translations;
+
+/**
+ * For example:
+ *   - price.item
+ *   - price.sum
+ *   - price.unit
+ *   - vat.yourId
+ */
+type NestedTranslationKeys =
+  | RawTranslationKeys
+  | `${RawTranslationKeys}.${string}`
+  | `${RawTranslationKeys}.${string}.${string}`
+  | `${RawTranslationKeys}.${string}.${string}.${string}`
+  | `${RawTranslationKeys}.${string}.${string}.${string}.${string}`;
+
+/**
+ * For example:
+ *   - contact@@mail
+ *   - vat = 'VAT'
+ *   - vat.yourId = 'your vat id'
+ *   - footer@@vat.yourId = 'your vat id'
+ *   - header@@vat.yourId = 'THIS IS YOUR VAT'
+ */
+type LocationBasedTranslationKeys = `${string}@@${NestedTranslationKeys}`;
+
+/**
+ * Mix of everything
+ */
+export type TranslationKey =
+  | NestedTranslationKeys
+  | LocationBasedTranslationKeys;
+
+// Define the type for all translations based on EN_translations keys
+export type Dictionary = {
+  [key in TranslationKey]: string;
+};
+
+// Define German translations
+export const DE_translations: Dictionary = {
+  address: "Adresse",
+  "bank.accountHolder": "Kontoinhaber",
+  "bank.bic": "BIC",
+  "bank.iban": "IBAN",
+  "bank.institution": "Bankinstitut",
+  "bankConnection@@title": "Bankverbindung",
+  "contact@@title": "Kontaktinformationen",
+  "customer.number": "Ihre Kundennummer",
+  description: "Beschreibung",
+  "empty.logo": "Kein Logo gesetzt",
+  "empty.number.customer": "nicht registriert",
+  empty: "nicht angegeben",
+  fax: "Fax",
+  introStatement:
+    "Wir stellen Ihnen hiermit folgende Produkte und Dienstleistungen in Rechnung",
+  "invoice.number": "Rechnungsnr.",
+  invoice: "Rechnung",
+  "item.position": "Pos.",
+  mail: "E-Mail",
+  "overlay@@draft": "Entwurf",
+  "page.continueNext": "Fortsetzung auf Seite",
+  "page.final": "Dies ist die letzte Seite dieses Dokuments.",
+  page: "Seite",
+  pageOf: "von",
+  "payment.qr": "Überweisen per QR-Code",
+  "payment.qr.description":
+    "Den QR-Code einfach mit der Banking-App einscannen",
+  "payment.terms": "Zahlungsbedingungen",
+  "payment.terms.direct": "Ohne Abzug bis zum",
+  "periodOfPerformance.day": "Lieferdatum",
+  "periodOfPerformance.range": "Lieferzeitraum",
+  phone: "Telefon",
+  "price.total.net": "Gesamtpreis",
+  "price.unit.net": "Stückpreis",
+  price: "Preis",
+  quantity: "Menge",
+  referencedContract: "Referenzierter Vertrag",
+  "referencedContract.text":
+    "Diese Rechnung bezieht sich auf die getroffenen Vertragsvereinbarungen vom",
+  "registration.label": "Registrierungsinfo",
+  subject: "Betreff",
+  sum: "Summe",
+  totalGross: "Gesamtbetrag brutto",
+  "unit.type": "Einheit",
+  "vat.position": "auf Positionen",
+  "vat.reverseCharge.note":
+    "Die Umsatzsteuer entsteht im Reverse-Charge-Verfahren und ist vom Kunden zu zahlen.",
+  "vat.short": "MwSt.",
+  "vat.yourId": "Ihre hinterlegte USt-Id",
+  vat: "Umsatzsteuer",
+};
+
+// Language Code Map
+export const languageCodeMap: Record<string, Dictionary> = {
+  EN: EN_translations,
+  DE: DE_translations,
+};
+
+// Language Code Type
+export type LanguageCode = keyof typeof languageCodeMap;
+
+function* getTranslationKeyHierarchy(
+  key: TranslationKey
+): Generator<TranslationKey, TranslationKey> {
+  yield key;
+
+  const areaSplit = key.split("@@") as [TranslationKey, TranslationKey];
+  let rest = areaSplit[1];
+
+  if (rest) {
+    yield rest;
+  } else {
+    rest = areaSplit[0];
+  }
+
+  if (!rest.includes(".")) return;
+
+  const parts = rest.split(".");
+  for (let i = parts.length - 1; i > 0; i--) {
+    yield parts.slice(0, i).join(".") as TranslationKey;
+  }
+}
+
+// Translate Function
+export const translate = (
+  languageCode: LanguageCode,
+  key: TranslationKey
+): string => {
+  const dictionary = languageCodeMap[languageCode] || EN_translations;
+  const lookupHierarchy = getTranslationKeyHierarchy(key);
+
+  let found: string;
+
+  for (let keyOption of lookupHierarchy) {
+    found = dictionary[keyOption] || EN_translations[keyOption];
+
+    if (found) {
+      break;
+    }
+  }
+  return found;
+};
--- a/ts_shared/tspublish.json
+++ b/ts_shared/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 1
+}
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@design.estate/dees-document',
-  version: '1.1.0',
-  description: 'A versatile tool for dynamically generating and rendering business documents, such as invoices, using modern web technologies and elements.'
+  version: '2.0.2',
+  description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }
--- a/ts_web/elements/contentinvoice.ts
+++ b/ts_web/elements/contentinvoice.ts
@@ -9,23 +9,21 @@ import {
  customElement,
  type TemplateResult,
  css,
-  cssManager,
-  unsafeCSS,
  render,
  domtools,
-} from '@design.estate/dees-element';
-import * as plugins from '../plugins.js';
-import * as shared from './shared/index.js';
-
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";

+import { dedocumentSharedStyle } from "../style.js";
+import type { TranslationKey } from "ts_shared/translation.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-contentinvoice': DeContentInvoice;
+    "dedocument-contentinvoice": DeContentInvoice;
  }
 }

-@customElement('dedocument-contentinvoice')
+@customElement("dedocument-contentinvoice")
 export class DeContentInvoice extends DeesElement {
  public static demo = () => html`
    <style>
@@ -43,7 +41,13 @@ export class DeContentInvoice extends DeesElement {
    type: Object,
    reflect: true,
  })
-  public letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.finance.TInvoice;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  constructor() {
    super();
@@ -52,16 +56,98 @@ export class DeContentInvoice extends DeesElement {

  public static styles = [
    domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
    css`
-      :host {
-        color: #333;
-      }
-
      .trimmedContent {
        display: none;
      }

-      .repeatedContent {
+      .grid {
+        display: grid;
+        grid-template-columns: 40px auto 50px 50px 100px 50px 100px;
+      }
+
+      .topLine {
+        margin-top: 5px;
+        background: #e7e7e7;
+        font-weight: bold;
+      }
+
+      .lineItem {
+        font-size: 12px;
+        padding: 5px;
+        border-right: 1px dashed #ccc;
+        white-space: nowrap;
+      }
+
+      .lineItem:last-child {
+        border-right: none;
+      }
+
+      .value.rightAlign,
+      .lineItem.rightAlign {
+        text-align: right;
+      }
+
+      .invoiceLine {
+        background: #ffffff00;
+        border-bottom: 1px dotted #ccc;
+      }
+
+      .invoiceLine.highlighted {
+        transition: background 0.2s;
+        background: #ffc18f;
+        border: 1px solid #ff9d4d;
+        box-sizing: content-box;
+      }
+
+      .sums {
+        margin-top: 5px;
+        font-size: 12px;
+        padding-left: 50%;
+      }
+
+      .sums .sumline {
+        margin-top: 3px;
+        display: grid;
+        grid-template-columns: auto 100px;
+      }
+
+      .sums .sumline .label {
+        padding: 2px 5px;
+        border-right: 1px solid #ccc;
+        text-align: right;
+        font-weight: bold;
+      }
+
+      .sums .sumline .value {
+        padding: 2px 5px;
+      }
+
+      .sums .sumline .value--total {
+        font-weight: bold;
+      }
+
+      .divider {
+        margin-top: 8px;
+        border-top: 1px dotted #ccc;
+      }
+
+      .taxNote {
+        font-size: 12px;
+        padding: 4px;
+        background: #eeeeeb;
+        text-align: center;
+      }
+
+      .infoBox {
+        margin-top: 22px;
+        line-height: 1.4em;
+      }
+
+      .infoBox .label {
+        padding-bottom: 2px;
+        font-weight: bold;
      }
    `,
  ];
@@ -74,6 +160,17 @@ export class DeContentInvoice extends DeesElement {
    `;
  }

+  protected formatPrice(
+    value: number,
+    currency = "EUR",
+    lang = "de-DE"
+  ): string {
+    return new Intl.NumberFormat(lang, {
+      style: "currency",
+      currency,
+    }).format(value);
+  }
+
  public getTotalNet = (): number => {
    let totalNet = 0;

@@ -81,7 +178,7 @@ export class DeContentInvoice extends DeesElement {
      return totalNet;
    }

-    for (const item of this.letterData.content.invoiceData.items) {
+    for (const item of this.letterData.items) {
      totalNet += item.unitNetPrice * item.unitQuantity;
    }
    return totalNet;
@@ -103,7 +200,7 @@ export class DeContentInvoice extends DeesElement {
  public getVatGroups = () => {
    const vatGroups: {
      vatPercentage: number;
-      items: plugins.tsclass.finance.IInvoice['items'];
+      items: plugins.tsclass.finance.TInvoice["items"];
      vatAmountSum: number;
    }[] = [];

@@ -112,17 +209,22 @@ export class DeContentInvoice extends DeesElement {
    }

    const taxAmounts: number[] = [];
-    for (const item of this.letterData.content.invoiceData.items) {
-      taxAmounts.includes(item.vatPercentage) ? null : taxAmounts.push(item.vatPercentage);
+    for (const item of this.letterData.items) {
+      taxAmounts.includes(item.vatPercentage)
+        ? null
+        : taxAmounts.push(item.vatPercentage);
    }

    for (const taxAmount of taxAmounts) {
-      const matchingItems = this.letterData.content.invoiceData.items.filter(
+      const matchingItems = this.letterData.items.filter(
        (itemArg) => itemArg.vatPercentage === taxAmount
      );
      let sum = 0;
      for (const matchingItem of matchingItems) {
-        sum += matchingItem.unitNetPrice * matchingItem.unitQuantity * (taxAmount / 100);
+        sum +=
+          matchingItem.unitNetPrice *
+          matchingItem.unitQuantity *
+          (taxAmount / 100);
      }
      vatGroups.push({
        items: matchingItems,
@@ -130,15 +232,21 @@ export class DeContentInvoice extends DeesElement {
        vatAmountSum: Math.round(sum * 100) / 100,
      });
    }
-    return vatGroups;
+    return vatGroups.sort((a, b) => b.vatPercentage - a.vatPercentage);
  };

  public async getContentNodes() {
    await this.elementDomReady;
    return {
-      currentContent: this.shadowRoot.querySelector('.currentContent') as HTMLElement,
-      trimmedContent: this.shadowRoot.querySelector('.trimmedContent') as HTMLElement,
-      repeatedContent: this.shadowRoot.querySelector('.repeatedContent') as HTMLElement,
+      currentContent: this.shadowRoot.querySelector(
+        ".currentContent"
+      ) as HTMLElement,
+      trimmedContent: this.shadowRoot.querySelector(
+        ".trimmedContent"
+      ) as HTMLElement,
+      repeatedContent: this.shadowRoot.querySelector(
+        ".repeatedContent"
+      ) as HTMLElement,
    };
  }

@@ -150,7 +258,7 @@ export class DeContentInvoice extends DeesElement {
  public async trimEndByOne() {
    await this.elementDomReady;
    this.shadowRoot
-      .querySelector('.trimmedContent')
+      .querySelector(".trimmedContent")
      .append(
        (await this.getContentNodes()).currentContent.children.item(
          (await this.getContentNodes()).currentContent.children.length - 1
@@ -160,7 +268,8 @@ export class DeContentInvoice extends DeesElement {

  public async trimStartToOffset(contentOffsetArg: number) {
    await this.elementDomReady;
-    const beginningLength = (await this.getContentNodes()).currentContent.children.length;
+    const beginningLength = (await this.getContentNodes()).currentContent
+      .children.length;
    while (
      (await this.getContentNodes()).currentContent.children.length !==
      beginningLength - contentOffsetArg
@@ -168,18 +277,17 @@ export class DeContentInvoice extends DeesElement {
      (await this.getContentNodes()).trimmedContent.append(
        (await this.getContentNodes()).currentContent.children.item(0)
      );
-      console.log('hey' + this.shadowRoot.children.length);
    }
    if (
      (await this.getContentNodes()).currentContent.children
        .item(0)
-        .classList.contains('needsDataHeader')
+        .classList.contains("needsDataHeader")
    ) {
      const trimmedContent = (await this.getContentNodes()).trimmedContent;
      let startPoint = trimmedContent.children.length;
      while (startPoint > 0) {
        const element = trimmedContent.children.item(startPoint - 1);
-        if (element.classList.contains('dataHeader')) {
+        if (element.classList.contains("dataHeader")) {
          (await this.getContentNodes()).repeatedContent.append(element);
          break;
        }
@@ -188,197 +296,194 @@ export class DeContentInvoice extends DeesElement {
    }
  }

-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  public translateKey(key: TranslationKey): string {
+    return plugins.shared.translation.translate(
+      this.documentSettings.languageCode,
+      key
+    );
+  }
+
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ) {
    super.firstUpdated(_changedProperties);
    this.attachInvoiceDom();
  }

+  private renderPaymentTerms(): TemplateResult {
+    return html`<div class="infoBox">
+      <div>
+        <div>
+          <div class="label">
+            ${this.translateKey("invoice@@payment.terms")}
+          </div>
+          <span>
+            ${this.translateKey("invoice@@payment.terms.direct")}
+            ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+              dateStyle: this.documentSettings.dateStyle,
+            }).format(
+              new Date(this.letterData.date).setDate(
+                new Date(this.letterData.date).getDate() +
+                  this.letterData?.dueInDays
+              )
+            )}
+          </span>
+        </div>
+      </div>
+    </div>`;
+  }
+
+  private renderPaymentInfo(): TemplateResult {
+    const bic = this.letterData?.from.sepaConnection.bic;
+    const name = this.letterData?.from.name;
+    const iban = this.letterData?.from.sepaConnection.iban;
+    const currency = this.letterData?.currency;
+    const totalGross = this.getTotalGross();
+    const reference = this.letterData?.id;
+
+    return html`<div class="infoBox">
+      <div>
+        <div>
+          <div class="label">${this.translateKey("invoice@@payment.qr")}</div>
+          <span> ${this.translateKey("invoice@@payment.qr.description")} </span>
+        </div>
+        <dedocument-paymentcode
+          bic="${bic}"
+          name="${name}"
+          iban="${iban}"
+          currency="${currency}"
+          totalGross="${totalGross}"
+          reference="${reference}"
+        />
+      </div>
+    </div>`;
+  }
+
+  private renderReferencedContract(): TemplateResult {
+    return null;
+    // return this.documentSettings.enableInvoiceContractRefSection &&
+    //   this.invoiceData?.content?.contractData?.contractDate
+    //   ? html`
+    //       <div class="infoBox">
+    //         <div class="label">
+    //           ${this.translateKey("invoice@@referencedContract")}
+    //         </div>
+    //         ${this.translateKey("invoice@@referencedContract.text")}
+    //         ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+    //           dateStyle: this.documentSettings.dateStyle,
+    //         }).format(
+    //           new Date(this.invoiceData?.content.contractData.contractDate)
+    //         )}.
+    //       </div>
+    //     `
+    //   : null;
+  }
+
  public async attachInvoiceDom() {
    const contentNodes = await this.getContentNodes();
    render(
      html`
-        <style>
-          .grid {
-            display: grid;
-            grid-template-columns: 40px auto 80px 80px 90px 90px;
-          }
-          .topLine {
-            margin-top: 5px;
-            background: #e7e7e7;
-            font-weight: bold;
-          }
-          .lineItem {
-            font-size: 12px;
-            padding: 5px;
-          }
-
-          .invoiceLine {
-            border-bottom: 1px dotted #ccc;
-          }
-
-          .sums {
-            margin-top: 5px;
-            font-size: 12px;
-            padding-left: 50%;
-          }
-
-          .sums .sumline {
-            margin-top: 3px;
-            display: grid;
-            grid-template-columns: auto 90px;
-          }
-
-          .sums .sumline .label {
-            padding: 2px 5px;
-            border-right: 1px solid #ccc;
-            text-align: right;
-            font-weight: bold;
-          }
-
-          .sums .sumline .value {
-            padding: 2px 5px;
-            font-weight: bold;
-          }
-
-          .divider {
-            margin-top: 8px;
-            border-top: 1px dotted #ccc;
-          }
-
-          .taxNote {
-            font-size: 12px;
-            padding: 4px;
-            background: #eeeeeb;
-            text-align: center;
-          }
-
-          .infoBox {
-            border-radius: 7px;
-            border: 1px solid #ddd;
-            border-left: 3px solid #c5e1a5;
-            padding: 8px;
-            margin-top: 16px;
-            line-height: 1.4em;
-            font-size: 16px;
-          }
-
-          .infoBox .label {
-            padding-bottom: 2px;
-            font-size: 12px;
-            font-weight: bold;
-          }
-
-          .paymentCode {
-            text-align: center;
-            border-left: 2px solid #666;
-          }
-        </style>
-        <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
+        <div>${this.translateKey("invoice@@introStatement")}</div>
        <div class="grid topLine dataHeader">
-          <div class="lineItem">Item Pos.</div>
-          <div class="lineItem">${shared.translation.translate('DE', 'description', 'Description')}</div>
-          <div class="lineItem">${shared.translation.translate('DE', 'quantity', 'Quantity')}</div>
-          <div class="lineItem">Unit Type</div>
-          <div class="lineItem">Unit Net Price</div>
-          <div class="lineItem">Total Net Price</div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@item.position")}
+          </div>
+          <div class="lineItem">
+            ${this.translateKey("invoice@@description")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@quantity")}
+          </div>
+          <div class="lineItem">${this.translateKey("invoice@@unit.type")}</div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.unit.net")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@vat.short")}
+          </div>
+          <div class="lineItem rightAlign">
+            ${this.translateKey("invoice@@price.total.net")}
+          </div>
        </div>
-        ${(() => {
-          let counter = 1;
-          return this.letterData?.content.invoiceData?.items?.map(
-            (invoiceItem) => html`
-              <div class="grid invoiceLine needsDataHeader">
-                <div class="lineItem">${counter++}</div>
-                <div class="lineItem">${invoiceItem.name}</div>
-                <div class="lineItem">${invoiceItem.unitQuantity}</div>
-                <div class="lineItem">${invoiceItem.unitType}</div>
-                <div class="lineItem">${invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}</div>
-                <div class="lineItem">
-                  ${invoiceItem.unitQuantity * invoiceItem.unitNetPrice} ${this.letterData?.content.invoiceData.currency}
-                </div>
+        ${this.letterData?.items?.map(
+          (invoiceItem, index) => html`
+            <div class="grid needsDataHeader">
+              <div class="lineItem rightAlign">${index + 1}</div>
+              <div class="lineItem">${invoiceItem.name}</div>
+              <div class="lineItem rightAlign">${invoiceItem.unitQuantity}</div>
+              <div class="lineItem">${invoiceItem.unitType}</div>
+              <div class="lineItem rightAlign">
+                ${this.formatPrice(invoiceItem.unitNetPrice)}
              </div>
-            `
-          );
-        })()}
+              <div class="lineItem rightAlign">
+                ${invoiceItem.vatPercentage}%
+              </div>
+              <div class="lineItem rightAlign">
+                ${this.formatPrice(
+                  invoiceItem.unitQuantity * invoiceItem.unitNetPrice
+                )}
+              </div>
+            </div>
+          `
+        )}
        <div class="sums">
          <div class="sumline">
-            <div class="label">Total net</div>
-            <div class="value">${this.getTotalNet()} EUR</div>
+            <div class="label">
+              ${this.translateKey("invoice@@sum.total.net")}
+            </div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalNet())}
+            </div>
          </div>
          ${this.getVatGroups().map((vatGroupArg) => {
-            let itemNumbers = '';
-            for (const item of vatGroupArg.items) {
-              const itemIndex = this.letterData.content.invoiceData.items.indexOf(item);
-              itemNumbers += ` ${itemIndex + 1},`;
-            }
+            let itemNumbers = vatGroupArg.items
+              .map((item) => this.letterData.items.indexOf(item) + 1)
+              .join(", ");
            return html`
              <div class="sumline">
                <div class="label">
-                  Vat ${vatGroupArg.vatPercentage}%<br />
-                  <span style="font-weight: normal">(on item positions: ${itemNumbers})</span>
+                  ${this.translateKey("vat.short")}
+                  ${vatGroupArg.vatPercentage}%
+                  ${this.documentSettings.vatGroupPositions
+                    ? html`
+                        <br /><span style="font-weight: normal"
+                          >(${this.translateKey("invoice@@vat.position")}:
+                          ${itemNumbers})</span
+                        >
+                      `
+                    : html``}
+                </div>
+                <div class="value rightAlign">
+                  ${this.formatPrice(vatGroupArg.vatAmountSum)}
                </div>
-                <div class="value">${vatGroupArg.vatAmountSum} EUR</div>
              </div>
            `;
          })}
          <div class="sumline">
-            <div class="label">Total gross</div>
-            <div class="value">${this.getTotalGross()} EUR</div>
+            <div class="label">${this.translateKey("invoice@@totalGross")}</div>
+            <div class="value value--total rightAlign">
+              ${this.formatPrice(this.getTotalGross())}
+            </div>
          </div>
        </div>
        <div class="divider"></div>
-        ${this.letterData?.content.invoiceData.reverseCharge
-          ? html`
-              <div class="taxNote">
-                VAT arises on a reverse charge basis and is payable by the customer.
-              </div>
-            `
+
+        ${this.letterData?.reverseCharge
+          ? html`<div class="taxNote">
+              ${this.translateKey("invoice@@vat.reverseCharge.note")}
+            </div>`
          : ``}
-        <div class="infoBox">
-          <div class="label">Payment Terms:</div>
-          Payment is due within 30 days starting from the reception of this invoice. Please use the
-          following SEPA details:
-          <br /><br />
-          Beneficiary: ${this.letterData?.from.name}<br />
-          IBAN: ${this.letterData?.from?.sepaConnection?.iban}<br />
-          BIC: ${this.letterData?.from?.sepaConnection?.bic}<br />
-          Description: ${this.letterData?.content.invoiceData?.id}<br />
-          Amount: ${this.getTotalGross()} ${this.letterData?.content.invoiceData.currency}
-        </div>
-        ${this.letterData?.content?.contractData?.contractDate
-          ? html`
-              <div class="infoBox">
-                <div class="label">Referenced contract:</div>
-                This invoice is adhering to agreements made by contract between the parties on
-                ${plugins.smarttime.ExtendedDate.fromMillis(this.letterData?.content.contractData.contractDate).format('MMMM D, YYYY')}.
-              </div>
-            `
-          : html``}
-        <div class="infoBox paymentCode">
-          <div class="label">Sepa Payment Code:</div>
-        </div>
+
+        <!-- REFERENCED CONTRACT -->
+        ${this.renderReferencedContract()}
+
+        <!-- PAYMENT TERMS -->
+        ${this.renderPaymentTerms()}
+
+        <!-- PAYMENT INFO -->
+        ${this.renderPaymentInfo()}
      `,
      contentNodes.currentContent
    );
-    const canvas = document.createElement('canvas');
-    plugins.qrcode.toCanvas(
-      canvas,
-      `BCD
-001
-1
-SCT
-${this.letterData.content.invoiceData.billedBy.sepaConnection.bic}
-${this.letterData.content.invoiceData.billedBy.name}
-${this.letterData.content.invoiceData.billedBy.sepaConnection.iban}
-EUR${this.getTotalGross()}
-CHAR
-${this.letterData.content.invoiceData.id}
-${this.letterData.content.invoiceData.id}
-EPC QR Code`,
-      (error) => {
-        if (error) console.error(error);
-        console.log('success!');
-      }
-    );
-    contentNodes.currentContent.querySelector('.paymentCode').append(canvas);
  }
 }
--- a/ts_web/elements/document.demo.ts
+++ b/ts_web/elements/document.demo.ts
@@ -1,6 +1,10 @@
-import * as shared from './shared/index.js';
-import { html } from '@design.estate/dees-element';
+import * as plugins from "../plugins.js";
+
+import { html } from "@design.estate/dees-element";

 export const demoFunc = () => html`
-<dedocument-dedocument .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-dedocument>
-`;
+  <dedocument-dedocument
+    .format="${"a4"}"
+    .letterData=${plugins.shared.demoLetter}
+  ></dedocument-dedocument>
+`;
--- a/ts_web/elements/document.ts
+++ b/ts_web/elements/document.ts
@@ -5,35 +5,34 @@ import {
  customElement,
  type TemplateResult,
  css,
-  state,
-  cssManager,
-  unsafeCSS,
  domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";

-import * as interfaces from '../../ts/interfaces/index.js';
-import * as plugins from '../plugins.js';
+export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+  {
+    enableTopDraftText: true,
+    enableDefaultHeader: true,
+    enableDefaultFooter: true,
+    enableFoldMarks: true,
+    enableInvoiceContractRefSection: true,
+    languageCode: "EN",
+    vatGroupPositions: true,
+    dateStyle: "short",
+  };

-export const defaultDocumentSettings: interfaces.IDocumentSettings = {
-  enableTopDraftText: true,
-  enableDefaultHeader: true,
-  enableDefaultFooter: true,
-};
+import { DePage } from "./page.js";
+import { DeContentInvoice } from "./contentinvoice.js";

-
-import { DePage } from './page.js';
-import { DeContentInvoice } from './contentinvoice.js';
-
-import * as shared from './shared/index.js';
-import { demoFunc } from './document.demo.js';
+import { demoFunc } from "./document.demo.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-dedocument': DeDocument;
+    "dedocument-dedocument": DeDocument;
  }
 }

-@customElement('dedocument-dedocument')
+@customElement("dedocument-dedocument")
 export class DeDocument extends DeesElement {
  public static demo = demoFunc;

@@ -41,51 +40,52 @@ export class DeDocument extends DeesElement {
    type: String,
    reflect: true,
  })
-  public format: 'a4' = 'a4';
+  accessor format: "a4" = "a4";

  @property({
    type: Number,
    reflect: true,
  })
-  public viewWidth: number = null;
+  accessor viewWidth: number = null;

  @property({
    type: Number,
    reflect: true,
  })
-  public viewHeight: number = null;
+  accessor viewHeight: number = null;

  @property({
    type: Boolean,
    reflect: true,
  })
-  printMode = false;
+  accessor printMode = false;

  @property({
    type: Object,
    reflect: true,
    converter: (valueArg) => {
-      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg)
+      if (typeof valueArg === "string") {
+        return plugins.smartjson.parseBase64(valueArg);
      } else {
        return valueArg;
      }
    },
  })
-  public letterData: plugins.tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;

  @property({
    type: Object,
    reflect: true,
    converter: (valueArg) => {
-      if (typeof valueArg === 'string') {
-        return plugins.smartjson.parseBase64(valueArg)
+      if (typeof valueArg === "string") {
+        return plugins.smartjson.parseBase64(valueArg);
      } else {
        return valueArg;
      }
    },
  })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;

  constructor() {
    super();
@@ -97,9 +97,6 @@ export class DeDocument extends DeesElement {
    css`
      :host {
        display: block;
-        color: #333;
-        padding: 0px;
-        position: relative;
      }

      .betweenPagesSpacer {
@@ -109,12 +106,18 @@ export class DeDocument extends DeesElement {
  ];

  public render(): TemplateResult {
-    return html`
-      <div class="documentContainer"></div>
-    `;
+    return html` <div class="documentContainer"></div> `;
  }

-  public async firstUpdated(_changedProperties: Map<string | number | symbol, unknown>) {
+  public async firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ) {
+    domtools.plugins.smartdelay.delayFor(0).then(async () => {
+      this.documentSettings = {
+        ...defaultDocumentSettings,
+        ...this.documentSettings,
+      };
+    });
    const resizeObserver = new ResizeObserver((entries) => {
      for (const entry of entries) {
        const width = entry.contentRect.width;
@@ -126,17 +129,24 @@ export class DeDocument extends DeesElement {
    resizeObserver.observe(this);
    this.registerGarbageFunction(() => {
      resizeObserver.disconnect();
-    })
+    });
  }

-  public latestRenderedLetterData: plugins.tsclass.business.ILetter = null;
-
+  public latestDocumentSettings: plugins.shared.interfaces.IDocumentSettings =
+    null;
+  public latestRenderedLetterData: plugins.tsclass.business.TLetter = null;
+  public cleanupStore: any[] = [];

  public async renderDocument() {
-    const domtools = await this.domtoolsPromise;
-    
+    this.latestDocumentSettings = this.documentSettings;
+    this.latestRenderedLetterData = this.letterData;

-    const documentBuildContainer = document.createElement('div');
+    const cleanUpStoreCurrentRender = [];
+    const cleanUpStoreNextRender = [];
+
+    const domtools = await this.domtoolsPromise;
+    const documentBuildContainer = document.createElement("div");
+    cleanUpStoreCurrentRender.push(documentBuildContainer);
    document.body.appendChild(documentBuildContainer);

    let pages: DePage[] = [];
@@ -145,7 +155,10 @@ export class DeDocument extends DeesElement {

    // lets append the content
    const content: DeContentInvoice = new DeContentInvoice();
-    content.letterData = this.letterData;
+    cleanUpStoreCurrentRender.push(content);
+    content.letterData = this
+      .letterData as unknown as plugins.tsclass.finance.TInvoice;
+    content.documentSettings = this.documentSettings;
    document.body.appendChild(content);

    await domtools.convenience.smartdelay.delayFor(0);
@@ -155,15 +168,20 @@ export class DeDocument extends DeesElement {
    while (!complete) {
      pageCounter++;
      const currentContent = content.cloneNode(true) as DeContentInvoice;
+      cleanUpStoreNextRender.push(currentContent);
      const newPage = new DePage();
      newPage.printMode = this.printMode;
      newPage.letterData = this.letterData;
+      newPage.documentSettings = this.documentSettings;
      pages.push(newPage);
      newPage.pageNumber = pageCounter;
      newPage.append(currentContent);
      newPage.pageTotalNumber = pageCounter;
+
+      // store current page
+      cleanUpStoreNextRender.push(newPage);
      documentBuildContainer.append(newPage);
-      
+
      await currentContent.elementDomReady;
      await currentContent.trimStartToOffset(overallContentOffset);
      let newPageOverflows = await newPage.checkOverflow();
@@ -178,40 +196,61 @@ export class DeDocument extends DeesElement {
      if (trimmed === 0) {
        complete = true;
      }
-      // complete = true;
-      console.log(currentContentOffset);
    }
-    document.body.removeChild(content);
-    document.body.removeChild(documentBuildContainer);

-    const documentContainer = this.shadowRoot.querySelector('.documentContainer');
+    for (const cleanUp of this.cleanupStore) {
+      cleanUp.remove();
+    }
+    this.cleanupStore = cleanUpStoreNextRender;
+
+    cleanUpStoreCurrentRender.forEach((cleanUp) => {
+      cleanUp.remove();
+    });
+
+    const documentContainer =
+      this.shadowRoot.querySelector(".documentContainer");
    if (documentContainer) {
      const children = Array.from(documentContainer.children);
-      children.forEach((child) => documentContainer.removeChild(child));
+      children.forEach((child) => {
+        documentContainer.removeChild(child);
+        child.remove();
+      });
    }
    for (const page of pages) {
      page.pageTotalNumber = pageCounter;
      documentContainer.append(page);
      // betweenPagesSpacer
      if (!this.printMode) {
-        const betweenPagesSpacerDiv = document.createElement('div');
-        betweenPagesSpacerDiv.classList.add('betweenPagesSpacer');
+        const betweenPagesSpacerDiv = document.createElement("div");
+        betweenPagesSpacerDiv.classList.add("betweenPagesSpacer");
        documentContainer.appendChild(betweenPagesSpacerDiv);
      }
    }
    this.adjustDePageScaling();
-    this.latestRenderedLetterData = this.letterData;
  }

-  async updated(changedProperties: Map<string | number | symbol, unknown>): Promise<void> {
+  async updated(
+    changedProperties: Map<string | number | symbol, unknown>
+  ): Promise<void> {
    super.updated(changedProperties);
    const domtools = await this.domtoolsPromise;
-    const renderedDocIsUpToDate = domtools.convenience.smartjson.deepEqualObjects(this.letterData, this.latestRenderedLetterData);
+    let renderedDocIsUpToDate =
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.letterData,
+        this.latestRenderedLetterData
+      ) &&
+      domtools.convenience.smartjson.deepEqualObjects(
+        this.documentSettings,
+        this.latestDocumentSettings
+      );
    if (!renderedDocIsUpToDate) {
      this.renderDocument();
    }

-    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
      this.adjustDePageScaling();
    }
  }
@@ -222,7 +261,7 @@ export class DeDocument extends DeesElement {
    }
    this.viewWidth = this.clientWidth;
    // Find all DePage instances within this DeDocument
-    const pages = this.shadowRoot.querySelectorAll('dedocument-page');
+    const pages = this.shadowRoot.querySelectorAll("dedocument-page");

    // Update each DePage instance's viewHeight and viewWidth
    pages.forEach((page: DePage) => {
@@ -231,7 +270,6 @@ export class DeDocument extends DeesElement {
      }
      if (this.viewWidth) {
        page.viewWidth = this.viewWidth;
-        console.log('setting viewWidth: ', this.viewWidth);
      }
    });
  }
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -1,11 +1,10 @@
-export * from './contentinvoice.js';
-export * from './document.js';
-export * from './letterheader.js';
-export * from './page.js';
-export * from './pagecontainer.js';
-export * from './pagecontent.js';
-export * from './pagefooter.js';
-export * from './pageheader.js';
-export * from './viewer.js';
-
-export * from './shared/index.js';
+export * from "./contentinvoice.js";
+export * from "./document.js";
+export * from "./letterheader.js";
+export * from "./page.js";
+export * from "./pagecontainer.js";
+export * from "./pagecontent.js";
+export * from "./pagefooter.js";
+export * from "./pageheader.js";
+export * from "./viewer.js";
+export * from "./paymentcode.js";
--- a/ts_web/elements/letterheader.ts
+++ b/ts_web/elements/letterheader.ts
@@ -5,43 +5,51 @@ import {
  customElement,
  type TemplateResult,
  css,
-  cssManager,
  unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+  domtools,
+} from "@design.estate/dees-element";

-import * as shared from './shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from "../plugins.js";
+import { dedocumentSharedStyle } from "../style.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-letterheader': DeLetterHeader;
+    "dedocument-letterheader": DeLetterHeader;
  }
 }

-@customElement('dedocument-letterheader')
+@customElement("dedocument-letterheader")
 export class DeLetterHeader extends DeesElement {
  public static demo = () => html`
-    <dedocument-letterheader .format="${'a4'}" .letterData=${shared.demoLetter}></dedocument-letterheader>
+    <dedocument-letterheader
+      .format="${"a4"}"
+      .letterData=${plugins.shared.demoLetter}
+    ></dedocument-letterheader>
  `;

  @property({
    type: Object,
-    reflect: true
+    reflect: true,
  })
-  public letterData: tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.finance.TInvoice;

  @property({
    type: Number,
    reflect: true,
  })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;

  @property({
    type: Number,
    reflect: true,
  })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  constructor() {
    super();
@@ -50,20 +58,31 @@ export class DeLetterHeader extends DeesElement {

  public static styles = [
    domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
    css`
-      :host {
-        color: #333;
+      .address {
+        position: absolute;
+        top: calc(var(--DPI-FACTOR) * 4.5);
+        left: var(--LEFT-MARGIN);
+      }
+
+      .date {
+        position: absolute;
+        top: calc(var(--DPI-FACTOR) * 4.5);
+        right: var(--RIGHT-MARGIN);
+        text-align: right;
      }

      .recepientInfo {
        position: absolute;
        display: block;
        overflow: hidden;
-        top: 200px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        top: calc(var(--DPI-FACTOR) * 5.5);
+        right: var(--RIGHT-MARGIN);
        width: 200px;
        text-align: right;
      }
+
      .recepientInfo .label {
        margin-top: 10px;
        margin-bottom: 3px;
@@ -71,19 +90,6 @@ export class DeLetterHeader extends DeesElement {
        font-weight: bold;
      }

-      .date {
-        position: absolute;
-        top: 180px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        text-align: right;
-      }
-
-      .address {
-        position: absolute;
-        top: 180px;
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
-      }
-
      .address .from {
        font-size: 10px;
      }
@@ -94,31 +100,93 @@ export class DeLetterHeader extends DeesElement {
    `,
  ];

+  private renderDeliveryDate(from: Date, to: Date): TemplateResult {
+    if (this.letterData.accountingDocType !== "invoice") return null;
+    const dateFormat = new Intl.DateTimeFormat(
+      this.documentSettings.languageCode,
+      { dateStyle: this.documentSettings.dateStyle }
+    );
+
+    let formattedFrom = from ? dateFormat.format(from) : null;
+    let formattedTo = to ? dateFormat.format(to) : null;
+
+    const isSameDay = formattedFrom === formattedTo;
+
+    if (isSameDay) {
+      return html`<div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@periodOfPerformance.day"
+          )}
+        </div>
+        <span> ${formattedFrom} </span>`;
+    } else {
+      return html`<div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@periodOfPerformance.range"
+          )}
+        </div>
+        <span> ${formattedFrom} - ${formattedTo}</span>`;
+    }
+  }
+
  public render(): TemplateResult {
    return html`
      <div class="date">
-        ${new Date(this.letterData.date).getDate()}. ${new Date(this.letterData.date).toLocaleString('default', { month: 'long' })}
-        ${new Date(this.letterData.date).getFullYear()}
+        ${new Intl.DateTimeFormat(this.documentSettings.languageCode, {
+          dateStyle: "long",
+        }).format(new Date(this.letterData.date))}
      </div>
      <div class="address">
        <div class="from">
-          ${this.letterData.from.name}, ${this.letterData.from.address.streetName}
-          ${this.letterData.from.address.houseNumber}, ${this.letterData.from.address.postalCode}
-          ${this.letterData.from.address.city}, ${this.letterData.from.address.country}
+          ${this.letterData.from.name},
+          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber},
+          ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.city},
+          ${this.letterData.from.address.country}
        </div>
        <div class="to">
          ${this.letterData.to.name}<br />
-          ${this.letterData.to.address.streetName} ${this.letterData.to.address.houseNumber}<br />
-          ${this.letterData.to.address.postalCode} ${this.letterData.to.address.city}<br />
+          ${this.letterData.to.address.streetName}
+          ${this.letterData.to.address.houseNumber}<br />
+          ${this.letterData.to.address.postalCode}
+          ${this.letterData.to.address.city}<br />
          ${this.letterData.from.address.country}
        </div>
      </div>
      <div class="recepientInfo">
-        <div class="label">your customer id:</div>
-        ${this.letterData.to.customerNumber || 'not registered'}
+        <div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@customer.number"
+          )}
+        </div>
+        ${this.letterData.to.customerNumber || "not registered"}

-        <div class="label">your vat id on file:</div>
-        ${this.letterData.to.vatId || 'not provided'}
+        <div class="label">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "letterhead@@vat.yourId"
+          )}
+        </div>
+        ${this.letterData.to.registrationDetails.vatId || "not provided"}
+
+        <!-- TODO: Make use of components -->
+        ${this.letterData.accountingDocType === "invoice"
+          ? html` <div class="label">
+                ${plugins.shared.translation.translate(
+                  this.documentSettings.languageCode,
+                  "letterhead@@invoice.number"
+                )}
+              </div>
+              ${this.letterData.id || "not registered"}`
+          : null}
+        ${this.renderDeliveryDate(
+          new Date(this.letterData.periodOfPerformance?.from),
+          new Date(this.letterData.periodOfPerformance?.to)
+        )}
      </div>
    `;
  }
--- a/ts_web/elements/page.ts
+++ b/ts_web/elements/page.ts
@@ -1,4 +1,4 @@
-import * as tsclass from '@tsclass/tsclass';
+import * as tsclass from "@tsclass/tsclass";
 import {
  DeesElement,
  property,
@@ -6,68 +6,66 @@ import {
  customElement,
  type TemplateResult,
  css,
-  cssManager,
-  unsafeCSS,
  domtools,
-} from '@design.estate/dees-element';
+} from "@design.estate/dees-element";

-import * as interfaces from '../../ts/interfaces/index.js';
+import * as plugins from "../plugins.js";

-import { defaultDocumentSettings } from './document.js';
-
-import * as shared from './shared/index.js';
+import { defaultDocumentSettings } from "./document.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-page': DePage;
+    "dedocument-page": DePage;
  }
 }

-@customElement('dedocument-page')
+@customElement("dedocument-page")
 export class DePage extends DeesElement {
-  public static demo = () => html` <dedocument-page .format="${'a4'}"></dedocument-page> `;
+  public static demo = () =>
+    html` <dedocument-page .format="${"a4"}"></dedocument-page> `;

  @property({
    type: Number,
  })
-  viewWidth: number = null;
+  accessor viewWidth: number = null;

  @property({
    type: Number,
  })
-  viewHeight: number = null;
+  accessor viewHeight: number = null;

  @property({
    type: String,
  })
-  public format: 'a4' = 'a4';
+  accessor format: "a4" = "a4";

  @property({
    type: Number,
  })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;

  @property({
    type: Number,
  })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;

  @property({
    type: Object,
  })
-  public letterData: tsclass.business.ILetter = null;
+  accessor letterData: tsclass.business.TLetter = null;

  @property({
    type: Boolean,
    reflect: true,
  })
-  printMode = false;
+  accessor printMode = false;

  @property({
    type: Object,
    reflect: true,
  })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings =
+    defaultDocumentSettings;

  constructor() {
    super();
@@ -79,6 +77,7 @@ export class DePage extends DeesElement {
    css`
      :host {
        display: block;
+        overflow: hidden;
      }

      #scaleWrapper {
@@ -101,76 +100,134 @@ export class DePage extends DeesElement {
        align-items: center;
      }

-      .topInfo {
-        position: absolute;
-        top: 60px;
-        left: 40px;
-        color: red;
-        transform: rotate(-5deg);
-      }
-
      .bigDraftText {
        transform: rotate(-45deg);
        font-size: 200px;
        opacity: 0.05;
      }
+
+      .foldMark__wrapper {
+        z-index: 0;
+      }
+
+      .foldMark {
+        position: absolute;
+        border-top: 1px solid #d3d3d3;
+        width: 10px;
+        left: 15px;
+      }
+
+      .foldMark--start {
+        top: calc(var(--DPI-FACTOR) * 8.7);
+      }
+
+      .foldMark--center {
+        top: calc(var(--DPI-FACTOR) * 14.85);
+      }
+
+      .foldMark--end {
+        top: calc(var(--DPI-FACTOR) * 19.2);
+      }
    `,
  ];

  public render(): TemplateResult {
+    const theme = this.documentSettings.theme;
    return html`
+      <style>
+        :host {
+          ${theme?.colorPrimaryForeground ? `--theme-color-primary-fg: ${theme.colorPrimaryForeground};` : ''}
+          ${theme?.colorPrimaryBackground ? `--theme-color-primary-bg: ${theme.colorPrimaryBackground};` : ''}
+          ${theme?.colorAccentForeground ? `--theme-color-accent-fg: ${theme.colorAccentForeground};` : ''}
+          ${theme?.colorAccentBackground ? `--theme-color-accent-bg: ${theme.colorAccentBackground};` : ''}
+        }
+
+        .page {
+          background-size: contain;
+          height: 100%;
+        }
+
+        .page:not(.page--first) {
+          background-image: ${theme?.pageBackground ?? "none"};
+        }
+
+        .page.page--first {
+          background-image: ${theme?.coverPageBackground ?? theme?.pageBackground ?? "none"};
+        }
+      </style>
      <div id="scaleWrapper">
        <dedocument-pagecontainer .printMode=${this.printMode}>
+          <div
+            class="page ${this.pageNumber === 1
+              ? "page--first"
+              : ""}"
+          ></div>
          ${this.letterData
            ? html`
                ${this.documentSettings.enableDefaultHeader
                  ? html`
                      <dedocument-pageheader
                        .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                        .pageNumber="${this.pageNumber}"
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-pageheader>
                    `
-                  : ``}
+                  : null}
+
+                <!-- FOLD MARKS -->
+                ${this.documentSettings.enableFoldMarks === true
+                  ? html` <div class="foldMark__wrapper">
+                      <span class="foldMark foldMark--start"></span>
+                      <span class="foldMark foldMark--center"></span>
+                      <span class="foldMark foldMark--end"></span>
+                    </div>`
+                  : null}
+
+                <!-- LETTER HEADER -->
                ${this.pageNumber === 1
                  ? html`
                      <dedocument-letterheader
                        .pageNumber="${this.pageNumber}"
                        .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-letterheader>
                    `
-                  : html``}
+                  : null}
+
+                <!-- PAGE CONTENT -->
                <dedocument-pagecontent
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
                  .pageNumber="${this.pageNumber}"
                  .pageTotalNumber="${this.pageTotalNumber}"
-                  .letterData=${this.letterData}
                  ><slot></slot
                ></dedocument-pagecontent>
-                ${this.documentSettings.enableDefaultFooter
+
+                <!-- DEFAULT FOOTER -->
+                ${this.documentSettings.enableDefaultFooter === true
                  ? html`
                      <dedocument-pagefooter
                        .letterData=${this.letterData}
+                        .documentSettings=${this.documentSettings}
                        .pageNumber="${this.pageNumber}"
                        .pageTotalNumber="${this.pageTotalNumber}"
                      ></dedocument-pagefooter>
                    `
-                  : ``}
+                  : null}
+
                <div class="versionOverlay">
-                  ${this.letterData.versionInfo.type === 'draft'
+                  ${this.letterData.versionInfo.type === "draft"
                    ? html`
-                        ${this.documentSettings.enableTopDraftText
-                          ? html`
-                              <div class="topInfo">
-                                Please note: THIS IS A DRAFT ONLY. NO RIGHTS CAN BE DERIVED FROM
-                                THIS.<br />
-                                -> Revision/Document version: ${this.letterData.versionInfo.version}
-                              </div>
-                            `
-                          : ``}
-                        <div class="bigDraftText">DRAFT</div>
+                        <div class="bigDraftText">
+                          ${plugins.shared.translation.translate(
+                            this.documentSettings.languageCode,
+                            "overlay@@draft"
+                          )}
+                        </div>
                      `
-                    : html``}
+                    : null}
                </div>
              `
            : html` <slot></slot> `}
@@ -181,35 +238,37 @@ export class DePage extends DeesElement {

  public async checkOverflow() {
    await this.elementDomReady;
-    const pageContent = this.shadowRoot.querySelector('dedocument-pagecontent');
+    const pageContent = this.shadowRoot.querySelector("dedocument-pagecontent");
    return pageContent.checkOverflow();
  }

  updated(changedProperties: Map<string | number | symbol, unknown>): void {
    super.updated(changedProperties);
-    if (changedProperties.has('viewHeight') || changedProperties.has('viewWidth')) {
+    if (
+      changedProperties.has("viewHeight") ||
+      changedProperties.has("viewWidth")
+    ) {
      this.adjustScaling();
    }
  }

  private adjustScaling() {
-    console.log('page scale adjustment triggered.');
-    const scaleWrapper: HTMLDivElement = this.shadowRoot.querySelector('#scaleWrapper');
+    const scaleWrapper: HTMLDivElement =
+      this.shadowRoot.querySelector("#scaleWrapper");

    if (!scaleWrapper) return;

    let scale = 1;
    if (this.viewHeight) {
-      scale = this.viewHeight / shared.a4Height;
+      scale = this.viewHeight / plugins.shared.A4_HEIGHT;
    } else if (this.viewWidth) {
-      scale = this.viewWidth / shared.a4Width;
+      scale = this.viewWidth / plugins.shared.A4_WIDTH;
    }
-    console.log(`new scale is ${scale}`);
    scaleWrapper.style.transform = `scale(${scale})`;

    // Adjust the outer dimensions so they match the scaled content

-    // this.style.width = `${shared.a4Width * scale}px`;
-    this.style.height = `${shared.a4Height * scale}px`;
+    this.style.width = `${plugins.shared.A4_WIDTH * scale}px`;
+    this.style.height = `${plugins.shared.A4_HEIGHT * scale}px`;
  }
 }
--- a/ts_web/elements/pagecontainer.ts
+++ b/ts_web/elements/pagecontainer.ts
@@ -7,32 +7,32 @@ import {
  css,
  cssManager,
  unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+} from "@design.estate/dees-element";
+import * as domtools from "@design.estate/dees-domtools";

-import * as shared from './shared/index.js';
+import * as plugins from "../plugins.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-pagecontainer': DePageContainer;
+    "dedocument-pagecontainer": DePageContainer;
  }
 }

-@customElement('dedocument-pagecontainer')
+@customElement("dedocument-pagecontainer")
 export class DePageContainer extends DeesElement {
  public static demo = () => html`
-    <dedocument-pagecontainer .format="${'a4'}"></dedocument-pagecontainer>
+    <dedocument-pagecontainer .format="${"a4"}"></dedocument-pagecontainer>
  `;

  @property({
    type: String,
  })
-  public format: 'a4' = 'a4';
+  accessor format: "a4" = "a4";

  @property({
    type: Boolean,
  })
-  public printMode = false;
+  accessor printMode = false;

  constructor() {
    super();
@@ -44,14 +44,13 @@ export class DePageContainer extends DeesElement {
    css`
      :host {
        display: block;
-        background: white;
-        color: #333;
        padding: 0px;
-        width: ${unsafeCSS(shared.a4Width + 'px')};
-        height: ${unsafeCSS(shared.a4Height + 'px')};
+        width: ${unsafeCSS(plugins.shared.A4_WIDTH + "px")};
+        height: ${unsafeCSS(plugins.shared.A4_HEIGHT + "px")};
        position: relative;
        border-radius: 3px;
        overflow: hidden;
+        background: var(--text-bg-color, #ffffff);
      }
    `,
  ];
@@ -60,7 +59,9 @@ export class DePageContainer extends DeesElement {
    return html`
      <style>
        :host {
-          box-shadow: ${this.printMode ? `none` : `0px 0px 10px rgba(0,0,0,0.3)`};
+          box-shadow: ${this.printMode
+            ? `none`
+            : `0px 0px 10px rgba(0,0,0,0.3)`};
        }
      </style>
      <slot></slot>
--- a/ts_web/elements/pagecontent.ts
+++ b/ts_web/elements/pagecontent.ts
@@ -7,38 +7,44 @@ import {
  css,
  cssManager,
  unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+  domtools,
+} from "@design.estate/dees-element";

-import * as shared from './shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from "../plugins.js";
+import { dedocumentSharedStyle } from "../style.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-pagecontent': DePageContent;
+    "dedocument-pagecontent": DePageContent;
  }
 }

-@customElement('dedocument-pagecontent')
+@customElement("dedocument-pagecontent")
 export class DePageContent extends DeesElement {
  public static demo = () => html`
-    <dedocument-pagecontent .format="${'a4'}"></dedocument-pagecontent>
+    <dedocument-pagecontent .format="${"a4"}"></dedocument-pagecontent>
  `;

  @property({
    type: Number,
  })
-  public letterData: tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;

  @property({
    type: Number,
  })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;

  @property({
    type: Number,
  })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  constructor() {
    super();
@@ -47,20 +53,25 @@ export class DePageContent extends DeesElement {

  public static styles = [
    domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
    css`
-      :host {
-        color: #333;
-      }
-
      .content {
        position: absolute;

-        left: ${unsafeCSS(shared.leftMargin + 'px')};
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        bottom: 170px;
+        left: var(--LEFT-MARGIN);
+        right: var(--RIGHT-MARGIN);
+        bottom: calc(var(--DPI-FACTOR) * 4);
        overflow: visible;
      }

+      .content.page--first {
+        top: calc(var(--DPI-FACTOR) * 9.85);
+      }
+
+      .content.page--notFirst {
+        top: calc(var(--DPI-FACTOR) * 4.5);
+      }
+
      .content .subject {
        font-size: 18px;
        font-weight: bold;
@@ -82,65 +93,34 @@ export class DePageContent extends DeesElement {
        margin-bottom: 10px;
        font-size: 10px;
      }
-
-      .continuesOnNextPage {
-        display: inline-block;
-        background: #eeeeee;
-        color: #999;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
-
-      .finalPage {
-        display: inline-block;
-        background: #29b000;
-        color: #fff;
-        border-radius: 50px;
-        padding: 5px 10px;
-        margin-top: 8px;
-        font-size: 10px;
-      }
    `,
  ];

  public render(): TemplateResult {
+    const firstPage = this.pageNumber === 1;
    return html`
-      <style>
-        .content {
-          top: ${this.pageNumber === 1 ? unsafeCSS('450px') : unsafeCSS('200px')};
-        }
-      </style>
-      <div class="content">
-        ${this.pageNumber === 1
+      <div class="content ${firstPage ? "page--first" : "page--notFirst"}">
+        ${firstPage
          ? html`<div class="subject">${this.letterData.subject}</div>`
-          : html`
-              <div class="subjectRepeated">
-                ${this.letterData.subject} (Page ${this.pageNumber})
-              </div>
-            `}
+          : null}
        <slot></slot>
-        ${this.pageTotalNumber !== this.pageNumber
-          ? html`<div class="continuesOnNextPage">Continues on page ${this.pageNumber + 1}</div>`
-          : html`<div class="finalPage">This is the final page of this document.</div>`}
      </div>
    `;
  }

-  public firstUpdated(_changedProperties: Map<string | number | symbol, unknown>): void {
+  public firstUpdated(
+    _changedProperties: Map<string | number | symbol, unknown>
+  ): void {
    super.firstUpdated(_changedProperties);
    this.checkOverflow();
  }

  public async checkOverflow() {
    await this.elementDomReady;
-    const contentContainer = this.shadowRoot.querySelector('.content');
+    const contentContainer = this.shadowRoot.querySelector(".content");
    if (contentContainer.scrollHeight > contentContainer.clientHeight) {
-      console.log('overflows');
      return true;
    } else {
-      console.log('does not overflow!');
      return false;
    }
  }
--- a/ts_web/elements/pagefooter.ts
+++ b/ts_web/elements/pagefooter.ts
@@ -5,40 +5,45 @@ import {
  customElement,
  type TemplateResult,
  css,
-  cssManager,
  unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+  domtools,
+} from "@design.estate/dees-element";

-import * as shared from './shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from "../plugins.js";
+import { dedocumentSharedStyle } from "../style.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-pagefooter': DePageFooter;
+    "dedocument-pagefooter": DePageFooter;
  }
 }

-@customElement('dedocument-pagefooter')
+@customElement("dedocument-pagefooter")
 export class DePageFooter extends DeesElement {
  public static demo = () => html`
-    <dedocument-pagefooter .format="${'a4'}"></dedocument-pagefooter>
+    <dedocument-pagefooter .format="${"a4"}"></dedocument-pagefooter>
  `;

  @property({
    type: Object,
  })
-  letterData: tsclass.business.ILetter;
+  accessor letterData: plugins.tsclass.business.TLetter;

  @property({
-    type: Number
+    type: Object,
+    reflect: true,
  })
-  public pageNumber: number = 1;
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  @property({
-    type: Number
+    type: Number,
  })
-  public pageTotalNumber: number = 1;
+  accessor pageNumber: number = 1;
+
+  @property({
+    type: Number,
+  })
+  accessor pageTotalNumber: number = 1;

  constructor() {
    super();
@@ -47,6 +52,7 @@ export class DePageFooter extends DeesElement {

  public static styles = [
    domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
    css`
      :host {
        color: #333;
@@ -60,32 +66,36 @@ export class DePageFooter extends DeesElement {
        left: 0px;
        right: 0px;
        height: 130px;
-        content: '';
-        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
-        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
+        content: "";
+        padding: 30px var(--RIGHT-MARGIN) 10px var(--LEFT-MARGIN);
+        grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(
+            100% / 4
+          );
        grid-gap: 5px;
-        border-top: 2px solid #e4002b;
+        border-top: 2px solid var(--footer-separator-bg-color, #e4002b);
      }

      .bottomstripe .pageNumber {
        position: absolute;
        top: 0px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        background: #e4002b;
+        right: var(--RIGHT-MARGIN);
+        color: var(--footer-separator-fg-color, #ffffff);
+        background: var(--footer-separator-bg-color, #e4002b);
        padding: 3px;
        font-size: 9px;
        color: #fff;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
      }
+
      .bottomstripe .documentTitle {
        position: absolute;
-        top: -18px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        background: #dddddd;
+        top: -19px;
+        right: var(--RIGHT-MARGIN);
+        color: var(--label-fg);
+        background: var(--label-bg);
        padding: 3px;
        font-size: 9px;
-        color: #333;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
      }
@@ -96,36 +106,113 @@ export class DePageFooter extends DeesElement {
    return html`
      <div class="bottomstripe">
        <div>
-          <strong>Address:</strong><br />
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "footer@@address"
+            )}:</strong
+          ><br />
          ${this.letterData.from.name}<br />
-          ${this.letterData.from.address.streetName} ${this.letterData.from.address.houseNumber}<br />
-          ${this.letterData.from.address.postalCode} ${this.letterData.from.address.city}<br />
+          ${this.letterData.from.address.streetName}
+          ${this.letterData.from.address.houseNumber}<br />
+          ${this.letterData.from.address.postalCode}
+          ${this.letterData.from.address.city}<br />
          ${this.letterData.from.address.country}
        </div>
+        ${this.letterData.from.registrationDetails
+          ? html` <div>
+              <strong
+                >${plugins.shared.translation.translate(
+                  this.documentSettings.languageCode,
+                  "footer@@registration.label"
+                )}:</strong
+              ><br />
+              ${this.letterData.from.registrationDetails.registrationName}<br />
+              <i>reg-#:</i> ${this.letterData.from.registrationDetails
+                .registrationId}<br />
+              <i>vat-id:</i> ${this.letterData.from.registrationDetails.vatId}
+            </div>`
+          : null}
        <div>
-          <strong>Registration Info:</strong><br />
-          Amtsgericht Bremen<br />
-          <i>reg-#:</i> HRB 35230 HB<br />
-          <i>vat-id:</i> ${this.letterData.from.vatId}
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@title"
+            )}:</strong
+          ><br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@mail"
+            )}:</i
+          >
+          ${this.letterData.from.email}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@phone"
+            )}:</i
+          >
+          ${this.letterData.from.phone}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "contact@@fax"
+            )}:</i
+          >
+          ${this.letterData.from.fax}
        </div>
        <div>
-          <strong>Contact Info:</strong><br />
-          <i>email:</i> ${this.letterData.from.email}<br />
-          <i>phone:</i> ${this.letterData.from.phone}<br />
-          <i>fax:</i> ${this.letterData.from.fax}
+          <strong
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@title"
+            )}:</strong
+          ><br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.accountHolder"
+            )}:</i
+          >
+          ${this.letterData?.from?.name}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.institution"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.institution}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.iban"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.iban}<br />
+          <i
+            >${plugins.shared.translation.translate(
+              this.documentSettings.languageCode,
+              "bankConnection@@bank.bic"
+            )}:</i
+          >
+          ${this.letterData?.from?.sepaConnection?.bic}<br />
        </div>
-        <div>
-          <strong>Bank Connection:</strong><br />
-          <i>beneficiary:</i> ${this.letterData?.from?.name}<br />
-          <i>institution:</i> ${this.letterData?.from?.sepaConnection?.institution}<br />
-          <i>iban:</i> ${this.letterData?.from?.sepaConnection?.iban}<br />
-          <i>bic:</i> ${this.letterData?.from?.sepaConnection?.bic}<br />
+        <div class="documentTitle">
+          <b>${this.letterData?.subject}</b>
+        </div>
+        <div class="pageNumber">
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "footer@@page"
+          )}
+          ${this.pageNumber}
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "footer@@pageOf"
+          )}
+          ${this.pageTotalNumber}
        </div>
-        <div class="documentTitle">Subject: <b>${this.letterData?.subject}</b>${(() => {
-          const uidString = html`/ Document-UID: <b>${html`<a href="https://uid.signature.digital/">https://uid.signature.digital/</a>`}</b>`;
-          return ``;
-        })()}</div>
-        <div class="pageNumber">page ${this.pageNumber} of ${this.pageTotalNumber}</div>
      </div>
    `;
  }
--- a/ts_web/elements/pageheader.ts
+++ b/ts_web/elements/pageheader.ts
@@ -7,38 +7,44 @@ import {
  css,
  cssManager,
  unsafeCSS,
-} from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
+  domtools,
+} from "@design.estate/dees-element";

-import * as shared from './shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from "../plugins.js";
+import { dedocumentSharedStyle } from "../style.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-pageheader': DePageHeader;
+    "dedocument-pageheader": DePageHeader;
  }
 }

-@customElement('dedocument-pageheader')
+@customElement("dedocument-pageheader")
 export class DePageHeader extends DeesElement {
  public static demo = () => html`
-    <dedocument-pageheader .format="${'a4'}"></dedocument-pageheader>
+    <dedocument-pageheader .format="${"a4"}"></dedocument-pageheader>
  `;

  @property({
    type: Object,
  })
-  public letterData: tsclass.business.ILetter = null;
+  accessor letterData: plugins.tsclass.business.TLetter = null;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  @property({
    type: Number,
  })
-  public pageNumber: number = 1;
+  accessor pageNumber: number = 1;

  @property({
    type: Number,
  })
-  public pageTotalNumber: number = 1;
+  accessor pageTotalNumber: number = 1;

  constructor() {
    super();
@@ -47,6 +53,7 @@ export class DePageHeader extends DeesElement {

  public static styles = [
    domtools.elementBasic.staticStyles,
+    dedocumentSharedStyle,
    css`
      :host {
        color: #333;
@@ -68,7 +75,7 @@ export class DePageHeader extends DeesElement {
        overflow: hidden;
        top: 130px;
        left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: var(--RIGHT-MARGIN);
        height: 20px;
        line-height: 20px;
        color: #333;
@@ -79,8 +86,8 @@ export class DePageHeader extends DeesElement {
        bottom: 10px;
        height: 25px;
        left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
-        font-family: 'Courier New', Courier, monospace;
+        right: var(--RIGHT-MARGIN);
+        font-family: "Courier New", Courier, monospace;
      }
      .topstripe .logo img {
        position: relative;
@@ -93,10 +100,16 @@ export class DePageHeader extends DeesElement {
    return html`
      <div class="topstripe">
        <div class="logo">
-          No logo set!
+          ${plugins.shared.translation.translate(
+            this.documentSettings.languageCode,
+            "empty.logo"
+          )}
        </div>
      </div>
-      <div class="topstripe2">${this.letterData?.from?.description || '[no letterData.from.description set]'}</div>
+      <div class="topstripe2">
+        ${this.letterData?.from?.description ||
+        "[no letterData.from.description set]"}
+      </div>
    `;
  }
 }
--- a/ts_web/elements/paymentcode.ts
+++ b/ts_web/elements/paymentcode.ts
@@ -0,0 +1,95 @@
+import {
+  css,
+  customElement,
+  DeesElement,
+  html,
+  property,
+  query,
+  type TemplateResult,
+} from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "dedocument-paymentcode": DedocumentPaymentCode;
+  }
+}
+
+@customElement("dedocument-paymentcode")
+export class DedocumentPaymentCode extends DeesElement {
+  public static styles = [
+    css`
+      :host {
+        text-align: center;
+        width: 100px;
+        height: 100px;
+      }
+
+      canvas {
+        width: inherit !important;
+        height: inherit !important;
+      }
+    `,
+  ];
+
+  @query("canvas")
+  accessor canvasEl!: HTMLCanvasElement;
+
+  @property()
+  accessor bic: string;
+
+  @property()
+  accessor name: string;
+
+  @property()
+  accessor iban: string;
+
+  @property()
+  accessor currency: string;
+
+  @property({ type: Number })
+  accessor totalGross: number;
+
+  @property()
+  accessor reference: string;
+
+  private updateQRCode(): void {
+    if (!this.canvasEl) return;
+
+    plugins.qrcode.toCanvas(
+      this.canvasEl,
+      `BCD
+001
+1
+SCT
+${this.bic}
+${this.name}
+${this.iban}
+${this.currency}${this.totalGross?.toFixed?.(2)}
+      
+${this.reference}`,
+      (error) => {
+        if (error) console.error(error);
+      }
+    );
+  }
+
+  public override update(
+    changedProperties: Parameters<DeesElement["update"]>[0]
+  ): void {
+    super.update(changedProperties);
+    this.updateQRCode();
+  }
+
+  public render(): TemplateResult {
+    const allDataAvailable =
+      typeof this.bic === "string" &&
+      typeof this.name === "string" &&
+      typeof this.iban === "string" &&
+      typeof this.currency === "string" &&
+      typeof this.totalGross === "number" &&
+      typeof this.reference === "string";
+
+    return allDataAvailable ? html`<canvas></canvas>` : null;
+  }
+}
--- a/ts_web/elements/shared/demoletter.ts
+++ b/ts_web/elements/shared/demoletter.ts
@@ -1,210 +0,0 @@
-import * as tsclass from '@tsclass/tsclass';
-const fromContact: tsclass.business.IContact = {
-  name: 'Awesome From Company',
-  type: 'company',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359',
-  },
-  vatId: 'DE12345678',
-  sepaConnection: {
-    bic: 'BPOTBEB1',
-    iban: 'BE01234567891616'
-  },
-  email: 'hello@awesome.company',
-  phone: '+49 421 1234567',
-  fax: '+49 421 1234568',
-
-};
-
-const toContact: tsclass.business.IContact = {
-  name: 'Awesome To GmbH',
-  type: 'company',
-  customerNumber: 'LL-CLIENT-123',
-  description: 'a company that does stuff',
-  address: {
-    streetName: 'Awesome Street',
-    houseNumber: '5',
-    city: 'Bremen',
-    country: 'Germany',
-    postalCode: '28359'
-  },
-  vatId: 'BE12345678',
-}
-
-export const demoLetter: tsclass.business.ILetter = {
-  versionInfo: {
-    type: 'draft',
-    version: '1.0.0',
-  },
-  accentColor: null,
-  content: {
-    textData: null,
-    timesheetData: null,
-    contractData: {
-      contractDate: Date.now(),
-      id: 'someid'
-    },
-    invoiceData: {
-      id: 'LL-INV-48765',
-      reverseCharge: true,
-      dueInDays: 30,
-      billedBy: fromContact,
-      billedTo: toContact,
-      status: null,
-      deliveryDate: new Date().getTime(),
-      periodOfPerformance: null,
-      printResult: null,
-      currency: 'EUR',
-      notes: [],
-      type: 'debitnote',
-      items: [
-        {
-          name: 'Item with 19% VAT',
-          unitQuantity: 2,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 19,
-          position: 0,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 4,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 1,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 3,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 2,
-        },
-        {
-          name: 'Item with 21% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 21,
-          position: 3,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 6,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 4,
-        },{
-          name: 'Item with 19% VAT',
-          unitQuantity: 8,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 19,
-          position: 5,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 9,
-          unitNetPrice: 100,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 6,
-        },
-        {
-          name: 'Item with 7% VAT',
-          unitQuantity: 4,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 7,
-          position: 8,
-        },
-        {
-          name: 'Item with 21% VAT',
-          unitQuantity: 3,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 21,
-          position: 9,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-        {
-          name: 'Item with 0% VAT',
-          unitQuantity: 1,
-          unitNetPrice: 230,
-          unitType: 'hours',
-          vatPercentage: 0,
-          position: 10,
-        },
-      ],
-    }
-  },
-  
-  date: Date.now(),
-  type: 'invoice',
-  needsCoverSheet: false,
-  objectActions: [],
-  pdf: null,
-  from: fromContact,
-  to: toContact,
-  incidenceId: null,
-  language: null,
-  legalContact: null,
-  logoUrl: null,
-  pdfAttachments: null,
-  subject: 'Invoice: LL-INV-48765',
-}
--- a/ts_web/elements/shared/index.ts
+++ b/ts_web/elements/shared/index.ts
@@ -1,9 +0,0 @@
-export const a4Height = 1122;
-export const a4Width = 794;
-export const rightMargin = 70;
-export const leftMargin = 90;
-
-import * as translation from './translation.js';
-export { translation };
-
-export * from './demoletter.js';
--- a/ts_web/elements/shared/translation.ts
+++ b/ts_web/elements/shared/translation.ts
@@ -1,31 +0,0 @@
-import * as interfaces from '../../../ts/interfaces/index.js';
-
-type TTranslationImplementation = {
-  [key in keyof interfaces.IDeDocumentTranslations]: string;
-}
-
-export const EN_translations: TTranslationImplementation = {
-  invoice: 'Invoice',
-  quantity: 'Quantity',
-};
-
-export const DE_translations: TTranslationImplementation = {
-  invoice: 'Rechnung',
-  quantity: 'Anzahl',
-};
-
-export const languageCodeMap = {
-  'DE': DE_translations,
-  'EN': EN_translations,
-};
-
-export type TLanguageCode = keyof typeof languageCodeMap;
-
-export const translate = (languageCode: TLanguageCode, key: string, defaultValue: string) => {
-  const translations = languageCodeMap[languageCode] || EN_translations;
-  if (translations && translations[key]) {
-    return translations[key];
-  } else {
-    return defaultValue;
-  }
-};
--- a/ts_web/elements/viewer.demo.ts
+++ b/ts_web/elements/viewer.demo.ts
@@ -1,6 +1,9 @@
-import { html } from '@design.estate/dees-element';
-import * as shared from './shared/index.js';
+import { html } from "@design.estate/dees-element";
+import * as plugins from "../plugins.js";

 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${shared.demoLetter}></dedocument-viewer>
-`;
+  <dedocument-viewer
+    .letterData=${plugins.shared.demoLetter}
+    .documentSettings=${plugins.shared.demoDocumentSettings}
+  ></dedocument-viewer>
+`;
--- a/ts_web/elements/viewer.ts
+++ b/ts_web/elements/viewer.ts
@@ -1,21 +1,38 @@
-import * as plugins from '../plugins.js';
+import * as plugins from "../plugins.js";

-import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
-import { demoFunc } from './viewer.demo.js';
+import {
+  DeesElement,
+  css,
+  cssManager,
+  customElement,
+  html,
+  property,
+} from "@design.estate/dees-element";
+import { demoFunc } from "./viewer.demo.js";

 declare global {
  interface HTMLElementTagNameMap {
-    'dedocument-viewer': DeDocumentViewer;
+    "dedocument-viewer": DeDocumentViewer;
  }
 }

-@customElement('dedocument-viewer')
+@customElement("dedocument-viewer")
 export class DeDocumentViewer extends DeesElement {
  // DEMO
  public static demo = demoFunc;

  // INSTANCE
-  public letterData: plugins.tsclass.business.ILetter = null;
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor letterData: plugins.tsclass.business.TLetter = null;
+
+  @property({
+    type: Object,
+    reflect: true,
+  })
+  accessor documentSettings: plugins.shared.interfaces.IDocumentSettings;

  public static styles = [
    cssManager.defaultStyles,
@@ -24,7 +41,7 @@ export class DeDocumentViewer extends DeesElement {
        position: relative;
        height: 100%;
        width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111')};
+        background: ${cssManager.bdTheme("#eeeeeb", "#111")};
      }
      .controls {
        top: 0px;
@@ -33,7 +50,7 @@ export class DeDocumentViewer extends DeesElement {
        position: absolute;
        height: 32px;
        width: 100%;
-        background: ${cssManager.bdTheme('#eeeeeb', '#111111ee')};
+        background: ${cssManager.bdTheme("#eeeeeb", "#111111ee")};
        box-shadow: 0px 2px 8px 0px #000000;
      }
      .controlsShadow {
@@ -67,7 +84,12 @@ export class DeDocumentViewer extends DeesElement {
      <div class="maincontainer">
        <div class="viewport">
          ${this.letterData
-            ? html` <dedocument-dedocument .letterData=${this.letterData}></dedocument-dedocument> `
+            ? html`
+                <dedocument-dedocument
+                  .letterData=${this.letterData}
+                  .documentSettings=${this.documentSettings}
+                ></dedocument-dedocument>
+              `
            : html``}
        </div>
        <div class="controls"></div>
@@ -75,9 +97,11 @@ export class DeDocumentViewer extends DeesElement {
    `;
  };

-  public updated = (changedProperties: Map<string | number | symbol, unknown>) => {
+  public updated = (
+    changedProperties: Map<string | number | symbol, unknown>
+  ) => {
    super.updated(changedProperties);
-    if (changedProperties.has('letterData')) {
+    if (changedProperties.has("letterData")) {
    }
  };
 }
--- a/ts_web/pages/index.ts
+++ b/ts_web/pages/index.ts
@@ -0,0 +1,2 @@
+export * from './page1.js';
+export * from './page2.js';
--- a/ts_web/pages/page1.ts
+++ b/ts_web/pages/page1.ts
@@ -0,0 +1,21 @@
+import * as plugins from "../plugins.js";
+import { html } from "@design.estate/dees-element";
+
+export const page1 = () => html`
+  <style>
+    dedocument-dedocument {
+      margin: 16px;
+    }
+  </style>
+  <dedocument-dedocument
+    .printMode=${false}
+    letterData=${plugins.smartjson.stringifyBase64({
+      ...plugins.shared.demoLetter,
+      from: {
+        ...plugins.shared.demoLetter.from,
+        description: "a string set via stringified JSON",
+      },
+    } as plugins.tsclass.finance.TInvoice)}
+  >
+  </dedocument-dedocument>
+`;
--- a/ts_web/pages/page2.ts
+++ b/ts_web/pages/page2.ts
@@ -0,0 +1,18 @@
+import { html } from "@design.estate/dees-element";
+
+export const page2 = () => html`
+  <style>
+    .demoPort {
+      margin: auto;
+      width: 400px;
+    }
+    dedocument-page {
+      margin-top: 16px;
+      margin-bottom: 16px;
+    }
+  </style>
+  <div class="demoPort">
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+    <dedocument-page .format="${"a4"}" .viewWidth=${400}></dedocument-page>
+  </div>
+`;
--- a/ts_web/plugins.ts
+++ b/ts_web/plugins.ts
@@ -1,3 +1,8 @@
+// dees-document scope
+import * as shared from '../dist_ts_shared/index.js';
+
+export { shared };
+
 // tsclass scope
 import * as tsclass from '@tsclass/tsclass';

--- a/ts_web/style.ts
+++ b/ts_web/style.ts
@@ -0,0 +1,38 @@
+import { css } from "@design.estate/dees-element";
+import * as plugins from "./plugins.js";
+
+export const dedocumentSharedStyle = css`
+  :host {
+    /* Primitive colors */
+    --color-light: #ffffff;
+    --color-dark: #333333;
+    --color-grey: #dddddd;
+    --color-grey-100: #dddddd;
+    --color-red: #e4002b;
+
+    /* Semantic colors */
+    --color-primary-fg: var(--theme-color-primary-fg, var(--color-dark));
+    --color-primary-bg: var(--theme-color-primary-bg, var(--color-light));
+    --color-accent-fg: var(--theme-color-accent-fg, var(--color-light));
+    --color-accent-bg: var(--theme-color-accent-bg, var(--color-red));
+
+    /* Functional colors */
+    --text-fg-color: var(--color-primary-fg);
+    --text-bg-color: var(--color-primary-bg);
+    --label-fg: var(--color-dark);
+    --label-bg: var(--color-grey);
+    --footer-separator-bg-color: var(--color-accent-bg);
+    --footer-separator-fg-color: var(--color-light);
+
+    /* Functional variables */
+    --DPI-FACTOR: ${plugins.shared.cmToPx(1)}px;
+    --RIGHT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --LEFT-MARGIN: ${plugins.shared.cmToPx(2)}px;
+    --text-font-family: var(--theme-text-font-family, "Exo 2");
+    --text-font-size: var(--theme-text-font-size, 12px);
+
+    color: var(--text-fg-color);
+    font-family: var(--text-font-family);
+    font-size: var(--text-font-size);
+  }
+`;
--- a/ts_web/tspublish.json
+++ b/ts_web/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 3
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,14 +1,18 @@
 {
  "compilerOptions": {
-    "experimentalDecorators": true,
-    "useDefineForClassFields": false,
    "target": "ES2022",
    "module": "NodeNext",
    "moduleResolution": "NodeNext",
    "esModuleInterop": true,
-    "verbatimModuleSyntax": true
+    "verbatimModuleSyntax": true,
+    "baseUrl": ".",
+    "paths": {
+      "undefined": [
+        "./ts_web/index.js"
+      ]
+    }
  },
  "exclude": [
    "dist_*/**/*.d.ts"
  ]
-}
+}
Author	SHA1	Message	Date
Juergen Kunz	57a5fa6d18	v2.0.2 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-11 02:38:18 +00:00
Juergen Kunz	0e30684c2f	fix(page): Use theme variables for page styling, make pagecontainer background theme-aware, and use accent background for footer separator	2025-12-11 02:38:18 +00:00
Juergen Kunz	3be8de28c6	update	2025-12-11 02:31:18 +00:00
Juergen Kunz	e9de3fde2c	v2.0.1 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-10 21:37:21 +00:00
Juergen Kunz	9f92c6e3ae	fix(core): Migrate file I/O to @push.rocks/smartfs, adopt TC39 decorators v3 accessor in web components, and update docs/tests	2025-12-10 21:37:21 +00:00
Juergen Kunz	627df17b2b	v2.0.0 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-12-10 20:55:28 +00:00
Juergen Kunz	c8b5f78757	BREAKING CHANGE(build): Upgrade dependencies and dev tooling; adjust TypeScript config	2025-12-10 20:55:28 +00:00
Jürgen Kunz	5889b327bd	Merge pull request 'feat: enhance translation and invoice layout' (#3 ) from feat/enhance-translation into master Reviewed-on: #3	2025-08-03 22:21:52 +00:00
Dominik Schwank	cb0e69169e	feat: upgrade dependencies	2025-07-28 10:36:00 +00:00
Dominik Schwank	df4c782fbb	feat: migrate to new tsclass schema	2025-07-28 09:46:06 +00:00
Dominik Schwank	04e668ff83	feat: enhance translation and invoice layout	2025-03-26 14:58:03 +00:00
Philipp Kunz	1106b9648d	1.6.11 Some checks failed Default (tags) / security (push) Failing after 2s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2025-01-01 04:57:29 +01:00
Philipp Kunz	1f06a73422	fix(license): Update copyright notice in license to reflect new ownership	2025-01-01 04:57:29 +01:00
Philipp Kunz	7d5508e4d8	1.6.10 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-08 22:08:59 +01:00
Philipp Kunz	67ae3ac22b	fix(core): Improve stability and performance of document generation	2024-12-08 22:08:59 +01:00
Philipp Kunz	389db4f014	1.6.9 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-08 17:37:17 +01:00
Philipp Kunz	60fd21c6d3	fix(contentinvoice.ts): Improve invoice item layout and fix alignment issues.	2024-12-08 17:37:17 +01:00
Philipp Kunz	89cc610aa0	1.6.8 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-07 15:38:17 +01:00
Philipp Kunz	db9b53462d	fix(rendering and logging): remove extensive console chattiness, remove content memory leak when rerendering	2024-12-07 15:38:17 +01:00
Philipp Kunz	dbca81987c	1.6.7 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-07 14:22:42 +01:00
Philipp Kunz	2e3739e765	fix(document rendering): Fixed overflow issues in document and page elements	2024-12-07 14:22:42 +01:00
Philipp Kunz	76d829f5c7	1.6.6 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-07 13:55:10 +01:00
Philipp Kunz	f0e4fe0521	fix(page-render): Fix layout scaling adjustment for page component	2024-12-07 13:55:10 +01:00
Philipp Kunz	5b3b1f4624	1.6.5 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-05 20:23:20 +01:00
Philipp Kunz	cf29de5650	fix(contentinvoice): Fix VAT group item number formatting and remove custom font style in invoice sums.	2024-12-05 20:23:19 +01:00
Philipp Kunz	15573a85ec	1.6.4 Some checks failed Default (tags) / security (push) Failing after 1s Details Default (tags) / test (push) Failing after 0s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-05 20:20:30 +01:00
Philipp Kunz	20abb7f837	fix(styling): Consolidated shared styles for consistent font applied across various components.	2024-12-05 20:20:29 +01:00
Philipp Kunz	ebb6622637	1.6.3 Some checks failed Default (tags) / security (push) Failing after 0s Details Default (tags) / test (push) Failing after 1s Details Default (tags) / release (push) Has been skipped Details Default (tags) / metadata (push) Has been skipped Details	2024-12-05 19:31:17 +01:00
Philipp Kunz	dead3eeaec	fix(ui): Corrects font family in contentinvoice element.	2024-12-05 19:31:17 +01:00
Philipp Kunz	23031d06b7	1.6.2	2024-12-05 01:42:06 +01:00
Philipp Kunz	5b849b316f	fix(translation): Corrected missing translation keys for VAT short form across multiple languages.	2024-12-05 01:42:05 +01:00
Philipp Kunz	47b6d4f0b9	1.6.1	2024-12-05 01:39:42 +01:00
Philipp Kunz	2464d28a19	fix(core): Ensure consistent project structure and code organization without additional changes.	2024-12-05 01:39:42 +01:00
Philipp Kunz	784fe9ca74	1.6.0	2024-12-05 01:36:27 +01:00
Philipp Kunz	83efcdd2b8	feat(documentSettings + translations + vat in itemLines): implements and fixes #2	2024-12-05 01:36:27 +01:00
Philipp Kunz	f2d585ed36	update	2024-12-05 01:33:16 +01:00
Philipp Kunz	9517687902	1.5.3	2024-12-02 17:05:03 +01:00
Philipp Kunz	b5d3a72733	fix(elements): Update viewer attributes and fix font integration	2024-12-02 17:05:03 +01:00
Philipp Kunz	08baae7b9c	1.5.2	2024-12-02 16:13:37 +01:00
Philipp Kunz	c949f1b968	fix(workflow): Corrected Docker image references and package scope in YAML workflows for compatibility.	2024-12-02 16:13:37 +01:00
Philipp Kunz	249d44d5fc	1.5.1	2024-12-02 16:05:44 +01:00
Philipp Kunz	de02e015e8	fix(package): Fix duplicate node export in package.json	2024-12-02 16:05:44 +01:00
Philipp Kunz	3e50547d91	1.5.0	2024-12-02 16:04:58 +01:00
Philipp Kunz	c9ad18538b	feat(core): Refactor project structure for better modularity and code organization	2024-12-02 16:04:58 +01:00
Philipp Kunz	bab1ffc4b4	1.4.0	2024-12-02 15:20:58 +01:00
Philipp Kunz	8986ec2543	feat(translation): Add French and Italian translations for document interface	2024-12-02 15:20:57 +01:00
Philipp Kunz	49c15a98e4	1.3.2	2024-12-02 15:05:07 +01:00
Philipp Kunz	840de119ad	fix(core): Minor updates and optimizations in the output PDF formatting process.	2024-12-02 15:05:07 +01:00
Philipp Kunz	3919956c57	Merge remote-tracking branch 'origin/master'	2024-12-02 15:04:22 +01:00
Philipp Kunz	de0ecfd7ae	1.3.1	2024-12-02 15:02:15 +01:00
Philipp Kunz	d0d4671d41	fix(documentation): Updated project description and enhanced documentation in package.json and README	2024-12-02 15:02:14 +01:00
Philipp Kunz	bc4f018b06	Merge pull request 'fix: use type import to avoid ts dependency in js files' (#1 ) from fix/use-type-import into master Reviewed-on: #1	2024-12-02 13:37:59 +00:00
Dominik Schwank	8f7677ab82	fix: use type import to avoid ts dependency in js files	2024-12-02 12:59:19 +00:00
Philipp Kunz	406db92ac1	1.3.0	2024-12-02 12:46:28 +01:00
Philipp Kunz	d59734fb7c	feat(translation): Add multi-language support for document translations.	2024-12-02 12:46:28 +01:00
Philipp Kunz	c8b102e798	1.2.0	2024-12-01 23:04:28 +01:00
Philipp Kunz	4c9b2671a9	feat(core): Enhance document generation capabilities with improved modular structure and extended translation support.	2024-12-01 23:04:28 +01:00