@thelacanians/vue-native-runtime 0.4.13 → 0.4.15

package/dist/index.js

@@ -8,16 +8,25 @@ import { createRenderer } from "@vue/runtime-core";
 import { markRaw } from "@vue/reactivity";
 var nextNodeId = 1;
 var MAX_NODE_ID = 2147483647;
+var activeNodeIds = /* @__PURE__ */ new Set();
 function resetNodeId() {
   nextNodeId = 1;
+  activeNodeIds.clear();
+}
+function releaseNodeId(id) {
+  activeNodeIds.delete(id);
 }
 function getNextNodeId() {
   const id = nextNodeId;
   if (nextNodeId >= MAX_NODE_ID) {
     nextNodeId = 1;
+    while (activeNodeIds.has(nextNodeId) && nextNodeId < MAX_NODE_ID) {
+      nextNodeId++;
+    }
   } else {
     nextNodeId++;
   }
+  activeNodeIds.add(id);
   return id;
 }
 function createNativeNode(type) {
@@ -177,6 +186,16 @@ var _NativeBridgeImpl = class _NativeBridgeImpl {
   updateStyle(nodeId, key, value) {
     this.enqueue("updateStyle", [nodeId, { [key]: value }]);
   }
+  /**
+   * Update multiple style properties on a native view in a single bridge op.
+   * Swift/Kotlin handler: handleUpdateStyle(args: [nodeId, { key1: val1, key2: val2, ... }])
+   *
+   * More efficient than calling updateStyle() per property — sends one op
+   * instead of N ops, reducing JSON overhead and bridge dispatch.
+   */
+  updateStyles(nodeId, styles) {
+    this.enqueue("updateStyle", [nodeId, styles]);
+  }
   // ---------------------------------------------------------------------------
   // Tree mutations
   // ---------------------------------------------------------------------------
@@ -351,9 +370,9 @@ var _NativeBridgeImpl = class _NativeBridgeImpl {
     }
     const handlers = this.globalEventHandlers.get(eventName);
     if (handlers) {
-      handlers.forEach((h28) => {
+      handlers.forEach((h29) => {
         try {
-          h28(payload);
+          h29(payload);
         } catch (err) {
           console.error(`[VueNative] Error in global event handler "${eventName}":`, err);
         }
@@ -370,6 +389,9 @@ var _NativeBridgeImpl = class _NativeBridgeImpl {
     this.pendingOps = [];
     this.flushScheduled = false;
     this.eventHandlers.clear();
+    for (const pending of this.pendingCallbacks.values()) {
+      clearTimeout(pending.timeoutId);
+    }
     this.pendingCallbacks.clear();
     this.nextCallbackId = 1;
     this.globalEventHandlers.clear();
@@ -401,16 +423,23 @@ function patchStyle(nodeId, prevStyle, nextStyle) {
   try {
     const prev = prevStyle || {};
     const next = nextStyle || {};
+    const changes = {};
+    let hasChanges = false;
     for (const key in next) {
       if (next[key] !== prev[key]) {
-        NativeBridge.updateStyle(nodeId, key, next[key]);
+        changes[key] = next[key];
+        hasChanges = true;
       }
     }
     for (const key in prev) {
       if (!(key in next)) {
-        NativeBridge.updateStyle(nodeId, key, null);
+        changes[key] = null;
+        hasChanges = true;
       }
     }
+    if (hasChanges) {
+      NativeBridge.updateStyles(nodeId, changes);
+    }
   } catch (err) {
     console.error(`[VueNative] Error patching style on node ${nodeId}:`, err);
   }
@@ -547,6 +576,7 @@ var nodeOps = {
       } catch (err) {
         console.error(`[VueNative] Error removing node ${child.id}:`, err);
       }
+      releaseNodeId(child.id);
     }
   },
   /**
@@ -1700,20 +1730,201 @@ var VVideo = defineComponent27({
   }
 });
 
+// src/components/VFlatList.ts
+import { defineComponent as defineComponent28, h as h28, ref as ref5, computed as computed2 } from "@vue/runtime-core";
+var VFlatList = defineComponent28({
+  name: "VFlatList",
+  props: {
+    /** Array of data items to render. */
+    data: {
+      type: Array,
+      required: true
+    },
+    /**
+     * Render function for each item. Receives { item, index } and returns a VNode.
+     * If not provided, the `#item` slot is used instead.
+     */
+    renderItem: {
+      type: Function,
+      default: void 0
+    },
+    /** Extract a unique key from each item. Defaults to item.id, item.key, or index. */
+    keyExtractor: {
+      type: Function,
+      default: (item, index) => item?.id ?? item?.key ?? index
+    },
+    /** Fixed height for each item in points. Required for virtualization math. */
+    itemHeight: {
+      type: Number,
+      required: true
+    },
+    /**
+     * Number of viewport-heights to render above and below the visible area.
+     * Higher values reduce blank flashes during fast scrolling but use more memory.
+     * Default: 3 (3 viewports above + 3 below = 7 total viewports of items).
+     */
+    windowSize: {
+      type: Number,
+      default: 3
+    },
+    /** Style for the outer scroll container. */
+    style: {
+      type: Object,
+      default: () => ({})
+    },
+    /** Show vertical scroll indicator. Default: true */
+    showsScrollIndicator: {
+      type: Boolean,
+      default: true
+    },
+    /** Enable bounce at scroll boundaries. Default: true */
+    bounces: {
+      type: Boolean,
+      default: true
+    },
+    /** Height of the header slot in points. Used to offset items below the header. */
+    headerHeight: {
+      type: Number,
+      default: 0
+    },
+    /**
+     * How far from the end (in viewport fractions) to trigger endReached.
+     * Default: 0.5 (trigger when within 50% of a viewport from the bottom).
+     */
+    endReachedThreshold: {
+      type: Number,
+      default: 0.5
+    }
+  },
+  emits: ["scroll", "endReached"],
+  setup(props, { slots, emit }) {
+    const scrollOffset = ref5(0);
+    const viewportHeight = ref5(0);
+    let endReachedFired = false;
+    const hasHeader = computed2(() => !!slots.header);
+    const totalHeight = computed2(() => {
+      const itemsHeight = (props.data?.length ?? 0) * props.itemHeight;
+      return itemsHeight + (hasHeader.value ? props.headerHeight : 0);
+    });
+    const visibleRange = computed2(() => {
+      const vh = viewportHeight.value || props.itemHeight * 20;
+      const buffer = vh * props.windowSize;
+      const startPx = Math.max(0, scrollOffset.value - buffer);
+      const endPx = scrollOffset.value + vh + buffer;
+      const startIdx = Math.floor(startPx / props.itemHeight);
+      const endIdx = Math.min(
+        Math.ceil(endPx / props.itemHeight),
+        props.data?.length ?? 0
+      );
+      return { start: startIdx, end: endIdx };
+    });
+    function onScroll(event) {
+      scrollOffset.value = event.y ?? 0;
+      if (event.layoutHeight && event.layoutHeight > 0) {
+        viewportHeight.value = event.layoutHeight;
+      }
+      emit("scroll", event);
+      const contentLength = totalHeight.value;
+      const offset = scrollOffset.value;
+      const vh = viewportHeight.value || props.itemHeight * 20;
+      const distanceFromEnd = contentLength - vh - offset;
+      const threshold = vh * props.endReachedThreshold;
+      if (distanceFromEnd < threshold && !endReachedFired) {
+        endReachedFired = true;
+        emit("endReached");
+      } else if (distanceFromEnd >= threshold) {
+        endReachedFired = false;
+      }
+    }
+    return () => {
+      const items = props.data ?? [];
+      const { start, end } = visibleRange.value;
+      const children = [];
+      for (let i = start; i < end; i++) {
+        const item = items[i];
+        if (item === void 0) continue;
+        const key = props.keyExtractor(item, i);
+        const itemContent = props.renderItem ? [props.renderItem({ item, index: i })] : slots.item?.({ item, index: i }) ?? [];
+        children.push(
+          h28(
+            "VView",
+            {
+              key,
+              style: {
+                position: "absolute",
+                top: (hasHeader.value ? props.headerHeight : 0) + i * props.itemHeight,
+                left: 0,
+                right: 0,
+                height: props.itemHeight
+              }
+            },
+            itemContent
+          )
+        );
+      }
+      if (slots.header) {
+        children.unshift(
+          h28("VView", { key: "__vfl_header__", style: { position: "absolute", top: 0, left: 0, right: 0 } }, slots.header())
+        );
+      }
+      if (items.length === 0 && slots.empty) {
+        return h28(
+          "VScrollView",
+          {
+            style: { ...props.style, flex: props.style?.flex ?? 1 },
+            showsVerticalScrollIndicator: props.showsScrollIndicator,
+            bounces: props.bounces
+          },
+          [h28("VView", { style: { flex: 1 } }, slots.empty())]
+        );
+      }
+      const innerContainer = h28(
+        "VView",
+        {
+          key: "__vfl_container__",
+          style: {
+            height: totalHeight.value,
+            width: "100%"
+          }
+        },
+        children
+      );
+      return h28(
+        "VScrollView",
+        {
+          style: { ...props.style, flex: props.style?.flex ?? 1 },
+          showsVerticalScrollIndicator: props.showsScrollIndicator,
+          bounces: props.bounces,
+          onScroll
+        },
+        [innerContainer]
+      );
+    };
+  }
+});
+
 // src/directives/vShow.ts
 var vShow = {
   beforeMount(el, { value }) {
-    NativeBridge.updateProp(el.id, "hidden", !value);
+    try {
+      NativeBridge.updateProp(el.id, "hidden", !value);
+    } catch (err) {
+      console.error("[VueNative] v-show beforeMount error:", err);
+    }
   },
   updated(el, { value, oldValue }) {
     if (value === oldValue) return;
-    NativeBridge.updateProp(el.id, "hidden", !value);
+    try {
+      NativeBridge.updateProp(el.id, "hidden", !value);
+    } catch (err) {
+      console.error("[VueNative] v-show updated error:", err);
+    }
   }
 };
 
 // src/errorBoundary.ts
-import { defineComponent as defineComponent28, ref as ref5, watch as watch4, onErrorCaptured } from "@vue/runtime-core";
-var ErrorBoundary = defineComponent28({
+import { defineComponent as defineComponent29, ref as ref6, watch as watch4, onErrorCaptured } from "@vue/runtime-core";
+var ErrorBoundary = defineComponent29({
   name: "ErrorBoundary",
   props: {
     onError: Function,
@@ -1723,8 +1934,8 @@ var ErrorBoundary = defineComponent28({
     }
   },
   setup(props, { slots }) {
-    const error = ref5(null);
-    const errorInfo = ref5("");
+    const error = ref6(null);
+    const errorInfo = ref6("");
     onErrorCaptured((err, _instance, info) => {
       const normalizedError = err instanceof Error ? err : new Error(String(err));
       error.value = normalizedError;
@@ -1932,9 +2143,9 @@ function useAsyncStorage() {
 }
 
 // src/composables/useClipboard.ts
-import { ref as ref6 } from "@vue/runtime-core";
+import { ref as ref7 } from "@vue/runtime-core";
 function useClipboard() {
-  const content = ref6("");
+  const content = ref7("");
   function copy(text) {
     return NativeBridge.invokeNativeModule("Clipboard", "copy", [text]).then(() => void 0);
   }
@@ -1948,16 +2159,16 @@ function useClipboard() {
 }
 
 // src/composables/useDeviceInfo.ts
-import { ref as ref7, onMounted } from "@vue/runtime-core";
+import { ref as ref8, onMounted } from "@vue/runtime-core";
 function useDeviceInfo() {
-  const model = ref7("");
-  const systemVersion = ref7("");
-  const systemName = ref7("");
-  const name = ref7("");
-  const screenWidth = ref7(0);
-  const screenHeight = ref7(0);
-  const scale = ref7(1);
-  const isLoaded = ref7(false);
+  const model = ref8("");
+  const systemVersion = ref8("");
+  const systemName = ref8("");
+  const name = ref8("");
+  const screenWidth = ref8(0);
+  const screenHeight = ref8(0);
+  const scale = ref8(1);
+  const isLoaded = ref8(false);
   async function fetchInfo() {
     const info = await NativeBridge.invokeNativeModule("DeviceInfo", "getInfo", []);
     model.value = info.model ?? "";
@@ -1986,10 +2197,10 @@ function useDeviceInfo() {
 }
 
 // src/composables/useKeyboard.ts
-import { ref as ref8 } from "@vue/runtime-core";
+import { ref as ref9 } from "@vue/runtime-core";
 function useKeyboard() {
-  const isVisible = ref8(false);
-  const height = ref8(0);
+  const isVisible = ref9(false);
+  const height = ref9(0);
   function dismiss() {
     return NativeBridge.invokeNativeModule("Keyboard", "dismiss", []).then(() => void 0);
   }
@@ -2010,15 +2221,25 @@ var Easing = {
   easeOut: "easeOut",
   easeInOut: "easeInOut"
 };
+function resolveViewId(target) {
+  if (typeof target === "number") return target;
+  if (target && typeof target === "object" && "value" in target) {
+    const val = target.value;
+    if (val && typeof val.id === "number") return val.id;
+    throw new Error("[VueNative] Animation target ref has no .value.id \u2014 is the ref attached to a component?");
+  }
+  if (target && typeof target.id === "number") return target.id;
+  throw new Error("[VueNative] Invalid animation target. Pass a number, template ref, or NativeNode.");
+}
 function useAnimation() {
-  function timing(viewId, toStyles, config = {}) {
-    return NativeBridge.invokeNativeModule("Animation", "timing", [viewId, toStyles, config]);
+  function timing(target, toStyles, config = {}) {
+    return NativeBridge.invokeNativeModule("Animation", "timing", [resolveViewId(target), toStyles, config]);
   }
-  function spring(viewId, toStyles, config = {}) {
-    return NativeBridge.invokeNativeModule("Animation", "spring", [viewId, toStyles, config]);
+  function spring(target, toStyles, config = {}) {
+    return NativeBridge.invokeNativeModule("Animation", "spring", [resolveViewId(target), toStyles, config]);
   }
-  function keyframe(viewId, steps, config = {}) {
-    return NativeBridge.invokeNativeModule("Animation", "keyframe", [viewId, steps, config]);
+  function keyframe(target, steps, config = {}) {
+    return NativeBridge.invokeNativeModule("Animation", "keyframe", [resolveViewId(target), steps, config]);
   }
   function sequence(animations) {
     return NativeBridge.invokeNativeModule("Animation", "sequence", [animations]);
@@ -2026,17 +2247,20 @@ function useAnimation() {
   function parallel(animations) {
     return NativeBridge.invokeNativeModule("Animation", "parallel", [animations]);
   }
-  function fadeOut(viewId, duration = 300) {
-    return timing(viewId, { opacity: 0 }, { duration });
+  function fadeOut(target, duration = 300) {
+    return timing(target, { opacity: 0 }, { duration });
+  }
+  function fadeIn(target, duration = 300) {
+    return timing(target, { opacity: 1 }, { duration });
   }
-  function fadeIn(viewId, duration = 300) {
-    return timing(viewId, { opacity: 1 }, { duration });
+  function slideInFromRight(target, duration = 300) {
+    return timing(target, { translateX: 0 }, { duration, easing: "easeOut" });
   }
-  function slideInFromRight(viewId, duration = 300) {
-    return timing(viewId, { translateX: 0 }, { duration, easing: "easeOut" });
+  function slideOutToRight(target, duration = 300) {
+    return timing(target, { translateX: 400 }, { duration, easing: "easeIn" });
   }
-  function slideOutToRight(viewId, duration = 300) {
-    return timing(viewId, { translateX: 400 }, { duration, easing: "easeIn" });
+  function resolveId(target) {
+    return resolveViewId(target);
   }
   return {
     timing,
@@ -2048,15 +2272,16 @@ function useAnimation() {
     fadeOut,
     slideInFromRight,
     slideOutToRight,
+    resolveId,
     Easing
   };
 }
 
 // src/composables/useNetwork.ts
-import { ref as ref9, onUnmounted as onUnmounted3 } from "@vue/runtime-core";
+import { ref as ref10, onUnmounted as onUnmounted3 } from "@vue/runtime-core";
 function useNetwork() {
-  const isConnected = ref9(true);
-  const connectionType = ref9("unknown");
+  const isConnected = ref10(true);
+  const connectionType = ref10("unknown");
   let lastEventTime = 0;
   const unsubscribe = NativeBridge.onGlobalEvent("network:change", (payload) => {
     lastEventTime = Date.now();
@@ -2076,9 +2301,9 @@ function useNetwork() {
 }
 
 // src/composables/useAppState.ts
-import { ref as ref10, onUnmounted as onUnmounted4 } from "@vue/runtime-core";
+import { ref as ref11, onUnmounted as onUnmounted4 } from "@vue/runtime-core";
 function useAppState() {
-  const state = ref10("active");
+  const state = ref11("active");
   NativeBridge.invokeNativeModule("AppState", "getState").then((s) => {
     state.value = s;
   }).catch(() => {
@@ -2121,10 +2346,10 @@ function usePermissions() {
 }
 
 // src/composables/useGeolocation.ts
-import { ref as ref11, onUnmounted as onUnmounted5 } from "@vue/runtime-core";
+import { ref as ref12, onUnmounted as onUnmounted5 } from "@vue/runtime-core";
 function useGeolocation() {
-  const coords = ref11(null);
-  const error = ref11(null);
+  const coords = ref12(null);
+  const error = ref12(null);
   let watchId = null;
   async function getCurrentPosition() {
     try {
@@ -2202,10 +2427,10 @@ function useCamera() {
 }
 
 // src/composables/useNotifications.ts
-import { ref as ref12, onUnmounted as onUnmounted7 } from "@vue/runtime-core";
+import { ref as ref13, onUnmounted as onUnmounted7 } from "@vue/runtime-core";
 function useNotifications() {
-  const isGranted = ref12(false);
-  const pushToken = ref12(null);
+  const isGranted = ref13(false);
+  const pushToken = ref13(null);
   async function requestPermission() {
     const granted = await NativeBridge.invokeNativeModule("Notifications", "requestPermission");
     isGranted.value = granted;
@@ -2280,7 +2505,7 @@ function useBiometry() {
 }
 
 // src/composables/useHttp.ts
-import { ref as ref13, onUnmounted as onUnmounted8 } from "@vue/runtime-core";
+import { ref as ref14, onUnmounted as onUnmounted8 } from "@vue/runtime-core";
 function useHttp(config = {}) {
   if (config.pins && Object.keys(config.pins).length > 0) {
     const configurePins = globalThis.__VN_configurePins;
@@ -2290,39 +2515,70 @@ function useHttp(config = {}) {
       NativeBridge.invokeNativeModule("Http", "configurePins", [config.pins]);
     }
   }
-  const loading = ref13(false);
-  const error = ref13(null);
+  const loading = ref14(false);
+  const error = ref14(null);
   let isMounted = true;
   onUnmounted8(() => {
     isMounted = false;
   });
+  const BODY_METHODS = /* @__PURE__ */ new Set(["POST", "PUT", "PATCH"]);
+  function parseResponseHeaders(response) {
+    const result = {};
+    if (!response.headers) return result;
+    try {
+      if (typeof response.headers.forEach === "function") {
+        response.headers.forEach((value, key) => {
+          result[key] = value;
+        });
+      } else if (typeof response.headers.entries === "function") {
+        for (const [key, value] of response.headers.entries()) {
+          result[key] = value;
+        }
+      }
+    } catch {
+    }
+    return result;
+  }
   async function request(method, url, options = {}) {
     const fullUrl = config.baseURL ? `${config.baseURL}${url}` : url;
     loading.value = true;
     error.value = null;
+    let controller;
+    let timeoutId;
+    if (config.timeout && config.timeout > 0 && typeof AbortController !== "undefined") {
+      controller = new AbortController();
+      timeoutId = setTimeout(() => controller.abort(), config.timeout);
+    }
     try {
+      const upperMethod = method.toUpperCase();
       const mergedHeaders = {
-        "Content-Type": "application/json",
         ...config.headers ?? {},
         ...options.headers ?? {}
       };
+      if (BODY_METHODS.has(upperMethod) && !mergedHeaders["Content-Type"]) {
+        mergedHeaders["Content-Type"] = "application/json";
+      }
       const fetchOptions = {
-        method: method.toUpperCase(),
+        method: upperMethod,
         headers: mergedHeaders
       };
+      if (controller) {
+        fetchOptions.signal = controller.signal;
+      }
       if (options.body !== void 0) {
         fetchOptions.body = JSON.stringify(options.body);
       }
       const response = await fetch(fullUrl, fetchOptions);
       const data = await response.json();
+      const responseHeaders = parseResponseHeaders(response);
       if (!isMounted) {
-        return { data, status: response.status, ok: response.ok, headers: {} };
+        return { data, status: response.status, ok: response.ok, headers: responseHeaders };
       }
       return {
         data,
         status: response.status,
         ok: response.ok,
-        headers: {}
+        headers: responseHeaders
       };
     } catch (e) {
       const msg = e instanceof Error ? e.message : String(e);
@@ -2331,6 +2587,9 @@ function useHttp(config = {}) {
       }
       throw e;
     } finally {
+      if (timeoutId !== void 0) {
+        clearTimeout(timeoutId);
+      }
       if (isMounted) {
         loading.value = false;
       }
@@ -2365,10 +2624,10 @@ function useHttp(config = {}) {
 }
 
 // src/composables/useColorScheme.ts
-import { ref as ref14, onUnmounted as onUnmounted9 } from "@vue/runtime-core";
+import { ref as ref15, onUnmounted as onUnmounted9 } from "@vue/runtime-core";
 function useColorScheme() {
-  const colorScheme = ref14("light");
-  const isDark = ref14(false);
+  const colorScheme = ref15("light");
+  const isDark = ref15(false);
   const unsubscribe = NativeBridge.onGlobalEvent(
     "colorScheme:change",
     (payload) => {
@@ -2417,10 +2676,10 @@ function useSecureStorage() {
 }
 
 // src/composables/useI18n.ts
-import { ref as ref15, onMounted as onMounted3 } from "@vue/runtime-core";
+import { ref as ref16, onMounted as onMounted3 } from "@vue/runtime-core";
 function useI18n() {
-  const isRTL = ref15(false);
-  const locale = ref15("en");
+  const isRTL = ref16(false);
+  const locale = ref16("en");
   onMounted3(async () => {
     try {
       const info = await NativeBridge.invokeNativeModule("DeviceInfo", "getDeviceInfo", []);
@@ -2441,11 +2700,11 @@ function usePlatform() {
 }
 
 // src/composables/useDimensions.ts
-import { ref as ref16, onMounted as onMounted4, onUnmounted as onUnmounted11 } from "@vue/runtime-core";
+import { ref as ref17, onMounted as onMounted4, onUnmounted as onUnmounted11 } from "@vue/runtime-core";
 function useDimensions() {
-  const width = ref16(0);
-  const height = ref16(0);
-  const scale = ref16(1);
+  const width = ref17(0);
+  const height = ref17(0);
+  const scale = ref17(1);
   onMounted4(async () => {
     try {
       const info = await NativeBridge.invokeNativeModule("DeviceInfo", "getInfo", []);
@@ -2465,7 +2724,7 @@ function useDimensions() {
 }
 
 // src/composables/useWebSocket.ts
-import { ref as ref17, onUnmounted as onUnmounted12 } from "@vue/runtime-core";
+import { ref as ref18, onUnmounted as onUnmounted12 } from "@vue/runtime-core";
 var connectionCounter = 0;
 function useWebSocket(url, options = {}) {
   const {
@@ -2475,9 +2734,9 @@ function useWebSocket(url, options = {}) {
     reconnectInterval = 1e3
   } = options;
   const connectionId = `ws_${++connectionCounter}_${Date.now()}`;
-  const status = ref17("CLOSED");
-  const lastMessage = ref17(null);
-  const error = ref17(null);
+  const status = ref18("CLOSED");
+  const lastMessage = ref18(null);
+  const error = ref18(null);
   let reconnectAttempts = 0;
   let reconnectTimer = null;
   const MAX_PENDING_MESSAGES = 100;
@@ -2631,12 +2890,12 @@ function useFileSystem() {
 }
 
 // src/composables/useSensors.ts
-import { ref as ref18, onUnmounted as onUnmounted13 } from "@vue/runtime-core";
+import { ref as ref19, onUnmounted as onUnmounted13 } from "@vue/runtime-core";
 function useAccelerometer(options = {}) {
-  const x = ref18(0);
-  const y = ref18(0);
-  const z = ref18(0);
-  const isAvailable = ref18(false);
+  const x = ref19(0);
+  const y = ref19(0);
+  const z = ref19(0);
+  const isAvailable = ref19(false);
   let running = false;
   let unsubscribe = null;
   NativeBridge.invokeNativeModule("Sensors", "isAvailable", ["accelerometer"]).then((result) => {
@@ -2670,10 +2929,10 @@ function useAccelerometer(options = {}) {
   return { x, y, z, isAvailable, start, stop };
 }
 function useGyroscope(options = {}) {
-  const x = ref18(0);
-  const y = ref18(0);
-  const z = ref18(0);
-  const isAvailable = ref18(false);
+  const x = ref19(0);
+  const y = ref19(0);
+  const z = ref19(0);
+  const isAvailable = ref19(false);
   let running = false;
   let unsubscribe = null;
   NativeBridge.invokeNativeModule("Sensors", "isAvailable", ["gyroscope"]).then((result) => {
@@ -2708,13 +2967,13 @@ function useGyroscope(options = {}) {
 }
 
 // src/composables/useAudio.ts
-import { ref as ref19, onUnmounted as onUnmounted14 } from "@vue/runtime-core";
+import { ref as ref20, onUnmounted as onUnmounted14 } from "@vue/runtime-core";
 function useAudio() {
-  const duration = ref19(0);
-  const position = ref19(0);
-  const isPlaying = ref19(false);
-  const isRecording = ref19(false);
-  const error = ref19(null);
+  const duration = ref20(0);
+  const position = ref20(0);
+  const isPlaying = ref20(false);
+  const isRecording = ref20(false);
+  const error = ref20(null);
   const unsubProgress = NativeBridge.onGlobalEvent("audio:progress", (payload) => {
     position.value = payload.currentTime ?? 0;
     duration.value = payload.duration ?? 0;
@@ -2806,9 +3065,9 @@ function useAudio() {
 }
 
 // src/composables/useDatabase.ts
-import { ref as ref20, onUnmounted as onUnmounted15 } from "@vue/runtime-core";
+import { ref as ref21, onUnmounted as onUnmounted15 } from "@vue/runtime-core";
 function useDatabase(name = "default") {
-  const isOpen = ref20(false);
+  const isOpen = ref21(false);
   let opened = false;
   async function ensureOpen() {
     if (opened) return;
@@ -2862,12 +3121,12 @@ function useDatabase(name = "default") {
 }
 
 // src/composables/usePerformance.ts
-import { ref as ref21, onUnmounted as onUnmounted16 } from "@vue/runtime-core";
+import { ref as ref22, onUnmounted as onUnmounted16 } from "@vue/runtime-core";
 function usePerformance() {
-  const isProfiling = ref21(false);
-  const fps = ref21(0);
-  const memoryMB = ref21(0);
-  const bridgeOps = ref21(0);
+  const isProfiling = ref22(false);
+  const fps = ref22(0);
+  const memoryMB = ref22(0);
+  const bridgeOps = ref22(0);
   let unsubscribe = null;
   function handleMetrics(payload) {
     fps.value = payload.fps ?? 0;
@@ -2915,10 +3174,10 @@ function usePerformance() {
 }
 
 // src/composables/useSharedElementTransition.ts
-import { ref as ref22, onUnmounted as onUnmounted17 } from "@vue/runtime-core";
+import { ref as ref23, onUnmounted as onUnmounted17 } from "@vue/runtime-core";
 var sharedElementRegistry = /* @__PURE__ */ new Map();
 function useSharedElementTransition(elementId) {
-  const viewId = ref22(null);
+  const viewId = ref23(null);
   function register(nativeViewId) {
     viewId.value = nativeViewId;
     sharedElementRegistry.set(elementId, nativeViewId);
@@ -2951,11 +3210,11 @@ function clearSharedElementRegistry() {
 }
 
 // src/composables/useIAP.ts
-import { ref as ref23, onUnmounted as onUnmounted18 } from "@vue/runtime-core";
+import { ref as ref24, onUnmounted as onUnmounted18 } from "@vue/runtime-core";
 function useIAP() {
-  const products = ref23([]);
-  const isReady = ref23(false);
-  const error = ref23(null);
+  const products = ref24([]);
+  const isReady = ref24(false);
+  const error = ref24(null);
   const cleanups = [];
   const unsubscribe = NativeBridge.onGlobalEvent("iap:transactionUpdate", (payload) => {
     if (payload.state === "failed" && payload.error) {
@@ -3029,11 +3288,11 @@ function useIAP() {
 }
 
 // src/composables/useAppleSignIn.ts
-import { ref as ref24, onUnmounted as onUnmounted19 } from "@vue/runtime-core";
+import { ref as ref25, onUnmounted as onUnmounted19 } from "@vue/runtime-core";
 function useAppleSignIn() {
-  const user = ref24(null);
-  const isAuthenticated = ref24(false);
-  const error = ref24(null);
+  const user = ref25(null);
+  const isAuthenticated = ref25(false);
+  const error = ref25(null);
   const cleanups = [];
   const unsubscribe = NativeBridge.onGlobalEvent("auth:appleCredentialRevoked", () => {
     user.value = null;
@@ -3079,11 +3338,11 @@ function useAppleSignIn() {
 }
 
 // src/composables/useGoogleSignIn.ts
-import { ref as ref25, onUnmounted as onUnmounted20 } from "@vue/runtime-core";
+import { ref as ref26, onUnmounted as onUnmounted20 } from "@vue/runtime-core";
 function useGoogleSignIn(clientId) {
-  const user = ref25(null);
-  const isAuthenticated = ref25(false);
-  const error = ref25(null);
+  const user = ref26(null);
+  const isAuthenticated = ref26(false);
+  const error = ref26(null);
   const cleanups = [];
   NativeBridge.invokeNativeModule("SocialAuth", "getCurrentUser", ["google"]).then((result) => {
     if (result && result.userId) {
@@ -3124,10 +3383,10 @@ function useGoogleSignIn(clientId) {
 }
 
 // src/composables/useBackgroundTask.ts
-import { ref as ref26, onUnmounted as onUnmounted21 } from "@vue/runtime-core";
+import { ref as ref27, onUnmounted as onUnmounted21 } from "@vue/runtime-core";
 function useBackgroundTask() {
   const taskHandlers = /* @__PURE__ */ new Map();
-  const defaultHandler = ref26(null);
+  const defaultHandler = ref27(null);
   const unsubscribe = NativeBridge.onGlobalEvent("background:taskExecute", (payload) => {
     const handler = taskHandlers.get(payload.taskId) || defaultHandler.value;
     if (handler) {
@@ -3173,15 +3432,15 @@ function useBackgroundTask() {
 }
 
 // src/composables/useOTAUpdate.ts
-import { ref as ref27, onUnmounted as onUnmounted22 } from "@vue/runtime-core";
+import { ref as ref28, onUnmounted as onUnmounted22 } from "@vue/runtime-core";
 function useOTAUpdate(serverUrl) {
-  const currentVersion = ref27("embedded");
-  const availableVersion = ref27(null);
-  const downloadProgress = ref27(0);
-  const isChecking = ref27(false);
-  const isDownloading = ref27(false);
-  const status = ref27("idle");
-  const error = ref27(null);
+  const currentVersion = ref28("embedded");
+  const availableVersion = ref28(null);
+  const downloadProgress = ref28(0);
+  const isChecking = ref28(false);
+  const isDownloading = ref28(false);
+  const status = ref28("idle");
+  const error = ref28(null);
   let lastUpdateInfo = null;
   const unsubscribe = NativeBridge.onGlobalEvent("ota:downloadProgress", (payload) => {
     downloadProgress.value = payload.progress;
@@ -3298,13 +3557,13 @@ function useOTAUpdate(serverUrl) {
 }
 
 // src/composables/useBluetooth.ts
-import { ref as ref28, onUnmounted as onUnmounted23 } from "@vue/runtime-core";
+import { ref as ref29, onUnmounted as onUnmounted23 } from "@vue/runtime-core";
 function useBluetooth() {
-  const devices = ref28([]);
-  const connectedDevice = ref28(null);
-  const isScanning = ref28(false);
-  const isAvailable = ref28(false);
-  const error = ref28(null);
+  const devices = ref29([]);
+  const connectedDevice = ref29(null);
+  const isScanning = ref29(false);
+  const isAvailable = ref29(false);
+  const error = ref29(null);
   const cleanups = [];
   NativeBridge.invokeNativeModule("Bluetooth", "getState").then((state) => {
     isAvailable.value = state === "poweredOn";
@@ -3408,10 +3667,10 @@ function useBluetooth() {
 }
 
 // src/composables/useCalendar.ts
-import { ref as ref29 } from "@vue/runtime-core";
+import { ref as ref30 } from "@vue/runtime-core";
 function useCalendar() {
-  const hasAccess = ref29(false);
-  const error = ref29(null);
+  const hasAccess = ref30(false);
+  const error = ref30(null);
   async function requestAccess() {
     try {
       const result = await NativeBridge.invokeNativeModule("Calendar", "requestAccess");
@@ -3444,10 +3703,10 @@ function useCalendar() {
 }
 
 // src/composables/useContacts.ts
-import { ref as ref30 } from "@vue/runtime-core";
+import { ref as ref31 } from "@vue/runtime-core";
 function useContacts() {
-  const hasAccess = ref30(false);
-  const error = ref30(null);
+  const hasAccess = ref31(false);
+  const error = ref31(null);
   async function requestAccess() {
     try {
       const result = await NativeBridge.invokeNativeModule("Contacts", "requestAccess");
@@ -3473,6 +3732,58 @@ function useContacts() {
   return { requestAccess, getContacts, getContact, createContact, deleteContact, hasAccess, error };
 }
 
+// src/theme.ts
+import {
+  inject,
+  provide,
+  computed as computed3,
+  defineComponent as defineComponent30,
+  ref as ref32
+} from "@vue/runtime-core";
+function createTheme(definition) {
+  const key = /* @__PURE__ */ Symbol("vue-native-theme");
+  const ThemeProvider = defineComponent30({
+    name: "ThemeProvider",
+    props: {
+      initialColorScheme: {
+        type: String,
+        default: "light"
+      }
+    },
+    setup(props, { slots }) {
+      const colorScheme = ref32(props.initialColorScheme);
+      const theme = computed3(() => {
+        return colorScheme.value === "dark" ? definition.dark : definition.light;
+      });
+      const ctx = {
+        theme,
+        colorScheme,
+        toggleColorScheme: () => {
+          colorScheme.value = colorScheme.value === "light" ? "dark" : "light";
+        },
+        setColorScheme: (scheme) => {
+          colorScheme.value = scheme;
+        }
+      };
+      provide(key, ctx);
+      return () => slots.default?.();
+    }
+  });
+  function useTheme() {
+    const ctx = inject(key);
+    if (!ctx) {
+      throw new Error(
+        "[Vue Native] useTheme() was called outside of a <ThemeProvider>. Wrap your app root with <ThemeProvider> to provide theme context."
+      );
+    }
+    return ctx;
+  }
+  return { ThemeProvider, useTheme };
+}
+function createDynamicStyleSheet(theme, factory) {
+  return computed3(() => createStyleSheet(factory(theme.value)));
+}
+
 // src/index.ts
 function createApp(rootComponent, rootProps) {
   const app = baseCreateApp(rootComponent, rootProps);
@@ -3503,6 +3814,7 @@ function createApp(rootComponent, rootProps) {
   app.component("VRadio", VRadio);
   app.component("VDropdown", VDropdown);
   app.component("VVideo", VVideo);
+  app.component("VFlatList", VFlatList);
   app.component("ErrorBoundary", ErrorBoundary);
   app.component("VErrorBoundary", ErrorBoundary);
   app.directive("show", vShow);
@@ -3547,6 +3859,7 @@ export {
   VButton,
   VCheckbox,
   VDropdown,
+  VFlatList,
   VImage,
   VInput,
   VKeyboardAvoiding,
@@ -3571,9 +3884,11 @@ export {
   clearSharedElementRegistry,
   createApp,
   createCommentNode,
+  createDynamicStyleSheet,
   createNativeNode,
   createStyleSheet,
   createTextNode,
+  createTheme,
   getRegisteredSharedElements,
   getSharedElementViewId,
   measureViewFrame,