@swiftbrowser/react 0.5.2 → 0.5.4

package/README.md

@@ -103,6 +103,14 @@ a React root of its own: the page's React state reaches it through props as
 usual, and its contexts through `contexts={[…]}` (see
 [Contexts across roots](#contexts-across-roots)).
 
+There is no status bar in a page, so `safeArea` stands in for one. A
+`fill` island keeps 10 points at the top, the way SwiftUI keeps a window's
+bars off its edge. Navigation bars sit below that inset and their
+background reaches up into it, and lists start below it. A `content`
+island has no insets. Pass a number for the top inset (`safeArea={0}` puts
+the bars flush with the edge) or an object such as
+`safeArea={{ top: 24, bottom: 34 }}`.
+
 ### Try the demos
 
 ```sh

package/dist/index.js

@@ -483,7 +483,11 @@ function useContextBridge(contexts = [], options = {}) {
   const values = all.map((context) => useContext(context));
   return (children) => all.reduceRight((inner, context, index) => createElement(context.Provider, { value: values[index] }, inner), children);
 }
-const NO_SAFE_AREA = { top: 0, leading: 0, bottom: 0, trailing: 0 };
+const WINDOW_TOP_INSET = 10;
+function insetsOf(safeArea, fit) {
+  const given = typeof safeArea === "number" ? { top: safeArea } : safeArea ?? { top: fit === "fill" ? WINDOW_TOP_INSET : 0 };
+  return { top: given.top ?? 0, leading: given.leading ?? 0, bottom: given.bottom ?? 0, trailing: given.trailing ?? 0 };
+}
 function SwiftUIView({
   children,
   fit = "fill",
@@ -491,6 +495,7 @@ function SwiftUIView({
   dynamicTypeSize = "large",
   contexts,
   assets,
+  safeArea,
   className,
   style
 }) {
@@ -506,7 +511,7 @@ function SwiftUIView({
     const instance = mount(screen.current, latest.current, {
       colorScheme,
       dynamicTypeSize,
-      safeArea: NO_SAFE_AREA,
+      safeArea: insetsOf(safeArea, fit),
       contentHeight: fit === "content",
       ...assets ? { assets } : {}
     });
@@ -519,6 +524,11 @@ function SwiftUIView({
   useLayoutEffect(() => {
     mounted.current?.root.render(tree);
   });
+  const insets2 = insetsOf(safeArea, fit);
+  const insetsKey = `${insets2.top},${insets2.leading},${insets2.bottom},${insets2.trailing}`;
+  useLayoutEffect(() => {
+    mounted.current?.renderer.setSafeArea(insets2);
+  }, [insetsKey]);
   useLayoutEffect(() => {
     if (device.current) applyTypeSizeVariables(device.current, dynamicTypeSize);
     mounted.current?.setEnvironment({ colorScheme, dynamicTypeSize });
@@ -1759,18 +1769,91 @@ function Searchable({ text, onChange, prompt }) {
 function applyModifiers(element, modifiers) {
   const sides = [];
   const node = wrap(element, modifiers, sides);
-  if (sides.length === 0) return node;
   return createElement(Fragment, null, node, ...sides);
 }
 function wrap(element, modifiers, sides) {
   let node = element;
   for (const [key, value] of modifiers) {
-    if (value === void 0) continue;
-    if (value === null && key !== "lineLimit" && key !== "badge") continue;
-    node = apply(key, value, node, sides);
+    const inactive = value === void 0 || value === null && key !== "lineLimit" && key !== "badge";
+    const next = inactive ? node : apply(key, value, node, sides);
+    node = next === node ? neutral(key, node) : next;
   }
   return node;
 }
+const STYLED_KEYS = /* @__PURE__ */ new Set([
+  "padding",
+  "font",
+  "fontWeight",
+  "bold",
+  "foregroundStyle",
+  "background",
+  "frame",
+  "cornerRadius",
+  "clipShape",
+  "clipped",
+  "opacity",
+  "disabled",
+  "hidden",
+  "layoutPriority",
+  "lineLimit",
+  "multilineTextAlignment",
+  "fixedSize",
+  "offset",
+  "rotationEffect",
+  "scaleEffect",
+  "shadow",
+  "tint",
+  "badge",
+  "listRowInsets",
+  "imageScale",
+  "transition",
+  "gridColumnAlignment",
+  "gridCellColumns",
+  "aspectRatio",
+  "scaledToFit",
+  "scaledToFill",
+  "blur",
+  "brightness",
+  "contrast",
+  "saturation",
+  "grayscale",
+  "hueRotation",
+  "colorInvert",
+  "colorMultiply",
+  "blendMode",
+  "mask",
+  "position",
+  "zIndex",
+  "allowsHitTesting",
+  "ignoresSafeArea",
+  "rotation3DEffect",
+  "gridCellAnchor",
+  "alignmentGuide",
+  "help",
+  "pointerStyle",
+  "matchedGeometryEffect",
+  "containerRelativeFrame",
+  "contentTransition"
+]);
+const ENVIRONMENT_KEYS = /* @__PURE__ */ new Set([
+  "buttonStyle",
+  "controlSize",
+  "pickerStyle",
+  "labelsHidden",
+  "refreshable",
+  "submitLabel",
+  "labelStyle",
+  "redacted",
+  "textCase"
+]);
+const SCROLL_KEYS = /* @__PURE__ */ new Set(["scrollEdgeEffectStyle", "scrollEdgeEffectHidden", "contentMargins"]);
+function neutral(key, node) {
+  if (key === "overlay") return decorated("overlay", "center", node, null);
+  if (STYLED_KEYS.has(key)) return styled({}, node);
+  if (ENVIRONMENT_KEYS.has(key)) return withEnvironment({}, node);
+  if (SCROLL_KEYS.has(key)) return withScrollSettings({}, node);
+  return node;
+}
 function apply(key, value, node, sides) {
   switch (key) {
     case "padding":