@realiizlabs/admin 0.15.4 → 0.15.6

package/dist/studio/index.cjs

@@ -1116,7 +1116,7 @@ function makeHandlers(ctx) {
 }
 
 // src/version.ts
-var ADMIN_VERSION = "0.15.4" ;
+var ADMIN_VERSION = "0.15.6" ;
 
 // src/studio/update.ts
 var PACKAGE_NAME = "@realiizlabs/admin";

package/dist/studio/index.js

@@ -1104,7 +1104,7 @@ function makeHandlers(ctx) {
 }
 
 // src/version.ts
-var ADMIN_VERSION = "0.15.4" ;
+var ADMIN_VERSION = "0.15.6" ;
 
 // src/studio/update.ts
 var PACKAGE_NAME = "@realiizlabs/admin";

package/dist/studio-ui/index.cjs

@@ -495,7 +495,7 @@ var SHELL_CSS = `
 /* ---- account menu --------------------------------------------------- */
 .rz-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
 .rz-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--border); margin: 0 0 1.5rem; flex-wrap: wrap; }
-.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; }
+.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; white-space: nowrap; }
 .rz-tabs__tab:hover { color: var(--text-primary); }
 .rz-tabs__tab[aria-selected="true"] { color: var(--text-primary); border-bottom-color: var(--signal); font-weight: 600; }
 .rz-tabs__tab:focus-visible { outline: 2px solid var(--signal); outline-offset: -2px; border-radius: 4px; }
@@ -516,22 +516,33 @@ var SHELL_CSS = `
 .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; }
 .rz-seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--text-primary); }
 
-/* ---- mobile: sidebar becomes a strip under the top bar --------------- */
+/* ---- mobile: the sidebar becomes a fixed bottom bar, icons only ------- */
 @media (max-width: 720px) {
+  .rz-admin { --rz-bottombar: calc(56px + env(safe-area-inset-bottom, 0px)); }
   .rz-body { flex-direction: column; }
-  .rz-sidebar, .rz-sidebar--collapsed { width: 100%; border-right: 0; border-bottom: 1px solid var(--border); flex-direction: row; }
-  .rz-sidebar__nav { display: flex; padding: .35rem .25rem; overflow-x: auto; }
-  .rz-sidebar__item { flex-direction: column; gap: .2rem; font-size: .6875rem; padding: .4rem .6rem; border-radius: 6px; }
-  .rz-sidebar--collapsed .rz-sidebar__label { display: block; }
-  .rz-sidebar__collapse { display: none; }
-  .rz-sidebar__pinned { display: flex; border-top: 0; padding: .35rem .25rem; }
+  .rz-sidebar, .rz-sidebar--collapsed {
+    position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30;
+    width: 100%; height: var(--rz-bottombar); padding-bottom: env(safe-area-inset-bottom, 0px);
+    flex-direction: row; align-items: stretch;
+    border-right: 0; border-top: 1px solid var(--border); box-shadow: 0 -6px 16px rgba(14,23,38,.06);
+  }
+  /* Both nav groups dissolve into the bar so every icon gets an equal share of the width. */
+  .rz-sidebar__nav, .rz-sidebar__pinned { display: contents; }
+  .rz-sidebar__item { flex: 1 1 0; justify-content: center; padding: 0; min-width: 0; border-radius: 0; }
+  .rz-sidebar__item svg { width: 22px; height: 22px; }
+  .rz-sidebar__item--active { background: transparent; box-shadow: inset 0 2px 0 var(--signal); }
+  /* Labels stay in the accessibility tree but not on screen. */
+  .rz-sidebar__label, .rz-sidebar--collapsed .rz-sidebar__label { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .rz-sidebar__collapse, .rz-sidebar__version, .rz-sidebar__item--disabled { display: none; }
   .rz-topbar__greeting { display: none; }
-  .rz-content { padding: 18px 14px 60px; }
-  /* The sidebar is a top strip now, so it must not be sticky-height; the topbar stays pinned. */
-  .rz-sidebar, .rz-sidebar--collapsed { position: static; height: auto; }
-  .rz-sidebar__item--disabled { display: none; }
-  /* Save bar: bleed matches the narrower content padding; stack status above the buttons. */
-  .rz-content .realiiz-form__bar { margin: 18px -14px -60px; padding: 10px 14px; flex-wrap: wrap; }
+  .rz-content { padding: 18px 14px calc(var(--rz-bottombar) + 24px); }
+  /* Section tabs: one row that scrolls sideways (bleeding to the screen edges), scrollbar hidden,
+     a fade on the right so it's clear there's more; the active tab is scrolled into view. */
+  .rz-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; margin-left: -14px; margin-right: -14px; padding: 0 14px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
+  .rz-tabs::-webkit-scrollbar { display: none; }
+  .rz-tabs__tab { flex: 0 0 auto; scroll-snap-align: center; }
+  /* Save bar: sits just above the bottom bar; bleed matches the narrower content padding; stack status above the buttons. */
+  .rz-content .realiiz-form__bar { bottom: var(--rz-bottombar); margin: 18px -14px calc(-1 * (var(--rz-bottombar) + 24px)); padding: 10px 14px; flex-wrap: wrap; }
   .rz-content .realiiz-form__status { flex-basis: 100%; margin-right: 0; font-size: .8rem; }
   /* Editor toolbar wraps; the Insert group drops its label and left rule to save width. */
   .rz-admin .realiiz-md__head { padding: 5px; }
@@ -678,6 +689,12 @@ function Steps({ steps }) {
 }
 function Tabs({ options, value, onChange, label = "Sections" }) {
   const list = react.useRef(null);
+  react.useEffect(() => {
+    const el = list.current;
+    if (!el || el.scrollWidth <= el.clientWidth) return;
+    const i = options.findIndex((o) => o.value === value);
+    el.children[i]?.scrollIntoView?.({ inline: "center", block: "nearest" });
+  }, [options, value]);
   const onKey = (e) => {
     const i = options.findIndex((o) => o.value === value);
     if (i < 0) return;
@@ -716,7 +733,7 @@ function Tabs({ options, value, onChange, label = "Sections" }) {
 }
 
 // src/version.ts
-var ADMIN_VERSION = "0.15.4" ;
+var ADMIN_VERSION = "0.15.6" ;
 
 // src/studio-ui/css.ts
 var STUDIO_CSS = `
@@ -759,9 +776,22 @@ var STUDIO_CSS = `
 .rz-admin .rz-title-link .rz-arrow { opacity: 0; }
 .rz-admin .rz-title-link:hover { color: var(--signal); }
 .rz-admin .rz-title-link:hover .rz-arrow { opacity: 1; }
+/* Phones: the four columns can't share the width, so each row becomes a small card \u2014
+   the title on its own line (wrapping to two), the address under it, then date \xB7 status \xB7
+   actions on one row. Same markup; only the display changes. */
 @media (max-width: 720px) {
-  .rz-admin .rz-col-status { width: 9rem; }
-  .rz-admin .rz-col-actions { width: 6rem; }
+  .rz-admin .rz-table--posts, .rz-admin .rz-table--posts tbody { display: block; }
+  .rz-admin .rz-table--posts colgroup, .rz-admin .rz-table--posts thead { display: none; }
+  .rz-admin .rz-table--posts tr { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .8rem .9rem; border-bottom: 1px solid var(--separator); }
+  .rz-admin .rz-table--posts tr:last-child { border-bottom: 0; }
+  .rz-admin .rz-table--posts td, .rz-admin .rz-table--posts td.rz-fit { display: block; width: auto; padding: 0; border: 0; white-space: nowrap; overflow: visible; }
+  .rz-admin .rz-table--posts .rz-title-cell { flex: 1 1 100%; min-width: 0; margin-bottom: .15rem; white-space: normal; }
+  .rz-admin .rz-table--posts .rz-title-cell .rz-title-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-weight: 500; color: var(--text-primary); }
+  .rz-admin .rz-table--posts .rz-title-link { display: inline; }
+  .rz-admin .rz-table--posts .rz-slug { font-weight: 400; color: var(--text-muted); overflow-wrap: anywhere; -webkit-line-clamp: 1; }
+  .rz-admin [data-slugs="off"] .rz-table--posts .rz-slug { display: none; }
+  .rz-admin .rz-table--posts td.rz-fit { font-size: .85rem; }
+  .rz-admin .rz-table--posts td.rz-fit:last-child { margin-left: auto; }
 }
 
 /* Dashboard card for a section that isn't built yet: the real card, faded, buttons disabled. */
@@ -773,6 +803,9 @@ var STUDIO_CSS = `
 .rz-admin .acct-card { display: flex; flex-direction: column; gap: .9rem; }
 .rz-admin .acct-title { font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-primary); }
 .rz-admin .acct-blurb { font-size: .875rem; color: var(--text-secondary); margin: -.4rem 0 0; line-height: 1.5; }
+.rz-admin .acct-blurb--link { margin-top: .6rem; }
+.rz-admin .acct-blurb a { color: var(--signal); text-decoration: underline; text-underline-offset: 3px; }
+.rz-admin .acct-blurb a:hover { color: var(--text-primary); }
 .rz-admin .acct-field { display: flex; flex-direction: column; gap: .35rem; }
 .rz-admin .acct-label { font-size: .85rem; font-weight: 500; color: var(--text-primary); }
 .rz-admin .acct-hint { font-size: .78rem; color: var(--text-muted); }
@@ -964,11 +997,64 @@ function useDeployed(active, mergedSha) {
   }, [active, mergedSha]);
   return state;
 }
+var KEY = "rz-update-installing";
+function readInstalling() {
+  try {
+    const raw = sessionStorage.getItem(KEY);
+    if (!raw) return null;
+    const v = JSON.parse(raw);
+    return typeof v.version === "string" ? v : null;
+  } catch {
+    return null;
+  }
+}
+function writeInstalling(i) {
+  try {
+    if (i) sessionStorage.setItem(KEY, JSON.stringify(i));
+    else sessionStorage.removeItem(KEY);
+  } catch {
+  }
+}
+function useInstalling() {
+  const [installing, set] = react.useState(null);
+  react.useEffect(() => {
+    const i = readInstalling();
+    if (i && i.version === ADMIN_VERSION) {
+      writeInstalling(null);
+      return;
+    }
+    set(i);
+  }, []);
+  const update = (i) => {
+    writeInstalling(i);
+    set(i);
+  };
+  return [installing, update];
+}
+function InstallTracker({ installing, compact = false }) {
+  const deploy = useDeployed(true, installing.sha);
+  const live = deploy === "live";
+  const steps = [
+    { label: "Updated", state: "done", note: `Studio ${installing.version}` },
+    { label: "Live", state: live ? "done" : "active", note: live ? "On the site now" : deploy === "slow" ? "Taking longer than usual" : "Rebuilding, about two minutes" }
+  ];
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Steps, { steps }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-update__done", children: live ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "Studio ",
+      installing.version,
+      " is live. ",
+      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__link", onClick: () => window.location.reload(), children: "Reload Studio" }),
+      " to start using it \u2014 the version at the foot of the sidebar will change."
+    ] }) : "Update accepted. Nothing to do meanwhile \u2014 keep working. The website is rebuilding with the new Studio; this turns green when it's done, in about two minutes." })
+  ] });
+}
 var HIDE_KEY = "rz-update-later";
 function canSeeUpdates(role) {
   return role === "owner" || role === "staff";
 }
 function UpdateStrip({ update, role }) {
+  const [installing, setInstalling] = useInstalling();
   const [hidden, setHidden] = react.useState(true);
   react.useEffect(() => {
     try {
@@ -977,7 +1063,9 @@ function UpdateStrip({ update, role }) {
       setHidden(false);
     }
   }, [update?.version]);
-  if (!update || update.state !== "ready" || !canSeeUpdates(role) || hidden) return null;
+  if (!canSeeUpdates(role)) return null;
+  if (installing) return /* @__PURE__ */ jsxRuntime.jsx(InstallTracker, { installing, compact: true });
+  if (!update || update.state !== "ready" || hidden) return null;
   const later = () => {
     try {
       sessionStorage.setItem(HIDE_KEY, update.version);
@@ -985,41 +1073,24 @@ function UpdateStrip({ update, role }) {
     }
     setHidden(true);
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update, onLater: later, compact: true });
+  return /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update, onLater: later, onMerged: setInstalling, compact: true });
 }
-function UpdateBody({ update, onLater, compact = false }) {
+function UpdateBody({ update, onLater, onMerged, compact = false }) {
   const { actions } = useStudio();
   const [showNotes, setShowNotes] = react.useState(!compact);
   const [busy, setBusy] = react.useState(false);
   const [outcome, setOutcome] = react.useState(null);
-  const merged = outcome?.state === "merged";
-  const deploy = useDeployed(merged, merged ? outcome.sha : null);
   const run = async () => {
     setBusy(true);
     try {
-      setOutcome(await actions.updateStudio(update.number));
+      const result = await actions.updateStudio(update.number);
+      setOutcome(result);
+      if (result.state === "merged") onMerged({ version: update.version, sha: result.sha });
     } finally {
       setBusy(false);
     }
   };
-  if (merged) {
-    const live = deploy === "live";
-    const steps = [
-      { label: "Updated", state: "done", note: `Studio ${update.version}` },
-      { label: "Live", state: live ? "done" : "active", note: live ? "On the site now" : deploy === "slow" ? "Taking longer than usual" : "Rebuilding, about two minutes" }
-    ];
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Steps, { steps }),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rz-update__done", children: live ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        "Studio ",
-        update.version,
-        " is live. ",
-        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "rz-update__link", onClick: () => window.location.reload(), children: "Reload Studio" }),
-        " to start using it \u2014 the version at the foot of the sidebar will change."
-      ] }) : "Nothing to do meanwhile \u2014 keep working. The website is rebuilding with the new Studio; the version at the foot of the sidebar changes when it's done, in about two minutes." })
-    ] });
-  }
-  const problem = outcome && outcome.state !== "pending" ? outcome.state === "stale" ? "The site changed since the checks ran. Try again in a minute." : outcome.state === "red" ? `The checks failed${outcome.failingCheck ? ` (${outcome.failingCheck})` : ""}. Your web team has been able to see this.` : outcome.state === "error" ? outcome.message : null : null;
+  const problem = outcome && outcome.state !== "pending" && outcome.state !== "merged" ? outcome.state === "stale" ? "The site changed since the checks ran. Try again in a minute." : outcome.state === "red" ? `The checks failed${outcome.failingCheck ? ` (${outcome.failingCheck})` : ""}. Your web team has been able to see this.` : outcome.state === "error" ? outcome.message : null : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rz-update${compact ? " rz-update--strip" : ""}`, role: "status", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rz-update__row", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "rz-update__title", children: [
@@ -3961,25 +4032,28 @@ function BusinessTab({ initial }) {
 }
 function StudioTab({ update, version, role }) {
   const { supportName } = useStudio();
+  const [installing, setInstalling] = useInstalling();
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "acct-stack", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "acct-card", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("h2", { className: "acct-title", children: [
         "Studio ",
         version
       ] }),
-      !update && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "acct-blurb", children: "You\u2019re up to date. When a new version comes out, it appears here and as a strip at the top of every Studio page." }),
-      update?.state === "checking" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
-        "Studio ",
-        update.version,
-        " is on its way \u2014 the checks are still running. Come back in a couple of minutes."
-      ] }),
-      update?.state === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
-        "Studio ",
-        update.version,
-        " is available, but its checks failed, so it can\u2019t be installed yet.",
-        role === "staff" && update.failingCheck ? ` Failing check: ${update.failingCheck}.` : ` ${supportName} has been able to see this and will sort it out.`
-      ] }),
-      update?.state === "ready" && /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update })
+      installing ? /* @__PURE__ */ jsxRuntime.jsx(InstallTracker, { installing }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        !update && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "acct-blurb", children: "You\u2019re up to date. When a new version comes out, it appears here and as a strip at the top of every Studio page." }),
+        update?.state === "checking" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
+          "Studio ",
+          update.version,
+          " is on its way \u2014 the checks are still running. Come back in a couple of minutes."
+        ] }),
+        update?.state === "failed" && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", children: [
+          "Studio ",
+          update.version,
+          " is available, but its checks failed, so it can\u2019t be installed yet.",
+          role === "staff" && update.failingCheck ? ` Failing check: ${update.failingCheck}.` : ` ${supportName} has been able to see this and will sort it out.`
+        ] }),
+        update?.state === "ready" && /* @__PURE__ */ jsxRuntime.jsx(UpdateBody, { update, onMerged: setInstalling })
+      ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(Card, { className: "acct-card", children: [
       /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "acct-title", children: "How updates work" }),
@@ -3990,7 +4064,7 @@ function StudioTab({ update, version, role }) {
         /* @__PURE__ */ jsxRuntime.jsx("b", { children: "Update" }),
         ". If the update would break anything, the button never unlocks. Your site looks for new versions once a week, on Monday morning."
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb", style: { marginTop: ".5rem" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "acct-blurb acct-blurb--link", children: [
         /* @__PURE__ */ jsxRuntime.jsx("a", { href: "/admin/help#s-updates", children: "Everything about updates, in the Help center" }),
         " \u2014 when they arrive, what they can and can\u2019t change, and what to do if one fails."
       ] })
@@ -4099,7 +4173,7 @@ Open the avatar menu (top right) and choose **Sign out**.
 
 One item per kind of content this site publishes \u2014 on {siteName} that's {types}. Each opens a list of everything of that kind with its status. **Dashboard** at the top shows one card per kind with a count and how many changes are waiting. **Settings** at the bottom opens your account.
 
-On a narrow screen the sidebar collapses to icons; press the arrow at the bottom to expand it.
+Press **Collapse** at the bottom to shrink the sidebar to icons. On a phone, the same items sit in a bar of icons along the bottom of the screen \u2014 Dashboard, each kind of content, Settings.
 
 ## A list page
 
@@ -5113,7 +5187,7 @@ Not from Studio. It's rarely needed, because an update can't touch your content,
 
 ## I pressed Update and nothing seems different
 
-Two things to check. First, the tracker: **Updated** means the update was accepted; **Live** means the website has finished rebuilding, which takes about two minutes. Second, reload Studio \u2014 the number at the bottom of the sidebar should now match the version the strip offered. Until the rebuild finishes you're still running the old one, which is normal.
+That's expected for the first couple of minutes. The strip turns into a tracker: **Updated** means the update was accepted; **Live** means the website has finished rebuilding, which takes about two minutes. The tracker stays on screen (even if you move around Studio or reload) until it's live, then offers a **Reload Studio** button. Until you reload, you're still using the old version and the number at the bottom of the sidebar hasn't changed \u2014 that's normal, not a failure.
 
 ## I pressed Update twice
 
@@ -5622,6 +5696,7 @@ exports.ContentEditor = ContentEditor;
 exports.GLOSSARY = GLOSSARY;
 exports.HELP_ARTICLES = HELP_ARTICLES;
 exports.HELP_SECTIONS = HELP_SECTIONS;
+exports.InstallTracker = InstallTracker;
 exports.Jargon = Jargon;
 exports.PublishPanel = PublishPanel;
 exports.RemoveItem = RemoveItem;
@@ -5651,6 +5726,7 @@ exports.joinTypes = joinTypes;
 exports.publicDirOf = publicDirOf;
 exports.searchHelp = searchHelp;
 exports.useEntry = useEntry;
+exports.useInstalling = useInstalling;
 exports.useStudio = useStudio;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map