@blokkli/editor 2.0.0-alpha.35 → 2.0.0-alpha.36

package/dist/runtime/editor/features/options/Form/Range/index.vue

@@ -9,7 +9,7 @@
 import { computed } from "#imports";
 const props = defineProps({
   label: { type: String, required: true },
-  modelValue: { type: String, required: false },
+  modelValue: { type: Number, required: false },
   min: { type: Number, required: true },
   max: { type: Number, required: true },
   step: { type: Number, required: true }
@@ -17,14 +17,14 @@ const props = defineProps({
 const emit = defineEmits(["update:modelValue"]);
 const text = computed({
   get() {
-    return props.modelValue || "0";
+    return String(props.modelValue ?? 0);
   },
   set(v) {
-    emit("update:modelValue", (v === void 0 ? "" : v).toString());
+    emit("update:modelValue", Number(v) || 0);
   }
 });
 const formatted = computed(() => {
-  const numValue = typeof text.value === "string" ? Number.parseFloat(text.value) : text.value;
+  const numValue = props.modelValue ?? 0;
   const stepPrecision = (props.step.toString().split(".")[1] || "").length;
   return numValue.toFixed(stepPrecision);
 });

package/dist/runtime/editor/features/options/Form/Range/index.vue.d.ts

@@ -2,7 +2,7 @@ declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: import("vue").DefineComponent<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;
@@ -10,7 +10,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     "update:modelValue": (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<{
     label: string;
-    modelValue?: string;
+    modelValue?: number;
     min: number;
     max: number;
     step: number;

package/dist/runtime/editor/features/options/Form/index.vue

@@ -266,21 +266,26 @@ const optionGroups = computed(() => {
   );
 });
 function setOptionValue(key, value) {
+  const optionDef = availableOptions.value.find((o) => o.property === key);
+  const storable = optionDef ? optionValueToStorable(
+    optionDef.option,
+    value
+  ) : String(value);
   if (Array.isArray(props.uuids)) {
     props.uuids.forEach((uuid) => {
-      updated.set(uuid, key, value);
+      updated.set(uuid, key, storable);
       if (!state.mutatedOptions[uuid]) {
         state.mutatedOptions[uuid] = {};
       }
-      state.mutatedOptions[uuid][key] = value;
-      eventBus.emit("option:update", { uuid, key, value });
+      state.mutatedOptions[uuid][key] = storable;
+      eventBus.emit("option:update", { uuid, key, value: storable });
     });
   } else {
-    updated.set("HOST", key, value);
+    updated.set("HOST", key, storable);
     if (!state.mutatedOptions.HOST) {
       state.mutatedOptions.HOST = {};
     }
-    state.mutatedOptions.HOST[key] = value;
+    state.mutatedOptions.HOST[key] = storable;
   }
 }
 onMounted(() => {

package/dist/runtime/editor/features/selection/index.vue

@@ -231,7 +231,7 @@ function selectInList(prev) {
   }
 }
 onBlokkliEvent("keyPressed", (e) => {
-  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value) {
+  if (selection.isDragging.value || selection.isMultiSelecting.value || ui.hasDialogOpen.value || ui.hasTooltipOpen.value || ui.hasNestedEditorOpen.value) {
     return;
   }
   if (e.code === "Escape") {
@@ -240,7 +240,7 @@ onBlokkliEvent("keyPressed", (e) => {
       eventBus.emit("select:host:unselect");
     }
   } else if (e.code === "Tab") {
-    if (tour.isTouring.value || ui.hasDialogOpen.value) {
+    if (tour.isTouring.value || ui.hasDialogOpen.value || ui.hasNestedEditorOpen.value) {
       return;
     }
     e.originalEvent.preventDefault();

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

@@ -118,9 +118,7 @@ function cancelTransform() {
 }
 watch(selection.uuids, async () => {
   if (status.value === "idle") {
-    execute().then(() => {
-      console.log(plugins.value);
-    });
+    await execute();
   }
 });
 watch(selection.hasHostSelected, () => {

package/dist/runtime/editor/plugins/Sidebar/index.d.vue.ts

@@ -191,9 +191,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         height: number;
     };
     minHeight: number;
+    tourText: string;
     minWidth: number;
     region: SidebarRegion;
-    tourText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/plugins/Sidebar/index.vue.d.ts

@@ -191,9 +191,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
         height: number;
     };
     minHeight: number;
+    tourText: string;
     minWidth: number;
     region: SidebarRegion;
-    tourText: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     icon?: (props: {}) => any;
 } & {

package/dist/runtime/editor/providers/definition.d.ts

@@ -1,6 +1,6 @@
 import { type Ref, type ComputedRef } from '#imports';
 import type { BlockDefinition, FragmentDefinition, ProviderDefinition } from '#blokkli-build/definitions';
-import type { ValidFieldListTypes, BlockBundleWithNested } from '#blokkli-build/generated-types';
+import type { ValidFieldListTypes, BlockBundleWithNested, ValidProviderTypes } from '#blokkli-build/generated-types';
 import type { DeepReadonly } from 'vue';
 import type { BlockDefinitionOptionsInput } from '../../types/definitions.js';
 import type { RuntimeBlockOptionArray } from '../../../global/types/blockOptions.js';
@@ -95,4 +95,4 @@ export type DefinitionProvider = {
      */
     bundlesWithAutoAdd: ComputedRef<string[]>;
 };
-export default function (): DefinitionProvider;
+export default function (providerType: ValidProviderTypes): DefinitionProvider;

package/dist/runtime/editor/providers/definition.js

@@ -1,7 +1,7 @@
 import { computed, ref, readonly } from "#imports";
 import definitions from "#blokkli-build/definitions";
 import { OPTIONS } from "#blokkli-build/runtime-options";
-export default function() {
+export default function(providerType) {
   const blocks = ref(definitions.blocks);
   const fragments = ref(definitions.fragments);
   const providers = ref(definitions.providers);
@@ -42,6 +42,8 @@ export default function() {
             acc[bundle + "__field:" + renderFor.fieldList] = definition;
           } else if ("fieldListType" in renderFor) {
             acc[bundle + "__field:" + renderFor.fieldListType] = definition;
+          } else if (renderFor.providerType) {
+            acc[bundle + "__provider:" + renderFor.providerType] = definition;
           }
         });
       } else {
@@ -80,6 +82,10 @@ export default function() {
         return blocksByKey.value[forParentBundle];
       }
     }
+    const forProviderType = bundle + "__provider:" + providerType;
+    if (blocksByKey.value[forProviderType]) {
+      return blocksByKey.value[forProviderType];
+    }
     return blocksByKey.value[bundle];
   }
   function getFragmentDefinition(name) {

package/dist/runtime/editor/providers/dom.d.ts

@@ -7,6 +7,7 @@ import type { ElementProvider } from './element.js';
 import type { Rectangle } from '../types/geometry.js';
 import type { DraggableExistingBlock, DraggableItem } from '../types/draggable.js';
 import type { RegisteredField, RegisterFieldData, RenderedFieldListItem } from '../types/field.js';
+import type { BlokkliFragmentName } from '#blokkli-build/definitions';
 type RegisteredFieldType = {
     entityType: string;
     entityBundle: string;
@@ -186,6 +187,10 @@ export type DomProvider = {
      * Get the drag element for a block.
      */
     getDragElement: (block: DraggableExistingBlock | RenderedFieldListItem) => HTMLElement | undefined;
+    /**
+     * The fragments that are generally available to be added anywhere on the page.
+     */
+    generallyAvailableFragments: ComputedRef<BlokkliFragmentName[]>;
     /**
      * Get debug data for troubleshooting.
      */

package/dist/runtime/editor/providers/dom.js

@@ -1,5 +1,5 @@
 import { reactive, ref, computed, onMounted } from "#imports";
-import { falsy } from "#blokkli/helpers";
+import { falsy, onlyUnique } from "#blokkli/helpers";
 import { cloneElementWithStyles } from "../helpers/dom/index.js";
 import {
   onBlokkliEvent,
@@ -28,6 +28,14 @@ export default function(ui, debug, state, element) {
   const isInitalizing = ref(true);
   let settleTimeout = null;
   const settleKey = ref(0);
+  const generallyAvailableFragments = computed(() => {
+    return Object.values(registeredFields).flatMap((field) => {
+      if (field && field.allowedFragments.length) {
+        return field.allowedFragments;
+      }
+      return null;
+    }).filter(falsy).filter(onlyUnique);
+  });
   const observedElements = {};
   function getBoundingClientRect(element2) {
     logger.log("getBoundingClientRect", element2);
@@ -526,6 +534,7 @@ export default function(ui, debug, state, element) {
     getRegisteredField,
     getFieldsAllowingFragment,
     registeredBlocks: computed(() => registeredBlocks),
-    getBoundingClientRect
+    getBoundingClientRect,
+    generallyAvailableFragments
   };
 }

package/dist/runtime/editor/providers/fields.d.ts

@@ -1,6 +1,7 @@
 import type { BlokkliFieldElement } from '../types/field.js';
 import type { DomProvider } from './dom.js';
 import type { BlockDefinitionProvider } from './types.js';
+import type { StateProvider } from './state.js';
 export type FieldsProvider = {
     /**
      * Find a field element by host entity UUID and field name.
@@ -19,5 +20,22 @@ export type FieldsProvider = {
      * @returns The field element with metadata, or undefined if not found
      */
     find: (uuid: string, fieldName: string) => BlokkliFieldElement | undefined;
+    /**
+     * Get the z-index of the field containing the given block UUID.
+     *
+     * @param uuid - The block UUID
+     * @returns The z-index of the field, or 0 if not found
+     */
+    getFieldZIndex: (uuid: string) => number;
+    /**
+     * Compare field priority between two blocks.
+     * Returns > 0 if uuidA wins, < 0 if uuidB wins, 0 if equal.
+     * Uses z-index as primary sort, DOM order as tiebreaker.
+     *
+     * @param uuidA - First block UUID
+     * @param uuidB - Second block UUID
+     * @returns Comparison result
+     */
+    compareFieldPriority: (uuidA: string, uuidB: string) => number;
 };
-export default function (dom: DomProvider, types: BlockDefinitionProvider): FieldsProvider;
+export default function (dom: DomProvider, types: BlockDefinitionProvider, state: StateProvider): FieldsProvider;

package/dist/runtime/editor/providers/fields.js

@@ -1,6 +1,8 @@
 import { onBlokkliEvent } from "#blokkli/editor/composables";
-export default function(dom, types) {
+export default function(dom, types, state) {
   const fieldCache = /* @__PURE__ */ new Map();
+  const fieldInfoCache = /* @__PURE__ */ new Map();
+  const comparisonCache = /* @__PURE__ */ new Map();
   function find(uuid, fieldName) {
     const key = uuid + ":" + fieldName;
     const cached = fieldCache.get(key);
@@ -38,10 +40,60 @@ export default function(dom, types) {
     fieldCache.set(key, fieldElement);
     return fieldElement;
   }
+  function getFieldInfo(uuid) {
+    const cached = fieldInfoCache.get(uuid);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldKey = state.getFieldKeyForUuid(uuid);
+    if (!fieldKey) {
+      fieldInfoCache.set(uuid, null);
+      return null;
+    }
+    const separatorIndex = fieldKey.indexOf(":");
+    const entityUuid = fieldKey.substring(0, separatorIndex);
+    const fieldName = fieldKey.substring(separatorIndex + 1);
+    const field = dom.getRegisteredField(entityUuid, fieldName);
+    const info = field ? { zIndex: field.zIndex, element: field.element } : null;
+    fieldInfoCache.set(uuid, info);
+    return info;
+  }
+  function getFieldZIndex(uuid) {
+    return getFieldInfo(uuid)?.zIndex ?? 0;
+  }
+  function compareFieldPriority(uuidA, uuidB) {
+    const cacheKey = uuidA + "\0" + uuidB;
+    const cached = comparisonCache.get(cacheKey);
+    if (cached !== void 0) {
+      return cached;
+    }
+    const fieldA = getFieldInfo(uuidA);
+    const fieldB = getFieldInfo(uuidB);
+    const zIndexA = fieldA?.zIndex ?? 0;
+    const zIndexB = fieldB?.zIndex ?? 0;
+    let result = 0;
+    if (zIndexA !== zIndexB) {
+      result = zIndexA - zIndexB;
+    } else {
+      const elA = fieldA?.element;
+      const elB = fieldB?.element;
+      if (elA && elB && elA !== elB) {
+        const position = elA.compareDocumentPosition(elB);
+        if (position & Node.DOCUMENT_POSITION_FOLLOWING) result = -1;
+        else if (position & Node.DOCUMENT_POSITION_PRECEDING) result = 1;
+      }
+    }
+    comparisonCache.set(cacheKey, result);
+    return result;
+  }
   onBlokkliEvent("state:reloaded", () => {
     fieldCache.clear();
+    fieldInfoCache.clear();
+    comparisonCache.clear();
   });
   return {
-    find
+    find,
+    getFieldZIndex,
+    compareFieldPriority
   };
 }

package/dist/runtime/editor/translations/de.json

@@ -92,7 +92,7 @@
     "translation": "@bundle mit Inhalts-ID @id hinzugefügt"
   },
   "aiAgentAddContentSearchBlockRunning": {
-    "source": "Adding content block...",
+    "source": "Adding content paragraph...",
     "translation": "Inhalts-Block hinzufügen..."
   },
   "aiAgentAddFragmentDone": {
@@ -203,6 +203,14 @@
     "source": "Connecting...",
     "translation": "Verbinden..."
   },
+  "aiAgentCreateChartDone": {
+    "source": "Added chart",
+    "translation": "Diagramm hinzugefügt"
+  },
+  "aiAgentCreateChartRunning": {
+    "source": "Creating chart...",
+    "translation": "Diagramm wird erstellt..."
+  },
   "aiAgentCreatePlan": {
     "source": "Plan: @label",
     "translation": "Plan: @label"
@@ -347,6 +355,18 @@
     "source": "Getting bundle info...",
     "translation": "Bundle-Info abrufen..."
   },
+  "aiAgentGetChartDataDone": {
+    "source": "Got chart data",
+    "translation": "Diagrammdaten geladen"
+  },
+  "aiAgentGetChartDataRunning": {
+    "source": "Getting chart data...",
+    "translation": "Diagrammdaten werden geladen..."
+  },
+  "aiAgentGetChartTypeOptionsRunning": {
+    "source": "Getting chart options...",
+    "translation": "Diagrammoptionen werden geladen..."
+  },
   "aiAgentGetChildBlocks": {
     "source": "Get child blocks",
     "translation": "Kind-Blöcke abrufen"
@@ -383,6 +403,14 @@
     "source": "Getting mutation history...",
     "translation": "Änderungsverlauf abrufen..."
   },
+  "aiAgentGetPageStructureDone": {
+    "source": "Got page structure (@count paragraphs)",
+    "translation": "Seitenstruktur erhalten (@count Absätze)"
+  },
+  "aiAgentGetPageStructureRunning": {
+    "source": "Getting page structure...",
+    "translation": "Seitenstruktur wird geladen..."
+  },
   "aiAgentGetSelectedBlocksDone": {
     "source": "@count block(s) selected",
     "translation": "@count Blöcke ausgewählt"
@@ -495,6 +523,10 @@
     "source": "Replacing media...",
     "translation": "Medien ersetzen..."
   },
+  "aiAgentRetry": {
+    "source": "Retry",
+    "translation": "Erneut versuchen"
+  },
   "aiAgentSearchLibraryDone": {
     "source": "Searched library",
     "translation": "Bibliothek durchsucht"
@@ -607,6 +639,14 @@
     "source": "Unknown message type",
     "translation": "Unbekannter Nachrichtentyp"
   },
+  "aiAgentUpdateChartDone": {
+    "source": "Updated chart",
+    "translation": "Diagramm aktualisiert"
+  },
+  "aiAgentUpdateChartRunning": {
+    "source": "Updating chart...",
+    "translation": "Diagramm wird aktualisiert..."
+  },
   "aiAgentUpdateOptionsOnBlockDone": {
     "source": "Updated @count option(s) on block",
     "translation": "@count Option(en) auf Block aktualisiert"
@@ -919,6 +959,226 @@
     "source": "Cancel selection",
     "translation": "Auswahl abbrechen"
   },
+  "chartsAddColumn": {
+    "source": "Add column",
+    "translation": "Spalte hinzufügen"
+  },
+  "chartsAddFootnote": {
+    "source": "Add footnote",
+    "translation": "Fussnote hinzufügen"
+  },
+  "chartsAddRow": {
+    "source": "Add row",
+    "translation": "Zeile hinzufügen"
+  },
+  "chartsAreaCurved": {
+    "source": "Smooth curves",
+    "translation": "Glatte Kurven"
+  },
+  "chartsAreaMarkers": {
+    "source": "Show markers",
+    "translation": "Markierungen anzeigen"
+  },
+  "chartsAutoUpdate": {
+    "source": "Auto-update",
+    "translation": "Automatisch aktualisieren"
+  },
+  "chartsBarHorizontal": {
+    "source": "Horizontal",
+    "translation": "Horizontal"
+  },
+  "chartsBarStacked": {
+    "source": "Stacked",
+    "translation": "Gestapelt"
+  },
+  "chartsBorderRadius": {
+    "source": "Corner radius",
+    "translation": "Eckenradius"
+  },
+  "chartsBorderRadiusLarge": {
+    "source": "Large",
+    "translation": "Gross"
+  },
+  "chartsBorderRadiusNone": {
+    "source": "None",
+    "translation": "Keine"
+  },
+  "chartsBorderRadiusSmall": {
+    "source": "Small",
+    "translation": "Klein"
+  },
+  "chartsData": {
+    "source": "Data",
+    "translation": "Daten"
+  },
+  "chartsDataLabels": {
+    "source": "Data labels",
+    "translation": "Datenbeschriftungen"
+  },
+  "chartsDonutShowLabels": {
+    "source": "Show labels",
+    "translation": "Beschriftungen anzeigen"
+  },
+  "chartsDonutShowTotal": {
+    "source": "Show total",
+    "translation": "Total anzeigen"
+  },
+  "chartsEditorSaveError": {
+    "source": "The chart could not be saved.",
+    "translation": "Das Diagramm konnte nicht gespeichert werden."
+  },
+  "chartsEditorTitle": {
+    "source": "Edit chart",
+    "translation": "Diagramm bearbeiten"
+  },
+  "chartsFootnotes": {
+    "source": "Footnotes",
+    "translation": "Fussnoten"
+  },
+  "chartsGridLines": {
+    "source": "Grid lines",
+    "translation": "Rasterlinien"
+  },
+  "chartsImportCsv": {
+    "source": "Import CSV",
+    "translation": "CSV importieren"
+  },
+  "chartsLegendPosition": {
+    "source": "Legend position",
+    "translation": "Legendenposition"
+  },
+  "chartsLineCurved": {
+    "source": "Smooth curves",
+    "translation": "Glatte Kurven"
+  },
+  "chartsLineMarkers": {
+    "source": "Show markers",
+    "translation": "Markierungen anzeigen"
+  },
+  "chartsOpacityLight": {
+    "source": "Light",
+    "translation": "Leicht"
+  },
+  "chartsOpacitySolid": {
+    "source": "Solid",
+    "translation": "Deckend"
+  },
+  "chartsOpacityTransparent": {
+    "source": "Transparent",
+    "translation": "Transparent"
+  },
+  "chartsOptionGroupDisplay": {
+    "source": "Display",
+    "translation": "Darstellung"
+  },
+  "chartsOptionGroupLabels": {
+    "source": "Labels",
+    "translation": "Beschriftungen"
+  },
+  "chartsPieShowLabels": {
+    "source": "Show labels",
+    "translation": "Beschriftungen anzeigen"
+  },
+  "chartsPositionBottom": {
+    "source": "Bottom",
+    "translation": "Unten"
+  },
+  "chartsPositionRight": {
+    "source": "Right",
+    "translation": "Rechts"
+  },
+  "chartsPositionTop": {
+    "source": "Top",
+    "translation": "Oben"
+  },
+  "chartsPreview": {
+    "source": "Preview",
+    "translation": "Vorschau"
+  },
+  "chartsPreviewPlaceholder": {
+    "source": "Click \"Refresh Preview\" to see the chart.",
+    "translation": "Klicken Sie auf «Vorschau aktualisieren», um das Diagramm anzuzeigen."
+  },
+  "chartsRadarFillOpacity": {
+    "source": "Fill opacity",
+    "translation": "Fülldeckkraft"
+  },
+  "chartsRadarMarkers": {
+    "source": "Show markers",
+    "translation": "Markierungen anzeigen"
+  },
+  "chartsRadialBarShowLabels": {
+    "source": "Show labels",
+    "translation": "Beschriftungen anzeigen"
+  },
+  "chartsRadialBarShowTotal": {
+    "source": "Show total",
+    "translation": "Total anzeigen"
+  },
+  "chartsRefreshPreview": {
+    "source": "Refresh Preview",
+    "translation": "Vorschau aktualisieren"
+  },
+  "chartsRotationAuto": {
+    "source": "Auto",
+    "translation": "Automatisch"
+  },
+  "chartsStrokeMedium": {
+    "source": "Medium",
+    "translation": "Mittel"
+  },
+  "chartsStrokeThick": {
+    "source": "Thick",
+    "translation": "Dick"
+  },
+  "chartsStrokeThin": {
+    "source": "Thin",
+    "translation": "Dünn"
+  },
+  "chartsStrokeWidth": {
+    "source": "Line thickness",
+    "translation": "Linienstärke"
+  },
+  "chartsTitle": {
+    "source": "Title",
+    "translation": "Titel"
+  },
+  "chartsTypeArea": {
+    "source": "Area",
+    "translation": "Fläche"
+  },
+  "chartsTypeBar": {
+    "source": "Bar",
+    "translation": "Balken"
+  },
+  "chartsTypeDonut": {
+    "source": "Donut",
+    "translation": "Donut"
+  },
+  "chartsTypeHeatmap": {
+    "source": "Heatmap",
+    "translation": "Heatmap"
+  },
+  "chartsTypeLine": {
+    "source": "Line",
+    "translation": "Linie"
+  },
+  "chartsTypePie": {
+    "source": "Pie",
+    "translation": "Kreis"
+  },
+  "chartsTypeRadar": {
+    "source": "Radar",
+    "translation": "Radar"
+  },
+  "chartsTypeRadialBar": {
+    "source": "Radial Bar",
+    "translation": "Radialdiagramm"
+  },
+  "chartsXAxisRotation": {
+    "source": "Label rotation",
+    "translation": "Beschriftungswinkel"
+  },
   "clearInput": {
     "source": "Clear input",
     "translation": "Eingabe löschen"
@@ -1327,6 +1587,14 @@
     "source": "Breadcrumbs",
     "translation": "Breadcrumbs"
   },
+  "feature_charts_description": {
+    "source": "Add and edit interactive charts.",
+    "translation": "Interaktive Diagramme hinzufügen und bearbeiten."
+  },
+  "feature_charts_label": {
+    "source": "Charts",
+    "translation": "Diagramme"
+  },
   "feature_clipboard_description": {
     "source": "Provides clipboard integration to copy/paste existing blocks or paste supported clipboard content like text or images.",
     "translation": "Stellt Zwischenablage-Integration bereit zum Kopieren/Einfügen von bestehenden Blöcken oder zum Einfügen von unterstützten Inhalten wie Text oder Bildern."