@octane-xplat/lottie 0.0.1 → 0.9.0

package/dist/native/vendor/ui-lottie/index.ios.js

@@ -0,0 +1,214 @@
+import { LottieViewBase, autoPlayProperty, keyPathColorsProperty, loopProperty, progressProperty, srcProperty, stretchProperty } from "./src/lottie/index.common.js";
+import { clamp } from "./src/lottie/utils.js";
+import { Color, Http, Utils, View, knownFolders, path } from "@nativescript/core";
+//#region src/vendor/ui-lottie/src/lottie/index.ios.ts
+/**********************************************************************************
+* (c) 2017, Nathan Walker.
+* Licensed under the MIT license.
+*
+* Version 1.0.0                                           walkerrunpdx@gmail.com
+**********************************************************************************/
+var appPath = knownFolders.currentApp().path;
+CompatibleLottieLogger.overrideLottieLogger();
+var LottieView = class LottieView extends LottieViewBase {
+	constructor(..._args) {
+		super(..._args);
+		this._imageSourceAffectsLayout = true;
+	}
+	createNativeView() {
+		return CompatibleAnimationView.new();
+	}
+	initNativeView() {
+		super.initNativeView();
+		this.nativeViewProtected.translatesAutoresizingMaskIntoConstraints = true;
+	}
+	onLoaded() {
+		super.onLoaded();
+		if (this.autoPlay && !this.isAnimating()) this.playAnimation();
+	}
+	[keyPathColorsProperty.setNative](value) {
+		Object.keys(value).forEach((k) => this.setColor(value[k], k.split("|")));
+	}
+	[srcProperty.setNative](src) {
+		try {
+			if (!src) this.nativeViewProtected.compatibleAnimation = null;
+			else if (src[0] === "{") this.nativeViewProtected.compatibleAnimation = CompatibleAnimation.alloc().initWithJson(src);
+			else if (src.startsWith(Utils.RESOURCE_PREFIX)) {
+				const resName = src.replace(Utils.RESOURCE_PREFIX, "");
+				this.nativeViewProtected.compatibleAnimation = CompatibleAnimation.alloc().initWithNameBundle(resName.replace(".json", "").replace(".lottie", ""), NSBundle.mainBundle);
+			} else if (/^https?:/i.test(src)) {
+				const match = /\.(zip|lottie|json)(?=[?#]|$)/i.exec(src);
+				const dest = path.join(knownFolders.temp().path, `lottie-${Date.now()}${match ? match[0].toLowerCase() : ".json"}`);
+				Http.getFile(src, dest).then(() => {
+					this.src = dest;
+				}).catch((error) => {
+					console.error(error);
+					this.notify({
+						eventName: "loadFailed",
+						error
+					});
+				});
+			} else {
+				if (src[0] === "~") src = `${path.join(appPath, src.substring(2))}`;
+				if (!/.(json|zip|lottie)$/.test(src)) src += ".json";
+				if (!src.startsWith("file:/") && src[0] !== "/") this.nativeViewProtected.compatibleAnimation = CompatibleAnimation.alloc().initWithNameSubdirectoryBundle(src.replace(".json", "").replace(".lottie", ""), null, NSBundle.mainBundle);
+				else this.nativeViewProtected.compatibleAnimation = CompatibleAnimation.alloc().initWithFilepath(src);
+			}
+			if (this.keyPathColors) this[keyPathColorsProperty.setNative](this.keyPathColors);
+			if (this._imageSourceAffectsLayout) this.requestLayout();
+			if (this.autoPlay && !this.isAnimating()) this.playAnimation();
+			if (src && !/^https?:/i.test(src)) {
+				const view = this.nativeViewProtected;
+				setTimeout(() => {
+					if (view && view.compatibleAnimation && view.animationDuration >= 0) this.notify({
+						eventName: LottieViewBase.compositionLoadedEvent,
+						composition: view.compatibleAnimation
+					});
+					else this.notify({
+						eventName: LottieViewBase.loadFailedEvent,
+						error: src
+					});
+				}, 0);
+			}
+		} catch (error) {
+			console.error(error);
+			this.notify({
+				eventName: LottieViewBase.loadFailedEvent,
+				error
+			});
+		}
+	}
+	[loopProperty.setNative](loop) {
+		this.nativeViewProtected.loopAnimationCount = loop ? -1 : 0;
+	}
+	[autoPlayProperty.setNative](autoPlay) {
+		if (autoPlay) {
+			if (!this.isAnimating()) this.playAnimation();
+		} else if (this.isAnimating()) this.cancelAnimation();
+	}
+	setColor(value, keyPath) {
+		if (this.nativeView && value && keyPath && keyPath.length) {
+			if (keyPath[keyPath.length - 1].toLowerCase() !== "color") {
+				keyPath = [...keyPath];
+				keyPath.push("Color");
+			}
+			const color = value instanceof Color ? value : new Color(value);
+			this.nativeViewProtected.setColorValueForKeypath(color.ios, CompatibleAnimationKeypath.alloc().initWithKeypath(keyPath.join(".")));
+		}
+	}
+	setOpacity(value, keyPath) {
+		if (this.nativeView && value != null && keyPath && keyPath.length) {
+			keyPath = [...keyPath];
+			if (keyPath[keyPath.length - 1].toLowerCase() !== "opacity") keyPath.push("Opacity");
+			this.nativeViewProtected.setFloatValueForKeypath(clamp(value) * 100, CompatibleAnimationKeypath.alloc().initWithKeypath(keyPath.join(".")));
+		}
+	}
+	playAnimation() {
+		setTimeout(() => {
+			if (this.nativeViewProtected) {
+				if (this.completionBlock) this.nativeViewProtected.playWithCompletion((animationFinished) => {
+					if (this.completionBlock) this.completionBlock(animationFinished);
+				});
+				else this.nativeViewProtected.play();
+			}
+		}, 0);
+	}
+	playAnimationFromProgressToProgress(startProgress, endProgress) {
+		if (this.nativeViewProtected) {
+			startProgress = startProgress ? clamp(startProgress) : 0;
+			endProgress = endProgress ? clamp(endProgress) : 1;
+			if (this.completionBlock) this.nativeViewProtected.playFromProgressToProgressCompletion(startProgress, endProgress, this.completionBlock);
+			else this.nativeViewProtected.playFromProgressToProgressCompletion(startProgress, endProgress, null);
+		}
+	}
+	cancelAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.pause();
+	}
+	pauseAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.pause();
+	}
+	resumeAnimation() {
+		if (this.nativeViewProtected) this.nativeViewProtected.play();
+	}
+	isAnimating() {
+		return this.nativeView ? this.nativeViewProtected.isAnimationPlaying : false;
+	}
+	[progressProperty.setNative](value) {
+		this.nativeViewProtected.currentProgress = value;
+	}
+	set speed(value) {
+		if (this.nativeView && value) this.nativeViewProtected.animationSpeed = value;
+	}
+	get speed() {
+		return this.nativeView ? this.nativeViewProtected.animationSpeed : void 0;
+	}
+	get duration() {
+		return this.nativeView && this.nativeViewProtected.animationDuration;
+	}
+	set contentMode(mode) {
+		if (this.nativeViewProtected) this.nativeViewProtected.contentMode = mode;
+	}
+	onMeasure(widthMeasureSpec, heightMeasureSpec) {
+		const intrinsicContentSize = this.nativeViewProtected.intrinsicContentSize;
+		const width = Utils.layout.getMeasureSpecSize(widthMeasureSpec);
+		const widthMode = Utils.layout.getMeasureSpecMode(widthMeasureSpec);
+		const height = Utils.layout.getMeasureSpecSize(heightMeasureSpec);
+		const heightMode = Utils.layout.getMeasureSpecMode(heightMeasureSpec);
+		const nativeWidth = intrinsicContentSize ? Utils.layout.toDevicePixels(intrinsicContentSize.width) : 0;
+		const nativeHeight = intrinsicContentSize ? Utils.layout.toDevicePixels(intrinsicContentSize.height) : 0;
+		let measureWidth = Math.max(nativeWidth, this.effectiveMinWidth);
+		let measureHeight = Math.max(nativeHeight, this.effectiveMinHeight);
+		const finiteWidth = widthMode !== Utils.layout.UNSPECIFIED;
+		const finiteHeight = heightMode !== Utils.layout.UNSPECIFIED;
+		this._imageSourceAffectsLayout = widthMode !== Utils.layout.EXACTLY || heightMode !== Utils.layout.EXACTLY;
+		if (nativeWidth !== 0 && nativeHeight !== 0 && (finiteWidth || finiteHeight)) {
+			const scale = LottieView.computeScaleFactor(width, height, finiteWidth, finiteHeight, nativeWidth, nativeHeight, this.stretch);
+			const resultW = Math.round(nativeWidth * scale.width);
+			const resultH = Math.round(nativeHeight * scale.height);
+			measureWidth = finiteWidth ? Math.min(resultW, width) : resultW;
+			measureHeight = finiteHeight ? Math.min(resultH, height) : resultH;
+		}
+		const widthAndState = View.resolveSizeAndState(measureWidth, width, widthMode, 0);
+		const heightAndState = View.resolveSizeAndState(measureHeight, height, heightMode, 0);
+		this.setMeasuredDimension(widthAndState, heightAndState);
+	}
+	static computeScaleFactor(measureWidth, measureHeight, widthIsFinite, heightIsFinite, nativeWidth, nativeHeight, imageStretch) {
+		let scaleW = 1;
+		let scaleH = 1;
+		if ((imageStretch === "aspectFill" || imageStretch === "aspectFit" || imageStretch === "fill") && (widthIsFinite || heightIsFinite)) {
+			scaleW = nativeWidth > 0 ? measureWidth / nativeWidth : 0;
+			scaleH = nativeHeight > 0 ? measureHeight / nativeHeight : 0;
+			if (!widthIsFinite) scaleW = scaleH;
+			else if (!heightIsFinite) scaleH = scaleW;
+			else switch (imageStretch) {
+				case "aspectFit":
+					scaleH = scaleW < scaleH ? scaleW : scaleH;
+					scaleW = scaleH;
+					break;
+				case "aspectFill":
+					scaleH = scaleW > scaleH ? scaleW : scaleH;
+					scaleW = scaleH;
+			}
+		}
+		return {
+			width: scaleW,
+			height: scaleH
+		};
+	}
+	[stretchProperty.setNative](value) {
+		switch (value) {
+			case "aspectFit":
+				this.nativeViewProtected.contentMode = UIViewContentMode.ScaleAspectFit;
+				break;
+			case "aspectFill":
+				this.nativeViewProtected.contentMode = UIViewContentMode.ScaleAspectFill;
+				break;
+			case "fill":
+				this.nativeViewProtected.contentMode = UIViewContentMode.ScaleToFill;
+				break;
+			default: this.nativeViewProtected.contentMode = UIViewContentMode.TopLeft;
+		}
+	}
+};
+//#endregion
+export { LottieView };

package/dist/native/vendor/ui-lottie/src/lottie/index.common.js

@@ -0,0 +1,50 @@
+import { Property, View, booleanConverter } from "@nativescript/core";
+//#region src/vendor/ui-lottie/src/lottie/index.common.ts
+/**********************************************************************************
+* (c) 2017, Nathan Walker.
+* Licensed under the MIT license.
+*
+* Version 1.0.0                                           walkerrunpdx@gmail.com
+**********************************************************************************/
+var LottieViewBase = class extends View {
+	static {
+		this.compositionLoadedEvent = "compositionLoaded";
+	}
+	static {
+		this.loadFailedEvent = "loadFailed";
+	}
+};
+var srcProperty = new Property({ name: "src" });
+srcProperty.register(LottieViewBase);
+var asyncProperty = new Property({
+	name: "async",
+	defaultValue: false,
+	valueConverter: booleanConverter
+});
+asyncProperty.register(LottieViewBase);
+var loopProperty = new Property({
+	name: "loop",
+	defaultValue: false,
+	valueConverter: booleanConverter
+});
+loopProperty.register(LottieViewBase);
+var autoPlayProperty = new Property({
+	name: "autoPlay",
+	defaultValue: false,
+	valueConverter: booleanConverter
+});
+autoPlayProperty.register(LottieViewBase);
+var renderModeProperty = new Property({ name: "renderMode" });
+renderModeProperty.register(LottieViewBase);
+var progressProperty = new Property({ name: "progress" });
+progressProperty.register(LottieViewBase);
+var stretchProperty = new Property({
+	name: "stretch",
+	defaultValue: "aspectFit",
+	affectsLayout: global.isIOS
+});
+stretchProperty.register(LottieViewBase);
+var keyPathColorsProperty = new Property({ name: "keyPathColors" });
+keyPathColorsProperty.register(LottieViewBase);
+//#endregion
+export { LottieViewBase, asyncProperty, autoPlayProperty, keyPathColorsProperty, loopProperty, progressProperty, renderModeProperty, srcProperty, stretchProperty };

package/dist/native/vendor/ui-lottie/src/lottie/utils.js

@@ -0,0 +1,6 @@
+//#region src/vendor/ui-lottie/src/lottie/utils.ts
+function clamp(val, min = 0, max = 1) {
+	return val > max ? max : val < min ? min : val;
+}
+//#endregion
+export { clamp };

package/dist/web/escape-props.web.js

@@ -0,0 +1,17 @@
+//#region src/escape-props.web.ts
+/** Apply DOM escape props after the primitive's own props. Dash-named keys
+*  are attributes; other keys use the DOM property where available. */
+function applyEscapeProps(element, props) {
+	if (!element || !props.web) return;
+	for (const [key, value] of Object.entries(props.web)) if (key.includes("-")) {
+		if (value == null || value === false) element.removeAttribute(key);
+		else element.setAttribute(key, value === true ? "" : String(value));
+	} else if (key in element) try {
+		element[key] = value;
+	} catch {
+		element.setAttribute(key, String(value));
+	}
+	else if (value != null) element.setAttribute(key, String(value));
+}
+//#endregion
+export { applyEscapeProps };

package/dist/web/index.js

@@ -0,0 +1,332 @@
+import { applyEscapeProps } from "./escape-props.web.js";
+import { layoutChildProps } from "./layout-child.web.js";
+import { __s, bagOf, clone, hookSlots, snapshotSpread, template, useEffect, useRef } from "octane";
+import { bindSignalChild, bindSignalHostPropSources, compilerMemoRegion, enableSignalBindings, hookMemoCreate, hookMemoPublishInvariant } from "octane/internal/client";
+import lottie from "lottie-web";
+//#region src/Lottie.web.tsrx
+enableSignalBindings(1, true);
+var _t$0 = /* @__PURE__ */ template("<div></div>");
+var _hs$ = /* @__PURE__ */ hookSlots(8);
+var _rm$1 = [
+	"s",
+	"o",
+	"n"
+];
+var PRESERVE = {
+	contain: "xMidYMid meet",
+	cover: "xMidYMid slice",
+	fill: "none"
+};
+var clamp01 = (n) => Math.min(1, Math.max(0, n));
+var Lottie = /* @__PURE__ */ __s(function Lottie(props, __s, __extra) {
+	const __memoRegion = compilerMemoRegion(__s, _hs$ + 0);
+	let __hk = __memoRegion.hooks;
+	if (__hk === void 0) __memoRegion.hooks = __hk = hookMemoCreate(2);
+	const el = useRef(null, _hs$ + 0);
+	const anim = useRef(null, _hs$ + 1);
+	const ready = useRef(false, _hs$ + 2);
+	const wantPlay = () => props.playing ?? props.autoPlay ?? true;
+	const build = (host) => {
+		anim.current?.destroy();
+		anim.current = null;
+		ready.current = false;
+		const animationData = props.data ?? (props.src?.startsWith("{") ? JSON.parse(props.src) : void 0);
+		const path = animationData ? void 0 : props.src;
+		if (!animationData && !path) return;
+		const a = lottie.loadAnimation({
+			container: host,
+			renderer: "svg",
+			loop: props.loop ?? false,
+			autoplay: false,
+			animationData,
+			path,
+			rendererSettings: { preserveAspectRatio: PRESERVE[props.fit ?? "contain"] }
+		});
+		anim.current = a;
+		a.addEventListener("DOMLoaded", () => {
+			ready.current = true;
+			if (props.speed !== void 0) a.setSpeed(props.speed);
+			if (props.progress !== void 0) seekTo(props.progress);
+			props.onLoaded?.({ duration: a.getDuration() * 1e3 });
+			if (wantPlay()) a.play();
+		});
+		a.addEventListener("complete", () => props.onEnded?.());
+		a.addEventListener("data_failed", () => props.onError?.({ message: "animation data failed to load" }));
+		a.addEventListener("error", () => props.onError?.({ message: "animation failed" }));
+	};
+	const seekTo = __hk[0] ?? hookMemoPublishInvariant(__hk, 0, (p) => {
+		const a = anim.current;
+		if (!a) return;
+		const frame = clamp01(p) * a.totalFrames;
+		if (a.isPaused) a.goToAndStop(frame, true);
+		else a.goToAndPlay(frame, true);
+	});
+	useEffect(() => {
+		const host = el.current;
+		if (!host) return;
+		build(host);
+		return () => {
+			anim.current?.destroy();
+			anim.current = null;
+			ready.current = false;
+		};
+	}, [
+		props.src,
+		props.data,
+		props.fit
+	], _hs$ + 3);
+	useEffect(() => {
+		if (props.loop !== void 0 && anim.current) anim.current.loop = props.loop;
+	}, [props.loop], _hs$ + 4);
+	useEffect(() => {
+		if (props.playing === void 0 || !anim.current || !ready.current) return;
+		if (props.playing) anim.current.play();
+		else anim.current.pause();
+	}, [props.playing], _hs$ + 5);
+	useEffect(() => {
+		if (props.progress === void 0) return;
+		seekTo(props.progress);
+	}, [props.progress], _hs$ + 6);
+	useEffect(() => {
+		if (props.speed !== void 0) anim.current?.setSpeed(props.speed);
+	}, [props.speed], _hs$ + 7);
+	const handle = __hk[1] ?? hookMemoPublishInvariant(__hk, 1, (a) => ({
+		play: () => a.play(),
+		pause: () => a.pause(),
+		stop: () => a.stop(),
+		seekTo,
+		setSpeed: (n) => a.setSpeed(n),
+		progress: () => a.totalFrames ? a.currentRawFrame / a.totalFrames : 0,
+		duration: () => a.getDuration() * 1e3,
+		isPlaying: () => !a.isPaused,
+		native: a
+	}));
+	let _b = __s.slots[0];
+	if (_b === void 0) {
+		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m14;
+		const _root = clone(_t$0);
+		_m0 = (v) => {
+			el.current = v;
+			if (!v) return;
+			applyEscapeProps(v, props);
+			if (anim.current) props.bind?.(handle(anim.current));
+		};
+		_m1 = props.id;
+		_m2 = props.className;
+		_m3 = snapshotSpread(layoutChildProps(props, props.style));
+		_m4 = props.accessibilityRole ?? "img";
+		_m5 = props.accessibilityLabel;
+		_m6 = props.accessible === false ? true : void 0;
+		_m7 = props.accessibilityHint;
+		_m8 = props.accessibilityValue;
+		_m9 = props.accessibilityState?.disabled;
+		_m10 = props.accessibilityState?.selected;
+		_m11 = props.accessibilityState?.checked;
+		_m12 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+		_m13 = _root;
+		_m14 = bindSignalHostPropSources(__s, void 0, _root, [
+			[
+				false,
+				"ref",
+				_m0
+			],
+			[
+				false,
+				"id",
+				_m1
+			],
+			[
+				false,
+				"className",
+				_m2
+			],
+			[true, _m3],
+			[
+				false,
+				"role",
+				_m4
+			],
+			[
+				false,
+				"aria-label",
+				_m5
+			],
+			[
+				false,
+				"aria-hidden",
+				_m6
+			],
+			[
+				false,
+				"aria-description",
+				_m7
+			],
+			[
+				false,
+				"aria-valuetext",
+				_m8
+			],
+			[
+				false,
+				"aria-disabled",
+				_m9
+			],
+			[
+				false,
+				"aria-selected",
+				_m10
+			],
+			[
+				false,
+				"aria-checked",
+				_m11
+			],
+			[
+				false,
+				"aria-live",
+				_m12
+			]
+		], "b:e86dca49", false);
+		_b = bagOf(__s, _root, {
+			a: _m0,
+			b: _m1,
+			c: _m2,
+			d: _m3,
+			e: _m4,
+			f: _m5,
+			g: _m6,
+			h: _m7,
+			i: _m8,
+			j: _m9,
+			k: _m10,
+			l: _m11,
+			m: _m12,
+			n: _m13,
+			o: _m14,
+			p: null,
+			q: void 0
+		});
+		__s.refFields = _rm$1;
+	} else {
+		{
+			const _v = (v) => {
+				el.current = v;
+				if (!v) return;
+				applyEscapeProps(v, props);
+				if (anim.current) props.bind?.(handle(anim.current));
+			};
+			if (_b.a !== _v) _b.a = _v;
+		}
+		{
+			const _v = props.id;
+			if (_b.b !== _v) _b.b = _v;
+		}
+		{
+			const _v = props.className;
+			if (_b.c !== _v) _b.c = _v;
+		}
+		_b.d = snapshotSpread(layoutChildProps(props, props.style));
+		{
+			const _v = props.accessibilityRole ?? "img";
+			if (_b.e !== _v) _b.e = _v;
+		}
+		{
+			const _v = props.accessibilityLabel;
+			if (_b.f !== _v) _b.f = _v;
+		}
+		{
+			const _v = props.accessible === false ? true : void 0;
+			if (_b.g !== _v) _b.g = _v;
+		}
+		{
+			const _v = props.accessibilityHint;
+			if (_b.h !== _v) _b.h = _v;
+		}
+		{
+			const _v = props.accessibilityValue;
+			if (_b.i !== _v) _b.i = _v;
+		}
+		{
+			const _v = props.accessibilityState?.disabled;
+			if (_b.j !== _v) _b.j = _v;
+		}
+		{
+			const _v = props.accessibilityState?.selected;
+			if (_b.k !== _v) _b.k = _v;
+		}
+		{
+			const _v = props.accessibilityState?.checked;
+			if (_b.l !== _v) _b.l = _v;
+		}
+		{
+			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
+			if (_b.m !== _v) _b.m = _v;
+		}
+		_b.o = bindSignalHostPropSources(__s, _b.o, _b.n, [
+			[
+				false,
+				"ref",
+				_b.a
+			],
+			[
+				false,
+				"id",
+				_b.b
+			],
+			[
+				false,
+				"className",
+				_b.c
+			],
+			[true, _b.d],
+			[
+				false,
+				"role",
+				_b.e
+			],
+			[
+				false,
+				"aria-label",
+				_b.f
+			],
+			[
+				false,
+				"aria-hidden",
+				_b.g
+			],
+			[
+				false,
+				"aria-description",
+				_b.h
+			],
+			[
+				false,
+				"aria-valuetext",
+				_b.i
+			],
+			[
+				false,
+				"aria-disabled",
+				_b.j
+			],
+			[
+				false,
+				"aria-selected",
+				_b.k
+			],
+			[
+				false,
+				"aria-checked",
+				_b.l
+			],
+			[
+				false,
+				"aria-live",
+				_b.m
+			]
+		], "b:e86dca49", false);
+	}
+	_b.r = bindSignalChild(__s, _b.r, 1, _b.n, Object.prototype.propertyIsEnumerable.call(_b.o.resolved, "children") ? _b.o.resolved.children : void 0, "b:e86dca49", null, void 0, void 0, void 0, true);
+});
+//#endregion
+export { Lottie };

package/dist/web/layout-child.web.js

@@ -0,0 +1,47 @@
+//#region src/layout-child.web.ts
+/** The shared contract is "numbers are dips" (RN semantics), but octane's DOM
+*  renderer keeps React's unitless list — lineHeight is unitless there, so
+*  `style={{lineHeight: 40}}` would render a 40× multiplier instead of 40px.
+*  lineHeight is the one unitless-in-React prop that is a length in the
+*  shared vocabulary; force the px suffix. */
+function normStyle(style) {
+	if (style && typeof style.lineHeight === "number") return {
+		...style,
+		lineHeight: style.lineHeight + "px"
+	};
+	return style;
+}
+var FLEX_JUSTIFY = {
+	start: "flex-start",
+	end: "flex-end"
+};
+var FLEX_ALIGN = {
+	start: "flex-start",
+	end: "flex-end"
+};
+/** Convert parent-layout metadata to CSS on the web leaf. Native's `dock`
+*  attribute has no CSS equivalent and is ignored on web. Grid indices are
+*  zero-based in the shared API, matching NativeScript. */
+function layoutChildProps(props, baseStyle = props.style) {
+	const style = { ...normStyle(baseStyle) };
+	if (props.row !== void 0) style.gridRow = `${props.row + 1} / span ${props.rowSpan ?? 1}`;
+	else if (props.rowSpan !== void 0) style.gridRow = `span ${props.rowSpan}`;
+	if (props.col !== void 0) style.gridColumn = `${props.col + 1} / span ${props.colSpan ?? 1}`;
+	else if (props.colSpan !== void 0) style.gridColumn = `span ${props.colSpan}`;
+	if (props.left !== void 0) style.left = props.left;
+	if (props.top !== void 0) style.top = props.top;
+	if (props.flexGrow !== void 0) style.flexGrow = props.flexGrow;
+	if (props.flexShrink !== void 0) style.flexShrink = props.flexShrink;
+	if (props.alignSelf !== void 0) style.alignSelf = props.alignSelf;
+	if (props.order !== void 0) style.order = props.order;
+	if (props.justifyContent !== void 0) style.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
+	if (props.alignItems !== void 0) style.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
+	if (props.flexWrap !== void 0) style.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
+	if (props.gap !== void 0) style.gap = props.gap;
+	if (props.rowGap !== void 0) style.rowGap = props.rowGap;
+	if (props.columnGap !== void 0) style.columnGap = props.columnGap;
+	if (typeof style.lineHeight === "number") style.lineHeight = style.lineHeight + "px";
+	return { style };
+}
+//#endregion
+export { layoutChildProps, normStyle };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "7f9f4346-2bc0-44b2-b7a5-74cb52d2702e",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}