@blokkli/editor 2.0.0-alpha.16 → 2.0.0-alpha.17

package/dist/runtime/components/Edit/Features/Library/ReusableDialog/index.vue

@@ -23,36 +23,40 @@
   )
 "
       />
-      <label for="reusable_label" class="bk-form-label">{{
-        $t("libraryDialogDescriptionLabel", "Description")
-      }}</label>
-      <input
-        id="reusable_label"
-        v-model="label"
-        type="text"
-        class="bk-form-input"
-        :placeholder="
-  $t('libraryDialogTitleInputPlaceholder', 'e.g. Teaser Campaign 2024')
+      <FormItem>
+        <FormText
+          id="reusable_label"
+          v-model="label"
+          :label="$t('libraryDialogDescriptionLabel', 'Description')"
+          type="text"
+          :placeholder="
+  $t(
+    'libraryDialogTitleInputPlaceholder',
+    'e.g. Teaser Campaign 2024'
+  )
 "
-        required
-      />
-    </div>
-    <div class="bk-form-label">
-      {{ $t("libraryPreviewLabel", "Preview") }}
-    </div>
-    <div
-      class="bk-dialog-content-element"
-      :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
-      :style="backgroundClass ? {} : { backgroundColor }"
-    >
-      <div ref="previewEl" />
+          required
+        />
+      </FormItem>
+      <FormItem>
+        <div class="bk-form-label">
+          {{ $t("libraryPreviewLabel", "Preview") }}
+        </div>
+        <div
+          class="bk-dialog-content-element"
+          :class="[backgroundClass, { 'bk-default-bg': !backgroundClass }]"
+          :style="backgroundClass ? {} : { backgroundColor }"
+        >
+          <div ref="previewEl" />
+        </div>
+      </FormItem>
     </div>
   </DialogModal>
 </template>
 
 <script setup>
 import { ref, useBlokkli, onMounted } from "#imports";
-import { DialogModal, InfoBox } from "#blokkli/components";
+import { DialogModal, InfoBox, FormText, FormItem } from "#blokkli/components";
 import { realBackgroundColor } from "#blokkli/helpers";
 defineEmits(["confirm", "cancel"]);
 const { dom, $t } = useBlokkli();

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

@@ -4,6 +4,7 @@
     id="library_detach"
     :title="$t('libraryDetach', 'Detach from library')"
     icon="detach"
+    :disabled="state.editMode.value !== 'editing'"
     multiple
     :weight="-70"
     @click="onDetach"
@@ -11,7 +12,7 @@
   <PluginItemAction
     v-else-if="!isReusable"
     id="library_make_reusable"
-    :title="$t('libraryAdd', 'Add to library')"
+    :title="$t('libraryAdd', 'Add to library...')"
     :disabled="!canMakeReusable || state.editMode.value !== 'editing'"
     icon="reusable"
     :weight="-70"

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

@@ -7,7 +7,7 @@
 <script setup>
 import { useBlokkli, onBeforeUnmount } from "#imports";
 import { intersects, toShaderColor } from "#blokkli/helpers";
-import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import defineRenderer from "#blokkli/helpers/composables/defineRenderer";
 import vs from "./vertex.glsl?raw";
 import fs from "./fragment.glsl?raw";
 import {
@@ -181,32 +181,40 @@ function getSelectRect(offset, scale) {
   };
   return { shader, check };
 }
-onBlokkliEvent("canvas:draw", (e) => {
-  mouseX = e.mouseX;
-  mouseY = e.mouseY;
-  const { shader, check } = getSelectRect(e.artboardOffset, e.artboardScale);
-  const { nested } = collector.getSelectedUuids(check);
-  const shouldSelectAll = props.isPressingControl || !nested.length;
-  props.gl.useProgram(programInfo.program);
-  const time = (Date.now() - startTimestamp) / 1e3;
-  setUniforms(programInfo, uniforms);
-  setUniforms(programInfo, {
-    u_select_all: shouldSelectAll ? 1 : 0,
-    u_select_rect: [shader.x, shader.y, shader.width, shader.height],
-    u_time: time
-  });
-  animation.setSharedUniforms(props.gl, programInfo);
-  const { info, hasChanged } = collector.getBufferInfo(
-    e.artboardOffset,
-    e.artboardScale
-  );
-  if (!info) {
-    return;
-  }
-  if (hasChanged) {
-    setBuffersAndAttributes(props.gl, programInfo, info);
+defineRenderer("multiselect-overlay", {
+  zIndex: 450,
+  only: true,
+  cursor: () => "crosshair",
+  render: (ctx) => {
+    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;
+    ctx.gl.useProgram(programInfo.program);
+    const time = (Date.now() - startTimestamp) / 1e3;
+    setUniforms(programInfo, uniforms);
+    setUniforms(programInfo, {
+      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);
+    const { info, hasChanged } = collector.getBufferInfo(
+      ctx.artboardOffset,
+      ctx.artboardScale
+    );
+    if (!info) {
+      return;
+    }
+    if (hasChanged) {
+      setBuffersAndAttributes(ctx.gl, programInfo, info);
+    }
+    drawBufferInfo(ctx.gl, info, ctx.gl.TRIANGLES);
   }
-  drawBufferInfo(props.gl, info, props.gl.TRIANGLES);
 });
 function getUuidsToSelect() {
   const { check } = getSelectRect(
@@ -222,7 +230,6 @@ function getUuidsToSelect() {
   return nested;
 }
 onBeforeUnmount(() => {
-  props.gl.clear(props.gl.COLOR_BUFFER_BIT);
   const diff = Date.now() - startTimestamp;
   if (diff > 175) {
     eventBus.emit("select:end", getUuidsToSelect());

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

@@ -20,11 +20,9 @@ defineBlokkliFeature({
   description: "Implements support for selecting multiple blocks using a select rectangle.",
   viewports: ["desktop"]
 });
-const { keyboard, eventBus, selection, state, animation } = useBlokkli();
+const { keyboard, eventBus, selection, animation } = useBlokkli();
 const gl = animation.gl();
-const enabled = computed(
-  () => !selection.editableActive.value && (state.editMode.value === "editing" || state.editMode.value === "translating") && gl
-);
+const enabled = computed(() => !selection.editableActive.value && gl);
 const shouldRender = ref(false);
 const downX = ref(0);
 const downY = ref(0);

package/dist/runtime/components/Edit/Features/Options/Form/Item.vue

@@ -113,7 +113,12 @@ const showLabel = computed(() => {
 const label = computed(
   () => $blokkliText(`blockOption_${props.property}_label`, props.option.label)
 );
-const description = computed(() => props.option.description);
+const description = computed(
+  () => $blokkliText(
+    `blockOption_${props.property}_description`,
+    props.option.description
+  )
+);
 const checkboxOptions = computed(() => {
   if (props.option.type !== "checkboxes") {
     return [];

package/dist/runtime/components/Edit/Features/Options/Form/index.vue

@@ -146,6 +146,7 @@ function stopChangingOptions() {
     });
   }
   selection.isChangingOptions.value = false;
+  eventBus.emit("option:finish-change");
 }
 class OptionCollector {
   options;

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

@@ -0,0 +1,35 @@
+<template>
+  <Banner
+    id="ownership"
+    icon="user"
+    :text
+    :button="$t('ownershipTakeOwnership', 'Assign to me')"
+    @click="$emit('submit')"
+  />
+</template>
+
+<script setup>
+import { computed, useBlokkli, onMounted, onBeforeUnmount } from "#imports";
+import { Banner } from "#blokkli/components";
+defineEmits(["submit"]);
+const { state, $t, ui } = useBlokkli();
+const name = computed(() => {
+  const v = state.owner.value?.name;
+  if (v) {
+    return `<strong>${v}</strong>`;
+  }
+  return "";
+});
+const text = computed(() => {
+  return $t(
+    "ownershipNote",
+    "This page is currently being edited by @name. Changes can only be made by one person at a time."
+  ).replace("@name", name.value);
+});
+onMounted(() => {
+  ui.setSelectionColor("ownership", "mono");
+});
+onBeforeUnmount(() => {
+  ui.removeSelectionColor("ownership");
+});
+</script>

package/dist/runtime/components/Edit/Features/Ownership/Renderer.vue.d.ts

@@ -0,0 +1,6 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    submit: () => any;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onSubmit?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -1,26 +1,12 @@
 <template>
-  <Teleport to="body">
-    <div
-      v-if="!state.owner.value?.currentUserIsOwner"
-      class="bk-owner-indicator"
-    >
-      <p
-        v-html="
-  $t(
-    'ownershipNote',
-    'This page is currently being edited by @name. Changes can only be made by one person at a time.'
-  ).replace('@name', name)
-"
-      />
-      <button class="bk-button bk-is-danger" @click="takeOwnership">
-        {{ $t("ownershipTakeOwnership", "Assign to me") }}
-      </button>
-    </div>
+  <Teleport to="#bk-banner-list">
+    <Renderer v-if="shouldRender" @submit="takeOwnership" />
   </Teleport>
 </template>
 
 <script setup>
-import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+import { useBlokkli, defineBlokkliFeature, computed } from "#imports";
+import Renderer from "./Renderer.vue";
 const { adapter } = defineBlokkliFeature({
   id: "ownership",
   icon: "user",
@@ -29,18 +15,14 @@ const { adapter } = defineBlokkliFeature({
   description: "Renders a large button to take ownership of the current edit state."
 });
 const { state, $t } = useBlokkli();
+const shouldRender = computed(
+  () => !state.owner.value?.currentUserIsOwner && state.permissions.value.includes("edit")
+);
 const takeOwnership = () => state.mutateWithLoadingState(
   () => adapter.takeOwnership(),
   $t("ownershipError", "Error in assigning"),
   $t("ownershipSuccess", "You are now the owner.")
 );
-const name = computed(() => {
-  const v = state.owner.value?.name;
-  if (v) {
-    return `<strong>${v}</strong>`;
-  }
-  return "";
-});
 </script>
 
 <script>

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

@@ -13,6 +13,7 @@
 "
     key-code="P"
     icon="tree"
+    @update:model-value="onToggleProxyMode"
   />
 </template>
 
@@ -26,7 +27,10 @@ defineBlokkliFeature({
   description: "Displays the blocks as a structure in the preview.",
   viewports: ["desktop"]
 });
-const { $t, ui } = useBlokkli();
+const { $t, ui, eventBus } = useBlokkli();
+function onToggleProxyMode() {
+  eventBus.emit("state:reloaded");
+}
 </script>
 
 <script>

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

@@ -1,86 +1,57 @@
 <template>
-  <div
-    ref="el"
-    class="bk bk-selection-add-overlay"
-    :class="'bk-is-' + placementY"
-    :style="{
-  '--bk-caret-x': caretX
-}"
+  <ArtboardTooltip
+    id="add-buttons"
+    :title="label"
+    :anchor-el
+    :anchor-coordinates
+    class="bk-selection-add-overlay"
+    @close="$emit('close')"
   >
-    <div class="bk bk-selection-add-overlay-inner bk-caret-tooltip-inner">
-      <div v-if="label" class="bk-selection-add-overlay-label">
-        <div v-html="label" />
-        <button @click="$emit('close')">
-          <Icon name="close" />
-        </button>
-      </div>
-      <div
-        ref="listEl"
-        class="bk-selection-add-overlay-list bk-scrollbar-dark"
-        @wheel="onWheel"
+    <div
+      ref="listEl"
+      class="bk-selection-add-overlay-list bk-scrollbar-dark"
+      @wheel="onWheel"
+    >
+      <button
+        v-for="item in items"
+        :key="item.bundle"
+        tabindex="-1"
+        @click.prevent="$emit('select', item.bundle)"
       >
-        <button
-          v-for="item in items"
-          :key="item.bundle"
-          tabindex="-1"
-          @click.prevent="$emit('select', item.bundle)"
-        >
-          <AddListItemIcon
-            :bundle="item.bundle"
-            :color="item.isFavorite ? 'yellow' : 'default'"
-          />
-          <span>{{ item.label }}</span>
-        </button>
-        <button
-          v-for="action in actions"
-          :key="'action:' + action.id"
-          tabindex="-1"
-          @click.prevent="$emit('action', action.id)"
-        >
-          <AddListItemIcon :icon="action.icon" :color="action.color" />
-          <span>{{ action.title }}</span>
-        </button>
-      </div>
+        <AddListItemIcon
+          :bundle="item.bundle"
+          :color="item.isFavorite ? 'yellow' : 'default'"
+        />
+        <span>{{ item.label }}</span>
+      </button>
+      <button
+        v-for="action in actions"
+        :key="'action:' + action.id"
+        tabindex="-1"
+        @click.prevent="$emit('action', action.id)"
+      >
+        <AddListItemIcon :icon="action.icon" :color="action.color" />
+        <span>{{ action.title }}</span>
+      </button>
     </div>
-  </div>
+  </ArtboardTooltip>
 </template>
 
 <script setup>
-import useStickyToolbar from "#blokkli/helpers/composables/useStickyToolbar";
-import {
-  useTemplateRef,
-  useBlokkli,
-  computed,
-  onMounted,
-  onBeforeUnmount
-} from "#imports";
-import { Icon, AddListItemIcon } from "#blokkli/components";
+import { useTemplateRef, useBlokkli, computed } from "#imports";
+import { AddListItemIcon, ArtboardTooltip } from "#blokkli/components";
 import { isInternalBundle } from "#blokkli/helpers/bundles";
 const props = defineProps({
   bundles: { type: Array, required: true },
-  anchorEl: { type: null, required: true },
-  label: { type: String, required: false }
+  anchorEl: { type: null, required: false },
+  anchorCoordinates: { type: Object, required: false },
+  label: { type: String, required: true }
 });
 defineEmits(["select", "action", "close"]);
-const el = useTemplateRef("el");
 const listEl = useTemplateRef("listEl");
 let hasScrollbar = null;
-const { types, ui, plugins, storage } = useBlokkli();
+const { types, plugins, storage } = useBlokkli();
 const favorites = storage.use("blockFavorites", []);
-const { placementY, caretX } = useStickyToolbar(el, {
-  getAnchorElement() {
-    return props.anchorEl;
-  },
-  getPlacementY() {
-    return "auto";
-  },
-  getPlacementX() {
-    return "center";
-  },
-  getCaretWidth() {
-    return 30;
-  }
-});
 const items = computed(() => {
   return props.bundles.filter((bundle) => !isInternalBundle(bundle)).map((bundle) => {
     return {
@@ -111,10 +82,4 @@ const onWheel = (e) => {
     e.stopPropagation();
   }
 };
-onMounted(() => {
-  ui.hasAddTooltipOpen.value = true;
-});
-onBeforeUnmount(() => {
-  ui.hasAddTooltipOpen.value = false;
-});
 </script>

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

@@ -1,7 +1,9 @@
+import type { Coord } from '#blokkli/types';
 type __VLS_Props = {
     bundles: string[];
-    anchorEl: HTMLElement;
-    label?: string;
+    anchorEl?: HTMLElement;
+    anchorCoordinates?: Coord;
+    label: string;
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     select: (id: string) => void;

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

@@ -0,0 +1,106 @@
+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;
+
+uniform float u_dpi;
+uniform vec3 u_color;
+uniform vec3 u_color_hover;
+uniform vec3 u_color_field;
+uniform vec3 u_color_field_hover;
+
+void main() {
+  // Early exit if not visible or fully faded out
+  if (v_visible < 0.5 || v_scale_fade < 0.01) {
+    discard;
+  }
+
+  // Calculate distance from pixel to circle center
+  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;
+
+  // Anti-aliased circle
+  float edgeSoftness = 1.0 * u_dpi;
+  float alpha = 1.0 - smoothstep(radius - edgeSoftness, radius, dist);
+
+  if (alpha < 0.01) {
+    discard;
+  }
+
+  // Calculate position relative to circle center
+  vec2 offset = pixelPos - v_circle_center;
+
+  // 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 plusLength = innerRadius * 0.5; // 50% of inner radius
+  float plusSoftness = 0.25 * u_dpi;
+
+  // Calculate soft plus factor (0 = not plus, 1 = fully plus)
+  float horizontalDist = max(abs(offset.y) - plusThickness, 0.0);
+  float verticalDist = max(abs(offset.x) - plusThickness, 0.0);
+
+  float horizontalBarFactor = 0.0;
+  if (abs(offset.x) < plusLength) {
+    horizontalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, horizontalDist);
+  }
+
+  float verticalBarFactor = 0.0;
+  if (abs(offset.y) < plusLength) {
+    verticalBarFactor = 1.0 - smoothstep(0.0, plusSoftness, verticalDist);
+  }
+
+  float plusFactor = max(horizontalBarFactor, verticalBarFactor);
+
+  // Check if pixel is in the border area (outside the inner circle)
+  bool isBorder = dist >= innerRadius && dist <= radius;
+
+  // Determine base fill color
+  vec3 fillColor;
+  bool isFieldButton = v_rect_id >= 2.0;
+  if (isFieldButton) {
+    fillColor = v_is_hovered > 0.5 ? u_color_field_hover : u_color_field;
+  } else {
+    fillColor = v_is_hovered > 0.5 ? u_color_hover : u_color;
+  }
+
+  // Determine final color
+  vec3 finalColor;
+  if (isBorder) {
+    // Soft border transition - blend from fill color to white over 0.5px
+    float transitionRange = 0.5 * u_dpi;
+    float borderStart = innerRadius;
+    float borderEnd = innerRadius + transitionRange;
+
+    // Calculate blend factor (0 = fill color, 1 = white)
+    float blendFactor = smoothstep(borderStart, borderEnd, dist);
+
+    // Blend between fill color and white
+    finalColor = mix(fillColor, vec3(1.0, 1.0, 1.0), blendFactor);
+  } else {
+    // Circle background
+    finalColor = fillColor;
+  }
+
+  // Apply soft plus on top
+  if (plusFactor > 0.0) {
+    finalColor = mix(finalColor, vec3(1.0, 1.0, 1.0), plusFactor);
+  }
+
+  // Apply scale fade to alpha
+  gl_FragColor = vec4(finalColor, alpha);
+}