@symbiote-native/image 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+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,261 @@
-# Temporary Holding Version
+# @symbiote-native/image
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+[`expo-image`](https://docs.expo.dev/versions/latest/sdk/image/) for **every**
+[SymbioteNative](../../README.md) adapter: React, Vue, Svelte, Solid and Angular. An image view
+with caching, placeholders, transitions and SF Symbols, plus the cache and hash functions.
+
+Built the same way as [`@symbiote-native/clipboard`](../clipboard)'s `ClipboardPasteButton`, an
+`expo-modules-core` native view reached through `requireNativeViewManager` (see the
+`symbiote-expo-native-module` project skill: why `expo-modules-core` is depended on directly and never
+the `expo` meta-package, why the upstream JS is hand-ported into `core/`, and how autolinking finds the
+native module). One render function in `core/` returns a descriptor and every adapter only turns it into
+its own element.
+
+## Install
+
+**New app:**
+
+```bash
+npx @symbiote-native/cli new my-app --image
+```
+
+**Existing SymbioteNative app:**
+
+```bash
+npx @symbiote-native/cli add --image
+```
+
+Either way: installs `@symbiote-native/image` and wires the native autolinking automatically,
+see [`@symbiote-native/cli`](../cli).
+
+<details>
+<summary>Manual install (no CLI - installing and wiring native autolinking by hand)</summary>
+
+```bash
+npm install @symbiote-native/image
+```
+
+Depends on `expo-image` and `expo-modules-core` directly (regular dependencies, pinned to exact
+versions, since this package's `core/` is hand-ported against one specific native API shape).
+Never install `expo-image` yourself, and never add the `expo` package to this project: it bundles
+its own Metro/Babel pipeline that conflicts with this project's own.
+
+### Required one-time step: native autolinking wiring
+
+`expo-image`'s native code is discovered by `expo-modules-autolinking`, not by RN's own
+`react-native.config.cjs` mechanism. Wire it into the native host app **once**, it covers this package
+and every other `expo-modules-core` package with zero further changes. The steps and the
+mechanics behind them are in the `symbiote-expo-native-module` skill and in
+[`@symbiote-native/network`](../network)'s README; the reference app is `examples/expo-react`.
+
+### Android KSP
+
+`expo-image` reads a `kspVersion` from the app's root `build.gradle`. `native-link.json` declares
+`android.requiresKsp`, so the `expo-modules-link` postinstall writes the right version there from Expo's
+table for the app's Kotlin version.
+
+</details>
+
+## Shape
+
+```
+src/core/                image-view.ts - createImageView(getNode): render, the view handle and the events.
+                         props.ts (normalization, deprecation warnings), sources.ts, native-style.ts,
+                         image-background.ts, image-api.ts (the statics as functions), image-loader.ts and
+                         image-ref-loader.ts (useImage's core), hash-strings.ts, types.ts.
+src/react/               @symbiote-native/image/react   - Image, ImageBackground, useImage
+src/vue/                 @symbiote-native/image/vue     - Image, ImageBackground, useImage (a shallow ref)
+src/svelte/              @symbiote-native/image/svelte  - Image, ImageBackground, useImage ({ current })
+src/solid/               @symbiote-native/image/solid   - Image, ImageBackground, useImage (an accessor)
+src/angular/             @symbiote-native/image/angular - ExpoImage, ExpoImageBackground, injectImage (a signal)
+```
+
+Angular's selectors are `ExpoImage` and `ExpoImageBackground` because `Image` and `ImageBackground` are
+already tags of the adapter.
+
+## Use it
+
+### React
+
+```tsx
+import { Image, useImage } from '@symbiote-native/image/react';
+
+const image = useImage('https://picsum.photos/1000/800', { maxWidth: 800 });
+
+<Image
+  source="https://picsum.photos/400"
+  placeholder="blurhash:/L6PZfSi_.AyE_3t7t7R**0o#DgR4"
+  contentFit="cover"
+  transition={200}
+  style={{ width: 200, height: 200 }}
+/>;
+{image && <Image source={image} style={{ width: 200, height: 160 }} />}
+```
+
+### Vue
+
+```vue
+<script setup lang="ts">
+import { Image, useImage } from '@symbiote-native/image/vue';
+
+const image = useImage('https://picsum.photos/1000/800', { maxWidth: 800 });
+</script>
+
+<template>
+  <Image
+    source="https://picsum.photos/400"
+    placeholder="blurhash:/L6PZfSi_.AyE_3t7t7R**0o#DgR4"
+    contentFit="cover"
+    :transition="200"
+    :style="{ width: 200, height: 200 }"
+  />
+  <Image v-if="image" :source="image" :style="{ width: 200, height: 160 }" />
+</template>
+```
+
+`image` is a shallow ref, so a template reads it unwrapped and a script reads `image.value`.
+
+### Angular
+
+```ts
+import { Component } from '@angular/core';
+import { ExpoImage, injectImage } from '@symbiote-native/image/angular';
+
+@Component({
+  standalone: true,
+  imports: [ExpoImage],
+  template: `
+    <ExpoImage
+      source="https://picsum.photos/400"
+      placeholder="blurhash:/L6PZfSi_.AyE_3t7t7R**0o#DgR4"
+      contentFit="cover"
+      [transition]="200"
+      [style]="{ width: 200, height: 200 }"
+    />
+    @if (image(); as ref) {
+      <ExpoImage [source]="ref" [style]="{ width: 200, height: 160 }" />
+    }
+  `,
+})
+export class Photo {
+  readonly image = injectImage(() => 'https://picsum.photos/1000/800', () => ({ maxWidth: 800 }));
+}
+```
+
+The selector is `ExpoImage`, because `Image` is already a tag of the adapter. `image` is a signal.
+
+### Svelte
+
+```svelte
+<script lang="ts">
+  import { Image, useImage } from '@symbiote-native/image/svelte';
+
+  const image = useImage(() => 'https://picsum.photos/1000/800', () => ({ maxWidth: 800 }));
+</script>
+
+<Image
+  source="https://picsum.photos/400"
+  placeholder="blurhash:/L6PZfSi_.AyE_3t7t7R**0o#DgR4"
+  contentFit="cover"
+  transition={200}
+  style={{ width: 200, height: 200 }}
+/>
+{#if image.current}
+  <Image source={image.current} style={{ width: 200, height: 160 }} />
+{/if}
+```
+
+### Solid
+
+```tsx
+import { Show } from 'solid-js';
+import { Image, useImage } from '@symbiote-native/image/solid';
+
+const image = useImage(() => 'https://picsum.photos/1000/800', () => ({ maxWidth: 800 }));
+
+<Image
+  source="https://picsum.photos/400"
+  placeholder="blurhash:/L6PZfSi_.AyE_3t7t7R**0o#DgR4"
+  contentFit="cover"
+  transition={200}
+  style={{ width: 200, height: 200 }}
+/>;
+<Show when={image()}>{ref => <Image source={ref()} style={{ width: 200, height: 160 }} />}</Show>;
+```
+
+## API
+
+```ts
+<Image source placeholder? contentFit? contentPosition? transition? cachePolicy? recyclingKey? priority?
+       tintColor? allowDownscaling? autoplay? alt? onLoadStart? onProgress? onLoad? onError? onDisplay? />
+<ImageBackground imageStyle? ...Image props>children paint over the image</ImageBackground>
+
+useImage(source, options?, dependencies?): ImageRef | null          // per adapter, see Shape
+// view handle: startAnimating, stopAnimating, lockResourceAsync, unlockResourceAsync, reloadAsync
+
+prefetchImages(urls: string | string[], options?: CachePolicy | { cachePolicy?, headers? }): Promise<boolean>
+clearMemoryCache(): Promise<boolean>      clearDiskCache(): Promise<boolean>     // true on success
+getCachePathAsync(cacheKey): Promise<string | null>                              // null when not cached
+writeToCacheAsync(source: string | ImageRef, cacheKey): Promise<void>
+readFromCacheAsync(cacheKey): Promise<ImageRef | null>
+configureCache(config): void
+loadImageAsync(source, options?): Promise<ImageRef>
+generateBlurhashAsync(source: string | ImageRef, numberOfComponents: [number, number] | { width, height }): Promise<string | null>
+generateThumbhashAsync(source: string | ImageRef): Promise<string>
+```
+
+The statics of upstream's `Image` class are plain functions here. Ported from upstream's `Image.tsx`,
+`ImageBackground.tsx` and `useImage.ts`.
+
+## Notes
+
+- **It is not React Native's `Image`.** The default fit is `contentFit="cover"`. The old `resizeMode`,
+  `fadeDuration` and `defaultSource` props still work but log a warning once, and `resizeMode:
+  'repeat'` is not supported at all. Use `contentFit`, `transition` and `placeholder`.
+- **Caching is on by default.** `cachePolicy` is `disk`. `memory` and `memory-disk` keep decoded
+  images in RAM, which the system purges quickly under pressure.
+- **A new source keeps the old picture until the new one loads**, and `transition` blends them. That
+  is the point of the library, and it is why recycling lists need `recyclingKey`.
+- **`require('./a.png')` works.** Asset numbers go through Metro's asset registry before reaching
+  native, the same as for any image view.
+- **SVG is decoded by the system on iOS.** An elliptical arc command with more than one parameter
+  set and packed flags can draw distorted or not at all. Simplify the path if one looks wrong.
+- **Colors go through `processColor` by hand**, so `tintColor` and the style colors accept names,
+  hex and `rgb()`.
+- **Not ported.** The web build, the RSC render tests of upstream (snapshot tests of a server renderer) and the `expo-observe` integration.
+- **Not ported.** The web build, upstream's RSC snapshot tests and the `expo-observe` integration.
+
+## Common questions
+
+- **A list shows the previous row's picture.** The view keeps the old image until the new one is
+  ready. Give each image a `recyclingKey` (the item id). A `key` instead destroys the view and
+  defeats recycling.
+- **Memory climbs with many images.** Show thumbnails sized to the box, keep `cachePolicy="disk"`,
+  leave `allowDownscaling` on, use `useImage` with `maxWidth`, call `clearMemoryCache()` on memory
+  pressure.
+- **Animated WebP freezes or is slow on iOS.** Apple's decoder is slow on some files. Test or
+  re-encode them, and control playback with `autoplay={false}` and `startAnimating()`.
+- **Android `NoSuchMethodError`.** `expo-image` and `expo-modules-core` must come from matching
+  releases. This package pins both, never install either yourself.
+- **The placeholder flickers.** Set `placeholderContentFit` to the same value as `contentFit`.
+- **`resizeMode`, `fadeDuration`, `defaultSource`.** Still work, warn once, `repeat` is unsupported.
+  Use `contentFit`, `transition`, `placeholder`.
+- **Angular names.** `ExpoImage` and `ExpoImageBackground`.
+
+Sources: [Expo docs: Image](https://docs.expo.dev/versions/latest/sdk/image/),
+[expo/expo#21211](https://github.com/expo/expo/issues/21211),
+[expo/expo#26781](https://github.com/expo/expo/issues/26781),
+[expo/expo#24557](https://github.com/expo/expo/issues/24557),
+[expo/expo#25920](https://github.com/expo/expo/issues/25920),
+[expo/expo#37229](https://github.com/expo/expo/issues/37229).
+
+## Test it
+
+No device is needed for the logic. The core tests (`src/core/*.test.ts`) replace `expo-modules-core`
+(`requireNativeViewManager`, `Platform`) and assert the descriptor a render function returns. The
+adapter tests (`src/{react,vue,solid,angular}/**/*.test.*`, `vitest`) render the real component over the
+recording Fabric with an injected view config and assert the committed payload, and Svelte's
+`*.smoke.test.ts` compile the `.svelte` files and mount them. Painting itself is verified on a device in
+the six `examples/expo-*` canary apps (`examples/expo-react`, `examples/expo-vue-sfc`,
+`examples/expo-vue-tsx`, `examples/expo-svelte`, `examples/expo-solid`, `examples/expo-angular`), see the
+parent [README](../../README.md).

package/build/angular/image/index.d.ts

@@ -0,0 +1,20 @@
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import type { IImageStyle, IImageViewProps } from '../../core';
+declare const IMAGE_INPUTS: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable"];
+export interface ExpoImage extends Partial<Pick<IImageViewProps, (typeof IMAGE_INPUTS)[number]>> {
+}
+/** Angular twin of `expo-image`'s `Image`, `Image` itself is a primitive tag of the adapter */
+export declare class ExpoImage extends NativeViewBase {
+    style?: IStyleProp<IImageStyle>;
+    private readonly view;
+    readonly startAnimating: () => Promise<void>;
+    readonly stopAnimating: () => Promise<void>;
+    readonly lockResourceAsync: () => Promise<void>;
+    readonly unlockResourceAsync: () => Promise<void>;
+    readonly reloadAsync: () => Promise<void>;
+    protected readonly propNames: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable"];
+    protected renderView(props: object): IDescriptor | null;
+}
+export {};

package/build/angular/image/index.js

@@ -0,0 +1,113 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorOutlet, NativeViewBase } from '@symbiote-native/angular';
+import { createImageView } from '../../core/index.js';
+// One list is the inputs of the component and the props it hands to the native view
+const IMAGE_INPUTS = [
+    'source',
+    'placeholder',
+    'contentFit',
+    'placeholderContentFit',
+    'contentPosition',
+    'transition',
+    'blurRadius',
+    'tintColor',
+    'priority',
+    'loading',
+    'cachePolicy',
+    'responsivePolicy',
+    'recyclingKey',
+    'autoplay',
+    'sfEffect',
+    'onLoadStart',
+    'onLoad',
+    'onProgress',
+    'onError',
+    'onLoadEnd',
+    'onDisplay',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'resizeMode',
+    'fadeDuration',
+    'alt',
+    'enableLiveTextInteraction',
+    'allowDownscaling',
+    'decodeFormat',
+    'useAppleWebpCodec',
+    'enforceEarlyResizing',
+    'preferHighDynamicRange',
+    'draggable',
+];
+/** Angular twin of `expo-image`'s `Image`, `Image` itself is a primitive tag of the adapter */
+let ExpoImage = (() => {
+    let _classDecorators = [Component({
+            selector: 'ExpoImage',
+            standalone: true,
+            imports: [DescriptorOutlet],
+            inputs: [...IMAGE_INPUTS],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `@if (descriptor; as node) {
+    <symbiote-descriptor-outlet [node]="node" />
+  }`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = NativeViewBase;
+    var ExpoImage = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ExpoImage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        view = createImageView(() => this.hostNode());
+        // The functions of the view are members of the component, a `@ViewChild` reaches them
+        startAnimating = this.view.handle.startAnimating;
+        stopAnimating = this.view.handle.stopAnimating;
+        lockResourceAsync = this.view.handle.lockResourceAsync;
+        unlockResourceAsync = this.view.handle.unlockResourceAsync;
+        reloadAsync = this.view.handle.reloadAsync;
+        propNames = IMAGE_INPUTS;
+        renderView(props) {
+            return this.view.render(props);
+        }
+    };
+    return ExpoImage = _classThis;
+})();
+export { ExpoImage };

package/build/angular/image-background/index.d.ts

@@ -0,0 +1,14 @@
+import { NativeViewBase } from '@symbiote-native/angular';
+import type { IDescriptor } from '@symbiote-native/components';
+import type { IStyleProp } from '@symbiote-native/engine';
+import type { IImageBackgroundProps, IImageStyle } from '../../core';
+declare const IMAGE_BACKGROUND_INPUTS: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable", "imageStyle"];
+export interface ExpoImageBackground extends Partial<Pick<IImageBackgroundProps, (typeof IMAGE_BACKGROUND_INPUTS)[number]>> {
+}
+/** Angular twin of `expo-image`'s `ImageBackground`, the content paints over the image */
+export declare class ExpoImageBackground extends NativeViewBase {
+    style?: IStyleProp<IImageStyle>;
+    protected readonly propNames: readonly ["source", "placeholder", "contentFit", "placeholderContentFit", "contentPosition", "transition", "blurRadius", "tintColor", "priority", "loading", "cachePolicy", "responsivePolicy", "recyclingKey", "autoplay", "sfEffect", "onLoadStart", "onLoad", "onProgress", "onError", "onLoadEnd", "onDisplay", "defaultSource", "loadingIndicatorSource", "resizeMode", "fadeDuration", "alt", "enableLiveTextInteraction", "allowDownscaling", "decodeFormat", "useAppleWebpCodec", "enforceEarlyResizing", "preferHighDynamicRange", "draggable", "imageStyle"];
+    protected renderView(props: object): IDescriptor;
+}
+export {};

package/build/angular/image-background/index.js

@@ -0,0 +1,109 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { DescriptorHost, NativeViewBase } from '@symbiote-native/angular';
+import { renderImageBackground } from '../../core/index.js';
+// One list is the inputs of the component and the props it hands to the image
+const IMAGE_BACKGROUND_INPUTS = [
+    'source',
+    'placeholder',
+    'contentFit',
+    'placeholderContentFit',
+    'contentPosition',
+    'transition',
+    'blurRadius',
+    'tintColor',
+    'priority',
+    'loading',
+    'cachePolicy',
+    'responsivePolicy',
+    'recyclingKey',
+    'autoplay',
+    'sfEffect',
+    'onLoadStart',
+    'onLoad',
+    'onProgress',
+    'onError',
+    'onLoadEnd',
+    'onDisplay',
+    'defaultSource',
+    'loadingIndicatorSource',
+    'resizeMode',
+    'fadeDuration',
+    'alt',
+    'enableLiveTextInteraction',
+    'allowDownscaling',
+    'decodeFormat',
+    'useAppleWebpCodec',
+    'enforceEarlyResizing',
+    'preferHighDynamicRange',
+    'draggable',
+    'imageStyle',
+];
+/** Angular twin of `expo-image`'s `ImageBackground`, the content paints over the image */
+let ExpoImageBackground = (() => {
+    let _classDecorators = [Component({
+            selector: 'ExpoImageBackground',
+            standalone: true,
+            imports: [DescriptorHost],
+            inputs: [...IMAGE_BACKGROUND_INPUTS],
+            changeDetection: ChangeDetectionStrategy.OnPush,
+            template: `@if (descriptor; as node) {
+    <symbiote-descriptor-host [node]="node"
+      ><ng-content
+    /></symbiote-descriptor-host>
+  }`,
+        })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = NativeViewBase;
+    var ExpoImageBackground = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            ExpoImageBackground = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        propNames = IMAGE_BACKGROUND_INPUTS;
+        renderView(props) {
+            return renderImageBackground(props);
+        }
+    };
+    return ExpoImageBackground = _classThis;
+})();
+export { ExpoImageBackground };

package/build/angular/index.d.ts

@@ -0,0 +1,4 @@
+export { ExpoImage } from './image';
+export { ExpoImageBackground } from './image-background';
+export { injectImage } from './inject-image';
+export * from '../core';

package/build/angular/index.js

@@ -0,0 +1,6 @@
+// @symbiote-native/image/angular: the image view, its cache and hash functions on a shared core
+// The selectors are `ExpoImage*`, `Image` and `ImageBackground` are tags of the adapter
+export { ExpoImage } from './image/index.js';
+export { ExpoImageBackground } from './image-background/index.js';
+export { injectImage } from './inject-image.js';
+export * from '../core/index.js';

package/build/angular/inject-image.d.ts

@@ -0,0 +1,8 @@
+import type { Signal } from '@angular/core';
+import type { IImageLoadOptions, IImageSource, ImageRef } from '../core';
+/**
+ * Angular twin of `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a signal read by `dependencies` changes
+ */
+export declare function injectImage(source: () => IImageSource | string | number, options?: () => IImageLoadOptions, dependencies?: () => unknown[]): Signal<ImageRef | null>;

package/build/angular/inject-image.js

@@ -0,0 +1,20 @@
+import { computed, effect, signal, untracked } from '@angular/core';
+import { createImageRefLoader, resolveSource } from '../core/index.js';
+/**
+ * Angular twin of `useImage`, `null` until the first image has loaded
+ *
+ * It loads again when the uri of the source or a signal read by `dependencies` changes
+ */
+export function injectImage(source, options = () => ({}), dependencies = () => []) {
+    const image = signal(null);
+    const key = computed(() => resolveSource(source())?.uri);
+    effect(onCleanup => {
+        // Read so the effect tracks them, the source itself is not a trigger
+        key();
+        dependencies();
+        const loader = createImageRefLoader(loaded => image.set(loaded), options);
+        untracked(() => loader.load(source()));
+        onCleanup(loader.cancel);
+    });
+    return image.asReadonly();
+}

package/build/core/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const IMAGE_MODULE_NAME = "ExpoImage";
+/** `sf:name` in a source string, the native side reads `sf:/name` */
+export declare const SF_SYMBOL_PREFIX = "sf:";

package/build/core/constants.js

@@ -0,0 +1,4 @@
+// Apart from `native-module`, which resolves the module on import: the view needs the name too
+export const IMAGE_MODULE_NAME = 'ExpoImage';
+/** `sf:name` in a source string, the native side reads `sf:/name` */
+export const SF_SYMBOL_PREFIX = 'sf:';

package/build/core/hash-strings.d.ts

@@ -0,0 +1,5 @@
+import type { IImageSource } from './types';
+/** `blurhash:/<hash>/<width>/<height>` or `<hash>/<width>/<height>` */
+export declare function resolveBlurhashString(str: string): IImageSource;
+/** `thumbhash:/<hash>` or `<hash>` */
+export declare function resolveThumbhashString(str: string): IImageSource;

package/build/core/hash-strings.js

@@ -0,0 +1,22 @@
+const DEFAULT_HASH_SIZE = 16;
+function hashToUri(type, hash) {
+    const encoded = encodeURI(hash).replace(/#/g, '%23').replace(/\?/g, '%3F');
+    return `${type}:/${encoded}`;
+}
+/** `blurhash:/<hash>/<width>/<height>` or `<hash>/<width>/<height>` */
+export function resolveBlurhashString(str) {
+    const [hash = '', width = '', height = ''] = str
+        .replace(/^blurhash:\//, '')
+        .split('/');
+    return {
+        uri: hashToUri('blurhash', hash),
+        width: parseInt(width, 10) || DEFAULT_HASH_SIZE,
+        height: parseInt(height, 10) || DEFAULT_HASH_SIZE,
+    };
+}
+/** `thumbhash:/<hash>` or `<hash>` */
+export function resolveThumbhashString(str) {
+    // A slash at the start of the hash would break the uri path
+    const hash = str.replace(/^thumbhash:\//, '').replace(/\//g, '\\');
+    return { uri: hashToUri('thumbhash', hash) };
+}

package/build/core/image-api.d.ts

@@ -0,0 +1,18 @@
+import type { IImageCacheConfig, IImageLoadOptions, IImagePrefetchOptions, IImageSource, ImageRef } from './types';
+type IPrefetchOptions = IImagePrefetchOptions['cachePolicy'] | IImagePrefetchOptions;
+/** The caching policy as a string, or with request headers as an object */
+export declare function prefetchImages(urls: string | string[], options?: IPrefetchOptions): Promise<boolean>;
+export declare const clearMemoryCache: () => Promise<boolean>;
+export declare const clearDiskCache: () => Promise<boolean>;
+export declare const getCachePathAsync: (cacheKey: string) => Promise<string | null>;
+export declare const writeToCacheAsync: (source: string | ImageRef, cacheKey: string) => Promise<void>;
+export declare const readFromCacheAsync: (cacheKey: string) => Promise<ImageRef | null>;
+export declare const configureCache: (config: IImageCacheConfig) => void;
+export declare const generateBlurhashAsync: (source: string | ImageRef, numberOfComponents: [number, number] | {
+    width: number;
+    height: number;
+}) => Promise<string | null>;
+export declare const generateThumbhashAsync: (source: string | ImageRef) => Promise<string>;
+/** Loads the image into a native `ImageRef`, the caller releases it */
+export declare function loadImageAsync(source: IImageSource | string | number, options?: IImageLoadOptions): Promise<ImageRef>;
+export {};