@blokkli/editor 2.0.0-alpha.22 → 2.0.0-alpha.24

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue

@@ -12,34 +12,36 @@
       class="bk-selection-add-overlay-list bk-scrollbar-dark"
       @wheel="onWheel"
     >
-      <button
+      <AddListItem
         v-for="item in items"
+        :id="item.bundle"
         :key="item.bundle"
+        context="selection-add-buttons"
+        :label="item.label"
+        :bundle="item.bundle"
+        :color="item.isFavorite ? 'yellow' : void 0"
         tabindex="-1"
         @click.prevent="$emit('select', item.bundle)"
-      >
-        <AddListItemIcon
-          :bundle="item.bundle"
-          :color="item.isFavorite ? 'yellow' : 'default'"
-        />
-        <span>{{ item.label }}</span>
-      </button>
-      <button
+      />
+      <AddListItem
         v-for="action in actions"
+        :id="action.id"
         :key="'action:' + action.id"
         tabindex="-1"
-        @click.prevent="$emit('action', action.id)"
-      >
-        <AddListItemIcon :icon="action.icon" :color="action.color" />
-        <span>{{ action.title }}</span>
-      </button>
+        context="selection-add-buttons"
+        :icon="action.icon"
+        :label="action.title"
+        :color="action.color"
+        no-context-menu
+        @click.prevent="$emit('action', action)"
+      />
     </div>
   </ArtboardTooltip>
 </template>
 
 <script setup>
 import { useTemplateRef, useBlokkli, computed } from "#imports";
-import { AddListItemIcon, ArtboardTooltip } from "#blokkli/components";
+import { ArtboardTooltip, AddListItem } from "#blokkli/components";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 const props = defineProps({
   bundles: { type: Array, required: true },
@@ -66,7 +68,7 @@ const items = computed(() => {
   });
 });
 const actions = computed(() => {
-  return plugins.getAddActions().filter((action) => {
+  return plugins.get("addAction").filter((action) => {
     if (!action.itemBundle) {
       return true;
     }
@@ -79,7 +81,9 @@ const onWheel = (e) => {
     hasScrollbar = element && element.scrollHeight > element.clientHeight;
   }
   if (hasScrollbar) {
-    e.stopPropagation();
+    if (!e.ctrlKey && !e.metaKey) {
+      e.stopPropagation();
+    }
   }
 };
 </script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Overlay/index.vue.d.ts

@@ -1,17 +1,17 @@
-import type { Coord } from '#blokkli/types';
+import type { AddAction, Coord } from '#blokkli/types';
 type __VLS_Props = {
     bundles: string[];
     anchorEl?: HTMLElement;
     anchorCoordinates?: Coord;
     label: string;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (id: string) => void;
-    select: (id: string) => void;
-    close: () => void;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    select: (id: string) => any;
+    close: () => any;
+    action: (action: AddAction) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((id: string) => any) | undefined;
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onAction?: ((action: AddAction) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/fragment.glsl

@@ -1,11 +1,18 @@
+#version 300 es
+
 precision highp float;
 
-varying vec4 v_quad;
-varying vec2 v_circle_center;
-varying float v_visible;
-varying float v_is_hovered;
-varying float v_scale_fade;
-varying float v_rect_id;
+in vec4 v_quad;
+in vec2 v_circle_center;
+in float v_visible;
+in float v_is_hovered;
+in float v_scale_fade;
+in float v_rect_id;
+in float v_radius;
+in float v_inner_radius;
+in float v_scale_factor;
+
+out vec4 fragColor;
 
 uniform float u_dpi;
 uniform vec3 u_color;
@@ -23,14 +30,9 @@ void main() {
   vec2 pixelPos = gl_FragCoord.xy;
   float dist = distance(pixelPos, v_circle_center);
 
-  // Circle radius (includes border)
-  float radius = v_quad.z / 2.0;
-
-  // Border width in pixels (must match vertex shader) - scaled by DPI
-  float borderWidth = 4.0 * u_dpi;
-
-  // Inner circle radius (without border)
-  float innerRadius = radius - borderWidth;
+  // Circle radii passed from vertex shader (in viewport pixels)
+  float radius = v_radius;
+  float innerRadius = v_inner_radius;
 
   // Anti-aliased circle
   float edgeSoftness = 1.0 * u_dpi;
@@ -46,9 +48,9 @@ void main() {
   // Plus dimensions relative to inner circle radius
   // Reduce thickness at low DPI (zoomed out)
   float plusThicknessBase = u_dpi <= 0.5 ? 1.25 : 1.5;
-  float plusThickness = plusThicknessBase * u_dpi;
+  float plusThickness = plusThicknessBase * u_dpi * v_scale_factor;
   float plusLength = innerRadius * 0.5; // 50% of inner radius
-  float plusSoftness = 0.25 * u_dpi;
+  float plusSoftness = 0.25 * u_dpi * v_scale_factor;
 
   // Calculate soft plus factor (0 = not plus, 1 = fully plus)
   float horizontalDist = max(abs(offset.y) - plusThickness, 0.0);
@@ -102,5 +104,5 @@ void main() {
   }
 
   // Apply scale fade to alpha
-  gl_FragColor = vec4(finalColor, alpha);
+  fragColor = vec4(finalColor, alpha);
 }

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/index.vue

@@ -20,7 +20,11 @@
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import { useBlokkli, computed, ref } from "#imports";
-import { setBuffersAndAttributes, drawBufferInfo, setUniforms } from "twgl.js";
+import {
+  setBuffersAndAttributes,
+  drawBufferInfo,
+  setUniforms
+} from "twgl.js";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import { RectangleBufferCollector } from "#blokkli/helpers/webgl";
@@ -113,44 +117,26 @@ const tooltipData = computed(() => {
   return { x: screenX, y: screenY, transform, position, text, isField };
 });
 const emit = defineEmits(["toggle", "toggleField"]);
-const gl = animation.gl();
-const programInfo = gl ? animation.registerProgram("add-buttons", gl, [vs, fs]) : null;
 const MAX_CIRCLES = 10;
 const BUTTON_RADIUS = 12;
 const TOOLTIP_MARGIN = 20;
-let bufferInfo = null;
-if (gl) {
-  class CircleBufferCollector extends RectangleBufferCollector {
-  }
-  const collector = new CircleBufferCollector(gl);
-  for (let i = 0; i < MAX_CIRCLES; i++) {
-    collector.addRectangle(
-      {
-        id: `circle-${i}`,
-        x: 0,
-        y: 0,
-        width: 40,
-        height: 40
-      },
-      i
-    );
-  }
-  bufferInfo = collector.createBufferInfo();
+class CircleBufferCollector extends RectangleBufferCollector {
 }
+let bufferInfoCache = null;
 const circlePositions = new Float32Array(MAX_CIRCLES * 2);
 const circleVisible = new Float32Array(MAX_CIRCLES);
 const hoveredCircle = ref(-1);
 const color = computed(() => {
-  return toShaderColor(theme.accent.value[600]);
+  return theme.accent.value[600];
 });
 const colorHover = computed(() => {
-  return toShaderColor(theme.accent.value[500]);
+  return theme.accent.value[500];
 });
 const colorField = computed(() => {
-  return toShaderColor(theme.accent.value[400]);
+  return theme.accent.value[400];
 });
 const colorFieldHover = computed(() => {
-  return toShaderColor(theme.accent.value[300]);
+  return theme.accent.value[300];
 });
 const orientationCache = /* @__PURE__ */ new Map();
 const currentOrientation = ref("horizontal");
@@ -310,127 +296,252 @@ function getCircleAtPoint(x, y) {
   }
   return -1;
 }
-if (gl && programInfo && bufferInfo) {
-  defineRenderer("add-buttons", {
-    zIndex: 1e3,
-    enabled: () => {
-      if (selection.uuids.value.length !== 1) {
-        return false;
-      }
-      if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
-        return false;
-      }
-      if (ui.hasTransformOverlayOpen.value) {
-        return false;
+const { collector } = defineRenderer("add-buttons", {
+  zIndex: 1e3,
+  collector: () => {
+    const c = new CircleBufferCollector();
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      c.addRectangle(
+        {
+          id: `circle-${i}`,
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 40
+        },
+        i
+      );
+    }
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
+  enabled: () => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    if (ui.openTooltip.value && ui.openTooltip.value !== "add-buttons") {
+      return false;
+    }
+    if (ui.hasTransformOverlayOpen.value) {
+      return false;
+    }
+    return true;
+  },
+  cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
+  onClick: ({ mouseArtboard }) => {
+    if (selection.uuids.value.length !== 1) {
+      return false;
+    }
+    const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
+    if (clickedCircle >= 0) {
+      const cx = circlePositions[clickedCircle * 2];
+      const cy = circlePositions[clickedCircle * 2 + 1];
+      if (clickedCircle === 0 || clickedCircle === 1) {
+        const position = clickedCircle === 0 ? "before" : "after";
+        emit("toggle", {
+          position,
+          coordinates: { x: cx, y: cy }
+        });
+      } else {
+        const fieldIndex = clickedCircle - 2;
+        emit("toggleField", {
+          index: fieldIndex,
+          coordinates: { x: cx, y: cy }
+        });
       }
       return true;
-    },
-    cursor: () => hoveredCircle.value >= 0 ? "pointer" : null,
-    onClick: ({ mouseArtboard }) => {
-      if (selection.uuids.value.length !== 1) {
-        return false;
+    }
+    return false;
+  },
+  render: (ctx, gl, program) => {
+    if (!bufferInfoCache) {
+      bufferInfoCache = collector.createBufferInfo(gl);
+    }
+    if (!bufferInfoCache) {
+      return;
+    }
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    if (blockState.canShowBeforeAfter) {
+      const blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
+        return;
       }
-      const clickedCircle = getCircleAtPoint(mouseArtboard.x, mouseArtboard.y);
-      if (clickedCircle >= 0) {
-        const cx = circlePositions[clickedCircle * 2];
-        const cy = circlePositions[clickedCircle * 2 + 1];
-        if (clickedCircle === 0 || clickedCircle === 1) {
-          const position = clickedCircle === 0 ? "before" : "after";
-          emit("toggle", {
-            position,
-            coordinates: { x: cx, y: cy }
-          });
-        } else {
-          const fieldIndex = clickedCircle - 2;
-          emit("toggleField", {
-            index: fieldIndex,
-            coordinates: { x: cx, y: cy }
-          });
-        }
-        return true;
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
       }
-      return false;
-    },
-    render: (ctx) => {
-      if (selection.isChangingOptions.value) {
-        return;
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
+        }
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
+        }
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
+        circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
+        circleVisible[circleIndex] = 1;
       }
-      circleVisible.fill(0);
-      if (ctx.selectedUuids.length !== 1) {
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    gl.useProgram(program.program);
+    setUniforms(program, {
+      u_circle_positions: circlePositions,
+      u_circle_visible: circleVisible,
+      u_color: toShaderColor(color.value),
+      u_color_hover: toShaderColor(colorHover.value),
+      u_color_field: toShaderColor(colorField.value),
+      u_color_field_hover: toShaderColor(colorFieldHover.value),
+      u_hovered_circle: hoveredCircle.value,
+      u_radius: BUTTON_RADIUS,
+      u_scale_transition: ctx.changeOptionsTransition
+    });
+    animation.setSharedUniforms(gl, program);
+    setBuffersAndAttributes(gl, program, bufferInfoCache);
+    drawBufferInfo(gl, bufferInfoCache, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    circleVisible.fill(0);
+    if (ctx.selectedUuids.length !== 1) {
+      return;
+    }
+    const uuid = ctx.selectedUuids[0];
+    if (!uuid) {
+      return;
+    }
+    const blockState = getBlockState(uuid);
+    if (blockState.canShowBeforeAfter) {
+      const blockRect = dom.getBlockRect(uuid);
+      if (!blockRect || blockRect.width === 0) {
         return;
       }
-      const uuid = ctx.selectedUuids[0];
-      if (!uuid) {
-        return;
+      const orientation = getOrientationForUuid(uuid);
+      currentOrientation.value = orientation;
+      const BUTTON_SHIFT = 2 / ctx.artboardScale;
+      if (orientation === "horizontal") {
+        circlePositions[0] = blockRect.x - BUTTON_SHIFT;
+        circlePositions[1] = blockRect.y + blockRect.height / 2;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
+        circlePositions[3] = blockRect.y + blockRect.height / 2;
+        circleVisible[1] = 1;
+      } else {
+        circlePositions[0] = blockRect.x + blockRect.width / 2;
+        circlePositions[1] = blockRect.y - BUTTON_SHIFT;
+        circleVisible[0] = 1;
+        circlePositions[2] = blockRect.x + blockRect.width / 2;
+        circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
+        circleVisible[1] = 1;
       }
-      const blockState = getBlockState(uuid);
-      if (blockState.canShowBeforeAfter) {
-        const blockRect = dom.getBlockRect(uuid);
-        if (!blockRect || blockRect.width === 0) {
-          return;
+    }
+    currentUuid.value = uuid;
+    currentBundleLabel.value = blockState.bundleLabel;
+    currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
+    if (blockState.emptyFieldKeys.length > 0) {
+      emptyFieldTooltips.value = blockState.emptyFieldTooltips;
+      for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
+        const fieldKey = blockState.emptyFieldKeys[i];
+        if (!fieldKey) {
+          continue;
         }
-        const orientation = getOrientationForUuid(uuid);
-        currentOrientation.value = orientation;
-        const BUTTON_SHIFT = 2 / ctx.artboardScale;
-        if (orientation === "horizontal") {
-          circlePositions[0] = blockRect.x - BUTTON_SHIFT;
-          circlePositions[1] = blockRect.y + blockRect.height / 2;
-          circleVisible[0] = 1;
-          circlePositions[2] = blockRect.x + blockRect.width + BUTTON_SHIFT;
-          circlePositions[3] = blockRect.y + blockRect.height / 2;
-          circleVisible[1] = 1;
-        } else {
-          circlePositions[0] = blockRect.x + blockRect.width / 2;
-          circlePositions[1] = blockRect.y - BUTTON_SHIFT;
-          circleVisible[0] = 1;
-          circlePositions[2] = blockRect.x + blockRect.width / 2;
-          circlePositions[3] = blockRect.y + blockRect.height + BUTTON_SHIFT;
-          circleVisible[1] = 1;
+        const fieldRect = dom.getFieldRect(fieldKey);
+        if (!fieldRect) {
+          continue;
         }
+        const circleIndex = i + 2;
+        circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
+        circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
+        circleVisible[circleIndex] = 1;
       }
-      currentUuid.value = uuid;
-      currentBundleLabel.value = blockState.bundleLabel;
-      currentSingleAllowedBundleLabel.value = blockState.singleAllowedBundleLabel;
-      if (blockState.emptyFieldKeys.length > 0) {
-        emptyFieldTooltips.value = blockState.emptyFieldTooltips;
-        for (let i = 0; i < blockState.emptyFieldKeys.length && i < 8; i++) {
-          const fieldKey = blockState.emptyFieldKeys[i];
-          if (!fieldKey) {
-            continue;
-          }
-          const fieldRect = dom.getFieldRect(fieldKey);
-          if (!fieldRect) {
-            continue;
-          }
-          const circleIndex = i + 2;
-          circlePositions[circleIndex * 2] = fieldRect.x + fieldRect.width / 2;
-          circlePositions[circleIndex * 2 + 1] = fieldRect.y + fieldRect.height / 2;
-          circleVisible[circleIndex] = 1;
-        }
+    } else {
+      emptyFieldTooltips.value = [];
+    }
+    hoveredCircle.value = getCircleAtPoint(
+      ctx.mouseArtboard.x,
+      ctx.mouseArtboard.y
+    );
+    const rgbToCss = (rgb) => {
+      return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+    };
+    const borderWidth = 2 * ctx.dpi;
+    const radius = BUTTON_RADIUS * ctx.dpi * ctx.changeOptionsTransition;
+    const innerRadius = radius - borderWidth;
+    for (let i = 0; i < MAX_CIRCLES; i++) {
+      if (circleVisible[i] <= 0) {
+        continue;
+      }
+      const artboardX = circlePositions[i * 2];
+      const artboardY = circlePositions[i * 2 + 1];
+      const viewportX = (artboardX * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi;
+      const viewportY = (artboardY * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi;
+      const isFieldButton = i >= 2;
+      const isHovered = hoveredCircle.value === i;
+      let fillColor;
+      if (isFieldButton) {
+        fillColor = isHovered ? colorFieldHover.value : colorField.value;
       } else {
-        emptyFieldTooltips.value = [];
+        fillColor = isHovered ? colorHover.value : color.value;
       }
-      hoveredCircle.value = getCircleAtPoint(
-        ctx.mouseArtboard.x,
-        ctx.mouseArtboard.y
+      ctx2d.fillStyle = rgbToCss(fillColor);
+      ctx2d.strokeStyle = "rgb(255, 255, 255)";
+      ctx2d.lineWidth = borderWidth;
+      ctx2d.beginPath();
+      ctx2d.arc(viewportX, viewportY, radius, 0, Math.PI * 2);
+      ctx2d.fill();
+      ctx2d.stroke();
+      const plusThickness = (ctx.dpi <= 0.5 ? 1.25 : 1.5) * ctx.dpi;
+      const plusLength = innerRadius * 0.5;
+      ctx2d.fillStyle = "rgb(255, 255, 255)";
+      ctx2d.fillRect(
+        viewportX - plusLength,
+        viewportY - plusThickness,
+        plusLength * 2,
+        plusThickness * 2
+      );
+      ctx2d.fillRect(
+        viewportX - plusThickness,
+        viewportY - plusLength,
+        plusThickness * 2,
+        plusLength * 2
       );
-      gl.useProgram(programInfo.program);
-      setUniforms(programInfo, {
-        u_circle_positions: circlePositions,
-        u_circle_visible: circleVisible,
-        u_color: color.value,
-        u_color_hover: colorHover.value,
-        u_color_field: colorField.value,
-        u_color_field_hover: colorFieldHover.value,
-        u_hovered_circle: hoveredCircle.value,
-        u_radius: BUTTON_RADIUS
-      });
-      animation.setSharedUniforms(gl, programInfo);
-      setBuffersAndAttributes(gl, programInfo, bufferInfo);
-      drawBufferInfo(gl, bufferInfo, gl.TRIANGLES);
     }
-  });
-}
+  }
+});
 </script>
 
 <script>

package/dist/runtime/components/Edit/Features/Selection/AddButtons/Renderer/vertex.glsl

@@ -1,10 +1,12 @@
+#version 300 es
+
 precision highp float;
 
 // [x, y] position.
-attribute vec2 a_position;
+in vec2 a_position;
 // The [x,y,width, height] of the quad the vertex belongs to.
-attribute vec4 a_quad;
-attribute float a_rect_id;
+in vec4 a_quad;
+in float a_rect_id;
 
 // The global scaling applied to all quads.
 uniform float u_scale;
@@ -14,6 +16,8 @@ uniform float u_offset_x;
 // The amount of pixels to offset on the y axis.
 uniform float u_offset_y;
 uniform vec2 u_resolution;
+// Scale transition for change options animation
+uniform float u_scale_transition;
 
 // Circle positions (10 vec2s = 20 floats)
 uniform vec2 u_circle_positions[10];
@@ -25,12 +29,15 @@ uniform float u_hovered_circle;
 uniform float u_radius;
 
 // The transformed quad for the fragment shader.
-varying vec4 v_quad;
-varying vec2 v_circle_center;
-varying float v_visible;
-varying float v_is_hovered;
-varying float v_scale_fade;
-varying float v_rect_id;
+out vec4 v_quad;
+out vec2 v_circle_center;
+out float v_visible;
+out float v_is_hovered;
+out float v_scale_fade;
+out float v_rect_id;
+out float v_radius;
+out float v_inner_radius;
+out float v_scale_factor;
 
 void main() {
   int rectId = int(a_rect_id);
@@ -49,13 +56,23 @@ void main() {
     v_scale_fade = clamp(v_scale_fade, 0.0, 1.0);
   }
 
+  // Combined scale factor for fragment shader
+  v_scale_factor = v_scale_fade * u_scale_transition;
+
   // Border width in pixels (must match fragment shader)
-  float borderWidth = 4.0;
+  float borderWidth = 2.0;
 
   // Circle radius in artboard space - apply inverse scaling to keep constant size
-  // Then multiply by fade factor
+  // Then multiply by fade factor and scale transition
   // Add border width to the radius so the border renders outside
-  float radius = (u_radius + borderWidth) / u_scale * v_scale_fade;
+  float radius =
+    (u_radius + borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+  float innerRadius =
+    (u_radius - borderWidth) / u_scale * v_scale_fade * u_scale_transition;
+
+  // Pass scaled radii to fragment shader (in viewport pixels)
+  v_radius = radius * u_scale * u_dpi;
+  v_inner_radius = innerRadius * u_scale * u_dpi;
 
   // Calculate quad bounds centered on circle position
   float left = circlePos.x - radius;