@guidelytech/guide-runtime 0.11.0 → 0.12.0

package/dist/messenger.d.cts

@@ -57,6 +57,14 @@ interface IdeasApi {
     ideaPortalLink?(): Promise<string>;
 }
 
+/** Where the visitor left the launcher. `y`: 0 = the default bottom spot, 1 = as high as it goes. */
+interface LauncherSpot {
+    side: "left" | "right";
+    y: number;
+}
+/** Reads a stored spot, ignoring anything malformed. */
+declare function parseLauncherSpot(raw: unknown): LauncherSpot | null;
+
 /** Callbacks the transport invokes while a message is sent and Scout replies. */
 interface MessengerStreamHandlers {
     /** A new conversation was created (first message only). */
@@ -159,6 +167,10 @@ interface MessengerOptions {
     /** The visitor saw these announcements (News tab opened). */
     onNewsSeen?: (ids: string[]) => void;
     hideLauncher?: boolean;
+    /** Where the visitor last dragged the launcher on this device (null = the configured corner). */
+    launcherSpot?: LauncherSpot | null;
+    /** The visitor dragged the launcher somewhere else (save it for next time). */
+    onLauncherMove?: (spot: LauncherSpot) => void;
     /** Poll intervals (ms): open thread, and unread badge while closed. */
     pollMs?: {
         thread: number;
@@ -188,4 +200,4 @@ declare function relativeTime(iso: string, now?: number): string;
 /** Intercom-style messenger: launcher + panel with Home, Messages (chat with Scout / the team) and Help tabs. */
 declare function renderMessenger(options: MessengerOptions): MessengerWidget;
 
-export { type IdeaInput, type IdeaListQuery, type IdeaVoteInput, type IdeasApi, type MessengerApi, type MessengerChecklistProgress, type MessengerNewsItem, type MessengerOptions, type MessengerResumeGuide, type MessengerStreamHandlers, type MessengerTab, type MessengerVisitor, type MessengerWidget, personalGreeting, relativeTime, renderMessenger };
+export { type IdeaInput, type IdeaListQuery, type IdeaVoteInput, type IdeasApi, type LauncherSpot, type MessengerApi, type MessengerChecklistProgress, type MessengerNewsItem, type MessengerOptions, type MessengerResumeGuide, type MessengerStreamHandlers, type MessengerTab, type MessengerVisitor, type MessengerWidget, parseLauncherSpot, personalGreeting, relativeTime, renderMessenger };

package/dist/messenger.d.ts

@@ -57,6 +57,14 @@ interface IdeasApi {
     ideaPortalLink?(): Promise<string>;
 }
 
+/** Where the visitor left the launcher. `y`: 0 = the default bottom spot, 1 = as high as it goes. */
+interface LauncherSpot {
+    side: "left" | "right";
+    y: number;
+}
+/** Reads a stored spot, ignoring anything malformed. */
+declare function parseLauncherSpot(raw: unknown): LauncherSpot | null;
+
 /** Callbacks the transport invokes while a message is sent and Scout replies. */
 interface MessengerStreamHandlers {
     /** A new conversation was created (first message only). */
@@ -159,6 +167,10 @@ interface MessengerOptions {
     /** The visitor saw these announcements (News tab opened). */
     onNewsSeen?: (ids: string[]) => void;
     hideLauncher?: boolean;
+    /** Where the visitor last dragged the launcher on this device (null = the configured corner). */
+    launcherSpot?: LauncherSpot | null;
+    /** The visitor dragged the launcher somewhere else (save it for next time). */
+    onLauncherMove?: (spot: LauncherSpot) => void;
     /** Poll intervals (ms): open thread, and unread badge while closed. */
     pollMs?: {
         thread: number;
@@ -188,4 +200,4 @@ declare function relativeTime(iso: string, now?: number): string;
 /** Intercom-style messenger: launcher + panel with Home, Messages (chat with Scout / the team) and Help tabs. */
 declare function renderMessenger(options: MessengerOptions): MessengerWidget;
 
-export { type IdeaInput, type IdeaListQuery, type IdeaVoteInput, type IdeasApi, type MessengerApi, type MessengerChecklistProgress, type MessengerNewsItem, type MessengerOptions, type MessengerResumeGuide, type MessengerStreamHandlers, type MessengerTab, type MessengerVisitor, type MessengerWidget, personalGreeting, relativeTime, renderMessenger };
+export { type IdeaInput, type IdeaListQuery, type IdeaVoteInput, type IdeasApi, type LauncherSpot, type MessengerApi, type MessengerChecklistProgress, type MessengerNewsItem, type MessengerOptions, type MessengerResumeGuide, type MessengerStreamHandlers, type MessengerTab, type MessengerVisitor, type MessengerWidget, parseLauncherSpot, personalGreeting, relativeTime, renderMessenger };

package/dist/messenger.js

@@ -1247,6 +1247,107 @@ function createIdeas(o) {
   };
 }
 
+// src/launcher-drag.ts
+var DRAG_THRESHOLD = 6;
+var MARGIN = 16;
+function parseLauncherSpot(raw) {
+  let v = raw;
+  if (typeof v === "string") {
+    try {
+      v = JSON.parse(v);
+    } catch {
+      return null;
+    }
+  }
+  if (!v || typeof v !== "object") return null;
+  const { side, y } = v;
+  if (side !== "left" && side !== "right" || typeof y !== "number" || !Number.isFinite(y)) return null;
+  return { side, y: Math.min(1, Math.max(0, y)) };
+}
+function maxLauncherBottom(viewportHeight, size) {
+  return Math.max(0, viewportHeight - size - MARGIN * 2);
+}
+function snapLauncher(drop, viewport, size) {
+  const side = drop.left + size / 2 < viewport.width / 2 ? "left" : "right";
+  const max = maxLauncherBottom(viewport.height, size);
+  const bottom = Math.min(max, Math.max(0, viewport.height - MARGIN - size - drop.top));
+  return { side, y: max ? bottom / max : 0 };
+}
+function enableLauncherDrag({ launcher, onMove }) {
+  const win = launcher.ownerDocument.defaultView ?? window;
+  let start = null;
+  let dragging = false;
+  let swallowClickUntil = 0;
+  const onDown = (e) => {
+    if (e.button !== 0) return;
+    const r = launcher.getBoundingClientRect();
+    start = { id: e.pointerId, x: e.clientX, y: e.clientY, left: r.left, top: r.top };
+    dragging = false;
+    try {
+      launcher.setPointerCapture(e.pointerId);
+    } catch {
+    }
+  };
+  const onMovePointer = (e) => {
+    if (!start || e.pointerId !== start.id) return;
+    const dx = e.clientX - start.x;
+    const dy = e.clientY - start.y;
+    if (!dragging) {
+      if (Math.hypot(dx, dy) < DRAG_THRESHOLD) return;
+      dragging = true;
+      launcher.classList.add("g-m-dragging");
+    }
+    e.preventDefault();
+    const size = launcher.offsetWidth || 56;
+    const left = Math.min(win.innerWidth - size - MARGIN, Math.max(MARGIN, start.left + dx));
+    const top = Math.min(win.innerHeight - size - MARGIN, Math.max(MARGIN, start.top + dy));
+    Object.assign(launcher.style, { left: `${left}px`, top: `${top}px`, right: "auto", bottom: "auto", margin: "0" });
+  };
+  const onUp = (e) => {
+    if (!start || e.pointerId !== start.id) return;
+    start = null;
+    if (!dragging) return;
+    dragging = false;
+    swallowClickUntil = Date.now() + 400;
+    const before = launcher.getBoundingClientRect();
+    launcher.classList.remove("g-m-dragging");
+    Object.assign(launcher.style, { left: "", top: "", right: "", margin: "" });
+    onMove(snapLauncher({ left: before.left, top: before.top }, { width: win.innerWidth, height: win.innerHeight }, before.width || 56));
+    const after = launcher.getBoundingClientRect();
+    const dx = before.left - after.left;
+    const dy = before.top - after.top;
+    if (!dx && !dy) return;
+    launcher.style.transition = "none";
+    launcher.style.transform = `translate(${dx}px, ${dy}px)`;
+    void launcher.offsetWidth;
+    launcher.style.transition = "";
+    launcher.classList.add("g-m-snapping");
+    launcher.style.transform = "";
+    const done = () => launcher.classList.remove("g-m-snapping");
+    launcher.addEventListener("transitionend", done, { once: true });
+    win.setTimeout(done, 400);
+  };
+  const onClick = (e) => {
+    if (Date.now() < swallowClickUntil) {
+      swallowClickUntil = 0;
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+  };
+  launcher.addEventListener("pointerdown", onDown);
+  launcher.addEventListener("pointermove", onMovePointer);
+  launcher.addEventListener("pointerup", onUp);
+  launcher.addEventListener("pointercancel", onUp);
+  launcher.addEventListener("click", onClick, true);
+  return () => {
+    launcher.removeEventListener("pointerdown", onDown);
+    launcher.removeEventListener("pointermove", onMovePointer);
+    launcher.removeEventListener("pointerup", onUp);
+    launcher.removeEventListener("pointercancel", onUp);
+    launcher.removeEventListener("click", onClick, true);
+  };
+}
+
 // src/messenger-styles.ts
 var MESSENGER_STYLES = `
 :host([data-g-messenger="bottom-right"]) .g-launcher.g-pos-bottom-right{right:72px}
@@ -1255,9 +1356,13 @@ var MESSENGER_STYLES = `
 .g-m-launcher:hover{transform:scale(1.05)}
 .g-m-launcher:focus-visible{outline:2px solid var(--g-primary);outline-offset:3px}
 .g-m-launcher svg{width:26px;height:26px;fill:currentColor}
+.g-m-launcher{touch-action:none;-webkit-user-select:none;user-select:none}
+.g-m-launcher.g-m-dragging{transition:none;cursor:grabbing;transform:scale(1.08)}
+.g-m-launcher.g-m-snapping{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
 .g-m-badge{position:absolute;top:-2px;right:-2px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#e11d48;color:#fff;font-size:11px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--g-bg)}
-.g-messenger{bottom:76px;height:min(640px,calc(100vh - 110px));transition:width .2s ease,height .2s ease,max-height .2s ease}
-.g-messenger.g-m-expanded{width:min(720px,calc(100vw - 32px));height:calc(100vh - 110px);max-height:calc(100vh - 110px)}
+.g-messenger{bottom:var(--g-m-bottom,76px);height:min(640px,calc(100vh - var(--g-m-reserve,110px)));transition:width .2s ease,height .2s ease,max-height .2s ease}
+.g-messenger.g-m-expanded{width:min(720px,calc(100vw - 32px));height:calc(100vh - var(--g-m-reserve,110px));max-height:calc(100vh - var(--g-m-reserve,110px))}
+.g-messenger.g-m-below{bottom:auto;top:var(--g-m-top)}
 .g-m-expanded .g-rc-article,.g-m-expanded .g-m-scroll{padding:24px clamp(20px,5vw,40px)}
 .g-m-expanded .g-rc-article>.g-title{font-size:24px;line-height:1.25;margin-bottom:12px}
 .g-m-expanded .g-rc-article .g-body{font-size:15px}
@@ -1309,7 +1414,7 @@ var MESSENGER_STYLES = `
 .g-m-typing span{width:6px;height:6px;border-radius:999px;background:var(--g-muted);animation:g-m-bounce 1s infinite}
 .g-m-typing span:nth-child(2){animation-delay:.15s}.g-m-typing span:nth-child(3){animation-delay:.3s}
 @keyframes g-m-bounce{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
-@media (prefers-reduced-motion: reduce){.g-m-typing span{animation:none}.g-m-launcher{transition:none}}
+@media (prefers-reduced-motion: reduce){.g-m-typing span{animation:none}.g-m-launcher,.g-m-launcher.g-m-snapping{transition:none}}
 .g-m-chips{display:flex;flex-direction:column;gap:6px;margin-top:2px}
 .g-m-chip{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid var(--g-border);background:var(--g-bg);color:var(--g-text);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px;cursor:pointer}
 .g-m-chip:hover{background:var(--g-subtle)}
@@ -1658,7 +1763,6 @@ function renderMessenger(options) {
   const pos = `g-pos-${config.launcher.position}`;
   const rootNode = scope.getRootNode();
   const shadowHost = "host" in rootNode ? rootNode.host : null;
-  shadowHost?.setAttribute("data-g-messenger", config.launcher.position);
   const root = el(doc, "div", "g-messenger-root");
   const launcher = el(doc, "button", `g-m-launcher ${pos}`);
   launcher.type = "button";
@@ -1670,6 +1774,47 @@ function renderMessenger(options) {
   launcher.appendChild(badge);
   if (options.hideLauncher) launcher.hidden = true;
   const panel = el(doc, "div", `g-panel g-messenger ${pos}`);
+  let spot = options.launcherSpot ?? null;
+  const win = doc.defaultView ?? window;
+  function placeLauncher() {
+    const side = spot?.side ?? (config.launcher.position === "bottom-left" ? "left" : "right");
+    for (const node of [launcher, panel]) {
+      node.classList.toggle("g-pos-bottom-left", side === "left");
+      node.classList.toggle("g-pos-bottom-right", side === "right");
+    }
+    const size = launcher.offsetWidth || 56;
+    const bottom = spot && !options.hideLauncher ? Math.round(spot.y * maxLauncherBottom(win.innerHeight, size)) : 0;
+    launcher.style.bottom = bottom ? `${bottom}px` : "";
+    if (bottom < size + 16) shadowHost?.setAttribute("data-g-messenger", `bottom-${side}`);
+    else shadowHost?.removeAttribute("data-g-messenger");
+    const launcherTop = win.innerHeight - 16 - size - bottom;
+    const below = bottom > 0 && launcherTop < 480 && bottom > launcherTop;
+    panel.classList.toggle("g-m-below", below);
+    if (!bottom) {
+      panel.style.removeProperty("--g-m-bottom");
+      panel.style.removeProperty("--g-m-top");
+      panel.style.removeProperty("--g-m-reserve");
+    } else if (below) {
+      const top = launcherTop + size - 12;
+      panel.style.setProperty("--g-m-top", `${top}px`);
+      panel.style.setProperty("--g-m-reserve", `${top + 40}px`);
+    } else {
+      panel.style.setProperty("--g-m-bottom", `${bottom + 76}px`);
+      panel.style.setProperty("--g-m-reserve", `${bottom + 110}px`);
+    }
+  }
+  const stopDrag = enableLauncherDrag({
+    launcher,
+    onMove(next) {
+      spot = next;
+      placeLauncher();
+      options.onLauncherMove?.(next);
+    }
+  });
+  const onResize = () => {
+    if (spot) placeLauncher();
+  };
+  win.addEventListener("resize", onResize);
   panel.setAttribute("role", "dialog");
   panel.setAttribute("aria-label", config.name);
   panel.hidden = true;
@@ -1680,6 +1825,7 @@ function renderMessenger(options) {
   panel.append(head, main, tabs);
   root.append(launcher, panel);
   scope.appendChild(root);
+  placeLauncher();
   function withRcText(items, rc, apply) {
     if (!rc?.length) return items;
     const byId = new Map(rc.map((x) => [x.id, x]));
@@ -2766,6 +2912,8 @@ function renderMessenger(options) {
       if (threadTimer) clearTimeout(threadTimer);
       if (backgroundTimer) clearInterval(backgroundTimer);
       panel.removeEventListener("keydown", onKey);
+      stopDrag();
+      win.removeEventListener("resize", onResize);
       help.destroy();
       ideas.destroy();
       shadowHost?.removeAttribute("data-g-messenger");
@@ -2774,6 +2922,7 @@ function renderMessenger(options) {
   };
 }
 export {
+  parseLauncherSpot,
   personalGreeting,
   relativeTime,
   renderMessenger