@symbiote-native/svelte 0.1.0

package/build/components/button.svelte

@@ -0,0 +1,71 @@
+<script lang="ts" module>
+  // Button: the minimal cross-platform button, rendered in RN's iOS shape (Button.js): a
+  // TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold
+  // (caller color tints the label; disabled greys it) are shared in
+  // @symbiote-native/components/view/render-button — this component only composes its
+  // TouchableOpacity + a raw `symbiote-text` host and forwards the native-only props, the Svelte
+  // twin of React's/Vue's Button.
+  import type { IButtonProps } from './button-props';
+
+  export type { IButtonProps };
+</script>
+
+<script lang="ts">
+  import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle } from '@symbiote-native/components';
+  import TouchableOpacity from './touchable-opacity/index.svelte';
+
+  let {
+    title,
+    onPress,
+    color,
+    disabled,
+    touchSoundDisabled,
+    testID,
+    hasTVPreferredFocus,
+    nextFocusDown,
+    nextFocusForward,
+    nextFocusLeft,
+    nextFocusRight,
+    nextFocusUp,
+    class: className,
+    ...accessibilityRest
+  }: IButtonProps = $props();
+
+  const textStyle = $derived(resolveButtonTextStyle(color, disabled));
+
+  // The native-only props TouchableOpacity does not type but forwards to Fabric (testID +
+  // TV-focus). Carried as a plain record (the pass-through idiom Image/React's Button use) so
+  // excess-property typing does not reject the native-only keys. TV-focus is inert on a phone.
+  const nativeForward = $derived.by(() => {
+    const forward: Record<string, unknown> = { testID };
+    if (hasTVPreferredFocus !== undefined) forward.hasTVPreferredFocus = hasTVPreferredFocus;
+    if (nextFocusDown !== undefined) forward.nextFocusDown = nextFocusDown;
+    if (nextFocusForward !== undefined) forward.nextFocusForward = nextFocusForward;
+    if (nextFocusLeft !== undefined) forward.nextFocusLeft = nextFocusLeft;
+    if (nextFocusRight !== undefined) forward.nextFocusRight = nextFocusRight;
+    if (nextFocusUp !== undefined) forward.nextFocusUp = nextFocusUp;
+    return forward;
+  });
+</script>
+
+<!--
+  RN's Button sets role=button, is accessible, and propagates the disabled accessibility state.
+  The caller's accessibility props pass through via {...accessibilityRest}, but Button's fixed
+  role/accessible/disabled-state win, applied after the spread. touchSoundDisabled maps to the
+  pressable's android_disableSound.
+-->
+<TouchableOpacity
+  {...accessibilityRest}
+  {...nativeForward}
+  {onPress}
+  {disabled}
+  class={className}
+  android_disableSound={touchSoundDisabled}
+  accessibilityRole={BUTTON_ACCESSIBILITY_ROLE}
+  accessible={true}
+  accessibilityState={{ disabled }}
+>
+  {#snippet children()}
+    <symbiote-text p={{ style: textStyle }}>{title}</symbiote-text>
+  {/snippet}
+</TouchableOpacity>

package/build/components/button.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { IButtonProps } from './button-props';
+export type { IButtonProps };
+declare const Button: import("svelte").Component<IButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/build/components/flat-list/flat-list-props.d.ts

@@ -0,0 +1,10 @@
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IViewabilityConfigCallbackPair } from '@symbiote-native/components';
+import type { IVirtualizedListHandle, IVirtualizedListProps } from '../virtualized-list/virtualized-list-props';
+export type { IVirtualizedListHandle as IFlatListHandle };
+export type IFlatListProps<ItemT> = Omit<IVirtualizedListProps<ItemT>, 'data' | 'getItem' | 'getItemCount' | 'viewabilityConfigCallbackPairs'> & {
+    data: readonly ItemT[];
+    numColumns?: number;
+    columnWrapperStyle?: IStyleProp<IViewStyle> | string;
+    viewabilityConfigCallbackPairs?: IViewabilityConfigCallbackPair<ItemT>[];
+};

package/build/components/flat-list/flat-list-props.js

@@ -0,0 +1 @@
+export {};

package/build/components/flat-list/index.svelte

@@ -0,0 +1,254 @@
+<script lang="ts" module>
+  // FlatList: the convenience surface over VirtualizedList. Takes a plain `data` array and
+  // derives getItem/getItemCount; numColumns packs items into rows (a horizontal sub-View), so
+  // the virtualized stream is rows, not items (RN's FlatList). All windowing / viewability /
+  // batching / imperative scrolling are inherited from VirtualizedList; the data-shaping and the
+  // row/viewability/separator transforms are shared verbatim from @symbiote-native/components,
+  // exactly like the React/Vue FlatList over their own VirtualizedList.
+  import type { IFlatListProps, IFlatListHandle } from './flat-list-props';
+
+  export type { IFlatListProps, IFlatListHandle };
+</script>
+
+<script lang="ts" generics="ItemT">
+  import {
+    SINGLE_COLUMN,
+    chunkIntoRows,
+    expandRowViewability,
+    firstItemOfRow,
+    lastItemOfRow,
+    rowKeyExtractor,
+    type IRow,
+    type ISeparatorProps,
+    type ISeparators,
+    type IViewableItemsChangedInfo,
+  } from '@symbiote-native/components';
+  import { resolveClassName, type ISymbioteNode } from '@symbiote-native/engine';
+  import VirtualizedList from '../virtualized-list/index.svelte';
+  import { pickAccessibilityProps } from '../virtualized-list/virtualized-list-props';
+  import type { IVirtualizedListHandle, IScrollViewHandle } from '../virtualized-list/virtualized-list-props';
+  import type { IFlatListProps as IProps } from './flat-list-props';
+  import { pickAttachmentProps } from '../../runes/attachments';
+
+  let props: IProps<ItemT> = $props();
+
+  // $state.raw: the inner VirtualizedList component instance (its exports), held by identity —
+  // same concern as every other handle in this adapter (Switch's hostShim, VirtualizedList's own
+  // scrollHandle over its ShimElement).
+  let inner = $state.raw<IVirtualizedListHandle | null>(null);
+
+  const numColumns = $derived(typeof props.numColumns === 'number' ? props.numColumns : SINGLE_COLUMN);
+  const rows = $derived.by((): IRow<ItemT>[] =>
+    numColumns > SINGLE_COLUMN ? chunkIntoRows(props.data, numColumns) : [],
+  );
+
+  function getSingleItem(_source: unknown, index: number): ItemT {
+    return props.data[index];
+  }
+  function getSingleCount(): number {
+    return props.data.length;
+  }
+  function getRow(_source: unknown, index: number): IRow<ItemT> {
+    return rows[index];
+  }
+  function getRowCount(): number {
+    return rows.length;
+  }
+
+  function isStyleLike(value: unknown): boolean {
+    return Array.isArray(value) || (typeof value === 'object' && value !== null);
+  }
+
+  const rowStyle = $derived.by(() => [
+    { flexDirection: 'row' as const },
+    typeof props.columnWrapperStyle === 'string'
+      ? resolveClassName(props.columnWrapperStyle)
+      : isStyleLike(props.columnWrapperStyle)
+        ? props.columnWrapperStyle
+        : undefined,
+  ]);
+
+  // The divider between rows shows real items (last of the row above, first of the row below), so
+  // the user's `separator` snippet, typed on ItemT, sees items rather than the IRow wrapper.
+  function rowSeparatorProps(entryProps: ISeparatorProps<IRow<ItemT>>): ISeparatorProps<ItemT> {
+    return {
+      ...entryProps,
+      leadingItem: lastItemOfRow(entryProps.leadingItem),
+      trailingItem: firstItemOfRow(entryProps.trailingItem),
+    };
+  }
+
+  const rowOnViewableItemsChanged = $derived.by(() => {
+    const onChanged = props.onViewableItemsChanged;
+    if (onChanged === undefined) return undefined;
+    return (rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>): void =>
+      onChanged(expandRowViewability(rowInfo, props.keyExtractor));
+  });
+  const rowViewabilityPairs = $derived(
+    props.viewabilityConfigCallbackPairs?.map(pair => ({
+      viewabilityConfig: pair.viewabilityConfig,
+      onViewableItemsChanged: (rowInfo: IViewableItemsChangedInfo<IRow<ItemT>>): void => {
+        pair.onViewableItemsChanged(expandRowViewability(rowInfo, props.keyExtractor));
+      },
+    })),
+  );
+
+  // Forwarded onto the inner VirtualizedList as a component-prop spread (not a raw attribute
+  // spread on a symbiote-* host tag — that stays banned, svelte-adapter-dom-shim skill §3g(c) —
+  // this lands on another compiled Svelte COMPONENT, an ordinary prop merge). Picked field-by-
+  // field by pickAccessibilityProps, same helper VirtualizedList's own host bag uses.
+  const accessibilityProps = $derived(pickAccessibilityProps(props));
+
+  // ---- imperative handle: delegate straight through to the inner VirtualizedList instance. ----
+  export function scrollToOffset(params: { offset: number; animated?: boolean }): void {
+    inner?.scrollToOffset(params);
+  }
+  export function scrollToIndex(params: {
+    index: number;
+    animated?: boolean;
+    viewOffset?: number;
+    viewPosition?: number;
+  }): void {
+    inner?.scrollToIndex(params);
+  }
+  export function scrollToItem(params: { item: unknown; animated?: boolean; viewPosition?: number }): void {
+    inner?.scrollToItem(params);
+  }
+  export function scrollToEnd(params?: { animated?: boolean }): void {
+    inner?.scrollToEnd(params);
+  }
+  export function flashScrollIndicators(): void {
+    inner?.flashScrollIndicators();
+  }
+  export function getNativeScrollRef(): IScrollViewHandle | null {
+    return inner?.getNativeScrollRef() ?? null;
+  }
+  export function getScrollableNode(): IScrollViewHandle | null {
+    return inner?.getScrollableNode() ?? null;
+  }
+  export function getScrollResponder(): IScrollViewHandle | null {
+    return inner?.getScrollResponder() ?? null;
+  }
+  export function getScrollNode(): ISymbioteNode | null {
+    return inner?.getScrollNode() ?? null;
+  }
+  export function recordInteraction(): void {
+    inner?.recordInteraction();
+  }
+
+  // `{@attach}` arrives as a symbol-keyed prop, which naming individual props below drops.
+  // Re-spread just those onto the inner list, which owns the real host node.
+  const attachments = $derived(pickAttachmentProps(props));
+</script>
+
+{#snippet rowItem({ item: row, index, separators }: { item: IRow<ItemT>; index: number; separators: ISeparators })}
+  <symbiote-view p={{ style: rowStyle }}>
+    {#each row.items as rowItem, column (props.keyExtractor ? props.keyExtractor(rowItem, row.startIndex + column) : String(row.startIndex + column))}
+      <symbiote-view p={{ style: { flex: 1 } }}>
+        {@render props.item({ item: rowItem, index: row.startIndex + column, separators })}
+      </symbiote-view>
+    {/each}
+  </symbiote-view>
+{/snippet}
+
+{#snippet rowSeparator(entryProps: ISeparatorProps<IRow<ItemT>>)}
+  {@render props.separator?.(rowSeparatorProps(entryProps))}
+{/snippet}
+
+{#if numColumns <= SINGLE_COLUMN}
+  <VirtualizedList
+    bind:this={inner}
+    {...accessibilityProps}
+    {...attachments}
+    data={props.data}
+    getItem={getSingleItem}
+    getItemCount={getSingleCount}
+    item={props.item}
+    separator={props.separator}
+    header={props.header}
+    footer={props.footer}
+    empty={props.empty}
+    keyExtractor={props.keyExtractor}
+    getItemLayout={props.getItemLayout}
+    horizontal={props.horizontal}
+    inverted={props.inverted}
+    extraData={props.extraData}
+    onEndReached={props.onEndReached}
+    onEndReachedThreshold={props.onEndReachedThreshold}
+    onStartReached={props.onStartReached}
+    onStartReachedThreshold={props.onStartReachedThreshold}
+    onRefresh={props.onRefresh}
+    refreshing={props.refreshing}
+    progressViewOffset={props.progressViewOffset}
+    onViewableItemsChanged={props.onViewableItemsChanged}
+    viewabilityConfig={props.viewabilityConfig}
+    viewabilityConfigCallbackPairs={props.viewabilityConfigCallbackPairs}
+    onScrollToIndexFailed={props.onScrollToIndexFailed}
+    initialNumToRender={props.initialNumToRender}
+    initialScrollIndex={props.initialScrollIndex}
+    maxToRenderPerBatch={props.maxToRenderPerBatch}
+    updateCellsBatchingPeriod={props.updateCellsBatchingPeriod}
+    windowSize={props.windowSize}
+    stickyHeaderIndices={props.stickyHeaderIndices}
+    maintainVisibleContentPosition={props.maintainVisibleContentPosition}
+    onScroll={props.onScroll}
+    onScrollBeginDrag={props.onScrollBeginDrag}
+    onScrollEndDrag={props.onScrollEndDrag}
+    onMomentumScrollBegin={props.onMomentumScrollBegin}
+    onMomentumScrollEnd={props.onMomentumScrollEnd}
+    scrollEventThrottle={props.scrollEventThrottle}
+    keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
+    keyboardDismissMode={props.keyboardDismissMode}
+    style={props.style}
+    contentContainerStyle={props.contentContainerStyle}
+    class={props.class}
+  />
+{:else}
+  <VirtualizedList
+    bind:this={inner}
+    {...accessibilityProps}
+    {...attachments}
+    data={rows}
+    getItem={getRow}
+    getItemCount={getRowCount}
+    item={rowItem}
+    separator={props.separator ? rowSeparator : undefined}
+    header={props.header}
+    footer={props.footer}
+    empty={props.empty}
+    keyExtractor={rowKeyExtractor}
+    getItemLayout={props.getItemLayout}
+    horizontal={props.horizontal}
+    inverted={props.inverted}
+    extraData={props.extraData}
+    onEndReached={props.onEndReached}
+    onEndReachedThreshold={props.onEndReachedThreshold}
+    onStartReached={props.onStartReached}
+    onStartReachedThreshold={props.onStartReachedThreshold}
+    onRefresh={props.onRefresh}
+    refreshing={props.refreshing}
+    progressViewOffset={props.progressViewOffset}
+    onViewableItemsChanged={rowOnViewableItemsChanged}
+    viewabilityConfig={props.viewabilityConfig}
+    viewabilityConfigCallbackPairs={rowViewabilityPairs}
+    onScrollToIndexFailed={props.onScrollToIndexFailed}
+    initialNumToRender={props.initialNumToRender}
+    initialScrollIndex={props.initialScrollIndex}
+    maxToRenderPerBatch={props.maxToRenderPerBatch}
+    updateCellsBatchingPeriod={props.updateCellsBatchingPeriod}
+    windowSize={props.windowSize}
+    stickyHeaderIndices={props.stickyHeaderIndices}
+    maintainVisibleContentPosition={props.maintainVisibleContentPosition}
+    onScroll={props.onScroll}
+    onScrollBeginDrag={props.onScrollBeginDrag}
+    onScrollEndDrag={props.onScrollEndDrag}
+    onMomentumScrollBegin={props.onMomentumScrollBegin}
+    onMomentumScrollEnd={props.onMomentumScrollEnd}
+    scrollEventThrottle={props.scrollEventThrottle}
+    keyboardShouldPersistTaps={props.keyboardShouldPersistTaps}
+    keyboardDismissMode={props.keyboardDismissMode}
+    style={props.style}
+    contentContainerStyle={props.contentContainerStyle}
+    class={props.class}
+  />
+{/if}

package/build/components/flat-list/index.svelte.d.ts

@@ -0,0 +1,79 @@
+import type { IFlatListProps, IFlatListHandle } from './flat-list-props';
+export type { IFlatListProps, IFlatListHandle };
+import { type ISymbioteNode } from '@symbiote-native/engine';
+import type { IScrollViewHandle } from '../virtualized-list/virtualized-list-props';
+import type { IFlatListProps as IProps } from './flat-list-props';
+declare function $$render<ItemT>(): {
+    props: IProps<ItemT>;
+    exports: {
+        scrollToOffset: (params: {
+            offset: number;
+            animated?: boolean;
+        }) => void;
+        scrollToIndex: (params: {
+            index: number;
+            animated?: boolean;
+            viewOffset?: number;
+            viewPosition?: number;
+        }) => void;
+        scrollToItem: (params: {
+            item: unknown;
+            animated?: boolean;
+            viewPosition?: number;
+        }) => void;
+        scrollToEnd: (params?: {
+            animated?: boolean;
+        }) => void;
+        flashScrollIndicators: () => void;
+        getNativeScrollRef: () => IScrollViewHandle | null;
+        getScrollableNode: () => IScrollViewHandle | null;
+        getScrollResponder: () => IScrollViewHandle | null;
+        getScrollNode: () => ISymbioteNode | null;
+        recordInteraction: () => void;
+    };
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<ItemT> {
+    props(): ReturnType<typeof $$render<ItemT>>['props'];
+    events(): ReturnType<typeof $$render<ItemT>>['events'];
+    slots(): ReturnType<typeof $$render<ItemT>>['slots'];
+    bindings(): "";
+    exports(): {
+        scrollToOffset: (params: {
+            offset: number;
+            animated?: boolean;
+        }) => void;
+        scrollToIndex: (params: {
+            index: number;
+            animated?: boolean;
+            viewOffset?: number;
+            viewPosition?: number;
+        }) => void;
+        scrollToItem: (params: {
+            item: unknown;
+            animated?: boolean;
+            viewPosition?: number;
+        }) => void;
+        scrollToEnd: (params?: {
+            animated?: boolean;
+        } | undefined) => void;
+        flashScrollIndicators: () => void;
+        getNativeScrollRef: () => IScrollViewHandle | null;
+        getScrollableNode: () => IScrollViewHandle | null;
+        getScrollResponder: () => IScrollViewHandle | null;
+        getScrollNode: () => ISymbioteNode | null;
+        recordInteraction: () => void;
+    };
+}
+interface $$IsomorphicComponent {
+    new <ItemT>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<ItemT>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<ItemT>['props']>, ReturnType<__sveltets_Render<ItemT>['events']>, ReturnType<__sveltets_Render<ItemT>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<ItemT>['bindings']>;
+    } & ReturnType<__sveltets_Render<ItemT>['exports']>;
+    <ItemT>(internal: unknown, props: ReturnType<__sveltets_Render<ItemT>['props']> & {}): ReturnType<__sveltets_Render<ItemT>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Index: $$IsomorphicComponent;
+type Index<ItemT> = InstanceType<typeof Index<ItemT>>;
+export default Index;

package/build/components/image/image-logic.d.ts

@@ -0,0 +1,2 @@
+import type { IImageViewProps } from '@symbiote-native/components';
+export declare function buildImageBag(view: IImageViewProps): Record<string, unknown>;

package/build/components/image/image-logic.js

@@ -0,0 +1,125 @@
+// Svelte-side duplicate of core/components/src/view/render-image/index.ts's private prop-mapping
+// helpers (normalizeSource / headersFromAliases / expandSrcSet / readStyleString / readSourceUri /
+// resolveSourceArray). None of them are exported — not even from that file — so per the
+// svelte-adapter-dom-shim skill's §15 ("skip consuming a render-*.ts function's Descriptor output
+// programmatically; hand-author the equivalent markup, reusing only EXPORTED pure helpers"), this
+// module reproduces the mapping directly rather than calling renderImage() and reading its
+// returned Descriptor's `.props`.
+//
+// GENUINE GAP (see the Svelte-components work report): these helpers should be exported from
+// core/components/src/view/render-image/index.ts so no adapter needs this duplication. Until
+// then, this file is kept byte-for-byte equivalent to that source and reuses every primitive that
+// IS already exported (resolveImageSource, flattenStyle, dlog) — only the mid-level composition
+// is duplicated.
+import { dlog, flattenStyle, resolveImageSource, } from '@symbiote-native/engine';
+function normalizeSource(source) {
+    const resolved = resolveImageSource(source);
+    const sources = Array.isArray(resolved) ? resolved : [resolved];
+    dlog(`Image source resolved to ${JSON.stringify(sources)}`);
+    return sources;
+}
+function headersFromAliases(view) {
+    const headers = {};
+    if (view.crossOrigin === 'use-credentials') {
+        headers['Access-Control-Allow-Credentials'] = 'true';
+    }
+    if (view.referrerPolicy !== undefined) {
+        headers['Referrer-Policy'] = view.referrerPolicy;
+    }
+    return headers;
+}
+function expandSrcSet(srcSet, view, headers) {
+    const sources = [];
+    let useSrcForDefaultScale = true;
+    for (const entry of srcSet.split(', ')) {
+        const [uri, xScale = '1x'] = entry.split(' ');
+        if (!xScale.endsWith('x')) {
+            dlog(`Image srcSet: unsupported scale token "${xScale}", skipping`);
+            continue;
+        }
+        const scale = parseInt(xScale.slice(0, -1), 10);
+        if (Number.isNaN(scale))
+            continue;
+        if (scale === 1)
+            useSrcForDefaultScale = false;
+        sources.push({ uri, scale, width: view.width, height: view.height, ...{ headers } });
+    }
+    if (useSrcForDefaultScale && view.src !== undefined) {
+        sources.push({
+            uri: view.src,
+            scale: 1,
+            width: view.width,
+            height: view.height,
+            ...{ headers },
+        });
+    }
+    if (sources.length === 0)
+        dlog('Image srcSet: produced no valid sources');
+    return sources;
+}
+function resolveSourceArray(view) {
+    const headers = headersFromAliases(view);
+    if (view.srcSet !== undefined) {
+        return expandSrcSet(view.srcSet, view, headers);
+    }
+    if (view.src !== undefined) {
+        return [{ uri: view.src, width: view.width, height: view.height, ...{ headers } }];
+    }
+    if (view.source === undefined) {
+        dlog('Image: no source / src / srcSet provided');
+        return [];
+    }
+    const sources = normalizeSource(view.source);
+    if (Object.keys(headers).length > 0 && sources.length === 1) {
+        const [only] = sources;
+        if (typeof only === 'object' && only !== null && typeof Reflect.get(only, 'uri') === 'string') {
+            return [{ ...only, headers }];
+        }
+    }
+    return sources;
+}
+function readStyleString(style, key) {
+    if (style === undefined)
+        return undefined;
+    const flat = flattenStyle(style);
+    const value = Object.hasOwn(flat, key) ? flat[key] : undefined;
+    return typeof value === 'string' ? value : undefined;
+}
+function readSourceUri(source) {
+    const [resolved] = normalizeSource(source);
+    if (typeof resolved === 'object' && resolved !== null) {
+        const uri = Reflect.get(resolved, 'uri');
+        if (typeof uri === 'string')
+            return uri;
+    }
+    return undefined;
+}
+// Builds the exact prop bag renderImage's `mapped` produces, minus the final `el()` wrap — the
+// caller hands the result straight to `<symbiote-image p={bag}>`.
+export function buildImageBag(view) {
+    // `width` / `height` aliases fold into style; explicit style keys win.
+    const foldedStyle = view.width === undefined && view.height === undefined
+        ? view.style
+        : [{ width: view.width, height: view.height }, view.style];
+    const mapped = {
+        ...view.passthrough,
+        style: foldedStyle,
+        source: resolveSourceArray(view),
+        resizeMode: view.resizeMode ?? readStyleString(view.style, 'resizeMode'),
+        tintColor: view.tintColor ?? readStyleString(view.style, 'tintColor'),
+    };
+    // `alt` is the accessibility text: it sets accessibilityLabel and marks the image accessible.
+    // An explicit accessibilityLabel (already folded into passthrough) still wins.
+    if (view.alt !== undefined) {
+        if (mapped.accessibilityLabel === undefined)
+            mapped.accessibilityLabel = view.alt;
+        mapped.accessible = true;
+    }
+    if (view.defaultSource !== undefined)
+        mapped.defaultSource = normalizeSource(view.defaultSource);
+    if (view.loadingIndicatorSource !== undefined) {
+        mapped.loadingIndicatorSrc = readSourceUri(view.loadingIndicatorSource);
+    }
+    dlog('Image -> RCTImageView');
+    return mapped;
+}

package/build/components/image/image-props.d.ts

@@ -0,0 +1,5 @@
+import type { IImageProps as IImageBaseProps } from '@symbiote-native/components';
+import type { ISvelteClassValue } from '../../class-value';
+export type IImageProps = IImageBaseProps & {
+    class?: ISvelteClassValue;
+};

package/build/components/image/image-props.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,3 @@
+export type { IImageProps } from './image-props';
+export type { IImageStatics } from '@symbiote-native/components';
+export declare const Image: import("svelte").Component<import("./image-props").IImageProps, {}, ""> & import("@symbiote-native/engine").IImageStatics;

package/build/components/image/index.js

@@ -0,0 +1,10 @@
+// Image statics (getSize / prefetch / queryCache / abortPrefetch / resolveAssetSource) attach onto
+// the component value, mirroring RN's `Image.getSize` static surface — shared verbatim via
+// @symbiote-native/engine's imageStatics, the same source React's and Vue's Image use. A `.svelte`
+// file's own module type resolves through svelte's ambient `declare module '*.svelte'` fallback (a
+// bare value export, not props-parameterized — see view-props.ts's header comment for the general
+// reason), so the statics are attached here in a plain sibling `.ts` file rather than inside
+// `index.svelte` itself.
+import ImageComponent from './index.svelte';
+import { imageStatics } from '@symbiote-native/components';
+export const Image = Object.assign(ImageComponent, imageStatics);

package/build/components/image/index.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>
+  // Image: render-only (no state). Source resolution / width-height fold / resizeMode & tintColor
+  // style-read / alt->accessibility fold mirror core/components/src/view/render-image/index.ts's
+  // renderImage() exactly, via image-logic.ts's buildImageBag (see that file's header for why the
+  // logic is duplicated rather than the Descriptor consumed). renderImage always produces a
+  // SINGLE symbiote-image node, so the markup here is just that one host tag.
+  //
+  // Statics (getSize/prefetch/queryCache/…) are attached in the sibling `index.ts`, not here — a
+  // `.svelte` file's default export resolves through svelte's ambient module fallback (a bare
+  // value, not something `Object.assign` can usefully augment from inside the component itself).
+  import type { IImageProps } from './image-props';
+
+  export type { IImageProps };
+</script>
+
+<script lang="ts">
+  import { resolveAccessibilityProps } from '@symbiote-native/components';
+  import { buildImageBag } from './image-logic';
+  import { createAttachmentsSync } from '../../runes/attachments';
+  import type { ShimElement } from '../../dom-shim';
+
+  let {
+    source,
+    defaultSource,
+    loadingIndicatorSource,
+    style,
+    resizeMode,
+    tintColor,
+    src,
+    srcSet,
+    alt,
+    width,
+    height,
+    crossOrigin,
+    referrerPolicy,
+    ...passthrough
+  }: IImageProps = $props();
+
+  const bag = $derived(
+    buildImageBag({
+      source,
+      defaultSource,
+      loadingIndicatorSource,
+      style,
+      resizeMode,
+      tintColor,
+      src,
+      srcSet,
+      alt,
+      width,
+      height,
+      crossOrigin,
+      referrerPolicy,
+      passthrough: resolveAccessibilityProps(passthrough),
+    }),
+  );
+
+  // See View.svelte's note on `{@attach}`.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, passthrough);
+  });
+</script>
+
+<symbiote-image p={bag} bind:this={hostShim} />

package/build/components/image/index.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { IImageProps } from './image-props';
+export type { IImageProps };
+declare const Index: import("svelte").Component<IImageProps, {}, "">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/build/components/image-background/image-background-props.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { IStyleProp, IViewStyle } from '@symbiote-native/engine';
+import type { IImageProps } from '@symbiote-native/components';
+import type { ISvelteClassValue } from '../../class-value';
+export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
+    style?: IStyleProp<IViewStyle>;
+    imageStyle?: IStyleProp<IViewStyle> | string;
+    class?: ISvelteClassValue;
+    children?: Snippet;
+}

package/build/components/image-background/image-background-props.js

@@ -0,0 +1 @@
+export {};