@robertlinde/react-tour-kit 0.8.9 → 1.0.1

package/dist/shared/utils/get-truncated-dots.util.js

@@ -1,37 +1,37 @@
-export const MAX_VISIBLE_DOTS = 7;
-export const DOT_SIZE = 8;
-export const DOT_GAP = 6;
-export const DOTS_CONTAINER_WIDTH = MAX_VISIBLE_DOTS * DOT_SIZE + (MAX_VISIBLE_DOTS - 1) * DOT_GAP;
+const maxVisible = 7;
+const siblings = (maxVisible - 5) / 2;
+function range(from, to) {
+    return Array.from({ length: to - from + 1 }, (_, offset) => ({ type: 'dot', index: from + offset }));
+}
+/**
+ * The step indicator for `totalSteps` steps with `currentStep` (zero-based) selected.
+ *
+ * Up to 7 steps every step gets a dot. Above that the result always has exactly 7 items, so the
+ * indicator keeps a constant width: the first and last step, the current step and its neighbours,
+ * and ellipses for the rest. An ellipsis always stands for at least two steps.
+ */
 export function getTruncatedDots(currentStep, totalSteps) {
-    if (totalSteps <= MAX_VISIBLE_DOTS) {
-        return Array.from({ length: totalSteps }, (_, i) => ({ type: 'dot', index: i }));
+    const total = Number.isFinite(totalSteps) ? Math.max(0, Math.floor(totalSteps)) : 0;
+    if (total === 0) {
+        return [];
     }
-    const dots = [];
-    const indices = new Set([0, totalSteps - 1, currentStep]);
-    for (let offset = 1; indices.size < MAX_VISIBLE_DOTS - countGaps(indices); offset++) {
-        if (currentStep - offset >= 0)
-            indices.add(currentStep - offset);
-        if (currentStep + offset < totalSteps)
-            indices.add(currentStep + offset);
-        if (offset > totalSteps)
-            break;
+    if (total <= maxVisible) {
+        return range(0, total - 1);
     }
-    const sorted = [...indices].sort((a, b) => a - b);
-    for (let i = 0; i < sorted.length; i++) {
-        if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
-            dots.push({ type: 'ellipsis' });
-        }
-        dots.push({ type: 'dot', index: sorted[i] });
+    const last = total - 1;
+    const current = Math.min(Math.max(Number.isFinite(currentStep) ? Math.floor(currentStep) : 0, 0), last);
+    if (current <= maxVisible - 3 - siblings) {
+        return [...range(0, maxVisible - 3), { type: 'ellipsis', position: 'end' }, { type: 'dot', index: last }];
     }
-    return dots;
-}
-function countGaps(indices) {
-    const sorted = [...indices].sort((a, b) => a - b);
-    let gaps = 0;
-    for (let i = 1; i < sorted.length; i++) {
-        if (sorted[i] - sorted[i - 1] > 1)
-            gaps++;
+    if (current >= total - (maxVisible - 2) + siblings) {
+        return [{ type: 'dot', index: 0 }, { type: 'ellipsis', position: 'start' }, ...range(total - (maxVisible - 2), last)];
     }
-    return gaps;
+    return [
+        { type: 'dot', index: 0 },
+        { type: 'ellipsis', position: 'start' },
+        ...range(current - siblings, current + siblings),
+        { type: 'ellipsis', position: 'end' },
+        { type: 'dot', index: last },
+    ];
 }
 //# sourceMappingURL=get-truncated-dots.util.js.map

package/dist/shared/utils/get-truncated-dots.util.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-truncated-dots.util.js","sourceRoot":"","sources":["../../../src/shared/utils/get-truncated-dots.util.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,CAAC;AAClC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,CAAC;AAC1B,MAAM,CAAC,MAAM,OAAO,GAAG,CAAC,CAAC;AACzB,MAAM,CAAC,MAAM,oBAAoB,GAAG,gBAAgB,GAAG,QAAQ,GAAG,CAAC,gBAAgB,GAAG,CAAC,CAAC,GAAG,OAAO,CAAC;AAInG,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,UAAkB;IACtE,IAAI,UAAU,IAAI,gBAAgB,EAAE,CAAC;QACnC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,UAAU,EAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAc,EAAE,KAAK,EAAE,CAAC,EAAC,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,MAAM,IAAI,GAAc,EAAE,CAAC;IAC3B,MAAM,OAAO,GAAG,IAAI,GAAG,CAAS,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC;IAIlE,KAAK,IAAI,MAAM,GAAG,CAAC,EAAE,OAAO,CAAC,IAAI,GAAG,gBAAgB,GAAG,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC;QACpF,IAAI,WAAW,GAAG,MAAM,IAAI,CAAC;YAAE,OAAO,CAAC,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QACjE,IAAI,WAAW,GAAG,MAAM,GAAG,UAAU;YAAE,OAAO,CAAC,GAAG,CAAC,WAAW,GAAG,MAAM,CAAC,CAAC;QACzE,IAAI,MAAM,GAAG,UAAU;YAAE,MAAM;IACjC,CAAC;IAGD,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAElD,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,CAAC,GAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,UAAU,EAAC,CAAC,CAAC;QAChC,CAAC;QAED,IAAI,CAAC,IAAI,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,CAAC,CAAC,EAAC,CAAC,CAAC;IAC7C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED,SAAS,SAAS,CAAC,OAAoB;IAErC,MAAM,MAAM,GAAG,CAAC,GAAG,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC;IAClD,IAAI,IAAI,GAAG,CAAC,CAAC;IACb,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACvC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;YAAE,IAAI,EAAE,CAAC;IAC5C,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}
+{"version":3,"file":"get-truncated-dots.util.js","sourceRoot":"","sources":["../../../src/shared/utils/get-truncated-dots.util.ts"],"names":[],"mappings":"AAIA,MAAM,UAAU,GAAG,CAAC,CAAC;AACrB,MAAM,QAAQ,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;AAEtC,SAAS,KAAK,CAAC,IAAY,EAAE,EAAU;IACrC,OAAO,KAAK,CAAC,IAAI,CAAC,EAAC,MAAM,EAAE,EAAE,GAAG,IAAI,GAAG,CAAC,EAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,CAAC,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,GAAG,MAAM,EAAC,CAAC,CAAC,CAAC;AACnG,CAAC;AAED;;;;;;GAMG;AACH,MAAM,UAAU,gBAAgB,CAAC,WAAmB,EAAE,UAAkB;IACtE,MAAM,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpF,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;QAChB,OAAO,EAAE,CAAC;IACZ,CAAC;IAED,IAAI,KAAK,IAAI,UAAU,EAAE,CAAC;QACxB,OAAO,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;IAC7B,CAAC;IAED,MAAM,IAAI,GAAG,KAAK,GAAG,CAAC,CAAC;IACvB,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;IACxG,IAAI,OAAO,IAAI,UAAU,GAAG,CAAC,GAAG,QAAQ,EAAE,CAAC;QACzC,OAAO,CAAC,GAAG,KAAK,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,EAAE,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAC,EAAE,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC,CAAC,CAAC;IACxG,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,GAAG,QAAQ,EAAE,CAAC;QACnD,OAAO,CAAC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC,EAAE,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAC,EAAE,GAAG,KAAK,CAAC,KAAK,GAAG,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC;IACpH,CAAC;IAED,OAAO;QACL,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAC;QACvB,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,OAAO,EAAC;QACrC,GAAG,KAAK,CAAC,OAAO,GAAG,QAAQ,EAAE,OAAO,GAAG,QAAQ,CAAC;QAChD,EAAC,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,EAAC;QACnC,EAAC,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAC;KAC3B,CAAC;AACJ,CAAC"}

package/dist/shared/utils/i18n.util.d.ts

@@ -0,0 +1,7 @@
+import type { TourI18n } from '../types/tour-i18n.type.js';
+export type ResolvedI18n = Required<TourI18n>;
+export declare const defaultI18n: ResolvedI18n;
+export declare function resolveI18n(i18n: TourI18n | undefined): ResolvedI18n;
+/** Replaces every `{name}` placeholder with its value; unknown placeholders are left as they are. */
+export declare function formatTemplate(template: string, values: Readonly<Record<string, string | number>>): string;
+//# sourceMappingURL=i18n.util.d.ts.map

package/dist/shared/utils/i18n.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.util.d.ts","sourceRoot":"","sources":["../../../src/shared/utils/i18n.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,4BAA4B,CAAC;AAEzD,MAAM,MAAM,YAAY,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC;AAE9C,eAAO,MAAM,WAAW,EAAE,YAOzB,CAAC;AAWF,wBAAgB,WAAW,CAAC,IAAI,EAAE,QAAQ,GAAG,SAAS,GAAG,YAAY,CAcpE;AAED,qGAAqG;AACrG,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC,GAAG,MAAM,CAI1G"}

package/dist/shared/utils/i18n.util.js

@@ -0,0 +1,34 @@
+export const defaultI18n = {
+    nextLabel: 'Next',
+    prevLabel: 'Back',
+    finishLabel: 'Finish',
+    stepCounterTemplate: '{current} of {total}',
+    closeAriaLabel: 'Close tour',
+    dotAriaLabelTemplate: 'Go to step {step}',
+};
+const i18nKeys = [
+    'nextLabel',
+    'prevLabel',
+    'finishLabel',
+    'stepCounterTemplate',
+    'closeAriaLabel',
+    'dotAriaLabelTemplate',
+];
+export function resolveI18n(i18n) {
+    if (!i18n) {
+        return defaultI18n;
+    }
+    const resolved = { ...defaultI18n };
+    for (const key of i18nKeys) {
+        const value = i18n[key];
+        if (typeof value === 'string') {
+            resolved[key] = value;
+        }
+    }
+    return resolved;
+}
+/** Replaces every `{name}` placeholder with its value; unknown placeholders are left as they are. */
+export function formatTemplate(template, values) {
+    return template.replaceAll(/\{(\w+)\}/gu, (match, name) => Object.hasOwn(values, name) ? String(values[name]) : match);
+}
+//# sourceMappingURL=i18n.util.js.map

package/dist/shared/utils/i18n.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.util.js","sourceRoot":"","sources":["../../../src/shared/utils/i18n.util.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,WAAW,GAAiB;IACvC,SAAS,EAAE,MAAM;IACjB,SAAS,EAAE,MAAM;IACjB,WAAW,EAAE,QAAQ;IACrB,mBAAmB,EAAE,sBAAsB;IAC3C,cAAc,EAAE,YAAY;IAC5B,oBAAoB,EAAE,mBAAmB;CAC1C,CAAC;AAEF,MAAM,QAAQ,GAAG;IACf,WAAW;IACX,WAAW;IACX,aAAa;IACb,qBAAqB;IACrB,gBAAgB;IAChB,sBAAsB;CAC0B,CAAC;AAEnD,MAAM,UAAU,WAAW,CAAC,IAA0B;IACpD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,WAAW,CAAC;IACrB,CAAC;IAED,MAAM,QAAQ,GAAG,EAAC,GAAG,WAAW,EAAC,CAAC;IAClC,KAAK,MAAM,GAAG,IAAI,QAAQ,EAAE,CAAC;QAC3B,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC;QACxB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,qGAAqG;AACrG,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,MAAiD;IAChG,OAAO,QAAQ,CAAC,UAAU,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,IAAY,EAAE,EAAE,CAChE,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAC3D,CAAC;AACJ,CAAC"}

package/dist/shared/utils/theme.util.d.ts

@@ -0,0 +1,6 @@
+import type { TourTheme } from '../types/tour-theme.type.js';
+export type ResolvedTheme = Required<TourTheme>;
+export declare const defaultTheme: ResolvedTheme;
+/** Fills in defaults for missing (or `undefined`) keys. */
+export declare function resolveTheme(theme: TourTheme | undefined): ResolvedTheme;
+//# sourceMappingURL=theme.util.d.ts.map

package/dist/shared/utils/theme.util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.util.d.ts","sourceRoot":"","sources":["../../../src/shared/utils/theme.util.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,6BAA6B,CAAC;AAE3D,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC,SAAS,CAAC,CAAC;AAEhD,eAAO,MAAM,YAAY,EAAE,aAO1B,CAAC;AAWF,2DAA2D;AAC3D,wBAAgB,YAAY,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAcxE"}

package/dist/shared/utils/theme.util.js

@@ -0,0 +1,31 @@
+export const defaultTheme = {
+    primaryColor: '#2563eb',
+    primaryTextColor: '#ffffff',
+    tooltipBackground: '#ffffff',
+    titleColor: '#111827',
+    contentColor: '#4b5563',
+    overlayColor: 'rgba(0, 0, 0, 0.5)',
+};
+const themeKeys = [
+    'primaryColor',
+    'primaryTextColor',
+    'tooltipBackground',
+    'titleColor',
+    'contentColor',
+    'overlayColor',
+];
+/** Fills in defaults for missing (or `undefined`) keys. */
+export function resolveTheme(theme) {
+    if (!theme) {
+        return defaultTheme;
+    }
+    const resolved = { ...defaultTheme };
+    for (const key of themeKeys) {
+        const value = theme[key];
+        if (typeof value === 'string' && value.length > 0) {
+            resolved[key] = value;
+        }
+    }
+    return resolved;
+}
+//# sourceMappingURL=theme.util.js.map

package/dist/shared/utils/theme.util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.util.js","sourceRoot":"","sources":["../../../src/shared/utils/theme.util.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,MAAM,YAAY,GAAkB;IACzC,YAAY,EAAE,SAAS;IACvB,gBAAgB,EAAE,SAAS;IAC3B,iBAAiB,EAAE,SAAS;IAC5B,UAAU,EAAE,SAAS;IACrB,YAAY,EAAE,SAAS;IACvB,YAAY,EAAE,oBAAoB;CACnC,CAAC;AAEF,MAAM,SAAS,GAAG;IAChB,cAAc;IACd,kBAAkB;IAClB,mBAAmB;IACnB,YAAY;IACZ,cAAc;IACd,cAAc;CACmC,CAAC;AAEpD,2DAA2D;AAC3D,MAAM,UAAU,YAAY,CAAC,KAA4B;IACvD,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,YAAY,CAAC;IACtB,CAAC;IAED,MAAM,QAAQ,GAAG,EAAC,GAAG,YAAY,EAAC,CAAC;IACnC,KAAK,MAAM,GAAG,IAAI,SAAS,EAAE,CAAC;QAC5B,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC;QACzB,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAClD,QAAQ,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;QACxB,CAAC;IACH,CAAC;IAED,OAAO,QAAQ,CAAC;AAClB,CAAC"}

package/package.json

@@ -1,56 +1,77 @@
 {
   "name": "@robertlinde/react-tour-kit",
-  "version": "0.8.9",
+  "version": "1.0.1",
   "type": "module",
-  "description": "Cross-platform guided tour library for React and React Native. Build interactive onboarding experiences with customizable tooltips, smart positioning, cross-page navigation, and async step actions. Fully themeable with TypeScript support.",
+  "description": "Guided product tours for React and React Native. Smooth, accessible, and guaranteed to stay on screen: the target is scrolled into view and the tooltip never renders out of sight.",
   "author": "Robert Linde",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/robertlinde/react-tour-kit.git"
+    "url": "git+https://github.com/robertlinde/react-tour-kit.git"
   },
   "homepage": "https://github.com/robertlinde/react-tour-kit#readme",
   "bugs": {
     "url": "https://github.com/robertlinde/react-tour-kit/issues"
   },
-  "scripts": {
-    "start:dev": "tsc --watch",
-    "build": "tsc",
-    "lint": "xo",
-    "lint:fix": "xo --fix",
-    "format": "prettier --write .",
-    "format:check": "prettier --check .",
-    "test:e2e:react": "playwright test --config=playwright/playwright.config.ts",
-    "test:e2e:react:ui": "playwright test --config=playwright/playwright.config.ts --ui",
-    "prepublishOnly": "npm run build",
-    "prepare": "husky || true"
-  },
-  "main": "./dist/react.js",
-  "module": "./dist/react.js",
-  "types": "./dist/react.d.ts",
+  "keywords": [
+    "react",
+    "react-native",
+    "expo",
+    "tour",
+    "product-tour",
+    "guided-tour",
+    "walkthrough",
+    "onboarding",
+    "spotlight",
+    "tooltip",
+    "accessibility"
+  ],
+  "sideEffects": false,
   "exports": {
     "./react": {
       "types": "./dist/react.d.ts",
-      "require": "./dist/react.js",
-      "import": "./dist/react.js"
+      "default": "./dist/react.js"
     },
     "./react-native": {
       "types": "./dist/react-native.d.ts",
-      "require": "./dist/react-native.js",
-      "import": "./dist/react-native.js"
-    }
+      "default": "./dist/react-native.js"
+    },
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src",
     "README.md",
+    "MIGRATION.md",
+    "CHANGELOG.md",
     "LICENSE"
   ],
-  "sideEffects": false,
+  "scripts": {
+    "clean": "node -e \"require('node:fs').rmSync('dist',{recursive:true,force:true})\"",
+    "build": "npm run clean && tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc -p tsconfig.json && tsc -p tsconfig.tooling.json",
+    "lint": "xo --ignore \"demos/**\"",
+    "lint:fix": "xo --fix --ignore \"demos/**\"",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
+    "test": "vitest run",
+    "test:unit": "vitest run --project unit",
+    "test:component": "vitest run --project web --project native --project jsdom",
+    "test:watch": "vitest",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
+    "check:package": "publint --strict && attw --pack . --profile esm-only",
+    "smoke:node": "node test/smoke-node.mjs",
+    "demo:web": "npm run dev --prefix demos/react",
+    "demo:ios": "npm run ios --prefix demos/react-native",
+    "demo:android": "npm run android --prefix demos/react-native",
+    "prepare": "husky || true"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "react-native": ">=0.70.0",
-    "react-native-svg": ">=13.0.0"
+    "react-native": ">=0.79.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -58,41 +79,37 @@
     },
     "react-native": {
       "optional": true
-    },
-    "react-native-svg": {
-      "optional": true
     }
   },
   "devDependencies": {
-    "@commitlint/cli": "21.2.1",
-    "@commitlint/config-conventional": "21.2.0",
-    "@estruyf/github-actions-reporter": "1.12.0",
-    "@playwright/test": "1.62.1",
-    "@types/react": "19.2.18",
-    "@types/react-dom": "19.2.4",
-    "@types/react-native": "0.73.0",
+    "@arethetypeswrong/cli": "0.18.5",
+    "@axe-core/playwright": "4.13.0",
+    "@commitlint/cli": "21.2.3",
+    "@commitlint/config-conventional": "21.2.3",
+    "@estruyf/github-actions-reporter": "1.13.0",
+    "@playwright/test": "1.64.0",
+    "@types/node": "26.6.5",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitest/browser": "5.0.3",
+    "@vitest/browser-playwright": "5.0.3",
+    "fast-check": "4.10.2",
     "husky": "9.1.7",
-    "lint-staged": "17.3.0",
-    "prettier": "3.9.6",
-    "react": "19.2.8",
-    "react-dom": "19.2.8",
-    "react-native-svg": "15.15.5",
+    "jsdom": "30.1.2",
+    "lint-staged": "17.6.0",
+    "prettier": "3.9.10",
+    "publint": "0.3.25",
+    "react": "19.3.0",
+    "react-dom": "19.3.0",
+    "react-native": "0.87.1",
+    "react-native-web": "0.21.4",
     "typescript": "6.0.3",
+    "vitest": "5.0.3",
+    "vitest-browser-react": "2.3.0",
     "xo": "2.0.2"
   },
-  "keywords": [
-    "react",
-    "react-native",
-    "tour",
-    "guided-tour",
-    "walkthrough",
-    "onboarding",
-    "tooltip",
-    "tutorial",
-    "intro",
-    "product-tour"
-  ],
-  "engines": {
-    "node": ">=20.0.0"
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
   }
 }

package/src/react-native-platform/hooks/use-tour-scroll-view.hook.ts

@@ -0,0 +1,24 @@
+import {type ComponentRef, type RefObject, useContext, useRef} from 'react';
+import type {ScrollView} from 'react-native';
+import {useIsomorphicLayoutEffect} from '../../shared/react/use-isomorphic-layout-effect.hook.js';
+import {NativeTourContext} from '../native-context.js';
+
+/**
+ * Lets the tour scroll a `ScrollView`, `FlatList` or `SectionList` so that targets inside it are
+ * brought into view. Attach the returned ref to the list, or pass the ref the list already has.
+ *
+ * @example
+ * ```tsx
+ * const listRef = useTourScrollView();
+ * return <ScrollView ref={listRef}>…</ScrollView>;
+ * ```
+ */
+export function useTourScrollView<T = ComponentRef<typeof ScrollView>>(
+  existingRef?: RefObject<T | null>,
+): RefObject<T | null> {
+  const ownRef = useRef<T | null>(null);
+  const ref = existingRef ?? ownRef;
+  const context = useContext(NativeTourContext);
+  useIsomorphicLayoutEffect(() => context?.registry.registerScrollView(ref), [context, ref]);
+  return ref;
+}

package/src/react-native-platform/hooks/use-tour-target.hook.ts

@@ -0,0 +1,30 @@
+import {type ComponentRef, type RefObject, useContext, useRef} from 'react';
+import type {View} from 'react-native';
+import {devWarn} from '../../shared/engine/report.util.js';
+import {useIsomorphicLayoutEffect} from '../../shared/react/use-isomorphic-layout-effect.hook.js';
+import {NativeTourContext} from '../native-context.js';
+
+/**
+ * Registers a view as a tour target. Attach the returned ref to the view and use `id` as the
+ * step's `target`. The ref is typed for `View` (and components that forward to it, such as
+ * `Pressable`); pass a type argument for other components.
+ *
+ * @example
+ * ```tsx
+ * const ref = useTourTarget('profile-button');
+ * return <Pressable ref={ref}>…</Pressable>;
+ * ```
+ */
+export function useTourTarget<T = ComponentRef<typeof View>>(id: string): RefObject<T | null> {
+  const ref = useRef<T | null>(null);
+  const context = useContext(NativeTourContext);
+  useIsomorphicLayoutEffect(() => {
+    if (!context) {
+      devWarn(`useTourTarget('${id}') was called outside of <TourProvider>; the target cannot be found.`);
+      return undefined;
+    }
+
+    return context.registry.registerTarget(id, ref);
+  }, [context, id]);
+  return ref;
+}

package/src/react-native-platform/host-store.ts

@@ -0,0 +1,92 @@
+import type {Size} from '../shared/geometry/geometry.type.js';
+
+type HostRecord = {
+  readonly key: number;
+  /** The provider's own host: always at the bottom of the stack, whatever the mount order. */
+  readonly root: boolean;
+  readonly getInstance: () => unknown;
+  size: Size;
+};
+
+/**
+ * The views the tour can be drawn in: the provider's own full-window layer, plus any `TourHost`
+ * mounted inside native modal screens. The most recently mounted host is used.
+ */
+export type HostStore = {
+  readonly register: (key: number, getInstance: () => unknown, root: boolean) => () => void;
+  readonly setSize: (key: number, size: Size) => void;
+  /** Key of the host the tour is drawn in. */
+  readonly activeKey: () => number | undefined;
+  /** True while the tour is drawn in the provider's own host (no `TourHost` is mounted). */
+  readonly isRootActive: () => boolean;
+  readonly activeHost: () => {readonly instance: unknown; readonly size: Size} | undefined;
+  /** Host list changes (which host is active). */
+  readonly subscribe: (listener: () => void) => () => void;
+  /** Anything that can move targets relative to the layer: host changes and sizes, keyboard. */
+  readonly subscribeLayout: (listener: () => void) => () => void;
+  readonly notifyLayout: () => void;
+};
+
+export function createHostStore(): HostStore {
+  const hosts: HostRecord[] = [];
+  const listeners = new Set<() => void>();
+  const layoutListeners = new Set<() => void>();
+  const emit = (set: Set<() => void>): void => {
+    // Snapshot: listeners may unsubscribe while being notified.
+    const snapshot = [...set];
+    for (const listener of snapshot) {
+      listener();
+    }
+  };
+
+  const store: HostStore = {
+    register(key, getInstance, root) {
+      const record: HostRecord = {key, root, getInstance, size: {width: 0, height: 0}};
+      if (root) {
+        hosts.unshift(record);
+      } else {
+        hosts.push(record);
+      }
+
+      emit(listeners);
+      emit(layoutListeners);
+      return () => {
+        const index = hosts.findIndex((host) => host.key === key);
+        if (index !== -1) {
+          hosts.splice(index, 1);
+          emit(listeners);
+          emit(layoutListeners);
+        }
+      };
+    },
+    setSize(key, size) {
+      const host = hosts.find((candidate) => candidate.key === key);
+      if (host && (host.size.width !== size.width || host.size.height !== size.height)) {
+        host.size = size;
+        emit(layoutListeners);
+      }
+    },
+    activeKey: () => hosts.at(-1)?.key,
+    isRootActive: () => hosts.at(-1)?.root ?? true,
+    activeHost() {
+      const host = hosts.at(-1);
+      return host ? {instance: host.getInstance(), size: host.size} : undefined;
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+    subscribeLayout(listener) {
+      layoutListeners.add(listener);
+      return () => {
+        layoutListeners.delete(listener);
+      };
+    },
+    notifyLayout() {
+      emit(layoutListeners);
+    },
+  };
+  return store;
+}

package/src/react-native-platform/insets.util.ts

@@ -0,0 +1,39 @@
+import {Platform, StatusBar} from 'react-native';
+import type {Insets, Size} from '../shared/geometry/geometry.type.js';
+
+/** Insets the app can pass in (for example from `useSafeAreaInsets()`); missing sides use the defaults. */
+export type TourInsets = Partial<Insets>;
+
+/**
+ * Conservative safe-area defaults for when the app does not pass `insets`: large enough that the
+ * notch, Dynamic Island, home indicator and system bars of current devices are never covered.
+ */
+export function defaultInsets(layer: Size): Insets {
+  const landscape = layer.width > layer.height;
+  if (Platform.OS === 'ios') {
+    if ((Platform as {isPad?: boolean}).isPad) {
+      return {top: 24, right: 0, bottom: 20, left: 0};
+    }
+
+    return landscape ? {top: 0, right: 62, bottom: 21, left: 62} : {top: 62, right: 0, bottom: 34, left: 0};
+  }
+
+  if (Platform.OS === 'android') {
+    const statusBar = Math.max(StatusBar.currentHeight ?? 0, 24);
+    // In landscape the camera cutout and the 3-button bar can be on either side (the device can
+    // be turned either way), and the gesture handle stays at the bottom.
+    return landscape
+      ? {top: statusBar, right: 48, bottom: 24, left: 48}
+      : {top: statusBar, right: 0, bottom: 48, left: 0};
+  }
+
+  return {top: 0, right: 0, bottom: 0, left: 0};
+}
+
+/** `keyboardOverlap`: how much of the layer the on-screen keyboard covers. */
+export function resolveInsets(provided: TourInsets | undefined, layer: Size, keyboardOverlap: number): Insets {
+  const base = provided
+    ? {top: provided.top ?? 0, right: provided.right ?? 0, bottom: provided.bottom ?? 0, left: provided.left ?? 0}
+    : defaultInsets(layer);
+  return {...base, bottom: Math.max(base.bottom, keyboardOverlap)};
+}