@chelone/vue 0.6.0 → 0.7.0

package/dist/components/mdx-editor/mdx-field.vue.d.ts

@@ -1,3 +1,19 @@
+/**
+ * `<MdxField>` — shows a markdown field value in a read-only Crepe editor. The
+ * Vue counterpart of `@chelone/react`'s `mdx-editor/mdx-field.tsx`; it wraps
+ * Milkdown's Crepe because `@mdxeditor/editor` is React only.
+ *
+ * Needs the optional `@milkdown/crepe` and `@milkdown/kit` peers. From npm, also
+ * import `@chelone/vue/mdx-editor.css` for the Chelone theme; the registry item
+ * ships that file with the component. The `#empty` slot replaces the editor
+ * when the value is missing.
+ *
+ * @example
+ * import { MdxField } from "@chelone/vue/mdx-editor";
+ *
+ * <MdxField source="body" empty="No content" />
+ */
+import { type VNode } from "vue";
 import type { LooseRecord, SourceProp } from "@chelone/core";
 import type { CrepeEditorConfig } from "./internal/crepe-editor.vue.js";
 /** Props for {@link MdxField}. */
@@ -12,10 +28,11 @@ export interface MdxFieldProps {
     crepeConfig?: CrepeEditorConfig;
     class?: string;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<MdxFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MdxFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
-    empty?: () => unknown;
-}>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<MdxFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MdxFieldProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
+    empty?: () => VNode[];
+}>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/components/mdx-editor/mdx-field.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,65 @@
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import { useFieldValue } from "../../record/use-field-value.js";
+import crepe_editor_default from "./internal/crepe-editor.js";
+import { computed, createBlock, defineComponent, normalizeClass, openBlock, renderSlot, unref } from "vue";
+// src/components/mdx-editor/mdx-field.vue?vue&type=script&setup=true&lang.ts
+var mdx_field_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "mdx-field",
+	props: {
+		source: {},
+		record: {},
+		defaultValue: {},
+		empty: {},
+		crepeConfig: {},
+		class: {}
+	},
+	setup(__props) {
+		/**
+		* `<MdxField>` — shows a markdown field value in a read-only Crepe editor. The
+		* Vue counterpart of `@chelone/react`'s `mdx-editor/mdx-field.tsx`; it wraps
+		* Milkdown's Crepe because `@mdxeditor/editor` is React only.
+		*
+		* Needs the optional `@milkdown/crepe` and `@milkdown/kit` peers. From npm, also
+		* import `@chelone/vue/mdx-editor.css` for the Chelone theme; the registry item
+		* ships that file with the component. The `#empty` slot replaces the editor
+		* when the value is missing.
+		*
+		* @example
+		* import { MdxField } from "@chelone/vue/mdx-editor";
+		*
+		* <MdxField source="body" empty="No content" />
+		*/
+		const props = __props;
+		const translate = useTranslate();
+		const value = useFieldValue({
+			source: props.source,
+			get record() {
+				return props.record;
+			},
+			get defaultValue() {
+				return props.defaultValue;
+			}
+		});
+		const missing = computed(() => value.value == null);
+		const markdown = computed(() => {
+			const raw = value.value;
+			if (raw == null) return props.empty ? translate(props.empty, { _: props.empty }) : "";
+			return typeof raw === "string" ? raw : String(raw);
+		});
+		return (_ctx, _cache) => {
+			return missing.value && _ctx.$slots.empty ? renderSlot(_ctx.$slots, "empty", {}, void 0, void 0, 0) : (openBlock(), createBlock(crepe_editor_default, {
+				key: 1,
+				markdown: markdown.value,
+				readonly: "",
+				"crepe-config": __props.crepeConfig,
+				class: normalizeClass(unref(cn)(props.class))
+			}, null, 8, [
+				"markdown",
+				"crepe-config",
+				"class"
+			]));
+		};
+	}
+});
+export { mdx_field_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/mdx-editor/mdx-input.js

@@ -0,0 +1,4 @@
+import mdx_input_vue_vue_type_script_setup_true_lang_default from "./mdx-input.vue_vue_type_script_setup_true_lang.js";
+// src/components/mdx-editor/mdx-input.vue
+var mdx_input_default = mdx_input_vue_vue_type_script_setup_true_lang_default;
+export { mdx_input_default as default };

package/dist/components/mdx-editor/mdx-input.vue.d.ts

@@ -1,12 +1,8 @@
-import type { SourceProp, Validator } from "@chelone/core";
+import type { LooseRecord, SourceProp } from "@chelone/core";
 import type { CrepeEditorConfig } from "./internal/crepe-editor.vue.js";
+import type { SourceInputProps } from "../admin/inputs/source-input-props.js";
 /** Props for {@link MdxInput}. */
-export interface MdxInputProps {
-    source: SourceProp;
-    label?: string | false;
-    /** Used when the record has no value at `source`. Defaults to `""`. */
-    defaultValue?: unknown;
-    validate?: Validator | readonly Validator[];
+export interface MdxInputProps<RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>> extends SourceInputProps<RecordType, TPath> {
     helperText?: string | false;
     disabled?: boolean;
     readOnly?: boolean;
@@ -14,8 +10,21 @@ export interface MdxInputProps {
     crepeConfig?: CrepeEditorConfig;
     class?: string;
 }
-declare const _default: import("vue").DefineComponent<MdxInputProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MdxInputProps> & Readonly<{}>, {
-    label: string | false;
-    helperText: string | false;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: <RecordType = LooseRecord, TPath extends SourceProp<RecordType> = SourceProp<RecordType>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<MdxInputProps<RecordType, TPath>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import("vue").VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/mdx-editor/mdx-input.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,100 @@
+import { useInput } from "../../form/use-input.js";
+import { cn } from "../../lib/utils.js";
+import field_label_text_default from "../admin/common/field-label-text.js";
+import input_helper_text_default from "../admin/common/input-helper-text.js";
+import validation_error_default from "../admin/common/validation-error.js";
+import { Field, FieldError, FieldLabel } from "../ui/field.js";
+import crepe_editor_default from "./internal/crepe-editor.js";
+import { computed, createBlock, createCommentVNode, createElementVNode, createVNode, defineComponent, normalizeClass, openBlock, unref, withCtx } from "vue";
+// src/components/mdx-editor/mdx-input.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["id"];
+var mdx_input_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "mdx-input",
+	props: {
+		helperText: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		disabled: { type: Boolean },
+		readOnly: { type: Boolean },
+		crepeConfig: {},
+		class: {},
+		source: {},
+		label: {
+			type: [String, Boolean],
+			default: void 0
+		},
+		defaultValue: {},
+		validate: {}
+	},
+	setup(__props) {
+		/**
+		* `<MdxInput>` — edits a markdown string in a Crepe editor. The Vue twin of
+		* `@chelone/react`'s `mdx-editor/mdx-input.tsx`; it wraps Milkdown's Crepe
+		* because `@mdxeditor/editor` is React only.
+		*
+		* Needs the optional `@milkdown/crepe` and `@milkdown/kit` peers. From npm, also
+		* import `@chelone/vue/mdx-editor.css` for the Chelone theme; the registry item
+		* ships that file with the component. The value is always a markdown string;
+		* clearing the editor stores `""`, not null.
+		*
+		* @example
+		* import { MdxInput } from "@chelone/vue/mdx-editor";
+		*
+		* <MdxInput source="body" label="Notes" />
+		*/
+		const props = __props;
+		const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+			source: props.source,
+			defaultValue: props.defaultValue ?? "",
+			validate: props.validate,
+			parse: (input) => input
+		});
+		const markdown = computed(() => typeof value.value === "string" ? value.value : "");
+		const invalid = computed(() => touched.value && error.value != null);
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(Field), {
+				class: normalizeClass(unref(cn)(props.class)),
+				"data-invalid": invalid.value
+			}, {
+				default: withCtx(() => [
+					__props.label !== false ? (openBlock(), createBlock(unref(FieldLabel), {
+						key: 0,
+						"html-for": unref(id)
+					}, {
+						default: withCtx(() => [createVNode(field_label_text_default, {
+							label: __props.label,
+							source: __props.source,
+							"is-required": unref(isRequired)
+						}, null, 8, [
+							"label",
+							"source",
+							"is-required"
+						])]),
+						_: 1
+					}, 8, ["html-for"])) : createCommentVNode("", true),
+					createElementVNode("div", { id: unref(id) }, [createVNode(crepe_editor_default, {
+						markdown: markdown.value,
+						readonly: __props.disabled === true || __props.readOnly === true,
+						"crepe-config": __props.crepeConfig,
+						onChange: unref(setValue),
+						onBlur: unref(blur)
+					}, null, 8, [
+						"markdown",
+						"readonly",
+						"crepe-config",
+						"onChange",
+						"onBlur"
+					])], 8, _hoisted_1),
+					createVNode(input_helper_text_default, { "helper-text": __props.helperText }, null, 8, ["helper-text"]),
+					invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+						default: withCtx(() => [createVNode(validation_error_default, { error: unref(error) }, null, 8, ["error"])]),
+						_: 1
+					})) : createCommentVNode("", true)
+				]),
+				_: 1
+			}, 8, ["class", "data-invalid"]);
+		};
+	}
+});
+export { mdx_input_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/monaco/internal/monaco-composables.js

@@ -1,46 +1,40 @@
-import { computed, shallowRef, watch, toValue } from "vue";
-import { useTheme, resolveTheme } from "../../admin/layout/theme-context.js";
+import { resolveTheme, useTheme } from "../../admin/layout/theme-context.js";
+import { computed, shallowRef, toValue, watch } from "vue";
+// src/components/monaco/internal/monaco-composables.ts
+/**
+* The editor's content height clamped to `[min, max]`, tracked as it changes.
+* 0 when `enabled` is false, so the caller falls back to a fixed height.
+*/
 function useAutoHeight(instance, enabled, min, max) {
-  const contentHeight = shallowRef(0);
-  watch(
-    [instance, () => toValue(enabled)],
-    ([current, on], _previous, onCleanup) => {
-      if (!on || !current) return;
-      const update = () => {
-        contentHeight.value = current.getContentHeight();
-      };
-      update();
-      const subscription = current.onDidContentSizeChange(update);
-      onCleanup(() => subscription.dispose());
-    },
-    { immediate: true }
-  );
-  return computed(
-    () => toValue(enabled) ? Math.min(Math.max(contentHeight.value, min), toValue(max)) : 0
-  );
+	const contentHeight = shallowRef(0);
+	watch([instance, () => toValue(enabled)], ([current, on], _previous, onCleanup) => {
+		if (!on || !current) return;
+		const update = () => {
+			contentHeight.value = current.getContentHeight();
+		};
+		update();
+		const subscription = current.onDidContentSizeChange(update);
+		onCleanup(() => subscription.dispose());
+	}, { immediate: true });
+	return computed(() => toValue(enabled) ? Math.min(Math.max(contentHeight.value, min), toValue(max)) : 0);
 }
+/**
+* Re-lays the editor out when its container resizes (`automaticLayout` is off).
+* Returns the template ref to put on the container.
+*/
 function useMonacoLayout(instance) {
-  const container = shallowRef(null);
-  watch(
-    [instance, container],
-    ([current, node], _previous, onCleanup) => {
-      if (!current || !node) return;
-      const observer = new ResizeObserver(() => current.layout());
-      observer.observe(node);
-      onCleanup(() => observer.disconnect());
-    },
-    { immediate: true }
-  );
-  return container;
+	const container = shallowRef(null);
+	watch([instance, container], ([current, node], _previous, onCleanup) => {
+		if (!current || !node) return;
+		const observer = new ResizeObserver(() => current.layout());
+		observer.observe(node);
+		onCleanup(() => observer.disconnect());
+	}, { immediate: true });
+	return container;
 }
+/** The Monaco theme matching the resolved Chelone theme. */
 function useMonacoTheme() {
-  const { theme } = useTheme();
-  return computed(
-    () => resolveTheme(theme.value) === "dark" ? "vs-dark" : "vs"
-  );
+	const { theme } = useTheme();
+	return computed(() => resolveTheme(theme.value) === "dark" ? "vs-dark" : "vs");
 }
-export {
-  useAutoHeight,
-  useMonacoLayout,
-  useMonacoTheme
-};
+export { useAutoHeight, useMonacoLayout, useMonacoTheme };

package/dist/components/monaco/internal/monaco-skeleton.js

@@ -0,0 +1,4 @@
+import monaco_skeleton_vue_vue_type_script_setup_true_lang_default from "./monaco-skeleton.vue_vue_type_script_setup_true_lang.js";
+// src/components/monaco/internal/monaco-skeleton.vue
+var monaco_skeleton_default = monaco_skeleton_vue_vue_type_script_setup_true_lang_default;
+export { monaco_skeleton_default as default };

package/dist/components/monaco/internal/monaco-skeleton.vue.d.ts

@@ -1,5 +1,6 @@
 type __VLS_Props = {
     height?: number;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/monaco/internal/monaco-skeleton.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,22 @@
+import skeleton_default from "../../ui/skeleton.js";
+import { createBlock, defineComponent, normalizeClass, normalizeStyle, openBlock } from "vue";
+// src/components/monaco/internal/monaco-skeleton.vue?vue&type=script&setup=true&lang.ts
+var monaco_skeleton_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "monaco-skeleton",
+	props: { height: {} },
+	setup(__props) {
+		/**
+		* `<MonacoSkeleton>` — the pulsing placeholder shown while the editor chunk
+		* loads. The Vue twin of `@chelone/react`'s `MonacoSkeleton`.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(skeleton_default, {
+				role: "status",
+				"aria-label": "Loading editor",
+				class: normalizeClass(`${__props.height == null ? "h-[120px] " : ""}w-full border`),
+				style: normalizeStyle(__props.height == null ? void 0 : { height: `${__props.height}px` })
+			}, null, 8, ["class", "style"]);
+		};
+	}
+});
+export { monaco_skeleton_vue_vue_type_script_setup_true_lang_default as default };

package/dist/components/monaco/internal/use-json-schema.js

@@ -1,70 +1,85 @@
 import { computed, toValue, watchEffect } from "vue";
-const MODEL_PREFIX = "inmemory://monaco-json-input/";
-const shared = /* @__PURE__ */ new WeakMap();
+// src/components/monaco/internal/use-json-schema.ts
+/** Every model path this add-on creates starts with this. */
+var MODEL_PREFIX = "inmemory://monaco-json-input/";
+var shared = /* @__PURE__ */ new WeakMap();
 function apply(defaults, state) {
-  const current = defaults.diagnosticsOptions;
-  const { baseline } = state;
-  const registrations = [...state.registrations.values()];
-  const entries = registrations.flatMap((r) => r.entry ? [r.entry] : []);
-  const comments = registrations.some((r) => r.allowComments);
-  const foreign = (current.schemas ?? []).filter(
-    (entry) => !entry.fileMatch?.some((m) => m.startsWith(MODEL_PREFIX))
-  );
-  defaults.setDiagnosticsOptions({
-    ...current,
-    validate: registrations.length ? true : baseline.validate,
-    // Monaco reports schema violations as warnings unless told otherwise, and
-    // only errors block submit.
-    schemaValidation: entries.length ? "error" : baseline.schemaValidation,
-    enableSchemaRequest: registrations.some((r) => r.remote) ? true : baseline.enableSchemaRequest,
-    allowComments: comments ? true : baseline.allowComments,
-    trailingCommas: comments ? "ignore" : baseline.trailingCommas,
-    schemas: [...foreign, ...entries]
-  });
-  if (!registrations.length) shared.delete(defaults);
+	const current = defaults.diagnosticsOptions;
+	const { baseline } = state;
+	const registrations = [...state.registrations.values()];
+	const entries = registrations.flatMap((r) => r.entry ? [r.entry] : []);
+	const comments = registrations.some((r) => r.allowComments);
+	const foreign = (current.schemas ?? []).filter((entry) => !entry.fileMatch?.some((m) => m.startsWith(MODEL_PREFIX)));
+	defaults.setDiagnosticsOptions({
+		...current,
+		validate: registrations.length ? true : baseline.validate,
+		schemaValidation: entries.length ? "error" : baseline.schemaValidation,
+		enableSchemaRequest: registrations.some((r) => r.remote) ? true : baseline.enableSchemaRequest,
+		allowComments: comments ? true : baseline.allowComments,
+		trailingCommas: comments ? "ignore" : baseline.trailingCommas,
+		schemas: [...foreign, ...entries]
+	});
+	if (!registrations.length) shared.delete(defaults);
 }
+function hasJsonDefaults(value) {
+	return "jsonDefaults" in value;
+}
+/** `monaco.json` since 0.55; older builds expose it under `monaco.languages`. */
 function getJsonDefaults(monaco) {
-  const legacy = monaco.languages.json;
-  return monaco.json?.jsonDefaults ?? legacy?.jsonDefaults;
+	if (monaco.json) return monaco.json.jsonDefaults;
+	if ("json" in monaco.languages) {
+		const legacy = monaco.languages.json;
+		if (hasJsonDefaults(legacy)) return legacy.jsonDefaults;
+	}
 }
+/**
+* Registers this editor's JSON Schema and comment tolerance in Monaco's JSON
+* diagnostics, the schema matched by `fileMatch` to this editor's model, and
+* undoes it when the scope is disposed. Other editors' entries and options are
+* left alone.
+*
+* Comment tolerance is global in Monaco: while any editor allows comments, all
+* of them stop marking comments as errors.
+*/
 function useJsonSchema(monaco, options) {
-  const schemaKey = computed(() => {
-    const { schema } = toValue(options);
-    return schema ? JSON.stringify(schema) : void 0;
-  });
-  watchEffect((onCleanup) => {
-    const { path, schemaUri, allowComments, enabled } = toValue(options);
-    const api = monaco.value;
-    if (!api || !enabled) return;
-    if (!schemaKey.value && !schemaUri && !allowComments) return;
-    const defaults = getJsonDefaults(api);
-    if (!defaults) return;
-    let state = shared.get(defaults);
-    if (!state) {
-      state = {
-        baseline: defaults.diagnosticsOptions,
-        registrations: /* @__PURE__ */ new Map()
-      };
-      shared.set(defaults, state);
-    }
-    const registered = state;
-    const inline = schemaKey.value ? JSON.parse(schemaKey.value) : void 0;
-    registered.registrations.set(path, {
-      entry: inline ? {
-        uri: path.replace(/\.json$/, ".schema.json"),
-        fileMatch: [path],
-        schema: inline
-      } : schemaUri ? { uri: schemaUri, fileMatch: [path] } : void 0,
-      allowComments: Boolean(allowComments),
-      remote: !inline && Boolean(schemaUri)
-    });
-    apply(defaults, registered);
-    onCleanup(() => {
-      registered.registrations.delete(path);
-      apply(defaults, registered);
-    });
-  });
+	const schemaKey = computed(() => {
+		const { schema } = toValue(options);
+		return schema ? JSON.stringify(schema) : void 0;
+	});
+	watchEffect((onCleanup) => {
+		const { path, schemaUri, allowComments, enabled } = toValue(options);
+		const api = monaco.value;
+		if (!api || !enabled) return;
+		if (!schemaKey.value && !schemaUri && !allowComments) return;
+		const defaults = getJsonDefaults(api);
+		if (!defaults) return;
+		let state = shared.get(defaults);
+		if (!state) {
+			state = {
+				baseline: defaults.diagnosticsOptions,
+				registrations: /* @__PURE__ */ new Map()
+			};
+			shared.set(defaults, state);
+		}
+		const registered = state;
+		const inline = schemaKey.value ? JSON.parse(schemaKey.value) : void 0;
+		registered.registrations.set(path, {
+			entry: inline ? {
+				uri: path.replace(/\.json$/, ".schema.json"),
+				fileMatch: [path],
+				schema: inline
+			} : schemaUri ? {
+				uri: schemaUri,
+				fileMatch: [path]
+			} : void 0,
+			allowComments: Boolean(allowComments),
+			remote: !inline && Boolean(schemaUri)
+		});
+		apply(defaults, registered);
+		onCleanup(() => {
+			registered.registrations.delete(path);
+			apply(defaults, registered);
+		});
+	});
 }
-export {
-  useJsonSchema
-};
+export { useJsonSchema };

package/dist/components/monaco/internal/use-monaco-markers.js

@@ -1,59 +1,53 @@
 import { shallowRef, watch } from "vue";
-const MARKERS_SETTLE_MS = 750;
-const MONACO_DIAGNOSTICS_DELAY_MS = 500;
+/**
+* Keeps the editor model's current markers in a ref and calls `onChange` each
+* time Monaco reports a change for that model. The ref is what a validator
+* reads, so it never goes stale between renders.
+*/
 function useMonacoMarkers(instance, monaco, onChange) {
-  const markers = shallowRef([]);
-  let lastEditAt = 0;
-  let fresh = true;
-  const waiting = /* @__PURE__ */ new Set();
-  watch(
-    [instance, monaco],
-    ([currentInstance, currentMonaco], _previous, onCleanup) => {
-      const model = currentInstance?.getModel();
-      if (!currentInstance || !currentMonaco || !model) return;
-      const read = () => currentMonaco.editor.getModelMarkers({ resource: model.uri });
-      markers.value = read();
-      fresh = true;
-      const edits = model.onDidChangeContent(() => {
-        lastEditAt = Date.now();
-        fresh = false;
-      });
-      const subscription = currentMonaco.editor.onDidChangeMarkers((uris) => {
-        if (!uris.some((uri) => uri.toString() === model.uri.toString()))
-          return;
-        markers.value = read();
-        if (Date.now() - lastEditAt >= MONACO_DIAGNOSTICS_DELAY_MS) {
-          fresh = true;
-          for (const release of [...waiting]) release();
-        }
-        onChange(markers.value);
-      });
-      onCleanup(() => {
-        edits.dispose();
-        subscription.dispose();
-      });
-    },
-    { immediate: true }
-  );
-  const settled = () => {
-    if (fresh) return Promise.resolve(markers.value);
-    return new Promise((resolve) => {
-      const release = () => {
-        clearTimeout(timer);
-        waiting.delete(release);
-        resolve(markers.value);
-      };
-      const timer = setTimeout(
-        release,
-        Math.max(0, lastEditAt + MARKERS_SETTLE_MS - Date.now())
-      );
-      waiting.add(release);
-    });
-  };
-  return { markers, settled };
+	const markers = shallowRef([]);
+	let lastEditAt = 0;
+	let fresh = true;
+	const waiting = /* @__PURE__ */ new Set();
+	watch([instance, monaco], ([currentInstance, currentMonaco], _previous, onCleanup) => {
+		const model = currentInstance?.getModel();
+		if (!currentInstance || !currentMonaco || !model) return;
+		const read = () => currentMonaco.editor.getModelMarkers({ resource: model.uri });
+		markers.value = read();
+		fresh = true;
+		const edits = model.onDidChangeContent(() => {
+			lastEditAt = Date.now();
+			fresh = false;
+		});
+		const subscription = currentMonaco.editor.onDidChangeMarkers((uris) => {
+			if (!uris.some((uri) => uri.toString() === model.uri.toString())) return;
+			markers.value = read();
+			if (Date.now() - lastEditAt >= 500) {
+				fresh = true;
+				for (const release of [...waiting]) release();
+			}
+			onChange(markers.value);
+		});
+		onCleanup(() => {
+			edits.dispose();
+			subscription.dispose();
+		});
+	}, { immediate: true });
+	const settled = () => {
+		if (fresh) return Promise.resolve(markers.value);
+		return new Promise((resolve) => {
+			const release = () => {
+				clearTimeout(timer);
+				waiting.delete(release);
+				resolve(markers.value);
+			};
+			const timer = setTimeout(release, Math.max(0, lastEditAt + 750 - Date.now()));
+			waiting.add(release);
+		});
+	};
+	return {
+		markers,
+		settled
+	};
 }
-export {
-  MARKERS_SETTLE_MS,
-  MONACO_DIAGNOSTICS_DELAY_MS,
-  useMonacoMarkers
-};
+export { useMonacoMarkers };

package/dist/components/monaco/monaco-json-field-lazy.js

@@ -0,0 +1,4 @@
+import monaco_json_field_lazy_vue_vue_type_script_setup_true_lang_default from "./monaco-json-field-lazy.vue_vue_type_script_setup_true_lang.js";
+// src/components/monaco/monaco-json-field-lazy.vue
+var monaco_json_field_lazy_default = monaco_json_field_lazy_vue_vue_type_script_setup_true_lang_default;
+export { monaco_json_field_lazy_default as default };