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

package/dist/runtime/components/Edit/Features/Hover/Overlay/vertex.glsl

@@ -0,0 +1,117 @@
+precision highp float;
+
+// [x, y] position.
+attribute vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+attribute vec4 a_quad;
+attribute float a_rect_id;
+attribute float a_rect_type;
+attribute vec4 a_rect_radius;
+
+// The global scaling applied to all quads.
+uniform float u_scale;
+uniform float u_dpi;
+// The amount of pixels to offset on the x axis.
+uniform float u_offset_x;
+// The amount of pixels to offset on the y axis.
+uniform float u_offset_y;
+uniform vec2 u_resolution;
+
+// Hover state uniforms (11 rectangles)
+uniform vec4 u_hover_positions[11]; // x, y, width, height
+uniform vec4 u_hover_radii[11]; // topLeft, topRight, bottomRight, bottomLeft
+uniform float u_hover_types[11]; // 0=mono, 1=accent, 2=teal fill
+uniform float u_hover_visible[11]; // 0=hidden, 1=visible
+
+// The transformed quad for the fragment shader.
+varying vec4 v_quad;
+varying vec4 v_rect_radius;
+varying vec2 v_rect_size;
+varying vec2 v_rect_center;
+varying float v_rect_type;
+varying vec2 v_quad_artboard_pos;
+
+void main() {
+  int rectIndex = int(a_rect_id);
+
+  // If not visible, move off-screen
+  if (u_hover_visible[rectIndex] < 0.5) {
+    gl_Position = vec4(-2.0, -2.0, 0.0, 1.0);
+    return;
+  }
+
+  // Get rect data from uniforms
+  vec4 hoverPos = u_hover_positions[rectIndex]; // x, y, width, height
+  vec4 hoverRadius = u_hover_radii[rectIndex];
+  float hoverType = u_hover_types[rectIndex];
+
+  // Define the increase size to prevent border clipping
+  float borderThickness = 2.0 * u_dpi;
+  float increaseSize = max(borderThickness, 10.0) + 4.0;
+
+  // Calculate the new dimensions of the quad
+  vec4 adjusted_quad = hoverPos;
+  adjusted_quad.z += 2.0 * increaseSize; // increase width
+  adjusted_quad.w += 2.0 * increaseSize; // increase height
+
+  // Adjust vertex positions to scale from the center of the rectangle
+  // Calculate the center of the original quad
+  vec2 center = vec2(
+    hoverPos.x + hoverPos.z / 2.0,
+    hoverPos.y + hoverPos.w / 2.0
+  );
+
+  // Calculate vertex offset relative to dummy quad center
+  vec2 dummyCenter = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+  vec2 vertexOffset = a_position - dummyCenter;
+
+  // Map vertex offset to new rect
+  vec2 newOffset =
+    vertexOffset *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+
+  // New position is center plus the new offset
+  vec2 newPosition = center + newOffset;
+
+  // Apply global scale and offsets
+  vec2 offsetPosition = newPosition * u_scale;
+  offsetPosition.x += u_offset_x;
+  offsetPosition.y += u_offset_y;
+
+  // Normalize position for rendering
+  vec2 normalizedPosition = offsetPosition / u_resolution;
+
+  // Transform to screen space (-1 to 1)
+  vec2 screenSpacePosition = normalizedPosition * 2.0 - vec2(1.0, 1.0);
+  screenSpacePosition.y = -screenSpacePosition.y;
+
+  // Output final position in clip space
+  gl_Position = vec4(screenSpacePosition, 0.0, 1.0) * u_dpi;
+
+  // Pass the dimensions to fragment shader for SDF calculations
+  vec4 transformed_quad = vec4(
+    (hoverPos.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y -
+      hoverPos.y * u_scale -
+      hoverPos.w * u_scale -
+      u_offset_y) *
+      u_dpi,
+    hoverPos.z * u_scale * u_dpi,
+    hoverPos.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  // Expand the rect by 2px for border rendering
+  float borderExpansion = 2.0 * u_dpi;
+
+  // Set varying variables
+  v_rect_radius = hoverRadius * u_dpi;
+  v_rect_size = vec2(
+    v_quad.z + 2.0 * borderExpansion,
+    v_quad.w + 2.0 * borderExpansion
+  );
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+  v_rect_type = hoverType;
+  // Pass the original artboard-space quad position for stable dash pattern
+  v_quad_artboard_pos = vec2(hoverPos.x, hoverPos.y);
+}

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

@@ -0,0 +1,25 @@
+<template>
+  <Overlay v-if="isVisible && gl && animation.webglEnabled.value" :gl="gl" />
+</template>
+
+<script setup>
+import Overlay from "./Overlay/index.vue";
+import { computed, useBlokkli, defineBlokkliFeature } from "#imports";
+defineBlokkliFeature({
+  id: "hover",
+  icon: "selection",
+  label: "Hover",
+  description: "Renders a border around blocks that are currently being hovered."
+});
+const { selection, ui, animation, dom } = useBlokkli();
+const gl = animation.gl();
+const isVisible = computed(
+  () => dom.isReady.value && !selection.isMultiSelecting.value && !selection.editableActive.value && !selection.isDragging.value && !ui.hasTransformOverlayOpen.value && !ui.hasDialogOpen.value && !ui.isAnimating.value
+);
+</script>
+
+<script>
+export default {
+  name: "Hover"
+};
+</script>

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

@@ -17,15 +17,11 @@
         </p>
         <div class="bk">
           <div class="bk-form-group">
-            <div>
-              <label class="bk-form-label" for="library_search">
-                {{ $t("libraryPlaceSearchLabel", "Filter library items") }}
-              </label>
-              <input
+            <FormItem>
+              <FormText
                 id="library_search"
                 v-model.lazy="searchText"
-                type="text"
-                class="bk-form-input"
+                :label="$t('libraryPlaceSearchLabel', 'Filter library items')"
                 :placeholder="
   $t(
     'libraryPlaceSearchInputPlaceholder',
@@ -34,25 +30,15 @@
 "
                 required
               />
-            </div>
-            <div>
-              <label class="bk-form-label" for="library_bundle">
-                {{ $t("libraryPlaceBundleSelectLabel", "Bundle") }}
-              </label>
-              <select
+            </FormItem>
+            <FormItem>
+              <FormSelect
                 id="library_bundle"
                 v-model="selectedBundle"
-                class="bk-form-input"
-              >
-                <option
-                  v-for="v in bundleOptions"
-                  :key="v.bundle"
-                  :value="v.bundle"
-                >
-                  {{ v.label }}
-                </option>
-              </select>
-            </div>
+                :label="$t('libraryPlaceBundleSelectLabel', 'Bundle')"
+                :options="bundleOptions"
+              />
+            </FormItem>
           </div>
         </div>
         <div class="bk-library-dialog-content">
@@ -85,7 +71,13 @@
 </template>
 
 <script setup>
-import { FormOverlay, Pagination } from "#blokkli/components";
+import {
+  FormOverlay,
+  Pagination,
+  FormText,
+  FormItem,
+  FormSelect
+} from "#blokkli/components";
 import Loading from "./../../../Loading/index.vue";
 import { ref, useBlokkli, useAsyncData, computed, watch } from "#imports";
 import LibraryListItem from "./Item/index.vue";
@@ -147,10 +139,10 @@ const bundleOptions = computed(() => {
   const bundles = allowedBundles.value.map((bundle) => {
     const definition = types.getBlockBundleDefinition(bundle);
     return {
-      bundle,
+      value: bundle,
       label: definition?.label || bundle
     };
   });
-  return [{ bundle: "all", label: $t("all", "All") }, ...bundles];
+  return [{ value: "all", label: $t("all", "All") }, ...bundles];
 });
 </script>

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/Publish/Dialog/Summary.vue

@@ -31,8 +31,8 @@
     </div>
 
     <!-- Result State -->
-    <div class="bk-publish-summary-state">
-      <div class="bk-publish-summary-state-icon" :class="resultStateClass">
+    <div class="bk-publish-summary-state" :class="resultStateClass">
+      <div>
         <Icon :name="resultStateIcon" />
       </div>
       <div class="bk-publish-summary-state-label">

package/dist/runtime/components/Edit/Features/Publish/Dialog/index.vue

@@ -78,7 +78,7 @@
         <FormTextarea
           id="revision-message"
           v-model="revisionMessage"
-          :label="$t('publishRevisionLogMessage', 'Revision log message')"
+          :label="$t('publishRevisionLogMessage', 'Change description')"
           :description="
   $t(
     'publishRevisionLogMessageDescription',
@@ -143,7 +143,9 @@
           </tbody>
         </table>
       </FormItem>
-      <FormItem class="bk-is-summary">
+    </div>
+    <template #pre-footer>
+      <div>
         <h3 class="bk-form-label">
           {{ $t("publishSummary", "Summary") }}
         </h3>
@@ -154,8 +156,8 @@
           :action-label="actionLabel"
           :result-state-label="resultStateLabel"
         />
-      </FormItem>
-    </div>
+      </div>
+    </template>
   </DialogModal>
 </template>
 
@@ -250,10 +252,12 @@ const publishModeOptions = computed(() => {
   return options;
 });
 const scheduleDate = ref(publishOn.value || "");
-console.log("SET REIVISON LOG MESSAGE");
 if (publishOptions.value?.revisionLogMessage) {
   revisionMessage.value = publishOptions.value.revisionLogMessage;
 }
+if (!isCurrentlyPublished.value) {
+  publishMode.value = "save";
+}
 if (publishOn.value) {
   publishMode.value = "scheduled";
 }
@@ -400,9 +404,15 @@ const resultStateLabel = computed(() => {
   }
   if (publishMode.value === "scheduled" && scheduleDate.value) {
     const formattedDate = ui.formatDate(scheduleDate.value);
+    if (isCurrentlyPublished.value) {
+      return $t(
+        "publishResultScheduledChanges",
+        "Changes will be published on @date"
+      ).replace("@date", formattedDate);
+    }
     return $t(
-      "publishResultScheduledChanges",
-      "Changes will be published on @date"
+      "publishResultScheduledPage",
+      "Page will be published on @date"
     ).replace("@date", formattedDate);
   }
   if (isCurrentlyPublished.value) {