@guidelytech/guide-runtime 0.15.0 → 0.17.0

package/dist/index.cjs

@@ -44,9 +44,9 @@ __export(src_exports, {
   generateSelectors: () => generateSelectors,
   highlightSelectors: () => highlightSelectors,
   isAnchoredStep: () => isAnchoredStep,
-  isChecklistComplete: () => import_runtime7.isChecklistComplete,
+  isChecklistComplete: () => import_runtime8.isChecklistComplete,
   isGuidelyElement: () => isGuidelyElement,
-  isQuestionVisible: () => import_runtime8.isQuestionVisible,
+  isQuestionVisible: () => import_runtime9.isQuestionVisible,
   isStableClass: () => isStableClass,
   isStableId: () => isStableId,
   isVisible: () => isVisible,
@@ -665,6 +665,11 @@ var STYLES = `
 .g-close:hover,.g-close:focus-visible{background:var(--g-subtle);color:var(--g-text);outline:none}
 .g-close:focus-visible,.g-btn:focus-visible,.g-task:focus-visible,.g-choice:focus-visible,.g-scale button:focus-visible,.g-launcher:focus-visible,.g-input:focus-visible,.g-rc-item:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
 .g-image{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:var(--g-radius) var(--g-radius) 0 0}
+.g-video{position:relative;display:block;width:100%;aspect-ratio:16/9;max-height:240px;overflow:hidden;background:#0f172a;border-radius:var(--g-radius) var(--g-radius) 0 0;cursor:pointer}
+.g-video-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
+.g-video-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:flex;align-items:center;justify-content:center;padding-left:3px;box-sizing:border-box;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.3);transition:transform .15s ease,background .15s ease}
+.g-video:hover .g-video-play,.g-video:focus-visible .g-video-play{transform:scale(1.08);background:var(--g-primary);color:var(--g-primary-text)}
+.g-video:focus-visible{outline:2px solid var(--g-primary);outline-offset:-2px}
 .g-title{margin:0 28px 6px 0;font-size:16px;font-weight:600;line-height:1.3}
 .g-body{font-size:14px;color:var(--g-text)}
 .g-body p{margin:0 0 8px}.g-body p:last-child{margin-bottom:0}
@@ -1191,6 +1196,7 @@ function trackRect(el2, cb) {
 
 // src/render.ts
 var import_shared = require("@guidelytech/shared");
+var import_runtime6 = require("@guidelytech/shared/runtime");
 var FOCUSABLE = "button:not([disabled]),[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
 var uid = 0;
 var nextId = (p) => `g-${p}-${++uid}`;
@@ -1212,6 +1218,52 @@ function buildButtons(doc, step, canGoBack, onButton) {
     return btn;
   });
 }
+var SVG_NS = "http://www.w3.org/2000/svg";
+function playIcon(doc) {
+  const svg = doc.createElementNS(SVG_NS, "svg");
+  svg.setAttribute("viewBox", "0 0 24 24");
+  svg.setAttribute("width", "22");
+  svg.setAttribute("height", "22");
+  svg.setAttribute("aria-hidden", "true");
+  const path = doc.createElementNS(SVG_NS, "path");
+  path.setAttribute("fill", "currentColor");
+  path.setAttribute("d", "M8 5.5v13a.75.75 0 0 0 1.14.64l10.4-6.5a.75.75 0 0 0 0-1.28L9.14 4.86A.75.75 0 0 0 8 5.5Z");
+  svg.appendChild(path);
+  return svg;
+}
+function buildVideo(doc, step, video, onVideo) {
+  const a = h(doc, "a", "g-video");
+  a.href = video.url;
+  a.target = "_blank";
+  a.rel = "noopener noreferrer";
+  const opened = (e) => {
+    if (e.type === "auxclick" && e.button !== 1) return;
+    onVideo?.(video.url);
+  };
+  a.addEventListener("click", opened);
+  a.addEventListener("auxclick", opened);
+  a.setAttribute("aria-label", `${step.title ? `Play video: ${step.title}` : "Play video"} (opens in a new tab)`);
+  if (video.poster) {
+    const img = h(doc, "img", "g-video-poster");
+    img.src = video.poster;
+    img.alt = "";
+    img.addEventListener("error", () => img.remove());
+    a.appendChild(img);
+  } else if ((0, import_runtime6.isVideoFileUrl)(video.url)) {
+    const v = h(doc, "video", "g-video-poster");
+    v.src = `${video.url}#t=0.1`;
+    v.preload = "metadata";
+    v.muted = true;
+    v.playsInline = true;
+    v.tabIndex = -1;
+    v.setAttribute("aria-hidden", "true");
+    a.appendChild(v);
+  }
+  const play = h(doc, "span", "g-video-play");
+  play.appendChild(playIcon(doc));
+  a.appendChild(play);
+  return a;
+}
 function buildCard(doc, opts, extraClass) {
   const { step } = opts;
   const card = h(doc, "div", `g-card ${extraClass}`);
@@ -1220,7 +1272,10 @@ function buildCard(doc, opts, extraClass) {
   if (step.width) card.style.width = `min(${step.width}px, calc(100vw - 32px))`;
   const titleId = nextId("title");
   const bodyId = nextId("body");
-  if (step.imageUrl) {
+  const video = (0, import_runtime6.stepVideo)(step);
+  if (video) {
+    card.appendChild(buildVideo(doc, step, video, opts.onVideo));
+  } else if (step.imageUrl) {
     const img = h(doc, "img", "g-image");
     img.src = step.imageUrl;
     img.alt = step.imageAlt ?? "";
@@ -1623,7 +1678,7 @@ function isAnchoredStep(step) {
 }
 
 // src/controller.ts
-var import_runtime6 = require("@guidelytech/shared/runtime");
+var import_runtime7 = require("@guidelytech/shared/runtime");
 function noop() {
 }
 var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
@@ -1728,7 +1783,7 @@ function runGuide(guide, options = {}) {
     const ctx = getCtx();
     if (step && ctx) {
       for (const branch of step.branches) {
-        if ((0, import_runtime6.evaluateRules)(branch.when, ctx)) {
+        if ((0, import_runtime7.evaluateRules)(branch.when, ctx)) {
           target = steps.findIndex((s) => s.id === branch.goTo);
           if (target >= 0) break;
         }
@@ -1837,6 +1892,7 @@ function runGuide(guide, options = {}) {
   const render = (step, target, asModal = false) => {
     if (ended) return;
     status = "running";
+    const shownIndex = index;
     const shown = !target && step.advanceOn === "element_click" && !step.advanceValue && !step.buttons.length ? { ...step, buttons: [{ id: "g-next", label: index + 1 >= total ? "Done" : "Next", action: index + 1 >= total ? "complete" : "next", variant: "primary" }] } : step;
     try {
       view = renderStep({
@@ -1849,6 +1905,7 @@ function runGuide(guide, options = {}) {
         asModal,
         onButton: handleButton,
         onClose: () => end("dismissed"),
+        onVideo: (url) => emit("guide_video_clicked", step, shownIndex, { videoUrl: url }),
         announce,
         runCode: options.runCode,
         onError
@@ -1859,6 +1916,20 @@ function runGuide(guide, options = {}) {
       if (index + 1 < total) return goNext();
       return end("skipped");
     }
+    if (view && options.onAction) {
+      const shownView = view;
+      shownView.el.addEventListener("click", (e) => {
+        const link = composedTarget(e)?.closest?.("a[href]");
+        const articleId = (0, import_runtime7.articleIdFromHref)(link?.getAttribute("href"));
+        if (!articleId) return;
+        e.preventDefault();
+        options.onAction?.("open_article", articleId);
+        if (step.type === "modal" || step.type === "spotlight" || asModal || shownView.el.querySelector(".g-overlay, .g-spot-rect")) {
+          completeStep();
+          end(shownIndex + 1 >= total ? "completed" : "dismissed");
+        }
+      });
+    }
     if (!started) {
       started = true;
       emit("guide_started", step, index);
@@ -1877,6 +1948,7 @@ function runGuide(guide, options = {}) {
       title: "Continue on another page",
       body: `<p>The next step${step.title ? `, <strong>${escapeHtml(step.title)}</strong>,` : ""} is on <code>${escapeHtml(where)}</code>.</p>`,
       imageUrl: "",
+      videoUrl: "",
       buttons: [
         ...href ? [{ id: "g-go", label: "Take me there", action: "url", value: href, variant: "primary" }] : [],
         { id: "g-exit", label: "Exit", action: "dismiss", variant: href ? "secondary" : "primary" }
@@ -1921,7 +1993,7 @@ function runGuide(guide, options = {}) {
     index = i;
     const step = steps[i];
     const ctx = getCtx();
-    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime6.evaluateRules)(step.targeting, ctx)) {
+    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime7.evaluateRules)(step.targeting, ctx)) {
       const nextIndex = i + direction;
       if (nextIndex >= total) return end("completed");
       if (nextIndex < 0) return;
@@ -2026,7 +2098,7 @@ function runGuide(guide, options = {}) {
 }
 
 // src/checklist.ts
-var import_runtime7 = require("@guidelytech/shared/runtime");
+var import_runtime8 = require("@guidelytech/shared/runtime");
 function renderChecklist(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -2101,7 +2173,7 @@ function renderChecklist(options) {
     bar.setAttribute("aria-valuemax", "100");
     body.textContent = "";
     foot.textContent = "";
-    const complete = (0, import_runtime7.isChecklistComplete)(config, progress);
+    const complete = (0, import_runtime8.isChecklistComplete)(config, progress);
     if (complete) {
       const wrap = doc.createElement("div");
       wrap.className = "g-complete";
@@ -2189,7 +2261,7 @@ function renderChecklist(options) {
 }
 
 // src/survey.ts
-var import_runtime8 = require("@guidelytech/shared/runtime");
+var import_runtime9 = require("@guidelytech/shared/runtime");
 function renderSurvey(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -2381,14 +2453,14 @@ function renderSurvey(options) {
     config.questions.forEach((q) => {
       const el2 = questionEls.get(q.id);
       if (!el2) return;
-      const visible = (0, import_runtime8.isQuestionVisible)(q, answers);
+      const visible = (0, import_runtime9.isQuestionVisible)(q, answers);
       el2.hidden = !visible;
       if (!visible && answers[q.id] !== void 0) delete answers[q.id];
     });
   }
   form.addEventListener("submit", (e) => {
     e.preventDefault();
-    const missing = config.questions.filter((q) => q.required && (0, import_runtime8.isQuestionVisible)(q, answers) && answers[q.id] === void 0);
+    const missing = config.questions.filter((q) => q.required && (0, import_runtime9.isQuestionVisible)(q, answers) && answers[q.id] === void 0);
     if (missing.length) {
       errorEl.textContent = `Please answer: ${missing.map((q) => q.title).join(", ")}`;
       questionEls.get(missing[0].id)?.querySelector("button,textarea")?.focus();
@@ -2437,10 +2509,10 @@ function renderSurvey(options) {
 }
 
 // src/resource-center.ts
-var import_runtime10 = require("@guidelytech/shared/runtime");
+var import_runtime11 = require("@guidelytech/shared/runtime");
 
 // src/help-view.ts
-var import_runtime9 = require("@guidelytech/shared/runtime");
+var import_runtime10 = require("@guidelytech/shared/runtime");
 var SHOW_ME_KINDS = /* @__PURE__ */ new Set(["flow", "modal", "tooltip", "announcement"]);
 function startableGuide(guides, keyOrId) {
   if (!keyOrId || !guides) return null;
@@ -2459,8 +2531,8 @@ function resultRow(doc, icon, title, summary, onOpen, showMe) {
   return row;
 }
 function enhanceShowMe(root, doc, canStart, start) {
-  for (const a of Array.from(root.querySelectorAll(`a[href^="${import_runtime9.SHOW_ME_HREF_PREFIX}"]`))) {
-    const key = (0, import_runtime9.showMeKeyFromHref)(a.getAttribute("href"));
+  for (const a of Array.from(root.querySelectorAll(`a[href^="${import_runtime10.SHOW_ME_HREF_PREFIX}"]`))) {
+    const key = (0, import_runtime10.showMeKeyFromHref)(a.getAttribute("href"));
     const holder = a.closest("p.gd-show-me") ?? a;
     if (!key || !canStart(key)) {
       if (holder !== a) holder.remove();
@@ -2576,10 +2648,10 @@ function createHelpView(options) {
     const data = options.data();
     const member = options.audienceIds?.() ?? [];
     searchWrap.hidden = !!data.modules && !data.modules.includes("search");
-    const sections = (0, import_runtime9.resourceCenterSections)(data.collections, data.articles, member);
+    const sections = (0, import_runtime10.resourceCenterSections)(data.collections, data.articles, member);
     const q = query.trim().toLowerCase();
     if (q) {
-      const walkthroughs = (data.recommended ?? []).filter((g) => (0, import_runtime9.matchesHelpQuery)(g.name, q) && startableGuide(options.guides?.() ?? data.recommended, g.id));
+      const walkthroughs = (data.recommended ?? []).filter((g) => (0, import_runtime10.matchesHelpQuery)(g.name, q) && startableGuide(options.guides?.() ?? data.recommended, g.id));
       if (walkthroughs.length) {
         section(`Walkthroughs (${walkthroughs.length})`);
         for (const g of walkthroughs) body.appendChild(resultRow(doc, "\u25B6", g.name, "Show me, step by step", () => options.onStartGuide?.(g.id)));
@@ -2588,10 +2660,10 @@ function createHelpView(options) {
     body.append(...options.extra?.(q) ?? []);
     if (q) {
       const visible = sections.flatMap((s) => s.articles);
-      const local = visible.filter((a) => (0, import_runtime9.matchesHelpQuery)(`${a.title} ${a.summary}`, q));
+      const local = visible.filter((a) => (0, import_runtime10.matchesHelpQuery)(`${a.title} ${a.summary}`, q));
       const seen = new Set(local.map((a) => a.id));
       const hidden = new Set(data.articles.map((a) => a.id).filter((id) => !visible.some((v) => v.id === id)));
-      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id) && !hidden.has(a.id) && (0, import_runtime9.isArticleListed)(data.collections, a, member))];
+      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id) && !hidden.has(a.id) && (0, import_runtime10.isArticleListed)(data.collections, a, member))];
       section(`Results (${merged.length})`);
       if (!merged.length) body.appendChild(el(doc, "div", "g-rc-empty", "No articles match your search."));
       merged.forEach(articleButton);
@@ -2611,7 +2683,7 @@ function createHelpView(options) {
       },
       announcements: () => {
         if (!data.announcements?.length) return;
-        section(import_runtime9.RC_MODULE_LABELS.announcements);
+        section(import_runtime10.RC_MODULE_LABELS.announcements);
         const seen = data.announcementsSeenAt ? Date.parse(data.announcementsSeenAt) : NaN;
         data.announcements.slice(0, 20).forEach((n) => body.appendChild(announcementItem(n, Number.isNaN(seen) || Date.parse(n.publishedAt) > seen)));
       },
@@ -2673,7 +2745,7 @@ function createHelpView(options) {
         });
       }
     };
-    for (const id of data.modules ?? import_runtime9.RC_MODULE_IDS) renderers[id]?.();
+    for (const id of data.modules ?? import_runtime10.RC_MODULE_IDS) renderers[id]?.();
     if (!body.childNodes.length) body.appendChild(el(doc, "div", "g-rc-empty", "Nothing here yet."));
   }
   function announcementItem(n, unread) {
@@ -2798,10 +2870,10 @@ function renderResourceCenter(options) {
   const badge = el(doc, "span", "g-launcher-badge");
   badge.hidden = true;
   launcher.appendChild(badge);
-  const modules = () => (0, import_runtime10.orderedModules)(config.modules).filter((m) => m.enabled && (!("targeting" in m) || !m.targeting || !options.evaluate || options.evaluate(m.targeting))).map((m) => m.id);
-  const announcements = () => modules().includes("announcements") ? (0, import_runtime10.visibleAnnouncements)(config.announcements, options.audienceIds?.() ?? []) : [];
+  const modules = () => (0, import_runtime11.orderedModules)(config.modules).filter((m) => m.enabled && (!("targeting" in m) || !m.targeting || !options.evaluate || options.evaluate(m.targeting))).map((m) => m.id);
+  const announcements = () => modules().includes("announcements") ? (0, import_runtime11.visibleAnnouncements)(config.announcements, options.audienceIds?.() ?? []) : [];
   const updateBadge = () => {
-    const unread = (0, import_runtime10.unreadAnnouncements)(announcements(), options.announcementsSeenAt?.());
+    const unread = (0, import_runtime11.unreadAnnouncements)(announcements(), options.announcementsSeenAt?.());
     badge.hidden = unread === 0;
     badge.textContent = unread > 9 ? "9+" : String(unread);
     const label = config.launcher.label || config.title;
@@ -2881,6 +2953,10 @@ function renderResourceCenter(options) {
   return {
     el: root,
     open: () => setOpen(true),
+    openArticle(id) {
+      setOpen(true);
+      help.openArticle(id);
+    },
     close: () => setOpen(false),
     toggle: () => setOpen(!open),
     isOpen: () => open,