From e1efa3c823ca582b902428f695ba79403cb37848 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julien.calixte@theodo.com>
Date: Sat, 20 Jun 2026 10:08:30 +0200
Subject: [PATCH] feat(editor): gloss the selected element in a panel

---
 src/components/Editor.vue     |  2 ++
 src/components/GlossPanel.vue | 45 +++++++++++++++++++++++++++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 src/components/GlossPanel.vue

diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 2f32f37..ae1b20e 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -33,6 +33,7 @@ import { type Sample, SAMPLES } from "@/model/samples"
 import { canConnect } from "@/model/validation"
 import { useModelStore } from "@/store/model"
 import { NODE_DND_MIME, type PlaceableKind } from "./palette-dnd"
+import GlossPanel from "./GlossPanel.vue"
 import LoopOverlay from "./LoopOverlay.vue"
 import Palette from "./Palette.vue"
 import InfoLinkEdge from "./edges/InfoLinkEdge.vue"
@@ -363,6 +364,7 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown))
       </VueFlow>
 
       <LoopOverlay />
+      <GlossPanel />
     </div>
   </div>
 </template>
diff --git a/src/components/GlossPanel.vue b/src/components/GlossPanel.vue
new file mode 100644
index 0000000..8373dfa
--- /dev/null
+++ b/src/components/GlossPanel.vue
@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * Gloss-on-selection (F11, G4) — when exactly one element is selected, name it
+ * and define it in a small corner card. Selection is deliberate and singular, so
+ * the canvas stays pixel-clean and silent until you ask — no passive hover noise
+ * on a dense model. Self-contained: reads selection straight from the shared Vue
+ * Flow instance, so it drops into the Editor as one tag.
+ *
+ * A pipe edge stands in for its Flow node, so selecting one glosses the Flow; an
+ * info edge glosses the Information Link. Anything else (nothing, or a multi-
+ * selection) hides the card.
+ */
+import { useVueFlow } from "@vue-flow/core"
+import { computed } from "vue"
+import { type GlossEntry, INFO_LINK_GLOSS, NODE_GLOSSARY } from "@/model/glossary"
+import type { EdgeData, NodeData } from "@/model/projection"
+
+const { getSelectedNodes, getSelectedEdges } = useVueFlow("meadows")
+
+const gloss = computed<GlossEntry | null>(() => {
+  const nodes = getSelectedNodes.value
+  const edges = getSelectedEdges.value
+
+  if (nodes.length === 1 && edges.length === 0) {
+    const node = (nodes[0].data as NodeData | undefined)?.node
+    return node ? NODE_GLOSSARY[node.kind] : null
+  }
+  if (edges.length === 1 && nodes.length === 0) {
+    const kind = (edges[0].data as EdgeData | undefined)?.kind
+    if (kind === "info") return INFO_LINK_GLOSS
+    if (kind === "pipe") return NODE_GLOSSARY.flow
+  }
+  return null
+})
+</script>
+
+<template>
+  <div
+    v-if="gloss"
+    class="pointer-events-none absolute right-3 bottom-3 z-10 max-w-xs rounded-box border border-base-300 bg-base-100/90 p-3 shadow-md backdrop-blur"
+  >
+    <div class="text-sm font-semibold">{{ gloss.term }}</div>
+    <p class="mt-0.5 text-xs leading-snug text-base-content/70">{{ gloss.short }}</p>
+  </div>
+</template>