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

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

@@ -23,7 +23,7 @@ const text = computed(() => {
 useBlockRegistration(dom, props.uuid);
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-block-not-implemented {
   background-color: rgb(var(--bk-theme-red-light) / 1);
   padding-block: 15px;

package/dist/runtime/composables/useBlokkliRuntimeConfig.d.ts

@@ -0,0 +1,50 @@
+import { type ComputedRef } from '#imports';
+type UseBlokkliRuntimeConfig = {
+    /**
+     * Resolve a canonical color id to its current hex.
+     *
+     * Reads `app.config.blokkli.colorOptions` first; if the id is missing,
+     * disabled (null override on the id itself or its `<base>`), or null
+     * /undefined to begin with, cascades through `colorPalette` in order
+     * and returns the first that resolves. Falls back to `FALLBACK_HEX`
+     * only when every palette entry is also gone.
+     */
+    resolveColorHex: (id: string | null | undefined) => string;
+    /**
+     * Ordered canonical color ids with disabled entries already filtered
+     * out — a `<base>: null` family-disable drops `<base>.<mainShade>`,
+     * a direct `<id>: null` drops that id. Cycle through this for default
+     * color assignment (e.g. dynamic chart series).
+     */
+    colorPalette: ComputedRef<string[]>;
+};
+/**
+ * Runtime-only config surface for userland and integrator components
+ * (chart renderers, custom blocks, …) outside the editor.
+ *
+ * Sources:
+ *   - `app.config.blokkli.colorOptions` — flat `Record<canonicalId, string | null>`
+ *     seeded by the module with every canonical id (bare for flat colors,
+ *     `<base>.<shade>` for ramped colors) at its build-time hex. `null`
+ *     disables. The bare `<base>` is kept for ramped colors so userland
+ *     can family-disable with `<base>: null`. This is the user-overridable
+ *     surface — `updateAppConfig` deep-merges into it.
+ *   - `#blokkli-build/config` → `colorPalette` — ordered canonical ids
+ *     (one per declared family — flat ids verbatim, ramped ids as
+ *     `<base>.<mainShade>`). Build-time static data, NOT in appConfig
+ *     because it's not userland-overridable. Used as the cascading
+ *     fallback for unresolved ids.
+ *
+ * Returns:
+ *   - `resolveColorHex(id)` — flat lookup. If the requested id is missing
+ *     or disabled, cascade through the enabled palette in order and return
+ *     the first one that resolves. If even that yields nothing, return
+ *     `FALLBACK_HEX`.
+ *   - `colorPalette` — computed ordered canonical ids with disabled
+ *     entries already filtered out (a `<base>: null` family-disable drops
+ *     `<base>.<mainShade>`; a direct `<id>: null` drops that id). Userland
+ *     can cycle through this directly to assign default colors — no need
+ *     to second-guess which ids are still live.
+ */
+export declare function useBlokkliRuntimeConfig(): UseBlokkliRuntimeConfig;
+export {};

package/dist/runtime/composables/useBlokkliRuntimeConfig.js

@@ -0,0 +1,34 @@
+import { computed, useAppConfig } from "#imports";
+import { colorPalette as canonicalPalette } from "#blokkli-build/config";
+import { FALLBACK_HEX } from "../helpers/colors.js";
+export function useBlokkliRuntimeConfig() {
+  const appConfig = useAppConfig();
+  const overrides = computed(
+    () => appConfig.blokkli?.colorOptions ?? {}
+  );
+  function lookup(lookupId) {
+    const map = overrides.value;
+    const dotIndex = lookupId.indexOf(".");
+    if (dotIndex !== -1) {
+      const baseId = lookupId.slice(0, dotIndex);
+      if (map[baseId] === null) return void 0;
+    }
+    const value = map[lookupId];
+    return typeof value === "string" ? value : void 0;
+  }
+  const colorPalette = computed(
+    () => canonicalPalette.filter((id) => lookup(id) !== void 0)
+  );
+  function resolveColorHex(id) {
+    if (id) {
+      const direct = lookup(id);
+      if (direct !== void 0) return direct;
+    }
+    for (const fallbackId of colorPalette.value) {
+      const hex = lookup(fallbackId);
+      if (hex !== void 0) return hex;
+    }
+    return FALLBACK_HEX;
+  }
+  return { resolveColorHex, colorPalette };
+}

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

@@ -1,7 +1,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 { EntityTranslation, MappedState, Validation } from '../types/state.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';
@@ -10,6 +10,7 @@ export interface MutationResponseLike<T> {
     success: boolean;
     state?: T;
     errors?: string[];
+    violations?: Validation[];
 }
 export interface GenericAdapterResponse<T> {
     success: boolean;

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

@@ -50,7 +50,7 @@
         />
         <div
           v-if="itemBundle?.id === fromLibraryBlockBundle"
-          class="_bk_absolute _bk_z-50 _bk_-top-[7px] _bk_-right-[7px] _bk_bg-lime-dark _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-full _bk_border _bk_border-lime-normal _bk_shadow-lg"
+          class="_bk_absolute _bk_z-50 _bk_top-[-7px] _bk_right-[-7px] _bk_bg-lime-dark _bk_size-20 _bk_flex _bk_items-center _bk_justify-center _bk_rounded-full _bk_border _bk_border-lime-normal _bk_shadow-lg"
         >
           <Icon name="reusable" class="_bk_size-[12px] _bk_fill-lime-light" />
         </div>

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

@@ -111,7 +111,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-blokkli-item-actions-inner {
   backface-visibility: hidden;
   bottom: var(--bk-root-offset-bottom);

package/dist/runtime/editor/components/ArtboardTooltip/index.d.vue.ts

@@ -25,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onClose?: (() => any) | undefined;
 }>, {
     anchorEl: HTMLElement | null;
+    buttonLabel: string;
     anchorCoordinates: Coord | null;
     placementY: PlacementVertical;
     placementX: PlacementHorizontal;

package/dist/runtime/editor/components/ArtboardTooltip/index.vue

@@ -46,7 +46,7 @@ const props = defineProps({
   id: { type: String, required: true },
   title: { type: String, required: true },
   anchorEl: { type: null, required: false, default: null },
-  buttonLabel: { type: String, required: false },
+  buttonLabel: { type: String, required: false, default: void 0 },
   anchorCoordinates: { type: [Object, null], required: false, default: null },
   placementY: { type: String, required: false, default: "auto" },
   placementX: { type: String, required: false, default: "center" },
@@ -104,7 +104,7 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-artboard-tooltip {
   --bk-gap: 15px;
   --bk-caret-size: 10px;

package/dist/runtime/editor/components/ArtboardTooltip/index.vue.d.ts

@@ -25,6 +25,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     onClose?: (() => any) | undefined;
 }>, {
     anchorEl: HTMLElement | null;
+    buttonLabel: string;
     anchorCoordinates: Coord | null;
     placementY: PlacementVertical;
     placementX: PlacementHorizontal;

package/dist/runtime/editor/components/Avatar/index.vue

@@ -98,7 +98,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk-avatar-image:before {
   content: '';
   position: absolute;

package/dist/runtime/editor/components/BlockPreviewItem/index.vue

@@ -88,7 +88,7 @@ provide(INJECT_PROVIDER_BLOCKS, blocks);
 provide(INJECT_FIELD_LIST_TYPE, fieldListType);
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-preview-item {
   display: flex;
   height: 100%;

package/dist/runtime/editor/components/BlockPreviewRenderer/index.vue

@@ -32,7 +32,7 @@ function onBackgroundColor(color) {
 }
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-preview-renderer {
   min-height: 200px;
   overflow: hidden;

package/dist/runtime/editor/components/BlockProxy/index.vue

@@ -87,7 +87,7 @@ const fieldLayout = computed(() => {
 useBlockRegistration(dom, props.uuid);
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk-vars.bk-block-proxy {
   flex: 1;
   color: rgb(var(--bk-theme-mono-900) / 1);

package/dist/runtime/editor/components/BlokkliRootErrorBoundary.vue

@@ -101,7 +101,7 @@ function downloadLogs() {
 }
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk-fatal-error-overlay {
   position: fixed;
   top: 0px;

package/dist/runtime/editor/components/BundleSelector/index.vue

@@ -273,7 +273,7 @@ onMounted(() => {
 });
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-bundle-selector {
   --bk-bg: rgb(var(--bk-theme-mono-900) / 1);
   --bk-header-bg: rgb(var(--bk-theme-mono-800) / 1);

package/dist/runtime/editor/components/ColorDropdown/index.d.vue.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    buttonClass?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    displayColor: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/runtime/editor/components/ColorDropdown/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <Dropdown
+    position="top-left"
+    :button-class="
+  buttonClass ?? '_bk_size-40 _bk_flex _bk_items-center _bk_justify-center _bk_group'
+"
+  >
+    <template #button>
+      <slot :display-color>
+        <span
+          class="_bk_rounded-full _bk_block _bk_size-20 _bk_relative _bk_group-hover:outline-2 _bk_group-hover:outline-mono-100/40 _bk_group-hover:-outline-offset-2 _bk_group-hover:before:opacity-80"
+          :style="{ backgroundColor: displayColor }"
+        />
+      </slot>
+    </template>
+    <div
+      v-if="hasAnyShades"
+      class="_bk_p-5 _bk_flex _bk_flex-wrap _bk_relative"
+      :style="{
+  maxWidth: maxShades * 40 + 10 + 'px'
+}"
+    >
+      <div
+        v-for="row in colorRows"
+        :key="row.entryId"
+        class="_bk_flex _bk_items-center"
+      >
+        <button
+          v-for="item in row.items"
+          :key="item.colorId"
+          type="button"
+          class="_bk_group/tooltip _bk_flex _bk_border-none _bk_bg-transparent _bk_cursor-pointer _bk_size-40 _bk_items-center _bk_justify-center _bk_group"
+          @click="selectedId = item.colorId"
+        >
+          <span
+            class="_bk_rounded-full _bk_block _bk_relative _bk_outline-2 _bk_outline-offset-2 _bk_outline-transparent _bk_size-30"
+            :class="[
+  item.isMain && [
+    '_bk_before:bk-content-empty _bk_before:absolute _bk_before:size-8 _bk_before:rounded-full _bk_before:left-1/2 _bk_before:top-1/2 _bk_before:-translate-x-1/2 _bk_before:-translate-y-1/2',
+    item.isLightBg ? '_bk_before:bg-black' : '_bk_before:bg-white'
+  ],
+  isSelected(item.colorId) ? '_bk_outline-mono-900!' : '_bk_group-hover:outline-mono-300'
+]"
+            :style="{ backgroundColor: item.hex }"
+          />
+          <Tooltip :label="item.label" placement="above-left" small />
+        </button>
+      </div>
+    </div>
+    <template v-else>
+      <DropdownItem
+        v-for="entry in colorOptions"
+        :key="entry.id"
+        :text="entry.label"
+        :class="{ '_bk_bg-mono-100 _bk_text-mono-950': isSelected(entry.id) }"
+        @click="selectedId = entry.id"
+      >
+        <span
+          class="_bk_rounded-full _bk_block _bk_size-20 _bk_relative"
+          :style="{ backgroundColor: entry.hex }"
+        />
+      </DropdownItem>
+    </template>
+  </Dropdown>
+</template>
+
+<script setup>
+import { computed, useBlokkli } from "#imports";
+import { Dropdown, DropdownItem, Tooltip } from "#blokkli/editor/components";
+import { isLightHex } from "#blokkli/editor/helpers/color";
+defineProps({
+  buttonClass: { type: String, required: false }
+});
+const selectedId = defineModel({ type: String, ...{
+  default: ""
+} });
+const { config, $t } = useBlokkli();
+const colorOptions = computed(() => config.colorOptions.value);
+const hasAnyShades = computed(
+  () => colorOptions.value.some((entry) => entry.shades?.length)
+);
+const displayColor = computed(() => config.getColorHex(selectedId.value));
+const colorRows = computed(
+  () => colorOptions.value.map((entry) => ({
+    entryId: entry.id,
+    items: entry.shades?.length ? entry.shades.map((shade) => ({
+      // Always emit the shade-qualified form for ramped colors — the
+      // bare base id is never emitted from this component, so consumers
+      // can compare ids with naive string equality without knowing
+      // which shade was declared as the family's main.
+      colorId: `${entry.id}.${shade.id}`,
+      label: shade.isMain ? `${entry.label} ${shade.id} (${$t("mainColor", "main color")})` : `${entry.label} ${shade.id}`,
+      hex: shade.hex,
+      isMain: !!shade.isMain,
+      isLightBg: isLightHex(shade.hex)
+    })) : [
+      {
+        colorId: entry.id,
+        label: entry.label,
+        hex: entry.hex,
+        isMain: false,
+        isLightBg: isLightHex(entry.hex)
+      }
+    ]
+  })).sort((a, b) => b.items.length - a.items.length)
+);
+const maxShades = computed(
+  () => colorOptions.value.reduce(
+    (max, entry) => Math.max(max, entry.shades?.length ?? 0),
+    0
+  )
+);
+function isSelected(id) {
+  return selectedId.value === id;
+}
+</script>

package/dist/runtime/editor/components/ColorDropdown/index.vue.d.ts

@@ -0,0 +1,26 @@
+type __VLS_Props = {
+    buttonClass?: string;
+};
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_9: {
+    displayColor: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_9) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+}>, {}, {}, {}, {}, 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/runtime/editor/components/Dialog/index.vue

@@ -151,7 +151,7 @@ export default {
 };
 </script>
 
-<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
+<style>/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */
 .bk.bk-dialog {
   pointer-events: none;
   position: fixed;

package/dist/runtime/editor/components/DiffApproval/Highlight/Item.d.vue.ts

@@ -1,33 +1,27 @@
+import type { ApprovalItem, ApprovalUnit } from '../types.js';
 type __VLS_Props = {
-    uuid: string;
-    fieldName: string;
-    value: string;
-    selected: boolean;
-    active: boolean;
+    item: ApprovalItem;
+    /** Units belonging to this item, in reading order. Never empty in practice. */
+    units: ApprovalUnit[];
+    selected: Record<string, boolean>;
+    activeKey: string | null;
     /**
-     * Render the new value entirely as an insertion instead of a diff.
-     *
-     * See the prop of the same name on DiffApproval.
+     * Render the new value entirely as an insertion instead of a diff. See the
+     * prop of the same name on DiffApproval.
      */
     insertionsOnly?: boolean;
 };
-/**
- * Restore the original Vue-managed nodes immediately, in preparation for the
- * consumer's mutation. After this runs, Vue's reactive patch can write the
- * new value into the live tracked nodes — and the post-mutation
- * `onBeforeUnmount` restore is skipped so it doesn't clobber that value.
- */
 declare function commitForApply(): void;
-declare function updateRect(): void;
+declare function updateRects(): void;
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
-    updateRect: typeof updateRect;
+    updateRects: typeof updateRects;
     commitForApply: typeof commitForApply;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    toggle: () => void;
-    activate: () => void;
+    toggle: (key: string) => void;
+    activate: (key: string) => void;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onToggle?: (() => any) | undefined;
-    onActivate?: (() => any) | undefined;
+    onToggle?: ((key: string) => any) | undefined;
+    onActivate?: ((key: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;