@guidelytech/guide-runtime 0.1.0 → 0.2.1

package/dist/index.cjs

@@ -20,8 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 
 // src/index.ts
-var index_exports = {};
-__export(index_exports, {
+var src_exports = {};
+__export(src_exports, {
   DEFAULT_THEME: () => DEFAULT_THEME,
   HOST_ID: () => HOST_ID2,
   STYLES: () => STYLES,
@@ -68,7 +68,7 @@ __export(index_exports, {
   urlMatches: () => urlMatches,
   waitForTarget: () => waitForTarget
 });
-module.exports = __toCommonJS(index_exports);
+module.exports = __toCommonJS(src_exports);
 
 // src/selectors.ts
 var import_runtime = require("@guidelytech/shared/runtime");
@@ -506,6 +506,7 @@ var STYLES = `
 .g-panel-title{margin:0;font-size:16px;font-weight:600}
 .g-panel-sub{margin:4px 0 0;font-size:12px;color:var(--g-muted)}
 .g-panel-body{overflow:auto;padding:8px 0;flex:1}
+.g-help{display:flex;flex-direction:column;min-height:0;flex:1}
 .g-bar{height:6px;border-radius:999px;background:var(--g-subtle);overflow:hidden;margin-top:10px}
 .g-bar > span{display:block;height:100%;background:var(--g-primary);transition:width .3s}
 .g-task{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 20px;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:44px}
@@ -782,6 +783,7 @@ function trackRect(el2, cb) {
 }
 
 // src/render.ts
+var import_shared = require("@guidelytech/shared");
 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}`;
@@ -791,8 +793,8 @@ function h(doc, tag, className, text) {
   if (text != null) el2.textContent = text;
   return el2;
 }
-function buildButtons(doc, step, onButton) {
-  return step.buttons.map((b) => {
+function buildButtons(doc, step, canGoBack, onButton) {
+  return (0, import_shared.visibleButtons)(step, canGoBack).map((b) => {
     const btn = h(doc, "button", `g-btn g-btn-${b.variant}`, b.label);
     btn.type = "button";
     btn.setAttribute("data-action", b.action);
@@ -839,7 +841,7 @@ function buildCard(doc, opts, extraClass) {
     setSanitizedHtml(b, step.body);
     inner.appendChild(b);
   }
-  const buttons = buildButtons(doc, step, opts.onButton);
+  const buttons = buildButtons(doc, step, opts.canGoBack ?? opts.index > 0, opts.onButton);
   if (buttons.length || step.showProgress && opts.total > 1) {
     const footer = h(doc, "div", "g-footer");
     if (step.showProgress && opts.total > 1) footer.appendChild(h(doc, "span", "g-progress", `${opts.index + 1} of ${opts.total}`));
@@ -1079,7 +1081,7 @@ function renderBanner(doc, opts) {
   setSanitizedHtml(text, step.body);
   body.appendChild(text);
   banner.appendChild(body);
-  buildButtons(doc, step, opts.onButton).forEach((b) => banner.appendChild(b));
+  buildButtons(doc, step, opts.canGoBack ?? opts.index > 0, opts.onButton).forEach((b) => banner.appendChild(b));
   if (step.showClose) {
     const close = h(doc, "button", "g-close", "\xD7");
     close.type = "button";
@@ -1354,6 +1356,7 @@ function runGuide(guide, options = {}) {
         step,
         index,
         total,
+        canGoBack: history.length > 0 || index > 0,
         target,
         asModal,
         onButton: handleButton,
@@ -1918,14 +1921,14 @@ function renderSurvey(options) {
   };
 }
 
-// src/resource-center.ts
+// src/help-view.ts
 function el(doc, tag, cls, text) {
   const e = doc.createElement(tag);
   if (cls) e.className = cls;
   if (text != null) e.textContent = text;
   return e;
 }
-function item(doc, icon, title, summary) {
+function listItem(doc, icon, title, summary) {
   const b = el(doc, "button", "g-rc-item");
   b.type = "button";
   const i = el(doc, "span", "g-rc-icon", icon);
@@ -1936,38 +1939,14 @@ function item(doc, icon, title, summary) {
   b.append(i, text);
   return b;
 }
-function renderResourceCenter(options) {
-  const { scope, config } = options;
-  const doc = scope.ownerDocument;
-  const guides = options.guides ?? [];
-  let open = false;
+function createHelpView(options) {
+  const { doc } = options;
   let query = "";
   let serverResults = [];
   let searchSeq = 0;
-  let activeArticle = null;
-  const pos = `g-pos-${config.launcher.position}`;
-  const root = el(doc, "div", "g-resource-center");
-  const launcher = el(doc, "button", `g-launcher ${pos}`);
-  launcher.type = "button";
-  launcher.setAttribute("aria-expanded", "false");
-  if (config.launcher.showIcon) {
-    const icon = el(doc, "span", "", "?");
-    icon.setAttribute("aria-hidden", "true");
-    launcher.appendChild(icon);
-  }
-  launcher.appendChild(el(doc, "span", "", config.launcher.label || config.title));
-  launcher.setAttribute("aria-label", config.launcher.label || config.title);
-  if (options.hideLauncher) launcher.hidden = true;
-  const panel = el(doc, "div", `g-panel ${pos}`);
-  panel.setAttribute("role", "dialog");
-  panel.setAttribute("aria-label", config.title);
-  panel.hidden = true;
-  const head = el(doc, "div", "g-panel-head");
-  head.appendChild(el(doc, "h2", "g-panel-title", config.title));
-  const close = el(doc, "button", "g-close", "\xD7");
-  close.type = "button";
-  close.setAttribute("aria-label", "Close");
-  head.appendChild(close);
+  let openSeq = 0;
+  let active = null;
+  const root = el(doc, "div", "g-help");
   const searchWrap = el(doc, "div", "g-rc-search");
   const input = el(doc, "input", "g-input");
   input.type = "search";
@@ -1975,94 +1954,103 @@ function renderResourceCenter(options) {
   input.setAttribute("aria-label", "Search help articles");
   searchWrap.appendChild(input);
   const body = el(doc, "div", "g-panel-body");
-  panel.append(head, searchWrap, body);
-  root.append(launcher, panel);
-  scope.appendChild(root);
+  root.append(searchWrap, body);
+  const hasBody = (a) => typeof a.body === "string" && !a.bodyOmitted;
   const openArticle = (article) => {
     if (article.externalUrl) {
       window.open(article.externalUrl, "_blank", "noopener,noreferrer");
-      options.onArticleView?.(article);
+      if (hasBody(article)) options.onArticleView?.(article);
       return;
     }
-    activeArticle = article;
-    options.onArticleView?.(article);
-    renderBody();
+    const seq = ++openSeq;
+    if (hasBody(article) || !options.loadArticle) {
+      active = { article, loading: false };
+      if (hasBody(article)) options.onArticleView?.(article);
+      return render();
+    }
+    active = { article, loading: true };
+    render();
+    options.loadArticle(article.id).then((full) => {
+      if (seq !== openSeq || !active) return;
+      active = { article: full ?? { ...article, body: "" }, loading: false };
+      if (full) options.onArticleView?.(full);
+      render();
+    }).catch(() => {
+      if (seq !== openSeq || !active) return;
+      active = { article: { ...article, body: "" }, loading: false };
+      render();
+    });
   };
-  const renderArticle = (article) => {
+  const renderArticle = ({ article, loading }) => {
     const wrap = el(doc, "div", "g-rc-article");
     const back = el(doc, "button", "g-btn g-btn-link g-rc-back", "\u2190 Back");
     back.type = "button";
     back.addEventListener("click", () => {
-      activeArticle = null;
-      renderBody();
+      openSeq++;
+      active = null;
+      render();
     });
     const title = el(doc, "h3", "g-title", article.title);
     const content = el(doc, "div", "g-body");
-    setSanitizedHtml(content, article.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."));
     wrap.append(back, title, content);
     body.appendChild(wrap);
     back.focus?.({ preventScroll: true });
   };
   const section = (label) => body.appendChild(el(doc, "div", "g-rc-section", label));
-  const renderBody = () => {
+  const articleButton = (a) => {
+    const b = listItem(doc, "\u{1F4C4}", a.title, a.summary);
+    b.addEventListener("click", () => openArticle(a));
+    body.appendChild(b);
+  };
+  function render() {
     body.textContent = "";
-    if (activeArticle) return renderArticle(activeArticle);
+    if (active) return renderArticle(active);
+    const data = options.data();
     const q = query.trim().toLowerCase();
     if (q) {
-      const local = config.articles.filter((a) => a.title.toLowerCase().includes(q) || a.summary.toLowerCase().includes(q));
+      const local = data.articles.filter((a) => a.title.toLowerCase().includes(q) || a.summary.toLowerCase().includes(q));
       const seen = new Set(local.map((a) => a.id));
       const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id))];
       section(`Results (${merged.length})`);
       if (!merged.length) body.appendChild(el(doc, "div", "g-rc-empty", "No articles match your search."));
-      merged.forEach((a) => {
-        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
-        b.addEventListener("click", () => openArticle(a));
-        body.appendChild(b);
-      });
+      merged.forEach(articleButton);
       return;
     }
-    const recommended = config.recommendedGuideIds.map((id) => guides.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
-    if (recommended.length) {
+    if (data.recommended?.length) {
       section("Recommended");
-      recommended.forEach((g) => {
-        const b = item(doc, "\u25B6", g.name, "Start guide");
+      data.recommended.forEach((g) => {
+        const b = listItem(doc, "\u25B6", g.name, "Start guide");
         b.addEventListener("click", () => options.onStartGuide?.(g.id));
         body.appendChild(b);
       });
     }
-    const checklists = config.checklistGuideIds.map((id) => guides.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
-    if (checklists.length) {
+    if (data.checklists?.length) {
       section("Checklists");
-      checklists.forEach((g) => {
-        const b = item(doc, "\u2611", g.name, "Open checklist");
+      data.checklists.forEach((g) => {
+        const b = listItem(doc, "\u2611", g.name, "Open checklist");
         b.addEventListener("click", () => options.onOpenChecklist?.(g.id));
         body.appendChild(b);
       });
     }
-    const collections = [...config.collections].sort((a, b) => a.order - b.order);
-    const uncollected = config.articles.filter((a) => !a.collectionId || !collections.some((c) => c.id === a.collectionId));
+    const collections = [...data.collections].sort((a, b) => a.order - b.order);
+    const uncollected = data.articles.filter((a) => !a.collectionId || !collections.some((c) => c.id === a.collectionId));
     collections.forEach((c) => {
-      const articles = config.articles.filter((a) => a.collectionId === c.id);
+      const articles = data.articles.filter((a) => a.collectionId === c.id);
       if (!articles.length) return;
       section(c.name);
-      articles.forEach((a) => {
-        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
-        b.addEventListener("click", () => openArticle(a));
-        body.appendChild(b);
-      });
+      articles.forEach(articleButton);
     });
     if (uncollected.length) {
       section("Articles");
-      uncollected.forEach((a) => {
-        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
-        b.addEventListener("click", () => openArticle(a));
-        body.appendChild(b);
-      });
+      uncollected.forEach(articleButton);
     }
-    if (config.faqs.length) {
+    if (data.faqs?.length) {
       section("FAQ");
-      config.faqs.forEach((f) => {
-        const b = item(doc, "?", f.question);
+      data.faqs.forEach((f) => {
+        const b = listItem(doc, "?", f.question);
         b.setAttribute("aria-expanded", "false");
         const a = el(doc, "div", "g-faq-a");
         setSanitizedHtml(a, f.answer);
@@ -2074,9 +2062,9 @@ function renderResourceCenter(options) {
         body.append(b, a);
       });
     }
-    if (config.links.length) {
+    if (data.links?.length) {
       section("Links");
-      config.links.forEach((l) => {
+      data.links.forEach((l) => {
         const a = el(doc, "a", "g-rc-item");
         a.href = l.url;
         a.target = "_blank";
@@ -2088,12 +2076,13 @@ function renderResourceCenter(options) {
       });
     }
     if (!body.childNodes.length) body.appendChild(el(doc, "div", "g-rc-empty", "Nothing here yet."));
-  };
+  }
   let debounce = null;
-  input.addEventListener("input", () => {
+  const onInput = () => {
     query = input.value;
-    activeArticle = null;
-    renderBody();
+    openSeq++;
+    active = null;
+    render();
     if (debounce) clearTimeout(debounce);
     if (!options.search || !query.trim()) {
       serverResults = [];
@@ -2104,22 +2093,92 @@ function renderResourceCenter(options) {
       options.search?.(query.trim()).then((results) => {
         if (seq !== searchSeq) return;
         serverResults = Array.isArray(results) ? results : [];
-        renderBody();
+        render();
       }).catch(() => {
       });
     }, 250);
+  };
+  input.addEventListener("input", onInput);
+  return {
+    el: root,
+    render,
+    reset() {
+      openSeq++;
+      active = null;
+      query = "";
+      input.value = "";
+      serverResults = [];
+    },
+    openArticle(id) {
+      const listed = options.data().articles.find((a) => a.id === id) ?? { id, slug: id, title: "Article", summary: "", updatedAt: "", bodyOmitted: true };
+      openArticle(listed);
+    },
+    focusSearch: () => input.focus?.({ preventScroll: true }),
+    setQuery(q) {
+      input.value = q;
+      onInput();
+    },
+    destroy() {
+      if (debounce) clearTimeout(debounce);
+      input.removeEventListener("input", onInput);
+      root.remove();
+    }
+  };
+}
+
+// src/resource-center.ts
+function renderResourceCenter(options) {
+  const { scope, config } = options;
+  const doc = scope.ownerDocument;
+  const guides = options.guides ?? [];
+  let open = false;
+  const pos = `g-pos-${config.launcher.position}`;
+  const byId = (ids) => ids.map((id) => guides.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
+  const root = el(doc, "div", "g-resource-center");
+  const launcher = el(doc, "button", `g-launcher ${pos}`);
+  launcher.type = "button";
+  launcher.setAttribute("aria-expanded", "false");
+  if (config.launcher.showIcon) {
+    const icon = el(doc, "span", "", "?");
+    icon.setAttribute("aria-hidden", "true");
+    launcher.appendChild(icon);
+  }
+  launcher.appendChild(el(doc, "span", "", config.launcher.label || config.title));
+  launcher.setAttribute("aria-label", config.launcher.label || config.title);
+  if (options.hideLauncher) launcher.hidden = true;
+  const panel = el(doc, "div", `g-panel ${pos}`);
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", config.title);
+  panel.hidden = true;
+  const head = el(doc, "div", "g-panel-head");
+  head.appendChild(el(doc, "h2", "g-panel-title", config.title));
+  const close = el(doc, "button", "g-close", "\xD7");
+  close.type = "button";
+  close.setAttribute("aria-label", "Close");
+  head.appendChild(close);
+  const help = createHelpView({
+    doc,
+    data: () => ({ collections: config.collections, articles: config.articles, recommended: byId(config.recommendedGuideIds), checklists: byId(config.checklistGuideIds), faqs: config.faqs, links: config.links }),
+    search: options.search,
+    loadArticle: options.loadArticle,
+    onStartGuide: options.onStartGuide,
+    onOpenChecklist: options.onOpenChecklist,
+    onArticleView: options.onArticleView
   });
+  panel.append(head, help.el);
+  root.append(launcher, panel);
+  scope.appendChild(root);
   const setOpen = (v) => {
     if (open === v) return;
     open = v;
     panel.hidden = !v;
     launcher.setAttribute("aria-expanded", String(v));
     if (v) {
-      renderBody();
-      input.focus?.({ preventScroll: true });
+      help.render();
+      help.focusSearch();
       options.onOpen?.();
     } else {
-      activeArticle = null;
+      help.reset();
       options.onClose?.();
     }
   };
@@ -2140,7 +2199,7 @@ function renderResourceCenter(options) {
     toggle: () => setOpen(!open),
     isOpen: () => open,
     destroy() {
-      if (debounce) clearTimeout(debounce);
+      help.destroy();
       panel.removeEventListener("keydown", onKey);
       root.remove();
     }