@gemboss/ui 0.8.1 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.8.1",
+  "version": "0.10.0",
   "description": "GemBoss design system for every surface in the fleet: the admin shell (topbar + rail + drawer) as React components, and the admin stylesheet exported as one CSS file.",
   "license": "UNLICENSED",
   "type": "module",
@@ -20,6 +20,7 @@
     "./shell.css": "./src/shell.css",
     "./chat.css": "./src/chat.css",
     "./chat-composer.css": "./src/chat-composer.css",
+    "./editor.css": "./src/editor.css",
     "./auth.css": "./src/auth.css",
     "./kit-plain.css": "./src/kit-plain.css",
     "./kit-plain.js": "./src/kit-plain.js",
@@ -28,7 +29,8 @@
     "./assistant.css": "./src/assistant.css",
     "./portal.css": "./src/portal.css",
     "./theme-dark.css": "./src/theme-dark.css",
-    "./icon.svg": "./src/icon.svg"
+    "./icon.svg": "./src/icon.svg",
+    "./next": "./src/next/index.ts"
   },
   "files": [
     "src/**/*.ts",
@@ -39,7 +41,8 @@
     "!src/**/*.test.*",
     "gemboss-ui.css",
     "catalog/index.html",
-    "README.md"
+    "README.md",
+    "CHANGELOG.md"
   ],
   "scripts": {
     "build:css": "node scripts/build-css.mjs",
@@ -49,8 +52,14 @@
     "fleet": "node scripts/fleet.mjs"
   },
   "peerDependencies": {
+    "next": ">=15.3",
     "react": ">=18"
   },
+  "peerDependenciesMeta": {
+    "next": {
+      "optional": true
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

package/src/app-shell.css

@@ -67,6 +67,82 @@
 }
 .gnav-item.active .gnav-count { background: var(--gemboss-primary); color: var(--gemboss-on-primary); }
 
+/* ── Navigation pending (0.10.0): a click answers on the first frame ─────────────────────────────────────────────
+ * Chris 05/10/2026: content-radar's rail (the icon turns into a spinner the moment you click, sub items too) is the
+ * standard for every surface. Measured 04/10 on content-radar with a server ~280 ms away: nothing on screen changed
+ * for 321-503 ms after a click; with this, 6-8 ms.
+ *
+ * ONE state, three ways to set it, so a React rail, a Next rail and a server-rendered rail look the same:
+ *   - `aria-busy="true"` on the item: RailItem / RailSubItem `pending` (React), kit-plain.js on a followed link;
+ *   - a `.gnav-pending` child: NavLink from `@gemboss/ui/next` (Next's useLinkStatus is only readable INSIDE the
+ *     link, so the link cannot set its own attribute; it renders this status text and `:has()` reads it).
+ * `:is()` is forgiving: a browser without `:has()` still honours the aria-busy half of each rule.
+ * The icon keeps its box (visibility, not display), so the label never moves. Here and not in shell.css: the
+ * admin's shell sheet has <1 KB of first-load headroom, and the admin answers a click with its own holding screen.
+ */
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)),
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending)) { cursor: progress; }
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico > * { visibility: hidden; }
+.gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
+.gb-pending-mark {
+  content: ""; display: inline-block; vertical-align: middle; grid-area: 1 / 1; flex: none; box-sizing: border-box;
+  width: 20px; height: 20px; border-radius: 50%;
+  /* the item's own ink, so the spinner follows the active and hover colours */
+  border: 2px solid color-mix(in srgb, currentColor 18%, transparent); border-top-color: currentColor;
+  animation: gnav-spin 0.7s linear infinite;
+}
+/* A sub item has no icon box: a 12px spinner in its 44px indent, just before the label, out of the flow. At the row's end
+ * it would be a third item in a space-between row and push a trailing count to the middle (review #3777). */
+.gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after {
+  position: absolute; left: 22px; top: 50%; margin-top: -6px; width: 12px; height: 12px; border-width: 1.5px;
+}
+@keyframes gnav-spin { to { transform: rotate(360deg); } }
+/* Slower, never off: it is the only sign that the click was heard. */
+@media (prefers-reduced-motion: reduce) {
+  .gnav-item:is([aria-busy="true"], :has(> .gnav-pending)) > .gnav-ico::after,
+  .gnav-subitem:is([aria-busy="true"], :has(> .gnav-pending))::after,
+  .gb-pending-mark { animation-duration: 2s; }
+}
+/* A link in the PAGE (a list row, a card, a tab) opts in with `data-gb-pending`: PendingLink (`@gemboss/ui/next`) or
+ * kit-plain.js put `span.gb-pending-mark` (role=status) inside it while the page loads. "inline" (default): 12px after
+ * the text. "corner": 16px in the top right corner, out of the flow, for a link that wraps a whole card (a grid card
+ * gains no column). Marked by attribute, not class: a surface that colours bare links with `a:not([class])` keeps it. */
+a[data-gb-pending]:has(> .gb-pending-mark), a[data-gb-pending][aria-busy="true"] { cursor: progress; }
+a[data-gb-pending] > .gb-pending-mark { display: inline-block; width: 12px; height: 12px; border-width: 1.5px; margin-left: 6px; vertical-align: -1px; }
+a[data-gb-pending="corner"] { position: relative; }
+a[data-gb-pending="corner"] > .gb-pending-mark { position: absolute; top: 12px; right: 12px; width: 16px; height: 16px; margin: 0; }
+/* RouteHolding (./route-holding.tsx): a route group's loading boundary. The kit's skeleton lines in the content column,
+ * one shape for every route: a title bar, then four lines of falling length (the admin's holding screen). */
+.gb-route-holding { padding-top: 4px; }
+.gb-route-holding .ui-skeleton { gap: 16px; }
+.gb-route-holding__heading { margin: 0 0 20px; font-size: 20px; font-weight: 650; line-height: 1.3; color: var(--gemboss-text); }
+.gb-route-holding .ui-skeleton__line { height: 10px; }
+.gb-route-holding .ui-skeleton__line.gb-route-holding__title { height: 20px; width: 34%; margin-bottom: 8px; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(4) { width: 46%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(3) { width: 92%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(2) { width: 78%; }
+.gb-route-holding .ui-skeleton__line:nth-last-child(1) { width: 61%; }
+/* RouteCover: the same frame over the content area from the click until the navigation commits. Shown only while
+ * `html[data-gb-navigating]` (set by the @gemboss/ui/next links while pending). No grace delay: the target is the new
+ * screen within 100 ms of the click, and a 40 ms grace measured 120-132 ms on content-radar's rail (05/10/2026). The
+ * 80 ms fade is what a router cache hit (20-90 ms) sees of it: a faint, partial frame, not a full flash.
+ * z 5: above the outgoing page, below the rail, the topbar (300) and the assistant (290). */
+.gb-route-cover { display: none; }
+html[data-gb-navigating] .gb-route-cover {
+  display: block; position: fixed; inset: 56px 0 0 240px; z-index: 5; overflow: hidden; box-sizing: border-box;
+  padding: 24px; background: var(--gemboss-app-bg); pointer-events: none;
+  animation: gb-route-cover-in 0.08s ease-out both;
+}
+@keyframes gb-route-cover-in { from { opacity: 0; } to { opacity: 1; } }
+@media (max-width: 760px) { html[data-gb-navigating] .gb-route-cover { left: 0; padding: 16px; } }
+@media (prefers-reduced-motion: reduce) { html[data-gb-navigating] .gb-route-cover { animation-duration: 0s; } }
+/* The status text a NavLink renders inside a rail item: read, not seen. */
+.gnav-pending {
+  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
+}
+
 /* ── BrandLockup (./brand.tsx) ─────────────────────────────────────────────────────────────────
  * The admin's `.gemboss-brand-lockup` box (40px tall, 8px padding, hover wash) around the wordmark's
  * own proportions. Not that class itself: its ≤460px rule swaps in a background image at an