testomatio-editor-blocks 0.1.0

package/package/editor/customSchema.js

@@ -0,0 +1,379 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultBlockSpecs, defaultProps } from "@blocknote/core";
+import { BlockNoteSchema } from "@blocknote/core";
+import { createReactBlockSpec } from "@blocknote/react";
+import { useCallback, useEffect, useRef, useState } from "react";
+function escapeHtml(text) {
+    return text
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/\"/g, "&quot;")
+        .replace(/'/g, "&#39;");
+}
+const IMAGE_MARKDOWN_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/g;
+function markdownToHtml(markdown) {
+    if (!markdown) {
+        return "";
+    }
+    const lines = markdown.split(/\n/);
+    const htmlLines = lines.map((line) => {
+        const inline = parseInlineMarkdown(line);
+        const html = inlineToHtml(inline);
+        if (!html) {
+            return html;
+        }
+        return html.replace(IMAGE_MARKDOWN_REGEX, (_match, alt = "", src = "") => `<img src="${escapeHtml(src)}" alt="${escapeHtml(alt)}" class="bn-inline-image" contenteditable="false" draggable="false" />`);
+    });
+    return htmlLines.join("<br />");
+}
+function parseInlineMarkdown(text) {
+    if (!text) {
+        return [];
+    }
+    const normalized = text.replace(/\\([*_`~])/g, "\uE000$1");
+    const rawSegments = normalized
+        .split(/(\*\*[^*]+\*\*|__[^_]+__|\*[^*]+\*|_[^_]+_|<u>[^<]+<\/u>)/)
+        .filter(Boolean);
+    return rawSegments.map((segment) => {
+        const baseStyles = { bold: false, italic: false, underline: false };
+        if (/^\*\*(.+)\*\*$/.test(segment) || /^__(.+)__$/.test(segment)) {
+            const content = segment.slice(2, -2);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, bold: true },
+            };
+        }
+        if (/^\*(.+)\*$/.test(segment) || /^_(.+)_$/.test(segment)) {
+            const content = segment.slice(1, -1);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, italic: true },
+            };
+        }
+        if (/^<u>(.+)<\/u>$/.test(segment)) {
+            const content = segment.slice(3, -4);
+            return {
+                text: restoreEscapes(content),
+                styles: { ...baseStyles, underline: true },
+            };
+        }
+        return {
+            text: restoreEscapes(segment),
+            styles: { ...baseStyles },
+        };
+    });
+}
+function inlineToHtml(inline) {
+    return inline
+        .map(({ text, styles }) => {
+        let html = escapeHtml(text);
+        if (styles.bold) {
+            html = `<strong>${html}</strong>`;
+        }
+        if (styles.italic) {
+            html = `<em>${html}</em>`;
+        }
+        if (styles.underline) {
+            html = `<u>${html}</u>`;
+        }
+        return html;
+    })
+        .join("");
+}
+function restoreEscapes(text) {
+    return text.replace(/\uE000/g, "\\");
+}
+function htmlToMarkdown(html) {
+    if (typeof document === "undefined") {
+        return fallbackHtmlToMarkdown(html);
+    }
+    const temp = document.createElement("div");
+    temp.innerHTML = html;
+    const traverse = (node) => {
+        var _a, _b, _c;
+        if (node.nodeType === Node.TEXT_NODE) {
+            const text = (_a = node.textContent) !== null && _a !== void 0 ? _a : "";
+            return escapeMarkdownText(text);
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE) {
+            return "";
+        }
+        const element = node;
+        const children = Array.from(element.childNodes)
+            .map(traverse)
+            .join("");
+        switch (element.tagName.toLowerCase()) {
+            case "strong":
+            case "b":
+                return children ? `**${children}**` : children;
+            case "em":
+            case "i":
+                return children ? `*${children}*` : children;
+            case "u":
+                return children ? `<u>${children}</u>` : children;
+            case "br":
+                return "\n";
+            case "div":
+            case "p":
+                return children + "\n";
+            case "img": {
+                const src = (_b = element.getAttribute("src")) !== null && _b !== void 0 ? _b : "";
+                const alt = (_c = element.getAttribute("alt")) !== null && _c !== void 0 ? _c : "";
+                return `![${alt}](${src})`;
+            }
+            default:
+                return children;
+        }
+    };
+    const markdown = Array.from(temp.childNodes).map(traverse).join("");
+    return markdown.replace(/\n{3,}/g, "\n\n").trim();
+}
+function fallbackHtmlToMarkdown(html) {
+    if (!html) {
+        return "";
+    }
+    let result = html;
+    result = result.replace(/<img[^>]*>/gi, (match) => {
+        var _a, _b, _c, _d;
+        const src = (_b = (_a = match.match(/src="([^"]*)"/i)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : "";
+        const alt = (_d = (_c = match.match(/alt="([^"]*)"/i)) === null || _c === void 0 ? void 0 : _c[1]) !== null && _d !== void 0 ? _d : "";
+        return `![${alt}](${src})`;
+    });
+    result = result
+        .replace(/<br\s*\/?>/gi, "\n")
+        .replace(/<\/?(div|p)>/gi, "\n")
+        .replace(/<strong>(.*?)<\/strong>/gis, (_m, content) => `**${content}**`)
+        .replace(/<(em|i)>(.*?)<\/(em|i)>/gis, (_m, _tag, content) => `*${content}*`)
+        .replace(/<span[^>]*>/gi, "")
+        .replace(/<\/span>/gi, "")
+        .replace(/<u>(.*?)<\/u>/gis, (_m, content) => `<u>${content}</u>`);
+    result = result.replace(/<\/?[^>]+>/g, "");
+    return result
+        .split("\n")
+        .map((line) => line.trimEnd())
+        .join("\n")
+        .replace(/\n{3,}/g, "\n\n")
+        .trim();
+}
+const MARKDOWN_ESCAPE_REGEX = /([*_\\])/g;
+function escapeMarkdownText(text) {
+    return text.replace(MARKDOWN_ESCAPE_REGEX, "\\$1");
+}
+function StepField({ label, value, placeholder, onChange, autoFocus, multiline = false }) {
+    const editorRef = useRef(null);
+    const [isFocused, setIsFocused] = useState(false);
+    const autoFocusRef = useRef(false);
+    useEffect(() => {
+        const element = editorRef.current;
+        if (!element || isFocused) {
+            return;
+        }
+        if (value.trim().length === 0) {
+            element.innerHTML = "";
+        }
+        else {
+            element.innerHTML = markdownToHtml(value);
+        }
+    }, [value, isFocused]);
+    const syncValue = useCallback(() => {
+        const element = editorRef.current;
+        if (!element) {
+            return;
+        }
+        const markdown = htmlToMarkdown(element.innerHTML);
+        if (markdown !== value) {
+            onChange(markdown);
+        }
+        if (!markdown && element.innerHTML !== "") {
+            element.innerHTML = "";
+        }
+    }, [onChange, value]);
+    useEffect(() => {
+        if (autoFocus && !autoFocusRef.current && editorRef.current) {
+            editorRef.current.focus();
+            setIsFocused(true);
+            autoFocusRef.current = true;
+        }
+    }, [autoFocus]);
+    const applyFormat = useCallback((command) => {
+        document.execCommand(command);
+        syncValue();
+    }, [syncValue]);
+    const handlePaste = useCallback((event) => {
+        var _a, _b;
+        event.preventDefault();
+        const text = (_b = (_a = event.clipboardData) === null || _a === void 0 ? void 0 : _a.getData("text/plain")) !== null && _b !== void 0 ? _b : "";
+        document.execCommand("insertText", false, text);
+        syncValue();
+    }, [syncValue]);
+    return (_jsxs("div", { className: "bn-step-field", children: [_jsxs("div", { className: "bn-step-field__top", children: [_jsx("span", { className: "bn-step-field__label", children: label }), _jsxs("div", { className: "bn-step-toolbar", "aria-label": `${label} formatting`, children: [_jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    var _a;
+                                    event.preventDefault();
+                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    applyFormat("bold");
+                                }, "aria-label": "Bold", children: "B" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    var _a;
+                                    event.preventDefault();
+                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    applyFormat("italic");
+                                }, "aria-label": "Italic", children: "I" }), _jsx("button", { type: "button", className: "bn-step-toolbar__button", onMouseDown: (event) => {
+                                    var _a;
+                                    event.preventDefault();
+                                    (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                                    applyFormat("underline");
+                                }, "aria-label": "Underline", children: "U" })] })] }), _jsx("div", { ref: editorRef, className: "bn-step-editor", contentEditable: true, suppressContentEditableWarning: true, "data-placeholder": placeholder, "data-multiline": multiline ? "true" : "false", onFocus: () => setIsFocused(true), onBlur: () => {
+                    setIsFocused(false);
+                    syncValue();
+                }, onInput: syncValue, onPaste: handlePaste, onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        event.preventDefault();
+                        if (multiline && event.shiftKey) {
+                            document.execCommand("insertLineBreak");
+                            document.execCommand("insertLineBreak");
+                        }
+                        else {
+                            document.execCommand("insertLineBreak");
+                        }
+                        syncValue();
+                    }
+                } })] }));
+}
+const statusOptions = ["draft", "ready", "blocked"];
+const statusLabels = {
+    draft: "Draft",
+    ready: "Ready",
+    blocked: "Blocked",
+};
+const statusClassNames = {
+    draft: "bn-testcase--draft",
+    ready: "bn-testcase--ready",
+    blocked: "bn-testcase--blocked",
+};
+const testStepBlock = createReactBlockSpec({
+    type: "testStep",
+    content: "none",
+    propSchema: {
+        stepTitle: {
+            default: "",
+        },
+        stepData: {
+            default: "",
+        },
+        expectedResult: {
+            default: "",
+        },
+    },
+}, {
+    render: ({ block, editor }) => {
+        const stepTitle = block.props.stepTitle || "";
+        const stepData = block.props.stepData || "";
+        const expectedResult = block.props.expectedResult || "";
+        const showExpectedField = stepTitle.trim().length > 0 || stepData.trim().length > 0 || expectedResult.trim().length > 0;
+        const [isDataVisible, setIsDataVisible] = useState(() => stepData.trim().length > 0);
+        const [shouldFocusDataField, setShouldFocusDataField] = useState(false);
+        useEffect(() => {
+            if (stepData.trim().length > 0 && !isDataVisible) {
+                setIsDataVisible(true);
+            }
+        }, [isDataVisible, stepData]);
+        useEffect(() => {
+            if (shouldFocusDataField && isDataVisible) {
+                const timer = setTimeout(() => setShouldFocusDataField(false), 0);
+                return () => clearTimeout(timer);
+            }
+            return undefined;
+        }, [isDataVisible, shouldFocusDataField]);
+        const handleStepTitleChange = useCallback((next) => {
+            if (next === stepTitle) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    stepTitle: next,
+                },
+            });
+        }, [editor, block.id, stepTitle]);
+        const handleStepDataChange = useCallback((next) => {
+            if (next === stepData) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    stepData: next,
+                },
+            });
+        }, [editor, block.id, stepData]);
+        const handleShowDataField = useCallback(() => {
+            setIsDataVisible(true);
+            setShouldFocusDataField(true);
+        }, []);
+        const handleExpectedChange = useCallback((next) => {
+            if (next === expectedResult) {
+                return;
+            }
+            editor.updateBlock(block.id, {
+                props: {
+                    expectedResult: next,
+                },
+            });
+        }, [editor, block.id, expectedResult]);
+        return (_jsxs("div", { className: "bn-teststep", children: [_jsx(StepField, { label: "Step Title", value: stepTitle, placeholder: "Describe the action to perform", onChange: handleStepTitleChange, autoFocus: stepTitle.length === 0 }), !isDataVisible && (_jsx("button", { type: "button", className: "bn-teststep__toggle", onClick: handleShowDataField, "aria-expanded": "false", children: "[+ Data]" })), isDataVisible && (_jsx(StepField, { label: "Step Data", value: stepData, placeholder: "Provide additional data about the step", onChange: handleStepDataChange, autoFocus: shouldFocusDataField, multiline: true })), showExpectedField && (_jsx(StepField, { label: "Expected Result", value: expectedResult, placeholder: "What should happen?", onChange: handleExpectedChange, multiline: true }))] }));
+    },
+});
+const testCaseBlock = createReactBlockSpec({
+    type: "testCase",
+    content: "inline",
+    propSchema: {
+        textAlignment: defaultProps.textAlignment,
+        textColor: defaultProps.textColor,
+        backgroundColor: defaultProps.backgroundColor,
+        status: {
+            default: "draft",
+            values: Array.from(statusOptions),
+        },
+        reference: {
+            default: "",
+        },
+    },
+}, {
+    render: ({ block, contentRef, editor }) => {
+        const status = block.props.status;
+        const handleStatusChange = (event) => {
+            const nextStatus = event.target.value;
+            editor.updateBlock(block.id, {
+                props: {
+                    status: nextStatus,
+                },
+            });
+        };
+        const handleReferenceChange = (event) => {
+            editor.updateBlock(block.id, {
+                props: {
+                    reference: event.target.value,
+                },
+            });
+        };
+        const style = {
+            textAlign: block.props.textAlignment,
+            color: block.props.textColor === "default"
+                ? undefined
+                : block.props.textColor,
+            backgroundColor: block.props.backgroundColor === "default"
+                ? undefined
+                : block.props.backgroundColor,
+        };
+        return (_jsxs("div", { className: "bn-testcase " + statusClassNames[status], "data-reference": block.props.reference || undefined, style: style, children: [_jsxs("div", { className: "bn-testcase__header", children: [_jsxs("div", { className: "bn-testcase__meta", children: [_jsx("span", { className: "bn-testcase__label", children: "Test Case" }), _jsx("input", { className: "bn-testcase__reference", placeholder: "Reference ID", value: block.props.reference, onChange: handleReferenceChange })] }), _jsxs("label", { className: "bn-testcase__status", children: [_jsx("span", { children: "Status:" }), _jsx("select", { value: status, onChange: handleStatusChange, children: statusOptions.map((option) => (_jsx("option", { value: option, children: statusLabels[option] }, option))) })] })] }), _jsx("div", { className: "bn-testcase__body", ref: contentRef })] }));
+    },
+});
+export const customSchema = BlockNoteSchema.create({
+    blockSpecs: {
+        ...defaultBlockSpecs,
+        testCase: testCaseBlock,
+        testStep: testStepBlock,
+    },
+});
+export const __markdownTestUtils = {
+    markdownToHtml,
+    htmlToMarkdown,
+};

package/package/index.d.ts

@@ -0,0 +1,3 @@
+export { customSchema, type CustomSchema, type CustomBlock, type CustomEditor, } from "./editor/customSchema";
+export { blocksToMarkdown, markdownToBlocks, type CustomEditorBlock, type CustomPartialBlock, } from "./editor/customMarkdownConverter";
+export declare const testomatioEditorClassName = "markdown testomatio-editor";

package/package/index.js

@@ -0,0 +1,3 @@
+export { customSchema, } from "./editor/customSchema";
+export { blocksToMarkdown, markdownToBlocks, } from "./editor/customMarkdownConverter";
+export const testomatioEditorClassName = "markdown testomatio-editor";

package/package/styles.css

@@ -0,0 +1,238 @@
+.testomatio-editor {
+  font-family: "Inter", system-ui, -apple-system, sans-serif;
+}
+
+.bn-testcase {
+  --status-color: #94a3b8;
+  position: relative;
+  border-radius: 1rem;
+  border-left: 6px solid var(--status-color);
+  padding: 1rem 1.25rem;
+  background: rgba(148, 163, 184, 0.12);
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.bn-testcase::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.05);
+}
+
+.bn-testcase__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.bn-testcase__meta {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bn-testcase__label {
+  font-size: 0.85rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #0f172a;
+}
+
+.bn-testcase__reference {
+  padding: 0.35rem 0.6rem;
+  border-radius: 0.5rem;
+  border: 1px solid rgba(15, 23, 42, 0.1);
+  background: rgba(255, 255, 255, 0.85);
+  font-size: 0.85rem;
+  min-width: 8rem;
+}
+
+.bn-testcase__reference:focus-visible {
+  outline: 2px solid rgba(37, 99, 235, 0.4);
+  outline-offset: 2px;
+}
+
+.bn-testcase__status {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  font-size: 0.85rem;
+  color: #0f172a;
+  font-weight: 600;
+}
+
+.bn-testcase__status select {
+  border-radius: 0.5rem;
+  border: 1px solid rgba(15, 23, 42, 0.12);
+  padding: 0.35rem 0.6rem;
+  background: rgba(255, 255, 255, 0.95);
+  font-size: 0.85rem;
+  font-weight: 600;
+  color: inherit;
+}
+
+.bn-testcase__body {
+  min-height: 2.5rem;
+}
+
+.bn-testcase--ready {
+  --status-color: #22c55e;
+  background: rgba(34, 197, 94, 0.12);
+}
+
+.bn-testcase--blocked {
+  --status-color: #ef4444;
+  background: rgba(239, 68, 68, 0.12);
+}
+
+.bn-teststep {
+  border-radius: 0.85rem;
+  border-left: 5px solid rgba(59, 130, 246, 0.65);
+  background: rgba(59, 130, 246, 0.12);
+  padding: 0.85rem 1.1rem 1rem;
+  display: grid;
+  gap: 0.75rem;
+  position: relative;
+  width: 100%;
+}
+
+.bn-teststep::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.08);
+}
+
+.bn-teststep__toggle {
+  align-self: flex-start;
+  padding: 0.35rem 0.6rem;
+  border-radius: 0.5rem;
+  border: 1px dashed rgba(37, 99, 235, 0.45);
+  background: rgba(59, 130, 246, 0.1);
+  color: #1d4ed8;
+  font-size: 0.75rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.bn-teststep__toggle:hover {
+  background: rgba(59, 130, 246, 0.18);
+  border-color: rgba(37, 99, 235, 0.55);
+  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.2);
+}
+
+.bn-step-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+}
+
+.bn-step-field__top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bn-step-field__label {
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  font-weight: 700;
+  color: #1d4ed8;
+}
+
+.bn-step-toolbar {
+  display: flex;
+  gap: 0.35rem;
+}
+
+.bn-step-toolbar__button {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 0.4rem;
+  border: 1px solid rgba(37, 99, 235, 0.35);
+  background: rgba(255, 255, 255, 0.85);
+  color: #1d4ed8;
+  font-weight: 700;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+.bn-step-toolbar__button:hover {
+  background: rgba(37, 99, 235, 0.12);
+  border-color: rgba(37, 99, 235, 0.55);
+}
+
+.bn-step-editor {
+  border-radius: 0.6rem;
+  border: 1px solid rgba(37, 99, 235, 0.25);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.95rem;
+  background: rgba(255, 255, 255, 0.92);
+  transition:
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+  min-height: 2.5rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.bn-step-editor[data-multiline="true"] {
+  min-height: 4rem;
+}
+
+.bn-step-editor:focus-visible {
+  outline: none;
+  border-color: rgba(37, 99, 235, 0.7);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+.bn-step-editor:empty::before {
+  content: attr(data-placeholder);
+  color: rgba(15, 23, 42, 0.45);
+  pointer-events: none;
+}
+
+.bn-inline-image {
+  display: block;
+  max-width: 100%;
+  border-radius: 0.65rem;
+  margin: 0.5rem 0;
+  pointer-events: none;
+}
+
+.bn-suggestion-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  font-size: 14px;
+}
+
+.bn-testcase--draft {
+  --status-color: #94a3b8;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "testomatio-editor-blocks",
+  "version": "0.1.0",
+  "description": "Custom BlockNote schema, markdown conversion helpers, and UI for Testomatio-style test cases and steps.",
+  "type": "module",
+  "main": "./package/index.js",
+  "module": "./package/index.js",
+  "types": "./package/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./package/index.d.ts",
+      "import": "./package/index.js"
+    },
+    "./styles.css": "./package/styles.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "package",
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && npm run build:package && vite build",
+    "build:package": "node scripts/build-package.mjs",
+    "lint": "eslint .",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "blocknote",
+    "editor",
+    "markdown",
+    "testcases",
+    "test-automation"
+  ],
+  "peerDependencies": {
+    "@blocknote/core": "^0.31.3",
+    "@blocknote/react": "^0.31.3",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@blocknote/core": "^0.31.3",
+    "@blocknote/mantine": "^0.31.3",
+    "@blocknote/react": "^0.31.3",
+    "@eslint/js": "^9.36.0",
+    "@types/node": "^24.6.0",
+    "@types/react": "^19.1.16",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.4",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.22",
+    "globals": "^16.4.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.45.0",
+    "vite": "^7.1.7",
+    "vitest": "^3.2.4"
+  }
+}