testomatio-editor-blocks 0.4.6 → 0.4.10

package/package/editor/blocks/step.js

@@ -220,9 +220,9 @@ export const stepBlock = createReactBlockSpec({
         const canToggleData = !dataHasContent;
         const canToggleExpected = !expectedHasContent;
         if (viewMode === "horizontal") {
-            return (_jsx(StepHorizontalView, { blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: _jsx("button", { type: "button", className: "bn-teststep__view-toggle bn-teststep__view-toggle--horizontal", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }) }));
+            return (_jsx(StepHorizontalView, { blockId: block.id, stepNumber: stepNumber, stepValue: combinedStepValue, expectedResult: expectedResult, onStepChange: handleCombinedStepChange, onExpectedChange: handleExpectedChange, onInsertNextStep: handleInsertNextStep, onFieldFocus: handleFieldFocus, viewToggle: _jsx("button", { type: "button", className: "bn-teststep__view-toggle bn-teststep__view-toggle--horizontal", "data-tooltip": "Switch step view", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) }) }));
         }
-        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), _jsx("button", { type: "button", className: "bn-teststep__view-toggle", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) })] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
+        return (_jsxs("div", { className: "bn-teststep", "data-block-id": block.id, children: [_jsxs("div", { className: "bn-teststep__timeline", children: [_jsx("span", { className: "bn-teststep__number", children: stepNumber }), _jsx("div", { className: "bn-teststep__line" })] }), _jsxs("div", { className: "bn-teststep__content", children: [_jsxs("div", { className: "bn-teststep__header", children: [_jsx("span", { className: "bn-teststep__title", children: "Step" }), _jsx("button", { type: "button", className: "bn-teststep__view-toggle", "data-tooltip": "Switch step view", "aria-label": "Switch step view", onClick: handleToggleView, children: _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: [_jsx("mask", { id: "mask-toggle", style: { maskType: "alpha" }, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "16", height: "16", children: _jsx("rect", { width: "16", height: "16", fill: "#D9D9D9" }) }), _jsx("g", { mask: "url(#mask-toggle)", children: _jsx("path", { d: "M12.6667 2C13.0333 2 13.3472 2.13056 13.6083 2.39167C13.8694 2.65278 14 2.96667 14 3.33333L14 12.6667C14 13.0333 13.8694 13.3472 13.6083 13.6083C13.3472 13.8694 13.0333 14 12.6667 14L10 14C9.63333 14 9.31944 13.8694 9.05833 13.6083C8.79722 13.3472 8.66667 13.0333 8.66667 12.6667L8.66667 3.33333C8.66667 2.96667 8.79722 2.65278 9.05833 2.39167C9.31945 2.13055 9.63333 2 10 2L12.6667 2ZM6 2C6.36667 2 6.68056 2.13055 6.94167 2.39167C7.20278 2.65278 7.33333 2.96667 7.33333 3.33333L7.33333 12.6667C7.33333 13.0333 7.20278 13.3472 6.94167 13.6083C6.68055 13.8694 6.36667 14 6 14L3.33333 14C2.96667 14 2.65278 13.8694 2.39167 13.6083C2.13056 13.3472 2 13.0333 2 12.6667L2 3.33333C2 2.96667 2.13056 2.65278 2.39167 2.39167C2.65278 2.13055 2.96667 2 3.33333 2L6 2ZM3.33333 12.6667L6 12.6667L6 3.33333L3.33333 3.33333L3.33333 12.6667Z", fill: "currentColor" }) })] }) })] }), _jsx(StepField, { label: "Step", showLabel: false, value: stepTitle, placeholder: STEP_TITLE_PLACEHOLDER, onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0, enableAutocomplete: true, fieldName: "title", suggestionFilter: (suggestion) => suggestion.isSnippet !== true, onFieldFocus: handleFieldFocus, enableImageUpload: false, showFormattingButtons: true, onImageFile: async (file) => {
                                 if (!uploadImage) {
                                     return;
                                 }
@@ -242,6 +242,6 @@ export const stepBlock = createReactBlockSpec({
                                 catch (error) {
                                     console.error("Failed to upload image to Step Data", error);
                                 }
-                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: canToggleData ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" })) : undefined, value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: canToggleExpected ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" })) : undefined, value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
+                            } }), isDataVisible ? (_jsx(StepField, { label: "Step data", placeholder: STEP_DATA_PLACEHOLDER, labelAction: canToggleData ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide step data", onClick: handleHideData, "aria-label": "Hide step data", children: "\u00D7" })) : undefined, value: stepData, onChange: handleStepDataChange, autoFocus: shouldFocusDataField, focusSignal: dataFocusSignal, multiline: true, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, isExpectedVisible ? (_jsx(StepField, { label: "Expected result", placeholder: EXPECTED_RESULT_PLACEHOLDER, labelAction: canToggleExpected ? (_jsx("button", { type: "button", className: "bn-step-field__dismiss", "data-tooltip": "Hide expected result", onClick: handleHideExpected, tabIndex: -1, "aria-label": "Hide expected result", children: "\u00D7" })) : undefined, value: expectedResult, onChange: handleExpectedChange, multiline: true, focusSignal: expectedFocusSignal, enableAutocomplete: true, enableImageUpload: true, showFormattingButtons: true, showImageButton: true, onFieldFocus: handleFieldFocus })) : null, _jsxs("div", { className: "bn-step-actions", children: [_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleInsertNextStep, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 13.334 13.334", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M6.667 0a6.667 6.667 0 1 1 0 13.334A6.667 6.667 0 0 1 6.667 0Zm0 1.334a5.333 5.333 0 1 0 0 10.666 5.333 5.333 0 0 0 0-10.666ZM7.334 3.334V6H10v1.334H7.334V10H6V7.334H3.334V6H6V3.334h1.334Z", fill: "currentColor" }) }), "Add new step"] }), !isDataVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowData, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Step data"] })), !isExpectedVisible && (_jsxs("button", { type: "button", className: "bn-step-action-btn", onClick: handleShowExpected, children: [_jsx("svg", { className: "bn-step-action-btn__icon", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.666 7.333H12.666V8.667H8.666V12.667H7.332V8.667H3.332V7.333H7.332V3.333H8.666V7.333Z", fill: "currentColor" }) }), "Expected result"] }))] })] })] }));
     },
 });

package/package/editor/blocks/stepField.js

@@ -1032,17 +1032,17 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                                 }, tabIndex: -1, children: "Edit link" }), _jsx("a", { className: "bn-step-link-tooltip__btn", href: cursorLink.url, target: "_blank", rel: "noopener noreferrer", onMouseDown: (event) => event.stopPropagation(), tabIndex: -1, children: _jsxs("svg", { width: "12", height: "12", viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { d: "M11 3a1 1 0 100 2h2.586l-6.293 6.293a1 1 0 101.414 1.414L15 6.414V9a1 1 0 102 0V4a1 1 0 00-1-1h-5z" }), _jsx("path", { d: "M5 5a2 2 0 00-2 2v8a2 2 0 002 2h8a2 2 0 002-2v-3a1 1 0 10-2 0v3H5V7h3a1 1 0 000-2H5z" })] }) }), _jsx("button", { type: "button", className: "bn-step-link-tooltip__btn bn-step-link-tooltip__btn--danger", onMouseDown: (event) => {
                                     event.preventDefault();
                                     handleRemoveLink();
-                                }, tabIndex: -1, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M7 3h2a1 1 0 0 0-2 0ZM6 3a2 2 0 1 1 4 0h4a.5.5 0 0 1 0 1h-.564l-1.205 8.838A2.5 2.5 0 0 1 9.754 15H6.246a2.5 2.5 0 0 1-2.477-2.162L2.564 4H2a.5.5 0 0 1 0-1h4Zm1 3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5ZM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z" }) }) })] })), showToolbar && (_jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} controls`, children: [showFormattingButtons && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                }, tabIndex: -1, children: _jsx("svg", { width: "12", height: "12", viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", children: _jsx("path", { d: "M7 3h2a1 1 0 0 0-2 0ZM6 3a2 2 0 1 1 4 0h4a.5.5 0 0 1 0 1h-.564l-1.205 8.838A2.5 2.5 0 0 1 9.754 15H6.246a2.5 2.5 0 0 1-2.477-2.162L2.564 4H2a.5.5 0 0 1 0-1h4Zm1 3.5a.5.5 0 0 0-1 0v5a.5.5 0 0 0 1 0v-5ZM9.5 6a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 1 0v-5a.5.5 0 0 0-.5-.5Z" }) }) })] })), showToolbar && (_jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} controls`, children: [showFormattingButtons && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Bold", onMouseDown: (event) => {
                                             event.preventDefault();
                                             handleToolbarAction("toggleBold");
-                                        }, "aria-label": "Bold", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 2.66675H8.33333C8.92064 2.66677 9.49502 2.83918 9.98525 3.1626C10.4755 3.48602 10.86 3.94622 11.0911 4.48613C11.3223 5.02604 11.3898 5.62192 11.2855 6.19988C11.1811 6.77783 10.9094 7.31244 10.504 7.73741C11.0752 8.06825 11.5213 8.57823 11.7733 9.18833C12.0252 9.79844 12.0689 10.4746 11.8976 11.1121C11.7263 11.7495 11.3495 12.3127 10.8256 12.7143C10.3018 13.1159 9.66008 13.3335 9 13.3334H4V12.0001H4.66667V4.00008H4V2.66675ZM6 7.33341H8.33333C8.77536 7.33341 9.19928 7.15782 9.51184 6.84526C9.8244 6.5327 10 6.10878 10 5.66675C10 5.22472 9.8244 4.8008 9.51184 4.48824C9.19928 4.17568 8.77536 4.00008 8.33333 4.00008H6V7.33341ZM6 8.66675V12.0001H9C9.44203 12.0001 9.86595 11.8245 10.1785 11.5119C10.4911 11.1994 10.6667 10.7754 10.6667 10.3334C10.6667 9.89139 10.4911 9.46746 10.1785 9.1549C9.86595 8.84234 9.44203 8.66675 9 8.66675H6Z", fill: "currentColor" }) }) }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                        }, "aria-label": "Bold", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M4 2.66675H8.33333C8.92064 2.66677 9.49502 2.83918 9.98525 3.1626C10.4755 3.48602 10.86 3.94622 11.0911 4.48613C11.3223 5.02604 11.3898 5.62192 11.2855 6.19988C11.1811 6.77783 10.9094 7.31244 10.504 7.73741C11.0752 8.06825 11.5213 8.57823 11.7733 9.18833C12.0252 9.79844 12.0689 10.4746 11.8976 11.1121C11.7263 11.7495 11.3495 12.3127 10.8256 12.7143C10.3018 13.1159 9.66008 13.3335 9 13.3334H4V12.0001H4.66667V4.00008H4V2.66675ZM6 7.33341H8.33333C8.77536 7.33341 9.19928 7.15782 9.51184 6.84526C9.8244 6.5327 10 6.10878 10 5.66675C10 5.22472 9.8244 4.8008 9.51184 4.48824C9.19928 4.17568 8.77536 4.00008 8.33333 4.00008H6V7.33341ZM6 8.66675V12.0001H9C9.44203 12.0001 9.86595 11.8245 10.1785 11.5119C10.4911 11.1994 10.6667 10.7754 10.6667 10.3334C10.6667 9.89139 10.4911 9.46746 10.1785 9.1549C9.86595 8.84234 9.44203 8.66675 9 8.66675H6Z", fill: "currentColor" }) }) }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Italic", onMouseDown: (event) => {
                                             event.preventDefault();
                                             handleToolbarAction("toggleItalic");
-                                        }, "aria-label": "Italic", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8.66699 13.3334H4.66699V12.0001H5.95166L8.69566 4.00008H7.33366V2.66675H11.3337V4.00008H10.049L7.30499 12.0001H8.66699V13.3334Z", fill: "currentColor" }) }) })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                        }, "aria-label": "Italic", tabIndex: -1, children: _jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M8.66699 13.3334H4.66699V12.0001H5.95166L8.69566 4.00008H7.33366V2.66675H11.3337V4.00008H10.049L7.30499 12.0001H8.66699V13.3334Z", fill: "currentColor" }) }) })] })), enableImageUpload && uploadImage && showImageButton && (_jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Insert image", onMouseDown: (event) => {
                                     var _a;
                                     event.preventDefault();
                                     (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click();
-                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: _jsx(ImageUploadIcon, {}) })), showFormattingButtons && Components && (_jsxs(Components.Generic.Popover.Root, { opened: showLinkPopover, position: "top", children: [_jsx(Components.Generic.Popover.Trigger, { children: _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                }, "aria-label": "Insert image", tabIndex: -1, disabled: isUploading, children: _jsx(ImageUploadIcon, {}) })), showFormattingButtons && Components && (_jsxs(Components.Generic.Popover.Root, { opened: showLinkPopover, position: "top", children: [_jsx(Components.Generic.Popover.Trigger, { children: _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Insert link", onMouseDown: (event) => {
                                                 event.preventDefault();
                                                 if (showLinkPopover) {
                                                     setShowLinkPopover(false);
@@ -1058,7 +1058,7 @@ export function StepField({ label, showLabel = true, labelToggle, labelAction, p
                                                         return "";
                                                     const existing = linksRef.current.find((l) => l.start < sel.end && l.end > sel.start);
                                                     return (_a = existing === null || existing === void 0 ? void 0 : existing.url) !== null && _a !== void 0 ? _a : "";
-                                                })(), text: (_b = (_a = linkSelectionRef.current) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "", editLink: handleEditLink }) }) })] })), enableAutocomplete && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bn-step-toolbar__divider" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                                })(), text: (_b = (_a = linkSelectionRef.current) === null || _a === void 0 ? void 0 : _a.text) !== null && _b !== void 0 ? _b : "", editLink: handleEditLink }) }) })] })), enableAutocomplete && (_jsxs(_Fragment, { children: [_jsx("div", { className: "bn-step-toolbar__divider" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", "data-tooltip": "Show suggestions", onMouseDown: (event) => {
                                             event.preventDefault();
                                             setShowAllSuggestions(true);
                                             textareaNode === null || textareaNode === void 0 ? void 0 : textareaNode.focus();

package/package/styles.css

@@ -95,6 +95,163 @@
   --status-blocked-bg: rgba(239, 68, 68, 0.12);
 }
 
+/* Dark mode variable overrides */
+html.dark {
+  --color-white: #171717;
+  --color-slate-900: #fafafa;
+  --color-slate-400: #737373;
+
+  --text-primary: #fafafa;
+  --text-muted: rgba(250, 250, 250, 0.5);
+
+  --border-light: rgba(255, 255, 255, 0.1);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --shadow-subtle: rgba(0, 0, 0, 0.2);
+  --shadow-medium: rgba(0, 0, 0, 0.35);
+  --shadow-heavy: rgba(0, 0, 0, 0.6);
+  --overlay-dark: rgba(0, 0, 0, 0.8);
+
+  --bg-white: rgba(38, 38, 38, 0.85);
+  --bg-white-solid: rgba(38, 38, 38, 0.92);
+  --bg-white-opaque: rgba(38, 38, 38, 0.98);
+  --bg-muted: rgba(255, 255, 255, 0.05);
+
+  /* Step block colors */
+  --step-card-bg: #1a1a1a;
+  --step-card-border: #333333;
+  --step-card-shadow: rgba(0, 0, 0, 0.2);
+  --step-input-border: #404040;
+  --step-input-border-focus: #6366f1;
+  --step-input-shadow: rgba(99, 102, 241, 0.25);
+  --step-text: #e5e5e5;
+  --step-muted: #737373;
+  --step-action: #a3a3a3;
+  --step-bg-button: #262626;
+  --step-bg-button-hover: #333333;
+  --step-border-focus: rgba(99, 102, 241, 0.4);
+  --step-border-light: rgba(255, 255, 255, 0.1);
+  --step-bg-light: rgba(255, 255, 255, 0.06);
+  --step-shadow-hover: rgba(0, 0, 0, 0.2);
+
+  /* Step timeline */
+  --step-number-bg: #404040;
+  --step-number-text: #fafafa;
+  --step-label-color: #a3a3a3;
+  --snippet-dropdown-bg: #262626;
+  --snippet-content-bg: #1a1a1a;
+  --snippet-content-border: #333333;
+
+  /* Snippet block colors */
+  --snippet-border: rgba(16, 185, 129, 0.6);
+  --snippet-bg: rgba(16, 185, 129, 0.08);
+  --snippet-shadow: rgba(16, 185, 129, 0.12);
+  --snippet-border-light: rgba(16, 185, 129, 0.2);
+  --snippet-border-medium: rgba(16, 185, 129, 0.3);
+  --snippet-border-strong: rgba(16, 185, 129, 0.45);
+  --snippet-border-focus: rgba(16, 185, 129, 0.6);
+  --snippet-bg-light: rgba(16, 185, 129, 0.08);
+  --snippet-bg-hover: rgba(16, 185, 129, 0.14);
+  --snippet-focus-ring: rgba(16, 185, 129, 0.15);
+
+  /* Status colors */
+  --status-default-bg: rgba(148, 163, 184, 0.08);
+  --status-ready-bg: rgba(34, 197, 94, 0.08);
+  --status-blocked-bg: rgba(239, 68, 68, 0.08);
+}
+
+/* Dark mode hardcoded color overrides */
+html.dark .bn-step-action-btn {
+  color: #a3a3a3;
+}
+
+html.dark .bn-step-toolbar__button {
+  color: #d4d4d4;
+}
+
+html.dark .bn-step-toolbar__divider {
+  background: #404040;
+}
+
+html.dark .bn-teststep__view-toggle svg {
+  color: #d4d4d4;
+}
+
+html.dark [data-tooltip]::after {
+  background: #262626;
+}
+
+html.dark .bn-step-field__dismiss {
+  color: #737373;
+}
+
+html.dark .bn-step-editor {
+  color: #fafafa;
+}
+
+html.dark .bn-step-editor .overtype-wrapper .overtype-input {
+  caret-color: #fafafa !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper .overtype-preview {
+  color: #fafafa !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper textarea.overtype-input::placeholder {
+  color: #525252 !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper textarea.overtype-input::-webkit-input-placeholder {
+  color: #525252 !important;
+}
+
+html.dark .bn-step-custom-caret {
+  background: #fafafa;
+}
+
+html.dark .bn-step-link-tooltip {
+  background: #262626;
+  border-color: #404040;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+html.dark .bn-step-link-tooltip__url {
+  color: #737373;
+}
+
+html.dark .bn-snippet-dropdown__panel {
+  background: #262626;
+  border-color: #404040;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+html.dark .bn-snippet-dropdown__search {
+  border-color: #404040;
+}
+
+html.dark .bn-snippet-dropdown__search-icon {
+  color: #525252;
+}
+
+html.dark .bn-snippet-dropdown__search-input {
+  color: #fafafa;
+}
+
+html.dark .bn-snippet-dropdown__search-input::placeholder {
+  color: #525252;
+}
+
+html.dark .bn-snippet-dropdown__list {
+  border-top-color: #404040;
+}
+
+html.dark .bn-snippet-dropdown__chevron {
+  color: #525252;
+}
+
+html.dark .bn-step-image-preview__content {
+  background: #262626;
+}
+
 .testomatio-editor {
   font-family: "Inter", system-ui, -apple-system, sans-serif;
 }
@@ -324,6 +481,22 @@
   transform: rotate(90deg);
 }
 
+.bn-teststep__view-toggle[data-tooltip]::after {
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.bn-teststep__view-toggle--horizontal[data-tooltip]::after {
+  right: auto;
+  top: auto;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) rotate(-90deg);
+}
+
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -733,6 +906,41 @@
   background: var(--step-bg-button-hover);
 }
 
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #0a0a0a;
+  color: #fafafa;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 12px;
+  border-radius: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 1000;
+}
+
+[data-tooltip]:hover::after {
+  opacity: 1;
+  transition-delay: 300ms;
+}
+
+[data-tooltip]:active::after {
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
 .bn-step-editor {
   position: relative;
   border-radius: 0.6rem;
@@ -806,7 +1014,7 @@
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview {
-  color: var(--text-primary) !important;
+  color: #262626 !important;
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-link {

package/package.json

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

package/src/App.css

@@ -16,9 +16,8 @@
 
 .app__header {
   display: flex;
-  flex-wrap: wrap;
   justify-content: space-between;
-  align-items: center;
+  align-items: flex-start;
   gap: 1.5rem;
 }
 
@@ -26,6 +25,7 @@
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  flex-shrink: 0;
 }
 
 .app__header h1 {
@@ -67,6 +67,25 @@
   box-shadow: 0 12px 24px rgba(37, 99, 235, 0.18);
 }
 
+.app__dark-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border: 1px solid #e4e7ec;
+  border-radius: 0.75rem;
+  background: #fff;
+  color: #475467;
+  cursor: pointer;
+  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
+}
+
+.app__dark-toggle:hover {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
 
 .app__workspace {
   display: grid;
@@ -188,6 +207,80 @@
   color: rgba(15, 23, 42, 0.6);
 }
 
+/* Dark mode overrides — neutral gray + indigo accent palette from Figma */
+html.dark #root {
+  color: #fafafa;
+}
+
+html.dark .app__header h1 {
+  color: #fafafa;
+}
+
+html.dark .app__header p {
+  color: #a3a3a3;
+}
+
+html.dark .app__action {
+  background: linear-gradient(135deg, #6366f1, #4f46e5);
+  box-shadow: 0 10px 20px rgba(99, 102, 241, 0.25);
+}
+
+html.dark .app__action:hover {
+  box-shadow: 0 16px 32px rgba(99, 102, 241, 0.3);
+}
+
+html.dark .app__action--ghost {
+  background: rgba(99, 102, 241, 0.15);
+  color: #818cf8;
+}
+
+html.dark .app__action--ghost:hover {
+  box-shadow: 0 12px 24px rgba(99, 102, 241, 0.18);
+}
+
+html.dark .app__dark-toggle {
+  background: #262626;
+  border-color: #404040;
+  color: #d4d4d4;
+}
+
+html.dark .app__dark-toggle:hover {
+  background: #404040;
+  color: #fafafa;
+}
+
+html.dark .app__editor {
+  background: #171717;
+  border-color: #404040;
+  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.4);
+}
+
+html.dark .app__panel {
+  background: #171717;
+  box-shadow: inset 0 0 0 1px rgba(64, 64, 64, 0.5);
+}
+
+html.dark .app__panel--light {
+  background: #262626;
+  color: #fafafa;
+}
+
+html.dark .app__panel-text {
+  color: #a3a3a3;
+}
+
+html.dark .app__step-list li {
+  background: rgba(99, 102, 241, 0.12);
+}
+
+html.dark .app__step-meta {
+  color: #737373;
+}
+
+html.dark .app__copy-status {
+  color: #818cf8;
+}
+
 @media (max-width: 960px) {
   #root {
     padding: 1.5rem;

package/src/App.tsx

@@ -389,6 +389,11 @@ function App() {
   const [copyBlocksStatus, setCopyBlocksStatus] = useState<"idle" | "copied" | "failed">(
     "idle",
   );
+  const [darkMode, setDarkMode] = useState(false);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", darkMode);
+  }, [darkMode]);
 
   useEditorChange((editorInstance) => {
     try {
@@ -615,6 +620,18 @@ function App() {
           >
             Insert Snippet
           </button>
+          <button
+            type="button"
+            className="app__dark-toggle"
+            onClick={() => setDarkMode((v) => !v)}
+            title={darkMode ? "Switch to light mode" : "Switch to dark mode"}
+          >
+            {darkMode ? (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
+            ) : (
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="20" height="20"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
+            )}
+          </button>
         </div>
       </header>
 
@@ -622,7 +639,7 @@ function App() {
         <div className="app__editor">
           <BlockNoteView
             editor={editor}
-            theme="light"
+            theme={darkMode ? "dark" : "light"}
             slashMenu={false}
             className="markdown testomatio-editor"
           >

package/src/editor/blocks/step.tsx

@@ -279,6 +279,7 @@ export const stepBlock = createReactBlockSpec(
               <button
                 type="button"
                 className="bn-teststep__view-toggle bn-teststep__view-toggle--horizontal"
+                data-tooltip="Switch step view"
                 aria-label="Switch step view"
                 onClick={handleToggleView}
               >
@@ -308,6 +309,7 @@ export const stepBlock = createReactBlockSpec(
               <button
                 type="button"
                 className="bn-teststep__view-toggle"
+                data-tooltip="Switch step view"
                 aria-label="Switch step view"
                 onClick={handleToggleView}
               >
@@ -365,6 +367,7 @@ export const stepBlock = createReactBlockSpec(
                     <button
                       type="button"
                       className="bn-step-field__dismiss"
+                      data-tooltip="Hide step data"
                       onClick={handleHideData}
                       aria-label="Hide step data"
                     >
@@ -393,6 +396,7 @@ export const stepBlock = createReactBlockSpec(
                     <button
                       type="button"
                       className="bn-step-field__dismiss"
+                      data-tooltip="Hide expected result"
                       onClick={handleHideExpected}
                       tabIndex={-1}
                       aria-label="Hide expected result"

package/src/editor/blocks/stepField.tsx

@@ -1367,6 +1367,7 @@ export function StepField({
                 <button
                   type="button"
                   className="bn-step-toolbar__button"
+                  data-tooltip="Bold"
                   onMouseDown={(event) => {
                     event.preventDefault();
                     handleToolbarAction("toggleBold");
@@ -1381,6 +1382,7 @@ export function StepField({
                 <button
                   type="button"
                   className="bn-step-toolbar__button"
+                  data-tooltip="Italic"
                   onMouseDown={(event) => {
                     event.preventDefault();
                     handleToolbarAction("toggleItalic");
@@ -1398,6 +1400,7 @@ export function StepField({
               <button
                 type="button"
                 className="bn-step-toolbar__button"
+                data-tooltip="Insert image"
                 onMouseDown={(event) => {
                   event.preventDefault();
                   fileInputRef.current?.click();
@@ -1418,6 +1421,7 @@ export function StepField({
                   <button
                     type="button"
                     className="bn-step-toolbar__button"
+                    data-tooltip="Insert link"
                     onMouseDown={(event) => {
                       event.preventDefault();
                       if (showLinkPopover) {
@@ -1460,6 +1464,7 @@ export function StepField({
                 <button
                   type="button"
                   className="bn-step-toolbar__button"
+                  data-tooltip="Show suggestions"
                   onMouseDown={(event) => {
                     event.preventDefault();
                     setShowAllSuggestions(true);

package/src/editor/styles.css

@@ -95,6 +95,163 @@
   --status-blocked-bg: rgba(239, 68, 68, 0.12);
 }
 
+/* Dark mode variable overrides */
+html.dark {
+  --color-white: #171717;
+  --color-slate-900: #fafafa;
+  --color-slate-400: #737373;
+
+  --text-primary: #fafafa;
+  --text-muted: rgba(250, 250, 250, 0.5);
+
+  --border-light: rgba(255, 255, 255, 0.1);
+  --border-default: rgba(255, 255, 255, 0.12);
+  --shadow-subtle: rgba(0, 0, 0, 0.2);
+  --shadow-medium: rgba(0, 0, 0, 0.35);
+  --shadow-heavy: rgba(0, 0, 0, 0.6);
+  --overlay-dark: rgba(0, 0, 0, 0.8);
+
+  --bg-white: rgba(38, 38, 38, 0.85);
+  --bg-white-solid: rgba(38, 38, 38, 0.92);
+  --bg-white-opaque: rgba(38, 38, 38, 0.98);
+  --bg-muted: rgba(255, 255, 255, 0.05);
+
+  /* Step block colors */
+  --step-card-bg: #1a1a1a;
+  --step-card-border: #333333;
+  --step-card-shadow: rgba(0, 0, 0, 0.2);
+  --step-input-border: #404040;
+  --step-input-border-focus: #6366f1;
+  --step-input-shadow: rgba(99, 102, 241, 0.25);
+  --step-text: #e5e5e5;
+  --step-muted: #737373;
+  --step-action: #a3a3a3;
+  --step-bg-button: #262626;
+  --step-bg-button-hover: #333333;
+  --step-border-focus: rgba(99, 102, 241, 0.4);
+  --step-border-light: rgba(255, 255, 255, 0.1);
+  --step-bg-light: rgba(255, 255, 255, 0.06);
+  --step-shadow-hover: rgba(0, 0, 0, 0.2);
+
+  /* Step timeline */
+  --step-number-bg: #404040;
+  --step-number-text: #fafafa;
+  --step-label-color: #a3a3a3;
+  --snippet-dropdown-bg: #262626;
+  --snippet-content-bg: #1a1a1a;
+  --snippet-content-border: #333333;
+
+  /* Snippet block colors */
+  --snippet-border: rgba(16, 185, 129, 0.6);
+  --snippet-bg: rgba(16, 185, 129, 0.08);
+  --snippet-shadow: rgba(16, 185, 129, 0.12);
+  --snippet-border-light: rgba(16, 185, 129, 0.2);
+  --snippet-border-medium: rgba(16, 185, 129, 0.3);
+  --snippet-border-strong: rgba(16, 185, 129, 0.45);
+  --snippet-border-focus: rgba(16, 185, 129, 0.6);
+  --snippet-bg-light: rgba(16, 185, 129, 0.08);
+  --snippet-bg-hover: rgba(16, 185, 129, 0.14);
+  --snippet-focus-ring: rgba(16, 185, 129, 0.15);
+
+  /* Status colors */
+  --status-default-bg: rgba(148, 163, 184, 0.08);
+  --status-ready-bg: rgba(34, 197, 94, 0.08);
+  --status-blocked-bg: rgba(239, 68, 68, 0.08);
+}
+
+/* Dark mode hardcoded color overrides */
+html.dark .bn-step-action-btn {
+  color: #a3a3a3;
+}
+
+html.dark .bn-step-toolbar__button {
+  color: #d4d4d4;
+}
+
+html.dark .bn-step-toolbar__divider {
+  background: #404040;
+}
+
+html.dark .bn-teststep__view-toggle svg {
+  color: #d4d4d4;
+}
+
+html.dark [data-tooltip]::after {
+  background: #262626;
+}
+
+html.dark .bn-step-field__dismiss {
+  color: #737373;
+}
+
+html.dark .bn-step-editor {
+  color: #fafafa;
+}
+
+html.dark .bn-step-editor .overtype-wrapper .overtype-input {
+  caret-color: #fafafa !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper .overtype-preview {
+  color: #fafafa !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper textarea.overtype-input::placeholder {
+  color: #525252 !important;
+}
+
+html.dark .bn-step-editor .overtype-wrapper textarea.overtype-input::-webkit-input-placeholder {
+  color: #525252 !important;
+}
+
+html.dark .bn-step-custom-caret {
+  background: #fafafa;
+}
+
+html.dark .bn-step-link-tooltip {
+  background: #262626;
+  border-color: #404040;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+html.dark .bn-step-link-tooltip__url {
+  color: #737373;
+}
+
+html.dark .bn-snippet-dropdown__panel {
+  background: #262626;
+  border-color: #404040;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+html.dark .bn-snippet-dropdown__search {
+  border-color: #404040;
+}
+
+html.dark .bn-snippet-dropdown__search-icon {
+  color: #525252;
+}
+
+html.dark .bn-snippet-dropdown__search-input {
+  color: #fafafa;
+}
+
+html.dark .bn-snippet-dropdown__search-input::placeholder {
+  color: #525252;
+}
+
+html.dark .bn-snippet-dropdown__list {
+  border-top-color: #404040;
+}
+
+html.dark .bn-snippet-dropdown__chevron {
+  color: #525252;
+}
+
+html.dark .bn-step-image-preview__content {
+  background: #262626;
+}
+
 .testomatio-editor {
   font-family: "Inter", system-ui, -apple-system, sans-serif;
 }
@@ -324,6 +481,22 @@
   transform: rotate(90deg);
 }
 
+.bn-teststep__view-toggle[data-tooltip]::after {
+  bottom: auto;
+  left: auto;
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.bn-teststep__view-toggle--horizontal[data-tooltip]::after {
+  right: auto;
+  top: auto;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) rotate(-90deg);
+}
+
 .bn-teststep__horizontal-fields {
   display: flex;
   gap: 16px;
@@ -733,6 +906,41 @@
   background: var(--step-bg-button-hover);
 }
 
+[data-tooltip] {
+  position: relative;
+}
+
+[data-tooltip]::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: #0a0a0a;
+  color: #fafafa;
+  font-family: Inter, sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 4px 12px;
+  border-radius: 8px;
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 1000;
+}
+
+[data-tooltip]:hover::after {
+  opacity: 1;
+  transition-delay: 300ms;
+}
+
+[data-tooltip]:active::after {
+  opacity: 0;
+  transition-delay: 0ms;
+}
+
 .bn-step-editor {
   position: relative;
   border-radius: 0.6rem;
@@ -806,7 +1014,7 @@
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview {
-  color: var(--text-primary) !important;
+  color: #262626 !important;
 }
 
 .bn-step-editor .overtype-wrapper .overtype-preview a.step-preview-link {

package/src/index.css

@@ -9,6 +9,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+html.dark {
+  color: #fafafa;
+  background-color: #0a0a0a;
+}
+
 a {
   color: inherit;
   text-decoration: none;
@@ -24,6 +29,10 @@ body {
   min-height: 100vh;
 }
 
+html.dark body {
+  background-color: #0a0a0a;
+}
+
 button {
   font-family: inherit;
 }