@symbiote-native/svelte 0.2.1 → 1.0.0

package/metro-svelte-transformer.cjs

@@ -35,7 +35,11 @@ const upstreamTransformer = resolveUpstreamTransformer();
 // svelte-check, the language server, Vite), while this file is `require()`d by Metro directly
 // and must stay pure CommonJS with no build step of its own, exactly like
 // metro-vue-transformer.cjs.
-const COMPILER_OPTIONS = { fragments: 'tree', css: 'external', generate: 'client' };
+const COMPILER_OPTIONS = {
+  fragments: 'tree',
+  css: 'external',
+  generate: 'client',
+};
 
 // The web-only-construct guard (svelte-adapter-dom-shim skill §7/§22) RUNS HERE, on every
 // `.svelte` Metro compiles — not just via svelte-check/the language server. `{@html}` compiles
@@ -50,21 +54,21 @@ const COMPILER_OPTIONS = { fragments: 'tree', css: 'external', generate: 'client
 // `require()` cannot pull an ESM/TS module, but `transform` is already async.
 let preprocessorPromise;
 function webOnlyConstructGuard() {
-  preprocessorPromise ??= import('@symbiote-native/svelte/preprocessor').then(mod =>
-    mod.forbidWebOnlyConstructs(),
+  preprocessorPromise ??= import('@symbiote-native/svelte/preprocessor').then(
+    mod => mod.forbidWebOnlyConstructs(),
   );
   return preprocessorPromise;
 }
 
 // The `<style>` preprocessor, loaded the same lazy way and for the same reason. Unlike the guard
 // above (which only throws and hands the source back untouched), this one REWRITES the source —
-// it compiles the style block into registerStyles() output and scopes every `class` in the
+// it compiles the style block into registerRules() output and scopes every `class` in the
 // component's own markup — so its returned `code` is what compile() must be given. See
 // src/preprocessor/scoped-styles.ts for why Svelte's own `result.css` cannot be used instead.
 let scopedStylesPromise;
 function scopedStylesPreprocessor() {
-  scopedStylesPromise ??= import('@symbiote-native/svelte/scoped-styles').then(mod =>
-    mod.scopedStyles(),
+  scopedStylesPromise ??= import('@symbiote-native/svelte/scoped-styles').then(
+    mod => mod.scopedStyles(),
   );
   return scopedStylesPromise;
 }
@@ -75,11 +79,24 @@ function scopedStylesPreprocessor() {
 // renders as a forced line break on device. Loaded lazily for the same reason as the two above.
 let collapseTextWhitespacePromise;
 function collapseTextWhitespacePreprocessor() {
-  collapseTextWhitespacePromise ??= import('@symbiote-native/svelte/collapse-text-whitespace').then(
-    mod => mod.collapseTextWhitespace(),
-  );
+  collapseTextWhitespacePromise ??=
+    import('@symbiote-native/svelte/collapse-text-whitespace').then(mod =>
+      mod.collapseTextWhitespace(),
+    );
   return collapseTextWhitespacePromise;
 }
+
+// Lowers <View>/<Text> to their intrinsic tags so a primitive stops costing a Svelte component
+// boundary — which in Svelte is paid in ANCHOR NODES, 12 per benchmark row (see the file header).
+// Loaded lazily for the same reason as the three above.
+let lowerHostPrimitivesPromise;
+function lowerHostPrimitivesPreprocessor() {
+  lowerHostPrimitivesPromise ??=
+    import('@symbiote-native/svelte/lower-host-primitives').then(mod =>
+      mod.lowerHostPrimitives(),
+    );
+  return lowerHostPrimitivesPromise;
+}
 //
 // Svelte 5's compiler strips <script lang="ts"> types structurally, with no external type
 // resolution needed (unlike @vue/compiler-sfc's compileScript, which needs registerTS + a real
@@ -108,13 +125,19 @@ function compileSvelteFile(src, filename) {
 function stripTypeScript(src, filename) {
   const { outputText } = ts.transpileModule(src, {
     fileName: filename,
-    compilerOptions: { module: ts.ModuleKind.ESNext, target: ts.ScriptTarget.ESNext },
+    compilerOptions: {
+      module: ts.ModuleKind.ESNext,
+      target: ts.ScriptTarget.ESNext,
+    },
   });
   return outputText;
 }
 
 function compileSvelteModuleFile(src, filename) {
-  const { js } = compileModule(stripTypeScript(src, filename), { generate: 'client', filename });
+  const { js } = compileModule(stripTypeScript(src, filename), {
+    generate: 'client',
+    filename,
+  });
   return js.code;
 }
 
@@ -127,14 +150,22 @@ module.exports.transform = async function transform(params) {
   if (params.filename.endsWith('.svelte')) {
     // Throws with a message naming the RN alternative. Deliberately BEFORE compile(), so the
     // author sees the real diagnosis rather than a downstream symptom.
-    (await webOnlyConstructGuard()).markup({ content: params.src, filename: params.filename });
+    (await webOnlyConstructGuard()).markup({
+      content: params.src,
+      filename: params.filename,
+    });
     const stylePreprocessed = await (
       await scopedStylesPreprocessor()
     ).markup({ content: params.src, filename: params.filename });
     const preprocessed = await (
       await collapseTextWhitespacePreprocessor()
     ).markup({ content: stylePreprocessed.code, filename: params.filename });
-    const code = compileSvelteFile(preprocessed.code, params.filename);
+    // LAST, and after scopedStyles specifically — see svelte.config.js for why the order is
+    // load-bearing rather than stylistic.
+    const lowered = await (
+      await lowerHostPrimitivesPreprocessor()
+    ).markup({ content: preprocessed.code, filename: params.filename });
+    const code = compileSvelteFile(lowered.code, params.filename);
     // Re-label as .tsx so RN's transformer processes the module exactly like app source; Metro
     // tracks the real path separately. Matches metro-vue-transformer.cjs's identical trick.
     return upstreamTransformer.transform({
@@ -143,7 +174,10 @@ module.exports.transform = async function transform(params) {
       filename: params.filename + '.tsx',
     });
   }
-  if (params.filename.endsWith('.svelte.ts') || params.filename.endsWith('.svelte.js')) {
+  if (
+    params.filename.endsWith('.svelte.ts') ||
+    params.filename.endsWith('.svelte.js')
+  ) {
     const code = compileSvelteModuleFile(params.src, params.filename);
     return upstreamTransformer.transform({
       ...params,

package/package.json

@@ -1,7 +1,17 @@
 {
   "name": "@symbiote-native/svelte",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "description": "SymbioteNative's Svelte adapter — a DOM shim over stock compiled Svelte output driving real native iOS/Android views through the same engine as every other adapter.",
+  "keywords": [
+    "react-native",
+    "symbiote-native",
+    "svelte",
+    "fabric",
+    "cross-platform",
+    "ios",
+    "android",
+    "renderer"
+  ],
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -42,6 +52,10 @@
       "types": "./build/preprocessor/collapse-text-whitespace.d.ts",
       "default": "./build/preprocessor/collapse-text-whitespace.js"
     },
+    "./lower-host-primitives": {
+      "types": "./build/preprocessor/lower-host-primitives.d.ts",
+      "default": "./build/preprocessor/lower-host-primitives.js"
+    },
     "./style-scope": {
       "types": "./build/style-scope.d.ts",
       "default": "./build/style-scope.js"
@@ -51,7 +65,11 @@
       "default": "./build/scope-token.js"
     },
     "./metro-svelte-transformer": "./metro-svelte-transformer.cjs",
-    "./metro-css-parser": "./metro-css-parser.cjs"
+    "./metro-css-parser": "./metro-css-parser.cjs",
+    "./state-style": {
+      "types": "./build/state-style.d.ts",
+      "default": "./build/state-style.js"
+    }
   },
   "files": [
     "build",
@@ -63,22 +81,22 @@
   },
   "dependencies": {
     "typescript": "~6.0.0",
-    "@symbiote-native/components": "0.4.0",
-    "@symbiote-native/css-parser": "0.3.0"
+    "@symbiote-native/components": "1.0.0",
+    "@symbiote-native/css-parser": "0.5.0"
   },
   "peerDependencies": {
-    "@symbiote-native/engine": ">=0.1.7",
     "svelte": ">=5.56.0",
-    "react-native": ">=0.86"
+    "react-native": ">=0.86",
+    "@symbiote-native/engine": "^0.4.0"
   },
   "devDependencies": {
     "@vue/runtime-core": "^3.5.13",
     "react": "19.2.3",
     "svelte": "^5.56.0",
-    "@symbiote-native/react": "0.3.0",
-    "@symbiote-native/engine": "0.2.0",
-    "@symbiote-native/test-utils": "0.1.6",
-    "@symbiote-native/vue": "0.4.0"
+    "@symbiote-native/engine": "0.4.0",
+    "@symbiote-native/react": "1.0.0",
+    "@symbiote-native/test-utils": "0.3.0",
+    "@symbiote-native/vue": "1.0.0"
   },
   "scripts": {
     "typecheck": "tsc --build",

package/build/modules/animated/AnimatedImage.svelte

@@ -1,115 +0,0 @@
-<script lang="ts" module>
-  // Animated.Image — unlike View/Text, Image.svelte does REAL prop transformation
-  // (buildImageBag: source resolution, resizeMode/tintColor read off style, width/height fold,
-  // alt->accessibility). Hand-authoring a bare pass-through bag here (like AnimatedView/Text)
-  // would silently drop all of that — the exact copy-paste-instead-of-calling bug class the
-  // svelte-adapter-dom-shim skill's §15/§19 already caught on Switch/ActivityIndicator/
-  // TextInput/ImageBackground. So this component calls buildImageBag itself (same as
-  // image/index.svelte), fed with rasterized (reduceProps'd) field values.
-  //
-  // Known, inherited (not Svelte-specific) limitation: the PER-FRAME animated path
-  // (AnimatedProps.update -> setNativeProps) pushes the raw `rest` fields directly, bypassing
-  // buildImageBag's mapping — same as Vue's/React's Animated.Image, since AnimatedProps is
-  // framework-agnostic and has no notion of a component's own prop transform. In practice this
-  // only matters if a non-`style` field (e.g. `source`) is itself animated, which is not a
-  // supported use — animating Image is expected to go through `style` (opacity/transform),
-  // which round-trips correctly since buildImageBag keeps `style` under the same key name.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { resolveAccessibilityProps } from '@symbiote-native/components';
-  import type { IAccessibilityProps, IAriaProps, IImageViewProps } from '@symbiote-native/components';
-  import { buildImageBag } from '../../components/image/image-logic';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let { passthroughAnimatedPropExplicitValues: passthrough, ...rest }: IAnimatedComponentProps =
-    $props();
-
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // Rasterize every field (style's animated entries resolved to plain numbers, any other
-  // animated field to its current value), then re-run Image's own field split + buildImageBag
-  // over the resolved values — the same shape image/index.svelte builds, just fed reduced
-  // values instead of raw $props().
-  const reduced = $derived.by(() => {
-    const resolved = reduceProps(rest);
-    const {
-      source,
-      defaultSource,
-      loadingIndicatorSource,
-      style,
-      resizeMode,
-      tintColor,
-      src,
-      srcSet,
-      alt,
-      width,
-      height,
-      crossOrigin,
-      referrerPolicy,
-      ...imagePassthrough
-    } = resolved;
-    // reduceProps returns a flat Record<string, unknown> — every field above is `unknown`
-    // even though it is, at runtime, exactly the shape IImageViewProps/IAccessibilityProps
-    // declare. Bridging that back into a typed shape without an `as` cast uses the same
-    // `Object.assign(Object.create(null), …)` pattern React's create-animated-component.tsx
-    // already establishes: Object.create(null) types as `any`, so Object.assign's result does
-    // too, and TS allows assigning `any` into a specifically-typed binding.
-    const accessibility: IAccessibilityProps & IAriaProps = Object.assign(
-      Object.create(null),
-      imagePassthrough,
-    );
-    const view: IImageViewProps = Object.assign(Object.create(null), {
-      source,
-      defaultSource,
-      loadingIndicatorSource,
-      style,
-      resizeMode,
-      tintColor,
-      src,
-      srcSet,
-      alt,
-      width,
-      height,
-      crossOrigin,
-      referrerPolicy,
-      passthrough: resolveAccessibilityProps(accessibility),
-    });
-    const bag = buildImageBag(view);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      bag.style = bag.style === undefined ? passthroughStyle : [bag.style, passthroughStyle];
-    }
-    return bag;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedImage');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-image p={reduced} bind:this={hostShim} />

package/build/modules/animated/AnimatedImage.svelte.d.ts

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

package/build/modules/animated/AnimatedScrollView.svelte

@@ -1,92 +0,0 @@
-<script lang="ts" module>
-  // Animated.ScrollView — unlike View/Text/Image, ScrollView.svelte already exposes an
-  // imperative handle (scrollTo/scrollToEnd/flashScrollIndicators/getScrollNode, the SAME
-  // IScrollViewHandle shape createAnimatedComponent's resolveHostNode expects on Vue/React) via
-  // its own top-level `export function`s. That is exactly what `bind:this` needs, so this
-  // component WRAPS the real ScrollView.svelte directly rather than hand-authoring a reduced
-  // host tag — the only way to keep ScrollView's full feature surface (sticky headers,
-  // RefreshControl, maintainVisibleContentPosition, native scroll-attach) per
-  // <adapters_reach_full_feature_parity>; a hand-authored duplicate would silently lose all of
-  // it. getScrollNode() IS this adapter's resolveHostNode() equivalent for a scroll container.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import type { ISymbioteNode } from '@symbiote-native/engine';
-  import type { IScrollViewHandle } from '@symbiote-native/components';
-  import ScrollView from '../../components/scroll-view/index.svelte';
-  import type { IScrollViewProps } from '../../components/scroll-view/scroll-view-props';
-  import { pickAttachmentProps } from '../../runes/attachments';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  // The wrapped ScrollView's own instance — its exported functions ARE its public handle
-  // (svelte-adapter-dom-shim skill's ScrollView precedent), captured by IDENTITY via bind:this,
-  // never $state (a deep proxy would still work here since it's just function references, but
-  // $state.raw stays consistent with every other imperative-handle capture in this adapter).
-  let scrollRef = $state.raw<IScrollViewHandle | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // reduceProps returns Record<string, unknown> — every field is `unknown` even though it is,
-  // at runtime, exactly IScrollViewProps' shape. Bridged back without an `as` cast via the same
-  // Object.assign(Object.create(null), …) pattern AnimatedImage.svelte uses (and React's
-  // create-animated-component.tsx already establishes): Object.create(null) types as `any`, so
-  // the assignment result does too, and TS allows binding `any` into a typed variable.
-  const reduced = $derived.by(() => {
-    const resolved = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      resolved.style =
-        resolved.style === undefined ? passthroughStyle : [resolved.style, passthroughStyle];
-    }
-    const props: IScrollViewProps = Object.assign(Object.create(null), resolved);
-    return props;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedScrollView');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node: ISymbioteNode | null = scrollRef?.getScrollNode() ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // Forward the imperative handle: a parent's `bind:this` on <Animated.ScrollView> gets the
-  // same scrollTo/scrollToEnd/flashScrollIndicators/getScrollNode surface plain ScrollView
-  // exposes — the Svelte twin of Vue's delegating Proxy `expose()`.
-  export function scrollTo(options?: { x?: number; y?: number; animated?: boolean }): void {
-    scrollRef?.scrollTo(options);
-  }
-  export function scrollToEnd(options?: { animated?: boolean }): void {
-    scrollRef?.scrollToEnd(options);
-  }
-  export function flashScrollIndicators(): void {
-    scrollRef?.flashScrollIndicators();
-  }
-  export function getScrollNode(): ISymbioteNode | null {
-    return scrollRef?.getScrollNode() ?? null;
-  }
-
-  // `reduceProps` rebuilds a plain string-keyed Record, so `{@attach}`'s symbol keys do not
-  // survive it — forward them explicitly onto the wrapped ScrollView, which owns the host node.
-  const attachments = $derived(pickAttachmentProps(rest));
-</script>
-
-<ScrollView {...reduced} {...attachments} bind:this={scrollRef}>
-  {@render children?.()}
-</ScrollView>

package/build/modules/animated/AnimatedScrollView.svelte.d.ts

@@ -1,17 +0,0 @@
-import type { IAnimatedComponentProps } from './animated-component-props';
-export type { IAnimatedComponentProps };
-import type { ISymbioteNode } from '@symbiote-native/engine';
-declare const AnimatedScrollView: import("svelte").Component<IAnimatedComponentProps, {
-    scrollTo: (options?: {
-        x?: number;
-        y?: number;
-        animated?: boolean;
-    }) => void;
-    scrollToEnd: (options?: {
-        animated?: boolean;
-    }) => void;
-    flashScrollIndicators: () => void;
-    getScrollNode: () => ISymbioteNode | null;
-}, "">;
-type AnimatedScrollView = ReturnType<typeof AnimatedScrollView>;
-export default AnimatedScrollView;

package/build/modules/animated/AnimatedText.svelte

@@ -1,58 +0,0 @@
-<script lang="ts" module>
-  // Animated.Text — see AnimatedView.svelte's header comment for the shared design rationale
-  // (hand-authored root tag, shared reconcile runtime). Text.svelte is likewise a pure
-  // pass-through bag, so hand-authoring loses no logic.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  const reduced = $derived.by(() => {
-    const out = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      out.style = out.style === undefined ? passthroughStyle : [out.style, passthroughStyle];
-    }
-    return out;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedText');
-
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-text p={reduced} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-text>

package/build/modules/animated/AnimatedText.svelte.d.ts

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

package/build/modules/animated/AnimatedView.svelte

@@ -1,95 +0,0 @@
-<script lang="ts" module>
-  // Animated.View: wraps @symbiote-native/engine's Animated value graph around a
-  // symbiote-view host tag. Hand-authors its own root tag rather than composing View.svelte —
-  // View.svelte exposes no host-node escape hatch (no bind:this on its own root, nothing
-  // exported), so there is nothing to capture a ref onto; the pattern instead mirrors
-  // Pressable/ScrollView, the adapter's existing precedent for a component that needs the raw
-  // ShimElement (svelte-adapter-dom-shim skill). Since View.svelte does no prop transformation
-  // of its own (it is a pure pass-through bag), hand-authoring here loses no logic — unlike
-  // AnimatedImage, which reuses Image's buildImageBag for exactly that reason.
-  //
-  // The reactive plumbing (leaf lifecycle, native-driver opt-in, native event attach) is shared
-  // with AnimatedText/AnimatedImage/AnimatedScrollView via animated-props-runtime.ts — see this
-  // module's index.ts for why that is a shared HELPER rather than one generic
-  // createAnimatedComponent(Component) the way Vue/React have: Svelte has no h()/createElement
-  // to parametrize an arbitrary base component at runtime.
-  import type { IAnimatedComponentProps } from './animated-component-props';
-
-  export type { IAnimatedComponentProps };
-</script>
-
-<script lang="ts">
-  import {
-    createAnimatedLeafLifecycle,
-    dlog,
-    isNativeAnimatedAvailable,
-    reduceProps,
-    readPassthroughStyle,
-  } from '@symbiote-native/engine';
-  import { createAttachmentsSync } from '../../runes/attachments';
-  import type { ShimElement } from '../../dom-shim';
-
-  let {
-    children,
-    passthroughAnimatedPropExplicitValues: passthrough,
-    ...rest
-  }: IAnimatedComponentProps = $props();
-
-  // $state.raw, NOT $state — same identity rule every stateful component in this adapter
-  // follows (Switch/Pressable/ScrollView): a deep $state proxy would make the engine's
-  // WeakMap-keyed node lookups miss.
-  let hostShim = $state.raw<ShimElement | null>(null);
-
-  const wantsNative = $derived(passthrough != null && isNativeAnimatedAvailable());
-
-  // Reduced (rasterized) props for the declarative bag: every animated node replaced by its
-  // current value, so the first paint (and every non-animated re-render) carries concrete
-  // values — the per-FRAME path is separate (the runtime's reconcile below), driven straight
-  // off the raw `rest` object, never through this derivation.
-  let reducedCallCount = 0;
-  const reduced = $derived.by(() => {
-    const out = reduceProps(rest);
-    const passthroughStyle = readPassthroughStyle(passthrough);
-    if (passthroughStyle !== undefined) {
-      out.style = out.style === undefined ? passthroughStyle : [out.style, passthroughStyle];
-    }
-    dlog(`AnimatedView reduced#${++reducedCallCount} wantsNative=${wantsNative}`);
-    return out;
-  });
-
-  const runtime = createAnimatedLeafLifecycle('AnimatedView');
-
-  // DIAGNOSTIC (2026-08-13, tracking the effect_update_depth_exceeded device crash): isolates
-  // whether `bind:this={hostShim}` below EVER re-fires after the initial mount. If it does — a
-  // custom-element `p` prop commit re-triggering the ref callback — that reassignment would make
-  // THIS effect's `hostShim?.engineNode` read see a "new" dependency and re-run, independent of
-  // whatever else changed, which is a plausible source of a same-flush synchronous loop that has
-  // no equivalent in React (ref callbacks)/Vue (template refs)/Angular (ViewChild). Reads ONLY
-  // hostShim, deliberately excluding `rest`, so it is unambiguous which one retriggered it.
-  let hostShimChangeCount = 0;
-  $effect(() => {
-    void hostShim;
-    dlog(`AnimatedView hostShim identity change #${++hostShimChangeCount} isNull=${hostShim === null}`);
-  });
-
-  // `rest` and `hostShim` are read unconditionally before any branch — the dependency-tracking
-  // discipline every $effect in this adapter follows (a guarded read drops that dependency from
-  // future re-runs; svelte-adapter-dom-shim skill). reconcile() itself handles a null node.
-  $effect(() => {
-    const currentRest = rest;
-    const node = hostShim?.engineNode ?? null;
-    runtime.reconcile(currentRest, node, wantsNative);
-  });
-
-  $effect(() => () => runtime.teardown());
-
-  // See View.svelte's note on `{@attach}`.
-  const syncAttachments = createAttachmentsSync();
-  $effect(() => {
-    syncAttachments(hostShim, rest);
-  });
-</script>
-
-<symbiote-view p={reduced} bind:this={hostShim}>
-  {@render children?.()}
-</symbiote-view>

package/build/modules/animated/AnimatedView.svelte.d.ts

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