@symbiote-native/svelte 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 A. Prokopenko
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,161 @@
+# @symbiote-native/svelte
+
+The **Svelte adapter** for [SymbioteNative](../../README.md) — render real native iOS/Android views
+from Svelte 5, on the _same_ untouched core as React, Vue, and Angular, with React Native's own
+renderer never in the path. Svelte ships no official host-renderer API yet (`createRenderer` is
+still an unmerged PR upstream), so instead of hooking a framework-blessed extension point this
+adapter patches `globalThis`'s DOM classes: stock compiled Svelte client output believes it is
+talking to a real DOM, and every one of those calls routes into `@symbiote-native/engine`'s same
+four-call mutation API underneath, which does the clone-on-write commit into Fabric.
+
+Svelte is the **sharpest test yet** that the core is genuinely framework-agnostic — unlike Vue's
+`createRenderer` or Angular's `Renderer2`, there was no host-renderer seam to hook here at all.
+
+<div align="center">
+
+![Svelte driving real native iOS views through SymbioteNative](../../assets/svelte-demo.gif)
+
+</div>
+
+> New to SymbioteNative? The [root README](../../README.md) has the architecture.
+
+---
+
+## Install
+
+```bash
+npm install @symbiote-native/svelte react-native svelte
+```
+
+`react-native` and `svelte` stay your app's own top-level dependencies — this package only
+replaces the JS renderer that drives them. Every component is a `.svelte` SFC — there's no TSX
+alternative the way Vue offers — so the Metro wiring below isn't optional. There's no
+`create-symbiote` scaffolder yet, so it comes from [`examples/svelte`](../../examples/svelte)
+rather than a generator:
+
+- `metro.config.js` — point `babelTransformerPath` at
+  `@symbiote-native/svelte/metro-svelte-transformer` (compiles `.svelte` on the way into the
+  bundle) and disable `inlineRequires` (see [the gotcha
+  below](#a-svelte-specific-gotcha--inlinerequires-vs-the-svelte-runtime)).
+- `svelte.config.js` — registers the `forbidWebOnlyConstructs()` and `scopedStyles()`
+  preprocessors, so `svelte-check` and the editor catch the same things Metro's transformer
+  already guards against at build time, and sets `compilerOptions: { fragments: 'tree', css:
+'external' }`.
+
+---
+
+## Use it
+
+The native entry reaches the _same_ seam as every other adapter. `createApp(App).mount(appName)`
+wires the native-host seams and RN's own `AppRegistry`, then mounts via `@symbiote-native/engine` —
+RN's own renderer is never in the path:
+
+```js
+// index.js
+import { createApp } from '@symbiote-native/svelte/bootstrap';
+import App from './App.svelte';
+import { name as appName } from './app.json';
+
+createApp(App).mount(appName);
+```
+
+The app is ordinary Svelte 5 — it just imports primitives from `@symbiote-native/svelte` instead of
+`react-native`. A tap→increment counter, using runes:
+
+```svelte
+<script lang="ts">
+  import { View, Text, Pressable } from '@symbiote-native/svelte';
+
+  let count = $state(0);
+</script>
+
+<View style={{ padding: 24 }}>
+  <Text>Taps: {count}</Text>
+  <Pressable onPress={() => count++}>
+    <Text>Tap me</Text>
+  </Pressable>
+</View>
+```
+
+The full canary is [`examples/svelte`](../../examples/svelte) — a stock RN 0.86 app whose
+[`App.svelte`](../../examples/svelte/App.svelte) exercises the same surface as the React, Vue, and
+Angular reference canaries.
+
+---
+
+## Parity — and the one gap
+
+Svelte reaches the same primitives, runtime modules, `Animated` on both drivers, gestures,
+accessibility, and the `VirtualizedList` family as React, Vue, and Angular, verified on-device on
+iOS and Android. That parity is **structural, not hand-copied**: the component logic (state
+machines + render functions) is written **once** in `@symbiote-native/components`, and Svelte
+supplies only its lifecycle — runes (`$state` / `$derived` / `$effect`) driving hand-authored
+`.svelte` markup that mirrors each `render-*.ts` directly, rather than a generic descriptor bridge
+the way React and Vue use one.
+
+The one deliberate gap, same as every other non-React adapter — **third-party React component
+packages** (`@react-native-community/slider` used directly) run only under the React adapter:
+their body calls React hooks off the React dispatcher, which is null under Svelte.
+`@symbiote-native/slider` (this repo's own wrapper) _does_ ship a real Svelte build
+(`@symbiote-native/slider/svelte`) through the same `createNode`-by-ViewConfig path Svelte uses
+for its own primitives — that wrapper is what makes this one third-party native view usable from
+Svelte at all; any _other_ React-only component package stays React-adapter-only until it gets the
+same treatment.
+
+---
+
+## A Svelte-specific gotcha — inlineRequires vs the Svelte runtime
+
+RN's default Metro config turns on `inlineRequires` for every top-level import. Svelte's internal
+client runtime (`svelte/internal/client/**`) is a graph of small files wired through module-scope
+singleton reactivity state (the current-effect/signal graph); under `inlineRequires` that graph
+re-enters itself while mounting and blows the JS stack — `Maximum call stack size exceeded` inside
+`metroRequire`, reproduced on a real device/simulator, not just in theory.
+[`examples/svelte`](../../examples/svelte)'s `metro.config.js` disables it explicitly
+(`experimentalImportSupport: false, inlineRequires: false`); any new Svelte app needs the same
+override, since RN's default Metro config doesn't know to do this on its own.
+
+A smaller one: Svelte's compiler only trims LEADING/TRAILING whitespace inside a fragment —
+whitespace strictly _between_ two sibling non-text nodes collapses to a real text node and is
+kept. That's invisible on the web, but a stray text node between siblings under a non-`Text`
+parent is an invalid Fabric child on this DOM shim, so markup inside an `{#each}`/`{#if}` chain
+over host primitives has to avoid it — this repo carries a device-verified regression test
+guarding it.
+
+---
+
+## Run it
+
+[`examples/svelte`](../../examples/svelte) is a stock React Native 0.86 app. Requires Node ≥ 22
+and the [RN environment setup](https://reactnative.dev/docs/set-up-your-environment) (Xcode,
+CocoaPods):
+
+```bash
+cd examples/svelte
+npm install
+bundle install                 # first time only — installs CocoaPods itself
+bundle exec pod install        # fetch native pods
+
+# terminal 1 — Metro. DEBUG=1 turns on diagnostic logs.
+DEBUG=1 npm run dev
+
+# terminal 2 — build + launch
+npm run ios                    # iOS simulator
+npm run android                # Android emulator
+```
+
+---
+
+## Test it
+
+```bash
+pnpm test                      # vitest, from the workspace root — headless, fake Fabric slot
+
+cd examples/svelte
+npm run e2e:build:ios          # build the app for Detox
+npm run e2e:test:ios           # run the canary journeys on the iOS simulator
+# …or the android equivalents: e2e:build:android / e2e:test:android
+```
+
+Why these come for free — a SymbioteNative app is a stock RN app underneath, so RN's whole testing
+ecosystem applies unchanged. See [Testing](../../README.md#testing).

package/build/bootstrap.d.ts

@@ -0,0 +1,7 @@
+import type { Component } from 'svelte';
+import { type IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type { IBootstrapHostOptions } from '@symbiote-native/components/bootstrap';
+export type ISymbioteSvelteApp = {
+    mount(appName: string): void;
+};
+export declare function createApp(RootComponent: Component, options?: IBootstrapHostOptions): ISymbioteSvelteApp;

package/build/bootstrap.js

@@ -0,0 +1,17 @@
+// Zero-config app entry, the Svelte twin of adapters/vue/src/bootstrap.ts and
+// adapters/react/src/bootstrap.ts. Lives OUTSIDE the package's main barrel — react-native's
+// own source is Flow syntax Vitest's transform can't parse, so anything importing it directly
+// must stay unreachable from the tested main index.ts.
+import { AppRegistry as RNAppRegistry } from 'react-native';
+import { bootstrapHost } from '@symbiote-native/components/bootstrap';
+import { AppRegistry, setHostRegistrar } from './modules/app-registry/index.js';
+// Mirrors the Vue/React adapters' createApp(App).mount(appName) two-step idiom.
+export function createApp(RootComponent, options = {}) {
+    return {
+        mount(appName) {
+            bootstrapHost(options);
+            setHostRegistrar(RNAppRegistry);
+            AppRegistry.registerComponent(appName, () => RootComponent);
+        },
+    };
+}

package/build/class-value.d.ts

@@ -0,0 +1,6 @@
+import { resolveClassName, type IClassNameValue } from '@symbiote-native/engine';
+export type IClassMap = Readonly<Record<string, boolean | null | undefined>>;
+export type IClassEntry = IClassNameValue | IClassMap | false;
+export type ISvelteClassValue = IClassEntry | ReadonlyArray<IClassEntry | ReadonlyArray<IClassEntry>>;
+export declare function normalizeSvelteClass(value: unknown): unknown;
+export declare function resolveSvelteClass(value: unknown): ReturnType<typeof resolveClassName>;

package/build/class-value.js

@@ -0,0 +1,81 @@
+// clsx-shaped `class` values, normalized to a class string at this adapter's bag boundary.
+//
+// WHY THIS IS THE ADAPTER'S JOB. `class={{ active: isOn }}` and `class={['card', isOn &&
+// 'card-on']}` are idiomatic Svelte, but Svelte only normalizes them on the ELEMENT path:
+// `set_class` runs the value through `clsx()` + `to_class()`
+// (svelte/src/internal/shared/attributes.js). A COMPONENT prop gets no such treatment — it is
+// handed over verbatim. App code here never authors a host element (it composes View/Text/… from
+// @symbiote-native/svelte, skill §7), so every class value in this adapter arrives as a component
+// prop and the normalization Svelte would have done is ours to do.
+//
+// WHY NOT WIDEN THE ENGINE'S resolveClassName INSTEAD. There, a plain object means an
+// ALREADY-RESOLVED STYLE and is returned untouched. That is load-bearing for the other three
+// adapters — React only ever passes a string, and Vue's own `normalizeClass` has already
+// flattened `:class="{ active: x }"` into a string before patchProp is reached — so teaching
+// resolveClassName to read an object as a class map would silently change their behaviour.
+//
+// THE DISAMBIGUATION RULE, and why this one: `{ color: 'red' }` is a resolved style and
+// `{ active: true }` is a clsx map, and the two shapes are only told apart by their VALUES.
+//   every own value is boolean / null / undefined  ->  clsx map
+//   anything else (including an empty object)      ->  resolved style, passed through untouched
+// A style object's values are colours, lengths and numbers — never booleans — while a clsx map
+// is written as `{ name: <condition> }`, and a condition idiomatically evaluates to a boolean.
+// The rule is also expressible in the type below (IClassMap's value type IS the runtime check),
+// so `{ card: someString }` — the one shape that would silently take the style branch — is a
+// compile error at the call site rather than a surprise at runtime. An empty object is
+// deliberately NOT treated as a clsx map: both readings contribute no style, so the cheaper,
+// non-allocating branch is the right one.
+import { isClassNameValue, resolveClassName } from '@symbiote-native/engine';
+// Returns a class STRING when the value is clsx-shaped, and the value UNTOUCHED otherwise, so
+// everything the engine already resolved correctly keeps taking the exact path it took before.
+export function normalizeSvelteClass(value) {
+    if (typeof value !== 'object' || value === null)
+        return value;
+    const parts = [];
+    return collectClsxParts(value, parts) ? parts.join(CLASS_SEPARATOR) : value;
+}
+const CLASS_SEPARATOR = ' ';
+// For the handful of components that resolve a class to a style THEMSELVES rather than handing
+// it to the host bag — ScrollView and VirtualizedList split the resolved class into layout vs.
+// visual halves before they know which host tag gets which — so a clsx map reaches the registry
+// there too instead of falling into resolveClassName's "already a style" branch.
+export function resolveSvelteClass(value) {
+    const normalized = normalizeSvelteClass(value);
+    return resolveClassName(isClassNameValue(normalized) ? normalized : undefined);
+}
+// Mirrors clsx's own `toVal` (node_modules/clsx/dist/clsx.js), which is what Svelte's `clsx()`
+// wrapper delegates to for any object value: a string or number contributes itself, an array
+// recurses over its entries dropping the falsy ones, an object contributes every key whose value
+// is truthy. Returns false the moment it meets a plain object that is not a clsx map — that
+// makes the whole value non-clsx, so the caller hands it on unchanged.
+function collectClsxParts(value, parts) {
+    if (value === null || value === undefined || typeof value === 'boolean')
+        return true;
+    if (typeof value === 'string' || typeof value === 'number') {
+        if (value !== '' && value !== 0)
+            parts.push(String(value));
+        return true;
+    }
+    if (Array.isArray(value)) {
+        for (const entry of value) {
+            if (!collectClsxParts(entry, parts))
+                return false;
+        }
+        return true;
+    }
+    if (typeof value !== 'object')
+        return false;
+    const entries = Object.entries(value);
+    if (!isClassMapEntries(entries))
+        return false;
+    for (const [name, applies] of entries) {
+        if (applies === true)
+            parts.push(name);
+    }
+    return true;
+}
+function isClassMapEntries(entries) {
+    if (entries.length === 0)
+        return false;
+    return entries.every(([, applies]) => typeof applies === 'boolean' || applies === null || applies === undefined);
+}

package/build/components/RefreshControl.svelte

@@ -0,0 +1,38 @@
+<script lang="ts" module>
+  // RefreshControl primitive. On iOS this is the PullToRefreshView Fabric node that lives INSIDE
+  // a ScrollView (a sibling of the content container), giving the pull-to-refresh gesture. On
+  // Android it is AndroidSwipeRefreshLayout and WRAPS the scroll view (a childless-on-iOS,
+  // wraps-on-Android shape — see refresh-control-props.ts). `refreshing` is a controlled prop:
+  // the parent owns it and pushes it down each commit; native reports the gesture via the direct
+  // `topRefresh` event, which the engine routes to the host's `onRefresh` bag entry.
+  import type { IRefreshControlProps } from './refresh-control-props';
+
+  export type { IRefreshControlProps };
+</script>
+
+<script lang="ts">
+  import { dlog } from '@symbiote-native/engine';
+  import { resolveAccessibilityProps } from '@symbiote-native/components';
+  import { createAttachmentsSync } from '../runes/attachments';
+  import type { ShimElement } from '../dom-shim';
+
+  let { children, ...rest }: IRefreshControlProps = $props();
+
+  dlog('RefreshControl -> PullToRefreshView');
+  dlog(`RefreshControl refreshing=${String(rest.refreshing)}`);
+  if (rest.enabled !== undefined) dlog(`RefreshControl enabled=${String(rest.enabled)} (Android-only)`);
+  if (rest.onRefresh !== undefined) dlog('RefreshControl onRefresh listener wired');
+
+  const bag = $derived(resolveAccessibilityProps(rest));
+
+  // See View.svelte's note on `{@attach}`.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, rest);
+  });
+</script>
+
+<symbiote-refresh-control p={bag} bind:this={hostShim}>
+  {@render children?.()}
+</symbiote-refresh-control>

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

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

package/build/components/SafeAreaView.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" module>
+  // SafeAreaView primitive. A plain view whose native side insets its children to the safe area
+  // (notch, rounded corners, system bars). There is no JS-side translation; RN just renders the
+  // native RCTSafeAreaView and lets the host do the inset math, so this maps style + children
+  // straight onto the intrinsic — same object-bag pattern as View.svelte.
+  import type { ISafeAreaViewProps } from './safe-area-view-props';
+
+  export type { ISafeAreaViewProps };
+</script>
+
+<script lang="ts">
+  import { dlog } from '@symbiote-native/engine';
+  import { resolveAccessibilityProps } from '@symbiote-native/components';
+
+  import { createAttachmentsSync } from '../runes/attachments';
+  import type { ShimElement } from '../dom-shim';
+
+  let { children, ...rest }: ISafeAreaViewProps = $props();
+
+  dlog('SafeAreaView -> SafeAreaView');
+
+  const bag = $derived(resolveAccessibilityProps(rest));
+
+  // See View.svelte's note on `{@attach}`.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, rest);
+  });
+</script>
+
+<symbiote-safe-area-view p={bag} bind:this={hostShim}>
+  {@render children?.()}
+</symbiote-safe-area-view>

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

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

package/build/components/Text.svelte

@@ -0,0 +1,25 @@
+<script lang="ts" module>
+  // See View.svelte's header comment — same object-bag design (svelte-adapter-dom-shim
+  // skill §3g(c)). No IResponderProps here, matching every other adapter's ITextProps.
+  import type { ITextProps } from './text-props';
+
+  export type { ITextProps };
+</script>
+
+<script lang="ts">
+  import { createAttachmentsSync } from '../runes/attachments';
+  import type { ShimElement } from '../dom-shim';
+
+  let { children, ...bag }: ITextProps = $props();
+
+  // See View.svelte's note: `{@attach}` arrives as a symbol-keyed entry in the same rest object.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, bag);
+  });
+</script>
+
+<symbiote-text p={bag} bind:this={hostShim}>
+  {@render children?.()}
+</symbiote-text>

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

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

package/build/components/View.svelte

@@ -0,0 +1,41 @@
+<script lang="ts" module>
+  // Host primitive for app code. Per svelte-adapter-dom-shim skill §3g(c): Symbiote's
+  // custom-element codegen path stringifies individual attributes, so unlike Vue's View
+  // (which spreads props onto the intrinsic tag and lets patchProp route each one), this
+  // component assembles every prop into ONE object bag and hands it to `<symbiote-view p={bag}>`
+  // — the shim element's `p` setter diffs it per key into routeProp. `children` is pulled out
+  // first: it is a Svelte-specific field (a Snippet), never forwarded into the bag, mirroring
+  // why every adapter's IViewProps is declared per-adapter (CLAUDE.md
+  // <prop_types_split_agnostic_vs_per_adapter>) rather than shared verbatim.
+  import type { IViewProps } from './view-props';
+
+  export type { IViewProps };
+</script>
+
+<script lang="ts">
+  import { createAttachmentsSync } from '../runes/attachments';
+  import type { ShimElement } from '../dom-shim';
+
+  let { children, id, nativeID, ...rest }: IViewProps = $props();
+
+  // `{@attach fn}` on a component lands as a SYMBOL-keyed prop, so it rides in `rest` alongside
+  // the ordinary bag keys and never reaches the engine (routeProp only walks string keys). This
+  // is the one directive-shaped Svelte feature that IS legal on a component, hence the only way
+  // an author reaches the committed host node — see runes/attachments.ts.
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, rest);
+  });
+
+  // RN's modern `id` is just a W3C-named alias for `nativeID`: View.js copies it over
+  // (`processedProps.nativeID = id`), so `id` wins when both are set. Fold it here and drop
+  // the raw `id` key so it never reaches Fabric (every non-function prop in the bag otherwise
+  // passes through to the slot as-is) — mirrors React's `resolveId` in
+  // `adapters/react/src/components.ts`, adapted to the object-bag idiom.
+  const bag = $derived(id === undefined ? { ...rest, nativeID } : { ...rest, nativeID: id });
+</script>
+
+<symbiote-view p={bag} bind:this={hostShim}>
+  {@render children?.()}
+</symbiote-view>

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

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

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

@@ -0,0 +1,3 @@
+import type { IActivityIndicatorPlatform } from '@symbiote-native/components';
+export type { IActivityIndicatorPlatform };
+export declare const PLATFORM: IActivityIndicatorPlatform;

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

@@ -0,0 +1,5 @@
+export const PLATFORM = {
+    // 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/activity-indicator-platform.d.ts

@@ -0,0 +1 @@
+export * from './activity-indicator-platform.ios';

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

@@ -0,0 +1,3 @@
+import type { IActivityIndicatorPlatform } from '@symbiote-native/components';
+export type { IActivityIndicatorPlatform };
+export declare const PLATFORM: IActivityIndicatorPlatform;

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

@@ -0,0 +1,6 @@
+// RN's iOS default spinner color (Libraries/.../ActivityIndicator.js GRAY).
+const IOS_DEFAULT_COLOR = '#999999';
+export const PLATFORM = {
+    defaultColor: IOS_DEFAULT_COLOR,
+    nativeExtras: {},
+};

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

@@ -0,0 +1,5 @@
+// Base / default: re-exports the iOS build. Metro overrides this with
+// activity-indicator-platform.ios.ts / .android.ts on a real host; under tsc/vitest the host
+// config resolves here. Filename is the selector, no Platform.OS read — same convention as
+// switch/switch-platform.ts.
+export * from './activity-indicator-platform.ios.js';

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

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

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

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

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

@@ -0,0 +1,57 @@
+<script lang="ts" module>
+  // ActivityIndicator: render-only (no state). Calls the shared renderActivityIndicator()
+  // straight from core/components — the size translation, platform default-color fold, and
+  // native-extras all live there, once, for every adapter. The root stays a literal template
+  // tag (`bind:this` needs a known tag), but its child (the spinner) is materialized and kept
+  // in sync via the generic descriptorToSvelte bridge (createDescriptorChildrenSync) instead of
+  // a hand-written child tag — see svelte-adapter-dom-shim skill §19 for why this is safe and
+  // cheap (create once, update by position, never recreate).
+  import type { IActivityIndicatorProps } from './activity-indicator-props';
+
+  export type { IActivityIndicatorProps };
+</script>
+
+<script lang="ts">
+  import { renderActivityIndicator, resolveAccessibilityProps } from '@symbiote-native/components';
+  import { PLATFORM } from './activity-indicator-platform';
+  import { createDescriptorChildrenSync } from '../../descriptor-to-svelte';
+  import { createAttachmentsSync } from '../../runes/attachments';
+  import type { ShimElement } from '../../dom-shim';
+
+  let {
+    animating = true,
+    color,
+    hidesWhenStopped = true,
+    size = 'small',
+    style,
+    class: className,
+    ...passthrough
+  }: IActivityIndicatorProps = $props();
+
+  const descriptor = $derived(
+    renderActivityIndicator(
+      {
+        animating,
+        hidesWhenStopped,
+        size,
+        color,
+        style,
+        passthrough: { ...resolveAccessibilityProps(passthrough), class: className },
+      },
+      PLATFORM,
+    ),
+  );
+  let hostShim = $state.raw<ShimElement | null>(null);
+  const syncChildren = createDescriptorChildrenSync();
+
+  $effect(() => {
+    syncChildren(hostShim, descriptor.children);
+  });
+  // See View.svelte's note on `{@attach}`.
+  const syncAttachments = createAttachmentsSync();
+  $effect(() => {
+    syncAttachments(hostShim, passthrough);
+  });
+</script>
+
+<symbiote-view p={descriptor.props} bind:this={hostShim} />

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

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

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

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

package/build/components/button-props.js

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