@realiizlabs/admin 0.15.1 → 0.15.2
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.
- package/dist/{Sidebar-Dz_qJOSx.d.cts → Sidebar-Bo6ANnEY.d.cts} +3 -2
- package/dist/{Sidebar-Dz_qJOSx.d.ts → Sidebar-Bo6ANnEY.d.ts} +3 -2
- package/dist/shell/index.cjs +10 -3
- package/dist/shell/index.cjs.map +1 -1
- package/dist/shell/index.d.cts +6 -4
- package/dist/shell/index.d.ts +6 -4
- package/dist/shell/index.js +10 -3
- package/dist/shell/index.js.map +1 -1
- package/dist/studio/index.cjs +1 -1
- package/dist/studio/index.js +1 -1
- package/dist/studio-ui/index.cjs +20 -16
- package/dist/studio-ui/index.cjs.map +1 -1
- package/dist/studio-ui/index.d.cts +2 -2
- package/dist/studio-ui/index.d.ts +2 -2
- package/dist/studio-ui/index.js +20 -16
- package/dist/studio-ui/index.js.map +1 -1
- package/package.json +2 -2
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-
|
|
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-
|
|
3
|
+
import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-Bo6ANnEY.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-Bo6ANnEY.cjs';
|
|
5
5
|
|
|
6
6
|
interface AdminShellProps {
|
|
7
7
|
siteName: string;
|
|
@@ -35,9 +35,11 @@ interface AdminShellProps {
|
|
|
35
35
|
logoUrl?: string | null;
|
|
36
36
|
} | null;
|
|
37
37
|
defaultTheme?: Theme;
|
|
38
|
+
/** The running Studio version, shown quietly at the foot of the sidebar. */
|
|
39
|
+
version?: string | null;
|
|
38
40
|
children: ReactNode;
|
|
39
41
|
}
|
|
40
|
-
declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
|
|
42
|
+
declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, version, children, }: AdminShellProps): react.JSX.Element;
|
|
41
43
|
|
|
42
44
|
declare function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
|
|
43
45
|
siteName: string;
|
|
@@ -140,7 +142,7 @@ declare function iconFor(id: string): IconName;
|
|
|
140
142
|
* The block at the end maps the forms-ui variables onto these tokens, so
|
|
141
143
|
* ContentForm and MagicLinkForm re-skin without touching their own code.
|
|
142
144
|
*/
|
|
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";
|
|
145
|
+
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-sidebar__version { display: block; padding: 0 1rem .75rem; font-family: var(--rz-font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted); opacity: .8; white-space: nowrap; }\n.rz-sidebar--collapsed .rz-sidebar__version { padding: 0 0 .75rem; text-align: center; }\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";
|
|
144
146
|
|
|
145
147
|
/**
|
|
146
148
|
* 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-
|
|
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-
|
|
3
|
+
import { S as ShellUser, N as NavItem, T as Theme } from '../Sidebar-Bo6ANnEY.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-Bo6ANnEY.js';
|
|
5
5
|
|
|
6
6
|
interface AdminShellProps {
|
|
7
7
|
siteName: string;
|
|
@@ -35,9 +35,11 @@ interface AdminShellProps {
|
|
|
35
35
|
logoUrl?: string | null;
|
|
36
36
|
} | null;
|
|
37
37
|
defaultTheme?: Theme;
|
|
38
|
+
/** The running Studio version, shown quietly at the foot of the sidebar. */
|
|
39
|
+
version?: string | null;
|
|
38
40
|
children: ReactNode;
|
|
39
41
|
}
|
|
40
|
-
declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, children, }: AdminShellProps): react.JSX.Element;
|
|
42
|
+
declare function AdminShell({ siteName, productName, logoUrl, user, role, nav, pinnedNav, activeHref, basePath, signOutPath, accountHref, helpHref, siteUrl, branding, defaultTheme, version, children, }: AdminShellProps): react.JSX.Element;
|
|
41
43
|
|
|
42
44
|
declare function TopBar({ siteName, productName, logoUrl, homeHref, siteUrl, user, role, theme, onTheme, signOutPath, accountHref, helpHref }: {
|
|
43
45
|
siteName: string;
|
|
@@ -140,7 +142,7 @@ declare function iconFor(id: string): IconName;
|
|
|
140
142
|
* The block at the end maps the forms-ui variables onto these tokens, so
|
|
141
143
|
* ContentForm and MagicLinkForm re-skin without touching their own code.
|
|
142
144
|
*/
|
|
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";
|
|
145
|
+
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-sidebar__version { display: block; padding: 0 1rem .75rem; font-family: var(--rz-font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted); opacity: .8; white-space: nowrap; }\n.rz-sidebar--collapsed .rz-sidebar__version { padding: 0 0 .75rem; text-align: center; }\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";
|
|
144
146
|
|
|
145
147
|
/**
|
|
146
148
|
* Tabs — which SECTION of this page am I on (Account: My Profile · Change
|
package/dist/shell/index.js
CHANGED
|
@@ -78,7 +78,7 @@ function isActive(item, activeHref, basePath) {
|
|
|
78
78
|
if (item.href === basePath) return activeHref === basePath || activeHref === `${basePath}/`;
|
|
79
79
|
return activeHref === item.href || activeHref.startsWith(`${item.href}/`);
|
|
80
80
|
}
|
|
81
|
-
function Sidebar({ items, pinned = [], activeHref, basePath }) {
|
|
81
|
+
function Sidebar({ items, pinned = [], activeHref, basePath, version }) {
|
|
82
82
|
const [collapsed, setCollapsed] = useState(false);
|
|
83
83
|
useEffect(() => {
|
|
84
84
|
try {
|
|
@@ -133,7 +133,11 @@ function Sidebar({ items, pinned = [], activeHref, basePath }) {
|
|
|
133
133
|
/* @__PURE__ */ jsx("span", { className: "rz-sidebar__label", children: "Collapse" })
|
|
134
134
|
]
|
|
135
135
|
}
|
|
136
|
-
)
|
|
136
|
+
),
|
|
137
|
+
version && /* @__PURE__ */ jsxs("span", { className: "rz-sidebar__version", title: `Studio ${version}`, children: [
|
|
138
|
+
/* @__PURE__ */ jsx("span", { className: "rz-sidebar__label", children: "Studio " }),
|
|
139
|
+
version
|
|
140
|
+
] })
|
|
137
141
|
] });
|
|
138
142
|
}
|
|
139
143
|
function buttonClass(variant = "secondary", size = "md", extra) {
|
|
@@ -384,6 +388,8 @@ var SHELL_CSS = `
|
|
|
384
388
|
.rz-sidebar__collapse:hover { color: var(--text-primary); }
|
|
385
389
|
.rz-sidebar__collapse svg { flex-shrink: 0; }
|
|
386
390
|
.rz-sidebar--collapsed .rz-sidebar__collapse { justify-content: center; padding: .6rem 0; }
|
|
391
|
+
.rz-sidebar__version { display: block; padding: 0 1rem .75rem; font-family: var(--rz-font-mono); font-size: .6875rem; letter-spacing: .04em; color: var(--text-muted); opacity: .8; white-space: nowrap; }
|
|
392
|
+
.rz-sidebar--collapsed .rz-sidebar__version { padding: 0 0 .75rem; text-align: center; }
|
|
387
393
|
.rz-main { flex: 1; min-width: 0; }
|
|
388
394
|
.rz-content { max-width: 1400px; margin: 0; padding: 28px 32px 80px; }
|
|
389
395
|
.rz-content .realiiz-form { max-width: none; }
|
|
@@ -579,6 +585,7 @@ function AdminShell({
|
|
|
579
585
|
siteUrl,
|
|
580
586
|
branding,
|
|
581
587
|
defaultTheme = "light",
|
|
588
|
+
version,
|
|
582
589
|
children
|
|
583
590
|
}) {
|
|
584
591
|
const [theme, setTheme] = useTheme(defaultTheme);
|
|
@@ -605,7 +612,7 @@ function AdminShell({
|
|
|
605
612
|
}
|
|
606
613
|
),
|
|
607
614
|
/* @__PURE__ */ jsxs("div", { className: "rz-body", children: [
|
|
608
|
-
showNav && /* @__PURE__ */ jsx(Sidebar, { items: nav, pinned: pinnedNav, activeHref, basePath }),
|
|
615
|
+
showNav && /* @__PURE__ */ jsx(Sidebar, { items: nav, pinned: pinnedNav, activeHref, basePath, version }),
|
|
609
616
|
/* @__PURE__ */ jsx("main", { className: "rz-main", children: /* @__PURE__ */ jsx("div", { className: "rz-content", children }) })
|
|
610
617
|
] })
|
|
611
618
|
] });
|