@delacour/react-native-ui 0.4.1 → 0.5.0-alpha.20261021202224

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@delacour/react-native-ui",
-	"version": "0.4.1",
+	"version": "0.5.0-alpha.20261021202224",
 	"description": "React Native UI components — Uniwind, Reanimated, Gesture Handler",
 	"type": "module",
 	"license": "MIT",
@@ -162,6 +162,7 @@
 		"./lib/scroll-edges": "./src/lib/scroll-edges.ts",
 		"./lib/scroll-maths": "./src/lib/scroll-maths.ts",
 		"./lib/scroll-sections": "./src/lib/scroll-sections.ts",
+		"./lib/skia-native-id": "./src/lib/skia-native-id.ts",
 		"./lib/slot": "./src/lib/slot.tsx",
 		"./lib/tv": "./src/lib/tv.ts",
 		"./lib/wrap-text-children": "./src/lib/wrap-text-children.ts",
@@ -183,9 +184,9 @@
 		"@maplibre/maplibre-react-native": "^11.5.0",
 		"@central-icons-react-native/round-outlined-radius-1-stroke-1.5": "^1.1",
 		"@delacour/react-native-bottom-sheet": ">=0.2.0",
-		"@delacour/react-native-charts": ">=0.1.0",
+		"@delacour/react-native-charts": "0.2.0-alpha.20261021202224",
 		"@legendapp/list": ">=3.3",
-		"@shopify/react-native-skia": ">=2",
+		"react-native-skia": ">=3",
 		"expo-linear-gradient": ">=15",
 		"expo-router": ">=57",
 		"react": ">=19",
@@ -218,7 +219,7 @@
 		"@legendapp/list": {
 			"optional": true
 		},
-		"@shopify/react-native-skia": {
+		"react-native-skia": {
 			"optional": true
 		},
 		"expo-router": {
@@ -238,6 +239,7 @@
 		"@delacour/react-native-bottom-sheet": "workspace:*",
 		"@delacour/react-native-charts": "workspace:*",
 		"@delacour/tsconfig": "workspace:*",
+		"react-native-skia": "catalog:",
 		"@types/bun": "^1.3.8",
 		"@types/react": "catalog:",
 		"expo-router": "~58.0.24",

package/src/components/chart/chart-tooltip-x.tsx

@@ -1,8 +1,8 @@
 import type { ChartBounds, ChartOrientation, ChartScrubState, ChartStep } from "@delacour/react-native-charts";
 import { ChartCursorLine, useChartContext as useEngineChart } from "@delacour/react-native-charts";
-import { Rect } from "@shopify/react-native-skia";
 import type { ReactElement } from "react";
 import { useDerivedValue } from "react-native-reanimated";
+import { Rect } from "react-native-skia";
 import { useChart } from "./chart.context";
 
 export type ChartTooltipXProps = {

package/src/components/flow/AGENTS.md

@@ -14,7 +14,7 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
 | --- | --- |
 | `index.ts` | → `@delacour/react-native-ui/flow` |
 | `flow.tsx` | Root: the viewport, the canvas gestures, the three layers, fit/zoom/connect, the `Object.assign` surface |
-| `flow-background.tsx` | `Flow.Background` — one pattern-filled rect sized to the visible graph |
+| `flow-background.tsx` | `Flow.Background` — one shader-filled rect sized to the visible graph |
 | `flow-node.tsx` | `Flow.Node` — drag, tap, confine, and the node's accessibility actions |
 | `flow-handle.tsx` | `Flow.Handle` — placement, registration, and the connection drag |
 | `flow-edge.tsx` | `Flow.Edge` — the route worklet, dashes, arrowhead |
@@ -23,8 +23,7 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
 | `flow-minimap.tsx` | `Flow.MiniMap` — every entry as a block, plus the visible-area frame |
 | `flow-connection-preview.tsx` | Internal: the line a connection drag draws, above the nodes |
 | `flow-registry.ts` | Internal: the node/group index — a shared position, size and handle map per entry |
-| `flow-svg.ts` | Internal: an animated `G` whose native `matrix` a worklet drives |
-| `flow.context.tsx` | `FlowProvider`, `useFlow()`, `useFlowContext()`, `useFlowPart()`, the SVG-layer, group and node contexts |
+| `flow.context.tsx` | `FlowProvider`, `useFlow()`, `useFlowContext()`, `useFlowPart()`, the canvas-layer, group and node contexts |
 | `flow-geometry.ts` | Types, routing, fit, zoom and minimap maths — one worklet, plus JS-thread copies |
 | `flow-geometry.test.ts` | Every side pair, every variant, overlap, zero size, fit, zoom, clamp |
 | `flow.variants.ts` | The slotted `tv()`, the defaults, and every non-geometry resolver — no RN imports |
@@ -49,7 +48,7 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
   function" the first time a node moves. Worklets reach geometry as `flowGeometry().route…`; the
   JS thread and the tests use the destructured copies, which are not worklets.
 - **Children draw in three layers whatever order they are written in.** `sortLayers` walks
-  children, fragments and arrays: `Edge` and `Background` go into one SVG beneath the nodes,
+  children, fragments and arrays: `Edge` and `Background` go into one Skia canvas beneath the nodes,
   `Node` and `Group` into the transformed view, `Controls` and `MiniMap` on top unscaled. An
   edge wrapped in a custom component is not found — it renders `null` and warns in development.
 - **Layers are chosen by `displayName`, never by `child.type === FlowEdge`.** In a development
@@ -72,9 +71,25 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
   parent draws but is not hit tested on every platform, so the layer extends
   `FLOW_LAYER_EXTENT` past the canvas each way and scales about its own centre, which is the
   graph's origin. An empty view allocates no backing store at that size.
-- **The SVG layer is driven by `matrix`, not `transform`.** `react-native-svg` folds `transform`
-  into `matrix` on the JS side; a worklet's animated prop bypasses that fold, so `flow-svg.ts`
-  types the native prop and writes it directly.
+- **The canvas is a second React reconciler, so nothing inside it reaches the app.** Context does
+  not cross `<Canvas>`: an edge calling `useThemeColor` there would read no `ScopedTheme`, and
+  `useCalmMotion` no `CalmMotionProvider`. The root collects every colour its canvas children
+  name (`collectFlowCanvasTokens`), resolves them above the canvas in one `useThemeColors` call
+  with `isCalm` beside them, and re-renders `FlowProvider` plus `FlowCanvasLayerProvider` inside
+  the canvas — the trick `@delacour/react-native-charts` uses. A part off the canvas gets `null`
+  from `useFlowCanvasLayer()` and warns. The preview and the minimap own their canvases and
+  resolve their colours just outside them.
+- **`flow.tsx` imports `lib/skia-native-id` for its effect.** After a JS reload Skia reused the old
+  runtime's canvas ids, which its native registry still held as torn down, so the edges and the
+  background came up blank — the minimap too — until a re-render (pressing the lock was enough).
+  The import moves this runtime's ids to a fresh range before any of the three canvases asks for one.
+- **Shared values go straight into Skia props.** The pan and zoom are one derived `transform` on
+  the canvas's `Group`; an edge's route is a derived `SkPath` (`Skia.Path.MakeFromSVGString` in
+  the worklet), its march a `DashPathEffect` `phase`. Nothing crosses to the JS thread per frame.
+- **The background is a runtime shader, not a pattern.** One SkSL effect draws dots, a grid or
+  crosses as a signed distance in graph units, so the marks scale with the zoom and stay sharp at
+  any of it. Runtime SkSL has no `fwidth`, so the antialias width — one device pixel in graph
+  units — is a uniform, `1 / (zoom × PixelRatio)`.
 - **Gestures nest innermost-first.** A handle's drag blocks its node's and the canvas's, a
   node's drag blocks the canvas's, and a node that cannot be dragged lets the canvas pan
   straight through it. The canvas's pan and pinch are simultaneous and both incremental, so a
@@ -103,8 +118,9 @@ parts: `Background`, `Node`, `Handle`, `Edge`, `Group`, `Controls`, `MiniMap`, a
   layer is needed for something that never leaves the canvas.
 - **The minimap's bounds hold the visible area too**, so its frame never slides off the map
   when the canvas is panned past the graph. It takes no touches.
-- **No Skia.** The renderer is `react-native-svg` + Reanimated animated props + Gesture Handler,
-  all existing peers, so `flow` adds no peer dependency.
+- **Skia is an optional peer.** The renderer is `react-native-skia` + Reanimated +
+  Gesture Handler. Skia was already the `Chart` renderer, so an app with either has it; one with
+  neither installs it when it adds `flow`.
 
 ## Accessibility
 

package/src/components/flow/flow-background.tsx

@@ -1,12 +1,49 @@
-import { type ReactElement, useId } from "react";
-import Animated, { useAnimatedProps } from "react-native-reanimated";
-import { Circle, Defs, Path, Pattern, Rect } from "react-native-svg";
-import { useThemeColor } from "../../hooks/use-theme-color";
-import { useFlowPart, useIsInFlowSvgLayer } from "./flow.context";
-import { FLOW_DEFAULTS, type FlowBackgroundVariant, resolveBackgroundPattern } from "./flow.variants";
+import type { ReactElement } from "react";
+import { PixelRatio } from "react-native";
+import { useDerivedValue } from "react-native-reanimated";
+import { Rect, Shader, Skia } from "react-native-skia";
+import { useFlowCanvasLayer, useFlowPart } from "./flow.context";
+import {
+	FLOW_DEFAULTS,
+	type FlowBackgroundVariant,
+	resolveBackgroundPattern,
+	resolveFlowCanvasToken,
+} from "./flow.variants";
 import { flowGeometry } from "./flow-geometry";
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
+/**
+ * Every mark as a signed distance in graph units, so one shader draws all three and the edge is
+ * antialiased by `aa` — a device pixel in graph units, since runtime SkSL has no `fwidth`.
+ * `shape` 0 is a dot in the middle of each tile, 1 a grid along the tile edges, 2 a centred cross.
+ */
+const BACKGROUND_SKSL = `
+uniform float shape;
+uniform float tile;
+uniform float weight;
+uniform float arm;
+uniform float aa;
+uniform vec4 color;
+
+half4 main(vec2 p) {
+	vec2 q = mod(p, tile);
+	float d;
+	if (shape < 0.5) {
+		d = length(q - vec2(tile * 0.5)) - weight;
+	} else if (shape < 1.5) {
+		vec2 e = min(q, tile - q);
+		d = min(e.x, e.y) - weight;
+	} else {
+		vec2 c = abs(q - vec2(tile * 0.5));
+		d = min(max(c.x - arm, c.y - weight), max(c.y - arm, c.x - weight));
+	}
+	float a = color.a * (1.0 - smoothstep(-aa * 0.5, aa * 0.5, d));
+	return half4(color.rgb * a, a);
+}
+`;
+
+const BACKGROUND_EFFECT = Skia.RuntimeEffect.Make(BACKGROUND_SKSL);
+
+const PIXEL_RATIO = PixelRatio.get();
 
 export type FlowBackgroundProps = {
 	/** The mark each tile repeats. */
@@ -19,32 +56,13 @@ export type FlowBackgroundProps = {
 	color?: string;
 };
 
-/**
- * The tile's mark, drawn once inside the pattern.
- *
- * Above the `return` rather than inline: the three marks are a discriminated union and each
- * branch reads only its own fields.
- */
-function FlowBackgroundMark({
-	pattern,
-	color,
-}: {
-	pattern: ReturnType<typeof resolveBackgroundPattern>;
-	color: string | undefined;
-}): ReactElement | null {
-	if (pattern.kind === "none") return null;
-	if (pattern.kind === "dots") return <Circle cx={pattern.cx} cy={pattern.cy} fill={color} r={pattern.r} />;
-	return <Path d={pattern.d} fill="none" stroke={color} strokeWidth={pattern.strokeWidth} />;
-}
-FlowBackgroundMark.displayName = "DelacourUI.Flow.Background.Mark";
-
 /**
  * The canvas's backdrop — dots, lines or crosses on a grid that pans and zooms with the graph.
  *
- * **One rect, filled with a pattern, sized to what is on screen.** The pattern is in graph units
- * inside the canvas's transformed group, so it scales with the zoom for free; the rect is resized
- * every frame to the visible part of the graph, so there is no edge to pan past and no tile drawn
- * off screen. Hidden from assistive technology with the rest of the SVG layer.
+ * **One rect, filled by a shader, sized to what is on screen.** The shader works in graph units
+ * inside the canvas's transformed group, so the marks scale with the zoom for free; the rect is
+ * resized every frame to the visible part of the graph, so there is no edge to pan past and
+ * nothing is shaded off screen. Hidden from assistive technology with the rest of the canvas.
  */
 export function FlowBackground({
 	variant = "dots",
@@ -53,33 +71,34 @@ export function FlowBackground({
 	color,
 }: FlowBackgroundProps): ReactElement | null {
 	const { viewport, container } = useFlowPart("Flow.Background");
-	const isInLayer = useIsInFlowSvgLayer();
-	const fill = useThemeColor(color ?? "border");
-	const patternId = `flow-bg-${useId().replace(/[^a-zA-Z0-9-]/g, "")}`;
+	const layer = useFlowCanvasLayer();
+	const token = resolveFlowCanvasToken(FlowBackground.displayName, color);
+	const fill = token === undefined ? undefined : layer?.colors[token];
+	const rgba = Array.from(Skia.Color(fill ?? "transparent"));
 	const pattern = resolveBackgroundPattern(variant, gap, size);
 
-	const rectProps = useAnimatedProps(() => {
-		const visible = flowGeometry().visibleGraphRect(viewport.value, container.value);
-		return { height: visible.height, width: visible.width, x: visible.x, y: visible.y };
-	});
+	const visible = useDerivedValue(() => flowGeometry().visibleGraphRect(viewport.value, container.value));
+	const uniforms = useDerivedValue(() => ({
+		aa: 1 / (viewport.value.zoom * PIXEL_RATIO),
+		arm: pattern.kind === "none" ? 0 : pattern.arm,
+		color: rgba,
+		shape: pattern.kind === "none" ? 0 : pattern.shape,
+		tile: pattern.kind === "none" ? 1 : pattern.tile,
+		weight: pattern.kind === "none" ? 0 : pattern.weight,
+	}));
 
-	if (!isInLayer) {
+	if (layer === null) {
 		if (process.env.NODE_ENV !== "production") {
 			console.warn("Flow.Background: render it as a direct child of <Flow>, where the canvas can draw it.");
 		}
 		return null;
 	}
-	if (pattern.kind === "none") return null;
+	if (pattern.kind === "none" || BACKGROUND_EFFECT === null) return null;
 
 	return (
-		<>
-			<Defs>
-				<Pattern height={pattern.tile} id={patternId} patternUnits="userSpaceOnUse" width={pattern.tile} x={0} y={0}>
-					<FlowBackgroundMark color={fill} pattern={pattern} />
-				</Pattern>
-			</Defs>
-			<AnimatedRect animatedProps={rectProps} fill={`url(#${patternId})`} />
-		</>
+		<Rect rect={visible}>
+			<Shader source={BACKGROUND_EFFECT} uniforms={uniforms} />
+		</Rect>
 	);
 }
 FlowBackground.displayName = "DelacourUI.Flow.Background";

package/src/components/flow/flow-connection-preview.tsx

@@ -1,54 +1,57 @@
 import type { ReactElement } from "react";
-import { View } from "react-native";
-import Animated, { useAnimatedProps } from "react-native-reanimated";
-import Svg, { Path } from "react-native-svg";
+import { StyleSheet, View } from "react-native";
+import { useDerivedValue } from "react-native-reanimated";
+import { Canvas, DashPathEffect, Group, Path, Skia } from "react-native-skia";
 import { useThemeColor } from "../../hooks/use-theme-color";
 import { useFlowPart } from "./flow.context";
 import { FLOW_DEFAULTS } from "./flow.variants";
 import { flowGeometry } from "./flow-geometry";
-import { AnimatedMatrixG, type FlowMatrixGProps } from "./flow-svg";
-
-const AnimatedPath = Animated.createAnimatedComponent(Path);
 
 /** The side a preview arrives on — the one facing back at the handle it left. */
 const OPPOSITE = { bottom: "top", left: "right", right: "left", top: "bottom" } as const;
 
+const PREVIEW_DASH = [6, 4];
+
 /**
  * The line from a handle to the finger while a connection is dragged — internal.
  *
- * **Its own SVG, above the nodes.** The edges' layer sits beneath the nodes, which is right for an
- * edge and wrong for a line the finger is drawing: it would vanish behind the very card it is
- * being dragged onto. Nothing here takes a touch.
+ * **Its own canvas, above the nodes.** The edges' canvas sits beneath the nodes, which is right for
+ * an edge and wrong for a line the finger is drawing: it would vanish behind the very card it is
+ * being dragged onto. Nothing here takes a touch. Its colour is resolved out here, above the
+ * canvas, where the app's theme is still in reach.
  */
 export function FlowConnectionPreview(): ReactElement {
 	const { viewport, preview } = useFlowPart("Flow.ConnectionPreview");
-	const stroke = useThemeColor("primary");
+	const stroke = useThemeColor("primary") ?? "transparent";
 
-	const groupProps = useAnimatedProps<FlowMatrixGProps>(() => {
+	const transform = useDerivedValue(() => {
 		const { x, y, zoom } = viewport.value;
-		return { matrix: [zoom, 0, 0, zoom, x, y] };
+		return [{ translateX: x }, { translateY: y }, { scale: zoom }];
 	});
 
-	const lineProps = useAnimatedProps(() => {
-		const { isActive, from, fromSide, to } = preview.value;
+	const path = useDerivedValue(() => {
+		const { from, fromSide, to } = preview.value;
 		const d = flowGeometry().routeBezier(from, fromSide, to, OPPOSITE[fromSide], FLOW_DEFAULTS.edgeCurvature);
-		return { d, opacity: isActive ? 1 : 0 };
+		return Skia.Path.MakeFromSVGString(d) ?? Skia.Path.Make();
 	});
+	const opacity = useDerivedValue(() => (preview.value.isActive ? 1 : 0));
 
 	return (
-		<View className="absolute inset-0" pointerEvents="none">
-			<Svg height="100%" width="100%">
-				<AnimatedMatrixG animatedProps={groupProps}>
-					<AnimatedPath
-						animatedProps={lineProps}
-						fill="none"
-						stroke={stroke}
-						strokeDasharray={[6, 4]}
-						strokeLinecap="round"
+		<View pointerEvents="none" style={StyleSheet.absoluteFill}>
+			<Canvas style={StyleSheet.absoluteFill}>
+				<Group transform={transform}>
+					<Path
+						color={stroke}
+						opacity={opacity}
+						path={path}
+						strokeCap="round"
 						strokeWidth={FLOW_DEFAULTS.edgeWidth}
-					/>
-				</AnimatedMatrixG>
-			</Svg>
+						style="stroke"
+					>
+						<DashPathEffect intervals={PREVIEW_DASH} />
+					</Path>
+				</Group>
+			</Canvas>
 		</View>
 	);
 }

package/src/components/flow/flow-edge.tsx

@@ -1,18 +1,15 @@
 import { type ReactElement, useEffect } from "react";
-import Animated, {
+import {
 	cancelAnimation,
 	Easing,
-	useAnimatedProps,
 	useDerivedValue,
 	useSharedValue,
 	withRepeat,
 	withTiming,
 } from "react-native-reanimated";
-import { G, Path } from "react-native-svg";
-import { useCalmMotion } from "../../hooks/use-calm-motion";
-import { useThemeColor } from "../../hooks/use-theme-color";
-import { useFlowPart, useIsInFlowSvgLayer } from "./flow.context";
-import { FLOW_DEFAULTS, resolveArrowSize, resolveEdgeDash } from "./flow.variants";
+import { DashPathEffect, Group, Path, Skia, type SkPath } from "react-native-skia";
+import { useFlowCanvasLayer, useFlowPart } from "./flow.context";
+import { FLOW_DEFAULTS, resolveArrowSize, resolveEdgeDash, resolveFlowCanvasToken } from "./flow.variants";
 import {
 	type FlowEdgeVariant,
 	type FlowEndpointReference,
@@ -21,10 +18,11 @@ import {
 	parseEndpoint,
 } from "./flow-geometry";
 
-const AnimatedPath = Animated.createAnimatedComponent(Path);
-
-/** A path that draws nothing, for the frames before both ends have measured. */
-const EMPTY_PATH = "M0 0";
+/** A route as a Skia path — an empty one for the frames before both ends have measured. */
+function toSkiaPath(d: string | undefined): SkPath {
+	"worklet";
+	return (d ? Skia.Path.MakeFromSVGString(d) : null) ?? Skia.Path.Make();
+}
 
 export type FlowEdgeProps = {
 	/** `"nodeId"` or `"nodeId.handleId"`. */
@@ -84,9 +82,10 @@ export function FlowEdge({
 	curvature = FLOW_DEFAULTS.edgeCurvature,
 }: FlowEdgeProps): ReactElement | null {
 	const { registry } = useFlowPart("Flow.Edge");
-	const isInLayer = useIsInFlowSvgLayer();
-	const isCalm = useCalmMotion();
-	const stroke = useThemeColor(color ?? "muted-foreground");
+	const layer = useFlowCanvasLayer();
+	const isCalm = layer?.isCalm ?? false;
+	const token = resolveFlowCanvasToken(FlowEdge.displayName, color);
+	const stroke = (token === undefined ? undefined : layer?.colors[token]) ?? "transparent";
 
 	const source = parseEndpoint(from);
 	const target = parseEndpoint(to);
@@ -133,18 +132,12 @@ export function FlowEdge({
 		return () => cancelAnimation(dashOffset);
 	}, [dash.cycle, dashOffset, shouldMarch]);
 
-	const lineProps = useAnimatedProps(() => ({
-		d: geometry.value?.d ?? EMPTY_PATH,
-		opacity: geometry.value ? 1 : 0,
-		strokeDashoffset: dashOffset.value,
-	}));
-
-	const arrowProps = useAnimatedProps(() => ({
-		d: geometry.value?.arrow || EMPTY_PATH,
-		opacity: geometry.value?.arrow ? 1 : 0,
-	}));
+	const linePath = useDerivedValue(() => toSkiaPath(geometry.value?.d));
+	const lineOpacity = useDerivedValue(() => (geometry.value ? 1 : 0));
+	const arrowPath = useDerivedValue(() => toSkiaPath(geometry.value?.arrow));
+	const arrowOpacity = useDerivedValue(() => (geometry.value?.arrow ? 1 : 0));
 
-	if (!isInLayer) {
+	if (layer === null) {
 		if (process.env.NODE_ENV !== "production") {
 			console.warn(
 				`Flow.Edge ${from} → ${to}: render edges as direct children of <Flow> (or from a .map() there), ` +
@@ -155,20 +148,20 @@ export function FlowEdge({
 	}
 
 	return (
-		<G>
-			<AnimatedPath
-				animatedProps={lineProps}
-				fill="none"
-				stroke={stroke}
-				strokeDasharray={dash.dashArray}
-				strokeLinecap="round"
-				strokeLinejoin="round"
+		<Group>
+			<Path
+				color={stroke}
+				opacity={lineOpacity}
+				path={linePath}
+				strokeCap="round"
+				strokeJoin="round"
 				strokeWidth={width}
-			/>
-			{hasArrow ? (
-				<AnimatedPath animatedProps={arrowProps} fill={stroke} stroke={stroke} strokeLinejoin="round" />
-			) : null}
-		</G>
+				style="stroke"
+			>
+				{dash.dashArray ? <DashPathEffect intervals={dash.dashArray} phase={dashOffset} /> : null}
+			</Path>
+			{hasArrow ? <Path color={stroke} opacity={arrowOpacity} path={arrowPath} strokeJoin="round" /> : null}
+		</Group>
 	);
 }
 FlowEdge.displayName = "DelacourUI.Flow.Edge";

package/src/components/flow/flow-minimap.tsx

@@ -1,14 +1,14 @@
 import { type ReactElement, useMemo } from "react";
-import Animated, { type SharedValue, useAnimatedProps, useDerivedValue } from "react-native-reanimated";
-import Svg, { Rect } from "react-native-svg";
+import { type SharedValue, useDerivedValue } from "react-native-reanimated";
+import { Canvas, Group, Rect, RoundedRect, Skia } from "react-native-skia";
 import { useThemeColor } from "../../hooks/use-theme-color";
 import { Surface } from "../surface";
 import { useFlowPart } from "./flow.context";
 import { FLOW_DEFAULTS, type FlowMiniMapCorner, flowVariants } from "./flow.variants";
 import { type FlowPoint, type FlowSize, flowGeometry } from "./flow-geometry";
-import { AnimatedMatrixG, type FlowMatrixGProps } from "./flow-svg";
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
+/** A block's corner, in graph units. */
+const BLOCK_RADIUS = 4;
 
 export type FlowMiniMapProps = {
 	/** Which corner of the canvas it floats in. */
@@ -22,16 +22,20 @@ export type FlowMiniMapProps = {
 
 type MiniMapShape = { id: string; isGroup: boolean; position: SharedValue<FlowPoint>; size: SharedValue<FlowSize> };
 
-/** One node or group, as a block that follows its drag. */
-function FlowMiniMapBlock({ shape, fill }: { shape: MiniMapShape; fill: string | undefined }): ReactElement {
+/**
+ * One node or group, as a block that follows its drag. Drawn inside the minimap's canvas, so its
+ * colour arrives as a plain value — no theme hook can reach the app from in there.
+ */
+function FlowMiniMapBlock({ shape, fill }: { shape: MiniMapShape; fill: string }): ReactElement {
 	const { position, size } = shape;
-	const props = useAnimatedProps(() => ({
-		height: size.value.height,
-		width: size.value.width,
-		x: position.value.x,
-		y: position.value.y,
-	}));
-	return <AnimatedRect animatedProps={props} fill={fill} fillOpacity={shape.isGroup ? 0.25 : 0.6} rx={4} />;
+	const rect = useDerivedValue(() =>
+		Skia.RRectXY(
+			Skia.XYWHRect(position.value.x, position.value.y, size.value.width, size.value.height),
+			BLOCK_RADIUS,
+			BLOCK_RADIUS
+		)
+	);
+	return <RoundedRect color={fill} opacity={shape.isGroup ? 0.25 : 0.6} rect={rect} />;
 }
 FlowMiniMapBlock.displayName = "DelacourUI.Flow.MiniMap.Block";
 
@@ -54,8 +58,8 @@ export function FlowMiniMap({
 }: FlowMiniMapProps): ReactElement {
 	const { entries, viewport, container } = useFlowPart("Flow.MiniMap");
 	const slots = flowVariants({ miniMapCorner: corner });
-	const nodeFill = useThemeColor(nodeColor ?? "muted-foreground");
-	const frameStroke = useThemeColor("primary");
+	const nodeFill = useThemeColor(nodeColor ?? "muted-foreground") ?? "transparent";
+	const frameStroke = useThemeColor("primary") ?? "transparent";
 
 	const shapes = useMemo<MiniMapShape[]>(
 		() =>
@@ -80,21 +84,12 @@ export function FlowMiniMap({
 		return { transform: geometry.miniMapTransform(bounds, width, height, FLOW_DEFAULTS.miniMapPadding), visible };
 	});
 
-	const groupProps = useAnimatedProps<FlowMatrixGProps>(() => {
+	const transform = useDerivedValue(() => {
 		const { scale, x, y } = fit.value.transform;
-		return { matrix: [scale, 0, 0, scale, x, y] };
-	});
-
-	const frameProps = useAnimatedProps(() => {
-		const { visible, transform } = fit.value;
-		return {
-			height: visible.height,
-			strokeWidth: 1.5 / transform.scale,
-			width: visible.width,
-			x: visible.x,
-			y: visible.y,
-		};
+		return [{ translateX: x }, { translateY: y }, { scale }];
 	});
+	const frame = useDerivedValue(() => fit.value.visible);
+	const frameWidth = useDerivedValue(() => 1.5 / fit.value.transform.scale);
 
 	return (
 		<Surface
@@ -105,14 +100,14 @@ export function FlowMiniMap({
 			pointerEvents="none"
 			style={{ height, width }}
 		>
-			<Svg height={height} width={width}>
-				<AnimatedMatrixG animatedProps={groupProps}>
+			<Canvas style={{ height, width }}>
+				<Group transform={transform}>
 					{shapes.map((shape) => (
 						<FlowMiniMapBlock fill={nodeFill} key={shape.id} shape={shape} />
 					))}
-					<AnimatedRect animatedProps={frameProps} fill="none" stroke={frameStroke} />
-				</AnimatedMatrixG>
-			</Svg>
+					<Rect color={frameStroke} rect={frame} strokeWidth={frameWidth} style="stroke" />
+				</Group>
+			</Canvas>
 		</Surface>
 	);
 }

package/src/components/flow/flow.context.tsx

@@ -78,16 +78,35 @@ export function useFlow(): UseFlowResult {
 	return { fitView: () => fitView(), getNodeRect, isLocked, setLocked, viewport, zoomBy };
 }
 
-/** True inside the canvas's SVG layer — the only place an edge or a background can draw. */
-const FlowSvgLayerContext = createContext(false);
+/**
+ * What a part drawing on the Skia canvas cannot look up for itself.
+ *
+ * `<Canvas>` is a second React reconciler, so a theme hook or `useCalmMotion` called inside it
+ * reads no provider from the app — no `ScopedTheme`, no `CalmMotionProvider`. The root resolves
+ * both above the canvas and re-provides them here, beside a re-rendered `FlowProvider`.
+ */
+export type FlowCanvasLayerValue = {
+	/** Every colour token the canvas's children name, resolved against the app's theme. */
+	colors: Readonly<Record<string, string | undefined>>;
+	isCalm: boolean;
+};
 
-export function FlowSvgLayerProvider({ children }: { children: ReactNode }): ReactElement {
-	return <FlowSvgLayerContext.Provider value>{children}</FlowSvgLayerContext.Provider>;
+const FlowCanvasLayerContext = createContext<FlowCanvasLayerValue | null>(null);
+
+export function FlowCanvasLayerProvider({
+	value,
+	children,
+}: {
+	value: FlowCanvasLayerValue;
+	children: ReactNode;
+}): ReactElement {
+	return <FlowCanvasLayerContext.Provider value={value}>{children}</FlowCanvasLayerContext.Provider>;
 }
-FlowSvgLayerProvider.displayName = "DelacourUI.Flow.SvgLayerProvider";
+FlowCanvasLayerProvider.displayName = "DelacourUI.Flow.CanvasLayerProvider";
 
-export function useIsInFlowSvgLayer(): boolean {
-	return useContext(FlowSvgLayerContext);
+/** The canvas layer's values, or `null` outside it — the only place an edge or a background can draw. */
+export function useFlowCanvasLayer(): FlowCanvasLayerValue | null {
+	return useContext(FlowCanvasLayerContext);
 }
 
 export type FlowGroupContextValue = { id: string; entry: FlowRegistryEntry };

package/src/components/flow/flow.tsx

@@ -10,24 +10,29 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { type LayoutChangeEvent, View } from "react-native";
+import { type LayoutChangeEvent, StyleSheet, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
-	useAnimatedProps,
 	useAnimatedStyle,
+	useDerivedValue,
 	useReducedMotion,
 	useSharedValue,
 	withTiming,
 } from "react-native-reanimated";
-import Svg from "react-native-svg";
+import { Canvas, Group } from "react-native-skia";
 import { scheduleOnRN } from "react-native-worklets";
+import "../../lib/skia-native-id";
+import { useCalmMotion } from "../../hooks/use-calm-motion";
+import { useThemeColors } from "../../hooks/use-theme-color";
 import {
+	FlowCanvasLayerProvider,
+	type FlowCanvasLayerValue,
 	type FlowContextValue,
 	type FlowConnectionPreview as FlowPreviewValue,
 	FlowProvider,
-	FlowSvgLayerProvider,
 } from "./flow.context";
 import {
+	collectFlowCanvasTokens,
 	FLOW_DEFAULTS,
 	FLOW_LAYER_EXTENT,
 	type FlowChildLayer,
@@ -58,7 +63,6 @@ import { FlowHandle } from "./flow-handle";
 import { FlowMiniMap } from "./flow-minimap";
 import { FlowNode } from "./flow-node";
 import { createFlowRegistry, type FlowSnapshotEntry } from "./flow-registry";
-import { AnimatedMatrixG, type FlowMatrixGProps } from "./flow-svg";
 
 export type FlowProps = {
 	/** Where the canvas starts, when it does not fit on mount. */
@@ -88,15 +92,27 @@ export type FlowProps = {
 
 type FlowLayers = Record<FlowChildLayer, ReactNode[]>;
 
+/** The `displayName` of an element's component, or `undefined` for a host element. */
+function displayNameOf(element: ReactElement): string | undefined {
+	return typeof element.type === "string" ? undefined : (element.type as { displayName?: string }).displayName;
+}
+
+/** The colour prop of a canvas child, read without trusting its shape. */
+function colorOf(element: ReactNode): { displayName: string | undefined; color: string | undefined } {
+	if (!isValidElement<{ color?: unknown }>(element)) return { color: undefined, displayName: undefined };
+	const { color } = element.props;
+	return { color: typeof color === "string" ? color : undefined, displayName: displayNameOf(element) };
+}
+
 /**
- * Sorts the canvas's children into the three layers they draw in: SVG beneath, nodes in the
+ * Sorts the canvas's children into the three layers they draw in: the Skia canvas beneath, nodes in the
  * transformed view, chrome on top. Fragments and arrays are walked, so a `.map()` of edges works,
  * and every child is re-keyed under its path so two `.map()`s sharing ids never collide in a layer.
  */
 function sortLayers(
 	children: ReactNode,
 	prefix = "",
-	layers: FlowLayers = { nodes: [], overlay: [], svg: [] }
+	layers: FlowLayers = { canvas: [], nodes: [], overlay: [] }
 ): FlowLayers {
 	for (const child of Children.toArray(children)) {
 		if (!isValidElement<{ children?: ReactNode }>(child)) {
@@ -108,9 +124,7 @@ function sortLayers(
 			sortLayers(child.props.children, `${key}/`, layers);
 			continue;
 		}
-		const displayName =
-			typeof child.type === "string" ? undefined : (child.type as { displayName?: string }).displayName;
-		layers[resolveFlowChildLayer(displayName)].push(cloneElement(child, { key }));
+		layers[resolveFlowChildLayer(displayNameOf(child))].push(cloneElement(child, { key }));
 	}
 	return layers;
 }
@@ -343,14 +357,18 @@ function FlowRoot({
 		transform: [{ translateX: viewport.value.x }, { translateY: viewport.value.y }, { scale: viewport.value.zoom }],
 	}));
 
-	const svgProps = useAnimatedProps<FlowMatrixGProps>(() => {
+	const canvasTransform = useDerivedValue(() => {
 		const { x, y, zoom } = viewport.value;
-		return { matrix: [zoom, 0, 0, zoom, x, y] };
+		return [{ translateX: x }, { translateY: y }, { scale: zoom }];
 	});
 
 	const slots = flowVariants();
 	const layers = sortLayers(children);
 
+	const isCalm = useCalmMotion();
+	const colors = useThemeColors(collectFlowCanvasTokens(layers.canvas.map(colorOf)));
+	const canvasLayer = useMemo<FlowCanvasLayerValue>(() => ({ colors, isCalm }), [colors, isCalm]);
+
 	return (
 		<FlowProvider value={context}>
 			<GestureDetector gesture={canvas.composed}>
@@ -361,11 +379,13 @@ function FlowRoot({
 						importantForAccessibility="no-hide-descendants"
 						pointerEvents="none"
 					>
-						<Svg height="100%" width="100%">
-							<AnimatedMatrixG animatedProps={svgProps}>
-								<FlowSvgLayerProvider>{layers.svg}</FlowSvgLayerProvider>
-							</AnimatedMatrixG>
-						</Svg>
+						<Canvas style={StyleSheet.absoluteFill}>
+							<FlowProvider value={context}>
+								<FlowCanvasLayerProvider value={canvasLayer}>
+									<Group transform={canvasTransform}>{layers.canvas}</Group>
+								</FlowCanvasLayerProvider>
+							</FlowProvider>
+						</Canvas>
 					</View>
 					<Animated.View className={slots.layer()} pointerEvents="box-none" style={[LAYER_BOX, layerStyle]}>
 						{layers.nodes}
@@ -394,7 +414,7 @@ const LAYER_BOX = {
  * `onNodeDragEnd` and `onConnect` and never changes the graph itself.
  *
  * Children draw in three layers whatever order they are written in: `Flow.Background` and every
- * `Flow.Edge` in an SVG beneath the nodes; `Flow.Node` and `Flow.Group` in the transformed layer;
+ * `Flow.Edge` on a Skia canvas beneath the nodes; `Flow.Node` and `Flow.Group` in the transformed layer;
  * `Flow.Controls` and `Flow.MiniMap` on top, unscaled. Edges and backgrounds must be direct
  * children (or a `.map()` / fragment there) so the canvas can find them.
  *

package/src/components/flow/flow.variants.test.ts

@@ -1,5 +1,6 @@
 import { describe, expect, test } from "bun:test";
 import {
+	collectFlowCanvasTokens,
 	FLOW_ACCESSIBILITY_MOVES,
 	FLOW_BACKGROUND_VARIANTS,
 	FLOW_CONTROL_LABELS,
@@ -12,6 +13,7 @@ import {
 	resolveBackgroundPattern,
 	resolveDraggedConnection,
 	resolveEdgeDash,
+	resolveFlowCanvasToken,
 	resolveFlowChildLayer,
 	resolveHandleStyle,
 	resolveNodeAccessibilityActions,
@@ -113,25 +115,33 @@ describe("resolveBackgroundPattern", () => {
 		}
 	});
 
-	test("dots sit in the middle of each tile, sized by `size`", () => {
-		expect(resolveBackgroundPattern("dots", 24, 1.6)).toEqual({ cx: 12, cy: 12, kind: "dots", r: 1.6, tile: 24 });
+	test("dots sit in the middle of each tile, `size` is their radius", () => {
+		expect(resolveBackgroundPattern("dots", 24, 1.6)).toEqual({
+			arm: 0,
+			kind: "dots",
+			shape: 0,
+			tile: 24,
+			weight: 1.6,
+		});
 	});
 
-	test("lines trace two edges of each tile, so the tiles join into a grid", () => {
+	test("lines run along the tile edges, half a stroke of `size / 2` either side", () => {
 		expect(resolveBackgroundPattern("lines", 20, 2)).toEqual({
-			d: "M0 0 H20 M0 0 V20",
+			arm: 0,
 			kind: "lines",
-			strokeWidth: 1,
+			shape: 1,
 			tile: 20,
+			weight: 0.5,
 		});
 	});
 
-	test("a cross is centred in its tile", () => {
+	test("a cross is centred in its tile, each arm a quarter of the tile", () => {
 		expect(resolveBackgroundPattern("cross", 24, 2)).toEqual({
-			d: "M6 12 H18 M12 6 V18",
+			arm: 6,
 			kind: "cross",
-			strokeWidth: 1,
+			shape: 2,
 			tile: 24,
+			weight: 0.5,
 		});
 	});
 
@@ -140,6 +150,40 @@ describe("resolveBackgroundPattern", () => {
 	});
 });
 
+describe("resolveFlowCanvasToken", () => {
+	test("an edge defaults to muted-foreground, the background to border", () => {
+		expect(resolveFlowCanvasToken("DelacourUI.Flow.Edge", undefined)).toBe("muted-foreground");
+		expect(resolveFlowCanvasToken("DelacourUI.Flow.Background", undefined)).toBe("border");
+	});
+
+	test("an explicit colour wins", () => {
+		expect(resolveFlowCanvasToken("DelacourUI.Flow.Edge", "#ff0000")).toBe("#ff0000");
+	});
+
+	test("anything else names no colour", () => {
+		expect(resolveFlowCanvasToken("DelacourUI.Flow.Node", "primary")).toBeUndefined();
+		expect(resolveFlowCanvasToken(undefined, undefined)).toBeUndefined();
+	});
+});
+
+describe("collectFlowCanvasTokens", () => {
+	test("deduplicated and sorted, so the lookup array is stable across renders", () => {
+		expect(
+			collectFlowCanvasTokens([
+				{ color: undefined, displayName: "DelacourUI.Flow.Edge" },
+				{ color: "primary", displayName: "DelacourUI.Flow.Edge" },
+				{ color: undefined, displayName: "DelacourUI.Flow.Edge" },
+				{ color: undefined, displayName: "DelacourUI.Flow.Background" },
+				{ color: "primary", displayName: "DelacourUI.Flow.Node" },
+			])
+		).toEqual(["border", "muted-foreground", "primary"]);
+	});
+
+	test("empty for no canvas children", () => {
+		expect(collectFlowCanvasTokens([])).toEqual([]);
+	});
+});
+
 describe("resolveArrowSize", () => {
 	test("scales with the stroke, with a floor", () => {
 		expect(resolveArrowSize(2, true)).toBe(8);
@@ -354,9 +398,9 @@ describe("sides", () => {
 });
 
 describe("resolveFlowChildLayer", () => {
-	test("edges and the background draw in the SVG layer", () => {
-		expect(resolveFlowChildLayer("DelacourUI.Flow.Edge")).toBe("svg");
-		expect(resolveFlowChildLayer("DelacourUI.Flow.Background")).toBe("svg");
+	test("edges and the background draw in the Skia canvas", () => {
+		expect(resolveFlowChildLayer("DelacourUI.Flow.Edge")).toBe("canvas");
+		expect(resolveFlowChildLayer("DelacourUI.Flow.Background")).toBe("canvas");
 	});
 
 	test("controls and the minimap float on top", () => {

package/src/components/flow/flow.variants.ts

@@ -114,16 +114,20 @@ export function resolveHandleStyle(side: FlowSide, offset: number): FlowHandleSt
 	return { ...margins, left: 0, top: along };
 }
 
-/** One tile of the background, in graph units. */
+/**
+ * One tile of the background, in graph units, as the shader draws it. `shape` is the shader's
+ * branch (0 dots, 1 lines, 2 cross); `weight` is a dot's radius or half a stroke; `arm` is half a
+ * cross's span.
+ */
 export type FlowBackgroundPattern =
 	| { kind: "none" }
-	| { kind: "dots"; tile: number; cx: number; cy: number; r: number }
-	| { kind: "lines"; tile: number; d: string; strokeWidth: number }
-	| { kind: "cross"; tile: number; d: string; strokeWidth: number };
+	| { kind: "dots"; shape: 0; tile: number; weight: number; arm: 0 }
+	| { kind: "lines"; shape: 1; tile: number; weight: number; arm: 0 }
+	| { kind: "cross"; shape: 2; tile: number; weight: number; arm: number };
 
 /**
  * The tile the background repeats. `size` is the mark's weight: a dot's radius, and twice a line's
- * or a cross's stroke. Lines trace two edges of each tile so neighbours join into a grid.
+ * or a cross's stroke. Lines run along the tile's edges so neighbours join into a grid.
  */
 export function resolveBackgroundPattern(
 	variant: FlowBackgroundVariant,
@@ -131,16 +135,9 @@ export function resolveBackgroundPattern(
 	size: number
 ): FlowBackgroundPattern {
 	if (variant === "none" || gap < 1) return { kind: "none" };
-	const centre = gap / 2;
-	if (variant === "dots") return { cx: centre, cy: centre, kind: "dots", r: size, tile: gap };
-	if (variant === "lines") return { d: `M0 0 H${gap} M0 0 V${gap}`, kind: "lines", strokeWidth: size / 2, tile: gap };
-	const arm = gap / 4;
-	return {
-		d: `M${centre - arm} ${centre} H${centre + arm} M${centre} ${centre - arm} V${centre + arm}`,
-		kind: "cross",
-		strokeWidth: size / 2,
-		tile: gap,
-	};
+	if (variant === "dots") return { arm: 0, kind: "dots", shape: 0, tile: gap, weight: size };
+	if (variant === "lines") return { arm: 0, kind: "lines", shape: 1, tile: gap, weight: size / 4 };
+	return { arm: gap / 4, kind: "cross", shape: 2, tile: gap, weight: size / 4 };
 }
 
 /** An arrowhead is four strokes long, and never smaller than six points. */
@@ -296,9 +293,14 @@ export function resolveNodeAccessibilityActions({
 	return { actions, connections };
 }
 
-export type FlowChildLayer = "svg" | "nodes" | "overlay";
+export type FlowChildLayer = "canvas" | "nodes" | "overlay";
 
-const FLOW_SVG_CHILDREN: readonly string[] = ["DelacourUI.Flow.Edge", "DelacourUI.Flow.Background"];
+/** The colour each canvas child draws in when it names none. */
+const FLOW_CANVAS_DEFAULT_TOKENS: Readonly<Record<string, string>> = {
+	"DelacourUI.Flow.Background": "border",
+	"DelacourUI.Flow.Edge": "muted-foreground",
+};
+const FLOW_CANVAS_CHILDREN: readonly string[] = Object.keys(FLOW_CANVAS_DEFAULT_TOKENS);
 const FLOW_OVERLAY_CHILDREN: readonly string[] = ["DelacourUI.Flow.Controls", "DelacourUI.Flow.MiniMap"];
 
 /**
@@ -311,7 +313,33 @@ const FLOW_OVERLAY_CHILDREN: readonly string[] = ["DelacourUI.Flow.Controls", "D
  */
 export function resolveFlowChildLayer(displayName: string | undefined): FlowChildLayer {
 	if (displayName === undefined) return "nodes";
-	if (FLOW_SVG_CHILDREN.includes(displayName)) return "svg";
+	if (FLOW_CANVAS_CHILDREN.includes(displayName)) return "canvas";
 	if (FLOW_OVERLAY_CHILDREN.includes(displayName)) return "overlay";
 	return "nodes";
 }
+
+/** The colour token a canvas child draws in — its own `color`, or its default. `undefined` off the canvas. */
+export function resolveFlowCanvasToken(displayName: string | undefined, color: string | undefined): string | undefined {
+	if (displayName === undefined) return undefined;
+	const fallback = FLOW_CANVAS_DEFAULT_TOKENS[displayName];
+	if (fallback === undefined) return undefined;
+	return color ?? fallback;
+}
+
+/**
+ * Every colour the canvas's children draw in, deduplicated and sorted.
+ *
+ * The Skia canvas is a second React reconciler, so a theme hook called inside it reads no
+ * `ScopedTheme`. The root resolves this list above the canvas in one lookup and hands the result
+ * in; sorted, the list is equal across renders and the lookup does not re-subscribe.
+ */
+export function collectFlowCanvasTokens(
+	children: readonly { displayName: string | undefined; color: string | undefined }[]
+): string[] {
+	const tokens = new Set<string>();
+	for (const child of children) {
+		const token = resolveFlowCanvasToken(child.displayName, child.color);
+		if (token !== undefined) tokens.add(token);
+	}
+	return [...tokens].sort();
+}

package/src/components/sketch/AGENTS.md

@@ -2,7 +2,7 @@
 
 A freehand drawing surface with its tools around it: a pen, eight shapes, an
 eraser, colour swatches, a stroke width and undo — delivered as SVG or PNG.
-Drawn with Skia (`@shopify/react-native-skia`, an optional peer), driven by one
+Drawn with Skia (`react-native-skia`, an optional peer), driven by one
 Gesture Handler pan on the UI thread.
 
 `import { Sketch } from "@delacour/react-native-ui/sketch";`
@@ -136,7 +136,11 @@ DisplayNames: `DelacourUI.Sketch`, `.Sketch.Canvas`, `.Toolbar`, `.Tool`,
 - **`toSVG()` is vector and `toPNG()` is raster; both hold the marks and the
   background only.** Neither includes what `Sketch.Canvas` children paint under
   the marks.
-- **`toPNG()` renders off screen**, on a CPU surface (`Skia.Surface.Make`) sized
+- **The canvas imports `lib/skia-native-id` for its effect.** After a JS reload Skia reused the
+  old runtime's canvas ids, which its native registry still held as torn down, so a sketch came up
+  blank until something re-rendered it. The import moves this runtime's ids to a fresh range
+  before the canvas asks for one.
+- **`toPNG()` renders off screen**, on a CPU surface (`Skia.Surface.MakeRaster`) sized
   to the canvas times `scale` (default the screen's pixel ratio), by the same
   `drawSketchItems` the picture records — not a snapshot of the visible canvas,
   which would need the view mounted and would capture nothing of the background

package/src/components/sketch/sketch-canvas.tsx

@@ -1,9 +1,10 @@
-import { Canvas, Group, Path, Picture, Skia } from "@shopify/react-native-skia";
 import { type ReactElement, type ReactNode, useCallback, useEffect, useMemo } from "react";
 import { type AccessibilityActionEvent, type LayoutChangeEvent, StyleSheet, View, type ViewProps } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import { useDerivedValue, useSharedValue } from "react-native-reanimated";
+import { Canvas, Group, Path, Picture, Skia } from "react-native-skia";
 import { scheduleOnRN, scheduleOnUI } from "react-native-worklets";
+import "../../lib/skia-native-id";
 import { useSketchPart } from "./sketch.context";
 import {
 	appendSketchSegment,

package/src/components/sketch/sketch.paths.test.ts

@@ -352,7 +352,7 @@ describe("the drawing surface is Skia", () => {
 	test("the canvas and the renderer import Skia and not react-native-svg", () => {
 		for (const file of ["sketch-canvas.tsx", "sketch.skia.ts"]) {
 			const source = readFileSync(join(import.meta.dirname, file), "utf-8");
-			expect(source).toContain('from "@shopify/react-native-skia"');
+			expect(source).toContain('from "react-native-skia"');
 			expect(source).not.toContain("react-native-svg");
 		}
 	});

package/src/components/sketch/sketch.skia.ts

@@ -7,7 +7,7 @@ import {
 	type SkPicture,
 	StrokeCap,
 	StrokeJoin,
-} from "@shopify/react-native-skia";
+} from "react-native-skia";
 import type { SketchItem } from "./sketch.paths";
 
 /** What `drawSketchItems` paints into: the canvas size in points. */
@@ -77,7 +77,7 @@ export function renderSketchPng(items: readonly SketchItem[], target: SketchPngT
 	const pixelHeight = Math.round(target.height * target.scale);
 	if (pixelWidth <= 0 || pixelHeight <= 0) return "";
 
-	const surface = Skia.Surface.Make(pixelWidth, pixelHeight);
+	const surface = Skia.Surface.MakeRaster(pixelWidth, pixelHeight);
 	if (surface === null) return "";
 	const canvas = surface.getCanvas();
 	canvas.scale(target.scale, target.scale);

package/src/hooks/use-theme-color.ts

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import { useCSSVariable } from "uniwind";
 import { isLiteralColor, themeVariableName } from "../lib/color";
 
@@ -42,3 +43,27 @@ export function useThemeColor(token: string): string | undefined {
 
 	return isLiteral ? token : resolved;
 }
+
+/**
+ * {@link useThemeColor} for several tokens in one lookup, keyed by token.
+ *
+ * For a renderer that cannot call a hook where it draws — a Skia canvas is a second React
+ * reconciler, so a theme hook inside it reads no `ScopedTheme`. Resolve above the canvas, pass the
+ * record in. Hand it a list that is equal across renders (sorted, deduplicated) and the lookup
+ * does not re-subscribe.
+ */
+export function useThemeColors(tokens: readonly string[]): Readonly<Record<string, string | undefined>> {
+	const names = tokens.map((token) => (isLiteralColor(token) ? PROBE_VARIABLE : themeVariableName(token)));
+	const resolved = useCSSVariable(names.length > 0 ? names : [PROBE_VARIABLE]);
+	const key = tokens.join("\n");
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: `key` stands for `tokens`, which a caller may rebuild every render.
+	return useMemo(() => {
+		const colors: Record<string, string | undefined> = {};
+		tokens.forEach((token, index) => {
+			const value = resolved[index];
+			colors[token] = isLiteralColor(token) ? token : typeof value === "string" ? value : undefined;
+		});
+		return colors;
+	}, [key, resolved]);
+}

package/src/lib/skia-native-id.test.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "bun:test";
+import { resolveSkiaNativeId, SKIA_NATIVE_ID_FLOOR } from "./skia-native-id";
+
+describe("resolveSkiaNativeId", () => {
+	test("moves a fresh runtime's counter off Skia's starting id", () => {
+		expect(resolveSkiaNativeId(1000, 0)).toBe(SKIA_NATIVE_ID_FLOOR);
+		expect(resolveSkiaNativeId(1000, 0.5)).toBeGreaterThan(SKIA_NATIVE_ID_FLOOR);
+	});
+
+	test("keeps the ids a runtime already handed out behind the new counter", () => {
+		expect(resolveSkiaNativeId(1003, 0)).toBe(SKIA_NATIVE_ID_FLOOR + 3);
+	});
+
+	test("leaves a counter that is already seeded alone, so two copies seed once", () => {
+		const seeded = resolveSkiaNativeId(1000, 0.25);
+		expect(resolveSkiaNativeId(seeded, 0.75)).toBe(seeded);
+		expect(resolveSkiaNativeId(seeded + 12, 0.75)).toBe(seeded + 12);
+	});
+
+	test("spreads runtimes far enough apart that one's ids never reach the next's", () => {
+		const a = resolveSkiaNativeId(1000, 0.1);
+		const b = resolveSkiaNativeId(1000, 0.1 + 1 / 100_000);
+		expect(b - a).toBeGreaterThanOrEqual(10_000);
+	});
+
+	test("stays inside a signed 32-bit int, which Skia's native side casts ids to", () => {
+		expect(resolveSkiaNativeId(1000, 0.999_999_999)).toBeLessThan(2 ** 31 - 1_000_000);
+	});
+});

package/src/lib/skia-native-id.ts

@@ -0,0 +1,42 @@
+import { SkiaViewNativeId } from "react-native-skia/src/views/SkiaViewNativeId";
+
+/** Skia's counter starts at 1000; anything at or above this has been seeded. */
+export const SKIA_NATIVE_ID_FLOOR = 10_000;
+
+/** Ids a runtime may hand out before it reaches the next runtime's range. */
+const SKIA_NATIVE_ID_SPAN = 10_000;
+
+/** How many ranges a runtime can land in — 1e9 at the top, inside a signed 32-bit int. */
+const SKIA_NATIVE_ID_SLOTS = 100_000;
+
+/**
+ * Where a JS runtime's Skia canvas ids should start, given the counter as it stands and a number
+ * in `[0, 1)`. A counter already at or above the floor is returned as it is, so every copy of this
+ * module in an app can run it and only the first moves anything.
+ */
+export function resolveSkiaNativeId(current: number, random: number): number {
+	if (current >= SKIA_NATIVE_ID_FLOOR) return current;
+	const slot = Math.floor(random * SKIA_NATIVE_ID_SLOTS);
+	return SKIA_NATIVE_ID_FLOOR + slot * SKIA_NATIVE_ID_SPAN + (current - 1000);
+}
+
+/**
+ * Starts this runtime's canvas ids somewhere the last runtime's never were.
+ *
+ * **A canvas mounted after a JS reload drew nothing until it re-rendered.** Skia numbers canvases
+ * from a module-level counter that restarts at 1000 in every runtime, while its native
+ * `ViewRegistry` is a process-wide singleton that outlives the reload. The old runtime's views are
+ * torn down after the new one has started, and each leaves a tombstone for its id; the new
+ * runtime's first canvases reuse those ids, their pictures are handed to a throwaway entry, and the
+ * view registers to an empty one. Nothing draws until the next React commit sends the picture again.
+ * A dev-menu reload hits it, and so does `Updates.reloadAsync` after an OTA update.
+ * Reported upstream as wcandillon/react-native-skia#4312; drop this once a release fixes it.
+ *
+ * Evaluated once per runtime, on import, before any canvas has asked for an id. `SkiaViewNativeId`
+ * is not exported from the package root, so this reaches it by path — the same file Metro resolves
+ * `Canvas` from through the package's `react-native` field.
+ *
+ * `@delacour/react-native-charts` keeps an identical copy in `src/skia/native-id.ts` for its own
+ * canvases, since `Chart` draws through it; change both together.
+ */
+SkiaViewNativeId.current = resolveSkiaNativeId(SkiaViewNativeId.current, Math.random());

package/src/components/flow/flow-svg.ts

@@ -1,15 +0,0 @@
-import type { ComponentClass } from "react";
-import Animated from "react-native-reanimated";
-import { G, type GProps } from "react-native-svg";
-
-/**
- * A `G`'s props plus the native `matrix` it is drawn with.
- *
- * `react-native-svg` folds `transform` into `matrix` on the JS side and sends only `matrix` to the
- * native view, so an animated prop has to write `matrix` itself — a `transform` written from a
- * worklet never passes through that fold. The public `GProps` does not declare it, hence the type.
- */
-export type FlowMatrixGProps = GProps & { matrix?: number[] };
-
-/** An animated `G` whose `matrix` a worklet can drive — the canvas's pan and zoom, in one prop. */
-export const AnimatedMatrixG = Animated.createAnimatedComponent(G as ComponentClass<FlowMatrixGProps>);