@devosurf/vynt 0.1.2

package/web/react/VyntToolbarProvider.d.ts

@@ -0,0 +1,9 @@
+import type { JSX } from "react";
+
+export interface VyntToolbarProviderProps {
+  bridgeUrl?: string;
+  enabled?: boolean;
+  removeOnUnmount?: boolean;
+}
+
+export declare function VyntToolbarProvider(props?: VyntToolbarProviderProps): JSX.Element | null;

package/web/react/VyntToolbarProvider.js

@@ -0,0 +1,615 @@
+"use client";
+
+import { useEffect } from "react";
+
+const DEFAULT_BRIDGE_URL = "/__vynt";
+const DEFAULT_ENABLED =
+  typeof process === "undefined" || !process.env
+    ? true
+    : process.env.NODE_ENV !== "production";
+
+const ROOT_ID = "vynt-inline-toolbar-root";
+const STYLE_ID = "vynt-inline-toolbar-style";
+const STORAGE_KEY = "vynt-toolbar-position";
+const DRAG_THRESHOLD = 6;
+const VIEWPORT_PADDING = 12;
+const EXPANDED_WIDTH = 320;
+const COLLAPSED_SIZE = 44;
+const TOOLBAR_HEIGHT = 44;
+const VYNT_ICON = `<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 APPLY_ICON = `<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>`;
+
+function mountInlineToolbar({ bridgeUrl, keepMountedOnUnmount }) {
+  if (typeof document === "undefined") {
+    return () => {};
+  }
+
+  const existingRoot = document.getElementById(ROOT_ID);
+  if (existingRoot) {
+    return () => {};
+  }
+
+  if (!document.getElementById(STYLE_ID)) {
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `
+[data-vynt-toolbar-inline] {
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+#${ROOT_ID} {
+  position: fixed;
+  right: 18px;
+  bottom: 18px;
+  z-index: 2147483647;
+}
+
+.vynt-shell {
+  width: 320px;
+  height: 44px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  background: rgba(20, 21, 25, 0.94);
+  color: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.34);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px;
+  pointer-events: auto;
+  cursor: grab;
+  user-select: none;
+  transition: transform 140ms ease, opacity 140ms ease, width 180ms ease;
+}
+
+.vynt-shell.vynt-dragging {
+  cursor: grabbing;
+  transform: scale(1.03);
+}
+
+.vynt-shell.vynt-collapsed {
+  width: 44px;
+  justify-content: center;
+  padding: 0;
+}
+
+.vynt-shell.vynt-empty {
+  width: 44px;
+  justify-content: center;
+  padding: 0;
+}
+
+.vynt-toggle {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.vynt-controls {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+}
+
+.vynt-shell.vynt-empty .vynt-controls {
+  display: none;
+}
+
+.vynt-btn {
+  width: 34px;
+  height: 34px;
+  border-radius: 999px;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.9);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  line-height: 1;
+  cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease;
+}
+
+.vynt-btn:hover:not(:disabled),
+.vynt-toggle:hover:not(:disabled) {
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+}
+
+.vynt-btn:disabled,
+.vynt-select:disabled,
+.vynt-toggle:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+.vynt-select {
+  flex: 1;
+  min-width: 0;
+  height: 34px;
+  border-radius: 999px;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  background: rgba(255, 255, 255, 0.08);
+  color: rgba(255, 255, 255, 0.95);
+  padding: 0 10px;
+  font-size: 12px;
+  outline: none;
+}
+
+.vynt-select option {
+  color: #111;
+}
+
+.vynt-status {
+  position: absolute;
+  left: 50%;
+  bottom: -18px;
+  transform: translateX(-50%);
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.75);
+  white-space: nowrap;
+  pointer-events: none;
+}
+`;
+    document.head.appendChild(style);
+  }
+
+  const normalizedBridgeUrl = bridgeUrl.replace(/\/+$/, "");
+
+  const localState = {
+    busy: false,
+    collapsed: false,
+    initialized: false,
+    options: [],
+    selectedKey: null,
+    statusText: "Connecting...",
+    position: null,
+  };
+
+  let eventSource;
+  let dragStart = null;
+  let isDragging = false;
+  let preventExpandClick = false;
+
+  const root = document.createElement("div");
+  root.id = ROOT_ID;
+  root.setAttribute("data-vynt-toolbar-inline", "root");
+
+  const shell = document.createElement("div");
+  shell.className = "vynt-shell";
+
+  const controls = document.createElement("div");
+  controls.className = "vynt-controls";
+
+  const prevBtn = document.createElement("button");
+  prevBtn.className = "vynt-btn";
+  prevBtn.textContent = "<";
+
+  const variantSelect = document.createElement("select");
+  variantSelect.className = "vynt-select";
+
+  const nextBtn = document.createElement("button");
+  nextBtn.className = "vynt-btn";
+  nextBtn.textContent = ">";
+
+  const applyBtn = document.createElement("button");
+  applyBtn.className = "vynt-btn";
+  applyBtn.innerHTML = APPLY_ICON;
+  applyBtn.title = "Finalize selected variant";
+
+  const collapseBtn = document.createElement("button");
+  collapseBtn.className = "vynt-toggle";
+  collapseBtn.textContent = "-";
+  collapseBtn.title = "Collapse";
+
+  const collapsedBtn = document.createElement("button");
+  collapsedBtn.className = "vynt-toggle";
+  collapsedBtn.innerHTML = VYNT_ICON;
+  collapsedBtn.title = "Vynt";
+  collapsedBtn.style.display = "none";
+
+  const statusNode = document.createElement("div");
+  statusNode.className = "vynt-status";
+  statusNode.textContent = localState.statusText;
+
+  controls.appendChild(prevBtn);
+  controls.appendChild(variantSelect);
+  controls.appendChild(nextBtn);
+  controls.appendChild(applyBtn);
+  controls.appendChild(collapseBtn);
+  shell.appendChild(controls);
+  shell.appendChild(collapsedBtn);
+  root.appendChild(shell);
+  root.appendChild(statusNode);
+  document.body.appendChild(root);
+
+  function setStatus(text) {
+    localState.statusText = text;
+    statusNode.textContent = text;
+  }
+
+  function setBusy(nextBusy) {
+    localState.busy = nextBusy;
+    render();
+  }
+
+  function parseSelectionKey(key) {
+    const [objectiveId, variantId] = String(key).split("::");
+    if (!objectiveId || !variantId) return null;
+    return { objectiveId, variantId };
+  }
+
+  function getSelectedIndex() {
+    return localState.options.findIndex((item) => item.key === localState.selectedKey);
+  }
+
+  function constrainPosition(position, collapsed) {
+    const width = collapsed ? COLLAPSED_SIZE : EXPANDED_WIDTH;
+    const maxX = window.innerWidth - width - VIEWPORT_PADDING;
+    const maxY = window.innerHeight - TOOLBAR_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 (!localState.position) {
+      root.style.removeProperty("left");
+      root.style.removeProperty("top");
+      root.style.right = "18px";
+      root.style.bottom = "18px";
+      return;
+    }
+    const next = constrainPosition(localState.position, localState.collapsed);
+    localState.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 (!localState.position) return;
+    try {
+      localStorage.setItem(STORAGE_KEY, JSON.stringify(localState.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") {
+        localState.position = parsed;
+      }
+    } catch {}
+  }
+
+  function syncSelectionFromStatus(payload) {
+    const objectives = payload?.state?.objectives || [];
+    const options = [];
+    let activeKey = null;
+
+    for (const objective of objectives) {
+      const variants = Array.isArray(objective.variants) ? objective.variants : [];
+      for (const variant of variants) {
+        const key = `${objective.id}::${variant.id}`;
+        options.push({
+          key,
+          label: `${objective.id} / ${variant.name}`,
+          objectiveId: objective.id,
+          variantId: variant.id,
+        });
+        if (objective.activeVariantId && objective.activeVariantId === variant.id) {
+          activeKey = key;
+        }
+      }
+    }
+
+    localState.options = options;
+    const hasCurrent = options.some((option) => option.key === localState.selectedKey);
+    if (!hasCurrent) {
+      localState.selectedKey = activeKey || (options[0] && options[0].key) || null;
+    }
+  }
+
+  function render() {
+    updateRootPosition();
+    const hasOptions = localState.options.length > 0;
+    shell.classList.toggle("vynt-collapsed", localState.collapsed);
+    shell.classList.toggle("vynt-empty", !hasOptions);
+    shell.classList.toggle("vynt-dragging", isDragging);
+
+    controls.style.display = localState.collapsed || !hasOptions ? "none" : "flex";
+    collapsedBtn.style.display = localState.collapsed || !hasOptions ? "inline-flex" : "none";
+
+    variantSelect.innerHTML = "";
+    for (const optionData of localState.options) {
+      const option = document.createElement("option");
+      option.value = optionData.key;
+      option.textContent = optionData.label;
+      variantSelect.appendChild(option);
+    }
+    if (localState.selectedKey) {
+      variantSelect.value = localState.selectedKey;
+    }
+
+    const index = getSelectedIndex();
+    const disabled = localState.busy || !localState.initialized;
+    prevBtn.disabled = disabled || !hasOptions || index <= 0;
+    nextBtn.disabled = disabled || !hasOptions || index >= localState.options.length - 1;
+    applyBtn.disabled = disabled || !hasOptions;
+    variantSelect.disabled = disabled || !hasOptions;
+    collapseBtn.disabled = disabled;
+    collapsedBtn.disabled = disabled;
+  }
+
+  async function api(path, init) {
+    const response = await fetch(`${normalizedBridgeUrl}${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) {
+    if (label) setStatus(label);
+
+    const payload = await api("/status", { method: "GET" });
+    localState.initialized = !!payload.initialized;
+
+    if (!payload.initialized) {
+      localState.options = [];
+      localState.selectedKey = null;
+      setStatus("Run vynt init first");
+      render();
+      return;
+    }
+
+    syncSelectionFromStatus(payload);
+    setStatus(localState.options.length === 0 ? "No variants" : "Ready");
+    render();
+  }
+
+  async function applySelected() {
+    const selected = parseSelectionKey(localState.selectedKey);
+    if (!selected) return;
+
+    setBusy(true);
+    setStatus(`Applying ${selected.variantId}...`);
+
+    try {
+      await api("/apply", {
+        method: "POST",
+        body: JSON.stringify({
+          objectiveId: selected.objectiveId,
+          variantId: selected.variantId,
+        }),
+      });
+      await refreshStatus("Applied");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function finalizeSelected() {
+    const selected = parseSelectionKey(localState.selectedKey);
+    if (!selected) return;
+
+    setBusy(true);
+    setStatus(`Finalizing ${selected.variantId}...`);
+
+    try {
+      await api("/finalize", {
+        method: "POST",
+        body: JSON.stringify({
+          objectiveId: selected.objectiveId,
+          variantId: selected.variantId,
+        }),
+      });
+      await refreshStatus("Finalized winner");
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      setStatus(message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function moveBy(delta) {
+    const total = localState.options.length;
+    if (total === 0) return;
+
+    const current = getSelectedIndex();
+    const next = Math.max(0, Math.min(total - 1, current + delta));
+    if (next === current) return;
+
+    localState.selectedKey = localState.options[next].key;
+    render();
+    await applySelected();
+  }
+
+  function handleDragStart(event) {
+    if (localState.busy) return;
+    const target = event.target;
+    if (target.closest("button") || target.closest("select")) {
+      return;
+    }
+
+    const rect = root.getBoundingClientRect();
+    const current = localState.position || { x: rect.left, y: rect.top };
+
+    dragStart = {
+      pointerX: event.clientX,
+      pointerY: event.clientY,
+      x: current.x,
+      y: current.y,
+    };
+    isDragging = false;
+  }
+
+  function handleDragMove(event) {
+    if (!dragStart) return;
+
+    const deltaX = event.clientX - dragStart.pointerX;
+    const deltaY = event.clientY - dragStart.pointerY;
+    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+    if (!isDragging && distance > DRAG_THRESHOLD) {
+      isDragging = true;
+      preventExpandClick = true;
+    }
+
+    if (!isDragging) return;
+
+    localState.position = {
+      x: dragStart.x + deltaX,
+      y: dragStart.y + deltaY,
+    };
+
+    updateRootPosition();
+    render();
+  }
+
+  function handleDragEnd() {
+    if (!dragStart) return;
+    if (isDragging) persistPosition();
+    dragStart = null;
+    isDragging = false;
+    render();
+    window.setTimeout(() => {
+      preventExpandClick = false;
+    }, 120);
+  }
+
+  function connectEvents() {
+    eventSource = new EventSource(`${normalizedBridgeUrl}/events`);
+    eventSource.addEventListener("state.changed", () => {
+      void refreshStatus("Synced");
+    });
+    eventSource.addEventListener("apply.failed", (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        setStatus(payload.payload?.error ? String(payload.payload.error) : "Apply failed");
+      } catch {
+        setStatus("Apply failed");
+      }
+    });
+    eventSource.addEventListener("rollback.failed", (event) => {
+      try {
+        const payload = JSON.parse(event.data);
+        setStatus(payload.payload?.error ? String(payload.payload.error) : "Rollback failed");
+      } catch {
+        setStatus("Rollback failed");
+      }
+    });
+    eventSource.onerror = () => {
+      setStatus("Bridge unavailable");
+    };
+  }
+
+  variantSelect.addEventListener("change", () => {
+    localState.selectedKey = variantSelect.value || null;
+    render();
+    const selected = parseSelectionKey(localState.selectedKey);
+    if (selected) {
+      setStatus(`Selected ${selected.variantId}. Click apply.`);
+    }
+  });
+
+  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();
+    localState.collapsed = true;
+    render();
+  });
+
+  collapsedBtn.addEventListener("click", (event) => {
+    event.stopPropagation();
+    if (preventExpandClick) return;
+    localState.collapsed = false;
+    render();
+  });
+
+  shell.addEventListener("mousedown", handleDragStart);
+  document.addEventListener("mousemove", handleDragMove);
+  document.addEventListener("mouseup", handleDragEnd);
+  window.addEventListener("resize", () => {
+    if (localState.position) {
+      localState.position = constrainPosition(localState.position, localState.collapsed);
+    }
+    render();
+  });
+
+  loadPosition();
+  connectEvents();
+  render();
+  void refreshStatus("Loading");
+
+  return () => {
+    if (eventSource) {
+      eventSource.close();
+    }
+    document.removeEventListener("mousemove", handleDragMove);
+    document.removeEventListener("mouseup", handleDragEnd);
+    if (!keepMountedOnUnmount) {
+      root.remove();
+    }
+  };
+}
+
+export function VyntToolbarProvider({
+  bridgeUrl = DEFAULT_BRIDGE_URL,
+  enabled = DEFAULT_ENABLED,
+  removeOnUnmount = true,
+} = {}) {
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") {
+      return;
+    }
+
+    return mountInlineToolbar({
+      bridgeUrl,
+      keepMountedOnUnmount: !removeOnUnmount,
+    });
+  }, [bridgeUrl, enabled, removeOnUnmount]);
+
+  return null;
+}

package/web/react/index.d.ts

@@ -0,0 +1 @@
+export { VyntToolbarProvider, type VyntToolbarProviderProps } from "./VyntToolbarProvider.js";

package/web/react/index.js

@@ -0,0 +1 @@
+export { VyntToolbarProvider } from "./VyntToolbarProvider.js";