@swiftbrowser/web 0.5.4 → 0.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.5.4",
+  "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/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 {
@@ -1931,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 };
     }
@@ -2605,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':
@@ -3428,7 +3454,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/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/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);
 }
@@ -695,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);
 }
@@ -1386,9 +1424,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 +1871,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 +2248,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 +2258,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 +3185,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 };
   }

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),