tungsten 0.5.1 → 0.5.2

package/dist/update/integrateUpdateVdom.js

@@ -80,7 +80,7 @@ function debug(...texts) {
   //console.log(...texts)
   //console.log(getStackTrace().split('\n')[2])
 }
-const timing = false; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion
+const timing = false;
 // need to be adapted to work for func components?
 export async function integrateElementUpdateVdom(element, newContent) {
   let startTime = 0;
@@ -585,7 +585,7 @@ function moveDomNode(domNode, domPointer) {
   // is not a child at all (indexOf -1), or index is past the end (undefined).
   // one live-NodeList read, reused as the insertBefore reference below -- see
   // DomPointer.insert() for why these reads are worth counting
-  const reference = domPointer.parent.childNodes[domPointer.index]; // eslint-disable-line @typescript-eslint/no-unsafe-type-assertion -- indexing past the end gives undefined, which the DOM types do not model
+  const reference = domPointer.parent.childNodes[domPointer.index];
   if (reference !== domNode) {
     //console.log('document.activeElement', document.activeElement, domNode ==  document.activeElement,  domNode ===  document.activeElement)
     const ownerDocument = domNode.ownerDocument;

package/dist/zones/react.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/zones/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAoB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC3E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,IAC7C,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAC3B,CAAC,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAA;AAEvC,KAAK,aAAa,GAAG;IACjB,MAAM,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IAC/B,OAAO,IAAI,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;AAE7F,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE;QACH,SAAS,EAAE,GAAG,CAAA;QACd,aAAa,EAAE,kBAAkB,CAAA;KACpC,CAAA;IACD,MAAM,EAAE;QACJ,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,aAAa,CAAA;QACxC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,aAAa,CAAA;KAC/D,CAAA;IACD,MAAM,EAAE;QACJ,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAA;KAC5C,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,IAAI;IAC/C,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACpC,KAAK,EAAE,KAAK,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,EAAE,gBAAgB,CAAA;CAC5B,CAAA;AAED,qBAAa,SAAS,CAAC,KAAK,SAAS,MAAM,CAAE,SAAQ,uBAAuB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/F,OAAO,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAqC;IAChF,SAAS,EAAE,aAAa,GAAG,SAAS,CAAA;IACpC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAA;IAClD,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,SAAS,UAAQ;IAEjB,OAAO,QAAa,OAAO,CAAC,WAAW,CAAC,CAsBvC;IAED,iBAAiB,QAAO,IAAI,CAG3B;IAED,kBAAkB,QAAO,IAAI,CAE5B;IAED,oBAAoB,QAAO,IAAI,CAM9B;IAED,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,WAAW;CAOtB"}
+{"version":3,"file":"react.d.ts","sourceRoot":"","sources":["../../src/zones/react.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,uBAAuB,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAwB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAA;AAC/E,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AAC9C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGpD,MAAM,MAAM,kBAAkB,CAAC,KAAK,SAAS,MAAM,IAC7C,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,OAAO,CAAC,GAC3B,CAAC,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,OAAO,CAAC,CAAA;AAEvC,KAAK,aAAa,GAAG;IACjB,MAAM,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI,CAAA;IAC/B,OAAO,IAAI,IAAI,CAAA;CAClB,CAAA;AAED,KAAK,kBAAkB,GAAG,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,GAAG,QAAQ,EAAE,OAAO,EAAE,KAAK,OAAO,CAAA;AAE7F,MAAM,MAAM,gBAAgB,GAAG;IAC3B,KAAK,EAAE;QACH,SAAS,EAAE,GAAG,CAAA;QACd,aAAa,EAAE,kBAAkB,CAAA;KACpC,CAAA;IACD,MAAM,EAAE;QACJ,UAAU,CAAC,IAAI,EAAE,OAAO,GAAG,aAAa,CAAA;QACxC,WAAW,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,GAAG,aAAa,CAAA;KAC/D,CAAA;IACD,MAAM,EAAE;QACJ,cAAc,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAAA;KAC5C,CAAA;CACJ,CAAA;AAED,MAAM,MAAM,cAAc,CAAC,KAAK,SAAS,MAAM,IAAI;IAC/C,SAAS,EAAE,kBAAkB,CAAC,KAAK,CAAC,CAAA;IACpC,KAAK,EAAE,KAAK,CAAA;IACZ,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,QAAQ,CAAA;IACjB,OAAO,EAAE,gBAAgB,CAAA;CAC5B,CAAA;AAED,qBAAa,SAAS,CAAC,KAAK,SAAS,MAAM,CAAE,SAAQ,uBAAuB,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC;IAC/F,OAAO,EAAE,kBAAkB,CAAC,cAAc,CAAC,CAAyC;IACpF,SAAS,EAAE,aAAa,GAAG,SAAS,CAAA;IACpC,kBAAkB,EAAE,kBAAkB,GAAG,SAAS,CAAA;IAClD,aAAa,EAAE,OAAO,GAAG,SAAS,CAAA;IAClC,SAAS,UAAQ;IAEjB,OAAO,QAAa,OAAO,CAAC,WAAW,CAAC,CAsBvC;IAED,iBAAiB,QAAO,IAAI,CAG3B;IAED,kBAAkB,QAAO,IAAI,CAE5B;IAED,oBAAoB,QAAO,IAAI,CAM9B;IAED,OAAO,CAAC,UAAU;IAyBlB,OAAO,CAAC,mBAAmB;IA2B3B,OAAO,CAAC,eAAe;IAWvB,OAAO,CAAC,eAAe;IAQvB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,WAAW;CAOtB"}

package/dist/zones/react.js

@@ -2,13 +2,13 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import { TungstenSimpleComponent } from "../Components.js";
-import { createElementRef } from '../createRef.js';
+import { createHtmlElementRef } from '../createRef.js';
 import { isServer } from '../isServer.js';
 import { jsx as _jsx } from "tungsten/jsx-runtime";
 export class ReactZone extends TungstenSimpleComponent {
   constructor(...args) {
     super(...args);
-    _defineProperty(this, "hostRef", createElementRef());
+    _defineProperty(this, "hostRef", createHtmlElementRef());
     _defineProperty(this, "reactRoot", void 0);
     _defineProperty(this, "reactCreateElement", void 0);
     _defineProperty(this, "errorBoundary", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tungsten",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "",
   "type": "module",
   "bin": {
@@ -72,7 +72,8 @@
   "devDependencies": {
     "@babel/cli": "^7.29.7",
     "@babel/generator": "^7.29.1",
-    "@stylistic/eslint-plugin": "^3.1.0",
+    "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@types/babel-types": "^7.0.16",
     "@types/babel__generator": "^7.27.0",
     "@types/chai": "^4.3.20",
@@ -80,24 +81,20 @@
     "@types/react": "19.1.9",
     "@types/react-dom": "19.1.7",
     "@types/serialize-javascript": "^5.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.69.0",
-    "@typescript-eslint/parser": "^8.69.0",
     "babel-plugin-replace-import-extension": "^1.1.5",
     "babel-plugin-sxy-transform-import-extensions": "^1.0.5",
     "babel-plugin-transform-import-extension": "^1.0.3",
     "chai": "^4.5.0",
     "cross-env": "^7.0.3",
-    "eslint": "^8.57.1",
-    "eslint-import-resolver-typescript": "^2.7.1",
-    "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-no-type-assertion": "^1.3.0",
-    "eslint-plugin-unused-imports": "^3.2.0",
+    "eslint": "^10.10.0",
+    "eslint-plugin-unused-imports": "^4.4.1",
     "happy-dom": "^20.11.1",
     "npm-run-all": "^4.1.5",
     "rimraf": "^5.0.10",
     "rollup-plugin-visualizer": "^5.14.0",
     "sxy-test-runner": "^2.4.9",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.70.0"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",

package/types/env.d.ts

@@ -1,11 +1,11 @@
-
-/* eslint-disable no-var */
-
-
-
-// declare global {
-//     var tungstenPrivateEnv: TungstenPrivateEnv | undefined
-//     var tungstenPublicEnv: TungstenPublicEnv | undefined
-// }
-
-export {}
+
+ 
+
+
+
+// declare global {
+//     var tungstenPrivateEnv: TungstenPrivateEnv | undefined
+//     var tungstenPublicEnv: TungstenPublicEnv | undefined
+// }
+
+export {}

package/types/index.d.ts

@@ -1,11 +1,15 @@
 
-/* eslint-disable no-var */
+ 
 
 // the stylesheet module declarations live in a script file: this one is a module, and a
 // `declare module '*.css'` here would augment the app's own '*.css' declaration, which cannot add exports.
 // A reference, as an import of a script file is refused
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./assets.d.ts" />
+// The global JSX namespace, declared on purpose: it otherwise reached apps only through the
+// Bindable components' declaration files happening to import from jsx.d.ts
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="./jsx/jsx.d.ts" />
 // Disposable and Symbol.dispose appear in the shipped types (component using(), browser storage), and in
 // TS 6 that lib comes only with ESNext - so bring it in here rather than require it of every app's lib list
 /// <reference lib="esnext.disposable" />
@@ -34,14 +38,14 @@ declare global {
 //// Apps fill these by declaration merging in their env module: `interface TungstenPrivateEnv extends PrivateEnv {}`.
 //// Empty here on purpose: a base that extended the core env types would collide with an app whose schema
 //// makes a core field required (TS2320). Tungsten's own reads of the core fields come from src/env/Interfaces.ts
-/* eslint-disable @typescript-eslint/no-empty-object-type */
+ 
 declare global {
     interface TungstenPrivateEnv {}
     interface TungstenPublicEnv {}
     var tungstenPrivateEnv: TungstenPrivateEnv
     var tungstenPublicEnv: TungstenPublicEnv
 }
-/* eslint-enable @typescript-eslint/no-empty-object-type */
+ 
 
 //// In dev, cjsHelpers.ts installs a partial `process` on the browser global so that converted
 //// CommonJS packages can read process.env.NODE_ENV. It flags itself with __tungstenCjsShim so

package/types/jsx/html.d.ts

@@ -7,7 +7,7 @@ import type { TrustedHTML } from './html.global.js'
 import type { Booleanish } from './html.values.js'
 import type { 
     AnimationEventHandler, ButtonMouseEvent, ChangeEventHandler, ClipboardEventHandler, CompositionEventHandler,
-    DragEventHandler, ExtendedKeyboardEvent, ExtendedMouseEvent, ExtendedUIEvent, FocusEventHandler, FormEventHandler, InputKeyboardEvent, KeyboardEventHandler, MouseEventHandler,
+    DragEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler, MouseEventHandler,
     PointerEventHandler, TungstenEventHandler, SyntheticEvent, TextareaKeyboardEvent, TouchEventHandler, TransitionEventHandler, UIEventHandler,
     WheelEventHandler
 } from './html.events.js'
@@ -524,7 +524,7 @@ type AriaRole =
     | 'treeitem'
     | (string & {})
 
-type ClassNameType = string | undefined | (string | undefined)[];
+type ClassNameType = string | undefined | (string | undefined)[]
 
 export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
     __zoneHtml?: string | undefined;
@@ -610,7 +610,7 @@ export type HTMLAttributeAnchorTarget =
     | '_blank'
     | '_parent'
     | '_top'
-    | (string & {});
+    | (string & {})
 
 type HTMLAttributeReferrerPolicy =
     | ''
@@ -621,7 +621,7 @@ type HTMLAttributeReferrerPolicy =
     | 'same-origin'
     | 'strict-origin'
     | 'strict-origin-when-cross-origin'
-    | 'unsafe-url';
+    | 'unsafe-url'
 
 export interface AnchorHTMLAttributes<T> extends HTMLAttributes<T> {
     download?: any;
@@ -812,7 +812,7 @@ export type HTMLInputTypeAttribute =
     | 'time'
     | 'url'
     | 'week'
-    | (string & {});
+    | (string & {})
 
 // interface InputCheckboxHTMLAttributes<T, BO extends object> extends HTMLAttributes<T> {
 //     accept?: string | undefined;

package/types/jsx/html.events.d.ts

@@ -1,200 +1,202 @@
-
-
-// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
-// Events might be wrong! We are using vanilla events, but type system is used extended/synthetic events from React perhaps?
-
-
-
-//
-// Event System
-// ----------------------------------------------------------------------
-
-import { AbstractView } from './html.values.js'
-
-// TODO: change any to unknown when moving to TS v3
-export interface BaseSyntheticEvent<E = object, C = any, T = any> {
-    nativeEvent: E;
-    currentTarget: C;
-    target: T;
-    bubbles: boolean;
-    cancelable: boolean;
-    defaultPrevented: boolean;
-    eventPhase: number;
-    isTrusted: boolean;
-    preventDefault(): void;
-    isDefaultPrevented(): boolean;
-    stopPropagation(): void;
-    isPropagationStopped(): boolean;
-    persist(): void;
-    timeStamp: number;
-    type: string;
-}
-
-/**
- * currentTarget - a reference to the element on which the event listener is registered.
- *
- * target - a reference to the element from which the event was originally dispatched.
- * This might be a child element to the element on which the event listener is registered.
- * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
- */
-export interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
-
-export interface ExtendedUIEvent<T = Element, E = UIEvent> extends SyntheticEvent<T, E> {
-    detail: number
-    view: AbstractView
-}
-
-export interface ExtendedMouseEvent<T = Element, E = MouseEvent> extends ExtendedUIEvent<T, E> {
-    target: T & EventTarget
-    altKey: boolean
-    button: number
-    buttons: number
-    clientX: number
-    clientY: number
-    ctrlKey: boolean
-    /**
-     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
-     */
-    getModifierState(key: ModifierKey): boolean
-    metaKey: boolean
-    movementX: number
-    movementY: number
-    pageX: number
-    pageY: number
-    relatedTarget: EventTarget | null
-    screenX: number
-    screenY: number
-    shiftKey: boolean
-}
-
-export interface ExtendedClipboardEvent<T = Element> extends SyntheticEvent<T, ClipboardEvent> {
-    clipboardData: DataTransfer
-}
-
-export interface ExtendedCompositionEvent<T = Element> extends SyntheticEvent<T, CompositionEvent> {
-    data: string
-}
-
-export interface ExtendedDragEvent<T = Element> extends ExtendedMouseEvent<T, DragEvent> {
-    dataTransfer: DataTransfer;
-}
-
-export interface ExtendedPointerEvent<T = Element> extends ExtendedMouseEvent<T, PointerEvent> {
-    pointerId: number
-    pressure: number
-    tangentialPressure: number
-    tiltX: number
-    tiltY: number
-    twist: number
-    width: number
-    height: number
-    pointerType: 'mouse' | 'pen' | 'touch';
-    isPrimary: boolean
-}
-
-export interface ExtendedFocusEvent<Target = Element, RelatedTarget = Element> extends SyntheticEvent<Target, FocusEvent> {
-    relatedTarget: (EventTarget & RelatedTarget) | null
-    target: EventTarget & Target;
-}
-
-export interface ExtendedFormEvent<T = Element> extends SyntheticEvent<T> {
-}
-
-// export interface ExtendedInvalidEvent<T = Element> extends SyntheticEvent<T> {
-//     target: EventTarget & T
-// }
-
-export interface ExtendedChangeEvent<T = Element> extends SyntheticEvent<T> {
-    target: EventTarget & T
-}
-
-export type ModifierKey = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock' | 'Hyper' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Super' | 'Symbol' | 'SymbolLock';
-
-export interface ExtendedKeyboardEvent<T = Element> extends ExtendedUIEvent<T, KeyboardEvent> {
-    target: T & EventTarget
-    altKey: boolean
-    /** @deprecated */
-    charCode: number
-    ctrlKey: boolean
-    code: string
-    /**
-     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
-     */
-    getModifierState(key: ModifierKey): boolean
-    /**
-     * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
-     */
-    key: string
-    /** @deprecated */
-    keyCode: number
-    locale: string
-    location: number
-    metaKey: boolean
-    repeat: boolean
-    shiftKey: boolean
-    /** @deprecated */
-    which: number
-}
-
-export interface ExtendedTouchEvent<T = Element> extends ExtendedUIEvent<T, TouchEvent> {
-    altKey: boolean
-    changedTouches: TouchList
-    ctrlKey: boolean
-    /**
-     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
-     */
-    getModifierState(key: ModifierKey): boolean
-    metaKey: boolean
-    shiftKey: boolean
-    targetTouches: TouchList
-    touches: TouchList
-}
-
-export interface ExtendedWheelEvent<T = Element> extends ExtendedMouseEvent<T, WheelEvent> {
-    deltaMode: number
-    deltaX: number
-    deltaY: number
-    deltaZ: number
-}
-
-export interface ExtendedAnimationEvent<T = Element> extends SyntheticEvent<T, AnimationEvent> {
-    animationName: string
-    elapsedTime: number
-    pseudoElement: string
-}
-
-export interface ExtendedTransitionEvent<T = Element> extends SyntheticEvent<T, TransitionEvent> {
-    elapsedTime: number
-    propertyName: string
-    pseudoElement: string
-}
-
-
-
-export type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }['bivarianceHack']
-
-//type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
-
-export type ClipboardEventHandler<T = Element> = EventHandler<ExtendedClipboardEvent<T>>
-export type CompositionEventHandler<T = Element> = EventHandler<ExtendedCompositionEvent<T>>
-export type DragEventHandler<T = Element> = EventHandler<ExtendedDragEvent<T>>
-export type FocusEventHandler<T = Element> = EventHandler<ExtendedFocusEvent<T>>
-export type FormEventHandler<T = Element> = EventHandler<ExtendedFormEvent<T>>
-export type ChangeEventHandler<T = Element> = EventHandler<ExtendedChangeEvent<T>>
-export type KeyboardEventHandler<T = Element> = EventHandler<ExtendedKeyboardEvent<T>>
-export type MouseEventHandler<T = Element> = EventHandler<ExtendedMouseEvent<T>>
-export type TouchEventHandler<T = Element> = EventHandler<ExtendedTouchEvent<T>>
-export type PointerEventHandler<T = Element> = EventHandler<ExtendedPointerEvent<T>>
-export type UIEventHandler<T = Element> = EventHandler<ExtendedUIEvent<T>>
-export type WheelEventHandler<T = Element> = EventHandler<ExtendedWheelEvent<T>>
-export type AnimationEventHandler<T = Element> = EventHandler<ExtendedAnimationEvent<T>>
-export type TransitionEventHandler<T = Element> = EventHandler<ExtendedTransitionEvent<T>>
-
-export type FormEvent = ExtendedFormEvent<HTMLFormElement>
-export type ButtonMouseEvent = ExtendedMouseEvent<HTMLButtonElement>
-export type AnchorMouseEvent = ExtendedMouseEvent<HTMLAnchorElement>
-export type InputKeyboardEvent = ExtendedKeyboardEvent<HTMLInputElement>
-export type TextareaKeyboardEvent = ExtendedKeyboardEvent<HTMLTextAreaElement>
-
-// WHAT IS IT?
-export type TungstenEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
+
+
+// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+// Events might be wrong! We are using vanilla events, but type system is used extended/synthetic events from React perhaps?
+
+
+
+//
+// Event System
+// ----------------------------------------------------------------------
+
+import { AbstractView } from './html.values.js'
+
+// TODO: change any to unknown when moving to TS v3
+export interface BaseSyntheticEvent<E = object, C = any, T = any> {
+    nativeEvent: E;
+    currentTarget: C;
+    target: T;
+    bubbles: boolean;
+    cancelable: boolean;
+    defaultPrevented: boolean;
+    eventPhase: number;
+    isTrusted: boolean;
+    preventDefault(): void;
+    isDefaultPrevented(): boolean;
+    stopPropagation(): void;
+    isPropagationStopped(): boolean;
+    persist(): void;
+    timeStamp: number;
+    type: string;
+}
+
+/**
+ * currentTarget - a reference to the element on which the event listener is registered.
+ *
+ * target - a reference to the element from which the event was originally dispatched.
+ * This might be a child element to the element on which the event listener is registered.
+ * If you thought this should be `EventTarget & T`, see https://github.com/DefinitelyTyped/DefinitelyTyped/issues/11508#issuecomment-256045682
+ */
+export interface SyntheticEvent<T = Element, E = Event> extends BaseSyntheticEvent<E, EventTarget & T, EventTarget> {}
+
+export interface ExtendedUIEvent<T = Element, E = UIEvent> extends SyntheticEvent<T, E> {
+    detail: number
+    view: AbstractView
+}
+
+export interface ExtendedMouseEvent<T = Element, E = MouseEvent> extends ExtendedUIEvent<T, E> {
+    target: T & EventTarget
+    altKey: boolean
+    button: number
+    buttons: number
+    clientX: number
+    clientY: number
+    ctrlKey: boolean
+    /**
+     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+     */
+    getModifierState(key: ModifierKey): boolean
+    metaKey: boolean
+    movementX: number
+    movementY: number
+    pageX: number
+    pageY: number
+    relatedTarget: EventTarget | null
+    screenX: number
+    screenY: number
+    shiftKey: boolean
+}
+
+export interface ExtendedClipboardEvent<T = Element> extends SyntheticEvent<T, ClipboardEvent> {
+    clipboardData: DataTransfer
+}
+
+export interface ExtendedCompositionEvent<T = Element> extends SyntheticEvent<T, CompositionEvent> {
+    data: string
+}
+
+export interface ExtendedDragEvent<T = Element> extends ExtendedMouseEvent<T, DragEvent> {
+    dataTransfer: DataTransfer;
+}
+
+export interface ExtendedPointerEvent<T = Element> extends ExtendedMouseEvent<T, PointerEvent> {
+    pointerId: number
+    pressure: number
+    tangentialPressure: number
+    tiltX: number
+    tiltY: number
+    twist: number
+    width: number
+    height: number
+    pointerType: 'mouse' | 'pen' | 'touch';
+    isPrimary: boolean
+}
+
+export interface ExtendedFocusEvent<Target = Element, RelatedTarget = Element>
+    extends SyntheticEvent<Target, FocusEvent> {
+    relatedTarget: (EventTarget & RelatedTarget) | null
+    target: EventTarget & Target;
+}
+
+export interface ExtendedFormEvent<T = Element> extends SyntheticEvent<T> {
+}
+
+// export interface ExtendedInvalidEvent<T = Element> extends SyntheticEvent<T> {
+//     target: EventTarget & T
+// }
+
+export interface ExtendedChangeEvent<T = Element> extends SyntheticEvent<T> {
+    target: EventTarget & T
+}
+
+export type ModifierKey = 'Alt' | 'AltGraph' | 'CapsLock' | 'Control' | 'Fn' | 'FnLock'
+| 'Hyper' | 'Meta' | 'NumLock' | 'ScrollLock' | 'Shift' | 'Super' | 'Symbol' | 'SymbolLock'
+
+export interface ExtendedKeyboardEvent<T = Element> extends ExtendedUIEvent<T, KeyboardEvent> {
+    target: T & EventTarget
+    altKey: boolean
+    /** @deprecated */
+    charCode: number
+    ctrlKey: boolean
+    code: string
+    /**
+     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+     */
+    getModifierState(key: ModifierKey): boolean
+    /**
+     * See the [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#named-key-attribute-values). for possible values
+     */
+    key: string
+    /** @deprecated */
+    keyCode: number
+    locale: string
+    location: number
+    metaKey: boolean
+    repeat: boolean
+    shiftKey: boolean
+    /** @deprecated */
+    which: number
+}
+
+export interface ExtendedTouchEvent<T = Element> extends ExtendedUIEvent<T, TouchEvent> {
+    altKey: boolean
+    changedTouches: TouchList
+    ctrlKey: boolean
+    /**
+     * See [DOM Level 3 Events spec](https://www.w3.org/TR/uievents-key/#keys-modifier). for a list of valid (case-sensitive) arguments to this method.
+     */
+    getModifierState(key: ModifierKey): boolean
+    metaKey: boolean
+    shiftKey: boolean
+    targetTouches: TouchList
+    touches: TouchList
+}
+
+export interface ExtendedWheelEvent<T = Element> extends ExtendedMouseEvent<T, WheelEvent> {
+    deltaMode: number
+    deltaX: number
+    deltaY: number
+    deltaZ: number
+}
+
+export interface ExtendedAnimationEvent<T = Element> extends SyntheticEvent<T, AnimationEvent> {
+    animationName: string
+    elapsedTime: number
+    pseudoElement: string
+}
+
+export interface ExtendedTransitionEvent<T = Element> extends SyntheticEvent<T, TransitionEvent> {
+    elapsedTime: number
+    propertyName: string
+    pseudoElement: string
+}
+
+
+
+export type EventHandler<E extends SyntheticEvent<any>> = { bivarianceHack(event: E): void }['bivarianceHack']
+
+//type ReactEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
+
+export type ClipboardEventHandler<T = Element> = EventHandler<ExtendedClipboardEvent<T>>
+export type CompositionEventHandler<T = Element> = EventHandler<ExtendedCompositionEvent<T>>
+export type DragEventHandler<T = Element> = EventHandler<ExtendedDragEvent<T>>
+export type FocusEventHandler<T = Element> = EventHandler<ExtendedFocusEvent<T>>
+export type FormEventHandler<T = Element> = EventHandler<ExtendedFormEvent<T>>
+export type ChangeEventHandler<T = Element> = EventHandler<ExtendedChangeEvent<T>>
+export type KeyboardEventHandler<T = Element> = EventHandler<ExtendedKeyboardEvent<T>>
+export type MouseEventHandler<T = Element> = EventHandler<ExtendedMouseEvent<T>>
+export type TouchEventHandler<T = Element> = EventHandler<ExtendedTouchEvent<T>>
+export type PointerEventHandler<T = Element> = EventHandler<ExtendedPointerEvent<T>>
+export type UIEventHandler<T = Element> = EventHandler<ExtendedUIEvent<T>>
+export type WheelEventHandler<T = Element> = EventHandler<ExtendedWheelEvent<T>>
+export type AnimationEventHandler<T = Element> = EventHandler<ExtendedAnimationEvent<T>>
+export type TransitionEventHandler<T = Element> = EventHandler<ExtendedTransitionEvent<T>>
+
+export type FormEvent = ExtendedFormEvent<HTMLFormElement>
+export type ButtonMouseEvent = ExtendedMouseEvent<HTMLButtonElement>
+export type AnchorMouseEvent = ExtendedMouseEvent<HTMLAnchorElement>
+export type InputKeyboardEvent = ExtendedKeyboardEvent<HTMLInputElement>
+export type TextareaKeyboardEvent = ExtendedKeyboardEvent<HTMLTextAreaElement>
+
+// WHAT IS IT?
+export type TungstenEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>