@guidelytech/guide-runtime 0.11.0 → 0.12.0

package/dist/messenger.cjs

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/messenger.ts
 var messenger_exports = {};
 __export(messenger_exports, {
+  parseLauncherSpot: () => parseLauncherSpot,
   personalGreeting: () => personalGreeting,
   relativeTime: () => relativeTime,
   renderMessenger: () => renderMessenger
@@ -1843,6 +1844,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}
@@ -1851,9 +1953,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}
@@ -1905,7 +2011,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)}
@@ -2254,7 +2360,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";
@@ -2266,6 +2371,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;
@@ -2276,6 +2422,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]));
@@ -3362,6 +3509,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");
@@ -3371,6 +3520,7 @@ function renderMessenger(options) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  parseLauncherSpot,
   personalGreeting,
   relativeTime,
   renderMessenger