@surrealdb/ui 1.2.11 → 1.2.13

package/package.json

@@ -1,117 +1,121 @@
 {
-    "name": "@surrealdb/ui",
-    "version": "1.2.11",
-    "type": "module",
-    "sideEffects": false,
-    "exports": {
-        ".": {
-            "types": "./dist/index.d.ts",
-            "import": "./dist/ui.js"
-        },
-        "./icons": {
-            "types": "./dist/icons.d.ts",
-            "import": "./dist/icons.js"
-        },
-        "./styles.css": {
-            "import": "./dist/ui.css"
-        },
-        "./fonts.css": {
-            "import": "./dist/fonts.css"
-        },
-        "./mixins": {
-            "import": "./res/_mixins.scss"
-        }
-    },
-    "scripts": {
-        "build": "vite build",
-        "storybook:dev": "storybook dev -p 6006 --ci",
-        "storybook:build": "storybook build",
-        "qc": "biome check .",
-        "qa": "biome check . --write",
-        "qau": "biome check . --write --unsafe",
-        "qts": "tsc --noEmit",
-        "qtsw": "tsc --noEmit --watch",
-        "test": "vitest run",
-        "test:unit": "vitest run --project=unit",
-        "test:e2e": "vitest run --project=e2e",
-        "test:storybook": "vitest run --project=storybook",
-        "test:watch": "vitest",
-        "icons": "bun run tools/icon-parser.ts"
-    },
-    "dependencies": {
-        "@codemirror/lang-markdown": "^6.5.0",
-        "@codemirror/legacy-modes": "^6.4.2",
-        "@fontsource-variable/geist": "^5.2.9",
-        "@fontsource-variable/jetbrains-mono": "^5.2.8",
-        "@lezer/common": "^1.2.1",
-        "@lezer/go": "^1.0.0",
-        "@lezer/highlight": "^1.2.1",
-        "@lezer/html": "^1.3.10",
-        "@lezer/javascript": "^1.4.17",
-        "@lezer/json": "^1.0.3",
-        "@lezer/markdown": "^1.6.3",
-        "@lezer/php": "^1.0.2",
-        "@lezer/python": "^1.1.14",
-        "@lezer/rust": "^1.0.2",
-        "@lezer/yaml": "^1.0.3",
-        "@replit/codemirror-indentation-markers": "^6.5.3",
-        "@surrealdb/lezer": "1.0.0-beta.23",
-        "acorn": "^8.16.0",
-        "github-slugger": "^2.0.0",
-        "vite-tsconfig-paths": "^6.0.5"
-    },
-    "devDependencies": {
-        "@biomejs/biome": "2.4.12",
-        "@chromatic-com/storybook": "^4.1.3",
-        "@laynezh/vite-plugin-lib-assets": "^2.1.3",
-        "@storybook/addon-a11y": "^10.1.11",
-        "@storybook/addon-docs": "^10.1.11",
-        "@storybook/addon-onboarding": "^10.1.11",
-        "@storybook/addon-vitest": "^10.1.11",
-        "@storybook/react-vite": "^10.1.11",
-        "@surrealdb/codemirror": "^1.0.3",
-        "@types/bun": "^1.3.6",
-        "@types/js-yaml": "^4.0.9",
-        "@types/jsdom": "^27.0.0",
-        "@types/react": "^19.2.2",
-        "@types/react-dom": "^19.2.3",
-        "@vitejs/plugin-react": "^5.0.2",
-        "@vitest/browser-playwright": "^4.0.16",
-        "@vitest/coverage-v8": "^4.0.16",
-        "jsdom": "^28.0.0",
-        "mermaid": "^11.14.0",
-        "playwright": "^1.57.0",
-        "sass-embedded": "^1.92.1",
-        "slate": "^0.120.0",
-        "slate-dom": "^0.119.0",
-        "slate-react": "^0.120.0",
-        "storybook": "^10.1.11",
-        "svgo": "^4.0.0",
-        "typescript": "^5",
-        "vite": "^7.1.5",
-        "vite-plugin-dts": "^4.5.4",
-        "vitest": "^4.0.16"
-    },
-    "peerDependencies": {
-        "@codemirror/autocomplete": "^6.13.0",
-        "@codemirror/commands": "^6.3.3",
-        "@codemirror/language": "^6.10.1",
-        "@codemirror/legacy-modes": "^6.4.2",
-        "@codemirror/lint": "^6.5.0",
-        "@codemirror/search": "^6.5.6",
-        "@codemirror/state": "^6.4.1",
-        "@codemirror/view": "^6.24.1",
-        "@mantine/core": "^9.2.2",
-        "@mantine/hooks": "^9.2.2",
-        "mermaid": "^11",
-        "react": "^19",
-        "slate": "^0.120.0",
-        "slate-dom": "^0.119.0",
-        "slate-react": "^0.120.0"
-    },
-    "peerDependenciesMeta": {
-        "mermaid": {
-            "optional": true
-        }
-    }
+	"name": "@surrealdb/ui",
+	"version": "1.2.13",
+	"type": "module",
+	"sideEffects": false,
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/ui.js"
+		},
+		"./icons": {
+			"types": "./dist/icons.d.ts",
+			"import": "./dist/icons.js"
+		},
+		"./styles.css": {
+			"import": "./dist/ui.css"
+		},
+		"./fonts.css": {
+			"import": "./dist/fonts.css"
+		},
+		"./mixins": {
+			"import": "./res/_mixins.scss"
+		}
+	},
+	"scripts": {
+		"build": "vite build",
+		"storybook:dev": "storybook dev -p 6006 --ci",
+		"storybook:build": "storybook build",
+		"qc": "oxlint && biome lint --only=correctness/useExhaustiveDependencies . && oxfmt --check .",
+		"qa": "oxlint --fix && biome lint --only=correctness/useExhaustiveDependencies --write . && oxfmt .",
+		"qau": "oxlint --fix --fix-suggestions && biome lint --only=correctness/useExhaustiveDependencies --write --unsafe . && oxfmt .",
+		"qts": "tsc --noEmit",
+		"qtsw": "tsc --noEmit --watch",
+		"test": "vitest run",
+		"test:unit": "vitest run --project=unit",
+		"test:e2e": "vitest run --project=e2e",
+		"test:storybook": "vitest run --project=storybook",
+		"test:watch": "vitest",
+		"icons": "bun run tools/icon-parser.ts"
+	},
+	"dependencies": {
+		"@codemirror/lang-markdown": "^6.5.0",
+		"@codemirror/legacy-modes": "^6.4.2",
+		"@fontsource-variable/geist": "^5.2.9",
+		"@fontsource-variable/jetbrains-mono": "^5.2.8",
+		"@lezer/common": "^1.2.1",
+		"@lezer/go": "^1.0.0",
+		"@lezer/highlight": "^1.2.1",
+		"@lezer/html": "^1.3.10",
+		"@lezer/javascript": "^1.4.17",
+		"@lezer/json": "^1.0.3",
+		"@lezer/markdown": "^1.6.3",
+		"@lezer/php": "^1.0.2",
+		"@lezer/python": "^1.1.14",
+		"@lezer/rust": "^1.0.2",
+		"@lezer/yaml": "^1.0.3",
+		"@replit/codemirror-indentation-markers": "^6.5.3",
+		"@surrealdb/lezer": "1.0.0-beta.23",
+		"acorn": "^8.16.0",
+		"github-slugger": "^2.0.0",
+		"react-reverse-portal": "^2.3.0",
+		"vite-tsconfig-paths": "^6.0.5"
+	},
+	"devDependencies": {
+		"@biomejs/biome": "2.5.3",
+		"@chromatic-com/storybook": "^4.1.3",
+		"@laynezh/vite-plugin-lib-assets": "^2.1.3",
+		"@storybook/addon-a11y": "^10.1.11",
+		"@storybook/addon-docs": "^10.1.11",
+		"@storybook/addon-onboarding": "^10.1.11",
+		"@storybook/addon-vitest": "^10.1.11",
+		"@storybook/react-vite": "^10.1.11",
+		"@tanstack/react-virtual": "^3.13.12",
+		"@surrealdb/codemirror": "^1.0.3",
+		"@types/bun": "^1.3.6",
+		"@types/js-yaml": "^4.0.9",
+		"@types/jsdom": "^27.0.0",
+		"@types/react": "^19.2.2",
+		"@types/react-dom": "^19.2.3",
+		"@vitejs/plugin-react": "^5.0.2",
+		"@vitest/browser-playwright": "^4.0.16",
+		"@vitest/coverage-v8": "^4.0.16",
+		"jsdom": "^28.0.0",
+		"mermaid": "^11.14.0",
+		"playwright": "^1.57.0",
+		"sass-embedded": "^1.92.1",
+		"oxfmt": "0.58.0",
+		"oxlint": "1.73.0",
+		"slate": "^0.120.0",
+		"slate-dom": "^0.119.0",
+		"slate-react": "^0.120.0",
+		"storybook": "^10.1.11",
+		"svgo": "^4.0.0",
+		"typescript": "^5",
+		"vite": "^7.1.5",
+		"vite-plugin-dts": "^4.5.4",
+		"vitest": "^4.0.16"
+	},
+	"peerDependencies": {
+		"@codemirror/autocomplete": "^6.13.0",
+		"@codemirror/commands": "^6.3.3",
+		"@codemirror/language": "^6.10.1",
+		"@codemirror/legacy-modes": "^6.4.2",
+		"@codemirror/lint": "^6.5.0",
+		"@codemirror/search": "^6.5.6",
+		"@codemirror/state": "^6.4.1",
+		"@codemirror/view": "^6.24.1",
+		"@mantine/core": "^9.2.2",
+		"@mantine/hooks": "^9.2.2",
+		"mermaid": "^11",
+		"react": "^19",
+		"slate": "^0.120.0",
+		"slate-dom": "^0.119.0",
+		"slate-react": "^0.120.0"
+	},
+	"peerDependenciesMeta": {
+		"mermaid": {
+			"optional": true
+		}
+	}
 }

package/res/_mixins.scss

@@ -71,17 +71,21 @@
 }
 
 @mixin edge-shadow-x($begin: 0px, $end: 0px) {
-	mask: linear-gradient(to right,
-			transparent,
-			black $begin,
-			black calc(100% - $end),
-			transparent);
+	mask: linear-gradient(
+		to right,
+		transparent,
+		black $begin,
+		black calc(100% - $end),
+		transparent
+	);
 }
 
 @mixin edge-shadow-y($begin: 0px, $end: 0px) {
-	mask: linear-gradient(to bottom,
-			transparent,
-			black $begin,
-			black calc(100% - $end),
-			transparent);
-}
+	mask: linear-gradient(
+		to bottom,
+		transparent,
+		black $begin,
+		black calc(100% - $end),
+		transparent
+	);
+}

package/tests/_setup/e2e-helpers.tsx

@@ -5,17 +5,17 @@ import { afterEach } from "vitest";
 import { page, userEvent } from "vitest/browser";
 
 interface MountedStory {
-    container: HTMLElement;
-    unmount: () => void;
+	container: HTMLElement;
+	unmount: () => void;
 }
 
 const activeMounts = new Set<MountedStory>();
 
 afterEach(() => {
-    for (const mount of activeMounts) {
-        mount.unmount();
-    }
-    activeMounts.clear();
+	for (const mount of activeMounts) {
+		mount.unmount();
+	}
+	activeMounts.clear();
 });
 
 /**
@@ -24,30 +24,30 @@ afterEach(() => {
  * each test automatically; tests can still call `unmount()` early.
  */
 export function mountStory(node: ReactElement | ComponentType): MountedStory {
-    const container = document.createElement("div");
-    container.dataset.testRoot = "true";
-    document.body.appendChild(container);
-
-    let root: Root | null = createRoot(container);
-    const element = isReactElement(node) ? node : createElement(node);
-    root.render(element);
-
-    const mount: MountedStory = {
-        container,
-        unmount: () => {
-            if (!root) return;
-            root.unmount();
-            root = null;
-            container.remove();
-            activeMounts.delete(mount);
-        },
-    };
-    activeMounts.add(mount);
-    return mount;
+	const container = document.createElement("div");
+	container.dataset.testRoot = "true";
+	document.body.appendChild(container);
+
+	let root: Root | null = createRoot(container);
+	const element = isReactElement(node) ? node : createElement(node);
+	root.render(element);
+
+	const mount: MountedStory = {
+		container,
+		unmount: () => {
+			if (!root) return;
+			root.unmount();
+			root = null;
+			container.remove();
+			activeMounts.delete(mount);
+		},
+	};
+	activeMounts.add(mount);
+	return mount;
 }
 
 function isReactElement(node: ReactElement | ComponentType): node is ReactElement {
-    return typeof node !== "function" && typeof node === "object";
+	return typeof node !== "function" && typeof node === "object";
 }
 
 /**
@@ -56,27 +56,27 @@ function isReactElement(node: ReactElement | ComponentType): node is ReactElemen
  * authoritative state (selection, doc, mode) directly inside assertions.
  */
 export async function getEditorView(timeoutMs = 5000): Promise<EditorView> {
-    const start = Date.now();
-    while (Date.now() - start < timeoutMs) {
-        const dom = document.querySelector<HTMLElement>(".cm-editor");
-        if (dom) {
-            const view = EditorView.findFromDOM(dom);
-            if (view) return view;
-        }
-        await sleep(20);
-    }
-    throw new Error("Timed out waiting for the markdown EditorView to mount");
+	const start = Date.now();
+	while (Date.now() - start < timeoutMs) {
+		const dom = document.querySelector<HTMLElement>(".cm-editor");
+		if (dom) {
+			const view = EditorView.findFromDOM(dom);
+			if (view) return view;
+		}
+		await sleep(20);
+	}
+	throw new Error("Timed out waiting for the markdown EditorView to mount");
 }
 
 /** Returns the `.cm-content` editable element once it's in the DOM. */
 export async function getContentElement(timeoutMs = 5000): Promise<HTMLElement> {
-    const start = Date.now();
-    while (Date.now() - start < timeoutMs) {
-        const dom = document.querySelector<HTMLElement>(".cm-content");
-        if (dom) return dom;
-        await sleep(20);
-    }
-    throw new Error("Timed out waiting for .cm-content");
+	const start = Date.now();
+	while (Date.now() - start < timeoutMs) {
+		const dom = document.querySelector<HTMLElement>(".cm-content");
+		if (dom) return dom;
+		await sleep(20);
+	}
+	throw new Error("Timed out waiting for .cm-content");
 }
 
 /**
@@ -86,21 +86,21 @@ export async function getContentElement(timeoutMs = 5000): Promise<HTMLElement>
  * `view.dispatch({ selection: ... })`.
  */
 export async function focusEditor(): Promise<EditorView> {
-    const view = await getEditorView();
-    view.focus();
-    await getContentElement();
-    return view;
+	const view = await getEditorView();
+	view.focus();
+	await getContentElement();
+	return view;
 }
 
 /** Type at the currently focused element. Caller should call `focusEditor()` first. */
 export async function typeText(text: string): Promise<void> {
-    await userEvent.keyboard(text);
+	await userEvent.keyboard(text);
 }
 
 /** Convenience: focus the editor and type at the current caret. */
 export async function focusAndType(text: string): Promise<void> {
-    await focusEditor();
-    await userEvent.keyboard(text);
+	await focusEditor();
+	await userEvent.keyboard(text);
 }
 
 /**
@@ -108,62 +108,62 @@ export async function focusAndType(text: string): Promise<void> {
  * and DOM assertions so CodeMirror's measure cycle has time to run.
  */
 export function nextFrame(): Promise<void> {
-    return new Promise((resolve) => requestAnimationFrame(() => resolve()));
+	return new Promise((resolve) => requestAnimationFrame(() => resolve()));
 }
 
 /** Sleep helper for the polling loops above. */
 export function sleep(ms: number): Promise<void> {
-    return new Promise((resolve) => setTimeout(resolve, ms));
+	return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 /**
  * Read the current markdown source out of the live EditorView.
  */
 export async function readDoc(): Promise<string> {
-    const view = await getEditorView();
-    return view.state.doc.toString();
+	const view = await getEditorView();
+	return view.state.doc.toString();
 }
 
 /** Wait until the editor reports `data-markdown-mode="preview"`. */
 export async function ensurePreviewMode(timeoutMs = 5000): Promise<void> {
-    const start = Date.now();
-    while (Date.now() - start < timeoutMs) {
-        const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
-        if (mode === "preview") return;
-        await nextFrame();
-    }
-
-    const preview = page.getByText("Preview", { exact: true });
-
-    if (preview.elements().length > 0) {
-        await preview.click();
-    }
-
-    const retryStart = Date.now();
-    while (Date.now() - retryStart < timeoutMs) {
-        const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
-        if (mode === "preview") return;
-        await nextFrame();
-    }
-
-    throw new Error("Timed out waiting for preview mode");
+	const start = Date.now();
+	while (Date.now() - start < timeoutMs) {
+		const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
+		if (mode === "preview") return;
+		await nextFrame();
+	}
+
+	const preview = page.getByText("Preview", { exact: true });
+
+	if (preview.elements().length > 0) {
+		await preview.click();
+	}
+
+	const retryStart = Date.now();
+	while (Date.now() - retryStart < timeoutMs) {
+		const mode = document.querySelector(".cm-editor")?.getAttribute("data-markdown-mode");
+		if (mode === "preview") return;
+		await nextFrame();
+	}
+
+	throw new Error("Timed out waiting for preview mode");
 }
 
 /** Mount helper: editor view + preview mode + focus. */
 export async function preparePreviewEditor(): Promise<EditorView> {
-    const view = await getEditorView();
-    await ensurePreviewMode();
-    view.focus();
-    await nextFrame();
-    return view;
+	const view = await getEditorView();
+	await ensurePreviewMode();
+	view.focus();
+	await nextFrame();
+	return view;
 }
 
 /** Scroll the editor so `pos` is centred in the viewport. */
 export async function scrollEditorTo(view: EditorView, pos: number): Promise<void> {
-    view.dispatch({
-        effects: EditorView.scrollIntoView(pos, { y: "center" }),
-    });
-    await nextFrame();
+	view.dispatch({
+		effects: EditorView.scrollIntoView(pos, { y: "center" }),
+	});
+	await nextFrame();
 }
 
 export { page, userEvent };

package/tests/_setup/portable-stories.ts

@@ -1,5 +1,6 @@
 import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
 import { setProjectAnnotations } from "@storybook/react-vite";
+
 import * as projectAnnotations from "../../.storybook/preview";
 
 // Calling `setProjectAnnotations` here ensures any `composeStories(...)` invocation
@@ -19,14 +20,14 @@ setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
 // real navigation, so neutralise the browser's default navigation while leaving
 // the app's own click handlers (which place the caret) untouched.
 if (typeof window !== "undefined" && !(window as { __e2eNavGuard?: boolean }).__e2eNavGuard) {
-    (window as { __e2eNavGuard?: boolean }).__e2eNavGuard = true;
-    window.addEventListener(
-        "click",
-        (event) => {
-            const anchor = (event.target as HTMLElement | null)?.closest?.("a[href]");
-            if (anchor) event.preventDefault();
-        },
-        true,
-    );
-    window.addEventListener("submit", (event) => event.preventDefault(), true);
+	(window as { __e2eNavGuard?: boolean }).__e2eNavGuard = true;
+	window.addEventListener(
+		"click",
+		(event) => {
+			const anchor = (event.target as HTMLElement | null)?.closest?.("a[href]");
+			if (anchor) event.preventDefault();
+		},
+		true,
+	);
+	window.addEventListener("submit", (event) => event.preventDefault(), true);
 }