@symbiote-native/vue 1.0.0 → 3.0.0

package/babel-lower-host-primitives.cjs

@@ -1,225 +0,0 @@
-// Compile-time lowering of <View>/<Text> to the intrinsic tags the renderer maps to Fabric, for the
-// TSX/JSX authoring path. The SFC twin is the nodeTransform in metro-vue-transformer.cjs — same
-// rewrite, different vehicle, and until this existed TSX paid a tax SFC no longer did.
-//
-// WHY. Vue charges a full component instance even for a FUNCTIONAL component
-// (createComponentInstance + initProps + initSlots + setupRenderEffect). View and Text are ~73% of
-// the static tags in a real screen, so that is one instance per node on nearly three quarters of
-// the tree. Lowered, they become plain element vnodes the renderer's nodeOps handle directly.
-// Measured on the SFC path: 25-29% off all three create-shaped rows on device.
-//
-// Do NOT ship this plugin without also configuring @vue/babel-plugin-jsx's `isCustomElement` to
-// answer true for `symbiote-*` — see ./babel-jsx.cjs, which is why the two are handed out together
-// and should not be wired separately. Without it a lowered tag compiles to
-// `createVNode(resolveComponent("symbiote-view"), …, {default: () => […]})`: a component that
-// resolves to nothing, with slot children an element path would never mount.
-//
-// .cjs because Babel require()s it and this package is "type": "module".
-
-const SOURCE = '@symbiote-native/vue';
-
-// The tag map is the SHARED SPEC's, not this file's — four transforms each carried a copy before
-// it existed and they had already drifted. Only `intrinsic` is read: Vue applies the `id` ->
-// `nativeID` alias at RUNTIME (patchProp), because compile time reaches two of Vue's four paths to
-// a node. See the spec's own `aliases` comment.
-const {
-  HOST_PRIMITIVES,
-} = require('@symbiote-native/components/host-primitives');
-
-// A functional `style` keeps the RN idiom AND lowers, by being CALLED once per state at bag-build
-// time instead of being handed to a component that calls it per press.
-//
-
-const LOWERABLE = new Map(
-  Object.entries(HOST_PRIMITIVES).map(([name, spec]) => [
-    name,
-    {
-      intrinsic: spec.intrinsic,
-      observesState: spec.observesState === true,
-      intrinsicWhen: spec.intrinsicWhen,
-    },
-  ]),
-);
-
-// REFUSAL_CATEGORIES.dynamicIntrinsicChoice. A primitive whose spec entry carries `intrinsicWhen`
-// picks between TWO Fabric views by the value of one prop, and the transform prints a STATIC tag
-// name — so it can only choose when that value is a compile-time literal.
-//
-// This is not the unreadable-VALUE hazard wearing a new hat, and the difference decides how hard to
-// refuse: an unreadable value lands a prop wrong, which a later write can still correct; the wrong
-// choice here commits the wrong native view, and no prop write moves a node between views. So only
-// the two provable shapes resolve and everything else keeps the component.
-//
-// `multiline="true"` — a STRING attribute — is deliberately NOT one of them, though the component
-// would treat it as truthy. A string that reads as a boolean is the shape where an author and the
-// runtime disagree most often (`multiline="false"` is truthy), and refusing costs only the
-// optimisation while guessing costs the right view.
-//
-// Returns the tag to emit, or undefined to refuse.
-function intrinsicWhenFor(openingElement, entry) {
-  const choice = entry.intrinsicWhen;
-  if (choice === undefined) return entry.intrinsic;
-
-  let resolved = false;
-  for (const attribute of openingElement.attributes) {
-    // A spread may carry the selector prop, and the transform cannot see inside it. Nothing else
-    // in this loop can tell that apart from "the prop is absent", so it must refuse outright.
-    if (attribute.type === 'JSXSpreadAttribute') return undefined;
-    if (attribute.type !== 'JSXAttribute') continue;
-    if (attribute.name.type !== 'JSXIdentifier') continue;
-    if (attribute.name.name !== choice.prop) continue;
-
-    // A bare `multiline` with no value is JSX for `true`.
-    if (attribute.value === null || attribute.value === undefined) {
-      resolved = true;
-      continue;
-    }
-    if (attribute.value.type !== 'JSXExpressionContainer') return undefined;
-    const expression = attribute.value.expression;
-    if (expression.type !== 'BooleanLiteral') return undefined;
-    resolved = expression.value;
-  }
-
-  return resolved ? choice.intrinsic : entry.intrinsic;
-}
-
-// The shared spec's allow-list for `stateInTemplate`, spelled the same in all five transforms:
-// only a provably inert value shape lowers. `style={styleFn}` is an Identifier at compile time and
-// no transform can tell an object from a function, so anything that is not one of these refuses. A
-// narrow "refuse a function literal" reading passes every obvious test and then fails on the one
-// call site that hoists its style into a variable — which is what ActionButton does.
-const INERT_VALUE_TYPES = new Set([
-  'ObjectExpression',
-  'ArrayExpression',
-  'StringLiteral',
-  'NumericLiteral',
-  'BooleanLiteral',
-  'NullLiteral',
-  'TemplateLiteral',
-]);
-
-// A bare `style="x"` attribute value is a JSXText-ish literal and inert; `style={…}` is inert only
-// when the expression inside is.
-function isInertValueAttribute(value) {
-  if (value === null || value === undefined) return true;
-  if (value.type !== 'JSXExpressionContainer')
-    return INERT_VALUE_TYPES.has(value.type);
-  return INERT_VALUE_TYPES.has(value.expression.type);
-}
-
-// The JSX twin of metro-vue-transformer.cjs's refusesLowering — same three categories, different
-// AST. A primitive that owns state can lower only when the template does not read that state,
-// because a lowered element has no instance to read it from. Refusing is always safe; lowering a
-// button that reads `pressed` gives a button that renders and does not respond, on device, with
-// nothing red.
-function refusesLowering(openingElement, children, types) {
-  for (const attribute of openingElement.attributes) {
-    // `{...props}` — an attribute set this pass cannot enumerate, so it may hide a functional
-    // `style`. REFUSAL_CATEGORIES.unreadableAttributeSet.
-    if (attribute.type === 'JSXSpreadAttribute') return true;
-    if (attribute.type !== 'JSXAttribute') continue;
-    if (attribute.name.type !== 'JSXIdentifier') continue;
-
-    // REFUSAL_CATEGORIES.instanceBoundDirective. `ref` on a COMPONENT yields the component
-    // instance; on an element it yields the host node. Lowering silently changes which one the app
-    // receives, so a `pressableRef.value.measure()` starts reaching a different object — a runtime
-    // failure with nothing red at build time. Found by the shared verdict table, not by a Vue test.
-    if (attribute.name.name === 'ref') return true;
-
-    if (attribute.name.name !== 'style') continue;
-
-    // REFUSAL_CATEGORIES.stateInTemplate no longer fires on a `style` at all. Every shape is
-    // covered: an inert value rides through, and anything else is either called directly or handed
-    // to the runtime helper, which decides with a `typeof` what no compile-time analysis could.
-    // What still refuses is above (an unreadable attribute set) and below (a child reading state).
-    if (!isInertValueAttribute(attribute.value)) continue;
-  }
-
-  // A function child that TAKES an argument is the render-prop form, i.e. children as a function
-  // of press state. A zero-arity function child is an ordinary lazy child and lowers fine — the
-  // distinction the shared spec spells out for renderPropChild.
-  return children.some(child => {
-    if (child.type !== 'JSXExpressionContainer') return false;
-    const { expression } = child;
-    return (
-      (expression.type === 'ArrowFunctionExpression' ||
-        expression.type === 'FunctionExpression') &&
-      expression.params.length >= 1
-    );
-  });
-}
-
-// Every local name bound to a lowerable export of @symbiote-native/vue in THIS file, honouring
-// `import { View as Box }`. Matching bare tag names instead would rewrite an app's own <View>.
-function lowerableLocalNames(programPath) {
-  const names = new Map();
-  programPath.node.body.forEach(statement => {
-    if (
-      statement.type !== 'ImportDeclaration' ||
-      statement.source.value !== SOURCE
-    )
-      return;
-    statement.specifiers.forEach(specifier => {
-      if (specifier.type !== 'ImportSpecifier') return;
-      const imported =
-        specifier.imported.type === 'Identifier'
-          ? specifier.imported.name
-          : specifier.imported.value;
-      const entry = LOWERABLE.get(imported);
-      if (entry !== undefined) names.set(specifier.local.name, entry);
-    });
-  });
-  return names;
-}
-
-// Refusals apply ONLY to a primitive that owns state. View and Text still lower unconditionally,
-// and that remains deliberate: their only folds are kebab->camel and RN's Text defaults, both of
-// which moved into the renderer (normalizeVueAttrKey in patchProp, seedTextDefaults/textDefaultFor
-// in createElement) when the SFC lowering landed, so nothing a spread could hide is left. Adding a
-// refusal for them would make TSX diverge from SFC, which lowers them unconditionally too.
-module.exports = function lowerHostPrimitives({ types }) {
-  return {
-    name: 'symbiote-vue-lower-host-primitives',
-    visitor: {
-      Program(programPath) {
-        const names = lowerableLocalNames(programPath);
-        if (names.size === 0) return;
-        programPath.traverse({
-          JSXElement(elementPath) {
-            const { openingElement, closingElement } = elementPath.node;
-            const tag = openingElement.name;
-            if (tag.type !== 'JSXIdentifier') return;
-            const entry = names.get(tag.name);
-            if (entry === undefined) return;
-            // Resolved BEFORE the state refusal and outside its `observesState` gate: the two
-            // guard different things, and this one applies to a primitive that owns no state at
-            // all. Reading it as "another case for refusesLowering" would put it behind that flag
-            // and it would never run for TextInput.
-            const intrinsic = intrinsicWhenFor(openingElement, entry);
-            if (intrinsic === undefined) return;
-            if (
-              entry.observesState &&
-              refusesLowering(openingElement, elementPath.node.children, types)
-            )
-              return;
-            // A shadowing local binding (a parameter, or a `const View = …` in scope) is NOT our
-            // import even though the name matches. Only rewrite where the binding at this use site
-            // is still the module-level import.
-            const binding = elementPath.scope.getBinding(tag.name);
-            if (binding === undefined || binding.kind !== 'module') return;
-            // NO state-style expansion. A functional `style` reaches `routeProp` untouched and
-            // the engine resolves it at both values of `pressed` (`isStyleCallback`), so rewriting
-            // the attribute into a pair here would be this transform carrying BEHAVIOUR — what
-            // `tests/lowering-transform-carries-no-behaviour.test.ts` exists to keep out. Removed
-            // from BOTH Vue paths in one change: the SFC twin sees an expression as source text
-            // where this one has the AST, so a split removed from one and not the other is the
-            // exact drift `.claude/rules/adapter-parity-audit.md` records for this pair.
-            openingElement.name = types.jsxIdentifier(intrinsic);
-            if (closingElement)
-              closingElement.name = types.jsxIdentifier(intrinsic);
-          },
-        });
-      },
-    },
-  };
-};

package/build/components/activity-indicator/index.android.d.ts

@@ -1,4 +0,0 @@
-export type { IActivityIndicatorProps } from './shared';
-export declare const ActivityIndicator: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/index.android.js

@@ -1,10 +0,0 @@
-// ActivityIndicator on Android: AndroidProgressBar needs `styleAttr` (it drives the
-// ProgressBar's setStyle(); without it the view throws "setStyle() not called") and
-// `indeterminate: true`, and its default color is the theme (null). Metro picks this on an
-// Android host; no Platform.OS read. Mirrors the React adapter's Android binding.
-import { createActivityIndicator } from './shared.js';
-export const ActivityIndicator = createActivityIndicator({
-    // RN: `color = Platform.OS === 'ios' ? GRAY : null`. Android lets the theme color it.
-    defaultColor: null,
-    nativeExtras: { styleAttr: 'Normal', indeterminate: true },
-});

package/build/components/activity-indicator/index.d.ts

@@ -1 +0,0 @@
-export * from './index.ios';

package/build/components/activity-indicator/index.ios.d.ts

@@ -1,4 +0,0 @@
-export type { IActivityIndicatorProps } from './shared';
-export declare const ActivityIndicator: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/index.ios.js

@@ -1,10 +0,0 @@
-// ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum + a GRAY default
-// color and no extra native props. Also the base (activity-indicator.ts re-exports it) for
-// headless / web. Mirrors the React adapter's iOS binding.
-import { createActivityIndicator } from './shared.js';
-// RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
-const IOS_DEFAULT_COLOR = '#999999';
-export const ActivityIndicator = createActivityIndicator({
-    defaultColor: IOS_DEFAULT_COLOR,
-    nativeExtras: {},
-});

package/build/components/activity-indicator/index.js

@@ -1,4 +0,0 @@
-// Base / default ActivityIndicator. Re-exports the iOS build. Metro overrides this with
-// activity-indicator.ios.ts / .android.ts on a real host; under tsx / tsc / web the host
-// resolves here. Filename is the selector, no Platform.OS read.
-export * from './index.ios.js';

package/build/components/activity-indicator/shared.d.ts

@@ -1,8 +0,0 @@
-import type { IActivityIndicatorPlatform, IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
-    class?: IClassNameValue;
-};
-export declare function createActivityIndicator(platform: IActivityIndicatorPlatform): import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/build/components/activity-indicator/shared.js

@@ -1,48 +0,0 @@
-// ActivityIndicator, the Vue lifecycle half. The render (size translation, wrapper +
-// spinner, color omission) lives framework-agnostic in @symbiote-native/components and is shared
-// verbatim with the React adapter; here Vue only normalizes inputs, calls the render fn,
-// and bridges the Descriptor to a vnode. No reactivity of its own; this component is
-// render-only (the spinner animates natively).
-//
-// Inputs arrive as attrs, not a typed props block, the same passthrough shape as
-// components.ts. RN's per-platform bits (iOS GRAY default; Android theme/null + styleAttr +
-// indeterminate) are supplied by the .ios/.android files via `IActivityIndicatorPlatform`.
-import { defineComponent } from '@vue/runtime-core';
-import { renderActivityIndicator } from '@symbiote-native/components';
-import { descriptorToVue } from '../../descriptor-to-vue.js';
-import { normalizeVueAttrs } from '../../utils/normalize-attrs.js';
-function normalizeSize(size) {
-    if (size === 'large')
-        return 'large';
-    if (typeof size === 'number')
-        return size;
-    return 'small';
-}
-// Narrow attrs.style to a plain ViewStyle object (assignable to the render fn's StyleProp
-// param) without a cast. Array/registered styles degrade to undefined; the engine's own
-// flatten handles those when an app passes them; the wrapper only needs the object form.
-function isViewStyleObject(value) {
-    return typeof value === 'object' && value !== null && !Array.isArray(value);
-}
-export function createActivityIndicator(platform) {
-    return defineComponent({
-        name: 'ActivityIndicator',
-        inheritAttrs: false,
-        setup(_props, { attrs: rawAttrs }) {
-            return () => {
-                // Defaults match RN (animating / hidesWhenStopped true, size 'small'); the rest of
-                // attrs (testID, accessibility, onLayout) forwards onto the wrapper via passthrough.
-                const attrs = normalizeVueAttrs(rawAttrs);
-                const { animating, color, hidesWhenStopped, size, style, ...passthrough } = attrs;
-                return descriptorToVue(renderActivityIndicator({
-                    animating: animating !== false,
-                    hidesWhenStopped: hidesWhenStopped !== false,
-                    size: normalizeSize(size),
-                    color: typeof color === 'string' ? color : undefined,
-                    style: isViewStyleObject(style) ? style : undefined,
-                    passthrough,
-                }, platform));
-            };
-        },
-    });
-}

package/build/components/button.d.ts

@@ -1,14 +0,0 @@
-import { type IButtonProps as ICoreButtonProps } from '@symbiote-native/components';
-import type { IClassNameValue, ISymbioteEvent } from '@symbiote-native/engine';
-export type IButtonProps = Omit<ICoreButtonProps, 'onPress'> & {
-    class?: IClassNameValue;
-};
-type IButtonEmits = {
-    press: (event: ISymbioteEvent) => boolean;
-};
-export declare const Button: import("vue").DefineSetupFnComponent<IButtonProps, IButtonEmits, {}, Omit<ICoreButtonProps, "onPress"> & {
-    class?: IClassNameValue;
-} & {
-    onPress?: ((event: ISymbioteEvent) => any) | undefined;
-}, import("vue").PublicProps>;
-export {};

package/build/components/button.js

@@ -1,61 +0,0 @@
-// Button for Vue. The minimal cross-platform button in RN's iOS shape (Button.js): a
-// TouchableOpacity wrapping a Text. The base text style, the role constant, and the color fold are
-// shared in @symbiote-native/components/view; here Vue only composes its TouchableOpacity + Text and
-// forwards the native-only props. The Vue twin of the React adapter's Button.
-import { defineComponent, h } from '@vue/runtime-core';
-import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
-import { HOST_TEXT } from '../components.js';
-import { TouchableOpacity } from './touchable.js';
-import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-// The props Button consumes / re-maps itself; everything else (accessibility, aria, TV-focus,
-// testID, nativeID) forwards to the TouchableOpacity. `title` becomes the Text child; onPress and
-// disabled re-map; touchSoundDisabled maps to the pressable's android_disableSound.
-const HANDLED = [
-    'title',
-    'color',
-    'touchSoundDisabled',
-    'accessibilityRole',
-    'accessible',
-    'accessibilityState',
-];
-function forwardAttrs(attrs) {
-    const result = {};
-    for (const key of Object.keys(attrs)) {
-        if (!HANDLED.includes(key))
-            result[key] = attrs[key];
-    }
-    return result;
-}
-export const Button = defineComponent((_props, { attrs: rawAttrs, emit }) => {
-    return () => {
-        const attrs = normalizeVueAttrs(rawAttrs);
-        const title = typeof attrs.title === 'string' ? attrs.title : '';
-        const color = typeof attrs.color === 'string' ? attrs.color : undefined;
-        const disabled = attrs.disabled === true ? true : undefined;
-        const touchSoundDisabled = attrs.touchSoundDisabled === true ? true : undefined;
-        const textStyle = resolveButtonTextStyle(color, disabled);
-        // RN's Button sets role=button, is accessible, and propagates the disabled accessibility
-        // state. The caller's props pass through, but Button's fixed role / accessible / disabled-
-        // state win, applied after the forwarded spread. touchSoundDisabled → android_disableSound.
-        const touchableProps = {
-            ...forwardAttrs(attrs),
-            disabled,
-            android_disableSound: touchSoundDisabled,
-            accessibilityRole: BUTTON_ACCESSIBILITY_ROLE,
-            accessible: true,
-            accessibilityState: { disabled },
-            onPress: (event) => emit('press', event),
-        };
-        return h(TouchableOpacity, touchableProps, {
-            // The intrinsic tag, not our <Text> component — see the note at HOST_VIEW. RN's Text
-            // defaults are seeded by the renderer for a bare tag (seedTextDefaults).
-            default: () => [h(HOST_TEXT, { style: textStyle }, title)],
-        });
-    };
-}, {
-    name: 'Button',
-    inheritAttrs: false,
-    emits: {
-        press: (_event) => true,
-    },
-});

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

@@ -1,9 +0,0 @@
-import { type FunctionalComponent } from '@vue/runtime-core';
-import { type IImageProps } from '@symbiote-native/components';
-import { type IClassNameValue, type IStyleProp, type IViewStyle } from '@symbiote-native/engine';
-export interface IImageBackgroundProps extends Omit<IImageProps, 'style'> {
-    style?: IStyleProp<IViewStyle>;
-    imageStyle?: IStyleProp<IViewStyle> | string;
-    class?: IClassNameValue;
-}
-export declare const ImageBackground: FunctionalComponent<{}, {}, any, {}>;

package/build/components/image-background.js

@@ -1,103 +0,0 @@
-// ImageBackground: the Vue lifecycle half. The composition (the absolute-fill Image behind the
-// children, the dimension-proxy + style-merge math) lives framework-agnostic in
-// @symbiote-native/components/renderImageBackground, shared verbatim with React; Vue narrows the
-// untyped attrs into the typed Image view, folds aria/role, bridges the Descriptor to vnodes, and
-// appends the slot children ON TOP of the inner image.
-//
-// FUNCTIONAL, not a stateful defineComponent: render-only, no state.
-import { h } from '@vue/runtime-core';
-import { renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { resolveClassName, } from '@symbiote-native/engine';
-import { descriptorToVue } from '../descriptor-to-vue.js';
-import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-function asString(value) {
-    return typeof value === 'string' ? value : undefined;
-}
-function asNumber(value) {
-    return typeof value === 'number' ? value : undefined;
-}
-function asSource(value) {
-    if (typeof value === 'number')
-        return value;
-    if (typeof value === 'object' && value !== null)
-        return value;
-    return undefined;
-}
-function isResizeMode(value) {
-    return (value === 'cover' ||
-        value === 'contain' ||
-        value === 'stretch' ||
-        value === 'repeat' ||
-        value === 'center');
-}
-function asResizeMode(value) {
-    return isResizeMode(value) ? value : undefined;
-}
-function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials'
-        ? value
-        : undefined;
-}
-function isStyleProp(value) {
-    return typeof value === 'object' && value !== null;
-}
-function toChildVNode(child) {
-    return typeof child === 'string' ? child : descriptorToVue(child);
-}
-const HANDLED_ATTRS = [
-    'style',
-    'imageStyle',
-    'class',
-    'source',
-    'defaultSource',
-    'loadingIndicatorSource',
-    'resizeMode',
-    'tintColor',
-    'src',
-    'srcSet',
-    'alt',
-    'width',
-    'height',
-    'crossOrigin',
-    'referrerPolicy',
-];
-function forwardAttrs(attrs) {
-    const result = {};
-    for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
-            result[key] = attrs[key];
-    }
-    return result;
-}
-const ImageBackgroundComponent = (_props, { attrs: rawAttrs, slots }) => {
-    const attrs = normalizeVueAttrs(rawAttrs);
-    const wrapper = renderImageBackground({
-        style: isStyleProp(attrs.style) ? attrs.style : undefined,
-        imageStyle: typeof attrs.imageStyle === 'string'
-            ? resolveClassName(attrs.imageStyle)
-            : isStyleProp(attrs.imageStyle)
-                ? attrs.imageStyle
-                : undefined,
-        image: {
-            source: asSource(attrs.source),
-            defaultSource: asSource(attrs.defaultSource),
-            loadingIndicatorSource: asSource(attrs.loadingIndicatorSource),
-            resizeMode: asResizeMode(attrs.resizeMode),
-            tintColor: asString(attrs.tintColor),
-            src: asString(attrs.src),
-            srcSet: asString(attrs.srcSet),
-            alt: asString(attrs.alt),
-            width: asNumber(attrs.width),
-            height: asNumber(attrs.height),
-            crossOrigin: asCrossOrigin(attrs.crossOrigin),
-            referrerPolicy: asString(attrs.referrerPolicy),
-            passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
-        },
-    });
-    // wrapper = symbiote-view > [imageDescriptor]; the slot children paint AFTER the image (on top).
-    const slotChildren = slots.default !== undefined ? slots.default() : [];
-    return h(wrapper.type, { ...wrapper.props, key: wrapper.key, class: attrs.class }, [...wrapper.children.map(toChildVNode), ...slotChildren]);
-};
-ImageBackgroundComponent.displayName = 'ImageBackground';
-ImageBackgroundComponent.inheritAttrs = false;
-export const ImageBackground = ImageBackgroundComponent;

package/build/components/image.d.ts

@@ -1,9 +0,0 @@
-import type { FunctionalComponent } from '@vue/runtime-core';
-import { type IImageProps as IImageBaseProps, type IImageStatics } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export { setImageSourceResolver } from '@symbiote-native/components';
-export type { IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, } from '@symbiote-native/components';
-export type IImageProps = IImageBaseProps & {
-    class?: IClassNameValue;
-};
-export declare const Image: FunctionalComponent<IImageProps> & IImageStatics;

package/build/components/image.js

@@ -1,90 +0,0 @@
-// Image: the Vue lifecycle half. The full fold (source/src/srcSet resolution, width/height ->
-// style fold, resizeMode/tintColor, alt -> accessibility, and the native source array) lives
-// framework-agnostic in @symbiote-native/components, shared verbatim with React; Vue narrows the
-// untyped attrs into renderImage's typed view, folds aria/role, bridges the Descriptor to a
-// vnode, and carries the Image statics (getSize/prefetch/queryCache/...).
-//
-// FUNCTIONAL, not a stateful defineComponent: Animated.Image wraps it via createAnimatedComponent,
-// which captures the host node through a ref that only falls through on a functional component
-// (a defineComponent's ref resolves to a useless component proxy; see components.ts).
-import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToVue } from '../descriptor-to-vue.js';
-import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
-export { setImageSourceResolver } from '@symbiote-native/components';
-function asString(value) {
-    return typeof value === 'string' ? value : undefined;
-}
-function asNumber(value) {
-    return typeof value === 'number' ? value : undefined;
-}
-function asSource(value) {
-    if (typeof value === 'number')
-        return value;
-    if (typeof value === 'object' && value !== null)
-        return value;
-    return undefined;
-}
-function isResizeMode(value) {
-    return (value === 'cover' ||
-        value === 'contain' ||
-        value === 'stretch' ||
-        value === 'repeat' ||
-        value === 'center');
-}
-function asResizeMode(value) {
-    return isResizeMode(value) ? value : undefined;
-}
-function asCrossOrigin(value) {
-    return value === 'anonymous' || value === 'use-credentials'
-        ? value
-        : undefined;
-}
-function isStyleProp(value) {
-    return typeof value === 'object' && value !== null;
-}
-const HANDLED_ATTRS = [
-    'source',
-    'defaultSource',
-    'loadingIndicatorSource',
-    'style',
-    'resizeMode',
-    'tintColor',
-    'src',
-    'srcSet',
-    'alt',
-    'width',
-    'height',
-    'crossOrigin',
-    'referrerPolicy',
-];
-function forwardAttrs(attrs) {
-    const result = {};
-    for (const key of Object.keys(attrs)) {
-        if (!HANDLED_ATTRS.includes(key))
-            result[key] = attrs[key];
-    }
-    return result;
-}
-const ImageComponent = (_props, { attrs: rawAttrs }) => {
-    const attrs = normalizeVueAttrs(rawAttrs);
-    return descriptorToVue(renderImage({
-        source: asSource(attrs.source),
-        defaultSource: asSource(attrs.defaultSource),
-        loadingIndicatorSource: asSource(attrs.loadingIndicatorSource),
-        style: isStyleProp(attrs.style) ? attrs.style : undefined,
-        resizeMode: asResizeMode(attrs.resizeMode),
-        tintColor: asString(attrs.tintColor),
-        src: asString(attrs.src),
-        srcSet: asString(attrs.srcSet),
-        alt: asString(attrs.alt),
-        width: asNumber(attrs.width),
-        height: asNumber(attrs.height),
-        crossOrigin: asCrossOrigin(attrs.crossOrigin),
-        referrerPolicy: asString(attrs.referrerPolicy),
-        passthrough: resolveAccessibilityProps(forwardAttrs(attrs)),
-    }));
-};
-ImageComponent.displayName = 'Image';
-ImageComponent.inheritAttrs = false;
-// Statics attached like RN (Image.getSize/prefetch/...), shared verbatim with React.
-export const Image = Object.assign(ImageComponent, imageStatics);