@swiftbrowser/web 0.4.0 → 0.5.0

package/src/styles.css

@@ -1,7 +1,7 @@
 /* ---------------------------------------------------------------------------
    iOS design tokens. Light values live on the device frame; dark ones switch
-   with the frame's data-theme so the page chrome and the "phone" are
-   independent.
+   with the frame's data-theme so the page around it (page.css) and the
+   "phone" are independent.
    ------------------------------------------------------------------------- */
 
 :root {
@@ -15,15 +15,6 @@
      overrides this with the current size (see .device below). */
   --sb-font-size-body: 17px;
 
-  /* Page chrome (not iOS) */
-  --page-bg: #e9e9ee;
-  --page-fg: #1c1c1e;
-  --page-muted: #6e6e73;
-  --page-border: rgba(0, 0, 0, 0.08);
-  --page-surface: rgba(255, 255, 255, 0.8);
-  --page-error-bg: #ffe5e5;
-  --page-error-fg: #a1000d;
-
   /* Device dimensions (iPhone 15 Pro logical points) */
   --device-screen-width: 393px;
   --device-screen-height: 852px;
@@ -41,18 +32,6 @@
   --sb-inset-left: env(safe-area-inset-left, 0px);
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --page-bg: #111114;
-    --page-fg: #f2f2f7;
-    --page-muted: #98989f;
-    --page-border: rgba(255, 255, 255, 0.1);
-    --page-surface: rgba(28, 28, 30, 0.85);
-    --page-error-bg: #3a0b10;
-    --page-error-fg: #ff8a8a;
-  }
-}
-
 .device {
   /* Dynamic Type: main.ts writes --sb-ts-<style>-size / -lh / -scale on the
      device frame for the selected size (typography.ts); the fallbacks are the
@@ -164,159 +143,28 @@
 }
 
 /* ---------------------------------------------------------------------------
-   Page layout
+   The renderer's boxes size by their borders. Only its own DOM: a page that
+   draws an island (@swiftbrowser/react) keeps its own box model.
    ------------------------------------------------------------------------- */
 
-*,
-*::before,
-*::after {
+.device,
+.device *,
+.device *::before,
+.device *::after {
   box-sizing: border-box;
 }
 
-html,
-body {
-  margin: 0;
-  min-height: 100%;
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  background: var(--page-bg);
-  color: var(--page-fg);
-  font-family: var(--sb-font-family);
-  font-size: 14px;
-  -webkit-font-smoothing: antialiased;
-}
-
-.toolbar {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 16px;
-  background: var(--page-surface);
-  border-bottom: 1px solid var(--page-border);
-  backdrop-filter: blur(16px);
-}
-
-.toolbar-brand {
-  font-weight: 600;
-  letter-spacing: -0.01em;
-}
-
-.toolbar-sep {
-  width: 1px;
-  height: 18px;
-  background: var(--page-border);
-}
-
-.toolbar-label {
-  color: var(--page-muted);
-}
-
-.toolbar-value {
-  font-variant-numeric: tabular-nums;
-  padding: 2px 8px;
-  border-radius: 6px;
-  background: var(--page-border);
-}
-
-.toolbar-spacer {
-  flex: 1 1 0;
-}
-
-/* Hot-reload indicator, driven by the dev server's sb:build-* events. */
-.toolbar-build {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--page-muted);
-}
-
-.toolbar-build[hidden] {
-  display: none;
-}
-
-.toolbar-build::before {
-  content: "";
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  border: 1.5px solid currentColor;
-  border-top-color: transparent;
-  animation: sb-spin 0.9s linear infinite;
-}
-
-.toolbar-build[data-state="error"] {
-  color: var(--page-error-fg);
-}
-
-.toolbar-build[data-state="error"]::before {
-  animation: none;
-  border-color: currentColor;
-}
-
-.toolbar-button {
-  font: inherit;
-  padding: 6px 12px;
-  border: 1px solid var(--page-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--page-fg);
-  cursor: pointer;
-}
-
-.toolbar-button:hover {
-  background: var(--page-border);
-}
-
-.toolbar-button[aria-pressed="true"] {
-  background: var(--page-fg);
-  color: var(--page-bg);
-  border-color: transparent;
-}
-
-.toolbar-select {
-  font: inherit;
-  padding: 5px 8px;
-  border: 1px solid var(--page-border);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--page-fg);
-  cursor: pointer;
-}
-
-.stage {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-  padding: 32px 16px 48px;
-}
-
-.status {
-  max-width: 560px;
-  margin: 0;
-  padding: 10px 14px;
-  border-radius: 10px;
-  background: var(--page-error-bg);
-  color: var(--page-error-fg);
-  font-family: ui-monospace, "SF Mono", Menlo, monospace;
-  font-size: 12px;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
 /* ---------------------------------------------------------------------------
    Device frame
    ------------------------------------------------------------------------- */
 
 .device {
   position: relative;
+}
+
+/* The iPhone's size and bezel: the frame's only. An island (`.sb-island`,
+   below) is the page's box, sized by the page's own CSS. */
+.device:not(.sb-island) {
   flex: 0 0 auto;
   width: calc(var(--device-screen-width) + 2 * var(--device-bezel));
   height: calc(var(--device-screen-height) + 2 * var(--device-bezel));
@@ -485,53 +333,13 @@ body {
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts)
 
-   On a real phone there is no toolbar and no fake bezel: the OS draws the
-   status bar and #screen fills the viewport. The layout engine still gets a
-   status-bar / home-indicator safe area, but from env(safe-area-inset-*)
-   (via --sb-inset-*), so it is only non-zero in standalone mode / landscape.
+   On a real phone there is no fake bezel: the OS draws the status bar and
+   #screen fills the viewport (the page's part, its toolbar and background,
+   is page.css). The layout engine still gets a status-bar / home-indicator
+   safe area, but from env(safe-area-inset-*) (via --sb-inset-*), so it is
+   only non-zero in standalone mode / landscape.
    ------------------------------------------------------------------------- */
 
-html[data-sb-mode="device"] {
-  height: 100%;
-  overflow: hidden;
-  overscroll-behavior: none;
-  /* No double-tap zoom, no text inflation in landscape. */
-  touch-action: manipulation;
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-html[data-sb-mode="device"] body {
-  min-height: 100dvh;
-  overflow: hidden;
-  overscroll-behavior: none;
-  touch-action: manipulation;
-}
-
-/* The page behind the app is the OS appearance's system background from the
-   first paint (Safari tints its status bar strip from it); chromeColor.ts
-   then keeps it at the color the app draws at its top edge. */
-html[data-sb-mode="device"],
-html[data-sb-mode="device"] body {
-  background: #ffffff;
-}
-
-@media (prefers-color-scheme: dark) {
-  html[data-sb-mode="device"],
-  html[data-sb-mode="device"] body {
-    background: #000000;
-  }
-}
-
-html[data-sb-mode="device"] .toolbar {
-  display: none;
-}
-
-html[data-sb-mode="device"] .stage {
-  padding: 0;
-  gap: 0;
-}
-
 html[data-sb-mode="device"] .device {
   position: fixed;
   top: 0;
@@ -558,18 +366,6 @@ html[data-sb-mode="device"] .device-screen {
   border-radius: 0;
 }
 
-/* The error banner floats over the app, clear of the home indicator. */
-html[data-sb-mode="device"] .status {
-  position: fixed;
-  left: 16px;
-  right: 16px;
-  bottom: calc(16px + var(--sb-inset-bottom));
-  z-index: 10;
-  max-width: none;
-  max-height: 40dvh;
-  overflow: auto;
-}
-
 /* ---------------------------------------------------------------------------
    Rendered elements
 
@@ -1337,8 +1133,12 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   mask-image: linear-gradient(to bottom, #000 60%, transparent);
 }
 
+/* Its strength follows the content under the bar, ramping up over the
+   first 40px scrolled (`--sb-edge-top`, src/scrollEdge.ts); the transition
+   smooths a scroll that jumps. */
 .sb-navscreen[data-sb-scrolled] > .sb-navbar::before {
-  opacity: 1;
+  opacity: var(--sb-edge-top, 1);
+  transition: opacity 0.12s linear;
 }
 
 /* At the bottom: a list or scroll view runs under the tab bar, or its
@@ -1369,21 +1169,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
   opacity: 0;
   transition: opacity 0.2s ease;
+  /* iOS 26 mostly fades the content here (it stays faintly legible under
+     the bar) and barely blurs it. */
   background: linear-gradient(
     to top,
-    var(--sb-edge-color) 0%,
-    color-mix(in srgb, var(--sb-edge-color) 75%, transparent) 45%,
+    color-mix(in srgb, var(--sb-edge-color) 70%, transparent) 0%,
+    color-mix(in srgb, var(--sb-edge-color) 55%, transparent) 45%,
     transparent 100%
   );
-  -webkit-backdrop-filter: blur(6px);
-  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(1.5px);
+  backdrop-filter: blur(1.5px);
   -webkit-mask-image: linear-gradient(to top, #000 60%, transparent);
   mask-image: linear-gradient(to top, #000 60%, transparent);
 }
 
 .sb-navscreen[data-sb-scrolled-bottom] > .sb-navscreen-body::after,
 .sb-tab[data-sb-scrolled-bottom]::after {
-  opacity: 1;
+  opacity: var(--sb-edge-bottom, 1);
+  transition: opacity 0.12s linear;
 }
 
 /* `.scrollEdgeEffectStyle(.hard, for:)`: an opaque backing exactly behind
@@ -2039,6 +1842,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-grid,
 .sb-gridrow,
 .sb-lazyvgrid,
+.sb-lazyhgrid,
 .sb-decorated {
   display: block;
 }
@@ -2315,30 +2119,41 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 
 /* Their symbols are drawn a little larger and heavier (semibold), as iOS 26
    draws bar buttons: a plus is 17.7 pt with 2.33 pt bars there. */
-.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"]) .sb-image > svg {
+.sb-toolbar:is([data-sb-placement="leading"], [data-sb-placement="trailing"], [data-sb-placement="bottom"]) .sb-image > svg {
   width: 1.57em;
   height: 1.57em;
   stroke-width: 1.85;
 }
 
+/* A bottom toolbar's symbols are as large but regular weight. */
+.sb-toolbar[data-sb-placement="bottom"] .sb-image > svg {
+  stroke-width: 1.5;
+}
+
+/* iOS 26: a bottom toolbar's items float over the content on Liquid Glass
+   capsules (engine `bottomGlass0` …, src/layoutDom.ts), drawn in the label
+   color unless tinted, above the scroll edge effect. */
 .sb-toolbar[data-sb-placement="bottom"] {
   z-index: 3;
-  background: var(--sb-color-tabbar-background);
-  backdrop-filter: blur(20px) saturate(180%);
-  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  --sb-color-accent: var(--sb-color-primary);
 }
 
-.sb-toolbar[data-sb-placement="bottom"]::before {
-  content: "";
+.sb-bottom-glass {
   position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  height: 1px;
-  background: var(--sb-color-separator);
+  z-index: 2;
+  border-radius: 24px;
+  background: var(--sb-glass-background);
+  box-shadow: var(--sb-glass-shadow);
+  backdrop-filter: blur(12px) saturate(180%);
+  -webkit-backdrop-filter: blur(12px) saturate(180%);
   pointer-events: none;
 }
 
+/* A ToolbarSpacer draws nothing (the engine also hides it). */
+.sb-toolbar[data-sb-spacer] {
+  display: none;
+}
+
 /* Search field: a capsule (engine `searchField` rect) with a
    magnifier leading; the input sends `text` events like a textfield. */
 .sb-searchfield {
@@ -2641,6 +2456,7 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
 .sb-grid,
 .sb-gridrow,
 .sb-lazyvgrid,
+.sb-lazyhgrid,
 .sb-viewthatfits,
 .sb-decorated,
 .sb-gesture,
@@ -2648,8 +2464,8 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   pointer-events: none;
 }
 
-:is(.sb-vstack, .sb-hstack, .sb-zstack, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture)
-  > [data-sb-kind]:not(.sb-vstack, .sb-hstack, .sb-zstack, .sb-spacer, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture) {
+:is(.sb-vstack, .sb-hstack, .sb-zstack, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-lazyhgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture)
+  > [data-sb-kind]:not(.sb-vstack, .sb-hstack, .sb-zstack, .sb-spacer, .sb-styled, .sb-geometry, .sb-layout, .sb-grid, .sb-gridrow, .sb-lazyvgrid, .sb-lazyhgrid, .sb-viewthatfits, .sb-decorated, .sb-gesture, .sb-tapgesture) {
   pointer-events: auto;
 }
 
@@ -3629,19 +3445,12 @@ svg.sb-path {
 
 /* ---------------------------------------------------------------------------
    Islands (@swiftbrowser/react's `SwiftUIView`): a SwiftUI root inside a
-   page's own layout, with the device's tokens and none of its frame. The
-   page sizes the island; in `content` fit the renderer sets the root's height
+   page's own layout, with the device's tokens and none of its frame: the
+   frame's size, bezel and shadow are `.device:not(.sb-island)`'s above, so
+   the page's own CSS, however specific, gives the island its width and
+   height. In `content` fit the renderer sets the root's height
    from the layout.
    ------------------------------------------------------------------------- */
-.device.sb-island {
-  width: auto;
-  padding: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-  flex: initial;
-}
-
 .device.sb-island::before,
 .device.sb-island::after {
   display: none;

package/src/symbols.ts

@@ -215,6 +215,7 @@ import {
   Link2,
   List,
   ListChecks,
+  ListFilter,
   ListIndentIncrease,
   ListMusic,
   ListOrdered,
@@ -571,7 +572,8 @@ export const SF_SYMBOLS: Readonly<Record<string, SymbolGlyph>> = {
   'tag.fill': solid(Tag),
   textformat: outline(CaseSensitive),
   'line.3.horizontal': outline(Menu),
-  'line.3.horizontal.decrease': outline(Funnel),
+  // Three lines, each shorter than the one above.
+  'line.3.horizontal.decrease': outline(ListFilter),
   'line.3.horizontal.decrease.circle': outline(Funnel),
   'slider.horizontal.3': outline(SlidersHorizontal),
   'list.bullet': outline(List),