@blokkli/editor 2.0.0-alpha.58 → 2.0.0-alpha.59

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

@@ -1,10 +1,11 @@
 import { type Emitter } from 'mitt';
 import type { UpdateBlockOptionEvent } from '../features/options/types.js';
-import type { Coord, Size } from '../types/geometry.js';
+import type { Coord, Rectangle, Size } from '../types/geometry.js';
 import type { MutatedField } from '../types/state.js';
 import type { DraggableExistingBlock, DraggableItem } from '../types/draggable.js';
 import type { InteractionMode, Message } from '../types/ui.js';
 import type { BlokkliFieldElement, BlokkliItemHost, RenderedFieldListItem } from '../types/field.js';
+import type { BlokkliClipboardPasteEvent } from '../types/clipboard.js';
 export type SelectStartEvent = {
     uuids: string[];
     mode: InteractionMode;
@@ -18,6 +19,16 @@ export type ScrollIntoViewEvent = {
     center?: boolean;
     immediate?: boolean;
     highlight?: boolean;
+} | {
+    /**
+     * An explicit rectangle, in artboard coordinates, to center in the
+     * viewport. Unlike the `uuid`/`element` variants — which only scroll when
+     * the target is mostly off-screen — this always centers the rect on both
+     * axes within the full viewport. Used to bring a precise point (e.g. a
+     * drag drop slot) to the exact viewport center.
+     */
+    rect: Rectangle;
+    immediate?: boolean;
 };
 export type KeyPressedEvent = {
     code: string;
@@ -244,6 +255,16 @@ export interface EventbusEvents {
     'editable:save': undefined;
     'droppable:open': DroppableFieldOpenEvent;
     'drop:clipboardItem': DropClipboardItemEvent;
+    /**
+     * Emitted when a blökkli clipboard envelope is pasted into the editor.
+     *
+     * `data` is a discriminated union of all registered clipboard types
+     * (augmentable via `BlokkliClipboardTypes` in
+     * `#blokkli/editor/types/clipboard`). `meta` describes the host the
+     * payload was produced from, so listeners can apply same-host
+     * validation where it matters. Each feature filters by `data.type`.
+     */
+    'clipboard:paste': BlokkliClipboardPasteEvent;
     'sidebar:close': undefined;
     'sidebar:open': string;
     'action:selected': undefined;
@@ -268,7 +289,6 @@ export interface EventbusEvents {
         name: string;
         uuid: string;
     };
-    'block:rerender': string[];
     'analyze:ignore': {
         resultId: string;
         identifier: string;

package/dist/runtime/editor/features/add-list/Actions/index.vue

@@ -1,5 +1,9 @@
 <template>
-  <Sortli id="blokkli-add-list-actions" :build-item="buildItemAction">
+  <Sortli
+    id="blokkli-add-list-actions"
+    data-test="add-list-actions"
+    :build-item="buildItemAction"
+  >
     <ActionButton
       v-for="action in actions"
       :key="action.id"

package/dist/runtime/editor/features/add-list/Blocks/index.vue

@@ -1,5 +1,10 @@
 <template>
-  <Sortli v-if="shouldRender" id="blokkli-add-list-blocks" :build-item>
+  <Sortli
+    v-if="shouldRender"
+    id="blokkli-add-list-blocks"
+    data-test="add-list-blocks"
+    :build-item
+  >
     <AddListItem
       v-for="type in sortedList"
       v-show="type.isVisible"

package/dist/runtime/editor/features/add-list/Help/Item.vue

@@ -2,6 +2,8 @@
   <div
     ref="el"
     class="bk-add-list-help-item"
+    :data-test="'add-list-help-' + type + '-' + id"
+    :data-test-visible="isVisible"
     :style="{
   visibility: isVisible ? 'visible' : 'hidden'
 }"
@@ -13,23 +15,31 @@
       </div>
     </div>
     <h2>
-      <ItemIconBox :bundle :icon :color />
-      <span>{{ title }}</span>
+      <ItemIconBox data-test="add-list-help-icon" :bundle :icon :color />
+      <span data-test="add-list-help-title">{{ title }}</span>
     </h2>
 
     <hr />
 
-    <div v-if="text" class="bk-add-list-help-description" v-html="text" />
+    <div
+      v-if="text"
+      class="bk-add-list-help-description"
+      data-test="add-list-help-description"
+      v-html="text"
+    />
 
     <template v-for="section in sections" :key="section.title">
       <hr />
-      <div class="bk-add-list-help-label">
+      <div
+        class="bk-add-list-help-label _bk_uppercase _bk_text-sm _bk_font-semibold _bk_text-mono-300 _bk_tracking-wider _bk_mb-10"
+      >
         {{ section.title }}
       </div>
       <div
         v-for="field in section.fields"
         :key="field.name"
         class="bk-add-list-help-fields-item"
+        :data-test="'add-list-help-field-' + field.name"
       >
         <ul>
           <li v-if="section.fields.length > 1" class="bk-is-field">
@@ -37,8 +47,9 @@
           </li>
           <li
             v-for="allowed in field.items"
-            :key="field.name + allowed.bundle"
+            :key="field.name + allowed.bundle + allowed.label"
             class="bk-is-bundle"
+            :data-test="'add-list-help-allowed-' + allowed.bundle"
           >
             <ItemIconBox
               :bundle="allowed.bundle"

package/dist/runtime/editor/features/add-list/Help/index.vue

@@ -1,7 +1,12 @@
 <template>
-  <div ref="rootEl" class="bk bk-add-list-help">
-    <div ref="innerEl" class="bk-add-list-help-inner">
-      <div class="bk-add-list-help-content">
+  <div ref="rootEl" data-test="add-list-help" class="bk bk-add-list-help">
+    <div
+      ref="innerEl"
+      class="bk-add-list-help-inner _bk_relative _bk_will-change-transform _bk_text-mono-50 _bk_bg-mono-950/90 _bk_backdrop-blur-md _bk_overflow-hidden _bk_rounded"
+    >
+      <div
+        class="bk-add-list-help-content _bk_absolute _bk_top-0 _bk_left-0 _bk_right-0 _bk_grid _bk_items-start"
+      >
         <HelpItemComponent
           v-for="item in items"
           :id="item.id"
@@ -126,195 +131,149 @@ useAnimationFrame(() => {
 });
 </script>
 
-<style>
+<style>/*! tailwindcss v4.2.4 | MIT License | https://tailwindcss.com */
 .bk.bk-add-list-help {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      z-index: calc(var(--bk-z-index-base) + 200000) /* "add-list-info" */;
-      will-change: transform;
-      width: 750px;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  z-index: calc(var(--bk-z-index-base) + 200000) /* "add-list-info" */;
+  will-change: transform;
+  width: 750px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-item {
-      padding: 15px;
-      --bk-tw-contain-paint: paint;
-      contain: var(--bk-tw-contain-size) var(--bk-tw-contain-layout) var(--bk-tw-contain-paint) var(--bk-tw-contain-style);
+.bk.bk-add-list-help .bk-add-list-help-item {
+  padding: 15px;
+  --bk-tw-contain-paint: paint;
+  contain: var(--bk-tw-contain-size,) var(--bk-tw-contain-layout,) var(--bk-tw-contain-paint,) var(--bk-tw-contain-style,);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-item:has(.bk-add-list-help-fields) .bk-add-list-help-image {
-      margin-bottom: 20px;
+:is(.bk.bk-add-list-help .bk-add-list-help-item):has(.bk-add-list-help-fields) .bk-add-list-help-image {
+  margin-bottom: 20px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-label {
-      margin-bottom: 10px;
-      font-size: 14px;
-      line-height: 20px;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
+:is(.bk.bk-add-list-help .bk-add-list-help-content) .bk-add-list-help-item {
+  grid-area: 1 / 1;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-inner {
-      position: relative;
-      will-change: transform;
-      background-color: rgb(var(--bk-theme-mono-950) / 0.9);
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-50) / var(--bk-tw-text-opacity, 1));
-      --bk-tw-backdrop-blur: blur(12px);
-      -webkit-backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
-      backdrop-filter: var(--bk-tw-backdrop-blur) var(--bk-tw-backdrop-brightness) var(--bk-tw-backdrop-contrast) var(--bk-tw-backdrop-grayscale) var(--bk-tw-backdrop-hue-rotate) var(--bk-tw-backdrop-invert) var(--bk-tw-backdrop-opacity) var(--bk-tw-backdrop-saturate) var(--bk-tw-backdrop-sepia);
-      overflow: hidden;
-      border-radius: 8px;
+.bk.bk-add-list-help hr {
+  margin-block: 20px;
+  border-top-style: var(--bk-tw-border-style);
+  border-top-width: 1px;
+  border-top-color: rgb(var(--bk-theme-mono-600) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-content {
-      position: absolute;
-      top: 0px;
-      left: 0px;
-      right: 0px;
-      display: grid;
-      align-items: flex-start;
+.bk.bk-add-list-help h2 {
+  margin-bottom: 5px;
+  font-size: var(--text-xl, 20px);
+  line-height: var(--bk-tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));
+  --bk-tw-leading: 1;
+  line-height: 1;
+  --bk-tw-font-weight: var(--font-weight-bold, 700);
+  font-weight: var(--font-weight-bold, 700);
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  gap: 15px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-content .bk-add-list-help-item {
-      grid-area: 1 / 1;
-    }
-
-  .bk.bk-add-list-help hr {
-      margin-top: 20px;
-      margin-bottom: 20px;
-      border-top-width: 1px;
-      --bk-tw-border-opacity: 1;
-      border-top-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+.bk.bk-add-list-help .bk-add-list-help-description {
+  font-size: var(--text-base, 16px);
+  line-height: var(--bk-tw-leading, var(--text-base--line-height, calc(1.5 / 1)));
+  -webkit-user-select: text;
+  user-select: text;
 }
-
-  .bk.bk-add-list-help h2 {
-      font-size: 20px;
-      line-height: 28px;
-      font-weight: 700;
-      line-height: 1;
-      margin-bottom: 20px;
-      display: flex;
-      align-items: center;
-      gap: 15px;
+:is(.bk.bk-add-list-help .bk-add-list-help-description) p + p {
+  margin-top: 15px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-description {
-      user-select: text;
-      font-size: 16px;
-      line-height: 24px;
+.bk.bk-add-list-help .bk-add-list-help-image {
+  overflow: hidden;
+  background-color: white;
+  float: right;
+  margin-left: 20px;
+  height: 200px;
+  width: 300px;
+  outline-style: var(--bk-tw-outline-style);
+  outline-width: 1px;
+  outline-color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-description p + p {
-      margin-top: 15px;
+:is(.bk.bk-add-list-help .bk-add-list-help-image):has(.bk-blokkli-item-icon) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgb(var(--bk-theme-mono-700) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-image {
-      overflow: hidden;
-      border-radius: 6px;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(255 255 255 / var(--bk-tw-bg-opacity, 1));
-      float: right;
-      margin-left: 20px;
-      height: 200px;
-      width: 300px;
-      outline-style: solid;
-      outline-width: 1px;
-      outline-color: rgb(var(--bk-theme-mono-700) / 1);
+:is(.bk.bk-add-list-help .bk-add-list-help-image) .bk-blokkli-item-icon {
+  width: 100px;
+  height: 100px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-image:has(.bk-blokkli-item-icon) {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      --bk-tw-bg-opacity: 1;
-      background-color: rgb(var(--bk-theme-mono-700) / var(--bk-tw-bg-opacity, 1));
+:is(:is(.bk.bk-add-list-help .bk-add-list-help-image) .bk-blokkli-item-icon) svg {
+  fill: rgb(var(--bk-theme-mono-500) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-image .bk-blokkli-item-icon {
-      width: 100px;
-      height: 100px;
+:is(.bk.bk-add-list-help .bk-add-list-help-image) img {
+  width: 100%;
+  height: 100%;
+  border-style: var(--bk-tw-border-style);
+  border-width: 0;
+  object-fit: contain;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-image .bk-blokkli-item-icon svg {
-      fill: rgb(var(--bk-theme-mono-500) / 1);
+.bk.bk-add-list-help .bk-add-list-help-fields-item {
+  display: flex;
+  flex-wrap: wrap;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-image img {
-      width: 100%;
-      height: 100%;
-      border-width: 0;
-      object-fit: contain;
+:is(.bk.bk-add-list-help .bk-add-list-help-fields-item) ul {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 15px;
+  row-gap: 10px;
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-fields-item {
-      display: flex;
-      flex-wrap: wrap;
+.bk-is-bundle:is(:is(.bk.bk-add-list-help .bk-add-list-help-fields-item) li) {
+  display: inline-flex;
+  gap: 5px;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  color: rgb(var(--bk-theme-mono-100) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-fields-item ul {
-      display: flex;
-      flex-wrap: wrap;
-      column-gap: 15px;
-      row-gap: 10px;
+.bk-is-field:is(:is(.bk.bk-add-list-help .bk-add-list-help-fields-item) li) {
+  display: inline-block;
+  text-transform: uppercase;
+  min-width: 0px;
+  font-size: var(--text-xs, 12px);
+  line-height: var(--bk-tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
+  --bk-tw-tracking: var(--tracking-wide, 0.025em);
+  letter-spacing: var(--tracking-wide, 0.025em);
+  border-radius: 4px;
+  padding-inline: 8px;
+  padding-top: 4px;
+  padding-bottom: 2px;
+  border-style: var(--bk-tw-border-style);
+  border-width: 1px;
+  --bk-tw-font-weight: var(--font-weight-medium, 500);
+  font-weight: var(--font-weight-medium, 500);
+  background-color: rgb(var(--bk-theme-mono-800) / 1);
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-fields-item li.bk-is-bundle {
-      display: inline-flex;
-      gap: 5px;
-      font-weight: 500;
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-text-opacity, 1));
-}
-
-  .bk.bk-add-list-help .bk-add-list-help-fields-item li.bk-is-field {
-      display: inline-block;
-      text-transform: uppercase;
-      min-width: 0px;
-      font-size: 12px;
-      line-height: 16px;
-      letter-spacing: 0.025em;
-      border-radius: 6px;
-      padding-left: 8px;
-      padding-right: 8px;
-      padding-top: 4px;
-      padding-bottom: 2px;
-      border-width: 1px;
-      font-weight: 500;
-      background-color: rgb(var(--bk-theme-mono-800) / 0.6);
-      --bk-tw-text-opacity: 1;
-      color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-text-opacity, 1));
-      --bk-tw-border-opacity: 1;
-      border-color: rgb(var(--bk-theme-mono-600) / var(--bk-tw-border-opacity, 1));
+@supports (color: color-mix(in lab, red, red)) {
+  .bk-is-field:is(:is(.bk.bk-add-list-help .bk-add-list-help-fields-item) li) {
+    background-color: color-mix(in oklab, rgb(var(--bk-theme-mono-800) / 1) 60%, transparent);
+  }
 }
-
-  .bk.bk-add-list-help .bk-add-list-help-fields-item + .bk-add-list-help-fields-item {
-      margin-top: 20px;
+.bk-is-field:is(:is(.bk.bk-add-list-help .bk-add-list-help-fields-item) li) {
+  color: rgb(var(--bk-theme-mono-300) / 1);
+  border-color: rgb(var(--bk-theme-mono-600) / 1);
 }
-
-.bk-add-list-help-enter-active .bk-add-list-help-inner, .bk-add-list-help-leave-active .bk-add-list-help-inner {
-      transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-      transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-      transition-duration: 200ms;
-      transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
+.bk.bk-add-list-help .bk-add-list-help-fields-item + .bk-add-list-help-fields-item {
+  margin-top: 20px;
 }
-
-.bk-add-list-help-enter-from,
-.bk-add-list-help-leave-to {
+:is(.bk-add-list-help-enter-active,.bk-add-list-help-leave-active) .bk-add-list-help-inner {
+  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --bk-tw-gradient-from, --bk-tw-gradient-via, --bk-tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
+  transition-timing-function: var(--bk-tw-ease, var(--default-transition-timing-function, cubic-bezier(0.4, 0, 0.2, 1)));
+  transition-duration: var(--bk-tw-duration, var(--default-transition-duration, 150ms));
+  --bk-tw-duration: 200ms;
+  transition-duration: 200ms;
+  --bk-tw-ease: cubic-bezier(0.56, 0.04, 0.25, 1);
+  transition-timing-function: cubic-bezier(0.56, 0.04, 0.25, 1);
 }
-
 .bk-add-list-help-enter-from .bk-add-list-help-inner {
-      --bk-tw-translate-x: -30px;
-      transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-      opacity: 0;
+  --bk-tw-translate-x: calc(30px * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  opacity: 0%;
 }
-
 .bk-add-list-help-leave-to .bk-add-list-help-inner {
-      --bk-tw-translate-x: -100px;
-      transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
-      opacity: 0;
+  --bk-tw-translate-x: calc(100px * -1);
+  translate: var(--bk-tw-translate-x) var(--bk-tw-translate-y);
+  opacity: 0%;
 }
 </style>