@arronqzy/vue-view 0.1.25 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arronqzy/vue-view",
-  "version": "0.1.25",
+  "version": "0.1.26",
   "description": "Vue 3 visual view editor for Abuilder (Ant Design Vue)",
   "license": "MIT",
   "type": "module",
@@ -23,13 +23,13 @@
     "selecto": "^1.26.3",
     "uuid": "^13.0.0",
     "vue": "^3.5.13",
+    "@arronqzy/rx-store": "1.0.8",
     "@arronqzy/blueprint-dsl": "1.0.17",
-    "@arronqzy/i18n": "0.1.17",
     "@arronqzy/view-scene3d": "0.1.5",
-    "@arronqzy/vue-rx-store": "0.1.6",
+    "@arronqzy/vue-blueprint": "0.1.20",
     "@arronqzy/view-table": "0.1.8",
-    "@arronqzy/vue-blueprint": "0.1.19",
-    "@arronqzy/rx-store": "1.0.8"
+    "@arronqzy/vue-rx-store": "0.1.6",
+    "@arronqzy/i18n": "0.1.17"
   },
   "peerDependencies": {
     "vue": "^3.4.0"
@@ -39,8 +39,8 @@
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
     "vue-tsc": "^2.2.0",
-    "@arronqzy/typescript-config": "1.0.0",
-    "@arronqzy/eslint-config": "0.0.0"
+    "@arronqzy/eslint-config": "0.0.0",
+    "@arronqzy/typescript-config": "1.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/panel/VueViewPanel.vue

@@ -50,9 +50,9 @@ import {
   Modal,
   Slider,
   Space,
-  Switch,
   Tabs,
   Tag,
+  Tooltip,
   message,
 } from "ant-design-vue";
 import { usePanelElements } from "./hooks/usePanelElements";
@@ -188,8 +188,8 @@ const editingLayerId = ref<string | null>(null);
 const editingLayerName = ref("");
 const isMergingLayers = ref(false);
 const mergeLayerName = ref("");
-const leftWidth = ref(240);
-const rightWidth = ref(300);
+const leftWidth = ref(220);
+const rightWidth = ref(280);
 const importInputRef = ref<HTMLInputElement | null>(null);
 const blueprintImportInputRef = ref<HTMLInputElement | null>(null);
 const apiCollectionManagerOpen = ref(false);
@@ -858,9 +858,9 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
 <template>
   <Layout class="vue-view-panel h-screen overflow-hidden" :class="props.class" :key="locale">
-    <Layout.Header class="flex h-auto flex-wrap items-center gap-2 bg-[#001529] px-3 py-2">
+    <Layout.Header class="flex h-10 flex-wrap items-center gap-2 border-b border-border/70 !bg-background/80 px-3 py-0 leading-none backdrop-blur-md">
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.file") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.file") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item @click="handleExport">{{ t("panel.menubar.exportPanelJson") }}</Menu.Item>
@@ -869,7 +869,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.edit") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.edit") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item :disabled="!canUndo" @click="undo">{{ t("panel.menubar.undo") }}</Menu.Item>
@@ -885,7 +885,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.blueprint") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.blueprint") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item @click="openBlueprintExport">{{ t("panel.menubar.exportBlueprint") }}</Menu.Item>
@@ -908,7 +908,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         @preview-project="openOnlinePreviewForProject"
       />
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.menubar.settings") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.menubar.settings") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.ItemGroup :title="t('panel.theme.language')">
@@ -930,7 +930,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
         </template>
       </Dropdown>
       <Dropdown :trigger="['click']">
-        <Button type="text" class="!text-white">{{ t("panel.theme.language") }}</Button>
+        <Button type="text" class="!text-foreground">{{ t("panel.theme.language") }}</Button>
         <template #overlay>
           <Menu>
             <Menu.Item :class="{ 'ant-menu-item-selected': locale === 'zh-CN' }" @click="setLocale('zh-CN')">{{ t("panel.theme.zhCN") }}</Menu.Item>
@@ -965,12 +965,12 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
 
       <Layout.Content class="relative min-h-0 min-w-0">
         <div class="flex h-full min-h-0 flex-col">
-          <div class="flex flex-wrap items-center gap-2 border-b bg-white px-3 py-2">
+          <div class="flex flex-wrap items-center gap-2 border-b border-border/60 bg-muted/15 px-3 py-1.5">
             <Input
               :value="displayProductName"
               size="small"
               @update:value="(value: string) => (productName = value)"
-              class="w-[200px]"
+              class="w-[180px]"
               :placeholder="t('panel.menubar.productName')"
             />
             <span class="text-xs text-gray-500">{{ t("panel.menubar.zoom") }}</span>
@@ -984,10 +984,35 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             />
             <Tag v-if="activeLayer">{{ activeLayer.name }}</Tag>
             <Tag color="blue">{{ t("panel.menubar.selectedCount", { count: selectedIds.length }) }}</Tag>
-            <div data-blueprint-toggle class="ml-auto flex items-center gap-2">
-              <span class="text-xs text-gray-500">{{ t("panel.menubar.blueprint") }}</span>
-              <Switch v-model:checked="blueprintOpen" size="small" />
-            </div>
+            <Tooltip :title="t('panel.menubar.showBlueprintPanel')">
+              <button
+                type="button"
+                data-blueprint-toggle
+                class="ml-auto inline-flex h-7 w-7 items-center justify-center rounded-md border transition-colors"
+                :class="
+                  blueprintOpen
+                    ? 'border-primary/50 bg-primary/15 text-primary'
+                    : 'border-border/70 bg-background/80 text-muted-foreground hover:bg-accent hover:text-accent-foreground'
+                "
+                :aria-pressed="blueprintOpen"
+                :aria-label="t('panel.menubar.showBlueprintPanel')"
+                @click="blueprintOpen = !blueprintOpen"
+              >
+                <svg
+                  viewBox="0 0 24 24"
+                  class="h-3.5 w-3.5"
+                  fill="none"
+                  stroke="currentColor"
+                  :stroke-width="blueprintOpen ? 2.2 : 2"
+                >
+                  <rect x="3" y="4" width="18" height="16" rx="2" />
+                  <circle cx="8" cy="10" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <circle cx="16" cy="10" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <circle cx="12" cy="16" r="1.5" :fill="blueprintOpen ? 'currentColor' : 'none'" />
+                  <path d="M9.2 10.8 10.8 14.2M14.8 10.8 13.2 14.2" />
+                </svg>
+              </button>
+            </Tooltip>
           </div>
 
           <WorkspaceStageSplit
@@ -1056,63 +1081,112 @@ onUnmounted(() => window.removeEventListener("keydown", onKeyDown));
             </PanelCanvas>
           </WorkspaceStageSplit>
 
-          <div class="border-t bg-white px-2 py-2">
-            <div class="mb-2 flex flex-wrap items-center gap-2">
-              <span class="text-xs font-semibold text-gray-500">{{ t("panel.layers.title") }}</span>
-              <Button size="small" @click="addLayer()">{{ t("panel.layers.addShort") }}</Button>
-              <Button size="small" :disabled="!canMergeLayers" @click="isMergingLayers = true">{{ t("panel.layers.mergeShort") }}</Button>
+          <div class="border-t border-border/50 bg-muted/5 px-1.5 py-0.5">
+            <div class="flex min-w-0 flex-wrap items-center gap-1">
+              <Tooltip :title="t('panel.layers.title')">
+                <span class="inline-flex h-6 items-center px-1 text-[11px] font-semibold text-muted-foreground">
+                  {{ t("panel.layers.title") }}
+                </span>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.add')">
+                <Button size="small" class="!h-6 !px-2 !text-[11px]" @click="addLayer()">
+                  {{ t("panel.layers.addShort") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="canMergeLayers ? t('panel.layers.merge') : t('panel.layers.mergeNeedTwo')">
+                <Button
+                  size="small"
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="!canMergeLayers"
+                  @click="isMergingLayers = true"
+                >
+                  {{ t("panel.layers.mergeShort") }}
+                </Button>
+              </Tooltip>
+              <Tabs
+                size="small"
+                class="min-w-0 flex-1"
+                :active-key="activeLayerId"
+                type="card"
+                @update:active-key="(k: string | number) => setActiveLayer(String(k))"
+              >
+                <Tabs.TabPane v-for="layer in layers" :key="layer.id">
+                  <template #tab>
+                    <span class="inline-flex max-w-[110px] items-center gap-1 text-[11px] font-medium">
+                      <span class="truncate">{{ layer.name }}</span>
+                      <Tag v-if="layer.isPrimary" color="green" class="!m-0 !px-1 !text-[10px]">
+                        {{ t("panel.layers.primary") }}
+                      </Tag>
+                    </span>
+                  </template>
+                </Tabs.TabPane>
+              </Tabs>
             </div>
-            <Tabs
-              size="small"
-              :active-key="activeLayerId"
-              type="card"
-              @update:active-key="(k: string | number) => setActiveLayer(String(k))"
+
+            <div
+              v-if="activeLayer"
+              class="mt-1 flex flex-wrap items-center gap-1 rounded-md border border-border/50 bg-card/80 px-1.5 py-0.5 text-[11px]"
             >
-              <Tabs.TabPane v-for="layer in layers" :key="layer.id">
-                <template #tab>
-                  <span class="inline-flex items-center gap-1">
-                    {{ layer.name }}
-                    <Tag v-if="layer.isMapping" color="blue" class="!m-0">{{ t("panel.layers.mapping") }}</Tag>
-                    <Tag v-if="layer.isPrimary" color="green" class="!m-0">{{ t("panel.layers.primary") }}</Tag>
-                  </span>
-                </template>
-              </Tabs.TabPane>
-            </Tabs>
-
-            <div v-if="activeLayer" class="mt-2 flex flex-wrap items-center gap-2 rounded border px-2 py-1.5 text-xs">
               <template v-if="editingLayerId === activeLayer.id">
                 <Input
                   v-model:value="editingLayerName"
                   size="small"
-                  class="w-40"
+                  class="!h-6 w-28"
                   @press-enter="commitRenameLayer"
                 />
-                <Button size="small" type="primary" @click="commitRenameLayer">{{ t("common.ok") }}</Button>
+                <Tooltip :title="t('common.ok')">
+                  <Button size="small" type="primary" class="!h-6 !px-2" @click="commitRenameLayer">
+                    {{ t("common.ok") }}
+                  </Button>
+                </Tooltip>
               </template>
               <template v-else>
-                <span class="font-medium">{{ activeLayer.name }}</span>
-                <Button size="small" type="link" @click="startRenameLayer(activeLayer.id, activeLayer.name)">{{ t("panel.layers.renameShort") }}</Button>
+                <span class="max-w-[100px] truncate font-semibold">{{ activeLayer.name }}</span>
+                <Tooltip :title="t('panel.layers.rename')">
+                  <Button
+                    size="small"
+                    type="link"
+                    class="!h-6 !px-1 !text-[11px]"
+                    @click="startRenameLayer(activeLayer.id, activeLayer.name)"
+                  >
+                    {{ t("panel.layers.renameShort") }}
+                  </Button>
+                </Tooltip>
               </template>
-              <Button size="small" @click="toggleLayerLock(activeLayer.id)">
-                {{ activeLayer.locked ? t("panel.layers.unlockShort") : t("panel.layers.lockShort") }}
-              </Button>
-              <Checkbox
-                :checked="Boolean(activeLayer.mergeSelected)"
-                @change="() => toggleLayerMergeSelected(activeLayer!.id)"
-              >
-                {{ t("panel.layers.joinMerge") }}
-              </Checkbox>
-              <Button size="small" :disabled="activeLayer.isPrimary" @click="setPrimaryLayer(activeLayer.id)">
-                {{ t("panel.layers.setPrimary") }}
-              </Button>
-              <Button
-                size="small"
-                danger
-                :disabled="!activeLayer.editable"
-                @click="deleteLayer(activeLayer.id)"
-              >
-                {{ t("panel.layers.delete") }}
-              </Button>
+              <Tooltip :title="activeLayer.locked ? t('panel.layers.unlock') : t('panel.layers.lock')">
+                <Button size="small" class="!h-6 !px-2 !text-[11px]" @click="toggleLayerLock(activeLayer.id)">
+                  {{ activeLayer.locked ? t("panel.layers.unlockShort") : t("panel.layers.lockShort") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.joinMerge')">
+                <Checkbox
+                  :checked="Boolean(activeLayer.mergeSelected)"
+                  @change="() => toggleLayerMergeSelected(activeLayer!.id)"
+                >
+                  <span class="text-[11px]">{{ t("panel.layers.joinMerge") }}</span>
+                </Checkbox>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.setPrimaryHint')">
+                <Button
+                  size="small"
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="activeLayer.isPrimary"
+                  @click="setPrimaryLayer(activeLayer.id)"
+                >
+                  {{ t("panel.layers.setPrimary") }}
+                </Button>
+              </Tooltip>
+              <Tooltip :title="t('panel.layers.delete')">
+                <Button
+                  size="small"
+                  danger
+                  class="!h-6 !px-2 !text-[11px]"
+                  :disabled="!activeLayer.editable"
+                  @click="deleteLayer(activeLayer.id)"
+                >
+                  {{ t("panel.layers.delete") }}
+                </Button>
+              </Tooltip>
             </div>
           </div>
         </div>

package/src/panel/components/ElementsLayer.vue

@@ -189,7 +189,7 @@ function hasViewEvent(el: PanelElement) {
     :class="[
       'absolute select-none',
       previewMode ? '' : 'rv-selectable',
-      !previewMode && selectedIds.includes(el.id) ? 'ring-2 ring-blue-500/90 ring-offset-0' : '',
+      !previewMode && selectedIds.includes(el.id) ? 'rv-node-selected' : '',
       hasViewEvent(el) ? 'cursor-pointer' : '',
     ]"
     :data-element-id="el.id"

package/src/panel/components/MaterialPreview.vue

@@ -4,20 +4,21 @@ const { t, locale } = useI18n();
 defineProps<{ id: string }>();
 
 const common =
-  "relative aspect-[4/3] w-full shrink-0 overflow-hidden rounded-md border border-border bg-gradient-to-br from-card to-muted/40";
+  "relative mx-auto aspect-[4/3] w-full shrink-0 overflow-hidden rounded-md border border-border/60 bg-gradient-to-br from-card to-muted/35";
+const previewStyle = "max-width: 88px; max-height: 64px";
 </script>
 
 <template>
-  <div v-if="id === 'bar'" :class="common">
-    <div class="absolute inset-0 grid grid-cols-5 items-end gap-1 px-2 pb-2 pt-1.5">
-      <div class="h-2 rounded-sm bg-primary/55" />
-      <div class="h-4 rounded-sm bg-primary/65" />
-      <div class="h-7 rounded-sm bg-primary/80" />
-      <div class="h-5 rounded-sm bg-primary/70" />
-      <div class="h-3 rounded-sm bg-primary/60" />
-    </div>
+  <div v-if="id === 'bar'" :class="common" :style="previewStyle">
+    <svg viewBox="0 0 80 60" class="h-full w-full" aria-hidden="true">
+      <rect x="8" y="40" width="8" height="12" rx="1.5" class="fill-primary/55" />
+      <rect x="22" y="30" width="8" height="22" rx="1.5" class="fill-primary/65" />
+      <rect x="36" y="16" width="8" height="36" rx="1.5" class="fill-primary/80" />
+      <rect x="50" y="24" width="8" height="28" rx="1.5" class="fill-primary/70" />
+      <rect x="64" y="34" width="8" height="18" rx="1.5" class="fill-primary/60" />
+    </svg>
   </div>
-  <div v-else-if="id === 'line' || id === 'area'" :class="common">
+  <div v-else-if="id === 'line' || id === 'area'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <polygon
         v-if="id === 'area'"
@@ -34,14 +35,14 @@ const common =
       />
     </svg>
   </div>
-  <div v-else-if="id === 'pie'" :class="common">
+  <div v-else-if="id === 'pie'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <circle cx="40" cy="30" r="16" class="fill-primary/20" />
       <path d="M40 30 L40 14 A16 16 0 0 1 55 39 Z" class="fill-primary/75" />
       <path d="M40 30 L55 39 A16 16 0 0 1 27 43 Z" class="fill-primary/45" />
     </svg>
   </div>
-  <div v-else-if="id === 'scatter'" :class="common">
+  <div v-else-if="id === 'scatter'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <circle cx="14" cy="42" r="2.5" class="fill-primary/80" />
       <circle cx="24" cy="34" r="2.5" class="fill-primary/70" />
@@ -50,27 +51,27 @@ const common =
       <circle cx="62" cy="14" r="2.5" class="fill-primary/85" />
     </svg>
   </div>
-  <div v-else-if="id === 'radar'" :class="common">
+  <div v-else-if="id === 'radar'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <polygon points="40,10 58,20 54,40 26,40 22,20" class="fill-primary/20 stroke-primary/60" />
       <polygon points="40,16 52,23 49,36 31,36 28,24" class="fill-primary/45 stroke-primary/80" />
     </svg>
   </div>
-  <div v-else-if="id === 'gauge'" :class="common">
+  <div v-else-if="id === 'gauge'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <path d="M12 44a28 28 0 0 1 56 0" class="fill-none stroke-primary/35" stroke-width="6" />
       <path d="M12 44a28 28 0 0 1 40-24" class="fill-none stroke-primary/80" stroke-width="6" />
       <line x1="40" y1="44" x2="54" y2="28" class="stroke-primary" stroke-width="2" />
     </svg>
   </div>
-  <div v-else-if="id === 'funnel'" :class="common">
+  <div v-else-if="id === 'funnel'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <polygon points="10,10 70,10 58,22 22,22" class="fill-primary/80" />
       <polygon points="22,24 58,24 50,34 30,34" class="fill-primary/65" />
       <polygon points="30,36 50,36 44,44 36,44" class="fill-primary/50" />
     </svg>
   </div>
-  <div v-else-if="id === 'text'" :class="common">
+  <div v-else-if="id === 'text'" :class="common" :style="previewStyle">
     <div class="space-y-1.5 px-2 py-2">
       <div class="h-2 w-10 rounded bg-primary/70" />
       <div class="h-1.5 w-full rounded bg-muted-foreground/45" />
@@ -78,7 +79,7 @@ const common =
       <div class="h-1.5 w-8/12 rounded bg-muted-foreground/45" />
     </div>
   </div>
-  <div v-else-if="id === 'table'" :class="common">
+  <div v-else-if="id === 'table'" :class="common" :style="previewStyle">
     <div class="absolute inset-0 flex flex-col gap-1 p-2">
       <div class="grid h-3 flex-none grid-cols-3 gap-1">
         <div class="rounded-sm bg-primary/75" />
@@ -94,10 +95,10 @@ const common =
       </div>
     </div>
   </div>
-  <div v-else-if="id === 'rect'" :class="common">
+  <div v-else-if="id === 'rect'" :class="common" :style="previewStyle">
     <div class="absolute inset-2 rounded-md border-2 border-primary/80 bg-primary/15" />
   </div>
-  <div v-else-if="id === 'geometry'" :class="common">
+  <div v-else-if="id === 'geometry'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <circle cx="22" cy="18" r="8" class="fill-primary/75" />
       <rect x="36" y="10" width="16" height="16" rx="3" class="fill-primary/55" />
@@ -106,7 +107,7 @@ const common =
       <polygon points="50,36 54,42 50,48 42,48 38,42 42,36" class="fill-primary/70" />
     </svg>
   </div>
-  <div v-else-if="id === 'scene3d'" :class="common">
+  <div v-else-if="id === 'scene3d'" :class="common" :style="previewStyle">
     <svg viewBox="0 0 80 60" class="h-full w-full">
       <polygon points="40,8 62,22 62,44 40,56 18,44 18,22" class="fill-primary/20 stroke-primary/80" stroke-width="1.5" />
       <polygon points="40,8 62,22 40,32 18,22" class="fill-primary/45" />
@@ -114,13 +115,13 @@ const common =
       <polygon points="40,32 18,22 18,44 40,56" class="fill-primary/55" />
     </svg>
   </div>
-  <div v-else-if="id === 'reference'" :class="common">
+  <div v-else-if="id === 'reference'" :class="common" :style="previewStyle">
     <div class="absolute inset-2 rounded-md border border-dashed border-primary/70 bg-primary/10" />
     <div class="absolute inset-0 flex items-center justify-center text-[10px] text-primary/80">
       {{ t("panel.material.reference") }}
     </div>
   </div>
-  <div v-else-if="id === 'image'" :class="common">
+  <div v-else-if="id === 'image'" :class="common" :style="previewStyle">
     <div class="absolute inset-0 bg-gradient-to-br from-primary/25 via-muted/60 to-card" />
     <svg viewBox="0 0 80 60" class="absolute inset-0 h-full w-full">
       <circle cx="16" cy="14" r="5" class="fill-primary/70" />
@@ -128,7 +129,7 @@ const common =
       <polygon points="0,60 18,42 30,54 44,36 62,60" class="fill-primary/55" />
     </svg>
   </div>
-  <div v-else-if="id === 'video'" :class="common">
+  <div v-else-if="id === 'video'" :class="common" :style="previewStyle">
     <div class="absolute inset-0 bg-primary/12" />
     <div class="absolute left-2 right-2 top-2 h-1.5 rounded bg-primary/35" />
     <div class="absolute inset-0 flex items-center justify-center">
@@ -139,7 +140,7 @@ const common =
       </div>
     </div>
   </div>
-  <div v-else-if="id === 'audio'" :class="common">
+  <div v-else-if="id === 'audio'" :class="common" :style="previewStyle">
     <div class="absolute inset-0 flex items-center justify-center gap-1">
       <div class="h-3 w-1.5 rounded bg-primary/50" />
       <div class="h-6 w-1.5 rounded bg-primary/75" />
@@ -148,7 +149,7 @@ const common =
       <div class="h-4 w-1.5 rounded bg-primary/55" />
     </div>
   </div>
-  <div v-else-if="id === 'grid'" :class="common">
+  <div v-else-if="id === 'grid'" :class="common" :style="previewStyle">
     <div class="absolute inset-0 grid grid-cols-3 grid-rows-2 gap-1.5 p-2">
       <div
         v-for="idx in 6"
@@ -157,7 +158,7 @@ const common =
       />
     </div>
   </div>
-  <div v-else-if="id === 'viewport'" :class="common">
+  <div v-else-if="id === 'viewport'" :class="common" :style="previewStyle">
     <div class="absolute inset-1.5 overflow-hidden rounded-sm border border-primary/70 bg-primary/10">
       <div class="absolute left-1 top-1 h-6 w-8 rounded-[2px] bg-primary/45" />
       <div class="absolute left-6 top-4 h-7 w-10 rounded-[2px] bg-primary/30" />
@@ -165,5 +166,5 @@ const common =
       <div class="absolute bottom-0 right-0 top-2 w-1.5 rounded-l bg-primary/40" />
     </div>
   </div>
-  <div v-else :class="common" />
+  <div v-else :class="common" :style="previewStyle" />
 </template>