@powersync/nuxt 0.0.0-dev-20260128023420 → 0.0.1

package/dist/runtime/components/LogsTab.vue

@@ -1,17 +1,7 @@
 <template>
-  <div
-    border="t"
-    border-color="gray-100"
-    relative
-    n-bg="base"
-    flex="~ col"
-    h="screen"
-    overflow="hidden"
-  >
+  <div border="t" border-color="gray-100" relative n-bg="base" flex="~ col" h="screen" overflow="hidden">
     <!-- Toolbar -->
-    <div
-      class="flex items-center justify-between gap-3 px-3 py-2 border-b border-gray-200 dark:border-neutral-700"
-    >
+    <div class="flex items-center justify-between gap-3 px-3 py-2 border-b border-gray-200 dark:border-neutral-700">
       <div class="flex items-center gap-2 flex-1">
         <NTextInput
           v-model="searchQuery"
@@ -25,21 +15,12 @@
           v-model="selectedLevel"
           class="px-2 py-1 text-xs border border-gray-300 dark:border-neutral-600 rounded bg-white dark:bg-neutral-800"
         >
-          <option value="all">
-            All Levels
-          </option>
-          <option value="error">
-            Error
-          </option>
-          <option value="warn">
-            Warning
-          </option>
-          <option value="info">
-            Info
-          </option>
-          <option value="debug">
-            Debug
-          </option>
+          <option value="all">All Levels</option>
+          <option value="error">Error</option>
+          <option value="warn">Warning</option>
+          <option value="info">Info</option>
+          <option value="debug">Debug</option>
+          <option value="trace">Trace</option>
         </select>
       </div>
 
@@ -47,63 +28,37 @@
         <NBadge n="slate xs">
           {{ filteredLogs.length }}
         </NBadge>
-        <NButton
-          n="xs red"
-          icon="carbon:trash-can"
-          @click="clearLogs"
-        >
-          Clear
-        </NButton>
+        <NButton n="xs red" icon="carbon:trash-can" @click="clearLogs"> Clear </NButton>
       </div>
     </div>
 
     <!-- Logs Table -->
     <div class="flex-1 overflow-auto">
-      <div
-        v-if="filteredLogs.length === 0"
-        class="text-center py-12"
-      >
-        <div class="text-gray-500 dark:text-gray-400 text-sm">
-          No logs found
-        </div>
+      <div v-if="filteredLogs.length === 0" class="text-center py-12">
+        <div class="text-gray-500 dark:text-gray-400 text-sm">No logs found</div>
       </div>
 
-      <table
-        v-else
-        class="w-full"
-      >
-        <thead class="sticky top-0 bg-gray-50 dark:bg-neutral-900 border-b border-gray-200 dark:border-neutral-700 z-10">
+      <table v-else class="w-full">
+        <thead
+          class="sticky top-0 bg-gray-50 dark:bg-neutral-900 border-b border-gray-200 dark:border-neutral-700 z-10"
+        >
           <tr>
             <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-8" />
-            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-32">
-              Time
-            </th>
-            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">
-              Source
-            </th>
-            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">
-              Level
-            </th>
-            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">
-              Message
-            </th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-32">Time</th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">Source</th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-20">Level</th>
+            <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Message</th>
             <th class="px-2 py-1.5 text-left text-xs font-medium text-gray-500 dark:text-gray-400 w-16" />
           </tr>
         </thead>
         <tbody>
-          <template
-            v-for="log in filteredLogs"
-            :key="log.key"
-          >
+          <template v-for="log in filteredLogs" :key="log.key">
             <tr
               class="log-entry hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors cursor-pointer border-b border-b-gray-100 dark:border-b-neutral-800"
               @click="toggleExpand(log.key)"
             >
               <td class="px-2 py-1.5">
-                <div
-                  class="w-1.5 h-1.5 rounded-full"
-                  :class="getLogDotClass(log)"
-                />
+                <div class="w-1.5 h-1.5 rounded-full" :class="getLogDotClass(log)" />
               </td>
               <td class="px-2 py-1.5">
                 <span class="text-xs font-mono text-gray-600 dark:text-gray-400">
@@ -116,9 +71,7 @@
                 </div>
               </td>
               <td class="px-2 py-1.5">
-                <NBadge
-                  :n="`${getLogBadgeColor(log)} xs`"
-                >
+                <NBadge :n="`${getLogBadgeColor(log)} xs`">
                   {{ getLogType(log) }}
                 </NBadge>
               </td>
@@ -135,24 +88,17 @@
                 />
               </td>
             </tr>
-            <tr
-              v-if="expandedLogs.has(log.key) && hasExtraData(log)"
-              class="bg-gray-50 dark:bg-neutral-900/50"
-            >
+            <tr v-if="expandedLogs.has(log.key) && hasExtraData(log)" class="bg-gray-50 dark:bg-neutral-900/50">
               <td colspan="12">
                 <div class="px-10 py-2">
                   <div class="inline-flex items-center gap-2 mb-2">
-                    <NIcon
-                      n="sm"
-                      icon="carbon:object"
-                    />
+                    <NIcon n="sm" icon="carbon:object" />
                     <span class="text-xs text-gray-600 dark:text-gray-400">JSON</span>
                   </div>
-                  <div class="bg-white dark:bg-neutral-800 p-3 rounded border border-gray-200 dark:border-neutral-700 overflow-x-auto">
-                    <div
-                      class="json-code-block text-xs"
-                      v-html="highlightedJson.get(log.key)"
-                    />
+                  <div
+                    class="bg-white dark:bg-neutral-800 p-3 rounded border border-gray-200 dark:border-neutral-700 overflow-x-auto"
+                  >
+                    <div class="json-code-block text-xs" v-html="highlightedJson.get(log.key) ?? ''" />
                   </div>
                 </div>
               </td>
@@ -211,17 +157,13 @@ const fuse = computed(() => {
 const filteredLogs = computed(() => {
   let filtered = logs.value || [];
   if (selectedLevel.value !== "all") {
-    filtered = filtered.filter(
-      (log) => log.value?.type === selectedLevel.value
-    );
+    filtered = filtered.filter((log) => log.value?.type === selectedLevel.value);
   }
   if (searchQuery.value && fuse.value) {
     const searchResults = fuse.value.search(searchQuery.value);
     const searchedItems = searchResults.map((result) => result.item);
     if (selectedLevel.value !== "all") {
-      filtered = filtered.filter(
-        (log) => searchedItems.some((item) => item.key === log.key)
-      );
+      filtered = filtered.filter((log) => searchedItems.some((item) => item.key === log.key));
     } else {
       filtered = searchedItems;
     }
@@ -237,14 +179,14 @@ async function toggleExpand(key) {
       const log = logs.value.find((l) => l.key === key);
       if (log) {
         const jsonStr = formatExtraData(log);
-        const html = await codeToHtml(jsonStr, {
+        const html = await codeToHtml(jsonStr || '""', {
           lang: "json",
           themes: {
             light: "catppuccin-latte",
             dark: "catppuccin-frappe"
           }
         });
-        highlightedJson.value.set(key, html);
+        highlightedJson.value.set(key, typeof html === "string" ? html : "");
       }
     }
   }
@@ -254,14 +196,18 @@ function getLogMessage(log) {
   return String(log.value.args[0] || "Empty log message");
 }
 function getLogSource(log) {
-  return log.value?.args[2]?.name || "";
+  const context = log.value?.args[2];
+  return context?.name ?? "";
 }
 function hasExtraData(log) {
   return !!(log.value?.args && log.value.args.length > 2 && log.value.args[1] && !(typeof log.value.args[1] === "object" && log.value.args[1] !== null && Object.keys(log.value.args[1]).length === 0));
 }
 function formatExtraData(log) {
   if (!log.value?.args || log.value.args.length <= 1) return "";
-  return JSON.stringify(log.value.args[1], null, 2);
+  const data = log.value.args[1];
+  if (data === void 0 || data === null) return "";
+  const str = JSON.stringify(data, null, 2);
+  return typeof str === "string" ? str : "";
 }
 function getSearchableExtraData(log) {
   if (!log.value?.args || log.value.args.length <= 1) return "";
@@ -293,7 +239,8 @@ function getLogDotClass(log) {
     error: "bg-red-500",
     warn: "bg-yellow-500",
     info: "bg-blue-500",
-    debug: "bg-gray-400"
+    debug: "bg-gray-400",
+    trace: "bg-gray-300 dark:bg-gray-500"
   };
   return classes[type] || classes.info;
 }
@@ -303,7 +250,8 @@ function getLogBadgeColor(log) {
     error: "red",
     warn: "yellow",
     info: "blue",
-    debug: "gray"
+    debug: "gray",
+    trace: "slate"
   };
   return colors[type] || colors.info;
 }

package/dist/runtime/components/LogsTab.vue.d.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/PowerSyncInstanceTab.d.vue.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/PowerSyncInstanceTab.vue

@@ -4,6 +4,4 @@
   </div>
 </template>
 
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>

package/dist/runtime/components/PowerSyncInstanceTab.vue.d.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/SyncStatusTab.d.vue.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/components/SyncStatusTab.vue

@@ -1,32 +1,14 @@
 <template>
-  <div
-    border="t"
-    border-color="gray-100"
-    relative
-    n-bg="base"
-    flex="~ col"
-    h="screen"
-  >
+  <div border="t" border-color="gray-100" relative n-bg="base" flex="~ col" h="screen">
     <div flex="~ col gap-2">
-      <NSectionBlock
-        icon="carbon:data-share"
-        text="Data Flow"
-      >
-        <div
-          grid="~ cols-6 gap-4"
-          mb="4"
-        >
+      <NSectionBlock icon="carbon:data-share" text="Data Flow">
+        <div grid="~ cols-6 gap-4" mb="4">
           <!-- Download Progress -->
           <div flex="~ col gap-2">
             <span text="sm gray-500">Download Progress</span>
             <div flex="~ items-center gap-2">
               <template v-if="downloadProgressDetails !== null">
-                <div
-                  flex="1"
-                  bg="gray-200"
-                  rounded="full"
-                  h="2"
-                >
+                <div flex="1" bg="gray-200" rounded="full" h="2">
                   <div
                     bg="blue-600"
                     h="2"
@@ -38,10 +20,7 @@
 }"
                   />
                 </div>
-                <span
-                  text="sm"
-                  font="medium"
-                >{{ totalDownloadProgress }}%</span>
+                <span text="sm" font="medium">{{ totalDownloadProgress }}%</span>
               </template>
               <template v-else>
                 <span text="sm gray-400">No active download</span>
@@ -54,50 +33,29 @@
             <span text="sm gray-500">Status</span>
             <NBadge
               :n="downloadError ? 'red' : 'green'"
-              :icon="
-  downloadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'
-"
+              :icon="downloadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'"
             >
               {{ downloadError ? "Error" : "Healthy" }}
             </NBadge>
           </div>
 
           <!-- Error Details -->
-          <div
-            flex="~ col gap-2"
-            col="span-4"
-          >
+          <div flex="~ col gap-2" col="span-4">
             <span text="sm gray-500">Error Message</span>
-            <NBadge
-              v-if="downloadError"
-              n="red sm"
-              icon="carbon:warning-filled"
-            >
+            <NBadge v-if="downloadError" n="red sm" icon="carbon:warning-filled">
               {{ downloadError.message }}
             </NBadge>
-            <NBadge
-              v-else
-              n="slate sm"
-              icon="carbon:checkmark-filled"
-            >
-              N/A
-            </NBadge>
+            <NBadge v-else n="slate sm" icon="carbon:checkmark-filled"> N/A </NBadge>
           </div>
         </div>
 
-        <div
-          grid="~ cols-6 gap-4"
-          mb="4"
-        >
+        <div grid="~ cols-6 gap-4" mb="4">
           <!-- Upload Progress -->
           <div flex="~ col gap-2">
             <span text="sm gray-500">Upload Progress</span>
             <div flex="~ items-center gap-2">
               <span v-if="syncStatus?.dataFlowStatus.uploading">upload in progress...</span>
-              <span
-                v-else
-                text="sm gray-400"
-              >No active upload</span>
+              <span v-else text="sm gray-400">No active upload</span>
             </div>
           </div>
 
@@ -106,9 +64,7 @@
             <span text="sm gray-500">Status</span>
             <NBadge
               :n="uploadError ? 'red' : 'green'"
-              :icon="
-  uploadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'
-"
+              :icon="uploadError ? 'carbon:warning-filled' : 'carbon:checkmark-filled'"
             >
               {{ uploadError ? "Error" : "Healthy" }}
             </NBadge>
@@ -127,133 +83,43 @@
           </div>
 
           <!-- Error Details -->
-          <div
-            flex="~ col gap-2"
-            col="span-2"
-          >
+          <div flex="~ col gap-2" col="span-2">
             <span text="sm gray-500">Error Message</span>
-            <NBadge
-              v-if="uploadError"
-              n="red sm"
-              icon="carbon:warning-filled"
-            >
+            <NBadge v-if="uploadError" n="red sm" icon="carbon:warning-filled">
               {{ uploadError.message }}
             </NBadge>
-            <NBadge
-              v-else
-              n="slate sm"
-              icon="carbon:checkmark-filled"
-            >
-              N/A
-            </NBadge>
+            <NBadge v-else n="slate sm" icon="carbon:checkmark-filled"> N/A </NBadge>
           </div>
         </div>
       </NSectionBlock>
 
-      <span
-        border="b"
-        border-color="gray-100"
-      />
-
-      <NSectionBlock
-        icon="carbon:data-volume"
-        text="Data Size"
-      >
-        <NTip
-          v-if="!isDiagnosticSchemaSetup"
-          n="red6 dark:red5"
-          icon="carbon:warning-alt"
-        >
-          Make sure to extend your schema with the diagnostics schema using the
-          `diagnosticsSchema` from the `usePowerSyncInspector` composable.
-        </NTip>
-        <div
-          v-else
-          grid="~ cols-5 gap-4"
-          mb="4"
-        >
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Buckets Synced</span>
-            <span text="sm"> {{ totals?.buckets }} </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Rows Synced</span>
-            <span text="sm"> {{ totals?.row_count }} </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Data size</span>
-            <span text="sm">
-              {{ totals?.data_size }}
-            </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Metadata size</span>
-            <span text="sm">
-              {{ totals?.metadata_size }}
-            </span>
-          </div>
-
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Download size</span>
-            <span text="sm">
-              {{ totals?.download_size }}
-            </span>
-          </div>
-        </div>
-      </NSectionBlock>
-
-      <span
-        border="b"
-        border-color="gray-100"
-      />
-
-      <NSectionBlock
-        icon="carbon:data-share"
-        text="Operations"
-      >
-        <NTip
-          v-if="!isDiagnosticSchemaSetup"
-          n="red6 dark:red5"
-          icon="carbon:warning-alt"
-        >
-          Make sure to extend your schema with the diagnostics schema using the
-          `diagnosticsSchema` from the `usePowerSyncInspector` composable.
-        </NTip>
-        <div
-          v-else
-          grid="~ cols-2 gap-4"
-          mb="4"
-        >
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Total operations</span>
-            <span text="sm">
-              {{ totals?.total_operations }}
-            </span>
+      <span border="b" border-color="gray-100" />
+
+      <template v-for="(section, index) in metricSections" :key="section.text">
+        <NSectionBlock :icon="section.icon" :text="section.text">
+          <NTip v-if="!isDiagnosticSchemaSetup" n="red6 dark:red5" icon="carbon:warning-alt">
+            Make sure to extend your schema with the diagnostics schema using the `diagnosticsSchema` from the
+            `usePowerSyncInspector` composable.
+          </NTip>
+          <div v-else :grid="`~ cols-${section.cols} gap-4`" mb="4">
+            <div v-for="metric in section.metrics" :key="metric.label" flex="~ col gap-2">
+              <span text="sm gray-500">{{ metric.label }}</span>
+              <span text="sm">{{ metric.value }}</span>
+            </div>
           </div>
+        </NSectionBlock>
 
-          <div flex="~ col gap-2">
-            <span text="sm gray-500">Downloaded operations</span>
-            <span text="sm">
-              {{ totals?.downloaded_operations }}
-            </span>
-          </div>
-        </div>
-      </NSectionBlock>
+        <span v-if="index < metricSections.length - 1" border="b" border-color="gray-100" />
+      </template>
 
-      <span
-        border="b"
-        border-color="gray-100"
-      />
+      <span border="b" border-color="gray-100" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { usePowerSyncInspectorDiagnostics } from "#imports";
-import { onMounted } from "vue";
+import { computed, onMounted } from "vue";
 const {
   db,
   isDiagnosticSchemaSetup,
@@ -266,7 +132,30 @@ const {
   uploadQueueSize,
   totals
 } = usePowerSyncInspectorDiagnostics();
+const metricSections = computed(() => [
+  {
+    icon: "carbon:data-volume",
+    text: "Data Size",
+    cols: 5,
+    metrics: [
+      { label: "Buckets Synced", value: totals.value?.buckets },
+      { label: "Rows Synced", value: totals.value?.row_count },
+      { label: "Data size", value: totals.value?.data_size },
+      { label: "Metadata size", value: totals.value?.metadata_size },
+      { label: "Download size", value: totals.value?.download_size }
+    ]
+  },
+  {
+    icon: "carbon:data-share",
+    text: "Operations",
+    cols: 2,
+    metrics: [
+      { label: "Total operations", value: totals.value?.total_operations },
+      { label: "Downloaded operations", value: totals.value?.downloaded_operations }
+    ]
+  }
+]);
 onMounted(async () => {
-  await db.value?.waitForFirstSync();
+  await db?.value?.waitForFirstSync();
 });
 </script>

package/dist/runtime/components/SyncStatusTab.vue.d.ts

@@ -1,3 +1,3 @@
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/composables/useDiagnosticsLogger.d.ts

@@ -21,7 +21,7 @@ import { type ILogHandler } from '@powersync/web';
  * ```
  */
 export declare const useDiagnosticsLogger: (customHandler?: ILogHandler) => {
-    logger: import("js-logger").GlobalLogger;
+    logger: import("@powersync/common").GlobalLogger;
     logsStorage: import("unstorage").Storage<import("unstorage").StorageValue>;
     emitter: import("mitt").Emitter<Record<import("mitt").EventType, unknown>>;
 };

package/dist/runtime/composables/useDiagnosticsLogger.js

@@ -1,5 +1,4 @@
 import { createBaseLogger, LogLevel } from "@powersync/web";
-import { createConsola } from "consola";
 import { createStorage } from "unstorage";
 import localStorageDriver from "unstorage/drivers/session-storage";
 import mitt from "mitt";
@@ -7,34 +6,27 @@ const emitter = mitt();
 const logsStorage = createStorage({
   driver: localStorageDriver({ base: "powersync:" })
 });
-const consola = createConsola({
-  level: 5,
-  // trace
-  fancy: true,
-  formatOptions: {
-    columns: 80,
-    colors: true,
-    compact: false,
-    date: true
-  }
-});
-consola.addReporter({
-  log: async (logObject) => {
-    const key = `log:${logObject.date.toISOString()}`;
-    await logsStorage.set(key, logObject);
-    emitter.emit("log", { key, value: logObject });
-  }
-});
 export const useDiagnosticsLogger = (customHandler) => {
   const logger = createBaseLogger();
-  logger.useDefaults();
+  const consoleHandler = logger.createDefaultHandler({
+    formatter: (messages, context) => {
+      messages.unshift(`[PowerSync]${context.name ? ` [${context.name}]` : ""}`);
+    }
+  });
   logger.setLevel(LogLevel.DEBUG);
   logger.setHandler(async (messages, context) => {
-    const level = context.level.name;
+    consoleHandler(messages, context);
     const messageArray = Array.from(messages);
-    const mainMessage = String(messageArray[0] || "Empty log message");
-    const extraData = messageArray.slice(1).map((item) => item.toString()).join(" ");
-    consola[level.toLowerCase()](`[PowerSync] ${context.name ? `[${context.name}]` : ""} ${mainMessage}`, extraData, context);
+    const mainMessage = String(messageArray[0] ?? "Empty log message");
+    const extra = messageArray.length > 1 ? messageArray.length === 2 ? messageArray[1] : messageArray.slice(1) : void 0;
+    const logObject = {
+      date: /* @__PURE__ */ new Date(),
+      type: context.level.name.toLowerCase(),
+      args: [mainMessage, extra, context]
+    };
+    const key = `log:${logObject.date.toISOString()}`;
+    await logsStorage.set(key, logObject);
+    emitter.emit("log", { key, value: logObject });
     await customHandler?.(messages, context);
   });
   return { logger, logsStorage, emitter };