@coldsmirk/inkstone-sql 0.31.0 → 0.32.0

package/README.md

@@ -8,7 +8,7 @@ Part of [inkstone](https://github.com/coldsmirk/inkstone). Extracted from dragom
 
 - **`@coldsmirk/inkstone-sql`** — the framework-free core. Zero editor dependencies; runs anywhere.
 - **`@coldsmirk/inkstone-sql/monaco`** — `registerSqlLanguage(monaco, modelPath, hooks)`: the Monaco providers (completion, hover, signature help, formatting) over an assist read per-request through a hook. Peer: `monaco-editor`.
-- **`@coldsmirk/inkstone-sql/react`** — `<SqlEditor>`: a controlled SQL editor built on `@coldsmirk/inkstone-react`'s `<MonacoEditor>`, with a run key (Ctrl/Cmd-Enter handing over the live caret), a runnable-statement gutter mark, caret tracking, and an insert/format handle for schema trees and toolbars. Peers: `monaco-editor`, `react`.
+- **`@coldsmirk/inkstone-sql/react`** — `<SqlEditor>`: a controlled SQL editor built on `@coldsmirk/inkstone-react`'s `<MonacoConsoleEditor>`, with a run key (Ctrl/Cmd-Enter handing over the live caret), a runnable-statement gutter mark, caret tracking, and an insert/focus/format handle for schema trees and toolbars. Peers: `monaco-editor`, `react`.
 
 ## The shape
 

package/dist/react.d.ts

@@ -1,92 +1,33 @@
 import { t as SqlAssist } from "./assist-BM4bNDhw.js";
-import { MonacoModule } from "./monaco.js";
+import { ConsoleCaret, ConsoleEditorHandle, ConsoleEditorProps } from "@coldsmirk/inkstone-react/monaco";
 import { ReactNode } from "react";
-import { editor } from "monaco-editor";
 //#region src/react.d.ts
 /**
  * What a host needs to reach into the editor for: inserting at the caret (a schema tree is an
- * input device, not a browser), and reformatting from a toolbar — which goes through Monaco's own
- * formatting action, so the button and `Shift+Alt+F` are one path and one undo.
+ * input device, not a browser), the focus, and reformatting from a toolbar — which goes through
+ * Monaco's own formatting action, so the button and `Shift+Alt+F` are one path and one undo.
  */
-export interface SqlEditorHandle {
-  insert: (text: string) => void;
+export interface SqlEditorHandle extends ConsoleEditorHandle {
   format: () => void;
 }
 /**
  * Where the operator is in the document, in offsets — everything a host needs to decide which
- * statement a run should send, and nothing about SQL. `from` and `to` are the selection's own
- * bounds and are equal where nothing is selected: a caret is a selection of nothing.
- *
- * It rides with the text rather than beside it because the two must belong to the same instant.
- * The controlled `value` is one React render behind the keystroke that triggered a run, and a
- * console must run the statement the operator is looking at.
+ * statement a run should send, and nothing about SQL.
  */
-export interface SqlCaret {
-  text: string;
-  from: number;
-  to: number;
-}
-export interface SqlEditorProps {
-  value: string;
-  onChange: (value: string) => void;
-  /**
-   * Render with the dark theme. Like every inkstone editor, the component never reads the OS
-   * `prefers-color-scheme`; wire this to the app's color-scheme state.
-   *
-   * @default false
-   */
-  dark?: boolean;
-  /**
-   * Editor height in px, or `"fill"` to consume the parent's resolved height (the parent must be
-   * a `min-height: 0` flex item). Monaco's loading placeholder is `height: 100%`, so a height
-   * that resolves to nothing collapses the field to one line while the editor loads.
-   */
-  height?: number | "fill";
-  /**
-   * Editor font size in px. Omit to keep the inkstone default.
-   */
-  fontSize?: number;
-  /**
-   * UI locale for Monaco's built-in chrome — page-global and locked by the first editor to
-   * mount, exactly as on `<MonacoEditor>`.
-   */
-  locale?: "en" | "zh-cn";
-  placeholder?: string;
-  /**
-   * The editor's accessible name, set on Monaco's own input surface — several SQL editors on one
-   * page are indistinguishable to assistive tech without one.
-   */
-  ariaLabel: string;
+export type SqlCaret = ConsoleCaret;
+export interface SqlEditorProps extends ConsoleEditorProps<SqlEditorHandle> {
   /**
    * The Monaco language id the model registers under.
    *
    * @default "sql"
    */
   languageId?: string;
-  /**
-   * Shown while the Monaco host loads / when it fails to load — passed through to
-   * `<MonacoEditor>`, whose English defaults apply when omitted.
-   */
-  loading?: ReactNode;
-  failure?: ReactNode;
-  /**
-   * Ctrl/Cmd-Enter — the run key, bound inside the editor because that is where the operator's
-   * hands are. It is handed the editor's live caret, from which the host works out what to send.
-   * Read through a ref at every press, so it always runs against the connection the *current*
-   * render is bound to.
-   */
-  onRun?: (caret: SqlCaret) => void;
   /**
    * The label the run action shows in Monaco's own chrome (command palette, context menu).
    *
    * @default "Run statement"
    */
   runActionLabel?: string;
-  /**
-   * The caret moved, or the text under it changed. The host tracks it to show what a run would
-   * send; the run key does not depend on that tracking having caught up.
-   */
-  onCaret?: (caret: SqlCaret) => void;
   /**
    * The span to mark as the one a run would send. Null leaves the gutter clean, which is the
    * right answer while there is nothing to choose between.
@@ -108,35 +49,19 @@ export interface SqlEditorProps {
    * says so — a deliberate keystroke that changes nothing needs to explain itself.
    */
   onFormatRefused?: () => void;
-  onReady?: (handle: SqlEditorHandle) => void;
-  /**
-   * Runs after this component's own mount wiring, with the live editor and the monaco module —
-   * the escape hatch for host-specific concerns (focus shields, extra actions).
-   */
-  onMount?: (instance: editor.IStandaloneCodeEditor, monaco: MonacoModule) => void;
-  /**
-   * Extra construction options, merged under this editor's own (`ariaLabel`): the escape hatch
-   * a host reaches for a construction option no prop names — `overflowWidgetsDomNode`, where
-   * the page's own layers would otherwise stand over the editor's floating widgets (hover,
-   * completion, parameter hints) left inside it.
-   */
-  options?: editor.IStandaloneEditorConstructionOptions;
   /**
    * What the editor's language features answer from — the schema and dialect of the connection
-   * being edited (`createSqlAssist`). Read through a ref at every request, so the host can swap
-   * it without re-registering anything with Monaco.
+   * being edited (`createSqlAssist`). Read at every request, so the host can swap it without
+   * re-registering anything with Monaco.
    */
   assist?: SqlAssist;
 }
 /**
- * The SQL editing surface: Monaco in `sql`, highlighted by the same shared Shiki grammar every
- * other inkstone surface uses. It is deliberately not a script editor — a TypeScript language
- * service and an ambient profile have no meaning for a vendor's SQL. Its language features are
- * the host's: the `assist` knows the catalog and the dialect and this component only wires it to
- * Monaco (`registerSqlLanguage`) — it never guesses at SQL itself.
- *
- * The editor draws no chrome of its own: it is a band of its host's surface, and the separation
- * is the host's hairline rules — a border here would dress a pane up as a form input.
+ * The SQL editing surface: `<MonacoConsoleEditor>` in `sql`, highlighted by the same shared Shiki
+ * grammar every other inkstone surface uses. It is deliberately not a script editor — a
+ * TypeScript language service and an ambient profile have no meaning for a vendor's SQL. Its
+ * language features are the host's: the `assist` knows the catalog and the dialect and this
+ * component only wires it to Monaco (`registerSqlLanguage`) — it never guesses at SQL itself.
  */
-export declare function SqlEditor({ value, onChange, dark, height, fontSize, locale, placeholder, ariaLabel, languageId, loading, failure, onRun, runActionLabel, onCaret, highlight, highlightClassName, onFormatRefused, onReady, onMount, options, assist }: SqlEditorProps): import("react").JSX.Element;
+export declare function SqlEditor({ languageId, runActionLabel, assist, onFormatRefused, onReady, options, ...props }: SqlEditorProps): ReactNode;
 //#endregion

package/dist/react.js

@@ -1,135 +1,46 @@
 import { t as registerSqlLanguage } from "./monaco-DEMsSuzD.js";
-import { MonacoEditor } from "@coldsmirk/inkstone-react/monaco";
-import { useEffect, useInsertionEffect, useRef, useState } from "react";
+import { MonacoConsoleEditor } from "@coldsmirk/inkstone-react/monaco";
+import { useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/react.tsx
-const EDITOR_ID_KEY = Symbol.for("coldsmirk.inkstone.sql.editorId");
-function nextEditorId() {
-	const holder = globalThis;
-	const id = holder[EDITOR_ID_KEY] ?? 0;
-	holder[EDITOR_ID_KEY] = id + 1;
-	return id;
-}
 const FORMAT_CHORD_CONTEXT_KEY = "inkstoneSqlFormatChord";
-function useLatest(value) {
-	const ref = useRef(value);
-	useInsertionEffect(() => {
-		ref.current = value;
-	});
-	return ref;
-}
-function caretOf(instance) {
-	const model = instance.getModel();
-	const selection = instance.getSelection();
-	if (model === null || selection === null) return {
-		text: "",
-		from: 0,
-		to: 0
-	};
-	return {
-		text: model.getValue(),
-		from: model.getOffsetAt(selection.getStartPosition()),
-		to: model.getOffsetAt(selection.getEndPosition())
-	};
-}
-function monacoRange(model, span) {
-	const from = model.getPositionAt(span.from);
-	const to = model.getPositionAt(span.to);
-	return {
-		startLineNumber: from.lineNumber,
-		startColumn: from.column,
-		endLineNumber: to.lineNumber,
-		endColumn: to.column
-	};
-}
-function SqlEditor({ value, onChange, dark = false, height = 200, fontSize, locale, placeholder, ariaLabel, languageId = "sql", loading, failure, onRun, runActionLabel = "Run statement", onCaret, highlight = null, highlightClassName = "inkstone-sql-runnable", onFormatRefused, onReady, onMount, options, assist }) {
-	const [modelPath] = useState(() => `file:///inkstone-sql/${nextEditorId()}.sql`);
-	const bindings = useRef([]);
-	const assistRef = useLatest(assist ?? null);
-	const formatRefusedRef = useLatest(onFormatRefused);
-	const runRef = useLatest(onRun);
-	const caretChangedRef = useLatest(onCaret);
-	const readyRef = useLatest(onReady);
-	const mountRef = useLatest(onMount);
-	const instance = useRef(null);
-	const marked = useRef(null);
-	const [mounted, setMounted] = useState(false);
-	useEffect(() => {
-		const model = instance.current?.getModel();
-		if (model === null || model === void 0) return;
-		marked.current?.clear();
-		marked.current = highlight === null ? null : instance.current.createDecorationsCollection([{
-			range: monacoRange(model, highlight),
-			options: {
-				linesDecorationsClassName: highlightClassName,
-				isWholeLine: true
-			}
-		}]);
-	}, [
-		highlight,
-		highlightClassName,
-		mounted
-	]);
-	useEffect(() => () => {
-		for (const binding of bindings.current) binding.dispose();
-		bindings.current = [];
-	}, []);
-	const fill = height === "fill";
-	return /* @__PURE__ */ jsx("div", {
-		style: fill ? {
-			height: "100%",
-			minHeight: 0
-		} : { height },
-		children: /* @__PURE__ */ jsx(MonacoEditor, {
-			showLineNumbers: true,
-			dark,
-			failure,
-			fontSize,
-			height: fill ? "100%" : height,
-			language: languageId,
-			loading,
-			locale,
-			path: modelPath,
-			placeholder,
-			value,
-			options: {
-				...options,
-				ariaLabel,
-				suggest: { snippetsPreventQuickSuggestions: false }
-			},
-			onChange,
-			onMount: (live, monaco) => {
-				instance.current = live;
-				live.createContextKey(FORMAT_CHORD_CONTEXT_KEY, true);
-				bindings.current.push(live.onDidChangeCursorSelection(() => caretChangedRef.current?.(caretOf(live))), live.addAction({
-					id: "inkstone-sql.run",
-					label: runActionLabel,
-					keybindings: [monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter],
-					run: (current) => runRef.current?.(caretOf(current))
-				}), monaco.editor.addKeybindingRule({
-					keybinding: monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KeyF,
-					command: "editor.action.formatDocument",
-					when: `${FORMAT_CHORD_CONTEXT_KEY} && editorTextFocus && !editorReadonly`
-				}), ...registerSqlLanguage(monaco, modelPath, {
-					assist: () => assistRef.current,
-					onFormatRefused: () => formatRefusedRef.current?.()
-				}, languageId));
-				readyRef.current?.({
-					format: () => void live.getAction("editor.action.formatDocument")?.run(),
-					insert: (text) => {
-						const selection = live.getSelection();
-						if (selection) live.executeEdits("inkstone-sql-insert", [{
-							range: selection,
-							text,
-							forceMoveMarkers: true
-						}]);
-						live.focus();
-					}
-				});
-				mountRef.current?.(live, monaco);
-				setMounted(true);
-			}
-		})
+function SqlEditor({ languageId = "sql", runActionLabel = "Run statement", assist, onFormatRefused, onReady, options, ...props }) {
+	const live = useRef(null);
+	const sqlOptions = useMemo(() => {
+		return {
+			...options,
+			suggest: { snippetsPreventQuickSuggestions: false }
+		};
+	}, [options]);
+	return /* @__PURE__ */ jsx(MonacoConsoleEditor, {
+		...props,
+		context: {
+			assist,
+			onFormatRefused
+		},
+		extension: "sql",
+		language: languageId,
+		namespace: "inkstone-sql",
+		options: sqlOptions,
+		runActionLabel,
+		register: ({ monaco, editor: instance, path, context }) => {
+			live.current = instance;
+			instance.createContextKey(FORMAT_CHORD_CONTEXT_KEY, true);
+			return [monaco.editor.addKeybindingRule({
+				keybinding: monaco.KeyMod.Shift | monaco.KeyMod.Alt | monaco.KeyCode.KeyF,
+				command: "editor.action.formatDocument",
+				when: `${FORMAT_CHORD_CONTEXT_KEY} && editorTextFocus && !editorReadonly`
+			}), ...registerSqlLanguage(monaco, path, {
+				assist: () => context().assist ?? null,
+				onFormatRefused: () => context().onFormatRefused?.()
+			}, languageId)];
+		},
+		onReady: (handle) => {
+			onReady?.({
+				...handle,
+				format: () => void live.current?.getAction("editor.action.formatDocument")?.run()
+			});
+		}
 	});
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coldsmirk/inkstone-sql",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "Schema-aware SQL editing intelligence for Monaco: lexical statement reading under per-dialect noise profiles, catalog-driven completion/hover/signature help, unified-placeholder awareness, formatting, and a drop-in React SQL editor.",
   "keywords": [
     "sql",
@@ -48,12 +48,12 @@
   "devDependencies": {
     "monaco-editor": "^0.57.0",
     "react": "^19.3.0",
-    "@coldsmirk/inkstone-react": "^0.31.0"
+    "@coldsmirk/inkstone-react": "^0.32.0"
   },
   "peerDependencies": {
     "monaco-editor": "^0.57.0",
     "react": ">=19",
-    "@coldsmirk/inkstone-react": "^0.31.0"
+    "@coldsmirk/inkstone-react": "^0.32.0"
   },
   "peerDependenciesMeta": {
     "@coldsmirk/inkstone-react": {