@swiftbrowser/web 0.5.4 → 0.5.5

package/package.json

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

@@ -45,7 +45,7 @@ import {
   type GradientStop,
   type ShapeStyle,
 } from './protocol';
-import { MATERIAL_ALPHA, colorToCSS, styleToCSS } from './styles';
+import { colorToCSS, materialAlpha, styleToCSS } from './styles';
 
 const SVG_NS = 'http://www.w3.org/2000/svg';
 const LINE_WIDTH_DEFAULT = 2;
@@ -330,7 +330,7 @@ export function paintFor(doc: Document, defs: SVGDefsElement, style: ShapeStyle
   if (isColor(style)) return colorToCSS(style);
   if (isHierarchicalStyle(style)) return styleToCSS(style, 'paint').value;
   if (isMaterialStyle(style)) {
-    const alpha = (MATERIAL_ALPHA[style.material] ?? MATERIAL_ALPHA.regular) * clamp01(style.opacity ?? 1);
+    const alpha = materialAlpha(style.material) * clamp01(style.opacity ?? 1);
     return `rgba(${MATERIAL_GRAY}, ${r2(alpha * 0.5)})`;
   }
   const opacity = clamp01(style.opacity ?? 1);

package/src/layout/engine.ts

@@ -276,7 +276,8 @@ function navSlot(item: LayoutNode, width: number): number {
 // 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).
+// more width gives it a little more room (not text's 18 a side). Alone in its
+// group it is a circle only if it fits an icon's slot; wider, a capsule.
 const BOTTOM_GLASS_HEIGHT = 48;
 const BOTTOM_GLASS_MARGIN_H = 28;
 const BOTTOM_ICON_SLOT = 50;
@@ -1724,7 +1725,7 @@ export class LayoutPass {
 
   private buttonIsBordered(node: LayoutNode): boolean {
     const style = str(node.props['style']);
-    return style === 'bordered' || style === 'borderedProminent';
+    return style === 'bordered' || style === 'borderedProminent' || style === 'glass';
   }
 
   private measureButton(node: LayoutNode, ctx: Context, p: Proposal): Size {
@@ -3428,7 +3429,8 @@ export class LayoutPass {
     const close = (): void => {
       if (open.length === 0) return;
       const icon = (item: Item): boolean => item.size.width < NAV_GLASS_SIZE;
-      const lone = open.length === 1 && icon(open[0] as Item);
+      // a lone icon is a circle; a wider one (a symbol and a chevron) keeps its capsule
+      const lone = open.length === 1 && icon(open[0] as Item) && (open[0] as Item).slot <= BOTTOM_ICON_SLOT;
       if (lone) (open[0] as Item).slot = BOTTOM_GLASS_HEIGHT;
       const slots = open.reduce((sum, item) => sum + item.slot, 0);
       tokens.push({ kind: 'group', items: open, width: slots + (open.length - 1) * BOTTOM_ITEM_GAP });

package/src/protocol.ts

@@ -156,7 +156,8 @@ export interface ColorGradientStyle extends StyleOpacity {
   colorGradient: Color;
 }
 
-export type MaterialName = 'ultraThin' | 'thin' | 'regular' | 'thick' | 'ultraThick';
+/** `glass` / `glassClear`: iOS 26 Liquid Glass (`.glassEffect`), the bar buttons' fill with the glass rim. */
+export type MaterialName = 'ultraThin' | 'thin' | 'regular' | 'thick' | 'ultraThick' | 'glass' | 'glassClear';
 /** A translucent material: the system background at some opacity over a blurred backdrop. */
 export interface MaterialStyle extends StyleOpacity {
   material: MaterialName;
@@ -463,7 +464,7 @@ export interface HStackProps {
 export interface SpacerProps {
   minLength: number | null;
 }
-export type ButtonStyle = 'automatic' | 'plain' | 'bordered' | 'borderedProminent';
+export type ButtonStyle = 'automatic' | 'plain' | 'bordered' | 'borderedProminent' | 'glass';
 /** Phase 8: `cancel` is the role an `alert` draws apart (bold, or in its own card). */
 export type ButtonRole = 'destructive' | 'cancel' | null;
 /**

package/src/renderer.ts

@@ -583,7 +583,10 @@ export class Renderer {
     const active = document.activeElement;
     for (const input of this.root.querySelectorAll<HTMLElement>('.sb-textfield[data-sb-focus], .sb-texteditor[data-sb-focus]')) {
       const wanted = input.dataset['sbFocus'] === 'true';
-      if (wanted && active !== input) input.focus();
+      // `preventScroll`: a field in a sheet still sliding in sits below the
+      // screen, and the browser would scroll the whole screen to reveal it,
+      // blanking the page until something scrolls it back.
+      if (wanted && active !== input) input.focus({ preventScroll: true });
       else if (!wanted && active === input) input.blur();
     }
   }
@@ -3223,6 +3226,8 @@ function applyPaint(el: HTMLElement, paint: PaintCSS): void {
     s.setProperty('backdrop-filter', paint.backdropFilter);
     s.setProperty('-webkit-backdrop-filter', paint.backdropFilter);
   }
+  // Liquid Glass gets the rim (styles.css `[data-sb-glass]`).
+  el.toggleAttribute('data-sb-glass', paint.glass === true);
 }
 
 // Stacks, spacers and zstacks are pure layout: the engine reads their props

package/src/styles.css

@@ -108,7 +108,10 @@
   --sb-glass-selected: rgba(120, 120, 128, 0.16);
   --sb-color-segment-track: rgba(118, 118, 128, 0.12);
   --sb-color-segment-selected: #ffffff;
-  --sb-color-menu-background: rgba(250, 250, 250, 0.96);
+  /* Menus, floating sheets and alerts are Liquid Glass too: translucent
+     over a heavier backdrop blur, with the glass rim. */
+  --sb-color-menu-background: rgba(250, 250, 250, 0.82);
+  --sb-sheet-glass: rgba(255, 255, 255, 0.55);
 }
 
 .device[data-theme="dark"] {
@@ -167,7 +170,9 @@
   --sb-color-tabbar-background: rgba(29, 29, 29, 0.94);
   --sb-color-segment-track: rgba(118, 118, 128, 0.24);
   --sb-color-segment-selected: #5a5a5f;
-  --sb-color-menu-background: rgba(37, 37, 37, 0.96);
+  --sb-color-menu-background: rgba(37, 37, 37, 0.82);
+  /* The iPhone's dark floating sheet reads 42 over black: dark gray glass. */
+  --sb-sheet-glass: rgba(60, 60, 60, 0.7);
 }
 
 /* ---------------------------------------------------------------------------
@@ -500,14 +505,30 @@ html[data-sb-mode="device"] .device-screen {
   color: #ffffff;
 }
 
+/* `.buttonStyle(.glass)`: a Liquid Glass capsule (the bar buttons' fill,
+   blur and rim) in the tint. */
+.sb-button[data-sb-style="glass"] {
+  border-radius: 9999px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
+  color: var(--sb-button-color, var(--sb-tint, var(--sb-color-accent)));
+}
+
+/* `.glassEffect`: a shape painted with the `glass` material (renderer). */
+[data-sb-glass] {
+  box-shadow: var(--sb-glass-shadow);
+}
+
 /* iOS 26 draws a disabled bordered button gray rather than faded
    (`.disabled` marks the element around the button and dims it inline; the
    renderer keeps the undimmed opacity in `--sb-undimmed-opacity`). */
-[data-sb-disabled]:has(> .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"])) {
+[data-sb-disabled]:has(> .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"], [data-sb-style="glass"])) {
   opacity: var(--sb-undimmed-opacity, 1) !important;
 }
 
-[data-sb-disabled] > .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"]) {
+[data-sb-disabled] > .sb-button:is([data-sb-style="bordered"], [data-sb-style="borderedProminent"], [data-sb-style="glass"]) {
   background: var(--sb-color-secondary-fill);
   color: var(--sb-color-tertiary-label);
 }
@@ -1386,9 +1407,10 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
    rounded all around, over a lighter dim. */
 .sb-sheet[data-sb-floating] > .sb-sheet-card {
   border-radius: 38px;
-  background: color-mix(in srgb, var(--sb-color-sheet-background) 55%, transparent);
-  backdrop-filter: blur(24px) saturate(180%);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
+  /* Liquid Glass: the content behind shows as soft blobs under a heavy blur. */
+  background: var(--sb-sheet-glass);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
   box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
 }
 
@@ -1832,11 +1854,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   z-index: 6;
   border-radius: 13px;
   background: var(--sb-color-menu-background);
-  backdrop-filter: blur(30px) saturate(180%);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  box-shadow:
-    0 0 0 0.5px rgba(0, 0, 0, 0.08),
-    0 10px 40px rgba(0, 0, 0, 0.22);
+  backdrop-filter: blur(40px) saturate(180%);
+  -webkit-backdrop-filter: blur(40px) saturate(180%);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.22);
   overflow: hidden;
   transform-origin: 50% 0;
   animation: sb-menu-in 0.18s cubic-bezier(0.2, 0.8, 0.2, 1) both;
@@ -2211,7 +2231,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
    dimmest at the top-right and bottom-left). A gradient-filled pseudo-element
    the size of the surface, masked to its outer 1px (the content box cut out
    of the padding box); it takes no input and sits above the surface's items,
-   which never reach the edge. */
+   which never reach the edge. The surfaces: bar buttons and capsules, the
+   tab bar, the search field, the sidebar toggle, menus, floating sheets,
+   alert and dialog cards, `.glass` buttons and `.glassEffect` shapes. */
 .sb-navbar-back::after,
 .sb-navbar-more::after,
 .sb-tabbar::after,
@@ -2219,7 +2241,14 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-toolbar[data-sb-placement="trailing"]::after,
 .sb-bottom-glass::after,
 .sb-searchfield::after,
-.sb-navsplit-toggle::after {
+.sb-navsplit-toggle::after,
+.sb-picker-menu::after,
+.sb-picker-menu-exit::after,
+.sb-sheet[data-sb-floating] > .sb-sheet-card::after,
+.sb-alert-card::after,
+.sb-alert-cancel-card::after,
+.sb-button[data-sb-style="glass"]::after,
+[data-sb-glass]::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -3139,8 +3168,9 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   box-sizing: border-box;
   border-radius: 14px;
   background: color-mix(in srgb, var(--sb-color-secondary-system-background) 85%, transparent);
-  -webkit-backdrop-filter: blur(24px) saturate(180%);
-  backdrop-filter: blur(24px) saturate(180%);
+  /* Liquid Glass: a heavy blur (what is behind an iPhone's alert is a formless glow). */
+  -webkit-backdrop-filter: blur(60px) saturate(180%);
+  backdrop-filter: blur(60px) saturate(180%);
   overflow: hidden;
 }
 

package/src/styles.ts

@@ -106,6 +106,8 @@ export type PaintRole = 'text' | 'paint';
 export interface PaintCSS {
   /** `color` for a flat style, `gradient` for a CSS `<image>`, `material` for a translucent fill. */
   kind: 'color' | 'gradient' | 'material';
+  /** Liquid Glass: the element also gets the glass rim (`data-sb-glass`). */
+  glass?: boolean;
   /**
    * What to paint with: a `<color>` (`color`, `material`) or an `<image>`
    * (`gradient`). Valid as a `background` shorthand value either way.
@@ -137,7 +139,7 @@ const HIERARCHICAL_PAINT: Record<1 | 2 | 3 | 4, string> = {
 };
 
 /** Opacity of the system background each material shows over the blurred backdrop. */
-export const MATERIAL_ALPHA: Record<MaterialName, number> = {
+export const MATERIAL_ALPHA: Record<Exclude<MaterialName, 'glass' | 'glassClear'>, number> = {
   ultraThin: 0.55,
   thin: 0.7,
   regular: 0.82,
@@ -145,6 +147,15 @@ export const MATERIAL_ALPHA: Record<MaterialName, number> = {
   ultraThick: 0.96,
 };
 export const MATERIAL_BLUR = 'blur(20px)';
+/** Liquid Glass (`glass`, `glassClear`): the bar buttons' fill (`clear` at half of it) and blur; the renderer adds the rim. */
+export const GLASS_BLUR = 'blur(20px) saturate(180%)';
+
+/** The opacity a material's fill has (glass: the light fill's 70%, clear glass half of it). */
+export function materialAlpha(name: MaterialName): number {
+  if (name === 'glass') return 0.7;
+  if (name === 'glassClear') return 0.35;
+  return MATERIAL_ALPHA[name] ?? MATERIAL_ALPHA.regular;
+}
 
 /**
  * Resolve a ShapeStyle for a role. Unknown shapes resolve to magenta so they
@@ -180,8 +191,12 @@ export function styleToCSS(style: ShapeStyle, role: PaintRole): PaintCSS {
     const dark = withOpacity(`color-mix(in srgb, ${base}, black 12%)`, opacity);
     return { kind: 'gradient', value: `linear-gradient(to bottom, ${light}, ${dark})`, solid: withOpacity(base, opacity) };
   }
+  if (isMaterialStyle(style) && (style.material === 'glass' || style.material === 'glassClear')) {
+    const value = style.material === 'glass' ? 'var(--sb-glass-background)' : 'color-mix(in srgb, var(--sb-glass-background) 50%, transparent)';
+    return { kind: 'material', value, solid: value, backdropFilter: GLASS_BLUR, glass: true };
+  }
   if (isMaterialStyle(style)) {
-    const alpha = MATERIAL_ALPHA[style.material] ?? MATERIAL_ALPHA.regular;
+    const alpha = MATERIAL_ALPHA[style.material as keyof typeof MATERIAL_ALPHA] ?? MATERIAL_ALPHA.regular;
     const value = `rgba(var(--sb-color-material-base), ${round(alpha * (opacity == null || !Number.isFinite(opacity) ? 1 : clamp01(opacity)))})`;
     return { kind: 'material', value, solid: value, backdropFilter: MATERIAL_BLUR };
   }