testomatio-editor-blocks 0.4.65 → 0.4.66

package/package/editor/blocks/testMeta.d.ts

@@ -0,0 +1,37 @@
+export type MetaField = {
+    key: string;
+    value: string;
+};
+export declare function serializeMetaFields(fields: MetaField[]): string;
+export declare const testMetaBlock: {
+    config: {
+        readonly type: "testMeta";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly metaKind: {
+                readonly default: "test";
+            };
+            readonly metaFields: {
+                readonly default: "[]";
+            };
+            readonly metaInline: {
+                readonly default: false;
+            };
+        };
+    };
+    implementation: import("@blocknote/core").TiptapBlockImplementation<{
+        readonly type: "testMeta";
+        readonly content: "none";
+        readonly propSchema: {
+            readonly metaKind: {
+                readonly default: "test";
+            };
+            readonly metaFields: {
+                readonly default: "[]";
+            };
+            readonly metaInline: {
+                readonly default: false;
+            };
+        };
+    }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+};

package/package/editor/blocks/testMeta.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { getMetaFieldSuggestions } from "../testMetaFields";
+const ID_KEYS = new Set(["id"]);
+function parseMetaFields(raw) {
+    if (typeof raw !== "string" || raw.trim().length === 0) {
+        return [];
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        if (!Array.isArray(parsed)) {
+            return [];
+        }
+        return parsed
+            .filter((item) => item && typeof item === "object")
+            .map((item) => ({
+            key: typeof item.key === "string" ? item.key : "",
+            value: typeof item.value === "string" ? item.value : "",
+        }));
+    }
+    catch {
+        return [];
+    }
+}
+export function serializeMetaFields(fields) {
+    return JSON.stringify(fields);
+}
+function AddFieldMenu({ kind, usedKeys, onPick }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const containerRef = useRef(null);
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleMouseDown = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleMouseDown);
+        return () => document.removeEventListener("mousedown", handleMouseDown);
+    }, [isOpen]);
+    const available = useMemo(() => {
+        const used = new Set(usedKeys.map((k) => k.trim().toLowerCase()));
+        return getMetaFieldSuggestions(kind).filter((s) => !used.has(s.key.trim().toLowerCase()));
+    }, [kind, usedKeys]);
+    const pick = useCallback((key) => {
+        onPick(key);
+        setIsOpen(false);
+    }, [onPick]);
+    return (_jsxs("div", { className: "bn-testmeta__add-wrap", ref: containerRef, children: [_jsx("button", { type: "button", className: "bn-testmeta__add", "aria-label": "Add field", title: "Add field", onClick: () => setIsOpen((prev) => !prev), children: "+" }), isOpen && (_jsxs("div", { className: "bn-testmeta__menu", role: "listbox", children: [available.map((suggestion) => {
+                        var _a;
+                        return (_jsx("button", { type: "button", role: "option", className: "bn-testmeta__menu-item", onMouseDown: (event) => {
+                                event.preventDefault();
+                                pick(suggestion.key);
+                            }, children: (_a = suggestion.label) !== null && _a !== void 0 ? _a : suggestion.key }, suggestion.key));
+                    }), _jsx("button", { type: "button", className: "bn-testmeta__menu-item bn-testmeta__menu-item--custom", onMouseDown: (event) => {
+                            event.preventDefault();
+                            pick("");
+                        }, children: "Custom field\u2026" })] }))] }));
+}
+export const testMetaBlock = createReactBlockSpec({
+    type: "testMeta",
+    content: "none",
+    propSchema: {
+        // "test" | "suite" — which keyword the comment opened with.
+        metaKind: {
+            default: "test",
+        },
+        // JSON-encoded MetaField[] so insertion order is preserved.
+        metaFields: {
+            default: "[]",
+        },
+        // true when the source comment was a one-liner (`<!-- test id: @T.. -->`).
+        metaInline: {
+            default: false,
+        },
+    },
+}, {
+    render: ({ block, editor }) => {
+        const kind = block.props.metaKind === "suite" ? "suite" : "test";
+        const fields = useMemo(() => parseMetaFields(block.props.metaFields), [block.props.metaFields]);
+        const commitFields = useCallback((next) => {
+            editor.updateBlock(block.id, {
+                props: { metaFields: serializeMetaFields(next) },
+            });
+        }, [block.id, editor]);
+        const handleValueChange = useCallback((index, value) => {
+            const next = fields.map((field, i) => i === index ? { ...field, value } : field);
+            commitFields(next);
+        }, [fields, commitFields]);
+        const handleKeyChange = useCallback((index, key) => {
+            const next = fields.map((field, i) => i === index ? { ...field, key } : field);
+            commitFields(next);
+        }, [fields, commitFields]);
+        const handleRemove = useCallback((index) => {
+            commitFields(fields.filter((_, i) => i !== index));
+        }, [fields, commitFields]);
+        const handleAddField = useCallback((key) => {
+            commitFields([...fields, { key, value: "" }]);
+        }, [fields, commitFields]);
+        const usedKeys = useMemo(() => fields.map((f) => f.key), [fields]);
+        // The read-only `id` is shown inline on the header line next to the kind
+        // label; every other field renders as an editable row below.
+        const idField = fields.find((f) => ID_KEYS.has(f.key.trim().toLowerCase()));
+        const editableFields = fields
+            .map((field, index) => ({ field, index }))
+            .filter(({ field }) => !ID_KEYS.has(field.key.trim().toLowerCase()));
+        return (_jsxs("div", { className: "bn-testmeta", "data-block-id": block.id, "data-kind": kind, contentEditable: false, suppressContentEditableWarning: true, draggable: false, children: [_jsxs("div", { className: "bn-testmeta__header", children: [_jsx("span", { className: "bn-testmeta__label", children: kind.toUpperCase() }), (idField === null || idField === void 0 ? void 0 : idField.value) && _jsx("span", { className: "bn-testmeta__id", children: idField.value }), _jsx(AddFieldMenu, { kind: kind, usedKeys: usedKeys, onPick: handleAddField })] }), editableFields.length > 0 && (_jsx("div", { className: "bn-testmeta__rows", children: editableFields.map(({ field, index }) => (_jsxs("div", { className: "bn-testmeta__row", children: [_jsx("input", { className: "bn-testmeta__key bn-testmeta__key--input", type: "text", value: field.key, placeholder: "key", spellCheck: false, onChange: (e) => handleKeyChange(index, e.target.value) }), _jsx("input", { className: "bn-testmeta__value", type: "text", value: field.value, placeholder: "value", spellCheck: false, onChange: (e) => handleValueChange(index, e.target.value) }), _jsx("button", { type: "button", className: "bn-testmeta__remove", "aria-label": "Remove field", title: "Remove field", onClick: () => handleRemove(index), children: "\u00D7" })] }, index))) }))] }));
+    },
+});

package/package/editor/customMarkdownConverter.js

@@ -224,7 +224,7 @@ function serializeChildren(block, ctx) {
     return serializeBlocks(block.children, childCtx);
 }
 function serializeBlock(block, ctx, orderedIndex, stepIndex) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
     const lines = [];
     const indent = ctx.listDepth > 0 ? "  ".repeat(ctx.listDepth) : "";
     switch (block.type) {
@@ -316,19 +316,48 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             }
             return lines;
         }
+        case "testMeta": {
+            const kind = block.props.metaKind === "suite" ? "suite" : "test";
+            const inline = Boolean(block.props.metaInline);
+            let fields = [];
+            try {
+                const parsed = JSON.parse(((_e = block.props.metaFields) !== null && _e !== void 0 ? _e : "[]"));
+                if (Array.isArray(parsed)) {
+                    fields = parsed
+                        .filter((f) => f && typeof f === "object" && typeof f.key === "string")
+                        .map((f) => ({ key: f.key.trim(), value: typeof f.value === "string" ? f.value.trim() : "" }))
+                        // Skip incomplete fields: both a key and a value are required.
+                        .filter((f) => f.key.length > 0 && f.value.length > 0);
+                }
+            }
+            catch {
+                fields = [];
+            }
+            // Preserve the one-liner form only when it still fits on a single line
+            // (a one-liner holds at most one `key: value` pair).
+            if (inline && fields.length <= 1) {
+                const field = fields[0];
+                lines.push(field ? `<!-- ${kind} ${field.key}: ${field.value} -->` : `<!-- ${kind} -->`);
+                return lines;
+            }
+            lines.push(`<!-- ${kind}`);
+            fields.forEach((field) => lines.push(`${field.key}: ${field.value}`));
+            lines.push("-->");
+            return lines;
+        }
         case "testStep":
         case "snippet": {
             const isSnippet = block.type === "snippet";
-            const snippetId = isSnippet ? ((_e = block.props.snippetId) !== null && _e !== void 0 ? _e : "").trim() : "";
+            const snippetId = isSnippet ? ((_f = block.props.snippetId) !== null && _f !== void 0 ? _f : "").trim() : "";
             const stepTitle = isSnippet
-                ? ((_f = block.props.snippetTitle) !== null && _f !== void 0 ? _f : "").trim()
-                : ((_g = block.props.stepTitle) !== null && _g !== void 0 ? _g : "").trim();
+                ? ((_g = block.props.snippetTitle) !== null && _g !== void 0 ? _g : "").trim()
+                : ((_h = block.props.stepTitle) !== null && _h !== void 0 ? _h : "").trim();
             const stepData = isSnippet
-                ? ((_h = block.props.snippetData) !== null && _h !== void 0 ? _h : "").trim()
-                : ((_j = block.props.stepData) !== null && _j !== void 0 ? _j : "").trim();
+                ? ((_j = block.props.snippetData) !== null && _j !== void 0 ? _j : "").trim()
+                : ((_k = block.props.stepData) !== null && _k !== void 0 ? _k : "").trim();
             const expectedResult = isSnippet
-                ? ((_k = block.props.snippetExpectedResult) !== null && _k !== void 0 ? _k : "").trim()
-                : ((_l = block.props.expectedResult) !== null && _l !== void 0 ? _l : "").trim();
+                ? ((_l = block.props.snippetExpectedResult) !== null && _l !== void 0 ? _l : "").trim()
+                : ((_m = block.props.expectedResult) !== null && _m !== void 0 ? _m : "").trim();
             if (isSnippet) {
                 if (snippetId) {
                     lines.push(`<!-- begin snippet #${snippetId} -->`);
@@ -352,7 +381,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
             const normalizedExpectedForCheck = stripExpectedPrefix(expectedResult).trim();
             const hasContent = stepData.length > 0 || normalizedExpectedForCheck.length > 0;
             if (normalizedTitle.length > 0 || hasContent) {
-                const listStyle = (_m = block.props.listStyle) !== null && _m !== void 0 ? _m : "bullet";
+                const listStyle = (_o = block.props.listStyle) !== null && _o !== void 0 ? _o : "bullet";
                 const prefix = listStyle === "ordered" ? `${(stepIndex !== null && stepIndex !== void 0 ? stepIndex : 0) + 1}.` : "*";
                 lines.push(normalizedTitle.length > 0 ? `${prefix} ${escapeStepContent(normalizedTitle)}` : `${prefix} `);
             }
@@ -406,7 +435,7 @@ function serializeBlock(block, ctx, orderedIndex, stepIndex) {
                 return lines;
             }
             const headerRowCount = rows.length
-                ? Math.min(rows.length, Math.max((_o = tableContent.headerRows) !== null && _o !== void 0 ? _o : 1, 1))
+                ? Math.min(rows.length, Math.max((_p = tableContent.headerRows) !== null && _p !== void 0 ? _p : 1, 1))
                 : 0;
             const columnAlignments = new Array(columnCount).fill("left");
             const getCellAlignment = (cell) => {
@@ -1145,6 +1174,86 @@ function parseParagraph(lines, index) {
         nextIndex: index + 1,
     };
 }
+const META_COMMENT_OPEN_REGEX = /^<!--\s*(test|suite)(?=\s|-->|$)/i;
+function metaFieldsFromBody(bodyLines) {
+    const fields = [];
+    for (const raw of bodyLines) {
+        const line = raw.trim();
+        if (!line)
+            continue;
+        const colon = line.indexOf(":");
+        // "Each line is `key: value`; lines without `:` are ignored."
+        if (colon === -1)
+            continue;
+        const key = line.slice(0, colon).trim();
+        const value = line.slice(colon + 1).trim();
+        if (!key)
+            continue;
+        fields.push({ key, value });
+    }
+    return fields;
+}
+function parseMetaComment(lines, index) {
+    const first = lines[index];
+    const openMatch = first.match(META_COMMENT_OPEN_REGEX);
+    if (!openMatch) {
+        return null;
+    }
+    const kind = openMatch[1].toLowerCase();
+    let bodyLines = [];
+    let inline = false;
+    let nextIndex;
+    // One-liner: opening and closing markers on the same line.
+    const oneLine = first.match(/^<!--\s*(?:test|suite)\b\s*([\s\S]*?)\s*-->\s*$/i);
+    if (oneLine) {
+        inline = true;
+        if (oneLine[1].trim()) {
+            bodyLines = [oneLine[1].trim()];
+        }
+        nextIndex = index + 1;
+    }
+    else {
+        // Block form: keyword line, fields on their own lines, closing `-->`.
+        const afterKeyword = first.replace(/^<!--\s*(?:test|suite)\b/i, "").trim();
+        if (afterKeyword) {
+            bodyLines.push(afterKeyword);
+        }
+        let next = index + 1;
+        let closed = false;
+        while (next < lines.length) {
+            const current = lines[next];
+            if (/-->\s*$/.test(current)) {
+                const beforeClose = current.replace(/-->\s*$/, "").trim();
+                if (beforeClose) {
+                    bodyLines.push(beforeClose);
+                }
+                next += 1;
+                closed = true;
+                break;
+            }
+            bodyLines.push(current);
+            next += 1;
+        }
+        if (!closed) {
+            // Unterminated comment — let normal parsing handle these lines.
+            return null;
+        }
+        nextIndex = next;
+    }
+    const fields = metaFieldsFromBody(bodyLines);
+    return {
+        block: {
+            type: "testMeta",
+            props: {
+                metaKind: kind,
+                metaFields: JSON.stringify(fields),
+                metaInline: inline,
+            },
+            children: [],
+        },
+        nextIndex,
+    };
+}
 function parseSnippetWrapper(lines, index) {
     const trimmed = lines[index].trim();
     const startMatch = trimmed.match(/^<!--\s*begin snippet\s*#?\s*([^\s>]+)\s*-->/i);
@@ -1257,6 +1366,14 @@ export function markdownToBlocks(markdown, _options) {
             index += 1;
             continue;
         }
+        // Test/suite metadata comments can appear anywhere (typically at the top of
+        // a document or right after a heading), so this runs ungated.
+        const metaComment = parseMetaComment(lines, index);
+        if (metaComment) {
+            blocks.push(metaComment.block);
+            index = metaComment.nextIndex;
+            continue;
+        }
         const snippetWrapper = stepsHeadingLevel !== null
             ? parseSnippetWrapper(lines, index)
             : null;

package/package/editor/customSchema.d.ts

@@ -117,6 +117,38 @@ export declare const customSchema: BlockNoteSchema<import("@blocknote/core").Blo
             };
         }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
     };
+    testMeta: {
+        config: {
+            readonly type: "testMeta";
+            readonly content: "none";
+            readonly propSchema: {
+                readonly metaKind: {
+                    readonly default: "test";
+                };
+                readonly metaFields: {
+                    readonly default: "[]";
+                };
+                readonly metaInline: {
+                    readonly default: false;
+                };
+            };
+        };
+        implementation: import("@blocknote/core").TiptapBlockImplementation<{
+            readonly type: "testMeta";
+            readonly content: "none";
+            readonly propSchema: {
+                readonly metaKind: {
+                    readonly default: "test";
+                };
+                readonly metaFields: {
+                    readonly default: "[]";
+                };
+                readonly metaInline: {
+                    readonly default: false;
+                };
+            };
+        }, any, import("@blocknote/core").InlineContentSchema, import("@blocknote/core").StyleSchema>;
+    };
     paragraph: {
         config: {
             type: "paragraph";

package/package/editor/customSchema.js

@@ -2,6 +2,7 @@ import { defaultBlockSpecs } from "@blocknote/core";
 import { BlockNoteSchema } from "@blocknote/core";
 import { stepBlock } from "./blocks/step";
 import { snippetBlock } from "./blocks/snippet";
+import { testMetaBlock } from "./blocks/testMeta";
 import { fileBlock } from "./blocks/fileBlock";
 import { htmlToMarkdown, markdownToHtml } from "./blocks/markdown";
 export const customSchema = BlockNoteSchema.create({
@@ -10,6 +11,7 @@ export const customSchema = BlockNoteSchema.create({
         file: fileBlock,
         testStep: stepBlock,
         snippet: snippetBlock,
+        testMeta: testMetaBlock,
     },
 });
 export const __markdownTestUtils = {

package/package/editor/testMetaFields.d.ts

@@ -0,0 +1,17 @@
+export type MetaFieldSuggestion = {
+    /** The field key that gets inserted, e.g. "priority". */
+    key: string;
+    /** Optional display label; defaults to `key`. */
+    label?: string;
+};
+/**
+ * Either a flat list (applied to both test and suite blocks) or per-kind lists.
+ * Configure from the host app via `setMetaFieldSuggestions` so embedders can
+ * plug in their own set of suggested metadata fields.
+ */
+export type MetaFieldSuggestionsConfig = MetaFieldSuggestion[] | {
+    test?: MetaFieldSuggestion[];
+    suite?: MetaFieldSuggestion[];
+};
+export declare function setMetaFieldSuggestions(config: MetaFieldSuggestionsConfig | null): void;
+export declare function getMetaFieldSuggestions(kind: "test" | "suite"): MetaFieldSuggestion[];

package/package/editor/testMetaFields.js

@@ -0,0 +1,33 @@
+// Defaults follow the classical Testomatio markdown format. `id` is intentionally
+// omitted: it is a read-only, system-assigned field, not something users add.
+const DEFAULT_TEST_FIELDS = [
+    { key: "priority" },
+    { key: "type" },
+    { key: "tags" },
+    { key: "labels" },
+    { key: "assignee" },
+    { key: "creator" },
+    { key: "shared" },
+];
+const DEFAULT_SUITE_FIELDS = [
+    { key: "emoji" },
+    { key: "tags" },
+    { key: "labels" },
+    { key: "assignee" },
+];
+let configured = null;
+export function setMetaFieldSuggestions(config) {
+    configured = config;
+}
+export function getMetaFieldSuggestions(kind) {
+    if (configured) {
+        if (Array.isArray(configured)) {
+            return configured;
+        }
+        const list = kind === "suite" ? configured.suite : configured.test;
+        if (list) {
+            return list;
+        }
+    }
+    return kind === "suite" ? DEFAULT_SUITE_FIELDS : DEFAULT_TEST_FIELDS;
+}

package/package/index.d.ts

@@ -1,6 +1,8 @@
 export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
+export { testMetaBlock } from "./editor/blocks/testMeta";
+export { setMetaFieldSuggestions, getMetaFieldSuggestions, type MetaFieldSuggestion, type MetaFieldSuggestionsConfig, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, type MarkdownToBlocksOptions, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, type StepSuggestion, type StepJsonApiDocument, type StepJsonApiResource, } from "./editor/stepAutocomplete";

package/package/index.js

@@ -1,6 +1,8 @@
 export { customSchema, } from "./editor/customSchema";
 export { stepBlock, canInsertStepOrSnippet, isStepsHeading, addStepsBlock, addSnippetBlock } from "./editor/blocks/step";
 export { snippetBlock } from "./editor/blocks/snippet";
+export { testMetaBlock } from "./editor/blocks/testMeta";
+export { setMetaFieldSuggestions, getMetaFieldSuggestions, } from "./editor/testMetaFields";
 export { markdownToHtml, htmlToMarkdown } from "./editor/blocks/markdown";
 export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
 export { useStepAutocomplete, parseStepsFromJsonApi, setStepsFetcher, } from "./editor/stepAutocomplete";

package/package/styles.css

@@ -595,6 +595,207 @@ html.dark .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-lin
   flex-shrink: 0;
 }
 
+/* ============================================
+   HEADING SIZES INSIDE THE EDITOR
+   Override BlockNote's default heading scale (3em / 2em / 1.3em) with a
+   compact 22px → 14px range. BlockNote derives heading font-size from the
+   `--level` custom property, so we just redefine it per level.
+   ============================================ */
+.testomatio-editor [data-content-type="heading"] {
+  --level: 22px; /* h1 (level 1 has no [data-level] rule of its own) */
+}
+.testomatio-editor [data-content-type="heading"][data-level="2"] {
+  --level: 20px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="3"] {
+  --level: 18px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="4"] {
+  --level: 16px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="5"] {
+  --level: 14px;
+}
+.testomatio-editor [data-content-type="heading"][data-level="6"] {
+  --level: 14px;
+}
+/* Keep size stable during BlockNote's heading-transition animation. */
+.testomatio-editor [data-prev-level="1"] {
+  --prev-level: 22px;
+}
+.testomatio-editor [data-prev-level="2"] {
+  --prev-level: 20px;
+}
+.testomatio-editor [data-prev-level="3"] {
+  --prev-level: 18px;
+}
+
+/* ============================================
+   TEST / SUITE METADATA BLOCK
+   Dimmed card for `<!-- test ... -->` / `<!-- suite ... -->` comments.
+   ============================================ */
+.bn-testmeta {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  box-sizing: border-box;
+  padding: 6px 10px;
+  background: var(--bg-muted);
+  /*border: 1px solid var(--border-default);*/
+  /* Stronger top edge signals that the test case begins below this line. */
+  border-top: 3px solid var(--color-slate-400);
+  /*border-radius: 8px;*/
+  margin-top: 2rem;
+  opacity: 0.5;
+}
+
+/* Header line: `TEST  @T1233456 ............ [+]` — label, id, and add button
+   always share one row. */
+.bn-testmeta__header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: 8px;
+}
+
+.bn-testmeta__header .bn-testmeta__add-wrap {
+  margin-left: auto;
+}
+
+.bn-testmeta__label {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--text-muted);
+  flex-shrink: 0;
+}
+
+.bn-testmeta__id {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.bn-testmeta__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.bn-testmeta__row {
+  display: grid;
+  grid-template-columns: 140px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 8px;
+}
+
+.bn-testmeta__key {
+  min-width: 0;
+  font-size: 13px;
+  color: var(--text-muted);
+}
+
+/* Defined values blend into the block like normal text, and only reveal the
+   input affordance on hover/focus ("activate on click"). */
+.bn-testmeta__key--input,
+.bn-testmeta__value {
+  width: 100%;
+  height: 26px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 6px;
+  cursor: text;
+}
+
+.bn-testmeta__key--input:hover,
+.bn-testmeta__value:hover {
+  border-color: var(--border-light);
+}
+
+.bn-testmeta__key--input:focus,
+.bn-testmeta__value:focus {
+  outline: none;
+  background: var(--bg-white);
+  border-color: var(--step-input-border-focus);
+  box-shadow: 0 0 0 2px var(--step-input-shadow);
+}
+
+.bn-testmeta__remove,
+.bn-testmeta__add {
+  width: 24px;
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  padding: 0;
+}
+
+.bn-testmeta__remove:hover,
+.bn-testmeta__add:hover {
+  background: var(--step-bg-button-hover);
+  color: var(--text-primary);
+}
+
+.bn-testmeta__add-wrap {
+  position: relative;
+}
+
+.bn-testmeta__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  right: 0;
+  z-index: 100;
+  min-width: 160px;
+  max-height: 240px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+  background: var(--bg-white-opaque);
+  border: 1px solid var(--border-default);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px var(--shadow-medium);
+}
+
+.bn-testmeta__menu-item {
+  display: block;
+  width: 100%;
+  padding: 6px 8px;
+  text-align: left;
+  font-family: inherit;
+  font-size: 13px;
+  color: var(--text-primary);
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+}
+
+.bn-testmeta__menu-item:hover {
+  background: var(--bg-muted);
+}
+
+.bn-testmeta__menu-item--custom {
+  margin-top: 2px;
+  border-top: 1px solid var(--border-light);
+  border-radius: 0 0 6px 6px;
+  color: var(--text-muted);
+}
+
 .bn-snippet-dropdown {
   position: relative;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "testomatio-editor-blocks",
-  "version": "0.4.65",
+  "version": "0.4.66",
   "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
   "type": "module",
   "main": "./package/index.js",