@swiftbrowser/web 0.19.0 → 0.23.0

package/src/renderer.ts

@@ -62,7 +62,7 @@ import { LayoutReporter } from './layoutEvents';
 import { createGaugeRing, isCircularGauge, updateGaugeRing } from './gaugeRing';
 import { bitmapStore, showBitmap } from './bitmaps';
 import { clearRichText, runTemplates } from './richText';
-import { markDeleteBackward, wantsDeleteBackward } from './editorSelection';
+import { markDeleteBackward, noteReportedText, textArrived, wantsDeleteBackward } from './editorSelection';
 import { applyPlainEditorSelection, focusPlainEditor, isPlainEditor, listenToPlainEditors } from './plainEditor';
 import { applyRichEditor, createRichEditor, focusRichEditor, isRichEditor, listenToRichEditors, richEditorText } from './richEditor';
 import { applyLayout, setTabHidden, type BoxChange } from './layoutDom';
@@ -126,6 +126,7 @@ import {
   type TabProps,
   type TabViewProps,
   type HostProps,
+  type RegisteredProps,
   type TextFieldProps,
   type TextProps,
   type TextRun,
@@ -171,8 +172,9 @@ import { TouchPaging } from './touchPaging';
 import { isScrollVisible } from './scrollVisibility';
 import { applyDefaultScrollAnchor, keepScrollAnchors } from './scrollAnchor';
 import { EMPTY_CATALOG, assetColorVar, type AssetCatalog } from './assets';
-import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, styleToCSS, type PaintCSS } from './styles';
+import { HIERARCHY_OPACITY, colorToCSS, effectsCSS, shadowCSS, styleToCSS, type PaintCSS } from './styles';
 import { hostContent, onHostContentChange } from './hostContent';
+import { type RegisteredViewInstance, ViewRegistry } from './viewRegistry';
 import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointerEffects';
 import { colorMultiplyFilter } from './colorMultiply';
 import { largeTitleOf, largeTitleTextOf } from './largeTitle';
@@ -193,6 +195,14 @@ export class RendererError extends Error {
 }
 
 const KIND_ATTR = 'sbKind';
+/**
+ * The kinds that draw what they show themselves: a shadow of a box around one falls on it as a whole (castShadows,
+ * styles.css), where a container hands it on to the views inside.
+ */
+const DRAWN_KINDS: ReadonlySet<string> = new Set([
+  'text', 'image', 'divider', 'color', 'shape', 'textfield', 'toggle', 'picker', 'gauge', 'searchfield', 'registered', 'chart',
+  'stepper', 'slider', 'datepicker', 'texteditor', 'video', 'canvas',
+]);
 const ID_ATTR = 'sbId';
 /** `animationToken` of a `styled` box, kept across `update` to detect changes. */
 const ANIMATION_TOKEN = 'sbAnimationToken';
@@ -252,6 +262,7 @@ export { SHEET_DISMISS_DRAG } from './interaction';
 
 const ALL_KINDS: ReadonlySet<string> = new Set<ElementKind>([
   'host',
+  'registered',
   'text',
   'vstack',
   'hstack',
@@ -422,6 +433,8 @@ export class Renderer {
   private readonly hostContents = new Map<ElementId, HTMLElement>();
   /** The `host` elements, adopted or still waiting for their content. */
   private readonly hosts = new Set<ElementId>();
+  /** The registered views (src/viewRegistry.ts) built for `registered` elements, by element: the name each was built for. */
+  private readonly registeredViews = new Map<ElementId, { name: string; instance: RegisteredViewInstance | undefined }>();
   private readonly hostSizes = new WeakMap<HTMLElement, { width: number; height: number }>();
   private readonly hostMeasures = new Map<string, { width: number; height: number }>();
   private readonly stopHostChanges: () => void;
@@ -440,6 +453,12 @@ export class Renderer {
   private readonly pressEffects: PressEffects;
   /** Text, links and files dragged in from outside the page (src/dragDrop.ts). */
   private readonly externalDrops: ExternalDrops;
+  /**
+   * How a dropped file reaches the app: base64 `data` in the event (a Swift
+   * app) or the `File` by reference (a React app in the same page sets
+   * `reference`; a dropped folder then comes as its files by path).
+   */
+  fileDrops: 'bytes' | 'reference' = 'bytes';
   private readonly pinches: PinchController;
   private readonly touches: TouchesController;
   private readonly touchPaging: TouchPaging;
@@ -880,6 +899,7 @@ export class Renderer {
     const id = Number(owner?.dataset[ID_ATTR]);
     if (!Number.isInteger(id)) return;
     const value = isRichEditor(input) ? richEditorText(input) : input.value;
+    noteReportedText(input, value);
     this.onEvent({ type: 'text', id, value });
   };
 
@@ -1025,6 +1045,7 @@ export class Renderer {
       root,
       send: (event) => this.onEvent(event),
       nodeOf: (id) => this.nodes.get(id),
+      fileDrops: () => this.fileDrops,
       openContextMenu: (anchor, id) => this.openContextMenu(anchor, id),
       revealScreen: (screen) => this.revealScreen(screen),
       isMenuOpen: (id) => this.menu?.anchorId === id,
@@ -1258,6 +1279,7 @@ export class Renderer {
           this.syncFocus();
           // The focus the app moved shows or hides a screen's keyboard bar.
           if (this.focusedFieldId() !== focusedBefore && this.hasKeyboardToolbars()) this.layout();
+          this.castShadows();
           this.performScrolls(op.animation != null);
           this.performOffsetScrolls(op.animation != null);
           this.checkLazySpacers();
@@ -1275,6 +1297,55 @@ export class Renderer {
     }
   }
 
+  /**
+   * SwiftUI's `.shadow` on a container falls on each view it draws (its texts, shapes, images, controls and
+   * backgrounds), on their own shadows too, and not on the container as a whole unless a `.compositingGroup()` in
+   * between draws the views as one. Each box with a shadow (`data-sb-shadow`) hands its views the shadows to cast:
+   * its own, then those of the boxes around it, up to a compositing group (`--sb-shadow-filter`, which styles.css
+   * gives each drawn view's `filter`, and which a box that clips, masks or composites takes for itself). A box's own
+   * background, painted with its children inside, casts them as `box-shadow` instead.
+   */
+  private castShadows(): void {
+    const sources = this.root.querySelectorAll<HTMLElement>('[data-sb-shadow]');
+    const cast = new Set(this.root.querySelectorAll<HTMLElement>('[data-sb-shadow-cast]'));
+    if (sources.length === 0 && cast.size === 0) return;
+    const filters = new Map<HTMLElement, { filter: string; box: string }>();
+    // The shadows that reach the views inside `el` from the boxes around it, up to a compositing group or a drawn
+    // view, which takes those around it as one and hands none on.
+    const above = (el: HTMLElement): { filter: string; box: string } => {
+      for (let up = el.parentElement; up && up !== this.root; up = up.parentElement) {
+        if (up.dataset['sbComposite'] !== undefined || DRAWN_KINDS.has(up.dataset[KIND_ATTR] ?? '')) break;
+        const found = filters.get(up);
+        if (found) return found;
+      }
+      return { filter: '', box: '' };
+    };
+    // Document order: a box comes before the boxes inside it.
+    for (const el of sources) {
+      const outer = above(el);
+      const filter = `${el.dataset['sbShadow']} ${outer.filter}`.trim();
+      const box = [el.dataset['sbShadowBox'], outer.box].filter(Boolean).join(', ');
+      filters.set(el, { filter, box });
+      if (el.style.getPropertyValue('--sb-shadow-filter') !== filter) el.style.setProperty('--sb-shadow-filter', filter);
+    }
+    // A background painted on a box (its children inside) casts them as a box-shadow.
+    if (sources.length > 0) {
+      // A box that clips, masks or composites casts them for its background already, with what it holds.
+      for (const el of this.root.querySelectorAll<HTMLElement>('.sb-styled[data-sb-background]:not([data-sb-as-one])')) {
+        const { box } = filters.get(el) ?? above(el);
+        if (!box) continue;
+        if (el.style.boxShadow !== box) el.style.boxShadow = box;
+        el.dataset['sbShadowCast'] = '';
+        cast.delete(el);
+      }
+    }
+    // Those no shadow reaches any more.
+    for (const el of cast) {
+      el.style.boxShadow = '';
+      delete el.dataset['sbShadowCast'];
+    }
+  }
+
   /**
    * `withAnimation(_:completionCriteria:_:completion:)`: the pass's `commit`
    * carried a completion serial; once the animations its commit started have
@@ -2057,6 +2128,34 @@ export class Renderer {
       this.hosts.add(id);
       this.adoptHostContent(id, el, props as HostProps);
     }
+    if (kind === 'registered') this.adoptRegistered(id, el, props as RegisteredProps);
+  }
+
+  /**
+   * A `registered` element's view (src/viewRegistry.ts): built for its name,
+   * given the new props after; a name nothing registered shows itself, as an
+   * unknown kind does. The element's own children are the native view's: on
+   * a page the stylesheet hides them.
+   */
+  private adoptRegistered(id: ElementId, el: HTMLElement, props: RegisteredProps): void {
+    const values = asRecord(props.props);
+    const current = this.registeredViews.get(id);
+    if (current && current.name === props.name) {
+      current.instance?.update?.(values);
+      return;
+    }
+    current?.instance?.dispose?.();
+    const name = props.name;
+    const instance = ViewRegistry.make(name, { id, props: values, send: (value) => this.onEvent({ type: 'registered', id, name, value }) });
+    this.registeredViews.set(id, { name, instance });
+    let content = instance?.element;
+    if (!content) {
+      content = div('sb-registered-missing');
+      content.textContent = name;
+    }
+    content.classList.add('sb-registered-content');
+    el.querySelector(':scope > .sb-registered-content')?.remove();
+    el.prepend(content);
   }
 
   /** A toolbar whose placement changed to or from `largeTitle` moves between its screen's content slot and large title. */
@@ -2469,6 +2568,7 @@ export class Renderer {
     this.noteScroll(id, kind, props);
     this.noteVisibility(id, kind, props);
     if (kind === 'host') this.adoptHostContent(id, el, props as HostProps);
+    if (kind === 'registered') this.adoptRegistered(id, el, props as RegisteredProps);
     if (kind === 'toolbar') this.rehomeToolbar(id, el, op);
     const newToken = el.dataset[ANIMATION_TOKEN];
     const tokenChanged = (previous?.tokenChanged ?? false) || (newToken !== undefined && newToken !== oldToken);
@@ -2704,6 +2804,8 @@ export class Renderer {
       this.hostContents.delete(id);
     }
     this.hosts.delete(id);
+    this.registeredViews.get(id)?.instance?.dispose?.();
+    this.registeredViews.delete(id);
     this.elements.delete(id);
     this.boxes.delete(id);
     this.dirty.delete(id);
@@ -2979,6 +3081,9 @@ function createShell(kind: ElementKind): HTMLElement {
     case 'host':
       // The page's content element is adopted by the renderer (`adoptHostContent`).
       return div('sb-host');
+    case 'registered':
+      // Its view is built by the renderer (`adoptRegistered`).
+      return div('sb-registered');
     case 'button': {
       const el = document.createElement('button');
       el.type = 'button';
@@ -3821,16 +3926,25 @@ function setDatePickerValue(el: HTMLElement, seconds: number): void {
   }
 }
 
-/** Like `applyTextField`: the caret survives an echo of the text the editor shows. */
+/**
+ * Like `applyTextField`: the caret survives an echo of the text the editor
+ * shows. A text from outside (not what the editor reported) would put the
+ * caret at the end: the editor's value and caret from before are kept for
+ * `applyPlainEditorSelection` to move it past the change.
+ */
 function applyTextEditor(area: HTMLTextAreaElement, props: TextEditorProps): void {
   const text = props.text ?? '';
-  if (area.value !== text) area.value = text;
+  const before = area.value;
+  const outside = before !== text && textArrived(area, text) === 'remote';
+  const focused = area.ownerDocument.activeElement === area;
+  const caret = outside && focused ? { start: area.selectionStart, end: area.selectionEnd } : null;
+  if (before !== text) area.value = text;
   // Bound focus, as for a `textfield` (moved in `syncFocus` after the commit).
   if (typeof props.focused === 'boolean') area.dataset['sbFocus'] = String(props.focused);
   else delete area.dataset['sbFocus'];
   markDeleteBackward(area, props.deleteBackward === true);
   // A bound selection, under the rich editor's rules (src/plainEditor.ts).
-  applyPlainEditorSelection(area, props);
+  applyPlainEditorSelection(area, props, outside ? { before, caret } : null);
 }
 
 // ---------------------------------------------------------------------------
@@ -4136,6 +4250,9 @@ function applyKindProps(el: HTMLElement, kind: ElementKind, props: ElementProps,
     case 'lazyspacer':
       el.dataset['axis'] = (props as LazySpacerProps).axis === 'horizontal' ? 'horizontal' : 'vertical';
       break;
+    case 'registered':
+      // The renderer builds its view (`adoptRegistered`).
+      break;
     default: {
       const unknown: never = kind;
       throw new RendererError(`Unknown element kind ${String(unknown)}`);
@@ -4282,9 +4399,10 @@ function applyShape(el: HTMLElement, props: ShapeProps): void {
     s.border = `${width}px ${stroke.dash?.length ? 'dashed' : 'solid'} ${color}`;
     el.dataset['sbStroke'] = stroke.inset ? 'inset' : 'center';
   }
-  // A fill with a drop shadow (`.shadow(.drop(…))` on the style).
+  // A fill with a drop shadow (`.shadow(.drop(…))` on the style), then the shadows of the boxes around the shape
+  // (castShadows), which styles.css gives a shape without one of its own.
   const shadow = (props.fill as { shadow?: ShapeShadow } | null)?.shadow;
-  s.filter = shadow && typeof shadow === 'object' ? shapeShadowCSS(shadow) : '';
+  s.filter = shadow && typeof shadow === 'object' ? `${shapeShadowCSS(shadow)} var(--sb-shadow-filter, )` : '';
   const mask = shapeTrimMask(props.trim);
   if (mask) {
     s.setProperty('mask-image', mask);
@@ -4893,15 +5011,29 @@ export function applyStyle(el: HTMLElement, style: Style): void {
   }
 
   // Phase 6 visual effects: CSS only, the layout engine never sees them.
-  const effects = effectsCSS(style);
+  // A shadow is not the box's own filter: as SwiftUI's `.shadow` on a container, it falls on each view the box draws
+  // (castShadows). A box that clips, masks or composites what it holds draws it as one, so the shadows around it are
+  // cast by it too (`--sb-shadow-filter`, which castShadows sets).
+  const effects = effectsCSS(style, { shadow: false });
   if (effects.transform) s.transform = effects.transform;
   if (effects.transformOrigin) s.transformOrigin = effects.transformOrigin;
-  if (effects.filter) s.filter = effects.filter;
-  // `.colorMultiply`: an SVG filter, first so the other filters see its colors.
-  if (style.colorMultiply) {
-    const multiply = colorMultiplyFilter(style.colorMultiply, el);
-    s.filter = effects.filter ? `${multiply} ${effects.filter}` : multiply;
-  }
+  const multiply = style.colorMultiply ? colorMultiplyFilter(style.colorMultiply, el) : '';
+  const asOne = style.compositingGroup === true || style.cornerRadius != null || style.clipped === true || (style.mask != null && typeof style.mask === 'object');
+  const filter = [multiply, effects.filter ?? '', asOne ? 'var(--sb-shadow-filter, )' : ''].filter(Boolean).join(' ');
+  if (filter) s.filter = filter;
+  if (asOne) el.dataset['sbAsOne'] = '';
+  else delete el.dataset['sbAsOne'];
+  if (style.shadow) {
+    el.dataset['sbShadow'] = `drop-shadow(${shadowCSS(style.shadow)})`;
+    el.dataset['sbShadowBox'] = shadowCSS(style.shadow);
+  } else if (el.dataset['sbShadow'] !== undefined) {
+    delete el.dataset['sbShadow'];
+    delete el.dataset['sbShadowBox'];
+    s.removeProperty('--sb-shadow-filter');
+    s.removeProperty('--sb-shadow-box');
+  }
+  if (style.compositingGroup) el.dataset['sbComposite'] = '';
+  else delete el.dataset['sbComposite'];
   // Phase 7: `.hidden()` keeps the box (the engine lays it out) but draws
   // nothing and takes no input; `.mask { }` clips the box to a style's alpha.
   if (effects.hidden) {

package/src/scrollTransition.ts

@@ -35,7 +35,8 @@ export function setScrollTransition(el: HTMLElement, style: Style): void {
     }
     return;
   }
-  const own = effectsCSS(style);
+  // Its shadow is cast by the views it draws (renderer.ts castShadows), not by it.
+  const own = effectsCSS(style, { shadow: false });
   registered.set(el, {
     spec,
     base: { transform: own.transform ?? '', filter: own.filter ?? '', opacity: style.opacity ?? 1 },

package/src/styles.css

@@ -326,12 +326,6 @@
   fill: currentColor;
 }
 
-.glyph-wifi .wifi-band {
-  fill: none;
-  stroke: currentColor;
-  stroke-linecap: round;
-}
-
 .glyph-battery .battery-shell {
   fill: none;
   stroke: currentColor;
@@ -386,6 +380,86 @@
   }
 }
 
+/* ---------------------------------------------------------------------------
+   The preview's device (html[data-sb-frame], src/deviceFrame.ts), frame mode
+   only: the iPhone above is the default; an iPad in landscape (an 11-inch
+   iPad's 1180 x 820 points, its status bar the time and date at the leading
+   edge, no island); or no device, the app filling the page under the toolbar
+   (page.css sizes the stage).
+   ------------------------------------------------------------------------- */
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) {
+  --device-screen-width: 1180px;
+  --device-screen-height: 820px;
+  --device-bezel: 20px;
+  --device-radius: 38px;
+  --device-safe-top: 24px;
+  --device-safe-bottom: 20px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .dynamic-island,
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .device::before,
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .device::after {
+  display: none;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-bar {
+  padding: 0 18px 0 22px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-time {
+  min-width: 0;
+  top: 0;
+  font-size: 13px;
+  letter-spacing: 0;
+}
+
+.status-date {
+  display: none;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-date {
+  display: inline;
+  margin-left: 6px;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .status-glyphs {
+  gap: 6px;
+  transform: scale(0.82);
+  transform-origin: right center;
+}
+
+html[data-sb-frame="ipad"]:not([data-sb-mode="device"]) .home-indicator {
+  bottom: 7px;
+  width: 315px;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device:not(.sb-island) {
+  flex: 1 1 auto;
+  align-self: stretch;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  padding: 0;
+  border-radius: 0;
+  background: var(--sb-color-system-background);
+  box-shadow: none;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device-screen {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device::before,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .device::after,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .dynamic-island,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .status-bar,
+html[data-sb-frame="none"]:not([data-sb-mode="device"]) .home-indicator {
+  display: none;
+}
+
 /* ---------------------------------------------------------------------------
    Device mode (html[data-sb-mode="device"], see src/deviceMode.ts)
 
@@ -761,6 +835,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   display: none;
 }
 
+/* Pinned section headers (src/pinnedViews.ts): each scroll view names its
+   scroll timelines, and a header moves along its nearest one, from where it
+   starts to pin (its `animation-range`) by as far as its section lets it
+   (`--sb-pinned-to`), in step with the scroll. */
+.sb-scrollview,
+.sb-list {
+  scroll-timeline: --sb-pin-y block, --sb-pin-x inline;
+}
+
+@keyframes sb-pinned {
+  from {
+    translate: 0 0;
+  }
+  to {
+    translate: var(--sb-pinned-to);
+  }
+}
+
 .sb-scrollview[data-sb-axes="vertical"] {
   overflow-y: auto;
 }
@@ -1050,6 +1142,24 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   overflow: visible;
 }
 
+/* A section outside a list (a lazy stack's, its header pinned) is a plain
+   container, as in SwiftUI: its rows draw in no card, so nothing clips them,
+   paints under them or draws lines between them (src/layoutDom.ts leaves the
+   slot unsized there). */
+:not(.sb-list-content) > .sb-section > .sb-section-rows {
+  overflow: visible;
+  background: none;
+  border-radius: 0;
+}
+
+:not(.sb-list-content) > .sb-section > .sb-section-rows > :is([data-sb-id], [data-sb-ghost]) {
+  background: none;
+}
+
+:not(.sb-list-content) > .sb-section > .sb-section-rows > *::after {
+  content: none;
+}
+
 .sb-list-content > :not(.sb-section):first-child,
 .sb-list-content > .sb-section + :not(.sb-section) {
   border-top-left-radius: 26px;
@@ -3513,9 +3623,16 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   opacity: 0.4;
 }
 
+/* The copy lets the pointer through to the destination under it, its own
+   boxes too: a background or a content shape makes a box a target
+   (pointer-events: auto) wherever it is, and the copy keeps those. */
+.sb-drag-preview,
+.sb-drag-preview * {
+  pointer-events: none !important;
+}
+
 .sb-drag-preview {
   z-index: 60;
-  pointer-events: none;
   opacity: 0.9;
   filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.25));
   will-change: transform;
@@ -4385,3 +4502,46 @@ svg.sb-path {
 .sb-list[data-sb-list-style='sidebar'] .sb-section[data-sb-collapsible][data-sb-expanded] .sb-sectionheader::after {
   transform: rotate(45deg);
 }
+
+/* A registered view (src/viewRegistry.ts): the package's own element fills
+   the box; the element's children are a native view's to place. */
+.sb-registered {
+  overflow: hidden;
+}
+.sb-registered > .sb-registered-content {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.sb-registered > :not(.sb-registered-content) {
+  display: none;
+}
+.sb-registered-missing {
+  box-sizing: border-box;
+  border: 1px dashed currentColor;
+  font: 11px/1.2 ui-monospace, monospace;
+  opacity: 0.6;
+  padding: 2px;
+}
+
+/* SwiftUI's `.shadow` on a container falls on each view it draws, not on the
+   container as a whole (renderer.ts castShadows): a view that draws itself
+   casts the shadows of the boxes around it, set on them as
+   `--sb-shadow-filter`, and hands none to what is inside it; nor does a
+   `.compositingGroup()`, which casts them itself, as one. */
+:is([data-sb-kind="text"], [data-sb-kind="image"], [data-sb-kind="divider"], [data-sb-kind="color"], [data-sb-kind="shape"],
+  [data-sb-kind="textfield"], [data-sb-kind="toggle"], [data-sb-kind="picker"], [data-sb-kind="gauge"],
+  [data-sb-kind="searchfield"], [data-sb-kind="registered"], [data-sb-kind="chart"], [data-sb-kind="stepper"],
+  [data-sb-kind="slider"], [data-sb-kind="datepicker"], [data-sb-kind="texteditor"], [data-sb-kind="video"],
+  [data-sb-kind="canvas"]) {
+  filter: var(--sb-shadow-filter, none);
+}
+
+:is([data-sb-kind="text"], [data-sb-kind="image"], [data-sb-kind="divider"], [data-sb-kind="color"], [data-sb-kind="shape"],
+  [data-sb-kind="textfield"], [data-sb-kind="toggle"], [data-sb-kind="picker"], [data-sb-kind="gauge"],
+  [data-sb-kind="searchfield"], [data-sb-kind="registered"], [data-sb-kind="chart"], [data-sb-kind="stepper"],
+  [data-sb-kind="slider"], [data-sb-kind="datepicker"], [data-sb-kind="texteditor"], [data-sb-kind="video"],
+  [data-sb-kind="canvas"]) *,
+[data-sb-composite] > * {
+  --sb-shadow-filter: initial;
+}

package/src/styles.ts

@@ -352,7 +352,7 @@ export const PERSPECTIVE_BASE_PX = 500;
  * `500px / perspective` (a smaller SwiftUI perspective is a flatter
  * projection, as `perspective: 0.5` is in SwiftUI).
  */
-export function effectsCSS(style: Style): EffectsCSS {
+export function effectsCSS(style: Style, options: { shadow?: boolean } = {}): EffectsCSS {
   const out: EffectsCSS = {};
   const transforms: string[] = [];
   if (style.offset) {
@@ -408,11 +408,7 @@ export function effectsCSS(style: Style): EffectsCSS {
     filters.push(`hue-rotate(${round(style.hueRotation)}deg)`);
   }
   if (style.colorInvert === true) filters.push('invert(1)');
-  if (style.shadow) {
-    const { color, radius, x, y } = style.shadow;
-    const css = color ? colorToCSS(color) : 'rgba(0, 0, 0, 0.33)';
-    filters.push(`drop-shadow(${finite(x)}px ${finite(y)}px ${Math.max(0, finite(radius))}px ${css})`);
-  }
+  if (style.shadow && options.shadow !== false) filters.push(`drop-shadow(${shadowCSS(style.shadow)})`);
   if (filters.length) out.filter = filters.join(' ');
   // Phase 7.
   if (style.hidden === true) out.hidden = true;
@@ -420,6 +416,13 @@ export function effectsCSS(style: Style): EffectsCSS {
   return out;
 }
 
+/** A shadow's `x y radius color`, as `drop-shadow()` and `box-shadow` both take it. */
+export function shadowCSS(shadow: NonNullable<Style['shadow']>): string {
+  const { color, radius, x, y } = shadow;
+  const css = color ? colorToCSS(color) : 'rgba(0, 0, 0, 0.33)';
+  return `${finite(x)}px ${finite(y)}px ${Math.max(0, finite(radius))}px ${css}`;
+}
+
 /**
  * Phase 7 `.mask { }` with a ShapeStyle: a CSS `mask-image` whose alpha is
  * the style's. A `linearGradient` / `radialGradient` becomes the matching CSS

package/src/viewRegistry.ts

@@ -0,0 +1,58 @@
+/**
+ * The page's half of `ViewRegistry` (docs/ops-protocol.md, "Registered
+ * views"): a view a package draws itself, by name, which the `registered`
+ * element kind names. A native app registers a SwiftUI view under the same
+ * name (SwiftBrowserNative's `ViewRegistry`), so one component
+ * (`RegisteredView` in @swiftbrowser/react) is a SwiftUI view in the app and
+ * the package's own DOM on a page, drawing what never crosses the bridge
+ * (an audio node's frames, a map's tiles).
+ *
+ * ```ts
+ * ViewRegistry.register('Meter', (context) => {
+ *   const element = document.createElement('canvas');
+ *   return { element, update: (props) => …, dispose: () => … };
+ * });
+ * ```
+ */
+
+/** What a builder gets: the element's id, its props as the app wrote them, and a way to answer (`onEvent`). */
+export interface RegisteredViewContext {
+  readonly id: number;
+  readonly props: Record<string, unknown>;
+  /** Sends a value to the element's `onEvent` in the app. */
+  send(value: unknown): void;
+}
+
+/** A built view: its element, which fills the box the layout gives it, and what to do as props change or it goes. */
+export interface RegisteredViewInstance {
+  readonly element: HTMLElement;
+  update?(props: Record<string, unknown>): void;
+  dispose?(): void;
+}
+
+export type RegisteredViewBuilder = (context: RegisteredViewContext) => RegisteredViewInstance | HTMLElement;
+
+const builders = new Map<string, RegisteredViewBuilder>();
+
+export const ViewRegistry = {
+  /** Registers `builder` under `name`, replacing one registered before; elements made after use it. */
+  register(name: string, builder: RegisteredViewBuilder): void {
+    builders.set(name, builder);
+  },
+
+  unregister(name: string): void {
+    builders.delete(name);
+  },
+
+  isRegistered(name: string): boolean {
+    return builders.has(name);
+  },
+
+  /** The view registered under `name`, built; undefined when there is none. */
+  make(name: string, context: RegisteredViewContext): RegisteredViewInstance | undefined {
+    const builder = builders.get(name);
+    if (!builder) return undefined;
+    const made = builder(context);
+    return made instanceof HTMLElement ? { element: made } : made;
+  },
+};