@realiizlabs/admin 0.13.2 → 0.14.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/{Sidebar-CNuphww6.d.cts → Sidebar-Dz_qJOSx.d.cts} +4 -2
  2. package/dist/{Sidebar-CNuphww6.d.ts → Sidebar-Dz_qJOSx.d.ts} +4 -2
  3. package/dist/events/index.cjs +1 -1
  4. package/dist/events/index.cjs.map +1 -1
  5. package/dist/events/index.js +1 -1
  6. package/dist/events/index.js.map +1 -1
  7. package/dist/forms-ui/index.cjs.map +1 -1
  8. package/dist/forms-ui/index.d.cts +1 -1
  9. package/dist/forms-ui/index.d.ts +1 -1
  10. package/dist/forms-ui/index.js.map +1 -1
  11. package/dist/shell/index.cjs +62 -40
  12. package/dist/shell/index.cjs.map +1 -1
  13. package/dist/shell/index.d.cts +11 -7
  14. package/dist/shell/index.d.ts +11 -7
  15. package/dist/shell/index.js +62 -40
  16. package/dist/shell/index.js.map +1 -1
  17. package/dist/studio-ui/index.cjs +1493 -102
  18. package/dist/studio-ui/index.cjs.map +1 -1
  19. package/dist/studio-ui/index.d.cts +70 -8
  20. package/dist/studio-ui/index.d.ts +70 -8
  21. package/dist/studio-ui/index.js +1489 -104
  22. package/dist/studio-ui/index.js.map +1 -1
  23. package/package.json +1 -1
package/dist/shell/index.d.cts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
3
- import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-CNuphww6.cjs';
4
- export { A as AccountMenu, a as Sidebar, b as ThemeToggle, f as firstNameOf, i as initialsOf, c as isActive, u as useTheme } from '../Sidebar-CNuphww6.cjs';
3
+ import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-Dz_qJOSx.cjs';
4
+ export { A as AccountMenu, a as Sidebar, b as ThemeToggle, f as firstNameOf, i as initialsOf, c as isActive, u as useTheme } from '../Sidebar-Dz_qJOSx.cjs';
5
5
 
6
6
  interface AdminShellProps {
7
7
  siteName: string;
@@ -22,8 +22,10 @@ interface AdminShellProps {
22
22
  signOutPath?: string;
23
23
  /** Account page for the avatar menu. Default `${basePath}/account`; null hides the item. */
24
24
  accountHref?: string | null;
25
- /** Help centre for the avatar menu. Default `${basePath}/help`; null hides the item. */
25
+ /** Help center for the avatar menu. Default `${basePath}/help`; null hides the item. */
26
26
  helpHref?: string | null;
27
+ /** The live website. Makes the brand and a "View website" menu item open it in a new tab. */
28
+ siteUrl?: string | null;
27
29
  /**
28
30
  * The client's own branding (Business tab). `name` replaces siteName in the top bar
29
31
  * and `logoUrl` replaces the logo; the product word ("Studio") stays.
@@ -35,13 +37,15 @@ interface AdminShellProps {
35
37
  defaultTheme?: Theme;
36
38
  children: ReactNode;
37
39
  }
38
- declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
40
+ declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
39
41
 
40
- declare function TopBar({ siteName, productName, logoUrl, homeHref, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
42
+ declare function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
41
43
  siteName: string;
42
44
  productName: string;
43
45
  logoUrl?: string | null;
44
46
  homeHref: string;
47
+ /** The live website. When set, the brand opens it in a new tab (like every dashboard people know); otherwise it goes to the dashboard. */
48
+ siteUrl?: string | null;
45
49
  user: ShellUser | null;
46
50
  role: string | null;
47
51
  theme: Theme;
@@ -73,7 +77,7 @@ interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
73
77
  }
74
78
  declare function LinkButton({ variant, size, className, external, forward, children, ...rest }: LinkButtonProps): react.JSX.Element;
75
79
  declare function ForwardArrow(): react.JSX.Element;
76
- /** Drawn, not the ↗ glyph — the glyph sits high in its box and never centres. */
80
+ /** Drawn, not the ↗ glyph — the glyph sits high in its box and never centers. */
77
81
  declare function OutboundArrow(): react.JSX.Element;
78
82
 
79
83
  declare function Card({ title, meta, note, children, actions, className }: {
@@ -136,7 +140,7 @@ declare function iconFor(id: string): IconName;
136
140
  * The block at the end maps the forms-ui variables onto these tokens, so
137
141
  * ContentForm and MagicLinkForm re-skin without touching their own code.
138
142
  */
139
- declare const SHELL_CSS = "\n.rz-admin, .rz-admin[data-theme=\"light\"] {\n /* realiiz.com palette (src/app/globals.css): ink, bone, paper, signal blue, slate, line, amber */\n --ink: #0e1726; --bone: #f7f5f0; --signal: #1f6feb;\n --surface-0: #f7f5f0; --surface-1: #ffffff; --surface-2: #f1eee7; --surface-3: #e8e4da;\n --text-primary: #0e1726; --text-secondary: #5b6678; --text-muted: #8a93a5;\n --signal-dim: #1a63d8; --signal-glow: #5b9bff; --signal-warn: #e0a03b; --series-blue: #1f6feb;\n --border: #d9d4c8; --separator: #e9e5dc;\n --status-up: #15803d; --status-down: #dc2626; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin[data-theme=\"dark\"] { color-scheme: dark; }\n.rz-admin[data-theme=\"dark\"] {\n --ink: #eef0f5; --bone: #1b2334; --signal: #3b82f6;\n --surface-0: #1b2334; --surface-1: #222c42; --surface-2: #29344a; --surface-3: #36415c;\n --text-primary: #eef0f5; --text-secondary: #a2abbf; --text-muted: #77819a;\n --signal-dim: #8db4ff; --signal-glow: #aec9ff; --signal-warn: #eab058; --series-blue: #3b82f6;\n --border: #36415c; --separator: #2c3750;\n --status-up: #4ade80; --status-down: #f87171; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin {\n --rz-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --rz-font-display: var(--rz-font);\n --rz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n --rz-radius: 6px;\n --rz-sidebar: 220px; --rz-sidebar-collapsed: 58px; --rz-topbar: 52px;\n\n /* forms-ui speaks these; map them once so both packages agree */\n --realiiz-form-fg: var(--text-primary); --realiiz-form-muted: var(--text-muted);\n --realiiz-form-border: var(--border); --realiiz-form-accent: var(--signal);\n --realiiz-form-accent-fg: var(--signal-fg); --realiiz-form-danger: var(--status-down);\n --realiiz-form-radius: var(--rz-radius); --realiiz-form-font: var(--rz-font);\n --realiiz-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);\n\n box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;\n background: var(--surface-0); color: var(--text-primary);\n font-family: var(--rz-font); font-size: 14px; line-height: 1.45;\n}\n.rz-admin *, .rz-admin *::before, .rz-admin *::after { box-sizing: inherit; }\n.rz-admin a { color: inherit; }\n.rz-admin h1, .rz-admin h2, .rz-admin h3 { font-family: var(--rz-font-display); color: var(--text-primary); margin: 0; }\n.rz-admin .realiiz-form__control { background: var(--surface-0); }\n.rz-admin .realiiz-image { background: var(--surface-0); }\n.rz-admin .realiiz-image__thumb { background: var(--surface-2); }\n.rz-admin[data-theme=\"dark\"] .realiiz-form__control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }\n.rz-admin .realiiz-form__button { background: var(--surface-1); color: var(--text-primary); }\n.rz-admin .realiiz-form__button--primary { background: var(--signal); color: var(--signal-fg); }\n\n/* ---- frame ---------------------------------------------------------- */\n.rz-topbar { height: var(--rz-topbar); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-shrink: 0; }\n.rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }\n.rz-topbar__logo { height: 22px; width: auto; display: block; }\n.rz-topbar__product { font-weight: 400; color: var(--text-secondary); }\n.rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }\n.rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }\n.rz-body { display: flex; flex: 1; min-height: 0; }\n/* Top bar and sidebar stay put while the content scrolls, so Collapse is always at the bottom-left. */\n.rz-topbar { position: sticky; top: 0; z-index: 20; }\n.rz-sidebar { position: sticky; top: var(--rz-topbar); height: calc(100vh - var(--rz-topbar)); width: var(--rz-sidebar); flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; transition: width .15s ease; overflow: hidden; }\n.rz-sidebar--collapsed { width: var(--rz-sidebar-collapsed); }\n.rz-sidebar__nav { padding: .75rem 0; flex: 1; overflow-y: auto; }\n.rz-sidebar__item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: .875rem; font-weight: 400; white-space: nowrap; overflow: hidden; }\n.rz-sidebar__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-sidebar__item--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-sidebar__item--disabled, .rz-sidebar__item--disabled:hover { color: var(--text-muted); opacity: .55; background: transparent; cursor: default; }\n.rz-sidebar--collapsed .rz-sidebar__item { justify-content: center; padding: .55rem 0; }\n.rz-sidebar--collapsed .rz-sidebar__label { display: none; }\n.rz-sidebar__pinned { border-top: 1px solid var(--separator); padding: .3rem 0; }\n.rz-sidebar__collapse { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--separator); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }\n.rz-sidebar__collapse:hover { color: var(--text-primary); }\n.rz-sidebar__collapse svg { flex-shrink: 0; }\n.rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }\n.rz-main { flex: 1; min-width: 0; }\n.rz-content { max-width: 1400px; margin: 0; padding: 28px 32px 80px; }\n.rz-content .realiiz-form { max-width: none; }\n.rz-content .realiiz-form fieldset, .rz-content .realiiz-form__alert, .rz-content .realiiz-form__actions { max-width: 920px; }\n/* The form's save bar pins to the bottom of the content column: bleed out over .rz-content's padding, then pad back in. */\n.rz-content .realiiz-form__bar { position: sticky; bottom: 0; z-index: 10; margin: 24px -32px -80px; padding: 12px 32px; background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(14,23,38,.05); }\n.rz-content .realiiz-form__status { color: var(--text-muted); }\n.rz-content .realiiz-form__bar[data-dirty] .realiiz-form__status { color: var(--text-primary); font-weight: 500; }\n\n/* ---- primitives ----------------------------------------------------- */\n/* Same metrics as the form's Save button (.realiiz-form__button) so every button in the admin matches. */\n.rz-btn { font-family: inherit; font-weight: 600; border-radius: var(--rz-radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; line-height: 1.2; }\n.rz-btn--md { padding: 10px 16px; font-size: 15px; min-height: 40px; }\n.rz-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n.rz-admin .rz-btn--primary, .rz-admin a.rz-btn--primary { background: var(--signal); color: var(--signal-fg); border: 1px solid var(--signal); }\n.rz-admin .rz-btn--secondary, .rz-admin a.rz-btn--secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn--danger, .rz-admin a.rz-btn--danger { background: transparent; color: var(--status-down); border: 1px solid var(--status-down); }\n.rz-admin .rz-btn--ghost, .rz-admin a.rz-btn--ghost { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn:disabled { opacity: .55; cursor: default; }\n.rz-arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .15s ease-out; }\n@media (prefers-reduced-motion: no-preference) {\n .rz-btn:hover .rz-arrow, a:hover .rz-arrow { transform: translate(2px, -2px); }\n .rz-btn:hover .rz-arrow--fwd, a:hover .rz-arrow--fwd { transform: translateX(4px); }\n}\n.rz-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }\n.rz-card--narrow { max-width: 760px; }\n.rz-card__title { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }\n.rz-card__meta { color: var(--text-muted); font-size: .8rem; }\n.rz-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .9rem; flex-wrap: wrap; }\n.rz-card__note { margin-top: .5rem; }\n.rz-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }\n.rz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n.rz-pagehead__eyebrow { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .3rem; }\n.rz-pagehead h1 { font-size: 1.375rem; font-weight: 600; }\n.rz-pagehead__sub { color: var(--text-secondary); font-size: .85rem; margin-top: .25rem; }\n.rz-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); }\n.rz-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }\n.rz-pill--up::before { background: var(--status-up); } .rz-pill--warn::before { background: var(--signal-warn); } .rz-pill--down::before { background: var(--status-down); }\n.rz-pill--plain::before { display: none; }\n/* ---- steps tracker ------------------------------------------------- */\n/* Dots on one rail, connectors dot-to-dot, label under each dot; left-aligned like the rest of the page. */\n.rz-steps { list-style: none; margin: 4px 0 22px; padding: 0 0 22px; display: flex; border-bottom: 1px solid var(--separator); }\n.rz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; min-width: 0; }\n.rz-step:last-child { flex: 0 0 auto; }\n.rz-step:not(:last-child)::after { content: \"\"; position: absolute; top: 12px; left: 26px; right: 0; height: 2px; background: var(--border); }\n.rz-step--done:not(:last-child)::after { background: var(--status-up); }\n.rz-step__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface-1); }\n.rz-step--done .rz-step__dot { background: var(--status-up); border-color: var(--status-up); color: #fff; }\n.rz-step--active .rz-step__dot { position: relative; border-color: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--signal); }\n/* A spinning arc over the ring: the step is working, not waiting on you. */\n.rz-step--active .rz-step__dot::after { content: \"\"; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--signal); animation: rz-spin .9s linear infinite; }\n@media (prefers-reduced-motion: reduce) { .rz-step--active .rz-step__dot::after { animation: none; border-color: var(--signal); } }\n@keyframes rz-spin { to { transform: rotate(360deg); } }\n.rz-step--failed .rz-step__dot { background: var(--status-down); border-color: var(--status-down); color: #fff; }\n.rz-step__text { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }\n.rz-step__label { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }\n.rz-step--active .rz-step__label, .rz-step--done .rz-step__label { color: var(--text-primary); }\n.rz-step--failed .rz-step__label { color: var(--status-down); }\n.rz-step__note { font-size: .75rem; color: var(--text-muted); }\n@keyframes rz-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 8%, transparent); } }\n.rz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }\n.rz-actions__hint { font-size: .8rem; color: var(--text-muted); }\n.rz-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); margin-bottom: 18px; font-size: .9rem; }\n.rz-notice__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\n.rz-status-link { text-decoration: none; }\n.rz-discard { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--separator); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-secondary); }\n.rz-discard__link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-discard__link:hover { color: var(--status-down); }\n.rz-nowrap { white-space: nowrap; }\n.rz-table td.rz-fit, .rz-table th.rz-fit { width: 1%; white-space: nowrap; }\n.rz-empty { border: 1px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: var(--text-secondary); }\n.rz-empty h3 { font-size: 1rem; margin-bottom: .4rem; }\n.rz-table-wrap { width: 100%; }\n.rz-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }\n.rz-table th, .rz-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--separator); font-size: .875rem; vertical-align: top; }\n.rz-table th { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--surface-2); }\n.rz-table tr:last-child td { border-bottom: 0; }\n.rz-muted { color: var(--text-muted); }\n.rz-alert { border: 1px solid var(--status-down); color: var(--status-down); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n.rz-ok { border: 1px solid var(--status-up); color: var(--signal-dim); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n\n/* ---- account menu --------------------------------------------------- */\n.rz-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }\n.rz-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; flex-wrap: wrap; }\n.rz-tabs__tab { padding: .55rem .9rem; font: inherit; font-size: .88rem; color: var(--text-secondary); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }\n.rz-tabs__tab:hover { color: var(--text-primary); }\n.rz-tabs__tab[aria-selected=\"true\"] { color: var(--text-primary); border-bottom-color: var(--signal); font-weight: 600; }\n.rz-tabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 4px; }\n.rz-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-primary); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; overflow: hidden; }\n.rz-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(14,23,38,.14); overflow: hidden; z-index: 50; }\n.rz-menu__who { padding: .75rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }\n.rz-menu__name { font-weight: 600; font-size: .875rem; }\n.rz-menu__email { color: var(--text-muted); font-size: .75rem; word-break: break-all; }\n.rz-menu__sep { height: 1px; background: var(--border); margin: .3rem 0; }\n.rz-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .9rem; font: inherit; font-size: .8125rem; color: var(--text-secondary); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; }\n.rz-menu__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-menu__item svg { flex-shrink: 0; }\n.rz-menu__item--static { cursor: default; }\n.rz-menu__item--static:hover { background: none; color: var(--text-secondary); }\n.rz-menu__item .rz-menu__end { margin-left: auto; }\n.rz-menu__signout { margin: 0 0 .3rem; }\n.rz-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--rz-radius); overflow: hidden; }\n.rz-seg button { font: inherit; font-size: .75rem; padding: .15rem .55rem; line-height: 1.3; background: transparent; color: var(--text-secondary); border: 0; cursor: pointer; }\n.rz-seg button[aria-pressed=\"true\"] { background: var(--surface-3); color: var(--text-primary); }\n\n/* ---- mobile: sidebar becomes a strip under the top bar --------------- */\n@media (max-width: 720px) {\n .rz-body { flex-direction: column; }\n .rz-sidebar, .rz-sidebar--collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; }\n .rz-sidebar__nav { display: flex; padding: .35rem .25rem; overflow-x: auto; }\n .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }\n .rz-sidebar--collapsed .rz-sidebar__label { display: block; }\n .rz-sidebar__collapse { display: none; }\n .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }\n .rz-topbar__greeting { display: none; }\n .rz-content { padding: 18px 14px 60px; }\n /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */\n .rz-sidebar, .rz-sidebar--collapsed { position: static; height: auto; }\n .rz-sidebar__item--disabled { display: none; }\n /* Save bar: bleed matches the narrower content padding; stack status above the buttons. */\n .rz-content .realiiz-form__bar { margin: 18px -14px -60px; padding: 10px 14px; flex-wrap: wrap; }\n .rz-content .realiiz-form__status { flex-basis: 100%; margin-right: 0; font-size: .8rem; }\n /* Editor toolbar wraps; the Insert group drops its label and left rule to save width. */\n .rz-admin .realiiz-md__head { padding: 5px; }\n .rz-admin .realiiz-md__insert { border-left: 0; padding-left: 0; margin-left: 0; }\n .rz-admin .realiiz-md__lab { display: none; }\n .rz-admin .realiiz-md--fs { padding: 8px; }\n /* Tracker: notes hide, labels shrink, so three steps fit a phone. */\n .rz-step__note { display: none; }\n .rz-step__label { font-size: .8rem; }\n .rz-step:not(:last-child)::after { right: 6px; }\n /* Tables scroll sideways inside their own box instead of stretching the page. */\n .rz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n .rz-pagehead { align-items: flex-start; flex-direction: column; }\n .rz-notice { flex-direction: column; align-items: flex-start; }\n .rz-card--narrow { max-width: none; }\n}\n\n/* ---- forms extras: markdown editor, chips, gauges, preview prose --------- */\n.rz-admin .realiiz-md { --_md-head: var(--surface-2); --_md-hover: var(--surface-2); --_md-hover-line: var(--signal-glow); --_md-on: color-mix(in srgb, var(--signal) 12%, var(--surface-1)); --_md-tip: var(--ink); }\n.rz-admin .realiiz-md__mode { background: var(--surface-2); }\n.rz-admin .realiiz-md__mode button { color: var(--text-secondary); }\n.rz-admin .realiiz-md__mode button[aria-selected=\"true\"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(14,23,38,.12); }\n.rz-admin .realiiz-md__panel, .rz-admin .realiiz-md__tgrid, .rz-admin .realiiz-md--fs, .rz-admin .realiiz-md .realiiz-md__ta, .rz-admin .realiiz-md__preview, .rz-admin .realiiz-md__head button { background: var(--surface-1); }\n.rz-admin .realiiz-md__head { background: var(--surface-2); }\n.rz-admin .realiiz-md__head button { color: var(--text-primary); }\n.rz-admin .realiiz-md__insert button { background: var(--surface-2); color: var(--text-secondary); }\n.rz-admin .realiiz-md__tgcells i { background: var(--surface-1); }\n.rz-admin .realiiz-md__tgcells i.hot { background: color-mix(in srgb, var(--signal) 18%, var(--surface-1)); }\n.rz-admin .realiiz-md__loading { color: var(--text-muted); font-size: .8rem; }\n.rz-admin .realiiz-prose { max-width: 68ch; font-size: 1rem; line-height: 1.65; color: var(--text-primary); }\n.rz-admin .realiiz-prose h1, .rz-admin .realiiz-prose h2, .rz-admin .realiiz-prose h3 { font-family: var(--rz-font-display); line-height: 1.25; margin: 1.4em 0 .5em; }\n.rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }\n.rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }\n.rz-admin .realiiz-prose a { color: var(--signal); }\n/* The site's prose class picks a slate body colour for a light page; on the dark surface that reads as disabled. */\n.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); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose a { color: var(--signal-dim); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose hr { border-color: var(--border); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose blockquote { color: var(--text-secondary); }\n.rz-admin .realiiz-prose blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-secondary); }\n.rz-admin .realiiz-prose code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; font-family: var(--rz-font-mono); font-size: .9em; }\n.rz-admin .realiiz-prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }\n.rz-admin .realiiz-prose img { max-width: 100%; height: auto; border-radius: 6px; }\n.rz-admin .realiiz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--rz-radius); }\n.rz-admin .realiiz-chips:focus-within { border-color: var(--signal); box-shadow: var(--realiiz-form-focus-ring); }\n.rz-admin .realiiz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--text-primary); }\n.rz-admin .realiiz-chip button { font: inherit; line-height: 1; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }\n.rz-admin .realiiz-chip button:hover { background: var(--status-down); color: #fff; }\n.rz-admin .realiiz-chips__input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 4px; }\n.rz-admin .realiiz-chips__count { margin-left: auto; color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }\n.rz-admin .realiiz-gauge { color: var(--text-muted); }\n.rz-admin .realiiz-gauge__bar { background: var(--surface-3); }\n.rz-admin .realiiz-gauge__zone { background: color-mix(in srgb, var(--status-up) 28%, transparent); }\n.rz-admin .realiiz-gauge__fill { background: var(--text-muted); }\n.rz-admin .realiiz-gauge--ok .realiiz-gauge__fill { background: var(--status-up); } .rz-admin .realiiz-gauge--ok { color: var(--status-up); }\n.rz-admin .realiiz-gauge--over .realiiz-gauge__fill { background: var(--status-down); } .rz-admin .realiiz-gauge--over { color: var(--status-down); }\n";
143
+ declare const SHELL_CSS = "\n.rz-admin, .rz-admin[data-theme=\"light\"] {\n /* realiiz.com palette (src/app/globals.css): ink, bone, paper, signal blue, slate, line, amber */\n --ink: #0e1726; --bone: #f7f5f0; --signal: #1f6feb;\n --surface-0: #f7f5f0; --surface-1: #ffffff; --surface-2: #f1eee7; --surface-3: #e8e4da;\n --text-primary: #0e1726; --text-secondary: #5b6678; --text-muted: #8a93a5;\n --signal-dim: #1a63d8; --signal-glow: #5b9bff; --signal-warn: #e0a03b; --series-blue: #1f6feb;\n --border: #d9d4c8; --separator: #e9e5dc;\n --status-up: #15803d; --status-down: #dc2626; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin[data-theme=\"dark\"] { color-scheme: dark; }\n.rz-admin[data-theme=\"dark\"] {\n --ink: #eef0f5; --bone: #1b2334; --signal: #3b82f6;\n --surface-0: #1b2334; --surface-1: #222c42; --surface-2: #29344a; --surface-3: #36415c;\n --text-primary: #eef0f5; --text-secondary: #a2abbf; --text-muted: #77819a;\n --signal-dim: #8db4ff; --signal-glow: #aec9ff; --signal-warn: #eab058; --series-blue: #3b82f6;\n --border: #36415c; --separator: #2c3750;\n --status-up: #4ade80; --status-down: #f87171; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin {\n --rz-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --rz-font-display: var(--rz-font);\n --rz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n --rz-radius: 6px;\n --rz-sidebar: 220px; --rz-sidebar-collapsed: 58px; --rz-topbar: 52px;\n\n /* forms-ui speaks these; map them once so both packages agree */\n --realiiz-form-fg: var(--text-primary); --realiiz-form-muted: var(--text-muted);\n --realiiz-form-border: var(--border); --realiiz-form-accent: var(--signal);\n --realiiz-form-accent-fg: var(--signal-fg); --realiiz-form-danger: var(--status-down);\n --realiiz-form-radius: var(--rz-radius); --realiiz-form-font: var(--rz-font);\n --realiiz-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);\n\n box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;\n background: var(--surface-0); color: var(--text-primary);\n font-family: var(--rz-font); font-size: 14px; line-height: 1.45;\n}\n.rz-admin *, .rz-admin *::before, .rz-admin *::after { box-sizing: inherit; }\n.rz-admin a { color: inherit; }\n.rz-admin h1, .rz-admin h2, .rz-admin h3 { font-family: var(--rz-font-display); color: var(--text-primary); margin: 0; }\n.rz-admin .realiiz-form__control { background: var(--surface-0); }\n.rz-admin .realiiz-image { background: var(--surface-0); }\n.rz-admin .realiiz-image__thumb { background: var(--surface-2); }\n.rz-admin[data-theme=\"dark\"] .realiiz-form__control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }\n.rz-admin .realiiz-form__button { background: var(--surface-1); color: var(--text-primary); }\n.rz-admin .realiiz-form__button--primary { background: var(--signal); color: var(--signal-fg); }\n\n/* ---- frame ---------------------------------------------------------- */\n.rz-topbar { height: var(--rz-topbar); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-shrink: 0; }\n.rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }\n.rz-topbar__logo { height: 22px; width: auto; display: block; }\n.rz-topbar__product { font-weight: 400; color: var(--text-secondary); }\n.rz-topbar__brand .rz-arrow { color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }\n.rz-topbar__brand:hover .rz-arrow { opacity: 1; }\n.rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }\n.rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }\n.rz-body { display: flex; flex: 1; min-height: 0; }\n/* Top bar and sidebar stay put while the content scrolls, so Collapse is always at the bottom-left. */\n.rz-topbar { position: sticky; top: 0; z-index: 20; }\n.rz-sidebar { position: sticky; top: var(--rz-topbar); height: calc(100vh - var(--rz-topbar)); width: var(--rz-sidebar); flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; transition: width .15s ease; overflow: hidden; }\n.rz-sidebar--collapsed { width: var(--rz-sidebar-collapsed); }\n.rz-sidebar__nav { padding: .75rem 0; flex: 1; overflow-y: auto; }\n.rz-sidebar__item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: .875rem; font-weight: 400; white-space: nowrap; overflow: hidden; }\n.rz-sidebar__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-sidebar__item--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-sidebar__item--disabled, .rz-sidebar__item--disabled:hover { color: var(--text-muted); opacity: .55; background: transparent; cursor: default; }\n.rz-sidebar--collapsed .rz-sidebar__item { justify-content: center; padding: .55rem 0; }\n.rz-sidebar--collapsed .rz-sidebar__label { display: none; }\n.rz-sidebar__pinned { border-top: 1px solid var(--separator); padding: .3rem 0; }\n.rz-sidebar__collapse { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--separator); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }\n.rz-sidebar__collapse:hover { color: var(--text-primary); }\n.rz-sidebar__collapse svg { flex-shrink: 0; }\n.rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }\n.rz-main { flex: 1; min-width: 0; }\n.rz-content { max-width: 1400px; margin: 0; padding: 28px 32px 80px; }\n.rz-content .realiiz-form { max-width: none; }\n.rz-content .realiiz-form fieldset, .rz-content .realiiz-form__alert, .rz-content .realiiz-form__actions { max-width: 920px; }\n/* The form's save bar pins to the bottom of the content column: bleed out over .rz-content's padding, then pad back in. */\n.rz-content .realiiz-form__bar { position: sticky; bottom: 0; z-index: 10; margin: 24px -32px -80px; padding: 12px 32px; background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(14,23,38,.05); }\n.rz-content .realiiz-form__status { color: var(--text-muted); }\n.rz-content .realiiz-form__bar[data-dirty] .realiiz-form__status { color: var(--text-primary); font-weight: 500; }\n\n/* ---- primitives ----------------------------------------------------- */\n/* Same metrics as the form's Save button (.realiiz-form__button) so every button in the admin matches. */\n.rz-btn { font-family: inherit; font-weight: 600; border-radius: var(--rz-radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; line-height: 1.2; }\n.rz-btn--md { padding: 10px 16px; font-size: 15px; min-height: 40px; }\n.rz-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n.rz-admin .rz-btn--primary, .rz-admin a.rz-btn--primary { background: var(--signal); color: var(--signal-fg); border: 1px solid var(--signal); }\n.rz-admin .rz-btn--secondary, .rz-admin a.rz-btn--secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn--danger, .rz-admin a.rz-btn--danger { background: transparent; color: var(--status-down); border: 1px solid var(--status-down); }\n.rz-admin .rz-btn--ghost, .rz-admin a.rz-btn--ghost { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn:disabled { opacity: .55; cursor: default; }\n.rz-arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .15s ease-out; }\n@media (prefers-reduced-motion: no-preference) {\n .rz-btn:hover .rz-arrow, a:hover .rz-arrow { transform: translate(2px, -2px); }\n .rz-btn:hover .rz-arrow--fwd, a:hover .rz-arrow--fwd { transform: translateX(4px); }\n}\n.rz-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }\n.rz-card--narrow { max-width: 760px; }\n.rz-card__title { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }\n.rz-card__meta { color: var(--text-muted); font-size: .8rem; }\n.rz-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .9rem; flex-wrap: wrap; }\n.rz-card__note { margin-top: .5rem; }\n.rz-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }\n.rz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n.rz-pagehead__eyebrow { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .3rem; }\n.rz-pagehead h1 { font-size: 1.375rem; font-weight: 600; }\n.rz-pagehead__sub { color: var(--text-secondary); font-size: .85rem; margin-top: .25rem; }\n.rz-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); }\n.rz-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }\n.rz-pill--up::before { background: var(--status-up); } .rz-pill--warn::before { background: var(--signal-warn); } .rz-pill--down::before { background: var(--status-down); }\n.rz-pill--plain::before { display: none; }\n/* ---- steps tracker ------------------------------------------------- */\n/* Dots on one rail, connectors dot-to-dot, label under each dot; left-aligned like the rest of the page. */\n.rz-steps { list-style: none; margin: 4px 0 22px; padding: 0 0 22px; display: flex; border-bottom: 1px solid var(--separator); }\n.rz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; min-width: 0; }\n.rz-step:last-child { flex: 0 0 auto; }\n.rz-step:not(:last-child)::after { content: \"\"; position: absolute; top: 12px; left: 26px; right: 0; height: 2px; background: var(--border); }\n.rz-step--done:not(:last-child)::after { background: var(--status-up); }\n.rz-step__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface-1); }\n.rz-step--done .rz-step__dot { background: var(--status-up); border-color: var(--status-up); color: #fff; }\n.rz-step--active .rz-step__dot { position: relative; border-color: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--signal); }\n/* A spinning arc over the ring: the step is working, not waiting on you. */\n.rz-step--active .rz-step__dot::after { content: \"\"; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--signal); animation: rz-spin .9s linear infinite; }\n@media (prefers-reduced-motion: reduce) { .rz-step--active .rz-step__dot::after { animation: none; border-color: var(--signal); } }\n@keyframes rz-spin { to { transform: rotate(360deg); } }\n.rz-step--failed .rz-step__dot { background: var(--status-down); border-color: var(--status-down); color: #fff; }\n.rz-step__text { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }\n.rz-step__label { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }\n.rz-step--active .rz-step__label, .rz-step--done .rz-step__label { color: var(--text-primary); }\n.rz-step--failed .rz-step__label { color: var(--status-down); }\n.rz-step__note { font-size: .75rem; color: var(--text-muted); }\n@keyframes rz-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 8%, transparent); } }\n.rz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }\n.rz-actions__hint { font-size: .8rem; color: var(--text-muted); }\n.rz-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); margin-bottom: 18px; font-size: .9rem; }\n.rz-notice__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\n.rz-status-link { text-decoration: none; }\n.rz-discard { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--separator); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-secondary); }\n.rz-discard__link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-discard__link:hover { color: var(--status-down); }\n.rz-nowrap { white-space: nowrap; }\n.rz-table td.rz-fit, .rz-table th.rz-fit { width: 1%; white-space: nowrap; }\n.rz-empty { border: 1px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: var(--text-secondary); }\n.rz-empty h3 { font-size: 1rem; margin-bottom: .4rem; }\n.rz-table-wrap { width: 100%; }\n.rz-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }\n.rz-table th, .rz-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--separator); font-size: .875rem; vertical-align: top; }\n.rz-table th { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--surface-2); }\n.rz-table tr:last-child td { border-bottom: 0; }\n.rz-muted { color: var(--text-muted); }\n.rz-alert { border: 1px solid var(--status-down); color: var(--status-down); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n.rz-ok { border: 1px solid var(--status-up); color: var(--signal-dim); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n\n/* ---- account menu --------------------------------------------------- */\n.rz-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }\n.rz-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; flex-wrap: wrap; }\n.rz-tabs__tab { padding: .55rem .9rem; font: inherit; font-size: .88rem; color: var(--text-secondary); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }\n.rz-tabs__tab:hover { color: var(--text-primary); }\n.rz-tabs__tab[aria-selected=\"true\"] { color: var(--text-primary); border-bottom-color: var(--signal); font-weight: 600; }\n.rz-tabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 4px; }\n.rz-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-primary); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; overflow: hidden; }\n.rz-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(14,23,38,.14); overflow: hidden; z-index: 50; }\n.rz-menu__who { padding: .75rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }\n.rz-menu__name { font-weight: 600; font-size: .875rem; }\n.rz-menu__email { color: var(--text-muted); font-size: .75rem; word-break: break-all; }\n.rz-menu__sep { height: 1px; background: var(--border); margin: .3rem 0; }\n.rz-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .9rem; font: inherit; font-size: .8125rem; color: var(--text-secondary); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; }\n.rz-menu__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-menu__item svg { flex-shrink: 0; }\n.rz-menu__item--static { cursor: default; }\n.rz-menu__item--static:hover { background: none; color: var(--text-secondary); }\n.rz-menu__item .rz-menu__end { margin-left: auto; }\n.rz-menu__signout { margin: 0 0 .3rem; }\n.rz-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--rz-radius); overflow: hidden; }\n.rz-seg button { font: inherit; font-size: .75rem; padding: .15rem .55rem; line-height: 1.3; background: transparent; color: var(--text-secondary); border: 0; cursor: pointer; }\n.rz-seg button[aria-pressed=\"true\"] { background: var(--surface-3); color: var(--text-primary); }\n\n/* ---- mobile: sidebar becomes a strip under the top bar --------------- */\n@media (max-width: 720px) {\n .rz-body { flex-direction: column; }\n .rz-sidebar, .rz-sidebar--collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; }\n .rz-sidebar__nav { display: flex; padding: .35rem .25rem; overflow-x: auto; }\n .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }\n .rz-sidebar--collapsed .rz-sidebar__label { display: block; }\n .rz-sidebar__collapse { display: none; }\n .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }\n .rz-topbar__greeting { display: none; }\n .rz-content { padding: 18px 14px 60px; }\n /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */\n .rz-sidebar, .rz-sidebar--collapsed { position: static; height: auto; }\n .rz-sidebar__item--disabled { display: none; }\n /* Save bar: bleed matches the narrower content padding; stack status above the buttons. */\n .rz-content .realiiz-form__bar { margin: 18px -14px -60px; padding: 10px 14px; flex-wrap: wrap; }\n .rz-content .realiiz-form__status { flex-basis: 100%; margin-right: 0; font-size: .8rem; }\n /* Editor toolbar wraps; the Insert group drops its label and left rule to save width. */\n .rz-admin .realiiz-md__head { padding: 5px; }\n .rz-admin .realiiz-md__insert { border-left: 0; padding-left: 0; margin-left: 0; }\n .rz-admin .realiiz-md__lab { display: none; }\n .rz-admin .realiiz-md--fs { padding: 8px; }\n /* Tracker: notes hide, labels shrink, so three steps fit a phone. */\n .rz-step__note { display: none; }\n .rz-step__label { font-size: .8rem; }\n .rz-step:not(:last-child)::after { right: 6px; }\n /* Tables scroll sideways inside their own box instead of stretching the page. */\n .rz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n .rz-pagehead { align-items: flex-start; flex-direction: column; }\n .rz-notice { flex-direction: column; align-items: flex-start; }\n .rz-card--narrow { max-width: none; }\n}\n\n/* ---- forms extras: markdown editor, chips, gauges, preview prose --------- */\n.rz-admin .realiiz-md { --_md-head: var(--surface-2); --_md-hover: var(--surface-2); --_md-hover-line: var(--signal-glow); --_md-on: color-mix(in srgb, var(--signal) 12%, var(--surface-1)); --_md-tip: var(--ink); }\n.rz-admin .realiiz-md__mode { background: var(--surface-2); }\n.rz-admin .realiiz-md__mode button { color: var(--text-secondary); }\n.rz-admin .realiiz-md__mode button[aria-selected=\"true\"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(14,23,38,.12); }\n.rz-admin .realiiz-md__panel, .rz-admin .realiiz-md__tgrid, .rz-admin .realiiz-md--fs, .rz-admin .realiiz-md .realiiz-md__ta, .rz-admin .realiiz-md__preview, .rz-admin .realiiz-md__head button { background: var(--surface-1); }\n.rz-admin .realiiz-md__head { background: var(--surface-2); }\n.rz-admin .realiiz-md__head button { color: var(--text-primary); }\n.rz-admin .realiiz-md__insert button { background: var(--surface-2); color: var(--text-secondary); }\n.rz-admin .realiiz-md__tgcells i { background: var(--surface-1); }\n.rz-admin .realiiz-md__tgcells i.hot { background: color-mix(in srgb, var(--signal) 18%, var(--surface-1)); }\n.rz-admin .realiiz-md__loading { color: var(--text-muted); font-size: .8rem; }\n.rz-admin .realiiz-prose { max-width: 68ch; font-size: 1rem; line-height: 1.65; color: var(--text-primary); }\n.rz-admin .realiiz-prose h1, .rz-admin .realiiz-prose h2, .rz-admin .realiiz-prose h3 { font-family: var(--rz-font-display); line-height: 1.25; margin: 1.4em 0 .5em; }\n.rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }\n.rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }\n.rz-admin .realiiz-prose a { color: var(--signal); }\n/* The site's prose class picks a slate body color for a light page; on the dark surface that reads as disabled. */\n.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); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose a { color: var(--signal-dim); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose hr { border-color: var(--border); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose blockquote { color: var(--text-secondary); }\n.rz-admin .realiiz-prose blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-secondary); }\n.rz-admin .realiiz-prose code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; font-family: var(--rz-font-mono); font-size: .9em; }\n.rz-admin .realiiz-prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }\n.rz-admin .realiiz-prose img { max-width: 100%; height: auto; border-radius: 6px; }\n.rz-admin .realiiz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--rz-radius); }\n.rz-admin .realiiz-chips:focus-within { border-color: var(--signal); box-shadow: var(--realiiz-form-focus-ring); }\n.rz-admin .realiiz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--text-primary); }\n.rz-admin .realiiz-chip button { font: inherit; line-height: 1; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }\n.rz-admin .realiiz-chip button:hover { background: var(--status-down); color: #fff; }\n.rz-admin .realiiz-chips__input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 4px; }\n.rz-admin .realiiz-chips__count { margin-left: auto; color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }\n.rz-admin .realiiz-gauge { color: var(--text-muted); }\n.rz-admin .realiiz-gauge__bar { background: var(--surface-3); }\n.rz-admin .realiiz-gauge__zone { background: color-mix(in srgb, var(--status-up) 28%, transparent); }\n.rz-admin .realiiz-gauge__fill { background: var(--text-muted); }\n.rz-admin .realiiz-gauge--ok .realiiz-gauge__fill { background: var(--status-up); } .rz-admin .realiiz-gauge--ok { color: var(--status-up); }\n.rz-admin .realiiz-gauge--over .realiiz-gauge__fill { background: var(--status-down); } .rz-admin .realiiz-gauge--over { color: var(--status-down); }\n";
140
144
 
141
145
  /**
142
146
  * Tabs — which SECTION of this page am I on (Account: My Profile · Change
package/dist/shell/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as react from 'react';
2
2
  import { ReactNode, ButtonHTMLAttributes, AnchorHTMLAttributes } from 'react';
3
- import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-CNuphww6.js';
4
- export { A as AccountMenu, a as Sidebar, b as ThemeToggle, f as firstNameOf, i as initialsOf, c as isActive, u as useTheme } from '../Sidebar-CNuphww6.js';
3
+ import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-Dz_qJOSx.js';
4
+ export { A as AccountMenu, a as Sidebar, b as ThemeToggle, f as firstNameOf, i as initialsOf, c as isActive, u as useTheme } from '../Sidebar-Dz_qJOSx.js';
5
5
 
6
6
  interface AdminShellProps {
7
7
  siteName: string;
@@ -22,8 +22,10 @@ interface AdminShellProps {
22
22
  signOutPath?: string;
23
23
  /** Account page for the avatar menu. Default `${basePath}/account`; null hides the item. */
24
24
  accountHref?: string | null;
25
- /** Help centre for the avatar menu. Default `${basePath}/help`; null hides the item. */
25
+ /** Help center for the avatar menu. Default `${basePath}/help`; null hides the item. */
26
26
  helpHref?: string | null;
27
+ /** The live website. Makes the brand and a "View website" menu item open it in a new tab. */
28
+ siteUrl?: string | null;
27
29
  /**
28
30
  * The client's own branding (Business tab). `name` replaces siteName in the top bar
29
31
  * and `logoUrl` replaces the logo; the product word ("Studio") stays.
@@ -35,13 +37,15 @@ interface AdminShellProps {
35
37
  defaultTheme?: Theme;
36
38
  children: ReactNode;
37
39
  }
38
- declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
40
+ declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
39
41
 
40
- declare function TopBar({ siteName, productName, logoUrl, homeHref, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
42
+ declare function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
41
43
  siteName: string;
42
44
  productName: string;
43
45
  logoUrl?: string | null;
44
46
  homeHref: string;
47
+ /** The live website. When set, the brand opens it in a new tab (like every dashboard people know); otherwise it goes to the dashboard. */
48
+ siteUrl?: string | null;
45
49
  user: ShellUser | null;
46
50
  role: string | null;
47
51
  theme: Theme;
@@ -73,7 +77,7 @@ interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
73
77
  }
74
78
  declare function LinkButton({ variant, size, className, external, forward, children, ...rest }: LinkButtonProps): react.JSX.Element;
75
79
  declare function ForwardArrow(): react.JSX.Element;
76
- /** Drawn, not the ↗ glyph — the glyph sits high in its box and never centres. */
80
+ /** Drawn, not the ↗ glyph — the glyph sits high in its box and never centers. */
77
81
  declare function OutboundArrow(): react.JSX.Element;
78
82
 
79
83
  declare function Card({ title, meta, note, children, actions, className }: {
@@ -136,7 +140,7 @@ declare function iconFor(id: string): IconName;
136
140
  * The block at the end maps the forms-ui variables onto these tokens, so
137
141
  * ContentForm and MagicLinkForm re-skin without touching their own code.
138
142
  */
139
- declare const SHELL_CSS = "\n.rz-admin, .rz-admin[data-theme=\"light\"] {\n /* realiiz.com palette (src/app/globals.css): ink, bone, paper, signal blue, slate, line, amber */\n --ink: #0e1726; --bone: #f7f5f0; --signal: #1f6feb;\n --surface-0: #f7f5f0; --surface-1: #ffffff; --surface-2: #f1eee7; --surface-3: #e8e4da;\n --text-primary: #0e1726; --text-secondary: #5b6678; --text-muted: #8a93a5;\n --signal-dim: #1a63d8; --signal-glow: #5b9bff; --signal-warn: #e0a03b; --series-blue: #1f6feb;\n --border: #d9d4c8; --separator: #e9e5dc;\n --status-up: #15803d; --status-down: #dc2626; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin[data-theme=\"dark\"] { color-scheme: dark; }\n.rz-admin[data-theme=\"dark\"] {\n --ink: #eef0f5; --bone: #1b2334; --signal: #3b82f6;\n --surface-0: #1b2334; --surface-1: #222c42; --surface-2: #29344a; --surface-3: #36415c;\n --text-primary: #eef0f5; --text-secondary: #a2abbf; --text-muted: #77819a;\n --signal-dim: #8db4ff; --signal-glow: #aec9ff; --signal-warn: #eab058; --series-blue: #3b82f6;\n --border: #36415c; --separator: #2c3750;\n --status-up: #4ade80; --status-down: #f87171; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin {\n --rz-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --rz-font-display: var(--rz-font);\n --rz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n --rz-radius: 6px;\n --rz-sidebar: 220px; --rz-sidebar-collapsed: 58px; --rz-topbar: 52px;\n\n /* forms-ui speaks these; map them once so both packages agree */\n --realiiz-form-fg: var(--text-primary); --realiiz-form-muted: var(--text-muted);\n --realiiz-form-border: var(--border); --realiiz-form-accent: var(--signal);\n --realiiz-form-accent-fg: var(--signal-fg); --realiiz-form-danger: var(--status-down);\n --realiiz-form-radius: var(--rz-radius); --realiiz-form-font: var(--rz-font);\n --realiiz-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);\n\n box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;\n background: var(--surface-0); color: var(--text-primary);\n font-family: var(--rz-font); font-size: 14px; line-height: 1.45;\n}\n.rz-admin *, .rz-admin *::before, .rz-admin *::after { box-sizing: inherit; }\n.rz-admin a { color: inherit; }\n.rz-admin h1, .rz-admin h2, .rz-admin h3 { font-family: var(--rz-font-display); color: var(--text-primary); margin: 0; }\n.rz-admin .realiiz-form__control { background: var(--surface-0); }\n.rz-admin .realiiz-image { background: var(--surface-0); }\n.rz-admin .realiiz-image__thumb { background: var(--surface-2); }\n.rz-admin[data-theme=\"dark\"] .realiiz-form__control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }\n.rz-admin .realiiz-form__button { background: var(--surface-1); color: var(--text-primary); }\n.rz-admin .realiiz-form__button--primary { background: var(--signal); color: var(--signal-fg); }\n\n/* ---- frame ---------------------------------------------------------- */\n.rz-topbar { height: var(--rz-topbar); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-shrink: 0; }\n.rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }\n.rz-topbar__logo { height: 22px; width: auto; display: block; }\n.rz-topbar__product { font-weight: 400; color: var(--text-secondary); }\n.rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }\n.rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }\n.rz-body { display: flex; flex: 1; min-height: 0; }\n/* Top bar and sidebar stay put while the content scrolls, so Collapse is always at the bottom-left. */\n.rz-topbar { position: sticky; top: 0; z-index: 20; }\n.rz-sidebar { position: sticky; top: var(--rz-topbar); height: calc(100vh - var(--rz-topbar)); width: var(--rz-sidebar); flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; transition: width .15s ease; overflow: hidden; }\n.rz-sidebar--collapsed { width: var(--rz-sidebar-collapsed); }\n.rz-sidebar__nav { padding: .75rem 0; flex: 1; overflow-y: auto; }\n.rz-sidebar__item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: .875rem; font-weight: 400; white-space: nowrap; overflow: hidden; }\n.rz-sidebar__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-sidebar__item--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-sidebar__item--disabled, .rz-sidebar__item--disabled:hover { color: var(--text-muted); opacity: .55; background: transparent; cursor: default; }\n.rz-sidebar--collapsed .rz-sidebar__item { justify-content: center; padding: .55rem 0; }\n.rz-sidebar--collapsed .rz-sidebar__label { display: none; }\n.rz-sidebar__pinned { border-top: 1px solid var(--separator); padding: .3rem 0; }\n.rz-sidebar__collapse { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--separator); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }\n.rz-sidebar__collapse:hover { color: var(--text-primary); }\n.rz-sidebar__collapse svg { flex-shrink: 0; }\n.rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }\n.rz-main { flex: 1; min-width: 0; }\n.rz-content { max-width: 1400px; margin: 0; padding: 28px 32px 80px; }\n.rz-content .realiiz-form { max-width: none; }\n.rz-content .realiiz-form fieldset, .rz-content .realiiz-form__alert, .rz-content .realiiz-form__actions { max-width: 920px; }\n/* The form's save bar pins to the bottom of the content column: bleed out over .rz-content's padding, then pad back in. */\n.rz-content .realiiz-form__bar { position: sticky; bottom: 0; z-index: 10; margin: 24px -32px -80px; padding: 12px 32px; background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(14,23,38,.05); }\n.rz-content .realiiz-form__status { color: var(--text-muted); }\n.rz-content .realiiz-form__bar[data-dirty] .realiiz-form__status { color: var(--text-primary); font-weight: 500; }\n\n/* ---- primitives ----------------------------------------------------- */\n/* Same metrics as the form's Save button (.realiiz-form__button) so every button in the admin matches. */\n.rz-btn { font-family: inherit; font-weight: 600; border-radius: var(--rz-radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; line-height: 1.2; }\n.rz-btn--md { padding: 10px 16px; font-size: 15px; min-height: 40px; }\n.rz-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n.rz-admin .rz-btn--primary, .rz-admin a.rz-btn--primary { background: var(--signal); color: var(--signal-fg); border: 1px solid var(--signal); }\n.rz-admin .rz-btn--secondary, .rz-admin a.rz-btn--secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn--danger, .rz-admin a.rz-btn--danger { background: transparent; color: var(--status-down); border: 1px solid var(--status-down); }\n.rz-admin .rz-btn--ghost, .rz-admin a.rz-btn--ghost { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn:disabled { opacity: .55; cursor: default; }\n.rz-arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .15s ease-out; }\n@media (prefers-reduced-motion: no-preference) {\n .rz-btn:hover .rz-arrow, a:hover .rz-arrow { transform: translate(2px, -2px); }\n .rz-btn:hover .rz-arrow--fwd, a:hover .rz-arrow--fwd { transform: translateX(4px); }\n}\n.rz-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }\n.rz-card--narrow { max-width: 760px; }\n.rz-card__title { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }\n.rz-card__meta { color: var(--text-muted); font-size: .8rem; }\n.rz-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .9rem; flex-wrap: wrap; }\n.rz-card__note { margin-top: .5rem; }\n.rz-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }\n.rz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n.rz-pagehead__eyebrow { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .3rem; }\n.rz-pagehead h1 { font-size: 1.375rem; font-weight: 600; }\n.rz-pagehead__sub { color: var(--text-secondary); font-size: .85rem; margin-top: .25rem; }\n.rz-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); }\n.rz-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }\n.rz-pill--up::before { background: var(--status-up); } .rz-pill--warn::before { background: var(--signal-warn); } .rz-pill--down::before { background: var(--status-down); }\n.rz-pill--plain::before { display: none; }\n/* ---- steps tracker ------------------------------------------------- */\n/* Dots on one rail, connectors dot-to-dot, label under each dot; left-aligned like the rest of the page. */\n.rz-steps { list-style: none; margin: 4px 0 22px; padding: 0 0 22px; display: flex; border-bottom: 1px solid var(--separator); }\n.rz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; min-width: 0; }\n.rz-step:last-child { flex: 0 0 auto; }\n.rz-step:not(:last-child)::after { content: \"\"; position: absolute; top: 12px; left: 26px; right: 0; height: 2px; background: var(--border); }\n.rz-step--done:not(:last-child)::after { background: var(--status-up); }\n.rz-step__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface-1); }\n.rz-step--done .rz-step__dot { background: var(--status-up); border-color: var(--status-up); color: #fff; }\n.rz-step--active .rz-step__dot { position: relative; border-color: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--signal); }\n/* A spinning arc over the ring: the step is working, not waiting on you. */\n.rz-step--active .rz-step__dot::after { content: \"\"; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--signal); animation: rz-spin .9s linear infinite; }\n@media (prefers-reduced-motion: reduce) { .rz-step--active .rz-step__dot::after { animation: none; border-color: var(--signal); } }\n@keyframes rz-spin { to { transform: rotate(360deg); } }\n.rz-step--failed .rz-step__dot { background: var(--status-down); border-color: var(--status-down); color: #fff; }\n.rz-step__text { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }\n.rz-step__label { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }\n.rz-step--active .rz-step__label, .rz-step--done .rz-step__label { color: var(--text-primary); }\n.rz-step--failed .rz-step__label { color: var(--status-down); }\n.rz-step__note { font-size: .75rem; color: var(--text-muted); }\n@keyframes rz-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 8%, transparent); } }\n.rz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }\n.rz-actions__hint { font-size: .8rem; color: var(--text-muted); }\n.rz-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); margin-bottom: 18px; font-size: .9rem; }\n.rz-notice__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\n.rz-status-link { text-decoration: none; }\n.rz-discard { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--separator); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-secondary); }\n.rz-discard__link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-discard__link:hover { color: var(--status-down); }\n.rz-nowrap { white-space: nowrap; }\n.rz-table td.rz-fit, .rz-table th.rz-fit { width: 1%; white-space: nowrap; }\n.rz-empty { border: 1px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: var(--text-secondary); }\n.rz-empty h3 { font-size: 1rem; margin-bottom: .4rem; }\n.rz-table-wrap { width: 100%; }\n.rz-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }\n.rz-table th, .rz-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--separator); font-size: .875rem; vertical-align: top; }\n.rz-table th { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--surface-2); }\n.rz-table tr:last-child td { border-bottom: 0; }\n.rz-muted { color: var(--text-muted); }\n.rz-alert { border: 1px solid var(--status-down); color: var(--status-down); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n.rz-ok { border: 1px solid var(--status-up); color: var(--signal-dim); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n\n/* ---- account menu --------------------------------------------------- */\n.rz-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }\n.rz-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; flex-wrap: wrap; }\n.rz-tabs__tab { padding: .55rem .9rem; font: inherit; font-size: .88rem; color: var(--text-secondary); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }\n.rz-tabs__tab:hover { color: var(--text-primary); }\n.rz-tabs__tab[aria-selected=\"true\"] { color: var(--text-primary); border-bottom-color: var(--signal); font-weight: 600; }\n.rz-tabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 4px; }\n.rz-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-primary); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; overflow: hidden; }\n.rz-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(14,23,38,.14); overflow: hidden; z-index: 50; }\n.rz-menu__who { padding: .75rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }\n.rz-menu__name { font-weight: 600; font-size: .875rem; }\n.rz-menu__email { color: var(--text-muted); font-size: .75rem; word-break: break-all; }\n.rz-menu__sep { height: 1px; background: var(--border); margin: .3rem 0; }\n.rz-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .9rem; font: inherit; font-size: .8125rem; color: var(--text-secondary); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; }\n.rz-menu__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-menu__item svg { flex-shrink: 0; }\n.rz-menu__item--static { cursor: default; }\n.rz-menu__item--static:hover { background: none; color: var(--text-secondary); }\n.rz-menu__item .rz-menu__end { margin-left: auto; }\n.rz-menu__signout { margin: 0 0 .3rem; }\n.rz-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--rz-radius); overflow: hidden; }\n.rz-seg button { font: inherit; font-size: .75rem; padding: .15rem .55rem; line-height: 1.3; background: transparent; color: var(--text-secondary); border: 0; cursor: pointer; }\n.rz-seg button[aria-pressed=\"true\"] { background: var(--surface-3); color: var(--text-primary); }\n\n/* ---- mobile: sidebar becomes a strip under the top bar --------------- */\n@media (max-width: 720px) {\n .rz-body { flex-direction: column; }\n .rz-sidebar, .rz-sidebar--collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; }\n .rz-sidebar__nav { display: flex; padding: .35rem .25rem; overflow-x: auto; }\n .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }\n .rz-sidebar--collapsed .rz-sidebar__label { display: block; }\n .rz-sidebar__collapse { display: none; }\n .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }\n .rz-topbar__greeting { display: none; }\n .rz-content { padding: 18px 14px 60px; }\n /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */\n .rz-sidebar, .rz-sidebar--collapsed { position: static; height: auto; }\n .rz-sidebar__item--disabled { display: none; }\n /* Save bar: bleed matches the narrower content padding; stack status above the buttons. */\n .rz-content .realiiz-form__bar { margin: 18px -14px -60px; padding: 10px 14px; flex-wrap: wrap; }\n .rz-content .realiiz-form__status { flex-basis: 100%; margin-right: 0; font-size: .8rem; }\n /* Editor toolbar wraps; the Insert group drops its label and left rule to save width. */\n .rz-admin .realiiz-md__head { padding: 5px; }\n .rz-admin .realiiz-md__insert { border-left: 0; padding-left: 0; margin-left: 0; }\n .rz-admin .realiiz-md__lab { display: none; }\n .rz-admin .realiiz-md--fs { padding: 8px; }\n /* Tracker: notes hide, labels shrink, so three steps fit a phone. */\n .rz-step__note { display: none; }\n .rz-step__label { font-size: .8rem; }\n .rz-step:not(:last-child)::after { right: 6px; }\n /* Tables scroll sideways inside their own box instead of stretching the page. */\n .rz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n .rz-pagehead { align-items: flex-start; flex-direction: column; }\n .rz-notice { flex-direction: column; align-items: flex-start; }\n .rz-card--narrow { max-width: none; }\n}\n\n/* ---- forms extras: markdown editor, chips, gauges, preview prose --------- */\n.rz-admin .realiiz-md { --_md-head: var(--surface-2); --_md-hover: var(--surface-2); --_md-hover-line: var(--signal-glow); --_md-on: color-mix(in srgb, var(--signal) 12%, var(--surface-1)); --_md-tip: var(--ink); }\n.rz-admin .realiiz-md__mode { background: var(--surface-2); }\n.rz-admin .realiiz-md__mode button { color: var(--text-secondary); }\n.rz-admin .realiiz-md__mode button[aria-selected=\"true\"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(14,23,38,.12); }\n.rz-admin .realiiz-md__panel, .rz-admin .realiiz-md__tgrid, .rz-admin .realiiz-md--fs, .rz-admin .realiiz-md .realiiz-md__ta, .rz-admin .realiiz-md__preview, .rz-admin .realiiz-md__head button { background: var(--surface-1); }\n.rz-admin .realiiz-md__head { background: var(--surface-2); }\n.rz-admin .realiiz-md__head button { color: var(--text-primary); }\n.rz-admin .realiiz-md__insert button { background: var(--surface-2); color: var(--text-secondary); }\n.rz-admin .realiiz-md__tgcells i { background: var(--surface-1); }\n.rz-admin .realiiz-md__tgcells i.hot { background: color-mix(in srgb, var(--signal) 18%, var(--surface-1)); }\n.rz-admin .realiiz-md__loading { color: var(--text-muted); font-size: .8rem; }\n.rz-admin .realiiz-prose { max-width: 68ch; font-size: 1rem; line-height: 1.65; color: var(--text-primary); }\n.rz-admin .realiiz-prose h1, .rz-admin .realiiz-prose h2, .rz-admin .realiiz-prose h3 { font-family: var(--rz-font-display); line-height: 1.25; margin: 1.4em 0 .5em; }\n.rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }\n.rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }\n.rz-admin .realiiz-prose a { color: var(--signal); }\n/* The site's prose class picks a slate body colour for a light page; on the dark surface that reads as disabled. */\n.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); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose a { color: var(--signal-dim); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose hr { border-color: var(--border); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose blockquote { color: var(--text-secondary); }\n.rz-admin .realiiz-prose blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-secondary); }\n.rz-admin .realiiz-prose code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; font-family: var(--rz-font-mono); font-size: .9em; }\n.rz-admin .realiiz-prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }\n.rz-admin .realiiz-prose img { max-width: 100%; height: auto; border-radius: 6px; }\n.rz-admin .realiiz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--rz-radius); }\n.rz-admin .realiiz-chips:focus-within { border-color: var(--signal); box-shadow: var(--realiiz-form-focus-ring); }\n.rz-admin .realiiz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--text-primary); }\n.rz-admin .realiiz-chip button { font: inherit; line-height: 1; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }\n.rz-admin .realiiz-chip button:hover { background: var(--status-down); color: #fff; }\n.rz-admin .realiiz-chips__input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 4px; }\n.rz-admin .realiiz-chips__count { margin-left: auto; color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }\n.rz-admin .realiiz-gauge { color: var(--text-muted); }\n.rz-admin .realiiz-gauge__bar { background: var(--surface-3); }\n.rz-admin .realiiz-gauge__zone { background: color-mix(in srgb, var(--status-up) 28%, transparent); }\n.rz-admin .realiiz-gauge__fill { background: var(--text-muted); }\n.rz-admin .realiiz-gauge--ok .realiiz-gauge__fill { background: var(--status-up); } .rz-admin .realiiz-gauge--ok { color: var(--status-up); }\n.rz-admin .realiiz-gauge--over .realiiz-gauge__fill { background: var(--status-down); } .rz-admin .realiiz-gauge--over { color: var(--status-down); }\n";
143
+ declare const SHELL_CSS = "\n.rz-admin, .rz-admin[data-theme=\"light\"] {\n /* realiiz.com palette (src/app/globals.css): ink, bone, paper, signal blue, slate, line, amber */\n --ink: #0e1726; --bone: #f7f5f0; --signal: #1f6feb;\n --surface-0: #f7f5f0; --surface-1: #ffffff; --surface-2: #f1eee7; --surface-3: #e8e4da;\n --text-primary: #0e1726; --text-secondary: #5b6678; --text-muted: #8a93a5;\n --signal-dim: #1a63d8; --signal-glow: #5b9bff; --signal-warn: #e0a03b; --series-blue: #1f6feb;\n --border: #d9d4c8; --separator: #e9e5dc;\n --status-up: #15803d; --status-down: #dc2626; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin[data-theme=\"dark\"] { color-scheme: dark; }\n.rz-admin[data-theme=\"dark\"] {\n --ink: #eef0f5; --bone: #1b2334; --signal: #3b82f6;\n --surface-0: #1b2334; --surface-1: #222c42; --surface-2: #29344a; --surface-3: #36415c;\n --text-primary: #eef0f5; --text-secondary: #a2abbf; --text-muted: #77819a;\n --signal-dim: #8db4ff; --signal-glow: #aec9ff; --signal-warn: #eab058; --series-blue: #3b82f6;\n --border: #36415c; --separator: #2c3750;\n --status-up: #4ade80; --status-down: #f87171; --status-neutral: var(--text-muted); --status-blocked: var(--border);\n --signal-fg: #ffffff;\n}\n.rz-admin {\n --rz-font: system-ui, -apple-system, \"Segoe UI\", Roboto, sans-serif;\n --rz-font-display: var(--rz-font);\n --rz-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;\n --rz-radius: 6px;\n --rz-sidebar: 220px; --rz-sidebar-collapsed: 58px; --rz-topbar: 52px;\n\n /* forms-ui speaks these; map them once so both packages agree */\n --realiiz-form-fg: var(--text-primary); --realiiz-form-muted: var(--text-muted);\n --realiiz-form-border: var(--border); --realiiz-form-accent: var(--signal);\n --realiiz-form-accent-fg: var(--signal-fg); --realiiz-form-danger: var(--status-down);\n --realiiz-form-radius: var(--rz-radius); --realiiz-form-font: var(--rz-font);\n --realiiz-form-focus-ring: 0 0 0 3px color-mix(in srgb, var(--signal) 25%, transparent);\n\n box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column;\n background: var(--surface-0); color: var(--text-primary);\n font-family: var(--rz-font); font-size: 14px; line-height: 1.45;\n}\n.rz-admin *, .rz-admin *::before, .rz-admin *::after { box-sizing: inherit; }\n.rz-admin a { color: inherit; }\n.rz-admin h1, .rz-admin h2, .rz-admin h3 { font-family: var(--rz-font-display); color: var(--text-primary); margin: 0; }\n.rz-admin .realiiz-form__control { background: var(--surface-0); }\n.rz-admin .realiiz-image { background: var(--surface-0); }\n.rz-admin .realiiz-image__thumb { background: var(--surface-2); }\n.rz-admin[data-theme=\"dark\"] .realiiz-form__control::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7); }\n.rz-admin .realiiz-form__button { background: var(--surface-1); color: var(--text-primary); }\n.rz-admin .realiiz-form__button--primary { background: var(--signal); color: var(--signal-fg); }\n\n/* ---- frame ---------------------------------------------------------- */\n.rz-topbar { height: var(--rz-topbar); display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; border-bottom: 1px solid var(--border); background: var(--surface-1); flex-shrink: 0; }\n.rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }\n.rz-topbar__logo { height: 22px; width: auto; display: block; }\n.rz-topbar__product { font-weight: 400; color: var(--text-secondary); }\n.rz-topbar__brand .rz-arrow { color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }\n.rz-topbar__brand:hover .rz-arrow { opacity: 1; }\n.rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }\n.rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }\n.rz-body { display: flex; flex: 1; min-height: 0; }\n/* Top bar and sidebar stay put while the content scrolls, so Collapse is always at the bottom-left. */\n.rz-topbar { position: sticky; top: 0; z-index: 20; }\n.rz-sidebar { position: sticky; top: var(--rz-topbar); height: calc(100vh - var(--rz-topbar)); width: var(--rz-sidebar); flex-shrink: 0; border-right: 1px solid var(--border); background: var(--surface-1); display: flex; flex-direction: column; transition: width .15s ease; overflow: hidden; }\n.rz-sidebar--collapsed { width: var(--rz-sidebar-collapsed); }\n.rz-sidebar__nav { padding: .75rem 0; flex: 1; overflow-y: auto; }\n.rz-sidebar__item { display: flex; align-items: center; gap: .65rem; padding: .55rem 1rem; color: var(--text-secondary); text-decoration: none; font-size: .875rem; font-weight: 400; white-space: nowrap; overflow: hidden; }\n.rz-sidebar__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-sidebar__item--active { background: var(--surface-2); color: var(--signal); font-weight: 500; }\n.rz-sidebar__item--disabled, .rz-sidebar__item--disabled:hover { color: var(--text-muted); opacity: .55; background: transparent; cursor: default; }\n.rz-sidebar--collapsed .rz-sidebar__item { justify-content: center; padding: .55rem 0; }\n.rz-sidebar--collapsed .rz-sidebar__label { display: none; }\n.rz-sidebar__pinned { border-top: 1px solid var(--separator); padding: .3rem 0; }\n.rz-sidebar__collapse { display: flex; align-items: center; gap: .7rem; padding: .6rem 1rem; border: 0; border-top: 1px solid var(--separator); background: transparent; color: var(--text-muted); cursor: pointer; font: inherit; font-size: .8rem; text-align: left; }\n.rz-sidebar__collapse:hover { color: var(--text-primary); }\n.rz-sidebar__collapse svg { flex-shrink: 0; }\n.rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }\n.rz-main { flex: 1; min-width: 0; }\n.rz-content { max-width: 1400px; margin: 0; padding: 28px 32px 80px; }\n.rz-content .realiiz-form { max-width: none; }\n.rz-content .realiiz-form fieldset, .rz-content .realiiz-form__alert, .rz-content .realiiz-form__actions { max-width: 920px; }\n/* The form's save bar pins to the bottom of the content column: bleed out over .rz-content's padding, then pad back in. */\n.rz-content .realiiz-form__bar { position: sticky; bottom: 0; z-index: 10; margin: 24px -32px -80px; padding: 12px 32px; background: var(--surface-1); border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(14,23,38,.05); }\n.rz-content .realiiz-form__status { color: var(--text-muted); }\n.rz-content .realiiz-form__bar[data-dirty] .realiiz-form__status { color: var(--text-primary); font-weight: 500; }\n\n/* ---- primitives ----------------------------------------------------- */\n/* Same metrics as the form's Save button (.realiiz-form__button) so every button in the admin matches. */\n.rz-btn { font-family: inherit; font-weight: 600; border-radius: var(--rz-radius); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; white-space: nowrap; line-height: 1.2; }\n.rz-btn--md { padding: 10px 16px; font-size: 15px; min-height: 40px; }\n.rz-btn--sm { padding: 6px 12px; font-size: 13px; min-height: 32px; }\n.rz-admin .rz-btn--primary, .rz-admin a.rz-btn--primary { background: var(--signal); color: var(--signal-fg); border: 1px solid var(--signal); }\n.rz-admin .rz-btn--secondary, .rz-admin a.rz-btn--secondary { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn--danger, .rz-admin a.rz-btn--danger { background: transparent; color: var(--status-down); border: 1px solid var(--status-down); }\n.rz-admin .rz-btn--ghost, .rz-admin a.rz-btn--ghost { background: var(--surface-1); color: var(--text-primary); border: 1px solid var(--border); }\n.rz-admin .rz-btn:disabled { opacity: .55; cursor: default; }\n.rz-arrow { width: 1.1em; height: 1.1em; flex-shrink: 0; transition: transform .15s ease-out; }\n@media (prefers-reduced-motion: no-preference) {\n .rz-btn:hover .rz-arrow, a:hover .rz-arrow { transform: translate(2px, -2px); }\n .rz-btn:hover .rz-arrow--fwd, a:hover .rz-arrow--fwd { transform: translateX(4px); }\n}\n.rz-card { display: flex; flex-direction: column; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; padding: 18px 20px; }\n.rz-card--narrow { max-width: 760px; }\n.rz-card__title { font-size: .9375rem; font-weight: 600; margin-bottom: .35rem; }\n.rz-card__meta { color: var(--text-muted); font-size: .8rem; }\n.rz-card__actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .9rem; flex-wrap: wrap; }\n.rz-card__note { margin-top: .5rem; }\n.rz-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }\n.rz-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }\n.rz-pagehead__eyebrow { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: .3rem; }\n.rz-pagehead h1 { font-size: 1.375rem; font-weight: 600; }\n.rz-pagehead__sub { color: var(--text-secondary); font-size: .85rem; margin-top: .25rem; }\n.rz-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .5rem; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); }\n.rz-pill::before { content: \"\"; width: 7px; height: 7px; border-radius: 50%; background: var(--status-neutral); }\n.rz-pill--up::before { background: var(--status-up); } .rz-pill--warn::before { background: var(--signal-warn); } .rz-pill--down::before { background: var(--status-down); }\n.rz-pill--plain::before { display: none; }\n/* ---- steps tracker ------------------------------------------------- */\n/* Dots on one rail, connectors dot-to-dot, label under each dot; left-aligned like the rest of the page. */\n.rz-steps { list-style: none; margin: 4px 0 22px; padding: 0 0 22px; display: flex; border-bottom: 1px solid var(--separator); }\n.rz-step { flex: 1; position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 8px; min-width: 0; }\n.rz-step:last-child { flex: 0 0 auto; }\n.rz-step:not(:last-child)::after { content: \"\"; position: absolute; top: 12px; left: 26px; right: 0; height: 2px; background: var(--border); }\n.rz-step--done:not(:last-child)::after { background: var(--status-up); }\n.rz-step__dot { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; flex-shrink: 0; border: 2px solid var(--border); color: var(--text-muted); background: var(--surface-1); }\n.rz-step--done .rz-step__dot { background: var(--status-up); border-color: var(--status-up); color: #fff; }\n.rz-step--active .rz-step__dot { position: relative; border-color: color-mix(in srgb, var(--signal) 30%, transparent); color: var(--signal); }\n/* A spinning arc over the ring: the step is working, not waiting on you. */\n.rz-step--active .rz-step__dot::after { content: \"\"; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--signal); animation: rz-spin .9s linear infinite; }\n@media (prefers-reduced-motion: reduce) { .rz-step--active .rz-step__dot::after { animation: none; border-color: var(--signal); } }\n@keyframes rz-spin { to { transform: rotate(360deg); } }\n.rz-step--failed .rz-step__dot { background: var(--status-down); border-color: var(--status-down); color: #fff; }\n.rz-step__text { display: flex; flex-direction: column; gap: 1px; padding-right: 16px; }\n.rz-step__label { font-size: .875rem; font-weight: 500; color: var(--text-secondary); }\n.rz-step--active .rz-step__label, .rz-step--done .rz-step__label { color: var(--text-primary); }\n.rz-step--failed .rz-step__label { color: var(--status-down); }\n.rz-step__note { font-size: .75rem; color: var(--text-muted); }\n@keyframes rz-pulse { 0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--signal) 18%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--signal) 8%, transparent); } }\n.rz-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 20px; }\n.rz-actions__hint { font-size: .8rem; color: var(--text-muted); }\n.rz-notice { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); margin-bottom: 18px; font-size: .9rem; }\n.rz-notice__text { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }\n.rz-status-link { text-decoration: none; }\n.rz-discard { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--separator); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: .85rem; color: var(--text-secondary); }\n.rz-discard__link { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; color: var(--text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }\n.rz-discard__link:hover { color: var(--status-down); }\n.rz-nowrap { white-space: nowrap; }\n.rz-table td.rz-fit, .rz-table th.rz-fit { width: 1%; white-space: nowrap; }\n.rz-empty { border: 1px dashed var(--border); border-radius: 8px; padding: 32px; text-align: center; color: var(--text-secondary); }\n.rz-empty h3 { font-size: 1rem; margin-bottom: .4rem; }\n.rz-table-wrap { width: 100%; }\n.rz-table { width: 100%; border-collapse: collapse; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }\n.rz-table th, .rz-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--separator); font-size: .875rem; vertical-align: top; }\n.rz-table th { font-family: var(--rz-font-mono); font-size: .6875rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); background: var(--surface-2); }\n.rz-table tr:last-child td { border-bottom: 0; }\n.rz-muted { color: var(--text-muted); }\n.rz-alert { border: 1px solid var(--status-down); color: var(--status-down); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n.rz-ok { border: 1px solid var(--status-up); color: var(--signal-dim); border-radius: var(--rz-radius); padding: 12px 14px; margin: 0 0 16px; }\n\n/* ---- account menu --------------------------------------------------- */\n.rz-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }\n.rz-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; flex-wrap: wrap; }\n.rz-tabs__tab { padding: .55rem .9rem; font: inherit; font-size: .88rem; color: var(--text-secondary); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }\n.rz-tabs__tab:hover { color: var(--text-primary); }\n.rz-tabs__tab[aria-selected=\"true\"] { color: var(--text-primary); border-bottom-color: var(--signal); font-weight: 600; }\n.rz-tabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 4px; }\n.rz-avatar { width: 2rem; height: 2rem; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-primary); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; display: flex; align-items: center; justify-content: center; cursor: pointer; font-family: inherit; padding: 0; overflow: hidden; }\n.rz-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 15rem; background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(14,23,38,.14); overflow: hidden; z-index: 50; }\n.rz-menu__who { padding: .75rem .9rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }\n.rz-menu__name { font-weight: 600; font-size: .875rem; }\n.rz-menu__email { color: var(--text-muted); font-size: .75rem; word-break: break-all; }\n.rz-menu__sep { height: 1px; background: var(--border); margin: .3rem 0; }\n.rz-menu__item { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .45rem .9rem; font: inherit; font-size: .8125rem; color: var(--text-secondary); background: none; border: 0; text-align: left; cursor: pointer; text-decoration: none; }\n.rz-menu__item:hover { background: var(--surface-2); color: var(--text-primary); }\n.rz-menu__item svg { flex-shrink: 0; }\n.rz-menu__item--static { cursor: default; }\n.rz-menu__item--static:hover { background: none; color: var(--text-secondary); }\n.rz-menu__item .rz-menu__end { margin-left: auto; }\n.rz-menu__signout { margin: 0 0 .3rem; }\n.rz-seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--rz-radius); overflow: hidden; }\n.rz-seg button { font: inherit; font-size: .75rem; padding: .15rem .55rem; line-height: 1.3; background: transparent; color: var(--text-secondary); border: 0; cursor: pointer; }\n.rz-seg button[aria-pressed=\"true\"] { background: var(--surface-3); color: var(--text-primary); }\n\n/* ---- mobile: sidebar becomes a strip under the top bar --------------- */\n@media (max-width: 720px) {\n .rz-body { flex-direction: column; }\n .rz-sidebar, .rz-sidebar--collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; }\n .rz-sidebar__nav { display: flex; padding: .35rem .25rem; overflow-x: auto; }\n .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }\n .rz-sidebar--collapsed .rz-sidebar__label { display: block; }\n .rz-sidebar__collapse { display: none; }\n .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }\n .rz-topbar__greeting { display: none; }\n .rz-content { padding: 18px 14px 60px; }\n /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */\n .rz-sidebar, .rz-sidebar--collapsed { position: static; height: auto; }\n .rz-sidebar__item--disabled { display: none; }\n /* Save bar: bleed matches the narrower content padding; stack status above the buttons. */\n .rz-content .realiiz-form__bar { margin: 18px -14px -60px; padding: 10px 14px; flex-wrap: wrap; }\n .rz-content .realiiz-form__status { flex-basis: 100%; margin-right: 0; font-size: .8rem; }\n /* Editor toolbar wraps; the Insert group drops its label and left rule to save width. */\n .rz-admin .realiiz-md__head { padding: 5px; }\n .rz-admin .realiiz-md__insert { border-left: 0; padding-left: 0; margin-left: 0; }\n .rz-admin .realiiz-md__lab { display: none; }\n .rz-admin .realiiz-md--fs { padding: 8px; }\n /* Tracker: notes hide, labels shrink, so three steps fit a phone. */\n .rz-step__note { display: none; }\n .rz-step__label { font-size: .8rem; }\n .rz-step:not(:last-child)::after { right: 6px; }\n /* Tables scroll sideways inside their own box instead of stretching the page. */\n .rz-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }\n .rz-pagehead { align-items: flex-start; flex-direction: column; }\n .rz-notice { flex-direction: column; align-items: flex-start; }\n .rz-card--narrow { max-width: none; }\n}\n\n/* ---- forms extras: markdown editor, chips, gauges, preview prose --------- */\n.rz-admin .realiiz-md { --_md-head: var(--surface-2); --_md-hover: var(--surface-2); --_md-hover-line: var(--signal-glow); --_md-on: color-mix(in srgb, var(--signal) 12%, var(--surface-1)); --_md-tip: var(--ink); }\n.rz-admin .realiiz-md__mode { background: var(--surface-2); }\n.rz-admin .realiiz-md__mode button { color: var(--text-secondary); }\n.rz-admin .realiiz-md__mode button[aria-selected=\"true\"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgba(14,23,38,.12); }\n.rz-admin .realiiz-md__panel, .rz-admin .realiiz-md__tgrid, .rz-admin .realiiz-md--fs, .rz-admin .realiiz-md .realiiz-md__ta, .rz-admin .realiiz-md__preview, .rz-admin .realiiz-md__head button { background: var(--surface-1); }\n.rz-admin .realiiz-md__head { background: var(--surface-2); }\n.rz-admin .realiiz-md__head button { color: var(--text-primary); }\n.rz-admin .realiiz-md__insert button { background: var(--surface-2); color: var(--text-secondary); }\n.rz-admin .realiiz-md__tgcells i { background: var(--surface-1); }\n.rz-admin .realiiz-md__tgcells i.hot { background: color-mix(in srgb, var(--signal) 18%, var(--surface-1)); }\n.rz-admin .realiiz-md__loading { color: var(--text-muted); font-size: .8rem; }\n.rz-admin .realiiz-prose { max-width: 68ch; font-size: 1rem; line-height: 1.65; color: var(--text-primary); }\n.rz-admin .realiiz-prose h1, .rz-admin .realiiz-prose h2, .rz-admin .realiiz-prose h3 { font-family: var(--rz-font-display); line-height: 1.25; margin: 1.4em 0 .5em; }\n.rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }\n.rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }\n.rz-admin .realiiz-prose a { color: var(--signal); }\n/* The site's prose class picks a slate body color for a light page; on the dark surface that reads as disabled. */\n.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); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose a { color: var(--signal-dim); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose hr { border-color: var(--border); }\n.rz-admin[data-theme=\"dark\"] .realiiz-prose blockquote { color: var(--text-secondary); }\n.rz-admin .realiiz-prose blockquote { border-left: 3px solid var(--border); padding-left: 1em; color: var(--text-secondary); }\n.rz-admin .realiiz-prose code { background: var(--surface-2); padding: 0 4px; border-radius: 4px; font-family: var(--rz-font-mono); font-size: .9em; }\n.rz-admin .realiiz-prose pre { background: var(--surface-2); padding: 12px 14px; border-radius: 6px; overflow-x: auto; }\n.rz-admin .realiiz-prose img { max-width: 100%; height: auto; border-radius: 6px; }\n.rz-admin .realiiz-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 40px; padding: 5px 8px; background: var(--surface-0); border: 1px solid var(--border); border-radius: var(--rz-radius); }\n.rz-admin .realiiz-chips:focus-within { border-color: var(--signal); box-shadow: var(--realiiz-form-focus-ring); }\n.rz-admin .realiiz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--text-primary); }\n.rz-admin .realiiz-chip button { font: inherit; line-height: 1; width: 18px; height: 18px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted); cursor: pointer; }\n.rz-admin .realiiz-chip button:hover { background: var(--status-down); color: #fff; }\n.rz-admin .realiiz-chips__input { flex: 1; min-width: 120px; border: 0; background: transparent; font: inherit; color: inherit; outline: none; padding: 4px; }\n.rz-admin .realiiz-chips__count { margin-left: auto; color: var(--text-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }\n.rz-admin .realiiz-gauge { color: var(--text-muted); }\n.rz-admin .realiiz-gauge__bar { background: var(--surface-3); }\n.rz-admin .realiiz-gauge__zone { background: color-mix(in srgb, var(--status-up) 28%, transparent); }\n.rz-admin .realiiz-gauge__fill { background: var(--text-muted); }\n.rz-admin .realiiz-gauge--ok .realiiz-gauge__fill { background: var(--status-up); } .rz-admin .realiiz-gauge--ok { color: var(--status-up); }\n.rz-admin .realiiz-gauge--over .realiiz-gauge__fill { background: var(--status-down); } .rz-admin .realiiz-gauge--over { color: var(--status-down); }\n";
140
144
 
141
145
  /**
142
146
  * Tabs — which SECTION of this page am I on (Account: My Profile · Change
package/dist/shell/index.js CHANGED
@@ -136,6 +136,35 @@ function Sidebar({ items, pinned = [], activeHref, basePath }) {
136
136
  )
137
137
  ] });
138
138
  }
139
+ function buttonClass(variant = "secondary", size = "md", extra) {
140
+ return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
141
+ }
142
+ function buttonStyle(variant = "secondary", size = "md") {
143
+ return { className: buttonClass(variant, size) };
144
+ }
145
+ function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
146
+ return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
147
+ }
148
+ function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
149
+ const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
150
+ return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
151
+ children,
152
+ external && /* @__PURE__ */ jsx(OutboundArrow, {}),
153
+ forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
154
+ ] });
155
+ }
156
+ function ForwardArrow() {
157
+ 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: [
158
+ /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
159
+ /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
160
+ ] });
161
+ }
162
+ function OutboundArrow() {
163
+ 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: [
164
+ /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
165
+ /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
166
+ ] });
167
+ }
139
168
  var THEME_KEY = "rz-admin-theme";
140
169
  function useTheme(defaultTheme = "light") {
141
170
  const [theme, setTheme] = useState(defaultTheme);
@@ -187,12 +216,16 @@ var HelpIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
187
216
  /* @__PURE__ */ jsx("path", { d: "M2 4h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z" }),
188
217
  /* @__PURE__ */ jsx("path", { d: "M22 4h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z" })
189
218
  ] });
219
+ var GlobeIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
220
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
221
+ /* @__PURE__ */ jsx("path", { d: "M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18" })
222
+ ] });
190
223
  var OutIcon = () => /* @__PURE__ */ jsxs("svg", { ...ico, children: [
191
224
  /* @__PURE__ */ jsx("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
192
225
  /* @__PURE__ */ jsx("path", { d: "M16 17l5-5-5-5" }),
193
226
  /* @__PURE__ */ jsx("path", { d: "M21 12H9" })
194
227
  ] });
195
- function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
228
+ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl }) {
196
229
  const [open, setOpen] = useState(false);
197
230
  const wrap = useRef(null);
198
231
  useEffect(() => {
@@ -227,14 +260,19 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
227
260
  /* @__PURE__ */ jsx("span", { children: "Theme" }),
228
261
  /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(ThemeToggle, { theme, onChange: onTheme }) })
229
262
  ] }),
230
- (accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
263
+ (siteUrl || accountHref || helpHref) && /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
264
+ siteUrl && /* @__PURE__ */ jsxs("a", { href: siteUrl, target: "_blank", rel: "noreferrer", role: "menuitem", className: "rz-menu__item", children: [
265
+ /* @__PURE__ */ jsx(GlobeIcon, {}),
266
+ "View website",
267
+ /* @__PURE__ */ jsx("span", { className: "rz-menu__end", children: /* @__PURE__ */ jsx(OutboundArrow, {}) })
268
+ ] }),
231
269
  accountHref && /* @__PURE__ */ jsxs("a", { href: accountHref, role: "menuitem", className: "rz-menu__item", children: [
232
270
  /* @__PURE__ */ jsx(UserIcon, {}),
233
271
  "Account"
234
272
  ] }),
235
273
  helpHref && /* @__PURE__ */ jsxs("a", { href: helpHref, role: "menuitem", className: "rz-menu__item", children: [
236
274
  /* @__PURE__ */ jsx(HelpIcon, {}),
237
- "Help"
275
+ "Help center"
238
276
  ] }),
239
277
  /* @__PURE__ */ jsx("div", { className: "rz-menu__sep" }),
240
278
  /* @__PURE__ */ jsx("form", { method: "post", action: signOutPath, className: "rz-menu__signout", children: /* @__PURE__ */ jsxs("button", { type: "submit", role: "menuitem", className: "rz-menu__item", children: [
@@ -244,19 +282,28 @@ function AccountMenu({ user, role, theme, onTheme, signOutPath, accountHref, hel
244
282
  ] })
245
283
  ] });
246
284
  }
247
- function TopBar({ siteName, productName, logoUrl, homeHref, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
285
+ function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }) {
248
286
  return /* @__PURE__ */ jsxs("header", { className: "rz-topbar", children: [
249
- /* @__PURE__ */ jsxs("a", { href: homeHref, className: "rz-topbar__brand", children: [
250
- logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
251
- /* @__PURE__ */ jsx("span", { children: siteName }),
252
- /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName })
253
- ] }),
287
+ /* @__PURE__ */ jsxs(
288
+ "a",
289
+ {
290
+ href: siteUrl || homeHref,
291
+ className: "rz-topbar__brand",
292
+ ...siteUrl ? { target: "_blank", rel: "noreferrer", title: "Open the live website in a new tab" } : {},
293
+ children: [
294
+ logoUrl && /* @__PURE__ */ jsx("img", { src: logoUrl, alt: "", className: "rz-topbar__logo" }),
295
+ /* @__PURE__ */ jsx("span", { children: siteName }),
296
+ /* @__PURE__ */ jsx("span", { className: "rz-topbar__product", children: productName }),
297
+ siteUrl && /* @__PURE__ */ jsx(OutboundArrow, {})
298
+ ]
299
+ }
300
+ ),
254
301
  user && role && /* @__PURE__ */ jsxs("div", { className: "rz-topbar__right", children: [
255
302
  /* @__PURE__ */ jsxs("span", { className: "rz-topbar__greeting", "data-testid": "rz-greeting", children: [
256
303
  "Welcome back, ",
257
304
  firstNameOf(user)
258
305
  ] }),
259
- /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref })
306
+ /* @__PURE__ */ jsx(AccountMenu, { user, role, theme, onTheme, signOutPath, accountHref, helpHref, siteUrl })
260
307
  ] })
261
308
  ] });
262
309
  }
@@ -316,6 +363,8 @@ var SHELL_CSS = `
316
363
  .rz-topbar__brand { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .9375rem; text-decoration: none; }
317
364
  .rz-topbar__logo { height: 22px; width: auto; display: block; }
318
365
  .rz-topbar__product { font-weight: 400; color: var(--text-secondary); }
366
+ .rz-topbar__brand .rz-arrow { color: var(--text-muted); opacity: 0; transition: opacity .15s, transform .15s; }
367
+ .rz-topbar__brand:hover .rz-arrow { opacity: 1; }
319
368
  .rz-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
320
369
  .rz-topbar__greeting { color: var(--text-secondary); font-size: .8rem; }
321
370
  .rz-body { display: flex; flex: 1; min-height: 0; }
@@ -490,7 +539,7 @@ var SHELL_CSS = `
490
539
  .rz-admin .realiiz-prose h2 { font-size: 1.35rem; } .rz-admin .realiiz-prose h3 { font-size: 1.1rem; }
491
540
  .rz-admin .realiiz-prose p, .rz-admin .realiiz-prose ul, .rz-admin .realiiz-prose ol, .rz-admin .realiiz-prose blockquote { margin: 0 0 1em; }
492
541
  .rz-admin .realiiz-prose a { color: var(--signal); }
493
- /* The site's prose class picks a slate body colour for a light page; on the dark surface that reads as disabled. */
542
+ /* The site's prose class picks a slate body color for a light page; on the dark surface that reads as disabled. */
494
543
  .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); }
495
544
  .rz-admin[data-theme="dark"] .realiiz-prose :is(code, kbd) { color: var(--text-primary); background: var(--surface-3); }
496
545
  .rz-admin[data-theme="dark"] .realiiz-prose a { color: var(--signal-dim); }
@@ -527,6 +576,7 @@ function AdminShell({
527
576
  signOutPath,
528
577
  accountHref,
529
578
  helpHref,
579
+ siteUrl,
530
580
  branding,
531
581
  defaultTheme = "light",
532
582
  children
@@ -543,6 +593,7 @@ function AdminShell({
543
593
  siteName: shownName,
544
594
  productName,
545
595
  logoUrl: shownLogo,
596
+ siteUrl,
546
597
  homeHref: basePath,
547
598
  user,
548
599
  role,
@@ -559,35 +610,6 @@ function AdminShell({
559
610
  ] })
560
611
  ] });
561
612
  }
562
- function buttonClass(variant = "secondary", size = "md", extra) {
563
- return ["rz-btn", `rz-btn--${variant}`, `rz-btn--${size}`, extra].filter(Boolean).join(" ");
564
- }
565
- function buttonStyle(variant = "secondary", size = "md") {
566
- return { className: buttonClass(variant, size) };
567
- }
568
- function Button({ variant = "secondary", size = "md", className, type = "button", ...rest }) {
569
- return /* @__PURE__ */ jsx("button", { type, className: buttonClass(variant, size, className), ...rest });
570
- }
571
- function LinkButton({ variant = "secondary", size = "md", className, external, forward, children, ...rest }) {
572
- const extra = external ? { target: "_blank", rel: "noreferrer", ...rest } : rest;
573
- return /* @__PURE__ */ jsxs("a", { className: buttonClass(variant, size, className), ...extra, children: [
574
- children,
575
- external && /* @__PURE__ */ jsx(OutboundArrow, {}),
576
- forward && !external && /* @__PURE__ */ jsx(ForwardArrow, {})
577
- ] });
578
- }
579
- function ForwardArrow() {
580
- 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: [
581
- /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
582
- /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
583
- ] });
584
- }
585
- function OutboundArrow() {
586
- 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: [
587
- /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
588
- /* @__PURE__ */ jsx("path", { d: "M7 7h10v10" })
589
- ] });
590
- }
591
613
  function Card({ title, meta, note, children, actions, className }) {
592
614
  return /* @__PURE__ */ jsxs("div", { className: ["rz-card", className].filter(Boolean).join(" "), children: [
593
615
  title && /* @__PURE__ */ jsx("div", { className: "rz-card__title", children: title }),