chore: update

Author: antfu

packages/json-render-ui/package.json

@@ -33,7 +33,7 @@
     "build": "tsdown && vite build --config src/spa/vite.config.ts",
     "watch": "tsdown --watch",
     "typecheck": "tsc --noEmit",
-    "storybook": "storybook dev -p 6014 --host 0.0.0.0",
+    "storybook": "storybook dev -p 6014",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "prepack": "pnpm run build"

plugins/a11y/package.json

@@ -43,7 +43,7 @@
     "build:inject": "vite build --config src/inject/vite.config.ts",
     "watch": "tsdown --watch",
     "dev": "node bin.mjs",
-    "storybook": "storybook dev -p 6015 --host 0.0.0.0",
+    "storybook": "storybook dev -p 6015",
     "build-storybook": "storybook build",
     "cli:build": "node bin.mjs build --out-dir dist/static",
     "demo": "node demo/server.mjs",

plugins/code-server/package.json

@@ -43,8 +43,8 @@
     "build": "tsdown && vite build --config src/spa/vite.config.ts",
     "watch": "tsdown --watch",
     "typecheck": "tsc --noEmit",
-    "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
-    "storybook": "storybook dev -p 6013 --host 0.0.0.0",
+    "dev": "vite --config src/spa/vite.config.ts",
+    "storybook": "storybook dev -p 6013",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "prepack": "pnpm run build"

plugins/data-inspector/package.json

@@ -41,9 +41,9 @@
   ],
   "scripts": {
     "build": "tsdown && vite build --config src/spa/vite.config.ts",
-    "dev": "vite --config src/spa/vite.config.ts --host 0.0.0.0",
+    "dev": "vite --config src/spa/vite.config.ts",
     "watch": "tsdown --watch",
-    "storybook": "storybook dev -p 6016 --host 0.0.0.0",
+    "storybook": "storybook dev -p 6016",
     "build-storybook": "storybook build",
     "prepack": "pnpm build",
     "test": "vitest run",

plugins/data-inspector/src/spa/components/DataSourcePanel.vue

@@ -14,7 +14,7 @@ const showDetails = ref(false)
 <template>
   <div class="px3 py2 border-b border-base flex flex-col gap-2 shrink-0">
     <div class="flex items-center gap-2">
-      <div class="font-semibold text-xs op-fade uppercase tracking-wide select-none">
+      <div class="font-semibold text-xs op-fade uppercase tracking-wide select-none ws-nowrap">
         Data Source
       </div>
       <DataSourceSelect v-model="wb.sourceId.value" :sources="wb.sources.value" placeholder="Data source" />

plugins/data-inspector/src/spa/components/DataSourceSelect.vue

@@ -33,7 +33,7 @@ function iconOf(source: DataSourceMeta | undefined): string {
         <span class="truncate font-semibold text-primary">{{ active?.title ?? placeholder ?? 'Data source' }}</span>
       </span>
       <SelectIcon class="op-fade shrink-0">
-        <span class="i-ph:caret-down" aria-hidden="true" />
+        <div class="i-ph:caret-down" aria-hidden="true" />
       </SelectIcon>
     </SelectTrigger>
     <SelectPortal>
@@ -50,7 +50,7 @@ function iconOf(source: DataSourceMeta | undefined): string {
             class="text-sm color-base py-1.5 pl-2 pr-2 outline-none rounded-md flex gap-2 cursor-pointer select-none transition items-start relative data-[highlighted]:bg-active"
           >
             <DisplayIconifyRemoteIcon :icon="iconOf(source)" class="shrink-0 mt-0.5 w-3.5 h-3.5 color-active [&_svg]:h-full [&_svg]:w-full" aria-hidden="true" />
-            <span class="flex flex-col min-w-0 flex-1">
+            <span class="flex flex-col min-w-0 flex-1 of-hidden">
               <span class="flex items-center gap-1.5">
                 <span class="truncate font-medium">{{ source.title }}</span>
                 <span v-if="source.static" class="shrink-0 text-10px op-fade border border-base rounded px-1">static</span>

plugins/data-inspector/src/spa/components/EditPanel.vue

@@ -232,7 +232,7 @@ function applyDelete(): void {
 </script>
 
 <template>
-  <div class="flex flex-col h-full min-h-0 bg-base border-l border-base w-85">
+  <div class="flex flex-col h-full min-h-0 bg-base border-l border-base w-100">
     <div class="flex items-center gap-2 px3 py2 border-b border-base select-none">
       <span class="i-ph:pencil-simple-duotone color-active" />
       <div class="font-semibold text-xs op-fade uppercase tracking-wide">
@@ -398,7 +398,7 @@ function applyDelete(): void {
           @click="applyDelete"
           @blur="confirmingDelete = false"
         >
-          <span>{{ confirmingDelete ? 'Really delete?' : 'Delete' }}</span>
+          <span>{{ confirmingDelete ? 'Confirm Delete?' : 'Delete Key' }}</span>
         </Button>
       </section>
     </div>

plugins/data-inspector/src/spa/components/QueryPanel.vue

@@ -36,6 +36,7 @@ function copyQuery(): void {
         <span class="i-ph:question-duotone" />
       </a>
       <div class="flex-auto" />
+      <!-- TODO: move auto rerun check here. -->
       <ActionIconButton
         v-if="wb.query.value"
         class="text-sm"

plugins/data-inspector/src/spa/components/ResultViewer.vue

@@ -87,29 +87,29 @@ function copyResult(): void {
 
 <template>
   <div class="flex flex-col h-full min-h-0">
-    <div class="flex items-center gap-3 px-3 py-1.5 border-b border-base min-h-9 text-xs color-muted font-mono tabular-nums" :class="{ 'op-fade': statsStale }">
+    <div class="flex items-center gap-3 px-3 py-1.5 border-b border-base min-h-9 text-xs ws-nowrap color-muted font-mono tabular-nums flex-wrap" :class="{ 'op-fade': statsStale }">
       <template v-if="stats">
         <span class="flex items-center gap-1"><span class="op50">jora</span> <DisplayDuration :ms="stats.queryMs" colorize /></span>
-        <div class="h-full border-r border-base" />
-        <span class="flex items-center gap-1"><span class="op50">normalize</span> <DisplayDuration :ms="stats.normalize.ms" colorize /></span>
-        <div class="h-full border-r border-base" />
+        <div class="h-5 border-r border-base" />
+        <span class="flex items-center gap-1"><span class="op50">norm</span> <DisplayDuration :ms="stats.normalize.ms" colorize /></span>
+        <div class="h-5 border-r border-base" />
         <span class="flex items-center gap-1"><span class="op50">rpc</span> <DisplayDuration :ms="stats.rpcMs" colorize /></span>
-        <div class="h-full border-r border-base" />
-        <span class="flex items-center gap-1"><span class="op50">payload</span> <DisplayBytes :bytes="stats.payloadBytes" colorize /></span>
-        <div class="h-full border-r border-base" />
+        <div class="h-5 border-r border-base" />
+        <span class="flex items-center gap-1"><DisplayBytes :bytes="stats.payloadBytes" colorize /></span>
+        <div class="h-5 border-r border-base" />
         <span>{{ stats.normalize.nodes }} <span class="op50">nodes</span></span>
         <template v-if="stats.normalize.refs">
-          <div class="h-full border-r border-base" />
+          <div class="h-5 border-r border-base" />
           <span>{{ stats.normalize.refs }} <span class="op50">refs</span></span>
         </template>
         <DisplayBadge v-if="stats.normalize.truncatedEntries || stats.normalize.truncatedDepth" :color="12" text="truncated" />
         <template v-if="lastRunAt">
-          <div class="h-full border-r border-base" />
-          <span class="flex items-center gap-1"><span class="op50">ran</span> <DisplayDate :date="lastRunAt" live /></span>
+          <div class="h-5 border-r border-base" />
+          <span class="flex items-center gap-1"><DisplayDate :date="lastRunAt" live /></span>
         </template>
       </template>
       <span v-else class="op-fade select-none">no query run yet</span>
-      <div class="flex-1" />
+      <div class="flex-auto" />
       <span v-if="running" class="flex items-center gap-1.5 color-faint">
         <span class="i-ph:circle-notch animate-spin" />
         running

plugins/data-inspector/src/spa/components/SavedQueriesPanel.vue

@@ -110,11 +110,11 @@ function filterBadges(entry: Query): FilterBadge[] {
       </ActionButton>
     </div>
 
-    <div v-if="entries.length" class="flex-1 overflow-auto min-h-0 max-h-200 grid grid-cols-[repeat(auto-fit,minmax(20rem,1fr))] gap-2">
+    <div v-if="entries.length" class="flex-1 overflow-auto min-h-0 max-h-80 grid grid-cols-[repeat(auto-fit,minmax(15rem,1fr))] gap-1">
       <div
         v-for="entry in entries"
         :key="entry.key"
-        class="group flex items-center gap-2 px-2 py-1.5 border border-base rounded-lg hover:bg-active cursor-pointer"
+        class="group flex items-center gap-2 px1.5 py-1 border border-base rounded hover:bg-active cursor-pointer"
         :title="entry.recipe.description ?? entry.recipe.query"
         @click="emit('load', entry.recipe)"
       >