@octane-xplat/ui 0.5.0 → 0.7.0

package/dist/web/refresh.web.js

@@ -0,0 +1,133 @@
+import { setTranslate } from "./translate.web.js";
+import { dampenPull } from "./refresh-metrics.js";
+//#region src/refresh.web.ts
+var DOCK_ANIM_MS = 180;
+/** Pointer/touch-driven pull-to-refresh for the DOM leaf — the web has no
+*  native overscroll, so drag distance translates the scroller inside the
+*  clipped wrapper while the self-drawn indicator slides into the gap.
+*  `touchmove` must be non-passive: `preventDefault` is what keeps the
+*  browser from taking the gesture as a scroll (or Chrome's own
+*  pull-to-refresh on Android). Mouse drags ride the pointer events. */
+function createPullToRefresh(host) {
+	const { scroller, indicator, cfg } = host;
+	if (!scroller || !indicator) return {
+		sync: () => {},
+		detach: () => {}
+	};
+	let pulling = false;
+	let y0 = 0;
+	let pull = 0;
+	let docked = false;
+	let grace = null;
+	const threshold = () => cfg.current.threshold ?? 64;
+	/** Resting gap: the strip stays docked while the gesture docked it OR
+	*  the controlled `refreshing` prop holds it open. */
+	const held = () => docked || !!cfg.current.refreshing;
+	const applyReveal = (reveal) => {
+		setTranslate(indicator, 0, reveal - 64);
+		setTranslate(scroller, 0, reveal);
+	};
+	const settle = (reveal) => {
+		for (const el of [scroller, indicator]) el.style.transition = `transform ${DOCK_ANIM_MS}ms ease-out`;
+		applyReveal(reveal);
+		setTimeout(() => {
+			for (const el of [scroller, indicator]) el.style.transition = "";
+		}, DOCK_ANIM_MS);
+	};
+	const dock = () => {
+		docked = true;
+		pull = 0;
+		settle(64);
+	};
+	const collapse = () => {
+		docked = false;
+		pull = 0;
+		settle(0);
+	};
+	/** `pull` is drag distance beyond the held baseline — a release only
+	*  fires `onRefresh` when the user actually pulled (a resting release
+	*  inside the dock re-fires nothing). */
+	const release = () => {
+		pulling = false;
+		const reveal = pull + (held() ? 64 : 0);
+		if (pull > 0 && reveal >= threshold()) {
+			cfg.current.onRefresh?.();
+			dock();
+			if (grace) clearTimeout(grace);
+			grace = setTimeout(() => {
+				if (!cfg.current.refreshing) collapse();
+			}, 350);
+		} else if (held()) {
+			docked = true;
+			pull = 0;
+			settle(64);
+		} else collapse();
+	};
+	const begin = (y, prevent) => {
+		if (scroller.scrollTop > 0) return;
+		pulling = true;
+		y0 = y;
+		pull = 0;
+		prevent?.();
+	};
+	const move = (y, prevent) => {
+		if (!pulling) return;
+		const dy = y - y0;
+		if (dy <= 0 || scroller.scrollTop > 0) {
+			pulling = false;
+			pull = 0;
+			applyReveal(held() ? 64 : 0);
+			return;
+		}
+		prevent();
+		pull = dampenPull(dy);
+		applyReveal(pull + (held() ? 64 : 0));
+	};
+	const end = () => {
+		if (pulling) release();
+	};
+	const touchStart = (e) => begin(e.touches[0].clientY);
+	const touchMove = (e) => move(e.touches[0].clientY, () => e.preventDefault());
+	const touchEnd = () => end();
+	const pointerDown = (e) => {
+		if (e.pointerType === "mouse" && e.button === 0) begin(e.clientY, () => e.preventDefault());
+	};
+	const pointerMove = (e) => {
+		if (e.pointerType === "mouse") move(e.clientY, () => e.preventDefault());
+	};
+	const pointerUp = (e) => {
+		if (e.pointerType === "mouse") end();
+	};
+	scroller.addEventListener("touchstart", touchStart, { passive: true });
+	scroller.addEventListener("touchmove", touchMove, { passive: false });
+	scroller.addEventListener("touchend", touchEnd);
+	scroller.addEventListener("touchcancel", touchEnd);
+	scroller.addEventListener("pointerdown", pointerDown);
+	scroller.addEventListener("pointermove", pointerMove);
+	scroller.addEventListener("pointerup", pointerUp);
+	scroller.addEventListener("pointercancel", pointerUp);
+	return {
+		sync: () => {
+			if (cfg.current.refreshing) {
+				if (grace) clearTimeout(grace);
+				if (!docked && !pulling) dock();
+			} else if (docked && !pulling) collapse();
+		},
+		detach: () => {
+			if (grace) clearTimeout(grace);
+			scroller.removeEventListener("touchstart", touchStart);
+			scroller.removeEventListener("touchmove", touchMove);
+			scroller.removeEventListener("touchend", touchEnd);
+			scroller.removeEventListener("touchcancel", touchEnd);
+			scroller.removeEventListener("pointerdown", pointerDown);
+			scroller.removeEventListener("pointermove", pointerMove);
+			scroller.removeEventListener("pointerup", pointerUp);
+			scroller.removeEventListener("pointercancel", pointerUp);
+			scroller.style.transition = "";
+			indicator.style.transition = "";
+			applyReveal(0);
+		}
+	};
+}
+//#endregion
+export { createPullToRefresh };

package/dist/web/{ui17.js → route-table.js}

@@ -1,13 +1,12 @@
 //#region src/route-table.ts
 var EXT = /\.(tsrx|tsx|ts|mts|cts|js|mjs|cjs|jsx)$/;
-var SUFFIX = /\.(web|native|ios|android)$/;
+var SUFFIX = /\.(web|mobile|ios|android|macos|windows|linux)$/;
 var PARAM = /^\[(.+)\]$/;
 var PRESENT = /\+(modal|fade|push)$/;
 /** Internal error carrier used by the public `redirect()` helper. Keeping
 * this in the shared route table gives both platform leaves the same guard
 * behavior without importing a platform runtime. */
 var RouteRedirect = class extends Error {
-	route;
 	constructor(route) {
 		super("route redirect");
 		this.route = route;
@@ -102,7 +101,109 @@ function deriveRouteManifest(files, prefer, dir = "app") {
 		routes.push(meta);
 		if (meta.loader) loaders[meta.name] = meta.loader;
 	}
-	routes.sort((a, b) => b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name));
+	routes.sort(bySpecificity);
+	return {
+		screens,
+		routes,
+		layouts,
+		loaders
+	};
+}
+/** Match-order comparator: static segments (2) outrank params (1), ties
+*  break alphabetically so ordering is total and stable across merges. */
+function bySpecificity(a, b) {
+	return b.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) - a.segments.reduce((n, s) => n + (s.startsWith(":") ? 1 : 2), 0) || a.name.localeCompare(b.name);
+}
+/** Normalize a programmatic `path` into manifest segments using the
+*  route-dir vocabulary: `'docs/[slug]'` and `'docs/:slug'` are the same
+*  pattern, a trailing `index` drops, `''`/`'index'` name the root route. */
+function specSegments(path) {
+	const segs = path.split("/").filter(Boolean).map((s) => {
+		const p = PARAM.exec(s);
+		return p ? ":" + p[1] : s;
+	});
+	if (segs[segs.length - 1] === "index") segs.pop();
+	return segs;
+}
+var mergeWarned = /* @__PURE__ */ new Set();
+/** Build a manifest from app data rather than the route dir — the
+*  programmatic half of the route contract (host frameworks derive specs
+*  from their own sources, e.g. `readdirSync` over a content dir). Each
+*  spec's `path` uses the route-dir vocabulary; `layouts` keys are path
+*  prefixes playing the `_layout` role. Same-name duplicates inside the
+*  set keep the later entry with a warn, matching merge precedence. */
+function defineRoutes(input) {
+	const set = Array.isArray(input) ? { routes: input } : input;
+	const specs = set.routes;
+	const extra = set.layouts;
+	const screens = {};
+	const layouts = {};
+	const metas = /* @__PURE__ */ new Map();
+	const warned = /* @__PURE__ */ new Set();
+	for (const [key, layout] of Object.entries(extra ?? {})) {
+		const dir = key.replace(/^\/+|\/+$/g, "");
+		if (dir !== key) console.warn(`[octane-xplat] layout key '${key}' normalized to '${dir}'`);
+		layouts[dir] = layout;
+	}
+	for (const spec of specs) {
+		const segments = specSegments(spec.path);
+		const name = segments.join("/") || "index";
+		const meta = {
+			name,
+			segments,
+			params: segments.filter((s) => s.startsWith(":")).map((s) => s.slice(1)),
+			file: spec.source ?? `programmatic:${spec.path}`,
+			presentation: spec.presentation
+		};
+		if (spec.loader) meta.loader = spec.loader;
+		if (spec.beforeLoad) meta.beforeLoad = spec.beforeLoad;
+		if (spec.head) meta.head = spec.head;
+		if (metas.has(name) && !warned.has(name)) {
+			warned.add(name);
+			console.warn(`[octane-xplat] route '${name}' is defined twice — keeping the later spec (${meta.file})`);
+		}
+		if (typeof spec.screen !== "function") {
+			console.warn(`[octane-xplat] route '${name}' has no component — 'screen' must be a component function, not a module`);
+			continue;
+		}
+		metas.set(name, meta);
+		screens[name] = spec.screen;
+	}
+	const routes = [...metas.values()].sort(bySpecificity);
+	const loaders = {};
+	for (const meta of routes) if (meta.loader) loaders[meta.name] = meta.loader;
+	return {
+		screens,
+		routes,
+		layouts,
+		loaders
+	};
+}
+/** Compose manifests into one — file-derived base plus any number of
+*  programmatic sets (`registerRoutes(mergeRouteManifests(fromDir, dynamic))`).
+*  Registration order is precedence: on a same-name collision the later
+*  manifest's route wins and the loser's loader/beforeLoad/head go with it —
+*  a warn fires once per colliding name. `layouts` merge key-wise the same
+*  way. `matchRoute` order is rebuilt by specificity after the merge. */
+function mergeRouteManifests(...manifests) {
+	const screens = {};
+	const layouts = {};
+	const winners = /* @__PURE__ */ new Map();
+	for (const m of manifests) {
+		Object.assign(layouts, m.layouts);
+		Object.assign(screens, m.screens);
+		for (const meta of m.routes) {
+			const prev = winners.get(meta.name);
+			if (prev && !mergeWarned.has(meta.name)) {
+				mergeWarned.add(meta.name);
+				console.warn(`[octane-xplat] route '${meta.name}' is defined by both ${prev.file} and ${meta.file} — keeping ${meta.file}`);
+			}
+			winners.set(meta.name, meta);
+		}
+	}
+	const routes = [...winners.values()].sort(bySpecificity);
+	const loaders = {};
+	for (const meta of routes) if (meta.loader) loaders[meta.name] = meta.loader;
 	return {
 		screens,
 		routes,
@@ -246,4 +347,4 @@ function layoutChain(layouts, name) {
 	return chain;
 }
 //#endregion
-export { RouteRedirect, buildRoutePath, deriveRouteManifest, layoutChain, linkPath, matchRoute, matchUrl, parseQueryString };
+export { RouteRedirect, buildRoutePath, defineRoutes, deriveRouteManifest, layoutChain, linkPath, matchRoute, matchUrl, mergeRouteManifests, parseQueryString };

package/dist/web/{ui18.js → route.web.js}

@@ -1,29 +1,54 @@
-import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl } from "./ui17.js";
+import { RouteRedirect, buildRoutePath, layoutChain, linkPath, matchUrl, mergeRouteManifests } from "./route-table.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/route.web.ts
+var baseManifest = {
+	screens: {},
+	routes: [],
+	layouts: {}
+};
+var dynamicManifests = [];
 var screens = {};
 var routes = [];
 var routeLayouts = {};
 var routeLoaders = {};
+function rebuildRegistry() {
+	const merged = mergeRouteManifests(baseManifest, ...dynamicManifests);
+	screens = merged.screens;
+	routes = merged.routes;
+	routeLayouts = merged.layouts;
+	routeLoaders = merged.loaders ?? {};
+	if (current !== void 0) {
+		current = parse();
+		emit();
+	}
+}
 /** Register the app's name → screen table. On web the table feeds
 *  `screenFor` — the fallback outlet resolution in Tabs when no
 *  `resolveScreen` prop is given; on native `pushRoute` resolves
 *  `route.name` through it. `manifest` (from deriveRouteManifest) enables
 *  path-param matching — call once from the shared routes module. */
 function registerScreens(table, manifest) {
-	screens = table;
-	routes = manifest ?? [];
-	if (current !== void 0) {
-		current = parse();
-		emit();
-	}
+	baseManifest = {
+		...baseManifest,
+		screens: table,
+		routes: manifest ?? []
+	};
+	rebuildRegistry();
 }
 /** One-call registration for route-dir apps — screens + URL patterns +
 *  layouts all come from deriveRouteManifest. */
 function registerRoutes(manifest) {
-	registerScreens(manifest.screens, manifest.routes);
-	routeLayouts = manifest.layouts;
-	routeLoaders = manifest.loaders ?? {};
+	baseManifest = manifest;
+	rebuildRegistry();
+	applyHead(read());
+}
+/** Layer a programmatic manifest (from `defineRoutes`) over the registered
+*  routes — same-name entries win over the base with a warn, so a host
+*  framework can override a file route deliberately. Registered layers
+*  survive later registerRoutes re-registration (e.g. routes.gen HMR). */
+function addRoutes(manifest) {
+	dynamicManifests.push(manifest);
+	rebuildRegistry();
 	applyHead(read());
 }
 function screenFor(name) {
@@ -162,6 +187,18 @@ function presentationFor(name) {
 function popRoute(_stack = "root") {
 	history.back();
 }
+var backInterceptorWarned = false;
+/** No-op twin of the native leaf. Browser back is already real history —
+*  there is no hardware-back event to intercept on web, so registered
+*  interceptors never fire. Warns once so a mistaken call site isn't
+*  silently absent. */
+function addBackInterceptor(_fn) {
+	if (!backInterceptorWarned) {
+		backInterceptorWarned = true;
+		console.warn("[octane-xplat] addBackInterceptor is a no-op on web — browser back is URL history, not an interceptable event.");
+	}
+	return () => {};
+}
 window.addEventListener("popstate", () => {
 	saveScroll();
 	historyDepth = history.state?.__octaneXplatDepth ?? 0;
@@ -237,4 +274,4 @@ var _h$0 = /* @__PURE__ */ Symbol(_hs$);
 var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
 var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
 //#endregion
-export { canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };
+export { addBackInterceptor, addRoutes, canGoBack, currentModalRoute, currentRoute, hrefFor, layoutsFor, layoutsFor as layoutsForRoute, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute };

package/dist/web/sheet-detents.web.js

@@ -0,0 +1,103 @@
+import { setTranslate } from "./translate.web.js";
+import { detentOffset, normalizeDetents, snapDetentIndex } from "./sheet-snap.js";
+//#region src/sheet-detents.web.ts
+var SNAP_MS = 200;
+/** Drag-to-snap detents on a `.vx-sheet` panel: a self-drawn grabber strip
+*  (the only drag target — it never fights inner scrolling) drives the
+*  panel's translateY; the panel is sized to the largest detent and parked
+*  at the offset for the current one. `closeNow` fires after the dismiss
+*  slide-out — the caller decides what closing means (declarative
+*  `onDismiss` or the `openSheet` resolution). In-window on every target —
+*  the OS detent presentations (UISheetPresentationController /
+*  BottomSheetDialog) host a modal VC/dialog window, not a RootLayout
+*  child, so the snap mechanics stay self-drawn for pixel parity. */
+function attachSheetDetents(panel, detents, closeNow) {
+	const sorted = normalizeDetents(detents);
+	if (!sorted.length) return { detach: () => {} };
+	const vh = () => panel.parentElement?.clientHeight || window.innerHeight || 1;
+	const max = sorted[sorted.length - 1];
+	panel.classList.add("vx-sheet-detents");
+	panel.style.height = `${max * 100}%`;
+	const grabber = document.createElement("div");
+	grabber.className = "vx-sheet-grabber";
+	const grip = document.createElement("div");
+	grip.className = "vx-sheet-grip";
+	grabber.appendChild(grip);
+	panel.appendChild(grabber);
+	let cur = 0;
+	let ty = 0;
+	let dragging = false;
+	let y0 = 0;
+	let ty0 = 0;
+	let vy = 0;
+	let lastY = 0;
+	let lastT = 0;
+	const applyTy = (value) => {
+		ty = value;
+		setTranslate(panel, 0, value);
+	};
+	const animateTo = (value, then) => {
+		panel.style.transition = `transform ${SNAP_MS}ms ease-out`;
+		applyTy(value);
+		setTimeout(() => {
+			panel.style.transition = "";
+			then?.();
+		}, SNAP_MS);
+	};
+	const down = (e) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		dragging = true;
+		grabber.setPointerCapture?.(e.pointerId);
+		y0 = e.clientY;
+		lastY = e.clientY;
+		lastT = Date.now();
+		ty0 = ty;
+		vy = 0;
+		panel.style.transition = "";
+		e.preventDefault();
+	};
+	const move = (e) => {
+		if (!dragging) return;
+		const now = Date.now();
+		const dt = (now - lastT) / 1e3;
+		if (dt > 0) vy = vy * .7 + (e.clientY - lastY) / dt * .3;
+		lastY = e.clientY;
+		lastT = now;
+		applyTy(Math.min(Math.max(ty0 + (e.clientY - y0), 0), vh()));
+		e.preventDefault();
+	};
+	const up = () => {
+		if (!dragging) return;
+		dragging = false;
+		const next = snapDetentIndex(ty, vy, sorted, vh());
+		if (next < 0) animateTo(vh(), closeNow);
+		else {
+			cur = next;
+			animateTo(detentOffset(sorted, cur, vh()));
+		}
+	};
+	const pinGrabber = () => {
+		grabber.style.top = `${panel.scrollTop}px`;
+	};
+	panel.addEventListener("scroll", pinGrabber);
+	grabber.addEventListener("pointerdown", down);
+	grabber.addEventListener("pointermove", move);
+	grabber.addEventListener("pointerup", up);
+	grabber.addEventListener("pointercancel", up);
+	applyTy(vh());
+	const raf = requestAnimationFrame(() => animateTo(detentOffset(sorted, cur, vh())));
+	return { detach: () => {
+		cancelAnimationFrame(raf);
+		panel.removeEventListener("scroll", pinGrabber);
+		grabber.removeEventListener("pointerdown", down);
+		grabber.removeEventListener("pointermove", move);
+		grabber.removeEventListener("pointerup", up);
+		grabber.removeEventListener("pointercancel", up);
+		grabber.remove();
+		panel.classList.remove("vx-sheet-detents");
+		panel.style.height = "";
+		panel.style.transition = "";
+	} };
+}
+//#endregion
+export { attachSheetDetents };

package/dist/web/{ui60.js → sheet-service.web.js}

@@ -1,4 +1,5 @@
-import { applyThemeClasses } from "./ui29.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { attachSheetDetents } from "./sheet-detents.web.js";
 import { createRoot } from "octane";
 //#region src/sheet-service.web.ts
 var active = /* @__PURE__ */ new Set();
@@ -13,12 +14,14 @@ var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
 	const unbindTheme = applyThemeClasses(layer, "vx-sheet-layer");
 	const panel = document.createElement("div");
 	panel.className = "vx-sheet";
+	if (options.detents?.length) panel.classList.add("vx-sheet-detents");
 	let finished = false;
 	const finish = (result) => {
 		if (finished) return;
 		finished = true;
 		active.delete(entry);
 		unbindTheme();
+		detents?.detach();
 		root.unmount();
 		layer.remove();
 		resolve(result);
@@ -35,6 +38,7 @@ var openSheet = (Component, params, options = {}) => new Promise((resolve) => {
 	}
 	layer.appendChild(panel);
 	document.body.appendChild(layer);
+	const detents = options.detents?.length ? attachSheetDetents(panel, options.detents, () => finish()) : null;
 	const root = createRoot(panel);
 	root.render(Component, {
 		params,

package/dist/web/sheet-snap.js

@@ -0,0 +1,35 @@
+/** Sorted, filtered, deduped detent fractions. Empty → the caller keeps
+*  the content-sized sheet behavior (detents off). */
+function normalizeDetents(input) {
+	if (!input?.length) return [];
+	return [...new Set(input.filter((d) => d > 0 && d <= 1))].sort((a, b) => a - b);
+}
+/** Resting translateY for a detent: the panel is `max * vh` tall, so the
+*  portion below the screen edge is `(max - detent) * vh`. */
+function detentOffset(detents, index, vh) {
+	return (detents[detents.length - 1] - detents[index]) * vh;
+}
+/** Snap target for a release at translateY `ty` with vertical velocity
+*  `vy` (positive = dragging down). Returns the detent index, or -1 to
+*  dismiss: released below half of the smallest detent, or a downward
+*  fling while at/below it. */
+function snapDetentIndex(ty, vy, detents, vh) {
+	const max = detents[detents.length - 1];
+	const frac = Math.min(Math.max(max - ty / vh, 0), 1);
+	if (vy > 500) {
+		let i = -1;
+		while (i + 1 < detents.length && detents[i + 1] < frac - 1e-6) i++;
+		return i;
+	}
+	if (vy < -500) {
+		let i = detents.length - 1;
+		while (i - 1 >= 0 && detents[i - 1] > frac + 1e-6) i--;
+		return i;
+	}
+	if (frac < detents[0] * .5) return -1;
+	let best = 0;
+	for (let i = 1; i < detents.length; i++) if (Math.abs(detents[i] - frac) < Math.abs(detents[best] - frac)) best = i;
+	return best;
+}
+//#endregion
+export { detentOffset, normalizeDetents, snapDetentIndex };

package/dist/{native/ui31.js → web/theme/theme-scheme.js}

@@ -1,5 +1,5 @@
-import { cx } from "./ui2.js";
-import { getColorScheme, subscribeSystemScheme } from "./ui30.js";
+import { getColorScheme, subscribeSystemScheme } from "./colorScheme.web.js";
+import { cx } from "../cx.js";
 import { hookSlots, useSyncExternalStore } from "octane";
 //#region src/theme/theme-scheme.ts
 var preference = "system";

package/dist/web/{ui35.js → toast-anchor.web.tsrx.js}

@@ -1,6 +1,6 @@
-import { cx } from "./ui28.js";
-import { applyThemeClasses } from "./ui29.js";
-import { Popover } from "./ui33.js";
+import { cx } from "./cx.js";
+import { applyThemeClasses } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
 import { bag1, bag3, clone, componentSlot, componentSlotVoid, createRoot, ifBlock, markChildrenBlock, template } from "octane";
 import { childTextHoleUpdate } from "octane/internal/client";
 //#region src/toast-anchor.web.tsrx

package/dist/web/transform.web.js

@@ -0,0 +1,43 @@
+//#region src/transform.web.ts
+/** Per-element transform composition for imperative writes. The DOM has a
+*  single `transform` string where native has discrete view props, so web
+*  keeps the last-written value per transform prop and re-joins them —
+*  an AnimatedValue on `rotate` and a setTranslate drag on the same
+*  element don't clobber each other. */
+var transformProps = {
+	translateX: (v) => `translateX(${v}px)`,
+	translateY: (v) => `translateY(${v}px)`,
+	translateZ: (v) => `translateZ(${v}px)`,
+	scale: (v) => `scale(${v})`,
+	scaleX: (v) => `scaleX(${v})`,
+	scaleY: (v) => `scaleY(${v})`,
+	rotate: (v) => `rotate(${v}deg)`,
+	rotateX: (v) => `rotateX(${v}deg)`,
+	rotateY: (v) => `rotateY(${v}deg)`,
+	skewX: (v) => `skewX(${v}deg)`,
+	skewY: (v) => `skewY(${v}deg)`
+};
+var transformStates = /* @__PURE__ */ new WeakMap();
+/** Write one transform prop without disturbing the element's other
+*  transform components (or its stylesheet/base transform). */
+function writeTransformProp(el, prop, value) {
+	if (Object.prototype.hasOwnProperty.call(transformProps, prop)) {
+		const transformProp = prop;
+		let state = transformStates.get(el);
+		if (!state) {
+			const computed = getComputedStyle(el).transform;
+			state = {
+				base: computed === "none" ? "" : computed,
+				values: /* @__PURE__ */ new Map()
+			};
+			transformStates.set(el, state);
+		}
+		state.values.set(transformProp, value);
+		const transforms = Object.entries(transformProps).filter(([name]) => state.values.has(name)).map(([name, toTransform]) => toTransform(state.values.get(name)));
+		el.style.transform = [state.base, ...transforms].filter(Boolean).join(" ");
+		return;
+	}
+	el.style[prop] = value;
+}
+//#endregion
+export { writeTransformProp };

package/dist/web/translate.web.js

@@ -0,0 +1,13 @@
+import { writeTransformProp } from "./transform.web.js";
+//#region src/translate.web.ts
+/** Imperative translate write on a bound view — the gesture seam. Called
+*  per frame from pan handlers (docs/animation-gestures.md: animation
+*  writes imperative, state stays declarative). Composes with other
+*  transform writes on the same element via ./transform.web. */
+var setTranslate = (el, x = 0, y = 0) => {
+	if (!el) return;
+	writeTransformProp(el, "translateX", x);
+	writeTransformProp(el, "translateY", y);
+};
+//#endregion
+export { setTranslate };