@realiizlabs/admin 0.15.6 → 0.15.8

package/dist/studio-ui/index.cjs

@@ -250,7 +250,7 @@ var OutIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 17l5-5-5-5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12H9" })
 ] });
-function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl }) {
+function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl, version }) {
   const [open, setOpen] = react.useState(false);
   const wrap = react.useRef(null);
   react.useEffect(() => {
@@ -303,11 +303,15 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
       /* @__PURE__ */ jsxRuntime.jsx("form", { method: "post", action: signOutPath, className: "rz-menu__signout", children: /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "submit", role: "menuitem", className: "rz-menu__item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(OutIcon, {}),
         "Sign out"
-      ] }) })
+      ] }) }),
+      version && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-menu__version", children: [
+        "Studio ",
+        version
+      ] })
     ] })
   ] });
 }
-function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
+function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref, version }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: "rz-topbar", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "a",
@@ -328,7 +332,7 @@ function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role,
         "Welcome back, ",
         firstNameOf(user)
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl })
+      /* @__PURE__ */ jsxRuntime.jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl, version })
     ] })
   ] });
 }
@@ -409,6 +413,7 @@ var SHELL_CSS = `
 .rz-sidebar__collapse:hover { color: var(--text-primary); }
 .rz-sidebar__collapse svg { flex-shrink: 0; }
 .rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }
+.rz-menu__version { padding: .45rem 1rem .55rem; border-top: 1px solid var(--separator); font-family: var(--rz-font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted); }
 .rz-sidebar__version { display: block; padding: 0 1rem .75rem; font-family: var(--rz-font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted); opacity: .8; white-space: nowrap; }
 .rz-sidebar--collapsed .rz-sidebar__version { padding: 0 0 .75rem; text-align: center; }
 .rz-main { flex: 1; min-width: 0; }
@@ -640,7 +645,8 @@ function AdminShell({
         onTheme: setTheme,
         signOutPath: signOutPath ?? `${basePath}/auth/signout`,
         accountHref: accountHref === null ? void 0 : accountHref ?? `${basePath}/account`,
-        helpHref: helpHref === null ? void 0 : helpHref ?? `${basePath}/help`
+        helpHref: helpHref === null ? void 0 : helpHref ?? `${basePath}/help`,
+        version
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-body", children: [
@@ -733,7 +739,7 @@ function Tabs({ options, value, onChange, label = "Sections" }) {
 }
 
 // src/version.ts
-var ADMIN_VERSION = "0.15.6" ;
+var ADMIN_VERSION = "0.15.8" ;
 
 // src/studio-ui/css.ts
 var STUDIO_CSS = `
@@ -900,12 +906,20 @@ var STUDIO_CSS = `
 .rz-admin .rz-help__search svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }
 .rz-admin .rz-help__search input { width: 100%; padding-left: 2.6rem; font-size: 1rem; }
 .rz-admin .rz-help__body { display: grid; grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; align-items: start; }
-@media (max-width: 760px) { .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; } .rz-admin .rz-help__nav { display: flex; flex-wrap: wrap; gap: .25rem; } }
 .rz-admin .rz-help__nav { position: sticky; top: calc(var(--rz-topbar) + 1rem); display: flex; flex-direction: column; gap: .1rem; }
-.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; }
+.rz-admin .rz-help__navitem { padding: .45rem .75rem; border-radius: 6px; color: var(--text-secondary); text-decoration: none; font-size: .875rem; white-space: nowrap; }
 .rz-admin .rz-help__navitem:hover { background: var(--surface-2); color: var(--text-primary); }
 .rz-admin .rz-help__navitem--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }
 .rz-admin .rz-help__main { max-width: 44rem; min-width: 0; }
+/* Phones: sections become one row of chips that scrolls sideways above the content (must come
+   after the desktop rules above \u2014 same specificity, last one wins). */
+@media (max-width: 760px) {
+  .rz-admin .rz-help__body { grid-template-columns: 1fr; gap: 1rem; }
+  .rz-admin .rz-help__nav { position: static; flex-direction: row; gap: .35rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin: 0 -14px; padding: .1rem 14px .4rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
+  .rz-admin .rz-help__nav::-webkit-scrollbar { display: none; }
+  .rz-admin .rz-help__navitem { flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; padding: .4rem .8rem; background: var(--surface-1); }
+  .rz-admin .rz-help__navitem--active { border-color: var(--signal); }
+}
 .rz-admin .rz-help__h { font-family: var(--rz-font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; }
 .rz-admin .rz-help__blurb { color: var(--text-secondary); margin: 0 0 1.25rem; }
 .rz-admin .rz-help__count { color: var(--text-muted); font-size: .85rem; margin: 0 0 .75rem; }
@@ -943,6 +957,10 @@ var STUDIO_CSS = `
 .rz-admin .rz-update--strip { margin: 0 0 1.5rem; }
 .rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.1rem; }
 .rz-admin .rz-update__title { display: inline-flex; align-items: center; gap: .55rem; font-weight: 600; color: var(--text-primary); }
+.rz-admin .rz-update--line { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; padding: .55rem 1.1rem; font-size: .875rem; }
+.rz-admin .rz-update--line .rz-update__later { margin-left: auto; }
+.rz-admin .rz-update__row .rz-update__done { flex: 1; margin-top: .5rem; }
+.rz-admin .rz-update__row .rz-update__later { align-self: flex-end; margin-top: .5rem; }
 .rz-admin .rz-update__title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); }
 .rz-admin .rz-update__link { display: inline-flex; align-items: center; gap: .3rem; background: none; border: 0; padding: 0; font: inherit; font-size: .875rem; color: var(--signal); cursor: pointer; text-decoration: none; }
 .rz-admin .rz-update__link:hover { color: var(--text-primary); }
@@ -954,14 +972,16 @@ var STUDIO_CSS = `
 `;
 var POLL_MS = 8e3;
 var LOCAL_FALLBACK_MS = 15e4;
+var SLOW_MS = 4 * 6e4;
 var GIVE_UP_MS = 15 * 6e4;
-function useDeployed(active, mergedSha) {
+function useDeployed(active, mergedSha, attempt = 0) {
   const [state, setState] = react.useState("waiting");
   react.useEffect(() => {
     if (!active) return;
     let stop = false;
     let baseline;
     const started = Date.now();
+    setState("waiting");
     const read2 = async () => {
       try {
         const r = await fetch("/api/version", { cache: "no-store" });
@@ -985,22 +1005,24 @@ function useDeployed(active, mergedSha) {
         return;
       }
       if (elapsed >= GIVE_UP_MS) {
-        setState("slow");
+        setState("stalled");
         return;
       }
+      if (elapsed >= SLOW_MS) setState("slow");
       setTimeout(tick, POLL_MS);
     };
     void tick();
     return () => {
       stop = true;
     };
-  }, [active, mergedSha]);
+  }, [active, mergedSha, attempt]);
   return state;
 }
 var KEY = "rz-update-installing";
+var MIN_KEY = "rz-update-minimized";
 function readInstalling() {
   try {
-    const raw = sessionStorage.getItem(KEY);
+    const raw = localStorage.getItem(KEY);
     if (!raw) return null;
     const v = JSON.parse(raw);
     return typeof v.version === "string" ? v : null;
@@ -1010,8 +1032,11 @@ function readInstalling() {
 }
 function writeInstalling(i) {
   try {
-    if (i) sessionStorage.setItem(KEY, JSON.stringify(i));
-    else sessionStorage.removeItem(KEY);
+    if (i) localStorage.setItem(KEY, JSON.stringify(i));
+    else {
+      localStorage.removeItem(KEY);
+      localStorage.removeItem(MIN_KEY);
+    }
   } catch {
   }
 }
@@ -1032,21 +1057,56 @@ function useInstalling() {
   return [installing, update];
 }
 function InstallTracker({ installing, compact = false }) {
-  const deploy = useDeployed(true, installing.sha);
+  const { actions, supportName } = useStudio();
+  const [attempt, setAttempt] = react.useState(0);
+  const [nudge, setNudge] = react.useState(null);
+  const deploy = useDeployed(true, installing.sha, attempt);
   const live = deploy === "live";
+  const late = deploy === "slow" || deploy === "stalled";
+  const doNudge = async () => {
+    if (!actions.nudgeBuild) return;
+    setNudge("busy");
+    const out = await actions.nudgeBuild();
+    setNudge(out);
+    if (out.state === "sent") setAttempt((n) => n + 1);
+  };
+  const [minimized, setMinimized] = react.useState(false);
+  react.useEffect(() => {
+    try {
+      setMinimized(localStorage.getItem(MIN_KEY) === "1");
+    } catch {
+    }
+  }, []);
+  const minimize = (on) => {
+    try {
+      if (on) localStorage.setItem(MIN_KEY, "1");
+      else localStorage.removeItem(MIN_KEY);
+    } catch {
+    }
+    setMinimized(on);
+  };
+  const reload = /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__link", onClick: () => window.location.reload(), children: "Reload Studio" });
+  if (live || minimized && compact) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update rz-update--line${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-update__title", children: live ? `Studio ${installing.version} is live` : `Installing Studio ${installing.version}` }),
+      live ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        reload,
+        " to start using it."
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-muted", children: "The website is rebuilding \u2014 keep working." }),
+      !live && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__later", onClick: () => minimize(false), children: "Show progress" })
+    ] });
+  }
   const steps = [
     { label: "Updated", state: "done", note: `Studio ${installing.version}` },
-    { label: "Live", state: live ? "done" : "active", note: live ? "On the site now" : deploy === "slow" ? "Taking longer than usual" : "Rebuilding, about two minutes" }
+    { label: "Live", state: "active", note: late ? "Taking longer than usual" : "Rebuilding the website" }
   ];
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsx(Steps, { steps }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-update__done", children: live ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "Studio ",
-      installing.version,
-      " is live. ",
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__link", onClick: () => window.location.reload(), children: "Reload Studio" }),
-      " to start using it \u2014 the version at the foot of the sidebar will change."
-    ] }) : "Update accepted. Nothing to do meanwhile \u2014 keep working. The website is rebuilding with the new Studio; this turns green when it's done, in about two minutes." })
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-update__row", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-update__done", children: !late ? "Update accepted. Nothing to do meanwhile \u2014 keep working. The website is rebuilding with the new Studio; usually a few minutes, sometimes longer. This turns green when it's done." : nudge === "busy" ? "Asking the hosting service to build again\u2026" : nudge?.state === "sent" ? "Asked. The rebuild should start within a minute; this turns green when it's done." : nudge?.state === "error" ? `That didn't work (${nudge.message}). Tell ${supportName} \u2014 it's a one-click fix on their side.` : nudge?.state === "unavailable" || !actions.nudgeBuild ? `This is taking longer than usual. Occasionally the hosting service misses a rebuild \u2014 tell ${supportName}; it's a one-click fix on their side, and nothing on your website has changed.` : "This is taking longer than usual. Occasionally the hosting service misses a rebuild. You can ask it again \u2014 it's safe to press, nothing on your website changes." }),
+      late && actions.nudgeBuild && nudge !== "busy" && nudge?.state !== "sent" && nudge?.state !== "unavailable" && /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: doNudge, children: "Nudge the build" }),
+      compact && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__later", onClick: () => minimize(true), children: "Minimize" })
+    ] })
   ] });
 }
 var HIDE_KEY = "rz-update-later";
@@ -3179,7 +3239,7 @@ function PublishPanel({ number, htmlUrl, merged, closed = false, branch, removal
     {
       label: removal ? "Removed" : "Live",
       state: onSite ? "done" : live ? "active" : "todo",
-      note: onSite ? removal ? "Off the site" : "On the site" : live ? deploy === "slow" ? "Taking longer than usual" : "Rebuilding, about two minutes" : "Automatic"
+      note: onSite ? removal ? "Off the site" : "On the site" : live ? deploy === "waiting" ? "Rebuilding the website" : "Taking longer than usual" : "Automatic"
     }
   ];
   if (discarded) {
@@ -3201,7 +3261,7 @@ function PublishPanel({ number, htmlUrl, merged, closed = false, branch, removal
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Steps, { steps }),
-    live ? onSite ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: removal ? `Done \u2014 the ${noun} is off the website.` : "Done \u2014 your change is on the website now." }) : deploy === "slow" ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "The site is taking longer than usual to rebuild. It will get there; check back in a few minutes." }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "Published. The website is rebuilding with your change \u2014 this usually takes about two minutes. Stay here and this page will tell you the moment it's live; if you look at the site before then you'll still see the old version." }) : stale ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-alert admin__alert", children: [
+    live ? onSite ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: removal ? `Done \u2014 the ${noun} is off the website.` : "Done \u2014 your change is on the website now." }) : deploy === "stalled" ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "The website still hasn't rebuilt. Your change is saved and published; the rebuild just hasn't happened. Tell your web team \u2014 it's a one-click fix on their side." }) : deploy === "slow" ? /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "The site is taking longer than usual to rebuild. It will get there; check back in a few minutes." }) : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "Published. The website is rebuilding with your change \u2014 usually a few minutes. Stay here and this page will tell you the moment it's live; if you look at the site before then you'll still see the old version." }) : stale ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-alert admin__alert", children: [
       "Someone else changed this file first. ",
       /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: "/admin", children: "Open it again" }),
       ", make your change on the latest version, and publish."
@@ -3221,7 +3281,7 @@ function PublishPanel({ number, htmlUrl, merged, closed = false, branch, removal
         noun
       ] })),
       /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { variant: removal || !liveUrl ? "primary" : "secondary", href: listUrl, children: backLabel }),
-      live && !onSite && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-actions__hint", children: deploy === "slow" ? "Still rebuilding." : "Waiting for the site to rebuild\u2026" })
+      live && !onSite && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-actions__hint", children: deploy === "waiting" ? "Waiting for the site to rebuild\u2026" : "Still rebuilding." })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", disabled: pending || !ready, onClick: publish, children: pending ? "Publishing\u2026" : "Publish" }),
       previewUrl && ready && /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { external: true, href: previewUrl, children: "Preview the change" }),
@@ -5225,7 +5285,7 @@ The new version didn't build cleanly against your website. Nothing was installed
 
 ## The tracker is stuck on "Live"
 
-The rebuild usually takes about two minutes; occasionally the hosting service is slow and it takes ten. If the tracker says *taking longer than usual*, that's all it means. Leave the page and come back \u2014 the update is already accepted and will finish on its own.
+The rebuild usually takes a few minutes. After a while the tracker says *taking longer than usual* and, on most sites, offers **Nudge the build**. Press it \u2014 it asks the hosting service to build the website again. It's safe: the update is already accepted, nothing on your website changes, and pressing it twice does no harm. If the button isn't there, or it doesn't help within ten minutes, tell {supportName}; it's a one-click fix on their side. Either way you can leave the page and come back \u2014 the tracker remembers.
 
 ## I'm not seeing updates at all
 
@@ -5552,6 +5612,12 @@ function StudioHelp() {
   };
   const hits = q.trim().length > 1 ? searchHelp(q) : null;
   const activeSection = view.kind === "section" ? view.id : view.article.section;
+  const nav = react.useRef(null);
+  react.useEffect(() => {
+    const el = nav.current;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    el.querySelector(".rz-help__navitem--active")?.scrollIntoView?.({ inline: "center", block: "nearest" });
+  }, [activeSection, hits]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: top, className: "rz-help", children: [
     /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { eyebrow: "Help", title: "Help center", subtitle: "Everything about running your website from Studio, in plain English. Search, or browse by section." }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-help__search", children: [
@@ -5575,7 +5641,7 @@ function StudioHelp() {
       )
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-help__body", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "rz-help__nav", "aria-label": "Help sections", children: HELP_SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: `#s-${s.id}`, className: `rz-help__navitem${!hits && activeSection === s.id ? " rz-help__navitem--active" : ""}`, onClick: (e) => {
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { ref: nav, className: "rz-help__nav", "aria-label": "Help sections", children: HELP_SECTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsx("a", { href: `#s-${s.id}`, className: `rz-help__navitem${!hits && activeSection === s.id ? " rz-help__navitem--active" : ""}`, onClick: (e) => {
         e.preventDefault();
         go(`s-${s.id}`);
       }, children: s.title }, s.id)) }),
@@ -5671,6 +5737,7 @@ function BackArrow() {
 // src/studio-ui/types.ts
 var ACTION_NAMES = [
   "updateStudio",
+  "nudgeBuild",
   "publishContent",
   "removeContent",
   "mergeContentPr",