@jackuait/blok 0.7.2 → 0.7.3-beta.2

package/src/components/i18n/locales/ml/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "പുതിയ കോളം ചേർക്കാൻ ക്ലിക്ക് ചെയ്യുക",
   "tools.table.dragToAddRemoveColumns": "കോളങ്ങൾ ചേർക്കാനോ നീക്കാനോ വലിച്ചിടുക",
   "blockSettings.delete": "ഇല്ലാതാക്കുക",
-  "blockSettings.toggleWidth": "വീതി മാറ്റുക",
   "a11y.dragHandle": "ബ്ലോക്ക് നീക്കാൻ വലിച്ചിടുക അല്ലെങ്കിൽ മെനുവിന് ക്ലിക്ക് ചെയ്യുക",
   "a11y.dragHandleRole": "വലിച്ചിടൽ ഹാൻഡിൽ",
   "a11y.dragStarted": "ബ്ലോക്ക് വലിച്ചിടുന്നു",

package/src/components/i18n/locales/mn/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Шинэ багана нэмэхийн тулд дарна уу",
   "tools.table.dragToAddRemoveColumns": "Багана нэмэх эсвэл хасахын тулд чирнэ үү",
   "blockSettings.delete": "Устгах",
-  "blockSettings.toggleWidth": "Өргөнийг солих",
   "a11y.dragHandle": "Блок зөөхийн тулд чирнэ үү эсвэл цэсийг нээхийн тулд дарна уу",
   "a11y.dragHandleRole": "чирэх бариул",
   "a11y.dragStarted": "Блок чирж байна",

package/src/components/i18n/locales/mr/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "संकुचित शीर्षक 3",
   "tools.list.placeholder": "यादी",
   "blockSettings.delete": "हटवा",
-  "blockSettings.toggleWidth": "रुंदी बदला",
   "a11y.dragHandle": "ब्लॉक हलवण्यासाठी ओढा किंवा मेनूसाठी क्लिक करा",
   "a11y.dragHandleRole": "हलवण्याचे नियंत्रण",
   "a11y.dragStarted": "ब्लॉक हलवला जात आहे",

package/src/components/i18n/locales/ms/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Klik untuk tambah lajur baharu",
   "tools.table.dragToAddRemoveColumns": "Seret untuk tambah atau buang lajur",
   "blockSettings.delete": "Padam",
-  "blockSettings.toggleWidth": "Tukar lebar",
   "a11y.dragHandle": "Seret untuk alih blok atau klik untuk menu",
   "a11y.dragHandleRole": "pemegang seret",
   "a11y.dragStarted": "Menyeret blok",

package/src/components/i18n/locales/my/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "ကော်လံအသစ်ထည့်ရန် နှိပ်ပါ",
   "tools.table.dragToAddRemoveColumns": "ကော်လံထည့်ရန် သို့မဟုတ် ဖယ်ရန် ဆွဲယူပါ",
   "blockSettings.delete": "ဖျက်ရန်",
-  "blockSettings.toggleWidth": "အကျယ်ပြောင်းရန်",
   "a11y.dragHandle": "ဘလောက်ရွှေ့ရန် ဆွဲယူပါ သို့မဟုတ် မီနူးအတွက် နှိပ်ပါ",
   "a11y.dragHandleRole": "ဆွဲယူကိုင်တံ",
   "a11y.dragStarted": "ဘလောက်ကို ဆွဲယူနေသည်",

package/src/components/i18n/locales/ne/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "मोड्ने शीर्षक ३",
   "tools.list.placeholder": "सूची",
   "blockSettings.delete": "मेटाउनुहोस्",
-  "blockSettings.toggleWidth": "चौडाइ बदल्नुहोस्",
   "a11y.dragHandle": "ब्लक सार्न तान्नुहोस् वा मेनुको लागि क्लिक गर्नुहोस्",
   "a11y.dragHandleRole": "तान्ने नियन्त्रण",
   "a11y.dragStarted": "ब्लक तान्दै",

package/src/components/i18n/locales/nl/messages.json

@@ -42,7 +42,6 @@
   "tools.toggle.ariaLabelCollapse": "Inklappen",
   "tools.toggle.ariaLabelExpand": "Uitklappen",
   "blockSettings.delete": "Verwijderen",
-  "blockSettings.toggleWidth": "Breedte wisselen",
   "a11y.dragHandle": "Sleep om te verplaatsen of klik voor menu",
   "a11y.dragHandleRole": "sleepgreep",
   "a11y.dragStarted": "Blok wordt versleept",

package/src/components/i18n/locales/no/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Klikk for å legge til en ny kolonne",
   "tools.table.dragToAddRemoveColumns": "Dra for å legge til eller fjerne kolonner",
   "blockSettings.delete": "Slett",
-  "blockSettings.toggleWidth": "Veksle bredde",
   "a11y.dragHandle": "Dra for å flytte blokk eller klikk for meny",
   "a11y.dragHandleRole": "drahåndtak",
   "a11y.dragStarted": "Drar blokk",

package/src/components/i18n/locales/pa/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "ਟੌਗਲ ਸਿਰਲੇਖ 3",
   "tools.list.placeholder": "ਸੂਚੀ",
   "blockSettings.delete": "ਮਿਟਾਓ",
-  "blockSettings.toggleWidth": "ਚੌੜਾਈ ਬਦਲੋ",
   "a11y.dragHandle": "ਬਲਾਕ ਹਿਲਾਉਣ ਲਈ ਖਿੱਚੋ ਜਾਂ ਮੀਨੂ ਲਈ ਕਲਿੱਕ ਕਰੋ",
   "a11y.dragHandleRole": "ਖਿੱਚਣ ਵਾਲਾ ਹੈਂਡਲ",
   "a11y.dragStarted": "ਬਲਾਕ ਖਿੱਚਿਆ ਜਾ ਰਿਹਾ ਹੈ",

package/src/components/i18n/locales/pl/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Kliknij, aby dodać nową kolumnę",
   "tools.table.dragToAddRemoveColumns": "Przeciągnij, aby dodać lub usunąć kolumny",
   "blockSettings.delete": "Usuń",
-  "blockSettings.toggleWidth": "Przełącz szerokość",
   "a11y.dragHandle": "Przeciągnij, aby przenieść lub kliknij, aby otworzyć menu",
   "a11y.dragHandleRole": "uchwyt przeciągania",
   "a11y.dragStarted": "Przeciąganie bloku",

package/src/components/i18n/locales/ps/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "د نوي کالم اضافه کولو لپاره کلیک وکړئ",
   "tools.table.dragToAddRemoveColumns": "د کالمونو اضافه یا لرې کولو لپاره کش کړئ",
   "blockSettings.delete": "ړنګول",
-  "blockSettings.toggleWidth": "سوروالی بدل کړئ",
   "a11y.dragHandle": "د لیږدولو لپاره کش کړئ یا د مینو لپاره کلیک وکړئ",
   "a11y.dragHandleRole": "د کشولو لاستی",
   "a11y.dragStarted": "بلاک کشول کیږي",

package/src/components/i18n/locales/pt/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Clique para adicionar uma nova coluna",
   "tools.table.dragToAddRemoveColumns": "Arraste para adicionar ou remover colunas",
   "blockSettings.delete": "Excluir",
-  "blockSettings.toggleWidth": "Alternar largura",
   "a11y.dragHandle": "Arraste para mover ou clique para abrir o menu",
   "a11y.dragHandleRole": "controle de arrastar",
   "a11y.dragStarted": "Arrastando bloco",

package/src/components/i18n/locales/ro/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "Titlu reductibil 3",
   "tools.list.placeholder": "Listă",
   "blockSettings.delete": "Șterge",
-  "blockSettings.toggleWidth": "Comută lățimea",
   "a11y.dragHandle": "Trageți pentru a muta sau clic pentru meniu",
   "a11y.dragHandleRole": "mâner de tragere",
   "a11y.dragStarted": "Mutare bloc",

package/src/components/i18n/locales/ru/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Нажмите, чтобы добавить столбец",
   "tools.table.dragToAddRemoveColumns": "Тяните, чтобы добавить или удалить столбцы",
   "blockSettings.delete": "Удалить",
-  "blockSettings.toggleWidth": "Переключить ширину",
   "a11y.dragHandle": "Перетащите или нажмите для меню",
   "a11y.dragHandleRole": "управление блоком",
   "a11y.dragStarted": "Перетаскивание блока",

package/src/components/i18n/locales/sd/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "نئون ڪالم شامل ڪرڻ لاءِ ڪلڪ ڪريو",
   "tools.table.dragToAddRemoveColumns": "ڪالم شامل يا ختم ڪرڻ لاءِ ڇڪيو",
   "blockSettings.delete": "ختم ڪريو",
-  "blockSettings.toggleWidth": "ويڪرائي تبديل ڪريو",
   "a11y.dragHandle": "بلاڪ منتقل ڪرڻ لاءِ ڇڪيو يا مينيو لاءِ ڪلڪ ڪريو",
   "a11y.dragHandleRole": "ڇڪڻ جو هينڊل",
   "a11y.dragStarted": "بلاڪ ڇڪجي رھيو آھي",

package/src/components/i18n/locales/si/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "හැකිලෙන ශීර්ෂය 3",
   "tools.list.placeholder": "ලැයිස්තුව",
   "blockSettings.delete": "මකන්න",
-  "blockSettings.toggleWidth": "පළල මාරු කරන්න",
   "a11y.dragHandle": "කොටස ගෙනයාමට අදින්න හෝ මෙනුව සඳහා තේරන්න",
   "a11y.dragHandleRole": "ඇදීමේ හසුරුව",
   "a11y.dragStarted": "කොටස ඇදගෙන යමින්",

package/src/components/i18n/locales/sk/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "Prepínací nadpis 3",
   "tools.list.placeholder": "Zoznam",
   "blockSettings.delete": "Odstrániť",
-  "blockSettings.toggleWidth": "Prepnúť šírku",
   "a11y.dragHandle": "Potiahnutím presuniete blok alebo kliknutím otvoríte ponuku",
   "a11y.dragHandleRole": "úchyt na presun",
   "a11y.dragStarted": "Presúva sa blok",

package/src/components/i18n/locales/sl/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Kliknite za dodajanje novega stolpca",
   "tools.table.dragToAddRemoveColumns": "Povlecite za dodajanje ali odstranjevanje stolpcev",
   "blockSettings.delete": "Izbriši",
-  "blockSettings.toggleWidth": "Preklopi širino",
   "a11y.dragHandle": "Povlecite za premik bloka ali kliknite za meni",
   "a11y.dragHandleRole": "ročaj za vlečenje",
   "a11y.dragStarted": "Vlečenje bloka",

package/src/components/i18n/locales/sq/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Kliko për të shtuar një kolonë të re",
   "tools.table.dragToAddRemoveColumns": "Tërhiq për të shtuar ose hequr kolona",
   "blockSettings.delete": "Fshi",
-  "blockSettings.toggleWidth": "Ndrysho gjerësinë",
   "a11y.dragHandle": "Tërhiq për të lëvizur bllokun ose kliko për menynë",
   "a11y.dragHandleRole": "doreza e tërheqjes",
   "a11y.dragStarted": "Duke tërhequr bllokun",

package/src/components/i18n/locales/sr/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Кликните за додавање нове колоне",
   "tools.table.dragToAddRemoveColumns": "Превуците за додавање или уклањање колона",
   "blockSettings.delete": "Обриши",
-  "blockSettings.toggleWidth": "Промени ширину",
   "a11y.dragHandle": "Превуците за премештање блока или кликните за мени",
   "a11y.dragHandleRole": "ручка за превлачење",
   "a11y.dragStarted": "Превлачење блока",

package/src/components/i18n/locales/sv/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Klicka för att lägga till en kolumn",
   "tools.table.dragToAddRemoveColumns": "Dra för att lägga till eller ta bort kolumner",
   "blockSettings.delete": "Ta bort",
-  "blockSettings.toggleWidth": "Växla bredd",
   "a11y.dragHandle": "Dra för att flytta eller klicka för meny",
   "a11y.dragHandleRole": "draghandtag",
   "a11y.dragStarted": "Drar block",

package/src/components/i18n/locales/sw/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Bofya ili kuongeza safu wima mpya",
   "tools.table.dragToAddRemoveColumns": "Buruta ili kuongeza au kuondoa safu wima",
   "blockSettings.delete": "Futa",
-  "blockSettings.toggleWidth": "Badilisha upana",
   "a11y.dragHandle": "Buruta ili kusogeza kizuizi au bofya kwa menyu",
   "a11y.dragHandleRole": "kishikio cha kuburuta",
   "a11y.dragStarted": "Inaburuta kizuizi",

package/src/components/i18n/locales/ta/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "புதிய நெடுவரிசை சேர்க்க கிளிக் செய்யவும்",
   "tools.table.dragToAddRemoveColumns": "நெடுவரிசைகளைச் சேர்க்க அல்லது நீக்க இழுக்கவும்",
   "blockSettings.delete": "நீக்கு",
-  "blockSettings.toggleWidth": "அகலத்தை மாற்று",
   "a11y.dragHandle": "தொகுதியை நகர்த்த இழுக்கவும் அல்லது பட்டியலுக்கு தட்டவும்",
   "a11y.dragHandleRole": "இழுக்கும் கைப்பிடி",
   "a11y.dragStarted": "தொகுதியை இழுக்கிறது",

package/src/components/i18n/locales/te/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "మడత శీర్షిక 3",
   "tools.list.placeholder": "జాబితా",
   "blockSettings.delete": "తొలగించు",
-  "blockSettings.toggleWidth": "వెడల్పు మార్చు",
   "a11y.dragHandle": "విభాగం తరలించడానికి లాగండి లేదా మెనూ కోసం నొక్కండి",
   "a11y.dragHandleRole": "లాగు హ్యాండిల్",
   "a11y.dragStarted": "విభాగం తరలుతోంది",

package/src/components/i18n/locales/th/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "หัวข้อพับได้ 3",
   "tools.list.placeholder": "รายการ",
   "blockSettings.delete": "ลบ",
-  "blockSettings.toggleWidth": "สลับความกว้าง",
   "a11y.dragHandle": "ลากเพื่อย้ายบล็อก หรือคลิกเพื่อเปิดเมนู",
   "a11y.dragHandleRole": "ที่จับสำหรับลาก",
   "a11y.dragStarted": "กำลังลากบล็อก",

package/src/components/i18n/locales/tr/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "Açılır başlık 3",
   "tools.list.placeholder": "Liste",
   "blockSettings.delete": "Sil",
-  "blockSettings.toggleWidth": "Genişliği değiştir",
   "a11y.dragHandle": "Taşımak için sürükle veya menü için tıkla",
   "a11y.dragHandleRole": "sürükleme tutamacı",
   "a11y.dragStarted": "Blok sürükleniyor",

package/src/components/i18n/locales/ug/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "يېڭى ئىستون قوشۇش ئۈچۈن چېكىڭ",
   "tools.table.dragToAddRemoveColumns": "ئىستون قوشۇش ياكى ئۆچۈرۈش ئۈچۈن سۆرەڭ",
   "blockSettings.delete": "ئۆچۈرۈش",
-  "blockSettings.toggleWidth": "كەڭلىكنى ئالماشتۇرۇش",
   "a11y.dragHandle": "بۆلەكنى يۆتكەش ئۈچۈن سۆرەڭ ياكى تىزىملىك ئۈچۈن چېكىڭ",
   "a11y.dragHandleRole": "سۆرەش تۇتقۇچى",
   "a11y.dragStarted": "بۆلەك سۆرىلىۋاتىدۇ",

package/src/components/i18n/locales/uk/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "Згортний заголовок 3",
   "tools.list.placeholder": "Список",
   "blockSettings.delete": "Видалити",
-  "blockSettings.toggleWidth": "Переключити ширину",
   "a11y.dragHandle": "Перетягніть або натисніть для меню",
   "a11y.dragHandleRole": "елемент керування блоком",
   "a11y.dragStarted": "Переміщення блока",

package/src/components/i18n/locales/ur/messages.json

@@ -37,7 +37,6 @@
   "tools.header.toggleHeading3": "ٹوگل عنوان 3",
   "tools.list.placeholder": "فہرست",
   "blockSettings.delete": "حذف کریں",
-  "blockSettings.toggleWidth": "چوڑائی تبدیل کریں",
   "a11y.dragHandle": "بلاک منتقل کرنے کے لیے گھسیٹیں یا مینو کے لیے کلک کریں",
   "a11y.dragHandleRole": "گھسیٹنے کا ہینڈل",
   "a11y.dragStarted": "بلاک گھسیٹا جا رہا ہے",

package/src/components/i18n/locales/vi/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "Nhấp để thêm cột mới",
   "tools.table.dragToAddRemoveColumns": "Kéo để thêm hoặc xóa cột",
   "blockSettings.delete": "Xóa",
-  "blockSettings.toggleWidth": "Chuyển đổi độ rộng",
   "a11y.dragHandle": "Kéo để di chuyển khối hoặc nhấp để mở menu",
   "a11y.dragHandleRole": "tay nắm kéo",
   "a11y.dragStarted": "Đang kéo khối",

package/src/components/i18n/locales/yi/messages.json

@@ -58,7 +58,6 @@
   "tools.table.clickToAddColumn": "קליק צו צולייגן אַ נײַע שפּאַלט",
   "tools.table.dragToAddRemoveColumns": "שלעפּ צו צולייגן אָדער אויסמעקן שפּאַלטן",
   "blockSettings.delete": "אויסמעקן",
-  "blockSettings.toggleWidth": "בייטן ברייט",
   "a11y.dragHandle": "שלעפּ צו באַוועגן בלאָק אָדער קליק פֿאַר מעניו",
   "a11y.dragHandleRole": "שלעפּ האַנטל",
   "a11y.dragStarted": "שלעפּט בלאָק",

package/src/components/i18n/locales/zh/messages.json

@@ -42,7 +42,6 @@
   "tools.toggle.ariaLabelCollapse": "折叠",
   "tools.toggle.ariaLabelExpand": "展开",
   "blockSettings.delete": "删除",
-  "blockSettings.toggleWidth": "切换宽度",
   "a11y.dragHandle": "拖动移动或点击打开菜单",
   "a11y.dragHandleRole": "拖动控件",
   "a11y.dragStarted": "正在拖动内容块",

package/src/components/icons/index.ts

@@ -378,22 +378,6 @@ export const IconToggleH2 = `
 </svg>
 `;
 
-// Width Narrow icon (content-width block)
-export const IconWidthNarrow = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="3" y="3" width="14" height="14" rx="2"/>
-  <line x1="5" y1="8" x2="15" y2="8"/>
-  <line x1="5" y1="11" x2="15" y2="11"/>
-  <line x1="5" y1="14" x2="11" y2="14"/>
-</svg>`;
-
-// Width Full icon (full-width block)
-export const IconWidthFull = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
-  <rect x="1" y="3" width="18" height="14" rx="2"/>
-  <line x1="3" y1="8" x2="17" y2="8"/>
-  <line x1="3" y1="11" x2="17" y2="11"/>
-  <line x1="3" y1="14" x2="17" y2="14"/>
-</svg>`;
-
 // Toggle Heading 3 icon (H3 with toggle arrow)
 export const IconToggleH3 = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -34,7 +34,7 @@ export class API extends Module {
       i18n: this.Blok.I18nAPI.methods,
       readOnly: this.Blok.ReadOnlyAPI.methods,
       ui: this.Blok.UiAPI.methods,
-      width: this.Blok.WidthAPI.methods,
+      theme: this.Blok.ThemeAPI.methods,
       rectangleSelection: this.Blok.RectangleSelection,
     };
   }

package/src/components/modules/api/theme.ts

@@ -0,0 +1,17 @@
+import type { Theme } from '../../../../types/api';
+import { Module } from '../../__module';
+
+/**
+ * API module for theme mode control.
+ */
+export class ThemeAPI extends Module {
+  public get methods(): Theme {
+    const themeManager = this.Blok.ThemeManager;
+
+    return {
+      get: () => themeManager.getMode(),
+      set: (mode) => themeManager.setMode(mode),
+      getResolved: () => themeManager.getResolved(),
+    };
+  }
+}

package/src/components/modules/index.ts

@@ -16,7 +16,8 @@ import { ToolbarAPI } from './api/toolbar';
 import { ToolsAPI } from './api/tools';
 import { TooltipAPI } from './api/tooltip';
 import { UiAPI } from './api/ui';
-import { WidthAPI } from './api/width';
+
+import { ThemeAPI } from './api/theme';
 import { BlockEvents } from './blockEvents';
 import { BlockManager } from './blockManager';
 import { BlockSelection } from './blockSelection';
@@ -35,7 +36,8 @@ import { Toolbar } from './toolbar/index';
 import { InlineToolbar } from './toolbar/inline';
 import { Tools } from './tools';
 import { UI } from './ui';
-import { WidthManager } from './widthManager';
+
+import { ThemeManager } from './themeManager';
 import { YjsManager } from './yjs';
 
 /**
@@ -62,7 +64,7 @@ export {
   ToolbarAPI,
   TooltipAPI,
   UiAPI,
-  WidthAPI,
+  ThemeAPI,
 
   // Toolbar Modules
   BlockSettings,
@@ -85,7 +87,7 @@ export {
   Saver,
   Tools,
   UI,
-  WidthManager,
+  ThemeManager,
   YjsManager,
 };
 
@@ -112,7 +114,7 @@ export const Modules = {
   ToolbarAPI,
   TooltipAPI,
   UiAPI,
-  WidthAPI,
+  ThemeAPI,
 
   // Toolbar Modules
   BlockSettings,
@@ -135,6 +137,6 @@ export const Modules = {
   Saver,
   Tools,
   UI,
-  WidthManager,
+  ThemeManager,
   YjsManager,
 };

package/src/components/modules/themeManager.ts

@@ -0,0 +1,160 @@
+import type { ResolvedTheme, ThemeMode } from '../../../types/api/theme';
+import { Module } from '../__module';
+
+const DARK_MQ = '(prefers-color-scheme: dark)';
+const ATTR = 'data-blok-theme';
+
+/**
+ * Module-level counter of active ThemeManager instances.
+ * Prevents premature attribute cleanup when multiple Blok instances coexist.
+ */
+const state = { activeInstances: 0 };
+
+/**
+ * Reset the instance counter. Exported for testing only.
+ */
+export function resetActiveInstances(): void {
+  state.activeInstances = 0;
+}
+
+/**
+ * Manages the editor color theme.
+ *
+ * Sets `data-blok-theme` on `document.documentElement` to control
+ * CSS custom property values for light/dark appearance.
+ */
+export class ThemeManager extends Module {
+  private mode: ThemeMode = 'auto';
+  private resolved: ResolvedTheme = 'light';
+  private mediaQuery: MediaQueryList | null = null;
+  private readonly onMediaChange = (e: MediaQueryListEvent): void => {
+    const newResolved: ResolvedTheme = e.matches ? 'dark' : 'light';
+
+    if (newResolved !== this.resolved) {
+      this.resolved = newResolved;
+      this.fireCallback();
+    }
+  };
+
+  /**
+   * Called by Core after all modules are constructed and wired.
+   */
+  public prepare(): void {
+    state.activeInstances++;
+    this.mode = this.config.theme ?? 'auto';
+    this.applyAttribute();
+    this.resolved = this.deriveResolved();
+
+    if (this.mode === 'auto') {
+      this.addMediaListener();
+    }
+  }
+
+  /**
+   * Returns the current theme mode.
+   */
+  public getMode(): ThemeMode {
+    return this.mode;
+  }
+
+  /**
+   * Returns the resolved theme, evaluating OS preference if in auto mode.
+   */
+  public getResolved(): ResolvedTheme {
+    return this.resolved;
+  }
+
+  /**
+   * Sets the theme mode at runtime.
+   */
+  public setMode(mode: ThemeMode): void {
+    const prevResolved = this.resolved;
+
+    if (this.mode === 'auto') {
+      this.removeMediaListener();
+    }
+
+    this.mode = mode;
+    this.applyAttribute();
+    this.resolved = this.deriveResolved();
+
+    if (this.mode === 'auto') {
+      this.addMediaListener();
+    }
+
+    if (this.resolved !== prevResolved) {
+      this.fireCallback();
+    }
+  }
+
+  /**
+   * Cleanup: remove listener and conditionally remove attribute.
+   */
+  public destroy(): void {
+    this.removeMediaListener();
+    state.activeInstances--;
+
+    if (state.activeInstances <= 0) {
+      state.activeInstances = 0;
+      this.removeAttribute();
+    }
+  }
+
+  // ─── Private ───────────────────────────────────────────────────────────────
+
+  private applyAttribute(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    if (this.mode === 'auto') {
+      this.removeAttribute();
+    } else {
+      document.documentElement.setAttribute(ATTR, this.mode);
+    }
+  }
+
+  private removeAttribute(): void {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    document.documentElement.removeAttribute(ATTR);
+  }
+
+  private deriveResolved(): ResolvedTheme {
+    if (this.mode !== 'auto') {
+      return this.mode;
+    }
+
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return 'light';
+    }
+
+    return window.matchMedia(DARK_MQ).matches ? 'dark' : 'light';
+  }
+
+  private addMediaListener(): void {
+    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') {
+      return;
+    }
+
+    this.mediaQuery = window.matchMedia(DARK_MQ);
+    this.mediaQuery.addEventListener('change', this.onMediaChange);
+  }
+
+  private removeMediaListener(): void {
+    if (this.mediaQuery) {
+      this.mediaQuery.removeEventListener('change', this.onMediaChange);
+      this.mediaQuery = null;
+    }
+  }
+
+  private fireCallback(): void {
+    const callback = this.config.onThemeChange;
+
+    if (typeof callback === 'function') {
+      callback(this.resolved);
+    }
+  }
+}

package/src/components/modules/toolbar/blockSettings.ts

@@ -197,6 +197,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
           search: this.Blok.I18n.t('popover.search'),
         },
         autoFocusFirstItem: false,
+        minWidth: '250px',
       };
 
       if (PopoverClass === PopoverDesktop) {
@@ -333,10 +334,20 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
       }
 
       tool.toolbox.forEach((toolboxItem) => {
+        // Resolve English title for multilingual search
+        const titleKey = toolboxItem.titleKey;
+        const resolvedTitleKey = titleKey?.includes('.') ? titleKey : `toolNames.${titleKey}`;
+        const englishTitleKey = titleKey ? resolvedTitleKey : undefined;
+        const englishTitle = englishTitleKey
+          ? this.Blok.I18n.getEnglishTranslation(englishTitleKey)
+          : toolboxItem.title;
+
         result.push({
           icon: toolboxItem.icon,
           title: translateToolTitle(this.Blok.I18n, toolboxItem, tool.name),
           name: toolboxItem.name ?? tool.name,
+          englishTitle,
+          searchTerms: toolboxItem.searchTerms,
           closeOnActivate: true,
           onActivate: async () => {
             const { Caret, Toolbar } = this.Blok;
@@ -385,6 +396,7 @@ export class BlockSettings extends Module<BlockSettingsNodes> {
         title: this.Blok.I18n.t('popover.convertTo'),
         children: {
           items: convertToItems,
+          width: '200px',
         },
       });
       items.push({