@mitcsutt/kiln-ui 0.5.0 → 0.7.0

package/dist/components/inputs/JsonInput/JsonInput.js

@@ -0,0 +1,282 @@
+import { cx as e } from "../../../utils/cx.js";
+import { mergeStyles as t } from "../../../utils/responsive.js";
+import { joinIds as n, useMergedRefs as r } from "../internal/refs.js";
+import { useLatest as i } from "../internal/useLatest.js";
+import { Button as a } from "../../actions/Button/Button.js";
+import { CopyButton as o } from "../../actions/CopyButton/CopyButton.js";
+import { markFieldAware as s, useResolvedField as c } from "../internal/FieldContext.js";
+import ee from "../internal/control.module.js";
+import { formatJson as l, minifyJson as te, parseJson as u, tokenizeJson as ne } from "./json.js";
+import d from "./JsonInput.module.js";
+import { forwardRef as f, useEffect as p, useId as re, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { Fragment as ie, jsx as v, jsxs as y } from "react/jsx-runtime";
+//#region src/components/inputs/JsonInput/JsonInput.tsx
+var b = typeof document > "u" ? p : m, x = {
+	parsed: void 0,
+	valid: !0
+};
+function S(e, t) {
+	if (e.trim() === "") return x;
+	let n = u(e);
+	if (!n.ok) {
+		let { message: e, line: t, column: r } = n.error;
+		return {
+			parsed: void 0,
+			valid: !1,
+			error: {
+				message: e,
+				line: t,
+				column: r
+			}
+		};
+	}
+	let r = t?.(n.value);
+	return r === void 0 ? {
+		parsed: n.value,
+		valid: !0
+	} : {
+		parsed: n.value,
+		valid: !1,
+		error: { message: r }
+	};
+}
+function ae(e, t) {
+	return e.valid === t.valid && e.error?.message === t.error?.message && e.error?.line === t.error?.line && e.error?.column === t.error?.column && (e.parsed === t.parsed || JSON.stringify(e.parsed) === JSON.stringify(t.parsed));
+}
+var C = {
+	"{": "}",
+	"[": "]",
+	"\"": "\""
+}, oe = /* @__PURE__ */ new Set([
+	"}",
+	"]",
+	"\""
+]), se = (e) => e === "tab" ? "	" : " ".repeat(e), w = (e, t) => e.lastIndexOf("\n", t - 1) + 1, T = s(f(function({ value: s, defaultValue: u = "", onValueChange: f, onValidationChange: m, validate: x, validationDelay: T = 500, indent: E = 2, sortKeys: D = !1, formatOnBlur: ce = !1, autoClose: O = !0, lineNumbers: k = !0, wrap: A = !1, toolbar: le = !0, minRows: ue = 4, maxRows: j, invalid: de, copyLabel: fe = "Copy JSON", id: pe, disabled: me, required: he, readOnly: ge, className: _e, style: ve, onChange: M, onKeyDown: N, onBlur: P, "aria-describedby": F, "aria-invalid": ye, ...be }, xe) {
+	let I = g(null), Se = r(xe, I), L = c({
+		id: pe,
+		describedBy: F,
+		invalid: de,
+		ariaInvalid: ye,
+		disabled: me,
+		readOnly: ge
+	}), R = !L.disabled && !L.readOnly, z = re(), [Ce, we] = _(u), B = s ?? Ce, V = i({
+		onValueChange: f,
+		onValidationChange: m,
+		validate: x
+	}), H = h(() => S(B, x), [B, x]), [U, Te] = _(H), [W, Ee] = _({
+		text: "",
+		count: 0
+	}), G = (e) => {
+		Ee((t) => ({
+			text: e,
+			count: t.count + 1
+		}));
+	}, K = g(!1), q = g(null), J = (e) => {
+		Te((t) => ae(t, e) ? t : e);
+	};
+	p(() => {
+		if (H.valid) {
+			J(H);
+			return;
+		}
+		let e = setTimeout(() => {
+			J(H);
+		}, T);
+		return () => {
+			clearTimeout(e);
+		};
+	}, [H, T]), p(() => {
+		V.current.onValidationChange?.(U);
+	}, [U, V]), b(() => {
+		let e = q.current;
+		e && I.current && (q.current = null, I.current.setSelectionRange(e[0], e[1]));
+	});
+	let Y = (e) => {
+		s === void 0 && we(e), V.current.onValueChange?.(e, S(e, V.current.validate));
+	}, X = (e, t, n, r = [e + n.length, e + n.length]) => {
+		let i = I.current;
+		if (!i) return;
+		let a = B.slice(0, e) + n + B.slice(t);
+		if (i.focus(), i.setSelectionRange(e, t), typeof document.execCommand == "function" && document.execCommand(n === "" ? "delete" : "insertText", !1, n) && i.value === a) {
+			i.setSelectionRange(...r);
+			return;
+		}
+		q.current = r, Y(a);
+	}, Z = (e) => {
+		let t = e === "format" ? l(B, {
+			indent: E,
+			sortKeys: D
+		}) : te(B, { sortKeys: D });
+		if (t === void 0) {
+			let e = H.error?.line;
+			G(B.trim() === "" ? "Nothing to format" : `Fix the error${e ? ` on line ${String(e)}` : ""} first`), J(H);
+			return;
+		}
+		if (G(e === "format" ? "Formatted" : "Minified"), t === B) return;
+		let n = Math.min(I.current?.selectionStart ?? 0, t.length);
+		X(0, B.length, t, [n, n]);
+	}, De = (e) => {
+		M?.(e), Y(e.target.value);
+	}, Oe = (e) => {
+		if (P?.(e), K.current = !1, J(H), ce && R && H.valid) {
+			let e = l(B, {
+				indent: E,
+				sortKeys: D
+			});
+			e !== void 0 && e !== B && Y(e);
+		}
+	}, ke = (e) => {
+		if (N?.(e), e.defaultPrevented || e.nativeEvent.isComposing || !R) return;
+		let t = e.currentTarget, { selectionStart: n, selectionEnd: r } = t, i = se(E);
+		if (e.key === "Escape") {
+			K.current = !0, G("Press Tab to leave the editor");
+			return;
+		}
+		if (e.key === "Tab" && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			if (K.current) {
+				K.current = !1;
+				return;
+			}
+			e.preventDefault();
+			let t = w(B, n), a = B.slice(n, r).includes("\n");
+			if (!e.shiftKey && !a) {
+				X(n, r, i);
+				return;
+			}
+			let o = r > n && B[r - 1] === "\n" ? r - 1 : r, s = B.slice(t, o), c = s.split("\n").map((t) => e.shiftKey ? t.startsWith(i) ? t.slice(i.length) : t.replace(/^[ \t]+/, (e) => e.slice(i.length)) : `${i}${t}`).join("\n");
+			if (c === s) return;
+			X(t, o, c, [t, t + c.length]);
+			return;
+		}
+		if (K.current = !1, e.key === "F" || e.code === "KeyF") {
+			e.shiftKey && e.altKey && !e.ctrlKey && !e.metaKey && (e.preventDefault(), Z("format"));
+			return;
+		}
+		if (e.ctrlKey || e.metaKey || e.altKey) return;
+		if (e.key === "Enter") {
+			e.preventDefault();
+			let t = w(B, n), a = /^[ \t]*/.exec(B.slice(t, n))?.[0] ?? "", o = B.slice(0, n).trimEnd().at(-1), s = B[r], c = o === "{" || o === "[";
+			if (c && s === C[o]) {
+				let e = `\n${a}${i}`, t = n + e.length;
+				X(n, r, `${e}\n${a}`, [t, t]);
+			} else X(n, r, `\n${a}${c ? i : ""}`);
+			return;
+		}
+		if (e.key === "Backspace" && n === r && n > 0) {
+			let t = B.charAt(n - 1);
+			O && C[t] !== void 0 && B[n] === C[t] && (e.preventDefault(), X(n - 1, n + 1, ""));
+			return;
+		}
+		if (!O || e.key.length !== 1) return;
+		if (oe.has(e.key) && n === r && B[n] === e.key && (e.key !== "\"" || B[n - 1] !== "\\")) {
+			e.preventDefault(), t.setSelectionRange(n + 1, n + 1);
+			return;
+		}
+		let a = C[e.key];
+		if (a === void 0) return;
+		if (e.key === "\"") {
+			let e = B[n - 1] ?? "", t = B[r] ?? "";
+			if (/[\w"\\]/.test(e) || /[\w"]/.test(t)) return;
+		}
+		e.preventDefault();
+		let o = B.slice(n, r), s = n + 1 + o.length;
+		X(n, r, `${e.key}${o}${a}`, [s, s]);
+	}, Q = h(() => ne(B), [B]), Ae = U.error?.line, $ = L.invalid || !U.valid, je = String(Q.length).length;
+	return /* @__PURE__ */ y("div", {
+		className: e(ee.box, d.root, _e),
+		style: t({
+			"--_min-rows": ue,
+			"--_max-rows": j,
+			"--_digits": je
+		}, ve),
+		"data-invalid": $ || void 0,
+		"data-disabled": L.disabled || void 0,
+		"data-readonly": L.readOnly || void 0,
+		"data-wrap": A || void 0,
+		"data-line-numbers": k || void 0,
+		"data-max-rows": j ? "" : void 0,
+		children: [
+			le ? /* @__PURE__ */ y("div", {
+				className: d.toolbar,
+				children: [R ? /* @__PURE__ */ y(ie, { children: [/* @__PURE__ */ v(a, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					onClick: () => {
+						Z("format");
+					},
+					children: "Format"
+				}), /* @__PURE__ */ v(a, {
+					variant: "ghost",
+					tone: "neutral",
+					size: "sm",
+					onClick: () => {
+						Z("minify");
+					},
+					children: "Minify"
+				})] }) : null, /* @__PURE__ */ v(o, {
+					className: d.copy,
+					value: () => B,
+					label: fe,
+					size: "sm",
+					disabled: L.disabled
+				})]
+			}) : null,
+			/* @__PURE__ */ v("div", {
+				className: d.scroller,
+				children: /* @__PURE__ */ y("div", {
+					className: d.stack,
+					children: [/* @__PURE__ */ v("pre", {
+						className: d.highlight,
+						"aria-hidden": "true",
+						children: Q.map((e, t) => /* @__PURE__ */ v("span", {
+							className: d.line,
+							"data-line": k ? t + 1 : void 0,
+							"data-error": Ae === t + 1 || void 0,
+							children: e.map((e, t) => e.type ? /* @__PURE__ */ v("span", {
+								className: d.token,
+								"data-token": e.type,
+								children: e.content
+							}, t) : e.content)
+						}, t))
+					}), /* @__PURE__ */ v("textarea", {
+						ref: Se,
+						id: L.id,
+						className: d.textarea,
+						value: B,
+						onChange: De,
+						onKeyDown: ke,
+						onBlur: Oe,
+						wrap: A ? "soft" : "off",
+						spellCheck: !1,
+						autoCapitalize: "off",
+						autoComplete: "off",
+						autoCorrect: "off",
+						disabled: L.disabled,
+						readOnly: L.readOnly,
+						required: he ?? L.required,
+						"aria-describedby": n(L.describedBy, R ? z : void 0),
+						"aria-invalid": $ || void 0,
+						"aria-required": L.required || void 0,
+						"aria-busy": L.busy || void 0,
+						...be
+					})]
+				})
+			}),
+			R ? /* @__PURE__ */ v("span", {
+				id: z,
+				hidden: !0,
+				children: "Tab inserts an indent. Press Escape, then Tab, to leave the editor."
+			}) : null,
+			/* @__PURE__ */ v("span", {
+				className: d.status,
+				role: "status",
+				children: W.text ? /* @__PURE__ */ v("span", { children: W.text }, W.count) : null
+			})
+		]
+	});
+}));
+//#endregion
+export { T as JsonInput, S as validateJson };
+
+//# sourceMappingURL=JsonInput.js.map

package/dist/components/inputs/JsonInput/JsonInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonInput.js","names":["control","styles","_Fragment","control_module_default","JsonInput_module_default","Fragment$1","useIsomorphicLayoutEffect","useEffect","useLayoutEffect","EMPTY","validateJson","text","parsed","parseJson","message","validate","sameValidation","a","b","PAIRS","CLOSERS","unitOf","indent","lineStart","offset","JsonInput","markFieldAware","forwardRef","valueProp","invalidProp","idProp","disabledProp","requiredProp","readOnlyProp","describedByProp","ariaInvalid","rest","area","useRef","composedRef","useMergedRefs","ref","field","useResolvedField","editable","hintId","useId","uncontrolled","setUncontrolled","useState","defaultValue","latest","useLatest","validation","useMemo","shown","setShown","announcement","setAnnouncement","announce","previous","escaped","pendingSelection","show","next","timer","validationDelay","selection","commit","edit","start","insert","el","end","reformat","mode","formatJson","minifyJson","line","caret","handleChange","onChange","event","handleBlur","onBlur","formatOnBlur","handleKeyDown","onKeyDown","unit","from","multiline","to","block","lead","before","after","opens","inner","open","autoClose","close","selected","lines","tokenizeJson","errorLine","invalid","digits","cx","className","mergeStyles","minRows","maxRows","style","wrap","lineNumbers","toolbar","Button","CopyButton","copyLabel","i","tokens","token","j","joinIds"],"sources":["../../../../src/components/inputs/JsonInput/JsonInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useEffect,\n  useId,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type FocusEvent,\n  type KeyboardEvent,\n  type TextareaHTMLAttributes,\n} from 'react'\nimport { cx } from '#utils/cx'\nimport { mergeStyles } from '#utils/responsive'\nimport { Button } from '#components/actions/Button'\nimport { CopyButton } from '#components/actions/CopyButton'\nimport { markFieldAware, useResolvedField } from '#components/inputs/internal/FieldContext'\nimport { joinIds, useMergedRefs } from '#components/inputs/internal/refs'\nimport { useLatest } from '#components/inputs/internal/useLatest'\nimport control from '#components/inputs/internal/control.module.css'\nimport { formatJson, minifyJson, parseJson, tokenizeJson, type JsonIndent } from './json'\nimport styles from './JsonInput.module.css'\n\n// Layout effects warn during server rendering; on the server there's nothing to restore anyway.\nconst useIsomorphicLayoutEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect\n\n/** Why the text isn't acceptable. A syntax error has the line and column it points at. */\nexport interface JsonInputError {\n  message: string\n  line?: number\n  column?: number\n}\n\n/** What a JSON text holds, and whether it's acceptable. */\nexport interface JsonValidation {\n  /** The parsed value, when the text is valid JSON. `undefined` when it's empty or invalid. */\n  parsed: unknown\n  /** `true` when the text is valid JSON that passes `validate`, or is empty. */\n  valid: boolean\n  /** Why it isn't valid. */\n  error?: JsonInputError\n}\n\nexport interface JsonInputProps extends Omit<\n  TextareaHTMLAttributes<HTMLTextAreaElement>,\n  'value' | 'defaultValue' | 'wrap' | 'rows' | 'cols' | 'children'\n> {\n  /** The text (controlled). */\n  value?: string\n  /** The starting text (uncontrolled). */\n  defaultValue?: string\n  /** Called with the new text, and what it holds, on every change. */\n  onValueChange?: (value: string, validation: JsonValidation) => void\n  /**\n   * Called when the validation the input shows changes: once typing pauses for\n   * `validationDelay`, on blur, and straight away when the text becomes valid again.\n   */\n  onValidationChange?: (validation: JsonValidation) => void\n  /**\n   * Your own rules for a value that parses: return a message to reject it, or `undefined` to\n   * accept it. Wire a JSON Schema validator in here.\n   */\n  validate?: (parsed: unknown) => string | undefined\n  /** How long typing has to pause before an error shows, in ms. Default `500`. */\n  validationDelay?: number\n  /** How Format indents: `2` (default), `4` or `'tab'`. Also what Tab inserts. */\n  indent?: JsonIndent\n  /** Sort object keys when formatting or minifying. */\n  sortKeys?: boolean\n  /** Format the text when the input loses focus, if it's valid. */\n  formatOnBlur?: boolean\n  /** Close brackets and quotes as you type them. Default `true`. */\n  autoClose?: boolean\n  /** Number the lines. Default `true`. */\n  lineNumbers?: boolean\n  /** Wrap long lines instead of scrolling sideways. */\n  wrap?: boolean\n  /** Show the Format, Minify and Copy actions above the text. Default `true`. */\n  toolbar?: boolean\n  /** The least height, in lines. Default `4`. */\n  minRows?: number\n  /** Grow with the text up to this many lines, then scroll. Without it, it keeps growing. */\n  maxRows?: number\n  /** Critical border and `aria-invalid`, on top of its own validation. Set for you inside a `Field`. */\n  invalid?: boolean\n  /** Name of the copy action. Default \"Copy JSON\". */\n  copyLabel?: string\n}\n\nconst EMPTY: JsonValidation = { parsed: undefined, valid: true }\n\n/** Parses `text` and runs `validate` on the result. Empty text is valid and holds nothing. */\nexport function validateJson(\n  text: string,\n  validate?: (parsed: unknown) => string | undefined,\n): JsonValidation {\n  if (text.trim() === '') return EMPTY\n  const parsed = parseJson(text)\n  if (!parsed.ok) {\n    const { message, line, column } = parsed.error\n    return { parsed: undefined, valid: false, error: { message, line, column } }\n  }\n  const message = validate?.(parsed.value)\n  return message === undefined\n    ? { parsed: parsed.value, valid: true }\n    : { parsed: parsed.value, valid: false, error: { message } }\n}\n\n/** Whether two validations would show the same thing. `parsed` is compared by its JSON text. */\nfunction sameValidation(a: JsonValidation, b: JsonValidation): boolean {\n  return (\n    a.valid === b.valid &&\n    a.error?.message === b.error?.message &&\n    a.error?.line === b.error?.line &&\n    a.error?.column === b.error?.column &&\n    (a.parsed === b.parsed || JSON.stringify(a.parsed) === JSON.stringify(b.parsed))\n  )\n}\n\nconst PAIRS: Record<string, string> = { '{': '}', '[': ']', '\"': '\"' }\nconst CLOSERS = new Set(['}', ']', '\"'])\n\nconst unitOf = (indent: JsonIndent) => (indent === 'tab' ? '\\t' : ' '.repeat(indent))\n\n/** Start of the line `offset` is on. */\nconst lineStart = (text: string, offset: number) => text.lastIndexOf('\\n', offset - 1) + 1\n\n/**\n * A JSON editor in a field box: it highlights with the theme, numbers the lines, marks the line\n * with an error, and formats or minifies on demand.\n *\n * @remarks\n * `JsonInput` is for JSON that people edit by hand: a config blob, a request payload, a fixture.\n * It parses as you type and, once typing pauses, marks the line that's wrong and sets\n * `aria-invalid`. It never changes text that isn't valid. `onValueChange` gets the text and what\n * it holds (`parsed`, `valid` and `error`) on every change. For a labelled field that shows the\n * error message, use {@link JsonField | JsonField}.\n *\n * Format re-indents the text (`indent` is `2`, `4` or `'tab'`), and Minify puts it on one line.\n * Both keep numbers and strings exactly as written, so a long ID or a price like `1.50` survives,\n * and both keep the order of keys unless you pass `sortKeys`. `formatOnBlur` formats valid text\n * as the input loses focus.\n *\n * It grows with its content from `minRows` up to `maxRows`, then scrolls. `readOnly` makes it a\n * viewer: no Format or Minify, and Tab moves on as usual.\n *\n * ## Keyboard\n *\n * - **Tab** indents, and **Shift+Tab** outdents, the line or the selected lines. To leave the\n *   editor with the keyboard, press **Escape**, then **Tab**. Screen readers hear this in the\n *   input's description.\n * - **Enter** keeps the indent, and indents again after `{` or `[`.\n * - Typing `{`, `[` or `\"` closes it for you (`autoClose`), and typing the closer steps over it.\n * - **Shift+Alt+F** formats.\n *\n * ## Your own rules and JSON Schema\n *\n * `validate` gets the parsed value and returns a message to reject it. That's where a JSON Schema\n * validator goes, so Kiln doesn't bundle one. With [Ajv](https://ajv.js.org):\n *\n * ```tsx\n * import Ajv from 'ajv'\n * import { JsonField } from '@mitcsutt/kiln-ui'\n *\n * const ajv = new Ajv()\n * const check = ajv.compile(payloadSchema)\n *\n * export function PayloadField() {\n *   return (\n *     <JsonField\n *       label=\"Payload\"\n *       validate={(value) => (check(value) ? undefined : ajv.errorsText(check.errors))}\n *     />\n *   )\n * }\n * ```\n *\n * @privateRemarks\n * A transparent textarea over a highlighted <pre> in the same grid cell, so the browser does the\n * editing, selection, undo and IME, and the <pre> only paints. Highlighting is a built-in JSON\n * tokenizer rather than the shiki `highlight` entry: JSON's grammar is small enough to get exactly\n * right without a peer dependency, so the field works the same everywhere. Edits from the keyboard\n * go through execCommand('insertText') so they stay on the native undo stack.\n */\nexport const JsonInput = markFieldAware(\n  forwardRef<HTMLTextAreaElement, JsonInputProps>(function JsonInput(\n    {\n      value: valueProp,\n      defaultValue = '',\n      onValueChange,\n      onValidationChange,\n      validate,\n      validationDelay = 500,\n      indent = 2,\n      sortKeys = false,\n      formatOnBlur = false,\n      autoClose = true,\n      lineNumbers = true,\n      wrap = false,\n      toolbar = true,\n      minRows = 4,\n      maxRows,\n      invalid: invalidProp,\n      copyLabel = 'Copy JSON',\n      id: idProp,\n      disabled: disabledProp,\n      required: requiredProp,\n      readOnly: readOnlyProp,\n      className,\n      style,\n      onChange,\n      onKeyDown,\n      onBlur,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      ...rest\n    },\n    ref,\n  ) {\n    const area = useRef<HTMLTextAreaElement>(null)\n    const composedRef = useMergedRefs(ref, area)\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n    })\n    const editable = !field.disabled && !field.readOnly\n    const hintId = useId()\n\n    const [uncontrolled, setUncontrolled] = useState(defaultValue)\n    const text = valueProp ?? uncontrolled\n    const latest = useLatest({ onValueChange, onValidationChange, validate })\n\n    const validation = useMemo(() => validateJson(text, validate), [text, validate])\n    const [shown, setShown] = useState<JsonValidation>(validation)\n    const [announcement, setAnnouncement] = useState({ text: '', count: 0 })\n    // A new node each time, so the same message (\"Formatted\") is announced again.\n    const announce = (message: string) => {\n      setAnnouncement((previous) => ({ text: message, count: previous.count + 1 }))\n    }\n    const escaped = useRef(false)\n    const pendingSelection = useRef<[number, number] | null>(null)\n\n    const show = (next: JsonValidation) => {\n      setShown((previous) => (sameValidation(previous, next) ? previous : next))\n    }\n\n    // Show a fix at once; hold a new error back until typing pauses.\n    useEffect(() => {\n      if (validation.valid) {\n        show(validation)\n        return\n      }\n      const timer = setTimeout(() => {\n        show(validation)\n      }, validationDelay)\n      return () => {\n        clearTimeout(timer)\n      }\n    }, [validation, validationDelay])\n\n    useEffect(() => {\n      latest.current.onValidationChange?.(shown)\n    }, [shown, latest])\n\n    // Restore the caret after an edit that went through state rather than the browser.\n    useIsomorphicLayoutEffect(() => {\n      const selection = pendingSelection.current\n      if (selection && area.current) {\n        pendingSelection.current = null\n        area.current.setSelectionRange(selection[0], selection[1])\n      }\n    })\n\n    const commit = (next: string) => {\n      if (valueProp === undefined) setUncontrolled(next)\n      latest.current.onValueChange?.(next, validateJson(next, latest.current.validate))\n    }\n\n    /**\n     * Replace `start`–`end` with `insert`, then select `selection` (by default, a caret after the\n     * insert). Through the browser's own editing where it can, so Undo works, or through state.\n     */\n    const edit = (\n      start: number,\n      end: number,\n      insert: string,\n      selection: [number, number] = [start + insert.length, start + insert.length],\n    ) => {\n      const el = area.current\n      if (!el) return\n      const next = text.slice(0, start) + insert + text.slice(end)\n      el.focus()\n      el.setSelectionRange(start, end)\n      // execCommand is deprecated, but it's the only edit that joins the native undo stack.\n      const native =\n        // eslint-disable-next-line @typescript-eslint/no-deprecated -- see above\n        typeof document.execCommand === 'function' &&\n        // eslint-disable-next-line @typescript-eslint/no-deprecated -- see above\n        document.execCommand(insert === '' ? 'delete' : 'insertText', false, insert)\n      if (native && el.value === next) {\n        el.setSelectionRange(...selection)\n        return\n      }\n      pendingSelection.current = selection\n      commit(next)\n    }\n\n    const reformat = (mode: 'format' | 'minify') => {\n      const next =\n        mode === 'format' ? formatJson(text, { indent, sortKeys }) : minifyJson(text, { sortKeys })\n      if (next === undefined) {\n        const line = validation.error?.line\n        announce(\n          text.trim() === ''\n            ? 'Nothing to format'\n            : `Fix the error${line ? ` on line ${String(line)}` : ''} first`,\n        )\n        show(validation)\n        return\n      }\n      announce(mode === 'format' ? 'Formatted' : 'Minified')\n      if (next === text) return\n      const caret = Math.min(area.current?.selectionStart ?? 0, next.length)\n      edit(0, text.length, next, [caret, caret])\n    }\n\n    const handleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {\n      onChange?.(event)\n      commit(event.target.value)\n    }\n\n    const handleBlur = (event: FocusEvent<HTMLTextAreaElement>) => {\n      onBlur?.(event)\n      escaped.current = false\n      show(validation)\n      if (formatOnBlur && editable && validation.valid) {\n        const next = formatJson(text, { indent, sortKeys })\n        if (next !== undefined && next !== text) commit(next)\n      }\n    }\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented || event.nativeEvent.isComposing || !editable) return\n      const el = event.currentTarget\n      const { selectionStart: start, selectionEnd: end } = el\n      const unit = unitOf(indent)\n\n      if (event.key === 'Escape') {\n        escaped.current = true\n        announce('Press Tab to leave the editor')\n        return\n      }\n      if (event.key === 'Tab' && !event.ctrlKey && !event.metaKey && !event.altKey) {\n        if (escaped.current) {\n          escaped.current = false\n          return\n        }\n        event.preventDefault()\n        const from = lineStart(text, start)\n        const multiline = text.slice(start, end).includes('\\n')\n        if (!event.shiftKey && !multiline) {\n          edit(start, end, unit)\n          return\n        }\n        const to = end > start && text[end - 1] === '\\n' ? end - 1 : end\n        const block = text.slice(from, to)\n        const lines = block.split('\\n')\n        const changed = lines.map((line) =>\n          event.shiftKey\n            ? line.startsWith(unit)\n              ? line.slice(unit.length)\n              : line.replace(/^[ \\t]+/, (lead) => lead.slice(unit.length))\n            : `${unit}${line}`,\n        )\n        const next = changed.join('\\n')\n        if (next === block) return\n        // Keep the lines selected, so Tab and Shift+Tab can be pressed again.\n        edit(from, to, next, [from, from + next.length])\n        return\n      }\n      escaped.current = false\n\n      if (event.key === 'F' || event.code === 'KeyF') {\n        if (event.shiftKey && event.altKey && !event.ctrlKey && !event.metaKey) {\n          event.preventDefault()\n          reformat('format')\n        }\n        return\n      }\n      if (event.ctrlKey || event.metaKey || event.altKey) return\n\n      if (event.key === 'Enter') {\n        event.preventDefault()\n        const from = lineStart(text, start)\n        const lead = /^[ \\t]*/.exec(text.slice(from, start))?.[0] ?? ''\n        const before = text.slice(0, start).trimEnd().at(-1)\n        const after = text[end]\n        const opens = before === '{' || before === '['\n        if (opens && after === PAIRS[before]) {\n          const inner = `\\n${lead}${unit}`\n          const caret = start + inner.length\n          edit(start, end, `${inner}\\n${lead}`, [caret, caret])\n        } else {\n          edit(start, end, `\\n${lead}${opens ? unit : ''}`)\n        }\n        return\n      }\n      if (event.key === 'Backspace' && start === end && start > 0) {\n        const open = text.charAt(start - 1)\n        if (autoClose && PAIRS[open] !== undefined && text[start] === PAIRS[open]) {\n          event.preventDefault()\n          edit(start - 1, start + 1, '')\n        }\n        return\n      }\n      if (!autoClose || event.key.length !== 1) return\n      if (CLOSERS.has(event.key) && start === end && text[start] === event.key) {\n        // Step over the closer that was typed for you.\n        if (event.key !== '\"' || text[start - 1] !== '\\\\') {\n          event.preventDefault()\n          el.setSelectionRange(start + 1, start + 1)\n          return\n        }\n      }\n      const close = PAIRS[event.key]\n      if (close === undefined) return\n      if (event.key === '\"') {\n        const previous = text[start - 1] ?? ''\n        const next = text[end] ?? ''\n        if (/[\\w\"\\\\]/.test(previous) || /[\\w\"]/.test(next)) return\n      }\n      event.preventDefault()\n      const selected = text.slice(start, end)\n      const caret = start + 1 + selected.length\n      edit(start, end, `${event.key}${selected}${close}`, [caret, caret])\n    }\n\n    const lines = useMemo(() => tokenizeJson(text), [text])\n    const errorLine = shown.error?.line\n    const invalid = field.invalid || !shown.valid\n    const digits = String(lines.length).length\n\n    return (\n      <div\n        className={cx(control.box, styles.root, className)}\n        style={mergeStyles(\n          {\n            '--_min-rows': minRows,\n            '--_max-rows': maxRows,\n            '--_digits': digits,\n          } as CSSProperties,\n          style,\n        )}\n        data-invalid={invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        data-wrap={wrap || undefined}\n        data-line-numbers={lineNumbers || undefined}\n        data-max-rows={maxRows ? '' : undefined}\n      >\n        {toolbar ? (\n          <div className={styles.toolbar}>\n            {editable ? (\n              <>\n                <Button\n                  variant=\"ghost\"\n                  tone=\"neutral\"\n                  size=\"sm\"\n                  onClick={() => {\n                    reformat('format')\n                  }}\n                >\n                  Format\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  tone=\"neutral\"\n                  size=\"sm\"\n                  onClick={() => {\n                    reformat('minify')\n                  }}\n                >\n                  Minify\n                </Button>\n              </>\n            ) : null}\n            <CopyButton\n              className={styles.copy}\n              value={() => text}\n              label={copyLabel}\n              size=\"sm\"\n              disabled={field.disabled}\n            />\n          </div>\n        ) : null}\n        <div className={styles.scroller}>\n          <div className={styles.stack}>\n            <pre className={styles.highlight} aria-hidden=\"true\">\n              {lines.map((tokens, i) => (\n                <span\n                  key={i}\n                  className={styles.line}\n                  data-line={lineNumbers ? i + 1 : undefined}\n                  data-error={errorLine === i + 1 || undefined}\n                >\n                  {tokens.map((token, j) =>\n                    token.type ? (\n                      <span key={j} className={styles.token} data-token={token.type}>\n                        {token.content}\n                      </span>\n                    ) : (\n                      token.content\n                    ),\n                  )}\n                </span>\n              ))}\n            </pre>\n            <textarea\n              ref={composedRef}\n              id={field.id}\n              className={styles.textarea}\n              value={text}\n              onChange={handleChange}\n              onKeyDown={handleKeyDown}\n              onBlur={handleBlur}\n              wrap={wrap ? 'soft' : 'off'}\n              spellCheck={false}\n              autoCapitalize=\"off\"\n              autoComplete=\"off\"\n              autoCorrect=\"off\"\n              disabled={field.disabled}\n              readOnly={field.readOnly}\n              required={requiredProp ?? field.required}\n              aria-describedby={joinIds(field.describedBy, editable ? hintId : undefined)}\n              aria-invalid={invalid || undefined}\n              aria-required={field.required || undefined}\n              aria-busy={field.busy || undefined}\n              {...rest}\n            />\n          </div>\n        </div>\n        {editable ? (\n          <span id={hintId} hidden>\n            Tab inserts an indent. Press Escape, then Tab, to leave the editor.\n          </span>\n        ) : null}\n        <span className={styles.status} role=\"status\">\n          {announcement.text ? <span key={announcement.count}>{announcement.text}</span> : null}\n        </span>\n      </div>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/JsonInput/JsonInput.module.js

@@ -0,0 +1,16 @@
+//#region src/components/inputs/JsonInput/JsonInput.module.css
+var e = "kiln-JsonInput__root", t = "kiln-JsonInput__textarea", n = "kiln-JsonInput__toolbar", r = "kiln-JsonInput__scroller", i = "kiln-JsonInput__stack", a = "kiln-JsonInput__highlight", o = "kiln-JsonInput__line", s = "kiln-JsonInput__token", c = "kiln-JsonInput__status", l = {
+	root: e,
+	textarea: t,
+	toolbar: n,
+	scroller: r,
+	stack: i,
+	highlight: a,
+	line: o,
+	token: s,
+	status: c
+};
+//#endregion
+export { l as default, a as highlight, o as line, e as root, r as scroller, i as stack, c as status, t as textarea, s as token, n as toolbar };
+
+//# sourceMappingURL=JsonInput.module.js.map

package/dist/components/inputs/JsonInput/JsonInput.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonInput.module.js","names":["root","textarea","toolbar","scroller","stack","highlight","line","token","status","JsonInput_module_default"],"sources":["../../../../src/components/inputs/JsonInput/JsonInput.module.css"],"sourcesContent":["/*\n * The box, its border and its states are the field box (inputs/internal/control.module.css).\n *\n * Component tokens (themes may set any of these on [data-theme]):\n *   --json-input-size        code size, default var(--text-sm)\n *   --json-input-error-bg    the marked line's fill, default var(--tone-critical-soft)\n *\n * The text is a transparent <textarea> laid over a highlighted <pre> in one grid cell: the\n * browser edits, the <pre> paints. Both must set the same font, padding, line height, tab size\n * and wrapping, or the caret drifts from the glyphs. Line numbers sit in each line's start\n * padding, so they stay with their line when it wraps. --_min-rows, --_max-rows and --_digits\n * are written inline.\n */\n.root {\n  --_min-rows: 4;\n  --_max-rows: 0;\n  --_digits: 1;\n  --_pad: var(--space-3);\n  --_py: var(--space-2);\n  --_gutter: 0px;\n\n  display: flex;\n  flex-direction: column;\n  min-inline-size: 0;\n  overflow: hidden;\n  padding: 0;\n}\n\n.root[data-line-numbers] {\n  --_gutter: calc(var(--_digits) * 1ch + var(--space-3));\n}\n\n/* The ring goes round the whole box while the text has focus, never round the toolbar's buttons. */\n.root:has(.textarea:focus-visible) {\n  outline: 2px solid var(--color-focus);\n  outline-offset: 2px;\n}\n\n.toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: var(--space-1);\n  padding: var(--space-1);\n  border-block-end: var(--border-width) solid var(--color-line);\n}\n\n.scroller {\n  overflow: auto;\n  font-family: var(--font-mono);\n  font-stretch: var(--mono-stretch);\n  font-size: var(--json-input-size, var(--text-sm));\n  font-variant-ligatures: none;\n  line-height: 1.6;\n  scrollbar-width: thin;\n}\n.root[data-max-rows] .scroller {\n  max-block-size: calc(var(--_max-rows) * 1lh + 2 * var(--_py));\n}\n\n.stack {\n  display: grid;\n  min-inline-size: 100%;\n  inline-size: max-content;\n  min-block-size: calc(var(--_min-rows) * 1lh + 2 * var(--_py));\n}\n.root[data-wrap] .stack {\n  inline-size: 100%;\n}\n\n.highlight,\n.textarea {\n  grid-area: 1 / 1;\n  box-sizing: border-box;\n  margin: 0;\n  padding-block: var(--_py);\n  font: inherit;\n  letter-spacing: 0;\n  tab-size: 2;\n  white-space: pre;\n  overflow-wrap: normal;\n}\n.root[data-wrap] .highlight,\n.root[data-wrap] .textarea {\n  white-space: pre-wrap;\n  overflow-wrap: anywhere;\n}\n\n.highlight {\n  padding-inline: 0;\n  color: var(--color-ink);\n  pointer-events: none;\n  user-select: none;\n}\n\n.line {\n  display: block;\n  position: relative;\n  min-block-size: 1lh;\n  padding-inline: calc(var(--_pad) + var(--_gutter)) var(--_pad);\n}\n.root[data-line-numbers] .line::before {\n  content: attr(data-line);\n  position: absolute;\n  inset-inline-start: 0;\n  inline-size: calc(var(--_pad) + var(--_digits) * 1ch);\n  text-align: end;\n  color: var(--color-ink-subtle);\n  font-variant-numeric: tabular-nums;\n}\n.line[data-error] {\n  background: var(--json-input-error-bg, var(--tone-critical-soft));\n}\n.root[data-line-numbers] .line[data-error]::before {\n  color: var(--tone-critical-text);\n}\n\n.textarea {\n  display: block;\n  inline-size: 100%;\n  block-size: 100%;\n  min-inline-size: 0;\n  padding-inline: calc(var(--_pad) + var(--_gutter)) var(--_pad);\n  border: 0;\n  border-radius: 0;\n  outline: none;\n  background: transparent;\n  color: transparent;\n  caret-color: var(--color-ink);\n  overflow: hidden;\n  resize: none;\n}\n.textarea::selection {\n  background: var(--color-selection);\n  color: transparent;\n}\n.textarea::placeholder {\n  color: var(--color-ink-subtle);\n}\n.textarea:disabled {\n  cursor: not-allowed;\n}\n\n/* The theme's code colours, as CodeBlock's highlighting maps them. */\n.token[data-token='type'] {\n  color: var(--tone-info-text);\n}\n.token[data-token='string'] {\n  color: var(--tone-positive-text);\n}\n.token[data-token='constant'] {\n  color: var(--tone-caution-text);\n}\n.token[data-token='punctuation'] {\n  color: var(--color-ink-muted);\n}\n\n.root[data-disabled] .highlight {\n  color: var(--color-ink-subtle);\n}\n.root[data-disabled] .token {\n  color: inherit;\n}\n\n.status {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  margin: -1px;\n  padding: 0;\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* High contrast: show the text itself, since the painted layer may lose its colours. */\n@media (forced-colors: active) {\n  .textarea {\n    color: CanvasText;\n  }\n  .highlight {\n    visibility: hidden;\n  }\n}\n"],"mappings":""}

package/dist/components/inputs/JsonInput/index.d.ts

@@ -0,0 +1,4 @@
+export { JsonInput, validateJson } from './JsonInput.js';
+export type { JsonInputProps, JsonValidation, JsonInputError } from './JsonInput.js';
+export { formatJson, minifyJson } from './json.js';
+export type { JsonIndent, JsonSyntaxError } from './json.js';

package/dist/components/inputs/JsonInput/json.d.ts

@@ -0,0 +1,59 @@
+import type { CodeToken } from '../../display/CodeBlock/index.js';
+/** Where a JSON text goes wrong: a message, and the 1-based line and column it points at. */
+export interface JsonSyntaxError {
+    message: string;
+    line: number;
+    column: number;
+    /** 0-based offset into the text. */
+    offset: number;
+}
+/** How formatted JSON is indented: two spaces, four spaces, or a tab. */
+export type JsonIndent = 2 | 4 | 'tab';
+type JsonNode = {
+    kind: 'object';
+    members: {
+        key: string;
+        value: JsonNode;
+    }[];
+} | {
+    kind: 'array';
+    items: JsonNode[];
+} | {
+    kind: 'literal';
+    raw: string;
+};
+export type JsonParse = {
+    ok: true;
+    node: JsonNode;
+    value: unknown;
+} | {
+    ok: false;
+    error: JsonSyntaxError;
+};
+/** 1-based line and column of `offset`. */
+export declare function positionOf(text: string, offset: number): {
+    line: number;
+    column: number;
+};
+/** Parses `text` strictly, with the position and a plain message when it isn't valid. */
+export declare function parseJson(text: string): JsonParse;
+/**
+ * `text` re-indented, or `undefined` when it isn't valid JSON. Numbers and strings keep their
+ * exact text, and keys keep their order unless `sortKeys`.
+ */
+export declare function formatJson(text: string, { indent, sortKeys }?: {
+    indent?: JsonIndent;
+    sortKeys?: boolean;
+}): string | undefined;
+/** `text` on one line with no spaces, or `undefined` when it isn't valid JSON. */
+export declare function minifyJson(text: string, { sortKeys }?: {
+    sortKeys?: boolean;
+}): string | undefined;
+/**
+ * Tokens for highlighting, one array per line, in `CodeBlock`'s token types: property names are
+ * `type`, strings `string`, numbers, `true`, `false` and `null` `constant`, and brackets, colons
+ * and commas `punctuation`. Tolerant: text that isn't valid JSON yet still highlights as far as
+ * it reads.
+ */
+export declare function tokenizeJson(text: string): CodeToken[][];
+export {};