@hypen-space/web 0.4.950 → 0.4.951

package/src/dom/components/index.ts

@@ -5,7 +5,7 @@
  */
 
 export interface ComponentHandler {
-  create(): HTMLElement;
+  create(doc: Document): HTMLElement;
   applyProps?(element: HTMLElement, props: Record<string, any>): void;
 }
 
@@ -34,12 +34,12 @@ export class ComponentRegistry {
   /**
    * Create element for a component type
    */
-  createElement(type: string, props: Record<string, any> = {}): HTMLElement | null {
+  createElement(type: string, props: Record<string, any> = {}, doc: Document = document): HTMLElement | null {
     if (!type) return null;
     const handler = this.get(type);
     if (!handler) return null;
 
-    const element = handler.create();
+    const element = handler.create(doc);
     if (handler.applyProps) {
       handler.applyProps(element, props);
     }

package/src/dom/components/input.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const inputHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("input");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("input");
     el.dataset.hypenType = "input";
     // Reset the default user-agent chrome so `.tw("bg-gray-100 rounded-lg")`
     // on an Input reads the same as any other styled element. Without

package/src/dom/components/link.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const linkHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("a");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("a");
     el.dataset.hypenType = "link";
     return el;
   },

package/src/dom/components/list.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const listHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "column"; // Default to vertical (like Android)
     // Default to flex-start to match Android/iOS behavior

package/src/dom/components/paragraph.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const paragraphHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("p");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("p");
     el.dataset.hypenType = "paragraph";
     return el;
   },

package/src/dom/components/progressbar.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const progressBarHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const wrapper = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const wrapper = doc.createElement("div");
     wrapper.dataset.hypenType = "progressbar";
     wrapper.style.width = "100%";
     wrapper.style.height = "8px";
@@ -14,7 +14,7 @@ export const progressBarHandler: ComponentHandler = {
     wrapper.style.borderRadius = "4px";
     wrapper.style.overflow = "hidden";
 
-    const bar = document.createElement("div");
+    const bar = doc.createElement("div");
     bar.dataset.hypenBar = "true";
     bar.style.height = "100%";
     bar.style.backgroundColor = "#2196F3";

package/src/dom/components/route.ts

@@ -9,8 +9,8 @@ import { frameworkLoggers } from "@hypen-space/core/logger";
 const log = frameworkLoggers.router;
 
 export const routeHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "column";
     el.style.width = "100%";

package/src/dom/components/router.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const routerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "column";
     el.style.width = "100%";

package/src/dom/components/row.ts

@@ -6,13 +6,13 @@
 
 import type { ComponentHandler } from "./index.js";
 
-// Inject global styles for Row with flex/weighted children
-let rowStylesInjected = false;
-function ensureRowStyles(): void {
-  if (rowStylesInjected) return;
-  rowStylesInjected = true;
+// Inject global styles for Row with flex/weighted children (per-document)
+const injectedDocs = new WeakSet<Document>();
+function ensureRowStyles(doc: Document): void {
+  if (injectedDocs.has(doc)) return;
+  injectedDocs.add(doc);
 
-  const style = document.createElement("style");
+  const style = doc.createElement("style");
   style.id = "hypen-row-styles";
   style.textContent = `
     /* Row expands to fill width when it has children with flex/weight */
@@ -21,14 +21,14 @@ function ensureRowStyles(): void {
       width: 100%;
     }
   `;
-  document.head.appendChild(style);
+  doc.head.appendChild(style);
 }
 
 export const rowHandler: ComponentHandler = {
-  create(): HTMLElement {
-    ensureRowStyles();
+  create(doc: Document): HTMLElement {
+    ensureRowStyles(doc);
 
-    const el = document.createElement("div");
+    const el = doc.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "row";
     // Wrap to content by default (match iOS/Android behavior)

package/src/dom/components/select.ts

@@ -5,13 +5,14 @@
 import type { ComponentHandler } from "./index.js";
 
 export const selectHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("select");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("select");
     el.dataset.hypenType = "select";
     return el as any as HTMLElement;
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const doc = el.ownerDocument as Document;
     const select = el as HTMLSelectElement;
 
     // Value property
@@ -36,7 +37,7 @@ export const selectHandler: ComponentHandler = {
       
       // Add new options
       props.options.forEach((opt: any) => {
-        const option = document.createElement("option");
+        const option = doc.createElement("option");
         
         if (typeof opt === "string") {
           option.value = opt;

package/src/dom/components/slider.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const sliderHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("input");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("input");
     el.type = "range";
     el.dataset.hypenType = "slider";
     return el as any as HTMLElement;

package/src/dom/components/spacer.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const spacerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.style.flex = "1";
     el.dataset.hypenType = "spacer";
     return el;

package/src/dom/components/spinner.ts

@@ -5,12 +5,12 @@
 import type { ComponentHandler } from "./index.js";
 
 export const spinnerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const wrapper = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const wrapper = doc.createElement("div");
     wrapper.dataset.hypenType = "spinner";
     wrapper.style.display = "inline-block";
 
-    const spinner = document.createElement("div");
+    const spinner = doc.createElement("div");
     spinner.style.width = "40px";
     spinner.style.height = "40px";
     spinner.style.border = "4px solid #f3f3f3";
@@ -19,7 +19,7 @@ export const spinnerHandler: ComponentHandler = {
     spinner.style.animation = "spin 1s linear infinite";
 
     // Add keyframe animation
-    const style = document.createElement("style");
+    const style = doc.createElement("style");
     style.textContent = `
       @keyframes spin {
         0% { transform: rotate(0deg); }

package/src/dom/components/stack.ts

@@ -4,13 +4,13 @@
 
 import type { ComponentHandler } from "./index.js";
 
-// Inject global styles once
-let stackStylesInjected = false;
-function ensureStackStyles(): void {
-  if (stackStylesInjected) return;
-  stackStylesInjected = true;
+// Inject global styles once per document
+const injectedDocs = new WeakSet<Document>();
+function ensureStackStyles(doc: Document): void {
+  if (injectedDocs.has(doc)) return;
+  injectedDocs.add(doc);
 
-  const style = document.createElement("style");
+  const style = doc.createElement("style");
   style.id = "hypen-stack-styles";
   style.textContent = `
     [data-hypen-type="stack"] {
@@ -29,14 +29,14 @@ function ensureStackStyles(): void {
       /* Don't set justify-self/align-self here - let parent's justify-items/align-items control */
     }
   `;
-  document.head.appendChild(style);
+  doc.head.appendChild(style);
 }
 
 export const stackHandler: ComponentHandler = {
-  create(): HTMLElement {
-    ensureStackStyles();
+  create(doc: Document): HTMLElement {
+    ensureStackStyles(doc);
 
-    const el = document.createElement("div");
+    const el = doc.createElement("div");
     el.dataset.hypenType = "stack";
 
     return el;

package/src/dom/components/switch.ts

@@ -5,15 +5,15 @@
 import type { ComponentHandler } from "./index.js";
 
 export const switchHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const wrapper = document.createElement("label");
+  create(doc: Document): HTMLElement {
+    const wrapper = doc.createElement("label");
     wrapper.dataset.hypenType = "switch";
     wrapper.style.display = "inline-flex";
     wrapper.style.alignItems = "center";
     wrapper.style.gap = "8px";
     wrapper.style.cursor = "pointer";
 
-    const input = document.createElement("input");
+    const input = doc.createElement("input");
     input.type = "checkbox";
     input.dataset.hypenSwitch = "true";
     
@@ -28,7 +28,7 @@ export const switchHandler: ComponentHandler = {
     input.style.transition = "background-color 0.2s";
     
     // Add pseudo-element styling via CSS
-    const style = document.createElement("style");
+    const style = doc.createElement("style");
     style.textContent = `
       input[data-hypen-switch="true"]::before {
         content: "";
@@ -55,6 +55,7 @@ export const switchHandler: ComponentHandler = {
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const doc = el.ownerDocument as Document;
     const input = el.querySelector('input[type="checkbox"]') as HTMLInputElement;
     if (!input) return;
 
@@ -78,7 +79,7 @@ export const switchHandler: ComponentHandler = {
       textNodes.forEach(node => node.remove());
       
       // Add new label text
-      el.appendChild(document.createTextNode(String(label)));
+      el.appendChild(doc.createTextNode(String(label)));
     }
   },
 };

package/src/dom/components/text.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const textHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("span");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("span");
     // Use inline-block for proper flex child behavior
     el.style.display = "inline-block";
     // Tight line-height to match iOS/Android

package/src/dom/components/textarea.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const textareaHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("textarea");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("textarea");
     el.dataset.hypenType = "textarea";
     // Same user-agent reset as Input — otherwise `.tw(...)` styling draws
     // over a native dark border and inset shadow.

package/src/dom/components/video.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const videoHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("video");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("video");
     el.dataset.hypenType = "video";
     return el as any as HTMLElement;
   },

package/src/dom/debug.ts

@@ -76,6 +76,8 @@ export class RerenderTracker {
    * Create or update the heatmap overlay for an element
    */
   private updateHeatmap(id: string, element: HTMLElement, renderCount: number, patchType: string): void {
+    const doc = element.ownerDocument as Document;
+    const win = doc.defaultView ?? window;
     // Calculate opacity based on render count (increment by heatmapIncrement% each time)
     const opacity = Math.min(
       (renderCount * this.config.heatmapIncrement) / 100,
@@ -85,7 +87,7 @@ export class RerenderTracker {
     log.debug(`Updating heatmap for ${id}, count: ${renderCount}, opacity: ${opacity}`);
 
     // For inline elements or text, use a simpler approach: background color + outline
-    const isInline = window.getComputedStyle(element).display.includes('inline');
+    const isInline = win.getComputedStyle(element).display.includes('inline');
 
     if (isInline || element.tagName === 'SPAN') {
       // Store original styles if not already stored
@@ -105,8 +107,8 @@ export class RerenderTracker {
       element.setAttribute('data-hypen-renders', `${renderCount}× ${patchType}`);
 
       // Add CSS for the badge if not already added
-      if (!document.getElementById('hypen-debug-styles')) {
-        const style = document.createElement('style');
+      if (!doc.getElementById('hypen-debug-styles')) {
+        const style = doc.createElement('style');
         style.id = 'hypen-debug-styles';
         style.textContent = `
           [data-hypen-renders]::before {
@@ -127,7 +129,7 @@ export class RerenderTracker {
             text-shadow: none;
           }
         `;
-        document.head.appendChild(style);
+        doc.head.appendChild(style);
       }
 
       // Store in overlays map for cleanup
@@ -148,7 +150,7 @@ export class RerenderTracker {
       let overlay = this.overlays.get(id);
 
       if (!overlay) {
-        overlay = document.createElement("div");
+        overlay = doc.createElement("div");
         overlay.className = "hypen-debug-overlay";
         overlay.style.cssText = `
           position: absolute;
@@ -171,7 +173,7 @@ export class RerenderTracker {
           visibility: visible !important;
         `;
 
-        const currentPosition = window.getComputedStyle(element).position;
+        const currentPosition = win.getComputedStyle(element).position;
         if (currentPosition === 'static') {
           element.style.position = 'relative';
         }

package/src/dom/index.ts

@@ -9,3 +9,11 @@ export { ComponentRegistry } from "./components/index.js";
 export { ApplicatorRegistry } from "./applicators/index.js";
 export { EventManager } from "./events.js";
 export { RerenderTracker, type DebugConfig, defaultDebugConfig } from "./debug.js";
+export {
+  createDomClient as createHypenClient,
+  createDomClient,
+  type DomClient as HypenClient,
+  type DomClient,
+  type DomClientOptions as HypenClientOptions,
+  type DomClientOptions,
+} from "../client.js";

package/src/dom/renderer.ts

@@ -285,13 +285,14 @@ export class DOMRenderer {
   private onCreate(id: string, elementType: string, props: Record<string, any> | Map<string, any>): void {
     const propsObj = props instanceof Map ? Object.fromEntries(props) : props;
 
-    let element = this.components.createElement(elementType, propsObj);
+    const doc = this.container.ownerDocument as Document;
+    let element = this.components.createElement(elementType, propsObj, doc);
 
     if (!element) {
       // For unknown component types, create a transparent container (div).
       // This handles module wrappers (like "App") and custom components
       // that aren't registered but should act as layout containers.
-      const fallback = document.createElement("div");
+      const fallback = doc.createElement("div");
       fallback.dataset.hypenType = elementType.toLowerCase();
       fallback.style.display = "contents"; // Make container transparent in layout
       element = fallback;