@blokkli/editor 2.0.0-alpha.51 → 2.0.0-alpha.53

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.d.vue.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     /**
      * The (machine) name of the field that is editable.
      */
-    name: string;
+    name?: string | null;
     /**
      * The text value.
      */
@@ -20,6 +20,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
     value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliEditable.vue

@@ -2,7 +2,7 @@
   <component
     :is="tag"
     ref="root"
-    :data-blokkli-editable-field="isEditing ? name : void 0"
+    :data-blokkli-editable-field="isEditingBuild ? name : void 0"
   >
     <slot :value="renderedValue" />
   </component>
@@ -15,7 +15,8 @@ import {
   inject,
   onMounted,
   onBeforeUnmount,
-  useTemplateRef
+  useTemplateRef,
+  watch
 } from "#imports";
 import {
   INJECT_APP,
@@ -25,62 +26,77 @@ import {
   INJECT_IS_IN_REUSABLE
 } from "#blokkli/helpers/injections";
 const props = defineProps({
-  name: { type: String, required: true },
+  name: { type: [String, null], required: false, default: null },
   value: { type: String, required: false, default: "" },
   tag: { type: String, required: false, default: "div" }
 });
 defineSlots();
-const root = useTemplateRef("root");
+const isEditingBuild = import.meta.blokkliEditing;
 const valueOverride = ref("");
-const isEditing = inject(INJECT_IS_EDITING, false);
-const entity = inject(INJECT_ENTITY_CONTEXT, null);
-const editContext = inject(INJECT_EDIT_CONTEXT, null);
-const app = inject(INJECT_APP, null);
-const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
-if (!entity) {
-  throw new Error("Missing entity context.");
-}
-function getValueCallback() {
-  return props.value;
-}
 const renderedValue = computed(() => valueOverride.value || props.value || "");
-const onEditableUpdateValue = (e) => {
-  if (e.name === props.name && e.entityUuid === entity.uuid) {
-    valueOverride.value = e.value;
-  }
-};
-function onStateReloaded() {
-  valueOverride.value = "";
-}
-onMounted(() => {
-  if (!isEditing || !editContext || !app || isInReusable) {
-    return;
-  }
-  editContext.eventBus.on("editable:update", onEditableUpdateValue);
-  editContext.eventBus.on("state:reloaded", onStateReloaded);
-  if (root.value instanceof HTMLElement && entity) {
+if (isEditingBuild) {
+  let getValueCallback = function() {
+    return props.value;
+  }, onStateReloaded = function() {
+    valueOverride.value = "";
+  }, registerDirective = function(name) {
+    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+      return;
+    }
     app.directive.registerDirectiveElement(
       root.value,
-      props.name,
+      name,
       entity,
       "editable",
       true,
       getValueCallback
     );
-  }
-});
-onBeforeUnmount(() => {
-  if (editContext) {
-    editContext.eventBus.off("editable:update", onEditableUpdateValue);
-    editContext.eventBus.off("state:reloaded", onStateReloaded);
-  }
-  if (app && root.value instanceof HTMLElement && entity) {
+  }, unregisterDirective = function(name) {
+    if (!name || !app || !(root.value instanceof HTMLElement) || !entity) {
+      return;
+    }
     app.directive.unregisterDirectiveElement(
       root.value,
-      props.name,
+      name,
       entity,
       "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);
+  const app = inject(INJECT_APP, null);
+  const isInReusable = inject(INJECT_IS_IN_REUSABLE, false);
+  const onEditableUpdateValue = (e) => {
+    if (e.name === props.name && e.entityUuid === entity?.uuid) {
+      valueOverride.value = e.value;
+    }
+  };
+  onMounted(() => {
+    if (!isEditing || !editContext || !app || isInReusable) {
+      return;
+    }
+    editContext.eventBus.on("editable:update", onEditableUpdateValue);
+    editContext.eventBus.on("state:reloaded", onStateReloaded);
+    registerDirective(props.name);
+  });
+  watch(
+    () => props.name,
+    (newName, oldName) => {
+      if (!isEditing || !app || !entity || isInReusable) {
+        return;
+      }
+      unregisterDirective(oldName);
+      registerDirective(newName);
+    }
+  );
+  onBeforeUnmount(() => {
+    if (editContext) {
+      editContext.eventBus.off("editable:update", onEditableUpdateValue);
+      editContext.eventBus.off("state:reloaded", onStateReloaded);
+    }
+    unregisterDirective(props.name);
+  });
+}
 </script>

package/dist/runtime/components/BlokkliEditable.vue.d.ts

@@ -2,7 +2,7 @@ type __VLS_Props = {
     /**
      * The (machine) name of the field that is editable.
      */
-    name: string;
+    name?: string | null;
     /**
      * The text value.
      */
@@ -20,6 +20,7 @@ type __VLS_Slots = {
     }): any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    name: string | null;
     value: string;
     tag: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliItem.d.vue.ts

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
-    isEditing: boolean;
     props: any;
     parentType: string;
     options: any;
     editContext: BlockEditContext;
     index: number;
+    isEditing: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/components/BlokkliItem.vue.d.ts

@@ -22,10 +22,10 @@ declare const __VLS_export: import("vue").DefineComponent<{
     parentType?: string;
     isEditing?: boolean;
 }> & Readonly<{}>, {
-    isEditing: boolean;
     props: any;
     parentType: string;
     options: any;
     editContext: BlockEditContext;
     index: number;
+    isEditing: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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.