@blokkli/editor 2.0.0-alpha.62 → 2.0.0-alpha.63

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

@@ -94,6 +94,7 @@
   "commentsMarkAsUnresolved": "Segna come non risolto",
   "commentsShowResolved": "Mostra risolti",
   "deleteError": "L'elemento non può essere rimosso.",
+  "deleted": "eliminato",
   "duplicate": "Duplica",
   "duplicateError": "Gli elementi non possono essere duplicati.",
   "edit": "Modifica",
@@ -163,8 +164,5 @@
   "settingsDialogTitle": "Impostazioni",
   "settingsMenuDescription": "Impostazioni personali per l'editor",
   "structureToolbarLabel": "Struttura",
-  "translationsBatchTranslateMenuDescription": "Traduci tutti gli elementi",
-  "userDeleted": "[eliminato]",
-  "validationsNoneFound": "Nessun errore di validazione trovato.",
-  "validationsToolbarLabel": "Validazioni"
+  "translationsBatchTranslateMenuDescription": "Traduci tutti gli elementi"
 }

package/dist/runtime/helpers/colors.d.ts

@@ -0,0 +1,39 @@
+import type { ColorOption } from '../types/colors.js';
+/**
+ * Pure runtime helpers for color identity and id validation. No Vue/Nuxt
+ * deps — safe to import from any layer (runtime components, editor
+ * providers, agent tools, tests).
+ *
+ * Id space:
+ *   - Flat color:   `<base>`            (no dot)
+ *   - Ramped color: `<base>.<shade>`    (shade-qualified)
+ *
+ * The bare `<base>` form for a ramped color is NOT a valid color id anywhere
+ * in the system. Everything that emits ids — the editor's `ColorDropdown`,
+ * the chart helpers (`getColorIdAtIndex`), the agent's `chartColorEnum` —
+ * uses the canonical shade-qualified form.
+ *
+ * Hex resolution at runtime goes through
+ * `useBlokkliRuntimeConfig().resolveColorHex(id)`, which reads the merged
+ * view directly from `app.config.blokkli.colorOptions`. No merge function
+ * lives here — Nuxt's app.config layer already handles override merging.
+ */
+export declare const FALLBACK_HEX = "#888888";
+export declare function parseColorId(id: string): {
+    baseId: string;
+    shadeId: string | undefined;
+};
+/**
+ * Canonical id for a color option:
+ *   - Flat color:   the bare id.
+ *   - Ramped color: `<base>.<mainShade>`. Falls back to the first declared
+ *                   shade if none is marked `isMain`.
+ */
+export declare function canonicalColorId(option: ColorOption): string;
+export declare function findColorOption(id: string, options: ColorOption[]): ColorOption | undefined;
+/**
+ * Strict id validity: bare for flat colors, `<base>.<shade>` for ramped
+ * colors with the shade actually declared. Bare ids for ramped colors and
+ * shade-qualified ids for flat colors both return false.
+ */
+export declare function isColorIdValid(id: string, options: ColorOption[]): boolean;

package/dist/runtime/helpers/colors.js

@@ -0,0 +1,28 @@
+export const FALLBACK_HEX = "#888888";
+export function parseColorId(id) {
+  const dotIndex = id.indexOf(".");
+  if (dotIndex === -1) {
+    return { baseId: id, shadeId: void 0 };
+  }
+  return {
+    baseId: id.slice(0, dotIndex),
+    shadeId: id.slice(dotIndex + 1)
+  };
+}
+export function canonicalColorId(option) {
+  if (!option.shades?.length) return option.id;
+  const main = option.shades.find((s) => s.isMain) ?? option.shades[0];
+  return `${option.id}.${main.id}`;
+}
+export function findColorOption(id, options) {
+  return options.find((c) => c.id === parseColorId(id).baseId);
+}
+export function isColorIdValid(id, options) {
+  const { baseId, shadeId } = parseColorId(id);
+  const option = options.find((c) => c.id === baseId);
+  if (!option) return false;
+  if (option.shades?.length) {
+    return shadeId !== void 0 && option.shades.some((s) => s.id === shadeId);
+  }
+  return shadeId === void 0;
+}

package/dist/runtime/types/colors.d.ts

@@ -0,0 +1,11 @@
+export type ColorShade = {
+    id: string;
+    hex: string;
+    isMain: boolean;
+};
+export type ColorOption = {
+    id: string;
+    hex: string;
+    label: string;
+    shades?: ColorShade[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blokkli/editor",
-  "version": "2.0.0-alpha.62",
+  "version": "2.0.0-alpha.63",
   "description": "Interactive page building experience for Nuxt",
   "keywords": [
     "cms",

package/dist/runtime/editor/features/validations/Overlay/Item.d.vue.ts

@@ -1,7 +0,0 @@
-type __VLS_Props = {
-    uuid: string;
-    messages: string[];
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/Overlay/Item.vue

@@ -1,36 +0,0 @@
-<template>
-  <div :style="style">
-    <div v-html="messages.join(', ')" />
-  </div>
-</template>
-
-<script setup>
-import { useBlokkli, ref, computed } from "#imports";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
-const { dom } = useBlokkli();
-const props = defineProps({
-  uuid: { type: String, required: true },
-  messages: { type: Array, required: true }
-});
-const rect = ref(null);
-const style = computed(() => {
-  if (!rect.value) {
-    return;
-  }
-  return {
-    transform: `translate(${rect.value.x}px, ${rect.value.y}px)`,
-    width: rect.value.width + "px",
-    height: rect.value.height + "px"
-  };
-});
-onBlokkliEvent("canvas:draw", () => {
-  const newRect = dom.getBlockRect(props.uuid);
-  if (!newRect) {
-    return;
-  }
-  if (newRect.width === rect.value?.width && newRect.height === rect.value.height && newRect.x === rect.value.x && newRect.y === rect.value.y) {
-    return;
-  }
-  rect.value = newRect;
-});
-</script>

package/dist/runtime/editor/features/validations/Overlay/Item.vue.d.ts

@@ -1,7 +0,0 @@
-type __VLS_Props = {
-    uuid: string;
-    messages: string[];
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/Overlay/index.d.vue.ts

@@ -1,7 +0,0 @@
-import type { Validation } from '#blokkli/editor/types/state';
-type __VLS_Props = {
-    validations: Validation[];
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/Overlay/index.vue

@@ -1,115 +0,0 @@
-<template>
-  <Teleport to=".bk-main-canvas">
-    <div class="bk bk-validations-overlay">
-      <OverlayItem v-for="item in items" :key="item.uuid" v-bind="item" />
-    </div>
-  </Teleport>
-</template>
-
-<script setup>
-import { itemEntityType } from "#blokkli-build/config";
-import { falsy } from "#blokkli/helpers";
-import { computed } from "#imports";
-import OverlayItem from "./Item.vue";
-const props = defineProps({
-  validations: { type: Array, required: true }
-});
-const items = computed(
-  () => Object.entries(
-    props.validations.map((v) => {
-      if (v.entityType === itemEntityType && v.entityUuid) {
-        return {
-          uuid: v.entityUuid,
-          message: v.message
-        };
-      }
-      return null;
-    }).filter(falsy).reduce((acc, v) => {
-      if (!acc[v.uuid]) {
-        acc[v.uuid] = [v.message];
-      } else {
-        acc[v.uuid].push(v.message);
-      }
-      return acc;
-    }, {})
-  ).map((v) => {
-    return {
-      uuid: v[0],
-      messages: v[1]
-    };
-  })
-);
-</script>
-
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
-.bk.bk-validations-overlay {
-  pointer-events: none;
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  height: 100%;
-  width: 100%;
-}
-.bk.bk-validations-overlay  > div {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  box-sizing: border-box;
-  border-style: var(--bk-tw-border-style);
-  border-width: 3px;
-  border-color: rgb(var(--bk-theme-red-normal) / 1);
-  background-color: rgb(var(--bk-theme-red-normal) / 1);
-}
-@supports (color: color-mix(in lab, red, red)) {
-  .bk.bk-validations-overlay  > div {
-    background-color: color-mix(in oklab, rgb(var(--bk-theme-red-normal) / 1) 10%, transparent);
-  }
-}
-:is(.bk.bk-validations-overlay > div)  > div {
-  background-color: rgb(var(--bk-theme-red-normal) / 1);
-  padding-inline: 10px;
-  padding-block: 5px;
-  color: white;
-  position: absolute;
-  right: calc(2px * -1);
-  left: calc(2px * -1);
-  --bk-tw-font-weight: var(--font-weight-bold, 700);
-  font-weight: var(--font-weight-bold, 700);
-  bottom: 100%;
-}
-.bk .bk-validation-item {
-  width: 100%;
-  padding: 15px;
-  font-size: var(--text-base, 16px);
-  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
-  color: rgb(var(--bk-theme-mono-800) / 1);
-}
-@media (hover: hover) {
-  :is(.bk .bk-validation-item):hover {
-    background-color: rgb(var(--bk-theme-mono-50) / 1);
-  }
-}
-.bk .bk-validation-item {
-  border-bottom-style: var(--bk-tw-border-style);
-  border-bottom-width: 1px;
-  border-bottom-color: rgb(var(--bk-theme-mono-300) / 1);
-}
-:is(.bk .bk-validation-item) .bk-blokkli-item-icon {
-  width: 25px;
-  height: 25px;
-  border-radius: 4px;
-  border-style: var(--bk-tw-border-style);
-  border-width: 1px;
-  border-color: rgb(var(--bk-theme-mono-400) / 1);
-  background-color: rgb(var(--bk-theme-mono-200) / 1);
-  padding: 3px;
-}
-:is(.bk .bk-validation-item) .bk-validation-item-header {
-  margin-bottom: 10px;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  --bk-tw-font-weight: var(--font-weight-medium, 500);
-  font-weight: var(--font-weight-medium, 500);
-}
-</style>

package/dist/runtime/editor/features/validations/Overlay/index.vue.d.ts

@@ -1,7 +0,0 @@
-import type { Validation } from '#blokkli/editor/types/state';
-type __VLS_Props = {
-    validations: Validation[];
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/SidebarItem/index.d.vue.ts

@@ -1,10 +0,0 @@
-type __VLS_Props = {
-    message: string;
-    propertyPath?: string;
-    code?: string;
-    entityType?: string;
-    entityUuid?: string;
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/SidebarItem/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <button class="bk-validation-item" @click.prevent="onClick">
-    <div v-if="block" class="bk-validation-item-header">
-      <ItemIcon :bundle="block.bundle" />
-      <div>{{ itemBundle?.label }}</div>
-    </div>
-    <div v-html="message" />
-  </button>
-</template>
-
-<script setup>
-import { useBlokkli, computed } from "#imports";
-import { ItemIcon } from "#blokkli/editor/components";
-import { itemEntityType } from "#blokkli-build/config";
-const props = defineProps({
-  message: { type: String, required: true },
-  propertyPath: { type: String, required: false },
-  code: { type: String, required: false },
-  entityType: { type: String, required: false },
-  entityUuid: { type: String, required: false }
-});
-const { eventBus, types, blocks } = useBlokkli();
-const isBlock = computed(() => props.entityType === itemEntityType);
-const block = computed(() => {
-  if (isBlock.value && props.entityUuid) {
-    return blocks.getBlock(props.entityUuid);
-  }
-  return null;
-});
-const itemBundle = computed(() => {
-  if (block.value?.bundle) {
-    return types.getBlockBundleDefinition(block.value.bundle);
-  }
-  return null;
-});
-function onClick() {
-  if (isBlock.value && props.entityUuid) {
-    eventBus.emit("scrollIntoView", { uuid: props.entityUuid, center: true });
-  }
-}
-</script>

package/dist/runtime/editor/features/validations/SidebarItem/index.vue.d.ts

@@ -1,10 +0,0 @@
-type __VLS_Props = {
-    message: string;
-    propertyPath?: string;
-    code?: string;
-    entityType?: string;
-    entityUuid?: string;
-};
-declare const __VLS_export: 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 _default: typeof __VLS_export;
-export default _default;

package/dist/runtime/editor/features/validations/index.d.vue.ts

@@ -1,3 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

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

@@ -1,91 +0,0 @@
-<template>
-  <PluginSidebar
-    id="violations"
-    ref="plugin"
-    :title="$t('validationsToolbarLabel', 'Validations')"
-    :tour-text="
-  $t(
-    'validationsTourText',
-    'See validation errors for content or structure on the current page.'
-  )
-"
-    icon="bk_mdi_check"
-    weight="-10"
-  >
-    <div class="bk bk-errors bk-control">
-      <ul v-if="state.violations.value.length">
-        <li v-for="(item, i) in state.violations.value" :key="item.message + i">
-          <SidebarItem v-bind="item" />
-        </li>
-      </ul>
-      <div v-else class="bk-errors-success">
-        <figure>
-          <Icon name="bk_mdi_check" />
-        </figure>
-        <h3>{{ $t("validationsNoneFound", "No validation errors found.") }}</h3>
-      </div>
-    </div>
-
-    <template v-if="validations.length" #badge>
-      <div class="bk-sidebar-badge bk-is-red">{{ validations.length }}</div>
-    </template>
-  </PluginSidebar>
-
-  <ValidationOverlay v-if="validations.length" :validations="validations" />
-</template>
-
-<script setup>
-import {
-  useBlokkli,
-  defineBlokkliFeature,
-  computed,
-  useTemplateRef
-} from "#imports";
-import { PluginSidebar } from "#blokkli/editor/plugins";
-import { Icon } from "#blokkli/editor/components";
-import ValidationOverlay from "./Overlay/index.vue";
-import SidebarItem from "./SidebarItem/index.vue";
-import { onBlokkliEvent } from "#blokkli/editor/composables";
-defineBlokkliFeature({
-  id: "validations",
-  icon: "bk_mdi_check",
-  label: "Validations",
-  description: "Provides a sidebar pane to render validations."
-});
-const plugin = useTemplateRef("plugin");
-const { state, $t } = useBlokkli();
-const validations = computed(() => state.violations.value);
-onBlokkliEvent("publish:failed", function() {
-  if (plugin.value && validations.value.length) {
-    plugin.value.showSidebar();
-  }
-});
-</script>
-
-<script>
-export default {
-  name: "Validations"
-};
-</script>
-
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
-.bk.bk-errors .bk-errors-success {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-top: 30px;
-  text-align: center;
-}
-:is(.bk.bk-errors .bk-errors-success) figure {
-  margin-bottom: 20px;
-  height: 100px;
-  width: 100px;
-  border-radius: calc(infinity * 1px);
-  background-color: rgb(var(--bk-theme-lime-light) / 1);
-  padding: 20px;
-  color: rgb(var(--bk-theme-lime-dark) / 1);
-}
-:is(:is(.bk.bk-errors .bk-errors-success) figure) svg {
-  fill: currentcolor;
-}
-</style>

package/dist/runtime/editor/features/validations/index.vue.d.ts

@@ -1,3 +0,0 @@
-declare const _default: typeof __VLS_export;
-export default _default;
-declare const __VLS_export: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/runtime/editor/types/config.d.ts

@@ -1,5 +0,0 @@
-export type ColorOption = {
-    id: string;
-    hex: string;
-    label: string;
-};