@realiizlabs/admin 0.14.0 → 0.14.1

package/dist/studio-ui/index.d.cts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { C as ContentTypeEntry } from '../types-DeHdasdP.cjs';
 import { c as SiteBranding, d as SiteMember } from '../members-nhbRSYyr.cjs';
-import { S as ShellUser, N as NavItem } from '../Sidebar-Dvrc9_xR.cjs';
+import { S as ShellUser, N as NavItem } from '../Sidebar-Dz_qJOSx.cjs';
 import { a as PullRequestStatus } from '../types-BP5G1myE.cjs';
 import 'zod';
 import '@supabase/supabase-js';
@@ -175,9 +175,11 @@ declare function publicDirOf(entry: {
  * active nav item, plus Studio's page styles injected once. Session, nav and
  * branding arrive as props from the site's server layout.
  */
-declare function StudioShellFrame({ siteName, logoUrl, user, role, nav, pinnedNav, branding, children }: {
+declare function StudioShellFrame({ siteName, logoUrl, siteUrl, user, role, nav, pinnedNav, branding, children }: {
     siteName: string;
     logoUrl?: string | null;
+    /** The live website (SITE_URL). The brand and the avatar menu open it in a new tab. */
+    siteUrl?: string | null;
     user: ShellUser | null;
     role: string | null;
     nav: NavItem[];

package/dist/studio-ui/index.d.ts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode } from 'react';
 import { C as ContentTypeEntry } from '../types-DeHdasdP.js';
 import { c as SiteBranding, d as SiteMember } from '../members-nhbRSYyr.js';
-import { S as ShellUser, N as NavItem } from '../Sidebar-Dvrc9_xR.js';
+import { S as ShellUser, N as NavItem } from '../Sidebar-Dz_qJOSx.js';
 import { a as PullRequestStatus } from '../types-BP5G1myE.js';
 import 'zod';
 import '@supabase/supabase-js';
@@ -175,9 +175,11 @@ declare function publicDirOf(entry: {
  * active nav item, plus Studio's page styles injected once. Session, nav and
  * branding arrive as props from the site's server layout.
  */
-declare function StudioShellFrame({ siteName, logoUrl, user, role, nav, pinnedNav, branding, children }: {
+declare function StudioShellFrame({ siteName, logoUrl, siteUrl, user, role, nav, pinnedNav, branding, children }: {
     siteName: string;
     logoUrl?: string | null;
+    /** The live website (SITE_URL). The brand and the avatar menu open it in a new tab. */
+    siteUrl?: string | null;
     user: ShellUser | null;
     role: string | null;
     nav: NavItem[];

package/dist/studio-ui/index.js

@@ -154,6 +154,32 @@ function Sidebar({ items, pinned = [], activeHref, basePath }) {
     )
   ] });
 }
+function buttonClass(variant = "secondary", size = "md", extra) {
+  return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
+}
+function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
+  return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
+}
+function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
+  const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
+  return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
+    children,
+    external && /* @__PURE__ */ jsx(OutboundArrow, {}),
+    forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
+  ] });
+}
+function ForwardArrow() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow rz-arrow--fwd", children: [
+    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
+  ] });
+}
+function OutboundArrow() {
+  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow", children: [
+    /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
+    /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
+  ] });
+}
 var THEME_KEY = "rz-admin-theme";
 function useTheme(defaultTheme = "light") {
   const [theme, setTheme] = useState(defaultTheme);
@@ -205,12 +231,16 @@ var HelpIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsx("path", { d: "M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z" }),
   /* @__PURE__ */ jsx("path", { d: "M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" })
 ] });
+var GlobeIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+  /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
+] });
 var OutIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
   /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
   /* @__PURE__ */ jsx("path", { d: "M16 17l5-5-5-5" }),
   /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
 ] });
-function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
+function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl }) {
   const [open, setOpen] = useState(false);
   const wrap = useRef(null);
   useEffect(() => {
@@ -245,7 +275,12 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
         /* @__PURE__ */ jsx("span", { children: "Theme" }),
         /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(ThemeToggle, { theme, onChange: onTheme }) })
       ] }),
-      (accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
+      (siteUrl || accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
+      siteUrl && /* @__PURE__ */ jsxs("a", { href: siteUrl, target: "_blank", rel: "noreferrer", role: "menuitem", className: "rz-menu__item", children: [
+        /* @__PURE__ */ jsx(GlobeIcon, {}),
+        "View website",
+        /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(OutboundArrow, {}) })
+      ] }),
       accountHref && /* @__PURE__ */ jsxs("a", { href: accountHref, role: "menuitem", className: "rz-menu__item", children: [
         /* @__PURE__ */ jsx(UserIcon, {}),
         "Account"
@@ -262,19 +297,28 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
     ] })
   ] });
 }
-function TopBar({ siteName, productName, logoUrl, homeHref, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
+function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
   return /* @__PURE__ */ jsxs("header", { className: "rz-topbar", children: [
-    /* @__PURE__ */ jsxs("a", { href: homeHref, className: "rz-topbar__brand", children: [
-      logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
-      /* @__PURE__ */ jsx("span", { children: siteName }),
-      /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName })
-    ] }),
+    /* @__PURE__ */ jsxs(
+      "a",
+      {
+        href: siteUrl || homeHref,
+        className: "rz-topbar__brand",
+        ...siteUrl ? { target: "_blank", rel: "noreferrer", title: "Open the live website in a new tab" } : {},
+        children: [
+          logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
+          /* @__PURE__ */ jsx("span", { children: siteName }),
+          /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName }),
+          siteUrl && /* @__PURE__ */ jsx(OutboundArrow, {})
+        ]
+      }
+    ),
     user && role && /* @__PURE__ */ jsxs("div", { className: "rz-topbar__right", children: [
       /* @__PURE__ */ jsxs("span", { className: "rz-topbar__greeting", "data-testid": "rz-greeting", children: [
         "Welcome back, ",
         firstNameOf(user)
       ] }),
-      /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref })
+      /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl })
     ] })
   ] });
 }
@@ -334,6 +378,8 @@ var SHELL_CSS = `
 .rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }
 .rz-topbar__logo { height: 22px; width: auto; display: block; }
 .rz-topbar__product { font-weight: 400; color: var(--text-secondary); }
+.rz-topbar__brand .rz-arrow { color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }
+.rz-topbar__brand:hover .rz-arrow { opacity: 1; }
 .rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
 .rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }
 .rz-body { display: flex; flex: 1; min-height: 0; }
@@ -545,6 +591,7 @@ function AdminShell({
   signOutPath,
   accountHref,
   helpHref,
+  siteUrl,
   branding,
   defaultTheme = "light",
   children
@@ -561,6 +608,7 @@ function AdminShell({
         siteName: shownName,
         productName,
         logoUrl: shownLogo,
+        siteUrl,
         homeHref: basePath,
         user,
         role,
@@ -577,32 +625,6 @@ function AdminShell({
     ] })
   ] });
 }
-function buttonClass(variant = "secondary", size = "md", extra) {
-  return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
-}
-function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
-  return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
-}
-function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
-  const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
-  return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
-    children,
-    external && /* @__PURE__ */ jsx(OutboundArrow, {}),
-    forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
-  ] });
-}
-function ForwardArrow() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow rz-arrow--fwd", children: [
-    /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
-  ] });
-}
-function OutboundArrow() {
-  return /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "rz-arrow", children: [
-    /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
-    /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
-  ] });
-}
 function Card({ title, meta, note, children, actions, className }) {
   return /* @__PURE__ */ jsxs("div", { className: ["rz-card", className].filter(Boolean).join(" "), children: [
     title && /* @__PURE__ */ jsx("div", { className: "rz-card__title", children: title }),
@@ -867,11 +889,11 @@ var STUDIO_CSS = `
 .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 = usePathname() ?? "/admin";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("style", { children: STUDIO_CSS }),
-    /* @__PURE__ */ jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
+    /* @__PURE__ */ jsx(AdminShell, { siteName, logoUrl: logoUrl ?? void 0, siteUrl, user, role, nav, pinnedNav, branding, accountHref: null, activeHref: pathname, children })
   ] });
 }
 
@@ -3920,7 +3942,7 @@ Open the avatar menu (top right) and choose **Sign out**.
     section: "start",
     title: "Finding your way around",
     summary: "The sidebar, the dashboard, the lists, and the avatar menu.",
-    keywords: ["sidebar", "dashboard", "navigation", "menu", "settings"],
+    keywords: ["sidebar", "dashboard", "navigation", "menu", "settings", "view website", "live site", "visit site"],
     body: `
 ## The sidebar
 
@@ -3932,9 +3954,13 @@ On a narrow screen the sidebar collapses to icons; press the arrow at the bottom
 
 Every row is one item: its title, date, status and a **View live** link. **+ New** at the top starts a new one. Click a title to edit it. The **Status** column links straight to a waiting change.
 
+## Getting to the live website
+
+Click the site name at the top left \u2014 it opens the live website in a new tab (hover and an arrow appears). The avatar menu has the same thing as **View website**. Each item's list row also has **View live** for that one page.
+
 ## The avatar menu
 
-Top right, your photo or initials. From here: **Account**, **Help center** (this page), a light/dark toggle, and **Sign out**.
+Top right, your photo or initials. From here: a light/dark toggle, **View website**, **Account**, **Help center** (this page), and **Sign out**.
 
 ## The Ask bubble