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

package/dist/runtime/editor/features/artboard/Scrollbar/index.vue

@@ -1,11 +1,14 @@
 <template>
   <Teleport :to="ui.mainLayoutElement.value" defer>
     <div
-      class="bk bk-artboard-scrollbar"
+      class="bk bk-artboard-scrollbar _bk_bg-mono-300 _bk_z-artboard-scrollbar _bk_overflow-hidden _bk_pointer-events-auto _bk_contain-strict _bk_group _bk_border-l _bk_border-l-mono-400"
       :class="'bk-orientation-' + orientation"
     >
       <div ref="el">
-        <button ref="thumb" />
+        <button
+          ref="thumb"
+          class="_bk_bg-mono-400 _bk_group-hover:bg-mono-500 _bk_rounded-full"
+        />
       </div>
     </div>
   </Teleport>
@@ -47,86 +50,42 @@ defineOptions({
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk-html-root {
   --bk-artboard-scrollbar-size: 4px;
 }
-  @media (min-width: 768px) {
-.bk-html-root {
-    --bk-artboard-scrollbar-size: 10px
-}
+@media (width >= 48rem) {
+  .bk-html-root {
+    --bk-artboard-scrollbar-size: 10px;
   }
-  @media (min-width: 1024px) {
-.bk-html-root {
-    --bk-artboard-scrollbar-size: 16px
 }
+@media (width >= 64rem) {
+  .bk-html-root {
+    --bk-artboard-scrollbar-size: 16px;
   }
-
-.bk.bk-artboard-scrollbar {
-  pointer-events: auto;
-  z-index: calc(var(--bk-z-index-base) + 80000) /* "artboard-scrollbar" */;
-  overflow: hidden;
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
-  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: 150ms;
-  contain: strict;
-  grid-area: scrollbar-y;
 }
-
-.bk.bk-artboard-scrollbar button {
-  display: block;
-  border-radius: 9999px;
-  background-color: rgb(var(--bk-theme-mono-500) / 0.5);
-}
-
 .bk.bk-artboard-scrollbar {
-  padding-top: 5px;
-  padding-bottom: 5px;
+  grid-area: scrollbar-y;
 }
-
 .bk.bk-artboard-scrollbar.bk-orientation-y {
-    width: var(--bk-artboard-scrollbar-size);
-  }
-
-.bk.bk-artboard-scrollbar.bk-orientation-y > div {
+  width: var(--bk-artboard-scrollbar-size);
+}
+.bk.bk-artboard-scrollbar.bk-orientation-y  > div {
   height: 100%;
 }
-
 .bk.bk-artboard-scrollbar.bk-orientation-y button {
   width: 100%;
 }
-
 .bk.bk-artboard-scrollbar.bk-orientation-x {
-    height: var(--bk-artboard-scrollbar-size);
-    left: calc(var(--bk-root-offset-left));
-    right: calc(var(--bk-root-offset-right));
-    bottom: calc(var(--bk-root-offset-bottom) - 1px);
-  }
-
+  height: var(--bk-artboard-scrollbar-size);
+  left: calc(var(--bk-root-offset-left));
+  right: calc(var(--bk-root-offset-right));
+  bottom: calc(var(--bk-root-offset-bottom) - 1px);
+}
 .bk.bk-artboard-scrollbar.bk-orientation-x button {
   height: 100%;
 }
-
-.bk.bk-artboard-scrollbar.bk-orientation-x > div {
+.bk.bk-artboard-scrollbar.bk-orientation-x  > div {
   width: 100%;
 }
-
-.bk.bk-artboard-scrollbar.bk-is-active,
-  .bk.bk-artboard-scrollbar:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk.bk-artboard-scrollbar.bk-is-active button, .bk.bk-artboard-scrollbar:hover button {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk.bk-artboard-scrollbar.bk-is-active button,
-  .bk.bk-artboard-scrollbar button:hover {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-bg-opacity, 1));
-}
 </style>

package/dist/runtime/editor/features/block-scheduler/Dialog/ScheduleSection.d.vue.ts

@@ -6,10 +6,13 @@ export type ScheduleItemData = {
 };
 type __VLS_Props = {
     label: string;
+    help: string;
     icon: BlokkliIcon;
     items: ScheduleItemData[];
     supportedBundles: string[];
     disabled?: boolean;
+    /** `data-test` id for the section root (e.g. `scheduler-publish`). */
+    testId: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string | null | undefined;

package/dist/runtime/editor/features/block-scheduler/Dialog/ScheduleSection.vue

@@ -1,30 +1,41 @@
 <template>
-  <div class="bk-schedule-section">
-    <FormToggle v-model="isEnabled" :disabled="disabled">
-      <div class="bk-schedule-section-toggle-title">
-        <Icon :name="icon" />
-        <div class="bk-schedule-section-toggle-title-label">{{ label }}</div>
-      </div>
-    </FormToggle>
+  <PanelSection :title="label" padded :help>
+    <div
+      class="bk-schedule-section"
+      :data-test="testId"
+      :data-test-disabled="disabled"
+    >
+      <FormToggle
+        v-model="isEnabled"
+        :disabled
+        :data-test="testId + '-toggle'"
+        :label="$t('scheduleEnable', 'Enable schedule')"
+      />
 
-    <TransitionHeight opacity>
-      <div v-if="isEnabled" class="bk-schedule-section-content">
-        <div
-          v-if="hasMixedDates && !overrideMode"
-          class="bk-schedule-section-mixed"
-        >
-          <InfoBox :text="mixedDatesMessage" />
-          <button type="button" class="bk-button" @click="enableOverride">
-            {{ $t("blockSchedulerOverride", "Set date for all") }}
-          </button>
-        </div>
+      <TransitionHeight opacity>
+        <div v-if="isEnabled">
+          <div class="_bk_pt-20">
+            <div v-if="hasMixedDates && !overrideMode">
+              <InfoBox :text="mixedDatesMessage" />
+              <div class="_bk_mt-15">
+                <button
+                  type="button"
+                  class="bk-button bk-scheme-mono bk-is-light"
+                  @click="enableOverride"
+                >
+                  {{ $t("blockSchedulerOverride", "Set date for all") }}
+                </button>
+              </div>
+            </div>
 
-        <div v-if="!hasMixedDates || overrideMode">
-          <ScheduleDate v-model="selectedDate" />
+            <div v-if="!hasMixedDates || overrideMode">
+              <ScheduleDate v-model="selectedDate" />
+            </div>
+          </div>
         </div>
-      </div>
-    </TransitionHeight>
-  </div>
+      </TransitionHeight>
+    </div>
+  </PanelSection>
 </template>
 
 <script setup>
@@ -33,15 +44,17 @@ import {
   FormToggle,
   ScheduleDate,
   InfoBox,
-  Icon,
   TransitionHeight
 } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const props = defineProps({
   label: { type: String, required: true },
+  help: { type: String, required: true },
   icon: { type: null, required: true },
   items: { type: Array, required: true },
   supportedBundles: { type: Array, required: true },
-  disabled: { type: Boolean, required: false, default: false }
+  disabled: { type: Boolean, required: false, default: false },
+  testId: { type: String, required: true }
 });
 const { $t, ui } = useBlokkli();
 const modelValue = defineModel({ type: null });

package/dist/runtime/editor/features/block-scheduler/Dialog/ScheduleSection.vue.d.ts

@@ -6,10 +6,13 @@ export type ScheduleItemData = {
 };
 type __VLS_Props = {
     label: string;
+    help: string;
     icon: BlokkliIcon;
     items: ScheduleItemData[];
     supportedBundles: string[];
     disabled?: boolean;
+    /** `data-test` id for the section root (e.g. `scheduler-publish`). */
+    testId: string;
 };
 type __VLS_ModelProps = {
     modelValue?: string | null | undefined;

package/dist/runtime/editor/features/block-scheduler/Dialog/index.vue

@@ -1,7 +1,7 @@
 <template>
   <DialogModal
     id="block-scheduler"
-    :title="$t('blockSchedulerDialogTitle', 'Manage scheduling')"
+    :title="$t('manageScheduling', 'Manage scheduling')"
     :submit-label="$t('blockSchedulerDialogSubmit', 'Save schedule')"
     :width="900"
     :lead="
@@ -12,13 +12,21 @@
 "
     :is-loading
     :can-submit
+    mono
     @cancel="$emit('close')"
     @submit="onSubmit"
   >
     <div class="bk bk-block-scheduler-dialog">
       <ScheduleSection
         v-model="publishOn"
+        test-id="scheduler-publish"
         icon="bk_mdi_visibility"
+        :help="
+  $t(
+    'blockSchedulerDialogPublishOnHelp',
+    'Pick a date and time when the selected blocks should automatically become visible to visitors. Until then, they remain unpublished.'
+  )
+"
         :label="$t('blockSchedulerDialogPublishOn', 'Publish on')"
         :items="publishOnItems"
         :supported-bundles="bundlesWithPublish"
@@ -27,23 +35,22 @@
 
       <ScheduleSection
         v-model="unpublishOn"
+        test-id="scheduler-unpublish"
         icon="bk_mdi_visibility_off"
         :label="$t('blockSchedulerDialogUnpublishOn', 'Unpublish on')"
+        :help="
+  $t(
+    'blockSchedulerDialogUnpublishOnHelp',
+    'Pick a date and time when the selected blocks should automatically be hidden from visitors. After that, they will no longer be displayed on the page.'
+  )
+"
         :items="unpublishOnItems"
         :supported-bundles="bundlesWithUnpublish"
         :disabled="unpublishDisabled"
       />
 
-      <div class="bk-block-scheduler-table">
-        <h3 class="bk-block-scheduler-table-title">
-          <span v-if="canSubmit">{{
-            $t("blockSchedulerChangesPreview", "Changes to be applied")
-          }}</span>
-          <span v-else>
-            {{ $t("blockSchedulerNoChanges", "No changes to be applied.") }}
-          </span>
-        </h3>
-        <table v-if="canSubmit" class="bk-table">
+      <PanelSection :title="$t('summary', 'Summary')">
+        <table v-if="canSubmit" class="bk-table bk-padded">
           <thead>
             <tr>
               <th>{{ $t("bundle", "Bundle") }}</th>
@@ -61,7 +68,7 @@
             </tr>
           </tbody>
         </table>
-      </div>
+      </PanelSection>
     </div>
   </DialogModal>
 </template>
@@ -71,6 +78,7 @@ import { falsy } from "#blokkli/helpers";
 import { computed, useBlokkli, ref, watch } from "#imports";
 import ScheduleSection from "./ScheduleSection.vue";
 import { DialogModal } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
 const props = defineProps({
   uuids: { type: Array, required: true },
   bundlesWithPublish: { type: Array, required: true },
@@ -231,80 +239,8 @@ async function onSubmit() {
 }
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-block-scheduler-dialog {
   min-height: calc(100vh - 350px);
 }
-
-.bk .bk-schedule-section-content {
-  padding-top: 5px;
-  padding-bottom: 25px;
-}
-
-.bk .bk-schedule-section-mixed .bk-button {
-  margin-top: 20px;
-}
-
-.bk .bk-schedule-section {
-  border-bottom-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-bottom-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-}
-
-.bk .bk-schedule-section:first-child {
-  border-top-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-top-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-}
-
-.bk .bk-schedule-section > .bk-checkbox-toggle {
-  align-items: center;
-  padding-top: 15px;
-  padding-bottom: 15px;
-}
-
-.bk .bk-schedule-section-toggle-title {
-  margin-right: auto;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.bk .bk-schedule-section-toggle-title .bk-icon svg {
-  width: 25px;
-  height: 25px;
-  fill: currentColor;
-}
-
-.bk .bk-schedule-section-toggle-title-label {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 700;
-}
-
-.bk .bk-block-scheduler-table {
-  margin-top: 20px;
-  border-radius: 6px;
-  border-width: 1px;
-  --bk-tw-border-opacity: 1;
-  border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-  padding: 20px;
-}
-
-.bk .bk-block-scheduler-table table {
-  margin-top: 20px;
-}
-
-.bk .bk-block-scheduler-table table thead {
-  --bk-tw-bg-opacity: 1;
-  background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
-}
-
-.bk .bk-block-scheduler-table-title {
-  font-size: 20px;
-  line-height: 28px;
-  font-weight: 700;
-}
 </style>

package/dist/runtime/editor/features/block-scheduler/index.vue

@@ -1,25 +1,22 @@
 <template>
   <PluginItemAction
     id="block-scheduler"
-    :title="$t('manageSchedule', 'Manage schedule...')"
+    :title="$t('manageSchedule', 'Manage schedule', { more: true })"
     :disabled
     multiple
     edit-only
     meta
+    icon="bk_mdi_calendar_month"
     :weight="1e3"
-    :class="{
-  'bk-has-schedule': selectionHasDates
-}"
     @click="onClick"
   >
-    <template #icon>
-      <div class="bk-schedule-action-icon">
-        <Icon name="bk_mdi_calendar_month" class="bk-item-action-icon" />
-        <Icon
-          v-if="selectionHasDates"
-          name="bk_mdi_check"
-          class="bk-schedule-action-icon-check"
-        />
+    <template #icon-addon>
+      <div
+        v-if="selectionHasDates"
+        data-test="block-scheduler-indicator"
+        class="_bk_absolute _bk_-top-5 _bk_-right-5 _bk_size-15 _bk_bg-yellow-normal _bk_rounded-full _bk_flex _bk_items-center _bk_justify-center _bk_text-yellow-dark"
+      >
+        <Icon name="bk_mdi_check" class="_bk_size-10" />
       </div>
     </template>
   </PluginItemAction>
@@ -106,56 +103,3 @@ export default {
   name: "BlockScheduler"
 };
 </script>
-
-<style>
-.bk .bk-item-action.bk-has-schedule {
-
-    background-color: rgb(var(--bk-theme-yellow-dark) / 0.5)
-}
-
-.bk .bk-item-action.bk-has-schedule:hover {
-
-    background-color: rgb(var(--bk-theme-yellow-dark) / 0.7)
-}
-
-    .bk .bk-item-action.bk-has-schedule .bk-icon-clock {
-
-    --bk-tw-text-opacity: 1;
-
-    color: rgb(var(--bk-theme-yellow-light) / var(--bk-tw-text-opacity, 1))
-}
-  .bk .bk-schedule-action-icon {
-
-    position: relative
-}
-  .bk .bk-schedule-action-icon .bk-schedule-action-icon-check {
-
-    position: absolute;
-
-    top: -5px;
-
-    right: -5px;
-
-    display: flex;
-
-    width: 15px;
-
-    height: 15px;
-
-    align-items: center;
-
-    justify-content: center;
-
-    border-radius: 9999px;
-
-    --bk-tw-bg-opacity: 1;
-
-    background-color: rgb(var(--bk-theme-yellow-normal) / var(--bk-tw-bg-opacity, 1))
-}
-  .bk .bk-schedule-action-icon .bk-schedule-action-icon-check svg {
-
-    width: 10px;
-
-    height: 10px
-}
-</style>

package/dist/runtime/editor/features/block-transfer/SummaryDialog/index.d.vue.ts

@@ -0,0 +1,11 @@
+import type { BlockTransferImportSummary } from '../types.js';
+type __VLS_Props = {
+    summary: BlockTransferImportSummary;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onClose?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/editor/features/block-transfer/SummaryDialog/index.vue

@@ -0,0 +1,188 @@
+<template>
+  <DialogModal
+    id="block-transfer-summary"
+    :title="$t('blockTransferSummaryTitle', 'Import summary')"
+    :submit-label="$t('close', 'Close')"
+    :width="700"
+    :lead="leadText"
+    mono
+    @cancel="$emit('close')"
+    @submit="$emit('close')"
+  >
+    <div class="bk _bk_flex _bk_flex-col _bk_gap-20">
+      <PanelSection
+        v-if="summary.skippedBundles.length"
+        :title="$t('blockTransferSkippedBundles', 'Skipped block types')"
+        :help="
+  $t(
+    'blockTransferSkippedBundlesHelp',
+    'These block types were not imported because they don\u2019t exist on the target site or you don\u2019t have permission to use them.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("bundle", "Bundle") }}</th>
+              <th class="_bk_text-right!">
+                {{ $t("blockTransferCount", "Count") }}
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in summary.skippedBundles"
+              :key="row.bundle"
+              data-test="transfer-summary-skipped-row"
+            >
+              <td>
+                <code>{{ row.bundle }}</code>
+              </td>
+              <td class="_bk_text-right!">{{ row.count }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.droppedFields.length"
+        :title="$t('blockTransferDroppedFields', 'Removed fields')"
+        :help="
+  $t(
+    'blockTransferDroppedFieldsHelp',
+    'These fields were dropped because they no longer exist on the target block type.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("bundle", "Bundle") }}</th>
+              <th>{{ $t("blockTransferFieldName", "Field") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.droppedFields"
+              :key="`${row.bundle}-${row.fieldName}-${i}`"
+              data-test="transfer-summary-dropped-row"
+            >
+              <td>
+                <code>{{ row.bundle }}</code>
+              </td>
+              <td>
+                <code>{{ row.fieldName }}</code>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.referencesResolvedByLabel.length"
+        :title="
+  $t(
+    'blockTransferReferencesByLabel',
+    'References matched by label \u2014 please verify'
+  )
+"
+        :help="
+  $t(
+    'blockTransferReferencesByLabelHelp',
+    'These references could not be matched by ID and were resolved by label instead. Verify they point to the correct entity.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("blockTransferEntityType", "Entity type") }}</th>
+              <th>{{ $t("blockTransferLabel", "Label") }}</th>
+              <th>{{ $t("blockTransferTargetId", "Target ID") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.referencesResolvedByLabel"
+              :key="`${row.entityType}-${row.targetId}-${i}`"
+              data-test="transfer-summary-references-label-row"
+            >
+              <td>
+                <code>{{ row.entityType }}</code>
+              </td>
+              <td>{{ row.label }}</td>
+              <td>
+                <code>{{ row.targetId }}</code>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+
+      <PanelSection
+        v-if="summary.referencesUnresolved.length"
+        :title="
+  $t('blockTransferReferencesUnresolved', 'Unresolved references')
+"
+        :help="
+  $t(
+    'blockTransferReferencesUnresolvedHelp',
+    'These references could not be resolved on the target site and were left empty.'
+  )
+"
+        padded
+      >
+        <table class="bk-table">
+          <thead>
+            <tr>
+              <th>{{ $t("blockTransferEntityType", "Entity type") }}</th>
+              <th>{{ $t("blockTransferLabel", "Label") }}</th>
+              <th>{{ $t("blockTransferReason", "Reason") }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="(row, i) in summary.referencesUnresolved"
+              :key="`${row.uuid ?? row.label ?? ''}-${i}`"
+              data-test="transfer-summary-unresolved-row"
+            >
+              <td>
+                <code>{{ row.entityType }}</code>
+              </td>
+              <td>{{ row.label || "\u2014" }}</td>
+              <td>{{ row.reason }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </PanelSection>
+    </div>
+  </DialogModal>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { DialogModal } from "#blokkli/editor/components";
+import PanelSection from "#blokkli/editor/components/Panel/Section/index.vue";
+const props = defineProps({
+  summary: { type: Object, required: true }
+});
+defineEmits(["close"]);
+const { $t } = useBlokkli();
+const leadText = computed(() => {
+  const imported = $t("blocksImported", "@count blocks imported.").replace(
+    "@count",
+    String(props.summary.paragraphsImported)
+  );
+  if (props.summary.referencesResolvedByUuid > 0) {
+    const refs = $t(
+      "blockTransferReferencesByUuid",
+      "@count references resolved exactly."
+    ).replace("@count", String(props.summary.referencesResolvedByUuid));
+    return `${imported} ${refs}`;
+  }
+  return imported;
+});
+</script>