@swiftbrowser/web 0.9.5 → 0.9.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.9.5",
+  "version": "0.9.6",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/hostInset.ts

@@ -0,0 +1,26 @@
+/**
+ * A `host` that is a list row is drawn in the row's box (the card's width,
+ * the row's height with its padding), as every row is, while the engine
+ * measured and placed its content in the row's content frame inside it.
+ * The content element goes back into that frame, as a text row's text is
+ * padded into its own (layoutDom.ts), so DOM content that fills its box
+ * (`sizing: "fill"`, `height: 100%`) fills what it was measured for and
+ * not the row's padding too.
+ */
+
+import type { Rect } from './layout';
+
+export interface HostContentInset {
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+}
+
+/** Where the content sits inside the element's box; null when the box is the frame (nothing to set). */
+export function hostContentInset(box: Rect, frame: Rect): HostContentInset | null {
+  const left = frame.x - box.x;
+  const top = frame.y - box.y;
+  if (left === 0 && top === 0 && frame.width === box.width && frame.height === box.height) return null;
+  return { left, top, width: frame.width, height: frame.height };
+}

package/src/layoutDom.ts

@@ -34,6 +34,7 @@
  */
 
 import type { LayoutEnvironment, LayoutNode, LayoutResult, Rect, ResolvedFont, TextLayout } from './layout';
+import { hostContentInset } from './hostInset';
 import { listRowBackgroundOf } from './layout';
 import { styleToCSS } from './styles';
 import type { ShapeStyle } from './protocol';
@@ -488,6 +489,26 @@ function setFlag(el: HTMLElement, key: string, value: string | null): void {
   }
 }
 
+/**
+ * A host's content element goes back into the engine's frame when the host
+ * is drawn in a bigger box (a list row's): src/hostInset.ts. In its own
+ * frame the stylesheet's `width: 100%` (and `height: 100%` for `fill`) hold.
+ */
+function positionHostContent(el: HTMLElement, box: Rect, frame: Rect): void {
+  const content = el.querySelector<HTMLElement>(':scope > .sb-host-content');
+  if (!content) return;
+  const inset = hostContentInset(box, frame);
+  const s = content.style;
+  const left = inset ? `${inset.left}px` : '';
+  const top = inset ? `${inset.top}px` : '';
+  const width = inset ? `${inset.width}px` : '';
+  const height = inset ? `${inset.height}px` : '';
+  if (s.left !== left) s.left = left;
+  if (s.top !== top) s.top = top;
+  if (s.width !== width) s.width = width;
+  if (s.height !== height) s.height = height;
+}
+
 /**
  * For leaf rows: pad the content frame back into place inside the row box.
  * `shift` moves vertically centered content (a one-line field's text) down
@@ -617,6 +638,9 @@ function applyChrome(
       padIntoFrame(el, box, frame);
       return;
     }
+    case 'host':
+      positionHostContent(el, box, frame);
+      return;
     case 'image': {
       const font = result.fonts.get(node.id);
       if (font) {