@arronqzy/vue-blueprint 0.1.3 → 0.1.5

package/src/components/FetchNodeConfigPanel.vue

@@ -3,11 +3,14 @@ import { useI18n } from "@arronqzy/i18n/vue";
 import { computed, ref } from "vue";
 import { Button, Input, Select } from "ant-design-vue";
 import type {
+  ExecutionTraceEntry,
   FetchHttpMethod,
   FetchRequestConfig,
   FetchResponseType,
 } from "@arronqzy/blueprint-dsl";
 import {
+  applyFetchConfigScope,
+  draftFetchHeadersText,
   FETCH_CACHES,
   FETCH_CREDENTIALS,
   FETCH_HTTP_METHODS,
@@ -15,9 +18,17 @@ import {
   FETCH_NODE_TYPE,
   FETCH_REDIRECTS,
   FETCH_RESPONSE_TYPES,
+  fetchConfigHasScopeTemplate,
+  getFetchBodyValidationError,
+  getFetchHeadersValidationError,
+  latestTraceOutputsByNode,
+  parseFetchHeadersJson,
+  resolveFetchIncomingScope,
+  resolveFetchRequestUrl,
+  resolveFetchScopeAutocompleteRoot,
 } from "@arronqzy/blueprint-dsl";
 
-import type { BlueprintGraphNode } from "../graph/document";
+import type { BlueprintGraphEdge, BlueprintGraphNode } from "../graph/document";
 import { resolveNodeFetchConfig } from "../graph/document";
 import {
   cancelFetchDebugTask,
@@ -27,25 +38,95 @@ import {
   useFetchDebugTask,
   useSwaggerLoadTask,
 } from "../fetch-config-task-store";
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import FetchUrlAutocomplete from "./FetchUrlAutocomplete.vue";
+import ScopeTemplateAutocompleteHost from "./ScopeTemplateAutocompleteHost.vue";
 
 const { t } = useI18n();
 
 export type FetchNodeConfigPanelProps = {
   node: BlueprintGraphNode;
+  graphNodes?: BlueprintGraphNode[];
+  graphEdges?: BlueprintGraphEdge[];
+  traceEntries?: ExecutionTraceEntry[];
   onUpdateNode: (
     nodeId: string,
     patch: Partial<Pick<BlueprintGraphNode, "fetchConfig" | "configSource">>
   ) => void;
 };
 
-const props = defineProps<FetchNodeConfigPanelProps>();
+const props = withDefaults(defineProps<FetchNodeConfigPanelProps>(), {
+  graphNodes: () => [],
+  graphEdges: () => [],
+  traceEntries: () => [],
+});
 
 const validationError = ref<string | null>(null);
 const fetchValidationError = ref<string | null>(null);
 const debugExpanded = ref(false);
 
 const fetchConfig = computed(() => resolveNodeFetchConfig(props.node));
+const incomingScope = computed(() => {
+  const outputs = latestTraceOutputsByNode(props.traceEntries);
+  return resolveFetchIncomingScope({
+    fetchNodeId: props.node.id,
+    nodes: props.graphNodes,
+    edges: props.graphEdges,
+    getOutput: (sourceId, port) => outputs[sourceId]?.[port],
+  });
+});
+const usesScopeTemplate = computed(() => fetchConfigHasScopeTemplate(fetchConfig.value));
+const resolvedFetchConfig = computed(() =>
+  applyFetchConfigScope(fetchConfig.value, incomingScope.value)
+);
+const resolvedUrlPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  try {
+    return resolveFetchRequestUrl(resolvedFetchConfig.value);
+  } catch {
+    return resolvedFetchConfig.value.url?.trim() ?? "";
+  }
+});
+const incomingScopeJson = computed(() => {
+  if (incomingScope.value === undefined) return "";
+  try {
+    return JSON.stringify(incomingScope.value, null, 2);
+  } catch {
+    return String(incomingScope.value);
+  }
+});
+const headersDraft = computed(() => draftFetchHeadersText(fetchConfig.value));
+const resolvedHeadersPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  const headers = resolvedFetchConfig.value.headers;
+  if (!headers || Object.keys(headers).length === 0) return "";
+  try {
+    return JSON.stringify(headers, null, 2);
+  } catch {
+    return "";
+  }
+});
+const resolvedBodyPreview = computed(() => {
+  if (!usesScopeTemplate.value) return "";
+  return resolvedFetchConfig.value.body?.trim() ?? "";
+});
+const headersJsonError = computed(() =>
+  getFetchHeadersValidationError(fetchConfig.value, incomingScope.value)
+);
+const bodyJsonError = computed(() =>
+  getFetchBodyValidationError(fetchConfig.value.body, resolvedFetchConfig.value.body)
+);
+const incomingHasPendingValue = computed(() => {
+  const scope = incomingScope.value;
+  if (!scope || typeof scope !== "object") return false;
+  const entries =
+    "kind" in scope ? [scope] : Object.values(scope as Record<string, { kind?: string }>);
+  return entries.some((entry) => entry && entry.kind === "pending");
+});
+const autocompleteScope = computed(() =>
+  resolveFetchScopeAutocompleteRoot(incomingScope.value)
+);
+const formRef = ref<HTMLElement | null>(null);
 const endpoints = computed(() => fetchConfig.value.swaggerEndpoints ?? []);
 const hasSwaggerEndpoints = computed(() => endpoints.value.length > 0);
 const urlInputMode = computed(
@@ -105,16 +186,37 @@ function handleAbortSwagger() {
 }
 
 function handleSendFetchDebug() {
-  const url = fetchConfig.value.url?.trim();
+  const resolved = applyFetchConfigScope(fetchConfig.value, incomingScope.value);
+  const url = resolved.url?.trim();
   if (!url) {
-    fetchValidationError.value = t("blueprint.config.fillRequestUrlFirst");
+    fetchValidationError.value =
+      usesScopeTemplate.value && fetchConfig.value.url?.trim()
+        ? t("blueprint.config.fetchScopeUnresolved")
+        : t("blueprint.config.fillRequestUrlFirst");
+    return;
+  }
+  const headersError = getFetchHeadersValidationError(
+    fetchConfig.value,
+    incomingScope.value
+  );
+  if (headersError) {
+    fetchValidationError.value = t("blueprint.config.fetchHeadersInvalidJson", {
+      error: headersError,
+    });
+    return;
+  }
+  const bodyError = getFetchBodyValidationError(fetchConfig.value.body, resolved.body);
+  if (bodyError) {
+    fetchValidationError.value = t("blueprint.config.fetchBodyInvalidJson", {
+      error: bodyError,
+    });
     return;
   }
 
   fetchValidationError.value = null;
   startFetchDebugTask({
     nodeId: props.node.id,
-    config: fetchConfig.value,
+    config: resolved,
   });
 }
 
@@ -148,25 +250,47 @@ const debugOk = computed(() => {
   return result ? result.status >= 200 && result.status < 300 : false;
 });
 
-function handleHeadersBlur(event: Event) {
-  try {
-    const headers = JSON.parse((event.target as HTMLTextAreaElement).value || "{}") as Record<
-      string,
-      string
-    >;
-    props.onUpdateNode(props.node.id, patchFetchConfig(props.node, { headers }));
-  } catch {
-    /* 保留上次有效值 */
-  }
+function handleHeadersInput(event: Event) {
+  const headersJson = (event.target as HTMLTextAreaElement).value;
+  const parsed = parseFetchHeadersJson(headersJson);
+  props.onUpdateNode(
+    props.node.id,
+    patchFetchConfig(props.node, {
+      headersJson,
+      ...(parsed ? { headers: parsed } : {}),
+    })
+  );
 }
 </script>
 
 <template>
-  <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-    <div class="font-medium text-foreground">{{ t("blueprint.config.fetchTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">
-      {{ t("blueprint.config.fetchHint") }}
-    </p>
+  <div
+    ref="formRef"
+    class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5"
+  >
+    <ScopeTemplateAutocompleteHost :scope="autocompleteScope" :container-ref="formRef" />
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.fetchTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.fetchTitle')">
+        {{ t("blueprint.config.fetchHint") }}
+      </ConfigHintIcon>
+    </div>
+    <div class="space-y-1 rounded-md border border-gray-200/80 bg-white/80 p-2">
+      <div class="flex items-center gap-1.5 text-[11px] font-medium text-gray-800">
+        {{ t("blueprint.config.fetchScopeTitle") }}
+        <ConfigHintIcon :label="t('blueprint.config.fetchScopeTitle')">
+          <p>{{ t("blueprint.config.fetchScopeHint") }}</p>
+          <p>{{ t("blueprint.config.fetchScopeEmpty") }}</p>
+          <p>{{ t("blueprint.config.fetchScopePending") }}</p>
+        </ConfigHintIcon>
+      </div>
+      <template v-if="incomingScope !== undefined">
+        <p v-if="incomingHasPendingValue" class="text-[11px] text-amber-700">
+          {{ t("blueprint.config.fetchScopePending") }}
+        </p>
+        <pre class="max-h-[180px] overflow-auto rounded border border-gray-200 bg-gray-50 p-2 font-mono text-[10px] leading-relaxed text-gray-800">{{ incomingScopeJson }}</pre>
+      </template>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.swaggerUrlOptional") }}</span>
@@ -176,6 +300,7 @@ function handleHeadersBlur(event: Event) {
           :value="fetchConfig.swaggerDocsUrl ?? ''"
           :disabled="loadingSwagger"
           placeholder="https://example.com/v3/api-docs"
+          data-scope-autocomplete="off"
           class="flex-1 font-mono text-[11px]"
           @update:value="
             (v) =>
@@ -254,7 +379,7 @@ function handleHeadersBlur(event: Event) {
           <Input
             size="small"
             :value="fetchConfig.apiBaseUrl ?? ''"
-            placeholder="https://api.example.com/v1"
+            placeholder="https://api.example.com/v1/{scope?.value?.tenant}"
             class="font-mono text-[11px]"
             @update:value="
               (v) => onUpdateNode(node.id, patchFetchConfig(node, { apiBaseUrl: String(v) }))
@@ -313,7 +438,7 @@ function handleHeadersBlur(event: Event) {
           size="small"
           :value="fetchConfig.url"
           :disabled="loadingFetchDebug"
-          placeholder="https://api.example.com/data"
+          placeholder="https://api.example.com/users/{scope?.value?.id}"
           class="flex-1 font-mono text-[11px]"
           @update:value="(v) => onUpdateNode(node.id, patchFetchConfig(node, { url: String(v) }))"
         />
@@ -338,6 +463,12 @@ function handleHeadersBlur(event: Event) {
         </Button>
       </div>
 
+      <p
+        v-if="usesScopeTemplate && resolvedUrlPreview"
+        class="break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedUrl") }}: {{ resolvedUrlPreview }}
+      </p>
       <p v-if="loadingFetchDebug" class="text-[11px] text-muted-foreground">
         {{ t("blueprint.config.sendingDebug") }}
       </p>
@@ -418,24 +549,44 @@ function handleHeadersBlur(event: Event) {
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.requestHeadersJson") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.requestHeadersJson") }}
+        <ConfigHintIcon :label="t('blueprint.config.requestHeadersJson')">
+          {{ t("blueprint.config.fetchHeadersHint") }}
+        </ConfigHintIcon>
+      </span>
       <textarea
-        :key="`${node.id}-headers-${JSON.stringify(fetchConfig.headers)}`"
-        :value="JSON.stringify(fetchConfig.headers ?? {}, null, 2)"
+        :value="headersDraft"
         rows="4"
-        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
-        placeholder='{"Content-Type":"application/json"}'
-        @blur="handleHeadersBlur"
+        class="w-full rounded-md border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        :class="headersJsonError ? 'border-destructive' : 'border-input'"
+        placeholder='{"Authorization":"Bearer {scope?.value?.token}"}'
+        @input="handleHeadersInput"
       />
+      <p v-if="headersJsonError" class="text-[11px] text-destructive">
+        {{ t("blueprint.config.fetchHeadersInvalidJson", { error: headersJsonError }) }}
+      </p>
+      <p
+        v-if="usesScopeTemplate && resolvedHeadersPreview"
+        class="whitespace-pre-wrap break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedHeaders") }}: {{ resolvedHeadersPreview }}
+      </p>
     </label>
 
     <label class="block space-y-1">
-      <span class="text-muted-foreground">{{ t("blueprint.config.requestBody") }}</span>
+      <span class="inline-flex items-center gap-1 text-muted-foreground">
+        {{ t("blueprint.config.requestBody") }}
+        <ConfigHintIcon :label="t('blueprint.config.requestBody')">
+          {{ t("blueprint.config.fetchBodyHint") }}
+        </ConfigHintIcon>
+      </span>
       <textarea
         :value="fetchConfig.body ?? ''"
         rows="4"
-        class="w-full rounded-md border border-input bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
-        placeholder='{"key":"value"}'
+        class="w-full rounded-md border bg-background px-2 py-1.5 font-mono text-[11px] leading-relaxed text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
+        :class="bodyJsonError ? 'border-destructive' : 'border-input'"
+        placeholder='{"id":"{scope?.value?.id}"}'
         @input="
           (e) =>
             onUpdateNode(
@@ -444,6 +595,15 @@ function handleHeadersBlur(event: Event) {
             )
         "
       />
+      <p v-if="bodyJsonError" class="text-[11px] text-destructive">
+        {{ t("blueprint.config.fetchBodyInvalidJson", { error: bodyJsonError }) }}
+      </p>
+      <p
+        v-if="usesScopeTemplate && resolvedBodyPreview"
+        class="whitespace-pre-wrap break-all font-mono text-[10px] text-gray-500"
+      >
+        {{ t("blueprint.config.fetchScopeResolvedBody") }}: {{ resolvedBodyPreview }}
+      </p>
     </label>
 
     <div class="grid grid-cols-2 gap-2">

package/src/components/FetchUrlAutocomplete.vue

@@ -142,6 +142,7 @@ function handleKeyDown(event: KeyboardEvent) {
     <input
       :value="inputValue"
       :readOnly="selectOnly && !open"
+      data-scope-autocomplete="off"
       :placeholder="placeholder"
       class="flex h-8 w-full rounded-md border border-input bg-background px-2 py-1 text-[11px] text-foreground shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-primary"
       :class="selectOnly && !open ? 'cursor-pointer font-medium' : 'font-mono'"

package/src/components/JsonNodeConfigPanel.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { validateJsonString } from "@arronqzy/blueprint-dsl";
 import type { JsonNodeConfig } from "@arronqzy/blueprint-dsl";
 
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeJsonConfig } from "../graph/document";
 
@@ -48,8 +49,12 @@ function handleChange(event: Event) {
 
 <template>
   <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-    <div class="font-medium text-foreground">{{ t("blueprint.config.jsonTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.jsonHint") }}</p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.jsonTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.jsonTitle')">
+        {{ t("blueprint.config.jsonHint") }}
+      </ConfigHintIcon>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.jsonContent") }}</span>

package/src/components/LogicNodeConfigPanel.vue

@@ -4,6 +4,7 @@ import { computed, ref } from "vue";
 import { validateLogicSourceCode } from "@arronqzy/blueprint-dsl";
 import type { LogicNodeConfig } from "@arronqzy/blueprint-dsl";
 
+import ConfigHintIcon from "./ConfigHintIcon.vue";
 import type { BlueprintGraphNode } from "../graph/document";
 import { resolveNodeLogicConfig } from "../graph/document";
 
@@ -48,8 +49,12 @@ function handleChange(event: Event) {
 
 <template>
   <div class="space-y-2 rounded-md border border-border/70 bg-muted/20 p-2.5">
-    <div class="font-medium text-foreground">{{ t("blueprint.config.logicTitle") }}</div>
-    <p class="text-[11px] text-muted-foreground">{{ t("blueprint.config.logicHint") }}</p>
+    <div class="flex items-center gap-1.5">
+      <div class="font-medium text-foreground">{{ t("blueprint.config.logicTitle") }}</div>
+      <ConfigHintIcon :label="t('blueprint.config.logicTitle')">
+        {{ t("blueprint.config.logicHint") }}
+      </ConfigHintIcon>
+    </div>
 
     <label class="block space-y-1">
       <span class="text-muted-foreground">{{ t("blueprint.config.jsCode") }}</span>

package/src/components/ScopeTemplateAutocompleteHost.vue

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import {
+  toValue,
+  watch,
+  shallowRef,
+  type MaybeRef,
+} from "vue";
+import {
+  applyScopeAutocompleteSelection,
+  buildScopeExpression,
+  getScopeAutocompleteSuggestions,
+  parseScopeAutocomplete,
+  type ScopeAutocompleteState,
+} from "@arronqzy/blueprint-dsl";
+
+type DropdownState = {
+  input: HTMLInputElement | HTMLTextAreaElement;
+  state: ScopeAutocompleteState;
+  suggestions: string[];
+  activeIndex: number;
+  rect: DOMRect;
+};
+
+const props = defineProps<{
+  scope: unknown;
+  containerRef?: MaybeRef<HTMLElement | null | undefined>;
+}>();
+
+const dropdown = shallowRef<DropdownState | null>(null);
+
+function isAutocompleteTarget(
+  target: EventTarget | null
+): target is HTMLInputElement | HTMLTextAreaElement {
+  if (target instanceof HTMLTextAreaElement) {
+    return target.dataset.scopeAutocomplete !== "off";
+  }
+  if (target instanceof HTMLInputElement) {
+    if (target.dataset.scopeAutocomplete === "off") return false;
+    const type = target.type;
+    return (
+      !type ||
+      type === "text" ||
+      type === "search" ||
+      type === "url" ||
+      type === "password"
+    );
+  }
+  return false;
+}
+
+function setNativeInputValue(
+  element: HTMLInputElement | HTMLTextAreaElement,
+  value: string
+) {
+  const proto =
+    element instanceof HTMLTextAreaElement
+      ? HTMLTextAreaElement.prototype
+      : HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(proto, "value");
+  descriptor?.set?.call(element, value);
+  element.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function closeDropdown() {
+  dropdown.value = null;
+}
+
+function refreshForInput(input: HTMLInputElement | HTMLTextAreaElement) {
+  if (props.scope === undefined) {
+    closeDropdown();
+    return;
+  }
+  const cursor = input.selectionStart ?? input.value.length;
+  const parsed = parseScopeAutocomplete(input.value, cursor, props.scope);
+  if (!parsed) {
+    closeDropdown();
+    return;
+  }
+  const suggestions = getScopeAutocompleteSuggestions(props.scope, parsed);
+  if (suggestions.length === 0) {
+    closeDropdown();
+    return;
+  }
+  dropdown.value = {
+    input,
+    state: parsed,
+    suggestions,
+    activeIndex: 0,
+    rect: input.getBoundingClientRect(),
+  };
+}
+
+function applySuggestion(index: number) {
+  const current = dropdown.value;
+  if (!current) return;
+  const selected = current.suggestions[index];
+  if (!selected) return;
+
+  const { value, cursor } = applyScopeAutocompleteSelection(
+    current.input.value,
+    current.state,
+    selected
+  );
+  setNativeInputValue(current.input, value);
+  current.input.focus();
+  current.input.setSelectionRange(cursor, cursor);
+  closeDropdown();
+  window.requestAnimationFrame(() => {
+    refreshForInput(current.input);
+  });
+}
+
+function onFocusIn(event: FocusEvent) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onInput(event: Event) {
+  if (!isAutocompleteTarget(event.target)) return;
+  refreshForInput(event.target);
+}
+
+function onKeyDown(event: KeyboardEvent) {
+  const current = dropdown.value;
+  if (!current || event.target !== current.input) return;
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.min(current.activeIndex + 1, current.suggestions.length - 1),
+    };
+    return;
+  }
+  if (event.key === "ArrowUp") {
+    event.preventDefault();
+    dropdown.value = {
+      ...current,
+      activeIndex: Math.max(current.activeIndex - 1, 0),
+    };
+    return;
+  }
+  if (event.key === "Enter" || event.key === "Tab") {
+    if (current.suggestions.length > 0) {
+      event.preventDefault();
+      applySuggestion(current.activeIndex);
+    }
+    return;
+  }
+  if (event.key === "Escape") {
+    event.preventDefault();
+    closeDropdown();
+  }
+}
+
+function onPointerDown(event: MouseEvent) {
+  const target = event.target as Node | null;
+  if (
+    dropdown.value?.input.contains(target ?? null) ||
+    (target instanceof Element && target.closest("[data-scope-ac-list]"))
+  ) {
+    return;
+  }
+  const container = toValue(props.containerRef);
+  if (container && !container.contains(target)) {
+    closeDropdown();
+  }
+}
+
+watch(
+  () => toValue(props.containerRef),
+  (container, _prev, onCleanup) => {
+    if (!container || props.scope === undefined) return;
+
+    container.addEventListener("focusin", onFocusIn);
+    container.addEventListener("input", onInput, true);
+    container.addEventListener("keydown", onKeyDown, true);
+    window.addEventListener("pointerdown", onPointerDown, true);
+    window.addEventListener("scroll", closeDropdown, true);
+    window.addEventListener("resize", closeDropdown);
+
+    onCleanup(() => {
+      container.removeEventListener("focusin", onFocusIn);
+      container.removeEventListener("input", onInput, true);
+      container.removeEventListener("keydown", onKeyDown, true);
+      window.removeEventListener("pointerdown", onPointerDown, true);
+      window.removeEventListener("scroll", closeDropdown, true);
+      window.removeEventListener("resize", closeDropdown);
+    });
+  },
+  { immediate: true }
+);
+
+watch(
+  () => props.scope,
+  () => {
+    if (props.scope === undefined) closeDropdown();
+  }
+);
+</script>
+
+<template>
+  <Teleport v-if="dropdown && scope !== undefined" to="body">
+    <div
+      data-scope-ac-list
+      class="fixed z-[10120] max-h-44 min-w-[140px] overflow-auto rounded-md border border-border bg-white py-1 text-gray-800 shadow-md"
+      :style="{
+        left: `${dropdown.rect.left}px`,
+        top: `${dropdown.rect.bottom + 4}px`,
+        width: `${Math.max(dropdown.rect.width, 160)}px`,
+      }"
+    >
+      <button
+        v-for="(key, index) in dropdown.suggestions"
+        :key="key"
+        type="button"
+        :class="[
+          'flex w-full flex-col items-start gap-0.5 px-2 py-1.5 text-left text-[11px] hover:bg-gray-100',
+          index === dropdown.activeIndex && 'bg-gray-100',
+        ]"
+        @mousedown.prevent
+        @click="applySuggestion(index)"
+      >
+        <span class="font-medium text-gray-800">{{ key }}</span>
+        <span class="font-mono text-[10px] text-gray-500">{{
+          `{${buildScopeExpression(dropdown.state.path, key)}}`
+        }}</span>
+      </button>
+    </div>
+  </Teleport>
+</template>