@devosurf/vynt 0.1.2

package/web/vynt-toolbar.js

@@ -0,0 +1,1075 @@
+(() => {
+  if (window.__vyntToolbarMounted) return;
+  window.__vyntToolbarMounted = true;
+
+  const currentScript = document.currentScript;
+  const scriptSrc = currentScript && currentScript.src ? currentScript.src : "";
+  const scriptUrl = scriptSrc ? new URL(scriptSrc) : null;
+  const configuredBase =
+    (currentScript && currentScript.getAttribute("data-vynt-bridge")) ||
+    (scriptUrl ? scriptUrl.origin : "http://127.0.0.1:4173");
+  const baseUrl = configuredBase.replace(/\/+$/, "");
+
+  const STORAGE_KEY = "vynt-toolbar-position-v2";
+  const DRAG_THRESHOLD = 3;
+  const VIEWPORT_PADDING = 24;
+  const OBJECTIVE_OVERLAY_PADDING = 6;
+
+  const state = {
+    busy: false,
+    collapsed: false,
+    initialized: false,
+    options: [],
+    optionsByObjective: {},
+    selectedKeyByObjective: {},
+    selectedKey: null,
+    hoveredObjectiveId: null,
+    hoveredObjectiveElement: null,
+    statusText: "Connecting...",
+    position: null,
+  };
+
+  let eventSource = null;
+  let dragStart = null;
+  let isDragging = false;
+
+  const icons = {
+    grip: `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.5 5V6.5H4V5H5.5ZM5.5 7.5V9H4V7.5H5.5ZM5.5 10V11.5H4V10H5.5ZM12 5V6.5H10.5V5H12ZM12 7.5V9H10.5V7.5H12ZM12 10V11.5H10.5V10H12Z" fill="currentColor"/></svg>`,
+    prev: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>`,
+    next: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>`,
+    apply: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
+    collapse: `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>`,
+    vynt: `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>`
+  };
+
+  const css = `
+[data-vynt-toolbar] {
+  box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --vynt-bg: rgba(0, 0, 0, 0.65);
+  --vynt-border: rgba(255, 255, 255, 0.12);
+  --vynt-text: #ededed;
+  --vynt-text-dim: #a1a1a1;
+  --vynt-hover: rgba(255, 255, 255, 0.1);
+  --vynt-active: rgba(255, 255, 255, 0.15);
+  --vynt-radius: 12px;
+  --vynt-shadow: 0 0 0 1px var(--vynt-border), 0 8px 30px rgba(0, 0, 0, 0.24);
+  --vynt-height: 48px;
+}
+
+@media (prefers-color-scheme: light) {
+  [data-vynt-toolbar] {
+    --vynt-bg: rgba(255, 255, 255, 0.85);
+    --vynt-border: rgba(0, 0, 0, 0.1);
+    --vynt-text: #171717;
+    --vynt-text-dim: #666666;
+    --vynt-hover: rgba(0, 0, 0, 0.05);
+    --vynt-active: rgba(0, 0, 0, 0.08);
+    --vynt-shadow: 0 0 0 1px var(--vynt-border), 0 8px 30px rgba(0, 0, 0, 0.12);
+  }
+}
+
+#vynt-toolbar-root {
+  position: fixed;
+  z-index: 2147483647;
+  right: 24px;
+  bottom: 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  touch-action: none;
+}
+
+.vynt-shell {
+  height: var(--vynt-height);
+  border-radius: var(--vynt-radius);
+  background: var(--vynt-bg);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  box-shadow: var(--vynt-shadow);
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  pointer-events: auto;
+  user-select: none;
+  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.3s ease;
+  overflow: hidden;
+  will-change: transform;
+}
+
+.vynt-shell.vynt-dragging {
+  transform: scale(1.02);
+  transition: transform 0.1s ease;
+  cursor: grabbing !important;
+}
+
+.vynt-shell.vynt-collapsed {
+  width: var(--vynt-height);
+  padding: 0;
+  justify-content: center;
+}
+
+.vynt-shell.vynt-empty {
+  width: var(--vynt-height);
+  padding: 0;
+  justify-content: center;
+}
+
+.vynt-drag-handle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  color: var(--vynt-text-dim);
+  cursor: grab;
+  flex-shrink: 0;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.vynt-drag-handle:hover {
+  background: var(--vynt-hover);
+  color: var(--vynt-text);
+}
+
+.vynt-drag-handle:active {
+  cursor: grabbing;
+}
+
+.vynt-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--vynt-border);
+  margin: 0 4px;
+}
+
+.vynt-controls {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  opacity: 1;
+  transition: opacity 0.2s ease;
+  white-space: nowrap;
+}
+
+.vynt-shell.vynt-collapsed .vynt-controls,
+.vynt-shell.vynt-collapsed .vynt-drag-handle,
+.vynt-shell.vynt-collapsed .vynt-divider {
+  display: none;
+}
+
+.vynt-shell.vynt-empty .vynt-controls,
+.vynt-shell.vynt-empty .vynt-drag-handle,
+.vynt-shell.vynt-empty .vynt-divider {
+  display: none;
+}
+
+.vynt-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--vynt-text);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  flex-shrink: 0;
+  padding: 0;
+}
+
+.vynt-btn:hover:not(:disabled) {
+  background: var(--vynt-hover);
+}
+
+.vynt-btn:active:not(:disabled) {
+  background: var(--vynt-active);
+  transform: scale(0.96);
+}
+
+.vynt-btn:disabled, .vynt-select-wrapper.vynt-disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.vynt-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 6px;
+  background: transparent;
+  transition: background 0.15s ease;
+  padding: 0 4px;
+}
+
+.vynt-select-wrapper:hover:not(.vynt-disabled) {
+  background: var(--vynt-hover);
+}
+
+.vynt-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--vynt-text);
+  font-family: inherit;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 0 24px 0 8px;
+  height: 100%;
+  width: 100%;
+  cursor: pointer;
+  outline: none;
+  text-overflow: ellipsis;
+  max-width: 180px;
+}
+
+.vynt-select option {
+  color: #171717;
+  background: #fff;
+}
+
+.vynt-select-icon {
+  position: absolute;
+  right: 8px;
+  pointer-events: none;
+  color: var(--vynt-text-dim);
+  display: flex;
+}
+
+.vynt-status {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--vynt-text-dim);
+  letter-spacing: 0.2px;
+  text-transform: uppercase;
+  background: var(--vynt-bg);
+  padding: 4px 10px;
+  border-radius: 999px;
+  box-shadow: var(--vynt-shadow);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  opacity: 0;
+  transform: translateY(4px);
+  transition: opacity 0.3s ease, transform 0.3s ease;
+  pointer-events: none;
+}
+
+.vynt-status.vynt-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.vynt-logo-btn {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  border: none;
+  background: transparent;
+  color: var(--vynt-text);
+  cursor: pointer;
+  border-radius: var(--vynt-radius);
+  padding: 0;
+}
+
+.vynt-shell.vynt-collapsed .vynt-logo-btn {
+  display: flex;
+}
+
+.vynt-shell.vynt-empty .vynt-logo-btn {
+  display: flex;
+}
+
+#vynt-objective-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 0;
+  z-index: 2147483646;
+  pointer-events: none;
+  display: none;
+}
+
+.vynt-objective-frame {
+  position: absolute;
+  inset: 0;
+  border-radius: 12px;
+  border: 2px solid rgba(34, 211, 238, 0.85);
+  box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.3), 0 10px 30px rgba(8, 145, 178, 0.2);
+  background: rgba(34, 211, 238, 0.08);
+}
+
+.vynt-objective-panel {
+  position: absolute;
+  left: 50%;
+  bottom: -50px;
+  transform: translateX(-50%);
+  height: 40px;
+  border-radius: 999px;
+  background: var(--vynt-bg);
+  box-shadow: var(--vynt-shadow);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px;
+  pointer-events: auto;
+}
+
+.vynt-objective-panel .vynt-btn {
+  width: 30px;
+  height: 30px;
+}
+
+.vynt-objective-select-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 30px;
+  border-radius: 999px;
+  padding: 0 4px;
+}
+
+.vynt-objective-select {
+  appearance: none;
+  -webkit-appearance: none;
+  background: transparent;
+  border: none;
+  color: var(--vynt-text);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 0 20px 0 8px;
+  height: 100%;
+  max-width: 220px;
+  cursor: pointer;
+  outline: none;
+}
+
+.vynt-objective-label {
+  position: absolute;
+  top: -20px;
+  left: 8px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.3px;
+  color: rgba(255, 255, 255, 0.9);
+  text-transform: uppercase;
+}
+`;
+
+  const style = document.createElement("style");
+  style.setAttribute("data-vynt-toolbar", "style");
+  style.textContent = css;
+  document.head.appendChild(style);
+
+  const root = document.createElement("div");
+  root.id = "vynt-toolbar-root";
+  root.setAttribute("data-vynt-toolbar", "root");
+
+  const shell = document.createElement("div");
+  shell.className = "vynt-shell";
+
+  const dragHandle = document.createElement("div");
+  dragHandle.className = "vynt-drag-handle";
+  dragHandle.innerHTML = icons.grip;
+
+  const divider1 = document.createElement("div");
+  divider1.className = "vynt-divider";
+
+  const controls = document.createElement("div");
+  controls.className = "vynt-controls";
+
+  const prevBtn = document.createElement("button");
+  prevBtn.className = "vynt-btn";
+  prevBtn.innerHTML = icons.prev;
+  prevBtn.title = "Previous variant";
+
+  const selectWrapper = document.createElement("div");
+  selectWrapper.className = "vynt-select-wrapper";
+
+  const variantSelect = document.createElement("select");
+  variantSelect.className = "vynt-select";
+  variantSelect.setAttribute("data-vynt-toolbar", "variant");
+
+  const selectIcon = document.createElement("div");
+  selectIcon.className = "vynt-select-icon";
+  selectIcon.innerHTML = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>`;
+
+  selectWrapper.appendChild(variantSelect);
+  selectWrapper.appendChild(selectIcon);
+
+  const nextBtn = document.createElement("button");
+  nextBtn.className = "vynt-btn";
+  nextBtn.innerHTML = icons.next;
+  nextBtn.title = "Next variant";
+
+  const applyBtn = document.createElement("button");
+  applyBtn.className = "vynt-btn";
+  applyBtn.innerHTML = icons.apply;
+  applyBtn.title = "Finalize selected variant";
+
+  const divider2 = document.createElement("div");
+  divider2.className = "vynt-divider";
+
+  const collapseBtn = document.createElement("button");
+  collapseBtn.className = "vynt-btn";
+  collapseBtn.innerHTML = icons.collapse;
+  collapseBtn.title = "Hide toolbar";
+
+  const logoBtn = document.createElement("button");
+  logoBtn.className = "vynt-logo-btn";
+  logoBtn.innerHTML = icons.vynt;
+  logoBtn.title = "Show toolbar";
+
+  const statusNode = document.createElement("div");
+  statusNode.className = "vynt-status";
+  statusNode.textContent = state.statusText;
+
+  controls.appendChild(prevBtn);
+  controls.appendChild(selectWrapper);
+  controls.appendChild(nextBtn);
+  controls.appendChild(applyBtn);
+  controls.appendChild(divider2);
+  controls.appendChild(collapseBtn);
+
+  shell.appendChild(dragHandle);
+  shell.appendChild(divider1);
+  shell.appendChild(controls);
+  shell.appendChild(logoBtn);
+  
+  root.appendChild(shell);
+  root.appendChild(statusNode);
+  document.body.appendChild(root);
+
+  const objectiveOverlayRoot = document.createElement("div");
+  objectiveOverlayRoot.id = "vynt-objective-overlay";
+  objectiveOverlayRoot.setAttribute("data-vynt-toolbar-objective", "root");
+
+  const objectiveFrame = document.createElement("div");
+  objectiveFrame.className = "vynt-objective-frame";
+
+  const objectivePanel = document.createElement("div");
+  objectivePanel.className = "vynt-objective-panel";
+
+  const objectiveLabel = document.createElement("div");
+  objectiveLabel.className = "vynt-objective-label";
+
+  const objectivePrevBtn = document.createElement("button");
+  objectivePrevBtn.className = "vynt-btn";
+  objectivePrevBtn.innerHTML = icons.prev;
+  objectivePrevBtn.title = "Previous objective variant";
+
+  const objectiveSelectWrapper = document.createElement("div");
+  objectiveSelectWrapper.className = "vynt-objective-select-wrapper";
+
+  const objectiveSelect = document.createElement("select");
+  objectiveSelect.className = "vynt-objective-select";
+
+  const objectiveNextBtn = document.createElement("button");
+  objectiveNextBtn.className = "vynt-btn";
+  objectiveNextBtn.innerHTML = icons.next;
+  objectiveNextBtn.title = "Next objective variant";
+
+  objectiveSelectWrapper.appendChild(objectiveSelect);
+  objectivePanel.appendChild(objectivePrevBtn);
+  objectivePanel.appendChild(objectiveSelectWrapper);
+  objectivePanel.appendChild(objectiveNextBtn);
+  objectiveOverlayRoot.appendChild(objectiveFrame);
+  objectiveOverlayRoot.appendChild(objectivePanel);
+  objectiveOverlayRoot.appendChild(objectiveLabel);
+  document.body.appendChild(objectiveOverlayRoot);
+
+  let statusTimeout = null;
+  function setStatus(text, duration = 3000) {
+    state.statusText = text;
+    statusNode.textContent = text;
+    
+    if (text) {
+      statusNode.classList.add("vynt-show");
+      clearTimeout(statusTimeout);
+      if (duration > 0) {
+        statusTimeout = setTimeout(() => {
+          statusNode.classList.remove("vynt-show");
+        }, duration);
+      }
+    } else {
+      statusNode.classList.remove("vynt-show");
+    }
+  }
+
+  function setBusy(nextBusy) {
+    state.busy = nextBusy;
+    render();
+  }
+
+  function getSelectedIndex() {
+    return state.options.findIndex((item) => item.key === state.selectedKey);
+  }
+
+  function parseSelectionKey(key) {
+    if (!key) return null;
+    const [objectiveId, variantId] = String(key).split("::");
+    if (!objectiveId || !variantId) return null;
+    return { objectiveId, variantId };
+  }
+
+  function getObjectiveOptions(objectiveId) {
+    return state.optionsByObjective[objectiveId] || [];
+  }
+
+  function getObjectiveSelectedKey(objectiveId) {
+    const options = getObjectiveOptions(objectiveId);
+    if (options.length === 0) return null;
+    const selected = state.selectedKeyByObjective[objectiveId];
+    if (selected && options.some((option) => option.key === selected)) {
+      return selected;
+    }
+    return options[0].key;
+  }
+
+  function getObjectiveSelectedIndex(objectiveId) {
+    const selectedKey = getObjectiveSelectedKey(objectiveId);
+    const options = getObjectiveOptions(objectiveId);
+    if (!selectedKey) return -1;
+    return options.findIndex((item) => item.key === selectedKey);
+  }
+
+  function hideObjectiveOverlay() {
+    state.hoveredObjectiveId = null;
+    state.hoveredObjectiveElement = null;
+    objectiveOverlayRoot.style.display = "none";
+  }
+
+  function refreshObjectiveOverlayPosition() {
+    const objectiveId = state.hoveredObjectiveId;
+    const objectiveElement = state.hoveredObjectiveElement;
+    if (!objectiveId || !objectiveElement || !objectiveElement.isConnected) {
+      hideObjectiveOverlay();
+      return;
+    }
+
+    const rect = objectiveElement.getBoundingClientRect();
+    if (rect.width < 2 || rect.height < 2) {
+      hideObjectiveOverlay();
+      return;
+    }
+
+    const x = Math.max(0, rect.left - OBJECTIVE_OVERLAY_PADDING);
+    const y = Math.max(0, rect.top - OBJECTIVE_OVERLAY_PADDING);
+    const width = Math.min(window.innerWidth - x, rect.width + OBJECTIVE_OVERLAY_PADDING * 2);
+    const height = Math.min(window.innerHeight - y, rect.height + OBJECTIVE_OVERLAY_PADDING * 2);
+
+    objectiveOverlayRoot.style.display = "block";
+    objectiveOverlayRoot.style.left = `${x}px`;
+    objectiveOverlayRoot.style.top = `${y}px`;
+    objectiveOverlayRoot.style.width = `${Math.max(0, width)}px`;
+    objectiveOverlayRoot.style.height = `${Math.max(0, height)}px`;
+
+    const panelBottom = -50;
+    if (y + height + panelBottom + 48 > window.innerHeight) {
+      objectivePanel.style.bottom = "auto";
+      objectivePanel.style.top = "-50px";
+    } else {
+      objectivePanel.style.top = "auto";
+      objectivePanel.style.bottom = "-50px";
+    }
+  }
+
+  function renderObjectiveOverlay() {
+    const objectiveId = state.hoveredObjectiveId;
+    if (!objectiveId) {
+      objectiveOverlayRoot.style.display = "none";
+      return;
+    }
+
+    const options = getObjectiveOptions(objectiveId);
+    if (options.length === 0 || !state.initialized) {
+      objectiveOverlayRoot.style.display = "none";
+      return;
+    }
+
+    const selectedKey = getObjectiveSelectedKey(objectiveId);
+    state.selectedKeyByObjective[objectiveId] = selectedKey;
+
+    objectiveLabel.textContent = objectiveId;
+    objectiveSelect.innerHTML = "";
+    for (const optionData of options) {
+      const option = document.createElement("option");
+      option.value = optionData.key;
+      option.textContent = optionData.label;
+      objectiveSelect.appendChild(option);
+    }
+    objectiveSelect.value = selectedKey;
+
+    const selectedIndex = getObjectiveSelectedIndex(objectiveId);
+    const disabled = state.busy || !state.initialized || options.length === 0;
+    objectivePrevBtn.disabled = disabled || selectedIndex <= 0;
+    objectiveNextBtn.disabled = disabled || selectedIndex >= options.length - 1;
+    objectiveSelect.disabled = disabled;
+
+    refreshObjectiveOverlayPosition();
+  }
+
+  function handleDocumentHover(event) {
+    if (dragStart || isDragging) return;
+    const target = event.target;
+    if (!(target instanceof Element)) return;
+    if (target.closest("#vynt-toolbar-root")) return;
+    if (target.closest("#vynt-objective-overlay")) return;
+
+    const candidate = target.closest("[data-vynt-objective]");
+    if (!candidate) {
+      hideObjectiveOverlay();
+      return;
+    }
+
+    const objectiveIdRaw = candidate.getAttribute("data-vynt-objective");
+    const objectiveId = objectiveIdRaw ? objectiveIdRaw.trim() : "";
+    if (!objectiveId) {
+      hideObjectiveOverlay();
+      return;
+    }
+
+    state.hoveredObjectiveId = objectiveId;
+    state.hoveredObjectiveElement = candidate;
+    renderObjectiveOverlay();
+  }
+
+  function constrainPosition(position) {
+    const rect = shell.getBoundingClientRect();
+    const width = rect.width || 300;
+    const height = rect.height || 48;
+    const maxX = window.innerWidth - width - VIEWPORT_PADDING;
+    const maxY = window.innerHeight - height - VIEWPORT_PADDING;
+    return {
+      x: Math.max(VIEWPORT_PADDING, Math.min(maxX, position.x)),
+      y: Math.max(VIEWPORT_PADDING, Math.min(maxY, position.y)),
+    };
+  }
+
+  function updateRootPosition() {
+    if (!state.position) {
+      root.style.removeProperty("left");
+      root.style.removeProperty("top");
+      root.style.right = "24px";
+      root.style.bottom = "24px";
+      return;
+    }
+    const next = constrainPosition(state.position);
+    state.position = next;
+    root.style.left = `${next.x}px`;
+    root.style.top = `${next.y}px`;
+    root.style.right = "auto";
+    root.style.bottom = "auto";
+  }
+
+  function persistPosition() {
+    if (!state.position) return;
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(state.position));
+    } catch {}
+  }
+
+  function loadPosition() {
+    try {
+      const raw = localStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const parsed = JSON.parse(raw);
+      if (typeof parsed?.x === "number" && typeof parsed?.y === "number") {
+        state.position = parsed;
+      }
+    } catch {}
+  }
+
+  function syncSelectionFromState(payload) {
+    const objectives = (payload && payload.state && payload.state.objectives) || [];
+    const options = [];
+    const optionsByObjective = {};
+    const selectedByObjective = {};
+    let activeKey = null;
+
+    for (const objective of objectives) {
+      const objectiveOptions = [];
+      const variants = Array.isArray(objective.variants) ? objective.variants : [];
+      for (const variant of variants) {
+        const key = `${objective.id}::${variant.id}`;
+        const option = {
+          key,
+          label: variant.name,
+          objectiveId: objective.id,
+          variantId: variant.id,
+        };
+        options.push({ ...option, label: `${objective.id} / ${variant.name}` });
+        objectiveOptions.push(option);
+        if (objective.activeVariantId && objective.activeVariantId === variant.id) {
+          activeKey = key;
+          selectedByObjective[objective.id] = key;
+        }
+      }
+      optionsByObjective[objective.id] = objectiveOptions;
+      if (!selectedByObjective[objective.id] && objectiveOptions.length > 0) {
+        selectedByObjective[objective.id] = objectiveOptions[0].key;
+      }
+    }
+
+    state.options = options;
+    state.optionsByObjective = optionsByObjective;
+    state.selectedKeyByObjective = selectedByObjective;
+    const hasCurrent = options.some((option) => option.key === state.selectedKey);
+    if (!hasCurrent) {
+      state.selectedKey = activeKey || (options[0] && options[0].key) || null;
+    }
+  }
+
+  function render() {
+    updateRootPosition();
+    const hasOptions = state.options.length > 0;
+
+    shell.classList.toggle("vynt-collapsed", state.collapsed);
+    shell.classList.toggle("vynt-empty", !hasOptions);
+    shell.classList.toggle("vynt-dragging", isDragging);
+
+    variantSelect.innerHTML = "";
+    if (state.options.length === 0) {
+      const option = document.createElement("option");
+      option.value = "";
+      option.textContent = "No variants";
+      variantSelect.appendChild(option);
+    } else {
+      for (const optionData of state.options) {
+        const option = document.createElement("option");
+        option.value = optionData.key;
+        option.textContent = optionData.label;
+        variantSelect.appendChild(option);
+      }
+    }
+    
+    if (state.selectedKey) {
+      variantSelect.value = state.selectedKey;
+    }
+
+    const index = getSelectedIndex();
+    const disabled = state.busy || !state.initialized || !hasOptions;
+    
+    prevBtn.disabled = disabled || index <= 0;
+    nextBtn.disabled = disabled || index >= state.options.length - 1;
+    applyBtn.disabled = disabled;
+    variantSelect.disabled = disabled;
+    
+    if (disabled) {
+      selectWrapper.classList.add("vynt-disabled");
+    } else {
+      selectWrapper.classList.remove("vynt-disabled");
+    }
+
+    renderObjectiveOverlay();
+  }
+
+  async function api(path, init) {
+    const response = await fetch(`${baseUrl}${path}`, {
+      headers: {
+        "Content-Type": "application/json",
+      },
+      ...init,
+    });
+
+    const payload = await response.json().catch(() => ({}));
+    if (!response.ok) {
+      throw new Error(payload.error || `HTTP ${response.status}`);
+    }
+    return payload;
+  }
+
+  async function refreshStatus(label, duration) {
+    if (label) setStatus(label, duration);
+    try {
+      const payload = await api("/status", { method: "GET" });
+      state.initialized = !!payload.initialized;
+
+      if (!state.initialized) {
+        state.options = [];
+        state.selectedKey = null;
+        setStatus("Run vynt init first", 0);
+        render();
+        return;
+      }
+
+      syncSelectionFromState(payload);
+      if (state.options.length === 0) {
+        setStatus("No variants", 0);
+      } else if (label === "Loading...") {
+        setStatus("Ready", 2000);
+      }
+      render();
+    } catch (e) {
+      setStatus("Connection error", 0);
+      state.initialized = false;
+      render();
+    }
+  }
+
+  async function applySelectionKey(selectionKey) {
+    const selected = parseSelectionKey(selectionKey);
+    if (!selected) return;
+
+    setBusy(true);
+    setStatus(`Applying ${selected.variantId}...`, 0);
+
+    try {
+      await api("/apply", {
+        method: "POST",
+        body: JSON.stringify({
+          objectiveId: selected.objectiveId,
+          variantId: selected.variantId,
+        }),
+      });
+      state.selectedKeyByObjective[selected.objectiveId] = selectionKey;
+      await refreshStatus("Applied", 2000);
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error), 5000);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function finalizeSelectionKey(selectionKey) {
+    const selected = parseSelectionKey(selectionKey);
+    if (!selected) return;
+
+    setBusy(true);
+    setStatus(`Finalizing ${selected.variantId}...`, 0);
+
+    try {
+      await api("/finalize", {
+        method: "POST",
+        body: JSON.stringify({
+          objectiveId: selected.objectiveId,
+          variantId: selected.variantId,
+        }),
+      });
+      state.selectedKeyByObjective[selected.objectiveId] = selectionKey;
+      await refreshStatus("Finalized winner", 2500);
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error), 5000);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function finalizeSelected() {
+    await finalizeSelectionKey(state.selectedKey);
+  }
+
+  async function moveBy(delta) {
+    const total = state.options.length;
+    if (total === 0) return;
+    const current = getSelectedIndex();
+    const next = Math.max(0, Math.min(total - 1, current + delta));
+    if (next === current) return;
+    state.selectedKey = state.options[next].key;
+    render();
+    await applySelectionKey(state.selectedKey);
+  }
+
+  async function moveObjectiveBy(delta) {
+    const objectiveId = state.hoveredObjectiveId;
+    if (!objectiveId) return;
+    const options = getObjectiveOptions(objectiveId);
+    if (options.length === 0) return;
+    const current = getObjectiveSelectedIndex(objectiveId);
+    const next = Math.max(0, Math.min(options.length - 1, current + delta));
+    if (next === current) return;
+    const nextKey = options[next].key;
+    state.selectedKeyByObjective[objectiveId] = nextKey;
+    state.selectedKey = nextKey;
+    render();
+    await applySelectionKey(nextKey);
+  }
+
+  function connectEvents() {
+    if (eventSource) eventSource.close();
+
+    eventSource = new EventSource(`${baseUrl}/events`);
+    eventSource.addEventListener("state.changed", () => {
+      void refreshStatus("Synced", 2000);
+    });
+    eventSource.addEventListener("apply.failed", (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        setStatus(payload.payload && payload.payload.error ? String(payload.payload.error) : "Apply failed", 5000);
+      } catch {
+        setStatus("Apply failed", 5000);
+      }
+    });
+    eventSource.onerror = () => {
+      setStatus("Reconnecting...", 0);
+    };
+  }
+
+  function handlePointerDown(event) {
+    if (state.busy) return;
+    
+    const isDragHandle = event.target.closest('.vynt-drag-handle');
+    const isLogoBtn = event.target.closest('.vynt-logo-btn');
+    
+    if (!isDragHandle && (!isLogoBtn || (!state.collapsed && state.options.length > 0))) {
+      return;
+    }
+
+    event.preventDefault();
+    try {
+      (isDragHandle || isLogoBtn).setPointerCapture(event.pointerId);
+    } catch(e) {}
+
+    const rect = root.getBoundingClientRect();
+    const current = state.position || { x: rect.left, y: rect.top };
+
+    dragStart = {
+      id: event.pointerId,
+      startX: event.clientX,
+      startY: event.clientY,
+      initialX: current.x,
+      initialY: current.y,
+    };
+    isDragging = false;
+  }
+
+  function handlePointerMove(event) {
+    if (!dragStart || dragStart.id !== event.pointerId) return;
+
+    const deltaX = event.clientX - dragStart.startX;
+    const deltaY = event.clientY - dragStart.startY;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+    if (!isDragging && distance > DRAG_THRESHOLD) {
+      isDragging = true;
+      render();
+    }
+
+    if (!isDragging) return;
+
+    state.position = {
+      x: dragStart.initialX + deltaX,
+      y: dragStart.initialY + deltaY,
+    };
+    
+    updateRootPosition();
+  }
+
+  function handlePointerUp(event) {
+    if (!dragStart || dragStart.id !== event.pointerId) return;
+    
+    const isDragHandle = event.target.closest('.vynt-drag-handle');
+    const isLogoBtn = event.target.closest('.vynt-logo-btn');
+    const targetElement = isDragHandle || isLogoBtn;
+
+    try {
+      if (targetElement) {
+        targetElement.releasePointerCapture(event.pointerId);
+      }
+    } catch(e) {}
+
+    if (isDragging) {
+      persistPosition();
+      setTimeout(() => {
+         if(state.position) {
+            state.position = constrainPosition(state.position);
+            updateRootPosition();
+            persistPosition();
+         }
+      }, 300);
+    } else {
+      if (state.collapsed && isLogoBtn) {
+        state.collapsed = false;
+        render();
+      }
+    }
+
+    dragStart = null;
+    isDragging = false;
+    render();
+  }
+
+  variantSelect.addEventListener("change", () => {
+    state.selectedKey = variantSelect.value || null;
+    render();
+    const selected = parseSelectionKey(state.selectedKey);
+    if (selected) {
+      setStatus(`Selected ${selected.variantId}. Click apply.`, 2500);
+    }
+  });
+
+  applyBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void finalizeSelected();
+  });
+
+  prevBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void moveBy(-1);
+  });
+
+  nextBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void moveBy(1);
+  });
+
+  collapseBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    state.collapsed = true;
+    render();
+  });
+
+  objectiveSelect.addEventListener("change", () => {
+    const objectiveId = state.hoveredObjectiveId;
+    if (!objectiveId) return;
+    const nextKey = objectiveSelect.value || null;
+    if (!nextKey) return;
+    state.selectedKeyByObjective[objectiveId] = nextKey;
+    state.selectedKey = nextKey;
+    render();
+  });
+
+  objectivePrevBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void moveObjectiveBy(-1);
+  });
+
+  objectiveNextBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    void moveObjectiveBy(1);
+  });
+
+  logoBtn.addEventListener("pointerdown", handlePointerDown);
+  dragHandle.addEventListener("pointerdown", handlePointerDown);
+  
+  document.addEventListener("pointermove", handlePointerMove);
+  document.addEventListener("pointerup", handlePointerUp);
+  document.addEventListener("pointercancel", handlePointerUp);
+  document.addEventListener("mousemove", handleDocumentHover, true);
+  window.addEventListener("scroll", refreshObjectiveOverlayPosition, true);
+
+  window.addEventListener("resize", () => {
+    if (state.position) {
+      state.position = constrainPosition(state.position);
+    }
+    refreshObjectiveOverlayPosition();
+    render();
+  });
+
+  loadPosition();
+  connectEvents();
+  render();
+  void refreshStatus("Loading...", 0);
+})();