@jackuait/blok 0.11.1 → 0.12.1

package/src/tools/code/prism-applier.ts

@@ -0,0 +1,183 @@
+/** Prism CSS class-based highlight applier.
+ * Injects highlighted HTML into a <code> element and manages
+ * the custom stylesheet for token colors.
+ */
+
+// eslint-disable-next-line no-restricted-syntax -- module singleton, must be reassignable
+let stylesheet: CSSStyleSheet | null = null;
+
+const LIGHT_RULES = `
+.blok-code .token.comment,
+.blok-code .token.prolog,
+.blok-code .token.doctype,
+.blok-code .token.cdata { color: #6b7280; }
+
+.blok-code .token.keyword,
+.blok-code .token.operator,
+.blok-code .token.important { color: #7c3aed; }
+
+.blok-code .token.string,
+.blok-code .token.attr-value,
+.blok-code .token.char,
+.blok-code .token.regex { color: #059669; }
+
+.blok-code .token.number,
+.blok-code .token.boolean,
+.blok-code .token.constant,
+.blok-code .token.symbol { color: #d97706; }
+
+.blok-code .token.function,
+.blok-code .token.class-name { color: #2563eb; }
+
+.blok-code .token.builtin,
+.blok-code .token.tag,
+.blok-code .token.selector { color: #db2777; }
+
+.blok-code .token.attr-name,
+.blok-code .token.property,
+.blok-code .token.variable { color: #ea580c; }
+
+.blok-code .token.punctuation { color: #374151; }
+
+/* Mermaid-specific tokens — scoped to lang-mermaid to avoid polluting other languages.
+ * Colors use Atom One Light palette:
+ *   @hue-1 = #0184bc  (cyan)
+ *   @hue-6-2 = #c18401 (amber/gold — node IDs)
+ *   @hue-4 = #50a14f  (green — edge labels)
+ */
+.blok-code.lang-mermaid .token.diagram-name { color: #0184bc; }
+.blok-code.lang-mermaid .token.node-bracket { color: #0184bc; }
+.blok-code.lang-mermaid .token.edge-delimiter { color: #0184bc; }
+.blok-code.lang-mermaid .token.edge-label { color: #50a14f; }
+.blok-code.lang-mermaid .token.variable { color: #c18401; }
+.blok-code.lang-mermaid .token.keyword,
+.blok-code.lang-mermaid .token.operator,
+.blok-code.lang-mermaid .token.string { color: inherit; }
+`;
+
+const DARK_RULES = `
+.dark .blok-code .token.comment,
+.dark .blok-code .token.prolog,
+.dark .blok-code .token.doctype,
+.dark .blok-code .token.cdata { color: #9ca3af; }
+
+.dark .blok-code .token.keyword,
+.dark .blok-code .token.operator,
+.dark .blok-code .token.important { color: #a78bfa; }
+
+.dark .blok-code .token.string,
+.dark .blok-code .token.attr-value,
+.dark .blok-code .token.char,
+.dark .blok-code .token.regex { color: #34d399; }
+
+.dark .blok-code .token.number,
+.dark .blok-code .token.boolean,
+.dark .blok-code .token.constant,
+.dark .blok-code .token.symbol { color: #fbbf24; }
+
+.dark .blok-code .token.function,
+.dark .blok-code .token.class-name { color: #60a5fa; }
+
+.dark .blok-code .token.builtin,
+.dark .blok-code .token.tag,
+.dark .blok-code .token.selector { color: #f472b6; }
+
+.dark .blok-code .token.attr-name,
+.dark .blok-code .token.property,
+.dark .blok-code .token.variable { color: #fb923c; }
+
+.dark .blok-code .token.punctuation { color: #d1d5db; }
+
+/* Mermaid-specific tokens — dark mode.
+ * Colors use Atom One Dark palette:
+ *   @hue-1 = #56b5c2  (cyan)
+ *   @hue-6-2 = #e4bf7a (amber/yellow — node IDs)
+ *   @hue-4 = #97c279  (green — edge labels)
+ */
+.dark .blok-code.lang-mermaid .token.diagram-name { color: #56b5c2; }
+.dark .blok-code.lang-mermaid .token.node-bracket { color: #56b5c2; }
+.dark .blok-code.lang-mermaid .token.edge-delimiter { color: #56b5c2; }
+.dark .blok-code.lang-mermaid .token.edge-label { color: #97c279; }
+.dark .blok-code.lang-mermaid .token.variable { color: #e4bf7a; }
+.dark .blok-code.lang-mermaid .token.keyword,
+.dark .blok-code.lang-mermaid .token.operator,
+.dark .blok-code.lang-mermaid .token.string { color: inherit; }
+`;
+
+function ensureStylesheet(): void {
+  if (stylesheet) return;
+  stylesheet = new CSSStyleSheet();
+  stylesheet.replaceSync(LIGHT_RULES + DARK_RULES);
+  const existing = document.adoptedStyleSheets ?? [];
+  document.adoptedStyleSheets = [...existing, stylesheet];
+}
+
+function getCaretOffset(el: HTMLElement): number {
+  const sel = window.getSelection();
+  if (!sel || sel.rangeCount === 0) return -1;
+  const range = sel.getRangeAt(0).cloneRange();
+  range.selectNodeContents(el);
+  range.setEnd(sel.getRangeAt(0).endContainer, sel.getRangeAt(0).endOffset);
+  return range.toString().length;
+}
+
+function setCaretOffset(el: HTMLElement, offset: number): void {
+  if (offset < 0) return;
+  const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
+  // eslint-disable-next-line no-restricted-syntax -- TreeWalker requires iteration with nextNode()
+  let remaining = offset;
+  // eslint-disable-next-line no-restricted-syntax -- accumulator updated inside TreeWalker loop
+  let node: Text | null = null;
+  while (walker.nextNode()) {
+    const n = walker.currentNode as Text;
+    if (n.length >= remaining) { node = n; break; }
+    remaining -= n.length;
+  }
+  if (!node) return;
+  const range = document.createRange();
+  range.setStart(node, remaining);
+  range.collapse(true);
+  const sel = window.getSelection();
+  sel?.removeAllRanges();
+  sel?.addRange(range);
+}
+
+/**
+ * Apply Prism-highlighted HTML to a code element.
+ * Saves and restores caret position. Returns a dispose function
+ * that reverts the element to its plain-text content.
+ * The optional `lang` parameter adds a `lang-{language}` class used
+ * to scope language-specific CSS rules (e.g. Mermaid token colors).
+ */
+export function applyPrismHighlight(el: HTMLElement, highlightedHtml: string, lang?: string): () => void {
+  ensureStylesheet();
+
+  const plainText = el.textContent ?? '';
+  const caretOffset = getCaretOffset(el);
+
+  el.classList.add('blok-code');
+  if (lang) {
+    el.classList.add(`lang-${lang}`);
+  }
+  // eslint-disable-next-line no-param-reassign -- intentional DOM mutation to apply highlighting
+  el.innerHTML = highlightedHtml;
+
+  setCaretOffset(el, caretOffset);
+
+  return () => {
+    // eslint-disable-next-line no-param-reassign -- intentional DOM mutation to restore plain text
+    el.innerHTML = plainText;
+    el.classList.remove('blok-code');
+    if (lang) {
+      el.classList.remove(`lang-${lang}`);
+    }
+  };
+}
+
+/** Remove the injected stylesheet (call on full editor teardown) */
+export function disposePrismStyles(): void {
+  if (!stylesheet) return;
+  const existing = document.adoptedStyleSheets ?? [];
+  document.adoptedStyleSheets = existing.filter(s => s !== stylesheet);
+  stylesheet = null;
+}

package/src/tools/code/prism-loader.ts

@@ -0,0 +1,197 @@
+import Prism from 'prismjs';
+import { HIGHLIGHTABLE_LANGUAGES } from './constants';
+
+/** Register a custom Prism grammar for Mermaid diagram syntax.
+ *
+ * Token types and their semantic meaning:
+ *   directive     — %%{init: {...}}%% front-matter directives
+ *   comment       — %% single-line comments
+ *   diagram-name  — diagram type keyword: graph, flowchart, sequenceDiagram, …  (cyan)
+ *   keyword       — direction (TD/LR/…) and structural words (subgraph, end, …)  (normal keyword color)
+ *   variable      — node IDs: A, B, myNode  (yellow/amber)
+ *   node-bracket  — node shape delimiters: [ ] { } ( )  (cyan, same as diagram-name)
+ *   string        — node label content and quoted strings  (white)
+ *   edge-label    — text inside |…| edge labels  (green)
+ *   edge-delimiter— the | pipes surrounding edge labels  (cyan)
+ *   operator      — arrows: -->, -.->, ==>, --o, --x, …  (white/muted)
+ *
+ * Token ordering follows Prism's greedy-first, specific-before-general rule.
+ * The grammar covers flowchart/graph, sequence, class, ER, state, and git diagrams.
+ */
+function registerMermaidGrammar(): void {
+  if (Prism.languages['mermaid']) return;
+
+  Prism.languages['mermaid'] = {
+    // %%{init: {...}}%% directives — MUST precede comment (both start with %%)
+    'directive': {
+      pattern: /%%\{[\s\S]*?\}%%/,
+      greedy: true,
+    },
+
+    // %% single-line comments
+    'comment': {
+      pattern: /%%[^\n]*/,
+      greedy: true,
+    },
+
+    // Edge labels: -->|Yes| or ---|text|
+    // Match the full |text| portion; split into delimiter + content via inside
+    'edge-label': {
+      // Matches |...| that follow an arrow character or stand alone in link context
+      pattern: /\|[^|\n]*\|/,
+      greedy: true,
+      inside: {
+        'edge-delimiter': /^\||\|$/,
+        'edge-label': /[^|]+/,
+      },
+    },
+
+    // Node definitions: NodeID[Label text] or NodeID{Label} or NodeID((Label))
+    // Capture the bracket + content + closing bracket as a unit; split inside
+    'node-definition': {
+      // Opening bracket types: [ [[ [( ( (( { (( )) ]] ]) )
+      pattern: /(?:\(\[|\[\[|\[\(|\[|\(+|>|\{|\(\()(?:[^\[\]{}()\n])*(?:\]\)|\]\]|\)\]|\]|\)+|\}|\)\))/,
+      greedy: true,
+      inside: {
+        'node-bracket': /^\(?[\[{(>]|[\]})]\)?$/,
+        'string': /[^\[\]{}()\n]+/,
+      },
+    },
+
+    // Diagram type keywords — first token on a line, colored cyan
+    'diagram-name': /^\s*(?:flowchart|graph|sequenceDiagram|classDiagram|erDiagram|stateDiagram(?:-v2)?|gitGraph|pie(?:\s+title)?|mindmap|timeline|quadrantChart|requirementDiagram|xychart-beta|C4Context|C4Container|C4Component)\b/m,
+
+    // Structural / direction keywords
+    'keyword': /\b(?:TD|TB|LR|RL|BT|subgraph|end|direction|participant|actor|as|activate|deactivate|loop|alt|else|opt|par|and|rect|critical|note|over|title|section|classDef|class|linkStyle|style|click|left of|right of)\b/,
+
+    // Arrows and edge connectors (order: longer patterns first)
+    // Covers: --> --- -.-> -.- ==> === --o --x <-- o-- x-- ~~~
+    'operator': /[xo<]?(?:={2,}|(?:-\.{1,3}|-{2,5}))(?:[xo>]?>{0,2})|~{3}/,
+
+    // Node IDs — word identifier not part of a keyword
+    // Uses lookbehind to avoid matching mid-word; must come after keywords
+    'variable': /\b(?!(?:TD|TB|LR|RL|BT|end|subgraph|direction|participant|actor|as|activate|deactivate|loop|alt|else|opt|par|and|rect|critical|note|over|title|section|classDef|class|linkStyle|style|click)\b)[-\w]+\b/,
+  };
+}
+
+// Map Blok language IDs to Prism grammar names and callable importers
+// `prereqs` lists grammar keys that must be loaded before this grammar runs.
+const LANG_MAP: Record<string, { grammar: string; prereqs?: string[]; importer: () => Promise<unknown> }> = {
+  javascript:  { grammar: 'javascript',  importer: () => import('prismjs/components/prism-javascript') },
+  typescript:  { grammar: 'typescript',  importer: () => import('prismjs/components/prism-typescript') },
+  python:      { grammar: 'python',      importer: () => import('prismjs/components/prism-python') },
+  java:        { grammar: 'java',        importer: () => import('prismjs/components/prism-java') },
+  c:           { grammar: 'c',           importer: () => import('prismjs/components/prism-c') },
+  cpp:         { grammar: 'cpp',         importer: () => import('prismjs/components/prism-cpp') },
+  csharp:      { grammar: 'csharp',      importer: () => import('prismjs/components/prism-csharp') },
+  go:          { grammar: 'go',          importer: () => import('prismjs/components/prism-go') },
+  rust:        { grammar: 'rust',        importer: () => import('prismjs/components/prism-rust') },
+  ruby:        { grammar: 'ruby',        importer: () => import('prismjs/components/prism-ruby') },
+  // php requires markup and markup-templating to be loaded first
+  php:         { grammar: 'php',         prereqs: ['markup', 'markup-templating'], importer: () => import('prismjs/components/prism-php') },
+  swift:       { grammar: 'swift',       importer: () => import('prismjs/components/prism-swift') },
+  kotlin:      { grammar: 'kotlin',      importer: () => import('prismjs/components/prism-kotlin') },
+  sql:         { grammar: 'sql',         importer: () => import('prismjs/components/prism-sql') },
+  html:        { grammar: 'markup',      importer: () => import('prismjs/components/prism-markup') },
+  css:         { grammar: 'css',         importer: () => import('prismjs/components/prism-css') },
+  json:        { grammar: 'json',        importer: () => import('prismjs/components/prism-json') },
+  yaml:        { grammar: 'yaml',        importer: () => import('prismjs/components/prism-yaml') },
+  markdown:    { grammar: 'markdown',    importer: () => import('prismjs/components/prism-markdown') },
+  bash:        { grammar: 'bash',        importer: () => import('prismjs/components/prism-bash') },
+  // shell shares the bash grammar intentionally
+  shell:       { grammar: 'bash',        importer: () => import('prismjs/components/prism-bash') },
+  dockerfile:  { grammar: 'docker',      importer: () => import('prismjs/components/prism-docker') },
+  // xml shares the markup grammar intentionally
+  xml:         { grammar: 'markup',      importer: () => import('prismjs/components/prism-markup') },
+  graphql:     { grammar: 'graphql',     importer: () => import('prismjs/components/prism-graphql') },
+  r:           { grammar: 'r',           importer: () => import('prismjs/components/prism-r') },
+  scala:       { grammar: 'scala',       importer: () => import('prismjs/components/prism-scala') },
+  dart:        { grammar: 'dart',        importer: () => import('prismjs/components/prism-dart') },
+  lua:         { grammar: 'lua',         importer: () => import('prismjs/components/prism-lua') },
+  latex:       { grammar: 'latex',       importer: () => import('prismjs/components/prism-latex') },
+  // Mermaid has no official Prism grammar — register a custom one synchronously
+  mermaid:     { grammar: 'mermaid',     importer: () => Promise.resolve(registerMermaidGrammar()) },
+};
+
+// Prerequisites that aren't user-facing languages but must be loadable by grammar key
+const PREREQ_IMPORTERS: Record<string, () => Promise<unknown>> = {
+  'markup':              () => import('prismjs/components/prism-markup'),
+  'markup-templating':   () => import('prismjs/components/prism-markup-templating'),
+};
+
+// Tracks which language grammars have been loaded
+const loadedLanguages = new Set<string>();
+
+/** Returns true if this language should be syntax-highlighted */
+export function isHighlightable(lang: string): boolean {
+  return HIGHLIGHTABLE_LANGUAGES.has(lang);
+}
+
+/** Load a prerequisite grammar by key (not a user-facing language ID) */
+async function ensurePrereq(grammarKey: string): Promise<void> {
+  if (loadedLanguages.has(grammarKey)) return;
+  const importer = PREREQ_IMPORTERS[grammarKey];
+  if (!importer) return;
+  try {
+    await importer();
+    loadedLanguages.add(grammarKey);
+  } catch (e) {
+    console.warn(`[blok] Failed to load Prism prerequisite grammar "${grammarKey}":`, e);
+  }
+}
+
+/** Load the Prism grammar for a language if not yet loaded */
+async function ensureLanguage(lang: string): Promise<boolean> {
+  const entry = LANG_MAP[lang];
+  if (!entry) return false;
+
+  const key = entry.grammar;
+  if (loadedLanguages.has(key)) return true;
+
+  // Load prerequisites first, in order
+  if (entry.prereqs) {
+    for (const prereq of entry.prereqs) {
+      await ensurePrereq(prereq);
+    }
+  }
+
+  try {
+    await entry.importer();
+    loadedLanguages.add(key);
+    return true;
+  } catch (e) {
+    console.warn(`[blok] Failed to load Prism grammar for "${lang}":`, e);
+    return false;
+  }
+}
+
+/**
+ * Tokenize code with Prism for the given language.
+ * Returns an HTML string with <span class="token ..."> elements, or null
+ * if the language is not highlightable or grammar loading fails.
+ */
+export async function tokenizePrism(code: string, lang: string): Promise<string | null> {
+  if (!isHighlightable(lang)) return null;
+
+  const entry = LANG_MAP[lang];
+  if (!entry) return null;
+
+  const loaded = await ensureLanguage(lang);
+  if (!loaded) return null;
+
+  const grammar = Prism.languages[entry.grammar];
+  if (!grammar) return null;
+
+  try {
+    return Prism.highlight(code, grammar, entry.grammar);
+  } catch (e) {
+    console.warn(`[blok] Prism highlight error for "${lang}":`, e);
+    return null;
+  }
+}
+
+/** For testing: reset loaded language cache */
+export function resetPrismState(): void {
+  loadedLanguages.clear();
+}
+

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

@@ -42,7 +42,7 @@ export class DatabaseBoardView implements DatabaseViewRenderer {
 
     wrapper.setAttribute('data-blok-tool', 'database');
     wrapper.setAttribute('role', 'region');
-    wrapper.setAttribute('aria-label', 'Kanban board');
+    wrapper.setAttribute('aria-label', this.i18n.t('tools.database.kanbanBoard'));
     wrapper.style.display = 'flex';
 
     const boardArea = document.createElement('div');
@@ -271,9 +271,11 @@ export class DatabaseBoardView implements DatabaseViewRenderer {
     cardEl.setAttribute('data-row-id', row.id);
     cardEl.setAttribute('role', 'listitem');
     cardEl.style.padding = '10px 12px';
-    cardEl.style.borderRadius = '12px';
+    cardEl.style.borderRadius = '10px';
     cardEl.style.cursor = 'pointer';
     cardEl.style.position = 'relative';
+    cardEl.style.backgroundColor = 'var(--blok-database-card-bg)';
+    cardEl.style.boxShadow = 'var(--blok-database-card-shadow)';
 
     const titleEl = document.createElement('div');
 

package/src/tools/database/database-card-drawer.ts

@@ -94,7 +94,7 @@ export class DatabaseCardDrawer {
 
     drawer.setAttribute('data-blok-database-drawer', '');
     drawer.setAttribute('role', 'complementary');
-    drawer.setAttribute('aria-label', 'Card details');
+    drawer.setAttribute('aria-label', this.i18n?.t('tools.database.cardDetails') ?? 'tools.database.cardDetails');
 
     // --- Top toolbar ---
     const toolbar = document.createElement('div');
@@ -122,7 +122,7 @@ export class DatabaseCardDrawer {
     const titleInput = document.createElement('textarea');
 
     titleInput.setAttribute('data-blok-database-drawer-title', '');
-    titleInput.setAttribute('aria-label', 'Card title');
+    titleInput.setAttribute('aria-label', this.i18n?.t('tools.database.cardTitle') ?? 'tools.database.cardTitle');
     titleInput.placeholder = this.i18n?.t('tools.database.cardTitlePlaceholder') ?? 'Empty page';
     titleInput.value = title;
     titleInput.rows = 1;
@@ -362,6 +362,7 @@ export class DatabaseCardDrawer {
               this.onAddProperty?.(type);
               this.propertyTypePopover?.close();
             },
+            i18n: this.i18n,
           });
         }
 

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

@@ -57,7 +57,7 @@ export class DatabaseListView implements DatabaseViewRenderer {
       }
     } else {
       wrapper.setAttribute('role', 'list');
-      wrapper.setAttribute('aria-label', 'List view');
+      wrapper.setAttribute('aria-label', this.i18n.t('tools.database.listView'));
 
       for (const row of this.rows) {
         const rowEl = this.createRowElement(row);

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);