@powersync/nuxt 0.0.0-dev-20260128023420

package/dist/runtime/composables/useDiagnosticsLogger.js

@@ -0,0 +1,41 @@
+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";
+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();
+  logger.setLevel(LogLevel.DEBUG);
+  logger.setHandler(async (messages, context) => {
+    const level = context.level.name;
+    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);
+    await customHandler?.(messages, context);
+  });
+  return { logger, logsStorage, emitter };
+};

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

@@ -0,0 +1,42 @@
+import { RecordingStorageAdapter } from '../utils/RecordingStorageAdapter.js';
+import { DynamicSchemaManager } from '../utils/DynamicSchemaManager.js';
+declare function getCurrentSchemaManager(): DynamicSchemaManager;
+/**
+ * A composable for setting up PowerSync Inspector functionality.
+ *
+ * This composable provides utilities for schema management and diagnostics setup.
+ * It exposes the diagnostics schema and internal utilities needed for the inspector.
+ *
+ * @returns An object containing:
+ * - `diagnosticsSchema` - The schema for diagnostics data collection. Use this to extend your app schema with diagnostic tables.
+ * - `RecordingStorageAdapter` - Used internally. Storage adapter class that records operations for diagnostic purposes.
+ * - `getCurrentSchemaManager()` - Used internally. Gets the current schema manager instance for dynamic schema operations.
+ *
+ * @example
+ * ```typescript
+ * const { diagnosticsSchema } = usePowerSyncInspector()
+ *
+ * // Combine with your app schema
+ * const combinedSchema = new Schema([
+ *   ...yourAppSchema.tables,
+ *   ...diagnosticsSchema.tables,
+ * ])
+ * ```
+ */
+export declare function usePowerSyncInspector(): {
+    diagnosticsSchema: import("@powersync/common").Schema<{
+        local_bucket_data: import("@powersync/common").Table<{
+            total_operations: import("@powersync/common").BaseColumnType<number | null>;
+            last_op: import("@powersync/common").BaseColumnType<string | null>;
+            download_size: import("@powersync/common").BaseColumnType<number | null>;
+            downloaded_operations: import("@powersync/common").BaseColumnType<number | null>;
+            downloading: import("@powersync/common").BaseColumnType<number | null>;
+        }>;
+        local_schema: import("@powersync/common").Table<{
+            data: import("@powersync/common").BaseColumnType<string | null>;
+        }>;
+    }>;
+    RecordingStorageAdapter: typeof RecordingStorageAdapter;
+    getCurrentSchemaManager: typeof getCurrentSchemaManager;
+};
+export {};

package/dist/runtime/composables/usePowerSyncInspector.js

@@ -0,0 +1,19 @@
+import { DiagnosticsAppSchema } from "../utils/AppSchema.js";
+import { RecordingStorageAdapter } from "../utils/RecordingStorageAdapter.js";
+import { DynamicSchemaManager } from "../utils/DynamicSchemaManager.js";
+let currentSchemaManager = null;
+function getCurrentSchemaManager() {
+  if (currentSchemaManager) {
+    return currentSchemaManager;
+  }
+  currentSchemaManager = new DynamicSchemaManager();
+  return currentSchemaManager;
+}
+export function usePowerSyncInspector() {
+  const diagnosticsSchema = DiagnosticsAppSchema;
+  return {
+    diagnosticsSchema,
+    RecordingStorageAdapter,
+    getCurrentSchemaManager
+  };
+}

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

@@ -0,0 +1,153 @@
+import type { AbstractPowerSyncDatabase, PowerSyncBackendConnector, PowerSyncConnectionOptions, SyncStatus, UploadQueueStats } from '@powersync/web';
+import type { ComputedRef, Ref } from 'vue';
+export type BucketRow = {
+    name: string;
+    id: number;
+    tables: string[];
+    data_size: number;
+    metadata_size: number;
+    row_count: number;
+    download_size: number;
+    downloaded_operations: number;
+    total_operations: number;
+    downloading: number;
+};
+export type TableRow = {
+    name: string;
+    count: number;
+    size: number;
+};
+/** Aggregated statistics from the diagnostics composable. */
+export type UsePowerSyncInspectorDiagnosticsTotals = {
+    buckets: number;
+    row_count: number;
+    downloaded_operations: number | undefined;
+    total_operations: number;
+    data_size: string;
+    metadata_size: string;
+    download_size: string;
+};
+type ReadonlyRef<T> = Readonly<Ref<T>>;
+/**
+ * Return type of {@link usePowerSyncInspectorDiagnostics}.
+ * Uses named types so the signature stays readable in docs and IDE.
+ */
+export interface UsePowerSyncInspectorDiagnosticsReturn {
+    db: Ref<AbstractPowerSyncDatabase> | undefined;
+    connector: ComputedRef<PowerSyncBackendConnector | null>;
+    connectionOptions: ComputedRef<PowerSyncConnectionOptions | null>;
+    isDiagnosticSchemaSetup: ReadonlyRef<boolean>;
+    /** Current sync status. Typed as SyncStatus for a concise doc signature; at runtime it may be a readonly proxy. */
+    syncStatus: ReadonlyRef<SyncStatus>;
+    hasSynced: ReadonlyRef<boolean>;
+    isConnected: ReadonlyRef<boolean>;
+    isSyncing: ReadonlyRef<boolean>;
+    isDownloading: ReadonlyRef<boolean>;
+    isUploading: ReadonlyRef<boolean>;
+    downloadError: ReadonlyRef<unknown>;
+    uploadError: ReadonlyRef<unknown>;
+    downloadProgressDetails: ReadonlyRef<unknown>;
+    lastSyncedAt: ReadonlyRef<Date | null>;
+    totalDownloadProgress: ReadonlyRef<string>;
+    uploadQueueStats: ReadonlyRef<UploadQueueStats | null>;
+    uploadQueueCount: ReadonlyRef<number>;
+    uploadQueueSize: ReadonlyRef<string>;
+    userID: ReadonlyRef<string | null>;
+    bucketRows: ReadonlyRef<BucketRow[] | null>;
+    tableRows: ReadonlyRef<TableRow[] | null>;
+    totals: ReadonlyRef<UsePowerSyncInspectorDiagnosticsTotals>;
+    clearData: () => Promise<void>;
+    formatBytes: (bytes: number, decimals?: number) => string;
+}
+/**
+ * A comprehensive composable that provides real-time diagnostics data and sync status monitoring
+ * for your PowerSync client and local database.
+ *
+ * This composable can be used to create your own inspector or to monitor sync status in your application.
+ * It provides reactive properties that update automatically as the sync state changes.
+ *
+ * @returns An object containing:
+ *
+ * **Database & Connection:**
+ * - `db` - The PowerSync database instance
+ * - `connector` - The current PowerSync backend connector (computed)
+ * - `connectionOptions` - The current connection options (computed)
+ * - `isDiagnosticSchemaSetup` - Whether the diagnostic schema is properly set up
+ *
+ * **Sync Status:**
+ * - `syncStatus` - The current sync status object
+ * - `hasSynced` - Whether the database has completed at least one sync
+ * - `isConnected` - Whether the database is currently connected
+ * - `isSyncing` - Whether a sync operation is in progress
+ * - `isDownloading` - Whether data is currently being downloaded
+ * - `isUploading` - Whether data is currently being uploaded
+ * - `lastSyncedAt` - The timestamp of the last successful sync
+ *
+ * **Progress & Statistics:**
+ * - `totalDownloadProgress` - Total download progress as a percentage string (computed)
+ * - `uploadQueueStats` - Statistics about the upload queue
+ * - `uploadQueueCount` - Number of items in the upload queue (computed)
+ * - `uploadQueueSize` - Size of the upload queue in human-readable format (computed)
+ * - `bucketRows` - Array of bucket data rows
+ * - `tableRows` - Array of table statistics rows
+ * - `totals` - Aggregated statistics including bucket count, row count, and data sizes (computed)
+ *
+ * **Error Handling:**
+ * - `downloadError` - Any error that occurred during download
+ * - `uploadError` - Any error that occurred during upload
+ * - `downloadProgressDetails` - Detailed download progress information
+ *
+ * **User Info:**
+ * - `userID` - The current user ID extracted from the authentication token (computed)
+ *
+ * **Utilities:**
+ * - `clearData()` - Disconnects and clears all local PowerSync data, then reconnects. Useful for resetting the sync state during development or troubleshooting.
+ * - `formatBytes(bytes, decimals?)` - Formats byte counts into readable file sizes (e.g., "1.5 MiB"). Default decimals is 2.
+ *
+ * @example
+ * ```vue
+ * <script setup lang="ts">
+ * const {
+ *   isConnected,
+ *   hasSynced,
+ *   isSyncing,
+ *   totalDownloadProgress,
+ *   uploadQueueStats,
+ *   bucketRows,
+ *   totals,
+ *   clearData,
+ * } = usePowerSyncInspectorDiagnostics()
+ * </script>
+ *
+ * <template>
+ *   <div>
+ *     <!-- Connection Status -->
+ *     <div v-if="isConnected" class="status-connected">
+ *       Connected {{ hasSynced ? '✅' : '⏳' }}
+ *     </div>
+ *
+ *     <!-- Sync Progress -->
+ *     <div v-if="isSyncing">
+ *       Syncing... {{ totalDownloadProgress }}%
+ *     </div>
+ *
+ *     <!-- Statistics -->
+ *     <div v-if="totals">
+ *       <p>Buckets: {{ totals.buckets }}</p>
+ *       <p>Total Rows: {{ totals.row_count }}</p>
+ *       <p>Data Size: {{ totals.data_size }}</p>
+ *     </div>
+ *
+ *     <!-- Upload Queue -->
+ *     <div v-if="uploadQueueStats">
+ *       Pending uploads: {{ uploadQueueStats.count }}
+ *     </div>
+ *
+ *     <!-- Debug Actions -->
+ *     <button @click="clearData">Clear Data</button>
+ *   </div>
+ * </template>
+ * ```
+ */
+export declare function usePowerSyncInspectorDiagnostics(): UsePowerSyncInspectorDiagnosticsReturn;
+export {};

package/dist/runtime/composables/usePowerSyncInspectorDiagnostics.js

@@ -0,0 +1,254 @@
+import { usePowerSync, useStatus } from "@powersync/vue";
+import { ref, computed, readonly, onMounted, onUnmounted } from "vue";
+import { computedAsync } from "@vueuse/core";
+import { usePowerSyncInspector } from "./usePowerSyncInspector.js";
+const BUCKETS_QUERY = `
+WITH
+  oplog_by_table AS
+    (SELECT
+      bucket,
+      row_type,
+      sum(length(ifnull(data, ''))) as data_size,
+      sum(length(row_type) + length(row_id) + length(key) + 44) as metadata_size,
+      count() as row_count
+    FROM ps_oplog
+    GROUP BY bucket, row_type),
+
+  oplog_stats AS
+    (SELECT
+      bucket as bucket_id,
+      sum(data_size) as data_size,
+      sum(metadata_size) as metadata_size,
+      sum(row_count) as row_count,
+      json_group_array(row_type) tables
+    FROM oplog_by_table
+    GROUP BY bucket)
+
+SELECT
+  local.id as name,
+  ps_buckets.id as id,
+  stats.tables,
+  stats.data_size,
+  stats.metadata_size,
+  IFNULL(stats.row_count, 0) as row_count,
+  local.download_size,
+  local.downloaded_operations,
+  local.total_operations,
+  local.downloading
+FROM local_bucket_data local
+LEFT JOIN ps_buckets ON ps_buckets.name = local.id
+LEFT JOIN oplog_stats stats ON stats.bucket_id = ps_buckets.id`;
+const BUCKETS_QUERY_FAST = `
+SELECT
+  local.id as name,
+  ps_buckets.id as id,
+  '[]' as tables,
+  0 as data_size,
+  0 as metadata_size,
+  0 as row_count,
+  local.download_size,
+  local.downloaded_operations,
+  local.total_operations,
+  local.downloading
+FROM local_bucket_data local
+LEFT JOIN ps_buckets ON ps_buckets.name = local.id`;
+const TABLES_QUERY = `
+SELECT row_type as name, count() as count, sum(length(data)) as size FROM ps_oplog GROUP BY row_type
+`;
+function formatBytes(bytes, decimals = 2) {
+  if (!+bytes) return "0 Bytes";
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = [
+    "Bytes",
+    "KiB",
+    "MiB",
+    "GiB",
+    "TiB",
+    "PiB",
+    "EiB",
+    "ZiB",
+    "YiB"
+  ];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Number.parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}
+export function usePowerSyncInspectorDiagnostics() {
+  const db = usePowerSync();
+  const syncStatus = useStatus();
+  const { getCurrentSchemaManager } = usePowerSyncInspector();
+  const isDiagnosticSchemaSetup = ref(true);
+  const connectionOptions = computed(() => db.value.connectionOptions || null);
+  const connector = computed(() => db.value.connector || null);
+  const hasSynced = ref(syncStatus.value?.hasSynced || false);
+  const isConnected = ref(syncStatus.value?.connected || false);
+  const isSyncing = ref(false);
+  const isDownloading = ref(
+    syncStatus.value?.dataFlowStatus.downloading || false
+  );
+  const isUploading = ref(syncStatus.value?.dataFlowStatus.uploading || false);
+  const lastSyncedAt = ref(syncStatus.value?.lastSyncedAt || null);
+  const uploadError = ref(syncStatus.value?.dataFlowStatus.uploadError || null);
+  const downloadError = ref(
+    syncStatus.value?.dataFlowStatus.downloadError || null
+  );
+  const downloadProgressDetails = ref(
+    syncStatus.value?.dataFlowStatus.downloadProgress || null
+  );
+  const bucketRows = ref(null);
+  const tableRows = ref(null);
+  const uploadQueueStats = ref(null);
+  const totals = computed(() => ({
+    buckets: bucketRows.value?.length ?? 0,
+    row_count: bucketRows.value?.reduce((total, row) => total + row.row_count, 0) ?? 0,
+    downloaded_operations: bucketRows.value?.reduce(
+      (total, row) => total + row.downloaded_operations,
+      0
+    ),
+    total_operations: bucketRows.value?.reduce(
+      (total, row) => total + row.total_operations,
+      0
+    ) ?? 0,
+    data_size: formatBytes(
+      bucketRows.value?.reduce((total, row) => total + row.data_size, 0) ?? 0
+    ),
+    metadata_size: formatBytes(
+      bucketRows.value?.reduce((total, row) => total + row.metadata_size, 0) ?? 0
+    ),
+    download_size: formatBytes(
+      bucketRows.value?.reduce((total, row) => total + row.download_size, 0) ?? 0
+    )
+  }));
+  const userID = computedAsync(async () => {
+    try {
+      const token = (await connector.value.fetchCredentials())?.token;
+      if (!token) return null;
+      const [_head, body, _signature] = token.split(".");
+      const payload = JSON.parse(atob(body ?? ""));
+      return payload.sub;
+    } catch {
+      return null;
+    }
+  });
+  const totalDownloadProgress = computed(() => {
+    if (!hasSynced.value || isSyncing.value) {
+      return ((syncStatus.value?.downloadProgress?.downloadedFraction ?? 0) * 100).toFixed(1);
+    }
+    return "100";
+  });
+  const uploadQueueSize = computed(
+    () => formatBytes(uploadQueueStats.value?.size ?? 0)
+  );
+  const uploadQueueCount = computed(() => uploadQueueStats.value?.count ?? 0);
+  const clearData = async () => {
+    await db.value?.syncStreamImplementation?.disconnect();
+    const connector2 = db.value.connector;
+    const connectionOptions2 = db.value.connectionOptions;
+    await db.value?.disconnectAndClear();
+    const schemaManager = getCurrentSchemaManager();
+    await schemaManager.clear();
+    await schemaManager.refreshSchema(db.value.database);
+    await db.value.connect(
+      connector2,
+      connectionOptions2
+    );
+  };
+  async function refreshState() {
+    if (db.value) {
+      const { synced_at } = await db.value.get(
+        "SELECT powersync_last_synced_at() as synced_at"
+      );
+      uploadQueueStats.value = await db.value?.getUploadQueueStats(true);
+      if (synced_at != null && !syncStatus.value?.dataFlowStatus.downloading) {
+        bucketRows.value = await db.value.getAll(BUCKETS_QUERY);
+        tableRows.value = await db.value.getAll(TABLES_QUERY);
+      } else if (synced_at != null) {
+        bucketRows.value = await db.value.getAll(BUCKETS_QUERY_FAST);
+        if (tableRows.value == null) {
+          tableRows.value = await db.value.getAll(TABLES_QUERY);
+        }
+      } else {
+        bucketRows.value = await db.value.getAll(BUCKETS_QUERY_FAST);
+        tableRows.value = null;
+      }
+    }
+  }
+  onMounted(async () => {
+    if (!db.value) return;
+    const unregisterListener = db.value.registerListener({
+      statusChanged: (newStatus) => {
+        hasSynced.value = !!newStatus.hasSynced;
+        isConnected.value = !!newStatus.connected;
+        isDownloading.value = !!newStatus.dataFlowStatus.downloading;
+        isUploading.value = !!newStatus.dataFlowStatus.uploading;
+        lastSyncedAt.value = newStatus.lastSyncedAt || null;
+        uploadError.value = newStatus.dataFlowStatus.uploadError || null;
+        downloadError.value = newStatus.dataFlowStatus.downloadError || null;
+        downloadProgressDetails.value = newStatus.dataFlowStatus.downloadProgress || null;
+        if (newStatus?.hasSynced === void 0 || newStatus?.priorityStatusEntries?.length && newStatus.priorityStatusEntries.length > 0) {
+          hasSynced.value = newStatus?.priorityStatusEntries.every(
+            (entry) => entry.hasSynced
+          ) ?? false;
+        }
+        if (newStatus?.dataFlowStatus.downloading || newStatus?.dataFlowStatus.uploading) {
+          isSyncing.value = true;
+        } else {
+          isSyncing.value = false;
+        }
+      }
+    });
+    db.value.onChangeWithCallback(
+      {
+        async onChange(_event) {
+          await refreshState();
+        }
+      },
+      {
+        rawTableNames: true,
+        tables: [
+          "ps_oplog",
+          "ps_buckets",
+          "ps_data_local__local_bucket_data",
+          "ps_crud"
+        ],
+        throttleMs: 500
+      }
+    );
+    try {
+      await refreshState();
+    } catch (error) {
+      if (error.message === "no such table: local_bucket_data") {
+        isDiagnosticSchemaSetup.value = false;
+      }
+    }
+    onUnmounted(() => {
+      unregisterListener();
+    });
+  });
+  return {
+    db,
+    connector,
+    connectionOptions,
+    isDiagnosticSchemaSetup: readonly(isDiagnosticSchemaSetup),
+    syncStatus: readonly(syncStatus),
+    hasSynced: readonly(hasSynced),
+    isConnected: readonly(isConnected),
+    isSyncing: readonly(isSyncing),
+    isDownloading: readonly(isDownloading),
+    isUploading: readonly(isUploading),
+    downloadError: readonly(downloadError),
+    uploadError: readonly(uploadError),
+    downloadProgressDetails: readonly(downloadProgressDetails),
+    lastSyncedAt: readonly(lastSyncedAt),
+    totalDownloadProgress: readonly(totalDownloadProgress),
+    uploadQueueStats: readonly(uploadQueueStats),
+    uploadQueueCount: readonly(uploadQueueCount),
+    uploadQueueSize: readonly(uploadQueueSize),
+    userID: readonly(userID),
+    bucketRows: readonly(bucketRows),
+    tableRows: readonly(tableRows),
+    totals: readonly(totals),
+    clearData,
+    formatBytes
+  };
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Provides a Kysely-wrapped PowerSync database for type-safe database queries.
+ *
+ * This composable wraps the PowerSync database instance with Kysely's type-safe query builder,
+ * allowing you to write type-safe SQL queries with full TypeScript support.
+ *
+ * @typeParam T - Your database type (from your schema)
+ *
+ * @returns Kysely database instance (not `{ db }`)
+ *
+ * @example
+ * ```typescript
+ * import { usePowerSyncKysely } from '@powersync/nuxt'
+ * import { type Database } from '../powersync/AppSchema'
+ *
+ * // Returns db directly, not { db }
+ * const db = usePowerSyncKysely<Database>()
+ *
+ * // Use Kysely query builder
+ * const users = await db.selectFrom('users').selectAll().execute()
+ * ```
+ */
+export declare const usePowerSyncKysely: <T>() => import("@powersync/kysely-driver").PowerSyncKyselyDatabase<T>;

package/dist/runtime/composables/usePowerSyncKysely.js

@@ -0,0 +1,7 @@
+import { wrapPowerSyncWithKysely } from "@powersync/kysely-driver";
+import { usePowerSync } from "@powersync/vue";
+export const usePowerSyncKysely = () => {
+  const powerSync = usePowerSync();
+  const db = wrapPowerSyncWithKysely(powerSync.value);
+  return db;
+};

package/dist/runtime/index.d.ts

@@ -0,0 +1,9 @@
+import type { PowerSyncNuxtModuleOptions } from '../module'
+
+declare module 'nuxt/schema' {
+  interface PublicRuntimeConfig {
+    powerSyncModuleOptions: PowerSyncNuxtModuleOptions
+  }
+}
+// It is always important to ensure you import/export something when augmenting a type
+export {}

package/dist/runtime/layouts/powersync-inspector-layout.d.vue.ts

@@ -0,0 +1,13 @@
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/layouts/powersync-inspector-layout.vue

@@ -0,0 +1,90 @@
+<template>
+<div>
+
+  <LoadingSpinner v-if="isCssLoading" />
+
+  <div
+    v-show="!isCssLoading"
+    flex="~ relative col"
+    p="6"
+    h="screen"
+    n-bg="base"
+    class="ps-inspector-ui"
+  >
+      <!-- Header with title and dark toggle -->
+      <div
+        flex="~ items-center justify-between"
+        mb="3"
+      >
+        <h1
+          flex="~ gap-2 items-center"
+          text="3xl"
+          font="bold"
+        >
+          <img
+            :src="iconUrl"
+            alt="Powersync"
+            w="10"
+            h="10"
+          >
+          PowerSync Inspector
+        </h1>
+
+        <!-- Dark Mode Toggle -->
+        <NDarkToggle v-slot="{ isDark, toggle }">
+          <NButton
+            n="sm"
+            :icon="isDark.value ? 'carbon:moon' : 'carbon:sun'"
+            @click="toggle"
+          >
+            {{ isDark.value ? "Dark" : "Light" }}
+          </NButton>
+        </NDarkToggle>
+      </div>
+
+      <slot v-if="useDiagnostics" />
+      <div v-else>
+        <NTip
+          n="red6 dark:red5"
+          icon="carbon:warning-alt"
+        >
+          Enable diagnostics in your Nuxt config to use the inspector.
+        </NTip>
+      </div>
+  </div>
+</div>
+</template>
+
+<script setup>
+import { useRuntimeConfig } from "#imports";
+import { onMounted, ref } from "vue";
+import iconUrl from "./assets/powersync-icon.svg?url";
+const useDiagnostics = useRuntimeConfig().public.powerSyncModuleOptions.useDiagnostics ?? false;
+const isCssLoading = ref(true);
+onMounted(async () => {
+  await waitForUnoCSS();
+  isCssLoading.value = false;
+});
+const waitForUnoCSS = () => {
+  return new Promise((resolve) => {
+    const testEl = document.createElement("div");
+    testEl.className = "w-10 h-10";
+    testEl.style.position = "absolute";
+    testEl.style.visibility = "hidden";
+    testEl.style.pointerEvents = "none";
+    document.body.appendChild(testEl);
+    const checkStyles = () => {
+      const computed = window.getComputedStyle(testEl);
+      const width = computed.getPropertyValue("width");
+      const height = computed.getPropertyValue("height");
+      if (width === "40px" && height === "40px") {
+        document.body.removeChild(testEl);
+        resolve(void 0);
+      } else {
+        requestAnimationFrame(checkStyles);
+      }
+    };
+    requestAnimationFrame(checkStyles);
+  });
+};
+</script>

package/dist/runtime/layouts/powersync-inspector-layout.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_20: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_20) => any;
+};
+declare const __VLS_base: 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: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/pages/__powersync-inspector.d.vue.ts

@@ -0,0 +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 _default: typeof __VLS_export;
+export default _default;