@hypen-space/web 0.4.82 → 0.4.83

package/src/dom/components/column.ts

@@ -1,8 +1,17 @@
 /**
  * Column Component - Vertical Stack
  *
- * Children wrap to content by default (matching Android/iOS behavior).
- * Use .fillMaxWidth() on children or .horizontalAlignment("stretch") to stretch.
+ * Children stretch to the Column's cross-axis (width) by default — matches
+ * Tailwind / CSS authors' expectations (`mx-4` on a button leaves 16px
+ * gaps on each side, not a content-hugging pill). Override per-child with
+ * `.alignSelf("flex-start")` or `.horizontalAlignment(...)`.
+ *
+ * This was `flex-start` originally to mirror iOS/Android "wrap to content"
+ * defaults, but that made every `.tw("mx-4")`-padded child (e.g. the
+ * social Edit Profile button) render at its content width and look wrong
+ * against the native renderers — which DO stretch because SwiftUI /
+ * Compose treat horizontal margin-only as a "pad the edges of a wide
+ * element" intent.
  */
 
 import type { ComponentHandler } from "./index.js";
@@ -12,8 +21,7 @@ export const columnHandler: ComponentHandler = {
     const el = document.createElement("div");
     el.style.display = "flex";
     el.style.flexDirection = "column";
-    // Wrap children to content by default (match iOS/Android behavior)
-    el.style.alignItems = "flex-start";
+    el.style.alignItems = "stretch";
     el.dataset.hypenType = "column";
     return el;
   },

package/src/dom/components/image.ts

@@ -14,10 +14,15 @@ export const imageHandler: ComponentHandler = {
   applyProps(el: HTMLElement, props: Record<string, any>): void {
     const img = el as HTMLImageElement;
 
-    // Support url, src, or first positional argument
-    const src = props["0"] || props.url || props.src;
-    if (src !== undefined) {
+    // Support url, src, or first positional argument.
+    // Skip null/empty — initial state often has src=null before the real
+    // URL arrives in a follow-up SetProp patch, and `<img src="null">`
+    // would trigger a spurious GET /null and block paint.
+    const src = props["0"] ?? props.url ?? props.src;
+    if (src != null && src !== "") {
       img.src = String(src);
+    } else if (img.src) {
+      img.removeAttribute("src");
     }
 
     if (props.alt !== undefined) {

package/src/dom/components/input.ts

@@ -8,6 +8,17 @@ export const inputHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.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
+    // this the native black 2px inset border shows through the Tailwind
+    // background (the social Search bar rendered as a dark-bordered
+    // rectangle instead of a pill). The author can still opt back in
+    // via explicit `border-*` applicators.
+    el.style.border = "none";
+    el.style.outline = "none";
+    el.style.background = "transparent";
+    el.style.font = "inherit";
+    el.style.color = "inherit";
     return el as any as HTMLElement;
   },
 

package/src/dom/components/textarea.ts

@@ -8,6 +8,14 @@ export const textareaHandler: ComponentHandler = {
   create(): HTMLElement {
     const el = document.createElement("textarea");
     el.dataset.hypenType = "textarea";
+    // Same user-agent reset as Input — otherwise `.tw(...)` styling draws
+    // over a native dark border and inset shadow.
+    el.style.border = "none";
+    el.style.outline = "none";
+    el.style.background = "transparent";
+    el.style.font = "inherit";
+    el.style.color = "inherit";
+    el.style.resize = "none";
     return el as HTMLElement;
   },
 

package/src/dom/renderer.ts

@@ -15,6 +15,24 @@ const log = frameworkLoggers.renderer;
 /** Element types that treat the "action" prop as an onClick handler */
 const ACTIONABLE_TYPES = new Set(["button", "link", "card"]);
 
+/**
+ * Per-component-type props that map to HTML element attributes (not CSS).
+ * SetProp for these names must go through the component's `applyProps`
+ * (which writes the attribute), otherwise the applicator's CSS fallback
+ * tries `el.style.<name>` and the update silently no-ops — most visibly
+ * for `Image.src` updates that depend on async-loaded state (the social
+ * `Your story` avatar that fills in once `state.currentUser` arrives).
+ */
+const COMPONENT_HTML_ATTRS: Record<string, Set<string>> = {
+  image: new Set(["src", "alt", "url", "0", "srcset"]),
+  input: new Set(["type", "placeholder", "value", "disabled", "readonly", "name", "checked"]),
+  textarea: new Set(["placeholder", "value", "rows", "cols", "disabled", "readonly", "name"]),
+  select: new Set(["name", "multiple", "disabled", "value"]),
+  checkbox: new Set(["checked", "disabled", "name"]),
+  radio: new Set(["checked", "disabled", "name", "value"]),
+  link: new Set(["href", "target", "rel"]),
+};
+
 import { ComponentRegistry } from "./components/index.js";
 import { ApplicatorRegistry } from "./applicators/index.js";
 import { canvasHandler, canvasApplicators } from "./canvas/index.js";
@@ -134,8 +152,11 @@ export class DOMRenderer {
 
     switch (patch.type) {
       case "insert":
-      case "move": {
-        // Route by parent — if parent is a canvas root or inside one
+      case "move":
+      case "attach": {
+        // Route by parent — if parent is a canvas root or inside one.
+        // `attach` behaves like `insert`: it puts the (already-alive)
+        // id into a new parent, so it routes exactly the same way.
         if (!parentId) return undefined;
         if (this.canvasRenderers.has(parentId)) return parentId;
         return this.canvasSubtreeMap.get(parentId);
@@ -146,7 +167,7 @@ export class DOMRenderer {
         return this.canvasSubtreeMap.get(id);
       }
       default: {
-        // setProp, removeProp, setText, remove — route by node id
+        // setProp, removeProp, setText, remove, detach — route by node id
         if (!id) return undefined;
         return this.canvasSubtreeMap.get(id);
       }
@@ -241,6 +262,12 @@ export class DOMRenderer {
       case "remove":
         this.onRemove(id!);
         break;
+      case "detach":
+        this.onDetach(id!);
+        break;
+      case "attach":
+        this.onInsert(parentId!, id!, beforeId);
+        break;
     }
   }
 
@@ -323,6 +350,20 @@ export class DOMRenderer {
         return;
       }
 
+      // For element types where the positional `0` is a non-text prop
+      // (e.g. `Image(src)` accepts the URL as `0`), let the component's
+      // `applyProps` handle it instead of force-setting `textContent`.
+      // Without this an `Image` whose URL arrived in a later SetProp
+      // patch ended up with `<img>Your story</img>`-style text contents
+      // and an empty `src`.
+      if (elementType && COMPONENT_HTML_ATTRS[elementType]?.has(name)) {
+        const handler = this.components.get(elementType);
+        if (handler?.applyProps) {
+          handler.applyProps(element, { [name]: value });
+          return;
+        }
+      }
+
       const nextText = String(value);
       element.textContent = nextText;
 
@@ -352,6 +393,22 @@ export class DOMRenderer {
       return;
     }
 
+    // Element-specific HTML attributes (img.src, input.placeholder, etc.)
+    // need to go through the component handler's `applyProps`. Without
+    // this, a follow-up SetProp(src=…) for an `Image` whose initial
+    // Create had no src — the `Your story` avatar that depends on
+    // `state.currentUser`, which loads after the first paint — was
+    // routed to the CSS fallback (`el.style.src`, a no-op) and the
+    // image stayed blank forever.
+    const elementType = element.dataset.hypenType;
+    if (elementType && COMPONENT_HTML_ATTRS[elementType]?.has(name)) {
+      const handler = this.components.get(elementType);
+      if (handler?.applyProps) {
+        handler.applyProps(element, { [name]: value });
+        return;
+      }
+    }
+
     this.applicators.apply(element, name, value);
 
     // Forward canvas dimension changes to its CanvasRenderer
@@ -423,6 +480,38 @@ export class DOMRenderer {
     this.onInsert(parentId, id, beforeId);
   }
 
+  /**
+   * Detach an element from its parent without destroying it.
+   *
+   * The HTMLElement and its children stay alive in `this.nodes` (and
+   * anywhere else they're referenced); only the DOM parent link is
+   * broken. A subsequent `attach` patch reinserts the same reference
+   * into a parent, preserving scroll position, form state, focus,
+   * inline styles, and any attached event listeners.
+   *
+   * Event listeners and other disposables are intentionally NOT
+   * disposed — the subtree is expected to come back. If the engine
+   * follows up with a `remove` for this id instead, full teardown
+   * happens there.
+   *
+   * Used by the engine's Router cache to keep previously-visited
+   * route subtrees alive between navigations.
+   */
+  private onDetach(id: string): void {
+    const element = this.nodes.get(id);
+    if (!element) return;
+
+    if (element.parentNode) {
+      element.parentNode.removeChild(element);
+    }
+
+    // If the root gets detached (unlikely but defensible), clear
+    // rootId so a later attach can re-root cleanly.
+    if (this.rootId === id) {
+      this.rootId = null;
+    }
+  }
+
   /**
    * Remove an element from the tree
    */