@guidelytech/react-native 0.4.1 → 0.5.0

package/dist/index.cjs

@@ -54,7 +54,7 @@ module.exports = __toCommonJS(index_exports);
 var import_react8 = require("react");
 var import_react_native11 = require("react-native");
 
-// ../shared/dist/chunk-QUKMOTT4.js
+// ../shared/dist/chunk-5IQVBZO6.js
 function fnv1a(input) {
   let h = 2166136261;
   for (let i = 0; i < input.length; i++) {
@@ -358,6 +358,148 @@ function sanitizeProperties(props) {
   return out;
 }
 var SOURCEMAP_MAX_FILE_BYTES = 25 * 1024 * 1024;
+var MEDIA_IMAGE_MAX_BYTES = 10 * 1024 * 1024;
+var MEDIA_VIDEO_MAX_BYTES = 200 * 1024 * 1024;
+var YOUTUBE_ID = /^[A-Za-z0-9_-]{11}$/;
+var VIMEO_ID = /^\d{1,12}$/;
+var VIMEO_HASH = /^[0-9a-f]{6,20}$/i;
+var LOOM_ID = /^[0-9a-f]{32}$/i;
+var WISTIA_ID = /^[a-z0-9]{10}$/i;
+function parseUrl(input) {
+  const s = input.trim();
+  if (!s) return null;
+  try {
+    const u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(s) ? s : `https://${s}`);
+    if (u.protocol !== "https:" && u.protocol !== "http:") return null;
+    if (u.username || u.password || u.port && u.port !== "443" && u.port !== "80") return null;
+    return u;
+  } catch {
+    return null;
+  }
+}
+function parseStart(v) {
+  if (!v) return 0;
+  if (/^\d+$/.test(v)) return Math.min(Number(v), 86400);
+  const m = /^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/.exec(v);
+  if (!m || !m[0]) return 0;
+  return Math.min(Number(m[1] ?? 0) * 3600 + Number(m[2] ?? 0) * 60 + Number(m[3] ?? 0), 86400);
+}
+function youtube(id, start) {
+  if (!YOUTUBE_ID.test(id)) return null;
+  return {
+    provider: "youtube",
+    src: `https://www.youtube-nocookie.com/embed/${id}${start ? `?start=${start}` : ""}`,
+    watchUrl: `https://www.youtube.com/watch?v=${id}${start ? `&t=${start}s` : ""}`,
+    title: "YouTube video"
+  };
+}
+function vimeo(id, hash) {
+  if (!VIMEO_ID.test(id) || hash !== null && !VIMEO_HASH.test(hash)) return null;
+  const h = hash ? hash.toLowerCase() : null;
+  return { provider: "vimeo", src: `https://player.vimeo.com/video/${id}${h ? `?h=${h}` : ""}`, watchUrl: `https://vimeo.com/${id}${h ? `/${h}` : ""}`, title: "Vimeo video" };
+}
+function toEmbedUrl(input) {
+  const u = parseUrl(input);
+  if (!u) return null;
+  const host = u.hostname.toLowerCase().replace(/^www\./, "");
+  const parts = u.pathname.split("/").filter(Boolean);
+  switch (host) {
+    case "youtube.com":
+    case "m.youtube.com":
+    case "youtube-nocookie.com": {
+      const start = parseStart(u.searchParams.get("start") ?? u.searchParams.get("t"));
+      if (parts[0] === "watch" && parts.length === 1) return youtube(u.searchParams.get("v") ?? "", start);
+      if ((parts[0] === "embed" || parts[0] === "shorts" || parts[0] === "live") && parts.length === 2) return youtube(parts[1], start);
+      return null;
+    }
+    case "youtu.be":
+      return parts.length === 1 ? youtube(parts[0], parseStart(u.searchParams.get("t") ?? u.searchParams.get("start"))) : null;
+    case "vimeo.com":
+      if (parts.length === 1) return vimeo(parts[0], null);
+      if (parts.length === 2 && VIMEO_ID.test(parts[0])) return vimeo(parts[0], parts[1]);
+      return null;
+    case "player.vimeo.com":
+      return parts[0] === "video" && parts.length === 2 ? vimeo(parts[1], u.searchParams.get("h")) : null;
+    case "loom.com":
+      if ((parts[0] === "share" || parts[0] === "embed") && parts.length === 2 && LOOM_ID.test(parts[1])) {
+        const id = parts[1].toLowerCase();
+        return { provider: "loom", src: `https://www.loom.com/embed/${id}`, watchUrl: `https://www.loom.com/share/${id}`, title: "Loom video" };
+      }
+      return null;
+    default: {
+      let id;
+      if (host === "fast.wistia.net" || host === "fast.wistia.com") id = parts[0] === "embed" && parts[1] === "iframe" && parts.length === 3 ? parts[2] : void 0;
+      else if (host === "wi.st" || host === "wistia.com" || /^[a-z0-9-]+\.wistia\.com$/.test(host)) id = parts[0] === "medias" && parts.length === 2 ? parts[1] : void 0;
+      if (!id || !WISTIA_ID.test(id)) return null;
+      return { provider: "wistia", src: `https://fast.wistia.net/embed/iframe/${id}`, watchUrl: `https://fast.wistia.net/embed/iframe/${id}`, title: "Wistia video" };
+    }
+  }
+}
+function isAllowedEmbedSrc(src) {
+  if (!src) return false;
+  return toEmbedUrl(src)?.src === src;
+}
+function isSafeMediaUrl(url) {
+  if (!url) return false;
+  try {
+    const u = new URL(url);
+    return (u.protocol === "https:" || u.protocol === "http:") && !u.username && !u.password;
+  } catch {
+    return false;
+  }
+}
+var MAX_COLLECTION_DEPTH = 3;
+function matchesAudiences(required, member) {
+  if (!required || required.length === 0) return true;
+  if (!member) return false;
+  const has2 = member instanceof Set ? (id) => member.has(id) : (id) => member.includes(id);
+  return required.some(has2);
+}
+function resourceCenterSections(collections, articles, member) {
+  const byId = new Map(collections.map((c) => [c.id, c]));
+  const children = /* @__PURE__ */ new Map();
+  for (const c of collections) {
+    const parent = c.parentId && c.parentId !== c.id && byId.has(c.parentId) ? c.parentId : null;
+    const list = children.get(parent) ?? [];
+    list.push(c);
+    children.set(parent, list);
+  }
+  for (const list of children.values()) list.sort((a, b) => a.order - b.order || a.name.localeCompare(b.name));
+  const direct = /* @__PURE__ */ new Map();
+  const uncategorized = [];
+  for (const a of articles) {
+    if (!matchesAudiences(a.audienceIds, member)) continue;
+    if (a.collectionId && byId.has(a.collectionId)) {
+      const list = direct.get(a.collectionId) ?? [];
+      list.push(a);
+      direct.set(a.collectionId, list);
+    } else uncategorized.push(a);
+  }
+  const sections = [];
+  const seen = /* @__PURE__ */ new Set();
+  const visit = (c, path) => {
+    if (seen.has(c.id)) return;
+    seen.add(c.id);
+    if (!matchesAudiences(c.audienceIds, member)) return;
+    const here = [...path, c.name];
+    const list = direct.get(c.id);
+    if (list?.length) sections.push({ collection: c, path: here, depth: here.length - 1, articles: list });
+    for (const child of children.get(c.id) ?? []) visit(child, here);
+  };
+  for (const root of children.get(null) ?? []) visit(root, []);
+  if (uncategorized.length) sections.push({ collection: null, path: [], depth: 0, articles: uncategorized });
+  return sections;
+}
+function isArticleListed(collections, article, member) {
+  if (!matchesAudiences(article.audienceIds, member)) return false;
+  const byId = new Map(collections.map((c) => [c.id, c]));
+  let cur = article.collectionId ? byId.get(article.collectionId) : void 0;
+  for (let guard = 0; cur && guard <= MAX_COLLECTION_DEPTH * 4; guard++) {
+    if (!matchesAudiences(cur.audienceIds, member)) return false;
+    cur = cur.parentId ? byId.get(cur.parentId) : void 0;
+  }
+  return true;
+}
 
 // ../sdk-core/dist/chunk-GJT7CFAC.js
 var __defProp2 = Object.defineProperty;
@@ -1612,7 +1754,7 @@ var PersistentStore = class {
 
 // src/core/client.ts
 var SDK_NAME = "@guidelytech/react-native";
-var SDK_VERSION = "0.4.1";
+var SDK_VERSION = "0.5.0";
 var DEFAULT_API_URL = "https://guidelytech.com";
 var PAGE_SCOPED = /* @__PURE__ */ new Set(["page_load", "url_match", "element_click", "element_visible", "delay"]);
 var nowIso = () => (/* @__PURE__ */ new Date()).toISOString();
@@ -2477,6 +2619,10 @@ var GuidelyClient = class {
     if (this.activeSurvey?.guide.id !== guideId) return;
     this.finishSurvey(this.surveyView?.submitted ? "submitted" : "dismissed");
   }
+  /** The visitor's audiences (from the last identify), for audience-targeted help articles. */
+  getAudienceIds() {
+    return this.state.audienceIds;
+  }
   getResourceCenter() {
     const rc = this.config?.resourceCenter;
     return rc && rc.enabled ? rc : null;
@@ -2814,7 +2960,8 @@ function decodeEntities(s) {
   });
 }
 var BLOCK_TAGS = /* @__PURE__ */ new Set(["p", "div", "section", "article", "header", "footer", "h1", "h2", "h3", "h4", "h5", "h6", "li", "blockquote", "ul", "ol", "table", "tr", "pre"]);
-var SKIP_TAGS = /* @__PURE__ */ new Set(["script", "style", "head", "title", "svg", "template"]);
+var SKIP_TAGS = /* @__PURE__ */ new Set(["script", "style", "head", "title", "svg", "template", "iframe", "video"]);
+var PROVIDER_LABEL = { youtube: "Watch on YouTube", vimeo: "Watch on Vimeo", loom: "Watch on Loom", wistia: "Watch video" };
 function attr(attrs, name) {
   const m = attrs.match(new RegExp(`\\b${name}\\s*=\\s*("([^"]*)"|'([^']*)'|([^\\s>]+))`, "i"));
   return m ? decodeEntities(m[2] ?? m[3] ?? m[4] ?? "") : void 0;
@@ -2826,6 +2973,10 @@ function parseHtml(html) {
   const lists = [];
   let current = null;
   let skipping = null;
+  const media = (block) => {
+    flush();
+    blocks.push({ level: 1, runs: [], ...block });
+  };
   const flush = () => {
     if (current) {
       const runs = current.runs;
@@ -2873,7 +3024,16 @@ function parseHtml(html) {
       continue;
     }
     if (SKIP_TAGS.has(tag)) {
-      if (!closing && !token.endsWith("/>")) skipping = tag;
+      if (closing) continue;
+      if (tag === "iframe") {
+        const src = attr(attrs, "src");
+        const embed = isAllowedEmbedSrc(src) ? toEmbedUrl(src) : null;
+        if (embed) media({ kind: "video", href: embed.watchUrl, alt: PROVIDER_LABEL[embed.provider] });
+      } else if (tag === "video") {
+        const src = attr(attrs, "src");
+        if (isSafeMediaUrl(src)) media({ kind: "video", href: src, alt: "Play video" });
+      }
+      if (!token.endsWith("/>")) skipping = tag;
       continue;
     }
     if (closing) {
@@ -2934,8 +3094,13 @@ function parseHtml(html) {
       default:
         if (BLOCK_TAGS.has(tag)) open("paragraph");
         else if (tag === "img") {
-          const alt = attr(attrs, "alt");
-          if (alt) push(alt);
+          const src = attr(attrs, "src") ?? "";
+          const alt = attr(attrs, "alt") ?? "";
+          if (isSafeMediaUrl(src) || /^data:image\//i.test(src)) {
+            const w = Number(attr(attrs, "width"));
+            const h = Number(attr(attrs, "height"));
+            media({ kind: "image", src, alt, ...w > 0 && h > 0 ? { width: w, height: h } : {} });
+          } else if (alt) push(alt);
         }
     }
   }
@@ -2943,7 +3108,7 @@ function parseHtml(html) {
   return blocks;
 }
 function htmlToText(html) {
-  return parseHtml(html).map((b) => (b.marker ? `${b.marker} ` : "") + b.runs.map((r) => r.text).join("")).join("\n");
+  return parseHtml(html).map((b) => b.kind === "image" || b.kind === "video" ? b.alt ?? "" : (b.marker ? `${b.marker} ` : "") + b.runs.map((r) => r.text).join("")).filter(Boolean).join("\n");
 }
 
 // src/ui/RichText.tsx
@@ -2960,11 +3125,32 @@ function runStyle(run, p) {
     color: run.href ? p.primary : void 0
   };
 }
+function BodyImage({ block, palette: p }) {
+  const [ratio, setRatio] = (0, import_react.useState)(block.width && block.height ? block.width / block.height : 16 / 9);
+  (0, import_react.useEffect)(() => {
+    if (block.width && block.height) return;
+    let live = true;
+    import_react_native2.Image.getSize(block.src, (w, h) => live && w > 0 && h > 0 && setRatio(w / h), () => {
+    });
+    return () => {
+      live = false;
+    };
+  }, [block.src, block.width, block.height]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Image, { source: { uri: block.src }, accessible: true, accessibilityRole: "image", accessibilityLabel: block.alt || void 0, resizeMode: "contain", style: [styles2.image, { aspectRatio: ratio, backgroundColor: p.surface }] });
+}
+function BodyVideo({ block, palette: p, onLink }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.Pressable, { accessibilityRole: "link", accessibilityLabel: block.alt, onPress: () => onLink(block.href), style: ({ pressed }) => [styles2.video, { borderColor: p.border, backgroundColor: p.surface, opacity: pressed ? 0.7 : 1 }], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: [styles2.play, { color: p.primary }], children: "\u25B6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: { color: p.primary, fontFamily: p.fontFamily, fontWeight: "600" }, children: block.alt })
+  ] });
+}
 function RichText({ html, palette: p, onLink, size = 15 }) {
   const blocks = (0, import_react.useMemo)(() => parseHtml(html), [html]);
   if (!blocks.length) return null;
   const base = { color: p.text, fontSize: size, lineHeight: Math.round(size * 1.42), fontFamily: p.fontFamily };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles2.wrap, children: blocks.map((b, i) => {
+    if (b.kind === "image") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyImage, { block: b, palette: p }, i);
+    if (b.kind === "video") return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BodyVideo, { block: b, palette: p, onLink }, i);
     const runs = b.runs.map((r, j) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: runStyle(r, p), onPress: r.href ? () => onLink(r.href) : void 0, accessibilityRole: r.href ? "link" : void 0, children: r.text }, j));
     if (b.kind === "list-item") {
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: [styles2.li, { paddingLeft: (b.level - 1) * 14 }], children: [
@@ -2983,7 +3169,10 @@ var styles2 = import_react_native2.StyleSheet.create({
   wrap: { gap: 6 },
   li: { flexDirection: "row", gap: 6 },
   marker: { minWidth: 14 },
-  flex: { flex: 1 }
+  flex: { flex: 1 },
+  image: { width: "100%", borderRadius: 6 },
+  video: { flexDirection: "row", alignItems: "center", gap: 8, paddingVertical: 12, paddingHorizontal: 14, borderWidth: 1, borderRadius: 8 },
+  play: { fontSize: 14 }
 });
 
 // src/ui/Checklist.tsx
@@ -3333,18 +3522,15 @@ function Help({ store, client, palette: p }) {
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { accessibilityRole: "header", style: [styles4.sectionTitle, { color: p.muted }], children: title.toUpperCase() }),
     children
   ] }, title);
-  const collections = [...articles?.collections ?? []].sort((a, b) => a.order - b.order);
-  const loose = (articles?.articles ?? []).filter((a) => !a.collectionId || !collections.some((c) => c.id === a.collectionId));
+  const audiences = client.getAudienceIds();
+  const sections = resourceCenterSections(articles?.collections ?? [], articles?.articles ?? [], audiences);
+  const listed = results?.filter((a) => isArticleListed(articles?.collections ?? [], a, audiences));
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.ScrollView, { contentContainerStyle: styles4.content, keyboardShouldPersistTaps: "handled", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TextInput, { value: q, onChangeText: setQ, placeholder: "Search articles", placeholderTextColor: p.muted, accessibilityLabel: "Search help articles", returnKeyType: "search", style: [styles4.search, { color: p.text, backgroundColor: p.surface, borderRadius: Math.min(10, p.radius) }] }),
-    results ? section(`Results for \u201C${q.trim()}\u201D`, results.length ? results.map((a) => row(a.id, a.title, a.summary, () => open(a))) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles4.rowSub, { color: p.muted }], children: "No articles found." })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    listed ? section(`Results for \u201C${q.trim()}\u201D`, listed.length ? listed.map((a) => row(a.id, a.title, a.summary, () => open(a))) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles4.rowSub, { color: p.muted }], children: "No articles found." })) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
       recommended.length ? section("Recommended", recommended.map((g) => row(g.id, g.name, void 0, () => store.startGuide(g.key), "\u25B6"))) : null,
       !articles ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ActivityIndicator, { color: p.muted }) : null,
-      collections.map((c) => {
-        const items = (articles?.articles ?? []).filter((a) => a.collectionId === c.id);
-        return items.length ? section(c.name, items.map((a) => row(a.id, a.title, a.summary, () => open(a)))) : null;
-      }),
-      loose.length ? section("Articles", loose.map((a) => row(a.id, a.title, a.summary, () => open(a)))) : null,
+      sections.map((s) => section(s.collection ? s.path.join(" \u203A ") : "Articles", s.articles.map((a) => row(a.id, a.title, a.summary, () => open(a))))),
       rc?.faqs.length ? section(
         "FAQ",
         rc.faqs.map((f) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [styles4.row, styles4.faq, { borderColor: p.border }], children: [
@@ -3475,8 +3661,9 @@ function ResourceCenter({ client, palette: p, open, topInset, bottomInset }) {
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { accessibilityRole: "header", style: [styles5.sectionTitle, { color: p.muted }], children: title.toUpperCase() }),
     children
   ] }, title);
-  const collections = [...rc.collections].sort((a, b) => a.order - b.order);
-  const loose = rc.articles.filter((a) => !a.collectionId || !rc.collections.some((c) => c.id === a.collectionId));
+  const audiences = client.getAudienceIds();
+  const sections = resourceCenterSections(rc.collections, rc.articles, audiences);
+  const listed = results?.filter((a) => isArticleListed(rc.collections, a, audiences));
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Modal, { visible: open, animationType: "slide", presentationStyle: import_react_native5.Platform.OS === "ios" ? "pageSheet" : "fullScreen", onRequestClose: () => article ? setArticle(null) : close(), children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles5.sheet, { backgroundColor: p.background, paddingTop: import_react_native5.Platform.OS === "ios" ? 8 : topInset }], children: [
     /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles5.header, { borderColor: p.border }], children: [
       article ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Pressable, { accessibilityRole: "button", accessibilityLabel: "Back", onPress: () => setArticle(null), hitSlop: 10, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles5.back, { color: p.primary }], children: "\u2039 Back" }) }) : null,
@@ -3500,17 +3687,13 @@ function ResourceCenter({ client, palette: p, open, topInset, bottomInset }) {
           style: [styles5.search, { color: p.text, backgroundColor: p.surface, borderRadius: Math.min(10, p.radius) }]
         }
       ),
-      results ? section(
+      listed ? section(
         `Results for \u201C${query.trim()}\u201D`,
-        results.length ? results.map((a) => row(a.id, a.title, a.summary, () => openArticle(a))) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles5.rowSub, { color: p.muted }], children: "No articles found." })
+        listed.length ? listed.map((a) => row(a.id, a.title, a.summary, () => openArticle(a))) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.Text, { style: [styles5.rowSub, { color: p.muted }], children: "No articles found." })
       ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
         recommended.length ? section("Recommended", recommended.map((g) => row(g.id, g.name, void 0, () => (close(), client.startGuide(g.id)), "\u25B6"))) : null,
         checklists.length ? section("Checklists", checklists.map((g) => row(g.id, g.name, void 0, () => (close(), client.openChecklist(g.id)), "\u2611"))) : null,
-        collections.map((c) => {
-          const items = rc.articles.filter((a) => a.collectionId === c.id);
-          return items.length ? section(c.name, items.map((a) => row(a.id, a.title, a.summary, () => openArticle(a)))) : null;
-        }),
-        loose.length ? section("Articles", loose.map((a) => row(a.id, a.title, a.summary, () => openArticle(a)))) : null,
+        sections.map((s) => section(s.collection ? s.path.join(" \u203A ") : "Articles", s.articles.map((a) => row(a.id, a.title, a.summary, () => openArticle(a))))),
         rc.faqs.length ? section(
           "FAQ",
           rc.faqs.map((f) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [styles5.row, styles5.faq, { borderColor: p.border }], children: [