@hypen-space/web 0.4.956 → 0.5.2

package/src/canvas/variants.ts

@@ -0,0 +1,153 @@
+/**
+ * Canvas variant application.
+ *
+ * The Canvas renderer reads winning values directly off `node.props.<base>`
+ * (e.g. `props.padding`, `props.backgroundColor`) in both layout.ts and
+ * paint.ts. To support responsive breakpoints and interaction-state variants
+ * WITHOUT rewriting every call site, we resolve variant keys once per frame
+ * (just before layout) and stamp the winning value onto the base key.
+ *
+ * Resolution itself is delegated to the shared, renderer-agnostic helper in
+ * `../variants.ts`, so breakpoint pixels, state names, and precedence stay
+ * byte-compatible with the DOM renderer.
+ *
+ * Per-node bookkeeping (`variantBases`, `variantOriginals`) lives on the
+ * VirtualNode so each frame:
+ *   1. restores the original (variant-free) base value, then
+ *   2. re-applies the current winner for the present width + active states.
+ * This makes the pass idempotent and reversible — when a hover ends or the
+ * canvas shrinks below a breakpoint, the base value comes back automatically.
+ */
+
+import type { VirtualNode } from "./types.js";
+import {
+  resolveVariantProps,
+  parseVariantKey,
+  type ActiveStates,
+} from "../variants.js";
+
+/**
+ * Lazily compute (and cache) the set of applicator base names on this node that
+ * carry at least one variant key. Returns the cached set on subsequent calls.
+ *
+ * The cache is invalidated by `invalidateVariantCache`, called from the
+ * renderer whenever a SetProp/RemoveProp changes the node's prop keys.
+ */
+function getVariantBases(node: VirtualNode): Set<string> {
+  if (node.variantBases != null) return node.variantBases;
+  const bases = new Set<string>();
+  for (const key of Object.keys(node.props)) {
+    const parsed = parseVariantKey(key);
+    if (parsed.breakpoint || parsed.state) bases.add(parsed.base);
+  }
+  node.variantBases = bases;
+  return bases;
+}
+
+/**
+ * Drop the cached variant state so it is recomputed on the next frame.
+ * Call after any prop mutation that may add/remove variant keys.
+ *
+ * Also drops the `variantOriginals` snapshot: a SetProp can change the *base*
+ * value of a base that carries a variant (e.g. `padding.0` updated while
+ * `padding@md.0` exists). The snapshot was taken from the previous frame's
+ * props, so restoring it would clobber the engine's new base value with the
+ * stale one whenever the variant isn't currently active. Clearing it forces the
+ * next frame to re-snapshot from the current (post-SetProp) props.
+ */
+export function invalidateVariantCache(node: VirtualNode): void {
+  node.variantBases = null;
+  node.variantOriginals = undefined;
+}
+
+/**
+ * Derive the active interaction states for a node from its tracked flags and
+ * props, mirroring the DOM/CSS pseudo-class semantics:
+ *   - hover    : pointer is over the node (or a child resolved to it)
+ *   - focus    : node holds canvas focus
+ *   - active   : pointer is currently pressed on the node
+ *   - disabled : node opts out via `disabled`/`enabled:false`
+ */
+function activeStatesFor(node: VirtualNode): ActiveStates {
+  const disabled =
+    node.props.disabled === true ||
+    node.props.disabled === "true" ||
+    node.props.enabled === false ||
+    node.props.enabled === "false";
+  return {
+    hover: !!node.hovered,
+    focus: !!node.focused,
+    active: !!node.pressed,
+    disabled,
+  };
+}
+
+/**
+ * Resolve and apply variant overrides for a single node, in place.
+ *
+ * No-op for nodes without any variant keys (the common case), so the per-frame
+ * cost on a plain tree is one cached set lookup per node.
+ */
+function applyVariantsToNode(node: VirtualNode, width: number): void {
+  const bases = getVariantBases(node);
+  if (bases.size === 0) return;
+
+  // Restore originals from the previous frame so we resolve from a clean base.
+  if (node.variantOriginals) {
+    for (const base of bases) {
+      const orig = node.variantOriginals[base];
+      if (orig === undefined) {
+        // The base had no plain value originally — remove any override we wrote.
+        delete node.props[base];
+      } else {
+        node.props[base] = orig;
+      }
+    }
+  }
+
+  const resolved = resolveVariantProps(
+    node.props as Record<string, unknown>,
+    width,
+    activeStatesFor(node),
+  );
+
+  // Capture originals (once we know which bases are involved) and apply winners.
+  const originals: Record<string, unknown> = {};
+  for (const base of bases) {
+    originals[base] = node.props[base];
+  }
+  node.variantOriginals = originals;
+
+  for (const base of bases) {
+    if (base in resolved) {
+      node.props[base] = resolved[base];
+    }
+  }
+}
+
+/**
+ * Walk the tree from `root` and apply variant overrides to every node using
+ * `width` (the canvas/content width) as the viewport for breakpoint matching.
+ * Called once per frame before layout.
+ */
+export function applyVariants(root: VirtualNode, width: number): void {
+  applyVariantsToNode(root, width);
+  for (const child of root.children) {
+    applyVariants(child, width);
+  }
+}
+
+/**
+ * Re-derive a node's cached computed fields (`visible`, `opacity`) from its
+ * current `props`. These are read on the hot paint/hit-test path, so they are
+ * cached on the node — but {@link applyVariants} can rewrite the underlying
+ * props (`visible@md`, `opacity:disabled`) after the create/setProp caches were
+ * set, so this must run after every variant pass or the cache goes stale.
+ * Single source of truth so the create / setProp / post-variant sites can't
+ * drift apart.
+ */
+export function deriveNodeComputed(node: VirtualNode): void {
+  const o = parseFloat(node.props.opacity as string);
+  node.opacity = Number.isFinite(o) ? o : 1;
+  node.visible = node.props.visible === undefined ? true : !!node.props.visible;
+}

package/src/dom/README.md

@@ -37,17 +37,18 @@ 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 { createHypenClient } from "@hypen-space/web/dom";
+import { DOMRenderer } from "@hypen-space/web";
 
 const engine = new Engine();
 await engine.init();
 
-createHypenClient(document.body, engine);
+const renderer = new DOMRenderer(document.body, engine);
+engine.setRenderCallback((patches) => {
+  renderer.applyPatches(patches);
+});
 ```
 
 ### Server Import
@@ -78,7 +79,7 @@ All components are registered by default:
 ### Custom Components
 
 ```typescript
-const { renderer } = createHypenClient(document.body, engine);
+const renderer = new DOMRenderer(document.body, engine);
 const registry = renderer.getComponentRegistry();
 
 registry.register("mycomponent", {
@@ -140,7 +141,7 @@ Style applicators are registered by default:
 ### Custom Applicators
 
 ```typescript
-const { renderer } = createHypenClient(document.body, engine);
+const renderer = new DOMRenderer(document.body, engine);
 const applicators = renderer.getApplicatorRegistry();
 
 applicators.register("shadow", (el, value) => {
@@ -182,7 +183,7 @@ Canvas components have special applicators for drawing:
 
 ```typescript
 // Register canvas applicators
-const { renderer } = createHypenClient(document.body, engine);
+const renderer = new DOMRenderer(document.body, engine);
 const applicators = renderer.getApplicatorRegistry();
 
 // Canvas-specific applicators

package/src/dom/applicators/events.ts

@@ -496,6 +496,7 @@ export const eventHandlers: Record<string, ApplicatorHandler> = {
   // Mouse hover events
   onMouseEnter: createEventHandler("mouseenter", { extractPayload: mousePayload }),
   onMouseLeave: createEventHandler("mouseleave", { extractPayload: mousePayload }),
+  onHover: createEventHandler("mouseenter", { extractPayload: mousePayload }), // Alias for onMouseEnter
 
   // Two-way binding for .bind(@state.x)
   bind: ((element: HTMLElement, value: unknown) => {

package/src/dom/applicators/font.ts

@@ -5,17 +5,8 @@
 import type { ApplicatorHandler } from "./types.js";
 import { toCssLength } from "./size.js";
 
-// 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;
-}
+// Track loaded Google Fonts to avoid duplicate link tags
+const loadedGoogleFonts = new Set<string>();
 
 // System font keywords that shouldn't be loaded from Google Fonts
 const systemFontKeywords = new Set([
@@ -36,42 +27,40 @@ function isSystemFont(fontName: string): boolean {
 }
 
 /**
- * Load a Google Font by injecting a link tag into the given document.
+ * Load a Google Font by injecting a link tag.
  * @param fontName - The Google Font name (e.g., "Roboto", "Open Sans")
- * @param doc - The Document to inject into.
  */
-function loadGoogleFont(fontName: string, doc: Document): void {
+function loadGoogleFont(fontName: string): void {
   const normalized = fontName.trim();
-  const loaded = getLoadedSet(doc);
 
   // Skip if already loaded or is a system font
-  if (loaded.has(normalized) || isSystemFont(normalized)) {
+  if (loadedGoogleFonts.has(normalized) || isSystemFont(normalized)) {
     return;
   }
 
   // Mark as loading to avoid duplicates
-  loaded.add(normalized);
+  loadedGoogleFonts.add(normalized);
 
   // Create link element for Google Fonts
-  const link = doc.createElement("link");
+  const link = document.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
-  doc.head.appendChild(link);
+  document.head.appendChild(link);
 }
 
 /**
  * Parse a fontFamily value and load any Google Fonts.
  * Returns a CSS-safe font-family string.
  */
-function processFontFamily(value: string, doc: Document): string {
+function processFontFamily(value: string): 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, doc);
+      loadGoogleFont(font);
     }
   }
 
@@ -97,7 +86,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.ownerDocument as Document);
+    el.style.fontFamily = processFontFamily(fontValue);
   },
 
   textAlign: (el, value) => {
@@ -138,20 +127,18 @@ 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: (fontName: string, doc: Document = document) => loadGoogleFont(fontName, doc),
+  preload: loadGoogleFont,
 
   /**
-   * Check if a font has been loaded in the given document (defaults to global).
+   * Check if a font has been loaded.
    */
-  isLoaded: (fontName: string, doc: Document = document) =>
-    getLoadedSet(doc).has(fontName.trim()),
+  isLoaded: (fontName: string) => loadedGoogleFonts.has(fontName.trim()),
 
   /**
-   * Get list of loaded fonts for the given document (defaults to global).
+   * Get list of loaded fonts.
    */
-  getLoadedFonts: (doc: Document = document) => Array.from(getLoadedSet(doc)),
+  getLoadedFonts: () => Array.from(loadedGoogleFonts),
 
   /**
    * Popular Google Fonts for reference.

package/src/dom/applicators/index.ts

@@ -40,53 +40,38 @@ import { advancedLayoutHandlers } from "./advanced-layout.js";
 import { backgroundHandlers } from "./background.js";
 import { displayHandlers } from "./display.js";
 import { transitionHandlers } from "./transition.js";
+import { BREAKPOINTS as VARIANT_BREAKPOINTS, VALID_STATES } from "../../variants.js";
 
 /**
- * Tailwind breakpoint values for responsive variants
+ * Tailwind breakpoint values for responsive variants.
+ * Derived from the shared `variants.ts` table (single source of truth across
+ * DOM + Canvas renderers) and expressed as CSS `px` strings for media queries.
  */
-const BREAKPOINTS: Record<string, string> = {
-  sm: '640px',
-  md: '768px',
-  lg: '1024px',
-  xl: '1280px',
-  '2xl': '1536px',
-};
+const BREAKPOINTS: Record<string, string> = Object.fromEntries(
+  Object.entries(VARIANT_BREAKPOINTS).map(([name, px]) => [name, `${px}px`]),
+);
 
 /**
- * Per-document stylesheet for variant CSS rules
+ * Singleton stylesheet for variant CSS rules
  */
-const variantStyleSheets = new Map<Document, CSSStyleSheet>();
+let variantStyleSheet: CSSStyleSheet | null = null;
 
 /**
- * Track inserted rules to avoid duplicates (per-document)
+ * Track inserted rules to avoid duplicates
  */
-const insertedRules = new Map<Document, Set<string>>();
+const insertedRules = new Set<string>();
 
 /**
- * Get or create the variant stylesheet for a document
+ * Get or create the variant stylesheet
  */
-function getVariantStyleSheet(doc: Document): CSSStyleSheet {
-  let sheet = variantStyleSheets.get(doc);
-  if (!sheet) {
-    const style = doc.createElement('style');
+function getVariantStyleSheet(): CSSStyleSheet {
+  if (!variantStyleSheet) {
+    const style = document.createElement('style');
     style.id = 'hypen-variants';
-    doc.head.appendChild(style);
-    sheet = style.sheet as CSSStyleSheet;
-    variantStyleSheets.set(doc, sheet);
+    document.head.appendChild(style);
+    variantStyleSheet = style.sheet as CSSStyleSheet;
   }
-  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;
+  return variantStyleSheet;
 }
 
 /**
@@ -341,6 +326,36 @@ export class ApplicatorRegistry {
     const atIndex = name.indexOf('@');
     const colonIndex = name.indexOf(':');
 
+    // Combined responsive + state variant: backgroundColor@md:hover.
+    // Canonical key order is `<prop>@<bp>:<state>`, so the breakpoint sits
+    // between '@' and ':'. Emitted as a pseudo-class rule nested in a media
+    // query so it applies only when BOTH the width matches AND the state holds.
+    if (atIndex !== -1 && colonIndex !== -1 && colonIndex > atIndex) {
+      const prop = name.slice(0, atIndex);
+      const breakpoint = name.slice(atIndex + 1, colonIndex);
+      const state = name.slice(colonIndex + 1);
+      const minWidth = BREAKPOINTS[breakpoint];
+
+      if (minWidth && VALID_STATES.includes(state)) {
+        const cssName = this.toKebabCase(prop);
+        const cssValue = this.formatCssValue(cssName, value);
+        const className = `hypen-${cssName.replace(/[^a-zA-Z0-9-]/g, '')}-${breakpoint}-${state}-${hashValue(value)}`;
+        const ruleKey = `${className}:${cssValue}`;
+
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
+          sheet.insertRule(
+            `@media (min-width: ${minWidth}) { .${className}:${state} { ${cssName}: ${cssValue}; } }`,
+            sheet.cssRules.length
+          );
+          insertedRules.add(ruleKey);
+        }
+
+        element.classList.add(className);
+      }
+      return;
+    }
+
     // Responsive variant: padding@md, width@lg, etc.
     if (atIndex !== -1) {
       const prop = name.slice(0, atIndex);
@@ -348,21 +363,19 @@ 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 (!dedup.has(ruleKey)) {
-          const sheet = getVariantStyleSheet(doc);
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
           sheet.insertRule(
             `@media (min-width: ${minWidth}) { .${className} { ${cssName}: ${cssValue}; } }`,
             sheet.cssRules.length
           );
-          dedup.add(ruleKey);
+          insertedRules.add(ruleKey);
         }
 
         element.classList.add(className);
@@ -375,24 +388,21 @@ export class ApplicatorRegistry {
       const prop = name.slice(0, colonIndex);
       const state = name.slice(colonIndex + 1);
 
-      // 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);
+      // Only handle known CSS pseudo-states (shared with the Canvas resolver)
+      if (VALID_STATES.includes(state)) {
         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 (!dedup.has(ruleKey)) {
-          const sheet = getVariantStyleSheet(doc);
+        if (!insertedRules.has(ruleKey)) {
+          const sheet = getVariantStyleSheet();
           sheet.insertRule(
             `.${className}:${state} { ${cssName}: ${cssValue}; }`,
             sheet.cssRules.length
           );
-          dedup.add(ruleKey);
+          insertedRules.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(doc: Document): HTMLElement {
-    const el = doc.createElement("canvas");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("audio");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.createElement("div");
     el.dataset.hypenType = "avatar";
     el.style.display = "inline-flex";
     el.style.alignItems = "center";
@@ -23,11 +23,10 @@ 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 = doc.createElement("img");
+      const img = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("span");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("button");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const wrapper = doc.createElement("label");
+  create(): HTMLElement {
+    const wrapper = document.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 = doc.createElement("input");
+    const input = document.createElement("input");
     input.type = "checkbox";
     input.dataset.hypenCheckbox = "true";
     
@@ -23,7 +23,6 @@ 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;
 
@@ -47,7 +46,7 @@ export const checkboxHandler: ComponentHandler = {
       textNodes.forEach(node => node.remove());
       
       // Add new label text
-      el.appendChild(doc.createTextNode(String(label)));
+      el.appendChild(document.createTextNode(String(label)));
     }
   },
 };

package/src/dom/components/column.ts

@@ -17,8 +17,8 @@
 import type { ComponentHandler } from "./index.js";
 
 export const columnHandler: ComponentHandler = {
-  create(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("div");
+  create(): HTMLElement {
+    const el = document.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(doc: Document): HTMLElement {
-    const el = doc.createElement("hr");
+  create(): HTMLElement {
+    const el = document.createElement("hr");
     el.dataset.hypenType = "divider";
     el.style.border = "none";
     el.style.borderTop = "1px solid #e0e0e0";