@symbiote-native/solid 1.0.0 → 2.0.0

package/babel-lower-host-primitives.cjs

@@ -1,323 +0,0 @@
-// Compile-time lowering of <View>/<Text> to the intrinsic tags the renderer maps to Fabric.
-//
-// WHY. Solid charges a props PROXY per component: `<View>` compiles to `createComponent(View, …)`,
-// and the component body then runs splitProps + withStableKeys + mergeProps + spread. Measured
-// 2026-08-23 on a 4 000-row create: keys/get/getOwnPropertyDescriptor traps 16.2% of the whole
-// create, splitProps another 6.1%. Lowered, the same element compiles to `createElement(tag)` plus
-// one `setProp` per attribute — no Proxy, no bag object, no spread render effect. Headless A/B with
-// both arms compiled for real and createNode asserted equal at 36 002: -24.3% min / -30.0% median.
-//
-// The Vue twin is the nodeTransform in adapters/vue/metro-vue-transformer.cjs, and the two share
-// their central rule: lower ONLY a tag this file imported from us, never a bare name match, or an
-// app's own <View> gets rewritten.
-//
-// THE SECOND RULE IS THE ONE THAT KEEPS IT HONEST: lower only when the WHOLE attribute set is
-// visible. The wrapper components do real work besides forwarding — resolveAccessibilityProps
-// folds aria-*/role into the composite accessibilityState/accessibilityValue, and `id` is RN's
-// W3C alias for `nativeID`. Deleting the wrapper without carrying those over breaks accessibility
-// silently. `id` is a pure rename and is done below FROM THE SHARED SPEC; the aria fold is a BAG
-// operation, so an
-// element carrying aria-*/role — or a spread whose keys cannot be read — is left as a component.
-// A folded-at-compile-time aria bag is a possible follow-up (the bag exists statically, so it
-// would cost nothing at runtime); refusing is what makes shipping this safe without it.
-//
-// .cjs because Babel require()s it and this package is "type": "module".
-
-// The tag map and the per-tag folds come from the SHARED spec, not from a copy here. Four
-// transforms carried their own before it existed and they had already disagreed on `id` (see that
-// file's `aliases` comment). Data only — every line of AST work below stays this adapter's, and so
-// does the whole refusal mechanism; only the SPECIFICATION is shared.
-const {
-  HOST_PRIMITIVES,
-  REFUSAL_CATEGORIES,
-} = require('@symbiote-native/components/host-primitives');
-
-const SOURCE = '@symbiote-native/solid';
-
-// name -> a projection of the shared spec. Built once at plugin load, so the per-element path stays
-// two Map lookups.
-//
-// This is a WHITELIST, and it fails silently in one direction: a field the shared spec grows and
-// this list does not copy simply never reaches the detections, which then behave as if it were
-// absent. Cost measured 2026-08-31 — `intrinsicWhen` was implemented end to end and every
-// multiline case still lowered to the single-line tag, because the field was dropped here. Add a
-// field to the spec, add it here.
-const LOWERABLE = new Map(
-  Object.entries(HOST_PRIMITIVES).map(([name, spec]) => [
-    name,
-    {
-      intrinsic: spec.intrinsic,
-      aliases: new Map(Object.entries(spec.aliases)),
-      // Every primitive refuses on the bag fold and on anything unreadable. A primitive whose
-      // STATE the template can observe refuses on more, and only the spec knows which those are —
-      // `observesState` is set for a tag the shared spec marks that way, so a transform that has
-      // not implemented the extra detections simply never sees such a tag in its map.
-      observesState: spec.observesState === true,
-      // The two-intrinsic selector (`{ prop, intrinsic }`), absent for a primitive with one tag.
-      intrinsicWhen: spec.intrinsicWhen,
-    },
-  ]),
-);
-
-function attributeName(attribute) {
-  const { name } = attribute;
-  if (name.type === 'JSXIdentifier') return name.name;
-  // JSXNamespacedName — `aria-label` parses as an identifier, but `xml:lang` style names land here.
-  return `${name.namespace.name}:${name.name.name}`;
-}
-
-// Every local name bound to a lowerable export of @symbiote-native/solid in THIS file, honouring
-// `import { View as Box }`. A file that imports nothing from us yields an empty map and is skipped
-// whole.
-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 spec = LOWERABLE.get(imported);
-      if (spec !== undefined) names.set(specifier.local.name, spec);
-    });
-  });
-  return names;
-}
-
-// REFUSAL_CATEGORIES.renderPropChild — a child function that TAKES the state.
-//
-// ARITY, not `typeof`, and that distinction is the whole rule. A zero-argument arrow is an ordinary
-// Solid child (`JSX.Element` covers `() => Element`), exactly as `<For>`'s map fn is; only a
-// function that accepts the state argument is a render prop. Measured over `examples/solid`: 12 of
-// the 19 `<Pressable>` sites pass a function child and TEN of those are zero-arity, so refusing on
-// `typeof` alone would throw away ten lowerable sites — including `ActionButton`, whose one
-// definition is instantiated 146 times.
-function isRenderPropChild(child) {
-  if (child.type !== 'JSXExpressionContainer') return false;
-  const { expression } = child;
-  return (
-    (expression.type === 'ArrowFunctionExpression' ||
-      expression.type === 'FunctionExpression') &&
-    expression.params.length >= 1
-  );
-}
-
-// A JSX element is lowerable only if every attribute is a plain, named one we can account for —
-// plus, for a state-observing primitive, only if nothing in it reads that state.
-function canLower(element, spec, types) {
-  const { openingElement } = element;
-  // Named attributes only — a spread cannot be enumerated
-  // (REFUSAL_CATEGORIES.unreadableAttributeSet).
-  //
-  // The category's STATED reason — that a transform cannot fold `id` -> `nativeID` inside a bag — is
-  // DEAD here, measured 2026-08-31: this adapter also folds at runtime (`renderer.ts`,
-  // `foldAliasKey`), which sees every key whatever shape it arrived in, and a lowered
-  // `<symbiote-view {...bag} />` commits a payload byte-identical to the wrapper's
-  // (`src/spread-fold-parity.test.tsx`). The refusal stands on two OTHER grounds it never named,
-  // both measured by lifting it and compiling:
-  //
-  //   <TextInput {...bag} />   ->  symbiote-text-input, whatever `bag.multiline` holds. The
-  //                                single-line tag is a different NATIVE VIEW and no later prop
-  //                                write repairs it (REFUSAL_CATEGORIES.dynamicIntrinsicChoice).
-  //   <Pressable {...bag} />   ->  no `activeStyle` emitted. The same functional style written
-  //                                directly emits it; inside a bag the expansion never runs, so a
-  //                                pressed style silently stops existing.
-  //
-  // So: a refuted rationale is not a refuted verdict. Do not lift this because the alias half is
-  // covered — check what ELSE reads the attribute list first.
-  //
-  // `role` / `aria-*` used to refuse here too, on the
-  // grounds that their fold needs to see sibling keys and a per-key element path cannot reproduce
-  // it. That was true of the ELEMENT path and is no longer true of anything: the fold moved into
-  // the engine (`core/engine/src/accessibility-props.ts`, called from `fabricProps` — the one place
-  // the whole bag is visible on both commit paths), so a lowered element gets it exactly as a
-  // wrapped one does. Proven on the committed payload, both arms, in `src/aria-fold-parity.test.tsx`.
-  const attributesAreReadable = openingElement.attributes.every(
-    attribute => attribute.type === 'JSXAttribute',
-  );
-  if (!attributesAreReadable) return false;
-  if (!selectsIntrinsicStatically(openingElement, spec)) return false;
-  // BEFORE the `observesState` early-return, not after. It rode below it while the only ref-refusing
-  // primitive was Pressable, which observes state — a coincidence, and TextInput broke it: it
-  // observes nothing, so the early-return fired first and a `<TextInput ref>` lowered anyway. The
-  // two questions are independent, so the checks are ordered by what they ask, not by what happened
-  // to work.
-  if (refWouldChangeSurface(spec) && openingElement.attributes.some(isInstanceBinding))
-    return false;
-  // Everything below is about a primitive whose STATE the template can observe.
-  if (!spec.observesState) return true;
-  // A functional `style` NEVER refuses, and since 2026-09-01 it is not rewritten either: the
-  // expression rides through unchanged and `routeProp` resolves it at both values of `pressed`
-  // (`isStyleCallback`, `core/engine/src/node.ts`). The build-time split that used to live here was
-  // removed after measuring it — `src/state-style-cost.bench.test.ts` — because it emitted TWO
-  // writes per node where the callback emits one, so it cost run time rather than saving it.
-  return !element.children.some(isRenderPropChild);
-}
-
-// REFUSAL_CATEGORIES.dynamicIntrinsicChoice.
-//
-// A primitive whose `intrinsicWhen` is set picks between TWO Fabric views by a prop —
-// `symbiote-text-input` vs `symbiote-text-input-multiline`, which are different native views rather
-// than one view with a flag (`core/components/src/view/render-text-input.ts`). The transform prints
-// a STATIC tag name, so it can only make that choice when the value is a compile-time literal.
-//
-// The refusal is stricter than the neighbouring ones and the difference is worth keeping in view:
-// an unreadable ATTRIBUTE VALUE means a prop arrives wrong, and a later write can still correct it.
-// Here the wrong NATIVE VIEW is committed, and no subsequent prop write repairs that — the node
-// would have to be destroyed and recreated. So a value this cannot read statically keeps the
-// component, which resolves the choice at runtime where the value is known.
-//
-// IDENTITY, not truthiness. The render fn is `view.multiline ? MULTILINE : SINGLE`, so truthiness
-// is what the RUNTIME does, and describing the compile-time check that way makes `multiline={1}`
-// look like something this should resolve. It must not: only three shapes are accepted — a bare
-// attribute is `true`, a boolean LITERAL is itself, an absent prop is `false` — and everything else
-// refuses, a truthy non-boolean literal included. A check justified by truthiness would let `{1}`
-// through at the next edit, which is exactly the silently-wrong native view the refusal exists to
-// prevent. Recorded as identity in the shared spec for the same reason.
-function staticTruthOf(openingElement, propName) {
-  const attribute = openingElement.attributes.find(
-    candidate =>
-      candidate.type === 'JSXAttribute' &&
-      attributeName(candidate) === propName,
-  );
-  if (attribute === undefined) return false;
-  if (attribute.value === null) return true;
-  if (attribute.value.type !== 'JSXExpressionContainer') return undefined;
-  const { expression } = attribute.value;
-  return expression.type === 'BooleanLiteral' ? expression.value : undefined;
-}
-
-function selectsIntrinsicStatically(openingElement, spec) {
-  return (
-    spec.intrinsicWhen === undefined ||
-    staticTruthOf(openingElement, spec.intrinsicWhen.prop) !== undefined
-  );
-}
-
-function intrinsicFor(openingElement, spec) {
-  if (spec.intrinsicWhen === undefined) return spec.intrinsic;
-  return staticTruthOf(openingElement, spec.intrinsicWhen.prop) === true
-    ? spec.intrinsicWhen.intrinsic
-    : spec.intrinsic;
-}
-
-// REFUSAL_CATEGORIES.instanceBoundDirective. The criterion is NOT "does the component expose a
-// ref" — that was a proxy, and it held only while two primitives existed. The rule is: would
-// lowering hand the app something DIFFERENT from what the component hands it? A lowering transform
-// is an optimisation, and an optimisation that moves the observable surface in EITHER direction is
-// a bug. Three shapes, one rule, all readable from the components' own props types:
-//
-//   View, Text   ref?: Ref<IHostInstance>      lowered yields the same node    -> lower
-//   Pressable    no ref declared               lowering would ADD a handle     -> refuse
-//   TextInput    ref?: Ref<ITextInputHandle>   lowering would SWAP the handle  -> refuse
-//
-// TextInput is the case that exposed the proxy: it declares a ref, so the old criterion said
-// "lower", and a lowered `<TextInput ref>` silently dropped `clear`, `isFocused` and
-// `setSelection` — the component's handle replaced by a bare public instance. Costing an app three
-// methods is exactly as wrong as granting it one it never had.
-//
-// PER-ADAPTER by construction, which is why this is a list here and not a field on the shared
-// spec: what a ref yields is a fact about THIS adapter's props types, and a correct adapter can
-// answer differently — Vue refuses on every primitive, because a Vue template ref yields the
-// component instance rather than the host node whatever the component declares.
-//
-// Kept honest by `ref-refusal-matches-components.test.ts`, which re-derives the answer from each
-// component source: a hand-written list of adapter members is what went stale three times this
-// month.
-// INVERTED 2026-09-01, and the inversion is the point rather than the contents. This was a
-// denylist of intrinsics that refuse a `ref`, so every primitive added to the spec defaulted to
-// LOWERING one — and the newest member falls out of a hand-written list every time, which is the
-// failure mode this repo has now recorded four times. As a denylist that default is a correctness
-// bug (a lowered element hands back an object the component never did); as an allowlist the same
-// omission costs only coverage, which is the direction a default should fail in.
-//
-// A name earns its place here by the criterion in `ref-refusal-matches-components.test.ts`: the
-// component hands a `ref` the ENGINE NODE, either by declaring `ref?: Ref<IHostInstance>` or by
-// rendering through `descriptorToSolid`, whose `spread` calls a bag ref with the node it built. Any
-// other answer — a different handle, or no ref at all — means lowering would move the surface.
-const INTRINSICS_YIELDING_HOST_REF = new Set([
-  'symbiote-view',
-  'symbiote-text',
-  'symbiote-image',
-]);
-
-
-function refWouldChangeSurface(spec) {
-  return !INTRINSICS_YIELDING_HOST_REF.has(spec.intrinsic);
-}
-
-function isInstanceBinding(attribute) {
-  return (
-    attribute.type === 'JSXAttribute' && attributeName(attribute) === 'ref'
-  );
-}
-
-// Per TAG, not global: the spec gives each primitive its own alias map, and reading it per tag is
-// what keeps this honest if they ever stop agreeing.
-function renameAliasedAttributes(openingElement, aliases, types) {
-  openingElement.attributes.forEach(attribute => {
-    // A spread has no name, and the author's own spread refuses in `canLower`, so nothing this
-    // loop sees is one. It used to be reachable: the state-style pass emitted a spread for an
-    // opaque style, and that pass is gone.
-    if (attribute.type !== 'JSXAttribute') return;
-    const renamed = aliases.get(attributeName(attribute));
-    if (renamed !== undefined) attribute.name = types.jsxIdentifier(renamed);
-  });
-}
-
-module.exports = function lowerHostPrimitives({ types }) {
-  return {
-    name: 'symbiote-solid-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 spec = names.get(tag.name);
-            if (spec === undefined) return;
-            // A shadowing local binding (a parameter or a `const View = …` in scope) is NOT our
-            // import, even though the name matches. Only rewrite when 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;
-            if (!canLower(elementPath.node, spec, types)) return;
-            // Read BEFORE the passes below rewrite attributes — `renameAliasedAttributes` could
-            // in principle rename the selector out from under the choice.
-            const intrinsic = intrinsicFor(openingElement, spec);
-            renameAliasedAttributes(openingElement, spec.aliases, types);
-            openingElement.name = types.jsxIdentifier(intrinsic);
-            if (closingElement)
-              closingElement.name = types.jsxIdentifier(intrinsic);
-          },
-        });
-      },
-    },
-  };
-};
-
-// Attached AFTER the plugin assignment on purpose: `module.exports = fn` replaces the object, so a
-// named export written above it is silently discarded. Exists only so the test below can compare
-// this list against the component sources.
-module.exports.INTRINSICS_YIELDING_HOST_REF = INTRINSICS_YIELDING_HOST_REF;
-
-// The spec fields this transform reads, named so `spec-projection-covers-fields.test.ts` can check
-// the whitelist above against what `HOST_PRIMITIVES` actually carries. `defaults` is deliberately
-// absent: prop defaults are seeded at RUNTIME by the renderer (`seedTextDefaults`), where a patch
-// that clears a prop can restore them — a compile-time copy would cover only the initial render.
-module.exports.SPEC_FIELDS_READ = [
-  'intrinsic',
-  'aliases',
-  'observesState',
-  'intrinsicWhen',
-];
-module.exports.SPEC_FIELDS_IGNORED = ['defaults'];

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

@@ -1,2 +0,0 @@
-export type { IActivityIndicatorProps, IActivityIndicatorSize } from './shared';
-export declare const ActivityIndicator: (props: import("./shared").IActivityIndicatorProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

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

@@ -1,11 +0,0 @@
-// ActivityIndicator on Android: AndroidProgressBar needs `styleAttr` (it drives its setStyle();
-// without it the view throws "setStyle() not called") plus `indeterminate: true`, and its default
-// color is the theme (null), which the render fn turns into an OMITTED color prop — a literal null
-// would be rejected by Fabric's color parser. Same facts the other adapters' Android bindings
-// encode. Metro picks this on an Android host; no Platform.OS read.
-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,2 +0,0 @@
-export type { IActivityIndicatorProps, IActivityIndicatorSize } from './shared';
-export declare const ActivityIndicator: (props: import("./shared").IActivityIndicatorProps) => import("@symbiote-native/solid/jsx-runtime").JSX.Element;

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

@@ -1,10 +0,0 @@
-// ActivityIndicator on iOS: RCTActivityIndicatorView takes the size enum plus a GRAY default color
-// and no extra native props — the same facts adapters/react's, adapters/vue's and adapters/svelte's
-// iOS bindings encode. Metro selects this file on an iOS host, no Platform.OS read.
-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
-// index.ios.ts / index.android.ts on a real host; under vitest / tsc the resolution lands 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 { JSX } from '../../jsx-runtime';
-import { type IActivityIndicatorPlatform, type IActivityIndicatorProps as IActivityIndicatorBaseProps } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export type { IActivityIndicatorPlatform, IActivityIndicatorSize, } from '@symbiote-native/components';
-export type IActivityIndicatorProps = IActivityIndicatorBaseProps & {
-    class?: IClassNameValue;
-};
-export declare function createActivityIndicator(platform: IActivityIndicatorPlatform): (props: IActivityIndicatorProps) => JSX.Element;

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

@@ -1,51 +0,0 @@
-// ActivityIndicator, the Solid lifecycle half. The render (the 'small'/'large' -> native size enum
-// translation, the fixed size boxes, the centering wrapper, the color omission) lives in
-// @symbiote-native/components/view and is shared verbatim with React, Vue and Svelte. There is no
-// state machine: the spinner animates natively, so Solid supplies only prop resolution and the
-// descriptor bridge.
-//
-// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE;
-// destructuring reads them at setup and freezes the component at its mount-time values. Every read
-// below happens inside the descriptor accessor, which descriptorToSolid re-runs as a render effect
-// on the SAME host nodes.
-//
-// The per-platform bits (iOS's GRAY default and no extras; Android's theme/null default plus
-// styleAttr + indeterminate) arrive via `platform` from index.ios.ts / index.android.ts.
-import { renderActivityIndicator, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToSolid } from '../../descriptor-to-solid.js';
-// Read by the component itself; everything else (testID, nativeID, the accessibility surface,
-// onLayout, class) forwards onto the centering wrapper View, which is where RN spreads `...props`.
-const HANDLED_PROPS = [
-    'animating',
-    'color',
-    'hidesWhenStopped',
-    'size',
-    'style',
-];
-// The wrapper is a raw symbiote-view emitted by the render fn, not the View component, so it never
-// runs resolveAccessibilityProps itself — the fold happens here, exactly like React's hook does.
-// The two branches of that fold emit DIFFERENT key sets; descriptorToSolid runs the resulting bag
-// through withStableKeys, so a vanished key still reaches routeProp as a delete
-// (.claude/rules/solid-descriptor-bridge.md §1).
-function forwardProps(props) {
-    const forwarded = {
-        ...resolveAccessibilityProps(props),
-    };
-    for (const key of HANDLED_PROPS)
-        delete forwarded[key];
-    return forwarded;
-}
-export function createActivityIndicator(platform) {
-    return function ActivityIndicator(props) {
-        // `?? 'small'` / `?? true` rather than a `!== false` coercion: props are typed here, so this is
-        // the exact semantics of React's destructuring defaults (only `undefined` falls back).
-        return descriptorToSolid(() => renderActivityIndicator({
-            animating: props.animating ?? true,
-            hidesWhenStopped: props.hidesWhenStopped ?? true,
-            size: props.size ?? 'small',
-            color: props.color,
-            style: props.style,
-            passthrough: forwardProps(props),
-        }, platform));
-    };
-}

package/build/components/button.d.ts

@@ -1,7 +0,0 @@
-import type { JSX } from '../jsx-runtime';
-import { type IButtonProps as IButtonBaseProps } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export type IButtonProps = IButtonBaseProps & {
-    class?: IClassNameValue;
-};
-export declare function Button(props: IButtonProps): JSX.Element;

package/build/components/button.jsx

@@ -1,45 +0,0 @@
-// Button — the minimal cross-platform button, rendered in its iOS shape per RN's Button.js: a
-// TouchableOpacity wrapping a Text. The base text style, the role constant and the color fold
-// (a caller `color` tints the label; `disabled` greys it, disabled winning) are shared in
-// @symbiote-native/components' render-button and are called, never re-derived; Solid only composes
-// its own TouchableOpacity + Text and forwards the native-only props.
-//
-// NO descriptorToSolid here, and none in React/Vue/Svelte either: the tree is two COMPONENTS, not
-// a Descriptor. There is no renderButton() to bridge — the shared half is the style/role math.
-//
-// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
-// ONCE; splitProps keeps both halves reactive and every read sits inside an accessor or a memo.
-import { createMemo, splitProps } from 'solid-js';
-import { BUTTON_ACCESSIBILITY_ROLE, resolveButtonTextStyle, } from '@symbiote-native/components';
-import { Text } from './text.jsx';
-import { TouchableOpacity } from './touchable/index.jsx';
-export function Button(props) {
-    // Only what Button CONSUMES or re-maps is split off. Everything else — onPress, disabled,
-    // testID, the TV-focus props, the accessibility/aria surface, `class` — stays in `rest` and
-    // rides the single bag below onto the TouchableOpacity. The TV-focus props are real Fabric
-    // props the pressable forwards without typing; a JSX spread carries them through unchecked
-    // (they are inert on a phone host).
-    const [local, rest] = splitProps(props, [
-        'title',
-        'color',
-        'touchSoundDisabled',
-    ]);
-    const textStyle = createMemo(() => resolveButtonTextStyle(local.color, rest.disabled));
-    // ONE bag, not a spread followed by explicit props on the tag: Solid's mergeProps (which the
-    // compiler uses for that shape) takes the first NON-undefined value scanning back to front, so
-    // an override that can be undefined silently loses (.claude/rules/solid-descriptor-bridge.md
-    // §6). A plain object is last-wins — the React semantics this is ported from, and what pins RN's
-    // fixed role / accessible / disabled-state OVER the caller's own. touchSoundDisabled is RE-MAPPED
-    // here, not forwarded: the pressable spells it android_disableSound. Return type left INFERRED;
-    // widening to Record<string, unknown> would stop typing `onPress` too.
-    const touchableProps = () => ({
-        ...rest,
-        android_disableSound: local.touchSoundDisabled,
-        accessibilityRole: BUTTON_ACCESSIBILITY_ROLE,
-        accessible: true,
-        accessibilityState: { disabled: rest.disabled },
-    });
-    return (<TouchableOpacity {...touchableProps()}>
-      <Text style={textStyle()}>{local.title}</Text>
-    </TouchableOpacity>);
-}

package/build/components/image-background.jsx

@@ -1,74 +0,0 @@
-// ImageBackground — the Solid lifecycle half. The composition (the absolute-fill Image behind the
-// children, the wrapper-dimension proxy onto that Image, the imageStyle-last merge) lives
-// framework-agnostic in @symbiote-native/components' renderImageBackground and is shared verbatim
-// with React, Vue and Svelte. Solid supplies only the reactivity, the class-name resolution and
-// the child order.
-//
-// SPLIT DOWN THE MIDDLE, and the seam is the children rule. The wrapper hosts a live Solid subtree
-// (the overlay content), which only the reconciler can reduce, so it stays a literal
-// `symbiote-view` carrying the shared fn's own props — the same shape View and SafeAreaView use,
-// and the same one Svelte's ImageBackground lands on. The inner image is a leaf built entirely
-// from VALUES, so it goes through descriptorToSolid, which builds it once and re-props it in place
-// (replacing it would restart the download and drop the decoded bitmap).
-//
-// FLAT FILE, no folder: there are no platform or shared variants to group
-// (`symbiote-file-layout` — only genuine groups get a folder).
-//
-// NOTHING here destructures `props` at setup. Solid props are getters and a component body runs
-// ONCE; splitProps keeps every bucket reactive, and each read happens inside an accessor.
-import { createMemo, splitProps } from 'solid-js';
-import { createDescriptorShapeGuard, renderImageBackground, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { resolveClassName, } from '@symbiote-native/engine';
-import { descriptorToSolid } from '../descriptor-to-solid.js';
-// renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off so they
-// never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric raw,
-// since native sees only the resolved `source` array they fold into. `style` is absent on purpose
-// — the inner image's style is computed by renderImageBackground, never taken from the caller.
-const IMAGE_VIEW_PROPS = [
-    'source',
-    'defaultSource',
-    'loadingIndicatorSource',
-    'resizeMode',
-    'tintColor',
-    'src',
-    'srcSet',
-    'alt',
-    'width',
-    'height',
-    'crossOrigin',
-    'referrerPolicy',
-];
-const shape = createDescriptorShapeGuard('ImageBackground');
-export function ImageBackground(props) {
-    const [local, view, rest] = splitProps(props, ['children', 'style', 'imageStyle', 'class'], IMAGE_VIEW_PROPS);
-    // One memo, so the wrapper bag and the inner image derive from a SINGLE call per change.
-    const wrapper = createMemo(() => renderImageBackground({
-        style: local.style,
-        // A bare string is a registered class name and has to become a style object here, before
-        // it reaches the shared fn — which merges it, and knows nothing about the registry.
-        imageStyle: typeof local.imageStyle === 'string'
-            ? resolveClassName(local.imageStyle)
-            : local.imageStyle,
-        image: {
-            ...view,
-            // The wrapper is a raw host, not the View component, so the aria/role fold is this
-            // component's own job; the resolved surface rides the IMAGE, matching every other adapter.
-            passthrough: { ...resolveAccessibilityProps(rest) },
-        },
-    }));
-    const backgroundImage = descriptorToSolid(() => shape.asElement(wrapper().children[0]));
-    // ONE object literal rather than a spread-then-override on the tag: `class` is legitimately
-    // undefined, and Solid's mergeProps (which the compiler uses for a spread followed by an
-    // explicit prop) would discard that undefined instead of applying it
-    // (.claude/rules/solid-descriptor-bridge.md §6). No withStableKeys — renderImageBackground's
-    // wrapper props are `{ style }` unconditionally, so no key can vanish between runs.
-    const wrapperBag = () => ({
-        ...wrapper().props,
-        class: local.class,
-    });
-    // The user children come AFTER the image in child order, which is what makes them paint on top.
-    return (<symbiote-view {...wrapperBag()}>
-      {backgroundImage}
-      {local.children}
-    </symbiote-view>);
-}

package/build/components/image.d.ts

@@ -1,9 +0,0 @@
-import type { JSX } from '../jsx-runtime';
-import { type IImageProps as IImageBaseProps, type IImageStatics } from '@symbiote-native/components';
-import type { IClassNameValue } from '@symbiote-native/engine';
-export type { IImageStatics } from '@symbiote-native/components';
-export type IImageProps = IImageBaseProps & {
-    class?: IClassNameValue;
-};
-export type IImageWithStatics = ((props: IImageProps) => JSX.Element) & IImageStatics;
-export declare const Image: IImageWithStatics;

package/build/components/image.js

@@ -1,75 +0,0 @@
-// Image — the Solid lifecycle half. Everything that turns props into a native prop bag (the
-// source / src / srcSet resolution, the width+height fold into style, resizeMode and tintColor
-// read back off the style, alt -> accessibilityLabel, the array shape native expects) lives
-// framework-agnostic in @symbiote-native/components' renderImage, shared verbatim with React, Vue
-// and Svelte. Solid supplies only the reactivity and the Descriptor bridge.
-//
-// PLAIN .ts, NOT .tsx, unlike ./view.tsx and ./text.tsx — and the difference is the children rule,
-// not a style choice. View and Text take a live subtree of the user's components, which only the
-// framework's own reconciler can reduce, so they emit real JSX. An image is a leaf built entirely
-// from VALUES, so it goes through renderImage + descriptorToSolid exactly like Switch does
-// (.claude/rules/component-render-fn-boundary.md).
-//
-// NOTHING here destructures `props`. Solid props are getters and a component body runs ONCE;
-// splitProps is the idiomatic split that keeps both halves reactive, and every read below happens
-// inside the descriptor accessor descriptorToSolid re-runs.
-//
-// ASSET RESOLUTION IS LAZY BY CONSTRUCTION, and that is what lets an app drop the hand-rolled
-// resolveImageSource() call it needed while this component did not exist. renderImage calls
-// resolveImageSource at RENDER time, and the resolver behind it is installed by bootstrapHost,
-// which createApp().mount() runs before AppRegistry ever renders a root. So a `require('./x.png')`
-// asset id handed to `source` is resolved by RN's own resolveAssetSource on the way to Fabric,
-// with no ordering hazard: a module-scope resolve would run one step too early, an accessor-time
-// one cannot.
-import { splitProps } from 'solid-js';
-import { imageStatics, renderImage, resolveAccessibilityProps, } from '@symbiote-native/components';
-import { descriptorToSolid } from '../descriptor-to-solid.js';
-// renderImage's typed view fields — the props it CONSUMES rather than forwards. Split off here so
-// they never also ride through `passthrough`: the W3C aliases in particular must not reach Fabric
-// raw, since native sees only the resolved `source` array they fold into. Everything else (the
-// load events, blurRadius, capInsets, resizeMethod, fadeDuration, testID, `class`, a caller's own
-// `ref`, the accessibility props) stays in `rest` and lands on the host image untouched.
-const VIEW_PROPS = [
-    'source',
-    'defaultSource',
-    'loadingIndicatorSource',
-    'style',
-    'resizeMode',
-    'tintColor',
-    'src',
-    'srcSet',
-    'alt',
-    'width',
-    'height',
-    'crossOrigin',
-    'referrerPolicy',
-];
-function ImageComponent(props) {
-    const [view, rest] = splitProps(props, VIEW_PROPS);
-    // The node is created once and kept by identity — descriptorToSolid wires every prop through a
-    // render effect on that same node, so a later source/style/alt change re-commits the existing
-    // image rather than replacing it (which would restart the download and drop the decoded bitmap).
-    return descriptorToSolid(() => renderImage({
-        source: view.source,
-        defaultSource: view.defaultSource,
-        loadingIndicatorSource: view.loadingIndicatorSource,
-        style: view.style,
-        resizeMode: view.resizeMode,
-        tintColor: view.tintColor,
-        src: view.src,
-        srcSet: view.srcSet,
-        alt: view.alt,
-        width: view.width,
-        height: view.height,
-        crossOrigin: view.crossOrigin,
-        referrerPolicy: view.referrerPolicy,
-        // Image owns its host element rather than rendering through a symbiote View, so folding
-        // aria/role into the canonical accessibility* props is its own job, like Switch's.
-        // renderImage's own `alt` fold then defers to an explicit accessibilityLabel found here.
-        passthrough: { ...resolveAccessibilityProps(rest) },
-    }));
-}
-// Statics attached like RN's own `Image.getSize` / `prefetch` / `queryCache` / `abortPrefetch` /
-// `getSizeWithHeaders` / `resolveAssetSource`, by identity off the same @symbiote-native/engine
-// module React, Vue and Svelte attach — never a Solid-side reimplementation.
-export const Image = Object.assign(ImageComponent, imageStatics);