@chelone/vue 0.0.0-stage → 0.1.0

package/dist/components/maps-osm/use-reverse-geocode.js

@@ -0,0 +1,25 @@
+import { reverseGeocodeQueryOptions } from "@chelone/core";
+import { useQuery } from "@tanstack/vue-query";
+import { computed, toValue } from "vue";
+import { useMapsConfig } from "../maps/use-map.js";
+function useReverseGeocode(position, options = {}) {
+  const config = useMapsConfig();
+  const resolve = () => options.provider ?? config.geocoder;
+  if (!resolve()) {
+    throw new Error(
+      "useReverseGeocode needs a geocoding provider: pass the `provider` option or set `geocoder` on <MapsProvider>."
+    );
+  }
+  const request = computed(() => {
+    const provider = resolve();
+    if (!provider) {
+      throw new Error("useReverseGeocode lost its geocoding provider.");
+    }
+    const base = reverseGeocodeQueryOptions(provider, toValue(position));
+    return { ...base, enabled: (options.enabled ?? true) && base.enabled };
+  });
+  return useQuery(request);
+}
+export {
+  useReverseGeocode
+};

package/dist/components/mdx-editor/internal/crepe-editor.vue.d.ts

@@ -0,0 +1,19 @@
+import type { CrepeConfig } from "@milkdown/crepe";
+/** The Crepe options an app may set; the editor owns `root` and `defaultValue`. */
+export type CrepeEditorConfig = Pick<CrepeConfig, "features" | "featureConfigs">;
+declare const _default: import("vue").DefineComponent<{
+    markdown: string;
+    readonly: boolean;
+    crepeConfig?: CrepeEditorConfig;
+}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur: () => any;
+    change: (markdown: string) => any;
+}, string, import("vue").PublicProps, Readonly<{
+    markdown: string;
+    readonly: boolean;
+    crepeConfig?: CrepeEditorConfig;
+}> & Readonly<{
+    onBlur?: (() => any) | undefined;
+    onChange?: ((markdown: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/mdx-editor/internal/crepe-editor.vue.js

@@ -0,0 +1,91 @@
+import { defineComponent, useTemplateRef, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock } from "vue";
+import { Crepe } from "@milkdown/crepe";
+import "@milkdown/crepe/theme/common/style.css";
+import { replaceAll } from "@milkdown/kit/utils";
+/* empty css                      */
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "crepe-editor",
+  props: {
+    markdown: {},
+    readonly: { type: Boolean },
+    crepeConfig: {}
+  },
+  emits: ["change", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const root = useTemplateRef("root");
+    let crepe;
+    let ready = false;
+    let unmounted = false;
+    let applied;
+    function pushMarkdown(next) {
+      if (!crepe || !ready) return;
+      const current = crepe.getMarkdown();
+      if (current === next) return;
+      if (applied?.prop === next && applied.serialized === current) return;
+      crepe.editor.action(replaceAll(next));
+      applied = { prop: next, serialized: crepe.getMarkdown() };
+    }
+    function isOwnText(markdown) {
+      return markdown === props.markdown || applied?.prop === props.markdown && applied.serialized === markdown;
+    }
+    onMounted(async () => {
+      const { features, featureConfigs, ...rest } = props.crepeConfig ?? {};
+      const initial = props.markdown;
+      const instance = new Crepe({
+        ...rest,
+        root: root.value,
+        defaultValue: initial,
+        // Both load heavy bundles of their own (CodeMirror, KaTeX).
+        features: {
+          ...features,
+          [Crepe.Feature.CodeMirror]: false,
+          [Crepe.Feature.Latex]: false
+        },
+        featureConfigs
+      });
+      crepe = instance;
+      instance.on((api) => {
+        api.markdownUpdated((_ctx, markdown) => {
+          if (!isOwnText(markdown)) emit("change", markdown);
+        });
+        api.blur(() => emit("blur"));
+      });
+      await instance.create();
+      if (unmounted) {
+        await instance.destroy();
+        return;
+      }
+      instance.setReadonly(props.readonly);
+      ready = true;
+      applied = { prop: initial, serialized: instance.getMarkdown() };
+      pushMarkdown(props.markdown);
+    });
+    watch(
+      () => props.markdown,
+      (next) => pushMarkdown(next)
+    );
+    watch(
+      () => props.readonly,
+      (next) => {
+        if (ready) crepe?.setReadonly(next);
+      }
+    );
+    onBeforeUnmount(() => {
+      unmounted = true;
+      if (ready) void crepe?.destroy();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "root",
+        ref: root,
+        "data-slot": "mdx-editor",
+        class: "chelone-mdx-editor"
+      }, null, 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/mdx-editor/internal/crepe-editor2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./crepe-editor.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/mdx-editor/mdx-editor-theme.css

@@ -0,0 +1,25 @@
+/*
+ * Maps Crepe's palette onto the Chelone tokens. Those tokens already change
+ * under `.dark`, so the editor follows the theme with no class of its own.
+ */
+.chelone-mdx-editor {
+  --crepe-color-background: var(--background);
+  --crepe-color-on-background: var(--foreground);
+  --crepe-color-surface: var(--card);
+  --crepe-color-surface-low: var(--muted);
+  --crepe-color-on-surface: var(--card-foreground);
+  --crepe-color-on-surface-variant: var(--muted-foreground);
+  --crepe-color-outline: var(--border);
+  --crepe-color-primary: var(--primary);
+  --crepe-color-secondary: var(--secondary);
+  --crepe-color-on-secondary: var(--secondary-foreground);
+  --crepe-color-inverse: var(--foreground);
+  --crepe-color-on-inverse: var(--background);
+  --crepe-color-hover: var(--accent);
+  --crepe-color-selected: var(--accent);
+  --crepe-color-inline-area: var(--muted);
+  --crepe-color-inline-code: var(--destructive);
+  --crepe-color-error: var(--destructive);
+  --crepe-font-default: inherit;
+  --crepe-font-title: inherit;
+}

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

@@ -0,0 +1,23 @@
+import type { LooseRecord } from "@chelone/core";
+import type { CrepeEditorConfig } from "./internal/crepe-editor.vue.js";
+/** Props for {@link MdxField}. */
+export interface MdxFieldProps {
+    source: string;
+    record?: LooseRecord;
+    /** Used when the record has no value at `source`. */
+    defaultValue?: unknown;
+    /** Shown as the markdown when the value is missing; translated if it is a message key. */
+    empty?: string;
+    /** Merged under the read-only defaults; `code-mirror` and `latex` stay off. */
+    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;
+}>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,49 @@
+import { defineComponent, computed, renderSlot, openBlock, createBlock, normalizeClass, unref } from "vue";
+import { useTranslate } from "../../i18n/use-translate.js";
+import { cn } from "../../lib/utils.js";
+import { useFieldValue } from "../../record/use-field-value.js";
+import _sfc_main$1 from "./internal/crepe-editor.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "mdx-field",
+  props: {
+    source: {},
+    record: {},
+    defaultValue: {},
+    empty: {},
+    crepeConfig: {},
+    class: {}
+  },
+  setup(__props) {
+    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", { key: 0 }) : (openBlock(), createBlock(_sfc_main$1, {
+        key: 1,
+        markdown: markdown.value,
+        readonly: "",
+        "crepe-config": __props.crepeConfig,
+        class: normalizeClass(unref(cn)(props.class))
+      }, null, 8, ["markdown", "crepe-config", "class"]));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/mdx-editor/mdx-field2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./mdx-field.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,21 @@
+import type { Validator } from "@chelone/core";
+import type { CrepeEditorConfig } from "./internal/crepe-editor.vue.js";
+/** Props for {@link MdxInput}. */
+export interface MdxInputProps {
+    source: string;
+    label?: string | false;
+    /** Used when the record has no value at `source`. Defaults to `""`. */
+    defaultValue?: unknown;
+    validate?: Validator | readonly Validator[];
+    helperText?: string | false;
+    disabled?: boolean;
+    readOnly?: boolean;
+    /** Merged under the editor defaults; `code-mirror` and `latex` stay off. */
+    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>;
+export default _default;

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

@@ -0,0 +1,79 @@
+import { defineComponent, computed, openBlock, createBlock, unref, normalizeClass, withCtx, createVNode, createCommentVNode, createElementVNode } from "vue";
+import { useInput } from "../../form/use-input.js";
+import { cn } from "../../lib/utils.js";
+import _sfc_main$1 from "../admin/common/field-label-text.vue.js";
+import _sfc_main$3 from "../admin/common/input-helper-text.vue.js";
+import _sfc_main$4 from "../admin/common/validation-error.vue.js";
+import { Field, FieldLabel, FieldError } from "../ui/field.js";
+import _sfc_main$2 from "./internal/crepe-editor.vue.js";
+const _hoisted_1 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "mdx-input",
+  props: {
+    source: {},
+    label: { type: [String, Boolean], default: void 0 },
+    defaultValue: {},
+    validate: {},
+    helperText: { type: [String, Boolean], default: void 0 },
+    disabled: { type: Boolean },
+    readOnly: { type: Boolean },
+    crepeConfig: {},
+    class: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { id, value, setValue, blur, error, touched, isRequired } = useInput({
+      source: props.source,
+      defaultValue: props.defaultValue ?? "",
+      validate: props.validate,
+      // Identity, so clearing the editor stores "" and not null.
+      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(_sfc_main$1, {
+                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(_sfc_main$2, {
+              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(_sfc_main$3, { "helper-text": __props.helperText }, null, 8, ["helper-text"]),
+          invalid.value ? (openBlock(), createBlock(unref(FieldError), { key: 1 }, {
+            default: withCtx(() => [
+              createVNode(_sfc_main$4, { error: unref(error) }, null, 8, ["error"])
+            ]),
+            _: 1
+          })) : createCommentVNode("", true)
+        ]),
+        _: 1
+      }, 8, ["class", "data-invalid"]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/components/mdx-editor/mdx-input2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./mdx-input.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/internal/monaco-composables.d.ts

@@ -0,0 +1,16 @@
+import type { editor } from "monaco-editor";
+import { type ComputedRef, type MaybeRefOrGetter, type Ref } from "vue";
+type CodeEditor = editor.IStandaloneCodeEditor;
+/**
+ * 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.
+ */
+export declare function useAutoHeight(instance: Ref<CodeEditor | null>, enabled: MaybeRefOrGetter<boolean>, min: number, max: MaybeRefOrGetter<number>): ComputedRef<number>;
+/**
+ * Re-lays the editor out when its container resizes (`automaticLayout` is off).
+ * Returns the template ref to put on the container.
+ */
+export declare function useMonacoLayout(instance: Ref<CodeEditor | null>): Ref<HTMLElement | null>;
+/** The Monaco theme matching the resolved Chelone theme. */
+export declare function useMonacoTheme(): ComputedRef<"vs" | "vs-dark">;
+export {};

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

@@ -0,0 +1,46 @@
+import { computed, shallowRef, watch, toValue } from "vue";
+import { useTheme, resolveTheme } from "../../admin/layout/theme-context.js";
+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
+  );
+}
+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;
+}
+function useMonacoTheme() {
+  const { theme } = useTheme();
+  return computed(
+    () => resolveTheme(theme.value) === "dark" ? "vs-dark" : "vs"
+  );
+}
+export {
+  useAutoHeight,
+  useMonacoLayout,
+  useMonacoTheme
+};

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

@@ -0,0 +1,5 @@
+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>;
+export default _default;

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

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createBlock, normalizeStyle, normalizeClass } from "vue";
+import _sfc_main$1 from "../../ui/skeleton.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "monaco-skeleton",
+  props: {
+    height: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, {
+        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 {
+  _sfc_main as default
+};

package/dist/components/monaco/internal/monaco-skeleton2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./monaco-skeleton.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/components/monaco/internal/use-json-schema.d.ts

@@ -0,0 +1,21 @@
+import type * as Monaco from "monaco-editor";
+import { type MaybeRefOrGetter, type Ref } from "vue";
+interface UseJsonSchemaOptions {
+    /** The editor's model uri: the schema applies to this model only. */
+    path: string;
+    schema?: object;
+    schemaUri?: string;
+    allowComments?: boolean;
+    enabled: boolean;
+}
+/**
+ * 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.
+ */
+export declare function useJsonSchema(monaco: Ref<typeof Monaco | null>, options: MaybeRefOrGetter<UseJsonSchemaOptions>): void;
+export {};

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

@@ -0,0 +1,70 @@
+import { computed, toValue, watchEffect } from "vue";
+const MODEL_PREFIX = "inmemory://monaco-json-input/";
+const 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);
+}
+function getJsonDefaults(monaco) {
+  const legacy = monaco.languages.json;
+  return monaco.json?.jsonDefaults ?? legacy?.jsonDefaults;
+}
+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);
+    });
+  });
+}
+export {
+  useJsonSchema
+};

package/dist/components/monaco/internal/use-monaco-markers.d.ts

@@ -0,0 +1,25 @@
+import type * as Monaco from "monaco-editor";
+import type { editor } from "monaco-editor";
+import { type Ref } from "vue";
+/**
+ * How long after the last edit `settled` waits for Monaco's markers. Monaco
+ * posts them about 500 ms after an edit.
+ */
+export declare const MARKERS_SETTLE_MS = 750;
+export declare const MONACO_DIAGNOSTICS_DELAY_MS = 500;
+export interface MonacoMarkers {
+    markers: Ref<editor.IMarker[]>;
+    /**
+     * Resolves with the model's markers once they reflect the last edit: at once
+     * when a marker event at least `MONACO_DIAGNOSTICS_DELAY_MS` after it came,
+     * else on the next such event or `MARKERS_SETTLE_MS` after the edit,
+     * whichever is first.
+     */
+    settled: () => Promise<editor.IMarker[]>;
+}
+/**
+ * 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.
+ */
+export declare function useMonacoMarkers(instance: Ref<editor.IStandaloneCodeEditor | null>, monaco: Ref<typeof Monaco | null>, onChange: (markers: editor.IMarker[]) => void): MonacoMarkers;

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

@@ -0,0 +1,59 @@
+import { shallowRef, watch } from "vue";
+const MARKERS_SETTLE_MS = 750;
+const MONACO_DIAGNOSTICS_DELAY_MS = 500;
+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 };
+}
+export {
+  MARKERS_SETTLE_MS,
+  MONACO_DIAGNOSTICS_DELAY_MS,
+  useMonacoMarkers
+};

package/dist/components/monaco/monaco-json-field-lazy.vue.d.ts

@@ -0,0 +1,16 @@
+import type { MonacoJsonFieldProps } from "./monaco-json-field.vue.js";
+type __VLS_Slots = {
+    empty?: () => unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<MonacoJsonFieldProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<MonacoJsonFieldProps> & Readonly<{}>, {
+    height: number;
+    autoHeight: boolean;
+    maxHeight: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,4 @@
+import _sfc_main from "./monaco-json-field-lazy2.vue.js";
+export {
+  _sfc_main as default
+};