@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

package/dist/runtime/editor/features/highlights/Renderer/vertex.glsl

@@ -0,0 +1,87 @@
+#version 300 es
+
+precision highp float;
+
+// [x, y] position.
+in vec2 a_position;
+// The [x,y,width, height] of the quad the vertex belongs to.
+in vec4 a_quad;
+in float a_rect_id;
+in vec3 a_color1;
+in vec3 a_color2;
+in float a_active;
+
+// 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;
+
+out vec4 v_quad;
+out vec3 v_color1;
+out vec3 v_color2;
+out vec2 v_rect_size;
+out vec2 v_rect_center;
+out float v_border_factor;
+out vec2 v_rect_size_artboard;
+out float v_active;
+
+void main() {
+  v_active = a_active;
+  // Define the increase size to prevent border clipping.
+  float borderThickness = (2.0 + a_active * 1.5) * u_dpi;
+  float increaseSize = max(borderThickness, 10.0) + 4.0;
+
+  // Calculate the new dimensions of the quad.
+  vec4 adjusted_quad = a_quad;
+  adjusted_quad.z += 2.0 * increaseSize;
+  adjusted_quad.w += 2.0 * increaseSize;
+
+  // Adjust vertex positions to scale from the center of the rectangle.
+  vec2 center = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+  vec2 dummyCenter = vec2(a_quad.x + a_quad.z / 2.0, a_quad.y + a_quad.w / 2.0);
+  vec2 vertexOffset = a_position - dummyCenter;
+  vec2 newOffset =
+    vertexOffset *
+    (vec2(adjusted_quad.z, adjusted_quad.w) / vec2(a_quad.z, a_quad.w));
+  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(
+    (a_quad.x * u_scale + u_offset_x) * u_dpi,
+    (u_resolution.y - a_quad.y * u_scale - a_quad.w * u_scale - u_offset_y) *
+      u_dpi,
+    a_quad.z * u_scale * u_dpi,
+    a_quad.w * u_scale * u_dpi
+  );
+  v_quad = transformed_quad;
+
+  v_color1 = a_color1;
+  v_color2 = a_color2;
+  v_rect_size = vec2(v_quad.z, v_quad.w);
+  v_rect_center = vec2(v_quad.x + v_quad.z / 2.0, v_quad.y + v_quad.w / 2.0);
+
+  // Calculate border factor based on scale.
+  v_border_factor = smoothstep(0.5, 0.8, u_scale);
+
+  // Artboard-space rect size for perimeter distance calculation.
+  v_rect_size_artboard = vec2(a_quad.z, a_quad.w);
+}

package/dist/runtime/editor/features/highlights/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/highlights/index.vue

@@ -0,0 +1,20 @@
+<template>
+  <Renderer />
+</template>
+
+<script setup>
+import { defineBlokkliFeature } from "#imports";
+import Renderer from "./Renderer/index.vue";
+defineBlokkliFeature({
+  id: "highlights",
+  label: "Highlights",
+  icon: "bk_mdi_error",
+  description: "Renders persistent highlights for blocks with issues or outdated translations."
+});
+</script>
+
+<script>
+export default {
+  name: "Highlights"
+};
+</script>

package/dist/runtime/editor/features/highlights/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/features/history/List/index.vue

@@ -126,3 +126,212 @@ async function setMutationItemStatus(index, status) {
   );
 }
 </script>
+
+<style>
+.bk.bk-history .bk-history-load-more {
+          height: 70px;
+          padding-top: 10px;
+}
+      .bk.bk-history .bk-history-load-more button:before {
+          display: none;
+}
+      .bk.bk-history .bk-history-load-more button:after {
+          content: '';
+          position: absolute;
+          top: 0px;
+          left: 2px;
+          z-index: 50;
+          height: 40px;
+          width: 0px;
+          border-left-width: 8px;
+          --bk-tw-border-opacity: 1;
+          border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+          border-style: dotted;
+        }
+      .bk.bk-history .bk-history-load-more > button {
+          width: 100%;
+}
+      .bk.bk-history .bk-history-load-more:hover button:after {
+          --bk-tw-border-opacity: 1;
+          border-color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-border-opacity, 1));
+}
+    .bk.bk-history .bk-history-empty-message {
+          padding: 20px;
+}
+    .bk.bk-history ul {
+          position: relative;
+          padding-top: 15px;
+}
+    .bk.bk-history ul li {
+          position: relative;
+          padding-left: 20px;
+}
+    .bk.bk-history ul li:after {
+          content: '';
+          position: absolute;
+          left: 25.5px;
+          top: 0px;
+          height: 100%;
+          width: 0px;
+          border-left-width: 1px;
+          border-style: dashed;
+          --bk-tw-border-opacity: 1;
+          border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+          --bk-tw-translate-y: 20px;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+          pointer-events: none;
+          z-index: 1;
+        }
+    .bk.bk-history ul li.bk-is-last {
+          position: sticky;
+          bottom: 0px;
+          z-index: 50;
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+          padding-top: 15px;
+          padding-bottom: 15px;
+}
+    .bk.bk-history ul li.bk-is-last.bk-has-shadow {
+            box-shadow: 0 -2px 12px rgb(var(--bk-theme-mono-300) / 1);
+          }
+    .bk.bk-history ul li.bk-is-last:after {
+          top: 0px;
+          height: 50%;
+          --bk-tw-translate-y: 0px;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+}
+    .bk.bk-history ul li.bk-is-active ~ li:after,
+        .bk.bk-history ul li.bk-is-active:after {
+          border-style: solid;
+          --bk-tw-border-opacity: 1;
+          border-color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-border-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button {
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button em {
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-not-active .bk-history-item-button:before {
+          --bk-tw-scale-x: .5;
+          --bk-tw-scale-y: .5;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button {
+          pointer-events: none;
+          color: rgb(var(--bk-theme-red-normal) / 0.5);
+          text-decoration-line: line-through;
+}
+    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button em {
+          color: rgb(var(--bk-theme-red-normal) / 0.5);
+}
+    .bk.bk-history ul li.bk-is-disabled .bk-history-item-button:before {
+          --bk-tw-scale-x: .5;
+          --bk-tw-scale-y: .5;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-active .bk-history-item-button:before {
+          --bk-tw-scale-x: 1;
+          --bk-tw-scale-y: 1;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-bg-opacity, 1));
+}
+    .bk.bk-history ul li.bk-is-applied .bk-history-item-button:before {
+          --bk-tw-border-opacity: 1;
+          border-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-border-opacity, 1));
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-accent-200) / var(--bk-tw-bg-opacity, 1));
+}
+    .bk.bk-history ul li:not(.bk-is-active) .bk-history-item-button:hover {
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-accent-800) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul li:not(.bk-is-active) .bk-history-item-button:hover:before {
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-accent-400) / var(--bk-tw-bg-opacity, 1));
+}
+    .bk.bk-history ul li:hover .bk-history-item-actions {
+          display: block;
+}
+    .bk.bk-history ul .bk-history-item-button {
+          position: relative;
+          display: block;
+          width: 100%;
+          cursor: pointer;
+          padding-top: 10px;
+          padding-bottom: 10px;
+          padding-left: 22px;
+          text-align: left;
+          font-size: 14px;
+          line-height: 20px;
+          --bk-tw-text-opacity: 1;
+          color: rgb(0 0 0 / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history ul .bk-history-item-button > div {
+          pointer-events: none;
+}
+    .bk.bk-history ul .bk-history-item-button[disabled] {
+          pointer-events: none;
+}
+    .bk.bk-history ul .bk-history-item-button:before {
+          content: '';
+          position: absolute;
+          top: -8px;
+          left: -1px;
+          z-index: 10;
+          height: 15px;
+          width: 15px;
+          border-radius: 9999px;
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-mono-200) / var(--bk-tw-bg-opacity, 1));
+          --bk-tw-translate-y: 20px;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+          transition-property: all;
+          transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+          transition-duration: 150ms;
+          box-shadow: 0 0 0 3px white;
+        }
+    .bk.bk-history ul .bk-history-item-button strong {
+          font-size: 14px;
+          line-height: 20px;
+          font-weight: 600;
+}
+    .bk.bk-history ul .bk-history-item-button em {
+          font-size: 12px;
+          line-height: 16px;
+          font-style: normal;
+          --bk-tw-text-opacity: 1;
+          color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
+}
+    .bk.bk-history .bk-history-item-actions {
+          position: absolute;
+          right: 15px;
+          top: 50%;
+          display: none;
+          --bk-tw-translate-y: -50%;
+          transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
+}
+    .bk.bk-history .bk-history-item-actions button {
+          border-radius: 9999px;
+          padding: 3px;
+}
+    .bk.bk-history .bk-history-item-actions button svg {
+          width: 20px;
+          height: 20px;
+          fill: rgb(var(--bk-theme-mono-500) / 1);
+}
+    .bk.bk-history .bk-history-item-actions button:hover {
+          --bk-tw-bg-opacity: 1;
+          background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
+}
+    .bk.bk-history .bk-history-item-actions button:hover svg {
+          fill: white;
+}
+</style>

package/dist/runtime/editor/features/history/index.vue

@@ -3,7 +3,6 @@
     id="history"
     v-slot="{ scrolledToEnd }"
     :title="$t('history', 'History')"
-    edit-only
     :tour-text="
   $t(
     'historyTourText',

package/dist/runtime/editor/features/hover/Renderer/index.vue

@@ -403,7 +403,7 @@ const { collector } = defineRenderer("hover-overlay", {
         ctx2d.stroke();
       } else {
         let strokeColor = colors.u_color_mono;
-        if (type === 5) {
+        if (type === 5 || type === 6) {
           strokeColor = colors.u_color_yellow;
         } else if (type === 4) {
           strokeColor = colors.u_color_lime;

package/dist/runtime/editor/features/hover/Renderer/vertex.glsl

@@ -141,7 +141,7 @@ void main() {
   v_dash_cycle = 14.0 - u_scale * 1.0;
   v_rect_size_artboard = vec2(hoverPos.z, hoverPos.w);
 
-  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library), 5 = yellow (restricted)
+  // Select color based on type: 0 = mono, 1 = accent, 2 = teal, 3 = white (inverted), 4 = lime (library), 5 = yellow (restricted), 6 = yellow (outdated)
   if (hoverType > 4.5) {
     v_color = u_color_yellow;
   } else if (hoverType > 3.5) {

package/dist/runtime/editor/features/import-existing/Dialog/index.vue

@@ -115,3 +115,21 @@ const fieldOptions = computed(
   })
 );
 </script>
+
+<style>
+.bk.bk-import-existing-dialog .bk.bk-dialog-footer {
+    margin-top: 0px
+}
+  .bk.bk-import-existing-dialog .bk-dialog-pre-footer {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
+    padding: 0px
+}
+  .bk.bk-import-existing-dialog .bk-import-existing-dialog-results {
+    margin-top: 15px;
+    border-top-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
+    padding-top: 15px
+}
+</style>

package/dist/runtime/editor/features/media-library/Library/index.vue

@@ -3,34 +3,15 @@
     <div v-if="status === 'pending'" class="bk-loading">
       <Icon name="loader" />
     </div>
-    <div class="bk-media-library-filters">
-      <div class="bk-media-library-filters-listview">
-        <button @click="toggleListView">
-          <Icon :name="listViewIcon" />
-        </button>
-      </div>
-      <div v-for="filter in filters" :key="filter.name">
-        <label v-if="filter.type === 'text'" class="bk-form-text">
-          <Icon name="bk_mdi_search" />
-          <input
-            v-model.lazy="filterValues[filter.name]"
-            type="text"
-            :placeholder="filter.placeholder"
-          />
-        </label>
-        <FilterSelect
-          v-else-if="filter.type === 'options'"
-          v-model="filterValues[filter.name]"
-          :label="filter.label"
-          :options="filter.options"
-        />
-        <FormToggle
-          v-else-if="filter.type === 'checkbox'"
-          v-model="filterValues[filter.name]"
-          :label="filter.label"
-        />
-      </div>
-    </div>
+    <ConfigFormInline v-model="filterValues" :filters="filters">
+      <template #before>
+        <div class="bk-media-library-filters-listview">
+          <button @click="toggleListView">
+            <Icon :name="listViewIcon" />
+          </button>
+        </div>
+      </template>
+    </ConfigFormInline>
     <div
       ref="listEl"
       class="bk-media-library-items"
@@ -74,10 +55,9 @@ import {
   Sortli,
   Icon,
   Pagination,
-  FormToggle
+  ConfigFormInline
 } from "#blokkli/editor/components";
 import Item from "./Item.vue";
-import FilterSelect from "./FilterSelect/index.vue";
 import { falsy } from "#blokkli/helpers";
 import { onBlokkliEvent } from "#blokkli/editor/composables";
 defineProps({