@shwfed/config 2.5.3 → 2.7.0

package/dist/runtime/components/ui/expression-editor/CodeMirrorInput.vue

@@ -0,0 +1,134 @@
+<script setup>
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, keymap, placeholder as cmPlaceholder } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
+import { onBeforeUnmount, onMounted, useTemplateRef, watch } from "vue";
+import { cn } from "../../../utils/cn";
+import { celHighlighting } from "./cel-language";
+import { scopeChips, scopeLookupFacet } from "./chip-extension";
+defineOptions({ name: "UiCodeMirrorInput" });
+const props = defineProps({
+  class: { type: [Boolean, null, String, Object, Array], required: false, skipCheck: true },
+  defaultValue: { type: String, required: false },
+  modelValue: { type: String, required: false },
+  multiline: { type: Boolean, required: false },
+  placeholder: { type: String, required: false },
+  scopeLookup: { type: Map, required: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const host = useTemplateRef("host");
+let view = null;
+const lookupCompartment = new Compartment();
+const modeCompartment = new Compartment();
+let applyingExternal = false;
+const editorTheme = EditorView.theme({
+  "&": {
+    fontSize: "0.875rem",
+    color: "var(--color-zinc-700)",
+    backgroundColor: "transparent"
+  },
+  "&.cm-focused": {
+    outline: "none"
+  },
+  ".cm-content": {
+    fontFamily: "var(--font-mono)",
+    padding: "7px 0",
+    lineHeight: "1.5",
+    caretColor: "var(--color-zinc-700)"
+  },
+  ".cm-placeholder": {
+    color: "var(--color-zinc-200)"
+  },
+  ".cm-scroller": {
+    fontFamily: "var(--font-mono)",
+    lineHeight: "1.5"
+  },
+  ".cm-line": {
+    padding: "0"
+  }
+});
+function modeExtension(multiline) {
+  if (multiline) return EditorView.lineWrapping;
+  return EditorState.transactionFilter.of((tr) => {
+    if (!tr.docChanged) return tr;
+    let hasNewline = false;
+    tr.changes.iterChanges((_fromA, _toA, _fromB, _toB, inserted) => {
+      if (inserted.lines > 1) hasNewline = true;
+    });
+    return hasNewline ? [] : tr;
+  });
+}
+function makeState(doc) {
+  return EditorState.create({
+    doc,
+    extensions: [
+      history(),
+      keymap.of([...defaultKeymap, ...historyKeymap]),
+      cmPlaceholder(props.placeholder ?? ""),
+      lookupCompartment.of(scopeLookupFacet.of(props.scopeLookup)),
+      modeCompartment.of(modeExtension(!!props.multiline)),
+      editorTheme,
+      // CEL syntax colours sit *under* the chips: the chip plugin's
+      // `Decoration.replace` widgets hide the `__scopes__[...]` spans, so the
+      // marks here only show through on ordinary expression text.
+      celHighlighting(),
+      scopeChips(),
+      EditorView.contentAttributes.of({ "aria-label": props.placeholder ?? "Expression" }),
+      EditorView.updateListener.of((update) => {
+        if (!update.docChanged || applyingExternal) return;
+        emits("update:modelValue", update.state.doc.toString());
+      })
+    ]
+  });
+}
+onMounted(() => {
+  if (!host.value) return;
+  view = new EditorView({
+    state: makeState(props.modelValue ?? props.defaultValue ?? ""),
+    parent: host.value
+  });
+});
+onBeforeUnmount(() => {
+  view?.destroy();
+  view = null;
+});
+watch(() => props.modelValue, (next) => {
+  if (!view) return;
+  const incoming = next ?? "";
+  if (incoming === view.state.doc.toString()) return;
+  applyingExternal = true;
+  view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: incoming } });
+  applyingExternal = false;
+});
+watch(() => props.scopeLookup, (lookup) => {
+  view?.dispatch({ effects: lookupCompartment.reconfigure(scopeLookupFacet.of(lookup)) });
+});
+watch(() => props.multiline, (multiline) => {
+  view?.dispatch({ effects: modeCompartment.reconfigure(modeExtension(!!multiline)) });
+});
+function insertAtSelection(text) {
+  if (!view) return;
+  const { from, to } = view.state.selection.main;
+  view.dispatch({
+    changes: { from, to, insert: text },
+    selection: { anchor: from + text.length }
+  });
+  view.focus();
+}
+function focus() {
+  view?.focus();
+}
+defineExpose({ insertAtSelection, focus });
+</script>
+
+<template>
+  <div
+    ref="host"
+    data-slot="input-group-control"
+    :class="cn(
+  'flex-1 min-w-0 self-stretch overflow-x-auto px-3',
+  props.multiline ? '[&_.cm-content]:min-h-16' : '[&_.cm-scroller]:items-center',
+  props.class
+)"
+  />
+</template>

package/dist/runtime/components/ui/expression-editor/CodeMirrorInput.vue.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes } from 'vue';
+import type { ScopeInfo } from './scope-refs.js';
+type __VLS_Props = {
+    class?: HTMLAttributes['class'];
+    defaultValue?: string;
+    modelValue?: string;
+    multiline?: boolean;
+    placeholder?: string;
+    scopeLookup: Map<string, ScopeInfo>;
+};
+declare function insertAtSelection(text: string): void;
+declare function focus(): void;
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {
+    insertAtSelection: typeof insertAtSelection;
+    focus: typeof focus;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "update:modelValue": (payload: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((payload: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.d.vue.ts

@@ -13,11 +13,11 @@ type __VLS_Props = {
     resultType?: string | string[];
     extraVars?: Record<string, VarSpec>;
 };
-declare var __VLS_14: {}, __VLS_108: {};
+declare var __VLS_14: {}, __VLS_130: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_14) => any;
 } & {
-    trailing?: (props: typeof __VLS_108) => any;
+    trailing?: (props: typeof __VLS_130) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string) => any;

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.vue

@@ -1,11 +1,13 @@
 <script setup>
 import { Icon } from "@iconify/vue";
-import { computed, ref, useSlots, watch } from "vue";
-import { injectCELContext } from "../../../utils/cel-context";
+import { computed, ref, useSlots, useTemplateRef, watch } from "vue";
+import { injectCELContext, useScopeAncestry } from "../../../utils/cel-context";
 import { Markdown } from "../markdown";
-import { cn } from "../../../utils/cn";
+import CodeMirrorInput from "./CodeMirrorInput.vue";
+import { buildScopeLookup } from "./scope-refs";
+import { buildScopeEntries, buildVarEntries } from "./picker-entries";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "../command";
-import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupTextarea } from "../input-group";
+import { InputGroup, InputGroupAddon, InputGroupButton } from "../input-group";
 import { Popover, PopoverContent, PopoverTrigger } from "../popover";
 defineOptions({ name: "UiExpressionEditor" });
 const props = defineProps({
@@ -19,31 +21,31 @@ const props = defineProps({
 });
 const emits = defineEmits(["update:modelValue"]);
 const celContext = injectCELContext();
-const mergedEntries = computed(() => {
-  const out = Object.entries(celContext).map(
-    ([name, meta]) => ({ name, meta })
-  );
-  const seen = new Set(out.map((e) => e.name));
-  for (const [name, meta] of Object.entries(props.extraVars ?? {})) {
-    if (seen.has(name)) continue;
-    out.push({ name, meta });
-  }
-  return out;
-});
-const hasVars = computed(() => mergedEntries.value.length > 0);
+const scopeAncestry = useScopeAncestry();
+const varEntries = computed(() => buildVarEntries(celContext, props.extraVars));
+const scopeEntries = computed(() => buildScopeEntries(scopeAncestry.value.slice(1)));
+const scopeLookup = computed(() => buildScopeLookup(scopeAncestry.value));
+const hasVars = computed(() => varEntries.value.length > 0 || scopeEntries.value.length > 0);
 const open = ref(false);
 const entries = ref([]);
+const shownVars = computed(() => entries.value.filter((e) => e.group === "var"));
+const shownScopes = computed(() => entries.value.filter((e) => e.group === "scope"));
 const hoveredName = ref(null);
+const editorRef = useTemplateRef("editor");
+function insertVariable(text) {
+  editorRef.value?.insertAtSelection(text);
+  open.value = false;
+}
 watch(open, (v) => {
   if (v) {
-    entries.value = mergedEntries.value;
-    hoveredName.value = entries.value[0]?.name ?? null;
+    entries.value = [...varEntries.value, ...scopeEntries.value];
+    hoveredName.value = entries.value[0]?.id ?? null;
   }
 });
-const hoveredMeta = computed(
-  () => entries.value.find((e) => e.name === hoveredName.value)?.meta ?? null
+const hoveredEntry = computed(
+  () => entries.value.find((e) => e.id === hoveredName.value) ?? null
 );
-const hoveredDescription = computed(() => hoveredMeta.value?.description ?? "");
+const hoveredDescription = computed(() => hoveredEntry.value?.description ?? "");
 const resultTypeLabel = computed(() => {
   const rt = props.resultType;
   if (!rt) return null;
@@ -65,21 +67,15 @@ const addonAlign = computed(
     >
       <slot name="leading" />
     </InputGroupAddon>
-    <InputGroupTextarea
-      v-if="props.multiline"
+    <CodeMirrorInput
+      ref="editor"
       :model-value="props.modelValue"
       :default-value="props.defaultValue"
       :placeholder="props.placeholder"
-      :class="cn('font-mono text-xs', props.class)"
-      @update:model-value="(v) => emits('update:modelValue', String(v))"
-    />
-    <InputGroupInput
-      v-else
-      :model-value="props.modelValue"
-      :default-value="props.defaultValue"
-      :placeholder="props.placeholder"
-      :class="cn('font-mono text-xs', props.class)"
-      @update:model-value="(v) => emits('update:modelValue', String(v))"
+      :multiline="props.multiline"
+      :scope-lookup="scopeLookup"
+      :class="props.class"
+      @update:model-value="(v) => emits('update:modelValue', v)"
     />
     <InputGroupAddon
       v-if="showAddon"
@@ -109,34 +105,59 @@ const addonAlign = computed(
               <CommandEmpty>No variables.</CommandEmpty>
               <CommandGroup>
                 <CommandItem
-                  v-for="entry in entries"
-                  :key="entry.name"
-                  :value="entry.name"
-                  class="cursor-default gap-2"
-                  @mouseenter="hoveredName = entry.name"
-                  @focus="hoveredName = entry.name"
+                  v-for="entry in shownVars"
+                  :key="entry.id"
+                  :value="entry.display"
+                  class="cursor-pointer gap-2"
+                  @select="insertVariable(entry.insert)"
+                  @mouseenter="hoveredName = entry.id"
+                  @focus="hoveredName = entry.id"
                 >
-                  <span class="font-mono text-xs text-zinc-800">{{ entry.name }}</span>
-                  <span class="flex-1 truncate text-xs text-zinc-500">{{ entry.meta.label }}</span>
+                  <Icon
+                    icon="fluent:braces-variable-20-regular"
+                    class="size-3.5 shrink-0 text-zinc-400"
+                  />
+                  <span class="font-mono text-xs text-zinc-800">{{ entry.display }}</span>
+                  <span class="flex-1 truncate text-xs text-zinc-500">{{ entry.label }}</span>
                   <span class="rounded bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] leading-none text-purple-700 select-none">
-                    {{ entry.meta.type }}
+                    {{ entry.type }}
+                  </span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup
+                v-if="shownScopes.length > 0"
+                heading="跨层引用"
+              >
+                <CommandItem
+                  v-for="entry in shownScopes"
+                  :key="entry.id"
+                  :value="`${entry.display} ${entry.id}`"
+                  class="cursor-pointer gap-2"
+                  @select="insertVariable(entry.insert)"
+                  @mouseenter="hoveredName = entry.id"
+                  @focus="hoveredName = entry.id"
+                >
+                  <Icon
+                    icon="fluent:link-20-regular"
+                    class="size-3.5 shrink-0 text-zinc-400"
+                  />
+                  <span class="flex-1 truncate text-xs text-zinc-700">{{ entry.display }}</span>
+                  <span class="rounded bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] leading-none text-purple-700 select-none">
+                    {{ entry.type }}
                   </span>
                 </CommandItem>
               </CommandGroup>
             </CommandList>
             <div
-              v-if="hoveredMeta"
+              v-if="hoveredEntry"
               class="border-t border-zinc-200 px-3 py-2 group-data-[side=top]/popover:border-t-0 group-data-[side=top]/popover:border-b"
             >
-              <div class="mb-1 flex items-center gap-2">
-                <span class="font-mono text-xs text-zinc-800">{{ hoveredName }}</span>
-                <span class="rounded bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] leading-none text-purple-700 select-none">
-                  {{ hoveredMeta.type }}
+              <div class="flex items-center gap-2">
+                <span class="text-xs font-medium text-zinc-700">{{ hoveredEntry.label }}</span>
+                <span class="ml-auto shrink-0 rounded bg-purple-100 px-1.5 py-0.5 font-mono text-[10px] leading-none text-purple-700 select-none">
+                  {{ hoveredEntry.type }}
                 </span>
               </div>
-              <div class="text-xs font-medium text-zinc-700">
-                {{ hoveredMeta.label }}
-              </div>
               <Markdown
                 v-if="hoveredDescription"
                 :source="hoveredDescription"

package/dist/runtime/components/ui/expression-editor/ExpressionEditor.vue.d.ts

@@ -13,11 +13,11 @@ type __VLS_Props = {
     resultType?: string | string[];
     extraVars?: Record<string, VarSpec>;
 };
-declare var __VLS_14: {}, __VLS_108: {};
+declare var __VLS_14: {}, __VLS_130: {};
 type __VLS_Slots = {} & {
     leading?: (props: typeof __VLS_14) => any;
 } & {
-    trailing?: (props: typeof __VLS_108) => any;
+    trailing?: (props: typeof __VLS_130) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
     "update:modelValue": (payload: string) => any;

package/dist/runtime/components/ui/expression-editor/cel-language.d.ts

@@ -0,0 +1,16 @@
+import type { Extension } from '@codemirror/state';
+import { StreamLanguage } from '@codemirror/language';
+type State = {
+    afterDot: boolean;
+};
+/** The CEL stream language (tokeniser only — no indentation/folding services). */
+export declare const celLanguage: StreamLanguage<State>;
+/** One tokenised slice of a line: the source `text` and its stream-token name. */
+export type CELToken = {
+    text: string;
+    token: string | null;
+};
+export declare function tokenizeCEL(line: string): CELToken[];
+/** Full lexical-highlighting extension: the CEL language + its colour scheme. */
+export declare function celHighlighting(): Extension;
+export {};

package/dist/runtime/components/ui/expression-editor/cel-language.js

@@ -0,0 +1,114 @@
+import {
+  HighlightStyle,
+  StreamLanguage,
+  StringStream,
+  syntaxHighlighting
+} from "@codemirror/language";
+import { tags as t } from "@lezer/highlight";
+const ATOMS = /* @__PURE__ */ new Set(["true", "false", "null"]);
+const OPERATOR_RE = /^(?:==|!=|<=|>=|&&|\|\||[+\-*/%<>!?])/;
+const IDENT_RE = /^[A-Z_$][\w$]*/i;
+const NUMBER_RE = /^(?:0x[0-9a-f]+|\d+\.\d*(?:e[+-]?\d+)?|\d+(?:e[+-]?\d+)?)u?/i;
+function eatString(stream) {
+  const s = stream.string;
+  const start = stream.pos;
+  let i = start;
+  let prefixLen = 0;
+  while (prefixLen < 2 && /[br]/i.test(s[i + prefixLen] ?? "")) prefixLen++;
+  const quote = s[i + prefixLen];
+  if (quote !== '"' && quote !== "'") return false;
+  const raw = /r/i.test(s.slice(i, i + prefixLen));
+  i += prefixLen;
+  const triple = s.slice(i, i + 3) === quote + quote + quote;
+  const closer = triple ? quote + quote + quote : quote;
+  i += closer.length;
+  while (i < s.length) {
+    const c = s[i];
+    if (!raw && c === "\\") {
+      i += 2;
+      continue;
+    }
+    if (s.slice(i, i + closer.length) === closer) {
+      i += closer.length;
+      break;
+    }
+    if (!triple && (c === "\n" || c === "\r")) break;
+    i++;
+  }
+  stream.pos = Math.min(i, s.length);
+  return true;
+}
+const celStreamParser = {
+  startState: () => ({ afterDot: false }),
+  copyState: (state) => ({ afterDot: state.afterDot }),
+  token(stream, state) {
+    if (stream.eatSpace()) return null;
+    if (stream.match(/^\.\.\./)) {
+      state.afterDot = false;
+      return null;
+    }
+    if (eatString(stream)) {
+      state.afterDot = false;
+      return "string";
+    }
+    if (stream.match(NUMBER_RE)) {
+      state.afterDot = false;
+      return "number";
+    }
+    const ident = stream.match(IDENT_RE);
+    if (ident) {
+      const word = ident[0];
+      const afterDot = state.afterDot;
+      state.afterDot = false;
+      if (afterDot) return "propertyName";
+      if (word === "in") return "keyword";
+      if (ATOMS.has(word)) return "atom";
+      return stream.peek() === "(" ? "variableName.function" : "variableName";
+    }
+    if (stream.match(OPERATOR_RE)) {
+      state.afterDot = false;
+      return "operator";
+    }
+    if (stream.eat(".")) {
+      state.afterDot = true;
+      return null;
+    }
+    state.afterDot = false;
+    stream.next();
+    return null;
+  }
+};
+export const celLanguage = StreamLanguage.define(celStreamParser);
+export function tokenizeCEL(line) {
+  const stream = new StringStream(line, 4, 2);
+  const state = celStreamParser.startState();
+  const out = [];
+  while (!stream.eol()) {
+    stream.start = stream.pos;
+    const token = celStreamParser.token(stream, state);
+    if (stream.pos === stream.start) stream.next();
+    out.push({ text: line.slice(stream.start, stream.pos), token });
+  }
+  return out;
+}
+const celHighlightStyle = HighlightStyle.define([
+  { tag: t.keyword, color: "#5a3e8e" },
+  // magenta — control keyword `in`
+  { tag: t.operator, color: "#5a3e8e" },
+  // magenta — && || == + - …
+  { tag: t.string, color: "#385f0d" },
+  // green — strings / bytes
+  { tag: t.number, color: "#965027" },
+  // orange — numbers
+  { tag: t.atom, color: "#965027" },
+  // orange — true / false / null
+  { tag: t.variableName, color: "#343b58" },
+  // navy — variables
+  { tag: t.propertyName, color: "#0f4b6e" },
+  // cyan — object properties / member access
+  { tag: t.function(t.variableName), color: "#2959aa" }
+  // blue — function calls
+]);
+export function celHighlighting() {
+  return [celLanguage, syntaxHighlighting(celHighlightStyle)];
+}

package/dist/runtime/components/ui/expression-editor/chip-extension.d.ts

@@ -0,0 +1,5 @@
+import { type Extension, Facet } from '@codemirror/state';
+import { type ScopeInfo } from './scope-refs.js';
+export declare const scopeLookupFacet: Facet<Map<string, ScopeInfo>, Map<string, ScopeInfo>>;
+/** The full inline-chip extension: decoration plugin + theme. */
+export declare function scopeChips(): Extension;

package/dist/runtime/components/ui/expression-editor/chip-extension.js

@@ -0,0 +1,123 @@
+import { Facet, RangeSetBuilder } from "@codemirror/state";
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  WidgetType
+} from "@codemirror/view";
+import { scanScopeRefs } from "./scope-refs.js";
+export const scopeLookupFacet = Facet.define({
+  combine: (values) => values.length > 0 ? values[values.length - 1] : /* @__PURE__ */ new Map()
+});
+class ScopeChipWidget extends WidgetType {
+  constructor(id, member, resolved) {
+    super();
+    this.id = id;
+    this.member = member;
+    this.resolved = resolved;
+  }
+  eq(other) {
+    return other.id === this.id && other.member === this.member && other.resolved?.origin === this.resolved?.origin && other.resolved?.label === this.resolved?.label && other.resolved?.type === this.resolved?.type;
+  }
+  toDOM() {
+    const chip = document.createElement("span");
+    chip.className = "cm-scope-chip";
+    chip.setAttribute("data-scope-id", this.id);
+    chip.setAttribute("data-scope-member", this.member);
+    const text = document.createElement("span");
+    text.className = "cm-scope-chip-label";
+    if (this.resolved) {
+      text.textContent = `${this.resolved.origin} \u203A ${this.resolved.label}`;
+      chip.title = this.resolved.origin;
+    } else {
+      chip.classList.add("cm-scope-chip-dangling");
+      const short = this.id.length > 8 ? `${this.id.slice(0, 8)}\u2026` : this.id;
+      text.textContent = `${short} \u203A ${this.member}`;
+      chip.title = `\u672A\u77E5\u4F5C\u7528\u57DF ${this.id}`;
+    }
+    chip.appendChild(text);
+    const type = this.resolved?.type;
+    if (type) {
+      const badge = document.createElement("span");
+      badge.className = "cm-scope-chip-type";
+      badge.textContent = type;
+      chip.appendChild(badge);
+    }
+    return chip;
+  }
+  ignoreEvent() {
+    return false;
+  }
+}
+function buildChips(view) {
+  const lookup = view.state.facet(scopeLookupFacet);
+  const builder = new RangeSetBuilder();
+  for (const ref of scanScopeRefs(view.state.doc.toString())) {
+    const info = lookup.get(ref.id);
+    const member = info?.members.get(ref.member);
+    const resolved = info && member ? { origin: info.origin, label: member.label, type: member.type } : null;
+    builder.add(
+      ref.from,
+      ref.to,
+      Decoration.replace({ widget: new ScopeChipWidget(ref.id, ref.member, resolved) })
+    );
+  }
+  return builder.finish();
+}
+const chipPlugin = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = buildChips(view);
+    }
+    update(update) {
+      if (update.docChanged || update.viewportChanged || update.startState.facet(scopeLookupFacet) !== update.state.facet(scopeLookupFacet)) {
+        this.decorations = buildChips(update.view);
+      }
+    }
+  },
+  {
+    decorations: (plugin) => plugin.decorations,
+    // Atomic ranges so the caret steps over a chip and Backspace removes the
+    // whole `__scopes__[...].member` at once — the user's delete-as-unit choice.
+    provide: (plugin) => EditorView.atomicRanges.of((view) => view.plugin(plugin)?.decorations ?? Decoration.none)
+  }
+);
+const chipTheme = EditorView.theme({
+  ".cm-scope-chip": {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "0.25rem",
+    margin: "0 1px",
+    padding: "0.125rem 0.25rem",
+    borderRadius: "0.25rem",
+    background: "#f4f4f5",
+    border: "1px solid #e4e4e7",
+    color: "#3f3f46",
+    fontFamily: "ui-sans-serif, system-ui, sans-serif",
+    verticalAlign: "baseline",
+    cursor: "default",
+    whiteSpace: "nowrap"
+  },
+  ".cm-scope-chip-dangling": {
+    background: "#fef2f2",
+    borderColor: "#fecaca",
+    color: "#b91c1c"
+  },
+  ".cm-scope-chip-label": {
+    fontSize: "0.75rem",
+    lineHeight: "1.1"
+  },
+  ".cm-scope-chip-type": {
+    borderRadius: "0.25rem",
+    background: "#f3e8ff",
+    padding: "0.05rem 0.25rem",
+    fontFamily: "var(--font-mono)",
+    fontSize: "10px",
+    lineHeight: "1",
+    color: "#7e22ce"
+  }
+});
+export function scopeChips() {
+  return [chipPlugin, chipTheme];
+}

package/dist/runtime/components/ui/expression-editor/picker-entries.d.ts

@@ -0,0 +1,17 @@
+import { type ScopeAncestor } from '../../../utils/cel-context.js';
+export type PickEntry = {
+    id: string;
+    group: 'var' | 'scope';
+    insert: string;
+    display: string;
+    label: string;
+    type: string;
+    description?: string;
+};
+export type PickVarMeta = {
+    type: string;
+    label: string;
+    description?: string;
+};
+export declare function buildVarEntries(celContext: Record<string, PickVarMeta>, extraVars?: Record<string, PickVarMeta>): PickEntry[];
+export declare function buildScopeEntries(ancestry: ReadonlyArray<ScopeAncestor>): PickEntry[];

package/dist/runtime/components/ui/expression-editor/picker-entries.js

@@ -0,0 +1,34 @@
+import { SCOPE_ADDRESS_VAR } from "../../../utils/cel-context.js";
+import { scopeOrigin } from "./scope-refs.js";
+export function buildVarEntries(celContext, extraVars) {
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const [name, meta] of Object.entries(celContext)) {
+    if (name === SCOPE_ADDRESS_VAR) continue;
+    seen.add(name);
+    out.push({ id: name, group: "var", insert: name, display: name, label: meta.label, type: meta.type, description: meta.description });
+  }
+  for (const [name, meta] of Object.entries(extraVars ?? {})) {
+    if (seen.has(name) || name === SCOPE_ADDRESS_VAR) continue;
+    out.push({ id: name, group: "var", insert: name, display: name, label: meta.label, type: meta.type, description: meta.description });
+  }
+  return out;
+}
+export function buildScopeEntries(ancestry) {
+  const out = [];
+  for (const ancestor of ancestry) {
+    const origin = scopeOrigin(ancestor);
+    for (const member of ancestor.members) {
+      out.push({
+        id: `scope:${ancestor.id}:${member.key}`,
+        group: "scope",
+        insert: `${SCOPE_ADDRESS_VAR}[${JSON.stringify(ancestor.id)}].${member.key}`,
+        display: `${origin} \u203A ${member.label}`,
+        label: origin,
+        type: member.type,
+        description: member.description
+      });
+    }
+  }
+  return out;
+}