@realiizlabs/admin 0.13.2 → 0.14.1

package/dist/studio-ui/index.cjs

@@ -160,6 +160,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
+    children,
+    external && /* @__PURE__ */ jsxRuntime.jsx(OutboundArrow, {}),
+    forward && !external && /* @__PURE__ */ jsxRuntime.jsx(ForwardArrow, {})
+  ] });
+}
+function ForwardArrow() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m13 6 6 6-6 6" })
+  ] });
+}
+function OutboundArrow() {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7 17 17 7" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 7h10v10" })
+  ] });
+}
 var THEME_KEY = "rz-admin-theme";
 function useTheme(defaultTheme = "light") {
   const [theme, setTheme] = react.useState(defaultTheme);
@@ -211,12 +237,16 @@ var HelpIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ico, children:
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" })
 ] });
+var GlobeIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ico, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
+] });
 var OutIcon = () => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
   /* @__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 }) {
+function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl }) {
   const [open, setOpen] = react.useState(false);
   const wrap = react.useRef(null);
   react.useEffect(() => {
@@ -251,14 +281,19 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Theme" }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsxRuntime.jsx(ThemeToggle, { theme, onChange: onTheme }) })
       ] }),
-      (accountHref || helpHref) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-menu__sep" }),
+      (siteUrl || accountHref || helpHref) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-menu__sep" }),
+      siteUrl && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: siteUrl, target: "_blank", rel: "noreferrer", role: "menuitem", className: "rz-menu__item", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(GlobeIcon, {}),
+        "View website",
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsxRuntime.jsx(OutboundArrow, {}) })
+      ] }),
       accountHref && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: accountHref, role: "menuitem", className: "rz-menu__item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(UserIcon, {}),
         "Account"
       ] }),
       helpHref && /* @__PURE__ */ jsxRuntime.jsxs("a", { href: helpHref, role: "menuitem", className: "rz-menu__item", children: [
         /* @__PURE__ */ jsxRuntime.jsx(HelpIcon, {}),
-        "Help"
+        "Help center"
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-menu__sep" }),
       /* @__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: [
@@ -268,19 +303,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__ */ jsxRuntime.jsxs("header", { className: "rz-topbar", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("a", { href: homeHref, className: "rz-topbar__brand", children: [
-      logoUrl && /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { children: siteName }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-topbar__product", children: productName })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: siteName }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-topbar__product", children: productName }),
+          siteUrl && /* @__PURE__ */ jsxRuntime.jsx(OutboundArrow, {})
+        ]
+      }
+    ),
     user && role && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-topbar__right", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-topbar__greeting", "data-testid": "rz-greeting", children: [
         "Welcome back, ",
         firstNameOf(user)
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref })
+      /* @__PURE__ */ jsxRuntime.jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl })
     ] })
   ] });
 }
@@ -340,6 +384,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; }
@@ -514,7 +560,7 @@ var SHELL_CSS = `
 .rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }
 .rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }
 .rz-admin .realiiz-prose a { color: var(--signal); }
-/* The site's prose class picks a slate body colour for a light page; on the dark surface that reads as disabled. */
+/* The site's prose class picks a slate body color for a light page; on the dark surface that reads as disabled. */
 .rz-admin[data-theme="dark"] .realiiz-prose, .rz-admin[data-theme="dark"] .realiiz-prose :is(p, li, td, th, dd, dt, figcaption, strong, b, em, i, h1, h2, h3, h4, h5, h6) { color: var(--text-primary); }
 .rz-admin[data-theme="dark"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }
 .rz-admin[data-theme="dark"] .realiiz-prose a { color: var(--signal-dim); }
@@ -551,6 +597,7 @@ function AdminShell({
   signOutPath,
   accountHref,
   helpHref,
+  siteUrl,
   branding,
   defaultTheme = "light",
   children
@@ -567,6 +614,7 @@ function AdminShell({
         siteName: shownName,
         productName,
         logoUrl: shownLogo,
+        siteUrl,
         homeHref: basePath,
         user,
         role,
@@ -583,32 +631,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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
-    children,
-    external && /* @__PURE__ */ jsxRuntime.jsx(OutboundArrow, {}),
-    forward && !external && /* @__PURE__ */ jsxRuntime.jsx(ForwardArrow, {})
-  ] });
-}
-function ForwardArrow() {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m13 6 6 6-6 6" })
-  ] });
-}
-function OutboundArrow() {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7 17 17 7" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 7h10v10" })
-  ] });
-}
 function Card({ title, meta, note, children, actions, className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["rz-card", className].filter(Boolean).join(" "), children: [
     title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-card__title", children: title }),
@@ -689,7 +711,7 @@ function Tabs({ options, value, onChange, label = "Sections" }) {
 // src/studio-ui/css.ts
 var STUDIO_CSS = `
 /*
- * /admin \u2014 overrides only. Layout, colour and components come from
+ * /admin \u2014 overrides only. Layout, color and components come from
  * @realiizlabs/admin/shell (SHELL_CSS, injected by AdminShell). The Realiiz
  * palette is the package default, so this file just maps the shell's font
  * hooks onto the site's loaded fonts. To rebrand, redeclare tokens here:
@@ -812,7 +834,7 @@ var STUDIO_CSS = `
 .rz-admin .acct-dd__check { width: 1rem; flex-shrink: 0; color: var(--signal); font-weight: 700; }
 .rz-admin .acct-dd__text { display: flex; flex-direction: column; line-height: 1.3; }
 .rz-admin .acct-dd__hint { font-size: .74rem; color: var(--text-muted); }
-/* Team table: everything on one centre line, and the role menu may overflow the table (the shell
+/* Team table: everything on one center line, and the role menu may overflow the table (the shell
    clips .rz-table for rounded corners, so round the header cells by hand instead). */
 .rz-admin .acct-team { overflow: visible; }
 .rz-admin .acct-team thead th:first-child { border-top-left-radius: 8px; }
@@ -829,12 +851,55 @@ var STUDIO_CSS = `
 .rz-admin .rz-term__word:hover, .rz-admin .rz-term__word:focus-visible { text-decoration-color: var(--signal); outline: none; }
 .rz-admin .rz-term__tip { position: absolute; left: 0; top: calc(100% + 8px); z-index: 70; width: 272px; max-width: 80vw; padding: 12px 14px; border-radius: 8px; background: var(--text-primary); color: var(--surface-0); font-size: .8125rem; line-height: 1.4; font-weight: 400; box-shadow: 0 8px 24px rgba(14,23,38,.18); opacity: 0; pointer-events: none; transition: opacity .15s; }
 .rz-admin .rz-term__tip--open { opacity: 1; }
+
+/* ---- Help center ---------------------------------------------------- */
+.rz-admin .rz-help__search { position: relative; margin: 0 0 1.5rem; max-width: 44rem; }
+.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: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; }
+.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; }
+.rz-admin .rz-help__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
+.rz-admin .rz-help__card { display: flex; flex-direction: column; gap: .2rem; padding: .9rem 1rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--rz-radius); text-decoration: none; color: inherit; transition: border-color .15s; }
+.rz-admin .rz-help__card:hover { border-color: var(--signal); }
+.rz-admin .rz-help__meta { font-family: var(--rz-font-mono); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
+.rz-admin .rz-help__title { font-weight: 600; color: var(--text-primary); }
+.rz-admin .rz-help__summary { color: var(--text-secondary); font-size: .9rem; line-height: 1.5; }
+.rz-admin .rz-help__crumb { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--rz-font-mono); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); text-decoration: none; margin: 0 0 1rem; }
+.rz-admin .rz-help__crumb:hover { color: var(--signal); }
+.rz-admin .rz-help__prose { line-height: 1.65; color: var(--text-primary); }
+.rz-admin .rz-help__prose > * + * { margin-top: .85rem; }
+.rz-admin .rz-help__prose h2 { font-family: var(--rz-font-display); font-size: 1.1rem; font-weight: 600; margin-top: 1.75rem; }
+.rz-admin .rz-help__prose h3 { font-size: .95rem; font-weight: 600; margin-top: 1.25rem; }
+.rz-admin .rz-help__prose p, .rz-admin .rz-help__prose li { color: var(--text-secondary); }
+.rz-admin .rz-help__prose strong { color: var(--text-primary); font-weight: 600; }
+.rz-admin .rz-help__prose ul, .rz-admin .rz-help__prose ol { padding-left: 1.35rem; }
+.rz-admin .rz-help__prose li + li { margin-top: .3rem; }
+.rz-admin .rz-help__prose code { font-family: var(--rz-font-mono); font-size: .85em; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: .05em .35em; }
+.rz-admin .rz-help__prose pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--rz-radius); padding: .8rem 1rem; overflow-x: auto; }
+.rz-admin .rz-help__prose pre code { background: transparent; border: 0; padding: 0; font-size: .82rem; line-height: 1.55; }
+.rz-admin .rz-help__prose blockquote { margin: 0; padding: .2rem 0 .2rem 1rem; border-left: 3px solid var(--signal); color: var(--text-secondary); }
+.rz-admin .rz-help__prose a { color: var(--signal); text-decoration: none; }
+.rz-admin .rz-help__prose a:hover { color: var(--text-primary); }
+.rz-admin .rz-help__prose .rz-table td { white-space: normal; color: var(--text-secondary); }
+.rz-admin .rz-help__pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--separator); font-size: .875rem; }
+.rz-admin .rz-help__pager a { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-secondary); text-decoration: none; }
+.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); } }
 `;
-function StudioShellFrame({ siteName, logoUrl, user, role, nav, pinnedNav, branding, children }) {
+function StudioShellFrame({ siteName, logoUrl, siteUrl, user, role, nav, pinnedNav, branding, children }) {
   const pathname = navigation.usePathname() ?? "/admin";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: STUDIO_CSS }),
-    /* @__PURE__ */ jsxRuntime.jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
+    /* @__PURE__ */ jsxRuntime.jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, siteUrl, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
   ] });
 }
 
@@ -3395,26 +3460,6 @@ function StudioPullRequest({ pr, status, item }) {
     /* @__PURE__ */ jsxRuntime.jsx(Card, { className: "rz-card--narrow", children: /* @__PURE__ */ jsxRuntime.jsx(PublishPanel, { number: pr.number, htmlUrl: pr.html_url, merged: pr.merged, closed: pr.state === "closed" && !pr.merged, branch: pr.branch, removal: pr.removal, mergedSha: pr.mergeCommitSha, status, item }) })
   ] });
 }
-function StudioHelp() {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(PageHeader, { eyebrow: "Help", title: "Help centre", subtitle: "Everything about running your website from Studio, in plain English." }),
-    /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "rz-card--narrow", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { style: { marginTop: 0 }, children: [
-        "The full guide is on its way. In the meantime the ",
-        /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Ask" }),
-        " bubble in the bottom-right corner knows how Studio works \u2014 ask it anything, from \u201Cwhat does Publish do?\u201D to \u201Chow do I add a picture?\u201D."
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { marginBottom: 4 }, children: "Coming here soon:" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "acct-help-list", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Writing and editing a blog post \u2014 every field explained" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Pictures: choosing, sizing and where they go" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Save, checks, preview and Publish \u2014 the whole journey" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Fixing a change that \u201Cneeds fixing\u201D, discarding, removing a post" }),
-        /* @__PURE__ */ jsxRuntime.jsx("li", { children: "Your account, your team and putting your own name on Studio" })
-      ] })
-    ] })
-  ] });
-}
 function StudioSignIn({ url, anonKey, redirectTo, siteName, error }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-card", style: { maxWidth: 440, margin: "40px auto" }, children: [
     error === "link" && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-alert admin__alert", role: "alert", children: "That sign-in link didn't work \u2014 it may have expired or been used already. Request a new one below." }),
@@ -3834,9 +3879,1142 @@ function StudioAccount({ me, manages, team, branding, myUserId, myRole }) {
   ] });
 }
 
+// src/studio-ui/help/sections.ts
+var HELP_SECTIONS = [
+  { id: "start", title: "Quick start", blurb: "Ten minutes from signing in to your first published change." },
+  { id: "publishing", title: "Publishing a change", blurb: "Save, checks, preview, publish \u2014 and how to undo." },
+  { id: "blog", title: "Blog posts", blurb: "Every field on a post, and what it does for readers and Google." },
+  { id: "pictures", title: "Pictures", blurb: "Where to get one, what size, and how to drop it in." },
+  { id: "markdown", title: "Writing in Markdown", blurb: "Headings, lists, links, tables \u2014 the formatting the editor understands." },
+  { id: "events", title: "Events", blurb: "Dates, times, time zones, kinds, and what to do when plans change." },
+  { id: "account", title: "Account & team", blurb: "Your profile, your password, who else can sign in, your branding." },
+  { id: "trouble", title: "Troubleshooting", blurb: "When something doesn't look right \u2014 what it means and what to do." }
+];
+
+// src/studio-ui/help/quick-start.ts
+var QUICK_START = [
+  {
+    id: "what-is-studio",
+    section: "start",
+    title: "What Studio is (and isn't)",
+    summary: "A simple front end over the files that make up your website. Nothing goes live by accident.",
+    keywords: ["overview", "github", "repository", "how it works"],
+    body: `
+## What it is
+
+Studio is the publishing dashboard for {siteName}. It lets you write, edit and publish {types} without touching code or learning GitHub.
+
+Your website is stored as plain files in a private, backed-up folder on GitHub called a **repository**. Every version of every page is kept forever. Studio reads that folder and writes to it on your behalf.
+
+## Why it works this way
+
+Because every edit goes through the same three steps \u2014 **Save**, **Checks**, **Publish** \u2014 a broken page can't reach your visitors. The website is rebuilt with your change in a private test copy first. If something is wrong, you're told, and the live site keeps showing the last good version.
+
+## What it isn't
+
+- It isn't a page builder. The design of the site is fixed by {supportName}; Studio fills it with content.
+- It isn't instant. Publishing takes about two minutes end to end, on purpose.
+- It isn't the only way in. The same files can be edited on GitHub directly, so nothing is ever locked inside Studio.
+`
+  },
+  {
+    id: "signing-in",
+    section: "start",
+    title: "Signing in",
+    summary: "Email link by default; a password if you set one. No account to create.",
+    keywords: ["login", "magic link", "password", "email link"],
+    body: `
+## How it works
+
+Go to **/admin** on your website. Enter your email and press **Send me a sign-in link**. Open the email and click the link \u2014 you're in. The link is single-use and expires after a short while.
+
+There's no account to create: {supportName} invited your email address, which is what allows you in.
+
+## Prefer a password?
+
+Under the email form, click **Have a password? Sign in with it instead**. A password is optional \u2014 you set one under **Settings \u2192 Change Password** after signing in with an email link. Email links keep working either way.
+
+## Forgot your password?
+
+There's nothing to reset. Sign in with an email link, then set a new password under **Settings \u2192 Change Password**.
+
+## Signing out
+
+Open the avatar menu (top right) and choose **Sign out**.
+`
+  },
+  {
+    id: "finding-your-way",
+    section: "start",
+    title: "Finding your way around",
+    summary: "The sidebar, the dashboard, the lists, and the avatar menu.",
+    keywords: ["sidebar", "dashboard", "navigation", "menu", "settings", "view website", "live site", "visit site"],
+    body: `
+## The sidebar
+
+One item per kind of content this site publishes \u2014 on {siteName} that's {types}. Each opens a list of everything of that kind with its status. **Dashboard** at the top shows one card per kind with a count and how many changes are waiting. **Settings** at the bottom opens your account.
+
+On a narrow screen the sidebar collapses to icons; press the arrow at the bottom to expand it.
+
+## A list page
+
+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: a light/dark toggle, **View website**, **Account**, **Help center** (this page), and **Sign out**.
+
+## The Ask bubble
+
+If your site has one (bottom right), it answers questions about Studio from the same articles you're reading now. Ask it things like "how do I add a picture to a post?".
+`
+  },
+  {
+    id: "your-first-change",
+    section: "start",
+    title: "Your first change, start to finish",
+    summary: "Edit something small, save it, watch the checks, preview it, publish it.",
+    keywords: ["tutorial", "walkthrough", "first post", "publish"],
+    body: `
+Pick something small \u2014 a typo in an existing post is perfect.
+
+1. In the sidebar, open the list, then click the item's title.
+2. Make the edit. The form checks required fields as you go; a red message means something needs attention before you can save.
+3. Press **Save changes** (or **Save and continue** for a new item). Studio writes the file and opens a **change**. Nothing is live yet.
+4. You land on the change page. A tracker shows **Saved \u2192 Checks \u2192 Published \u2192 Live**. Checks take a minute or two; the page refreshes itself.
+5. When checks pass, **Preview the change** opens a private copy of the website with your edit in it. Look at it on your phone too.
+6. Press **Publish**. The **Live** step spins until the website has really rebuilt (about two minutes), then **View live** unlocks.
+
+That's the whole loop. Every edit you ever make is these six steps.
+
+## If checks fail
+
+The status becomes **Needs fixing** and the message names the problem. Open the item, fix it, save again \u2014 the same change re-runs its checks. Nothing was published.
+`
+  },
+  {
+    id: "statuses",
+    section: "start",
+    title: "What the statuses mean",
+    summary: "Live, Checking\u2026, Ready to publish, Needs fixing, New \u2014 and what to do for each.",
+    keywords: ["status", "pill", "checking", "ready", "needs fixing", "live", "new"],
+    body: `
+| Status | What it means | What to do |
+| --- | --- | --- |
+| **Live** | What's on the website now. No change waiting. | Nothing \u2014 or click the title to start an edit. |
+| **Checking\u2026** | You saved; the test build is running. | Wait a minute or two. The page refreshes itself. |
+| **Ready to publish** | Checks passed. | Open the change and press **Publish** (preview first if you like). |
+| **Needs fixing** | The test build failed. Nothing was published. | Open the item, fix what the message names, save again. |
+| **New \xB7 \u2026** | A brand-new item that exists only in a change. | It isn't on the website until you publish it. |
+| **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.
+`
+  }
+];
+
+// src/studio-ui/help/publishing.ts
+var PUBLISHING = [
+  {
+    id: "save-checks-publish-live",
+    section: "publishing",
+    title: "Save, Checks, Publish, Live \u2014 the journey",
+    summary: "What happens at each step, how long it takes, and why there are four of them.",
+    keywords: ["pull request", "change", "PR", "build", "deploy", "how long"],
+    body: `
+## Save
+
+You press **Save**. Studio writes your item as a file and opens a **change** \u2014 GitHub calls this a pull request. Think of it as a draft handed in for checking. The live website hasn't changed.
+
+## Checks
+
+The moment a change exists, the website builds a private test copy with your change in it. This catches the things that would break a page: a required field left empty, a picture that isn't there, a date that doesn't exist. It usually takes one to two minutes. The change page shows a tracker and refreshes itself \u2014 you can leave and come back.
+
+## Publish
+
+When the checks pass, the status becomes **Ready to publish** and the **Publish** button unlocks. **Preview the change** appears too: a private copy of the real website with your edit in it, so you see exactly how it will look. Pressing **Publish** sends the change to the live site.
+
+## Live
+
+The website rebuilds itself with your change \u2014 about two minutes. The **Live** step keeps spinning until that's really done, then **View live** unlocks. If you look at the website before Live turns green you'll still see the old version. That's normal.
+
+## Why four steps
+
+Because it means a broken page can never reach a visitor. Everything you publish has already been built once, successfully, with your change in it.
+`
+  },
+  {
+    id: "preview-a-change",
+    section: "publishing",
+    title: "Previewing before you publish",
+    summary: "See your edit on the real site design, privately, before anyone else can.",
+    keywords: ["preview", "test copy", "private link"],
+    body: `
+## What it is
+
+After checks pass, the change page shows **Preview the change**. It opens a private copy of the website \u2014 same design, same everything \u2014 with your edit in it.
+
+## Why you'd use it
+
+Pictures, long titles and tables can look different on the real page than in the editor. Check on your phone as well; most visitors are on one.
+
+## Where it goes
+
+The preview link is private to the change. It isn't on the live website and won't be found by Google. It disappears once the change is published or discarded.
+
+## Notes
+
+- Editing again after previewing? Save, wait for the new checks, preview again.
+- New pictures show in the preview exactly as they'll go live.
+`
+  },
+  {
+    id: "publish-a-change",
+    section: "publishing",
+    title: "Publishing",
+    summary: "Press Publish once checks pass; wait for Live to turn green.",
+    keywords: ["publish", "go live", "merge"],
+    body: `
+1. Open the change \u2014 from the item's **Status** link, the notice at the top of the item, or the dashboard.
+2. The tracker should show **Checks** green and the status **Ready to publish**.
+3. Press **Publish**.
+4. Wait for **Live** to turn green (about two minutes). **View live** unlocks the moment the website has rebuilt.
+
+## Who can publish
+
+Editors and owners. Every publish is recorded with your name, so it's always clear who changed what.
+
+## If Publish is disabled
+
+Checks haven't passed yet (wait), or failed (fix and save again). The button never unlocks on a failing change.
+`
+  },
+  {
+    id: "needs-fixing",
+    section: "publishing",
+    title: "When a change 'needs fixing'",
+    summary: "The test build failed. Nothing was published. Fix the named problem and save again.",
+    keywords: ["failed", "error", "red", "checks failed", "broken"],
+    body: `
+## What happened
+
+The website was rebuilt with your change and something broke. The live site is untouched \u2014 it still shows the last good version.
+
+## What to do
+
+1. Open the item. The message at the top names the problem \u2014 most often a required field, a picture path, or a date/time that isn't valid.
+2. Fix it and press **Save**. The **same change** re-runs its checks; you don't get a second one.
+3. When the status flips to **Ready to publish**, publish as usual.
+
+## If the message doesn't make sense
+
+Press **Discard this change** to throw the edit away and start over, or send the message to {supportName}. Copy the whole line \u2014 the exact words matter.
+`
+  },
+  {
+    id: "discard-a-change",
+    section: "publishing",
+    title: "Discarding a change",
+    summary: "Throw away unpublished edits. The live site is never touched.",
+    keywords: ["undo", "cancel", "throw away", "revert", "discard"],
+    body: `
+## What it does
+
+Deletes the waiting change and everything in it \u2014 the edited text and any new pictures. The item goes back to **Live** exactly as it was.
+
+## How
+
+On the change page, scroll down to **Discard this change**. Confirm. Done.
+
+## When you'd use it
+
+- You changed your mind.
+- Checks failed and starting fresh is easier than fixing.
+- You saved the wrong item by accident.
+
+Discarding is only for unpublished work. Something that's already live is edited by saving a new change on top of it.
+`
+  },
+  {
+    id: "remove-an-item",
+    section: "publishing",
+    title: "Removing an item from the website",
+    summary: "Take a post or event down \u2014 through the same checked, publishable change.",
+    keywords: ["delete", "unpublish", "take down", "remove"],
+    body: `
+## What it is
+
+Removing takes an item off the website. Like every edit, it travels as a change: **Removing\u2026**, then **Removal ready**, then you **Publish** the removal.
+
+## How
+
+1. Open the item.
+2. At the bottom, press **Remove this post from the website** (for other kinds the link names them \u2014 "Remove this event\u2026") and confirm with **Yes, remove it**.
+3. Publish the removal from the change page when it's ready. **Cancel this removal** on that page keeps the item.
+
+## Good to know
+
+- Until you publish, the item is still live. Discarding the change keeps it.
+- Every version is kept in the repository, so {supportName} can bring a removed item back if you ever need it.
+- Pictures that belonged only to that item go with it.
+`
+  },
+  {
+    id: "two-people-editing",
+    section: "publishing",
+    title: "Two people editing the same item",
+    summary: "The second to publish is told the file changed first. Nothing is silently overwritten.",
+    keywords: ["conflict", "overwrite", "team", "collision"],
+    body: `
+## What happens
+
+If someone published a change to an item after you opened it, your publish is refused with a note that the file changed first. Your edit isn't lost \u2014 it's still in your change.
+
+## What to do
+
+Open the item fresh (it now shows the newest version), make your edit again, save, and publish.
+
+## Avoiding it
+
+One item, one change at a time is the rule Studio enforces. If several people write, agree who owns which items, or finish one change before starting the next.
+`
+  }
+];
+
+// src/studio-ui/help/blog.ts
+var BLOG = [
+  {
+    id: "new-post",
+    section: "blog",
+    title: "Writing a new blog post",
+    summary: "Title, web address, excerpt, date, tags, a header picture, the article \u2014 then Save and continue.",
+    keywords: ["new post", "article", "write", "create post"],
+    body: `
+1. Sidebar \u2192 **Blog posts** \u2192 **+ New post**.
+2. Type the **Title**. The **Web address** fills itself from it \u2014 fine to leave.
+3. Write the **Excerpt** (the teaser on the blog page), check the **Publish date**, add exactly three **Tags**.
+4. Drop in a **Header image** and describe it in **Header image description**. A post needs a header picture before it can go live.
+5. Write the article in **Post content** \u2014 see *Writing in Markdown*.
+6. Open **Search & social** and fill **Meta description** at least.
+7. Press **Save and continue**, wait for the checks, preview, **Publish**.
+
+## Where it goes
+
+The post appears on the blog index, in the RSS feed and in the sitemap automatically, at yoursite.com/blog/your-web-address.
+
+## Tips
+
+- Write the post first, polish the search fields last.
+- Sort the picture before you start \u2014 it's the step most likely to hold you up.
+- Saving early is fine: you can keep editing and saving onto the same change until you publish.
+`
+  },
+  {
+    id: "post-fields",
+    section: "blog",
+    title: "Every field on a blog post",
+    summary: "What each field does, where it shows up, and what a good one looks like.",
+    keywords: ["fields", "title", "slug", "excerpt", "tags", "author", "featured", "publish date", "last updated"],
+    body: `
+## Title (H1)
+
+The headline at the top of the post and the text of links to it. Say what the reader gets. Length isn't limited, but 50\u201370 characters reads best in lists.
+
+## Web address (slug)
+
+The last part of the post's link: my-first-post \u2192 yoursite.com/blog/my-first-post. Lowercase words joined by hyphens, no spaces. It fills itself from the title; shorten it if the title is long. Changing it after publishing changes the link \u2014 old links break \u2014 so settle it before the first publish.
+
+## Excerpt
+
+The one- or two-sentence teaser shown on the blog index under the title. Not the first paragraph again; a reason to click.
+
+## Publish date / Last updated
+
+Shown on the post and used to order the list. **Last updated** is optional \u2014 set it when you revise a published post and readers see "Updated \u2026".
+
+## Author
+
+How you're credited. Fills from your profile's "Name on blog posts" (Settings \u2192 My Profile).
+
+## Tags
+
+Exactly three, lowercase, hyphens between words (small-business, ai-tools). Type one and press Enter or a comma. Tags group related posts and drive the "related posts" links.
+
+## Header image / Header image description
+
+The picture at the top of the post and on cards. The description is the alt text \u2014 say what's in the picture for readers who can't see it. See *Pictures*.
+
+## Featured post
+
+Pins the post to the top of the blog index. One or two at a time is plenty.
+
+## Post content
+
+The article itself, in Markdown. See *Writing in Markdown*.
+`
+  },
+  {
+    id: "search-and-social",
+    section: "blog",
+    title: "The Search & social fields",
+    summary: "Search title, meta description, focus keyword, social image, canonical \u2014 what Google and social cards see.",
+    keywords: ["seo", "meta description", "search title", "focus keyword", "canonical", "og image", "social share", "google"],
+    body: `
+These sit in their own group under the main fields. Readers never see them on the page \u2014 search engines and social networks do.
+
+## Search title
+
+What Google shows as the blue link and what the browser tab says. Aim for 50\u201360 characters including your site name. Blank means the Title is used. The gauge under the field turns green inside the target range.
+
+## Meta description
+
+The gray snippet under the link in Google results. 120\u2013155 characters: what the post covers and why to read it. Google may write its own, but a good one usually wins.
+
+## Focus keyword
+
+The single phrase this post should rank for ("small business ai audit"). Never shown; used for reporting. One per post.
+
+## Social share image
+
+The picture shown when the link is shared on LinkedIn, Facebook or in messages. 1200 \xD7 630 works everywhere. Blank reuses the header image \u2014 usually fine.
+
+## Canonical URL
+
+Advanced. Only if the same article was published somewhere else first (LinkedIn, Medium): paste that original link so Google credits it and doesn't treat yours as a copy. Otherwise leave blank.
+`
+  },
+  {
+    id: "edit-a-post",
+    section: "blog",
+    title: "Editing a published post",
+    summary: "Open it, change it, save \u2014 the live version stays up until you publish the change.",
+    keywords: ["edit", "update", "revise", "change post"],
+    body: `
+1. Sidebar \u2192 **Blog posts** \u2192 click the title.
+2. Existing posts open in **Preview** so you can read first; click **Edit Markdown** to change the text.
+3. Make your edits. Consider setting **Last updated** to today.
+4. Press **Save changes**, wait for checks, preview, **Publish**.
+
+## Good to know
+
+- If a change is already waiting for this post, a notice at the top says so and links to it. Saving updates that change.
+- Renaming the **Web address** breaks old links. If you must, ask {supportName} to add a redirect.
+- Nothing you do here changes the live post until you press Publish.
+`
+  },
+  {
+    id: "post-tips",
+    section: "blog",
+    title: "Writing posts that work",
+    summary: "Structure, length, headings, links \u2014 what makes a post readable and findable.",
+    keywords: ["tips", "writing", "structure", "length", "headings"],
+    body: `
+- **One idea per post.** If you have two, write two posts and link them.
+- **Say the answer early.** The first paragraph should tell a hurried reader what they'll learn.
+- **Use section headings** every 200\u2013300 words. Readers scan; Google reads headings too.
+- **Short paragraphs.** Two to four sentences. Phones make long paragraphs a wall.
+- **Link to your own pages** where it helps ("we explain this on our services page") and to sources you quote.
+- **800\u20131,500 words** suits most topics. Shorter is fine if it's complete; longer is fine if it earns it.
+- **Pictures with alt text**, one near the top and one wherever a picture explains faster than words.
+- **Finish with a next step**: a related post, a contact page, a question to think about.
+`
+  }
+];
+
+// src/studio-ui/help/pictures.ts
+var PICTURES = [
+  {
+    id: "where-pictures-come-from",
+    section: "pictures",
+    title: "Getting a picture to use",
+    summary: "Your phone, a stock library, Canva, or an AI image tool \u2014 make it outside Studio, then drop it in.",
+    keywords: ["stock photo", "canva", "ai image", "unsplash", "photo", "camera", "create image"],
+    body: `
+Studio doesn't make pictures; it takes the ones you give it. Four good sources:
+
+## Your phone
+
+Real photos of your work, your team, your space beat stock every time. Landscape (wider than tall) suits headers. Wipe the lens.
+
+## A stock library
+
+Unsplash, Pexels and Pixabay are free for commercial use. Search a feeling, not an object ("focused workshop" beats "laptop"). Download the large size.
+
+## Canva (or similar)
+
+For header images with text on them and for social share images. Start from a 1200 \xD7 630 template for social, 1600 \xD7 900 for headers. Export as JPG or PNG.
+
+## An AI image tool
+
+ChatGPT, Midjourney and the rest can make a fitting illustration in a minute. Describe the scene, the mood and "no text" (AI text is usually garbled). Download the largest version offered.
+
+## Then
+
+Save it to your computer and drop it onto the picture field in Studio \u2014 see *Adding a picture to a post or event*. Studio handles the resizing.
+
+## Rights
+
+Only use pictures you took, bought, generated, or that are licensed for commercial use. When in doubt, ask {supportName}.
+`
+  },
+  {
+    id: "add-a-picture",
+    section: "pictures",
+    title: "Adding a picture to a post or event",
+    summary: "Drop, choose or paste. It's shrunk in your browser and saved with the item when you press Save.",
+    keywords: ["upload", "header image", "hero", "drop zone", "drag", "paste image"],
+    body: `
+## The picture fields
+
+**Header image** (the big one at the top) and **Social share image** (for link previews) are drop zones. Drag a file onto one, click it to choose a file, or click it and paste (Cmd/Ctrl+V) a copied image.
+
+## Pictures inside the text
+
+In **Post content**, put the cursor where the picture goes and press the toolbar's **Image** button, then choose the file. A line like \`![description](/blog/your-post/picture.webp)\` is inserted \u2014 edit the description in the square brackets to say what's in the picture.
+
+## What happens next
+
+- Nothing is uploaded when you pick. The picture travels with the item when you press **Save**, into the same change, and goes live when you **Publish**. Discarding the change discards its pictures too.
+- Your browser shrinks the picture first (about 1600 pixels wide, WebP format, usually 100\u2013400 KB), so pages stay fast. Accepted: JPG, PNG or WebP up to 10 MB.
+- Pictures are named after the item's **Web address**, so fill that in first. The header image becomes /blog/your-post.webp; pictures in the text go under /blog/your-post/.
+
+## Removing or replacing
+
+Drop a new picture on the field to replace it, or use the field's **Remove** to clear it. The change goes live with the next Publish.
+`
+  },
+  {
+    id: "picture-sizes",
+    section: "pictures",
+    title: "Sizes and shapes that work",
+    summary: "Landscape for headers, 1200 \xD7 630 for social, square for logos and avatars.",
+    keywords: ["size", "dimensions", "aspect ratio", "resolution", "1200x630", "square"],
+    body: `
+| Use | Best shape | Minimum |
+| --- | --- | --- |
+| Header image | Landscape, about 16:9 | 1600 pixels wide |
+| Social share image | 1.91:1 (1200 \xD7 630) | 1200 \xD7 630 |
+| Picture in the text | Any; landscape reads best | 1200 pixels wide |
+| Profile photo | Square, face centered | 400 \xD7 400 |
+| Business logo | Square or wide, on a plain background | 400 pixels on the short side |
+| Favicon (browser-tab icon) | Square, simple shape | 256 \xD7 256 |
+
+## Why these
+
+Bigger than needed is fine \u2014 Studio shrinks. Smaller than needed looks soft on large screens and can't be fixed later. Text on a header image gets cropped on phones; keep it near the center.
+
+## File size
+
+Don't worry about it. Studio converts everything to WebP at web size. The 10 MB limit is per original file.
+`
+  },
+  {
+    id: "alt-text",
+    section: "pictures",
+    title: "Picture descriptions (alt text)",
+    summary: "One sentence saying what's in the picture \u2014 for screen readers and for Google.",
+    keywords: ["alt text", "accessibility", "description", "screen reader"],
+    body: `
+## What it is
+
+Every picture has a short text description that's read aloud to visitors who use a screen reader and shown if the picture can't load. Google reads it too.
+
+## Where it goes
+
+The **Header image description** field, and the words in square brackets for pictures in the text: \`![A packed workshop room with the speaker at a whiteboard](\u2026)\`.
+
+## How to write one
+
+Say what's in the picture as if describing it over the phone. "Two people reviewing a report at a kitchen table" \u2014 not "image" or "photo123" and not a list of keywords. Decorative pictures can have a short description; pictures that carry information need a full one.
+`
+  }
+];
+
+// src/studio-ui/help/markdown.ts
+var MARKDOWN = [
+  {
+    id: "the-editor",
+    section: "markdown",
+    title: "The content editor",
+    summary: "Edit Markdown or Preview, one toolbar row, Expand for a full window.",
+    keywords: ["editor", "toolbar", "preview", "expand", "fullscreen"],
+    body: `
+## Two tabs
+
+**Edit Markdown** is where you type. **Preview** shows exactly how the website will render it \u2014 same fonts, same spacing. An existing item opens in Preview so you can read first; a blank one opens in Edit.
+
+## The toolbar
+
+Buttons work on your selection and toggle on and off. Left to right: **Bold**, **Italic** \xB7 **Section heading**, **Sub-heading**, **Bulleted list**, **Numbered list**, **Quote** \xB7 **Link**, **Inline code** \xB7 Insert: **Image**, **Separator (\xB7)**, **Divider line**. When the cursor is inside a table, row and column buttons appear.
+
+Hover a button for its name and shortcut. **Bold** is Cmd/Ctrl+B, **Italic** is Cmd/Ctrl+I.
+
+## Expand
+
+The arrows button at the right of the toolbar fills the window with the editor. Press **Esc** or the button again to come back.
+
+## Why Markdown
+
+It's plain text with a few marks \u2014 no hidden formatting to fight, it never breaks, and it reads fine even raw. You'll learn all of it in ten minutes; the toolbar does the typing for you anyway.
+`
+  },
+  {
+    id: "markdown-basics",
+    section: "markdown",
+    title: "Markdown in ten minutes",
+    summary: "Paragraphs, headings, bold and italic, lists, links, quotes.",
+    keywords: ["markdown", "syntax", "formatting", "bold", "italic", "heading", "list", "link", "quote"],
+    body: `
+## Paragraphs
+
+Just type. Leave a blank line between paragraphs. A single line break inside a paragraph is ignored, so don't press Enter to wrap lines.
+
+## Headings
+
+\`\`\`
+## A section heading
+### A smaller sub-heading
+\`\`\`
+
+Use \`##\` for the sections of your post and \`###\` under them. The title of the post is already the top heading, so never use a single \`#\`.
+
+## Bold and italic
+
+\`\`\`
+**bold**  _italic_  **_both_**
+\`\`\`
+
+## Lists
+
+\`\`\`
+- first point
+- second point
+  - a point under it (indent two spaces)
+
+1. first step
+2. second step
+\`\`\`
+
+Leave a blank line before a list.
+
+## Links
+
+\`\`\`
+[the words people click](https://example.com)
+[our services page](/services)
+\`\`\`
+
+Select words and press the **Link** button; it wraps them and puts the cursor where the address goes.
+
+## Quotes
+
+\`\`\`
+> Something someone said, or a callout worth setting apart.
+\`\`\`
+
+## Small touches
+
+\`\`\`
+Some \`code\` or a product name in a fixed-width font
+---            (a divider line across the page)
+Date \xB7 Place   (the \xB7 separator, from the Insert menu)
+\`\`\`
+`
+  },
+  {
+    id: "markdown-tables",
+    section: "markdown",
+    title: "Tables",
+    summary: "Pipes and dashes; the toolbar adds rows and columns when you're inside one.",
+    keywords: ["table", "grid", "columns", "rows"],
+    body: `
+## The shape
+
+\`\`\`
+| Plan | Price | Best for |
+| --- | --- | --- |
+| Starter | $20/mo | One person |
+| Team | $60/mo | Up to five |
+\`\`\`
+
+The first line is the header row; the line of dashes is required; every row has the same number of \`|\` separators. Spacing inside the cells doesn't matter \u2014 Preview lines everything up.
+
+## Editing
+
+Put the cursor anywhere in a table and the toolbar shows **+ Row**, **\u2212 Row**, **+ Col**, **\u2212 Col**. They act on the row or column the cursor is in.
+
+## Good to know
+
+- Keep cells short. Long text wraps and the table gets tall on phones.
+- Bold and links work inside cells; lists and headings don't.
+- Three columns is comfortable on a phone; five is the practical limit.
+`
+  },
+  {
+    id: "markdown-images",
+    section: "markdown",
+    title: "Pictures inside the text",
+    summary: "The Image button inserts one; the square brackets hold the description.",
+    keywords: ["inline image", "image in post", "figure"],
+    body: `
+## Insert
+
+Put the cursor on its own blank line where the picture should appear and press the **Image** button in the toolbar. Choose the file. Studio inserts:
+
+\`\`\`
+![Describe the picture here](/blog/your-post/picture-name.webp)
+\`\`\`
+
+Replace the words in the square brackets with a real description (see *Picture descriptions*). Leave the address alone \u2014 it's where the picture will live once published.
+
+## Placement
+
+A picture on its own line spans the text column. Put one near the top of a long post and then wherever a picture explains faster than words. Don't put text on the same line as the picture.
+
+## Preview shows it
+
+Even before you save, **Preview** shows the new picture in place. After checks, **Preview the change** shows it on the real page.
+`
+  },
+  {
+    id: "markdown-gotchas",
+    section: "markdown",
+    title: "Things that trip people up",
+    summary: "Blank lines, pasted formatting, straight quotes, and where headings start.",
+    keywords: ["problem", "not rendering", "paste from word", "weird formatting"],
+    body: `
+- **My list runs into the paragraph above.** Leave a blank line before the list.
+- **My heading shows a # sign.** Put a space after the hashes: \`## Heading\`, not \`##Heading\`.
+- **Pasting from Word or Google Docs** brings hidden formatting. Paste, then check Preview; if it looks odd, paste again as plain text (Cmd/Ctrl+Shift+V) and add headings with the toolbar.
+- **A link doesn't work.** The address must start with https:// (or / for a page on your own site). No spaces inside the parentheses.
+- **Two line breaks in a row but no gap.** That's a blank line \u2014 it starts a new paragraph. To force a gap without text, a divider line \`---\` is the honest choice.
+- **Emoji and special characters** are fine. Just type them.
+`
+  }
+];
+
+// src/studio-ui/help/events.ts
+var EVENTS = [
+  {
+    id: "new-event",
+    section: "events",
+    title: "Adding an event",
+    summary: "Title, what kind, date and times, where, a link \u2014 save, check, publish. Upcoming first on the site.",
+    keywords: ["new event", "add event", "calendar", "appearance", "talk", "show", "workshop"],
+    body: `
+Events are anything with a date: a workshop, a show, a talk, a podcast appearance, an open house. If {siteName} has an events section it appears in the sidebar under its own name.
+
+1. Sidebar \u2192 the events list \u2192 **+ New**.
+2. **Title**, then check the **Web address** it suggests.
+3. **One-line summary** \u2014 what it is and who it's for. Shown in the list.
+4. **What kind of event**. Pick from the list, or choose **Other** and type a **Custom kind** ("Co-Keynote", "Wedding", "Pop-up").
+5. **Date**, then **Start** and **End** times if it isn't all-day. Set **Time zone** only if the event isn't in the site's home zone.
+6. **Where** \u2014 an address, a room, or "Online".
+7. **Link for details** \u2014 the event's own page, if it has one (tickets, the venue, a livestream).
+8. A **Picture** and its description if you have one.
+9. Write the long description below, press **Save and continue**, wait for checks, preview, **Publish**.
+
+## Where it goes
+
+The site's events page lists upcoming events first, then past ones. Each event has its own page at yoursite.com/\u2026/your-web-address with the details and your description. Search engines get an Event listing automatically.
+`
+  },
+  {
+    id: "event-fields",
+    section: "events",
+    title: "Every field on an event",
+    summary: "Kind and custom kind, date, times, time zone, where, link, pictures.",
+    keywords: ["fields", "kind", "custom kind", "date", "start time", "end time", "time zone", "location"],
+    body: `
+## Title / Web address / One-line summary
+
+Same as a blog post: the name, the link, the teaser. Keep the summary to one or two sentences \u2014 it's shown in the list and to search engines.
+
+## What kind of event / Custom kind
+
+The kind is the small label on the event (Workshop, Talk, Podcast\u2026). The list is set for your site. If yours isn't on it, choose **Other** and type your own in **Custom kind** \u2014 it's shown exactly as you type it.
+
+## Date
+
+The day, picked from the calendar. Must be a real date.
+
+## Start / End
+
+24-hour times, e.g. 14:00 to 15:00. Leave both empty for an all-day event. End must be after Start.
+
+## Time zone
+
+Leave empty and the site's home zone is used. Set it when the event happens somewhere else \u2014 a talk in Denver for a New York site. Visitors see the time in the event's zone with its name, so nobody shows up an hour off.
+
+## Where
+
+Free text: an address, "Studio B", or "Online". Anything with the word "online" is marked as an online event for search engines.
+
+## Link for details
+
+The event's own web page. Shown as **Event website** on the event page. Not the same as an RSVP link (see *Tickets, venue and appearance fields*).
+
+## Picture / Picture description / Social share image
+
+As for blog posts. See *Pictures*.
+
+## Canceled, Cancellation note, Moved to, Previous date
+
+For when plans change. See *When an event is canceled or moves*.
+`
+  },
+  {
+    id: "event-changes",
+    section: "events",
+    title: "When an event is canceled or moves",
+    summary: "Keep it listed and say so \u2014 don't delete it. Two fields each for canceled and moved.",
+    keywords: ["canceled", "cancelled", "postponed", "rescheduled", "moved", "new date"],
+    body: `
+People who saw the original listing will come back to it. A vanished event tells them nothing; a marked one tells them everything.
+
+## Canceled
+
+Tick **Canceled** and, optionally, write a **Cancellation note** ("Postponed \u2014 new date coming soon"). The event stays in the list with a Canceled label and a line through the title; its page says the same. Any RSVP button is hidden.
+
+## Moved to a new date
+
+1. Create the event again with the new date \u2014 a new item with its own web address.
+2. On the **old** event, set **Moved to** to the new event's web address, and **Previous date** if you want the new one to say when it was originally planned.
+
+The old listing shows "Rescheduled" with a link to the new date. The new one is a normal upcoming event.
+
+## Why not just edit the date?
+
+You can, for small corrections. But once people have shared the link or put it in a calendar, a visible "moved" trail avoids no-shows on the wrong day.
+
+## After it's over
+
+Nothing to do. Past events move to the **Past** section automatically the day after they end.
+`
+  },
+  {
+    id: "event-extras",
+    section: "events",
+    title: "Tickets, venue and appearance fields",
+    summary: "Extra groups a site may have switched on: RSVP and capacity, a named venue, host and recording links.",
+    keywords: ["rsvp", "tickets", "capacity", "private event", "sign-ups closed", "venue", "host", "recording", "slides"],
+    body: `
+Some sites need more than the core fields. {supportName} switches these groups on per site; if you don't see them, your site doesn't use them.
+
+## Tickets & RSVP
+
+- **RSVP or ticket link** \u2014 where people sign up or buy. Shown as a prominent **RSVP** button until the event starts.
+- **Capacity** \u2014 the number of places, for your reference and for search engines.
+- **Sign-ups closed** \u2014 keeps the event listed but replaces the RSVP button with "Sign-ups are closed."
+- **Private event** \u2014 listed with a Private label, no RSVP button, "Invited guests only." Use it for events you want on the calendar but not open to the public.
+
+## Venue
+
+- **Venue** \u2014 the named place ("The Grand Hall"). **Where** then holds extra directions or the room.
+
+## Appearance details
+
+For talks, podcasts and interviews you take part in rather than host:
+
+- **Hosted or published by** \u2014 the conference, the podcast, the organization.
+- **Recording link** \u2014 added afterward; past events then show **Watch or listen**.
+- **Slides link** \u2014 if you share them.
+`
+  }
+];
+
+// src/studio-ui/help/account.ts
+var ACCOUNT = [
+  {
+    id: "my-profile",
+    section: "account",
+    title: "My Profile: your name, your photo, your byline",
+    summary: "Full name for the greeting, a separate name for blog posts, and a profile photo.",
+    keywords: ["profile", "name", "photo", "avatar", "byline", "author name", "email"],
+    body: `
+**Settings** (sidebar, or avatar menu \u2192 **Account**) \u2192 **My Profile**.
+
+## Full name
+
+How you're greeted in Studio and how teammates see you in the Team tab.
+
+## Name on blog posts
+
+How you're credited as the author of a post \u2014 "Jane Doe" or "The {siteName} team". Leave blank to use your full name. New posts pick this up in their **Author** field.
+
+## Your photo
+
+Under **Avatar**, **Choose a picture** (or drop one on it). Square works best; it's shrunk automatically. **Replace** or **Remove** any time. It shows in the top bar and the avatar menu \u2014 never on the public website.
+
+## Email
+
+Your email is your login and can't be changed here. Ask {supportName} if it needs to change.
+
+Press **Save** after editing the name fields; pictures save the moment you choose them.
+`
+  },
+  {
+    id: "change-password",
+    section: "account",
+    title: "Change Password",
+    summary: "Optional. Email links always work; a password is a second way in.",
+    keywords: ["password", "reset password", "forgot"],
+    body: `
+**Settings \u2192 Change Password**. Enter a **New password** twice. At least 10 characters \u2014 a short sentence you'll remember is ideal.
+
+## Using it
+
+On the sign-in page, click **Have a password? Sign in with it instead** under the email form.
+
+## Forgot it?
+
+There's nothing to reset. Sign in with an email link as usual, then set a new password here.
+
+## Do I need one?
+
+No. Email links are the default and are safer for most people. A password helps if you sign in many times a day or from a device where checking email is awkward.
+`
+  },
+  {
+    id: "team",
+    section: "account",
+    title: "Team: who can sign in",
+    summary: "Invite by email, choose owner or editor, resend or revoke, remove. Owners only.",
+    keywords: ["invite", "team", "editor", "owner", "roles", "remove user", "resend invite", "revoke"],
+    body: `
+**Settings \u2192 Team** \u2014 visible to owners.
+
+## Inviting someone
+
+Press **Invite someone**, enter their email, choose a **Role**, send. They get an email with a sign-in link \u2014 no password to set up. Until they click it, they're listed as pending; **Resend** sends the email again, **Revoke** withdraws it.
+
+## Roles
+
+- **Editor** \u2014 writes, edits, publishes and removes content. Can't manage the team or the business details.
+- **Owner** \u2014 everything an editor can do, plus Team and Business. A site always keeps at least one owner.
+
+{supportName} can reach every site without being listed in its team.
+
+## Removing someone
+
+**Remove from this site** next to their name, then **Yes, remove**. They lose access to {siteName} only; anything they published stays. If they also work on another site, their login survives there.
+
+## If the Team tab says inviting isn't set up
+
+Invitations need one extra piece of configuration on the server. Ask {supportName} to switch it on; everything else in Studio works without it.
+`
+  },
+  {
+    id: "business-branding",
+    section: "account",
+    title: "Business: your name and logo on Studio",
+    summary: "Business name, contact details, logo and favicon. Changes Studio's header \u2014 never the public website.",
+    keywords: ["branding", "logo", "favicon", "business name", "white label"],
+    body: `
+**Settings \u2192 Business** \u2014 visible to owners.
+
+## What it does
+
+Puts your own name and logo at the top of Studio for everyone who signs in to {siteName}. It does **not** change the public website; that's designed separately.
+
+## Fields
+
+- **Business name** \u2014 appears next to "Studio" at the top of the page.
+- **Business email / phone** \u2014 optional, for your team's reference.
+- **Logo** \u2014 shown in the top bar. Square or wide, on a plain background.
+- **Favicon** \u2014 the small browser-tab icon. Square, simple.
+
+Pictures save the moment you choose them (**Choose a picture**, **Replace**, **Remove**); press **Save** for the text fields.
+
+## 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.
+`
+  }
+];
+
+// src/studio-ui/help/trouble.ts
+var TROUBLE = [
+  {
+    id: "dont-see-my-change",
+    section: "trouble",
+    title: "I published, but the website still shows the old version",
+    summary: "The site is still rebuilding, or your browser cached the page. Give it two minutes, then hard-refresh.",
+    keywords: ["not showing", "old version", "cache", "refresh", "still old"],
+    body: `
+## Most likely
+
+The **Live** step on the change page hasn't turned green yet. Publishing sends the change; the website then rebuilds itself, which takes about two minutes. Stay on the change page \u2014 it tells you the moment it's live and unlocks **View live**.
+
+## If Live is green and you still see the old page
+
+Your browser is showing a saved copy. Hard-refresh: **Cmd+Shift+R** on Mac, **Ctrl+Shift+R** on Windows. On a phone, open the page in a private/incognito tab.
+
+## If it's still old after that
+
+Check the item's status in the list. **Live** with no change waiting means it's published. If a change is still listed as waiting, open it and look at the tracker.
+`
+  },
+  {
+    id: "checks-failed",
+    section: "trouble",
+    title: "Checks failed / Needs fixing",
+    summary: "The test build broke. Read the message, fix that one thing, save again.",
+    keywords: ["failed", "needs fixing", "build error", "red"],
+    body: `
+## What it means
+
+The website was rebuilt with your change and something broke. Nothing was published; the live site is unchanged.
+
+## Common causes and fixes
+
+- **A required field is empty** \u2014 the form usually catches this, but a field can be emptied by a paste. Fill it in.
+- **A picture path points nowhere** \u2014 you edited the address inside \`![\u2026](\u2026)\` by hand. Remove the picture line and insert it again with the toolbar.
+- **A date or time that doesn't exist** \u2014 2026-02-30, or an end time before the start.
+- **Tags** \u2014 a post needs exactly three, lowercase with hyphens.
+
+## Then
+
+Press **Save**. The same change re-runs its checks. If it fails again with a message you can't act on, copy the whole message and send it to {supportName}.
+`
+  },
+  {
+    id: "sign-in-link",
+    section: "trouble",
+    title: "The sign-in link didn't work",
+    summary: "Links are single-use and expire. Request a new one and open it on the same device.",
+    keywords: ["link expired", "invalid link", "can't sign in", "no email"],
+    body: `
+## Expired or already used
+
+Each link works once and only for a short while. Go back to **/admin**, request a new one, and click the newest email.
+
+## Open it on the same device
+
+The link must be opened in the same browser that requested it. Requesting on your laptop and tapping the link on your phone won't sign the laptop in \u2014 request it on the device you want to use.
+
+## No email arrived
+
+Check spam and promotions folders. Make sure you typed the address {supportName} invited \u2014 a different address, even your own, isn't allowed in. Still nothing after a few minutes? Ask {supportName} to resend the invitation.
+
+## "You don't have access"
+
+Your email is signed in but isn't on this site's team. An owner can add you under **Settings \u2192 Team**.
+`
+  },
+  {
+    id: "picture-rejected",
+    section: "trouble",
+    title: "My picture was refused",
+    summary: "Too large, the wrong type, or the item's web address wasn't set yet.",
+    keywords: ["image error", "picture too large", "file type", "upload failed"],
+    body: `
+- **"That picture is too large"** \u2014 the original file is over 10 MB. Export a smaller version (most tools have a "medium" or "web" size) and try again.
+- **Wrong type** \u2014 only JPG, PNG and WebP. HEIC photos straight from an iPhone need converting: share the photo to yourself as JPG, or change the iPhone's camera format to "Most compatible".
+- **"That image path isn't allowed"** \u2014 the picture's address was edited by hand to somewhere outside the item's folder. Remove and re-insert it with the toolbar.
+- **The picture is named oddly** \u2014 pictures are named after the item's **Web address**. Set that first, then add pictures.
+- **"That picture couldn't be prepared"** \u2014 the file is damaged or not really an image. Open it on your computer to check, or export it again.
+`
+  },
+  {
+    id: "two-changes",
+    section: "trouble",
+    title: "I can't start a change \u2014 one is already waiting",
+    summary: "One change per item. Open the waiting one and finish it, or discard it.",
+    keywords: ["already a change", "locked", "in progress", "can't edit"],
+    body: `
+Each item can have one change in progress. When you open an item that has one, a notice at the top says so and links to it.
+
+- To keep going with it: edit and **Save** \u2014 your edits go onto the same change.
+- To publish it: open the change and press **Publish**.
+- To throw it away: open the change and press **Discard this change**.
+
+If a change was started by a teammate, the notice names them. Talk before discarding.
+`
+  },
+  {
+    id: "something-else",
+    section: "trouble",
+    title: "Something else is wrong",
+    summary: "Where to look, what to send, and how the Ask bubble can help.",
+    keywords: ["support", "contact", "help", "bug"],
+    body: `
+1. **Ask the bubble** (bottom right, if your site has one). It knows everything in this Help center and can answer specific questions.
+2. **Search this Help center** with the box at the top \u2014 try the exact words from the message you saw.
+3. **Write to {supportName}** with: the page you were on, what you pressed, the exact message (copy it, don't retype), and the time it happened. A screenshot helps.
+
+Nothing you do in Studio can damage the live website \u2014 every edit is checked before it goes live, and every version is kept. Worst case, {supportName} rolls back.
+`
+  }
+];
+
+// src/studio-ui/help/index.ts
+var HELP_ARTICLES = [...QUICK_START, ...PUBLISHING, ...BLOG, ...PICTURES, ...MARKDOWN, ...EVENTS, ...ACCOUNT, ...TROUBLE];
+var GENERIC_VARS = { siteName: "your website", supportName: "your web team", types: "blog posts and events" };
+function joinTypes(labels) {
+  if (labels.length === 0) return GENERIC_VARS.types;
+  if (labels.length === 1) return labels[0];
+  return `${labels.slice(0, -1).join(", ")} and ${labels[labels.length - 1]}`;
+}
+function fillVars(text, vars) {
+  return text.replace(/\{(siteName|supportName|types)\}/g, (_, k) => vars[k]);
+}
+function articlesIn(section) {
+  return HELP_ARTICLES.filter((a) => a.section === section);
+}
+function sectionOf(article) {
+  return HELP_SECTIONS.find((s) => s.id === article.section) ?? HELP_SECTIONS[0];
+}
+var strip = (md) => md.replace(/[#*_`>|\\-]+/g, " ").replace(/\[([^\]]+)\]\([^)]*\)/g, "$1").replace(/\s+/g, " ").trim();
+function searchHelp(query, articles = HELP_ARTICLES) {
+  const words = query.toLowerCase().split(/\s+/).filter((w) => w.length > 1);
+  if (words.length === 0) return [];
+  const hits = [];
+  for (const a of articles) {
+    const title = a.title.toLowerCase();
+    const summary = a.summary.toLowerCase();
+    const keys = (a.keywords ?? []).join(" ").toLowerCase();
+    const body = strip(a.body).toLowerCase();
+    let score = 0;
+    let ok = true;
+    for (const w of words) {
+      const inTitle = title.includes(w), inSum = summary.includes(w), inKey = keys.includes(w), inBody = body.includes(w);
+      if (!inTitle && !inSum && !inKey && !inBody) {
+        ok = false;
+        break;
+      }
+      score += (inTitle ? 10 : 0) + (inSum ? 5 : 0) + (inKey ? 5 : 0) + (inBody ? 1 : 0);
+    }
+    if (!ok) continue;
+    const plain = strip(a.body);
+    const at = plain.toLowerCase().indexOf(words[0]);
+    const snippet = at < 0 ? a.summary : `${at > 40 ? "\u2026" : ""}${plain.slice(Math.max(0, at - 40), at + 120).trim()}\u2026`;
+    hits.push({ article: a, score, snippet });
+  }
+  return hits.sort((x, y) => y.score - x.score || x.article.title.localeCompare(y.article.title));
+}
+function helpAsText(vars = GENERIC_VARS) {
+  const parts = [];
+  for (const s of HELP_SECTIONS) {
+    parts.push(`
+=== ${s.title.toUpperCase()} \u2014 ${s.blurb}`);
+    for (const a of articlesIn(s.id)) {
+      parts.push(`
+## ${a.title}
+${a.summary}
+${fillVars(a.body.trim(), vars)}`);
+    }
+  }
+  return parts.join("\n");
+}
+
 // src/studio-ui/facts.ts
-var STUDIO_FACTS = `
-HOW REALIIZ STUDIO WORKS (the publishing dashboard at /admin)
+var OVERVIEW = `
+HOW STUDIO WORKS (the publishing dashboard at /admin)
 
 The big picture: your website is stored as files in a private "repository" on GitHub (think: a version-controlled folder in the cloud that keeps every change ever made). Studio is a friendly front end over that folder. You never need to open GitHub \u2014 every action you take in Studio is one of these steps:
 
@@ -3844,47 +5022,254 @@ The big picture: your website is stored as files in a private "repository" on Gi
 2. CHECKS. The moment a change exists, the site builds a private test copy with your change in it, to make sure nothing breaks (a broken link tag, a missing required field, an image path that doesn't exist). This usually takes a minute or two. The change page shows a tracker: Saved \u2192 Checks \u2192 Published \u2192 Live, and refreshes itself.
 3. PUBLISH. When the checks pass the status becomes "Ready to publish" and the Publish button unlocks. A "Preview the change" button also appears: it opens a private copy of the website with your edit in it, so you can see exactly how the post will look before anyone else does. Clicking Publish sends your change to the live site.
 4. LIVE. The website then rebuilds itself with your change \u2014 usually about two minutes. The Live step keeps spinning until the rebuild is really done, and "View the post" unlocks at that moment. If you look at the website before the Live step turns green you will still see the old version; that's normal, not a failure.
+`;
+var STUDIO_FACTS = `${OVERVIEW}
 
-CONTENT TYPES: the sidebar lists every kind of content this site publishes \u2014 Blog posts and Speaking & Media (talks, panels, podcasts; shown at realiiz.com/speaking, upcoming first). Speaking items have a date, optional start/end time and time zone, a kind, a host, a place, links for details, the recording and slides, and \u2014 for Ed's own events \u2014 an RSVP link, capacity, \u201Csign-ups closed\u201D and \u201Cprivate\u201D (invited guests only; the event still shows but has no RSVP button). Each works the same way \u2014 a list, a New button, a form, Save, checks, Publish.
-
-STATUSES you'll see in each list and on each item:
-- Live: what's on the website right now, no change waiting.
-- Checking\u2026: you saved; the test build is running. Wait a minute or two.
-- Ready to publish: checks passed; open the change and click Publish.
-- Needs fixing: the test build failed. Nothing was published. Open the post, fix the problem the message names, save again \u2014 the same change re-runs its checks.
-- New \xB7 \u2026: a brand-new post that exists only in a change; it isn't on the live site until you publish.
-
-RULES OF THUMB:
-- One open change per post. Saving again while a change is waiting updates that same change (it doesn't create a second one). The sticky bar at the bottom of the editor tells you which change you're updating.
-- You can leave and come back: the posts table's Status column links to the change, and the post page shows a notice with a Publish button when a change is waiting.
-- Changed your mind? On the change page, "Discard this change" (with a confirm step) throws the unpublished edits away. The live site is untouched and the post goes back to Live.
-- "View on GitHub" opens the raw change for the curious; you never need it.
-- Only signed-in editors and owners can save or publish. Sign-in is by email link (no password).
-- If two people edit the same post, the second to publish is told the file changed first and asked to redo their edit on the latest version \u2014 nothing is silently overwritten.
-
-FIELDS on a blog post:
-- Title (H1): the headline at the top of the post. Can be long.
-- Web address (slug): the last part of the post's URL, e.g. my-first-post \u2192 realiiz.com/blog/my-first-post. Lowercase words joined by hyphens.
-- Excerpt: the short teaser shown on the blog listing page.
-- Publish date / Last updated: shown on the post and used for ordering; Last updated is optional, for revisions.
-- Author, Tags (exactly 3, lowercase-hyphenated), Header image (choose or drop a picture \u2014 see PICTURES below), Header image description (alt text for accessibility), Featured (pins the post).
-- Search & social group: Search title (what Google and the browser tab show \u2014 aim for 50\u201360 characters including the site name; blank means same as Title), Meta description (the snippet under the title in Google \u2014 aim for 120\u2013155 characters), Focus keyword (the phrase the post targets; used for SEO reporting, never shown), Social share image (the picture for social cards; blank reuses the hero image), Canonical (advanced; leave blank unless the article was published elsewhere first).
-- Post content: Markdown. The toolbar buttons toggle formatting on and off; Preview shows exactly how the blog will render it; the tooltip button wraps a selected term in a definition that appears on hover; Expand fills the window (Esc to come back).
-- Length gauges under the search fields: the green band is the target range; the fill turns green when you're inside it and red when you're over.
-
-PICTURES:
-- Choose a picture (or drag one in, or paste) for the header image, the social share image, or anywhere in the post content via the toolbar's picture button. JPG, PNG or WebP up to 10 MB; Studio shrinks it in your browser to a web-friendly WebP (about 1600 pixels wide, usually 100\u2013400 KB) before sending.
-- Nothing is uploaded when you pick \u2014 the pictures are saved together with the post when you press Save, into the same change, and go live with it when you Publish. Discarding a change discards its pictures too.
-- Pictures are named after the post's web address (slug), so fill that in first: the header image becomes /blog/<slug>.webp and pictures in the text go under /blog/<slug>/.
-- Preview shows new pictures before they're saved. The "Preview the change" link after the checks shows them on the real site design.
-
-ACCOUNT (avatar menu \u2192 Account, or Settings in the sidebar):
-- My Profile: your photo, your name (shown in the greeting and to teammates) and \u201CName on blog posts\u201D \u2014 how you're credited as the author; blank means your full name. Your email is your login and can't be changed here \u2014 ask your web team.
-- Change Password: optional. Email links always work; a password is a second way in. At least 10 characters. On the sign-in page, "Have a password? Sign in with it instead" reveals the password form. Forgot your password? There's nothing to reset \u2014 sign in with an email link and set a new one under Settings \u2192 Change Password.
-- Team (owners only): who can sign in to this site. "+ Invite someone" sends an email link \u2014 no password needed. Editors write and publish; owners also manage the team and the business details. Pending invites can be resent or revoked; active people can be removed from this site (their login survives for any other site). A site always keeps at least one owner. Support staff aren't listed in a site's team \u2014 they can reach every site without being a member.
-- Business (owners only): your business name, contact email/phone, logo and favicon. Saving puts your name and logo at the top of Studio for everyone who signs in to your site \u2014 it never changes the public website.
-- Help (avatar menu): the help centre. For now it points here, to the Ask bubble; a full browsable guide is coming.
+THE HELP CENTER (every article, as shown at /admin/help):
+${helpAsText()}
 `;
+var cells = (line) => line.trim().replace(/^\||\|$/g, "").split("|").map((c) => c.trim());
+function parseBlocks(md) {
+  const lines = md.replace(/\r/g, "").split("\n");
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (!line.trim()) {
+      i++;
+      continue;
+    }
+    if (line.startsWith("```")) {
+      const buf2 = [];
+      i++;
+      while (i < lines.length && !lines[i].startsWith("```")) buf2.push(lines[i++]);
+      i++;
+      out.push({ t: "code", text: buf2.join("\n") });
+      continue;
+    }
+    const h = /^(##|###)\s+(.*)$/.exec(line);
+    if (h) {
+      out.push({ t: h[1] === "##" ? "h2" : "h3", text: h[2] });
+      i++;
+      continue;
+    }
+    if (line.trim().startsWith("|") && i + 1 < lines.length && /^\s*\|?\s*:?-{3,}/.test(lines[i + 1])) {
+      const head = cells(line);
+      i += 2;
+      const rows = [];
+      while (i < lines.length && lines[i].trim().startsWith("|")) rows.push(cells(lines[i++]));
+      out.push({ t: "table", head, rows });
+      continue;
+    }
+    if (/^\s*[-*]\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*[-*]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*[-*]\s+/, ""));
+      out.push({ t: "ul", items });
+      continue;
+    }
+    if (/^\s*\d+[.)]\s+/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*\d+[.)]\s+/.test(lines[i])) items.push(lines[i++].replace(/^\s*\d+[.)]\s+/, ""));
+      out.push({ t: "ol", items });
+      continue;
+    }
+    if (line.startsWith(">")) {
+      const buf2 = [];
+      while (i < lines.length && lines[i].startsWith(">")) buf2.push(lines[i++].replace(/^>\s?/, ""));
+      out.push({ t: "quote", text: buf2.join(" ") });
+      continue;
+    }
+    const buf = [];
+    while (i < lines.length && lines[i].trim() && !/^(##|###)\s|^```|^\s*[-*]\s|^\s*\d+[.)]\s|^>|^\s*\|/.test(lines[i])) buf.push(lines[i++].trim());
+    out.push({ t: "p", text: buf.join(" ") });
+  }
+  return out;
+}
+var INLINE2 = /(\*\*[^*]+\*\*|_[^_]+_|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+function inline(text) {
+  const parts = text.split(INLINE2);
+  return parts.map((p, i) => {
+    if (!p) return null;
+    if (p.startsWith("**") && p.endsWith("**")) return /* @__PURE__ */ jsxRuntime.jsx("strong", { children: inline(p.slice(2, -2)) }, i);
+    if (p.startsWith("_") && p.endsWith("_") && p.length > 2) return /* @__PURE__ */ jsxRuntime.jsx("em", { children: inline(p.slice(1, -1)) }, i);
+    if (p.startsWith("`") && p.endsWith("`")) return /* @__PURE__ */ jsxRuntime.jsx("code", { children: p.slice(1, -1) }, i);
+    const link = /^\[([^\]]+)\]\(([^)]+)\)$/.exec(p);
+    if (link) {
+      const ext = /^https?:\/\//.test(link[2]);
+      return /* @__PURE__ */ jsxRuntime.jsx("a", { href: link[2], target: ext ? "_blank" : void 0, rel: ext ? "noreferrer" : void 0, children: inline(link[1]) }, i);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: p }, i);
+  });
+}
+function renderHelpMarkdown(md) {
+  return parseBlocks(md).map((b, i) => {
+    switch (b.t) {
+      case "h2":
+        return /* @__PURE__ */ jsxRuntime.jsx("h2", { children: inline(b.text) }, i);
+      case "h3":
+        return /* @__PURE__ */ jsxRuntime.jsx("h3", { children: inline(b.text) }, i);
+      case "p":
+        return /* @__PURE__ */ jsxRuntime.jsx("p", { children: inline(b.text) }, i);
+      case "quote":
+        return /* @__PURE__ */ jsxRuntime.jsx("blockquote", { children: inline(b.text) }, i);
+      case "code":
+        return /* @__PURE__ */ jsxRuntime.jsx("pre", { children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: b.text }) }, i);
+      case "ul":
+        return /* @__PURE__ */ jsxRuntime.jsx("ul", { children: b.items.map((it, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: inline(it) }, j)) }, i);
+      case "ol":
+        return /* @__PURE__ */ jsxRuntime.jsx("ol", { children: b.items.map((it, j) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: inline(it) }, j)) }, i);
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-table-wrap", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "rz-table", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: b.head.map((c, j) => /* @__PURE__ */ jsxRuntime.jsx("th", { children: inline(c) }, j)) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: b.rows.map((r, j) => /* @__PURE__ */ jsxRuntime.jsx("tr", { children: r.map((c, k) => /* @__PURE__ */ jsxRuntime.jsx("td", { children: inline(c) }, k)) }, j)) })
+        ] }) }, i);
+    }
+  });
+}
+function viewFromHash(hash) {
+  const h = hash.replace(/^#/, "");
+  if (h.startsWith("s-")) {
+    const id = h.slice(2);
+    if (HELP_SECTIONS.some((s) => s.id === id)) return { kind: "section", id };
+  }
+  const a = HELP_ARTICLES.find((x) => x.id === h);
+  return a ? { kind: "article", article: a } : { kind: "section", id: "start" };
+}
+function StudioHelp() {
+  const { contentTypes, siteName, supportName } = useStudio();
+  const vars = react.useMemo(() => ({ siteName, supportName, types: joinTypes(Object.values(contentTypes).map((e) => e.label)) }), [contentTypes, siteName, supportName]);
+  const [view, setView] = react.useState({ kind: "section", id: "start" });
+  const [q, setQ] = react.useState("");
+  const top = react.useRef(null);
+  react.useEffect(() => {
+    const sync = () => setView(viewFromHash(window.location.hash));
+    sync();
+    window.addEventListener("hashchange", sync);
+    return () => window.removeEventListener("hashchange", sync);
+  }, []);
+  const go = (hash) => {
+    setQ("");
+    setView(viewFromHash(hash));
+    window.location.hash = hash;
+    top.current?.scrollIntoView?.({ block: "start" });
+  };
+  const hits = q.trim().length > 1 ? searchHelp(q) : null;
+  const activeSection = view.kind === "section" ? view.id : view.article.section;
+  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: [
+      /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", "aria-hidden": "true", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "11", cy: "11", r: "7" }),
+        /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 20l-3.5-3.5" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "search",
+          className: "realiiz-form__control",
+          placeholder: "Search the help center \u2014 try \u201Cneeds fixing\u201D or \u201Cadd a picture\u201D",
+          "aria-label": "Search the help center",
+          value: q,
+          onChange: (e) => setQ(e.target.value),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setQ("");
+          }
+        }
+      )
+    ] }),
+    /* @__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) => {
+        e.preventDefault();
+        go(`s-${s.id}`);
+      }, children: s.title }, s.id)) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-help__main", children: hits ? /* @__PURE__ */ jsxRuntime.jsx(Results, { hits, q, onOpen: (a) => go(a.id) }) : view.kind === "section" ? /* @__PURE__ */ jsxRuntime.jsx(SectionView, { id: view.id, onOpen: (a) => go(a.id) }) : /* @__PURE__ */ jsxRuntime.jsx(ArticleView, { article: view.article, vars, onOpen: (a) => go(a.id), onSection: (id) => go(`s-${id}`) }) })
+    ] })
+  ] });
+}
+function Results({ hits, q, onOpen }) {
+  if (hits.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-empty", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
+        "No articles match \u201C",
+        q,
+        "\u201D"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0 }, children: "Try fewer words, or the exact words from the message you saw. The Ask bubble can also answer specific questions." })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "rz-help__count", children: [
+      hits.length,
+      " ",
+      hits.length === 1 ? "article" : "articles",
+      " for \u201C",
+      q,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "rz-help__list", children: hits.map(({ article, snippet }) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(ArticleLink, { article, onOpen, meta: sectionOf(article).title, children: snippet }) }, article.id)) })
+  ] });
+}
+function SectionView({ id, onOpen }) {
+  const s = HELP_SECTIONS.find((x) => x.id === id) ?? HELP_SECTIONS[0];
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "rz-help__h", children: s.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rz-help__blurb", children: s.blurb }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "rz-help__list", children: articlesIn(s.id).map((a) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(ArticleLink, { article: a, onOpen, children: a.summary }) }, a.id)) })
+  ] });
+}
+function ArticleLink({ article, onOpen, meta, children }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#${article.id}`, className: "rz-help__card", onClick: (e) => {
+    e.preventDefault();
+    onOpen(article);
+  }, children: [
+    meta && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-help__meta", children: meta }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-help__title", children: article.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-help__summary", children })
+  ] });
+}
+function ArticleView({ article, vars, onOpen, onSection }) {
+  const section = sectionOf(article);
+  const siblings = articlesIn(article.section);
+  const i = siblings.findIndex((a) => a.id === article.id);
+  const prev = siblings[i - 1], next = siblings[i + 1];
+  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "rz-help__article", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#s-${section.id}`, className: "rz-help__crumb", onClick: (e) => {
+      e.preventDefault();
+      onSection(section.id);
+    }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(BackArrow, {}),
+      " ",
+      section.title
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "rz-help__h", children: article.title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "rz-help__blurb", children: fillVars(article.summary, vars) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rz-help__prose", children: renderHelpMarkdown(fillVars(article.body, vars)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-help__pager", children: [
+      prev ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#${prev.id}`, onClick: (e) => {
+        e.preventDefault();
+        onOpen(prev);
+      }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(BackArrow, {}),
+        " ",
+        prev.title
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      next ? /* @__PURE__ */ jsxRuntime.jsxs("a", { href: `#${next.id}`, onClick: (e) => {
+        e.preventDefault();
+        onOpen(next);
+      }, children: [
+        next.title,
+        " ",
+        /* @__PURE__ */ jsxRuntime.jsx(ForwardArrow, {})
+      ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", {})
+    ] })
+  ] });
+}
+function BackArrow() {
+  return /* @__PURE__ */ jsxRuntime.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--back", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 12H5" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m11 18-6-6 6-6" })
+  ] });
+}
 
 // src/studio-ui/types.ts
 var ACTION_NAMES = [
@@ -3910,6 +5295,8 @@ var ACTION_NAMES = [
 exports.ACTION_NAMES = ACTION_NAMES;
 exports.ContentEditor = ContentEditor;
 exports.GLOSSARY = GLOSSARY;
+exports.HELP_ARTICLES = HELP_ARTICLES;
+exports.HELP_SECTIONS = HELP_SECTIONS;
 exports.Jargon = Jargon;
 exports.PublishPanel = PublishPanel;
 exports.RemoveItem = RemoveItem;
@@ -3930,7 +5317,11 @@ exports.StudioShellFrame = StudioShellFrame;
 exports.StudioSignIn = StudioSignIn;
 exports.StudioTerm = StudioTerm;
 exports.copyFor = copyFor;
+exports.fillVars = fillVars;
+exports.helpAsText = helpAsText;
+exports.joinTypes = joinTypes;
 exports.publicDirOf = publicDirOf;
+exports.searchHelp = searchHelp;
 exports.useEntry = useEntry;
 exports.useStudio = useStudio;
 //# sourceMappingURL=index.cjs.map