@octane-xplat/lottie 0.13.0 → 0.15.0

package/README.md

@@ -38,7 +38,7 @@ On AppKit, use inline `data`, raw JSON in `src`, an absolute JSON file path,
 or a `file://` or HTTPS URL. Relative paths, `~/`/`res://` bundle aliases,
 HTTP URLs, `.lottie`/`.zip` archives, and external image assets are not
 supported. See [the platform limits](../../docs/app/primitives.md#lottie-animations)
-and [the investigation record](../../docs/notes/lottie-appkit-investigation.md)
+and [the investigation record](../../.agents/docs/notes/lottie-appkit-investigation.md)
 for the complete boundary and runtime evidence.
 
 ```tsx

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/lottie",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "Lottie animation leaf for Octane xplat — lottie-web on web, NativeScript on mobile, and Airbnb Lottie on AppKit",
   "repository": {
     "type": "git",
@@ -8,7 +8,6 @@
     "directory": "packages/lottie"
   },
   "files": [
-    "dist",
     "types",
     "platforms",
     "src/index.ts",
@@ -20,7 +19,6 @@
     "src/props.ts",
     "src/native-elements.d.ts",
     "src/references.d.ts",
-    "src/cx.mobile.ts",
     "src/escape-props.ts",
     "src/escape-props.web.ts",
     "src/layout-child.ts",
@@ -37,18 +35,19 @@
   "exports": {
     ".": {
       "macos": {
+        "types": "./types/generated/index.d.ts",
         "default": "./src/index.macos.ts"
       },
       "web": {
         "types": "./types/generated/index.web.d.ts",
-        "default": "./dist/web/index.js"
+        "default": "./src/index.web.ts"
       },
       "native": {
         "types": "./types/generated/index.d.ts",
-        "default": "./dist/native/index.js"
+        "default": "./src/index.ts"
       },
       "types": "./types/generated/index.d.ts",
-      "default": "./dist/native/index.js"
+      "default": "./src/index.ts"
     }
   },
   "publishConfig": {
@@ -58,13 +57,14 @@
     "lottie-web": "5.13.0"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.1",
+    "@nativescript-community/octane": "0.2.5",
     "@nativescript/core": "9.1.3",
     "@nativescript/types": "9.1.4",
+    "@octane-xplat/macos-renderer": "0.15.0",
     "@octanejs/vite-plugin": "0.1.61",
     "@tsrx/typescript-plugin": "0.4.11",
     "octane": "0.11.0",
-    "tsrx-typegen": "0.2.2",
+    "tsrx-typegen": "0.3.0",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
@@ -105,7 +105,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && tsrx-typegen --target octane && node ../../scripts/check-native-dist.mjs",
-    "test:packed": "node tests/packed-consumer.mjs"
+    "test:packed": "node tests/packed-consumer.mjs",
+    "typegen": "tsrx-typegen --target octane"
   }
 }

package/src/Lottie.macos.tsrx

@@ -48,6 +48,7 @@ export function Lottie(props: LottieProps) @{
 		() => (globalThis as any).XplatLottieAdapter.new() as AppKitLottieAdapter,
 		[],
 	)
+
 	const latest = useRef(props)
 	latest.current = props
 
@@ -61,6 +62,7 @@ export function Lottie(props: LottieProps) @{
 			current.onLoaded?.({ duration })
 			if (current.playing ?? current.autoPlay ?? true) adapter.play()
 		}
+
 		adapter.onEnded = () => latest.current.onEnded?.()
 		adapter.onError = (message) => latest.current.onError?.({ message })
 
@@ -74,6 +76,7 @@ export function Lottie(props: LottieProps) @{
 			} catch (error) {
 				props.onError?.({ message: String(error) })
 			}
+
 			return
 		}
 

package/src/Lottie.tsrx

@@ -4,7 +4,6 @@ import { registerElement } from '@nativescript-community/octane';
 import { isAndroid } from '@nativescript/core';
 import { LottieView } from './vendor/ui-lottie/src/lottie';
 import type { LottieHandle, LottieProps } from './props';
-import { cx } from './cx.mobile';
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props';
 import { layoutChildProps } from './layout-child';
 
@@ -148,7 +147,7 @@ export function Lottie(props: LottieProps) @{
 	<xplatlottie
 		ref={bindHost}
 		id={props.id}
-		className={cx(props.className)}
+		className={[props.className]}
 		style={props.style}
 		{...layoutChildProps(props)}
 		loop={props.loop ?? false}

package/types/generated/.tsrx-typegen-manifest.json

@@ -3,14 +3,15 @@
   "files": [
     "Lottie.d.ts",
     "Lottie.web.d.ts",
-    "cx.mobile.d.ts",
     "escape-props.d.ts",
     "escape-props.web.d.ts",
     "index.d.ts",
     "index.web.d.ts",
     "layout-child.d.ts",
     "layout-child.web.d.ts",
+    "native-elements.d.ts",
     "props.d.ts",
+    "references.d.ts",
     "vendor/ui-lottie/src/lottie/index.common.d.ts",
     "vendor/ui-lottie/src/lottie/index.ios.d.ts",
     "vendor/ui-lottie/src/lottie/utils.d.ts"

package/types/generated/native-elements.d.ts

@@ -0,0 +1,8 @@
+import { LottieView } from './vendor/ui-lottie/src/lottie'
+import type { Attributes } from '@nativescript-community/octane/intrinsics'
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatlottie: Attributes<typeof LottieView>
+	}
+}

package/types/generated/references.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="@nativescript/types" />
+/// <reference types="vite/client" />
+/// <reference path="../node_modules/@nativescript/core/global-types.d.ts" />

package/dist/native/cx.mobile.js

@@ -1,12 +0,0 @@
-//#region src/cx.mobile.ts
-/** Native renderers now normalize the declarative `className` prop, but
-*  imperative `view.className` writes still need a pre-joined string — NS
-*  splits on ' ' only. Native leaves keep normalizing through cx() before
-*  handing className to an intrinsic so both paths accept the same values.
-*  (The DOM renderer already flattens arrays, so web leaves don't need
-*  this.) */
-function cx(...parts) {
-	return parts.flat(Infinity).filter(Boolean).join(" ");
-}
-//#endregion
-export { cx };

package/dist/native/escape-props.js

@@ -1,39 +0,0 @@
-import { isAndroid, isIOS } from "@nativescript/core";
-//#region src/escape-props.ts
-/** Apply only the active device's escape bag after the primitive's own props. */
-function applyEscapeProps(view, props) {
-	if (!view) return;
-	const bag = isIOS ? props.ios : isAndroid ? props.android : void 0;
-	if (bag) Object.assign(view, bag);
-}
-var NATIVE_ACCESSIBILITY_ROLES = {
-	button: "button",
-	link: "link",
-	search: "search",
-	image: "image",
-	heading: "header",
-	adjustable: "adjustable",
-	summary: "summary",
-	text: "text",
-	none: "none",
-	progressbar: "progressBar",
-	checkbox: "checkbox",
-	switch: "switch",
-	radio: "radioButton",
-	spinbutton: "spinButton",
-	tab: "button"
-};
-/** Translate the shared/ARIA spelling to NativeScript's narrower role enum. */
-function nativeAccessibilityRole(role) {
-	return role ? NATIVE_ACCESSIBILITY_ROLES[role] : void 0;
-}
-/** NativeScript's AccessibilityState is a single enum value, unlike the
-*  web's independent ARIA booleans. Priority follows the strongest state. */
-function nativeAccessibilityState(state) {
-	if (state?.disabled) return "disabled";
-	if (state?.selected) return "selected";
-	if (state?.checked === true) return "checked";
-	if (state?.checked === false) return "unchecked";
-}
-//#endregion
-export { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState };

package/dist/native/index.js

@@ -1,183 +0,0 @@
-import { cx } from "./cx.mobile.js";
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.js";
-import { layoutChildProps } from "./layout-child.js";
-import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalProps, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
-import { isAndroid } from "@nativescript/core";
-import { LottieView } from "./vendor/ui-lottie";
-//#region src/Lottie.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(10);
-var _h$0 = /* @__PURE__ */ Symbol(_hs$);
-var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
-var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
-var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
-var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
-var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
-var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
-var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
-var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
-var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
-var __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "xplatlottie",
-	"propsSlot": 0
-});
-registerElement("xplatlottie", LottieView);
-var clamp01 = (n) => Math.min(1, Math.max(0, n));
-var STRETCH = {
-	contain: "aspectFit",
-	cover: "aspectFill",
-	fill: "fill"
-};
-function durationMs(v) {
-	const d = v.duration ?? 0;
-	return isAndroid ? d : Math.max(0, d) * 1e3;
-}
-function currentProgress(v) {
-	const nv = v.nativeViewProtected;
-	return isAndroid ? nv?.getProgress?.() ?? 0 : nv?.currentProgress ?? 0;
-}
-function stopView(v) {
-	if (isAndroid) v.cancelAnimation();
-	else v.nativeViewProtected?.stop();
-	v.progress = 0;
-}
-var Lottie = defineUniversalComponent("nativescript", function Lottie(props) {
-	const host = useRef(null, _h$0);
-	const appliedSrc = useRef(void 0, _h$1);
-	const loadedRef = useRef(false, _h$2);
-	useImperativeHandle(props.ref, () => handle(host.current), [], _h$3);
-	const bindHost = useCallback((v) => {
-		host.current = v;
-	}, [], _h$4);
-	const wantPlay = () => props.playing ?? props.autoPlay ?? true;
-	const onReady = () => {
-		const v = host.current;
-		if (!v || loadedRef.current) return;
-		loadedRef.current = true;
-		if (props.speed !== void 0) v.speed = props.speed;
-		if (props.progress !== void 0) v.progress = clamp01(props.progress);
-		props.onLoaded?.({ duration: durationMs(v) });
-		if (wantPlay() && !v.isAnimating()) v.playAnimation();
-	};
-	useEffect(() => {
-		const v = host.current;
-		if (!v) return;
-		applyEscapeProps(v, props);
-		v.stretch = STRETCH[props.fit ?? "contain"];
-		v.async = true;
-		v.on(LottieView.compositionLoadedEvent, () => onReady());
-		v.on(LottieView.loadFailedEvent, (e) => {
-			loadedRef.current = false;
-			props.onError?.({ message: e?.error ? String(e.error) : "load failed" });
-		});
-		v.completionBlock = (finished) => {
-			if (finished) props.onEnded?.();
-		};
-	}, [], _h$5);
-	useEffect(() => {
-		const v = host.current;
-		if (!v) return;
-		const src = props.data ? JSON.stringify(props.data) : props.src;
-		if (src === appliedSrc.current) return;
-		appliedSrc.current = src;
-		loadedRef.current = false;
-		v.src = src ?? "";
-	}, [props.src, props.data], _h$6);
-	useEffect(() => {
-		const v = host.current;
-		if (!v || props.playing === void 0) return;
-		if (props.playing) {
-			if (loadedRef.current) v.resumeAnimation();
-		} else v.pauseAnimation();
-	}, [props.playing], _h$7);
-	useEffect(() => {
-		const v = host.current;
-		if (!v || props.progress === void 0 || !loadedRef.current) return;
-		v.progress = clamp01(props.progress);
-	}, [props.progress], _h$8);
-	useEffect(() => {
-		const v = host.current;
-		if (!v || props.speed === void 0 || !loadedRef.current) return;
-		v.speed = props.speed;
-	}, [props.speed], _h$9);
-	const handle = (v) => ({
-		play: () => v.resumeAnimation(),
-		pause: () => v.pauseAnimation(),
-		stop: () => stopView(v),
-		seekTo: (p) => {
-			v.progress = clamp01(p);
-		},
-		setSpeed: (n) => {
-			v.speed = n;
-		},
-		progress: () => currentProgress(v),
-		duration: () => durationMs(v),
-		isPlaying: () => v.isAnimating(),
-		native: v
-	});
-	return universalValue(__octaneUniversalPlan0, [universalProps([
-		[
-			"set",
-			"ref",
-			bindHost
-		],
-		[
-			"set",
-			"id",
-			props.id
-		],
-		[
-			"set",
-			"className",
-			cx(props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		["spread", layoutChildProps(props)],
-		[
-			"set",
-			"loop",
-			props.loop ?? false
-		],
-		[
-			"set",
-			"accessible",
-			props.accessible
-		],
-		[
-			"set",
-			"accessibilityLabel",
-			props.accessibilityLabel
-		],
-		[
-			"set",
-			"accessibilityRole",
-			nativeAccessibilityRole(props.accessibilityRole)
-		],
-		[
-			"set",
-			"accessibilityHint",
-			props.accessibilityHint
-		],
-		[
-			"set",
-			"accessibilityValue",
-			props.accessibilityValue
-		],
-		[
-			"set",
-			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
-		],
-		[
-			"set",
-			"accessibilityLiveRegion",
-			props.accessibilityLiveRegion
-		]
-	])]);
-}, { "module": "@nativescript-community/octane" });
-//#endregion
-export { Lottie };

package/dist/native/layout-child.js

@@ -1,38 +0,0 @@
-//#region src/layout-child.ts
-var FLEX_JUSTIFY = {
-	start: "flex-start",
-	end: "flex-end"
-};
-var FLEX_ALIGN = {
-	start: "flex-start",
-	end: "flex-end"
-};
-/** NativeScript reads these attributes from each child view during parent
-*  layout. Values are forwarded with NativeScript's own property names.
-*  The flex-container props (justifyContent/alignItems/flexWrap/gap) land on
-*  the host flexboxlayout itself — its own attributes, not child metadata. */
-function layoutChildProps(props) {
-	const result = {};
-	for (const key of [
-		"row",
-		"col",
-		"rowSpan",
-		"colSpan",
-		"dock",
-		"left",
-		"top",
-		"flexGrow",
-		"flexShrink",
-		"alignSelf",
-		"order"
-	]) if (props[key] !== void 0) result[key] = props[key];
-	if (props.justifyContent !== void 0) result.justifyContent = FLEX_JUSTIFY[props.justifyContent] ?? props.justifyContent;
-	if (props.alignItems !== void 0) result.alignItems = FLEX_ALIGN[props.alignItems] ?? props.alignItems;
-	if (props.flexWrap !== void 0) result.flexWrap = props.flexWrap === true ? "wrap" : props.flexWrap === false ? "nowrap" : props.flexWrap;
-	if (props.gap !== void 0) result.gap = props.gap;
-	if (props.rowGap !== void 0) result.rowGap = props.rowGap;
-	if (props.columnGap !== void 0) result.columnGap = props.columnGap;
-	return result;
-}
-//#endregion
-export { layoutChildProps };

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

@@ -1,8 +0,0 @@
-{
-  "version": 1,
-  "buildId": "3863aee3-5a2b-45b2-a363-8daf287f1e5f",
-  "mode": "production",
-  "capabilities": {
-    "independentHydration": false
-  }
-}