@ng-native/components 0.0.1 → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ashley Hunter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,80 @@
 # @ng-native/components
 
-A placeholder: this version has no code. See https://ng-native.com.
+The React Native element set as Angular components: `<view>`, `<text>`, `<scroll-view>`,
+`<text-input>` and the rest, each committing as a real native view through React Native's Fabric
+renderer.
+
+Alpha: APIs may change before 1.0.
+
+## Install
+
+Most apps start from `npx create-expo-app@latest my-app --template @ng-native/template`, which
+already has this and its peers set up. Otherwise:
+
+```sh
+npm install @ng-native/components
+npm install @angular/core react-native
+```
+
+`react-native-gesture-handler` and `react-native-reanimated` are optional peers, needed only for
+gestures and Reanimated worklets.
+
+## Example
+
+```ts
+import { Component, input } from '@angular/core';
+import { View, Text } from '@ng-native/components';
+
+@Component({
+  selector: 'app-greeting',
+  imports: [View, Text],
+  template: `
+    <view>
+      <text>Hello, {{ name() }}</text>
+    </view>
+  `,
+})
+export class Greeting {
+  readonly name = input('there');
+}
+```
+
+A template that writes `<scroll-view>` needs `ScrollView` in its `imports`; without it, the element
+renders as a plain, unstyled view and logs a console warning in development.
+
+## What's in the package
+
+- `.` - `View`, `Text`, `ScrollView`, `TextInput`, `Pressable`, `Image`, `Switch`,
+  `ActivityIndicator`, `Modal`, `VirtualList`, `SafeAreaProvider`, `SafeAreaView`, and the event
+  payload types (`LayoutEvent`, `TouchEvent`, `ScrollEvent`, and more).
+- `./gestures.ts` - React Native Gesture Handler bindings.
+- `./animations.ts` - `AnimatedStyle`, `Animated` and `Easing`: React Native's graph on a device,
+  a React-free one with the same API in a browser build.
+- `./reanimated.ts` - Reanimated worklet bindings.
+
+These three are separate entry points because each reaches into React Native's own uncompiled
+source, which Node cannot parse; importing them from the main entry point would break loading this
+package under Node (tests, tooling).
+
+## Docs
+
+- [Components](https://ng-native.com/packages/components)
+- [Layout](https://ng-native.com/packages/components/layout),
+  [scroll view](https://ng-native.com/packages/components/scroll-view),
+  [keyboard-avoiding view](https://ng-native.com/packages/components/keyboard-avoiding-view),
+  [lists](https://ng-native.com/packages/components/lists),
+  [text](https://ng-native.com/packages/components/text),
+  [image](https://ng-native.com/packages/components/image),
+  [activity indicator](https://ng-native.com/packages/components/activity-indicator),
+  [text input](https://ng-native.com/packages/components/input),
+  [switch](https://ng-native.com/packages/components/switch),
+  [pressable](https://ng-native.com/packages/components/pressable),
+  [gestures](https://ng-native.com/packages/components/gestures),
+  [modal](https://ng-native.com/packages/components/modal) and
+  [animation](https://ng-native.com/packages/components/animation)
+- [Root README](https://github.com/ng-native/ng-native/blob/main/README.md) and
+  [ARCHITECTURE.md](https://github.com/ng-native/ng-native/blob/main/ARCHITECTURE.md)
+
+## License
+
+MIT

package/dist/activity-indicator.d.ts

@@ -0,0 +1,41 @@
+import { ViewBase } from './view-base.ts';
+import * as i0 from "@angular/core";
+/**
+ * A spinner. Commits as `ActivityIndicatorView` on iOS and `AndroidProgressBar` on Android.
+ *
+ * RN's wrapper gives the native view an explicit size: the native component has no intrinsic
+ * dimensions, so without one it stretches to fill whatever space its parent offers. That
+ * failure is invisible, since the spinner still draws at its natural size in the middle of the
+ * stretched box, but the box swallows gestures across its whole width.
+ */
+export declare class ActivityIndicator extends ViewBase {
+    /** `small` and `large` match RN's 20 and 36 points; a number sets both dimensions. */
+    readonly size: import("@angular/core").InputSignal<number | "small" | "large">;
+    /** Whether the spinner turns. Defaults to true. */
+    readonly animating: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    /** The spinner's colour. */
+    readonly color: import("@angular/core").InputSignal<string | undefined>;
+    /** iOS: hide the spinner when `animating` is false rather than showing it still. */
+    readonly hidesWhenStopped: import("@angular/core").InputSignalWithTransform<boolean | undefined, unknown>;
+    protected readonly nativeSize: import("@angular/core").Signal<"small" | "large">;
+    /**
+     * Android only, and not optional there.
+     *
+     * `AndroidProgressBar` picks its drawable from `styleAttr`, and has no default: the native view
+     * throws `setStyle() not called` out of its own update pass if the first commit arrives without
+     * one, which takes the whole screen down. RN's wrapper sends `Normal` for every size and lets
+     * the box above do the sizing, so this sends the same rather than mapping `large` onto
+     * `progressBarStyleLarge` and diverging. `indeterminate` is required by the same spec.
+     *
+     * Both stay `undefined` on iOS, where `ActivityIndicatorView` has neither prop and an undefined
+     * input never reaches native.
+     */
+    protected readonly styleAttr: string | undefined;
+    protected readonly indeterminate: boolean | undefined;
+    protected readonly sizeStyle: import("@angular/core").Signal<{
+        width: number;
+        height: number;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ActivityIndicator, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ActivityIndicator, "activity-indicator", never, { "size": { "alias": "size"; "required": false; "isSignal": true; }; "animating": { "alias": "animating"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "hidesWhenStopped": { "alias": "hidesWhenStopped"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/activity-indicator.js

@@ -0,0 +1,66 @@
+import { Directive, computed, input } from '@angular/core';
+import { nativePlatform } from '@ng-native/fabric';
+import { optionalBoolean } from "./transforms.js";
+import { ViewBase } from "./view-base.js";
+import * as i0 from "@angular/core";
+/**
+ * A spinner. Commits as `ActivityIndicatorView` on iOS and `AndroidProgressBar` on Android.
+ *
+ * RN's wrapper gives the native view an explicit size: the native component has no intrinsic
+ * dimensions, so without one it stretches to fill whatever space its parent offers. That
+ * failure is invisible, since the spinner still draws at its natural size in the middle of the
+ * stretched box, but the box swallows gestures across its whole width.
+ */
+export class ActivityIndicator extends ViewBase {
+    /** `small` and `large` match RN's 20 and 36 points; a number sets both dimensions. */
+    size = input('small', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Whether the spinner turns. Defaults to true. */
+    animating = input(undefined, { ...(ngDevMode ? { debugName: "animating" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    /** The spinner's colour. */
+    color = input(/* @ts-ignore */
+    ...(ngDevMode ? [undefined, { debugName: "color" }] : /* istanbul ignore next */ []));
+    /** iOS: hide the spinner when `animating` is false rather than showing it still. */
+    hidesWhenStopped = input(undefined, { ...(ngDevMode ? { debugName: "hidesWhenStopped" } : /* istanbul ignore next */ {}), transform: optionalBoolean });
+    nativeSize = computed(() => (this.size() === 'large' ? 'large' : 'small'), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "nativeSize" }] : /* istanbul ignore next */ []));
+    /**
+     * Android only, and not optional there.
+     *
+     * `AndroidProgressBar` picks its drawable from `styleAttr`, and has no default: the native view
+     * throws `setStyle() not called` out of its own update pass if the first commit arrives without
+     * one, which takes the whole screen down. RN's wrapper sends `Normal` for every size and lets
+     * the box above do the sizing, so this sends the same rather than mapping `large` onto
+     * `progressBarStyleLarge` and diverging. `indeterminate` is required by the same spec.
+     *
+     * Both stay `undefined` on iOS, where `ActivityIndicatorView` has neither prop and an undefined
+     * input never reaches native.
+     */
+    styleAttr = nativePlatform() === 'android' ? 'Normal' : undefined;
+    indeterminate = nativePlatform() === 'android' ? true : undefined;
+    sizeStyle = computed(() => {
+        const size = this.size();
+        if (typeof size === 'number')
+            return { width: size, height: size };
+        return size === 'large' ? { width: 36, height: 36 } : { width: 20, height: 20 };
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "sizeStyle" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ActivityIndicator, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: ActivityIndicator, isStandalone: true, selector: "activity-indicator", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, animating: { classPropertyName: "animating", publicName: "animating", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, hidesWhenStopped: { classPropertyName: "hidesWhenStopped", publicName: "hidesWhenStopped", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style": "sizeStyle()", "size": "nativeSize()", "animating": "animating()", "color": "color()", "hidesWhenStopped": "hidesWhenStopped()", "styleAttr": "styleAttr", "indeterminate": "indeterminate" } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: ActivityIndicator, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'activity-indicator',
+                    host: {
+                        '[style]': 'sizeStyle()',
+                        '[size]': 'nativeSize()',
+                        '[animating]': 'animating()',
+                        '[color]': 'color()',
+                        '[hidesWhenStopped]': 'hidesWhenStopped()',
+                        '[styleAttr]': 'styleAttr',
+                        '[indeterminate]': 'indeterminate',
+                    },
+                }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], animating: [{ type: i0.Input, args: [{ isSignal: true, alias: "animating", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], hidesWhenStopped: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidesWhenStopped", required: false }] }] } });
+//# sourceMappingURL=activity-indicator.js.map

package/dist/activity-indicator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-indicator.js","sourceRoot":"","sources":["../src/activity-indicator.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;;AAE1C;;;;;;;GAOG;AAaH,MAAM,OAAO,iBAAkB,SAAQ,QAAQ;IAC7C,sFAAsF;IAC7E,IAAI,GAAG,KAAK,CAA6B,OAAO;6EAAC,CAAC;IAC3D,mDAAmD;IAC1C,SAAS,GAAG,KAAK,CAAC,SAAS,iFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IACtE,4BAA4B;IACnB,KAAK,GAAG,KAAK;yFAAU,CAAC;IACjC,oFAAoF;IAC3E,gBAAgB,GAAG,KAAK,CAAC,SAAS,wFAAI,SAAS,EAAE,eAAe,GAAG,CAAC;IAE1D,UAAU,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC;mFAAC,CAAC;IAE9F;;;;;;;;;;;OAWG;IACgB,SAAS,GAAG,cAAc,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,aAAa,GAAG,cAAc,EAAE,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAElE,SAAS,GAAG,QAAQ,CAAC,GAAG,EAAE;QAC3C,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC;QACzB,IAAI,OAAO,IAAI,KAAK,QAAQ;YAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;QACnE,OAAO,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IAClF,CAAC;kFAAC,CAAC;uGA/BQ,iBAAiB;2FAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAZ7B,SAAS;mBAAC;oBACT,QAAQ,EAAE,oBAAoB;oBAC9B,IAAI,EAAE;wBACJ,SAAS,EAAE,aAAa;wBACxB,QAAQ,EAAE,cAAc;wBACxB,aAAa,EAAE,aAAa;wBAC5B,SAAS,EAAE,SAAS;wBACpB,oBAAoB,EAAE,oBAAoB;wBAC1C,aAAa,EAAE,WAAW;wBAC1B,iBAAiB,EAAE,eAAe;qBACnC;iBACF","sourcesContent":["import { Directive, computed, input } from '@angular/core';\nimport { nativePlatform } from '@ng-native/fabric';\nimport { optionalBoolean } from './transforms.ts';\nimport { ViewBase } from './view-base.ts';\n\n/**\n * A spinner. Commits as `ActivityIndicatorView` on iOS and `AndroidProgressBar` on Android.\n *\n * RN's wrapper gives the native view an explicit size: the native component has no intrinsic\n * dimensions, so without one it stretches to fill whatever space its parent offers. That\n * failure is invisible, since the spinner still draws at its natural size in the middle of the\n * stretched box, but the box swallows gestures across its whole width.\n */\n@Directive({\n  selector: 'activity-indicator',\n  host: {\n    '[style]': 'sizeStyle()',\n    '[size]': 'nativeSize()',\n    '[animating]': 'animating()',\n    '[color]': 'color()',\n    '[hidesWhenStopped]': 'hidesWhenStopped()',\n    '[styleAttr]': 'styleAttr',\n    '[indeterminate]': 'indeterminate',\n  },\n})\nexport class ActivityIndicator extends ViewBase {\n  /** `small` and `large` match RN's 20 and 36 points; a number sets both dimensions. */\n  readonly size = input<'small' | 'large' | number>('small');\n  /** Whether the spinner turns. Defaults to true. */\n  readonly animating = input(undefined, { transform: optionalBoolean });\n  /** The spinner's colour. */\n  readonly color = input<string>();\n  /** iOS: hide the spinner when `animating` is false rather than showing it still. */\n  readonly hidesWhenStopped = input(undefined, { transform: optionalBoolean });\n\n  protected readonly nativeSize = computed(() => (this.size() === 'large' ? 'large' : 'small'));\n\n  /**\n   * Android only, and not optional there.\n   *\n   * `AndroidProgressBar` picks its drawable from `styleAttr`, and has no default: the native view\n   * throws `setStyle() not called` out of its own update pass if the first commit arrives without\n   * one, which takes the whole screen down. RN's wrapper sends `Normal` for every size and lets\n   * the box above do the sizing, so this sends the same rather than mapping `large` onto\n   * `progressBarStyleLarge` and diverging. `indeterminate` is required by the same spec.\n   *\n   * Both stay `undefined` on iOS, where `ActivityIndicatorView` has neither prop and an undefined\n   * input never reaches native.\n   */\n  protected readonly styleAttr = nativePlatform() === 'android' ? 'Normal' : undefined;\n  protected readonly indeterminate = nativePlatform() === 'android' ? true : undefined;\n\n  protected readonly sizeStyle = computed(() => {\n    const size = this.size();\n    if (typeof size === 'number') return { width: size, height: size };\n    return size === 'large' ? { width: 36, height: 36 } : { width: 20, height: 20 };\n  });\n}\n"]}

package/dist/animated-style.d.ts

@@ -0,0 +1,31 @@
+import * as i0 from "@angular/core";
+/**
+ * The behaviour, with the graph left as a dependency so it can be driven by a fake. `AnimatedStyle`
+ * in `../animations.ts` is the one apps import: same selector, and it supplies the real graph
+ * itself - React Native's on a device, `animated.ts` in a browser - so importing the directive is
+ * the whole setup.
+ */
+export declare class AnimatedStyleBase {
+    private readonly node;
+    private readonly engine;
+    private readonly animation;
+    /** A style object whose values may be animated nodes, plain numbers, or a mix. */
+    readonly animatedStyle: import("@angular/core").InputSignal<Record<string, unknown>>;
+    private handle;
+    private connected;
+    constructor();
+    /**
+     * One JavaScript-driven frame. Also the first chance to hand over the react tag: a node has
+     * one only after it has been committed, and this runs after at least one commit has happened.
+     */
+    private frame;
+    private write;
+    /**
+     * Hand the graph the react tag, once there is one. Calling this before an animation starts is
+     * the point: React Native connects the view now if the graph is already native, and remembers
+     * it for the moment an animation with the native driver takes over.
+     */
+    private connect;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnimatedStyleBase, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<AnimatedStyleBase, "[animatedStyle]", never, { "animatedStyle": { "alias": "animatedStyle"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
+}

package/dist/animated-style.js

@@ -0,0 +1,102 @@
+/**
+ * Binds a style holding animated values to the element it sits on: the Angular equivalent of
+ * React Native's `createAnimatedComponent`.
+ *
+ * ```html
+ * <view [animatedStyle]="{ opacity: fade, transform: [{ translateY: slide }] }">
+ * ```
+ *
+ * Two drivers, and the difference is where the work happens. With `useNativeDriver: true` the
+ * whole animation runs on the UI thread: this hands the graph the element's react tag once and
+ * then does nothing per frame, so the animation keeps its frame rate with the JavaScript thread
+ * blocked. Without it, every frame calls back here and is written to the node. A browser has only
+ * the second kind: `animations-web.ts` supplies a graph that is JavaScript-driven throughout, and
+ * `useNativeDriver` there changes nothing.
+ *
+ * A JavaScript frame commits outside change detection, one of the two exceptions to committing at
+ * most once per change-detection pass (the other is a CSS transition). It has to: the graph advances on its own schedule, and waiting for the next change
+ * detection pass would drop the frame. The commit is incremental like any other, and touches
+ * only the nodes the frame changed.
+ */
+import { Directive, ElementRef, afterNextRender, effect, inject, input, untracked, } from '@angular/core';
+import { Engine, HostEngine } from '@ng-native/fabric';
+import { ANIMATION } from "./animation.js";
+import * as i0 from "@angular/core";
+/**
+ * The behaviour, with the graph left as a dependency so it can be driven by a fake. `AnimatedStyle`
+ * in `../animations.ts` is the one apps import: same selector, and it supplies the real graph
+ * itself - React Native's on a device, `animated.ts` in a browser - so importing the directive is
+ * the whole setup.
+ */
+export class AnimatedStyleBase {
+    node = inject(ElementRef).nativeElement;
+    // The shared host seam, read off the node as every primitive reads it, so a browser host serves
+    // this as well as Fabric does. Only the react tag is Fabric's own, and `connect()` asks for it.
+    engine = this.node.host ?? inject(HostEngine);
+    animation = inject(ANIMATION);
+    /** A style object whose values may be animated nodes, plain numbers, or a mix. */
+    animatedStyle = input.required(/* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "animatedStyle" }] : /* istanbul ignore next */ []));
+    handle = null;
+    connected = false;
+    constructor() {
+        // A node has a react tag only once it has been committed, and a native-driven animation
+        // never calls back into JavaScript, so there would otherwise be no moment to hand it over.
+        afterNextRender(() => this.connect());
+        effect((onCleanup) => {
+            const style = this.animatedStyle();
+            const handle = this.animation.props(style, () => untracked(() => this.frame()));
+            this.handle = handle;
+            this.connected = false;
+            handle.attach();
+            // The starting values, so the element is right before anything animates. This runs inside
+            // change detection, so the commit it needs is the ordinary one.
+            this.write(handle.read());
+            onCleanup(() => {
+                handle.detach();
+                if (this.handle === handle)
+                    this.handle = null;
+            });
+        });
+    }
+    /**
+     * One JavaScript-driven frame. Also the first chance to hand over the react tag: a node has
+     * one only after it has been committed, and this runs after at least one commit has happened.
+     */
+    frame() {
+        const handle = this.handle;
+        if (!handle)
+            return;
+        this.write(handle.read());
+        this.engine.commit();
+    }
+    write(values) {
+        const current = this.node.props['style'] ?? {};
+        this.engine.setProp(this.node, 'style', { ...current, ...values });
+        this.connect();
+    }
+    /**
+     * Hand the graph the react tag, once there is one. Calling this before an animation starts is
+     * the point: React Native connects the view now if the graph is already native, and remembers
+     * it for the moment an animation with the native driver takes over.
+     */
+    connect() {
+        if (this.connected)
+            return;
+        // A browser has no native driver to hand a view to, so there is no tag to look for.
+        if (!(this.engine instanceof Engine))
+            return;
+        const tag = this.engine.tagOf(this.node);
+        if (tag === null)
+            return;
+        this.handle?.connect(tag);
+        this.connected = true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyleBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.2.0", type: AnimatedStyleBase, isStandalone: true, selector: "[animatedStyle]", inputs: { animatedStyle: { classPropertyName: "animatedStyle", publicName: "animatedStyle", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.0", ngImport: i0, type: AnimatedStyleBase, decorators: [{
+            type: Directive,
+            args: [{ selector: '[animatedStyle]' }]
+        }], ctorParameters: () => [], propDecorators: { animatedStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "animatedStyle", required: true }] }] } });
+//# sourceMappingURL=animated-style.js.map

package/dist/animated-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animated-style.js","sourceRoot":"","sources":["../src/animated-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Binds a style holding animated values to the element it sits on: the Angular equivalent of\n * React Native's `createAnimatedComponent`.\n *\n * ```html\n * <view [animatedStyle]=\"{ opacity: fade, transform: [{ translateY: slide }] }\">\n * ```\n *\n * Two drivers, and the difference is where the work happens. With `useNativeDriver: true` the\n * whole animation runs on the UI thread: this hands the graph the element's react tag once and\n * then does nothing per frame, so the animation keeps its frame rate with the JavaScript thread\n * blocked. Without it, every frame calls back here and is written to the node. A browser has only\n * the second kind: `animations-web.ts` supplies a graph that is JavaScript-driven throughout, and\n * `useNativeDriver` there changes nothing.\n *\n * A JavaScript frame commits outside change detection, one of the two exceptions to committing at\n * most once per change-detection pass (the other is a CSS transition). It has to: the graph advances on its own schedule, and waiting for the next change\n * detection pass would drop the frame. The commit is incremental like any other, and touches\n * only the nodes the frame changed.\n */\nimport {\n  Directive,\n  ElementRef,\n  afterNextRender,\n  effect,\n  inject,\n  input,\n  untracked,\n} from '@angular/core';\nimport { Engine, HostEngine, type EngineNode, type HostNode } from '@ng-native/fabric';\nimport { ANIMATION, type AnimatedPropsHandle } from './animation.ts';\n\n/**\n * The behaviour, with the graph left as a dependency so it can be driven by a fake. `AnimatedStyle`\n * in `../animations.ts` is the one apps import: same selector, and it supplies the real graph\n * itself - React Native's on a device, `animated.ts` in a browser - so importing the directive is\n * the whole setup.\n */\n@Directive({ selector: '[animatedStyle]' })\nexport class AnimatedStyleBase {\n  private readonly node = inject(ElementRef).nativeElement as HostNode;\n  // The shared host seam, read off the node as every primitive reads it, so a browser host serves\n  // this as well as Fabric does. Only the react tag is Fabric's own, and `connect()` asks for it.\n  private readonly engine = this.node.host ?? inject(HostEngine);\n  private readonly animation = inject(ANIMATION);\n\n  /** A style object whose values may be animated nodes, plain numbers, or a mix. */\n  readonly animatedStyle = input.required<Record<string, unknown>>();\n\n  private handle: AnimatedPropsHandle | null = null;\n  private connected = false;\n\n  constructor() {\n    // A node has a react tag only once it has been committed, and a native-driven animation\n    // never calls back into JavaScript, so there would otherwise be no moment to hand it over.\n    afterNextRender(() => this.connect());\n\n    effect((onCleanup) => {\n      const style = this.animatedStyle();\n      const handle = this.animation.props(style, () => untracked(() => this.frame()));\n      this.handle = handle;\n      this.connected = false;\n      handle.attach();\n      // The starting values, so the element is right before anything animates. This runs inside\n      // change detection, so the commit it needs is the ordinary one.\n      this.write(handle.read());\n\n      onCleanup(() => {\n        handle.detach();\n        if (this.handle === handle) this.handle = null;\n      });\n    });\n  }\n\n  /**\n   * One JavaScript-driven frame. Also the first chance to hand over the react tag: a node has\n   * one only after it has been committed, and this runs after at least one commit has happened.\n   */\n  private frame(): void {\n    const handle = this.handle;\n    if (!handle) return;\n    this.write(handle.read());\n    this.engine.commit();\n  }\n\n  private write(values: Record<string, unknown>): void {\n    const current = (this.node.props['style'] as Record<string, unknown> | undefined) ?? {};\n    this.engine.setProp(this.node, 'style', { ...current, ...values });\n    this.connect();\n  }\n\n  /**\n   * Hand the graph the react tag, once there is one. Calling this before an animation starts is\n   * the point: React Native connects the view now if the graph is already native, and remembers\n   * it for the moment an animation with the native driver takes over.\n   */\n  private connect(): void {\n    if (this.connected) return;\n    // A browser has no native driver to hand a view to, so there is no tag to look for.\n    if (!(this.engine instanceof Engine)) return;\n    const tag = this.engine.tagOf(this.node as EngineNode);\n    if (tag === null) return;\n    this.handle?.connect(tag);\n    this.connected = true;\n  }\n}\n"]}

package/dist/animated.d.ts

@@ -0,0 +1,125 @@
+import type { AnimationBackend } from './animation.ts';
+import { type EasingFunction } from './easing.ts';
+export interface EndResult {
+    finished: boolean;
+}
+export type EndCallback = (result: EndResult) => void;
+/** What `Animated.timing` and the rest hand back, as React Native's do. */
+export interface CompositeAnimation {
+    start(callback?: EndCallback): void;
+    stop(): void;
+    reset(): void;
+}
+type Extrapolate = 'extend' | 'clamp' | 'identity';
+export interface InterpolationConfig {
+    inputRange: readonly number[];
+    outputRange: readonly (number | string)[];
+    easing?: EasingFunction;
+    extrapolate?: Extrapolate;
+    extrapolateLeft?: Extrapolate;
+    extrapolateRight?: Extrapolate;
+}
+/** Anything a style can hold where a plain value would go. */
+export declare abstract class AnimatedNode {
+    abstract __getValue(): unknown;
+    /** The values this one is computed from: the things that actually change. */
+    abstract __roots(): Iterable<AnimatedValue>;
+    interpolate(config: InterpolationConfig): AnimatedInterpolation;
+}
+export declare class AnimatedValue extends AnimatedNode {
+    private value;
+    private offset;
+    private readonly startingValue;
+    private animation;
+    private readonly listeners;
+    private nextListener;
+    /** The `[animatedStyle]` handles reading this value, told once per change. */
+    readonly __observers: Set<() => void>;
+    constructor(value?: number);
+    __getValue(): number;
+    __roots(): Iterable<AnimatedValue>;
+    setValue(value: number): void;
+    setOffset(offset: number): void;
+    flattenOffset(): void;
+    extractOffset(): void;
+    addListener(callback: (state: {
+        value: number;
+    }) => void): string;
+    removeListener(id: string): void;
+    removeAllListeners(): void;
+    stopAnimation(callback?: (value: number) => void): void;
+    resetAnimation(callback?: (value: number) => void): void;
+    /** Run one animation on this value, stopping whatever was running on it. */
+    __animate(animation: Driver, callback?: EndCallback): void;
+    private update;
+}
+export declare class AnimatedInterpolation extends AnimatedNode {
+    private readonly parent;
+    private readonly config;
+    constructor(parent: AnimatedNode, config: InterpolationConfig);
+    __getValue(): unknown;
+    __roots(): Iterable<AnimatedValue>;
+}
+/**
+ * One animation on one value: React Native's `Animation`, reduced to what it does here. It asks
+ * for frames until it ends, and ends once, whether it finished or was stopped.
+ */
+declare abstract class Driver {
+    protected update: (value: number) => void;
+    private onEnd;
+    private active;
+    private frameId;
+    start(from: number, update: (value: number) => void, onEnd: EndCallback, previous: Driver | null): void;
+    stop(): void;
+    protected abstract begin(from: number, previous: Driver | null): void;
+    protected request(step: (time: number) => void): void;
+    /** Whether a listener stopped this from inside the last update. */
+    protected get stopped(): boolean;
+    protected end(finished: boolean): void;
+}
+export interface TimingConfig {
+    toValue: number;
+    duration?: number;
+    easing?: EasingFunction;
+    delay?: number;
+    useNativeDriver?: boolean;
+}
+export interface SpringConfig {
+    toValue: number;
+    overshootClamping?: boolean;
+    restDisplacementThreshold?: number;
+    restSpeedThreshold?: number;
+    velocity?: number;
+    delay?: number;
+    bounciness?: number;
+    speed?: number;
+    tension?: number;
+    friction?: number;
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+    useNativeDriver?: boolean;
+}
+declare function timing(value: AnimatedValue, config: TimingConfig): CompositeAnimation;
+declare function spring(value: AnimatedValue, config: SpringConfig): CompositeAnimation;
+declare function sequence(animations: readonly CompositeAnimation[]): CompositeAnimation;
+declare function parallel(animations: readonly CompositeAnimation[], config?: {
+    stopTogether?: boolean;
+}): CompositeAnimation;
+declare function delay(time: number): CompositeAnimation;
+export declare const Animated: {
+    Value: typeof AnimatedValue;
+    Node: typeof AnimatedNode;
+    Interpolation: typeof AnimatedInterpolation;
+    timing: typeof timing;
+    spring: typeof spring;
+    sequence: typeof sequence;
+    parallel: typeof parallel;
+    delay: typeof delay;
+};
+/**
+ * `[animatedStyle]`'s graph, for a browser. Every value here is driven in JavaScript, so each
+ * change is a frame the directive writes, and there is never a native view to hand a tag to.
+ */
+export declare const animationBackend: AnimationBackend;
+export {};