@realiizlabs/admin 0.14.1 → 0.15.0

package/dist/studio-ui/index.cjs

@@ -894,12 +894,149 @@ var STUDIO_CSS = `
 .rz-admin .rz-help__pager a:hover { color: var(--signal); }
 .rz-admin .rz-arrow--back { transform: none; }
 @media (prefers-reduced-motion: no-preference) { .rz-admin a:hover .rz-arrow--back { transform: translateX(-4px); } }
+
+/* ---- Studio update strip / Settings \u2192 Studio ---------------------------- */
+.rz-admin .rz-update { border: 1px solid var(--border); border-left: 3px solid var(--signal); border-radius: var(--rz-radius); background: var(--surface-1); padding: .7rem 1rem; }
+.rz-admin .rz-update--strip { margin: 0 0 1.25rem; }
+.rz-admin .rz-update__row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
+.rz-admin .rz-update__title { font-weight: 600; color: var(--text-primary); }
+.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); }
+.rz-admin .rz-update__later { margin-left: auto; background: none; border: 0; padding: 0; font: inherit; font-size: .8rem; color: var(--text-muted); cursor: pointer; }
+.rz-admin .rz-update__later:hover { color: var(--text-primary); }
+.rz-admin .rz-update__notes { margin: .6rem 0 0; font-size: .875rem; line-height: 1.55; color: var(--text-secondary); white-space: pre-line; }
+.rz-admin .rz-update__problem { margin: .6rem 0 0; font-size: .875rem; color: var(--status-down); }
+.rz-admin .rz-update__done { display: block; margin-top: .5rem; font-size: .875rem; color: var(--text-secondary); }
 `;
-function StudioShellFrame({ siteName, logoUrl, siteUrl, user, role, nav, pinnedNav, branding, children }) {
+var POLL_MS = 8e3;
+var LOCAL_FALLBACK_MS = 15e4;
+var GIVE_UP_MS = 15 * 6e4;
+function useDeployed(active, mergedSha) {
+  const [state, setState] = react.useState("waiting");
+  react.useEffect(() => {
+    if (!active) return;
+    let stop = false;
+    let baseline;
+    const started = Date.now();
+    const read2 = async () => {
+      try {
+        const r = await fetch("/api/version", { cache: "no-store" });
+        const j = await r.json();
+        return j.sha;
+      } catch {
+        return null;
+      }
+    };
+    const tick = async () => {
+      if (stop) return;
+      const sha = await read2();
+      if (stop) return;
+      if (baseline === void 0) baseline = sha;
+      const elapsed = Date.now() - started;
+      const matched = sha !== null && mergedSha !== null && sha === mergedSha;
+      const moved = sha !== null && baseline !== null && sha !== baseline;
+      const localDone = sha === null && elapsed >= LOCAL_FALLBACK_MS;
+      if (matched || moved || localDone) {
+        setState("live");
+        return;
+      }
+      if (elapsed >= GIVE_UP_MS) {
+        setState("slow");
+        return;
+      }
+      setTimeout(tick, POLL_MS);
+    };
+    void tick();
+    return () => {
+      stop = true;
+    };
+  }, [active, mergedSha]);
+  return state;
+}
+var HIDE_KEY = "rz-update-later";
+function canSeeUpdates(role) {
+  return role === "owner" || role === "staff";
+}
+function UpdateStrip({ update, role }) {
+  const [hidden, setHidden] = react.useState(true);
+  react.useEffect(() => {
+    try {
+      setHidden(sessionStorage.getItem(HIDE_KEY) === update?.version);
+    } catch {
+      setHidden(false);
+    }
+  }, [update?.version]);
+  if (!update || update.state !== "ready" || !canSeeUpdates(role) || hidden) return null;
+  const later = () => {
+    try {
+      sessionStorage.setItem(HIDE_KEY, update.version);
+    } catch {
+    }
+    setHidden(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update, onLater: later, compact: true });
+}
+function UpdateBody({ update, onLater, compact = false }) {
+  const { actions } = useStudio();
+  const [showNotes, setShowNotes] = react.useState(!compact);
+  const [busy, setBusy] = react.useState(false);
+  const [outcome, setOutcome] = react.useState(null);
+  const merged = outcome?.state === "merged";
+  const deploy = useDeployed(merged, merged ? outcome.sha : null);
+  const run = async () => {
+    setBusy(true);
+    try {
+      setOutcome(await actions.updateStudio(update.number));
+    } finally {
+      setBusy(false);
+    }
+  };
+  if (merged) {
+    const live = deploy === "live";
+    const steps = [
+      { label: "Updated", state: "done", note: `Studio ${update.version}` },
+      { label: "Live", state: live ? "done" : "active", note: live ? "On the site now" : deploy === "slow" ? "Taking longer than usual" : "Rebuilding, about two minutes" }
+    ];
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Steps, { steps }),
+      live && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-update__done", children: [
+        "Studio updated to ",
+        update.version,
+        ". Reload to see it."
+      ] })
+    ] });
+  }
+  const problem = outcome && outcome.state !== "pending" ? outcome.state === "stale" ? "The site changed since the checks ran. Try again in a minute." : outcome.state === "red" ? `The checks failed${outcome.failingCheck ? ` (${outcome.failingCheck})` : ""}. Your web team has been able to see this.` : outcome.state === "error" ? outcome.message : null : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-update__row", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-update__title", children: [
+        "Studio ",
+        update.version,
+        " is available"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__link", onClick: () => setShowNotes((v) => !v), "aria-expanded": showNotes, children: "What\u2019s new" }),
+      update.previewUrl && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: update.previewUrl, target: "_blank", rel: "noreferrer", className: "rz-update__link", children: [
+        "Preview ",
+        /* @__PURE__ */ jsxRuntime.jsx(OutboundArrow, {})
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", onClick: run, disabled: busy, children: busy ? "Updating\u2026" : "Update" }),
+      onLater && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__later", onClick: onLater, children: "Later" })
+    ] }),
+    showNotes && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rz-update__notes", children: update.notes ?? `Version ${update.version} of Studio, replacing ${update.currentVersion}. Nothing changes on your website until you press Update.` }),
+    problem && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rz-update__problem", children: problem })
+  ] });
+}
+function StudioShellFrame({ siteName, logoUrl, siteUrl = "/", user, role, nav, pinnedNav, branding, update = null, children }) {
   const pathname = navigation.usePathname() ?? "/admin";
+  react.useEffect(() => {
+    if (user) document.cookie = "rz-studio=1; Path=/; Max-Age=2592000; SameSite=Lax";
+  }, [user]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: STUDIO_CSS }),
-    /* @__PURE__ */ jsxRuntime.jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, siteUrl, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
+    /* @__PURE__ */ jsxRuntime.jsxs(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, siteUrl, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(UpdateStrip, { update, role }),
+      children
+    ] })
   ] });
 }
 
@@ -2911,51 +3048,6 @@ function RemoveItem({ typeId, slug }) {
     error && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-alert admin__alert", children: error })
   ] });
 }
-var POLL_MS = 8e3;
-var LOCAL_FALLBACK_MS = 15e4;
-var GIVE_UP_MS = 15 * 6e4;
-function useDeployed(active, mergedSha) {
-  const [state, setState] = react.useState("waiting");
-  react.useEffect(() => {
-    if (!active) return;
-    let stop = false;
-    let baseline;
-    const started = Date.now();
-    const read2 = async () => {
-      try {
-        const r = await fetch("/api/version", { cache: "no-store" });
-        const j = await r.json();
-        return j.sha;
-      } catch {
-        return null;
-      }
-    };
-    const tick = async () => {
-      if (stop) return;
-      const sha = await read2();
-      if (stop) return;
-      if (baseline === void 0) baseline = sha;
-      const elapsed = Date.now() - started;
-      const matched = sha !== null && mergedSha !== null && sha === mergedSha;
-      const moved = sha !== null && baseline !== null && sha !== baseline;
-      const localDone = sha === null && elapsed >= LOCAL_FALLBACK_MS;
-      if (matched || moved || localDone) {
-        setState("live");
-        return;
-      }
-      if (elapsed >= GIVE_UP_MS) {
-        setState("slow");
-        return;
-      }
-      setTimeout(tick, POLL_MS);
-    };
-    void tick();
-    return () => {
-      stop = true;
-    };
-  }, [active, mergedSha]);
-  return state;
-}
 var REFRESH_MS = 1e4;
 function PublishPanel({ number, htmlUrl, merged, closed = false, branch, removal = false, mergedSha = null, status, item }) {
   const { mergeContentPr, discardChange } = useStudio().actions;
@@ -3854,12 +3946,46 @@ function BusinessTab({ initial }) {
     ] })
   ] });
 }
-var LABELS = { profile: "My Profile", password: "Change Password", team: "Team", business: "Business" };
-function AccountTabs({ me, manages, team, branding, myUserId, myRole }) {
+function StudioTab({ update, version, role }) {
+  const { supportName } = useStudio();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "acct-stack", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "acct-card", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "acct-title", children: [
+        "Studio ",
+        version
+      ] }),
+      !update && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "acct-blurb", children: "You\u2019re up to date. When a new version comes out, it appears here and as a strip at the top of every Studio page." }),
+      update?.state === "checking" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
+        "Studio ",
+        update.version,
+        " is on its way \u2014 the checks are still running. Come back in a couple of minutes."
+      ] }),
+      update?.state === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
+        "Studio ",
+        update.version,
+        " is available, but its checks failed, so it can\u2019t be installed yet.",
+        role === "staff" && update.failingCheck ? ` Failing check: ${update.failingCheck}.` : ` ${supportName} has been able to see this and will sort it out.`
+      ] }),
+      update?.state === "ready" && /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "acct-card", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "acct-title", children: "How updates work" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
+        "Studio is a small package inside your website. When ",
+        supportName,
+        " releases a new version, your site prepares the update as a checked change \u2014 the same way a blog post is checked before it goes live \u2014 and builds a private preview. Nothing changes until you press ",
+        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Update" }),
+        ". If the update would break anything, the button never unlocks."
+      ] })
+    ] })
+  ] });
+}
+var LABELS = { profile: "My Profile", password: "Change Password", team: "Team", business: "Business", studio: "Studio" };
+function AccountTabs({ me, manages, team, branding, myUserId, myRole, update = null, version = "" }) {
   const router = navigation.useRouter();
   const pathname = navigation.usePathname();
   const params = navigation.useSearchParams();
-  const ids = manages ? ["profile", "password", "team", "business"] : ["profile", "password"];
+  const ids = manages ? ["profile", "password", "team", "business", "studio"] : ["profile", "password"];
   const requested = params.get("tab");
   const active = requested && ids.includes(requested) ? requested : "profile";
   const setActive = (v) => router.replace(`${pathname}?tab=${v}`, { scroll: false });
@@ -3868,14 +3994,15 @@ function AccountTabs({ me, manages, team, branding, myUserId, myRole }) {
     active === "profile" && /* @__PURE__ */ jsxRuntime.jsx(ProfileTab, { email: me.email, name: me.name, displayName: me.displayName, avatarUrl: me.avatarUrl }),
     active === "password" && /* @__PURE__ */ jsxRuntime.jsx(PasswordTab, {}),
     active === "team" && manages && (team?.ok ? /* @__PURE__ */ jsxRuntime.jsx(TeamTab, { members: team.members, canInvite: team.canInvite, myUserId, myRole }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-alert admin__alert", children: team?.error ?? "Couldn\u2019t load the team." })),
-    active === "business" && manages && /* @__PURE__ */ jsxRuntime.jsx(BusinessTab, { initial: branding })
+    active === "business" && manages && /* @__PURE__ */ jsxRuntime.jsx(BusinessTab, { initial: branding }),
+    active === "studio" && manages && /* @__PURE__ */ jsxRuntime.jsx(StudioTab, { update, version, role: myRole })
   ] });
 }
-function StudioAccount({ me, manages, team, branding, myUserId, myRole }) {
+function StudioAccount({ me, manages, team, branding, myUserId, myRole, update = null, version = "" }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "acct", children: [
     /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "acct-h1", children: "Account" }),
     /* @__PURE__ */ jsxRuntime.jsx("p", { className: "acct-email", children: me.email }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AccountTabs, { me, manages, team, branding, myUserId, myRole }) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(AccountTabs, { me, manages, team, branding, myUserId, myRole, update, version }) })
   ] });
 }
 
@@ -4013,6 +4140,28 @@ The status becomes **Needs fixing** and the message names the problem. Open the
 | **Removing\u2026** / **Removal ready** | You asked to take an item down; same steps as any change. | Publish to make the removal live, or discard to keep the item. |
 
 One item has at most one change waiting at a time. Saving again updates that same change rather than starting a second one.
+`
+  },
+  {
+    id: "studio-pill",
+    section: "start",
+    title: "Getting back to Studio from the website",
+    summary: "A small Studio pill appears bottom-left on the website while you're signed in \u2014 Edit this page, or Dashboard.",
+    keywords: ["pill", "edit this page", "admin bar", "back to studio", "website"],
+    body: `
+## What it is
+
+While you're signed in to Studio, your public website shows a small dark pill in the bottom-left corner: **Studio \xB7 Edit this page \xB7 Dashboard**. Visitors never see it \u2014 it only appears in a browser where you've signed in.
+
+## Why it's useful
+
+Spot a typo while reading your own site? **Edit this page** opens that exact post or event in Studio. **Dashboard** takes you to the Studio home.
+
+## Good to know
+
+- **Edit this page** only shows on pages Studio manages (a blog post, an event). On the home page or About, you get **Dashboard** only.
+- The \xD7 hides the pill for that browser tab; it comes back next time you open the site.
+- It disappears when you sign out of Studio. If you see it but Studio asks you to sign in again, your session simply expired \u2014 sign in and carry on.
 `
   }
 ];
@@ -4833,6 +4982,38 @@ Pictures save the moment you choose them (**Choose a picture**, **Replace**, **R
 ## Where the pictures live
 
 In Studio's own secure storage \u2014 not in your website's files, so they don't go through Save/Publish.
+`
+  },
+  {
+    id: "updating-studio",
+    section: "account",
+    title: "Updating Studio",
+    summary: "When a new version is out, owners see a strip with what's new, a preview and an Update button. Nothing installs until you press it.",
+    keywords: ["update", "upgrade", "new version", "release", "what's new", "studio version"],
+    body: `
+## What it is
+
+Studio is a small package inside your website, and it improves over time. When {supportName} releases a new version, your website prepares the update automatically as a **checked change** \u2014 exactly like a blog post is checked before it goes live \u2014 and builds a private preview of your site with the new Studio in it.
+
+## Where you see it
+
+- A quiet strip at the top of every Studio page: **Studio 0.15 is available \xB7 What's new \xB7 Preview \xB7 Update \xB7 Later**. Only owners and {supportName} see it; editors don't.
+- **Settings \u2192 Studio**: the version you're running, the pending update with its notes, and the same Update button.
+
+The strip appears only once the update's checks have passed. If they fail, nothing is offered \u2014 {supportName} sees the failure and fixes it.
+
+## How to update
+
+1. Read **What's new** (a few lines, plain English).
+2. Optional: press **Preview** to open your website running the new Studio.
+3. Press **Update**. The tracker shows *Updated \u2192 Live*; about two minutes later the website has rebuilt.
+4. Reload Studio to use the new version.
+
+## Good to know
+
+- **Later** hides the strip for this browser tab; it comes back next time.
+- Nothing on your public website changes because of a Studio update \u2014 only the dashboard does.
+- You can't skip a version or go back from here; if something looks wrong after an update, tell {supportName}.
 `
   }
 ];
@@ -5271,8 +5452,12 @@ function BackArrow() {
   ] });
 }
 
+// src/version.ts
+var ADMIN_VERSION = "0.15.0" ;
+
 // src/studio-ui/types.ts
 var ACTION_NAMES = [
+  "updateStudio",
   "publishContent",
   "removeContent",
   "mergeContentPr",
@@ -5293,6 +5478,7 @@ var ACTION_NAMES = [
 ];
 
 exports.ACTION_NAMES = ACTION_NAMES;
+exports.ADMIN_VERSION = ADMIN_VERSION;
 exports.ContentEditor = ContentEditor;
 exports.GLOSSARY = GLOSSARY;
 exports.HELP_ARTICLES = HELP_ARTICLES;
@@ -5316,6 +5502,9 @@ exports.StudioPullRequest = StudioPullRequest;
 exports.StudioShellFrame = StudioShellFrame;
 exports.StudioSignIn = StudioSignIn;
 exports.StudioTerm = StudioTerm;
+exports.UpdateBody = UpdateBody;
+exports.UpdateStrip = UpdateStrip;
+exports.canSeeUpdates = canSeeUpdates;
 exports.copyFor = copyFor;
 exports.fillVars = fillVars;
 exports.helpAsText = helpAsText;