@swiftbrowser/react 0.9.8 → 0.9.10

package/README.md

@@ -330,7 +330,9 @@ a `ScrollView` snaps, with `scrollTargetLayout` on the stack inside.
 `scrollPosition={[id, setId]}` on a `ScrollView` is `.scrollPosition(id:)`:
 when scrolling settles it is set to the `scrollID` of the view at the
 scroll view's leading edge (or `scrollPositionAnchor`), and setting it
-scrolls there.
+scrolls there, on that scroll view's axes only. `proxy.scrollTo(id, anchor,
+{ axes: 'horizontal' })` limits a reader's scroll the same way, so a pager
+inside a list leaves the list where it is.
 Name a coordinate space with `coordinateSpace="page"` on the `ScrollView`
 (or any view), and a `GeometryReader` inside reads its frame there with
 `proxy.frame({ named: 'page' })`, updated as the page scrolls.

package/dist/index.js

@@ -797,12 +797,15 @@ function insets(edges, amount) {
   }
   return result;
 }
+function command(request) {
+  return request.axes ? { anchor: request.anchor, serial: request.serial, axes: request.axes } : { anchor: request.anchor, serial: request.serial };
+}
 const ScrollRequestContext = createContext(null);
 let nextSerial = 1;
 function ScrollViewReader({ children }) {
   const [request, setRequest] = useState(null);
   const proxy = {
-    scrollTo: (id, anchor) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++ })
+    scrollTo: (id, anchor, options) => setRequest({ id, anchor: anchor === void 0 ? null : unitPoint(anchor), serial: nextSerial++, ...options?.axes ? { axes: options.axes } : {} })
   };
   return /* @__PURE__ */ jsx(ScrollRequestContext.Provider, { value: request, children: children(proxy) });
 }
@@ -810,12 +813,12 @@ function ScrollTarget({ id, children }) {
   const request = useContext(ScrollRequestContext);
   const position = useContext(ScrollPositionContext);
   const on = position ? { scrollposition: () => position.report(id) } : void 0;
-  if (request && request.id === id) return sb("styled", { style: { scrollID: true, scrollTo: { anchor: request.anchor, serial: request.serial } } }, on, children);
+  if (request && request.id === id) return sb("styled", { style: { scrollID: true, scrollTo: command(request) } }, on, children);
   if (on) return sb("styled", { style: { scrollID: true } }, on, children);
   return styled({ scrollID: true }, children);
 }
 const ScrollPositionContext = createContext(null);
-function useScrollPosition(binding, anchor) {
+function useScrollPosition(binding, anchor, axes) {
   const bound = binding !== void 0;
   const [value, set] = bound ? readBinding(binding) : [null, () => void 0];
   const last = useRef(void 0);
@@ -825,7 +828,7 @@ function useScrollPosition(binding, anchor) {
   const point = anchor === void 0 ? null : unitPoint(anchor);
   if (value !== last.current) {
     last.current = value;
-    if (value !== null && value !== reported.current) request.current = { id: value, anchor: point, serial: nextSerial++ };
+    if (value !== null && value !== reported.current) request.current = { id: value, anchor: point, serial: nextSerial++, axes };
     reported.current = void 0;
   }
   if (!bound) return null;
@@ -1002,7 +1005,7 @@ function ScrollView(props) {
   if (own.defaultScrollAnchor !== void 0) scroll["defaultScrollAnchor"] = unitPoint(own.defaultScrollAnchor);
   const edgeEffect = edgeEffectProp(settings);
   if (edgeEffect) scroll["edgeEffect"] = edgeEffect;
-  const position = useScrollPosition(own.scrollPosition, own.scrollPositionAnchor);
+  const position = useScrollPosition(own.scrollPosition, own.scrollPositionAnchor, axes);
   if (position) Object.assign(scroll, position.props);
   const content = marginedContent(own.children, settings.margins, axes === "horizontal" ? "horizontal" : "vertical");
   const inner = providingScrollSettings(ownSettings, content);
@@ -1596,9 +1599,9 @@ function matchesKey(event, key) {
 function matchesShortcut(event, shortcut) {
   if (!matchesKey(event, shortcut.key)) return false;
   const wanted = new Set(shortcut.modifiers ?? ["command"]);
-  const command = isApple() ? event.metaKey : event.ctrlKey;
+  const command2 = isApple() ? event.metaKey : event.ctrlKey;
   const control = isApple() ? event.ctrlKey : false;
-  return command === wanted.has("command") && event.shiftKey === wanted.has("shift") && event.altKey === wanted.has("option") && control === (isApple() && wanted.has("control"));
+  return command2 === wanted.has("command") && event.shiftKey === wanted.has("shift") && event.altKey === wanted.has("option") && control === (isApple() && wanted.has("control"));
 }
 function useKeyboardShortcut(shortcut, action) {
   const latest = useRef(action);
@@ -4063,18 +4066,18 @@ class GraphicsContext {
   }
   stroke(path, with_, options = {}) {
     const o = typeof options === "number" ? { lineWidth: options } : options;
-    const command = { op: "stroke", path: path.svg(), shading: shading(with_), lineWidth: o.lineWidth ?? 1 };
-    if (o.lineCap) command.lineCap = o.lineCap;
-    if (o.lineJoin) command.lineJoin = o.lineJoin;
-    if (o.miterLimit !== void 0) command.miterLimit = o.miterLimit;
-    if (o.dash) command.dash = o.dash;
-    if (o.dashPhase !== void 0) command.dashPhase = o.dashPhase;
-    this.push(command);
+    const command2 = { op: "stroke", path: path.svg(), shading: shading(with_), lineWidth: o.lineWidth ?? 1 };
+    if (o.lineCap) command2.lineCap = o.lineCap;
+    if (o.lineJoin) command2.lineJoin = o.lineJoin;
+    if (o.miterLimit !== void 0) command2.miterLimit = o.miterLimit;
+    if (o.dash) command2.dash = o.dash;
+    if (o.dashPhase !== void 0) command2.dashPhase = o.dashPhase;
+    this.push(command2);
     return this;
   }
   /** `draw(Text(...), at:anchor:)` */
   drawText(text, at, options = {}) {
-    const command = {
+    const command2 = {
       op: "text",
       text,
       x: at.x,
@@ -4082,14 +4085,14 @@ class GraphicsContext {
       anchor: unitPoint(options.anchor ?? "center"),
       shading: shading(options.color ?? "primary")
     };
-    if (options.font !== void 0) command.font = font(options.font);
-    this.push(command);
+    if (options.font !== void 0) command2.font = font(options.font);
+    this.push(command2);
     return this;
   }
   /** `draw(Image(...), at:anchor:)` or `draw(_:in:)` with `size`. */
   drawImage(image, at, options = {}) {
     const props = "url" in image ? { ...image, resizable: true } : "name" in image ? { name: image.name, resizable: true } : image;
-    const command = {
+    const command2 = {
       op: "image",
       image: props,
       x: at.x,
@@ -4098,17 +4101,17 @@ class GraphicsContext {
       ...options.size ? { width: options.size.width, height: options.size.height } : {},
       ...options.color !== void 0 ? { shading: shading(options.color) } : {}
     };
-    this.push(command);
+    this.push(command2);
     return this;
   }
-  push(command) {
+  push(command2) {
     const state = {};
     if (this.state.transform.some((v, i) => v !== IDENTITY[i])) state.transform = this.state.transform.map((v) => Math.round(v * 1e4) / 1e4);
     if (this.state.opacity !== 1) state.opacity = this.state.opacity;
     if (this.state.blendMode) state.blendMode = this.state.blendMode;
     if (this.state.clips.length) state.clips = [...this.state.clips];
     if (this.state.filters.length) state.filters = [...this.state.filters];
-    this.commands.push({ ...state, ...command });
+    this.commands.push({ ...state, ...command2 });
   }
 }
 function Canvas(props) {