@swiftbrowser/web 0.5.3 → 0.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.5.3",
+  "version": "0.5.4",
   "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

@@ -252,6 +252,11 @@ const NAV_GLASS_SIZE = 44;
 const NAV_GLASS_PAD_H = 12;
 const NAV_GROUP_SPACING = 8;
 
+/** Whether any text is laid out in an item (a bottom bar pads text items as text). */
+function hasText(item: LayoutNode): boolean {
+  return item.kind === 'text' || item.children.some(hasText);
+}
+
 /** A bar item that is only a symbol (an `image`, or a button, menu or link around one). */
 function isSymbolItem(item: LayoutNode): boolean {
   const inner = unwrapStyled(item);
@@ -268,11 +273,15 @@ function navSlot(item: LayoutNode, width: number): number {
 // bottom toolbar's items float on Liquid Glass in a 48 row 28 above the
 // screen bottom (as the search field does) and 28 in from the sides.
 // Consecutive items share a capsule: an icon takes a 50 slot, text its width
-// and 18 either side, 6 between slots; a lone icon is a 48 circle.
+// and 18 either side, 6 between slots; a lone icon is a 48 circle. An item
+// with no text (symbols, a symbol and a chevron, a custom view) is an icon
+// at any width: at least 50, else its width and 8 either side, so a little
+// more width gives it a little more room (not text's 18 a side).
 const BOTTOM_GLASS_HEIGHT = 48;
 const BOTTOM_GLASS_MARGIN_H = 28;
 const BOTTOM_ICON_SLOT = 50;
 const BOTTOM_TEXT_PAD_H = 18;
+const BOTTOM_ICON_PAD_H = 8;
 const BOTTOM_ITEM_GAP = 6;
 /** A fixed `ToolbarSpacer` between two bottom groups. */
 const BOTTOM_FIXED_SPACER = 8;
@@ -3435,7 +3444,11 @@ export class LayoutPass {
       const itemCtx = this.childContext(toolbar, cctx);
       for (const node of toolbar.children) {
         const size = this.measure(node, itemCtx, { width: null, height: null });
-        const slot = size.width < NAV_GLASS_SIZE ? BOTTOM_ICON_SLOT : size.width + 2 * BOTTOM_TEXT_PAD_H;
+        const slot = !hasText(node)
+          ? Math.max(BOTTOM_ICON_SLOT, size.width + 2 * BOTTOM_ICON_PAD_H)
+          : size.width < NAV_GLASS_SIZE
+            ? BOTTOM_ICON_SLOT
+            : size.width + 2 * BOTTOM_TEXT_PAD_H;
         open.push({ node, toolbar, size, slot });
       }
     }

package/src/symbols.ts

@@ -141,6 +141,7 @@ import {
   Crown,
   Database,
   Delete,
+  Eraser,
   Diamond,
   Dices,
   Dog,
@@ -251,6 +252,7 @@ import {
   MonitorPlay,
   Moon,
   Mountain,
+  MousePointer2,
   Music,
   Navigation2,
   Network,
@@ -343,6 +345,7 @@ import {
   SquareMinus,
   SquareParking,
   SquarePen,
+  SquareDashed,
   SquarePlay,
   SquarePlus,
   SquareUser,
@@ -558,6 +561,10 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   trash: outline(Trash),
   'trash.fill': outline(Trash),
   pencil: outline(Pencil),
+  // The editing tools of a drawing app: the pointer (macOS's arrow), a marquee, the eraser.
+  cursorarrow: outline(MousePointer2),
+  'square.dashed': outline(SquareDashed),
+  eraser: outline(Eraser),
   'square.and.pencil': outline(SquarePen),
   'doc.on.doc': outline(Copy),
   'doc.on.clipboard': outline(Clipboard),