@swiftbrowser/web 0.3.0 → 0.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "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/layout/engine.ts

@@ -151,6 +151,10 @@ const LIST_CELL_PADDING = 16;
 // is a sentence-case headline-sized line that starts 9 into the 35 gap
 // between cards and ends 10 above its card.
 const LIST_ROW_VPAD = 13;
+// A row holding just a toggle or a stepper has 10 above and below it (so
+// both come out 52 tall); a segmented picker has 14 (60 tall).
+const LIST_ROW_CONTROL_VPAD = 10;
+const LIST_ROW_SEGMENTED_VPAD = 14;
 const LIST_ROW_MIN_HEIGHT = 52;
 const LIST_TOP = 18;
 const LIST_BOTTOM = 20;
@@ -158,6 +162,8 @@ const LIST_HEADER_LIFT = 9;
 const LIST_HEADER_GAP = 10;
 const LIST_FOOTER_GAP = 6;
 const LIST_SECTION_GAP = 35;
+// Below a section's footer the gap to the next section is 12 shorter.
+const LIST_SECTION_GAP_AFTER_FOOTER = 23;
 const LIST_CHEVRON_WIDTH = 20;
 // Phase 4.
 // iOS 26: the tab bar is a 62-tall glass capsule floating 21 from the sides
@@ -460,6 +466,19 @@ function cellStyle(node: LayoutNode, key: string): unknown {
   return undefined;
 }
 
+/** The default vertical padding above and below a list row's content. */
+function listRowVPad(row: LayoutNode): number {
+  switch (row.kind) {
+    case 'picker':
+      return str(row.props['style']) === 'segmented' ? LIST_ROW_SEGMENTED_VPAD : 0;
+    case 'toggle':
+    case 'stepper':
+      return LIST_ROW_CONTROL_VPAD;
+    default:
+      return LIST_ROW_VPAD;
+  }
+}
+
 /** `gridCellColumns` of a grid cell (at least 1). */
 function gridSpanOf(node: LayoutNode): number {
   const span = num(cellStyle(node, 'gridCellColumns'));
@@ -472,6 +491,20 @@ function gridAnchorOf(node: LayoutNode): [number, number] | null {
   return point ? [point.x, point.y] : null;
 }
 
+/** `gridColumnAlignment` of a grid cell as a horizontal unit anchor. */
+function gridColumnAnchorOf(node: LayoutNode): number | null {
+  switch (str(cellStyle(node, 'gridColumnAlignment'))) {
+    case 'leading':
+      return 0;
+    case 'center':
+      return 0.5;
+    case 'trailing':
+      return 1;
+    default:
+      return null;
+  }
+}
+
 /** Vertical anchor of a `gridrow` alignment (null → the grid's). */
 function rowAnchor(alignment: string | null, gridAlignment: string): number {
   switch (alignment) {
@@ -892,6 +925,8 @@ interface GridPlan {
   size: Size;
   columns: number[];
   columnX: number[];
+  /** Horizontal unit anchor per column from a cell's `gridColumnAlignment` (null → the grid's). */
+  columnAnchors: (number | null)[];
   rows: GridRowPlan[];
 }
 
@@ -1310,8 +1345,15 @@ export class LayoutPass {
           height: style === 'plain' ? TEXTFIELD_HEIGHT_PLAIN : TEXTFIELD_HEIGHT_ROUNDED,
         };
       }
-      case 'color':
       case 'shape':
+        if (node.props['shape'] === 'circle') {
+          // SwiftUI's `Circle` is the largest square in the proposal (so in a
+          // stack it gives the leftover width to its siblings).
+          // An open axis counts as SHAPE_DEFAULT, as for the other shapes.
+          return square(Math.min(p.width ?? SHAPE_DEFAULT, p.height ?? SHAPE_DEFAULT));
+        }
+        return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
+      case 'color':
       case 'canvas':
         return { width: p.width ?? SHAPE_DEFAULT, height: p.height ?? SHAPE_DEFAULT };
       case 'video':
@@ -2178,7 +2220,11 @@ export class LayoutPass {
       };
       for (let g = 0; g < groupsSource.length; g++) {
         const source = groupsSource[g] as GroupSource;
-        if (g > 0) y += sectionGap;
+        const previous = groups[g - 1];
+        if (previous) {
+          const footed = previous.footer !== null || (previous.footerView !== null && previous.footerView.rect.height > 0);
+          y += plain ? sectionGap : footed ? LIST_SECTION_GAP_AFTER_FOOTER : sectionGap;
+        }
         const top = y;
         let header: ListGroupPlan['header'] = null;
         let footer: ListGroupPlan['footer'] = null;
@@ -2205,13 +2251,12 @@ export class LayoutPass {
             continue;
           }
           // A menu or inline picker already reports its row height (44 for
-          // a menu, 44 per option inline); other rows (a segmented picker
-          // too) get the 13px vertical padding. Phase 6
+          // a menu, 44 per option inline); a toggle, stepper or segmented
+          // picker has its own vertical padding, other rows 13. Phase 6
           // `listRowInsets` replaces all four insets; a `badge` reserves its
           // width (plus a gap) at the trailing edge.
           const hints = rowHintsOf(rowNode);
-          const unwrappedRow = unwrapStyled(rowNode);
-          const defaultVPad = unwrappedRow.kind === 'picker' && str(unwrappedRow.props['style']) !== 'segmented' ? 0 : LIST_ROW_VPAD;
+          const defaultVPad = listRowVPad(unwrapStyled(rowNode));
           const insets: EdgeInsets = hints.insets ?? {
             top: defaultVPad,
             leading: LIST_CELL_PADDING,
@@ -3613,8 +3658,12 @@ export class LayoutPass {
    * whose non-spanning cells are all flexible (or that has none) is flexible;
    * the others take the largest ideal width of their non-spanning cells. The
    * flexible columns share what is left of the proposal width equally (their
-   * ideal width with a nil proposal). Row heights come from measuring every
-   * cell at its cell width; a non-`gridrow` child is one full-span cell.
+   * ideal width with a nil proposal). A non-`gridrow` child is one full-span
+   * cell; one wider than the columns (a `Divider` takes the whole proposal)
+   * widens the grid, every column by the same amount (unless it has
+   * `gridCellUnsizedAxes(.horizontal)`). Row heights come from
+   * measuring every cell at its cell width. A cell's `gridColumnAlignment`
+   * aligns its whole column.
    */
   private gridPlan(node: LayoutNode, ctx: Context, p: Proposal): GridPlan {
     return this.plan(node, p, () => {
@@ -3677,6 +3726,30 @@ export class LayoutPass {
           if (flexible[j]) columns[j] = flexibleCount > 0 ? remaining / flexibleCount : 0;
         }
       }
+      // Full-span children wider than the columns widen every column alike.
+      const fullProposal: Proposal = { width: finite(p.width) ? p.width : null, height: null };
+      let fullWidth = 0;
+      for (const source of sources) {
+        if (!source.full) continue;
+        const cctx = this.gridCellContext(node, null, ctx);
+        for (const cell of source.cells) {
+          if (cellStyle(cell.node, 'gridCellUnsizedAxes') === true) continue;
+          fullWidth = Math.max(fullWidth, this.measure(cell.node, cctx, fullProposal).width);
+        }
+      }
+      const columnsWidth = columns.reduce((sum, w) => sum + w, 0) + hSpacing * (columnCount - 1);
+      if (fullWidth > columnsWidth + EPSILON) {
+        const extra = (fullWidth - columnsWidth) / columnCount;
+        for (let j = 0; j < columnCount; j++) columns[j] = (columns[j] as number) + extra;
+      }
+      const columnAnchors = new Array<number | null>(columnCount).fill(null);
+      for (const source of sources) {
+        if (source.full) continue;
+        for (const cell of source.cells) {
+          const anchor = cell.span === 1 ? gridColumnAnchorOf(cell.node) : null;
+          if (anchor !== null && columnAnchors[cell.column] === null) columnAnchors[cell.column] = anchor;
+        }
+      }
       const columnX = new Array<number>(columnCount).fill(0);
       for (let j = 1; j < columnCount; j++) {
         columnX[j] = (columnX[j - 1] as number) + (columns[j - 1] as number) + hSpacing;
@@ -3713,7 +3786,7 @@ export class LayoutPass {
         y += height + vSpacing;
       }
       const gridHeight = rows.length > 0 ? y - vSpacing : 0;
-      return { size: { width: gridWidth, height: gridHeight }, columns, columnX, rows };
+      return { size: { width: gridWidth, height: gridHeight }, columns, columnX, columnAnchors, rows };
     });
   }
 
@@ -3727,7 +3800,8 @@ export class LayoutPass {
       const rowY = rowAnchor(row.alignment, gridAlignment);
       for (const cell of row.cells) {
         const box: Size = { width: cell.width, height: row.height };
-        const [ax, ay] = gridAnchorOf(cell.node) ?? [gridX, rowY];
+        const columnX = cell.full ? null : (plan.columnAnchors[cell.column] ?? null);
+        const [ax, ay] = gridAnchorOf(cell.node) ?? [columnX ?? gridX, rowY];
         const dx = safeOffset(box.width, cell.size.width, ax);
         const dy = safeOffset(box.height, cell.size.height, ay);
         const cellX = cell.full ? 0 : (plan.columnX[cell.column] ?? 0);

package/src/styles.css

@@ -1026,6 +1026,23 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
+/* A text field row is the <input> (or <textarea>) itself, which has no
+   ::after: its separator is a 1px background image in the same place. */
+.sb-section-rows > :is(input, textarea):not(:last-child),
+.sb-list-content > :is(input, textarea):not(:last-child):not(:has(+ .sb-section)) {
+  background-image: linear-gradient(var(--sb-color-row-separator), var(--sb-color-row-separator));
+  background-repeat: no-repeat;
+  background-position: var(--sb-separator-leading, 16px) 100%;
+  background-size: calc(100% - var(--sb-separator-leading, 16px) - 16px) 1px;
+}
+
+.sb-section-rows > :is(input, textarea)[data-sb-separator-bottom="hidden"],
+.sb-list-content > :is(input, textarea)[data-sb-separator-bottom="hidden"],
+.sb-section-rows > :is(input, textarea):has(+ [data-sb-separator-top="hidden"]),
+.sb-list-content > :is(input, textarea):has(+ [data-sb-separator-top="hidden"]) {
+  background-image: none;
+}
+
 .sb-section-rows > .sb-button,
 .sb-list-content > .sb-button {
   border-radius: 0;