@symbiote-native/vue 3.2.0 → 3.4.0

package/build/modules/animated/index.d.ts

@@ -1,28 +1,37 @@
-import { AnimatedValue, AnimatedValueXY, AnimatedColor, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent } from '@symbiote-native/engine';
 import { createAnimatedComponent } from './create-animated-component';
 export { createAnimatedComponent } from './create-animated-component';
 export declare const Animated: {
-    Value: typeof AnimatedValue;
-    ValueXY: typeof AnimatedValueXY;
-    Color: typeof AnimatedColor;
+    timing: {
+        (value: import("@symbiote-native/engine").AnimatedValue, config: import("@symbiote-native/engine").ITimingConfig): import("@symbiote-native/engine").ICompositeAnimation;
+        (value: import("@symbiote-native/engine").IVectorValue, config: import("@symbiote-native/engine").IVectorTimingConfig): import("@symbiote-native/engine").ICompositeAnimation;
+    };
+    spring: {
+        (value: import("@symbiote-native/engine").AnimatedValue, config: import("@symbiote-native/engine").ISpringConfig): import("@symbiote-native/engine").ICompositeAnimation;
+        (value: import("@symbiote-native/engine").IVectorValue, config: import("@symbiote-native/engine").IVectorSpringConfig): import("@symbiote-native/engine").ICompositeAnimation;
+    };
+    decay: (_value: import("@symbiote-native/engine").AnimatedValue, _config: import("@symbiote-native/engine").IDecayConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    parallel: (animations: import("@symbiote-native/engine").ICompositeAnimation[], _config?: import("@symbiote-native/engine").IParallelConfig) => import("@symbiote-native/engine").ICompositeAnimation;
+    sequence: (animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    stagger: (_time: number, animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
+    loop: (_animation: import("@symbiote-native/engine").ICompositeAnimation) => import("@symbiote-native/engine").ICompositeAnimation;
+    delay: (_time: number) => import("@symbiote-native/engine").ICompositeAnimation;
+    Value: typeof import("@symbiote-native/engine").AnimatedValue;
+    ValueXY: typeof import("@symbiote-native/engine").AnimatedValueXY;
+    Color: typeof import("@symbiote-native/engine").AnimatedColor;
+    Interpolation: typeof import("@symbiote-native/engine").AnimatedInterpolation;
+    Node: typeof import("@symbiote-native/engine").AnimatedNode;
     Easing: import("@symbiote-native/engine").IEasing;
-    timing: typeof timing;
-    spring: typeof spring;
-    decay: typeof decay;
-    parallel: typeof parallel;
-    sequence: typeof sequence;
-    stagger: typeof stagger;
-    loop: typeof loop;
-    delay: typeof delay;
-    add: typeof add;
-    subtract: typeof subtract;
-    multiply: typeof multiply;
-    divide: typeof divide;
-    modulo: typeof modulo;
-    diffClamp: typeof diffClamp;
-    event: typeof event;
-    forkEvent: typeof forkEvent;
-    unforkEvent: typeof unforkEvent;
+    add: typeof import("@symbiote-native/engine").add;
+    subtract: typeof import("@symbiote-native/engine").subtract;
+    multiply: typeof import("@symbiote-native/engine").multiply;
+    divide: typeof import("@symbiote-native/engine").divide;
+    modulo: typeof import("@symbiote-native/engine").modulo;
+    diffClamp: typeof import("@symbiote-native/engine").diffClamp;
+    event: typeof import("@symbiote-native/engine").event;
+    attachNativeEvent: typeof import("@symbiote-native/engine").attachNativeEvent;
+    forkEvent: typeof import("@symbiote-native/engine").forkEvent;
+    unforkEvent: typeof import("@symbiote-native/engine").unforkEvent;
+    Event: typeof import("@symbiote-native/engine").AnimatedEvent;
     View: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
@@ -39,27 +48,31 @@ export declare const Animated: {
     SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;
 } | {
-    Value: typeof AnimatedValue;
-    ValueXY: typeof AnimatedValueXY;
-    Color: typeof AnimatedColor;
+    Value: typeof import("@symbiote-native/engine").AnimatedValue;
+    ValueXY: typeof import("@symbiote-native/engine").AnimatedValueXY;
+    Color: typeof import("@symbiote-native/engine").AnimatedColor;
+    Interpolation: typeof import("@symbiote-native/engine").AnimatedInterpolation;
+    Node: typeof import("@symbiote-native/engine").AnimatedNode;
     Easing: import("@symbiote-native/engine").IEasing;
-    timing: (value: AnimatedValue, config: import("@symbiote-native/engine").ITimingConfig) => import("@symbiote-native/engine").ICompositeAnimation;
-    spring: (value: AnimatedValue, config: import("@symbiote-native/engine").ISpringConfig) => import("@symbiote-native/engine").ICompositeAnimation;
-    decay: (_value: AnimatedValue, _config: import("@symbiote-native/engine").IDecayConfig) => import("@symbiote-native/engine").ICompositeAnimation;
-    parallel: (animations: import("@symbiote-native/engine").ICompositeAnimation[], _config?: import("@symbiote-native/engine").IParallelConfig) => import("@symbiote-native/engine").ICompositeAnimation;
-    sequence: (animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
-    stagger: (_time: number, animations: import("@symbiote-native/engine").ICompositeAnimation[]) => import("@symbiote-native/engine").ICompositeAnimation;
-    loop: (_animation: import("@symbiote-native/engine").ICompositeAnimation) => import("@symbiote-native/engine").ICompositeAnimation;
-    delay: (_time: number) => import("@symbiote-native/engine").ICompositeAnimation;
-    add: typeof add;
-    subtract: typeof subtract;
-    multiply: typeof multiply;
-    divide: typeof divide;
-    modulo: typeof modulo;
-    diffClamp: typeof diffClamp;
-    event: typeof event;
-    forkEvent: typeof forkEvent;
-    unforkEvent: typeof unforkEvent;
+    timing: typeof import("@symbiote-native/engine").timing;
+    spring: typeof import("@symbiote-native/engine").spring;
+    decay: typeof import("@symbiote-native/engine").decay;
+    parallel: typeof import("@symbiote-native/engine").parallel;
+    sequence: typeof import("@symbiote-native/engine").sequence;
+    stagger: typeof import("@symbiote-native/engine").stagger;
+    loop: typeof import("@symbiote-native/engine").loop;
+    delay: typeof import("@symbiote-native/engine").delay;
+    add: typeof import("@symbiote-native/engine").add;
+    subtract: typeof import("@symbiote-native/engine").subtract;
+    multiply: typeof import("@symbiote-native/engine").multiply;
+    divide: typeof import("@symbiote-native/engine").divide;
+    modulo: typeof import("@symbiote-native/engine").modulo;
+    diffClamp: typeof import("@symbiote-native/engine").diffClamp;
+    event: typeof import("@symbiote-native/engine").event;
+    attachNativeEvent: typeof import("@symbiote-native/engine").attachNativeEvent;
+    forkEvent: typeof import("@symbiote-native/engine").forkEvent;
+    unforkEvent: typeof import("@symbiote-native/engine").unforkEvent;
+    Event: typeof import("@symbiote-native/engine").AnimatedEvent;
     View: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/modules/animated/index.js

@@ -3,7 +3,7 @@
 // from @symbiote-native/engine (framework-agnostic, JS-driven), spread in verbatim. Both halves
 // meet here so `Animated.timing(new Animated.Value(0), ...).start()` works against the
 // Vue-driven engine.
-import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Platform, timing, spring, decay, parallel, sequence, stagger, loop, delay, add, subtract, multiply, divide, modulo, diffClamp, event, forkEvent, unforkEvent, } from '@symbiote-native/engine';
+import { AnimatedDrivers, AnimatedMock, Platform, } from '@symbiote-native/engine';
 import { FlatList } from '../../components/flat-list/index.js';
 import { SectionList } from '../../components/section-list/index.js';
 import { createAnimatedComponent } from './create-animated-component.js';
@@ -29,35 +29,11 @@ const AnimatedScrollView = createAnimatedComponent('scroll-view');
 // `undefined` and rendering nothing.
 let animatedFlatList;
 let animatedSectionList;
-// The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
-const liveDrivers = {
-    Value: AnimatedValue,
-    ValueXY: AnimatedValueXY,
-    Color: AnimatedColor,
-    Easing,
-    timing,
-    spring,
-    decay,
-    parallel,
-    sequence,
-    stagger,
-    loop,
-    delay,
-    add,
-    subtract,
-    multiply,
-    divide,
-    modulo,
-    diffClamp,
-    event,
-    forkEvent,
-    unforkEvent,
-};
 // RN swaps the WHOLE driver namespace for the mock when the host reports isDisableAnimations
 // (reduced motion/test env): the mock keeps the same surface but jumps each animation to its
 // final value synchronously, no frames. The animated COMPONENTS stay live in both branches; only
 // the drivers/value/operators/events half is swapped.
-const drivers = Platform.isDisableAnimations ? AnimatedMock : liveDrivers;
+const drivers = Platform.isDisableAnimations ? AnimatedMock : AnimatedDrivers;
 export const Animated = {
     View: AnimatedView,
     Text: AnimatedText,

package/build/modules/app-registry/index.d.ts

@@ -1,7 +1,7 @@
 import { type Component } from '@vue/runtime-core';
-import { type IAppParameters } from '@symbiote-native/engine';
+import { HeadlessJsTaskError, type IAppParameters } from '@symbiote-native/engine';
 export type IComponentProvider = () => Component;
 export type IWrapperComponentProvider = (appParameters: IAppParameters) => Component;
 declare const AppRegistry: import("@symbiote-native/engine").IAppRegistry<IComponentProvider, IWrapperComponentProvider>, setHostRegistrar: (registrar: import("@symbiote-native/engine").IHostRegistrar) => void;
-export { AppRegistry, setHostRegistrar };
-export type { IAppParameters, IRunnable, IHostRegistrar, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from '@symbiote-native/engine';
+export { AppRegistry, HeadlessJsTaskError, setHostRegistrar };
+export type { IAppConfig, IAppParameters, IRunnable, IHostRegistrar, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from '@symbiote-native/engine';

package/build/modules/app-registry/index.js

@@ -6,7 +6,7 @@
 // functional root (h() has no createElement-style prop/children spread of its own targets, so
 // the wrap step is a render function rather than an object merge).
 import { h, } from '@vue/runtime-core';
-import { createAppRegistry, dlog, } from '@symbiote-native/engine';
+import { createAppRegistry, dlog, HeadlessJsTaskError, } from '@symbiote-native/engine';
 import { mount } from '../../render.js';
 function runnableFor(componentProvider, getWrapperComponentProvider) {
     return appParameters => {
@@ -27,4 +27,4 @@ function runnableFor(componentProvider, getWrapperComponentProvider) {
     };
 }
 const { AppRegistry, setHostRegistrar } = createAppRegistry(runnableFor);
-export { AppRegistry, setHostRegistrar };
+export { AppRegistry, HeadlessJsTaskError, setHostRegistrar };

package/build/modules/status-bar.js

@@ -1,14 +1,13 @@
-// StatusBar, the Vue lifecycle half. The native StatusBarManager driving (applyStatusBarProps),
-// the imperative statics, and the Android bar-height constant all live in @symbiote-native/engine,
-// shared verbatim with React; Metro selects the engine's status-bar.ios.ts/.android.ts per host,
-// so platform divergence never reaches this file. Vue supplies only the declarative shape: a
-// component that renders NOTHING and re-applies the props through a watchEffect on mount + every
-// prop change, with the imperative statics attached to the component object.
-//
-// Inputs arrive as attrs (untyped) and run through normalizeVueAttrs before each is narrowed by a guard.
-import { defineComponent, watchEffect, } from '@vue/runtime-core';
-import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, isOpaqueColorValue, } from '@symbiote-native/engine';
+// Vue half of StatusBar, the props stack and statics live in the engine. It renders nothing, keeps
+// one stack entry through `watchEffect` and releases it on unmount
+import { defineComponent, onUnmounted, watchEffect, } from '@vue/runtime-core';
+import { createStatusBarEntry, statusBarImperative, statusBarCurrentHeight, isProcessableColor, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
+const TRANSITIONS = [
+    'none',
+    'fade',
+    'slide',
+];
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }
@@ -19,20 +18,19 @@ function asBarStyle(value) {
         ? value
         : undefined;
 }
-function asColorValue(value) {
-    if (typeof value === 'string')
-        return value;
-    if (isOpaqueColorValue(value))
-        return value;
-    return undefined;
+function asTransition(value) {
+    return TRANSITIONS.find(transition => transition === value);
 }
 function buildProps(attrs) {
     return {
         barStyle: asBarStyle(attrs.barStyle),
         hidden: asBoolean(attrs.hidden),
         animated: asBoolean(attrs.animated),
+        showHideTransition: asTransition(attrs.showHideTransition),
         networkActivityIndicatorVisible: asBoolean(attrs.networkActivityIndicatorVisible),
-        backgroundColor: asColorValue(attrs.backgroundColor),
+        backgroundColor: isProcessableColor(attrs.backgroundColor)
+            ? attrs.backgroundColor
+            : undefined,
         translucent: asBoolean(attrs.translucent),
     };
 }
@@ -40,21 +38,21 @@ const StatusBarComponent = defineComponent({
     name: 'StatusBar',
     inheritAttrs: false,
     setup(_props, { attrs: rawAttrs }) {
-        // watchEffect tracks rawAttrs (reactive), so reading it here re-applies on every prop change.
-        // Resolution is lazy inside the engine (a missing StatusBarManager is a no-op).
+        const entry = createStatusBarEntry();
+        // `rawAttrs` is reactive, so every prop change replaces this entry
         watchEffect(() => {
-            applyStatusBarProps(buildProps(normalizeVueAttrs(rawAttrs)));
+            entry.apply(buildProps(normalizeVueAttrs(rawAttrs)));
         });
+        // Popping restores what the stack held below this entry
+        onUnmounted(() => entry.release());
         return () => null;
     },
 });
 const StatusBarWithStatics = Object.assign(StatusBarComponent, statusBarImperative);
-// Android exposes the bar height as a native constant; undefined on iOS / when absent. Read lazily
-// (getter) so nothing touches native at import time; the Android engine impl resolves on access.
+// A getter, not a value, so nothing touches native at import time
 Object.defineProperty(StatusBarWithStatics, 'currentHeight', {
     get: statusBarCurrentHeight,
     enumerable: true,
 });
-// currentHeight is optional, so the defineProperty-added accessor doesn't need to appear on the
-// runtime object's inferred type for this assignment to hold (no cast).
+// `currentHeight` is optional, so the accessor need not appear on the inferred type (no cast)
 export const StatusBar = StatusBarWithStatics;

package/build/utils/normalize-attrs.js

@@ -9,14 +9,20 @@
 // and `data-*`. Event keys are already `onXxx` (Vue folds `@value-change` → onValueChange, no
 // dash) so they pass through untouched.
 const KEBAB_SEGMENT = /-([a-z])/g;
+// The template compiler keys a native tag's `@valueChange` as `on:valueChange`, to keep its case
+const NATIVE_EVENT_PREFIX = 'on:';
+function foldNativeEventKey(key) {
+    const name = key.slice(NATIVE_EVENT_PREFIX.length);
+    return `on${name.charAt(0).toUpperCase()}${name.slice(1)}`;
+}
 function toCamel(key) {
     return key.replace(KEBAB_SEGMENT, (_match, char) => char.toUpperCase());
 }
-// The per-KEY half, for the path that never sees a whole attrs bag: an intrinsic tag reaches the
-// renderer one patchProp call at a time, with no component in between to fold the bag. Returns the
-// key unchanged (same string identity)
-// whenever there is nothing to convert, which is every key on the hot path.
+// The per-KEY half, for an intrinsic tag: `patchProp` hands over one key with no bag to fold
+// Returns the same string when nothing converts, which is every key on the hot path
 export function normalizeVueAttrKey(key) {
+    if (key.startsWith(NATIVE_EVENT_PREFIX))
+        return foldNativeEventKey(key);
     if (!key.includes('-'))
         return key;
     if (key.startsWith('aria-') || key.startsWith('data-'))