@blokkli/editor 2.0.0-alpha.21 → 2.0.0-alpha.23

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/fragment.glsl

@@ -9,6 +9,13 @@ in vec3 v_color_default;
 in vec3 v_color_active;
 in float v_rect_id;
 
+// Optimized inputs - values computed once per vertex instead of per pixel
+in vec2 v_size;
+in vec2 v_location;
+in float v_thickness;
+in float v_edge_softness;
+in float v_radius;
+
 out vec4 fragColor;
 
 uniform float u_time;
@@ -45,32 +52,11 @@ void main() {
     return;
   }
 
-  // Selectable blocks.
-  float radius_base = 2.0 * u_scale;
-  float thickness = max(min(1.0 * u_scale, 3.0), 0.5);
-  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * thickness;
-
-  float u_rect_x = v_quad.x + inset;
-  float u_rect_y = v_quad.y + inset;
-  float u_rectWidth = v_quad.z - 2.0 * inset;
-  float u_rectHeight = v_quad.w - 2.0 * inset;
-
-  vec2 size = vec2(u_rectWidth, u_rectHeight);
-
-  float x = u_rect_x;
-  float y = u_rect_y;
-  vec2 offsetPosition = vec2(x + size.x / 2.0, y + size.y / 2.0);
-
-  vec2 location = vec2(offsetPosition);
-
-  float edgeSoftness = 1.0 * u_dpi;
-  float radius =
-    min(radius_base * u_dpi, min(size.x, size.y) / 2.0) + thickness * 2.0;
-
+  // Selectable blocks - using pre-computed values from vertex shader
   float distance = roundedBoxSDF(
-    location - gl_FragCoord.xy,
-    size / 2.0,
-    radius
+    v_location - gl_FragCoord.xy,
+    v_size / 2.0,
+    v_radius
   );
 
   bool is_intersecting = v_intersecting >= 0.5;
@@ -79,7 +65,8 @@ void main() {
   float mixedDistance = is_intersecting ? distance : abs(distance);
 
   float smoothedAlpha =
-    1.0 - smoothstep(-edgeSoftness, edgeSoftness, mixedDistance - thickness);
+    1.0 -
+    smoothstep(-v_edge_softness, v_edge_softness, mixedDistance - v_thickness);
 
   fragColor = vec4(
     color,

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/index.vue

@@ -22,13 +22,15 @@ const logger = useDebugLogger();
 const props = defineProps({
   startX: { type: Number, required: true },
   startY: { type: Number, required: true },
-  isPressingControl: { type: Boolean, required: true },
-  gl: { type: null, required: true }
+  isPressingControl: { type: Boolean, required: true }
 });
 const startTimestamp = Date.now();
 defineEmits(["select"]);
 class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
-  getBufferInfo(offset, scale) {
+  getBufferInfo(gl, offset, scale) {
+    if (!offset || !scale) {
+      return { info: this.bufferInfo, hasChanged: false };
+    }
     const visibleBlocks = dom.getVisibleBlocks();
     const lengthBefore = this.positions.length;
     for (let i = 0; i < visibleBlocks.length; i++) {
@@ -63,8 +65,8 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
       );
     }
     const hasChanged = lengthBefore !== this.positions.length;
-    if (hasChanged) {
-      this.bufferInfo = this.createBufferInfo();
+    if (hasChanged && gl) {
+      this.bufferInfo = this.createBufferInfo(gl);
     }
     return { info: this.bufferInfo, hasChanged };
   }
@@ -95,68 +97,11 @@ class MultiSelectRectangleBufferCollector extends RectangleBufferCollector {
     return false;
   }
 }
-const collector = new MultiSelectRectangleBufferCollector(props.gl);
-const thick = 300;
-collector.addRectangle(
-  {
-    width: 1e3,
-    height: thick,
-    x: 100,
-    y: 100,
-    id: "select-rect-top",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: thick,
-    height: 1e3,
-    x: 1e3 + thick,
-    y: thick,
-    id: "select-rect-right",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: 1e3,
-    height: thick,
-    x: 100 + thick,
-    y: 1e3 + thick,
-    id: "select-rect-bottom",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
-collector.addRectangle(
-  {
-    width: thick,
-    height: 1e3,
-    x: 100,
-    y: 100 + thick,
-    id: "select-rect-left",
-    isNested: false,
-    radius: [0, 0, 0, 0]
-  },
-  0
-);
 const artboardOffsetStart = { ...ui.artboardOffset.value };
 const artboardScaleStart = ui.artboardScale.value;
-const programInfo = animation.registerProgram(
-  "multi_select_overlay",
-  props.gl,
-  [vs, fs]
-);
 const uniforms = {
-  u_color_field_active: toShaderColor(theme.accent.value[700]),
-  u_color_field_default: toShaderColor(theme.mono.value[400]),
-  u_color_area_active: toShaderColor(theme.teal.value.normal),
-  u_color_area_default: toShaderColor(theme.teal.value.normal)
+  u_color_field_active: theme.accent.value[700],
+  u_color_field_default: theme.mono.value[400]
 };
 let mouseX = 0;
 let mouseY = 0;
@@ -181,11 +126,65 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-defineRenderer("multiselect-overlay", {
+const { collector } = defineRenderer("multiselect-overlay", {
   zIndex: 450,
   only: true,
+  collector: () => {
+    const c = new MultiSelectRectangleBufferCollector();
+    const thick = 300;
+    c.addRectangle(
+      {
+        width: 1e3,
+        height: thick,
+        x: 100,
+        y: 100,
+        id: "select-rect-top",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: thick,
+        height: 1e3,
+        x: 1e3 + thick,
+        y: thick,
+        id: "select-rect-right",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: 1e3,
+        height: thick,
+        x: 100 + thick,
+        y: 1e3 + thick,
+        id: "select-rect-bottom",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    c.addRectangle(
+      {
+        width: thick,
+        height: 1e3,
+        x: 100,
+        y: 100 + thick,
+        id: "select-rect-left",
+        isNested: false,
+        radius: [0, 0, 0, 0]
+      },
+      0
+    );
+    return c;
+  },
+  program: () => ({ shaders: [vs, fs] }),
   cursor: () => "crosshair",
-  render: (ctx) => {
+  render: (ctx, gl, program) => {
     mouseX = ctx.mouseX;
     mouseY = ctx.mouseY;
     const { shader, check } = getSelectRect(
@@ -194,16 +193,20 @@ defineRenderer("multiselect-overlay", {
     );
     const { nested } = collector.getSelectedUuids(check);
     const shouldSelectAll = props.isPressingControl || !nested.length;
-    ctx.gl.useProgram(programInfo.program);
+    gl.useProgram(program.program);
     const time = (Date.now() - startTimestamp) / 1e3;
-    setUniforms(programInfo, uniforms);
-    setUniforms(programInfo, {
+    setUniforms(program, {
+      u_color_field_active: toShaderColor(uniforms.u_color_field_active),
+      u_color_field_default: toShaderColor(uniforms.u_color_field_default)
+    });
+    setUniforms(program, {
       u_select_all: shouldSelectAll ? 1 : 0,
       u_select_rect: [shader.x, shader.y, shader.width, shader.height],
       u_time: time
     });
-    animation.setSharedUniforms(ctx.gl, programInfo);
+    animation.setSharedUniforms(gl, program);
     const { info, hasChanged } = collector.getBufferInfo(
+      gl,
       ctx.artboardOffset,
       ctx.artboardScale
     );
@@ -211,9 +214,64 @@ defineRenderer("multiselect-overlay", {
       return;
     }
     if (hasChanged) {
-      setBuffersAndAttributes(ctx.gl, programInfo, info);
+      setBuffersAndAttributes(gl, program, info);
+    }
+    drawBufferInfo(gl, info, gl.TRIANGLES);
+  },
+  renderFallback: (ctx, ctx2d) => {
+    mouseX = ctx.mouseX;
+    mouseY = ctx.mouseY;
+    const { shader, check } = getSelectRect(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    const { nested } = collector.getSelectedUuids(check);
+    const shouldSelectAll = props.isPressingControl || !nested.length;
+    collector.getBufferInfo(void 0, ctx.artboardOffset, ctx.artboardScale);
+    const rects = Object.values(collector.rects);
+    const colorFieldActive = `rgba(${uniforms.u_color_field_active[0]}, ${uniforms.u_color_field_active[1]}, ${uniforms.u_color_field_active[2]}, 0.3)`;
+    for (let i = 0; i < rects.length; i++) {
+      const rect = rects[i];
+      if (rect.id.startsWith("select-rect-")) {
+        continue;
+      }
+      if (!intersects(rect, check)) {
+        continue;
+      }
+      if (!rect.isNested && !shouldSelectAll) {
+        continue;
+      }
+      ctx2d.fillStyle = colorFieldActive;
+      ctx2d.fillRect(
+        (rect.x * ctx.artboardScale + ctx.artboardOffset.x) * ctx.dpi,
+        (rect.y * ctx.artboardScale + ctx.artboardOffset.y) * ctx.dpi,
+        rect.width * ctx.artboardScale * ctx.dpi,
+        rect.height * ctx.artboardScale * ctx.dpi
+      );
     }
-    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
+    const time = (Date.now() - startTimestamp) / 1e3;
+    const speed = 100 * ctx.dpi;
+    const dashLength = 8 * ctx.dpi;
+    const phase = time * speed * -1;
+    ctx2d.lineWidth = 2 * ctx.dpi;
+    ctx2d.setLineDash([dashLength, dashLength]);
+    ctx2d.strokeStyle = "rgba(255, 255, 255, 0.8)";
+    ctx2d.lineDashOffset = phase % (dashLength * 2);
+    ctx2d.strokeRect(
+      shader.x * ctx.dpi,
+      shader.y * ctx.dpi,
+      shader.width * ctx.dpi,
+      shader.height * ctx.dpi
+    );
+    ctx2d.strokeStyle = "rgba(0, 0, 0, 0.8)";
+    ctx2d.lineDashOffset = (phase + dashLength) % (dashLength * 2);
+    ctx2d.strokeRect(
+      shader.x * ctx.dpi,
+      shader.y * ctx.dpi,
+      shader.width * ctx.dpi,
+      shader.height * ctx.dpi
+    );
+    ctx2d.setLineDash([]);
   }
 });
 function getUuidsToSelect() {

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/index.vue.d.ts

@@ -2,7 +2,6 @@ type __VLS_Props = {
     startX: number;
     startY: number;
     isPressingControl: boolean;
-    gl: WebGLRenderingContext;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     select: (uuids: string[]) => any;

package/dist/runtime/components/Edit/Features/MultiSelect/{Overlay → Renderer}/vertex.glsl

@@ -17,8 +17,6 @@ uniform float u_select_all;
 uniform vec2 u_resolution;
 uniform vec3 u_color_field_default;
 uniform vec3 u_color_field_active;
-uniform vec3 u_color_area_default;
-uniform vec3 u_color_area_active;
 uniform vec4 u_select_rect;
 
 out vec4 v_quad;
@@ -28,6 +26,13 @@ out vec3 v_color_default;
 out vec3 v_color_active;
 out float v_rect_id;
 
+// Optimized outputs - values computed once per vertex instead of per pixel
+out vec2 v_size;
+out vec2 v_location;
+out float v_thickness;
+out float v_edge_softness;
+out float v_radius;
+
 bool isIntersecting(vec4 a, vec4 b) {
   return a.x < b.x + b.z &&
   a.x + a.z > b.x &&
@@ -179,4 +184,24 @@ void main() {
 
   v_color_default = u_color_field_default;
   v_color_active = u_color_field_active;
+
+  // Compute values that are constant per quad (optimization)
+  float radius_base = 2.0 * u_scale;
+  v_thickness = max(min(1.0 * u_scale, 3.0), 0.5);
+  float inset = max(min(2.0 * u_scale, 1.0), 2.0) * v_thickness;
+
+  float u_rect_x = transformed_quad.x + inset;
+  float u_rect_y = transformed_quad.y + inset;
+  float u_rectWidth = transformed_quad.z - 2.0 * inset;
+  float u_rectHeight = transformed_quad.w - 2.0 * inset;
+
+  v_size = vec2(u_rectWidth, u_rectHeight);
+
+  float x = u_rect_x;
+  float y = u_rect_y;
+  v_location = vec2(x + v_size.x / 2.0, y + v_size.y / 2.0);
+
+  v_edge_softness = 1.0 * u_dpi;
+  v_radius =
+    min(radius_base * u_dpi, min(v_size.x, v_size.y) / 2.0) + v_thickness * 2.0;
 }

package/dist/runtime/components/Edit/Features/MultiSelect/index.vue

@@ -1,18 +1,25 @@
 <template>
-  <Overlay
-    v-if="shouldRender && gl"
-    :start-x="downX"
-    :start-y="downY"
-    :is-pressing-control="keyboard.isPressingControl.value"
-    :gl="gl"
-    @select="onSelect"
-  />
+  <ErrorBoundary
+    v-model="isLocked"
+    :label="$t('feature_multi-select_label', 'Multiselect')"
+    @error="onError"
+  >
+    <Renderer
+      v-if="shouldRender"
+      :key="animation.renderKey.value"
+      :start-x="downX"
+      :start-y="downY"
+      :is-pressing-control="keyboard.isPressingControl.value"
+      @select="onSelect"
+    />
+  </ErrorBoundary>
 </template>
 
 <script setup>
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
 import { ref, useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import Overlay from "./Overlay/index.vue";
+import { ErrorBoundary } from "#blokkli/components";
+import Renderer from "./Renderer/index.vue";
 defineBlokkliFeature({
   id: "multi-select",
   label: "Multiselect",
@@ -20,12 +27,18 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, animation } = useBlokkli();
-const gl = animation.gl();
-const enabled = computed(() => !selection.editableActive.value && gl);
+const { keyboard, eventBus, selection, animation, $t } = useBlokkli();
+const isLocked = ref(false);
+const enabled = computed(
+  () => !selection.editableActive.value && !isLocked.value
+);
 const shouldRender = ref(false);
 const downX = ref(0);
 const downY = ref(0);
+function onError() {
+  eventBus.emit("select:end");
+  shouldRender.value = false;
+}
 const onSelect = (uuids) => {
   shouldRender.value = false;
   eventBus.emit("select:end", uuids);

package/dist/runtime/components/Edit/Features/Ownership/index.vue

@@ -1,12 +1,12 @@
 <template>
   <Teleport to="#bk-banner-list">
-    <Renderer v-if="shouldRender" @submit="takeOwnership" />
+    <OwnershipBanner v-if="shouldRender" @submit="takeOwnership" />
   </Teleport>
 </template>
 
 <script setup>
 import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
-import Renderer from "./Renderer.vue";
+import OwnershipBanner from "./Banner/index.vue";
 const { adapter } = defineBlokkliFeature({
   id: "ownership",
   icon: "user",

package/dist/runtime/components/Edit/Features/ResponsivePreview/index.vue

@@ -37,7 +37,7 @@
           </div>
           <Icon name="caret" />
         </button>
-        <div v-show="dropdownOpen" class="bk-dropdown-content">
+        <div v-if="dropdownOpen" class="bk-dropdown-content">
           <label v-for="option in viewportOptions" :key="option.id">
             <input
               v-model="selectedViewportId"

package/dist/runtime/components/Edit/Features/Search/Overlay/Results/Content/index.vue

@@ -4,16 +4,14 @@
       <Icon name="spinner" />
     </div>
     <div :class="{ 'bk-search-is-loading': isLoading }">
-      <Sortli no-transition>
+      <Sortli :build-item>
         <button
           v-for="(item, i) in items"
           :key="tab + item.id"
           ref="listItems"
-          data-element-type="search_content"
           class="bk bk-search-item bk-is-content"
           :class="{ 'bk-is-active': i === index }"
-          :data-sortli-id="'search_' + tab + i"
-          :data-search-item="JSON.stringify(item)"
+          :data-sortli-id="i"
           @mouseenter="index = i"
         >
           <div
@@ -56,7 +54,7 @@
 <script setup>
 import { watch, ref, useBlokkli, onMounted } from "#imports";
 import { ItemIcon, Icon, Sortli } from "#blokkli/components";
-import { buildDraggableItem, modulo } from "#blokkli/helpers";
+import { modulo } from "#blokkli/helpers";
 const listItems = ref([]);
 const props = defineProps({
   visible: { type: Boolean, required: true },
@@ -101,6 +99,25 @@ const goToFirst = () => setIndex(0);
 const select = () => clickItem();
 const isActive = () => props.visible;
 defineExpose({ prev, next, select, isActive, goToFirst });
+function buildItem(element) {
+  if (!element.dataset.sortliId) {
+    return;
+  }
+  const index2 = Number.parseInt(element.dataset.sortliId);
+  if (Number.isNaN(index2) || !Number.isFinite(index2)) {
+    return;
+  }
+  const item = items.value[index2];
+  if (!item) {
+    return;
+  }
+  return {
+    itemType: "search_content",
+    element: () => element,
+    itemBundle: item.targetBundles[0] ?? "",
+    searchItem: item
+  };
+}
 const setIndex = (newIndex) => {
   index.value = modulo(newIndex, items.value.length);
   scrollItemIntoView();
@@ -110,7 +127,7 @@ const clickItem = () => {
   if (!element) {
     return;
   }
-  const item = buildDraggableItem(element);
+  const item = buildItem(element);
   if (!item) {
     return;
   }

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

@@ -6,12 +6,12 @@ type __VLS_Props = {
     label: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    action: (id: string) => void;
     select: (id: string) => void;
+    action: (id: string) => void;
     close: () => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onAction?: ((id: string) => any) | undefined;
     onSelect?: ((id: string) => any) | undefined;
     onClose?: (() => any) | undefined;
+    onAction?: ((id: string) => 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);
 }