@symbiote-native/slider 5.2.0 → 7.0.0

package/README.md

@@ -84,6 +84,25 @@ import { Slider } from '@symbiote-native/slider/vue';
 </template>
 ```
 
+```svelte
+<!-- Svelte — examples/svelte/screens/CanaryScreen.svelte -->
+<script lang="ts">
+  import { Slider } from '@symbiote-native/slider/svelte';
+  let volume = $state(0.6);
+</script>
+
+<Slider
+  value={volume}
+  onValueChange={next => (volume = next)}
+  minimumValue={0}
+  maximumValue={1}
+  step={0.01}
+  minimumTrackTintColor="#7fb5ff"
+  maximumTrackTintColor="#334155"
+  thumbTintColor="#ffffff"
+/>
+```
+
 ```tsx
 // Solid — the marker props arrive as an ACCESSOR, so only the leaf reading them re-runs
 import { Slider } from '@symbiote-native/slider/solid';

package/build/angular/index.js

@@ -1,2 +1,2 @@
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

package/build/core/render-slider.js

@@ -1,5 +1,5 @@
 // Slider: the render half (framework-agnostic). Mirrors the library's React wrapper layout: an
-// outer `symbiote-view` (default platform style + the caller's style, centered) hosting the
+// outer `view` (default platform style + the caller's style, centered) hosting the
 // native `RNCSlider` leaf, plus an optional step-indicator overlay sibling. The native leaf
 // carries the folded value/limit/color/image props and the responder claims the wrapper does;
 // every event handler + the ref ride in `passthrough` and the engine routes them against the
@@ -66,5 +66,5 @@ export function renderSlider(view, platform, options = {}) {
     };
     if (options.onLayout !== undefined)
         wrapperProps.onLayout = options.onLayout;
-    return el('symbiote-view', wrapperProps, children);
+    return el('view', wrapperProps, children);
 }

package/build/core/render-steps-indicator.js

@@ -64,35 +64,35 @@ export function orderStepOptions(options, inverted) {
 function renderStepCell(value, displayIndex, params, fontSize) {
     const trackMarkChildren = [];
     if (params.thumbImage !== undefined && value === params.currentValue) {
-        trackMarkChildren.push(el('symbiote-view', {
+        trackMarkChildren.push(el('view', {
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
         }, [
-            el('symbiote-image', {
+            el('image', {
                 source: params.thumbImage,
                 style: THUMB_IMAGE_STYLE,
             }),
         ]));
     }
     const cellChildren = [
-        el('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
+        el('view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
     ];
     if (params.renderStepNumber === true) {
-        cellChildren.push(el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+        cellChildren.push(el('view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
             txt({
                 testID: `${displayIndex}th-step`,
                 style: { fontSize },
             }, [String(value)]),
         ]));
     }
-    return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+    return el('view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
 }
 // The default overlay (no custom StepMarker). pointerEvents none so it never eats the drag.
 export function renderStepsIndicator(params) {
     const fontSize = stepNumberFontSize(params.options.length);
     const ordered = orderStepOptions(params.options, params.inverted);
     const cells = ordered.map((value, displayIndex) => renderStepCell(value, displayIndex, params, fontSize));
-    return el('symbiote-view', {
+    return el('view', {
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
         style: resolveStepsContainerStyle(params.width, params.platform),

package/build/react/index.js

@@ -3,5 +3,5 @@
 // import of the codegen spec — never the library's React Slider component), then exposes the
 // platform-split Slider. The public prop type is the agnostic base plus React's StepMarker render
 // component (Vue takes the same marker as a scoped slot).
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

package/build/react/slider/shared.js

@@ -9,7 +9,7 @@
 // library's React Slider component — that component internally calls React hooks off the React
 // dispatcher, so a non-React adapter rendering it directly would crash on a null dispatcher.
 import { createElement, forwardRef, useCallback, useEffect, useState, } from 'react';
-import { descriptorToReact, Image } from '@symbiote-native/react';
+import { descriptorToReact } from '@symbiote-native/react';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
 import { dlog, } from '@symbiote-native/engine';
 import { sanitizeSliderValue, resolveSliderDisabled, resolveSliderAccessibilityState, resolveSliderLowerLimit, resolveSliderUpperLimit, valueFromSliderEvent, shouldRenderStepsIndicator, resolveThumbTintColor, shouldPassNativeThumbImage, isInvalidLimitConfig, computeStepOptions, orderStepOptions, stepNumberFontSize, renderSlider, renderSliderNative, resolveStepsContainerStyle, renderStepsIndicator, STEP_INDICATOR_ELEMENT_STYLE, TRACK_MARK_CONTAINER_STYLE, THUMB_IMAGE_CONTAINER_STYLE, THUMB_IMAGE_STYLE, STEP_NUMBER_CONTAINER_STYLE, SLIDER_DEFAULT_MINIMUM_VALUE, SLIDER_DEFAULT_MAXIMUM_VALUE, SLIDER_DEFAULT_STEP, SLIDER_ON_CHANGE, SLIDER_ON_VALUE_CHANGE, SLIDER_ON_SLIDING_START, SLIDER_ON_SLIDING_COMPLETE, SLIDER_ON_ACCESSIBILITY_ACTION, } from '../../core/index.js';
@@ -19,7 +19,7 @@ function isRecord(value) {
 function toChild(child) {
     return typeof child === 'string' ? child : descriptorToReact(child);
 }
-// renderSlider's Descriptor IS the outer wrapper (symbiote-view hosting the native leaf +
+// renderSlider's Descriptor IS the outer wrapper (view hosting the native leaf +
 // optional steps overlay); className is reapplied on it here, exactly like ImageBackground's
 // wrapper.
 function withClassName(descriptor, className) {
@@ -116,7 +116,7 @@ export function createSlider(platform) {
                 platform,
                 StepMarker,
             });
-            return createElement('symbiote-view', {
+            return createElement('view', {
                 style: resolveStepsWrapperStyle(style, platform),
                 onLayout: handleLayout,
                 className,
@@ -158,24 +158,27 @@ function renderCustomStepsOverlay(params) {
             }),
         ];
         if (params.thumbImage !== undefined && value === params.currentValue) {
-            trackChildren.push(createElement('symbiote-view', {
+            trackChildren.push(createElement('view', {
                 key: 'thumb',
                 style: THUMB_IMAGE_CONTAINER_STYLE,
                 testID: 'sliderTrackMark-thumbImage',
-            }, createElement(Image, {
+            }, 
+            // An asset id still resolves: the fold that used to live in the Image wrapper is now
+            // `sourceOf` in the shared image behavior, which every path into the tag crosses.
+            createElement('image', {
                 source: params.thumbImage,
                 style: THUMB_IMAGE_STYLE,
             })));
         }
         const cellChildren = [
-            createElement('symbiote-view', { key: 'track', style: TRACK_MARK_CONTAINER_STYLE }, ...trackChildren),
+            createElement('view', { key: 'track', style: TRACK_MARK_CONTAINER_STYLE }, ...trackChildren),
         ];
         if (params.renderStepNumber) {
-            cellChildren.push(createElement('symbiote-view', { key: 'number', style: STEP_NUMBER_CONTAINER_STYLE }, createElement('symbiote-text', { testID: `${index}th-step`, style: { fontSize } }, String(value))));
+            cellChildren.push(createElement('view', { key: 'number', style: STEP_NUMBER_CONTAINER_STYLE }, createElement('text', { testID: `${index}th-step`, style: { fontSize } }, String(value))));
         }
-        return createElement('symbiote-view', { key: index, style: STEP_INDICATOR_ELEMENT_STYLE }, ...cellChildren);
+        return createElement('view', { key: index, style: STEP_INDICATOR_ELEMENT_STYLE }, ...cellChildren);
     });
-    return createElement('symbiote-view', {
+    return createElement('view', {
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
         style: resolveStepsContainerStyle(params.width, params.platform),

package/build/solid/index.js

@@ -4,5 +4,5 @@
 // Slider can mount. Metro's production-only `inlineRequires` moves a require down to the first
 // place its binding is USED and compiles a barrel's re-export into a lazy getter, so a registration
 // reached through one silently never runs in RELEASE builds only. Do not restructure it.
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

package/build/solid/slider/shared.js

@@ -26,11 +26,8 @@
 // package cannot use JSX at all, because its tsconfig is shared with the React/Vue/Angular entries
 // and TypeScript has one `jsx` setting per program. descriptor-to-solid.ts drives the renderer the
 // same way for the same reason.
-// createComponent comes from solid-js, not the renderer's re-export: the renderer's is typed to
-// return its own host-node union, which cannot hold what a component returns (an Image is
-// JSX.Element). Same function either way.
-import { createComponent, createEffect, createMemo, createSignal, untrack, } from 'solid-js';
-import { descriptorToSolid, Image, } from '@symbiote-native/solid';
+import { createEffect, createMemo, createSignal, untrack } from 'solid-js';
+import { descriptorToSolid } from '@symbiote-native/solid';
 import { createElement, createTextNode, insert, insertNode, setProp, spread, } from '@symbiote-native/solid/renderer';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
 import { dlog, isSymbioteNode, } from '@symbiote-native/engine';
@@ -212,7 +209,7 @@ export function createSlider(platform) {
         // this same node, so a value/tint/limit change re-commits the existing native slider instead of
         // replacing it — which would drop the thumb the user is dragging.
         const leaf = descriptorToSolid(() => renderSliderNative(view(), platform));
-        const wrapper = hostElement('symbiote-view');
+        const wrapper = hostElement('view');
         // A statically-present key set (all three are always emitted), so this needs no withStableKeys
         // widening — `spread` alone has no removal pass for a key that vanishes.
         spread(wrapper, () => ({
@@ -236,7 +233,7 @@ function buildCustomOverlay(params) {
     const ordered = orderStepOptions(params.cells, params.inverted);
     const min = params.cells[0];
     const max = params.cells[params.cells.length - 1];
-    const container = hostElement('symbiote-view');
+    const container = hostElement('view');
     // pointerEvents none so the overlay never eats the drag. `style` tracks the measured width, hence
     // an accessor rather than a one-shot setProp.
     spread(container, () => ({
@@ -251,9 +248,9 @@ function buildCustomOverlay(params) {
 }
 function buildStepCell(cell) {
     const { params } = cell;
-    const element = hostElement('symbiote-view');
+    const element = hostElement('view');
     setProp(element, 'style', STEP_INDICATOR_ELEMENT_STYLE);
-    const track = hostElement('symbiote-view');
+    const track = hostElement('view');
     setProp(track, 'style', TRACK_MARK_CONTAINER_STYLE);
     insertNode(element, track);
     // A memo, not a bare accessor: several leaves inside one marker must see the same object, and an
@@ -270,9 +267,9 @@ function buildStepCell(cell) {
     // the thumb image, which only the cell matching the current value carries.
     insert(track, () => [markerElement, buildThumbImage(cell)]);
     if (params.withNumbers) {
-        const numberBox = hostElement('symbiote-view');
+        const numberBox = hostElement('view');
         setProp(numberBox, 'style', STEP_NUMBER_CONTAINER_STYLE);
-        const label = hostElement('symbiote-text');
+        const label = hostElement('text');
         setProp(label, 'testID', `${cell.index}th-step`);
         setProp(label, 'style', { fontSize: cell.fontSize });
         insertNode(label, createTextNode(String(cell.value)));
@@ -286,11 +283,14 @@ function buildThumbImage(cell) {
     if (source === undefined || cell.value !== cell.params.currentValue()) {
         return null;
     }
-    const container = hostElement('symbiote-view');
+    const container = hostElement('view');
     setProp(container, 'style', THUMB_IMAGE_CONTAINER_STYLE);
     setProp(container, 'testID', 'sliderTrackMark-thumbImage');
-    // The Image COMPONENT, not a raw symbiote-image: it resolves an asset id through RN's own
-    // resolveAssetSource, exactly as React's and Vue's custom overlays do.
-    insert(container, createComponent(Image, { source, style: THUMB_IMAGE_STYLE }));
+    const thumb = hostElement('image');
+    // An asset id still resolves: the fold that used to live in the Image wrapper is now
+    // `sourceOf` in the shared image behavior, which every path into the tag crosses.
+    setProp(thumb, 'source', source);
+    setProp(thumb, 'style', THUMB_IMAGE_STYLE);
+    insertNode(container, thumb);
     return container;
 }

package/build/svelte/index.js

@@ -5,5 +5,5 @@
 // (slider/slider-platform.ts, Metro-filename-selected) - matching this adapter's own
 // Switch/ActivityIndicator convention, since Svelte components are compiled `.svelte` files, not
 // factories like Vue's per-platform `createSlider(platform)`.
-import '../register';
+import '../register/index.js';
 export { default as Slider } from './slider/index.svelte';

package/build/svelte/slider/index.svelte

@@ -16,9 +16,9 @@
   // the main barrel pulls in the whole `.svelte` module graph, fatal under vitest's plain
   // svelte-plugin-free transform (this component's own smoke test).
   //
-  // The custom-marker overlay's thumb-image cell uses the raw `symbiote-image` host tag rather
+  // The custom-marker overlay's thumb-image cell uses the raw `image` host tag rather
   // than the framework's `Image` component: core's `render-steps-indicator.ts` paints the same
-  // default-overlay thumb with a bare `el('symbiote-image', {source, style})` Descriptor, and
+  // default-overlay thumb with a bare `el('image', {source, style})` Descriptor, and
   // importing another `.svelte` component here would reintroduce the same main-barrel problem
   // one level down.
   import type { ISliderProps } from './slider-props';
@@ -274,8 +274,8 @@
 </script>
 
 {#if hasStepMarker}
-  <symbiote-view p={markerWrapperBag} bind:this={hostShimMarker}>
-    <symbiote-view
+  <view p={markerWrapperBag} bind:this={hostShimMarker}>
+    <view
       p={{
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
@@ -283,8 +283,8 @@
       }}
     >
       {#each orderedOptions as optionValue, index (optionValue)}
-        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
-          <symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
+        <view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
+          <view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
             {@render stepMarker?.({
               stepMarked: optionValue === currentValue,
               currentValue,
@@ -293,33 +293,29 @@
               max: maxOption,
             })}
             {#if thumbImage !== undefined && optionValue === currentValue}
-              <symbiote-view
+              <view
                 p={{
                   style: THUMB_IMAGE_CONTAINER_STYLE,
                   testID: 'sliderTrackMark-thumbImage',
                 }}
               >
-                <symbiote-image
-                  p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }}
-                />
-              </symbiote-view>
+                <image p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }} />
+              </view>
             {/if}
-          </symbiote-view>
+          </view>
           {#if renderStepNumber}
-            <symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
-              <symbiote-text
-                p={{ testID: `${index}th-step`, style: { fontSize } }}
-              >
+            <view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
+              <text p={{ testID: `${index}th-step`, style: { fontSize } }}>
                 {String(optionValue)}
-              </symbiote-text>
-            </symbiote-view>
+              </text>
+            </view>
           {/if}
-        </symbiote-view>
+        </view>
       {/each}
-    </symbiote-view>
-  </symbiote-view>
+    </view>
+  </view>
 {:else}
-  <symbiote-view
+  <view
     p={{ ...defaultDescriptor?.props, class: className }}
     bind:this={hostShimDefault}
   />

package/build/vue/index.js

@@ -3,5 +3,5 @@
 // import of the codegen spec — never the library's React component), then exposes the platform-
 // split Slider. The public prop type is the agnostic core ISliderProps plus a Vue-only `class`
 // field (see slider/shared.ts); the custom StepMarker is a Vue scoped slot, not a prop.
-import '../register';
+import '../register/index.js';
 export { Slider } from './slider';

package/build/vue/slider/shared.js

@@ -39,7 +39,7 @@ function asAccessibilityState(value) {
 // thumbSize, tapToSeek, vertical, accessibility*/testID/aria-*) forwards onto the native node.
 // The four callbacks are JS-only and must NEVER reach Fabric, so they are stripped here and
 // re-supplied as the native event handlers in `passthrough`. `class` is handled too: like
-// `style`, it targets the WRAPPER `symbiote-view` (renderSlider's outer element), never the
+// `style`, it targets the WRAPPER `view` (renderSlider's outer element), never the
 // inner native slider leaf `passthrough` reaches — applied explicitly by each render path below.
 const HANDLED_ATTRS = [
     'value',
@@ -70,7 +70,7 @@ function forwardAttrs(attrs) {
     }
     return result;
 }
-// renderSlider builds the wrapper `symbiote-view` descriptor itself, with no `class` field of
+// renderSlider builds the wrapper `view` descriptor itself, with no `class` field of
 // its own (packages/slider/src/core stays framework-agnostic). `class` is stamped onto that
 // returned descriptor's props here, right before the Vue bridge, so it lands on the SAME
 // element `style` targets rather than the inner native leaf `passthrough` would otherwise
@@ -181,7 +181,7 @@ export function createSlider(platform) {
                     platform,
                     stepMarker: slots.stepMarker,
                 });
-                return h('symbiote-view', {
+                return h('view', {
                     style: resolveStepsWrapperStyle(view.style, platform),
                     class: attrs.class,
                     onLayout: handleLayout,
@@ -234,24 +234,24 @@ function renderCustomStepsOverlay(params) {
             max,
         });
         if (marker !== undefined)
-            trackChildren.push(h('symbiote-view', {}, marker));
+            trackChildren.push(h('view', {}, marker));
         if (isImageSourceProp(params.thumbImage) && value === params.currentValue) {
-            trackChildren.push(h('symbiote-view', {
+            trackChildren.push(h('view', {
                 style: THUMB_IMAGE_CONTAINER_STYLE,
                 testID: 'sliderTrackMark-thumbImage',
             }, [h(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })]));
         }
         const cellChildren = [
-            h('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),
+            h('view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),
         ];
         if (params.renderStepNumber) {
-            cellChildren.push(h('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
-                h('symbiote-text', { testID: `${index}th-step`, style: { fontSize } }, String(value)),
+            cellChildren.push(h('view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+                h('text', { testID: `${index}th-step`, style: { fontSize } }, String(value)),
             ]));
         }
-        return h('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+        return h('view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
     });
-    return h('symbiote-view', {
+    return h('view', {
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
         style: resolveStepsContainerStyle(params.width, params.platform),

package/build-ngc/core/render-slider.js

@@ -1,5 +1,5 @@
 // Slider: the render half (framework-agnostic). Mirrors the library's React wrapper layout: an
-// outer `symbiote-view` (default platform style + the caller's style, centered) hosting the
+// outer `view` (default platform style + the caller's style, centered) hosting the
 // native `RNCSlider` leaf, plus an optional step-indicator overlay sibling. The native leaf
 // carries the folded value/limit/color/image props and the responder claims the wrapper does;
 // every event handler + the ref ride in `passthrough` and the engine routes them against the
@@ -66,6 +66,6 @@ export function renderSlider(view, platform, options = {}) {
     };
     if (options.onLayout !== undefined)
         wrapperProps.onLayout = options.onLayout;
-    return el('symbiote-view', wrapperProps, children);
+    return el('view', wrapperProps, children);
 }
 //# sourceMappingURL=render-slider.js.map

package/build-ngc/core/render-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"render-slider.js","sourceRoot":"","sources":["../../src/core/render-slider.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render-slider.js","sourceRoot":"","sources":["../../src/core/render-slider.ts"],"names":[],"mappings":"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"}

package/build-ngc/core/render-steps-indicator.js

@@ -64,35 +64,35 @@ export function orderStepOptions(options, inverted) {
 function renderStepCell(value, displayIndex, params, fontSize) {
     const trackMarkChildren = [];
     if (params.thumbImage !== undefined && value === params.currentValue) {
-        trackMarkChildren.push(el('symbiote-view', {
+        trackMarkChildren.push(el('view', {
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
         }, [
-            el('symbiote-image', {
+            el('image', {
                 source: params.thumbImage,
                 style: THUMB_IMAGE_STYLE,
             }),
         ]));
     }
     const cellChildren = [
-        el('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
+        el('view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
     ];
     if (params.renderStepNumber === true) {
-        cellChildren.push(el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+        cellChildren.push(el('view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
             txt({
                 testID: `${displayIndex}th-step`,
                 style: { fontSize },
             }, [String(value)]),
         ]));
     }
-    return el('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+    return el('view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
 }
 // The default overlay (no custom StepMarker). pointerEvents none so it never eats the drag.
 export function renderStepsIndicator(params) {
     const fontSize = stepNumberFontSize(params.options.length);
     const ordered = orderStepOptions(params.options, params.inverted);
     const cells = ordered.map((value, displayIndex) => renderStepCell(value, displayIndex, params, fontSize));
-    return el('symbiote-view', {
+    return el('view', {
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
         style: resolveStepsContainerStyle(params.width, params.platform),

package/build-ngc/core/render-steps-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"render-steps-indicator.js","sourceRoot":"","sources":["../../src/core/render-steps-indicator.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"render-steps-indicator.js","sourceRoot":"","sources":["../../src/core/render-steps-indicator.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@symbiote-native/slider",
-  "version": "5.2.0",
+  "version": "7.0.0",
   "description": "Third-party native Slider view wrapped for SymbioteNative — one framework-agnostic core, built once and reachable from the React, Vue, Angular, Svelte, and Solid adapters.",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "react",
+    "vue",
+    "svelte",
+    "solid",
+    "angular",
+    "range-slider"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -73,15 +83,9 @@
   },
   "dependencies": {
     "@react-native-community/slider": "5.2.0",
-    "@symbiote-native/components": "0.5.0"
+    "@symbiote-native/components": "2.0.0"
   },
   "peerDependencies": {
-    "@symbiote-native/angular": ">=0.6.2",
-    "@symbiote-native/engine": ">=0.1.7",
-    "@symbiote-native/react": ">=0.2.8",
-    "@symbiote-native/solid": ">=0.0.1",
-    "@symbiote-native/svelte": ">=0.1.0",
-    "@symbiote-native/vue": ">=0.3.8",
     "@angular/core": ">=20",
     "@angular/forms": ">=20",
     "@vue/runtime-core": "^3.5.13",
@@ -89,7 +93,13 @@
     "react-native": ">=0.86",
     "solid-js": ">=1.9.0",
     "svelte": ">=5.56.0",
-    "vue": ">=3.5.0"
+    "vue": ">=3.5.0",
+    "@symbiote-native/angular": "^2.0.0",
+    "@symbiote-native/engine": "^0.5.0",
+    "@symbiote-native/react": "^2.0.0",
+    "@symbiote-native/solid": "^2.0.0",
+    "@symbiote-native/svelte": "^2.0.0",
+    "@symbiote-native/vue": "^2.0.0"
   },
   "peerDependenciesMeta": {
     "@symbiote-native/angular": {
@@ -141,13 +151,13 @@
     "solid-js": "^1.9.14",
     "svelte": "^5.56.0",
     "typescript": "~6.0.0",
-    "@symbiote-native/angular": "0.8.0",
-    "@symbiote-native/engine": "0.3.0",
-    "@symbiote-native/react": "0.4.0",
-    "@symbiote-native/solid": "0.1.0",
-    "@symbiote-native/svelte": "0.3.0",
-    "@symbiote-native/test-utils": "0.2.0",
-    "@symbiote-native/vue": "0.5.0"
+    "@symbiote-native/angular": "2.0.0",
+    "@symbiote-native/engine": "0.5.0",
+    "@symbiote-native/react": "2.0.0",
+    "@symbiote-native/solid": "2.0.0",
+    "@symbiote-native/svelte": "2.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "2.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/src/core/render-slider.ts

@@ -1,5 +1,5 @@
 // Slider: the render half (framework-agnostic). Mirrors the library's React wrapper layout: an
-// outer `symbiote-view` (default platform style + the caller's style, centered) hosting the
+// outer `view` (default platform style + the caller's style, centered) hosting the
 // native `RNCSlider` leaf, plus an optional step-indicator overlay sibling. The native leaf
 // carries the folded value/limit/color/image props and the responder claims the wrapper does;
 // every event handler + the ref ride in `passthrough` and the engine routes them against the
@@ -103,5 +103,5 @@ export function renderSlider(
     style: resolveSliderWrapperStyle(view.style, platform),
   };
   if (options.onLayout !== undefined) wrapperProps.onLayout = options.onLayout;
-  return el('symbiote-view', wrapperProps, children);
+  return el('view', wrapperProps, children);
 }

package/src/core/render-steps-indicator.ts

@@ -119,13 +119,13 @@ function renderStepCell(
   if (params.thumbImage !== undefined && value === params.currentValue) {
     trackMarkChildren.push(
       el(
-        'symbiote-view',
+        'view',
         {
           style: THUMB_IMAGE_CONTAINER_STYLE,
           testID: 'sliderTrackMark-thumbImage',
         },
         [
-          el('symbiote-image', {
+          el('image', {
             source: params.thumbImage,
             style: THUMB_IMAGE_STYLE,
           }),
@@ -135,15 +135,11 @@ function renderStepCell(
   }
 
   const cellChildren: IDescriptorChild[] = [
-    el(
-      'symbiote-view',
-      { style: TRACK_MARK_CONTAINER_STYLE },
-      trackMarkChildren,
-    ),
+    el('view', { style: TRACK_MARK_CONTAINER_STYLE }, trackMarkChildren),
   ];
   if (params.renderStepNumber === true) {
     cellChildren.push(
-      el('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+      el('view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
         txt(
           {
             testID: `${displayIndex}th-step`,
@@ -154,11 +150,7 @@ function renderStepCell(
       ]),
     );
   }
-  return el(
-    'symbiote-view',
-    { style: STEP_INDICATOR_ELEMENT_STYLE },
-    cellChildren,
-  );
+  return el('view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
 }
 
 // The default overlay (no custom StepMarker). pointerEvents none so it never eats the drag.
@@ -171,7 +163,7 @@ export function renderStepsIndicator(
     renderStepCell(value, displayIndex, params, fontSize),
   );
   return el(
-    'symbiote-view',
+    'view',
     {
       pointerEvents: 'none',
       testID: 'StepsIndicator-Container',

package/src/react/slider/shared.ts

@@ -23,7 +23,7 @@ import type {
   ReactElement,
   RefAttributes,
 } from 'react';
-import { descriptorToReact, Image } from '@symbiote-native/react';
+import { descriptorToReact } from '@symbiote-native/react';
 import { resolveAccessibilityProps } from '@symbiote-native/components';
 import type {
   IDescriptor,
@@ -97,7 +97,7 @@ function toChild(child: IDescriptorChild): ReactElement | string {
   return typeof child === 'string' ? child : descriptorToReact(child);
 }
 
-// renderSlider's Descriptor IS the outer wrapper (symbiote-view hosting the native leaf +
+// renderSlider's Descriptor IS the outer wrapper (view hosting the native leaf +
 // optional steps overlay); className is reapplied on it here, exactly like ImageBackground's
 // wrapper.
 function withClassName(
@@ -265,7 +265,7 @@ export function createSlider(platform: ISliderPlatform): ISliderComponent {
         StepMarker,
       });
       return createElement(
-        'symbiote-view',
+        'view',
         {
           style: resolveStepsWrapperStyle(style, platform),
           onLayout: handleLayout,
@@ -333,13 +333,15 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
     if (params.thumbImage !== undefined && value === params.currentValue) {
       trackChildren.push(
         createElement(
-          'symbiote-view',
+          'view',
           {
             key: 'thumb',
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
           },
-          createElement(Image, {
+          // An asset id still resolves: the fold that used to live in the Image wrapper is now
+          // `sourceOf` in the shared image behavior, which every path into the tag crosses.
+          createElement('image', {
             source: params.thumbImage,
             style: THUMB_IMAGE_STYLE,
           }),
@@ -348,7 +350,7 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
     }
     const cellChildren: ReactElement[] = [
       createElement(
-        'symbiote-view',
+        'view',
         { key: 'track', style: TRACK_MARK_CONTAINER_STYLE },
         ...trackChildren,
       ),
@@ -356,10 +358,10 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
     if (params.renderStepNumber) {
       cellChildren.push(
         createElement(
-          'symbiote-view',
+          'view',
           { key: 'number', style: STEP_NUMBER_CONTAINER_STYLE },
           createElement(
-            'symbiote-text',
+            'text',
             { testID: `${index}th-step`, style: { fontSize } },
             String(value),
           ),
@@ -367,13 +369,13 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): ReactElement {
       );
     }
     return createElement(
-      'symbiote-view',
+      'view',
       { key: index, style: STEP_INDICATOR_ELEMENT_STYLE },
       ...cellChildren,
     );
   });
   return createElement(
-    'symbiote-view',
+    'view',
     {
       pointerEvents: 'none',
       testID: 'StepsIndicator-Container',

package/src/solid/slider/shared.ts

@@ -27,22 +27,9 @@
 // and TypeScript has one `jsx` setting per program. descriptor-to-solid.ts drives the renderer the
 // same way for the same reason.
 
-// createComponent comes from solid-js, not the renderer's re-export: the renderer's is typed to
-// return its own host-node union, which cannot hold what a component returns (an Image is
-// JSX.Element). Same function either way.
-import {
-  createComponent,
-  createEffect,
-  createMemo,
-  createSignal,
-  untrack,
-} from 'solid-js';
+import { createEffect, createMemo, createSignal, untrack } from 'solid-js';
 import type { Accessor, Ref } from 'solid-js';
-import {
-  descriptorToSolid,
-  Image,
-  type IHostInstance,
-} from '@symbiote-native/solid';
+import { descriptorToSolid, type IHostInstance } from '@symbiote-native/solid';
 import {
   createElement,
   createTextNode,
@@ -341,7 +328,7 @@ export function createSlider(
     // replacing it — which would drop the thumb the user is dragging.
     const leaf = descriptorToSolid(() => renderSliderNative(view(), platform));
 
-    const wrapper = hostElement('symbiote-view');
+    const wrapper = hostElement('view');
     // A statically-present key set (all three are always emitted), so this needs no withStableKeys
     // widening — `spread` alone has no removal pass for a key that vanishes.
     spread(
@@ -382,7 +369,7 @@ function buildCustomOverlay(params: ICustomOverlayParams): ISymbioteNode {
   const min = params.cells[0];
   const max = params.cells[params.cells.length - 1];
 
-  const container = hostElement('symbiote-view');
+  const container = hostElement('view');
   // pointerEvents none so the overlay never eats the drag. `style` tracks the measured width, hence
   // an accessor rather than a one-shot setProp.
   spread(
@@ -415,10 +402,10 @@ type IStepCellParams = {
 
 function buildStepCell(cell: IStepCellParams): ISymbioteNode {
   const { params } = cell;
-  const element = hostElement('symbiote-view');
+  const element = hostElement('view');
   setProp(element, 'style', STEP_INDICATOR_ELEMENT_STYLE);
 
-  const track = hostElement('symbiote-view');
+  const track = hostElement('view');
   setProp(track, 'style', TRACK_MARK_CONTAINER_STYLE);
   insertNode(element, track);
 
@@ -438,9 +425,9 @@ function buildStepCell(cell: IStepCellParams): ISymbioteNode {
   insert(track, () => [markerElement, buildThumbImage(cell)]);
 
   if (params.withNumbers) {
-    const numberBox = hostElement('symbiote-view');
+    const numberBox = hostElement('view');
     setProp(numberBox, 'style', STEP_NUMBER_CONTAINER_STYLE);
-    const label = hostElement('symbiote-text');
+    const label = hostElement('text');
     setProp(label, 'testID', `${cell.index}th-step`);
     setProp(label, 'style', { fontSize: cell.fontSize });
     insertNode(label, createTextNode(String(cell.value)));
@@ -455,14 +442,14 @@ function buildThumbImage(cell: IStepCellParams): ISymbioteNode | null {
   if (source === undefined || cell.value !== cell.params.currentValue()) {
     return null;
   }
-  const container = hostElement('symbiote-view');
+  const container = hostElement('view');
   setProp(container, 'style', THUMB_IMAGE_CONTAINER_STYLE);
   setProp(container, 'testID', 'sliderTrackMark-thumbImage');
-  // The Image COMPONENT, not a raw symbiote-image: it resolves an asset id through RN's own
-  // resolveAssetSource, exactly as React's and Vue's custom overlays do.
-  insert(
-    container,
-    createComponent(Image, { source, style: THUMB_IMAGE_STYLE }),
-  );
+  const thumb = hostElement('image');
+  // An asset id still resolves: the fold that used to live in the Image wrapper is now
+  // `sourceOf` in the shared image behavior, which every path into the tag crosses.
+  setProp(thumb, 'source', source);
+  setProp(thumb, 'style', THUMB_IMAGE_STYLE);
+  insertNode(container, thumb);
   return container;
 }

package/src/svelte/slider/index.svelte

@@ -16,9 +16,9 @@
   // the main barrel pulls in the whole `.svelte` module graph, fatal under vitest's plain
   // svelte-plugin-free transform (this component's own smoke test).
   //
-  // The custom-marker overlay's thumb-image cell uses the raw `symbiote-image` host tag rather
+  // The custom-marker overlay's thumb-image cell uses the raw `image` host tag rather
   // than the framework's `Image` component: core's `render-steps-indicator.ts` paints the same
-  // default-overlay thumb with a bare `el('symbiote-image', {source, style})` Descriptor, and
+  // default-overlay thumb with a bare `el('image', {source, style})` Descriptor, and
   // importing another `.svelte` component here would reintroduce the same main-barrel problem
   // one level down.
   import type { ISliderProps } from './slider-props';
@@ -274,8 +274,8 @@
 </script>
 
 {#if hasStepMarker}
-  <symbiote-view p={markerWrapperBag} bind:this={hostShimMarker}>
-    <symbiote-view
+  <view p={markerWrapperBag} bind:this={hostShimMarker}>
+    <view
       p={{
         pointerEvents: 'none',
         testID: 'StepsIndicator-Container',
@@ -283,8 +283,8 @@
       }}
     >
       {#each orderedOptions as optionValue, index (optionValue)}
-        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
-          <symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
+        <view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
+          <view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
             {@render stepMarker?.({
               stepMarked: optionValue === currentValue,
               currentValue,
@@ -293,33 +293,29 @@
               max: maxOption,
             })}
             {#if thumbImage !== undefined && optionValue === currentValue}
-              <symbiote-view
+              <view
                 p={{
                   style: THUMB_IMAGE_CONTAINER_STYLE,
                   testID: 'sliderTrackMark-thumbImage',
                 }}
               >
-                <symbiote-image
-                  p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }}
-                />
-              </symbiote-view>
+                <image p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }} />
+              </view>
             {/if}
-          </symbiote-view>
+          </view>
           {#if renderStepNumber}
-            <symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
-              <symbiote-text
-                p={{ testID: `${index}th-step`, style: { fontSize } }}
-              >
+            <view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
+              <text p={{ testID: `${index}th-step`, style: { fontSize } }}>
                 {String(optionValue)}
-              </symbiote-text>
-            </symbiote-view>
+              </text>
+            </view>
           {/if}
-        </symbiote-view>
+        </view>
       {/each}
-    </symbiote-view>
-  </symbiote-view>
+    </view>
+  </view>
 {:else}
-  <symbiote-view
+  <view
     p={{ ...defaultDescriptor?.props, class: className }}
     bind:this={hostShimDefault}
   />

package/src/vue/slider/shared.ts

@@ -66,7 +66,7 @@ import {
 
 // ISliderProps lives framework-agnostic in packages/slider/src/core; `class` can't join it
 // there, so it's added locally, exactly like Image's IImageProps. It targets the WRAPPER
-// `symbiote-view` like `style`, not the inner native slider leaf `passthrough` reaches — see
+// `view` like `style`, not the inner native slider leaf `passthrough` reaches — see
 // the class-routing note on HANDLED_ATTRS below.
 export type ISliderProps = Omit<
   ISliderBaseProps,
@@ -126,7 +126,7 @@ function asAccessibilityState(
 // thumbSize, tapToSeek, vertical, accessibility*/testID/aria-*) forwards onto the native node.
 // The four callbacks are JS-only and must NEVER reach Fabric, so they are stripped here and
 // re-supplied as the native event handlers in `passthrough`. `class` is handled too: like
-// `style`, it targets the WRAPPER `symbiote-view` (renderSlider's outer element), never the
+// `style`, it targets the WRAPPER `view` (renderSlider's outer element), never the
 // inner native slider leaf `passthrough` reaches — applied explicitly by each render path below.
 const HANDLED_ATTRS = [
   'value',
@@ -158,7 +158,7 @@ function forwardAttrs(attrs: Record<string, unknown>): Record<string, unknown> {
   return result;
 }
 
-// renderSlider builds the wrapper `symbiote-view` descriptor itself, with no `class` field of
+// renderSlider builds the wrapper `view` descriptor itself, with no `class` field of
 // its own (packages/slider/src/core stays framework-agnostic). `class` is stamped onto that
 // returned descriptor's props here, right before the Vue bridge, so it lands on the SAME
 // element `style` targets rather than the inner native leaf `passthrough` would otherwise
@@ -308,7 +308,7 @@ export function createSlider(platform: ISliderPlatform) {
             stepMarker: slots.stepMarker,
           });
           return h(
-            'symbiote-view',
+            'view',
             {
               style: resolveStepsWrapperStyle(view.style, platform),
               class: attrs.class,
@@ -389,12 +389,11 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): VNode {
       min,
       max,
     });
-    if (marker !== undefined)
-      trackChildren.push(h('symbiote-view', {}, marker));
+    if (marker !== undefined) trackChildren.push(h('view', {}, marker));
     if (isImageSourceProp(params.thumbImage) && value === params.currentValue) {
       trackChildren.push(
         h(
-          'symbiote-view',
+          'view',
           {
             style: THUMB_IMAGE_CONTAINER_STYLE,
             testID: 'sliderTrackMark-thumbImage',
@@ -404,27 +403,23 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): VNode {
       );
     }
     const cellChildren: VNode[] = [
-      h('symbiote-view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),
+      h('view', { style: TRACK_MARK_CONTAINER_STYLE }, trackChildren),
     ];
     if (params.renderStepNumber) {
       cellChildren.push(
-        h('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
+        h('view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
           h(
-            'symbiote-text',
+            'text',
             { testID: `${index}th-step`, style: { fontSize } },
             String(value),
           ),
         ]),
       );
     }
-    return h(
-      'symbiote-view',
-      { style: STEP_INDICATOR_ELEMENT_STYLE },
-      cellChildren,
-    );
+    return h('view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
   });
   return h(
-    'symbiote-view',
+    'view',
     {
       pointerEvents: 'none',
       testID: 'StepsIndicator-Container',