@jackuait/blok 0.10.0 → 0.10.1

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "ठूलो",
   "tools.code.codeTab": "कोड",
   "tools.code.previewTab": "पूर्वावलोकन",
+  "tools.code.sideBySide": "एकैसाथ",
   "tools.table.placement": "स्थान",
   "tools.table.placementTopLeft": "माथि बायाँ",
   "tools.table.placementTopCenter": "माथि केन्द्र",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Groot",
   "tools.code.codeTab": "Code",
   "tools.code.previewTab": "Voorbeeld",
+  "tools.code.sideBySide": "Naast elkaar",
   "tools.table.placement": "Positie",
   "tools.table.placementTopLeft": "Boven links",
   "tools.table.placementTopCenter": "Boven midden",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Stor",
   "tools.code.codeTab": "Kode",
   "tools.code.previewTab": "Forhåndsvisning",
+  "tools.code.sideBySide": "Side om side",
   "tools.table.placement": "Plassering",
   "tools.table.placementTopLeft": "Øverst til venstre",
   "tools.table.placementTopCenter": "Øverst i midten",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "ਵੱਡਾ",
   "tools.code.codeTab": "ਕੋਡ",
   "tools.code.previewTab": "ਪੂਰਵ-ਦ੍ਰਿਸ਼",
+  "tools.code.sideBySide": "ਨਾਲ-ਨਾਲ",
   "tools.table.placement": "ਸਥਿਤੀ",
   "tools.table.placementTopLeft": "ਉੱਪਰ ਖੱਬੇ",
   "tools.table.placementTopCenter": "ਉੱਪਰ ਕੇਂਦਰ",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Duży",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Podgląd",
+  "tools.code.sideBySide": "Obok siebie",
   "tools.table.placement": "Pozycja",
   "tools.table.placementTopLeft": "Góra lewo",
   "tools.table.placementTopCenter": "Góra środek",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "لوی",
   "tools.code.codeTab": "کوډ",
   "tools.code.previewTab": "مخکتنه",
+  "tools.code.sideBySide": "بېل بې بېله",
   "tools.table.placement": "ځای",
   "tools.table.placementTopLeft": "پورته کیڼ",
   "tools.table.placementTopCenter": "پورته مینځ",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Grande",
   "tools.code.codeTab": "Código",
   "tools.code.previewTab": "Pré-visualização",
+  "tools.code.sideBySide": "Lado a lado",
   "tools.table.placement": "Posicionamento",
   "tools.table.placementTopLeft": "Superior esquerdo",
   "tools.table.placementTopCenter": "Superior centro",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Mare",
   "tools.code.codeTab": "Cod",
   "tools.code.previewTab": "Previzualizare",
+  "tools.code.sideBySide": "Alăturat",
   "tools.table.placement": "Pozitionare",
   "tools.table.placementTopLeft": "Sus stanga",
   "tools.table.placementTopCenter": "Sus centru",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Большой",
   "tools.code.codeTab": "Код",
   "tools.code.previewTab": "Предпросмотр",
+  "tools.code.sideBySide": "Бок о бок",
   "tools.table.placement": "Расположение",
   "tools.table.placementTopLeft": "Сверху слева",
   "tools.table.placementTopCenter": "Сверху по центру",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "وڏو",
   "tools.code.codeTab": "ڪوڊ",
   "tools.code.previewTab": "اڳڀرائي",
+  "tools.code.sideBySide": "ڀرسان بہ ڀرسان",
   "tools.table.placement": "جاءِ",
   "tools.table.placementTopLeft": "مٿي کاٻي",
   "tools.table.placementTopCenter": "مٿي وچ",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "විශාල",
   "tools.code.codeTab": "කේතය",
   "tools.code.previewTab": "පූර්ව දර්ශනය",
+  "tools.code.sideBySide": "පැත්තටම",
   "tools.table.placement": "ස්ථානගත කිරීම",
   "tools.table.placementTopLeft": "ඉහළ වම",
   "tools.table.placementTopCenter": "ඉහළ මැද",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Veľký",
   "tools.code.codeTab": "Kód",
   "tools.code.previewTab": "Náhľad",
+  "tools.code.sideBySide": "Vedľa seba",
   "tools.table.placement": "Umiestnenie",
   "tools.table.placementTopLeft": "Hore vľavo",
   "tools.table.placementTopCenter": "Hore v strede",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Veliko",
   "tools.code.codeTab": "Koda",
   "tools.code.previewTab": "Predogled",
+  "tools.code.sideBySide": "Drug ob drugem",
   "tools.table.placement": "Postavitev",
   "tools.table.placementTopLeft": "Zgoraj levo",
   "tools.table.placementTopCenter": "Zgoraj na sredini",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "I madh",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Shikimi paraprak",
+  "tools.code.sideBySide": "Krah për krah",
   "tools.table.placement": "Vendosja",
   "tools.table.placementTopLeft": "Lart majtas",
   "tools.table.placementTopCenter": "Lart në qendër",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Велики",
   "tools.code.codeTab": "Код",
   "tools.code.previewTab": "Преглед",
+  "tools.code.sideBySide": "Упоредно",
   "tools.table.placement": "Позиција",
   "tools.table.placementTopLeft": "Горе лево",
   "tools.table.placementTopCenter": "Горе по средини",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Stor",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Förhandsgranskning",
+  "tools.code.sideBySide": "Sida vid sida",
   "tools.table.placement": "Placering",
   "tools.table.placementTopLeft": "Uppe till vänster",
   "tools.table.placementTopCenter": "Uppe i mitten",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Kubwa",
   "tools.code.codeTab": "Msimbo",
   "tools.code.previewTab": "Hakiki",
+  "tools.code.sideBySide": "Kando kwa kando",
   "tools.table.placement": "Uwekaji",
   "tools.table.placementTopLeft": "Juu kushoto",
   "tools.table.placementTopCenter": "Juu katikati",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "பெரிய",
   "tools.code.codeTab": "குறியீடு",
   "tools.code.previewTab": "முன்னோட்டம்",
+  "tools.code.sideBySide": "பக்கவாட்டில்",
   "tools.table.placement": "இட அமைப்பு",
   "tools.table.placementTopLeft": "மேல் இடது",
   "tools.table.placementTopCenter": "மேல் நடு",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "పెద్ద",
   "tools.code.codeTab": "కోడ్",
   "tools.code.previewTab": "ముందుచూపు",
+  "tools.code.sideBySide": "ప్రక్కన ప్రక్కన",
   "tools.table.placement": "స్థానం",
   "tools.table.placementTopLeft": "పైన ఎడమ",
   "tools.table.placementTopCenter": "పైన మధ్య",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "ใหญ่",
   "tools.code.codeTab": "โค้ด",
   "tools.code.previewTab": "ตัวอย่าง",
+  "tools.code.sideBySide": "เคียงข้างกัน",
   "tools.table.placement": "ตำแหน่ง",
   "tools.table.placementTopLeft": "บนซ้าย",
   "tools.table.placementTopCenter": "บนกลาง",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Büyük",
   "tools.code.codeTab": "Kod",
   "tools.code.previewTab": "Önizleme",
+  "tools.code.sideBySide": "Yan yana",
   "tools.table.placement": "Yerleşim",
   "tools.table.placementTopLeft": "Sol üst",
   "tools.table.placementTopCenter": "Orta üst",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "چوڭ",
   "tools.code.codeTab": "كود",
   "tools.code.previewTab": "ئالدىن كۆرۈش",
+  "tools.code.sideBySide": "يانمۇ-يان",
   "tools.table.placement": "ئورنى",
   "tools.table.placementTopLeft": "ئۈستى سول",
   "tools.table.placementTopCenter": "ئۈستى ئوتتۇرا",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Великий",
   "tools.code.codeTab": "Код",
   "tools.code.previewTab": "Попередній перегляд",
+  "tools.code.sideBySide": "Поруч",
   "tools.table.placement": "Розташування",
   "tools.table.placementTopLeft": "Зверху зліва",
   "tools.table.placementTopCenter": "Зверху по центру",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "بڑا",
   "tools.code.codeTab": "کوڈ",
   "tools.code.previewTab": "پیش نظارہ",
+  "tools.code.sideBySide": "ساتھ ساتھ",
   "tools.table.placement": "جگہ",
   "tools.table.placementTopLeft": "اوپر بائیں",
   "tools.table.placementTopCenter": "اوپر درمیان",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "Lớn",
   "tools.code.codeTab": "Mã",
   "tools.code.previewTab": "Xem trước",
+  "tools.code.sideBySide": "Song song",
   "tools.table.placement": "Vị trí",
   "tools.table.placementTopLeft": "Trên trái",
   "tools.table.placementTopCenter": "Trên giữa",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "גרויס",
   "tools.code.codeTab": "קאָד",
   "tools.code.previewTab": "פֿאָרויסבליק",
+  "tools.code.sideBySide": "זייט ביי זייט",
   "tools.table.placement": "אָרט",
   "tools.table.placementTopLeft": "אויבן לינקס",
   "tools.table.placementTopCenter": "אויבן מיטן",

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

@@ -161,6 +161,7 @@
   "tools.quote.largeSize": "大",
   "tools.code.codeTab": "代码",
   "tools.code.previewTab": "预览",
+  "tools.code.sideBySide": "并排",
   "tools.table.placement": "位置",
   "tools.table.placementTopLeft": "左上",
   "tools.table.placementTopCenter": "居中上",

package/src/components/icons/index.ts

@@ -1,3 +1,17 @@
+// Check/Confirm icon
+export const IconCheck = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m4.5 10.5 4 4 7-8" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`;
+
+// Sparkle/Auto-detect icon — 4-pointed star (modern AI/auto symbol)
+export const IconWand = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10 2 Q10 10 18 10 Q10 10 10 18 Q10 10 2 10 Q10 10 10 2Z" stroke="currentColor" stroke-width="1.25" stroke-linejoin="round"/>
+</svg>
+`;
+
 // Cross/Close icon
 export const IconCross = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -102,15 +116,6 @@ export const IconChevronDown = `
 </svg>
 `;
 
-// Ellipsis (horizontal three dots) icon
-export const IconEllipsis = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <circle cx="5" cy="10" r="1.25" fill="currentColor"/>
-  <circle cx="10" cy="10" r="1.25" fill="currentColor"/>
-  <circle cx="15" cy="10" r="1.25" fill="currentColor"/>
-</svg>
-`;
-
 // Chevron Left icon
 export const IconChevronLeft = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -497,24 +502,6 @@ export const IconCodeBlock = `
 </svg>
 `;
 
-// Line wrap icon
-export const IconWrap = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M4 6h12M4 10h8a2 2 0 0 1 2 2v0a2 2 0 0 1-2 2H9m0 0 2-2m-2 2 2 2" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
-
-// Line numbers icon (gutter marks + code lines)
-export const IconLineNumbers = `
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M7 4v12" stroke="currentColor" stroke-width="1.25" stroke-linecap="round" opacity="0.35"/>
-  <circle cx="4.5" cy="7" r="0.75" fill="currentColor"/>
-  <circle cx="4.5" cy="10" r="0.75" fill="currentColor"/>
-  <circle cx="4.5" cy="13" r="0.75" fill="currentColor"/>
-  <path d="M10 7h6M10 10h6M10 13h4" stroke="currentColor" stroke-width="1.25" stroke-linecap="round"/>
-</svg>
-`;
-
 // Emoji Picker Category Icons
 
 // Star icon (Callout category)
@@ -617,6 +604,14 @@ export const IconMergeCells = `
 // Split cell icon (one cell splitting into two)
 export const IconSplitCell = `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 3v18"/><path d="M8 8l4 4-4 4"/><path d="M16 8l-4 4 4 4"/></svg>`;
 
+// Split view icon (two panels side by side)
+export const IconSplitView = `
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="3" y="4" width="6" height="12" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+  <rect x="11" y="4" width="6" height="12" rx="1.5" stroke="currentColor" stroke-width="1.25"/>
+</svg>
+`;
+
 // Placement icon (3x3 alignment dot grid)
 export const IconPlacement = `
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">

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

@@ -77,15 +77,24 @@ export class ToolbarPositioner {
      */
     const textElement = listItemElement?.querySelector('[contenteditable]');
     const pluginsContent = targetBlock.pluginsContent;
+    /**
+     * If the tool provides a toolbar anchor element, use it instead of searching
+     * for a contenteditable descendant. This allows tools with deeply nested
+     * editable areas (e.g., code block with a header above the code) to control
+     * where the toolbar centers vertically.
+     */
+    const toolbarAnchor = !textElement && !listItemElement
+      ? targetBlock.getToolbarAnchorElement()
+      : undefined;
     /**
      * If pluginsContent is a non-editable container (e.g. a toggle heading wrapper <div>),
      * use its first contenteditable descendant for accurate line-height centering.
      */
     const editableDescendant =
-      !pluginsContent.matches('[contenteditable]')
+      !toolbarAnchor && !pluginsContent.matches('[contenteditable]')
         ? (pluginsContent.querySelector('[contenteditable]') ?? null)
         : null;
-    const contentElement = textElement ?? listItemElement ?? editableDescendant ?? pluginsContent;
+    const contentElement = textElement ?? listItemElement ?? toolbarAnchor ?? editableDescendant ?? pluginsContent;
     const contentRect = contentElement.getBoundingClientRect();
     const contentOffset = contentRect.top - holderRect.top;
 

package/src/components/utils/popover/components/popover-item/popover-item-default/popover-item-default.ts

@@ -281,6 +281,17 @@ export class PopoverItemDefault extends PopoverItem {
       this.nodes.secondaryLabelEl = secondaryEl;
     }
 
+    // Trailing icon (right-side indicator, e.g. checkmark)
+    if (params.trailingIcon) {
+      const trailingEl = document.createElement('div');
+
+      trailingEl.className = 'ml-auto shrink-0 flex items-center justify-center [&_svg]:w-icon [&_svg]:h-icon';
+      trailingEl.setAttribute('data-blok-testid', 'popover-item-trailing-icon');
+      trailingEl.innerHTML = params.trailingIcon;
+
+      root.appendChild(trailingEl);
+    }
+
     // Chevron
     const showChevron = this.hasChildren && !this.isChevronHidden;
 

package/src/components/utils/popover/popover-abstract.ts

@@ -102,6 +102,13 @@ export abstract class PopoverAbstract<Nodes extends PopoverNodes = PopoverNodes>
     return this.nodes.popover;
   }
 
+  /**
+   * Whether the popover is currently shown
+   */
+  public get isShown(): boolean {
+    return this.nodes.popover.hasAttribute(DATA_ATTR.popoverOpened);
+  }
+
   /**
    * Open popover
    */

package/src/tools/code/constants.ts

@@ -5,7 +5,6 @@ export const PLACEHOLDER_KEY = 'tools.code.placeholder';
 export const LANGUAGE_KEY = 'tools.code.language';
 export const COPIED_KEY = 'tools.code.copied';
 export const COPY_CODE_KEY = 'tools.code.copyCode';
-export const WRAP_LINES_KEY = 'tools.code.wrapLines';
 export const SEARCH_LANGUAGE_KEY = 'tools.code.searchLanguage';
 
 // Default values
@@ -53,10 +52,12 @@ export const LANGUAGES: LanguageEntry[] = [
 ];
 
 // CSS — Tailwind classes
-export const WRAPPER_STYLES = 'flex flex-col rounded-lg border border-border-secondary bg-bg-secondary overflow-hidden my-1';
-export const HEADER_STYLES = 'flex items-center gap-1 px-3 py-1.5 border-b border-border-primary text-xs text-gray-text';
-export const LANGUAGE_BUTTON_STYLES = 'px-1.5 py-0.5 rounded cursor-pointer bg-transparent border-0 text-xs text-gray-text font-medium transition-colors can-hover:hover:bg-item-hover-bg select-none';
+export const WRAPPER_STYLES = 'group/code flex flex-col rounded-xl border border-border-secondary bg-bg-secondary overflow-hidden my-2';
+export const HEADER_STYLES = 'flex items-center gap-1 px-3 py-1.5 text-xs text-gray-text';
+export const LANGUAGE_BUTTON_STYLES = 'inline-flex items-center px-1.5 py-0.5 rounded cursor-pointer bg-transparent border-0 text-xs text-gray-text font-medium transition-colors can-hover:hover:bg-item-hover-bg select-none';
+export const HEADER_CONTROLS_STYLES = 'flex items-center gap-1 opacity-0 group-hover/code:opacity-100 transition-opacity';
 export const HEADER_BUTTON_STYLES = 'p-1 rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors can-hover:hover:bg-item-hover-bg flex items-center justify-center';
+export const HEADER_BUTTON_MATCHED_STYLES = 'p-1.5 rounded-lg cursor-pointer bg-transparent border-0 text-gray-text transition-colors can-hover:hover:bg-item-hover-bg flex items-center justify-center';
 export const CODE_AREA_STYLES = 'block px-4 py-3 font-mono text-sm leading-relaxed outline-hidden whitespace-pre-wrap overflow-x-auto min-h-[1.5em]';
 export const COPIED_FEEDBACK_STYLES = 'text-xs text-gray-text font-medium select-none';
 
@@ -76,10 +77,24 @@ export const PREVIEW_AREA_STYLES = 'px-4 py-3 overflow-x-auto min-h-[1.5em] flex
 // i18n key — preview toggle
 export const PREVIEW_TOGGLE_KEY = 'tools.code.previewToggle';
 
-// CSS — more menu dropdown
-export const MORE_MENU_STYLES = 'absolute right-0 top-full mt-1 min-w-[10rem] rounded-lg bg-bg-secondary border border-border-secondary shadow-lg p-1 z-10';
-export const MORE_MENU_ITEM_STYLES = 'flex items-center gap-2 w-full px-2.5 py-1.5 rounded text-xs text-gray-text cursor-pointer bg-transparent border-0 transition-colors can-hover:hover:bg-item-hover-bg select-none';
-export const MORE_MENU_ITEM_ACTIVE_STYLES = 'text-blue-500';
+// i18n key — side-by-side view mode
+export const SIDE_BY_SIDE_KEY = 'tools.code.sideBySide';
+
+// View mode type
+export type CodeViewMode = 'code' | 'preview' | 'split';
+
+// CSS — view mode segmented control
+export const VIEW_MODE_CONTAINER_STYLES = 'flex items-center rounded-lg border border-border-secondary p-0.5 gap-0.5';
+export const VIEW_MODE_BUTTON_STYLES = 'p-1 rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors flex items-center justify-center';
+export const VIEW_MODE_BUTTON_ACTIVE_STYLES = 'p-1 rounded cursor-pointer bg-item-hover-bg border-0 text-primary transition-colors flex items-center justify-center';
+// Preview icon is 16x16 (vs 20x20 for code/split), so extra 2px padding keeps containers equal
+export const VIEW_MODE_PREVIEW_BUTTON_STYLES = 'p-[6px] rounded cursor-pointer bg-transparent border-0 text-gray-text transition-colors flex items-center justify-center';
+export const VIEW_MODE_PREVIEW_BUTTON_ACTIVE_STYLES = 'p-[6px] rounded cursor-pointer bg-item-hover-bg border-0 text-primary transition-colors flex items-center justify-center';
+
+// CSS — split container
+export const SPLIT_CONTAINER_STYLES = 'flex flex-col overflow-hidden';
+export const SPLIT_CONTAINER_SPLIT_STYLES = 'flex flex-row overflow-hidden';
+export const SPLIT_HALF_STYLES = 'flex-1 min-w-0 overflow-hidden';
 
 // Shiki theme names for syntax highlighting
 export const SHIKI_LIGHT_THEME = 'one-light';
@@ -95,10 +110,7 @@ export const HIGHLIGHTABLE_LANGUAGES = new Set(
     .filter((id) => id !== DEFAULT_LANGUAGE)
 );
 
-// i18n key — line numbers toggle
-export const LINE_NUMBERS_KEY = 'tools.code.lineNumbers';
-
 // CSS — line number gutter
 export const CODE_BODY_STYLES = 'flex overflow-hidden';
-export const GUTTER_STYLES = 'select-none text-right pr-3 py-3 font-mono text-sm leading-relaxed text-gray-text/40 border-r border-border-primary shrink-0';
+export const GUTTER_STYLES = 'select-none text-right pl-4 pr-3 py-3 font-mono text-sm leading-relaxed text-gray-text/40 shrink-0';
 export const GUTTER_LINE_STYLES = 'leading-relaxed';