@swiftbrowser/web 0.5.5 → 0.5.6

package/package.json

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

@@ -1932,8 +1932,22 @@ export class LayoutPass {
         rowY += PICKER_INLINE_ROW_HEIGHT;
       }
     } else {
-      const valueWidth = Math.min(plan.valueWidth, size.width);
-      const labelWidth = Math.min(plan.labelWidth, Math.max(0, size.width - valueWidth - PICKER_MENU_GAP));
+      // Too little room for both: as an HStack shares it, the narrower of
+      // the two is offered half first and keeps what it needs; the other
+      // takes the rest and truncates (a long value, rather than its label).
+      const room = Math.max(0, size.width - PICKER_MENU_GAP);
+      let labelWidth = plan.labelWidth;
+      let valueWidth = plan.valueWidth;
+      if (labelWidth + valueWidth > room) {
+        if (labelWidth <= valueWidth) {
+          labelWidth = Math.min(labelWidth, room / 2);
+          valueWidth = room - labelWidth;
+        } else {
+          valueWidth = Math.min(valueWidth, room / 2);
+          labelWidth = room - valueWidth;
+        }
+      }
+      valueWidth = Math.min(valueWidth, size.width);
       chrome['label'] = { x, y, width: labelWidth, height: size.height };
       chrome['value'] = { x: x + size.width - valueWidth, y, width: valueWidth, height: size.height };
     }
@@ -2606,10 +2620,21 @@ export class LayoutPass {
       case 'image':
         if (node.id >= 0) this.fonts.set(node.id, scaledFont(ctx.font, ctx.imageScale));
         return;
-      case 'textfield':
-        // A vertical field draws its text in the context font (one-line fields in the body font).
-        if (node.props['axis'] === 'vertical' && node.id >= 0) this.fonts.set(node.id, ctx.font);
+      case 'textfield': {
+        // A field draws its text in the context font, so it sits on the same
+        // baseline as a label in that font beside it (a form row's).
+        if (node.id < 0) return;
+        this.fonts.set(node.id, ctx.font);
+        if (node.props['axis'] === 'vertical') return;
+        // Where a one-line Text centered in the field would sit: snapped with
+        // the frames, it lands where a label centered beside the field does,
+        // and the DOM puts the field's text there (layoutDom.ts). Keep the
+        // list row chrome a list set before placing.
+        const line = ctx.font.lineHeight;
+        const existing = this.chrome.get(node.id);
+        this.setChrome(node, { ...existing, text: { x, y: y + (size.height - line) / 2, width: size.width, height: line } });
         return;
+      }
       case 'spacer':
       case 'lazyspacer':
       case 'divider':

package/src/layoutDom.ts

@@ -363,18 +363,68 @@ function setFlag(el: HTMLElement, key: string, value: string | null): void {
   }
 }
 
-/** For leaf rows: pad the content frame back into place inside the row box. */
-function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect): void {
+/**
+ * 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
+ * (or up, negative) by padding twice as much above it (or below).
+ */
+function padIntoFrame(el: HTMLElement, box: Rect, frame: Rect, shift = 0): void {
   const s = el.style;
   const left = frame.x - box.x;
   const top = frame.y - box.y;
   const right = box.x + box.width - (frame.x + frame.width);
   const bottom = box.y + box.height - (frame.y + frame.height);
+  const above = Math.max(0, top) + Math.max(0, 2 * shift);
+  const below = Math.max(0, bottom) + Math.max(0, -2 * shift);
   if (left || top || right || bottom) {
-    s.padding = `${Math.max(0, top)}px ${Math.max(0, right)}px ${Math.max(0, bottom)}px ${Math.max(0, left)}px`;
-  } else if (s.padding) {
-    s.padding = '';
+    s.padding = `${above}px ${Math.max(0, right)}px ${below}px ${Math.max(0, left)}px`;
+    return;
   }
+  // Only the shift: above and below alone, the sides left to the stylesheet
+  // (a rounded border field's inset).
+  if (s.paddingLeft || s.paddingRight) s.padding = '';
+  const paddingTop = above ? `${above}px` : '';
+  const paddingBottom = below ? `${below}px` : '';
+  if (s.paddingTop !== paddingTop) s.paddingTop = paddingTop;
+  if (s.paddingBottom !== paddingBottom) s.paddingBottom = paddingBottom;
+}
+
+const fieldCapShifts = new Map<string, number>();
+
+/**
+ * How far a one-line field's text must move so its capitals sit where a
+ * text's do: styles.css trims a text's first line to its cap height and puts
+ * the capitals `--sb-cap-inset` (SF Pro's 0.2476em) below the line's top,
+ * whatever font the page has, but an input lays its line out with the
+ * font's own metrics. Where those put the capitals is measured in the page
+ * (canvas may resolve a font list to another face): a line trimmed to its
+ * cap height is shorter than an untrimmed one by just that. Once per font;
+ * none where texts are not trimmed (both then use the font's metrics).
+ */
+function fieldCapShift(font: ResolvedFont): number {
+  const cached = fieldCapShifts.get(font.css);
+  if (cached !== undefined) return cached;
+  let shift = 0;
+  if (typeof CSS !== 'undefined' && CSS.supports('text-box', 'trim-start cap alphabetic') && document.body) {
+    const probe = document.createElement('div');
+    probe.style.cssText = 'position:absolute;left:-9999px;top:0;visibility:hidden;white-space:pre';
+    const line = (trimmed: boolean): HTMLElement => {
+      const el = document.createElement('div');
+      el.style.font = font.css;
+      if (trimmed) el.style.setProperty('text-box', 'trim-start cap alphabetic');
+      el.textContent = 'H';
+      return probe.appendChild(el);
+    };
+    const whole = line(false);
+    const trimmed = line(true);
+    document.body.appendChild(probe);
+    const natural = whole.getBoundingClientRect().height - trimmed.getBoundingClientRect().height;
+    probe.remove();
+    shift = Math.round((0.2476 * font.size - natural) * 100) / 100;
+  }
+  // a web font still loading measures as its fallback: measure again next time
+  if (typeof document === 'undefined' || !document.fonts || document.fonts.status === 'loaded') fieldCapShifts.set(font.css, shift);
+  return shift;
 }
 
 function applyChrome(
@@ -419,12 +469,22 @@ function applyChrome(
       return;
     }
     case 'textfield':
-    case 'texteditor':
-      // A vertical text field draws in the font its lines were measured in,
-      // a leading apart.
-      setFont(el, result.fonts.get(node.id), el instanceof HTMLTextAreaElement ? 2 : 1);
-      padIntoFrame(el, box, frame);
+    case 'texteditor': {
+      // A field draws in its context's font (a vertical one, the font its
+      // lines were measured in, a leading apart).
+      const font = result.fonts.get(node.id);
+      setFont(el, font, el instanceof HTMLTextAreaElement ? 2 : 1);
+      // A one-line field's text sits where a centered Text's would (the
+      // engine's `text` rect, snapped as a label beside it is): the input
+      // centers its line in the frame, so move it by the difference.
+      const line = chrome?.['text'];
+      const shift =
+        el instanceof HTMLInputElement && font
+          ? fieldCapShift(font) + (line ? line.y - frame.y - (frame.height - font.lineHeight) / 2 : 0)
+          : 0;
+      padIntoFrame(el, box, frame, shift);
       return;
+    }
     // Phase 8 controls: their chrome sits at the engine's rects inside the element's box.
     case 'stepper':
       placeChrome(el.querySelector<HTMLElement>(':scope > .sb-stepper-control'), chrome?.['control'], box);

package/src/styles.css

@@ -716,12 +716,29 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   font: inherit;
   font-size: var(--sb-font-size-body);
   line-height: 1.3;
+  /* the text starts at the field's edge, as SwiftUI's does (no UA padding) */
+  padding: 0;
+  /* `.multilineTextAlignment` reaches fields as it reaches text (inputs reset it) */
+  text-align: inherit;
   color: var(--sb-color-primary);
   background: transparent;
   border: 0;
   outline: none;
 }
 
+/* `.multilineTextAlignment` on a view: the fields inside inherit it (texts set their own). */
+[data-sb-text-align="leading"] {
+  text-align: left;
+}
+
+[data-sb-text-align="center"] {
+  text-align: center;
+}
+
+[data-sb-text-align="trailing"] {
+  text-align: right;
+}
+
 .sb-textfield::placeholder {
   color: var(--sb-color-placeholder);
 }

package/src/symbols.ts

@@ -421,6 +421,48 @@ import {
   ZoomIn,
   ZoomOut,
   createElement,
+  AlignCenterHorizontal,
+  AlignCenterVertical,
+  AlignHorizontalDistributeCenter,
+  AlignStartHorizontal,
+  AlignStartVertical,
+  Box,
+  Braces,
+  CircleDashed,
+  Club,
+  Columns3,
+  CornerDownRight,
+  CornerUpLeft,
+  CornerUpRight,
+  Dice1,
+  Dice2,
+  Dice3,
+  Dice4,
+  Dice5,
+  Dice6,
+  Diff,
+  Divide,
+  Equal,
+  FastForward,
+  FlipHorizontal2,
+  FlipVertical2,
+  Layers2,
+  MemoryStick,
+  Move3d,
+  PinOff,
+  Radical,
+  Rewind,
+  Rotate3d,
+  RotateCcwSquare,
+  RotateCwSquare,
+  Scale3d,
+  Signature,
+  SlidersVertical,
+  Spade,
+  Table,
+  Tablet,
+  TextCursor,
+  Waves,
   type IconNode,
 } from 'lucide';
 
@@ -467,6 +509,70 @@ const SQUARE_ON_CIRCLE_FILL: IconNode = [
   ['rect', { x: '9', y: '9', width: '13', height: '13', rx: '3', stroke: KNOCKOUT_COLOR, 'stroke-width': '2.4' }],
 ];
 
+/**
+ * A numeral in a circle or rounded square (`1.circle`, `1.square.fill`):
+ * lucide has none, so the numeral is drawn in its stroke style, the
+ * enclosure the size `enclosed` gives other glyphs'.
+ */
+const NUMERALS: Readonly<Record<string, IconNode>> = {
+  // each about 5 wide and 9 high, centered on the glyph's middle
+  '0': [['rect', { x: '9.5', y: '7.5', width: '5', height: '9', rx: '2.5' }]],
+  // a stem with a flag at its top, as lucide's `Heading1` draws its 1
+  '1': [['path', { d: 'M9.5 9.5 12.5 7.5v9' }]],
+  '2': [['path', { d: 'M9.5 9.75a2.5 2.5 0 0 1 5 0c0 1.4-.9 2.4-2 3.5L9.5 16.5h5' }]],
+  '3': [['path', { d: 'M9.5 7.5h5L12 11a2.75 2.75 0 1 1-1.94 4.69' }]],
+  '4': [['path', { d: 'M13.5 16.5v-9L9 13.5h6' }]],
+  '5': [['path', { d: 'M14.5 7.5H10l-.5 4.25c.7-.5 1.5-.75 2.5-.75a2.75 2.75 0 0 1 0 5.5c-1 0-2-.5-2.5-1.25' }]],
+  '6': [
+    ['path', { d: 'M14 7.5c-2.5 1-4.5 3.5-4.5 6.5' }],
+    ['circle', { cx: '12', cy: '14', r: '2.5' }],
+  ],
+  '7': [['path', { d: 'M9.5 7.5h5l-3.5 9' }]],
+  '8': [
+    ['circle', { cx: '12', cy: '9.5', r: '2' }],
+    ['circle', { cx: '12', cy: '14', r: '2.5' }],
+  ],
+  '9': [
+    ['circle', { cx: '12', cy: '10', r: '2.5' }],
+    ['path', { d: 'M14.5 10c0 3-2 5.5-4.5 6.5' }],
+  ],
+};
+
+function numeral(digit: string, enclosure: 'circle' | 'square'): IconNode {
+  const outer: IconNode[number] =
+    enclosure === 'circle' ? ['circle', { cx: '12', cy: '12', r: '10' }] : ['rect', { x: '3', y: '3', width: '18', height: '18', rx: '4' }];
+  return [outer, ...NUMERALS[digit]!];
+}
+
+/** `0.circle` … `9.square.fill`: every numeral, in a circle or a square, outlined or filled. */
+const NUMERAL_SYMBOLS: Record<string, SymbolGlyph> = Object.fromEntries(
+  Object.keys(NUMERALS).flatMap((digit) =>
+    (['circle', 'square'] as const).flatMap((enclosure) => [
+      [`${digit}.${enclosure}`, { icon: numeral(digit, enclosure), fill: 'outline' }],
+      [`${digit}.${enclosure}.fill`, { icon: numeral(digit, enclosure), fill: 'knockout' }],
+    ]),
+  ),
+);
+
+/** `info`: the i on its own (lucide draws it only in a circle), a foot under its stem. */
+const INFO: IconNode = [
+  ['path', { d: 'M10 10h2v10' }],
+  ['path', { d: 'M9.5 20h5' }],
+  ['path', { d: 'M12 5h.01' }],
+];
+
+/** `exclamationmark`: the mark on its own. */
+const EXCLAMATIONMARK: IconNode = [
+  ['path', { d: 'M12 4v11' }],
+  ['path', { d: 'M12 20h.01' }],
+];
+
+/** `questionmark`: lucide's `CircleQuestionMark` mark on its own, scaled up to fill the glyph. */
+const QUESTIONMARK: IconNode = [
+  ['path', { d: 'M6.91 6.53a5.25 5.25 0 0 1 10.2 1.75c0 3.5-5.25 5.25-5.25 5.25' }],
+  ['path', { d: 'M12 20.5h.01' }],
+];
+
 const outline = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'outline' });
 const knockout = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'knockout' });
 const solid = (icon: IconNode): SymbolGlyph => ({ icon, fill: 'solid' });
@@ -491,6 +597,7 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'minus.circle.fill': knockout(CircleMinus),
   'info.circle': outline(Info),
   'info.circle.fill': knockout(Info),
+  questionmark: outline(QUESTIONMARK),
   'questionmark.circle': outline(CircleQuestionMark),
   'questionmark.circle.fill': knockout(CircleQuestionMark),
   'exclamationmark.circle': outline(CircleAlert),
@@ -506,6 +613,90 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'circle.fill': solid(Circle),
   'circle.inset.filled': outline(CircleDot),
   'largecircle.fill.circle': outline(CircleDot),
+  ...NUMERAL_SYMBOLS,
+  // media, keys, math, dice and cards, layout and 3D tools, the bare info and exclamation marks
+  backward: outline(Rewind),
+  'backward.fill': solid(Rewind),
+  forward: outline(FastForward),
+  'forward.fill': solid(FastForward),
+  goforward: outline(RotateCw),
+  gobackward: outline(RotateCcw),
+  cube: outline(Box),
+  'cube.fill': outline(Box),
+  shift: outline(ArrowBigUp),
+  'shift.fill': solid(ArrowBigUp),
+  control: outline(ChevronUp),
+  curlybraces: outline(Braces),
+  equal: outline(Equal),
+  divide: outline(Divide),
+  multiply: outline(X),
+  plusminus: outline(Diff),
+  'x.squareroot': outline(Radical),
+  'die.face.1': outline(Dice1),
+  'die.face.2': outline(Dice2),
+  'die.face.3': outline(Dice3),
+  'die.face.4': outline(Dice4),
+  'die.face.5': outline(Dice5),
+  'die.face.6': outline(Dice6),
+  'die.face.1.fill': knockout(Dice1),
+  'die.face.2.fill': knockout(Dice2),
+  'die.face.3.fill': knockout(Dice3),
+  'die.face.4.fill': knockout(Dice4),
+  'die.face.5.fill': knockout(Dice5),
+  'die.face.6.fill': knockout(Dice6),
+  display: outline(Monitor),
+  ipad: outline(Tablet),
+  internaldrive: outline(HardDrive),
+  memorychip: outline(MemoryStick),
+  // lucide names its flips by the axis line: its FlipVertical2 mirrors left to right
+  'flip.horizontal': outline(FlipVertical2),
+  'flip.vertical': outline(FlipHorizontal2),
+  'rotate.left': outline(RotateCcwSquare),
+  'rotate.right': outline(RotateCwSquare),
+  'align.horizontal.left': outline(AlignStartVertical),
+  'align.horizontal.center': outline(AlignCenterVertical),
+  'align.vertical.top': outline(AlignStartHorizontal),
+  'align.vertical.center': outline(AlignCenterHorizontal),
+  'distribute.horizontal.center': outline(AlignHorizontalDistributeCenter),
+  'move.3d': outline(Move3d),
+  'rotate.3d': outline(Rotate3d),
+  'scale.3d': outline(Scale3d),
+  'square.2.layers.3d': outline(Layers2),
+  'square.3.layers.3d': outline(Layers3),
+  'square.3.stack.3d': outline(Layers),
+  'hand.point.up.left': outline(Pointer),
+  'pin.slash': outline(PinOff),
+  'square.dotted': outline(SquareDashed),
+  'rectangle.dashed': outline(SquareDashed),
+  'circle.dashed': outline(CircleDashed),
+  'rectangle.split.3x1': outline(Columns3),
+  tablecells: outline(Table),
+  'tablecells.fill': outline(Table),
+  signature: outline(Signature),
+  'sidebar.leading': outline(PanelLeft),
+  'sidebar.trailing': outline(PanelRight),
+  'slider.vertical.3': outline(SlidersVertical),
+  'suit.heart': outline(Heart),
+  'suit.heart.fill': solid(Heart),
+  'suit.club': outline(Club),
+  'suit.club.fill': solid(Club),
+  'suit.spade': outline(Spade),
+  'suit.spade.fill': solid(Spade),
+  'suit.diamond': outline(Diamond),
+  'suit.diamond.fill': solid(Diamond),
+  target: outline(Target),
+  'water.waves': outline(Waves),
+  'text.cursor': outline(TextCursor),
+  'arrow.turn.down.left': outline(CornerDownLeft),
+  'arrow.turn.down.right': outline(CornerDownRight),
+  'arrow.turn.up.left': outline(CornerUpLeft),
+  'arrow.turn.up.right': outline(CornerUpRight),
+  'chevron.compact.down': outline(ChevronDown),
+  'chevron.compact.up': outline(ChevronUp),
+  'chevron.compact.left': outline(ChevronLeft),
+  'chevron.compact.right': outline(ChevronRight),
+  info: outline(INFO),
+  exclamationmark: outline(EXCLAMATIONMARK),
   square: outline(Square),
   'square.fill': solid(Square),
   star: outline(Star),