@stisocial/ui 0.1.0 → 0.2.1

package/dist/editor/CodeEditor/codeEdits.js

@@ -0,0 +1,284 @@
+import { lineBounds } from "../_shared/textEdit.js";
+// src/editor/CodeEditor/codeEdits.ts
+/**
+* Kod düzenleyicinin saf düzenleme işlevleri: girinti, Enter, geri silme, ikili işaret ve satır
+* yorumu. Hepsi (metin, seçim) alır, bir `TextEdit` (ya da tarayıcının kendi davranışına bırakmak
+* için `null`) döndürür; DOM'a dokunmaz.
+*/
+function indentUnit(tabSize, insertSpaces) {
+	return {
+		text: insertSpaces ? " ".repeat(tabSize) : "	",
+		size: tabSize
+	};
+}
+/** Seçimin kapsadığı satırların başlangıcı ve sonu; son satır yalnız satır başına değen imleçse hariç. */
+function lineRange(state) {
+	const first = lineBounds(state.value, state.start);
+	let endPos = state.end;
+	if (state.end > state.start && state.value[state.end - 1] === "\n") endPos = state.end - 1;
+	const last = lineBounds(state.value, endPos);
+	return {
+		from: first.start,
+		to: last.end
+	};
+}
+/** Tab ve Shift+Tab. */
+function indentEdit(state, unit, outdent) {
+	const { value, start, end } = state;
+	const multi = value.slice(start, end).includes("\n");
+	if (!outdent && !multi) {
+		const col = start - lineBounds(value, start).start;
+		const insert = unit.text === "	" ? "	" : " ".repeat(unit.size - col % unit.size);
+		const pos = start + insert.length;
+		return {
+			from: start,
+			to: end,
+			insert,
+			selectStart: pos,
+			selectEnd: pos
+		};
+	}
+	const { from, to } = lineRange(state);
+	const lines = value.slice(from, to).split("\n");
+	let firstDelta = 0;
+	let total = 0;
+	const out = lines.map((line, i) => {
+		let next;
+		let delta;
+		if (outdent) {
+			const lead = /^( +|\t)/.exec(line)?.[0] ?? "";
+			const remove = lead.startsWith("	") ? 1 : Math.min(lead.length, unit.size);
+			next = line.slice(remove);
+			delta = -remove;
+		} else if (line === "") {
+			next = line;
+			delta = 0;
+		} else {
+			next = unit.text + line;
+			delta = unit.text.length;
+		}
+		if (i === 0) firstDelta = delta;
+		total += delta;
+		return next;
+	});
+	const selectStart = start === from ? from : Math.max(from, start + firstDelta);
+	const selectEnd = Math.max(selectStart, end + total);
+	return {
+		from,
+		to,
+		insert: out.join("\n"),
+		selectStart,
+		selectEnd
+	};
+}
+const CLOSERS = {
+	"{": "}",
+	"[": "]",
+	"(": ")"
+};
+const CLOSER_SET = new Set(Object.values(CLOSERS));
+const QUOTES = /* @__PURE__ */ new Set([
+	"\"",
+	"'",
+	"`"
+]);
+const isWord = (ch) => ch !== void 0 && /[\p{L}\p{N}_]/u.test(ch);
+/** Enter: satırın girintisini sürdürür; açılış ayracından sonra bir kademe girinti ekler. */
+function enterEdit(state, unit, language) {
+	const { value, start, end } = state;
+	const { start: lineStart } = lineBounds(value, start);
+	const beforeCaret = value.slice(lineStart, start);
+	const lead = /^[ \t]*/.exec(beforeCaret)?.[0] ?? "";
+	const prev = beforeCaret.trimEnd().slice(-1);
+	const next = value[end];
+	let insert = `\n${lead}`;
+	let caret = start + insert.length;
+	if (language !== "plain" && prev in CLOSERS) {
+		const inner = `\n${lead}${unit.text}`;
+		if (next === CLOSERS[prev]) {
+			insert = `${inner}\n${lead}`;
+			caret = start + inner.length;
+		} else {
+			insert = inner;
+			caret = start + insert.length;
+		}
+	}
+	return {
+		from: start,
+		to: end,
+		insert,
+		selectStart: caret,
+		selectEnd: caret
+	};
+}
+/** Geri silme: girintide bir sekme durağına, boş ikili işaretin ikisini birden siler. */
+function backspaceEdit(state, unit, autoClose) {
+	const { value, start, end } = state;
+	if (start !== end || start === 0) return null;
+	const { start: lineStart } = lineBounds(value, start);
+	const before = value.slice(lineStart, start);
+	if (unit.text !== "	" && before.length > 0 && /^ +$/.test(before)) {
+		const from = start - (before.length % unit.size || unit.size);
+		return {
+			from,
+			to: start,
+			insert: "",
+			selectStart: from,
+			selectEnd: from
+		};
+	}
+	if (autoClose) {
+		const open = value[start - 1];
+		const close = value[start];
+		if (open in CLOSERS && close === CLOSERS[open] || QUOTES.has(open) && close === open) return {
+			from: start - 1,
+			to: start + 1,
+			insert: "",
+			selectStart: start - 1,
+			selectEnd: start - 1
+		};
+	}
+	return null;
+}
+/** Karakter yazılırken: ikili işaret ekleme, seçimi sarma, kapanışın üzerinden geçme. */
+function typeEdit(state, char) {
+	const { value, start, end } = state;
+	const closeFor = CLOSERS[char];
+	const isQuote = QUOTES.has(char);
+	if (start !== end) {
+		if (!closeFor && !isQuote) return null;
+		const close = closeFor ?? char;
+		const inner = value.slice(start, end);
+		return {
+			from: start,
+			to: end,
+			insert: char + inner + close,
+			selectStart: start + 1,
+			selectEnd: start + 1 + inner.length
+		};
+	}
+	const next = value[start];
+	if ((CLOSER_SET.has(char) || isQuote) && next === char) return {
+		from: start,
+		to: start,
+		insert: "",
+		selectStart: start + 1,
+		selectEnd: start + 1
+	};
+	const prev = value[start - 1];
+	if (closeFor) {
+		if (next !== void 0 && !/\s/.test(next) && !CLOSER_SET.has(next) && next !== ";") return null;
+		return {
+			from: start,
+			to: start,
+			insert: char + closeFor,
+			selectStart: start + 1,
+			selectEnd: start + 1
+		};
+	}
+	if (isQuote) {
+		if (isWord(prev) || isWord(next) || prev === char) return null;
+		return {
+			from: start,
+			to: start,
+			insert: char + char,
+			selectStart: start + 1,
+			selectEnd: start + 1
+		};
+	}
+	return null;
+}
+/** Dile göre satır yorumu: ön ek ve (varsa) kapanış işareti; yorum yoksa `null`. */
+function commentSyntax(language) {
+	switch (language) {
+		case "javascript":
+		case "typescript": return { prefix: "//" };
+		case "sql": return { prefix: "--" };
+		case "css": return {
+			prefix: "/*",
+			suffix: "*/"
+		};
+		case "html": return {
+			prefix: "<!--",
+			suffix: "-->"
+		};
+		default: return null;
+	}
+}
+/** Ctrl+/: seçili satırlara yorum ekler; hepsi yorumluysa kaldırır. */
+function commentEdit(state, language) {
+	const syntax = commentSyntax(language);
+	if (!syntax) return null;
+	const { from, to } = lineRange(state);
+	const lines = state.value.slice(from, to).split("\n");
+	const filled = lines.filter((l) => l.trim() !== "");
+	if (filled.length === 0) return null;
+	const { prefix, suffix } = syntax;
+	const commented = (l) => {
+		const t = l.trim();
+		return t.startsWith(prefix) && (!suffix || t.endsWith(suffix));
+	};
+	const remove = filled.every(commented);
+	const minIndent = Math.min(...filled.map((l) => (/^[ \t]*/.exec(l)?.[0] ?? "").length));
+	const insert = lines.map((l) => {
+		if (l.trim() === "") return l;
+		if (remove) {
+			const lead = (/^[ \t]*/.exec(l)?.[0] ?? "").length;
+			let body = l.slice(lead + prefix.length);
+			if (body.startsWith(" ")) body = body.slice(1);
+			if (suffix) {
+				body = body.trimEnd();
+				body = body.slice(0, body.length - suffix.length).replace(/ $/, "");
+			}
+			return l.slice(0, lead) + body;
+		}
+		const body = l.slice(minIndent);
+		return `${l.slice(0, minIndent)}${prefix} ${body}${suffix ? ` ${suffix}` : ""}`;
+	}).join("\n");
+	return {
+		from,
+		to,
+		insert,
+		selectStart: from,
+		selectEnd: from + insert.length
+	};
+}
+/** Alt+↑ / Alt+↓: seçili satırları bir satır yukarı ya da aşağı taşır. */
+function moveLinesEdit(state, direction) {
+	const { value } = state;
+	const { from, to } = lineRange(state);
+	if (direction === -1 && from === 0) return null;
+	if (direction === 1 && to >= value.length) return null;
+	const block = value.slice(from, to);
+	if (direction === -1) {
+		const prevStart = lineBounds(value, from - 1).start;
+		const prevLine = value.slice(prevStart, from - 1);
+		const shift = -(prevLine.length + 1);
+		return {
+			from: prevStart,
+			to,
+			insert: `${block}\n${prevLine}`,
+			selectStart: state.start + shift,
+			selectEnd: state.end + shift
+		};
+	}
+	const nextEnd = lineBounds(value, to + 1).end;
+	const nextLine = value.slice(to + 1, nextEnd);
+	const shift = nextLine.length + 1;
+	return {
+		from,
+		to: nextEnd,
+		insert: `${nextLine}\n${block}`,
+		selectStart: state.start + shift,
+		selectEnd: state.end + shift
+	};
+}
+/** İmleç konumu: 1 tabanlı satır ve sütun. */
+function caretPosition(value, pos) {
+	const before = value.slice(0, pos);
+	return {
+		line: before.split("\n").length,
+		column: pos - (before.lastIndexOf("\n") + 1) + 1
+	};
+}
+export { backspaceEdit, caretPosition, commentEdit, commentSyntax, enterEdit, indentEdit, indentUnit, moveLinesEdit, typeEdit };

package/dist/editor/CodeEditor/highlight.js

@@ -0,0 +1,195 @@
+// src/editor/CodeEditor/highlight.ts
+/** Bu uzunluktan büyük metin renklendirilmez (yazma akıcı kalsın). */
+const HIGHLIGHT_LIMIT = 1e5;
+const words = (s) => new Set(s.split(" "));
+const JS_KEYWORDS = words("as async await break case catch class const continue debugger default delete do else enum export extends finally for from function get if implements import in instanceof interface let new of package private protected public return set static super switch this throw try type typeof var void while with yield abstract declare readonly namespace keyof infer satisfies");
+const JS_LITERALS = words("true false null undefined NaN Infinity");
+const SQL_KEYWORDS = words("select from where and or not in is null like between join inner left right outer full cross on as group by order having limit offset insert into values update set delete create table alter drop index view primary key foreign references unique default distinct union all case when then else end exists asc desc count sum avg min max with returning");
+const rule = (type, source) => ({
+	type,
+	re: new RegExp(source, "y")
+});
+const NUMBER = "0[xX][\\da-fA-F_]+n?|0[bB][01_]+n?|\\d[\\d_]*(?:\\.\\d+)?(?:[eE][+-]?\\d+)?n?|\\.\\d+(?:[eE][+-]?\\d+)?";
+const DQ = "\"(?:[^\"\\\\\\n]|\\\\.)*\"?";
+const SQ = "'(?:[^'\\\\\\n]|\\\\.)*'?";
+const BLOCK_COMMENT = "/\\*[\\s\\S]*?(?:\\*/|$)";
+/** Verilen konumdan başlayarak sıradaki kuralı uygular; hiçbiri uymazsa tek karakter düz kalır. */
+function scan(text, rules, pos) {
+	for (const r of rules) {
+		r.re.lastIndex = pos;
+		const m = r.re.exec(text);
+		if (m && m[0].length > 0) return {
+			type: r.type,
+			text: m[0]
+		};
+	}
+	return null;
+}
+function push(out, token) {
+	const last = out.at(-1);
+	if (last && last.type === token.type && token.type === "plain") last.text += token.text;
+	else out.push(token);
+}
+function run(text, rules, classify) {
+	const out = [];
+	let pos = 0;
+	while (pos < text.length) {
+		let token = scan(text, rules, pos);
+		if (!token) token = {
+			type: "plain",
+			text: text.slice(pos, pos + 1)
+		};
+		if (classify) token = classify(token, text.slice(pos + token.text.length, pos + token.text.length + 64));
+		push(out, token);
+		pos += token.text.length;
+	}
+	return out;
+}
+const JS_RULES = [
+	rule("comment", `//[^\\n]*|${BLOCK_COMMENT}`),
+	rule("string", `${DQ}|${SQ}|\`(?:[^\`\\\\]|\\\\[\\s\\S])*\`?`),
+	rule("number", NUMBER),
+	rule("plain", "[A-Za-z_$][\\w$]*"),
+	rule("punct", "[{}()[\\];,.]|[+\\-*/%=<>!&|^~?:]+"),
+	rule("plain", "\\s+")
+];
+function tokenizeJs(text) {
+	return run(text, JS_RULES, (t, rest) => {
+		if (t.type !== "plain" || !/^[A-Za-z_$]/.test(t.text)) return t;
+		if (JS_KEYWORDS.has(t.text)) return {
+			type: "keyword",
+			text: t.text
+		};
+		if (JS_LITERALS.has(t.text)) return {
+			type: "literal",
+			text: t.text
+		};
+		if (/^\s*\(/.test(rest)) return {
+			type: "function",
+			text: t.text
+		};
+		return t;
+	});
+}
+const JSON_RULES = [
+	rule("string", DQ),
+	rule("number", "-?\\d+(?:\\.\\d+)?(?:[eE][+-]?\\d+)?"),
+	rule("plain", "[A-Za-z_]+"),
+	rule("punct", "[{}[\\]:,]"),
+	rule("plain", "\\s+")
+];
+function tokenizeJson(text) {
+	return run(text, JSON_RULES, (t, rest) => {
+		if (t.type === "string" && /^\s*:/.test(rest)) return {
+			type: "property",
+			text: t.text
+		};
+		if (t.type === "plain" && /^(true|false|null)$/.test(t.text)) return {
+			type: "literal",
+			text: t.text
+		};
+		return t;
+	});
+}
+const CSS_RULES = [
+	rule("comment", BLOCK_COMMENT),
+	rule("string", `${DQ}|${SQ}`),
+	rule("keyword", "@[\\w-]+"),
+	rule("number", "#[\\da-fA-F]{3,8}\\b"),
+	rule("number", "-?(?:\\d+\\.?\\d*|\\.\\d+)(?:[a-zA-Z%]+)?"),
+	rule("plain", "-{0,2}[A-Za-z_][\\w-]*"),
+	rule("tag", "[.#]-?[A-Za-z_][\\w-]*"),
+	rule("punct", "[{}()[\\];:,>+~*=]"),
+	rule("plain", "\\s+")
+];
+function tokenizeCss(text) {
+	let depth = 0;
+	return run(text, CSS_RULES, (t, rest) => {
+		if (t.type === "punct") {
+			if (t.text === "{") depth += 1;
+			else if (t.text === "}") depth = Math.max(0, depth - 1);
+			return t;
+		}
+		if (t.type === "plain" && /^-{0,2}[A-Za-z_]/.test(t.text)) {
+			if (depth > 0 && /^\s*:/.test(rest)) return {
+				type: "property",
+				text: t.text
+			};
+			if (depth === 0) return {
+				type: "tag",
+				text: t.text
+			};
+		}
+		return t;
+	});
+}
+const HTML_OUTSIDE = [
+	rule("comment", "<!--[\\s\\S]*?(?:-->|$)"),
+	rule("tag", "<!?[A-Za-z][\\w:-]*|</[A-Za-z][\\w:-]*"),
+	rule("plain", "[^<]+|<")
+];
+const HTML_INSIDE = [
+	rule("punct", "/?>"),
+	rule("string", `${DQ}|${SQ}`),
+	rule("punct", "="),
+	rule("attr", "[^\\s=/>\"']+"),
+	rule("plain", "\\s+")
+];
+function tokenizeHtml(text) {
+	const out = [];
+	let pos = 0;
+	let inside = false;
+	while (pos < text.length) {
+		const token = scan(text, inside ? HTML_INSIDE : HTML_OUTSIDE, pos) ?? {
+			type: "plain",
+			text: text.slice(pos, pos + 1)
+		};
+		if (token.type === "tag") inside = true;
+		else if (inside && token.type === "punct" && token.text.endsWith(">")) inside = false;
+		push(out, token);
+		pos += token.text.length;
+	}
+	return out;
+}
+const SQL_RULES = [
+	rule("comment", `--[^\\n]*|${BLOCK_COMMENT}`),
+	rule("string", SQ),
+	rule("number", NUMBER),
+	rule("plain", "[A-Za-z_][\\w]*"),
+	rule("punct", "[();,.*=<>+\\-/%]"),
+	rule("plain", "\\s+")
+];
+function tokenizeSql(text) {
+	return run(text, SQL_RULES, (t) => t.type === "plain" && SQL_KEYWORDS.has(t.text.toLowerCase()) ? {
+		type: "keyword",
+		text: t.text
+	} : t);
+}
+/** Metni dilin kurallarına göre parçalar. */
+function tokenize(text, language) {
+	if (language === "plain" || text.length > 1e5) return [{
+		type: "plain",
+		text
+	}];
+	switch (language) {
+		case "javascript":
+		case "typescript": return tokenizeJs(text);
+		case "json": return tokenizeJson(text);
+		case "css": return tokenizeCss(text);
+		case "html": return tokenizeHtml(text);
+		case "sql": return tokenizeSql(text);
+	}
+}
+/** Parçaları satırlara böler (yeni satır karakteri bir parçanın ortasındaysa parça bölünür). */
+function splitLines(tokens) {
+	const lines = [[]];
+	for (const token of tokens) token.text.split("\n").forEach((part, i) => {
+		if (i > 0) lines.push([]);
+		if (part) lines[lines.length - 1].push({
+			type: token.type,
+			text: part
+		});
+	});
+	return lines;
+}
+export { HIGHLIGHT_LIMIT, splitLines, tokenize };

package/dist/editor/CodeEditor/index.d.ts

@@ -0,0 +1,3 @@
+import { CodeLanguage } from "./codeEdits.js";
+import { CodeEditor, CodeEditorProps, CodeMarker } from "./CodeEditor.js";
+export { CodeEditor, CodeEditorProps, type CodeLanguage, CodeMarker };

package/dist/editor/JsonEditor/JsonEditor.css

@@ -0,0 +1,10 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-JsonEditor-valid-fca24 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    color: var(--sti-fg-success);
+    font-weight: var(--sti-font-weight-medium);
+    display: inline-flex;
+  }
+}

package/dist/editor/JsonEditor/JsonEditor.d.ts

@@ -0,0 +1,43 @@
+import { JsonError, JsonErrorCode } from "./json.js";
+import { KeyboardEvent, ReactNode, Ref } from "react";
+/** Değişimle birlikte verilen doğrulama sonucu. */
+export interface JsonInfo {
+  /** Metin geçerli bir JSON belgesi mi (boş metin geçersizdir). */
+  isValid: boolean;
+  error?: JsonError;
+}
+export interface JsonEditorProps {
+  label: ReactNode;
+  hideLabel?: boolean;
+  description?: ReactNode;
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string, info: JsonInfo) => void;
+  /** Biçimlendirmede girinti (boşluk sayısı). Varsayılan 2. */
+  indent?: number;
+  /** Biçimlendir ve Sıkıştır düğmeleri. Varsayılan açık. */
+  showActions?: boolean;
+  /** Hata metni, yazmaya ara verilince ya da alandan çıkınca gösterilir; bu süre (ms). */
+  errorDelay?: number;
+  minRows?: number;
+  maxRows?: number;
+  lineNumbers?: boolean;
+  placeholder?: string;
+  name?: string;
+  isRequired?: boolean;
+  isDisabled?: boolean;
+  isReadOnly?: boolean;
+  autoFocus?: boolean;
+  onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+  inputRef?: Ref<HTMLTextAreaElement>;
+  className?: string;
+  id?: string;
+}
+/**
+ * JSON düzenleyici: `CodeEditor` üzerine katı JSON denetimi. Hata satır ve sütunla bildirilir,
+ * hatalı satır işaretlenir, "Hataya git" imleci oraya taşır; Biçimlendir ve Sıkıştır sayıları ve
+ * dizeleri yazıldığı gibi korur. Hata metni her tuşta değil, yazmaya ara verilince ya da alandan
+ * çıkınca belirir (ekran okuyucu sürekli kesilmez); geçerli olunca hemen kaybolur.
+ */
+export declare function JsonEditor({ value, defaultValue, onChange, indent, showActions, errorDelay, isReadOnly, isDisabled, inputRef, ...rest }: JsonEditorProps): import("react").JSX.Element;
+export type { JsonError, JsonErrorCode };

package/dist/editor/JsonEditor/JsonEditor.js

@@ -0,0 +1,133 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { CheckCircleIcon } from "../../icons/generated/CheckCircleIcon.js";
+import { Button } from "../../components/Button/Button.js";
+import { applyEdit, revealOffset } from "../_shared/textEdit.js";
+import { CodeEditor } from "../CodeEditor/CodeEditor.js";
+import JsonEditor_module_default from "./JsonEditor.module.js";
+import { checkJson, formatJson } from "./json.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+// src/editor/JsonEditor/JsonEditor.tsx
+const MESSAGE_KEY = {
+	unexpectedChar: "jsonErrorUnexpectedChar",
+	unexpectedEnd: "jsonErrorUnexpectedEnd",
+	expectedValue: "jsonErrorExpectedValue",
+	expectedKey: "jsonErrorExpectedKey",
+	expectedColon: "jsonErrorExpectedColon",
+	expectedComma: "jsonErrorExpectedComma",
+	trailingComma: "jsonErrorTrailingComma",
+	badString: "jsonErrorBadString",
+	badNumber: "jsonErrorBadNumber",
+	trailing: "jsonErrorTrailing",
+	tooDeep: "jsonErrorTooDeep"
+};
+/**
+* JSON düzenleyici: `CodeEditor` üzerine katı JSON denetimi. Hata satır ve sütunla bildirilir,
+* hatalı satır işaretlenir, "Hataya git" imleci oraya taşır; Biçimlendir ve Sıkıştır sayıları ve
+* dizeleri yazıldığı gibi korur. Hata metni her tuşta değil, yazmaya ara verilince ya da alandan
+* çıkınca belirir (ekran okuyucu sürekli kesilmez); geçerli olunca hemen kaybolur.
+*/
+function JsonEditor({ value, defaultValue, onChange, indent = 2, showActions = true, errorDelay = 450, isReadOnly, isDisabled, inputRef, ...rest }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [inner, setInner] = useState(defaultValue ?? "");
+	const text = value ?? inner;
+	const area = useRef(null);
+	const check = useMemo(() => checkJson(text), [text]);
+	const [settled, setSettled] = useState(text);
+	useEffect(() => {
+		const timer = setTimeout(() => setSettled(text), errorDelay);
+		return () => clearTimeout(timer);
+	}, [text, errorDelay]);
+	const setRef = useCallback((el) => {
+		area.current = el;
+		if (typeof inputRef === "function") inputRef(el);
+		else if (inputRef) inputRef.current = el;
+	}, [inputRef]);
+	const empty = text.trim() === "";
+	const shown = !check.ok && settled === text && !empty ? check.error : null;
+	const markers = shown ? [{
+		line: shown.line,
+		tone: "danger"
+	}] : [];
+	const messageOf = (error) => {
+		if (error.code === "empty") return t.jsonEditorEmpty;
+		const message = template(t[MESSAGE_KEY[error.code]], { char: error.char ?? "" });
+		return template(t.jsonEditorErrorAt, {
+			line: f.number(error.line),
+			column: f.number(error.column),
+			message
+		});
+	};
+	const change = (next) => {
+		if (value === void 0) setInner(next);
+		const c = checkJson(next);
+		onChange?.(next, c.ok ? { isValid: true } : {
+			isValid: false,
+			error: c.error
+		});
+	};
+	const reformat = (width) => {
+		const el = area.current;
+		const r = formatJson(text, width);
+		if (!el || !r.ok || r.text === text) return;
+		applyEdit(el, {
+			from: 0,
+			to: text.length,
+			insert: r.text,
+			selectStart: 0,
+			selectEnd: 0
+		});
+		el.focus();
+	};
+	const goToError = () => {
+		const el = area.current;
+		if (!el || !shown) return;
+		el.focus();
+		const end = Math.min(el.value.length, shown.offset + 1);
+		el.setSelectionRange(shown.offset, end);
+		revealOffset(el, shown.offset);
+	};
+	const canFormat = check.ok && !isReadOnly && !isDisabled;
+	const actions = showActions ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		isDisabled: !canFormat,
+		onPress: () => reformat(indent),
+		children: t.jsonEditorFormat
+	}), /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		isDisabled: !canFormat,
+		onPress: () => reformat(0),
+		children: t.jsonEditorMinify
+	})] }) : void 0;
+	const status = shown ? /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "sm",
+		onPress: goToError,
+		children: t.jsonEditorGoToError
+	}) : check.ok ? /* @__PURE__ */ jsxs("span", {
+		className: JsonEditor_module_default.valid,
+		children: [/* @__PURE__ */ jsx(CheckCircleIcon, {}), t.jsonEditorValid]
+	}) : void 0;
+	return /* @__PURE__ */ jsx(CodeEditor, {
+		...rest,
+		language: "json",
+		languageLabel: "JSON",
+		value: text,
+		onChange: change,
+		inputRef: setRef,
+		isReadOnly,
+		isDisabled,
+		isInvalid: shown !== null,
+		errorMessage: shown ? messageOf(shown) : void 0,
+		markers,
+		headerActions: actions,
+		footerStatus: status,
+		onBlur: () => setSettled(text)
+	});
+}
+export { JsonEditor };

package/dist/editor/JsonEditor/JsonEditor.module.js

@@ -0,0 +1,4 @@
+import './JsonEditor.css';
+// src/editor/JsonEditor/JsonEditor.module.css
+var JsonEditor_module_default = { "valid": "sti-JsonEditor-valid-fca24" };
+export { JsonEditor_module_default as default };

package/dist/editor/JsonEditor/index.d.ts

@@ -0,0 +1,3 @@
+import { JsonError, JsonErrorCode, checkJson, formatJson, parseJson } from "./json.js";
+import { JsonEditor, JsonEditorProps, JsonInfo } from "./JsonEditor.js";
+export { JsonEditor, JsonEditorProps, type JsonError, type JsonErrorCode, JsonInfo, checkJson, formatJson, parseJson };