@swiftbrowser/web 0.19.0 → 0.21.0

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;
+  },
+};