@powersync/nuxt 0.0.0-dev-20260128023420 → 0.0.1

package/dist/runtime/components/ConfigInspectorTab.vue

@@ -1,64 +1,27 @@
 <template>
-  <div
-    border="t"
-    border-color="gray-100"
-    relative
-    n-bg="base"
-    flex="~ col"
-  >
-    <div
-      flex="~ col gap-2"
-      class="h-full"
-    >
-      <NSectionBlock
-        icon="carbon:connection-signal"
-        text="Connection Options"
-      >
-        <div
-          class="text-sm schema-code-block h-full overflow-auto"
-          v-html="connectionOptionsHtml"
-        />
+  <div border="t" border-color="gray-100" relative n-bg="base" flex="~ col">
+    <div flex="~ col gap-2" class="h-full">
+      <NSectionBlock icon="carbon:connection-signal" text="Connection Options">
+        <div class="text-sm schema-code-block h-full overflow-auto" v-html="connectionOptionsHtml" />
       </NSectionBlock>
 
-      <span
-        border="b"
-        border-color="gray-100"
-      />
+      <span border="b" border-color="gray-100" />
 
-      <NSectionBlock
-        icon="carbon:cics-db2-connection"
-        text="Database Options"
-      >
-        <div
-          class="text-sm schema-code-block h-full overflow-auto"
-          v-html="dbOptionsHtml"
-        />
+      <NSectionBlock icon="carbon:cics-db2-connection" text="Database Options">
+        <div class="text-sm schema-code-block h-full overflow-auto" v-html="dbOptionsHtml" />
       </NSectionBlock>
 
-      <span
-        border="b"
-        border-color="gray-100"
-      />
+      <span border="b" border-color="gray-100" />
 
-      <NSectionBlock
-        icon="carbon:prompt-template"
-        text="Schema"
-        class="flex-1 overflow-hidden"
-      >
-        <div
-          class="text-sm schema-code-block h-full overflow-auto"
-          v-html="schemaHtml"
-        />
+      <NSectionBlock icon="carbon:prompt-template" text="Schema" class="flex-1 overflow-hidden">
+        <div class="text-sm schema-code-block h-full overflow-auto" v-html="schemaHtml" />
       </NSectionBlock>
     </div>
   </div>
 </template>
 
 <script setup>
-import {
-  usePowerSyncInspectorDiagnostics,
-  usePowerSyncInspector
-} from "#imports";
+import { usePowerSyncInspectorDiagnostics, usePowerSyncInspector } from "#imports";
 import { computed, onMounted } from "vue";
 import { codeToHtml } from "shiki";
 import { asyncComputed } from "@vueuse/core";

package/dist/runtime/components/ConfigInspectorTab.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/DataInspectorTab.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/DataInspectorTab.vue

@@ -1,18 +1,6 @@
 <template>
-  <div
-    border="t"
-    border-color="gray-200"
-    relative
-    n-bg="base"
-    flex="~ col"
-    h="screen"
-    overflow="hidden"
-  >
-    <SplitterGroup
-      id="splitter-group-1"
-      class="h-full"
-      direction="horizontal"
-    >
+  <div border="t" border-color="gray-200" relative n-bg="base" flex="~ col" h="screen" overflow="hidden">
+    <SplitterGroup id="splitter-group-1" class="h-full" direction="horizontal">
       <SplitterPanel
         id="splitter-group-1-panel-1"
         :min-size="20"
@@ -72,9 +60,7 @@
 "
                     n="sm"
                     class="flex-shrink-0"
-                    :class="
-  item.value.type === 'folder' ? 'text-indigo-500' : 'text-gray-500'
-"
+                    :class="item.value.type === 'folder' ? 'text-indigo-500' : 'text-gray-500'"
                   />
 
                   <!-- Name -->
@@ -83,9 +69,7 @@
                   <!-- Expand/Collapse indicator for folders -->
                   <NIcon
                     v-if="item.value.type === 'folder'"
-                    :icon="
-  isExpanded ? 'carbon:chevron-down' : 'carbon:chevron-right'
-"
+                    :icon="isExpanded ? 'carbon:chevron-down' : 'carbon:chevron-right'"
                     class="flex-shrink-0 ml-auto text-gray-400"
                   />
                 </div>
@@ -106,33 +90,15 @@
         id="splitter-group-1-resize-handle-1"
         class="w-[2px] bg-gray-200 hover:bg-indigo-300 dark:hover:bg-indigo-700"
       />
-      <SplitterPanel
-        id="splitter-group-1-panel-2"
-        :min-size="20"
-        class="border-b border-x border-gray-200"
-      >
-        <div
-          v-if="!selectedEntry"
-          class="flex w-full h-full justify-center items-center align-middle"
-        >
-          <div
-            text="sm gray-500"
-            flex="~ gap-2 items-center"
-          >
+      <SplitterPanel id="splitter-group-1-panel-2" :min-size="20" class="border-b border-x border-gray-200">
+        <div v-if="!selectedEntry" class="flex w-full h-full justify-center items-center align-middle">
+          <div text="sm gray-500" flex="~ gap-2 items-center">
             <NIcon icon="carbon:document-blank" />
             <span>No Selection</span>
           </div>
         </div>
-        <SplitterGroup
-          v-else
-          id="splitter-group-2"
-          direction="vertical"
-        >
-          <SplitterPanel
-            id="splitter-group-2-panel-1"
-            :min-size="10"
-            :default-size="10"
-          >
+        <SplitterGroup v-else id="splitter-group-2" direction="vertical">
+          <SplitterPanel id="splitter-group-2-panel-1" :min-size="10" :default-size="10">
             <!-- Custom Code Editor with Syntax Highlighting -->
             <div class="relative h-full w-full">
               <!-- Syntax Highlighted Background -->
@@ -141,10 +107,7 @@
                 class="absolute inset-0 pointer-events-none overflow-auto"
                 :style="{ scrollBehavior: 'auto' }"
               >
-                <div
-                  class="syntax-highlight-bg"
-                  v-html="html"
-                />
+                <div class="syntax-highlight-bg" v-html="html" />
               </div>
 
               <!-- Transparent Textarea Overlay -->
@@ -152,10 +115,7 @@
                 ref="textareaRef"
                 v-model="query"
                 class="absolute inset-0 w-full h-full resize-none bg-transparent outline-none border-none overflow-auto editor-textarea dark:placeholder:text-gray-400"
-                style="
-                  color: rgba(0, 0, 0, 0.01);
-                  text-shadow: 0 0 0 transparent;
-                "
+                style="color: rgba(0, 0, 0, 0.01); text-shadow: 0 0 0 transparent"
                 placeholder="Enter SQL query..."
                 spellcheck="false"
                 autocorrect="off"
@@ -169,10 +129,7 @@
               />
 
               <!-- Cursor/Selection Overlay -->
-              <div
-                ref="cursorOverlay"
-                class="absolute inset-0 pointer-events-none overflow-hidden"
-              >
+              <div ref="cursorOverlay" class="absolute inset-0 pointer-events-none overflow-hidden">
                 <!-- This will show cursor and selection -->
               </div>
             </div>
@@ -181,40 +138,20 @@
             id="splitter-group-2-resize-handle-1"
             class="h-[2px] bg-gray-200 hover:bg-indigo-300 dark:hover:bg-indigo-700"
           />
-          <SplitterPanel
-            id="splitter-group-2-panel-2"
-            :min-size="40"
-            class="border-t-2 border-gray-200 flex flex-col"
-          >
+          <SplitterPanel id="splitter-group-2-panel-2" :min-size="40" class="border-t-2 border-gray-200 flex flex-col">
             <!-- Query Results Table -->
-            <div
-              v-if="isLoading"
-              class="flex justify-center items-center h-full"
-            >
+            <div v-if="isLoading" class="flex justify-center items-center h-full">
               <NLoading />
             </div>
 
-            <div
-              v-else-if="queryError"
-              class="flex-1 flex flex-col overflow-hidden"
-            >
+            <div v-else-if="queryError" class="flex-1 flex flex-col overflow-hidden">
               <div
                 class="px-3 py-2 flex justify-between items-center bg-gray-50 dark:bg-neutral-800 border-b border-gray-200 dark:border-neutral-700 flex-shrink-0"
               >
-                <NButton
-                  n="xs"
-                  icon="carbon:play"
-                  @click="executeQuery"
-                >
-                  Execute Query
-                </NButton>
+                <NButton n="xs" icon="carbon:play" @click="executeQuery"> Execute Query </NButton>
               </div>
-              <div
-                class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded"
-              >
-                <div class="text-red-800 dark:text-red-200 font-medium">
-                  Query Error:
-                </div>
+              <div class="p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded">
+                <div class="text-red-800 dark:text-red-200 font-medium">Query Error:</div>
                 <div class="text-red-700 dark:text-red-300 text-sm mt-1">
                   {{ queryError }}
                 </div>
@@ -230,18 +167,10 @@
                 class="px-3 py-2 flex justify-between items-center bg-gray-50 dark:bg-neutral-800 border-b border-gray-200 dark:border-neutral-700 flex-shrink-0"
               >
                 <div class="flex items-center gap-3">
-                  <NButton
-                    n="xs green"
-                    icon="carbon:play"
-                    @click="executeQuery"
-                  >
-                    Execute Query
-                  </NButton>
+                  <NButton n="xs green" icon="carbon:play" @click="executeQuery"> Execute Query </NButton>
 
                   <div class="text-xs text-gray-600 dark:text-gray-400">
-                    {{ currentTableRows.length }} row{{
-                      currentTableRows.length !== 1 ? "s" : ""
-                    }}
+                    {{ currentTableRows.length }} row{{ currentTableRows.length !== 1 ? "s" : "" }}
                     returned
                   </div>
                 </div>
@@ -296,9 +225,7 @@
               </div>
 
               <!-- Data Table -->
-              <div
-                class="flex-1 border border-gray-200 dark:border-neutral-700 rounded-b-lg overflow-auto"
-              >
+              <div class="flex-1 border border-gray-200 dark:border-neutral-700 rounded-b-lg overflow-auto">
                 <table class="w-full min-w-max">
                   <thead class="bg-gray-50 dark:bg-neutral-950 sticky top-0">
                     <tr>
@@ -314,24 +241,14 @@
   maxWidth: `${header.getSize()}px`,
   minWidth: `${header.getSize()}px`
 }"
-                        @click="
-  header.column.getToggleSortingHandler()?.($event)
-"
+                        @click="header.column.getToggleSortingHandler()?.($event)"
                       >
                         <div class="flex items-center gap-1 min-w-0">
                           <div class="truncate flex-1 min-w-0">
-                            <FlexRender
-                              :render="header.column.columnDef.header"
-                              :props="header.getContext()"
-                            />
+                            <FlexRender :render="header.column.columnDef.header" :props="header.getContext()" />
                           </div>
-                          <span
-                            v-if="header.column.getIsSorted()"
-                            class="text-xs flex-shrink-0"
-                          >
-                            {{
-                              header.column.getIsSorted() === "asc" ? "\u25B2" : "\u25BC"
-                            }}
+                          <span v-if="header.column.getIsSorted()" class="text-xs flex-shrink-0">
+                            {{ header.column.getIsSorted() === "asc" ? "\u25B2" : "\u25BC" }}
                           </span>
                         </div>
                         <!-- Column Resize Handle -->
@@ -342,16 +259,12 @@
                           @touchstart="header.getResizeHandler()?.($event)"
                           @click.stop
                         >
-                          <div
-                            class="w-full h-full group-hover:bg-gray-500 transition-colors duration-150"
-                          />
+                          <div class="w-full h-full group-hover:bg-gray-500 transition-colors duration-150" />
                         </div>
                       </th>
                     </tr>
                   </thead>
-                  <tbody
-                    class="bg-white dark:bg-neutral-900 border-t border-gray-200 dark:border-neutral-700"
-                  >
+                  <tbody class="bg-white dark:bg-neutral-900 border-t border-gray-200 dark:border-neutral-700">
                     <tr
                       v-for="row in table.getRowModel().rows"
                       :key="row.id"
@@ -367,14 +280,8 @@
   minWidth: `${cell.column.getSize()}px`
 }"
                       >
-                        <div
-                          class="truncate w-full"
-                          :title="String(cell.getValue())"
-                        >
-                          <FlexRender
-                            :render="cell.column.columnDef.cell"
-                            :props="cell.getContext()"
-                          />
+                        <div class="truncate w-full" :title="String(cell.getValue())">
+                          <FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
                         </div>
                       </td>
                     </tr>
@@ -390,28 +297,15 @@
               <div
                 class="px-3 py-2 flex justify-between items-center bg-gray-50 dark:bg-neutral-800 border-b border-gray-200 dark:border-neutral-700 flex-shrink-0"
               >
-                <NButton
-                  n="xs"
-                  icon="carbon:play"
-                  @click="executeQuery"
-                >
-                  Execute Query
-                </NButton>
+                <NButton n="xs" icon="carbon:play" @click="executeQuery"> Execute Query </NButton>
               </div>
               <div class="text-center py-8">
-                <div class="text-gray-500 dark:text-gray-400">
-                  No results found
-                </div>
+                <div class="text-gray-500 dark:text-gray-400">No results found</div>
               </div>
             </div>
 
-            <div
-              v-else
-              class="text-center py-8"
-            >
-              <div class="text-gray-500 dark:text-gray-400">
-                Execute a query to see results
-              </div>
+            <div v-else class="text-center py-8">
+              <div class="text-gray-500 dark:text-gray-400">Execute a query to see results</div>
             </div>
           </SplitterPanel>
         </SplitterGroup>
@@ -422,13 +316,7 @@
 
 <script setup>
 import { usePowerSyncInspectorDiagnostics } from "#imports";
-import {
-  SplitterGroup,
-  SplitterPanel,
-  SplitterResizeHandle,
-  TreeItem,
-  TreeRoot
-} from "reka-ui";
+import { SplitterGroup, SplitterPanel, SplitterResizeHandle, TreeItem, TreeRoot } from "reka-ui";
 import { asyncComputed } from "@vueuse/core";
 import {
   FlexRender,
@@ -533,9 +421,7 @@ watch(entriesRows, () => {
 const onSearchInput = () => {
   expandedItems.value = ["Tables", "Views"];
 };
-const selectedEntry = ref(
-  void 0
-);
+const selectedEntry = ref(void 0);
 const query = ref("");
 const isLoading = ref(false);
 const queryError = ref(null);

package/dist/runtime/components/DataInspectorTab.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/LoadingSpinner.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/LoadingSpinner.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/LogsTab.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;