@jackuait/blok 0.12.0 → 0.12.1

package/dist/full.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/blok-qY4LDF7A.cjs`),t=require(`./chunks/constants-BYCpx4v_.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-DaOdAh89.cjs`);var i={paragraph:{class:r.x,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.b,inlineToolbar:!0},list:{class:r.y,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.Pr,exports.Header=r.b,exports.Italic=r.c,exports.Link=r.s,exports.List=r.y,exports.Marker=r.o,exports.Paragraph=r.x,exports.Strikethrough=r.i,exports.Toggle=r._,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/blok-k8Yo4v2F.cjs`),t=require(`./chunks/constants-DGaNl2M0.cjs`),n=require(`./chunks/objectSpread2-iNkE6aJh.cjs`),r=require(`./chunks/tools-CPzDYrWa.cjs`);var i={paragraph:{class:r.x,inlineToolbar:!0,config:{preserveBlank:!0}},header:{class:r.b,inlineToolbar:!0},list:{class:r.y,inlineToolbar:!0}},a=n.t(n.t({},i),{},{bold:{class:r.l},italic:{class:r.c},marker:{class:r.o},underline:{class:r.a},strikethrough:{class:r.i},link:{class:r.s}});exports.Blok=e.t,exports.Bold=r.l,exports.DATA_ATTR=t.Pr,exports.Header=r.b,exports.Italic=r.c,exports.Link=r.s,exports.List=r.y,exports.Marker=r.o,exports.Paragraph=r.x,exports.Strikethrough=r.i,exports.Toggle=r._,exports.Underline=r.a,exports.allTools=a,exports.defaultBlockTools=r.t,exports.defaultInlineTools=r.n,exports.defaultTools=i,exports.version=e.n;

package/dist/full.mjs

@@ -1,7 +1,7 @@
-import { n as e, t } from "./chunks/blok-Cxcy7G7v.mjs";
-import { Pr as n } from "./chunks/constants-Bhk7u_hm.mjs";
+import { n as e, t } from "./chunks/blok-B4ebnd6l.mjs";
+import { Pr as n } from "./chunks/constants-BsyOzSoJ.mjs";
 import { t as r } from "./chunks/objectSpread2-CWwMYL_U.mjs";
-import { _ as i, a, b as o, c as s, i as c, l, n as u, o as d, s as f, t as p, x as m, y as h } from "./chunks/tools-Bc4e0xmz.mjs";
+import { _ as i, a, b as o, c as s, i as c, l, n as u, o as d, s as f, t as p, x as m, y as h } from "./chunks/tools-JNr7LO1_.mjs";
 //#region src/full.ts
 var g = {
 	paragraph: {

package/dist/react.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/blok-qY4LDF7A.cjs`);require(`./chunks/constants-BYCpx4v_.cjs`);const t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=new WeakMap;function a(e,t){i.set(e,t)}function o(e){return i.get(e)}function s(e){i.delete(e)}function c(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;return(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]),o}function l(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.r(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=d,exports.useBlok=c;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/blok-k8Yo4v2F.cjs`);require(`./chunks/constants-DGaNl2M0.cjs`);const t=require(`./chunks/objectSpread2-iNkE6aJh.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i=new WeakMap;function a(e,t){i.set(e,t)}function o(e){return i.get(e)}function s(e){i.delete(e)}function c(r,i){let[o,c]=(0,n.useState)(null),u=(0,n.useRef)(r);u.current=r;let d=(0,n.useRef)({editor:null,holder:null,destroyTimeout:null,isDestroyed:!1,depsToken:null}),f=(0,n.useMemo)(()=>({}),i==null?[]:i);(0,n.useEffect)(()=>{if(typeof window>`u`)return;let n=d.current;if(n.destroyTimeout!==null&&(clearTimeout(n.destroyTimeout),n.destroyTimeout=null),n.editor!==null&&!n.isDestroyed&&n.depsToken===f)return c(n.editor),()=>{l(n,c)};if(n.editor!==null&&!n.isDestroyed){s(n.editor);try{n.editor.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}let r=document.createElement(`div`);n.holder=r,n.isDestroyed=!1,n.depsToken=f;let i=u.current,o=new e.t(t.t(t.t({},i),{},{holder:r,onReady:()=>{var e,t;(e=(t=u.current).onReady)==null||e.call(t)},onChange:(...e)=>{var t,n;(t=(n=u.current).onChange)==null||t.call(n,...e)}}));return n.editor=o,a(o,r),o.isReady.then(()=>{n.editor===o&&!n.isDestroyed&&c(o)}).catch(()=>{if(n.editor===o&&!n.isDestroyed){s(o);try{o.destroy()}catch(e){}n.editor=null,n.holder=null,n.isDestroyed=!0,c(null)}}),()=>{l(n,c)}},[f]);let{readOnly:p}=r;(0,n.useEffect)(()=>{o!==null&&o.readOnly.set(p==null?!1:p)},[o,p]);let{autofocus:m}=r;return(0,n.useEffect)(()=>{o===null||!m||o.focus()},[o,m]),o}function l(e,t){e.destroyTimeout=setTimeout(()=>{if(e.editor!==null){s(e.editor);try{e.editor.destroy()}catch(e){}e.editor=null,e.holder=null,e.isDestroyed=!0,e.destroyTimeout=null,t(null)}},0)}var u=[`editor`],d=(0,n.forwardRef)(function(i,a){let{editor:s}=i,c=e.r(i,u),l=(0,n.useRef)(null);return(0,n.useEffect)(()=>{if(s===null||l.current===null)return;let e=o(s);if(e!==void 0)return l.current.appendChild(e),()=>{e.remove()}},[s]),(0,r.jsx)(`div`,t.t({ref:e=>{if(l.current=e,typeof a==`function`)a(e);else if(a!=null){let t=a;t.current=e}}},c))});exports.BlokContent=d,exports.useBlok=c;

package/dist/react.mjs

@@ -1,5 +1,5 @@
-import { r as e, t } from "./chunks/blok-Cxcy7G7v.mjs";
-import "./chunks/constants-Bhk7u_hm.mjs";
+import { r as e, t } from "./chunks/blok-B4ebnd6l.mjs";
+import "./chunks/constants-BsyOzSoJ.mjs";
 import { t as n } from "./chunks/objectSpread2-CWwMYL_U.mjs";
 import { forwardRef as r, useEffect as i, useMemo as a, useRef as o, useState as s } from "react";
 import { jsx as c } from "react/jsx-runtime";

package/dist/tools.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/constants-BYCpx4v_.cjs`),t=require(`./chunks/tools-DaOdAh89.cjs`);exports.Bold=t.l,exports.Callout=t.g,exports.Code=t.d,exports.Convert=e.m,exports.Database=t.h,exports.DatabaseRow=t.m,exports.Divider=t.p,exports.Header=t.b,exports.Image=t.u,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.y,exports.Marker=t.o,exports.Paragraph=t.x,exports.Quote=t.f,exports.Strikethrough=t.i,exports.Table=t.v,exports.Toggle=t._,exports.Underline=t.a,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`./chunks/chunk-Kud-AIAt.cjs`);const e=require(`./chunks/constants-DGaNl2M0.cjs`),t=require(`./chunks/tools-CPzDYrWa.cjs`);exports.Bold=t.l,exports.Callout=t.g,exports.Code=t.d,exports.Convert=e.m,exports.Database=t.h,exports.DatabaseRow=t.m,exports.Divider=t.p,exports.Header=t.b,exports.Image=t.u,exports.InlineCode=t.r,exports.Italic=t.c,exports.Link=t.s,exports.List=t.y,exports.Marker=t.o,exports.Paragraph=t.x,exports.Quote=t.f,exports.Strikethrough=t.i,exports.Table=t.v,exports.Toggle=t._,exports.Underline=t.a,exports.defaultBlockTools=t.t,exports.defaultInlineTools=t.n;

package/dist/tools.mjs

@@ -1,3 +1,3 @@
-import { m as e } from "./chunks/constants-Bhk7u_hm.mjs";
-import { _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./chunks/tools-Bc4e0xmz.mjs";
+import { m as e } from "./chunks/constants-BsyOzSoJ.mjs";
+import { _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./chunks/tools-JNr7LO1_.mjs";
 export { u as Bold, s as Callout, a as Code, e as Convert, c as Database, d as DatabaseRow, m as Divider, r as Header, v as Image, h as InlineCode, i as Italic, g as Link, x as List, p as Marker, b as Paragraph, o as Quote, l as Strikethrough, y as Table, t as Toggle, n as Underline, _ as defaultBlockTools, f as defaultInlineTools };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jackuait/blok",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "Blok — headless, highly extensible rich text editor built for developers who need to implement a block-based editing experience (similar to Notion) without building it from scratch",
   "module": "dist/blok.mjs",
   "main": "./dist/blok.cjs",
@@ -129,7 +129,7 @@
     "validate:spec-coverage": "node scripts/validate-spec-file-coverage.mjs",
     "ci:timing": "node scripts/ci-timing-probe.mjs",
     "release": "node scripts/release.mjs",
-    "release:preflight": "yarn lint",
+    "release:preflight": "yarn lint && yarn test",
     "unused-css": "node scripts/unused-css-finder/cli.mjs"
   },
   "author": "JackUait",

package/src/components/block-tunes/block-tune-copy-link.ts

@@ -74,9 +74,9 @@ export class CopyLinkTune implements BlockTune {
 
     try {
       await navigator.clipboard.writeText(url);
-      this.api.notifier.show({ message: 'Link copied to clipboard', style: 'success', time: 2000 });
+      this.api.notifier.show({ message: this.api.i18n.t('blockSettings.copyLinkSuccess'), style: 'success', time: 2000 });
     } catch {
-      this.api.notifier.show({ message: 'Could not copy link to block', style: 'error', time: 3000 });
+      this.api.notifier.show({ message: this.api.i18n.t('blockSettings.copyLinkError'), style: 'error', time: 3000 });
     }
   }
 }

package/src/components/modules/paste/index.ts

@@ -261,14 +261,24 @@ export class Paste extends Module {
    * Set onPaste callback handler.
    */
   private setCallback(): void {
-    this.listeners.on(this.Blok.UI.nodes.holder, 'paste', this.handlePasteEventWrapper);
+    const holder = this.Blok.UI.nodes.holder;
+
+    this.listeners.on(holder, 'paste', this.handlePasteEventWrapper);
+    this.listeners.on(holder, 'drop', this.handleDropEventWrapper);
+    this.listeners.on(holder, 'dragover', this.handleDragOverEventWrapper);
+    this.listeners.on(holder, 'dragleave', this.handleDragLeaveEventWrapper);
   }
 
   /**
    * Unset onPaste callback handler.
    */
   private unsetCallback(): void {
-    this.listeners.off(this.Blok.UI.nodes.holder, 'paste', this.handlePasteEventWrapper);
+    const holder = this.Blok.UI.nodes.holder;
+
+    this.listeners.off(holder, 'paste', this.handlePasteEventWrapper);
+    this.listeners.off(holder, 'drop', this.handleDropEventWrapper);
+    this.listeners.off(holder, 'dragover', this.handleDragOverEventWrapper);
+    this.listeners.off(holder, 'dragleave', this.handleDragLeaveEventWrapper);
   }
 
   /**
@@ -278,6 +288,148 @@ export class Paste extends Module {
     void this.handlePasteEvent(event as ClipboardEvent);
   };
 
+  private handleDropEventWrapper = (event: Event): void => {
+    void this.handleDropEvent(event as DragEvent);
+  };
+
+  private handleDragOverEventWrapper = (event: Event): void => {
+    this.handleDragOverEvent(event as DragEvent);
+  };
+
+  private handleDragLeaveEventWrapper = (event: Event): void => {
+    this.handleDragLeaveEvent(event as DragEvent);
+  };
+
+  private dataTransferHasFiles(dataTransfer: DataTransfer | null | undefined): boolean {
+    if (!dataTransfer) {
+      return false;
+    }
+
+    const types = Array.from(dataTransfer.types ?? []);
+
+    if (types.includes('Files')) {
+      return true;
+    }
+
+    return Boolean(dataTransfer.files?.length);
+  }
+
+  private dropIndicatorHolder: HTMLElement | null = null;
+
+  private handleDragOverEvent = (event: DragEvent): void => {
+    const { dataTransfer } = event;
+
+    if (!this.dataTransferHasFiles(dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    if (dataTransfer) {
+      dataTransfer.dropEffect = 'copy';
+    }
+
+    this.updateDropIndicator(event);
+  };
+
+  private updateDropIndicator(event: DragEvent): void {
+    const target = event.target instanceof Element ? event.target : null;
+    const blockHolder = target?.closest('[data-blok-element]');
+
+    if (!(blockHolder instanceof HTMLElement)) {
+      this.clearDropIndicator();
+
+      return;
+    }
+
+    const rect = blockHolder.getBoundingClientRect();
+    const edge = event.clientY < rect.top + rect.height / 2 ? 'top' : 'bottom';
+
+    if (this.dropIndicatorHolder && this.dropIndicatorHolder !== blockHolder) {
+      this.dropIndicatorHolder.removeAttribute('data-drop-indicator');
+      this.dropIndicatorHolder.style.removeProperty('--drop-indicator-depth');
+    }
+
+    blockHolder.setAttribute('data-drop-indicator', edge);
+    blockHolder.style.setProperty('--drop-indicator-depth', String(this.computeDropDepth(blockHolder)));
+    this.dropIndicatorHolder = blockHolder;
+  }
+
+  private computeDropDepth(blockHolder: HTMLElement): number {
+    const ancestorBlocks = blockHolder.parentElement?.closest('[data-blok-element]')
+      ? this.countAncestorBlocks(blockHolder)
+      : 0;
+
+    const listWrapper = blockHolder.querySelector('[data-list-depth]');
+    const listDepthRaw = listWrapper?.getAttribute('data-list-depth') ?? '0';
+    const listDepth = Number.parseInt(listDepthRaw, 10);
+    const listContribution = Number.isNaN(listDepth) ? 0 : listDepth;
+
+    return ancestorBlocks + listContribution;
+  }
+
+  private countAncestorBlocks(blockHolder: HTMLElement): number {
+    const parent = blockHolder.parentElement?.closest('[data-blok-element]') as HTMLElement | null;
+
+    if (!parent) {
+      return 0;
+    }
+
+    return 1 + this.countAncestorBlocks(parent);
+  }
+
+  private clearDropIndicator(): void {
+    if (this.dropIndicatorHolder) {
+      this.dropIndicatorHolder.removeAttribute('data-drop-indicator');
+      this.dropIndicatorHolder.style.removeProperty('--drop-indicator-depth');
+      this.dropIndicatorHolder = null;
+    }
+  }
+
+  private handleDragLeaveEvent = (event: DragEvent): void => {
+    const holder = this.Blok.UI.nodes.holder;
+    const related = event.relatedTarget as Node | null;
+
+    if (related && holder.contains(related)) {
+      return;
+    }
+
+    this.clearDropIndicator();
+  };
+
+  private handleDropEvent = async (event: DragEvent): Promise<void> => {
+    this.clearDropIndicator();
+
+    if (this.Blok.DragManager?.isDragging) {
+      return;
+    }
+
+    if (!this.dataTransferHasFiles(event.dataTransfer)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    const { BlockManager, Toolbar } = this.Blok;
+    const currentBlock = BlockManager.setCurrentBlockByChildNode(event.target as HTMLElement);
+
+    if (!currentBlock) {
+      return;
+    }
+
+    if (this.toolRegistry.isException(currentBlock.name)) {
+      return;
+    }
+
+    if (event.dataTransfer) {
+      const dropTarget = event.target instanceof Element ? event.target : undefined;
+
+      await this.processDataTransfer(event.dataTransfer, dropTarget);
+    }
+
+    Toolbar.moveAndOpen();
+  };
+
   /**
    * Check if browser behavior suits better.
    */

package/src/styles/colors.css

@@ -265,19 +265,31 @@
   --blok-handle-fg-default: rgba(255, 255, 255, 0.85);
 
   /* Spacing scale — 4px base, aligned with Tailwind's default spacing scale. */
+  --blok-space-0: 0;
+  --blok-space-0-25: 1px;
   --blok-space-0-5: 2px;
+  --blok-space-0-75: 3px;
   --blok-space-1: 4px;
   --blok-space-1-25: 5px;
   --blok-space-1-5: 6px;
   --blok-space-1-75: 7px;
   --blok-space-2: 8px;
+  --blok-space-2-25: 9px;
   --blok-space-2-5: 10px;
+  --blok-space-2-75: 11px;
   --blok-space-3: 12px;
+  --blok-space-3-25: 13px;
+  --blok-space-3-5: 14px;
   --blok-space-4: 16px;
+  --blok-space-4-5: 18px;
   --blok-space-5: 20px;
   --blok-space-6: 24px;
   --blok-space-10: 40px;
 
+  /* Micro radii for the crop-editor handle notches. */
+  --blok-radius-hairline: 1.5px;
+  --blok-radius-none: 0;
+
   /* Icon sizing (non-scale, role-based). */
   --blok-size-icon-sm: 18px;
   --blok-size-icon-md: 22px;
@@ -335,6 +347,51 @@
   --blok-line-height-tight: 1;
   --blok-line-height-body: 1.45;
   --blok-line-height-option: 1.3;
+
+  /*
+    Generic surface / accent hooks consumed with a fallback by plugin-owned
+    CSS (image lightbox, alt popover, crop editor). Declared here so the
+    var-resolution audit sees them as valid tokens.
+  */
+  --blok-accent: var(--blok-color-accent);
+  --blok-bg-tertiary: var(--blok-bg-light);
+  --blok-surface-muted: rgba(255, 255, 255, 0.05);
+  --blok-surface-strong: #1e1e1e;
+
+  /* Image lightbox chrome (dark, independent of page theme). */
+  --blok-image-lightbox-backdrop: rgba(25, 25, 24, 0.92);
+  --blok-image-lightbox-toolbar-bg: #252525;
+  --blok-image-lightbox-toolbar-fg: #e2e0dc;
+  --blok-image-lightbox-toolbar-ring: rgba(255, 255, 255, 0.14);
+  --blok-image-lightbox-toolbar-shadow-main: rgba(0, 0, 0, 0.5);
+  --blok-image-lightbox-toolbar-shadow-ambient: rgba(0, 0, 0, 0.4);
+  --blok-image-lightbox-btn-hover-bg: rgba(255, 255, 255, 0.055);
+  --blok-image-lightbox-btn-active-bg: rgba(255, 255, 255, 0.09);
+  --blok-image-lightbox-divider-bg: rgba(255, 255, 255, 0.1);
+  --blok-image-lightbox-caption-fg: #a39e98;
+  --blok-image-lightbox-shortcut-fg: rgba(255, 255, 255, 0.45);
+
+  /* Image empty-state embed submit (high-contrast fg on accent). */
+  --blok-image-embed-submit-fg: #fff;
+
+  /* Crop editor composite-shadow leaf literals. */
+  --blok-crop-rect-drop-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.8);
+  --blok-crop-handle-edge-drop-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
+  --blok-crop-handle-edge-halo: 0 0 0 3px rgba(255, 255, 255, 0.18);
+  --blok-crop-handle-edge-drop-hover: 0 2px 6px rgba(0, 0, 0, 0.3);
+  --blok-crop-pill-fg: #fff;
+
+  /* Alt-popover surface composite shadow (dark surface). */
+  --blok-alt-popover-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+
+  /* Image error-state inset highlight. */
+  --blok-image-error-inset-highlight: #fff;
+
+  /* Crop-modal button shadow. */
+  --blok-crop-modal-btn-shadow: rgba(0, 0, 0, 0.3);
+
+  /* Image error-state radius (slightly larger than --blok-radius-md). */
+  --blok-radius-md-plus: 8px;
 }
 
 /* ─── Dark theme — system preference ────────────────── */

package/src/styles/database.css

@@ -363,7 +363,7 @@
   padding: var(--blok-space-1);
   border-radius: var(--blok-space-1);
   color: var(--blok-database-add-text);
-  gap: -4px;
+  gap: calc(-1 * var(--blok-space-1));
 }
 
 [data-blok-database-drawer-close]:hover {
@@ -373,7 +373,7 @@
 [data-blok-database-drawer-close] svg {
   width: 14px;
   height: 14px;
-  margin-left: -6px;
+  margin-left: calc(-1 * var(--blok-space-1-5));
 }
 
 [data-blok-database-drawer-close] svg:first-child {
@@ -699,7 +699,7 @@
   justify-content: center;
   width: 30px;
   height: 30px;
-  border-radius: 7px;
+  border-radius: var(--blok-space-1-75);
   background: var(--blok-database-popover-hover);
   color: var(--blok-database-tab-text-active);
   flex-shrink: 0;