2.0.56

.gitlab-ci.yml

@@ -12,30 +12,38 @@ stages:
   - release
   - metadata
 
+before_script:
+  - pnpm install -g pnpm
+  - pnpm install -g @shipzone/npmci
+  - npmci npm prepare
+
 # ====================
 # security stage
 # ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
-audit:
+# ====================
+# security stage
+# ====================
+auditProductionDependencies:
   image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
   stage: security
   script:
-    - npmci npm prepare
-    - npmci command npm install --ignore-scripts
-    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high
+     - npmci command npm config set registry https://registry.npmjs.org
+     - npmci command pnpm audit --audit-level=high --prod
   tags:
     - lossless
     - docker
-    - notpriv
+  allow_failure: true
+
+auditDevDependencies:
+  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  stage: security
+  script:
+    - npmci command npm config set registry https://registry.npmjs.org
+    - npmci command pnpm audit --audit-level=high --dev
+  tags:
+    - lossless
+    - docker
+  allow_failure: true
 
 # ====================
 # test stage
@@ -44,28 +52,22 @@ audit:
 testStable:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
     - npmci npm test
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - priv
 
 testBuild:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
-    - npmci command npm run build
+    - npmci npm build
   coverage: /\d+.?\d+?\%\s*coverage/
   tags:
-    - lossless
     - docker
-    - notpriv
 
 release:
   stage: release
@@ -85,11 +87,12 @@ release:
 codequality:
   stage: metadata
   allow_failure: true
+  only:
+    - tags
   script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
     - npmci npm prepare
     - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
   tags:
     - lossless
     - docker
@@ -109,11 +112,9 @@ trigger:
 pages:
   stage: metadata
   script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
+    - npmci node install stable
     - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
   tags:
     - lossless
     - docker

.vscode/launch.json

@@ -2,28 +2,10 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "current file",
-      "type": "node",
+      "command": "npm test",
+      "name": "Run npm test",
       "request": "launch",
-      "args": [
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
+      "type": "node-terminal"
     }
   ]
 }

.vscode/settings.json

@@ -15,7 +15,7 @@
             "properties": {
               "projectType": {
                 "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
               }
             }
           }

license

@@ -1,4 +1,5 @@
 Copyright (c) 2020 Lossless GmbH (hello@lossless.com)
+Copyright (c) 2017 Nathan Friend (ts-keycode-enum)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

npmextra.json

@@ -3,10 +3,10 @@
     "projectType": "npm",
     "module": {
       "githost": "gitlab.com",
-      "gitscope": "designestate",
-      "gitrepo": "dees-csstools",
-      "shortDescription": "tools to simplify complex css structures",
-      "npmPackagename": "@designestate/dees-csstools",
+      "gitscope": "design.estate",
+      "gitrepo": "dees-domtools",
+      "description": "tools to simplify complex css structures",
+      "npmPackagename": "@design.estate/dees-domtools",
       "license": "MIT",
       "projectDomain": "design.estate"
     }

package.json

@@ -1,28 +1,43 @@
 {
-  "name": "@designestate/dees-csstools",
-  "version": "1.0.4",
+  "name": "@design.estate/dees-domtools",
+  "version": "2.0.56",
   "private": false,
   "description": "tools to simplify complex css structures",
   "main": "dist_ts/index.js",
   "typings": "dist_ts/index.d.ts",
+  "type": "module",
   "author": "Lossless GmbH",
   "license": "MIT",
   "scripts": {
     "test": "(tstest test/ --web)",
-    "build": "(tsbuild --web)",
-    "format": "(gitzone format)"
+    "build": "(tsbuild --web --allowimplicitany && tsbundle npm)",
+    "format": "(gitzone format)",
+    "buildDocs": "tsdoc"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.0.22",
-    "@gitzone/tstest": "^1.0.15",
-    "@pushrocks/tapbundle": "^3.0.7",
-    "@types/node": "^10.11.7",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.15.0"
+    "@git.zone/tsbuild": "^2.1.72",
+    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tstest": "^1.0.86",
+    "@push.rocks/tapbundle": "^5.0.15",
+    "@types/node": "^20.11.5"
   },
   "dependencies": {
-    "@pushrocks/smartpromise": "^3.0.6",
-    "lit-element": "^2.3.1"
+    "@api.global/typedrequest": "^3.0.4",
+    "@design.estate/dees-comms": "^1.0.22",
+    "@push.rocks/lik": "^6.0.12",
+    "@push.rocks/smartdelay": "^3.0.5",
+    "@push.rocks/smartjson": "^5.0.10",
+    "@push.rocks/smartmarkdown": "^3.0.3",
+    "@push.rocks/smartpromise": "^4.0.2",
+    "@push.rocks/smartrouter": "^1.0.16",
+    "@push.rocks/smartrx": "^3.0.7",
+    "@push.rocks/smartstate": "^2.0.17",
+    "@push.rocks/smarturl": "^3.0.6",
+    "@push.rocks/webrequest": "^3.0.34",
+    "@push.rocks/websetup": "^3.0.19",
+    "@push.rocks/webstore": "^2.0.13",
+    "lit": "^3.1.1",
+    "sweet-scroll": "^4.0.0"
   },
   "files": [
     "ts/**/*",
@@ -35,5 +50,8 @@
     "cli.js",
     "npmextra.json",
     "readme.md"
+  ],
+  "browserslist": [
+    "last 1 chrome versions"
   ]
 }

readme.md

@@ -1,20 +1,26 @@
-# @designestate/dees-csstools
+# @designestate/dees-domtools
 tools to simplify complex css structures
 
 ## Availabililty and Links
-* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-csstools)
-* [gitlab.com (source)](https://gitlab.com/designestate/dees-csstools)
-* [github.com (source mirror)](https://github.com/designestate/dees-csstools)
-* [docs (typedoc)](https://designestate.gitlab.io/dees-csstools/)
+* [npmjs.org (npm package)](https://www.npmjs.com/package/@designestate/dees-domtools)
+* [gitlab.com (source)](https://gitlab.com/designestate/dees-domtools)
+* [github.com (source mirror)](https://github.com/designestate/dees-domtools)
+* [docs (typedoc)](https://designestate.gitlab.io/dees-domtools/)
 
 ## Status for master
-[![pipeline status](https://gitlab.com/designestate/dees-csstools/badges/master/pipeline.svg)](https://gitlab.com/designestate/dees-csstools/commits/master)
-[![coverage report](https://gitlab.com/designestate/dees-csstools/badges/master/coverage.svg)](https://gitlab.com/designestate/dees-csstools/commits/master)
-[![npm downloads per month](https://img.shields.io/npm/dm/@designestate/dees-csstools.svg)](https://www.npmjs.com/package/@designestate/dees-csstools)
-[![Known Vulnerabilities](https://snyk.io/test/npm/@designestate/dees-csstools/badge.svg)](https://snyk.io/test/npm/@designestate/dees-csstools)
-[![TypeScript](https://img.shields.io/badge/TypeScript->=%203.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
-[![JavaScript Style Guide](https://img.shields.io/badge/code%20style-prettier-ff69b4.svg)](https://prettier.io/)
+
+Status Category | Status Badge
+-- | --
+GitLab Pipelines | [![pipeline status](https://gitlab.com/designestate/dees-domtools/badges/master/pipeline.svg)](https://lossless.cloud)
+GitLab Pipline Test Coverage | [![coverage report](https://gitlab.com/designestate/dees-domtools/badges/master/coverage.svg)](https://lossless.cloud)
+npm | [![npm downloads per month](https://badgen.net/npm/dy/@designestate/dees-domtools)](https://lossless.cloud)
+Snyk | [![Known Vulnerabilities](https://badgen.net/snyk/designestate/dees-domtools)](https://lossless.cloud)
+TypeScript Support | [![TypeScript](https://badgen.net/badge/TypeScript/>=%203.x/blue?icon=typescript)](https://lossless.cloud)
+node Support | [![node](https://img.shields.io/badge/node->=%2010.x.x-blue.svg)](https://nodejs.org/dist/latest-v10.x/docs/api/)
+Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](https://lossless.cloud)
+PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-domtools)](https://lossless.cloud)
+PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-domtools)](https://lossless.cloud)
+BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-domtools)](https://lossless.cloud)
 
 ## Usage
 
@@ -26,7 +32,6 @@ We are always happy for code contributions. If you are not the code contributing
 
 For further information read the linked docs at the top of this readme.
 
-> MIT licensed | **©** [Lossless GmbH](https://lossless.gmbh)
+## Legal
+> MIT licensed | **©** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
-
-[![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)

test/test.browser.ts

@@ -0,0 +1,9 @@
+import { expect, tap } from '@push.rocks/tapbundle';
+import * as domtools from '../ts/index.js';
+
+tap.test('first test', async () => {
+  const domtoolsInstance = await domtools.DomTools.setupDomTools();
+  expect(domtoolsInstance).toBeInstanceOf(domtools.DomTools);
+});
+
+tap.start();

test/test.ts

@@ -1,8 +0,0 @@
-import { expect, tap } from '@pushrocks/tapbundle';
-import * as deesCsstools from '../ts/index';
-
-tap.test('first test', async () => {
-  console.log('hi');
-});
-
-tap.start();

ts/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-domtools',
+  version: '2.0.56',
+  description: 'tools to simplify complex css structures'
+}

ts/csstools.breakpoints.ts

@@ -1,60 +0,0 @@
-export const desktop = 1240;
-export const tablet = 700;
-export const phablet = 500;
-export const phone = 340;
-
-export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
-
-let environment: TEnvironment = 'native';
-
-export const setEnvironment = envArg => {
-  environment = envArg;
-};
-
-export const cssForTablet = (contentArg) => {
-  if (environment === 'native' || environment === 'desktop') {
-    return `
-      @media (max-width: ${tablet}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (environment === 'tablet' || environment === 'phablet' || environment === 'phone') {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};
-
-export const cssForPhablet = (contentArg) => {
-  if (environment === 'native' || environment === 'desktop') {
-    return `
-      @media (max-width: ${phablet}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (environment === 'phablet' || environment === 'phone') {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};
-
-export const cssForPhone = (contentArg) => {
-  if (environment === 'native' || environment === 'desktop') {
-    return `
-      @media (max-width: ${phone}px) {
-        ${contentArg}
-      }
-    `;
-  } else if (environment === 'phone') {
-    return `
-      @media (min-width: 0px) {
-        ${contentArg}
-      }
-    `;
-  }
-};

ts/csstools.elementbasicsetup.ts

@@ -1,14 +0,0 @@
-import { defer } from '@pushrocks/smartpromise';
-
-/**
- * a basic setup for elements
- * makes sure everything is in check
- */
-export const elementBasicSetup = async () => {
-  if (globalThis.deesCssToolsReady) {
-    await globalThis.deesCssToolsReady.promise;
-  } else {
-    globalThis.deesCssToolsReady = defer();
-    globalThis.deesCssToolsReady.resolve();
-  }
-};

ts/csstools.elementbasicstyles.ts

@@ -1,9 +0,0 @@
-import { html } from 'lit-element';
-export const elementBasicStyles = html`
-  <style>
-    * {
-      font-family: 'Roboto', sans-serif;
-      box-sizing: border-box;
-    }
-  </style>
-`;

ts/domtools.classes.domtools.ts

@@ -0,0 +1,185 @@
+import * as plugins from './domtools.plugins.js';
+import { type TViewport } from './domtools.css.breakpoints.js';
+import { Scroller } from './domtools.classes.scroller.js';
+import { WebSetup } from '@push.rocks/websetup';
+import { ThemeManager } from './domtools.classes.thememanager.js';
+import { Keyboard } from './domtools.classes.keyboard.js';
+
+export interface IDomToolsState {
+  virtualViewport: TViewport;
+  jwt: string;
+}
+
+export interface IDomToolsContructorOptions {
+  ignoreGlobal?: boolean;
+}
+
+export class DomTools {
+  // ======
+  // STATIC
+  // ======
+  /**
+   * setups domtools
+   */
+  public static async setupDomTools(optionsArg: IDomToolsContructorOptions = {}) {
+    let domToolsInstance: DomTools;
+    if (!globalThis.deesDomTools && !optionsArg.ignoreGlobal) {
+      globalThis.deesDomTools = new DomTools(optionsArg);
+      domToolsInstance = globalThis.deesDomTools;
+
+      // lets make sure the dom is ready
+      const readyStateChangedFunc = () => {
+        if (document.readyState === 'interactive' || document.readyState === 'complete') {
+          domToolsInstance.elements.headElement = document.querySelector('head');
+          domToolsInstance.elements.bodyElement = document.querySelector('body');
+          domToolsInstance.domReady.resolve();
+        }
+      };
+      document.addEventListener('readystatechange', readyStateChangedFunc);
+      domToolsInstance.domToolsReady.resolve();
+    } else if (optionsArg.ignoreGlobal) {
+      domToolsInstance = new DomTools(optionsArg);
+    } else {
+      domToolsInstance = globalThis.deesDomTools;
+    }
+    await domToolsInstance.domToolsReady.promise;
+    return domToolsInstance;
+  }
+
+  /**
+   * if you can, use the static asysnc .setupDomTools() function instead since it is safer to use.
+   */
+  public static getGlobalDomToolsSync(): DomTools {
+    const globalDomTools: DomTools = globalThis.deesDomTools;
+    if (!globalDomTools) {
+      throw new Error('You tried to access domtools synchronously too early');
+    }
+    return globalThis.deesDomTools;
+  }
+
+  // ========
+  // INSTANCE
+  // ========
+  // elements
+  public elements: {
+    headElement: HTMLElement;
+    bodyElement: HTMLElement;
+  } = {
+    headElement: null,
+    bodyElement: null,
+  };
+
+  public websetup: WebSetup = new WebSetup({
+    metaObject: {
+      title: 'loading...',
+    },
+  });
+
+  public smartstate = new plugins.smartstate.Smartstate();
+  public domToolsStatePart = this.smartstate.getStatePart<IDomToolsState>('domtools', {
+    virtualViewport: 'native',
+    jwt: null,
+  });
+
+  public router = new plugins.smartrouter.SmartRouter({
+    debug: false,
+  });
+
+  public convenience = {
+    typedrequest: plugins.typedrequest,
+    smartdelay: plugins.smartdelay,
+    smartjson: plugins.smartjson,
+    smarturl: plugins.smarturl,
+  };
+
+  public deesComms = new plugins.deesComms.DeesComms();
+  public scroller = new plugins.SweetScroll({
+    /* some options */
+  }); // TODO: switch to scroller class
+  public themeManager = new ThemeManager(this);
+  public keyboard = new Keyboard(document.body);
+
+  public domToolsReady = plugins.smartpromise.defer();
+  public domReady = plugins.smartpromise.defer();
+  public globalStylesReady = plugins.smartpromise.defer();
+
+  constructor(optionsArg: IDomToolsContructorOptions) {}
+
+  private runOnceTrackerStringMap = new plugins.lik.Stringmap();
+  private runOnceResultMap = new plugins.lik.FastMap();
+
+  /**
+   * run a function once and always get the Promise of the first execution
+   * @param identifierArg the indentifier arg identifies functions. functions with the same identifier are considered equal
+   * @param funcArg the actual func arg to run
+   */
+  public async runOnce<T>(identifierArg: string, funcArg: () => Promise<T>) {
+    const runningId = `${identifierArg}+runningCheck`;
+    if (!this.runOnceTrackerStringMap.checkString(identifierArg)) {
+      this.runOnceTrackerStringMap.addString(identifierArg);
+      this.runOnceTrackerStringMap.addString(runningId);
+      const result = await funcArg();
+      this.runOnceResultMap.addToMap(identifierArg, result);
+      this.runOnceTrackerStringMap.removeString(runningId);
+    }
+    return await this.runOnceTrackerStringMap.registerUntilTrue(
+      (stringMap) => {
+        return !stringMap.includes(runningId);
+      },
+      () => {
+        return this.runOnceResultMap.getByKey(identifierArg);
+      }
+    );
+  }
+
+  // setStuff
+  /**
+   * allows to set global styles
+   * @param stylesText the css text you want to set
+   */
+  public async setGlobalStyles(stylesText: string) {
+    await this.domReady.promise;
+    const styleElement = document.createElement('style');
+    styleElement.type = 'text/css';
+    styleElement.appendChild(document.createTextNode(stylesText));
+    this.elements.headElement.appendChild(styleElement);
+  }
+
+  /**
+   * allows to set global styles
+   * @param stylesText the css text you want to set
+   */
+  public async setExternalScript(scriptLinkArg: string) {
+    await this.domReady.promise;
+    const done = plugins.smartpromise.defer();
+    const script = document.createElement('script');
+    script.src = scriptLinkArg;
+    script.addEventListener('load', function () {
+      done.resolve();
+    });
+    const parentNode = document.head || document.body;
+    parentNode.append(script);
+    await done.promise;
+  }
+
+  /**
+   * allows setting external css files
+   * @param cssLinkArg a url to an external stylesheet
+   */
+  public async setExternalCss(cssLinkArg: string) {
+    const cssTag = document.createElement('link');
+    cssTag.rel = 'stylesheet';
+    cssTag.crossOrigin = 'anonymous';
+    cssTag.href = cssLinkArg;
+    document.head.append(cssTag);
+  }
+
+  /**
+   * allows setting of website infos
+   * @param optionsArg the website info
+   */
+  public async setWebsiteInfo(optionsArg: plugins.websetup.IWebSetupConstructorOptions) {
+    await this.websetup.setup(optionsArg);
+    await this.websetup.readyPromise;
+  }
+}

ts/domtools.classes.keyboard.ts

@@ -0,0 +1,213 @@
+import * as plugins from './domtools.plugins.js';
+
+export enum Key {
+  Backspace = 8,
+  Tab = 9,
+  Enter = 13,
+  Shift = 16,
+  Ctrl = 17,
+  Alt = 18,
+  PauseBreak = 19,
+  CapsLock = 20,
+  Escape = 27,
+  Space = 32,
+  PageUp = 33,
+  PageDown = 34,
+  End = 35,
+  Home = 36,
+
+  LeftArrow = 37,
+  UpArrow = 38,
+  RightArrow = 39,
+  DownArrow = 40,
+
+  Insert = 45,
+  Delete = 46,
+
+  Zero = 48,
+  ClosedParen = Zero,
+  One = 49,
+  ExclamationMark = One,
+  Two = 50,
+  AtSign = Two,
+  Three = 51,
+  PoundSign = Three,
+  Hash = PoundSign,
+  Four = 52,
+  DollarSign = Four,
+  Five = 53,
+  PercentSign = Five,
+  Six = 54,
+  Caret = Six,
+  Hat = Caret,
+  Seven = 55,
+  Ampersand = Seven,
+  Eight = 56,
+  Star = Eight,
+  Asterik = Star,
+  Nine = 57,
+  OpenParen = Nine,
+
+  A = 65,
+  B = 66,
+  C = 67,
+  D = 68,
+  E = 69,
+  F = 70,
+  G = 71,
+  H = 72,
+  I = 73,
+  J = 74,
+  K = 75,
+  L = 76,
+  M = 77,
+  N = 78,
+  O = 79,
+  P = 80,
+  Q = 81,
+  R = 82,
+  S = 83,
+  T = 84,
+  U = 85,
+  V = 86,
+  W = 87,
+  X = 88,
+  Y = 89,
+  Z = 90,
+
+  LeftWindowKey = 91,
+  RightWindowKey = 92,
+  SelectKey = 93,
+
+  Numpad0 = 96,
+  Numpad1 = 97,
+  Numpad2 = 98,
+  Numpad3 = 99,
+  Numpad4 = 100,
+  Numpad5 = 101,
+  Numpad6 = 102,
+  Numpad7 = 103,
+  Numpad8 = 104,
+  Numpad9 = 105,
+
+  Multiply = 106,
+  Add = 107,
+  Subtract = 109,
+  DecimalPoint = 110,
+  Divide = 111,
+
+  F1 = 112,
+  F2 = 113,
+  F3 = 114,
+  F4 = 115,
+  F5 = 116,
+  F6 = 117,
+  F7 = 118,
+  F8 = 119,
+  F9 = 120,
+  F10 = 121,
+  F11 = 122,
+  F12 = 123,
+
+  NumLock = 144,
+  ScrollLock = 145,
+
+  SemiColon = 186,
+  Equals = 187,
+  Comma = 188,
+  Dash = 189,
+  Period = 190,
+  UnderScore = Dash,
+  PlusSign = Equals,
+  ForwardSlash = 191,
+  Tilde = 192,
+  GraveAccent = Tilde,
+
+  OpenBracket = 219,
+  ClosedBracket = 221,
+  Quote = 222,
+}
+
+export class Keyboard {
+  private mapCombosToHandlers = new Map<number[], plugins.smartrx.rxjs.Subject<KeyboardEvent>>();
+  private pressedKeys = new Set<Key>();
+
+  constructor(private domNode: Element | Document) {
+    this.startListening();
+  }
+
+  public keyEnum = Key;
+
+  public on(keys: Key[]) {
+    const subject = new plugins.smartrx.rxjs.Subject<KeyboardEvent>();
+    this.registerKeys(keys, subject);
+    return subject;
+  }
+
+  public triggerKeyPress(keysArg: Key[]) {
+    for (const key of keysArg) {
+      this.pressedKeys.add(key);
+    }
+    this.checkMatchingKeyboardSubjects();
+    for (const key of keysArg) {
+      this.pressedKeys.delete(key);
+    }
+  }
+
+  public startListening() {
+    this.domNode.addEventListener('keydown', this.handleKeyDown);
+    this.domNode.addEventListener('keyup', this.handleKeyUp);
+  }
+
+  public stopListening() {
+    this.domNode.removeEventListener('keydown', this.handleKeyDown);
+    this.domNode.removeEventListener('keyup', this.handleKeyUp);
+  }
+
+  public clear() {
+    this.stopListening();
+    this.mapCombosToHandlers.clear();
+    this.pressedKeys.clear();
+  }
+
+  private handleKeyDown = (event: KeyboardEvent) => {
+    this.pressedKeys.add(event.keyCode);
+    this.checkMatchingKeyboardSubjects(event);
+  };
+
+  private checkMatchingKeyboardSubjects(payloadArg?) {
+    this.mapCombosToHandlers.forEach((subjectArg, keysArg) => {
+      if (this.areAllKeysPressed(keysArg)) {
+        subjectArg.next(payloadArg);
+      }
+    });
+  }
+
+  private handleKeyUp = (event: KeyboardEvent) => {
+    this.pressedKeys.delete(event.keyCode);
+  };
+
+  private areAllKeysPressed(keysArg: Key[]) {
+    let result = true;
+
+    keysArg.forEach((key) => {
+      if (!this.pressedKeys.has(key)) {
+        result = false;
+      }
+    });
+
+    return result;
+  }
+
+  private registerKeys(
+    keysArg: Array<Key>,
+    subjectArg: plugins.smartrx.rxjs.Subject<KeyboardEvent>
+  ) {
+    if (!this.mapCombosToHandlers.has(keysArg)) {
+      this.mapCombosToHandlers.set(keysArg, subjectArg);
+    } else {
+      const subject = this.mapCombosToHandlers.get(keysArg);
+      return subject;
+    }
+  }
+}

ts/domtools.classes.scroller.ts

@@ -0,0 +1,5 @@
+import * as plugins from './domtools.plugins.js';
+
+export class Scroller {
+  // TODO: move sweet scroll over to here;
+}

ts/domtools.classes.thememanager.ts

@@ -0,0 +1,54 @@
+import { DomTools } from './domtools.classes.domtools.js';
+import * as plugins from './domtools.plugins.js';
+
+export class ThemeManager {
+  public domtoolsRef: DomTools;
+
+  public goBrightBoolean = false;
+  public preferredColorSchemeMediaMatch = window.matchMedia('(prefers-color-scheme: light)');
+
+  public themeObservable = new plugins.smartrx.rxjs.ReplaySubject<boolean>(1);
+
+  constructor(domtoolsRefArg: DomTools) {
+    this.domtoolsRef = domtoolsRefArg;
+
+    // lets care
+    this.goBrightBoolean = this.preferredColorSchemeMediaMatch.matches;
+    this.preferredColorSchemeMediaMatch.addEventListener('change', (eventArg) => {
+      this.goBrightBoolean = eventArg.matches;
+      this.updateAllConnectedElements();
+    });
+    this.updateAllConnectedElements();
+  }
+
+  private async updateAllConnectedElements() {
+    if (document.body && document.body.style) {
+      document.body.style.background = this.goBrightBoolean ? '#fff' : '#000';
+    }
+    this.themeObservable.next(this.goBrightBoolean);
+  }
+
+  /**
+   * set the theme of the website to bright
+   */
+  public goBright() {
+    this.goBrightBoolean = true;
+    this.updateAllConnectedElements();
+  }
+
+  /**
+   * set the theme of the website to dark
+   */
+  public goDark() {
+    this.goBrightBoolean = false;
+    this.updateAllConnectedElements();
+  }
+
+  /**
+   * simply toggle between bright and dark
+   */
+  public toggleDarkBright() {
+    this.goBrightBoolean = !this.goBrightBoolean;
+    this.updateAllConnectedElements();
+  }
+}

ts/domtools.colors.ts

@@ -0,0 +1,6 @@
+export interface IDeesColorSet {
+  primaryAccent: string;
+  secondaryAccent: string;
+  primaryBackground: string;
+  secondaryBackground: string;
+}

ts/domtools.css.basestyles.ts

@@ -0,0 +1,41 @@
+import { DomTools } from './domtools.classes.domtools.js';
+
+import { css, unsafeCSS } from 'lit';
+
+/**
+ * changes scrollbar styles to be consistent across OS borders
+ */
+export const scrollBarStyles: string = (() => {
+  const returnStylesOld = navigator.userAgent.indexOf('Mac OS X') === -1 ? css``.cssText : ``;
+  const returnStyles = css`
+    /* width */
+    ::-webkit-scrollbar {
+      width: 0px;
+    }
+    body {
+      scrollbar-width: none;
+    }
+  `.cssText;
+  return returnStyles;
+})();
+
+export const globalBaseStyles: string = css`
+  /*
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2)
+      format('woff2');
+  } */
+
+  /* global body styles */
+  body {
+    margin: 0px;
+    font-family: 'Roboto', 'Inter', sans-serif;
+    box-sizing: border-box;
+  }
+
+  /* scroll bar styles */
+  ${unsafeCSS(scrollBarStyles)}
+`.cssText;

ts/domtools.css.breakpoints.ts

@@ -0,0 +1,66 @@
+import { DomTools } from './domtools.classes.domtools.js';
+
+import { CSSResult, unsafeCSS } from 'lit';
+
+export const desktop = 1600;
+export const notebook = 1240;
+export const tablet = 1024;
+export const phablet = 600;
+export const phone = 400;
+
+export type TViewport = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+
+export const cssForDesktop = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+    @media (min-width: ${desktop}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForNotebook = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${notebook}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForTablet = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${tablet}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${tablet}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForPhablet = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${phablet}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${phablet}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};
+
+export const cssForPhone = (cssArg: CSSResult) => {
+  return unsafeCSS(`
+    @container wccToolsViewport (max-width: ${phone}px) {
+      ${cssArg.cssText}
+    }
+    @media (max-width: ${phone}px) {
+      ${cssArg.cssText}
+    }
+  `);
+};

ts/domtools.css.ts

@@ -0,0 +1,9 @@
+export const cssGridColumns = (amountOfColumnsArg: number, gapSizeArg: number) => {
+  let returnString = ``;
+  for (let i = 0; i < amountOfColumnsArg; i++) {
+    returnString += ` calc((100%/${amountOfColumnsArg}) - (${
+      gapSizeArg * (amountOfColumnsArg - 1)
+    }px/${amountOfColumnsArg}))`;
+  }
+  return returnString;
+};

ts/domtools.elementbasic.ts

@@ -0,0 +1,59 @@
+import * as plugins from './domtools.plugins.js';
+import { DomTools, type IDomToolsContructorOptions } from './domtools.classes.domtools.js';
+import { scrollBarStyles, globalBaseStyles } from './domtools.css.basestyles.js';
+
+import { html, LitElement, css, unsafeCSS } from 'lit';
+
+export const staticStyles = css`
+  * {
+    transition: background 0.1s, color 0.1s;
+    box-sizing: border-box;
+  }
+
+  :host {
+    box-sizing: border-box;
+    font-family: 'Roboto', 'Inter', sans-serif;
+  }
+
+  ${unsafeCSS(scrollBarStyles)}
+`;
+
+/**
+ * styles to be included in every webcomponent
+ */
+export const styles = html`
+  <style>
+    * {
+      transition: background 0.1s, color 0.1s;
+      box-sizing: border-box;
+    }
+
+    :host {
+      font-family: 'Roboto', 'Inter', sans-serif;
+    }
+
+    ${scrollBarStyles}
+  </style>
+`;
+
+/**
+ * a basic setup for elements
+ * makes sure everything is in check
+ */
+export const setup = async (
+  elementArg?: LitElement,
+  optionsArg: IDomToolsContructorOptions = {}
+): Promise<DomTools> => {
+  const domTools = await DomTools.setupDomTools(optionsArg);
+
+  if (elementArg) {
+    // lets do something with the element
+    // not used right now
+  }
+
+  domTools.runOnce('elementBasicSetup', async () => {
+    // bodyStyles
+    domTools.setGlobalStyles(globalBaseStyles);
+  });
+  return domTools;
+};

ts/domtools.plugins.ts

@@ -0,0 +1,52 @@
+// designestate scope
+import * as deesComms from '@design.estate/dees-comms';
+
+export { deesComms };
+
+// apiglobal scope
+import * as typedrequest from '@api.global/typedrequest';
+
+export { typedrequest };
+
+// pushrocks scope
+import * as smartdelay from '@push.rocks/smartdelay';
+import * as smartjson from '@push.rocks/smartjson';
+import * as smartmarkdown from '@push.rocks/smartmarkdown';
+import * as smartpromise from '@push.rocks/smartpromise';
+import * as smartrouter from '@push.rocks/smartrouter';
+import * as smartrx from '@push.rocks/smartrx';
+import * as smartstate from '@push.rocks/smartstate';
+import * as smarturl from '@push.rocks/smarturl';
+import * as webrequest from '@push.rocks/webrequest';
+import * as websetup from '@push.rocks/websetup';
+import * as webstore from '@push.rocks/webstore';
+
+// subscope lik
+import { ObjectMap } from '@push.rocks/lik/dist_ts/lik.objectmap.js';
+import { Stringmap } from '@push.rocks/lik/dist_ts/lik.stringmap.js';
+import { FastMap } from '@push.rocks/lik/dist_ts/lik.fastmap.js';
+const lik = {
+  ObjectMap,
+  Stringmap,
+  FastMap,
+};
+
+export {
+  lik,
+  smartdelay,
+  smartjson,
+  smartmarkdown,
+  smartpromise,
+  smartrouter,
+  smartrx,
+  smarturl,
+  smartstate,
+  webrequest,
+  websetup,
+  webstore,
+};
+
+// third party scope
+import SweetScroll from 'sweet-scroll';
+
+export { SweetScroll };

ts/index.ts

@@ -1,8 +1,30 @@
-export * from './csstools.elementbasicsetup';
-export * from './csstools.elementbasicstyles';
+export * from './domtools.colors.js';
 
-import * as breakpoints from './csstools.breakpoints';
+import * as elementBasic from './domtools.elementbasic.js';
+import * as breakpoints from './domtools.css.breakpoints.js';
+import * as css from './domtools.css.js';
 
-export {
-  breakpoints
+export { css, breakpoints, elementBasic };
+export { DomTools, type IDomToolsContructorOptions } from './domtools.classes.domtools.js';
+export { TypedRequest } from '@api.global/typedrequest';
+export { type IWebSetupConstructorOptions } from '@push.rocks/websetup';
+
+import * as allPlugins from './domtools.plugins.js';
+
+export const plugins = {
+  smartdelay: allPlugins.smartdelay,
+  smartmarkdown: allPlugins.smartmarkdown,
+  smartpromise: allPlugins.smartpromise,
+  SweetScroll: allPlugins.SweetScroll,
+  smartstate: allPlugins.smartstate,
+  smartrx: allPlugins.smartrx,
+  smarturl: allPlugins.smarturl,
+  typedrequest: allPlugins.typedrequest,
 };
+
+// type exports
+import type { rxjs } from '@push.rocks/smartrx';
+
+export type {
+  rxjs,
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+  }
+}

tslint.json

@@ -1,17 +0,0 @@
-{
-  "extends": ["tslint:latest", "tslint-config-prettier"],
-  "rules": {
-    "semicolon": [true, "always"],
-    "no-console": false,
-    "ordered-imports": false,
-    "object-literal-sort-keys": false,
-    "member-ordering": {
-      "options":{
-        "order": [
-          "static-method"
-        ]
-      }
-    }
-  },
-  "defaultSeverity": "warning"
-}