@scalar/api-reference 1.48.8 → 1.49.0

package/dist/components/Lazy/Lazy.vue.js

@@ -1,14 +1,103 @@
-import { defineComponent, renderSlot, createCommentVNode, unref } from "vue";
-import { useLazyBus } from "../../helpers/lazy-bus.js";
+import { defineComponent, ref, computed, onMounted, watch, nextTick, onBeforeUnmount, createElementBlock, openBlock, normalizeStyle, renderSlot, createCommentVNode } from "vue";
+import { useIntersectionObserver } from "@vueuse/core";
+import { useLazyBus, getLazyPlaceholderHeight, requestLazyRender, setLazyPlaceholderHeight } from "../../helpers/lazy-bus.js";
+const _hoisted_1 = ["id", "data-placeholder"];
+const PLACEHOLDER_HEIGHT_PX = 760;
+const VIEWPORT_OVERSCAN_PX = 1200;
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Lazy",
   props: {
-    id: {}
+    id: {},
+    expanded: { type: Boolean, default: false }
   },
   setup(__props) {
+    const VIEWPORT_ROOT_MARGIN = `${VIEWPORT_OVERSCAN_PX}px 0px`;
     const { isReady } = useLazyBus(__props.id);
+    const lazyContainerRef = ref(null);
+    const placeholderHeight = ref(
+      getLazyPlaceholderHeight(__props.id) ?? PLACEHOLDER_HEIGHT_PX
+    );
+    let contentResizeObserver = null;
+    const shouldRender = computed(() => isReady.value || __props.expanded);
+    onMounted(() => {
+      if (typeof window === "undefined") {
+        return;
+      }
+      if (!("IntersectionObserver" in window)) {
+        requestLazyRender(__props.id, true);
+        return;
+      }
+      useIntersectionObserver(
+        lazyContainerRef,
+        ([entry]) => {
+          if (entry?.isIntersecting && !isReady.value) {
+            requestLazyRender(__props.id, true);
+          }
+        },
+        { rootMargin: VIEWPORT_ROOT_MARGIN }
+      );
+    });
+    watch(
+      () => shouldRender.value,
+      (rendered, wasRendered) => {
+        if (wasRendered && !rendered && lazyContainerRef.value) {
+          const h = lazyContainerRef.value.offsetHeight;
+          if (Number.isFinite(h) && h > 0) {
+            placeholderHeight.value = h;
+            setLazyPlaceholderHeight(__props.id, h);
+          }
+        }
+      },
+      { flush: "pre" }
+    );
+    watch(
+      () => shouldRender.value,
+      (rendered) => {
+        if (!rendered) {
+          contentResizeObserver?.disconnect();
+          contentResizeObserver = null;
+          return;
+        }
+        void nextTick(() => {
+          if (!lazyContainerRef.value || typeof ResizeObserver === "undefined") {
+            return;
+          }
+          if (!contentResizeObserver) {
+            contentResizeObserver = new ResizeObserver(() => {
+              if (!lazyContainerRef.value) {
+                return;
+              }
+              const h2 = lazyContainerRef.value.offsetHeight;
+              if (Number.isFinite(h2) && h2 > 0) {
+                placeholderHeight.value = h2;
+                setLazyPlaceholderHeight(__props.id, h2);
+              }
+            });
+          }
+          contentResizeObserver.observe(lazyContainerRef.value);
+          const h = lazyContainerRef.value.offsetHeight;
+          if (Number.isFinite(h) && h > 0) {
+            placeholderHeight.value = h;
+            setLazyPlaceholderHeight(__props.id, h);
+          }
+        });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      contentResizeObserver?.disconnect();
+    });
     return (_ctx, _cache) => {
-      return unref(isReady) ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true);
+      return openBlock(), createElementBlock("div", {
+        id: !shouldRender.value ? __props.id : void 0,
+        ref_key: "lazyContainerRef",
+        ref: lazyContainerRef,
+        "data-placeholder": !shouldRender.value,
+        "data-testid": "lazy-container",
+        style: normalizeStyle({ height: shouldRender.value ? void 0 : `${placeholderHeight.value}px` })
+      }, [
+        shouldRender.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+      ], 12, _hoisted_1);
     };
   }
 });

package/dist/features/ask-agent-button/AskAgentButton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AskAgentButton.vue.d.ts","sourceRoot":"","sources":["../../../src/features/ask-agent-button/AskAgentButton.vue"],"names":[],"mappings":"AAgPA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}
+{"version":3,"file":"AskAgentButton.vue.d.ts","sourceRoot":"","sources":["../../../src/features/ask-agent-button/AskAgentButton.vue"],"names":[],"mappings":"AAoQA,QAAA,MAAM,YAAY,+QAChB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/features/ask-agent-button/AskAgentButton.vue.js

@@ -1,7 +1,7 @@
 import _sfc_main from "./AskAgentButton.vue2.js";
 /* empty css                    */
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
-const AskAgentButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f43e32ab"]]);
+const AskAgentButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-78f5377c"]]);
 export {
   AskAgentButton as default
 };

package/dist/features/ask-agent-button/AskAgentButton.vue2.js

@@ -1,44 +1,48 @@
-import { defineComponent, ref, createElementBlock, createCommentVNode, unref, openBlock, createVNode, withDirectives, createElementVNode, withKeys, withModifiers, vModelText } from "vue";
+import { defineComponent, ref, createElementBlock, createCommentVNode, unref, openBlock, withModifiers, createVNode, createElementVNode, withDirectives, normalizeClass, vModelText } from "vue";
 import { ScalarIconSparkle, ScalarIconArrowUp } from "@scalar/icons";
 import { useAgentContext } from "../../hooks/use-agent.js";
 const _hoisted_1 = {
-  key: 0,
-  class: "agent-button-container flex"
+  class: "ask-agent-scalar-send",
+  type: "submit"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "AskAgentButton",
   setup(__props) {
     const agentContext = useAgentContext();
     const message = ref("");
+    const inputRef = ref();
     function handleSubmit() {
       agentContext.value?.openAgent(message.value);
       message.value = "";
     }
     return (_ctx, _cache) => {
-      return unref(agentContext)?.agentEnabled.value ? (openBlock(), createElementBlock("div", _hoisted_1, [
+      return unref(agentContext)?.agentEnabled.value ? (openBlock(), createElementBlock("form", {
+        key: 0,
+        class: "agent-button-container",
+        onClick: _cache[1] || (_cache[1] = ($event) => inputRef.value?.focus()),
+        onSubmit: _cache[2] || (_cache[2] = withModifiers(($event) => handleSubmit(), ["prevent"]))
+      }, [
         createVNode(unref(ScalarIconSparkle), {
           class: "size-3 shrink-0",
           weight: "fill"
         }),
+        _cache[3] || (_cache[3] = createElementVNode("div", { class: "ask-agent-scalar-input-label" }, "Ask AI Agent", -1)),
         withDirectives(createElementVNode("input", {
+          ref_key: "inputRef",
+          ref: inputRef,
           "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => message.value = $event),
-          class: "ask-agent-scalar-input",
-          placeholder: "Ask AI Agent",
-          onKeydown: _cache[1] || (_cache[1] = withKeys(withModifiers(($event) => handleSubmit(), ["stop"]), ["enter"]))
-        }, null, 544), [
+          class: normalizeClass(["ask-agent-scalar-input", { "ask-agent-scalar-input-not-empty": message.value.length > 0 }]),
+          placeholder: "Ask AI Agent"
+        }, null, 2), [
           [vModelText, message.value]
         ]),
-        createElementVNode("button", {
-          class: "ask-agent-scalar-send",
-          type: "button",
-          onClick: _cache[2] || (_cache[2] = ($event) => handleSubmit())
-        }, [
+        createElementVNode("button", _hoisted_1, [
           createVNode(unref(ScalarIconArrowUp), {
             class: "size-3",
             weight: "bold"
           })
         ])
-      ])) : createCommentVNode("", true);
+      ], 32)) : createCommentVNode("", true);
     };
   }
 });

package/dist/helpers/id-routing.d.ts

@@ -3,6 +3,10 @@ export declare const sanitizeBasePath: (basePath: string) => string;
 export declare const getIdFromHash: (location: string | URL, slugPrefix: string | undefined) => string;
 /** Extracts an element id from the path when using path routing */
 export declare const getIdFromPath: (location: string | URL, basePath: string, slugPrefix: string | undefined) => string;
+/** Extracts an element id from a hash-prefixed basePath */
+export declare const getIdFromHashBasePath: (location: string | URL, basePath: string, slugPrefix: string | undefined) => string;
+/** Determines whether a URL matches the provided basePath. */
+export declare const matchesBasePath: (location: string | URL, basePath: string) => boolean;
 /**
  * Extracts a navigation id from a URL based on the routing type
  *

package/dist/helpers/id-routing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"id-routing.d.ts","sourceRoot":"","sources":["../../src/helpers/id-routing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,WAEhD,CAAA;AAED,mEAAmE;AACnE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,YAAY,MAAM,GAAG,SAAS,WAMnF,CAAA;AACD,mEAAmE;AACnE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,EAAE,YAAY,MAAM,GAAG,SAAS,WAqBrG,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,GAAG,SAAS,EAAE,YAAY,MAAM,GAAG,SAAS,WAE3G,CAAA;AAmBD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,UAAU,MAAM,GAAG,SAAS,EAAE,iBAAiB,OAAO,oBAiBhG,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,qBAAqB,GAAI,IAAI,MAAM,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAajF,CAAA"}
+{"version":3,"file":"id-routing.d.ts","sourceRoot":"","sources":["../../src/helpers/id-routing.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,gBAAgB,GAAI,UAAU,MAAM,WAEhD,CAAA;AAwBD,mEAAmE;AACnE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,YAAY,MAAM,GAAG,SAAS,WAMnF,CAAA;AACD,mEAAmE;AACnE,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,EAAE,YAAY,MAAM,GAAG,SAAS,WAqBrG,CAAA;AAED,2DAA2D;AAC3D,eAAO,MAAM,qBAAqB,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,EAAE,YAAY,MAAM,GAAG,SAAS,WAW7G,CAAA;AAED,8DAA8D;AAC9D,eAAO,MAAM,eAAe,GAAI,UAAU,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,YAiBvE,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,GAAI,KAAK,MAAM,GAAG,GAAG,EAAE,UAAU,MAAM,GAAG,SAAS,EAAE,YAAY,MAAM,GAAG,SAAS,WAQ3G,CAAA;AAmBD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,GAAI,KAAK,MAAM,EAAE,UAAU,MAAM,GAAG,SAAS,EAAE,iBAAiB,OAAO,oBAsBhG,CAAA;AAED,qEAAqE;AACrE,eAAO,MAAM,qBAAqB,GAAI,IAAI,MAAM,KAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAajF,CAAA"}

package/dist/helpers/id-routing.js

@@ -1,10 +1,26 @@
 const sanitizeBasePath = (basePath) => {
   return basePath.replace(/^\/+|\/+$/g, "");
 };
+const isHashBasePath = (basePath) => basePath.startsWith("#");
+const sanitizeHashBasePath = (basePath) => {
+  return basePath.replace(/^#+/, "").replace(/\/+$/g, "");
+};
+const applySlugPrefix = (base, slugPrefix) => {
+  return slugPrefix ? `${slugPrefix}${base ? "/" : ""}${base}` : base;
+};
+const stripBasePathPrefix = (value, basePath) => {
+  if (value === basePath) {
+    return "";
+  }
+  if (value.startsWith(`${basePath}/`)) {
+    return value.slice(basePath.length + 1);
+  }
+  return null;
+};
 const getIdFromHash = (location, slugPrefix) => {
   const url = typeof location === "string" ? new URL(location) : location;
   const base = decodeURIComponent(url.hash.slice(1));
-  return slugPrefix ? `${slugPrefix}${base ? "/" : ""}${base}` : base;
+  return applySlugPrefix(base, slugPrefix);
 };
 const getIdFromPath = (location, basePath, slugPrefix) => {
   const url = typeof location === "string" ? new URL(location) : location;
@@ -13,12 +29,35 @@ const getIdFromPath = (location, basePath, slugPrefix) => {
   if (url.pathname.startsWith(basePathWithSlash)) {
     const remainder = url.pathname.slice(basePathWithSlash.length);
     const base = decodeURIComponent(remainder.startsWith("/") ? remainder.slice(1) : remainder);
-    return slugPrefix ? `${slugPrefix}${base ? "/" : ""}${base}` : base;
+    return applySlugPrefix(base, slugPrefix);
   }
   return slugPrefix ?? "";
 };
+const getIdFromHashBasePath = (location, basePath, slugPrefix) => {
+  const url = typeof location === "string" ? new URL(location) : location;
+  const hash = decodeURIComponent(url.hash.slice(1));
+  const sanitized = sanitizeHashBasePath(basePath);
+  const remainder = stripBasePathPrefix(hash, sanitized);
+  if (remainder !== null) {
+    return applySlugPrefix(remainder, slugPrefix);
+  }
+  return slugPrefix ?? "";
+};
+const matchesBasePath = (location, basePath) => {
+  const url = typeof location === "string" ? new URL(location) : location;
+  if (isHashBasePath(basePath)) {
+    const hash = decodeURIComponent(url.hash);
+    return hash === basePath || hash.startsWith(`${basePath}/`);
+  }
+  const sanitized = sanitizeBasePath(basePath);
+  const basePathWithSlash = sanitized ? `/${sanitized.split("/").map((segment) => encodeURIComponent(segment)).join("/")}` : "";
+  return url.pathname === basePathWithSlash || url.pathname.startsWith(`${basePathWithSlash}/`);
+};
 const getIdFromUrl = (url, basePath, slugPrefix) => {
-  return typeof basePath === "string" ? getIdFromPath(url, basePath, slugPrefix) : getIdFromHash(url, slugPrefix);
+  if (typeof basePath !== "string") {
+    return getIdFromHash(url, slugPrefix);
+  }
+  return isHashBasePath(basePath) ? getIdFromHashBasePath(url, basePath, slugPrefix) : getIdFromPath(url, basePath, slugPrefix);
 };
 const stripFirstSegment = (id) => {
   const hasTrailingSlash = id.endsWith("/");
@@ -33,8 +72,13 @@ const makeUrlFromId = (_id, basePath, isMultiDocument) => {
   const id = isMultiDocument ? _id : stripFirstSegment(_id);
   const url = new URL(window.location.href);
   if (typeof basePath === "string") {
-    const base = sanitizeBasePath(basePath);
-    url.pathname = `${base}/${id}`;
+    if (isHashBasePath(basePath)) {
+      const base = sanitizeHashBasePath(basePath);
+      url.hash = [base, id].filter(Boolean).join("/");
+    } else {
+      const base = sanitizeBasePath(basePath);
+      url.pathname = `${base}/${id}`;
+    }
   } else {
     url.hash = id;
   }
@@ -55,9 +99,11 @@ const getSchemaParamsFromId = (id) => {
 };
 export {
   getIdFromHash,
+  getIdFromHashBasePath,
   getIdFromPath,
   getIdFromUrl,
   getSchemaParamsFromId,
   makeUrlFromId,
+  matchesBasePath,
   sanitizeBasePath
 };

package/dist/helpers/lazy-bus.d.ts

@@ -1,12 +1,11 @@
-/** Tracks when the initial load is complete.
- * We will have placeholder content to allow the active item to be scrolled to the top while
- * the rest of the content is loaded.
- */
+/** Tracks when the initial load is complete. */
 export declare const firstLazyLoadComplete: import("vue").Ref<boolean, boolean>;
+export declare const getLazyPlaceholderHeight: (id: string) => number | undefined;
+export declare const setLazyPlaceholderHeight: (id: string, height: number) => void;
 type UnblockFn = () => void;
 /**
- * Adds a unique identifier to the intersection blockers set
- * Intersection will not be enabled until the unblock callback is run
+ * Blocks intersection until the returned unblock callback is run.
+ * Prevents scroll jump while we render new lazy content.
  */
 export declare const blockIntersection: () => UnblockFn;
 /** If there are any pending blocking operations we disable intersection */
@@ -17,26 +16,27 @@ export declare const intersectionEnabled: import("vue").ComputedRef<boolean>;
  * but processQueue will skip actual re-rendering for items already ready.
  */
 export declare const addToPriorityQueue: (id: string | undefined) => void;
+/**
+ * Request an item to be rendered (e.g. when it re-enters the overscan zone).
+ */
+export declare const requestLazyRender: (id: string | undefined, priority?: boolean) => void;
+/**
+ * Schedules a single run of the lazy bus so that documents with no Lazy components
+ * (e.g. no operations, tags, or models) still get firstLazyLoadComplete set and the
+ * full-viewport placeholder can be hidden. Call from content root on mount.
+ */
+export declare const scheduleInitialLoadComplete: () => void;
 /**
  * Tracks the lazy loading state of an element.
- * The element should be conditionally rendered using the isReady property.
- *
- * @param id - The id of the element to track
- * @returns An object with the isReady property
+ * Use isReady (or expanded) to decide whether to render the slot or show a placeholder.
+ * The element is only added to the queue when it enters the viewport overscan (see Lazy.vue).
  */
 export declare function useLazyBus(id: string): {
     isReady: import("vue").ComputedRef<boolean>;
 };
 /**
- * Scroll to possible lazy element
- *
- * Will ensure that all parents are expanded and set to priority load before scrolling
- *
- * Similar to scrollToId BUT in the case of a section not being open,
- * it uses the lazyBus to ensure the section is open before scrolling to it
- *
- * Requires handlers to expand and lookup navigation items so that we can
- * traverse the parent structure and load all required items
+ * Scroll to a possibly lazy-loaded element. Expands parents and adds target (and
+ * parents) to the priority queue, then scrolls after Vue has flushed.
  */
 export declare const scrollToLazy: (id: string, setExpanded: (id: string, value: boolean) => void, getEntryById: (id: string) => {
     id: string;

package/dist/helpers/lazy-bus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-bus.d.ts","sourceRoot":"","sources":["../../src/helpers/lazy-bus.ts"],"names":[],"mappings":"AAwBA;;;GAGG;AACH,eAAO,MAAM,qBAAqB,qCAAa,CAAA;AAc/C,KAAK,SAAS,GAAG,MAAM,IAAI,CAAA;AAE3B;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,SAMpC,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,oCAAkD,CAAA;AA8ElF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,GAAG,SAAS,SAIxD,CAAA;AAWD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM;;EAUpC;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,YAAY,GACvB,IAAI,MAAM,EACV,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,EACjD,cAAc,CAAC,EAAE,EAAE,MAAM,KAAK;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,QAAQ,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,GAAG,SAAS,SA2D/G,CAAA"}
+{"version":3,"file":"lazy-bus.d.ts","sourceRoot":"","sources":["../../src/helpers/lazy-bus.ts"],"names":[],"mappings":"AAuBA,gDAAgD;AAChD,eAAO,MAAM,qBAAqB,qCAAa,CAAA;AAU/C,eAAO,MAAM,wBAAwB,GAAI,IAAI,MAAM,KAAG,MAAM,GAAG,SAA2C,CAAA;AAE1G,eAAO,MAAM,wBAAwB,GAAI,IAAI,MAAM,EAAE,QAAQ,MAAM,KAAG,IAKrE,CAAA;AASD,KAAK,SAAS,GAAG,MAAM,IAAI,CAAA;AAE3B;;;GAGG;AACH,eAAO,MAAM,iBAAiB,QAAO,SAMpC,CAAA;AAED,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB,oCAAkD,CAAA;AAsFlF;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,IAAI,MAAM,GAAG,SAAS,SAIxD,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,GAAI,IAAI,MAAM,GAAG,SAAS,EAAE,kBAAgB,KAAG,IAY5E,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,QAAO,IAM9C,CAAA;AAYD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EAAE,EAAE,MAAM;;EAQpC;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,GACvB,IAAI,MAAM,EACV,aAAa,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,IAAI,EACjD,cAAc,CAAC,EAAE,EAAE,MAAM,KAAK;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC;IAAC,QAAQ,CAAC,EAAE;QAAE,EAAE,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;CAAE,GAAG,SAAS,SAwD/G,CAAA"}

package/dist/helpers/lazy-bus.js

@@ -1,6 +1,6 @@
 import { watchDebounced } from "@vueuse/core";
 import { nanoid } from "nanoid";
-import { computed, ref, reactive, onBeforeUnmount, nextTick } from "vue";
+import { computed, reactive, ref, onBeforeUnmount, nextTick } from "vue";
 import { getSchemaParamsFromId } from "./id-routing.js";
 const priorityQueue = reactive(/* @__PURE__ */ new Set());
 const pendingQueue = reactive(/* @__PURE__ */ new Set());
@@ -10,6 +10,14 @@ const SCROLL_RETRY_MS = 3e3;
 const firstLazyLoadComplete = ref(false);
 const intersectionBlockers = reactive(/* @__PURE__ */ new Set());
 const onRenderComplete = /* @__PURE__ */ new Set();
+const lazyPlaceholderHeights = reactive(/* @__PURE__ */ new Map());
+const getLazyPlaceholderHeight = (id) => lazyPlaceholderHeights.get(id);
+const setLazyPlaceholderHeight = (id, height) => {
+  if (!Number.isFinite(height) || height <= 0) {
+    return;
+  }
+  lazyPlaceholderHeights.set(id, Math.round(height));
+};
 const addLazyCompleteCallback = (callback) => {
   if (callback) {
     onRenderComplete.add(callback);
@@ -25,22 +33,31 @@ const runLazyBus = () => {
   if (typeof window === "undefined") {
     return;
   }
-  const unblock = blockIntersection();
+  if (isRunning.value) {
+    return;
+  }
+  isRunning.value = true;
   const processQueue = async () => {
-    if (pendingQueue.size > 0 || priorityQueue.size > 0) {
-      isRunning.value = true;
-      for (const id of [...pendingQueue, ...priorityQueue]) {
-        if (!readyQueue.has(id)) {
-          readyQueue.add(id);
-        }
-        pendingQueue.delete(id);
-        priorityQueue.delete(id);
-      }
+    const priorityIds = [...priorityQueue];
+    const pendingIds = [...pendingQueue];
+    if (priorityIds.length === 0 && pendingIds.length === 0) {
+      onRenderComplete.forEach((fn) => fn());
+      onRenderComplete.clear();
+      isRunning.value = false;
+      firstLazyLoadComplete.value = true;
+      return;
+    }
+    for (const id of priorityIds) {
+      readyQueue.add(id);
+      priorityQueue.delete(id);
+    }
+    for (const id of pendingIds) {
+      readyQueue.add(id);
+      pendingQueue.delete(id);
     }
     await nextTick();
     onRenderComplete.forEach((fn) => fn());
     onRenderComplete.clear();
-    unblock();
     isRunning.value = false;
     firstLazyLoadComplete.value = true;
   };
@@ -60,7 +77,7 @@ watchDebounced(
   { debounce: 300, maxWait: 1500 }
 );
 const addToPendingQueue = (id) => {
-  if (!!id && !readyQueue.has(id) && !priorityQueue.has(id)) {
+  if (id && !readyQueue.has(id) && !priorityQueue.has(id)) {
     pendingQueue.add(id);
   }
 };
@@ -69,13 +86,33 @@ const addToPriorityQueue = (id) => {
     priorityQueue.add(id);
   }
 };
+const requestLazyRender = (id, priority = false) => {
+  if (!id || readyQueue.has(id)) {
+    return;
+  }
+  if (priority) {
+    addToPriorityQueue(id);
+  } else {
+    addToPendingQueue(id);
+  }
+  if (!isRunning.value) {
+    runLazyBus();
+  }
+};
+const scheduleInitialLoadComplete = () => {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const delay = 400;
+  window.setTimeout(() => runLazyBus(), delay);
+};
 const resetLazyElement = (id) => {
   priorityQueue.delete(id);
   pendingQueue.delete(id);
   readyQueue.delete(id);
+  lazyPlaceholderHeights.delete(id);
 };
 function useLazyBus(id) {
-  addToPendingQueue(id);
   onBeforeUnmount(() => {
     resetLazyElement(id);
   });
@@ -93,20 +130,15 @@ const scrollToLazy = (id, setExpanded, getEntryById) => {
   addToPriorityQueue(id);
   addToPriorityQueue(rawId);
   if (item?.children) {
-    item.children.slice(0, 2).forEach((child) => {
-      addToPriorityQueue(child.id);
-    });
+    item.children.slice(0, 2).forEach((child) => addToPriorityQueue(child.id));
   }
   if (item?.parent) {
     const parent = getEntryById(item.parent.id);
     const elementIdx = parent?.children?.findIndex((child) => child.id === id);
     if (elementIdx !== void 0 && elementIdx >= 0) {
-      parent?.children?.slice(elementIdx, elementIdx + 2).forEach((child) => {
-        addToPriorityQueue(child.id);
-      });
+      parent?.children?.slice(elementIdx, elementIdx + 2).forEach((child) => addToPriorityQueue(child.id));
     }
   }
-  tryScroll(id, Date.now() + SCROLL_RETRY_MS, unblock, unfreeze);
   setExpanded(rawId, true);
   const addParents = (currentId) => {
     const parent = getEntryById(currentId)?.parent;
@@ -117,16 +149,17 @@ const scrollToLazy = (id, setExpanded, getEntryById) => {
     }
   };
   addParents(rawId);
+  void nextTick(() => {
+    tryScroll(id, Date.now() + SCROLL_RETRY_MS, unblock, unfreeze);
+  });
 };
 const tryScroll = (id, stopTime, onComplete, onFailure) => {
   const element = document.getElementById(id);
   if (element) {
-    element.scrollIntoView({
-      block: "start"
-    });
+    element.scrollIntoView({ block: "start" });
     onComplete();
   } else if (Date.now() < stopTime) {
-    requestAnimationFrame(() => tryScroll(id, stopTime, onComplete));
+    requestAnimationFrame(() => tryScroll(id, stopTime, onComplete, onFailure));
   } else {
     onComplete();
     onFailure?.();
@@ -137,9 +170,7 @@ const freeze = (id) => {
   const runFrame = (stopAfterFrame) => {
     const element = document.getElementById(id);
     if (element) {
-      element.scrollIntoView({
-        block: "start"
-      });
+      element.scrollIntoView({ block: "start" });
     }
     if (!stopAfterFrame) {
       requestAnimationFrame(() => runFrame(stop));
@@ -154,7 +185,11 @@ export {
   addToPriorityQueue,
   blockIntersection,
   firstLazyLoadComplete,
+  getLazyPlaceholderHeight,
   intersectionEnabled,
+  requestLazyRender,
+  scheduleInitialLoadComplete,
   scrollToLazy,
+  setLazyPlaceholderHeight,
   useLazyBus
 };