@symbiote-native/vue 0.4.0 → 0.5.0

package/build/index.d.ts

@@ -1,4 +1,6 @@
-export { mount, unmount } from './render';
+export { mount, unmount, setAppConfigurator } from './render';
+export type { IAppConfigurator } from './render';
+export { Teleport, type ITeleportTarget } from './create-portal';
 export { createTunnel, type ITunnel } from './create-tunnel';
 export { View, Text } from './components';
 export type { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, IResponderProps, } from '@symbiote-native/components';
@@ -21,7 +23,7 @@ export type { INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground
 export { Button } from './components/button';
 export type { IButtonProps } from './components/button';
 export { TextInput } from './components/text-input';
-export type { ITextInputProps, ITextInputHandle } from './components/text-input';
+export type { ITextInputProps, ITextInputHandle, } from './components/text-input';
 export { VirtualizedList } from './components/virtualized-list';
 export type { IVirtualizedListProps, IVirtualizedListSlots, IVirtualizedListEmits, IVirtualizedListHandle, ISeparators, ISeparatorProps, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, ICellLayout, } from './components/virtualized-list';
 export { FlatList } from './components/flat-list';
@@ -33,7 +35,7 @@ export type { ISection, ISectionListProps, ISectionListSlots, ISectionListEmits,
 export { SafeAreaView } from './components/safe-area-view';
 export type { ISafeAreaViewProps } from './components/safe-area-view';
 export { RefreshControl } from './components/refresh-control';
-export type { IRefreshControlProps, IRefreshControlEmits } from './components/refresh-control';
+export type { IRefreshControlProps, IRefreshControlEmits, } from './components/refresh-control';
 export { descriptorToVue } from './descriptor-to-vue';
 export { normalizeVueAttrs } from './utils/normalize-attrs';
 export { resolveModelValue, emitModelUpdate } from './utils/model-binding';
@@ -56,10 +58,10 @@ export { useWindowDimensions } from './composables/use-window-dimensions';
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, AccessibilityInfo, LayoutAnimation, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessibilityChangeEventHandler, IAccessibilityAnnouncementFinishedEvent, IAnnounceForAccessibilityOptions, IAccessibilityEventType, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, } from '@symbiote-native/engine';
 export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, } from '@symbiote-native/engine';
-export type { ISymbioteEvent, ISymbioteNode, IRootTag } from '@symbiote-native/engine';
+export type { ISymbioteEvent, ISymbioteNode, IRootTag, } from '@symbiote-native/engine';
 export type { IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, } from '@symbiote-native/engine';
-export { setNativeViewConfigSource, setDeviceEventSource } from '@symbiote-native/engine';
-export type { INativeViewConfig, INativeViewConfigSource } from '@symbiote-native/engine';
+export { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
+export type { INativeViewConfig, INativeViewConfigSource, } from '@symbiote-native/engine';
 export type { IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, IImageStatics, } from '@symbiote-native/components';
 export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';
 export type { IPixelRatioStatic } from '@symbiote-native/engine';

package/build/index.js

@@ -1,8 +1,14 @@
 // @symbiote-native/vue: a thin Vue 3 reconciler over @symbiote-native/engine. createRenderer maps
 // each RendererOptions call onto the engine's mutation API; all Fabric clone-on-write
 // lives in the engine, shared with every other adapter. App code names only @symbiote-native/vue.
-export { mount, unmount } from './render.js';
-// Teleport stays same-surface-only by design - see create-tunnel.ts for why.
+export { mount, unmount, setAppConfigurator } from './render.js';
+// The portal: Vue's own <Teleport>, guarded so `to` must be a node/surface this renderer actually
+// mounted (there is no querySelector). It MOVES host nodes, so it reaches any already-mounted
+// target in the SAME surface — including one you only hold a ref to — and keeps the content's
+// reactive owner at the call site (provide/inject resolve from where it was written). Reaching a
+// second, independently mount()ed surface is a different mechanism: createTunnel, which copies
+// into an <Out/> the destination has to render. See create-portal/index.ts.
+export { Teleport } from './create-portal/index.js';
 export { createTunnel } from './create-tunnel/index.js';
 export { View, Text } from './components.js';
 // IHostInstance is the raw engine node (Vue host refs fall through to it; imperative methods
@@ -50,7 +56,7 @@ export { Platform, StyleSheet, processColor, setColorProcessor, dlog, isDebug, }
 // Wired once by the app entry on a real host (like setColorProcessor): hands the engine
 // RN's ViewConfig registry so third-party Fabric views auto-derive their metadata.
 // setDeviceEventSource is the third seam of the same set and travels with them.
-export { setNativeViewConfigSource, setDeviceEventSource } from '@symbiote-native/engine';
+export { setNativeViewConfigSource, setDeviceEventSource, } from '@symbiote-native/engine';
 // Pure utilities that moved to the engine (single source, both adapters re-export):
 // PixelRatio + PanResponder, plus the color builders and the interaction scheduler.
 export { PixelRatio, PanResponder, PlatformColor, DynamicColorIOS, InteractionManager, } from '@symbiote-native/engine';

package/build/modules/animated/create-animated-component.js

@@ -14,7 +14,8 @@ const PASSTHROUGH_PROP = 'passthroughAnimatedPropExplicitValues';
 // Reads either a functional component's or a stateful defineComponent's display name, without a
 // cast, for the wrapper's devtools name.
 function baseName(component) {
-    if (component === null || (typeof component !== 'function' && typeof component !== 'object')) {
+    if (component === null ||
+        (typeof component !== 'function' && typeof component !== 'object')) {
         return 'Anonymous';
     }
     const display = Reflect.get(component, 'displayName');
@@ -68,7 +69,9 @@ export function createAnimatedComponent(Component) {
                 },
                 has: (_target, key) => {
                     const instance = instanceRef.value;
-                    return instance !== null && typeof instance === 'object' && Reflect.has(instance, key);
+                    return (instance !== null &&
+                        typeof instance === 'object' &&
+                        Reflect.has(instance, key));
                 },
             }));
             return () => {
@@ -96,10 +99,15 @@ export function createAnimatedComponent(Component) {
                 const passthroughStyle = readPassthroughStyle(passthrough);
                 if (passthroughStyle !== undefined) {
                     reduced.style =
-                        reduced.style === undefined ? passthroughStyle : [reduced.style, passthroughStyle];
+                        reduced.style === undefined
+                            ? passthroughStyle
+                            : [reduced.style, passthroughStyle];
                 }
                 reduced.ref = captureRef;
-                return h(Component, reduced, slots.default !== undefined ? { default: slots.default } : undefined);
+                // Forward the WHOLE slots object, not just `default`: the list containers take their
+                // content through named scoped slots (`item`, `sectionHeader`, ...), which a default-only
+                // forward drops silently - Animated.FlatList would commit empty cells.
+                return h(Component, reduced, slots);
             };
         },
     });

package/build/modules/animated/index.d.ts

@@ -51,5 +51,7 @@ export declare const Animated: {
         [key: string]: any;
     }>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
     ScrollView: ReturnType<typeof createAnimatedComponent>;
+    FlatList: ReturnType<typeof createAnimatedComponent>;
+    SectionList: ReturnType<typeof createAnimatedComponent>;
     createAnimatedComponent: typeof createAnimatedComponent;
 };

package/build/modules/animated/index.js

@@ -7,6 +7,8 @@ import { AnimatedValue, AnimatedValueXY, AnimatedColor, AnimatedMock, Easing, Pl
 import { View, Text } from '../../components.js';
 import { Image } from '../../components/image.js';
 import { ScrollView } from '../../components/scroll-view';
+import { FlatList } from '../../components/flat-list/index.js';
+import { SectionList } from '../../components/section-list/index.js';
 import { createAnimatedComponent } from './create-animated-component.js';
 export { createAnimatedComponent } from './create-animated-component.js';
 // View/Text are pure host primitives; Image is the functional renderImage wrapper, and all expose
@@ -14,12 +16,15 @@ export { createAnimatedComponent } from './create-animated-component.js';
 const AnimatedView = createAnimatedComponent(View);
 const AnimatedText = createAnimatedComponent(Text);
 const AnimatedImage = createAnimatedComponent(Image);
-// LAZY, memoized getter, mirroring RN's `get ScrollView()`: ScrollView's module chain imports
-// this Animated namespace back (sticky headers), so a static createAnimatedComponent(ScrollView)
-// at init could read ScrollView inside its own TDZ. Deferring the wrap past module init avoids the cycle.
+// LAZY, memoized getters, mirroring RN's `get ScrollView()`. Every scrolling container reaches
+// scroll-view/sticky-header, which imports this Animated namespace back, so a wrap at module
+// scope captures whatever the half-evaluated cycle holds at that instant. Under a bundler's ESM
+// interop that is `undefined`, not a ReferenceError - the wrapper builds fine and then renders
+// nothing. Deferring past module init is what keeps it from firing. FlatList and SectionList
+// reach ScrollView through VirtualizedList, so they sit on the same cycle and take the same shape.
 let animatedScrollView;
-// Animated.FlatList / Animated.SectionList are intentionally OMITTED, not faked - a named gap,
-// not a silent drop.
+let animatedFlatList;
+let animatedSectionList;
 // The live, JS-driven driver namespace (real frames). RN's AnimatedImplementation.
 const liveDrivers = {
     Value: AnimatedValue,
@@ -57,6 +62,14 @@ export const Animated = {
         animatedScrollView ??= createAnimatedComponent(ScrollView);
         return animatedScrollView;
     },
+    get FlatList() {
+        animatedFlatList ??= createAnimatedComponent(FlatList);
+        return animatedFlatList;
+    },
+    get SectionList() {
+        animatedSectionList ??= createAnimatedComponent(SectionList);
+        return animatedSectionList;
+    },
     createAnimatedComponent,
     ...drivers,
 };

package/build/modules/app-registry/index.js

@@ -5,7 +5,7 @@
 // only the one Vue-specific seam - building a runnable from a component provider via a synthetic
 // functional root (h() has no createElement-style prop/children spread of its own targets, so
 // the wrap step is a render function rather than an object merge).
-import { h } from '@vue/runtime-core';
+import { h, } from '@vue/runtime-core';
 import { createAppRegistry, dlog, } from '@symbiote-native/engine';
 import { mount } from '../../render.js';
 function runnableFor(componentProvider, getWrapperComponentProvider) {
@@ -20,7 +20,9 @@ function runnableFor(componentProvider, getWrapperComponentProvider) {
         const wrapperComponentProvider = getWrapperComponentProvider();
         const mounted = wrapperComponentProvider === undefined
             ? renderRoot
-            : () => h(wrapperComponentProvider(appParameters), null, { default: renderRoot });
+            : () => h(wrapperComponentProvider(appParameters), null, {
+                default: renderRoot,
+            });
         mount(appParameters.rootTag, mounted);
     };
 }

package/build/modules/status-bar.js

@@ -6,14 +6,16 @@
 // prop change, with the imperative statics attached to the component object.
 //
 // Inputs arrive as attrs (untyped) and run through normalizeVueAttrs before each is narrowed by a guard.
-import { defineComponent, watchEffect } from '@vue/runtime-core';
+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;
 }

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/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

@@ -9,8 +9,13 @@
 // 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';
+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
@@ -28,31 +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, 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. This wrapper shadows
-// runtime-core's own Teleport purely to validate `to` BEFORE handing it to the real Teleport: a
-// wrong value throws immediately here instead of silently corrupting the retained tree deep
-// inside insert/remove. Scope: same-surface targets only (see the React createPortal twin,
-// create-portal.ts) - Vue's own Teleport internals work unmodified once `to` resolves to a real
-// ISymbioteNode.
-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;
         }