@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/modules/iframes/runtime/components/BlokkliIframe/index.vue.d.ts

@@ -0,0 +1,18 @@
+import type { IframeHeightMap } from '../../types.js';
+type __VLS_Props = {
+    src: string;
+    heights: IframeHeightMap;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/modules/iframes/runtime/components/index.d.ts

@@ -0,0 +1 @@
+export { default as BlokkliIframe } from './BlokkliIframe/index.vue.js';

package/dist/modules/iframes/runtime/components/index.js

@@ -0,0 +1 @@
+export { default as BlokkliIframe } from "./BlokkliIframe/index.vue";

package/dist/modules/iframes/runtime/features/iframes/Editor/index.d.vue.ts

@@ -0,0 +1,12 @@
+import type { IframeHeightMap } from '../../../types.js';
+type __VLS_Props = {
+    data: IframeHeightMap | null;
+    uuid: string;
+    optionKey: string;
+};
+declare function getData(): IframeHeightMap;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    getData: typeof getData;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/iframes/runtime/features/iframes/Editor/index.vue

@@ -0,0 +1,220 @@
+<template>
+  <div class="_bk_flex _bk_h-full" @wheel.capture.stop>
+    <!-- Preview area -->
+    <div class="_bk_flex-1 _bk_min-w-0">
+      <div
+        v-if="iframeSrc"
+        class="_bk_overflow-auto _bk_bg-mono-50 _bk_rounded _bk_p-20 _bk_h-full"
+      >
+        <div class="_bk_relative _bk_mx-auto" :style="{ width: containerWidth + 'px' }">
+          <div class="_bk_border _bk_border-mono-200 _bk_overflow-hidden">
+            <iframe
+              :src="iframeSrc"
+              class="_bk_overflow-hidden"
+              scrolling="no"
+              :style="{
+  width: '100%',
+  height: resolved.height + 'px',
+  border: 'none',
+  display: 'block',
+  pointerEvents: isDragging ? 'none' : 'auto'
+}"
+            />
+          </div>
+
+          <!-- Bottom resize handle -->
+          <div
+            class="_bk_flex _bk_items-center _bk_justify-center _bk_cursor-ns-resize _bk_bg-mono-200 _bk_hover:bg-accent-300"
+            style="height: 8px"
+            @pointerdown.prevent="onPointerDown('height', $event)"
+          />
+
+          <!-- Right resize handle -->
+          <div
+            class="_bk_absolute _bk_top-0 _bk_cursor-ew-resize _bk_bg-mono-200 _bk_hover:bg-accent-300"
+            :style="{
+  right: '-8px',
+  width: '8px',
+  height: '100%'
+}"
+            @pointerdown.prevent="onPointerDown('width', $event)"
+          />
+
+          <!-- Corner resize handle -->
+          <div
+            class="_bk_absolute _bk_cursor-nwse-resize _bk_bg-mono-300 _bk_hover:bg-accent-400"
+            :style="{
+  right: '-8px',
+  bottom: '0',
+  width: '8px',
+  height: '8px'
+}"
+            @pointerdown.prevent="onPointerDown('both', $event)"
+          />
+        </div>
+      </div>
+
+      <div v-else class="_bk_text-mono-500 _bk_p-20 _bk_text-center">
+        The block must be rendered on the page before iframe heights can be
+        configured.
+      </div>
+    </div>
+
+    <!-- Sidebar -->
+    <div
+      class="_bk_flex _bk_flex-col _bk_gap-15 _bk_border-l _bk_border-mono-200 _bk_p-15"
+      style="width: 200px; flex-shrink: 0"
+    >
+      <!-- Current dimensions -->
+      <div class="_bk_text-mono-500 _bk_font-mono _bk_text-center" style="font-size: 11px">
+        {{ containerWidth }}px &times; {{ resolved.height }}px
+      </div>
+
+      <!-- Viewport presets -->
+      <div class="_bk_flex _bk_flex-col _bk_gap-3">
+        <div
+          class="_bk_text-mono-500 _bk_font-mono"
+          style="
+            font-size: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+          "
+        >
+          Presets
+        </div>
+        <button
+          v-for="(vp, key) in VIEWPORTS"
+          :key="key"
+          type="button"
+          class="bk-button bk-is-small"
+          :class="{ 'bk-is-primary': containerWidth === vp.width }"
+          @click="containerWidth = vp.width"
+        >
+          {{ vp.label }} ({{ vp.width }}px)
+        </button>
+      </div>
+
+      <!-- Breakpoints list -->
+      <div v-if="sortedEntries.length" class="_bk_flex _bk_flex-col _bk_gap-3">
+        <div
+          class="_bk_text-mono-500 _bk_font-mono"
+          style="
+            font-size: 10px;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+          "
+        >
+          Breakpoints
+        </div>
+        <div
+          v-for="entry in sortedEntries"
+          :key="entry.key"
+          class="_bk_flex _bk_items-center _bk_gap-5 _bk_rounded _bk_px-5 _bk_cursor-pointer"
+          :class="
+  entry.key === resolved.widthKey ? '_bk_bg-accent-100 _bk_text-accent-900' : '_bk_hover:bg-mono-100'
+"
+          style="height: 30px"
+          @click="containerWidth = entry.width"
+        >
+          <span class="_bk_font-mono _bk_flex-1" style="font-size: 12px">
+            {{ entry.width }}px &rarr; {{ entry.height }}px
+          </span>
+          <button
+            type="button"
+            class="_bk_text-mono-400 _bk_hover:text-red-normal"
+            style="font-size: 14px; line-height: 1"
+            @click.stop="deleteEntry(entry.key)"
+          >
+            &times;
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeUnmount, useBlokkli } from "#imports";
+import { VIEWPORTS } from "#blokkli-build/iframes-config";
+const props = defineProps({
+  data: { type: [Object, null], required: true },
+  uuid: { type: String, required: true },
+  optionKey: { type: String, required: true }
+});
+const DEFAULT_HEIGHT = 400;
+const { directive } = useBlokkli();
+const iframeSrc = computed(
+  () => directive.getValueElement(props.uuid, "iframe") || ""
+);
+const heights = ref(
+  props.data && Object.keys(props.data).length > 0 ? { ...props.data } : Object.values(VIEWPORTS).reduce((acc, vp) => {
+    acc[String(vp.width)] = DEFAULT_HEIGHT;
+    return acc;
+  }, {})
+);
+const firstViewport = Object.values(VIEWPORTS)[0];
+const containerWidth = ref(firstViewport?.width ?? 375);
+const sortedEntries = computed(
+  () => Object.entries(heights.value).map(([w, h]) => ({ width: Number(w), height: h, key: w })).filter((e) => !Number.isNaN(e.width)).sort((a, b) => a.width - b.width)
+);
+const resolved = computed(() => {
+  const sorted = sortedEntries.value;
+  if (!sorted.length) {
+    return { height: DEFAULT_HEIGHT, widthKey: "" };
+  }
+  const match = sorted.find((bp) => bp.width >= containerWidth.value);
+  if (match) {
+    return { height: match.height, widthKey: match.key };
+  }
+  const largest = sorted[sorted.length - 1];
+  return { height: largest.height, widthKey: largest.key };
+});
+function deleteEntry(key) {
+  const { [key]: _, ...rest } = heights.value;
+  heights.value = rest;
+}
+const isDragging = ref(false);
+let dragAxis = "height";
+let dragStartX = 0;
+let dragStartY = 0;
+let dragStartWidth = 0;
+let dragStartHeight = 0;
+function onPointerDown(axis, e) {
+  isDragging.value = true;
+  dragAxis = axis;
+  dragStartX = e.clientX;
+  dragStartY = e.clientY;
+  dragStartWidth = containerWidth.value;
+  dragStartHeight = resolved.value.height;
+  document.addEventListener("pointermove", onPointerMove);
+  document.addEventListener("pointerup", onPointerUp);
+}
+function onPointerMove(e) {
+  if (dragAxis === "width" || dragAxis === "both") {
+    const deltaX = e.clientX - dragStartX;
+    containerWidth.value = Math.max(
+      200,
+      Math.round(dragStartWidth + deltaX * 2)
+    );
+  }
+  if (dragAxis === "height" || dragAxis === "both") {
+    const deltaY = e.clientY - dragStartY;
+    const newHeight = Math.max(50, Math.round(dragStartHeight + deltaY));
+    const widthKey = String(containerWidth.value);
+    heights.value = { ...heights.value, [widthKey]: newHeight };
+  }
+}
+function onPointerUp() {
+  isDragging.value = false;
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+}
+onBeforeUnmount(() => {
+  document.removeEventListener("pointermove", onPointerMove);
+  document.removeEventListener("pointerup", onPointerUp);
+});
+function getData() {
+  return heights.value;
+}
+defineExpose({ getData });
+</script>

package/dist/modules/iframes/runtime/features/iframes/Editor/index.vue.d.ts

@@ -0,0 +1,12 @@
+import type { IframeHeightMap } from '../../../types.js';
+type __VLS_Props = {
+    data: IframeHeightMap | null;
+    uuid: string;
+    optionKey: string;
+};
+declare function getData(): IframeHeightMap;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    getData: typeof getData;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/modules/iframes/runtime/types.d.ts

@@ -0,0 +1,10 @@
+/**
+ * A map of container widths (as strings) to iframe heights in pixels.
+ *
+ * The keys correspond to `@container` query breakpoints. For example,
+ * `{ "375": 400, "768": 600, "1440": 800 }` means:
+ * - At container width ≤ 375px, the iframe is 400px tall
+ * - At container width ≤ 768px, the iframe is 600px tall
+ * - At container width > 768px (default), the iframe is 800px tall
+ */
+export type IframeHeightMap = Record<string, number>;

package/dist/modules/index.d.mts

@@ -1,4 +1,4 @@
-export { b as Blokkli, B as BlokkliModule, d as defineBlokkliModule } from '../shared/editor.DsGJIlGn.mjs';
+export { b as Blokkli, B as BlokkliModule, d as defineBlokkliModule } from '../shared/editor.BTOBvmaz.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../dist/global/types/definitions.js';

package/dist/modules/table-of-contents/index.d.mts

@@ -1,4 +1,4 @@
-import { B as BlokkliModule } from '../../shared/editor.DsGJIlGn.mjs';
+import { B as BlokkliModule } from '../../shared/editor.BTOBvmaz.mjs';
 import 'nuxt/schema';
 import 'consola';
 import '../../../dist/global/types/definitions.js';

package/dist/runtime/components/Blocks/NotImplemented/index.vue

@@ -22,3 +22,60 @@ const text = computed(() => {
 });
 useBlockRegistration(dom, props.uuid);
 </script>
+
+<style>
+.bk.bk-block-not-implemented {
+
+    --bk-tw-bg-opacity: 1;
+
+    background-color: rgb(var(--bk-theme-red-light) / var(--bk-tw-bg-opacity, 1));
+
+    padding-top: 15px;
+
+    padding-bottom: 15px;
+
+    font-family: PB Inter, sans-serif;
+
+    font-weight: 500;
+
+    --bk-tw-text-opacity: 1;
+
+    color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
+
+    border-radius: 6px;
+
+    font-size: 18px;
+
+    line-height: 28px;
+
+    outline-style: solid;
+
+    outline-width: 1px;
+
+    outline-offset: -1px;
+
+    outline-color: rgb(var(--bk-theme-red-normal) / 0.3);
+
+    display: flex;
+
+    align-items: center;
+
+    justify-content: center;
+
+    gap: 5px
+}
+
+  .bk.bk-block-not-implemented strong {
+
+    font-weight: 700 !important
+}
+
+  .bk.bk-block-not-implemented svg {
+
+    fill: currentColor;
+
+    width: 25px;
+
+    height: 25px
+}
+</style>

package/dist/runtime/components/BlokkliEditable.vue

@@ -32,7 +32,6 @@ const props = defineProps({
 });
 defineSlots();
 const isEditingBuild = import.meta.blokkliEditing;
-const root = useTemplateRef("root");
 const valueOverride = ref("");
 const renderedValue = computed(() => valueOverride.value || props.value || "");
 if (isEditingBuild) {
@@ -63,6 +62,7 @@ if (isEditingBuild) {
       "editable"
     );
   };
+  const root = useTemplateRef("root");
   const isEditing = inject(INJECT_IS_EDITING, false);
   const entity = inject(INJECT_ENTITY_CONTEXT, null);
   const editContext = inject(INJECT_EDIT_CONTEXT, null);

package/dist/runtime/editor/adapter/index.d.ts

@@ -2,7 +2,7 @@ import type { ComputedRef } from 'vue';
 import type { AddNewBlockEvent, AddNewBlocksEvent, MoveBlockEvent, MoveMultipleBlocksEvent } from '../events/index.js';
 import type { PluginConfigInput } from '../types/pluginConfig.js';
 import type { EntityTranslation, MappedState } from '../types/state.js';
-import type { BlockBundleDefinition, FieldConfig } from '../types/definitions.js';
+import type { BlockBundleDefinition, EntityTypeBundleInfo, EntityTypeInfo, FieldConfig } from '../types/definitions.js';
 import type { EditBlockEvent } from '../features/edit/types.js';
 import type { UserPermissions } from '../types/permissions.js';
 export interface MutationResponseLike<T> {
@@ -10,6 +10,11 @@ export interface MutationResponseLike<T> {
     state?: T;
     errors?: string[];
 }
+export interface GenericAdapterResponse<T> {
+    success: boolean;
+    data: T;
+    errors?: string[];
+}
 export type UpdateEntityFieldValueEvent = {
     fieldName: string;
     fieldValue: string;
@@ -120,6 +125,8 @@ export interface BlokkliAdapter<T> {
          */
         persist: (settings: string) => Promise<undefined>;
     };
+    getEntityTypeInfo?: (entityType: string) => EntityTypeInfo | null;
+    getEntityBundleInfo?: (entityType: string, bundle: string) => EntityTypeBundleInfo | null;
 }
 /**
  * Methods that adapter extensions can implement.

package/dist/runtime/editor/components/Actions/Interactions/index.vue

@@ -3,39 +3,43 @@
     <button
       type="button"
       :disabled="!canSelectParent"
+      class="_bk_group/tooltip"
       @click.prevent="onClickSelectParent"
     >
       <Icon name="bk_mdi_arrow_top_left" />
-      <div class="bk-tooltip">
-        {{
-          parentLabel ? $t("actionsSelectParent", "Select parent (@label)").replace(
-  "@label",
-  parentLabel
-) : $t("actionsSelectPage", "Select page")
-        }}
-      </div>
+      <Tooltip
+        :label="
+  parentLabel ? $t('actionsSelectParent', 'Select parent (@label)').replace(
+    '@label',
+    parentLabel
+  ) : $t('actionsSelectPage', 'Select page')
+"
+        placement="above-left"
+      />
     </button>
     <button
       type="button"
+      class="_bk_group/tooltip"
       :disabled="!canMove"
       @pointerdown.stop.prevent="onMovePointerDown"
     >
       <Icon name="bk_mdi_drag_pan" />
-      <div class="bk-tooltip">
-        {{
-          selection.uuids.value.length === 1 ? $t("actionsMoveBlock", "Move block") : $t("actionsMoveBlocks", "Move @count blocks").replace(
-  "@count",
-  String(selection.uuids.value.length)
-)
-        }}
-      </div>
+      <Tooltip
+        :label="
+  selection.uuids.value.length === 1 ? $t('actionsMoveBlock', 'Move block') : $t('actionsMoveBlocks', 'Move @count blocks').replace(
+    '@count',
+    String(selection.uuids.value.length)
+  )
+"
+        placement="above-left"
+      />
     </button>
   </div>
 </template>
 
 <script setup>
 import { computed, useBlokkli } from "#imports";
-import { Icon } from "#blokkli/editor/components";
+import { Icon, Tooltip } from "#blokkli/editor/components";
 import { toDraggableExisting } from "#blokkli/editor/helpers/draggable";
 const { selection, $t, state, eventBus, ui, types } = useBlokkli();
 const canMove = computed(() => {
@@ -108,3 +112,59 @@ export default {
   name: "Interactions"
 };
 </script>
+
+<style>
+.bk .bk-blokkli-item-actions-interactions {
+    position: relative;
+    height: 50px;
+    width: 25px
+}
+@media (min-width: 1024px) {
+    .bk .bk-blokkli-item-actions-interactions {
+        border-right-width: 1px;
+        --bk-tw-border-opacity: 1;
+        border-right-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+    }
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button {
+    width: 25px;
+    height: 25px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:hover {
+    --bk-tw-bg-opacity: 1;
+    background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button[disabled] {
+    pointer-events: none;
+    --bk-tw-text-opacity: 1;
+    color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:first-child {
+    border-top-left-radius: 6px;
+    border-bottom-width: 1px;
+    --bk-tw-border-opacity: 1;
+    border-bottom-color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-border-opacity, 1))
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button:nth-child(2) {
+    cursor: grab;
+    border-bottom-left-radius: 6px
+}
+
+  .bk .bk-blokkli-item-actions-interactions > button svg {
+    width: 13px;
+    height: 13px;
+    fill: currentColor
+}
+</style>

package/dist/runtime/editor/components/Actions/{ItemDropdown.vue → ItemDropdown/index.vue}

@@ -1,8 +1,5 @@
 <template>
-  <div
-    id="bk-blokkli-item-actions-dropdown"
-    class="bk-blokkli-item-actions-type-dropdown"
-  >
+  <div>
     <div
       v-for="group in groups"
       :key="group.name"
@@ -11,8 +8,8 @@
       <ol>
         <li v-for="action in group.actions" :key="action.id">
           <button
-            class="bk-blokkli-item-actions-type-dropdown-button"
-            :class="'bk-is-variant-' + action.variant || 'default'"
+            class="bk-blokkli-item-actions-type-dropdown-button _bk_group/tooltip"
+            :class="'bk-is-variant-' + action.variant || '_bk_default'"
             :disabled="action.enabled === false"
             @click.prevent="onActionClick(action)"
           >
@@ -23,9 +20,11 @@
             <div>
               <div>{{ action.label }}</div>
             </div>
-            <div v-if="action.description" class="bk-tooltip">
-              {{ action.description }}
-            </div>
+            <Tooltip
+              v-if="action.description"
+              :label="action.description"
+              placement="center-after"
+            />
           </button>
         </li>
       </ol>
@@ -35,7 +34,7 @@
 
 <script setup>
 import { useBlokkli } from "#imports";
-import { ItemIcon, Icon } from "#blokkli/editor/components";
+import { ItemIcon, Icon, Tooltip } from "#blokkli/editor/components";
 const emit = defineEmits(["close"]);
 const { plugins } = useBlokkli();
 function getGroupedActions() {