@blokkli/editor 2.0.0-alpha.13 → 2.0.0-alpha.14

package/dist/runtime/components/Edit/Konami/Game/index.vue.d.ts

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

package/dist/runtime/components/Edit/Konami/Game/textRendering.d.ts

@@ -0,0 +1,8 @@
+type TextAlign = 'left' | 'center' | 'right';
+type UseTextRendering = {
+    drawTextPixels: (ctx: CanvasRenderingContext2D, text: string, x: number, y: number, color: string, align?: TextAlign, scale?: number) => void;
+    drawText: (ctx: CanvasRenderingContext2D, text: string, x: number, y: number, color: string, backgroundColor?: string, borderSize?: number, padding?: number, scale?: number) => void;
+    getTextWidth: (text: string) => number;
+};
+export declare function useTextRendering(): UseTextRendering;
+export {};

package/dist/runtime/components/Edit/Konami/Game/textRendering.js

@@ -0,0 +1,138 @@
+import charData from "./charmap.js";
+function decodeFontData(encodedData) {
+  const patterns = /* @__PURE__ */ new Map();
+  const lines = encodedData.trim().split("\n");
+  for (const line of lines) {
+    const [char, widthStr, binary] = line.split(",");
+    if (!char || !widthStr || !binary) continue;
+    const width = Number.parseInt(widthStr, 10);
+    const expectedLength = width * 8;
+    const paddedBinary = binary.padEnd(expectedLength, "0");
+    const pattern = [];
+    for (let row = 0; row < 8; row++) {
+      pattern[row] = [];
+      for (let col = 0; col < width; col++) {
+        const index = row * width + col;
+        pattern[row][col] = paddedBinary[index] === "1";
+      }
+    }
+    patterns.set(char, { pattern, width });
+  }
+  return patterns;
+}
+export function useTextRendering() {
+  const fontPatterns = decodeFontData(charData);
+  const charHeight = 8;
+  const charAtlas = /* @__PURE__ */ new Map();
+  const atlasCanvas = document.createElement("canvas");
+  let totalWidth = 0;
+  fontPatterns.forEach((data) => {
+    totalWidth += data.width + 1;
+  });
+  atlasCanvas.width = totalWidth;
+  atlasCanvas.height = charHeight;
+  const atlasCtx = atlasCanvas.getContext("2d");
+  let currentX = 0;
+  fontPatterns.forEach((data, char) => {
+    charAtlas.set(char, {
+      x: currentX,
+      y: 0,
+      width: data.width
+    });
+    atlasCtx.fillStyle = "black";
+    for (let py = 0; py < charHeight; py++) {
+      for (let px = 0; px < data.width; px++) {
+        const isPixelOn = data.pattern[py]?.[px] ?? false;
+        if (isPixelOn) {
+          atlasCtx.fillRect(currentX + px, py, 1, 1);
+        }
+      }
+    }
+    currentX += data.width + 1;
+  });
+  function drawTextPixels(ctx, text, x, y, color, align = "left", scale = 1) {
+    const textWidth = getTextWidth(text) * scale;
+    let startX = x;
+    if (align === "right") {
+      startX = x - textWidth;
+    } else if (align === "center") {
+      startX = x - Math.floor(textWidth / 2);
+    }
+    ctx.fillStyle = color;
+    let currentX2 = startX;
+    ctx.imageSmoothingEnabled = false;
+    text.split("").forEach((char) => {
+      if (char === " ") {
+        currentX2 += 3 * scale;
+        return;
+      }
+      const atlasData = charAtlas.get(char);
+      if (!atlasData) return;
+      ctx.drawImage(
+        atlasCanvas,
+        atlasData.x,
+        atlasData.y,
+        atlasData.width,
+        charHeight,
+        // source
+        currentX2,
+        y,
+        atlasData.width * scale,
+        charHeight * scale
+        // destination
+      );
+      currentX2 += (atlasData.width + 1) * scale;
+    });
+    ctx.imageSmoothingEnabled = true;
+  }
+  function getTextWidth(text) {
+    let width = 0;
+    text.split("").forEach((char, index) => {
+      if (char === " ") {
+        width += 3;
+      } else {
+        const atlasData = charAtlas.get(char);
+        if (atlasData) {
+          width += atlasData.width;
+          if (index < text.length - 1) {
+            width += 1;
+          }
+        }
+      }
+    });
+    return width;
+  }
+  function drawText(ctx, text, x, y, color, backgroundColor, borderSize = 0, padding = 0, scale = 1) {
+    const charHeight2 = 8;
+    const textWidth = getTextWidth(text) * scale;
+    const textHeight = charHeight2 * scale;
+    if (backgroundColor || borderSize > 0) {
+      const totalWidth2 = textWidth + padding * 2 + borderSize * 2;
+      const totalHeight = textHeight + padding * 2 + borderSize * 2;
+      if (borderSize > 0) {
+        ctx.fillStyle = "black";
+        ctx.fillRect(
+          x - padding - borderSize,
+          y - (padding + borderSize),
+          totalWidth2,
+          totalHeight
+        );
+      }
+      if (backgroundColor) {
+        ctx.fillStyle = backgroundColor;
+        ctx.fillRect(
+          x - padding - borderSize + borderSize,
+          y - (padding + borderSize) + borderSize,
+          totalWidth2 - borderSize * 2,
+          totalHeight - borderSize * 2
+        );
+      }
+    }
+    drawTextPixels(ctx, text, x, y, color, "left", scale);
+  }
+  return {
+    getTextWidth,
+    drawTextPixels,
+    drawText
+  };
+}

package/dist/runtime/components/Edit/Konami/Game/useIconRendering.d.ts

@@ -0,0 +1,9 @@
+declare const ICON_NAMES: readonly ["upload", "tutor", "bug", "chart", "eye", "user", "plus", "robot", "cursor-move", "check", "tools", "revert", "puzzle", "group", "file", "comment", "command", "close", "button-pointer"];
+type IconName = (typeof ICON_NAMES)[number];
+type UseIconRendering = {
+    initIcons: () => Promise<void>;
+    drawIcon: (ctx: CanvasRenderingContext2D, icon: IconName | number, x: number, y: number, large?: boolean) => void;
+    getIconCount: () => number;
+};
+export declare function useIconRendering(cellSize: number, largeSize: number): UseIconRendering;
+export {};

package/dist/runtime/components/Edit/Konami/Game/useIconRendering.js

@@ -0,0 +1,130 @@
+import { icons } from "#blokkli-build/icons";
+const ICON_NAMES = [
+  "upload",
+  "tutor",
+  "bug",
+  "chart",
+  "eye",
+  "user",
+  "plus",
+  "robot",
+  "cursor-move",
+  "check",
+  "tools",
+  "revert",
+  "puzzle",
+  "group",
+  "file",
+  "comment",
+  "command",
+  "close",
+  "button-pointer"
+];
+export function useIconRendering(cellSize, largeSize) {
+  const iconList = ICON_NAMES.map((name) => ({
+    name,
+    svg: icons[name]
+  }));
+  const iconAtlas = /* @__PURE__ */ new Map();
+  const iconAtlasLarge = /* @__PURE__ */ new Map();
+  const atlasCanvas = document.createElement("canvas");
+  atlasCanvas.width = cellSize * iconList.length;
+  atlasCanvas.height = cellSize;
+  const atlasCanvasLarge = document.createElement("canvas");
+  atlasCanvasLarge.width = largeSize * iconList.length;
+  atlasCanvasLarge.height = largeSize;
+  async function initIcons() {
+    const ctx = atlasCanvas.getContext("2d", { willReadFrequently: true });
+    const ctxLarge = atlasCanvasLarge.getContext("2d", {
+      willReadFrequently: true
+    });
+    if (!ctx || !ctxLarge) return;
+    const imagePromises = iconList.map(({ name, svg }) => {
+      return new Promise((resolve) => {
+        const img = new Image();
+        const svgBlob = new Blob([svg], { type: "image/svg+xml" });
+        const url = URL.createObjectURL(svgBlob);
+        img.onload = () => {
+          URL.revokeObjectURL(url);
+          resolve({ name, img });
+        };
+        img.src = url;
+      });
+    });
+    const loadedImages = await Promise.all(imagePromises);
+    const processIcon = (img, name, index, size, targetCtx, atlasMap) => {
+      const tempCanvas = document.createElement("canvas");
+      tempCanvas.width = size;
+      tempCanvas.height = size;
+      const tempCtx = tempCanvas.getContext("2d", { willReadFrequently: true });
+      if (!tempCtx) return;
+      tempCtx.clearRect(0, 0, size, size);
+      tempCtx.drawImage(img, 0, 0, size, size);
+      const imageData = tempCtx.getImageData(0, 0, size, size);
+      const data = imageData.data;
+      for (let i = 0; i < data.length; i += 4) {
+        const r = data[i];
+        const g = data[i + 1];
+        const b = data[i + 2];
+        const a = data[i + 3];
+        const brightness = (r + g + b) / 3;
+        if (a > 128 && brightness < 128) {
+          data[i] = 0;
+          data[i + 1] = 0;
+          data[i + 2] = 0;
+          data[i + 3] = 255;
+        } else {
+          data[i] = 0;
+          data[i + 1] = 0;
+          data[i + 2] = 0;
+          data[i + 3] = 0;
+        }
+      }
+      tempCtx.putImageData(imageData, 0, 0);
+      const atlasX = index * size;
+      targetCtx.drawImage(tempCanvas, 0, 0, size, size, atlasX, 0, size, size);
+      atlasMap.set(name, { x: atlasX, y: 0 });
+    };
+    loadedImages.forEach(({ name, img }, index) => {
+      processIcon(img, name, index, cellSize, ctx, iconAtlas);
+      processIcon(img, name, index, largeSize, ctxLarge, iconAtlasLarge);
+    });
+  }
+  function drawIcon(ctx, icon, x, y, large = false) {
+    let iconName;
+    if (typeof icon === "number") {
+      const iconData = iconList[icon];
+      if (!iconData) return;
+      iconName = iconData.name;
+    } else {
+      iconName = icon;
+    }
+    const atlas = large ? iconAtlasLarge : iconAtlas;
+    const canvas = large ? atlasCanvasLarge : atlasCanvas;
+    const size = large ? largeSize : cellSize;
+    const atlasData = atlas.get(iconName);
+    if (!atlasData) return;
+    const prevSmoothing = ctx.imageSmoothingEnabled;
+    ctx.imageSmoothingEnabled = false;
+    ctx.drawImage(
+      canvas,
+      atlasData.x,
+      atlasData.y,
+      size,
+      size,
+      x,
+      y,
+      size,
+      size
+    );
+    ctx.imageSmoothingEnabled = prevSmoothing;
+  }
+  function getIconCount() {
+    return iconList.length;
+  }
+  return {
+    initIcons,
+    drawIcon,
+    getIconCount
+  };
+}

package/dist/runtime/components/Edit/Konami/index.vue

@@ -0,0 +1,44 @@
+<template>
+  <Teleport to="body">
+    <BlokkliTransition name="slide-up">
+      <Game v-if="isEnabled" @close="isEnabled = false" />
+    </BlokkliTransition>
+  </Teleport>
+</template>
+
+<script setup>
+import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+import Game from "./Game/index.vue";
+import { ref } from "#imports";
+import { BlokkliTransition } from "#blokkli/components";
+const isEnabled = ref(false);
+const KONAMI_CODE = [
+  "ArrowUp",
+  "ArrowUp",
+  "ArrowDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowLeft",
+  "ArrowRight",
+  "b",
+  "a"
+];
+const sequence = ref([]);
+onBlokkliEvent("keyPressed", (e) => {
+  const key = e.code;
+  sequence.value.push(key);
+  if (sequence.value.length > KONAMI_CODE.length) {
+    sequence.value.shift();
+  }
+  if (sequence.value.length === KONAMI_CODE.length) {
+    const matches = KONAMI_CODE.every((code, index) => {
+      return sequence.value[index] === code;
+    });
+    if (matches) {
+      isEnabled.value = true;
+      sequence.value = [];
+    }
+  }
+});
+</script>

package/dist/runtime/components/Edit/Konami/index.vue.d.ts

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

package/dist/runtime/components/Edit/Loading/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="bk bk-loading-overlay" :class="{ 'bk-is-screen': screen }">
+  <div
+    class="bk bk-loading-overlay"
+    :class="{ 'bk-is-screen': screen, 'bk-is-white': white }"
+  >
     <Icon name="spinner" />
   </div>
 </template>
@@ -7,7 +10,8 @@
 <script setup>
 import { Icon } from "#blokkli/components";
 defineProps({
-  screen: { type: Boolean, required: false }
+  screen: { type: Boolean, required: false },
+  white: { type: Boolean, required: false }
 });
 </script>
 

package/dist/runtime/components/Edit/Loading/index.vue.d.ts

@@ -1,6 +1,8 @@
 declare const _default: import("vue").DefineComponent<{
     screen?: boolean;
+    white?: boolean;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     screen?: boolean;
+    white?: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Edit/Messages/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="bk bk-messages">
-    <TransitionGroup name="bk-message">
+    <TransitionGroup :name="ui.useAnimations.value ? 'bk-message' : void 0">
       <Item
         v-for="(message, index) in messages"
         v-bind="message"
@@ -12,15 +12,20 @@
 </template>
 
 <script setup>
-import { ref } from "#imports";
+import { ref, useBlokkli } from "#imports";
 import Item from "./Item/index.vue";
 import onBlokkliEvent from "#blokkli/helpers/composables/onBlokkliEvent";
+const { ui } = useBlokkli();
 const messages = ref([]);
 function removeMessage(index) {
   messages.value = messages.value.filter((_v, i) => i !== index);
 }
 onBlokkliEvent("message", (message) => {
-  messages.value.push(message);
+  if (message.replace) {
+    messages.value = [message];
+  } else {
+    messages.value.push(message);
+  }
 });
 </script>
 

package/dist/runtime/components/Edit/PluginConfigForm/Checkbox/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <FormToggle v-model="value" :label :description />
+</template>
+
+<script setup>
+import { FormToggle } from "#blokkli/components";
+defineProps({
+  type: { type: String, required: true },
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: true },
+  checkboxLabel: { type: String, required: false },
+  defaultValue: { type: Boolean, required: true }
+});
+const value = defineModel({ type: Boolean });
+</script>

package/dist/runtime/components/Edit/PluginConfigForm/Checkbox/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { PluginConfigInputCheckbox } from '#blokkli/types';
+type __VLS_Props = PluginConfigInputCheckbox;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: boolean;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: boolean | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: boolean | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/PluginConfigForm/Options/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <FormSelect
+    v-if="variant === 'select'"
+    :id
+    v-model="value"
+    :label
+    :description
+    :required
+    :options
+  />
+  <FormRadio
+    v-else
+    :id
+    v-model="value"
+    :label
+    :description
+    :required
+    :options
+  />
+</template>
+
+<script setup>
+import { computed } from "#imports";
+import { FormSelect, FormRadio } from "#blokkli/components";
+const props = defineProps({
+  type: { type: String, required: true },
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: true },
+  defaultValue: { type: String, required: false },
+  variant: { type: String, required: true },
+  options: { type: Array, required: true }
+});
+const value = defineModel({ type: String });
+const id = computed(() => "plugin-form-item-" + props.name);
+</script>

package/dist/runtime/components/Edit/PluginConfigForm/Options/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { PluginConfigInputOptions } from '#blokkli/types';
+type __VLS_Props = PluginConfigInputOptions;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/PluginConfigForm/Text/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <FormTextarea
+    v-if="multiline"
+    :id="name"
+    v-model="value"
+    :label
+    :required
+    :placeholder
+    :description
+    :minlength="minLength"
+    :maxlength="maxLength"
+  />
+  <FormText
+    v-else
+    :id="name"
+    v-model="value"
+    :label
+    :required
+    :description
+    :placeholder
+    :minlength="minLength"
+    :maxlength="maxLength"
+  />
+</template>
+
+<script setup>
+import { FormText, FormTextarea } from "#blokkli/components";
+defineProps({
+  type: { type: String, required: true },
+  name: { type: String, required: true },
+  label: { type: String, required: true },
+  description: { type: String, required: false },
+  required: { type: Boolean, required: true },
+  defaultValue: { type: String, required: false },
+  minLength: { type: Number, required: false },
+  maxLength: { type: Number, required: false },
+  placeholder: { type: String, required: false },
+  pattern: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  rows: { type: Number, required: false }
+});
+const value = defineModel({ type: String });
+</script>

package/dist/runtime/components/Edit/PluginConfigForm/Text/index.vue.d.ts

@@ -0,0 +1,11 @@
+import type { PluginConfigInputText } from '#blokkli/types';
+type __VLS_Props = PluginConfigInputText;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: string;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/PluginConfigForm/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <ol>
+    <li v-for="item in renderedConfig" :key="item.name" class="bk-form-item">
+      <FormCheckbox
+        v-if="item.type === 'checkbox'"
+        v-bind="item"
+        v-model="value[item.name]"
+      />
+      <FormText
+        v-else-if="item.type === 'text'"
+        v-bind="item"
+        v-model="value[item.name]"
+      />
+      <FormOptions
+        v-else-if="item.type === 'options'"
+        v-bind="item"
+        v-model="value[item.name]"
+      />
+    </li>
+  </ol>
+</template>
+
+<script setup>
+import FormCheckbox from "./Checkbox/index.vue";
+import FormText from "./Text/index.vue";
+import FormOptions from "./Options/index.vue";
+import { computed } from "#imports";
+const props = defineProps({
+  config: { type: Array, required: true }
+});
+const renderedConfig = computed(
+  () => props.config.filter((v) => v.type !== "seed")
+);
+const value = defineModel({ type: Object, ...{
+  default: () => {
+    return {};
+  }
+} });
+function updateSeed() {
+  props.config.forEach((config) => {
+    if (config.type === "seed") {
+      value.value[config.name] = Math.round(
+        Date.now() * Math.random()
+      ).toString();
+    }
+  });
+}
+props.config.forEach((config) => {
+  if ("defaultValue" in config) {
+    value.value[config.name] = config.defaultValue;
+  }
+});
+updateSeed();
+defineExpose({
+  updateSeed
+});
+</script>

package/dist/runtime/components/Edit/PluginConfigForm/index.vue.d.ts

@@ -0,0 +1,16 @@
+import type { PluginConfigInput } from '#blokkli/types';
+type __VLS_Props = {
+    config: PluginConfigInput[];
+};
+declare function updateSeed(): void;
+type __VLS_PublicProps = __VLS_Props & {
+    modelValue?: Record<string, any>;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
+    updateSeed: typeof updateSeed;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: Record<string, any>) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: Record<string, any>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/runtime/components/Edit/PreviewProvider.vue

@@ -25,6 +25,7 @@ import broadcastProvider from "#blokkli/helpers/broadcastProvider";
 import { getFieldKey, intersects } from "#blokkli/helpers";
 import { eventBus } from "#blokkli/helpers/eventBus";
 import definitionProvider from "../../helpers/definitionProvider";
+import { addElementClasses } from "#blokkli/helpers/addElementClasses";
 const props = defineProps({
   entity: { type: null, required: false },
   entityType: { type: String, required: true },
@@ -147,13 +148,13 @@ const onUpdateOption = (option) => {
   }
   mutatedOptions[uuid][key] = value;
 };
+addElementClasses(document.body, "bk-body-preview");
+addElementClasses(document.documentElement, "bk-html-preview");
 onMounted(() => {
   if (isInIframe()) {
     frameEventBus.on("mutatedFields", updateMutatedFields);
     frameEventBus.on("focus", onFocusItem);
     frameEventBus.on("updateOption", onUpdateOption);
-    document.body.classList.add("bk-body-preview");
-    document.documentElement.classList.add("bk-html-preview");
     window.addEventListener("message", onMessage);
     window.addEventListener("wheel", onWheel, { passive: false });
     document.documentElement.addEventListener("mousedown", onMouseDown);
@@ -165,8 +166,6 @@ onMounted(() => {
 });
 onBeforeUnmount(() => {
   clearTimeout(timeout);
-  document.body.classList.remove("bk-body-preview");
-  document.documentElement.classList.remove("bk-html-preview");
   window.removeEventListener("wheel", onWheel);
   window.removeEventListener("message", onMessage);
   document.documentElement.removeEventListener("mousedown", onMouseDown);

package/dist/runtime/components/Edit/RelativeTime/index.vue

@@ -3,16 +3,17 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted, onBeforeUnmount } from "#imports";
+import { ref, computed, onMounted, onBeforeUnmount, useBlokkli } from "#imports";
 import { getRelativeTimeString } from "#blokkli/helpers";
 const props = defineProps({
   timestamp: { type: Number, required: true }
 });
+const { ui } = useBlokkli();
 const incrementToggle = ref(0);
 let interval = null;
 const formatted = computed(() => {
   const date = new Date(props.timestamp * 1e3 + incrementToggle.value);
-  return getRelativeTimeString(date);
+  return getRelativeTimeString(date, ui.interfaceLanguage.value);
 });
 onMounted(() => {
   interval = setInterval(() => {