@octane-xplat/pager 0.14.0 → 0.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octane-xplat/pager",
-  "version": "0.14.0",
+  "version": "0.15.0",
   "description": "Paged swipe container for Octane xplat — web scroll-snap row + @nativescript-community/ui-pager (ViewPager2 / paging UICollectionView)",
   "keywords": [
     "android",
@@ -24,9 +24,10 @@
     "directory": "packages/pager"
   },
   "files": [
-    "dist",
     "types",
-    "src"
+    "src",
+    "!src/**/*.test.*",
+    "!src/**/*.spec.*"
   ],
   "type": "module",
   "exports": {
@@ -36,9 +37,9 @@
         "default": "./src/index.macos.ts"
       },
       "types": "./types/index.d.ts",
-      "web": "./dist/web/index.js",
-      "native": "./dist/native/index.js",
-      "default": "./dist/native/index.js"
+      "web": "./src/index.web.ts",
+      "native": "./src/index.ts",
+      "default": "./src/index.ts"
     }
   },
   "publishConfig": {
@@ -48,17 +49,20 @@
     "@nativescript-community/ui-pager": "14.1.42"
   },
   "devDependencies": {
-    "@nativescript-community/octane": "0.2.4",
+    "@nativescript-community/octane": "0.2.5",
     "@nativescript/core": "9.1.3",
+    "@octane-xplat/macos-renderer": "0.15.0",
+    "@octane-xplat/ui": "0.15.0",
     "@octanejs/vite-plugin": "0.1.61",
     "octane": "0.11.0",
-    "tsrx-typegen": "0.2.2",
+    "tsrx-typegen": "0.3.0",
     "typescript": "5.9.3",
     "vite": "8.3.0"
   },
   "peerDependencies": {
     "@nativescript-community/octane": ">=0.2.1 <1",
     "@nativescript/core": ">=9.1.0 <10",
+    "@octane-xplat/ui": ">=0.6.0 <1",
     "octane": ">=0.6.3 <1"
   },
   "peerDependenciesMeta": {
@@ -70,7 +74,7 @@
     }
   },
   "scripts": {
-    "build": "vite build && vite build --mode native && pnpm typegen && node ../../scripts/check-native-dist.mjs",
+    "test:native": "vitest run --config vitest.native.config.mts",
     "typegen": "tsc -p tsconfig.types.json",
     "test:packed": "node tests/packed-consumer.mjs",
     "pack:check": "tsrx-typegen --pack-check"

package/src/Pager.parity.check.ts

@@ -0,0 +1,19 @@
+import type { ParityCheck } from '@octane-xplat/ui/parity/check-helpers'
+import { dims } from '@octane-xplat/ui/parity/check-helpers'
+
+export const CHECKS: ParityCheck[] = [
+
+	{
+		fixture: 'pager-two-pages',
+		targets: ['web', 'ios', 'android'],
+		elements: { pager: 'parity-pager-root', page: 'parity-pager-page' },
+		equal: [
+			'pager.box.w',
+			'pager.box.h',
+			'pager.style.backgroundColor',
+			'page.box.w',
+			'page.box.h',
+		],
+		check: (m) => [dims(m('pager'), 220, 96), dims(m('page'), 220, 96)],
+	}
+]

package/src/Pager.parity.tsrx

@@ -0,0 +1,19 @@
+// Measured parity fixtures — assertions live in Pager.parity.check.ts.
+import { Pager } from './Pager'
+import { View } from '@octane-xplat/ui'
+import type { ParityFixture } from '@octane-xplat/ui/parity'
+
+function PagerFixture() @{
+	<Pager
+		className="parity-pager-root"
+		style={{ width: 220, height: 96, backgroundColor: '#f5f5f5' }}
+		items={[{ key: 'first' }, { key: 'second' }]}
+		renderItem={() => (
+			<View className="parity-pager-page" style={{ width: 220, height: 96 }} />
+		)}
+	/>
+}
+
+export const PARITY: ParityFixture[] = [
+	{ name: 'pager-two-pages', component: 'Pager', renderer: PagerFixture, props: {} },
+]

package/src/Pager.tsrx

@@ -1,18 +1,14 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { memo, useCallback, useEffect, useRef } from 'octane';
+import { memo, useCallback, useEffect, useRef, useState } from 'octane';
 import {
-	NATIVESCRIPT_RENDERER_ID,
-	createNativeScriptRoot,
-	defineUniversalComponent,
 	registerElement,
 } from '@nativescript-community/octane';
 
 import type { Attributes } from '@nativescript-community/octane/intrinsics';
-import type { UniversalRoot } from '@nativescript-community/octane';
+import { createPortal as createUniversalPortal, type UniversalRenderable } from 'octane/universal/native';
 import { Pager as NSPager } from '@nativescript-community/ui-pager';
 import { GridLayout } from '@nativescript/core';
 import type { PagerProps } from './props';
-import { cx } from './cx.mobile';
 import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from './escape-props.mobile';
 import { layoutChildProps } from './layout-child';
 
@@ -28,12 +24,14 @@ declare module '@nativescript-community/octane/intrinsics' {
 // the /ns/m dev bridge to resolve it under the app root.
 registerElement('pager', NSPager);
 
-/** One recycled page: the host view the plugin's adapter asks for plus the
- *  Octane root mounted into it. Mirrors the driver's ListView cell seam —
- *  ui-pager fires the same `itemLoading`/`itemDisposing` pair. */
+function createPortal(children: unknown, target: unknown) {
+	return createUniversalPortal(children as UniversalRenderable, target);
+}
+
+/** One recycled page: the adapter-owned host plus the current render data.
+	 *  Its content is a portal from Pager's declaring tree. */
 interface PagerCell {
 	host: any;
-	root: UniversalRoot;
 	pager: any;
 	renderItem: any;
 	item: any;
@@ -43,17 +41,10 @@ interface PagerCell {
 const cellsByHost = new WeakMap<object, PagerCell>();
 const cellsByPager = new WeakMap<object, Set<PagerCell>>();
 
-/** Every page root renders this one component, so rebinds are diffs of the
- *  cell's tree rather than remounts. The renderItem output wraps in a
- *  gridlayout — page content must stay single-root. */
-const PagerCell = defineUniversalComponent(NATIVESCRIPT_RENDERER_ID, (props: any) =>
-	props.renderItem(props.item, props.index),
-);
-
 function cellFor(host: any): PagerCell {
 	let cell = cellsByHost.get(host);
 	if (!cell) {
-		cell = { host, root: createNativeScriptRoot(host), pager: null, renderItem: null, item: undefined, index: -1 };
+		cell = { host, pager: null, renderItem: null, item: undefined, index: -1 };
 		cellsByHost.set(host, cell);
 	}
 
@@ -80,7 +71,6 @@ function releasePagerCells(pager: any) {
 	if (!cells) return;
 	for (const cell of cells) {
 		cellsByHost.delete(cell.host);
-		cell.root.unmount();
 	}
 
 	cellsByPager.delete(pager);
@@ -88,10 +78,12 @@ function releasePagerCells(pager: any) {
 
 function PagerInner(props: PagerProps) @{
 	const host = useRef<any>(null);
-	// selectedIndex writes the leaf makes itself — the plugin raises
+	const [portalCells, setPortalCells] = useState<PagerCell[]>([]);
+	// Track selectedIndex writes across synchronous and delayed echoes.
+	// The plugin raises
 	// 'selectedIndexChange' for script writes exactly as for swipes, and
 	// the driver's auto-mute only covers JSX prop writes, not ours.
-	const suppressEcho = useRef(false);
+	const current = useRef(props.page ?? props.defaultPage ?? 0);
 	const pageSeeded = useRef(false);
 
 	// Stable ref identity — an inline closure re-fires ref(null)/ref(v) per
@@ -118,10 +110,9 @@ function PagerInner(props: PagerProps) @{
 		cell.renderItem = props.renderItem;
 		cell.item = item;
 		cell.index = args.index;
-		cell.root.render(PagerCell, {
-			renderItem: (it: any, i: number) => <gridlayout>{props.renderItem(it, i)}</gridlayout>,
-			item,
-			index: args.index,
+		setPortalCells((current) => {
+			const existing = current.some((entry) => entry === cell);
+			return existing ? [...current] : [...current, cell];
 		});
 	};
 
@@ -130,7 +121,7 @@ function PagerInner(props: PagerProps) @{
 		if (cell) {
 			cellsByHost.delete(args.view);
 			if (cell.pager) cellsByPager.get(cell.pager)?.delete(cell);
-			cell.root.unmount();
+			setPortalCells((current) => current.filter((entry) => entry !== cell));
 		}
 	};
 
@@ -156,27 +147,28 @@ function PagerInner(props: PagerProps) @{
 		if (pager.items !== props.items) pager.items = props.items;
 		const target = props.page ?? (pageSeeded.current ? undefined : props.defaultPage);
 		if (target !== undefined && pager.selectedIndex !== target) {
-			suppressEcho.current = true;
-			try {
-				pager.selectedIndex = target;
-			} finally {
-				suppressEcho.current = false;
-			}
+			// Track the coerced target before writing: Android may echo later.
+			current.current = Math.max(0, Math.min(props.items.length - 1, target));
+			pager.selectedIndex = target;
 		}
 
 		pageSeeded.current = true;
 	});
 
+	<>
 	<pager
 		ref={bindHost}
 		id={props.id}
 		{...layoutChildProps(props)}
-		className={cx('vx-pager', props.className)}
+		className={['vx-pager', props.className]}
 		style={props.style}
 		onItemLoading={bindCell}
 		onItemDisposing={disposeCell}
 		onSelectedIndexChange={(args: any) => {
-			if (!suppressEcho.current) props.onPageChange?.(args.value);
+			if (args.value !== current.current) {
+				current.current = args.value;
+				props.onPageChange?.(args.value);
+			}
 		}}
 		accessibilityRole={nativeAccessibilityRole(props.accessibilityRole) as any}
 		accessibilityLabel={props.accessibilityLabel}
@@ -186,6 +178,13 @@ function PagerInner(props: PagerProps) @{
 		accessible={props.accessible}
 		accessibilityLiveRegion={props.accessibilityLiveRegion as any}
 	/>
+	{portalCells.map((cell) =>
+		createPortal(
+			<gridlayout>{cell.renderItem?.(cell.item, cell.index)}</gridlayout>,
+			cell.host,
+		),
+	)}
+	</>
 }
 
 // The pager subtree is memoized on `items` and configuration: the universal
@@ -202,17 +201,42 @@ const MemoPager = memo(PagerInner, (a, b) =>
 	a.page === b.page &&
 	a.onPageChange === b.onPageChange &&
 	a.ios === b.ios &&
-	a.android === b.android
+	a.android === b.android &&
+	a.row === b.row &&
+	a.col === b.col &&
+	a.rowSpan === b.rowSpan &&
+	a.colSpan === b.colSpan &&
+	a.dock === b.dock &&
+	a.left === b.left &&
+	a.top === b.top &&
+	a.flexGrow === b.flexGrow &&
+	a.flexShrink === b.flexShrink &&
+	a.alignSelf === b.alignSelf &&
+	a.order === b.order &&
+	a.accessible === b.accessible &&
+	a.accessibilityRole === b.accessibilityRole &&
+	a.accessibilityLabel === b.accessibilityLabel &&
+	a.accessibilityHint === b.accessibilityHint &&
+	a.accessibilityValue === b.accessibilityValue &&
+	a.accessibilityState === b.accessibilityState &&
+	a.accessibilityLiveRegion === b.accessibilityLiveRegion
 );
 
 /** Pager — paged horizontal swiping via @nativescript-community/ui-pager
  *  (ViewPager2 / paging UICollectionView), chrome-reset: one full-size cell
  *  per item, no indicator. Pages recycle through `itemTemplates` +
- *  `itemLoading`, each slot hosting its own Octane root — the same cell
- *  machinery the driver builds for `listview`, hand-wired here. */
+ *  `itemLoading`; active cell hosts are portals from the Pager's declaring
+ *  tree, so provider context follows each cell. */
 export function Pager(props: PagerProps) @{
 	@if (props.items.length > 0) {
 		<MemoPager
+			accessible={props.accessible}
+			accessibilityRole={props.accessibilityRole}
+			accessibilityLabel={props.accessibilityLabel}
+			accessibilityHint={props.accessibilityHint}
+			accessibilityValue={props.accessibilityValue}
+			accessibilityState={props.accessibilityState}
+			accessibilityLiveRegion={props.accessibilityLiveRegion}
 			id={props.id}
 			className={props.className}
 			style={props.style}

package/src/Pager.web.tsrx

@@ -17,6 +17,7 @@ export function Pager(props: PagerProps) @{
 	// updated by controlled writes and settled swipes. A scroll that lands
 	// on `current` is programmatic — the settle never reports it.
 	const current = useRef(props.page ?? props.defaultPage ?? 0);
+	const hasItems = props.items.length > 0;
 	const settle = useRef<ReturnType<typeof setTimeout> | null>(null);
 
 	useEffect(() => {
@@ -45,17 +46,19 @@ export function Pager(props: PagerProps) @{
 		return () => {
 			el.removeEventListener('scroll', onScroll);
 			if (settle.current !== null) clearTimeout(settle.current);
+			settle.current = null;
 		};
-	}, []);
+	}, [hasItems]);
 
-	// Mount: jump (no animation) to the starting page — an initial position
+	// Each new host: jump (no animation) to the starting page — an initial position
 	// is not a scroll. Runs after the scroll listener attaches so the write
 	// still flows through the tracked-index path.
 	useEffect(() => {
 		const el = host.current;
-		if (!el || current.current <= 0) return;
+		if (!el) return;
+		current.current = props.page ?? current.current;
 		el.scrollLeft = current.current * el.clientWidth;
-	}, []);
+	}, [hasItems]);
 
 	// Controlled writes scroll smoothly. Skipped when the page already
 	// matches `current` — a user swipe that the parent echoes back unchanged

package/dist/native/Pager.tsrx.js

@@ -1,282 +0,0 @@
-import { cx } from "./cx.mobile.js";
-import { applyEscapeProps, nativeAccessibilityRole, nativeAccessibilityState } from "./escape-props.mobile.js";
-import { layoutChildProps } from "./layout-child.js";
-import { __methodDep } from "octane/universal/native";
-import { NATIVESCRIPT_RENDERER_ID, createNativeScriptRoot, defineUniversalComponent, hookSlots, memo, registerElement, universalComponent, universalIf, universalPlan, universalProps, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
-import { Pager } from "@nativescript-community/ui-pager";
-import { GridLayout } from "@nativescript/core";
-//#region src/Pager.tsrx
-var _hs$ = /* @__PURE__ */ hookSlots(6);
-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 __octaneUniversalPlan0 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "gridlayout",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan1 = universalPlan("nativescript", {
-	"kind": "host",
-	"type": "pager",
-	"propsSlot": 0
-});
-var __octaneUniversalPlan2 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-var __octaneUniversalPlan3 = universalPlan("nativescript", {
-	"kind": "range",
-	"children": [{
-		"kind": "slot",
-		"slot": 0
-	}]
-});
-var __octaneUniversalPlan4 = universalPlan("nativescript", {
-	"kind": "slot",
-	"slot": 0
-});
-registerElement("pager", Pager);
-var cellsByHost = /* @__PURE__ */ new WeakMap();
-var cellsByPager = /* @__PURE__ */ new WeakMap();
-var PagerCell = defineUniversalComponent(NATIVESCRIPT_RENDERER_ID, (props) => props.renderItem(props.item, props.index));
-function cellFor(host) {
-	let cell = cellsByHost.get(host);
-	if (!cell) {
-		cell = {
-			host,
-			root: createNativeScriptRoot(host),
-			pager: null,
-			renderItem: null,
-			item: void 0,
-			index: -1
-		};
-		cellsByHost.set(host, cell);
-	}
-	return cell;
-}
-function createPageHost() {
-	const host = new GridLayout();
-	cellFor(host);
-	return host;
-}
-var PAGER_TEMPLATES = [{
-	key: "xplat-page",
-	createView: createPageHost
-}];
-var selectPageTemplate = () => "xplat-page";
-function releasePagerCells(pager) {
-	const cells = cellsByPager.get(pager);
-	if (!cells) return;
-	for (const cell of cells) {
-		cellsByHost.delete(cell.host);
-		cell.root.unmount();
-	}
-	cellsByPager.delete(pager);
-}
-var PagerInner = defineUniversalComponent("nativescript", function PagerInner(props) {
-	const host = useRef(null, _h$0);
-	const suppressEcho = useRef(false, _h$1);
-	const pageSeeded = useRef(false, _h$2);
-	const bindHost = useCallback((v) => {
-		host.current = v;
-	}, [], _h$3);
-	const bindCell = (args) => {
-		const cell = cellFor(args.view);
-		cell.pager = args.object;
-		let owned = cellsByPager.get(cell.pager);
-		if (!owned) {
-			owned = /* @__PURE__ */ new Set();
-			cellsByPager.set(cell.pager, owned);
-		}
-		owned.add(cell);
-		const item = args.bindingContext ?? props.items?.[args.index];
-		if (cell.renderItem === props.renderItem && cell.index === args.index && Object.is(cell.item, item)) return;
-		cell.renderItem = props.renderItem;
-		cell.item = item;
-		cell.index = args.index;
-		cell.root.render(PagerCell, {
-			renderItem: (it, i) => universalValue(__octaneUniversalPlan0, [props.renderItem(it, i)]),
-			item,
-			index: args.index
-		});
-	};
-	const disposeCell = (args) => {
-		const cell = args.view && cellsByHost.get(args.view);
-		if (cell) {
-			cellsByHost.delete(args.view);
-			if (cell.pager) cellsByPager.get(cell.pager)?.delete(cell);
-			cell.root.unmount();
-		}
-	};
-	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		pager.itemTemplates = PAGER_TEMPLATES;
-		pager.itemTemplateSelector = selectPageTemplate;
-		return () => releasePagerCells(pager);
-	}, [], _h$4);
-	useEffect(() => {
-		const pager = host.current;
-		if (!pager) return;
-		applyEscapeProps(pager, props);
-		if (pager.items !== props.items) pager.items = props.items;
-		const target = props.page ?? (pageSeeded.current ? void 0 : props.defaultPage);
-		if (target !== void 0 && pager.selectedIndex !== target) {
-			suppressEcho.current = true;
-			try {
-				pager.selectedIndex = target;
-			} finally {
-				suppressEcho.current = false;
-			}
-		}
-		pageSeeded.current = true;
-	}, [
-		props,
-		__methodDep(props, "items", true, true),
-		__methodDep(props, "page", true, true),
-		__methodDep(props, "defaultPage", true, true)
-	], _h$5);
-	return universalValue(__octaneUniversalPlan1, [universalProps([
-		[
-			"set",
-			"ref",
-			bindHost
-		],
-		[
-			"set",
-			"id",
-			props.id
-		],
-		["spread", layoutChildProps(props)],
-		[
-			"set",
-			"className",
-			cx("vx-pager", props.className)
-		],
-		[
-			"set",
-			"style",
-			props.style
-		],
-		[
-			"set",
-			"onItemLoading",
-			bindCell
-		],
-		[
-			"set",
-			"onItemDisposing",
-			disposeCell
-		],
-		[
-			"set",
-			"onSelectedIndexChange",
-			(args) => {
-				if (!suppressEcho.current) props.onPageChange?.(args.value);
-			}
-		],
-		[
-			"set",
-			"accessibilityRole",
-			nativeAccessibilityRole(props.accessibilityRole)
-		],
-		[
-			"set",
-			"accessibilityLabel",
-			props.accessibilityLabel
-		],
-		[
-			"set",
-			"accessibilityHint",
-			props.accessibilityHint
-		],
-		[
-			"set",
-			"accessibilityValue",
-			props.accessibilityValue
-		],
-		[
-			"set",
-			"accessibilityState",
-			nativeAccessibilityState(props.accessibilityState)
-		],
-		[
-			"set",
-			"accessible",
-			props.accessible
-		],
-		[
-			"set",
-			"accessibilityLiveRegion",
-			props.accessibilityLiveRegion
-		]
-	])]);
-}, { "module": "@nativescript-community/octane" });
-var MemoPager = memo(PagerInner, (a, b) => a.items === b.items && a.className === b.className && a.style === b.style && a.id === b.id && a.page === b.page && a.onPageChange === b.onPageChange && a.ios === b.ios && a.android === b.android);
-var Pager$1 = defineUniversalComponent("nativescript", function Pager(props) {
-	return universalValue(__octaneUniversalPlan4, [universalIf(props.items.length > 0, () => {
-		return universalValue(__octaneUniversalPlan2, [universalComponent("nativescript", MemoPager, universalProps([
-			[
-				"set",
-				"id",
-				props.id
-			],
-			[
-				"set",
-				"className",
-				props.className
-			],
-			[
-				"set",
-				"style",
-				props.style
-			],
-			[
-				"set",
-				"items",
-				props.items
-			],
-			[
-				"set",
-				"renderItem",
-				props.renderItem
-			],
-			[
-				"set",
-				"page",
-				props.page
-			],
-			[
-				"set",
-				"defaultPage",
-				props.defaultPage
-			],
-			[
-				"set",
-				"onPageChange",
-				props.onPageChange
-			],
-			[
-				"set",
-				"ios",
-				props.ios
-			],
-			[
-				"set",
-				"android",
-				props.android
-			],
-			["spread", layoutChildProps(props)]
-		]))]);
-	}, () => {
-		return universalValue(__octaneUniversalPlan3, [props.renderEmpty?.()]);
-	})]);
-}, { "module": "@nativescript-community/octane" });
-//#endregion
-export { Pager$1 as Pager };

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.mobile.js

@@ -1,39 +0,0 @@
-import { isAndroid, isIOS } from "@nativescript/core";
-//#region src/escape-props.mobile.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,2 +0,0 @@
-import { Pager } from "./Pager.tsrx.js";
-export { Pager };

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": "53f3070f-3c61-4426-97a9-b21bdbd7a163",
-  "mode": "production",
-  "capabilities": {
-    "independentHydration": false
-  }
-}

package/dist/web/Pager.web.tsrx.js

@@ -1,334 +0,0 @@
-import { applyWebProps } from "./platformProps.web.js";
-import { layoutChildProps } from "./layout-child.web.js";
-import { bag4, bagOf, child, clone, drainFrag, forBlock, hookSlots, ifBlock, markDangerouslySetInnerHTMLChildren, snapshotSpread, template, useEffect, useRef } from "octane";
-import { bindSignalChild, bindSignalHostPropSources, enableSignalBindings, setAriaAttributeIfChanged } from "octane/internal/client";
-//#region src/Pager.web.tsrx
-enableSignalBindings(1, true);
-var _t$0 = /* @__PURE__ */ template("<div class=\"vx-pager-page\" role=\"group\" aria-roledescription=\"slide\"></div>");
-var _t$1 = /* @__PURE__ */ template("<div><!></div>");
-var _t$2 = /* @__PURE__ */ template("<!>", 0, 1);
-var _hs$ = /* @__PURE__ */ hookSlots(8);
-var _key$1 = (item, i) => i;
-function __item$2(item, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[0];
-	const i = __block.itemIndex;
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		const _root = clone(_t$0);
-		_b = bag4(__s, _root, void 0, _root, null, __s);
-	}
-	_b.a = setAriaAttributeIfChanged(`${i + 1} of ${props.items.length}`, _b.a, _b.b, "aria-label");
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.b, props.renderItem(item, i), "b:a193c343", null, void 0, void 0, void 0, true);
-}
-var _rm$5 = [
-	"s",
-	"p",
-	"o"
-];
-function __then$0(__props, __s, __extra) {
-	const host = __extra[0];
-	const props = __extra[1];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1, _m2, _m3, _m4, _m5, _m6, _m7, _m8, _m9, _m10, _m11, _m12, _m13, _m15, _m16;
-		const _root = clone(_t$1);
-		_m0 = (el) => {
-			host.current = el;
-			applyWebProps(el, props.web);
-		};
-		_m1 = props.id;
-		_m2 = ["vx-pager", props.className];
-		_m3 = snapshotSpread(layoutChildProps(props));
-		_m4 = props.accessibilityRole ?? "group";
-		_m5 = "carousel";
-		_m6 = props.accessibilityLabel;
-		_m7 = props.accessible === false ? true : void 0;
-		_m8 = props.accessibilityHint;
-		_m9 = props.accessibilityValue;
-		_m10 = props.accessibilityState?.disabled;
-		_m11 = props.accessibilityState?.selected;
-		_m12 = props.accessibilityState?.checked;
-		_m13 = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
-		_m15 = bindSignalHostPropSources(__s, void 0, _root, [
-			[
-				false,
-				"ref",
-				_m0
-			],
-			[
-				false,
-				"id",
-				_m1
-			],
-			[
-				false,
-				"className",
-				_m2
-			],
-			[true, _m3],
-			[
-				false,
-				"role",
-				_m4
-			],
-			[
-				false,
-				"aria-roledescription",
-				_m5
-			],
-			[
-				false,
-				"aria-label",
-				_m6
-			],
-			[
-				false,
-				"aria-hidden",
-				_m7
-			],
-			[
-				false,
-				"aria-description",
-				_m8
-			],
-			[
-				false,
-				"aria-valuetext",
-				_m9
-			],
-			[
-				false,
-				"aria-disabled",
-				_m10
-			],
-			[
-				false,
-				"aria-selected",
-				_m11
-			],
-			[
-				false,
-				"aria-checked",
-				_m12
-			],
-			[
-				false,
-				"aria-live",
-				_m13
-			]
-		], "b:452923c1", true);
-		markDangerouslySetInnerHTMLChildren(_root);
-		_m16 = child(_root);
-		_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: _root,
-			p: _m15,
-			q: _m16
-		});
-		__s.refFields = _rm$5;
-	} else {
-		{
-			const _v = (el) => {
-				host.current = el;
-				applyWebProps(el, props.web);
-			};
-			if (_b.a !== _v) _b.a = _v;
-		}
-		{
-			const _v = props.id;
-			if (_b.b !== _v) _b.b = _v;
-		}
-		{
-			const _v = ["vx-pager", props.className];
-			if (_b.c !== _v) _b.c = _v;
-		}
-		_b.d = snapshotSpread(layoutChildProps(props));
-		{
-			const _v = props.accessibilityRole ?? "group";
-			if (_b.e !== _v) _b.e = _v;
-		}
-		{
-			const _v = "carousel";
-			if (_b.f !== _v) _b.f = _v;
-		}
-		{
-			const _v = props.accessibilityLabel;
-			if (_b.g !== _v) _b.g = _v;
-		}
-		{
-			const _v = props.accessible === false ? true : void 0;
-			if (_b.h !== _v) _b.h = _v;
-		}
-		{
-			const _v = props.accessibilityHint;
-			if (_b.i !== _v) _b.i = _v;
-		}
-		{
-			const _v = props.accessibilityValue;
-			if (_b.j !== _v) _b.j = _v;
-		}
-		{
-			const _v = props.accessibilityState?.disabled;
-			if (_b.k !== _v) _b.k = _v;
-		}
-		{
-			const _v = props.accessibilityState?.selected;
-			if (_b.l !== _v) _b.l = _v;
-		}
-		{
-			const _v = props.accessibilityState?.checked;
-			if (_b.m !== _v) _b.m = _v;
-		}
-		{
-			const _v = props.accessibilityLiveRegion === "none" ? "off" : props.accessibilityLiveRegion;
-			if (_b.n !== _v) _b.n = _v;
-		}
-		_b.p = bindSignalHostPropSources(__s, _b.p, _b.o, [
-			[
-				false,
-				"ref",
-				_b.a
-			],
-			[
-				false,
-				"id",
-				_b.b
-			],
-			[
-				false,
-				"className",
-				_b.c
-			],
-			[true, _b.d],
-			[
-				false,
-				"role",
-				_b.e
-			],
-			[
-				false,
-				"aria-roledescription",
-				_b.f
-			],
-			[
-				false,
-				"aria-label",
-				_b.g
-			],
-			[
-				false,
-				"aria-hidden",
-				_b.h
-			],
-			[
-				false,
-				"aria-description",
-				_b.i
-			],
-			[
-				false,
-				"aria-valuetext",
-				_b.j
-			],
-			[
-				false,
-				"aria-disabled",
-				_b.k
-			],
-			[
-				false,
-				"aria-selected",
-				_b.l
-			],
-			[
-				false,
-				"aria-checked",
-				_b.m
-			],
-			[
-				false,
-				"aria-live",
-				_b.n
-			]
-		], "b:452923c1", true);
-	}
-	forBlock(__s, 1, _b.o, props.items, _key$1, __item$2, 50, [props], null, _b.q, true, "f3hircj");
-}
-function __else$6(__props, __s, __extra) {
-	const __block = __s.block;
-	const props = __extra[1];
-	let _b = __s.slots[0];
-	if (_b === void 0) {
-		let _m0, _m1;
-		const _root = clone(_t$2);
-		_m0 = __block.parentNode;
-		_m1 = child(_root);
-		drainFrag(_root, __block.parentNode, __block.endMarker);
-		_b = bag4(__s, null, _m0, _m1, null, __s);
-	}
-	_b.e = bindSignalChild(__s, _b.e, 1, _b.a, props.renderEmpty?.(), "b:8f0f2972", _b.b, true, void 0, true);
-}
-var Pager = function Pager(props, __s, __extra) {
-	const __block = __s.block;
-	const host = useRef(null, _hs$ + 0);
-	const latest = useRef(props, _hs$ + 1);
-	const current = useRef(props.page ?? props.defaultPage ?? 0, _hs$ + 2);
-	const settle = useRef(null, _hs$ + 3);
-	useEffect(() => {
-		latest.current = props;
-	}, [props], _hs$ + 4);
-	useEffect(() => {
-		const el = host.current;
-		if (!el) return;
-		const onScroll = () => {
-			if (settle.current !== null) clearTimeout(settle.current);
-			settle.current = setTimeout(() => {
-				settle.current = null;
-				const el2 = host.current;
-				if (!el2 || el2.clientWidth === 0) return;
-				const max = Math.max(latest.current.items.length - 1, 0);
-				const next = Math.max(0, Math.min(max, Math.round(el2.scrollLeft / el2.clientWidth)));
-				if (next !== current.current) {
-					current.current = next;
-					latest.current.onPageChange?.(next);
-				}
-			}, 90);
-		};
-		el.addEventListener("scroll", onScroll, { passive: true });
-		return () => {
-			el.removeEventListener("scroll", onScroll);
-			if (settle.current !== null) clearTimeout(settle.current);
-		};
-	}, [], _hs$ + 5);
-	useEffect(() => {
-		const el = host.current;
-		if (!el || current.current <= 0) return;
-		el.scrollLeft = current.current * el.clientWidth;
-	}, [], _hs$ + 6);
-	useEffect(() => {
-		const el = host.current;
-		if (!el || props.page === void 0 || props.page === current.current) return;
-		current.current = props.page;
-		el.scrollTo({
-			left: props.page * el.clientWidth,
-			behavior: "smooth"
-		});
-	}, [props.page], _hs$ + 7);
-	ifBlock(__s, 0, __block.parentNode, props.items.length > 0, __then$0, __else$6, __block.endMarker, [host, props], 2);
-};
-//#endregion
-export { Pager };

package/dist/web/index.js

@@ -1,2 +0,0 @@
-import { Pager } from "./Pager.web.tsrx.js";
-export { Pager };

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

@@ -1,47 +0,0 @@
-//#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

@@ -1,8 +0,0 @@
-{
-  "version": 1,
-  "buildId": "a4e920b0-d311-42b3-ad90-36799b27d84f",
-  "mode": "production",
-  "capabilities": {
-    "independentHydration": false
-  }
-}

package/dist/web/platformProps.web.js

@@ -1,9 +0,0 @@
-//#region src/platformProps.web.ts
-/** Apply a web escape-hatch bag after the primitive's standard props. */
-function applyWebProps(el, props) {
-	if (!el || !props) return;
-	for (const [name, value] of Object.entries(props)) if (name.includes("-")) el.setAttribute(name, String(value));
-	else el[name] = value;
-}
-//#endregion
-export { applyWebProps };

package/src/Pager.web.test.tsrx

@@ -1,83 +0,0 @@
-// @vitest-environment jsdom
-import { afterEach, describe, expect, it, vi } from 'vitest';
-import { act, createRoot } from 'octane';
-import { Pager } from './Pager.web.tsrx';
-
-// jsdom has no layout — clientWidth is always 0 — so the leaf's scroll math
-// is exercised against a stubbed page width. scrollTo is unimplemented in
-// jsdom; the stub records controlled-page writes.
-
-const items = ['a', 'b', 'c'];
-const renderItem = (item: string) => <span class="pg">{item}</span>;
-
-function mount(extra: any = {}) {
-	const el = document.createElement('div');
-	document.body.appendChild(el);
-	const root = createRoot(el);
-	act(() => root.render(<Pager items={items} renderItem={renderItem} {...extra} />));
-	const pager = el.querySelector('.vx-pager') as any;
-	Object.defineProperty(pager, 'clientWidth', { value: 100, configurable: true });
-	pager.scrollTo = vi.fn((opts: any) => {
-		pager.scrollLeft = opts.left;
-		pager.dispatchEvent(new Event('scroll'));
-	});
-
-	return { el, root, pager };
-}
-
-describe('Pager (web leaf)', () => {
-	afterEach(() => {
-		vi.useRealTimers();
-	});
-
-	it('renders one snap page per item, plus renderEmpty', () => {
-		const { el, root, pager } = mount();
-		expect(pager.className).toContain('vx-pager');
-		expect(el.querySelectorAll('.vx-pager-page')).toHaveLength(3);
-		expect(el.querySelectorAll('.pg')).toHaveLength(3);
-		root.unmount();
-		el.remove();
-	});
-
-	it('fires onPageChange once the scroll settles', () => {
-		vi.useFakeTimers();
-		const onPageChange = vi.fn();
-		const { el, root, pager } = mount({ onPageChange });
-		pager.scrollLeft = 200;
-		pager.dispatchEvent(new Event('scroll'));
-		vi.advanceTimersByTime(200);
-		expect(onPageChange).toHaveBeenCalledTimes(1);
-		expect(onPageChange).toHaveBeenCalledWith(2);
-		root.unmount();
-		el.remove();
-	});
-
-	it('suppresses the echo of its own controlled writes', () => {
-		vi.useFakeTimers();
-		const onPageChange = vi.fn();
-		const el = document.createElement('div');
-		document.body.appendChild(el);
-		const root = createRoot(el);
-		const set = { page: 0 };
-		function Host() @{
-			<Pager items={items} renderItem={renderItem} page={set.page} onPageChange={onPageChange} />;
-		}
-
-		act(() => root.render(<Host />));
-		const pager = el.querySelector('.vx-pager') as any;
-		Object.defineProperty(pager, 'clientWidth', { value: 100, configurable: true });
-		pager.scrollTo = vi.fn((opts: any) => {
-			pager.scrollLeft = opts.left;
-			pager.dispatchEvent(new Event('scroll'));
-		});
-
-		set.page = 1;
-		act(() => root.render(<Host />));
-		expect(pager.scrollTo).toHaveBeenCalledWith({ left: 100, behavior: 'smooth' });
-		vi.advanceTimersByTime(200);
-		// The programmatic scroll must not report back as a user swipe.
-		expect(onPageChange).not.toHaveBeenCalled();
-		root.unmount();
-		el.remove();
-	});
-});

package/src/cx.mobile.ts

@@ -1,9 +0,0 @@
-/** 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.) */
-export function cx(...parts: any[]): string {
-	return parts.flat(Infinity).filter(Boolean).join(' ')
-}