@gemboss/ui 0.8.0 → 0.10.0

package/gemboss-ui.css

@@ -1,8 +1,8 @@
 /*
  * GemBoss admin design system — GENERATED — do not edit; regenerate from gemboss:
  *   node apps/admin/scripts/export-ui-css.mjs --out <path>   (npm run export:ui-css)
- * gemboss commit: 680adcf8cd1434698a6e1facafcd52d0a642ce96
- * sources sha256: 2d75fe13397758ceeb8de58a7418337dafd3cb1aa573e5c4c9f3438ba8099347
+ * gemboss commit: 527a9099c443fa986e3844442da5497d4623e8a3
+ * sources sha256: cf447622a2b99d887e6fa00ecfbc2c11423bbafafb1273411820018baed1e77e
  * contents: 1 allow-listed rule from apps/admin/src/app/globals.css + packages/ui/src/gemboss-tokens.css
  *   (verbatim) + packages/ui/src/ui.css (verbatim) + packages/ui/src/gemboss-field.css (verbatim)
  *   + 181 rules from packages/ui/src/shell.css (the shared shell)
@@ -2081,6 +2081,82 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 }
 .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
@@ -2154,6 +2230,32 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 /* A phone has no ⌘ key, and the box needs every pixel the bar has left. */
 @media (max-width: 460px) { .gemboss-topbar-search-kbd { display: none; } }
 
+/* ── Page width (0.8.1) ──────────────────────────────────────────────────────────────────────────────
+ * Chris 04/10/2026: the rail on the left, and on the right a content column with ONE max width across every
+ * service, not edge to edge. The admin's tiers (gemboss-shell.css, `.gemboss-w-*` around a Polaris Page), same
+ * numbers; `page-width.test.tsx` fails if the two disagree:
+ *   .ui-page          → --ui-content-max (900px, ui.css): lists, tables, card grids, dashboards
+ *   .ui-page--feed    → 720px: read top to bottom (activity, logs, timelines)
+ *   .ui-page--form    → 662px: one column of fields (Polaris narrowWidth)
+ *   .ui-page--canvas  → 1440px: content measured to be wider than a reading column (admin: the funnel path)
+ *   .ui-page--full    → no cap: a board or an editor that is the screen. Say why where you use it.
+ * A cap only exists where it is SMALLER than the room it sits in. Right of the 240px rail with main's 24px padding,
+ * 900 bites from 1188px up (1280 → 992 of room); 1440 bites only from ~1730px. Below that the column is simply the
+ * room, so the tier never causes a horizontal scroll.
+ * Here, not in ui.css: ui.css is exported verbatim into the admin under a 90 KB budget (89.8 KB at 0.7.3), and the
+ * admin draws its tiers on Polaris' Page instead. Fixed px, not %: a % cap grows the line length with the monitor. */
+.ui-page {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: var(--ui-content-max, 900px);
+  margin-inline: auto;
+}
+.ui-page--feed { max-width: 720px; }
+.ui-page--form { max-width: 662px; }
+.ui-page--canvas { max-width: 1440px; }
+.ui-page--full { max-width: none; }
+
 /* ═══ @gemboss/ui src/auth.css ═══ */
 /* The GemBoss sign-in screen — @gemboss/ui (28/09/2026).
  *
@@ -3365,10 +3467,19 @@ body.gemboss-assistant-unread .gnav-item.gnav-assistant::after {
 .ui-menu__sep { height: 1px; margin: var(--ui-space-1) 0; border: 0; background: var(--ui-border); }
 /* Checkbox: the LABEL is the target; disabled turns both the label and the box to not-allowed. Focus ring in the
    kit's own token (no --p-* here: this file is appended after the export's Polaris resolver runs). */
-.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
+.ui-check { display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; max-width: 100%; overflow-wrap: break-word; cursor: pointer; font-size: var(--ui-fs-body); color: var(--ui-text); }
 .ui-check > input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ui-accent); cursor: inherit; }
 .ui-check > input:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
 .ui-check:has(> input:disabled) { opacity: .5; cursor: not-allowed; }
+/* 0.9.0: a long run with no spaces (a URL, "clinical/premium/…/utility") breaks inside the label instead of widening
+   the page: gemwatcher Operations overflowed 69px at 320 on one switch description (#375). Three parts: the label is
+   capped at its parent (max-width above), its TEXT child may shrink (min-width 0, the last child only so a badge in
+   front keeps its width), and break-word breaks the run once it cannot fit a line.
+   break-word, NOT anywhere: anywhere also drops the label's min-content, and a flex row then squeezes a short label
+   ("Lock" beside a long band name in GemFactory) into "Lo/ck". Two cases stay the surface's job: the text must be an
+   element (`input + span`; bare text is an anonymous flex item min-width cannot reach), and in a flex ROW the label
+   keeps its min-content, so that row must wrap. */
+.ui-check > :last-child:not(input) { min-width: 0; }
 .ui-label { display: block; margin: 0 0 var(--ui-space-1); font-size: var(--ui-fs-caption); font-weight: 600; color: var(--ui-text-muted); }
 .ui-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--ui-space-2) var(--ui-space-4); margin: 0; font-size: var(--ui-fs-body); }
 .ui-kv > dt { color: var(--ui-text-muted); }
@@ -3635,12 +3746,13 @@ button.ui-card__media, a.ui-card__media { cursor: pointer; }
 }
 
 /* Radio: the checkbox's row with `type="radio"` — `<fieldset class="ui-choices"><legend class="ui-label">Plan</legend>
-   <label class="ui-check"><input type="radio" name="plan" checked> Basic</label>…</fieldset>`. */
-.ui-choices { display: grid; gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
+   <label class="ui-check"><input type="radio" name="plan" checked><span>Basic</span></label>…</fieldset>`.
+   One minmax(0, 1fr) column: an auto column grows to the longest unbroken word in any label (0.9.0). */
+.ui-choices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0; border: 0; min-width: 0; }
 .ui-choices > legend { padding: 0; }
 
 /* Switch: a checkbox that reads as on / off, for a setting that applies at once (no Save button).
-   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked> Send Monday digest</label>`.
+   `<label class="ui-check ui-switch"><input type="checkbox" role="switch" checked><span>Send Monday digest</span></label>`.
    Track 32×20, thumb 16; the row stays the checkbox's 44px target. */
 .ui-switch > input[type="checkbox"] {
   appearance: none; -webkit-appearance: none; position: relative; width: 32px; height: 20px; margin: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/ui",
-  "version": "0.8.0",
+  "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
@@ -139,3 +215,29 @@
 @media (pointer: coarse), (max-width: 47.9975em) { .gemboss-topbar-search { height: 44px; } }
 /* A phone has no ⌘ key, and the box needs every pixel the bar has left. */
 @media (max-width: 460px) { .gemboss-topbar-search-kbd { display: none; } }
+
+/* ── Page width (0.8.1) ──────────────────────────────────────────────────────────────────────────────
+ * Chris 04/10/2026: the rail on the left, and on the right a content column with ONE max width across every
+ * service, not edge to edge. The admin's tiers (gemboss-shell.css, `.gemboss-w-*` around a Polaris Page), same
+ * numbers; `page-width.test.tsx` fails if the two disagree:
+ *   .ui-page          → --ui-content-max (900px, ui.css): lists, tables, card grids, dashboards
+ *   .ui-page--feed    → 720px: read top to bottom (activity, logs, timelines)
+ *   .ui-page--form    → 662px: one column of fields (Polaris narrowWidth)
+ *   .ui-page--canvas  → 1440px: content measured to be wider than a reading column (admin: the funnel path)
+ *   .ui-page--full    → no cap: a board or an editor that is the screen. Say why where you use it.
+ * A cap only exists where it is SMALLER than the room it sits in. Right of the 240px rail with main's 24px padding,
+ * 900 bites from 1188px up (1280 → 992 of room); 1440 bites only from ~1730px. Below that the column is simply the
+ * room, so the tier never causes a horizontal scroll.
+ * Here, not in ui.css: ui.css is exported verbatim into the admin under a 90 KB budget (89.8 KB at 0.7.3), and the
+ * admin draws its tiers on Polaris' Page instead. Fixed px, not %: a % cap grows the line length with the monitor. */
+.ui-page {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  max-width: var(--ui-content-max, 900px);
+  margin-inline: auto;
+}
+.ui-page--feed { max-width: 720px; }
+.ui-page--form { max-width: 662px; }
+.ui-page--canvas { max-width: 1440px; }
+.ui-page--full { max-width: none; }