@realiizlabs/admin 0.14.0 → 0.15.0

package/dist/studio-ui/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, useContext, useState, useId, useTransition, useEffect, Suspense, useMemo, useRef, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
+import { createContext, useContext, useState, useEffect, useId, useTransition, Suspense, useMemo, useRef, useCallback, useSyncExternalStore, Fragment as Fragment$1 } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 import { createBrowserClient } from '@supabase/ssr';
@@ -154,6 +154,32 @@ function Sidebar({ items, pinned = [], activeHref, basePath }) {
     )
   ] });
 }
+function buttonClass(variant = "secondary", size = "md", extra) {
+  return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
+}
+function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
+  return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
+}
+function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
+  const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
+  return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
+    children,
+    external && /* @__PURE__ */ jsx(OutboundArrow, {}),
+    forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
+  ] });
+}
+function ForwardArrow() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow rz-arrow--fwd", children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
+  ] });
+}
+function OutboundArrow() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
+  ] });
+}
 var THEME_KEY = "rz-admin-theme";
 function useTheme(defaultTheme = "light") {
   const [theme, setTheme] = useState(defaultTheme);
@@ -205,12 +231,16 @@ var HelpIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsx("path", { d: "M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z" }),
   /* @__PURE__ */ jsx("path", { d: "M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" })
 ] });
+var GlobeIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
+] });
 var OutIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
   /* @__PURE__ */ jsx("path", { d: "M16 17l5-5-5-5" }),
   /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
 ] });
-function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
+function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl }) {
   const [open, setOpen] = useState(false);
   const wrap = useRef(null);
   useEffect(() => {
@@ -245,7 +275,12 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
         /* @__PURE__ */ jsx("span", { children: "Theme" }),
         /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(ThemeToggle, { theme, onChange: onTheme }) })
       ] }),
-      (accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
+      (siteUrl || accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
+      siteUrl && /* @__PURE__ */ jsxs("a", { href: siteUrl, target: "_blank", rel: "noreferrer", role: "menuitem", className: "rz-menu__item", children: [
+        /* @__PURE__ */ jsx(GlobeIcon, {}),
+        "View website",
+        /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(OutboundArrow, {}) })
+      ] }),
       accountHref && /* @__PURE__ */ jsxs("a", { href: accountHref, role: "menuitem", className: "rz-menu__item", children: [
         /* @__PURE__ */ jsx(UserIcon, {}),
         "Account"
@@ -262,19 +297,28 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
     ] })
   ] });
 }
-function TopBar({ siteName, productName, logoUrl, homeHref, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
+function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
   return /* @__PURE__ */ jsxs("header", { className: "rz-topbar", children: [
-    /* @__PURE__ */ jsxs("a", { href: homeHref, className: "rz-topbar__brand", children: [
-      logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
-      /* @__PURE__ */ jsx("span", { children: siteName }),
-      /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: siteUrl || homeHref,
+        className: "rz-topbar__brand",
+        ...siteUrl ? { target: "_blank", rel: "noreferrer", title: "Open the live website in a new tab" } : {},
+        children: [
+          logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
+          /* @__PURE__ */ jsx("span", { children: siteName }),
+          /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName }),
+          siteUrl && /* @__PURE__ */ jsx(OutboundArrow, {})
+        ]
+      }
+    ),
     user && role && /* @__PURE__ */ jsxs("div", { className: "rz-topbar__right", children: [
       /* @__PURE__ */ jsxs("span", { className: "rz-topbar__greeting", "data-testid": "rz-greeting", children: [
         "Welcome back, ",
         firstNameOf(user)
       ] }),
-      /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref })
+      /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl })
     ] })
   ] });
 }
@@ -334,6 +378,8 @@ var SHELL_CSS = `
 .rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }
 .rz-topbar__logo { height: 22px; width: auto; display: block; }
 .rz-topbar__product { font-weight: 400; color: var(--text-secondary); }
+.rz-topbar__brand .rz-arrow { color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }
+.rz-topbar__brand:hover .rz-arrow { opacity: 1; }
 .rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
 .rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }
 .rz-body { display: flex; flex: 1; min-height: 0; }
@@ -545,6 +591,7 @@ function AdminShell({
   signOutPath,
   accountHref,
   helpHref,
+  siteUrl,
   branding,
   defaultTheme = "light",
   children
@@ -561,6 +608,7 @@ function AdminShell({
         siteName: shownName,
         productName,
         logoUrl: shownLogo,
+        siteUrl,
         homeHref: basePath,
         user,
         role,
@@ -577,32 +625,6 @@ function AdminShell({
     ] })
   ] });
 }
-function buttonClass(variant = "secondary", size = "md", extra) {
-  return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
-}
-function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
-}
-function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
-  const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
-  return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
-    children,
-    external && /* @__PURE__ */ jsx(OutboundArrow, {}),
-    forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
-  ] });
-}
-function ForwardArrow() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow rz-arrow--fwd", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
-  ] });
-}
-function OutboundArrow() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow", children: [
-    /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
-  ] });
-}
 function Card({ title, meta, note, children, actions, className }) {
   return /* @__PURE__ */ jsxs("div", { className: ["rz-card", className].filter(Boolean).join(" "), children: [
     title && /* @__PURE__ */ jsx("div", { className: "rz-card__title", children: title }),
@@ -866,12 +888,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, 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] = useState("waiting");
+  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] = useState(true);
+  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__ */ jsx(UpdateBody, { update, onLater: later, compact: true });
+}
+function UpdateBody({ update, onLater, compact = false }) {
+  const { actions } = useStudio();
+  const [showNotes, setShowNotes] = useState(!compact);
+  const [busy, setBusy] = useState(false);
+  const [outcome, setOutcome] = 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__ */ jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+      /* @__PURE__ */ jsx(Steps, { steps }),
+      live && /* @__PURE__ */ 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__ */ jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+    /* @__PURE__ */ jsxs("div", { className: "rz-update__row", children: [
+      /* @__PURE__ */ jsxs("span", { className: "rz-update__title", children: [
+        "Studio ",
+        update.version,
+        " is available"
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "rz-update__link", onClick: () => setShowNotes((v) => !v), "aria-expanded": showNotes, children: "What\u2019s new" }),
+      update.previewUrl && /* @__PURE__ */ jsxs("a", { href: update.previewUrl, target: "_blank", rel: "noreferrer", className: "rz-update__link", children: [
+        "Preview ",
+        /* @__PURE__ */ jsx(OutboundArrow, {})
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "sm", onClick: run, disabled: busy, children: busy ? "Updating\u2026" : "Update" }),
+      onLater && /* @__PURE__ */ jsx("button", { type: "button", className: "rz-update__later", onClick: onLater, children: "Later" })
+    ] }),
+    showNotes && /* @__PURE__ */ 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__ */ jsx("p", { className: "rz-update__problem", children: problem })
+  ] });
+}
+function StudioShellFrame({ siteName, logoUrl, siteUrl = "/", user, role, nav, pinnedNav, branding, update = null, children }) {
   const pathname = usePathname() ?? "/admin";
+  useEffect(() => {
+    if (user) document.cookie = "rz-studio=1; Path=/; Max-Age=2592000; SameSite=Lax";
+  }, [user]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: STUDIO_CSS }),
-    /* @__PURE__ */ jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
+    /* @__PURE__ */ jsxs(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, siteUrl, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children: [
+      /* @__PURE__ */ jsx(UpdateStrip, { update, role }),
+      children
+    ] })
   ] });
 }
 
@@ -2883,51 +3042,6 @@ function RemoveItem({ typeId, slug }) {
     error && /* @__PURE__ */ 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] = useState("waiting");
-  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;
@@ -3826,12 +3940,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__ */ jsxs("div", { className: "acct-stack", children: [
+    /* @__PURE__ */ jsxs(Card, { className: "acct-card", children: [
+      /* @__PURE__ */ jsxs("h2", { className: "acct-title", children: [
+        "Studio ",
+        version
+      ] }),
+      !update && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx(UpdateBody, { update })
+    ] }),
+    /* @__PURE__ */ jsxs(Card, { className: "acct-card", children: [
+      /* @__PURE__ */ jsx("h2", { className: "acct-title", children: "How updates work" }),
+      /* @__PURE__ */ 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__ */ 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 = useRouter();
   const pathname = usePathname();
   const params = 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 });
@@ -3840,14 +3988,15 @@ function AccountTabs({ me, manages, team, branding, myUserId, myRole }) {
     active === "profile" && /* @__PURE__ */ jsx(ProfileTab, { email: me.email, name: me.name, displayName: me.displayName, avatarUrl: me.avatarUrl }),
     active === "password" && /* @__PURE__ */ jsx(PasswordTab, {}),
     active === "team" && manages && (team?.ok ? /* @__PURE__ */ jsx(TeamTab, { members: team.members, canInvite: team.canInvite, myUserId, myRole }) : /* @__PURE__ */ jsx("div", { className: "rz-alert admin__alert", children: team?.error ?? "Couldn\u2019t load the team." })),
-    active === "business" && manages && /* @__PURE__ */ jsx(BusinessTab, { initial: branding })
+    active === "business" && manages && /* @__PURE__ */ jsx(BusinessTab, { initial: branding }),
+    active === "studio" && manages && /* @__PURE__ */ 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__ */ jsxs("div", { className: "acct", children: [
     /* @__PURE__ */ jsx("h1", { className: "acct-h1", children: "Account" }),
     /* @__PURE__ */ jsx("p", { className: "acct-email", children: me.email }),
-    /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AccountTabs, { me, manages, team, branding, myUserId, myRole }) })
+    /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AccountTabs, { me, manages, team, branding, myUserId, myRole, update, version }) })
   ] });
 }
 
@@ -3920,7 +4069,7 @@ Open the avatar menu (top right) and choose **Sign out**.
     section: "start",
     title: "Finding your way around",
     summary: "The sidebar, the dashboard, the lists, and the avatar menu.",
-    keywords: ["sidebar", "dashboard", "navigation", "menu", "settings"],
+    keywords: ["sidebar", "dashboard", "navigation", "menu", "settings", "view website", "live site", "visit site"],
     body: `
 ## The sidebar
 
@@ -3932,9 +4081,13 @@ On a narrow screen the sidebar collapses to icons; press the arrow at the bottom
 
 Every row is one item: its title, date, status and a **View live** link. **+ New** at the top starts a new one. Click a title to edit it. The **Status** column links straight to a waiting change.
 
+## Getting to the live website
+
+Click the site name at the top left \u2014 it opens the live website in a new tab (hover and an arrow appears). The avatar menu has the same thing as **View website**. Each item's list row also has **View live** for that one page.
+
 ## The avatar menu
 
-Top right, your photo or initials. From here: **Account**, **Help center** (this page), a light/dark toggle, and **Sign out**.
+Top right, your photo or initials. From here: a light/dark toggle, **View website**, **Account**, **Help center** (this page), and **Sign out**.
 
 ## The Ask bubble
 
@@ -3981,6 +4134,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.
 `
   }
 ];
@@ -4801,6 +4976,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}.
 `
   }
 ];
@@ -5239,8 +5446,12 @@ function BackArrow() {
   ] });
 }
 
+// src/version.ts
+var ADMIN_VERSION = "0.15.0" ;
+
 // src/studio-ui/types.ts
 var ACTION_NAMES = [
+  "updateStudio",
   "publishContent",
   "removeContent",
   "mergeContentPr",
@@ -5260,6 +5471,6 @@ var ACTION_NAMES = [
   "remove"
 ];
 
-export { ACTION_NAMES, ContentEditor, GLOSSARY, HELP_ARTICLES, HELP_SECTIONS, Jargon, PublishPanel, RemoveItem, STUDIO_CSS, STUDIO_FACTS, StudioAcceptInvite, StudioAccount, StudioDashboard, StudioEdit, StudioHelp, StudioList, StudioNew, StudioNoAccess, StudioNotConfigured, StudioProvider, StudioPullRequest, StudioShellFrame, StudioSignIn, StudioTerm, copyFor, fillVars, helpAsText, joinTypes, publicDirOf, searchHelp, useEntry, useStudio };
+export { ACTION_NAMES, ADMIN_VERSION, ContentEditor, GLOSSARY, HELP_ARTICLES, HELP_SECTIONS, Jargon, PublishPanel, RemoveItem, STUDIO_CSS, STUDIO_FACTS, StudioAcceptInvite, StudioAccount, StudioDashboard, StudioEdit, StudioHelp, StudioList, StudioNew, StudioNoAccess, StudioNotConfigured, StudioProvider, StudioPullRequest, StudioShellFrame, StudioSignIn, StudioTerm, UpdateBody, UpdateStrip, canSeeUpdates, copyFor, fillVars, helpAsText, joinTypes, publicDirOf, searchHelp, useEntry, useStudio };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map