@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

package/dist/runtime/editor/features/transform/Dialog/index.vue

@@ -31,7 +31,7 @@
           <footer>
             <button
               v-if="supportsPreview"
-              class="bk-button"
+              class="bk-button bk-scheme-mono bk-is-light"
               :disabled="disabled || !hasChanged && !hasSeedInput"
               :class="{
   'bk-is-loading': isPreviewing
@@ -41,7 +41,7 @@
               {{ previewButtonLabel }}
             </button>
             <button
-              class="bk-button bk-is-orange"
+              class="bk-button bk-scheme-orange"
               :disabled
               @click.prevent="onClickSubmit"
             >
@@ -103,7 +103,7 @@ const previewButtonLabel = computed(() => {
   if (hasSeedInput.value) {
     return $t("transformDialogButtonNewSuggestion", "New suggestion");
   }
-  return $t("transformDialogButtonPreview", "Preview");
+  return $t("preview", "Preview");
 });
 const isLocked = ref(false);
 const hasChanged = ref(false);
@@ -225,133 +225,124 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-transform-overlay {
-    pointer-events: auto;
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: calc(var(--bk-z-index-base) + 310000) /* "transform-overlay" */;
-    width: 100%;
-    height: 100%;
+  pointer-events: auto;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 310000) /* "transform-overlay" */;
+  width: 100%;
+  height: 100%;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog {
-    width: 600px;
-    position: absolute;
-    top: 0px;
-    right: 0px;
-    bottom: 0px;
-  }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-orange-dark) / var(--bk-tw-text-opacity, 1));
+.bk.bk-transform-overlay .bk-transform-overlay-dialog {
+  width: 600px;
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header p {
-    padding-left: 20px;
-    padding-right: 20px;
-    font-weight: 700;
+:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: rgb(var(--bk-theme-orange-normal) / 1);
+  color: rgb(var(--bk-theme-orange-dark) / 1);
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: currentColor;
+:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) p {
+  padding-inline: 20px;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button:hover {
-    background-color: rgb(var(--bk-theme-orange-dark) / 0.2);
+:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: currentcolor;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button {
-    width: 50px;
-    height: 50px;
+@media (hover: hover) {
+  :is(:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) button):hover {
+    background-color: rgb(var(--bk-theme-orange-dark) / 1);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    :is(:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) button):hover {
+      background-color: color-mix(in oklab, rgb(var(--bk-theme-orange-dark) / 1) 20%, transparent);
+    }
+  }
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog header button svg {
-    width: 25px;
-    height: 25px;
-    fill: currentColor;
+:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) button {
+  width: 50px;
+  height: 50px;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog main {
-    position: relative;
-    flex: 1 1 0%;
+:is(:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) header) button) svg {
+  width: 25px;
+  height: 25px;
+  fill: currentcolor;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog main .bk-lead {
-    margin-bottom: 15px;
+:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) main {
+  position: relative;
+  flex: 1;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog footer {
-    display: flex;
-    justify-content: space-between;
-    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: 20px;
+:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) main) .bk-lead {
+  margin-bottom: 15px;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog-inner {
-    height: 100%;
+:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog) footer {
+  display: flex;
+  justify-content: space-between;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-300) / 1);
+  padding: 20px;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog-inner-content {
-    display: flex;
-    height: 100%;
-    width: 100%;
-    flex-direction: column;
-    overflow: hidden;
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
-    --bk-tw-shadow-colored: 0 25px 50px -12px var(--bk-tw-shadow-color);
-    box-shadow: var(--bk-tw-ring-offset-shadow, 0 0 #0000), var(--bk-tw-ring-shadow, 0 0 #0000), var(--bk-tw-shadow);
+.bk.bk-transform-overlay .bk-transform-overlay-dialog-inner {
+  height: 100%;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog-grid {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    overflow: auto;
+.bk.bk-transform-overlay .bk-transform-overlay-dialog-inner-content {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: white;
+  --bk-tw-shadow: 0 25px 50px -12px var(--bk-tw-shadow-color, rgb(0 0 0 / 0.25));
+  box-shadow: var(--bk-tw-inset-shadow), var(--bk-tw-inset-ring-shadow), var(--bk-tw-ring-offset-shadow), var(--bk-tw-ring-shadow), var(--bk-tw-shadow);
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog-grid .bk-diff-table td {
-    padding-left: 20px !important;
+.bk.bk-transform-overlay .bk-transform-overlay-dialog-grid {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
 }
-
-  .bk.bk-transform-overlay .bk-transform-overlay-dialog-top {
-    padding: 20px;
+:is(:is(.bk.bk-transform-overlay .bk-transform-overlay-dialog-grid) .bk-diff-table) td {
+  padding-left: 20px !important;
+}
+.bk.bk-transform-overlay .bk-transform-overlay-dialog-top {
+  padding: 20px;
 }
-
 .bk-transform-overlay-enter-active,
 .bk-transform-overlay-leave-active {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
 }
-
-.bk-transform-overlay-enter-active .bk-transform-overlay-dialog-inner, .bk-transform-overlay-leave-active .bk-transform-overlay-dialog-inner {
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 300ms;
-    transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+:is(.bk-transform-overlay-enter-active,.bk-transform-overlay-leave-active) .bk-transform-overlay-dialog-inner {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 300ms;
+  transition-duration: 300ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
 }
-
-.bk-transform-overlay-enter-from .bk-transform-overlay-dialog-inner, .bk-transform-overlay-leave-to .bk-transform-overlay-dialog-inner {
-    --bk-tw-translate-x: 100%;
-    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));
-    opacity: 0;
+:is(.bk-transform-overlay-enter-from,.bk-transform-overlay-leave-to) .bk-transform-overlay-dialog-inner {
+  --bk-tw-translate-x: 100%;
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  opacity: 0%;
 }
 </style>

package/dist/runtime/editor/features/translations/AutoTranslate/index.d.vue.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/AutoTranslate/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <PluginItemAction
+    v-if="isTranslating && canAutoTranslate"
+    id="auto-translate"
+    multiple
+    :title="autoTranslateLabel"
+    :description="
+  $t(
+    'translationsAutoTranslateDescription',
+    'Automatically translate all texts of this block.'
+  )
+"
+    icon="bk_mdi_translate"
+    :weight="-80"
+    @click="onClick"
+  >
+    <template #icon>
+      <Icon
+        name="bk_mdi_translate"
+        class="_bk_size-25 _bk_pointer-events-none _bk_text-orange-normal"
+      />
+      <div
+        class="_bk_text-[9px] _bk_font-bold _bk_absolute _bk_left-1/2 _bk_-translate-x-1/2 _bk_bottom-[-4px] _bk_text-orange-dark _bk_bg-orange-normal _bk_rounded-full _bk_px-3 _bk_leading-[11px] _bk_border-2 _bk_border-mono-900 _bk_group-hover/button:border-mono-700"
+      >
+        AUTO
+      </div>
+    </template>
+  </PluginItemAction>
+
+  <DiffApproval
+    v-if="phase === 'approving'"
+    :items="approvalItems"
+    insertions-only
+    @apply="onApply"
+    @cancel="onCancel"
+  />
+</template>
+
+<script setup>
+import { ref, computed, useBlokkli } from "#imports";
+import { PluginItemAction } from "#blokkli/editor/plugins";
+import { DiffApproval, Icon } from "#blokkli/editor/components";
+const { adapter, $t, state, context, selection, types, ui } = useBlokkli();
+const phase = ref("idle");
+const approvalItems = ref([]);
+const isTranslating = computed(() => state.editMode.value === "translating");
+const canAutoTranslate = computed(
+  () => !!adapter.requestTranslation && !!adapter.loadTextFieldValuesForLanguage && !!adapter.importTranslationsBatched
+);
+const autoTranslateLabel = computed(
+  () => $t("translationsAutoTranslate", "Auto-translate")
+);
+function resolveFieldLabel(entityType, bundle, fieldName) {
+  const config = types.editableFieldConfig.forName(
+    entityType,
+    bundle,
+    fieldName
+  );
+  return config?.label || fieldName;
+}
+async function onClick() {
+  if (phase.value !== "idle") {
+    return;
+  }
+  phase.value = "loading";
+  ui.setTransform(autoTranslateLabel.value);
+  try {
+    const sourceLanguage = state.translation.value.sourceLanguage || "en";
+    const targetLanguage = context.value.language;
+    const selectedUuids = new Set(selection.uuids.value);
+    const sourceValues = await adapter.loadTextFieldValuesForLanguage(sourceLanguage);
+    const toTranslate = sourceValues.filter((v) => selectedUuids.has(v.uuid));
+    if (!toTranslate.length) {
+      return;
+    }
+    const byKey = new Map(
+      toTranslate.map((v) => [`${v.uuid}:${v.fieldName}`, v])
+    );
+    const response = await adapter.requestTranslation(
+      toTranslate.map((v) => ({
+        key: `${v.uuid}:${v.fieldName}`,
+        text: v.value,
+        isHtml: v.fieldType === "markup",
+        sourceLanguage,
+        targetLanguage
+      }))
+    );
+    if (!response.success || !response.data.length) {
+      return;
+    }
+    let id = 0;
+    approvalItems.value = response.data.map((result) => {
+      const separatorIndex = result.key.indexOf(":");
+      const uuid = result.key.substring(0, separatorIndex);
+      const fieldName = result.key.substring(separatorIndex + 1);
+      const source = byKey.get(result.key);
+      return {
+        id: id++,
+        uuid,
+        fieldName,
+        fieldLabel: source ? resolveFieldLabel(source.entityType, source.entityBundle, fieldName) : fieldName,
+        value: result.translatedText
+      };
+    });
+    phase.value = "approving";
+  } finally {
+    ui.setTransform(null);
+    if (phase.value === "loading") {
+      phase.value = "idle";
+    }
+  }
+}
+async function onApply(data) {
+  const targetLanguage = context.value.language;
+  const items = approvalItems.value.filter((item) => data.selected[item.id]).map((item) => ({
+    langcode: targetLanguage,
+    uuid: item.uuid,
+    fieldName: item.fieldName,
+    fieldValue: item.value
+  }));
+  if (items.length) {
+    await state.mutateWithLoadingState(
+      () => adapter.importTranslationsBatched({ items })
+    );
+  }
+  finishApproval();
+}
+function onCancel() {
+  finishApproval();
+}
+function finishApproval() {
+  phase.value = "idle";
+  approvalItems.value = [];
+}
+defineOptions({
+  name: "AutoTranslate"
+});
+</script>

package/dist/runtime/editor/features/translations/AutoTranslate/index.vue.d.ts

@@ -0,0 +1,3 @@
+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>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/translations/Banner/index.vue

@@ -21,7 +21,7 @@
                 <div class="_bk_text-base" v-html="outdatedLabel" />
                 <div class="_bk_flex _bk_gap-5 _bk_relative">
                   <button
-                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    class="bk-button bk-is-small bk-is-outline bk-is-dark _bk_group/tooltip"
                     @click.prevent="$emit('mark-all-up-to-date', outdatedUuids)"
                   >
                     {{
@@ -32,14 +32,14 @@
                     }}
                   </button>
                   <button
-                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    class="bk-button bk-is-small bk-is-outline bk-is-dark _bk_group/tooltip"
                     @click.prevent="eventBus.emit('select:prev', outdatedUuids)"
                   >
                     <Icon name="bk_mdi_arrow_left_alt" />
                     {{ $t("translationsBannerPrev", "Previous block") }}
                   </button>
                   <button
-                    class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+                    class="bk-button bk-is-small bk-is-outline bk-is-dark _bk_group/tooltip"
                     @click.prevent="eventBus.emit('select:next', outdatedUuids)"
                   >
                     {{ $t("translationsBannerNext", "Next block") }}
@@ -54,11 +54,15 @@
           <div class="_bk_flex _bk_gap-10 _bk_relative">
             <button
               v-if="showTranslate"
-              class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+              class="bk-button bk-is-small bk-is-outline bk-is-dark _bk_group/tooltip"
               @click.prevent="$emit('open-translate')"
             >
               <Icon name="bk_mdi_translate" />
-              {{ $t("translationsAutoTranslateButton", "Auto-translate...") }}
+              {{
+                $t("translationsAutoTranslateButton", "Auto-translate", {
+  more: true
+})
+              }}
               <Tooltip
                 :label="
   $t(
@@ -71,11 +75,13 @@
             </button>
             <button
               v-if="showCsv"
-              class="bk-button bk-is-small bk-is-scheme-outline _bk_group/tooltip"
+              class="bk-button bk-is-small bk-is-outline bk-is-dark _bk_group/tooltip"
               @click.prevent="$emit('open-csv')"
             >
               <Icon name="bk_mdi_upload" />
-              {{ $t("translationsCsvMenuTitle", "Import/export...") }}
+              {{
+                $t("translationsCsvMenuTitle", "Import/export", { more: true })
+              }}
               <Tooltip
                 :label="
   $t(

package/dist/runtime/editor/features/translations/CsvDialog/Export/index.vue

@@ -1,25 +1,43 @@
 <template>
-  <div class="_bk_flex _bk_flex-col _bk_h-full">
-    <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_gap-10 _bk_py-20">
+  <div>
+    <PanelSection :title="$t('filter', 'Filter')" padded>
+      <div class="_bk_flex _bk_items-end _bk_gap-40">
+        <FormCheckboxes
+          id="export-languages"
+          v-model="selectedLanguages"
+          :label="$t('translationsCsvLanguages', 'Languages')"
+          :options="languageOptions"
+          inline
+          @update:model-value="loadExportData"
+        />
+        <FormToggle
+          v-model="onlyOutdated"
+          :label="
+  $t('translationsCsvOnlyOutdated', 'Only outdated translations')
+"
+        />
+        <FormToggle
+          v-model="onlyMissing"
+          :label="$t('translationsCsvOnlyMissing', 'Only missing translations')"
+        />
+      </div>
+    </PanelSection>
+
+    <div v-if="isLoading" class="_bk_flex _bk_items-center _bk_justify-center _bk_py-60">
       <Loading />
     </div>
-    <template v-else-if="exportRows.length">
-      <SelectionTable
-        v-model:only-outdated="onlyOutdated"
-        v-model:only-untranslated="onlyMissing"
-        show-filters
-        :total-count="filteredRows.length"
-      >
-        <template #toolbar>
-          <FormCheckboxes
-            id="export-languages"
-            v-model="selectedLanguages"
-            :label="$t('translationsCsvLanguages', 'Languages')"
-            :options="languageOptions"
-            inline
-            @update:model-value="loadExportData"
-          />
-        </template>
+
+    <PanelSection
+      v-else-if="exportRows.length"
+      sticky-actions
+      :title="
+  $t('translationsCsvExportFieldsTitle', '@count fields').replace(
+    '@count',
+    filteredRows.length.toString()
+  )
+"
+    >
+      <SelectionTable :total-count="filteredRows.length">
         <template #header>
           <th>Key</th>
           <th>{{ sourceLangName }}</th>
@@ -42,44 +60,38 @@
           </tr>
         </template>
       </SelectionTable>
-      <div class="_bk_flex _bk_gap-10 _bk_flex-wrap _bk_pt-20">
-        <button class="bk-button" @click="downloadCsv">
-          <div
-            class="_bk_uppercase _bk_font-bold _bk_border-2 _bk_leading-none _bk_rounded-md _bk_px-3 _bk_py-2 _bk_-ml-5"
-          >
-            csv
-          </div>
-          <span>{{ $t("download", "Download") }}</span>
-        </button>
-        <button
+
+      <template #actions>
+        <PanelAction
+          icon="bk_mdi_download"
+          :title="$t('downloadCsv', 'Download CSV')"
+          @click="downloadCsv"
+        />
+        <PanelAction
           v-for="lang in activeLanguages"
           :key="lang.id"
-          class="bk-button"
+          icon="bk_mdi_download"
+          :title="
+  $t('downloadPoWithLabel', 'Download @label PO').replace(
+    '@label',
+    lang.name
+  )
+"
           @click="downloadPo(lang.id)"
-        >
-          <div
-            class="_bk_uppercase _bk_font-bold _bk_border-2 _bk_leading-none _bk_rounded-md _bk_px-3 _bk_py-2 _bk_-ml-5"
-          >
-            po
-          </div>
-          <span>{{
-            $t("downloadWithLabel", "Download @label").replace(
-  "@label",
-  lang.name
-)
-          }}</span>
-        </button>
-      </div>
-    </template>
+        />
+      </template>
+    </PanelSection>
   </div>
 </template>
 
 <script setup>
 import { ref, computed, useBlokkli, onMounted } from "#imports";
 import { itemEntityType } from "#blokkli-build/config";
-import { Loading, FormCheckboxes } from "#blokkli/editor/components";
+import { Loading, FormCheckboxes, FormToggle } from "#blokkli/editor/components";
 import { buildMultiLangCsv } from "../csv";
 import { buildPo } from "../po";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+import PanelAction from "#blokkli/editor/components/Panel/Action/index.vue";
 import SelectionTable from "../../SelectionTable/index.vue";
 const { adapter, $t, state, blocks, context, element, ui, directive } = useBlokkli();
 const isLoading = ref(false);