@swiftbrowser/react 0.27.0 → 0.28.0

package/README.md

@@ -304,6 +304,16 @@ title="Rename" action={rename} /></> }}`);
 `presentationDetents` inside a sheet sets its detents. `useDismiss()` inside
 a pushed screen or a sheet pops or dismisses it.
 
+A sheet, a full-screen cover or a popover inherits the environment of the
+view that presents it, as SwiftUI's presentations do, though it is drawn at
+the root: a `defaultMinListRowHeight`, `font`, `fontWeight`, `bold`,
+`monospacedDigit`, `tint`, `lineLimit`, `multilineTextAlignment` or
+`imageScale` set around the presenter reaches the sheet's lists and text,
+and so does one set on the presenting view itself when written after the
+`sheet` (around it, as SwiftUI orders modifiers). An app drawn through
+`RemoteTree` has its sheets inherit the host's environment around the tree
+too.
+
 Navigation is mirrored in the browser's history by default: pushing a
 screen or presenting a sheet adds an entry, and the browser's back (a
 phone's edge swipe, Android's back gesture, the toolbar button) pops or
@@ -448,6 +458,12 @@ dragged the sidebar to on a Mac, once the drag ends; keep it (in
 `useAppStorage`, say) and pass it back as `ideal` to start there next time, as
 a Mac app restores its columns.
 
+On a Mac the sidebar panel's top 44 points are the window's color, where
+macOS draws the title bar behind the window's buttons. A page has no window
+buttons there; `<SwiftUIView sidebarTitleBar={false}>` (or `mount(...,
+{ sidebarTitleBar: false })`, `renderer.sidebarTitleBar = false`) keeps the
+panel's sidebar fill to its top. Web only: a native app is in a real window.
+
 ### Platform
 
 `usePlatform()` is `ios` or `macos`: the platform the app is drawn as. A

package/dist/components/remoteTree.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAEH,OAAO,EAAsF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3H,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAK7D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;CAClC;AA0DD;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,eAAe,GAAG,SAAS,CA2E5E"}
+{"version":3,"file":"remoteTree.d.ts","sourceRoot":"","sources":["../../src/components/remoteTree.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAGH,OAAO,EAAsF,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG3H,OAAO,KAAK,EAAc,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAM7D,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,UAAU,CAAC;IACjB;;;;OAIG;IACH,WAAW,CAAC,EAAE,SAAS,OAAO,EAAE,CAAC;CAClC;AAgED;;;;;GAKG;AACH,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,wBAAgB,UAAU,CAAC,EAAE,IAAI,EAAE,WAAW,EAAE,EAAE,eAAe,GAAG,SAAS,CA6E5E"}

package/dist/index.js

@@ -1,4 +1,4 @@
-import { createContext, useContext, createElement, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, isValidElement, useId, cloneElement, useCallback } from "react";
+import { createContext, useContext, createElement, isValidElement, useMemo, useSyncExternalStore, useLayoutEffect, useRef, Fragment, useState, Children, useEffect, useId, cloneElement, useCallback } from "react";
 import { DefaultEventPriority, ConcurrentRoot } from "react-reconciler/constants";
 import Reconciler from "react-reconciler";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
@@ -746,6 +746,37 @@ function sb(kind, props, on, children, target) {
   if (target) hostProps.target = target;
   return children === void 0 ? createElement("sb", hostProps) : createElement("sb", hostProps, children);
 }
+const INHERITED_STYLE_KEYS = /* @__PURE__ */ new Set([
+  "font",
+  "fontWeight",
+  "bold",
+  "monospacedDigit",
+  "tint",
+  "lineLimit",
+  "multilineTextAlignment",
+  "imageScale",
+  "defaultMinListRowHeight"
+]);
+const PRESENTATION_KEYS = /* @__PURE__ */ new Set(["sheet", "fullScreenCover", "popover"]);
+const InheritedStylesContext = createContext([]);
+function useInheritedStyles() {
+  return useContext(InheritedStylesContext);
+}
+function styleOf(node) {
+  if (!isValidElement(node) || node.props.kind !== "styled") return {};
+  return node.props.props?.style ?? {};
+}
+function InheritStyle({ style, children }) {
+  const parent = useContext(InheritedStylesContext);
+  const key = JSON.stringify(style);
+  const value = useMemo(() => key === "{}" ? parent : [...parent, style], [parent, key]);
+  return createElement(InheritedStylesContext.Provider, { value }, children);
+}
+function replayStyles(styles, content) {
+  if (styles.length === 0) return content;
+  const provided = createElement(InheritedStylesContext.Provider, { value: styles }, content);
+  return styles.reduceRight((child, style) => sb("styled", { style }, void 0, child), provided);
+}
 const NavigationContext = createContext(null);
 const ScreenDepthContext = createContext(0);
 function useScreenDepth() {
@@ -786,6 +817,10 @@ function renderNode(root, node, stack) {
   const children = node.children.length ? node.children.map((child) => renderNode(root, child, stack)) : void 0;
   return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), children));
 }
+function renderSheet(root, node, stack, inherited) {
+  const children = node.children.map((child) => renderNode(root, child, stack));
+  return createElement(Fragment, { key: node.id }, sb(node.kind, node.props, root.handlersFor(node.id), replayStyles(inherited, children)));
+}
 function renderScreen(root, screen, stack) {
   const out = [screenPrefs(screen.props, "$screen")];
   for (const child of screen.children) {
@@ -804,6 +839,7 @@ function RemoteScreen({ root, id }) {
 function RemoteTree({ root, initialPath }) {
   useSyncExternalStore(root.subscribe, root.getVersion, root.getVersion);
   const environment = useContext(EnvironmentContext);
+  const inherited = useInheritedStyles();
   const tree = useContext(HostTreeContext);
   const navigation = useNavigation();
   const depth = useScreenDepth();
@@ -859,7 +895,7 @@ function RemoteTree({ root, initialPath }) {
   if ("colorScheme" in root.rootProps)
     out.push(createElement(Fragment, { key: "$scheme" }, sb(PREF_KIND, { colorScheme: root.rootProps["colorScheme"] }, void 0, void 0, "root")));
   for (const child of root.root.children) {
-    const drawn = renderNode(root, child, stack);
+    const drawn = child.kind === "sheet" && inherited.length > 0 ? renderSheet(root, child, stack, inherited) : renderNode(root, child, stack);
     if (child.kind === "sheet" || child.kind === "alert") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "root")));
     else if (child.kind === "toolbar" || child.kind === "searchfield") out.push(createElement(Fragment, { key: child.id }, sb(HOIST_KIND, void 0, void 0, drawn, "navscreen")));
     else out.push(drawn);
@@ -1052,6 +1088,7 @@ function mount(screen, element, options = {}) {
     platform: options.platform === void 0 || options.platform === "auto" ? decidePlatform(width) : options.platform
   };
   renderer.contentHeight = options.contentHeight ?? false;
+  if (options.sidebarTitleBar === false) renderer.sidebarTitleBar = false;
   if (options.assets) renderer.setAssetCatalog(options.assets);
   if (options.app) browserEnvironment.files?.setApp?.(options.app);
   renderer.setEnvironment({ colorScheme: environment.colorScheme, dynamicTypeSize: environment.dynamicTypeSize, platform: environment.platform });
@@ -1360,6 +1397,7 @@ function SwiftUIView({
   safeArea,
   history = true,
   keyboard = fit === "fill",
+  sidebarTitleBar = true,
   className,
   style
 }) {
@@ -1387,6 +1425,9 @@ function SwiftUIView({
       instance.unmount();
     };
   }, [fit, history, keyboard]);
+  useLayoutEffect(() => {
+    if (mounted.current) mounted.current.renderer.sidebarTitleBar = sidebarTitleBar;
+  }, [sidebarTitleBar, fit, history, keyboard]);
   useLayoutEffect(() => {
     mounted.current?.root.render(tree);
   });
@@ -2334,7 +2375,8 @@ function useReportSplitSelection(split, selected, clear, active2 = true) {
 function OutsideSplit({ children }) {
   return /* @__PURE__ */ jsx(SplitSelectionContext.Provider, { value: null, children });
 }
-function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
+function SheetPresenter({ isPresented, onDismiss, content, fullScreen, inherited }) {
+  const around = useInheritedStyles();
   const [presented, setPresented] = readBinding(isPresented);
   if (!presented) return null;
   const dismiss = () => {
@@ -2350,7 +2392,10 @@ function SheetPresenter({ isPresented, onDismiss, content, fullScreen }) {
       "sheet",
       { detents },
       { tap: dismiss },
-      /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
+      replayStyles(
+        inherited && inherited.length > 0 ? [...around, ...inherited] : around,
+        /* @__PURE__ */ jsx(NavigationContext.Provider, { value: null, children: /* @__PURE__ */ jsx(OutsideSplit, { children: /* @__PURE__ */ jsx(DismissContext.Provider, { value: dismiss, children: content }) }) })
+      )
     ),
     "root"
   );
@@ -2857,13 +2902,30 @@ function applyModifiers(element, modifiers) {
 const isPreference = (side) => isValidElement(side) && side.props.kind === PREF_KIND;
 function wrap(element, modifiers, sides) {
   let node = element;
+  const holds = holdsViews(element);
+  const presentations = [];
   for (const [key, value] of modifiers) {
     const inactive = value === void 0 || value === null && key !== "lineLimit" && key !== "badge";
+    const before = sides.length;
     const next = inactive ? node : apply(key, value, node, sides);
     node = next === node ? neutral(key, node) : next;
+    if (INHERITED_STYLE_KEYS.has(key)) {
+      const style = styleOf(node);
+      if (Object.keys(style).length > 0) for (const presentation of presentations) presentation.after.push(style);
+      if (holds) node = createElement(InheritStyle, { style }, node);
+    }
+    if (PRESENTATION_KEYS.has(key) && sides.length > before) presentations.push({ at: before, after: [] });
+  }
+  for (const { at, after } of presentations) {
+    const side = sides[at];
+    if (after.length > 0 && isValidElement(side)) sides[at] = cloneElement(side, { inherited: after.reverse() });
   }
   return node;
 }
+function holdsViews(element) {
+  if (!isValidElement(element)) return false;
+  return element.type !== "sb" || element.props.children !== void 0;
+}
 const STYLED_KEYS = /* @__PURE__ */ new Set([
   "padding",
   "font",
@@ -6327,7 +6389,7 @@ function Chart(props) {
     const key = mark.props.foregroundStyleBy;
     if (key !== void 0 && !series.includes(key)) series.push(key);
   }
-  const styleOf = (mark) => {
+  const styleOf2 = (mark) => {
     if (mark.props.foregroundStyle !== void 0) return shapeStyle(mark.props.foregroundStyle);
     const key = mark.props.foregroundStyleBy;
     if (key !== void 0) return { name: PALETTE[series.indexOf(key) % PALETTE.length] };
@@ -6385,7 +6447,7 @@ function Chart(props) {
     );
   };
   const common = (mark) => {
-    const base = { style: styleOf(mark) };
+    const base = { style: styleOf2(mark) };
     if (mark.props.opacity !== void 0) base.opacity = mark.props.opacity;
     return base;
   };