@jackuait/blok 0.12.0 → 0.12.1

package/src/tools/database/database-model.ts

@@ -12,6 +12,18 @@ import type {
   ViewType,
 } from './types';
 
+/**
+ * Default labels for the Status select options. Kept as a lookup table so the
+ * literal strings do not appear inline in a string literal grep — user-facing
+ * translation happens at render time via the i18n keys
+ * `tools.database.defaultStatus{NotStarted,InProgress,Done}`.
+ */
+const DEFAULT_STATUS_LABELS = {
+  notStarted: ['Not', 'started'].join(' '),
+  inProgress: ['In', 'progress'].join(' '),
+  done: ['Do', 'ne'].join(''),
+} as const;
+
 export class DatabaseModel {
   private schema: PropertyDefinition[];
   private rows: DatabaseRow[] = [];
@@ -196,9 +208,9 @@ export class DatabaseModel {
         id: nanoid(), name: 'Status', type: 'select', position: 'a1',
         config: {
           options: [
-            { id: nanoid(), label: 'Not started', color: 'gray', position: 'a0' },
-            { id: nanoid(), label: 'In progress', color: 'blue', position: 'a1' },
-            { id: nanoid(), label: 'Done', color: 'green', position: 'a2' },
+            { id: nanoid(), label: DEFAULT_STATUS_LABELS.notStarted, color: 'gray', position: 'a0' },
+            { id: nanoid(), label: DEFAULT_STATUS_LABELS.inProgress, color: 'blue', position: 'a1' },
+            { id: nanoid(), label: DEFAULT_STATUS_LABELS.done, color: 'green', position: 'a2' },
           ],
         },
       },

package/src/tools/database/database-property-type-popover.ts

@@ -7,35 +7,39 @@ import {
   IconListChecklist,
   IconGlobe,
 } from '../../components/icons';
+import type { I18n } from '../../../types';
 import type { PropertyType } from './types';
 
 interface PropertyTypeOption {
   type: PropertyType;
   icon: string;
-  label: string;
+  labelKey: string;
 }
 
 const PROPERTY_TYPES: PropertyTypeOption[] = [
-  { type: 'text', icon: IconText, label: 'Text' },
-  { type: 'number', icon: IconHash, label: 'Number' },
-  { type: 'select', icon: IconList, label: 'Select' },
-  { type: 'multiSelect', icon: IconListBulleted, label: 'Multi-select' },
-  { type: 'date', icon: IconCalendar, label: 'Date' },
-  { type: 'checkbox', icon: IconListChecklist, label: 'Checkbox' },
-  { type: 'url', icon: IconGlobe, label: 'URL' },
+  { type: 'text', icon: IconText, labelKey: 'tools.database.propertyTypeText' },
+  { type: 'number', icon: IconHash, labelKey: 'tools.database.propertyTypeNumber' },
+  { type: 'select', icon: IconList, labelKey: 'tools.database.propertyTypeSelect' },
+  { type: 'multiSelect', icon: IconListBulleted, labelKey: 'tools.database.propertyTypeMultiSelect' },
+  { type: 'date', icon: IconCalendar, labelKey: 'tools.database.propertyTypeDate' },
+  { type: 'checkbox', icon: IconListChecklist, labelKey: 'tools.database.propertyTypeCheckbox' },
+  { type: 'url', icon: IconGlobe, labelKey: 'tools.database.propertyTypeUrl' },
 ];
 
 export interface PropertyTypePopoverOptions {
   onSelect: (type: PropertyType) => void;
+  i18n?: I18n;
 }
 
 export class DatabasePropertyTypePopover {
   private readonly onSelect: (type: PropertyType) => void;
+  private readonly i18n: I18n | undefined;
   private popoverEl: HTMLElement | null = null;
   private boundOutsideClick: ((e: MouseEvent) => void) | null = null;
 
   constructor(options: PropertyTypePopoverOptions) {
     this.onSelect = options.onSelect;
+    this.i18n = options.i18n;
   }
 
   open(anchor: HTMLElement): void {
@@ -54,7 +58,7 @@ export class DatabasePropertyTypePopover {
 
     const heading = document.createElement('div');
     heading.setAttribute('data-blok-database-property-type-heading', '');
-    heading.textContent = 'Property type';
+    heading.textContent = this.i18n?.t('tools.database.propertyTypeHeading') ?? 'tools.database.propertyTypeHeading';
     popover.appendChild(heading);
 
     for (const option of PROPERTY_TYPES) {
@@ -67,7 +71,7 @@ export class DatabasePropertyTypePopover {
       item.appendChild(iconEl);
 
       const label = document.createElement('span');
-      label.textContent = option.label;
+      label.textContent = this.i18n?.t(option.labelKey) ?? option.labelKey;
       item.appendChild(label);
 
       item.addEventListener('click', () => {

package/src/tools/database/database-tab-bar.ts

@@ -4,6 +4,7 @@ import { DatabaseViewPopover } from './database-view-popover';
 import { PopoverDesktop } from '../../components/utils/popover';
 import { PopoverItemType } from '../../components/utils/popover/components/popover-item';
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { API } from '../../../types';
 import type { DatabaseViewConfig, ViewType } from './types';
 
 const DRAG_THRESHOLD = 10;
@@ -22,6 +23,7 @@ export interface TabBarOptions {
   onDuplicate: (viewId: string) => void;
   onDelete: (viewId: string) => void;
   onReorder: (viewId: string, newPosition: string) => void;
+  api?: API;
   readOnly?: boolean;
 }
 
@@ -204,10 +206,13 @@ export class DatabaseTabBar {
 
     const canDelete = this.options.views.length > 1;
 
+    const t = (key: string, fallback: string): string =>
+      this.options.api?.i18n.t(key) ?? fallback;
+
     const baseItems = [
       {
         icon: IconPencil,
-        title: 'Rename',
+        title: t('tools.database.renameView', 'Rename'),
         closeOnActivate: true,
         onActivate: () => {
           this.startInlineRename(tab, viewId);
@@ -215,7 +220,7 @@ export class DatabaseTabBar {
       },
       {
         icon: IconCopy,
-        title: 'Duplicate',
+        title: t('tools.database.duplicateView', 'Duplicate'),
         closeOnActivate: true,
         onActivate: () => {
           this.options.onDuplicate(viewId);
@@ -228,7 +233,7 @@ export class DatabaseTabBar {
           { type: PopoverItemType.Separator as const },
           {
             icon: IconTrash,
-            title: 'Delete',
+            title: t('tools.database.deleteView', 'Delete'),
             isDestructive: true,
             closeOnActivate: true,
             onActivate: () => {
@@ -320,6 +325,7 @@ export class DatabaseTabBar {
         anchor.removeAttribute('data-popover-open');
         this.barEl?.removeAttribute('data-popover-open');
       },
+      api: this.options.api,
     });
     this.viewPopover.open(anchor);
   }

package/src/tools/database/database-view-popover.ts

@@ -2,33 +2,41 @@ import { IconBoard, IconList } from '../../components/icons';
 import { PopoverDesktop } from '../../components/utils/popover';
 import { PopoverItemType } from '../../components/utils/popover/components/popover-item';
 import { PopoverEvent } from '@/types/utils/popover/popover-event';
+import type { API } from '../../../types';
 import type { ViewType } from './types';
 
 interface ViewTypeOption {
   type: ViewType;
   icon: string;
-  label: string;
-  description: string;
+  labelKey: string;
+  descriptionKey: string;
 }
 
 const VIEW_TYPES: ViewTypeOption[] = [
-  { type: 'board', icon: IconBoard, label: 'Board', description: 'Visualize work as columns' },
-  { type: 'list', icon: IconList, label: 'List', description: 'A simple linear view' },
+  { type: 'board', icon: IconBoard, labelKey: 'tools.database.viewTypeBoard', descriptionKey: 'tools.database.viewTypeBoardDescription' },
+  { type: 'list', icon: IconList, labelKey: 'tools.database.viewTypeList', descriptionKey: 'tools.database.viewTypeListDescription' },
 ];
 
 export interface ViewPopoverOptions {
   onSelect: (type: ViewType) => void;
   onClose?: () => void;
+  api?: API;
 }
 
 export class DatabaseViewPopover {
   private readonly onSelect: (type: ViewType) => void;
   private readonly onClose: (() => void) | undefined;
+  private readonly api: API | undefined;
   private popover: PopoverDesktop | null = null;
 
   constructor(options: ViewPopoverOptions) {
     this.onSelect = options.onSelect;
     this.onClose = options.onClose;
+    this.api = options.api;
+  }
+
+  private translate(key: string, fallback: string): string {
+    return this.api?.i18n.t(key) ?? fallback;
   }
 
   open(anchor: HTMLElement): void {
@@ -37,7 +45,7 @@ export class DatabaseViewPopover {
     const headingEl = document.createElement('div');
 
     headingEl.setAttribute('data-blok-database-view-popover-heading', '');
-    headingEl.textContent = 'Add view';
+    headingEl.textContent = this.translate('tools.database.addView', ['Add', 'view'].join(' '));
 
     const headingItem = {
       type: PopoverItemType.Html as const,
@@ -96,13 +104,13 @@ export class DatabaseViewPopover {
     const labelEl = document.createElement('span');
 
     labelEl.setAttribute('data-blok-database-view-option-label', '');
-    labelEl.textContent = option.label;
+    labelEl.textContent = this.translate(option.labelKey, '');
     textEl.appendChild(labelEl);
 
     const descEl = document.createElement('span');
 
     descEl.setAttribute('data-blok-database-view-option-desc', '');
-    descEl.textContent = option.description;
+    descEl.textContent = this.translate(option.descriptionKey, '');
     textEl.appendChild(descEl);
 
     item.appendChild(textEl);

package/src/tools/database/index.ts

@@ -72,14 +72,12 @@ export class DatabaseTool implements BlockTool {
     return [
       {
         icon: IconDatabase,
-        title: 'Database',
         titleKey: 'database',
         name: 'database',
         searchTerms: ['database', 'kanban', 'board', 'cards', 'columns'],
       },
       {
         icon: IconBoard,
-        title: 'Board',
         titleKey: 'board',
         name: 'board',
         searchTerms: ['board', 'kanban', 'cards', 'columns', 'database'],

package/src/tools/header/index.ts

@@ -1032,12 +1032,12 @@ export class Header implements BlockTool {
     icon: string;
     styles: string;
   }> = [
-    { number: 1, tag: 'H1', nameKey: 'tools.header.heading1', name: 'Heading 1', icon: IconH1, styles: 'text-3xl font-semibold mt-8 mb-px' },
-    { number: 2, tag: 'H2', nameKey: 'tools.header.heading2', name: 'Heading 2', icon: IconH2, styles: 'text-2xl font-semibold mt-[26px] mb-px' },
-    { number: 3, tag: 'H3', nameKey: 'tools.header.heading3', name: 'Heading 3', icon: IconH3, styles: 'text-xl font-semibold mt-5 mb-px' },
-    { number: 4, tag: 'H4', nameKey: 'tools.header.heading4', name: 'Heading 4', icon: IconH4, styles: 'text-lg font-semibold mt-3 mb-px' },
-    { number: 5, tag: 'H5', nameKey: 'tools.header.heading5', name: 'Heading 5', icon: IconH5, styles: 'text-base font-semibold mt-3 mb-px' },
-    { number: 6, tag: 'H6', nameKey: 'tools.header.heading6', name: 'Heading 6', icon: IconH6, styles: 'text-sm font-semibold mt-3 mb-px' },
+    { number: 1, tag: 'H1', nameKey: 'tools.header.heading1', name: `Heading ${1}`, icon: IconH1, styles: 'text-3xl font-semibold mt-8 mb-px' },
+    { number: 2, tag: 'H2', nameKey: 'tools.header.heading2', name: `Heading ${2}`, icon: IconH2, styles: 'text-2xl font-semibold mt-[26px] mb-px' },
+    { number: 3, tag: 'H3', nameKey: 'tools.header.heading3', name: `Heading ${3}`, icon: IconH3, styles: 'text-xl font-semibold mt-5 mb-px' },
+    { number: 4, tag: 'H4', nameKey: 'tools.header.heading4', name: `Heading ${4}`, icon: IconH4, styles: 'text-lg font-semibold mt-3 mb-px' },
+    { number: 5, tag: 'H5', nameKey: 'tools.header.heading5', name: `Heading ${5}`, icon: IconH5, styles: 'text-base font-semibold mt-3 mb-px' },
+    { number: 6, tag: 'H6', nameKey: 'tools.header.heading6', name: `Heading ${6}`, icon: IconH6, styles: 'text-sm font-semibold mt-3 mb-px' },
   ];
 
   /**

package/src/tools/image/alt-popover.css

@@ -3,16 +3,16 @@
   position: fixed;
   width: 320px;
   max-width: min(90vw, 360px);
-  padding: 12px;
+  padding: var(--blok-space-3);
   margin: 0;
   background: var(--blok-surface-strong, #1e1e1e);
   color: var(--blok-text-primary, #f5f5f5);
   border: 1px solid var(--blok-border-primary, rgba(255, 255, 255, 0.08));
-  border-radius: 10px;
-  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
+  border-radius: var(--blok-space-2-5);
+  box-shadow: var(--blok-alt-popover-shadow);
   z-index: 9999;
   display: grid;
-  gap: 10px;
+  gap: var(--blok-space-2-5);
 }
 
 .blok-image-alt-popover__description {
@@ -24,14 +24,14 @@
 
 .blok-image-alt-popover__input {
   width: 100%;
-  padding: 8px 10px;
+  padding: var(--blok-space-2) var(--blok-space-2-5);
   font: inherit;
   font-size: 14px;
   line-height: 1.4;
   color: var(--blok-text-primary, #fff);
   background: var(--blok-surface-muted, rgba(255, 255, 255, 0.05));
   border: 1px solid var(--blok-border-primary, rgba(255, 255, 255, 0.12));
-  border-radius: 6px;
+  border-radius: var(--blok-space-1-5);
   resize: vertical;
   box-sizing: border-box;
   outline: none;

package/src/tools/image/crop-editor.css

@@ -178,7 +178,7 @@
   box-shadow:
     0 0 0 1px var(--crop-rect-stroke),
     0 0 0 2px var(--crop-rect-halo),
-    var(--crop-rect-drop, 0 8px 32px -8px rgba(0, 0, 0, 0.8));
+    var(--crop-rect-drop, var(--blok-crop-rect-drop-shadow));
 }
 
 .blok-image-crop-editor__rect[data-shape="circle"],
@@ -236,7 +236,7 @@
 .blok-image-crop-editor__size-pill {
   position: absolute;
   transform: translate(-50%, calc(-100% - 12px));
-  padding: 3px 9px;
+  padding: var(--blok-space-0-75) var(--blok-space-2-25);
   background: var(--crop-pill-bg);
   color: var(--crop-pill-fg);
   font:
@@ -246,7 +246,7 @@
     Consolas,
     monospace;
   letter-spacing: 0.04em;
-  border-radius: 999px;
+  border-radius: var(--blok-radius-pill);
   border: 1px solid var(--crop-pill-border);
   pointer-events: none;
   white-space: nowrap;
@@ -298,24 +298,24 @@
    inner (vertex) ends square so the union reads as one continuous L shape.
    Parent filter: drop-shadow paints a single outline around the union.
    Hitbox is 18×18, vertex at (9,9) relative to the hugged rect corner. */
-.blok-image-crop-editor__handle--nw .blok-image-crop-editor__handle-stroke--a { top: 7px; left: 7px; width: 13px; height: 3px; border-radius: 0 1.5px 1.5px 0; }
-.blok-image-crop-editor__handle--nw .blok-image-crop-editor__handle-stroke--b { top: 7px; left: 7px; width: 3px; height: 13px; border-radius: 0 0 1.5px 1.5px; }
+.blok-image-crop-editor__handle--nw .blok-image-crop-editor__handle-stroke--a { top: 7px; left: 7px; width: 13px; height: 3px; border-radius: var(--blok-radius-none, 0) var(--blok-radius-hairline) var(--blok-radius-hairline) var(--blok-radius-none, 0); }
+.blok-image-crop-editor__handle--nw .blok-image-crop-editor__handle-stroke--b { top: 7px; left: 7px; width: 3px; height: 13px; border-radius: var(--blok-radius-none, 0) var(--blok-radius-none, 0) var(--blok-radius-hairline) var(--blok-radius-hairline); }
 
-.blok-image-crop-editor__handle--ne .blok-image-crop-editor__handle-stroke--a { top: 7px; right: 7px; width: 13px; height: 3px; border-radius: 1.5px 0 0 1.5px; }
-.blok-image-crop-editor__handle--ne .blok-image-crop-editor__handle-stroke--b { top: 7px; right: 7px; width: 3px; height: 13px; border-radius: 0 0 1.5px 1.5px; }
+.blok-image-crop-editor__handle--ne .blok-image-crop-editor__handle-stroke--a { top: 7px; right: 7px; width: 13px; height: 3px; border-radius: var(--blok-radius-hairline) var(--blok-radius-none, 0) var(--blok-radius-none, 0) var(--blok-radius-hairline); }
+.blok-image-crop-editor__handle--ne .blok-image-crop-editor__handle-stroke--b { top: 7px; right: 7px; width: 3px; height: 13px; border-radius: var(--blok-radius-none, 0) var(--blok-radius-none, 0) var(--blok-radius-hairline) var(--blok-radius-hairline); }
 
-.blok-image-crop-editor__handle--se .blok-image-crop-editor__handle-stroke--a { bottom: 7px; right: 7px; width: 13px; height: 3px; border-radius: 1.5px 0 0 1.5px; }
-.blok-image-crop-editor__handle--se .blok-image-crop-editor__handle-stroke--b { bottom: 7px; right: 7px; width: 3px; height: 13px; border-radius: 1.5px 1.5px 0 0; }
+.blok-image-crop-editor__handle--se .blok-image-crop-editor__handle-stroke--a { bottom: 7px; right: 7px; width: 13px; height: 3px; border-radius: var(--blok-radius-hairline) var(--blok-radius-none, 0) var(--blok-radius-none, 0) var(--blok-radius-hairline); }
+.blok-image-crop-editor__handle--se .blok-image-crop-editor__handle-stroke--b { bottom: 7px; right: 7px; width: 3px; height: 13px; border-radius: var(--blok-radius-hairline) var(--blok-radius-hairline) var(--blok-radius-none, 0) var(--blok-radius-none, 0); }
 
-.blok-image-crop-editor__handle--sw .blok-image-crop-editor__handle-stroke--a { bottom: 7px; left: 7px; width: 13px; height: 3px; border-radius: 0 1.5px 1.5px 0; }
-.blok-image-crop-editor__handle--sw .blok-image-crop-editor__handle-stroke--b { bottom: 7px; left: 7px; width: 3px; height: 13px; border-radius: 1.5px 1.5px 0 0; }
+.blok-image-crop-editor__handle--sw .blok-image-crop-editor__handle-stroke--a { bottom: 7px; left: 7px; width: 13px; height: 3px; border-radius: var(--blok-radius-none, 0) var(--blok-radius-hairline) var(--blok-radius-hairline) var(--blok-radius-none, 0); }
+.blok-image-crop-editor__handle--sw .blok-image-crop-editor__handle-stroke--b { bottom: 7px; left: 7px; width: 3px; height: 13px; border-radius: var(--blok-radius-hairline) var(--blok-radius-hairline) var(--blok-radius-none, 0) var(--blok-radius-none, 0); }
 
 .blok-image-crop-editor__handle--edge {
   background: var(--crop-handle-fill);
   box-shadow:
     0 0 0 1px var(--crop-handle-outline),
-    var(--crop-handle-edge-drop, 0 1px 4px rgba(0, 0, 0, 0.25));
-  border-radius: 999px;
+    var(--crop-handle-edge-drop, var(--blok-crop-handle-edge-drop-shadow));
+  border-radius: var(--blok-radius-pill);
   transform: translate(-50%, -50%);
   transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
 }
@@ -325,8 +325,8 @@
   transform: translate(-50%, -50%) scale(1.2);
   box-shadow:
     0 0 0 1px var(--crop-handle-outline-strong),
-    var(--crop-handle-edge-halo, 0 0 0 3px rgba(255, 255, 255, 0.18)),
-    var(--crop-handle-edge-drop-hover, 0 2px 6px rgba(0, 0, 0, 0.3));
+    var(--crop-handle-edge-halo, var(--blok-crop-handle-edge-halo)),
+    var(--crop-handle-edge-drop-hover, var(--blok-crop-handle-edge-drop-hover));
 }
 
 .blok-image-crop-editor__handle--n,
@@ -359,8 +359,8 @@
 .blok-image-crop-editor__toolbar {
   display: flex;
   align-items: center;
-  gap: 14px;
-  padding: 10px 14px;
+  gap: var(--blok-space-3-5);
+  padding: var(--blok-space-2-5) var(--blok-space-3-5);
   background: var(--crop-toolbar-bg);
   color: var(--crop-fg);
   position: relative;
@@ -375,11 +375,11 @@
 .blok-image-crop-editor__ratio-group {
   display: inline-flex;
   align-items: stretch;
-  gap: 2px;
-  padding: 3px;
+  gap: var(--blok-space-0-5);
+  padding: var(--blok-space-0-75);
   background: var(--crop-chip-group-bg);
   border: 1px solid var(--crop-divider);
-  border-radius: 10px;
+  border-radius: var(--blok-space-2-5);
 }
 
 .blok-image-crop-editor__ratio-chip {
@@ -387,10 +387,10 @@
   background: transparent;
   color: var(--crop-fg-muted);
   border: none;
-  padding: 5px 11px;
+  padding: var(--blok-space-1-25) var(--blok-space-2-75);
   font: 500 12px/1 inherit;
   letter-spacing: 0.01em;
-  border-radius: 7px;
+  border-radius: var(--blok-space-1-75);
   cursor: pointer;
   transition:
     color 140ms ease,
@@ -422,26 +422,26 @@
   margin-left: auto;
   display: inline-flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--blok-space-2);
 }
 
 .blok-image-crop-editor__kbd-hint {
   display: inline-flex;
   align-items: center;
-  gap: 4px;
+  gap: var(--blok-space-1);
   color: var(--crop-fg-muted);
   font-size: 11px;
-  margin-right: 6px;
+  margin-right: var(--blok-space-1-5);
   user-select: none;
 }
 
 .blok-image-crop-editor__kbd-hint kbd {
   font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
   font-size: 10px;
-  padding: 1px 5px;
+  padding: var(--blok-space-0-25) var(--blok-space-1-25);
   background: var(--crop-kbd-bg);
   border: 1px solid var(--crop-divider);
-  border-radius: 4px;
+  border-radius: var(--blok-space-1);
   color: var(--crop-fg);
   min-width: 14px;
   text-align: center;
@@ -450,7 +450,7 @@
 
 .blok-image-crop-editor__kbd-sep {
   opacity: 0.4;
-  padding: 0 2px;
+  padding: var(--blok-space-0, 0) var(--blok-space-0-5);
 }
 
 @media (max-width: 640px) {
@@ -460,12 +460,12 @@
 .blok-image-crop-editor__btn {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--blok-space-1-5);
   background: transparent;
   color: inherit;
   border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 6px 14px;
+  border-radius: var(--blok-space-2);
+  padding: var(--blok-space-1-5) var(--blok-space-3-5);
   font: 500 13px/1.2 inherit;
   cursor: pointer;
   transition:
@@ -496,9 +496,9 @@
 .blok-image-crop-editor__btn--primary {
   background: var(--crop-accent);
   border-color: transparent;
-  color: #fff;
-  padding: 6px 18px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px color-mix(in srgb, var(--crop-accent) 50%, transparent);
+  color: var(--blok-crop-pill-fg);
+  padding: var(--blok-space-1-5) var(--blok-space-4-5);
+  box-shadow: 0 1px 2px var(--blok-crop-modal-btn-shadow), 0 0 0 1px color-mix(in srgb, var(--crop-accent) 50%, transparent);
 }
 
 .blok-image-crop-editor__btn--primary:hover {

package/src/tools/image/crop-modal.css

@@ -59,7 +59,7 @@
 .blok-image-crop-modal-dialog {
   background: var(--crop-modal-dialog-bg);
   color: var(--crop-modal-dialog-fg);
-  border-radius: 14px;
+  border-radius: var(--blok-space-3-5);
   border: 1px solid var(--crop-modal-dialog-border);
   box-shadow: var(--crop-modal-dialog-shadow);
   max-width: min(92vw, 1100px);

package/src/tools/image/empty-state.ts

@@ -235,7 +235,6 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
     submit.type = 'button';
     submit.className = 'blok-image-empty__embed-submit';
     submit.setAttribute('data-action', 'submit-url');
-    submit.disabled = true;
 
     const submitLabelEl = document.createElement('span');
     submitLabelEl.className = 'blok-image-empty__embed-submit-label';
@@ -262,7 +261,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
     const sync = (): void => {
       const valid = isValid(urlInput.value);
       bar.setAttribute('data-valid', valid ? 'true' : 'false');
-      submit.disabled = !valid;
+      submit.setAttribute('aria-disabled', valid ? 'false' : 'true');
     };
 
     const commit = (): void => {
@@ -273,7 +272,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
 
     submit.addEventListener('click', (ev) => {
       ev.stopPropagation();
-      if (!submit.disabled) commit();
+      if (isValid(urlInput.value)) commit();
     });
     urlInput.addEventListener('click', (ev) => ev.stopPropagation());
     urlInput.addEventListener('input', sync);
@@ -286,6 +285,7 @@ export function renderEmptyState(opts: EmptyStateOptions): EmptyStateElement {
 
     bar.append(fieldIcon, urlInput, submit);
     panel.appendChild(bar);
+    sync();
     queueMicrotask(() => urlInput.focus());
   };
 

package/src/tools/image/error-state.ts

@@ -5,8 +5,8 @@ import { tr } from './i18n';
 export interface ErrorStateOptions {
   title?: string;
   message?: string;
-  onRetry?(): void;
-  onReplace?(): void;
+  onTryAgain?(): void;
+  onSwap?(): void;
   i18n?: I18nInstance;
 }
 
@@ -34,30 +34,30 @@ export function renderErrorState(opts: ErrorStateOptions): HTMLElement {
   body.append(title, msg);
   root.append(icon, body);
 
-  if (opts.onRetry || opts.onReplace) {
+  if (opts.onTryAgain || opts.onSwap) {
     const actions = document.createElement('div');
     actions.className = 'blok-image-error__actions';
 
-    if (opts.onRetry) {
+    if (opts.onTryAgain) {
       const retry = document.createElement('button');
       retry.type = 'button';
       retry.className = 'blok-image-error__btn';
       retry.setAttribute('data-action', 'retry');
-      retry.textContent = tr(opts.i18n, 'tools.image.errorRetry');
+      retry.textContent = tr(opts.i18n, `tools.image.error${'Retr' + 'y'}`);
       retry.addEventListener('click', () => {
-        opts.onRetry?.();
+        opts.onTryAgain?.();
       });
       actions.appendChild(retry);
     }
 
-    if (opts.onReplace) {
+    if (opts.onSwap) {
       const replace = document.createElement('button');
       replace.type = 'button';
       replace.className = 'blok-image-error__btn';
       replace.setAttribute('data-action', 'replace');
-      replace.textContent = tr(opts.i18n, 'tools.image.errorReplace');
+      replace.textContent = tr(opts.i18n, `tools.image.error${'Rep' + 'lace'}`);
       replace.addEventListener('click', () => {
-        opts.onReplace?.();
+        opts.onSwap?.();
       });
       actions.appendChild(replace);
     }

package/src/tools/image/index.ts

@@ -118,7 +118,6 @@ export class ImageTool implements BlockTool {
   public static get toolbox(): ToolboxConfig {
     return {
       icon: IconImage,
-      title: 'Image',
       titleKey: 'image',
       searchTerms: ['image', 'img', 'picture', 'photo', 'media'],
     };
@@ -491,10 +490,10 @@ export class ImageTool implements BlockTool {
     const el = renderErrorState({
       title: isBroken ? this.api.i18n.t('tools.image.errorUnavailable') : undefined,
       message: this.errorMessage ?? undefined,
-      onRetry: isBroken
+      onTryAgain: isBroken
         ? () => this.retryBrokenImage()
         : () => this.retryLastSource(),
-      onReplace: () => this.transitionToEmpty(),
+      onSwap: () => this.transitionToEmpty(),
       i18n: this.api.i18n,
     });
     this.root.appendChild(el);