@symbiote-native/vue 0.3.8 → 0.5.0

package/build/modules/status-bar.js

@@ -1,27 +1,24 @@
 // StatusBar, the Vue lifecycle half. The native StatusBarManager driving (applyStatusBarProps),
-// the imperative statics (statusBarImperative), and the Android bar-height constant all live in
-// @symbiote-native/engine, shared verbatim with React; Metro selects the engine's status-bar.ios.ts /
-// status-bar.android.ts per host, so the platform divergence never reaches this file. Vue supplies
-// only the declarative shape: a component that renders NOTHING and re-applies the props through a
-// watchEffect on mount + every prop change, with the imperative statics attached to the component
-// object (RN's StatusBar: the value doubles as the imperative namespace, like the Vue Image).
+// the imperative statics, and the Android bar-height constant all live in @symbiote-native/engine,
+// shared verbatim with React; Metro selects the engine's status-bar.ios.ts/.android.ts per host,
+// so platform divergence never reaches this file. Vue supplies only the declarative shape: a
+// component that renders NOTHING and re-applies the props through a watchEffect on mount + every
+// prop change, with the imperative statics attached to the component object.
 //
-// Renders null (no Fabric view), so it follows neither the descriptor split nor a host-node ref:
-// the "else keep its current shape" path of the StatusBar component. Inputs arrive as attrs
-// (untyped) and run through normalizeVueAttrs (kebab→camel) before each is narrowed by a guard.
-import { defineComponent, watchEffect } from '@vue/runtime-core';
+// Inputs arrive as attrs (untyped) and run through normalizeVueAttrs before each is narrowed by a guard.
+import { defineComponent, watchEffect, } from '@vue/runtime-core';
 import { applyStatusBarProps, statusBarImperative, statusBarCurrentHeight, isOpaqueColorValue, } from '@symbiote-native/engine';
 import { normalizeVueAttrs } from '../utils/normalize-attrs.js';
 function asBoolean(value) {
     return typeof value === 'boolean' ? value : undefined;
 }
 function asBarStyle(value) {
-    return value === 'default' || value === 'light-content' || value === 'dark-content'
+    return value === 'default' ||
+        value === 'light-content' ||
+        value === 'dark-content'
         ? value
         : undefined;
 }
-// backgroundColor is a string / int / opaque PlatformColor; any other shape is dropped. A runtime
-// guard at the untyped-attrs boundary, not a cast.
 function asColorValue(value) {
     if (typeof value === 'string')
         return value;
@@ -43,13 +40,11 @@ const StatusBarComponent = defineComponent({
     name: 'StatusBar',
     inheritAttrs: false,
     setup(_props, { attrs: rawAttrs }) {
-        // watchEffect tracks rawAttrs (reactive), so reading it here re-applies on every prop change:
-        // the Vue twin of React's useEffect over the prop deps. Resolution is lazy inside the engine
-        // (a missing StatusBarManager is a no-op), so this never crashes a render.
+        // watchEffect tracks rawAttrs (reactive), so reading it here re-applies on every prop change.
+        // Resolution is lazy inside the engine (a missing StatusBarManager is a no-op).
         watchEffect(() => {
             applyStatusBarProps(buildProps(normalizeVueAttrs(rawAttrs)));
         });
-        // Renders nothing: StatusBar has no Fabric view, exactly like React's `return null`.
         return () => null;
     },
 });

package/build/render.d.ts

@@ -1,5 +1,7 @@
 import { type IRootTag, type SymbioteSurface } from '@symbiote-native/engine';
-import type { Component } from '@vue/runtime-core';
+import type { App, Component } from '@vue/runtime-core';
+export type IAppConfigurator = (app: App) => void;
+export declare function setAppConfigurator(configure: IAppConfigurator | undefined): void;
 export declare function mount(rootTag: IRootTag, rootComponent: Component): SymbioteSurface;
 export declare function unmount(rootTag: IRootTag): void;
 declare global {

package/build/render.js

@@ -1,12 +1,71 @@
 // Mount a Vue app onto a Fabric surface. The native host hands us a rootTag; we create
 // a surface for it and let the Vue renderer drive the engine, which commits into
 // nativeFabricUIManager; RN's own renderer never in the path.
-import { createSurface, disposeRoot, dlog, } from '@symbiote-native/engine';
+import { createSurface, disposeRoot, dlog, reportUncaughtError, } from '@symbiote-native/engine';
 import { createSymbioteRenderer } from './renderer/index.js';
 // One Vue app per surface, so a surface can be torn down (unmount) or cleanly
 // re-mounted on the same rootTag: the bridgeless host stops and restarts a surface on
 // Fast Refresh and on lifecycle/focus changes, reusing the rootTag.
 const apps = new Map();
+// A stack this deep already names the screen; the rest is noise in a redbox.
+const MAX_STACK_FRAMES = 20;
+// SFC components carry their name on `__name` (the compiler's), plain ones on `name`; neither is
+// on Vue's public `ConcreteComponent` type, hence the guarded read rather than a cast.
+function displayName(type) {
+    for (const key of ['name', '__name']) {
+        const value = Reflect.get(type, key);
+        if (typeof value === 'string' && value.length > 0)
+            return value;
+    }
+    return 'Anonymous';
+}
+// Vue's own component trace (getComponentTrace, used by `warn`) is internal, so the frames are
+// walked off the public instance's parent chain. LogBox renders whatever string it is handed;
+// React's shape is `\n    in <Name>`, and matching it keeps the redbox reading the same in an
+// app that mixes adapters' errors in one console.
+function componentStack(instance) {
+    if (instance === null)
+        return null;
+    const frames = [];
+    let current = instance.$;
+    while (current !== null && frames.length < MAX_STACK_FRAMES) {
+        frames.push(`\n    in ${displayName(current.type)}`);
+        current = current.parent;
+    }
+    return frames.length === 0 ? null : frames.join('');
+}
+// The app-level error seam. Without it, an unclaimed error fell through to Vue's own `logError`
+// (runtime-core errorHandling.ts), which does neither useful thing: in a dev bundle it RE-THROWS
+// out of `app.mount()`, so it escapes this function, aborts the AppRegistry runnable and leaves
+// the surface half-brought-up; in a release bundle it console.errors a bare error with no origin
+// and no component context, never touching `global.ErrorUtils`, so nothing reaches the host.
+// Setting a handler suppresses both branches and routes to the engine's shared channel instead —
+// the native redbox on a device, console.error off one.
+//
+// CAUGHT vs UNCAUGHT — the asymmetry is Vue's own, and it costs us no code. `handleError` walks
+// the `onErrorCaptured` chain BEFORE consulting `config.errorHandler`, and a hook returning
+// `false` stops propagation and returns early (runtime-core 3.5 errorHandling.ts), so a boundary
+// that claims the error never reaches this function at all. That is the behaviour we want and
+// the same split the React adapter makes by hand: writing a boundary IS the developer saying
+// "I am handling this", and answering it with a full-screen redbox over the fallback the app
+// just rendered contradicts what the app asked for.
+//
+// So do NOT "fix" this to report from inside an `onErrorCaptured` of our own — that would
+// re-report exactly the errors a boundary claimed. A hook that returns undefined instead of
+// `false` still lands here, and correctly: Vue treats that error as still propagating.
+function reportToHost(error, instance, info) {
+    // `info` is Vue's own phase label ('render function', 'setup function', 'native event
+    // handler'), which is the closest thing it has to React's "no error boundary" / "recovered"
+    // qualifier. Off a native host it prefixes the log line, where there is no redbox to carry it.
+    reportUncaughtError(error, {
+        origin: `vue render (${String(info)})`,
+        componentStack: componentStack(instance),
+    });
+}
+let configurator;
+export function setAppConfigurator(configure) {
+    configurator = configure;
+}
 function teardown(rootTag) {
     const app = apps.get(rootTag);
     if (app === undefined)
@@ -22,6 +81,8 @@ export function mount(rootTag, rootComponent) {
     const surface = createSurface(rootTag);
     const renderer = createSymbioteRenderer(surface);
     const app = renderer.createApp(rootComponent);
+    app.config.errorHandler = reportToHost;
+    configurator?.(app);
     apps.set(rootTag, app);
     // The surface IS the Vue container: a top-level mutation routes to surface.appendChild
     // (renderer.ts), and the engine wraps surface.children in its synthetic flex root.

package/build/renderer/index.js

@@ -51,6 +51,13 @@ export function createSymbioteRenderer(surface) {
         setElementText(el, text) {
             if (isSurface(el))
                 return;
+            // Same invariant insert() enforces, on the other route text can reach a node: Vue calls
+            // this instead of insert() when an element's children collapse to a single string, so
+            // without the check a raw text lands under a non-Text parent - an invalid Fabric tree
+            // built silently, which is worse than the throw insert() would have given.
+            if (!el.isText) {
+                throw new Error(`Text string "${text}" must be rendered inside a <Text>`);
+            }
             // An RCTText carries its string as a single raw-text child. Reuse a lone existing
             // one to avoid churn; otherwise replace all children with a fresh raw-text node.
             const [first] = el.children;
@@ -103,12 +110,10 @@ export function createSymbioteRenderer(surface) {
         patchProp(el, key, _prev, next) {
             if (isSurface(el))
                 return;
-            // routeProp makes the prop-vs-event decision from the node's ViewConfig (onPress on
-            // a View becomes a listener; onTintColor on a Switch stays a prop): identical to
-            // the React host config, so the whole event layer is shared. `class`/`style` merge
-            // (explicit :style always winning over class-derived style, regardless of which of
-            // Vue's two independent patchProp calls lands last) is centralized in routeProp too
-            // (core/engine/src/node.ts) — every adapter gets it, not just this one.
+            // routeProp makes the prop-vs-event decision from the node's ViewConfig (onPress on a
+            // View becomes a listener; onTintColor on a Switch stays a prop), shared with React. The
+            // class/style merge (explicit :style always winning, regardless of which of Vue's two
+            // independent patchProp calls lands last) is centralized there too (core/engine/src/node.ts).
             routeProp(el, key, next);
             surface.requestCommit();
         },

package/build/runtime-helpers/index.d.ts

@@ -1,28 +1,48 @@
 export * from '@vue/runtime-core';
 import { type ObjectDirective } from '@vue/runtime-core';
 import { type ISymbioteNode } from '@symbiote-native/engine';
+export { Teleport, type ITeleportTarget } from '../create-portal';
 export declare const vShow: ObjectDirective<ISymbioteNode, boolean>;
-export declare const Teleport: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    to: {
-        type: null;
-        default: null;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
-    [key: string]: any;
-}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    to: {
-        type: null;
-        default: null;
-    };
-    disabled: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    disabled: boolean;
-    to: any;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type ISystemModifier = 'ctrl' | 'shift' | 'alt' | 'meta';
+type IEventModifier = ISystemModifier | 'stop' | 'prevent' | 'self' | 'left' | 'middle' | 'right' | 'exact';
+type IModifierGuardableEvent = {
+    stopPropagation?: () => void;
+    preventDefault?: () => void;
+    target?: unknown;
+    currentTarget?: unknown;
+    button?: number;
+    ctrlKey?: boolean;
+    shiftKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+};
+type IEventHandler<TEvent> = ((event: TEvent, ...args: never[]) => unknown) & {
+    _withMods?: Record<string, IEventHandler<TEvent>>;
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.stop`/`.prevent`/`.self`/etc. `fn` is
+ * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
+ * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
+ * type there either.
+ */
+export declare function withModifiers<TEvent extends IModifierGuardableEvent>(fn: IEventHandler<TEvent>, modifiers: readonly IEventModifier[]): IEventHandler<TEvent>;
+type IKeyedEvent = {
+    key?: string;
+};
+type IKeyedHandler<TEvent extends IKeyedEvent> = ((event: TEvent) => unknown) & {
+    _withKeys?: Record<string, (event: TEvent) => unknown>;
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.enter`/`.esc`/etc. No-ops on any event
+ * without a `.key` field (e.g. Symbiote's Pressable `onPress`) — same as upstream Vue's own
+ * behavior on a non-keyboard DOM event, not a Symbiote-specific gap. `TextInput`'s `onKeyPress`
+ * carries `nativeEvent.key`, so that is the applicable Symbiote event shape.
+ */
+export declare function withKeys<TEvent extends IKeyedEvent>(fn: IKeyedHandler<TEvent>, modifiers: readonly string[]): (event: TEvent) => unknown;
+/**
+ * Reads the class map a `<style module>` SFC block compiles onto the component's own options
+ * (`__cssModules`, set by @symbiote-native/css-parser's SFC compiler — see the
+ * `symbiote-sfc-style-compiler` skill). Warns and returns an empty map exactly like upstream Vue
+ * does when the current component has no such block, rather than throwing.
+ */
+export declare function useCssModule(name?: string): Record<string, string>;

package/build/runtime-helpers/index.js

@@ -1,28 +1,26 @@
 // Metro rewrites every compiled `from 'vue'` import to point HERE instead of at bare
-// `@vue/runtime-core` (see examples/*/metro-vue-transformer.js). Most of the compiler's injected
-// helpers (ref, computed, withDirectives, openBlock, …) already live in runtime-core untouched —
-// re-exported below. But two Vue template directives compile to a runtime-helper import that
-// ONLY exists in `@vue/runtime-dom` (vShow, vModelText, vModelCheckbox, vModelSelect), written
-// directly against a real HTMLElement (el.style.display, el.value, addEventListener). We have no
-// DOM, so those don't exist for us — rewriting straight to runtime-core leaves `v-show` either
-// failing at import time or silently resolving to `undefined` (a no-op directive). This module is
-// the interception point: it supplies our OWN implementation under the same export name, so the
-// compiler's import keeps resolving and the directive actually does something.
+// @vue/runtime-core (see examples/*/metro-vue-transformer.js). Most compiler-injected helpers
+// (ref, computed, withDirectives, openBlock, ...) live in runtime-core untouched, re-exported
+// below. But two Vue template directives compile to a runtime-helper import that ONLY exists in
+// @vue/runtime-dom (vShow, vModelText, vModelCheckbox, vModelSelect), written directly against a
+// real HTMLElement - we have no DOM, so this module supplies our OWN implementation under the
+// same export name instead of leaving `v-show` a silent no-op.
 //
 // Scope: this covers only Vue's own template directives (v-show, Teleport); native-element
 // v-model is a separate, out-of-scope case.
 export * from '@vue/runtime-core';
-import { defineComponent, h, Teleport as VueTeleport, } from '@vue/runtime-core';
-import { isSymbioteNode, setNativeProps, whenCommitted, } from '@symbiote-native/engine';
-// setNativeProps merges a partial `style` object onto the node's current one (never clobbering
-// other declarative style fields) and re-commits via the node's OWN tracked rootTag — no
-// SymbioteSurface reference needed here, which a directive hook has no access to anyway.
-//
+import { getCurrentInstance, warn, } from '@vue/runtime-core';
+import { setNativeProps, whenCommitted, } from '@symbiote-native/engine';
+// Shadows runtime-core's own Teleport for every compiled `from 'vue'` import (see the header):
+// same component, plus a runtime guard on `to`. Lives in ../create-portal so the adapter's portal
+// sits where every other adapter's does; re-exported here because THIS is the module Metro
+// rewrites `vue` to, and an `export *` alone would resolve `Teleport` to the unguarded original.
+export { Teleport } from '../create-portal/index.js';
 // whenCommitted, not a direct call: Vue's `mounted` hook fires synchronously during the patch
 // pass, but this renderer coalesces the actual Fabric commit onto a microtask
-// (surface.requestCommit()), so the node may have no committed tag yet — the same async-commit
-// race TextInput's autoFocus guards against. A bare setNativeProps
-// here would silently no-op with no retry on the very first mount.
+// (surface.requestCommit()), so the node may have no committed tag yet - the same async-commit
+// race TextInput's autoFocus guards against. A bare setNativeProps here would silently no-op
+// with no retry on the very first mount.
 const pendingShowCommits = new WeakMap();
 function applyShow(el, value) {
     pendingShowCommits.get(el)?.();
@@ -35,34 +33,105 @@ export const vShow = {
     // Drop a still-pending first-commit wait if the element unmounts before it ever lands.
     unmounted: el => pendingShowCommits.get(el)?.(),
 };
-// Teleport's `to` in the DOM world is usually a CSS-selector string ('body', '#modal-root'); we
-// have no querySelector (renderer.ts stubs it to null, same as insertStaticContent), so `to` here
-// must be an already-mounted host node — e.g. a ref to a persistent "overlay host" View rendered
-// once near the app root — not a selector string. This wrapper shadows runtime-core's own
-// `Teleport` (which the SFC compiler imports from 'vue' like vShow) purely to validate `to` BEFORE
-// handing it to the real Teleport: a wrong value (string, plain object, an unrendered/reactive-
-// wrapped node) throws immediately here instead of silently corrupting the retained tree deep
-// inside insert/remove — the "don't let a dev accidentally break everything" case this exists for.
-// Scope: same-surface targets only (see the React createPortal twin, create-portal.ts) — Vue's own
-// Teleport internals (disabled toggling, move-on-update) work unmodified once `to` resolves to a
-// real ISymbioteNode, since insert/remove/parentNode/nextSibling are already fully generic.
-export const Teleport = defineComponent({
-    name: 'Teleport',
-    inheritAttrs: false,
-    props: {
-        to: { type: null, default: null },
-        disabled: { type: Boolean, default: false },
+const SYSTEM_MODIFIERS = [
+    'ctrl',
+    'shift',
+    'alt',
+    'meta',
+];
+const MODIFIER_GUARDS = {
+    stop: event => {
+        event.stopPropagation?.();
+        return false;
     },
-    setup(props, { slots }) {
-        return () => {
-            const { to } = props;
-            if (typeof to === 'string') {
-                throw new Error(`Teleport target must be a host node ref, not a CSS-selector string ("${to}") — symbiote has no querySelector. Pass a ref to an already-rendered element instead (e.g. <View ref="overlayHost" />, then :to="overlayHost").`);
-            }
-            if (to != null && !isSymbioteNode(to)) {
-                throw new Error('Teleport target is not a real host node — did you forget `.value` on a ref, or pass something symbiote never rendered?');
-            }
-            return h(VueTeleport, { to, disabled: props.disabled }, slots);
-        };
+    prevent: event => {
+        event.preventDefault?.();
+        return false;
     },
-});
+    self: event => event.target !== event.currentTarget,
+    ctrl: event => !event.ctrlKey,
+    shift: event => !event.shiftKey,
+    alt: event => !event.altKey,
+    meta: event => !event.metaKey,
+    left: event => event.button !== 0,
+    middle: event => event.button !== 1,
+    right: event => event.button !== 2,
+    exact: (event, modifiers) => SYSTEM_MODIFIERS.some(modifier => event[`${modifier}Key`] && !modifiers.includes(modifier)),
+};
+/**
+ * Render-function/compiled-template equivalent of `v-on.stop`/`.prevent`/`.self`/etc. `fn` is
+ * typed as required, matching upstream Vue's own declaration — its runtime-only `!fn` guard below
+ * (for a compiler-generated call site that could pass a falsy handler) isn't reflected in the
+ * type there either.
+ */
+export function withModifiers(fn, modifiers) {
+    if (!fn)
+        return fn;
+    const cache = fn._withMods ?? (fn._withMods = {});
+    const cacheKey = modifiers.join('.');
+    return (cache[cacheKey] ??= ((event, ...args) => {
+        for (const modifier of modifiers) {
+            if (MODIFIER_GUARDS[modifier](event, modifiers))
+                return undefined;
+        }
+        return fn(event, ...args);
+    }));
+}
+const KEY_ALIASES = {
+    esc: 'escape',
+    space: ' ',
+    up: 'arrow-up',
+    left: 'arrow-left',
+    right: 'arrow-right',
+    down: 'arrow-down',
+    delete: 'backspace',
+};
+// \B (non-word-boundary), not a bare capture: without it, "Enter" hyphenates to "-enter" (a
+// leading dash) instead of "enter", since the very first character is otherwise still a match.
+function hyphenate(camelCase) {
+    return camelCase.replace(/\B([A-Z])/g, '-$1').toLowerCase();
+}
+/**
+ * Render-function/compiled-template equivalent of `v-on.enter`/`.esc`/etc. No-ops on any event
+ * without a `.key` field (e.g. Symbiote's Pressable `onPress`) — same as upstream Vue's own
+ * behavior on a non-keyboard DOM event, not a Symbiote-specific gap. `TextInput`'s `onKeyPress`
+ * carries `nativeEvent.key`, so that is the applicable Symbiote event shape.
+ */
+export function withKeys(fn, modifiers) {
+    const cache = fn._withKeys ?? (fn._withKeys = {});
+    const cacheKey = modifiers.join('.');
+    return (cache[cacheKey] ??= (event) => {
+        if (event.key == null)
+            return undefined;
+        const eventKey = hyphenate(event.key);
+        if (modifiers.some(modifier => modifier === eventKey || KEY_ALIASES[modifier] === eventKey)) {
+            return fn(event);
+        }
+        return undefined;
+    });
+}
+/**
+ * Reads the class map a `<style module>` SFC block compiles onto the component's own options
+ * (`__cssModules`, set by @symbiote-native/css-parser's SFC compiler — see the
+ * `symbiote-sfc-style-compiler` skill). Warns and returns an empty map exactly like upstream Vue
+ * does when the current component has no such block, rather than throwing.
+ */
+export function useCssModule(name = '$style') {
+    const instance = getCurrentInstance();
+    if (!instance) {
+        warn('useCssModule must be called inside setup()');
+        return {};
+    }
+    const modules = instance.type
+        .__cssModules;
+    if (!modules) {
+        warn('Current instance does not have CSS modules injected.');
+        return {};
+    }
+    const cssModule = modules[name];
+    if (!cssModule) {
+        warn(`Current instance does not have CSS module named "${name}".`);
+        return {};
+    }
+    return cssModule;
+}

package/build/utils/normalize-attrs.js

@@ -16,7 +16,9 @@ export function normalizeVueAttrs(attrs) {
     let changed = false;
     const out = {};
     for (const key of Object.keys(attrs)) {
-        if (key.includes('-') && !key.startsWith('aria-') && !key.startsWith('data-')) {
+        if (key.includes('-') &&
+            !key.startsWith('aria-') &&
+            !key.startsWith('data-')) {
             out[toCamel(key)] = attrs[key];
             changed = true;
         }

package/metro-css-parser.cjs

@@ -1,17 +1,12 @@
 // Re-exports @symbiote-native/css-parser verbatim from INSIDE this package, so a consuming app's own
 // require('@symbiote-native/vue/metro-css-parser') resolves css-parser relative to THIS file's
-// location (adapters/vue/node_modules, where css-parser IS a real dependency — see
-// package.json), not relative to the app's own node_modules, which does not and should not
-// need to declare @symbiote-native/css-parser itself. Node resolves each require() relative to the
-// requiring FILE's own location, so this indirection is what actually removes the extra install
-// step, not pnpm hoisting (which does not propagate this transitively across workspace packages
-// the way a flat classic node_modules would). .cjs, not .js: this package is "type": "module",
-// and Metro's babelTransformerPath loading expects a require()-able module. Used as
-// vue-tsx's babelTransformerPath for standalone .css/.module.css file imports —
-// metro-vue-transformer.cjs (the .vue SFC transformer) requires @symbiote-native/css-parser
-// directly instead, since it needs the individual parse/compile functions, not a Metro
-// transformer object.
-// createCssMetroTransformer is a factory, not a ready transformer — Metro's
-// babelTransformerPath needs the actual {transform, getCacheKey} object it returns,
-// not the css-parser package barrel.
+// location (adapters/vue/node_modules, where css-parser IS a real dependency), not relative to
+// the app's own node_modules — Node resolves each require() relative to the requiring FILE, so
+// this indirection is what removes the app's extra install step, not pnpm hoisting. .cjs, not
+// .js: this package is "type": "module", and Metro's babelTransformerPath loading expects a
+// require()-able module. Used as vue-tsx's babelTransformerPath for standalone .css/.module.css
+// imports; metro-vue-transformer.cjs (the .vue SFC transformer) requires @symbiote-native/css-parser
+// directly instead, since it needs the individual parse/compile functions, not a Metro transformer
+// object. createCssMetroTransformer is a factory — babelTransformerPath needs the actual
+// {transform, getCacheKey} object it returns, not the css-parser package barrel.
 module.exports = require('@symbiote-native/css-parser').createCssMetroTransformer();