@guidelytech/guide-runtime 0.5.0 → 0.6.2

package/dist/index.cjs

@@ -32,13 +32,14 @@ __export(src_exports, {
   createScope: () => createScope,
   describeElement: () => describeElement,
   destroyHost: () => destroyHost,
+  enhancePdfViewers: () => enhancePdfViewers,
   ensureHost: () => ensureHost,
   generateSelectors: () => generateSelectors,
   highlightSelectors: () => highlightSelectors,
   isAnchoredStep: () => isAnchoredStep,
-  isChecklistComplete: () => import_runtime5.isChecklistComplete,
+  isChecklistComplete: () => import_runtime6.isChecklistComplete,
   isGuidelyElement: () => isGuidelyElement,
-  isQuestionVisible: () => import_runtime6.isQuestionVisible,
+  isQuestionVisible: () => import_runtime7.isQuestionVisible,
   isStableId: () => isStableId,
   isVisible: () => isVisible,
   normalizeText: () => normalizeText,
@@ -356,7 +357,7 @@ function describeElement(el2) {
 var import_runtime3 = require("@guidelytech/shared/runtime");
 var ALLOWED_TAGS = /* @__PURE__ */ new Set(["p", "br", "strong", "b", "em", "i", "u", "a", "ul", "ol", "li", "img", "h1", "h2", "h3", "h4", "code", "pre", "blockquote", "span", "div", "hr", "button"]);
 var DROP_TAGS = /* @__PURE__ */ new Set(["script", "style", "object", "embed", "form", "input", "textarea", "select", "link", "meta", "base", "template", "svg", "math", "frame", "frameset", "noscript"]);
-var ALLOWED_ATTRS = /* @__PURE__ */ new Set(["href", "src", "alt", "title", "target", "rel", "class", "data-g-action", "data-g-value"]);
+var ALLOWED_ATTRS = /* @__PURE__ */ new Set(["href", "src", "alt", "title", "target", "rel", "class", "width", "height", "data-g-action", "data-g-value"]);
 function isSafeUrl(value, attr, tag) {
   const v = value.trim().replace(/[\u0000-\u001f\s]/g, "").toLowerCase();
   if (!v) return false;
@@ -383,6 +384,7 @@ function sanitizeElement(el2) {
   }
   if (tag === "button") el2.setAttribute("type", "button");
   if (tag === "img") {
+    for (const dim of ["width", "height"]) if (el2.hasAttribute(dim) && !/^\d{1,5}$/.test(el2.getAttribute(dim))) el2.removeAttribute(dim);
     el2.setAttribute("loading", "lazy");
     if (!el2.getAttribute("alt")) el2.setAttribute("alt", "");
   }
@@ -455,6 +457,9 @@ function setSanitizedHtml(el2, html) {
   el2.appendChild(sanitizeToFragment(html, el2.ownerDocument));
 }
 
+// src/pdf-viewer.ts
+var import_runtime4 = require("@guidelytech/shared/runtime");
+
 // src/styles.ts
 var STYLES = `
 :host{all:initial;position:static;display:block;contain:none}
@@ -504,6 +509,35 @@ var STYLES = `
 .g-body video,.g-body iframe{display:block;width:100%;max-width:100%;border:0;border-radius:6px;margin:8px 0;background:#000}
 .g-body video{height:auto;max-height:60vh}
 .g-body iframe{aspect-ratio:16/9;height:auto}
+.g-body .gd-pdf{margin:10px 0;border:1px solid var(--g-border);border-radius:10px;background:var(--g-subtle);overflow:hidden}
+.g-body a.gd-file{display:flex;align-items:center;gap:8px;padding:8px 10px;color:var(--g-text);font-size:13px;font-weight:500;text-decoration:none;min-height:40px;overflow-wrap:anywhere}
+.g-body a.gd-file::before{content:"PDF";flex:none;font-size:9px;font-weight:700;letter-spacing:.04em;line-height:1;color:#fff;background:#e5484d;border-radius:4px;padding:4px 5px}
+.g-body a.gd-file::after{content:"\u2922";margin-left:auto;padding-left:8px;color:var(--g-muted);font-size:15px}
+.g-body a.gd-file:hover::after,.g-body a.gd-file:focus-visible::after{color:var(--g-primary)}
+.g-body a.gd-file:focus-visible{outline:2px solid var(--g-primary);outline-offset:-2px;border-radius:10px}
+.g-body > a.gd-file,.g-body p > a.gd-file{margin:10px 0;border:1px solid var(--g-border);border-radius:10px;background:var(--g-subtle)}
+.g-body > a.gd-file::after,.g-body p > a.gd-file::after,.g-body .gd-pdf:not([data-g-ready]) > a.gd-file::after{content:"\u2197"}
+.g-pdf-viewport{position:relative}
+.g-body .gd-pdf-pages{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding:0 10px 10px;scroll-padding:0 10px}
+.g-body .gd-pdf-pages::-webkit-scrollbar{display:none}
+.g-body .gd-pdf-pages:focus-visible{outline:2px solid var(--g-primary);outline-offset:-2px}
+.g-body .gd-pdf-pages img{flex:0 0 100%;width:100%;height:auto;margin:0;scroll-snap-align:center;background:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,.18);cursor:zoom-in}
+.g-pdf-viewport .gd-pdf-pages{padding:0;scroll-padding:0;margin:0 10px 10px}
+.g-pdf-count{position:absolute;right:18px;bottom:18px;padding:2px 8px;border-radius:999px;background:rgba(17,17,17,.72);color:#fff;font-size:11px;font-weight:500;pointer-events:none;font-variant-numeric:tabular-nums}
+.g-pdf-nav{position:absolute;top:calc(50% - 21px);width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(17,17,17,.6);color:#fff;font:inherit;font-size:20px;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s}
+.g-pdf-prev{left:16px}.g-pdf-next{right:16px}
+.g-pdf-viewport:hover .g-pdf-nav,.g-pdf-nav:focus-visible{opacity:1}
+.g-pdf-nav:disabled,.g-pdf-single .g-pdf-nav,.g-pdf-single .g-pdf-count{display:none}
+.g-pdf-nav:focus-visible{outline:2px solid #fff;outline-offset:1px}
+@media (hover:none){.g-pdf-nav{display:none}}
+.g-pdf-reader{position:fixed;inset:0;z-index:calc(var(--g-z) + 10);display:flex;flex-direction:column;background:#0b0b0d;pointer-events:auto;color:#fff}
+.g-pdf-bar{display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;min-height:56px}
+.g-pdf-title{flex:1;min-width:0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.g-pdf-bar .g-btn{min-height:36px;color:#fff;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
+.g-pdf-close{position:static;color:#fff}
+.g-pdf-close:hover,.g-pdf-close:focus-visible{background:rgba(255,255,255,.14);color:#fff}
+.g-pdf-scroll{position:relative;flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;outline:none}
+.g-pdf-scroll img{display:block;width:100%;max-width:900px;height:auto;background:#fff;border-radius:2px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
 .g-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--g-subtle);padding:1px 4px;border-radius:4px}
 .g-body pre{background:var(--g-subtle);padding:10px;border-radius:6px;overflow:auto}
 .g-body blockquote{margin:6px 0;padding-left:10px;border-left:3px solid var(--g-border);color:var(--g-muted)}
@@ -731,6 +765,135 @@ function createScope(theme, appearance, doc = document) {
   };
 }
 
+// src/pdf-viewer.ts
+function enhancePdfViewers(root, doc = root.ownerDocument) {
+  for (const block of Array.from(root.querySelectorAll(`div.${import_runtime4.PDF_BLOCK_CLASS}`))) {
+    const link = block.querySelector(`a.${import_runtime4.FILE_LINK_CLASS}`);
+    const strip = block.querySelector(`.${import_runtime4.PDF_PAGES_CLASS}`);
+    if (!link || !strip || block.hasAttribute("data-g-ready")) continue;
+    for (const img of Array.from(strip.querySelectorAll("img:not([src])"))) img.remove();
+    const pages = Array.from(strip.querySelectorAll("img"));
+    if (!pages.length) {
+      strip.remove();
+      continue;
+    }
+    block.setAttribute("data-g-ready", "");
+    const name = (link.textContent || "").trim() || "PDF";
+    block.setAttribute("role", "group");
+    block.setAttribute("aria-label", `${name}, ${pages.length} ${pages.length === 1 ? "page" : "pages"}`);
+    link.setAttribute("aria-label", `Read ${name} full screen`);
+    link.addEventListener("click", (e) => {
+      e.preventDefault();
+      openReader(doc, block, link, pages, 0);
+    });
+    const viewport = doc.createElement("div");
+    viewport.className = "g-pdf-viewport";
+    strip.replaceWith(viewport);
+    viewport.appendChild(strip);
+    strip.tabIndex = 0;
+    strip.setAttribute("aria-label", `${name} pages`);
+    const counter = doc.createElement("span");
+    counter.className = "g-pdf-count";
+    counter.setAttribute("aria-live", "polite");
+    const prev = navButton(doc, "prev", "Previous page", "\u2039");
+    const next = navButton(doc, "next", "Next page", "\u203A");
+    viewport.append(prev, next, counter);
+    const stride = () => Math.max(1, pages.length > 1 ? pages[1].offsetLeft - pages[0].offsetLeft : strip.clientWidth);
+    const current2 = () => Math.round(strip.scrollLeft / stride());
+    const go = (i) => strip.scrollTo({ left: Math.max(0, Math.min(pages.length - 1, i)) * stride(), behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    const update = () => {
+      const i = Math.min(pages.length - 1, current2());
+      counter.textContent = `${i + 1} / ${pages.length}`;
+      prev.disabled = i === 0;
+      next.disabled = i >= pages.length - 1;
+    };
+    prev.addEventListener("click", () => go(current2() - 1));
+    next.addEventListener("click", () => go(current2() + 1));
+    strip.addEventListener("scroll", update, { passive: true });
+    strip.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowRight" || e.key === "ArrowLeft") {
+        e.preventDefault();
+        go(current2() + (e.key === "ArrowRight" ? 1 : -1));
+      } else if (e.key === "Enter") openReader(doc, block, link, pages, current2());
+    });
+    pages.forEach((img, i) => img.addEventListener("click", () => openReader(doc, block, link, pages, i)));
+    if (pages.length === 1) viewport.classList.add("g-pdf-single");
+    update();
+  }
+}
+function navButton(doc, cls, label, text) {
+  const b = doc.createElement("button");
+  b.type = "button";
+  b.className = `g-pdf-nav g-pdf-${cls}`;
+  b.setAttribute("aria-label", label);
+  b.textContent = text;
+  return b;
+}
+function openReader(doc, block, link, pages, start) {
+  const host = block.closest(".g-scope") ?? doc.body;
+  const returnFocus = block.getRootNode().activeElement;
+  const name = (link.textContent || "").trim() || "PDF";
+  const reader = doc.createElement("div");
+  reader.className = "g-pdf-reader";
+  reader.setAttribute("role", "dialog");
+  reader.setAttribute("aria-modal", "true");
+  reader.setAttribute("aria-label", name);
+  const bar = doc.createElement("div");
+  bar.className = "g-pdf-bar";
+  const title = doc.createElement("span");
+  title.className = "g-pdf-title";
+  title.textContent = name;
+  const original = doc.createElement("a");
+  original.className = "g-btn g-btn-secondary";
+  original.href = link.href;
+  original.target = "_blank";
+  original.rel = "noopener noreferrer";
+  original.textContent = "Open PDF \u2197";
+  const close = doc.createElement("button");
+  close.type = "button";
+  close.className = "g-close g-pdf-close";
+  close.setAttribute("aria-label", "Close");
+  close.textContent = "\xD7";
+  bar.append(title, original, close);
+  const scroller = doc.createElement("div");
+  scroller.className = "g-pdf-scroll";
+  scroller.tabIndex = 0;
+  for (const page of pages) {
+    const img = doc.createElement("img");
+    img.src = page.src;
+    img.alt = page.alt;
+    img.decoding = "async";
+    for (const dim of ["width", "height"]) if (page.hasAttribute(dim)) img.setAttribute(dim, page.getAttribute(dim));
+    scroller.appendChild(img);
+  }
+  reader.append(bar, scroller);
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      done();
+    } else if (e.key === "Tab") {
+      const items = [original, close, scroller];
+      const at = items.indexOf(reader.getRootNode().activeElement);
+      e.preventDefault();
+      items[(at + (e.shiftKey ? items.length - 1 : 1)) % items.length].focus();
+    }
+  };
+  const done = () => {
+    reader.remove();
+    returnFocus?.focus?.({ preventScroll: true });
+  };
+  close.addEventListener("click", done);
+  reader.addEventListener("keydown", onKey);
+  host.appendChild(reader);
+  close.focus();
+  const target = scroller.children[start];
+  if (target && start > 0) {
+    const land = () => scroller.scrollTop = target.offsetTop - 12;
+    requestAnimationFrame(land);
+    if (!target.hasAttribute("height")) for (const img of Array.from(scroller.children).slice(0, start)) img.addEventListener("load", land, { once: true });
+  }
+}
+
 // src/position.ts
 var import_dom = require("@floating-ui/dom");
 function anchor(reference, floating, options = {}) {
@@ -1197,7 +1360,7 @@ function isAnchoredStep(step) {
 }
 
 // src/controller.ts
-var import_runtime4 = require("@guidelytech/shared/runtime");
+var import_runtime5 = require("@guidelytech/shared/runtime");
 function noop() {
 }
 function runGuide(guide, options = {}) {
@@ -1279,7 +1442,7 @@ function runGuide(guide, options = {}) {
     const ctx = getCtx();
     if (step && ctx) {
       for (const branch of step.branches) {
-        if ((0, import_runtime4.evaluateRules)(branch.when, ctx)) {
+        if ((0, import_runtime5.evaluateRules)(branch.when, ctx)) {
           target = steps.findIndex((s) => s.id === branch.goTo);
           if (target >= 0) break;
         }
@@ -1433,7 +1596,7 @@ function runGuide(guide, options = {}) {
     index = i;
     const step = steps[i];
     const ctx = getCtx();
-    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime4.evaluateRules)(step.targeting, ctx)) {
+    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime5.evaluateRules)(step.targeting, ctx)) {
       const nextIndex = i + direction;
       if (nextIndex >= total) return end("completed");
       if (nextIndex < 0) return;
@@ -1527,7 +1690,7 @@ function runGuide(guide, options = {}) {
 }
 
 // src/checklist.ts
-var import_runtime5 = require("@guidelytech/shared/runtime");
+var import_runtime6 = require("@guidelytech/shared/runtime");
 function renderChecklist(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -1602,7 +1765,7 @@ function renderChecklist(options) {
     bar.setAttribute("aria-valuemax", "100");
     body.textContent = "";
     foot.textContent = "";
-    const complete = (0, import_runtime5.isChecklistComplete)(config, progress);
+    const complete = (0, import_runtime6.isChecklistComplete)(config, progress);
     if (complete) {
       const wrap = doc.createElement("div");
       wrap.className = "g-complete";
@@ -1690,7 +1853,7 @@ function renderChecklist(options) {
 }
 
 // src/survey.ts
-var import_runtime6 = require("@guidelytech/shared/runtime");
+var import_runtime7 = require("@guidelytech/shared/runtime");
 function renderSurvey(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -1882,14 +2045,14 @@ function renderSurvey(options) {
     config.questions.forEach((q) => {
       const el2 = questionEls.get(q.id);
       if (!el2) return;
-      const visible = (0, import_runtime6.isQuestionVisible)(q, answers);
+      const visible = (0, import_runtime7.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_runtime6.isQuestionVisible)(q, answers) && answers[q.id] === void 0);
+    const missing = config.questions.filter((q) => q.required && (0, import_runtime7.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();
@@ -1938,7 +2101,7 @@ function renderSurvey(options) {
 }
 
 // src/help-view.ts
-var import_runtime7 = require("@guidelytech/shared/runtime");
+var import_runtime8 = require("@guidelytech/shared/runtime");
 function el(doc, tag, cls, text) {
   const e = doc.createElement(tag);
   if (cls) e.className = cls;
@@ -2010,8 +2173,10 @@ function createHelpView(options) {
     const title = el(doc, "h3", "g-title", article.title);
     const content = el(doc, "div", "g-body");
     if (loading) content.appendChild(el(doc, "div", "g-rc-empty", "Loading\u2026"));
-    else if (article.body) setSanitizedHtml(content, article.body);
-    else content.appendChild(el(doc, "div", "g-rc-empty", "This article couldn't be loaded."));
+    else if (article.body) {
+      setSanitizedHtml(content, article.body);
+      enhancePdfViewers(content, doc);
+    } else content.appendChild(el(doc, "div", "g-rc-empty", "This article couldn't be loaded."));
     wrap.append(back, title, content);
     body.appendChild(wrap);
     back.focus?.({ preventScroll: true });
@@ -2031,19 +2196,29 @@ function createHelpView(options) {
     if (active) return renderArticle(active);
     const data = options.data();
     const member = options.audienceIds?.() ?? [];
-    const sections = (0, import_runtime7.resourceCenterSections)(data.collections, data.articles, member);
+    const sections = (0, import_runtime8.resourceCenterSections)(data.collections, data.articles, member);
     const q = query.trim().toLowerCase();
+    body.append(...options.extra?.(q) ?? []);
     if (q) {
       const visible = sections.flatMap((s) => s.articles);
       const local = visible.filter((a) => a.title.toLowerCase().includes(q) || a.summary.toLowerCase().includes(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_runtime7.isArticleListed)(data.collections, a, member))];
+      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id) && !hidden.has(a.id) && (0, import_runtime8.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);
       return;
     }
+    if (data.suggested?.items.length) {
+      section(data.suggested.title);
+      const glyph = { guide: "\u25B6", howto: "\u2630", article: "\u{1F4C4}" };
+      data.suggested.items.forEach((item) => {
+        const b = listItem(doc, glyph[item.kind], item.title, item.summary);
+        b.addEventListener("click", item.run);
+        body.appendChild(b);
+      });
+    }
     if (data.recommended?.length) {
       section("Recommended");
       data.recommended.forEach((g) => {
@@ -2419,6 +2594,7 @@ function highlightSelectors(selectors, options = {}) {
   createScope,
   describeElement,
   destroyHost,
+  enhancePdfViewers,
   ensureHost,
   generateSelectors,
   highlightSelectors,