@sevenfold/setto-client 0.36.0 → 0.37.0

package/dist/setto-client.js

@@ -21481,28 +21481,28 @@ function parseManifest(input) {
   const rawPages = Array.isArray(input.pages) ? input.pages : null;
   if (!rawPages) issues.push({ at: "pages", message: "must be a list" });
   (rawPages ?? []).forEach((raw, i) => {
-    const at = `pages[${i}]`;
+    const at2 = `pages[${i}]`;
     if (!isRecord$1(raw)) {
-      issues.push({ at, message: "not an object" });
+      issues.push({ at: at2, message: "not an object" });
       return;
     }
     const id = String(raw.id ?? "");
     const path2 = String(raw.path ?? "");
     const titleKey = String(raw.titleKey ?? "");
-    if (!ID.test(id)) issues.push({ at: `${at}.id`, message: `invalid id "${id}"` });
-    else if (pageIds.has(id)) issues.push({ at: `${at}.id`, message: `duplicate page "${id}"` });
+    if (!ID.test(id)) issues.push({ at: `${at2}.id`, message: `invalid id "${id}"` });
+    else if (pageIds.has(id)) issues.push({ at: `${at2}.id`, message: `duplicate page "${id}"` });
     pageIds.add(id);
-    if (!PATH.test(path2)) issues.push({ at: `${at}.path`, message: `invalid path "${path2}"` });
+    if (!PATH.test(path2)) issues.push({ at: `${at2}.path`, message: `invalid path "${path2}"` });
     else if (path2 === "/setto" || path2.startsWith("/setto/")) {
-      issues.push({ at: `${at}.path`, message: "/setto belongs to the editor" });
-    } else if (paths.has(path2)) issues.push({ at: `${at}.path`, message: `duplicate path "${path2}"` });
+      issues.push({ at: `${at2}.path`, message: "/setto belongs to the editor" });
+    } else if (paths.has(path2)) issues.push({ at: `${at2}.path`, message: `duplicate path "${path2}"` });
     paths.add(path2);
-    if (!titleKey) issues.push({ at: `${at}.titleKey`, message: "required" });
+    if (!titleKey) issues.push({ at: `${at2}.titleKey`, message: "required" });
     const sections = [];
     const rawSections = Array.isArray(raw.sections) ? raw.sections : null;
-    if (!rawSections) issues.push({ at: `${at}.sections`, message: "must be a list" });
+    if (!rawSections) issues.push({ at: `${at2}.sections`, message: "must be a list" });
     (rawSections ?? []).forEach((s, j) => {
-      const sat = `${at}.sections[${j}]`;
+      const sat = `${at2}.sections[${j}]`;
       if (!isRecord$1(s)) {
         issues.push({ at: sat, message: "not an object" });
         return;
@@ -21544,16 +21544,16 @@ function parseManifest(input) {
   if (issues.length > 0) return { ok: false, issues };
   return { ok: true, manifest: { version: PAGES_MANIFEST_VERSION, pages, menu, footer: footer2 } };
 }
-function parseMenu(raw, at, issues) {
+function parseMenu(raw, at2, issues) {
   if (raw === void 0) return [];
   if (!Array.isArray(raw)) {
-    issues.push({ at, message: "must be a list" });
+    issues.push({ at: at2, message: "must be a list" });
     return [];
   }
   const ids = /* @__PURE__ */ new Set();
   const items = [];
   raw.forEach((item, i) => {
-    const iat = `${at}[${i}]`;
+    const iat = `${at2}[${i}]`;
     if (!isRecord$1(item)) {
       issues.push({ at: iat, message: "not an object" });
       return;
@@ -21613,6 +21613,15 @@ function findSection(manifest, sectionId) {
 function visibleMenu(manifest, list2) {
   return manifest[list2].filter((item) => !item.hidden && !leadsNowhere(manifest, item.href));
 }
+function ownerMenu(manifest, list2, blogEmpty) {
+  const blog = blogPage(manifest);
+  const waiting = blogEmpty && blog && !blog.page.hidden && !blog.section.hidden ? normalisePath(blog.page.path) : null;
+  return manifest[list2].flatMap((item) => {
+    if (!item.hidden && !leadsNowhere(manifest, item.href)) return [item];
+    if (waiting && item.hidden && normalisePath(item.href) === waiting) return [{ ...item, dimmed: true }];
+    return [];
+  });
+}
 function leadsNowhere(manifest, href) {
   if (!href.startsWith("/") && !href.startsWith("#")) return false;
   const [pathPart, fragment] = href.split("#");
@@ -21656,8 +21665,8 @@ function placeSection(manifest, sectionId, index2) {
   const found = findSection(next, sectionId);
   if (!found) throw new ManifestError("section_not_found", `no section "${sectionId}"`);
   const [moved] = found.page.sections.splice(found.index, 1);
-  const at = Math.max(0, Math.min(index2, found.page.sections.length));
-  found.page.sections.splice(at, 0, moved);
+  const at2 = Math.max(0, Math.min(index2, found.page.sections.length));
+  found.page.sections.splice(at2, 0, moved);
   return next;
 }
 function setSectionHidden(manifest, sectionId, hidden) {
@@ -21675,8 +21684,8 @@ function addSection(manifest, pageId, section, index2) {
   }
   const next = clone(manifest);
   const page = mustPage(next, pageId);
-  const at = index2 === void 0 ? page.sections.length : Math.max(0, Math.min(index2, page.sections.length));
-  page.sections.splice(at, 0, { ...section });
+  const at2 = index2 === void 0 ? page.sections.length : Math.max(0, Math.min(index2, page.sections.length));
+  page.sections.splice(at2, 0, { ...section });
   return next;
 }
 function addPage(manifest, page) {
@@ -34621,19 +34630,19 @@ class EditMap {
     this.index.clear();
   }
 }
-function addImplementation(editMap, at, remove2, add) {
+function addImplementation(editMap, at2, remove2, add) {
   if (remove2 === 0 && add.length === 0) {
     return;
   }
-  const existing = editMap.index.get(at);
+  const existing = editMap.index.get(at2);
   if (existing) {
     existing[1] += remove2;
     existing[2].push(...add);
     return;
   }
-  const change = [at, remove2, add];
+  const change = [at2, remove2, add];
   editMap.map.push(change);
-  editMap.index.set(at, change);
+  editMap.index.set(at2, change);
 }
 function gfmTableAlign(events, index2) {
   let inDelimiterRow = false;
@@ -35213,11 +35222,11 @@ function createTypingSender(send, now = Date.now) {
       stop();
       return;
     }
-    const at = now();
-    if (typing && at - lastSentAt < TYPING_THROTTLE_MS) return;
+    const at2 = now();
+    if (typing && at2 - lastSentAt < TYPING_THROTTLE_MS) return;
     if (send(true)) {
       typing = true;
-      lastSentAt = at;
+      lastSentAt = at2;
     }
   }
   return { update, stop, reset };
@@ -38172,7 +38181,49 @@ function usePageManifest() {
 }
 function useSettoMenu(list2 = "menu") {
   const manifest = usePageManifest();
-  return manifest ? visibleMenu(manifest, list2) : null;
+  const { canEdit, config } = useSetto();
+  const blogEmpty = (config.blog?.posts.length ?? 0) === 0;
+  const items = manifest ? canEdit ? ownerMenu(manifest, list2, blogEmpty) : visibleMenu(manifest, list2) : null;
+  const dimmed = items?.filter((item) => item.dimmed).map((item) => item.href) ?? [];
+  useDimmedLinks(dimmed, config.languages ?? []);
+  return items;
+}
+const DIM_STYLE_ID = "setto-dimmed-links";
+const dimmedBy = /* @__PURE__ */ new Map();
+function drawDimmedLinks() {
+  if (typeof document === "undefined") return;
+  const selectors = [...new Set([...dimmedBy.values()].flat())];
+  let style = document.getElementById(DIM_STYLE_ID);
+  if (!selectors.length) {
+    style?.remove();
+    return;
+  }
+  if (!style) {
+    style = document.createElement("style");
+    style.id = DIM_STYLE_ID;
+    document.head.appendChild(style);
+  }
+  style.textContent = `${selectors.join(",")}{opacity:.45;transition:opacity .15s}${selectors.map((s) => `${s}:hover`).join(",")}{opacity:.8}`;
+}
+function useDimmedLinks(hrefs, languages) {
+  const key = hrefs.join("|");
+  const langs = languages.join(",");
+  useEffect(() => {
+    if (!key) return;
+    const mine = {};
+    dimmedBy.set(
+      mine,
+      key.split("|").flatMap((href) => [
+        `a[href="${href}"]`,
+        ...langs.split(",").slice(1).filter(Boolean).map((language) => `a[href="/${language}${href}"]`)
+      ])
+    );
+    drawDimmedLinks();
+    return () => {
+      dimmedBy.delete(mine);
+      drawDimmedLinks();
+    };
+  }, [key, langs]);
 }
 function SettoPage({ pageId, path: path2, sections = {}, builtins, fallback = null }) {
   const manifest = usePageManifest();
@@ -38427,13 +38478,21 @@ function blogStrings(language) {
 function BlogBody({ nodes, language }) {
   return /* @__PURE__ */ jsx(Fragment, { children: nodes.map((node2, i) => renderFlow(node2, i, language)) });
 }
+function at(node2) {
+  const range = node2.at;
+  return Array.isArray(range) && range.length === 2 && range.every((n) => Number.isInteger(n)) ? { "data-setto-at": `${range[0]}:${range[1]}` } : {};
+}
+function atImage(node2, alt) {
+  const where = at(node2);
+  return where["data-setto-at"] ? { ...where, "data-setto-kind": "image", "data-setto-alt": alt } : {};
+}
 function renderFlow(node2, key, language) {
   switch (node2.type) {
     case "paragraph":
-      return /* @__PURE__ */ jsx("p", { children: renderPhrasing(node2.children) }, key);
+      return /* @__PURE__ */ jsx("p", { ...at(node2), children: renderPhrasing(node2.children) }, key);
     case "heading": {
       const Tag = node2.depth === 2 ? "h2" : node2.depth === 3 ? "h3" : "h4";
-      return /* @__PURE__ */ jsx(Tag, { children: renderPhrasing(node2.children) }, key);
+      return /* @__PURE__ */ jsx(Tag, { ...at(node2), children: renderPhrasing(node2.children) }, key);
     }
     case "list": {
       const items = node2.children.map((item, i) => /* @__PURE__ */ jsx("li", { children: item.children.map((child, j) => renderListChild(child, j, item.spread === true, language)) }, i));
@@ -38454,7 +38513,8 @@ function renderFlow(node2, key, language) {
   }
 }
 function renderListChild(child, key, spread, language) {
-  if (child.type === "paragraph" && !spread) return /* @__PURE__ */ jsx("span", { children: renderPhrasing(child.children) }, key);
+  if (child.type === "paragraph" && !spread)
+    return /* @__PURE__ */ jsx("span", { ...at(child), children: renderPhrasing(child.children) }, key);
   return renderFlow(child, key, language);
 }
 function renderPhrasing(children) {
@@ -38503,7 +38563,7 @@ function BlogComponent({ element: element2, language }) {
   const props = attrs(element2);
   switch (element2.name) {
     case "Image":
-      return props.src && props.alt !== void 0 ? /* @__PURE__ */ jsxs("figure", { className: "setto-blog__figure", children: [
+      return props.src && props.alt !== void 0 ? /* @__PURE__ */ jsxs("figure", { className: "setto-blog__figure", ...atImage(element2, props.alt), children: [
         /* @__PURE__ */ jsx(BlogImg, { src: props.src, alt: props.alt, sizes: "(min-width: 760px) 720px, 100vw" }),
         props.caption ? /* @__PURE__ */ jsx("figcaption", { children: props.caption }) : null
       ] }) : null;
@@ -38514,7 +38574,7 @@ function BlogComponent({ element: element2, language }) {
       return /* @__PURE__ */ jsxs("figure", { className: "setto-blog__gallery", children: [
         /* @__PURE__ */ jsx("div", { className: "setto-blog__gallery-grid", children: images.map((image2, i) => {
           const a = attrs(image2);
-          return a.src ? /* @__PURE__ */ jsxs("figure", { className: "setto-blog__gallery-item", children: [
+          return a.src ? /* @__PURE__ */ jsxs("figure", { className: "setto-blog__gallery-item", ...atImage(image2, a.alt ?? ""), children: [
             /* @__PURE__ */ jsx(BlogImg, { src: a.src, alt: a.alt ?? "", sizes: "(min-width: 760px) 360px, 50vw" }),
             a.caption ? /* @__PURE__ */ jsx("figcaption", { children: a.caption }) : null
           ] }, i) : null;
@@ -38629,16 +38689,19 @@ function useClearFixedHeader(ref, enabled) {
   return clear;
 }
 function fixedAncestor(node2) {
-  for (let at = node2; at && at !== document.body; at = at.parentElement) {
-    if (getComputedStyle(at).position === "fixed") return at;
+  for (let at2 = node2; at2 && at2 !== document.body; at2 = at2.parentElement) {
+    if (getComputedStyle(at2).position === "fixed") return at2;
   }
   return null;
 }
 function BlogIndexView({ title, first, blogPath, ctx }) {
   const posts = ctx.config.blog ? postsForLanguage(ctx.config.blog.posts, ctx.language, ctx.fallbackLanguage) : [];
   const Heading = first ? "h1" : "h2";
+  const { canEdit } = useSetto();
+  const Owner = useSettoChromeSlot("blog-owner");
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Heading, { className: "setto-blog__title", children: title }),
+    canEdit && Owner ? /* @__PURE__ */ jsx("div", { className: "setto-blog__owner", "data-setto-ui": "", children: /* @__PURE__ */ jsx(Owner, { blogPath, language: ctx.language, posts: posts.length, Draft: BlogDraft }) }) : null,
     posts.length === 0 ? /* @__PURE__ */ jsx("p", { className: "setto-blog__empty", children: ctx.strings.empty }) : /* @__PURE__ */ jsx("div", { className: "setto-blog__list", children: posts.map((post2) => /* @__PURE__ */ jsx(PostCard, { post: post2, blogPath, ctx, headingLevel: first ? "h2" : "h3" }, post2.slug)) })
   ] });
 }
@@ -38698,18 +38761,35 @@ function BlogPostView({ slug, blogPath, ctx }) {
     ] });
   }
   const fm = post2?.frontmatter ?? summary;
+  return /* @__PURE__ */ jsx(PostArticle, { frontmatter: fm, ctx, before: back, after: /* @__PURE__ */ jsx(ShareBar, { title: fm.title, strings: ctx.strings }), children: state === "ready" && post2 ? /* @__PURE__ */ jsx(BlogBody, { nodes: post2.body.children, language: ctx.language }) : /* @__PURE__ */ jsx("p", { className: "setto-blog__loading", "aria-live": "polite", children: ctx.strings.loading }) });
+}
+function PostArticle({
+  frontmatter: fm,
+  ctx,
+  before,
+  after,
+  draft = false,
+  children
+}) {
+  const field = (name2) => draft ? { "data-setto-field": name2 } : {};
+  const Title = draft ? "h2" : "h1";
   return /* @__PURE__ */ jsxs("article", { className: "setto-blog__post", lang: fm.locale, children: [
-    back,
+    before,
     /* @__PURE__ */ jsxs("header", { className: "setto-blog__post-header", children: [
       /* @__PURE__ */ jsx("time", { className: "setto-blog__date", dateTime: fm.date, children: formatPostDate(fm.date, ctx.language) }),
-      /* @__PURE__ */ jsx("h1", { className: "setto-blog__post-title", children: fm.title }),
-      /* @__PURE__ */ jsx("p", { className: "setto-blog__lead", children: fm.description })
+      /* @__PURE__ */ jsx(Title, { className: "setto-blog__post-title", ...field("title"), children: fm.title }),
+      /* @__PURE__ */ jsx("p", { className: "setto-blog__lead", ...field("description"), children: fm.description })
     ] }),
-    fm.cover ? /* @__PURE__ */ jsx("figure", { className: "setto-blog__cover", children: /* @__PURE__ */ jsx(BlogImg, { src: fm.cover, alt: "", sizes: "(min-width: 1040px) 960px, 100vw" }) }) : null,
-    state === "ready" && post2 ? /* @__PURE__ */ jsx("div", { className: "setto-blog__prose", children: /* @__PURE__ */ jsx(BlogBody, { nodes: post2.body.children, language: ctx.language }) }) : /* @__PURE__ */ jsx("p", { className: "setto-blog__loading", "aria-live": "polite", children: ctx.strings.loading }),
-    /* @__PURE__ */ jsx(ShareBar, { title: fm.title, strings: ctx.strings })
+    fm.cover ? /* @__PURE__ */ jsx("figure", { className: "setto-blog__cover", ...field("cover"), children: /* @__PURE__ */ jsx(BlogImg, { src: fm.cover, alt: "", sizes: "(min-width: 1040px) 960px, 100vw" }) }) : null,
+    /* @__PURE__ */ jsx("div", { className: "setto-blog__prose", children }),
+    after
   ] });
 }
+function BlogDraft({ draft }) {
+  useBlogStyles();
+  const ctx = useBlogContext();
+  return /* @__PURE__ */ jsx(PostArticle, { frontmatter: draft.frontmatter, ctx, draft: true, children: /* @__PURE__ */ jsx(BlogBody, { nodes: draft.body.children, language: ctx.language }) });
+}
 function usePostTitle(title, siteName) {
   useEffect(() => {
     if (!title || typeof document === "undefined") return;
@@ -40815,6 +40895,7 @@ export {
   BLOCK_TYPES,
   BLOG_CSS,
   BUILTIN_SECTION_TYPES,
+  BlogDraft,
   CHECKOUT_INTENT,
   DEFAULT_LANGUAGE,
   EMPTY_I18N_STORE_SNAPSHOT,
@@ -40888,6 +40969,7 @@ export {
   normalisePath,
   optimizedSrcSet,
   optimizedUrl,
+  ownerMenu,
   pageById,
   pageForPath,
   pageTitleKey,