From 69c9fe2b0af1868443140828a6b308a34fc2f488 Mon Sep 17 00:00:00 2001
From: norbiros <norbiros@protonmail.com>
Date: Wed, 15 Jul 2026 21:03:33 +0200
Subject: [PATCH] feat(core): add component preview zoom controls

---
 packages/core/src/runtime/root.vue         | 36 ++++++++++++----------
 packages/core/src/types.ts                 |  3 ++
 packages/devtools/app/pages/components.vue | 29 +++++++++++++++++
 3 files changed, 52 insertions(+), 16 deletions(-)

diff --git a/packages/core/src/runtime/root.vue b/packages/core/src/runtime/root.vue
index f908a9db..9474424d 100644
--- a/packages/core/src/runtime/root.vue
+++ b/packages/core/src/runtime/root.vue
@@ -55,6 +55,7 @@ if (import.meta.hot) {
 
 const showGrid = ref(false)
 const gridGap = ref(8)
+const zoom = ref(1)
 
 const colorMode = useColorMode()
 const hooks = shallowRef<Hookable<CompodiumHooks>>()
@@ -70,6 +71,7 @@ onMounted(() => {
     showGrid.value = payload.enabled
     gridGap.value = payload.gap
   })
+  hooks.value.hook('renderer:zoom', scale => zoom.value = scale)
 
   hooks.value.hook('renderer:set-color', color => colorMode.value = color)
   hooks.value.callHook('renderer:mounted')
@@ -90,22 +92,24 @@ onMounted(() => {
       id="__compodium-root"
       :style="{ position: 'relative', minWidth: '100vw', minHeight: '100vh' }"
     >
-      <PreviewComponent>
-        <RendererWrapper :wrapper="wrapper">
-          <RendererCombo
-            :combo="combo"
-            :props
-            #="{ props: comboProps }"
-          >
-            <component
-              :is="component"
-              v-if="component"
-              v-bind="comboProps"
-              v-on="eventHandlers"
-            />
-          </RendererCombo>
-        </RendererWrapper>
-      </PreviewComponent>
+      <div :style="{ transform: `scale(${zoom})`, transformOrigin: 'center' }">
+        <PreviewComponent>
+          <RendererWrapper :wrapper="wrapper">
+            <RendererCombo
+              :combo="combo"
+              :props
+              #="{ props: comboProps }"
+            >
+              <component
+                :is="component"
+                v-if="component"
+                v-bind="comboProps"
+                v-on="eventHandlers"
+              />
+            </RendererCombo>
+          </RendererWrapper>
+        </PreviewComponent>
+      </div>
 
       <RendererGrid
         v-if="showGrid"
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index eb9b79f5..713ec0c6 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -186,6 +186,9 @@ export interface CompodiumHooks {
 
   // Toggle the renderer grid
   'renderer:grid': (payload: { enabled: boolean, gap: number }) => void
+
+  // Scale the rendered component without scaling the devtools UI
+  'renderer:zoom': (scale: number) => void
 }
 
 declare global {
diff --git a/packages/devtools/app/pages/components.vue b/packages/devtools/app/pages/components.vue
index 22b7202d..66dca098 100644
--- a/packages/devtools/app/pages/components.vue
+++ b/packages/devtools/app/pages/components.vue
@@ -6,6 +6,15 @@ import { getEnumOptions } from '~/utils/enum'
 
 const { hooks } = useCompodiumClient()
 const rendererMounted = ref(false)
+const zoom = ref(1)
+const zoomMin = 0.25
+const zoomMax = 4
+const zoomStep = 0.25
+
+function updateZoom(value: number) {
+  zoom.value = Math.min(zoomMax, Math.max(zoomMin, value))
+  hooks.callHook('renderer:zoom', zoom.value)
+}
 
 const events = ref<{ name: string, data?: any }[]>([])
 
@@ -32,6 +41,7 @@ hooks.hook('renderer:mounted', () => {
   })
 
   updateComponent()
+  updateZoom(zoom.value)
 })
 
 const { data: collections, refresh: refreshCollections } = useAsyncData(async () => {
@@ -224,6 +234,25 @@ const tabs = computed(() => {
         </div>
 
         <div class="flex gap-2 justify-end">
+          <UInputNumber
+            v-model="zoom"
+            :min="zoomMin"
+            :max="zoomMax"
+            :step="zoomStep"
+            :format-options="{ style: 'percent' }"
+            :disabled="!rendererMounted"
+            color="neutral"
+            variant="none"
+            size="sm"
+            aria-label="Component zoom"
+            class="w-28"
+            :ui="{
+              root: 'rounded-full border border-default bg-default',
+              base: 'rounded-full tabular-nums'
+            }"
+            @update:model-value="updateZoom"
+          />
+
           <UTooltip
             text="Open docs"
             :content="{ side: 'left' }"