@hypen-space/web 0.4.949 → 0.4.951

package/src/canvas/renderer.ts

@@ -73,6 +73,10 @@ export class CanvasRenderer implements Renderer {
   private rafId: number | null = null;
   private needsRedraw = false;
 
+  private resizeObserver: ResizeObserver | null = null;
+  private dprMediaQuery: MediaQueryList | null = null;
+  private dprChangeHandler: (() => void) | null = null;
+
   private frameCount = 0;
   private lastFrameTime = 0;
 
@@ -138,6 +142,30 @@ export class CanvasRenderer implements Renderer {
     // Eagerly initialise Taffy WASM for layout (non-blocking — fallback used until ready)
     initTaffyLayout();
 
+    // Observe size changes — without this, the canvas backing store stays
+    // pinned at construction-time dimensions while CSS stretches the
+    // display box, and content gets bitmap-stretched / hit-testing drifts.
+    if (typeof ResizeObserver !== "undefined") {
+      this.resizeObserver = new ResizeObserver(() => {
+        this.setupHiDPI();
+        this.scheduleRedraw();
+      });
+      this.resizeObserver.observe(this.canvas);
+    }
+
+    // Track DPR changes (e.g. dragging window across monitors with
+    // different scaling). matchMedia fires once per crossing.
+    if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
+      const dpr = window.devicePixelRatio || 1;
+      this.dprMediaQuery = window.matchMedia(`(resolution: ${dpr}dppx)`);
+      this.dprChangeHandler = () => {
+        this.options.devicePixelRatio = window.devicePixelRatio || 1;
+        this.setupHiDPI();
+        this.scheduleRedraw();
+      };
+      this.dprMediaQuery.addEventListener("change", this.dprChangeHandler);
+    }
+
     // Don't schedule initial render - wait for patches
   }
 
@@ -148,15 +176,18 @@ export class CanvasRenderer implements Renderer {
     const dpr = this.options.devicePixelRatio || 1;
     const rect = this.canvas.getBoundingClientRect();
 
+    // Skip when the host is collapsed — a 0-pixel backing store throws
+    // in some 2D contexts and the next non-zero resize will reinitialise.
+    if (rect.width === 0 || rect.height === 0) return;
+
     this.canvas.width = rect.width * dpr;
     this.canvas.height = rect.height * dpr;
 
+    // Reset transform first — `scale()` is cumulative across calls, so on
+    // a resize the second call would compound (dpr²) and shrink content.
+    this.ctx.setTransform(1, 0, 0, 1, 0, 0);
     this.ctx.scale(dpr, dpr);
 
-    // Update canvas display size
-    this.canvas.style.width = `${rect.width}px`;
-    this.canvas.style.height = `${rect.height}px`;
-
     // Sync dirty tracker with new canvas size
     if (this.dirtyTracker) {
       this.dirtyTracker.setCanvasSize(rect.width, rect.height);
@@ -733,6 +764,15 @@ export class CanvasRenderer implements Renderer {
     if (this.rafId !== null) {
       cancelAnimationFrame(this.rafId);
     }
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    if (this.dprMediaQuery && this.dprChangeHandler) {
+      this.dprMediaQuery.removeEventListener("change", this.dprChangeHandler);
+      this.dprMediaQuery = null;
+      this.dprChangeHandler = null;
+    }
     this.eventManager.destroy();
     this.scrollManager.destroy();
     this.selectionManager.destroy();

package/src/canvas/utils.ts

@@ -12,6 +12,42 @@ import type { BoxSpacing, Rectangle, Point, VirtualNode } from "./types.js";
 // and treating `3.5rem` as 3.5px, collapsing whole layouts to 1/16 size.
 const ROOT_FONT_PX = 16;
 
+/**
+ * Active layout viewport — used to resolve `vw` / `vh` correctly during a
+ * layout pass. Set by `computeLayout` (layout.ts) at entry and cleared on
+ * exit. Layout traversal is synchronous, so a single module-level slot is
+ * sufficient and avoids threading a `viewport` parameter through every
+ * `cssLengthToPx` call site (there are dozens).
+ *
+ * Falls back to `window.innerWidth` / `window.innerHeight` outside a layout
+ * pass (e.g. for direct callers that resolve sizes ahead of layout). When
+ * neither is available — e.g. headless tests — `vw`/`vh` degrade to the
+ * pre-fix unitless-pixel behavior.
+ */
+let currentViewport: { width: number; height: number } | null = null;
+
+export function setCurrentViewport(viewport: { width: number; height: number } | null): void {
+  currentViewport = viewport;
+}
+
+export function getCurrentViewport(): { width: number; height: number } | null {
+  return currentViewport;
+}
+
+function resolveViewportPx(unit: "vw" | "vh", n: number): number {
+  if (currentViewport) {
+    const dim = unit === "vw" ? currentViewport.width : currentViewport.height;
+    return (n / 100) * dim;
+  }
+  if (typeof window !== "undefined") {
+    const dim = unit === "vw" ? window.innerWidth : window.innerHeight;
+    if (Number.isFinite(dim) && dim > 0) return (n / 100) * dim;
+  }
+  // Last resort: treat as unitless px so the layout still gets a numeric
+  // value (matches pre-fix behavior in the no-viewport case).
+  return n;
+}
+
 /**
  * Parse a CSS length string (or number) into pixels.
  * Returns `null` for `"auto"` or unparseable input; returns `null` for `%`
@@ -33,10 +69,8 @@ export function cssLengthToPx(value: any): number | null {
     case "px": return n;
     case "rem":
     case "em": return n * ROOT_FONT_PX;
-    // We don't have a viewport reference here; treat vw/vh as unitless px
-    // fallback so the layout gets _some_ numeric value rather than zero.
     case "vw":
-    case "vh": return n;
+    case "vh": return resolveViewportPx(unit, n);
     // Typographic point — 1/72 inch at CSS reference density (96dpi).
     case "pt": return n * (96 / 72);
     // Density-independent (dp) and scale-independent (sp) logical pixels

package/src/client.ts

@@ -0,0 +1,88 @@
+/**
+ * createHypenClient — single-call wiring for renderer + engine.
+ *
+ * Replaces the boilerplate:
+ *   const renderer = new DOMRenderer(container, engine);
+ *   engine.onPatches((patches) => renderer.applyPatches(patches));
+ *
+ * Works with either a local Engine (`setRenderCallback`) or RemoteEngine
+ * (`onPatches`) — they expose different APIs but the same intent.
+ */
+
+import type { Patch } from "@hypen-space/core/types";
+import { DOMRenderer } from "./dom/renderer.js";
+import type { DebugConfig } from "./dom/debug.js";
+import { CanvasRenderer } from "./canvas/renderer.js";
+import type { CanvasRendererOptions } from "./canvas/types.js";
+
+interface PatchSourceLike {
+  dispatchAction(name: string, payload?: unknown): void;
+  onPatches?(callback: (patches: Patch[]) => void): unknown;
+  setRenderCallback?(callback: (patches: Patch[]) => void): void;
+}
+
+function attachPatchListener(
+  engine: PatchSourceLike,
+  callback: (patches: Patch[]) => void,
+): void {
+  if (typeof engine.onPatches === "function") {
+    engine.onPatches(callback);
+    return;
+  }
+  if (typeof engine.setRenderCallback === "function") {
+    engine.setRenderCallback(callback);
+    return;
+  }
+  throw new Error(
+    "createHypenClient: engine has neither onPatches() nor setRenderCallback() — cannot subscribe to patches.",
+  );
+}
+
+export interface DomClientOptions {
+  debug?: Partial<DebugConfig>;
+}
+
+export interface DomClient {
+  renderer: DOMRenderer;
+  destroy(): void;
+}
+
+export function createDomClient(
+  container: HTMLElement,
+  engine: PatchSourceLike,
+  options?: DomClientOptions,
+): DomClient {
+  const renderer = new DOMRenderer(container, engine as any, options?.debug);
+  attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
+  return {
+    renderer,
+    destroy() {
+      // DOMRenderer has no destroy yet; clearing the container is the
+      // closest approximation. Patch subscriptions live on the engine —
+      // the caller controls engine lifetime, so we don't tear them down.
+      container.innerHTML = "";
+    },
+  };
+}
+
+export interface CanvasClientOptions extends Partial<CanvasRendererOptions> {}
+
+export interface CanvasClient {
+  renderer: CanvasRenderer;
+  destroy(): void;
+}
+
+export function createCanvasClient(
+  canvas: HTMLCanvasElement,
+  engine: PatchSourceLike,
+  options?: CanvasClientOptions,
+): CanvasClient {
+  const renderer = new CanvasRenderer(canvas, engine as any, options);
+  attachPatchListener(engine, (patches) => renderer.applyPatches(patches));
+  return {
+    renderer,
+    destroy() {
+      renderer.destroy();
+    },
+  };
+}

package/src/dom/README.md

@@ -37,18 +37,17 @@ src/dom/
 
 ### Browser Import
 
+The recommended one-call wiring is `createHypenClient`. The bare `DOMRenderer` constructor is still exported for advanced cases (custom subscription, multi-listener fan-out, etc.).
+
 ```typescript
 import { app, HypenModuleInstance } from "@hypen-space/core";
 import { Engine } from "@hypen-space/web-engine";
-import { DOMRenderer } from "@hypen-space/web";
+import { createHypenClient } from "@hypen-space/web/dom";
 
 const engine = new Engine();
 await engine.init();
 
-const renderer = new DOMRenderer(document.body, engine);
-engine.setRenderCallback((patches) => {
-  renderer.applyPatches(patches);
-});
+createHypenClient(document.body, engine);
 ```
 
 ### Server Import
@@ -79,7 +78,7 @@ All components are registered by default:
 ### Custom Components
 
 ```typescript
-const renderer = new DOMRenderer(document.body, engine);
+const { renderer } = createHypenClient(document.body, engine);
 const registry = renderer.getComponentRegistry();
 
 registry.register("mycomponent", {
@@ -141,7 +140,7 @@ Style applicators are registered by default:
 ### Custom Applicators
 
 ```typescript
-const renderer = new DOMRenderer(document.body, engine);
+const { renderer } = createHypenClient(document.body, engine);
 const applicators = renderer.getApplicatorRegistry();
 
 applicators.register("shadow", (el, value) => {
@@ -183,7 +182,7 @@ Canvas components have special applicators for drawing:
 
 ```typescript
 // Register canvas applicators
-const renderer = new DOMRenderer(document.body, engine);
+const { renderer } = createHypenClient(document.body, engine);
 const applicators = renderer.getApplicatorRegistry();
 
 // Canvas-specific applicators

package/src/dom/applicators/font.ts

@@ -5,8 +5,17 @@
 import type { ApplicatorHandler } from "./types.js";
 import { toCssLength } from "./size.js";
 
-// Track loaded Google Fonts to avoid duplicate link tags
-const loadedGoogleFonts = new Set<string>();
+// Track loaded Google Fonts per-document to avoid duplicate link tags
+const loadedGoogleFonts = new WeakMap<Document, Set<string>>();
+
+function getLoadedSet(doc: Document): Set<string> {
+  let set = loadedGoogleFonts.get(doc);
+  if (!set) {
+    set = new Set<string>();
+    loadedGoogleFonts.set(doc, set);
+  }
+  return set;
+}
 
 // System font keywords that shouldn't be loaded from Google Fonts
 const systemFontKeywords = new Set([
@@ -27,40 +36,42 @@ function isSystemFont(fontName: string): boolean {
 }
 
 /**
- * Load a Google Font by injecting a link tag.
+ * Load a Google Font by injecting a link tag into the given document.
  * @param fontName - The Google Font name (e.g., "Roboto", "Open Sans")
+ * @param doc - The Document to inject into.
  */
-function loadGoogleFont(fontName: string): void {
+function loadGoogleFont(fontName: string, doc: Document): void {
   const normalized = fontName.trim();
+  const loaded = getLoadedSet(doc);
 
   // Skip if already loaded or is a system font
-  if (loadedGoogleFonts.has(normalized) || isSystemFont(normalized)) {
+  if (loaded.has(normalized) || isSystemFont(normalized)) {
     return;
   }
 
   // Mark as loading to avoid duplicates
-  loadedGoogleFonts.add(normalized);
+  loaded.add(normalized);
 
   // Create link element for Google Fonts
-  const link = document.createElement("link");
+  const link = doc.createElement("link");
   link.rel = "stylesheet";
   link.href = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(normalized)}:wght@100;200;300;400;500;600;700;800;900&display=swap`;
 
   // Add to document head
-  document.head.appendChild(link);
+  doc.head.appendChild(link);
 }
 
 /**
  * Parse a fontFamily value and load any Google Fonts.
  * Returns a CSS-safe font-family string.
  */
-function processFontFamily(value: string): string {
+function processFontFamily(value: string, doc: Document): string {
   // Split by comma to handle font stacks
   const fonts = value.split(",").map(f => f.trim().replace(/["']/g, ""));
 
   for (const font of fonts) {
     if (!isSystemFont(font)) {
-      loadGoogleFont(font);
+      loadGoogleFont(font, doc);
     }
   }
 
@@ -86,7 +97,7 @@ export const fontHandlers: Record<string, ApplicatorHandler> = {
   fontFamily: (el, value) => {
     const fontValue = String(value);
     // Process font family and load Google Fonts as needed
-    el.style.fontFamily = processFontFamily(fontValue);
+    el.style.fontFamily = processFontFamily(fontValue, el.ownerDocument as Document);
   },
 
   textAlign: (el, value) => {
@@ -127,18 +138,20 @@ export const fontHandlers: Record<string, ApplicatorHandler> = {
 export const GoogleFonts = {
   /**
    * Preload a Google Font before it's used.
+   * Defaults to the global `document` if no doc is provided.
    */
-  preload: loadGoogleFont,
+  preload: (fontName: string, doc: Document = document) => loadGoogleFont(fontName, doc),
 
   /**
-   * Check if a font has been loaded.
+   * Check if a font has been loaded in the given document (defaults to global).
    */
-  isLoaded: (fontName: string) => loadedGoogleFonts.has(fontName.trim()),
+  isLoaded: (fontName: string, doc: Document = document) =>
+    getLoadedSet(doc).has(fontName.trim()),
 
   /**
-   * Get list of loaded fonts.
+   * Get list of loaded fonts for the given document (defaults to global).
    */
-  getLoadedFonts: () => Array.from(loadedGoogleFonts),
+  getLoadedFonts: (doc: Document = document) => Array.from(getLoadedSet(doc)),
 
   /**
    * Popular Google Fonts for reference.

package/src/dom/applicators/index.ts

@@ -53,26 +53,40 @@ const BREAKPOINTS: Record<string, string> = {
 };
 
 /**
- * Singleton stylesheet for variant CSS rules
+ * Per-document stylesheet for variant CSS rules
  */
-let variantStyleSheet: CSSStyleSheet | null = null;
+const variantStyleSheets = new Map<Document, CSSStyleSheet>();
 
 /**
- * Track inserted rules to avoid duplicates
+ * Track inserted rules to avoid duplicates (per-document)
  */
-const insertedRules = new Set<string>();
+const insertedRules = new Map<Document, Set<string>>();
 
 /**
- * Get or create the variant stylesheet
+ * Get or create the variant stylesheet for a document
  */
-function getVariantStyleSheet(): CSSStyleSheet {
-  if (!variantStyleSheet) {
-    const style = document.createElement('style');
+function getVariantStyleSheet(doc: Document): CSSStyleSheet {
+  let sheet = variantStyleSheets.get(doc);
+  if (!sheet) {
+    const style = doc.createElement('style');
     style.id = 'hypen-variants';
-    document.head.appendChild(style);
-    variantStyleSheet = style.sheet as CSSStyleSheet;
+    doc.head.appendChild(style);
+    sheet = style.sheet as CSSStyleSheet;
+    variantStyleSheets.set(doc, sheet);
   }
-  return variantStyleSheet;
+  return sheet;
+}
+
+/**
+ * Get or create the inserted-rules dedup set for a document
+ */
+function getInsertedRules(doc: Document): Set<string> {
+  let set = insertedRules.get(doc);
+  if (!set) {
+    set = new Set<string>();
+    insertedRules.set(doc, set);
+  }
+  return set;
 }
 
 /**
@@ -334,19 +348,21 @@ export class ApplicatorRegistry {
       const minWidth = BREAKPOINTS[breakpoint];
 
       if (minWidth) {
+        const doc = element.ownerDocument as Document;
+        const dedup = getInsertedRules(doc);
         const cssName = this.toKebabCase(prop);
         const cssValue = this.formatCssValue(cssName, value);
         const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${breakpoint}-${hashValue(value)}`;
         const ruleKey = `${className}:${cssValue}`;
 
         // Avoid duplicate rule insertion
-        if (!insertedRules.has(ruleKey)) {
-          const sheet = getVariantStyleSheet();
+        if (!dedup.has(ruleKey)) {
+          const sheet = getVariantStyleSheet(doc);
           sheet.insertRule(
             `@media (min-width: ${minWidth}) { .${className} { ${cssName}: ${cssValue}; } }`,
             sheet.cssRules.length
           );
-          insertedRules.add(ruleKey);
+          dedup.add(ruleKey);
         }
 
         element.classList.add(className);
@@ -362,19 +378,21 @@ export class ApplicatorRegistry {
       // Only handle known CSS pseudo-states
       const validStates = ['hover', 'focus', 'active', 'disabled', 'focus-visible', 'focus-within'];
       if (validStates.includes(state)) {
+        const doc = element.ownerDocument as Document;
+        const dedup = getInsertedRules(doc);
         const cssName = this.toKebabCase(prop);
         const cssValue = this.formatCssValue(cssName, value);
         const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${state}-${hashValue(value)}`;
         const ruleKey = `${className}:${cssValue}`;
 
         // Avoid duplicate rule insertion
-        if (!insertedRules.has(ruleKey)) {
-          const sheet = getVariantStyleSheet();
+        if (!dedup.has(ruleKey)) {
+          const sheet = getVariantStyleSheet(doc);
           sheet.insertRule(
             `.${className}:${state} { ${cssName}: ${cssValue}; }`,
             sheet.cssRules.length
           );
-          insertedRules.add(ruleKey);
+          dedup.add(ruleKey);
         }
 
         element.classList.add(className);

package/src/dom/canvas/index.ts

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

package/src/dom/components/app.ts

@@ -8,8 +8,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const appHandler: 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.minHeight = "100vh";

package/src/dom/components/audio.ts

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

package/src/dom/components/avatar.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const avatarHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.dataset.hypenType = "avatar";
     el.style.display = "inline-flex";
     el.style.alignItems = "center";
@@ -23,10 +23,11 @@ export const avatarHandler: ComponentHandler = {
   },
 
   applyProps(el: HTMLElement, props: Record<string, any>): void {
+    const doc = el.ownerDocument as Document;
     // Image source - support named arg with .0 suffix, positional arg, or plain name
     const src = props["src.0"] || props["0"] || props.src || props.source;
     if (src !== undefined) {
-      const img = document.createElement("img");
+      const img = doc.createElement("img");
       img.src = String(src);
       img.style.width = "100%";
       img.style.height = "100%";

package/src/dom/components/badge.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const badgeHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("span");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("span");
     el.dataset.hypenType = "badge";
     el.style.display = "inline-block";
     el.style.padding = "4px 8px";

package/src/dom/components/button.ts

@@ -9,8 +9,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const buttonHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("button");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("button");
     // Reset default button styles for cross-platform consistency
     el.style.border = "none";
     el.style.background = "none";

package/src/dom/components/card.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const cardHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.dataset.hypenType = "card";
     el.style.backgroundColor = "#ffffff";
     el.style.borderRadius = "8px";

package/src/dom/components/center.ts

@@ -9,8 +9,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const centerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     el.style.display = "flex";
     el.style.alignItems = "center";
     el.style.justifyContent = "center";

package/src/dom/components/checkbox.ts

@@ -5,15 +5,15 @@
 import type { ComponentHandler } from "./index.js";
 
 export const checkboxHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const wrapper = document.createElement("label");
+  create(doc: Document): HTMLElement {
+    const wrapper = doc.createElement("label");
     wrapper.dataset.hypenType = "checkbox";
     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.hypenCheckbox = "true";
     
@@ -23,6 +23,7 @@ export const checkboxHandler: 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;
 
@@ -46,7 +47,7 @@ export const checkboxHandler: 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/column.ts

@@ -17,8 +17,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const columnHandler: 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.alignItems = "stretch";

package/src/dom/components/container.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const containerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("div");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("div");
     // Simple block container - wraps to content by default
     // Use .fillMaxWidth(true) to stretch
     el.dataset.hypenType = "container";

package/src/dom/components/divider.ts

@@ -5,8 +5,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const dividerHandler: ComponentHandler = {
-  create(): HTMLElement {
-    const el = document.createElement("hr");
+  create(doc: Document): HTMLElement {
+    const el = doc.createElement("hr");
     el.dataset.hypenType = "divider";
     el.style.border = "none";
     el.style.borderTop = "1px solid #e0e0e0";