@octane-xplat/ui 0.5.0 → 0.6.0

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 };

package/dist/web/ui.js

@@ -1,53 +1,91 @@
-import { View } from "./ui5.js";
-import { Row } from "./ui6.js";
-import { Grid } from "./ui7.js";
-import { Stack } from "./ui8.js";
-import { Absolute } from "./ui9.js";
-import { LiquidGlass } from "./ui10.js";
-import { LiquidGlassContainer } from "./ui11.js";
-import { Spacer } from "./ui12.js";
-import { Text } from "./ui13.js";
-import { RichText, RichTextSpan } from "./ui14.js";
-import { Pressable } from "./ui15.js";
-import { Link } from "./ui16.js";
-import { deriveRouteManifest } from "./ui17.js";
-import { canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./ui18.js";
-import { NavLink } from "./ui19.js";
-import { TextInput } from "./ui20.js";
-import { TextArea } from "./ui21.js";
-import { List } from "./ui22.js";
-import { ScrollView } from "./ui23.js";
-import { ScrollBox } from "./ui24.js";
-import { Image } from "./ui25.js";
-import { Modal } from "./ui26.js";
-import { getColorScheme, useColorScheme } from "./ui27.js";
-import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./ui29.js";
-import { openModal } from "./ui30.js";
-import { Overlay } from "./ui31.js";
-import { Popover } from "./ui33.js";
-import { Hoverable } from "./ui34.js";
-import { showToast } from "./ui35.js";
-import { useAnimation } from "./ui36.js";
-import { styled } from "./ui37.js";
-import { openWindow } from "./ui38.js";
-import { Screen } from "./ui39.js";
-import { Tabs } from "./ui40.js";
-import { Switch } from "./ui41.js";
-import { useSafeAreaInsets } from "./ui42.js";
-import { SafeArea } from "./ui43.js";
-import { KeyboardAvoiding } from "./ui44.js";
-import { Drawer } from "./ui45.js";
-import { useMeasure } from "./ui46.js";
-import { ActivityIndicator } from "./ui48.js";
-import { Meter } from "./ui50.js";
-import { Slider } from "./ui51.js";
-import { registerIcon, registerIcons } from "./ui52.js";
-import { Icon } from "./ui53.js";
-import { Heading } from "./ui54.js";
-import { PlatformBadge } from "./ui55.js";
-import { getStack, registerStack, stackEntries } from "./ui56.js";
-import { createStore } from "./ui57.js";
-import { useStore } from "./ui58.js";
-import { Sheet } from "./ui59.js";
-import { closeSheet, openSheet } from "./ui60.js";
-export { Absolute, ActivityIndicator, View as Column, Drawer, Grid, Heading, Hoverable, Icon, Image, KeyboardAvoiding, Link, LiquidGlass, LiquidGlassContainer, List, Meter, Modal, NavLink, Overlay, PlatformBadge, Popover, Pressable, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, Sheet, Slider, Spacer, Stack, Switch, Tabs, Text, TextArea, TextInput, View, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, onThemeSchemeChange, openModal, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Grid } from "./Grid.web.tsrx.js";
+import { Stack } from "./Stack.web.tsrx.js";
+import { Absolute } from "./Absolute.web.tsrx.js";
+import { setTranslate } from "./translate.web.js";
+import { Spacer } from "./Spacer.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { RichText, RichTextSpan } from "./RichText.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { ActivityIndicator } from "./ActivityIndicator.web.tsrx.js";
+import { Button } from "./Button.web.tsrx.js";
+import { Collapsible } from "./Collapsible.web.tsrx.js";
+import { Accordion } from "./Accordion.web.tsrx.js";
+import { Checkbox } from "./Checkbox.web.tsrx.js";
+import { RadioGroup } from "./RadioGroup.web.tsrx.js";
+import { getColorScheme, useColorScheme } from "./theme/colorScheme.web.js";
+import { applyThemeClasses, getThemePreference, getThemeScheme, onThemeSchemeChange, setThemePreference, themeSchemeClasses, useThemeScheme } from "./theme/theme-scheme.js";
+import { Popover } from "./Popover.web.tsrx.js";
+import { registerIcon, registerIcons } from "./icons.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { DropdownMenu } from "./DropdownMenu.web.tsrx.js";
+import { ContextMenu } from "./ContextMenu.web.tsrx.js";
+import { Badge } from "./Badge.web.tsrx.js";
+import { Separator } from "./Separator.web.tsrx.js";
+import { Skeleton } from "./Skeleton.web.tsrx.js";
+import { Avatar } from "./Avatar.web.tsrx.js";
+import { AvatarGroup } from "./AvatarGroup.web.tsrx.js";
+import { FormField } from "./FormField.web.tsrx.js";
+import { FieldGroup } from "./FieldGroup.web.tsrx.js";
+import { TextInput } from "./TextInput.web.tsrx.js";
+import { InputNumber } from "./InputNumber.web.tsrx.js";
+import { PinInput } from "./PinInput.web.tsrx.js";
+import { Select } from "./Select.web.tsrx.js";
+import { Combobox, InputMenu, SelectMenu } from "./aliases.web.tsrx.js";
+import { InputTags } from "./InputTags.web.tsrx.js";
+import { InputRating } from "./InputRating.web.tsrx.js";
+import { CheckboxGroup } from "./CheckboxGroup.web.tsrx.js";
+import { Breadcrumb } from "./Breadcrumb.web.tsrx.js";
+import { Pagination } from "./Pagination.web.tsrx.js";
+import { Stepper } from "./Stepper.web.tsrx.js";
+import { NavigationMenu } from "./NavigationMenu.web.tsrx.js";
+import { Overlay } from "./Overlay.web.tsrx.js";
+import { CommandPalette } from "./CommandPalette.web.tsrx.js";
+import { Table } from "./Table.web.tsrx.js";
+import { Timeline } from "./Timeline.web.tsrx.js";
+import { Tree } from "./Tree.web.tsrx.js";
+import { Alert } from "./Alert.web.tsrx.js";
+import { Card } from "./Card.web.tsrx.js";
+import { Chip } from "./Chip.web.tsrx.js";
+import { Kbd } from "./Kbd.web.tsrx.js";
+import { Empty } from "./Empty.web.tsrx.js";
+import { Banner } from "./Banner.web.tsrx.js";
+import { User } from "./User.web.tsrx.js";
+import { Meter } from "./Meter.web.tsrx.js";
+import { ProgressGroup } from "./ProgressGroup.web.tsrx.js";
+import { Link } from "./Link.web.tsrx.js";
+import { deriveRouteManifest } from "./route-table.js";
+import { addBackInterceptor, canGoBack, currentModalRoute, currentRoute, hrefFor, popRoute, pushDeepLink, pushRoute, redirect, registerRoutes, registerScreens, routeFor, routeStacks, screenFor, useCanGoBack, useModalRoute, useRoute } from "./route.web.js";
+import { NavLink } from "./NavLink.web.tsrx.js";
+import { TextArea } from "./TextArea.web.tsrx.js";
+import { SearchInput } from "./SearchInput.web.tsrx.js";
+import { SegmentedControl } from "./SegmentedControl.web.tsrx.js";
+import { ScrollView } from "./ScrollView.web.tsrx.js";
+import { ScrollBox } from "./ScrollBox.web.tsrx.js";
+import { Pager } from "./Pager.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { WebView } from "./WebView.web.tsrx.js";
+import { useMeasure } from "./useMeasure.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { Video } from "./Video.web.tsrx.js";
+import { CameraView } from "./CameraView.web.tsrx.js";
+import { showToast } from "./toast-anchor.web.tsrx.js";
+import { useAnimation } from "./anim.web.tsrx.js";
+import { styled } from "./styled.web.tsrx.js";
+import { openWindow } from "./windows.web.js";
+import { Screen } from "./Screen.web.tsrx.js";
+import { Tabs } from "./Tabs.web.tsrx.js";
+import { Switch } from "./Switch.web.tsrx.js";
+import { useSafeAreaInsets } from "./safeAreaInsets.web.tsrx.js";
+import { SafeArea } from "./SafeArea.web.tsrx.js";
+import { Drawer } from "./Drawer.web.tsrx.js";
+import { Heading } from "./Heading.web.tsrx.js";
+import { isNative } from "./platform.web.js";
+import { getStack, registerStack, stackEntries } from "./stacks.web.js";
+import { useBackInterceptor } from "./use-back.web.tsrx.js";
+import { createStore } from "./store.js";
+import { useStore } from "./use-store.web.tsrx.js";
+import { Sheet } from "./Sheet.web.tsrx.js";
+import { closeSheet, openSheet } from "./sheet-service.web.js";
+export { Absolute, Accordion, ActivityIndicator, Alert, Avatar, AvatarGroup, Badge, Banner, Breadcrumb, Button, CameraView, Card, Checkbox, CheckboxGroup, Chip, Collapsible, View as Column, Combobox, CommandPalette, ContextMenu, Drawer, DropdownMenu, Empty, FieldGroup, FormField, Grid, Heading, Icon, Image, InputMenu, InputNumber, InputRating, InputTags, Kbd, Link, Meter, NavLink, NavigationMenu, Overlay, Pager, Pagination, PinInput, Popover, Pressable, ProgressGroup, RadioGroup, RichText, RichTextSpan, Row, SafeArea, Screen, ScrollBox, ScrollView, SearchInput, SegmentedControl, Select, SelectMenu, Separator, Sheet, Skeleton, Slider, Spacer, Stack, Stepper, Switch, Table, Tabs, Text, TextArea, TextInput, Timeline, Tree, User, Video, View, WebView, addBackInterceptor, applyThemeClasses, canGoBack, closeSheet, createStore, currentModalRoute, currentRoute, deriveRouteManifest, getColorScheme, getStack, getThemePreference, getThemeScheme, hrefFor, isNative, onThemeSchemeChange, openSheet, openWindow, popRoute, pushDeepLink, pushRoute, redirect, registerIcon, registerIcons, registerRoutes, registerScreens, registerStack, routeFor, routeStacks, screenFor, setThemePreference, setTranslate, showToast, stackEntries, styled, themeSchemeClasses, useAnimation, useBackInterceptor, useCanGoBack, useColorScheme, useMeasure, useModalRoute, useRoute, useSafeAreaInsets, useStore, useThemeScheme };

package/dist/web/use-back.web.tsrx.js

@@ -0,0 +1,9 @@
+import { addBackInterceptor } from "./route.web.js";
+import { hookSlots, useEffect } from "octane";
+//#region src/use-back.web.tsrx
+var _h$0 = /* @__PURE__ */ Symbol(/* @__PURE__ */ hookSlots(1));
+function useBackInterceptor(fn) {
+	useEffect(() => addBackInterceptor(fn), [fn], _h$0);
+}
+//#endregion
+export { useBackInterceptor };

package/dist/web/video-chrome.web.tsrx.js

@@ -0,0 +1,207 @@
+import { View } from "./View.web.tsrx.js";
+import { Row } from "./Row.web.tsrx.js";
+import { Text } from "./Text.web.tsrx.js";
+import { Pressable } from "./Pressable.web.tsrx.js";
+import { Icon } from "./Icon.web.tsrx.js";
+import { Image } from "./Image.web.tsrx.js";
+import { Slider } from "./Slider.web.tsrx.js";
+import { bag4, child, clone, componentSlot, componentSlotVoid, drainFrag, hookSlots, ifBlock, markChildrenBlock, markWarm, registerWarmPlan, template, useEffect, useState, warmChild } from "octane";
+import { textHoleUpdate } from "octane/internal/client";
+//#region src/video-chrome.web.tsrx
+var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
+var _hs$ = /* @__PURE__ */ hookSlots(12);
+function __then$0(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	componentSlotVoid(__s, 0, __block.parentNode, Image, {
+		"className": "vx-video-poster",
+		"src": props.poster,
+		"ios": { stretch: "aspectFill" },
+		"android": { stretch: "aspectFill" }
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:1f04b0e4");
+}
+var __childrenBody = {};
+var __childrenBody$ = {};
+function __then$5(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$7(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$9(__props, __s, __extra) {
+			const __block = __s.block;
+			componentSlot(__s, 0, __block.parentNode, Icon, {
+				"name": "xplat-play",
+				"size": 28,
+				"color": "#fff"
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:1921eb83");
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, View, {
+			"className": "vx-video-centerbtn",
+			"children": markChildrenBlock(__children$9, __childrenBody)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:6b9e94c8");
+	}
+	componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+		"className": "vx-video-center",
+		"justifyContent": "center",
+		"alignItems": "center",
+		"accessibilityRole": "button",
+		"accessibilityLabel": "Play",
+		"onPress": props.onTogglePlay,
+		"children": markChildrenBlock(__children$7, __childrenBody$)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:422fa4c4");
+}
+var __childrenBody$2 = {};
+var __childrenBody$3 = {};
+var __childrenBody$4 = {};
+var __childrenBody$5 = {};
+var __childrenBody$6 = {};
+var __childrenBody$7 = {};
+function __then$4(__props, __s, __extra) {
+	const __block = __s.block;
+	const props = __extra[0];
+	function __children$13(__props, __s, __extra) {
+		const __block = __s.block;
+		function __children$15(__props, __s, __extra) {
+			const __block = __s.block;
+			function __children$17(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.playing ? "xplat-pause" : "xplat-play",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:52dcc579");
+			}
+			function __children$20(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.position);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$24(__props, __s, __extra) {
+				const __block = __s.block;
+				let _b = __s.slots[0];
+				if (_b === void 0) {
+					let _m0, _m1;
+					const _root = clone(_t$0);
+					_m0 = __block.parentNode;
+					_m1 = child(_root);
+					drainFrag(_root, __block.parentNode, __block.endMarker);
+					_b = bag4(__s, null, _m0, _m1, null, void 0);
+				}
+				{
+					const _v = stamp(props.duration);
+					_b.c = textHoleUpdate(__s, 1, _b.a, _v, _b.c, _b.d, _b.b, true, true);
+					_b.d = _v;
+				}
+			}
+			function __children$27(__props, __s, __extra) {
+				const __block = __s.block;
+				componentSlot(__s, 0, __block.parentNode, Icon, {
+					"name": props.muted ? "xplat-volume-off" : "xplat-volume",
+					"size": 20,
+					"color": "#fff"
+				}, __block.endMarker, void 0, 2, void 0, void 0, "c:3158cbfc");
+			}
+			componentSlotVoid(__s, 0, __block.parentNode, Pressable, {
+				"className": "vx-video-btn",
+				"accessibilityRole": "button",
+				"accessibilityLabel": props.playing ? "Pause" : "Play",
+				"onPress": props.onTogglePlay,
+				"children": markChildrenBlock(__children$17, __childrenBody$2)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:b0e57e42");
+			componentSlotVoid(__s, 1, __block.parentNode, Text, {
+				"className": "vx-video-time",
+				"children": markChildrenBlock(__children$20, __childrenBody$3)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c5cb75e7");
+			componentSlotVoid(__s, 2, __block.parentNode, Slider, {
+				"className": "vx-video-slider",
+				"style": { flexGrow: 1 },
+				"value": props.position,
+				"minValue": 0,
+				"maxValue": props.duration > 0 ? props.duration : 1,
+				"onValueChange": props.onSeek
+			}, __block.endMarker, void 0, 2, void 0, void 0, "c:983b3c9e");
+			componentSlotVoid(__s, 3, __block.parentNode, Text, {
+				"className": "vx-video-time",
+				"children": markChildrenBlock(__children$24, __childrenBody$4)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:fb6ef5fe");
+			componentSlotVoid(__s, 4, __block.parentNode, Pressable, {
+				"className": "vx-video-btn",
+				"accessibilityRole": "button",
+				"accessibilityLabel": props.muted ? "Unmute" : "Mute",
+				"onPress": props.onToggleMute,
+				"children": markChildrenBlock(__children$27, __childrenBody$5)
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:4aa80908");
+		}
+		componentSlotVoid(__s, 0, __block.parentNode, Row, {
+			"className": "vx-video-bar",
+			"alignItems": "center",
+			"gap": 8,
+			"children": markChildrenBlock(__children$15, __childrenBody$6)
+		}, __block.endMarker, void 0, void 0, void 0, void 0, "c:199677e9");
+	}
+	ifBlock(__s, 0, __block.parentNode, !props.playing, __then$5, null, __block.endMarker, __extra);
+	componentSlotVoid(__s, 1, __block.parentNode, View, {
+		"className": "vx-video-barwrap",
+		"justifyContent": "end",
+		"children": markChildrenBlock(__children$13, __childrenBody$7)
+	}, __block.endMarker, void 0, void 0, void 0, void 0, "c:b4f78ef1");
+}
+function stamp(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	return `${Math.floor(total / 60)}:${String(total % 60).padStart(2, "0")}`;
+}
+var VideoChrome = /* @__PURE__ */ markWarm(function VideoChrome(props, __s, __extra) {
+	const __block = __s.block;
+	const [visible, setVisible] = useState(true, _hs$ + 0);
+	useEffect(() => {
+		if (!props.playing || !visible) return;
+		const t = setTimeout(() => setVisible(false), 2500);
+		return () => clearTimeout(t);
+	}, [props.playing, visible], _hs$ + 1);
+	const __warmPlan = VideoChrome.__warm;
+	if (typeof __warmPlan === "function") registerWarmPlan(__warmPlan, props);
+	else registerWarmPlan(() => {
+		if (props.poster && !props.started) warmChild(Image, {
+			className: "vx-video-poster",
+			src: props.poster,
+			ios: { stretch: "aspectFill" },
+			android: { stretch: "aspectFill" }
+		});
+	}, void 0);
+	{
+		const __ifCondition = props.poster && !props.started;
+		ifBlock(__s, 0, __block.parentNode, __ifCondition, __then$0, null, __block.endMarker, __ifCondition ? [props] : void 0);
+	}
+	componentSlotVoid(__s, 1, __block.parentNode, Pressable, {
+		"className": "vx-video-tap",
+		"accessibilityRole": "button",
+		"accessibilityLabel": visible ? "Hide video controls" : "Show video controls",
+		"onPress": () => setVisible(props.playing ? !visible : true)
+	}, __block.endMarker, void 0, 2, void 0, void 0, "c:9cac9799");
+	{
+		const __ifCondition$ = visible;
+		ifBlock(__s, 2, __block.parentNode, __ifCondition$, __then$4, null, __block.endMarker, __ifCondition$ ? [props] : void 0);
+	}
+}, (__wp) => {
+	const props = __wp;
+	if (props.poster && !props.started) warmChild(Image, {
+		className: "vx-video-poster",
+		src: props.poster,
+		ios: { stretch: "aspectFill" },
+		android: { stretch: "aspectFill" }
+	});
+});
+//#endregion
+export { VideoChrome };

package/dist/web/{ui34.js → web/Hoverable.web.tsrx.js}

@@ -1,8 +1,8 @@
-import { View } from "./ui5.js";
-import { Popover } from "./ui33.js";
+import { View } from "../View.web.tsrx.js";
+import { Popover } from "../Popover.web.tsrx.js";
 import { bag4, bag5, child, clone, componentSlotVoid, drainFrag, hookSlots, markChildrenBlock, sibling, template, useEffect, useRef, useState } from "octane";
 import { compilerMemoRegion, hookMemoCreate, hookMemoPublishInvariant, textHoleUpdate } from "octane/internal/client";
-//#region src/Hoverable.web.tsrx
+//#region src/web/Hoverable.web.tsrx
 var _t$0 = /* @__PURE__ */ template("<!>", 0, 1);
 var _t$1 = /* @__PURE__ */ template("<!><!>", 3, 1);
 var _hs$ = /* @__PURE__ */ hookSlots(7);
@@ -112,7 +112,7 @@ var Hoverable = function Hoverable(props, __s, __extra) {
 				"className": props.cardClassName,
 				"style": props.cardStyle,
 				"children": markChildrenBlock(__children$6, __childrenBody)
-			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:efc5cf17");
+			}, __block.endMarker, void 0, void 0, void 0, void 0, "c:c1227cf9");
 		}
 		let _b = __s.slots[0];
 		if (_b === void 0) {
@@ -136,7 +136,7 @@ var Hoverable = function Hoverable(props, __s, __extra) {
 			"placement": props.placement ?? "bottom",
 			"dismissOnOutsideTap": false,
 			"children": markChildrenBlock(__children$4, __childrenBody$)
-		}, _b.e, void 0, void 0, void 0, void 0, "c:258d2497");
+		}, _b.e, void 0, void 0, void 0, void 0, "c:b985f665");
 	}
 	componentSlotVoid(__s, 0, __block.parentNode, View, {
 		"className": props.className,
@@ -144,7 +144,7 @@ var Hoverable = function Hoverable(props, __s, __extra) {
 		"bind": bindAnchor,
 		"web": props.web,
 		"children": markChildrenBlock(__children$1, __childrenBody$2)
-	}, __block.endMarker, void 0, void 0, true, void 0, "c:df012d7f");
+	}, __block.endMarker, void 0, void 0, true, void 0, "c:3f5159c9");
 };
 //#endregion
 export { Hoverable };