From c9ad18538bec9d040e092ff9f1e6a070b765450c Mon Sep 17 00:00:00 2001
From: Philipp Kunz <gitlab@philkunz.com>
Date: Mon, 2 Dec 2024 16:04:58 +0100
Subject: [PATCH] feat(core): Refactor project structure for better modularity
 and code organization

---
 changelog.md                                |  7 +++++++
 package.json                                |  6 ++++--
 test/test.ts                                |  2 +-
 ts/00_commitinfo_data.ts                    |  2 +-
 ts/classes.pdfservice.ts                    |  3 +--
 ts/plugins.ts                               |  5 +++++
 ts/tspublish.json                           |  3 +++
 {ts/shared => ts_shared}/demoletter.ts      | 10 ++++-----
 {ts/shared => ts_shared}/index.ts           |  3 +++
 {ts => ts_shared}/interfaces/document.ts    |  4 ++--
 {ts => ts_shared}/interfaces/index.ts       |  0
 {ts => ts_shared}/interfaces/translation.ts |  0
 ts_shared/plugins.ts                        |  4 ++++
 {ts/shared => ts_shared}/translation.ts     |  2 +-
 ts_shared/tspublish.json                    |  3 +++
 ts_web/00_commitinfo_data.ts                |  2 +-
 ts_web/elements/contentinvoice.ts           | 18 +++++++---------
 ts_web/elements/document.demo.ts            |  5 +++--
 ts_web/elements/document.ts                 |  7 ++-----
 ts_web/elements/index.ts                    |  2 --
 ts_web/elements/letterheader.ts             | 15 +++++++-------
 ts_web/elements/page.ts                     | 12 +++++------
 ts_web/elements/pagecontainer.ts            |  6 +++---
 ts_web/elements/pagecontent.ts              | 11 +++++-----
 ts_web/elements/pagefooter.ts               | 23 +++++++++------------
 ts_web/elements/pageheader.ts               | 13 +++++-------
 ts_web/elements/viewer.demo.ts              |  4 ++--
 ts_web/elements/viewer.ts                   |  3 +--
 ts_web/plugins.ts                           |  5 +++++
 ts_web/tspublish.json                       |  3 +++
 30 files changed, 100 insertions(+), 83 deletions(-)
 create mode 100644 ts/tspublish.json
 rename {ts/shared => ts_shared}/demoletter.ts (94%)
 rename {ts/shared => ts_shared}/index.ts (74%)
 rename {ts => ts_shared}/interfaces/document.ts (58%)
 rename {ts => ts_shared}/interfaces/index.ts (100%)
 rename {ts => ts_shared}/interfaces/translation.ts (100%)
 create mode 100644 ts_shared/plugins.ts
 rename {ts/shared => ts_shared}/translation.ts (98%)
 create mode 100644 ts_shared/tspublish.json
 create mode 100644 ts_web/tspublish.json

diff --git a/changelog.md b/changelog.md
index 3f15f14..f8e583b 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 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
 
diff --git a/package.json b/package.json
index e464b3d..3aa774c 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
   "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",
+    "./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/",
diff --git a/test/test.ts b/test/test.ts
index 5f7f520..ea67a58 100644
--- a/test/test.ts
+++ b/test/test.ts
@@ -1,6 +1,6 @@
 import * as plugins from './plugins.js';
 import * as paths from './paths.js';
-import * as interfaces from '../ts/interfaces/index.js';
+import * as interfaces from '../ts_shared/interfaces/index.js';
 import { expect, tap } from '@push.rocks/tapbundle';
 import * as deesDocumentServer from '../ts/index.js';
 
diff --git a/ts/00_commitinfo_data.ts b/ts/00_commitinfo_data.ts
index 8033d5a..0311e55 100644
--- 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.4.0',
+  version: '1.5.0',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }
diff --git a/ts/classes.pdfservice.ts b/ts/classes.pdfservice.ts
index f749e2d..e6849d7 100644
--- a/ts/classes.pdfservice.ts
+++ b/ts/classes.pdfservice.ts
@@ -1,6 +1,5 @@
 import * as plugins from './plugins.js';
 import * as helpers from './helpers.js';
-import type { IDocumentSettings} from '../ts/interfaces/index.js';
 
 export interface IPdfServiceConstructorOptions {
 
@@ -46,7 +45,7 @@ export class PdfService {
    */
   public async createPdfFromLetterObject(optionsArg: {
     letterData: plugins.tsclass.business.ILetter,
-    documentSettings: IDocumentSettings
+    documentSettings: plugins.shared.interfaces.IDocumentSettings
   }) {
     const html = `
       <script type="module">
diff --git a/ts/plugins.ts b/ts/plugins.ts
index 4521051..bb33eb1 100644
--- a/ts/plugins.ts
+++ b/ts/plugins.ts
@@ -5,6 +5,11 @@ 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 * as smartjson from '@push.rocks/smartjson';
diff --git a/ts/tspublish.json b/ts/tspublish.json
new file mode 100644
index 0000000..c435a12
--- /dev/null
+++ b/ts/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 2
+}
diff --git a/ts/shared/demoletter.ts b/ts_shared/demoletter.ts
similarity index 94%
rename from ts/shared/demoletter.ts
rename to ts_shared/demoletter.ts
index 2869224..3f5b701 100644
--- a/ts/shared/demoletter.ts
+++ b/ts_shared/demoletter.ts
@@ -1,7 +1,7 @@
-import * as tsclass from '@tsclass/tsclass';
-import * as interfaces from '../interfaces/index.js';
+import * as plugins from './plugins.js';
+import * as interfaces from './interfaces/index.js';
 
-const fromContact: tsclass.business.IContact = {
+const fromContact: plugins.tsclass.business.IContact = {
   name: 'Awesome From Company',
   type: 'company',
   description: 'a company that does stuff',
@@ -23,7 +23,7 @@ const fromContact: tsclass.business.IContact = {
 
 };
 
-const toContact: tsclass.business.IContact = {
+const toContact: plugins.tsclass.business.IContact = {
   name: 'Awesome To GmbH',
   type: 'company',
   customerNumber: 'LL-CLIENT-123',
@@ -38,7 +38,7 @@ const toContact: tsclass.business.IContact = {
   vatId: 'BE12345678',
 }
 
-export const demoLetter: tsclass.business.ILetter = {
+export const demoLetter: plugins.tsclass.business.ILetter = {
   versionInfo: {
     type: 'draft',
     version: '1.0.0',
diff --git a/ts/shared/index.ts b/ts_shared/index.ts
similarity index 74%
rename from ts/shared/index.ts
rename to ts_shared/index.ts
index edf58c2..b7d1fec 100644
--- a/ts/shared/index.ts
+++ b/ts_shared/index.ts
@@ -3,6 +3,9 @@ export const a4Width = 794;
 export const rightMargin = 70;
 export const leftMargin = 90;
 
+import * as interfaces from './interfaces/index.js';
+export { interfaces };
+
 import * as translation from './translation.js';
 export { translation };
 
diff --git a/ts/interfaces/document.ts b/ts_shared/interfaces/document.ts
similarity index 58%
rename from ts/interfaces/document.ts
rename to ts_shared/interfaces/document.ts
index e84d180..9047790 100644
--- a/ts/interfaces/document.ts
+++ b/ts_shared/interfaces/document.ts
@@ -1,8 +1,8 @@
-import * as shared from '../shared/index.js';
+import * as translation from '../translation.js';
 
 export interface IDocumentSettings {
   enableTopDraftText?: boolean;
   enableDefaultHeader?: boolean;
   enableDefaultFooter?: boolean;
-  languageCode?: shared.translation.TLanguageCode;
+  languageCode?: translation.TLanguageCode;
 }
\ No newline at end of file
diff --git a/ts/interfaces/index.ts b/ts_shared/interfaces/index.ts
similarity index 100%
rename from ts/interfaces/index.ts
rename to ts_shared/interfaces/index.ts
diff --git a/ts/interfaces/translation.ts b/ts_shared/interfaces/translation.ts
similarity index 100%
rename from ts/interfaces/translation.ts
rename to ts_shared/interfaces/translation.ts
diff --git a/ts_shared/plugins.ts b/ts_shared/plugins.ts
new file mode 100644
index 0000000..3671ff6
--- /dev/null
+++ b/ts_shared/plugins.ts
@@ -0,0 +1,4 @@
+// tsclass scope
+import * as tsclass from '@tsclass/tsclass';
+
+export { tsclass };
diff --git a/ts/shared/translation.ts b/ts_shared/translation.ts
similarity index 98%
rename from ts/shared/translation.ts
rename to ts_shared/translation.ts
index 6bbe7db..5b11866 100644
--- a/ts/shared/translation.ts
+++ b/ts_shared/translation.ts
@@ -1,4 +1,4 @@
-import * as interfaces from '../interfaces/index.js';
+import * as interfaces from './interfaces/index.js';
 
 type TTranslationImplementation = {
   [key in keyof interfaces.IDeDocumentTranslations]: string;
diff --git a/ts_shared/tspublish.json b/ts_shared/tspublish.json
new file mode 100644
index 0000000..66ec4e0
--- /dev/null
+++ b/ts_shared/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 1
+}
diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 8033d5a..0311e55 100644
--- 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.4.0',
+  version: '1.5.0',
   description: 'A sophisticated framework for dynamically generating and rendering business documents like invoices with modern web technologies, featuring PDF creation, templating, and automation.'
 }
diff --git a/ts_web/elements/contentinvoice.ts b/ts_web/elements/contentinvoice.ts
index f6dc709..2b7f21c 100644
--- a/ts_web/elements/contentinvoice.ts
+++ b/ts_web/elements/contentinvoice.ts
@@ -15,8 +15,6 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 import * as plugins from '../plugins.js';
-import * as shared from '../../ts/shared/index.js';
-import * as interfaces from '../../ts/interfaces/index.js';
 
 
 declare global {
@@ -49,7 +47,7 @@ export class DeContentInvoice extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   constructor() {
     super();
@@ -281,12 +279,12 @@ export class DeContentInvoice extends DeesElement {
         </style>
         <div>We hereby invoice products and services provided to you by Lossless GmbH:</div>
         <div class="grid topLine dataHeader">
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
-          <div class="lineItem">${shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'itemPos', 'Item Pos.')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'description', 'Description')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'quantity', 'Quantity')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitType', 'Unit Type')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'unitNetPrice', 'Unit Net Price')}</div>
+          <div class="lineItem">${plugins.shared.translation.translate(this.documentSettings.languageCode, 'totalNetPrice', 'Total Net Price')}</div>
         </div>
         ${(() => {
           let counter = 1;
@@ -335,7 +333,7 @@ export class DeContentInvoice extends DeesElement {
         ${this.letterData?.content.invoiceData.reverseCharge
           ? html`
               <div class="taxNote">
-                ${shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
+                ${plugins.shared.translation.translate(this.documentSettings.languageCode, 'reverseVatNote', 'VAT arises on a reverse charge basis and is payable by the customer.')}
               </div>
             `
           : ``}
diff --git a/ts_web/elements/document.demo.ts b/ts_web/elements/document.demo.ts
index ada07f6..1f6651c 100644
--- a/ts_web/elements/document.demo.ts
+++ b/ts_web/elements/document.demo.ts
@@ -1,6 +1,7 @@
-import * as shared from '../../ts/shared/index.js';
+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>
 `;
\ No newline at end of file
diff --git a/ts_web/elements/document.ts b/ts_web/elements/document.ts
index 87ae9f9..67d6e64 100644
--- a/ts_web/elements/document.ts
+++ b/ts_web/elements/document.ts
@@ -10,11 +10,9 @@ import {
   unsafeCSS,
   domtools,
 } from '@design.estate/dees-element';
-
-import * as interfaces from '../../ts/interfaces/index.js';
 import * as plugins from '../plugins.js';
 
-export const defaultDocumentSettings: interfaces.IDocumentSettings = {
+export const defaultDocumentSettings: plugins.shared.interfaces.IDocumentSettings = {
   enableTopDraftText: true,
   enableDefaultHeader: true,
   enableDefaultFooter: true,
@@ -24,7 +22,6 @@ export const defaultDocumentSettings: interfaces.IDocumentSettings = {
 import { DePage } from './page.js';
 import { DeContentInvoice } from './contentinvoice.js';
 
-import * as shared from '../../ts/shared/index.js';
 import { demoFunc } from './document.demo.js';
 
 declare global {
@@ -85,7 +82,7 @@ export class DeDocument extends DeesElement {
       }
     },
   })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts
index 46cb17b..3ffe9a7 100644
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -7,5 +7,3 @@ export * from './pagecontent.js';
 export * from './pagefooter.js';
 export * from './pageheader.js';
 export * from './viewer.js';
-
-export * from '../../ts/shared/index.js';
\ No newline at end of file
diff --git a/ts_web/elements/letterheader.ts b/ts_web/elements/letterheader.ts
index a99cbee..c21219f 100644
--- a/ts_web/elements/letterheader.ts
+++ b/ts_web/elements/letterheader.ts
@@ -7,11 +7,10 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -22,14 +21,14 @@ declare global {
 @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
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -60,7 +59,7 @@ export class DeLetterHeader extends DeesElement {
         display: block;
         overflow: hidden;
         top: 200px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         width: 200px;
         text-align: right;
       }
@@ -74,14 +73,14 @@ export class DeLetterHeader extends DeesElement {
       .date {
         position: absolute;
         top: 180px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         text-align: right;
       }
 
       .address {
         position: absolute;
         top: 180px;
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
       }
 
       .address .from {
diff --git a/ts_web/elements/page.ts b/ts_web/elements/page.ts
index 0cf2692..a9c7c3f 100644
--- a/ts_web/elements/page.ts
+++ b/ts_web/elements/page.ts
@@ -11,12 +11,10 @@ import {
   domtools,
 } 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 '../../ts/shared/index.js';
-
 declare global {
   interface HTMLElementTagNameMap {
     'dedocument-page': DePage;
@@ -67,7 +65,7 @@ export class DePage extends DeesElement {
     type: Object,
     reflect: true,
   })
-  public documentSettings: interfaces.IDocumentSettings = defaultDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings = defaultDocumentSettings;
 
   constructor() {
     super();
@@ -204,9 +202,9 @@ export class DePage extends DeesElement {
 
     let scale = 1;
     if (this.viewHeight) {
-      scale = this.viewHeight / shared.a4Height;
+      scale = this.viewHeight / plugins.shared.a4Height;
     } else if (this.viewWidth) {
-      scale = this.viewWidth / shared.a4Width;
+      scale = this.viewWidth / plugins.shared.a4Width;
     }
     console.log(`new scale is ${scale}`);
     scaleWrapper.style.transform = `scale(${scale})`;
@@ -214,6 +212,6 @@ export class DePage extends DeesElement {
     // 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.height = `${plugins.shared.a4Height * scale}px`;
   }
 }
diff --git a/ts_web/elements/pagecontainer.ts b/ts_web/elements/pagecontainer.ts
index e7fcec3..c49cc08 100644
--- a/ts_web/elements/pagecontainer.ts
+++ b/ts_web/elements/pagecontainer.ts
@@ -10,7 +10,7 @@ import {
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from '../../ts/shared/index.js';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -47,8 +47,8 @@ export class DePageContainer extends DeesElement {
         background: white;
         color: #333;
         padding: 0px;
-        width: ${unsafeCSS(shared.a4Width + 'px')};
-        height: ${unsafeCSS(shared.a4Height + 'px')};
+        width: ${unsafeCSS(plugins.shared.a4Width + 'px')};
+        height: ${unsafeCSS(plugins.shared.a4Height + 'px')};
         position: relative;
         border-radius: 3px;
         overflow: hidden;
diff --git a/ts_web/elements/pagecontent.ts b/ts_web/elements/pagecontent.ts
index c60ba42..fda71e6 100644
--- a/ts_web/elements/pagecontent.ts
+++ b/ts_web/elements/pagecontent.ts
@@ -7,11 +7,10 @@ import {
   css,
   cssManager,
   unsafeCSS,
+  domtools,
 } from '@design.estate/dees-element';
-import * as domtools from '@design.estate/dees-domtools';
 
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -28,7 +27,7 @@ export class DePageContent extends DeesElement {
   @property({
     type: Number,
   })
-  public letterData: tsclass.business.ILetter;
+  public letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Number,
@@ -55,8 +54,8 @@ export class DePageContent extends DeesElement {
       .content {
         position: absolute;
 
-        left: ${unsafeCSS(shared.leftMargin + 'px')};
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        left: ${unsafeCSS(plugins.shared.leftMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         bottom: 170px;
         overflow: visible;
       }
diff --git a/ts_web/elements/pagefooter.ts b/ts_web/elements/pagefooter.ts
index 20aa4c9..bdc5458 100644
--- a/ts_web/elements/pagefooter.ts
+++ b/ts_web/elements/pagefooter.ts
@@ -10,10 +10,7 @@ import {
   domtools,
 } from '@design.estate/dees-element';
 
-import * as interfaces from '../../ts/interfaces/index.js';
-
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,13 +27,13 @@ export class DePageFooter extends DeesElement {
   @property({
     type: Object,
   })
-  letterData: tsclass.business.ILetter;
+  letterData: plugins.tsclass.business.ILetter;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number
@@ -69,7 +66,7 @@ export class DePageFooter extends DeesElement {
         right: 0px;
         height: 130px;
         content: '';
-        padding: 30px ${unsafeCSS(shared.rightMargin + 'px')} 10px ${unsafeCSS(shared.leftMargin + 'px')};
+        padding: 30px ${unsafeCSS(plugins.shared.rightMargin + 'px')} 10px ${unsafeCSS(plugins.shared.leftMargin + 'px')};
         grid-template-columns: calc(100% / 4) calc(100% / 4) calc(100% / 4) calc(100% / 4);
         grid-gap: 5px;
         border-top: 2px solid #e4002b;
@@ -78,7 +75,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .pageNumber {
         position: absolute;
         top: 0px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #e4002b;
         padding: 3px;
         font-size: 9px;
@@ -89,7 +86,7 @@ export class DePageFooter extends DeesElement {
       .bottomstripe .documentTitle {
         position: absolute;
         top: -18px;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         background: #dddddd;
         padding: 3px;
         font-size: 9px;
@@ -104,26 +101,26 @@ export class DePageFooter extends DeesElement {
     return html`
       <div class="bottomstripe">
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'address', 'Address')}:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'address', '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.country}
         </div>
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'registrationInfo', 'Registration Info')}:</strong><br />
           Amtsgericht Bremen<br />
           <i>reg-#:</i> HRB 35230 HB<br />
           <i>vat-id:</i> ${this.letterData.from.vatId}
         </div>
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', 'Contact Info')}:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'contactInfo', '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}
         </div>
         <div>
-          <strong>${shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', 'Bank Connection')}:</strong><br />
+          <strong>${plugins.shared.translation.translate(this.documentSettings.languageCode, 'bankConnection', '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 />
diff --git a/ts_web/elements/pageheader.ts b/ts_web/elements/pageheader.ts
index b4ddba3..fe35ef3 100644
--- a/ts_web/elements/pageheader.ts
+++ b/ts_web/elements/pageheader.ts
@@ -10,10 +10,7 @@ import {
   domtools
 } from '@design.estate/dees-element';
 
-import * as interfaces from '../../ts/interfaces/index.js';
-
-import * as shared from '../../ts/shared/index.js';
-import * as tsclass from '@tsclass/tsclass';
+import * as plugins from '../plugins.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -30,13 +27,13 @@ export class DePageHeader extends DeesElement {
   @property({
     type: Object,
   })
-  public letterData: tsclass.business.ILetter = null;
+  public letterData: plugins.tsclass.business.ILetter = null;
 
   @property({
     type: Object,
     reflect: true,
   })
-  documentSettings: interfaces.IDocumentSettings;
+  documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   @property({
     type: Number,
@@ -76,7 +73,7 @@ export class DePageHeader extends DeesElement {
         overflow: hidden;
         top: 130px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         height: 20px;
         line-height: 20px;
         color: #333;
@@ -87,7 +84,7 @@ export class DePageHeader extends DeesElement {
         bottom: 10px;
         height: 25px;
         left: auto;
-        right: ${unsafeCSS(shared.rightMargin + 'px')};
+        right: ${unsafeCSS(plugins.shared.rightMargin + 'px')};
         font-family: 'Courier New', Courier, monospace;
       }
       .topstripe .logo img {
diff --git a/ts_web/elements/viewer.demo.ts b/ts_web/elements/viewer.demo.ts
index 8424b17..3876310 100644
--- a/ts_web/elements/viewer.demo.ts
+++ b/ts_web/elements/viewer.demo.ts
@@ -1,6 +1,6 @@
 import { html } from '@design.estate/dees-element';
-import * as shared from '../../ts/shared/index.js';
+import * as plugins from '../plugins.js';
 
 export const demoFunc = () => html`
-  <dedocument-viewer .letterData=${shared.demoLetter} .documentSettings=${shared.demoDocumentSettings}></dedocument-viewer>
+  <dedocument-viewer .letterData=${plugins.shared.demoLetter} .documentSettings=${plugins.shared.demoDocumentSettings}></dedocument-viewer>
 `;
\ No newline at end of file
diff --git a/ts_web/elements/viewer.ts b/ts_web/elements/viewer.ts
index a5efef0..d55bfa8 100644
--- a/ts_web/elements/viewer.ts
+++ b/ts_web/elements/viewer.ts
@@ -1,5 +1,4 @@
 import * as plugins from '../plugins.js';
-import * as interfaces from '../../ts/interfaces/index.js';
 
 import { DeesElement, css, cssManager, customElement, html } from '@design.estate/dees-element';
 import { demoFunc } from './viewer.demo.js';
@@ -18,7 +17,7 @@ export class DeDocumentViewer extends DeesElement {
   // INSTANCE
   public letterData: plugins.tsclass.business.ILetter = null;
 
-  public documentSettings: interfaces.IDocumentSettings;
+  public documentSettings: plugins.shared.interfaces.IDocumentSettings;
 
   public static styles = [
     cssManager.defaultStyles,
diff --git a/ts_web/plugins.ts b/ts_web/plugins.ts
index d214362..87f4cfa 100644
--- 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';
 
diff --git a/ts_web/tspublish.json b/ts_web/tspublish.json
new file mode 100644
index 0000000..504132b
--- /dev/null
+++ b/ts_web/tspublish.json
@@ -0,0 +1,3 @@
+{
+  "order": 3
+}