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

package/dist/runtime/editor/features/artboard/Renderer.vue

@@ -27,29 +27,12 @@
     </PluginContextMenu>
   </PluginToolbarButton>
 
-  <PluginViewOption
-    id="artboardOverview"
-    v-slot="{ isActive }"
-    :label="$t('artboardOverviewToggle', 'Toggle overview')"
-    :title-on="$t('artboardOverviewShow', 'Show overview')"
-    :title-off="$t('artboardOverviewHide', 'Hide overview')"
-    :tour-text="
-  $t(
-    'artboardOverviewTourText',
-    `Displays a top level overview of your content.`
-  )
-"
-    icon="bk_mdi_visibility"
-    key-code="O"
-    weight="90"
+  <Teleport
+    v-if="isOverviewVisible && dom.isReady.value"
+    :to="ui.mainLayoutElement.value"
   >
-    <Teleport
-      v-if="isActive && dom.isReady.value"
-      :to="ui.mainLayoutElement.value"
-    >
-      <Overview :artboard="artboard" />
-    </Teleport>
-  </PluginViewOption>
+    <Overview :artboard="artboard" />
+  </Teleport>
 </template>
 
 <script setup>
@@ -66,13 +49,13 @@ import {
   isInsideRect,
   subtractRectFromViewport
 } from "#blokkli/editor/helpers/geometry";
-import {
-  PluginToolbarButton,
-  PluginViewOption,
-  PluginContextMenu
-} from "#blokkli/editor/plugins";
+import { PluginToolbarButton, PluginContextMenu } from "#blokkli/editor/plugins";
 import Scrollbar from "./Scrollbar/index.vue";
-import { addElementClasses, onBlokkliEvent } from "#blokkli/editor/composables";
+import {
+  addElementClasses,
+  defineViewOption,
+  onBlokkliEvent
+} from "#blokkli/editor/composables";
 import { asValidNumber } from "#blokkli/editor/helpers/math";
 import {
   createArtboard,
@@ -89,6 +72,21 @@ const props = defineProps({
 });
 addElementClasses(document.documentElement, "bk-is-artboard");
 const { context, storage, ui, animation, $t, dom, selection } = useBlokkli();
+const { isVisible: isOverviewVisible } = defineViewOption({
+  id: "artboardOverview",
+  label: $t("viewOptionArtboardOverview", "Overview"),
+  description: $t(
+    "viewOptionArtboardOverviewDescription",
+    "Displays a top-level overview of all content blocks."
+  ),
+  tourText: $t(
+    "artboardOverviewTourText",
+    "Displays a top level overview of your content."
+  ),
+  icon: "bk_mdi_crop_9_16",
+  keyCode: "O",
+  weight: 90
+});
 const artboardElement = ui.artboardElement();
 const zoomLevel = computed(() => Math.round(ui.artboardScale.value * 100) + "%");
 const ZOOM_LEVELS = [10, 25, 50, 75, 100, 125, 150, 200, 300];
@@ -344,6 +342,15 @@ onBlokkliEvent("scrollIntoView", (e) => {
       behavior: e.immediate ? "instant" : "auto",
       area: "blocking"
     });
+  } else if ("rect" in e) {
+    artboard.scrollIntoView(e.rect, {
+      scale: "none",
+      axis: "both",
+      block: "center",
+      inline: "center",
+      area: "viewport",
+      behavior: e.immediate ? "instant" : "auto"
+    });
   } else {
     if (artboardElement.contains(e.element)) {
       const elRect = e.element.getBoundingClientRect();
@@ -365,6 +372,10 @@ onBlokkliEvent("scrollIntoView", (e) => {
     }
   }
 });
+onBlokkliEvent("setArtboardOffset", (e) => {
+  artboard.setOffset(e.x ?? null, e.y ?? null, e.immediate ?? false);
+  animation.requestDraw();
+});
 onBlokkliEvent("scrollSelectionIntoView", (e) => {
   const uuids = selection.uuids.value;
   if (uuids.length === 0) {
@@ -406,35 +417,38 @@ onBlokkliEvent("scrollSelectionIntoView", (e) => {
 });
 </script>
 
-<style>
-.bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-      pointer-events: none;
-      position: fixed;
-      top: 0px;
-      left: 50%;
-      z-index: 10;
-      width: 100vw;
-      max-width: 1920px;
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  pointer-events: none;
+  position: fixed;
+  top: 0px;
+  left: calc(1 / 2 * 100%);
+  z-index: 10;
+  width: 100vw;
+  max-width: 1920px;
 }
-@media (min-width: 1024px) {
-      .bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-            width: 100%;
-            min-width: 1280px;
-      }
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 100%;
+  }
 }
-@media (min-width: 1280px) {
-      .bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-            width: 80vw;
-      }
+@media (width >= 64rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    min-width: 1280px;
+  }
+}
+@media (width >= 80rem) {
+  :is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+    width: 80vw;
+  }
+}
+:is(.bk-html-root.bk-is-artboard .bk-body) .bk-main-canvas {
+  background: white;
+  user-select: none;
+  image-rendering: crisp-edges;
+  backface-visibility: hidden;
+  transform-origin: 0 0;
+  transform: translateX(-50%) translateY(100px);
+  contain: layout paint inline-size style;
 }
-.bk-html-root.bk-is-artboard .bk-body .bk-main-canvas {
-      background: white;
-      user-select: none;
-      image-rendering: crisp-edges;
-      backface-visibility: hidden;
-      transform-origin: 0 0;
-      /* Set initial position to be centered. The artboard feature will update it on mount. */
-      transform: translateX(-50%) translateY(100px);
-      contain: layout paint inline-size style;
-    }
 </style>

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,38 @@
 <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"
+    >
+      <FormToggle
+        v-model="isEnabled"
+        :disabled
+        :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 +41,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,21 @@
 <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"
+        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 +102,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;