react-native-gtkx 0.1.0-alpha.3 → 0.2.0-alpha.1

package/dist/components/pressable.js

@@ -1,6 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useLayoutEffect, useRef, useState } from "react";
+import { useLayoutEffect, useReducer, useRef, useState, } from "react";
+import { splitStyle, StyleSheet } from "../style/index";
+import { defaultCssRegistry } from "../style/registry.gtkx";
 import { Gtk, GtkBox } from "../gtkx/bridge/index";
+import { perfAddTime, perfCount, perfEnabled, perfNow } from "../perf";
 import { HostNodeContext } from "./host-node";
 import { useLayoutChild, useRnContainer, } from "./use-layout-child";
 const pressEvent = (x, y) => ({
@@ -11,14 +14,34 @@ const pressEvent = (x, y) => ({
 export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onLongPress, onHoverIn, onHoverOut, disabled = false, delayLongPress = 500, onLayout, testID, }) => {
     const widgetRef = useRef(null);
     const [pressed, setPressed] = useState(false);
-    const [hovered, setHovered] = useState(false);
+    // Hover is not React state: a boundary crossing should cost what it costs
+    // a native GtkListBox row to swap a CSS class, not a setState + render +
+    // Yoga + allocate cycle (measured: roughly 500x the latency of a native
+    // row at rest, see docs/research/scroll-performance.md, task 007).
+    // `hoveredRef` is the single source of truth, read directly at render
+    // time — safe here because this component already mutates
+    // `handlersRef.current` in the render body below, so render was never
+    // React-DOM-pure to begin with. `forceRender` is used only for the two
+    // cases that genuinely need a real render: `children` reads `hovered`,
+    // or hovering would itself change layout (not just paint).
+    const hoveredRef = useRef(false);
+    const [, forceRender] = useReducer((n) => n + 1, 0);
     const longPressTimer = useRef(null);
     const longPressFired = useRef(false);
-    const state = { pressed, hovered };
-    // RC1-WORKAROUND(controllers-as-children): see docs/gtkx-rc1-vs-main.md
-    // rc.1 has no controller-as-JSX-children support (main-only feature):
-    // gestures are attached imperatively; handlers read the latest props via a
-    // ref so the controllers are wired exactly once.
+    // TEMPORARY perf instrumentation (task 007, see
+    // docs/research/scroll-performance.md): timestamp the native enter/leave
+    // signal so hover's real signal-to-applied latency can be reported —
+    // synchronously for the fast path below, after the resulting commit for
+    // the slow one. perf.ts hooks are no-ops unless GTKX_PERF=1.
+    const hoverSignalAt = useRef(null);
+    const state = {
+        pressed,
+        hovered: hoveredRef.current,
+    };
+    // Gestures are attached imperatively even though rc.2 has a declarative
+    // `controllers` slot: the controllers are wired exactly once per widget and
+    // the handlers read the latest props through a ref, so a re-render never
+    // detaches and re-adds a gesture mid-press.
     const handlersRef = useRef({
         handlePressed: (n, x, y) => {
             void n;
@@ -36,11 +59,54 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
     });
     const resolvedStyle = typeof style === "function" ? style(state) : style;
     const resolvedChildren = typeof children === "function" ? children(state) : children;
-    const { host, node, cssClass } = useLayoutChild(widgetRef, {
+    const { host, node, cssClass, flat } = useLayoutChild(widgetRef, {
         style: resolvedStyle,
         onLayout,
     });
     useRnContainer(widgetRef, node);
+    // Hover fast path: when `children` does not read state, hovering can
+    // never change what is rendered — only `style` might. Precompute the CSS
+    // class for the OTHER hover value so the native enter/leave handlers
+    // below can swap classes directly on the widget, with no React involved
+    // at all. If hovering would also change LAYOUT (rare — every hover style
+    // in this codebase's own examples is background/border) that swap is
+    // unsafe, since a real reflow is required; fall back to the ordinary
+    // render in that case, exactly as before this change.
+    let hoverOnClass = null;
+    let hoverOffClass = null;
+    let canSwapHoverClass = typeof children !== "function";
+    if (canSwapHoverClass && typeof style === "function") {
+        const otherState = {
+            pressed,
+            hovered: !hoveredRef.current,
+        };
+        const otherFlat = StyleSheet.flatten(style(otherState));
+        const otherSplit = splitStyle(otherFlat);
+        const currentLayout = splitStyle(flat).layout;
+        if (JSON.stringify(currentLayout) !== JSON.stringify(otherSplit.layout)) {
+            // Hovering resizes or repositions this widget — a CSS class alone
+            // cannot do that, it needs Yoga. Fall back to a real render.
+            canSwapHoverClass = false;
+        }
+        else {
+            const otherClass = defaultCssRegistry.getClassName(otherSplit.visual);
+            hoverOnClass = hoveredRef.current ? cssClass : otherClass;
+            hoverOffClass = hoveredRef.current ? otherClass : cssClass;
+        }
+    }
+    // TEMPORARY perf instrumentation (task 007): runs after every commit, so
+    // it always lands right after whatever render the SLOW hover path
+    // triggered. A no-op when no hover signal is pending (the common case:
+    // renders triggered by anything else, or the fast path above, which
+    // measures itself synchronously) or when GTKX_PERF is unset.
+    useLayoutEffect(() => {
+        if (!perfEnabled || hoverSignalAt.current === null) {
+            return;
+        }
+        perfAddTime("pressable.hoverApply", perfNow() - hoverSignalAt.current);
+        perfCount("pressable.hoverFullCycle");
+        hoverSignalAt.current = null;
+    });
     const clearLongPress = () => {
         if (longPressTimer.current !== null) {
             clearTimeout(longPressTimer.current);
@@ -77,18 +143,45 @@ export const Pressable = ({ style, children, onPress, onPressIn, onPressOut, onL
         clearLongPress();
         setPressed(false);
     };
+    // Applies a hover transition: fires the RN callback, then either swaps
+    // the precomputed CSS class directly on the widget (fast path) or forces
+    // the ordinary render (slow path) — see the `canSwapHoverClass` block
+    // above for which one applies this render.
+    const applyHover = (next, fire) => {
+        const t0 = perfEnabled ? perfNow() : 0;
+        hoveredRef.current = next;
+        fire?.();
+        if (!canSwapHoverClass) {
+            if (perfEnabled) {
+                hoverSignalAt.current = t0;
+                perfCount("pressable.hoverEvent");
+            }
+            forceRender();
+            return;
+        }
+        const widget = widgetRef.current;
+        const applyClass = next ? hoverOnClass : hoverOffClass;
+        const removeClass = next ? hoverOffClass : hoverOnClass;
+        if (widget && hoverOnClass !== hoverOffClass) {
+            if (removeClass) {
+                widget.removeCssClass(removeClass);
+            }
+            if (applyClass) {
+                widget.addCssClass(applyClass);
+            }
+        }
+        if (perfEnabled) {
+            perfAddTime("pressable.hoverApply", perfNow() - t0);
+            perfCount("pressable.hoverEvent");
+            perfCount("pressable.hoverFast");
+        }
+    };
     handlersRef.current = {
         handlePressed,
         handleReleased,
         handleCancel,
-        handleEnter: () => {
-            setHovered(true);
-            onHoverIn?.();
-        },
-        handleLeave: () => {
-            setHovered(false);
-            onHoverOut?.();
-        },
+        handleEnter: () => applyHover(true, onHoverIn),
+        handleLeave: () => applyHover(false, onHoverOut),
     };
     useLayoutEffect(() => {
         const widget = widgetRef.current;

package/dist/components/pressable.js.map

@@ -1 +1 @@
-{"version":3,"file":"pressable.js","sourceRoot":"","sources":["../../src/components/pressable.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useLayoutEffect, useRef, useState, type ReactNode } from \"react\"\nimport type { StyleProp } from \"../contracts\"\nimport { Gtk, GtkBox } from \"../gtkx/bridge/index\"\nimport { HostNodeContext } from \"./host-node\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\nexport type PressableStateCallbackType = {\n  pressed: boolean\n  hovered: boolean\n}\n\nexport type PressEvent = { nativeEvent: { x: number; y: number } }\n\nexport type PressableProps = {\n  style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp)\n  children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode)\n  onPress?: (event: PressEvent) => void\n  onPressIn?: (event: PressEvent) => void\n  onPressOut?: (event: PressEvent) => void\n  onLongPress?: (event: PressEvent) => void\n  onHoverIn?: () => void\n  onHoverOut?: () => void\n  disabled?: boolean\n  delayLongPress?: number\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst pressEvent = (x: number, y: number): PressEvent => ({\n  nativeEvent: { x, y },\n})\n\n// A View with a click gesture and hover tracking. State-dependent style and\n// children follow the RN Pressable function-prop contract.\nexport const Pressable = ({\n  style,\n  children,\n  onPress,\n  onPressIn,\n  onPressOut,\n  onLongPress,\n  onHoverIn,\n  onHoverOut,\n  disabled = false,\n  delayLongPress = 500,\n  onLayout,\n  testID,\n}: PressableProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const [pressed, setPressed] = useState(false)\n  const [hovered, setHovered] = useState(false)\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const longPressFired = useRef(false)\n\n  const state: PressableStateCallbackType = { pressed, hovered }\n\n  // RC1-WORKAROUND(controllers-as-children): see docs/gtkx-rc1-vs-main.md\n  // rc.1 has no controller-as-JSX-children support (main-only feature):\n  // gestures are attached imperatively; handlers read the latest props via a\n  // ref so the controllers are wired exactly once.\n  const handlersRef = useRef({\n    handlePressed: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleReleased: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleCancel: (): void => {},\n    handleEnter: (): void => {},\n    handleLeave: (): void => {},\n  })\n  const resolvedStyle = typeof style === \"function\" ? style(state) : style\n  const resolvedChildren =\n    typeof children === \"function\" ? children(state) : children\n\n  const { host, node, cssClass } = useLayoutChild(widgetRef, {\n    style: resolvedStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  const clearLongPress = (): void => {\n    if (longPressTimer.current !== null) {\n      clearTimeout(longPressTimer.current)\n      longPressTimer.current = null\n    }\n  }\n\n  const handlePressed = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    longPressFired.current = false\n    setPressed(true)\n    onPressIn?.(pressEvent(x, y))\n    if (onLongPress) {\n      clearLongPress()\n      longPressTimer.current = setTimeout(() => {\n        longPressFired.current = true\n        onLongPress(pressEvent(x, y))\n      }, delayLongPress)\n    }\n  }\n\n  const handleReleased = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    clearLongPress()\n    setPressed(false)\n    onPressOut?.(pressEvent(x, y))\n    if (!longPressFired.current) {\n      onPress?.(pressEvent(x, y))\n    }\n  }\n\n  const handleCancel = (): void => {\n    clearLongPress()\n    setPressed(false)\n  }\n\n  handlersRef.current = {\n    handlePressed,\n    handleReleased,\n    handleCancel,\n    handleEnter: () => {\n      setHovered(true)\n      onHoverIn?.()\n    },\n    handleLeave: () => {\n      setHovered(false)\n      onHoverOut?.()\n    },\n  }\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const click = new Gtk.GestureClick()\n    click.on(\"pressed\", (n: number, x: number, y: number) =>\n      handlersRef.current.handlePressed(n, x, y),\n    )\n    click.on(\"released\", (n: number, x: number, y: number) =>\n      handlersRef.current.handleReleased(n, x, y),\n    )\n    click.on(\"cancel\", () => handlersRef.current.handleCancel())\n    widget.addController(click)\n\n    const motion = new Gtk.EventControllerMotion()\n    motion.on(\"enter\", () => handlersRef.current.handleEnter())\n    motion.on(\"leave\", () => handlersRef.current.handleLeave())\n    widget.addController(motion)\n\n    return () => {\n      widget.removeController(click)\n      widget.removeController(motion)\n    }\n  }, [])\n\n  return (\n    <GtkBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {resolvedChildren}\n      </HostNodeContext.Provider>\n    </GtkBox>\n  )\n}\n\nexport type TouchableOpacityProps = Omit<PressableProps, \"style\"> & {\n  style?: StyleProp\n  activeOpacity?: number\n}\n\n// Classic RN touchable: dims itself while pressed via widget opacity.\nexport const TouchableOpacity = ({\n  style,\n  activeOpacity = 0.5,\n  ...rest\n}: TouchableOpacityProps) => (\n  <Pressable\n    {...rest}\n    style={({ pressed }) => [style, pressed && { opacity: activeOpacity }]}\n  />\n)\n"]}
+{"version":3,"file":"pressable.js","sourceRoot":"","sources":["../../src/components/pressable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  useLayoutEffect,\n  useReducer,\n  useRef,\n  useState,\n  type ReactNode,\n} from \"react\"\nimport { splitStyle, StyleSheet } from \"../style/index\"\nimport { defaultCssRegistry } from \"../style/registry.gtkx\"\nimport type { StyleProp } from \"../contracts\"\nimport { Gtk, GtkBox } from \"../gtkx/bridge/index\"\nimport { perfAddTime, perfCount, perfEnabled, perfNow } from \"../perf\"\nimport { HostNodeContext } from \"./host-node\"\nimport {\n  useLayoutChild,\n  useRnContainer,\n  type LayoutEvent,\n} from \"./use-layout-child\"\n\nexport type PressableStateCallbackType = {\n  pressed: boolean\n  hovered: boolean\n}\n\nexport type PressEvent = { nativeEvent: { x: number; y: number } }\n\nexport type PressableProps = {\n  style?: StyleProp | ((state: PressableStateCallbackType) => StyleProp)\n  children?: ReactNode | ((state: PressableStateCallbackType) => ReactNode)\n  onPress?: (event: PressEvent) => void\n  onPressIn?: (event: PressEvent) => void\n  onPressOut?: (event: PressEvent) => void\n  onLongPress?: (event: PressEvent) => void\n  onHoverIn?: () => void\n  onHoverOut?: () => void\n  disabled?: boolean\n  delayLongPress?: number\n  onLayout?: (event: LayoutEvent) => void\n  testID?: string\n}\n\nconst pressEvent = (x: number, y: number): PressEvent => ({\n  nativeEvent: { x, y },\n})\n\n// A View with a click gesture and hover tracking. State-dependent style and\n// children follow the RN Pressable function-prop contract.\nexport const Pressable = ({\n  style,\n  children,\n  onPress,\n  onPressIn,\n  onPressOut,\n  onLongPress,\n  onHoverIn,\n  onHoverOut,\n  disabled = false,\n  delayLongPress = 500,\n  onLayout,\n  testID,\n}: PressableProps) => {\n  const widgetRef = useRef<Gtk.Box | null>(null)\n  const [pressed, setPressed] = useState(false)\n  // Hover is not React state: a boundary crossing should cost what it costs\n  // a native GtkListBox row to swap a CSS class, not a setState + render +\n  // Yoga + allocate cycle (measured: roughly 500x the latency of a native\n  // row at rest, see docs/research/scroll-performance.md, task 007).\n  // `hoveredRef` is the single source of truth, read directly at render\n  // time — safe here because this component already mutates\n  // `handlersRef.current` in the render body below, so render was never\n  // React-DOM-pure to begin with. `forceRender` is used only for the two\n  // cases that genuinely need a real render: `children` reads `hovered`,\n  // or hovering would itself change layout (not just paint).\n  const hoveredRef = useRef(false)\n  const [, forceRender] = useReducer((n: number) => n + 1, 0)\n  const longPressTimer = useRef<ReturnType<typeof setTimeout> | null>(null)\n  const longPressFired = useRef(false)\n  // TEMPORARY perf instrumentation (task 007, see\n  // docs/research/scroll-performance.md): timestamp the native enter/leave\n  // signal so hover's real signal-to-applied latency can be reported —\n  // synchronously for the fast path below, after the resulting commit for\n  // the slow one. perf.ts hooks are no-ops unless GTKX_PERF=1.\n  const hoverSignalAt = useRef<number | null>(null)\n\n  const state: PressableStateCallbackType = {\n    pressed,\n    hovered: hoveredRef.current,\n  }\n\n  // Gestures are attached imperatively even though rc.2 has a declarative\n  // `controllers` slot: the controllers are wired exactly once per widget and\n  // the handlers read the latest props through a ref, so a re-render never\n  // detaches and re-adds a gesture mid-press.\n  const handlersRef = useRef({\n    handlePressed: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleReleased: (n: number, x: number, y: number): void => {\n      void n\n      void x\n      void y\n    },\n    handleCancel: (): void => {},\n    handleEnter: (): void => {},\n    handleLeave: (): void => {},\n  })\n  const resolvedStyle = typeof style === \"function\" ? style(state) : style\n  const resolvedChildren =\n    typeof children === \"function\" ? children(state) : children\n\n  const { host, node, cssClass, flat } = useLayoutChild(widgetRef, {\n    style: resolvedStyle,\n    onLayout,\n  })\n  useRnContainer(widgetRef, node)\n\n  // Hover fast path: when `children` does not read state, hovering can\n  // never change what is rendered — only `style` might. Precompute the CSS\n  // class for the OTHER hover value so the native enter/leave handlers\n  // below can swap classes directly on the widget, with no React involved\n  // at all. If hovering would also change LAYOUT (rare — every hover style\n  // in this codebase's own examples is background/border) that swap is\n  // unsafe, since a real reflow is required; fall back to the ordinary\n  // render in that case, exactly as before this change.\n  let hoverOnClass: string | null = null\n  let hoverOffClass: string | null = null\n  let canSwapHoverClass = typeof children !== \"function\"\n  if (canSwapHoverClass && typeof style === \"function\") {\n    const otherState: PressableStateCallbackType = {\n      pressed,\n      hovered: !hoveredRef.current,\n    }\n    const otherFlat = StyleSheet.flatten(style(otherState))\n    const otherSplit = splitStyle(otherFlat)\n    const currentLayout = splitStyle(flat).layout\n    if (JSON.stringify(currentLayout) !== JSON.stringify(otherSplit.layout)) {\n      // Hovering resizes or repositions this widget — a CSS class alone\n      // cannot do that, it needs Yoga. Fall back to a real render.\n      canSwapHoverClass = false\n    } else {\n      const otherClass = defaultCssRegistry.getClassName(otherSplit.visual)\n      hoverOnClass = hoveredRef.current ? cssClass : otherClass\n      hoverOffClass = hoveredRef.current ? otherClass : cssClass\n    }\n  }\n\n  // TEMPORARY perf instrumentation (task 007): runs after every commit, so\n  // it always lands right after whatever render the SLOW hover path\n  // triggered. A no-op when no hover signal is pending (the common case:\n  // renders triggered by anything else, or the fast path above, which\n  // measures itself synchronously) or when GTKX_PERF is unset.\n  useLayoutEffect(() => {\n    if (!perfEnabled || hoverSignalAt.current === null) {\n      return\n    }\n    perfAddTime(\"pressable.hoverApply\", perfNow() - hoverSignalAt.current)\n    perfCount(\"pressable.hoverFullCycle\")\n    hoverSignalAt.current = null\n  })\n\n  const clearLongPress = (): void => {\n    if (longPressTimer.current !== null) {\n      clearTimeout(longPressTimer.current)\n      longPressTimer.current = null\n    }\n  }\n\n  const handlePressed = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    longPressFired.current = false\n    setPressed(true)\n    onPressIn?.(pressEvent(x, y))\n    if (onLongPress) {\n      clearLongPress()\n      longPressTimer.current = setTimeout(() => {\n        longPressFired.current = true\n        onLongPress(pressEvent(x, y))\n      }, delayLongPress)\n    }\n  }\n\n  const handleReleased = (_n: number, x: number, y: number): void => {\n    if (disabled) {\n      return\n    }\n    clearLongPress()\n    setPressed(false)\n    onPressOut?.(pressEvent(x, y))\n    if (!longPressFired.current) {\n      onPress?.(pressEvent(x, y))\n    }\n  }\n\n  const handleCancel = (): void => {\n    clearLongPress()\n    setPressed(false)\n  }\n\n  // Applies a hover transition: fires the RN callback, then either swaps\n  // the precomputed CSS class directly on the widget (fast path) or forces\n  // the ordinary render (slow path) — see the `canSwapHoverClass` block\n  // above for which one applies this render.\n  const applyHover = (next: boolean, fire: (() => void) | undefined): void => {\n    const t0 = perfEnabled ? perfNow() : 0\n    hoveredRef.current = next\n    fire?.()\n    if (!canSwapHoverClass) {\n      if (perfEnabled) {\n        hoverSignalAt.current = t0\n        perfCount(\"pressable.hoverEvent\")\n      }\n      forceRender()\n      return\n    }\n    const widget = widgetRef.current\n    const applyClass = next ? hoverOnClass : hoverOffClass\n    const removeClass = next ? hoverOffClass : hoverOnClass\n    if (widget && hoverOnClass !== hoverOffClass) {\n      if (removeClass) {\n        widget.removeCssClass(removeClass)\n      }\n      if (applyClass) {\n        widget.addCssClass(applyClass)\n      }\n    }\n    if (perfEnabled) {\n      perfAddTime(\"pressable.hoverApply\", perfNow() - t0)\n      perfCount(\"pressable.hoverEvent\")\n      perfCount(\"pressable.hoverFast\")\n    }\n  }\n\n  handlersRef.current = {\n    handlePressed,\n    handleReleased,\n    handleCancel,\n    handleEnter: () => applyHover(true, onHoverIn),\n    handleLeave: () => applyHover(false, onHoverOut),\n  }\n\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const click = new Gtk.GestureClick()\n    click.on(\"pressed\", (n: number, x: number, y: number) =>\n      handlersRef.current.handlePressed(n, x, y),\n    )\n    click.on(\"released\", (n: number, x: number, y: number) =>\n      handlersRef.current.handleReleased(n, x, y),\n    )\n    click.on(\"cancel\", () => handlersRef.current.handleCancel())\n    widget.addController(click)\n\n    const motion = new Gtk.EventControllerMotion()\n    motion.on(\"enter\", () => handlersRef.current.handleEnter())\n    motion.on(\"leave\", () => handlersRef.current.handleLeave())\n    widget.addController(motion)\n\n    return () => {\n      widget.removeController(click)\n      widget.removeController(motion)\n    }\n  }, [])\n\n  return (\n    <GtkBox\n      ref={widgetRef}\n      name={testID}\n      cssClasses={cssClass ? [cssClass] : []}\n    >\n      <HostNodeContext.Provider\n        value={{ engine: host.engine, node, widgetRef }}\n      >\n        {resolvedChildren}\n      </HostNodeContext.Provider>\n    </GtkBox>\n  )\n}\n\nexport type TouchableOpacityProps = Omit<PressableProps, \"style\"> & {\n  style?: StyleProp\n  activeOpacity?: number\n}\n\n// Classic RN touchable: dims itself while pressed via widget opacity.\nexport const TouchableOpacity = ({\n  style,\n  activeOpacity = 0.5,\n  ...rest\n}: TouchableOpacityProps) => (\n  <Pressable\n    {...rest}\n    style={({ pressed }) => [style, pressed && { opacity: activeOpacity }]}\n  />\n)\n"]}

package/dist/components/rect-store.d.ts

@@ -1,3 +1,4 @@
+import type { Transform2D, TransformPart } from "../contracts";
 export type StoredRect = {
     x: number;
     y: number;
@@ -7,11 +8,20 @@ export type StoredRect = {
 export type StoredOffset = {
     dx: number;
     dy: number;
+    matrix: Transform2D | null;
 };
 export declare const setStoredRect: (widget: object, rect: StoredRect) => void;
 export declare const getStoredRect: (widget: object) => StoredRect | undefined;
-export declare const setStoredOffset: (widget: object, dx: number, dy: number) => void;
+export declare const setStoredOffset: (widget: object, dx: number, dy: number, matrix?: Transform2D | null) => void;
 export declare const getStoredOffset: (widget: object) => StoredOffset;
+/**
+ * Stores a child's whole RN `transform` array, split the way the allocate
+ * hook wants it: a pure translation keeps the positional path (offset the
+ * rect, no GskTransform at all — the pre-rotate/scale behaviour), anything
+ * that rotates or scales carries the composed matrix instead, translations
+ * folded in so the array's order is preserved exactly.
+ */
+export declare const setStoredTransform: (widget: object, parts: readonly TransformPart[] | undefined) => void;
 export declare const beginAllocatePass: () => void;
 export declare const endAllocatePass: () => void;
 export declare const deferDuringAllocate: (widget: object, job: () => void) => boolean;

package/dist/components/rect-store.js

@@ -1,14 +1,38 @@
-const ZERO_OFFSET = { dx: 0, dy: 0 };
+// Committed engine rects and animated offsets, keyed by the CHILD widget.
+// Written by commit callbacks (use-layout-child) and by Animated bindings;
+// read by the parent container's RnGtkxLayout allocate() hook. Pure data —
+// no FFI here, so both writers and the bridge-side reader stay testable.
+import { composeTransform, isTranslationOnly } from "../style/transform";
+const ZERO_OFFSET = { dx: 0, dy: 0, matrix: null };
 const rects = new WeakMap();
 const offsets = new WeakMap();
 export const setStoredRect = (widget, rect) => {
     rects.set(widget, rect);
 };
 export const getStoredRect = (widget) => rects.get(widget);
-export const setStoredOffset = (widget, dx, dy) => {
-    offsets.set(widget, { dx, dy });
+export const setStoredOffset = (widget, dx, dy, matrix = null) => {
+    offsets.set(widget, { dx, dy, matrix });
 };
 export const getStoredOffset = (widget) => offsets.get(widget) ?? ZERO_OFFSET;
+/**
+ * Stores a child's whole RN `transform` array, split the way the allocate
+ * hook wants it: a pure translation keeps the positional path (offset the
+ * rect, no GskTransform at all — the pre-rotate/scale behaviour), anything
+ * that rotates or scales carries the composed matrix instead, translations
+ * folded in so the array's order is preserved exactly.
+ */
+export const setStoredTransform = (widget, parts) => {
+    if (!parts || parts.length === 0) {
+        setStoredOffset(widget, 0, 0, null);
+        return;
+    }
+    const matrix = composeTransform(parts);
+    if (isTranslationOnly(matrix)) {
+        setStoredOffset(widget, matrix.dx, matrix.dy, null);
+        return;
+    }
+    setStoredOffset(widget, 0, 0, matrix);
+};
 // While a window-root allocate() pass runs the engine synchronously, commit
 // callbacks must not queue GTK resizes mid-pass — the pass itself is about to
 // place everything. Queue jobs are deferred (deduped per widget) and run once

package/dist/components/rect-store.js.map

@@ -1 +1 @@
-{"version":3,"file":"rect-store.js","sourceRoot":"","sources":["../../src/components/rect-store.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,GAAiB,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAA;AAElD,MAAM,KAAK,GAAG,IAAI,OAAO,EAAsB,CAAA;AAC/C,MAAM,OAAO,GAAG,IAAI,OAAO,EAAwB,CAAA;AAEnD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAc,EAAE,IAAgB,EAAQ,EAAE;IACtE,KAAK,CAAC,GAAG,CAAC,MAAM,EAAE,IAAI,CAAC,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,MAAc,EAA0B,EAAE,CACtE,KAAK,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;AAEnB,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,MAAc,EACd,EAAU,EACV,EAAU,EACJ,EAAE;IACR,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAA;AACjC,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,MAAc,EAAgB,EAAE,CAC9D,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,WAAW,CAAA;AAEpC,4EAA4E;AAC5E,8EAA8E;AAC9E,8EAA8E;AAC9E,0EAA0E;AAC1E,uBAAuB;AACvB,IAAI,iBAAiB,GAAG,CAAC,CAAA;AACzB,MAAM,YAAY,GAAG,IAAI,GAAG,EAAsB,CAAA;AAElD,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAS,EAAE;IAC1C,iBAAiB,IAAI,CAAC,CAAA;AACxB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,GAAS,EAAE;IACxC,iBAAiB,IAAI,CAAC,CAAA;IACtB,IAAI,iBAAiB,KAAK,CAAC,IAAI,YAAY,CAAC,IAAI,GAAG,CAAC,EAAE,CAAC;QACrD,MAAM,IAAI,GAAG,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,CAAA;QACvC,YAAY,CAAC,KAAK,EAAE,CAAA;QACpB,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,GAAG,EAAE,CAAA;QACP,CAAC;IACH,CAAC;AACH,CAAC,CAAA;AAED,wEAAwE;AACxE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CACjC,MAAc,EACd,GAAe,EACN,EAAE;IACX,IAAI,iBAAiB,KAAK,CAAC,EAAE,CAAC;QAC5B,OAAO,KAAK,CAAA;IACd,CAAC;IACD,YAAY,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC7B,OAAO,IAAI,CAAA;AACb,CAAC,CAAA","sourcesContent":["// Committed engine rects and animated offsets, keyed by the CHILD widget.\n// Written by commit callbacks (use-layout-child) and by Animated bindings;\n// read by the parent container's RnGtkxLayout allocate() hook. Pure data —\n// no FFI here, so both writers and the bridge-side reader stay testable.\nexport type StoredRect = {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\nexport type StoredOffset = { dx: number; dy: number }\n\nconst ZERO_OFFSET: StoredOffset = { dx: 0, dy: 0 }\n\nconst rects = new WeakMap<object, StoredRect>()\nconst offsets = new WeakMap<object, StoredOffset>()\n\nexport const setStoredRect = (widget: object, rect: StoredRect): void => {\n  rects.set(widget, rect)\n}\n\nexport const getStoredRect = (widget: object): StoredRect | undefined =>\n  rects.get(widget)\n\nexport const setStoredOffset = (\n  widget: object,\n  dx: number,\n  dy: number,\n): void => {\n  offsets.set(widget, { dx, dy })\n}\n\nexport const getStoredOffset = (widget: object): StoredOffset =>\n  offsets.get(widget) ?? ZERO_OFFSET\n\n// While a window-root allocate() pass runs the engine synchronously, commit\n// callbacks must not queue GTK resizes mid-pass — the pass itself is about to\n// place everything. Queue jobs are deferred (deduped per widget) and run once\n// the pass ends; commits whose rect did not change never re-defer, so the\n// follow-up converges.\nlet allocatePassDepth = 0\nconst deferredJobs = new Map<object, () => void>()\n\nexport const beginAllocatePass = (): void => {\n  allocatePassDepth += 1\n}\n\nexport const endAllocatePass = (): void => {\n  allocatePassDepth -= 1\n  if (allocatePassDepth === 0 && deferredJobs.size > 0) {\n    const jobs = [...deferredJobs.values()]\n    deferredJobs.clear()\n    for (const job of jobs) {\n      job()\n    }\n  }\n}\n\n// Returns true when the job was deferred (an allocate pass is running).\nexport const deferDuringAllocate = (\n  widget: object,\n  job: () => void,\n): boolean => {\n  if (allocatePassDepth === 0) {\n    return false\n  }\n  deferredJobs.set(widget, job)\n  return true\n}\n"]}
+{"version":3,"file":"rect-store.js","sourceRoot":"","sources":["../../src/components/rect-store.ts"],"names":[],"mappings":"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","sourcesContent":["// Committed engine rects and animated offsets, keyed by the CHILD widget.\n// Written by commit callbacks (use-layout-child) and by Animated bindings;\n// read by the parent container's RnGtkxLayout allocate() hook. Pure data —\n// no FFI here, so both writers and the bridge-side reader stay testable.\nimport { composeTransform, isTranslationOnly } from \"../style/transform\"\nimport type { Transform2D, TransformPart } from \"../contracts\"\n\nexport type StoredRect = {\n  x: number\n  y: number\n  width: number\n  height: number\n}\n\n// The visual transform of one child, split by cost. A pure translation stays\n// `matrix: null` and is applied by simply offsetting the rect — the path that\n// existed before rotate/scale and that costs no GskTransform. Anything that\n// rotates or scales carries the whole composed matrix (translations\n// included, so the RN ordering is preserved) and pays one gsk call per\n// allocation. Both live in ONE record on purpose: the allocate hook already\n// reads it per child, so a transform costs no extra WeakMap lookup.\nexport type StoredOffset = {\n  dx: number\n  dy: number\n  matrix: Transform2D | null\n}\n\nconst ZERO_OFFSET: StoredOffset = { dx: 0, dy: 0, matrix: null }\n\nconst rects = new WeakMap<object, StoredRect>()\nconst offsets = new WeakMap<object, StoredOffset>()\n\nexport const setStoredRect = (widget: object, rect: StoredRect): void => {\n  rects.set(widget, rect)\n}\n\nexport const getStoredRect = (widget: object): StoredRect | undefined =>\n  rects.get(widget)\n\nexport const setStoredOffset = (\n  widget: object,\n  dx: number,\n  dy: number,\n  matrix: Transform2D | null = null,\n): void => {\n  offsets.set(widget, { dx, dy, matrix })\n}\n\nexport const getStoredOffset = (widget: object): StoredOffset =>\n  offsets.get(widget) ?? ZERO_OFFSET\n\n/**\n * Stores a child's whole RN `transform` array, split the way the allocate\n * hook wants it: a pure translation keeps the positional path (offset the\n * rect, no GskTransform at all — the pre-rotate/scale behaviour), anything\n * that rotates or scales carries the composed matrix instead, translations\n * folded in so the array's order is preserved exactly.\n */\nexport const setStoredTransform = (\n  widget: object,\n  parts: readonly TransformPart[] | undefined,\n): void => {\n  if (!parts || parts.length === 0) {\n    setStoredOffset(widget, 0, 0, null)\n    return\n  }\n  const matrix = composeTransform(parts)\n  if (isTranslationOnly(matrix)) {\n    setStoredOffset(widget, matrix.dx, matrix.dy, null)\n    return\n  }\n  setStoredOffset(widget, 0, 0, matrix)\n}\n\n// While a window-root allocate() pass runs the engine synchronously, commit\n// callbacks must not queue GTK resizes mid-pass — the pass itself is about to\n// place everything. Queue jobs are deferred (deduped per widget) and run once\n// the pass ends; commits whose rect did not change never re-defer, so the\n// follow-up converges.\nlet allocatePassDepth = 0\nconst deferredJobs = new Map<object, () => void>()\n\nexport const beginAllocatePass = (): void => {\n  allocatePassDepth += 1\n}\n\nexport const endAllocatePass = (): void => {\n  allocatePassDepth -= 1\n  if (allocatePassDepth === 0 && deferredJobs.size > 0) {\n    const jobs = [...deferredJobs.values()]\n    deferredJobs.clear()\n    for (const job of jobs) {\n      job()\n    }\n  }\n}\n\n// Returns true when the job was deferred (an allocate pass is running).\nexport const deferDuringAllocate = (\n  widget: object,\n  job: () => void,\n): boolean => {\n  if (allocatePassDepth === 0) {\n    return false\n  }\n  deferredJobs.set(widget, job)\n  return true\n}\n"]}

package/dist/components/svg/animated-support.d.ts

@@ -0,0 +1,19 @@
+export type AnimatedNodeLike = {
+    addListener(callback: (state: {
+        value: number;
+    }) => void): string;
+    removeListener(id: string): void;
+    __getValue(): number;
+};
+export type AnimatableNumber = number | AnimatedNodeLike;
+export declare const isAnimatedNode: (value: unknown) => value is AnimatedNodeLike;
+/**
+ * Resolves a set of possibly-animated numeric fields and calls `build` with
+ * the fully-resolved snapshot: once synchronously (mount / whenever a
+ * field's identity changes — a new plain number, a new Animated node, or a
+ * switch between the two) and again on every tick of any field that is
+ * currently animated. `build` itself is read from a ref on every call, so a
+ * re-render between ticks always reaches the latest closure without forcing
+ * a re-subscribe.
+ */
+export declare const useAnimatedShapeBuild: (fields: Record<string, AnimatableNumber>, build: (resolved: Record<string, number>) => void, extraDeps?: readonly unknown[]) => void;

package/dist/components/svg/animated-support.js

@@ -0,0 +1,64 @@
+// Shared "own invalidation channel" for SVG: geometry/paint numeric props
+// accept a plain number OR an Animated node (Animated.Value /
+// AnimatedInterpolation). Same duck-typed detection as components/
+// animated.tsx's isAnimatedNode — kept as a separate small copy rather than
+// a shared export because the two call sites want different subscription
+// targets (rect-store + queueAllocate there, an SVG descriptor + queueDraw
+// here) and duplicating a five-line predicate is cheaper than coupling them.
+//
+// Every tick mutates the resolved-value snapshot and calls `build` directly
+// — no React re-render, no setState, matching the epic's answer to "how does
+// Animated redraw a path": queueDraw, not queueAllocate.
+import { useLayoutEffect, useRef } from "react";
+export const isAnimatedNode = (value) => typeof value === "object" &&
+    value !== null &&
+    typeof value.addListener === "function" &&
+    typeof value.__getValue === "function";
+const resolve = (value) => isAnimatedNode(value) ? value.__getValue() : value;
+/**
+ * Resolves a set of possibly-animated numeric fields and calls `build` with
+ * the fully-resolved snapshot: once synchronously (mount / whenever a
+ * field's identity changes — a new plain number, a new Animated node, or a
+ * switch between the two) and again on every tick of any field that is
+ * currently animated. `build` itself is read from a ref on every call, so a
+ * re-render between ticks always reaches the latest closure without forcing
+ * a re-subscribe.
+ */
+// `extraDeps` covers everything `build` closes over that is NOT one of the
+// animatable `fields` — d/points strings, transform strings, fill/stroke and
+// the rest of the static paint props. Without them here, a change to (say)
+// `fill` alone would not re-run `build` until some unrelated field changed.
+export const useAnimatedShapeBuild = (fields, build, extraDeps = []) => {
+    const buildRef = useRef(build);
+    buildRef.current = build;
+    const keys = Object.keys(fields);
+    const values = [...keys.map((key) => fields[key]), ...extraDeps];
+    useLayoutEffect(() => {
+        const resolved = {};
+        for (const key of keys) {
+            resolved[key] = resolve(fields[key]);
+        }
+        const run = () => buildRef.current(resolved);
+        run();
+        const subscriptions = [];
+        for (const key of keys) {
+            const source = fields[key];
+            if (isAnimatedNode(source)) {
+                const id = source.addListener(({ value }) => {
+                    resolved[key] = value;
+                    run();
+                });
+                subscriptions.push({ node: source, id });
+            }
+        }
+        return () => {
+            for (const { node, id } of subscriptions) {
+                node.removeListener(id);
+            }
+        };
+        // `values` is the real dependency list (flattened field values/node
+        // identities); `keys`/`fields`/`build` are read through refs/closures.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, values);
+};
+//# sourceMappingURL=animated-support.js.map

package/dist/components/svg/animated-support.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-support.js","sourceRoot":"","sources":["../../../src/components/svg/animated-support.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,8DAA8D;AAC9D,mEAAmE;AACnE,4EAA4E;AAC5E,yEAAyE;AACzE,2EAA2E;AAC3E,6EAA6E;AAC7E,EAAE;AACF,4EAA4E;AAC5E,6EAA6E;AAC7E,yDAAyD;AACzD,OAAO,EAAE,eAAe,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AAU/C,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAc,EAA6B,EAAE,CAC1E,OAAO,KAAK,KAAK,QAAQ;IACzB,KAAK,KAAK,IAAI;IACd,OAAQ,KAA0B,CAAC,WAAW,KAAK,UAAU;IAC7D,OAAQ,KAA0B,CAAC,UAAU,KAAK,UAAU,CAAA;AAE9D,MAAM,OAAO,GAAG,CAAC,KAAuB,EAAU,EAAE,CAClD,cAAc,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,KAAK,CAAA;AAEpD;;;;;;;;GAQG;AACH,2EAA2E;AAC3E,6EAA6E;AAC7E,2EAA2E;AAC3E,4EAA4E;AAC5E,MAAM,CAAC,MAAM,qBAAqB,GAAG,CACnC,MAAwC,EACxC,KAAiD,EACjD,YAAgC,EAAE,EAC5B,EAAE;IACR,MAAM,QAAQ,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAC9B,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAA;IAExB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;IAChC,MAAM,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,SAAS,CAAC,CAAA;IAEhE,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,QAAQ,GAA2B,EAAE,CAAA;QAC3C,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,QAAQ,CAAC,GAAG,CAAC,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,CAAE,CAAC,CAAA;QACvC,CAAC;QACD,MAAM,GAAG,GAAG,GAAS,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;QAClD,GAAG,EAAE,CAAA;QAEL,MAAM,aAAa,GAA6C,EAAE,CAAA;QAClE,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;YACvB,MAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAE,CAAA;YAC3B,IAAI,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC;gBAC3B,MAAM,EAAE,GAAG,MAAM,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;oBAC1C,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;oBACrB,GAAG,EAAE,CAAA;gBACP,CAAC,CAAC,CAAA;gBACF,aAAa,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAA;YAC1C,CAAC;QACH,CAAC;QACD,OAAO,GAAG,EAAE;YACV,KAAK,MAAM,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,aAAa,EAAE,CAAC;gBACzC,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,CAAA;YACzB,CAAC;QACH,CAAC,CAAA;QACD,oEAAoE;QACpE,uEAAuE;QACvE,uDAAuD;IACzD,CAAC,EAAE,MAAM,CAAC,CAAA;AACZ,CAAC,CAAA","sourcesContent":["// Shared \"own invalidation channel\" for SVG: geometry/paint numeric props\n// accept a plain number OR an Animated node (Animated.Value /\n// AnimatedInterpolation). Same duck-typed detection as components/\n// animated.tsx's isAnimatedNode — kept as a separate small copy rather than\n// a shared export because the two call sites want different subscription\n// targets (rect-store + queueAllocate there, an SVG descriptor + queueDraw\n// here) and duplicating a five-line predicate is cheaper than coupling them.\n//\n// Every tick mutates the resolved-value snapshot and calls `build` directly\n// — no React re-render, no setState, matching the epic's answer to \"how does\n// Animated redraw a path\": queueDraw, not queueAllocate.\nimport { useLayoutEffect, useRef } from \"react\"\n\nexport type AnimatedNodeLike = {\n  addListener(callback: (state: { value: number }) => void): string\n  removeListener(id: string): void\n  __getValue(): number\n}\n\nexport type AnimatableNumber = number | AnimatedNodeLike\n\nexport const isAnimatedNode = (value: unknown): value is AnimatedNodeLike =>\n  typeof value === \"object\" &&\n  value !== null &&\n  typeof (value as AnimatedNodeLike).addListener === \"function\" &&\n  typeof (value as AnimatedNodeLike).__getValue === \"function\"\n\nconst resolve = (value: AnimatableNumber): number =>\n  isAnimatedNode(value) ? value.__getValue() : value\n\n/**\n * Resolves a set of possibly-animated numeric fields and calls `build` with\n * the fully-resolved snapshot: once synchronously (mount / whenever a\n * field's identity changes — a new plain number, a new Animated node, or a\n * switch between the two) and again on every tick of any field that is\n * currently animated. `build` itself is read from a ref on every call, so a\n * re-render between ticks always reaches the latest closure without forcing\n * a re-subscribe.\n */\n// `extraDeps` covers everything `build` closes over that is NOT one of the\n// animatable `fields` — d/points strings, transform strings, fill/stroke and\n// the rest of the static paint props. Without them here, a change to (say)\n// `fill` alone would not re-run `build` until some unrelated field changed.\nexport const useAnimatedShapeBuild = (\n  fields: Record<string, AnimatableNumber>,\n  build: (resolved: Record<string, number>) => void,\n  extraDeps: readonly unknown[] = [],\n): void => {\n  const buildRef = useRef(build)\n  buildRef.current = build\n\n  const keys = Object.keys(fields)\n  const values = [...keys.map((key) => fields[key]), ...extraDeps]\n\n  useLayoutEffect(() => {\n    const resolved: Record<string, number> = {}\n    for (const key of keys) {\n      resolved[key] = resolve(fields[key]!)\n    }\n    const run = (): void => buildRef.current(resolved)\n    run()\n\n    const subscriptions: { node: AnimatedNodeLike; id: string }[] = []\n    for (const key of keys) {\n      const source = fields[key]!\n      if (isAnimatedNode(source)) {\n        const id = source.addListener(({ value }) => {\n          resolved[key] = value\n          run()\n        })\n        subscriptions.push({ node: source, id })\n      }\n    }\n    return () => {\n      for (const { node, id } of subscriptions) {\n        node.removeListener(id)\n      }\n    }\n    // `values` is the real dependency list (flattened field values/node\n    // identities); `keys`/`fields`/`build` are read through refs/closures.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, values)\n}\n"]}

package/dist/components/svg/context.d.ts

@@ -0,0 +1,8 @@
+import { type RefObject } from "react";
+import type { Gtk } from "../../gtkx/bridge/index";
+export type SvgRootContextValue = {
+    rootRef: RefObject<Gtk.Widget | null>;
+    requestRedraw: () => void;
+};
+export declare const SvgRootContext: React.Context<SvgRootContextValue | null>;
+export declare const useSvgRoot: (componentName: string) => SvgRootContextValue;

package/dist/components/svg/context.js

@@ -0,0 +1,15 @@
+// Context handed down from <Svg> to every descendant: a ref to the root
+// widget (so a leaf can call queueDraw without walking the GTK tree upward)
+// plus a bound convenience wrapper. Mirrors HostNodeContext (host-node.ts)
+// for the Yoga tree — same idea, separate tree, because SVG nodes carry no
+// Yoga node at all (see svg.tsx).
+import { createContext, useContext } from "react";
+export const SvgRootContext = createContext(null);
+export const useSvgRoot = (componentName) => {
+    const context = useContext(SvgRootContext);
+    if (!context) {
+        throw new Error(`<${componentName}> must be rendered inside <Svg>`);
+    }
+    return context;
+};
+//# sourceMappingURL=context.js.map

package/dist/components/svg/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/components/svg/context.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,4EAA4E;AAC5E,2EAA2E;AAC3E,2EAA2E;AAC3E,kCAAkC;AAClC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAkB,MAAM,OAAO,CAAA;AAQjE,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAA;AAE7E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,aAAqB,EAAuB,EAAE;IACvE,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAA;IAC1C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,IAAI,aAAa,iCAAiC,CAAC,CAAA;IACrE,CAAC;IACD,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA","sourcesContent":["// Context handed down from <Svg> to every descendant: a ref to the root\n// widget (so a leaf can call queueDraw without walking the GTK tree upward)\n// plus a bound convenience wrapper. Mirrors HostNodeContext (host-node.ts)\n// for the Yoga tree — same idea, separate tree, because SVG nodes carry no\n// Yoga node at all (see svg.tsx).\nimport { createContext, useContext, type RefObject } from \"react\"\nimport type { Gtk } from \"../../gtkx/bridge/index\"\n\nexport type SvgRootContextValue = {\n  rootRef: RefObject<Gtk.Widget | null>\n  requestRedraw: () => void\n}\n\nexport const SvgRootContext = createContext<SvgRootContextValue | null>(null)\n\nexport const useSvgRoot = (componentName: string): SvgRootContextValue => {\n  const context = useContext(SvgRootContext)\n  if (!context) {\n    throw new Error(`<${componentName}> must be rendered inside <Svg>`)\n  }\n  return context\n}\n"]}

package/dist/components/svg/gradients.d.ts

@@ -0,0 +1,31 @@
+import { type ReactNode } from "react";
+import { type SvgGradientUnits } from "../../gtkx/bridge/index";
+export type DefsProps = {
+    children?: ReactNode;
+};
+export declare const Defs: ({ children }: DefsProps) => React.JSX.Element;
+export type LinearGradientProps = {
+    id: string;
+    x1?: number;
+    y1?: number;
+    x2?: number;
+    y2?: number;
+    gradientUnits?: SvgGradientUnits;
+    children?: ReactNode;
+};
+export declare const LinearGradient: ({ id, x1, y1, x2, y2, gradientUnits, children, }: LinearGradientProps) => React.JSX.Element;
+export type RadialGradientProps = {
+    id: string;
+    cx?: number;
+    cy?: number;
+    r?: number;
+    gradientUnits?: SvgGradientUnits;
+    children?: ReactNode;
+};
+export declare const RadialGradient: ({ id, cx, cy, r, gradientUnits, children, }: RadialGradientProps) => React.JSX.Element;
+export type StopProps = {
+    offset: number | string;
+    stopColor?: string;
+    stopOpacity?: number;
+};
+export declare const Stop: ({ offset, stopColor, stopOpacity, }: StopProps) => React.JSX.Element;

package/dist/components/svg/gradients.js

@@ -0,0 +1,93 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// <Defs>/<LinearGradient>/<RadialGradient>/<Stop> — paint resources, not
+// visible nodes. They ride the same RnGtkxSvgNode tree as everything else
+// (so the bridge's snapshot() can walk <Defs> separately, before the main
+// paint pass, to build an id → gradient map — see svg-node.ts), but are
+// never part of the Animated numeric channel: gradients are definitions,
+// not painted geometry, and nothing in scope needs an animated stop.
+import { useLayoutEffect, useRef } from "react";
+import { Gdk, resolveSvgColor, setSvgNodeDescriptor, } from "../../gtkx/bridge/index";
+import { SvgNodeElement } from "./node";
+export const Defs = ({ children }) => {
+    const widgetRef = useRef(null);
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (widget) {
+            setSvgNodeDescriptor(widget, { kind: "defs" });
+        }
+    }, []);
+    return _jsx(SvgNodeElement, { widgetRef: widgetRef, children: children });
+};
+export const LinearGradient = ({ id, x1 = 0, y1 = 0, x2 = 1, y2 = 0, gradientUnits = "objectBoundingBox", children, }) => {
+    const widgetRef = useRef(null);
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (widget) {
+            setSvgNodeDescriptor(widget, {
+                kind: "gradient",
+                type: "linear",
+                id,
+                units: gradientUnits,
+                x1,
+                y1,
+                x2,
+                y2,
+            });
+        }
+    }, [id, x1, y1, x2, y2, gradientUnits]);
+    return _jsx(SvgNodeElement, { widgetRef: widgetRef, children: children });
+};
+export const RadialGradient = ({ id, cx = 0.5, cy = 0.5, r = 0.5, gradientUnits = "objectBoundingBox", children, }) => {
+    const widgetRef = useRef(null);
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (widget) {
+            setSvgNodeDescriptor(widget, {
+                kind: "gradient",
+                type: "radial",
+                id,
+                units: gradientUnits,
+                cx,
+                cy,
+                r,
+            });
+        }
+    }, [id, cx, cy, r, gradientUnits]);
+    return _jsx(SvgNodeElement, { widgetRef: widgetRef, children: children });
+};
+// "50%" or 0.5 — both spellings are common in real SVGO output.
+const parseOffset = (offset) => {
+    if (typeof offset === "number") {
+        return offset;
+    }
+    const trimmed = offset.trim();
+    return trimmed.endsWith("%")
+        ? Number.parseFloat(trimmed.slice(0, -1)) / 100
+        : Number.parseFloat(trimmed);
+};
+export const Stop = ({ offset, stopColor = "black", stopOpacity = 1, }) => {
+    const widgetRef = useRef(null);
+    useLayoutEffect(() => {
+        const widget = widgetRef.current;
+        if (!widget) {
+            return;
+        }
+        const color = resolveSvgColor(stopColor) ??
+            new Gdk.RGBA({ red: 0, green: 0, blue: 0, alpha: 1 });
+        const clampedOpacity = Math.max(0, Math.min(1, stopOpacity));
+        setSvgNodeDescriptor(widget, {
+            kind: "stop",
+            offset: Math.max(0, Math.min(1, parseOffset(offset))),
+            color: clampedOpacity >= 1
+                ? color
+                : new Gdk.RGBA({
+                    red: color.red,
+                    green: color.green,
+                    blue: color.blue,
+                    alpha: color.alpha * clampedOpacity,
+                }),
+        });
+    }, [offset, stopColor, stopOpacity]);
+    return _jsx(SvgNodeElement, { widgetRef: widgetRef });
+};
+//# sourceMappingURL=gradients.js.map

package/dist/components/svg/gradients.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gradients.js","sourceRoot":"","sources":["../../../src/components/svg/gradients.tsx"],"names":[],"mappings":"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","sourcesContent":["// <Defs>/<LinearGradient>/<RadialGradient>/<Stop> — paint resources, not\n// visible nodes. They ride the same RnGtkxSvgNode tree as everything else\n// (so the bridge's snapshot() can walk <Defs> separately, before the main\n// paint pass, to build an id → gradient map — see svg-node.ts), but are\n// never part of the Animated numeric channel: gradients are definitions,\n// not painted geometry, and nothing in scope needs an animated stop.\nimport { useLayoutEffect, useRef, type ReactNode } from \"react\"\nimport {\n  Gdk,\n  resolveSvgColor,\n  setSvgNodeDescriptor,\n  type Gtk,\n  type SvgGradientUnits,\n} from \"../../gtkx/bridge/index\"\nimport { SvgNodeElement } from \"./node\"\n\nexport type DefsProps = { children?: ReactNode }\n\nexport const Defs = ({ children }: DefsProps) => {\n  const widgetRef = useRef<Gtk.Widget | null>(null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (widget) {\n      setSvgNodeDescriptor(widget, { kind: \"defs\" })\n    }\n  }, [])\n  return <SvgNodeElement widgetRef={widgetRef}>{children}</SvgNodeElement>\n}\n\nexport type LinearGradientProps = {\n  id: string\n  x1?: number\n  y1?: number\n  x2?: number\n  y2?: number\n  gradientUnits?: SvgGradientUnits\n  children?: ReactNode\n}\n\nexport const LinearGradient = ({\n  id,\n  x1 = 0,\n  y1 = 0,\n  x2 = 1,\n  y2 = 0,\n  gradientUnits = \"objectBoundingBox\",\n  children,\n}: LinearGradientProps) => {\n  const widgetRef = useRef<Gtk.Widget | null>(null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (widget) {\n      setSvgNodeDescriptor(widget, {\n        kind: \"gradient\",\n        type: \"linear\",\n        id,\n        units: gradientUnits,\n        x1,\n        y1,\n        x2,\n        y2,\n      })\n    }\n  }, [id, x1, y1, x2, y2, gradientUnits])\n  return <SvgNodeElement widgetRef={widgetRef}>{children}</SvgNodeElement>\n}\n\nexport type RadialGradientProps = {\n  id: string\n  cx?: number\n  cy?: number\n  r?: number\n  gradientUnits?: SvgGradientUnits\n  children?: ReactNode\n}\n\nexport const RadialGradient = ({\n  id,\n  cx = 0.5,\n  cy = 0.5,\n  r = 0.5,\n  gradientUnits = \"objectBoundingBox\",\n  children,\n}: RadialGradientProps) => {\n  const widgetRef = useRef<Gtk.Widget | null>(null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (widget) {\n      setSvgNodeDescriptor(widget, {\n        kind: \"gradient\",\n        type: \"radial\",\n        id,\n        units: gradientUnits,\n        cx,\n        cy,\n        r,\n      })\n    }\n  }, [id, cx, cy, r, gradientUnits])\n  return <SvgNodeElement widgetRef={widgetRef}>{children}</SvgNodeElement>\n}\n\n// \"50%\" or 0.5 — both spellings are common in real SVGO output.\nconst parseOffset = (offset: number | string): number => {\n  if (typeof offset === \"number\") {\n    return offset\n  }\n  const trimmed = offset.trim()\n  return trimmed.endsWith(\"%\")\n    ? Number.parseFloat(trimmed.slice(0, -1)) / 100\n    : Number.parseFloat(trimmed)\n}\n\nexport type StopProps = {\n  offset: number | string\n  stopColor?: string\n  stopOpacity?: number\n}\n\nexport const Stop = ({\n  offset,\n  stopColor = \"black\",\n  stopOpacity = 1,\n}: StopProps) => {\n  const widgetRef = useRef<Gtk.Widget | null>(null)\n  useLayoutEffect(() => {\n    const widget = widgetRef.current\n    if (!widget) {\n      return\n    }\n    const color =\n      resolveSvgColor(stopColor) ??\n      new Gdk.RGBA({ red: 0, green: 0, blue: 0, alpha: 1 })\n    const clampedOpacity = Math.max(0, Math.min(1, stopOpacity))\n    setSvgNodeDescriptor(widget, {\n      kind: \"stop\",\n      offset: Math.max(0, Math.min(1, parseOffset(offset))),\n      color:\n        clampedOpacity >= 1\n          ? color\n          : new Gdk.RGBA({\n              red: color.red,\n              green: color.green,\n              blue: color.blue,\n              alpha: color.alpha * clampedOpacity,\n            }),\n    })\n  }, [offset, stopColor, stopOpacity])\n  return <SvgNodeElement widgetRef={widgetRef} />\n}\n"]}

package/dist/components/svg/group.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import { type AnimatableNumber } from "./animated-support";
+export type GProps = {
+    transform?: string;
+    opacity?: AnimatableNumber;
+    children?: ReactNode;
+};
+export declare const G: ({ transform, opacity, children }: GProps) => React.JSX.Element;